From 43c2f5b94d87263cf189f7ba51c8dc6c5e6144c8 Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期四, 23 十一月 2023 08:52:22 +0800
Subject: [PATCH] 1.修改了雷达图传入的数据 2.数据指标排名一进来按日均值倒序排列 3.修改了一些局部的样式
---
src/api/exceptionApi.js | 4
src/views/risk_assessment/components/SiteDetail.vue | 1
src/api/site/siteData.js | 5
src/views/risk_assessment/DataRiskRank.vue | 472 ++++++---
src/views/risk_assessment/DataIndexRank.vue | 284 ++++++
src/views/risk_assessment/DataRiskModel.vue | 108 -
src/components/layout/AppAside.vue | 23
src/router/index.js | 14
src/views/exception/components/SubFlightInspection.vue | 1847 +++++++++++++++++++++++++++++++++++++++
src/views/risk_assessment/components/DustRadarChart.vue | 31
src/views/exception/components/CompFlightInspection.vue | 16
11 files changed, 2,511 insertions(+), 294 deletions(-)
diff --git a/src/api/exceptionApi.js b/src/api/exceptionApi.js
index cf9b86d..18133e5 100644
--- a/src/api/exceptionApi.js
+++ b/src/api/exceptionApi.js
@@ -42,6 +42,10 @@
+
+
+
+
/**
*
* @param {*} siteName
diff --git a/src/api/site/siteData.js b/src/api/site/siteData.js
index 44952e8..9ae7e7d 100644
--- a/src/api/site/siteData.js
+++ b/src/api/site/siteData.js
@@ -6,8 +6,9 @@
/**
* 鏍规嵁璁惧缂栫爜鏌ヨ璇ョ珯鐐逛俊鎭�
*/
- queryHistoryData(){
- return $http.get('/dust/history1',{ params: params })
+ queryHistoryData() {
+
+ // return $http.get('/dust/history1',{ params: params })
}
}
\ No newline at end of file
diff --git a/src/components/layout/AppAside.vue b/src/components/layout/AppAside.vue
index 6d836ce..41853ac 100644
--- a/src/components/layout/AppAside.vue
+++ b/src/components/layout/AppAside.vue
@@ -74,26 +74,23 @@
鏁版嵁椋庨櫓妯″瀷
</el-menu-item>
-
- <el-menu-item index="/analysis" v-show="menu[1].avalue" @click="changeIcon(1)">
- <img src="@/assets/generalModel.png" height="23">
- 鏁版嵁鎺掑悕娓呭崟
- </el-menu-item>
- <el-menu-item index="/analysis" v-show="!menu[1].avalue" @click="changeIcon(1)">
- <!-- <el-icon><i-ep-Stopwatch /></el-icon> -->
- <img src="@/assets/generalModel2.png" height="23">
- 鏁版嵁鎺掑悕娓呭崟
- </el-menu-item>
-
<el-menu-item index="/riskrank" v-show="menu[2].avalue" @click="changeIcon(2)">
<img src="@/assets/generalModel.png" height="23">
- 缁煎悎椋庨櫓鎺掑悕
+ 鏁版嵁椋庨櫓鎺掑悕
</el-menu-item>
<el-menu-item index="/riskrank" v-show="!menu[2].avalue" @click="changeIcon(2)">
<img src="@/assets/generalModel2.png" height="23">
- 缁煎悎椋庨櫓鎺掑悕
+ 鏁版嵁椋庨櫓鎺掑悕
</el-menu-item>
+ <el-menu-item index="/analysis" v-show="menu[1].avalue" @click="changeIcon(1)">
+ <img src="@/assets/generalModel.png" height="23">
+ 鏁版嵁鎸囨爣鎺掑悕
+ </el-menu-item>
+ <el-menu-item index="/analysis" v-show="!menu[1].avalue" @click="changeIcon(1)">
+ <img src="@/assets/generalModel2.png" height="23">
+ 鏁版嵁鎸囨爣鎺掑悕
+ </el-menu-item>
</el-sub-menu>
diff --git a/src/router/index.js b/src/router/index.js
index 10980cb..4473a9a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -21,16 +21,16 @@
{
path: '/analysis',
name: 'analysis',
- meta: { title: '鏁版嵁椋庨櫓鎺掑悕', keepAlive: true },
- component: () => import('@/views/risk_assessment/DataRiskRank.vue')
+ meta: { title: '鏁版嵁鎸囨爣鎺掑悕', keepAlive: true },
+ component: () => import('@/views/risk_assessment/DataIndexRank.vue')
},
// 鏁版嵁椋庨櫓鎺掑悕
{
path: '/riskrank',
name: 'riskrank',
- meta: { title: '缁煎悎椋庨櫓鎺掑悕', keepAlive: true },
- component: () => import('@/views/risk_assessment/SiteComprehensiveRskRanking.vue')
+ meta: { title: '鏁版嵁椋庨櫓鎺掑悕', keepAlive: true },
+ component: () => import('@/views/risk_assessment/DataRiskRank.vue')
},
// 椋炶宸℃
@@ -95,7 +95,6 @@
component: () => import('@/views/risk_assessment/components/SubRiskModel.vue')
},
-
// 瀹℃牳杈呭姪宓屽叆杩囨浮椤甸潰
{
path: '/AuditDetail/:beginTime/:endTime/:exceptionType',
@@ -112,8 +111,6 @@
component: () => import('@/views/exception/components/SubSiteAudit.vue')
},
-
-
// 寮傚父璇︽儏宓屽叆杩囨浮椤甸潰
{
path: '/exceptionDetail/:siteName/:month/',
@@ -122,14 +119,13 @@
component: () => import('@/views/risk_assessment/components/SiteDetail.vue')
},
-
// 寮傚父璇︽儏宓屽叆
{
path: '/CompFlightInspection',
name: 'CompFlightInspection',
meta: { title: '寮傚父璇︽儏宓屽叆' },
component: () => import('@/views/exception/components/CompFlightInspection.vue')
- },
+ }
]
},
diff --git a/src/views/exception/components/CompFlightInspection.vue b/src/views/exception/components/CompFlightInspection.vue
index e435d7f..dbd2081 100644
--- a/src/views/exception/components/CompFlightInspection.vue
+++ b/src/views/exception/components/CompFlightInspection.vue
@@ -675,9 +675,9 @@
if(this.siteName){
params['siteName'] = this.siteName
}
- if (this.form.street.length != 0) {
- params['street'] = this.form.street.join()
- }
+ // if (this.form.street.length != 0) {
+ // params['street'] = this.form.street.join()
+ // }
if (this.form.dutyCompany.length != 0) {
params['dutyCompany'] = this.form.dutyCompany.join()
}
@@ -860,9 +860,9 @@
if (this.siteName) {
params['siteName'] = this.siteName
}
- if (this.form.street.length != 0) {
- params['street'] = this.form.street.join()
- }
+ // if (this.form.street.length != 0) {
+ // params['street'] = this.form.street.join()
+ // }
if (this.form.dutyCompany.length != 0) {
params['dutyCompany'] = this.form.dutyCompany.join()
}
@@ -996,9 +996,9 @@
<DutyCompany @submitDutyCompanyValue="(n) => (form.dutyCompany = n)"> </DutyCompany>
</el-form-item>
- <el-form-item v-show="showAll">
+ <!-- <el-form-item v-show="showAll">
<StreetInfo @submitStreetValue="(n) => (form.street = n)"> </StreetInfo>
- </el-form-item>
+ </el-form-item> -->
<el-form-item>
<TimeShortCuts timeType="day" @submit-time="giveTime" :beginAndEndTime="[beginTime,endTime]"></TimeShortCuts>
diff --git a/src/views/exception/components/SubFlightInspection.vue b/src/views/exception/components/SubFlightInspection.vue
new file mode 100644
index 0000000..e375b3c
--- /dev/null
+++ b/src/views/exception/components/SubFlightInspection.vue
@@ -0,0 +1,1847 @@
+<script>
+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('@/views/exception/components/DustLineChart.vue'))
+import exceptionApi from '@/api/exceptionApi.js'
+import dayjs from 'dayjs'
+import { ElMessage } from 'element-plus'
+import AnalysisCard from '@/views/exception/components/AnalysisCard.vue'
+
+export default {
+ props:{
+ siteName:{
+ type:String,
+ default:''
+ },
+ month:{
+ type:String,
+ default:'2023-11-01'
+ }
+ },
+ components: {
+ TimeShortCuts,
+ DustLineChart,
+ ButtonClick,
+ AreaAndmonitorType,
+ AnalysisCard
+ },
+ data() {
+ return {
+ // 琛ㄥ崟鍐呭
+ form: {
+ // 绔欑偣鍚嶇О
+ name: '',
+ // 閫夋嫨鐨勫紓甯哥被鍨�
+ exceptionName: []
+ },
+ beginTime: '',
+ endTime: '',
+ // 杩斿洖鐨勬暟鎹�
+ tableData: [],
+ // 琛ㄦ牸灞曠ず鐨勬暟鎹�
+ displayData: [],
+ // 琛ㄦ牸楂樺害
+ tableHeight: 400,
+ // 琛ㄦ牸鏄剧ず
+ isTableShow: false,
+ // 褰撳墠椤�
+ currentPage: 1,
+ // 姣忛〉鏉℃暟
+ pageSize: 20,
+ // 琛ㄦ牸鐨勬�昏褰曟暟
+ total: 0,
+
+ // 鏌ヨ鎸夐挳鏃犳暟鎹椂
+ 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,
+ // 淇濆瓨寮傚父瀵瑰簲鐨勫簵閾哄悕绉板拰璁惧缂栧彿
+ exception: {
+ // 鏂數鎴栨柇缃�
+ exception0: [],
+ // 鏁版嵁瓒呬綆
+ exception1: [],
+ // 瓒呮爣
+ exception2: [],
+ // 鏁版嵁闀挎椂娈垫棤娉㈠姩
+ exception3: [],
+ // 閲忕骇绐佸彉寮傚父
+ exception4: [],
+ // 涓磋繎瓒呮爣寮傚父
+ exception5: [],
+ // 鍗曟棩瓒呮爣娆℃暟涓寸晫寮傚父
+ exception6: [],
+ // 婊戝姩骞冲潎鍊煎紓甯�
+ exception7: [],
+
+ // 璇ユ椂娈电殑寮傚父鏁伴噺
+ exception0Num: 0,
+ exception1Num: 0,
+ exception2Num: 0,
+ exception3Num: 0,
+ exception4Num: 0,
+ exception5Num: 0,
+ exception6Num: 0,
+ exception7Num: 0
+ },
+ // 绔欑偣鎬绘暟閲�
+ siteTotal: 0,
+
+ // 閫変腑琛ㄦ牸褰撳墠琛岀殑鏁版嵁
+ tableCurrentRowData: null,
+ // 閫変腑琛ㄦ牸褰撳墠琛岀殑绱㈠紩
+ selectedRowIndex: -2,
+ // 椤甸潰涓婄殑鎸夐挳鍔犺浇鐘舵��
+ loading: {
+ // 鏌ヨ鎸夐挳
+ queryButton: false,
+ // 琛ㄦ牸鍔犺浇涓�
+ tableLoading: false,
+ // 涓婁竴鏉℃寜閽�
+ preButton: false,
+ // 涓嬩竴鏉℃寜閽�
+ afterButton: false,
+ // 鎶樼嚎鍥�
+ lineChart: false
+ },
+
+ dialog: {
+ // 鎵撳紑瀵硅瘽妗嗚姹傝鍖洪棿鐨勫巻鍙叉暟鎹�
+ historyData: [],
+ // 璇ユ椂闂存鐨勫紓甯告潯鏁�
+ exceptionTotal: 0,
+ // 鎶樼嚎鍥鹃厤缃」
+ option: {},
+ // 鈥欎笂涓�鏉♀�樻寜閽槸鍚﹀彲浠ヨ鐐瑰嚮鐘舵��
+ isPreCantouch: false,
+ // 鈥欎笅涓�鏉♀�樻寜閽槸鍚﹀彲浠ヨ鐐瑰嚮鐘舵��
+ isNextCantouch: false,
+ // 寮傚父鐨勫墠涓悗鍖洪棿鎵�鏈夋暟鎹�
+ allExceptionTimeData: []
+ },
+
+ // 鏍囪浣�
+ flag: {
+ // 鍔犺浇鏃� 涓婁笅鏉℃寜閽笉鑳藉啀鐐瑰嚮
+ banTouch: 0,
+ // 0浠ｈ〃鍒嗛〉锛�1浠ｈ〃涓嶅垎椤�
+ originClick: 0
+ }
+ }
+ },
+ setup() {
+ // provide('search',readonly(form))
+ const { isExceedOneMonth } = useCommonFunction()
+ return {
+ isExceedOneMonth
+ }
+ },
+ // 鐩戝惉 鍒ゆ柇鎸夐挳鏄惁鍙偣鍑�
+ watch: {
+ selectedRowIndex(newVaue) {
+ // 澶勪簬琛ㄦ牸鐨勬渶鍚庝竴鏉℃暟鎹� 璁剧疆鈥樹笂涓�鏉♀�欐寜閽笉鍙偣
+ if (newVaue === 0) {
+ this.dialog.isPreCantouch = true
+ //鐢ㄦ埛鍏堢偣浜嗙涓�鏉★紝pre涓簍rue,鐒跺悗鐐瑰嚮鏈�鍚庝竴鏉�,next涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
+ if (this.dialog.isNextCantouch == true) {
+ this.dialog.isNextCantouch = false
+ }
+ }
+ // 澶勪簬琛ㄦ牸绗竴鏉℃暟鎹� 璁剧疆鈥樹笂涓�鏉♀�欐寜閽笉鍙偣
+ else if (newVaue === this.displayData.length - 1) {
+ 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
+ }
+ },
+
+ // 褰撻�夋嫨鐨勬椂闂村彂鐢熷彉鍖栨椂锛屽紓甯稿垎鏋愰儴鍒嗙殑寮傚父搴楅摵鏁伴噺鍚屾鍙樺寲
+ // beginTime() {
+ // this.getShopNames()
+ // },
+ // endTime() {
+ // this.getShopNames()
+ // },
+ dialogTableVisible() {
+ 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() {
+ // 鏌ヨ鏃堕棿娈电殑鍚勫紓甯哥殑绔欑偣锛屾煡璇㈣鏃堕棿鍖洪棿鐨勫悇寮傚父鏁伴噺
+ // this.backExceptionDataAWeekAgo()
+ // this.getShopNames()
+ this.getSiteNume()
+
+ this.$watch(() => [this.siteName, this.month], () => {
+ this.form.beginTime = dayjs(this.month).startOf('month')
+ this.form.endTime = dayjs(this.month).endOf('month')
+ this.backExceptionDataAWeekAgo()
+ this.getShopNames()
+
+ });
+ },
+
+ methods: {
+ getImageUrl(name) {
+ return new URL(`../../lib/Carousel/assets/${name}`, import.meta.url).href
+ },
+ // 鏀惧洖绔欑偣鎬绘暟閲�
+ getSiteNume() {
+ exceptionApi.getSitesNum().then((res) => {
+ this.siteTotal = res.data.data.length
+ })
+ },
+
+ /**
+ * description锛氱偣鍑诲紓甯哥珯鐐瑰悕瀛楁椂 杩斿洖鐨勬暟鎹�
+ * @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)
+ },
+ // 鐐瑰嚮琛ㄦ牸鐨勮鏃�
+ selectTableRow() {
+ // 鑾峰彇褰撳墠琛岀殑绱㈠紩
+ this.selectedRowIndex = this.displayData.indexOf(this.tableCurrentRowData)
+ },
+ /**
+ * description锛氭柇鐢垫垨鏂綉鏃惰缃殑琛ㄦ牸鏁版嵁
+ */
+ setOfflineTbleData() {
+ // 鏃犳暟鎹椂鐨勬椂闂存暟缁� 鏃堕棿鐩稿樊15鍒嗛挓
+ const abnormalTimeTenMinute = index.descFiftyTime(
+ this.tableCurrentRowData.beginTime,
+ this.tableCurrentRowData.endTime
+ )
+ // 淇濆瓨鏃犳暟鎹椂琛ㄦ牸鏉℃暟
+ this.dialog.exceptionTotal = abnormalTimeTenMinute.length
+
+ // 鍘婚櫎渚涚數寮傚父鍜屾帀绾垮尯闂寸殑绗竴涓湁鍏冪礌鐨勫��
+ 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,
+ lst: abnormalTimeTenMinute[i],
+ dustValue: ''
+ })
+ }
+ },
+
+ // 娈电數鎴栨柇缃戝尯闂存棤鏁版嵁锛岄渶瑕佽ˉ鍏呫�傚叾浠栫殑閮芥湁鏁版嵁锛岀洿鎺ヤ竴娆¤姹傚叏閮ㄦ椂娈靛氨濂�
+
+ // 鏍规嵁寮傚父鍖洪棿鏋勯�犲墠鍚庣棣栧熬 鍓嶅尯闂� 涓棿鍖洪棿 鍚庡尯闂�
+ // 鍒ゆ柇鏄鐢垫垨鏂綉锛熸槸鍒欒姹傚墠鍚庡尯闂达紝鍚﹀垯鍙姹備竴娆″畬鏁寸殑
+ // 寰楀埌鏈�缁堟暟鎹�
+ // 鍐嶅垽鏂紓甯哥绫� 锛岃繘琛岃缃厤缃」
+
+ /**
+ * description锛氫竴娆¤姹傚洖鍓嶄腑鍚庡尯闂寸殑鏁版嵁,瀵规暟鎹繘琛屽垎鏋�
+ * @param锛� 鍓嶄腑鍚庡尯闂寸殑璇锋眰鍙傛暟锛屽墠涓悗鐨勬�诲尯闂存椂闂达紝寮傚父寮�濮嬫椂闂达紝涓�鍦虹粨鏉熸椂闂�
+ */
+ 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()
+ }
+
+ // x杞存棩鏈熸椂闂�
+ let dateList = []
+ // y杞� 瓒呮爣娌圭儫娴撳害
+ let dustValue = []
+ let timeAndValue = {}
+
+ // 浠庢坊鍔犱簡棣栦綅鍖洪棿鐨勫紑濮嬪拰缁撴潫鏃堕棿杩涜閬嶅巻 淇濊瘉鏃堕棿浠�10鍒嗛挓涓洪棿闅�
+ 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)
+
+ // 璁剧疆鎶樼嚎鍥鹃厤缃」
+ 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 = {}
+ switch (this.tableCurrentRowData.exceptionType) {
+ // 鏂數鎴栨柇缃� 鏃堕棿娈�
+ case '0':
+ 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,
+ markLine: {
+ silent: true,
+ data: [
+ // 鏍囨敞鏃犳暟鎹椂闂存鐨勬晥鏋滐紝灏嗚繖涓椂闂存鐨勬暟杞撮儴鍒嗗彉涓虹孩鑹�
+ {
+ name: '鏃犳暟鎹�',
+ xAxis: exceptionBeginTime
+ },
+ {
+ xAxis: exceptionEndTime
+ }
+ ],
+ lineStyle: {
+ color: 'red'
+ }
+ }
+ }
+ ]
+ }
+ break
+ // 瓒呮爣
+ case '2':
+ 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.map((item) => {
+ if (item >= 1) {
+ return {
+ value: item,
+ itemStyle: {
+ color: 'red'
+ }
+ }
+ }
+ return item
+ }),
+ // 鍙樻崲鎸囧畾鏃堕棿鍖洪棿鐨勮儗鏅鑹�
+ markArea: {
+ itemStyle: {
+ color: 'rgba(255, 173, 177, 0.4)'
+ },
+ data: [
+ [
+ {
+ name: '寮傚父鏃堕棿娈�',
+ xAxis: exceptionBeginTime
+ },
+ {
+ xAxis: exceptionEndTime
+ }
+ ]
+ ]
+ },
+ markLine: {
+ symbol: 'none',
+ itemStyle: {
+ // 鍩虹嚎鍏叡鏍峰紡
+ normal: {
+ lineStyle: {
+ type: 'dashed'
+ },
+ label: {
+ show: true,
+ position: 'end',
+ formatter: '{b}'
+ }
+ }
+ },
+ data: [
+ {
+ name: '瓒呮爣',
+ type: 'average',
+ yAxis: 1,
+ lineStyle: {
+ // color: '#ff0000'
+ color: 'red'
+ }
+ }
+ ]
+ }
+ }
+ ],
+ // 鎸囧畾鏃堕棿鍖洪棿鐨勭嚎娈靛彉棰滆壊
+ 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
+ // 鏁版嵁瓒呬綆 鍙湁鏃堕棿鐐�
+ case '1':
+ 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.map((item) => {
+ if (item <= 0.01) {
+ return {
+ value: item,
+ itemStyle: {
+ color: 'red'
+ }
+ }
+ }
+ return item
+ }),
+
+ markLine: {
+ symbol: 'none',
+ itemStyle: {
+ // 鍩虹嚎鍏叡鏍峰紡
+ normal: {
+ lineStyle: {
+ type: 'dashed'
+ },
+ label: {
+ show: true,
+ position: 'end',
+ formatter: '{b}'
+ }
+ }
+ },
+ data: [
+ {
+ name: '鏁版嵁瓒呬綆',
+ type: 'average',
+ yAxis: 0.01,
+ lineStyle: {
+ // color: '#ff0000'
+ color: 'red'
+ }
+ }
+ ]
+ }
+ }
+ ],
+ // 鎸囧畾鏃堕棿鍖洪棿鐨勭嚎娈靛彉棰滆壊
+ 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
+ // 鏁版嵁闀挎椂娈垫棤娉㈠姩
+ case '3':
+ 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.map((item) => {
+ if (item >= 1) {
+ return {
+ value: item,
+ itemStyle: {
+ color: 'red'
+ }
+ }
+ }
+ return item
+ }),
+ // 鍙樻崲鎸囧畾鏃堕棿鍖洪棿鐨勮儗鏅鑹�
+ 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
+ // 閲忕骇绐佸彉寮傚父
+ 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:
+ console.log('娌℃湁璁剧疆璇ュ紓甯哥被鍨嬶紒')
+ }
+ this.flag.banTouch = 0
+ },
+ /**
+ * description锛氬垝鍒嗗嚭寮傚父璧峰鏃堕棿锛屾瀯閫犺姹傚墠涓悗鐨勫弬鏁�
+ */
+ timeAndDataProcessed() {
+ //寮傚父鐨勫紑濮嬫椂闂� 缁撴潫鏃堕棿
+ let exceptionBeginTime = this.tableCurrentRowData.beginTime
+ let exceptionEndTime = this.tableCurrentRowData.endTime
+
+ // beforeAndAfterTime[0]:鍓�45鍒嗛挓鐨勬椂闂寸偣
+ // beforeAndAfterTime[1]:鍓�15鍒嗛挓鐨勬椂闂寸偣
+ // beforeAndAfterTime[2]:鍚�15鍒嗛挓鐨勬椂闂寸偣
+ // beforeAndAfterTime[3]:鍚�45鍒嗛挓鐨勬椂闂寸偣
+ let beforeAndAfterTime = index.before45AndAfter45(exceptionBeginTime, exceptionEndTime)
+
+ // 鏋勯�犲紓甯告椂闂村墠鍚庡尯闂存暟鎹姹傚弬鏁�(闄や簡鏂綉涓兘鐢ㄥ埌锛�
+ let paramsAllTime = index.requestGetParms(
+ this.tableCurrentRowData.name,
+ beforeAndAfterTime[0],
+ beforeAndAfterTime[3]
+ )
+
+ // 灏嗗紓甯告暟鎹繘琛岄澶勭悊锛岄殢鍚庡皢缁撴灉浣滀负鎶樼嚎鍥剧殑閰嶇疆椤�
+ this.otherExceptionRequest(
+ paramsAllTime,
+ beforeAndAfterTime,
+ exceptionBeginTime,
+ exceptionEndTime
+ )
+ },
+
+ /**
+ * description锛氳幏鍙栦笅涓�鏉″紓甯镐俊鎭�
+ */
+ getPreviousRowData() {
+ // // 涓嶆槸琛ㄦ牸鐨勬渶鍚庝竴琛�
+ if (this.selectedRowIndex < this.displayData.length - 1) {
+ // 鐐瑰嚮杩囩▼涓� 閿佷綇涓婁笅鏉℃寜閽� 鍦ㄨ缃畬鍥惧舰閰嶇疆椤瑰悗瑙ｉ攣
+ this.flag.banTouch = 1
+
+ //寰楀埌涓婁竴琛屾暟鎹储寮�
+ this.selectedRowIndex = this.selectedRowIndex + 1
+
+ //璇锋眰鏁版嵁 鏀瑰彉exceedingData
+ // this.setinfo(this.selectedRowIndex);
+
+ // 寰楀埌涓婁竴琛岀殑鏁版嵁
+ this.tableCurrentRowData = this.displayData[this.selectedRowIndex]
+ 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.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
+ //璇锋眰鏁版嵁 鏀瑰彉exceedingData
+ // this.setinfo(this.selectedRowIndex);
+
+ // 寰楀埌涓婁竴琛岀殑鏁版嵁
+ this.tableCurrentRowData = this.displayData[this.selectedRowIndex]
+
+ 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
+ })
+ }
+ },
+
+ /**
+ * description锛氫粠瀛愮粍浠惰幏寰楁煇绔欑偣璇ユ椂娈电殑寮傚父鏁版嵁
+ * @createTime:2023-08-18
+ */
+ backExceptionData(val1, val2) {
+ this.displayData = val1
+ this.total = val2
+ },
+
+ // 鏌ヨ寮傚父鏁版嵁鐨勭珯鐐瑰悕瀛楀拰鏁伴噺
+ queryExceptionSite(url,siteName, exceptionType) {
+ let params = {}
+ params['beginTime'] = this.beginTime
+ params['endTime'] = this.endTime
+ params['exceptionType'] = exceptionType
+ if(siteName){
+ params['siteName'] = this.siteName
+ }
+ return this.$http.get(url, { params: params })
+ },
+
+
+
+ /**
+ * description锛氬綋鐢ㄦ埛鏀瑰彉鏌ヨ鐨勬椂闂村尯闂存椂锛屼細鏍规嵁璇ュ尯闂存煡璇㈠悇寮傚父鐨勭珯鐐癸紝鏌ヨ璇ユ椂闂村尯闂寸殑鍚勫紓甯告暟閲�
+ * @createTime:2023-08-18
+ */
+ getShopNames() {
+ /* 鏌ヨ寮傚父鐨勭珯鐐� */
+
+ this.queryExceptionSite('/dust/sitenamecode',this.siteName,0)
+ .then((result) => {
+ this.exception.exception0 = result.data.data
+ if (result.data.data.length == 0) {
+ this.isNoData.exception0 = true
+ return
+ }
+ this.isNoData.exception0 = false
+ })
+ this.queryExceptionSite('/dust/sitenamecode',this.siteName,1)
+ .then((result) => {
+ this.exception.exception1 = result.data.data
+ if (result.data.data.length == 0) {
+ this.isNoData.exception1 = true
+ return
+ }
+ this.isNoData.exception1 = false
+ })
+ this.queryExceptionSite('/dust/sitenamecode',this.siteName,2)
+ .then((result) => {
+ this.exception.exception2 = result.data.data
+ if (result.data.data.length == 0) {
+ this.isNoData.exception2 = true
+ return
+ }
+ this.isNoData.exception2 = false
+ })
+
+ this.queryExceptionSite('/dust/sitenamecode',this.siteName,3)
+ .then((result) => {
+ this.exception.exception3 = result.data.data
+ if (result.data.data.length == 0) {
+ this.isNoData.exception3 = true
+ return
+ }
+ this.isNoData.exception3 = false
+ })
+
+ this.queryExceptionSite('/dust/sitenamecode',this.siteName,4)
+ .then((result) => {
+ this.exception.exception4 = result.data.data
+ if (result.data.data.length == 0) {
+ this.isNoData.exception4 = true
+ return
+ }
+ this.isNoData.exception4 = false
+ })
+ this.queryExceptionSite('/dust/sitenamecode',this.siteName,5)
+ .then((result) => {
+ this.exception.exception5 = result.data.data
+ if (result.data.data.length == 0) {
+ this.isNoData.exception5 = true
+ return
+ }
+ this.isNoData.exception5 = false
+ })
+ this.queryExceptionSite('/dust/sitenamecode',this.siteName,6)
+ .then((result) => {
+ this.exception.exception6 = result.data.data
+ if (result.data.data.length == 0) {
+ this.isNoData.exception6 = true
+ return
+ }
+ this.isNoData.exception6 = false
+ })
+ this.queryExceptionSite('/dust/sitenamecode',this.siteName,7)
+ .then((result) => {
+ this.exception.exception7 = result.data.data
+ if (result.data.data.length == 0) {
+ this.isNoData.exception7 = true
+ return
+ }
+ this.isNoData.exception7 = false
+ })
+
+
+ /* 寮傚父寮傚父鏁伴噺 */
+ this.queryExceptionSite('/dust/exceptionnum',this.siteName,0)
+ .then((result) => {
+ this.exception.exception0Num = result.data.data
+ })
+ this.queryExceptionSite('/dust/exceptionnum',this.siteName,1)
+ .then((result) => {
+ this.exception.exception1Num = result.data.data
+ })
+ this.queryExceptionSite('/dust/exceptionnum',this.siteName,2)
+ .then((result) => {
+ this.exception.exception2Num = result.data.data
+ })
+ this.queryExceptionSite('/dust/exceptionnum',this.siteName,3)
+ .then((result) => {
+ this.exception.exception3Num = result.data.data
+ })
+ this.queryExceptionSite('/dust/exceptionnum',this.siteName,4)
+ .then((result) => {
+ this.exception.exception4Num = result.data.data
+ })
+ this.queryExceptionSite('/dust/exceptionnum',this.siteName,5)
+ .then((result) => {
+ this.exception.exception5Num = result.data.data
+ })
+ this.queryExceptionSite('/dust/exceptionnum',this.siteName,6)
+ .then((result) => {
+ this.exception.exception6Num = result.data.data
+ })
+ this.queryExceptionSite('/dust/exceptionnum',this.siteName,7)
+ .then((result) => {
+ this.exception.exception7Num = result.data.data
+ })
+ },
+
+ /**
+ * description锛氳姹傚紓甯哥殑搴楅摵鍚嶅瓧
+ * @param锛氬紓甯哥被鍨嬶紝寮�濮嬫椂闂达紝缁撴潫鏃堕棿
+ * @returns锛� 寮傚父鐨勬暟鎹�
+ */
+ // getSiteNameByExceptionType(exception, beginT, endT) {
+ // let param = {
+ // exceptionType: exception,
+ // beginTime: beginT,
+ // endTime: endT
+ // };
+
+ // this.$http.get('/dust/sitenamecode', { params: param }).then((res) => {
+ // return res.data.data;
+ // });
+ // return;
+ // },
+
+ /**
+ * description锛氭樉绀哄璇濇,杩斿洖璇ュ紓甯告椂闂存鐨勬墍鏈夋暟鎹�
+ * @param锛氱偣鍑烩�樻煡鐪嬭鎯呪�欑殑璇ヨ鎵�鏈夊瓧娈垫暟鎹�
+ * @createTime:2023-08-18
+ */
+ showDialog(row) {
+ // 鎵撳紑瀵硅瘽妗�
+ this.dialogTableVisible = true
+
+ // 淇濆瓨褰撳墠琛屾暟鎹�
+ this.tableCurrentRowData = row
+
+ // 鑾峰彇褰撳墠琛岀殑绱㈠紩
+ this.selectedRowIndex = this.displayData.indexOf(row)
+
+ //鏍规嵁褰撳墠琛岀殑缂栧彿锛岃捣濮嬫椂闂存潵 璇锋眰寮傚父鏁版嵁
+ // 瀵硅姹傚埌鐨勬暟鎹繘琛岄灏炬嫾鎺�
+ // 寰楀埌鍓嶅悗瀹屾暣鏁版嵁杩涜缁樺埗鍥惧舰
+ this.loading.lineChart = true
+ let params = {}
+ if (row.name) {
+ params['siteName'] = row.name
+ }
+ if (row.beginTime) {
+ params['beginTime'] = row.beginTime
+ }
+ if (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.timeAndDataProcessed()
+ })
+ },
+ /**
+ * description锛氭潯浠舵煡璇㈠紓甯哥殑鏁版嵁
+ * @createTime:2023-08-18
+ */
+ handleSubmit() {
+ if (this.isExceedOneMonth(this.beginTime, this.endTime)) {
+ 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
+ if (this.siteName) {
+ params['siteName'] = this.siteName
+ }
+ if (this.form.exceptionName.length != 0) {
+ params['exceptionType'] = this.form.exceptionName.join()
+ }
+ 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.isTableShow = false
+ return
+ }
+ this.isTableShow = true
+ this.total = response.data.data.total
+ // 绉婚櫎绌烘暟鎹姸鎬�
+ })
+ },
+
+ /**
+ * description锛氭墦寮�椤甸潰榛樿鍔犺浇鏈�杩戜竴鍛ㄧ殑寮傚父鏁版嵁
+ * @createTime:2023-08-18
+ */
+ backExceptionDataAWeekAgo() {
+ this.loading.tableLoading = true
+ let params = {}
+ if (this.siteName) {
+ params['siteName'] = this.siteName
+ }
+ if (this.form.exceptionName) {
+ params['exceptionType'] = this.form.exceptionName
+ }
+ 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.tableLoading = false
+ if (response.data.data.total == 0) {
+ ElMessage('璇ユ椂娈垫棤鏁版嵁')
+ this.isTableShow = false
+ return
+ }
+ this.isTableShow = true
+ this.total = response.data.data.total
+ })
+ },
+
+ /**
+ * description锛氬皢涓浗鏍囧噯鏃堕棿杞负鎸囧畾鏍煎紡(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�)
+ * @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')
+ },
+
+ // 鍔熻兘锛氳〃鏍奸珮搴︽牴鎹唴瀹硅嚜閫傚簲
+ 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
+ // 鍏朵腑涓�涓�40鏄洅瀛愮殑鎬诲杈硅窛
+ this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - ${h3}px - ${h4}px - 40px - var(--el-main-padding) * 2)`
+ },
+
+ // 椤靛ぇ灏忔敼鍙樻椂瑙﹀彂
+ handleSizeChange(val) {
+ this.pageSize = val
+
+ // 鏀瑰彉姣忛〉鏄剧ず鏁扮洰鏃惰烦鍒板綋鍓嶉〉
+ this.handleCurrentChange(1)
+ },
+
+ // 椤靛彿鏀瑰彉鏃惰Е鍙�
+ /**
+ * description锛氶〉鍙锋敼鍙樻椂瑙﹀彂
+ * @param锛� 褰撳墠椤碉紝鏍囪浣嶏紙0浠ｈ〃鏄偣鍑烩�樻煡璇⑩�欒Е鍙戠殑锛�1浠ｈ〃鏃剁偣鍑诲紓甯哥珯鐐规枃鏈寜閽Е鍙戠殑锛�
+ * @createTime:2023-08-17
+ * @returns锛�
+ */
+ handleCurrentChange(val) {
+ // 灏嗗綋鍓嶉〉鍙风粰currentPage
+ 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
+
+ this.displayData = this.tableData.slice(startIndex, endIndex)
+ }
+ },
+ // 琛ㄦ牸搴忓彿閫掑
+ indexMethod1(index) {
+ return index + 1 + (this.currentPage - 1) * this.pageSize
+ },
+ // 琛ㄦ牸搴忓彿閫掑
+ indexMethod2(index) {
+ return index + 1
+ }
+ }
+}
+</script>
+
+<template>
+ <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>
+ <span class="site-text"> 鐐逛綅鍚嶇О:</span>
+ <span> {{this.siteName}}</span>
+ </el-form-item>
+
+ <el-form-item>
+ <TimeShortCuts timeType="day" @submit-time="giveTime" :beginAndEndTime="[form.beginTime,form.endTime]"></TimeShortCuts>
+ </el-form-item>
+
+ <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>
+ </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 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>{{ tableCurrentRowData.beginTime }} ~
+ {{ tableCurrentRowData.endTime }}
+ </div>
+ </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="TSP(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' ||
+ 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>
+.el-row {
+ margin-left: 10px;
+}
+
+/* 鏉′欢鏌ヨ妯″潡鐨勬牱寮� */
+.el-form {
+ margin: 10px;
+}
+img {
+ margin-right: 5px;
+}
+.head-container-search {
+ float: right;
+}
+
+.head-describtion-text {
+ justify-content: flex-end;
+ 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 {
+ margin-left: 5px;
+ font-size: 18px;
+ font-weight: bold;
+}
+.card-content-unnormal {
+ min-height: 200px;
+ border: 2px solid #ffcf8b;
+ border-radius: 20px;
+}
+.card-content-normal {
+ min-height: 200px;
+ border: 2px solid red;
+ border-radius: 20px;
+}
+
+.card-header-text {
+ font-size: 16px;
+ font-weight: bold;
+ margin-top: 4px;
+ margin-left: 4px;
+}
+.card-content-text {
+ white-space: nowrap;
+}
+.card-exceptionname-text1 {
+ /* 寮傚父绔欑偣鍗犳瘮 */
+ font-size: 14px;
+ white-space: nowrap;
+}
+
+.card-exceptionname-text2 {
+ /* 寮傚父鏁板崰姣旂殑澶栬竟璺� */
+ 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;
+}
+/* 琛ㄦ牸妯″潡缁撴潫 */
+
+/* 鏌ョ湅璇︽儏瀵硅瘽妗嗘ā鍧楃殑鏍峰紡 */
+
+.diag-head {
+ /* 瀵硅瘽妗嗗ご閮ㄥ尯鍩� */
+ min-height: 200px;
+}
+.diag-head-text1 {
+ /* 瀵硅瘽妗嗗ご閮ㄧ殑灞炴�у瓧娈靛姞绮� */
+ font-weight: bold;
+}
+
+.diag-head-text > div {
+ /* 瀵硅瘽妗嗗紓甯告椂闂存 */
+ margin-top: 15px;
+}
+.diag-head-text {
+ margin: 10px;
+ padding: 10px;
+ background: linear-gradient(90deg, #00c9ff 0%, #92fe9d 100%);
+ border: 2px solid #7bc0fc;
+}
+.chart-jump-button {
+ display: flex;
+ justify-content: right;
+}
+
+.mx-1 {
+ position: absolute;
+ left: 10px;
+ bottom: 10px;
+}
+.site-text{
+ color: #333333;
+ font-weight: bold;
+ font-size: 14px;
+ margin-right: 10px;
+}
+/* 鏌ョ湅璇︽儏瀵硅瘽妗嗘ā鍧楃粨鏉� */
+</style>
diff --git a/src/views/risk_assessment/DataIndexRank.vue b/src/views/risk_assessment/DataIndexRank.vue
new file mode 100644
index 0000000..ab31486
--- /dev/null
+++ b/src/views/risk_assessment/DataIndexRank.vue
@@ -0,0 +1,284 @@
+<script>
+import TimeShortCuts from '@/sfc/TimeShortCuts.vue'
+import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
+import { useCommonFunction } from '../../utils/common.js'
+import requetsApi from '@/api/exportExcel/requetsApi.js'
+import dayjs from 'dayjs'
+import ButtonExportExcel from '@/sfc/ButtonExportExcel.vue'
+import ButtonClick from '@/sfc/ButtonClick.vue'
+
+export default {
+ components: {
+ TimeShortCuts,
+ AreaAndmonitorType,
+ ButtonExportExcel,
+ ButtonClick
+ },
+ data() {
+ return {
+ // 褰撳墠椤�
+ currentPage: 1,
+ // 姣忛〉鏉℃暟
+ pageSize: 20,
+ total: 0,
+ // 琛ㄦ牸鏁版嵁
+ tableData: [],
+ isNoData: true,
+ loading: false,
+ // 缁熻鍒嗘瀽鎸夐挳鍔犺浇涓�
+ queryButton: false,
+ // 瀵煎嚭鎸夐挳鍔犺浇涓�
+ exportButton: false,
+ form: {
+ // 寮�濮嬫椂闂�
+ beginTime: '',
+ // 缁撴潫鏃堕棿
+ endTime: ''
+ },
+ tableHeight: '600'
+ }
+ },
+ setup() {
+ // 寮曞叆 鐧惧垎鍙锋瘮杈冨ぇ灏� 瀵煎嚭鍔熻兘
+ const { cmpp, exportToExcel } = useCommonFunction()
+ return { cmpp, exportToExcel }
+ },
+
+ mounted() {
+ this.fetchData()
+ this.calTableHeight()
+ },
+ methods: {
+ // 鍔熻兘锛氬鍑轰负Excel
+ exportData() {
+ let params = {
+ beginTime: this.form.beginTime,
+ endTime: this.form.endTime
+ }
+ this.exportButton = true
+ requetsApi.fetchAllData(params).then((res) => {
+ const data = res.data.data
+
+ const tableColumns = [
+ 'name',
+ 'mnCode',
+ 'lst',
+ 'dayAvg',
+ 'min',
+ 'max',
+ 'dayOnline',
+ 'dayValid',
+ 'dayExceeding'
+ ]
+ const excelColumns = [
+ ['A1', '绔欑偣鍚嶇О'],
+ ['B1', '璁惧缂栧彿'],
+ ['C1', '鐩戞祴鏃ユ湡'],
+ ['D1', '骞冲潎鍊�'],
+ ['E1', '鏈�灏忓��'],
+ ['F1', '鏈�澶у��'],
+ ['G1', '鍦ㄧ嚎鐜�'],
+ ['H1', '鏈夋晥鐜�'],
+ ['I1', '瓒呮爣鐜�']
+ ]
+ this.exportToExcel(data, tableColumns, excelColumns, '鍒嗘瀽琛�.xlsx')
+ this.exportButton = false
+ })
+ },
+
+ // 鍔熻兘锛氭敼鍙樿〃鏍兼煇涓崟鍏冩牸鐨勯鑹�
+ tableCellClassName({ row, columnIndex }) {
+ // 骞冲潎鍊间笉婊¤冻鏍囧噯鏃�
+ if (columnIndex == 4) {
+ if (row.dayAvg >= 0.8) {
+ return 'warning-row'
+ }
+ }
+
+ // 鍦ㄧ嚎鐜囷紝鏈夋晥鐜� 涓嶆弧瓒虫爣鍑嗘椂 鍙橀鑹�
+ if (columnIndex == 7) {
+ if (!this.cmpp(row.dayOnline, '90%')) {
+ return 'red-color'
+ }
+ }
+ if (columnIndex == 8) {
+ if (!this.cmpp(row.dayValid, '90%')) {
+ return 'red-color'
+ }
+ }
+ },
+
+ // 鍔熻兘锛氳〃鏍奸珮搴︽牴鎹唴瀹硅嚜閫傚簲
+ calTableHeight() {
+ const h1 = this.$refs.h1.$el.offsetHeight
+ const h2 = this.$refs.h2.$el.offsetHeight;
+ // 鍏朵腑涓�涓�40鏄洅瀛愮殑鎬诲杈硅窛
+ this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - 40px - 120px - var(--el-main-padding) * 2`;
+ },
+ // 椤靛ぇ灏忔敼鍙樻椂瑙﹀彂
+ handleSizeChange(val) {
+ this.pageSize = val
+
+ // 鏀瑰彉姣忛〉鏄剧ず鏁扮洰鏃惰烦鍒板綋鍓嶉〉
+ this.handleCurrentChange(1)
+ },
+
+ // 椤靛彿鏀瑰彉鏃惰Е鍙�
+ handleCurrentChange(val) {
+ // 灏嗗綋鍓嶉〉鍙风粰currentPage
+ this.currentPage = val
+
+ // 椤甸潰鍙樺寲鏃惰皟鐢� 鏌ヨ鏁版嵁鍑芥暟
+ this.fetchData()
+ },
+ //搴忓彿閫掑
+ indexMethod(index) {
+ return index + 1 + (this.currentPage - 1) * this.pageSize
+ },
+
+ giveTime(val) {
+ //灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�)
+ this.form.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss')
+ this.form.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss')
+ },
+
+ // 鐐瑰嚮缁熻鎸夐挳
+ fetchData() {
+ let params = {}
+ params['page'] = this.currentPage
+ params['pageSize'] = this.pageSize
+ params['siteName'] = ''
+ if (this.form.beginTime) {
+ params['beginTime'] = this.form.beginTime
+ }
+ if (this.form.endTime) {
+ params['endTime'] = this.form.endTime
+ }
+ this.loading = true
+ this.queryButton = true
+ this.isNoData = false
+ this.$http.get('/dust/analysistime', { params: params }).then((response) => {
+ this.tableData = response.data.data.rows
+ this.loading = false
+ this.queryButton = false
+ if (response.data.data.total == 0) {
+ this.isNoData = true
+ return
+ }
+ // 绉婚櫎绌烘暟鎹姸鎬�
+ this.isNoData = false
+ this.total = response.data.data.total
+ })
+ },
+ openDetail(row) {
+ const encodedSiteName = encodeURIComponent(row.siteName)
+ let titleName = '绔欑偣椋庨櫓鏁版嵁璇︽儏'
+ this.$router.push(`/detail/${encodedSiteName}/${this.form.month}/${titleName}`)
+ }
+ }
+}
+</script>
+
+<template>
+ <el-form :inline="true" :model="form" ref="h1">
+ <el-form-item>
+ <AreaAndmonitorType></AreaAndmonitorType>
+ </el-form-item>
+
+ <el-form-item>
+ <TimeShortCuts timeType="currentMonth" @submit-time="giveTime"></TimeShortCuts>
+ </el-form-item>
+
+ <el-form-item>
+ <ButtonClick
+ style="margin-right: 12px"
+ content="鏁版嵁鎺掑悕"
+ type="primary"
+ :loading="queryButton"
+ @do-search="fetchData"
+ ></ButtonClick>
+ <ButtonExportExcel
+ content="瀵煎嚭鏁版嵁"
+ type="success"
+ :loading="exportButton"
+ @do-export="exportData"
+ ></ButtonExportExcel>
+ </el-form-item>
+ </el-form>
+
+ <el-card v-show="!isNoData">
+ <el-table
+ :data="tableData"
+ :height="tableHeight"
+ style="width: 100%"
+ v-loading="loading"
+ :cell-class-name="tableCellClassName"
+ >
+ <el-table-column
+ type="index"
+ prop="name"
+ label="搴忓彿"
+ :index="indexMethod"
+ fixed
+ show-overflow-tooltip
+ />
+ <el-table-column prop="name" label="鐐逛綅鍚嶇О" show-overflow-tooltip width="300">
+ <template #default="{ row }">
+ <el-button type="primary" text @click="openDetail(row)">
+ <span class="rank-site">{{row.name
+ }}</span></el-button>
+ </template>
+ </el-table-column>
+
+ <el-table-column prop="mnCode" label="璁惧缂栫爜" show-overflow-tooltip />
+
+ <el-table-column prop="lst" label="鐩戞祴鏃ユ湡" sortable show-overflow-tooltip />
+
+ <el-table-column prop="dayAvg" label="鏃ュ钩鍧囧��" sortable show-overflow-tooltip />
+ <el-table-column prop="min" label="鏃ユ渶灏忓��" sortable show-overflow-tooltip />
+ <el-table-column prop="max" label="鏃ユ渶澶у��" sortable show-overflow-tooltip />
+
+ <el-table-column prop="dayOnline" label="鏃ュ湪绾跨巼" sortable show-overflow-tooltip />
+
+ <el-table-column prop="dayValid" label="鏃ユ湁鏁堢巼" sortable show-overflow-tooltip />
+
+ <el-table-column prop="dayExceeding" label="鏃ヨ秴鏍囩巼" sortable show-overflow-tooltip />
+ </el-table>
+
+ <el-pagination
+ ref="h2"
+ :page-sizes="[10, 20, 50, 100]"
+ :total="total"
+ layout="total,sizes, prev, pager, next, jumper"
+ v-model:current-page="currentPage"
+ v-model:page-size="pageSize"
+ @update:current-page="handleCurrentChange"
+ @update:page-size="handleSizeChange"
+ />
+ </el-card>
+ <el-empty v-show="isNoData" :image-size="200" />
+</template>
+
+<style scoped>
+.el-form {
+ margin: 20px;
+}
+.el-card {
+ margin: 20px 20px 0px 20px;
+}
+:deep().el-table__row .warning-row {
+ background-color: #f7ba1e;
+}
+:deep().el-table__row .red-color {
+ background-color: red;
+}
+.el-table {
+ color: #333333;
+}
+.rank-site {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ width: 240px;
+}
+</style>
diff --git a/src/views/risk_assessment/DataRiskModel.vue b/src/views/risk_assessment/DataRiskModel.vue
index d0bd569..5f1d32c 100644
--- a/src/views/risk_assessment/DataRiskModel.vue
+++ b/src/views/risk_assessment/DataRiskModel.vue
@@ -76,7 +76,21 @@
// 鏃犳暟鎹厤缃椂闂存
areaColor: [],
// 鏌愮珯鐐圭殑鍩烘湰淇℃伅
- siteInfo:{}
+ siteInfo: {},
+
+ // 寮傚父椋庨櫓鐨勫��
+ exceptionRisk: {
+ // 鍦ㄧ嚎鐜囬闄�
+ onlineRisk: '',
+ // 鏈夋晥鐜囬闄�
+ validRisk: '',
+ // 瓒呮爣椋庨櫓
+ exceedRisk: '',
+ // 寮傚父绫诲瀷鑱氶泦搴�
+ exceptionTypeAggregation: '',
+ // 鍏稿瀷寮傚父澶嶇幇鐜�
+ typicalExceptionRepetitionRate:''
+ }
}
},
mounted() {
@@ -91,6 +105,9 @@
},
methods: {
+
+
+
// 鏌ヨ绔欑偣缁熻淇℃伅
async querySiteStaticsInfo(row) {
this.form.name = row.siteName
@@ -130,7 +147,7 @@
// 鏃ョ粺璁℃暟鎹�
this.fetchDayAnalysisData()
// 寮傚父鏁版嵁
- this.fetchExceptionAnalysisData()
+ // this.fetchExceptionAnalysisData()
},
findObjectByPropertyValue(array, property, value) {
@@ -161,11 +178,24 @@
},
- // 璁＄畻椋庨櫓鍊�
+
+ /**
+ * 寰楀埌鏁版嵁椋庨櫓鍊� 锛屽苟璁＄畻椋庨櫓鍊�
+ * @param锛�
+ * @returns锛�
+ */
calRiskValue() {
- console.log('璁惧缂栫爜锛�',this.form.number)
riskApi.queryRiskValue(this.form.number, this.month, 'month').then((response) => {
- this.weight = riskValue.calRiskValue(response.data.data[0]).toFixed(2)
+
+
+ const riskValue = response.data.data[0]
+ this.exceptionRisk.onlineRisk = riskValue.onlineRisk
+ this.exceptionRisk.validRisk = riskValue.validRisk
+ this.exceptionRisk.exceedRisk = riskValue.exceedRisk
+ this.exceptionRisk.exceptionTypeAggregation = riskValue.exceptionTypeAggregation
+ this.exceptionRisk.typicalExceptionRepetitionRate = riskValue.typicalExceptionRepetitionRate
+
+ this.weight = riskValue.calRiskValue(riskValue).toFixed(2)
})
},
@@ -206,6 +236,8 @@
// 鏃犳暟鎹厤缃椂闂存
this.areaColor = lineChart.getMarkArea(noDataTimeInteval)
this.setChart()
+
+
// 鎶樼嚎鍥炬暟鎹�
let temp = index.calBillData(this.chartData, begin, end)
this.bill.min = temp['min']
@@ -338,43 +370,21 @@
</el-form-item>
</el-form>
- <!-- <el-card class="site-info time-text" >
- <span>{{form.name}}</span>
- <br/>
- <br/>
- <span>鏁版嵁缁熻鏃舵锛歿{ form.beginTime }} ~ {{ form.endTime }}</span>
- <el-tag class="mx-1" >鍦烘櫙</el-tag>{{siteInfo.typename}}
- <el-tag class="mx-1">杩愮淮鍟�</el-tag>{{siteInfo.dutyCompany}}
- <el-button type="primary" size="small" class="exception-button" @click="openDetail()">
- 寮傚父璇︽儏
- </el-button>
- </el-card> -->
<div v-loading="screenLoading" class="wait-name">
<div class="chart-container" v-show="!isNoData && !screenLoading">
- <!-- <div class="time-text">
- <span>鏁版嵁缁熻鏃舵锛歿{ form.beginTime }} ~ {{ form.endTime }}</span>
- <span class="site-name">
- <el-button type="primary" text class="exception-button" @click="openDetail()">
- 寮傚父璇︽儏
- </el-button>
-
- </span>
- <el-tag class="mx-1" >鍦烘櫙</el-tag>{{siteInfo.typename}}
- <el-tag class="mx-2">杩愮淮鍟�</el-tag>{{siteInfo.dutyCompany}}
- </div> -->
<el-card class="time-text" >
- <span>{{form.name}}</span>
+ <h4>{{form.name}}</h4>
<br/>
<br/>
<span>鏁版嵁缁熻鏃舵锛歿{ form.beginTime }} ~ {{ form.endTime }}</span>
<el-tag class="mx-1" >鍦烘櫙</el-tag>{{siteInfo.typename}}
<el-tag class="mx-1">杩愮淮鍟�</el-tag>{{siteInfo.dutyCompany}}
- <el-button type="primary" size="small" class="exception-button" @click="openDetail">
- 寮傚父璇︽儏
+ <el-button type="primary" size="default" class="exception-button" @click="openDetail">
+ 鏁版嵁寮傚父璇︽儏
</el-button>
</el-card>
@@ -439,13 +449,7 @@
'瓒呮爣寮傚父椋庨櫓',
'鏁版嵁鍦ㄧ嚎椋庨櫓'
]"
- :yData="[
- bill.valid,
- bill.exceptionRecurrence,
- bill.exceptionTypeAggregation,
- bill.exceeding,
- bill.online
- ]"
+ :yData="exceptionRisk"
></DustRadarChart>
</el-card>
</el-col>
@@ -537,20 +541,6 @@
<el-col :span="12">
<el-card shadow="never" class="card-value">
<LineChart
- title="鏃ュ湪绾跨巼"
- :chartData="chartData2"
- yName="%"
- seriesName="鏃ュ湪绾跨巼"
- :areaColor="areaColor"
- >
- </LineChart>
- </el-card>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-card shadow="never" class="card-value">
- <LineChart
title="鏃ユ湁鏁堢巼"
:chartData="chartData3"
yName="%"
@@ -560,20 +550,10 @@
</LineChart>
</el-card>
</el-col>
-
- <el-col :span="12">
- <el-card shadow="never" class="card-value">
- <LineChart
- title="鏃ヨ秴鏍囩巼"
- :chartData="chartData4"
- yName="%"
- seriesName="鏃ヨ秴鏍囩巼"
- :areaColor="areaColor"
- >
- </LineChart>
- </el-card>
- </el-col>
</el-row>
+
+
+
</div>
</div>
<el-empty description="鏆傛棤鏁版嵁" v-show="isNoData" :image-size="200" />
diff --git a/src/views/risk_assessment/DataRiskRank.vue b/src/views/risk_assessment/DataRiskRank.vue
index cfc8990..7943643 100644
--- a/src/views/risk_assessment/DataRiskRank.vue
+++ b/src/views/risk_assessment/DataRiskRank.vue
@@ -1,26 +1,22 @@
<script>
-import TimeShortCuts from '@/sfc/TimeShortCuts.vue'
import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
import { useCommonFunction } from '../../utils/common.js'
-import requetsApi from '@/api/exportExcel/requetsApi.js'
import dayjs from 'dayjs'
import ButtonExportExcel from '@/sfc/ButtonExportExcel.vue'
import ButtonClick from '@/sfc/ButtonClick.vue'
-
+import { ElMessage } from 'element-plus'
+import MonthSelect from '@/sfc/MonthSelect.vue'
+import riskApi from '@/api/risk/riskApi.js'
+import riskValue from '@/utils/risk_estimate_common_function/riskValue.js'
export default {
components: {
- TimeShortCuts,
AreaAndmonitorType,
ButtonExportExcel,
- ButtonClick
+ ButtonClick,
+ MonthSelect
},
data() {
return {
- // 褰撳墠椤�
- currentPage: 1,
- // 姣忛〉鏉℃暟
- pageSize: 20,
- total: 0,
// 琛ㄦ牸鏁版嵁
tableData: [],
isNoData: true,
@@ -30,238 +26,346 @@
// 瀵煎嚭鎸夐挳鍔犺浇涓�
exportButton: false,
form: {
+ // 绔欑偣鍚嶇О
+ name: '',
// 寮�濮嬫椂闂�
beginTime: '',
- // 缁撴潫鏃堕棿
- endTime: ''
+ // // 缁撴潫鏃堕棿
+ endTime: '',
+
+ // 閫夋嫨鐨勬湀浠�
+ month: ''
},
- tableHeight: '600'
+ bill: {
+ min: '',
+ max: '',
+ avg: '',
+ online: '',
+ valid: '',
+ exceeding: '',
+
+ // 鍏稿瀷寮傚父澶嶇幇鐜�
+ exceptionRecurrence: '',
+ // 寮傚父绫诲瀷鎹仛闆嗗害
+ exceptionTypeAggregation: ''
+ },
+
+ // 琛ㄦ牸鏁版嵁
+ table: [],
+ // 琛ㄦ牸楂樺害
+ tableHeight: 600,
+ currentRow: []
}
},
setup() {
// 寮曞叆 鐧惧垎鍙锋瘮杈冨ぇ灏� 瀵煎嚭鍔熻兘
- const { cmpp, exportToExcel } = useCommonFunction()
- return { cmpp, exportToExcel }
+ const { exportToExcel } = useCommonFunction()
+ return { exportToExcel }
},
-
+ computed: {
+ // 璁＄畻楂樹腑浣庣珯鐐规暟閲�
+ riskGradeNum() {
+ let riskGrade = {}
+ if (this.table) {
+ let highRisk = 0
+ let middleRisk = 0
+ let lowRisk = 0
+ this.table.forEach((item) => {
+ switch (item.riskGrade) {
+ case '楂橀闄�':
+ highRisk++
+ break
+ case '涓闄�':
+ middleRisk++
+ break
+ case '浣庨闄�':
+ lowRisk++
+ break
+ }
+ })
+ riskGrade.high = highRisk
+ riskGrade.middle = middleRisk
+ riskGrade.low = lowRisk
+ }
+ return riskGrade
+ },
+ // 楂樹腑浣庨闄╂瘮渚�
+ riskGradeRate() {
+ let rate = {
+ high:0,
+ middle:0,
+ low:0
+ }
+ if (this.table.length !=0 ) {
+ let num = this.table.length
+ let highGrade = ((this.riskGradeNum.high / num)*100).toFixed(2)
+ let middleGrade = ((this.riskGradeNum.middle / num)*100).toFixed(2)
+ let lowGrade = ((this.riskGradeNum.low / num)*100).toFixed(2)
+ rate.high = highGrade
+ rate.middle = middleGrade
+ rate.low = lowGrade
+ }
+ return rate
+ }
+ },
mounted() {
- this.fetchData()
+ //
+ this.fetch()
this.calTableHeight()
},
methods: {
- // 鍔熻兘锛氬鍑轰负Excel
- exportData() {
- let params = {
- beginTime: this.form.beginTime,
- endTime: this.form.endTime
- }
- this.exportButton = true
- requetsApi.fetchAllData(params).then((res) => {
- const data = res.data.data
-
- const tableColumns = [
- 'name',
- 'mnCode',
- 'lst',
- 'dayAvg',
- 'min',
- 'max',
- 'dayOnline',
- 'dayValid',
- 'dayExceeding'
- ]
- const excelColumns = [
- ['A1', '绔欑偣鍚嶇О'],
- ['B1', '璁惧缂栧彿'],
- ['C1', '鐩戞祴鏃ユ湡'],
- ['D1', '骞冲潎鍊�'],
- ['E1', '鏈�灏忓��'],
- ['F1', '鏈�澶у��'],
- ['G1', '鍦ㄧ嚎鐜�'],
- ['H1', '鏈夋晥鐜�'],
- ['I1', '瓒呮爣鐜�']
- ]
- this.exportToExcel(data, tableColumns, excelColumns, '鍒嗘瀽琛�.xlsx')
- this.exportButton = false
- })
+ /**
+ * 灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�
+ * @param锛�
+ * @returns锛�
+ */
+ giveMonth(val) {
+ //灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�)
+ this.form.month = dayjs(val).format('YYYY-MM-DD')
+ // 鍚屾椂鏇存柊寮�濮嬪拰缁撴潫鏃堕棿
+ this.form.beginTime = dayjs(this.form.month).startOf().format('YYYY-MM-DD HH:mm:ss')
+ this.form.endTime = dayjs(this.form.month).endOf('month').format('YYYY-MM-DD HH:mm:ss')
+ console.log(this.form.beginTime, this.form.endTime)
},
// 鍔熻兘锛氭敼鍙樿〃鏍兼煇涓崟鍏冩牸鐨勯鑹�
tableCellClassName({ row, columnIndex }) {
// 骞冲潎鍊间笉婊¤冻鏍囧噯鏃�
if (columnIndex == 4) {
- if (row.dayAvg >= 0.8) {
+ if (row.riskValue >= 0.8) {
return 'warning-row'
}
}
-
- // 鍦ㄧ嚎鐜囷紝鏈夋晥鐜� 涓嶆弧瓒虫爣鍑嗘椂 鍙橀鑹�
- if (columnIndex == 7) {
- if (!this.cmpp(row.dayOnline, '90%')) {
- return 'red-color'
- }
- }
- if (columnIndex == 8) {
- if (!this.cmpp(row.dayValid, '90%')) {
- return 'red-color'
- }
- }
},
-
// 鍔熻兘锛氳〃鏍奸珮搴︽牴鎹唴瀹硅嚜閫傚簲
calTableHeight() {
const h1 = this.$refs.h1.$el.offsetHeight
- const h2 = this.$refs.h2.$el.offsetHeight;
// 鍏朵腑涓�涓�40鏄洅瀛愮殑鎬诲杈硅窛
- this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - 40px - 120px - var(--el-main-padding) * 2`;
- },
- // 椤靛ぇ灏忔敼鍙樻椂瑙﹀彂
- handleSizeChange(val) {
- this.pageSize = val
-
- // 鏀瑰彉姣忛〉鏄剧ず鏁扮洰鏃惰烦鍒板綋鍓嶉〉
- this.handleCurrentChange(1)
+ this.tableHeight = `calc(100vh - ${h1}px - 40px - 40px - var(--el-main-padding) * 2`
},
- // 椤靛彿鏀瑰彉鏃惰Е鍙�
- handleCurrentChange(val) {
- // 灏嗗綋鍓嶉〉鍙风粰currentPage
- this.currentPage = val
-
- // 椤甸潰鍙樺寲鏃惰皟鐢� 鏌ヨ鏁版嵁鍑芥暟
- this.fetchData()
- },
- //搴忓彿閫掑
- indexMethod(index) {
- return index + 1 + (this.currentPage - 1) * this.pageSize
- },
-
- giveTime(val) {
- //灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�)
- this.form.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss')
- this.form.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss')
- },
-
- // 鐐瑰嚮缁熻鎸夐挳
+ // 鐐瑰嚮椋庨櫓鎺掑悕鎸夐挳
fetchData() {
- let params = {}
- params['page'] = this.currentPage
- params['pageSize'] = this.pageSize
- params['siteName'] = ''
- if (this.form.beginTime) {
- params['beginTime'] = this.form.beginTime
- }
- if (this.form.endTime) {
- params['endTime'] = this.form.endTime
- }
this.loading = true
this.queryButton = true
- this.isNoData = false
- this.$http.get('/dust/analysistime', { params: params }).then((response) => {
- this.tableData = response.data.data.rows
- this.loading = false
- this.queryButton = false
- if (response.data.data.total == 0) {
+ riskApi.queryRiskValue('', this.form.month, 'month').then((response) => {
+ if (response.data.data.length == 0) {
this.isNoData = true
return
}
- // 绉婚櫎绌烘暟鎹姸鎬�
+
+ this.table = riskValue.backComprehensiveRiskTableData(response.data.data)
+ this.queryButton = false
this.isNoData = false
- this.total = response.data.data.total
+ this.loading = false
+ this.$nextTick(() => {
+ this.$refs.table.sort('riskValue', 'descending')
+ })
})
+ },
+
+ /**
+ * 鍒濆鍔犺浇鍑芥暟
+ */
+ fetch() {
+ // 鍒嗘瀽鏁版嵁
+ this.fetchData()
+ // 寮傚父鏁版嵁
+ // this.exceptiondataCount()
+ },
+
+ // 鍗曞厓鏍煎唴瀹规崲琛�
+ wrapIndex(index) {
+ return index.replace(/\n/g, '<br/>')
+ },
+
+ /**
+ * 瀵煎嚭涓篍xcel
+
+ */
+ exportData() {
+ if (this.table.length != 0) {
+ const tableColumns = [
+ 'siteName',
+ 'region',
+ 'monitorType',
+ 'riskValue',
+ 'riskGrage',
+ 'riskAdvice',
+ 'beginTime',
+ 'endTime'
+ ]
+ const excelColumns = [
+ ['A1', '绔欑偣鍚嶇О'],
+ ['B1', '鍖哄煙'],
+ ['C1', '鐩戞祴绫诲瀷'],
+ ['D1', '椋庨櫓鍊�'],
+ ['E1', '椋庨櫓绛夌骇'],
+ ['F1', '绠℃帶鎺柦'],
+ ['G1', '寮�濮嬫棩鏈�'],
+ ['H1', '缁撴潫鏃ユ湡']
+ ]
+ this.exportButton = true
+ this.exportToExcel(this.table, tableColumns, excelColumns, '缁煎悎椋庨櫓鎺掑悕.xlsx')
+ this.exportButton = false
+ } else {
+ ElMessage('鏃犳暟鎹渶瑕佸鍑�')
+ }
+ },
+ openDetail(row) {
+ const encodedSiteName = encodeURIComponent(row.siteName)
+ let titleName = '绔欑偣椋庨櫓鏁版嵁璇︽儏'
+ this.$router.push(`/detail/${encodedSiteName}/${this.form.month}/${titleName}`)
}
}
}
</script>
<template>
- <el-form :inline="true" :model="form" ref="h1">
- <el-form-item>
- <AreaAndmonitorType></AreaAndmonitorType>
- </el-form-item>
+ <el-row ref="h1">
+ <el-col :span="24">
+ <el-form :inline="true" :model="form">
+ <el-form-item>
+ <AreaAndmonitorType></AreaAndmonitorType>
+ </el-form-item>
- <el-form-item>
- <TimeShortCuts timeType="currentMonth" @submit-time="giveTime"></TimeShortCuts>
- </el-form-item>
+ <el-form-item>
+ <MonthSelect @submit-value="giveMonth"></MonthSelect>
+ </el-form-item>
- <el-form-item>
- <ButtonClick
- style="margin-right: 12px"
- content="鏁版嵁鎺掑悕"
- type="primary"
- :loading="queryButton"
- @do-search="fetchData"
- ></ButtonClick>
- <ButtonExportExcel
- content="瀵煎嚭鏁版嵁"
- type="success"
- :loading="exportButton"
- @do-export="exportData"
- ></ButtonExportExcel>
- </el-form-item>
- </el-form>
+ <el-form-item>
+ <ButtonClick
+ style="margin-right: 12px"
+ content="椋庨櫓鎺掑悕"
+ type="primary"
+ :loading="queryButton"
+ @do-search="fetch"
+ ></ButtonClick>
+ <ButtonExportExcel
+ content="瀵煎嚭鏁版嵁"
+ type="success"
+ :loading="exportButton"
+ @do-export="exportData"
+ ></ButtonExportExcel>
+ </el-form-item>
+ </el-form>
+ </el-col>
+ <el-col :span="24" class="tag">
- <el-card v-show="!isNoData">
- <el-table
- :data="tableData"
- :height="tableHeight"
- style="width: 100%"
- v-loading="loading"
- :cell-class-name="tableCellClassName"
- >
- <el-table-column
- type="index"
- prop="name"
- label="搴忓彿"
- :index="indexMethod"
- fixed
- show-overflow-tooltip
- />
- <el-table-column prop="name" label="鐐逛綅鍚嶇О" show-overflow-tooltip />
+ <el-tag type="primary"> 鍙傝瘎绔欑偣鏁�</el-tag><span class="analysis-info">{{ table.length }}</span>
+ <el-tag type="danger"> 楂橀闄╂暟</el-tag> <span class="analysis-info">{{ riskGradeNum.high }} ({{ riskGradeRate.high }}%)</span>
+ <el-tag type="warning"> 涓闄╂暟</el-tag> <span class="analysis-info">{{ riskGradeNum.middle }} ({{ riskGradeRate.middle }}%)</span>
+ <el-tag type="success"> 浣庨闄╂暟</el-tag> <span class="analysis-info">{{ riskGradeNum.low }} ({{ riskGradeRate.low }}%)</span>
- <el-table-column prop="mnCode" label="璁惧缂栫爜" show-overflow-tooltip />
- <el-table-column prop="lst" label="鐩戞祴鏃ユ湡" sortable show-overflow-tooltip />
+ </el-col>
+ </el-row>
- <el-table-column prop="dayAvg" label="鏃ュ钩鍧囧��" sortable show-overflow-tooltip />
- <el-table-column prop="min" label="鏃ユ渶灏忓��" sortable show-overflow-tooltip />
- <el-table-column prop="max" label="鏃ユ渶澶у��" sortable show-overflow-tooltip />
- <el-table-column prop="dayOnline" label="鏃ュ湪绾跨巼" sortable show-overflow-tooltip />
- <el-table-column prop="dayValid" label="鏃ユ湁鏁堢巼" sortable show-overflow-tooltip />
+ <el-table
+ ref="table"
+ :data="table"
+ :height="tableHeight"
+ v-loading="loading"
+ element-loading-text="鍚庡彴鍒嗘瀽涓�..."
+ style="width: 98%"
+ :cell-class-name="tableCellClassName"
+ :default-sort="{ prop: 'riskValue', order: 'descending' }"
+ v-show="!isNoData"
+ border
+ >
+ <el-table-column
+ type="index"
+ prop="name"
+ label="搴忓彿"
+ fixed
+ align="center"
+ width="55"
+ show-overflow-tooltip
+ />
+ <el-table-column prop="siteName" label="鐐逛綅鍚嶇О" align="center" show-overflow-tooltip>
+ <template #default="{ row }">
+ <el-button type="primary" text class="table-button" @click="openDetail(row)">{{
+ row.siteName
+ }}</el-button>
+ </template>
+ </el-table-column>
- <el-table-column prop="dayExceeding" label="鏃ヨ秴鏍囩巼" sortable show-overflow-tooltip />
- </el-table>
-
- <el-pagination
- ref="h2"
- :page-sizes="[10, 20, 50, 100]"
- :total="total"
- layout="total,sizes, prev, pager, next, jumper"
- v-model:current-page="currentPage"
- v-model:page-size="pageSize"
- @update:current-page="handleCurrentChange"
- @update:page-size="handleSizeChange"
- />
- </el-card>
- <el-empty v-show="isNoData" :image-size="200" />
+ <el-table-column prop="region" label="鍖哄幙" align="center" width="80" show-overflow-tooltip />
+ <el-table-column
+ prop="monitorType"
+ label="妫�娴嬬被鍨�"
+ align="center"
+ width="80"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="riskValue"
+ label="椋庨櫓鍊�"
+ sortable
+ align="center"
+ width="100"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="riskGrade"
+ label="椋庨櫓绛夌骇"
+ align="center"
+ width="100"
+ show-overflow-tooltip
+ />
+ <el-table-column prop="riskAdvice" label="绠℃帶鎺柦" show-overflow-tooltip>
+ <template #default="scope">
+ <div v-html="wrapIndex(scope.row.riskAdvice)"></div>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="beginTime"
+ label="鏃ユ湡"
+ sortable
+ align="center"
+ width="160"
+ show-overflow-tooltip
+ />
+ <!-- <el-table-column
+ prop="endTime"
+ label="缁撴潫鏃ユ湡"
+ sortable
+ align="center"
+ width="160"
+ show-overflow-tooltip
+ /> -->
+ </el-table>
+ <el-empty v-show="isNoData" :image-size="200" />
</template>
<style scoped>
-.el-form {
- margin: 20px;
+.el-row,
+.el-table {
+ margin: 10px 0px 0px 10px;
}
-.el-card {
- margin: 20px 20px 0px 20px;
-}
-:deep().el-table__row .warning-row {
- background-color: #f7ba1e;
-}
-:deep().el-table__row .red-color {
+
+:deep(.el-table__row .warning-row) {
background-color: red;
+ /* color: rgb(241, 236, 236); */
+}
+.table-button {
+ letter-spacing: 1px;
+ text-decoration: underline;
+ border-radius: 0px;
}
.el-table {
color: #333333;
}
+.analysis-info {
+ margin-right: 20px;
+}
+.tag{
+ margin: 10px 5px 5px 1px;
+}
+.el-tag {
+ font-size: 14px;
+ vertical-align: baseline;
+}
</style>
diff --git a/src/views/risk_assessment/components/DustRadarChart.vue b/src/views/risk_assessment/components/DustRadarChart.vue
index 1936eb3..1848330 100644
--- a/src/views/risk_assessment/components/DustRadarChart.vue
+++ b/src/views/risk_assessment/components/DustRadarChart.vue
@@ -14,9 +14,9 @@
},
// 鏁版嵁
yData: {
- type: Array,
+ type: Object,
default: () => {
- return [100,0,0,0,100];
+ return {};
}
}
},
@@ -26,8 +26,11 @@
};
},
watch: {
- yData() {
- this.set();
+ yData: {
+ handler() {
+ this.set()
+ },
+ deep:true
}
},
mounted() {
@@ -36,19 +39,19 @@
},
computed:{
valid(){
- return (100-this.yData[0]).toFixed(2)
+ return (this.yData.validRisk*100).toFixed(2)
},
exceptionRecurrence(){
- return this.yData[1]*100
+ return (this.yData.exceptionTypeAggregation*100).toFixed(2)
},
exceptionTypeAggregation(){
- return this.yData[2]*100
+ return (this.yData.exceptionTypeAggregation*100).toFixed(2)
},
exceeding(){
- return this.yData[3]
+ return (this.yData.exceedRisk*100).toFixed(2)
},
online(){
- return (100-this.yData[4]).toFixed(2)
+ return (this.yData.onlineRisk*100).toFixed(2)
}
},
methods: {
@@ -92,11 +95,11 @@
data: [
{
value: [
- (1 - this.yData[0]/100).toFixed(4),
- this.yData[1],
- this.yData[2],
- (this.yData[3]/100).toFixed(4),
- (1-this.yData[4]/100).toFixed(4)
+ this.yData.validRisk.toFixed(4),
+ this.yData.typicalExceptionRepetitionRate,
+ this.yData.exceptionTypeAggregation,
+ this.yData.exceedRisk.toFixed(4),
+ this.yData.onlineRisk.toFixed(4)
],
name: '寮傚父鍒嗘瀽'
diff --git a/src/views/risk_assessment/components/SiteDetail.vue b/src/views/risk_assessment/components/SiteDetail.vue
index 06f0cd4..aba9e90 100644
--- a/src/views/risk_assessment/components/SiteDetail.vue
+++ b/src/views/risk_assessment/components/SiteDetail.vue
@@ -1,6 +1,7 @@
<!--鐐瑰嚮绔欑偣 璺宠浆鑷抽闄╂ā鍨嬮〉闈� -->
<script>
import CompFlightInspection from '@/views/exception/components/CompFlightInspection.vue'
+
export default {
components: {
CompFlightInspection
--
Gitblit v1.9.3