设备监控
This commit is contained in:
仲么了
179
src/views/govern/device/manage/index.vue
Normal file
179
src/views/govern/device/manage/index.vue
Normal file
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<div class="default-main device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
|
||||
<DeviceTree @node-click="nodeClick" @init="nodeClick"></DeviceTree>
|
||||
<div class="device-manage-right" v-if="deviceData" >
|
||||
<el-descriptions title="设备基本信息" class="mb10" :column="3" border>
|
||||
<template #extra>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-Share"
|
||||
@click="openGroup"
|
||||
size="small"
|
||||
:loading="getGroupLoading"
|
||||
>
|
||||
设备模版分组
|
||||
</el-button>
|
||||
</template>
|
||||
<el-descriptions-item label="名称">
|
||||
{{ deviceData.name }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="类型">
|
||||
{{ echoName(deviceData.devType, devTypeOptions) }}
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="接入方式">
|
||||
{{ deviceData.devAccessMethod }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="识别码">
|
||||
{{ deviceData.ndid }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="型号">
|
||||
{{ echoName(deviceData.devModel, devModelOptions) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="接入时间">
|
||||
{{ deviceData.time }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-tabs v-model="dataSet" type="card" class="device-manage-box-card" @tab-click="handleClick">
|
||||
<el-tab-pane
|
||||
lazy
|
||||
:label="item.name"
|
||||
:name="item.id"
|
||||
v-for="(item,index) in deviceData.dataSetList"
|
||||
:key="index"
|
||||
></el-tab-pane>
|
||||
<div :style="{ height: tableHeight }" v-loading="tableLoading">
|
||||
<vxe-table v-bind="defaultAttribute" :data="tableData" height="auto" style="width: 100%">
|
||||
<vxe-column type="seq" title="序号" width="80"></vxe-column>
|
||||
<vxe-column field="name" title="数据名称"></vxe-column>
|
||||
<vxe-column field="phasic" title="相别"></vxe-column>
|
||||
<vxe-column field="type" title="数据类型"></vxe-column>
|
||||
<vxe-column field="unit" title="单位"></vxe-column>
|
||||
<vxe-column field="startTimes" title="开始次数"></vxe-column>
|
||||
<vxe-column field="endTimes" title="结束次数"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<MangePopup ref="mangePopup" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: 'govern/device/manage'
|
||||
})
|
||||
import MangePopup from './managePopup.vue'
|
||||
import DeviceTree from '@/components/tree/govern/deviceTree.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
|
||||
import { getDeviceData } from '@/api/cs-device-boot/EquipmentDelivery'
|
||||
import { getTargetById } from '@/api/cs-device-boot/csDataArray'
|
||||
import { getGroup } from '@/api/cs-device-boot/csGroup'
|
||||
import { ref, reactive } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
const pageHeight = mainHeight(20)
|
||||
const loading = ref(true)
|
||||
const tableLoading = ref(false)
|
||||
const getGroupLoading = ref(false)
|
||||
const deviceData = ref<any>(null)
|
||||
const dataSet = ref('')
|
||||
const devTypeOptions = ref([])
|
||||
const devModelOptions = ref([])
|
||||
const tableData = ref([])
|
||||
const tableHeight = mainHeight(225).height
|
||||
const mangePopup = ref()
|
||||
const nodeClick = (e: anyObj) => {
|
||||
if (e.level == 2) {
|
||||
loading.value = true
|
||||
getDeviceData(e.id, 'rt').then((res: any) => {
|
||||
deviceData.value = res.data
|
||||
loading.value = false
|
||||
if (res.data.dataSetList.length === 0) {
|
||||
dataSet.value = ''
|
||||
tableData.value = []
|
||||
} else {
|
||||
dataSet.value = res.data.dataSetList[0].id
|
||||
handleClick()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
const handleClick = () => {
|
||||
tableLoading.value = true
|
||||
tableData.value = []
|
||||
setTimeout(() => {
|
||||
getTargetById(dataSet.value).then(res => {
|
||||
tableData.value = res.data
|
||||
tableLoading.value = false
|
||||
})
|
||||
}, 100)
|
||||
}
|
||||
queryByCode('Device_Type').then(res => {
|
||||
queryCsDictTree(res.data.id).then(res => {
|
||||
devTypeOptions.value = res.data.map((item: any) => {
|
||||
return {
|
||||
value: item.id,
|
||||
label: item.name,
|
||||
...item
|
||||
}
|
||||
})
|
||||
})
|
||||
queryByid(res.data.id).then(res => {
|
||||
devModelOptions.value = res.data.map((item: any) => {
|
||||
return {
|
||||
value: item.id,
|
||||
label: item.name,
|
||||
...item
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
const echoName = (value: any, arr: any[]) => {
|
||||
return arr.find(item => item.value == value).label
|
||||
}
|
||||
const openGroup = () => {
|
||||
if (!dataSet.value) {
|
||||
return ElMessage.warning('暂无数据')
|
||||
}
|
||||
getGroupLoading.value = true
|
||||
getGroup(dataSet.value).then((res: any) => {
|
||||
const call = (data: any[]) => {
|
||||
data.forEach(item => {
|
||||
item.label = item.name
|
||||
item.isShow = item.isShow == 1
|
||||
if (item.children && item.children.length > 0) {
|
||||
call(item.children)
|
||||
}
|
||||
})
|
||||
}
|
||||
call(res.data)
|
||||
getGroupLoading.value = false
|
||||
mangePopup.value.open({
|
||||
deviceData: deviceData.value,
|
||||
dataSetName: deviceData.value.dataSetList.filter((item: any) => item.id == dataSet.value)[0]?.name,
|
||||
dataSet: dataSet.value,
|
||||
tree: res.data
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.device-manage {
|
||||
display: flex;
|
||||
|
||||
&-right {
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
padding: 10px 10px 10px 0;
|
||||
.el-descriptions__header {
|
||||
height: 36px;
|
||||
margin-bottom: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
153
src/views/govern/device/manage/popup.vue
Normal file
153
src/views/govern/device/manage/popup.vue
Normal file
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<el-dialog class="cn-operate-dialog device-manage-popup" v-model="dialogVisible" title="设备模版分组">
|
||||
<el-descriptions class="mb10" :column="3" border>
|
||||
<el-descriptions-item label="名称">
|
||||
{{ popupData.deviceData.name }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="识别码">
|
||||
{{ popupData.deviceData.ndid }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-descriptions :title="'数据集名称: ' + popupData.dataSetName" size="small" :column="2" border>
|
||||
<template #extra>
|
||||
<div v-if="newGroupVisible" style="display: flex; align-items: center">
|
||||
<el-input v-model="groupName" autocomplete="off" clearable placeholder="请输入分组名称"></el-input>
|
||||
<el-button class="ml10" ctype="primary" size="small" @click="newGroupVisible = false">取消</el-button>
|
||||
<el-button class="ml10" type="primary" size="small" @click="addNewGroup">完成</el-button>
|
||||
</div>
|
||||
<template v-else>
|
||||
<el-button type="primary" size="small" @click="selectGroup">
|
||||
{{ selectAll ? '取消全选' : '全选' }}
|
||||
</el-button>
|
||||
<el-button type="primary" size="small" @click="newGroupVisible = true">新增分组</el-button>
|
||||
</template>
|
||||
</template>
|
||||
</el-descriptions>
|
||||
<div style="flex: 1; overflow: auto">
|
||||
<el-tree :data="popupData.tree" node-key="id" draggable :allow-drop="allowDrop" :allow-drag="allowDrag">
|
||||
<template #default="{ node, data }">
|
||||
<div class="group-tree-node">
|
||||
<span>{{ node.label }}</span>
|
||||
<div v-if="node.level == 1" style="display: flex; align-items: center">
|
||||
<el-popconfirm :title="'确定删除' + node.label + '吗?'" @confirm="deleteGroup(node)">
|
||||
<template #reference>
|
||||
<Icon name="el-icon-Delete"></Icon>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-checkbox v-model="data.isShow" @click.stop.native="" class="ml5"></el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
<template #footer="">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submit">确 定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { updateGroArr } from '@/api/cs-device-boot/csGroArr'
|
||||
import type Node from 'element-plus/es/components/tree/src/model/node'
|
||||
import type { AllowDropType } from 'element-plus/es/components/tree/src/tree.type'
|
||||
const newGroupVisible = ref(false)
|
||||
const dialogVisible = ref(false)
|
||||
const selectAll = ref(false)
|
||||
const popupData = ref<any>([])
|
||||
const groupName = ref('')
|
||||
const submit = () => {
|
||||
let data = JSON.parse(JSON.stringify(popupData.value.tree))
|
||||
const call = (data: any) => {
|
||||
data.forEach((item: any) => {
|
||||
item.isShow = item.isShow ? 1 : 0
|
||||
delete item.label
|
||||
if (item.children && item.children.length > 0) {
|
||||
call(item.children)
|
||||
}
|
||||
})
|
||||
}
|
||||
call(data)
|
||||
data.forEach((item: any) => {
|
||||
item.children = item.children.map((item: any) => item.id)
|
||||
})
|
||||
updateGroArr({
|
||||
setId: popupData.value.dataSet,
|
||||
data: data
|
||||
}).then((res: any) => {
|
||||
ElMessage.success('保存成功')
|
||||
dialogVisible.value = false
|
||||
})
|
||||
}
|
||||
const deleteGroup = (node: any) => {
|
||||
console.log(node)
|
||||
if (node.data.children && node.data.children.length > 0) {
|
||||
ElMessage.error('该分组下有指标，不能删除')
|
||||
return
|
||||
}
|
||||
let index = popupData.value.tree.findIndex((item: any) => item.id === node.data.id || item.name === node.data.name)
|
||||
popupData.value.tree.splice(index, 1)
|
||||
}
|
||||
const selectGroup = () => {
|
||||
if (selectAll.value) {
|
||||
popupData.value.tree.forEach((item: any) => {
|
||||
item.isShow = false
|
||||
})
|
||||
selectAll.value = false
|
||||
} else {
|
||||
popupData.value.tree.forEach((item: any) => {
|
||||
item.isShow = true
|
||||
})
|
||||
selectAll.value = true
|
||||
}
|
||||
}
|
||||
const addNewGroup = () => {
|
||||
if (groupName.value === '') {
|
||||
ElMessage.warning('请输入分组名称')
|
||||
return
|
||||
}
|
||||
if (popupData.value.tree.some((item: any) => item.name === groupName.value)) {
|
||||
ElMessage.warning('分组名称已存在')
|
||||
|
||||
return
|
||||
}
|
||||
newGroupVisible.value = false
|
||||
popupData.value.tree.splice(0, 0, {
|
||||
id: '',
|
||||
label: groupName.value,
|
||||
name: groupName.value,
|
||||
isShow: true,
|
||||
children: []
|
||||
})
|
||||
groupName.value = ''
|
||||
}
|
||||
const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
|
||||
return (dropNode.level === 2 && type !== 'inner') || (dropNode.level === 1 && type === 'inner')
|
||||
}
|
||||
const allowDrag = (draggingNode: Node) => {
|
||||
return draggingNode.level === 2
|
||||
}
|
||||
const open = (data: any[]) => {
|
||||
dialogVisible.value = true
|
||||
popupData.value = data
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.device-manage-popup {
|
||||
.group-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.el-dialog__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user