You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
827 lines
21 KiB
827 lines
21 KiB
<template>
|
|
<div class="home">
|
|
<div class="header">
|
|
<h2>电能替代分布式控制试验平台</h2>
|
|
<router-link :to="{path:'/control/manual'}" tag="div" class="back"><el-icon><HomeFilled /></el-icon></router-link>
|
|
</div>
|
|
<div class="main">
|
|
<div class="left">
|
|
<div class="left_top bgimg">
|
|
<div class="title">电磁锅炉</div>
|
|
<div class="info_box">
|
|
<div class="dev_img">
|
|
<img src="../../assets/images/dcgl.png" alt="">
|
|
</div>
|
|
<div class="dev_data">
|
|
<p>当前状态：<span :class="{'green':dcglRunStatus === '开启','red':xrglRunStatus === '关闭'}">{{ dcglRunStatus }}</span></p>
|
|
<p>进水温度：<span class="enter_t"><span>{{ dcglThermometerValueIn }}</span>℃</span></p>
|
|
<p>出水温度：<span class="leave_t"><span>{{ dcglThermometerValueOut }}</span>℃</span></p>
|
|
<p>今日能耗：<span class="today_tce"><span>{{ dcglTodayUseEnergy }}</span>kWh</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="chart_box">
|
|
<div class="dev_chart" id="dcglChart"></div>
|
|
</div>
|
|
</div>
|
|
<div class="left_bottom bgimg">
|
|
<div class="title">蓄热锅炉</div>
|
|
<div class="info_box">
|
|
<div class="dev_img">
|
|
<img src="../../assets/images/蓄热锅炉.png" alt="">
|
|
</div>
|
|
<div class="dev_data">
|
|
<p>当前状态：<span :class="{'green':xrglRunStatus === '开启','red':xrglRunStatus === '关闭'}">{{ xrglRunStatus }}</span></p>
|
|
<p>进水温度：<span class="enter_t"><span>{{ xrglThermometerValueIn }}</span>℃</span></p>
|
|
<p>出水温度：<span class="leave_t"><span>{{ xrglThermometerValueOut }}</span>℃</span></p>
|
|
<p>今日能耗：<span class="today_tce"><span>{{ xrglTodayUseEnergy }}</span>kWh</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="chart_box">
|
|
<div class="dev_chart" id="xrglChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="middle">
|
|
<div class="middle_top">
|
|
<div class="now_power">
|
|
<div class="data">35kW</div>
|
|
<div class="bg_img"></div>
|
|
<div class="txt">当前功率</div>
|
|
</div>
|
|
<div class="my3D_img">
|
|
<img src="../../assets/images/3Dimg.png" alt="">
|
|
</div>
|
|
<div class="now_ele">
|
|
<div class="data">16446kWh</div>
|
|
<div class="bg_img"></div>
|
|
<div class="txt">总用电量</div>
|
|
</div>
|
|
</div>
|
|
<div class="middle_bottom">
|
|
<div class="chart_box2 bgimg">
|
|
<div class="title">当前功率</div>
|
|
<div class="nowPower_chart"></div>
|
|
</div>
|
|
<div class="wendu_box">
|
|
<div class="item" v-for="item in wdcgqArr" :key="item.deviceId">
|
|
<div class="dev_name">{{ item.deviceName }}</div>
|
|
<div class="line"></div>
|
|
<div class="data">{{ item.thermometerValue }}℃</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="right_top bgimg">
|
|
<div class="title">空气源热泵</div>
|
|
<div class="info_box">
|
|
<div class="dev_img">
|
|
<img src="../../assets/images/空气源热泵.png" alt="">
|
|
</div>
|
|
<div class="dev_data">
|
|
<p>当前状态：<span class="now_tatus">开启</span></p>
|
|
<p>进水温度：<span class="enter_t"><span>25</span>℃</span></p>
|
|
<p>出水温度：<span class="leave_t"><span>85</span>℃</span></p>
|
|
<p>今日能耗：<span class="today_tce"><span>23</span>kWh</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="chart_box">
|
|
<div class="dev_chart" id="kqyrbChart"></div>
|
|
</div>
|
|
</div>
|
|
<div class="right_bottom bgimg">
|
|
<div class="title">发热电缆</div>
|
|
<div class="info_box">
|
|
<div class="dev_img">
|
|
<img src="../../assets/images/发热电缆.png" alt="">
|
|
</div>
|
|
<div class="dev_data">
|
|
<p>当前状态：<span class="now_tatus">开启</span></p>
|
|
<p>当前温度：<span class="now_t"><span>25</span>℃</span></p>
|
|
<p>今日能耗：<span class="today_tce"><span>23</span>kWh</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="chart_box">
|
|
<div class="dev_chart" id="frdlChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup name="Index">
|
|
import * as echarts from 'echarts'
|
|
import {HomeFilled} from '@element-plus/icons-vue'
|
|
import {ref,reactive,onMounted,onBeforeUnmount } from 'vue'
|
|
import {getTemperature,getDevicesInfo} from '../../api/bigview/bigview'
|
|
|
|
/** 页面加载时*/
|
|
onMounted(()=>{
|
|
dcglChartFun();
|
|
kqyrbChartFun();
|
|
frdlChartFun();
|
|
getWenduFun();
|
|
getDevicesInfoFun();
|
|
xrglChartFun();
|
|
})
|
|
|
|
/** 8个温度传感器数据*/
|
|
const wdcgqArr = ref([])
|
|
function getWenduFun(){
|
|
getTemperature().then((res)=>{
|
|
wdcgqArr.value = res.data
|
|
})
|
|
}
|
|
|
|
/**运行设备工作信息*/
|
|
//蓄热锅炉运行数据
|
|
const xrglRunStatus = ref()
|
|
const xrglThermometerValueIn = ref()
|
|
const xrglThermometerValueOut = ref()
|
|
const xrglTodayUseEnergy = ref()
|
|
//渲染蓄热锅炉折线图数据
|
|
const xrglTimeList = ref([]);
|
|
const xrglTempInTodayList = ref([]);
|
|
const xrglTempOutTodayList = ref([]);
|
|
function getDevicesInfoFun(){
|
|
getDevicesInfo().then((res)=>{
|
|
for(let i = 0;i < res.data.length;i++){
|
|
if(res.data[i].deviceId == 2){
|
|
// console.log('蓄热锅炉')
|
|
if(res.data[i].deviceRunStatus == 1){
|
|
xrglRunStatus.value = '开启'
|
|
}else{
|
|
xrglRunStatus.value = '关闭'
|
|
}
|
|
xrglThermometerValueIn.value = res.data[i].thermometerValueIn;
|
|
xrglThermometerValueOut.value = res.data[i].thermometerValueOut;
|
|
xrglTodayUseEnergy.value = res.data[i].todayUseEnergy;
|
|
xrglTimeList.value = res.data[i].timeList;
|
|
xrglTempInTodayList.value = res.data[i].tempInTodayList;
|
|
xrglTempOutTodayList.value = res.data[i].tempOutTodayList;
|
|
xrglChartFun();
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
let dcglChart;
|
|
let xrglChart;
|
|
let kqyrbChart;
|
|
let frdlChart;
|
|
function dcglChartFun(){
|
|
const chartDom = document.getElementById('dcglChart')
|
|
dcglChart = echarts.init(chartDom);
|
|
const option = {
|
|
legend: {
|
|
data: ["进水温度","出水温度"],
|
|
// selectedMode: 'single',
|
|
textStyle: {
|
|
color: "#f3ffff"
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
formatter: "{b0}： {c0}次",
|
|
// borderColor: '#00fcff',
|
|
borderWidth: 1
|
|
},
|
|
grid:{
|
|
show: true,
|
|
top: '20%',
|
|
bottom:'15%',
|
|
left:'10%',
|
|
right:'3%',
|
|
borderWidth: 1,
|
|
borderColor: '#767da1',
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: "#f3ffff"
|
|
}
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#767da1' // 设置x轴的线条颜色
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false // 去掉x轴刻度
|
|
},
|
|
splitArea: {
|
|
show: true,
|
|
interval:0,
|
|
areaStyle: {
|
|
color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
|
|
//（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name:'℃',
|
|
nameTextStyle: {
|
|
color: "#f3ffff",
|
|
nameLocation: "start"
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: "#f3ffff"
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {color: "#767da1", type: "solid"} //dashed
|
|
} //s是否显示为虚线的条纹背景
|
|
},
|
|
series: [
|
|
{
|
|
name: "进水温度",
|
|
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: "none", //去掉圆点
|
|
itemStyle: { //线条颜色
|
|
color: '#128dff',
|
|
}
|
|
},
|
|
{
|
|
name: "出水温度",
|
|
data: [520, 922, 501, 234, 690, 330, 620],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: "none", //去掉圆点
|
|
itemStyle: { //线条颜色
|
|
color: '#F5901A',
|
|
}
|
|
}
|
|
]
|
|
};
|
|
option && dcglChart.setOption(option);
|
|
};
|
|
function xrglChartFun(){
|
|
const chartDom = document.getElementById('xrglChart')
|
|
xrglChart = echarts.init(chartDom);
|
|
const option = {
|
|
legend: {
|
|
data: ["进水温度","出水温度"],
|
|
// selectedMode: 'single',
|
|
textStyle: {
|
|
color: "#f3ffff"
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
formatter: "{b0}： {c0}次",
|
|
// borderColor: '#00fcff',
|
|
borderWidth: 1
|
|
},
|
|
grid:{
|
|
show: true,
|
|
top: '20%',
|
|
bottom:'15%',
|
|
left:'10%',
|
|
right:'3%',
|
|
borderWidth: 1,
|
|
borderColor: '#767da1',
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: xrglTimeList.value,
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: "#f3ffff"
|
|
}
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#767da1' // 设置x轴的线条颜色
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false // 去掉x轴刻度
|
|
},
|
|
splitArea: {
|
|
show: true,
|
|
interval:0,
|
|
areaStyle: {
|
|
color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
|
|
//（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name:'℃',
|
|
nameTextStyle: {
|
|
color: "#f3ffff",
|
|
nameLocation: "start"
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: "#f3ffff"
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {color: "#767da1", type: "solid"} //dashed
|
|
} //s是否显示为虚线的条纹背景
|
|
},
|
|
series: [
|
|
{
|
|
name: "进水温度",
|
|
data: xrglTempInTodayList.value,
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: "none", //去掉圆点
|
|
itemStyle: { //线条颜色
|
|
color: '#128dff',
|
|
}
|
|
},
|
|
{
|
|
name: "出水温度",
|
|
data: xrglTempOutTodayList.value,
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: "none", //去掉圆点
|
|
itemStyle: { //线条颜色
|
|
color: '#F5901A',
|
|
}
|
|
}
|
|
]
|
|
};
|
|
option && xrglChart.setOption(option);
|
|
};
|
|
function kqyrbChartFun(){
|
|
const chartDom = document.getElementById('kqyrbChart')
|
|
kqyrbChart = echarts.init(chartDom);
|
|
const option = {
|
|
legend: {
|
|
data: ["进水温度","出水温度"],
|
|
// selectedMode: 'single',
|
|
textStyle: {
|
|
color: "#f3ffff"
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
formatter: "{b0}： {c0}次",
|
|
// borderColor: '#00fcff',
|
|
borderWidth: 1
|
|
},
|
|
grid:{
|
|
show: true,
|
|
top: '20%',
|
|
bottom:'15%',
|
|
left:'10%',
|
|
right:'3%',
|
|
borderWidth: 1,
|
|
borderColor: '#767da1',
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: "#f3ffff"
|
|
}
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#767da1' // 设置x轴的线条颜色
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false // 去掉x轴刻度
|
|
},
|
|
splitArea: {
|
|
show: true,
|
|
interval:0,
|
|
areaStyle: {
|
|
color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
|
|
//（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name:'℃',
|
|
nameTextStyle: {
|
|
color: "#f3ffff",
|
|
nameLocation: "start"
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: "#f3ffff"
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {color: "#767da1", type: "solid"} //dashed
|
|
} //s是否显示为虚线的条纹背景
|
|
},
|
|
series: [
|
|
{
|
|
name: "进水温度",
|
|
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: "none", //去掉圆点
|
|
itemStyle: { //线条颜色
|
|
color: '#128dff',
|
|
}
|
|
},
|
|
{
|
|
name: "出水温度",
|
|
data: [520, 922, 501, 234, 690, 330, 620],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: "none", //去掉圆点
|
|
itemStyle: { //线条颜色
|
|
color: '#F5901A',
|
|
}
|
|
}
|
|
]
|
|
};
|
|
option && kqyrbChart.setOption(option);
|
|
};
|
|
function frdlChartFun(){
|
|
const chartDom = document.getElementById('frdlChart')
|
|
frdlChart = echarts.init(chartDom);
|
|
const option = {
|
|
legend: {
|
|
data: ["进水温度","出水温度"],
|
|
// selectedMode: 'single',
|
|
textStyle: {
|
|
color: "#f3ffff"
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
formatter: "{b0}： {c0}次",
|
|
// borderColor: '#00fcff',
|
|
borderWidth: 1
|
|
},
|
|
grid:{
|
|
show: true,
|
|
top: '20%',
|
|
bottom:'15%',
|
|
left:'10%',
|
|
right:'3%',
|
|
borderWidth: 1,
|
|
borderColor: '#767da1',
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: "#f3ffff"
|
|
}
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#767da1' // 设置x轴的线条颜色
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false // 去掉x轴刻度
|
|
},
|
|
splitArea: {
|
|
show: true,
|
|
interval:0,
|
|
areaStyle: {
|
|
color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
|
|
//（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name:'℃',
|
|
nameTextStyle: {
|
|
color: "#f3ffff",
|
|
nameLocation: "start"
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: "#f3ffff"
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {color: "#767da1", type: "solid"} //dashed
|
|
} //s是否显示为虚线的条纹背景
|
|
},
|
|
series: [
|
|
{
|
|
name: "进水温度",
|
|
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: "none", //去掉圆点
|
|
itemStyle: { //线条颜色
|
|
color: '#128dff',
|
|
}
|
|
},
|
|
{
|
|
name: "出水温度",
|
|
data: [520, 922, 501, 234, 690, 330, 620],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: "none", //去掉圆点
|
|
itemStyle: { //线条颜色
|
|
color: '#F5901A',
|
|
}
|
|
}
|
|
]
|
|
};
|
|
option && frdlChart.setOption(option);
|
|
};
|
|
|
|
|
|
|
|
|
|
/** 页面销毁时*/
|
|
onBeforeUnmount(() => {
|
|
dcglChart.dispose(); // 销毁实例，防止内存泄漏
|
|
xrglChart.dispose();
|
|
kqyrbChart.dispose();
|
|
frdlChart.dispose();
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.home{
|
|
height: 100%;
|
|
background-image: url("../../assets/images/bg.png");
|
|
background-size: 100% 100%;
|
|
.header{
|
|
position: relative;
|
|
width: 100%;
|
|
height: 70px;
|
|
background-image: url("../../assets/images/headtitle.png");
|
|
background-size: 100% 100%;
|
|
h2{
|
|
font-size: 36px;
|
|
color: #AFEAFF;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
line-height: 70px;
|
|
}
|
|
.back{
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 30px;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
padding: 9px 15px;
|
|
border: 1px solid #dddddd00;
|
|
&:hover{
|
|
border: 1px solid #dddddd70;
|
|
}
|
|
}
|
|
}
|
|
.main{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: nowrap;
|
|
padding: 0 20px 20px 20px;
|
|
width: 100%;
|
|
height: calc(100% - 70px);
|
|
.left{
|
|
width: 24%;
|
|
height: 100%;
|
|
.left_top{
|
|
width: 100%;
|
|
height: 49%;
|
|
margin-bottom: 4%;
|
|
}
|
|
.left_bottom{
|
|
width: 100%;
|
|
height: 49%;
|
|
}
|
|
}
|
|
.middle{
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 50.5%;
|
|
height: 100%;
|
|
.middle_top{
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: nowrap;
|
|
flex: 2;
|
|
width: 100%;
|
|
height: 67%;
|
|
padding-bottom: 20px;
|
|
.now_power{
|
|
position: absolute;
|
|
bottom: 20px;
|
|
left: 20px;
|
|
width: 112px;
|
|
height: 110px;
|
|
.data{
|
|
color: #F5901A;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
.bg_img{
|
|
width: 112px;
|
|
height: 62px;
|
|
background-image: url("../../assets/images/footer.png");
|
|
background-size: 100% 100%;
|
|
margin-top: -10px;
|
|
}
|
|
.txt{
|
|
color: #1AC4F5;
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.now_ele{
|
|
position: absolute;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
width: 112px;
|
|
height: 110px;
|
|
.data{
|
|
color: #128DFF;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
.bg_img{
|
|
width: 112px;
|
|
height: 62px;
|
|
background-image: url("../../assets/images/footer.png");
|
|
background-size: 100% 100%;
|
|
margin-top: -10px;
|
|
}
|
|
.txt{
|
|
color: #1AC4F5;
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.my3D_img{
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 20px 70px 0 70px;
|
|
img{
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: .85;
|
|
}
|
|
}
|
|
}
|
|
.middle_bottom{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: nowrap;
|
|
height: 33%;
|
|
width: 100%;
|
|
.chart_box2{
|
|
width: 49.5%;
|
|
height: 100%;
|
|
.nowPower_chart{
|
|
width: 100%;
|
|
height: 81%;
|
|
border: 1px solid #fff;
|
|
}
|
|
}
|
|
.wendu_box{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
width: 49%;
|
|
height: 100%;
|
|
.item{
|
|
width: 24%;
|
|
height: 48.5%;
|
|
padding: 0 10px;
|
|
border: 1px solid #1085B6;
|
|
&:first-child{
|
|
margin-bottom: 8px;
|
|
}
|
|
.dev_name{
|
|
color: #19C3F4;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
line-height: 50px;
|
|
}
|
|
.line{
|
|
width: 100%;
|
|
height: 1px;
|
|
background-image: url("../../assets/images/line.png");
|
|
background-size: 100% 100%;
|
|
}
|
|
.data{
|
|
color: #F5901A;
|
|
font-size: 26px;
|
|
font-weight: bold;
|
|
line-height: 80px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.right{
|
|
width: 24%;
|
|
height: 100%;
|
|
.right_top{
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 49%;
|
|
margin-bottom: 4%;
|
|
}
|
|
.right_bottom{
|
|
width: 100%;
|
|
height: 49%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.title{
|
|
width: 45%;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
margin: 0 auto 20px auto;
|
|
color: #19C3F4;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
background-image: url("../../assets/images/wrappertitle.png");
|
|
background-size: 100% 100%;
|
|
}
|
|
.info_box{
|
|
display: flex;
|
|
width: 100%;
|
|
height: 44%;
|
|
padding: 10px;
|
|
.dev_img{
|
|
width: 50%;
|
|
height: 100%;
|
|
//border: 1px solid #fff;
|
|
img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.dev_data{
|
|
width: 50%;
|
|
height: 100%;
|
|
//border: 1px solid #fff;
|
|
margin-left: 10px;
|
|
p{
|
|
font-size: 16px;
|
|
line-height: 40px;
|
|
}
|
|
.green{
|
|
color: #14FF00;
|
|
}
|
|
.red{
|
|
color: red;
|
|
}
|
|
.enter_t{
|
|
color: #F5901A;
|
|
}
|
|
.leave_t{
|
|
color: #F5901A;
|
|
}
|
|
.today_tce{
|
|
color: #128DFF;
|
|
}
|
|
.now_t{
|
|
color: #F5901A;
|
|
}
|
|
}
|
|
}
|
|
.chart_box{
|
|
width: 100%;
|
|
height: 44%;
|
|
padding: 10px 10px 10px 10px;
|
|
.dev_chart{
|
|
width: 100%;
|
|
height: 100%;
|
|
//border: 1px solid #fff;
|
|
}
|
|
}
|
|
.bgimg{
|
|
background-image: url("../../assets/images/wrapperbox.png");
|
|
background-size: 100% 100%;
|
|
}
|
|
</style>
|
|
|
|
|