解决冲突

liuyg

2021-04-08 ca84fca890729739b89969f047d5975079733160

解决冲突

 src/views/alarmManagement/alarmAnalysis.vue

@@ -0,0 +1,955 @@
<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>