Parcourir la source

提交新版本

lxh il y a 1 an
Parent
commit
7392cf8b68

+ 2 - 1
src/components/Application/src/AppLogo.vue

@@ -68,7 +68,8 @@
     cursor: pointer;
 
     &.light {
-      border-bottom: 1px solid @border-color-base;
+      // border-bottom: 1px solid @border-color-base; lxh
+      border-bottom: 1px solid rgb(5 5 5 / 6%);
     }
 
     &.collapsed-show-title {

+ 17 - 0
src/layouts/default/header/index.less

@@ -197,9 +197,26 @@
 
 .vMonitor-layout .vMonitor-layout-header{
   border-color: #121717 !important;
+  border-bottom-color: #3d464b !important; //lxh
   background-color: #1B2327 !important;
 }
 
 .vMonitor-layout .vMonitor-menu {
   background-color: #1B2327 !important;
+}
+
+.vMonitor-menu-horizontal{//lxh
+  border-bottom: 1px solid #3d464b;
+}
+
+.vMonitor-menu .vMonitor-menu-submenu-title .anticon{//lxh
+  display: none !important;
+}
+
+.vMonitor-menu-light .vMonitor-menu-submenu-title:hover:not(.vMonitor-menu-item-selected):not(.vMonitor-menu-submenu-selected){
+  color: #bbb !important;//lxh
+}
+
+.vMonitor-menu{//lxh
+  color: #bbb !important;
 }

+ 249 - 144
src/views/vent/common/basicEchartLine.vue

@@ -5,173 +5,278 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, onMounted, nextTick, defineProps } from 'vue';
-  import * as echarts from 'echarts';
-
-  let props = defineProps({
-    //距离边缘的距离
-    gridV: {
-      type: Object,
-      default: () => {
-        return {
-          top: '8%',
-          left: '3%',
-          right: '3%',
-          bottom: '10%',
-        };
-      },
+import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
+import * as echarts from 'echarts';
+
+let props = defineProps({
+  //距离边缘的距离
+  gridV: {
+    type: Object,
+    default: () => {
+      return {};
     },
-  });
+  },
+  echartData: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  }
+});
 
