|
|
@@ -0,0 +1,210 @@
|
|
|
+<template>
|
|
|
+ <div class="dashboard_container">
|
|
|
+ <div class="container_top">
|
|
|
+ <div class="tab" v-for="(item,index) in tabs" :key='index'>
|
|
|
+ <el-image :src="item.url" fit="fit"></el-image>
|
|
|
+ <div class="text">
|
|
|
+ <div class="title">{{item.title}}</div>
|
|
|
+ <div class="num">{{item.num}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="container_center">
|
|
|
+ <div class="chart">
|
|
|
+ <div class="head">
|
|
|
+ <div class="title">近7天订单趋势</div>
|
|
|
+ <div class="more">查看更多</div>
|
|
|
+ </div>
|
|
|
+ <div ref="chart1" style="width: 100%;height: 280px;"></div>
|
|
|
+ </div>
|
|
|
+ <div class="chart">
|
|
|
+ <div class="head">
|
|
|
+ <div class="title">未来7天需上门</div>
|
|
|
+ </div>
|
|
|
+ <div ref="chart2" style="width: 100%;height: 280px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="container_bottom">
|
|
|
+ <div class="chart">
|
|
|
+ <div class="head">
|
|
|
+ <div class="title">近30天完工类型分布</div>
|
|
|
+ </div>
|
|
|
+ <div ref="chart3" style="width: 100%;height: 330px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default{
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ tabs: [{title: '待派工',num: 12,url: ''},{title: '待接收',num: 22,url: ''},{title: '服务中',num: 53,url: ''},{title: '异常待处理',num: 2,url: ''},{title: '差评统计',num: 0,url: ''}]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.drawChat1()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ drawChat1(){
|
|
|
+ let chart1 = this.$echarts.init(this.$refs.chart1)
|
|
|
+ let chart2 = this.$echarts.init(this.$refs.chart2)
|
|
|
+ let chart3 = this.$echarts.init(this.$refs.chart3)
|
|
|
+ let option1 = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['新增工单', '完工工单', '进行中']
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '新增工单',
|
|
|
+ data: [820, 932, 901, 934, 1290, 1330, 2320],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true
|
|
|
+ },{
|
|
|
+ name: '完工工单',
|
|
|
+ data: [420, 532, 801, 234, 1790, 1030, 3320],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true
|
|
|
+ },{
|
|
|
+ name: '进行中',
|
|
|
+ data: [120, 532, 901, 1234, 1790, 1530, 1920],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ let option2 = {
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['12-17', '12-18', '12-19', '12-20', '12-21', '12-22', '12-23']
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ data: [820, 932, 901, 934, 1290, 1330, 2320],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ let option3 = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['安装', '维修', '清洗']
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['11-24', '11-25', '11-26', '11-27', '11-28', '11-29', '11-30', '12-01', '12-02', '12-03', '12-04', '12-05', '12-06', '12-07', '12-08', '12-09', '12-10', '12-11', '12-12', '12-13', '12-14', '12-15', '12-16', '12-17', '12-18', '12-19', '12-20', '12-21', '12-22', '12-23']
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '安装',
|
|
|
+ data: [820, 932, 901, 934, 1290, 1330, 2320, 320, 632, 301, 234, 1230, 1330, 1320,1220, 932, 511, 994, 1290, 1130, 1520,1220, 1232, 951, 2134, 1290, 5210, 2220,3420, 1932],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true
|
|
|
+ },{
|
|
|
+ name: '维修',
|
|
|
+ data: [420, 532, 801, 234, 1790, 1030, 3320, 820, 932, 901, 934, 1290, 1330, 2320,820, 932, 901, 934, 1290, 1330, 2320,820, 932, 901, 934, 1290, 1330, 2320,820, 932],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true
|
|
|
+ },{
|
|
|
+ name: '清洗',
|
|
|
+ data: [120, 532, 901, 1234, 1790, 1530, 1920, 1120, 532, 201, 534, 1190, 1230, 2320,2520, 222, 1111, 934, 4390, 2230, 2320, 1520, 922, 551, 224, 3520, 1230, 1620, 1820, 232],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ chart1.setOption(option1)
|
|
|
+ chart2.setOption(option2)
|
|
|
+ chart3.setOption(option3)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .dashboard_container{
|
|
|
+ background: #f5f5f5;
|
|
|
+ padding: 20px;
|
|
|
+ min-height: calc(100vh - 86px);
|
|
|
+ box-sizing: border-box;
|
|
|
+ .container_top{
|
|
|
+ display: flex;
|
|
|
+ .tab{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex: 1;
|
|
|
+ padding: 20px;
|
|
|
+ margin-right: 20px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 10px;
|
|
|
+ .text{
|
|
|
+ margin-left: 30px;
|
|
|
+ .title{
|
|
|
+ color: #666666;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+ .num{
|
|
|
+ font-size: 26px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tab:last-child{
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .container_center{
|
|
|
+ display: flex;
|
|
|
+ margin: 10px 0;
|
|
|
+ margin-top: 20px;
|
|
|
+ .chart{
|
|
|
+ flex: 1;
|
|
|
+ height: 300px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ .chart:last-child{
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .container_bottom{
|
|
|
+ width: 100%;
|
|
|
+ height: 350px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ }
|
|
|
+ .head{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 16px 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ .more{
|
|
|
+ color: #1d82ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
pengyh