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':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>