-  //获取don元素节点
-  let line = ref();
-
-  function getOption() {
-    nextTick(() => {
-      let myChart = echarts.init(line.value);
-      let option = {
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'line',
-            lineStyle: {
-              color: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: 'rgba(31, 179, 247,0)',
-                  },
-                  {
-                    offset: 0.5,
-                    color: 'rgba(31, 179, 247,1)',
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(31, 179, 247,0)',
-                  },
-                ],
-                global: false,
-              },
+//获取don元素节点
+let line = ref();
+
+let gridVs = reactive({
+  top: '',
+  left: '',
+  right: '',
+  bottom: '',
+})
+
+let echartDatas = reactive({
+  xData:[],
+    yData:[],
+    yData1:[],
+    legendName:[]
+})
+
+function getOption() {
+  nextTick(() => {
+    let myChart = echarts.init(line.value);
+    let option = {
+      tooltip: {
+        trigger: 'axis',
+        backgroundColor: 'rgba(0, 0, 0, .6)',
+        borderColor: '#2395c8',
+        textStyle: {
+          color: '#fff',
+          fontSize: 12,
+        },
+        axisPointer: {
+          type: 'line',
+          lineStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: 'rgba(31, 179, 247,0)',
+                },
+                {
+                  offset: 0.5,
+                  color: 'rgba(31, 179, 247,1)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(31, 179, 247,0)',
+                },
+              ],
+              global: false,
             },
           },
         },
-        grid: props.gridV,
-        xAxis: [
+      },
+      legend: {
+        align: 'left',
+        right: 'center',
+        top: '2%',
+        type: 'plain',
+        textStyle: {
+          color: '#7ec7ff',
+          fontSize: 14,
+        },
+        // icon:'rect',
+        itemGap: 25,
+        itemWidth: 18,
+        icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
+        data: [
           {
-            //x轴
-            type: 'category', //数据类型为不连续数据
-            boundaryGap: false, //坐标轴两边是否留白
-            axisLine: {
-              //坐标轴轴线相关设置。数学上的x轴
-              show: true,
-              lineStyle: {
-                color: 'rgba(100, 99, 99,.5)',
-                type: 'dashed',
-              },
+            name: echartDatas.legendName.length!=0 ? echartDatas.legendName[0] : '',
+          },
+          {
+            name: echartDatas.legendName.length>1 ? echartDatas.legendName[1] : '',
+          },
+        ],
+      },
+      grid: gridVs,
+      xAxis: [
+        {
+          //x轴
+          type: 'category', //数据类型为不连续数据
+          boundaryGap: false, //坐标轴两边是否留白
+          axisLine: {
+            //坐标轴轴线相关设置。数学上的x轴
+            show: true,
+            lineStyle: {
+              color: 'rgba(100, 99, 99,.5)',
+              type: 'dashed',
             },
-            axisLabel: {
-              fontSize: 14,
-              // margin: 10,
-              textStyle: {
-                color: '#b3b8cc',
-              },
+          },
+          axisLabel: {
+            fontSize: 14,
+            // margin: 10,
+            textStyle: {
+              color: '#b3b8cc',
             },
-            axisTick: { show: true }, //刻度点数轴
-            splitLine: {
-              show: false,
+          },
+          axisTick: { show: true }, //刻度点数轴
+          splitLine: {
+            show: false,
+          },
+          data: echartDatas.xData.length!=0 ? echartDatas.xData : [],
+        },
+      ],
+      yAxis: [
+        {
+          //y轴的相关设置
+          type: 'value', //y轴数据类型为连续的数据
+          min: 0, //y轴上的刻度最小值
+          // splitNumber: 7,//y轴上的刻度段数
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: 'rgba(100, 99, 99,.5)',
+              type: 'dashed',
             },
-            data: ['12.1', '12.2', '12.3', '12.4', '12.5', '12.6', '12.7'],
           },
-        ],
-        yAxis: [
-          {
+          axisLine: {
             //y轴的相关设置
-            type: 'value', //y轴数据类型为连续的数据
-            min: 0, //y轴上的刻度最小值
-            // splitNumber: 7,//y轴上的刻度段数
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: 'rgba(100, 99, 99,.5)',
-                type: 'dashed',
-              },
-            },
-            axisLine: {
-              //y轴的相关设置
-              show: false,
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            margin: 20,
+            textStyle: {
+              color: '#b3b8cc',
             },
-            axisLabel: {
-              show: true,
-              margin: 20,
-              textStyle: {
-                color: '#b3b8cc',
-              },
+          },
+          axisTick: { show: true }, //刻度点数轴
+        },
+      ],
+      series: [
+        {
+          name:echartDatas.legendName.length!=0 ? echartDatas.legendName[0] : '',
+          type: 'line', //统计图类型为折线图
+          smooth: false, //是否平滑曲线显示
+          symbolSize: 0, //数据点的大小,[0,0]//b表示宽度和高度
+          lineStyle: {
+            //线条的相关设置
+            normal: {
+              color: '#1faef0', // 线条颜色
             },
-            axisTick: { show: true }, //刻度点数轴
           },
-        ],
-        series: [
-          {
-            name: '',
-            type: 'line', //统计图类型为折线图
-            smooth: false, //是否平滑曲线显示
-            symbolSize: 0, //数据点的大小,[0,0]//b表示宽度和高度
-            lineStyle: {
-              //线条的相关设置
-              normal: {
-                color: '#3deaff', // 线条颜色
-              },
+          itemStyle: {
+            color: "#1faef0",
+            borderColor: "#1faef0",
+            borderWidth: 1
+
+          },
+          areaStyle: {
+            //区域填充样式
+            normal: {
+              //线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。
+              color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  { offset: 0, color: 'rgba(31, 174, 240, 0.7)' },
+                  { offset: 0.7, color: 'rgba(31, 174, 240, 0)' },
+                ],
+                false,
+              ),
+
+              shadowColor: 'rgba(31, 174, 240, 0.6)', //阴影颜色
+              shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
             },
-            areaStyle: {
-              //区域填充样式
-              normal: {
-                //线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。
-                color: new echarts.graphic.LinearGradient(
-                  0,
-                  0,
-                  0,
-                  1,
-                  [
-                    { offset: 0, color: 'rgba(61,234,255, 0.9)' },
-                    { offset: 0.7, color: 'rgba(61,234,255, 0)' },
-                  ],
-                  false,
-                ),
-
-                shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
-                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
-              },
+          },
+          data: echartDatas.yData.length!=0 ? echartDatas.yData : [],
+        },
+        {
+          name: echartDatas.legendName.length>1 ? echartDatas.legendName[1] : '',
+          type: 'line', //统计图类型为折线图
+          smooth: false, //是否平滑曲线显示
+          symbolSize: 0, //数据点的大小,[0,0]//b表示宽度和高度
+          lineStyle: {
+            //线条的相关设置
+            normal: {
+              color: '#1ef49f', // 线条颜色
             },
-            data: [90, 105, 84, 125, 110, 92, 98],
           },
-        ],
-      };
-      myChart.setOption(option);
-      window.onresize = function () {
-        myChart.resize();
-      };
-    });
-  }
+          itemStyle: {
+            color: "#1ef49f",
+            borderColor: "#1ef49f",
+            borderWidth: 1
 
-  onMounted(() => {
-    getOption();
+          },
+          areaStyle: {
+            //区域填充样式
+            normal: {
+              //线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。
+              color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  { offset: 0, color: 'rgba(31, 237, 155, 0.7)' },
+                  { offset: 0.7, color: 'rgba(31, 237, 155, 0)' },
+                ],
+                false,
+              ),
+
+              shadowColor: 'rgba(31, 237, 155, 0.6)', //阴影颜色
+              shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+            },
+          },
+          data: echartDatas.yData1.length!=0 ? echartDatas.yData1 : [],
+        },
+      ],
+    };
+    myChart.setOption(option);
+    window.onresize = function () {
+      myChart.resize();
+    };
   });
