Merge remote-tracking branch 'origin/main'

.env.production

@@ -5,7 +5,11 @@ VUE_APP_TITLE = 省级数智后勤运行监控中心
 ENV = 'production'
 
 # NewStyle/生产环境
+<<<<<<< HEAD
 # pd VUE_APP_BASE_API = '/zhhq_service_dp'
+=======
+# VUE_APP_BASE_API = '/zhhq_service_dp'
+>>>>>>> a2871f2 (暂存)
  VUE_APP_BASE_API = '/sxgw'
 # 请求、响应数据加密
 VUE_APP_AES_ENCRYPT_ENABLED = 'false'

package.json

@@ -5,11 +5,13 @@
   "author": "Tellsea",
   "license": "MIT",
   "scripts": {
-    "dev": "vue-cli-service serve",
-    "build:prod": "vue-cli-service build",
+    "dev": "SET NODE_OPTIONS=--openssl-legacy-provider &&vue-cli-service serve",
+    "build:prod": "SET NODE_OPTIONS=--openssl-legacy-provider &&vue-cli-service build",
     "build:stage": "vue-cli-service build --mode staging",
     "preview": "node build/index.js --preview",
-    "lint": "eslint --ext .js,.vue src"
+    "lint": "eslint --ext .js,.vue src",
+    "start": "node index.js",
+    "server": "nodemon index.js --ignore client"
   },
   "husky": {
     "hooks": {
@@ -57,6 +59,7 @@
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
+    "three": "^0.172.0",
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",

src/App.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-export default {
+export default  {
   name:  'App',
     metaInfo() {
         return {

src/views/screen/building/cameraData.vue

@@ -3,32 +3,174 @@
 <!--    <div class="title-area">摄像头接入情况</div>-->
     <div class="content-area">
       <div class="content-title">
-        <span class="title">安防设备数据概况</span>
+        <span class="title">近一月楼宇能耗信息</span>
       </div>
-      <div class="camera-cont">
-        <div class="camera-item" v-for="(item,index) in cameraDataList" :key="index">
-          <div class="camera-num">
-            <div class="title">{{ item.name }}</div>
-            <div class="num">{{ item.num }}</div>
-          </div>
-        </div>
-      </div>
-      <div class="content-title">
-        <span class="title">物业巡更概况（近6个月）</span>
-      </div>
-      <div class="camera-cont">
-        <div class="camera-other" v-for="(item,index) in cameraOtherList" :key="index">
-          <div class="num-info">
-            <div class="num">{{ item.num }}</div>
-            <div class="unit">{{ item.unit }}</div>
-          </div>
-          <img
-            src="@/assets/images/building_guarantee/img_4.png"
-            class="icon"
-          />
-          <div class="title">{{ item.name }}</div>
-        </div>
+      <div class="content">
+                <div class="total-cot">
+                    <div class="other-cont">
+                    <img
+                     src="@/assets/images/building_guarantee/img_1.png"
+                     class="icon"
+                   />
+                      <div class="other-info">
+                      <div class="desc">用水量</div>
+                      <div class="num-info">
+                      <div class="num">568371</div>
+                      <div class="unit">m³</div>
+                      </div>
+                     </div>
+                  </div>
+
+                  <div class="other-cou">
+                    <img
+                     src="@/assets/images/building_guarantee/img_1.png"
+                     class="icon"
+                   />
+                      <div class="other-info">
+                      <div class="desc">用气量</div>
+                      <div class="num-info">
+                      <div class="num">83</div>
+                      <div class="unit">m³</div>
+                      </div>
+                     </div>
+                  </div>
+                </div>
+
+            </div>
+      <div class="content-title1">
+        <span class="title">空气概况</span>
       </div>
+       <div class="leftNav">
+                <div
+              :class="['model1', 0 == curBodex ? 'cur' : '']"
+              @click="chooseBox(0, 'indoor')"
+            >
+              室内
+            </div>
+            <div
+              :class="['model1', 1 == curBodex ? 'cur' : '']"
+              @click="chooseBox(1, 'outdoor')"
+            >
+             室外
+            </div>
+            </div>
+                 <!-- 室内 -->
+                 <div class="rightList1" v-if="showBox === 'indoor'">
+                  <div class="left-list">
+                      <div class="left-info">
+
+                        <div class="airStation"> <img src="@/assets/images/service_new/airStation.png"></div>
+
+                      <div >
+                        <div class="temelper">温度</div>
+                        <div class="num">56<span class="unit">°C</span></div>
+                      </div>
+                    </div>
+                   </div>
+                   <div class="left-list">
+                      <div class="left-info">
+                      <div class="airStation">
+                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
+                      </div>
+                      <div >
+                        <div class="temelper">湿度</div>
+                        <div class="num">84<span class="unit">%RH</span></div>
+                      </div>
+                    </div>
+                   </div>
+                   <div class="left-list">
+                      <div class="left-info">
+                      <div class="airStation">
+                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
+                      </div>
+                      <div >
+                        <div class="temelper">二氧化碳</div>
+                        <div class="num">33<span class="unit">PPM</span></div>
+                      </div>
+                    </div>
+                   </div>
+                   <div class="left-list">
+                      <div class="left-info">
+                      <div class="airStation">
+                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
+                      </div>
+                      <div >
+                        <div class="temelper">PM2.5</div>
+                        <div class="num">38<span class="unit">ug/m³</span></div>
+                      </div>
+                    </div>
+                   </div>
+                   <div class="left-list">
+                      <div class="left-info">
+                      <div class="airStation">
+                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
+                      </div>
+                      <div >
+                        <div class="temelper">PM10</div>
+                        <div class="num">26<span class="unit">ug/m³</span></div>
+                      </div>
+                    </div>
+                   </div>
+                </div>
+                    <!-- 室外 -->
+              <div class="rightList1" v-else-if="showBox === 'outdoor'">
+                  <div class="left-list">
+                      <div class="left-info">
+
+                        <div class="airStation"> <img src="@/assets/images/service_new/airStation.png"></div>
+
+                      <div >
+                        <div class="temelper">温度</div>
+                        <div class="num">52<span class="unit">°C</span></div>
+                      </div>
+                    </div>
+                   </div>
+                   <div class="left-list">
+                      <div class="left-info">
+                      <div class="airStation">
+                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
+                      </div>
+                      <div >
+                        <div class="temelper">湿度</div>
+                        <div class="num">40<span class="unit">%RH</span></div>
+                      </div>
+                    </div>
+                   </div>
+                   <div class="left-list">
+                      <div class="left-info">
+                      <div class="airStation">
+                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
+                      </div>
+                      <div >
+                        <div class="temelper">二氧化碳</div>
+                        <div class="num">23<span class="unit">PPM</span></div>
+                      </div>
+                    </div>
+                   </div>
+                   <div class="left-list">
+                      <div class="left-info">
+                      <div class="airStation">
+                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
+                      </div>
+                      <div >
+                        <div class="temelper">PM2.5</div>
+                        <div class="num">64<span class="unit">ug/m³</span></div>
+                      </div>
+                    </div>
+                   </div>
+                   <div class="left-list">
+                      <div class="left-info">
+                      <div class="airStation">
+                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
+                      </div>
+                      <div >
+                        <div class="temelper">PM10</div>
+                        <div class="num">39<span class="unit">ug/m³</span></div>
+                      </div>
+                    </div>
+                   </div>
+                </div>
+
     </div>
   </div>
 </template>
@@ -54,6 +196,18 @@ export default {
   },
   data() {
     return {
+      curBodex:0,
+        showBox: "indoor",
+        Boxtabs: [
+        {
+          name: "室内",
+          tab: "indoor",
+        },
+        {
+          name: "室外",
+          tab: "outdoor",
+        },
+      ],
       cameraDataList: [
         {
           name: "设备总数量",
@@ -96,6 +250,11 @@ export default {
   beforeDestroy() {},
   mounted() {},
   methods: {
+     //切换菜单
+     chooseBox(index) {
+      this.curBodex = index;
+      this.showBox = this.Boxtabs[index].tab;
+    },
     //初始化
     handleData() {
       this.cameraDataList = [];
@@ -168,179 +327,195 @@ export default {
     }
   }
 
-  .data-list {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
+  .content-title1 {
+    margin-top: 15px;
     width: 100%;
-    margin-top: 17px;
-    .data-item {
+    height: 26px;
+    background: url("../../../assets/images/main/title_pro_long.png") no-repeat;
+    background-size: 100% 100%;
+    font-family: "PingFangSC";
+    font-size: 16px;
+    font-weight: bold;
+    color: #00ffff;
+    padding-left: 25px;
+    .title {
+      display: block;
+      position: relative;
+      top:-5px;
+    }
+  }
+
+  .leftNav{
+    display: flex;
+    margin: 15px 0px 0px 15px;
+    .model1 {
+          margin-right: 15px;
+          width: 82px;
+          height: 45px;
+          line-height: 30px;
+          text-align: center;
+          font-family: "PingFangSc";
+          font-size: 14px;
+          font-weight: bold;
+           background: url("../../../assets/images/main/choose_short_single.png") no-repeat;
+         // background-size: 95% 95%;
+          color: #CED6D6;
+          cursor: pointer;
+        }
+        .model:last-child {
+          margin-right: 0;
+        }
+        .cur {
+          color: #05FEFE;
+          //  background: url("../../../../assets/images/main/menu_chooe.png") no-repeat;
+        }
+  }
+      //左边菜单
+      .rightList1{
       display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      flex: 1;
-      border-right: 1px solid rgba(25, 252, 222, 0.2);
-      .data-detail {
-        display: flex;
-        flex-direction: row;
-        align-items: baseline;
-        color: #00ffff;
-        margin-top: 11px;
-        font-size: 12px;
-        .data {
-          font-family: "electronicFont";
-          font-size: 30px;
+      flex-wrap: wrap;
+      padding: 10px 0px 0px 0px;
+      justify-content: space-between;
+      .left-list{
+          display: flex;
+          align-items: center;
+          margin-bottom: 15px;
+          img{
+            display: block;
+            width:42px;
+            height:45px;
+            margin-right: 5px;
+          }
+          .left-info{
+            display: flex;
+            // padding-left:12px;
+            .airStation{
+              display: flex;
+              align-items: center;
+            }
+            .temelper{
+              font-size: 18px;
+              color:#FFFFFF;
+              font-family: "electronicFont";
+            }
+
+            .num{
+              font-size: 30px;
+              color:#00FFFF;
+              font-family: "electronicFont";
+              display: flex;
+              flex-direction: row;
+              align-items: baseline;
+              .unit{
+                font-size: 12px;
+                font-family: 'PingFangSC';
+              }
+            }
+            .name{
+              display: flex;
+              font-size: 14px;
+              color:#FFFFFF;
+              font-family: 'fashionZh';
+              padding-top:4px;
+            }
+
+          }
+          .podTan{
+              margin-right: 17px;
+            }
         }
-      }
-    }
-    .data-item:last-child {
-      border-right: none;
     }
+  .content {
+    margin-top: 20px;
 
-    .rate-area {
-      position: relative;
-      flex: 1;
-      img {
-        width: 198px;
-        height: 114px;
-      }
-      .rate {
+    .total-cot{
         display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        color: #fff;
-        .rate-data {
+        .other-cont {
+      display: flex;
+
+      .icon {
+        display: block;
+        width: 70px;
+        height: auto;
+      }
+      .other-info {
+        padding-left: 2px;
+
+        .desc {
+          font-size: 12px;
+          color: #ffffff;
+          font-weight: bold;
+        }
+        .num-info {
+          width: 100%;
+          padding-top: 2px;
           display: flex;
-          flex-direction: row;
-          align-items: baseline;
-          color: #ffba44;
-          .data {
+          align-items: center;
+
+          .num {
             font-size: 30px;
+            color: #00ffff;
+            font-weight: bold;
             font-family: "electronicFont";
           }
           .unit {
             font-size: 12px;
+            color: #00ffff;
+            font-weight: 500;
+            position: relative;
+            top: 4px;
+          }
+          .mar {
+            margin-left: 20px;
           }
-        }
-        .desc {
-          font-size: 12px;
-          width: 58px;
-          text-align: center;
         }
       }
     }
-  }
+    .other-cou{
+        display: flex;
+        margin-left:60px;
 
-  .data-chart {
-    margin-top: 12px !important;
-    margin-bottom: 10px !important;
+  .icon {
+    display: block;
+    width: 70px;
+    height: auto;
   }
+  .other-info {
+    padding-left: 2px;
 
-  .title-format {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    img {
-      width: 6px;
-      height: 24px;
-      margin-right: 6px;
-    }
-    .title-info {
-      display: flex;
-      flex-direction: column;
+    .desc {
       font-size: 12px;
       color: #ffffff;
-      .title-en {
-        font-size: 8px;
-        color: #ffffff;
-        opacity: 0.4;
-      }
-    }
-  }
-
-  .camera-cont {
-    width: 100%;
-    padding: 25px 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .camera-item {
-      width: 130px;
-      height: 91px;
-      background: url("../../../assets/images/building_guarantee/img_3.png")
-        no-repeat;
-      background-size: 100% 100%;
-
-      .camera-num {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        .title {
-          font-size: 12px;
-          color: #00ffff;
-          font-weight: 500;
-          position: relative;
-          top: 3px;
-        }
-        .num {
-          font-size: 30px;
-          color: #19fcde;
-          font-weight: bold;
-          font-family: "electronicFont";
-          padding-left: 4px;
-        }
-      }
+      font-weight: bold;
     }
-    .camera-other {
+    .num-info {
+      width: 100%;
+      padding-top: 2px;
       display: flex;
-      flex-direction: column;
-      justify-content: center;
       align-items: center;
 
-      .num-info {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        .num {
-          font-size: 30px;
-          color: #19fcde;
-          font-weight: bold;
-          font-family: "electronicFont";
-          padding-left: 4px;
-        }
-        .unit {
-          font-size: 12px;
-          color: #00ffff;
-          font-weight: 500;
-          position: relative;
-          top: 3px;
-        }
-      }
-      .icon {
-        display: block;
-        width: 101px;
-        height: auto;
-        margin-top: 10px;
+      .num {
+        font-size: 30px;
+        color: #00ffff;
+        font-weight: bold;
+        font-family: "electronicFont";
       }
-      .title {
+      .unit {
         font-size: 12px;
-        color: #ffffff;
-        margin-top: 6px;
-        font-weight: normal;
+        color: #00ffff;
+        font-weight: 500;
+        position: relative;
+        top: 4px;
+      }
+      .mar {
+        margin-left: 20px;
       }
     }
   }
+    }
+}
 
+  }
   ::-webkit-scrollbar {
     width: 3px;
     height: 3px;

src/views/screen/building/cameraDataDialog.vue

@@ -0,0 +1,1601 @@
+<template>
+    <div class="main-data dialog-area" @click.stop="preventDefault" @mouseleave="leaveFun">
+      <div class="dialog-title">
+        <img
+          src="@/assets/images/main/cont_title_bg.png"
+        />
+        <div class="title">办公能耗</div>
+      </div>
+      <div class="dialog-cont">
+        <div class="dialog-left">
+          <div class="dialog-list">
+            <div class="dialog-item wid100">
+              <div class="content-title">
+                <span class="title">近一月楼宇能耗信息</span>
+              </div>
+              <div class="content">
+                <div class="total-cot">
+                    <div class="other-cont">
+                    <img
+                     src="@/assets/images/building_guarantee/img_1.png"
+                     class="icon"
+                   />
+                      <div class="other-info">
+                      <div class="desc">用水量</div>
+                      <div class="num-info">
+                      <div class="num">568371</div>
+                      <div class="unit">m³</div>
+                      </div>
+                     </div>
+                  </div>
+
+                  <div class="other-cou">
+                    <img
+                     src="@/assets/images/building_guarantee/img_1.png"
+                     class="icon"
+                   />
+                      <div class="other-info">
+                      <div class="desc">用气量</div>
+                      <div class="num-info">
+                      <div class="num">83</div>
+                      <div class="unit">m³</div>
+                      </div>
+                     </div>
+                  </div>
+                </div>
+                 
+              </div>
+            </div>
+          </div>
+
+          <div class="dialog-list">
+            <div class="dialog-item wid100">
+              <div class="content-title">
+                <span class="title">空气概况</span>
+              </div>
+              <div class="leftNav">
+                <div
+              :class="['model1', 0 == curBodex ? 'cur' : '']"
+              @click="chooseBox(0, 'indoor')"
+            >
+              室内
+            </div>
+            <div
+              :class="['model1', 1 == curBodex ? 'cur' : '']"
+              @click="chooseBox(1, 'outdoor')"
+            >
+             室外
+            </div>
+               </div>
+               <!-- 室内 -->
+              <div class="rightList1" v-if="showBox === 'indoor'">
+                  <div class="left-list">                
+                      <div class="left-info">
+                   
+                        <div class="airStation"> <img src="@/assets/images/service_new/airStation.png"></div>
+                     
+                      <div >
+                        <div class="temelper">温度</div> 
+                        <div class="num">56<span class="unit">°C</span></div>
+                      </div>                
+                    </div>
+                   </div>
+                   <div class="left-list">                
+                      <div class="left-info">
+                      <div class="airStation">
+                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
+                      </div>
+                      <div >
+                        <div class="temelper">湿度</div> 
+                        <div class="num">84<span class="unit">%RH</span></div>
+                      </div>                
+                    </div>
+                   </div>
+                   <div class="left-list">                
+                      <div class="left-info">
+                      <div class="airStation">
+                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
+                      </div>
+                      <div >
+                        <div class="temelper">二氧化碳</div> 
+                        <div class="num">33<span class="unit">PPM</span></div>
+                      </div>                
+                    </div>
+                   </div>
+                   <div class="left-list">                
+                      <div class="left-info">
+                      <div class="airStation">
+                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
+                      </div>
+                      <div >
+                        <div class="temelper">PM2.5</div> 
+                        <div class="num">38<span class="unit">ug/m³</span></div>
+                      </div>                
+                    </div>
+                   </div>
+                   <div class="left-list">                
+                      <div class="left-info">
+                      <div class="airStation">
+                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
+                      </div>
+                      <div >
+                        <div class="temelper">PM10</div> 
+                        <div class="num">26<span class="unit">ug/m³</span></div>
+                      </div>                
+                    </div>
+                   </div>
+                </div>
+
+                    <!-- 室外 -->
+              <div class="rightList1" v-else-if="showBox === 'outdoor'">
+                  <div class="left-list">                
+                      <div class="left-info">
+                   
+                        <div class="airStation"> <img src="@/assets/images/service_new/airStation.png"></div>
+                     
+                      <div >
+                        <div class="temelper">温度</div> 
+                        <div class="num">52<span class="unit">°C</span></div>
+                      </div>                
+                    </div>
+                   </div>
+                   <div class="left-list">                
+                      <div class="left-info">
+                      <div class="airStation">
+                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
+                      </div>
+                      <div >
+                        <div class="temelper">湿度</div> 
+                        <div class="num">40<span class="unit">%RH</span></div>
+                      </div>                
+                    </div>
+                   </div>
+                   <div class="left-list">                
+                      <div class="left-info">
+                      <div class="airStation">
+                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
+                      </div>
+                      <div >
+                        <div class="temelper">二氧化碳</div> 
+                        <div class="num">23<span class="unit">PPM</span></div>
+                      </div>                
+                    </div>
+                   </div>
+                   <div class="left-list">                
+                      <div class="left-info">
+                      <div class="airStation">
+                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
+                      </div>
+                      <div >
+                        <div class="temelper">PM2.5</div> 
+                        <div class="num">64<span class="unit">ug/m³</span></div>
+                      </div>                
+                    </div>
+                   </div>
+                   <div class="left-list">                
+                      <div class="left-info">
+                      <div class="airStation">
+                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
+                      </div>
+                      <div >
+                        <div class="temelper">PM10</div> 
+                        <div class="num">39<span class="unit">ug/m³</span></div>
+                      </div>                
+                    </div>
+                   </div>
+                </div>
+
+            </div>
+          </div>
+  
+          <div class="dialog-list">
+            <div class="dialog-item wid100">
+              <div class="content-title">
+                <span class="title">定额指标</span>
+              </div>
+              <div class="content-Image">
+                  
+              </div>
+            </div>
+          </div>
+  
+          
+          <div class="dialog-list">
+            <div class="dialog-item wid100">
+              <div class="content-title">
+                <span class="title">用电分项 (月)</span>
+              </div>
+              <div class="charts-cont"> 
+                  <bar-chart
+                    :chart-data="electricityAreaBarData"
+                    :x-axis="electricityAreaBarAxis"
+                    :yAxis="electricityAreaBarYaxis"
+                    y-color="#FFF"
+                    l-color="#FFF"
+                    width="565px"
+                    height="160px"
+                  />
+                </div>  
+
+            </div>
+          </div> 
+  
+          <div class="dialog-list">
+            <div class="dialog-item wid100">
+              <div class="content-title">
+                <span class="title">绿电比例</span>
+              </div>
+              <div class="greenElectricity"> 
+                    
+              </div>
+            </div>
+          </div>
+
+          <div class="dialog-list">
+            <div class="dialog-item wid100">
+              <div class="content-title">
+                <span class="title">能耗设备</span>
+              </div>
+               <!-- 能耗设备 -->
+              <div class="rightList1">
+                  <div class="left-list">                
+                      <div class="left-info">
+                        <div class="airStation"> <img src="@/assets/images/service_new/airStation.png"></div>
+                      <div >
+                        <div class="temelper">空气质量监测仪</div> 
+                        <div class="num">46<span class="unit">台</span></div>
+                      </div>                
+                    </div>
+                   </div>
+                   <div class="left-list">                
+                      <div class="left-info">
+                      <div class="airStation">
+                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
+                      </div>
+                      <div >
+                        <div class="temelper">智能电表</div> 
+                        <div class="num">78<span class="unit">台</span></div>
+                      </div>                
+                    </div>
+                   </div>
+                   <div class="left-list">                
+                      <div class="left-info">
+                      <div class="airStation">
+                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
+                      </div>
+                      <div >
+                        <div class="temelper">液位传感器</div> 
+                        <div class="num">71<span class="unit">台</span></div>
+                      </div>                
+                    </div>
+                   </div>
+                </div>
+
+                <div class="rightList1">
+                  <div class="left-list">                
+                      <div class="left-info">
+                        <div class="airStation"> <img src="@/assets/images/service_new/airStation.png"></div>
+                      <div >
+                        <div class="temelper">电梯能量回收设备</div> 
+                        <div class="num">83<span class="unit">台</span></div>
+                      </div>                
+                    </div>
+                   </div>
+                   <div class="left-list">                
+                      <div class="left-info">
+                      <div class="airStation">
+                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
+                      </div>
+                      <div >
+                        <div class="temelper">水泵监测仪</div> 
+                        <div class="num">74<span class="unit">台</span></div>
+                      </div>                
+                    </div>
+                   </div>
+                   <div class="left-list">                
+                      <div class="left-info podTan">
+                      <div class="airStation">
+                        <div> <img src="@/assets/images/service_new/airStation.png"></div>
+                      </div>
+                      <div>
+                        <div class="temelper">智能水表</div> 
+                        <div class="num">12<span class="unit">台</span></div>
+                      </div>                
+                    </div>
+                   </div>
+                </div>
+
+            </div>
+          </div>
+        </div>
+  
+        <div class="dialog-right">
+          <div class="dialog-list">
+            <div class="dialog-item wid100">
+              <div class="content-title">
+                <span class="title">碳排放量月度变化趋势图</span>
+              </div>
+              <div class="content">
+                <line-chart
+                  :chart-data="lineData"
+                   :x-axis="lineAxis"
+                   :yAxis="lineYAxis"
+                     :legend="lineLegend"
+                    y-color="#FFF"
+                    l-color="#FFF"
+                    width="565px"
+                    height="240px"
+                  />
+              </div>
+
+            <div class="dialog-list1">
+            <div class="dialog-item wid100">
+              <div class="content-title">
+                <span class="title">年度累计综合能耗</span>
+              </div>
+              <div class="content">
+                <div class="total-cot1">
+                    <div class="other-cont">
+                    <img
+                     src="@/assets/images/building_guarantee/img_1.png"
+                     class="icon"
+                   />
+                      <div class="other-info">
+                      <div class="desc">年度累计综合能耗</div>
+                      <div class="num-info">
+                      <div class="num">838230</div>
+                      <div class="unit">万吨</div>
+                      </div>
+                     </div>
+                  </div>
+
+                  <div class="other-cou1">
+                      <div class="other-info">
+                      <div class="num-info">
+                        <div class="unit">同比减少</div>
+                      <div class="num">41</div>
+                      <div class="unit">万吨</div>
+                      </div>
+                     </div>
+                  </div>
+                </div>
+                <line-chart
+                  :chart-data="lineData"
+                   :x-axis="lineAxis"
+                   :yAxis="lineYAxis"
+                     :legend="lineLegend"
+                    y-color="#FFF"
+                    l-color="#FFF"
+                    width="565px"
+                    height="240px"
+                  />
+              </div>
+            </div>
+          </div>
+          
+          <div class="dialog-list1">
+            <div class="dialog-item wid100">
+              <div class="content-title">
+                <span class="title">年度累计电耗</span>
+              </div>
+              <div class="content">
+                <div class="total-cot1">
+                    <div class="other-cont">
+                    <img
+                     src="@/assets/images/building_guarantee/img_1.png"
+                     class="icon"
+                   />
+                      <div class="other-info">
+                      <div class="desc">年度累计电耗</div>
+                      <div class="num-info">
+                      <div class="num">657219</div>
+                      <div class="unit">万吨</div>
+                      </div>
+                     </div>
+                  </div>
+
+                  <div class="other-cou1">
+                      <div class="other-info">
+                      <div class="num-info">
+                        <div class="unit">同比减少</div>
+                      <div class="num">51</div>
+                      <div class="unit">万吨</div>
+                      </div>
+                     </div>
+                  </div>
+                </div>
+                <line-chart
+                  :chart-data="lineData"
+                   :x-axis="lineAxis"
+                   :yAxis="lineYAxis"
+                     :legend="lineLegend"
+                    y-color="#FFF"
+                    l-color="#FFF"
+                    width="565px"
+                    height="240px"
+                  />
+              </div>
+            </div>
+          </div>
+          
+
+          <div class="dialog-list1">
+            <div class="dialog-item wid100">
+              <div class="content-title">
+                <span class="title">年度累计水耗</span>
+              </div>
+              <div class="content">
+                <div class="total-cot1">
+                    <div class="other-cont">
+                    <img
+                     src="@/assets/images/building_guarantee/img_1.png"
+                     class="icon"
+                   />
+                      <div class="other-info">
+                      <div class="desc">年度累计水耗</div>
+                      <div class="num-info">
+                      <div class="num">382121</div>
+                      <div class="unit">万吨</div>
+                      </div>
+                     </div>
+                  </div>
+
+                  <div class="other-cou1">
+                      <div class="other-info">
+                      <div class="num-info">
+                        <div class="unit">同比减少</div>
+                      <div class="num">64</div>
+                      <div class="unit">万吨</div>
+                      </div>
+                     </div>
+                  </div>
+                </div>
+                <line-chart
+                  :chart-data="lineData"
+                   :x-axis="lineAxis"
+                   :yAxis="lineYAxis"
+                     :legend="lineLegend"
+                    y-color="#FFF"
+                    l-color="#FFF"
+                    width="565px"
+                    height="240px"
+                  />
+              </div>
+            </div>
+          </div>
+        </div>
+     
+      
+          </div>
+  
+    
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import LineChart from "@/components/Echarts/LineChart";
+  import PieChart from "@/components/Echarts/PieChart";
+  import BarChart from "@/components/Echarts/BarChart.vue";
+  import echarts from "echarts";
+  import {
+
+    powerForYear, resourceInfo, 
+  } from "@/api/screen/service";
+  
+  export default {
+    name: "EnergyRateDialog",
+    components: {
+      BarChart,
+      PieChart,
+      LineChart,
+    },
+    props: {
+      appOrg: {
+        type: String,
+        default: "0000",
+      },
+    },
+    data() {
+      return {
+        curBodex:0,
+        showBox: "indoor",
+        Boxtabs: [
+        {
+          name: "室内",
+          tab: "indoor",
+        },
+        {
+          name: "室外",
+          tab: "outdoor",
+        },
+      ],
+        lineLegend: {
+          top: 0,
+          orient: "horizontal",
+          right: 0,
+          itemWidth: 17, // 设置图例标记的宽度
+          itemHeight: 10, // 设置图例标记的高度
+          textStyle: {
+            color: "#FFF",
+          },
+        },
+        lineData: [],
+      lineAxis: {},
+      lineYAxis: {
+        name: "单位： 吨",
+        nameTextStyle: {
+          color: "#fff",
+          padding: [0, 0, 0, 30],
+        },
+        axisLabel: {
+          color: "#FFF",
+        },
+        splitLine: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        splitArea: false,
+      },
+      
+       //告警事件的历史统计
+       giveLineData: [],
+       //配电室重要抽屉负荷情况
+       barData: [],
+        barAxis: {},
+        barYAxis: {},
+        barGrid: {},
+        barLegend: {},
+        yearAllWaterChangeData: {
+          value: 0
+        },
+  
+        useElectricityBarData: [],
+     
+        useElectricityBarYaxis: {
+          type: "value",
+          boundaryGap: [0, 0.01],
+          name: "kwh",
+          nameTextStyle: {
+            color: "#fff",
+          },
+          axisLine: {
+            show:false
+          },
+          axisLabel: {
+            color: "white", // 设置横坐标轴字体颜色为红色
+          },
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          splitArea: false,
+        },
+        useElectricityBarLegend: {
+          show: false,
+        },
+        barGrid: {
+          top: 30,
+          left: "2%",
+          right: "2%",
+          containLabel: true,
+          bottom: 0,
+        },
+  
+  
+        pieData: [
+          {
+            name: "",
+            value: 56,
+          },
+          {
+            name: "",
+            value: 44,
+          },
+        ],
+  
+        resourceDataList: [],
+     //用电分项
+     electricityAreaBarData: [
+        {
+          name: "",
+          type: "bar",
+          itemStyle: {
+            color: "#ECAA5A",
+            //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
+          },
+          barWidth: 30,
+          data: [20, 30, 15,30],
+        },
+      ],
+      electricityAreaBarAxis: {
+        type: "category",
+        data: [
+          "照明用电",
+          "空调用电",
+          "动力用电",
+          "其他用电",
+        ],
+        axisLabel: {
+          color: "white", // 设置横坐标轴字体颜色为红色
+          rotate: 0,
+          interval: 0
+        },
+        axisLine:{
+          show:true
+        },
+        axisTick: {
+          show: false,
+        },
+        splitArea:false
+      },
+      electricityAreaBarYaxis: {
+        type: "value",
+        boundaryGap: [0, 0.01],
+        name: '单位: kWh',
+        nameTextStyle: {
+          color: '#fff',
+          padding: [0,0,0,30]
+        },
+        axisLine:{
+          lineStyle:{
+            color:"#465A64"
+          }
+        },
+        axisLabel: {
+          color: "white", // 设置横坐标轴字体颜色为红色
+        },
+        splitLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        splitArea:false
+      },
+      };
+    },
+    created() {
+
+        this.handleCurrentArea();
+
+
+      //资源信息
+      this.resourceInfo();
+    },
+    destroyed() {},
+    beforeDestroy() {},
+    mounted() {
+  
+    },
+    methods: {
+            //切换菜单
+      chooseBox(index) {
+      this.curBodex = index;
+      this.showBox = this.Boxtabs[index].tab;
+    },
+        handleCurrentArea() {
+      (this.lineData = [
+        {
+          name: "2024年",
+          type: "line",
+          symbol: "none",
+          areaStyle: {
+            opacity: 0.8,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.40,
+                color: "#00FFFF",
+              },
+              {
+                offset: 0.78,
+                color: "rgba(23, 240, 240, 0)",
+              },
+            ]),
+          },
+          lineStyle: {
+            width: 3, // 设置线宽
+            color: "#0AC1BD", // 设置线的颜色
+          },
+
+          smooth: true,
+          data: [11, 12, 8, 7,9,11,13,13,6,8,14,13],
+        },{
+          name: "2023年",
+          type: "line",
+          
+          symbol: "none",
+          areaStyle: {
+            opacity: 0.8,
+            color: new echarts.graphic.LinearGradient(0, 5, 15, 20, [
+              {
+                offset: 0.95,
+                color: "#645727",
+              },
+              
+              {
+                offset: 0.98,
+                color: "rgba(23, 240, 240, 0)",
+              },
+            ]),
+          },
+          lineStyle: {
+            width: 3, // 设置线宽
+            color: "#D67C15", // 设置线的颜色
+          },
+
+          smooth: true,
+ 
+          data: [19, 17, 20, 21,22,18,15,17,16,18,17,16],
+        },
+      ]),
+        (this.lineAxis = {
+          type: "category",
+          data: ["01月", "02月", "03月", "04月","05月","06月","07月","08月","09月","10月","11月","12月",],
+          axisLabel: {
+            color: "white", // 设置横坐标轴字体颜色为红色
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#465A64",
+            },
+          },
+          boundaryGap: false,
+        });
+    },
+
+
+      //资源信息
+      resourceInfo() {
+        resourceInfo(this.$props.appOrg).then((res) => {
+          if (Number(res.code) === 200) {
+            let color = ["#00FFFF", "#2F82FE", "#12DB62", "#FFB948", "#FF4848"];
+            let resourceDataList = [];
+            res.data.forEach((item, index)=>{
+              item.color = color[index];
+              resourceDataList.push(item);
+            })
+            this.resourceDataList = resourceDataList;
+          }
+        });
+      },
+  
+      //鼠标移出
+      leaveFun(){
+        this.$emit("closeDialog")
+        setTimeout(()=>{
+          this.$emit("closeDialog")
+        },200)
+      },
+  
+      preventDefault() {
+  
+      },
+  
+      showContent(percent){
+        return percent;
+      }
+    },
+  };
+  </script>
+  
+  <style lang="scss">
+  .dialog-area {
+    overflow: hidden;
+    width: 1225px;
+    height:920px;
+    background: url("../../../assets/images/main/components_max_bg.png") no-repeat;
+    background-size: cover;
+    padding: 19px 15px 11px 15px;
+    //backdrop-filter: blur(10px);
+  
+    .dialog-title {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      margin-bottom: 10px;
+      img {
+        width: 284px;
+        height: 32px;
+      }
+      .title {
+        font-size: 20px;
+        font-weight: 900;
+        font-family: "PingFangSC";
+        width: 100%;
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        top: -5px;
+        color: #fff;
+      }
+    }
+  
+    .dialog-cont {
+      width:100%;
+      height: 850px;
+      padding: 15px;
+      overflow-y: scroll;
+      background: url("../../../assets/images/main/components_max_cont.png") no-repeat;
+      background-size: cover;
+  
+      .dialog-left{
+        width: 570px;
+        float: left;
+      }
+      .dialog-right{
+        width: 570px;
+        float: right;
+      }
+    }
+  
+    .dialog-list {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 20px;
+  
+      .dialog-item{
+        width: calc(50% - 20px);
+      }
+  
+      .dialog-item-cont{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-top:40px;
+      }
+  
+      .wid100 {
+        width: 100%;
+  
+        .content-title {
+          width: 100%;
+          background: url("../../../assets/images/main/title_pro_longer.png") no-repeat;
+        }
+      }
+    }
+    
+    .dialog-list1 {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 20px;
+      margin-top: 20px;
+      .dialog-item{
+        width: calc(50% - 20px);
+      }
+  
+      .dialog-item-cont{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-top:40px;
+      }
+  
+      .wid100 {
+        width: 100%;
+  
+        .content-title {
+          width: 100%;
+          background: url("../../../assets/images/main/title_pro_longer.png") no-repeat;
+        }
+      }
+    }
+    .content-title {
+      width: 100%;
+      height: 26px;
+      background: url("../../../assets/images/main/title_pro.png") no-repeat;
+      background-size: 100% 100%;
+      font-family: "PingFangSC";
+      font-size: 16px;
+      font-weight: bold;
+      color: #00ffff;
+      padding-left: 25px;
+      .title {
+        display: block;
+        position: relative;
+        top:-5px;
+      }
+    }
+    //左边菜单
+    .rightList1{
+      display: flex;
+      flex-wrap: wrap;
+      padding: 10px 0px 0px 0px;
+      justify-content: space-between;
+      .left-list{
+          display: flex;
+          align-items: center;
+          margin-bottom: 15px;
+          img{
+            display: block;
+            width:42px;
+            height:45px;
+            margin-right: 5px;
+          }
+          .left-info{
+            display: flex;
+            // padding-left:12px;
+            .airStation{
+              display: flex;
+              align-items: center;
+            }
+            .temelper{
+              font-size: 18px;
+              color:#FFFFFF;
+              font-family: "electronicFont";
+            }
+  
+            .num{
+              font-size: 30px;
+              color:#00FFFF;
+              font-family: "electronicFont";
+              display: flex;
+              flex-direction: row;
+              align-items: baseline;
+              .unit{
+                font-size: 12px;
+                font-family: 'PingFangSC';
+              }
+            }
+            .name{
+              display: flex;
+              font-size: 14px;
+              color:#FFFFFF;
+              font-family: 'fashionZh';
+              padding-top:4px;
+            }
+          
+          }
+          .podTan{
+              margin-right: 17px;
+            }
+        }
+    }
+      //右边菜单
+      .rightList2{
+      display: flex;
+      flex-wrap: wrap;
+      padding: 10px 10px 0px 10px;
+      justify-content: space-between;
+      .left-list{
+          display: flex;
+          align-items: center;
+          margin-bottom: 15px;
+          margin-left: 30px;
+          img{
+            display: block;
+            // width:20px;
+            // height:20px;
+            margin-right: 5px;
+          }
+          .left-info{
+           // padding-left:12px;
+  
+            .num{
+              font-size: 34px;
+              color:#00FFFF;
+              font-family: "electronicFont";
+              display: flex;
+              flex-direction: row;
+              align-items: center;
+              .unit{
+                font-size: 12px;
+                font-family: 'PingFangSC';
+                font-weight: bold;
+                padding-top: 5px;
+              }
+            }
+            .name{
+              display: flex;
+              font-size: 14px;
+              color:#FFFFFF;
+              font-family: 'fashionZh';
+              padding-top:4px;
+            }
+          
+          }
+        }
+        .right-Top{
+          display: flex;
+          .left-list1{
+          width: 130px;
+           height: 45px;
+          display: flex;
+          align-items: center;
+          margin-bottom: 15px;
+          margin-right: 20px;
+          margin-top: 5px;
+          background: url("../../../assets/images/building_guarantee/normal.png") no-repeat;
+          background-size: 100% 100%;
+          justify-content: center;
+          .nor{
+              display: flex;
+              font-size: 34px;
+              color:#10D95F;
+              font-family: "electronicFont";
+              padding-top:4px;
+              padding-left: 50px;
+            }
+        }
+        .left-list2{
+          width: 130px;
+           height: 45px;
+          display: flex;
+          align-items: center;
+          margin-bottom: 15px;
+          margin-right: 50px;
+          margin-top: 5px;
+          background: url("../../../assets/images/building_guarantee/danger.png") no-repeat;
+          background-size: 100% 100%;
+          justify-content: center;
+          .dor{
+              display: flex;
+              font-size: 34px;
+              color:#FF003D;
+              font-family: "electronicFont";
+              padding-top:4px;
+              padding-left: 50px;
+            }
+        }
+        }
+   
+    }
+    .content {
+      margin-top: 20px;
+      .title-format {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        img {
+          width: 6px;
+          height: 24px;
+          margin-right: 6px;
+        }
+        .title-info {
+          display: flex;
+          flex-direction: column;
+          font-size: 12px;
+          color: #ffffff;
+          .title-en {
+            font-size: 8px;
+            color: #ffffff;
+            opacity: 0.4;
+          }
+        }
+      }
+      .total-data {
+        display: flex;
+        align-items: baseline;
+        color: #00ffff;
+        margin-top: 4px;
+        .total {
+          font-size: 40px;
+          font-family: "electronicFont";
+        }
+        .unit {
+          font-size: 12px;
+        }
+      }
+      .data-content {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        flex-wrap: wrap;
+        .data-item {
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          margin-right: 24px;
+          img {
+            width: 89px;
+            height: 82px;
+          }
+          .desc {
+            font-size: 14px;
+            color: #ffffff;
+            margin-top: 7px;
+            opacity: 0.4;
+          }
+          .data {
+            position: absolute;
+            top: 20px;
+            left: 0;
+            width: 89px;
+            font-size: 30px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #00ffff;
+            font-family: "electronicFont";
+          }
+        }
+        .data-item:nth-child(2n) {
+          margin-right: 0;
+        }
+      }
+      .data-list {
+        display: flex;
+        flex: 1;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        .data-item {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          flex: 1;
+          border-right: 1px solid rgba(25, 252, 222, 0.2);
+          .data-detail {
+            display: flex;
+            flex-direction: row;
+            align-items: baseline;
+            color: #00ffff;
+            margin-top: 11px;
+            font-size: 12px;
+            .data {
+              font-size: 30px;
+              font-family: "electronicFont";
+            }
+          }
+        }
+        .data-item:last-child {
+          border-right: none;
+        }
+      }
+      .rate-area {
+        position: relative;
+        img {
+          width: 198px;
+          height: 114px;
+        }
+        .rate {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          position: absolute;
+          top: 0;
+          left: 0;
+          color: #fff;
+          .rate-data {
+            display: flex;
+            flex-direction: row;
+            align-items: baseline;
+            color: #ffba44;
+            .data {
+              font-family: "electronicFont";
+              font-size: 30px;
+            }
+            .unit {
+              font-size: 12px;
+            }
+          }
+          .desc {
+            font-size: 12px;
+            width: 58px;
+            text-align: center;
+          }
+        }
+      }
+    }
+    .charts-cont{
+     width:100%;
+    padding-top:10px;
+  }
+
+    .total-cot{
+        display: flex;
+        .other-cont {
+      display: flex;
+  
+      .icon {
+        display: block;
+        width: 70px;
+        height: auto;
+      }
+      .other-info {
+        padding-left: 2px;
+  
+        .desc {
+          font-size: 12px;
+          color: #ffffff;
+          font-weight: bold;
+        }
+        .num-info {
+          width: 100%;
+          padding-top: 2px;
+          display: flex;
+          align-items: center;
+  
+          .num {
+            font-size: 30px;
+            color: #00ffff;
+            font-weight: bold;
+            font-family: "electronicFont";
+          }
+          .unit {
+            font-size: 12px;
+            color: #00ffff;
+            font-weight: 500;
+            position: relative;
+            top: 4px;
+          }
+          .mar {
+            margin-left: 20px;
+          }
+        }
+      }
+    }
+    .other-cou{
+        display: flex;
+        margin-left:60px;
+  
+  .icon {
+    display: block;
+    width: 70px;
+    height: auto;
+  }
+  .other-info {
+    padding-left: 2px;
+
+    .desc {
+      font-size: 12px;
+      color: #ffffff;
+      font-weight: bold;
+    }
+    .num-info {
+      width: 100%;
+      padding-top: 2px;
+      display: flex;
+      align-items: center;
+
+      .num {
+        font-size: 30px;
+        color: #00ffff;
+        font-weight: bold;
+        font-family: "electronicFont";
+      }
+      .unit {
+        font-size: 12px;
+        color: #00ffff;
+        font-weight: 500;
+        position: relative;
+        top: 4px;
+      }
+      .mar {
+        margin-left: 20px;
+      }
+    }
+  }
+    }
+   
+    
+}
+ //年度累计综合能耗
+ .total-cot1{
+        display: flex;
+        padding-left: 20px;
+        .other-cont {
+      display: flex;
+  
+      .icon {
+        display: block;
+        width: 70px;
+        height: auto;
+      }
+      .other-info {
+        padding-left: 2px;
+  
+        .desc {
+          font-size: 12px;
+          color: #ffffff;
+          font-weight: bold;
+        }
+        .num-info {
+          width: 100%;
+          padding-top: 2px;
+          display: flex;
+          align-items: center;
+  
+          .num {
+            font-size: 30px;
+            color: #00ffff;
+            font-weight: bold;
+            font-family: "electronicFont";
+          }
+          .unit {
+            font-size: 12px;
+            color: #00ffff;
+            font-weight: 500;
+            position: relative;
+            top: 4px;
+          }
+          .mar {
+            margin-left: 20px;
+          }
+        }
+      }
+    }
+    .other-cou1{
+        display: flex;
+        margin-left:30px;
+        align-items: center;
+  .icon {
+    display: block;
+    width: 70px;
+    height: auto;
+  }
+  .other-info {
+    padding-left: 2px;
+    padding-top: 8px;
+    .desc {
+      font-size: 12px;
+      color: #ffffff;
+      font-weight: bold;
+    }
+    .num-info {
+      width: 100%;
+      padding-top: 2px;
+      display: flex;
+      align-items: center;
+
+      .num {
+        font-size: 30px;
+        color: #00ffff;
+        font-weight: bold;
+        font-family: "electronicFont";
+      }
+      .unit {
+        font-size: 12px;
+        color: #00ffff;
+        font-weight: 500;
+        position: relative;
+        top: 4px;
+      }
+      .mar {
+        margin-left: 20px;
+      }
+    }
+  }
+    }
+   
+    
+}
+  
+  
+    .total-cont{
+      width: 100%;
+      height: 35px;
+      background: url("../../../assets/images/main/lightLone.png") no-repeat;
+      background-size: 100% 100%;
+      font-family: "PingFangSC";
+      font-size: 13px;
+      font-weight: bold;
+      color: #ffffff;
+      padding-left: 25px;
+      padding-top: 6px;
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+      margin-top: 10px;
+      margin-left: 15px;
+    }
+
+    .circle-cont {
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      padding: 0 10px;
+  
+      .circle-list {
+        width: 100px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 10px;
+  
+        .re-img{
+          width: 100px;
+          height: auto;
+          position: relative;
+        }
+        .re-value{
+          position: absolute;
+          width: 100px;
+          font-size: 30px;
+          font-weight: bold;
+          font-family: "electronicFont";
+          color: #00FFFF;
+          text-align: center;
+          top: 5px;
+          left: 0px;
+        }
+  
+        .name {
+          font-size: 12px;
+          color: #ffffff;
+          font-weight: 500;
+          padding-top: 6px;
+          width: 100%;
+          overflow: hidden;
+          text-align: center;
+          white-space: nowrap;
+          padding-left: 5px;
+        }
+      }
+  
+      .el-progress__text {
+        font-size: 12px !important;
+        color: #fff !important;
+      }
+    }
+  
+    .table-cont {
+      width: 100%;
+  
+      .table-top {
+        width: 100%;
+        height: 26px;
+        background: url("../../../assets/images/building_guarantee/img_11.png")
+          no-repeat;
+        background-size: 100% 100%;
+        padding: 0 25px 0 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 12px;
+        color: #00ffff;
+      }
+      .table-bot {
+        width: 100%;
+  
+        .table-list {
+          width: 100%;
+          height: 38px;
+          padding: 0 25px 0 10px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          font-size: 12px;
+          color: #ffffff;
+          font-weight: 500;
+        }
+      }
+    }
+    .other-cont {
+    display: flex;
+
+    .icon {
+      display: block;
+      width: 70px;
+      height: auto;
+    }
+    .other-info {
+      padding-left: 2px;
+
+      .desc {
+        font-size: 12px;
+        color: #ffffff;
+        font-weight: bold;
+      }
+      .num-info {
+        width: 100%;
+        padding-top: 2px;
+        display: flex;
+        align-items: center;
+
+        .num {
+          font-size: 30px;
+          color: #00ffff;
+          font-weight: bold;
+          font-family: "electronicFont";
+        }
+        .unit {
+          font-size: 12px;
+          color: #00ffff;
+          font-weight: 500;
+          position: relative;
+          top: 4px;
+        }
+        .mar {
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+  .content-Image{
+        width: 100%;
+        height: 400px;
+        background: url("../../../assets/images/building_guarantee/zhibiao.png")
+          no-repeat;
+        background-size: 100% 100%;
+        margin: 10px 10px 10px 10px; 
+  }
+  //绿电比例
+  .greenElectricity{
+        height: 100px;
+        background: url("../../../assets/images/building_guarantee/greenElectricity.png")
+          no-repeat;
+        margin: 20px 20px 10px 20px; 
+  }
+  .leftNav{
+    display: flex;
+    margin: 15px 0px 0px 15px;
+    .model1 {
+          margin-right: 15px;
+          width: 82px;
+          height: 45px;
+          line-height: 30px;
+          text-align: center;
+          font-family: "PingFangSc";
+          font-size: 14px;
+          font-weight: bold;
+           background: url("../../../assets/images/main/choose_short_single.png") no-repeat;
+         // background-size: 95% 95%;
+          color: #CED6D6;
+          cursor: pointer;
+        }
+        .model:last-child {
+          margin-right: 0;
+        }
+        .cur {
+          color: #05FEFE;
+          //  background: url("../../../../assets/images/main/menu_chooe.png") no-repeat;
+        }
+  }
+    .table-cont .fir {
+      width: 20%;
+      text-align: left;
+    }
+    .table-cont .snd {
+      width: 50%;
+      text-align: center;
+    }
+    .table-cont .thd {
+      width: 30%;
+      text-align: right;
+    }
+  
+    ::-webkit-scrollbar {
+      display: none;
+      width: 3px;
+      height: 3px;
+    }
+  
+    ::-webkit-scrollbar-thumb {
+      //滑块部分
+      // border-radius: 5px;
+      background-color: #58cbbb;
+    }
+  
+    ::-webkit-scrollbar-track {
+      //轨道部分
+      // box-shadow: inset 0 0 5px #ddd;
+      background: #ddd;
+      // border-radius: 5px;
+    }
+  }
+  </style>
+  
+  

src/views/screen/building/energyRate.vue

@@ -3,56 +3,194 @@
 <!--    <div class="title-area">能源占比</div>-->
     <div class="content-area">
       <div class="content-title">
-        <span class="title">碳排放量月度变化趋势图</span>
+        <span class="title">楼宇每月用电量</span>
       </div>
       <div class="data-chart">
         <line-chart
-          :chart-data="energyRateLineData"
-          :x-axis="energyRateLineAxis"
-          :yAxis="energyRateLineYAxis"
-          :legend="lineLegend"
+                  :chart-data="yearLineData"
+                  :x-axis="yearLineAxis"
+                  :yAxis="yearLineYAxis"
+                  :legend="lineLegend"
+                  y-color="#FFF"
+                  l-color="#FFF"
+                  width="515px"
+                  height="240px"
+                />
+      </div>
+      <div class="content-title">
+        <span class="title">配电室重要抽屉负荷情况</span>
+      </div>
+      <div class="data-chart">
+              <bar-chart
+          :chart-data="barData"
+          :x-axis="barAxis"
+          :y-axis="barYAxis"
+          :grid="barGrid"
+          :legend="barLegend"
           y-color="#FFF"
           l-color="#FFF"
           width="515px"
-          height="190px"
+          height="180px"
         />
-      </div>
-      <div class="content-title">
-        <span class="title">办公能耗情况</span>
-      </div>
-      <div class="worker-list">
-        <div class="worker-top">
-          <img
-            src="@/assets/images/building_guarantee/img_1.png"
-            class="icon"
-          />
-          <div class="worker-top-info">
-            <div class="desc">年度累计综合能耗</div>
-            <div class="num-info">
-              <div class="num">{{yearAllChangeData.energyNum || 0}}</div>
-              <div class="unit">吨</div>
-              <div class="unit mar">{{yearAllChangeData.reduceName}}</div>
-              <div class="num">{{yearAllChangeData.reduceNum || 0}}</div>
-              <div class="unit">吨</div>
-            </div>
-          </div>
         </div>
-<!--        <div class="worker-bot">
-          <div class="label-cont">
-            <div class="unit">单位：吨</div>
-            <div class="label-info">
-              <div class="label-list">
-                <div class="label"></div>
-                <div class="title">2024年</div>
+        <div class="content-title">
+        <span class="title">楼宇本周用电量</span>
+      </div>
+      <div class="rightList1">
+                <div class="left-list">
+                    <div class="left-info">
+                    <div class="name">
+                      <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
+                      <div>消防用电量</div>
+                    </div>
+                    <div class="num">56<span class="unit">kWh</span></div>
+                  </div>
+                 </div>
+                 <div class="left-list">
+                    <div class="left-info">
+                    <div class="name">
+                      <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
+                      <div>电梯用电量</div>
+                    </div>
+                    <div class="num">51<span class="unit">kWh</span></div>
+                  </div>
+                 </div>
+                 <div class="left-list">
+                    <div class="left-info">
+                    <div class="name">
+                      <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
+                      <div>地下室用电量</div>
+                    </div>
+                    <div class="num">48<span class="unit">kWh</span></div>
+                  </div>
+                 </div>
+                 <div class="left-list">
+                    <div class="left-info">
+                    <div class="name">
+                      <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
+                      <div>办公用电量</div>
+                    </div>
+                    <div class="num">48<span class="unit">kWh</span></div>
+                  </div>
+                 </div>
               </div>
-              <div class="label-list">
-                <div class="label"></div>
-                <div class="title">2023年</div>
+              <div class="rightList1">
+                <div class="left-list">
+                    <div class="left-info">
+                    <div class="name">
+                      <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
+                      <div>公共照明用电量</div>
+                    </div>
+                    <div class="num">56<span class="unit">kWh</span></div>
+                  </div>
+                 </div>
+                 <div class="left-list">
+                    <div class="left-info">
+                    <div class="name">
+                      <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
+                      <div>楼外用电量</div>
+                    </div>
+                    <div class="num">51<span class="unit">kWh</span></div>
+                  </div>
+                 </div>
+                 <div class="left-list">
+                    <div class="left-info">
+                    <div class="name">
+                      <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
+                      <div>供热设备用电量</div>
+                    </div>
+                    <div class="num">48<span class="unit">kWh</span></div>
+                  </div>
+                 </div>
+                 <div class="left-list">
+                    <div class="left-info">
+                    <div class="name">
+                      <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
+                      <div>充电桩用电量</div>
+                    </div>
+                    <div class="num">48<span class="unit">kWh</span></div>
+                  </div>
+                 </div>
               </div>
-            </div>
-          </div>
-        </div>-->
-      </div>
+
+              <div class="rightList1">
+                <div class="left-list">
+                    <div class="left-info">
+                    <div class="name">
+                      <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
+                      <div>厨房用电量</div>
+                    </div>
+                    <div class="num">56<span class="unit">kWh</span></div>
+                  </div>
+                 </div>
+                 <div class="left-list">
+                    <div class="left-info">
+                    <div class="name">
+                      <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
+                      <div>机组用电量</div>
+                    </div>
+                    <div class="num">51<span class="unit">kWh</span></div>
+                  </div>
+                 </div>
+                 <div class="left-list">
+                    <div class="left-info">
+                    <div class="name">
+                      <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
+                      <div>光伏用电量</div>
+                    </div>
+                    <div class="num">48<span class="unit">kWh</span></div>
+                  </div>
+                 </div>
+                 <div class="left-list">
+                    <div class="left-info">
+                    <div class="name">
+                      <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
+                      <div>机房总用电量</div>
+                    </div>
+                    <div class="num">48<span class="unit">kWh</span></div>
+                  </div>
+                 </div>
+              </div>
+
+              <div class="rightList1">
+                <div class="left-list">
+                    <div class="left-info">
+                    <div class="name">
+                      <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
+                      <div>生活水泵用电量</div>
+                    </div>
+                    <div class="num">56<span class="unit">kWh</span></div>
+                  </div>
+                 </div>
+                 <div class="left-list">
+                    <div class="left-info">
+                    <div class="name">
+                      <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
+                      <div>冷源泵用电量</div>
+                    </div>
+                    <div class="num">51<span class="unit">kWh</span></div>
+                  </div>
+                 </div>
+                 <div class="left-list">
+                    <div class="left-info">
+                    <div class="name">
+                      <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
+                      <div>热源泵用电量</div>
+                    </div>
+                    <div class="num">48<span class="unit">kWh</span></div>
+                  </div>
+                 </div>
+                 <div class="left-list">
+                    <div class="left-info">
+                    <div class="name">
+                      <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
+                      <div>通信辅助设备用电量</div>
+                    </div>
+                    <div class="num">48<span class="unit">kWh</span></div>
+                  </div>
+                 </div>
+              </div>
+
     </div>
   </div>
 </template>
@@ -75,29 +213,10 @@ export default {
   },
   data() {
     return {
-      energyRateLineData: [],
-      energyRateLineAxis: {},
-      energyRateLineYAxis: {
-        type: "value",
-        boundaryGap: [0, 0.01],
-        name: "吨",
-        nameTextStyle: {
-          color: "#fff",
-        },
-        axisLine: {
-          show:false
-        },
-        axisLabel: {
-          color: "white", // 设置
-        },
-        splitLine: {
-          show: false,
-        },
-        axisTick: {
-          show: false,
-        },
-        splitArea: false,
-      },
+      //楼宇每月用电量
+     yearLineData: [],
+       //配电室重要抽屉负荷情况
+       barData: [],
       lineLegend: {
         top: 0,
         orient: "horizontal",
@@ -116,6 +235,10 @@ export default {
     };
   },
   created() {
+       //楼宇每月用电量
+       this.handleYearData()
+        //配电室重要抽屉负荷情况
+    this.handleBar();
     //碳排放量月度变化趋势图
     this.carbonEmissionStatistics();
 
@@ -126,7 +249,249 @@ export default {
   beforeDestroy() {},
   mounted() {},
   methods: {
+       //楼宇每月用电量
+       handleYearData(){
+      this.yearLineData = [
+        {
+          name: "配电室一",
+          type: "line",
+          // areaStyle: {
+          //   opacity: 0.8,
+          //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          //     {
+          //       offset: 0.03,
+          //       color: "rgba(30, 240, 215, 0.4196)",
+          //     },
+          //     {
+          //       offset: 0.68,
+          //       color: "rgba(23, 240, 240, 0)",
+          //     },
+          //   ]),
+          // },
+          lineStyle: {
+            width: 3, // 设置线宽
+            color: "#00EBFC", // 设置线的颜色
+            type: 'solid' // 设置直线样式
+          },
+          smooth: false,
+          itemStyle: {
+            normal: {
+                color: '#00EBFC', // 节点颜色
+                borderColor: '#00EBFC', // 节点边框颜色
+                borderWidth: 4 // 节点边框宽度
+            }
+        },
+          data: [460,620, 900, 1180,1300, 1450,1560,1670,1300,1000,900,3000 ],
+        },
+        {
+          name: "配电室二",
+          type: "line",
+          // areaStyle: {
+          //   opacity: 0.8,
+          //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          //     {
+          //       offset: 0.03,
+          //       color: "rgba(214, 124, 21, 0.1804)",
+          //     },
+          //     {
+          //       offset: 0.68,
+          //       color: "rgba(23, 240, 240, 0)",
+          //     },
+          //   ]),
+          // },
+          lineStyle: {
+            width: 3, // 设置线宽
+            color: "#00D390", // 设置线的颜色
+            type: 'solid' // 设置直线样式
+          },
+          smooth: false,
+          itemStyle: {
+            normal: {
+                color: '"#00D390', // 节点颜色
+                borderColor: '#00D390', // 节点边框颜色
+                borderWidth: 4 // 节点边框宽度
+            }
+        },
+          data: [2800, 2700, 2650, 3500,3000, 2400,2300,2200,1900,1800,1700,1500 ],
+
+        },
+        {
+          name: "配电室三",
+          type: "line",
+
+          // areaStyle: {
+          //   opacity: 0.8,
+          //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          //     {
+          //       offset: 0.03,
+          //       color: "rgba(30, 240, 215, 0.4196)",
+          //     },
+          //     {
+          //       offset: 0.68,
+          //       color: "rgba(23, 240, 240, 0)",
+          //     },
+          //   ]),
+          // },
+          lineStyle: {
+            width: 3, // 设置线宽
+            color: "#FFED00", // 设置线的颜色
+            type: 'solid' // 设置直线样式
+          },
+          smooth: false,
+          itemStyle: {
+            normal: {
+                color: '"#FFED00', // 节点颜色
+                borderColor: '#FFED00', // 节点边框颜色
+                borderWidth: 4 // 节点边框宽度
+            }
+        },
+          data: [1400, 1200, 1100, 1000,900, 880,800,270,30,400,500,520 ],
+        },
+
+      ];
+      this.yearLineAxis = {
+        type: "category",
+        data: [
+          "1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月",
+        ],
+        axisTick: {
+          show: false,
+        },
+        axisLine: {
+          lineStyle: {
+            color: "#FFF",
+          },
+        },
+        splitArea:false,
+        boundaryGap: false,
+      };
+      this.yearLineYAxis = {
+        name: 'Kwh',
+        nameTextStyle: {
+          color: '#fff',
+        },
+        axisLine:{
+          show: false,
+        },
+        axisLabel: {
+          color: "white", // 设置横坐标轴字体颜色为红色
+        },
+
+        splitLine: {
+          show: true,
+          lineStyle: {
+             type:'dashed',
+            color: '#1D2F38', // 背景线颜色
+            width: 1// 背景线宽度
+        }
+        },
+        axisTick: {
+          show: false,
+        },
+        splitArea:false
+      }
+    },
+            //实例化柱状图
+            handleBar() {
+      this.barData = [
+        {
+          name: "配电室一",
+          type: "bar",
+          itemStyle: {
+            color: "#00EBFC",
+          },
+          barWidth: 15,
+          data: [50, 50, 80, 55, 80],
+        },
+        {
+          name: "配电室二",
+          type: "bar",
+          itemStyle: {
+            color: "#FFB400",
+          },
+          barWidth: 15,
+          data: [80, 80, 50, 30, 55],
+        },
+        {
+          name: "配电室三",
+          type: "bar",
+          itemStyle: {
+            color: "#00D390",
+          },
+          barWidth: 15,
+          data: [45, 55, 45, 55, 80],
+        },
+      ];
+
+      this.barGrid = {
+        top: 30,
+        bottom: 0,
+        left: "2%",
+        right: "2%",
+        containLabel: true,
+      };
 
+      this.barLegend = {
+        right: 0,
+        top: 0,
+        itemWidth: 17, // 设置图例标记的宽度
+        itemHeight: 10, // 设置图例标记的高度
+        textStyle: {
+          color: "#FFF",
+        },
+      };
+
+      this.barAxis = {
+        type: "category",
+        data: [
+          "重载",
+          "轻载",
+          "过载",
+          "空载",
+          "正常",
+        ],
+        axisLabel: {
+          color: "white", // 设置横坐标轴字体颜色为红色
+        },
+        axisLine:{
+          lineStyle:{
+            color:"#08595B"
+          }
+        },
+        axisTick: {
+          show: false,
+        },
+        splitArea: false,
+      };
+
+      this.barYAxis = {
+        name: "数量(个)",
+        nameTextStyle: {
+          color: "#fff",
+          padding: [0,0,0,5],
+          fontSize: 14,
+        },
+        axisLabel: {
+          formatter: "{value}",
+          color: "#FFF",
+        },
+        axisLine:{
+          show:false
+        },
+        axisTick: {
+          show: false,
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+             type:'dashed',
+            color: '#1D2F38', // 背景线颜色
+            width: 1// 背景线宽度
+        }
+        },
+        splitArea: false,
+      };
+    },
     //碳排放量月度变化趋势图
     carbonEmissionStatistics() {
       carbonEmissionStatistics().then((res) => {
@@ -425,7 +790,47 @@ export default {
       width: 100%;
     }
   }
+  //左边菜单
+  .rightList1{
+    display: flex;
+    flex-wrap: wrap;
+    padding: 10px 0px 10px 0px;
+    justify-content: space-between;
+    .left-list{
+        display: flex;
+        align-items: center;
+        margin-bottom: 15px;
+        img{
+          display: block;
+          width:20px;
+          height:20px;
+          margin-right: 5px;
+        }
+        .left-info{
+          padding-left:0px;
 
+          .num{
+            font-size: 30px;
+            color:#00FFFF;
+            font-family: "electronicFont";
+            display: flex;
+            flex-direction: row;
+            align-items: baseline;
+            .unit{
+              font-size: 12px;
+              font-family: 'PingFangSC';
+            }
+          }
+          .name{
+            display: flex;
+            font-size: 14px;
+            color:#FFFFFF;
+            font-family: 'fashionZh';
+            padding-top:4px;
+          }
+        }
+      }
+  }
   ::-webkit-scrollbar {
     width: 3px;
     height: 3px;

src/views/screen/building/main.vue

@@ -9,13 +9,13 @@
               src="@/assets/images/main/cont_title_bg.png"
               alt=""
             />
-            <div class="cont-title">办公能耗</div>
+            <div class="cont-title">楼宇中控</div>
           </div>
-          <div class="components-item bg3">
+          <div class="components-itemLong bg4">
             <energy-rate :appOrg="appOrg"></energy-rate>
           </div>
         </div>
-        <div class="left-bottom" @click="showDialog(2)" @mouseover="showDialog(2)">
+        <!-- <div class="left-bottom" @click="showDialog(2)" @mouseover="showDialog(2)">
           <div class="cont-title-area">
             <img
               class="cont-title-bg"
@@ -27,7 +27,7 @@
           <div class="components-item bg3">
             <building-save :key="appOrg"></building-save>
           </div>
-        </div>
+        </div> -->
       </div>
     </div>
     <div class="middle">
@@ -115,14 +115,14 @@
     </div>
     <div class="right">
       <div class="right-cont" v-if="rightShow">
-        <div class="right-top">
+        <div class="right-top" @click="showDialog(5)" @mouseover="showDialog(5)">
           <div class="cont-title-area">
             <img
               class="cont-title-bg"
               src="@/assets/images/main/cont_title_bg.png"
               alt=""
             />
-            <div class="cont-title">摄像头接入情况</div>
+            <div class="cont-title">办公能耗</div>
           </div>
           <div class="components-item">
             <camera-data :key="appOrg"></camera-data>
@@ -135,7 +135,7 @@
               src="@/assets/images/main/cont_title_bg.png"
               alt=""
             />
-            <div class="cont-title">各单位监控信息</div>
+            <div class="cont-title">大楼安防监控信息</div>
           </div>
           <div class="components-item bg3">
             <unit-monitor :key="appOrg"></unit-monitor>
@@ -149,6 +149,7 @@
     <div :class="dialogType < 3 ? 'dialog':'dialog-r'" v-if="dialogShow" @click="closeDialog">
       <energy-rate-dialog v-if="dialogType === 1" @closeDialog="closeDialog" :appOrg="appOrg"></energy-rate-dialog>
       <building-save-dialog v-if="dialogType === 2" @closeDialog="closeDialog"></building-save-dialog>
+      <camera-data-dialog v-if="dialogType === 5" @closeDialog="closeDialog"></camera-data-dialog >
       <unit-monitor-dialog v-if="dialogType === 4" @closeDialog="closeDialog" @chooseMonitor="chooseMonitorBack" :monitorName="monitorName"></unit-monitor-dialog>
     </div>
 
@@ -177,6 +178,7 @@
 import EnergyRate from "./energyRate.vue";
 import BuildingSave from "./buildingSave.vue";
 import CameraData from "./cameraData.vue";
+import CameraDataDialog from "./cameraDataDialog.vue";
 import UnitMonitor from "./unitMonitor.vue";
 import Province from "../map/province.vue";
 import EnergyRateDialog from "./energyRateDialog.vue";
@@ -195,6 +197,7 @@ export default {
     EmployeeProfile,
     MonitorLive, MonitorLiveList,
     EnergyRate,
+    CameraDataDialog,
     BuildingSave,
     CameraData,
     UnitMonitor,
@@ -363,6 +366,18 @@ export default {
     display: none !important;
   }
 }
+.components-itemLong {
+  width: 550px;
+  height: 850px;
+      background: url("../../../assets/images/main/components_long_bg.png") no-repeat;
+      background-size: cover;
+      margin-bottom: 28px;
+      margin-left: 15px;
+      overflow: hidden;
+    }
+ .components-itemLong .bg4{
+      background: url("../../../assets/images/main/components_long_bg.png") no-repeat;
+    }
 .data-building {
   width: 100%;
   height: 100%;
@@ -494,6 +509,7 @@ export default {
       background: url("../../../assets/images/main/components_mid_bg2.png") no-repeat;
     }
 
+
     .right-top {
       //width: 550px;
       //height: 444px;

src/views/screen/building/unitMonitor.vue

@@ -3,22 +3,41 @@
 <!--    <div class="title-area">各单位监控信息</div>-->
     <div class="content-area">
       <div class="content-title">
-        <span class="title">监控覆盖情况</span>
+        <span class="title">巡更次数统计（近6月）</span>
       </div>
-      <div class="content">
-        <div class="table-cont">
-          <div class="table-top">
-            <div class="fir">单位名称</div>
-            <div class="snd">摄像头数量</div>
+      <div class="charts-cont">
+                  <bar-chart
+                    :chart-data="electricityAreaBarData"
+                    :x-axis="electricityAreaBarAxis"
+                    :yAxis="electricityAreaBarYaxis"
+                    y-color="#FFF"
+                    l-color="#FFF"
+                    width="515px"
+                    height="220px"
+                  />
           </div>
-          <div class="table-bot">
-            <div class="table-list" v-for="(item,index) in unitDataList" :key="index">
-              <div class="fir">{{item.name}}</div>
-              <div class="snd">{{item.num}}</div>
-            </div>
+
+              <!-- 巡更及时率 -->
+        <div class="dialog-list">
+            <div class="dialog-item wid100">
+              <div class="content-title">
+                <span class="title">巡更及时率</span>
+              </div>
+              <div class="content">
+                <line-chart
+                  :chart-data="lineData"
+                   :x-axis="lineAxis"
+                   :yAxis="lineYAxis"
+                     :legend="lineLegend"
+                    y-color="#FFF"
+                    l-color="#FFF"
+                    width="515px"
+                    height="200px"
+                  />
+              </div>
           </div>
         </div>
-      </div>
+
     </div>
   </div>
 </template>
@@ -45,6 +64,94 @@ export default {
   },
   data() {
     return {
+               //巡更次数
+     electricityAreaBarData: [
+        {
+          name: "",
+          type: "bar",
+          itemStyle: {
+            color: "#ECAA5A",
+            //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
+          },
+          barWidth: 30,
+          data: [20, 30, 30,15,20,30],
+        },
+      ],
+      electricityAreaBarAxis: {
+        type: "category",
+        data: [
+          "1月","2月","3月","4月","5月","6月",
+        ],
+        axisLabel: {
+          color: "white", // 设置横坐标轴字体颜色为红色
+          rotate: 0,
+          interval: 0
+        },
+        axisLine:{
+          show:true
+        },
+        axisTick: {
+          show: false,
+        },
+        splitArea:false
+      },
+      electricityAreaBarYaxis: {
+        type: "value",
+        boundaryGap: [0, 0.01],
+        name: '单位: 次',
+        nameTextStyle: {
+          color: '#fff',
+          padding: [0,0,0,30]
+        },
+        axisLine:{
+          lineStyle:{
+            color:"#465A64"
+          }
+        },
+        axisLabel: {
+          color: "white", // 设置横坐标轴字体颜色为红色
+        },
+        splitLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        splitArea:false
+      },
+      lineLegend: {
+          top: 0,
+          orient: "horizontal",
+          right: 0,
+          itemWidth: 17, // 设置图例标记的宽度
+          itemHeight: 10, // 设置图例标记的高度
+          textStyle: {
+            color: "#FFF",
+          },
+        },
+        //巡更及时率
+        lineData: [],
+      lineAxis: {},
+      lineYAxis: {
+        name: "单位： %",
+        nameTextStyle: {
+          color: "#fff",
+          padding: [0, 0, 0, 30],
+        },
+        axisLabel: {
+          color: "#FFF",
+        },
+        splitLine: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        splitArea: false,
+      },
       unitDataList: [],
     };
   },
@@ -290,6 +397,7 @@ export default {
       }
     }
   }
+
   .table-cont .fir{
     width:50%;
     text-align: left;
@@ -298,7 +406,36 @@ export default {
     width:50%;
     text-align: left;
   }
+  .charts-cont{
+     width:100%;
+    padding-top:10px;
+  }
+  .dialog-list{
+    width: 100%;
+    display: flex;
+    justify-content: space-between !important;
+    margin-top:20px;
 
+    .dialog-item{
+      width: calc(50% - 20px);
+    }
+
+    .dialog-item-cont{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-top:40px;
+    }
+
+    .wid100{
+      width:100%;
+
+      .content-title{
+        width:100%;
+        background: url("../../../assets/images/main/title_pro_long.png") no-repeat;
+      }
+    }
+  }
   ::-webkit-scrollbar {
     width: 3px;
     height: 3px;

src/views/screen/building/unitMonitorDialog.vue

@@ -4,7 +4,7 @@
       <img
         src="@/assets/images/main/cont_title_bg.png"
       />
-      <div class="title">各单位监控信息</div>
+      <div class="title">大楼安防监控信息</div>
     </div>
     <div class="dialog-cont">
       <div class="dialog-left">
@@ -12,36 +12,74 @@
         <div class="dialog-list">
           <div class="dialog-item wid100">
             <div class="content-title">
-              <span class="title">监控覆盖情况</span>
+              <span class="title">巡更次数统计（近6月）</span>
             </div>
-            <div class="content">
-              <div class="table-cont">
+            <div class="charts-cont">
+                  <bar-chart
+                    :chart-data="electricityAreaBarData"
+                    :x-axis="electricityAreaBarAxis"
+                    :yAxis="electricityAreaBarYaxis"
+                    y-color="#FFF"
+                    l-color="#FFF"
+                    width="515px"
+                    height="200px"
+                  />
+               </div>
+          </div>
+        </div>
+
+        <!-- 巡更及时率 -->
+        <div class="dialog-list">
+            <div class="dialog-item wid100">
+              <div class="content-title">
+                <span class="title">巡更及时率</span>
+              </div>
+              <div class="content">
+                <line-chart
+                  :chart-data="lineData"
+                   :x-axis="lineAxis"
+                   :yAxis="lineYAxis"
+                     :legend="lineLegend"
+                    y-color="#FFF"
+                    l-color="#FFF"
+                    width="515px"
+                    height="200px"
+                  />
+              </div>
+          </div>
+        </div>
+
+               <!-- 巡更点统计-->
+               <div class="dialog-list">
+            <div class="dialog-item wid100">
+              <div class="content-title">
+                <span class="title">巡更点统计</span>
+              </div>
+              <div class="tank">
+               <div class="ocBox">
+                    <!-- 水箱 -->
+                    <div class="leftTank"></div>
+               </div>
+               <div class="ocBox">
+                <div class="table-cont">
                 <div class="table-top">
-                  <div class="fir">单位名称</div>
-                  <div class="snd">摄像头数量</div>
+                  <div class="flo">楼层</div>
+                  <div class="pot">点位数</div>
                 </div>
                 <div class="table-bot">
-                  <div class="table-list" v-for="(item,index) in unitDataList" :key="index">
-                    <div class="fir">{{item.name}}</div>
-                    <div class="snd">{{item.num}}</div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="content" style="margin-top:40px;">
-              <div class="monitor-cont">
-                <div class="monitor-list" v-for="(item,index) in monitorList" :key="index" @click="chooseMonitor(index)">
-                  <img src="@/assets/images/building_guarantee/img_12.png" class="img" />
-                  <div class="monitor-info">
-                    <div class="name">{{item.name}}</div>
+                  <div class="table-list" v-for="(item,index) in floorDataList" :key="index">
+                    <div class="fir">{{item.floor}}</div>
+                    <div class="snd">{{item.point}}</div>
                   </div>
                 </div>
               </div>
+               </div>
             </div>
           </div>
         </div>
 
 
+
       </div>
     </div>
   </div>
@@ -85,6 +123,94 @@ export default {
   },
   data() {
     return {
+          //巡更次数
+     electricityAreaBarData: [
+        {
+          name: "",
+          type: "bar",
+          itemStyle: {
+            color: "#ECAA5A",
+            //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
+          },
+          barWidth: 30,
+          data: [20, 30, 30,15,20,30],
+        },
+      ],
+      electricityAreaBarAxis: {
+        type: "category",
+        data: [
+          "1月","2月","3月","4月","5月","6月",
+        ],
+        axisLabel: {
+          color: "white", // 设置横坐标轴字体颜色为红色
+          rotate: 0,
+          interval: 0
+        },
+        axisLine:{
+          show:true
+        },
+        axisTick: {
+          show: false,
+        },
+        splitArea:false
+      },
+      electricityAreaBarYaxis: {
+        type: "value",
+        boundaryGap: [0, 0.01],
+        name: '单位: 次',
+        nameTextStyle: {
+          color: '#fff',
+          padding: [0,0,0,30]
+        },
+        axisLine:{
+          lineStyle:{
+            color:"#465A64"
+          }
+        },
+        axisLabel: {
+          color: "white", // 设置横坐标轴字体颜色为红色
+        },
+        splitLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        splitArea:false
+      },
+      lineLegend: {
+          top: 0,
+          orient: "horizontal",
+          right: 0,
+          itemWidth: 17, // 设置图例标记的宽度
+          itemHeight: 10, // 设置图例标记的高度
+          textStyle: {
+            color: "#FFF",
+          },
+        },
+        //巡更及时率
+        lineData: [],
+      lineAxis: {},
+      lineYAxis: {
+        name: "单位： %",
+        nameTextStyle: {
+          color: "#fff",
+          padding: [0, 0, 0, 30],
+        },
+        axisLabel: {
+          color: "#FFF",
+        },
+        splitLine: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        splitArea: false,
+      },
       cityNameList: ['长治市', '交城县', '晋中市', '岚县', '吕梁市', '平遥县', '寿阳县', '营销服务中心'],
       cityCodeList: ['changzhi', 'jiaocheng', 'jinzhong', 'lanxian', 'lvliang', 'pingyao', 'shouyang', 'yingxiao'],
       raddarData: [
@@ -110,10 +236,24 @@ export default {
         { name: '电梯', max: 100 }
       ],
       monitorList: [],
-      unitDataList: [],
+       //巡更点统计
+       floorDataList: [
+         { floor: '10层', point: 5 },
+         { floor: '9层', point: 7 },
+         { floor: '8层', point: 7 },
+         { floor: '7层', point: 5 },
+         { floor: '6层', point: 9 },
+         { floor: '5层', point: 3 },
+         { floor: '4层', point: 9 },
+         { floor: '3层', point: 4 },
+         { floor: '2层', point: 6 },
+         { floor: '1层', point: 7 },
+
+       ],
     };
   },
   created() {
+    this.handleCurrentArea();
     this.getMonitorList();
     this.handleUnitDataList();
   },
@@ -121,6 +261,55 @@ export default {
   beforeDestroy() {},
   mounted() {},
   methods: {
+    handleCurrentArea() {
+      (this.lineData = [
+       {
+          name: "巡更及时率",
+          type: "line",
+
+          symbol: "none",
+          areaStyle: {
+            opacity: 0.8,
+            color: new echarts.graphic.LinearGradient(0, 5, 15, 20, [
+              {
+                offset: 0.95,
+                color: "#645727",
+              },
+
+              {
+                offset: 0.98,
+                color: "rgba(23, 240, 240, 0)",
+              },
+            ]),
+          },
+          lineStyle: {
+            width: 3, // 设置线宽
+            color: "#D67C15", // 设置线的颜色
+          },
+
+          smooth: true,
+
+          data: [19, 17, 20, 16,22,18,],
+        },
+      ]),
+        (this.lineAxis = {
+          type: "category",
+          data: ["01月", "02月", "03月", "04月","05月","06月",],
+          axisLabel: {
+            color: "white", // 设置横坐标轴字体颜色为红色
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#465A64",
+            },
+          },
+          boundaryGap: false,
+        });
+    },
+
     //视频流列表 各公司出入口监控
     getMonitorList() {
       let index = this.cityNameList.indexOf(this.monitorName);
@@ -424,6 +613,77 @@ export default {
     }
   }
 
+  .tank{
+    display: flex;
+    height: 245px;
+    .ocBox{
+      width: 50%;
+
+  .leftTank{
+    height: 260px;
+    background: url("../../../assets/images/building_guarantee/xpsota.png") no-repeat;
+    margin: 10px 10px 10px 10px;
+  }
+  .table-cont{
+    width:100%;
+
+    .table-top{
+      width:100%;
+      height: 50px;
+      background-color: #092B2C;
+      padding:0 25px 0 10px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size:18px;
+      color:#00FFFF;
+    }
+    .table-bot{
+      width:100%;
+      height: 165px;
+      overflow: scroll;
+
+      .table-list{
+        width:100%;
+        height:40px;
+        padding:15px 25px 15px 0px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size:16px;
+        color:#FFFFFF;
+        font-weight: 500;
+        //border: 1px dotted #14302F;
+      }
+    }
+    .flo{
+      width:50%;
+      text-align: center;
+    }
+    .pot{
+      width:50%;
+      text-align: center;
+    }
+
+
+    .fir{
+      width:50%;
+      text-align: center;
+      border-left: 1px solid #40E5F2;
+    }
+    .snd{
+      width:50%;
+      text-align: center;
+    }
+
+    // .color{
+    //   color:#FF8C00;
+    // }
+  }
+
+    }
+
+  }
   .other-cont{
     display: flex;
 
@@ -565,48 +825,13 @@ export default {
       color:#fff !important;
     }
   }
-
-  .table-cont{
-    width:100%;
-
-    .table-top{
-      width:100%;
-      height: 26px;
-      background: url("../../../assets/images/building_guarantee/img_11.png") no-repeat;
-      background-size: 100% 100%;
-      padding:0 25px 0 10px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      font-size:14px;
-      color:#00FFFF;
-    }
-    .table-bot{
-      width:100%;
-
-      .table-list{
-        width:100%;
-        height:38px;
-        padding:0 25px 0 10px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        font-size:14px;
-        color:#FFFFFF;
-        font-weight: 500;
-      }
-    }
-  }
-  .table-cont .fir{
-    width:50%;
-    text-align: left;
-  }
-  .table-cont .snd{
-    width:50%;
-    text-align: left;
+  .charts-cont{
+     width:100%;
+    padding-top:10px;
   }
 
 
+
   .data-chart {
     margin-top: 12px !important;
     margin-bottom: 10px !important;

src/views/screen/logistics/assets/codeBillDialog.vue

@@ -41,8 +41,8 @@
                     position="left"
                   :chart-data="pieData"
                   :legend="pieLegend"
-                  :center="['35%','40%']"    
-                                        
+                  :center="['35%','40%']"
+
                   width="220px"
                   height="180px"
                 />
@@ -84,7 +84,7 @@
                     position="left"
                   :chart-data="lyData"
                   :legend="lyLegend"
-                  :center="['30%','60%']"                             
+                  :center="['30%','60%']"
                   width="400px"
                   height="180px"
                 />
@@ -94,7 +94,7 @@
                     position="left"
                   :chart-data="fwData"
                   :legend="fwLegend"
-                  :center="['30%','60%']"                             
+                  :center="['30%','60%']"
                   width="400px"
                   height="180px"
                 />
@@ -104,7 +104,7 @@
                     position="left"
                   :chart-data="bgData"
                   :legend="bgLegend"
-                  :center="['30%','60%']"                             
+                  :center="['30%','60%']"
                   width="400px"
                   height="180px"
                 />
@@ -118,34 +118,34 @@
                 <span class="title">资产存量</span>
               </div>
               <div class="rightList1">
-                <div class="left-list">                
+                <div class="left-list">
                     <div class="left-info">
                     <div class="name">
                       <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
-                      <div>楼宇</div> 
+                      <div>楼宇</div>
                     </div>
-                    <div class="num">56<span class="unit">m²</span></div>                
+                    <div class="num">56<span class="unit">m²</span></div>
                   </div>
                  </div>
-                 <div class="left-list">                
+                 <div class="left-list">
                     <div class="left-info">
                     <div class="name">
                       <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
-                      <div>服务</div> 
+                      <div>服务</div>
                     </div>
-                    <div class="num">51<span class="unit">m²</span></div>                
+                    <div class="num">51<span class="unit">m²</span></div>
                   </div>
                  </div>
-                 <div class="left-list">                
+                 <div class="left-list">
                     <div class="left-info">
                     <div class="name">
                       <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
-                      <div>办公</div> 
+                      <div>办公</div>
                     </div>
-                    <div class="num">48<span class="unit">m²</span></div>                
+                    <div class="num">48<span class="unit">m²</span></div>
                   </div>
                  </div>
-           
+
               </div>
             </div>
 
@@ -154,73 +154,73 @@
                 <span class="title">资产新增数量</span>
               </div>
               <div class="rightList1">
-                <div class="left-list">                
+                <div class="left-list">
                     <div class="left-info">
                     <div class="name">
                       <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
-                      <div>楼宇</div> 
+                      <div>楼宇</div>
                     </div>
-                    <div class="num">56<span class="unit">m²</span></div>                
+                    <div class="num">56<span class="unit">m²</span></div>
                   </div>
                  </div>
-                 <div class="left-list">                
+                 <div class="left-list">
                     <div class="left-info">
                     <div class="name">
                       <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
-                      <div>服务</div> 
+                      <div>服务</div>
                     </div>
-                    <div class="num">51<span class="unit">m²</span></div>                
+                    <div class="num">51<span class="unit">m²</span></div>
                   </div>
                  </div>
-                 <div class="left-list">                
+                 <div class="left-list">
                     <div class="left-info">
                     <div class="name">
                       <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
-                      <div>办公</div> 
+                      <div>办公</div>
                     </div>
-                    <div class="num">48<span class="unit">m²</span></div>                
+                    <div class="num">48<span class="unit">m²</span></div>
                   </div>
                  </div>
-           
+
               </div>
             </div>
-           
+
             <div class="content">
               <div class="total-cont">
                 <span class="title">资产报废数量</span>
               </div>
               <div class="rightList1">
-                <div class="left-list">                
+                <div class="left-list">
                     <div class="left-info">
                     <div class="name">
                       <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
-                      <div>楼宇</div> 
+                      <div>楼宇</div>
                     </div>
-                    <div class="num">56<span class="unit">m²</span></div>                
+                    <div class="num">56<span class="unit">m²</span></div>
                   </div>
                  </div>
-                 <div class="left-list">                
+                 <div class="left-list">
                     <div class="left-info">
                     <div class="name">
                       <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
-                      <div>服务</div> 
+                      <div>服务</div>
                     </div>
-                    <div class="num">51<span class="unit">m²</span></div>                
+                    <div class="num">51<span class="unit">m²</span></div>
                   </div>
                  </div>
-                 <div class="left-list">                
+                 <div class="left-list">
                     <div class="left-info">
                     <div class="name">
                       <div> <img src="@/assets/images/service_new/liveSwin.png"></div>
-                      <div>办公</div> 
+                      <div>办公</div>
                     </div>
-                    <div class="num">48<span class="unit">m²</span></div>                
+                    <div class="num">48<span class="unit">m²</span></div>
                   </div>
                  </div>
-           
+
               </div>
             </div>
-   
+
       </div>
 
       <div class="dialog-right">
@@ -245,10 +245,10 @@
             >
              直属单位
             </div>
-           
+
                </div>
               </div>
-              <div class="charts-cont" v-if="showBox === 'province'"> 
+              <div class="charts-cont" v-if="showBox === 'province'">
                   <bar-chart
                     :chart-data="nowBuildingAreaBarData"
                     :x-axis="nowBuildingAreaBarAxis"
@@ -258,8 +258,8 @@
                     width="500px"
                     height="160px"
                   />
-                </div> 
-                <div class="charts-cont" v-else-if="showBox === 'region'"> 
+                </div>
+                <div class="charts-cont" v-else-if="showBox === 'region'">
                   <bar-chart
                     :chart-data="regBuildingAreaBarData"
                     :x-axis="regBuildingAreaBarAxis"
@@ -269,7 +269,7 @@
                     width="500px"
                     height="160px"
                   />
-                </div>                  
+                </div>
             </div>
 
             <div class="content">
@@ -281,14 +281,14 @@
             :chart-data="addBuildingAreaBarData"
             :x-axis="addBuildingAreaBarAxis"
             :yAxis="addBuildingAreaBarYaxis"
-            
-      
+
+
             y-color="#FFF"
             l-color="#FFF"
             width="500px"
             height="160px"
           />
-            </div>              
+            </div>
             </div>
 
             <div class="content">
@@ -300,14 +300,14 @@
             :chart-data="jueBuildingAreaBarData"
             :x-axis="jueBuildingAreaBarAxis"
             :yAxis="jueBuildingAreaBarYaxis"
-           
-          
+
+
             y-color="#FFF"
             l-color="#FFF"
             width="500px"
             height="160px"
           />
-            </div>              
+            </div>
             </div>
 
             <div class="content">
@@ -321,41 +321,41 @@
                     <div class="name">
                       <div></div>
                       <div> 巡检执行数量</div>
-                     
+
                     </div>
-                    <div class="num">56<span class="unit">个</span></div>                
+                    <div class="num">56<span class="unit">个</span></div>
                   </div>
                  </div>
                  <div class="left-list">
                    <img src="@/assets/images/service_new/grow.png">
                     <div class="left-info">
                     <div class="name">巡检异常数量</div>
-                    <div class="num">42<span class="unit">个</span></div>                
+                    <div class="num">42<span class="unit">个</span></div>
                   </div>
                  </div>
                  <div class="left-list">
                    <img src="@/assets/images/service_new/grow.png">
                     <div class="left-info">
                     <div class="name">检修记录数</div>
-                    <div class="num">51<span class="unit">个</span></div>                
+                    <div class="num">51<span class="unit">个</span></div>
                   </div>
                  </div>
                  <div class="left-list">
                    <img src="@/assets/images/service_new/grow.png">
                     <div class="left-info">
                     <div class="name">维保记录数量</div>
-                    <div class="num">24<span class="unit">个</span></div>                
+                    <div class="num">24<span class="unit">个</span></div>
                   </div>
                  </div>
                  <div class="left-list">
                    <img src="@/assets/images/service_new/setting.png">
                     <div class="left-info">
                     <div class="name">重点设备巡检覆盖率</div>
-                    <div class="num">63<span class="unit">个</span></div>                
+                    <div class="num">63<span class="unit">个</span></div>
                   </div>
                  </div>
               </div>
-          
+
             </div>
           </div>
         </div>
@@ -397,7 +397,7 @@ export default {
           name: "办公资产占比",
           tab: "logistics",
         },
-    
+
       ],
       Boxtabs: [
         {
@@ -408,8 +408,8 @@ export default {
           name: "直属单位",
           tab: "region",
         },
-    
-    
+
+
       ],
       pieData: [
         { value: 24.15, name: "楼宇" },
@@ -425,7 +425,7 @@ export default {
         textStyle: {
           color: "#FFF",
         },
-      
+
       },
       pieCenter: ["50%", "40%"],
       //楼宇资产占比
@@ -446,7 +446,7 @@ export default {
         textStyle: {
           color: "#FFF",
         },
-      
+
       },
       //服务资产占比
       fwData: [
@@ -466,7 +466,7 @@ export default {
         textStyle: {
           color: "#FFF",
         },
-      
+
       },
       //办公资产占比
       bgData: [
@@ -474,7 +474,7 @@ export default {
         { value: 24.15, name: "电气" },
         { value: 44.15, name: "楼宇通风" },
         { value: 24.15, name: "供热采暖" },
-   
+
       ],
       bgLegend: {
         top: 25,
@@ -485,7 +485,7 @@ export default {
         textStyle: {
           color: "#FFF",
         },
-      
+
       },
       //地市
       nowBuildingAreaBarData: [
@@ -567,7 +567,7 @@ export default {
           "太原市",
           "大同市",
           "长治市",
-       
+
         ],
         axisLabel: {
           color: "white", // 设置横坐标轴字体颜色为红色
@@ -619,7 +619,7 @@ export default {
           barWidth: 15,
           data: [40, 80, 45, 40, 70, 75,65,40,75,70,50,85],
         },
-        
+
       ],
       addBuildingAreaBarAxis: {
         type: "category",
@@ -685,7 +685,7 @@ export default {
           barWidth: 15,
           data: [30, 50, 40, 30, 60, 45,55,30,45,50,30,55],
         },
-        
+
       ],
       jueBuildingAreaBarAxis: {
         type: "category",
@@ -1137,7 +1137,7 @@ export default {
           font-size: 14px;
           font-weight: bold;
            background: url("../../../../assets/images/main/choose_bg_long.png") no-repeat;
-         // background-size: 95% 95%;
+           background-size: 95% 70%;
           color: #CED6D6;
           cursor: pointer;
         }

src/views/screen/logistics/menu_bar.vue

@@ -2,12 +2,12 @@
   <div class="main-data menu-operation">
     <div class="menu-cont">
       <div class="menu-item">
-        <div :class="'menu-list ' + (active===1 ? 'cur' : '')" @click="jumpPage(1)">后勤资产</div>
+        <!-- <div :class="'menu-list ' + (active===1 ? 'cur' : '')" @click="jumpPage(1)">后勤资产</div>
         <div :class="'menu-list ' + (active===2 ? 'cur' : '')" @click="jumpPage(2)">房产土地</div>
-        <div :class="'menu-list ' + (active===3 ? 'cur' : '')" @click="jumpPage(3)">工程项目</div>
+        <div :class="'menu-list ' + (active===3 ? 'cur' : '')" @click="jumpPage(3)">工程项目</div> -->
         <!-- <div :class="'menu-list ' + (active===4 ? 'cur' : '')" @click="jumpPage(4)">公务用车</div> -->
       </div>
-      <div class="back-item" v-if="active > 0" @click="back"></div>
+      <!-- <div class="back-item" v-if="active > 0" @click="back"></div> -->
     </div>
   </div>
 </template>
@@ -101,7 +101,7 @@ export default {
       background: url("../../../assets/images/back.png")
       no-repeat;
       background-size: 100% 100%;
-      cursor: pointer;  
+      cursor: pointer;
       position: absolute;
       left: 538px;
      bottom: -42px;

src/views/screen/official/terminalDataDialog.vue

@@ -4,105 +4,150 @@
     @click.stop="preventDefault"
     @mouseleave="leaveFun"
   >
-    <div class="dialog-title">
-      <img src="@/assets/images/main/cont_title_bg.png" />
-      <div class="title">各单位终端数据</div>
-    </div>
+<!--    <div class="dialog-title">-->
+<!--      <img src="@/assets/images/main/cont_title_bg.png" />-->
+<!--      <div class="title">资源台账</div>-->
+<!--    </div>-->
+<!--    <div class="dialog-cont">-->
+<!--      <div class="dialog-left">-->
+<!--        <div class="dialog-list">-->
+
+<!--        </div>-->
+<!--      </div>-->
+<!--    </div>-->
     <div class="dialog-cont">
       <div class="dialog-left">
+        <div class="content-title long">
+          <span class="title">公务车实有数</span>
+        </div>
         <div class="dialog-list">
           <div class="content-left">
-            <div class="content-title">
-              <span class="title">终端设备整体在线率</span>
+            <div class="dialog-list">
+              <div class=" content-our">
+                <div class="content-two">
+                  <div class="img-car">
+                    <img src="@/assets/images/main/choose_bg9.png">
+                  </div>
+                    <div class="data-snd">
+                      <div class="names">56<span class="nums">万辆</span></div>
+                    </div>
+                </div>
+              </div>
+              <div class="saddddf">
+                <div class="naw">车辆用途</div>
+                <div class="content">
+                  <div class="charts-cont">
+                    <pie-chart
+                      :chart-data="pieData"
+                      :legend="pieLegend"
+                      :center="pieCenter"
+                      width="220px"
+                      height="140px"
+                    />
+                  </div>
+                </div>
+              </div>
             </div>
-            <div class="content">
-              <div class="rate-area">
-                <img
-                  src="@/assets/images/main/rate_bg.png"
-                  class="icon"
-                  alt=""
-                />
-                <div class="rate">
-                  <div class="rate-data">
-                    <div class="data">56</div>
-                    <div class="unit">%</div>
+            <div class="dialog-list">
+              <div>
+                <div class="naw">车辆类型</div>
+                <div class="content">
+                  <div class="charts-cont">
+                    <pie-chart
+                      :chart-data="totalPieData"
+                      :legend="totalPieLegend"
+                      :center="totalCenter"
+                      width="220px"
+                      height="140px"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div>
+                <div class="naw">动力类型</div>
+                <div class="content">
+                  <div class="charts-cont">
+                    <pie-chart
+                      :chart-data="catePieData"
+                      :legend="catePieLegend"
+                      :center="catePieCenter"
+                      width="220px"
+                      height="140px"
+                    />
                   </div>
-                  <div class="desc">整体在线率</div>
                 </div>
               </div>
             </div>
+            </div>
           </div>
+      </div>
+        <div class="content-area">
+         <div class="contentr-left"  >
+           <div class="dialog-item wid100">
+             <div class="content-title">
+               <span class="title">公务车编制概况</span>
+             </div>
+             <div>
+               <div class="content-maper">
+                 <div class="content-one">
+                   <div class="img-car">
+                     <img src="@/assets/images/main/choose_bg9.png">
+                   </div>
+                   <div class="">
+                     <div class="namer">公务车编制数</div>
+                     <div class="names">56<span class="nums">万辆</span></div>
+                   </div>
+                 </div>
+               </div>
+               <div class="content-maper">
+                 <div class="content-one">
+                   <div class="img-car">
+                     <img src="@/assets/images/main/choose_bg9.png">
+                   </div>
+                   <div class="">
+                     <div class="namer">公务车缺勤率</div>
+                     <div class="names">56<span class="nums">%</span></div>
+                   </div>
+                 </div>
+               </div>
+             </div>
+           </div>
+         </div>
           <div class="content-right">
-            <div class="content-title">
-              <span class="title">设备在线数</span>
-            </div>
-            <div class="content">
-              <div class="data-content flex-row align-items-center">
-                <div class="data-left">
-                  <div class="data-item">
-                    <div class="data-fir">
-                      <img
-                        src="@/assets/images/service_new/img_2.png"
-                        class="icon"
-                      />
-                      <div class="name">离线数</div>
-                    </div>
-                    <div class="data-snd">
-                      <div class="num">56</div>
-                      <div class="unit">个</div>
+            <div class="dialog-item wid100">
+              <div class="content-title">
+                <span class="title">公务车年度车辆数</span>
+              </div>
+              <div class="">
+                <div class="content">
+                  <div class="rate-area">
+                    <img src="@/assets/images/main/rate_bg.png" class="img-car" alt="" />
+                    <div class="rate">
+                      <div class="rate-data">
+                        <div class="data">56</div>
+                        <div class="unit">%</div>
+                      </div>
+                      <div class="desc">整体在线率</div>
                     </div>
                   </div>
-                  <div class="data-item">
-                    <div class="data-fir">
-                      <img
-                        src="@/assets/images/service_new/img_1.png"
-                        class="icon"
-                      />
-                      <div class="name">在线数</div>
-                    </div>
-                    <div class="data-snd">
-                      <div class="num">56</div>
-                      <div class="unit">个</div>
+                </div>
+              </div>
+              <div class="">
+                <div class="content">
+                  <div class="rate-area">
+                    <img src="@/assets/images/main/rate_bg.png" class="img-car" alt="" />
+                    <div class="rate">
+                      <div class="rate-data">
+                        <div class="data">56</div>
+                        <div class="unit">%</div>
+                      </div>
+                      <div class="desc">整体在线率</div>
                     </div>
                   </div>
                 </div>
-                <div class="data-right">
-                  <pie-chart
-                    position="left"
-                    :chart-data="pieData"
-                    :legend="pieLegend"
-                    :center="pieCenter"
-                    :radius="pieRadius"
-                    width="150px"
-                    height="150px"
-                  />
-                </div>
               </div>
-            </div>
-          </div>
-        </div>
 
-        <div class="dialog-list">
-          <div class="dialog-item wid100">
-            <div class="content-title long">
-              <span class="title">各单位终端设备在线情况</span>
-            </div>
-            <div class="data-chart">
-              <!--              <div class="choose-area flex-row align-items-center">
-                <div class="choose-item">年度统计</div>
-                <div class="choose-item">2024年</div>
-              </div>-->
-              <bar-chart
-                :chart-data="barData"
-                :x-axis="barAxis"
-                :y-axis="barYAxis"
-                :grid="barGrid"
-                :legend="barLegend"
-                y-color="#FFF"
-                l-color="#FFF"
-                width="500px"
-                height="300px"
-              />
+              </div>
             </div>
           </div>
         </div>
@@ -113,11 +158,6 @@
               <span class="title">各单位车辆预警统计列表</span>
             </div>
             <div class="content">
-              <!--              <div class="choose-area flex-row align-items-center">-->
-              <!--                <div class="choose-item">单位</div>-->
-              <!--                <div class="choose-item">异动类型</div>-->
-              <!--                <div class="choose-item">预警排序</div>-->
-              <!--              </div>-->
               <div class="list-area">
                 <div class="list-item list-title">
                   <div class="item item-1">序号</div>
@@ -134,14 +174,7 @@
                   class="list-item"
                 >
                   <div class="item item-1">{{ index + 1 }}</div>
-                  <!-- <el-tooltip
-                    class="item"
-                    effect="dark"
-                    L:content="item.name"
-                    placement="top-start"
-                  > -->
                     <div class="item item-2">{{ item.name }}</div>
-                  <!-- </el-tooltip> -->
                   <div class="item item-3">{{ item.data1 }}</div>
                   <div class="item item-4">{{ item.data2 }}</div>
                   <div class="item item-5">{{ item.data3 }}</div>
@@ -154,7 +187,6 @@
         </div>
       </div>
     </div>
-  </div>
 </template>
 
 <script>
@@ -175,10 +207,50 @@ export default {
     return {
       //在线数
       pieData: [],
+      catePieData: [
+        { value: 40, name: "新能源汽车" },
+        { value: 20, name: "燃油汽车" },
+      ],
+      totalPieData: [
+        { value: 110, name: "商务车" },
+        { value: 120, name: "越野车" },
+        { value: 130, name: "小型客车" },
+        { value: 140, name: "大型客车" },
+        { value: 150, name: "小轿车" },
+      ],
+      catePieLegend: {
+        orient: "vertical",
+        top: 60,
+        right: 23,
+        itemWidth: 8, // 设置图例标记的宽度
+        itemHeight: 8, // 设置图例标记的高度
+        textStyle: {
+          color: "#FFF",
+        },
+      },
+      totalPieLegend: {
+        top: 20,
+        right: 10,
+        itemWidth: 8,
+        itemHeight: 8,
+        orient: "vertical",
+        textStyle: {
+          color: "#FFF",
+        },
+      },
       pieLegend: {
-        show: false,
+        orient: "vertical",
+        top: 50,
+        right: 30,
+        itemWidth: 8, // 设置图例标记的宽度
+        itemHeight: 8, // 设置图例标记的高度
+        textStyle: {
+          color: "#FFF",
+        },
       },
-      pieCenter: ["50%", "50%"],
+      pieCenter: ["27%", "50%"],
+      totalCenter: ["30%", "50%"],
+      catePieCenter: ["27%", "50%"],
       pieRadius: ["35%", "50%"],
 
       //各单位终端在线
@@ -599,7 +671,7 @@ export default {
     width: 100%;
     display: flex;
     justify-content: space-between !important;
-    margin-bottom: 20px;
+    margin-bottom: 0px;
 
     .dialog-item {
       width: calc(50% - 20px);
@@ -645,7 +717,6 @@ export default {
   }
 
   .content {
-    margin-top: 20px;
     .title-format {
       display: flex;
       flex-direction: row;
@@ -706,7 +777,6 @@ export default {
     }
   }
   .content {
-    margin-top: 20px;
     .title-format {
       display: flex;
       flex-direction: row;
@@ -1004,7 +1074,92 @@ export default {
     width: 3px;
     height: 3px;
   }
+  .content-left{
+    width: 520px;
+    height:320px;
+    float: left;
+  }
+  .content-our{
+    width: 50%;
+    height: 130px;
+    display: flex;
+    padding-top: 40px;
+    padding-left: 10px;
+    //align-items: center;
+    .img-car{
+      width: 105px;
+      height: 81px;
+    }
+    .content-two{
+      width: 181.5px;
+      height: 81px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .names{
+      font-size: 32px;
+      color:#00FFFF;
+      font-family: 'electronicFont';
+      .nums{
+        font-size:10px;
+        color:#00FFFF;
+        font-weight: 500;
+        position: relative;
 
+        left:2px;
+      }
+    }
+  }
+  .saddddf{
+    display: flex;
+    flex-direction: column;
+
+  }
+  .naw{
+    color: white;
+  }
+  .content-area {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 15px 20px 0 15px;
+  }
+  .contentr-left{
+    width: 520px;
+    height:240px;
+    float: left;
+  }
+  .content-right{
+    width: 520px;
+    height:240px;
+    float: left;
+  }
+  .content-one{
+    display: flex;
+    justify-content: center; /* 水平居中 */
+    align-items: center;    /* 垂直居中 */
+    height: 100%;           /* 确保父容器有高度 */
+  }
+  .names{
+    font-size: 32px;
+    color:#00FFFF;
+    font-family: 'electronicFont';
+    .nums{
+      font-size:10px;
+      color:#00FFFF;
+      font-weight: 500;
+      position: relative;
+
+      left:2px;
+    }
+
+  }
+  .namer{
+    color: white;
+    font-size: 10px;
+  }
   ::-webkit-scrollbar-thumb {
     //滑块部分
     // border-radius: 5px;
@@ -1019,4 +1174,3 @@ export default {
   }
 }
 </style>
-

vue.config.js

@@ -35,7 +35,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://192.168.110.244:8115/large`,
+        target: `http://192.168.110.130:8115`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''