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
Split 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">
<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-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-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>
<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>
@ -27,7 +34,7 @@
<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>
<h2 class="title">{{ item.title }}</h2>
<el-image
:src="item.imgUrl"
:preview-src-list="item.preview"
@ -36,7 +43,7 @@
>
<template #error>
<div class="image-slot">
<img src="/images/null-picture.png" />
<img src="/images/null-picture.png"/>
</div>
<p class="image-tip">暂无图片</p>
</template>
@ -76,35 +83,35 @@
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 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>
@ -113,15 +120,16 @@
</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 {
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() {
@ -182,7 +190,7 @@
const onIndicatorClick = (indicator) => {
options.currentIndicator = indicator;
if(options.currentIndicator === 'plan-advice') {
if (options.currentIndicator === 'plan-advice') {
setImage(options.currentIndicator + '/' + options.currentProduct);
}
reloadChartsRecognition('hbpi', drawPollutionIndicator)
@ -195,7 +203,7 @@
}
const setImage = (type) => {
for(let index = 0; index < 6; index ++){
for (let index = 0; index < 6; index++) {
initImage(type, options.items[index].imgName, index);
}
@ -204,7 +212,7 @@
const initImage = (type, imgName, index) => {
post("/image/convert", {url: DecisionSupportConfig.getUrl(type, imgName)}).then((response: any) => {
if (response.error != 0){
if (response.error != 0) {
return;
}
@ -226,8 +234,8 @@
let ctx = canvas.getContext("2d");
let base64 = '';
img.setAttribute("crossOrigin",'Anonymous');
img.onload = function() {
img.setAttribute("crossOrigin", 'Anonymous');
img.onload = function () {
ctx.drawImage(img, 0, 0);
base64 = canvas.toDataURL("image/png");
pictures.children[i].setAttribute('href', base64);
@ -268,7 +276,7 @@
for (let i = 0; i < 72; i++) {
temp.push(NaN);
}
result[0].data = [temp];
result[0].data = group(temp ,24)
}
let prepareData = []
let startTimeMoment = moment(result[0].time, 'M_D_H').add(8, 'h')
@ -282,6 +290,15 @@
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) => {
options.loadingPollutionIndicatorStatus = true
let result = new CustomeArray(callback);
@ -306,7 +323,7 @@
return {
var: elementCode,
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
}
}
}
}
</script>
<style lang="less" scoped>
.main {
.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;
@ -405,21 +428,25 @@
}
}
}
.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;
@ -430,6 +457,7 @@
width: 100%;
height: auto;
margin: 0 auto;
:deep(.el-image__inner) {
max-width: 99%;
border: 1px solid #707070;
@ -440,6 +468,7 @@
width: 6.44rem;
}
}
.instruction {
margin-left: 0.4rem;
color: #222222;
@ -453,25 +482,30 @@
}
}
}
.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>

Write Preview
Loading…
Cancel
Save