检测大屏更新

src/views/inspection/screen/api/jcBigScreen.js

@@ -1,10 +1,67 @@
 import request from '@/utils/request'
 
 // 客户来源分析饼图
-export function chartLineInspectionAmount() {
+export function chartLineInspectionAmount(params) {
   return request({
-    url: '/partnerOwn/partner/chartLineInspectionAmount',
+    url: '/partnerOwn/partner/newChartLineInspectionAmount',
     method: 'get',
+    params: params
+  })
+}
+// 已收款金额
+export function getServerData1(params) {
+  return request({
+    url: '/partnerOwn/partner/newChartInfoAmount',
+    method: 'get',
+    params: params
+  })
+}
+// 数量统计
+export function chartInfoNum(params) {
+  return request({
+    url: '/partnerOwn/partner/newChartInfoNum',
+    method: 'get',
+    params: params
+  })
+}
+// 数量统计
+export function chartLineInspectionNum(params) {
+  return request({
+    url: '/partnerOwn/partner/newChartLineInspectionNum',
+    method: 'get',
+    params: params
+  })
+}
+// 检测合格率
+export function chartInfoRatio(params) {
+  return request({
+    url: '/partnerOwn/partner/newChartInfoRatio',
+    method: 'get',
+    params: params
+  })
+}
+// 五条
+export function getfive1(params) {
+  return request({
+    url: '/partnerOwn/partner/newStaticsTable1',
+    method: 'get',
+    params: params
+  })
+}
+// 五条
+export function getfive2(params) {
+  return request({
+    url: '/partnerOwn/partner/newStaticsTable2',
+    method: 'get',
+    params: params
+  })
+}
+// 五条
+export function getfive3(params) {
+  return request({
+    url: '/partnerOwn/partner/newStaticsTable3',
+    method: 'get',
+    params: params
   })
 }
 

src/views/inspection/screen/jcBigScreen.vue

@@ -11,21 +11,35 @@
             成交金额（已收款）
           </div>
           <div class="echaets_box">
-<!--            <div id="khly" style="width: 400px; height: 267px;"></div>-->
+            <div id="khly" style="width: 400px; height: 267px;"></div>
           </div>
         </div>
         <div class="six_box">
           <div class="s_title">
-            已收款金额统计分析
+            已收款金额(按车型)
+          </div>
+          <div class="dis-t">
+
+            <div class="lan-you">
+              <div class="yi" :class="{'er' : qhindex == index}" v-for="(item,index) in zilist" :key="index" @click="gbindex(index,item.unit)"> {{item.text}}</div>
+            </div>
           </div>
           <div class="echaets_box">
+            <div id="yskje" style="width: 400px; height: 267px;"></div>
           </div>
         </div>
         <div class="six_box">
           <div class="s_title">
-            订单数量统计分析
+            数量统计(按车型)
+          </div>
+          <div class="dis-t">
+
+            <div class="lan-you">
+              <div class="yi" :class="{'er' : qhindex1 == index}" v-for="(item,index) in zilist" :key="index" @click="gbindex1(index,item.unit)"> {{item.text}}</div>
+            </div>
           </div>
           <div class="echaets_box">
+            <div id="sltj" style="width: 400px; height: 267px;"></div>
           </div>
         </div>
       </div>
@@ -130,16 +144,24 @@
       <div class="c_right">
         <div class="six_box">
           <div class="s_title">
-            维修类型统计
+            检测数量
           </div>
           <div class="echaets_box">
+            <div id="jcsl" style="width: 400px; height: 267px;"></div>
           </div>
         </div>
         <div class="six_box">
           <div class="s_title">
-            月工单金额走势
+            检测合格率
+          </div>
+          <div class="dis-t">
+
+            <div class="lan-you">
+              <div class="yi" :class="{'er' : qhindex2 == index}" v-for="(item,index) in zilist" :key="index" @click="gbindex2(index,item.unit)"> {{item.text}}</div>
+            </div>
           </div>
           <div class="echaets_box">
+            <div id="jchgl" style="width: 400px; height: 267px;"></div>
           </div>
         </div>
         <div class="six_box">
@@ -156,58 +178,236 @@
 <script>
 import * as echarts from 'echarts';
 import * as jcBigScreen from '@/views/inspection/screen/api/jcBigScreen';
+import {chartInfoNum, chartLineInspectionAmount} from "@/views/inspection/screen/api/jcBigScreen";
 
 export default {
   name: 'Index',
   components: {},
   data() {
     return {
+      Amount: [],
+      unit: '',
+      unit1: '',
+      unit2: '',
+      chartData1: {},
+      params : {
+        unit:this.unit,
+      },
+      qhindex:0,
+      qhindex1:0,
+      qhindex2:0,
+      zilist:[
+        {text:'日',unit:'day'},
+        {text:'周',unit:'week'},
+        {text:'月',unit:'month'},
+        {text:'年',unit:'year'},
 
+      ],
     }
   },
   created() {
+    this.customerSource()
+    this.getServerData1()
+    this.chartInfoNum()
+    this.chartLineInspectionNum()
+    this.chartInfoRatio()
 
   },
   mounted() {
 
   },
   methods: {
+    gbindex(index,unit){
+      this.qhindex = index
+      this.unit = unit
+      this.getServerData1()
+    },
+    gbindex1(index,unit){
+      console.log('22',unit);
+      this.qhindex1 = index
+      this.unit1 = unit
+      this.chartInfoNum()
+    },
+    gbindex2(index,unit){
+      console.log('33');
+      this.qhindex2 = index
+      this.unit2 = unit
+      this.chartInfoRatio()
+    },
 
+    /**
+     * 已收款金额
+     * @returns {Promise<void>}
+     */
+    async getServerData1() {
+      const params = {
+        unit:this.unit,
+      }
+      let res = await jcBigScreen.getServerData1(params)
+      console.log('已收款金额',res)
+      res.data.series.forEach(item => {
+        item.type = 'bar'
+      })
+      var chartDom = document.getElementById('yskje');
+      var myChart = echarts.init(chartDom);
+      var option;
+      option = {
+        xAxis: {
+          type: 'category',
+          data: res.data.categories
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: res.data.series
+      };
+      option && myChart.setOption(option);
+    },
+    /**
+     * 数量统计
+     * @returns {Promise<void>}
+     */
+    async chartInfoNum() {
+      const params = {
+        unit:this.unit1,
+      }
+      let res = await jcBigScreen.chartInfoNum(params)
+      console.log('数量统计',res)
+      res.data.series.forEach(item => {
+        item.type = 'bar'
+      })
+      var chartDom = document.getElementById('sltj');
+      var myChart = echarts.init(chartDom);
+      var option;
+      option = {
+        xAxis: {
+          type: 'category',
+          data: res.data.categories
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: res.data.series
+      };
+      option && myChart.setOption(option);
+    },
+    /**
+     * 检测合格率
+     * @returns {Promise<void>}
+     */
+    async chartInfoRatio() {
+      const params = {
+        unit:this.unit2,
+      }
+      let res = await jcBigScreen.chartInfoRatio(params)
+      console.log('检测合格率',res)
+      res.data.series.forEach(item => {
+        item.type = 'bar'
+      })
+      var chartDom = document.getElementById('jchgl');
+      var myChart = echarts.init(chartDom);
+      var option;
+      option = {
+        xAxis: {
+          type: 'category',
+          data: res.data.categories
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: res.data.series
+      };
+      option && myChart.setOption(option);
+    },
+    /**
+     * 检测数量
+     * @returns {Promise<void>}
+     */
+    async chartLineInspectionNum() {
+      const params = {
+        unit:this.unit,
+      }
+      let res = await jcBigScreen.chartLineInspectionNum(params)
+      console.log('检测数量',res)
+      res.data.series.forEach(item => {
+        item.type = 'bar'
+      })
+      const names = res.data.series.map(item => item.name)
+      var chartDom = document.getElementById('jcsl');
+      var myChart = echarts.init(chartDom);
+      var option;
+      // option = {
+      //   xAxis: {
+      //     type: 'category',
+      //     data: res.data.categories
+      //   },
+      //   yAxis: {
+      //     type: 'value'
+      //   },
+      //   series: res.data.series
+      // };
+      option = {
+        title: {
+          text: '最近七天'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: names
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: res.data.categories
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: res.data.series
+      };
+      option && myChart.setOption(option);
+    },
 
     /**
      * 客户来源分析饼图
      */
     async customerSource() {
-      const res = await RepairBigScreenApi.customerSource();
+      const params = {
-        var chartDom = document.getElementById('khly');
+        unit:this.unit,
-        var myChart = echarts.init(chartDom);
+      }
-        var option;
+      const res = await jcBigScreen.chartLineInspectionAmount(params);
-        option = {
+      res.data.series.forEach(item => {
-          toolbox: {
+        item.type = 'line'
-            show: true,
+      })
-          },
+      var chartDom = document.getElementById('khly');
-          tooltip: {
+      var myChart = echarts.init(chartDom);
-            trigger: 'item',
+      var option;
-            formatter: "{a} <br/>{b} : {c} ({d}%)"
+      option = {
-          },
+        xAxis: {
-          series: [
+          type: 'category',
-            {
+          data: res.data.categories
-              name: '客户来源分析',
+        },
-              type: 'pie',
+        yAxis: {
-              radius: [20, 100],
+          type: 'value'
-              center: ['50%', '50%'],
+        },
-              roseType: 'area',
+        series: res.data.series
-              itemStyle: {
+      };
-                borderRadius: 2
+      option && myChart.setOption(option);
-              },
-              data: res.data,
-            }
-          ]
-        };
-        option && myChart.setOption(option);
     },
-
   }
+
 }
 </script>
 
@@ -240,6 +440,17 @@ export default {
   //align-items: center;
   justify-content: space-between;
 }
+.dis-t{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 10px auto;
+}
+.lan-you{
+  display: flex;
+  align-items: center;
+}
 
 .c_left {
   width: 25%;