1 changed files with 487 additions and 453 deletions
@ -1,477 +1,511 @@ |
|||
<template> |
|||
<div class="tabs"></div> |
|||
<div class="main"> |
|||
<div class="menu panel"> |
|||
<div class="menu-item"> |
|||
<h2 class="tip">指标选择</h2> |
|||
<el-row :gutter="12"> |
|||
<el-col :span="24"><span @click="onIndicatorClick('plan-advice')" :class="{'active': currentIndicator === 'plan-advice'}">通风廊道规划建议</span></el-col> |
|||
<el-col :span="24"><span @click="onIndicatorClick('pollution-indicator')" :class="{'active': currentIndicator === 'pollution-indicator'}">高楼污染指数</span></el-col> |
|||
</el-row> |
|||
</div> |
|||
<div class="menu-item" v-if="currentIndicator === 'plan-advice'"> |
|||
<h2 class="tip">产品选择</h2> |
|||
<el-row :gutter="12"> |
|||
<el-col :span="24"><span @click="onProductClick('control-experiment')" :class="{'active': currentProduct === 'control-experiment'}">控制实验</span></el-col> |
|||
<el-col :span="24"><span @click="onProductClick('product-influence')" :class="{'active': currentProduct === 'product-influence'}">通风廊道的影响</span></el-col> |
|||
<el-col :span="24"><span @click="onProductClick('product-experiment')" :class="{'active': currentProduct === 'product-experiment'}">通风廊道试验</span></el-col> |
|||
</el-row> |
|||
</div> |
|||
</div> |
|||
<div class="container panel decision-container"> |
|||
<span class="save-btn" @click="onSaveClick" v-if="currentIndicator != 'pollution-indicator'"><img src="/images/save.png" /></span> |
|||
<div class="download-pictures" id="pictures"> |
|||
<a v-for="(url, index) in urls" :key="index" download></a> |
|||
</div> |
|||
|
|||
<div class="picture-view advice-picture-view" v-if="currentIndicator === 'plan-advice'"> |
|||
<el-row :gutter="0"> |
|||
<el-col :span="8" v-for="(item, index) in items" :key="index"> |
|||
<h2 class="title">{{item.title}}</h2> |
|||
<el-image |
|||
:src="item.imgUrl" |
|||
:preview-src-list="item.preview" |
|||
:initial-index="0" |
|||
fit="contain" |
|||
> |
|||
<template #error> |
|||
<div class="image-slot"> |
|||
<img src="/images/null-picture.png" /> |
|||
</div> |
|||
<p class="image-tip">暂无图片</p> |
|||
</template> |
|||
<template #placeholder> |
|||
<div class="image-placeholder">正在加载...</div> |
|||
</template> |
|||
</el-image> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
|
|||
|
|||
<div class="toolbar day-toolbar" v-show="currentIndicator === 'pollution-indicator'"> |
|||
<div class="times"> |
|||
<div class="time-item" v-for="(time, index) in times" :key="index" |
|||
:class="{'active': currentTime === time.date, 'first-hour': time.day === '01'}"> |
|||
<span class="hour" style="padding-left: 10px">{{ time.month }}</span> |
|||
<span class="time" @click="onChangeDayClick(time, index)">{{ time.day }}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false" |
|||
class="date-picker" @change="onChange"> |
|||
</el-date-picker> |
|||
<div class="control-btn"> |
|||
<span @click="onPrevDayTimeClick"><img src="/images/prev.png"/></span> |
|||
<span @click="onNextDayTimeClick"><img src="/images/next.png"/></span> |
|||
</div> |
|||
<div class="tabs"></div> |
|||
<div class="main"> |
|||
<div class="menu panel"> |
|||
<div class="menu-item"> |
|||
<h2 class="tip">指标选择</h2> |
|||
<el-row :gutter="12"> |
|||
<el-col :span="24"><span @click="onIndicatorClick('plan-advice')" |
|||
:class="{'active': currentIndicator === 'plan-advice'}">通风廊道规划建议</span></el-col> |
|||
<el-col :span="24"><span @click="onIndicatorClick('pollution-indicator')" |
|||
:class="{'active': currentIndicator === 'pollution-indicator'}">高楼污染指数</span> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
<div class="menu-item" v-if="currentIndicator === 'plan-advice'"> |
|||
<h2 class="tip">产品选择</h2> |
|||
<el-row :gutter="12"> |
|||
<el-col :span="24"><span @click="onProductClick('control-experiment')" |
|||
:class="{'active': currentProduct === 'control-experiment'}">控制实验</span></el-col> |
|||
<el-col :span="24"><span @click="onProductClick('product-influence')" |
|||
:class="{'active': currentProduct === 'product-influence'}">通风廊道的影响</span></el-col> |
|||
<el-col :span="24"><span @click="onProductClick('product-experiment')" |
|||
:class="{'active': currentProduct === 'product-experiment'}">通风廊道试验</span></el-col> |
|||
</el-row> |
|||
</div> |
|||
</div> |
|||
<div class="container panel decision-container"> |
|||
<span class="save-btn" @click="onSaveClick" v-if="currentIndicator != 'pollution-indicator'"><img |
|||
src="/images/save.png"/></span> |
|||
<div class="download-pictures" id="pictures"> |
|||
<a v-for="(url, index) in urls" :key="index" download></a> |
|||
</div> |
|||
|
|||
<div class="picture-view advice-picture-view" v-if="currentIndicator === 'plan-advice'"> |
|||
<el-row :gutter="0"> |
|||
<el-col :span="8" v-for="(item, index) in items" :key="index"> |
|||
<h2 class="title">{{ item.title }}</h2> |
|||
<el-image |
|||
:src="item.imgUrl" |
|||
:preview-src-list="item.preview" |
|||
:initial-index="0" |
|||
fit="contain" |
|||
> |
|||
<template #error> |
|||
<div class="image-slot"> |
|||
<img src="/images/null-picture.png"/> |
|||
</div> |
|||
<p class="image-tip">暂无图片</p> |
|||
</template> |
|||
<template #placeholder> |
|||
<div class="image-placeholder">正在加载...</div> |
|||
</template> |
|||
</el-image> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
|
|||
|
|||
<div class="toolbar day-toolbar" v-show="currentIndicator === 'pollution-indicator'"> |
|||
<div class="times"> |
|||
<div class="time-item" v-for="(time, index) in times" :key="index" |
|||
:class="{'active': currentTime === time.date, 'first-hour': time.day === '01'}"> |
|||
<span class="hour" style="padding-left: 10px">{{ time.month }}</span> |
|||
<span class="time" @click="onChangeDayClick(time, index)">{{ time.day }}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="picture-container raman-picture-container" v-show="currentIndicator === 'pollution-indicator'"> |
|||
<div class="picture"> |
|||
<div id="pollutionIndicator" |
|||
style="margin-top: 66px" |
|||
v-loading="loadingPollutionIndicatorStatus" |
|||
custom-class="loading" |
|||
element-loading-text="加载中"> |
|||
</div> |
|||
</div> |
|||
<!-- <div class="picture-block">--> |
|||
<!-- <div class="picture">--> |
|||
<!-- <el-image--> |
|||
<!-- :src="indicatorImg"--> |
|||
<!-- :preview-src-list="indicatorPreview"--> |
|||
<!-- :initial-index="1"--> |
|||
<!-- fit="contain"--> |
|||
<!-- >--> |
|||
<!-- <template #error>--> |
|||
<!-- <div class="image-slot">--> |
|||
<!-- <img src="/images/null-picture.png" />--> |
|||
<!-- </div>--> |
|||
<!-- <p class="image-tip">暂无图片</p>--> |
|||
<!-- </template>--> |
|||
<!-- <template #placeholder>--> |
|||
<!-- <div class="image-placeholder">正在加载...</div>--> |
|||
<!-- </template>--> |
|||
<!-- </el-image>--> |
|||
<!-- </div>--> |
|||
<!-- <div class="instruction">--> |
|||
<!-- <h2>高楼污染指数说明:</h2>--> |
|||
<!-- <p>使用激光雷达数据反演PM2.5和PM10</p>--> |
|||
<!-- <p>浓度廓线,基于PM2.5和PM10的平均</p>--> |
|||
<!-- <p>值构建高楼污染指数,</p>--> |
|||
<!-- <p> 高楼(60米),</p>--> |
|||
<!-- <p> 超高楼(200米),</p>--> |
|||
<!-- <p> 极高楼层(500米)</p>--> |
|||
<!-- </div>--> |
|||
<!-- </div>--> |
|||
|
|||
|
|||
</div> |
|||
<el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false" |
|||
class="date-picker" @change="onChange"> |
|||
</el-date-picker> |
|||
<div class="control-btn"> |
|||
<span @click="onPrevDayTimeClick"><img src="/images/prev.png"/></span> |
|||
<span @click="onNextDayTimeClick"><img src="/images/next.png"/></span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="picture-container raman-picture-container" v-show="currentIndicator === 'pollution-indicator'"> |
|||
<div class="picture"> |
|||
<div id="pollutionIndicator" |
|||
style="margin-top: 66px" |
|||
v-loading="loadingPollutionIndicatorStatus" |
|||
custom-class="loading" |
|||
element-loading-text="加载中"> |
|||
</div> |
|||
</div> |
|||
<!-- <div class="picture-block">--> |
|||
<!-- <div class="picture">--> |
|||
<!-- <el-image--> |
|||
<!-- :src="indicatorImg"--> |
|||
<!-- :preview-src-list="indicatorPreview"--> |
|||
<!-- :initial-index="1"--> |
|||
<!-- fit="contain"--> |
|||
<!-- >--> |
|||
<!-- <template #error>--> |
|||
<!-- <div class="image-slot">--> |
|||
<!-- <img src="/images/null-picture.png" />--> |
|||
<!-- </div>--> |
|||
<!-- <p class="image-tip">暂无图片</p>--> |
|||
<!-- </template>--> |
|||
<!-- <template #placeholder>--> |
|||
<!-- <div class="image-placeholder">正在加载...</div>--> |
|||
<!-- </template>--> |
|||
<!-- </el-image>--> |
|||
<!-- </div>--> |
|||
<!-- <div class="instruction">--> |
|||
<!-- <h2>高楼污染指数说明:</h2>--> |
|||
<!-- <p>使用激光雷达数据反演PM2.5和PM10</p>--> |
|||
<!-- <p>浓度廓线,基于PM2.5和PM10的平均</p>--> |
|||
<!-- <p>值构建高楼污染指数,</p>--> |
|||
<!-- <p> 高楼(60米),</p>--> |
|||
<!-- <p> 超高楼(200米),</p>--> |
|||
<!-- <p> 极高楼层(500米)</p>--> |
|||
<!-- </div>--> |
|||
<!-- </div>--> |
|||
|
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { onMounted, reactive, toRefs } from 'vue'; |
|||
import * as Tiff from 'browser-tiff.js'; |
|||
import { DecisionSupportConfig } from '../uilts/Config'; |
|||
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: [{ |
|||
title: '比湿', |
|||
imgName: 'TFLD_Q2', |
|||
imgUrl: '/images/default-picture.png', |
|||
preview: [] |
|||
}, { |
|||
title: '风速和风向', |
|||
imgName: 'TFLD_V10', |
|||
imgUrl: '/images/default-picture.png', |
|||
preview: [] |
|||
}, { |
|||
title: '降水', |
|||
imgName: 'TFLD_RAIN', |
|||
imgUrl: '/images/default-picture.png', |
|||
preview: [] |
|||
}, { |
|||
title: '平均气温', |
|||
imgName: 'TFLD_T2', |
|||
imgUrl: '/images/default-picture.png', |
|||
preview: [] |
|||
}, { |
|||
title: '最低温度', |
|||
imgName: 'TFLD_TN', |
|||
imgUrl: '/images/default-picture.png', |
|||
preview: [] |
|||
}, { |
|||
title: '最高温度', |
|||
imgName: 'TFLD_TX', |
|||
imgUrl: '/images/default-picture.png', |
|||
preview: [] |
|||
}], |
|||
indicatorImg: '/product/picture/images/decision-support/pollution-indicator/pollution-indicator.png', |
|||
indicatorPreview: ['/product/picture/images/decision-support/pollution-indicator/pollution-indicator.png'], |
|||
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); |
|||
} |
|||
reloadChartsRecognition('hbpi', drawPollutionIndicator) |
|||
pollutionIndicatorInit() |
|||
} |
|||
|
|||
const onProductClick = (product) => { |
|||
options.currentProduct = product; |
|||
setImage('plan-advice' + '/' + options.currentProduct); |
|||
} |
|||
|
|||
const setImage = (type) => { |
|||
for(let index = 0; index < 6; index ++){ |
|||
initImage(type, options.items[index].imgName, index); |
|||
} |
|||
|
|||
options.urls = options.items; |
|||
} |
|||
|
|||
const initImage = (type, imgName, index) => { |
|||
post("/image/convert", {url: DecisionSupportConfig.getUrl(type, imgName)}).then((response: any) => { |
|||
if (response.error != 0){ |
|||
return; |
|||
} |
|||
|
|||
options.items[index].imgUrl = response.data; |
|||
options.items[index].preview = [response.data]; |
|||
}) |
|||
} |
|||
|
|||
const onSaveClick = () => { |
|||
let pictures = document.getElementById('pictures'); |
|||
|
|||
for (let i = 0; i < options.urls.length; i++) { |
|||
let img = new Image(); |
|||
img.src = options.urls[i].imgUrl; |
|||
let canvas = document.createElement("canvas") as HTMLCanvasElement; |
|||
canvas.width = img.width; |
|||
canvas.height = img.height; |
|||
|
|||
let ctx = canvas.getContext("2d"); |
|||
let base64 = ''; |
|||
|
|||
img.setAttribute("crossOrigin",'Anonymous'); |
|||
img.onload = function() { |
|||
ctx.drawImage(img, 0, 0); |
|||
base64 = canvas.toDataURL("image/png"); |
|||
pictures.children[i].setAttribute('href', base64); |
|||
|
|||
let button: HTMLElement = pictures.children[i] as HTMLElement; |
|||
setTimeout(() => { |
|||
button.click(); |
|||
}, 500); |
|||
}; |
|||
} |
|||
} |
|||
|
|||
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<any>) => { |
|||
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<any>) => { |
|||
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<any>) => { |
|||
result.push({ |
|||
time: time, |
|||
message: message, |
|||
data: data == null ? null : JSON.parse(data) |
|||
}) |
|||
} |
|||
import {onMounted, reactive, toRefs} from 'vue'; |
|||
import * as Tiff from 'browser-tiff.js'; |
|||
import {DecisionSupportConfig} from '../uilts/Config'; |
|||
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: [{ |
|||
title: '比湿', |
|||
imgName: 'TFLD_Q2', |
|||
imgUrl: '/images/default-picture.png', |
|||
preview: [] |
|||
}, { |
|||
title: '风速和风向', |
|||
imgName: 'TFLD_V10', |
|||
imgUrl: '/images/default-picture.png', |
|||
preview: [] |
|||
}, { |
|||
title: '降水', |
|||
imgName: 'TFLD_RAIN', |
|||
imgUrl: '/images/default-picture.png', |
|||
preview: [] |
|||
}, { |
|||
title: '平均气温', |
|||
imgName: 'TFLD_T2', |
|||
imgUrl: '/images/default-picture.png', |
|||
preview: [] |
|||
}, { |
|||
title: '最低温度', |
|||
imgName: 'TFLD_TN', |
|||
imgUrl: '/images/default-picture.png', |
|||
preview: [] |
|||
}, { |
|||
title: '最高温度', |
|||
imgName: 'TFLD_TX', |
|||
imgUrl: '/images/default-picture.png', |
|||
preview: [] |
|||
}], |
|||
indicatorImg: '/product/picture/images/decision-support/pollution-indicator/pollution-indicator.png', |
|||
indicatorPreview: ['/product/picture/images/decision-support/pollution-indicator/pollution-indicator.png'], |
|||
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); |
|||
} |
|||
reloadChartsRecognition('hbpi', drawPollutionIndicator) |
|||
pollutionIndicatorInit() |
|||
} |
|||
|
|||
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 onProductClick = (product) => { |
|||
options.currentProduct = product; |
|||
setImage('plan-advice' + '/' + options.currentProduct); |
|||
} |
|||
|
|||
const onChangeDayClick = (time, index) => { |
|||
options.currentTime = time.date |
|||
options.date = moment(time.date).format('YYYY-MM-DD'); |
|||
reloadChartsRecognition('hbpi', drawPollutionIndicator) |
|||
options.index = index; |
|||
} |
|||
const setImage = (type) => { |
|||
for (let index = 0; index < 6; index++) { |
|||
initImage(type, options.items[index].imgName, index); |
|||
} |
|||
|
|||
const onPrevDayTimeClick = () => { |
|||
options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD'); |
|||
initTimeLineDay() |
|||
reloadChartsRecognition('hbpi', drawPollutionIndicator) |
|||
} |
|||
options.urls = options.items; |
|||
} |
|||
|
|||
const onNextDayTimeClick = () => { |
|||
options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD'); |
|||
initTimeLineDay() |
|||
reloadChartsRecognition('hbpi', drawPollutionIndicator) |
|||
} |
|||
const initImage = (type, imgName, index) => { |
|||
post("/image/convert", {url: DecisionSupportConfig.getUrl(type, imgName)}).then((response: any) => { |
|||
if (response.error != 0) { |
|||
return; |
|||
} |
|||
|
|||
const onChange = () => { |
|||
initTimeLineDay(); |
|||
reloadChartsRecognition('hbpi', drawPollutionIndicator) |
|||
} |
|||
options.items[index].imgUrl = response.data; |
|||
options.items[index].preview = [response.data]; |
|||
}) |
|||
} |
|||
|
|||
const onSaveClick = () => { |
|||
let pictures = document.getElementById('pictures'); |
|||
|
|||
for (let i = 0; i < options.urls.length; i++) { |
|||
let img = new Image(); |
|||
img.src = options.urls[i].imgUrl; |
|||
let canvas = document.createElement("canvas") as HTMLCanvasElement; |
|||
canvas.width = img.width; |
|||
canvas.height = img.height; |
|||
|
|||
let ctx = canvas.getContext("2d"); |
|||
let base64 = ''; |
|||
|
|||
img.setAttribute("crossOrigin", 'Anonymous'); |
|||
img.onload = function () { |
|||
ctx.drawImage(img, 0, 0); |
|||
base64 = canvas.toDataURL("image/png"); |
|||
pictures.children[i].setAttribute('href', base64); |
|||
|
|||
let button: HTMLElement = pictures.children[i] as HTMLElement; |
|||
setTimeout(() => { |
|||
button.click(); |
|||
}, 500); |
|||
}; |
|||
} |
|||
} |
|||
|
|||
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<any>) => { |
|||
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 = group(temp ,24) |
|||
} |
|||
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; |
|||
} |
|||
|
|||
return { |
|||
...toRefs(options), |
|||
onIndicatorClick, |
|||
onProductClick, |
|||
onSaveClick, |
|||
onChangeDayClick, |
|||
onPrevDayTimeClick, |
|||
onNextDayTimeClick, |
|||
onChange |
|||
} |
|||
const group = (array, subGroupLength) => { |
|||
let index = 0; |
|||
let newArray = []; |
|||
while(index < array.length) { |
|||
newArray.push(array.slice(index, index += subGroupLength)); |
|||
} |
|||
return newArray; |
|||
} |
|||
|
|||
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<any>) => { |
|||
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<any>) => { |
|||
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, |
|||
onChangeDayClick, |
|||
onPrevDayTimeClick, |
|||
onNextDayTimeClick, |
|||
onChange |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.main { |
|||
.decision-container { |
|||
height: calc(~"100% - 0.6rem"); |
|||
padding: 0.2rem 0 0.2rem 0.2rem; |
|||
.save-btn { |
|||
top: 0.2rem; |
|||
right: 0.2rem; |
|||
} |
|||
.advice-picture-view { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
:deep(.el-row) { |
|||
width: 100%; |
|||
.title { |
|||
padding: 0; |
|||
font-size: 0.22rem; |
|||
} |
|||
.el-col { |
|||
height: 46%; |
|||
margin-top: 1%; |
|||
text-align: center; |
|||
.el-image { |
|||
height: calc(~"100% - 0.4rem"); |
|||
margin-top: 0.1rem; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.indicator-picture-view { |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
.title { |
|||
padding: 0; |
|||
margin-bottom: 0.7rem; |
|||
} |
|||
.picture-block { |
|||
display: flex; |
|||
align-items: end; |
|||
justify-content: center; |
|||
} |
|||
.picture { |
|||
width: 6.5rem; |
|||
height: auto; |
|||
display: block; |
|||
position: relative; |
|||
|
|||
.el-image { |
|||
width: 100%; |
|||
height: auto; |
|||
margin: 0 auto; |
|||
:deep(.el-image__inner) { |
|||
max-width: 99%; |
|||
border: 1px solid #707070; |
|||
} |
|||
} |
|||
|
|||
&:last-of-type { |
|||
width: 6.44rem; |
|||
} |
|||
} |
|||
.instruction { |
|||
margin-left: 0.4rem; |
|||
color: #222222; |
|||
|
|||
h2 { |
|||
font-size: 0.16rem; |
|||
} |
|||
|
|||
p { |
|||
margin-top: 0.15rem; |
|||
} |
|||
} |
|||
} |
|||
.raman-picture-container { |
|||
margin: 0 auto; |
|||
.picture { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.main { |
|||
.decision-container { |
|||
height: calc(~"100% - 0.6rem"); |
|||
padding: 0.2rem 0 0.2rem 0.2rem; |
|||
|
|||
.save-btn { |
|||
top: 0.2rem; |
|||
right: 0.2rem; |
|||
} |
|||
|
|||
.advice-picture-view { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
|
|||
:deep(.el-row) { |
|||
width: 100%; |
|||
|
|||
.title { |
|||
padding: 0; |
|||
font-size: 0.22rem; |
|||
} |
|||
|
|||
.el-col { |
|||
height: 46%; |
|||
margin-top: 1%; |
|||
text-align: center; |
|||
|
|||
.el-image { |
|||
height: calc(~"100% - 0.4rem"); |
|||
margin-top: 0.1rem; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.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; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.indicator-picture-view { |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
|
|||
.title { |
|||
padding: 0; |
|||
margin-bottom: 0.7rem; |
|||
} |
|||
|
|||
.picture-block { |
|||
display: flex; |
|||
align-items: end; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.picture { |
|||
width: 6.5rem; |
|||
height: auto; |
|||
display: block; |
|||
position: relative; |
|||
|
|||
.el-image { |
|||
width: 100%; |
|||
height: auto; |
|||
margin: 0 auto; |
|||
|
|||
:deep(.el-image__inner) { |
|||
max-width: 99%; |
|||
border: 1px solid #707070; |
|||
} |
|||
} |
|||
|
|||
&:last-of-type { |
|||
width: 6.44rem; |
|||
} |
|||
} |
|||
|
|||
.instruction { |
|||
margin-left: 0.4rem; |
|||
color: #222222; |
|||
|
|||
h2 { |
|||
font-size: 0.16rem; |
|||
} |
|||
|
|||
p { |
|||
margin-top: 0.15rem; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
Loading…
Reference in new issue