From 348186764fb2b9148e8fe04f67e310918d4c7013 Mon Sep 17 00:00:00 2001 From: xuhuihui <3548508071@qq.com> Date: Tue, 31 May 2022 17:14:00 +0800 Subject: [PATCH] commit --- .../src/components/DecisionSupport.vue | 262 +++++++++++++++--- .../Frontend/src/components/Login.vue | 11 +- .../src/components/MicrowaveRadiation.vue | 26 +- .../Frontend/src/components/RamanLidar.vue | 204 ++++++-------- .../Frontend/src/model/heat-map-drawer.ts | 22 +- .../Frontend/src/model/high-chart-create.ts | 11 +- .../Frontend/src/uilts/box-drawer.ts | 18 +- 7 files changed, 359 insertions(+), 195 deletions(-) diff --git a/04.系统编码/Frontend/src/components/DecisionSupport.vue b/04.系统编码/Frontend/src/components/DecisionSupport.vue index 4a9a3c9..b1f4cba 100644 --- a/04.系统编码/Frontend/src/components/DecisionSupport.vue +++ b/04.系统编码/Frontend/src/components/DecisionSupport.vue @@ -19,7 +19,7 @@
- +
@@ -47,37 +47,66 @@
-
-

高楼污染指数

-
-
- - - - -
-
-

高楼污染指数说明：

-

使用激光雷达数据反演PM2.5和PM10

-

浓度廓线，基于PM2.5和PM10的平均

-

值构建高楼污染指数，

-

高楼(60米)，

-

超高楼(200米)，

-

极高楼层(500米)

