首页、能耗对比

psdc-ui/src/views/analyse/nhdb/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container home">
     <div class="overflow">
-      <el-card class="box-card" v-for="item in data.celueInfoList">
+      <el-card class="box-card" v-for="(item,index) in data.celueInfoList" :key="index">
         <template #header>
           <div class="card-header">
             <img :src="imgSrc" alt="">
@@ -38,7 +38,9 @@
               <el-input v-model="item.sceneUseEnergy" readonly/>
             </el-form-item>
           </el-form>
-<!--          <div class="echart"></div>-->
+          <div class="echartBox">
+            <div class="echart" :id="`forId${index}`"></div>
+          </div>
         </div>
       </el-card>
     </div>
@@ -46,8 +48,9 @@
 </template>
 
 <script  name="Index" setup>
-import {getCelueList} from '@/api/analyse/nhdb/nhdb'
 import {ref,reactive,onMounted} from 'vue'
+import * as echarts from "echarts";
+import {getCelueList} from '@/api/analyse/nhdb/nhdb'
 
 const imgSrc = ref('../src/assets/images/策略icon.png')
 const data = reactive({
@@ -212,9 +215,25 @@ const data = reactive({
 })
 
 onMounted(()=>{
-  getCelueListFun()
+  getCelueListFun();
+  forId();
+  setTimeout(()=>{
+    indoorChartFun();
+  },300)
+
 })
 
+/** 使用rem的思想实现图表字体等其他样式的自适应*/
+function fontSize(px) {  //传入字体大小
+  let clientWidth = window.innerWidth || document.body.clientWidth; //屏幕尺寸
+  if (!clientWidth) {
+    return 0;
+  }
+  let fontSize = clientWidth / 1920; //设计稿尺寸
+  return px * fontSize;  //转换为 rem的布局返回出去
+}
+
+//获取执行后的策略列表
 function getCelueListFun(){
   getCelueList().then((res)=>{
     for(let i = 0;i < res.data.length;i++){
@@ -230,6 +249,110 @@ function getCelueListFun(){
   })
 }
 
+//动态绑定ID
+function forId(index){
+  return 'chart' + index;
+}
+
+//室内温度对比曲线
+let indoorChart;
+function indoorChartFun(){
+  for(let i = 0;i < data.celueInfoList.length;i++){
+    var temp = 'forId' + i;
+    console.log(temp)
+    const chartDom = document.getElementById(temp)
+    indoorChart = echarts.init(chartDom);
+    const option = {
+      legend: {
+        data: ["室内温度"],
+        // selectedMode: 'single',
+        textStyle: {
+          color: "#b6bee7",
+          fontSize:fontSize(12)
+        }
+      },
+      tooltip: {
+        trigger: "axis",
+        formatter: '',
+        // borderColor: '#00fcff',
+        borderWidth: 1
+      },
+      grid:{
+        show: true,
+        top: '20%',
+        bottom:'15%',
+        left:'8%',
+        right:'4%',
+        borderWidth: 0,
+        borderColor: '#767da1',
+      },
+      xAxis: {
+        type: 'category',
+        data: [1,1,11,1,11,1,1,1],
+        axisLabel: {
+          textStyle: {
+            color: "#b6bee7",
+            fontSize:fontSize(10)
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#767da180' // 设置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",
+          fontSize:fontSize(10),
+          nameLocation: "start"
+        },
+        axisLabel: {
+          textStyle: {
+            color: "#b6bee7",
+            fontSize:fontSize(10)
+          }
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {color: "#767da180", type: "dashed"} //dashed
+        } //s是否显示为虚线的条纹背景
+      },
+      series: [
+        {
+          name: "室内温度",
+          data: [1,1,11,1,11,1,1,1],
+          type: 'line',
+          smooth: true,
+          symbol: "none", //去掉圆点
+          itemStyle: { //线条颜色
+            color: '#F5901A',
+          }
+        }
+      ]
+    };
+    option && indoorChart.setOption(option);
+    window.addEventListener("resize", function () {
+      indoorChart.resize();
+    });
+  }
+};
+
+
+
 </script>
 
 <style scoped lang="scss">
@@ -242,16 +365,10 @@ function getCelueListFun(){
   overflow-y: auto;
 }
 .box-card {
-  width: 830px;
+  width: 100%;
   color: #fff;
   border: none;
   margin-bottom: 20px;
-  &:nth-child(odd){
-    margin-right: 20px;
-  }
-  &:nth-child(even){
-    margin-right: 0px;
-  }
   .card-header{
     display: flex;
     align-items: center;
@@ -265,7 +382,20 @@ function getCelueListFun(){
     font-size: 14px;
   }
   .item {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: nowrap;
     //margin-bottom: 18px;
+    .echartBox{
+      width: 230%;
+      height: 160px;
+      padding: 10px 0;
+      border: 1px solid #ffffff50;
+      .echart{
+        width: 100%;
+        height: 100%;
+      }
+    }
   }
 }
 .echart{
@@ -296,10 +426,10 @@ function getCelueListFun(){
 }
 ::v-deep .el-form-item--default{
   margin-bottom: 0px;
+  margin-right: 0px;
 }
 ::v-deep .el-card{
   background-color: #2F3D8A;
-  height: 260px;
 }
 @media (max-width:960px) {
   .app-container{

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

@@ -115,7 +115,7 @@
 import * as echarts from 'echarts'
 import {HomeFilled} from '@element-plus/icons-vue'
 import Screenfull from '@/components/Screenfull'
-import {ref, reactive, onMounted, onBeforeUnmount} from 'vue'
+import {ref, onMounted, onBeforeUnmount} from 'vue'
 import {getDevicesInfo,getZdb} from '../../api/bigview/bigview'
 import {getWdcgq} from '../../api/emonitor/api'
 
@@ -1127,19 +1127,25 @@ function outdoorChartFun(){
 /** 页面销毁时*/
 onBeforeUnmount(() => {
   if(dcglChart) {
-    dcglChart.dispose(); // 销毁实例，防止内存泄漏}
-    if (xrglChart) {
-      xrglChart.dispose();
-    }
-    if (kqyrbChart) {
-      kqyrbChart.dispose();
-    }
-    if (frdlChart) {
-      frdlChart.dispose();
-    }
-    if (dqglChart) {
-      dqglChart.dispose();
-    }
+    dcglChart.dispose(); // 销毁实例，防止内存泄漏
+  }
+  if (xrglChart) {
+    xrglChart.dispose();
+  }
+  if (kqyrbChart) {
+    kqyrbChart.dispose();
+  }
+  if (frdlChart) {
+    frdlChart.dispose();
+  }
+  if (dqglChart) {
+    dqglChart.dispose();
+  }
+  if (indoorChart) {
+    indoorChart.dispose();
+  }
+  if (outdoorChart) {
+    outdoorChart.dispose();
   }
 });
 </script>