From 72b2ace0177f9d3879733b7ac80848d65aa313e2 Mon Sep 17 00:00:00 2001
From: LokerL <loker80@qq.com>
Date: Fri, 11 Oct 2024 21:16:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=E6=8A=A5=E8=AD=A6?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86-=E5=8E=82=E7=95=8C=E5=9C=A8=E7=BA=BF?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

调整报警管理-厂界在线页面，解决选择部门后页面无数据的问题，修改页面后端接口。
---
 .../oil/controller/OilAnalysisController.java |  31 +
 .../oil/mapper/ThDeviceReportMapper.java      |   7 +
 .../service/IOilThDeviceReportService.java    |   4 +
 .../impl/OilThDeviceReportService.java        |  10 +
 .../mybatis/oil/ThDeviceReportMapper.xml      |  48 ++
 ruoyi-ui/src/api/analysis/index.js            |   9 +
 .../src/views/dataAnalysis/bound/index.vue    | 620 ++++++++++--------
 7 files changed, 440 insertions(+), 289 deletions(-)
 create mode 100644 RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/controller/OilAnalysisController.java
 create mode 100644 ruoyi-ui/src/api/analysis/index.js

diff --git a/RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/controller/OilAnalysisController.java b/RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/controller/OilAnalysisController.java
new file mode 100644
index 0000000..c752cbd
--- /dev/null
+++ b/RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/controller/OilAnalysisController.java
@@ -0,0 +1,31 @@
+package com.ruoyi.project.oil.controller;
+
+import com.ruoyi.framework.web.controller.BaseController;
+import com.ruoyi.framework.web.domain.AjaxResult;
+import com.ruoyi.project.oil.service.IOilThDeviceReportService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+@RestController
+@RequestMapping("/analysis")
+public class OilAnalysisController extends BaseController {
+
+    @Autowired
+    private IOilThDeviceReportService oilThDeviceReportService;
+
+    @GetMapping("/factoryBoundaryOnline")
+    public AjaxResult getDeviceReport(Long deptId, String beginDate, String endDate) {
+        List<Map<String, Object>> alarmCount = oilThDeviceReportService.selectAlarmCountByDeptIdAndDateRange(deptId, beginDate, endDate);
+        List<Map<String, Object>> alarmCountDesc = oilThDeviceReportService.selectAlarmCountByDeptIdAndDateRangeDesc(deptId, beginDate, endDate);
+        Map<String, Object> resultMap = new HashMap<>();
+        resultMap.put("alarmCount", alarmCount);
+        resultMap.put("alarmCountDesc", alarmCountDesc);
+        return AjaxResult.success(resultMap);
+    }
+}
diff --git a/RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/mapper/ThDeviceReportMapper.java b/RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/mapper/ThDeviceReportMapper.java
index 394ef2f..72dea74 100644
--- a/RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/mapper/ThDeviceReportMapper.java
+++ b/RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/mapper/ThDeviceReportMapper.java
@@ -71,4 +71,11 @@ public interface ThDeviceReportMapper {
      */
     @MapKey("day")
     List<Map<String, Object>> dailyReportDataOverview(@Param("day") String day);
+
+    @MapKey("day")
+    List<Map<String, Object>> selectAlarmCountByDeptIdAndDateRange(@Param("deptId") Long deptId, @Param("beginDate") String beginDate, @Param("endDate") String endDate);
+
+    @MapKey("sn")
+    List<Map<String, Object>> selectAlarmCountByDeptIdAndDateRangeDesc(@Param("deptId") Long deptId, @Param("beginDate") String beginDate, @Param("endDate") String endDate);
+
 }
diff --git a/RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/service/IOilThDeviceReportService.java b/RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/service/IOilThDeviceReportService.java
index 809c6dc..c4ab0b1 100644
--- a/RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/service/IOilThDeviceReportService.java
+++ b/RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/service/IOilThDeviceReportService.java
@@ -9,4 +9,8 @@ public interface IOilThDeviceReportService {
     List<Map<String, Object>> monthReportDataOverviewDeviceDs(Long deptId, String month);
 
     List<Map<String, Object>>  dailyReportDataOverview(String day);
+
+    List<Map<String, Object>> selectAlarmCountByDeptIdAndDateRange(Long deptId, String beginDate, String endDate);
+
+    List<Map<String, Object>> selectAlarmCountByDeptIdAndDateRangeDesc(Long deptId, String beginDate, String endDate);
 }
