From 34257f504330191b1a698eb48b52217095db47fe Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期一, 04 九月 2023 18:10:46 +0800
Subject: [PATCH] 扬尘vue
---
src/views/exception/FlightInspection.vue | 847 ++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 613 insertions(+), 234 deletions(-)
diff --git a/src/views/exception/FlightInspection.vue b/src/views/exception/FlightInspection.vue
index 25abb94..dd60dfe 100644
--- a/src/views/exception/FlightInspection.vue
+++ b/src/views/exception/FlightInspection.vue
@@ -1,14 +1,16 @@
<script>
-import InputSearch from '../../sfc/InputSearch.vue';
-import ExceptionType from '../../sfc/ExceptionType.vue';
-import TimeSelect from '../../sfc/TimeSelect.vue';
-import DustExceptionText from '../../sfc/DustExceptionText.vue';
+import InputSearch from '@/sfc/InputSearch.vue';
+import ExceptionType from '@/sfc/ExceptionType.vue';
+import TimeSelectWithShortCuts from '@/sfc/TimeSelectWithShortCuts.vue';
+import DustExceptionText from './components/DustExceptionText.vue';
import { useFetch } from '../../utils/fetch.js';
import { useCommonFunction } from '../../utils/common.js';
-
+import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
+import ButtonClick from '@/sfc/ButtonClick.vue'
+import index from '@/utils/exception_common_function/index.js'
// 寮傚父鍥惧舰寮傛缁勪欢
const DustLineChart = defineAsyncComponent(() =>
- import('../../sfc/DustLineChart.vue')
+ import('./components/DustLineChart.vue')
);
import dayjs from 'dayjs';
@@ -16,9 +18,11 @@
components: {
ExceptionType,
InputSearch,
- TimeSelect,
+ TimeSelectWithShortCuts,
DustExceptionText,
- DustLineChart
+ DustLineChart,
+ ButtonClick,
+ AreaAndmonitorType
},
data() {
return {
@@ -37,7 +41,7 @@
// 琛ㄦ牸灞曠ず鐨勬暟鎹�
displayData: [],
// 琛ㄦ牸楂樺害
- tableHeight: 300,
+ tableHeight: 400,
// 琛ㄦ牸鏁版嵁
// 褰撳墠椤�
currentPage: 1,
@@ -59,12 +63,25 @@
exception2: [],
// 鏁版嵁闀挎椂娈垫棤娉㈠姩
exception3: [],
+ // 閲忕骇绐佸彉寮傚父
+ exception4: [],
+ // 涓磋繎瓒呮爣寮傚父
+ exception5: [],
+ // 鍗曟棩瓒呮爣娆℃暟涓寸晫寮傚父
+ exception6: [],
+ // 婊戝姩骞冲潎鍊煎紓甯�
+ exception7: [],
+
// 璇ユ椂娈电殑寮傚父鏁伴噺
exception0Num: 0,
exception1Num: 0,
exception2Num: 0,
- exception3Num: 0
+ exception3Num: 0,
+ exception4Num: 0,
+ exception5Num: 0,
+ exception6Num: 0,
+ exception7Num: 0,
},
// 绔欑偣鎬绘暟閲�
siteTotal: 0,
@@ -154,7 +171,6 @@
},
// 褰撻�夋嫨鐨勬椂闂村彂鐢熷彉鍖栨椂锛屽紓甯稿垎鏋愰儴鍒嗙殑寮傚父搴楅摵鏁伴噺鍚屾鍙樺寲
-
beginTime() {
this.getShopNames();
},
@@ -166,45 +182,14 @@
}
},
mounted() {
- // 娴嬭瘯缁勫悎寮忓嚱鏁�
- // let param = {
- // siteName: '閲戝北鍖洪噾灞辨柊鍩嶫SC1-0401鍗曞厓1-11-01鍦板潡椤圭洰09',
- // beginTime: '2023-07-01 00:00:00',
- // endTime: '2023-07-10 00:00:00'
- // };
- // this.backData = this.request('/dust/history1', param);
- // console.log('鍘嗗彶鏁版嵁涓猴細', this.backData.value);
-
this.backExceptionDataAWeekAgo();
- this.calTableHeight();
// 鏌ヨ鏃堕棿娈电殑鍚勫紓甯哥殑绔欑偣锛屾煡璇㈣鏃堕棿鍖洪棿鐨勫悇寮傚父鏁伴噺
this.getShopNames();
- this.test()
- // this.exception.exception0 = this.getSiteNameByExceptionType('0',this.beginTime,this.endTime)
- // console.log('寮傚父鏁版嵁涓猴細',this.exception.exception0);
+
},
methods: {
- test(){
- const data = [0.084, 0.073, 0.062, 0.1];
- const threshold = 0.2; // 璁惧畾鐨勫彉鍖栫巼闃堝��
-for (let i = 1; i < data.length; i++) {
- const rateOfChange = Math.abs((data[i] - data[i-1]) / data[i-1]);
-
- console.log('鍙樺寲鐜囦负锛�',data[i], data[i-1],rateOfChange);
- if (rateOfChange > threshold) {
- console.log(`鏁版嵁 ${data[i-1]} 鍒� ${data[i]} 鐨勫彉鍖栫巼瓒呰繃闃堝�� ${threshold}`);
- // 杩涜鐩稿簲鐨勫鐞�
- }
-}
- },
-
- // getExceptionSiteNum(){
- // this.$http.get('/dust/exceptionsitenum').then(result => {
- // this.exceptionSiteNum = result.data.data.length
- // })
- // },
/**
* description锛氱偣鍑诲紓甯哥珯鐐瑰悕瀛楁椂 杩斿洖鐨勬暟鎹�
* @param锛�
@@ -225,35 +210,12 @@
this.selectedRowIndex = this.displayData.indexOf(this.tableCurrentRowData);
},
-
- /**
- * description锛氳繑鍥炴椂闂存暟缁勶紝浠庡紑濮嬫椂闂寸殑鍚�15鍒嗛挓鍒扮粨鏉熸椂闂翠负姝€��
- * @param锛� 寮傚父鐨勫紑濮�,寮傚父缁撴潫鏃堕棿
- * @createTime:2023-08-17
- * @returns锛氭瘮濡�12:00:00-13:00:00 鎵�浠ヨ繑鍥炵殑鏁扮粍鍏冪礌鏄� 12:00:00 ,12:15:00,12:30:00,12:45:00锛�13:00:00
- */
- descTenTime(begin, end) {
- let time = [];
- if (begin == end) {
- time.push(begin);
- return time;
- }
- time.push(begin);
- let temp = dayjs(begin).add(15, 'minute').format('YYYY-MM-DD HH:mm:ss');
- while (temp != end) {
- time.push(temp);
- temp = dayjs(temp).add(15, 'minute').format('YYYY-MM-DD HH:mm:ss');
- }
- // 鍔犱笂寮傚父鐨勭粨鏉熸椂闂�
- time.push(temp);
- return time;
- },
/**
* description锛氭柇鐢垫垨鏂綉鏃惰缃殑琛ㄦ牸鏁版嵁
*/
setOfflineTbleData(){
// 鏃犳暟鎹椂鐨勬椂闂存暟缁� 鏃堕棿鐩稿樊15鍒嗛挓
- const abnormalTimeTenMinute = this.descTenTime(
+ const abnormalTimeTenMinute = index.descFiftyTime(
this.tableCurrentRowData.beginTime,
this.tableCurrentRowData.endTime
);
@@ -274,63 +236,9 @@
this.exceptionTotal = abnormalTimeTenMinute.length;
},
- /**
- * description锛氳繑鍥炲紑濮嬫椂闂寸殑鍓�45鍒嗛挓鐨勬椂闂寸偣锛岀粨鏉熸椂闂村悗45鍒嗛挓鐨勬椂闂寸偣
- * @param锛� 寮傚父鐨勫紑濮嬫椂闂达紝寮傚父鐨勭粨鏉熸椂闂淬��
- * @returns锛氭暟缁勩�倀ime[0],time[1],time[2],time[3]鍒嗗埆浠ｈ〃寮傚父鍖洪棿鍓�45鍒嗛挓鐨勬椂闂寸偣锛屽墠15鍒嗛挓鐨勬椂闂寸偣,鍚�15鍒嗛挓鐨勬椂闂寸偣锛屽悗45鍒嗛挓鐨勬椂闂寸偣
- */
- before45AndAfter45(begin, end) {
- let time = [];
- // 鍓嶄竴娈电殑寮�濮嬫椂闂�
- const before45MinBegin = dayjs(begin)
- .subtract(45, 'minute')
- .format('YYYY-MM-DD HH:mm:ss');
- // 鍓嶄竴娈电殑缁撴潫鏃堕棿
- const before15MinBegin = dayjs(begin)
- .subtract(15, 'minute')
- .format('YYYY-MM-DD HH:mm:ss');
+
- // 鍚庝竴娈电殑寮�濮嬫椂闂�
- const after15MinBegin = dayjs(end)
- .add(15, 'minute')
- .format('YYYY-MM-DD HH:mm:ss');
- // 寰�鍚�40鍒嗛挓
- const after45MinEnd = dayjs(end)
- .add(45, 'minute')
- .format('YYYY-MM-DD HH:mm:ss');
- time.push(before45MinBegin);
- time.push(before15MinBegin);
- time.push(after15MinBegin);
- time.push(after45MinEnd);
- return time;
- },
- /**
- * description锛氳繑鍥炴煇绔欑偣鍦ㄨ鏃舵鍘嗗彶鏁版嵁鐨刧et璇锋眰鍙傛暟
- * @param锛� 绔欑偣鍚嶇О锛� 寮�濮嬫椂闂达紝 缁撴潫鏃堕棿
- * @returns锛氬璞�
- */
- requestGetParms(name, begin, end) {
- return {
- siteName: name,
- beginTime: begin,
- endTime: end
- };
- },
- /**
- * description锛氱浉宸灏戜釜15鍒嗛挓 璁＄畻涓寘鎷紑濮嬫椂闂达紝缁撴潫鏃堕棿銆�
- * @param锛� 寮傚父寮�濮嬫椂闂达紝寮傚父缁撴潫鏃堕棿
- * @returns锛氭暣鏁�
- */
- diffFiftyMinutesNum(beginNormal, endNormal) {
- // 灏嗗紑濮嬫椂闂村拰缁撴潫鏃堕棿杞崲涓篸ayjs瀵硅薄
- const start = dayjs(beginNormal).subtract(15, 'minute');
- const end = dayjs(endNormal);
- // 璁＄畻缁撴潫鏃堕棿鍑忓幓寮�濮嬫椂闂翠腑闂寸浉宸灏戜釜鍗佸垎閽�
- const diffInMinutes = end.diff(start, 'minute');
- const diffInTenMinutes = Math.floor(diffInMinutes / 15);
- return diffInTenMinutes;
- },
// 娈电數鎴栨柇缃戝尯闂存棤鏁版嵁锛岄渶瑕佽ˉ鍏呫�傚叾浠栫殑閮芥湁鏁版嵁锛岀洿鎺ヤ竴娆¤姹傚叏閮ㄦ椂娈靛氨濂�
// 鏍规嵁寮傚父鍖洪棿鏋勯�犲墠鍚庣棣栧熬 鍓嶅尯闂� 涓棿鍖洪棿 鍚庡尯闂�
@@ -361,7 +269,7 @@
let timeAndValue = {};
// 浠庢坊鍔犱簡棣栦綅鍖洪棿鐨勫紑濮嬪拰缁撴潫鏃堕棿杩涜閬嶅巻 淇濊瘉鏃堕棿浠�10鍒嗛挓涓洪棿闅�
- timeAndValue = this.keepContinuousByEachFiftyMinutes(
+ timeAndValue = index.keepContinuousByEachFiftyMinutes(
allTime[0],
allTime[3],
this.dialog.allExceptionTimeData
@@ -383,59 +291,7 @@
});
},
- /**
- * description锛氬垽鏂璬ata涓槸鍚︽湁璇ユ棩鏈熸椂闂达紝瀛樺湪杩斿洖璇ユ椂闂村搴旂殑娴撳害鍊硷紝鍚﹀垯杩斿洖-1
- * @param锛� 鍔犱笂鍓嶅悗鍖洪棿鐨勫紓甯告暟鎹紝鏃堕棿瀛楃涓�
- * @returns锛�
- */
- findTimeInExceptionData(data, time) {
- for (let i = 0; i < data.length; i++) {
- if (data[i] == null) {
- continue;
- }
- if (data[i]['lst'] == time) {
- return data[i]['dustValue'];
- }
- }
- return -1;
- },
- /**
- * description锛氭牴鎹紑濮嬪拰缁撴潫鏃堕棿,杩斿洖浠�15鍒嗛挓涓洪棿闅旂殑鏃堕棿鍜屽搴旂殑鍊�
- * @param锛� 鍓嶅尯闂寸殑寮�濮嬫椂闂达紝 鍚庡尯闂寸殑缁撴潫鏃堕棿, 鍔犱笂鍓嶅悗鍖洪棿鐨勬�绘椂闂存鐨勫紓甯告暟鎹殑瀵硅薄鏁扮粍
- * @returns锛氬璞°�傚寘鍚簡鎶樼嚎鍥剧殑x杞达紝y杞寸殑閰嶇疆鏁版嵁
- */
- keepContinuousByEachFiftyMinutes(
- intervalStarTime,
- intervalEndTime,
- headAndTailExceptionData
- ) {
- let xAxis = [];
- let yAxis = [];
- let obj = {};
- let current = intervalStarTime;
- let tail = dayjs(intervalEndTime)
- .add(15, 'minute')
- .format('YYYY-MM-DD HH:mm:ss');
- while (current != tail) {
- let value = this.findTimeInExceptionData(
- headAndTailExceptionData,
- current
- );
- if (value != -1) {
- xAxis.push(current);
- yAxis.push(value);
- } else {
- xAxis.push(current);
- yAxis.push(null);
- }
- current = dayjs(current)
- .add(15, 'minute')
- .format('YYYY-MM-DD HH:mm:ss');
- }
- obj['xAxis'] = xAxis;
- obj['yAxis'] = yAxis;
- return obj;
- },
+
/**
* description锛氱粯鍒舵姌绾垮浘
@@ -713,7 +569,7 @@
}
};
break;
- case '3':
+ case '3' :
this.dialog.option = {
tooltip: {},
toolbox: {
@@ -797,8 +653,83 @@
}
};
break;
+ case '4':
+ this.dialog.option = {
+ tooltip: {},
+ toolbox: {
+ // 宸ュ叿鏍�
+ feature: {
+ // dataZoom: {
+ // yAxisIndex: 'none'
+ // },
+ // 淇濆瓨涓哄浘鐗�
+ saveAsImage: {}
+ }
+ },
+ xAxis: {
+ type: 'category',
+ data: xData,
+ name: '鏃堕棿',
+ axisLabel: {
+ formatter: function (value) {
+ return value.slice(11, -3);
+ }
+ }
+ },
+ yAxis: {
+ type: 'value',
+ name: 'mg/m鲁'
+ },
+ series: [
+ {
+ name: '棰楃矑鐗╂祿搴�',
+ type: 'line',
+ data: yData,
+ // 鍙樻崲鎸囧畾鏃堕棿鍖洪棿鐨勮儗鏅鑹�
+ markArea: {
+ itemStyle: {
+ color: 'rgba(255, 173, 177, 0.4)'
+ },
+ data: [
+ [
+ {
+ name: '寮傚父鏃堕棿娈�',
+ xAxis: exceptionBeginTime
+ },
+ {
+ xAxis: exceptionEndTime
+ }
+ ]
+ ]
+ },
+
+ }
+ ],
+ // 鎸囧畾鏃堕棿鍖洪棿鐨勭嚎娈靛彉棰滆壊
+ visualMap: {
+ show: false,
+ dimension: 0,
+ pieces: [
+ {
+ lte: beginIndex,
+ color: 'green'
+ },
+ {
+ gt: beginIndex,
+ lte: endIndex,
+ color: 'red'
+ },
+ {
+ gt: endIndex,
+ lte: xData.length - 1,
+ color: 'green'
+ }
+ ]
+ }
+ };
+ break;
default:
- return 'error';
+ console.log('娌℃湁璁剧疆璇ュ紓甯哥被鍨嬶紒');;
}
this.flag.banTouch = 0
},
@@ -815,13 +746,13 @@
// beforeAndAfterTime[1]:鍓�15鍒嗛挓鐨勬椂闂寸偣
// beforeAndAfterTime[2]:鍚�15鍒嗛挓鐨勬椂闂寸偣
// beforeAndAfterTime[3]:鍚�45鍒嗛挓鐨勬椂闂寸偣
- let beforeAndAfterTime = this.before45AndAfter45(
+ let beforeAndAfterTime = index.before45AndAfter45(
exceptionBeginTime,
exceptionEndTime
);
// 鏋勯�犲紓甯告椂闂村墠鍚庡尯闂存暟鎹姹傚弬鏁�(闄や簡鏂綉涓兘鐢ㄥ埌锛�
- let paramsAllTime = this.requestGetParms(
+ let paramsAllTime = index.requestGetParms(
this.tableCurrentRowData.name,
beforeAndAfterTime[0],
beforeAndAfterTime[3]
@@ -848,7 +779,7 @@
// 寰楀埌涓婁竴琛岀殑鏁版嵁
this.tableCurrentRowData = this.displayData[this.selectedRowIndex]
- let params = this.requestGetParms(this.tableCurrentRowData.name,this.tableCurrentRowData.beginTime,this.tableCurrentRowData.endTime)
+ let params = index.requestGetParms(this.tableCurrentRowData.name,this.tableCurrentRowData.beginTime,this.tableCurrentRowData.endTime)
this.loading.preButton = true
this.$http
.get('/dust/history', { params: params })
@@ -884,7 +815,7 @@
// 寰楀埌涓婁竴琛岀殑鏁版嵁
this.tableCurrentRowData = this.displayData[this.selectedRowIndex]
- let params = this.requestGetParms(this.tableCurrentRowData.name,this.tableCurrentRowData.beginTime,this.tableCurrentRowData.endTime)
+ let params = index.requestGetParms(this.tableCurrentRowData.name,this.tableCurrentRowData.beginTime,this.tableCurrentRowData.endTime)
this.loading.afterButton = true
this.$http
.get('/dust/history', { params: params })
@@ -960,6 +891,40 @@
this.exception.exception3 = result.data.data;
});
+ this.$http
+ .get('/dust/sitenamecode', {
+ params: {
+ exceptionType: '4',
+ beginTime: this.beginTime,
+ endTime: this.endTime
+ }
+ })
+ .then((result) => {
+ this.exception.exception4 = result.data.data;
+ });
+ this.$http
+ .get('/dust/sitenamecode', {
+ params: {
+ exceptionType: '5',
+ beginTime: this.beginTime,
+ endTime: this.endTime
+ }
+ })
+ .then((result) => {
+ this.exception.exception5 = result.data.data;
+ });
+ this.$http
+ .get('/dust/sitenamecode', {
+ params: {
+ exceptionType: '6',
+ beginTime: this.beginTime,
+ endTime: this.endTime
+ }
+ })
+ .then((result) => {
+ this.exception.exception6 = result.data.data;
+ });
+
/* 寮傚父寮傚父鏁伴噺 */
@@ -1007,6 +972,40 @@
})
.then((result) => {
this.exception.exception3Num = result.data.data;
+ });
+
+ this.$http
+ .get('/dust/exceptionnum', {
+ params: {
+ exceptionType: '4',
+ beginTime: this.beginTime,
+ endTime: this.endTime
+ }
+ })
+ .then((result) => {
+ this.exception.exception4Num = result.data.data;
+ });
+ this.$http
+ .get('/dust/exceptionnum', {
+ params: {
+ exceptionType: '5',
+ beginTime: this.beginTime,
+ endTime: this.endTime
+ }
+ })
+ .then((result) => {
+ this.exception.exception5Num = result.data.data;
+ });
+ this.$http
+ .get('/dust/exceptionnum', {
+ params: {
+ exceptionType: '6',
+ beginTime: this.beginTime,
+ endTime: this.endTime
+ }
+ })
+ .then((result) => {
+ this.exception.exception6Num = result.data.data;
});
},
@@ -1194,8 +1193,12 @@
}
},
// 琛ㄦ牸搴忓彿閫掑
- indexMethod(index) {
+ indexMethod1(index) {
return index + 1 + (this.currentPage - 1) * this.pageSize;
+ },
+ // 琛ㄦ牸搴忓彿閫掑
+ indexMethod2(index) {
+ return index + 1;
}
}
};
@@ -1207,9 +1210,12 @@
<el-col>
<el-form :inline="true">
<div class="head-container-text">
+ <el-form-item >
+ <AreaAndmonitorType ></AreaAndmonitorType>
+ </el-form-item>
<el-form-item>
<InputSearch
- :isNeedDefaultSite="0"
+ isNeedDefaultSite="0"
@submit-value="(n) => (form.name = n)"
@submit-site-Nums="(n) => (siteTotal = n)"
>
@@ -1223,13 +1229,14 @@
</el-form-item>
<el-form-item>
- <TimeSelect @submit-time="giveTime"></TimeSelect>
+ <TimeSelectWithShortCuts @submit-time="giveTime"></TimeSelectWithShortCuts>
</el-form-item>
</div>
<div class="head-container-search">
<el-form-item>
- <el-button type="warning" :loading="loading.queryButton" @click="handleSubmit">鏌ヨ</el-button>
+ <!-- <el-button type="warning" :loading="loading.queryButton" @click="handleSubmit">鏌ヨ</el-button> -->
+ <ButtonClick content="鍒嗘瀽" type="warning" :loading="loading.queryButton" @do-search="handleSubmit"></ButtonClick>
</el-form-item>
</div>
</el-form>
@@ -1248,13 +1255,286 @@
<template #header>
<div class="card-header">寮傚父鍒嗘瀽</div>
</template>
- <el-row :gutter="20">
+
+
+ <el-row :gutter="20" class="card-row" >
<el-col :span="6">
- <div class="card-content">
+ <div class="card-content-unnormal">
<!-- 鏍囧ご -->
<div class="card-text1">
<image class="card-header-image"></image>
- <span class="card-header-text">瓒呮爣</span>
+ <span class="card-header-text">閲忕骇绐佸彉寮傚父</span>
+ </div>
+
+ <div class="card-content-text">
+ <el-scrollbar>
+
+ <span class="card-exceptionname-text1">寮傚父绔欑偣鍗犳瘮:</span>
+ <span>{{ exception.exception4.length }} /{{ siteTotal }}</span>
+ <span>
+ ({{
+ ((exception.exception4.length / siteTotal) * 100).toFixed(
+ 1
+ )
+ }}%)</span
+ >
+
+ <div class="card-exceptionname-text2"
+ >寮傚父鏁板崰姣�:{{
+ (
+ (exception.exception4Num /
+ (exception.exception0Num +
+ exception.exception1Num +
+ exception.exception2Num +
+ exception.exception3Num+
+ exception.exception4Num+
+ exception.exception5Num+
+ exception.exception6Num+
+ exception.exception7Num
+ )) *
+ 100
+ ).toFixed(1)
+ }}%</div
+ >
+
+ </el-scrollbar>
+ </div>
+ <hr />
+ <!-- 寮傚父鐨勫簵閾哄悕瀛� -->
+ <div class="card-exception-buttom">
+ <el-scrollbar max-height="90px">
+ <DustExceptionText
+ :site-name="item.name"
+ exception-type="4"
+ :begin-time="beginTime"
+ :end-time="endTime"
+ @submit-exception-data="getAbnormalDataByClick"
+
+ v-for="(item, index) in exception.exception4"
+ :key="item"
+ >{{ item.name }}
+ <span
+ v-if="index < exception.exception4.length - 1"
+ class="text-blank"
+ >,</span
+ >
+ </DustExceptionText>
+ </el-scrollbar>
+ </div>
+ <!-- 缁撴潫 -->
+ </div>
+ </el-col>
+
+ <el-col :span="6">
+ <div class="card-content-unnormal">
+ <!-- 鏍囧ご -->
+ <div class="card-text1">
+ <image class="card-header-image"></image>
+ <span class="card-header-text">涓磋繎瓒呮爣寮傚父</span>
+ </div>
+
+ <div class="card-content-text">
+ <el-scrollbar>
+
+ <span class="card-exceptionname-text1">寮傚父绔欑偣鍗犳瘮:</span>
+ <span>{{ exception.exception5.length }} /{{ siteTotal }}</span>
+ <span>
+ ({{
+ ((exception.exception5.length / siteTotal) * 100).toFixed(
+ 1
+ )
+ }}%)</span
+ >
+
+ <div class="card-exceptionname-text2"
+ >寮傚父鏁板崰姣�:{{
+ (
+ (exception.exception5Num /
+ (exception.exception0Num +
+ exception.exception1Num +
+ exception.exception2Num +
+ exception.exception3Num+
+ exception.exception4Num+
+ exception.exception5Num+
+ exception.exception6Num+
+ exception.exception7Num
+ )) *
+ 100
+ ).toFixed(1)
+ }}%</div
+ >
+
+ </el-scrollbar>
+ </div>
+ <hr />
+ <!-- 寮傚父鐨勫簵閾哄悕瀛� -->
+ <div class="card-exception-buttom">
+ <el-scrollbar max-height="90px">
+ <DustExceptionText
+ :site-name="item.name"
+ exception-type="5"
+ :begin-time="beginTime"
+ :end-time="endTime"
+ @submit-exception-data="getAbnormalDataByClick"
+
+ v-for="(item, index) in exception.exception5"
+ :key="item"
+ >{{ item.name }}
+ <span
+ v-if="index < exception.exception5.length - 1"
+ class="text-blank"
+ >,</span
+ >
+ </DustExceptionText>
+ </el-scrollbar>
+ </div>
+ <!-- 缁撴潫 -->
+ </div>
+ </el-col>
+
+ <el-col :span="6">
+ <div class="card-content-unnormal">
+ <!-- 鏍囧ご -->
+ <div class="card-text1">
+ <image class="card-header-image"></image>
+ <span class="card-header-text">鍗曟棩瓒呮爣娆℃暟涓寸晫寮傚父</span>
+ </div>
+
+ <div class="card-content-text">
+ <el-scrollbar>
+
+ <span class="card-exceptionname-text1">寮傚父绔欑偣鍗犳瘮:</span>
+ <span>{{ exception.exception6.length }} /{{ siteTotal }}</span>
+ <span>
+ ({{
+ ((exception.exception6.length / siteTotal) * 100).toFixed(
+ 1
+ )
+ }}%)</span
+ >
+
+ <div class="card-exceptionname-text2"
+ >寮傚父鏁板崰姣�:{{
+ (
+ (exception.exception6Num /
+ (exception.exception0Num +
+ exception.exception1Num +
+ exception.exception2Num +
+ exception.exception3Num+
+ exception.exception4Num+
+ exception.exception5Num+
+ exception.exception6Num+
+ exception.exception7Num
+ )) *
+ 100
+ ).toFixed(1)
+ }}%</div
+ >
+
+ </el-scrollbar>
+ </div>
+ <hr />
+ <!-- 寮傚父鐨勫簵閾哄悕瀛� -->
+ <div class="card-exception-buttom">
+ <el-scrollbar max-height="90px">
+ <DustExceptionText
+ :site-name="item.name"
+ exception-type="6"
+ :begin-time="beginTime"
+ :end-time="endTime"
+ @submit-exception-data="getAbnormalDataByClick"
+
+ v-for="(item, index) in exception.exception6"
+ :key="item"
+ >{{ item.name }}
+ <span
+ v-if="index < exception.exception6.length - 1"
+ class="text-blank"
+ >,</span
+ >
+ </DustExceptionText>
+ </el-scrollbar>
+ </div>
+ <!-- 缁撴潫 -->
+ </div>
+ </el-col>
+
+ <el-col :span="6">
+ <div class="card-content-unnormal">
+ <!-- 鏍囧ご -->
+ <div class="card-text1">
+ <image class="card-header-image"></image>
+ <span class="card-header-text">鍙樺寲瓒嬪娍寮傚父</span>
+ </div>
+
+ <div class="card-content-text">
+ <el-scrollbar>
+
+ <span class="card-exceptionname-text1">寮傚父绔欑偣鍗犳瘮:</span>
+ <span>{{ exception.exception7.length }} /{{ siteTotal }}</span>
+ <span>
+ ({{
+ ((exception.exception7.length / siteTotal) * 100).toFixed(
+ 1
+ )
+ }}%)</span
+ >
+
+ <div class="card-exceptionname-text2"
+ >寮傚父鏁板崰姣�:{{
+ (
+ (exception.exception7Num /
+ (exception.exception0Num +
+ exception.exception1Num +
+ exception.exception2Num +
+ exception.exception3Num+
+ exception.exception4Num+
+ exception.exception5Num+
+ exception.exception6Num+
+ exception.exception7Num
+ )) *
+ 100
+ ).toFixed(1)
+ }}%</div
+ >
+
+ </el-scrollbar>
+ </div>
+ <hr />
+ <!-- 寮傚父鐨勫簵閾哄悕瀛� -->
+ <div class="card-exception-buttom">
+ <el-scrollbar max-height="90px">
+ <DustExceptionText
+ :site-name="item.name"
+ exception-type="7"
+ :begin-time="beginTime"
+ :end-time="endTime"
+ @submit-exception-data="getAbnormalDataByClick"
+
+ v-for="(item, index) in exception.exception7"
+ :key="item"
+ >{{ item.name }}
+ <span
+ v-if="index < exception.exception7.length - 1"
+ class="text-blank"
+ >,</span
+ >
+ </DustExceptionText>
+ </el-scrollbar>
+ </div>
+ <!-- 缁撴潫 -->
+ </div>
+ </el-col>
+ </el-row>
+
+
+ <el-row :gutter="20" >
+ <el-col :span="6">
+ <div class="card-content-normal">
+ <!-- 鏍囧ご -->
+ <div class="card-text1">
+ <image class="card-header-image"></image>
+ <span class="card-header-text">娴撳害瓒呮爣</span>
</div>
<div class="card-content-text">
@@ -1270,17 +1550,23 @@
}}%)</span
>
- <span class="card-exceptionname-text2"
+ <div class="card-exceptionname-text2"
>寮傚父鏁板崰姣�:{{
(
(exception.exception2Num /
(exception.exception0Num +
exception.exception1Num +
exception.exception2Num +
- exception.exception3Num)) *
+ exception.exception3Num+
+ exception.exception4Num+
+ exception.exception5Num+
+ exception.exception6Num+
+ exception.exception7Num
+
+ )) *
100
).toFixed(1)
- }}%</span
+ }}%</div
>
</el-scrollbar>
@@ -1288,7 +1574,7 @@
<hr />
<!-- 寮傚父鐨勫簵閾哄悕瀛� -->
<div class="card-exception-buttom">
- <el-scrollbar max-height="100px">
+ <el-scrollbar max-height="90px">
<DustExceptionText
:site-name="item.name"
exception-type="2"
@@ -1311,11 +1597,11 @@
</div>
</el-col>
<el-col :span="6"
- ><div class="card-content">
+ ><div class="card-content-normal">
<!-- 鏍囧ご -->
<div class="card-text1">
<image class="card-header-image"></image>
- <span class="card-header-text">鏂數鎴栨柇缃�</span>
+ <span class="card-header-text">鏁版嵁缂哄け寮傚父</span>
</div>
<div class="card-content-text">
@@ -1329,24 +1615,28 @@
)
}}%)</span
>
- <span class="card-exceptionname-text2"
+ <div class="card-exceptionname-text2"
>寮傚父鏁板崰姣�:{{
(
(exception.exception0Num /
(exception.exception0Num +
exception.exception1Num +
exception.exception2Num +
- exception.exception3Num)) *
+ exception.exception3Num+
+ exception.exception4Num+
+ exception.exception5Num+
+ exception.exception6Num+
+ exception.exception7Num)) *
100
).toFixed(1)
- }}%</span
+ }}%</div
>
</el-scrollbar>
</div>
<hr />
<!-- 寮傚父鐨勫簵閾哄悕瀛� -->
<div class="card-exception-buttom">
- <el-scrollbar max-height="100px">
+ <el-scrollbar max-height="90px">
<DustExceptionText
:site-name="item.name"
exception-type="0"
@@ -1369,7 +1659,7 @@
</div>
</el-col>
<el-col :span="6">
- <div class="card-content">
+ <div class="card-content-normal">
<!-- 鏍囧ご -->
<div class="card-text1">
<image class="card-header-image"></image>
@@ -1387,24 +1677,28 @@
)
}}%)</span
>
- <span class="card-exceptionname-text2"
+ <div class="card-exceptionname-text2"
>寮傚父鏁板崰姣�:{{
(
(exception.exception1Num /
(exception.exception0Num +
exception.exception1Num +
exception.exception2Num +
- exception.exception3Num)) *
+ exception.exception3Num+
+ exception.exception4Num+
+ exception.exception5Num+
+ exception.exception6Num+
+ exception.exception7Num)) *
100
).toFixed(1)
- }}%</span
+ }}%</div
>
</el-scrollbar>
</div>
<hr />
<!-- 寮傚父鐨勫簵閾哄悕瀛� -->
<div class="card-exception-buttom">
- <el-scrollbar max-height="100px">
+ <el-scrollbar max-height="90px">
<DustExceptionText
:site-name="item.name"
exception-type="1"
@@ -1427,7 +1721,7 @@
</div></el-col
>
<el-col :span="6"
- ><div class="card-content">
+ ><div class="card-content-normal">
<!-- 鏍囧ご -->
<div class="card-text1">
<image class="card-header-image"></image>
@@ -1445,40 +1739,97 @@
)
}}%)</span
>
- <span class="card-exceptionname-text2"
+ <div class="card-exceptionname-text2"
>寮傚父鏁板崰姣�:{{(100-
((exception.exception0Num /
(exception.exception0Num +
exception.exception1Num +
exception.exception2Num +
- exception.exception3Num)) *
+ exception.exception3Num+
+ exception.exception4Num+
+ exception.exception5Num+
+ exception.exception6Num+
+ exception.exception7Num)) *
100
) -
((exception.exception1Num /
(exception.exception0Num +
exception.exception1Num +
exception.exception2Num +
- exception.exception3Num)) *
+ exception.exception3Num+
+ exception.exception4Num+
+ exception.exception5Num+
+ exception.exception6Num+
+ exception.exception7Num)) *
100
) -
((exception.exception2Num /
(exception.exception0Num +
exception.exception1Num +
exception.exception2Num +
- exception.exception3Num)) *
+ exception.exception3Num+
+ exception.exception4Num+
+ exception.exception5Num+
+ exception.exception6Num+
+ exception.exception7Num)) *
+ 100
+ ) -
+ ((exception.exception4Num /
+ (exception.exception0Num +
+ exception.exception1Num +
+ exception.exception2Num +
+ exception.exception3Num+
+ exception.exception4Num+
+ exception.exception5Num+
+ exception.exception6Num+
+ exception.exception7Num)) *
+ 100
+ )-
+ ((exception.exception5Num /
+ (exception.exception0Num +
+ exception.exception1Num +
+ exception.exception2Num +
+ exception.exception3Num+
+ exception.exception4Num+
+ exception.exception5Num+
+ exception.exception6Num+
+ exception.exception7Num)) *
+ 100
+ )-
+ ((exception.exception6Num /
+ (exception.exception0Num +
+ exception.exception1Num +
+ exception.exception2Num +
+ exception.exception3Num+
+ exception.exception4Num+
+ exception.exception5Num+
+ exception.exception6Num+
+ exception.exception7Num)) *
+ 100
+ )-
+ ((exception.exception7Num /
+ (exception.exception0Num +
+ exception.exception1Num +
+ exception.exception2Num +
+ exception.exception3Num+
+ exception.exception4Num+
+ exception.exception5Num+
+ exception.exception6Num+
+ exception.exception7Num)) *
100
)
+
).toFixed(1)
- }}%</span
+ }}%</div
>
</el-scrollbar>
</div>
<hr />
<!-- 寮傚父鐨勫簵閾哄悕瀛� -->
<div class="card-exception-buttom">
- <el-scrollbar max-height="100px">
+ <el-scrollbar max-height="90px">
<DustExceptionText
:site-name="item.name"
exception-type="3"
@@ -1500,7 +1851,10 @@
<!-- 缁撴潫 -->
</div>
</el-col>
- </el-row>
+ </el-row>
+
+
+
</el-card>
</el-col>
</el-row>
@@ -1511,7 +1865,7 @@
ref="table"
:data="displayData"
:height="tableHeight"
- highlight-current-row="true"
+ :highlight-current-row="true"
size="default"
v-loading="loading.tableLoading"
border
@@ -1522,7 +1876,7 @@
width="60px"
align="center"
fixed
- :index="indexMethod"
+ :index="indexMethod1"
/>
<el-table-column prop="name" label="绔欑偣鍚嶇О" show-overflow-tooltip />
<el-table-column
@@ -1607,8 +1961,12 @@
<template #header>
<div class="diag-head">
<div class="diag-head-text">
+ <div>
<span class="diag-head-text1">绔欑偣鍚嶇О锛�</span
>{{ tableCurrentRowData.name }}
+ </div>
+
+ <div>
<span class="diag-head-text1">寮傚父绫诲瀷锛�</span>
<span v-if="tableCurrentRowData.exceptionType == '0'"
>鏂數鎴栨柇缃�</span
@@ -1620,6 +1978,17 @@
<span v-else-if="tableCurrentRowData.exceptionType == '3'"
>鏁版嵁闀挎椂闂存棤娉㈠姩</span
>
+ <span v-else-if="tableCurrentRowData.exceptionType == '4'"
+ >閲忕骇绐佸彉寮傚父</span
+ > <span v-else-if="tableCurrentRowData.exceptionType == '5'"
+ >涓磋繎瓒呮爣寮傚父</span
+ > <span v-else-if="tableCurrentRowData.exceptionType == '6'"
+ >鍗曟棩瓒呮爣娆℃暟涓寸晫寮傚父</span
+ > <span v-else-if="tableCurrentRowData.exceptionType == '7'"
+ >婊戝姩骞冲潎鍊煎紓甯�</span
+ >
+ </div>
+
<div>
<span class="diag-head-text1">寮傚父鏃堕棿娈碉細</span
>{{ tableCurrentRowData.beginTime }} ~
@@ -1664,7 +2033,7 @@
width="60px"
align="center"
fixed
- :index="indexMethod"
+ :index="indexMethod2"
></el-table-column>
<el-table-column
fixed
@@ -1709,7 +2078,8 @@
v-show="
tableCurrentRowData.exceptionType == '1' ||
tableCurrentRowData.exceptionType == '2' ||
- tableCurrentRowData.exceptionType == '3'
+ tableCurrentRowData.exceptionType == '3' ||
+ tableCurrentRowData.exceptionType == '4'
"
>寮傚父鏁版嵁锛�</span
>
@@ -1746,6 +2116,8 @@
}
/* 鏉′欢鏌ヨ妯″潡缁撴潫 */
+
+
/* 寮傚父鍒嗘瀽妯″潡鐨勬牱寮� */
.card-text1 {
// 榛戜綋鐨勫紓甯稿悕瀛楅儴鍒�
@@ -1764,9 +2136,14 @@
font-size: 18px;
font-weight: bold;
}
-.card-content {
+.card-content-unnormal {
min-height: 200px;
- border: 2px solid #9fdb1d;
+ border: 2px solid #FFCF8B;
+ border-radius: 20px;
+}
+.card-content-normal {
+ min-height: 200px;
+ border: 2px solid red;
border-radius: 20px;
}
.card-header-image {
@@ -1788,7 +2165,7 @@
.card-exceptionname-text2 {
// 寮傚父鏁板崰姣旂殑澶栬竟璺�
- margin-left: 50px;
+ // margin-left: 50px;
font-size: 14px;
white-space: nowrap;
}
@@ -1797,16 +2174,22 @@
margin-right: 10px;
color: #000000;
}
+.card-row {
+ margin-bottom: 10px;
+}
+
/* 寮傚父鍒嗘瀽妯″潡缁撴潫 */
/* 琛ㄦ牸妯″潡鐨勬牱寮� */
/* 琛ㄦ牸妯″潡缁撴潫 */
+
+
+
+
/* 鏌ョ湅璇︽儏瀵硅瘽妗嗘ā鍧楃殑鏍峰紡 */
-:deep(.el-dialog) {
- // 瀵硅瘽妗嗛珮搴�
-}
+
.diag-head {
// 瀵硅瘽妗嗗ご閮ㄥ尯鍩�
min-height: 200px;
@@ -1818,7 +2201,7 @@
}
.diag-head-text span:nth-child(2) {
// 瀵硅瘽妗嗗ご閮ㄢ�樺紓甯哥被鍨嬧�欏睘鎬�
- margin-left: 150px;
+ // margin-left: 150px;
}
.diag-head-text > div {
// 瀵硅瘽妗嗗紓甯告椂闂存
@@ -1831,19 +2214,15 @@
border: 2px solid #7bc0fc;
}
.chart-jump-button {
- // 鈥樹笂涓�鏉♀�欙紝鈥樹笅涓�鏉♀�� 鎸夐挳
- // border: 1px solid #fdc2db;
- min-height: 30px;
- width: 200px;
- float: right;
+ display: flex;
+ justify-content: right;
}
-.line-chart {
- // 寮傚父鎶樼嚎鍥�
- width: 920px;
- height: 300px;
- margin-bottom: 20px;
- min-width: 600px;
+.mx-1 {
+ position: absolute;
+ left: 10px;
+ bottom: 10px;
+
}
/* 鏌ョ湅璇︽儏瀵硅瘽妗嗘ā鍧楃粨鏉� */
</style>
--
Gitblit v1.9.3