root
/
NanJingLamanRadarProject
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

commit

master
xuhuihui 3 years ago
parent
348186764f
commit
42f413b739
1 changed files with 487 additions and 453 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 146
      04.系统编码/Frontend/src/components/DecisionSupport.vue

146
04.系统编码/Frontend/src/components/DecisionSupport.vue
View File

@ -5,21 +5,28 @@
<div class="menu-item"> <div class="menu-item">
<h2 class="tip">指标选择</h2> <h2 class="tip">指标选择</h2>
<el-row :gutter="12"> <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('plan-advice')"
<el-col :span="24"><span @click="onIndicatorClick('pollution-indicator')" :class="{'active': currentIndicator === 'pollution-indicator'}">高楼污染指数</span></el-col> :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> </el-row>
</div> </div>
<div class="menu-item" v-if="currentIndicator === 'plan-advice'"> <div class="menu-item" v-if="currentIndicator === 'plan-advice'">
<h2 class="tip">产品选择</h2> <h2 class="tip">产品选择</h2>
<el-row :gutter="12"> <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('control-experiment')"
<el-col :span="24"><span @click="onProductClick('product-influence')" :class="{'active': currentProduct === 'product-influence'}">通风廊道的影响</span></el-col> :class="{'active': currentProduct === 'control-experiment'}">控制实验</span></el-col>
<el-col :span="24"><span @click="onProductClick('product-experiment')" :class="{'active': currentProduct === 'product-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> </el-row>
</div> </div>
</div> </div>
<div class="container panel decision-container"> <div class="container panel decision-container">
<span class="save-btn" @click="onSaveClick" v-if="currentIndicator != 'pollution-indicator'"><img src="/images/save.png" /></span> <span class="save-btn" @click="onSaveClick" v-if="currentIndicator != 'pollution-indicator'"><img
src="/images/save.png"/></span>
<div class="download-pictures" id="pictures"> <div class="download-pictures" id="pictures">
<a v-for="(url, index) in urls" :key="index" download></a> <a v-for="(url, index) in urls" :key="index" download></a>
</div> </div>
@ -27,7 +34,7 @@
<div class="picture-view advice-picture-view" v-if="currentIndicator === 'plan-advice'"> <div class="picture-view advice-picture-view" v-if="currentIndicator === 'plan-advice'">
<el-row :gutter="0"> <el-row :gutter="0">
<el-col :span="8" v-for="(item, index) in items" :key="index"> <el-col :span="8" v-for="(item, index) in items" :key="index">
<h2 class="title">{{item.title}}</h2> <h2 class="title">{{ item.title }}</h2>
<el-image <el-image
:src="item.imgUrl" :src="item.imgUrl"
:preview-src-list="item.preview" :preview-src-list="item.preview"
@ -36,7 +43,7 @@
> >
<template #error> <template #error>
<div class="image-slot"> <div class="image-slot">
<img src="/images/null-picture.png" /> <img src="/images/null-picture.png"/>
</div> </div>
<p class="image-tip">暂无图片</p> <p class="image-tip">暂无图片</p>
</template> </template>
@ -76,35 +83,35 @@
element-loading-text="加载中"> element-loading-text="加载中">
</div> </div>
</div> </div>
<!-- <div class="picture-block">--> <!-- <div class="picture-block">-->
<!-- <div class="picture">--> <!-- <div class="picture">-->
<!-- <el-image--> <!-- <el-image-->
<!-- :src="indicatorImg"--> <!-- :src="indicatorImg"-->
<!-- :preview-src-list="indicatorPreview"--> <!-- :preview-src-list="indicatorPreview"-->
<!-- :initial-index="1"--> <!-- :initial-index="1"-->
<!-- fit="contain"--> <!-- fit="contain"-->
<!-- >--> <!-- >-->
<!-- <template #error>--> <!-- <template #error>-->
<!-- <div class="image-slot">--> <!-- <div class="image-slot">-->
<!-- <img src="/images/null-picture.png" />--> <!-- <img src="/images/null-picture.png" />-->
<!-- </div>--> <!-- </div>-->
<!-- <p class="image-tip">暂无图片</p>--> <!-- <p class="image-tip">暂无图片</p>-->
<!-- </template>--> <!-- </template>-->
<!-- <template #placeholder>--> <!-- <template #placeholder>-->
<!-- <div class="image-placeholder">正在加载...</div>--> <!-- <div class="image-placeholder">正在加载...</div>-->
<!-- </template>--> <!-- </template>-->
<!-- </el-image>--> <!-- </el-image>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="instruction">--> <!-- <div class="instruction">-->
<!-- <h2>高楼污染指数说明：</h2>--> <!-- <h2>高楼污染指数说明：</h2>-->
<!-- <p>使用激光雷达数据反演PM2.5和PM10</p>--> <!-- <p>使用激光雷达数据反演PM2.5和PM10</p>-->
<!-- <p>浓度廓线，基于PM2.5和PM10的平均</p>--> <!-- <p>浓度廓线，基于PM2.5和PM10的平均</p>-->
<!-- <p>值构建高楼污染指数，</p>--> <!-- <p>值构建高楼污染指数，</p>-->
<!-- <p> 高楼(60米)，</p>--> <!-- <p> 高楼(60米)，</p>-->
<!-- <p> 超高楼(200米)，</p>--> <!-- <p> 超高楼(200米)，</p>-->
<!-- <p> 极高楼层(500米)</p>--> <!-- <p> 极高楼层(500米)</p>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
</div> </div>
@ -113,15 +120,16 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { onMounted, reactive, toRefs } from 'vue'; import {onMounted, reactive, toRefs} from 'vue';
import * as Tiff from 'browser-tiff.js'; import * as Tiff from 'browser-tiff.js';
import { DecisionSupportConfig } from '../uilts/Config'; import {DecisionSupportConfig} from '../uilts/Config';
import {get, post} from '../uilts/axios'; import {get, post} from '../uilts/axios';
import {HighChartCreate} from "../model/high-chart-create"; import {HighChartCreate} from "../model/high-chart-create";
import moment from "moment"; import moment from "moment";
import {ConstantRamanLidar} from "../model/constant"; import {ConstantRamanLidar} from "../model/constant";
import {CustomeArray} from "../model/custome-array"; import {CustomeArray} from "../model/custome-array";
export default {
export default {
name: 'DecisionSupport', name: 'DecisionSupport',
setup() { setup() {
@ -182,7 +190,7 @@
const onIndicatorClick = (indicator) => { const onIndicatorClick = (indicator) => {
options.currentIndicator = indicator; options.currentIndicator = indicator;
if(options.currentIndicator === 'plan-advice') { if (options.currentIndicator === 'plan-advice') {
setImage(options.currentIndicator + '/' + options.currentProduct); setImage(options.currentIndicator + '/' + options.currentProduct);
} }
reloadChartsRecognition('hbpi', drawPollutionIndicator) reloadChartsRecognition('hbpi', drawPollutionIndicator)
@ -195,7 +203,7 @@
} }
const setImage = (type) => { const setImage = (type) => {
for(let index = 0; index < 6; index ++){ for (let index = 0; index < 6; index++) {
initImage(type, options.items[index].imgName, index); initImage(type, options.items[index].imgName, index);
} }
@ -204,7 +212,7 @@
const initImage = (type, imgName, index) => { const initImage = (type, imgName, index) => {
post("/image/convert", {url: DecisionSupportConfig.getUrl(type, imgName)}).then((response: any) => { post("/image/convert", {url: DecisionSupportConfig.getUrl(type, imgName)}).then((response: any) => {
if (response.error != 0){ if (response.error != 0) {
return; return;
} }
@ -226,8 +234,8 @@
let ctx = canvas.getContext("2d"); let ctx = canvas.getContext("2d");
let base64 = ''; let base64 = '';
img.setAttribute("crossOrigin",'Anonymous'); img.setAttribute("crossOrigin", 'Anonymous');
img.onload = function() { img.onload = function () {
ctx.drawImage(img, 0, 0); ctx.drawImage(img, 0, 0);
base64 = canvas.toDataURL("image/png"); base64 = canvas.toDataURL("image/png");
pictures.children[i].setAttribute('href', base64); pictures.children[i].setAttribute('href', base64);
@ -268,7 +276,7 @@
for (let i = 0; i < 72; i++) { for (let i = 0; i < 72; i++) {
temp.push(NaN); temp.push(NaN);
} }
result[0].data = [temp]; result[0].data = group(temp ,24)
} }
let prepareData = [] let prepareData = []
let startTimeMoment = moment(result[0].time, 'M_D_H').add(8, 'h') let startTimeMoment = moment(result[0].time, 'M_D_H').add(8, 'h')
@ -282,6 +290,15 @@
return prepareData; return prepareData;
} }
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) => { const reloadChartsRecognition = (element: string, callback: any) => {
options.loadingPollutionIndicatorStatus = true options.loadingPollutionIndicatorStatus = true
let result = new CustomeArray(callback); let result = new CustomeArray(callback);
@ -306,7 +323,7 @@
return { return {
var: elementCode, var: elementCode,
locate: 'nj', locate: 'nj',
date: moment(time,'MM_DD_hh').format('M_D'), date: moment(time, 'MM_DD_hh').format('M_D'),
} }
} }
@ -369,31 +386,37 @@
onChange onChange
} }
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.main { .main {
.decision-container { .decision-container {
height: calc(~"100% - 0.6rem"); height: calc(~"100% - 0.6rem");
padding: 0.2rem 0 0.2rem 0.2rem; padding: 0.2rem 0 0.2rem 0.2rem;
.save-btn { .save-btn {
top: 0.2rem; top: 0.2rem;
right: 0.2rem; right: 0.2rem;
} }
.advice-picture-view { .advice-picture-view {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
:deep(.el-row) { :deep(.el-row) {
width: 100%; width: 100%;
.title { .title {
padding: 0; padding: 0;
font-size: 0.22rem; font-size: 0.22rem;
} }
.el-col { .el-col {
height: 46%; height: 46%;
margin-top: 1%; margin-top: 1%;
text-align: center; text-align: center;
.el-image { .el-image {
height: calc(~"100% - 0.4rem"); height: calc(~"100% - 0.4rem");
margin-top: 0.1rem; margin-top: 0.1rem;
@ -405,21 +428,25 @@
} }
} }
} }
.indicator-picture-view { .indicator-picture-view {
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
.title { .title {
padding: 0; padding: 0;
margin-bottom: 0.7rem; margin-bottom: 0.7rem;
} }
.picture-block { .picture-block {
display: flex; display: flex;
align-items: end; align-items: end;
justify-content: center; justify-content: center;
} }
.picture { .picture {
width: 6.5rem; width: 6.5rem;
height: auto; height: auto;
@ -430,6 +457,7 @@
width: 100%; width: 100%;
height: auto; height: auto;
margin: 0 auto; margin: 0 auto;
:deep(.el-image__inner) { :deep(.el-image__inner) {
max-width: 99%; max-width: 99%;
border: 1px solid #707070; border: 1px solid #707070;
@ -440,6 +468,7 @@
width: 6.44rem; width: 6.44rem;
} }
} }
.instruction { .instruction {
margin-left: 0.4rem; margin-left: 0.4rem;
color: #222222; color: #222222;
@ -453,25 +482,30 @@
} }
} }
} }
.raman-picture-container { .raman-picture-container {
margin: 0 auto; margin: 0 auto;
.picture { .picture {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.toolbar { .toolbar {
//padding: 0.15rem 0; //padding: 0.15rem 0;
padding-bottom: 7px; padding-bottom: 7px;
margin: -12px 0.25rem 0px; margin: -12px 0.25rem 0px;
.times { .times {
padding-bottom: 0; padding-bottom: 0;
} }
:deep(.date-picker), .control-btn { :deep(.date-picker), .control-btn {
margin-top: 12px; margin-top: 12px;
} }
} }
} }
} }
</style> </style>

Write Preview
Loading…
Cancel
Save