|
|
@@ -8,7 +8,7 @@
|
|
|
<!-- 内容 -->
|
|
|
<div class="detail-table-box">
|
|
|
<el-row>
|
|
|
- <el-col :span="8">
|
|
|
+ <!-- <el-col :span="8">
|
|
|
<div class="search-box">
|
|
|
<div class="search-item">
|
|
|
<span class="search-label">场站：</span>
|
|
|
@@ -29,22 +29,57 @@
|
|
|
></el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
- <!-- <div class="search-btn2" @click="openAll">
|
|
|
- <el-button size="mini" type="success">人员授权</el-button>
|
|
|
- </div>
|
|
|
- <div class="search-btn2" @click="closeAll">
|
|
|
- <el-button size="mini" type="warning">车辆授权</el-button>
|
|
|
- </div> -->
|
|
|
- <!-- <div class="search-btn2" @click="openBroadcast">
|
|
|
- <el-button size="mini" type="success">开门</el-button>
|
|
|
- </div>
|
|
|
- <div class="search-btn2" @click="closeBroadcast">
|
|
|
- <el-button size="mini" type="danger">关门</el-button>
|
|
|
- </div> -->
|
|
|
</div>
|
|
|
<div class="info_list">
|
|
|
<base-table-list :tableConfig="tableConfig" />
|
|
|
</div>
|
|
|
+ </el-col> -->
|
|
|
+ <el-col class="jgyt_video" :span="12">
|
|
|
+ <div class="select">
|
|
|
+ <div class="select_title">
|
|
|
+ 泄漏检测
|
|
|
+ <el-select
|
|
|
+ value-key="id"
|
|
|
+ v-model="cameraInfo1"
|
|
|
+ style="width: 220px"
|
|
|
+ size="mini"
|
|
|
+ clearable
|
|
|
+ placeholder="请选择摄像头"
|
|
|
+ @change="exchangeVideo()"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in cameraList"
|
|
|
+ :key="item.id"
|
|
|
+ :value="item"
|
|
|
+ :label="item.name"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="select_video">
|
|
|
+ <div class="select_video_main">
|
|
|
+ <video-image-window
|
|
|
+ :cameraData="cameraInfo1"
|
|
|
+ :cameraId="cameraInfo1.id"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="select_tag_content">
|
|
|
+ <div class="tag_data">
|
|
|
+ 浓度：{{ this.getTagsValue(this.jgyt1.concentrationTag) }}
|
|
|
+ </div>
|
|
|
+ <div class="tag_data">
|
|
|
+ 光强：{{ this.getTagsValue(this.jgyt1.lightIntensityTag) }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="select_tag_content">
|
|
|
+ <div class="tag_data">
|
|
|
+ 垂直角度：{{ this.getTagsValue(this.jgyt1.panTag) }}
|
|
|
+ </div>
|
|
|
+ <div class="tag_data">
|
|
|
+ 水平角度：{{ this.getTagsValue(this.jgyt1.tileTag) }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-col>
|
|
|
<el-col class="jgyt_video" :span="12">
|
|
|
<div class="select">
|
|
|
@@ -52,7 +87,7 @@
|
|
|
泄漏检测
|
|
|
<el-select
|
|
|
value-key="id"
|
|
|
- v-model="cameraInfo"
|
|
|
+ v-model="cameraInfo2"
|
|
|
style="width: 220px"
|
|
|
size="mini"
|
|
|
clearable
|
|
|
@@ -71,15 +106,31 @@
|
|
|
<div class="select_video">
|
|
|
<div class="select_video_main">
|
|
|
<video-image-window
|
|
|
- :cameraData="cameraInfo"
|
|
|
- :cameraId="cameraInfo.id"
|
|
|
+ :cameraData="cameraInfo2"
|
|
|
+ :cameraId="cameraInfo2.id"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="select_tag_content">
|
|
|
+ <div class="tag_data">
|
|
|
+ 浓度：{{ this.getTagsValue(this.jgyt2.concentrationTag) }}
|
|
|
+ </div>
|
|
|
+ <div class="tag_data">
|
|
|
+ 光强：{{ this.getTagsValue(this.jgyt2.lightIntensityTag) }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="select_tag_content">
|
|
|
+ <div class="tag_data">
|
|
|
+ 垂直角度：{{ this.getTagsValue(this.jgyt2.panTag) }}
|
|
|
+ </div>
|
|
|
+ <div class="tag_data">
|
|
|
+ 水平角度：{{ this.getTagsValue(this.jgyt2.tileTag) }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-col>
|
|
|
- <el-col :span="4">
|
|
|
+ <!-- <el-col :span="4">
|
|
|
<video-control :curVideoData="cameraInfo" />
|
|
|
- </el-col>
|
|
|
+ </el-col> -->
|
|
|
</el-row>
|
|
|
<el-row :key="refreshKey">
|
|
|
<el-col :span="24">
|
|
|
@@ -99,6 +150,7 @@
|
|
|
</base-drag-bg-dialog>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import Vue from "vue";
|
|
|
import BaseTableList from "@/views/components/base/BaseTableList";
|
|
|
import BaseDragBgDialog from "@/views/components/base/BaseDragBgDialog.vue";
|
|
|
import VideoImageWindow from "@/views/components/dialog/VideoImageWindow.vue";
|
|
|
@@ -141,7 +193,7 @@ export default {
|
|
|
handler(newValue) {
|
|
|
// this.filterKey = "";
|
|
|
if (newValue && newValue.length > 0) {
|
|
|
- this.recrodTableConfig.tableData = newValue;
|
|
|
+ this.recordTableConfig.tableData = newValue;
|
|
|
}
|
|
|
this.refresh();
|
|
|
},
|
|
|
@@ -173,7 +225,7 @@ export default {
|
|
|
show: false,
|
|
|
title: "泄漏检测",
|
|
|
width: 1250,
|
|
|
- height: 680,
|
|
|
+ height: 724,
|
|
|
center: true,
|
|
|
zIndex: 10,
|
|
|
},
|
|
|
@@ -212,7 +264,12 @@ export default {
|
|
|
],
|
|
|
},
|
|
|
cameraList: [{ id: "1", name: "摄像头1" }],
|
|
|
- cameraInfo: {
|
|
|
+ jgyt1: {},
|
|
|
+ jgyt2: {},
|
|
|
+ cameraInfo1: {
|
|
|
+ id: "1",
|
|
|
+ },
|
|
|
+ cameraInfo2: {
|
|
|
id: "1",
|
|
|
},
|
|
|
departmentOptions: [],
|
|
|
@@ -220,6 +277,8 @@ export default {
|
|
|
id: "",
|
|
|
positioningBuildId: "",
|
|
|
},
|
|
|
+ tagList: [],
|
|
|
+ tagDataList: [],
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
@@ -248,11 +307,17 @@ export default {
|
|
|
const res = await getJGYTList(params);
|
|
|
this.dataList = res.data.content;
|
|
|
// console.log("激光云台列表", this.dataList);
|
|
|
+ this.startMqtt();
|
|
|
+ if (this.dataList && this.dataList.length > 0) {
|
|
|
+ this.jgyt1 = this.dataList[0];
|
|
|
+ this.jgyt2 = this.dataList[this.dataList.length - 1];
|
|
|
+ }
|
|
|
this.cameraList = this.dataList.map((e) => e.camera);
|
|
|
if (this.cameraList && this.cameraList.length > 0) {
|
|
|
- this.cameraInfo = this.cameraList[0];
|
|
|
+ this.cameraInfo1 = this.cameraList[0];
|
|
|
+ this.cameraInfo2 = this.cameraList[this.cameraList.length - 1];
|
|
|
}
|
|
|
- // console.log("激光云台摄像头列表", this.cameraList, this.cameraInfo);
|
|
|
+ // console.log("激光云台摄像头列表",this.cameraList,this.cameraInfo1,this.cameraInfo2);
|
|
|
} catch (err) {
|
|
|
console.log(err);
|
|
|
}
|
|
|
@@ -342,11 +407,6 @@ export default {
|
|
|
});
|
|
|
this.closeDialog();
|
|
|
},
|
|
|
- exchangeVideo() {},
|
|
|
- openAll() {},
|
|
|
- closeAll() {},
|
|
|
- openBroadcast() {},
|
|
|
- closeBroadcast() {},
|
|
|
handleClose(item) {
|
|
|
let index = -1;
|
|
|
for (let i = 0; i < this.openningList.length; i++) {
|
|
|
@@ -357,6 +417,78 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ startMqtt() {
|
|
|
+ const topics = this.tagList;
|
|
|
+ const _this = this;
|
|
|
+ this.$store.dispatch("mqtt/subscribe", {
|
|
|
+ topic: ["DataCommunication/TagData/#"],
|
|
|
+ onMessage: (topic, message, packet) => {
|
|
|
+ const content = message.toString();
|
|
|
+ if (topic.startsWith("DataCommunication/TagData/")) {
|
|
|
+ let data = JSON.parse(content);
|
|
|
+ Vue.set(this.tagDataList, data.Tag, data);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ setTimeout(() => {
|
|
|
+ this.refreshSubscribe();
|
|
|
+ // console.log("激光云台弹窗实时数据：", this.tagDataList);
|
|
|
+ }, 1000);
|
|
|
+ this.$once("hook:beforeDestroy", () => {
|
|
|
+ this.$store.dispatch("mqtt/unsubscribe", topics);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ refreshSubscribe() {
|
|
|
+ // this.tagDataList = {};
|
|
|
+ // console.log(this.mqttClient.connected);
|
|
|
+ if (this.mqttClient && this.mqttClient.connected) {
|
|
|
+ let tags = [];
|
|
|
+ if (this.dataList) {
|
|
|
+ //激光云台设备列表
|
|
|
+ if (this.tagList.length == 0) {
|
|
|
+ this.dataList.forEach((e) => {
|
|
|
+ if (e.type === 1) {
|
|
|
+ tags.push(`DataCommunication/TagData/` + e.concentrationTag);
|
|
|
+ tags.push(`DataCommunication/TagData/` + e.lightIntensityTag);
|
|
|
+ tags.push(`DataCommunication/TagData/` + e.panTag);
|
|
|
+ tags.push(`DataCommunication/TagData/` + e.tileTag);
|
|
|
+ } else {
|
|
|
+ tags.push(
|
|
|
+ `DataCommunication/TagData/` + e.dahua_ConcentrationLelTag
|
|
|
+ );
|
|
|
+ tags.push(
|
|
|
+ `DataCommunication/TagData/` + e.dahua_ConcentrationTag
|
|
|
+ );
|
|
|
+ tags.push(
|
|
|
+ `DataCommunication/TagData/` + e.dahua_PresetIndexTag
|
|
|
+ );
|
|
|
+ tags.push(`DataCommunication/TagData/` + e.dahua_PresetNameTag);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.tagList = tags;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // console.log("newTopic", tags);
|
|
|
+ let unsubscribeTopicArray = lodash.difference(this.tagList, tags);
|
|
|
+ if (unsubscribeTopicArray.length > 0) {
|
|
|
+ //console.log('解除订阅', unsubscribeTopicArray)
|
|
|
+ this.mqttClient.unsubscribe(unsubscribeTopicArray);
|
|
|
+ }
|
|
|
+ let subscribeTopicArray = lodash.difference(tags, this.tagList);
|
|
|
+ if (subscribeTopicArray.length > 0) {
|
|
|
+ //console.log('订阅', subscribeTopicArray)
|
|
|
+ this.mqttClient.subscribe(subscribeTopicArray);
|
|
|
+ }
|
|
|
+ this.tagList = tags;
|
|
|
+ } else {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.refreshSubscribe();
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getTagsValue(tag) {
|
|
|
+ return this.tagDataList[tag]&&this.tagDataList[tag].Value?this.tagDataList[tag].Value:"";
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -462,6 +594,18 @@ export default {
|
|
|
height: 100%;
|
|
|
}
|
|
|
}
|
|
|
+ .select_tag_content {
|
|
|
+ text-align: left;
|
|
|
+ font-size: 0.083333rem /* 16/192 */;
|
|
|
+ line-height: 22px /* 50/192 */;
|
|
|
+ color: #fff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ .tag_data {
|
|
|
+ padding-left: 10px;
|
|
|
+ width: 30%;
|
|
|
+ }
|
|
|
+ }
|
|
|
.tag_info {
|
|
|
text-align: left;
|
|
|
font-size: 0.083333rem /* 16/192 */;
|
fan