feat：数据大屏

src/api/bigView.js

@@ -28,10 +28,19 @@ export function getOrderStats(params) {
 }
 
 // 订单金额趋势
-export function getOrderAmountTrend(params) {
+export function getOrderTrend(params) {
   return request({
     url: '/big/getLarge8',
     method: 'post',
     params
   })
+}
+
+// 订单金额趋势
+export function getWorkorderTrend(params) {
+  return request({
+    url: '/big/getLarge6',
+    method: 'post',
+    params
+  })
 }

src/components/moduleEnclosure.vue

@@ -61,11 +61,12 @@ export default {
   z-index: 999;
 }
 .am-moduleEnclosureTitle-div {
-  width: 100%;
   height: 20px;
   display: flex;
   flex-direction: row;
   align-items: center;
+  flex-shrink: 0;
+  margin-right: 20px;
 }
 .am-moduleEnclosureTitle {
   width: 100%;
@@ -73,6 +74,7 @@ export default {
   display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: space-between;
   margin-top: -4px;
   font-size: 14px;
   font-family: Source Han Sans CN, Source Han Sans CN-Bold;

src/views/bigViews/dataView1/components/orderAmountTrend.vue

@@ -1,6 +1,6 @@
 <template>
   <moduleEnclosure title="近30日订单金额趋势">
-    <div class="dvScrollBoardView">
+    <div class="all-container">
       <div id="orderEcharts2" style="width: 100%; height: 100%"></div>
     </div>
   </moduleEnclosure>
@@ -9,7 +9,7 @@
 <script>
 import * as echarts from 'echarts';
 import moduleEnclosure from '@/components/moduleEnclosure.vue';
-import { getOrderAmountTrend } from '@/api/bigView.js';
+import { getOrderTrend } from '@/api/bigView.js';
 
 export default {
   components: {
@@ -23,9 +23,9 @@ export default {
   },
 
   async mounted() {
-    const data = await this.getData();
-
-    this.initEcharts();
+    getOrderTrend().then(res => {
+      this.initEcharts(res.data);
+    })
   },
 
   beforeUnmount() {
@@ -33,15 +33,20 @@ export default {
   },
 
   methods: {
-    getData() {
-      return new Promise((resolve, reject) => {
-        getOrderAmountTrend().then(res => {
-          resolve(res.data);
-        })
-      })
+    getDate() {
+      const today = new Date();
+      const dates = [];
+      
+      for (let i = 0; i < 30; i++) {
+        const d = new Date();
+        d.setDate(today.getDate() - i);
+        dates.push(d.toISOString().split('T')[0].slice(5, 11));
+      }
+      
+      return dates;
     },
 
-    initEcharts() {
+    initEcharts(data) {
       var chartDom = document.getElementById('orderEcharts2');
       var myChart = echarts.init(chartDom);
       var option;
@@ -51,9 +56,26 @@ export default {
           text: ''
         },
         tooltip: {
-          trigger: 'axis'
+          trigger: 'axis',
+          transitionDuration: 0,
+          backgroundColor: '#092a66',
+          borderColor: '#0462b5',
+          borderRadius: 8,
+          borderWidth: 2,
+          padding: [5, 10],
+          axisPointer: {
+            type: 'line',
+            lineStyle: {
+              type: 'dashed',
+              color: '#8AB1DC',
+            },
+          },
+          textStyle: {
+            color: '#ffffff'
+          }
         },
         legend: {
+          icon: 'circle',
           data: ['新增销售金额', '新增辅材金额', '新增配件金额', '新增增值金额'],
           textStyle: {
             color: '#ffffff'
@@ -82,14 +104,14 @@ export default {
           splitLine: {
             show: true,
             lineStyle: {
-              color: '#666666', // x轴辅助线颜色
+              color: '#364D95', // x轴辅助线颜色
             }
           },
-          data: ['04/23', '04/24', '04/25', '04/26', '04/27', '04/28', '04/29']
+          data: this.getDate()
         },
         yAxis: {
           type: 'value',
-          name: "（万元）",
+          name: "（元）",
           nameTextStyle: {
             color: "#aaa",
             nameLocation: "start",
@@ -103,7 +125,7 @@ export default {
           splitLine: {
             show: true,
             lineStyle: {
-              color: '#666666', // y轴辅助线颜色
+              color: '#364D95', // y轴辅助线颜色
             }
           }
         },
@@ -112,25 +134,45 @@ export default {
             name: '新增销售金额',
             type: 'line',
             stack: 'Total',
-            data: [120, 132, 101, 134, 90, 230, 210]
+            itemStyle: {
+              normal: {
+                color: '#FDFE02',
+              },
+            },
+            data: data.map(o => o.sxddje)
           },
           {
             name: '新增辅材金额',
             type: 'line',
             stack: 'Total',
-            data: [220, 182, 191, 234, 290, 330, 310]
+            itemStyle: {
+              normal: {
+                color: '#44E28F',
+              },
+            },
+            data: data.map(o => o.fcddje)
           },
           {
             name: '新增配件金额',
             type: 'line',
             stack: 'Total',
-            data: [150, 232, 201, 154, 190, 330, 410]
+            itemStyle: {
+              normal: {
+                color: '#41C5E2',
+              },
+            },
+            data: data.map(o => o.pjddje)
           },
           {
             name: '新增增值金额',
             type: 'line',
             stack: 'Total',
-            data: [320, 332, 301, 334, 390, 330, 320]
+            itemStyle: {
+              normal: {
+                color: '#D73A79',
+              },
+            },
+            data: data.map(o => o.zzddje)
           }
         ]
       };
@@ -142,7 +184,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.dvScrollBoardView {
+.all-container {
   width: 100%;
   height: 100%;
   box-sizing: border-box;

src/views/bigViews/dataView1/components/orderTrend.vue

@@ -7,9 +7,10 @@
 <script>
 import moduleEnclosure from '@/components/moduleEnclosure.vue';
 import * as echarts from 'echarts';
-import { getQuery10 } from '@/api/bigView.js';
+import { getOrderTrend } from '@/api/bigView.js';
 import { csize } from '@/utils/const.js';
 let myChart4;
+
 export default {
   components: {
     moduleEnclosure,
@@ -20,24 +21,42 @@ export default {
     };
   },
   mounted() {
-    // this.timeId = getQuery10((res) => {
-    //   this.init_myChart2(res.data);
-    // }, 40000);
+    getOrderTrend().then(res => {
+      this.initEcharts(res.data);
+    })
   },
+
   beforeUnmount() {
-    this.timeId();
+    
   },
+
   methods: {
-    init_myChart2(value) {
-      var times = value.map((item) => {
-        var str1 = item.ddate.split(' ')[0];
-        return str1.slice(5);
+    getDate() {
+      const today = new Date();
+      const dates = [];
+      
+      for (let i = 0; i < 30; i++) {
+        const d = new Date();
+        d.setDate(today.getDate() - i);
+        dates.push(d.toISOString().split('T')[0].slice(5, 11));
+      }
+      
+      return dates;
+    },
+
+    initEcharts(data) {
+      var times = this.getDate();
+      var data1 = data.map((item) => {
+        return item.sxdds || 0;
+      });
+      var data2 = data.map((item) => {
+        return item.fcdds || 0;
       });
-      var data1 = value.map((item) => {
-        return item.completeOrder || 0;
+      var data3 = data.map((item) => {
+        return item.pjdds || 0;
       });
-      var data2 = value.map((item) => {
-        return item.totalOrder || 0;
+      var data4 = data.map((item) => {
+        return item.zzdds || 0;
       });
       if (myChart4) {
         myChart4.dispose();
@@ -46,14 +65,6 @@ export default {
       myChart4.setOption({
         tooltip: {
           trigger: 'axis',
-          formatter: function (params) {
-            var res = '';
-            for (var i = 0, l = params.length; i < l; i++) {
-              res +=
-                '' + params[i].seriesName + ' : ' + params[i].value + '<br>';
-            }
-            return `<div style="color:#fff;">${res}</div>`;
-          },
           transitionDuration: 0,
           backgroundColor: '#092a66',
           borderColor: '#0462b5',
@@ -67,6 +78,9 @@ export default {
               color: '#8AB1DC',
             },
           },
+          textStyle: {
+            color: '#ffffff'
+          }
         },
         legend: {
           icon: 'circle',
@@ -75,18 +89,16 @@ export default {
           itemGap: 10,
           top: '16',
           right: '10',
-          data: ['维修新增', '维修完成'],
+          data: ['新增销售单', '新增辅材单', '新增配件单', '新增增值单'],
           textStyle: {
-            fontSize: csize(16),
-            color: '#8AB1DC',
+            color: '#ffffff',
           },
         },
         grid: {
-          x: csize(65),
-          y: csize(50),
-          x2: csize(30),
-          y2: csize(30),
-          containLabel: false,
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
         },
         xAxis: [
           {
@@ -96,7 +108,6 @@ export default {
               interval: Math.floor(times.length / 10),
               showMinLabel: true, //是否显示最小 tick 的 label
               showMaxLabel: true, //是否显示最大 tick 的 label
-              fontSize: csize(12),
             },
             axisLine: {
               show: false,
@@ -113,9 +124,11 @@ export default {
         yAxis: [
           {
             type: 'value',
-            name: '单',
+            name: '（单/台）',
             nameTextStyle: {
-              fontSize: csize(16),
+              color: "#aaa",
+              nameLocation: "start",
+              // align: 'right'
             },
             axisLine: {
               show: false,
@@ -141,7 +154,7 @@ export default {
         ],
         series: [
           {
-            name: '维修新增',
+            name: '新增销售单',
             type: 'line',
             smooth: true,
             showSymbol: false,
@@ -160,11 +173,11 @@ export default {
                   [
                     {
                       offset: 0,
-                      color: 'rgba(137, 189, 27, 0.3)',
+                      color: 'rgba(253, 173, 96, 0.3)',
                     },
                     {
                       offset: 0.8,
-                      color: 'rgba(137, 189, 27, 0)',
+                      color: 'rgba(253, 173, 96, 0)',
                     },
                   ],
                   false
@@ -175,13 +188,13 @@ export default {
             },
             itemStyle: {
               normal: {
-                color: '#F34799',
+                color: '#FDAD60',
               },
             },
             data: data1,
           },
           {
-            name: '维修完成',
+            name: '新增辅材单',
             type: 'line',
             smooth: true,
             showSymbol: false,
@@ -200,11 +213,11 @@ export default {
                   [
                     {
                       offset: 0,
-                      color: 'rgba(0, 136, 212, 0.3)',
+                      color: 'rgba(68, 226, 143, 0.3)',
                     },
                     {
                       offset: 0.8,
-                      color: 'rgba(0, 136, 212, 0)',
+                      color: 'rgba(68, 226, 143, 0)',
                     },
                   ],
                   false
@@ -215,11 +228,91 @@ export default {
             },
             itemStyle: {
               normal: {
-                color: '#38A0D6',
+                color: '#44E28F',
               },
             },
             data: data2,
           },
+          {
+            name: '新增配件单',
+            type: 'line',
+            smooth: true,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                width: 2,
+              },
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: 'rgba(160, 61, 239, 0.3)',
+                    },
+                    {
+                      offset: 0.8,
+                      color: 'rgba(160, 61, 239, 0)',
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: 'rgba(0, 0, 0, 0.1)',
+                shadowBlur: 10,
+              },
+            },
+            itemStyle: {
+              normal: {
+                color: '#A03DEF',
+              },
+            },
+            data: data3,
+          },
+          {
+            name: '新增增值单',
+            type: 'line',
+            smooth: true,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                width: 2,
+              },
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: 'rgba(65, 197, 226, 0.3)',
+                    },
+                    {
+                      offset: 0.8,
+                      color: 'rgba(65, 197, 226, 0)',
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: 'rgba(0, 0, 0, 0.1)',
+                shadowBlur: 10,
+              },
+            },
+            itemStyle: {
+              normal: {
+                color: '#41C5E2',
+              },
+            },
+            data: data4,
+          },
         ],
       });
     },

src/views/bigViews/dataView1/components/workOrderTrend.vue

@@ -4,71 +4,84 @@
 	    <div class="tabbar">
 	    	<div
           class="tab"
-          :class="tabIndex == index ? 'active' : ''"
-          v-for="(item,index) in tabList"
+          :class="tabCurrent == item ? 'active' : ''"
+          v-for="(item, index) in tabList"
           :key="index"
-          @click="tabIndex = index">
+          @click="changeTab(item)">
           {{item}}
         </div>
 	    </div>
 	  </template>
-		
-    <div id="main2" style="width: 100%; height: 100%"></div>
+		<div class="all-container">
+      <div id="workorderEcharts1" style="width: 100%; height: 100%"></div>
+    </div>
   </moduleEnclosure>
 </template>
 
 <script>
 import moduleEnclosure from '@/components/moduleEnclosure.vue';
 import * as echarts from 'echarts';
-import { getQuery11 } from '@/api/bigView.js';
-import { csize } from '@/utils/const.js';
-let myChart3;
+import { getWorkorderTrend } from '@/api/bigView.js';
+
 export default {
   components: {
     moduleEnclosure,
   },
   data() {
     return {
-      tabList: ['安装', '维修', '回收'],
-      tabIndex: 0,
-      myChart2: null,
+      tabList: [],
+      tabCurrent: '',
+      tableData: [],
     };
   },
+
   mounted() {
-    this.timeId = getQuery11((res) => {
-      this.init_myChart2(res.data);
-    }, 30000);
+    this.initData();
   },
+
   beforeUnmount() {
-    this.timeId();
+    
   },
+
   methods: {
-    init_myChart2(value) {
-      var times = value.map((item) => {
-        var str1 = item.ddate.split(' ')[0];
-        return str1.slice(5);
-      });
-      var data1 = value.map((item) => {
-        return item.completeMachine;
-      });
-      var data2 = value.map((item) => {
-        return item.completeOrder;
-      });
-      if (myChart3) {
-        myChart3.dispose();
+    getDate() {
+      const today = new Date();
+      const dates = [];
+      
+      for (let i = 0; i < 30; i++) {
+        const d = new Date();
+        d.setDate(today.getDate() - i);
+        dates.push(d.toISOString().split('T')[0].slice(5, 11));
       }
-      myChart3 = new echarts.init(document.getElementById('main2'));
-      myChart3.setOption({
+      
+      return dates;
+    },
+
+    changeTab(item) {
+      this.tabCurrent = item;
+      this.initEcharts();
+    },
+
+    initData() {
+      getWorkorderTrend().then(res => {
+        this.tabList = res.data.map(o => o.lx);
+        this.tabCurrent = this.tabList[0];
+        this.tableData = res.data;
+        this.initEcharts();
+      })
+    },
+
+    initEcharts() {
+      var chartDom = document.getElementById('workorderEcharts1');
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      option = {
+        title: {
+          text: ''
+        },
         tooltip: {
           trigger: 'axis',
-          formatter: function (params) {
-            var res = '';
-            for (var i = 0, l = params.length; i < l; i++) {
-              res +=
-                '' + params[i].seriesName + ' : ' + params[i].value + '<br>';
-            }
-            return `<div style="color:#fff;">${res}</div>`;
-          },
           transitionDuration: 0,
           backgroundColor: '#092a66',
           borderColor: '#0462b5',
@@ -82,189 +95,124 @@ export default {
               color: '#8AB1DC',
             },
           },
+          textStyle: {
+            color: '#ffffff'
+          }
         },
         legend: {
           icon: 'circle',
-          itemWidth: 8,
-          itemHeight: 8,
-          itemGap: 10,
-          top: '16',
-          right: '10',
-          data: ['新增', '完成'],
+          data: ['已完工', '未完工'],
           textStyle: {
-            fontSize: csize(16),
-            color: '#8AB1DC',
+            color: '#ffffff'
           },
+          right: 0,
         },
         grid: {
-          x: csize(65),
-          y: csize(50),
-          x2: csize(30),
-          y2: csize(30),
-          containLabel: false,
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
         },
-        xAxis: [
-          {
-            type: 'category',
-            boundaryGap: false,
-            axisLabel: {
-              interval: Math.floor(times.length / 10),
-              showMinLabel: true, //是否显示最小 tick 的 label
-              showMaxLabel: true, //是否显示最大 tick 的 label
-              fontSize: csize(12),
-            },
-            axisLine: {
-              show: false,
-              lineStyle: {
-                color: '#8AB1DC',
-              },
-            },
-            axisTick: {
-              show: false,
-            },
-            data: times,
+        toolbox: {
+          // feature: {
+          //   saveAsImage: {}
+          // }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLine: {
+            lineStyle: {
+              color: '#ffffff', // x轴文字颜色
+            }
           },
-        ],
-        yAxis: [
-          {
-            type: 'value',
-            name: '单',
-            nameTextStyle: {
-              fontSize: csize(16),
-            },
-            axisLine: {
-              show: false,
-              lineStyle: {
-                color: '#8AB1DC',
-              },
-            },
-            axisLabel: {
-              margin: 10,
-              textStyle: {
-                fontSize: csize(12),
-              },
-            },
-            splitLine: {
-              lineStyle: {
-                color: '#364D95',
-              },
-            },
-            axisTick: {
-              show: false,
-            },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#364D95', // x轴辅助线颜色
+            }
           },
-        ],
+          data: this.getDate()
+        },
+        yAxis: {
+          type: 'value',
+          name: "（单/台）",
+          nameTextStyle: {
+            color: "#aaa",
+            nameLocation: "start",
+            // align: 'right'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#ffffff', // y轴文字颜色
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#364D95', // y轴辅助线颜色
+            }
+          }
+        },
         series: [
           {
-            name: '新增',
+            name: '已完工',
             type: 'line',
-            smooth: true,
-            showSymbol: false,
-            lineStyle: {
-              normal: {
-                width: 2,
-              },
-            },
-            areaStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(
-                  0,
-                  0,
-                  0,
-                  1,
-                  [
-                    {
-                      offset: 0,
-                      color: 'rgba(137, 189, 27, 0.3)',
-                    },
-                    {
-                      offset: 0.8,
-                      color: 'rgba(137, 189, 27, 0)',
-                    },
-                  ],
-                  false
-                ),
-                shadowColor: 'rgba(0, 0, 0, 0.1)',
-                shadowBlur: 10,
-              },
-            },
+            stack: 'Total',
             itemStyle: {
               normal: {
-                color: '#1cc840',
+                color: '#FDFE02',
               },
             },
-            data: data1,
+            data: this.tableData.find(o => o.lx == this.tabCurrent).unitNum
           },
           {
-            name: '完成',
+            name: '未完工',
             type: 'line',
-            smooth: true,
-            showSymbol: false,
-            lineStyle: {
-              normal: {
-                width: 2,
-              },
-            },
-            areaStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(
-                  0,
-                  0,
-                  0,
-                  1,
-                  [
-                    {
-                      offset: 0,
-                      color: 'rgba(0, 136, 212, 0.3)',
-                    },
-                    {
-                      offset: 0.8,
-                      color: 'rgba(0, 136, 212, 0)',
-                    },
-                  ],
-                  false
-                ),
-                shadowColor: 'rgba(0, 0, 0, 0.1)',
-                shadowBlur: 10,
-              },
-            },
+            stack: 'Total',
             itemStyle: {
               normal: {
-                color: '#43bbfb',
+                color: '#44E28F',
               },
             },
-            data: data2,
+            data: this.tableData.find(o => o.lx == this.tabCurrent).unitNumWwg
           },
-        ],
-      });
-    },
+        ]
+      };
+
+      option && myChart.setOption(option);
+    }
   },
 };
 </script>
 
 <style scoped lang="scss">
-	.tabbar{
-		display: flex;
-		.tab{
-			width: 50px;
-			color: #ffffff;
-			border: 1px solid #254280;
-			font-size: 12px;
-			font-weight: bold;
-			padding: 2px 0;
-			margin-right: 14px;
-			text-align: center;
-			cursor: pointer;
-      &:last-child {
-        margin-right: 0;
-      }
-		}
-		.active{
-			border: 1px solid #153781;
-			color: #1a8dc8;
-		}
-	}
-	#main2{
-		
-	}
+.all-container {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding-top: 16px;
+}
+.tabbar{
+  display: flex;
+  flex-wrap: wrap;
+  .tab{
+    width: 50px;
+    color: #ffffff;
+    border: 1px solid #254280;
+    font-size: 12px;
+    font-weight: bold;
+    padding: 2px 0;
+    margin-right: 10px;
+    text-align: center;
+    cursor: pointer;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+  .active{
+    border: 1px solid #153781;
+    color: #1a8dc8;
+  }
+}
 </style>