-
+ + +
+
+
+ {{ time.month }} + {{ time.day }} +
+
+ + + +
+ + +
+
+ +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
@@ -87,12 +116,20 @@ import { onMounted, reactive, toRefs } from 'vue'; import * as Tiff from 'browser-tiff.js'; import { DecisionSupportConfig } from '../uilts/Config'; -import { post } from '../uilts/axios'; - + import {get, post} from '../uilts/axios'; + import {HighChartCreate} from "../model/high-chart-create"; + import moment from "moment"; + import {ConstantRamanLidar} from "../model/constant"; + import {CustomeArray} from "../model/custome-array"; export default { name: 'DecisionSupport', setup() { + let options = reactive({ + times: [], + currentTime: null, + date: moment().format('YYYY-MM-DD 00:00:00'), + index: 0, currentIndicator: 'plan-advice', currentProduct: 'control-experiment', items: [{ @@ -128,18 +165,28 @@ import { post } from '../uilts/axios'; }], indicatorImg: '/product/picture/images/decision-support/pollution-indicator/pollution-indicator.png', indicatorPreview: ['/product/picture/images/decision-support/pollution-indicator/pollution-indicator.png'], - urls: [] + urls: [], + loadingPollutionIndicatorStatus: false }) + let creates: { + pollutionIndicator: HighChartCreate + } = { + pollutionIndicator: null + } onMounted(() => { + initTimeLineDay() setImage(options.currentIndicator + '/' + options.currentProduct); }) const onIndicatorClick = (indicator) => { options.currentIndicator = indicator; - if(options.currentIndicator === 'plan-advice') - setImage(options.currentIndicator + '/' + options.currentProduct); + if(options.currentIndicator === 'plan-advice') { + setImage(options.currentIndicator + '/' + options.currentProduct); + } + reloadChartsRecognition('hbpi', drawPollutionIndicator) + pollutionIndicatorInit() } const onProductClick = (product) => { @@ -193,11 +240,133 @@ import { post } from '../uilts/axios'; } } + const pollutionIndicatorInit = () => { + creates.pollutionIndicator = new HighChartCreate('pollutionIndicator'); + creates.pollutionIndicator.setChart(false, 'line', 1500, 600); + creates.pollutionIndicator.setXAxisTypeDate(); + creates.pollutionIndicator.setSpecialYAxis('高楼污染指数'); + creates.pollutionIndicator.setLegend(true); + creates.pollutionIndicator.setTooltip('{point.y}'); + creates.pollutionIndicator.setSeries('高楼', 0, null, null, '#B21523') + creates.pollutionIndicator.setSeries('超高楼', 0, null, null, '#000B6F') + creates.pollutionIndicator.setSeries('极高楼层', 0, null, null, '#853083') + creates.pollutionIndicator.init(); + } + + const drawPollutionIndicator = (result: CustomeArray) => { + if (result[0].time == null) return; + const data = prepareChartData(result); + creates.pollutionIndicator.updateSeries(0, data[0]); + creates.pollutionIndicator.updateSeries(1, data[1]); + creates.pollutionIndicator.updateSeries(2, data[2]); + options.loadingPollutionIndicatorStatus = false + } + + const prepareChartData = (result) => { + if (result[0].data == null) { + let temp = [] + for (let i = 0; i < 72; i++) { + temp.push(NaN); + } + result[0].data = [temp]; + } + let prepareData = [] + let startTimeMoment = moment(result[0].time, 'M_D_H').add(8, 'h') + result[0].data.forEach(item => { + let data = [] + for (let i = 0, len = item.length; i < len; i++) { + data.push([startTimeMoment.clone().add(1 * i, 'h').valueOf(), item[i]]) + } + prepareData.push(data) + }) + return prepareData; + } + + const reloadChartsRecognition = (element: string, callback: any) => { + options.loadingPollutionIndicatorStatus = true + let result = new CustomeArray(callback); + let time = moment(options.date); + reloadPollutionIndicator(time.format('M_D_H'), element, result); + } + + const reloadPollutionIndicator = (time: string, elementCode, result: CustomeArray) => { + let params = prepareApiParams(time, elementCode) + get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response: any) => { + if (response.state != 0) { + setChartsRecognitionResult(time, response.message, null, result); + return; + } + setChartsRecognitionResult(time, response.message, response.data, result); + }).catch(error => { + setChartsRecognitionResult(time, error.message, null, result); + }) + } + + const prepareApiParams = (time, elementCode) => { + return { + var: elementCode, + locate: 'nj', + date: moment(time,'MM_DD_hh').format('M_D'), + } + } + + const setChartsRecognitionResult = (time: string, message: string, data: any, result: CustomeArray) => { + result.push({ + time: time, + message: message, + data: data == null ? null : JSON.parse(data) + }) + } + + const initTimeLineDay = () => { + options.times = []; + options.currentTime = moment(options.date).format('YYYY-MM-DD'); + let now = moment(options.date).add(1, 'd'); + let day = new Date(now.year(), now.month() + 1, 0); + for (let i = 0; i < 24; i++) { + options.times.push({ + day: now.add(-1, 'd').format('DD'), + month: now.format('MM'), + date: now.format('YYYY-MM-DD'), + }) + } + options.times.reverse(); + options.index = options.times.length - 1; + } + + const onChangeDayClick = (time, index) => { + options.currentTime = time.date + options.date = moment(time.date).format('YYYY-MM-DD'); + reloadChartsRecognition('hbpi', drawPollutionIndicator) + options.index = index; + } + + const onPrevDayTimeClick = () => { + options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD'); + initTimeLineDay() + reloadChartsRecognition('hbpi', drawPollutionIndicator) + } + + const onNextDayTimeClick = () => { + options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD'); + initTimeLineDay() + reloadChartsRecognition('hbpi', drawPollutionIndicator) + } + + const onChange = () => { + initTimeLineDay(); + reloadChartsRecognition('hbpi', drawPollutionIndicator) + } + return { ...toRefs(options), onIndicatorClick, onProductClick, - onSaveClick + onSaveClick, + onChangeDayClick, + onPrevDayTimeClick, + onNextDayTimeClick, + onChange } } } @@ -284,6 +453,25 @@ import { post } from '../uilts/axios'; } } } + .raman-picture-container { + margin: 0 auto; + .picture { + width: 100%; + height: 100%; + } + } + .toolbar { + //padding: 0.15rem 0; + padding-bottom: 7px; + margin: -12px 0.25rem 0px; + .times { + padding-bottom: 0; + } + :deep(.date-picker), .control-btn { + margin-top: 12px; + } + + } } } diff --git a/04.系统编码/Frontend/src/components/Login.vue b/04.系统编码/Frontend/src/components/Login.vue index afaa4b2..729afab 100644 --- a/04.系统编码/Frontend/src/components/Login.vue +++ b/04.系统编码/Frontend/src/components/Login.vue @@ -93,7 +93,7 @@ export default {