diff --git a/psdc-ui/src/assets/images/中间水箱.png b/psdc-ui/src/assets/images/中间水箱.png
new file mode 100644
index 0000000..b82243b
Binary files /dev/null and b/psdc-ui/src/assets/images/中间水箱.png differ
diff --git a/psdc-ui/src/assets/images/断路器.png b/psdc-ui/src/assets/images/断路器.png
new file mode 100644
index 0000000..27b1358
Binary files /dev/null and b/psdc-ui/src/assets/images/断路器.png differ
diff --git a/psdc-ui/src/views/control/manual/index.vue b/psdc-ui/src/views/control/manual/index.vue
index 9288896..300b992 100644
--- a/psdc-ui/src/views/control/manual/index.vue
+++ b/psdc-ui/src/views/control/manual/index.vue
@@ -102,7 +102,7 @@
 
 <script setup name="Index">
 import { Download } from '@element-plus/icons-vue'  //element字体图标
-import { ref,reactive,onMounted } from 'vue'
+import { ref,reactive,onMounted  } from 'vue'
 import { ElMessageBox,ElMessage } from 'element-plus'
 import { getDevice,getControlLogList,getStrategyList,getStartAndStop,getSetTemperature,getSenceControl,getControlDeviceList } from '@/api/control/manual'
 
