|
@@ -1,59 +1,6 @@
|
|
|
<!--硬件管理/智能通风-->
|
|
|
<template>
|
|
|
<div class="smartVentilation">
|
|
|
- <!--<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px" class="form-box">-->
|
|
|
-
|
|
|
- <!--<el-form-item label="学院" prop="deptId">-->
|
|
|
- <!--<el-select v-model="queryParams.deptId" placeholder="请选择学院" clearable @change="handleNodeClick">-->
|
|
|
- <!--<el-option-->
|
|
|
- <!--v-for="dict in deptOptions"-->
|
|
|
- <!--:key="dict.deptId"-->
|
|
|
- <!--:label="dict.deptName"-->
|
|
|
- <!--:value="dict.deptId"-->
|
|
|
- <!--></el-option>-->
|
|
|
- <!--</el-select>-->
|
|
|
- <!--</el-form-item>-->
|
|
|
- <!--<!–<el-form-item label="学院" prop="type">–>-->
|
|
|
- <!--<!–<el-select v-model="queryParams.name" placeholder="请选择学院" clearable size="small">–>-->
|
|
|
- <!--<!–<el-option label="请选择字典生成" value="" />–>-->
|
|
|
- <!--<!–</el-select>–>-->
|
|
|
- <!--<!–</el-form-item>–>-->
|
|
|
- <!--<el-form-item label="实验室" prop="subjectId">-->
|
|
|
- <!--<el-select v-model="queryParams.subjectId" clearable placeholder="请选择实验室">-->
|
|
|
- <!--<el-option-->
|
|
|
- <!--v-for="item in subjectOptions"-->
|
|
|
- <!--:key="item.id"-->
|
|
|
- <!--:label="item.name"-->
|
|
|
- <!--:value="item.id">-->
|
|
|
- <!--</el-option>-->
|
|
|
- <!--</el-select>-->
|
|
|
- <!--</el-form-item>-->
|
|
|
- <!--<!–<el-form-item label="实验室" prop="type">–>-->
|
|
|
- <!--<!–<el-select v-model="queryParams.factory" placeholder="请选择实验室" clearable size="small">–>-->
|
|
|
- <!--<!–<el-option label="请选择字典生成" value="" />–>-->
|
|
|
- <!--<!–</el-select>–>-->
|
|
|
- <!--<!–</el-form-item>–>-->
|
|
|
- <!--<el-form-item label="状态" prop="operate">-->
|
|
|
- <!--<el-select v-model="queryParams.operate" placeholder="请选择状态" clearable size="small">-->
|
|
|
- <!--<el-option label="在线" value="ONLINE" />-->
|
|
|
- <!--<el-option label="离线" value="OFFLINE" />-->
|
|
|
- <!--<el-option label="开启" value="OPEN" />-->
|
|
|
- <!--<el-option label="关闭" value="CLOSE" />-->
|
|
|
- <!--</el-select>-->
|
|
|
- <!--</el-form-item>-->
|
|
|
- <!--<el-form-item style="float: right;">-->
|
|
|
- <!--<el-col :span="1.5">-->
|
|
|
- <!--<p class="add-button-one-120"-->
|
|
|
- <!--@click="handleAdd"-->
|
|
|
- <!--v-hasPermi="['laboratory:hardware:add']"-->
|
|
|
- <!--><i class="el-icon-plus"></i>新增硬件</p>-->
|
|
|
- <!--</el-col>-->
|
|
|
- <!--</el-form-item>-->
|
|
|
- <!--<el-form-item>-->
|
|
|
- <!--<p class="inquire-button-one" @click="handleQuery">查询</p>-->
|
|
|
- <!--<p class="reset-button-one" @click="resetQuery">重置</p>-->
|
|
|
- <!--</el-form-item>-->
|
|
|
- <!--</el-form>-->
|
|
|
<el-table v-loading="loading" border :data="hardwareList" @selection-change="handleSelectionChange">
|
|
|
<el-table-column label="名称" align="left" prop="name" />
|
|
|
<el-table-column label="学院" align="left" prop="deptName" />
|
|
@@ -66,7 +13,6 @@
|
|
|
</el-table-column>
|
|
|
<el-table-column label="开关" align="left" >
|
|
|
<template slot-scope="scope" class="captcha-img">
|
|
|
- <!--@change="(event)=>switchChange(event,scope.row.id)"-->
|
|
|
<el-switch
|
|
|
v-if="scope.row.status == 3||scope.row.status == 4"
|
|
|
@click.native="changeIsNeedCaptcha(scope.row)"
|
|
@@ -127,25 +73,6 @@
|
|
|
maxLength="8"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
- <!--<el-form-item label="硬件类型" v-if="pageType==''" prop="type">-->
|
|
|
- <!--<el-select v-model="form.type" placeholder="请选择硬件类型">-->
|
|
|
- <!--<el-option label="请选择硬件类型" value="" />-->
|
|
|
- <!--<el-option v-for="hardType in hardTypeOptions"-->
|
|
|
- <!--:key="hardType.enumName"-->
|
|
|
- <!--:label="hardType.name"-->
|
|
|
- <!--:value="hardType.enumName">-->
|
|
|
- <!--</el-option>-->
|
|
|
- <!--</el-select>-->
|
|
|
- <!--</el-form-item>-->
|
|
|
-<!-- <el-form-item label="MAC地址" prop="macAdd">
|
|
|
- <el-input
|
|
|
- v-model="form.macAdd"
|
|
|
- placeholder="请输入MAC地址"
|
|
|
- clearable
|
|
|
- size="small"
|
|
|
- @keyup.enter.native="handleQuery"
|
|
|
- />
|
|
|
- </el-form-item>-->
|
|
|
<el-form-item label="实验室" prop="subjectId">
|
|
|
<el-select v-model="form.subjectId" placeholder="请选择实验室">
|
|
|
<el-option v-for="lab in labListOptions"
|
|
@@ -155,14 +82,11 @@
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
-
|
|
|
-
|
|
|
<el-form-item label="继电器类型" label-width="1rem" @change="radioChange">
|
|
|
<el-radio-group v-model="form.hardwareType">
|
|
|
<el-radio :label="item.value" :key="item.value" v-for="item in hardwardTypeList">{{item.label}}</el-radio>
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
-
|
|
|
<el-form-item label="绑定继电器" prop="relayCode" v-if="form.hardwareType==1">
|
|
|
<el-select v-model="form.relayCode" placeholder="请选择继电器" clearable @change="loadRelayNum" @clear="loadClear">
|
|
|
<el-option v-for="relay in relayList"
|
|
@@ -172,7 +96,6 @@
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
-
|
|
|
<el-form-item label="继电器编号" prop="relayCode" v-if="form.hardwareType==2">
|
|
|
<el-input
|
|
|
v-model="form.relayCode"
|
|
@@ -182,7 +105,6 @@
|
|
|
maxLength="15"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
-
|
|
|
<el-form-item label="继电器位置" prop="bit">
|
|
|
<el-select v-model="form.bit" placeholder="请选择继电器位置" clearable>
|
|
|
<el-option v-for="lab in relayNumList"
|
|
@@ -192,18 +114,6 @@
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <!--<el-form-item label="硬件位置" prop="position">-->
|
|
|
- <!--<div class="map-box" :style="'width:'+mapData.widthData*3+'px;height:'+mapData.heightData*3+'px;'">-->
|
|
|
- <!--<div v-for="(item,index1) in mapData.list" v-if="isUpdate"-->
|
|
|
- <!--:style="'top:'+item.y*3+'px;left:'+item.x*3+'px;'"-->
|
|
|
- <!--@mouseenter="moveClick(index1)"-->
|
|
|
- <!--@mousedown="move">-->
|
|
|
- <!--{{form.name?form.name:'未命名'}}-->
|
|
|
- <!--</div>-->
|
|
|
- <!--<p class="map-p" v-for="(item) in mapList" :style="'top:'+item.y*3+'px;left:'+item.x*3+'px;'">{{item.name}}</p>-->
|
|
|
- <!--</div>-->
|
|
|
- <!--</el-form-item>-->
|
|
|
-
|
|
|
<el-form-item label="配置名称" prop="relayCode" v-if="form.hardwareType==2">
|
|
|
<el-input
|
|
|
v-model="form.configName"
|
|
@@ -213,8 +123,6 @@
|
|
|
maxLength="8"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
-
|
|
|
-
|
|
|
<el-form-item label="配置状态" prop="relayCode" v-if="form.hardwareType==2">
|
|
|
<el-input
|
|
|
v-model="form.configStatus"
|
|
@@ -224,7 +132,6 @@
|
|
|
maxLength="8"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
-
|
|
|
</el-form>
|
|
|
</div>
|
|
|
<div class="videoSurveillance-bottom-button-box">
|
|
@@ -234,38 +141,11 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-drawer>
|
|
|
- <!--<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body class="hardware-dialog">-->
|
|
|
- <!--<el-form ref="form" :model="form" :rules="rules" label-width="80px">-->
|
|
|
- <!--<el-form-item label="设备名称" prop="name">-->
|
|
|
- <!--<el-input v-model="form.name" placeholder="请输入设备名称" />-->
|
|
|
- <!--</el-form-item>-->
|
|
|
- <!--<el-form-item label="设备类型" prop="type" v-if="pageType==''">-->
|
|
|
- <!--<el-select v-model="form.type" placeholder="请选择设备类型" >-->
|
|
|
- <!--<el-option label="请选择字典生成" value="" />-->
|
|
|
- <!--</el-select>-->
|
|
|
- <!--</el-form-item>-->
|
|
|
- <!--<el-form-item label="mac地址" prop="macAdd">-->
|
|
|
- <!--<el-input v-model="form.macAdd" placeholder="请输入mac地址" />-->
|
|
|
- <!--</el-form-item>-->
|
|
|
- <!--<el-form-item label="实验室" prop="subjectId">-->
|
|
|
- <!--<el-select v-model="form.subjectId" placeholder="请选择实验室">-->
|
|
|
- <!--<el-option v-for="lab in labListOptions"-->
|
|
|
- <!--:key="lab.id"-->
|
|
|
- <!--:label="lab.name"-->
|
|
|
- <!--:value="lab.id">-->
|
|
|
- <!--</el-option>-->
|
|
|
- <!--</el-select>-->
|
|
|
- <!--</el-form-item>-->
|
|
|
- <!--</el-form>-->
|
|
|
- <!--<div slot="footer" class="dialog-footer">-->
|
|
|
- <!--<el-button type="primary" @click="submitForm">确 定</el-button>-->
|
|
|
- <!--<el-button @click="cancel">取 消</el-button>-->
|
|
|
- <!--</div>-->
|
|
|
- <!--</el-dialog>-->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import mqtt from 'mqtt'
|
|
|
import { subjectDictList } from "@/api/laboratory/group";
|
|
|
import { listDepartments } from "@/api/system/dept";
|
|
|
import { listHardware, getHardware, delHardware, addHardware, updateHardware,queryHardwareType,getHardwareDetail,getSubjectLayout,hardWareControl } from "@/api/laboratory/hardware";
|
|
@@ -274,7 +154,6 @@
|
|
|
import Treeselect from "@riophae/vue-treeselect";
|
|
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
|
import { listRelay } from "@/api/laboratory/relay";
|
|
|
-
|
|
|
export default {
|
|
|
props:{
|
|
|
pageType:{},
|
|
@@ -310,20 +189,6 @@
|
|
|
isUpdate:false,
|
|
|
switch:0,
|
|
|
disabledType: "",
|
|
|
- // 查询参数
|
|
|
- // queryParams: {
|
|
|
- // pageNum: 1,
|
|
|
- // pageSize: 10,
|
|
|
- // name: null,
|
|
|
- // factory: null,
|
|
|
- // type: null,
|
|
|
- // macAdd: null,
|
|
|
- // subjectId: null,
|
|
|
- // deptId: null,
|
|
|
- // deptName: null,
|
|
|
- // operate: null,
|
|
|
- // userId: null,
|
|
|
- // },
|
|
|
// 表单参数
|
|
|
form: {
|
|
|
hardwareType: 1,
|
|
@@ -338,9 +203,6 @@
|
|
|
type: [
|
|
|
{ required: true, message: "请选择硬件类型", trigger: "blur" }
|
|
|
],
|
|
|
- // macAdd: [
|
|
|
- // { required: true, message: "请输入MAC地址", trigger: "blur" },
|
|
|
- // ],
|
|
|
subjectId:[
|
|
|
{ required: true, message: "请选择实验室", trigger: "blur" },
|
|
|
]
|
|
@@ -380,7 +242,10 @@
|
|
|
hardwardTypeList:[
|
|
|
{value:1,label:"老继电器"},
|
|
|
{value:2,label:"新继电器"}
|
|
|
- ]
|
|
|
+ ],
|
|
|
+ mtopic:"lab/hardware/data",
|
|
|
+ //mqtt发送id数组
|
|
|
+ mqttIdList:[],
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
@@ -511,13 +376,65 @@
|
|
|
},
|
|
|
/** 查询硬件列表 */
|
|
|
getList() {
|
|
|
- let self = this;
|
|
|
+ this.offMQTT();
|
|
|
this.loading = true;
|
|
|
this.queryParams.type = this.pageType;
|
|
|
listHardware(this.queryParams).then(response => {
|
|
|
this.hardwareList = response.rows;
|
|
|
this.total = response.total;
|
|
|
this.loading = false;
|
|
|
+ //处理实验室id
|
|
|
+ let list = [];
|
|
|
+ for(let i=0;i<response.rows.length;i++){
|
|
|
+ let num = 0;
|
|
|
+ for(let o=0;o<list.length;o++){
|
|
|
+ if(response.rows[i].subjectId == list){
|
|
|
+ num++
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(num == 0){
|
|
|
+ list.push(response.rows[i].subjectId)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$set(this,'mqttIdList',list);
|
|
|
+ this.subscriptionMQTT();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //MQTT订阅
|
|
|
+ subscriptionMQTT(){
|
|
|
+ let self = this;
|
|
|
+ this.client = mqtt.connect(process.env.VUE_APP_BASE_MQTT_API, {
|
|
|
+ username: process.env.VUE_APP_BASE_MQTT_USERNAME,
|
|
|
+ password: process.env.VUE_APP_BASE_MQTT_PASSWORD
|
|
|
+ });
|
|
|
+ this.client.on("connect", e =>{
|
|
|
+ console.log("连接成功");
|
|
|
+ for(let i=0;i<self.mqttIdList.length;i++){
|
|
|
+ this.client.subscribe(this.mtopic+self.mqttIdList[i], (err) => {
|
|
|
+ if (!err) {
|
|
|
+ console.log("订阅成功:" + this.mtopic+self.mqttIdList[i]);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.client.on("message", (topic, message) => {
|
|
|
+ if (message){
|
|
|
+ let data = JSON.parse(message)
|
|
|
+ // this.getStatistics();
|
|
|
+ for(let i=0;i<data.data.length;i++){
|
|
|
+ for(let o=0;o<self.hardwareList.length;o++){
|
|
|
+ if(data.data[i].num == self.hardwareList[o].id){
|
|
|
+ if (data.data[i].hardwareOperate == 'CLOSE') {
|
|
|
+ self.$set(self.hardwareList[o],'status',4);
|
|
|
+ } else if (data.data[i].hardwareOperate == 'OPEN') {
|
|
|
+ self.$set(self.hardwareList[o],'status',3);
|
|
|
+ } else if (data.data[i].hardwareOperate == 'OFFLINE') {
|
|
|
+ self.$set(self.hardwareList[o],'status',0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
});
|
|
|
},
|
|
|
// 查询继电器列表
|
|
@@ -800,8 +717,29 @@
|
|
|
this.download('laboratory/hardware/export', {
|
|
|
...this.queryParams
|
|
|
}, `laboratory_hardware.xlsx`)
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ //取消订阅关闭MQTT连接
|
|
|
+ offMQTT(){
|
|
|
+ let self = this;
|
|
|
+ if (self.mqttIdList[0]) {
|
|
|
+ for (let i = 0; i < self.mqttIdList.length; i++) {
|
|
|
+ self.client.unsubscribe(this.mtopic + self.mqttIdList[i], error => {
|
|
|
+ if (error) {
|
|
|
+ console.log('Unsubscribe error', error)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ self.client.end();
|
|
|
+ self.client = {};
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ //清除定时器
|
|
|
+ let self = this;
|
|
|
+ self.offMQTT();
|
|
|
+ console.log("beforeDestroy");
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|