设备监控
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>
|
||||
Reference in New Issue
Block a user