提交代码
This commit is contained in:
23688nl
parent
c895df0043
commit
5aadbec9ce
|
|
@ -3,7 +3,7 @@ import request from '@/utils/request'
|
|||
// 查询报警记录列表
|
||||
export function listRecord(query) {
|
||||
return request({
|
||||
url: '/tenant/record/list',
|
||||
url: '/iot/record/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
|
|
@ -12,7 +12,7 @@ export function listRecord(query) {
|
|||
// 查询报警记录详细
|
||||
export function getRecord(recordId) {
|
||||
return request({
|
||||
url: '/tenant/record/' + recordId,
|
||||
url: '/iot/record/' + recordId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
|
@ -29,7 +29,7 @@ export function updateRecord(data) {
|
|||
// 删除报警记录
|
||||
export function delRecord(recordId) {
|
||||
return request({
|
||||
url: '/tenant/record/' + recordId,
|
||||
url: '/iot/record/' + recordId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
|
@ -37,7 +37,7 @@ export function delRecord(recordId) {
|
|||
// 导出报警记录
|
||||
export function exportRecord(query) {
|
||||
return request({
|
||||
url: '/tenant/record/export',
|
||||
url: '/iot/record/export',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import request from '@/utils/request'
|
|||
// 获取路由
|
||||
export const getDevcieApp = () => {
|
||||
return request({
|
||||
url: '/app/tenant/appInfo',
|
||||
url: '/app/common/appInfo',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
|
@ -11,7 +11,7 @@ export const getDevcieApp = () => {
|
|||
// 我的设备列表
|
||||
export const getDeviceList = (query) => {
|
||||
return request({
|
||||
url: '/iot/device/my/list',
|
||||
url: '/iot/device/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
|
|
@ -20,7 +20,7 @@ export const getDeviceList = (query) => {
|
|||
// app 警告分析
|
||||
export const getWarningAnalysis = (query) => {
|
||||
return request({
|
||||
url: '/app/tenant/index/warning-analysis',
|
||||
url: '/app/index/warning-analysis',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
|
|
@ -29,7 +29,7 @@ export const getWarningAnalysis = (query) => {
|
|||
// 首页数据
|
||||
export function homeCount(query) {
|
||||
return request({
|
||||
url: '/app/tenant/index',
|
||||
url: '/app/index',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
|
|
@ -38,7 +38,7 @@ export function homeCount(query) {
|
|||
// app 项目设备
|
||||
export function appProjectDeviceList(query) {
|
||||
return request({
|
||||
url: '/app/tenant/device/table',
|
||||
url: '/app/device/table',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
|
|
@ -47,7 +47,7 @@ export function appProjectDeviceList(query) {
|
|||
// app 项目列表
|
||||
export function appProjectList(query) {
|
||||
return request({
|
||||
url: '/app/tenant/project/list',
|
||||
url: '/app/project/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
|
|
@ -56,7 +56,7 @@ export function appProjectList(query) {
|
|||
// app 告警列表
|
||||
export function appAlarmRecordList(query) {
|
||||
return request({
|
||||
url: '/app/tenant/alarm/table',
|
||||
url: '/app/alarm/table',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
|
|
@ -65,7 +65,7 @@ export function appAlarmRecordList(query) {
|
|||
// app 模型统计
|
||||
export function appDeviceStatistics(query) {
|
||||
return request({
|
||||
url: '/app/tenant/index/device-statistics',
|
||||
url: '/app/index/device-statistics',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ export function listDevice(query) {
|
|||
// 查询设备列表
|
||||
export function myListDevice(query) {
|
||||
return request({
|
||||
url: "/iot/device/my/list",
|
||||
url: "/iot/device/list",
|
||||
method: "get",
|
||||
params: query
|
||||
});
|
||||
|
|
@ -106,3 +106,12 @@ export function resetPssword(data) {
|
|||
data: data
|
||||
});
|
||||
}
|
||||
|
||||
// 开关控制
|
||||
export function setSwitchControl(data) {
|
||||
return request({
|
||||
url: "/iot/dev/opt/down",
|
||||
method: "post",
|
||||
data: data
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,3 +60,11 @@ export function listProductList(query) {
|
|||
params: query
|
||||
});
|
||||
}
|
||||
|
||||
// 协议类型
|
||||
export function listModelType() {
|
||||
return request({
|
||||
url: "/iot/model/type-list",
|
||||
method: "get"
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import request from '@/utils/request'
|
|||
// 查询报警记录列表
|
||||
export function listRecord(query) {
|
||||
return request({
|
||||
url: '/personal/record/list',
|
||||
url: '/iot/record/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
|
|
@ -12,7 +12,7 @@ export function listRecord(query) {
|
|||
// 导出报警记录
|
||||
export function exportRecord(query) {
|
||||
return request({
|
||||
url: '/personal/record/export',
|
||||
url: '/iot/record/export',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import request from '@/utils/request'
|
|||
// 查询项目租户关系详细
|
||||
export function getOneselfInfo(deviceKey) {
|
||||
return request({
|
||||
url: '/personal/device/' + deviceKey,
|
||||
url: '/iot/device/' + deviceKey,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
|
@ -11,7 +11,7 @@ export function getOneselfInfo(deviceKey) {
|
|||
// 查询设备列表
|
||||
export function listDevice(query) {
|
||||
return request({
|
||||
url: "/personal/device/list",
|
||||
url: "/iot/device/list",
|
||||
method: "get",
|
||||
params: query
|
||||
});
|
||||
|
|
@ -19,7 +19,7 @@ export function listDevice(query) {
|
|||
// 查询设备详细
|
||||
export function getDevice(deviceId) {
|
||||
return request({
|
||||
url: "/personal/device/" + deviceId,
|
||||
url: "/iot/device/" + deviceId,
|
||||
method: "get"
|
||||
});
|
||||
}
|
||||
|
|
@ -27,7 +27,7 @@ export function getDevice(deviceId) {
|
|||
// 导出设备
|
||||
export function exportDevice(query) {
|
||||
return request({
|
||||
url: "/personal/device/export",
|
||||
url: "/iot/device/export",
|
||||
method: "get",
|
||||
params: query
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import request from '@/utils/request'
|
|||
// 首页数据
|
||||
export function homeCount(query) {
|
||||
return request({
|
||||
url: '/app/tenant/index',
|
||||
url: '/app/index',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
|
|
|
|||
|
|
@ -148,7 +148,7 @@ export function roleOptionselectList(tenantId) {
|
|||
// 查询工单处理人列表
|
||||
export function gdListUser(query) {
|
||||
return request({
|
||||
url: '/app/tenant/maintenance/maintenance-user',
|
||||
url: '/app/maintenance/maintenance-user',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import request from "@/utils/request";
|
|||
// 查询设备列表
|
||||
export function listDevice(query) {
|
||||
return request({
|
||||
url: "/tenant/device/list",
|
||||
url: "/iot/device/list",
|
||||
method: "get",
|
||||
params: query
|
||||
});
|
||||
|
|
@ -11,7 +11,7 @@ export function listDevice(query) {
|
|||
// 查询设备详细
|
||||
export function getDevice(deviceId) {
|
||||
return request({
|
||||
url: "/tenant/device/" + deviceId,
|
||||
url: "/iot/device/" + deviceId,
|
||||
method: "get"
|
||||
});
|
||||
}
|
||||
|
|
@ -19,7 +19,7 @@ export function getDevice(deviceId) {
|
|||
// 导出设备
|
||||
export function exportDevice(query) {
|
||||
return request({
|
||||
url: "/tenant/device/export",
|
||||
url: "/iot/device/export",
|
||||
method: "get",
|
||||
params: query
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import request from "@/utils/request";
|
|||
// 查询项目列表
|
||||
export function listProject(query) {
|
||||
return request({
|
||||
url: "/tenant/project/list",
|
||||
url: "/iot/project/list",
|
||||
method: "get",
|
||||
params: query
|
||||
});
|
||||
|
|
@ -29,7 +29,7 @@ export function exportProject(query) {
|
|||
// 根据项目ID查询项目下所有设备
|
||||
export function listDeviceByProjectId(projectId) {
|
||||
return request({
|
||||
url: "/tenant/space_device/device/" + projectId,
|
||||
url: "/iot/space_device/device/" + projectId,
|
||||
method: "get"
|
||||
});
|
||||
}
|
||||
|
|
@ -37,7 +37,7 @@ export function listDeviceByProjectId(projectId) {
|
|||
// 查询项目空间列表
|
||||
export function listSpace(query) {
|
||||
return request({
|
||||
url: "/tenant/space/list",
|
||||
url: "/iot/space/list",
|
||||
method: "get",
|
||||
params: query
|
||||
});
|
||||
|
|
@ -46,7 +46,7 @@ export function listSpace(query) {
|
|||
// 查询项目空间详细
|
||||
export function getSpace(spaceId) {
|
||||
return request({
|
||||
url: "/tenant/space/" + spaceId,
|
||||
url: "/iot/space/" + spaceId,
|
||||
method: "get"
|
||||
});
|
||||
}
|
||||
|
|
@ -55,7 +55,7 @@ export function getSpace(spaceId) {
|
|||
// 获取项目空间下拉树列表
|
||||
export function listSpaceTree(query) {
|
||||
return request({
|
||||
url: "/tenant/space/tree-list",
|
||||
url: "/iot/space/tree-list",
|
||||
method: "get",
|
||||
params: query
|
||||
});
|
||||
|
|
@ -64,7 +64,7 @@ export function listSpaceTree(query) {
|
|||
// 查询空间设备列表
|
||||
export function listSpace_device(query) {
|
||||
return request({
|
||||
url: '/tenant/space_device/list',
|
||||
url: '/iot/space_device/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import request from "@/utils/request";
|
|||
// 查询项目列表
|
||||
export function listProjectUser(query) {
|
||||
return request({
|
||||
url: "/tenant/project_user/list",
|
||||
url: "/iot/project_user/list",
|
||||
method: "get",
|
||||
params: query
|
||||
});
|
||||
|
|
@ -12,7 +12,7 @@ export function listProjectUser(query) {
|
|||
// 查询没有被绑定的用户
|
||||
export function listProjectNotUsed(query) {
|
||||
return request({
|
||||
url: "/tenant/project_user/not-used",
|
||||
url: "/iot/project_user/not-used",
|
||||
method: "get",
|
||||
params: query
|
||||
});
|
||||
|
|
@ -30,7 +30,7 @@ export function addProjectUser(data) {
|
|||
// 删除项目用户
|
||||
export function delProjectUser(projectId, userIds) {
|
||||
return request({
|
||||
url: "/tenant/project_user/" + projectId + '/' + userIds,
|
||||
url: "/iot/project_user/" + projectId + '/' + userIds,
|
||||
method: "delete"
|
||||
});
|
||||
}
|
||||
|
|
@ -38,7 +38,7 @@ export function delProjectUser(projectId, userIds) {
|
|||
// 导出项目用户列表
|
||||
export function exportProjectUser(query) {
|
||||
return request({
|
||||
url: "/tenant/project_user/export",
|
||||
url: "/iot/project_user/export",
|
||||
method: "get",
|
||||
params: query
|
||||
});
|
||||
|
|
|
|||
|
|
@ -154,7 +154,7 @@ export default {
|
|||
this.projectList[i].projectLat
|
||||
],
|
||||
// map: this.aMap,
|
||||
icon: this.projectList[i].projectOverview['unProcessed'] > 0 ? markerAlarmIcon : markerIcon,
|
||||
icon: this.projectList[i].tenantIndexVo['unProcessed'] > 0 ? markerAlarmIcon : markerIcon,
|
||||
offset: new AMap.Pixel(-13, -30)
|
||||
});
|
||||
var content = [];
|
||||
|
|
@ -173,7 +173,7 @@ export default {
|
|||
</marquee>
|
||||
</div>
|
||||
<div class="info-item"><span class="info-lable">报警总数：</span>
|
||||
<span class="info-value" style="color: #ff3739;font-size: 24px;font-weight: 500;">${this.projectList[i].projectOverview?.unProcessed}</span></div>
|
||||
<span class="info-value" style="color: #ff3739;font-size: 24px;font-weight: 500;">${this.projectList[i].tenantIndexVo?.unProcessed}</span></div>
|
||||
<div class="alarm-icon-block">
|
||||
<img class="alarm-icon" src="${infoAlarmIcon}"/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -187,11 +187,13 @@ export default {
|
|||
},
|
||||
// 查询项目列表
|
||||
getProjectList() {
|
||||
appProjectList({
|
||||
regionalismId: this.regionalismId
|
||||
}).then(response => {
|
||||
this.projectList = response.data;
|
||||
});
|
||||
if (this.$store.getters.userType !== 'PERSONAL') {
|
||||
appProjectList({
|
||||
regionalismId: this.regionalismId
|
||||
}).then(response => {
|
||||
this.projectList = response.data;
|
||||
});
|
||||
}
|
||||
},
|
||||
// 查询警情信息
|
||||
homeCount() {
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ export default {
|
|||
{
|
||||
guid: "3",
|
||||
label: "在线设备",
|
||||
valueKeys: "onlineDeviceTotal",
|
||||
valueKeys: "onlineTotal",
|
||||
image: imgs,
|
||||
routerKeys: "device"
|
||||
},
|
||||
|
|
@ -120,7 +120,7 @@ export default {
|
|||
routerPath = "/device_oneself/device_oneself";
|
||||
}
|
||||
break;
|
||||
case "onlineDeviceTotal":
|
||||
case "onlineTotal":
|
||||
routerPath = "/device/device";
|
||||
if (this.$store.getters.userType === "TENANT") {
|
||||
routerPath = "/device_tenant/device_tenant";
|
||||
|
|
|
|||
|
|
@ -187,11 +187,13 @@ export default {
|
|||
},
|
||||
// 查询项目列表
|
||||
getProjectList() {
|
||||
appProjectList({
|
||||
regionalismId: this.regionalismId
|
||||
}).then(response => {
|
||||
this.projectList = response.data;
|
||||
});
|
||||
if (this.$store.getters.userType !== 'PERSONAL') {
|
||||
appProjectList({
|
||||
regionalismId: this.regionalismId
|
||||
}).then(response => {
|
||||
this.projectList = response.data;
|
||||
});
|
||||
}
|
||||
},
|
||||
// 查询警情信息
|
||||
homeCount() {
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ export default {
|
|||
{
|
||||
guid: "3",
|
||||
label: "在线设备",
|
||||
valueKeys: "onlineDeviceTotal",
|
||||
valueKeys: "onlineTotal",
|
||||
image: imgs,
|
||||
routerKeys: "device",
|
||||
color: '#00FF06'
|
||||
|
|
@ -137,7 +137,7 @@ export default {
|
|||
routerPath = "/device_oneself/device_oneself";
|
||||
}
|
||||
break;
|
||||
case "onlineDeviceTotal":
|
||||
case "onlineTotal":
|
||||
routerPath = "/device/device";
|
||||
if (this.$store.getters.userType === "TENANT") {
|
||||
routerPath = "/device_tenant/device_tenant";
|
||||
|
|
|
|||
|
|
@ -335,11 +335,11 @@ export default {
|
|||
getCount() {
|
||||
homeCount().then(response => {
|
||||
this.tempObject = {
|
||||
onlineCount: response.data.onlineDeviceTotal,
|
||||
onlineCount: response.data.onlineTotal,
|
||||
activeCount: response.data.activeCount,
|
||||
deviceCount: response.data.deviceTotal,
|
||||
modelCount: response.data.projectTotal,
|
||||
offlineCount: (response.data.deviceTotal - response.data.onlineDeviceTotal) || 0
|
||||
offlineCount: (response.data.deviceTotal - response.data.onlineTotal) || 0
|
||||
}
|
||||
this.alarmCount = {
|
||||
processCount: response.data.processed,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,937 @@
|
|||
<template>
|
||||
<div class="app-container iot-device">
|
||||
<component :is="componectVal" :sourceId="sourceId"></component>
|
||||
<div v-show="componectVal === ''">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryForm"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
label-width="68px"
|
||||
>
|
||||
<!-- <el-form-item label="所属型号" prop="modelId">
|
||||
<el-select v-model="queryParams.modelId" placeholder="所属型号" clearable size="small" @change="handleQuery">
|
||||
<el-option
|
||||
:label="doct.modelName"
|
||||
v-for="doct in queryModelOpt"
|
||||
:key="doct.modelId"
|
||||
:value="doct.modelId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>-->
|
||||
|
||||
<el-form-item label="型号名称" prop="modelName">
|
||||
<el-input
|
||||
v-model="queryParams.modelName"
|
||||
placeholder="请输入型号名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="设备名称" prop="deviceName">
|
||||
<el-input
|
||||
v-model="queryParams.deviceName"
|
||||
placeholder="请输入设备名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备状态" prop="deviceState">
|
||||
<el-select
|
||||
v-model="queryParams.deviceState"
|
||||
placeholder="请选择设备状态"
|
||||
@change="handleQuery"
|
||||
clearable
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
:label="keys"
|
||||
v-for="(keys, vals) in deviceStatusOpt"
|
||||
:key="vals"
|
||||
:value="vals"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="设备类型" prop="deviceType">
|
||||
<el-select
|
||||
v-model="queryParams.deviceType"
|
||||
placeholder="请选择设备类型"
|
||||
@change="handleQuery"
|
||||
clearable
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
:label="keys"
|
||||
:value="vals"
|
||||
v-for="(keys, vals) in deviceTypeList"
|
||||
:key="vals"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['iot:device:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="deviceList"
|
||||
:default-sort="{prop: 'createTime', order: 'descending'}"
|
||||
@sort-change="sortChange"
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
label="序号"
|
||||
align="center"
|
||||
:index="indexFormatter"
|
||||
width="80px"
|
||||
></el-table-column>
|
||||
<el-table-column label="设备名称" align="left" prop="deviceName" />
|
||||
<el-table-column label="所属型号" align="left" prop="modelName" />
|
||||
<el-table-column label="设备key" align="left" prop="deviceKey" />
|
||||
<el-table-column label="设备类型" align="left" width="120px" prop="deviceTypeName" />
|
||||
<!-- <el-table-column label="父设备" align="left" prop="parentName" /> -->
|
||||
<el-table-column label="设备状态" align="center" width="120" prop="deviceState">
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success" v-if="scope.row.deviceState === 'ONLINE'">在线</el-tag>
|
||||
<el-tag type="danger" v-else-if="scope.row.deviceState === 'OFFLINE'">离线</el-tag>
|
||||
<el-tag type="danger" v-else-if="scope.row.deviceState === 'OUTLINE'">脱线</el-tag>
|
||||
<el-tag type="info" v-else-if="scope.row.deviceState === 'UNACTIVE'">未激活</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
sortable="custom"
|
||||
width="160px"
|
||||
prop="createTime"
|
||||
/>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
width="200px"
|
||||
class-name="small-padding fixed-width"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-search"
|
||||
@click="handleDetails(scope.row)"
|
||||
>详情</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['iot:device:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['iot:device:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 添加或修改设备对话框 -->
|
||||
<el-dialog
|
||||
class="eldialog-wrap"
|
||||
:close-on-click-modal="false"
|
||||
:title="title"
|
||||
:visible.sync="open"
|
||||
width="500px"
|
||||
>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="所属型号：" prop="modelId">
|
||||
<el-input
|
||||
v-model="form.modelName"
|
||||
placeholder="点击选择型号"
|
||||
@focus="openModelTableSelectDialog()"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="设备类型：" prop="deviceType">
|
||||
<el-select
|
||||
disabled
|
||||
v-model="form.deviceType"
|
||||
style="width: 100%;"
|
||||
placeholder="请选择设备类型"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
:label="keys"
|
||||
:value="vals"
|
||||
v-for="(keys, vals) in deviceTypeList"
|
||||
:key="vals"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="父设备：" prop="parentId" v-if="form.deviceType === 'MINIATURE_BREAKER'">
|
||||
<el-input
|
||||
v-model="form.parentName"
|
||||
placeholder="点击选择父设备"
|
||||
@focus="openTableSelectDialog()"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="线路类型：" prop="lineType" v-if="form.deviceType === 'MINIATURE_BREAKER'">
|
||||
<el-select v-model="form.lineType" style="width: 100%;" placeholder="请选择线路类型" clearable>
|
||||
<el-option :label="keys" :value="vals" v-for="(keys, vals) in lineTypeOpt" :key="vals" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="设备名称：" prop="deviceName">
|
||||
<el-input v-model="form.deviceName" placeholder="请输入设备名称" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="设备KEY：" prop="deviceKey">
|
||||
<el-input v-model="form.deviceKey" placeholder="请输入设备KEY" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="参数设置：">
|
||||
<span style="color: red; font-size: 12px;">*注意：锁定即参数不可修改；未锁则可以修改。</span>
|
||||
<div class="form-params-wrap">
|
||||
<param-wrap ref="paramWrap" typeKeys v-if="open"></param-wrap>
|
||||
</div>
|
||||
</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="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
title="选择"
|
||||
:visible.sync="selectTableShow"
|
||||
width="75%"
|
||||
top="10vh"
|
||||
class="select-table-dialog"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<select-table-wrap
|
||||
v-if="selectTableShow"
|
||||
:tableOption="tableSelectOption.tableOpt"
|
||||
:queryOption="tableSelectOption.queryOpt"
|
||||
:tableList="tableSelectOption.tableList"
|
||||
@parentGetList="childGetList($event)"
|
||||
:otherOption="tableSelectOption.otherOption"
|
||||
@returnEvent="returnEvent($event)"
|
||||
/>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" type="primary" @click="resuleClick">确 定</el-button>
|
||||
<el-button size="mini" @click="() =>{selectTableShow = false}">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<div class="to-home-wrap2-circuit" @click="toTableClick" v-show="componectVal !== ''">
|
||||
<el-button icon="el-icon-d-arrow-left" title="返回列表" circle>返回列表</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
listDevice,
|
||||
getDevice,
|
||||
delDevice,
|
||||
addDevice,
|
||||
updateDevice,
|
||||
exportDevice,
|
||||
listDeviceTypeList
|
||||
} from "@/api/iot/device";
|
||||
import { listModel, getModel } from "@/api/iot/model";
|
||||
import SelectTableWrap from "@/components/SelectTable/index";
|
||||
import DetailsWrap from "@/views/profile/DeviceDetailsView/index";
|
||||
import ParamWrap from "@/components/ParamWrap/deviceParam";
|
||||
const deviceStatusOpt = {
|
||||
ONLINE: "在线",
|
||||
OFFLINE: "离线",
|
||||
OUTLINE: "脱线",
|
||||
UNACTIVE: "未激活"
|
||||
};
|
||||
const lineTypeOpt = {
|
||||
MAIN: "总路",
|
||||
BRANCH: "支路"
|
||||
};
|
||||
|
||||
export default {
|
||||
name: "circuitBreaker",
|
||||
components: {
|
||||
SelectTableWrap,
|
||||
DetailsWrap,
|
||||
ParamWrap
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
deviceStatusOpt,
|
||||
lineTypeOpt,
|
||||
sourceId: "",
|
||||
componectVal: "",
|
||||
selectTableShow: false,
|
||||
tableSelectOption: {},
|
||||
selectResult: {},
|
||||
queryModelOpt: [],
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 设备表格数据
|
||||
deviceList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
modelId: null,
|
||||
parentId: null,
|
||||
deviceName: null,
|
||||
deviceState: null,
|
||||
deviceType: null,
|
||||
modelName: null,
|
||||
orderByColumn: "createTime",
|
||||
isAsc: "desc",
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
modelId: [
|
||||
{ required: true, message: "所属型号不能为空", trigger: "blur" }
|
||||
],
|
||||
deviceType: [
|
||||
{ required: true, message: "设备类型不能为空", trigger: "blur" }
|
||||
],
|
||||
parentId: [
|
||||
{ required: true, message: "父设备不能为空", trigger: "blur" }
|
||||
],
|
||||
deviceName: [
|
||||
{ required: true, message: "设备名称不能为空", trigger: "blur" }
|
||||
],
|
||||
lineType: [
|
||||
{ required: true, message: "线路类型不能为空", trigger: "blur" }
|
||||
],
|
||||
deviceKey: [
|
||||
{
|
||||
required: true,
|
||||
validator: this.chenking_deviceKey,
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
},
|
||||
deviceTypeList: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getDeviceTypeList();
|
||||
this.initGetModelList();
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
sortChange(column) {
|
||||
const sort = {
|
||||
isAsc: column.order === "descending" ? "desc" : "asc",
|
||||
orderByColumn: column.prop
|
||||
};
|
||||
this.queryParams = Object.assign(this.queryParams, sort);
|
||||
this.handleQuery();
|
||||
},
|
||||
indexFormatter(val) {
|
||||
return (
|
||||
val + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
|
||||
);
|
||||
},
|
||||
handleDetails(row) {
|
||||
this.sourceId = row.deviceId;
|
||||
this.componectVal = "DetailsWrap";
|
||||
},
|
||||
// 跳转详情页
|
||||
toTableClick() {
|
||||
this.componectVal = "";
|
||||
},
|
||||
// 打开厂商选择窗口 ——表格
|
||||
openModelTableSelectDialog() {
|
||||
this.selectResult = {};
|
||||
this.tableSelectOption = {
|
||||
otherOption: {
|
||||
tableType: "model"
|
||||
},
|
||||
queryOpt: {
|
||||
disable: false,
|
||||
labelWidth: "68px",
|
||||
params: {
|
||||
protocolType: "",
|
||||
modelName: "",
|
||||
deviceType: 'GATEWAY_CONTROLLER'
|
||||
},
|
||||
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,
|
||||
pageSize: 99999
|
||||
}).then(response => {
|
||||
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;
|
||||
this.form.parentName = "";
|
||||
} else if (!val) {
|
||||
this.form.parentId = "";
|
||||
this.form.parentName = "";
|
||||
}
|
||||
},
|
||||
// 查询设备类型列表
|
||||
getDeviceTypeList() {
|
||||
listDeviceTypeList().then(response => {
|
||||
this.deviceTypeList = response.data;
|
||||
});
|
||||
},
|
||||
/** 查询设备列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listDevice(Object.assign(this.queryParams , {
|
||||
deviceType: 'GATEWAY_CONTROLLER'
|
||||
})).then(response => {
|
||||
this.deviceList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
modelId: null,
|
||||
modelName: "",
|
||||
parentName: "",
|
||||
parentId: null,
|
||||
deviceName: null,
|
||||
deviceType: null,
|
||||
paramList: [],
|
||||
deviceKey: "",
|
||||
lineType: undefined
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加设备";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const deviceId = row.deviceId || this.ids;
|
||||
const _this = this;
|
||||
getDevice(deviceId).then(response => {
|
||||
_this.form = response.data;
|
||||
_this.open = true;
|
||||
_this.title = "修改设备";
|
||||
setTimeout(() => {
|
||||
_this.$refs.paramWrap.setList(response.data.paramList || []);
|
||||
}, 100);
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.form.paramList = this.$refs.paramWrap.getResult();
|
||||
this.form.lineType =
|
||||
this.form.deviceType === "MINIATURE_BREAKER"
|
||||
? this.form.lineType
|
||||
: undefined;
|
||||
if (this.form.deviceId != null) {
|
||||
updateDevice(this.form).then(response => {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addDevice(this.form).then(response => {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const deviceIds = row.deviceId || this.ids;
|
||||
this.$confirm("是否删除该选项?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
})
|
||||
.then(function() {
|
||||
return delDevice(deviceIds);
|
||||
})
|
||||
.then(() => {
|
||||
this.getList();
|
||||
this.msgSuccess("删除成功");
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
const queryParams = this.queryParams;
|
||||
this.$confirm("是否确认导出所有设备数据项?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
})
|
||||
.then(function() {
|
||||
return exportDevice(queryParams);
|
||||
})
|
||||
.then(response => {
|
||||
this.download(response.msg);
|
||||
});
|
||||
},
|
||||
chenking_deviceKey(rule, value, callback) {
|
||||
const isExp = /^[A-Z a-z 0-9 _ - $]{0,36}$/;
|
||||
if (this.form.deviceKey && !isExp.test(this.form.deviceKey)) {
|
||||
callback(new Error("格式不正确(数字，英文字母大小写，36个字符)！"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.iot-device {
|
||||
.eldialog-wrap {
|
||||
.el-dialog__header {
|
||||
border-bottom: 1px solid #747373;
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 0px;
|
||||
}
|
||||
.el-form {
|
||||
padding: 20px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
.el-dialog__footer {
|
||||
height: 60px;
|
||||
border-top: 1px solid #747373;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
padding-top: 15px;
|
||||
.el-button + .el-button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.el-button {
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
.form-params-wrap {
|
||||
height: 100%;
|
||||
width: calc(100% + 110px);
|
||||
position: relative;
|
||||
top: 15px;
|
||||
left: -90px;
|
||||
max-height: 250px;
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
border: 1px solid #009688;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
.to-home-wrap2-circuit {
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 170px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 100;
|
||||
color: #656363;
|
||||
font-size: 20px;
|
||||
cursor: default;
|
||||
.el-button--medium.is-circle {
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
background: #f26a6a;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
border-radius: 5px;
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.to-home-wrap2-circuit:hover {
|
||||
color: #1890ff;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
.form-params-wrap::-webkit-scrollbar {
|
||||
/*滚动条整体样式*/
|
||||
width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
|
||||
height: 5px;
|
||||
}
|
||||
.form-params-wrap::-webkit-scrollbar-thumb {
|
||||
/*滚动条里面小方块*/
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 5px #c4c4c4;
|
||||
background: #dededea6;
|
||||
}
|
||||
.form-params-wrap::-webkit-scrollbar-track {
|
||||
/*滚动条里面轨道*/
|
||||
box-shadow: inset 0 0 5px #f6f6f6;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -155,7 +155,9 @@
|
|||
</el-form-item>
|
||||
|
||||
<el-form-item label="产品PK：" prop="prodKey">
|
||||
<el-input v-if="form.protocolType === 'OFFICIAL'" placeholder="请填写产品PK" v-model="form.prodKey" ></el-input>
|
||||
<el-input
|
||||
v-else
|
||||
v-model="form.prodKey"
|
||||
placeholder="点击选择产品"
|
||||
@focus="openProductTableSelectDialog()"
|
||||
|
|
@ -231,7 +233,8 @@ import {
|
|||
addModel,
|
||||
updateModel,
|
||||
exportModel,
|
||||
listProductList
|
||||
listProductList,
|
||||
listModelType
|
||||
} from "@/api/iot/model";
|
||||
import { listVendor } from "@/api/iot/vendor";
|
||||
import { listDeviceTypeList } from "@/api/iot/device";
|
||||
|
|
@ -243,10 +246,10 @@ const deviceStartsOpt = {
|
|||
1: "启用"
|
||||
};
|
||||
|
||||
const protocolTypeOpt = {
|
||||
IOTOS: "iot平台",
|
||||
ONENET: "ONENET"
|
||||
};
|
||||
// const protocolTypeOpt = {
|
||||
// IOTOS: "iot平台",
|
||||
// ONENET: "ONENET"
|
||||
// };
|
||||
export default {
|
||||
name: "Model",
|
||||
components: {
|
||||
|
|
@ -255,7 +258,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
protocolTypeOpt,
|
||||
protocolTypeOpt: [],
|
||||
selectTableShow: false,
|
||||
tableSelectOption: {},
|
||||
selectResult: {},
|
||||
|
|
@ -312,10 +315,16 @@ export default {
|
|||
};
|
||||
},
|
||||
created() {
|
||||
this.getModelTypeList();
|
||||
this.getDeviceTypeList();
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
getModelTypeList() {
|
||||
listModelType().then(res => {
|
||||
this.protocolTypeOpt = res.data
|
||||
})
|
||||
},
|
||||
sortChange(column) {
|
||||
const sort = {
|
||||
isAsc: column.order === "descending" ? "desc" : "asc",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,802 @@
|
|||
<template>
|
||||
<div class="app-container iot-device">
|
||||
<component :is="componectVal" :sourceId="sourceId"></component>
|
||||
<div v-show="componectVal === ''">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryForm"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
label-width="68px"
|
||||
>
|
||||
|
||||
<el-form-item label="型号名称" prop="modelName">
|
||||
<el-input
|
||||
v-model="queryParams.modelName"
|
||||
placeholder="请输入型号名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="设备名称" prop="deviceName">
|
||||
<el-input
|
||||
v-model="queryParams.deviceName"
|
||||
placeholder="请输入设备名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备状态" prop="deviceState">
|
||||
<el-select
|
||||
v-model="queryParams.deviceState"
|
||||
placeholder="请选择设备状态"
|
||||
@change="handleQuery"
|
||||
clearable
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
:label="keys"
|
||||
v-for="(keys, vals) in deviceStatusOpt"
|
||||
:key="vals"
|
||||
:value="vals"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['iot:device:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="deviceList"
|
||||
:default-sort="{prop: 'createTime', order: 'descending'}"
|
||||
@sort-change="sortChange"
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
label="序号"
|
||||
align="center"
|
||||
:index="indexFormatter"
|
||||
width="80px"
|
||||
></el-table-column>
|
||||
<el-table-column label="设备名称" align="left" prop="deviceName" />
|
||||
<el-table-column label="所属型号" align="left" prop="modelName" />
|
||||
<el-table-column label="设备key" align="left" prop="deviceKey" />
|
||||
<el-table-column label="设备类型" align="left" width="120px" prop="deviceTypeName" />
|
||||
<el-table-column label="设备状态" align="center" width="120" prop="deviceState">
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success" v-if="scope.row.deviceState === 'ONLINE'">在线</el-tag>
|
||||
<el-tag type="danger" v-else-if="scope.row.deviceState === 'OFFLINE'">离线</el-tag>
|
||||
<el-tag type="danger" v-else-if="scope.row.deviceState === 'OUTLINE'">脱线</el-tag>
|
||||
<el-tag type="info" v-else-if="scope.row.deviceState === 'UNACTIVE'">未激活</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
sortable="custom"
|
||||
width="160px"
|
||||
prop="createTime"
|
||||
/>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
width="200px"
|
||||
class-name="small-padding fixed-width"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-search"
|
||||
@click="handleDetails(scope.row)"
|
||||
>详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="to-home-wrap2-circuit" @click="toTableClick" v-show="componectVal !== ''">
|
||||
<el-button icon="el-icon-d-arrow-left" title="返回列表" circle>返回列表</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
listDevice,
|
||||
getDevice,
|
||||
delDevice,
|
||||
addDevice,
|
||||
updateDevice,
|
||||
exportDevice,
|
||||
listDeviceTypeList
|
||||
} from "@/api/iot/device";
|
||||
import { listModel, getModel } from "@/api/iot/model";
|
||||
import SelectTableWrap from "@/components/SelectTable/index";
|
||||
import DetailsWrap from "@/views/profile/DeviceDetailsView/index";
|
||||
import ParamWrap from "@/components/ParamWrap/deviceParam";
|
||||
const deviceStatusOpt = {
|
||||
ONLINE: "在线",
|
||||
OFFLINE: "离线",
|
||||
OUTLINE: "脱线",
|
||||
UNACTIVE: "未激活"
|
||||
};
|
||||
const lineTypeOpt = {
|
||||
MAIN: "总路",
|
||||
BRANCH: "支路"
|
||||
};
|
||||
|
||||
export default {
|
||||
name: "circuitBreaker",
|
||||
components: {
|
||||
SelectTableWrap,
|
||||
DetailsWrap,
|
||||
ParamWrap
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
deviceStatusOpt,
|
||||
lineTypeOpt,
|
||||
sourceId: "",
|
||||
componectVal: "",
|
||||
selectTableShow: false,
|
||||
tableSelectOption: {},
|
||||
selectResult: {},
|
||||
queryModelOpt: [],
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 设备表格数据
|
||||
deviceList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
modelId: null,
|
||||
parentId: null,
|
||||
deviceName: null,
|
||||
deviceState: null,
|
||||
deviceType: null,
|
||||
modelName: null,
|
||||
orderByColumn: "createTime",
|
||||
isAsc: "desc",
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
modelId: [
|
||||
{ required: true, message: "所属型号不能为空", trigger: "blur" }
|
||||
],
|
||||
deviceType: [
|
||||
{ required: true, message: "设备类型不能为空", trigger: "blur" }
|
||||
],
|
||||
parentId: [
|
||||
{ required: true, message: "父设备不能为空", trigger: "blur" }
|
||||
],
|
||||
deviceName: [
|
||||
{ required: true, message: "设备名称不能为空", trigger: "blur" }
|
||||
],
|
||||
lineType: [
|
||||
{ required: true, message: "线路类型不能为空", trigger: "blur" }
|
||||
],
|
||||
deviceKey: [
|
||||
{
|
||||
required: true,
|
||||
validator: this.chenking_deviceKey,
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
},
|
||||
deviceTypeList: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getDeviceTypeList();
|
||||
this.initGetModelList();
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
sortChange(column) {
|
||||
const sort = {
|
||||
isAsc: column.order === "descending" ? "desc" : "asc",
|
||||
orderByColumn: column.prop
|
||||
};
|
||||
this.queryParams = Object.assign(this.queryParams, sort);
|
||||
this.handleQuery();
|
||||
},
|
||||
indexFormatter(val) {
|
||||
return (
|
||||
val + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
|
||||
);
|
||||
},
|
||||
handleDetails(row) {
|
||||
this.sourceId = row.deviceId;
|
||||
this.componectVal = "DetailsWrap";
|
||||
},
|
||||
// 跳转详情页
|
||||
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,
|
||||
pageSize: 99999
|
||||
}).then(response => {
|
||||
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;
|
||||
this.form.parentName = "";
|
||||
} else if (!val) {
|
||||
this.form.parentId = "";
|
||||
this.form.parentName = "";
|
||||
}
|
||||
},
|
||||
// 查询设备类型列表
|
||||
getDeviceTypeList() {
|
||||
listDeviceTypeList().then(response => {
|
||||
this.deviceTypeList = response.data;
|
||||
});
|
||||
},
|
||||
/** 查询设备列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listDevice(Object.assign(this.queryParams , {
|
||||
deviceType: 'GATEWAY_CONTROLLER'
|
||||
})).then(response => {
|
||||
this.deviceList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
modelId: null,
|
||||
modelName: "",
|
||||
parentName: "",
|
||||
parentId: null,
|
||||
deviceName: null,
|
||||
deviceType: null,
|
||||
paramList: [],
|
||||
deviceKey: "",
|
||||
lineType: undefined
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加设备";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const deviceId = row.deviceId || this.ids;
|
||||
const _this = this;
|
||||
getDevice(deviceId).then(response => {
|
||||
_this.form = response.data;
|
||||
_this.open = true;
|
||||
_this.title = "修改设备";
|
||||
setTimeout(() => {
|
||||
_this.$refs.paramWrap.setList(response.data.paramList || []);
|
||||
}, 100);
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.form.paramList = this.$refs.paramWrap.getResult();
|
||||
this.form.lineType =
|
||||
this.form.deviceType === "MINIATURE_BREAKER"
|
||||
? this.form.lineType
|
||||
: undefined;
|
||||
if (this.form.deviceId != null) {
|
||||
updateDevice(this.form).then(response => {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addDevice(this.form).then(response => {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const deviceIds = row.deviceId || this.ids;
|
||||
this.$confirm("是否删除该选项?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
})
|
||||
.then(function() {
|
||||
return delDevice(deviceIds);
|
||||
})
|
||||
.then(() => {
|
||||
this.getList();
|
||||
this.msgSuccess("删除成功");
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
const queryParams = this.queryParams;
|
||||
this.$confirm("是否确认导出所有设备数据项?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
})
|
||||
.then(function() {
|
||||
return exportDevice(queryParams);
|
||||
})
|
||||
.then(response => {
|
||||
this.download(response.msg);
|
||||
});
|
||||
},
|
||||
chenking_deviceKey(rule, value, callback) {
|
||||
const isExp = /^[A-Z a-z 0-9 _ - $]{0,36}$/;
|
||||
if (this.form.deviceKey && !isExp.test(this.form.deviceKey)) {
|
||||
callback(new Error("格式不正确(数字，英文字母大小写，36个字符)！"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.iot-device {
|
||||
.eldialog-wrap {
|
||||
.el-dialog__header {
|
||||
border-bottom: 1px solid #747373;
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 0px;
|
||||
}
|
||||
.el-form {
|
||||
padding: 20px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
.el-dialog__footer {
|
||||
height: 60px;
|
||||
border-top: 1px solid #747373;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
padding-top: 15px;
|
||||
.el-button + .el-button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.el-button {
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
.form-params-wrap {
|
||||
height: 100%;
|
||||
width: calc(100% + 110px);
|
||||
position: relative;
|
||||
top: 15px;
|
||||
left: -90px;
|
||||
max-height: 250px;
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
border: 1px solid #009688;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
.to-home-wrap2-circuit {
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 170px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 100;
|
||||
color: #656363;
|
||||
font-size: 20px;
|
||||
cursor: default;
|
||||
.el-button--medium.is-circle {
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
background: #f26a6a;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
border-radius: 5px;
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.to-home-wrap2-circuit:hover {
|
||||
color: #1890ff;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
.form-params-wrap::-webkit-scrollbar {
|
||||
/*滚动条整体样式*/
|
||||
width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
|
||||
height: 5px;
|
||||
}
|
||||
.form-params-wrap::-webkit-scrollbar-thumb {
|
||||
/*滚动条里面小方块*/
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 5px #c4c4c4;
|
||||
background: #dededea6;
|
||||
}
|
||||
.form-params-wrap::-webkit-scrollbar-track {
|
||||
/*滚动条里面轨道*/
|
||||
box-shadow: inset 0 0 5px #f6f6f6;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
</template>
|
||||
<script>
|
||||
import {
|
||||
listOneselfDevide
|
||||
listDevice
|
||||
} from "@/api/personal/device";
|
||||
import { listDeviceTypeList } from "@/api/tenant/device";
|
||||
const lineTypeOpt = {
|
||||
|
|
@ -128,7 +128,7 @@ export default {
|
|||
getList() {
|
||||
this.loading = true;
|
||||
this.queryParams.parentId = this.sourceId;
|
||||
listOneselfDevide(this.queryParams).then(response => {
|
||||
listDevice(this.queryParams).then(response => {
|
||||
this.deviceList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,433 @@
|
|||
<template>
|
||||
<div class="device-select-nav">
|
||||
<el-card
|
||||
:body-style="{ padding: '0px', width: '220px' }"
|
||||
:style="
|
||||
deviceInfo.deviceId === checkobxDeviceId
|
||||
? 'border: 1px solid #1890ff; margin: 5px; width: 220px; flex-shrink: 0;'
|
||||
: ' margin: 5px; width: 220px; flex-shrink: 0;'
|
||||
"
|
||||
>
|
||||
<div class="nav-p-dev">
|
||||
<!-- <el-radio
|
||||
v-model="checkobxDeviceId"
|
||||
style="margin-right: 10px"
|
||||
:label="deviceInfo.deviceId"
|
||||
>
|
||||
{{
|
||||
deviceInfo.deviceId === checkobxDeviceId ? "已选择" : "未选择"
|
||||
}}</el-radio
|
||||
> -->
|
||||
<div
|
||||
style="
|
||||
height: 25px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
"
|
||||
>
|
||||
<i
|
||||
v-if="deviceInfo.deviceId === checkobxDeviceId"
|
||||
class="el-icon-success"
|
||||
style="
|
||||
font-size: 25px;
|
||||
color: #1890ff;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
z-index: 100;
|
||||
right: 8px;
|
||||
"
|
||||
></i>
|
||||
</div>
|
||||
<div class="dev-info">
|
||||
<span class="dev-info-title" :title="deviceInfo.deviceName">{{
|
||||
deviceInfo.deviceName
|
||||
}}</span>
|
||||
<div class="dev-info-state">
|
||||
<el-tag type="success" v-if="deviceInfo.deviceState === 'ONLINE'"
|
||||
>在线</el-tag
|
||||
>
|
||||
<el-tag
|
||||
type="danger"
|
||||
v-else-if="deviceInfo.deviceState === 'OFFLINE'"
|
||||
>离线</el-tag
|
||||
>
|
||||
<el-tag
|
||||
type="danger"
|
||||
v-else-if="deviceInfo.deviceState === 'OUTLINE'"
|
||||
>脱线</el-tag
|
||||
>
|
||||
<el-tag
|
||||
type="info"
|
||||
v-else-if="deviceInfo.deviceState === 'UNACTIVE'"
|
||||
>未激活</el-tag
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="viewDeviceChange(deviceInfo.deviceId)"
|
||||
>查看</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card
|
||||
:body-style="{ padding: '0px', width: '220px' }"
|
||||
:style="
|
||||
item.deviceId === checkobxDeviceId
|
||||
? 'border: 1px solid #1890ff; margin: 5px; width: 220px; flex-shrink: 0;'
|
||||
: ' margin: 5px; width: 220px; flex-shrink: 0;'
|
||||
"
|
||||
v-for="item in childDeviceList"
|
||||
:key="item.deviceId"
|
||||
>
|
||||
<div class="nav-c-dev">
|
||||
<!-- <el-radio
|
||||
v-model="checkobxDeviceId"
|
||||
:label="item.deviceId"
|
||||
style="margin-right: 10px"
|
||||
>
|
||||
{{ item.deviceId === checkobxDeviceId ? "已选择" : "未选择" }}
|
||||
</el-radio> -->
|
||||
<div
|
||||
style="
|
||||
height: 25px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
"
|
||||
>
|
||||
<i
|
||||
v-if="item.deviceId === checkobxDeviceId"
|
||||
class="el-icon-success"
|
||||
style="
|
||||
font-size: 25px;
|
||||
color: #1890ff;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
z-index: 100;
|
||||
right: 8px;
|
||||
"
|
||||
></i>
|
||||
</div>
|
||||
<div class="dev-info">
|
||||
<span class="dev-info-title" :title="item.deviceName">{{
|
||||
item.deviceName
|
||||
}}</span>
|
||||
<div class="dev-info-state">
|
||||
<el-switch
|
||||
size="mini"
|
||||
v-model="item.switch"
|
||||
active-text="开启"
|
||||
disabled
|
||||
inactive-text="关闭"
|
||||
active-value="1"
|
||||
inactive-value="0"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#dcdfe6"
|
||||
class="switch-wrap"
|
||||
>
|
||||
</el-switch>
|
||||
<el-button
|
||||
size="mini"
|
||||
v-if="item.switch === '1'"
|
||||
@click="submitChildStatus('false', item)"
|
||||
type="success"
|
||||
:disabled="item.deviceId !== checkobxDeviceId"
|
||||
>关闭</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
v-else-if="item.switch === '0'"
|
||||
@click="submitChildStatus('true', item)"
|
||||
type="danger"
|
||||
:disabled="item.deviceId !== checkobxDeviceId"
|
||||
>开启</el-button
|
||||
>
|
||||
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="viewDeviceChange(item.deviceId)"
|
||||
>查看</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listDevice, setSwitchControl } from "@/api/iot/device";
|
||||
import { iotWebSocketBaseUrl } from "@/config/env";
|
||||
export default {
|
||||
name: "DeviceSelectNav",
|
||||
props: {
|
||||
deviceInfo: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
wsDeviceInfo: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
checkobxDeviceId: "",
|
||||
childDeviceList: [],
|
||||
stompClient: null,
|
||||
socket_flag: true,
|
||||
setTimeOut_flag: null,
|
||||
// wsDeviceInfo: null?
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.checkobxDeviceId = this.deviceInfo.deviceId || null;
|
||||
},
|
||||
watch: {
|
||||
wsDeviceInfo: {
|
||||
handler: function () {
|
||||
if (this.deviceInfo.deviceId !== this.wsDeviceInfo.deviceId) {
|
||||
// 更换设备 开启ws
|
||||
this.connection();
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
deviceInfo: {
|
||||
handler: function () {
|
||||
this.checkobxDeviceId = this.deviceInfo.deviceId || null;
|
||||
this.getList();
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// ws 获取子设备 状态
|
||||
connection() {
|
||||
if (this.stompClient) {
|
||||
return;
|
||||
}
|
||||
if (!this.wsDeviceInfo) {
|
||||
return;
|
||||
}
|
||||
if (!iotWebSocketBaseUrl) {
|
||||
return;
|
||||
}
|
||||
let headers = {
|
||||
clientid: this.wsDeviceInfo.wsClientId,
|
||||
username: this.wsDeviceInfo.wsUsername,
|
||||
sign: this.wsDeviceInfo.wsSign,
|
||||
};
|
||||
console.log("connection:--");
|
||||
this.stompClient = new WebSocket(
|
||||
`${iotWebSocketBaseUrl}${headers.clientid}/${headers.username}/${headers.sign}`
|
||||
);
|
||||
this.stompClient.onopen = this.socket_open;
|
||||
this.stompClient.onmessage = this.socket_onmsg;
|
||||
this.stompClient.onclose = this.socket_onclose;
|
||||
},
|
||||
socket_open(evt) {
|
||||
console.log("ws-open:", evt);
|
||||
},
|
||||
socket_onmsg(evt) {
|
||||
this.handlerWsMsgData(JSON.parse(evt.data))
|
||||
},
|
||||
handlerWsMsgData(evt) {
|
||||
console.log('msg:', evt)
|
||||
for(let i =0; i < this.childDeviceList.length; i++) {
|
||||
if (this.childDeviceList[i]['deviceKey'] === evt['devId']) {
|
||||
this.childDeviceList[i]['switch'] = evt['params']['switch'].toString();
|
||||
this.$forceUpdate()
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
socket_onclose(e) {
|
||||
console.log("socket_onclose:--", e, this.stompClient);
|
||||
this.stompClient = null;
|
||||
if (this.socket_flag) {
|
||||
this.socket_flag = false;
|
||||
let this_ = this;
|
||||
this_.setTimeOut_flag = setTimeout(function () {
|
||||
this_.socket_flag = true;
|
||||
this_.connection();
|
||||
}, 10000);
|
||||
}
|
||||
},
|
||||
// 销毁事件
|
||||
closeWebscoket() {
|
||||
if (this.stompClient) {
|
||||
this.stompClient.close();
|
||||
}
|
||||
this.socket_flag = false;
|
||||
this.stompClient = null;
|
||||
clearTimeout(this.setTimeOut_flag);
|
||||
},
|
||||
// 点击子设备 线路开关
|
||||
submitChildStatus(type, row) {
|
||||
this.$prompt("请输入登录密码", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
inputPattern: /^[a-z A-z 0-9 $.]+/,
|
||||
inputErrorMessage: "登录密码不能为空",
|
||||
}).then(({ value }) => {
|
||||
let params = {
|
||||
data: {
|
||||
params: {
|
||||
switch: type === "true" ? 1 : 0,
|
||||
},
|
||||
},
|
||||
deviceId: row.deviceId,
|
||||
verifyKey: value,
|
||||
};
|
||||
console.log(params);
|
||||
setSwitchControl(params).then((res) => {
|
||||
console.log(res);
|
||||
this.msgSuccess("修改成功");
|
||||
});
|
||||
});
|
||||
},
|
||||
// 勾选设备
|
||||
viewDeviceChange(id) {
|
||||
if (this.checkobxDeviceId !== id) {
|
||||
this.checkobxDeviceId = id;
|
||||
// 销毁当前ws
|
||||
this.closeWebscoket();
|
||||
if (this.deviceInfo.deviceId !== id) {
|
||||
// 更换设备 开启ws
|
||||
// this.connection()
|
||||
// let resArr = this.childDeviceList.filter((item) => {
|
||||
// return item.deviceId === id
|
||||
// })
|
||||
// this.wsDeviceInfo = resArr.shift()
|
||||
// this.connection()
|
||||
}
|
||||
this.$emit("changeEvent", { val: id });
|
||||
}
|
||||
},
|
||||
/** 查询设备列表 */
|
||||
getList() {
|
||||
listDevice({
|
||||
parentId: this.deviceInfo.deviceId,
|
||||
}).then((response) => {
|
||||
this.childDeviceList = response.rows;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.device-select-nav {
|
||||
height: 130px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
overflow-y: auto;
|
||||
background-color: #e4eaf3;
|
||||
.nav-p-dev {
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
// padding-top: 10px;
|
||||
flex-shrink: 0;
|
||||
.dev-info {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
.dev-info-title {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
height: 30px;
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.dev-info-state {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-c-dev {
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
// padding-top: 10px;
|
||||
flex-shrink: 0;
|
||||
.dev-info {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
.dev-info-title {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
height: 30px;
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.dev-info-state {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.device-select-nav::-webkit-scrollbar {
|
||||
/*滚动条整体样式*/
|
||||
width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
|
||||
height: 5px;
|
||||
}
|
||||
.device-select-nav::-webkit-scrollbar-thumb {
|
||||
/*滚动条里面小方块*/
|
||||
border-radius: 10px;
|
||||
// box-shadow: inset 0 0 5px #c4c4c4;
|
||||
background: #929292a6;
|
||||
}
|
||||
.device-select-nav::-webkit-scrollbar-track {
|
||||
/*滚动条里面轨道*/
|
||||
// -webkit-box-shadow:
|
||||
box-shadow: inset 0 0 5px #f6f6f6;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,868 @@
|
|||
<template>
|
||||
<div class="iot-circuit-breaker-details-warp">
|
||||
<device-select v-if="pInfo" :deviceInfo="pInfo" :wsDeviceInfo="infoData" @changeEvent="viewDeviceChange($event)"></device-select>
|
||||
<div class="info-tabs-circuit">
|
||||
<div class="breadcrumb-wrap" v-show="breadcrumbList.length > 1">
|
||||
<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>
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
:class="breadcrumbList.length > 1 ? 'children-wrap' : ''"
|
||||
type="border-card"
|
||||
>
|
||||
<el-tab-pane label="运行状态" name="runingState">
|
||||
<div class="tabs-body protocol-wrap">
|
||||
<state-management
|
||||
v-if="devudeRunState"
|
||||
:deviceInfo="infoData"
|
||||
></state-management>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="设备信息" name="info">
|
||||
<div class="tabs-body">
|
||||
<info-wrap :infoData="infoData" @updateInfo="updateInfo($event)" />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="触发器" name="trigger">
|
||||
<div class="tabs-body protocol-wrap">
|
||||
<trigger-wrap :sourceId="infoData.deviceId" :deviceInfo="infoData"></trigger-wrap>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getDevice } from "@/api/iot/device";
|
||||
import InfoWrap from "./info";
|
||||
import StateManagement from "./stateManagement";
|
||||
import DeviceRunStartsWrap from "@/views/profile/DeviceRunStarts/index";
|
||||
import TriggerWrap from "@/views/profile/DeviceTrigger/index";
|
||||
import DeviceSelect from './deviceSelectNav'
|
||||
export default {
|
||||
name: "DetailsWrap",
|
||||
props: ["sourceId"],
|
||||
components: {
|
||||
InfoWrap,
|
||||
StateManagement,
|
||||
DeviceRunStartsWrap,
|
||||
TriggerWrap,
|
||||
DeviceSelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
infoData: {},
|
||||
pInfo: {},
|
||||
activeName: "runingState",
|
||||
breadcrumbList: [],
|
||||
tempType: "bs",
|
||||
deviceId: "",
|
||||
devudeRunState: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.deviceId = this.sourceId;
|
||||
this.deviceInfo();
|
||||
},
|
||||
methods: {
|
||||
viewDeviceChange(row) {
|
||||
this.deviceId = row.val;
|
||||
this.deviceInfo(row.val === this.pInfo.deviceId ? null : 'children')
|
||||
this.devudeRunState = false;
|
||||
},
|
||||
// 设备详情
|
||||
deviceInfo(type) {
|
||||
getDevice(this.deviceId).then(response => {
|
||||
if (!type) {
|
||||
this.pInfo = response.data;
|
||||
}
|
||||
this.infoData = response.data;
|
||||
this.devudeRunState = true;
|
||||
});
|
||||
},
|
||||
toNewDevice(data) {
|
||||
this.tempType = "children";
|
||||
this.deviceId = data.deviceId;
|
||||
this.devudeRunState = false;
|
||||
this.deviceInfo();
|
||||
this.activeName = "runingState";
|
||||
},
|
||||
updateInfo(...data) {
|
||||
this.deviceInfo();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.iot-circuit-breaker-details-warp {
|
||||
.breadcrumb-wrap {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
z-index: 10;
|
||||
left: 20px;
|
||||
width: 90%;
|
||||
overflow: hidden;
|
||||
.breadcrumb-span:hover {
|
||||
color: #1890ff;
|
||||
cursor: default;
|
||||
}
|
||||
.show-wrap {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
.product-release-dialog {
|
||||
.title-i {
|
||||
font-size: 20px;
|
||||
color: #9c9a9a;
|
||||
line-height: 18px;
|
||||
}
|
||||
.i-color {
|
||||
color: rgb(0, 193, 222);
|
||||
}
|
||||
.el-dialog__header {
|
||||
border-bottom: 1px solid rgb(116, 115, 115);
|
||||
}
|
||||
.top-tigs {
|
||||
background: #fbfbfc;
|
||||
border: 1px solid #ecedee;
|
||||
padding: 20px;
|
||||
margin-bottom: 25px;
|
||||
color: #999;
|
||||
}
|
||||
.form-bottom-prod-details {
|
||||
margin-top: 40px;
|
||||
height: 10px;
|
||||
border-top: 1px solid rgb(116, 115, 115);
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
padding-top: 15px;
|
||||
width: calc(100% + 20px);
|
||||
.el-button {
|
||||
margin-right: 10px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
.bottom-div {
|
||||
height: 70px;
|
||||
font-size: 12px;
|
||||
border: 1px solid #ecedee;
|
||||
margin: -1px;
|
||||
}
|
||||
.one-div {
|
||||
width: 15%;
|
||||
float: left;
|
||||
border-right: 1px solid #ecedee;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
/* padding-left: 10px; */
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
|
||||
height: 70px;
|
||||
line-height: 76px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
.two-div {
|
||||
width: calc(100% - 36%);
|
||||
float: left;
|
||||
padding: 22px 10px 10px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.there-div {
|
||||
width: 10%;
|
||||
float: left;
|
||||
padding-top: 28px;
|
||||
}
|
||||
.four-div {
|
||||
width: 5%;
|
||||
float: left;
|
||||
padding-top: 28px;
|
||||
}
|
||||
}
|
||||
.heard {
|
||||
padding: 20px 40px 0;
|
||||
background-color: #fff;
|
||||
height: 112px;
|
||||
padding: 0px;
|
||||
}
|
||||
.info-title {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 16px;
|
||||
line-height: 29px;
|
||||
overflow: hidden;
|
||||
height: 30px;
|
||||
.title {
|
||||
float: left;
|
||||
font-size: 20px;
|
||||
margin: 0 8px 0 0;
|
||||
line-height: 28px;
|
||||
}
|
||||
.el-button--small,
|
||||
.el-button--small.is-round {
|
||||
padding: 8px 15px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.info-icon {
|
||||
margin-top: -70px;
|
||||
float: left;
|
||||
width: 101px;
|
||||
border: 1px dotted rgb(205, 203, 203);
|
||||
height: 101px;
|
||||
.image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
.info-des {
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
float: left;
|
||||
.info-row {
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 20px;
|
||||
white-space: nowrap;
|
||||
.label {
|
||||
color: #aaa;
|
||||
}
|
||||
.centent {
|
||||
color: #999;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-tabs-circuit {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
.el-tabs__content {
|
||||
height: calc(100vh - 341px);
|
||||
overflow: auto;
|
||||
}
|
||||
.el-tabs__header {
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
// top: -10px;
|
||||
.el-tabs__nav-wrap {
|
||||
margin-left: 0px;
|
||||
.el-tabs__item {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-tabs__nav-scroll {
|
||||
height: 65px;
|
||||
padding-top: 25px;
|
||||
padding-left: 15px;
|
||||
background: #e4eaf3;
|
||||
}
|
||||
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
|
||||
background: #fff;
|
||||
color: #333;
|
||||
border: 0;
|
||||
}
|
||||
.el-tabs--border-card > .el-tabs__header .el-tabs__item {
|
||||
// border-color: red;
|
||||
color: #909399;
|
||||
background: #d3deec;
|
||||
border-radius: 8px 8px 0 0;
|
||||
border-bottom: 0;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.tabs-body {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
padding: 0px;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.protocol-wrap {
|
||||
.el-tabs__nav-scroll {
|
||||
height: auto;
|
||||
padding-top: 0;
|
||||
padding-left: 0;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.children-wrap {
|
||||
.el-tabs__header {
|
||||
.el-tabs__nav-scroll {
|
||||
height: 85px;
|
||||
.el-tabs__nav {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.child-table {
|
||||
margin-top: 25px;
|
||||
// margin-left: 20px;
|
||||
margin-right: 0px;
|
||||
padding: 0px;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
.product-release-dialog {
|
||||
.title-i {
|
||||
font-size: 20px;
|
||||
color: #9c9a9a;
|
||||
line-height: 18px;
|
||||
}
|
||||
.i-color {
|
||||
color: rgb(0, 193, 222);
|
||||
}
|
||||
.el-dialog__header {
|
||||
border-bottom: 1px solid rgb(116, 115, 115);
|
||||
}
|
||||
.top-tigs {
|
||||
background: #fbfbfc;
|
||||
border: 1px solid #ecedee;
|
||||
padding: 20px;
|
||||
margin-bottom: 25px;
|
||||
color: #999;
|
||||
}
|
||||
.form-bottom-prod-details {
|
||||
margin-top: 15px;
|
||||
height: 30px;
|
||||
border-top: 1px solid #747373;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
padding-top: 15px;
|
||||
width: calc(100% + 20px);
|
||||
.el-button {
|
||||
margin-right: 10px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
.bottom-div {
|
||||
height: 70px;
|
||||
font-size: 12px;
|
||||
border: 1px solid #ecedee;
|
||||
margin: 0px;
|
||||
}
|
||||
.one-div {
|
||||
width: 15%;
|
||||
float: left;
|
||||
border-right: 1px solid #ecedee;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
/* padding-left: 10px; */
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
|
||||
height: 70px;
|
||||
line-height: 76px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
.two-div {
|
||||
width: calc(100% - 36%);
|
||||
float: left;
|
||||
padding: 22px 10px 10px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.there-div {
|
||||
width: 10%;
|
||||
float: left;
|
||||
padding-top: 28px;
|
||||
}
|
||||
.four-div {
|
||||
width: 5%;
|
||||
float: left;
|
||||
padding-top: 28px;
|
||||
}
|
||||
}
|
||||
.product-detail-info {
|
||||
.el-textarea {
|
||||
width: 92%;
|
||||
}
|
||||
.el-input {
|
||||
width: 92%;
|
||||
}
|
||||
.el-dialog__header {
|
||||
border-bottom: 1px solid rgb(116, 115, 115);
|
||||
}
|
||||
.form-buttons-div {
|
||||
margin-top: 30px;
|
||||
height: 50px;
|
||||
border-top: 1px solid rgb(116, 115, 115);
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
padding-top: 15px;
|
||||
}
|
||||
.question-button.el-button--text {
|
||||
padding-bottom: 0px;
|
||||
color: rgb(204, 204, 204);
|
||||
background: 0 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
font-size: 18px;
|
||||
padding-top: 0px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
.el-form-item--mini.el-form-item,
|
||||
.el-form-item--small.el-form-item {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 60px;
|
||||
}
|
||||
.el-form--label-top .el-form-item__label {
|
||||
padding: 0 0 9px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.el-form-item--mini .el-form-item__content,
|
||||
.el-form-item--mini .el-form-item__label {
|
||||
line-height: 17px;
|
||||
}
|
||||
.avue-input-number,
|
||||
.el-cascader,
|
||||
.el-date-editor.el-input,
|
||||
.el-date-editor.el-input__inner,
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 0px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.form-buttons-div {
|
||||
margin-top: 30px;
|
||||
height: 50px;
|
||||
border-top: 1px solid rgb(116, 115, 115);
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
padding-top: 15px;
|
||||
}
|
||||
}
|
||||
.product-topic-dialog {
|
||||
.top-tips {
|
||||
height: 150px;
|
||||
margin: 20px;
|
||||
margin-top: 30px;
|
||||
margin-right: 0px;
|
||||
border: 1px solid #00c1df;
|
||||
padding: 10px 10px 0;
|
||||
background: #e6f9fc;
|
||||
display: flex;
|
||||
border-radius: 3px;
|
||||
padding-left: 20px;
|
||||
padding-top: 20px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.el-form-item__error {
|
||||
left: 80px;
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 0px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.el-dialog__header {
|
||||
border-bottom: 1px solid rgb(116, 115, 115);
|
||||
}
|
||||
.el-form--label-top .el-form-item__label {
|
||||
padding-top: 23px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: -17px;
|
||||
width: 90%;
|
||||
}
|
||||
.el-form-item--mini .el-form-item__content,
|
||||
.el-form-item--mini .el-form-item__label {
|
||||
padding-left: 40px;
|
||||
}
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
.form-buttonx-div {
|
||||
margin-top: 30px;
|
||||
height: 50px;
|
||||
border-top: 1px solid rgb(116, 115, 115);
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
padding-top: 15px;
|
||||
width: calc(100% + 20px);
|
||||
.el-button {
|
||||
margin-right: 10px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
.funType-div {
|
||||
// margin-left: 40px;
|
||||
}
|
||||
}
|
||||
.product-fun-dialog {
|
||||
.insert-div {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
.el-transfer-panel {
|
||||
// margin-left: 10px;
|
||||
width: 225px;
|
||||
}
|
||||
.el-transfer__buttons {
|
||||
padding: 0px 10px;
|
||||
}
|
||||
.el-textarea {
|
||||
width: 92%;
|
||||
}
|
||||
.el-input {
|
||||
width: 92%;
|
||||
}
|
||||
.question-button.el-button--text {
|
||||
padding-bottom: 0px;
|
||||
color: rgb(204, 204, 204);
|
||||
background: 0 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
font-size: 18px;
|
||||
padding-top: 0px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
.fw {
|
||||
.el-input--mini {
|
||||
width: 155px;
|
||||
}
|
||||
}
|
||||
.el-form-item__error {
|
||||
left: 120px;
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 0px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.el-dialog__header {
|
||||
border-bottom: 1px solid rgb(116, 115, 115);
|
||||
}
|
||||
.el-form--label-top .el-form-item__label {
|
||||
padding-top: 23px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: -17px;
|
||||
width: 92%;
|
||||
}
|
||||
.el-form-item--mini .el-form-item__content,
|
||||
.el-form-item--mini .el-form-item__label {
|
||||
padding-left: 40px;
|
||||
}
|
||||
.form-buttonb-div {
|
||||
margin-top: 30px;
|
||||
height: 50px;
|
||||
border-top: 1px solid rgb(116, 115, 115);
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
padding-top: 15px;
|
||||
width: calc(100% + 20px);
|
||||
.el-button {
|
||||
margin-right: 10px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
.funType-div {
|
||||
// margin-left: 40px;
|
||||
}
|
||||
}
|
||||
.product-custom-fun {
|
||||
.el-textarea {
|
||||
width: 92%;
|
||||
}
|
||||
.el-input {
|
||||
width: 92%;
|
||||
}
|
||||
.question-button.el-button--text {
|
||||
padding-bottom: 0px;
|
||||
color: rgb(204, 204, 204);
|
||||
background: 0 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
font-size: 18px;
|
||||
padding-top: 0px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
.fw {
|
||||
.el-input--mini {
|
||||
width: 155px;
|
||||
}
|
||||
}
|
||||
.el-form-item__error {
|
||||
left: 120px;
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 0px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.el-dialog__header {
|
||||
border-bottom: 1px solid rgb(116, 115, 115);
|
||||
}
|
||||
.el-form--label-top .el-form-item__label {
|
||||
padding-top: 23px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: -17px;
|
||||
width: 92%;
|
||||
}
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
.el-form-item--mini .el-form-item__content,
|
||||
.el-form-item--mini .el-form-item__label {
|
||||
padding-left: 40px;
|
||||
}
|
||||
.form-buttona-div {
|
||||
margin-top: 30px;
|
||||
height: 50px;
|
||||
border-top: 1px solid rgb(116, 115, 115);
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
padding-top: 15px;
|
||||
width: calc(100% + 20px);
|
||||
.el-button {
|
||||
margin-right: 10px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
.funType-div {
|
||||
// margin-left: 40px;
|
||||
}
|
||||
}
|
||||
.product-prop-standard-dialog {
|
||||
.insert-div {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
.el-transfer-panel {
|
||||
// margin-left: 10px;
|
||||
width: 225px;
|
||||
}
|
||||
.el-transfer__buttons {
|
||||
padding: 0px 10px;
|
||||
}
|
||||
.el-textarea {
|
||||
width: 92%;
|
||||
}
|
||||
.el-input {
|
||||
width: 92%;
|
||||
}
|
||||
.question-button.el-button--text {
|
||||
padding-bottom: 0px;
|
||||
color: rgb(204, 204, 204);
|
||||
background: 0 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
font-size: 18px;
|
||||
padding-top: 0px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
.fw {
|
||||
.el-input--mini {
|
||||
width: 155px;
|
||||
}
|
||||
}
|
||||
.el-form-item__error {
|
||||
left: 120px;
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 0px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.el-dialog__header {
|
||||
border-bottom: 1px solid rgb(116, 115, 115);
|
||||
}
|
||||
.el-form--label-top .el-form-item__label {
|
||||
padding-top: 23px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: -17px;
|
||||
width: 92%;
|
||||
}
|
||||
.el-form-item--mini .el-form-item__content,
|
||||
.el-form-item--mini .el-form-item__label {
|
||||
padding-left: 40px;
|
||||
}
|
||||
.form-buttonb-div {
|
||||
margin-top: 30px;
|
||||
height: 50px;
|
||||
border-top: 1px solid rgb(116, 115, 115);
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
padding-top: 15px;
|
||||
width: calc(100% + 20px);
|
||||
.el-button {
|
||||
margin-right: 10px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
.funType-div {
|
||||
// margin-left: 40px;
|
||||
}
|
||||
}
|
||||
.product-prop-custom-dialog {
|
||||
.el-textarea {
|
||||
width: 92%;
|
||||
}
|
||||
.el-input {
|
||||
width: 92%;
|
||||
}
|
||||
.question-button.el-button--text {
|
||||
padding-bottom: 0px;
|
||||
color: rgb(204, 204, 204);
|
||||
background: 0 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
font-size: 18px;
|
||||
padding-top: 0px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
.fw {
|
||||
.el-input--mini {
|
||||
width: 155px;
|
||||
}
|
||||
}
|
||||
.el-form-item__error {
|
||||
left: 120px;
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 0px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.el-dialog__header {
|
||||
border-bottom: 1px solid rgb(116, 115, 115);
|
||||
}
|
||||
.el-form--label-top .el-form-item__label {
|
||||
padding-top: 23px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: -17px;
|
||||
width: 92%;
|
||||
}
|
||||
.el-form-item--mini .el-form-item__content,
|
||||
.el-form-item--mini .el-form-item__label {
|
||||
padding-left: 40px;
|
||||
}
|
||||
.form-buttona-div {
|
||||
margin-top: 30px;
|
||||
height: 50px;
|
||||
border-top: 1px solid rgb(116, 115, 115);
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
padding-top: 15px;
|
||||
width: calc(100% + 20px);
|
||||
.el-button {
|
||||
margin-right: 10px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
.funType-div {
|
||||
// margin-left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.model-function-dialog {
|
||||
.el-textarea {
|
||||
width: 92%;
|
||||
}
|
||||
.el-input {
|
||||
width: 92%;
|
||||
}
|
||||
.question-button.el-button--text {
|
||||
padding-bottom: 0px;
|
||||
color: rgb(204, 204, 204);
|
||||
background: 0 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
font-size: 18px;
|
||||
padding-top: 0px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
.fw {
|
||||
.el-input--mini {
|
||||
width: 155px;
|
||||
}
|
||||
}
|
||||
.el-form-item__error {
|
||||
left: 120px;
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 0px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.el-dialog__header {
|
||||
border-bottom: 1px solid rgb(116, 115, 115);
|
||||
}
|
||||
.el-form--label-top .el-form-item__label {
|
||||
padding-top: 23px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: -17px;
|
||||
width: 92%;
|
||||
}
|
||||
.el-form-item--mini .el-form-item__content,
|
||||
.el-form-item--mini .el-form-item__label {
|
||||
padding-left: 40px;
|
||||
}
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
.form-bottom-prod-details {
|
||||
margin-top: 30px;
|
||||
height: 50px;
|
||||
border-top: 1px solid rgb(116, 115, 115);
|
||||
text-align: right;
|
||||
padding-top: 15px;
|
||||
width: calc(100% + 20px);
|
||||
.el-button {
|
||||
margin-right: 10px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
.funType-div {
|
||||
// margin-left: 40px;
|
||||
}
|
||||
}
|
||||
.sr {
|
||||
.el-form-item {
|
||||
margin-bottom: -17px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.iot-circuit-breaker-details-warp .info-tabs-circuit .el-tabs__content::-webkit-scrollbar {
|
||||
/*滚动条整体样式*/
|
||||
width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
|
||||
height: 3px;
|
||||
}
|
||||
.iot-circuit-breaker-details-warp
|
||||
.info-tabs-circuit
|
||||
.el-tabs__content::-webkit-scrollbar-thumb {
|
||||
/*滚动条里面小方块*/
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 5px #9e9d9d;
|
||||
background: #ffffff;
|
||||
}
|
||||
.iot-circuit-breaker-details-warp
|
||||
.info-tabs-circuit
|
||||
.el-tabs__content::-webkit-scrollbar-track {
|
||||
/*滚动条里面轨道*/
|
||||
box-shadow: inset 0 0 5px #f6f6f6;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,467 @@
|
|||
<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.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 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" style="flex: 3 1 0%;">
|
||||
<div class="title">设备图片</div>
|
||||
<div class="content">--</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加或修改设备对话框 -->
|
||||
<el-dialog
|
||||
class="eldialog-wrap"
|
||||
:close-on-click-modal="false"
|
||||
:title="title"
|
||||
:visible.sync="open"
|
||||
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" @input="inputI" placeholder="选填--设备密码" clearable />
|
||||
</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";
|
||||
export default {
|
||||
name: "DeviceInfo",
|
||||
props: ["infoData"],
|
||||
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>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<div class="state-management-container">
|
||||
<div>
|
||||
<device-run-starts-wrap
|
||||
:sourceId="deviceInfo.deviceId"
|
||||
:deviceInfo="deviceInfo"
|
||||
:prodId="deviceInfo.prodKey"
|
||||
></device-run-starts-wrap>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import DeviceRunStartsWrap from "@/views/profile/DeviceRunStarts/index";
|
||||
import DeviceSelect from './deviceSelectNav'
|
||||
export default {
|
||||
name: "StateManagement",
|
||||
components: {
|
||||
DeviceRunStartsWrap,
|
||||
DeviceSelect
|
||||
},
|
||||
props: {
|
||||
deviceInfo: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -163,7 +163,12 @@ export default {
|
|||
});
|
||||
},
|
||||
closeWebscoket() {
|
||||
if (this.stompClient) {
|
||||
this.stompClient.close();
|
||||
}
|
||||
this.socket_flag = false;
|
||||
this.stompClient = null;
|
||||
clearTimeout(this.setTimeOut_flag);
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,802 @@
|
|||
<template>
|
||||
<div class="app-container iot-device">
|
||||
<component :is="componectVal" :sourceId="sourceId"></component>
|
||||
<div v-show="componectVal === ''">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryForm"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
label-width="68px"
|
||||
>
|
||||
|
||||
<el-form-item label="型号名称" prop="modelName">
|
||||
<el-input
|
||||
v-model="queryParams.modelName"
|
||||
placeholder="请输入型号名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="设备名称" prop="deviceName">
|
||||
<el-input
|
||||
v-model="queryParams.deviceName"
|
||||
placeholder="请输入设备名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备状态" prop="deviceState">
|
||||
<el-select
|
||||
v-model="queryParams.deviceState"
|
||||
placeholder="请选择设备状态"
|
||||
@change="handleQuery"
|
||||
clearable
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
:label="keys"
|
||||
v-for="(keys, vals) in deviceStatusOpt"
|
||||
:key="vals"
|
||||
:value="vals"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['iot:device:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="deviceList"
|
||||
:default-sort="{prop: 'createTime', order: 'descending'}"
|
||||
@sort-change="sortChange"
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
label="序号"
|
||||
align="center"
|
||||
:index="indexFormatter"
|
||||
width="80px"
|
||||
></el-table-column>
|
||||
<el-table-column label="设备名称" align="left" prop="deviceName" />
|
||||
<el-table-column label="所属型号" align="left" prop="modelName" />
|
||||
<el-table-column label="设备key" align="left" prop="deviceKey" />
|
||||
<el-table-column label="设备类型" align="left" width="120px" prop="deviceTypeName" />
|
||||
<el-table-column label="设备状态" align="center" width="120" prop="deviceState">
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success" v-if="scope.row.deviceState === 'ONLINE'">在线</el-tag>
|
||||
<el-tag type="danger" v-else-if="scope.row.deviceState === 'OFFLINE'">离线</el-tag>
|
||||
<el-tag type="danger" v-else-if="scope.row.deviceState === 'OUTLINE'">脱线</el-tag>
|
||||
<el-tag type="info" v-else-if="scope.row.deviceState === 'UNACTIVE'">未激活</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
sortable="custom"
|
||||
width="160px"
|
||||
prop="createTime"
|
||||
/>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
width="200px"
|
||||
class-name="small-padding fixed-width"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-search"
|
||||
@click="handleDetails(scope.row)"
|
||||
>详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="to-home-wrap2-circuit" @click="toTableClick" v-show="componectVal !== ''">
|
||||
<el-button icon="el-icon-d-arrow-left" title="返回列表" circle>返回列表</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
listDevice,
|
||||
getDevice,
|
||||
delDevice,
|
||||
addDevice,
|
||||
updateDevice,
|
||||
exportDevice,
|
||||
listDeviceTypeList
|
||||
} from "@/api/iot/device";
|
||||
import { listModel, getModel } from "@/api/iot/model";
|
||||
import SelectTableWrap from "@/components/SelectTable/index";
|
||||
import DetailsWrap from "@/views/profile/DeviceDetailsView/index";
|
||||
import ParamWrap from "@/components/ParamWrap/deviceParam";
|
||||
const deviceStatusOpt = {
|
||||
ONLINE: "在线",
|
||||
OFFLINE: "离线",
|
||||
OUTLINE: "脱线",
|
||||
UNACTIVE: "未激活"
|
||||
};
|
||||
const lineTypeOpt = {
|
||||
MAIN: "总路",
|
||||
BRANCH: "支路"
|
||||
};
|
||||
|
||||
export default {
|
||||
name: "circuitBreaker",
|
||||
components: {
|
||||
SelectTableWrap,
|
||||
DetailsWrap,
|
||||
ParamWrap
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
deviceStatusOpt,
|
||||
lineTypeOpt,
|
||||
sourceId: "",
|
||||
componectVal: "",
|
||||
selectTableShow: false,
|
||||
tableSelectOption: {},
|
||||
selectResult: {},
|
||||
queryModelOpt: [],
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 设备表格数据
|
||||
deviceList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
modelId: null,
|
||||
parentId: null,
|
||||
deviceName: null,
|
||||
deviceState: null,
|
||||
deviceType: null,
|
||||
modelName: null,
|
||||
orderByColumn: "createTime",
|
||||
isAsc: "desc",
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
modelId: [
|
||||
{ required: true, message: "所属型号不能为空", trigger: "blur" }
|
||||
],
|
||||
deviceType: [
|
||||
{ required: true, message: "设备类型不能为空", trigger: "blur" }
|
||||
],
|
||||
parentId: [
|
||||
{ required: true, message: "父设备不能为空", trigger: "blur" }
|
||||
],
|
||||
deviceName: [
|
||||
{ required: true, message: "设备名称不能为空", trigger: "blur" }
|
||||
],
|
||||
lineType: [
|
||||
{ required: true, message: "线路类型不能为空", trigger: "blur" }
|
||||
],
|
||||
deviceKey: [
|
||||
{
|
||||
required: true,
|
||||
validator: this.chenking_deviceKey,
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
},
|
||||
deviceTypeList: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getDeviceTypeList();
|
||||
this.initGetModelList();
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
sortChange(column) {
|
||||
const sort = {
|
||||
isAsc: column.order === "descending" ? "desc" : "asc",
|
||||
orderByColumn: column.prop
|
||||
};
|
||||
this.queryParams = Object.assign(this.queryParams, sort);
|
||||
this.handleQuery();
|
||||
},
|
||||
indexFormatter(val) {
|
||||
return (
|
||||
val + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
|
||||
);
|
||||
},
|
||||
handleDetails(row) {
|
||||
this.sourceId = row.deviceId;
|
||||
this.componectVal = "DetailsWrap";
|
||||
},
|
||||
// 跳转详情页
|
||||
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,
|
||||
pageSize: 99999
|
||||
}).then(response => {
|
||||
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;
|
||||
this.form.parentName = "";
|
||||
} else if (!val) {
|
||||
this.form.parentId = "";
|
||||
this.form.parentName = "";
|
||||
}
|
||||
},
|
||||
// 查询设备类型列表
|
||||
getDeviceTypeList() {
|
||||
listDeviceTypeList().then(response => {
|
||||
this.deviceTypeList = response.data;
|
||||
});
|
||||
},
|
||||
/** 查询设备列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listDevice(Object.assign(this.queryParams , {
|
||||
deviceType: 'GATEWAY_CONTROLLER'
|
||||
})).then(response => {
|
||||
this.deviceList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
modelId: null,
|
||||
modelName: "",
|
||||
parentName: "",
|
||||
parentId: null,
|
||||
deviceName: null,
|
||||
deviceType: null,
|
||||
paramList: [],
|
||||
deviceKey: "",
|
||||
lineType: undefined
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加设备";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const deviceId = row.deviceId || this.ids;
|
||||
const _this = this;
|
||||
getDevice(deviceId).then(response => {
|
||||
_this.form = response.data;
|
||||
_this.open = true;
|
||||
_this.title = "修改设备";
|
||||
setTimeout(() => {
|
||||
_this.$refs.paramWrap.setList(response.data.paramList || []);
|
||||
}, 100);
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.form.paramList = this.$refs.paramWrap.getResult();
|
||||
this.form.lineType =
|
||||
this.form.deviceType === "MINIATURE_BREAKER"
|
||||
? this.form.lineType
|
||||
: undefined;
|
||||
if (this.form.deviceId != null) {
|
||||
updateDevice(this.form).then(response => {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addDevice(this.form).then(response => {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const deviceIds = row.deviceId || this.ids;
|
||||
this.$confirm("是否删除该选项?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
})
|
||||
.then(function() {
|
||||
return delDevice(deviceIds);
|
||||
})
|
||||
.then(() => {
|
||||
this.getList();
|
||||
this.msgSuccess("删除成功");
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
const queryParams = this.queryParams;
|
||||
this.$confirm("是否确认导出所有设备数据项?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
})
|
||||
.then(function() {
|
||||
return exportDevice(queryParams);
|
||||
})
|
||||
.then(response => {
|
||||
this.download(response.msg);
|
||||
});
|
||||
},
|
||||
chenking_deviceKey(rule, value, callback) {
|
||||
const isExp = /^[A-Z a-z 0-9 _ - $]{0,36}$/;
|
||||
if (this.form.deviceKey && !isExp.test(this.form.deviceKey)) {
|
||||
callback(new Error("格式不正确(数字，英文字母大小写，36个字符)！"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.iot-device {
|
||||
.eldialog-wrap {
|
||||
.el-dialog__header {
|
||||
border-bottom: 1px solid #747373;
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 0px;
|
||||
}
|
||||
.el-form {
|
||||
padding: 20px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
.el-dialog__footer {
|
||||
height: 60px;
|
||||
border-top: 1px solid #747373;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
padding-top: 15px;
|
||||
.el-button + .el-button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.el-button {
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
.form-params-wrap {
|
||||
height: 100%;
|
||||
width: calc(100% + 110px);
|
||||
position: relative;
|
||||
top: 15px;
|
||||
left: -90px;
|
||||
max-height: 250px;
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
border: 1px solid #009688;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
.to-home-wrap2-circuit {
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 170px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 100;
|
||||
color: #656363;
|
||||
font-size: 20px;
|
||||
cursor: default;
|
||||
.el-button--medium.is-circle {
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
background: #f26a6a;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
border-radius: 5px;
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.to-home-wrap2-circuit:hover {
|
||||
color: #1890ff;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
.form-params-wrap::-webkit-scrollbar {
|
||||
/*滚动条整体样式*/
|
||||
width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
|
||||
height: 5px;
|
||||
}
|
||||
.form-params-wrap::-webkit-scrollbar-thumb {
|
||||
/*滚动条里面小方块*/
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 5px #c4c4c4;
|
||||
background: #dededea6;
|
||||
}
|
||||
.form-params-wrap::-webkit-scrollbar-track {
|
||||
/*滚动条里面轨道*/
|
||||
box-shadow: inset 0 0 5px #f6f6f6;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue