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

commit

master
xuhuihui 4 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. 940
      04.系统编码/Frontend/src/components/DecisionSupport.vue

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

@ -1,477 +1,511 @@
<template> <template>
<div class="tabs"></div> <div class="tabs"></div>
<div class="main"> <div class="main">
<div class="menu panel"> <div class="menu panel">
<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-row> <el-col :span="24"><span @click="onIndicatorClick('pollution-indicator')"
</div> :class="{'active': currentIndicator === 'pollution-indicator'}">高楼污染指数</span>
<div class="menu-item" v-if="currentIndicator === 'plan-advice'"> </el-col>
<h2 class="tip">产品选择</h2> </el-row>
<el-row :gutter="12"> </div>
<el-col :span="24"><span @click="onProductClick('control-experiment')" :class="{'active': currentProduct === 'control-experiment'}">控制实验</span></el-col> <div class="menu-item" v-if="currentIndicator === 'plan-advice'">
<el-col :span="24"><span @click="onProductClick('product-influence')" :class="{'active': currentProduct === 'product-influence'}">通风廊道的影响</span></el-col> <h2 class="tip">产品选择</h2>
<el-col :span="24"><span @click="onProductClick('product-experiment')" :class="{'active': currentProduct === 'product-experiment'}">通风廊道试验</span></el-col> <el-row :gutter="12">
</el-row> <el-col :span="24"><span @click="onProductClick('control-experiment')"
</div> :class="{'active': currentProduct === 'control-experiment'}">控制实验</span></el-col>
</div> <el-col :span="24"><span @click="onProductClick('product-influence')"
<div class="container panel decision-container"> :class="{'active': currentProduct === 'product-influence'}">通风廊道的影响</span></el-col>
<span class="save-btn" @click="onSaveClick" v-if="currentIndicator != 'pollution-indicator'"><img src="/images/save.png" /></span> <el-col :span="24"><span @click="onProductClick('product-experiment')"
<div class="download-pictures" id="pictures"> :class="{'active': currentProduct === 'product-experiment'}">通风廊道试验</span></el-col>
<a v-for="(url, index) in urls" :key="index" download></a> </el-row>
</div> </div>
</div>
<div class="picture-view advice-picture-view" v-if="currentIndicator === 'plan-advice'"> <div class="container panel decision-container">
<el-row :gutter="0"> <span class="save-btn" @click="onSaveClick" v-if="currentIndicator != 'pollution-indicator'"><img
<el-col :span="8" v-for="(item, index) in items" :key="index"> src="/images/save.png"/></span>
<h2 class="title">{{item.title}}</h2> <div class="download-pictures" id="pictures">
<el-image <a v-for="(url, index) in urls" :key="index" download></a>
:src="item.imgUrl" </div>
:preview-src-list="item.preview"
:initial-index="0" <div class="picture-view advice-picture-view" v-if="currentIndicator === 'plan-advice'">
fit="contain" <el-row :gutter="0">
> <el-col :span="8" v-for="(item, index) in items" :key="index">
<template #error> <h2 class="title">{{ item.title }}</h2>
<div class="image-slot"> <el-image
<img src="/images/null-picture.png" /> :src="item.imgUrl"
</div> :preview-src-list="item.preview"
<p class="image-tip">暂无图片</p> :initial-index="0"
</template> fit="contain"
<template #placeholder> >
<div class="image-placeholder">正在加载...</div> <template #error>
</template> <div class="image-slot">
</el-image> <img src="/images/null-picture.png"/>
</el-col> </div>
</el-row> <p class="image-tip">暂无图片</p>
</div> </template>
<template #placeholder>
<div class="image-placeholder">正在加载...</div>
<div class="toolbar day-toolbar" v-show="currentIndicator === 'pollution-indicator'"> </template>
<div class="times"> </el-image>
<div class="time-item" v-for="(time, index) in times" :key="index" </el-col>
:class="{'active': currentTime === time.date, 'first-hour': time.day === '01'}"> </el-row>
<span class="hour" style="padding-left: 10px">{{ time.month }}</span> </div>
<span class="time" @click="onChangeDayClick(time, index)">{{ time.day }}</span>
</div>
</div> <div class="toolbar day-toolbar" v-show="currentIndicator === 'pollution-indicator'">
<div class="times">
<el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false" <div class="time-item" v-for="(time, index) in times" :key="index"
class="date-picker" @change="onChange"> :class="{'active': currentTime === time.date, 'first-hour': time.day === '01'}">
</el-date-picker> <span class="hour" style="padding-left: 10px">{{ time.month }}</span>
<div class="control-btn"> <span class="time" @click="onChangeDayClick(time, index)">{{ time.day }}</span>
<span @click="onPrevDayTimeClick"><img src="/images/prev.png"/></span>
<span @click="onNextDayTimeClick"><img src="/images/next.png"/></span>
</div>
</div> </div>
</div>
<div class="picture-container raman-picture-container" v-show="currentIndicator === 'pollution-indicator'"> <el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false"
<div class="picture"> class="date-picker" @change="onChange">
<div id="pollutionIndicator" </el-date-picker>
style="margin-top: 66px" <div class="control-btn">
v-loading="loadingPollutionIndicatorStatus" <span @click="onPrevDayTimeClick"><img src="/images/prev.png"/></span>
custom-class="loading" <span @click="onNextDayTimeClick"><img src="/images/next.png"/></span>
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>
</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>
</div>
</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 {
name: 'DecisionSupport', export default {
setup() { name: 'DecisionSupport',
setup() {
let options = reactive({
times: [], let options = reactive({
currentTime: null, times: [],
date: moment().format('YYYY-MM-DD 00:00:00'), currentTime: null,
index: 0, date: moment().format('YYYY-MM-DD 00:00:00'),
currentIndicator: 'plan-advice', index: 0,
currentProduct: 'control-experiment', currentIndicator: 'plan-advice',
items: [{ currentProduct: 'control-experiment',
title: '比湿', items: [{
imgName: 'TFLD_Q2', title: '比湿',
imgUrl: '/images/default-picture.png', imgName: 'TFLD_Q2',
preview: [] imgUrl: '/images/default-picture.png',
}, { preview: []
title: '风速和风向', }, {
imgName: 'TFLD_V10', title: '风速和风向',
imgUrl: '/images/default-picture.png', imgName: 'TFLD_V10',
preview: [] imgUrl: '/images/default-picture.png',
}, { preview: []
title: '降水', }, {
imgName: 'TFLD_RAIN', title: '降水',
imgUrl: '/images/default-picture.png', imgName: 'TFLD_RAIN',
preview: [] imgUrl: '/images/default-picture.png',
}, { preview: []
title: '平均气温', }, {
imgName: 'TFLD_T2', title: '平均气温',
imgUrl: '/images/default-picture.png', imgName: 'TFLD_T2',
preview: [] imgUrl: '/images/default-picture.png',
}, { preview: []
title: '最低温度', }, {
imgName: 'TFLD_TN', title: '最低温度',
imgUrl: '/images/default-picture.png', imgName: 'TFLD_TN',
preview: [] imgUrl: '/images/default-picture.png',
}, { preview: []
title: '最高温度', }, {
imgName: 'TFLD_TX', title: '最高温度',
imgUrl: '/images/default-picture.png', imgName: 'TFLD_TX',
preview: [] 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'], indicatorImg: '/product/picture/images/decision-support/pollution-indicator/pollution-indicator.png',
urls: [], indicatorPreview: ['/product/picture/images/decision-support/pollution-indicator/pollution-indicator.png'],
loadingPollutionIndicatorStatus: false urls: [],
}) loadingPollutionIndicatorStatus: false
})
let creates: {
pollutionIndicator: HighChartCreate let creates: {
} = { pollutionIndicator: HighChartCreate
pollutionIndicator: null } = {
} pollutionIndicator: null
onMounted(() => { }
initTimeLineDay() onMounted(() => {
setImage(options.currentIndicator + '/' + options.currentProduct); initTimeLineDay()
}) setImage(options.currentIndicator + '/' + options.currentProduct);
})
const onIndicatorClick = (indicator) => {
options.currentIndicator = indicator; 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() 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)
})
}
const initTimeLineDay = () => { const onProductClick = (product) => {
options.times = []; options.currentProduct = product;
options.currentTime = moment(options.date).format('YYYY-MM-DD'); setImage('plan-advice' + '/' + options.currentProduct);
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) => { const setImage = (type) => {
options.currentTime = time.date for (let index = 0; index < 6; index++) {
options.date = moment(time.date).format('YYYY-MM-DD'); initImage(type, options.items[index].imgName, index);
reloadChartsRecognition('hbpi', drawPollutionIndicator) }
options.index = index;
}
const onPrevDayTimeClick = () => { options.urls = options.items;
options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD'); }
initTimeLineDay()
reloadChartsRecognition('hbpi', drawPollutionIndicator)
}
const onNextDayTimeClick = () => { const initImage = (type, imgName, index) => {
options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD'); post("/image/convert", {url: DecisionSupportConfig.getUrl(type, imgName)}).then((response: any) => {
initTimeLineDay() if (response.error != 0) {
reloadChartsRecognition('hbpi', drawPollutionIndicator) return;
} }
const onChange = () => { options.items[index].imgUrl = response.data;
initTimeLineDay(); options.items[index].preview = [response.data];
reloadChartsRecognition('hbpi', drawPollutionIndicator) })
} }
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 { const group = (array, subGroupLength) => {
...toRefs(options), let index = 0;
onIndicatorClick, let newArray = [];
onProductClick, while(index < array.length) {
onSaveClick, newArray.push(array.slice(index, index += subGroupLength));
onChangeDayClick, }
onPrevDayTimeClick, return newArray;
onNextDayTimeClick, }
onChange
} 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> </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 {
top: 0.2rem; .save-btn {
right: 0.2rem; top: 0.2rem;
} right: 0.2rem;
.advice-picture-view { }
width: 100%;
height: 100%; .advice-picture-view {
display: flex; width: 100%;
:deep(.el-row) { height: 100%;
width: 100%; display: flex;
.title {
padding: 0; :deep(.el-row) {
font-size: 0.22rem; width: 100%;
}
.el-col { .title {
height: 46%; padding: 0;
margin-top: 1%; font-size: 0.22rem;
text-align: center; }
.el-image {
height: calc(~"100% - 0.4rem"); .el-col {
margin-top: 0.1rem; height: 46%;
display: flex; margin-top: 1%;
flex-direction: column; text-align: center;
align-items: center;
justify-content: center; .el-image {
} height: calc(~"100% - 0.4rem");
} margin-top: 0.1rem;
} display: flex;
} flex-direction: column;
.indicator-picture-view { align-items: center;
height: 100%; justify-content: center;
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;
}
.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> </style>

Write Preview
Loading…
Cancel
Save