scmy/psdc-ui/src/views/bigview/index.vue

<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':dcglRunStatus === '关闭'}">{{ 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"><span class="screenNumber">{{ nowPower }}</span>kW</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"><span class="screenNumber">{{ nowEle }}</span>kWh</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" id="dqglChart"></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"><span class="screenNumber">{{ item.deviceTemp}}</span>℃</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="{'green':kqyrbRunStatus === '开启','red':kqyrbRunStatus === '关闭'}">{{ kqyrbRunStatus }}</span></p>
              <p>进水温度：<span class="enter_t"><span>{{ kqyrbThermometerValueIn }}</span>℃</span></p>
              <p>出水温度：<span class="leave_t"><span>{{ kqyrbThermometerValueOut }}</span>℃</span></p>
              <p>今日能耗：<span class="today_tce"><span>{{ kqyrbTodayUseEnergy }}</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="{'green':frdlRunStatus === '开启','red':frdlRunStatus === '关闭'}">{{ frdlRunStatus }}</span></p>
              <p>当前温度：<span class="now_t"><span>{{ frdlThermometerValueNow }}</span>℃</span></p>
              <p>今日能耗：<span class="today_tce"><span>{{ frdlTodayUseEnergy }}</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,getZdb} from '../../api/bigview/bigview'

/** 页面加载时*/
onMounted(()=>{
  dcglChartFun();
  kqyrbChartFun();
  frdlChartFun();
  getWenduFun();
  getDevicesInfoFun();
  xrglChartFun();
  getZdbFun();
  dqglChartFun()
})