diff --git a/RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/service/impl/OilThDeviceReportService.java b/RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/service/impl/OilThDeviceReportService.java
index bdd02be..65bafc5 100644
--- a/RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/service/impl/OilThDeviceReportService.java
+++ b/RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/service/impl/OilThDeviceReportService.java
@@ -31,4 +31,14 @@ public class OilThDeviceReportService  implements IOilThDeviceReportService {
         return camelCaseMapListKey(thDeviceReportMapper.dailyReportDataOverview(day));
     }
 
+    @Override
+    public List<Map<String, Object>> selectAlarmCountByDeptIdAndDateRange(Long deptId, String beginDate, String endDate) {
+        return camelCaseMapListKey(thDeviceReportMapper.selectAlarmCountByDeptIdAndDateRange(deptId, beginDate, endDate));
+    }
+
+    @Override
+    public List<Map<String, Object>> selectAlarmCountByDeptIdAndDateRangeDesc(Long deptId, String beginDate, String endDate) {
+        return camelCaseMapListKey(thDeviceReportMapper.selectAlarmCountByDeptIdAndDateRangeDesc(deptId, beginDate, endDate));
+    }
+
 }
diff --git a/RuoYi-Vue-Oracle/src/main/resources/mybatis/oil/ThDeviceReportMapper.xml b/RuoYi-Vue-Oracle/src/main/resources/mybatis/oil/ThDeviceReportMapper.xml
index 1d90452..ec182ed 100644
--- a/RuoYi-Vue-Oracle/src/main/resources/mybatis/oil/ThDeviceReportMapper.xml
+++ b/RuoYi-Vue-Oracle/src/main/resources/mybatis/oil/ThDeviceReportMapper.xml
@@ -177,4 +177,52 @@
         GROUP BY TO_CHAR(d.report_time, 'YYYY-MM-DD'), ppp.dept_name, pp.dept_name, p.dept_name, d.sn
         ORDER BY ppp.dept_name, pp.dept_name, p.dept_name
     </select>
