fix: BUG修改

src/assets/js/api/equipmentCenter/cameraList.js

@@ -50,3 +50,7 @@ export const addPluginApi = data => post('/xmgl/devMonitorPlugin/addDevMonitorPl
 export const getPluginApi = data => get('/xmgl/devMonitorPlugin/selectPage', data); //分页查询监测插件
 export const editPluginApi = data => post('/xmgl/devMonitorPlugin/updateDevMonitorPlugin', data); //编辑监测插件
 export const delPluginApi = data =>  get('/xmgl/devMonitorPlugin/deleteById', data); //删除监测插件
+
+// 监控数据分析
+export const countStatusApi = data => post('xmgl/videoItem/countStatus', data);
+export const countStatusTrendApi = data => post('xmgl/videoItem/countStatusTrend', data);

src/views/projectFront/videoDataAnalysis/chartComponents/ChartFour.vue

@@ -6,8 +6,8 @@
       </div>
       <div class="time-condition">
         <el-radio-group v-model="timeRadio" size="small">
-          <el-radio-button label="3">近七日</el-radio-button>
+          <el-radio-button label="1">近七日</el-radio-button>
-          <el-radio-button label="4">近一月</el-radio-button>
+          <el-radio-button label="2">近一月</el-radio-button>
         </el-radio-group>
       </div>
     </div>
@@ -22,20 +22,45 @@
 </template>
 <script>
 import echarts from "echarts4";
+import {
+  countStatusTrendApi
+} from "@/assets/js/api/equipmentCenter/cameraList";
 export default {
   data() {
     return {
-      timeRadio: "3",
+      timeRadio: "1",
     };
   },
-  created() {},
+  created() {
+    this.getCountStatusTrendFn();
+  },
   mounted() {
-    this.centerOne();
   },
   methods: {
-    centerOne() {
+    getCountStatusTrendFn(){
+      let that = this;
+      countStatusTrendApi({
+        projectSn: this.$store.state.projectSn,
+        type: this.timeRadio
+      }).then((res) => {
+        console.log("趋势图", res);
+        that.centerOne(res.result)
+      });
+    },
+    centerOne(arr) {
+      let xData = [];
+      let yData1 = [];
+      let yData2 = [];
+      if(arr){
+        arr.map(item => {
+          xData.push(item.date)
+          yData1.push(item.onlineRatio + "%")
+          yData2.push(item.normalRatio + "%")
+        })
+      }
       let ageChart = echarts.init(this.$refs.ChartFour);
       let option = {
+        color: ["#65B1E5","#4775FC"],
         tooltip: {
           trigger: "axis",
           axisPointer: {
@@ -46,7 +71,7 @@ export default {
           },
         },
         legend: {
-          data: ["Email"],
+          data: ["监控点在线率","图像正常率"],
           right: 20,
           top: 10
         },
@@ -61,7 +86,7 @@ export default {
           {
             type: "category",
             boundaryGap: false,
-            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+            data: xData,
           },
         ],
         yAxis: [
@@ -71,14 +96,24 @@ export default {
         ],
         series: [
           {
-            name: "Email",
+            name: "监控点在线率",
             type: "line",
             stack: "Total",
             areaStyle: {},
             emphasis: {
               focus: "series",
             },
-            data: [120, 132, 101, 134, 90, 230, 210],
+            data: yData1,
+          },
+          {
+            name: "图像正常率",
+            type: "line",
+            stack: "Total",
+            areaStyle: {},
+            emphasis: {
+              focus: "series",
+            },
+            data: yData2,
           }
         ],
       };

src/views/projectFront/videoDataAnalysis/chartComponents/ChartOne.vue

@@ -11,15 +11,31 @@
 </template>
 <script>
 import echarts from "echarts4";
+import {
+  countStatusApi
+} from "@/assets/js/api/equipmentCenter/cameraList";
 export default {
   data() {
-    return {};
+    return {
+      countData: {}
+    };
+  },
+  created() {
+    this.getCountStatusFn();
   },
-  created() {},
   mounted() {
-    this.topChartOne();
   },
   methods: {
+    getCountStatusFn(){
+      let that = this;
+      countStatusApi({
+        projectSn: this.$store.state.projectSn,
+      }).then((res) => {
+        console.log("获取视频分组列表", res);
+        that.countData = res.result;
+        that.topChartOne();
+      });
+    },
     // 顶部图1
     topChartOne() {
       let ageChart = echarts.init(this.$refs.ChartOne);
@@ -30,7 +46,7 @@ export default {
           show: true,
           left: "32%",
           top: "40%",
-          text: "100.00%",
+          text: this.countData.onlineRatio + "%",
           textStyle: {
             fontSize: 20,
             color: "#000",
@@ -107,9 +123,9 @@ export default {
               show: false,
             },
             data: [
-              { value: 1048, name: "在线" },
+              { value: this.countData.onlineNum || 0, name: "在线" },
-              { value: 735, name: "离线" },
+              { value: this.countData.offlineNum || 0, name: "离线" },
-              { value: 580, name: "未检测" },
+              { value: this.countData.notDetectNum || 0, name: "未检测" },
             ],
           },
         ],

src/views/projectFront/videoDataAnalysis/monitorAnalysis.vue

@@ -3,7 +3,7 @@
     <div class="top-content">
       <div class="top-content-one">
         <span>监控点总数</span>
-        <span>56</span>
+        <span>{{countData.total || 0}}</span>
       </div>
       <div class="top-content-two">
         <ChartOne></ChartOne>
@@ -129,6 +129,9 @@ import ChartTwo from "./chartComponents/ChartTwo";
 import ChartThree from "./chartComponents/ChartThree";
 import ChartFour from "./chartComponents/ChartFour";
 import ChartFive from "./chartComponents/ChartFive";
+import {
+  countStatusApi
+} from "@/assets/js/api/equipmentCenter/cameraList";
 export default {
   data() {
     return {
@@ -141,6 +144,7 @@ export default {
         pageSize: 10,
         total: 0,
       },
+      countData: {}
     };
   },
   components: {
@@ -150,9 +154,19 @@ export default {
     ChartFour,
     ChartFive,
   },
-  created() {},
+  created() {
-  mounted() {},
+    this.getCountStatusFn();
+  },
   methods: {
+    getCountStatusFn(){
+      let that = this;
+      countStatusApi({
+        projectSn: this.$store.state.projectSn,
+      }).then((res) => {
+        console.log("获取视频分组列表", res);
+        that.countData = res.result;
+      });
+    },
     handleSizeChange(val) {
       this.pageInfo.pageSize = val;
       this.searchData();