@@ -204,7 +204,7 @@ const drawerIshow = ref(false)
 const radio = ref()
 const celueList = ref([
   {
-    sceneName:'电磁锅炉供暖模式',
+    sceneName:'电磁锅炉供暖策略',
     flow:[
       {
         timestamp:'第一步',
@@ -227,7 +227,7 @@ const celueList = ref([
     ]
   },
   {
-    sceneName:'空气源热泵供暖模式',
+    sceneName:'空气源热泵供暖策略',
     flow:[
       {
         timestamp:'第一步',
@@ -247,7 +247,7 @@ const celueList = ref([
     ]
   },
   {
-    sceneName:'电磁锅炉水蓄热模式',
+    sceneName:'电磁锅炉水蓄热策略',
     flow:[
       {
         timestamp:'第一步',
@@ -272,7 +272,7 @@ const celueList = ref([
     ]
   },
   {
-    sceneName:'空气源热泵水蓄热模式',
+    sceneName:'空气源热泵水蓄热策略',
     flow:[
       {
         timestamp:'第一步',
@@ -297,7 +297,7 @@ const celueList = ref([
     ]
   },
   {
-    sceneName:'蓄热水箱暖气片供暖模式',
+    sceneName:'蓄热水箱暖气片供暖策略',
     flow:[
       {
         timestamp:'第一步',
@@ -306,6 +306,21 @@ const celueList = ref([
       }
     ]
   },
+  {
+    sceneName:'发热电缆供暖策略',
+    flow:[
+      {
+        timestamp:'第一步',
+        step:'开启发热电缆断路器，为发热电缆系统供电。',
+        hollow: false,
+      },
+      {
+        timestamp:'第二步',
+        step:'调节控制界面，进行发热电缆启停和温度设定。',
+        hollow: false,
+      }
+    ]
+  },
 ])
 function getStrategyListFun(){
   getStrategyList().then((res)=>{
diff --git a/psdc-ui/src/views/emonitor/db/index.vue b/psdc-ui/src/views/emonitor/db/index.vue
index d89710c..7f9a297 100644
--- a/psdc-ui/src/views/emonitor/db/index.vue
+++ b/psdc-ui/src/views/emonitor/db/index.vue
@@ -269,6 +269,7 @@ export default {
         myChart2.setOption({
           title: {},
           legend:{
+            top: 10,
             data:['当前功率'],
             textStyle: {
               color: "white" //标题的颜色
@@ -388,6 +389,7 @@ export default {
             borderColor: '#767da1',
           },
           legend:{
+            top: 10,
             data:['今日用电量'],
             textStyle: {
               color: "white" //标题的颜色
diff --git a/psdc-ui/src/views/emonitor/drgl/index.vue b/psdc-ui/src/views/emonitor/drgl/index.vue
index f9854b4..d7cb956 100644
--- a/psdc-ui/src/views/emonitor/drgl/index.vue
+++ b/psdc-ui/src/views/emonitor/drgl/index.vue
@@ -44,7 +44,7 @@
       </div>
     </div>
 
-    <div class="bottom">
+    <div class="middle">
 <!--      <div class="bottom1">-->
 <!--        <div class="bottom1-1">-->
 <!--          日用电量-->
@@ -57,18 +57,31 @@
 <!--        </div>-->
 <!--        <div id="myEcharts2" style="width: 100%; height: 86.7%"></div>-->
 <!--      </div>-->
-      <div class="bottom1">
-        <div class="bottom1-1">
+      <div class="middle1">
+        <div class="title">
           当前功率
         </div>
-        <div id="myEcharts3" style="width: 100%; height: 86.7%"></div>
+        <div id="myEcharts1" style="width: 100%; height: 88.6%"></div>
       </div>
-      <div class="bottom1">
-        <div class="bottom1-1">
-          当前温度
+      <div class="middle2">
+        <div class="title">
+          当前功率
         </div>
-        <div id="myEcharts4" style="width: 100%; height: 86.7%"></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 class="bottom">
+      <div class="title">
+        当前温度
+      </div>
+      <div id="myEcharts4" style="width: 100%; height: 86.7%"></div>
     </div>
   </div>
 </template>
@@ -232,10 +245,77 @@ export default {
     })
     //需要获取到element,所以是onMounted的Hook
     onMounted(() => {
+      getPowerPie()
       getSbFun()
       getDcglFun()
       getDrglFun()
     });
+
+    //渲染电磁锅炉当前功率饼图
+    function getPowerPie(){
+      let myChart1 = echarts.getInstanceByDom(document.getElementById("myEcharts1"));
+      if (myChart1){
+        myChart1.dispose()
+      }
+      myChart1 = echarts.init(document.getElementById("myEcharts1"));
+      myChart1.setOption({
+        series: [
+          {
+            type: 'gauge',
+            axisLine: {
+              lineStyle: {
+                width: 10,
+                color: [
+                  [0.3, '#67e0e3'],
+                  [0.7, '#37a2da'],
+                  [1, '#fd666d']
+                ]
+              }
+            },
+            pointer: {
+              itemStyle: {
+                color: 'inherit'
+              }
+            },
+            // axisTick: {
+            //   distance: -30,
+            //   length: 8,
+            //   lineStyle: {
+            //     color: '#fff',
+            //     width: 2
+            //   }
+            // },
+            // splitLine: {
+            //   distance: -30,
+            //   length: 30,
+            //   lineStyle: {
+            //     color: '#fff',
+            //     width: 4
+            //   }
+            // },
+            axisLabel: {
+              color: 'inherit',
+              distance: 10,
+              fontSize: 10
+            },
+            detail: {
+              valueAnimation: true,
+              formatter: '{value} kW',
+              color: 'inherit'
+            },
+            data: [
+              {
+                value: data.totp
+              }
+            ]
+          }
+        ]
+      });
+      window.onresize = function () {//自适应大小
+        myChart1.resize();
+      };
+    }
+
     //渲染电磁锅炉数据
     function getDcglFun(){
       getDcgl(data.deviceId).then((res)=>{
@@ -475,6 +555,7 @@ export default {
             borderColor: '#767da1',
           },
           legend: {
+            top: 10,
             data: ['进水', '出水'],
             textStyle:{
               color:'#BEC3DA'
@@ -576,6 +657,7 @@ export default {
         myChart3.setOption({
           title: {},
           legend:{
+            top: 10,
             data:['当前功率'],
             textStyle: {
               color: "white" //标题的颜色
@@ -712,23 +794,40 @@ export default {
   align-items: center;
 }
 
-.bottom{
+.middle{
   width: 100%;
-  height: 640px;
+  //height: 640px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
+  margin-bottom: 12px;
 }
-.bottom1{
-  width: 49.6%;
-  height: 300px;
+.middle1{
+  width: 24.4%;
+  height: 350px;
+  background-color: #2F3D8A;
+}
+.middle2{
+  width: 74.8%;
+  height: 350px;
+  background-color: #2F3D8A;
+}
+.middle1-1{
+  width: 100%;
+  height: 13.3%;
+  background-color: #374590;
+  padding-top: 10px;
+  padding-left: 10px;
+}
+.bottom{
+  width: 100%;
+  height: 305px;
   background-color: #2F3D8A;
-  margin-bottom: 12px;
 }
 p{
   margin-bottom: 10px;
 }
-.bottom1-1{
+.title{
   width: 100%;
   height: 13.3%;
   background-color: #374590;
diff --git a/psdc-ui/src/views/emonitor/frdl/index.vue b/psdc-ui/src/views/emonitor/frdl/index.vue
index 9dcc56a..a115b5d 100644
--- a/psdc-ui/src/views/emonitor/frdl/index.vue
+++ b/psdc-ui/src/views/emonitor/frdl/index.vue
@@ -40,31 +40,44 @@
       </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 class="middle">
+      <!--      <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="middle1">
+        <div class="title">
           当前功率
         </div>
-        <div id="myEcharts3" style="width: 100%; height: 86.7%"></div>
+        <div id="myEcharts1" style="width: 100%; height: 88.6%"></div>
       </div>
-      <div class="bottom1">
-        <div class="bottom1-1">
-          当前温度
+      <div class="middle2">
+        <div class="title">
+          当前功率
         </div>
-        <div id="myEcharts4" style="width: 100%; height: 86.7%"></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 class="bottom">
+      <div class="title">
+        当前温度
+      </div>
+      <div id="myEcharts4" style="width: 100%; height: 86.7%"></div>
     </div>
   </div>
 </template>
@@ -227,11 +240,77 @@ export default {
       deviceId: 4,
     })
     onMounted(() => {//需要获取到element,所以是onMounted的Hook
+      getPowerPie()
       getSbFun()
       getFrldFun()
       getFrdlFun()
     })
 
+    //渲染发热电缆当前功率饼图
+    function getPowerPie(){
+      let myChart1 = echarts.getInstanceByDom(document.getElementById("myEcharts1"));
+      if (myChart1){
+        myChart1.dispose()
+      }
+      myChart1 = echarts.init(document.getElementById("myEcharts1"));
+      myChart1.setOption({
+        series: [
+          {
+            type: 'gauge',
+            axisLine: {
+              lineStyle: {
+                width: 10,
+                color: [
+                  [0.3, '#67e0e3'],
+                  [0.7, '#37a2da'],
+                  [1, '#fd666d']
+                ]
+              }
+            },
+            pointer: {
+              itemStyle: {
+                color: 'inherit'
+              }
+            },
+            // axisTick: {
+            //   distance: -30,
+            //   length: 8,
+            //   lineStyle: {
+            //     color: '#fff',
+            //     width: 2
+            //   }
+            // },
+            // splitLine: {
+            //   distance: -30,
+            //   length: 30,
+            //   lineStyle: {
+            //     color: '#fff',
+            //     width: 4
+            //   }
+            // },
+            axisLabel: {
+              color: 'inherit',
+              distance: 10,
+              fontSize: 10
+            },
+            detail: {
+              valueAnimation: true,
+              formatter: '{value} kW',
+              color: 'inherit'
+            },
+            data: [
+              {
+                value: data.totp
+              }
+            ]
+          }
+        ]
+      });
+      window.onresize = function () {//自适应大小
+        myChart1.resize();
+      };
+    }
+
     //渲染发热电缆数据
     function getFrldFun(){
       getFrld(data.deviceId).then((res) => {
@@ -469,6 +548,7 @@ export default {
             borderColor: '#767da1',
           },
           legend: {
+            top: 10,
             data: ['当前温度'],
             textStyle:{
               color:'#F5901A'
@@ -562,6 +642,7 @@ export default {
         myChart3.setOption({
           title: {},
           legend:{
+            top: 10,
             data:['当前功率'],
             textStyle: {
               color: "white" //标题的颜色
@@ -698,25 +779,42 @@ export default {
   align-items: center;
 }
 
-.bottom{
+.middle{
   width: 100%;
-  height: 640px;
+  //height: 640px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
+  margin-bottom: 12px;
 }
-.bottom1{
-  width: 49.6%;
-  height: 300px;
+.middle1{
+  width: 24.4%;
+  height: 350px;
+  background-color: #2F3D8A;
+}
+.middle2{
+  width: 74.8%;
+  height: 350px;
+  background-color: #2F3D8A;
+}
+.middle1-1{
+  width: 100%;
+  height: 13.3%;
+  background-color: #374590;
+  padding-top: 10px;
+  padding-left: 10px;
+}
+.bottom{
+  width: 100%;
+  height: 305px;
   background-color: #2F3D8A;
-  margin-bottom: 12px;
 }
 p{
   margin-bottom: 10px;
 }
-.bottom1-1{
+.title{
   width: 100%;
-  height: 40px;
+  height: 13.3%;
   background-color: #374590;
   padding-top: 10px;
   padding-left: 10px;
diff --git a/psdc-ui/src/views/emonitor/kqyrb/index.vue b/psdc-ui/src/views/emonitor/kqyrb/index.vue
index 656dde2..d8dff9f 100644
--- a/psdc-ui/src/views/emonitor/kqyrb/index.vue
+++ b/psdc-ui/src/views/emonitor/kqyrb/index.vue
@@ -44,31 +44,44 @@
       </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 class="middle">
+      <!--      <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="middle1">
+        <div class="title">
           当前功率
         </div>
-        <div id="myEcharts3" style="width: 100%; height: 86.7%"></div>
+        <div id="myEcharts1" style="width: 100%; height: 88.6%"></div>
       </div>
-      <div class="bottom1">
-        <div class="bottom1-1">
-          当前温度
+      <div class="middle2">
+        <div class="title">
+          当前功率
         </div>
-        <div id="myEcharts4" style="width: 100%; height: 86.7%"></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 class="bottom">
+      <div class="title">
+        当前温度
+      </div>
+      <div id="myEcharts4" style="width: 100%; height: 86.7%"></div>
     </div>
   </div>
 </template>
@@ -231,11 +244,77 @@ export default {
       deviceId: 3,
     })
     onMounted(() => {//需要获取到element,所以是onMounted的Hook
+      getPowerPie()
       getSbFun()
       getKqyrbFun()
       getKqrybFun()
     });
 
+    //渲染空气源热泵当前功率饼图
+    function getPowerPie(){
+      let myChart1 = echarts.getInstanceByDom(document.getElementById("myEcharts1"));
+      if (myChart1){
+        myChart1.dispose()
+      }
+      myChart1 = echarts.init(document.getElementById("myEcharts1"));
+      myChart1.setOption({
+        series: [
+          {
+            type: 'gauge',
+            axisLine: {
+              lineStyle: {
+                width: 10,
+                color: [
+                  [0.3, '#67e0e3'],
+                  [0.7, '#37a2da'],
+                  [1, '#fd666d']
+                ]
+              }
+            },
+            pointer: {
+              itemStyle: {
+                color: 'inherit'
+              }
+            },
+            // axisTick: {
+            //   distance: -30,
+            //   length: 8,
+            //   lineStyle: {
+            //     color: '#fff',
+            //     width: 2
+            //   }
+            // },
+            // splitLine: {
+            //   distance: -30,
+            //   length: 30,
+            //   lineStyle: {
+            //     color: '#fff',
+            //     width: 4
+            //   }
+            // },
+            axisLabel: {
+              color: 'inherit',
+              distance: 10,
+              fontSize: 10
+            },
+            detail: {
+              valueAnimation: true,
+              formatter: '{value} kW',
+              color: 'inherit'
+            },
+            data: [
+              {
+                value: data.totp
+              }
+            ]
+          }
+        ]
+      });
+      window.onresize = function () {//自适应大小
+        myChart1.resize();
+      };
+    }
+
     //渲染空气源热泵数据
     function getKqyrbFun(){
       getKqyrb(data.deviceId).then((res)=>{
@@ -474,6 +553,7 @@ export default {
             borderColor: '#767da1',
           },
           legend: {
+            top: 10,
             data: ['进水', '出水'],
             textStyle:{
               color:'#BEC3DA'
@@ -574,6 +654,7 @@ export default {
         myChart3.setOption({
           title: {},
           legend:{
+            top: 10,
             data:['当前功率'],
             textStyle: {
               color: "white" //标题的颜色
@@ -710,25 +791,42 @@ export default {
   align-items: center;
 }
 
-.bottom{
+.middle{
   width: 100%;
-  height: 640px;
+  //height: 640px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
+  margin-bottom: 12px;
 }
-.bottom1{
-  width: 49.6%;
-  height: 300px;
+.middle1{
+  width: 24.4%;
+  height: 350px;
+  background-color: #2F3D8A;
+}
+.middle2{
+  width: 74.8%;
+  height: 350px;
+  background-color: #2F3D8A;
+}
+.middle1-1{
+  width: 100%;
+  height: 13.3%;
+  background-color: #374590;
+  padding-top: 10px;
+  padding-left: 10px;
+}
+.bottom{
+  width: 100%;
+  height: 305px;
   background-color: #2F3D8A;
-  margin-bottom: 12px;
 }
 p{
   margin-bottom: 10px;
 }
-.bottom1-1{
+.title{
   width: 100%;
-  height: 40px;
+  height: 13.3%;
   background-color: #374590;
   padding-top: 10px;
   padding-left: 10px;
diff --git a/psdc-ui/src/views/emonitor/wdcgq/index.vue b/psdc-ui/src/views/emonitor/wdcgq/index.vue
index a3f1bfe..665b856 100644
--- a/psdc-ui/src/views/emonitor/wdcgq/index.vue
+++ b/psdc-ui/src/views/emonitor/wdcgq/index.vue
@@ -142,6 +142,7 @@ export default {
             borderColor: '#767da1',
           },
           legend: {
+            top: 10,
             selectedMode: 'single',
             textStyle:{
               color:'#BEC3DA'
diff --git a/psdc-ui/src/views/emonitor/xrgl/index.vue b/psdc-ui/src/views/emonitor/xrgl/index.vue
index d98c1cb..6e95e9a 100644
--- a/psdc-ui/src/views/emonitor/xrgl/index.vue
+++ b/psdc-ui/src/views/emonitor/xrgl/index.vue
@@ -44,31 +44,44 @@
       </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 class="middle">
+      <!--      <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="middle1">
+        <div class="title">
           当前功率
         </div>
-        <div id="myEcharts3" style="width: 100%; height: 86.7%"></div>
+        <div id="myEcharts1" style="width: 100%; height: 88.6%"></div>
       </div>
-      <div class="bottom1">
-        <div class="bottom1-1">
-          当前温度
+      <div class="middle2">
+        <div class="title">
+          当前功率
         </div>
-        <div id="myEcharts4" style="width: 100%; height: 86.7%"></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 class="bottom">
+      <div class="title">
+        当前温度
+      </div>
+      <div id="myEcharts4" style="width: 100%; height: 86.7%"></div>
     </div>
   </div>
 </template>
@@ -233,11 +246,77 @@ export default {
 
 
     onMounted(() => {//需要获取到element,所以是onMounted的Hook
+      getPowerPie()
       getSbFun()
       getXrglFun()
       getXcglFun()
     });
 
+    //渲染蓄热锅炉当前功率饼图
+    function getPowerPie(){
+      let myChart1 = echarts.getInstanceByDom(document.getElementById("myEcharts1"));
+      if (myChart1){
+        myChart1.dispose()
+      }
+      myChart1 = echarts.init(document.getElementById("myEcharts1"));
+      myChart1.setOption({
+        series: [
+          {
+            type: 'gauge',
+            axisLine: {
+              lineStyle: {
+                width: 10,
+                color: [
+                  [0.3, '#67e0e3'],
+                  [0.7, '#37a2da'],
+                  [1, '#fd666d']
+                ]
+              }
+            },
+            pointer: {
+              itemStyle: {
+                color: 'inherit'
+              }
+            },
+            // axisTick: {
+            //   distance: -30,
+            //   length: 8,
+            //   lineStyle: {
+            //     color: '#fff',
+            //     width: 2
+            //   }
+            // },
+            // splitLine: {
+            //   distance: -30,
+            //   length: 30,
+            //   lineStyle: {
+            //     color: '#fff',
+            //     width: 4
+            //   }
+            // },
+            axisLabel: {
+              color: 'inherit',
+              distance: 10,
+              fontSize: 10
+            },
+            detail: {
+              valueAnimation: true,
+              formatter: '{value} kW',
+              color: 'inherit'
+            },
+            data: [
+              {
+                value: data.totp
+              }
+            ]
+          }
+        ]
+      });
+      window.onresize = function () {//自适应大小
+        myChart1.resize();
+      };
+    }
+
     //渲染蓄热锅炉数据
     function getXrglFun(){
       getXrgl(data.deviceId).then((res)=>{
@@ -267,6 +346,7 @@ export default {
         myChart3.setOption({
           title: {},
           legend:{
+            top: 10,
             data:['当前功率'],
             textStyle: {
               color: "white" //标题的颜色
@@ -596,6 +676,7 @@ export default {
             borderColor: '#767da1',
           },
           legend: {
+            top: 10,
             data: ['进水', '出水'],
             textStyle:{
               color:'#BEC3DA'
@@ -712,25 +793,42 @@ export default {
   align-items: center;
 }
 
-.bottom{
+.middle{
   width: 100%;
-  height: 640px;
+  //height: 640px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
+  margin-bottom: 12px;
 }
-.bottom1{
-  width: 49.6%;
-  height: 300px;
+.middle1{
+  width: 24.4%;
+  height: 350px;
+  background-color: #2F3D8A;
+}
+.middle2{
+  width: 74.8%;
+  height: 350px;
+  background-color: #2F3D8A;
+}
+.middle1-1{
+  width: 100%;
+  height: 13.3%;
+  background-color: #374590;
+  padding-top: 10px;
+  padding-left: 10px;
+}
+.bottom{
+  width: 100%;
+  height: 305px;
   background-color: #2F3D8A;
-  margin-bottom: 12px;
 }
 p{
   margin-bottom: 10px;
 }
-.bottom1-1{
+.title{
   width: 100%;
-  height: 40px;
+  height: 13.3%;
   background-color: #374590;
   padding-top: 10px;
   padding-left: 10px;