代码优化

src/views/index.vue

@@ -24,9 +24,10 @@
         <el-col :span="12">
           <div class="card_center">
             <el-card class="box-card card_center1" style="padding:0 !important">
-              <div class="map" style="height:45vh">
+              <div class="map" style="height:calc(48vh - 35px)">
                 <!-- <iframe id="myIframe" style="width:100%;height:100%;border:none;" src='https://www.thingjs.com/s/ef7ee6a73896c01bda77e679?params=105b0f77fd24654d4eebc434e9'></iframe> -->
-                <iframe  id="myIframe" style="width:100%;height:100%;border:none;" src='https://www.thingjs.com/s/b11227d4fd5505106989737c?params=105b0f77fd24654d4eebc434e9'></iframe>
+                <iframe id="myIframe" style="width:100%;height:100%;border:none;"
+                  src='https://www.thingjs.com/s/b11227d4fd5505106989737c?params=105b0f77fd24654d4eebc434e9'></iframe>
 
               </div>
             </el-card>
@@ -81,7 +82,8 @@
                     </li>
                     <li>
                       <div>
-                        <p class="num-huan" style="color:#6F99FA">{{ Number((collectList.checkRadio) * 100).toFixed(2) }}%</p>
+                        <p class="num-huan" style="color:#6F99FA">{{ Number((collectList.checkRadio) * 100).toFixed(2) }}%
+                        </p>
                         <p class="des-huan">处理率</p>
                       </div>
                     </li>
@@ -116,47 +118,41 @@
       </el-row>
 
       <!-- 详情对话框 -->
-      <el-dialog
-        :title="title"
-        :visible.sync="open"
-        width="1600px"
-        append-to-body
-        :before-close="cancel"
-        :close-on-click-modal="false"
-      >
-      <div style="height:700px" class="index-dialog">
-        <el-row :gutter="40">
-          <el-col :span="10">
-            <div class="store-container">运行3d大楼</div>
-          </el-col>
-          <el-col :span="14">
-            <div class="detail-container">
-              <div class="project-status " style="display:none">
-                 <h3>项目信息</h3>
-                 <br>
-                 <el-row>
-                  <el-col :span="12">
-                    <div class="tit">项目名称：</div>
-                    <p>市光二村112号</p>
-                    
-                    <div class="tit">项目地址：</div>
-                    <p>杨浦区包头路430号</p>
-                    <div class="tit">项目坐标：</div>
-                    <p>121.5387,31.316975</p>
-                    
-                  </el-col>
-                  <el-col :span="12">
-                    
-                    <div class="tit">联系人：</div>
-                    <p>孙纪清</p>
-                    <div class="tit">联系电话：</div>
-                    <p>13817464316</p>
-                   
-                  </el-col>
-                 </el-row>
-                
-                  
-                 <!-- <el-form ref="form" :model="form" label-width="auto">
+      <el-dialog :title="title" :visible.sync="open" width="1600px" append-to-body :before-close="cancel"
+        :close-on-click-modal="false">
+        <div style="height:700px" class="index-dialog">
+          <el-row :gutter="40">
+            <el-col :span="10">
+              <div class="store-container">运行3d大楼</div>
+            </el-col>
+            <el-col :span="14">
+              <div class="detail-container">
+                <div class="project-status " style="display:none">
+                  <h3>项目信息</h3>
+                  <br>
+                  <el-row>
+                    <el-col :span="12">
+                      <div class="tit">项目名称：</div>
+                      <p>市光二村112号</p>
+
+                      <div class="tit">项目地址：</div>
+                      <p>杨浦区包头路430号</p>
+                      <div class="tit">项目坐标：</div>
+                      <p>121.5387,31.316975</p>
+
+                    </el-col>
+                    <el-col :span="12">
+
+                      <div class="tit">联系人：</div>
+                      <p>孙纪清</p>
+                      <div class="tit">联系电话：</div>
+                      <p>13817464316</p>
+
+                    </el-col>
+                  </el-row>
+
+
+                  <!-- <el-form ref="form" :model="form" label-width="auto">
                     <el-row :gutter="20">
                       <el-col :span="12">
                         <el-form-item label="项目名称：" prop="id">
@@ -185,77 +181,57 @@
                       </el-col>
                     </el-row>
                   </el-form> -->
