474 lines
13 KiB
Vue
474 lines
13 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 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 type="text" size="small" @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
|
||
class="centent secret"
|
||
:title="infoData.devicePassword"
|
||
>{{infoData.devicePassword}}</span>
|
||
<el-button type="text" size="small" @click.stop="upldatePassword">修改密码</el-button>
|
||
<!-- <el-button
|
||
v-show="!showDevicePassword"
|
||
type="text"
|
||
size="small"
|
||
@click.stop="showDevicePassword = true"
|
||
>显示</el-button>
|
||
<el-button
|
||
v-show="showDevicePassword"
|
||
type="text"
|
||
size="small"
|
||
@click.stop="copyTexts(infoData.devicePassword)"
|
||
>复制</el-button>
|
||
<el-button
|
||
v-show="showDevicePassword"
|
||
type="text"
|
||
size="small"
|
||
@click.stop="showDevicePassword = false"
|
||
>隐藏</el-button>-->
|
||
</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 type="text" size="small" @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"
|
||
class="centent secret"
|
||
:title="infoData.deviceSecret"
|
||
>{{infoData.deviceSecret}}</span>
|
||
<el-button
|
||
v-show="!showProdSecret"
|
||
type="text"
|
||
size="small"
|
||
@click.stop="showProdSecret = true"
|
||
>显示</el-button>
|
||
<el-button
|
||
v-show="showProdSecret"
|
||
type="text"
|
||
size="small"
|
||
@click.stop="copyTexts(infoData.deviceSecret)"
|
||
>复制</el-button>
|
||
<el-button
|
||
v-show="showProdSecret"
|
||
type="text"
|
||
size="small"
|
||
@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.parentName || '--'}}</div>
|
||
</div>
|
||
<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 class="content" v-if="infoData.deviceState === 'ONLINE'">在线</div>
|
||
<div class="content" v-else-if="infoData.deviceState === 'OFFLINE'">离线</div>
|
||
<div class="content" v-else-if="infoData.deviceState === 'OUTLINE'">脱线</div>
|
||
<div class="content" v-else-if="infoData.deviceState === 'UNACTIVE'">未激活</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="table-row">
|
||
<div class="table-row-col">
|
||
<div class="title">创建时间</div>
|
||
<div class="content">{{infoData.createTime || '--'}}</div>
|
||
</div>
|
||
|
||
<div class="table-row-col" style="flex: 2 1 0%;">
|
||
<div class="title">设备图片</div>
|
||
<div class="content">--</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 添加或修改设备对话框 -->
|
||
<dialog-template
|
||
class="eldialog-wrap"
|
||
:title="title"
|
||
:visible="open"
|
||
width="500px"
|
||
@close="open = false"
|
||
>
|
||
<el-form ref="form" slot="dialog-center" :model="form" :rules="rules" label-width="100px">
|
||
<el-form-item label="设备密码：" prop="devicePassword">
|
||
<el-input v-model="form.devicePassword" @input="inputI" placeholder="选填--设备密码" clearable />
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="dialog-footer" class="dialog-footer">
|
||
<el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
|
||
<el-button size="mini" @click="open = false">取 消</el-button>
|
||
</div>
|
||
</dialog-template>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { updateDevice, resetPssword } from "@/api/iot/device";
|
||
import DialogTemplate from "@/components/DialogTemplate";
|
||
export default {
|
||
name: "DeviceInfo",
|
||
props: ["infoData"],
|
||
components: {DialogTemplate},
|
||
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: 40px;
|
||
.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>
|