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

<template>
  <div class="app-container home">
    <div class="top">
      <div class="card" v-for="(item,index) in data.info ">
        <div><img src="../../../assets/images/温度.png"></div>
        <div>
          <p>{{item.name}}</p>
          <h2>{{item.temp}}℃</h2>
        </div>
      </div>
    </div>

    <div class="bottom">
      <div class="bottom1">
        <div class="bottom1-1">
          实时温度总览
        </div>
        <div id="myEcharts" style="width: 100%; height: 91%"></div>
      </div>
    </div>
  </div>
</template>

<script  name="Index">
import {getWdcgq} from '../../../api/emonitor/api'
import {onMounted, reactive} from "vue";
import * as echarts from 'echarts';
export default {
  name: "wdcgq",
  setup() {
    let data = reactive({
      info:[],
      xinfo:[],
      infos: [
        {
          name: "温度传感器1",
          type: "line",
          data: [5, 20, 36, 10, 10, 20],
          itemStyle:{
            color:'#2F8EE0'
          },
        },
        {
          name: "温度传感器2",
          type: "line",
          data: [25, 40, 66, 80, 120, 50],
          itemStyle:{
            color:'#2F8EE0'
          },
        },
      ],
    })
    onMounted(() => {//需要获取到element,所以是onMounted的Hook
      //温度传感器1-8  id 5-12
      getWdcgq(16).then((res)=>{
        console.log(res)
        let arr = []
        let brr = []
        let crr = []
        for (let i in res.data){
          arr.push({name:res.data[i].deviceName,temp:res.data[i].deviceTemp})
          brr.push({name:res.data[i].deviceName,type: "line",data:res.data[i].temps,itemStyle:{color:'#2F8EE0'}})
          crr.push(res.data[i].times)
        }
   console.log(crr)
         data.info=arr
        data.infos=brr
        data.xinfo=crr

        let myChart = echarts.getInstanceByDom(document.getElementById("myEcharts"));
        if (myChart){
          myChart.dispose()
        }
        myChart = echarts.init(document.getElementById("myEcharts"));
        // 绘制图表
        myChart.setOption({
          title: {},
          tooltip: {},
          legend: {
            selectedMode: 'single',
            textStyle:{
              color:'#BEC3DA'
            }
          },
          textStyle:{
            color:'#BEC3DA'
          },
          xAxis: {
            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"
            ],
            axisLine:{
              lineStyle:{
                color:'#BEC3DA',
                type:'dashed'
              }
            }
          },
          yAxis: {
            type: 'value',
            name: "℃",
            splitLine:{
              show:true,
              lineStyle:{
                type:'dashed',
                color:'#BEC3DA'
              }
            },
            axisLine: {
              show: true,
              lineStyle:{
                type:'dashed',
                color:'#BEC3DA'
              }
            },
          },
          series:data.infos,
        });
        window.onresize = function () {//自适应大小
          myChart.resize();
        };
      })

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


</script>

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

.bottom{
  width: 100%;
  height: 350px;
}
.bottom1{
  width: 100%;
  height: 350px;
  background-color: #2F3D8A;
}
.bottom1-1{
  width: 100%;
  height: 40px;
  background-color: #374590;
  padding-top: 10px;
  padding-left: 10px;
}
</style>