This commit is contained in:
23688nl
parent
5aadbec9ce
commit
2d05e10f14
|
|
@ -453,6 +453,11 @@ export default {
|
|||
key: "ONENET",
|
||||
label: "ONENET",
|
||||
value: "ONENET"
|
||||
},
|
||||
{
|
||||
key: "OFFICIAL",
|
||||
label: "官方平台",
|
||||
value: "OFFICIAL"
|
||||
}
|
||||
],
|
||||
optionKey: {
|
||||
|
|
|
|||
|
|
@ -268,229 +268,6 @@ export default {
|
|||
toTableClick() {
|
||||
this.componectVal = "";
|
||||
},
|
||||
// 打开厂商选择窗口 ——表格
|
||||
openModelTableSelectDialog() {
|
||||
this.selectResult = {};
|
||||
this.tableSelectOption = {
|
||||
otherOption: {
|
||||
tableType: "model"
|
||||
},
|
||||
queryOpt: {
|
||||
disable: false,
|
||||
labelWidth: "68px",
|
||||
params: {
|
||||
protocolType: "",
|
||||
modelName: ""
|
||||
},
|
||||
page: {
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
total: 0
|
||||
},
|
||||
inline: true,
|
||||
queryChilds: [
|
||||
{
|
||||
style: "",
|
||||
placeholder: "型号名称",
|
||||
clearable: true,
|
||||
label: "型号名称",
|
||||
type: "input",
|
||||
key: "modelName",
|
||||
size: "small",
|
||||
value: ""
|
||||
},
|
||||
{
|
||||
style: "",
|
||||
placeholder: "协议类型",
|
||||
clearable: true,
|
||||
label: "协议类型",
|
||||
type: "select",
|
||||
key: "protocolType",
|
||||
size: "small",
|
||||
value: "",
|
||||
options: [
|
||||
{
|
||||
key: "IOTOS",
|
||||
label: "iot平台",
|
||||
value: "IOTOS"
|
||||
},
|
||||
{
|
||||
key: "ONENET",
|
||||
label: "ONENET",
|
||||
value: "ONENET"
|
||||
}
|
||||
],
|
||||
optionKey: {
|
||||
key: "key",
|
||||
label: "label",
|
||||
value: "value"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
tableOpt: {
|
||||
loading: false,
|
||||
rowKey: "deviceId",
|
||||
selection: false,
|
||||
maxHeight: "45vh",
|
||||
childs: [
|
||||
{
|
||||
style: "",
|
||||
label: "厂商名称",
|
||||
type: "",
|
||||
prop: "vendorName",
|
||||
align: "left",
|
||||
width: "200",
|
||||
"show-overflow-tooltip": false,
|
||||
tempType: "span"
|
||||
},
|
||||
{
|
||||
style: "",
|
||||
label: "型号名称",
|
||||
type: "",
|
||||
prop: "modelName",
|
||||
align: "left",
|
||||
width: "200",
|
||||
"show-overflow-tooltip": false,
|
||||
tempType: "span"
|
||||
},
|
||||
{
|
||||
style: "",
|
||||
label: "设备类型",
|
||||
type: "",
|
||||
prop: "deviceTypeName",
|
||||
align: "left",
|
||||
width: "120",
|
||||
"show-overflow-tooltip": false,
|
||||
tempType: "span"
|
||||
},
|
||||
{
|
||||
style: "",
|
||||
label: "产品PK",
|
||||
type: "",
|
||||
prop: "prodKey",
|
||||
align: "left",
|
||||
width: "",
|
||||
"show-overflow-tooltip": false,
|
||||
tempType: "span"
|
||||
},
|
||||
{
|
||||
style: "",
|
||||
label: "产品密钥",
|
||||
type: "",
|
||||
prop: "prodSecret",
|
||||
align: "left",
|
||||
width: "",
|
||||
"show-overflow-tooltip": false,
|
||||
tempType: "span"
|
||||
}
|
||||
],
|
||||
tableList: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
tableList: []
|
||||
};
|
||||
this.selectTableShow = true;
|
||||
},
|
||||
// 打开设备选择窗口 ——表格
|
||||
openTableSelectDialog() {
|
||||
this.selectResult = {};
|
||||
this.tableSelectOption = {
|
||||
otherOption: {
|
||||
tableType: "device"
|
||||
},
|
||||
queryOpt: {
|
||||
disable: false,
|
||||
labelWidth: "68px",
|
||||
params: {
|
||||
deviceName: "",
|
||||
modelId: "",
|
||||
parentId: 0,
|
||||
deviceType: "GATEWAY_CONTROLLER"
|
||||
},
|
||||
page: {
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
total: 0
|
||||
},
|
||||
inline: true,
|
||||
queryChilds: [
|
||||
{
|
||||
style: "",
|
||||
placeholder: "设备名称",
|
||||
clearable: true,
|
||||
label: "设备名称",
|
||||
type: "input",
|
||||
key: "deviceName",
|
||||
size: "small",
|
||||
value: ""
|
||||
}
|
||||
]
|
||||
},
|
||||
tableOpt: {
|
||||
loading: false,
|
||||
rowKey: "deviceId",
|
||||
selection: false,
|
||||
maxHeight: "45vh",
|
||||
childs: [
|
||||
{
|
||||
style: "",
|
||||
label: "所属型号",
|
||||
type: "",
|
||||
prop: "modelName",
|
||||
align: "left",
|
||||
width: "",
|
||||
"show-overflow-tooltip": false,
|
||||
tempType: "span"
|
||||
},
|
||||
{
|
||||
style: "",
|
||||
label: "设备名称",
|
||||
type: "",
|
||||
prop: "deviceName",
|
||||
align: "left",
|
||||
width: "",
|
||||
"show-overflow-tooltip": false,
|
||||
tempType: "span"
|
||||
},
|
||||
{
|
||||
style: "",
|
||||
label: "设备Key",
|
||||
type: "",
|
||||
prop: "deviceKey",
|
||||
align: "left",
|
||||
width: "",
|
||||
"show-overflow-tooltip": false,
|
||||
tempType: "span"
|
||||
},
|
||||
{
|
||||
style: "",
|
||||
label: "创建时间",
|
||||
type: "time",
|
||||
prop: "createTime",
|
||||
align: "center",
|
||||
width: "160",
|
||||
"show-overflow-tooltip": false,
|
||||
tempType: "span"
|
||||
}
|
||||
],
|
||||
tableList: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
tableList: []
|
||||
};
|
||||
this.selectTableShow = true;
|
||||
},
|
||||
// 查询回调
|
||||
childGetList(data) {
|
||||
if (data.otherOption.tableType === "device") {
|
||||
this.deviceChildList(data);
|
||||
} else if (data.otherOption.tableType === "model") {
|
||||
this.modelChildList(data);
|
||||
}
|
||||
},
|
||||
initGetModelList() {
|
||||
listModel({
|
||||
pageNum: 1,
|
||||
|
|
@ -499,74 +276,6 @@ export default {
|
|||
this.queryModelOpt = response.rows;
|
||||
});
|
||||
},
|
||||
modelChildList(data) {
|
||||
listModel(Object.assign(data.page, data.param, { selected: 1 })).then(
|
||||
response => {
|
||||
this.tableSelectOption.tableList = response.rows;
|
||||
this.tableSelectOption.queryOpt.page.total = Number(response.total);
|
||||
}
|
||||
);
|
||||
},
|
||||
deviceChildList(data) {
|
||||
listDevice(Object.assign(data.page, data.param, { selected: 1 })).then(
|
||||
response => {
|
||||
this.tableSelectOption.tableList = response.rows;
|
||||
this.tableSelectOption.queryOpt.page.total = Number(response.total);
|
||||
}
|
||||
);
|
||||
},
|
||||
// 根据 型号id 获取 型号详情
|
||||
getModelInfoById(modelId) {
|
||||
getModel(modelId).then(res => {
|
||||
this.$refs.paramWrap.setList(res.data.paramList || []);
|
||||
});
|
||||
},
|
||||
// 点击或者双击数据回调
|
||||
returnEvent(data) {
|
||||
if (data.type === "dblclick") {
|
||||
if (data.otherOption.tableType === "device") {
|
||||
this.form.parentId = data.value.deviceId;
|
||||
this.form.parentName = data.value.deviceName;
|
||||
} else if (data.otherOption.tableType === "model") {
|
||||
this.getModelInfoById(data.value.modelId);
|
||||
this.form.modelId = data.value.modelId;
|
||||
this.form.modelName = data.value.modelName;
|
||||
this.form.deviceType = data.value.deviceType;
|
||||
this.form.prodKey = data.value.prodKey;
|
||||
this.deviceTypeChange(this.form.deviceType);
|
||||
}
|
||||
this.selectTableShow = false;
|
||||
} else if (data.type === "click") {
|
||||
this.selectResult = {};
|
||||
if (data.otherOption.tableType === "device") {
|
||||
this.selectResult.parentId = data.value.deviceId;
|
||||
this.selectResult.parentName = data.value.deviceName;
|
||||
} else if (data.otherOption.tableType === "model") {
|
||||
this.selectResult.modelId = data.value.modelId;
|
||||
this.selectResult.modelName = data.value.modelName;
|
||||
this.selectResult.deviceType = data.value.deviceType;
|
||||
// this.selectResult.paramList = data.value.paramList;
|
||||
this.selectResult.prodKey = data.value.prodKey;
|
||||
}
|
||||
this.selectResult.tableType = data.otherOption.tableType;
|
||||
}
|
||||
},
|
||||
// 点击确定按钮
|
||||
resuleClick() {
|
||||
if (this.selectResult.tableType === "device") {
|
||||
this.form.parentId = this.selectResult.parentId;
|
||||
this.form.parentName = this.selectResult.parentName;
|
||||
} else if (this.selectResult.tableType === "model") {
|
||||
this.form.modelId = this.selectResult.modelId;
|
||||
this.form.prodKey = this.selectResult.prodKey;
|
||||
this.form.modelName = this.selectResult.modelName;
|
||||
this.form.deviceType = this.selectResult.deviceType;
|
||||
this.deviceTypeChange(this.form.deviceType);
|
||||
this.getModelInfoById(this.selectResult.modelId);
|
||||
// this.$refs.paramWrap.setList(this.selectResult.paramList || []);
|
||||
}
|
||||
this.selectTableShow = false;
|
||||
},
|
||||
deviceTypeChange(val) {
|
||||
if (val !== "MINIATURE_BREAKER") {
|
||||
this.form.parentId = 0;
|
||||
|
|
|
|||
|
|
@ -3,28 +3,62 @@
|
|||
<!-- <el-button @click="closeDevcieData" type="danger">清空设备所有数据</el-button> -->
|
||||
<div class="cmd-list" v-for="(doct, index) in cmdList" :key="index">
|
||||
<div class="cmd-title-wrap">
|
||||
<svg-icon icon-class="A_product1" style="margin-right: 2px; height: 20px; width: 20px;" />分组名称：
|
||||
<svg-icon
|
||||
icon-class="A_product1"
|
||||
style="margin-right: 2px; height: 20px; width: 20px"
|
||||
/>分组名称：
|
||||
<span class="cmd-title">{{ doct.cmdName }}</span>
|
||||
</div>
|
||||
<div class="param-item2" v-for="(doctItem, indexs) in doct.children" :key="indexs">
|
||||
<div
|
||||
class="param-item2"
|
||||
v-for="(doctItem, indexs) in doct.children"
|
||||
:key="indexs"
|
||||
>
|
||||
<div class="title-top">
|
||||
<span class="name-wr">{{ doctItem.funName }}</span>
|
||||
<span class="type-wr" @click="handleShowData(doctItem)">查看</span>
|
||||
</div>
|
||||
<div class="value-info">
|
||||
<div class="value-wrap">
|
||||
<span class="val-span" v-text="doctItem.lastValue === null || doctItem.lastValue === undefined ? '--' : doctItem.lastValue"> </span>
|
||||
<span
|
||||
class="val-span"
|
||||
v-text="
|
||||
doctItem.lastValue === null || doctItem.lastValue === undefined
|
||||
? '--'
|
||||
: doctItem.lastValue
|
||||
"
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="time-w">
|
||||
<span class="time-warp">{{ doctItem.unitName }}</span>
|
||||
<span class="time" v-text="doctItem.lastTime ? parseTime(doctItem.lastTime) : '--'"></span>
|
||||
<span
|
||||
class="time"
|
||||
v-text="doctItem.lastTime ? parseTime(doctItem.lastTime) : '--'"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog append-to-body class="device-run-state-dailog" title="查看数据" :visible.sync="dialogShow" width="700px" :close-on-click-modal="false" @close="dialogCloseCell" @opened="dialogOpen">
|
||||
<run-state-table :dialogData="dialogData" :prodId="prodId" :pro_type="dialogData.funDataType" :dialogShow="dialogShow" :deviceKey="deviceInfo.deviceKey" ref="showChart" />
|
||||
<el-dialog
|
||||
append-to-body
|
||||
class="device-run-state-dailog"
|
||||
title="查看数据"
|
||||
:visible.sync="dialogShow"
|
||||
width="700px"
|
||||
:close-on-click-modal="false"
|
||||
@close="dialogCloseCell"
|
||||
@opened="dialogOpen"
|
||||
>
|
||||
<run-state-table
|
||||
:dialogData="dialogData"
|
||||
:prodId="prodId"
|
||||
:pro_type="dialogData.funDataType"
|
||||
:dialogShow="dialogShow"
|
||||
:deviceKey="deviceInfo.deviceKey"
|
||||
ref="showChart"
|
||||
/>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="small" @click="dialogShow = false">关 闭</el-button>
|
||||
</div>
|
||||
|
|
@ -39,7 +73,7 @@ export default {
|
|||
name: "RunStartsWrap",
|
||||
props: ["prodId", "sourceId", "deviceInfo"],
|
||||
components: {
|
||||
RunStateTable
|
||||
RunStateTable,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -50,7 +84,7 @@ export default {
|
|||
socket_flag: true,
|
||||
dialogData: {},
|
||||
dialogShow: false,
|
||||
firstWsMassage: true
|
||||
firstWsMassage: true,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -60,15 +94,15 @@ export default {
|
|||
methods: {
|
||||
// 查看数据
|
||||
handleShowData(row) {
|
||||
row.chartDate = new Date()
|
||||
this.dialogData = row
|
||||
this.dialogShow = true
|
||||
row.chartDate = new Date();
|
||||
this.dialogData = row;
|
||||
this.dialogShow = true;
|
||||
},
|
||||
dialogOpen() {
|
||||
this.$refs.showChart.initDialog(this.dialogData)
|
||||
this.$refs.showChart.initDialog(this.dialogData);
|
||||
},
|
||||
dialogCloseCell() {
|
||||
this.$refs.showChart.close()
|
||||
this.$refs.showChart.close();
|
||||
},
|
||||
// 创建ws
|
||||
connection() {
|
||||
|
|
@ -82,9 +116,11 @@ export default {
|
|||
let headers = {
|
||||
clientid: this.deviceInfo.wsClientId,
|
||||
username: this.deviceInfo.wsUsername,
|
||||
sign: this.deviceInfo.wsSign
|
||||
sign: this.deviceInfo.wsSign,
|
||||
};
|
||||
this.stompClient = new WebSocket(`${iotWebSocketBaseUrl}${headers.clientid}/${headers.username}/${headers.sign}`);
|
||||
this.stompClient = new WebSocket(
|
||||
`${iotWebSocketBaseUrl}${headers.clientid}/${headers.username}/${headers.sign}`
|
||||
);
|
||||
this.stompClient.onmessage = this.socket_onmsg;
|
||||
this.stompClient.onclose = this.socket_onclose;
|
||||
},
|
||||
|
|
@ -93,8 +129,8 @@ export default {
|
|||
},
|
||||
setListData(data) {
|
||||
this.recursionSet(this.cmdList, JSON.parse(data));
|
||||
this.firstWsMassage = false
|
||||
this.$forceUpdate()
|
||||
this.firstWsMassage = false;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
recursionSet(list, result) {
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
|
|
@ -102,24 +138,35 @@ export default {
|
|||
// result["cmd"] && list[i]['cmdKey'] === result["cmd"]
|
||||
// if (result["cmd"] && list[i]['cmdKey'] === result["cmd"]) {
|
||||
for (var v = 0; v < list[i].children.length; v++) {
|
||||
if (result.params[list[i].children[v]['funKey']] !== null && result.params[list[i].children[v]['funKey']] !== undefined) {
|
||||
list[i].children[v]['lastValue'] = result.params[list[i].children[v]['funKey']]
|
||||
list[i].children[v]['lastTime'] = result.params['timestamp'] ? result.params['timestamp'] : ''
|
||||
if (
|
||||
result.params[list[i].children[v]["funKey"]] !== null &&
|
||||
result.params[list[i].children[v]["funKey"]] !== undefined
|
||||
) {
|
||||
list[i].children[v]["lastValue"] =
|
||||
result.params[list[i].children[v]["funKey"]];
|
||||
list[i].children[v]["lastTime"] = result.params["timestamp"]
|
||||
? result.params["timestamp"]
|
||||
: "";
|
||||
}
|
||||
}
|
||||
// }
|
||||
} else {
|
||||
if (result["cmd"] && list[i]['cmdKey'] === result["cmd"]) {
|
||||
if (result["cmd"] && list[i]["cmdKey"] === result["cmd"]) {
|
||||
for (var v = 0; v < list[i].children.length; v++) {
|
||||
if (result.params[list[i].children[v]['funKey']] !== null && result.params[list[i].children[v]['funKey']] !== undefined) {
|
||||
list[i].children[v]['lastValue'] = result.params[list[i].children[v]['funKey']],
|
||||
list[i].children[v]['lastTime'] = result.params['timestamp'] ? result.params['timestamp'] : ''
|
||||
if (
|
||||
result.params[list[i].children[v]["funKey"]] !== null &&
|
||||
result.params[list[i].children[v]["funKey"]] !== undefined
|
||||
) {
|
||||
(list[i].children[v]["lastValue"] =
|
||||
result.params[list[i].children[v]["funKey"]]),
|
||||
(list[i].children[v]["lastTime"] = result.params["timestamp"]
|
||||
? result.params["timestamp"]
|
||||
: "");
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
socket_onclose(e) {
|
||||
|
|
@ -138,9 +185,9 @@ export default {
|
|||
cmdId: row.cmdId,
|
||||
deviceId: this.deviceInfo.deviceId,
|
||||
cmdKey: row.cmdKey,
|
||||
deviceKey: this.deviceInfo.deviceKey
|
||||
deviceKey: this.deviceInfo.deviceKey,
|
||||
};
|
||||
getDeviceFunList(param).then(res => {
|
||||
getDeviceFunList(param).then((res) => {
|
||||
row["children"] = res.data || [];
|
||||
this.$forceUpdate();
|
||||
});
|
||||
|
|
@ -157,15 +204,15 @@ export default {
|
|||
getCmdList() {
|
||||
const params = {
|
||||
deviceId: this.deviceInfo.deviceId,
|
||||
cmdType: "1"
|
||||
}
|
||||
getDeviceCmdList(params).then(response => {
|
||||
cmdType: "1",
|
||||
};
|
||||
getDeviceCmdList(params).then((response) => {
|
||||
this.cmdList = response.data;
|
||||
});
|
||||
},
|
||||
closeWebscoket() {
|
||||
this.stompClient = null;
|
||||
}
|
||||
},
|
||||
},
|
||||
destroyed() {
|
||||
this.closeWebscoket();
|
||||
|
|
@ -176,11 +223,11 @@ export default {
|
|||
val.forEach((v, index) => {
|
||||
this.forGetParmas(v, index);
|
||||
});
|
||||
setTimeout(this.connection, 3000)
|
||||
setTimeout(this.connection, 3000);
|
||||
// this.connection()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>-
|
||||
<style lang="scss">
|
||||
|
|
@ -260,8 +307,11 @@ export default {
|
|||
.val-span {
|
||||
color: #03a9f4;
|
||||
font-size: 20px;
|
||||
display: inline-block;
|
||||
width: 280px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -320,9 +370,11 @@ export default {
|
|||
.val-span {
|
||||
color: #03a9f4;
|
||||
font-size: 20px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
width: 280px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -346,5 +398,4 @@ export default {
|
|||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -116,7 +116,33 @@
|
|||
<span class="dev-info-title" :title="item.deviceName">{{
|
||||
item.deviceName
|
||||
}}</span>
|
||||
<div class="dev-info-state">
|
||||
<div class="dev-info-state" v-show="item.deviceId !== checkobxDeviceId">
|
||||
<el-tag type="success" v-if="item.deviceState === 'ONLINE'"
|
||||
>在线</el-tag
|
||||
>
|
||||
<el-tag
|
||||
type="danger"
|
||||
v-else-if="item.deviceState === 'OFFLINE'"
|
||||
>离线</el-tag
|
||||
>
|
||||
<el-tag
|
||||
type="danger"
|
||||
v-else-if="item.deviceState === 'OUTLINE'"
|
||||
>脱线</el-tag
|
||||
>
|
||||
<el-tag
|
||||
type="info"
|
||||
v-else-if="item.deviceState === 'UNACTIVE'"
|
||||
>未激活</el-tag
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="viewDeviceChange(item.deviceId)"
|
||||
>查看</el-button
|
||||
>
|
||||
</div>
|
||||
<div class="dev-info-state" v-show="item.deviceId === checkobxDeviceId">
|
||||
<el-switch
|
||||
size="mini"
|
||||
v-model="item.switch"
|
||||
|
|
@ -133,17 +159,17 @@
|
|||
<el-button
|
||||
size="mini"
|
||||
v-if="item.switch === '1'"
|
||||
:disabled="item.deviceId !== checkobxDeviceId"
|
||||
@click="submitChildStatus('false', item)"
|
||||
type="success"
|
||||
:disabled="item.deviceId !== checkobxDeviceId"
|
||||
>关闭</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
v-else-if="item.switch === '0'"
|
||||
:disabled="item.deviceId !== checkobxDeviceId"
|
||||
@click="submitChildStatus('true', item)"
|
||||
type="danger"
|
||||
:disabled="item.deviceId !== checkobxDeviceId"
|
||||
>开启</el-button
|
||||
>
|
||||
|
||||
|
|
@ -196,6 +222,13 @@ export default {
|
|||
wsDeviceInfo: {
|
||||
handler: function () {
|
||||
if (this.deviceInfo.deviceId !== this.wsDeviceInfo.deviceId) {
|
||||
for(let i =0; i < this.childDeviceList.length; i++) {
|
||||
if (this.childDeviceList[i]['deviceId'] === this.wsDeviceInfo['deviceId']) {
|
||||
this.childDeviceList[i]['switch'] = this.wsDeviceInfo['switch'].toString();
|
||||
this.$forceUpdate()
|
||||
break;
|
||||
}
|
||||
}
|
||||
// 更换设备 开启ws
|
||||
this.connection();
|
||||
}
|
||||
|
|
@ -231,6 +264,7 @@ export default {
|
|||
this.stompClient = new WebSocket(
|
||||
`${iotWebSocketBaseUrl}${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;
|
||||
|
|
@ -265,10 +299,12 @@ export default {
|
|||
},
|
||||
// 销毁事件
|
||||
closeWebscoket() {
|
||||
console.log(this.stompClient)
|
||||
this.socket_flag = false;
|
||||
if (this.stompClient) {
|
||||
console.log('we-close---')
|
||||
this.stompClient.close();
|
||||
}
|
||||
this.socket_flag = false;
|
||||
this.stompClient = null;
|
||||
clearTimeout(this.setTimeOut_flag);
|
||||
},
|
||||
|
|
@ -278,6 +314,7 @@ export default {
|
|||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
inputPattern: /^[a-z A-z 0-9 $.]+/,
|
||||
inputType: 'password',
|
||||
inputErrorMessage: "登录密码不能为空",
|
||||
}).then(({ value }) => {
|
||||
let params = {
|
||||
|
|
|
|||
|
|
@ -2,28 +2,63 @@
|
|||
<div class="device-run-starts-wrap">
|
||||
<div class="cmd-list" v-for="(doct, index) in cmdList" :key="index">
|
||||
<div class="cmd-title-wrap">
|
||||
<svg-icon icon-class="A_product1" style="margin-right: 2px; height: 20px; width: 20px;" />分组名称：
|
||||
<svg-icon
|
||||
icon-class="A_product1"
|
||||
style="margin-right: 2px; height: 20px; width: 20px"
|
||||
/>分组名称：
|
||||
<span class="cmd-title">{{ doct.cmdName }}</span>
|
||||
</div>
|
||||
<div class="param-item2" v-for="(doctItem, indexs) in doct.children" :key="indexs">
|
||||
<div
|
||||
class="param-item2"
|
||||
v-for="(doctItem, indexs) in doct.children"
|
||||
:key="indexs"
|
||||
>
|
||||
<div class="title-top">
|
||||
<span class="name-wr">{{ doctItem.funName }}</span>
|
||||
<span class="type-wr" @click="handleShowData(doctItem)">查看</span>
|
||||
</div>
|
||||
<div class="value-info">
|
||||
<div class="value-wrap">
|
||||
<span class="val-span" v-text="doctItem.lastValue === null || doctItem.lastValue === undefined ? '--' : doctItem.lastValue"> </span>
|
||||
<span
|
||||
class="val-span"
|
||||
v-text="
|
||||
doctItem.lastValue === null || doctItem.lastValue === undefined
|
||||
? '--'
|
||||
: doctItem.lastValue
|
||||
"
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="time-w">
|
||||
<span class="time-warp">{{ doctItem.unitName }}</span>
|
||||
<span class="time" v-text="doctItem.lastTime ? parseTime(doctItem.lastTime) : '--'"></span>
|
||||
<span
|
||||
class="time"
|
||||
v-text="doctItem.lastTime ? parseTime(doctItem.lastTime) : '--'"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog append-to-body class="device-run-state-dailog" title="查看数据" :visible.sync="dialogShow" width="700px" :close-on-click-modal="false" @close="dialogCloseCell" @opened="dialogOpen">
|
||||
<run-state-table :dialogData="dialogData" :deviceId="sourceId" :prodId="prodId" :pro_type="dialogData.funDataType" :dialogShow="dialogShow" :deviceKey="deviceInfo.deviceKey" ref="showChart" />
|
||||
<el-dialog
|
||||
append-to-body
|
||||
class="device-run-state-dailog"
|
||||
title="查看数据"
|
||||
:visible.sync="dialogShow"
|
||||
width="700px"
|
||||
:close-on-click-modal="false"
|
||||
@close="dialogCloseCell"
|
||||
@opened="dialogOpen"
|
||||
>
|
||||
<run-state-table
|
||||
:dialogData="dialogData"
|
||||
:deviceId="sourceId"
|
||||
:prodId="prodId"
|
||||
:pro_type="dialogData.funDataType"
|
||||
:dialogShow="dialogShow"
|
||||
:deviceKey="deviceInfo.deviceKey"
|
||||
ref="showChart"
|
||||
/>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="small" @click="dialogShow = false">关 闭</el-button>
|
||||
</div>
|
||||
|
|
@ -38,7 +73,7 @@ export default {
|
|||
name: "RunStartsWrap",
|
||||
props: ["prodId", "sourceId", "deviceInfo"],
|
||||
components: {
|
||||
RunStateTable
|
||||
RunStateTable,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -49,7 +84,7 @@ export default {
|
|||
socket_flag: true,
|
||||
dialogData: {},
|
||||
dialogShow: false,
|
||||
firstWsMassage: true
|
||||
firstWsMassage: true,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -59,15 +94,15 @@ export default {
|
|||
methods: {
|
||||
// 查看数据
|
||||
handleShowData(row) {
|
||||
row.chartDate = new Date()
|
||||
this.dialogData = row
|
||||
this.dialogShow = true
|
||||
row.chartDate = new Date();
|
||||
this.dialogData = row;
|
||||
this.dialogShow = true;
|
||||
},
|
||||
dialogOpen() {
|
||||
this.$refs.showChart.initDialog(this.dialogData)
|
||||
this.$refs.showChart.initDialog(this.dialogData);
|
||||
},
|
||||
dialogCloseCell() {
|
||||
this.$refs.showChart.close()
|
||||
this.$refs.showChart.close();
|
||||
},
|
||||
// 创建ws
|
||||
connection() {
|
||||
|
|
@ -81,9 +116,11 @@ export default {
|
|||
let headers = {
|
||||
clientid: this.deviceInfo.wsClientId,
|
||||
username: this.deviceInfo.wsUsername,
|
||||
sign: this.deviceInfo.wsSign
|
||||
sign: this.deviceInfo.wsSign,
|
||||
};
|
||||
this.stompClient = new WebSocket(`${iotWebSocketBaseUrl}${headers.clientid}/${headers.username}/${headers.sign}`);
|
||||
this.stompClient = new WebSocket(
|
||||
`${iotWebSocketBaseUrl}${headers.clientid}/${headers.username}/${headers.sign}`
|
||||
);
|
||||
this.stompClient.onmessage = this.socket_onmsg;
|
||||
this.stompClient.onclose = this.socket_onclose;
|
||||
},
|
||||
|
|
@ -92,8 +129,8 @@ export default {
|
|||
},
|
||||
setListData(data) {
|
||||
this.recursionSet(this.cmdList, JSON.parse(data));
|
||||
this.firstWsMassage = false
|
||||
this.$forceUpdate()
|
||||
this.firstWsMassage = false;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
recursionSet(list, result) {
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
|
|
@ -101,24 +138,35 @@ export default {
|
|||
// result["cmd"] && list[i]['cmdKey'] === result["cmd"]
|
||||
// if (result["cmd"] && list[i]['cmdKey'] === result["cmd"]) {
|
||||
for (var v = 0; v < list[i].children.length; v++) {
|
||||
if (result.params[list[i].children[v]['funKey']] !== null && result.params[list[i].children[v]['funKey']] !== undefined) {
|
||||
list[i].children[v]['lastValue'] = result.params[list[i].children[v]['funKey']]
|
||||
list[i].children[v]['lastTime'] = result.params['timestamp'] ? result.params['timestamp'] : ''
|
||||
if (
|
||||
result.params[list[i].children[v]["funKey"]] !== null &&
|
||||
result.params[list[i].children[v]["funKey"]] !== undefined
|
||||
) {
|
||||
list[i].children[v]["lastValue"] =
|
||||
result.params[list[i].children[v]["funKey"]];
|
||||
list[i].children[v]["lastTime"] = result.params["timestamp"]
|
||||
? result.params["timestamp"]
|
||||
: "";
|
||||
}
|
||||
}
|
||||
// }
|
||||
} else {
|
||||
if (result["cmd"] && list[i]['cmdKey'] === result["cmd"]) {
|
||||
if (result["cmd"] && list[i]["cmdKey"] === result["cmd"]) {
|
||||
for (var v = 0; v < list[i].children.length; v++) {
|
||||
if (result.params[list[i].children[v]['funKey']] !== null && result.params[list[i].children[v]['funKey']] !== undefined) {
|
||||
list[i].children[v]['lastValue'] = result.params[list[i].children[v]['funKey']],
|
||||
list[i].children[v]['lastTime'] = result.params['timestamp'] ? result.params['timestamp'] : ''
|
||||
if (
|
||||
result.params[list[i].children[v]["funKey"]] !== null &&
|
||||
result.params[list[i].children[v]["funKey"]] !== undefined
|
||||
) {
|
||||
(list[i].children[v]["lastValue"] =
|
||||
result.params[list[i].children[v]["funKey"]]),
|
||||
(list[i].children[v]["lastTime"] = result.params["timestamp"]
|
||||
? result.params["timestamp"]
|
||||
: "");
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
socket_onclose(e) {
|
||||
|
|
@ -137,9 +185,9 @@ export default {
|
|||
cmdId: row.cmdId,
|
||||
deviceId: this.deviceInfo.deviceId,
|
||||
cmdKey: row.cmdKey,
|
||||
deviceKey: this.deviceInfo.deviceKey
|
||||
deviceKey: this.deviceInfo.deviceKey,
|
||||
};
|
||||
getDeviceFunList(param).then(res => {
|
||||
getDeviceFunList(param).then((res) => {
|
||||
row["children"] = res.data || [];
|
||||
this.$forceUpdate();
|
||||
});
|
||||
|
|
@ -156,9 +204,9 @@ export default {
|
|||
getCmdList() {
|
||||
const params = {
|
||||
deviceId: this.deviceInfo.deviceId,
|
||||
cmdType: "1"
|
||||
}
|
||||
getDeviceCmdList(params).then(response => {
|
||||
cmdType: "1",
|
||||
};
|
||||
getDeviceCmdList(params).then((response) => {
|
||||
this.cmdList = response.data;
|
||||
});
|
||||
},
|
||||
|
|
@ -169,7 +217,7 @@ export default {
|
|||
this.socket_flag = false;
|
||||
this.stompClient = null;
|
||||
clearTimeout(this.setTimeOut_flag);
|
||||
}
|
||||
},
|
||||
},
|
||||
destroyed() {
|
||||
this.closeWebscoket();
|
||||
|
|
@ -180,11 +228,11 @@ export default {
|
|||
val.forEach((v, index) => {
|
||||
this.forGetParmas(v, index);
|
||||
});
|
||||
setTimeout(this.connection, 3000)
|
||||
setTimeout(this.connection, 3000);
|
||||
// this.connection()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>-
|
||||
<style lang="scss">
|
||||
|
|
@ -264,8 +312,11 @@ export default {
|
|||
.val-span {
|
||||
color: #03a9f4;
|
||||
font-size: 20px;
|
||||
display: inline-block;
|
||||
width: 280px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -324,9 +375,11 @@ export default {
|
|||
.val-span {
|
||||
color: #03a9f4;
|
||||
font-size: 20px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
width: 280px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -350,5 +403,4 @@ export default {
|
|||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue