557 lines
15 KiB
Vue
557 lines
15 KiB
Vue
<template>
|
|
<div class="e-object-device-manage-table">
|
|
<el-form
|
|
:model="queryParams"
|
|
ref="queryForm"
|
|
:inline="true"
|
|
label-width="68px"
|
|
v-show="showChildrenView === false"
|
|
>
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-form-item label="型号名称" prop="prodKey">
|
|
<el-select
|
|
v-model="queryParams.prodKey"
|
|
placeholder="请选择项目类型"
|
|
clearable
|
|
size="small"
|
|
>
|
|
<el-option
|
|
v-for="dict in projectModelList"
|
|
:key="dict.prodKey"
|
|
:label="dict.modelName"
|
|
:value="dict.prodKey"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-form-item label="设备名称" prop="deviceName">
|
|
<el-input
|
|
v-model="queryParams.deviceName"
|
|
placeholder="请输入设备名称"
|
|
clearable
|
|
size="small"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-form-item label="设备状态" prop="deviceState">
|
|
<el-select
|
|
v-model="queryParams.deviceState"
|
|
placeholder="请选择设备状态"
|
|
clearable
|
|
size="small"
|
|
>
|
|
<el-option
|
|
:label="keys"
|
|
v-for="(keys, vals) in deviceStatusOpt"
|
|
:key="vals"
|
|
:value="vals"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<!-- <el-col :span="5">
|
|
<el-form-item label="设备类型" prop="deviceStatus">
|
|
<el-input
|
|
v-model="queryParams.deviceStatus"
|
|
placeholder="请输入设备类型"
|
|
clearable
|
|
size="small"
|
|
/>
|
|
</el-form-item>
|
|
</el-col> -->
|
|
|
|
<el-col :span="9">
|
|
<el-form-item class="query-foot">
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-search"
|
|
size="small"
|
|
@click="handleQuery"
|
|
>搜索</el-button
|
|
>
|
|
<el-button icon="el-icon-refresh" size="small" @click="resetQuery"
|
|
>重置</el-button
|
|
>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<div class="table-container" v-show="showChildrenView === false">
|
|
<e-simple-card
|
|
title=""
|
|
extra=""
|
|
class="object-device-card"
|
|
v-for="(devItem, idx) in list"
|
|
:key="idx"
|
|
>
|
|
<template slot="cardHeader" class="card-custom-head">
|
|
<div
|
|
:class="
|
|
devItem['deviceState'] == 'ONLINE'
|
|
? 'card-left'
|
|
: 'card-left off-line'
|
|
"
|
|
>
|
|
<icon
|
|
v-if="devItem['deviceState'] == 'ONLINE'"
|
|
class="iconfont iconSYS_STA_1"
|
|
/>
|
|
<icon v-else class="iconfont iconlixian" />
|
|
<span style="margin-left: 8px">{{
|
|
devItem["deviceState"] == "ONLINE" ? "在线" : "离线"
|
|
}}</span>
|
|
</div>
|
|
<div class="card-right">
|
|
<span class="c-label">线路数:</span>
|
|
<span class="c-number">{{ devItem.routeCount || 0 }}</span>
|
|
|
|
<el-dropdown>
|
|
<icon class="el-icon-s-operation card-opt-i" />
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item @click.native="handleChildrenDevice(devItem)"
|
|
>查看线路列表</el-dropdown-item
|
|
>
|
|
<!-- <el-dropdown-item>修改服务指向</el-dropdown-item>
|
|
<el-dropdown-item>设备巡检记录</el-dropdown-item> -->
|
|
<el-dropdown-item @click.native="handleLinkToDeviceDetails(devItem)">设备参数调整</el-dropdown-item>
|
|
<!-- <el-dropdown-item>内置定时配置</el-dropdown-item> -->
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
</template>
|
|
<template slot="cardBody">
|
|
<div class="object-device-body">
|
|
<div class="card-body-info">
|
|
<div class="card-body-left">
|
|
<img
|
|
:src="
|
|
devItem['deviceImage']
|
|
? getIotFileUrl(devItem['deviceImage'])
|
|
: '/images/devcie_default.png'
|
|
"
|
|
/>
|
|
</div>
|
|
<div class="card-body-right">
|
|
<span :title="devItem.deviceName">{{
|
|
devItem.deviceName
|
|
}}</span>
|
|
<span :title="devItem.deviceKey">{{ devItem.deviceKey }}</span>
|
|
<span :title="devItem.deviceAddress">{{
|
|
devItem.deviceAddress
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-body-footer">
|
|
<!-- {{ renderCardFooter(devItem) }} -->
|
|
<div
|
|
:class="
|
|
devItem.alarmProcessStatus == 1
|
|
? 'card-footer'
|
|
: 'card-footer dev-error'
|
|
"
|
|
>
|
|
<icon class="iconfont icontongzhi"></icon>
|
|
<span stle="margin-left: 10px;" class="footer-title">{{
|
|
devItem.alarmProcessStatus == 1
|
|
? "正常"
|
|
: `时间：${devItem.alarmTime} ${
|
|
devItem.alarmTypeName || "--"
|
|
}`
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</e-simple-card>
|
|
<div
|
|
v-if="!list || list.length <= 0"
|
|
style="
|
|
width: 100%;
|
|
height: 300px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
"
|
|
>
|
|
暂无数据
|
|
</div>
|
|
</div>
|
|
<div v-if="showChildrenView">
|
|
<e-device-children
|
|
ref="eDeviceChildren"
|
|
:gatewayDevice="showGatewayInfo"
|
|
:sourceId="sourceId"
|
|
:deviceType="deviceType"
|
|
:wsGuid="ws_guid"
|
|
@handleLinkToHome="handleLinkToHome"
|
|
></e-device-children>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import ESimpleCard from "@/components/Cards/index";
|
|
import EDeviceChildren from "./EDeviceChildren";
|
|
import { webSocketProjectGatewayUrl } from "@/config/env";
|
|
import { listProjectDevice, listProjectModel } from "@/api/iot/project_new";
|
|
import { getIotFileUrl } from "@/utils/hciot";
|
|
const deviceStatusOpt = {
|
|
ONLINE: "在线",
|
|
OFFLINE: "离线",
|
|
OUTLINE: "脱线",
|
|
UNACTIVE: "未激活",
|
|
};
|
|
export default {
|
|
name: "EDeviceTable",
|
|
components: {
|
|
ESimpleCard,
|
|
EDeviceChildren,
|
|
},
|
|
props: {
|
|
sourceId: {
|
|
type: [String, Number],
|
|
require: true,
|
|
},
|
|
deviceType: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
deviceStatusOpt,
|
|
queryParams: {
|
|
prodKey: undefined,
|
|
deviceName: undefined,
|
|
deviceStatus: undefined,
|
|
},
|
|
showChildrenView: false,
|
|
list: [],
|
|
showGatewayInfo: {},
|
|
projectModelList: [],
|
|
stompClient: null,
|
|
socket_flag: true,
|
|
timeout_flag: null,
|
|
ws_guid: '',
|
|
};
|
|
},
|
|
watch: {
|
|
sourceId(val) {
|
|
if (val) {
|
|
this.initHTML();
|
|
this.showChildrenView = false;
|
|
}
|
|
},
|
|
deviceType(val) {
|
|
if (val) {
|
|
this.initHTML();
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
this.initHTML();
|
|
},
|
|
methods: {
|
|
getIotFileUrl,
|
|
// init html
|
|
initHTML() {
|
|
this.ws_guid = this.getGuid();
|
|
this.getGatewayList();
|
|
this.getProjectModelList();
|
|
},
|
|
// 查看子设备列表信息
|
|
handleChildrenDevice(gatewayDevice) {
|
|
this.showChildrenView = true;
|
|
this.showGatewayInfo = gatewayDevice;
|
|
this.$forceUpdate();
|
|
},
|
|
// 子设备列表 返回 网关设备列表
|
|
handleLinkToHome() {
|
|
this.showChildrenView = false;
|
|
},
|
|
// 内容部分
|
|
renderCardContent(item) {
|
|
return (
|
|
<template>
|
|
<div class="card-body-left">
|
|
<image
|
|
src={
|
|
item["deviceImage"]
|
|
? item["deviceImage"]
|
|
: "/images/devcie_default.png"
|
|
}
|
|
></image>
|
|
</div>
|
|
<div class="card-body-right">
|
|
<span>{item.deviceId}</span>
|
|
<span>{item.deviceSecret}</span>
|
|
<span>{item.deviceAddress}</span>
|
|
</div>
|
|
</template>
|
|
);
|
|
},
|
|
// 卡片 底部 报警状态
|
|
renderCardFooter(item) {
|
|
return (
|
|
<template>
|
|
<div
|
|
class={
|
|
item.deviceStatus == 0 ? "card-footer" : "card-footer dev-error"
|
|
}
|
|
>
|
|
<icon class="iconfont icontongzhi"></icon>
|
|
<span>
|
|
{item.deviceStatus == 0 ? "正常" : "card-footer dev-error"}
|
|
</span>
|
|
</div>
|
|
</template>
|
|
);
|
|
},
|
|
handleQuery() {
|
|
this.getGatewayList();
|
|
},
|
|
resetQuery() {
|
|
this.resetForm("queryForm");
|
|
this.getGatewayList();
|
|
},
|
|
// 获取 项目 型号列表
|
|
getProjectModelList() {
|
|
listProjectModel({
|
|
projectId: this.sourceId,
|
|
deviceTags: this.deviceType || "",
|
|
}).then((res) => {
|
|
this.projectModelList = res.data;
|
|
});
|
|
},
|
|
// 获取 项目网关设备列表
|
|
getGatewayList() {
|
|
this.list = [];
|
|
this.ws_guid = this.getGuid();
|
|
listProjectDevice(
|
|
Object.assign(
|
|
{
|
|
projectId: this.sourceId,
|
|
deviceTags: this.deviceType || "",
|
|
sign: this.ws_guid,
|
|
},
|
|
this.queryParams
|
|
)
|
|
).then((res) => {
|
|
this.list = res.rows;
|
|
if (this.stompClient) {
|
|
this.closeSocket();
|
|
}
|
|
this.connection();
|
|
});
|
|
},
|
|
// 创建一个ws 监听获取报警实时数据
|
|
connection() {
|
|
if (this.stompClient) {
|
|
return;
|
|
}
|
|
if (!webSocketProjectGatewayUrl) {
|
|
return;
|
|
}
|
|
if (!this.list || this.length <= 0) {
|
|
return;
|
|
}
|
|
let deviceIds = this.list.map((v) => v["deviceKey"]);
|
|
this.stompClient = new WebSocket(
|
|
`${webSocketProjectGatewayUrl}/${this.ws_guid}/${deviceIds.toString()}`
|
|
);
|
|
this.stompClient.onmessage = this.socket_message;
|
|
this.stompClient.onclose = this.socket_onclose;
|
|
},
|
|
socket_message(evt) {
|
|
const data = JSON.parse(evt.data);
|
|
this.handleDeviceInfo(data);
|
|
this.$forceUpdate();
|
|
},
|
|
// 处理 socket 数据返回 赋值问题
|
|
handleDeviceInfo(param) {
|
|
console.log( this.list)
|
|
if (this.list && this.list.length > 0) {
|
|
this.list = this.list.map((v) => {
|
|
if (v["deviceKey"] === param["deviceKey"]) {
|
|
return Object.assign(v, param);
|
|
} else {
|
|
return v;
|
|
}
|
|
});
|
|
this.$refs.eDeviceChildren.socket_message(param);
|
|
}
|
|
},
|
|
socket_onclose(e) {
|
|
this.stompClient = null;
|
|
if (this.socket_flag) {
|
|
this.socket_flag = false;
|
|
let _this = this;
|
|
this.timeout_flag = setTimeout(function () {
|
|
_this.socket_flag = true;
|
|
_this.connection();
|
|
}, 10000);
|
|
}
|
|
},
|
|
closeSocket() {
|
|
if (this.stompClient) {
|
|
this.stompClient.close();
|
|
}
|
|
this.socket_flag = false;
|
|
this.stompClient = null;
|
|
clearTimeout(this.timeout_flag);
|
|
},
|
|
getGuid() {
|
|
return "xxxxxxx_xxxxx_4xxx_yxxx_xxxxxxxxxxxx".replace(
|
|
/[xy]/g,
|
|
function (c) {
|
|
var r = (Math.random() * 16) | 0,
|
|
v = c == "x" ? r : (r & 0x3) | 0x8;
|
|
return v.toString(16);
|
|
}
|
|
);
|
|
},
|
|
/**
|
|
* 跳转 设备 详情
|
|
*/
|
|
handleLinkToDeviceDetails(row) {
|
|
this.$router.push({ path:'/device/device', query: { 'deviceId': row.deviceId, 'tempType': 'details' } })
|
|
}
|
|
},
|
|
destroyed() {
|
|
this.closeSocket();
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.e-object-device-manage-table {
|
|
.el-form-item--medium .el-form-item__content {
|
|
width: calc(100% - 70px);
|
|
}
|
|
.query-foot.el-form-item--medium .el-form-item__content {
|
|
width: 100%;
|
|
}
|
|
.table-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: start;
|
|
.object-device-card {
|
|
width: 285px;
|
|
height: 164px;
|
|
background: #ffffff;
|
|
border: 1px solid #e4ebf4;
|
|
box-shadow: 0px 0px 8px 0px rgba(17, 76, 157, 0.26);
|
|
border-radius: 5px;
|
|
margin: 5px;
|
|
.card-left {
|
|
font-size: 14px;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #00c805;
|
|
}
|
|
.off-line {
|
|
color: #da2710;
|
|
}
|
|
.card-right {
|
|
display: flex;
|
|
font-size: 14px;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #6b778c;
|
|
align-items: baseline;
|
|
.c-label {
|
|
}
|
|
.c-number {
|
|
color: #344567;
|
|
margin: 0 8px;
|
|
}
|
|
.card-opt-i {
|
|
font-size: 18px;
|
|
-ms-transform: rotate(90deg); /* IE 9 */
|
|
-webkit-transform: rotate(90deg); /* Safari and Chrome */
|
|
transform: rotate(90deg);
|
|
}
|
|
.card-opt-i:hover {
|
|
color: #46a6ff;
|
|
}
|
|
}
|
|
.e-simple-card__header {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.e-simple-card__body {
|
|
padding: 10px;
|
|
}
|
|
|
|
.object-device-body {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.card-body-info {
|
|
width: 100%;
|
|
height: 85px;
|
|
display: flex;
|
|
.card-body-left {
|
|
width: 40%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
> img {
|
|
width: 93px;
|
|
height: 52px;
|
|
}
|
|
}
|
|
.card-body-right {
|
|
width: 60%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
font-size: 14px;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 300;
|
|
color: #344567;
|
|
> span {
|
|
display: block;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
.card-body-footer {
|
|
width: 100%;
|
|
display: flex;
|
|
.card-footer {
|
|
font-size: 14px;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #344567;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.footer-title {
|
|
width: 100%;
|
|
margin-left: 3px;
|
|
display: block;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
.dev-error {
|
|
color: #dc3520;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |