603 lines
17 KiB
Vue
603 lines
17 KiB
Vue
<!--我的设备页-设备信息（网关）-->
|
||
<template>
|
||
<div class="product-details-info">
|
||
<div class="group-list-info">
|
||
<div class="top">
|
||
<div class="top-label">
|
||
<svg-icon
|
||
icon-class="A_product1"
|
||
style="margin-right: 2px; height: 20px; width: 20px"
|
||
/>设备信息
|
||
<span
|
||
v-if="updateState === false"
|
||
style="margin: 0px 15px 0 10px; font-weight: 200; font-size: 14px"
|
||
>设备名称：{{ infoData.deviceName }}</span
|
||
>
|
||
<span
|
||
v-if="updateState === true"
|
||
style="margin: 0px 5px 0 10px; font-weight: 200; font-size: 14px"
|
||
>设备名称：</span
|
||
>
|
||
<el-input v-if="updateState === true" v-model="temp.deviceName" />
|
||
<el-button
|
||
v-if="updateState === false"
|
||
type="text"
|
||
@click.stop="handleUpdate(infoData)"
|
||
>编辑</el-button
|
||
>
|
||
<el-button
|
||
v-if="updateState === true"
|
||
type="text"
|
||
@click.stop="submit"
|
||
>确定</el-button
|
||
>
|
||
</div>
|
||
<!-- <div class="top-button">
|
||
<el-button type="primary" @click="download" size="small">下载本地模拟器</el-button>
|
||
</div>-->
|
||
</div>
|
||
</div>
|
||
<div style="margin-bottom: 10px">
|
||
<el-tag v-for="(val,i) in infoData.deviceLabel" :key="i" style="margin-right: 5px;margin-bottom: 5px">{{ val }}</el-tag>
|
||
</div>
|
||
<div class="group-list-table">
|
||
<div class="table-row">
|
||
<div class="table-row-col">
|
||
<div class="title">设备ID</div>
|
||
<div class="content">
|
||
<span class="name">{{ infoData.deviceId }}</span>
|
||
<el-button
|
||
size="small"
|
||
type="text"
|
||
@click.stop="copyTexts(infoData.deviceId)"
|
||
>复制</el-button
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="table-row-col">
|
||
<div class="title">型号</div>
|
||
<div class="content">
|
||
<span class="group-id">{{ infoData.modelName }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="table-row-col">
|
||
<div class="title">设备密码</div>
|
||
<div class="content">
|
||
<!-- <span v-show="!showDevicePassword" class="centent">********</span> -->
|
||
<span :title="infoData.devicePassword" class="centent secret">{{
|
||
infoData.devicePassword
|
||
}}</span>
|
||
<el-button
|
||
v-if="isTenant === false"
|
||
size="small"
|
||
type="text"
|
||
@click.stop="upldatePassword"
|
||
>修改密码</el-button
|
||
>
|
||
<div v-else>
|
||
<el-button
|
||
v-show="!showDevicePassword"
|
||
size="small"
|
||
type="text"
|
||
@click.stop="showDevicePassword = true"
|
||
>显示</el-button
|
||
>
|
||
<el-button
|
||
v-show="showDevicePassword"
|
||
size="small"
|
||
type="text"
|
||
@click.stop="copyTexts(infoData.devicePassword)"
|
||
>复制</el-button
|
||
>
|
||
<el-button
|
||
v-show="showDevicePassword"
|
||
size="small"
|
||
type="text"
|
||
@click.stop="showDevicePassword = false"
|
||
>隐藏</el-button
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="table-row">
|
||
<div class="table-row-col">
|
||
<div class="title">产品PK</div>
|
||
<div class="content">
|
||
<span class="name">{{ infoData.prodKey }}</span>
|
||
<el-button
|
||
size="small"
|
||
type="text"
|
||
@click.stop="copyTexts(infoData.prodKey)"
|
||
>复制</el-button
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="table-row-col">
|
||
<div class="title">设备KEY</div>
|
||
<div class="content">{{ infoData.deviceKey }}</div>
|
||
</div>
|
||
<div class="table-row-col">
|
||
<div class="title">devSecret</div>
|
||
<div class="content">
|
||
<span v-show="!showProdSecret" class="centent">********</span>
|
||
<span
|
||
v-show="showProdSecret"
|
||
:title="infoData.deviceSecret"
|
||
class="centent secret"
|
||
>{{ infoData.deviceSecret }}</span
|
||
>
|
||
<el-button
|
||
v-show="!showProdSecret"
|
||
size="small"
|
||
type="text"
|
||
@click.stop="showProdSecret = true"
|
||
>显示</el-button
|
||
>
|
||
<el-button
|
||
v-show="showProdSecret"
|
||
size="small"
|
||
type="text"
|
||
@click.stop="copyTexts(infoData.deviceSecret)"
|
||
>复制</el-button
|
||
>
|
||
<el-button
|
||
v-show="showProdSecret"
|
||
size="small"
|
||
type="text"
|
||
@click.stop="showProdSecret = false"
|
||
>隐藏</el-button
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="table-row">
|
||
<div class="table-row-col">
|
||
<div class="title">设备类型</div>
|
||
<div class="content">{{ infoData.deviceTypeName }}</div>
|
||
</div>
|
||
<div class="table-row-col">
|
||
<div class="title">当前状态</div>
|
||
<div v-if="infoData.deviceState === 'ONLINE'" class="content">
|
||
在线
|
||
</div>
|
||
<div v-else-if="infoData.deviceState === 'OFFLINE'" class="content">
|
||
离线
|
||
</div>
|
||
<div v-else-if="infoData.deviceState === 'OUTLINE'" class="content">
|
||
脱线
|
||
</div>
|
||
<div v-else-if="infoData.deviceState === 'UNACTIVE'" class="content">
|
||
未激活
|
||
</div>
|
||
</div>
|
||
|
||
<div class="table-row-col">
|
||
<div class="title">创建时间</div>
|
||
<div class="content">{{ infoData.createTime || "--" }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="table-row">
|
||
<div class="table-row-col">
|
||
<div class="title">芯片ID</div>
|
||
<div class="content">{{ infoData.uId || "--" }}</div>
|
||
</div>
|
||
<div class="table-row-col">
|
||
<div class="title">主板ID</div>
|
||
<div class="content">{{ infoData.boaId || "--" }}</div>
|
||
</div>
|
||
|
||
<div class="table-row-col">
|
||
<div class="title">组装ID</div>
|
||
<div class="content">{{ infoData.assId || "--" }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="table-row">
|
||
<div class="table-row-col">
|
||
<div class="title">设备组</div>
|
||
<div class="content">{{infoData.groupName || '--'}}</div>
|
||
</div>
|
||
<div class="table-row-col" style="flex: 1">
|
||
<div class="title">固件版本</div>
|
||
<div class="content">{{ infoData.otaVersion || "--" }}</div>
|
||
</div>
|
||
<div class="table-row-col">
|
||
<div class="title">设备图片</div>
|
||
<div class="content">--</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-if="infoData.deviceType === 'MINIATURE_BREAKER' || infoData.deviceType === 'MOLDED_BREAKER'"
|
||
class="group-list-info"
|
||
style="margin-top: 15px"
|
||
>
|
||
<div class="top">
|
||
<div class="top-label">
|
||
<svg-icon
|
||
icon-class="A_product1"
|
||
style="margin-right: 2px; height: 20px; width: 20px"
|
||
/>告警配置
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
v-if="infoData.deviceType === 'MINIATURE_BREAKER' || infoData.deviceType === 'MOLDED_BREAKER'"
|
||
class="group-list-table"
|
||
style="border: 0"
|
||
>
|
||
<device-alarm-config
|
||
v-if="infoData.deviceType === 'MINIATURE_BREAKER' || infoData.deviceType === 'MOLDED_BREAKER'"
|
||
:deviceId="infoData.deviceId"
|
||
:deviceKey="infoData.deviceKey"
|
||
/>
|
||
</div>
|
||
|
||
<!-- <div-->
|
||
<!-- class="group-list-info"-->
|
||
<!-- style="margin-top: 15px"-->
|
||
<!-- v-if="infoData.deviceType === 'MINIATURE_BREAKER'"-->
|
||
<!-- >-->
|
||
<!-- <div class="top">-->
|
||
<!-- <div class="top-label">-->
|
||
<!-- <svg-icon-->
|
||
<!-- icon-class="A_product1"-->
|
||
<!-- style="margin-right: 2px; height: 20px; width: 20px"-->
|
||
<!-- />定时器-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
|
||
<!-- <div-->
|
||
<!-- class="group-list-table"-->
|
||
<!-- style="border: 0"-->
|
||
<!-- v-if="infoData.deviceType === 'MINIATURE_BREAKER'"-->
|
||
<!-- >-->
|
||
<!-- <device-timing-config-->
|
||
<!-- v-if="infoData.deviceType === 'MINIATURE_BREAKER'"-->
|
||
<!-- :deviceId="infoData.deviceId"-->
|
||
<!-- :deviceKey="infoData.deviceKey"-->
|
||
<!-- />-->
|
||
<!-- </div>-->
|
||
|
||
<!-- 添加或修改设备对话框 -->
|
||
<el-dialog
|
||
:close-on-click-modal="false"
|
||
:title="title"
|
||
:visible.sync="open"
|
||
class="eldialog-wrap"
|
||
width="500px"
|
||
>
|
||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||
<el-form-item label="设备密码：" prop="devicePassword">
|
||
<el-input
|
||
v-model="form.devicePassword"
|
||
clearable
|
||
placeholder="选填--设备密码"
|
||
@input="inputI"
|
||
/>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button size="mini" type="primary" @click="submitForm"
|
||
>确 定</el-button
|
||
>
|
||
<el-button size="mini" @click="open = false">取 消</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { updateDevice, resetPssword } from "@/api/iot/device";
|
||
import DeviceTimingConfig from "@/views/profile/DeviceTimingConfig/DeviceTimingConfig";
|
||
import DeviceAlarmConfig from "@/views/profile/DeviceAlarmConfig/DeviceAlarmConfig";
|
||
export default {
|
||
name: "DeviceInfo",
|
||
props: ["infoData", "isTenant"],
|
||
components: { DeviceTimingConfig, DeviceAlarmConfig },
|
||
data() {
|
||
const validatorNull = (rule, value, callback) => {
|
||
callback();
|
||
};
|
||
return {
|
||
updateState: false,
|
||
prodtreeOptions: [],
|
||
modelList: [],
|
||
showProdSecret: false,
|
||
showDevicePassword: false,
|
||
temp: {
|
||
deviceName: "",
|
||
deviceId: undefined,
|
||
},
|
||
rules: {
|
||
devicePassword: [
|
||
{
|
||
required: false,
|
||
validator: this.devicePassword,
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
},
|
||
form: {
|
||
devicePassword: "",
|
||
},
|
||
title: "",
|
||
open: false,
|
||
};
|
||
},
|
||
methods: {
|
||
devicePassword(rule, value, callback) {
|
||
const isExp = /^[A-Z a-z 0-9 _ - $]{0,36}$/;
|
||
if (this.form.devicePassword && !isExp.test(this.form.devicePassword)) {
|
||
callback(new Error("格式不正确(数字，英文字母大小写，36个字符)！"));
|
||
} else {
|
||
callback();
|
||
}
|
||
},
|
||
inputI() {
|
||
this.$forceUpdate();
|
||
},
|
||
// 修改设备密码 弹窗打开
|
||
upldatePassword() {
|
||
this.form.devicePassword = this.infoData.devicePassword;
|
||
this.form.deviceId = this.infoData.deviceId;
|
||
this.title = `修改设备--${this.infoData.deviceName} 密码：`;
|
||
this.open = true;
|
||
},
|
||
// 修改设备密码 提交
|
||
submitForm() {
|
||
this.$refs["form"].validate((valid) => {
|
||
if (valid) {
|
||
resetPssword(this.form).then((response) => {
|
||
this.open = false;
|
||
if (response.code === 200) {
|
||
this.msgSuccess("修改成功");
|
||
}
|
||
this.$emit("updateInfo", {
|
||
deviceId: this.infoData.deviceId,
|
||
});
|
||
});
|
||
}
|
||
});
|
||
},
|
||
copyTexts(val) {
|
||
this.copeFu(val, this);
|
||
},
|
||
// 设备修改只能修改名称
|
||
handleUpdate(row) {
|
||
this.newTemp();
|
||
this.temp = Object.assign({}, row);
|
||
this.updateState = true;
|
||
},
|
||
newTemp() {
|
||
this.temp = {
|
||
deviceName: "",
|
||
deviceId: undefined,
|
||
};
|
||
},
|
||
// 下载本地模拟器 -- 暂未开放
|
||
download() {},
|
||
submit() {
|
||
if (this.temp.deviceName && this.temp.deviceId) {
|
||
updateDevice(this.temp).then((response) => {
|
||
this.updateState = false;
|
||
if (response.code === 200) {
|
||
this.msgSuccess("修改成功");
|
||
}
|
||
this.$emit("updateInfo", {
|
||
deviceId: this.infoData.deviceId,
|
||
deviceName: this.infoData.deviceName,
|
||
});
|
||
});
|
||
} else {
|
||
this.msgError("设备名称不能为空！");
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.product-details-info {
|
||
.group-list-info {
|
||
.top {
|
||
text-align: left;
|
||
width: 100%;
|
||
float: left;
|
||
height: auto;
|
||
.top-label {
|
||
float: left;
|
||
width: calc(100% - 200px);
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #373d41;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
.el-input--medium {
|
||
width: 150px;
|
||
}
|
||
.el-button--text {
|
||
padding: 8px 12px;
|
||
color: #333;
|
||
}
|
||
.el-button--text:hover {
|
||
background-color: #d1dbe6;
|
||
border-radius: 0;
|
||
color: #1890ff;
|
||
}
|
||
}
|
||
.top-button {
|
||
float: left;
|
||
text-align: right;
|
||
width: 200px;
|
||
}
|
||
}
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 6px;
|
||
flex: 1;
|
||
.title {
|
||
line-height: 30px;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #373d41;
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 1;
|
||
}
|
||
}
|
||
.group-list-table {
|
||
border-top: 1px solid #d4d4d4;
|
||
border-left: 1px solid #d4d4d4;
|
||
.table-row {
|
||
display: flex;
|
||
width: 100%;
|
||
.table-row-col {
|
||
display: flex;
|
||
flex: 1 1 0%;
|
||
overflow: hidden;
|
||
font-size: 14px;
|
||
.title {
|
||
width: 180px;
|
||
height: 48px;
|
||
color: rgb(116, 119, 122);
|
||
display: flex;
|
||
align-items: center;
|
||
background: rgb(250, 250, 252);
|
||
border-bottom: 1px solid #d4d4d4;
|
||
border-right: 1px solid #d4d4d4;
|
||
padding: 0px 12px;
|
||
margin-bottom: 0px;
|
||
font-size: 15px;
|
||
font-weight: 100;
|
||
}
|
||
.content {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
flex: 1 1 0%;
|
||
overflow: hidden;
|
||
color: #666;
|
||
border-bottom: 1px solid #d4d4d4;
|
||
border-right: 1px solid #d4d4d4;
|
||
padding: 0px 12px;
|
||
.name {
|
||
display: inline-block;
|
||
max-width: 100%;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
cursor: pointer;
|
||
overflow: hidden;
|
||
}
|
||
.group-id {
|
||
margin-right: 8px;
|
||
}
|
||
.notice-item {
|
||
display: inline-block;
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 6px;
|
||
background: #d3d5d5;
|
||
margin-right: 3px;
|
||
}
|
||
.n {
|
||
background: #0fc18a;
|
||
}
|
||
.secret {
|
||
display: block;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.eldaialog-wrap {
|
||
.el-dialog__header {
|
||
border-bottom: 1px solid #747373;
|
||
}
|
||
.el-radio {
|
||
width: 90px;
|
||
}
|
||
.el-dialog__body {
|
||
padding: 0px;
|
||
}
|
||
.cus-itme.el-form-item--mini .el-form-item__content {
|
||
margin-left: 0px !important;
|
||
}
|
||
.select {
|
||
// width: 92%;
|
||
display: inline-block;
|
||
width: calc(92% - 50px);
|
||
display: inline-block;
|
||
float: left;
|
||
margin-right: 4px;
|
||
.el-input {
|
||
width: 100%;
|
||
}
|
||
}
|
||
.el-textarea {
|
||
width: 92%;
|
||
width: calc(92% - 50px);
|
||
width: 100%;
|
||
}
|
||
.el-input {
|
||
width: 92%;
|
||
width: calc(92% - 50px);
|
||
width: 100%;
|
||
}
|
||
.info {
|
||
width: 100%;
|
||
float: left;
|
||
margin-bottom: 15px;
|
||
/* margin-top: 13px; */
|
||
margin-left: -10px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
.span {
|
||
width: calc(100% - 91px);
|
||
display: block;
|
||
content: "";
|
||
height: 1px;
|
||
/* width: 100%; */
|
||
border-top: 1px dashed #ecedee;
|
||
-webkit-box-flex: 1;
|
||
-ms-flex: 1;
|
||
flex: 1;
|
||
margin-left: 80px;
|
||
margin-top: -10px;
|
||
}
|
||
.form-buttons-div {
|
||
height: 45px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
padding-right: 10px;
|
||
border-top: 1px solid #747373;
|
||
}
|
||
}
|
||
|
||
.group-dialog {
|
||
.el-dialog__header {
|
||
border-bottom: 1px solid #ccc;
|
||
}
|
||
.el-dialog__body {
|
||
padding: 28px;
|
||
.el-form-item {
|
||
margin-bottom: 0;
|
||
.el-form-item__label {
|
||
line-height: 30px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|