/** 8个温度传感器数据*/
const wdcgqArr = ref([])
function getWenduFun(){
  getTemperature("温度传感器").then((res)=>{
    console.log('111',res)
    for(let i = 0;i < res.data.length;i++){
      if(res.data[i].deviceTemp == null){
        res.data[i].deviceTemp = '--'
      }
    }
    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([]);

//电磁锅炉运行数据
const dcglRunStatus = ref('--')
const dcglThermometerValueIn = ref('--')
const dcglThermometerValueOut = ref('--')
const dcglTodayUseEnergy = ref('--')
//电磁锅炉折线图数据
const dcglTimeList = ref([]);
const dcglTempInTodayList = ref([]);
const dcglTempOutTodayList = ref([]);

//空气源热泵运行数据
const kqyrbRunStatus = ref('--')
const kqyrbThermometerValueIn = ref('--')
const kqyrbThermometerValueOut = ref('--')
const kqyrbTodayUseEnergy = ref('--')
//空气源热泵折线图数据
const kqyrbTimeList = ref([]);
const kqyrbTempInTodayList = ref([]);
const kqyrbTempOutTodayList = ref([]);

//发热电缆运行数据
const frdlRunStatus = ref('--')
const frdlThermometerValueNow = ref('--')
const frdlTodayUseEnergy = ref('--')
//发热电缆折线图数据
const frdlTimeList = ref([]);
const frdlTempTodayList = 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();
      }
      if(res.data[i].deviceId == 1){
        // console.log('电磁锅炉')
        if(res.data[i].deviceRunStatus == 1){
          dcglRunStatus.value = '开启'
        }else{
          dcglRunStatus.value = '关闭'
        }
        dcglThermometerValueIn.value = res.data[i].thermometerValueIn;
        dcglThermometerValueOut.value = res.data[i].thermometerValueOut;
        dcglTodayUseEnergy.value = res.data[i].todayUseEnergy;
        dcglTimeList.value = res.data[i].timeList;
        dcglTempInTodayList.value = res.data[i].tempInTodayList;
        dcglTempOutTodayList.value = res.data[i].tempOutTodayList;
        dcglChartFun();
      }
      if(res.data[i].deviceId == 3){
        // console.log('空气源热泵')
        if(res.data[i].deviceRunStatus == 1){
          kqyrbRunStatus.value = '开启'
        }else{
          kqyrbRunStatus.value = '关闭'
        }
        kqyrbThermometerValueIn.value = res.data[i].thermometerValueIn;
        kqyrbThermometerValueOut.value = res.data[i].thermometerValueOut;
        kqyrbTodayUseEnergy.value = res.data[i].todayUseEnergy;
        kqyrbTimeList.value = res.data[i].timeList;
        kqyrbTempInTodayList.value = res.data[i].tempInTodayList;
        kqyrbTempOutTodayList.value = res.data[i].tempOutTodayList;
        kqyrbChartFun();
      }
      if(res.data[i].deviceId == 4){
        // console.log('发热电缆')
        if(res.data[i].deviceRunStatus == 1){
          frdlRunStatus.value = '开启'
        }else{
          frdlRunStatus.value = '关闭'
        }
        frdlThermometerValueNow.value = res.data[i].thermometerValue;
        frdlTodayUseEnergy.value = res.data[i].todayUseEnergy;
        frdlTimeList.value = res.data[i].timeList;
        frdlTempTodayList.value = res.data[i].tempTodayList;
        frdlChartFun();
      }
    }
  })
}

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: "#b6bee7"
      }
    },
    tooltip: {
      trigger: "axis",
      formatter: function(params) {
        var result = params[0].name + '<br>';  // 获取横轴数据项名称
        for (var i = 0; i < params.length; i++) {
          var seriesName = params[i].seriesName;  // 获取系列名称
          var value = params[i].value;  // 获取数据值
          // result += seriesName + ': ' + '<strong>'+value+'</strong>' + '℃<br>';  // 拼接字符串
          if (i === 0) {  // 第一个系列名称设置为蓝色
            result += '<span>' + '<span style="color: #128dff">'+seriesName+'</span>' + '&nbsp;&nbsp;&nbsp;&nbsp;' + '<strong>'+value+'</strong>' + '</span>℃<br>';
          } else if (i === 1) {  // 第二个系列名称设置为黄色
            result += '<span>' + '<span style="color: #F5901A">'+seriesName+'</span>' + '&nbsp;&nbsp;&nbsp;&nbsp;' + '<strong>'+value+'</strong>' + '</span>℃<br>';
          } else {  // 其他系列名称使用默认颜色
            result += seriesName + ': ' + value + ' m/s<br>';
          }
        }
        return result;
      },
      // borderColor: '#00fcff',
      borderWidth: 1
    },
    grid:{
      show: true,
      top: '20%',
      bottom:'15%',
      left:'10%',
      right:'3%',
      borderWidth: 0,
      borderColor: '#767da1',
    },
    xAxis: {
      type: 'category',
      data: dcglTimeList.value,
      axisLabel: {
        textStyle: {
          color: "#b6bee7"
        }
      },
      axisLine: {
        lineStyle: {
          color: '#767da1' // 设置x轴的线条颜色
        }
      },
      axisTick: {
        show: true // 去掉x轴刻度
      },
      splitArea: {
        show: false,
        interval:0,
        areaStyle: {
          color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
          //（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
        }
      }
    },
    yAxis: {
      type: 'value',
      name:'℃',
      nameTextStyle: {
        color: "#b6bee7",
        nameLocation: "start"
      },
      axisLabel: {
        textStyle: {
          color: "#b6bee7"
        }
      },
      splitLine: {
        show: true,
        lineStyle: {color: "#767da1", type: "dashed"} //dashed
      } //s是否显示为虚线的条纹背景
    },
    series: [
      {
        name: "进水温度",
        data: dcglTempInTodayList.value,
        type: 'line',
        smooth: true,
        symbol: "none", //去掉圆点
        itemStyle: { //线条颜色
          color: '#128dff',
        }
      },
      {
        name: "出水温度",
        data: dcglTempOutTodayList.value,
        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: "#b6bee7"
      }
    },
    tooltip: {
      trigger: "axis",
      formatter: function(params) {
        var result = params[0].name + '<br>';  // 获取横轴数据项名称
        for (var i = 0; i < params.length; i++) {
          var seriesName = params[i].seriesName;  // 获取系列名称
          var value = params[i].value;  // 获取数据值
          // result += seriesName + ': ' + '<strong>'+value+'</strong>' + '℃<br>';  // 拼接字符串
          if (i === 0) {  // 第一个系列名称设置为蓝色
            result += '<span>' + '<span style="color: #128dff">'+seriesName+'</span>' + '&nbsp;&nbsp;&nbsp;&nbsp;' + '<strong>'+value+'</strong>' + '</span>℃<br>';
          } else if (i === 1) {  // 第二个系列名称设置为黄色
            result += '<span>' + '<span style="color: #F5901A">'+seriesName+'</span>' + '&nbsp;&nbsp;&nbsp;&nbsp;' + '<strong>'+value+'</strong>' + '</span>℃<br>';
          } else {  // 其他系列名称使用默认颜色
            result += seriesName + ': ' + value + ' m/s<br>';
          }
        }
        return result;
      },
      // borderColor: '#00fcff',
      borderWidth: 1
    },
    grid:{
      show: true,
      top: '20%',
      bottom:'15%',
      left:'10%',
      right:'3%',
      borderWidth: 0,
      borderColor: '#767da1',
    },
    xAxis: {
      type: 'category',
      data: xrglTimeList.value,
      axisLabel: {
        textStyle: {
          color: "#b6bee7"
        }
      },
      axisLine: {
        lineStyle: {
          color: '#767da1' // 设置x轴的线条颜色
        }
      },
      axisTick: {
        show: true // 去掉x轴刻度
      },
      splitArea: {
        show: false,
        interval:0,
        areaStyle: {
          color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
          //（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
        }
      }
    },
    yAxis: {
      type: 'value',
      name:'℃',
      nameTextStyle: {
        color: "#b6bee7",
        nameLocation: "start"
      },
      axisLabel: {
        textStyle: {
          color: "#b6bee7"
        }
      },
      splitLine: {
        show: true,
        lineStyle: {color: "#767da1", type: "dashed"} //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: "#b6bee7"
      }
    },
    tooltip: {
      trigger: "axis",
      formatter: function(params) {
        var result = params[0].name + '<br>';  // 获取横轴数据项名称
        for (var i = 0; i < params.length; i++) {
          var seriesName = params[i].seriesName;  // 获取系列名称
          var value = params[i].value;  // 获取数据值
          // result += seriesName + ': ' + '<strong>'+value+'</strong>' + '℃<br>';  // 拼接字符串
          if (i === 0) {  // 第一个系列名称设置为蓝色
            result += '<span>' + '<span style="color: #128dff">'+seriesName+'</span>' + '&nbsp;&nbsp;&nbsp;&nbsp;' + '<strong>'+value+'</strong>' + '</span>℃<br>';
          } else if (i === 1) {  // 第二个系列名称设置为黄色
            result += '<span>' + '<span style="color: #F5901A">'+seriesName+'</span>' + '&nbsp;&nbsp;&nbsp;&nbsp;' + '<strong>'+value+'</strong>' + '</span>℃<br>';
          } else {  // 其他系列名称使用默认颜色
            result += seriesName + ': ' + value + ' m/s<br>';
          }
        }
        return result;
      },
      // borderColor: '#00fcff',
      borderWidth: 1
    },
    grid:{
      show: true,
      top: '20%',
      bottom:'15%',
      left:'10%',
      right:'3%',
      borderWidth: 0,
      borderColor: '#767da1',
    },
    xAxis: {
      type: 'category',
      data: kqyrbTimeList.value,
      axisLabel: {
        textStyle: {
          color: "#b6bee7"
        }
      },
      axisLine: {
        lineStyle: {
          color: '#767da1' // 设置x轴的线条颜色
        }
      },
      axisTick: {
        show: true // 去掉x轴刻度
      },
      splitArea: {
        show: false,
        interval:0,
        areaStyle: {
          color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
          //（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
        }
      }
    },
    yAxis: {
      type: 'value',
      name:'℃',
      nameTextStyle: {
        color: "#b6bee7",
        nameLocation: "start"
      },
      axisLabel: {
        textStyle: {
          color: "#b6bee7"
        }
      },
      splitLine: {
        show: true,
        lineStyle: {color: "#767da1", type: "dashed"} //dashed
      } //s是否显示为虚线的条纹背景
    },
    series: [
      {
        name: "进水温度",
        data: kqyrbTempInTodayList.value,
        type: 'line',
        smooth: true,
        symbol: "none", //去掉圆点
        itemStyle: { //线条颜色
          color: '#128dff',
        }
      },
      {
        name: "出水温度",
        data: kqyrbTempOutTodayList.value,
        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: "#b6bee7"
      }
    },
    tooltip: {
      trigger: "axis",
      formatter: function(params) {
        var result = params[0].name + '<br>';  // 获取横轴数据项名称
        for (var i = 0; i < params.length; i++) {
          var seriesName = params[i].seriesName;  // 获取系列名称
          var value = params[i].value;  // 获取数据值
          // result += seriesName + ': ' + '<strong>'+value+'</strong>' + '℃<br>';  // 拼接字符串
          if (i === 0) {  // 第一个系列名称设置为蓝色
            result += '<span>' + '<span style="color: #128dff">'+seriesName+'</span>' + '&nbsp;&nbsp;&nbsp;&nbsp;' + '<strong>'+value+'</strong>' + '</span>℃<br>';
          } else if (i === 1) {  // 第二个系列名称设置为黄色
            result += '<span>' + '<span style="color: #F5901A">'+seriesName+'</span>' + '&nbsp;&nbsp;&nbsp;&nbsp;' + '<strong>'+value+'</strong>' + '</span>℃<br>';
          } else {  // 其他系列名称使用默认颜色
            result += seriesName + ': ' + value + ' m/s<br>';
          }
        }
        return result;
      },
      // borderColor: '#00fcff',
      borderWidth: 1
    },
    grid:{
      show: true,
      top: '20%',
      bottom:'15%',
      left:'10%',
      right:'3%',
      borderWidth: 0,
      borderColor: '#767da1',
    },
    xAxis: {
      type: 'category',
      data: frdlTimeList.value,
      axisLabel: {
        textStyle: {
          color: "#b6bee7"
        }
      },
      axisLine: {
        lineStyle: {
          color: '#767da1' // 设置x轴的线条颜色
        }
      },
      axisTick: {
        show: true // 去掉x轴刻度
      },
      splitArea: {
        show: false,
        interval:0,
        areaStyle: {
          color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
          //（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
        }
      }
    },
    yAxis: {
      type: 'value',
      name:'℃',
      nameTextStyle: {
        color: "#b6bee7",
        nameLocation: "start"
      },
      axisLabel: {
        textStyle: {
          color: "#b6bee7"
        }
      },
      splitLine: {
        show: true,
        lineStyle: {color: "#767da1", type: "dashed"} //dashed
      } //s是否显示为虚线的条纹背景
    },
    series: [
      {
        name: "当前温度",
        data: frdlTempTodayList.value,
        type: 'line',
        smooth: true,
        symbol: "none", //去掉圆点
        itemStyle: { //线条颜色
          color: '#128dff',
        }
      }
    ]
  };
  option && frdlChart.setOption(option);
};

