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

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

@ -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>

Write Preview
Loading…
Cancel
Save