|
@@ -90,13 +90,12 @@
|
|
|
<div class="all-title-box" style="height:40px;">
|
|
|
<p></p>
|
|
|
<p>传感器监测</p>
|
|
|
- <p>数据上报时间:</p>
|
|
|
- <!--<p>{{subjectData.sensorFunctionStatusList[0]?'数据上报时间:'+subjectData.sensorFunctionStatusList[0].sendDate:''}}</p>-->
|
|
|
+ <p v-if="lastOnlineTime">数据上报时间:{{parseTime(lastOnlineTime)}}</p>
|
|
|
+ <p></p>
|
|
|
<p class="page-out-common-style-button" @click="backPage">返回</p>
|
|
|
</div>
|
|
|
<p class="sensor-box" v-for="(item,index) in sensorList" :key="index">{{item.deviceName}}:<span>{{item.deviceValue}}{{item.unit}}</span></p>
|
|
|
- <img class="null-data-img" src="@/assets/ZDimages/basicsModules/null-data.png" v-if="!sensorList[0]">
|
|
|
- <p class="null-p" v-if="!sensorList[0]" >暂无环境监测信息,请在更多操作-物联设备配置中进行添加</p>
|
|
|
+ <img class="null-data-img" src="@/assets/ZDimages/basicsModules/null-data-1.png" v-if="!sensorList[0]">
|
|
|
<div class="all-title-box" style="height:40px;margin-top:20px;">
|
|
|
<p></p>
|
|
|
<p>物联控制</p>
|
|
@@ -118,31 +117,30 @@
|
|
|
<p class="switch-null-p" v-else>离线</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!--<div class="things-box" v-for="(item,index) in subjectData.labHardwareVOListTwo" :key="item.id" v-if="item.hardwareTypeEnum.enumName == 'AI_VENTILATION'">-->
|
|
|
- <!--<div class="things-for-box">-->
|
|
|
- <!--<p class="left-title">{{item.hardwareName}}</p>-->
|
|
|
- <!--<el-switch-->
|
|
|
- <!--v-if="item.state.code == 3||item.state.code == 4"-->
|
|
|
- <!--class="switch"-->
|
|
|
- <!--@click.native="changeIsNeedCaptcha(item)"-->
|
|
|
- <!--v-model="item.state.code"-->
|
|
|
- <!--:active-value="3"-->
|
|
|
- <!--:inactive-value="4"-->
|
|
|
- <!--active-text="开"-->
|
|
|
- <!--inactive-text="关"-->
|
|
|
- <!--disabled>-->
|
|
|
- <!--</el-switch>-->
|
|
|
- <!--<p class="switch-null-p" v-else>{{item.state.name}}</p>-->
|
|
|
- <!--</div>-->
|
|
|
- <!--</div>-->
|
|
|
- <!--<div class="things-box" v-for="(item,index) in subjectData.labHardwareVOListTwo" :key="item.id" v-if="item.hardwareTypeEnum.enumName == 'ONE_MACHINE'">-->
|
|
|
- <!--<div class="things-for-box">-->
|
|
|
- <!--<p class="left-title">广播系统</p>-->
|
|
|
- <!--<p class="right-button" @click="handleAdd">播放文字</p>-->
|
|
|
- <!--</div>-->
|
|
|
- <!--</div>-->
|
|
|
- <!--<img class="null-data-img" src="@/assets/ZDimages/basicsModules/null-data.png" v-if="!subjectData.labHardwareVOListTwo[0]">-->
|
|
|
- <!--<p class="null-p" v-if="!subjectData.labHardwareVOListTwo[0]" >暂无物联控制信息,请在更多操作-物联设备配置中进行添加</p>-->
|
|
|
+ <img class="null-data-img" src="@/assets/ZDimages/basicsModules/null-data-1.png" v-if="!hardwareList[0]">
|
|
|
+ <div class="all-title-box" style="height:40px;margin-top:20px;">
|
|
|
+ <p></p>
|
|
|
+ <p>视频监控</p>
|
|
|
+ </div>
|
|
|
+ <img class="null-data-img" src="@/assets/ZDimages/basicsModules/null-data-1.png" v-if="!videoList[0]">
|
|
|
+ <mpegts-video style="display: inline-block" :videoProps="item" v-for="(item,index) in videoList" :key="index"></mpegts-video>
|
|
|
+
|
|
|
+ <!--广播-->
|
|
|
+
|
|
|
+ <div class="all-title-box" style="height:40px;margin-top:10px;">
|
|
|
+ <p></p>
|
|
|
+ <p>语音广播</p>
|
|
|
+ </div>
|
|
|
+ <div class="things-box" v-for="(item,index) in loudspeakerList" :key="item.id">
|
|
|
+ <div class="things-for-box">
|
|
|
+ <p class="left-title">{{item.deviceName}}</p>
|
|
|
+ <p class="right-button" @click="handleAdd(item.deviceNo)">播放文字</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <img class="null-data-img" src="@/assets/ZDimages/basicsModules/null-data.png" v-if="!loudspeakerList[0]">
|
|
|
+
|
|
|
+ <!--危险源信息-->
|
|
|
+
|
|
|
<!--<div class="all-title-box" style="height:40px;margin-top:10px;">-->
|
|
|
<!--<p></p>-->
|
|
|
<!--<p>危险源信息</p>-->
|
|
@@ -152,18 +150,9 @@
|
|
|
<!--</div>-->
|
|
|
<!--<img class="null-data-img" src="@/assets/ZDimages/basicsModules/null-data.png" v-if="!subjectData.hazardList[0]">-->
|
|
|
<!--<p class="null-p" v-if="!subjectData.hazardList[0]" >暂无危险源信息,请在更多操作-关联配置中进行添加</p>-->
|
|
|
- <!--<div class="all-title-box" style="height:40px;margin-top:20px;">-->
|
|
|
- <!--<p></p>-->
|
|
|
- <!--<p>视频监控</p>-->
|
|
|
- <!--</div>-->
|
|
|
- <!--<div class="video-max-box">-->
|
|
|
- <!--<div class="video-min-box" v-for="(item,index) in subjectData.videoData" :key="item.id">-->
|
|
|
- <!--<video :id="item.divId" ref="videoRef" autoplay controls muted width="240" height="130px"></video>-->
|
|
|
- <!--<p class="el-icon-full-screen position-p" @click="videoFullScreen(index)"></p>-->
|
|
|
- <!--</div>-->
|
|
|
- <!--</div>-->
|
|
|
- <!--<img class="null-data-img" src="@/assets/ZDimages/basicsModules/null-data.png" v-if="!subjectData.videoData[0]">-->
|
|
|
- <!--<p class="null-p" v-if="!subjectData.videoData[0]" >暂无视频监控信息,请在更多操作-物联设备配置中进行添加</p>-->
|
|
|
+
|
|
|
+ <!--检查项信息-->
|
|
|
+
|
|
|
<!--<div class="all-title-box" style="height:30px;">-->
|
|
|
<!--<p></p>-->
|
|
|
<!--<p>检查项信息</p>-->
|
|
@@ -192,32 +181,21 @@
|
|
|
<!--</p>-->
|
|
|
<!--</div>-->
|
|
|
<!--</div>-->
|
|
|
+
|
|
|
</div>
|
|
|
- <!--<!–展示实验室二维码–>-->
|
|
|
- <!--<el-dialog title="实验室二维码" :visible.sync="codeType" width="500px" append-to-body>-->
|
|
|
- <!--<vue-qr style="display: block;height:460px;width:460px;cursor:pointer;margin:0 auto;" :text="subjectData.qrCodeUrl" :size="200"></vue-qr>-->
|
|
|
- <!--</el-dialog>-->
|
|
|
- <!--<!–播放文字窗口–>-->
|
|
|
- <!--<el-dialog title="广播系统" :visible.sync="open" width="500px" append-to-body>-->
|
|
|
- <!--<el-form ref="form" :model="form" :rules="rules" label-width="80px">-->
|
|
|
- <!--<el-form-item label="播放文字" prop="txt">-->
|
|
|
- <!--<el-input v-model="form.txt" placeholder="请输入播放文字" />-->
|
|
|
- <!--</el-form-item>-->
|
|
|
- <!--<el-form-item label="播报方式" prop="type">-->
|
|
|
- <!--<el-radio-group v-model="form.type">-->
|
|
|
- <!--<el-radio :label="1">文字</el-radio>-->
|
|
|
- <!--<el-radio :label="2">音频</el-radio>-->
|
|
|
- <!--</el-radio-group>-->
|
|
|
- <!--</el-form-item>-->
|
|
|
- <!--</el-form>-->
|
|
|
- <!--<div slot="footer" class="dialog-footer dialog-footer-box">-->
|
|
|
- <!--<p class="dialog-footer-button-null"></p>-->
|
|
|
- <!--<p class="dialog-footer-button-info" @click="cancel">取消</p>-->
|
|
|
- <!--<p class="dialog-footer-button-primary" @click="submitFormOne">提交</p>-->
|
|
|
- <!--<p class="dialog-footer-button-null"></p>-->
|
|
|
- <!--</div>-->
|
|
|
- <!--</el-dialog>-->
|
|
|
<qr-code-dialog ref="qrCodeDialog" :qrCodeDialogData="qrCodeDialogData"></qr-code-dialog>
|
|
|
+ <!--播放文字窗口-->
|
|
|
+ <el-dialog title="语音广播" :visible.sync="open" width="500px" append-to-body>
|
|
|
+ <el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
|
|
+ <el-form-item label="播放文字" prop="text">
|
|
|
+ <el-input v-model="form.text" placeholder="请输入播放文字" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="cancel">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submitFormOne">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -227,17 +205,22 @@
|
|
|
import { subjectInfo,mangerVoice } from "@/apiDemo/laboratory/subject";
|
|
|
import vueQr from 'vue-qr'
|
|
|
// V3
|
|
|
+ import { controlsRestrictVerify } from '@/utils/index'
|
|
|
import qrCodeDialog from "@/components/qrCodeDialog/index.vue"
|
|
|
+ import mpegtsVideo from '@/components/mpegtsVideo/mpegtsVideo.vue'
|
|
|
import {
|
|
|
iotSensorFindBySubId,
|
|
|
iotHardwareFindByType,
|
|
|
- iotHardwareOperatingHardware
|
|
|
+ iotHardwareOperatingHardware,
|
|
|
+ iotDeviceFindByType,
|
|
|
+ iotSpeakerPlayText
|
|
|
} from '@/api/commonality/permission'
|
|
|
export default {
|
|
|
name: "infoPage",
|
|
|
components: {
|
|
|
vueQr,
|
|
|
- qrCodeDialog
|
|
|
+ qrCodeDialog,
|
|
|
+ mpegtsVideo,
|
|
|
},
|
|
|
props:{
|
|
|
subjectData:{},
|
|
@@ -260,7 +243,7 @@
|
|
|
open:false,
|
|
|
form:{},
|
|
|
rules:{
|
|
|
- txt:[
|
|
|
+ text:[
|
|
|
{required: true, message: '请输入播放文字', trigger: 'blur'},
|
|
|
{ required: true, message: "请输入播放文字", validator: this.spaceJudgment, trigger: "blur" }
|
|
|
],
|
|
@@ -272,14 +255,39 @@
|
|
|
sensorList:[],
|
|
|
//硬件数据
|
|
|
hardwareList:[],
|
|
|
+ //视频数据
|
|
|
+ videoList:[
|
|
|
+ {
|
|
|
+ id:1, //(ID:非必传-默认随机生成)
|
|
|
+ width:490, //(宽度:非必传-默认600)
|
|
|
+ height:280, //(高度:非必传-默认338)
|
|
|
+ type:'flv',
|
|
|
+ url:"ws://192.168.1.43:8230/rtp/440102004920000000010064_34020000001320000064.flv" //(视频地址:必传)
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:2, //(ID:非必传-默认随机生成)
|
|
|
+ width:490, //(宽度:非必传-默认600)
|
|
|
+ height:280, //(高度:非必传-默认338)
|
|
|
+ type:'flv',
|
|
|
+ url:"ws://192.168.1.43:8230/rtp/440102004920000000010064_34020000001320000064.flv" //(视频地址:必传)
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ //喇叭数据
|
|
|
+ loudspeakerList:[],
|
|
|
+ //MQTT请求参数-传感器
|
|
|
+ sensorMtOpic:"iot/device/sensor/sub/",
|
|
|
+ sensorClient:{},
|
|
|
+ lastOnlineTime:'',
|
|
|
+ //MQTT请求参数-传感器
|
|
|
+ hardwareMtOpic:"iot/hardware/all/sub/",
|
|
|
+ hardwareClient:{},
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- // 初始化
|
|
|
- this.initialize();
|
|
|
},
|
|
|
mounted(){
|
|
|
-
|
|
|
+ // 初始化
|
|
|
+ this.initialize();
|
|
|
},
|
|
|
methods:{
|
|
|
initialize(){
|
|
@@ -316,28 +324,38 @@
|
|
|
this.$set(this,'sensorList',response.data);
|
|
|
})
|
|
|
//硬件查询
|
|
|
- iotHardwareFindByType({subId:this.subjectData.subId}).then(response => {
|
|
|
+ iotHardwareFindByType({subjectId:this.subjectData.subId}).then(response => {
|
|
|
this.$set(this,'hardwareList',response.data);
|
|
|
})
|
|
|
+ iotDeviceFindByType({ subjectId:this.subjectData.subId, typeKeyList:['horn'] }).then(response => {
|
|
|
+ this.$set(this,'loudspeakerList',response.data);
|
|
|
+ })
|
|
|
},
|
|
|
//播放文字
|
|
|
- handleAdd() {
|
|
|
- this.open = true;
|
|
|
+ handleAdd(deviceNo) {
|
|
|
+ // if(!controlsRestrictVerify('subHardwareControl')){
|
|
|
+ // this.msgError('没有相关操作权限,请联系管理员')
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ this.$set(this,'form',{
|
|
|
+ deviceNo:deviceNo,
|
|
|
+ text:'',
|
|
|
+ });
|
|
|
+ this.$set(this,'open',true);
|
|
|
},
|
|
|
// 取消按钮
|
|
|
cancel() {
|
|
|
- this.form = {};
|
|
|
- this.open = false;
|
|
|
+ this.$set(this,'form',{});
|
|
|
+ this.$set(this,'open',false);
|
|
|
},
|
|
|
/*播放文字*/
|
|
|
submitFormOne(){
|
|
|
this.$refs["form"].validate(valid => {
|
|
|
if (valid) {
|
|
|
- let id = this.subjectData.id;
|
|
|
- mangerVoice(this.form,id).then(response => {
|
|
|
- this.msgSuccess("播放成功");
|
|
|
- this.open = false;
|
|
|
- });
|
|
|
+ iotSpeakerPlayText(this.form).then(response => {
|
|
|
+ this.msgSuccess(response.message)
|
|
|
+ this.$set(this,'open',false);
|
|
|
+ })
|
|
|
}
|
|
|
});
|
|
|
},
|
|
@@ -356,6 +374,10 @@
|
|
|
// 开启关闭验证
|
|
|
async changeIsNeedCaptcha (row) {
|
|
|
let self = this;
|
|
|
+ if(!controlsRestrictVerify('subHardwareControl')){
|
|
|
+ this.msgError('没有相关操作权限,请联系管理员')
|
|
|
+ return
|
|
|
+ }
|
|
|
let text = row.operatingState?'关闭':'开启';
|
|
|
this.$confirm(`是否`+text+`此设备`, "提示", {
|
|
|
confirmButtonText: "确定",
|
|
@@ -383,6 +405,113 @@
|
|
|
backPage(){
|
|
|
this.$parent.clickPage(1);
|
|
|
},
|
|
|
+ //MQTT订阅
|
|
|
+ sensorMQTT(){
|
|
|
+ let self = this;
|
|
|
+ this.sensorClient = mqtt.connect(localStorage.getItem('mqttUrl'), {
|
|
|
+ username: localStorage.getItem('mqttUser'),
|
|
|
+ password:localStorage.getItem('mqttPassword')
|
|
|
+ });
|
|
|
+ this.sensorClient.on("connect", e =>{
|
|
|
+ this.sensorClient.subscribe(this.sensorMtOpic+self.subjectData.subId, (err) => {
|
|
|
+ if (!err) {
|
|
|
+ // console.log("订阅成功:" + this.mtOpic+self.$parent.subId);
|
|
|
+ }else{
|
|
|
+ // console.log("连接错误:" + err);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.sensorClient.on("message", (topic, message) => {
|
|
|
+ if (message){
|
|
|
+ let data = JSON.parse(message)
|
|
|
+ let list = JSON.parse(JSON.stringify(this.sensorList))
|
|
|
+ list.forEach((item)=>{
|
|
|
+ data.forEach((minItem)=>{
|
|
|
+ if(item.deviceNo == minItem.deviceNo){
|
|
|
+ item.deviceValue = minItem.deviceValue;
|
|
|
+ item.online = minItem.online;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ if(data[0].lastOnlineTime){
|
|
|
+ this.$set(this,'lastOnlineTime',data[0].lastOnlineTime);
|
|
|
+ }else{
|
|
|
+ this.$set(this,'lastOnlineTime','');
|
|
|
+ }
|
|
|
+ this.$set(this,'sensorList',list);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //取消订阅关闭MQTT连接
|
|
|
+ sensorOffMQTT(type){
|
|
|
+ let self = this;
|
|
|
+ if(self.sensorClient.unsubscribe){
|
|
|
+ self.sensorClient.unsubscribe(self.hardwareMtOpic+self.subjectData.subId, error => {
|
|
|
+ if (error) {
|
|
|
+ // console.log('mqtt关闭连接错误:', error)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ self.sensorClient.end();
|
|
|
+ this.$set(this,'sensorClient',{});
|
|
|
+ }
|
|
|
+ //判断传入参数如果存在 发起一次新的连接
|
|
|
+ if(type){
|
|
|
+ this.sensorMQTT();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //MQTT订阅
|
|
|
+ hardwareMQTT(){
|
|
|
+ let self = this;
|
|
|
+ this.hardwareClient = mqtt.connect(localStorage.getItem('mqttUrl'), {
|
|
|
+ username: localStorage.getItem('mqttUser'),
|
|
|
+ password:localStorage.getItem('mqttPassword')
|
|
|
+ });
|
|
|
+ this.hardwareClient.on("connect", e =>{
|
|
|
+ this.hardwareClient.subscribe(this.mtOpic+self.$parent.subId, (err) => {
|
|
|
+ if (!err) {
|
|
|
+ // console.log("订阅成功:" + this.mtOpic+self.$parent.subId);
|
|
|
+ }else{
|
|
|
+ // console.log("连接错误:" + err);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.hardwareClient.on("message", (topic, message) => {
|
|
|
+ if (message){
|
|
|
+ let data = JSON.parse(message)
|
|
|
+ let list = JSON.parse(JSON.stringify(this.hardwareList))
|
|
|
+ list.forEach((item)=>{
|
|
|
+ if(item.hardwareNo == data.hardwareNo){
|
|
|
+ item.operatingState = data.operatingState;
|
|
|
+ item.online = data.online;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.$set(this,'hardwareList',list);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //取消订阅关闭MQTT连接
|
|
|
+ hardwareOffMQTT(type){
|
|
|
+ let self = this;
|
|
|
+ if(self.hardwareClient.unsubscribe){
|
|
|
+ self.hardwareClient.unsubscribe(self.mtOpic+self.$parent.subId, error => {
|
|
|
+ if (error) {
|
|
|
+ // console.log('mqtt关闭连接错误:', error)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ self.hardwareClient.end();
|
|
|
+ this.$set(this,'hardwareClient',{});
|
|
|
+ }
|
|
|
+ //判断传入参数如果存在 发起一次新的连接
|
|
|
+ if(type){
|
|
|
+ this.hardwareMQTT();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ //清除定时器
|
|
|
+ let self = this;
|
|
|
+ self.sensorOffMQTT();
|
|
|
+ self.hardwareOffMQTT();
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
@@ -607,31 +736,6 @@
|
|
|
color:#333;
|
|
|
}
|
|
|
}
|
|
|
- .video-max-box{
|
|
|
- .video-min-box{
|
|
|
- display: inline-block;
|
|
|
- overflow: hidden;
|
|
|
- width:240px;
|
|
|
- margin-bottom:20px;
|
|
|
- height:130px;
|
|
|
- position: relative;
|
|
|
- .position-p{
|
|
|
- width:30px;
|
|
|
- height:30px;
|
|
|
- text-align: center;
|
|
|
- line-height:30px;
|
|
|
- font-size:18px;
|
|
|
- position: absolute;
|
|
|
- top:0;
|
|
|
- right:0;
|
|
|
- color:#fff;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
- .video-min-box:nth-child(2n+0){
|
|
|
- margin-left:20px;
|
|
|
- }
|
|
|
- }
|
|
|
.inspection-box{
|
|
|
div{
|
|
|
display: flex;
|
|
@@ -661,10 +765,9 @@
|
|
|
color:#999;
|
|
|
}
|
|
|
.null-data-img{
|
|
|
- width:137px;
|
|
|
- height:137px;
|
|
|
display: block;
|
|
|
margin:10px auto;
|
|
|
+ width:150px;
|
|
|
}
|
|
|
.all-title-box{
|
|
|
display: flex;
|