修改

liuyg

2021-04-08 c15ef4e7267a5e213f2f1f33dcf13482991c5941

修改

 src/router/views/index.js

@@ -1,356 +0,0 @@
import Layout from '@/page/index/'

export default [{
    path: '/wel',
    component: Layout,
    redirect: '/wel/index',
    children: [{
      path: 'index',
      name: '首页',
      meta: {
        i18n: 'dashboard'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/supervisoryConsole/data')
    }]
  },

  // {
  //     path: '/wel',
  //     component: Layout,
  //     redirect: '/wel/index',
  //     children: [{
  //         path: 'index',
  //         name: '首页',
  //         meta: {
  //             i18n: 'dashboard'
  //         },
  //         component: () =>
  //             import ( /* webpackChunkName: "views" */ '@/views/home/home')
  //     }, {
  //         path: 'dashboard',
  //         name: '控制台',
  //         meta: {
  //             i18n: 'dashboard',
  //             menu: false,
  //         },
  //         component: () =>
  //             import ( /* webpackChunkName: "views" */ '@/views/wel/dashboard')
  //     }]
  // },
  {
    path: '/distribution',
    component: Layout,
    redirect: '/distribution/index',
    children: [{
      path: 'index',
      name: '警情分发处置',
      meta: {
        i18n: 'distribution'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/distribution/index')
    }]
  },
  {
    path: '/test',
    component: Layout,
    redirect: '/test/index',
    children: [{
      path: 'index',
      name: '测试页',
      meta: {
        i18n: 'test'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/util/test')
    }]
  }, {
    path: '/dict-horizontal',
    component: Layout,
    redirect: '/dict-horizontal/index',
    children: [{
      path: 'index',
      name: '字典管理',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/util/demo/dict-horizontal')
    }]
  }, {
    path: '/dict-vertical',
    component: Layout,
    redirect: '/dict-vertical/index',
    children: [{
      path: 'index',
      name: '字典管理',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/util/demo/dict-vertical')
    }]
  }, {
    path: '/info',
    component: Layout,
    redirect: '/info/index',
    children: [{
      path: 'index',
      name: '个人信息',
      meta: {
        i18n: 'info'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/system/userinfo')
    }]
  },
  {
    path: '/real',
    component: Layout,
    redirect: '/real/video',
    children: [{
      path: 'video',
      name: '视频',
      meta: {
        i18n: 'real'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/Video/video')
    }, {
      path: 'history/:historyId',
      name: '设备历史',
      meta: {
        i18n: 'real'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/realTimePolice/realHistory')
    }]
  },
  {
    path: '/welcomeData',
    component: Layout,
    redirect: '/welcomeData/data',
    children: [{
      path: 'data',
      name: '数据模式',
      meta: {
        i18n: 'data'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/supervisoryConsole/data')
    }, {
      path: 'map',
      name: '地图模式',
      meta: {
        i18n: 'map'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/supervisoryConsole/map')
    }, {
      path: 'card',
      name: '卡片模式',
      meta: {
        i18n: 'card'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/supervisoryConsole/card')
    }]
  },

  {
    path: '/work/process/leave',
    component: Layout,
    redirect: '/work/process/leave/form',
    children: [{
      path: 'form/:processDefinitionId',
      name: '请假流程',
      meta: {
        i18n: 'work'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/work/process/leave/form')
    }, {
      path: 'handle/:taskId/:processInstanceId/:businessId',
      name: '处理请假流程',
      meta: {
        i18n: 'work'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/work/process/leave/handle')
    }, {
      path: 'detail/:processInstanceId/:businessId',
      name: '请假流程详情',
      meta: {
        i18n: 'work'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/work/process/leave/detail')
    }]
  },
  // {
  //   path: '/realTimePolice',
  //   component: Layout,
  //   redirect: '/realTimePolice/index',
  //   children: [{
  //     path: 'index',
  //     name: '实时报警',
  //     meta: {
  //       i18n: 'real'
  //     },
  //     component: () =>
  //       import( /* webpackChunkName: "views" */ '@/views/realTimePolice/real')
  //   }]
  // },
  {
    path: '/home',
    component: Layout,
    redirect: '/home/index',
    children: [{
      path: 'index',
      name: '研判洞察',
      meta: {
        i18n: 'home'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/home/home')
    }]
  },
  {
    path: '/attendance',
    component: Layout,
    redirect: '/attendance/attendance',
    children: [{
      path: 'index',
      name: '考勤管理',
      meta: {
        i18n: 'attendance'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/attendance/attendance')
    }]
  },
  {
    path: '/clientManagement',
    component: Layout,
    redirect: '/clientManagement/clientManagement',
    children: [{

      path: 'index',
      name: '设备管理',
      meta: {
        i18n: 'clientManagement'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/clientManagement/clientManagement')
    }]
  },
  {
    path: '/suser',
    component: Layout,
    redirect: '/suser',
    children: [{
      path: 'index',
      name: '客户管理',
      meta: {
        i18n: 'suser'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/system/cs')
    }]
  }, {
    path: '/policeTracking',
    component: Layout,
    redirect: '/policeTracking/track',
    children: [{
      path: 'track',
      name: '警情追踪',
      meta: {
        i18n: 'track'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/policeTracking/policeTracking')
    }]
  }, {
    path: '/healthcode',
    component: Layout,
    redirect: '/healthcode/healthcodePage',
    children: [{
      path: 'healthcodePage',
      name: '健康码',
      meta: {
        i18n: 'healthcode'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/healthcode/healthcode')
    }]
  }, {
    path: '/animalHeat',
    component: Layout,
    redirect: '/animalHeat/animalHeatPage',
    children: [{
      path: 'animalHeatPage',
      name: '体温检测',
      meta: {
        i18n: 'animalHeat'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/animalHeat/animalHeat')
    }]
  }, {
    path: '/alarm',
    component: Layout,
    redirect: '/alarm/alarmPage',
    children: [{
      path: 'alarmPage',
      name: '实时警情',
      meta: {
        i18n: 'alarm'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/alarm/alarm')
    }]
  }, {
    path: '/parcel',
    component: Layout,
    redirect: '/parcel/index',
    children: [{
      path: 'index',
      name: '安检包裹',
      meta: {
        i18n: 'parcel'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/parcel/parcel')
    }]
  }, {
    path: '/parcelKind',
    component: Layout,
    redirect: '/parcelKind/index',
    children: [{
      path: 'index',
      name: '违禁品',
      meta: {
        i18n: 'parcelKind'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/parcel/parcelKind')
    }]
  },
  {
    path: '/dataL',
    component: Layout,
    redirect: '/dataL/index',
    children: [{
      path: 'index',
      name: '详情页',
      meta: {
        i18n: 'dataL'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/dataL/dataL')
    }]
  },


]

 src/styles/alarmAnalysis/alarmAnalysis.scss

@@ -7,6 +7,7 @@
    font-size: 12px;
    color: #7B91B4;
    left: 1%;
    top: 30%;
    position: relative;
}

@@ -18,20 +19,20 @@
.timeSearchBtn .timeBtn {
    position: relative;
    left: 0.8%;
    top: 15%;
    top: 40%;
}

.timeSearchBtn .timeSearch {
    position: relative;
    left: 1.2%;
    top: 15.6%;
    top: 40.6%;
}

//预警总数统计
.statisTotal {
    position: relative;
    left: 0.3%;
    top: 2%;
    top: 3%;
    width: 100%;
    height: 10%;
}
@@ -51,7 +52,7 @@
    height: 550px;
    position: relative;
    left: 0.8%;
    top: 6%;
    top: 7%;
}

#alarmNumberStatis {
@@ -110,7 +111,7 @@
    height: 450px;
    position: relative;
    left: 0.8%;
    top: 8%;
    top: 9.5%;
}

#alarmTypeProEcharts {
@@ -141,7 +142,7 @@
    height: 450px;
    position: relative;
    left: 0.8%;
    top: 10%;
    top: 11%;
}

#alarmEquipmentProEcharts {
@@ -176,7 +177,7 @@
    height: 450px;
    position: relative;
    left: 0.8%;
    top: 10%;
    top: 11.8%;
}

#confirmTimeProEcharts {
@@ -206,7 +207,7 @@
    width: 35%;
    height: 450px;
    position: relative;
    top: -43%;
    top: -40.5%;
    left: 64.4%;
}

@@ -227,7 +228,7 @@
    height: 450px;
    position: relative;
    left: 0.8%;
    top: -40.6%;
    top: -38%;
}

#alarmTimeDisEchars {

 src/views/alarmManagement/alarmAnalysis.vue

@@ -1,955 +0,0 @@
<template>
  <div class="big">
    <!-- 标题 -->
    <div class="alarm_title"><span>预警分析</span></div>
    <!-- 时间按钮 -->
    <div class="timeSearchBtn">
      <el-button-group class="timeBtn">
        <el-button
          v-bind:class="activeClass == 1 ? 'btn-color' : ''"
          size="mini"
          @click="getData(1)"
        >
          本周
        </el-button>

        <el-button
          v-bind:class="activeClass == 2 ? 'btn-color' : ''"
          size="mini"
          @click="getData(2)"
        >
          月初至今
        </el-button>

        <el-button
          v-bind:class="activeClass == 3 ? 'btn-color' : ''"
          size="mini"
          @click="getData(3)"
        >
          季度至今
        </el-button>
      </el-button-group>
      <el-date-picker
        class="timeSearch"
        size="mini"
        v-model="dateTime"
        type="daterange"
        @change="timeChange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
    </div>
    <!-- 监测点 -->
    <div class="statisTotal">
      <avue-data-box
        :option="statisToTalData"
        class="statisTotalAvueDataBox"
      ></avue-data-box>
    </div>
    <!-- 预警数量分布 -->
    <div class="alarmStatis">
      <div id="alarmNumberStatis"></div>
      <div class="alarmClassifyStatis">
        <avue-data-cardtext :option="alarmClassifyStatis"></avue-data-cardtext>
      </div>
    </div>
    <!-- 预警类型占比 -->
    <div class="alarmTypePro">
      <div id="alarmTypeProEcharts"></div>
      <div class="alarmTypeProStatis">
        <avue-data-cardtext :option="alarmTypeProStatis"></avue-data-cardtext>
      </div>
    </div>
    <!-- 预警设备类型占比 -->
    <div class="alarmEquipmentPro" style="display: none">
      <div id="alarmEquipmentProEcharts"></div>
      <div class="alarmEquipmentProStatis">
        <avue-crud
          :data="alarmEquipmentProStatisData"
          :option="alarmEquipmentProStatisOption"
        ></avue-crud>
      </div>
    </div>
    <!-- 确认时间占比 -->
    <div class="confirmTimePro">
      <div id="confirmTimeProEcharts"></div>
      <div class="confirmTimeProStatis">
        <avue-data-cardtext :option="confirmTimeProStatis"></avue-data-cardtext>
      </div>
    </div>
    <!-- 预警平均确认速度排行 -->
    <div class="confirmAverageSpeed">
      <avue-crud
        :data="confirmAverageSpeedData"
        :option="confirmAverageSpeedOption"
      ></avue-crud>
    </div>
    <!-- 预警时间分布 -->
    <div class="alarmTimeDis">
      <div id="alarmTimeDisEchars"></div>
    </div>

    <!-- 底部 -->
    <div class="low"></div>
  </div>
</template>
 
<script>
import echarts from "echarts";
import {
  selectIndexCount,
  selectAlertScount,
  selAlarmDayAveragePro,
  selConfirmTimePro,
  selAlarmTimeDis,
} from "@/api/statis/statis";
import alarmVue from "../alarm/alarm.vue";

export default {
  data() {
    return {
      activeClass: 2,
      statisToTalData: {
        span: 6,
        data: [],
      },
      dateTime: "",
      alarmClassifyStatis: {
        span: 6,
        data: [],
      },
      alarmTypeProStatis: {
        span: 10,
        height: 100,
        data: [],
      },
      alarmEquipmentProStatisData: [],
      alarmEquipmentProStatisOption: {},
      confirmTimeProStatis: {
        span: 10,
        height: 100,
        data: [],
      },
      confirmAverageSpeedData: [],
      confirmAverageSpeedOption: {},
    };
  },

  mounted() {
    //默认是查询当月的数据
    this.getData(2);
  },

  methods: {
    //日期选好后触发
    timeChange() {
      //清空选项按钮标记
      var that = this;
      that.activeClass = 0;
      var data = {};
      data = {
        startTime: this.timeFormat(this.dateTime[0]),
        endTime: this.timeFormat(this.dateTime[1]),
      };
      this.getStatisData(data);
    },

    //中国区时间格式转换
    timeFormat(date) {
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let M = date.getMinutes();
      M = M < 10 ? "0" + M : M;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      let time = y + "-" + m + "-" + d + " " + h + ":" + M + ":" + s;
      return time;
    },

    //警情统计总数
    getStatisTotalData(data) {
      selectIndexCount(data).then((res) => {
        var that = this;
        that.statisToTalData.data = [
          {
            click: function (item) {},
            title: "警情总数",
            count: res.data.data[0].value,
            icon: "el-icon-message-solid",
            color: "#F34A4A",
          },
          {
            click: function (item) {},
            title: "违禁包裹数",
            count: res.data.data[1].value,
            icon: "el-icon-shopping-bag-1",
            color: "#FF9836",
          },
          {
            click: function (item) {},
            title: "违禁物品数",
            count: res.data.data[2].value,
            icon: "el-icon-warning",
            color: "#8058A5",
          },
          {
            click: function (item) {},
            title: "在线设备数",
            count: res.data.data[3].value,
            icon: "el-icon-success",
            color: "#29C093",
          },
          {
            click: function (item) {},
            title: "客户数量",
            count: res.data.data[4].value,
            icon: "el-icon-s-custom",
            color: "#3AA7F0",
          },
        ];
      });
    },

    //预警数量分布
    getAlarmNumberStatis(data) {
      //调接口，获取数据
      selectAlertScount(data).then((res) => {
        var typesArray = res.data.data.types;
        var timesArray = res.data.data.times;
        var dataArray = res.data.data.dataList;
        var data = [];
        dataArray.forEach((item) => {
          if (item.name == typesArray[0]) {
            data.push({
              name: item.name,
              data: item.alarmData,
              type: "line",
            });
          }
          if (item.name == typesArray[1]) {
            data.push({
              name: item.name,
              type: "line",
              data: item.parcelData,
            });
          }

          if (item.name == typesArray[2]) {
            data.push({
              name: item.name,
              type: "line",
              data: item.healthcodeData,
            });
          }

          if (item.name == typesArray[3]) {
            data.push({
              name: item.name,
              type: "line",
              data: item.animalData,
            });
          }
        });
        let echarts = require("echarts");
        let myChart = echarts.init(
          document.getElementById("alarmNumberStatis")
        );
        let option = {
          title: {
            textStyle: {
              fontWeight: "normal",
              fontSize: 16,
              color: "#000",
            },
            left: "1%",
            top: 25,
            textAlign: "left",
            text: "预警数量分布",
          },
          tooltip: {
            trigger: "axis",
          },
          grid: {
            left: "3%",
            right: "7%",
            bottom: "10%",
            top: "20%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: timesArray,
          },
          yAxis: {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
          },
          series: data,
        };

        myChart.setOption(option);

        //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },

    //警情类别统计总数
    getAlarmClassifyStatis(data) {
      selAlarmDayAveragePro(data).then((res) => {
        var time = this.dateTime;
        var day = this.getDaysBetween(time[0], time[1]);
        var that = this;
        that.alarmClassifyStatis.data = [
          {
            click: function (item) {},
            title: "一键求助",
            color: "yellow",
            target: "_blank",
            name: "日平均一键求助数",
            date: (res.data.data[0] / Math.round(day)).toFixed(2),
          },
          {
            click: function (item) {},
            title: "违禁品",
            color: "green",
            name: "日平均违禁品数",
            date: (res.data.data[1] / Math.round(day)).toFixed(2),
          },
          {
            click: function (item) {},
            title: "红色健康码",
            color: "#3fa1ff",
            name: "日平均红色健康码数",
            date: (res.data.data[2] / Math.round(day)).toFixed(2),
          },
          {
            click: function (item) {},
            title: "体温异常",
            color: "red",
            name: "日平均体温异常数",
            date: (res.data.data[3] / Math.round(day)).toFixed(2),
          },
        ];
      });
    },

    //预警类型占比统计
    getAlarmTypeProEcharts(data) {
      selAlarmDayAveragePro(data).then((res) => {
        var data = [];
        data.push(
          { value: res.data.data[0], name: "一键求助" },
          { value: res.data.data[1], name: "违禁品" },
          { value: res.data.data[2], name: "红色健康码" },
          { value: res.data.data[3], name: "体温异常" }
        );
        let echarts = require("echarts");
        let myChart = echarts.init(
          document.getElementById("alarmTypeProEcharts")
        );
        let option = {
          title: {
            textStyle: {
              fontWeight: "normal",
              fontSize: 16,
              color: "#000",
            },
            left: "1%",
            top: 25,
            textAlign: "left",
            text: "预警类型占比",
          },
          tooltip: {
            trigger: "item",
          },
          grid: {
            left: "1%",
            right: "10%",
            bottom: "5%",
            top: "25%",
            containLabel: true,
          },
          series: [
            {
              type: "pie",
              radius: ["43%", "60%"],
              center: ["45%", "53%"],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "18",
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: data,
            },
          ],
        };
        myChart.setOption(option);

        //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },

    //警情类别统计总数(分类占比)
    getAlarmTypeProStatis(data) {
      selAlarmDayAveragePro(data).then((res) => {
        var that = this;
        var count =
          res.data.data[0] +
          res.data.data[1] +
          res.data.data[2] +
          res.data.data[3];
        that.alarmTypeProStatis.data = [
          {
            click: function (item) {},
            title: "一键求助",
            color: "yellow",
            target: "_blank",
            name: res.data.data[0],
            date: ((res.data.data[0] / count) * 100).toFixed(2) + "%",
          },
          {
            click: function (item) {},
            title: "违禁品",
            color: "green",
            name: res.data.data[1],
            date: ((res.data.data[1] / count) * 100).toFixed(2) + "%",
          },
          {
            click: function (item) {},
            title: "红色健康码",
            color: "#3fa1ff",
            name: res.data.data[2],
            date: ((res.data.data[2] / count) * 100).toFixed(2) + "%",
          },
          {
            click: function (item) {},
            title: "体温异常",
            color: "red",
            name: res.data.data[3],
            date: ((res.data.data[3] / count) * 100).toFixed(2) + "%",
          },
        ];
      });
    },

    //预警设备类型占比统计
    getAlarmEquipmentProEcharts(data) {
      let echarts = require("echarts");
      let myChart = echarts.init(
        document.getElementById("alarmEquipmentProEcharts")
      );
      let option = {
        title: {
          textStyle: {
            fontWeight: "normal",
            fontSize: 16,
            color: "#000",
          },
          left: "1%",
          top: 25,
          textAlign: "left",
          text: "预警设备类型占比",
        },
        tooltip: {
          trigger: "item",
        },
        grid: {
          left: "1%",
          right: "10%",
          bottom: "5%",
          top: "25%",
          containLabel: true,
        },
        series: [
          {
            type: "pie",
            radius: ["43%", "60%"],
            cneter: ["45%", "53%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "18",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "搜索引擎" },
              { value: 735, name: "直接访问" },
              { value: 580, name: "邮件营销" },
              { value: 484, name: "联盟广告" },
              { value: 300, name: "视频广告" },
            ],
          },
        ],
      };
      myChart.setOption(option);

      //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },

    //预警设备类型占比统计(分类表格)
    getAlarmEquipmentProStatis(data) {
      var that = this;
      that.alarmEquipmentProStatisData = [
        {
          name: "一键求助",
          sex: "1",
          date: "100%",
        },
      ];
      that.alarmEquipmentProStatisOption = {
        menu: false,
        menuBtn: false,
        page: false,
        align: "center",
        menuAlign: "center",
        column: [
          {
            label: "预警设备类型",
            prop: "name",
          },
          {
            label: "预警次数",
            prop: "sex",
          },
          {
            label: "占比",
            prop: "date",
          },
        ],
      };
    },

    //确认时间占比统计
    getConfirmTimeProEcharts(data) {
      selConfirmTimePro(data).then((res) => {
        var data = res.data.data;
        let echarts = require("echarts");
        let myChart = echarts.init(
          document.getElementById("confirmTimeProEcharts")
        );
        let option = {
          title: {
            textStyle: {
              fontWeight: "normal",
              fontSize: 16,
              color: "#000",
            },
            left: "1%",
            top: 25,
            textAlign: "left",
            text: "确认时间占比",
          },
          tooltip: {
            trigger: "item",
          },
          grid: {
            left: "1%",
            right: "10%",
            bottom: "5%",
            top: "25%",
            containLabel: true,
          },
          series: [
            {
              type: "pie",
              radius: ["43%", "60%"],
              center: ["45%", "53%"],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "18",
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: [
                { value: data[0], name: "0-5分钟" },
                { value: data[1], name: "5-10分钟" },
                { value: data[2], name: "10-30分钟" },
                { value: data[3], name: "30分钟以上" },
              ],
            },
          ],
        };
        myChart.setOption(option);
        //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },

    //确认时间占比（分类）
    getConfirmTimeProStatis(data) {
      selConfirmTimePro(data).then((res) => {
        var data = res.data.data;
        var that = this;
        that.confirmTimeProStatis.data = [
          {
            click: function (item) {},
            title: "小于5分钟",
            color: "yellow",
            target: "_blank",
            name: data[0] == 0 ? 0 : data[0] + "次",
          },
          {
            click: function (item) {},
            title: "5-10分钟",
            color: "green",
            name: data[1] == 0 ? 0 : data[1] + "次",
          },
          {
            click: function (item) {},
            title: "10-30分钟",
            color: "#3fa1ff",
            name: data[2] == 0 ? 0 : data[2] + "次",
          },
          {
            click: function (item) {},
            title: "30分钟以上",
            color: "red",
            name: data[3] == 0 ? 0 : data[3] + "次",
          },
        ];
      });
    },

    //预警平均速度排行(table)
    confirmAverageSpeedStatis(data) {
      var that = this;
      that.confirmAverageSpeedData = [
        {
          name: "mis_zhang",
          sex: "1",
        },
      ];
      that.confirmAverageSpeedOption = {
        title: "表格的标题",
        titleSize: "h3",
        titleStyle: {
          color: "red",
        },
        menu: false,
        page: false,
        align: "center",
        menuAlign: "center",
        column: [
          {
            label: "巡检人",
            prop: "name",
          },
          {
            label: "平均确认速度",
            prop: "sex",
          },
        ],
      };
    },

    //预警时间分布
    getAlarmTimeDisEchars(data) {
      selAlarmTimeDis(data).then((res) => {
        var data = res.data;
        let echarts = require("echarts");
        let myChart = echarts.init(
          document.getElementById("alarmTimeDisEchars")
        );
        let option = {
          title: {
            textStyle: {
              fontWeight: "normal",
              fontSize: 16,
              color: "#000",
            },
            left: "3%",
            top: 25,
            textAlign: "center",
            text: "预警时间分布",
          },
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: ["一键求助", "违禁品", "红色健康码", "体温异常"],
            top: "10%",
            right: "6%",
          },
          grid: {
            left: "1%",
            right: "7%",
            bottom: "10%",
            top: "25%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            boundaryGap: true,
            axisLine: {
              lineStyle: {
                type: "dashed",
              },
            },
            axisTick: {
              show: false,
            },
            data: [
              "0-2",
              "2-4",
              "4-6",
              "6-8",
              "8-10",
              "10-12",
              "12-14",
              "14-16",
              "16-18",
              "18-20",
              "20-22",
              "22-24",
            ],
          },
          yAxis: {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
          },
          series: [
            {
              name: "一键求助",
              type: "line",
              stack: "总量",
              data: data.data.alarmTimeDis,
            },
            {
              name: "违禁品",
              type: "line",
              stack: "总量",
              data: data.data.parcelTimeDis,
            },
            {
              name: "红色健康码",
              type: "line",
              stack: "总量",
              data: data.data.healthcodeTimeDis,
            },
            {
              name: "体温异常",
              type: "line",
              stack: "总量",
              data: data.data.animalTimeDis,
            },
          ],
        };
        myChart.setOption(option);
        //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },

    //点击按钮获取不同时间段的数据
    getData(date) {
      var that = this;
      that.activeClass = date;
      var data = this.getDate(date);
      //调用方法获取数据
      this.getStatisData(data);
    },

    getStatisData(data) {
      //统计预警总数
      this.getStatisTotalData(data);
      //预警数量统计
      this.getAlarmNumberStatis(data);
      //预警分类统计
      this.getAlarmClassifyStatis(data);
      //预警类型占比统计
      this.getAlarmTypeProEcharts(data);
      this.getAlarmTypeProStatis(data);
      //预警设备类型占比统计
      //this.getAlarmEquipmentProEcharts(data);
      //this.getAlarmEquipmentProStatis(data);
      //确认时间占比统计
      this.getConfirmTimeProEcharts(data);
      this.getConfirmTimeProStatis(data);
      this.confirmAverageSpeedStatis(data);
      //预警时间分布统计
      this.getAlarmTimeDisEchars(data);
    },

    //计算两个日期之间的天数
    getDaysBetween(startTime, endTime) {
      var startDate = Date.parse(startTime);
      var endDate = Date.parse(endTime);
      if (startDate > endDate) {
        return 0;
      }
      if (startDate == endDate) {
        return 1;
      }
      var days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000);
      return days;
    },

    getDate(date) {
      var that = this;
      var today = new Date();
      var startTime = "";
      var endTime = "";
      //本周的时间
      if (date == 1) {
        startTime = this.showWeekFirstDay(today) + " 00:00:00";
        endTime = this.showToDay(today) + " 23:59:59";
        that.dateTime = [startTime, endTime];
      }
      //月初至今的时间
      if (date == 2) {
        startTime = this.showMonthFirstDay(today) + " 00:00:00";
        endTime = this.showToDay(today) + " 23:59:59";
        that.dateTime = [startTime, endTime];
      }
      //本季度初至今的时间
      if (date == 3) {
        startTime = this.getQuarterStartDate(today) + " 00:00:00";
        endTime = this.showToDay(today) + " 23:59:59";
        that.dateTime = [startTime, endTime];
      }
      //封装数据
      var data = {};
      return (data = {
        startTime: this.dateTime[0],
        endTime: this.dateTime[1],
      });
    },

    //本日
    showToDay(Nowdate) {
      var M = Number(Nowdate.getMonth()) + 1;
      if (M < 10) {
        M = "0" + M;
      }
      var day = Nowdate.getDate();
      if (day < 10) {
        day = "0" + day;
      }
      return Nowdate.getFullYear() + "-" + M + "-" + day;
    },

    //本周第一天
    showWeekFirstDay(Nowdate) {
      var WeekFirstDay = new Date(Nowdate - (Nowdate.getDay() - 1) * 86400000);
      var M = Number(WeekFirstDay.getMonth()) + 1;
      if (M < 10) {
        M = "0" + M;
      }
      var day = WeekFirstDay.getDate();
      if (day < 10) {
        day = "0" + day;
      }
      return WeekFirstDay.getFullYear() + "-" + M + "-" + day;
    },

    //本月第一天
    showMonthFirstDay(Nowdate) {
      var MonthFirstDay = new Date(
        Nowdate.getFullYear(),
        Nowdate.getMonth(),
        1
      );
      var M = Number(MonthFirstDay.getMonth()) + 1;
      if (M < 10) {
        M = "0" + M;
      }
      return (
        MonthFirstDay.getFullYear() +
        "-" +
        M +
        "-" +
        "0" +
        MonthFirstDay.getDate()
      );
    },

    //本季度的第一天
    getQuarterStartDate(Nowdate) {
      var quarterStartDate = this.getQuarterStartMonth(Nowdate);
      return Nowdate.getFullYear() + "-" + quarterStartDate + "-" + "01";
    },

    //本季度的第一个月份
    getQuarterStartMonth(Nowdate) {
      var nowMonth = Nowdate.getMonth() + 1;
      console.log(nowMonth, 555);
      var quarterStartMonth = 0;
      if (nowMonth < 4) {
        quarterStartMonth = "0" + 1;
      }
      if (3 < nowMonth && nowMonth < 7) {
        quarterStartMonth = "0" + 4;
      }
      if (6 < nowMonth && nowMonth < 10) {
        quarterStartMonth = "0" + 7;
      }
      if (nowMonth > 9) {
        quarterStartMonth = 10;
      }
      return quarterStartMonth;
    },
  },
};
</script>
<style lang="scss">
@import "@/styles/alarmAnalysis/alarmAnalysis.scss";
</style>

 src/views/clientManagement/clientManagement.vue

@@ -261,6 +261,7 @@
          viewBtn: true,
          selection: true,
          dialogClickModal: false,
          indexFixed:false,
          column: [
            {
              label: "设备名称",
@@ -814,11 +815,11 @@
        //console.log(document.body.clientHeight,event.clientY,cha)
        // 防止菜单太靠底，根据可视高度调整菜单出现位置
        if (cha < 150) {
          menu.style.top = event.clientY -120 - (120) + 'px'
          menu.style.top = event.clientY -120 - (70) + 'px'
        } else {
          menu.style.top = event.clientY -10 - (120) + 'px'
          menu.style.top = event.clientY -10 - (70) + 'px'
        }
        menu.style.left = event.clientX + 10 - (240) + 'px'
        menu.style.left = event.clientX + 10 - (60) + 'px'
        document.addEventListener('click', this.foo); // 给整个document新增监听鼠标事件，点击任何位置执行foo方法
      }
    }

 src/views/dataL/dataL.vue

@@ -702,13 +702,14 @@
            const url = 'http://localhost:1888/api/blade-jfpts/equipment/equipment/pageDept?deviceName=000000000001&current=1&size=10&pid='
            axios.get(url)
            .then((res)=>{
                var data = res.data.data.records;
                var data = res.data.data.records[0];
                this.stetDetails(data);
                console.log(data);
            })
        },
        stetDetails(d){
            // this.name = 1;
            this.name = d.deviceName;
            this.machineCode = d.deviceNumber;
        }
    },
    created() {