fast(标签):调整标签删除接口、设备列表、详情添加空间标签、项目设备管理添加空间标签查询字段

This commit is contained in:
fhysy 2024-10-30 17:17:12 +08:00
parent 9eed55cf66
commit bb8e04d1bc
12 changed files with 167 additions and 54 deletions

View File

@ -38,9 +38,8 @@ export function updateTagGroupdevice(data) {
// 删除标签设备
export function delTagGroupdevice(data) {
return request({
url: '/iot/label/remove',
url: '/iot/label/remove/' + data.deviceKey + '/' + data.labelCodes,
method: 'delete',
data: data
})
}
// 项目中删除设备

View File

@ -184,6 +184,11 @@
>
</template>
</el-table-column>
<el-table-column align="center" label="设备标签" prop="deviceLabel">
<template slot-scope="scope">
<el-tag v-for="(val,i) in scope.row.deviceLabel" :key="i" size="mini" style="margin-right: 5px;margin-bottom: 5px">{{ val }}</el-tag>
</template>
</el-table-column>
<el-table-column
align="center"
label="创建时间"
@ -807,7 +812,15 @@ export default {
getList() {
this.loading = true;
listDevice(this.queryParams).then((response) => {
this.deviceList = response.rows;
let list = response.rows.map(item=>{
if(item.deviceLabel && item.deviceLabel[0] == '空间'){
item.deviceLabel.shift();
return item;
}
return item;
})
this.deviceList = list;
// this.deviceList = response.rows;
this.total = response.total;
this.loading = false;
this.$nextTick(() => {

View File

@ -1,10 +1,10 @@
<template>
<div class="iot-project-details-warp">
<div class="info-tabs">
<div class="breadcrumb-wrap" v-show="breadcrumbList.length > 1">
<div v-show="breadcrumbList.length > 1" class="breadcrumb-wrap">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
<span @click="deviceClick(item, index)" :class="item.deviceId === deviceId ? 'breadcrumb-span show-wrap' : 'breadcrumb-span'">{{item.deviceName}}</span>
<span :class="item.deviceId === deviceId ? 'breadcrumb-span show-wrap' : 'breadcrumb-span'" @click="deviceClick(item, index)">{{item.deviceName}}</span>
</el-breadcrumb-item>
</el-breadcrumb>
</div>
@ -17,9 +17,9 @@
<div class="tabs-body protocol-wrap">
<device-run-starts-wrap
v-if="devudeRunState"
:sourceId="deviceId"
:deviceInfo="infoData"
:prodId="infoData.prodKey"
:sourceId="deviceId"
:wsUrl="iotWebSocketBaseUrl"
></device-run-starts-wrap>
</div>
@ -30,7 +30,7 @@
<info-wrap :infoData="infoData" @updateInfo="updateInfo($event)" />
</div>
</el-tab-pane>
<el-tab-pane label="子设备" name="child" v-if="infoData.deviceType === 'GATEWAY_CONTROLLER'">
<el-tab-pane v-if="infoData.deviceType === 'GATEWAY_CONTROLLER'" label="子设备" name="child">
<div class="tabs-body">
<child-device
v-if="activeName === 'child'"
@ -43,7 +43,7 @@
<el-tab-pane label="触发器" name="trigger">
<div class="tabs-body protocol-wrap">
<trigger-wrap :sourceId="infoData.deviceId" :deviceInfo="infoData"></trigger-wrap>
<trigger-wrap :deviceInfo="infoData" :sourceId="infoData.deviceId"></trigger-wrap>
</div>
</el-tab-pane>
@ -120,6 +120,9 @@ export default {
//
deviceInfo() {
getDevice(this.deviceId).then(response => {
if(response.data.deviceLabel && response.data.deviceLabel[0] == '空间'){
response.data.deviceLabel.shift();
}
this.infoData = response.data;
if (this.breadcrumbList.length <= 0) {
this.breadcrumbList.push(this.infoData);

View File

@ -25,13 +25,16 @@
</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">设备Key</div>
<div class="content">
<span class="name">{{infoData.deviceKey}}</span>
<el-button type="text" size="small" @click.stop="copyTexts(infoData.deviceKey)">复制</el-button>
<el-button size="small" type="text" @click.stop="copyTexts(infoData.deviceKey)">复制</el-button>
</div>
</div>
<div class="table-row-col">
@ -45,10 +48,10 @@
<div class="content">
<!-- <span v-show="!showDevicePassword" class="centent">********</span> -->
<span
class="centent secret"
:title="infoData.devicePassword"
class="centent secret"
>{{infoData.devicePassword}}</span>
<el-button type="text" size="small" @click.stop="upldatePassword">修改密码</el-button>
<el-button size="small" type="text" @click.stop="upldatePassword">修改密码</el-button>
<!-- <el-button
v-show="!showDevicePassword"
type="text"
@ -75,7 +78,7 @@
<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>
<el-button size="small" type="text" @click.stop="copyTexts(infoData.prodKey)">复制</el-button>
</div>
</div>
@ -89,25 +92,25 @@
<span v-show="!showProdSecret" class="centent">********</span>
<span
v-show="showProdSecret"
class="centent secret"
:title="infoData.deviceSecret"
class="centent secret"
>{{infoData.deviceSecret}}</span>
<el-button
v-show="!showProdSecret"
type="text"
size="small"
type="text"
@click.stop="showProdSecret = true"
>显示</el-button>
<el-button
v-show="showProdSecret"
type="text"
size="small"
type="text"
@click.stop="copyTexts(infoData.deviceSecret)"
>复制</el-button>
<el-button
v-show="showProdSecret"
type="text"
size="small"
type="text"
@click.stop="showProdSecret = false"
>隐藏</el-button>
</div>
@ -125,10 +128,10 @@
</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 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>
@ -145,7 +148,7 @@
</div>
</div>
<div class="group-list-info" style="margin-top: 15px;" v-if="infoData.deviceType === 'MINIATURE_BREAKER'">
<div v-if="infoData.deviceType === 'MINIATURE_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;" />告警配置
@ -153,12 +156,12 @@
</div>
</div>
<div class="group-list-table" style="border: 0;" v-if="infoData.deviceType === 'MINIATURE_BREAKER'">
<div v-if="infoData.deviceType === 'MINIATURE_BREAKER'" class="group-list-table" style="border: 0;">
<device-alarm-config v-if="infoData.deviceType === 'MINIATURE_BREAKER'" :deviceId="infoData.deviceId" :deviceKey="infoData.deviceKey" />
</div>
<div class="group-list-info" style="margin-top: 15px;" v-if="infoData.deviceType === 'MINIATURE_BREAKER'">
<div v-if="infoData.deviceType === 'MINIATURE_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;" />定时器
@ -166,21 +169,21 @@
</div>
</div>
<div class="group-list-table" style="border: 0;" v-if="infoData.deviceType === 'MINIATURE_BREAKER'">
<div v-if="infoData.deviceType === 'MINIATURE_BREAKER'" class="group-list-table" style="border: 0;">
<device-timing-config v-if="infoData.deviceType === 'MINIATURE_BREAKER'" :deviceId="infoData.deviceId" :deviceKey="infoData.deviceKey" />
</div>
<!-- 添加或修改设备对话框 -->
<dialog-template
class="eldialog-wrap"
:title="title"
:visible="open"
class="eldialog-wrap"
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-input v-model="form.devicePassword" clearable placeholder="选填--设备密码" @input="inputI" />
</el-form-item>
</el-form>
<div slot="dialog-footer" class="dialog-footer">
@ -308,7 +311,7 @@ export default {
text-align: left;
width: 100%;
float: left;
height: 40px;
height: auto;
.top-label {
float: left;
width: calc(100% - 200px);

View File

@ -8,6 +8,11 @@
label-width="68px"
>
<el-row>
<el-col :span="5">
<el-form-item label="空间:" prop="parentId">
<treeselect v-model="queryParams.labelCode" :normalizer="normalizer" :options="spaceList" placeholder="请选择上级标签" />
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="型号名称" prop="prodKey">
<el-select
@ -63,7 +68,7 @@
</el-form-item>
</el-col> -->
<el-col :span="9">
<el-col :span="4">
<el-form-item class="query-foot">
<el-button
icon="el-icon-search"
@ -197,6 +202,9 @@ import EDeviceChildren from "./EDeviceChildren";
import { webSocketProjectGatewayUrl } from "@/config/env";
import { listProjectDevice, listProjectModel } from "@/api/iot/project_new";
import { getIotFileUrl } from "@/utils/hciot";
import { listTagType } from "@/api/iot/tagType";
import { listTagGroup } from "@/api/iot/tagGroup";
import Treeselect from "@riophae/vue-treeselect";
const deviceStatusOpt = {
ONLINE: "在线",
OFFLINE: "离线",
@ -208,6 +216,7 @@ export default {
components: {
ESimpleCard,
EDeviceChildren,
Treeselect,
},
props: {
sourceId: {
@ -223,6 +232,7 @@ export default {
return {
deviceStatusOpt,
queryParams: {
labelCode: undefined,
prodKey: undefined,
deviceName: undefined,
deviceStatus: undefined,
@ -235,6 +245,7 @@ export default {
socket_flag: true,
timeout_flag: null,
ws_guid: '',
spaceList:[]
};
},
watch: {
@ -252,8 +263,34 @@ export default {
},
created() {
this.initHTML();
this.getTagTypeList();
},
methods: {
/** 转换项目标签数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.labelCode,
label: node.labelKey,
children: node.children
};
},
getTagTypeList(){
listTagType(this.sourceId).then(response => {
if(response.rows.length>0){
this.getSpaceList(response.rows[0].labelType);
}
});
},
/** 查询项目标签列表 */
getSpaceList(labelType) {
listTagGroup({ projectId:this.sourceId,labelType:labelType }).then(response => {
this.dataList = response.rows || [];
this.spaceList = this.handleTree(response.rows, "labelCode", "parentId");
});
},
getIotFileUrl,
// init html
initHTML() {

View File

@ -118,6 +118,7 @@
>
<tag-group-device
v-if="selectTableShow"
:infoData="infoData"
:labelCode="activelabelCode"
:projectId="infoData.projectId"
:sourceId="sourceId"

View File

@ -2,11 +2,10 @@
<div class="app-container">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button v-if="tagData.isDefault !=='Y' && infoData.projectRole !== 'personal'" v-hasPermi="['iot:label:edit']" icon="el-icon-plus" plain size="mini" type="primary" @click="handleAdd" >新增标签</el-button>
<el-button v-if="tagData.isDefault !=='Y' && infoData && infoData.projectRole !== 'personal'" v-hasPermi="['iot:label:edit']" icon="el-icon-plus" plain size="mini" type="primary" @click="handleAdd" >新增标签</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="tag_deviceList"
@ -22,7 +21,7 @@
<el-table-column align="center" class-name="small-padding fixed-width" label="操作" width="150">
<template slot-scope="scope">
<el-button
v-if="scope.row.deviceType !== 'MINIATURE_BREAKER' && tagData.isDefault !=='Y' && infoData.projectRole !== 'personal'"
v-if="scope.row.deviceType !== 'MINIATURE_BREAKER' && tagData.isDefault !=='Y' && infoData && infoData.projectRole !== 'personal'"
v-hasPermi="['iot:label:edit']"
icon="el-icon-delete"
size="mini"
@ -109,7 +108,7 @@ import {
export default {
name: "TagGroupDevice",
props: ["sourceId", "projectId", "labelCode", "tagData"],
props: ["sourceId", "projectId", "labelCode", "tagData", "infoData"],
components: {
SelectTableWrap,
DialogTemplate
@ -364,7 +363,7 @@ export default {
type: "warning"
})
.then(function() {
return delTagGroupdevice({ deviceKey: row.deviceKey,labelCodes});
return delTagGroupdevice({ deviceKey: row.deviceKey,labelCodes:labelCodes.join()});
})
.then(() => {
this.getList();

View File

@ -222,6 +222,9 @@ export default {
//
deviceInfo(type) {
getDevice(this.deviceId).then((response) => {
if(response.data.deviceLabel && response.data.deviceLabel[0] == '空间'){
response.data.deviceLabel.shift();
}
if (!type) {
this.pInfo = response.data;
}

View File

@ -36,6 +36,9 @@
</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">
@ -402,7 +405,7 @@ export default {
text-align: left;
width: 100%;
float: left;
height: 40px;
height: auto;
.top-label {
float: left;
width: calc(100% - 200px);

View File

@ -73,6 +73,17 @@
<el-table-column align="left" label="设备名称" prop="deviceName" />
<el-table-column align="left" label="所属型号" prop="modelName" />
<el-table-column align="left" label="设备key" prop="deviceKey" />
<el-table-column
align="center"
label="设备码"
min-width="120"
prop="deviceState"
width="120"
>
<template slot-scope="scope">
<img :ref="'qrCodeDiv' + scope.row.deviceKey" style="width: 100%;cursor: pointer" @click="lookQrCode(scope.row.qrCodeUrl)"/>
</template>
</el-table-column>
<el-table-column align="left" label="设备类型" prop="deviceTypeName" width="120px" />
<el-table-column align="center" label="设备状态" prop="deviceState" width="120">
<template slot-scope="scope">
@ -82,6 +93,11 @@
<el-tag v-else-if="scope.row.deviceState === 'UNACTIVE'" type="info">未激活</el-tag>
</template>
</el-table-column>
<el-table-column align="center" label="设备标签" prop="deviceLabel">
<template slot-scope="scope">
<el-tag v-for="(val,i) in scope.row.deviceLabel" :key="i" size="mini" style="margin-right: 5px;margin-bottom: 5px">{{ val }}</el-tag>
</template>
</el-table-column>
<el-table-column align="center" label="创建时间" prop="createTime" sortable="custom" width="160px" />
<el-table-column
align="center"
@ -112,6 +128,9 @@
<div v-show="componectVal !== ''" :class="componectVal === 'GatewayDetail'? 'to-home-wrap2 gateway-wrap': 'to-home-wrap2 '" @click="toTableClick">
<el-button circle icon="el-icon-d-arrow-left" title="返回列表">返回列表</el-button>
</div>
<el-dialog :visible.sync="imgModelShow" title="设备二维码" width="400px">
<img :src="qrCodeUrl" height="100%" width="100%">
</el-dialog>
</div>
</template>
@ -124,6 +143,7 @@ import {
} from "@/api/tenant/device";
import DetailsWrap from './profile/details'
import GatewayDetail from '@/views/profile/DeviceDetailsView/index'
import JsBarcode from "jsbarcode";
const deviceStatusOpt = {
ONLINE: "在线",
OFFLINE: "离线",
@ -145,6 +165,8 @@ export default {
return {
deviceStatusOpt,
lineTypeOpt,
imgModelShow:false,
qrCodeUrl:'',
sourceId: "",
componectVal: "",
selectTableShow: false,
@ -190,6 +212,10 @@ export default {
this.getList();
},
methods: {
lookQrCode(url){
this.qrCodeUrl = url;
this.imgModelShow = true;
},
sortChange(column) {
const sort = {
isAsc: column.order === "descending" ? "desc" : "asc",
@ -234,9 +260,29 @@ export default {
getList() {
this.loading = true;
listDevice(this.queryParams).then(response => {
this.deviceList = response.rows;
let list = response.rows.map(item=>{
if(item.deviceLabel && item.deviceLabel[0] == '空间'){
item.deviceLabel.shift();
return item;
}
return item;
})
this.deviceList = list;
this.total = response.total;
this.loading = false;
this.$nextTick(() => {
this.deviceList.forEach((item,index) => {
JsBarcode(this.$refs["qrCodeDiv" + item.deviceKey], item.deviceKey, {
format: "CODE128", //
width: 2, //线
height: 65, //
lineColor: "#000", //线
displayValue: true, //
margin: 3 //
});
this.deviceList[index].qrCodeUrl=this.$refs["qrCodeDiv" + item.deviceKey].src;
})
})
});
},
/** 搜索按钮操作 */

View File

@ -1,10 +1,10 @@
<template>
<div class="iot-project-details-warp">
<div class="info-tabs">
<div class="breadcrumb-wrap" v-show="breadcrumbList.length > 1">
<div v-show="breadcrumbList.length > 1" class="breadcrumb-wrap">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
<span @click="deviceClick(item, index)" :class="item.deviceId === deviceId ? 'breadcrumb-span show-wrap' : 'breadcrumb-span'">{{item.deviceName}}</span>
<span :class="item.deviceId === deviceId ? 'breadcrumb-span show-wrap' : 'breadcrumb-span'" @click="deviceClick(item, index)">{{item.deviceName}}</span>
</el-breadcrumb-item>
</el-breadcrumb>
</div>
@ -17,9 +17,9 @@
<div class="tabs-body protocol-wrap">
<device-run-starts-wrap
v-if="devudeRunState"
:sourceId="deviceId"
:deviceInfo="infoData"
:prodId="infoData.prodKey"
:sourceId="deviceId"
:wsUrl="iotWebSocketBaseUrl"
></device-run-starts-wrap>
</div>
@ -30,7 +30,7 @@
<info-wrap :infoData="infoData" @updateInfo="updateInfo($event)" />
</div>
</el-tab-pane>
<el-tab-pane label="子设备" name="child" v-if="infoData.deviceType === 'GATEWAY_CONTROLLER'">
<el-tab-pane v-if="infoData.deviceType === 'GATEWAY_CONTROLLER'" label="子设备" name="child">
<div class="tabs-body">
<child-device
v-if="activeName === 'child'"
@ -43,7 +43,7 @@
<el-tab-pane label="触发器" name="trigger">
<div class="tabs-body protocol-wrap">
<trigger-wrap :sourceId="infoData.deviceId" :deviceInfo="infoData"></trigger-wrap>
<trigger-wrap :deviceInfo="infoData" :sourceId="infoData.deviceId"></trigger-wrap>
</div>
</el-tab-pane>
<el-tab-pane label="日志" name="devLog">
@ -108,6 +108,9 @@ export default {
//
deviceInfo() {
getDevice(this.deviceId).then(response => {
if(response.data.deviceLabel && response.data.deviceLabel[0] == '空间'){
response.data.deviceLabel.shift();
}
this.infoData = response.data;
if (this.breadcrumbList.length <= 0) {
this.breadcrumbList.push(this.infoData);

View File

@ -11,13 +11,16 @@
</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">设备Key</div>
<div class="content">
<span class="name">{{infoData.deviceKey}}</span>
<el-button type="text" size="small" @click="copyText(infoData.deviceKey)">复制</el-button>
<el-button size="small" type="text" @click="copyText(infoData.deviceKey)">复制</el-button>
</div>
</div>
<div class="table-row-col">
@ -32,25 +35,25 @@
<span v-show="!showDevicePassword" class="centent">********</span>
<span
v-show="showDevicePassword"
class="centent secret"
:title="infoData.devicePassword"
class="centent secret"
>{{infoData.devicePassword}}</span>
<el-button
v-show="!showDevicePassword"
type="text"
size="small"
type="text"
@click.stop="showDevicePassword = true"
>显示</el-button>
<el-button
v-show="showDevicePassword"
type="text"
size="small"
type="text"
@click="copyText(infoData.devicePassword)"
>复制</el-button>
<el-button
v-show="showDevicePassword"
type="text"
size="small"
type="text"
@click.stop="showDevicePassword = false"
>隐藏</el-button>
</div>
@ -72,25 +75,25 @@
<span v-show="!showProdSecret" class="centent">********</span>
<span
v-show="showProdSecret"
class="centent secret"
:title="infoData.deviceSecret"
class="centent secret"
>{{infoData.deviceSecret}}</span>
<el-button
v-show="!showProdSecret"
type="text"
size="small"
type="text"
@click.stop="showProdSecret = true"
>显示</el-button>
<el-button
v-show="showProdSecret"
type="text"
size="small"
type="text"
@click="copyText(infoData.deviceSecret)"
>复制</el-button>
<el-button
v-show="showProdSecret"
type="text"
size="small"
type="text"
@click.stop="showProdSecret = false"
>隐藏</el-button>
</div>
@ -104,10 +107,10 @@
</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 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">
@ -163,7 +166,7 @@ export default {
text-align: left;
width: 100%;
float: left;
height: 40px;
height: auto;
.top-label {
float: left;
width: calc(100% - 200px);