1116 lines
30 KiB
Vue
1116 lines
30 KiB
Vue
<template>
|
|
<div class="device-select-nav main-device-select-card">
|
|
<div v-if="childDeviceList.length > 0" class="layout-select-wrap">
|
|
<!-- <div
|
|
class="but"
|
|
:disabled="tSelectLabelList.length <= 0"
|
|
@click="handleChildStatus('true')"
|
|
>
|
|
<i class="iconfont iconT icon-c"></i>
|
|
|
|
<span class="but-title">合闸</span>
|
|
</div>
|
|
|
|
<div
|
|
class="but"
|
|
:disabled="tSelectLabelList.length <= 0"
|
|
@click="handleChildStatus('true')"
|
|
>
|
|
<i class="iconfont iconF icon-c"></i>
|
|
|
|
<span class="but-title">分闸</span>
|
|
</div>
|
|
|
|
<div class="but" @click="handleAllStatus('true')">
|
|
<i class="iconfont iconhezha icon-c"></i>
|
|
|
|
<span class="but-title">一键合闸</span>
|
|
</div>
|
|
|
|
<div class="but" @click="handleAllStatus('false')">
|
|
<i class="iconfont iconfenzha icon-c"></i>
|
|
|
|
<span class="but-title">一键分闸</span>
|
|
</div>
|
|
|
|
<div class="but" @click="handleAllSelect('true')">
|
|
<i class="iconfont iconquanxuan icon-c"></i>
|
|
<span class="but-title">{{
|
|
childDeviceList.length > tSelectList.length ? "全选" : "取消"
|
|
}}</span>
|
|
</div> -->
|
|
|
|
<el-button
|
|
:disabled="tSelectLabelList.length <= 0"
|
|
plain
|
|
size="mini"
|
|
type="info"
|
|
@click="handleChildStatus('true')"
|
|
>
|
|
<div
|
|
style="
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<i class="iconfont iconT but-icon" />
|
|
合闸
|
|
</div>
|
|
</el-button>
|
|
<el-button
|
|
:disabled="tSelectLabelList.length <= 0"
|
|
plain
|
|
size="mini"
|
|
type="info"
|
|
@click="handleChildStatus('false')"
|
|
>
|
|
<div
|
|
style="
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<i class="iconfont iconF but-icon" />
|
|
分闸
|
|
</div>
|
|
</el-button>
|
|
<el-button plain size="mini" type="info" @click="handleAllStatus('true')">
|
|
<div
|
|
style="
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<i class="iconfont iconhezha but-icon" />
|
|
一键合闸
|
|
</div>
|
|
</el-button>
|
|
<el-button
|
|
plain
|
|
size="mini"
|
|
type="info"
|
|
@click="handleAllStatus('false')"
|
|
>
|
|
<div
|
|
style="
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<i class="iconfont iconfenzha but-icon" />
|
|
一键分闸
|
|
</div></el-button
|
|
>
|
|
<el-button
|
|
:disabled="tSelectLabelList.length <= 0"
|
|
plain
|
|
size="mini"
|
|
type="info"
|
|
@click="handleDevSearch()"
|
|
>
|
|
<div
|
|
style="
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<i class="iconfont el-icon-search but-icon" />
|
|
查找设备
|
|
</div>
|
|
</el-button>
|
|
<el-button plain size="mini" type="info" @click="handleAllSelect()">
|
|
<div
|
|
style="
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<i class="iconfont iconquanxuan but-icon" />
|
|
{{ childDeviceList.length > tSelectList.length ? "全选" : "取消" }}
|
|
</div>
|
|
</el-button>
|
|
|
|
<span class="title-span">已选择设备：</span>
|
|
<span v-if="tSelectLabelList.length <= 0">当前未选择设备</span>
|
|
<el-tag
|
|
v-for="(item, idx) in tSelectLabelList"
|
|
:key="idx"
|
|
closable
|
|
style="margin: 5px 5px 5px 0px"
|
|
@close="selectDevClose(item)"
|
|
>
|
|
{{ item }}
|
|
</el-tag>
|
|
</div>
|
|
<div v-else class="layout-select-wrap">
|
|
<span class="title-span">当前没有可用于分闸合闸设备~</span>
|
|
</div>
|
|
<div class="layout-device-list">
|
|
<el-card
|
|
:body-style="{
|
|
padding: '0px',
|
|
width: '220px',
|
|
boxShadow: '0 1px 5px 0 #2530341a',
|
|
cursor: 'pointer'
|
|
}"
|
|
:style="
|
|
deviceInfo.deviceId === checkobxDeviceId
|
|
? 'border: 1px solid #1890ff; margin: 5px; width: 220px; flex-shrink: 0;'
|
|
: ' margin: 5px; width: 220px; flex-shrink: 0;'
|
|
"
|
|
@click.native="viewDeviceChange(deviceInfo.deviceId)"
|
|
>
|
|
<div class="nav-p-dev">
|
|
<div
|
|
style="
|
|
height: 25px;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding: 0 10px;
|
|
padding-right: 10px;
|
|
padding-top: 5px;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
"
|
|
>
|
|
<span
|
|
:title="deviceInfo.deviceName"
|
|
class="dev-info-title"
|
|
style="
|
|
font-weight: 400;
|
|
height: 30px;
|
|
font-size: 16px;
|
|
line-height: 30px;
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
"
|
|
>{{ deviceInfo.deviceName }}</span
|
|
>
|
|
<div style="width: 60px; display: flex; justify-content: center">
|
|
<i
|
|
:class="signalType(deviceInfo.stype)"
|
|
style="color: black; font-size: 20px"
|
|
></i>
|
|
<signal-intensity
|
|
v-if="deviceInfo.stype !== 'LAN' && deviceInfo.stype !== 'lan'"
|
|
:intensityNumber="deviceInfo.signal"
|
|
></signal-intensity>
|
|
</div>
|
|
<!-- <i
|
|
v-if="deviceInfo.deviceId === checkobxDeviceId"
|
|
class="el-icon-s-claim"
|
|
style="font-size: 25px; color: #1890ff"
|
|
></i> -->
|
|
</div>
|
|
<div class="dev-info">
|
|
<div
|
|
:class="
|
|
deviceInfo['deviceState'] == 'ONLINE'
|
|
? 'dev-info-state'
|
|
: 'dev-info-state off-line'
|
|
"
|
|
>
|
|
<i
|
|
v-if="deviceInfo['deviceState'] == 'ONLINE'"
|
|
class="iconfont iconSYS_STA_1"
|
|
/>
|
|
<i v-else class="iconfont iconlixian" />
|
|
<span style="margin-left: 1px">{{
|
|
deviceInfo["deviceState"] == "ONLINE" ? "在线" : "离线"
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
|
|
<el-card
|
|
v-for="item in childDeviceList"
|
|
:key="item.deviceId"
|
|
:body-style="{ padding: '0px', width: '220px', cursor: 'pointer' }"
|
|
:style="
|
|
item.deviceId === checkobxDeviceId
|
|
? 'border: 1px solid #1890ff; margin: 5px; width: 220px; flex-shrink: 0; boxShadow: 0 1px 5px 0 #2530341a;'
|
|
: ' margin: 5px; width: 220px; flex-shrink: 0; boxShadow: 0 1px 5px 0 #2530341a;'
|
|
"
|
|
@click.native="viewDeviceChange(item.deviceId)"
|
|
>
|
|
<div class="nav-c-dev">
|
|
<div
|
|
style="
|
|
height: 25px;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 10px;
|
|
padding-right: 10px;
|
|
padding-top: 15px;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<span
|
|
:title="item.deviceName"
|
|
class="dev-info-title"
|
|
style="
|
|
font-weight: 400;
|
|
height: 30px;
|
|
font-size: 16px;
|
|
line-height: 30px;
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
"
|
|
>{{ item.deviceName }}</span
|
|
>
|
|
<div
|
|
:class="
|
|
tSelectList.indexOf(item.deviceId) >= 0
|
|
? 'checkbox-i selected-c'
|
|
: 'checkbox-i'
|
|
"
|
|
@click.stop="handleCheckbox(item)"
|
|
>
|
|
<i
|
|
v-show="tSelectList.indexOf(item.deviceId) >= 0"
|
|
class="el-icon-check"
|
|
></i>
|
|
</div>
|
|
</div>
|
|
<div class="dev-info">
|
|
<div
|
|
:class="
|
|
item['deviceState'] === 'ONLINE'
|
|
? 'dev-info-state'
|
|
: 'dev-info-state off-line'
|
|
"
|
|
style="width: 60px"
|
|
>
|
|
<i
|
|
v-if="item['deviceState'] === 'ONLINE'"
|
|
class="iconfont iconSYS_STA_1"
|
|
/>
|
|
<i v-else class="iconfont iconlixian" />
|
|
<span style="margin-left: 1px; margin-top: 1px">{{
|
|
getDeviceState(item["deviceState"])
|
|
}}</span>
|
|
</div>
|
|
<div
|
|
style="
|
|
width: 60px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
"
|
|
>
|
|
<i
|
|
v-if="item['switch'] == '1'"
|
|
class="iconfont iconT"
|
|
style="color: #76bbff; font-size: 16px"
|
|
/>
|
|
<i
|
|
v-else
|
|
class="iconfont iconF"
|
|
style="font-size: 16px; color: #878686"
|
|
/>
|
|
|
|
<span style="margin-left: 1px; margin-top: 1px; color: #878686">{{
|
|
item["switch"] == "1" ? "合闸" : "分闸"
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
<e-web-socket
|
|
:closeSleepTime="10000"
|
|
:wsServiceUrl="wsStatusService"
|
|
@message="wsMessage($event)"
|
|
></e-web-socket>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
listChildrenDevice,
|
|
setSwitchControl,
|
|
setLivetimeControl,
|
|
searchDevControl, setSwitchAllControl
|
|
} from "@/api/iot/device";
|
|
import {
|
|
devLiveWebSocketBaseUrl,
|
|
webSocketProjectGatewayUrl
|
|
} from "@/config/env";
|
|
import SignalIntensity from "./signalIntensity";
|
|
import EWebSocket from "@/components/EWebSocket/src/basic/index";
|
|
import { setFunctionControl } from '../../../api/iot/device'
|
|
export default {
|
|
name: "DeviceSelectNav",
|
|
components: {
|
|
SignalIntensity,
|
|
EWebSocket
|
|
},
|
|
props: {
|
|
deviceInfo: {
|
|
type: Object,
|
|
default: () => {
|
|
return {};
|
|
}
|
|
},
|
|
wsDeviceInfo: {
|
|
type: Object,
|
|
default: () => {
|
|
return {};
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
checkobxDeviceId: "",
|
|
childDeviceList: [],
|
|
stompClient: null,
|
|
socket_flag: true,
|
|
setTimeOut_flag: null,
|
|
timingPingWs_flag: null,
|
|
tSelectList: [],
|
|
tSelectLabelList: [],
|
|
iotSignalType: [],
|
|
// wsDeviceInfo: null?,
|
|
wsStatusService: ""
|
|
};
|
|
},
|
|
created() {
|
|
this.checkobxDeviceId = this.deviceInfo.deviceId || null;
|
|
this.getDicts("iot_signal_type").then(response => {
|
|
this.iotSignalType = response.data;
|
|
});
|
|
},
|
|
watch: {
|
|
wsDeviceInfo: {
|
|
handler: function() {
|
|
this.timingPingWs(this.wsDeviceInfo);
|
|
if (this.deviceInfo.deviceId !== this.wsDeviceInfo.deviceId) {
|
|
for (let i = 0; i < this.childDeviceList.length; i++) {
|
|
if (
|
|
this.childDeviceList[i]["deviceId"] ===
|
|
this.wsDeviceInfo["deviceId"]
|
|
) {
|
|
if(this.wsDeviceInfo?.switch !== null){
|
|
this.wsDeviceInfo.switch = this.wsDeviceInfo.switch.toString();
|
|
}
|
|
// this.childDeviceList[i]["switch"] =
|
|
// this.wsDeviceInfo?.switch !== null
|
|
// ? this.wsDeviceInfo?.switch.toString()
|
|
// : this.wsDeviceInfo?.switch
|
|
// this.wsDeviceInfo?.switch;
|
|
this.$forceUpdate();
|
|
break;
|
|
}
|
|
}
|
|
// this.timingPingWs(this.wsDeviceInfo);
|
|
// 更换设备 开启ws
|
|
// this.connection();
|
|
} else {
|
|
// this.connection();
|
|
}
|
|
},
|
|
deep: true
|
|
},
|
|
deviceInfo: {
|
|
handler: function() {
|
|
this.checkobxDeviceId = this.deviceInfo.deviceId || null;
|
|
this.getList();
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
methods: {
|
|
getDeviceState(e) {
|
|
switch (e) {
|
|
case "ONLINE":
|
|
return "在线";
|
|
case "OUTLINE":
|
|
return "脱线";
|
|
default:
|
|
return "离线";
|
|
}
|
|
},
|
|
// 开启 设备状态ws
|
|
handleOpenDevStatusService(str) {
|
|
this.wsStatusService = `${webSocketProjectGatewayUrl}/${this.getGuid()}/${
|
|
this.deviceInfo.deviceKey
|
|
},${str}`;
|
|
},
|
|
wsMessage(e) {
|
|
console.log("wsMessage", e);
|
|
// if (
|
|
// e["deviceState"] ||
|
|
// (e["switch"] !== null && e["switch"] !== undefined)
|
|
// ) {
|
|
// if(e["switch"] == "1"){
|
|
// e["switch"] = 1
|
|
// }else if(e["switch"] == "0"){
|
|
// e["switch"] = 0
|
|
// }
|
|
// this.handleDeviceInfo(e);
|
|
// }
|
|
this.handleDeviceInfo(e);
|
|
},
|
|
// 处理 socket 数据返回 赋值问题
|
|
handleDeviceInfo(param) {
|
|
if (param.tags.device_key === this.deviceInfo.deviceKey) {
|
|
if(param.type === "state"){
|
|
this.$nextTick(() => {
|
|
this.$set(this.deviceInfo, 'deviceState',param.state);
|
|
});
|
|
}
|
|
// this.deviceInfo = Object.assign(this.deviceInfo, param);
|
|
} else {
|
|
if (this.childDeviceList && this.childDeviceList.length > 0) {
|
|
this.childDeviceList = this.childDeviceList.map(item => {
|
|
if (item["deviceKey"] === param.tags.device_key) {
|
|
if(param.type === "state"){
|
|
item.deviceState = param.state;
|
|
}
|
|
if(param.type === "extra" && param.extra.type === "switch"){
|
|
item.switch = param.extra.switch;
|
|
}
|
|
return item;
|
|
} else {
|
|
return item;
|
|
}
|
|
});
|
|
this.$forceUpdate();
|
|
}
|
|
}
|
|
},
|
|
handleAllStatus(type) {
|
|
if (this.childDeviceList.length > 0) {
|
|
// this.childDeviceList.forEach(v => {
|
|
// if (this.tSelectList.indexOf(v.deviceId) < 0) {
|
|
// this.tSelectList.push(v.deviceId);
|
|
// this.tSelectLabelList.push(v.deviceName);
|
|
// }
|
|
// });
|
|
this.handleChildAllStatus(type);
|
|
}
|
|
},
|
|
// 点击子设备 线路开关
|
|
handleChildAllStatus(type) {
|
|
// if (this.tSelectLabelList.legnth > 0) {
|
|
this.$prompt("请输入登录密码", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
inputPattern: /^[a-z A-z 0-9 $.]+/,
|
|
inputType: "password",
|
|
inputErrorMessage: "登录密码不能为空"
|
|
}).then(({ value }) => {
|
|
let params = {
|
|
data: {
|
|
// cmd: "set_switch",
|
|
params: {
|
|
switch: 1
|
|
}
|
|
},
|
|
deviceId: "",
|
|
verifyKey: value
|
|
};
|
|
|
|
switch (type) {
|
|
case "true":
|
|
params.data.params.switch = 1;
|
|
params.deviceId = this.deviceInfo.deviceId;
|
|
break;
|
|
|
|
case "false":
|
|
params.data.params.switch = 0;
|
|
params.deviceId = this.deviceInfo.deviceId;
|
|
break;
|
|
}
|
|
|
|
setSwitchAllControl(params).then(res => {
|
|
this.msgSuccess("修改成功");
|
|
});
|
|
});
|
|
// }
|
|
},
|
|
handleDevSearch() {
|
|
this.$prompt("请输入登录密码", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
inputPattern: /^[a-z A-z 0-9 $.]+/,
|
|
inputType: "password",
|
|
inputErrorMessage: "登录密码不能为空"
|
|
}).then(({ value }) => {
|
|
let params = {
|
|
data: {
|
|
params: {}
|
|
},
|
|
deviceId: this.tSelectList.toString(),
|
|
verifyKey: value
|
|
};
|
|
|
|
searchDevControl(params).then(res => {
|
|
this.msgSuccess("修改成功");
|
|
});
|
|
});
|
|
},
|
|
handleAllSelect() {
|
|
if (this.childDeviceList.length > 0) {
|
|
if (this.tSelectList.length >= this.childDeviceList.length) {
|
|
this.tSelectList = [];
|
|
this.tSelectLabelList = [];
|
|
} else {
|
|
this.childDeviceList.forEach(v => {
|
|
if (this.tSelectList.indexOf(v.deviceId) < 0) {
|
|
this.tSelectList.push(v.deviceId);
|
|
this.tSelectLabelList.push(v.deviceName);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
},
|
|
|
|
// 点击子设备 线路开关
|
|
handleChildStatus(type) {
|
|
// if (this.tSelectLabelList.legnth > 0) {
|
|
this.$prompt("请输入登录密码", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
inputPattern: /^[a-z A-z 0-9 $.]+/,
|
|
inputType: "password",
|
|
inputErrorMessage: "登录密码不能为空"
|
|
}).then(({ value }) => {
|
|
let params = {
|
|
data: {
|
|
// cmd: "set_switch",
|
|
params: {
|
|
switch: 1
|
|
}
|
|
},
|
|
deviceId: "",
|
|
verifyKey: value
|
|
};
|
|
|
|
switch (type) {
|
|
case "true":
|
|
params.data.params.switch = 1;
|
|
params.deviceId = this.tSelectList.toString();
|
|
break;
|
|
|
|
case "false":
|
|
params.data.params.switch = 0;
|
|
params.deviceId = this.tSelectList.toString();
|
|
break;
|
|
}
|
|
|
|
setSwitchControl(params).then(res => {
|
|
this.msgSuccess("修改成功");
|
|
});
|
|
});
|
|
// }
|
|
},
|
|
selectDevClose(e) {
|
|
this.tSelectList.splice(this.tSelectLabelList.indexOf(e), 1);
|
|
this.tSelectLabelList.splice(this.tSelectLabelList.indexOf(e), 1);
|
|
},
|
|
handleCheckbox(e) {
|
|
if (this.tSelectList.indexOf(e.deviceId) >= 0) {
|
|
// delete e
|
|
this.tSelectList.splice(this.tSelectList.indexOf(e.deviceId), 1);
|
|
this.tSelectLabelList.splice(
|
|
this.tSelectLabelList.indexOf(e.deviceName),
|
|
1
|
|
);
|
|
} else {
|
|
this.tSelectLabelList.push(e.deviceName);
|
|
this.tSelectList.push(e.deviceId);
|
|
}
|
|
},
|
|
signalType(val) {
|
|
if (val) {
|
|
return "iconfont " + this.statusFormat(val);
|
|
}
|
|
return "iconfont " + this.statusFormat("0");
|
|
// switch (val) {
|
|
// case "5G":
|
|
// return "iconfont " + this.statusFormat(val);
|
|
// case "4G":
|
|
// return "iconfont " + this.statusFormat(val);
|
|
// case "3G":
|
|
// return "iconfont " + this.statusFormat(val);
|
|
// case "2G":
|
|
// return "iconfont " + this.statusFormat(val);
|
|
// default:
|
|
// return "iconfont " + this.statusFormat(0);
|
|
// }
|
|
},
|
|
|
|
// 字典状态字典翻译 描述
|
|
statusFormat(value) {
|
|
return this.selectDictDesc(this.iotSignalType, value);
|
|
},
|
|
|
|
// ws 获取子设备 状态
|
|
connection() {
|
|
if (this.stompClient) {
|
|
return;
|
|
}
|
|
if (!this.wsDeviceInfo) {
|
|
return;
|
|
}
|
|
if (!devLiveWebSocketBaseUrl) {
|
|
return;
|
|
}
|
|
let headers = {
|
|
clientid: this.wsDeviceInfo.wsClientId,
|
|
username: this.wsDeviceInfo.wsUsername,
|
|
sign: this.wsDeviceInfo.wsSign
|
|
};
|
|
// console.log("connection:--");
|
|
this.stompClient = new WebSocket(
|
|
`${devLiveWebSocketBaseUrl}${headers.clientid}/${headers.username}/${headers.sign}`
|
|
);
|
|
this.socket_flag = true;
|
|
this.stompClient.onopen = this.socket_open;
|
|
this.stompClient.onmessage = this.socket_onmsg;
|
|
this.stompClient.onclose = this.socket_onclose;
|
|
},
|
|
socket_open(evt) {
|
|
console.log("ws-open:", evt);
|
|
},
|
|
socket_onmsg(evt) {
|
|
this.handlerWsMsgData(JSON.parse(evt.data));
|
|
},
|
|
handlerWsMsgData(evt) {
|
|
this.$emit("wsRealTImeMsg", JSON.stringify(evt));
|
|
if (this.deviceInfo.deviceId !== this.wsDeviceInfo.deviceId) {
|
|
for (let i = 0; i < this.childDeviceList.length; i++) {
|
|
if (this.childDeviceList[i]["deviceKey"] === evt["devId"]) {
|
|
this.childDeviceList[i]["switch"] = evt["params"]["switch"]
|
|
? evt["params"]["switch"].toString()
|
|
: "0";
|
|
this.$forceUpdate();
|
|
break;
|
|
}
|
|
}
|
|
} else {
|
|
this.deviceInfo["stype"] = evt["params"]["stype"]
|
|
? evt["params"]["stype"].toString()
|
|
: "0";
|
|
this.deviceInfo["signal"] = evt["params"]["signal"]
|
|
? evt["params"]["signal"].toString()
|
|
: "0";
|
|
}
|
|
},
|
|
socket_onclose(e) {
|
|
// console.log("socket_onclose:--", e, this.stompClient);
|
|
this.stompClient = null;
|
|
if (this.socket_flag) {
|
|
this.socket_flag = false;
|
|
let this_ = this;
|
|
this_.setTimeOut_flag = setTimeout(function() {
|
|
this_.socket_flag = true;
|
|
this_.connection();
|
|
}, 10000);
|
|
}
|
|
},
|
|
// 销毁事件
|
|
closeWebscoket() {
|
|
// console.log(this.stompClient);
|
|
this.socket_flag = false;
|
|
if (this.stompClient) {
|
|
console.log("we-close---");
|
|
this.stompClient.close();
|
|
}
|
|
this.stompClient = null;
|
|
clearInterval(this.timingPingWs_flag);
|
|
clearTimeout(this.setTimeOut_flag);
|
|
},
|
|
// 定时 ping ws
|
|
timingPingWs(row) {
|
|
this.extenSubmit(row);
|
|
clearInterval(this.timingPingWs_flag);
|
|
const _this = this;
|
|
this.timingPingWs_flag = setInterval(function() {
|
|
_this.extenSubmit(row);
|
|
}, 110000);
|
|
},
|
|
extenSubmit(row) {
|
|
// let params = {
|
|
// data: {
|
|
// params: {
|
|
// ltime: 15, // 上报间隔(0.1秒)
|
|
// dtime: 1200 //上报时长(0.1秒)
|
|
// }
|
|
// },
|
|
// deviceId: row.deviceId
|
|
// };
|
|
//先屏蔽设备主动拉取功能
|
|
// setLivetimeControl(params).then(res => {
|
|
// console.log(res);
|
|
// // this.msgSuccess("成功");
|
|
// });
|
|
|
|
let params = {
|
|
input: {
|
|
ltime: 15, // 上报间隔(0.1秒)
|
|
dtime: 1200 //上报时长(0.1秒)
|
|
},
|
|
deviceKey: row.deviceKey,
|
|
funcId: "set_live_time"
|
|
};
|
|
|
|
//使用新版功能
|
|
setFunctionControl(params).then(res => {
|
|
console.log(res);
|
|
// this.msgSuccess("成功");
|
|
});
|
|
},
|
|
// 点击子设备 线路开关
|
|
submitChildStatus(type, row) {
|
|
this.$prompt("请输入登录密码", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
inputPattern: /^[a-z A-z 0-9 $.]+/,
|
|
inputType: "password",
|
|
inputErrorMessage: "登录密码不能为空"
|
|
}).then(({ value }) => {
|
|
let params = {
|
|
data: {
|
|
params: {
|
|
switch: type === "true" ? 1 : 0
|
|
}
|
|
},
|
|
deviceId: row.deviceId,
|
|
verifyKey: value
|
|
};
|
|
|
|
setSwitchControl(params).then(res => {
|
|
// console.log(res);
|
|
this.msgSuccess("修改成功");
|
|
});
|
|
});
|
|
},
|
|
// 勾选设备
|
|
viewDeviceChange(id) {
|
|
if (this.checkobxDeviceId !== id) {
|
|
this.checkobxDeviceId = id;
|
|
// 销毁当前ws
|
|
this.closeWebscoket();
|
|
this.$emit("changeEvent", { val: id });
|
|
}
|
|
},
|
|
/** 查询设备列表 */
|
|
getList() {
|
|
listChildrenDevice({
|
|
parentId: this.deviceInfo.deviceId,
|
|
pageNum: 1,
|
|
pageSize: 999999
|
|
}).then(response => {
|
|
this.childDeviceList = response.rows;
|
|
var childDeviceIds = [...response.rows].map(v => {
|
|
return v.deviceKey;
|
|
});
|
|
this.handleOpenDevStatusService(childDeviceIds.toString());
|
|
});
|
|
}
|
|
},
|
|
destroyed() {
|
|
this.closeWebscoket();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.device-select-nav {
|
|
min-height: 130px;
|
|
width: 100%;
|
|
display: flex;
|
|
overflow-y: auto;
|
|
background-color: #e4eaf300;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
.layout-select-wrap {
|
|
width: 100%;
|
|
min-height: 40px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
padding-left: 5px;
|
|
// border: 1px solid #1890ff;
|
|
margin: 0 5px 5px 0;
|
|
border-radius: 5px;
|
|
background-color: #1890ff00;
|
|
.title-span {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.but {
|
|
width: 90px;
|
|
height: 30px;
|
|
background: #f4f5f7;
|
|
border-radius: 5px;
|
|
color: #6b778c;
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
margin-right: 10px;
|
|
.icon-c {
|
|
font-size: 18px;
|
|
margin-top: 2px;
|
|
}
|
|
.but-title {
|
|
font-size: 12px;
|
|
font-family: "Source Han Sans CN";
|
|
font-weight: 600;
|
|
margin-left: 5px;
|
|
cursor: default;
|
|
}
|
|
}
|
|
.but:hover {
|
|
background: #1890ff;
|
|
color: #fff;
|
|
}
|
|
.el-button {
|
|
border: 0px;
|
|
color: #6b778c;
|
|
font-weight: 600;
|
|
background: #e6e6e6d9;
|
|
}
|
|
.el-button--info.is-plain.is-disabled {
|
|
color: #bcbec2;
|
|
}
|
|
.but-icon {
|
|
margin-right: 5px;
|
|
font-size: 16px;
|
|
}
|
|
.el-button:hover {
|
|
background: #1890ff !important;
|
|
color: #fff;
|
|
}
|
|
}
|
|
.layout-device-list {
|
|
width: 100%;
|
|
display: flex;
|
|
//height: 90px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.nav-p-dev {
|
|
display: flex;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
-webkit-box-pack: end;
|
|
-ms-flex-pack: end;
|
|
justify-content: flex-end;
|
|
// padding-top: 10px;
|
|
flex-shrink: 0;
|
|
.dev-info {
|
|
padding: 10px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
.dev-info-title {
|
|
display: block;
|
|
width: 100%;
|
|
text-overflow: ellipsis;
|
|
height: 30px;
|
|
font-size: 18px;
|
|
line-height: 30px;
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.dev-info-state {
|
|
width: 60px;
|
|
height: 50px;
|
|
justify-content: center;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
|
|
font-size: 14px;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #00c805;
|
|
justify-content: flex-start;
|
|
|
|
/* switch按钮样式 */
|
|
.switch-wrap .el-switch__label {
|
|
position: absolute;
|
|
display: none;
|
|
color: #fff !important;
|
|
}
|
|
/*打开时文字位置设置*/
|
|
.switch-wrap .el-switch__label--right {
|
|
z-index: 1;
|
|
}
|
|
/* 调整打开时文字的显示位子 */
|
|
.switch-wrap .el-switch__label--right span {
|
|
margin-left: 10px;
|
|
}
|
|
/*关闭时文字位置设置*/
|
|
.switch-wrap .el-switch__label--left {
|
|
z-index: 1;
|
|
}
|
|
/* 调整关闭时文字的显示位子 */
|
|
.switch-wrap .el-switch__label--left span {
|
|
margin-left: 20px;
|
|
}
|
|
/*显示文字*/
|
|
.switch-wrap .el-switch__label.is-active {
|
|
display: block;
|
|
}
|
|
/* 调整按钮的宽度 */
|
|
.switch-wrap.el-switch .el-switch__core,
|
|
.el-switch .el-switch__label {
|
|
width: 60px !important;
|
|
margin: 0;
|
|
}
|
|
}
|
|
.off-line {
|
|
color: #da2710;
|
|
}
|
|
}
|
|
}
|
|
.nav-c-dev {
|
|
display: flex;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
-webkit-box-pack: end;
|
|
-ms-flex-pack: end;
|
|
justify-content: flex-end;
|
|
// padding-top: 10px;
|
|
flex-shrink: 0;
|
|
|
|
.checkbox-i {
|
|
width: 20px;
|
|
border: 1px solid #1890ff;
|
|
height: 20px;
|
|
border-radius: 3px;
|
|
position: relative;
|
|
// right: 184px;
|
|
font-size: 17px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.selected-c {
|
|
background: #1890ff;
|
|
color: #fff;
|
|
border-color: #fff;
|
|
}
|
|
|
|
.dev-info {
|
|
padding: 10px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
|
|
.dev-info-title {
|
|
display: block;
|
|
width: 100%;
|
|
text-overflow: ellipsis;
|
|
height: 30px;
|
|
font-size: 18px;
|
|
line-height: 30px;
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.dev-info-state {
|
|
width: 60px;
|
|
height: 50px;
|
|
justify-content: center;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
justify-content: flex-start;
|
|
|
|
font-size: 14px;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #00c805;
|
|
|
|
/* switch按钮样式 */
|
|
.switch-wrap .el-switch__label {
|
|
position: absolute;
|
|
display: none;
|
|
color: #fff !important;
|
|
}
|
|
/*打开时文字位置设置*/
|
|
.switch-wrap .el-switch__label--right {
|
|
z-index: 1;
|
|
}
|
|
/* 调整打开时文字的显示位子 */
|
|
.switch-wrap .el-switch__label--right span {
|
|
margin-left: 10px;
|
|
}
|
|
/*关闭时文字位置设置*/
|
|
.switch-wrap .el-switch__label--left {
|
|
z-index: 1;
|
|
}
|
|
/* 调整关闭时文字的显示位子 */
|
|
.switch-wrap .el-switch__label--left span {
|
|
margin-left: 20px;
|
|
}
|
|
/*显示文字*/
|
|
.switch-wrap .el-switch__label.is-active {
|
|
display: block;
|
|
}
|
|
/* 调整按钮的宽度 */
|
|
.switch-wrap.el-switch .el-switch__core,
|
|
.el-switch .el-switch__label {
|
|
width: 60px !important;
|
|
margin: 0;
|
|
}
|
|
}
|
|
.off-line {
|
|
color: #da2710;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.layout-device-list::-webkit-scrollbar {
|
|
/*滚动条整体样式*/
|
|
width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
|
|
height: 5px;
|
|
}
|
|
.layout-device-list::-webkit-scrollbar-thumb {
|
|
/*滚动条里面小方块*/
|
|
border-radius: 10px;
|
|
// box-shadow: inset 0 0 5px #c4c4c4;
|
|
background: #929292a6;
|
|
}
|
|
.layout-device-list::-webkit-scrollbar-track {
|
|
/*滚动条里面轨道*/
|
|
// -webkit-box-shadow:
|
|
box-shadow: inset 0 0 5px #f6f6f6;
|
|
border-radius: 10px;
|
|
background: #ffffff;
|
|
}
|
|
</style>
|