From 045e502fa06255c7ebe1ad6bb4ff503825006cbe Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期二, 14 十一月 2023 14:55:56 +0800
Subject: [PATCH] 去除ts
---
src/views/exception/FlightInspection.vue | 2091 +++++++++++++++++++++++++++++++----------------------------
1 files changed, 1,103 insertions(+), 988 deletions(-)
diff --git a/src/views/exception/FlightInspection.vue b/src/views/exception/FlightInspection.vue
index 25abb94..8ea6552 100644
--- a/src/views/exception/FlightInspection.vue
+++ b/src/views/exception/FlightInspection.vue
@@ -1,24 +1,24 @@
<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 { useFetch } from '../../utils/fetch.js';
-import { useCommonFunction } from '../../utils/common.js';
-
+import { defineAsyncComponent } from 'vue'
+import TimeShortCuts from '@/sfc/TimeShortCuts.vue'
+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')
-);
+const DustLineChart = defineAsyncComponent(() => import('./components/DustLineChart.vue'))
+import exceptionApi from '@/api/exceptionApi.js'
+import dayjs from 'dayjs'
+import { ElMessage } from 'element-plus'
+import AnalysisCard from './components/AnalysisCard.vue'
-import dayjs from 'dayjs';
export default {
components: {
- ExceptionType,
- InputSearch,
- TimeSelect,
- DustExceptionText,
- DustLineChart
+ TimeShortCuts,
+ DustLineChart,
+ ButtonClick,
+ AreaAndmonitorType,
+ AnalysisCard
},
data() {
return {
@@ -27,8 +27,7 @@
// 绔欑偣鍚嶇О
name: '',
// 閫夋嫨鐨勫紓甯哥被鍨�
- exceptionName: [],
-
+ exceptionName: []
},
beginTime: '',
endTime: '',
@@ -37,16 +36,28 @@
// 琛ㄦ牸灞曠ず鐨勬暟鎹�
displayData: [],
// 琛ㄦ牸楂樺害
- tableHeight: 300,
- // 琛ㄦ牸鏁版嵁
+ tableHeight: 400,
+ // 琛ㄦ牸鏄剧ず
+ isTableShow: false,
// 褰撳墠椤�
currentPage: 1,
// 姣忛〉鏉℃暟
pageSize: 20,
+ // 琛ㄦ牸鐨勬�昏褰曟暟
total: 0,
-
- // 琛ㄦ牸鏌ヨ鏃犳暟鎹椂
- isNoData: false,
+
+ // 鏌ヨ鎸夐挳鏃犳暟鎹椂
+ isNoData: {
+ exception0: true,
+ exception1: true,
+ exception2: true,
+ exception3: true,
+ exception4: true,
+ exception5: true,
+ exception6: true,
+ exception7: true
+ },
+ // eslint-disable-next-line no-undef
// 瀵硅瘽妗嗘樉绀�
dialogTableVisible: false,
// 淇濆瓨寮傚父瀵瑰簲鐨勫簵閾哄悕绉板拰璁惧缂栧彿
@@ -59,36 +70,44 @@
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,
- // 寮傚父鐨勭珯鐐规�绘暟閲�
- // exceptionSiteNum:0,
-
// 閫変腑琛ㄦ牸褰撳墠琛岀殑鏁版嵁
tableCurrentRowData: null,
// 閫変腑琛ㄦ牸褰撳墠琛岀殑绱㈠紩
- selectedRowIndex:-2,
+ selectedRowIndex: -2,
// 椤甸潰涓婄殑鎸夐挳鍔犺浇鐘舵��
loading: {
// 鏌ヨ鎸夐挳
- queryButton:false,
- // 琛ㄦ牸鍔犺浇涓�
- tableLoading: false,
+ queryButton: false,
+ // 琛ㄦ牸鍔犺浇涓�
+ tableLoading: false,
// 涓婁竴鏉℃寜閽�
preButton: false,
// 涓嬩竴鏉℃寜閽�
afterButton: false,
// 鎶樼嚎鍥�
- lineChart: false,
-
+ lineChart: false
},
dialog: {
@@ -107,230 +126,267 @@
},
// 鏍囪浣�
- flag:{
+ flag: {
// 鍔犺浇鏃� 涓婁笅鏉℃寜閽笉鑳藉啀鐐瑰嚮
- banTouch:0,
+ banTouch: 0,
// 0浠ｈ〃鍒嗛〉锛�1浠ｈ〃涓嶅垎椤�
- originClick:0
+ originClick: 0
}
-
- };
+ }
},
setup() {
// provide('search',readonly(form))
- const { backData, error, request } = useFetch();
- const { isExceedOneMonth } = useCommonFunction();
+ const { isExceedOneMonth } = useCommonFunction()
return {
- backData,
- error,
- request,
isExceedOneMonth
- };
+ }
},
// 鐩戝惉 鍒ゆ柇鎸夐挳鏄惁鍙偣鍑�
watch: {
selectedRowIndex(newVaue) {
// 澶勪簬琛ㄦ牸鐨勬渶鍚庝竴鏉℃暟鎹� 璁剧疆鈥樹笂涓�鏉♀�欐寜閽笉鍙偣
- if (newVaue === this.displayData.length - 1) {
- this.dialog.isPreCantouch = true;
+ // if (newVaue === this.displayData.length - 1) {
+ // this.dialog.isPreCantouch = true
+ // //鐢ㄦ埛鍏堢偣浜嗙涓�鏉★紝pre涓簍rue,鐒跺悗鐐瑰嚮鏈�鍚庝竴鏉�,next涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
+ // if (this.dialog.isNextCantouch == true) {
+ // this.dialog.isNextCantouch = false
+ // }
+ // }
+ // // 澶勪簬琛ㄦ牸绗竴鏉℃暟鎹� 璁剧疆鈥樹笅涓�鏉♀�欐寜閽笉鍙偣
+ // else if (newVaue === 0) {
+ // this.dialog.isNextCantouch = true
+ // //鐢ㄦ埛鍏堢偣浜嗚〃鏍兼渶鍚庝竴鏉�,next涓簍rue,鐒跺悗鐐瑰嚮绗竴鏉★紝pre涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
+ // if (this.dialog.isPreCantouch == true) {
+ // this.dialog.isPreCantouch = false
+ // }
+ // }
+ // // 澶勪簬琛ㄦ牸鐨勪腑闂磋 灏嗘寜閽缃负鍙偣鍑荤姸鎬�
+ // else {
+ // this.dialog.isPreCantouch = false
+ // this.dialog.isNextCantouch = false
+ // }
+ // 澶勪簬琛ㄦ牸鐨勬渶鍚庝竴鏉℃暟鎹� 璁剧疆鈥樹笂涓�鏉♀�欐寜閽笉鍙偣
+ if (newVaue === 0) {
+ this.dialog.isPreCantouch = true
//鐢ㄦ埛鍏堢偣浜嗙涓�鏉★紝pre涓簍rue,鐒跺悗鐐瑰嚮鏈�鍚庝竴鏉�,next涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
if (this.dialog.isNextCantouch == true) {
- this.dialog.isNextCantouch = false;
+ this.dialog.isNextCantouch = false
}
}
- // 澶勪簬琛ㄦ牸绗竴鏉℃暟鎹� 璁剧疆鈥樹笅涓�鏉♀�欐寜閽笉鍙偣
- else if (newVaue === 0) {
- this.dialog.isNextCantouch = true;
+ // 澶勪簬琛ㄦ牸绗竴鏉℃暟鎹� 璁剧疆鈥樹笂涓�鏉♀�欐寜閽笉鍙偣
+ else if (newVaue === this.displayData.length - 1) {
+ this.dialog.isNextCantouch = true
//鐢ㄦ埛鍏堢偣浜嗚〃鏍兼渶鍚庝竴鏉�,next涓簍rue,鐒跺悗鐐瑰嚮绗竴鏉★紝pre涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
if (this.dialog.isPreCantouch == true) {
- this.dialog.isPreCantouch = false;
+ this.dialog.isPreCantouch = false
}
}
// 澶勪簬琛ㄦ牸鐨勪腑闂磋 灏嗘寜閽缃负鍙偣鍑荤姸鎬�
else {
- this.dialog.isPreCantouch = false;
- this.dialog.isNextCantouch = false;
+ this.dialog.isPreCantouch = false
+ this.dialog.isNextCantouch = false
}
},
// 褰撻�夋嫨鐨勬椂闂村彂鐢熷彉鍖栨椂锛屽紓甯稿垎鏋愰儴鍒嗙殑寮傚父搴楅摵鏁伴噺鍚屾鍙樺寲
-
- beginTime() {
- this.getShopNames();
- },
- endTime() {
- this.getShopNames();
- },
+ // beginTime() {
+ // this.getShopNames()
+ // },
+ // endTime() {
+ // this.getShopNames()
+ // },
dialogTableVisible() {
- window.addEventListener('resize', this.updateChart);
+ window.addEventListener('resize', this.updateChart)
+ }
+ },
+ computed: {
+ exceptionAllNum() {
+ let sum =
+ this.exception.exception0Num +
+ this.exception.exception1Num +
+ this.exception.exception2Num +
+ this.exception.exception3Num +
+ this.exception.exception4Num +
+ this.exception.exception5Num +
+ this.exception.exception6Num +
+ this.exception.exception7Num
+ if (sum == 0) {
+ return 1
+ } else {
+ return sum
+ }
+ },
+ long_time_notchange() {
+ let sum =
+ this.exception.exception0Num +
+ this.exception.exception1Num +
+ this.exception.exception2Num +
+ this.exception.exception3Num +
+ this.exception.exception4Num +
+ this.exception.exception5Num +
+ this.exception.exception6Num +
+ this.exception.exception7Num
+ if (sum == 0) {
+ return 0
+ } else {
+ return (
+ 100 -
+ (this.exception.exception0Num / this.exceptionAllNum) * 100 -
+ (this.exception.exception1Num / this.exceptionAllNum) * 100 -
+ (this.exception.exception2Num / this.exceptionAllNum) * 100 -
+ (this.exception.exception4Num / this.exceptionAllNum) * 100 -
+ (this.exception.exception5Num / this.exceptionAllNum) * 100 -
+ (this.exception.exception6Num / this.exceptionAllNum) * 100 -
+ (this.exception.exception7Num / this.exceptionAllNum) * 100
+ ).toFixed(1)
+ }
+ },
+ // 绗竴鎺掑崱鐗�
+ cardRow1() {
+ return [
+ {
+ siteName: this.exception.exception4,
+ exceptionType: '4',
+ exceptionName: '閲忕骇绐佸彉',
+ iconSrc: '@/assets/exception/exception4.png',
+ siteNum: this.exception.exception4.length,
+ exceptionNum: this.exception.exception4Num,
+ isNoDataStatus: this.isNoData.exception4
+ },
+ {
+ siteName: this.exception.exception5,
+ exceptionType: '5',
+ exceptionName: '涓磋繎瓒呮爣寮傚父',
+ iconSrc: '@/assets/exception/exception5.png',
+ siteNum: this.exception.exception5.length,
+ exceptionNum: this.exception.exception5Num,
+ isNoDataStatus: this.isNoData.exception5
+ },
+ {
+ siteName: this.exception.exception6,
+ exceptionType: '6',
+ exceptionName: '鍗曟棩瓒呮爣娆℃暟涓寸晫寮傚父',
+ iconSrc: '@/assets/exception/exception6.png',
+ siteNum: this.exception.exception6.length,
+ exceptionNum: this.exception.exception6Num,
+ isNoDataStatus: this.isNoData.exception6
+ },
+ {
+ siteName: this.exception.exception7,
+ exceptionType: '7',
+ exceptionName: '鍙樺寲瓒嬪娍寮傚父',
+ iconSrc: '@/assets/exception/exception7.png',
+ siteNum: this.exception.exception7.length,
+ exceptionNum: this.exception.exception7Num,
+ isNoDataStatus: this.isNoData.exception7
+ }
+ ]
+ },
+ cardRow2() {
+ return [
+ {
+ siteName: this.exception.exception0,
+ exceptionType: '0',
+ exceptionName: '鏁版嵁缂哄け寮傚父',
+ iconSrc: '@/assets/exception/exception0.png',
+ siteNum: this.exception.exception0.length,
+ exceptionNum: this.exception.exception0Num,
+ isNoDataStatus: this.isNoData.exception0
+ },
+ {
+ siteName: this.exception.exception1,
+ exceptionType: '1',
+ exceptionName: '鏁版嵁瓒呬綆',
+ iconSrc: '@/assets/exception/exception1.png',
+ siteNum: this.exception.exception1.length,
+ exceptionNum: this.exception.exception1Num,
+ isNoDataStatus: this.isNoData.exception1
+ },
+ {
+ siteName: this.exception.exception2,
+ exceptionType: '2',
+ exceptionName: '瓒呮爣',
+ iconSrc: '@/assets/exception/exception2.png',
+ siteNum: this.exception.exception2.length,
+ exceptionNum: this.exception.exception2Num,
+ isNoDataStatus: this.isNoData.exception2
+ },
+ {
+ siteName: this.exception.exception3,
+ exceptionType: '3',
+ exceptionName: '鏁版嵁闀挎椂娈垫棤娉㈠姩',
+ iconSrc: '@/assets/exception/exception3.png',
+ siteNum: this.exception.exception3.length,
+ exceptionNum: this.exception.exception3Num,
+ isNoDataStatus: this.isNoData.exception3
+ }
+ ]
}
},
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.backExceptionDataAWeekAgo()
// 鏌ヨ鏃堕棿娈电殑鍚勫紓甯哥殑绔欑偣锛屾煡璇㈣鏃堕棿鍖洪棿鐨勫悇寮傚父鏁伴噺
- this.getShopNames();
- this.test()
- // this.exception.exception0 = this.getSiteNameByExceptionType('0',this.beginTime,this.endTime)
- // console.log('寮傚父鏁版嵁涓猴細',this.exception.exception0);
+ this.getShopNames()
+ this.getSiteNume()
},
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}`);
- // 杩涜鐩稿簲鐨勫鐞�
- }
-}
+ getImageUrl(name) {
+ return new URL(`../../lib/Carousel/assets/${name}`, import.meta.url).href
+ },
+ // 鏀惧洖绔欑偣鎬绘暟閲�
+ getSiteNume() {
+ exceptionApi.getSitesNum().then((res) => {
+ this.siteTotal = res.data.data.length
+ })
},
- // getExceptionSiteNum(){
- // this.$http.get('/dust/exceptionsitenum').then(result => {
- // this.exceptionSiteNum = result.data.data.length
- // })
- // },
/**
* description锛氱偣鍑诲紓甯哥珯鐐瑰悕瀛楁椂 杩斿洖鐨勬暟鎹�
- * @param锛�
+ * @param锛�
* @createTime:2023-08-17
* @returns锛�
*/
getAbnormalDataByClick(val) {
this.flag.originClick = 1
-
+ // 鏄剧ず琛ㄦ牸
+ this.isTableShow = true
this.tableData = val
this.total = this.tableData.length
// 榛樿鏄剧ず绗竴椤�
- this.handleCurrentChange(1);
+ this.handleCurrentChange(1)
},
- // 鐐瑰嚮琛ㄦ牸鐨勮鏃�
- selectTableRow() {
+ // 鐐瑰嚮琛ㄦ牸鐨勮鏃�
+ selectTableRow() {
// 鑾峰彇褰撳墠琛岀殑绱㈠紩
- 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;
+ this.selectedRowIndex = this.displayData.indexOf(this.tableCurrentRowData)
},
/**
* description锛氭柇鐢垫垨鏂綉鏃惰缃殑琛ㄦ牸鏁版嵁
*/
- setOfflineTbleData(){
+ setOfflineTbleData() {
// 鏃犳暟鎹椂鐨勬椂闂存暟缁� 鏃堕棿鐩稿樊15鍒嗛挓
- const abnormalTimeTenMinute = this.descTenTime(
+ const abnormalTimeTenMinute = index.descFiftyTime(
this.tableCurrentRowData.beginTime,
this.tableCurrentRowData.endTime
- );
+ )
+ // 淇濆瓨鏃犳暟鎹椂琛ㄦ牸鏉℃暟
+ this.dialog.exceptionTotal = abnormalTimeTenMinute.length
+
// 鍘婚櫎渚涚數寮傚父鍜屾帀绾垮尯闂寸殑绗竴涓湁鍏冪礌鐨勫��
- this.dialog.historyData = [];
+ this.dialog.historyData = []
for (let i = 0; i < abnormalTimeTenMinute.length; i++) {
this.dialog.historyData.push({
name: this.tableCurrentRowData.name,
mnCode: this.tableCurrentRowData.mnCode,
- dutyCompany:this.tableCurrentRowData.dutyCompany,
+ dutyCompany: this.tableCurrentRowData.dutyCompany,
lst: abnormalTimeTenMinute[i],
dustValue: ''
- });
+ })
}
-
- // 淇濆瓨鏃犳暟鎹椂琛ㄦ牸鏉℃暟
- 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;
- },
// 娈电數鎴栨柇缃戝尯闂存棤鏁版嵁锛岄渶瑕佽ˉ鍏呫�傚叾浠栫殑閮芥湁鏁版嵁锛岀洿鎺ヤ竴娆¤姹傚叏閮ㄦ椂娈靛氨濂�
// 鏍规嵁寮傚父鍖洪棿鏋勯�犲墠鍚庣棣栧熬 鍓嶅尯闂� 涓棿鍖洪棿 鍚庡尯闂�
@@ -342,118 +398,58 @@
* description锛氫竴娆¤姹傚洖鍓嶄腑鍚庡尯闂寸殑鏁版嵁,瀵规暟鎹繘琛屽垎鏋�
* @param锛� 鍓嶄腑鍚庡尯闂寸殑璇锋眰鍙傛暟锛屽墠涓悗鐨勬�诲尯闂存椂闂达紝寮傚父寮�濮嬫椂闂达紝涓�鍦虹粨鏉熸椂闂�
*/
- otherExceptionRequest(allTimeArgs,allTime,exceptionBT,exceptionET) {
- // 鎶樼嚎鍥惧姞杞戒腑鏁堟灉
+ otherExceptionRequest(allTimeArgs, allTime, exceptionBT, exceptionET) {
+ // 鎶樼嚎鍥惧姞杞戒腑鏁堟灉
this.loading.lineChart = true
- this.$http
- .get('/dust/history', { params: allTimeArgs })
- .then((result) => {
- this.dialog.allExceptionTimeData = result.data.data;
- // 鏂數鎴栨柇缃戞椂閲嶆柊璁剧疆琛ㄦ牸
- if(this.tableCurrentRowData.exceptionType == '0'){
- this.setOfflineTbleData()
+ this.$http.get('/dust/history', { params: allTimeArgs }).then((result) => {
+ this.dialog.allExceptionTimeData = result.data.data
+ // 鏁版嵁缂哄け寮傚父鏃堕噸鏂拌缃〃鏍�
+ if (this.tableCurrentRowData.exceptionType == '0') {
+ this.setOfflineTbleData()
}
- // x杞存棩鏈熸椂闂�
- let dateList = [];
+ // x杞存棩鏈熸椂闂�
+ let dateList = []
// y杞� 瓒呮爣娌圭儫娴撳害
- let dustValue = [];
- let timeAndValue = {};
+ let dustValue = []
+ let timeAndValue = {}
// 浠庢坊鍔犱簡棣栦綅鍖洪棿鐨勫紑濮嬪拰缁撴潫鏃堕棿杩涜閬嶅巻 淇濊瘉鏃堕棿浠�10鍒嗛挓涓洪棿闅�
- timeAndValue = this.keepContinuousByEachFiftyMinutes(
- allTime[0],
- allTime[3],
- this.dialog.allExceptionTimeData
- );
- dateList = timeAndValue['xAxis'];
- dustValue = timeAndValue['yAxis'];
-
+ timeAndValue = index.keepContinuousByEachFiftyMinutes(
+ allTime[0],
+ allTime[3],
+ this.dialog.allExceptionTimeData
+ )
+ dateList = timeAndValue['xAxis']
+ dustValue = timeAndValue['yAxis']
+
// 鎻愬彇寮傚父璧峰鏃堕棿鐐瑰湪鏁翠釜鍖洪棿鍐呯殑鏁版嵁绱㈠紩
- let startIndex = dateList.findIndex(
- (item) => item === exceptionBT
- );
- let endIndex = dateList.findIndex((item) => item === exceptionET);
+ let startIndex = dateList.findIndex((item) => item === exceptionBT)
+ let endIndex = dateList.findIndex((item) => item === exceptionET)
// 璁剧疆鎶樼嚎鍥鹃厤缃」
- this.reSetChart(dateList,dustValue,exceptionBT, exceptionET,
- startIndex,
- endIndex)
- this.loading.lineChart = false
- });
-
- },
- /**
- * 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;
+ this.reSetChart(dateList, dustValue, exceptionBT, exceptionET, startIndex, endIndex)
+ this.loading.lineChart = false
+ })
},
/**
* description锛氱粯鍒舵姌绾垮浘
* @param锛� x杞存椂闂达紝 y杞存补鐑熸祿搴︼紝 寮傚父寮�濮嬫椂闂达紝寮傚父缁撴潫鏃堕棿锛屽紓甯稿紑濮嬫椂闂村湪鏁翠釜鍖洪棿鐨勭储寮曚笅鏍囷紝寮傚父缁撴潫鏃堕棿鍦ㄦ暣涓尯闂寸殑绱㈠紩涓嬫爣
*/
- reSetChart(
- xData,
- yData,
- exceptionBeginTime,
- exceptionEndTime,
- beginIndex,
- endIndex
- ) {
- this.dialog.option = {};
+ reSetChart(xData, yData, exceptionBeginTime, exceptionEndTime, beginIndex, endIndex) {
+ this.dialog.option = {}
switch (this.tableCurrentRowData.exceptionType) {
// 鏂數鎴栨柇缃� 鏃堕棿娈�
case '0':
this.dialog.option = {
+ title: {
+ text: this.tableCurrentRowData.exception,
+ left: '1%',
+ textStyle: {
+ fontSize: 14
+ }
+ },
tooltip: {},
toolbox: {
// 宸ュ叿鏍�
@@ -472,7 +468,7 @@
name: '鏃堕棿',
axisLabel: {
formatter: function (value) {
- return value.slice(11, -3);
+ return value.slice(11, -3)
}
}
},
@@ -503,11 +499,18 @@
}
}
]
- };
- break;
- // 瓒呮爣
+ }
+ break
+ // 瓒呮爣
case '2':
this.dialog.option = {
+ title: {
+ text: this.tableCurrentRowData.exception,
+ left: '1%',
+ textStyle: {
+ fontSize: 14
+ }
+ },
tooltip: {},
toolbox: {
// 宸ュ叿鏍�
@@ -525,7 +528,7 @@
name: '鏃堕棿',
axisLabel: {
formatter: function (value) {
- return value.slice(11, -3);
+ return value.slice(11, -3)
}
}
},
@@ -544,9 +547,9 @@
itemStyle: {
color: 'red'
}
- };
+ }
}
- return item;
+ return item
}),
// 鍙樻崲鎸囧畾鏃堕棿鍖洪棿鐨勮儗鏅鑹�
markArea: {
@@ -615,11 +618,18 @@
}
]
}
- };
- break;
+ }
+ break
// 鏁版嵁瓒呬綆 鍙湁鏃堕棿鐐�
case '1':
- this.dialog.option = {
+ this.dialog.option = {
+ title: {
+ text: this.tableCurrentRowData.exception,
+ left: '1%',
+ textStyle: {
+ fontSize: 14
+ }
+ },
tooltip: {},
toolbox: {
// 宸ュ叿鏍�
@@ -637,7 +647,7 @@
name: '鏃堕棿',
axisLabel: {
formatter: function (value) {
- return value.slice(11, -3);
+ return value.slice(11, -3)
}
}
},
@@ -656,11 +666,11 @@
itemStyle: {
color: 'red'
}
- };
+ }
}
- return item;
+ return item
}),
-
+
markLine: {
symbol: 'none',
itemStyle: {
@@ -711,10 +721,18 @@
}
]
}
- };
- break;
+ }
+ break
+ // 鏁版嵁闀挎椂娈垫棤娉㈠姩
case '3':
this.dialog.option = {
+ title: {
+ text: this.tableCurrentRowData.exception,
+ left: '1%',
+ textStyle: {
+ fontSize: 14
+ }
+ },
tooltip: {},
toolbox: {
// 宸ュ叿鏍�
@@ -732,7 +750,7 @@
name: '鏃堕棿',
axisLabel: {
formatter: function (value) {
- return value.slice(11, -3);
+ return value.slice(11, -3)
}
}
},
@@ -751,9 +769,9 @@
itemStyle: {
color: 'red'
}
- };
+ }
}
- return item;
+ return item
}),
// 鍙樻崲鎸囧畾鏃堕棿鍖洪棿鐨勮儗鏅鑹�
markArea: {
@@ -795,10 +813,95 @@
}
]
}
- };
- break;
+ }
+ break
+ // 閲忕骇绐佸彉寮傚父
+ case '4':
+ case '5':
+ case '6':
+ case '7':
+ this.dialog.option = {
+ title: {
+ text: this.tableCurrentRowData.exception,
+ left: '1%',
+ textStyle: {
+ fontSize: 14
+ }
+ },
+ 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
},
@@ -806,96 +909,100 @@
* description锛氬垝鍒嗗嚭寮傚父璧峰鏃堕棿锛屾瀯閫犺姹傚墠涓悗鐨勫弬鏁�
*/
timeAndDataProcessed() {
-
//寮傚父鐨勫紑濮嬫椂闂� 缁撴潫鏃堕棿
- let exceptionBeginTime = this.tableCurrentRowData.beginTime;
- let exceptionEndTime = this.tableCurrentRowData.endTime;
+ let exceptionBeginTime = this.tableCurrentRowData.beginTime
+ let exceptionEndTime = this.tableCurrentRowData.endTime
// beforeAndAfterTime[0]:鍓�45鍒嗛挓鐨勬椂闂寸偣
// beforeAndAfterTime[1]:鍓�15鍒嗛挓鐨勬椂闂寸偣
// beforeAndAfterTime[2]:鍚�15鍒嗛挓鐨勬椂闂寸偣
// beforeAndAfterTime[3]:鍚�45鍒嗛挓鐨勬椂闂寸偣
- let beforeAndAfterTime = this.before45AndAfter45(
- exceptionBeginTime,
- exceptionEndTime
- );
+ let beforeAndAfterTime = index.before45AndAfter45(exceptionBeginTime, exceptionEndTime)
// 鏋勯�犲紓甯告椂闂村墠鍚庡尯闂存暟鎹姹傚弬鏁�(闄や簡鏂綉涓兘鐢ㄥ埌锛�
- let paramsAllTime = this.requestGetParms(
+ let paramsAllTime = index.requestGetParms(
this.tableCurrentRowData.name,
beforeAndAfterTime[0],
beforeAndAfterTime[3]
- );
- // 灏嗗紓甯告暟鎹繘琛岄澶勭悊锛岄殢鍚庡皢缁撴灉浣滀负鎶樼嚎鍥剧殑閰嶇疆椤�
+ )
- this.otherExceptionRequest(paramsAllTime,beforeAndAfterTime,exceptionBeginTime,exceptionEndTime)
+ // 灏嗗紓甯告暟鎹繘琛岄澶勭悊锛岄殢鍚庡皢缁撴灉浣滀负鎶樼嚎鍥剧殑閰嶇疆椤�
+ this.otherExceptionRequest(
+ paramsAllTime,
+ beforeAndAfterTime,
+ exceptionBeginTime,
+ exceptionEndTime
+ )
},
/**
* description锛氳幏鍙栦笅涓�鏉″紓甯镐俊鎭�
*/
getPreviousRowData() {
- // // 涓嶆槸琛ㄦ牸鐨勬渶鍚庝竴琛�
+ // // 涓嶆槸琛ㄦ牸鐨勬渶鍚庝竴琛�
if (this.selectedRowIndex < this.displayData.length - 1) {
// 鐐瑰嚮杩囩▼涓� 閿佷綇涓婁笅鏉℃寜閽� 鍦ㄨ缃畬鍥惧舰閰嶇疆椤瑰悗瑙ｉ攣
this.flag.banTouch = 1
//寰楀埌涓婁竴琛屾暟鎹储寮�
- this.selectedRowIndex = this.selectedRowIndex + 1;
+ this.selectedRowIndex = this.selectedRowIndex + 1
//璇锋眰鏁版嵁 鏀瑰彉exceedingData
// this.setinfo(this.selectedRowIndex);
// 寰楀埌涓婁竴琛岀殑鏁版嵁
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 })
- .then((response) => {
- // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
- this.dialog.historyData = response.data.data;
- this.dialog.exceptionTotal = response.data.data.length;
- // 閫昏緫澶勭悊
- this.timeAndDataProcessed()
- this.loading.preButton = false
- });
+ this.$http.get('/dust/history', { params: params }).then((response) => {
+ // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
+ this.dialog.historyData = response.data.data
+ this.dialog.exceptionTotal = response.data.data.length
+ // 閫昏緫澶勭悊
+ this.timeAndDataProcessed()
+ this.loading.preButton = false
+ })
}
- //寰楀埌涓婁竴琛屾暟鎹储寮�
- // this.selectedRowIndex = this.selectedRowIndex + 1;
- // this.tableCurrentRowData = this.displayData[this.selectedRowIndex]
- // console.log('褰撳墠琛屾暟鎹负:',this.tableCurrentRowData);
+ //寰楀埌涓婁竴琛屾暟鎹储寮�
+ // this.selectedRowIndex = this.selectedRowIndex + 1;
+ // this.tableCurrentRowData = this.displayData[this.selectedRowIndex]
},
/**
* description锛氳幏鍙栦笅涓�鏉″紓甯镐俊鎭�
*/
getNextRowData() {
- // 涓嶆槸琛ㄦ牸鐨勭涓�琛�
+ // 涓嶆槸琛ㄦ牸鐨勭涓�琛�
if (this.selectedRowIndex !== 0) {
// 鐐瑰嚮杩囩▼涓� 閿佷綇涓婁笅鏉℃寜閽� 鍦ㄨ缃畬鍥惧舰閰嶇疆椤瑰悗瑙ｉ攣
this.flag.banTouch = 1
//寰楀埌涓婁竴琛屾暟鎹储寮�
- this.selectedRowIndex = this.selectedRowIndex - 1;
+ this.selectedRowIndex = this.selectedRowIndex - 1
//璇锋眰鏁版嵁 鏀瑰彉exceedingData
// this.setinfo(this.selectedRowIndex);
- // 寰楀埌涓婁竴琛岀殑鏁版嵁
- this.tableCurrentRowData = this.displayData[this.selectedRowIndex]
+ // 寰楀埌涓婁竴琛岀殑鏁版嵁
+ 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 })
- .then((response) => {
- // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
- this.dialog.historyData = response.data.data;
- this.dialog.exceptionTotal = response.data.data.length;
- // 閫昏緫澶勭悊
- this.timeAndDataProcessed()
- this.loading.afterButton = false
- });
+ this.$http.get('/dust/history', { params: params }).then((response) => {
+ // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
+ this.dialog.historyData = response.data.data
+ this.dialog.exceptionTotal = response.data.data.length
+ // 閫昏緫澶勭悊
+ this.timeAndDataProcessed()
+ this.loading.afterButton = false
+ })
}
},
@@ -904,8 +1011,8 @@
* @createTime:2023-08-18
*/
backExceptionData(val1, val2) {
- this.displayData = val1;
- this.total = val2;
+ this.displayData = val1
+ this.total = val2
},
/**
@@ -914,6 +1021,7 @@
*/
getShopNames() {
/* 鏌ヨ寮傚父鐨勭珯鐐� */
+
this.$http
.get('/dust/sitenamecode', {
params: {
@@ -923,8 +1031,13 @@
}
})
.then((result) => {
- this.exception.exception0 = result.data.data;
- });
+ this.exception.exception0 = result.data.data
+ if (result.data.data.length == 0) {
+ this.isNoData.exception0 = true
+ return
+ }
+ this.isNoData.exception0 = false
+ })
this.$http
.get('/dust/sitenamecode', {
params: {
@@ -934,8 +1047,13 @@
}
})
.then((result) => {
- this.exception.exception1 = result.data.data;
- });
+ this.exception.exception1 = result.data.data
+ if (result.data.data.length == 0) {
+ this.isNoData.exception1 = true
+ return
+ }
+ this.isNoData.exception1 = false
+ })
this.$http
.get('/dust/sitenamecode', {
params: {
@@ -945,8 +1063,13 @@
}
})
.then((result) => {
- this.exception.exception2 = result.data.data;
- });
+ this.exception.exception2 = result.data.data
+ if (result.data.data.length == 0) {
+ this.isNoData.exception2 = true
+ return
+ }
+ this.isNoData.exception2 = false
+ })
this.$http
.get('/dust/sitenamecode', {
@@ -957,10 +1080,78 @@
}
})
.then((result) => {
- this.exception.exception3 = result.data.data;
- });
+ this.exception.exception3 = result.data.data
+ if (result.data.data.length == 0) {
+ this.isNoData.exception3 = true
+ return
+ }
+ this.isNoData.exception3 = false
+ })
-
+ this.$http
+ .get('/dust/sitenamecode', {
+ params: {
+ exceptionType: '4',
+ beginTime: this.beginTime,
+ endTime: this.endTime
+ }
+ })
+ .then((result) => {
+ this.exception.exception4 = result.data.data
+ if (result.data.data.length == 0) {
+ this.isNoData.exception4 = true
+ return
+ }
+ this.isNoData.exception4 = false
+ })
+ this.$http
+ .get('/dust/sitenamecode', {
+ params: {
+ exceptionType: '5',
+ beginTime: this.beginTime,
+ endTime: this.endTime
+ }
+ })
+ .then((result) => {
+ this.exception.exception5 = result.data.data
+ if (result.data.data.length == 0) {
+ this.isNoData.exception5 = true
+ return
+ }
+ this.isNoData.exception5 = false
+ })
+ this.$http
+ .get('/dust/sitenamecode', {
+ params: {
+ exceptionType: '6',
+ beginTime: this.beginTime,
+ endTime: this.endTime
+ }
+ })
+ .then((result) => {
+ this.exception.exception6 = result.data.data
+ if (result.data.data.length == 0) {
+ this.isNoData.exception6 = true
+ return
+ }
+ this.isNoData.exception6 = false
+ })
+ this.$http
+ .get('/dust/sitenamecode', {
+ params: {
+ exceptionType: '7',
+ beginTime: this.beginTime,
+ endTime: this.endTime
+ }
+ })
+ .then((result) => {
+ this.exception.exception7 = result.data.data
+ if (result.data.data.length == 0) {
+ this.isNoData.exception7 = true
+ return
+ }
+ this.isNoData.exception7 = false
+ })
/* 寮傚父寮傚父鏁伴噺 */
this.$http
@@ -972,8 +1163,8 @@
}
})
.then((result) => {
- this.exception.exception0Num = result.data.data;
- });
+ this.exception.exception0Num = result.data.data
+ })
this.$http
.get('/dust/exceptionnum', {
params: {
@@ -983,8 +1174,8 @@
}
})
.then((result) => {
- this.exception.exception1Num = result.data.data;
- });
+ this.exception.exception1Num = result.data.data
+ })
this.$http
.get('/dust/exceptionnum', {
params: {
@@ -994,8 +1185,8 @@
}
})
.then((result) => {
- this.exception.exception2Num = result.data.data;
- });
+ this.exception.exception2Num = result.data.data
+ })
this.$http
.get('/dust/exceptionnum', {
@@ -1006,14 +1197,58 @@
}
})
.then((result) => {
- this.exception.exception3Num = result.data.data;
- });
+ 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
+ })
+ this.$http
+ .get('/dust/exceptionnum', {
+ params: {
+ exceptionType: '7',
+ beginTime: this.beginTime,
+ endTime: this.endTime
+ }
+ })
+ .then((result) => {
+ this.exception.exception7Num = result.data.data
+ })
},
/**
* description锛氳姹傚紓甯哥殑搴楅摵鍚嶅瓧
* @param锛氬紓甯哥被鍨嬶紝寮�濮嬫椂闂达紝缁撴潫鏃堕棿
- * @createTime:2023-08-18
* @returns锛� 寮傚父鐨勬暟鎹�
*/
// getSiteNameByExceptionType(exception, beginT, endT) {
@@ -1036,36 +1271,35 @@
*/
showDialog(row) {
// 鎵撳紑瀵硅瘽妗�
- this.dialogTableVisible = true;
-
+ this.dialogTableVisible = true
+
// 淇濆瓨褰撳墠琛屾暟鎹�
- this.tableCurrentRowData = row;
+ this.tableCurrentRowData = row
// 鑾峰彇褰撳墠琛岀殑绱㈠紩
- this.selectedRowIndex = this.displayData.indexOf(row);
+ this.selectedRowIndex = this.displayData.indexOf(row)
//鏍规嵁褰撳墠琛岀殑缂栧彿锛岃捣濮嬫椂闂存潵 璇锋眰寮傚父鏁版嵁
// 瀵硅姹傚埌鐨勬暟鎹繘琛岄灏炬嫾鎺�
// 寰楀埌鍓嶅悗瀹屾暣鏁版嵁杩涜缁樺埗鍥惧舰
-
- let params = {};
+ this.loading.lineChart = true
+ let params = {}
if (row.name) {
- params['siteName'] = row.name;
+ params['siteName'] = row.name
}
if (row.beginTime) {
- params['beginTime'] = row.beginTime;
+ params['beginTime'] = row.beginTime
}
if (row.endTime) {
- params['endTime'] = row.endTime;
+ params['endTime'] = row.endTime
}
this.$http.get('/dust/history', { params: params }).then((response) => {
- // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
- this.dialog.historyData = response.data.data;
- this.dialog.exceptionTotal = response.data.data.length;
+ this.dialog.historyData = response.data.data
+ this.dialog.exceptionTotal = response.data.data.length
// 閫昏緫澶勭悊
this.timeAndDataProcessed()
- });
+ })
},
/**
* description锛氭潯浠舵煡璇㈠紓甯哥殑鏁版嵁
@@ -1073,41 +1307,43 @@
*/
handleSubmit() {
if (this.isExceedOneMonth(this.beginTime, this.endTime)) {
- alert('鏃堕棿璺ㄥ害涓嶈兘瓒呰繃涓�涓湀');
- return;
+ alert('鏃堕棿璺ㄥ害涓嶈兘瓒呰繃涓�涓湀')
+ return
}
+ // 鏇存柊寮傚父鍒嗘瀽
+ this.getShopNames()
+
this.loading.queryButton = true
this.flag.originClick = 0
- this.loading.tableLoading = true;
- let params = {};
- params['page'] = this.currentPage;
- params['pageSize'] = this.pageSize;
+ this.loading.tableLoading = true
+ let params = {}
+ params['page'] = this.currentPage
+ params['pageSize'] = this.pageSize
if (this.form.name) {
- params['siteName'] = this.form.name;
+ params['siteName'] = this.form.name
}
if (this.form.exceptionName.length != 0) {
- params['exceptionType'] = this.form.exceptionName.join();
+ params['exceptionType'] = this.form.exceptionName.join()
}
- params['beginTime'] = this.beginTime;
- params['endTime'] = this.endTime;
+ params['beginTime'] = this.beginTime
+ params['endTime'] = this.endTime
- this.$http
- .get('/dust/exceptiondata', { params: params })
- .then((response) => {
- // 淇濆瓨杩斿洖鐨�
- // this.tableData = response.data.data.rows;
- this.displayData = response.data.data.rows;
- this.loading.queryButton = false
- this.loading.tableLoading = false;
- if (response.data.data.total == 0) {
- ElMessage('璇ユ椂娈垫棤鏁版嵁');
- this.isNoData = true;
- return;
- }
- this.total = response.data.data.total;
- // 绉婚櫎绌烘暟鎹姸鎬�
- this.isNoData = false;
- });
+ this.$http.get('/dust/exceptiondata', { params: params }).then((response) => {
+ // 淇濆瓨杩斿洖鐨�
+ // this.tableData = response.data.data.rows;
+ this.displayData = response.data.data.rows
+ this.loading.queryButton = false
+ this.loading.tableLoading = false
+
+ if (response.data.data.total == 0) {
+ ElMessage('璇ユ椂娈垫棤鏁版嵁')
+ this.isTableShow = false
+ return
+ }
+ this.isTableShow = true
+ this.total = response.data.data.total
+ // 绉婚櫎绌烘暟鎹姸鎬�
+ })
},
/**
@@ -1115,32 +1351,30 @@
* @createTime:2023-08-18
*/
backExceptionDataAWeekAgo() {
- this.loading.tableLoading = true;
- let params = {};
+ this.loading.tableLoading = true
+ let params = {}
if (this.form.name) {
- params['siteName'] = this.form.name;
+ params['siteName'] = this.form.name
}
if (this.form.exceptionName) {
- params['exceptionType'] = this.form.exceptionName;
+ params['exceptionType'] = this.form.exceptionName
}
- params['beginTime'] = this.beginTime;
- params['endTime'] = this.endTime;
+ params['beginTime'] = this.beginTime
+ params['endTime'] = this.endTime
- this.$http
- .get('/dust/exceptiondata', { params: params })
- .then((response) => {
- // 淇濆瓨杩斿洖鐨�
- // this.tableData = response.data.data.rows;
- this.displayData = response.data.data.rows;
-
- if (response.data.data.total == 0) {
- ElMessage('璇ユ椂娈垫棤鏁版嵁');
- this.isNoData = true;
- return;
- }
- this.total = response.data.data.total;
- this.loading.tableLoading = false;
- });
+ this.$http.get('/dust/exceptiondata', { params: params }).then((response) => {
+ // 淇濆瓨杩斿洖鐨�
+ // this.tableData = response.data.data.rows;
+ this.displayData = response.data.data.rows
+ this.loading.tableLoading = false
+ if (response.data.data.total == 0) {
+ ElMessage('璇ユ椂娈垫棤鏁版嵁')
+ this.isTableShow = false
+ return
+ }
+ this.isTableShow = true
+ this.total = response.data.data.total
+ })
},
/**
@@ -1148,26 +1382,26 @@
* @createTime:2023-08-17
*/
giveTime(val) {
- this.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss');
- this.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss');
+ this.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss')
+ this.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss')
},
// 鍔熻兘锛氳〃鏍奸珮搴︽牴鎹唴瀹硅嚜閫傚簲
calTableHeight() {
- const h1 = this.$refs.h1.$el.offsetHeight;
- const h2 = this.$refs.h2.$el.offsetHeight;
- const h3 = this.$refs.h3.$el.offsetHeight;
- const h4 = this.$refs.h4.$el.offsetHeight;
+ const h1 = this.$refs.h1.$el.offsetHeight
+ const h2 = this.$refs.h2.$el.offsetHeight
+ const h3 = this.$refs.h3.$el.offsetHeight
+ const h4 = this.$refs.h4.$el.offsetHeight
// 鍏朵腑涓�涓�40鏄洅瀛愮殑鎬诲杈硅窛
- this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - ${h3}px - ${h4}px - 40px - var(--el-main-padding) * 2)`;
+ this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - ${h3}px - ${h4}px - 40px - var(--el-main-padding) * 2)`
},
// 椤靛ぇ灏忔敼鍙樻椂瑙﹀彂
handleSizeChange(val) {
- this.pageSize = val;
+ this.pageSize = val
// 鏀瑰彉姣忛〉鏄剧ず鏁扮洰鏃惰烦鍒板綋鍓嶉〉
- this.handleCurrentChange(1);
+ this.handleCurrentChange(1)
},
// 椤靛彿鏀瑰彉鏃惰Е鍙�
@@ -1178,456 +1412,329 @@
* @returns锛�
*/
handleCurrentChange(val) {
- console.log('褰撳墠椤典负锛�', val);
// 灏嗗綋鍓嶉〉鍙风粰currentPage
- this.currentPage = val;
-
+ this.currentPage = val
// 椤甸潰鍙樺寲鏃惰皟鐢� 鏌ヨ鏁版嵁鍑芥暟
- if(this.flag.originClick==0){
- this.handleSubmit();
- }else if(this.flag.originClick ==1){
- const startIndex = (val - 1) * this.pageSize;
- const endIndex = startIndex + this.pageSize;
+ if (this.flag.originClick == 0) {
+ this.handleSubmit()
+ } else if (this.flag.originClick == 1) {
+ const startIndex = (val - 1) * this.pageSize
+ const endIndex = startIndex + this.pageSize
- this.displayData = this.tableData.slice(startIndex, endIndex);
+ this.displayData = this.tableData.slice(startIndex, endIndex)
}
},
// 琛ㄦ牸搴忓彿閫掑
- indexMethod(index) {
- return index + 1 + (this.currentPage - 1) * this.pageSize;
+ indexMethod1(index) {
+ return index + 1 + (this.currentPage - 1) * this.pageSize
+ },
+ // 琛ㄦ牸搴忓彿閫掑
+ indexMethod2(index) {
+ return index + 1
}
}
-};
+}
</script>
<template>
-
- <el-row ref="h1">
- <el-col>
- <el-form :inline="true">
- <div class="head-container-text">
- <el-form-item>
- <InputSearch
- :isNeedDefaultSite="0"
- @submit-value="(n) => (form.name = n)"
- @submit-site-Nums="(n) => (siteTotal = n)"
- >
- </InputSearch>
- </el-form-item>
+ <div class="all-container">
+ <el-row ref="h1">
+ <el-col>
+ <el-form :inline="true">
+ <div class="head-container-text">
+ <el-form-item>
+ <AreaAndmonitorType></AreaAndmonitorType>
+ </el-form-item>
- <el-form-item>
- <ExceptionType
- @submit-value="(n) => form.exceptionName = n"
- ></ExceptionType>
- </el-form-item>
+ <el-form-item>
+ <TimeShortCuts timeType="day" @submit-time="giveTime"></TimeShortCuts>
+ </el-form-item>
- <el-form-item>
- <TimeSelect @submit-time="giveTime"></TimeSelect>
- </el-form-item>
- </div>
-
- <div class="head-container-search">
- <el-form-item>
- <el-button type="warning" :loading="loading.queryButton" @click="handleSubmit">鏌ヨ</el-button>
- </el-form-item>
- </div>
- </el-form>
- </el-col>
- </el-row>
-
- <el-row class="head-describtion-text" ref="h2">
- <el-row>
- <span> 閲戝北鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 鎵皹鐩戞祴寮傚父淇℃伅姹囨��</span>
- </el-row>
- </el-row>
-
- <el-row ref="h3">
- <el-col>
- <el-card>
- <template #header>
- <div class="card-header">寮傚父鍒嗘瀽</div>
- </template>
- <el-row :gutter="20">
- <el-col :span="6">
- <div class="card-content">
- <!-- 鏍囧ご -->
- <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.exception2.length }} /{{ siteTotal }}</span>
- <span>
- ({{
- ((exception.exception2.length / siteTotal) * 100).toFixed(
- 1
- )
- }}%)</span
- >
-
- <span class="card-exceptionname-text2"
- >寮傚父鏁板崰姣�:{{
- (
- (exception.exception2Num /
- (exception.exception0Num +
- exception.exception1Num +
- exception.exception2Num +
- exception.exception3Num)) *
- 100
- ).toFixed(1)
- }}%</span
- >
-
- </el-scrollbar>
- </div>
- <hr />
- <!-- 寮傚父鐨勫簵閾哄悕瀛� -->
- <div class="card-exception-buttom">
- <el-scrollbar max-height="100px">
- <DustExceptionText
- :site-name="item.name"
- exception-type="2"
- :begin-time="beginTime"
- :end-time="endTime"
- @submit-exception-data="getAbnormalDataByClick"
-
- v-for="(item, index) in exception.exception2"
- :key="item"
- >{{ item.name }}
- <span
- v-if="index < exception.exception2.length - 1"
- class="text-blank"
- >,</span
- >
- </DustExceptionText>
- </el-scrollbar>
- </div>
- <!-- 缁撴潫 -->
- </div>
- </el-col>
- <el-col :span="6"
- ><div class="card-content">
- <!-- 鏍囧ご -->
- <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.exception0.length }} /{{ siteTotal }}</span>
- <span>
- ({{
- ((exception.exception0.length / siteTotal) * 100).toFixed(
- 1
- )
- }}%)</span
- >
- <span class="card-exceptionname-text2"
- >寮傚父鏁板崰姣�:{{
- (
- (exception.exception0Num /
- (exception.exception0Num +
- exception.exception1Num +
- exception.exception2Num +
- exception.exception3Num)) *
- 100
- ).toFixed(1)
- }}%</span
- >
- </el-scrollbar>
- </div>
- <hr />
- <!-- 寮傚父鐨勫簵閾哄悕瀛� -->
- <div class="card-exception-buttom">
- <el-scrollbar max-height="100px">
- <DustExceptionText
- :site-name="item.name"
- exception-type="0"
- :begin-time="beginTime"
- :end-time="endTime"
- @submit-exception-data="getAbnormalDataByClick"
-
- v-for="(item, index) in exception.exception0"
- :key="item"
- >{{ item.name }}
- <span
- v-if="index < exception.exception0.length - 1"
- class="text-blank"
- >,</span
- >
- </DustExceptionText>
- </el-scrollbar>
- </div>
- <!-- 缁撴潫 -->
- </div>
- </el-col>
- <el-col :span="6">
- <div class="card-content">
- <!-- 鏍囧ご -->
- <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.exception1.length }} /{{ siteTotal }}</span>
- <span>
- ({{
- ((exception.exception1.length / siteTotal) * 100).toFixed(
- 1
- )
- }}%)</span
- >
- <span class="card-exceptionname-text2"
- >寮傚父鏁板崰姣�:{{
- (
- (exception.exception1Num /
- (exception.exception0Num +
- exception.exception1Num +
- exception.exception2Num +
- exception.exception3Num)) *
- 100
- ).toFixed(1)
- }}%</span
- >
- </el-scrollbar>
- </div>
- <hr />
- <!-- 寮傚父鐨勫簵閾哄悕瀛� -->
- <div class="card-exception-buttom">
- <el-scrollbar max-height="100px">
- <DustExceptionText
- :site-name="item.name"
- exception-type="1"
- :begin-time="beginTime"
- :end-time="endTime"
- @submit-exception-data="getAbnormalDataByClick"
-
- v-for="(item, index) in exception.exception1"
- :key="item"
- >{{ item.name }}
- <span
- v-if="index < exception.exception1.length - 1"
- class="text-blank"
- >,</span
- >
- </DustExceptionText>
- </el-scrollbar>
- </div>
- <!-- 缁撴潫 -->
- </div></el-col
- >
- <el-col :span="6"
- ><div class="card-content">
- <!-- 鏍囧ご -->
- <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.exception3.length }} /{{ siteTotal }}</span>
- <span>
- ({{
- ((exception.exception3.length / siteTotal) * 100).toFixed(
- 1
- )
- }}%)</span
- >
- <span class="card-exceptionname-text2"
- >寮傚父鏁板崰姣�:{{(100-
-
- ((exception.exception0Num /
- (exception.exception0Num +
- exception.exception1Num +
- exception.exception2Num +
- exception.exception3Num)) *
- 100
- ) -
- ((exception.exception1Num /
- (exception.exception0Num +
- exception.exception1Num +
- exception.exception2Num +
- exception.exception3Num)) *
- 100
- ) -
- ((exception.exception2Num /
- (exception.exception0Num +
- exception.exception1Num +
- exception.exception2Num +
- exception.exception3Num)) *
- 100
- )
-
- ).toFixed(1)
- }}%</span
- >
- </el-scrollbar>
- </div>
- <hr />
- <!-- 寮傚父鐨勫簵閾哄悕瀛� -->
- <div class="card-exception-buttom">
- <el-scrollbar max-height="100px">
- <DustExceptionText
- :site-name="item.name"
- exception-type="3"
- :begin-time="beginTime"
- :end-time="endTime"
- @submit-exception-data="getAbnormalDataByClick"
-
- v-for="(item, index) in exception.exception3"
- :key="item"
- >{{ item.name }}
- <span
- v-if="index < exception.exception3.length - 1"
- class="text-blank"
- >,</span
- >
- </DustExceptionText>
- </el-scrollbar>
- </div>
- <!-- 缁撴潫 -->
- </div>
- </el-col>
- </el-row>
- </el-card>
- </el-col>
- </el-row>
-
- <el-row>
- <el-col v-show="!isNoData">
- <el-table
- ref="table"
- :data="displayData"
- :height="tableHeight"
- highlight-current-row="true"
- size="default"
- v-loading="loading.tableLoading"
- border
- >
- <el-table-column
- type="index"
- label="搴忓彿"
- width="60px"
- align="center"
- fixed
- :index="indexMethod"
- />
- <el-table-column prop="name" label="绔欑偣鍚嶇О" show-overflow-tooltip />
- <el-table-column
- prop="mnCode"
- label="璁惧缂栧彿"
- align="center"
- show-overflow-tooltip
- />
- <el-table-column
- prop="exception"
- label="寮傚父绫诲瀷"
- align="center"
- show-overflow-tooltip
- />
- <el-table-column
- prop="region"
- label="鍖哄煙"
- align="center"
- show-overflow-tooltip
- />
- <el-table-column
- prop="beginTime"
- label="寮�濮嬫椂闂�"
- align="center"
- show-overflow-tooltip
- />
- <el-table-column
- prop="endTime"
- label="缁撴潫鏃堕棿"
- align="center"
- show-overflow-tooltip
- />
- <el-table-column
- prop="typename"
- label="鍦烘櫙"
- align="center"
- show-overflow-tooltip
- />
- <el-table-column
- prop="address"
- label="鍦板潃"
- align="center"
- show-overflow-tooltip
- />
- <el-table-column
- prop="dutyCompany"
- label="杩愮淮鍟�"
- align="center"
- show-overflow-tooltip
- />
- <el-table-column label="鎿嶄綔" align="center">
- <template #default="{ row }">
- <el-button
- type="primary"
- class="table-button"
- @click="showDialog(row)"
- >鏌ョ湅璇︽儏</el-button
- >
- </template>
- </el-table-column>
- </el-table>
-
- <el-pagination
- ref="h4"
- background
- layout="total, sizes, prev, pager, next, jumper"
- v-model:current-page="currentPage"
- v-model:page-size="pageSize"
- :total="total"
- :page-sizes="[10, 20, 50, 100]"
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- >
- </el-pagination>
- </el-col>
- </el-row>
-
- <el-empty v-show="isNoData" :image-size="200" />
-
- <el-dialog v-model="dialogTableVisible" draggable align-center height="300px">
- <!-- 澶� -->
- <template #header>
- <div class="diag-head">
- <div class="diag-head-text">
- <span class="diag-head-text1">绔欑偣鍚嶇О锛�</span
- >{{ tableCurrentRowData.name }}
- <span class="diag-head-text1">寮傚父绫诲瀷锛�</span>
- <span v-if="tableCurrentRowData.exceptionType == '0'"
- >鏂數鎴栨柇缃�</span
- >
- <span v-else-if="tableCurrentRowData.exceptionType == '1'"
- >鏁版嵁瓒呬綆</span
- >
- <span v-else-if="tableCurrentRowData.exceptionType == '2'">瓒呮爣</span>
- <span v-else-if="tableCurrentRowData.exceptionType == '3'"
- >鏁版嵁闀挎椂闂存棤娉㈠姩</span
- >
- <div>
- <span class="diag-head-text1">寮傚父鏃堕棿娈碉細</span
- >{{ tableCurrentRowData.beginTime }} ~
- {{ tableCurrentRowData.endTime }}
+ <el-form-item>
+ <ButtonClick
+ content="椋庨櫓璇勪及"
+ type="warning"
+ color="rgb(12,104,165)"
+ :loading="loading.queryButton"
+ :havaIcon="false"
+ @do-search="handleSubmit"
+ ><img src="@/assets/exception/riskButton.png" height="24" class="img-button"
+ /></ButtonClick>
+ </el-form-item>
</div>
- </div>
+ </el-form>
+ </el-col>
+ </el-row>
- <div class="chart-jump-button">
+ <!-- 鏃堕棿鎽樿 -->
+ <el-row class="head-describtion-text" ref="h2">
+ <el-row>
+ <span> 閲戝北鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 鎵皹鐩戞祴寮傚父淇℃伅姹囨��</span>
+ </el-row>
+ </el-row>
+
+ <!-- 寮傚父鍒嗘瀽 -->
+ <el-row ref="h3">
+ <el-col>
+ <el-card class="card-container">
+ <template #header>
+ <div class="card-header">寮傚父鍒嗘瀽</div>
+ </template>
+
+ <el-row :gutter="20" class="card-row">
+ <el-col :span="6">
+ <AnalysisCard
+ :site-name="cardRow1[0].siteName"
+ :exception-type="cardRow1[0].exceptionType"
+ :begin-time="beginTime"
+ :end-time="endTime"
+ :exception-name="cardRow1[0].exceptionName"
+ :site-num="cardRow1[0].siteNum"
+ :exception-num="cardRow1[0].exceptionNum"
+ :exception-all-num="exceptionAllNum"
+ :site-num-all="siteTotal"
+ :isNoDataStatus="cardRow1[0].isNoDataStatus"
+ @get-abnormal-data-by-click="getAbnormalDataByClick"
+ >
+ <img src="@/assets/exception/exception4.png" height="24" width="24" />
+ </AnalysisCard>
+ </el-col>
+ <el-col :span="6">
+ <AnalysisCard
+ :site-name="cardRow1[1].siteName"
+ :exception-type="cardRow1[1].exceptionType"
+ :begin-time="beginTime"
+ :end-time="endTime"
+ :exception-name="cardRow1[1].exceptionName"
+ :site-num="cardRow1[1].siteNum"
+ :exception-num="cardRow1[1].exceptionNum"
+ :exception-all-num="exceptionAllNum"
+ :site-num-all="siteTotal"
+ :isNoDataStatus="cardRow1[1].isNoDataStatus"
+ @get-abnormal-data-by-click="getAbnormalDataByClick"
+ >
+ <img src="@/assets/exception/exception5.png" height="24" width="24" />
+ </AnalysisCard>
+ </el-col>
+ <el-col :span="6">
+ <AnalysisCard
+ :site-name="cardRow1[2].siteName"
+ :exception-type="cardRow1[2].exceptionType"
+ :begin-time="beginTime"
+ :end-time="endTime"
+ :exception-name="cardRow1[2].exceptionName"
+ :site-num="cardRow1[2].siteNum"
+ :exception-num="cardRow1[2].exceptionNum"
+ :exception-all-num="exceptionAllNum"
+ :site-num-all="siteTotal"
+ :isNoDataStatus="cardRow1[2].isNoDataStatus"
+ @get-abnormal-data-by-click="getAbnormalDataByClick"
+ >
+ <img src="@/assets/exception/exception6.png" height="24" width="24" />
+ </AnalysisCard>
+ </el-col>
+ <el-col :span="6">
+ <AnalysisCard
+ :site-name="cardRow1[3].siteName"
+ :exception-type="cardRow1[3].exceptionType"
+ :begin-time="beginTime"
+ :end-time="endTime"
+ :exception-name="cardRow1[3].exceptionName"
+ :site-num="cardRow1[3].siteNum"
+ :exception-num="cardRow1[3].exceptionNum"
+ :exception-all-num="exceptionAllNum"
+ :site-num-all="siteTotal"
+ :isNoDataStatus="cardRow1[3].isNoDataStatus"
+ @get-abnormal-data-by-click="getAbnormalDataByClick"
+ >
+ <img src="@/assets/exception/exception7.png" height="24" width="24" />
+ </AnalysisCard>
+ </el-col>
+ </el-row>
+
+ <el-row :gutter="20">
+ <el-col :span="6">
+ <AnalysisCard
+ :site-name="cardRow2[0].siteName"
+ :exception-type="cardRow2[0].exceptionType"
+ :begin-time="beginTime"
+ :end-time="endTime"
+ :exception-name="cardRow2[0].exceptionName"
+ :site-num="cardRow2[0].siteNum"
+ :exception-num="cardRow2[0].exceptionNum"
+ :exception-all-num="exceptionAllNum"
+ :site-num-all="siteTotal"
+ :isNoDataStatus="cardRow2[0].isNoDataStatus"
+ @get-abnormal-data-by-click="getAbnormalDataByClick"
+ >
+ <img src="@/assets/exception/exception0.png" height="24" width="24" />
+ </AnalysisCard>
+ </el-col>
+ <el-col :span="6">
+ <AnalysisCard
+ :site-name="cardRow2[1].siteName"
+ :exception-type="cardRow2[1].exceptionType"
+ :begin-time="beginTime"
+ :end-time="endTime"
+ :exception-name="cardRow2[1].exceptionName"
+ :site-num="cardRow2[1].siteNum"
+ :exception-num="cardRow2[1].exceptionNum"
+ :exception-all-num="exceptionAllNum"
+ :site-num-all="siteTotal"
+ :isNoDataStatus="cardRow2[1].isNoDataStatus"
+ @get-abnormal-data-by-click="getAbnormalDataByClick"
+ >
+ <img src="@/assets/exception/exception1.png" height="24" width="24" />
+ </AnalysisCard>
+ </el-col>
+ <el-col :span="6">
+ <AnalysisCard
+ :site-name="cardRow2[2].siteName"
+ :exception-type="cardRow2[2].exceptionType"
+ :begin-time="beginTime"
+ :end-time="endTime"
+ :exception-name="cardRow2[2].exceptionName"
+ :site-num="cardRow2[2].siteNum"
+ :exception-num="cardRow2[2].exceptionNum"
+ :exception-all-num="exceptionAllNum"
+ :site-num-all="siteTotal"
+ :isNoDataStatus="cardRow2[2].isNoDataStatus"
+ @get-abnormal-data-by-click="getAbnormalDataByClick"
+ >
+ <img src="@/assets/exception/exception2.png" height="24" width="24" />
+ </AnalysisCard>
+ </el-col>
+ <el-col :span="6">
+ <AnalysisCard
+ :site-name="cardRow2[3].siteName"
+ :exception-type="cardRow2[3].exceptionType"
+ :begin-time="beginTime"
+ :end-time="endTime"
+ :exception-name="cardRow2[3].exceptionName"
+ :site-num="cardRow2[3].siteNum"
+ :exception-num="cardRow2[3].exceptionNum"
+ :exception-all-num="exceptionAllNum"
+ :site-num-all="siteTotal"
+ :isNoDataStatus="cardRow2[3].isNoDataStatus"
+ @get-abnormal-data-by-click="getAbnormalDataByClick"
+ >
+ <img src="@/assets/exception/exception3.png" height="24" width="24" />
+ </AnalysisCard>
+ </el-col>
+ </el-row>
+ </el-card>
+ </el-col>
+ </el-row>
+
+ <el-button-group>
+ <el-button color="#626aef" plain @click="isTableShow = true" v-show="!isTableShow">
+ 鏄剧ず寮傚父娓呭崟<el-icon class="i-ep-Arrow"><i-ep-ArrowUp /></el-icon>
+ </el-button>
+ <el-button color="#626aef" plain @click="isTableShow = false" v-show="isTableShow">
+ 闅愯棌寮傚父娓呭崟<el-icon class="i-ep-Arrow"><i-ep-ArrowDown /></el-icon>
+ </el-button>
+ </el-button-group>
+
+ <!-- 琛ㄦ牸 -->
+ <el-row v-show="isTableShow">
+ <el-col>
+ <el-table
+ ref="table"
+ :data="displayData"
+ :height="tableHeight"
+ :highlight-current-row="true"
+ size="default"
+ v-loading="loading.tableLoading"
+ border
+ >
+ <el-table-column
+ type="index"
+ label="搴忓彿"
+ width="60px"
+ align="center"
+ fixed
+ :index="indexMethod1"
+ />
+ <el-table-column prop="name" label="绔欑偣鍚嶇О" show-overflow-tooltip />
+ <el-table-column prop="mnCode" label="璁惧缂栧彿" align="center" show-overflow-tooltip />
+ <el-table-column prop="exception" label="寮傚父绫诲瀷" align="center" show-overflow-tooltip />
+ <el-table-column prop="region" label="鍖哄煙" align="center" show-overflow-tooltip />
+ <el-table-column prop="beginTime" label="寮�濮嬫椂闂�" align="center" show-overflow-tooltip />
+ <el-table-column prop="endTime" label="缁撴潫鏃堕棿" align="center" show-overflow-tooltip />
+ <el-table-column
+ prop="typename"
+ label="鍦烘櫙"
+ align="center"
+ width="82"
+ show-overflow-tooltip
+ />
+ <el-table-column prop="address" label="鍦板潃" align="center" show-overflow-tooltip />
+ <el-table-column prop="dutyCompany" label="杩愮淮鍟�" align="center" show-overflow-tooltip />
+
+ <el-table-column label="鎿嶄綔" align="center">
+ <template #default="{ row }">
+ <el-button type="primary" class="table-button" @click="showDialog(row)"
+ >鏌ョ湅璇︽儏</el-button
+ >
+ </template>
+ </el-table-column>
+ </el-table>
+
+ <el-pagination
+ ref="h4"
+ background
+ layout="total, sizes, prev, pager, next, jumper"
+ v-model:current-page="currentPage"
+ v-model:page-size="pageSize"
+ :total="total"
+ :page-sizes="[10, 20, 50, 100]"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ >
+ </el-pagination>
+ </el-col>
+ </el-row>
+
+ <!-- 瀵硅瘽妗� -->
+ <el-dialog
+ class="exception-dialog"
+ v-model="dialogTableVisible"
+ draggable
+ align-center
+ height="700px"
+ width="700px"
+ >
+ <!-- 澶� -->
+ <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>{{ tableCurrentRowData.mnCode }}
+ </div>
+ <div>
+ <span class="diag-head-text1">杩愮淮鍟嗭細</span>{{ tableCurrentRowData.dutyCompany }}
+ </div>
+ <!-- <div>
+ <span class="diag-head-text1">寮傚父绫诲瀷锛�</span>
+ <span v-if="tableCurrentRowData.exceptionType == '0'">鏁版嵁缂哄け寮傚父</span>
+ <span v-else-if="tableCurrentRowData.exceptionType == '1'">鏁版嵁瓒呬綆</span>
+ <span v-else-if="tableCurrentRowData.exceptionType == '2'">瓒呮爣</span>
+ <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 }} ~
+ {{ tableCurrentRowData.endTime }}
+ </div>
+ </div>
+
+ <!-- <div class="chart-jump-button">
<el-button
type="danger"
:loading="loading.preButton"
@@ -1642,88 +1749,78 @@
@click="getNextRowData"
>涓嬫潯寮傚父</el-button
>
+ </div> -->
+ <div class="chart-jump-button">
+ <el-button
+ type="danger"
+ :loading="loading.preButton"
+ :disabled="dialog.isPreCantouch || flag.banTouch"
+ @click="getNextRowData"
+ >涓婃潯寮傚父</el-button
+ >
+ <el-button
+ type="danger"
+ :loading="loading.afterButton"
+ :disabled="dialog.isNextCantouch || flag.banTouch"
+ @click="getPreviousRowData"
+ >涓嬫潯寮傚父</el-button
+ >
+ </div>
</div>
+ </template>
+
+ <!-- :option="dialog.option" -->
+
+ <!-- 鍥惧舰 -->
+ <DustLineChart
+ :option="dialog.option"
+ :is-open-dialog="dialogTableVisible"
+ v-loading="loading.lineChart"
+ ></DustLineChart>
+
+ <!-- 琛ㄦ牸 -->
+ <div>
+ <el-table :data="dialog.historyData" size="default" height="200" border>
+ <el-table-column
+ type="index"
+ label="搴忓彿"
+ width="60px"
+ align="center"
+ fixed
+ :index="indexMethod2"
+ ></el-table-column>
+ <!-- <el-table-column fixed prop="name" label="绔欑偣鍚嶇О" show-overflow-tooltip />
+ <el-table-column prop="mnCode" label="璁惧缂栧彿" align="center" show-overflow-tooltip />
+ <el-table-column prop="dutyCompany" label="杩愮淮鍟�" align="center" show-overflow-tooltip /> -->
+ <el-table-column prop="lst" label="閲囬泦鏃堕棿" align="center" show-overflow-tooltip />
+ <el-table-column
+ prop="dustValue"
+ label="棰楃矑鐗╂祿搴�(mg/m鲁)"
+ align="center"
+ show-overflow-tooltip
+ />
+ </el-table>
</div>
- </template>
-
- <!-- :option="dialog.option" -->
-
- <!-- 鍥惧舰 -->
- <DustLineChart
- :option="dialog.option"
- :is-open-dialog="dialogTableVisible"
- v-loading="loading.lineChart"
- ></DustLineChart>
-
- <!-- 琛ㄦ牸 -->
- <div>
- <el-table :data="dialog.historyData" size="default" height="200" border>
- <el-table-column
- type="index"
- label="搴忓彿"
- width="60px"
- align="center"
- fixed
- :index="indexMethod"
- ></el-table-column>
- <el-table-column
- fixed
- prop="name"
- label="绔欑偣鍚嶇О"
- show-overflow-tooltip
- />
- <el-table-column
- prop="mnCode"
- label="璁惧缂栧彿"
- align="center"
- show-overflow-tooltip
- />
- <el-table-column
- prop="dutyCompany"
- label="杩愮淮鍟�"
- align="center"
- show-overflow-tooltip
- />
- <el-table-column
- prop="lst"
- label="閲囬泦鏃堕棿"
- align="center"
- show-overflow-tooltip
- />
- <el-table-column
- prop="dustValue"
- label="棰楃矑鐗╂祿搴�(mg/m鲁)"
- align="center"
- show-overflow-tooltip
- />
- </el-table>
- </div>
- <template #footer>
- <el-tag type="success" class="mx-1" effect="dark" round
- ><span
- class="table-line-lable"
- v-show="tableCurrentRowData.exceptionType == '0'"
- >缂哄け鏁版嵁锛�
- </span>
- <span
- v-show="
- tableCurrentRowData.exceptionType == '1' ||
- tableCurrentRowData.exceptionType == '2' ||
- tableCurrentRowData.exceptionType == '3'
- "
- >寮傚父鏁版嵁锛�</span
- >
- <span class="table-line-num">{{ dialog.exceptionTotal }}鏉�</span>
- <span
- v-show="
- tableCurrentRowData.exceptionType === '0'
- "
- >
- (閫昏緫璁＄畻)</span
- >
- </el-tag>
- </template>
- </el-dialog>
+ <template #footer>
+ <el-tag type="success" class="mx-1" effect="dark" round
+ ><span class="table-line-lable" v-show="tableCurrentRowData.exceptionType == '0'"
+ >缂哄け鏁版嵁锛�
+ </span>
+ <span
+ v-show="
+ tableCurrentRowData.exceptionType == '1' ||
+ tableCurrentRowData.exceptionType == '2' ||
+ tableCurrentRowData.exceptionType == '3' ||
+ tableCurrentRowData.exceptionType == '4'
+ "
+ >寮傚父鏁版嵁锛�</span
+ >
+ <span class="table-line-num">{{ dialog.exceptionTotal }}鏉�</span>
+ <span v-show="tableCurrentRowData.exceptionType == '0'"> (閫昏緫璁＄畻)</span>
+ </el-tag>
+ </template>
+ </el-dialog>
+ </div>
</template>
<style lang="scss" scoped>
@@ -1732,31 +1829,40 @@
}
/* 鏉′欢鏌ヨ妯″潡鐨勬牱寮� */
+.el-form {
+ margin: 10px;
+}
+img {
+ margin-right: 5px;
+}
.head-container-search {
- // display: flex;
- // justify-content: flex-end;
float: right;
}
.head-describtion-text {
justify-content: flex-end;
- margin-bottom: 10px;
+ margin-bottom: 2px;
+ margin-right: 20px;
font-size: 14px;
color: gray;
+}
+.button-set {
+ margin: 10px;
}
/* 鏉′欢鏌ヨ妯″潡缁撴潫 */
/* 寮傚父鍒嗘瀽妯″潡鐨勬牱寮� */
+
.card-text1 {
- // 榛戜綋鐨勫紓甯稿悕瀛楅儴鍒�
+ /* 榛戜綋鐨勫紓甯稿悕瀛楅儴鍒� */
margin: 10px;
}
.card-text1 + div {
- // 榛戜綋鐨勫紓甯稿悕瀛椾笅闈㈢殑
+ /* 榛戜綋鐨勫紓甯稿悕瀛椾笅闈㈢殑 */
margin: 12px;
}
.card-exception-buttom {
- // 寮傚父绔欑偣鏂囨湰鎸夐挳鍖哄煙
+ /* 寮傚父绔欑偣鏂囨湰鎸夐挳鍖哄煙 */
padding: 11px;
}
.card-header {
@@ -1764,13 +1870,17 @@
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-header-image {
+.card-content-normal {
+ min-height: 200px;
+ border: 2px solid red;
+ border-radius: 20px;
}
+
.card-header-text {
font-size: 16px;
font-weight: bold;
@@ -1781,47 +1891,57 @@
white-space: nowrap;
}
.card-exceptionname-text1 {
- // 寮傚父绔欑偣鍗犳瘮
+ /* 寮傚父绔欑偣鍗犳瘮 */
font-size: 14px;
white-space: nowrap;
}
.card-exceptionname-text2 {
- // 寮傚父鏁板崰姣旂殑澶栬竟璺�
- margin-left: 50px;
+ /* 寮傚父鏁板崰姣旂殑澶栬竟璺� */
font-size: 14px;
white-space: nowrap;
}
.text-blank {
- // 閫楀彿
+ /* 閫楀彿 */
margin-right: 10px;
color: #000000;
}
+.card-row {
+ margin-bottom: 10px;
+}
+
/* 寮傚父鍒嗘瀽妯″潡缁撴潫 */
-/* 琛ㄦ牸妯″潡鐨勬牱寮� */
+/* 闅愯棌琛ㄦ牸鎸夐挳缁勬牱寮� */
+.el-button-group {
+ margin: 10px 0px 10px 10px;
+}
+.i-ep-Arrow {
+ margin-left: 6px;
+ margin-bottom: 2px;
+ font-size: 1.2em;
+}
+/* 闅愯棌琛ㄦ牸鎸夐挳缁勬牱寮忕粨鏉� */
+/* 琛ㄦ牸妯″潡鐨勬牱寮� */
+.el-table {
+ color: #333333;
+}
/* 琛ㄦ牸妯″潡缁撴潫 */
/* 鏌ョ湅璇︽儏瀵硅瘽妗嗘ā鍧楃殑鏍峰紡 */
-:deep(.el-dialog) {
- // 瀵硅瘽妗嗛珮搴�
-}
+
.diag-head {
- // 瀵硅瘽妗嗗ご閮ㄥ尯鍩�
+ /* 瀵硅瘽妗嗗ご閮ㄥ尯鍩� */
min-height: 200px;
- // border: 1px solid #fdc2db;
}
.diag-head-text1 {
- // 瀵硅瘽妗嗗ご閮ㄧ殑灞炴�у瓧娈靛姞绮�
+ /* 瀵硅瘽妗嗗ご閮ㄧ殑灞炴�у瓧娈靛姞绮� */
font-weight: bold;
}
-.diag-head-text span:nth-child(2) {
- // 瀵硅瘽妗嗗ご閮ㄢ�樺紓甯哥被鍨嬧�欏睘鎬�
- margin-left: 150px;
-}
+
.diag-head-text > div {
- // 瀵硅瘽妗嗗紓甯告椂闂存
+ /* 瀵硅瘽妗嗗紓甯告椂闂存 */
margin-top: 15px;
}
.diag-head-text {
@@ -1831,19 +1951,14 @@
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