1. 修复飞行巡检模块中有效率异常详情弹出框无法正常显示的bug;
2.优化各异常类型的折线图配置项生成逻辑;
| | |
| | | /** å¼å¸¸æ°æ®çæçº¿å¾ */ |
| | | |
| | | export default { |
| | | /** |
| | | * 设置9ç§å¼å¸¸æçº¿å¾ |
| | | * @paramï¼xè½´æ¶é´ï¼ yè½´æ²¹çæµåº¦ |
| | | * @paramï¼å¼å¸¸å¼å§æ¶é´ï¼å¼å¸¸ç»ææ¶é´ï¼å¼å¸¸å¼å§æ¶é´å¨æ´ä¸ªåºé´çç´¢å¼ä¸æ ï¼å¼å¸¸ç»ææ¶é´å¨æ´ä¸ªåºé´çç´¢å¼ä¸æ ï¼é¢è²èæ¯çåºé´å¯¹è±¡ç»æ |
| | | * @paramï¼å¼å¸¸ç±»å |
| | | * @returnsï¼ |
| | | */ |
| | | setExceptionChartOption({ |
| | | xData, |
| | | yData, |
| | | exceptionBeginTime, |
| | | exceptionEndTime, |
| | | beginIndex, |
| | | endIndex, |
| | | exceptionName, |
| | | areaObj, |
| | | lineColor, |
| | | exceptionType |
| | | } |
| | | ) { |
| | | switch (exceptionType) { |
| | | case '0': |
| | | return this.missingDataOption( |
| | | xData, |
| | | yData, |
| | | exceptionBeginTime, |
| | | exceptionEndTime, |
| | | exceptionName |
| | | ) |
| | | case '1': |
| | | return this.ultraLowOption(xData, yData, beginIndex, endIndex, exceptionName) |
| | | case '2': |
| | | return this.exceedingOption( |
| | | xData, |
| | | yData, |
| | | exceptionBeginTime, |
| | | exceptionEndTime, |
| | | beginIndex, |
| | | endIndex, |
| | | exceptionName |
| | | ) |
| | | |
| | | case '3': |
| | | return this.longtimeUnchangedOption( |
| | | xData, |
| | | yData, |
| | | exceptionBeginTime, |
| | | exceptionEndTime, |
| | | beginIndex, |
| | | endIndex, |
| | | exceptionName |
| | | ) |
| | | case '4': |
| | | case '5': |
| | | case '6': |
| | | case '7': |
| | | return this.exception4567TypeOption( |
| | | xData, |
| | | yData, |
| | | exceptionBeginTime, |
| | | exceptionEndTime, |
| | | beginIndex, |
| | | endIndex, |
| | | exceptionName |
| | | ) |
| | | case '8': |
| | | console.log('ä¼ è¿æ¥',lineColor) |
| | | return this.validOption(xData, yData, exceptionName, areaObj,lineColor) |
| | | } |
| | | }, |
| | | |
| | | /** |
| | | * æ°æ®ç¼ºå¤± |
| | | * @paramï¼ |
| | | * @returnsï¼ |
| | | */ |
| | | missingDataOption(xData, yData, exceptionBeginTime, exceptionEndTime, exceptionName) { |
| | | function baseOption(title, xData) { |
| | | return { |
| | | title: { |
| | | text: exceptionName, |
| | | text: title, |
| | | left: '1%', |
| | | textStyle: { |
| | | fontSize: 14 |
| | |
| | | yAxis: { |
| | | type: 'value', |
| | | name: 'mg/m³' |
| | | }, |
| | | series: [ |
| | | { |
| | | name: 'é¢ç²ç©æµåº¦', |
| | | type: 'line', |
| | | data: yData, |
| | | markLine: { |
| | | silent: true, |
| | | data: [ |
| | | // æ æ³¨æ æ°æ®æ¶é´æ®µçææï¼å°è¿ä¸ªæ¶é´æ®µçæ°è½´é¨ååä¸ºçº¢è² |
| | | { |
| | | name: 'æ æ°æ®', |
| | | xAxis: exceptionBeginTime |
| | | }, |
| | | { |
| | | xAxis: exceptionEndTime |
| | | } |
| | | ], |
| | | lineStyle: { |
| | | color: 'red' |
| | | } |
| | | } |
| | | } |
| | | ] |
| | | } |
| | | }, |
| | | |
| | | /** |
| | | * è¶
æ |
| | | * @paramï¼ |
| | | * @returnsï¼ |
| | | */ |
| | | exceedingOption( |
| | | xData, |
| | | yData, |
| | | exceptionBeginTime, |
| | | exceptionEndTime, |
| | | beginIndex, |
| | | endIndex, |
| | | exceptionName |
| | | ) { |
| | | function baseSeries(yData) { |
| | | return { |
| | | title: { |
| | | text: exceptionName, |
| | | left: '1%', |
| | | textStyle: { |
| | | fontSize: 14 |
| | | } |
| | | }, |
| | | tooltip: {}, |
| | | toolbox: { |
| | | // å·¥å
·æ |
| | | feature: { |
| | | // ä¿å为å¾ç |
| | | saveAsImage: {} |
| | | } |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | data: xData, |
| | | name: 'æ¶é´', |
| | | axisLabel: { |
| | | formatter: function (value) { |
| | | return value.slice(11, -3) |
| | | } |
| | | } |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | name: 'mg/m³' |
| | | }, |
| | | series: [ |
| | | { |
| | | name: 'é¢ç²ç©æµåº¦', |
| | | type: 'line', |
| | | data: yData.map((item) => { |
| | | if (item >= 1) { |
| | | data: yData |
| | | } |
| | | } |
| | | |
| | | function baseMarkArea(area) { |
| | | const _data = [] |
| | | area.forEach((v) => { |
| | | _data.push([{ xAxis: v[0] }, { xAxis: v[1] }]) |
| | | }) |
| | | return { |
| | | value: item, |
| | | itemStyle: { |
| | | color: 'red' |
| | | } |
| | | } |
| | | } |
| | | return item |
| | | }), |
| | | // 忢æå®æ¶é´åºé´çèæ¯é¢è² |
| | | markArea: { |
| | | itemStyle: { |
| | | color: 'rgba(255, 173, 177, 0.4)' |
| | | }, |
| | | data: [ |
| | | [ |
| | | { |
| | | name: 'å¼å¸¸æ¶é´æ®µ', |
| | | xAxis: exceptionBeginTime |
| | | }, |
| | | { |
| | | xAxis: exceptionEndTime |
| | | data: _data |
| | | } |
| | | ] |
| | | ] |
| | | }, |
| | | markLine: { |
| | | } |
| | | |
| | | function baseVisualMap(area) { |
| | | const _pieces = [] |
| | | area.forEach((v, i) => { |
| | | if (i == 0) { |
| | | _pieces.push({ |
| | | lt: v[0], |
| | | color: 'green' |
| | | }) |
| | | } |
| | | _pieces.push({ |
| | | gte: v[0], |
| | | lte: v[1], |
| | | color: 'red' |
| | | }) |
| | | }) |
| | | const lastOne = area[area.length - 1] |
| | | _pieces.push({ |
| | | gt: lastOne[1], |
| | | color: 'green' |
| | | }) |
| | | return { |
| | | show: false, |
| | | dimension: 0, |
| | | pieces: _pieces |
| | | } |
| | | } |
| | | |
| | | function baseMarkLine() { |
| | | return { |
| | | symbol: 'none', |
| | | itemStyle: { |
| | | // åºçº¿å
Œ
±æ ·å¼ |
| | |
| | | data: [ |
| | | { |
| | | name: 'è¶
æ ', |
| | | type: 'average', |
| | | type: 'max', |
| | | yAxis: 1, |
| | | lineStyle: { |
| | | // color: '#ff0000' |
| | | color: 'red' |
| | | } |
| | | } |
| | | ] |
| | | } |
| | | } |
| | | ], |
| | | // æå®æ¶é´åºé´ç线段åé¢è² |
| | | visualMap: { |
| | | show: false, |
| | | dimension: 0, |
| | | pieces: [ |
| | | { |
| | | lte: beginIndex, |
| | | color: 'green' |
| | | }, |
| | | { |
| | | gt: beginIndex, |
| | | lte: endIndex, |
| | | color: 'red' |
| | | }, |
| | | { |
| | | gt: endIndex, |
| | | lte: xData.length - 1, |
| | | color: 'green' |
| | | } |
| | | ] |
| | | } |
| | | } |
| | | }, |
| | | |
| | | /** |
| | | * æ°æ®è¶
ä½ |
| | | * @paramï¼ |
| | | * @returnsï¼ |
| | | */ |
| | | ultraLowOption(xData, yData, beginIndex, endIndex, exceptionName) { |
| | | return { |
| | | title: { |
| | | text: exceptionName, |
| | | left: '1%', |
| | | textStyle: { |
| | | fontSize: 14 |
| | | } |
| | | }, |
| | | tooltip: {}, |
| | | toolbox: { |
| | | // å·¥å
·æ |
| | | feature: { |
| | | // ä¿å为å¾ç |
| | | saveAsImage: {} |
| | | } |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | data: xData, |
| | | name: 'æ¶é´', |
| | | axisLabel: { |
| | | formatter: function (value) { |
| | | return value.slice(11, -3) |
| | | } |
| | | } |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | name: 'mg/m³' |
| | | }, |
| | | series: [ |
| | | { |
| | | name: 'é¢ç²ç©æµåº¦', |
| | | type: 'line', |
| | | data: yData.map((item) => { |
| | | if (item <= 0.02) { |
| | | return { |
| | | value: item, |
| | | itemStyle: { |
| | | color: 'red' |
| | | } |
| | | } |
| | | } |
| | | return item |
| | | }), |
| | | |
| | | markLine: { |
| | | symbol: 'none', |
| | | itemStyle: { |
| | | // åºçº¿å
Œ
±æ ·å¼ |
| | | normal: { |
| | | lineStyle: { |
| | | type: 'dashed' |
| | | }, |
| | | label: { |
| | | show: true, |
| | | position: 'end', |
| | | formatter: '{b}' |
| | | } |
| | | } |
| | | }, |
| | | data: [ |
| | | { |
| | | name: 'æ°æ®è¶
ä½', |
| | | type: 'average', |
| | | type: 'min', |
| | | yAxis: 0.02, |
| | | lineStyle: { |
| | | color: 'red' |
| | |
| | | ] |
| | | } |
| | | } |
| | | ], |
| | | // æå®æ¶é´åºé´ç线段åé¢è² |
| | | visualMap: { |
| | | show: false, |
| | | dimension: 0, |
| | | pieces: [ |
| | | { |
| | | lte: beginIndex, |
| | | color: 'green' |
| | | }, |
| | | { |
| | | gt: beginIndex, |
| | | lte: endIndex, |
| | | color: 'red' |
| | | }, |
| | | { |
| | | gt: endIndex, |
| | | lte: xData.length - 1, |
| | | color: 'green' |
| | | } |
| | | ] |
| | | } |
| | | } |
| | | }, |
| | | |
| | | export default { |
| | | /** |
| | | * é¿æ¶é´æ æ³¢å¨ |
| | | * @paramï¼ |
| | | * @returnsï¼ |
| | | * è·ååç±»å¼å¸¸çæçº¿å¾é
置项 |
| | | * @param {*} param0 |
| | | * @returns |
| | | */ |
| | | longtimeUnchangedOption( |
| | | xData, |
| | | yData, |
| | | exceptionBeginTime, |
| | | exceptionEndTime, |
| | | beginIndex, |
| | | endIndex, |
| | | exceptionName |
| | | ) { |
| | | return { |
| | | title: { |
| | | text: exceptionName, |
| | | left: '1%', |
| | | textStyle: { |
| | | fontSize: 14 |
| | | setExceptionChartOption2({ xData, yData, exceptionArea, exceptionName, exceptionType }) { |
| | | const indexArea = [] |
| | | exceptionArea.forEach((e) => { |
| | | const i1 = xData.indexOf(e[0]) |
| | | const i2 = xData.indexOf(e[1]) |
| | | indexArea.push([i1, i2]) |
| | | }) |
| | | const option = baseOption(exceptionName, xData) |
| | | const series = baseSeries(yData) |
| | | series.markArea = baseMarkArea(exceptionArea) |
| | | // æ°æ®è¶
使è¶
æ |
| | | if (exceptionType == '1' || exceptionType == '2') { |
| | | series.markLine = baseMarkLine() |
| | | } |
| | | }, |
| | | tooltip: {}, |
| | | toolbox: { |
| | | // å·¥å
·æ |
| | | feature: { |
| | | // ä¿å为å¾ç |
| | | saveAsImage: {} |
| | | } |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | data: xData, |
| | | name: 'æ¶é´', |
| | | axisLabel: { |
| | | formatter: function (value) { |
| | | return value.slice(11, -3) |
| | | } |
| | | } |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | name: 'mg/m³' |
| | | }, |
| | | series: [ |
| | | { |
| | | name: 'é¢ç²ç©æµåº¦', |
| | | type: 'line', |
| | | data: yData.map((item) => { |
| | | if (item >= 1) { |
| | | return { |
| | | value: item, |
| | | itemStyle: { |
| | | color: 'red' |
| | | } |
| | | } |
| | | } |
| | | return item |
| | | }), |
| | | // 忢æå®æ¶é´åºé´çèæ¯é¢è² |
| | | markArea: { |
| | | itemStyle: { |
| | | color: 'rgba(255, 173, 177, 0.4)' |
| | | }, |
| | | data: [ |
| | | [ |
| | | { |
| | | name: 'å¼å¸¸æ¶é´æ®µ', |
| | | xAxis: exceptionBeginTime |
| | | }, |
| | | { |
| | | xAxis: exceptionEndTime |
| | | } |
| | | ] |
| | | ] |
| | | } |
| | | } |
| | | ], |
| | | // æå®æ¶é´åºé´ç线段åé¢è² |
| | | visualMap: { |
| | | show: false, |
| | | dimension: 0, |
| | | pieces: [ |
| | | { |
| | | lte: beginIndex, |
| | | color: 'green' |
| | | }, |
| | | { |
| | | gt: beginIndex, |
| | | lte: endIndex, |
| | | color: 'red' |
| | | }, |
| | | { |
| | | gt: endIndex, |
| | | lte: xData.length - 1, |
| | | color: 'green' |
| | | } |
| | | ] |
| | | } |
| | | } |
| | | }, |
| | | const visualMap = baseVisualMap(indexArea) |
| | | |
| | | /** |
| | | * é级çªå 临è¿è¶
æ å¼å¸¸ 忥è¶
æ æ¬¡æ°ä¸´çå¼å¸¸ ååè¶å¿å¼å¸¸ |
| | | * @paramï¼ |
| | | * @returnsï¼ |
| | | */ |
| | | exception4567TypeOption( |
| | | xData, |
| | | yData, |
| | | exceptionBeginTime, |
| | | exceptionEndTime, |
| | | beginIndex, |
| | | endIndex, |
| | | exceptionName |
| | | ) { |
| | | return { |
| | | title: { |
| | | text: exceptionName, |
| | | left: '1%', |
| | | textStyle: { |
| | | fontSize: 14 |
| | | } |
| | | }, |
| | | tooltip: {}, |
| | | toolbox: { |
| | | // å·¥å
·æ |
| | | feature: { |
| | | // ä¿å为å¾ç |
| | | saveAsImage: {} |
| | | } |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | data: xData, |
| | | name: 'æ¶é´', |
| | | axisLabel: { |
| | | formatter: function (value) { |
| | | return value.slice(11, -3) |
| | | } |
| | | } |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | name: 'mg/m³' |
| | | }, |
| | | series: [ |
| | | { |
| | | name: 'é¢ç²ç©æµåº¦', |
| | | type: 'line', |
| | | data: yData, |
| | | // 忢æå®æ¶é´åºé´çèæ¯é¢è² |
| | | markArea: { |
| | | itemStyle: { |
| | | color: 'rgba(255, 173, 177, 0.4)' |
| | | }, |
| | | data: [ |
| | | [ |
| | | { |
| | | name: 'å¼å¸¸æ¶é´æ®µ', |
| | | xAxis: exceptionBeginTime |
| | | }, |
| | | { |
| | | xAxis: exceptionEndTime |
| | | } |
| | | ] |
| | | ] |
| | | } |
| | | } |
| | | ], |
| | | // æå®æ¶é´åºé´ç线段åé¢è² |
| | | visualMap: { |
| | | show: false, |
| | | dimension: 0, |
| | | pieces: [ |
| | | { |
| | | lte: beginIndex, |
| | | color: 'green' |
| | | }, |
| | | { |
| | | gt: beginIndex, |
| | | lte: endIndex, |
| | | color: 'red' |
| | | }, |
| | | { |
| | | gt: endIndex, |
| | | lte: xData.length - 1, |
| | | color: 'green' |
| | | } |
| | | ] |
| | | } |
| | | } |
| | | }, |
| | | option.series = [series] |
| | | option.visualMap = visualMap |
| | | |
| | | /** |
| | | * ææç |
| | | * @paramï¼ |
| | | * @returnsï¼ |
| | | */ |
| | | validOption(xData, yData, exceptionName, areaObj,lineColor) { |
| | | return { |
| | | title: { |
| | | text: exceptionName, |
| | | left: '1%', |
| | | textStyle: { |
| | | fontSize: 14 |
| | | } |
| | | }, |
| | | tooltip: {}, |
| | | toolbox: { |
| | | // å·¥å
·æ |
| | | feature: { |
| | | // ä¿å为å¾ç |
| | | saveAsImage: {} |
| | | } |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | data: xData, |
| | | name: 'æ¶é´', |
| | | axisLabel: { |
| | | formatter: function (value) { |
| | | return value.slice(11, -3) |
| | | } |
| | | } |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | name: 'mg/m³' |
| | | }, |
| | | series: [ |
| | | { |
| | | name: 'é¢ç²ç©æµåº¦', |
| | | type: 'line', |
| | | data: yData, |
| | | // yData.map((item) => { |
| | | // if (item >= 1) { |
| | | // return { |
| | | // value: item, |
| | | // itemStyle: { |
| | | // color: 'red' |
| | | // } |
| | | // } |
| | | // } |
| | | // return item |
| | | // }), |
| | | // 忢æå®æ¶é´åºé´çèæ¯é¢è² |
| | | markArea: { |
| | | itemStyle: { |
| | | color: 'rgba(255, 173, 177, 0.4)' |
| | | }, |
| | | 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 |
| | | |
| | | // } |
| | | } |
| | | return option |
| | | } |
| | | } |
| | |
| | | */ |
| | | diffFiftyMinutesNum(beginNormal, endNormal) { |
| | | // å°å¼å§æ¶é´åç»ææ¶é´è½¬æ¢ä¸ºdayjs对象 |
| | | const start = dayjs(beginNormal).subtract(15, 'minute'); |
| | | const start = dayjs(beginNormal) |
| | | const end = dayjs(endNormal); |
| | | |
| | | // 计ç®ç»ææ¶é´åå»å¼å§æ¶é´ä¸é´ç¸å·®å¤å°ä¸ªååé |
| | |
| | | let obj = {}; |
| | | let current = intervalStarTime; |
| | | let tail = dayjs(intervalEndTime) |
| | | .add(15, 'minute') |
| | | .format('YYYY-MM-DD HH:mm:ss'); |
| | | while (current != tail) { |
| | | while (current <= tail) { |
| | | let value = this.findTimeInExceptionData( |
| | | headAndTailExceptionData, |
| | | current |
| | |
| | | |
| | | // ä¿åå½åè¡æ°æ® |
| | | 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ï¼æ¡ä»¶æ¥è¯¢å¼å¸¸çæ°æ® |
| | |
| | | import index from '@/utils/exception_common_function/index.js' |
| | | import DustLineChart from '@/views/exception/components/DustLineChart.vue' |
| | | import historyApi from '@/api/historyApi.js' |
| | | import exceptionProxy from '../exceptionProxy' |
| | | |
| | | export default { |
| | | props: { |
| | | // è¡¨æ ¼çä¸è¡æ°æ® |
| | | row: { |
| | | type: Object, |
| | | default: {} |
| | | default: () => { |
| | | return {} |
| | | } |
| | | }, |
| | | // å¯¹è¯æ¡æ¯å¦æ¾ç¤º |
| | | dialogTableVisible: { |
| | | visible: { |
| | | type: Boolean, |
| | | default: false |
| | | } |
| | |
| | | components: { |
| | | DustLineChart |
| | | }, |
| | | emits: ['update:dialogTableVisible'], |
| | | computed: { |
| | | dialogTableVisible: { |
| | | get() { |
| | | return this.dialogTableVisible |
| | | }, |
| | | set(value) { |
| | | this.$emit('update:dialogTableVisible', value) |
| | | } |
| | | } |
| | | }, |
| | | emits: ['update:visible'], |
| | | watch: { |
| | | row: { |
| | | handler(newValue) { |
| | | this.display() |
| | | this.display(newValue) |
| | | }, |
| | | deep: true |
| | | } |
| | |
| | | lineChart: false |
| | | }, |
| | | |
| | | |
| | | // æ è®°ä½ |
| | | flag: { |
| | | // æ°æ®å è½½æ¶ ä¸ä¸æ¡æé®ä¸è½åç¹å» |
| | | banTouch: 0, |
| | | banTouch: 0 |
| | | }, |
| | | |
| | | isPreCantouch:false, |
| | | isNextCantouch:false |
| | | |
| | | } |
| | | }, |
| | | |
| | | mounted() {}, |
| | | methods: { |
| | | display() { |
| | | dialogChange(value) { |
| | | this.$emit('update:visible', value) |
| | | }, |
| | | async display(row) { |
| | | // æçº¿å¾å è½½ä¸ææ |
| | | this.loading.lineChart = true |
| | | // è¡¨æ ¼æ°æ® |
| | | this.getExceptionTableDataByCurrenrRow(this.row) |
| | | await this.getExceptionTableDataByCurrenrRow(row) |
| | | |
| | | // æçº¿å¾æ°æ® |
| | | this.setLineChart(this.row) |
| | | await this.setLineChart(row) |
| | | }, |
| | | |
| | | /** |
| | |
| | | const beforeAndAfterTime = index.before45AndAfter45(beginTime, endTime) |
| | | // è¯·æ±æ´æ®µæ¶é´æ®µçé¢ç²ç©æµåº¦æ°æ® |
| | | |
| | | |
| | | // 对请æ±åçæ°æ®è¿è¡åå |
| | | const chartParams = await this.organizeLineChartsOptionParams(beforeAndAfterTime, this.row) |
| | | this.lineChartOption = exceptionOption.setExceptionChartOption(chartParams) |
| | | |
| | | this.lineChartOption = exceptionOption.setExceptionChartOption2(chartParams) |
| | | }, |
| | | |
| | | |
| | | |
| | | /** |
| | | * æå»ºæçº¿å¾çé
置项çåæ° |
| | |
| | | time_point, |
| | | { name, beginTime, endTime, exception, exceptionType } |
| | | ) { |
| | | // æçº¿å¾å è½½ä¸ææ |
| | | this.loading.lineChart = true |
| | | |
| | | // è¯·æ±æ´æ®µé¢ç²ç©æµåº¦çæ°æ® |
| | | const response = await historyApi.queryHistoryData({ |
| | | siteName: name, |
| | |
| | | xData = timeAndValue['xAxis'] |
| | | yData = timeAndValue['yAxis'] |
| | | |
| | | // æåå¼å¸¸èµ·å§æ¶é´ç¹å¨æ´ä¸ªåºé´å
çæ°æ®ç´¢å¼ |
| | | let beginIndex = xData.findIndex((item) => item === beginTime) |
| | | let endIndex = xData.findIndex((item) => item === endTime) |
| | | const exceptionArea = exceptionProxy.getExceptionArea( |
| | | beginTime, |
| | | endTime, |
| | | this.historyData, |
| | | exceptionType |
| | | ) |
| | | |
| | | this.flag.banTouch = 0 |
| | | this.loading.lineChart = false |
| | |
| | | return { |
| | | xData, |
| | | yData, |
| | | exceptionBeginTime: beginTime, |
| | | exceptionEndTime: endTime, |
| | | beginIndex, |
| | | endIndex, |
| | | exceptionArea, |
| | | exceptionName: exception, |
| | | areaObj: '', |
| | | lineColor: '', |
| | | exceptionType |
| | | } |
| | | }, |
| | |
| | | mnCode: mnCode, |
| | | dutyCompany: dutyCompany, |
| | | lst: abnormalTimeTenMinute[i], |
| | | yData: '' |
| | | dustValue: '' |
| | | }) |
| | | } |
| | | }, |
| | | tableRowClassName({ row }) { |
| | | return row.flag == 'N' ? 'normal-row' : 'abnormal-row' |
| | | } |
| | | } |
| | | } |
| | |
| | | <template> |
| | | <el-dialog |
| | | class="exception-dialog" |
| | | v-model="dialogTableVisible" |
| | | :model-value="visible" |
| | | @open="dialogChange(true)" |
| | | @close="dialogChange(false)" |
| | | draggable |
| | | align-center |
| | | height="700px" |
| | | width="700px" |
| | | > |
| | | |
| | | |
| | | <!-- 头 --> |
| | | <template #header> |
| | | <div class="diag-head"> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | |
| | | <!-- <div class="chart-jump-button"> |
| | | <el-button |
| | |
| | | >䏿¡å¼å¸¸</el-button |
| | | > |
| | | </div> --> |
| | | |
| | | |
| | | </template> |
| | | |
| | | |
| | | <!-- å¾å½¢ --> |
| | | <DustLineChart :option="lineChartOption" v-loading="loading.lineChart"></DustLineChart> |
| | | |
| | | <!-- è¡¨æ ¼ --> |
| | | <div> |
| | | <el-table :data="historyData" size="default" height="200" border> |
| | | <el-table |
| | | :data="historyData" |
| | | size="default" |
| | | height="200" |
| | | border |
| | | :row-class-name="tableRowClassName" |
| | | > |
| | | <el-table-column |
| | | type="index" |
| | | label="åºå·" |
| | |
| | | ></el-table-column> |
| | | |
| | | <el-table-column prop="lst" label="ééæ¶é´" align="center" show-overflow-tooltip /> |
| | | <el-table-column prop="yData" label="TSP(mg/m³)" 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> |
| | |
| | | > |
| | | </div> |
| | | </template> |
| | | |
| | | |
| | | </el-dialog> |
| | | </template> |
| | | |
| | | <style scoped> |
| | | <style> |
| | | /* æ¥ç详æ
å¯¹è¯æ¡æ¨¡åçæ ·å¼ */ |
| | | .el-table .normal-row { |
| | | } |
| | | |
| | | .el-table .abnormal-row { |
| | | /* background-color: var(--el-color-danger-light-5); */ |
| | | color: var(--el-color-danger); |
| | | } |
| | | |
| | | .diag-head { |
| | | /* å¯¹è¯æ¡å¤´é¨åºå */ |
| | |
| | | window.addEventListener('resize', this.resizeChart) |
| | | }, |
| | | watch: { |
| | | option() { |
| | | option(nV) { |
| | | // this.chart.clear |
| | | // ä¸ä¸ä¹åçoptionè¿è¡åå¹¶ |
| | | this.chart.setOption(this.option, true) |
| | | this.chart.setOption(nV, true) |
| | | } |
| | | }, |
| | | |
¶Ô±ÈÐÂÎļþ |
| | |
| | | /** |
| | | * å¼å¸¸æ°æ®ç¸å
³é»è¾ä»£ç |
| | | */ |
| | | import index from '@/utils/exception_common_function/index.js' |
| | | |
| | | function findPeriod(dataList, exceptionCheck, specilOption) { |
| | | let start, |
| | | last = undefined |
| | | let isException = false |
| | | const res = [] |
| | | dataList.forEach((e) => { |
| | | // 夿ååç¸é»ä¸¤ä¸ªæ°æ®çæ¶é´ç¹æ¯å¦è¶
è¿15åé |
| | | if (last && !isException) { |
| | | if (typeof specilOption === 'function' && specilOption(last, e)) { |
| | | res.push([last.lst, e.lst]) |
| | | } |
| | | } |
| | | |
| | | if (typeof exceptionCheck === 'function' && exceptionCheck(e)) { |
| | | if (!isException) { |
| | | start = e |
| | | isException = true |
| | | } |
| | | } else { |
| | | if (isException) { |
| | | res.push([start.lst, last.lst]) |
| | | isException = false |
| | | } |
| | | } |
| | | |
| | | last = e |
| | | }) |
| | | return res |
| | | } |
| | | |
| | | export default { |
| | | /** |
| | | * è·åæ°æ®çå¼å¸¸æ¶æ®µæ°ç» |
| | | * @param {*} beginTime |
| | | * @param {*} endTime |
| | | * @param {*} dataList |
| | | * @param {*} exceptionType |
| | | * @returns |
| | | */ |
| | | getExceptionArea(beginTime, endTime, dataList, exceptionType) { |
| | | if (dataList.length == 0) { |
| | | return [] |
| | | } |
| | | const d1 = dataList[0].lst |
| | | const d2 = dataList[dataList.length - 1].lst |
| | | switch (exceptionType) { |
| | | // ææçå¼å¸¸ |
| | | case '8': |
| | | // ç»è®¡æ°æ®ç¼ºå¤±æ¶æ®µåæ°æ®æ è¯ä¸ä¸ºNçæ¶æ®µ |
| | | return findPeriod( |
| | | dataList, |
| | | (data) => { |
| | | return data.flag != 'N' |
| | | }, |
| | | (last, data) => { |
| | | return index.diffFiftyMinutesNum(last.lst, data.lst) > 1 |
| | | } |
| | | ) |
| | | //忥è¶
æ æ¬¡æ°ä¸´çå¼å¸¸ |
| | | case '6': |
| | | return findPeriod(dataList, (data) => { |
| | | return data.dustValue > 1 |
| | | }) |
| | | //æ°æ®è¶
ä½ |
| | | //è¶
æ |
| | | //æ°æ®é¿æ¶æ®µæ æ³¢å¨ |
| | | //é级çªå |
| | | //临è¿è¶
æ å¼å¸¸ |
| | | //ååè¶å¿å¼å¸¸ |
| | | case '1': |
| | | case '2': |
| | | case '3': |
| | | case '4': |
| | | case '5': |
| | | case '7': |
| | | return [[d1, d2]] |
| | | //æ°æ®ç¼ºå¤±å¼å¸¸ |
| | | case '0': |
| | | return [[beginTime, endTime]] |
| | | } |
| | | } |
| | | } |