|
@@ -1,408 +1,419 @@
|
|
|
<template>
|
|
|
- <div class="an-content">
|
|
|
- <div class="snapshotss-center2">
|
|
|
- <div class="snapshotss-cont2-box1 MicrYaHei">
|
|
|
- <span>数据传输情况</span>
|
|
|
- <span :class="data.isExecuted==1?'span1':'span2'">
|
|
|
- 能耗
|
|
|
- <img v-if="data.energyErrorFlag==1" src="../../assets/finish.png" alt />
|
|
|
- <img v-else src="../../assets/wrong.png" alt />
|
|
|
- </span>
|
|
|
- <span :class="data.isExecuted==1?'span1':'span2'">
|
|
|
- 环境
|
|
|
- <img v-if="data.environmentErrorFlag==1" src="../../assets/finish.png" alt />
|
|
|
- <img v-else src="../../assets/wrong.png" alt />
|
|
|
- </span>
|
|
|
- <span :class="data.isExecuted==1?'span1':'span2'">
|
|
|
- BA
|
|
|
- <img v-if="data.baErrorFalg==1" src="../../assets/finish.png" alt />
|
|
|
- <img v-else src="../../assets/wrong.png" alt />
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="snapshotss-cont2-box2 MicrYaHei">
|
|
|
- <span>实际冷量</span>
|
|
|
- <span>{{data.nowPlantLoad || 0}} KW</span>
|
|
|
- <span>未来1小时预测冷量</span>
|
|
|
- <span>{{data.predictedLoad1h || 0}} KW</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="an-bottom">
|
|
|
- <div class="leftL">
|
|
|
- <div class="leftLengend">
|
|
|
- <i class="outIcon"></i> 室外温度
|
|
|
- <i class="innerIcon"></i> 室内平均温度
|
|
|
- <i class="innerMax"></i> 室内最高温度
|
|
|
+ <div class='an-content'>
|
|
|
+ <div class='snapshotss-center2'>
|
|
|
+ <div class='snapshotss-cont2-box1 MicrYaHei'>
|
|
|
+ <span>数据传输情况</span>
|
|
|
+ <span :class='data.isExecuted==true?"span1":"span2"'>
|
|
|
+ 能耗
|
|
|
+ <img v-if='data.energyErrorFlag==1' src='../../assets/finish.png' alt />
|
|
|
+ <img v-else src='../../assets/wrong.png' alt />
|
|
|
+ </span>
|
|
|
+ <span :class='data.isExecuted==true?"span1":"span2"'>
|
|
|
+ 环境
|
|
|
+ <img v-if='data.environmentErrorFlag==1' src='../../assets/finish.png' alt />
|
|
|
+ <img v-else src='../../assets/wrong.png' alt />
|
|
|
+ </span>
|
|
|
+ <span :class='data.isExecuted==true?"span1":"span2"'>
|
|
|
+ BA
|
|
|
+ <img v-if='data.baErrorFalg==1' src='../../assets/finish.png' alt />
|
|
|
+ <img v-else src='../../assets/wrong.png' alt />
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class='snapshotss-cont2-box2 MicrYaHei'>
|
|
|
+ <span>实际冷量</span>
|
|
|
+ <span>{{data.nowPlantLoad || 0}} KW</span>
|
|
|
+ <span>未来1小时预测冷量</span>
|
|
|
+ <span>{{data.predictedLoad1h || 0}} KW</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div id="leftLine" style="width:100%;height:350px;margin-right:;24px;"></div>
|
|
|
- </div>
|
|
|
- <div class="rightL">
|
|
|
- <div class="rightLengend">
|
|
|
- <i class="reactCool"></i> 实际供冷量
|
|
|
- <i class="preCool"></i> 预测冷量
|
|
|
+ <div class='an-bottom'>
|
|
|
+ <div class='leftL'>
|
|
|
+ <div class='leftLengend'>
|
|
|
+ <i class='outIcon'></i> 室外温度
|
|
|
+ <i class='innerIcon'></i> 室内平均温度
|
|
|
+ <i class='innerMax'></i> 室内最高温度
|
|
|
+ </div>
|
|
|
+ <div id='leftLine' style='width:100%;height:350px;margin-right:;24px;'></div>
|
|
|
+ </div>
|
|
|
+ <div class='rightL'>
|
|
|
+ <div class='rightLengend'>
|
|
|
+ <i class='reactCool'></i> 实际供冷量
|
|
|
+ <i class='preCool'></i> 预测冷量
|
|
|
+ </div>
|
|
|
+ <div id='rightLine' style='width:100%;height:350px;'></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div id="rightLine" style="width:100%;height:350px;"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="side-r" v-if="data.isExecuted">
|
|
|
- <div v-if="!showDraw" class="float-r" @click="showDraw = true">
|
|
|
- <img src="../../assets/open.png" alt />
|
|
|
- <p>当前策略</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class='side-r' :class='data.isExecuted==true?"green":"red"'>
|
|
|
+ <div v-if='!showDraw' class='float-r' @click='showDraw = true'>
|
|
|
+ <div class='float-line' :class='data.isExecuted==true?"green":"red"'></div>
|
|
|
+ <img src='../../assets/open.png' alt />
|
|
|
+ <p>当前策略</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <bom-box
|
|
|
- v-if="Object.keys(chillerCommandQ).length>0"
|
|
|
- :class="['draw', {'open': showDraw}]"
|
|
|
- :data="chillerCommandQ"
|
|
|
- @close="showDraw = false"
|
|
|
- ></bom-box>
|
|
|
- </div>
|
|
|
+ <bom-box v-if='Object.keys(chillerCommandQ).length>0' :class='["draw", {"open": showDraw}]' :data='chillerCommandQ' @close='showDraw = false'></bom-box>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import echarts from "echarts";
|
|
|
-import bomBox from "./bomBox";
|
|
|
+import echarts from 'echarts'
|
|
|
+import bomBox from './bomBox'
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- showDraw: false,
|
|
|
- dataX: [],
|
|
|
- dataY1: [],
|
|
|
- dataY2: [],
|
|
|
- dataY3: [],
|
|
|
- loadX: [],
|
|
|
- loadY1: [],
|
|
|
- loadY2: [],
|
|
|
- loadY3: []
|
|
|
- };
|
|
|
- },
|
|
|
- components: { bomBox },
|
|
|
- props: ["data", "chillerHourList", "chillerCommandQ"],
|
|
|
- methods: {
|
|
|
- getData() {
|
|
|
- this.chillerHourList.forEach(el => {
|
|
|
- el.value = el.time.slice(0, 2) + ":" + el.time.slice(2, 4);
|
|
|
- this.dataX.push(el.value);
|
|
|
- this.loadX.push(el.value);
|
|
|
- this.dataY1.push(el.tout=='-9999'?0:el.tout);
|
|
|
- this.dataY2.push(el.meanTindoor);
|
|
|
- this.dataY3.push(el.maxTindoor);
|
|
|
- this.loadY1.push(
|
|
|
- el.nowPlantLoad == '-9999'?0:wl.nowPlantLoad
|
|
|
- );
|
|
|
- this.loadY2.push(el.predictedLoadUpLimit!='-9999' ? el.predictedLoadUpLimit : 0);
|
|
|
- this.loadY3.push(
|
|
|
- el.redictedLoadDownLimit!='-9999' ? el.redictedLoadDownLimit : 0
|
|
|
- );
|
|
|
- });
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showDraw: false,
|
|
|
+ dataX: [],
|
|
|
+ dataY1: [],
|
|
|
+ dataY2: [],
|
|
|
+ dataY3: [],
|
|
|
+ loadX: [],
|
|
|
+ loadY1: [],
|
|
|
+ loadY2: [],
|
|
|
+ loadY3: []
|
|
|
+ }
|
|
|
},
|
|
|
- drawLeft() {
|
|
|
- var leftLine = echarts.init(document.getElementById("leftLine"));
|
|
|
- let option = {
|
|
|
- tooltip: {
|
|
|
- trigger: "axis"
|
|
|
- },
|
|
|
- title: {
|
|
|
- text: "室内外温度",
|
|
|
- fontSize: "16px",
|
|
|
- color: "#1F2429"
|
|
|
+ components: { bomBox },
|
|
|
+ props: ['data', 'chillerHourList', 'chillerCommandQ'],
|
|
|
+ methods: {
|
|
|
+ getData() {
|
|
|
+ this.chillerHourList.forEach(el => {
|
|
|
+ el.value = el.time.slice(0, 2) + ':' + el.time.slice(2, 4)
|
|
|
+ this.dataX.push(el.value)
|
|
|
+ this.loadX.push(el.value)
|
|
|
+ this.dataY1.push(el.tout == '-9999' ? 0 : el.tout)
|
|
|
+ this.dataY2.push(el.meanTindoor)
|
|
|
+ this.dataY3.push(el.maxTindoor)
|
|
|
+ this.loadY1.push(el.nowPlantLoad == '-9999' ? 0 : el.nowPlantLoad)
|
|
|
+ this.loadY2.push(el.predictedLoadUpLimit != '-9999' ? el.predictedLoadUpLimit : 0)
|
|
|
+ this.loadY3.push(el.redictedLoadDownLimit != '-9999' ? el.redictedLoadDownLimit : 0)
|
|
|
+ })
|
|
|
},
|
|
|
+ drawLeft() {
|
|
|
+ var leftLine = echarts.init(document.getElementById('leftLine'))
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: '室内外温度',
|
|
|
+ fontSize: '16px',
|
|
|
+ color: '#1F2429'
|
|
|
+ },
|
|
|
|
|
|
- grid: {
|
|
|
- left: "3%",
|
|
|
- right: "4%",
|
|
|
- bottom: "3%",
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
|
|
|
- xAxis: {
|
|
|
- type: "category",
|
|
|
- boundaryGap: false,
|
|
|
- data: this.dataX
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: "value",
|
|
|
- axisLabel: { formatter: "{value} ℃" }
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: "室外温度",
|
|
|
- type: "line",
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: this.dataX
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ axisLabel: { formatter: '{value} ℃' }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '室外温度',
|
|
|
+ type: 'line',
|
|
|
|
|
|
- data: this.dataY1,
|
|
|
- color: "#0091FF"
|
|
|
- },
|
|
|
- {
|
|
|
- name: "室内平均温度",
|
|
|
- type: "line",
|
|
|
+ data: this.dataY1,
|
|
|
+ color: '#0091FF'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '室内平均温度',
|
|
|
+ type: 'line',
|
|
|
|
|
|
- data: this.dataY2,
|
|
|
- color: "#00D6B9"
|
|
|
- },
|
|
|
- {
|
|
|
- name: "室内最高温度",
|
|
|
- type: "line",
|
|
|
+ data: this.dataY2,
|
|
|
+ color: '#00D6B9'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '室内最高温度',
|
|
|
+ type: 'line',
|
|
|
|
|
|
- data: this.dataY3,
|
|
|
- color: "#FFBA6B"
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- leftLine.setOption(option);
|
|
|
- },
|
|
|
- drawRight() {
|
|
|
- var rightLine = echarts.init(document.getElementById("rightLine"));
|
|
|
- rightLine.setOption({
|
|
|
- tooltip: {
|
|
|
- trigger: "axis",
|
|
|
- axisPointer: {
|
|
|
- type: "cross",
|
|
|
- animation: false,
|
|
|
- label: {
|
|
|
- backgroundColor: "#ccc",
|
|
|
- borderColor: "#aaa",
|
|
|
- borderWidth: 1,
|
|
|
- shadowBlur: 0,
|
|
|
- shadowOffsetX: 0,
|
|
|
- shadowOffsetY: 0,
|
|
|
- color: "#222"
|
|
|
+ data: this.dataY3,
|
|
|
+ color: '#FFBA6B'
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
- }
|
|
|
- // formatter: function (params) {
|
|
|
- // // return params[2].name + '<br />' + params[2].value;
|
|
|
- // }
|
|
|
+ leftLine.setOption(option)
|
|
|
},
|
|
|
- grid: {
|
|
|
- left: "3%",
|
|
|
- right: "4%",
|
|
|
- bottom: "3%",
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- title: {
|
|
|
- text: "预测冷量",
|
|
|
- fontSize: "16px",
|
|
|
- color: "#1F2429"
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: "category",
|
|
|
- data: this.loadX
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- splitNumber: 3,
|
|
|
- splitLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLabel: { formatter: "{value} KW" }
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: "L",
|
|
|
- type: "line",
|
|
|
- data: this.loadY2,
|
|
|
- lineStyle: {
|
|
|
- opacity: 0
|
|
|
- },
|
|
|
- stack: "confidence-band",
|
|
|
- symbol: "none"
|
|
|
- },
|
|
|
- {
|
|
|
- name: "U",
|
|
|
- type: "line",
|
|
|
- data: this.loadY3,
|
|
|
- lineStyle: {
|
|
|
- opacity: 0
|
|
|
- },
|
|
|
- areaStyle: {
|
|
|
- color: "#ccc"
|
|
|
- },
|
|
|
- stack: "confidence-band",
|
|
|
- symbol: "none"
|
|
|
- },
|
|
|
- {
|
|
|
- type: "line",
|
|
|
- data: this.loadY1,
|
|
|
- hoverAnimation: false,
|
|
|
- symbolSize: 6,
|
|
|
- itemStyle: {
|
|
|
- color: "#0091FF"
|
|
|
- },
|
|
|
- showSymbol: false
|
|
|
- }
|
|
|
- ]
|
|
|
- });
|
|
|
+ drawRight() {
|
|
|
+ var rightLine = echarts.init(document.getElementById('rightLine'))
|
|
|
+ rightLine.setOption({
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ animation: false,
|
|
|
+ label: {
|
|
|
+ backgroundColor: '#ccc',
|
|
|
+ borderColor: '#aaa',
|
|
|
+ borderWidth: 1,
|
|
|
+ shadowBlur: 0,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowOffsetY: 0,
|
|
|
+ color: '#222'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // formatter: function (params) {
|
|
|
+ // // return params[2].name + '<br />' + params[2].value;
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: '预测冷量',
|
|
|
+ fontSize: '16px',
|
|
|
+ color: '#1F2429'
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: this.loadX
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ splitNumber: 3,
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: { formatter: '{value} KW' }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'L',
|
|
|
+ type: 'line',
|
|
|
+ data: this.loadY2,
|
|
|
+ lineStyle: {
|
|
|
+ opacity: 0
|
|
|
+ },
|
|
|
+ stack: 'confidence-band',
|
|
|
+ symbol: 'none'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'U',
|
|
|
+ type: 'line',
|
|
|
+ data: this.loadY3,
|
|
|
+ lineStyle: {
|
|
|
+ opacity: 0
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: '#ccc'
|
|
|
+ },
|
|
|
+ stack: 'confidence-band',
|
|
|
+ symbol: 'none'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'line',
|
|
|
+ data: this.loadY1,
|
|
|
+ hoverAnimation: false,
|
|
|
+ symbolSize: 6,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#0091FF'
|
|
|
+ },
|
|
|
+ showSymbol: false
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.drawLeft()
|
|
|
+ this.drawRight()
|
|
|
}
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.getData();
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.drawLeft();
|
|
|
- this.drawRight();
|
|
|
- }
|
|
|
-};
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang='scss' scoped>
|
|
|
.an-content {
|
|
|
- .snapshotss-center2 {
|
|
|
- padding: 20px 0;
|
|
|
- margin-bottom: 20px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- overflow: hidden;
|
|
|
- .snapshotss-cont2-box1,
|
|
|
- .snapshotss-cont2-box2 {
|
|
|
- flex: 1;
|
|
|
- height: 80px;
|
|
|
- background: url("../../assets/copy.png");
|
|
|
- background-size: 100% 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding-left: 24px;
|
|
|
- }
|
|
|
- .snapshotss-cont2-box1 {
|
|
|
- margin-right: 12px;
|
|
|
- span:nth-of-type(1) {
|
|
|
- height: 22px;
|
|
|
- font-size: 14px;
|
|
|
- color: rgba(100, 108, 115, 1);
|
|
|
- line-height: 19px;
|
|
|
- margin-right: 20px;
|
|
|
- }
|
|
|
- span:not(:first-child) {
|
|
|
- height: 28px;
|
|
|
- background: rgba(255, 255, 255, 1);
|
|
|
- border-radius: 16px;
|
|
|
- font-size: 14px;
|
|
|
- color: rgba(31, 36, 41, 1);
|
|
|
+ .snapshotss-center2 {
|
|
|
+ padding: 20px 0;
|
|
|
+ margin-bottom: 20px;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- padding: 0 6px 0 12px;
|
|
|
- margin-right: 20px;
|
|
|
- img {
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- margin-left: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ .snapshotss-cont2-box1,
|
|
|
+ .snapshotss-cont2-box2 {
|
|
|
+ flex: 1;
|
|
|
+ height: 80px;
|
|
|
+ background: url('../../assets/copy.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-left: 24px;
|
|
|
+ }
|
|
|
+ .snapshotss-cont2-box1 {
|
|
|
+ margin-right: 12px;
|
|
|
+ span:nth-of-type(1) {
|
|
|
+ height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(100, 108, 115, 1);
|
|
|
+ line-height: 19px;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ span:not(:first-child) {
|
|
|
+ height: 28px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ border-radius: 16px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 6px 0 12px;
|
|
|
+ margin-right: 20px;
|
|
|
+ img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .span1 {
|
|
|
+ border: 1px solid rgba(52, 199, 36, 1);
|
|
|
+ }
|
|
|
+ .span2 {
|
|
|
+ border: 1px solid rgba(245, 78, 69, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .snapshotss-cont2-box2 {
|
|
|
+ span:nth-of-type(1),
|
|
|
+ span:nth-of-type(3) {
|
|
|
+ height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(100, 108, 115, 1);
|
|
|
+ line-height: 19px;
|
|
|
+ margin-right: 16px;
|
|
|
+ }
|
|
|
+ span:nth-of-type(2),
|
|
|
+ span:nth-of-type(4) {
|
|
|
+ height: 32px;
|
|
|
+ font-size: 24px;
|
|
|
+ font-family: Persagy;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ line-height: 29px;
|
|
|
+ margin-right: 64px;
|
|
|
+ }
|
|
|
+ span:nth-of-type(3) {
|
|
|
+ margin-right: 16px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .span1 {
|
|
|
- border: 1px solid rgba(52, 199, 36, 1);
|
|
|
- }
|
|
|
- .span2 {
|
|
|
- border: 1px solid rgba(245, 78, 69, 1);
|
|
|
- }
|
|
|
}
|
|
|
- .snapshotss-cont2-box2 {
|
|
|
- span:nth-of-type(1),
|
|
|
- span:nth-of-type(3) {
|
|
|
- height: 22px;
|
|
|
- font-size: 14px;
|
|
|
- color: rgba(100, 108, 115, 1);
|
|
|
- line-height: 19px;
|
|
|
- margin-right: 16px;
|
|
|
- }
|
|
|
- span:nth-of-type(2),
|
|
|
- span:nth-of-type(4) {
|
|
|
- height: 32px;
|
|
|
- font-size: 24px;
|
|
|
- font-family: Persagy;
|
|
|
- color: rgba(31, 36, 41, 1);
|
|
|
- line-height: 29px;
|
|
|
- margin-right: 64px;
|
|
|
- }
|
|
|
- span:nth-of-type(3) {
|
|
|
- margin-right: 16px;
|
|
|
- }
|
|
|
+ .side-r {
|
|
|
+ position: fixed;
|
|
|
+ right: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
|
|
|
+ display: flex;
|
|
|
+ width: 8px;
|
|
|
+ border-radius: 8px 0 0 8px;
|
|
|
+ cursor: pointer;
|
|
|
+ height: 357px;
|
|
|
+ .float-r {
|
|
|
+ width: 8px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 8px 0 0 8px;
|
|
|
+ cursor: pointer;
|
|
|
+ .float-line {
|
|
|
+ width: 8px;
|
|
|
+ height: 357px;
|
|
|
+ border-radius: 8px 0 0 8px;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ height: 10px;
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ width: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .side-r {
|
|
|
- position: fixed;
|
|
|
- right: 0;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
|
|
|
- background: #ffffff;
|
|
|
- display: flex;
|
|
|
- .float-r {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 60px 40px 60px 10px;
|
|
|
- cursor: pointer;
|
|
|
- img {
|
|
|
- height: 10px;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
- p {
|
|
|
- width: 0;
|
|
|
- }
|
|
|
- &:hover {
|
|
|
- background: #efefef;
|
|
|
- }
|
|
|
+ .red {
|
|
|
+ background: #f54e45ff;
|
|
|
}
|
|
|
- }
|
|
|
- .draw {
|
|
|
- position: fixed;
|
|
|
- left: 100%;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
|
|
|
- background: #ffffff;
|
|
|
- transition: transform 0.3s ease-in-out;
|
|
|
- &.open {
|
|
|
- transform: translate(-100%, -50%);
|
|
|
+ .green {
|
|
|
+ background: #34c724ff;
|
|
|
}
|
|
|
- }
|
|
|
- .an-bottom {
|
|
|
- margin-top: 45px;
|
|
|
- display: flex;
|
|
|
- .leftL {
|
|
|
- flex: 1;
|
|
|
- .leftLengend {
|
|
|
- text-align: center;
|
|
|
- margin-bottom: 10px;
|
|
|
- i {
|
|
|
- display: inline-block;
|
|
|
- width: 16px;
|
|
|
- height: 6px;
|
|
|
- border-radius: 3px;
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
- .innerIcon {
|
|
|
- background: rgba(0, 214, 185, 1);
|
|
|
- margin: 0 20px;
|
|
|
- }
|
|
|
- .outIcon {
|
|
|
- background: rgba(0, 145, 255, 1);
|
|
|
- }
|
|
|
- .innerMax {
|
|
|
- background: rgba(255, 186, 107, 1);
|
|
|
- }
|
|
|
- }
|
|
|
+ .side-r:hover {
|
|
|
+ width: 68px;
|
|
|
+ background: #fff;
|
|
|
}
|
|
|
- .rightL {
|
|
|
- flex: 1;
|
|
|
- .rightLengend {
|
|
|
- text-align: center;
|
|
|
- margin-bottom: 10px;
|
|
|
- i {
|
|
|
- display: inline-block;
|
|
|
- width: 16px;
|
|
|
- height: 6px;
|
|
|
- border-radius: 3px;
|
|
|
- vertical-align: middle;
|
|
|
+ .side-r:hover .float-r {
|
|
|
+ width: 68px;
|
|
|
+ }
|
|
|
+ .draw {
|
|
|
+ position: fixed;
|
|
|
+ left: 100%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
|
|
|
+ background: #ffffff;
|
|
|
+ transition: transform 0.3s ease-in-out;
|
|
|
+ &.open {
|
|
|
+ transform: translate(-100%, -50%);
|
|
|
}
|
|
|
- .reactCool {
|
|
|
- background: rgba(0, 214, 185, 1);
|
|
|
+ }
|
|
|
+ .an-bottom {
|
|
|
+ margin-top: 45px;
|
|
|
+ display: flex;
|
|
|
+ .leftL {
|
|
|
+ flex: 1;
|
|
|
+ .leftLengend {
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ i {
|
|
|
+ display: inline-block;
|
|
|
+ width: 16px;
|
|
|
+ height: 6px;
|
|
|
+ border-radius: 3px;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ .innerIcon {
|
|
|
+ background: rgba(0, 214, 185, 1);
|
|
|
+ margin: 0 20px;
|
|
|
+ }
|
|
|
+ .outIcon {
|
|
|
+ background: rgba(0, 145, 255, 1);
|
|
|
+ }
|
|
|
+ .innerMax {
|
|
|
+ background: rgba(255, 186, 107, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- .preCool {
|
|
|
- background: rgba(0, 145, 255, 1);
|
|
|
- opacity: 0.29;
|
|
|
- margin-left: 20px;
|
|
|
+ .rightL {
|
|
|
+ flex: 1;
|
|
|
+ .rightLengend {
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ i {
|
|
|
+ display: inline-block;
|
|
|
+ width: 16px;
|
|
|
+ height: 6px;
|
|
|
+ border-radius: 3px;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ .reactCool {
|
|
|
+ background: rgba(0, 214, 185, 1);
|
|
|
+ }
|
|
|
+ .preCool {
|
|
|
+ background: rgba(0, 145, 255, 1);
|
|
|
+ opacity: 0.29;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
</style>
|