scmy/psdc-ui/src/views/emonitor/frdl/index.vue

<template>
  <div class="app-container home">
    <div class="top">
      <div class="card">
        <div><img src="../../../assets/images/用电量.png"></div>
        <div>
          <p style="color: #cccccc">总用电量</p>
          <h1>{{ data.totwh }}kWh</h1>
        </div>
      </div>
      <div class="card">
        <div><img src="../../../assets/images/功率.png"></div>
        <div>
          <p style="color: #cccccc">当前功率</p>
          <h1>{{ data.totp }}kW</h1>
        </div>
      </div>
      <div class="card">
        <div><img src="../../../assets/images/温度.png"></div>
        <div>
          <div>
            <p style="color: #cccccc">当前温度</p>
            <h1>{{ data.temp }}℃</h1>
          </div>
        </div>
      </div>
      <div class="card">
        <div><img src="../../../assets/images/温度传感器.png"></div>
        <div>
          <p style="color: #cccccc">运行状态</p>
          <h1 :class="{'green':data.runStatus == '开启','red':data.runStatus == '关闭'}">{{ data.runStatus }}</h1>
        </div>
      </div>
    </div>

    <div class="bottom">
      <div class="bottom1">
        <div class="bottom1-1">
          日用电量
        </div>
        <div id="myEcharts" style="width: 100%; height: 86.7%"></div>
      </div>
      <div class="bottom1">
        <div class="bottom1-1">
          月用电量
        </div>
        <div id="myEcharts2" style="width: 100%; height: 86.7%"></div>
      </div>
      <div class="bottom1">
        <div class="bottom1-1">
          当前功率
        </div>
        <div id="myEcharts3" style="width: 100%; height: 86.7%"></div>
      </div>
      <div class="bottom1">
        <div class="bottom1-1">
          当前温度
        </div>
        <div id="myEcharts4" style="width: 100%; height: 86.7%"></div>
      </div>
    </div>
  </div>
</template>

