| | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | /** |
| | | * |
| | | * @param {*} siteName |
| | |
| | | }, |
| | | |
| | | |
| | | |
| | | /** |
| | | * è·åææçç¹ä½åç§°å对åºç设å¤ç¼å· |
| | | * @paramï¼ |
| | | * @returnsï¼ |
| | | */ |
| | | getSitesNum() { |
| | | return $http.get('/dust/sitename') |
| | | }, |
| | |
| | | params.exceptionType = temp |
| | | } |
| | | return $http.get('/dust/exceptionsSiteName', { params: params }) |
| | | } |
| | | }, |
| | | |
| | | /** |
| | | * æ¥è¯¢ä¸åçå¼å¸¸ç±»å |
| | | * @paramï¼ |
| | | * @returnsï¼ |
| | | */ |
| | | queryExceptionType(){ |
| | | return $http.get('/dust/exceptiontype') |
| | | }, |
| | | |
| | | } |
| | |
| | | import axios from 'axios'; |
| | | import { setInterceptors } from './config'; |
| | | import axios from 'axios' |
| | | import { setInterceptors } from './config' |
| | | |
| | | // const url = 'http://localhost:8081/'; |
| | | // é¨ç½² |
| | | const url = 'http://114.215.109.124:8803/'; |
| | | // const url = 'http://192.168.1.8:8081/'; |
| | | // const url = 'http://192.168.0.123:8081/' |
| | | |
| | | //é£ç¾½ç管 |
| | | const $http = axios.create({ |
| | | baseURL: url, |
| | | timeout: 10000 |
| | | }); |
| | | |
| | | |
| | | }) |
| | | |
| | | /* Pythonåå° */ |
| | | const url_py = 'http://127.0.0.1:8089/' |
| | | const $http_py = axios.create({ |
| | | baseURL: url_py, |
| | | timeout: 10000 |
| | | }); |
| | | //æ·»å æ¦æªå¨ |
| | | setInterceptors($http,$http_py); |
| | | }) |
| | | |
| | | export { $http,$http_py}; |
| | | //æ·»å æ¦æªå¨ |
| | | setInterceptors($http, $http_py) |
| | | |
| | | export { $http, $http_py, url } |
¶Ô±ÈÐÂÎļþ |
| | |
| | | |
| | | |
| | | import {$http} from '@/api/index.js' |
| | | export default { |
| | | |
| | | /** |
| | | * æ ¹æ®è®¾å¤ç¼ç æ¥è¯¢è¯¥ç«ç¹ä¿¡æ¯ |
| | | */ |
| | | queryHistoryData() { |
| | | |
| | | // return $http.get('/dust/history1',{ params: params }) |
| | | } |
| | | |
| | | } |
| | |
| | | |
| | | import {$http} from '@/api/index.js' |
| | | export default { |
| | | |
| | | /** |
| | | * æ ¹æ®è®¾å¤ç¼ç æ¥è¯¢è¯¥ç«ç¹ä¿¡æ¯ |
| | | */ |
| | |
| | | params.mnCode = mnCode |
| | | return $http.get('/dust/siteInfo/info',{params:params}) |
| | | }, |
| | | |
| | | |
| | | /** |
| | | * æ¥è¯¢ææçè¿ç»´å |
| | | */ |
| | | queryDutyCompany() { |
| | | return $http.get('/dust/siteInfo/dutyCompany') |
| | | }, |
| | | |
| | | |
| | | /** |
| | | * æ ¹æ®å°åæ¥è¯¢è¡é |
| | | */ |
| | | queryStreet(street) { |
| | | return $http.get('/dust/siteInfo/street',{params:{street:street}}) |
| | | }, |
| | | |
| | | |
| | | /** |
| | | * è·åä¸åçå¼å¸¸ç±»å |
| | | */ |
| | | queryScenarioTypeName(){ |
| | | return $http.get('/dust/scenario') |
| | | }, |
| | | |
| | | /** |
| | | * æ ¹æ®ç¹ä½ååæ¥è¯¢å¯¹åºç设å¤ç¼å· |
| | | * @paramï¼ |
| | | * @returnsï¼ |
| | | */ |
| | | queryMnCode(siteName){ |
| | | return $http.get('/dust/siteInfo/mncode',{params:{siteName:siteName}}) |
| | | } |
| | | |
| | | } |
¶Ô±ÈÐÂÎļþ |
| | |
| | | import { $http } from '@/api/index.js' |
| | | export default { |
| | | |
| | | /** |
| | | * æç
§èªå®ä¹æåºè·åæ¥ç»è®¡æ°æ® |
| | | */ |
| | | fetchDayStatisticByOrder({ |
| | | page, |
| | | pageSize, |
| | | siteName = '', |
| | | beginTime = null, |
| | | endTime = null, |
| | | orderProp, |
| | | asc = true |
| | | }) { |
| | | let params = { |
| | | page: page, |
| | | pageSize: pageSize, |
| | | siteName: siteName, |
| | | beginTime: beginTime, |
| | | endTime: endTime, |
| | | orderProp: orderProp, |
| | | asc: asc |
| | | } |
| | | return $http.get('/dust/analysistime', { params: params }) |
| | | } |
| | | } |
| | |
| | | æ°æ®é£é©æ¨¡å |
| | | </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> |
| | | |
| | | |
| | |
| | | import 'element-plus/theme-chalk/src/index.scss' |
| | | import { createPinia } from 'pinia' |
| | | |
| | | import {url} from '@/api/index.js' |
| | | |
| | | const app = createApp(App) |
| | | const pinia = createPinia() |
| | | |
| | |
| | | }) |
| | | |
| | | |
| | | |
| | | // é¨ç½² |
| | | axios.defaults.baseURL = url |
| | | |
| | | |
| | | |
| | | // æ¬å° |
| | | // axios.defaults.baseURL = 'http://localhost:8081' |
| | | // é¨ç½² |
| | | axios.defaults.baseURL = 'http://114.215.109.124:8803' |
| | | |
| | | // axios.defaults.baseURL = 'http://192.168.1.8:8081' |
| | | app.config.globalProperties.$http = axios |
| | |
| | | component: () => import('@/views/risk_assessment/DataRiskModel.vue') |
| | | }, |
| | | |
| | | // æ°æ®é£é©æå |
| | | // æ°æ®ææ æå |
| | | { |
| | | 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') |
| | | }, |
| | | |
| | | // é£è¡å·¡æ£ |
| | |
| | | component: () => import('@/views/setting/SetConfiguration.vue') |
| | | }, |
| | | |
| | | // é£é©æ¨¡ååµå
¥è¿æ¸¡é¡µé¢ |
| | | { |
| | | path: '/detail/:siteName/:month/:titleName', |
| | | name: 'RiskModelDetail', |
| | | meta: { title: 'ç«ç¹å
·ä½ä¿¡æ¯', transition: 'slide-left' }, |
| | | component: () => import('@/views/risk_assessment/components/SiteDetail.vue') |
| | | }, |
| | | |
| | | // é£é©æ¨¡ååµå
¥ |
| | | { |
| | | path: '/subRiskModel', |
| | |
| | | meta: { title: 'é£é©æ¨¡ååµå
¥' }, |
| | | component: () => import('@/views/risk_assessment/components/SubRiskModel.vue') |
| | | }, |
| | | |
| | | |
| | | |
| | | |
| | | // å®¡æ ¸è¾
å©åµå
¥è¿æ¸¡é¡µé¢ |
| | | { |
| | | path: '/AuditDetail/:beginTime/:endTime/:exceptionType', |
| | |
| | | |
| | | // å¼å¸¸è¯¦æ
åµå
¥è¿æ¸¡é¡µé¢ |
| | | { |
| | | path: '/exceptionDetail/:siteName/:month/', |
| | | path: '/exceptionDetail/:siteName/:time/:timeType/:jumpPage', |
| | | name: 'exceptionDetail', |
| | | meta: { title: 'å¼å¸¸å
·ä½ä¿¡æ¯', transition: 'slide-left' }, |
| | | component: () => import('@/views/risk_assessment/components/SiteDetail.vue') |
| | |
| | | |
| | | // å¼å¸¸è¯¦æ
åµå
¥ |
| | | { |
| | | path: '/SubFlightInspection', |
| | | name: 'SubFlightInspection', |
| | | path: '/CompFlightInspection', |
| | | name: 'CompFlightInspection', |
| | | meta: { title: 'å¼å¸¸è¯¦æ
åµå
¥' }, |
| | | component: () => import('@/views/exception/components/SubFlightInspection.vue') |
| | | }, |
| | | component: () => import('@/views/exception/components/CompFlightInspection.vue') |
| | | } |
| | | ] |
| | | }, |
| | | |
| | |
| | | --> |
| | | |
| | | <script> |
| | | import exceptionApi from '@/api/exceptionApi.js' |
| | | export default { |
| | | props: { |
| | | // ç¦ç¨ |
| | |
| | | mounted() { |
| | | this.$watch(() => [this.exception], () => { |
| | | if (this.exception != -1) { |
| | | console.log('å¼å¸¸ç±»åï¼',this.exception) |
| | | this.checkedList.push(this.exception) |
| | | } |
| | | |
| | |
| | | methods: { |
| | | // è·åä¸åçå¼å¸¸åç§° |
| | | getExceptionType() { |
| | | this.$http.get('/dust/exceptiontype').then((response) => { |
| | | // this.exceptionType = response.data.data |
| | | response.data.data.forEach((item) => { |
| | | this.exceptionType.push(item.exceptionType) |
| | | }) |
| | | // console.log('è·åå°çå¼å¸¸ç±»åï¼',this.exceptionType); |
| | | // exceptionApi.queryExceptionType().then((response) => { |
| | | // response.data.data.forEach((item) => { |
| | | // this.exceptionType.push(item.exceptionType) |
| | | // }) |
| | | |
| | | // let a = ['0', '1', '2', '3', '4', '5', '6', '7','8'] |
| | | // a.forEach((item) => { |
| | | // if (this.exceptionType.indexOf(item) == -1) { |
| | | // this.exceptionType.push(item) |
| | | // } |
| | | // }) |
| | | // }) |
| | | |
| | | let a = ['0', '1', '2', '3', '4', '5', '6', '7','8'] |
| | | a.forEach((item) => { |
| | | if (this.exceptionType.indexOf(item) == -1) { |
| | | this.exceptionType.push(item) |
| | | } |
| | | }) |
| | | }) |
| | | }, |
| | | handleCheckAllChange(val) { |
| | | this.checkedList = val ? this.exceptionType : [] |
| | |
| | | }) |
| | | |
| | | }else if(this.isNeedRealTimeAdvice == '0'){ |
| | | this.$http.get('/dust/sitename').then((response) => { |
| | | exceptionApi.getSitesNum().then((response) => { |
| | | const sites = response.data.data |
| | | sites.filter((item) => { |
| | | this.siteNames.push(item['name']) |
| | |
| | | <ScenarioType @submitScenarioType="(val) => (scenarioType = val)"> </ScenarioType> |
| | | --> |
| | | <script> |
| | | import siteInfo from '@/api/site/siteInfo.js' |
| | | export default { |
| | | emits:['submitScenarioType'], |
| | | data() { |
| | |
| | | methods: { |
| | | //è·åä¸åçå¼å¸¸ç±»å |
| | | getScenarioTypeName() { |
| | | this.$http.get('/dust/scenario').then(result => { |
| | | siteInfo.queryScenarioTypeName().then(result => { |
| | | this.scenarioType = result.data.data |
| | | |
| | | }); |
| | | } |
| | | //æ ¹æ®å¼å¸¸ä¸ªæ°æ¸²æcheckbox |
| | |
| | | endIndex, |
| | | exceptionName, |
| | | areaObj, |
| | | lineColor, |
| | | exceptionType |
| | | ) { |
| | | switch (exceptionType) { |
| | |
| | | exceptionName |
| | | ) |
| | | case '8': |
| | | return this.validOption(xData, yData, exceptionName, areaObj) |
| | | console.log('ä¼ è¿æ¥',lineColor) |
| | | return this.validOption(xData, yData, exceptionName, areaObj,lineColor) |
| | | } |
| | | }, |
| | | |
| | |
| | | * @paramï¼ |
| | | * @returnsï¼ |
| | | */ |
| | | validOption(xData, yData, exceptionName, areaObj) { |
| | | validOption(xData, yData, exceptionName, areaObj,lineColor) { |
| | | return { |
| | | title: { |
| | | text: exceptionName, |
| | |
| | | toolbox: { |
| | | // å·¥å
·æ |
| | | feature: { |
| | | // dataZoom: { |
| | | // yAxisIndex: 'none' |
| | | // }, |
| | | // ä¿å为å¾ç |
| | | saveAsImage: {} |
| | | } |
| | |
| | | data: areaObj |
| | | } |
| | | } |
| | | ] |
| | | ], |
| | | // æå®æ¶é´åºé´ç线段åé¢è² |
| | | // visualMap: { |
| | | // show: false, |
| | | // dimension: 0, |
| | | |
| | | // // pieces: [ |
| | | // // { |
| | | // // lte: beginIndex, |
| | | // // color: 'green' |
| | | // // }, |
| | | // // { |
| | | // // gt: beginIndex, |
| | | // // lte: endIndex, |
| | | // // color: 'red' |
| | | // // }, |
| | | // // { |
| | | // // gt: endIndex, |
| | | // // lte: xData.length - 1, |
| | | // // color: 'green' |
| | | // // } |
| | | // // ], |
| | | |
| | | // pieces: lineColor |
| | | |
| | | // } |
| | | } |
| | | } |
| | | } |
| | |
| | | if (tempData) { |
| | | xData.push(tempData.lst) |
| | | yAvg.push(tempData.dayAvg) |
| | | yOnline.push(this.deleteLastStr(tempData.dayOnline)) |
| | | yValid.push(this.deleteLastStr(tempData.dayValid)) |
| | | yExceed.push(this.deleteLastStr(tempData.dayExceeding)) |
| | | |
| | | yOnline.push(tempData.dayOnline) |
| | | yValid.push(tempData.dayValid) |
| | | yExceed.push(tempData.dayExceeding) |
| | | continue |
| | | } |
| | | |
| | |
| | | * @paramï¼ 2ç»´æ°ç» |
| | | * @returnsï¼ |
| | | */ |
| | | getMarkArea(timeInteval,describe='æ æ°æ®') { |
| | | getMarkArea(timeInteval, describe = 'æ æ°æ®') { |
| | | let result = [] |
| | | for (let i = 0; i < timeInteval.length; i++) { |
| | | let temp = [] |
| | |
| | | */ |
| | | deleteLastStr(valueStr) { |
| | | return valueStr.slice(0, -1) |
| | | }, |
| | | |
| | | /** |
| | | * æå®æ¶é´åºé´ç线段åé¢è² |
| | | * @paramï¼ |
| | | * @returnsï¼ |
| | | */ |
| | | getLineColor(timeInteval, xList) { |
| | | let result = [] |
| | | |
| | | // åªå |
| | | let temp = [] |
| | | for (let i = 0; i < timeInteval.length; i++) { |
| | | if (timeInteval[i][0] != timeInteval[i][1]) { |
| | | temp.push(timeInteval[i]) |
| | | } |
| | | } |
| | | |
| | | // æ è¿ç»çæ°æ® ç´æ¥éåº |
| | | if (temp.length == 0) { |
| | | return [] |
| | | } |
| | | |
| | | // å第ä¸ä¸ªè¿ç»çæ¶æ®µ |
| | | result.push([ |
| | | { |
| | | lte: temp[0][0], |
| | | color: 'green' |
| | | }, |
| | | { |
| | | gt: temp[0][0], |
| | | lte: temp[0][1], |
| | | color: 'red' |
| | | }, |
| | | { |
| | | gt: temp[0][1], |
| | | lte: xList[xList.length - 1], |
| | | color: 'green' |
| | | } |
| | | ]) |
| | | return result[0] |
| | | } |
| | | } |
| | |
| | | import * as XLSX from 'xlsx/xlsx.mjs'; |
| | | export function useCommonFunction(){ |
| | | /** |
| | | * descriptionï¼å¤æèµ·å§æ¶é´è·¨åº¦æ¯å¦è¶
è¿1个æ |
| | | * @paramï¼ å¼å§æ¶é´ï¼ç»ææ¶é´ |
| | | * @createTime:2023-08-18 |
| | | * @returnsï¼è¶
è¿ä¸ä¸ªæè¿åtrue,ä¸è¶
è¿ä¸ä¸ªæåè¿åfalse |
| | | */ |
| | | import * as XLSX from 'xlsx/xlsx.mjs' |
| | | import dayjs from 'dayjs' |
| | | |
| | | function isExceedOneMonth(dateStr1, dateStr2) { |
| | | // è¶
è¿ä¸ä¸ªæï¼è¿åTrueï¼å¦åè¿åFalse |
| | | // å°æ¥æåç¬¦ä¸²è½¬ä¸ºæ¥æå¯¹è±¡ |
| | | const date1 = new Date(dateStr1); |
| | | const date2 = new Date(dateStr2); |
| | | |
| | | // è·åä¸¤ä¸ªæ¥æçå¹´ãæãæ¥ |
| | | const year1 = date1.getFullYear(); |
| | | const month1 = date1.getMonth(); |
| | | const day1 = date1.getDate(); |
| | | |
| | | const year2 = date2.getFullYear(); |
| | | const month2 = date2.getMonth(); |
| | | const day2 = date2.getDate(); |
| | | |
| | | // å¤æä¸¤ä¸ªæ¥ææ¯å¦ç¸å·®ä¸ä¸ªæ |
| | | if (year1 === year2) { |
| | | // 年份ç¸çï¼æ¯è¾æä»½å·®å¼ |
| | | if (Math.abs(month1 - month2) === 1) { |
| | | // æä»½å·®å¼ä¸º1ï¼è¿éè¦å¤æå
·ä½æ¥æ |
| | | if ( |
| | | (month1 < month2 && day1 < day2) || |
| | | (month1 > month2 && day1 > day2) |
| | | ) { |
| | | return true; |
| | | } |
| | | } |
| | | } else if (Math.abs(year1 - year2) === 1) { |
| | | // 年份差å¼ä¸º1ï¼æ¯è¾æä»½åæ¥æ |
| | | if ( |
| | | (year1 < year2 && month1 === 11 && month2 === 0 && day1 < day2) || |
| | | (year1 > year2 && month1 === 0 && month2 === 11 && day1 > day2) |
| | | ) { |
| | | return true; |
| | | } |
| | | export function useCommonFunction() { |
| | | /** |
| | | * descriptionï¼å¤æèµ·å§æ¶é´è·¨åº¦æ¯å¦è¶
è¿1个æ |
| | | * @paramï¼ å¼å§æ¶é´ï¼ç»ææ¶é´ |
| | | * @createTime:2023-08-18 |
| | | * @returnsï¼è¶
è¿ä¸ä¸ªæè¿åtrue,ä¸è¶
è¿ä¸ä¸ªæåè¿åfalse |
| | | */ |
| | | |
| | | function isExceedOneMonth(dateStr1, dateStr2) { |
| | | // è¶
è¿ä¸ä¸ªæï¼è¿åTrueï¼å¦åè¿åFalse |
| | | // å°æ¥æåç¬¦ä¸²è½¬ä¸ºæ¥æå¯¹è±¡ |
| | | const date1 = new Date(dateStr1) |
| | | const date2 = new Date(dateStr2) |
| | | |
| | | // è·åä¸¤ä¸ªæ¥æçå¹´ãæãæ¥ |
| | | const year1 = date1.getFullYear() |
| | | const month1 = date1.getMonth() |
| | | const day1 = date1.getDate() |
| | | |
| | | const year2 = date2.getFullYear() |
| | | const month2 = date2.getMonth() |
| | | const day2 = date2.getDate() |
| | | |
| | | // å¤æä¸¤ä¸ªæ¥ææ¯å¦ç¸å·®ä¸ä¸ªæ |
| | | if (year1 === year2) { |
| | | // 年份ç¸çï¼æ¯è¾æä»½å·®å¼ |
| | | if (Math.abs(month1 - month2) === 1) { |
| | | // æä»½å·®å¼ä¸º1ï¼è¿éè¦å¤æå
·ä½æ¥æ |
| | | if ((month1 < month2 && day1 < day2) || (month1 > month2 && day1 > day2)) { |
| | | return true |
| | | } |
| | | |
| | | // é»è®¤è¿åfalseï¼è¡¨ç¤ºä¸¤ä¸ªæ¥æå符串ä¸ç¸å·®ä¸ä¸ªæ |
| | | return false; |
| | | } |
| | | |
| | | /** |
| | | * ç¾åå·æ¯è¾å¤§å° |
| | | * @paramï¼ aæ¯å¦å¤§äºb |
| | | * @returnsï¼å¤§äºï¼åè¿åtrueãå¦åè¿åfalse |
| | | */ |
| | | function cmpp(a, b) { |
| | | return Number(a.replace('%', '')) >= Number(b.replace('%', '')); |
| | | } else if (Math.abs(year1 - year2) === 1) { |
| | | // 年份差å¼ä¸º1ï¼æ¯è¾æä»½åæ¥æ |
| | | if ( |
| | | (year1 < year2 && month1 === 11 && month2 === 0 && day1 < day2) || |
| | | (year1 > year2 && month1 === 0 && month2 === 11 && day1 > day2) |
| | | ) { |
| | | return true |
| | | } |
| | | } |
| | | |
| | | /** |
| | | *导åºä¸ºexcel |
| | | * @paramï¼ è¡¨æ ¼æ°æ®ï¼å¾
导åºçè¡¨æ ¼åï¼excelåï¼excelæä»¶å |
| | | * @returns |
| | | */ |
| | | function exportToExcel(exportData,tableColumns,excelColumnsName,excelName='data.xlsx'){ |
| | | const itemsFormatted = exportData.map((item) => { |
| | | const newItem = {}; |
| | | tableColumns.forEach((col) => { |
| | | newItem[col] = item[col]; |
| | | }); |
| | | return newItem; |
| | | }); |
| | | // å建xlsx对象 |
| | | const xls = XLSX.utils.json_to_sheet(itemsFormatted); |
| | | |
| | | // ç¼è¾è¡¨å¤´è¡ ä¿®æ¹è¡¨å¤´ |
| | | excelColumnsName.forEach(item =>{ |
| | | xls[item[0]].v = item[1] |
| | | // é»è®¤è¿åfalseï¼è¡¨ç¤ºä¸¤ä¸ªæ¥æå符串ä¸ç¸å·®ä¸ä¸ªæ |
| | | return false |
| | | } |
| | | |
| | | /** |
| | | * ç¾åå·æ¯è¾å¤§å° |
| | | * @paramï¼ aæ¯å¦å¤§äºb |
| | | * @returnsï¼å¤§äºï¼åè¿åtrueãå¦åè¿åfalse |
| | | */ |
| | | function cmpp(a, b) { |
| | | return Number(a.replace('%', '')) >= Number(b.replace('%', '')) |
| | | } |
| | | |
| | | /** |
| | | *导åºä¸ºexcel |
| | | * @paramï¼ è¡¨æ ¼æ°æ®ï¼å¾
导åºçè¡¨æ ¼åï¼excelåï¼excelæä»¶å |
| | | * @returns |
| | | */ |
| | | function exportToExcel(exportData, tableColumns, excelColumnsName, excelName = 'data.xlsx') { |
| | | const itemsFormatted = exportData.map((item) => { |
| | | const newItem = {} |
| | | tableColumns.forEach((col) => { |
| | | newItem[col] = item[col] |
| | | }) |
| | | // å建workbookï¼å¹¶æsheetæ·»å è¿å» |
| | | const wb = XLSX.utils.book_new(); |
| | | XLSX.utils.book_append_sheet(wb, xls, 'Sheet1'); |
| | | // å°workbook转为äºè¿å¶xlsxæä»¶å¹¶ä¸è½½ |
| | | XLSX.writeFile(wb, excelName); |
| | | |
| | | } |
| | | return newItem |
| | | }) |
| | | // å建xlsx对象 |
| | | const xls = XLSX.utils.json_to_sheet(itemsFormatted) |
| | | |
| | | /** |
| | | * 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 |
| | | */ |
| | | function descFiftyTime(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; |
| | | } |
| | | // ç¼è¾è¡¨å¤´è¡ ä¿®æ¹è¡¨å¤´ |
| | | excelColumnsName.forEach((item) => { |
| | | xls[item[0]].v = item[1] |
| | | }) |
| | | // å建workbookï¼å¹¶æsheetæ·»å è¿å» |
| | | const wb = XLSX.utils.book_new() |
| | | XLSX.utils.book_append_sheet(wb, xls, 'Sheet1') |
| | | // å°workbook转为äºè¿å¶xlsxæä»¶å¹¶ä¸è½½ |
| | | XLSX.writeFile(wb, excelName) |
| | | } |
| | | |
| | | return {isExceedOneMonth,cmpp,exportToExcel,descFiftyTime} |
| | | /** |
| | | * 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 |
| | | */ |
| | | function descFiftyTime(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 |
| | | } |
| | | |
| | | /** |
| | | * æ ¼å¼å为ç¾åå· |
| | | * @param {*} v |
| | | * @returns |
| | | */ |
| | | function percentFormatter(v) { |
| | | return Math.round(v * 100, 2) + '%' |
| | | } |
| | | |
| | | return { isExceedOneMonth, cmpp, exportToExcel, descFiftyTime, percentFormatter } |
| | | } |
| | | |
| | |
| | | } |
| | | // 计ç®å¹³åå¼ï¼å¨çº¿çï¼ææçï¼è¶
æ ç |
| | | sumAvg = sumAvg + item.dayAvg |
| | | sumOnline = sumOnline + Number(item.dayOnline.slice(0, -1)) |
| | | sumValid = sumValid + Number(item.dayValid.slice(0, -1)) |
| | | sumExceeding = sumExceeding + Number(item.dayExceeding.slice(0, -1)) |
| | | |
| | | sumOnline = sumOnline + Number(item.dayOnline) |
| | | sumValid = sumValid + Number(item.dayValid) |
| | | sumExceeding = sumExceeding + Number(item.dayExceeding) |
| | | }) |
| | | // 计ç®åå¼ |
| | | avg = sumAvg / dayDiff |
| | |
| | | if (exception.length == 0) { |
| | | exception.push(item.exceptionType) |
| | | } |
| | | // ä¿åæ°çå¼å¸¸ç±»å |
| | | else if (exception.indexOf(item.exceptionType) == -1) { |
| | | // ä¿åæ°çå¼å¸¸ç±»å æ°æ®è¶
ä½ãé¿æ¶é´æ æ³¢å¨ç两类å¼å¸¸æä¸çº³å
¥åæ |
| | | else if ( item.exceptionType!='1' && item.exceptionType!='3' && exception.indexOf(item.exceptionType) == -1) { |
| | | exception.push(item.exceptionType) |
| | | } |
| | | }) |
| | |
| | | default: |
| | | return 'error' |
| | | } |
| | | |
| | | exceptionTypeAggregation = (exception.length / 8).toFixed(2) |
| | | |
| | | // æ°æ®è¶
ä½ãé¿æ¶é´æ æ³¢å¨ç两类å¼å¸¸æä¸çº³å
¥åæ |
| | | exceptionTypeAggregation = (exception.length / 6).toFixed(2) |
| | | |
| | | let obj = {} |
| | | obj['exceptionRecurrence'] = exceptionTyprRecurRate |
| | | obj['exceptionTypeAggregation'] = exceptionTypeAggregation |
| | | |
| | | |
| | | if(exception.length>0){ |
| | | // ä¿åè¯¥æ¶æ®µåºç°çå¼å¸¸ |
| | | obj['exception'] = exception.length |
| | | }else{ |
| | | obj['exception'] = 0 |
| | | } |
| | | |
| | | |
| | | // ä¸ç±»å¼å¸¸åºç°çæ¬¡æ° |
| | | obj['mutationCount'] = mutationCount |
| | | obj['exceedingNearCount'] = exceedingNearCount |
| | | obj['exceedingCriticalDegree'] = exceedingCriticalDegree |
| | | |
| | | |
| | | return obj |
| | | }, |
| | | |
| | | |
| | | // åæ°ï¼å¯¹è±¡æ°ç»(该对象ä¸ç屿§ä¸è½æ¯å¼ç¨ç±»åï¼å¦åæ·è´çå¼è¿æ¯ä¼ç¸äºå½±å) |
| | | // åè½ï¼æ·è´è¯¥å¯¹è±¡æ°ç»ã |
| | | shallowCopyList(val) { |
| | |
| | | judgeRiskGradeAndAdvice(monthlyRiskValue){ |
| | | let temp = [] |
| | | // ä½é£é© |
| | | if(monthlyRiskValue < 0.2) { |
| | | if(monthlyRiskValue < 0.15) { |
| | | temp.push('ä½é£é©') |
| | | let advice = '1.å»ºè®®åæ¶æé该ç«ç¹æå±åä½è¿è¡åºæ¥ç»´æ¤ï¼\n2.è¥åæ¶åå¨è¶
æ ã临çè¶
æ ãé级çªåçå¼å¸¸æ¶ï¼å»ºè®®å°è¯¥ç«ç¹ç§»äº¤ç¯å¢æ§æ³å¤§éå¼å±ç°åºæ§æ³æ£æ¥ï¼\n3.è¥æç»ä¸¤æå以ä¸ä¸ºé«é£é©ï¼å»ºè®®å°è¯¥ç«ç¹çº³å
¥å¹´åº¦æ½æµæ¯å¯¹æ¸
åï¼' |
| | | temp.push(advice) |
| | | } |
| | | // ä¸é£é© |
| | | if (monthlyRiskValue < 0.6 && monthlyRiskValue >= 0.2) { |
| | | if (monthlyRiskValue <= 0.6 && monthlyRiskValue >= 0.15) { |
| | | temp.push('ä¸é£é©') |
| | | let advice = '1.建议éè¿å®æ³æå¡å°ç¨åºãçæµç管微信群ççº¿ä¸æ¹å¼æç¤ºç«ç¹æå±åä½ï¼èç¦å½ååå¨çé®é¢æéæ£ï¼åæ¶å¼å±èªæ¥èªçº ï¼\n2.è¥åæ¶åå¨å¨çº¿çæææçæåº¦ä¸è¾¾æ ï¼å»ºè®®çµè¯éç¥è¯¥ç«ç¹æå±åä½è¿è¡åºæ¥ç»´æ¤ï¼å¹¶è¿è¡ä¸é¡¹å®¡æ ¸ï¼' |
| | | temp.push(advice) |
| | | } |
| | | // é«é£é© |
| | | if (monthlyRiskValue >= 0.6) { |
| | | if (monthlyRiskValue > 0.6) { |
| | | temp.push('é«é£é©') |
| | | let advice = '1.è¥ä¸æ¶åè¶
æ æå¨çº¿çãææçå¼å¸¸ï¼å¸¸ææ°æ®å®¡æ ¸å³å¯ï¼\n2.è¥æ¶åè¶
æ æå¨çº¿çãææççå¼å¸¸ï¼å»ºè®®éè¿å®æ³æå¡å°ç¨åºãçæµç管微信群ççº¿ä¸æ¹å¼æç¤ºç«ç¹æå±åä½ï¼åæ¶å¼å±èªæ¥èªçº ï¼' |
| | | temp.push(advice) |
| | |
| | | <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('./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 DutyCompany from '@/sfc/DutyCompany.vue' |
| | | import StreetInfo from '@/sfc/StreetInfo.vue' |
| | | import historyApi from '@/api/historyApi.js' |
| | | import time from '@/utils/time.js' |
| | | import lineChart from '@/utils/chartFunction/lineChart.js' |
| | | import exceptionOption from '@/utils/chartFunction/exceptionOption.js' |
| | | export default { |
| | | components: { |
| | | TimeShortCuts, |
| | | DustLineChart, |
| | | ButtonClick, |
| | | AreaAndmonitorType, |
| | | AnalysisCard, |
| | | DutyCompany, |
| | | StreetInfo |
| | | import CompFlightInspection from '@/views/exception/components/CompFlightInspection.vue' |
| | | export default { |
| | | components: { |
| | | CompFlightInspection |
| | | }, |
| | | data() { |
| | | return { |
| | | // 表åå
容 |
| | | form: { |
| | | // ç«ç¹åç§° |
| | | name: '', |
| | | // è¿ç»´å |
| | | dutyCompany: [], |
| | | // è¡é |
| | | street: [], |
| | | // éæ©çå¼å¸¸ç±»å |
| | | exceptionName: [] |
| | | }, |
| | | beginTime: '', |
| | | endTime: '', |
| | | // è¿åçæ°æ® |
| | | tableData: [], |
| | | // è¡¨æ ¼å±ç¤ºçæ°æ® |
| | | displayData: [], |
| | | // è¡¨æ ¼é«åº¦ |
| | | tableHeight: 400, |
| | | // è¡¨æ ¼æ¾ç¤º |
| | | isTableShow: false, |
| | | // å®¡æ ¸è¾
婿鮿¾ç¤º |
| | | auditButton: false, |
| | | // å½å页 |
| | | currentPage: 1, |
| | | // æ¯é¡µæ¡æ° |
| | | pageSize: 20, |
| | | // è¡¨æ ¼çæ»è®°å½æ° |
| | | total: 0, |
| | | |
| | | // æ¥è¯¢æé®æ æ°æ®æ¶ |
| | | isNoData: { |
| | | exception0: true, |
| | | exception1: true, |
| | | exception2: true, |
| | | exception3: true, |
| | | exception4: true, |
| | | exception5: true, |
| | | exception6: true, |
| | | exception7: true, |
| | | exception8: true |
| | | }, |
| | | // eslint-disable-next-line no-undef |
| | | // å¯¹è¯æ¡æ¾ç¤º |
| | | dialogTableVisible: false, |
| | | // ä¿åå¼å¸¸å¯¹åºçåºéºåç§°å设å¤ç¼å· |
| | | exception: { |
| | | // æçµææç½ |
| | | exception0: [], |
| | | // æ°æ®è¶
ä½ |
| | | exception1: [], |
| | | // è¶
æ |
| | | exception2: [], |
| | | // æ°æ®é¿æ¶æ®µæ æ³¢å¨ |
| | | exception3: [], |
| | | // é级çªåå¼å¸¸ |
| | | exception4: [], |
| | | // 临è¿è¶
æ å¼å¸¸ |
| | | exception5: [], |
| | | // 忥è¶
æ æ¬¡æ°ä¸´çå¼å¸¸ |
| | | exception6: [], |
| | | // æ»å¨å¹³åå¼å¼å¸¸ |
| | | exception7: [], |
| | | // ææçå¼å¸¸ |
| | | exception8: [], |
| | | |
| | | // è¯¥æ¶æ®µçå¼å¸¸æ°é |
| | | exception0Num: 0, |
| | | exception1Num: 0, |
| | | exception2Num: 0, |
| | | exception3Num: 0, |
| | | exception4Num: 0, |
| | | exception5Num: 0, |
| | | exception6Num: 0, |
| | | exception7Num: 0, |
| | | exception8Num: 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 |
| | | }, |
| | | areaColor: null |
| | | } |
| | | }, |
| | | setup() { |
| | | // provide('search',readonly(form)) |
| | | const { isExceedOneMonth } = useCommonFunction() |
| | | return { |
| | | isExceedOneMonth |
| | | } |
| | | }, |
| | | // çå¬ å¤ææé®æ¯å¦å¯ç¹å» |
| | | watch: { |
| | | selectedRowIndex(newVaue) { |
| | | // å¤äºè¡¨æ ¼çæå䏿¡æ°æ® 设置âä¸ä¸æ¡âæé®ä¸å¯ç¹ |
| | | if (newVaue === 0) { |
| | | this.dialog.isPreCantouch = true |
| | | //ç¨æ·å
ç¹äºç¬¬ä¸æ¡ï¼pre为true,ç¶åç¹å»æå䏿¡,next为trueãæ¤æ¶ä¸¤ä¸ªæé®é½è¢«å°é |
| | | if (this.dialog.isNextCantouch == true) { |
| | | this.dialog.isNextCantouch = false |
| | | } |
| | | } |
| | | // å¤äºè¡¨æ ¼ç¬¬ä¸æ¡æ°æ® 设置âä¸ä¸æ¡âæé®ä¸å¯ç¹ |
| | | else if (newVaue === this.displayData.length - 1) { |
| | | this.dialog.isNextCantouch = true |
| | | //ç¨æ·å
ç¹äºè¡¨æ ¼æå䏿¡,next为true,ç¶åç¹å»ç¬¬ä¸æ¡ï¼pre为trueãæ¤æ¶ä¸¤ä¸ªæé®é½è¢«å°é |
| | | 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 + |
| | | this.exception.exception8Num |
| | | 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 + |
| | | this.exception.exception8Num |
| | | 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 - |
| | | (this.exception.exception8Num / 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 |
| | | } |
| | | ] |
| | | }, |
| | | cardRow2() { |
| | | return [ |
| | | { |
| | | 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 |
| | | }, |
| | | { |
| | | 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 |
| | | } |
| | | ] |
| | | }, |
| | | cardRow3() { |
| | | return [ |
| | | { |
| | | 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 |
| | | }, |
| | | { |
| | | siteName: this.exception.exception8, |
| | | exceptionType: '8', |
| | | exceptionName: 'ææçå¼å¸¸', |
| | | iconSrc: '@/assets/exception/exception3.png', |
| | | siteNum: this.exception.exception8.length, |
| | | exceptionNum: this.exception.exception8Num, |
| | | isNoDataStatus: this.isNoData.exception8 |
| | | } |
| | | ] |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.backExceptionDataAWeekAgo() |
| | | // æ¥è¯¢æ¶é´æ®µçåå¼å¸¸çç«ç¹ï¼æ¥è¯¢è¯¥æ¶é´åºé´çåå¼å¸¸æ°é |
| | | this.getShopNames() |
| | | this.getSiteNume() |
| | | |
| | | let a = [ |
| | | ['2023-10-01 11:45:00', '2023-10-01 13:45:00'], |
| | | ['2023-10-01 11:45:00', '2023-10-01 12:45:00'] |
| | | ] |
| | | |
| | | let b = time.splitTime(a) |
| | | console.log('æ¶é´ï¼', b) |
| | | }, |
| | | |
| | | methods: { |
| | | /** |
| | | * ææçå¼å¸¸ 设置æçº¿å¾é
置项 |
| | | * @paramï¼ |
| | | * @returnsï¼ |
| | | */ |
| | | validProcess() { |
| | | // xè½´æ°æ® |
| | | let xList = time.ascTime( |
| | | this.tableCurrentRowData.beginTime, |
| | | this.tableCurrentRowData.endTime, |
| | | 15 |
| | | ) |
| | | |
| | | // yè½´æ°æ® |
| | | let yList = [] |
| | | xList.forEach((item) => { |
| | | // æ¥æ¾è¯¥æ¶é´çæ°æ® |
| | | let r = lineChart.findDate(this.dialog.historyData, item) |
| | | if (r) { |
| | | yList.push(r.dustValue) |
| | | } else { |
| | | yList.push(null) |
| | | } |
| | | }) |
| | | // é¢è²èæ¯åºé´ |
| | | // å¾å°æ æ°æ®çæ¶é´ç¹æflagä¸çäºNçæ¶é´ç¹ |
| | | let noDataTime = time.invalidTime(this.dialog.historyData, xList) |
| | | let rangeTime = time.seriesTime(noDataTime, 15) |
| | | // let rangeTime_1 = time.splitTime(rangeTime) |
| | | // å¾å°èæ¯åºé´çé
ç½® |
| | | let areaObj = lineChart.getMarkArea(rangeTime, 'å¼å¸¸') |
| | | |
| | | // ä¼ å
¥åæ° |
| | | this.dialog.option = exceptionOption.setExceptionChartOption( |
| | | xList, |
| | | yList, |
| | | '', |
| | | '', |
| | | '', |
| | | '', |
| | | this.tableCurrentRowData.exception, |
| | | areaObj, |
| | | this.tableCurrentRowData.exceptionType |
| | | ) |
| | | }, |
| | | |
| | | 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 |
| | | |
| | | historyApi.queryHistoryData(allTimeArgs).then((result) => { |
| | | this.dialog.allExceptionTimeData = result.data.data |
| | | // æ°æ®ç¼ºå¤±å¼å¸¸æ¶éæ°è®¾ç½®è¡¨æ ¼ |
| | | if (this.tableCurrentRowData.exceptionType == '0') { |
| | | this.setOfflineTbleData() |
| | | } |
| | | |
| | | // xè½´æ¥ææ¶é´ |
| | | let dateList = [] |
| | | // yè½´ è¶
æ æ²¹çæµåº¦ |
| | | let dustValue = [] |
| | | let timeAndValue = {} |
| | | |
| | | // 仿·»å äºé¦ä½åºé´çå¼å§åç»ææ¶é´è¿è¡éå ä¿è¯æ¶é´ä»¥15åé为é´é |
| | | 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.dialog.option = exceptionOption.setExceptionChartOption( |
| | | dateList, |
| | | dustValue, |
| | | exceptionBT, |
| | | exceptionET, |
| | | startIndex, |
| | | endIndex, |
| | | this.tableCurrentRowData.exception, |
| | | '', |
| | | this.tableCurrentRowData.exceptionType |
| | | ) |
| | | this.flag.banTouch = 0 |
| | | this.loading.lineChart = false |
| | | }) |
| | | |
| | | |
| | | |
| | | }, |
| | | |
| | | /** |
| | | * 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 |
| | | |
| | | // å¾å°ä¸ä¸è¡çæ°æ® |
| | | this.tableCurrentRowData = this.displayData[this.selectedRowIndex] |
| | | |
| | | this.loading.preButton = true |
| | | |
| | | |
| | | historyApi.queryHistoryData({ |
| | | siteName:this.tableCurrentRowData.name, |
| | | beginTime:this.tableCurrentRowData.beginTime, |
| | | endTime:this.tableCurrentRowData.endTime |
| | | }).then(response => { |
| | | // ä¿åè¿åçè¶
æ æ°æ® |
| | | this.dialog.historyData = response.data.data |
| | | this.dialog.exceptionTotal = response.data.data.length |
| | | // é»è¾å¤ç |
| | | |
| | | if (this.tableCurrentRowData.exceptionType != '8') { |
| | | this.timeAndDataProcessed() |
| | | } else { |
| | | this.loading.lineChart = true |
| | | this.validProcess() |
| | | this.loading.lineChart = false |
| | | this.flag.banTouch = 0 |
| | | } |
| | | this.loading.preButton = false |
| | | }) |
| | | } |
| | | }, |
| | | /** |
| | | * descriptionï¼è·åä¸ä¸æ¡å¼å¸¸ä¿¡æ¯ |
| | | */ |
| | | getNextRowData() { |
| | | // 䏿¯è¡¨æ ¼ç第ä¸è¡ |
| | | if (this.selectedRowIndex !== 0) { |
| | | // ç¹å»è¿ç¨ä¸ éä½ä¸ä¸æ¡æé® å¨è®¾ç½®å®å¾å½¢é
置项åè§£é |
| | | this.flag.banTouch = 1 |
| | | |
| | | //å¾å°ä¸ä¸è¡æ°æ®ç´¢å¼ |
| | | this.selectedRowIndex = this.selectedRowIndex - 1 |
| | | |
| | | // å¾å°ä¸ä¸è¡çæ°æ® |
| | | this.tableCurrentRowData = this.displayData[this.selectedRowIndex] |
| | | |
| | | this.loading.afterButton = true |
| | | |
| | | historyApi.queryHistoryData({ |
| | | siteName:this.tableCurrentRowData.name, |
| | | beginTime:this.tableCurrentRowData.beginTime, |
| | | endTime:this.tableCurrentRowData.endTime |
| | | }).then(response => { |
| | | // ä¿åè¿åçè¶
æ æ°æ® |
| | | this.dialog.historyData = response.data.data |
| | | this.dialog.exceptionTotal = response.data.data.length |
| | | // é»è¾å¤ç |
| | | |
| | | if (this.tableCurrentRowData.exceptionType != '8') { |
| | | this.timeAndDataProcessed() |
| | | } else { |
| | | this.loading.lineChart = true |
| | | this.validProcess() |
| | | this.loading.lineChart = false |
| | | this.flag.banTouch = 0 |
| | | } |
| | | this.loading.afterButton = false |
| | | }) |
| | | data() { |
| | | return{ |
| | | |
| | | } |
| | | }, |
| | | mounted() { |
| | | |
| | | /** |
| | | * descriptionï¼ä»åç»ä»¶è·å¾æç«ç¹è¯¥æ¶æ®µçå¼å¸¸æ°æ® |
| | | * @createTime:2023-08-18 |
| | | */ |
| | | backExceptionData(val1, val2) { |
| | | this.displayData = val1 |
| | | this.total = val2 |
| | | }, |
| | | methods: { |
| | | |
| | | // æ¥è¯¢å¼å¸¸æ°æ®çç«ç¹åååæ°é |
| | | queryExceptionSite(url, exceptionType) { |
| | | let params = {} |
| | | params['beginTime'] = this.beginTime |
| | | params['endTime'] = this.endTime |
| | | params['exceptionType'] = exceptionType |
| | | |
| | | if (this.form.street.length != 0) { |
| | | params['street'] = this.form.street.join() |
| | | } |
| | | if (this.form.dutyCompany.length != 0) { |
| | | params['dutyCompany'] = this.form.dutyCompany.join() |
| | | } |
| | | return this.$http.get(url, { params: params }) |
| | | }, |
| | | |
| | | /** |
| | | * descriptionï¼å½ç¨æ·æ¹åæ¥è¯¢çæ¶é´åºé´æ¶ï¼ä¼æ ¹æ®è¯¥åºé´æ¥è¯¢åå¼å¸¸çç«ç¹ï¼æ¥è¯¢è¯¥æ¶é´åºé´çåå¼å¸¸æ°é |
| | | * @createTime:2023-08-18 |
| | | */ |
| | | getShopNames() { |
| | | /* æ¥è¯¢å¼å¸¸çç«ç¹ */ |
| | | this.queryExceptionSite('/dust/sitenamecode', 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', 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', 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', 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', 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', 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', 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', 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/sitenamecode', 8).then((result) => { |
| | | this.exception.exception8 = result.data.data |
| | | if (result.data.data.length == 0) { |
| | | this.isNoData.exception8 = true |
| | | return |
| | | } |
| | | |
| | | this.isNoData.exception8 = false |
| | | }) |
| | | |
| | | /* å¼å¸¸å¼å¸¸æ°é */ |
| | | this.queryExceptionSite('/dust/exceptionnum', 0).then((result) => { |
| | | this.exception.exception0Num = result.data.data |
| | | }) |
| | | this.queryExceptionSite('/dust/exceptionnum', 1).then((result) => { |
| | | this.exception.exception1Num = result.data.data |
| | | }) |
| | | this.queryExceptionSite('/dust/exceptionnum', 2).then((result) => { |
| | | this.exception.exception2Num = result.data.data |
| | | }) |
| | | |
| | | this.queryExceptionSite('/dust/exceptionnum', 3).then((result) => { |
| | | this.exception.exception3Num = result.data.data |
| | | }) |
| | | |
| | | this.queryExceptionSite('/dust/exceptionnum', 4).then((result) => { |
| | | this.exception.exception4Num = result.data.data |
| | | }) |
| | | this.queryExceptionSite('/dust/exceptionnum', 5).then((result) => { |
| | | this.exception.exception5Num = result.data.data |
| | | }) |
| | | this.queryExceptionSite('/dust/exceptionnum', 6).then((result) => { |
| | | this.exception.exception6Num = result.data.data |
| | | }) |
| | | this.queryExceptionSite('/dust/exceptionnum', 7).then((result) => { |
| | | this.exception.exception7Num = result.data.data |
| | | }) |
| | | this.queryExceptionSite('/dust/exceptionnum', 8).then((result) => { |
| | | this.exception.exception8Num = result.data.data |
| | | }) |
| | | }, |
| | | |
| | | /** |
| | | * descriptionï¼æ¾ç¤ºå¯¹è¯æ¡,è¿å该å¼å¸¸æ¶é´æ®µçæææ°æ® |
| | | * @paramï¼ç¹å»âæ¥ç详æ
âçè¯¥è¡ææåæ®µæ°æ® |
| | | * @createTime:2023-08-18 |
| | | */ |
| | | showDialog(row) { |
| | | // æå¼å¯¹è¯æ¡ |
| | | this.dialogTableVisible = true |
| | | |
| | | // ä¿åå½åè¡æ°æ® |
| | | this.tableCurrentRowData = row |
| | | |
| | | // è·åå½åè¡çç´¢å¼ |
| | | this.selectedRowIndex = this.displayData.indexOf(row) |
| | | |
| | | //æ ¹æ®å½åè¡çç¼å·ï¼èµ·å§æ¶é´æ¥ 请æ±å¼å¸¸æ°æ® |
| | | // 对请æ±å°çæ°æ®è¿è¡é¦å°¾æ¼æ¥ |
| | | // å¾å°åå宿´æ°æ®è¿è¡ç»å¶å¾å½¢ |
| | | |
| | | |
| | | |
| | | historyApi.queryHistoryData({ |
| | | siteName:row.name, |
| | | beginTime:row.beginTime, |
| | | endTime:row.endTime |
| | | }).then(response => { |
| | | // ä¿åè¿åçè¶
æ æ°æ® |
| | | this.dialog.historyData = response.data.data |
| | | this.dialog.exceptionTotal = response.data.data.length |
| | | // é»è¾å¤ç |
| | | |
| | | if (this.tableCurrentRowData.exceptionType != '8') { |
| | | this.timeAndDataProcessed() |
| | | } else { |
| | | this.loading.lineChart = true |
| | | this.validProcess() |
| | | this.loading.lineChart = false |
| | | this.flag.banTouch = 0 |
| | | } |
| | | }) |
| | | }, |
| | | /** |
| | | * 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.form.name) { |
| | | params['siteName'] = this.form.name |
| | | } |
| | | if (this.form.exceptionName.length != 0) { |
| | | params['exceptionType'] = this.form.exceptionName.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() |
| | | } |
| | | params['beginTime'] = this.beginTime |
| | | params['endTime'] = this.endTime |
| | | |
| | | this.$http.get('/dust/exceptiondata2', { 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.form.name) { |
| | | params['siteName'] = this.form.name |
| | | } |
| | | 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> |
| | | <DutyCompany @submitDutyCompanyValue="(n) => (form.dutyCompany = n)"> </DutyCompany> |
| | | </el-form-item> |
| | | |
| | | <el-form-item> |
| | | <StreetInfo @submitStreetValue="(n) => (form.street = n)"> </StreetInfo> |
| | | </el-form-item> |
| | | |
| | | <el-form-item> |
| | | <TimeShortCuts timeType="day" @submit-time="giveTime"></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="5"> |
| | | <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="5"> |
| | | <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="4"> |
| | | <AnalysisCard |
| | | :site-name="cardRow3[2].siteName" |
| | | :exception-type="cardRow3[2].exceptionType" |
| | | :begin-time="beginTime" |
| | | :end-time="endTime" |
| | | :exception-name="cardRow3[2].exceptionName" |
| | | :site-num="cardRow3[2].siteNum" |
| | | :exception-num="cardRow3[2].exceptionNum" |
| | | :exception-all-num="exceptionAllNum" |
| | | :site-num-all="siteTotal" |
| | | :isNoDataStatus="cardRow3[2].isNoDataStatus" |
| | | @get-abnormal-data-by-click="getAbnormalDataByClick" |
| | | > |
| | | <img src="@/assets/exception/exception3.png" height="24" width="24" /> |
| | | </AnalysisCard> |
| | | </el-col> |
| | | |
| | | |
| | | <el-col :span="5"> |
| | | <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/exception7.png" height="24" width="24" /> |
| | | </AnalysisCard> |
| | | </el-col> |
| | | |
| | | <el-col :span="5"> |
| | | <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-row> |
| | | |
| | | <el-row :gutter="20" class="card-row"> |
| | | <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/exception1.png" height="24" width="24" /> |
| | | </AnalysisCard> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <AnalysisCard |
| | | :site-name="cardRow3[0].siteName" |
| | | :exception-type="cardRow3[0].exceptionType" |
| | | :begin-time="beginTime" |
| | | :end-time="endTime" |
| | | :exception-name="cardRow3[0].exceptionName" |
| | | :site-num="cardRow3[0].siteNum" |
| | | :exception-num="cardRow3[0].exceptionNum" |
| | | :exception-all-num="exceptionAllNum" |
| | | :site-num-all="siteTotal" |
| | | :isNoDataStatus="cardRow3[0].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="cardRow3[1].siteName" |
| | | :exception-type="cardRow3[1].exceptionType" |
| | | :begin-time="beginTime" |
| | | :end-time="endTime" |
| | | :exception-name="cardRow3[1].exceptionName" |
| | | :site-num="cardRow3[1].siteNum" |
| | | :exception-num="cardRow3[1].exceptionNum" |
| | | :exception-all-num="exceptionAllNum" |
| | | :site-num-all="siteTotal" |
| | | :isNoDataStatus="cardRow3[1].isNoDataStatus" |
| | | @get-abnormal-data-by-click="getAbnormalDataByClick" |
| | | > |
| | | <img src="@/assets/exception/exception3.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/exception0.png" height="24" width="24" /> |
| | | </AnalysisCard> |
| | | </el-col> |
| | | </el-row> |
| | | <!-- |
| | | <el-row :gutter="20"> |
| | | |
| | | </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="getPreviousRowData" |
| | | >䏿¡å¼å¸¸</el-button |
| | | > |
| | | <el-button |
| | | type="danger" |
| | | :loading="loading.afterButton" |
| | | :disabled="dialog.isNextCantouch || flag.banTouch" |
| | | @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> |
| | | |
| | | <!-- å¾å½¢ --> |
| | | <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 prop="lst" label="ééæ¶é´" align="center" show-overflow-tooltip /> |
| | | <el-table-column |
| | | prop="dustValue" |
| | | label="TSP(mg/m³)" |
| | | align="center" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column prop="flag" label="flag" 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> |
| | | <CompFlightInspection :show-all="true"> </CompFlightInspection> |
| | | </template> |
| | | |
| | | <style lang="scss" scoped> |
| | | .el-row { |
| | | margin-left: 10px; |
| | | } |
| | | <style scoped> |
| | | |
| | | /* æ¡ä»¶æ¥è¯¢æ¨¡åçæ ·å¼ */ |
| | | .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; |
| | | } |
| | | /* æ¥ç详æ
å¯¹è¯æ¡æ¨¡åç»æ */ |
| | | </style> |
| | | </style> |
| | |
| | | '', |
| | | this.tableCurrentRowData.exception, |
| | | areaObj, |
| | | '', |
| | | this.tableCurrentRowData.exceptionType |
| | | ) |
| | | }, |
| | |
| | | align="center" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column prop="flag" label="flag" align="center" show-overflow-tooltip /> |
| | | <el-table-column prop="flag" label="æ°æ®æ è¯" 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> |
| | | <div class="dialog-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' || |
| | | tableCurrentRowData.exceptionType == '5' || |
| | | tableCurrentRowData.exceptionType == '6' || |
| | | tableCurrentRowData.exceptionType == '7' || |
| | | tableCurrentRowData.exceptionType == '8' |
| | | " |
| | | >å¼å¸¸æ°æ®ï¼</span |
| | | > |
| | | <span class="table-line-num">{{ dialog.exceptionTotal }}æ¡</span> |
| | | <span v-show="tableCurrentRowData.exceptionType == '0'"> (é»è¾è®¡ç®)</span> |
| | | </el-tag> |
| | | <el-text v-show="tableCurrentRowData.exceptionType == '8'" type="warning" class="dialog-footer-text">æ°æ®æ è¯Aä¸ºæ°æ®é¿æç¼ºå¤±,ç³»ç»èªå¨è¡¥å
¨</el-text> |
| | | <!-- <el-text class="mx-1" type="warning">Warning</el-text> --> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | </template> |
| | |
| | | left: 10px; |
| | | bottom: 10px; |
| | | } |
| | | .dialog-footer{ |
| | | display: flex; |
| | | } |
| | | .dialog-footer-text { |
| | | justify-content: flex-end; |
| | | margin-left: auto; |
| | | font-size: 14px; |
| | | /* color: #333333; */ |
| | | } |
| | | |
| | | /* æ¥ç详æ
å¯¹è¯æ¡æ¨¡åç»æ */ |
| | | </style> |
| | |
| | | default: 'å¼å¸¸' |
| | | }, |
| | | // 徿 å°å |
| | | iconsrc: { |
| | | icon: { |
| | | type: String, |
| | | default: '111' |
| | | }, |
| | |
| | | type:Boolean, |
| | | default:false |
| | | } |
| | | |
| | | }, |
| | | emits:['getAbnormalDataByClick'], |
| | | components: { |
| | |
| | | <el-card> |
| | | <template #header> |
| | | <div class="icon-text"> |
| | | <slot/> |
| | | <!-- <slot/> --> |
| | | <img :src="icon" height="24" width="24" /> |
| | | <div class="exception-name">{{ exceptionName }}</div> |
| | | <el-button type="danger" size="small" class="audit-button" v-show="auditButton_1" @click="openDetail">å®¡æ ¸</el-button> |
| | | </div> |
¶Ô±ÈÐÂÎļþ |
| | |
| | | <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 './AnalysisCard.vue' |
| | | import DutyCompany from '@/sfc/DutyCompany.vue' |
| | | import StreetInfo from '@/sfc/StreetInfo.vue' |
| | | import historyApi from '@/api/historyApi.js' |
| | | import time from '@/utils/time.js' |
| | | import lineChart from '@/utils/chartFunction/lineChart.js' |
| | | import exceptionOption from '@/utils/chartFunction/exceptionOption.js' |
| | | import exception0 from '@/assets/exception/exception0.png' |
| | | import exception1 from '@/assets/exception/exception1.png' |
| | | import exception2 from '@/assets/exception/exception2.png' |
| | | import exception3 from '@/assets/exception/exception3.png' |
| | | import exception4 from '@/assets/exception/exception4.png' |
| | | import exception5 from '@/assets/exception/exception5.png' |
| | | import exception6 from '@/assets/exception/exception6.png' |
| | | import exception7 from '@/assets/exception/exception7.png' |
| | | export default { |
| | | props: { |
| | | // ç¹ä½åå |
| | | siteName: { |
| | | type: String, |
| | | default: '' |
| | | }, |
| | | // æ¥æ¶é´æè
ææ¶é´ |
| | | time:{ |
| | | type:String, |
| | | default:'' |
| | | }, |
| | | // å±ç¤ºé¡µé¢çå
¨é¨ |
| | | showAll: { |
| | | type: Boolean, |
| | | default: true |
| | | }, |
| | | |
| | | // 0ä»£è¡¨æ¥æ¶é´ï¼1ä»£è¡¨ææ¶é´ |
| | | timeType:{ |
| | | type:Number, |
| | | default:-1 |
| | | } |
| | | }, |
| | | components: { |
| | | TimeShortCuts, |
| | | DustLineChart, |
| | | ButtonClick, |
| | | AreaAndmonitorType, |
| | | AnalysisCard, |
| | | DutyCompany, |
| | | StreetInfo |
| | | }, |
| | | data() { |
| | | return { |
| | | // 表åå
容 |
| | | form: { |
| | | // ç«ç¹åç§° |
| | | name: '', |
| | | // è¿ç»´å |
| | | dutyCompany: [], |
| | | // è¡é |
| | | street: [], |
| | | // éæ©çå¼å¸¸ç±»å |
| | | exceptionName: [] |
| | | }, |
| | | beginTime: '', |
| | | endTime: '', |
| | | // è¿åçæ°æ® |
| | | tableData: [], |
| | | // è¡¨æ ¼å±ç¤ºçæ°æ® |
| | | displayData: [], |
| | | // è¡¨æ ¼é«åº¦ |
| | | tableHeight: 400, |
| | | // è¡¨æ ¼æ¾ç¤º |
| | | isTableShow: false, |
| | | // å®¡æ ¸è¾
婿鮿¾ç¤º |
| | | auditButton: false, |
| | | // å½å页 |
| | | currentPage: 1, |
| | | // æ¯é¡µæ¡æ° |
| | | pageSize: 20, |
| | | // è¡¨æ ¼çæ»è®°å½æ° |
| | | total: 0, |
| | | |
| | | // æ¥è¯¢æé®æ æ°æ®æ¶ |
| | | isNoData: { |
| | | exception0: true, |
| | | exception1: true, |
| | | exception2: true, |
| | | exception3: true, |
| | | exception4: true, |
| | | exception5: true, |
| | | exception6: true, |
| | | exception7: true, |
| | | exception8: true |
| | | }, |
| | | // eslint-disable-next-line no-undef |
| | | // å¯¹è¯æ¡æ¾ç¤º |
| | | dialogTableVisible: false, |
| | | // ä¿åå¼å¸¸å¯¹åºçåºéºåç§°å设å¤ç¼å· |
| | | exception: { |
| | | // æçµææç½ |
| | | exception0: [], |
| | | // æ°æ®è¶
ä½ |
| | | exception1: [], |
| | | // è¶
æ |
| | | exception2: [], |
| | | // æ°æ®é¿æ¶æ®µæ æ³¢å¨ |
| | | exception3: [], |
| | | // é级çªåå¼å¸¸ |
| | | exception4: [], |
| | | // 临è¿è¶
æ å¼å¸¸ |
| | | exception5: [], |
| | | // 忥è¶
æ æ¬¡æ°ä¸´çå¼å¸¸ |
| | | exception6: [], |
| | | // æ»å¨å¹³åå¼å¼å¸¸ |
| | | exception7: [], |
| | | // ææçå¼å¸¸ |
| | | exception8: [], |
| | | |
| | | // è¯¥æ¶æ®µçå¼å¸¸æ°é |
| | | exception0Num: 0, |
| | | exception1Num: 0, |
| | | exception2Num: 0, |
| | | exception3Num: 0, |
| | | exception4Num: 0, |
| | | exception5Num: 0, |
| | | exception6Num: 0, |
| | | exception7Num: 0, |
| | | exception8Num: 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 |
| | | }, |
| | | areaColor: null |
| | | } |
| | | }, |
| | | setup() { |
| | | const { isExceedOneMonth } = useCommonFunction() |
| | | return { |
| | | isExceedOneMonth |
| | | } |
| | | }, |
| | | // çå¬ å¤ææé®æ¯å¦å¯ç¹å» |
| | | watch: { |
| | | selectedRowIndex(newVaue) { |
| | | // å¤äºè¡¨æ ¼çæå䏿¡æ°æ® 设置âä¸ä¸æ¡âæé®ä¸å¯ç¹ |
| | | if (newVaue === 0) { |
| | | this.dialog.isPreCantouch = true |
| | | //ç¨æ·å
ç¹äºç¬¬ä¸æ¡ï¼pre为true,ç¶åç¹å»æå䏿¡,next为trueãæ¤æ¶ä¸¤ä¸ªæé®é½è¢«å°é |
| | | if (this.dialog.isNextCantouch == true) { |
| | | this.dialog.isNextCantouch = false |
| | | } |
| | | } |
| | | // å¤äºè¡¨æ ¼ç¬¬ä¸æ¡æ°æ® 设置âä¸ä¸æ¡âæé®ä¸å¯ç¹ |
| | | else if (newVaue === this.displayData.length - 1) { |
| | | this.dialog.isNextCantouch = true |
| | | //ç¨æ·å
ç¹äºè¡¨æ ¼æå䏿¡,next为true,ç¶åç¹å»ç¬¬ä¸æ¡ï¼pre为trueãæ¤æ¶ä¸¤ä¸ªæé®é½è¢«å°é |
| | | if (this.dialog.isPreCantouch == true) { |
| | | this.dialog.isPreCantouch = false |
| | | } |
| | | } |
| | | // å¤äºè¡¨æ ¼çä¸é´è¡ å°æé®è®¾ç½®ä¸ºå¯ç¹å»ç¶æ |
| | | else { |
| | | this.dialog.isPreCantouch = false |
| | | this.dialog.isNextCantouch = false |
| | | } |
| | | }, |
| | | dialogTableVisible() { |
| | | window.addEventListener('resize', this.updateChart) |
| | | }, |
| | | |
| | | // 页é¢å è½½æ¶showAllæä¼åå䏿¬¡ |
| | | // 为true表示çé£è¡å·¡æ£é¡µé¢ |
| | | showAll(){ |
| | | if(this.showAll){ |
| | | this.backExceptionDataAWeekAgo() |
| | | } |
| | | }, |
| | | // siteName(){ |
| | | // if(this.siteName!=''){ |
| | | // this.beginTime = dayjs(this.month).startOf('month').format('YYYY-MM-DD HH:mm:ss') |
| | | // this.endTime = dayjs(this.month).endOf('month').format('YYYY-MM-DD HH:mm:ss') |
| | | // this.backExceptionDataAWeekAgo() |
| | | // this.getShopNames() |
| | | // } |
| | | |
| | | // }, |
| | | |
| | | timeType(){ |
| | | if(this.timeType == '0'){ |
| | | this.beginTime = dayjs(this.time).format('YYYY-MM-DD 00:00:00') |
| | | this.endTime = dayjs(this.time).format('YYYY-MM-DD 23:59:59') |
| | | }else if(this.timeType == '1'){ |
| | | this.beginTime = dayjs(this.time).startOf('month').format('YYYY-MM-DD HH:mm:ss') |
| | | this.endTime = dayjs(this.time).endOf('month').format('YYYY-MM-DD HH:mm:ss') |
| | | } |
| | | this.backExceptionDataAWeekAgo() |
| | | this.getShopNames() |
| | | } |
| | | }, |
| | | 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 + |
| | | this.exception.exception8Num |
| | | 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 + |
| | | this.exception.exception8Num |
| | | 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 - |
| | | (this.exception.exception8Num / this.exceptionAllNum) * 100 |
| | | ).toFixed(1) |
| | | } |
| | | }, |
| | | // ç¬¬ä¸æå¡ç |
| | | cardRow() { |
| | | return [ |
| | | { |
| | | siteName: this.exception.exception4, |
| | | exceptionType: '4', |
| | | exceptionName: 'é级çªå', |
| | | iconSrc: exception4, |
| | | siteNum: this.exception.exception4.length, |
| | | exceptionNum: this.exception.exception4Num, |
| | | isNoDataStatus: this.isNoData.exception4, |
| | | span: 5 |
| | | }, |
| | | { |
| | | siteName: this.exception.exception5, |
| | | exceptionType: '5', |
| | | exceptionName: '临è¿è¶
æ å¼å¸¸', |
| | | iconSrc: exception5, |
| | | siteNum: this.exception.exception5.length, |
| | | exceptionNum: this.exception.exception5Num, |
| | | isNoDataStatus: this.isNoData.exception5, |
| | | span: 5 |
| | | }, |
| | | { |
| | | siteName: this.exception.exception8, |
| | | exceptionType: '8', |
| | | exceptionName: 'ææçå¼å¸¸', |
| | | iconSrc: exception0, |
| | | siteNum: this.exception.exception8.length, |
| | | exceptionNum: this.exception.exception8Num, |
| | | isNoDataStatus: this.isNoData.exception8, |
| | | span: 5 |
| | | }, |
| | | { |
| | | siteName: this.exception.exception6, |
| | | exceptionType: '6', |
| | | exceptionName: '忥è¶
æ æ¬¡æ°ä¸´çå¼å¸¸', |
| | | iconSrc: exception6, |
| | | siteNum: this.exception.exception6.length, |
| | | exceptionNum: this.exception.exception6Num, |
| | | isNoDataStatus: this.isNoData.exception6, |
| | | span: 5 |
| | | }, |
| | | |
| | | { |
| | | siteName: this.exception.exception7, |
| | | exceptionType: '7', |
| | | exceptionName: 'ååè¶å¿å¼å¸¸', |
| | | iconSrc: exception7, |
| | | siteNum: this.exception.exception7.length, |
| | | exceptionNum: this.exception.exception7Num, |
| | | isNoDataStatus: this.isNoData.exception7, |
| | | span: 4 |
| | | }, |
| | | { |
| | | siteName: this.exception.exception0, |
| | | exceptionType: '0', |
| | | exceptionName: 'æ°æ®ç¼ºå¤±å¼å¸¸', |
| | | iconSrc: exception0, |
| | | siteNum: this.exception.exception0.length, |
| | | exceptionNum: this.exception.exception0Num, |
| | | isNoDataStatus: this.isNoData.exception0, |
| | | span: 6 |
| | | }, |
| | | { |
| | | siteName: this.exception.exception1, |
| | | exceptionType: '1', |
| | | exceptionName: 'æ°æ®è¶
ä½', |
| | | iconSrc: exception1, |
| | | siteNum: this.exception.exception1.length, |
| | | exceptionNum: this.exception.exception1Num, |
| | | isNoDataStatus: this.isNoData.exception1, |
| | | span: 6 |
| | | }, |
| | | { |
| | | siteName: this.exception.exception2, |
| | | exceptionType: '2', |
| | | exceptionName: 'è¶
æ ', |
| | | iconSrc: exception2, |
| | | siteNum: this.exception.exception2.length, |
| | | exceptionNum: this.exception.exception2Num, |
| | | isNoDataStatus: this.isNoData.exception2, |
| | | span: 6 |
| | | }, |
| | | { |
| | | siteName: this.exception.exception3, |
| | | exceptionType: '3', |
| | | exceptionName: 'æ°æ®é¿æ¶æ®µæ æ³¢å¨', |
| | | iconSrc: exception3, |
| | | siteNum: this.exception.exception3.length, |
| | | exceptionNum: this.exception.exception3Num, |
| | | isNoDataStatus: this.isNoData.exception3, |
| | | span: 6 |
| | | } |
| | | ] |
| | | }, |
| | | }, |
| | | mounted() { |
| | | |
| | | this.getSiteNume() |
| | | |
| | | // é£è¡å·¡æ£é¡µé¢ï¼è¿å»å è½½ |
| | | if(this.showAll == true){ |
| | | this.backExceptionDataAWeekAgo() |
| | | this.getShopNames() |
| | | } |
| | | }, |
| | | |
| | | methods: { |
| | | /** |
| | | * ææçå¼å¸¸ 设置æçº¿å¾é
置项 |
| | | * @paramï¼ |
| | | * @returnsï¼ |
| | | */ |
| | | validProcess() { |
| | | // xè½´æ°æ® |
| | | let xList = time.ascTime( |
| | | this.tableCurrentRowData.beginTime, |
| | | this.tableCurrentRowData.endTime, |
| | | 15 |
| | | ) |
| | | |
| | | // yè½´æ°æ® |
| | | let yList = [] |
| | | xList.forEach((item) => { |
| | | // æ¥æ¾è¯¥æ¶é´çæ°æ® |
| | | let r = lineChart.findDate(this.dialog.historyData, item) |
| | | if (r) { |
| | | yList.push(r.dustValue) |
| | | } else { |
| | | yList.push(null) |
| | | } |
| | | }) |
| | | // é¢è²èæ¯åºé´ |
| | | // å¾å°æ æ°æ®çæ¶é´ç¹æflagä¸çäºNçæ¶é´ç¹ |
| | | let noDataTime = time.invalidTime(this.dialog.historyData, xList) |
| | | let rangeTime = time.seriesTime(noDataTime, 15) |
| | | // let rangeTime_1 = time.splitTime(rangeTime) |
| | | // å¾å°èæ¯åºé´çé
ç½® |
| | | let areaObj = lineChart.getMarkArea(rangeTime, 'å¼å¸¸') |
| | | // let lineColor = lineChart.getLineColor(rangeTime,xList) |
| | | let lineColor = [] |
| | | // console.log('线段',lineColor); |
| | | // ä¼ å
¥åæ° |
| | | this.dialog.option = exceptionOption.setExceptionChartOption( |
| | | xList, |
| | | yList, |
| | | '', |
| | | '', |
| | | '', |
| | | '', |
| | | this.tableCurrentRowData.exception, |
| | | areaObj, |
| | | lineColor, |
| | | this.tableCurrentRowData.exceptionType |
| | | ) |
| | | }, |
| | | |
| | | 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 |
| | | |
| | | historyApi.queryHistoryData(allTimeArgs).then((result) => { |
| | | this.dialog.allExceptionTimeData = result.data.data |
| | | // æ°æ®ç¼ºå¤±å¼å¸¸æ¶éæ°è®¾ç½®è¡¨æ ¼ |
| | | if (this.tableCurrentRowData.exceptionType == '0') { |
| | | this.setOfflineTbleData() |
| | | } |
| | | |
| | | // xè½´æ¥ææ¶é´ |
| | | let dateList = [] |
| | | // yè½´ è¶
æ æ²¹çæµåº¦ |
| | | let dustValue = [] |
| | | let timeAndValue = {} |
| | | |
| | | // 仿·»å äºé¦ä½åºé´çå¼å§åç»ææ¶é´è¿è¡éå ä¿è¯æ¶é´ä»¥15åé为é´é |
| | | 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.dialog.option = exceptionOption.setExceptionChartOption( |
| | | dateList, |
| | | dustValue, |
| | | exceptionBT, |
| | | exceptionET, |
| | | startIndex, |
| | | endIndex, |
| | | this.tableCurrentRowData.exception, |
| | | '', |
| | | '', |
| | | this.tableCurrentRowData.exceptionType |
| | | ) |
| | | this.flag.banTouch = 0 |
| | | this.loading.lineChart = false |
| | | }) |
| | | }, |
| | | |
| | | /** |
| | | * 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 |
| | | |
| | | // å¾å°ä¸ä¸è¡çæ°æ® |
| | | this.tableCurrentRowData = this.displayData[this.selectedRowIndex] |
| | | |
| | | this.loading.preButton = true |
| | | |
| | | historyApi |
| | | .queryHistoryData({ |
| | | siteName: this.tableCurrentRowData.name, |
| | | beginTime: this.tableCurrentRowData.beginTime, |
| | | endTime: this.tableCurrentRowData.endTime |
| | | }) |
| | | .then((response) => { |
| | | // ä¿åè¿åçè¶
æ æ°æ® |
| | | this.dialog.historyData = response.data.data |
| | | this.dialog.exceptionTotal = response.data.data.length |
| | | // é»è¾å¤ç |
| | | |
| | | if (this.tableCurrentRowData.exceptionType != '8') { |
| | | this.timeAndDataProcessed() |
| | | } else { |
| | | this.loading.lineChart = true |
| | | this.validProcess() |
| | | this.loading.lineChart = false |
| | | this.flag.banTouch = 0 |
| | | } |
| | | this.loading.preButton = false |
| | | }) |
| | | } |
| | | }, |
| | | /** |
| | | * descriptionï¼è·åä¸ä¸æ¡å¼å¸¸ä¿¡æ¯ |
| | | */ |
| | | getNextRowData() { |
| | | // 䏿¯è¡¨æ ¼ç第ä¸è¡ |
| | | if (this.selectedRowIndex !== 0) { |
| | | // ç¹å»è¿ç¨ä¸ éä½ä¸ä¸æ¡æé® å¨è®¾ç½®å®å¾å½¢é
置项åè§£é |
| | | this.flag.banTouch = 1 |
| | | |
| | | //å¾å°ä¸ä¸è¡æ°æ®ç´¢å¼ |
| | | this.selectedRowIndex = this.selectedRowIndex - 1 |
| | | |
| | | // å¾å°ä¸ä¸è¡çæ°æ® |
| | | this.tableCurrentRowData = this.displayData[this.selectedRowIndex] |
| | | |
| | | this.loading.afterButton = true |
| | | |
| | | historyApi |
| | | .queryHistoryData({ |
| | | siteName: this.tableCurrentRowData.name, |
| | | beginTime: this.tableCurrentRowData.beginTime, |
| | | endTime: this.tableCurrentRowData.endTime |
| | | }) |
| | | .then((response) => { |
| | | // ä¿åè¿åçè¶
æ æ°æ® |
| | | this.dialog.historyData = response.data.data |
| | | this.dialog.exceptionTotal = response.data.data.length |
| | | // é»è¾å¤ç |
| | | |
| | | if (this.tableCurrentRowData.exceptionType != '8') { |
| | | this.timeAndDataProcessed() |
| | | } else { |
| | | this.loading.lineChart = true |
| | | this.validProcess() |
| | | this.loading.lineChart = false |
| | | this.flag.banTouch = 0 |
| | | } |
| | | this.loading.afterButton = false |
| | | }) |
| | | } |
| | | }, |
| | | |
| | | /** |
| | | * descriptionï¼ä»åç»ä»¶è·å¾æç«ç¹è¯¥æ¶æ®µçå¼å¸¸æ°æ® |
| | | * @createTime:2023-08-18 |
| | | */ |
| | | backExceptionData(val1, val2) { |
| | | this.displayData = val1 |
| | | this.total = val2 |
| | | }, |
| | | |
| | | // æ¥è¯¢å¼å¸¸æ°æ®çç«ç¹åååæ°é |
| | | queryExceptionSite(url, exceptionType) { |
| | | let params = {} |
| | | params['beginTime'] = this.beginTime |
| | | params['endTime'] = this.endTime |
| | | params['exceptionType'] = exceptionType |
| | | |
| | | if(this.siteName){ |
| | | params['siteName'] = this.siteName |
| | | } |
| | | // if (this.form.street.length != 0) { |
| | | // params['street'] = this.form.street.join() |
| | | // } |
| | | if (this.form.dutyCompany.length != 0) { |
| | | params['dutyCompany'] = this.form.dutyCompany.join() |
| | | } |
| | | return this.$http.get(url, { params: params }) |
| | | }, |
| | | |
| | | /** |
| | | * descriptionï¼å½ç¨æ·æ¹åæ¥è¯¢çæ¶é´åºé´æ¶ï¼ä¼æ ¹æ®è¯¥åºé´æ¥è¯¢åå¼å¸¸çç«ç¹ï¼æ¥è¯¢è¯¥æ¶é´åºé´çåå¼å¸¸æ°é |
| | | * @createTime:2023-08-18 |
| | | */ |
| | | getShopNames() { |
| | | /* æ¥è¯¢å¼å¸¸çç«ç¹ */ |
| | | this.queryExceptionSite('/dust/sitenamecode', 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', 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', 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', 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', 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', 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', 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', 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/sitenamecode', 8).then((result) => { |
| | | this.exception.exception8 = result.data.data |
| | | if (result.data.data.length == 0) { |
| | | this.isNoData.exception8 = true |
| | | return |
| | | } |
| | | |
| | | this.isNoData.exception8 = false |
| | | }) |
| | | |
| | | /* å¼å¸¸å¼å¸¸æ°é */ |
| | | this.queryExceptionSite('/dust/exceptionnum', 0).then((result) => { |
| | | this.exception.exception0Num = result.data.data |
| | | }) |
| | | this.queryExceptionSite('/dust/exceptionnum', 1).then((result) => { |
| | | this.exception.exception1Num = result.data.data |
| | | }) |
| | | this.queryExceptionSite('/dust/exceptionnum', 2).then((result) => { |
| | | this.exception.exception2Num = result.data.data |
| | | }) |
| | | |
| | | this.queryExceptionSite('/dust/exceptionnum', 3).then((result) => { |
| | | this.exception.exception3Num = result.data.data |
| | | }) |
| | | |
| | | this.queryExceptionSite('/dust/exceptionnum', 4).then((result) => { |
| | | this.exception.exception4Num = result.data.data |
| | | }) |
| | | this.queryExceptionSite('/dust/exceptionnum', 5).then((result) => { |
| | | this.exception.exception5Num = result.data.data |
| | | }) |
| | | this.queryExceptionSite('/dust/exceptionnum', 6).then((result) => { |
| | | this.exception.exception6Num = result.data.data |
| | | }) |
| | | this.queryExceptionSite('/dust/exceptionnum', 7).then((result) => { |
| | | this.exception.exception7Num = result.data.data |
| | | }) |
| | | this.queryExceptionSite('/dust/exceptionnum', 8).then((result) => { |
| | | this.exception.exception8Num = result.data.data |
| | | }) |
| | | }, |
| | | |
| | | /** |
| | | * descriptionï¼æ¾ç¤ºå¯¹è¯æ¡,è¿å该å¼å¸¸æ¶é´æ®µçæææ°æ® |
| | | * @paramï¼ç¹å»âæ¥ç详æ
âçè¯¥è¡ææåæ®µæ°æ® |
| | | * @createTime:2023-08-18 |
| | | */ |
| | | showDialog(row) { |
| | | // æå¼å¯¹è¯æ¡ |
| | | this.dialogTableVisible = true |
| | | |
| | | // ä¿åå½åè¡æ°æ® |
| | | this.tableCurrentRowData = row |
| | | |
| | | // è·åå½åè¡çç´¢å¼ |
| | | this.selectedRowIndex = this.displayData.indexOf(row) |
| | | |
| | | //æ ¹æ®å½åè¡çç¼å·ï¼èµ·å§æ¶é´æ¥ 请æ±å¼å¸¸æ°æ® |
| | | // 对请æ±å°çæ°æ®è¿è¡é¦å°¾æ¼æ¥ |
| | | // å¾å°åå宿´æ°æ®è¿è¡ç»å¶å¾å½¢ |
| | | |
| | | historyApi |
| | | .queryHistoryData({ |
| | | siteName: row.name, |
| | | beginTime: row.beginTime, |
| | | endTime: row.endTime |
| | | }) |
| | | .then((response) => { |
| | | // ä¿åè¿åçè¶
æ æ°æ® |
| | | this.dialog.historyData = response.data.data |
| | | this.dialog.exceptionTotal = response.data.data.length |
| | | // é»è¾å¤ç |
| | | |
| | | if (this.tableCurrentRowData.exceptionType != '8') { |
| | | this.timeAndDataProcessed() |
| | | } else { |
| | | this.loading.lineChart = true |
| | | this.validProcess() |
| | | this.loading.lineChart = false |
| | | this.flag.banTouch = 0 |
| | | } |
| | | }) |
| | | }, |
| | | /** |
| | | * 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.street.length != 0) { |
| | | // params['street'] = this.form.street.join() |
| | | // } |
| | | if (this.form.dutyCompany.length != 0) { |
| | | params['dutyCompany'] = this.form.dutyCompany.join() |
| | | } |
| | | params['beginTime'] = this.beginTime |
| | | params['endTime'] = this.endTime |
| | | |
| | | this.$http.get('/dust/exceptiondata2', { params: params }).then((response) => { |
| | | // ä¿åè¿åç |
| | | 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 |
| | | } |
| | | |
| | | params['beginTime'] = this.beginTime |
| | | params['endTime'] = this.endTime |
| | | console.log('name',this.siteName) |
| | | 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 v-show="!showAll"> |
| | | <span class="site-text"> ç¹ä½åç§°:</span> |
| | | <span> {{ this.siteName }}</span> |
| | | </el-form-item> |
| | | |
| | | <el-form-item v-show="showAll"> |
| | | <DutyCompany @submitDutyCompanyValue="(n) => (form.dutyCompany = n)"> </DutyCompany> |
| | | </el-form-item> |
| | | |
| | | <!-- <el-form-item v-show="showAll"> |
| | | <StreetInfo @submitStreetValue="(n) => (form.street = n)"> </StreetInfo> |
| | | </el-form-item> --> |
| | | |
| | | <el-form-item> |
| | | <TimeShortCuts timeType="day" @submit-time="giveTime" :beginAndEndTime="[beginTime,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"> |
| | | <el-col v-for="item in cardRow" :key="item.exceptionType" :span="item.span"> |
| | | <AnalysisCard |
| | | :site-name="item.siteName" |
| | | :exception-type="item.exceptionType" |
| | | :begin-time="beginTime" |
| | | :end-time="endTime" |
| | | :exception-name="item.exceptionName" |
| | | :site-num="item.siteNum" |
| | | :exception-num="item.exceptionNum" |
| | | :exception-all-num="exceptionAllNum" |
| | | :site-num-all="siteTotal" |
| | | :isNoDataStatus="item.isNoDataStatus" |
| | | :icon="item.iconSrc" |
| | | @get-abnormal-data-by-click="getAbnormalDataByClick" |
| | | class="card-row" |
| | | > |
| | | > |
| | | </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> |
| | | |
| | | <!-- å¾å½¢ --> |
| | | <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 prop="lst" label="ééæ¶é´" align="center" show-overflow-tooltip /> |
| | | <el-table-column |
| | | prop="dustValue" |
| | | label="TSP(mg/m³)" |
| | | align="center" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column prop="flag" label="æ°æ®æ è¯" align="center" show-overflow-tooltip /> |
| | | </el-table> |
| | | </div> |
| | | <template #footer> |
| | | <div class="dialog-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' || |
| | | tableCurrentRowData.exceptionType == '5' || |
| | | tableCurrentRowData.exceptionType == '6' || |
| | | tableCurrentRowData.exceptionType == '7' || |
| | | tableCurrentRowData.exceptionType == '8' |
| | | " |
| | | >å¼å¸¸æ°æ®ï¼</span |
| | | > |
| | | <span class="table-line-num">{{ dialog.exceptionTotal }}æ¡</span> |
| | | <span v-show="tableCurrentRowData.exceptionType == '0'"> (é»è¾è®¡ç®)</span> |
| | | </el-tag> |
| | | <el-text v-show="tableCurrentRowData.exceptionType == '8'" type="warning" class="dialog-footer-text">æ°æ®æ è¯Aä¸ºæ°æ®é¿æç¼ºå¤±,ç³»ç»èªå¨è¡¥å
¨</el-text> |
| | | </div> |
| | | </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; */ |
| | | justify-content: flex-start; |
| | | } |
| | | .dialog-footer{ |
| | | display: flex; |
| | | } |
| | | .dialog-footer-text { |
| | | justify-content: flex-end; |
| | | margin-left: auto; |
| | | font-size: 14px; |
| | | /* color: #333333; */ |
| | | } |
| | | /* æ¥ç详æ
å¯¹è¯æ¡æ¨¡åç»æ */ |
| | | </style> |
¶Ô±ÈÐÂÎļþ |
| | |
| | | <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 statisticApi from '@/api/statistic/statisticApi.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', |
| | | |
| | | orderProp: 'dayAvg', |
| | | order: 'descending' |
| | | } |
| | | }, |
| | | setup() { |
| | | // å¼å
¥ ç¾åå·æ¯è¾å¤§å° 导åºåè½ |
| | | const { cmpp, exportToExcel, percentFormatter } = useCommonFunction() |
| | | return { cmpp, exportToExcel, percentFormatter } |
| | | }, |
| | | |
| | | 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 (row.dayOnline < 0.9) { |
| | | return 'red-color' |
| | | } |
| | | } |
| | | |
| | | if (columnIndex == 8) { |
| | | if (row.dayValid < 0.9) { |
| | | 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(p) { |
| | | if (p) { |
| | | this.orderProp = p.prop |
| | | this.order = p.order |
| | | } |
| | | let params = { |
| | | page: this.currentPage, |
| | | pageSize: this.pageSize, |
| | | siteName: '', |
| | | orderProp: this.orderProp, |
| | | //æåº ascending æ£åºï¼descending éåº |
| | | asc: this.order == 'ascending' |
| | | } |
| | | 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 |
| | | statisticApi.fetchDayStatisticByOrder(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.name) |
| | | const timeType = '0' |
| | | const jumpPage = '2' |
| | | this.$router.push(`/exceptionDetail/${encodedSiteName}/${row.lst}/${timeType}/${jumpPage}`) |
| | | } |
| | | } |
| | | } |
| | | </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" |
| | | @sort-change="fetchData" |
| | | > |
| | | <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="custom" show-overflow-tooltip /> |
| | | <el-table-column prop="dayAvg" label="æ¥å¹³åå¼" sortable="custom" show-overflow-tooltip /> |
| | | <el-table-column prop="min" label="æ¥æå°å¼" sortable="custom" show-overflow-tooltip /> |
| | | <el-table-column prop="max" label="æ¥æå¤§å¼" sortable="custom" show-overflow-tooltip /> |
| | | <el-table-column prop="dayOnline" label="æ¥å¨çº¿ç" sortable="custom" show-overflow-tooltip> |
| | | <template #default="{ row }"> |
| | | {{ percentFormatter(row.dayOnline) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="dayValid" label="æ¥ææç" sortable="custom" show-overflow-tooltip> |
| | | <template #default="{ row }"> |
| | | {{ percentFormatter(row.dayValid) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="dayExceeding" label="æ¥è¶
æ ç" sortable="custom" show-overflow-tooltip> |
| | | <template #default="{ row }"> |
| | | {{ percentFormatter(row.dayExceeding) }} |
| | | </template> |
| | | </el-table-column> |
| | | </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> |
| | |
| | | <!-- æ¥åå¼ --> |
| | | |
| | | <script> |
| | | import InputSearch from '@/sfc/InputSearch.vue' |
| | | import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue' |
| | | import DustRadarChart from './components/DustRadarChart.vue' |
| | | import exceptionApi from '@/api/exceptionApi.js' |
| | | import LineChart from './components/LineChart.vue' |
| | | import index from '@/utils/risk_estimate_common_function/index.js' |
| | | import ButtonClick from '@/sfc/ButtonClick.vue' |
| | | import dayjs from 'dayjs' |
| | | import MonthSelect from '@/sfc/MonthSelect.vue' |
| | | import riskApi from '@/api/risk/riskApi.js' |
| | | import riskValue from '@/utils/risk_estimate_common_function/riskValue.js' |
| | | import lineChart from '@/utils/chartFunction/lineChart.js' |
| | | import siteInfo from '@/api/site/siteInfo.js' |
| | | export default { |
| | | components: { |
| | | LineChart, |
| | | InputSearch, |
| | | AreaAndmonitorType, |
| | | DustRadarChart, |
| | | ButtonClick, |
| | | MonthSelect |
| | | }, |
| | | data() { |
| | | return { |
| | | isNoData: false, |
| | | loading: false, |
| | | screenLoading: false, |
| | | parentDataFlag: false, |
| | | chartData: [], |
| | | chartData1: {}, //ä¿åæ¥è¯¢çç»æ |
| | | chartData2: {}, |
| | | chartData3: {}, |
| | | chartData4: {}, |
| | | begin: '', //å¼å§æ¶é´ |
| | | end: '', //ç»ææ¶é´ |
| | | |
| | | form: { |
| | | // ç«ç¹åç§° |
| | | name: '', |
| | | // 设å¤ç¼å· |
| | | number: '3234', |
| | | // å¼å§æ¶é´ |
| | | beginTime: '', |
| | | // ç»ææ¶é´ |
| | | endTime: '' |
| | | }, |
| | | month: '', |
| | | |
| | | // æçº¿å¾é
置项 |
| | | option: {}, |
| | | // æ°æ®æ¸
å |
| | | bill: { |
| | | min: '', |
| | | max: '', |
| | | avg: '', |
| | | online: 100, |
| | | valid: 100, |
| | | exceeding: 0, |
| | | |
| | | // å
¸åå¼å¸¸å¤ç°ç |
| | | exceptionRecurrence: 0, |
| | | // å¼å¸¸ç±»åæ®èé度 |
| | | exceptionTypeAggregation: 0 |
| | | }, |
| | | |
| | | // æ¥è¯¢æé®å è½½ææ |
| | | queryButton: false, |
| | | |
| | | // é£é©å¼æåååçç«ç¹ |
| | | top_10_sites_with_risk_values: [{ name: '', riskValue: 0.2 }], |
| | | // é£é©å¼ |
| | | weight: '', |
| | | // æ æ°æ®é
ç½®æ¶é´æ®µ |
| | | areaColor: [], |
| | | // æç«ç¹çåºæ¬ä¿¡æ¯ |
| | | siteInfo:{} |
| | | } |
| | | }, |
| | | mounted() { |
| | | // // å è½½é£é©å¼æé«çç«ç¹æ°æ® |
| | | this.ShowDefaultData() |
| | | }, |
| | | computed: { |
| | | // é£é©ç级 |
| | | riskGradeAndAdvice() { |
| | | return riskApi.getRiskAdvice(this.weight) |
| | | } |
| | | }, |
| | | |
| | | methods: { |
| | | // æ¥è¯¢ç«ç¹ç»è®¡ä¿¡æ¯ |
| | | async querySiteStaticsInfo(row) { |
| | | this.form.name = row.siteName |
| | | // æ´æ°ç»è®¡æ°æ® |
| | | await this.getAnalysisData() |
| | | // 计ç®é£é©å¼ |
| | | this.calRiskValue() |
| | | import CompDataRiskModel from '@/views/risk_assessment/components/CompDataRiskModel.vue' |
| | | export default { |
| | | components:{ |
| | | CompDataRiskModel |
| | | }, |
| | | data() { |
| | | return{ |
| | | |
| | | // æ ¼å¼åæä»½ |
| | | giveMonth(val) { |
| | | //å°ä¸å½æ åæ¶é´è½¬ä¸ºæå®æ ¼å¼(该ç»ä»¶è¿åçæ åæ¶é´çæ ¼å¼ï¼æä»¥å¿
é¡»çå è¿ä¸ªå½æ°) |
| | | this.month = dayjs(val).format('YYYY-MM-DD') |
| | | // åæ¶æ´æ°å¼å§åç»ææ¶é´ |
| | | this.form.beginTime = dayjs(this.month).startOf().format('YYYY-MM-DD HH:mm:ss') |
| | | this.form.endTime = dayjs(this.month).endOf('month').format('YYYY-MM-DD HH:mm:ss') |
| | | }, |
| | | |
| | | /** |
| | | * é£é©è¯ä¼°æé® |
| | | * @paramï¼ |
| | | * @returnsï¼ |
| | | */ |
| | | riskAssessment() { |
| | | // æ´æ°æåæ¸
å |
| | | this.getRiskRank() |
| | | // æ´æ°è¯¥ç«ç¹çæå±åºæ¯åè¿ç»´å |
| | | this.getSiteInfo(this.form.number) |
| | | // æ´æ°åææ°æ® |
| | | this.getAnalysisData() |
| | | // 计ç®é£é©å¼ |
| | | this.calRiskValue() |
| | | }, |
| | | |
| | | // æ´æ°åææ°æ® |
| | | getAnalysisData() { |
| | | // æ¥ç»è®¡æ°æ® |
| | | this.fetchDayAnalysisData() |
| | | // å¼å¸¸æ°æ® |
| | | this.fetchExceptionAnalysisData() |
| | | }, |
| | | |
| | | findObjectByPropertyValue(array, property, value) { |
| | | return array.find((obj) => obj[property] === value) |
| | | }, |
| | | |
| | | // æ¤é¡µé¢æå¼æ¶ |
| | | ShowDefaultData() { |
| | | // é»è®¤å è½½å±ç¤ºçå
容 |
| | | this.updateOriginPage() |
| | | }, |
| | | |
| | | // å è½½é»è®¤å±ç¤ºçå
容 |
| | | async updateOriginPage() { |
| | | this.screenLoading = true |
| | | // æ´æ°æåæ¸
åï¼å¹¶å¾å°é£é©å¼æé«ç«ç¹ |
| | | let arr = await this.getRiskRank() |
| | | this.form.name = arr[0] |
| | | this.form.number = arr[1] |
| | | this.screenLoading = false |
| | | |
| | | // æ´æ°è¯¥ç«ç¹çæå±åºæ¯åè¿ç»´å |
| | | this.getSiteInfo(this.form.number) |
| | | // æ´æ°æ¥ç»è®¡æ°æ® |
| | | this.getAnalysisData() |
| | | // 计ç®é£é©å¼ |
| | | this.calRiskValue() |
| | | |
| | | }, |
| | | |
| | | // 计ç®é£é©å¼ |
| | | 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) |
| | | }) |
| | | }, |
| | | |
| | | // æ ¹æ®ç®åç«ç¹ï¼æä»½ï¼æ¥æçº¿å¾æ¥ç»è®¡æ°æ® |
| | | fetchDayAnalysisData() { |
| | | let params = {} |
| | | if (this.form.name) { |
| | | params['siteName'] = this.form.name |
| | | } |
| | | if (this.form.beginTime) { |
| | | params['beginTime'] = this.form.beginTime |
| | | } |
| | | if (this.form.endTime) { |
| | | params['endTime'] = this.form.endTime |
| | | } |
| | | this.loading = true |
| | | this.queryButton = true |
| | | exceptionApi |
| | | .analysisdata(this.form.name, this.form.beginTime, this.form.endTime, 'day') |
| | | .then((response) => { |
| | | this.chartData = response.data.data |
| | | this.loading = false |
| | | this.queryButton = false |
| | | if (response.data.data.length == 0) { |
| | | this.isNoData = true |
| | | return |
| | | } |
| | | // åææ°æ®ä¸çææ©æ¶é´ |
| | | let begin = this.chartData[0].lst |
| | | // åææ°æ®ä¸çæææ¶é´ |
| | | let end = this.chartData[this.chartData.length - 1].lst |
| | | |
| | | // ç§»é¤ç©ºæ°æ®ç¶æ |
| | | this.isNoData = false |
| | | |
| | | // æ æ°æ®çæ¶é´æ®µ |
| | | let noDataTimeInteval = lineChart.backNoDataInteval(begin, end) |
| | | // æ æ°æ®é
ç½®æ¶é´æ®µ |
| | | this.areaColor = lineChart.getMarkArea(noDataTimeInteval) |
| | | this.setChart() |
| | | // æçº¿å¾æ°æ® |
| | | let temp = index.calBillData(this.chartData, begin, end) |
| | | this.bill.min = temp['min'] |
| | | this.bill.max = temp['max'] |
| | | |
| | | this.bill.avg = temp['avg'] |
| | | this.bill.online = temp['online'] |
| | | this.bill.valid = temp['valid'] |
| | | this.bill.exceeding = temp['exceeding'] |
| | | }) |
| | | }, |
| | | // ä¼ä¸å¼å¸¸ç»è®¡æ°æ® |
| | | fetchExceptionAnalysisData() { |
| | | exceptionApi |
| | | .exceptiondata1({ |
| | | siteName: this.form.name, |
| | | beginTime: this.form.beginTime, |
| | | endTime: this.form.endTime |
| | | }) |
| | | .then((res) => { |
| | | let obj = index.calRecur(res.data.data) |
| | | this.bill.exceptionRecurrence = obj['exceptionRecurrence'] |
| | | this.bill.exceptionTypeAggregation = obj['exceptionTypeAggregation'] |
| | | }) |
| | | }, |
| | | |
| | | // éæ©å
¶ä»å¼ç±»åæ¶ |
| | | setChart() { |
| | | if (this.chartData.length) { |
| | | // æå»ºæçº¿å¾x,yæ°æ® |
| | | let obj = lineChart.getLineChartXYData( |
| | | this.chartData, |
| | | this.form.beginTime, |
| | | this.form.endTime |
| | | ) |
| | | |
| | | this.chartData1 = { |
| | | x: obj.xData, |
| | | y: obj.yAvg |
| | | } |
| | | this.chartData2 = { |
| | | x: obj.xData, |
| | | y: obj.yOnline |
| | | } |
| | | this.chartData3 = { |
| | | x: obj.xData, |
| | | y: obj.yValid |
| | | } |
| | | this.chartData4 = { |
| | | x: obj.xData, |
| | | y: obj.yExceed |
| | | } |
| | | } |
| | | }, |
| | | mounted() { |
| | | |
| | | // å¾å°å10é£é©æåæ¸
å |
| | | async getRiskRank() { |
| | | let response = await riskApi.queryRiskValue('', this.month, 'month') |
| | | |
| | | let tableData = riskValue.backComprehensiveRiskTableData(response.data.data) |
| | | |
| | | this.top_10_sites_with_risk_values = this.getTopRiskData(tableData, 10) |
| | | if (this.top_10_sites_with_risk_values.length != 0) { |
| | | // è¡¨æ ¼æé£é©å¼ååæå |
| | | this.$nextTick(() => { |
| | | this.$refs.table.sort('riskValue', 'descending') |
| | | }) |
| | | // ä¿åé£é©å¼æé«çç«ç¹åç§°å设å¤ç¼å· |
| | | let temp = [] |
| | | temp.push( |
| | | this.top_10_sites_with_risk_values[0].siteName, |
| | | this.top_10_sites_with_risk_values[0].mnCode |
| | | ) |
| | | return temp |
| | | } |
| | | }, |
| | | /** |
| | | * éåºæåï¼è¿åéåºånumçå
ç´ |
| | | * @paramï¼ å¯¹è±¡æ°ç»ï¼è¿åçæ°é |
| | | */ |
| | | getTopRiskData(arr, num) { |
| | | // æç
§riskValueéåºæå |
| | | arr.sort((a, b) => b.riskValue - a.riskValue) |
| | | // è·åånum个å
ç´ |
| | | return arr.slice(0, num) |
| | | }, |
| | | /** |
| | | * æ ¹æ®è®¾å¤ç¼å·æ¥è¯¢ç«ç¹åºæ¬ä¿¡æ¯ |
| | | * @paramï¼ è®¾å¤ç¼å· |
| | | */ |
| | | getSiteInfo(mnCode) { |
| | | siteInfo.querySiteInfoByMnCode(mnCode).then(response => { |
| | | this.siteInfo = response.data.data[0] |
| | | }) |
| | | }, |
| | | methods: { |
| | | |
| | | openDetail() { |
| | | const encodedSiteName = encodeURIComponent(this.form.name) |
| | | this.$router.push(`/exceptionDetail/${encodedSiteName}/${this.month}`) |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <template> |
| | | <el-form :inline="true" :model="form"> |
| | | <el-form-item class="form-item"> |
| | | <AreaAndmonitorType></AreaAndmonitorType> |
| | | </el-form-item> |
| | | <el-form-item class="form-item"> |
| | | <InputSearch |
| | | :site-name="form.name" |
| | | isNeedDefaultSite="0" |
| | | @submit-value="(n) => (form.name = n)" |
| | | @submit-mncode="(n) => (form.number = n)" |
| | | ></InputSearch> |
| | | </el-form-item> |
| | | |
| | | <el-form-item> |
| | | <MonthSelect @submit-value="giveMonth"></MonthSelect> |
| | | </el-form-item> |
| | | |
| | | <el-form-item> |
| | | <ButtonClick |
| | | content="é£é©è¯ä¼°" |
| | | type="primary" |
| | | :loading="queryButton" |
| | | @do-search="riskAssessment" |
| | | ></ButtonClick> |
| | | </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> |
| | | <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> |
| | | |
| | | <el-row :gutter="10"> |
| | | <el-col :span="5"> |
| | | <el-card shadow="never" class="table-class"> |
| | | <el-table |
| | | ref="table" |
| | | :highlight-current-row="true" |
| | | :data="top_10_sites_with_risk_values" |
| | | :default-sort="{ prop: 'riskValue', order: 'descending' }" |
| | | height="540" |
| | | > |
| | | |
| | | <el-table-column |
| | | type="index" |
| | | label="åºå·" |
| | | fixed |
| | | width="52" |
| | | show-overflow-tooltip |
| | | align="center" |
| | | /> |
| | | <el-table-column |
| | | prop="siteName" |
| | | label="ç¹ä½åç§°" |
| | | show-overflow-tooltip |
| | | width="97" |
| | | align="center" |
| | | > |
| | | <template #default="{ row }"> |
| | | <el-button |
| | | type="primary" |
| | | text |
| | | class="table-button" |
| | | @click="querySiteStaticsInfo(row)" |
| | | > |
| | | <span class="risk-rank-site"> |
| | | {{ row.siteName }} |
| | | </span> |
| | | </el-button |
| | | > |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="riskValue" |
| | | label="é£é©å¼" |
| | | sortable |
| | | show-overflow-tooltip |
| | | align="center" |
| | | /> |
| | | </el-table> |
| | | </el-card> |
| | | </el-col> |
| | | |
| | | <el-col :span="11"> |
| | | <el-card shadow="never" class="table-class"> |
| | | <DustRadarChart |
| | | :name="[ |
| | | 'æ°æ®ææé£é©', |
| | | 'å
¸åå¼å¸¸å¤ç°é£é©', |
| | | 'å¼å¸¸ç±»åèéé£é©', |
| | | 'è¶
æ å¼å¸¸é£é©', |
| | | 'æ°æ®å¨çº¿é£é©' |
| | | ]" |
| | | :yData="[ |
| | | bill.valid, |
| | | bill.exceptionRecurrence, |
| | | bill.exceptionTypeAggregation, |
| | | bill.exceeding, |
| | | bill.online |
| | | ]" |
| | | ></DustRadarChart> |
| | | </el-card> |
| | | </el-col> |
| | | |
| | | <el-col :span="4"> |
| | | <el-card shadow="never" class="card-height risk-card"> |
| | | <template #header> |
| | | <h1 |
| | | :class="{ |
| | | 'weightColor-low': weight < 0.2, |
| | | 'weightColor-medium': weight >= 0.2 && weight < 0.6, |
| | | 'weightColor-heigh': weight >= 0.6 |
| | | }" |
| | | > |
| | | é£é©å¼(0~1)ï¼{{ weight }} |
| | | </h1> |
| | | </template> |
| | | <div class="risk-text-container"> |
| | | |
| | | <div class="risk-grade"> |
| | | <h1 class="sub-title">é£é©ç级ï¼</h1> |
| | | <span class="sub-title">{{ riskGradeAndAdvice.riskGrade }} </span> |
| | | </div> |
| | | |
| | | <div class="risk-advice"> |
| | | <h1 class="sub-title">管æ§å»ºè®®ï¼</h1> |
| | | <div v-for="item in riskGradeAndAdvice.riskAdvice" :key="item" class="risk-advice-text"> |
| | | {{ item }} |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="grade-instance"> |
| | | <div class="container"> |
| | | <div class="block-color heigh"></div> |
| | | <div>é«é£é©(â¥0.6)</div> |
| | | </div> |
| | | <div class="container"> |
| | | <div class="block-color medium"></div> |
| | | <div>ä¸é£é©(0.2~0.6)</div> |
| | | </div> |
| | | <div class="container"> |
| | | <div class="block-color low"></div> |
| | | <div>ä½é£é©(ï¼0.2)</div> |
| | | </div> |
| | | </div> |
| | | |
| | | </div> |
| | | </el-card> |
| | | </el-col> |
| | | |
| | | |
| | | <el-col :span="4"> |
| | | <el-card shadow="never" class="card-height"> |
| | | <template #header> |
| | | <span class="title-16">é£é©è¯¦æ
</span> |
| | | </template> |
| | | |
| | | <el-form> |
| | | <el-form-item label="æå¤§å¼ï¼"> {{ bill.max }} mg/m³ </el-form-item> |
| | | <el-form-item label="æå°å¼ï¼"> {{ bill.min }} mg/m³ </el-form-item> |
| | | <el-form-item label="æ°æ®ææçï¼"> {{ bill.online }}% </el-form-item> |
| | | <el-form-item label="æ°æ®å¨çº¿çï¼"> {{ bill.valid }}% </el-form-item> |
| | | <el-form-item label="æ°æ®è¶
æ çï¼"> {{ bill.exceeding }}% </el-form-item> |
| | | <el-form-item label="å¼å¸¸ç±»åèé度ï¼"> |
| | | {{ bill.exceptionTypeAggregation * 100 }}% |
| | | </el-form-item> |
| | | <el-form-item label="å
¸åå¼å¸¸å¤ç°çï¼"> |
| | | {{ bill.exceptionRecurrence * 100 }}% |
| | | </el-form-item> |
| | | </el-form> |
| | | </el-card> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-card shadow="never" class="card-value"> |
| | | <LineChart |
| | | title="æ¥åå¼" |
| | | :chartData="chartData1" |
| | | yName="mg/m³" |
| | | seriesName="æ¥åå¼" |
| | | :areaColor="areaColor" |
| | | > |
| | | </LineChart> |
| | | </el-card> |
| | | </el-col> |
| | | |
| | | <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="%" |
| | | seriesName="æ¥ææç" |
| | | :areaColor="areaColor" |
| | | > |
| | | </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" /> |
| | | <CompDataRiskModel :show-all="true"/> |
| | | </template> |
| | | |
| | | <style scoped> |
| | | .el-form { |
| | | margin: 10px; |
| | | } |
| | | .form-item { |
| | | margin-top: 10px; |
| | | } |
| | | .chart-container { |
| | | margin-left: 10px; |
| | | } |
| | | .time-text { |
| | | font-size: 14px; |
| | | color: #333333; |
| | | letter-spacing: 1px; |
| | | |
| | | } |
| | | .el-card { |
| | | margin-top: 15px; |
| | | border-radius: 9px; |
| | | } |
| | | .chart-container { |
| | | width: 98%; |
| | | /* height: 600px; */ |
| | | } |
| | | <style scoped> |
| | | |
| | | .card-height { |
| | | height: 570px; |
| | | } |
| | | .el-header { |
| | | background-color: #010408; |
| | | color: #333; |
| | | line-height: 60px; |
| | | } |
| | | .risk-advice { |
| | | /* margin: 20px 0px; */ |
| | | } |
| | | .container { |
| | | display: flex; |
| | | margin-bottom: 10px; |
| | | } |
| | | .grade-instance { |
| | | /* margin-top: 50px; */ |
| | | } |
| | | .block-color { |
| | | width: 1em; |
| | | height: 1em; |
| | | margin-right: 10px; |
| | | margin-top: 3px; |
| | | } |
| | | .heigh { |
| | | background-color: red; |
| | | } |
| | | .medium { |
| | | background-color: #fadc19; |
| | | } |
| | | .low { |
| | | background-color: #9fdb1d; |
| | | } |
| | | |
| | | .el-text { |
| | | align-self: left; |
| | | } |
| | | .el-form-item { |
| | | margin-bottom: 20px; |
| | | } |
| | | :deep().el-form-item__content { |
| | | justify-content: flex-end; |
| | | } |
| | | .title-16 { |
| | | font-size: 16px; |
| | | font-weight: bold; |
| | | } |
| | | .weightColor-low { |
| | | color: #9fdb1d; |
| | | font-size: 16px; |
| | | } |
| | | .weightColor-medium { |
| | | color: #dabe09; |
| | | font-size: 16px; |
| | | } |
| | | .weightColor-heigh { |
| | | color: red; |
| | | font-size: 16px; |
| | | } |
| | | .risk-grade { |
| | | display: flex; |
| | | } |
| | | :deep().el-table__header-wrapper { |
| | | color: red; |
| | | } |
| | | /* .wait-name { |
| | | width: 500px; |
| | | height: 600px; |
| | | } */ |
| | | .table-class { |
| | | /* border: 1px solid blue; */ |
| | | /* margin: 20px 0px 20px 0px; */ |
| | | height: 570px; |
| | | } |
| | | |
| | | .table-button { |
| | | letter-spacing: 1px; |
| | | text-decoration: underline; |
| | | /* border-radius: 0px; */ |
| | | |
| | | } |
| | | .risk-rank-site { |
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | width: 80px; |
| | | } |
| | | .site-name { |
| | | margin-left: 20px; |
| | | } |
| | | .risk-advice-text { |
| | | font-size: 14px; |
| | | color: #333333; |
| | | letter-spacing: 1.5px; |
| | | margin-top: 10px; |
| | | } |
| | | .sub-title { |
| | | font-size: 14px; |
| | | color: #333333; |
| | | } |
| | | |
| | | .risk-text-container{ |
| | | height: 490px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: space-around; |
| | | } |
| | | |
| | | .el-tag{ |
| | | margin-left: 25px; |
| | | font-size: 14px; |
| | | vertical-align: baseline; |
| | | } |
| | | .exception-button { |
| | | vertical-align: baseline; |
| | | margin-left: 150px; |
| | | } |
| | | |
| | | .site-info-detail{ |
| | | display: flex; |
| | | justify-content: space-between; |
| | | } |
| | | .mx-1{ |
| | | margin-left: 100px; |
| | | } |
| | | </style> |
| | | </style> |
| | |
| | | <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, |
| | |
| | | // å¯¼åºæé®å è½½ä¸ |
| | | 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 |
| | | riskApi.queryRiskValue('', this.form.month, 'month').then((response) => { |
| | | this.loading = false |
| | | this.queryButton = false |
| | | if (response.data.data.total == 0) { |
| | | 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/>') |
| | | }, |
| | | |
| | | /** |
| | | * 导åºä¸ºExcel |
| | | |
| | | */ |
| | | 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) |
| | | const jumpPage = 1 |
| | | this.$router.push(`/exceptionDetail/${encodedSiteName}/${this.form.month}/1/${jumpPage}`) |
| | | } |
| | | } |
| | | } |
| | | </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> |
¶Ô±ÈÐÂÎļþ |
| | |
| | | <!-- æ¥åå¼ --> |
| | | |
| | | <script> |
| | | import InputSearch from '@/sfc/InputSearch.vue' |
| | | import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue' |
| | | import exceptionApi from '@/api/exceptionApi.js' |
| | | |
| | | import DustRadarChart from '@/views/risk_assessment/components/DustRadarChart.vue' |
| | | import LineChart from '@/views/risk_assessment/components/LineChart.vue' |
| | | |
| | | import index from '@/utils/risk_estimate_common_function/index.js' |
| | | import ButtonClick from '@/sfc/ButtonClick.vue' |
| | | import dayjs from 'dayjs' |
| | | import MonthSelect from '@/sfc/MonthSelect.vue' |
| | | import riskApi from '@/api/risk/riskApi.js' |
| | | import riskValue from '@/utils/risk_estimate_common_function/riskValue.js' |
| | | import lineChart from '@/utils/chartFunction/lineChart.js' |
| | | import siteInfo from '@/api/site/siteInfo.js' |
| | | export default { |
| | | props: { |
| | | // ç¹ä½åå |
| | | siteName: { |
| | | type: String, |
| | | default: '' |
| | | }, |
| | | // æä»½ |
| | | time: { |
| | | type: String, |
| | | default: '' |
| | | }, |
| | | // å±ç¤ºé¡µé¢çå
¨é¨ |
| | | showAll: { |
| | | type: Boolean, |
| | | default: true |
| | | } |
| | | }, |
| | | components: { |
| | | LineChart, |
| | | InputSearch, |
| | | AreaAndmonitorType, |
| | | DustRadarChart, |
| | | ButtonClick, |
| | | MonthSelect |
| | | }, |
| | | data() { |
| | | return { |
| | | isNoData: false, |
| | | loading: false, |
| | | screenLoading: false, |
| | | parentDataFlag: false, |
| | | chartData: [], |
| | | chartData1: {}, //ä¿åæ¥è¯¢çç»æ |
| | | chartData2: {}, |
| | | chartData3: {}, |
| | | chartData4: {}, |
| | | begin: '', //å¼å§æ¶é´ |
| | | end: '', //ç»ææ¶é´ |
| | | |
| | | form: { |
| | | // ç«ç¹åç§° |
| | | name: '', |
| | | // 设å¤ç¼å· |
| | | number: '3234', |
| | | // å¼å§æ¶é´ |
| | | beginTime: '', |
| | | // ç»ææ¶é´ |
| | | endTime: '' |
| | | }, |
| | | month: '', |
| | | |
| | | // æçº¿å¾é
置项 |
| | | option: {}, |
| | | // æ°æ®æ¸
å |
| | | bill: { |
| | | min: '', |
| | | max: '', |
| | | avg: '', |
| | | online: 100, |
| | | valid: 100, |
| | | exceeding: 0, |
| | | |
| | | // å
¸åå¼å¸¸å¤ç°ç |
| | | exceptionRecurrence: 0, |
| | | // å¼å¸¸ç±»åæ®èé度 |
| | | exceptionTypeAggregation: 0, |
| | | |
| | | exception: 0, |
| | | mutationCount: 0, |
| | | exceedingNearCount: 0, |
| | | exceedingCriticalDegree: 0 |
| | | }, |
| | | |
| | | // æ¥è¯¢æé®å è½½ææ |
| | | queryButton: false, |
| | | |
| | | // é£é©å¼æåååçç«ç¹ |
| | | top_10_sites_with_risk_values: [{ name: '', riskValue: 0.2 }], |
| | | // é£é©å¼ |
| | | weight: '', |
| | | // æ æ°æ®é
ç½®æ¶é´æ®µ |
| | | areaColor: [], |
| | | // æç«ç¹çåºæ¬ä¿¡æ¯ |
| | | siteInfo: {}, |
| | | |
| | | // å¼å¸¸é£é©çå¼ |
| | | exceptionRisk: { |
| | | // å¨çº¿çé£é© |
| | | onlineRisk: '', |
| | | // ææçé£é© |
| | | validRisk: '', |
| | | // è¶
æ é£é© |
| | | exceedRisk: '', |
| | | // å¼å¸¸ç±»åèé度 |
| | | exceptionTypeAggregation: '', |
| | | // å
¸åå¼å¸¸å¤ç°ç |
| | | typicalExceptionRepetitionRate: '' |
| | | } |
| | | } |
| | | }, |
| | | watch: { |
| | | // showAll() { |
| | | // console.log('1111') |
| | | // // 页é¢å è½½æ¶showAllæä¼åå䏿¬¡ |
| | | // // 为true表示çé£é©æ¨¡åé¡µé¢ |
| | | // if (this.showAll) { |
| | | // // å è½½é£é©å¼æé«çç«ç¹æ°æ® |
| | | // this.ShowDefaultData() |
| | | // } |
| | | // }, |
| | | siteName() { |
| | | if(this.siteName!= ''){ |
| | | // æ´æ°ç«ç¹åååæ¶é´ |
| | | this.form.name = this.siteName |
| | | this.screenLoading = true |
| | | siteInfo.queryMnCode(this.siteName).then((response) => { |
| | | this.form.number = response.data.data[0].mnCode |
| | | this.month = this.time |
| | | // åæ¶æ´æ°æèµ·å§æ¶é´ |
| | | this.form.beginTime = dayjs(this.month).startOf().format('YYYY-MM-DD HH:mm:ss') |
| | | this.form.endTime = dayjs(this.month).endOf('month').format('YYYY-MM-DD HH:mm:ss') |
| | | |
| | | // æ´æ°è¯¥ç«ç¹çæå±åºæ¯åè¿ç»´å |
| | | this.getSiteInfo(this.form.number) |
| | | // æ´æ°ç»è®¡æ°æ® |
| | | this.getAnalysisData() |
| | | // 计ç®é£é©å¼ |
| | | this.calRiskValue() |
| | | this.screenLoading = false |
| | | }) |
| | | } |
| | | |
| | | } |
| | | }, |
| | | |
| | | computed: { |
| | | // é£é©ç级 |
| | | riskGradeAndAdvice() { |
| | | return riskApi.getRiskAdvice(this.weight) |
| | | } |
| | | }, |
| | | mounted(){ |
| | | if(this.showAll){ |
| | | // å è½½é£é©å¼æé«çç«ç¹æ°æ® |
| | | this.ShowDefaultData() |
| | | } |
| | | }, |
| | | methods: { |
| | | // æ¥è¯¢ç«ç¹ç»è®¡ä¿¡æ¯ |
| | | async querySiteStaticsInfo(row) { |
| | | this.form.name = row.siteName |
| | | // æ´æ°ç»è®¡æ°æ® |
| | | await this.getAnalysisData() |
| | | // 计ç®é£é©å¼ |
| | | this.calRiskValue() |
| | | }, |
| | | |
| | | // æ ¼å¼åæä»½ |
| | | giveMonth(val) { |
| | | //å°ä¸å½æ åæ¶é´è½¬ä¸ºæå®æ ¼å¼(该ç»ä»¶è¿åçæ åæ¶é´çæ ¼å¼ï¼æä»¥å¿
é¡»çå è¿ä¸ªå½æ°) |
| | | this.month = dayjs(val).format('YYYY-MM-DD') |
| | | // åæ¶æ´æ°å¼å§åç»ææ¶é´ |
| | | this.form.beginTime = dayjs(this.month).startOf().format('YYYY-MM-DD HH:mm:ss') |
| | | this.form.endTime = dayjs(this.month).endOf('month').format('YYYY-MM-DD HH:mm:ss') |
| | | }, |
| | | |
| | | /** |
| | | * é£é©è¯ä¼°æé® |
| | | * @paramï¼ |
| | | * @returnsï¼ |
| | | */ |
| | | riskAssessment() { |
| | | // æ´æ°æåæ¸
å |
| | | this.getRiskRank() |
| | | // æ´æ°è¯¥ç«ç¹çæå±åºæ¯åè¿ç»´å |
| | | this.getSiteInfo(this.form.number) |
| | | // æ´æ°åææ°æ® |
| | | this.getAnalysisData() |
| | | // 计ç®é£é©å¼ |
| | | this.calRiskValue() |
| | | }, |
| | | |
| | | // æ´æ°åææ°æ® |
| | | getAnalysisData() { |
| | | // æ¥ç»è®¡æ°æ® |
| | | this.fetchDayAnalysisData() |
| | | // å¼å¸¸æ°æ® |
| | | this.fetchExceptionAnalysisData() |
| | | }, |
| | | |
| | | findObjectByPropertyValue(array, property, value) { |
| | | return array.find((obj) => obj[property] === value) |
| | | }, |
| | | |
| | | // æ¤é¡µé¢æå¼æ¶ |
| | | ShowDefaultData() { |
| | | // é»è®¤å è½½å±ç¤ºçå
容 |
| | | this.updateOriginPage() |
| | | }, |
| | | |
| | | // å è½½é»è®¤å±ç¤ºçå
容 |
| | | async updateOriginPage() { |
| | | this.screenLoading = true |
| | | // æ´æ°æåæ¸
åï¼å¹¶å¾å°é£é©å¼æé«ç«ç¹ |
| | | let arr = await this.getRiskRank() |
| | | this.form.name = arr[0] |
| | | this.form.number = arr[1] |
| | | this.screenLoading = false |
| | | |
| | | // æ´æ°è¯¥ç«ç¹çæå±åºæ¯åè¿ç»´å |
| | | this.getSiteInfo(this.form.number) |
| | | // æ´æ°æ¥ç»è®¡æ°æ® |
| | | this.getAnalysisData() |
| | | // 计ç®é£é©å¼ |
| | | this.calRiskValue() |
| | | }, |
| | | |
| | | /** |
| | | * å¾å°æ°æ®é£é©å¼ ï¼å¹¶è®¡ç®é£é©å¼ |
| | | * @paramï¼ |
| | | * @returnsï¼ |
| | | */ |
| | | calRiskValue() { |
| | | riskApi.queryRiskValue(this.form.number, this.month, 'month').then((response) => { |
| | | const rValue = response.data.data[0] |
| | | this.exceptionRisk.onlineRisk = rValue.onlineRisk |
| | | this.exceptionRisk.validRisk = rValue.validRisk |
| | | this.exceptionRisk.exceedRisk = rValue.exceedRisk |
| | | this.exceptionRisk.exceptionTypeAggregation = rValue.exceptionTypeAggregation |
| | | this.exceptionRisk.typicalExceptionRepetitionRate = rValue.typicalExceptionRepetitionRate |
| | | |
| | | this.weight = riskValue.calRiskValue(rValue).toFixed(2) |
| | | }) |
| | | }, |
| | | |
| | | // æ ¹æ®ç®åç«ç¹ï¼æä»½ï¼æ¥æçº¿å¾æ¥ç»è®¡æ°æ® |
| | | fetchDayAnalysisData() { |
| | | let params = {} |
| | | if (this.form.name) { |
| | | params['siteName'] = this.form.name |
| | | } |
| | | if (this.form.beginTime) { |
| | | params['beginTime'] = this.form.beginTime |
| | | } |
| | | if (this.form.endTime) { |
| | | params['endTime'] = this.form.endTime |
| | | } |
| | | this.loading = true |
| | | this.queryButton = true |
| | | exceptionApi |
| | | .analysisdata(this.form.name, this.form.beginTime, this.form.endTime, 'day') |
| | | .then((response) => { |
| | | this.chartData = response.data.data |
| | | this.loading = false |
| | | this.queryButton = false |
| | | if (response.data.data.length == 0) { |
| | | this.isNoData = true |
| | | return |
| | | } |
| | | // åææ°æ®ä¸çææ©æ¶é´ |
| | | let begin = this.chartData[0].lst |
| | | // åææ°æ®ä¸çæææ¶é´ |
| | | let end = this.chartData[this.chartData.length - 1].lst |
| | | |
| | | // ç§»é¤ç©ºæ°æ®ç¶æ |
| | | this.isNoData = false |
| | | |
| | | // æ æ°æ®çæ¶é´æ®µ |
| | | let noDataTimeInteval = lineChart.backNoDataInteval(begin, end) |
| | | // æ æ°æ®é
ç½®æ¶é´æ®µ |
| | | this.areaColor = lineChart.getMarkArea(noDataTimeInteval) |
| | | this.setChart() |
| | | |
| | | // æçº¿å¾æ°æ® |
| | | let temp = index.calBillData(this.chartData, begin, end) |
| | | this.bill.min = temp['min'] |
| | | this.bill.max = temp['max'] |
| | | |
| | | this.bill.avg = temp['avg'] |
| | | this.bill.online = temp['online'] |
| | | this.bill.valid = temp['valid'] |
| | | this.bill.exceeding = temp['exceeding'] |
| | | }) |
| | | }, |
| | | // ä¼ä¸å¼å¸¸ç»è®¡æ°æ® |
| | | fetchExceptionAnalysisData() { |
| | | exceptionApi |
| | | .exceptiondata1({ |
| | | siteName: this.form.name, |
| | | beginTime: this.form.beginTime, |
| | | endTime: this.form.endTime |
| | | }) |
| | | .then((res) => { |
| | | let obj = index.calRecur(res.data.data) |
| | | this.bill.exceptionRecurrence = obj['exceptionRecurrence'] |
| | | this.bill.exceptionTypeAggregation = obj['exceptionTypeAggregation'] |
| | | this.bill.exception = obj['exception'] |
| | | this.bill.mutationCount = obj['mutationCount'] |
| | | this.bill.exceedingNearCount = obj['exceedingNearCount'] |
| | | this.bill.exceedingCriticalDegree = obj['exceedingCriticalDegree'] |
| | | }) |
| | | }, |
| | | |
| | | // éæ©å
¶ä»å¼ç±»åæ¶ |
| | | setChart() { |
| | | if (this.chartData.length) { |
| | | // æå»ºæçº¿å¾x,yæ°æ® |
| | | let obj = lineChart.getLineChartXYData( |
| | | this.chartData, |
| | | this.form.beginTime, |
| | | this.form.endTime |
| | | ) |
| | | |
| | | this.chartData1 = { |
| | | x: obj.xData, |
| | | y: obj.yAvg |
| | | } |
| | | this.chartData2 = { |
| | | x: obj.xData, |
| | | y: obj.yOnline |
| | | } |
| | | this.chartData3 = { |
| | | x: obj.xData, |
| | | y: obj.yValid |
| | | } |
| | | this.chartData4 = { |
| | | x: obj.xData, |
| | | y: obj.yExceed |
| | | } |
| | | } |
| | | }, |
| | | |
| | | // å¾å°å10é£é©æåæ¸
å |
| | | async getRiskRank() { |
| | | let response = await riskApi.queryRiskValue('', this.month, 'month') |
| | | |
| | | let tableData = riskValue.backComprehensiveRiskTableData(response.data.data) |
| | | |
| | | this.top_10_sites_with_risk_values = this.getTopRiskData(tableData, 10) |
| | | if (this.top_10_sites_with_risk_values.length != 0) { |
| | | // è¡¨æ ¼æé£é©å¼ååæå |
| | | this.$nextTick(() => { |
| | | this.$refs.table.sort('riskValue', 'descending') |
| | | }) |
| | | // ä¿åé£é©å¼æé«çç«ç¹åç§°å设å¤ç¼å· |
| | | let temp = [] |
| | | temp.push( |
| | | this.top_10_sites_with_risk_values[0].siteName, |
| | | this.top_10_sites_with_risk_values[0].mnCode |
| | | ) |
| | | return temp |
| | | } |
| | | }, |
| | | /** |
| | | * éåºæåï¼è¿åéåºånumçå
ç´ |
| | | * @paramï¼ å¯¹è±¡æ°ç»ï¼è¿åçæ°é |
| | | */ |
| | | getTopRiskData(arr, num) { |
| | | // æç
§riskValueéåºæå |
| | | arr.sort((a, b) => b.riskValue - a.riskValue) |
| | | // è·åånum个å
ç´ |
| | | return arr.slice(0, num) |
| | | }, |
| | | /** |
| | | * æ ¹æ®è®¾å¤ç¼å·æ¥è¯¢ç«ç¹åºæ¬ä¿¡æ¯ |
| | | * @paramï¼ è®¾å¤ç¼å· |
| | | */ |
| | | getSiteInfo(mnCode) { |
| | | siteInfo.querySiteInfoByMnCode(mnCode).then((response) => { |
| | | this.siteInfo = response.data.data[0] |
| | | }) |
| | | }, |
| | | |
| | | openDetail() { |
| | | const encodedSiteName = encodeURIComponent(this.form.name) |
| | | const timeType = '1' |
| | | const jumpPage = '2' |
| | | this.$router.push(`/exceptionDetail/${encodedSiteName}/${this.month}/${timeType}/${jumpPage}`) |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <template> |
| | | <el-form :inline="true" :model="form"> |
| | | <el-form-item class="form-item"> |
| | | <AreaAndmonitorType></AreaAndmonitorType> |
| | | </el-form-item> |
| | | |
| | | <el-form-item class="form-item"> |
| | | <InputSearch |
| | | :site-name="form.name" |
| | | isNeedDefaultSite="0" |
| | | @submit-value="(n) => (form.name = n)" |
| | | @submit-mncode="(n) => (form.number = n)" |
| | | ></InputSearch> |
| | | </el-form-item> |
| | | |
| | | <el-form-item v-show="showAll"> |
| | | <MonthSelect @submit-value="giveMonth"></MonthSelect> |
| | | </el-form-item> |
| | | |
| | | |
| | | <el-form-item v-show="showAll"> |
| | | <ButtonClick |
| | | content="é£é©è¯ä¼°" |
| | | type="primary" |
| | | :loading="queryButton" |
| | | @do-search="riskAssessment" |
| | | ></ButtonClick> |
| | | </el-form-item> |
| | | </el-form> |
| | | |
| | | <div v-loading="screenLoading" class="wait-name"> |
| | | <div class="chart-container" v-show="!isNoData && !screenLoading"> |
| | | <el-card class="time-text"> |
| | | <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="default" class="exception-button" v-show="showAll" @click="openDetail"> |
| | | æ°æ®å¼å¸¸è¯¦æ
|
| | | </el-button> |
| | | </el-card> |
| | | |
| | | <el-row :gutter="10" > |
| | | <el-col :span="5" v-show="showAll"> |
| | | <el-card shadow="never" class="table-class"> |
| | | <el-table |
| | | ref="table" |
| | | :highlight-current-row="true" |
| | | :data="top_10_sites_with_risk_values" |
| | | :default-sort="{ prop: 'riskValue', order: 'descending' }" |
| | | height="540" |
| | | > |
| | | <el-table-column |
| | | type="index" |
| | | label="åºå·" |
| | | fixed |
| | | width="52" |
| | | show-overflow-tooltip |
| | | align="center" |
| | | /> |
| | | <el-table-column |
| | | prop="siteName" |
| | | label="ç¹ä½åç§°" |
| | | show-overflow-tooltip |
| | | width="99" |
| | | align="center" |
| | | > |
| | | <template #default="{ row }"> |
| | | <el-button |
| | | type="primary" |
| | | text |
| | | class="table-button" |
| | | @click="querySiteStaticsInfo(row)" |
| | | > |
| | | <span class="risk-rank-site"> |
| | | {{ row.siteName }} |
| | | </span> |
| | | </el-button> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="riskValue" |
| | | label="é£é©å¼" |
| | | sortable |
| | | show-overflow-tooltip |
| | | align="center" |
| | | /> |
| | | </el-table> |
| | | </el-card> |
| | | </el-col> |
| | | |
| | | <el-col :span="showAll ?11:14" > |
| | | <el-card shadow="never" class="table-class"> |
| | | <DustRadarChart |
| | | :name="[ |
| | | 'æ°æ®ææé£é©', |
| | | 'å¼å¸¸å¤ç°é£é©', |
| | | 'å¼å¸¸ç±»åèéé£é©', |
| | | 'è¶
æ å¼å¸¸é£é©', |
| | | 'æ°æ®å¨çº¿é£é©' |
| | | ]" |
| | | :yData="exceptionRisk" |
| | | ></DustRadarChart> |
| | | </el-card> |
| | | </el-col> |
| | | |
| | | <el-col :span="showAll ?4: 5" > |
| | | <el-card shadow="never" class="card-height risk-card"> |
| | | <template #header> |
| | | <span |
| | | class="title-16" |
| | | > |
| | | é£é©å¼(0~1)ï¼ |
| | | </span> |
| | | <span :class="{ |
| | | 'weightColor-low': weight < 0.15, |
| | | 'weightColor-medium': weight >= 0.15 && weight <= 0.6, |
| | | 'weightColor-heigh': weight > 0.6 |
| | | }"> {{ weight }}</span> |
| | | </template> |
| | | <div class="risk-text-container"> |
| | | <div class="risk-grade"> |
| | | <h1 class="sub-title">é£é©ç级ï¼</h1> |
| | | <span :class="{ |
| | | 'weightColor-low': weight < 0.15, |
| | | 'weightColor-medium': weight >= 0.15 && weight <= 0.6, |
| | | 'weightColor-heigh': weight > 0.6 |
| | | }" >{{ riskGradeAndAdvice.riskGrade }} </span> |
| | | </div> |
| | | |
| | | <div class="risk-advice"> |
| | | <h1 class="sub-title">管æ§å»ºè®®ï¼</h1> |
| | | <div |
| | | v-for="item in riskGradeAndAdvice.riskAdvice" |
| | | :key="item" |
| | | class="risk-advice-text" |
| | | > |
| | | {{ item }} |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="grade-instance"> |
| | | <div class="container"> |
| | | <div class="block-color heigh"></div> |
| | | <div>é«é£é©(>0.6)</div> |
| | | </div> |
| | | <div class="container"> |
| | | <div class="block-color medium"></div> |
| | | <div>ä¸é£é©(0.15~0.6)</div> |
| | | </div> |
| | | <div class="container"> |
| | | <div class="block-color low"></div> |
| | | <div>ä½é£é©(ï¼0.15)</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-card> |
| | | </el-col> |
| | | |
| | | <el-col :span="showAll ?4: 5" > |
| | | <el-card shadow="never" class="card-height"> |
| | | <template #header> |
| | | <span class="title-16">é£é©è¯¦æ
</span> |
| | | </template> |
| | | |
| | | <el-form> |
| | | <el-form-item label="æå¤§å¼ï¼"> {{ bill.max }} mg/m³ </el-form-item> |
| | | <el-form-item label="æå°å¼ï¼"> {{ bill.min }} mg/m³ </el-form-item> |
| | | <el-form-item label="æ°æ®ææçï¼"> {{ bill.online*100 }}% </el-form-item> |
| | | <el-form-item label="æ°æ®å¨çº¿çï¼"> {{ bill.valid*100 }}% </el-form-item> |
| | | <el-form-item label="æ°æ®è¶
æ çï¼"> {{ bill.exceeding*100 }}% </el-form-item> |
| | | <el-form-item label="å¼å¸¸ç±»åèé度ï¼"> |
| | | {{ exceptionRisk.exceptionTypeAggregation * 100 }}% |
| | | </el-form-item> |
| | | |
| | | <el-tag :size="small" v-show="bill.exception">å
±åºç°äº{{ bill.exception }}ç±»å¼å¸¸</el-tag> |
| | | |
| | | <el-form-item label="å
¸åå¼å¸¸å¤ç°çï¼"> |
| | | {{ exceptionRisk.typicalExceptionRepetitionRate * 100 }}% |
| | | </el-form-item> |
| | | |
| | | <div> |
| | | <el-tag :size="small" v-show="bill.mutationCount">é级çªåå¼å¸¸:{{ bill.mutationCount }}æ¡</el-tag> |
| | | </div> |
| | | |
| | | <div> |
| | | <el-tag :size="small" v-show="bill.exceedingNearCount">临è¿è¶
æ å¼å¸¸:{{ bill.exceedingNearCount }}æ¡</el-tag> |
| | | </div> |
| | | |
| | | <div> |
| | | <el-tag :size="small" |
| | | v-show="bill.exceedingCriticalDegree" |
| | | >忥è¶
æ æ¬¡æ°ä¸´çå¼å¸¸:{{ bill.exceedingCriticalDegree }}æ¡</el-tag |
| | | > |
| | | </div> |
| | | </el-form> |
| | | </el-card> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-card shadow="never" class="card-value"> |
| | | <LineChart |
| | | title="æ¥åå¼" |
| | | :chartData="chartData1" |
| | | yName="mg/m³" |
| | | seriesName="æ¥åå¼" |
| | | :areaColor="areaColor" |
| | | > |
| | | </LineChart> |
| | | </el-card> |
| | | </el-col> |
| | | |
| | | <el-col :span="12"> |
| | | <el-card shadow="never" class="card-value"> |
| | | <LineChart |
| | | title="æ¥ææç" |
| | | :chartData="chartData3" |
| | | yName="%" |
| | | seriesName="æ¥ææç" |
| | | :areaColor="areaColor" |
| | | > |
| | | </LineChart> |
| | | </el-card> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | </div> |
| | | <el-empty description="ææ æ°æ®" v-show="isNoData" :image-size="200" /> |
| | | </template> |
| | | |
| | | <style scoped> |
| | | .el-form { |
| | | margin: 10px; |
| | | } |
| | | .form-item { |
| | | margin-top: 10px; |
| | | } |
| | | .chart-container { |
| | | margin-left: 10px; |
| | | } |
| | | .time-text { |
| | | font-size: 14px; |
| | | color: #333333; |
| | | letter-spacing: 1px; |
| | | } |
| | | .el-card { |
| | | margin-top: 15px; |
| | | border-radius: 9px; |
| | | } |
| | | .chart-container { |
| | | width: 98%; |
| | | /* height: 600px; */ |
| | | } |
| | | |
| | | .card-height { |
| | | height: 570px; |
| | | } |
| | | .el-header { |
| | | background-color: #010408; |
| | | color: #333; |
| | | line-height: 60px; |
| | | } |
| | | .risk-advice { |
| | | /* margin: 20px 0px; */ |
| | | } |
| | | .container { |
| | | display: flex; |
| | | margin-bottom: 10px; |
| | | } |
| | | .grade-instance { |
| | | /* margin-top: 50px; */ |
| | | } |
| | | .block-color { |
| | | width: 1em; |
| | | height: 1em; |
| | | margin-right: 10px; |
| | | margin-top: 3px; |
| | | } |
| | | .heigh { |
| | | background-color: red; |
| | | } |
| | | .medium { |
| | | background-color: #dabe09; |
| | | } |
| | | .low { |
| | | background-color: #9fdb1d; |
| | | } |
| | | |
| | | .el-text { |
| | | align-self: left; |
| | | } |
| | | .el-form-item { |
| | | margin-bottom: 20px; |
| | | } |
| | | :deep().el-form-item__content { |
| | | justify-content: flex-end; |
| | | } |
| | | .title-16 { |
| | | font-size: 16px; |
| | | font-weight: bold; |
| | | } |
| | | .weightColor-low { |
| | | color: #9fdb1d; |
| | | font-size: 16px; |
| | | } |
| | | .weightColor-medium { |
| | | color: #dabe09; |
| | | font-size: 16px; |
| | | } |
| | | .weightColor-heigh { |
| | | color: red; |
| | | font-size: 16px; |
| | | } |
| | | .risk-grade { |
| | | display: flex; |
| | | } |
| | | :deep().el-table__header-wrapper { |
| | | color: red; |
| | | } |
| | | /* .wait-name { |
| | | width: 500px; |
| | | height: 600px; |
| | | } */ |
| | | .table-class { |
| | | /* border: 1px solid blue; */ |
| | | /* margin: 20px 0px 20px 0px; */ |
| | | height: 570px; |
| | | } |
| | | |
| | | .table-button { |
| | | letter-spacing: 1px; |
| | | text-decoration: underline; |
| | | /* border-radius: 0px; */ |
| | | } |
| | | .risk-rank-site { |
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | width: 80px; |
| | | } |
| | | .site-name { |
| | | margin-left: 20px; |
| | | } |
| | | .risk-advice-text { |
| | | font-size: 14px; |
| | | color: #333333; |
| | | letter-spacing: 1.5px; |
| | | margin-top: 10px; |
| | | } |
| | | .sub-title { |
| | | font-size: 14px; |
| | | color: #333333; |
| | | } |
| | | |
| | | .risk-text-container { |
| | | height: 490px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: space-around; |
| | | } |
| | | |
| | | .el-tag { |
| | | margin-left: 25px; |
| | | font-size: 14px; |
| | | vertical-align: baseline; |
| | | } |
| | | .exception-button { |
| | | vertical-align: baseline; |
| | | margin-left: 150px; |
| | | } |
| | | |
| | | .site-info-detail { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | } |
| | | .mx-1 { |
| | | margin-left: 100px; |
| | | } |
| | | </style> |
| | |
| | | }, |
| | | // æ°æ® |
| | | yData: { |
| | | type: Array, |
| | | type: Object, |
| | | default: () => { |
| | | return [100,0,0,0,100]; |
| | | return {}; |
| | | } |
| | | } |
| | | }, |
| | |
| | | }; |
| | | }, |
| | | watch: { |
| | | yData() { |
| | | this.set(); |
| | | yData: { |
| | | handler() { |
| | | this.set() |
| | | }, |
| | | deep:true |
| | | } |
| | | }, |
| | | mounted() { |
| | |
| | | }, |
| | | 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: { |
| | | |
| | | |
| | | initRadarChart() { |
| | | this.chart = echarts.init(document.getElementById('main')); |
| | | }, |
| | |
| | | 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: 'å¼å¸¸åæ' |
| | |
| | | <!--ç¹å»ç«ç¹ 跳转è³é£é©æ¨¡åé¡µé¢ --> |
| | | <script> |
| | | import SubFlightInspection from '@/views/exception/components/SubFlightInspection.vue' |
| | | import CompFlightInspection from '@/views/exception/components/CompFlightInspection.vue' |
| | | import CompDataRiskModel from '@/views/risk_assessment/components/CompDataRiskModel.vue' |
| | | |
| | | export default { |
| | | components: { |
| | | SubFlightInspection |
| | | CompFlightInspection, |
| | | CompDataRiskModel |
| | | }, |
| | | data() { |
| | | return { |
| | | siteName: '', |
| | | month: '', |
| | | // 页æ é¢ |
| | | title:'' |
| | | time: '', |
| | | // æ¶é´ç±»å |
| | | timeType: '', |
| | | // 1代表é£é©æ¨¡å 2代表é£è¡å·¡æ£ |
| | | jumpPage: -1 |
| | | } |
| | | }, |
| | | watch: {}, |
| | |
| | | next((vm) => { |
| | | // éè¿ `vm` 访é®ç»ä»¶å®ä¾ |
| | | vm.siteName = to.params.siteName |
| | | vm.month = to.params.month |
| | | vm.$nextTick(() => { |
| | | // console.log('midd11', vm.siteName, vm.month); |
| | | }) |
| | | vm.time = to.params.time |
| | | vm.timeType = to.params.timeType |
| | | vm.jumpPage = to.params.jumpPage |
| | | |
| | | vm.$nextTick(() => {}) |
| | | }) |
| | | }, |
| | | methods: { |
| | |
| | | <template> |
| | | <el-page-header @back="onBack"> |
| | | <template #content> |
| | | <span> å¼å¸¸è¯¦æ
</span> |
| | | <span v-if="jumpPage == '1'"> é£é©æ¨¡å </span> |
| | | <span v-else-if="jumpPage == '2'"> å¼å¸¸è¯¦æ
</span> |
| | | </template> |
| | | </el-page-header> |
| | | |
| | | <SubFlightInspection :site-name="siteName" :month="month"> </SubFlightInspection> |
| | | <div v-show="jumpPage == '1'"> |
| | | <CompDataRiskModel :site-name="siteName" :time="time" :show-all="false"></CompDataRiskModel> |
| | | </div> |
| | | |
| | | <div v-show="jumpPage == '2'"> |
| | | <CompFlightInspection |
| | | :site-name="siteName" |
| | | :time="time" |
| | | :time-type="timeType" |
| | | :show-all="false" |
| | | > |
| | | </CompFlightInspection> |
| | | </div> |
| | | </template> |
| | | |
| | | <style scoped> |
| | |
| | | <script> |
| | | // import InputSearch from '@/sfc/InputSearch.vue' |
| | | import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue' |
| | | import DustRadarChart from '@/views/risk_assessment/components/DustRadarChart.vue' |
| | | import exceptionApi from '@/api/exceptionApi.js' |
| | | |
| | | import DustRadarChart from '@/views/risk_assessment/components/DustRadarChart.vue' |
| | | import LineChart from '@/views/risk_assessment/components/LineChart.vue' |
| | | import index from '@/utils/risk_estimate_common_function/index.js' |
| | | import ButtonClick from '@/sfc/ButtonClick.vue' |