/**总电表信息*/
const nowPower = ref('--')
const nowEle = ref('--')
const todayUsePowersArr = [];
function getZdbFun(){
  getZdb(13).then((res)=>{
    console.log(res.data)
    nowPower.value = res.data.totp;
    nowEle.value = res.data.totwh;
    delete res.data.todayUsePowers.userId
    delete res.data.todayUsePowers.deviceId
    delete res.data.todayUsePowers.samDate
    for(let i in res.data.todayUsePowers){
      todayUsePowersArr.push(res.data.todayUsePowers[i])
    }
    dqglChartFun()
  })
}
let dqglChart;
function dqglChartFun(){
  const chartDom = document.getElementById('dqglChart')
  dqglChart = echarts.init(chartDom);
  const option = {
    legend: {
      data: ["当前功率"],
      // selectedMode: 'single',
      textStyle: {
        color: "#b6bee7"
      }
    },
    tooltip: {
      trigger: "axis",
      // formatter: "{b0}： {c0}kW",
      formatter: function(params) {
        var result = params[0].name + '<br>';  // 获取横轴数据项名称
        for (var i = 0; i < params.length; i++) {
          var seriesName = params[i].seriesName;  // 获取系列名称
          var value = params[i].value;  // 获取数据值
          result += '<span>' + '<span style="color: #128dff">'+seriesName+'</span>' + '&nbsp;&nbsp;&nbsp;&nbsp;' + '<strong>'+value+'</strong>' + '</span>kW<br>';
        }
        return result;
      },
      // borderColor: '#00fcff',
      borderWidth: 1
    },
    grid:{
      show: true,
      top: '20%',
      bottom:'15%',
      left:'10%',
      right:'3%',
      borderWidth: 0,
      borderColor: '#767da1',
    },
    xAxis: {
      type: 'category',
      data: ["00:00",
        "00:15", "00:30", "00:45", "01:00",
        "01:15", "01:30", "01:45", "02:00",
        "02:15", "02:30", "02:45", "03:00",
        "03:15", "03:30", "03:45", "04:00",
        "04:15", "04:30", "04:45", "05:00",
        "05:15", "05:30", "05:45", "06:00",
        "06:15", "06:30", "06:45", "07:00",
        "07:15", "07:30", "07:45", "08:00",
        "08:15", "08:30", "08:45", "09:00",
        "09:15", "09:30", "09:45", "10:00",
        "10:15", "10:30", "10:45", "11:00",
        "11:15", "11:30", "11:45", "12:00",
        "12:15", "12:30", "12:45", "13:00",
        "13:15", "13:30", "13:45", "14:00",
        "14:15", "14:30", "14:45", "15:00",
        "15:15", "15:30", "15:45", "16:00",
        "16:15", "16:30", "16:45", "17:00",
        "17:15", "17:30", "17:45", "18:00",
        "18:15", "18:30", "18:45", "19:00",
        "19:15", "19:30", "19:45", "20:00",
        "20:15", "20:30", "20:45", "21:00",
        "21:15", "21:30", "21:45", "22:00",
        "22:15", "22:30", "22:45", "23:00",
        "23:15", "23:30", "23:45",],
      axisLabel: {
        textStyle: {
          color: "#b6bee7"
        }
      },
      axisLine: {
        lineStyle: {
          color: '#767da1' // 设置x轴的线条颜色
        }
      },
      axisTick: {
        show: true // 去掉x轴刻度
      },
      splitArea: {
        show: false,
        interval:0,
        areaStyle: {
          color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
          //（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
        }
      }
    },
    yAxis: {
      type: 'value',
      name:'kW',
      nameTextStyle: {
        color: "#b6bee7",
        nameLocation: "start"
      },
      axisLabel: {
        textStyle: {
          color: "#b6bee7"
        }
      },
      splitLine: {
        show: true,
        lineStyle: {color: "#767da1", type: "dashed"} //dashed
      } //是否显示为虚线的条纹
    },
    series: [
      {
        name: "当前功率",
        data: todayUsePowersArr,
        type: 'line',
        smooth: true,
        symbol: "none", //去掉圆点
        itemStyle: { //线条颜色
          color: '#128dff',
        }
      }
    ]
  };
  option && dqglChart.setOption(option);
};




/** 页面销毁时*/
onBeforeUnmount(() => {
  if(dcglChart) {
    dcglChart.dispose(); // 销毁实例，防止内存泄漏}
    if (xrglChart) {
      xrglChart.dispose();
    }
    if (kqyrbChart) {
      kqyrbChart.dispose();
    }
    if (frdlChart) {
      frdlChart.dispose();
    }
    if (dqglChart) {
      dqglChart.dispose();
    }
  }
});
</script>

<style scoped lang="scss">
@import "@/assets/font/stylesheet.css";
.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%;
          }
        }
        .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;
      color: #f3ffff;
    }
    .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%;
  //background-color: rgba(32,237,255,.1);
}
.screenNumber{
  font-family: 'ds-digitalnormal';
}
</style>