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/router/views/index.js | 356 ---------------
src/styles/alarmAnalysis/alarmAnalysis.scss | 19
src/views/dataL/dataL.vue | 5
src/views/clientManagement/clientManagement.vue | 7
src/views/alarmManagement/alarmAnalysis.vue | 955 -----------------------------------------
5 files changed, 17 insertions(+), 1,325 deletions(-)
diff --git a/src/router/views/index.js b/src/router/views/index.js
index a08cc4c..e69de29 100644
--- a/src/router/views/index.js
+++ b/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')
- }]
- },
-
-
-]
diff --git a/src/styles/alarmAnalysis/alarmAnalysis.scss b/src/styles/alarmAnalysis/alarmAnalysis.scss
index 3d8dd8a..73208fd 100644
--- a/src/styles/alarmAnalysis/alarmAnalysis.scss
+++ b/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 {
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
diff --git a/src/views/clientManagement/clientManagement.vue b/src/views/clientManagement/clientManagement.vue
index a8b5b5f..2f1ee48 100644
--- a/src/views/clientManagement/clientManagement.vue
+++ b/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方法
}
}
diff --git a/src/views/dataL/dataL.vue b/src/views/dataL/dataL.vue
index 459f0c3..ab34d3e 100644
--- a/src/views/dataL/dataL.vue
+++ b/src/views/dataL/dataL.vue
@@ -702,13 +702,14 @@
const url = 'http://localhost:1888/api/blade-jfpts/equipment/equipment/pageDept?deviceName=000000000001¤t=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() {
--
Gitblit v1.9.3