+}
+
+watch(() => props.gridV, (newV, oldV) => {
+  console.log(newV, 'gird--------')
+  gridVs.top = newV.top
+  gridVs.left = newV.left
+  gridVs.right = newV.right
+  gridVs.bottom = newV.bottom
+}, { immediate: true, deep: true })
+
+watch(() => props.echartData, (newE, oldE) => {
+  console.log(newE, 'echartData---------')
+  echartDatas.xData = newE.xData
+  echartDatas.yData = newE.yData
+  echartDatas.yData1=newE.yData1
+  echartDatas.legendName=newE.legendName
+}, { immediate: true, deep: true })
+
+
+onMounted(() => {
+  getOption();
+});
 </script>
 
 <style lang="less" scoped>
-  .basicEchartLine {
-    position: relative;
+.basicEchartLine {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .echart-box {
     width: 100%;
     height: 100%;
-
-    .echart-box {
-      width: 100%;
-      height: 100%;
-    }
   }
+}
 </style>

+ 3 - 0
src/views/vent/common/danelBd.vue

@@ -292,6 +292,8 @@ watch(()=>props.moduleSelect,(newS,oldS)=>{
   text-align: center !important;
 }
 
+
+
 :deep(.vMonitor-picker-separator) {
   color: #a1dff8 !important;
 }
@@ -316,4 +318,5 @@ watch(()=>props.moduleSelect,(newS,oldS)=>{
 :deep(.vMonitor-switch-handle::before)  {
   background-color: rgb(33 179 247) !important;
 }
+
 </style>

+ 2 - 2
src/views/vent/dust/dustAtomizing/index.vue

@@ -312,8 +312,8 @@ const treeData = reactive([
   align-items: center;
   justify-content: space-between;
   width: calc(100% - 20px);
-  height: calc(100vh - 97px);
-  margin: 65px 10px 15px;
+  height: calc(100vh - 82px);
+  margin: 50px 10px 15px;
   background: #282828;
 
   .dustAto-left-box {

+ 3 - 10
src/views/vent/dust/dustHome/components/multipleDust.vue

@@ -124,10 +124,6 @@ function getOption() {
                     lineStyle: {
                         normal: {
                             color: "#1fb3f7",
-                            shadowColor: 'rgba(0, 0, 0, .3)',
-                            shadowBlur: 0,
-                            shadowOffsetY: 5,
-                            shadowOffsetX: 5,
                         },
                     },
                     label: {
@@ -139,12 +135,9 @@ function getOption() {
                     },
                     itemStyle: {
                         color: "#1fb3f7",
-                        borderColor: "#fff",
-                        borderWidth: 3,
-                        shadowColor: 'rgba(0, 0, 0, .3)',
-                        shadowBlur: 0,
-                        shadowOffsetY: 2,
-                        shadowOffsetX: 2,
+                        borderColor: "#1fb3f7",
+                        borderWidth: 1,
+                       
                     },
                     tooltip: {
                         show: false

+ 4 - 2
src/views/vent/dust/dustHome/index.vue

@@ -113,8 +113,8 @@ let moduleSelect = reactive([
 .dustHome {
   position: relative;
   width: calc(100% - 20px);
-  height: calc(100vh - 97px);
-  margin: 65px 10px 15px;
+  height: calc(100vh - 82px);
+  margin: 50px 10px 15px;
 
   .moduleArea {
     width: 100%;
@@ -126,9 +126,11 @@ let moduleSelect = reactive([
     position: absolute;
     top: 0;
     left: 0;
+    box-sizing: border-box;
     justify-content: space-between;
     width: 100%;
     height: 100%;
+    padding-top: 15px;
 
     .left-area {
       display: flex;

+ 17 - 3
src/views/vent/dust/dustWarnAnalysis/index.vue

@@ -11,7 +11,7 @@
         <basicCard1 :cardContentList1="cardContentList1"></basicCard1>
       </div>
       <div class="warn-bot-box">
-        <basicEchartLine></basicEchartLine>
+        <basicEchartLine :gridV="gridV" :echartData="echartData"></basicEchartLine>
       </div>
     </div>
 
@@ -71,6 +71,20 @@ const treeData = reactive([
     { name: "束管监测系统", value: "732", id: '3-3', pid: '3' },
     { name: "束管监测系统", value: "852", id: '3-3-1', pid: '3-3' },
 ])
+
+let gridV=reactive({
+  top: '8%',
+        left: '3%',
+        right: '3%',
+        bottom: '10%',
+})
+
+let echartData=reactive({
+    xData:['12.1', '12.2', '12.3', '12.4', '12.5', '12.6', '12.7'],
+    yData:[90, 105, 84, 125, 110, 92, 98],
+    yData1:[140, 165, 134, 175, 160, 152, 158],
+    legendName:['实时值','预测值']
+})
 </script>
 
 <style lang="less" scoped>
@@ -80,8 +94,8 @@ const treeData = reactive([
   align-items: center;
   justify-content: space-between;
   width: calc(100% - 20px);
-  height: calc(100vh - 97px);
-  margin: 65px 10px 15px;
+  height: calc(100vh - 82px);
+  margin: 50px 10px 15px;
   background: #282828;
 
   .dustWarn-left-box {

+ 2 - 2
src/views/vent/dust/dustWarnAnalysisList/index.vue

@@ -312,8 +312,8 @@ const treeData = reactive([
   align-items: center;
   justify-content: space-between;
   width: calc(100% - 20px);
-  height: calc(100vh - 97px);
-  margin: 65px 10px 15px;
+  height: calc(100vh - 82px);
+  margin: 50px 10px 15px;
   background: #282828;
 
   .dustAto-left-box {

+ 17 - 3
src/views/vent/fire/compositeWarn/index.vue

@@ -8,7 +8,7 @@
         <basicCard3 :card3List="card3List"></basicCard3>
       </div>
       <div class="composite-bot-box">
-        <basicEchartLine></basicEchartLine>
+        <basicEchartLine :gridV="gridV" :echartData="echartData"></basicEchartLine>
       </div>
     </div>
   </div>
@@ -47,6 +47,20 @@ const treeData = reactive([
   { name: "束管监测系统", value: "852", id: '3-3-1', pid: '3-3' },
 ])
 
+let gridV=reactive({
+  top: '8%',
+        left: '3%',
+        right: '3%',
+        bottom: '10%',
+})
+
+let echartData=reactive({
+    xData:['12.1', '12.2', '12.3', '12.4', '12.5', '12.6', '12.7'],
+    yData:[90, 105, 84, 125, 110, 92, 98],
+    yData1:[140, 165, 134, 175, 160, 152, 158],
+    legendName:['实时值','预测值']
+})
+
 </script>
 
 <style lang="less" scoped>
@@ -56,8 +70,8 @@ const treeData = reactive([
   align-items: center;
   justify-content: space-between;
   width: calc(100% - 20px);
-  height: calc(100vh - 97px);
-  margin: 65px 10px 15px;
+  height: calc(100vh - 82px);
+  margin: 50px 10px 15px;
   background: #282828;
 
   .composite-left-box {

+ 2 - 2
src/views/vent/fire/fireAtomizing/index.vue

@@ -312,8 +312,8 @@ const treeData = reactive([
   align-items: center;
   justify-content: space-between;
   width: calc(100% - 20px);
-  height: calc(100vh - 97px);
-  margin: 65px 10px 15px;
+  height: calc(100vh - 82px);
+  margin: 50px 10px 15px;
   background: #282828;
 
   .dustAto-left-box {

+ 2 - 2
src/views/vent/fire/fireDistributionPoint/index.vue

@@ -71,8 +71,8 @@ const treeData = reactive([
   align-items: center;
   justify-content: space-between;
   width: calc(100% - 20px);
-  height: calc(100vh - 97px);
-  margin: 65px 10px 15px;
+  height: calc(100vh - 82px);
+  margin: 50px 10px 15px;
   background: #282828;
 
   .fireDis-left-box {

+ 17 - 3
src/views/vent/fire/fireGoaf/index.vue

@@ -8,7 +8,7 @@
         <basicCard3 :card3List="card3List"></basicCard3>
       </div>
       <div class="composite-bot-box">
-        <basicEchartLine></basicEchartLine>
+        <basicEchartLine :gridV="gridV" :echartData="echartData"></basicEchartLine>
       </div>
     </div>
   </div>
@@ -47,6 +47,20 @@ const treeData = reactive([
   { name: "束管监测系统", value: "852", id: '3-3-1', pid: '3-3' },
 ])
 
+let gridV=reactive({
+  top: '8%',
+        left: '3%',
+        right: '3%',
+        bottom: '10%',
+})
+
+let echartData=reactive({
+    xData:['12.1', '12.2', '12.3', '12.4', '12.5', '12.6', '12.7'],
+    yData:[90, 105, 84, 125, 110, 92, 98],
+    yData1:[140, 165, 134, 175, 160, 152, 158],
+    legendName:['实时值','预测值']
+})
+
 </script>
 
 <style lang="less" scoped>
@@ -56,8 +70,8 @@ const treeData = reactive([
   align-items: center;
   justify-content: space-between;
   width: calc(100% - 20px);
-  height: calc(100vh - 97px);
-  margin: 65px 10px 15px;
+  height: calc(100vh - 82px);
+  margin: 50px 10px 15px;
   background: #282828;
 
   .composite-left-box {

+ 2 - 2
src/views/vent/fire/fireGoafList/index.vue

@@ -312,8 +312,8 @@ const treeData = reactive([
   align-items: center;
   justify-content: space-between;
   width: calc(100% - 20px);
-  height: calc(100vh - 97px);
-  margin: 65px 10px 15px;
+  height: calc(100vh - 82px);
+  margin: 50px 10px 15px;
   background: #282828;
 
   .dustAto-left-box {

+ 4 - 2
src/views/vent/fire/fireHome/index.vue

@@ -99,8 +99,8 @@ let moduleSelect = reactive([
 .fireHome {
   position: relative;
   width: calc(100% - 20px);
-  height: calc(100vh - 97px);
-  margin: 65px 10px 15px;
+  height: calc(100vh - 82px);
+  margin: 50px 10px 15px;
 
   .moduleArea {
     width: 100%;
@@ -112,9 +112,11 @@ let moduleSelect = reactive([
     position: absolute;
     top: 0;
     left: 0;
+    box-sizing: border-box;
     justify-content: space-between;
     width: 100%;
     height: 100%;
+    padding-top: 15px;
 
     .left-area {
       display: flex;

+ 17 - 3
src/views/vent/fire/fireMonitor/index.vue

@@ -8,7 +8,7 @@
         <basicCard2 :cardContentList2="cardContentList2"></basicCard2>
       </div>
       <div class="fire-bot-box">
-        <basicEchartLine></basicEchartLine>
+        <basicEchartLine :gridV="gridV" :echartData="echartData"></basicEchartLine>
       </div>
     </div>
 
@@ -43,6 +43,20 @@ const treeData = reactive([
   { name: "束管监测系统", value: "852", id: '3-3-1', pid: '3-3' },
 ])
 
+let gridV=reactive({
+  top: '8%',
+        left: '3%',
+        right: '3%',
+        bottom: '10%',
+})
+
+let echartData=reactive({
+    xData:['12.1', '12.2', '12.3', '12.4', '12.5', '12.6', '12.7'],
+    yData:[90, 105, 84, 125, 110, 92, 98],
+    yData1:[140, 165, 134, 175, 160, 152, 158],
+    legendName:['实时值','预测值']
+})
+
 
 
 </script>
@@ -54,8 +68,8 @@ const treeData = reactive([
   align-items: center;
   justify-content: space-between;
   width: calc(100% - 20px);
-  height: calc(100vh - 97px);
-  margin: 65px 10px 15px;
+  height: calc(100vh - 82px);
+  margin: 50px 10px 15px;
   background: #282828;
 
   .fireMon-left-box {

+ 17 - 3
src/views/vent/fire/wokeFace/index.vue

@@ -11,7 +11,7 @@
         <basicWorkBtn :workBtnList="workBtnList" />
       </div>
       <div class="center-box">
-        <basicEchartLine />
+        <basicEchartLine :gridV="gridV" :echartData="echartData"/>
       </div>
       <div class="bot-box">
         <div class="bot-box-card" v-for="(item, index) in botCardList" :key="index">
@@ -85,6 +85,20 @@ const treeData = reactive([
   { name: "束管监测系统", value: "732", id: '3-3', pid: '3' },
   { name: "束管监测系统", value: "852", id: '3-3-1', pid: '3-3' },
 ])
+
+let gridV=reactive({
+  top: '15%',
+        left: '3%',
+        right: '3%',
+        bottom: '10%',
+})
+
+let echartData=reactive({
+    xData:['12.1', '12.2', '12.3', '12.4', '12.5', '12.6', '12.7'],
+    yData:[90, 105, 84, 125, 110, 92, 98],
+    yData1:[140, 165, 134, 175, 160, 152, 158],
+    legendName:['实时值','预测值']
+})
 </script>
 
 <style lang="less" scoped>
@@ -94,8 +108,8 @@ const treeData = reactive([
   align-items: center;
   justify-content: space-between;
   width: calc(100% - 20px);
-  height: calc(100vh - 97px);
-  margin: 65px 10px 15px;
+  height: calc(100vh - 82px);
+  margin: 50px 10px 15px;
   background: #282828;
 
   .workPlace-left-box {