From c15ef4e7267a5e213f2f1f33dcf13482991c5941 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Thu, 08 Apr 2021 16:00:04 +0800
Subject: [PATCH] 修改
---
src/views/alarmManagement/alarmAnalysis.vue | 955 -----------------------------------------------------------
1 files changed, 0 insertions(+), 955 deletions(-)
diff --git a/src/views/alarmManagement/alarmAnalysis.vue b/src/views/alarmManagement/alarmAnalysis.vue
index 7d1b979..e69de29 100644
--- a/src/views/alarmManagement/alarmAnalysis.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.9.3