+    <!--  选择日期范围内 某个部门id下的所有子部门的所有设备的报警每日数量；统计(d.zt = '一级报警' OR d.zt = '二级报警')的alarm_count， 统计当天全部的数量count -->
+    <select id="selectAlarmCountByDeptIdAndDateRange" parameterType="map" resultType="map">
+        SELECT TO_CHAR(d.report_time, 'YYYY-MM-DD') AS day,
+                COUNT(CASE WHEN d.zt = '一级报警' OR d.zt = '二级报警' THEN 1 END) AS alarm_count,
+                COUNT(1) AS count
+        FROM th_device_report d
+                 LEFT JOIN th_device td ON d.sn = td.sn
+                 LEFT JOIN sys_dept p ON td.dept_id = p.dept_id
+        WHERE d.sn IN (SELECT d.sn
+                       FROM th_device d
+                                LEFT JOIN sys_dept p ON d.dept_id = p.dept_id
+                       WHERE d.dept_id IN (SELECT dept_id
+                                           FROM sys_dept START WITH dept_id = #{deptId}
+                                               CONNECT BY PRIOR dept_id = parent_id))
+          AND d.report_time &gt;= TO_DATE(#{beginDate}, 'YYYY-MM-DD')
+          AND d.report_time &lt;= TO_DATE(#{endDate}, 'YYYY-MM-DD')
+        GROUP BY TO_CHAR(d.report_time, 'YYYY-MM-DD')
+        ORDER BY day
+    </select>
+
+    <!--  选择日期范围内 某个部门id下的所有子部门的所有设备的报警数量 降序排列 -->
+    <select id="selectAlarmCountByDeptIdAndDateRangeDesc" parameterType="map" resultType="map">
+        SELECT d.sn,
+               COUNT(d.id)   AS count,
+               p.dept_name   as "p",
+               pp.dept_name  as "pp",
+               ppp.dept_name as "ppp",
+               td.address,
+               td.name,
+               d.zt
+
+        FROM th_device_report d
+                 LEFT JOIN th_device td ON d.sn = td.sn
+                 LEFT JOIN sys_dept p ON td.dept_id = p.dept_id
+                 LEFT JOIN sys_dept pp ON p.parent_id = pp.dept_id
+                 LEFT JOIN sys_dept ppp ON pp.parent_id = ppp.dept_id
+        WHERE d.sn IN (SELECT d.sn
+                       FROM th_device d
+                                LEFT JOIN sys_dept p ON d.dept_id = p.dept_id
+                       WHERE d.dept_id IN (SELECT dept_id
+                                           FROM sys_dept START WITH dept_id = #{deptId}
+                                               CONNECT BY PRIOR dept_id = parent_id))
+          AND d.report_time &gt;= TO_DATE(#{beginDate}, 'YYYY-MM-DD')
+          AND d.report_time &lt;= TO_DATE(#{endDate}, 'YYYY-MM-DD')
+          AND (d.zt = '一级报警' OR d.zt = '二级报警')
+        GROUP BY d.sn, p.dept_name, pp.dept_name, ppp.dept_name, td.address, td.name, d.zt
+        ORDER BY count DESC
+    </select>
 </mapper>
diff --git a/ruoyi-ui/src/api/analysis/index.js b/ruoyi-ui/src/api/analysis/index.js
new file mode 100644
index 0000000..f37aa86
--- /dev/null
+++ b/ruoyi-ui/src/api/analysis/index.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function factoryBoundaryOnline(params) {
+  return request({
+    url: '/analysis/factoryBoundaryOnline',
+    params: params,
+    method: 'get',
+  })
+}
diff --git a/ruoyi-ui/src/views/dataAnalysis/bound/index.vue b/ruoyi-ui/src/views/dataAnalysis/bound/index.vue
index 65889da..fc380de 100644
--- a/ruoyi-ui/src/views/dataAnalysis/bound/index.vue
+++ b/ruoyi-ui/src/views/dataAnalysis/bound/index.vue
@@ -1,302 +1,344 @@
 <template>
-    <div class="app-container">
-      <el-form :inline="true" :model="queryParams" ref="form">
-  
-        <el-form-item>
-          <span style="margin-right: 10px;">日期</span>
-          <el-date-picker v-model="dateList" type="daterange" range-separator="至" start-placeholder="开始日期"
-            end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  :picker-options="pickerOptions">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="queryChart">搜索</el-button>
-        </el-form-item>
-      </el-form>
-  <div style="display: flex;height: 780px;">
-    <div style="width: 50%;background: #e0e1e2;padding:10px">
-        <div class="title">厂界在线监测设备报警情况分析</div>
-       <div style="width:100%;height:700px;" ref="qdCityMap1"></div>
- 
-     </div>
-     <div style="width: 50%;background: #e0e1e2;padding:10px">
-       结合最近14天的数据分析，报警最多的监测设备列表如下，请在未来加强管控！
-       <el-table v-loading="loading" :data="monitorList"  style="height: 800px;">
-        <el-table-column label="企业名称" align="center" prop="a" />
-        <el-table-column label="设备编号" align="center" prop="d" />
-        <el-table-column label="放置区域" align="center" prop="b" />
-        <el-table-column label="报警次数" align="center" prop="e" >
-          <template slot-scope="scope">
-            <span :style="{ color: 'red' }">{{ scope.row.e }}</span>
-          </template>
-          </el-table-column>
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-          <template slot-scope="scope">
-            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">下发通知</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-  
-     </div>
-  </div>
-     
-     
-     <!--发送通知-->
-     <send-msg :deviceInfo="deviceInfo" v-if="isOpenMsg" :isOpenMsg="isOpenMsg" @closeMsg="closeMsg"></send-msg>
-   
-  
-      
-    </div>
-  </template>
-    
-  <script>
-  import { queryAlarmChart} from "@/api/demostrate/monitor";
-  import { queryMonitorPrediction} from "@/api/demostrate/monitor";
-  import sendMsg from "@/views/demostrate/alarm/sendMsg.vue";
-  const echarts = require("echarts");
-  export default {
-    name: "alarm",
-    components: {sendMsg},
-    dicts: [],
-    data() {
-      return {
-        monitorList:[{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:2},{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},
-        {'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:4},
-        {'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3}
-    ,{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},
-    {'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:6},{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},
-    {'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},
-    {'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},
-   
-    ],
-        loading:false,
-        pickerOptions: {
-          // disabledDate(time) {
-          //   // 计算选择的时间跨度
-          //   const diff = Math.abs(time.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24);
-            
-          //   // 如果时间跨度超过30天，则禁用该日期
-          //   return diff > 30;
-          // },
-          shortcuts: [
-            {
-              text: '最近30天',
-              onClick(picker) {
-                const end = new Date();
-                const start = new Date();
-                start.setDate(start.getDate() - 29); // 30天前
-  
-                picker.$emit('pick', [start, end]);
-              }
-            }]},
-        dateList: [],//日期
-        total:0,
-        isOpenMsg:false,
-        deviceInfo: {},
-        // 查询参数
-        queryParams: {
-          startTime: null,
-          endTime: null,
-        },
+  <div class="app-container">
+    <el-row :gutter="10">
+      <el-col :span="6">
+        <dept-tree @deptChange="handleDeptChange" :showQuickGroup="true" />
+      </el-col>
+      <el-col :span="6">
+        <el-date-picker
+          v-model="dateList"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd"
+          :picker-options="pickerOptions"
+          @change="dateChange"
+        >
+        </el-date-picker>
+      </el-col>
+    </el-row>
 
-  
-      };
+    <div style="display: flex; height: 700px; margin-top: 10px;">
+      <div style="width: 50%; background: #e0e1e2; padding: 10px">
+        <div class="title">厂界在线监测设备报警情况分析</div>
+        <div style="width: 100%; height: 650px" ref="qdCityMap1"></div>
+      </div>
+      <div style="width: 50%; background: #e0e1e2; padding: 10px">
+        结合{{days}}天的数据分析，报警最多的监测设备列表如下，请在未来加强管控！
+        <el-table v-loading="loading" :data="alarmCountDesc" max-height="650">
+          <el-table-column label="企业名称" align="center" prop="p" />
+          <el-table-column label="设备编号" align="center" prop="sn" />
+          <el-table-column label="放置区域" align="center" prop="address" />
+          <el-table-column label="报警次数" align="center" prop="count">
+            <template slot-scope="scope">
+              <span :style="{ color: 'red' }">{{ scope.row.count }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="操作"
+            align="center"
+            class-name="small-padding fixed-width"
+          >
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleUpdate(scope.row)"
+                >下发通知</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+
+    <!--发送通知-->
+    <send-msg
+      :deviceInfo="deviceInfo"
+      v-if="isOpenMsg"
+      :isOpenMsg="isOpenMsg"
+      @closeMsg="closeMsg"
+    ></send-msg>
+  </div>
+</template>
+
+<script>
+import { queryAlarmChart } from "@/api/demostrate/monitor";
+import { queryMonitorPrediction } from "@/api/demostrate/monitor";
+import sendMsg from "@/views/demostrate/alarm/sendMsg.vue";
+const echarts = require("echarts");
+import { factoryBoundaryOnline } from "@/api/analysis"
+import to from '@/utils/await-to.js';
+import moment from 'moment';
+import { debounce } from '@/utils';
+export default {
+  name: "alarm",
+  components: { sendMsg },
+  dicts: [],
+  data() {
+    return {
+      dept: null,
+      queryDebounce: null,
+      alarmCount: [],
+      alarmCountDesc: [],
+      days: 0,
+
+      loading: false,
+      pickerOptions: {
+        // disabledDate(time) {
+        //   // 计算选择的时间跨度
+        //   const diff = Math.abs(time.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24);
+
+        //   // 如果时间跨度超过30天，则禁用该日期
+        //   return diff > 30;
+        // },
+        shortcuts: [
+          {
+            text: "最近30天",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setDate(start.getDate() - 29); // 30天前
+
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+      dateList: [], //日期
+      total: 0,
+      isOpenMsg: false,
+      deviceInfo: {},
+      // 查询参数
+      queryParams: {
+        deptId: null,
+        beginDate: null,
+        endDate: null,
+      },
+    };
+  },
+  mounted() {
+    this.queryDebounce = debounce(this.query, 100);
+    setTimeout(() => {
+      let dsiab_com = this.$refs.qdCityMap1;
+      dsiab_com.removeAttribute("_echarts_instance_");
+      this.getDefaultDateRange();
+    });
+  },
+  watch: {
+    dateList: {
+      handler: function () {
+        // 计算选择的时间天数
+        const diff = Math.abs(
+          new Date(this.dateList[1]).getTime() -
+            new Date(this.dateList[0]).getTime()
+        );
+        this.days = diff / (1000 * 60 * 60 * 24);
+      },
+      deep: true,
     },
-    created() {
-  
+  },
+  methods: {
+    dateChange() {
+      this.queryDebounce();
     },
-    mounted() {
-  
-      setTimeout(() => {
-        let dsiab_com = this.$refs.qdCityMap1
-        dsiab_com.removeAttribute('_echarts_instance_')
-        this.getDefaultDateRange()
-       // this.getList();
-      })
-     
+    handleDeptChange(dept) {
+      this.dept = dept;
+      this.queryDebounce();
     },
-    methods: {
-            //发送通知
-    handleUpdate(row) {
-      this.deviceInfo = row
-      this.isOpenMsg = true
-    },
-   
-      queryChart() {
-        if (this.dateList && this.dateList.length > 0) {
-          this.queryParams.startTime = this.dateList[0]
-          this.queryParams.endTime = this.dateList[1]
-        } else {
-          this.queryParams.startTime = null
-          this.queryParams.endTime = null
+    async query() {
+      if (this.dept && this.dateList.length > 0) {
+        this.queryParams.deptId = this.dept.deptId;
+        this.queryParams.beginDate = this.dateList[0];
+        this.queryParams.endDate = this.dateList[1];
+        console.log(this.queryParams);
+        const [err, res] = await to(factoryBoundaryOnline(this.queryParams));
+        if (err) {
+          console.error(err);
+          this.$message.error("查询失败");
+          return;
         }
-        // queryAlarmChart(this.queryParams).then(response => {
-        //   if(response.data && response.data.length>0){
-        //     let xData=[]//日期
-        //     let yData1=[]// 一级报警
-        //     let yData2=[]// 二级报警
-        //     let yData3=[]//报警率
-        //     response.data.forEach(map=>{
-        //       xData.push(map.reportTime)
-        //       yData1.push(map.level1)
-        //       yData2.push(map.level2)
-        //       yData3.push(map.progress)
-        //     })
-        //               this.init(xData,yData1,yData2,yData3)
-        //   }
-        // });
-        let xData = ['2024-05-03','2024-05-06','2024-05-08','2024-05-11','2024-05-15','2024-05-20']//日期
-                    let yData1 = [10,12,32,12,5,6,9]// 一级报警
-                    let yData2 = [5,1,3,5,9,2,1]// 二级报警
-                    let yData3 = [15,23,3,12,20,3,2]//报警率
-          
-                    this.init(xData, yData1, yData2, yData3)
-      },
-      getDefaultDateRange() {
-        const endDate = new Date(); // 当前时间
-        const startDate = new Date();
-        startDate.setDate(startDate.getDate() - 7); // 当前时间之前的7天
-        this.dateList = [startDate, endDate]
-        this.queryChart()
-      },
-      init(xData,yData1,yData2,yData3) {
-        const yData2GradientColor = [
+        if (res.code !== 200) {
+          this.$message.error(res.msg);
+          return;
+        }
+        console.log(res);
+        this.alarmCount = res.data.alarmCount;
+        this.alarmCountDesc = res.data.alarmCountDesc;
+        this.queryChart();
+
+      }
+    },
+    //发送通知
+    handleUpdate(row) {
+      this.deviceInfo = row;
+      this.isOpenMsg = true;
+    },
+
+    queryChart() {
+      const xData = [];
+      const yData1 = [];
+      const yData2 = [];
+      const yData3 = [];
+      this.alarmCount.forEach((item) => {
+        xData.push(item.day);
+        yData1.push(item.alarmCount);
+        yData3.push(((item.alarmCount / item.count) * 100).toFixed(2));
+      });
+      this.init(xData, yData1, yData2, yData3);
+    },
+    getDefaultDateRange() {
+      const endDate = new Date(); // 当前时间
+      const startDate = new Date();
+      startDate.setDate(startDate.getDate() - 7); // 当前时间之前的7天
+      // 格式化为YYYY-MM-DD
+
+      this.dateList = [
+        moment(startDate).format("YYYY-MM-DD"),
+        moment(endDate).format("YYYY-MM-DD"),
+      ];
+      this.queryChart();
+    },
+    init(xData, yData1, yData2, yData3) {
+      const yData2GradientColor = [
+        {
+          offset: 0,
+          color: "#0058e1",
+        },
+        {
+          offset: 1,
+          color: "#3BA1E3",
+        },
+      ];
+      const yData3GradientColor = [
+        {
+          offset: 0,
+          color: "#32E8D4",
+        },
+        {
+          offset: 1,
+          color: "#4BA1E3",
+        },
+      ];
+      const option = {
+        tooltip: {
+          trigger: "axis", // x轴触发
+          formatter: function (params) {
+            let list = [];
+            let listItem = "";
+            params.forEach((item) => {
+              // 柱状图加单位 局，折线图加单位 %
+              let unitValue =
+                item.seriesType == "bar" ? item.value + "个" : item.value + "%";
+              list.push(item.marker + "" + item.seriesName + ": " + unitValue);
+            });
+            listItem = list.join("<br/>");
+            return "<div>" + listItem + "</div>";
+          },
+        },
+        legend: {
+          orient: "horizontal", // 水平排列
+          x: "center", //可设定图例在左、右、居中
+          y: "top", //可设定图例在上、下、居中
+          padding: 6, //位置也可为数组 [距上方距离，距右方距离，距下方距离，距左方距离]
+        },
+        xAxis: {
+          type: "category",
+          data: xData,
+        },
+        yAxis: [
           {
-            offset: 0,
-            color: '#0058e1'
-          },
-          {
-            offset: 1,
-            color: '#3BA1E3'
-          }
-        ]
-        const yData3GradientColor = [
-          {
-            offset: 0,
-            color: '#32E8D4'
-          },
-          {
-            offset: 1,
-            color: '#4BA1E3'
-          }
-        ]
-        const option = {
-          tooltip: {
-            trigger: 'axis', // x轴触发
-            formatter: function (params) {
-              let list = []
-              let listItem = ''
-              params.forEach((item) => {
-                // 柱状图加单位 局，折线图加单位 %
-                let unitValue = item.seriesType == 'bar' ? item.value + '个' : item.value + '%'
-                list.push(item.marker + '' + item.seriesName + ': ' + unitValue)
-              })
-              listItem = list.join('<br/>')
-              return '<div>' + listItem + '</div>'
-            }
-          },
-          legend: {
-            orient: 'horizontal', // 水平排列
-            x: 'center', //可设定图例在左、右、居中
-            y: 'top', //可设定图例在上、下、居中
-            padding: 6, //位置也可为数组 [距上方距离，距右方距离，距下方距离，距左方距离]
-          },
-          xAxis: {
-            type: 'category',
-            data: xData
-          },
-          yAxis: [
-            {
-              type: 'value',
-              name: '报警数',
-              yAxisIndex: 0,
-              axisLabel: {
-                //y轴每个刻度都加单位
-                formatter: "{value}个",
-              },
+            type: "value",
+            name: "报警数",
+            yAxisIndex: 0,
+            axisLabel: {
+              //y轴每个刻度都加单位
+              formatter: "{value}个",
             },
-            {
-              type: 'value',
-              name: "报警率(%)",
-              min: 0, // 最小为0
-              max: 100, // 最大为100
-              interval: 25, // 间隔25
-              axisLabel: {
-                //y轴每个刻度都加单位
-                formatter: "{value}%",
-              },
+          },
+          {
+            type: "value",
+            name: "报警率(%)",
+            min: 0, // 最小为0
+            max: 100, // 最大为100
+            interval: 25, // 间隔25
+            axisLabel: {
+              //y轴每个刻度都加单位
+              formatter: "{value}%",
             },
-          ],
-          series: [
-            {
-              type: 'bar',
-              stack: 'x',
-              name: "报警数",
-              data: yData1,
-              label: {
-                show: true,
-                color: '#eee'
-              },
-              barGap: "-100%", // 平移自身一个身位，使之与前一个柱状图重叠
-              // stack:'重叠',
-              itemStyle: {
-                // borderRadius: [20, 20, 6, 6],
-                color: '#15C1AF',
-              }
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            stack: "x",
+            name: "报警数",
+            data: yData1,
+            label: {
+              show: true,
+              color: "#eee",
             },
-            // {
-            //   type: 'bar',
-            //   stack: 'x',
-            //   name: "二级报警数",
-            //   data: yData2,
-            //   label: {
-            //     show: true,
-            //     color: '#eee'
-            //   },
-            //   barGap: "-100%", // 平移自身一个身位，使之与前一个柱状图重叠
-            //   // stack:'重叠',
-            //   itemStyle: {
-            //     // borderRadius: [20, 20, 6, 6],
-            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, yData3GradientColor),
-            //   }
-            // },
-            {
-              type: 'line',
-              name: '报警率(%)',
-              data: yData3,
-              yAxisIndex: 1, // 1表示以右侧Y轴为基准 0表示以左侧Y轴为基准
-              symbolSize: 10, // 圆点大小
+            barGap: "-100%", // 平移自身一个身位，使之与前一个柱状图重叠
+            // stack:'重叠',
+            itemStyle: {
+              // borderRadius: [20, 20, 6, 6],
+              color: "#15C1AF",
+            },
+          },
+          // {
+          //   type: 'bar',
+          //   stack: 'x',
+          //   name: "二级报警数",
+          //   data: yData2,
+          //   label: {
+          //     show: true,
+          //     color: '#eee'
+          //   },
+          //   barGap: "-100%", // 平移自身一个身位，使之与前一个柱状图重叠
+          //   // stack:'重叠',
+          //   itemStyle: {
+          //     // borderRadius: [20, 20, 6, 6],
+          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, yData3GradientColor),
+          //   }
+          // },
+          {
+            type: "line",
+            name: "报警率(%)",
+            data: yData3,
+            yAxisIndex: 1, // 1表示以右侧Y轴为基准 0表示以左侧Y轴为基准
+            symbolSize: 10, // 圆点大小
             //   itemStyle: {
             //     color: '#74DER1', // 折线图小圆点颜色
             //   },
-              lineStyle: {
-                color: '#DE390F',
-              },
-              label: {
-                show: true,
-                color: '#ddd',
-                formatter: '{c}%' // {c}数据值
-              },
-            }
-          ]
-        };
-  
-        this.myChart = echarts.init(this.$refs.qdCityMap1)
-        this.myChart.setOption(option);
-      },
-  
-  
-    }
-  };
-  </script>
-  <style>
-  .title {
-    padding-left: 10px;
-    color: #212121;
-    font-size: 20px;
-    margin-bottom: 10px;
-    margin-top: 10px;
-    
-    background-position-y: 7px;
-  }
-  </style>
-    
\ No newline at end of file
+            lineStyle: {
+              color: "#DE390F",
+            },
+            label: {
+              show: true,
+              color: "#ddd",
+              formatter: "{c}%", // {c}数据值
+            },
+          },
+        ],
+      };
+
+      this.myChart = echarts.init(this.$refs.qdCityMap1);
+      this.myChart.setOption(option);
+    },
+  },
+};
+</script>
+<style>
+.title {
+  padding-left: 10px;
+  color: #212121;
+  font-size: 20px;
+  margin-bottom: 10px;
+  margin-top: 10px;
+
+  background-position-y: 7px;
+}
+</style>