|
|
@@ -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>
|
|
|
|
ming