"工程现场监控"

src/views/screen/engineering/currentArea.vue

@@ -4,83 +4,276 @@
       <span>当前区域数据</span>
     </div> -->
     <div class="content-area">
-      <img src="@/assets/images/main/data_bg6.png" class="bg" />
+<!--      <img src="@/assets/images/main/data_bg6.png" class="bg" />-->
 
       <!-- 摄像头列表 -->
       <div class="content">
         <div class="content-title long">
-          <span class="title">摄像头列表</span>
+          <span class="title">问题台账统计</span>
         </div>
-        <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.abbreviation}}</div>
+        <div class="sddha">
+          <div class="data-asgeh">
+            <div class="asdakda">
+              <div>
+                <img src="@/assets/images/service_new/img_1.png"/>
+              </div>
+              <div>本周检查项目数量</div>
             </div>
+            <div >
+              <div class="num">56 <span class="unit">个</span></div>
+            </div>
+          </div>
+          <div class="data-asgeh">
+            <div class="asdakda">
+              <div>
+                <img src="@/assets/images/service_new/img_1.png"/>
+              </div>
+              <div>问题数量</div>
+            </div>
+            <div class="num">56 <span class="unit">个</span></div>
+          </div>
+          <div class="data-asgeh">
+            <div class="asdakda">
+              <div>
+                <img src="@/assets/images/service_new/img_1.png"/>
+              </div>
+              <div>已整改数量</div>
+            </div>
+            <div class="num">56 <span class="unit">个</span></div>
           </div>
         </div>
       </div>
     </div>