-              </div>
-              <div class="now-status" style="display:block">
-                 <h3>当前实时状态</h3>
-                 <br>
-                 <el-row :gutter="40">
-                  <el-col :span="5">
-                    <img src="@/assets/images/va_large_icon.gif" alt="" style="width:105px">
-                  </el-col>
-                  <el-col :span="7">
-                    <div class="tit">设备名称</div>
-                    <p>七层强电间着火点摄像机</p>
-                    <div class="tit">设备编号</div>
-                    <p>GXDX7QDJ</p>
-                    <div class="tit">监测对象</div>
-                    <p>七层强电间内</p>
-                    <div class="tit">数据更新时间</div>
-                    <p>2023-01-09 14:42:47</p>
-                  </el-col>
-                  <el-col :span="12">
-                    <div style="height:240px;width:80%;background:#e1dede">
-                      视频播放区域
-                    </div>
-                   
-                  </el-col> 
-                 </el-row>
-              </div>
+                </div>
+                <div class="now-status" style="display:block">
+                  <h3>当前实时状态</h3>
+                  <br>
+                  <el-row :gutter="40">
+                    <el-col :span="5">
+                      <img src="@/assets/images/va_large_icon.gif" alt="" style="width:105px">
+                    </el-col>
+                    <el-col :span="7">
+                      <div class="tit">设备名称</div>
+                      <p>七层强电间着火点摄像机</p>
+                      <div class="tit">设备编号</div>
+                      <p>GXDX7QDJ</p>
+                      <div class="tit">监测对象</div>
+                      <p>七层强电间内</p>
+                      <div class="tit">数据更新时间</div>
+                      <p>2023-01-09 14:42:47</p>
+                    </el-col>
+                    <el-col :span="12">
+                      <div style="height:240px;width:80%;background:#e1dede">
+                        视频播放区域
+                      </div>
 
-              <div>
-                <h3>设备状态</h3>
-                <br>
-                <el-table
-                  :data="tableData"
-                  border
-                  style="width: 100%">
-                  
-                  <el-table-column
-                    align="center"
-                    prop="type"
-                    label="设备类型"
-                  >
-                  </el-table-column>
-                  <el-table-column
-                    align="center"
-                    prop="total"
-                    label="设备总数"
-                  >
-                  </el-table-column>
-                  <el-table-column
-                    align="center"
-                    prop="detailed"
-                    label="已处理">
-                  </el-table-column>
-                  <el-table-column
-                    align="center"
-                    prop="undetail"
-                    label="未处理">
-                  </el-table-column>
-                  <el-table-column
-                    align="center"
-                    prop="rate"
-                    label="处理率">
-                  </el-table-column>
-                </el-table>
+                    </el-col>
+                  </el-row>
+                </div>
+
+                <div>
+                  <h3>设备状态</h3>
+                  <br>
+                  <el-table :data="tableData" border style="width: 100%">
+
+                    <el-table-column align="center" prop="type" label="设备类型">
+                    </el-table-column>
+                    <el-table-column align="center" prop="total" label="设备总数">
+                    </el-table-column>
+                    <el-table-column align="center" prop="detailed" label="已处理">
+                    </el-table-column>
+                    <el-table-column align="center" prop="undetail" label="未处理">
+                    </el-table-column>
+                    <el-table-column align="center" prop="rate" label="处理率">
+                    </el-table-column>
+                  </el-table>
+                </div>
               </div>
-            </div>
-          </el-col>
-        </el-row>
+            </el-col>
+          </el-row>
+
+        </div>
 
-      </div>
 
-     
 
         <!-- <el-form ref="form" :model="form" label-width="auto">
           <el-row :gutter="20">
@@ -295,44 +271,44 @@ export default {
       open: false,
       form: {},
       tableData: [{
-            type: '火灾监控',
-            total: '76',
-            detailed: '38',
-            undetail: '0',
-            rate:'50%'
-          }, {
-            type: '电气火灾监控',
-            total: '76',
-            detailed: '38',
-            undetail: '38',
-            rate:'50%'
-          }, {
-            type: '水系统监控',
-            total: '76',
-            detailed: '38',
-            undetail: '38',
-            rate:'50%'
-          }, {
-            type: 'RTU监控',
-            total: '76',
-            detailed: '38',
-            undetail: '38',
-            rate:'50%'
-          }, {
-            type: '视频告警监控',
-            total: '76',
-            detailed: '38',
-            undetail: '38',
-            rate:'50%'
-          }, {
-            type: '电梯告警监控',
-            total: '76',
-            detailed: '38',
-            undetail: '38', 
-            rate:'50%'
-          }],
-          buildingStore:[],
-          top_level:'',
+        type: '火灾监控',
+        total: '76',
+        detailed: '38',
+        undetail: '0',
+        rate: '50%'
+      }, {
+        type: '电气火灾监控',
+        total: '76',
+        detailed: '38',
+        undetail: '38',
+        rate: '50%'
+      }, {
+        type: '水系统监控',
+        total: '76',
+        detailed: '38',
+        undetail: '38',
+        rate: '50%'
+      }, {
+        type: 'RTU监控',
+        total: '76',
+        detailed: '38',
+        undetail: '38',
+        rate: '50%'
+      }, {
+        type: '视频告警监控',
+        total: '76',
+        detailed: '38',
+        undetail: '38',
+        rate: '50%'
+      }, {
+        type: '电梯告警监控',
+        total: '76',
+        detailed: '38',
+        undetail: '38',
+        rate: '50%'
+      }],
+      buildingStore: [],
+      top_level: '',
 
 
       index1Data: [],//设备工况=>饼图
