视频 监控 抓拍记录

god-ui/src/views/videoSurveillance/intelligentMonitoring/index.vue

@@ -152,7 +152,9 @@
           @pagination="getList"
         />
       </el-tab-pane>
-      <el-tab-pane label="报警趋势分析" name="second">报警趋势分析</el-tab-pane>
+      <el-tab-pane label="报警趋势分析" name="second">
+        <div id="chart" style="width: 100%;height: 300px;"></div>
+      </el-tab-pane>
     </el-tabs>
 
 
@@ -332,6 +334,7 @@ import {
   listGodFileUploadComplete,
   updateGodFileUploadComplete
 } from '@/api/videoSurveillance/godFileUploadComplete'
+import { generateBaseOptions, initChartStatic } from '@/utils/bigscreenTool'
 
 export default {
   name: 'QyzyWorkRedio',
@@ -455,7 +458,89 @@ export default {
     },
     //tals 点击事件
     handleClick(tab, event) {
-      console.log(tab, event)
+      if (this.activeName === "second"){
+        // console.log(this.activeName,"书写趋势统计  查询逻辑")
+        this.$nextTick(() => {
+          const xAxis = [], baseDate = new Date();
+          for (let i = 0; i < 8; i++) {
+            const middleDate = new Date();
+            middleDate.setTime(baseDate.getTime() - i * 1000 * 60 * 60 * 24)
+            xAxis.unshift(`${middleDate.getMonth() + 1}-${middleDate.getDate()}`)
+          }
+          initChartStatic(
+            "chart",
+            generateBaseOptions({
+              title: {
+                text: "",
+              },
+              legend: {
+                x: "right", // 水平安放位置
+                y: "top", // 垂直安放位置
+                textStyle: {
+                  color: '#252525'
+                },
+              },
+              xAxis: {
+                data: xAxis,
+                lineStyle: {
+                  color: '#000'
+                }
+              },
+              yAxis: {
+                type: "value",
+                max: 20
+              },
+              color: ["#e70d48", "#7fcf52"],
+              // color: ["#e70d48"],
+              series: [
+                {
+                  name: '报警次数',
+                  data: [1, 1, 0, 0,0,2,0,1],
+                  type: "bar",
+                  barWidth: 25,
+                  itemStyle: {
+                    normal: {
+                      label: {
+                        show: true, //开启显示
+                        position: "top", //在上方显示
+                        textStyle: {
+                          //数值样式
+                          color: "#00000074",
+                          fontSize: 13,
+                        },
+                      },
+                    },
+                  }
+                },
+                {
+                  name: '已处理报警',
+                  data: [1, 1, 0, 0,0,2,0,0],
+                  type: "line",
+                  smooth: true,
+                  itemStyle: {
+                    normal: {
+                      label: {
+                        show: true, //开启显示
+                        position: "top", //在上方显示
+                        textStyle: {
+                          //数值样式
+                          color: "#00000074",
+                          fontSize: 13,
+                        },
+                      },
+                    },
+                  }
+                },
+              ],
+              grid: {
+                bottom: '15%',
+                top: '11%',
+              }
+            }, false)
+          );
+        })
+
+      }
     },
     /**
      * 关闭视频
@@ -634,10 +719,10 @@ export default {
         this.titleA = '报警处理'
       })
       this.queryParamsB.reserveOne = row.id
-      this.getListB()
+      this.getListB(this.queryParamsB)
     },
-    getListB() {
-      listGodFileUploadComplete(this.queryParamsB).then(response => {
+    getListB(re) {
+      listGodFileUploadComplete(re).then(response => {
         this.godFileUploadCompleteList = response.rows
         this.totalB = response.total
       })