+<!--    近一周问题列表/-->
+    <div class="content-ear">
+      <div class="content">
+        <div class="content-title long">
+          <span class="title">近一周问题列表</span>
+        </div>
+        <div class="table-cont">
+          <div class="table-top">
+            <div class="fir">时间</div>
+            <div class="snd">标题</div>
+            <div class="thd">问题状况</div>
+          </div>
+          <div class="table-roll">
+            <div class="table-bot">
+              <div class="table-list">
+                <div class="said"></div>
+                <div class="fir">2024/12/28</div>
+                <div class="snd">施工整改问题1</div>
+                <div class="smail"></div>
+                <div class="thd">处理中</div></div>
+            </div>
+            <div class="table-bot">
+              <div class="table-list">
+                <div class="said"></div>
+                <div class="fir">2024/12/28</div>
+                <div class="snd">施工整改问题1</div>
+                <div class="smail"></div>
+                <div class="thd">处理中</div></div>
+            </div>
+            <div class="table-bot">
+              <div class="table-list">
+                <div class="said"></div>
+                <div class="fir">2024/12/28</div>
+                <div class="snd">施工整改问题1</div>
+                <div class="smail"></div>
+                <div class="thd">处理中</div></div>
+            </div>
+            <div class="table-bot">
+              <div class="table-list">
+                <div class="said"></div>
+                <div class="fir">2024/12/28</div>
+                <div class="snd">施工整改问题1</div>
+                <div class="smail"></div>
+                <div class="thd">处理中</div></div>
+            </div>
+            <div class="table-bot">
+              <div class="table-list">
+                <div class="said"></div>
+                <div class="fir">2024/12/28</div>
+                <div class="snd">施工整改问题1</div>
+                <div class="smail"></div>
+                <div class="thd">处理中</div></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+<!--    本周检查计划-->
+    <div class="content-ear">
+      <div class="content">
+        <div class="content-title long">
+          <span class="title">本周检查计划</span>
+        </div>
+        <div class="table-cont">
+          <div class="table-top">
+            <div class="fir">检查日期</div>
+            <div class="snd">所属项目</div>
+            <div class="thd">检查内容</div>
+            <div class="fir">负责人员</div>
+          </div>
+          <div class="table-roll">
+            <div class="table-bot">
+             <div class="table-roll">
+               <div class="table-list">
+                 <div class="said"></div>
+                 <div class="fir">12/17</div>
+                 <div class="snd">山西电网</div>
+                 <div class="thd">监控接入情况</div>
+                 <div class="fir">张三</div>
+               </div>
+               <div class="table-list">
+                 <div class="said"></div>
+                 <div class="fir">12/17</div>
+                 <div class="snd">山西电网</div>
+                 <div class="thd">监控接入情况</div>
+                 <div class="fir">张三</div>
+               </div>
+               <div class="table-list">
+                 <div class="said"></div>
+                 <div class="fir">12/17</div>
+                 <div class="snd">山西电网</div>
+                 <div class="thd">监控接入情况</div>
+                 <div class="fir">张三</div>
+               </div>
+               <div class="table-list">
+                 <div class="said"></div>
+                 <div class="fir">12/17</div>
+                 <div class="snd">山西电网</div>
+                 <div class="thd">监控接入情况</div>
+                 <div class="fir">张三</div>
+               </div>
+               <div class="table-list">
+                 <div class="said"></div>
+                 <div class="fir">12/17</div>
+                 <div class="snd">山西电网</div>
+                 <div class="thd">监控接入情况</div>
+                 <div class="fir">张三</div>
+               </div>
+               <div class="table-list">
+                 <div class="said"></div>
+                 <div class="fir">12/17</div>
+                 <div class="snd">山西电网</div>
+                 <div class="thd">监控接入情况</div>
+                 <div class="fir">张三</div>
+               </div>
+
+               <div class="table-list">
+                 <div class="said"></div>
+                 <div class="fir">12/17</div>
+                 <div class="snd">山西电网</div>
+                 <div class="thd">监控接入情况</div>
+                 <div class="fir">张三</div>
+               </div>
+               <div class="table-list">
+                 <div class="said"></div>
+                 <div class="fir">12/17</div>
+                 <div class="snd">山西电网</div>
+                 <div class="thd">监控接入情况</div>
+                 <div class="fir">张三</div>
+               </div>
+             </div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+<!--    本周施工计划-->
+    <div class="content-ear">
+      <div class="content">
+        <div class="content-title long">
+          <span class="title">本周施工计划</span>
+        </div>
+        <div style="display: flex;flex-wrap: nowrap;overflow: auto">
+          <div class="table-five">
+            <div class="table-top">
+              <div class="fir">所属项目</div>
+              <div class="snd">施工内容</div>
+              <div class="thd">开始日期</div>
+              <div class="fir">结束日期</div>
+              <div class="fiv">负责人</div>
+            </div>
+            <div class="table-bot">
+              <div class="table-roll">
+                <div class="table-list">
+                  <div class="fir">山西电网</div>
+                  <div class="snd">楼宇施工</div>
+                  <div class="thd">2024/12/27</div>
+                  <div class="fir">2025/12/27</div>
+                  <div class="fiv">张三</div>
+                </div>
+                <div class="table-list">
+                  <div class="fir">山西电网</div>
+                  <div class="snd">楼宇施工</div>
+                  <div class="thd">2024/12/27</div>
+                  <div class="fir">2025/12/27</div>
+                  <div class="fiv">张三</div>
+                </div>
+                <div class="table-list">
+                  <div class="fir">山西电网</div>
+                  <div class="snd">楼宇施工</div>
+                  <div class="thd">2024/12/27</div>
+                  <div class="fir">2025/12/27</div>
+                  <div class="fiv">张三</div>
+                </div>
+                <div class="table-list">
+                  <div class="fir">山西电网</div>
+                  <div class="snd">楼宇施工</div>
+                  <div class="thd">2024/12/27</div>
+                  <div class="fir">2025/12/27</div>
+                  <div class="fiv">张三</div>
+                </div>
+                <div class="table-list">
+                  <div class="fir">山西电网</div>
+                  <div class="snd">楼宇施工</div>
+                  <div class="thd">2024/12/27</div>
+                  <div class="fir">2025/12/27</div>
+                  <div class="fiv">张三</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
   </div>
+
 </template>
 
 <script>
 import LineChart from "@/components/Echarts/LineChart.vue";
 import echarts from "echarts";
-import {videoList} from "@/api/screen/service";
+import {getCanteenData, getCanteenNameList, videoList} from "@/api/screen/service";
+import BarChart from "@/components/Echarts/BarChart.vue";
 
 export default {
-  name: "CurrentArea",
+  name: "Canteen",
   components: {
-    LineChart,
+    BarChart
   },
   props: {
-    monitorName:{
-      type: String,
-      default: "",
-      required: true,
-    },
     appOrg: {
       type: String,
       default: "0000",
     },
   },
   watch:{
-    appOrg(newVal, oldVal){
-      this.monitorList = [];
-      setTimeout(()=>{
-        this.videoList();
-      },100)
-    }
   },
   data() {
-    return {
-      monitorList: [],
-    };
   },
   created() {
-    this.videoList();
   },
   destroyed() {},
   beforeDestroy() {},
   mounted() {},
   methods: {
-    //统一视频（工程现场监控）
-    videoList() {
-      let code = "";
-      videoList(code).then((res) => {
-        if (Number(res.code) === 200) {
-          this.monitorList = res.data
-        }
-      });
-    },
+  }
+}
 