<script name="Index">
import {getFrdl, getFrld} from '../../../api/emonitor/api'
import {onMounted, reactive} from "vue";
import * as echarts from 'echarts';
export default {
  name: "frdl",
  setup() {
    let data = reactive({
      totwh:'',
      totp:'',
      temp:'',
      tempIn:'',
      tempOut:'',
      //1 开 2 关
      runStatus:'',
      glData:[],
      glXz:[
        "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"
      ],
      dayData:[],
      dayXz:[],
      emonthData:[],
      emonthXz:[
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        10,
        11,
        12,
        13,
        14,
        15,
        16,
        17,
        18,
        19,
        20,
        21,
        22,
        23,
        24,
        25,
        26,
        27,
        28,
        29,
        30,
        31],
      tem:'',
      time:'',
    })
    onMounted(() => {//需要获取到element,所以是onMounted的Hook
      getFrld(4).then((res) => {
        console.log(res)
        //日用电量
        let arr = []
        let brr = []
        for(let i in res.frdlqhour){
          arr.push(res.frdlqhour[i].useElectric)
          brr.push(res.frdlqhour[i].hour)
        }
        data.dayData=arr
        data.dayXz=brr
        let myChart = echarts.getInstanceByDom(document.getElementById("myEcharts"));
        if (myChart){
          myChart.dispose()
        }
        myChart = echarts.init(document.getElementById("myEcharts"));
        myChart.setOption({
          title: {},
          tooltip: {},
          grid:{
            show: true,
            top: '20%',
            bottom:'15%',
            left:'5%',
            right:'3%',
            borderWidth: 1,
            borderColor: '#767da1',
          },
          legend:{
            data:['日用电量'],
            textStyle: {
              color: "white" //标题的颜色
            },
          },
          textStyle:{
            color:'#BEC3DA'
          },
          xAxis: {
            type:'category',
            data:data.dayXz,
            axisLine:{
              lineStyle:{
                color:'#767da1',
                // type:'dashed'
              }
            },
            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: "kWh",
            splitLine:{
              show:true,
              lineStyle:{
                type:'solid',
                color:'#f3ffff'
              }
            },
            axisLine: {
              show: false,
              lineStyle:{
                type:'dashed',
                color:'#BEC3DA'
              }
            },
          },
          series: [
            {
              name: "日用电量",
              type: "bar",
              data: data.dayData,
              itemStyle:{
                color:'#2F8EE0'
              },
              markPoint: {
                itemStyle: {
                  normal: {
                    label: {
                      color: '#fff',
                      // fontSize: 9
                      // borderColor: '#000',
                      // borderWidth: 1,
                    }
                  }
                },
                data: [
                  {type: "max", name: "最大值"},
                  {type: "min", name: "最小值"}
                ]
              },
            },
          ],
        });
        window.onresize = function () {//自适应大小
          myChart.resize();
        };

        //月用电量
        let crr = []
        for(let i in res.frdlqday){
          crr.push(res.frdlqday[i].useElectric)
        }
        data.emonthData=crr
        let myChart2 = echarts.getInstanceByDom(document.getElementById("myEcharts2"));
        if (myChart2){
          myChart2.dispose()
        }
        myChart2 = echarts.init(document.getElementById("myEcharts2"));

        myChart2.setOption({
          title: {},
          tooltip: {},
          grid:{
            show: true,
            top: '20%',
            bottom:'15%',
            left:'5%',
            right:'3%',
            borderWidth: 1,
            borderColor: '#767da1',
          },
          legend:{
            data:['月用电量'],
            textStyle: {
              color: "white" //标题的颜色
            },
          },
          textStyle:{
            color:'#BEC3DA'
          },
          xAxis: {
            type:'category',
            data:data.emonthXz,
            axisLine:{
              lineStyle:{
                color:'#767da1',
                // type:'dashed'
              }
            },
            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: "kWh",
            splitLine:{
              show:true,
              lineStyle:{
                type:'solid',
                color:'#f3ffff'
              }
            },
            axisLine: {
              show: false,
              lineStyle:{
                type:'dashed',
                color:'#BEC3DA'
              }
            },
          },
          series: [
            {
              name: "月用电量",
              type: "bar",
              data: data.emonthData,
              itemStyle:{
                color:'#2F8EE0'
              },
              markPoint: {
                itemStyle: {
                  normal: {
                    label: {
                      color: '#fff',
                      // fontSize: 9
                      // borderColor: '#000',
                      // borderWidth: 1,
                    }
                  }
                },
                data: [
                  {type: "max", name: "最大值"},
                  {type: "min", name: "最小值"}
                ]
              },
            },
          ],
        });
        window.onresize = function () {//自适应大小
          myChart2.resize();
        };

        //进出水温度
        data.time=res.times
        data.tem=res.temps


        let myChart4 = echarts.getInstanceByDom(document.getElementById("myEcharts4"));
        if (myChart4){
          myChart4.dispose()
        }
        myChart4 = echarts.init(document.getElementById("myEcharts4"));
        myChart4.setOption({
          title: {},
          tooltip: {
            trigger: "axis",

            show: true
          },
          grid:{
            show: true,
            top: '20%',
            bottom:'15%',
            left:'5%',
            right:'3%',
            borderWidth: 1,
            borderColor: '#767da1',
          },
          legend: {
            data: ['当前温度'],
            textStyle:{
              color:'#F5901A'
            }
          },
          textStyle:{
            color:'#BEC3DA'
          },
          xAxis: {
            data: data.time,
            axisLine:{
              lineStyle:{
                color:'#767da1',
                // type:'dashed'
              }
            },
            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: "℃",
            splitLine:{
              show:true,
              lineStyle:{
                type:'dashed',
                color:'#BEC3DA'
              }
            },
            axisLine: {
              show: false,
              lineStyle:{
                type:'dashed',
                color:'#BEC3DA'
              }
            },
          },
          series: [
            {
              name: '当前温度',
              type: 'line',
              // stack: 'Total',
              itemStyle:{
                color:'#F5901A'
              },
              data: data.tem
            },
          ],
        });
        window.onresize = function () {//自适应大小
          myChart4.resize();
        };
      })
      getFrdl(4).then((res)=>{
        console.log('1',res)
        if(res.data!=null){
          data.tempIn=res.data.tempIn
          data.tempOut=res.data.tempOut
          data.temp=res.data.temp
          data.totp = res.data.totp
          data.totwh = res.data.totwh
          if(res.data.runStatus==1){
            data.runStatus = '开启'
          }else if (res.data.runStatus==2){
            data.runStatus = '关闭'
          }
          //gl
          delete res.data.todayUsePowers.deviceId
          delete res.data.todayUsePowers.samDate
          delete res.data.todayUsePowers.userId
          let arr = Object.values(res.data.todayUsePowers)
          data.glData=arr
        }

        let myChart3 = echarts.getInstanceByDom(document.getElementById("myEcharts3"));
        if (myChart3){
          myChart3.dispose()
        }
        myChart3 = echarts.init(document.getElementById("myEcharts3"));
        myChart3.setOption({
          title: {},
          legend:{
            data:['当前功率'],
            textStyle: {
              color: "white" //标题的颜色
            },
          },
          tooltip: {
            trigger: "axis",
            show: true
          },
          textStyle:{
            color:'#BEC3DA'
          },
          grid:{
            show: true,
            top: '20%',
            bottom:'15%',
            left:'5%',
            right:'3%',
            borderWidth: 1,
            borderColor: '#767da1',
          },
          xAxis: {
            data:data.glXz,
            axisLine:{
              lineStyle:{
                color:'#767da1'
              }
            },
            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: "kW",
            splitLine:{
              show:true,
              lineStyle:{
                type:'solid',
                color:'#BEC3DA'
              }
            },
            axisLine: {
              show: false,
              lineStyle:{
                type:'dashed',
                color:'#BEC3DA'
              }
            },
          },
          series: [
            {
              name: "当前功率",
              type: "line",
              data: data.glData,
              itemStyle:{
                color:'#2F8EE0'
              },
              symbol: "none", //去掉拐角点
              markPoint: {
                itemStyle: {
                  normal: {
                    label: {
                      color: '#fff',
                      // fontSize: 9
                      // borderColor: '#000',
                      // borderWidth: 1,
                    }
                  }
                },
                data: [
                  {type: "max", name: "最大值"},
                  {type: "min", name: "最小值"}
                ]
              },
            },
          ],
        });
        window.onresize = function () {//自适应大小
          myChart3.resize();
        };
      })

    })
    return{
      data
    }
  },
  components: {},
  mounted() {},
};


</script>

<style scoped lang="scss">
.top{
  width: 100%;
  height: 110px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 20px;
}
.card{
  width: 24%;
  height: 110px;
  background-color: #2F3D8A;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.bottom{
  width: 100%;
  height: 640px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.bottom1{
  width: 49.35%;
  height: 300px;
  background-color: #2F3D8A;
  margin-bottom: 20px;
}
p{
  margin-bottom: 10px;
}
.bottom1-1{
  width: 100%;
  height: 40px;
  background-color: #374590;
  padding-top: 10px;
  padding-left: 10px;
}
.green{
  color: #14FF00;
}
.red{
  color: red;
}
</style>