@@ -370,8 +346,8 @@ export default {
     this.yhTable()
     this.initWebSocket()
     this.getBuild()
-    
-    
+
+
 
   },
   mounted() {
@@ -383,79 +359,65 @@ export default {
     cancel() {
       this.open = false;
     },
-    draw_buinding(){
-      alert('运行大楼')
-      var _this=this;
-        setTimeout(function(){
-              _this.callFuncInThingJS('userListener', _this.buildingStore, _this.top_level, '10316') ;
-        },1000)
-
-    },
+    // draw_buinding(){
+    //   alert('运行大楼')
+    //   var _this=this;
+    //     setTimeout(function(){
+    //           _this.callFuncInThingJS('userListener', _this.buildingStore, _this.top_level, '10316') ;
+    //     },1000)
+    // },
 
     getBuild() {
-      // const params = { "V_LOGINNAME": "gxdmxxg", "V_PASSWORD": "gxdmxxg123", "COMPANY_CODE": "10316", "COMMSTATUS": "NO" }
-      // $.ajax({
-      //   type: 'POST',
-      //   url: 'http://47.103.74.123:8080/YtIoT/iot/frontpage/getCurrentObjectListByCompanyId',
-      //   data: { queryJson: JSON.stringify(params) },
-      //   success: function (result) {
-
-      //     console.log(result)
-      //   }
-      // });
-
-      const params={"V_LOGINNAME":"gxdmxxg","V_PASSWORD":"gxdmxxg123","COMPANY_CODE":"10316","COMMSTATUS":"NO"}
+      const params = { "V_LOGINNAME": "gxdmxxg", "V_PASSWORD": "gxdmxxg123", "COMPANY_CODE": "10316", "COMMSTATUS": "NO" }
       axios({
-          method: "post",
-          url: `/frontpage/getCurrentObjectListByCompanyId`,
-          params: {
-             queryJson: JSON.stringify(params) 
-          },
-          headers: {
-
-          },
+        method: "post",
+        url: `/frontpage/getCurrentObjectListByCompanyId`,
+        params: {
+          queryJson: JSON.stringify(params)
+        },
+        headers: {
+
+        },
       }).then((res) => {
-        console.log('res')
-        console.log(res)
         this.top_level = res.data.top_level;
         this.buildingStore = res.data.LIST;
-        console.log( this.top_level)
-        console.log( this.buildingStore)
-        
-
-        this.draw_buinding();
-    
-        // var json = eval('(' + res + ')');
-        //     if (json.action == 'getCurrentObjectListByCompanyId') {
-        //         if (json.check == true) {
-        //             if (json.LIST != undefined) {
-                       
-        //                 this.top_level = json.top_level;
-                    
-        //                 this.buildingStore = json.LIST;
-        //             }
-        //             draw_buinding();
-        //         } else {
-        //           alert('错误信息')
-                   
-        //         }
-        //     }
+
+        var _this = this;
+        setTimeout(function () {
+          alert('运行大楼')
+          _this.callFuncInThingJS('userListener', res.data.LIST, res.data.top_level, '10316');
+        }, 3000)
+
+
+
+
+        window.addEventListener("message", function (e) {
+          console.log('eee')
+          console.log(e)
+          var data = e.data;
+          var funcName = data.funcName;
+          var param = data.param;
+          if (funcName) {
+            _this.open = true
+          }
+        })
       })
 
 
 
     },
-   callFuncInThingJS(funcName, data, top_level, company_code) {
-      var iframe =document.getElementById("myIframe");  
-      var msg = {data, top_level, company_code}
+    callFuncInThingJS(funcName, data, top_level, company_code) {
+      var iframe = document.getElementById("myIframe");
+      var msg = { data, top_level, company_code }
       var message = {
-          'funcName': funcName,
-          'param': msg
+        'funcName': funcName,
+        'param': msg
       }
       console.log('message')
       console.log(message)
       iframe.contentWindow.postMessage(message, '*');
-  },
+    },
+
 
 
     getList() {
@@ -721,6 +683,10 @@ export default {
   .card_center {
     .card_center1 {
       height: 48vh;
+
+      .el-card__body {
+        height: 100% !important
+      }
     }
 
     .card_center2 {
@@ -812,40 +778,46 @@ export default {
 
 .processed {
   color: #37FF01;
-}</style>
+}
+</style>
 <style lang="scss">
+.index-dialog {
+  .el-row {
+    // height:100%
+  }
+
+  h3 {
+    font-weight: 700
+  }
 
-.index-dialog{
-    .el-row{
-        // height:100%
-    }
-    h3{
-        font-weight:700
-    }
-    
 }
-.store-container{
-        border:1px solid red;
-        height:700px;
-    }
-    .now-status {
-       
-    }
-    .now-status .tit{
-        color:#337ab7
-    }
-    .now-status  p{
-        font-size:16px;
-        margin:10px 0
-    }
-    .project-status{
-        p{
-            font-size:16px;
-            margin:20px 0
-        }
-        .tit{
-            color:#337ab7
-        }
 
-    }</style>
+.store-container {
+  border: 1px solid red;
+  height: 700px;
+}
+
+.now-status {}
+
+.now-status .tit {
+  color: #337ab7
+}
+
+.now-status p {
+  font-size: 16px;
+  margin: 10px 0
+}
+
+.project-status {
+  p {
+    font-size: 16px;
+    margin: 20px 0
+  }
+
+  .tit {
+    color: #337ab7
+  }
+
+}
+</style>