-    //选择单个摄像头
-    chooseMonitor(index){
-      this.$emit("chooseMonitor", this.monitorList[index]);
-    }
-  },
-};
 </script>
 
 <style lang="scss">
@@ -92,9 +285,8 @@ export default {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
-    justify-content: space-between;
+    justify-content: flex-start;
     padding: 15px 20px 0 15px;
-    height: calc(100% - 52px);
     overflow: auto;
 
     .bg{
@@ -107,10 +299,31 @@ export default {
       z-index:-5;
     }
   }
+  .content-ear {
+    width: 100%;
+    height: 210px;
+    display: flex;
+    margin-top: 30px;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 15px 20px 0 15px;
+    overflow: auto;
 
+    .bg{
+      display: block;
+      width:calc(100% - 40px);
+      height:auto;
+      position: absolute;
+      left:20px;
+      bottom:40px;
+      z-index:-5;
+    }
+  }
   .content {
     margin-top: 10px;
     width: 100%;
+    flex-direction: row;
     .title-format {
     display: flex;
     flex-direction: row;
@@ -132,17 +345,54 @@ export default {
       }
     }
   }
+    .sddha{
+      display: flex;
+      margin-left: 20px;
+      align-items: flex-start;
+      justify-content: flex-start;
+
+      .data-asgeh{
+        display: flex;
+        flex-direction: column;
+        padding-top: 12px;
+        padding-left: 10px;
+        padding-right: 50px;
+        justify-content: flex-end;
+      }
+      .asdakda{
+        display: flex;
+        font-size:14px;
+        color:#FFFFFF;
+        justify-content: space-around;
+      }
+    }
+    .num{
+      font-size: 26px;
+      color: #00FFFF;
+      font-weight: bold;
+      font-family: "electronicFont";
+    }
+    .unit{
+      font-size: 12px;
+      color: #00FFFF;
+      font-weight: 500;
+      position: relative;
+      right:4px
+    }
+
+
     .data-list {
       display: flex;
       flex-direction: row;
       align-items: center;
-      justify-content: space-between;
-      width: 100%;
+      justify-content: flex-start;
+      width: 30%;
       .data-item {
         display: flex;
-        flex-direction: column;
+        flex-direction: row;
         justify-content: center;
         flex: 1;
+        width: 30%;
         border-right: 1px solid rgba(25, 252, 222, 0.2);
         margin-right: 20px;
         .data-detail {
@@ -170,6 +420,123 @@ export default {
     }
   }
 
+  .table-cont{
+    width: 100%;
+
+    .table-roll{
+      width: 100%;
+      height: 120px;
+      overflow: auto;
+    }
+    .table-top{
+
+      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%;
+      padding: 5px 0px;
+
+      .table-list{
+        width:100%;
+        height:30px;
+        padding:5px 25px 0 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size:14px;
+        color:#FFFFFF;
+        font-weight: 500;
+      }
+    }
+
+    .fir{
+      width:40%;
+      text-align: left;
+      margin-left: 5px;
+    }
+    .snd{
+      width:30%;
+      text-align: left;
+    }
+    .thd{
+      width:30%;
+      left: 3px;
+      text-align: left;
+    }
+  }
+  .table-five{
+    width: 600px;
+
+    .table-roll{
+      width: 100%;
+      height: 120px;
+      overflow: auto;
+    }
+    .table-top{
+
+      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%;
+      padding: 5px 0px;
+
+      .table-list{
+        width:100%;
+        height:30px;
+        padding:5px 25px 0 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size:14px;
+        color:#FFFFFF;
+        font-weight: 500;
+      }
+    }
+
+    .fir{
+
+      text-align: left;
+      margin-left: 5px;
+    }
+    .snd{
+
+      text-align: left;
+    }
+    .thd{
+
+      left: 3px;
+      text-align: left;
+    }
+  }
+
+  .said{
+    width: 1px;
+    height: 13px;
+    background-color: #00FFFF;
+  }
+  .smail{
+    width: 8px;
+    height: 8px;
+    background: #FAAD14;
+    border-radius: 50%;
+    border: 1px solid #FFDE9E;
+  }
   .content-title {
     width: 230px;
     height: 26px;
@@ -186,6 +553,7 @@ export default {
       top:-5px !important;
     }
   }
+
   .content-title.long {
     width: 100%;
     background: url("../../../assets/images/main/title_pro_long.png") no-repeat !important;
@@ -244,6 +612,7 @@ export default {
     }
   }
 
+
   ::-webkit-scrollbar {
     display: none;
     width: 3px;

src/views/screen/engineering/main.vue

@@ -17,6 +17,21 @@
           <!-- <monitoring v-if="menu === 1"></monitoring>
           <monitoring-video v-if="menu === 2"></monitoring-video> -->
         </div>
+        <div class="left-top">
+          <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>
+          <div class="components-item">
+            <unit-access-to :key="appOrg"></unit-access-to>
+          </div>
+          <!-- <monitoring v-if="menu === 1"></monitoring>
+          <monitoring-video v-if="menu === 2"></monitoring-video> -->
+        </div>
       </div>
     </div>
     <div class="middle flex-column">
@@ -125,7 +140,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">
             <current-area @chooseMonitor="onChooseMonitor" :monitorName="monitorName" :key="appOrg"></current-area>
@@ -158,6 +173,7 @@
 <script>
 import Province from "../map/province.vue";
 import UnitAccess from "./unitAccess.vue";
+import UnitAccessTo from "./unitAccessto.vue";
 import CameraOnline from "./cameraOnline.vue";
 import CurrentArea from "./currentArea.vue";
 import Monitoring from "./monitoring.vue";
@@ -173,6 +189,7 @@ export default {
   components: {
     Province,
     UnitAccess,
+    UnitAccessTo,
     CameraOnline,
     CurrentArea,
     Monitoring,
@@ -358,10 +375,11 @@ export default {
     }
     .components-item {
       width: 550px;
-      height: 849px;
-      background: url("../../../assets/images/main/components_long_bg.png")
-        no-repeat;
+      height: 389px;
+      background: url("../../../assets/images/main/components_mid_bg.png")
+      no-repeat;
       background-size: cover;
+      margin-bottom: 28px;
       margin-left: 15px;
       overflow: hidden;
     }

src/views/screen/engineering/unitAccess.vue

@@ -6,61 +6,68 @@
         <div class="data-list flex-row align-items-center flex-wrap">
           <div v-for="(item, index) in dataList" :key="index" class="data-item">
             <div class="title-format">
-              <img src="@/assets/images/main/blue.png" class="icon" alt="" />
-              <div class="title-info">
-                <span>{{ item.name }}</span>
+<!--              <img src="@/assets/images/main/blue.png" class="icon" alt="" />-->
+<!--              title-info-->
+              <div class="content-title long">
+                <span class="title">{{ item.name }}</span>
               </div>
             </div>
             <div class="data-detail">
+              <img   :src="item.image">
               <div class="data">{{ item.num }}</div>
               <div class="unit">{{ item.unit }}</div>
             </div>
           </div>
         </div>
+<!--折线图-->
+<!--        <div class="chart-item" style="margin-top:10px;">-->
+<!--          <line-chart-->
+<!--            v-if="show"-->
+<!--            :chart-data="lineData"-->
+<!--            :x-axis="lineAxis"-->
+<!--            :yAxis="lineYAxis"-->
+<!--            y-color="#FFF"-->
+<!--            l-color="#FFF"-->
+<!--            width="520px"-->
+<!--            height="160px"-->
+<!--          />-->
+<!--        </div>-->
+<!--        <div class="chart-item">-->
+<!--          <line-chart-->
+<!--            v-if="show"-->
+<!--            :chart-data="onlineData"-->
+<!--            :x-axis="onlineAxis"-->
+<!--            :yAxis="onlineYAxis"-->
+<!--            y-color="#FFF"-->
+<!--            l-color="#FFF"-->
+<!--            width="520px"-->
+<!--            height="160px"-->
+<!--          />-->
+<!--        </div>-->
 
-        <div class="chart-item" style="margin-top:10px;">
-          <line-chart
-            v-if="show"
-            :chart-data="lineData"
-            :x-axis="lineAxis"
-            :yAxis="lineYAxis"
-            y-color="#FFF"
-            l-color="#FFF"
-            width="520px"
-            height="160px"
-          />
-        </div>
-        <div class="chart-item">
-          <line-chart
-            v-if="show"
-            :chart-data="onlineData"
-            :x-axis="onlineAxis"
-            :yAxis="onlineYAxis"
-            y-color="#FFF"
-            l-color="#FFF"
-            width="520px"
-            height="160px"
-          />
-        </div>
-
-        <div class="table-cont">
-          <div class="table-top">
-            <div class="fir">单位名称</div>
-            <div class="snd">已接入摄像头数量</div>
-            <div class="thd">已接入摄像头在线数量</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 class="thd color">{{item.onLineNum}}</div>
-            </div>
-          </div>
-        </div>
-
-
+<!--        <div class="table-cont">-->
+<!--          <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>-->
+<!--          <div class="table-top">-->
+<!--            <div class="fir">单位名称</div>-->
+<!--            <div class="snd">企业数量</div>-->
+<!--            <div class="thd">摄像头数量</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 class="thd color">{{item.onLineNum}}</div>-->
+<!--            </div>-->
+<!--          </div>-->
+<!--        </div>-->
       </div>
-
     </div>
   </div>
 </template>
@@ -103,8 +110,12 @@ export default {
         containLabel: true,
         bottom: 0,
       },
+      imgList:[
+        require('../../../assets/images/main/choose_bg6.png'),
+      ],
       dataList: [
         {
+
           name: "接入单位数量",
           num: "56",
           unit: "个",
@@ -200,31 +211,37 @@ export default {
       setTimeout(()=>{
         this.dataList = [
           {
+            image: require('../../../assets/images/main/choose_bg8.png'),
             name: "接入单位数量",
             num: "56",
             unit: "个",
           },
           {
+            image: require('../../../assets/images/main/choose_bg7.png'),
             name: "应接入项目数量",
             num: "56",
             unit: "个",
           },
           {
+            image: require('../../../assets/images/main/choose_bg7.png'),
             name: "已接入项目数量",
             num: "56",
             unit: "个",
           },
           {
+            image: require('../../../assets/images/main/choose_bg6.png'),
             name: "已接入摄像头数量",
             num: "56",
             unit: "个",
           },
           {
+            image: require('../../../assets/images/main/choose_bg6.png'),
             name: "已接入摄像头在线数量",
             num: "56",
             unit: "个",
           },
           {
+            image: require('../../../assets/images/main/choose_bg6.png'),
             name: "已接入摄像头在线率",
             num: "56",
             unit: "%",
@@ -367,7 +384,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .data-unit-access {
   height: 100%;
   overflow: hidden;
@@ -377,7 +394,7 @@ export default {
     align-items: flex-start;
     justify-content: space-between;
     padding: 15px 20px 0 15px;
-    height: calc(100% - 52px);
+    height: calc(100% - 10px);
     overflow: auto;
   }
 
@@ -421,6 +438,22 @@ export default {
         }
       }
     }
+  .content-title {
+    width: 244px;
+    height: 33px;
+    background: url("../../../assets/images/main/title_pro.png") no-repeat !important;
+    background-size: 100% 100%;
+    font-family: "PingFangSC";
+    font-size: 16px;
+    font-weight: bold;
+    color: #00ffff;
+    //padding-left: 20px !important;
+    .title {
+      display: block;
+      position: relative;
+      top:-5px !important;
+    }
+  }
     .total-data {
       display: flex;
       align-items: baseline;
@@ -434,7 +467,15 @@ export default {
         font-size: 12px;
       }
     }
-
+    .data-detail{
+      align-items: center;
+      img{
+        width: 58px;
+        height:56px ;
+        margin-left: 45px;
+        margin-right: 5px;
+      }
+    }
     .data-list {
       display: flex;
       width: 100%;
@@ -442,12 +483,12 @@ export default {
         display: flex;
         flex-direction: column;
         justify-content: center;
-        width: 33%;
-        margin-bottom: 25px;
+        width: 50%;
+        margin-bottom: 11px;
         .data-detail {
           display: flex;
           flex-direction: row;
-          align-items: baseline;
+          align-items: center;
           color: #00ffff;
           margin-top: 11px;
           font-size: 12px;
@@ -502,6 +543,12 @@ export default {
       margin-top: 50px;
     }
   }
+ .iaco{
+   width: 58px;
+   height:56px ;
+   margin-left: 45px;
+   margin-right: 5px;
+ }
 
   .table-cont{
     width:100%;

src/views/screen/engineering/unitAccessto.vue

@@ -0,0 +1,546 @@
+<template>
+  <div class="main-data data-unit-access">
+    <!-- <div class="title-area">各单位的接入情况</div> -->
+    <div class="content-area">
+      <div class="content-title">
+        <span class="title">工程现场监控接入情况</span>
+      </div>
+      <div class="content">
+        <div class="table-cont">
+          <div class="table-top">
+            <div class="fir">接入单位名称</div>
+            <div class="snd">已接入项目数量</div>
+            <div class="thd">已接入摄像头数量</div>
+          </div>
+          <div class="table-bot">
+            <div class="table-list" v-for="(item,index) in unitDataList" :key="index">
+              <div class="said"></div>
+              <div class="fir">{{item.name}}</div>
+              <div class="snd">{{item.num}}</div>
+              <div class="thd color">{{item.onLineNum}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BarChart from "@/components/Echarts/BarChart";
+import LineChart from "@/components/Echarts/LineChart.vue";
+import echarts from "echarts";
+
+export default {
+  name: "UnitAccessTo",
+  components: {
+    LineChart,
+    BarChart,
+  },
+  props:{
+    appOrg: {
+      type: String,
+      default: "0000",
+    },
+  },
+  watch:{
+    appOrg(newVal, oldVal){
+      // this.handleDataList();
+      // this.handleUnitDataList();
+      // this.handleCurrentArea();
+      // this.handleOnlineData();
+    }
+  },
+  data() {
+    return {
+      show: true,
+      barData: [],
+      barAxis: {},
+      barYAxis: {},
+      barGrid: {
+        top: 30,
+        left: "3%",
+        right: "6%",
+        containLabel: true,
+        bottom: 0,
+      },
+      dataList: [
+        {
+          name: "接入单位数量",
+          num: "56",
+          unit: "个",
+        },
+        {
+          name: "应接入项目数量",
+          num: "56",
+          unit: "个",
+        },
+        {
+          name: "已接入项目数量",
+          num: "56",
+          unit: "个",
+        },
+        {
+          name: "已接入摄像头数量",
+          num: "56",
+          unit: "个",
+        },
+        {
+          name: "已接入摄像头在线数量",
+          num: "56",
+          unit: "个",
+        },
+        {
+          name: "已接入摄像头在线率",
+          num: "56",
+          unit: "%",
+        },
+      ],
+      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,
+      },
+      onlineData: [],
+      onlineAxis: {},
+      onlineYAxis: {
+        name: "历史摄像头数(个)",
+        nameTextStyle: {
+          color: "#fff",
+          fontSize: 14,
+          padding: [0,0,0,35]
+        },
+        axisLabel: {
+          color: "#FFF",
+        },
+        splitLine: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        splitArea: false,
+      },
+      monitorList: [],
+      unitDataList: [],
+    };
+  },
+  created() {
+    this.handleDataList();
+    this.handleUnitDataList();
+    this.handleCurrentArea();
+    this.handleOnlineData();
+  },
+  destroyed() {},
+  beforeDestroy() {},
+  mounted() {},
+  methods: {
+
+    handleDataList() {
+      this.dataList = [];
+      setTimeout(()=>{
+        this.dataList = [
+          {
+            name: "接入单位数量",
+            num: "56",
+            unit: "个",
+          },
+          {
+            name: "应接入项目数量",
+            num: "56",
+            unit: "个",
+          },
+          {
+            name: "已接入项目数量",
+            num: "56",
+            unit: "个",
+          },
+          {
+            name: "已接入摄像头数量",
+            num: "56",
+            unit: "个",
+          },
+          {
+            name: "已接入摄像头在线数量",
+            num: "56",
+            unit: "个",
+          },
+          {
+            name: "已接入摄像头在线率",
+            num: "56",
+            unit: "%",
+          },
+        ];
+      },100)
+    },
+
+    //初始化
+    handleUnitDataList() {
+      let unitDataList = [];
+      unitDataList.push({
+        name: "国网山西省电力公司",
+        num: 56,
+        onLineNum: 46
+      });
+      unitDataList.push({
+        name: "国网太原供电公司",
+        num: 10,
+        onLineNum: 8
+      });
+      unitDataList.push({
+        name: "国网运城供电公司",
+        num: 8,
+        onLineNum: 4
+      });
+      unitDataList.push({
+        name: "国网临汾供电公司",
+        num: 7,
+        onLineNum: 6
+      });
+      unitDataList.push({
+        name: "国网晋城供电公司",
+        num: 6,
+        onLineNum: 6
+      });
+      unitDataList.push({
+        name: "国网吕梁供电公司",
+        num: 4,
+        onLineNum: 3
+      });
+      unitDataList.push({
+        name: "国网大同供电公司",
+        num: 4,
+        onLineNum: 3
+      });
+      this.unitDataList = unitDataList;
+    },
+
+    handleCurrentArea() {
+      (this.lineData = [
+        {
+          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: 2, // 设置线宽
+            color: "#00FFFF", // 设置线的颜色
+          },
+
+          smooth: true,
+          data: [40, 60, 80, 50],
+        },
+      ]),
+        (this.lineAxis = {
+          type: "category",
+          data: ["0-6", "6-12", "12-18", "18-24"],
+          axisLabel: {
+            color: "white", // 设置横坐标轴字体颜色为红色
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#465A64",
+            },
+          },
+          boundaryGap: false,
+        });
+    },
+
+    handleOnlineData() {
+      (this.onlineData = [
+        {
+          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: 2, // 设置线宽
+            color: "#00FFFF", // 设置线的颜色
+          },
+
+          smooth: true,
+          data: [40, 60, 80, 50],
+        },
+      ]),
+        (this.onlineAxis = {
+          type: "category",
+          data: ["0-6", "6-12", "12-18", "18-24"],
+          axisLabel: {
+            color: "white", // 设置横坐标轴字体颜色为红色
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#465A64",
+            },
+          },
+          boundaryGap: false,
+        });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.content-title {
+  width: 100%;
+  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: 15px;
+  .title {
+    display: block;
+    position: relative;
+    top:-5px;
+  }
+}
+.data-unit-access {
+  height: 100%;
+  overflow: hidden;
+  .content-area {
+    display: flex;
+    flex-direction: column;
+    padding: 15px 20px 0 15px;
+  }
+
+  .said{
+    width: 1px;
+    height: 13px;
+    background-color: #00FFFF;
+  }
+
+
+  .content {
+    width: 100%;
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    .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: 14px;
+        color: #ffffff;
+        .title-en {
+          font-size: 8px;
+          color: #ffffff;
+          opacity: 0.4;
+        }
+      }
+    }
+    .total-data {
+      display: flex;
+      align-items: baseline;
+      color: #19fcde;
+      margin-top: 4px;
+      .total {
+        font-size: 35px;
+        font-family: "electronicFont";
+      }
+      .unit {
+        font-size: 12px;
+      }
+    }
+    data-detail{
+      align-items: center;
+    }
+    .data-list {
+      display: flex;
+      width: 100%;
+      .data-item {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        width: 50%;
+        margin-bottom: 11px;
+        .data-detail {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          color: #00ffff;
+          margin-top: 11px;
+          font-size: 12px;
+          .data {
+            font-size: 30px;
+            font-family: "electronicFont";
+          }
+        }
+      }
+      .data-item:nth-child(3n) {
+        margin-right: 0;
+      }
+    }
+
+    .rate-area {
+      position: relative;
+      margin-left: 35px;
+      img {
+        width: 168px;
+        height: 97px;
+      }
+      .rate {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: -10px;
+        color: #fff;
+        .rate-data {
+          display: flex;
+          flex-direction: row;
+          align-items: baseline;
+          color: #ffba44;
+          .data {
+            font-size: 30px;
+            font-family: "electronicFont";
+          }
+          .unit {
+            font-size: 12px;
+          }
+        }
+        .desc {
+          font-size: 12px;
+          text-align: center;
+        }
+      }
+    }
+    .chart-area{
+      margin-top: 50px;
+    }
+  }
+  .iaco{
+    width: 58px;
+    height:56px ;
+    margin-left: 45px;
+    margin-right: 5px;
+  }
+
+  .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:30px;
+        padding:5px 25px 0 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size:14px;
+        color:#FFFFFF;
+        font-weight: 500;
+      }
+    }
+
+    .fir{
+      width:40%;
+      text-align: left;
+      margin-left: 5px;
+    }
+    .snd{
+      width:30%;
+      text-align: left;
+    }
+    .thd{
+      width:30%;
+      text-align: left;
+    }
+  }
+
+  ::-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>
+