From 88a2b52aa1b44a223d872e8a03cf7d6df275b348 Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Fri, 02 Apr 2021 17:07:58 +0800
Subject: [PATCH] 预警分析页面优化
---
src/api/statis/statis.js | 11 ++
src/styles/alarmAnalysis/alarmAnalysis.scss | 4 +
src/views/alarmManagement/alarmAnalysis.vue | 177 +++++++++++++++++++++++--------------------
3 files changed, 110 insertions(+), 82 deletions(-)
diff --git a/src/api/statis/statis.js b/src/api/statis/statis.js
new file mode 100644
index 0000000..d01d819
--- /dev/null
+++ b/src/api/statis/statis.js
@@ -0,0 +1,11 @@
+import request from '@/router/axios';
+
+export const selectIndexCount = (params) => {
+ return request({
+ url: '/api/blade-jfpts/catalogs/catalogs/selectIndexCount',
+ method: 'get',
+ params: {
+ ...params,
+ }
+ })
+}
\ No newline at end of file
diff --git a/src/styles/alarmAnalysis/alarmAnalysis.scss b/src/styles/alarmAnalysis/alarmAnalysis.scss
index 51c19b2..649e3e3 100644
--- a/src/styles/alarmAnalysis/alarmAnalysis.scss
+++ b/src/styles/alarmAnalysis/alarmAnalysis.scss
@@ -40,6 +40,10 @@
width: 99.7% !important;
}
+.statisTotal .el-col-md-6 {
+ width: 20%;
+}
+
//预警数量统计
.alarmStatis {
background-color: #ffffff;
diff --git a/src/views/alarmManagement/alarmAnalysis.vue b/src/views/alarmManagement/alarmAnalysis.vue
index bf4dde2..775572b 100644
--- a/src/views/alarmManagement/alarmAnalysis.vue
+++ b/src/views/alarmManagement/alarmAnalysis.vue
@@ -5,9 +5,26 @@
<!-- 时间按钮 -->
<div class="timeSearchBtn">
<el-button-group class="timeBtn">
- <el-button size="mini" @click="getData(1)">本周</el-button>
- <el-button size="mini" @click="getData(2)">月初至今</el-button>
- <el-button size="mini" @click="getData(3)">季度至今</el-button>
+ <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" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
@@ -61,10 +78,12 @@
<script>
import echarts from 'echarts'
+ import {selectIndexCount} from "@/api/statis/statis";
export default {
data(){
return {
+ activeClass:2,
statisToTalData: {
span:6,
data: []
@@ -114,45 +133,53 @@
methods: {
//警情统计总数
- getStatisTotalData(){
+ getStatisTotalData(data){
+ selectIndexCount(data).then(res => {
+ console.log(res.data);
+ this.form = res.data.data;
+ });
var that = this;
that.statisToTalData.data = [
{
click: function (item) {
},
- title: '监测点总数',
+ title: '警情总数',
count: 12332,
icon: 'el-icon-warning',
- color: '#3AA7F0',
- target:'_blank'
+ color: '#F34A4A'
},
{
click: function (item) {
},
- title: '总预警数',
+ title: '违禁包裹数',
count: 33,
icon: 'el-icon-warning',
- color: '#F34A4A',
- target:'_blank'
+ color: '#FF9836'
},
{
click: function (item) {
},
- title: '一键求助确认率',
+ title: '违禁物品数',
count: 2223,
icon: 'el-icon-setting',
- color: '#8058A5',
- target:'_blank'
+ color: '#8058A5'
},
{
click: function (item) {
},
- title: '一键求助确认数',
+ title: '在线设备数',
count: 2223,
icon: 'el-icon-setting',
- color: '#29C093',
- target:'_blank'
+ color: '#29C093'
},
+ {
+ click: function (item) {
+ },
+ title: '客户数量',
+ count: 2223,
+ icon: 'el-icon-setting',
+ color: '#3AA7F0'
+ }
];
},
@@ -236,44 +263,36 @@
that.alarmClassifyStatis.data = [
{
click: function (item) {
- alert(JSON.stringify(item));
},
- title:'香菜',
+ title:'一键求助',
color:'yellow',
- href:"http://www.baidu.com",
target:'_blank',
- name:'文件上传',
- date:'1天前'
+ name:'日平均一键求助数',
+ date:'1.00'
},
{
click: function (item) {
- alert(JSON.stringify(item));
},
- title:'钉宫',
+ title:'违禁品',
color:'green',
- href:"http://www.baidu.com",
- name:'流加载',
- date:'1天前'
+ name:'日平均违禁品数',
+ date:'3.00'
},
{
click: function (item) {
- alert(JSON.stringify(item));
},
- title:'亚丝娜',
+ title:'红色健康码',
color:'#3fa1ff',
- href:"http://www.baidu.com",
- name:'表单',
- date:'1天前'
+ name:'日平均红色健康码数',
+ date:'1.00'
},
{
click: function (item) {
- alert(JSON.stringify(item));
},
- title:'狂三',
+ title:'体温异常',
color:'red',
- href:"http://www.baidu.com",
- name:'文件上传',
- date:'1天前'
+ name:'日平均体温异常数',
+ date:'10.00'
}
];
},
@@ -349,44 +368,36 @@
that.alarmTypeProStatis.data = [
{
click: function (item) {
- alert(JSON.stringify(item));
},
- title:'香菜',
+ title:'一键求助',
color:'yellow',
- href:"http://www.baidu.com",
target:'_blank',
- name:'文件上传',
- date:'1天前'
+ name:'0',
+ date:'0.00%'
},
{
click: function (item) {
- alert(JSON.stringify(item));
},
- title:'钉宫',
+ title:'违禁品',
color:'green',
- href:"http://www.baidu.com",
- name:'流加载',
- date:'1天前'
+ name:'0',
+ date:'0.00%'
},
{
click: function (item) {
- alert(JSON.stringify(item));
},
- title:'亚丝娜',
+ title:'红色健康码',
color:'#3fa1ff',
- href:"http://www.baidu.com",
- name:'表单',
- date:'1天前'
+ name:'0',
+ date:'0.00%'
},
{
click: function (item) {
- alert(JSON.stringify(item));
},
- title:'狂三',
+ title:'体温异常',
color:'red',
- href:"http://www.baidu.com",
- name:'文件上传',
- date:'1天前'
+ name:'0',
+ date:'0.00%'
}
];
},
@@ -560,44 +571,32 @@
that.confirmTimeProStatis.data = [
{
click: function (item) {
- alert(JSON.stringify(item));
},
- title:'香菜',
+ title:'小于5分钟',
color:'yellow',
- href:"http://www.baidu.com",
target:'_blank',
- name:'文件上传',
- date:'1天前'
+ name:'0',
},
{
click: function (item) {
- alert(JSON.stringify(item));
},
- title:'钉宫',
+ title:'5-10分钟',
color:'green',
- href:"http://www.baidu.com",
- name:'流加载',
- date:'1天前'
+ name:'0',
},
{
click: function (item) {
- alert(JSON.stringify(item));
},
- title:'亚丝娜',
+ title:'10-30分钟',
color:'#3fa1ff',
- href:"http://www.baidu.com",
- name:'表单',
- date:'1天前'
+ name:'0',
},
{
click: function (item) {
- alert(JSON.stringify(item));
},
- title:'狂三',
+ title:'30分钟以上',
color:'red',
- href:"http://www.baidu.com",
- name:'文件上传',
- date:'1天前'
+ name:'0',
}
];
},
@@ -607,7 +606,7 @@
var that = this;
that.confirmAverageSpeedData=[
{
- name:'一键求助',
+ name:'mis_zhang',
sex:'1',
}
];
@@ -654,7 +653,7 @@
trigger: 'axis'
},
legend: {
- data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
+ data: ['一键求助', '违禁品', '红色健康码', '体温异常'],
top:'10%',
right:'6%'
},
@@ -681,25 +680,25 @@
},
series: [
{
- name: '邮件营销',
+ name: '一键求助',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
- name: '联盟广告',
+ name: '违禁品',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
- name: '视频广告',
+ name: '红色健康码',
type: 'line',
stack: '总量',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
- name: '直接访问',
+ name: '体温异常',
type: 'line',
stack: '总量',
data: [320, 332, 301, 334, 390, 330, 320]
@@ -737,6 +736,14 @@
endTime = this.showToDay(today);
that.dateTime = [startTime,endTime];
}
+ //封装数据
+ var data = {};
+ data ={
+ startTime:this.dateTime[0],
+ endTime:this.dateTime[1]
+ }
+ console.log(data,111);
+ //调用方法
},
//本日
@@ -797,5 +804,11 @@
</script>
<style lang="scss">
+ .el-button.btn-color {
+ color: rgb(255, 255, 255);
+ background-color: #29C093;
+ border-color: #29C093;
+ }
@import '@/styles/alarmAnalysis/alarmAnalysis.scss'
+
</style>
\ No newline at end of file
--
Gitblit v1.9.3