提交代码
This commit is contained in:
23688nl
parent
c895df0043
commit
5aadbec9ce
|
|
@ -3,7 +3,7 @@ import request from '@/utils/request'
|
||||||
// 查询报警记录列表
|
// 查询报警记录列表
|
||||||
export function listRecord(query) {
|
export function listRecord(query) {
|
||||||
return request({
|
return request({
|
||||||
url: '/tenant/record/list',
|
url: '/iot/record/list',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: query
|
params: query
|
||||||
})
|
})
|
||||||
|
|
@ -12,7 +12,7 @@ export function listRecord(query) {
|
||||||
// 查询报警记录详细
|
// 查询报警记录详细
|
||||||
export function getRecord(recordId) {
|
export function getRecord(recordId) {
|
||||||
return request({
|
return request({
|
||||||
url: '/tenant/record/' + recordId,
|
url: '/iot/record/' + recordId,
|
||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
@ -29,7 +29,7 @@ export function updateRecord(data) {
|
||||||
// 删除报警记录
|
// 删除报警记录
|
||||||
export function delRecord(recordId) {
|
export function delRecord(recordId) {
|
||||||
return request({
|
return request({
|
||||||
url: '/tenant/record/' + recordId,
|
url: '/iot/record/' + recordId,
|
||||||
method: 'delete'
|
method: 'delete'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
@ -37,7 +37,7 @@ export function delRecord(recordId) {
|
||||||
// 导出报警记录
|
// 导出报警记录
|
||||||
export function exportRecord(query) {
|
export function exportRecord(query) {
|
||||||
return request({
|
return request({
|
||||||
url: '/tenant/record/export',
|
url: '/iot/record/export',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: query
|
params: query
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ import request from '@/utils/request'
|
||||||
// 获取路由
|
// 获取路由
|
||||||
export const getDevcieApp = () => {
|
export const getDevcieApp = () => {
|
||||||
return request({
|
return request({
|
||||||
url: '/app/tenant/appInfo',
|
url: '/app/common/appInfo',
|
||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
@ -11,7 +11,7 @@ export const getDevcieApp = () => {
|
||||||
// 我的设备列表
|
// 我的设备列表
|
||||||
export const getDeviceList = (query) => {
|
export const getDeviceList = (query) => {
|
||||||
return request({
|
return request({
|
||||||
url: '/iot/device/my/list',
|
url: '/iot/device/list',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: query
|
params: query
|
||||||
})
|
})
|
||||||
|
|
@ -20,7 +20,7 @@ export const getDeviceList = (query) => {
|
||||||
// app 警告分析
|
// app 警告分析
|
||||||
export const getWarningAnalysis = (query) => {
|
export const getWarningAnalysis = (query) => {
|
||||||
return request({
|
return request({
|
||||||
url: '/app/tenant/index/warning-analysis',
|
url: '/app/index/warning-analysis',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: query
|
params: query
|
||||||
})
|
})
|
||||||
|
|
@ -29,7 +29,7 @@ export const getWarningAnalysis = (query) => {
|
||||||
// 首页数据
|
// 首页数据
|
||||||
export function homeCount(query) {
|
export function homeCount(query) {
|
||||||
return request({
|
return request({
|
||||||
url: '/app/tenant/index',
|
url: '/app/index',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: query
|
params: query
|
||||||
})
|
})
|
||||||
|
|
@ -38,7 +38,7 @@ export function homeCount(query) {
|
||||||
// app 项目设备
|
// app 项目设备
|
||||||
export function appProjectDeviceList(query) {
|
export function appProjectDeviceList(query) {
|
||||||
return request({
|
return request({
|
||||||
url: '/app/tenant/device/table',
|
url: '/app/device/table',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: query
|
params: query
|
||||||
})
|
})
|
||||||
|
|
@ -47,7 +47,7 @@ export function appProjectDeviceList(query) {
|
||||||
// app 项目列表
|
// app 项目列表
|
||||||
export function appProjectList(query) {
|
export function appProjectList(query) {
|
||||||
return request({
|
return request({
|
||||||
url: '/app/tenant/project/list',
|
url: '/app/project/list',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: query
|
params: query
|
||||||
})
|
})
|
||||||
|
|
@ -56,7 +56,7 @@ export function appProjectList(query) {
|
||||||
// app 告警列表
|
// app 告警列表
|
||||||
export function appAlarmRecordList(query) {
|
export function appAlarmRecordList(query) {
|
||||||
return request({
|
return request({
|
||||||
url: '/app/tenant/alarm/table',
|
url: '/app/alarm/table',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: query
|
params: query
|
||||||
})
|
})
|
||||||
|
|
@ -65,7 +65,7 @@ export function appAlarmRecordList(query) {
|
||||||
// app 模型统计
|
// app 模型统计
|
||||||
export function appDeviceStatistics(query) {
|
export function appDeviceStatistics(query) {
|
||||||
return request({
|
return request({
|
||||||
url: '/app/tenant/index/device-statistics',
|
url: '/app/index/device-statistics',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: query
|
params: query
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@ export function listDevice(query) {
|
||||||
// 查询设备列表
|
// 查询设备列表
|
||||||
export function myListDevice(query) {
|
export function myListDevice(query) {
|
||||||
return request({
|
return request({
|
||||||
url: "/iot/device/my/list",
|
url: "/iot/device/list",
|
||||||
method: "get",
|
method: "get",
|
||||||
params: query
|
params: query
|
||||||
});
|
});
|
||||||
|
|
@ -106,3 +106,12 @@ export function resetPssword(data) {
|
||||||
data: 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
|
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) {
|
export function listRecord(query) {
|
||||||
return request({
|
return request({
|
||||||
url: '/personal/record/list',
|
url: '/iot/record/list',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: query
|
params: query
|
||||||
})
|
})
|
||||||
|
|
@ -12,7 +12,7 @@ export function listRecord(query) {
|
||||||
// 导出报警记录
|
// 导出报警记录
|
||||||
export function exportRecord(query) {
|
export function exportRecord(query) {
|
||||||
return request({
|
return request({
|
||||||
url: '/personal/record/export',
|
url: '/iot/record/export',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: query
|
params: query
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ import request from '@/utils/request'
|
||||||
// 查询项目租户关系详细
|
// 查询项目租户关系详细
|
||||||
export function getOneselfInfo(deviceKey) {
|
export function getOneselfInfo(deviceKey) {
|
||||||
return request({
|
return request({
|
||||||
url: '/personal/device/' + deviceKey,
|
url: '/iot/device/' + deviceKey,
|
||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
@ -11,7 +11,7 @@ export function getOneselfInfo(deviceKey) {
|
||||||
// 查询设备列表
|
// 查询设备列表
|
||||||
export function listDevice(query) {
|
export function listDevice(query) {
|
||||||
return request({
|
return request({
|
||||||
url: "/personal/device/list",
|
url: "/iot/device/list",
|
||||||
method: "get",
|
method: "get",
|
||||||
params: query
|
params: query
|
||||||
});
|
});
|
||||||
|
|
@ -19,7 +19,7 @@ export function listDevice(query) {
|
||||||
// 查询设备详细
|
// 查询设备详细
|
||||||
export function getDevice(deviceId) {
|
export function getDevice(deviceId) {
|
||||||
return request({
|
return request({
|
||||||
url: "/personal/device/" + deviceId,
|
url: "/iot/device/" + deviceId,
|
||||||
method: "get"
|
method: "get"
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -27,7 +27,7 @@ export function getDevice(deviceId) {
|
||||||
// 导出设备
|
// 导出设备
|
||||||
export function exportDevice(query) {
|
export function exportDevice(query) {
|
||||||
return request({
|
return request({
|
||||||
url: "/personal/device/export",
|
url: "/iot/device/export",
|
||||||
method: "get",
|
method: "get",
|
||||||
params: query
|
params: query
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ import request from '@/utils/request'
|
||||||
// 首页数据
|
// 首页数据
|
||||||
export function homeCount(query) {
|
export function homeCount(query) {
|
||||||
return request({
|
return request({
|
||||||
url: '/app/tenant/index',
|
url: '/app/index',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: query
|
params: query
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -148,7 +148,7 @@ export function roleOptionselectList(tenantId) {
|
||||||
// 查询工单处理人列表
|
// 查询工单处理人列表
|
||||||
export function gdListUser(query) {
|
export function gdListUser(query) {
|
||||||
return request({
|
return request({
|
||||||
url: '/app/tenant/maintenance/maintenance-user',
|
url: '/app/maintenance/maintenance-user',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: query
|
params: query
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ import request from "@/utils/request";
|
||||||
// 查询设备列表
|
// 查询设备列表
|
||||||
export function listDevice(query) {
|
export function listDevice(query) {
|
||||||
return request({
|
return request({
|
||||||
url: "/tenant/device/list",
|
url: "/iot/device/list",
|
||||||
method: "get",
|
method: "get",
|
||||||
params: query
|
params: query
|
||||||
});
|
});
|
||||||
|
|
@ -11,7 +11,7 @@ export function listDevice(query) {
|
||||||
// 查询设备详细
|
// 查询设备详细
|
||||||
export function getDevice(deviceId) {
|
export function getDevice(deviceId) {
|
||||||
return request({
|
return request({
|
||||||
url: "/tenant/device/" + deviceId,
|
url: "/iot/device/" + deviceId,
|
||||||
method: "get"
|
method: "get"
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -19,7 +19,7 @@ export function getDevice(deviceId) {
|
||||||
// 导出设备
|
// 导出设备
|
||||||
export function exportDevice(query) {
|
export function exportDevice(query) {
|
||||||
return request({
|
return request({
|
||||||
url: "/tenant/device/export",
|
url: "/iot/device/export",
|
||||||
method: "get",
|
method: "get",
|
||||||
params: query
|
params: query
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ import request from "@/utils/request";
|
||||||
// 查询项目列表
|
// 查询项目列表
|
||||||
export function listProject(query) {
|
export function listProject(query) {
|
||||||
return request({
|
return request({
|
||||||
url: "/tenant/project/list",
|
url: "/iot/project/list",
|
||||||
method: "get",
|
method: "get",
|
||||||
params: query
|
params: query
|
||||||
});
|
});
|
||||||
|
|
@ -29,7 +29,7 @@ export function exportProject(query) {
|
||||||
// 根据项目ID查询项目下所有设备
|
// 根据项目ID查询项目下所有设备
|
||||||
export function listDeviceByProjectId(projectId) {
|
export function listDeviceByProjectId(projectId) {
|
||||||
return request({
|
return request({
|
||||||
url: "/tenant/space_device/device/" + projectId,
|
url: "/iot/space_device/device/" + projectId,
|
||||||
method: "get"
|
method: "get"
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -37,7 +37,7 @@ export function listDeviceByProjectId(projectId) {
|
||||||
// 查询项目空间列表
|
// 查询项目空间列表
|
||||||
export function listSpace(query) {
|
export function listSpace(query) {
|
||||||
return request({
|
return request({
|
||||||
url: "/tenant/space/list",
|
url: "/iot/space/list",
|
||||||
method: "get",
|
method: "get",
|
||||||
params: query
|
params: query
|
||||||
});
|
});
|
||||||
|
|
@ -46,7 +46,7 @@ export function listSpace(query) {
|
||||||
// 查询项目空间详细
|
// 查询项目空间详细
|
||||||
export function getSpace(spaceId) {
|
export function getSpace(spaceId) {
|
||||||
return request({
|
return request({
|
||||||
url: "/tenant/space/" + spaceId,
|
url: "/iot/space/" + spaceId,
|
||||||
method: "get"
|
method: "get"
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -55,7 +55,7 @@ export function getSpace(spaceId) {
|
||||||
// 获取项目空间下拉树列表
|
// 获取项目空间下拉树列表
|
||||||
export function listSpaceTree(query) {
|
export function listSpaceTree(query) {
|
||||||
return request({
|
return request({
|
||||||
url: "/tenant/space/tree-list",
|
url: "/iot/space/tree-list",
|
||||||
method: "get",
|
method: "get",
|
||||||
params: query
|
params: query
|
||||||
});
|
});
|
||||||
|
|
@ -64,7 +64,7 @@ export function listSpaceTree(query) {
|
||||||
// 查询空间设备列表
|
// 查询空间设备列表
|
||||||
export function listSpace_device(query) {
|
export function listSpace_device(query) {
|
||||||
return request({
|
return request({
|
||||||
url: '/tenant/space_device/list',
|
url: '/iot/space_device/list',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: query
|
params: query
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ import request from "@/utils/request";
|
||||||
// 查询项目列表
|
// 查询项目列表
|
||||||
export function listProjectUser(query) {
|
export function listProjectUser(query) {
|
||||||
return request({
|
return request({
|
||||||
url: "/tenant/project_user/list",
|
url: "/iot/project_user/list",
|
||||||
method: "get",
|
method: "get",
|
||||||
params: query
|
params: query
|
||||||
});
|
});
|
||||||
|
|
@ -12,7 +12,7 @@ export function listProjectUser(query) {
|
||||||
// 查询没有被绑定的用户
|
// 查询没有被绑定的用户
|
||||||
export function listProjectNotUsed(query) {
|
export function listProjectNotUsed(query) {
|
||||||
return request({
|
return request({
|
||||||
url: "/tenant/project_user/not-used",
|
url: "/iot/project_user/not-used",
|
||||||
method: "get",
|
method: "get",
|
||||||
params: query
|
params: query
|
||||||
});
|
});
|
||||||
|
|
@ -30,7 +30,7 @@ export function addProjectUser(data) {
|
||||||
// 删除项目用户
|
// 删除项目用户
|
||||||
export function delProjectUser(projectId, userIds) {
|
export function delProjectUser(projectId, userIds) {
|
||||||
return request({
|
return request({
|
||||||
url: "/tenant/project_user/" + projectId + '/' + userIds,
|
url: "/iot/project_user/" + projectId + '/' + userIds,
|
||||||
method: "delete"
|
method: "delete"
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -38,7 +38,7 @@ export function delProjectUser(projectId, userIds) {
|
||||||
// 导出项目用户列表
|
// 导出项目用户列表
|
||||||
export function exportProjectUser(query) {
|
export function exportProjectUser(query) {
|
||||||
return request({
|
return request({
|
||||||
url: "/tenant/project_user/export",
|
url: "/iot/project_user/export",
|
||||||
method: "get",
|
method: "get",
|
||||||
params: query
|
params: query
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -154,7 +154,7 @@ export default {
|
||||||
this.projectList[i].projectLat
|
this.projectList[i].projectLat
|
||||||
],
|
],
|
||||||
// map: this.aMap,
|
// 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)
|
offset: new AMap.Pixel(-13, -30)
|
||||||
});
|
});
|
||||||
var content = [];
|
var content = [];
|
||||||
|
|
@ -173,7 +173,7 @@ export default {
|
||||||
</marquee>
|
</marquee>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-item"><span class="info-lable">报警总数：</span>
|
<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">
|
<div class="alarm-icon-block">
|
||||||
<img class="alarm-icon" src="${infoAlarmIcon}"/>
|
<img class="alarm-icon" src="${infoAlarmIcon}"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -187,11 +187,13 @@ export default {
|
||||||
},
|
},
|
||||||
// 查询项目列表
|
// 查询项目列表
|
||||||
getProjectList() {
|
getProjectList() {
|
||||||
appProjectList({
|
if (this.$store.getters.userType !== 'PERSONAL') {
|
||||||
regionalismId: this.regionalismId
|
appProjectList({
|
||||||
}).then(response => {
|
regionalismId: this.regionalismId
|
||||||
this.projectList = response.data;
|
}).then(response => {
|
||||||
});
|
this.projectList = response.data;
|
||||||
|
});
|
||||||
|
}
|
||||||
},
|
},
|
||||||
// 查询警情信息
|
// 查询警情信息
|
||||||
homeCount() {
|
homeCount() {
|
||||||
|
|
|
||||||
|
|
@ -59,7 +59,7 @@ export default {
|
||||||
{
|
{
|
||||||
guid: "3",
|
guid: "3",
|
||||||
label: "在线设备",
|
label: "在线设备",
|
||||||
valueKeys: "onlineDeviceTotal",
|
valueKeys: "onlineTotal",
|
||||||
image: imgs,
|
image: imgs,
|
||||||
routerKeys: "device"
|
routerKeys: "device"
|
||||||
},
|
},
|
||||||
|
|
@ -120,7 +120,7 @@ export default {
|
||||||
routerPath = "/device_oneself/device_oneself";
|
routerPath = "/device_oneself/device_oneself";
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case "onlineDeviceTotal":
|
case "onlineTotal":
|
||||||
routerPath = "/device/device";
|
routerPath = "/device/device";
|
||||||
if (this.$store.getters.userType === "TENANT") {
|
if (this.$store.getters.userType === "TENANT") {
|
||||||
routerPath = "/device_tenant/device_tenant";
|
routerPath = "/device_tenant/device_tenant";
|
||||||
|
|
|
||||||
|
|
@ -187,11 +187,13 @@ export default {
|
||||||
},
|
},
|
||||||
// 查询项目列表
|
// 查询项目列表
|
||||||
getProjectList() {
|
getProjectList() {
|
||||||
appProjectList({
|
if (this.$store.getters.userType !== 'PERSONAL') {
|
||||||
regionalismId: this.regionalismId
|
appProjectList({
|
||||||
}).then(response => {
|
regionalismId: this.regionalismId
|
||||||
this.projectList = response.data;
|
}).then(response => {
|
||||||
});
|
this.projectList = response.data;
|
||||||
|
});
|
||||||
|
}
|
||||||
},
|
},
|
||||||
// 查询警情信息
|
// 查询警情信息
|
||||||
homeCount() {
|
homeCount() {
|
||||||
|
|
|
||||||
|
|
@ -73,7 +73,7 @@ export default {
|
||||||
{
|
{
|
||||||
guid: "3",
|
guid: "3",
|
||||||
label: "在线设备",
|
label: "在线设备",
|
||||||
valueKeys: "onlineDeviceTotal",
|
valueKeys: "onlineTotal",
|
||||||
image: imgs,
|
image: imgs,
|
||||||
routerKeys: "device",
|
routerKeys: "device",
|
||||||
color: '#00FF06'
|
color: '#00FF06'
|
||||||
|
|
@ -137,7 +137,7 @@ export default {
|
||||||
routerPath = "/device_oneself/device_oneself";
|
routerPath = "/device_oneself/device_oneself";
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case "onlineDeviceTotal":
|
case "onlineTotal":
|
||||||
routerPath = "/device/device";
|
routerPath = "/device/device";
|
||||||
if (this.$store.getters.userType === "TENANT") {
|
if (this.$store.getters.userType === "TENANT") {
|
||||||
routerPath = "/device_tenant/device_tenant";
|
routerPath = "/device_tenant/device_tenant";
|
||||||
|
|
|
||||||
|
|
@ -335,11 +335,11 @@ export default {
|
||||||
getCount() {
|
getCount() {
|
||||||
homeCount().then(response => {
|
homeCount().then(response => {
|
||||||
this.tempObject = {
|
this.tempObject = {
|
||||||
onlineCount: response.data.onlineDeviceTotal,
|
onlineCount: response.data.onlineTotal,
|
||||||
activeCount: response.data.activeCount,
|
activeCount: response.data.activeCount,
|
||||||
deviceCount: response.data.deviceTotal,
|
deviceCount: response.data.deviceTotal,
|
||||||
modelCount: response.data.projectTotal,
|
modelCount: response.data.projectTotal,
|
||||||
offlineCount: (response.data.deviceTotal - response.data.onlineDeviceTotal) || 0
|
offlineCount: (response.data.deviceTotal - response.data.onlineTotal) || 0
|
||||||
}
|
}
|
||||||
this.alarmCount = {
|
this.alarmCount = {
|
||||||
processCount: response.data.processed,
|
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>
|
||||||
|
|
||||||
<el-form-item label="产品PK：" prop="prodKey">
|
<el-form-item label="产品PK：" prop="prodKey">
|
||||||
|
<el-input v-if="form.protocolType === 'OFFICIAL'" placeholder="请填写产品PK" v-model="form.prodKey" ></el-input>
|
||||||
<el-input
|
<el-input
|
||||||
|
v-else
|
||||||
v-model="form.prodKey"
|
v-model="form.prodKey"
|
||||||
placeholder="点击选择产品"
|
placeholder="点击选择产品"
|
||||||
@focus="openProductTableSelectDialog()"
|
@focus="openProductTableSelectDialog()"
|
||||||
|
|
@ -231,7 +233,8 @@ import {
|
||||||
addModel,
|
addModel,
|
||||||
updateModel,
|
updateModel,
|
||||||
exportModel,
|
exportModel,
|
||||||
listProductList
|
listProductList,
|
||||||
|
listModelType
|
||||||
} from "@/api/iot/model";
|
} from "@/api/iot/model";
|
||||||
import { listVendor } from "@/api/iot/vendor";
|
import { listVendor } from "@/api/iot/vendor";
|
||||||
import { listDeviceTypeList } from "@/api/iot/device";
|
import { listDeviceTypeList } from "@/api/iot/device";
|
||||||
|
|
@ -243,10 +246,10 @@ const deviceStartsOpt = {
|
||||||
1: "启用"
|
1: "启用"
|
||||||
};
|
};
|
||||||
|
|
||||||
const protocolTypeOpt = {
|
// const protocolTypeOpt = {
|
||||||
IOTOS: "iot平台",
|
// IOTOS: "iot平台",
|
||||||
ONENET: "ONENET"
|
// ONENET: "ONENET"
|
||||||
};
|
// };
|
||||||
export default {
|
export default {
|
||||||
name: "Model",
|
name: "Model",
|
||||||
components: {
|
components: {
|
||||||
|
|
@ -255,7 +258,7 @@ export default {
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
protocolTypeOpt,
|
protocolTypeOpt: [],
|
||||||
selectTableShow: false,
|
selectTableShow: false,
|
||||||
tableSelectOption: {},
|
tableSelectOption: {},
|
||||||
selectResult: {},
|
selectResult: {},
|
||||||
|
|
@ -312,10 +315,16 @@ export default {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
this.getModelTypeList();
|
||||||
this.getDeviceTypeList();
|
this.getDeviceTypeList();
|
||||||
this.getList();
|
this.getList();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
getModelTypeList() {
|
||||||
|
listModelType().then(res => {
|
||||||
|
this.protocolTypeOpt = res.data
|
||||||
|
})
|
||||||
|
},
|
||||||
sortChange(column) {
|
sortChange(column) {
|
||||||
const sort = {
|
const sort = {
|
||||||
isAsc: column.order === "descending" ? "desc" : "asc",
|
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>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import {
|
import {
|
||||||
listOneselfDevide
|
listDevice
|
||||||
} from "@/api/personal/device";
|
} from "@/api/personal/device";
|
||||||
import { listDeviceTypeList } from "@/api/tenant/device";
|
import { listDeviceTypeList } from "@/api/tenant/device";
|
||||||
const lineTypeOpt = {
|
const lineTypeOpt = {
|
||||||
|
|
@ -128,7 +128,7 @@ export default {
|
||||||
getList() {
|
getList() {
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
this.queryParams.parentId = this.sourceId;
|
this.queryParams.parentId = this.sourceId;
|
||||||
listOneselfDevide(this.queryParams).then(response => {
|
listDevice(this.queryParams).then(response => {
|
||||||
this.deviceList = response.rows;
|
this.deviceList = response.rows;
|
||||||
this.total = response.total;
|
this.total = response.total;
|
||||||
this.loading = false;
|
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() {
|
closeWebscoket() {
|
||||||
|
if (this.stompClient) {
|
||||||
|
this.stompClient.close();
|
||||||
|
}
|
||||||
|
this.socket_flag = false;
|
||||||
this.stompClient = null;
|
this.stompClient = null;
|
||||||
|
clearTimeout(this.setTimeOut_flag);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
destroyed() {
|
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