树
This commit is contained in:
仲么了
@@ -15,3 +15,11 @@ export function getAreaList() {
|
||||
method: 'POST'
|
||||
})
|
||||
}
|
||||
|
||||
// 设备列表
|
||||
export function getDeviceTree() {
|
||||
return createAxios({
|
||||
url: '/cs-device-boot/csLedger/deviceTree',
|
||||
method: 'POST'
|
||||
})
|
||||
}
|
||||
|
||||
17
src/api/cs-device-boot/EquipmentDelivery.ts
Normal file
17
src/api/cs-device-boot/EquipmentDelivery.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import createAxios from '@/utils/request'
|
||||
|
||||
// 装置基础数据和模板数据
|
||||
export function getDeviceData(deviceId: string, type: string, lineId = '') {
|
||||
let form = new FormData()
|
||||
form.append('deviceId', deviceId)
|
||||
form.append('lineId', lineId)
|
||||
form.append('type', type)
|
||||
return createAxios({
|
||||
url: '/cs-device-boot/EquipmentDelivery/deviceData',
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
data: form
|
||||
})
|
||||
}
|
||||
15
src/api/cs-device-boot/csDataArray.ts
Normal file
15
src/api/cs-device-boot/csDataArray.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import createAxios from '@/utils/request'
|
||||
|
||||
// 根据数据集获取指标数据
|
||||
export function getTargetById(id: string) {
|
||||
let form = new FormData()
|
||||
form.append('id', id)
|
||||
return createAxios({
|
||||
url: '/cs-device-boot/csDataArray/getTargetById',
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
data: form
|
||||
})
|
||||
}
|
||||
15
src/api/cs-device-boot/csGroup.ts
Normal file
15
src/api/cs-device-boot/csGroup.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import createAxios from '@/utils/request'
|
||||
|
||||
// 查询分组
|
||||
export function getGroup(dataSet: string) {
|
||||
let form = new FormData()
|
||||
form.append('dataSet', dataSet)
|
||||
return createAxios({
|
||||
url: '/cs-device-boot/csGroup/getGroup',
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
data: form
|
||||
})
|
||||
}
|
||||
9
src/api/cs-device-boot/csLedger.ts
Normal file
9
src/api/cs-device-boot/csLedger.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import createAxios from '@/utils/request'
|
||||
|
||||
// 设备列表
|
||||
export function getDeviceTree() {
|
||||
return createAxios({
|
||||
url: '/cs-device-boot/csLedger/deviceTree',
|
||||
method: 'POST'
|
||||
})
|
||||
}
|
||||
42
src/api/system-boot/dictTree.ts
Normal file
42
src/api/system-boot/dictTree.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
import createAxios from '@/utils/request'
|
||||
// 字典树接口
|
||||
export function queryByCode(code: string) {
|
||||
let form = new FormData()
|
||||
form.append('code', code)
|
||||
return createAxios({
|
||||
url: '/system-boot/dictTree/queryByCode',
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
data: form
|
||||
})
|
||||
}
|
||||
|
||||
// 字典树接口通过code
|
||||
export function queryCsDictTree(pid: string) {
|
||||
let form = new FormData()
|
||||
form.append('pid', pid)
|
||||
return createAxios({
|
||||
url: '/system-boot/dictTree/query',
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
data: form
|
||||
})
|
||||
}
|
||||
|
||||
// 字典树接口通过id
|
||||
export function queryByid(id: string) {
|
||||
let form = new FormData()
|
||||
form.append('id', id)
|
||||
return createAxios({
|
||||
url: '/system-boot/dictTree/queryByid',
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
data: form
|
||||
})
|
||||
}
|
||||
35
src/components/tree/deviceTree.vue
Normal file
35
src/components/tree/deviceTree.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<Tree :data="tree" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import Tree from './index.vue'
|
||||
import { getDeviceTree } from '@/api/cs-device-boot/csLedger'
|
||||
import { useConfig } from '@/stores/config'
|
||||
defineOptions({
|
||||
name: 'govern/deviceTree'
|
||||
})
|
||||
const config = useConfig()
|
||||
const tree = ref()
|
||||
getDeviceTree().then(res => {
|
||||
let arr: any[] = []
|
||||
res.data.forEach(item => {
|
||||
item.icon = 'el-icon-HomeFilled'
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item.children.forEach(item2 => {
|
||||
item2.icon = 'el-icon-List'
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item2.children.forEach(item3 => {
|
||||
item3.icon = 'el-icon-Platform'
|
||||
item3.color = config.getColorVal('elementUiPrimary')
|
||||
if (item3.comFlag === 1) {
|
||||
item3.color = '#e26257 !important'
|
||||
}
|
||||
arr.push(item3)
|
||||
})
|
||||
})
|
||||
})
|
||||
tree.value = res.data
|
||||
})
|
||||
</script>
|
||||
67
src/components/tree/index.vue
Normal file
67
src/components/tree/index.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div class="cn-tree">
|
||||
<el-input v-model="filterText" placeholder="请输入内容" clearable style="margin-bottom: 10px">
|
||||
<template #prefix>
|
||||
<Icon name="el-icon-Search" style="font-size: 16px" />
|
||||
</template>
|
||||
</el-input>
|
||||
<el-tree
|
||||
style="flex: 1"
|
||||
ref="treeRef"
|
||||
:props="defaultProps"
|
||||
v-bind="$attrs"
|
||||
highlight-current
|
||||
default-expand-all
|
||||
:filter-node-method="filterNode"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span class="custom-tree-node">
|
||||
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }" v-if="data.icon" />
|
||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'govern/tree'
|
||||
})
|
||||
const filterText = ref('')
|
||||
const treeRef = ref()
|
||||
const defaultProps = {
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
watch(filterText, val => {
|
||||
treeRef.value!.filter(val)
|
||||
})
|
||||
const filterNode = (value: string, data: any) => {
|
||||
if (!value) return true
|
||||
return data.name.includes(value)
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.cn-tree {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
width: 280px;
|
||||
:deep(.el-tree) {
|
||||
background: #efeff0;
|
||||
}
|
||||
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
|
||||
background-color: var(--el-color-primary-light-7);
|
||||
}
|
||||
}
|
||||
.custom-tree-node {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@@ -58,219 +58,219 @@ const init = async () => {
|
||||
* 后台初始化请求，获取站点配置，动态路由等信息
|
||||
*/
|
||||
getRouteMenu().then((res: any) => {
|
||||
// const arr = [
|
||||
// {
|
||||
// id: 1,
|
||||
// pid: 0,
|
||||
// type: 'menu',
|
||||
// title: '控制台',
|
||||
// name: 'dashboard',
|
||||
// path: 'dashboard',
|
||||
// icon: 'fa fa-dashboard',
|
||||
// menu_type: 'tab',
|
||||
// url: '',
|
||||
// component: '/src/views/dashboard/index.vue',
|
||||
// keepalive: 'dashboard',
|
||||
// extend: 'none',
|
||||
// children: []
|
||||
// },
|
||||
// {
|
||||
// id: 3,
|
||||
// pid: 0,
|
||||
// type: 'menu',
|
||||
// title: '审计管理',
|
||||
// name: 'test',
|
||||
// path: 'test',
|
||||
// icon: 'el-icon-List',
|
||||
// menu_type: 'tab',
|
||||
// url: '',
|
||||
// component: '/src/views/dashboard/test.vue',
|
||||
// keepalive: 'test',
|
||||
// extend: 'none',
|
||||
// children: [
|
||||
// {
|
||||
// id: 1,
|
||||
// pid: 3,
|
||||
// type: 'menu',
|
||||
// title: '审计列表',
|
||||
// name: 'comptroller/list',
|
||||
// path: 'comptroller/list',
|
||||
// icon: 'el-icon-List',
|
||||
// menu_type: 'tab',
|
||||
// url: '',
|
||||
// component: '/src/views/comptroller/list.vue',
|
||||
// keepalive: 'auth/role',
|
||||
// extend: 'none',
|
||||
// children: []
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// id: 3,
|
||||
// pid: 0,
|
||||
// type: 'menu_dir',
|
||||
// title: '电压暂降',
|
||||
// name: 'voltage/sags',
|
||||
// path: 'voltage/sags',
|
||||
// icon: 'el-icon-BellFilled',
|
||||
// menu_type: 'tab',
|
||||
// url: '',
|
||||
// extend: 'none',
|
||||
// children: [
|
||||
// {
|
||||
// id: 1,
|
||||
// pid: 3,
|
||||
// type: 'menu_dir',
|
||||
// title: '运行管理',
|
||||
// name: 'voltage/sags/operationsManagement',
|
||||
// path: 'voltage/sags/operationsManagement',
|
||||
// icon: 'fa-solid fa-bars-progress',
|
||||
// menu_type: 'tab',
|
||||
// url: '',
|
||||
// extend: 'none',
|
||||
// children: [
|
||||
// {
|
||||
// id: 1,
|
||||
// pid: 3,
|
||||
// type: 'menu',
|
||||
// title: '终端运行管理',
|
||||
// name: 'voltage/sags/operationsManagement/index',
|
||||
// path: 'voltage/sags/operationsManagement/index',
|
||||
// icon: 'fa-solid fa-recycle',
|
||||
// menu_type: 'tab',
|
||||
// url: '',
|
||||
// component: '/src/views/voltage/sags/operationsManagement/index.vue',
|
||||
// keepalive: 'voltage/sags/operationsManagement/index',
|
||||
// extend: 'none',
|
||||
// children: []
|
||||
// },
|
||||
// {
|
||||
// id: 1,
|
||||
// pid: 3,
|
||||
// type: 'menu',
|
||||
// title: '终端运行统计',
|
||||
// name: 'voltage/sags/operationsManagement/statistics',
|
||||
// path: 'voltage/sags/operationsManagement/statistics',
|
||||
// icon: 'fa-solid fa-chart-column',
|
||||
// menu_type: 'tab',
|
||||
// url: '',
|
||||
// component: '/src/views/voltage/sags/operationsManagement/statistics.vue',
|
||||
// keepalive: 'voltage/sags/operationsManagement/statistics',
|
||||
// extend: 'none',
|
||||
// children: []
|
||||
// },
|
||||
// {
|
||||
// id: 1,
|
||||
// pid: 3,
|
||||
// type: 'menu',
|
||||
// title: '监测点台账信息',
|
||||
// name: 'voltage/sags/operationsManagement/point',
|
||||
// path: 'voltage/sags/operationsManagement/point',
|
||||
// icon: 'fa-brands fa-square-pinterest',
|
||||
// menu_type: 'tab',
|
||||
// url: '',
|
||||
// component: '/src/views/voltage/sags/operationsManagement/point.vue',
|
||||
// keepalive: 'voltage/sags/operationsManagement/point',
|
||||
// extend: 'none',
|
||||
// children: []
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// pid: 3,
|
||||
// type: 'menu',
|
||||
// title: '区域',
|
||||
// name: 'Event-boot/Region/distribution',
|
||||
// path: 'Event-boot/Region/distribution',
|
||||
// icon: 'el-icon-Management',
|
||||
// menu_type: 'tab',
|
||||
// url: '',
|
||||
// component: '/src/views/Event-boot/Region/distribution.vue',
|
||||
// keepalive: 'Event-boot/Region/distribution',
|
||||
// extend: 'none',
|
||||
// children: [
|
||||
// {
|
||||
// id: 2,
|
||||
// pid: 3,
|
||||
// type: 'menu',
|
||||
// title: '区域概览',
|
||||
// name: 'Region/overview',
|
||||
// path: 'Region/overview',
|
||||
// icon: 'el-icon-Promotion',
|
||||
// menu_type: 'tab',
|
||||
// url: '',
|
||||
// component: '/src/views/dashboard/index.vue',
|
||||
// keepalive: 'Region/overview',
|
||||
// extend: 'none',
|
||||
// children: []
|
||||
// },
|
||||
// {
|
||||
// id: 1,
|
||||
// pid: 3,
|
||||
// type: 'menu',
|
||||
// title: '监测网分布',
|
||||
// name: 'Region/distribution',
|
||||
// path: 'Region/distribution',
|
||||
// icon: 'el-icon-Share',
|
||||
// menu_type: 'tab',
|
||||
// url: '',
|
||||
// component: '/src/views/Event-boot/Region/distribution.vue',
|
||||
// keepalive: 'Region/distribution',
|
||||
// extend: 'none',
|
||||
// children: []
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// pid: 0,
|
||||
// type: 'menu_dir',
|
||||
// title: '权限管理',
|
||||
// name: 'auth',
|
||||
// path: 'auth',
|
||||
// icon: 'fa-solid fa-layer-group',
|
||||
// menu_type: null,
|
||||
// url: '',
|
||||
// component: '',
|
||||
// keepalive: 0,
|
||||
// extend: 'none',
|
||||
// children: [
|
||||
// {
|
||||
// id: 3,
|
||||
// pid: 2,
|
||||
// type: 'menu',
|
||||
// title: '角色管理',
|
||||
// name: 'auth/role',
|
||||
// path: 'auth/role',
|
||||
// icon: 'el-icon-Avatar',
|
||||
// menu_type: 'tab',
|
||||
// url: '',
|
||||
// component: '/src/views/auth/role/index.vue',
|
||||
// keepalive: 'auth/role',
|
||||
// extend: 'none',
|
||||
// children: []
|
||||
// },
|
||||
// {
|
||||
// id: 13,
|
||||
// pid: 2,
|
||||
// type: 'menu',
|
||||
// title: '菜单规则管理',
|
||||
// name: 'auth/menu',
|
||||
// path: 'auth/menu',
|
||||
// icon: 'el-icon-Menu',
|
||||
// menu_type: 'tab',
|
||||
// url: '',
|
||||
// component: '/src/views/auth/menu/index.vue',
|
||||
// keepalive: 'auth/menu',
|
||||
// extend: 'none',
|
||||
// children: []
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// ]
|
||||
const arr = [
|
||||
{
|
||||
id: 1,
|
||||
pid: 0,
|
||||
type: 'menu',
|
||||
title: '设备管理',
|
||||
name: 'dashboard',
|
||||
path: 'dashboard',
|
||||
icon: 'fa fa-dashboard',
|
||||
menu_type: 'tab',
|
||||
url: '',
|
||||
component: '/src/views/govern/device/manage.vue',
|
||||
keepalive: 'dashboard',
|
||||
extend: 'none',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
pid: 0,
|
||||
type: 'menu',
|
||||
title: '审计管理',
|
||||
name: 'test',
|
||||
path: 'test',
|
||||
icon: 'el-icon-List',
|
||||
menu_type: 'tab',
|
||||
url: '',
|
||||
component: '/src/views/dashboard/test.vue',
|
||||
keepalive: 'test',
|
||||
extend: 'none',
|
||||
children: [
|
||||
{
|
||||
id: 1,
|
||||
pid: 3,
|
||||
type: 'menu',
|
||||
title: '审计列表',
|
||||
name: 'comptroller/list',
|
||||
path: 'comptroller/list',
|
||||
icon: 'el-icon-List',
|
||||
menu_type: 'tab',
|
||||
url: '',
|
||||
component: '/src/views/comptroller/list.vue',
|
||||
keepalive: 'auth/role',
|
||||
extend: 'none',
|
||||
children: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
pid: 0,
|
||||
type: 'menu_dir',
|
||||
title: '电压暂降',
|
||||
name: 'voltage/sags',
|
||||
path: 'voltage/sags',
|
||||
icon: 'el-icon-BellFilled',
|
||||
menu_type: 'tab',
|
||||
url: '',
|
||||
extend: 'none',
|
||||
children: [
|
||||
{
|
||||
id: 1,
|
||||
pid: 3,
|
||||
type: 'menu_dir',
|
||||
title: '运行管理',
|
||||
name: 'voltage/sags/operationsManagement',
|
||||
path: 'voltage/sags/operationsManagement',
|
||||
icon: 'fa-solid fa-bars-progress',
|
||||
menu_type: 'tab',
|
||||
url: '',
|
||||
extend: 'none',
|
||||
children: [
|
||||
{
|
||||
id: 1,
|
||||
pid: 3,
|
||||
type: 'menu',
|
||||
title: '终端运行管理',
|
||||
name: 'voltage/sags/operationsManagement/index',
|
||||
path: 'voltage/sags/operationsManagement/index',
|
||||
icon: 'fa-solid fa-recycle',
|
||||
menu_type: 'tab',
|
||||
url: '',
|
||||
component: '/src/views/voltage/sags/operationsManagement/index.vue',
|
||||
keepalive: 'voltage/sags/operationsManagement/index',
|
||||
extend: 'none',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
pid: 3,
|
||||
type: 'menu',
|
||||
title: '终端运行统计',
|
||||
name: 'voltage/sags/operationsManagement/statistics',
|
||||
path: 'voltage/sags/operationsManagement/statistics',
|
||||
icon: 'fa-solid fa-chart-column',
|
||||
menu_type: 'tab',
|
||||
url: '',
|
||||
component: '/src/views/voltage/sags/operationsManagement/statistics.vue',
|
||||
keepalive: 'voltage/sags/operationsManagement/statistics',
|
||||
extend: 'none',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
pid: 3,
|
||||
type: 'menu',
|
||||
title: '监测点台账信息',
|
||||
name: 'voltage/sags/operationsManagement/point',
|
||||
path: 'voltage/sags/operationsManagement/point',
|
||||
icon: 'fa-brands fa-square-pinterest',
|
||||
menu_type: 'tab',
|
||||
url: '',
|
||||
component: '/src/views/voltage/sags/operationsManagement/point.vue',
|
||||
keepalive: 'voltage/sags/operationsManagement/point',
|
||||
extend: 'none',
|
||||
children: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
pid: 3,
|
||||
type: 'menu',
|
||||
title: '区域',
|
||||
name: 'Event-boot/Region/distribution',
|
||||
path: 'Event-boot/Region/distribution',
|
||||
icon: 'el-icon-Management',
|
||||
menu_type: 'tab',
|
||||
url: '',
|
||||
component: '/src/views/Event-boot/Region/distribution.vue',
|
||||
keepalive: 'Event-boot/Region/distribution',
|
||||
extend: 'none',
|
||||
children: [
|
||||
{
|
||||
id: 2,
|
||||
pid: 3,
|
||||
type: 'menu',
|
||||
title: '区域概览',
|
||||
name: 'Region/overview',
|
||||
path: 'Region/overview',
|
||||
icon: 'el-icon-Promotion',
|
||||
menu_type: 'tab',
|
||||
url: '',
|
||||
component: '/src/views/dashboard/index.vue',
|
||||
keepalive: 'Region/overview',
|
||||
extend: 'none',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
pid: 3,
|
||||
type: 'menu',
|
||||
title: '监测网分布',
|
||||
name: 'Region/distribution',
|
||||
path: 'Region/distribution',
|
||||
icon: 'el-icon-Share',
|
||||
menu_type: 'tab',
|
||||
url: '',
|
||||
component: '/src/views/Event-boot/Region/distribution.vue',
|
||||
keepalive: 'Region/distribution',
|
||||
extend: 'none',
|
||||
children: []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
pid: 0,
|
||||
type: 'menu_dir',
|
||||
title: '权限管理',
|
||||
name: 'auth',
|
||||
path: 'auth',
|
||||
icon: 'fa-solid fa-layer-group',
|
||||
menu_type: null,
|
||||
url: '',
|
||||
component: '',
|
||||
keepalive: 0,
|
||||
extend: 'none',
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
pid: 2,
|
||||
type: 'menu',
|
||||
title: '角色管理',
|
||||
name: 'auth/role',
|
||||
path: 'auth/role',
|
||||
icon: 'el-icon-Avatar',
|
||||
menu_type: 'tab',
|
||||
url: '',
|
||||
component: '/src/views/auth/role/index.vue',
|
||||
keepalive: 'auth/role',
|
||||
extend: 'none',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
pid: 2,
|
||||
type: 'menu',
|
||||
title: '菜单规则管理',
|
||||
name: 'auth/menu',
|
||||
path: 'auth/menu',
|
||||
icon: 'el-icon-Menu',
|
||||
menu_type: 'tab',
|
||||
url: '',
|
||||
component: '/src/views/auth/menu/index.vue',
|
||||
keepalive: 'auth/menu',
|
||||
extend: 'none',
|
||||
children: []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const handlerMenu = (data: any) => {
|
||||
data.forEach((item: any) => {
|
||||
@@ -287,8 +287,8 @@ const init = async () => {
|
||||
}
|
||||
handlerMenu(res.data)
|
||||
// handleAdminRoute(arr)
|
||||
handleAdminRoute(res.data)
|
||||
// handleAdminRoute([...arr, ...res.data])
|
||||
// handleAdminRoute(res.data)
|
||||
handleAdminRoute([...arr, ...res.data])
|
||||
|
||||
// 预跳转到上次路径
|
||||
if (route.params.to) {
|
||||
|
||||
@@ -108,30 +108,30 @@ body,
|
||||
/* 表格-e */
|
||||
|
||||
/* 新增/编辑表单-s */
|
||||
.ba-operate-dialog {
|
||||
.cn-operate-dialog {
|
||||
overflow: hidden;
|
||||
border-radius: var(--el-border-radius-base);
|
||||
}
|
||||
.ba-operate-dialog .el-dialog__header {
|
||||
.cn-operate-dialog .el-dialog__header {
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid var(--ba-bg-color);
|
||||
}
|
||||
.ba-operate-dialog .el-dialog__body {
|
||||
.cn-operate-dialog .el-dialog__body {
|
||||
height: 60vh;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 52px;
|
||||
}
|
||||
.ba-operate-dialog .el-dialog__body .el-scrollbar {
|
||||
.cn-operate-dialog .el-dialog__body .el-scrollbar {
|
||||
padding-right: 60px;
|
||||
}
|
||||
.ba-operate-dialog .el-dialog__footer {
|
||||
.cn-operate-dialog .el-dialog__footer {
|
||||
padding: 10px var(--el-dialog-padding-primary);
|
||||
box-shadow: var(--el-box-shadow);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
.ba-operate-dialog .el-form--inline {
|
||||
.cn-operate-dialog .el-form--inline {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
|
||||
}
|
||||
@@ -228,7 +228,7 @@ body,
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
.ba-operate-dialog {
|
||||
.cn-operate-dialog {
|
||||
width: 96%;
|
||||
}
|
||||
}
|
||||
@@ -238,3 +238,4 @@ body,
|
||||
}
|
||||
}
|
||||
/* 自适应-e */
|
||||
|
||||
|
||||
@@ -28,3 +28,38 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// mt0,mr0,mb0,ml0 --> mt100,mr100,mb100,ml100
|
||||
@for $i from 0 through 100 {
|
||||
.mt#{$i} {
|
||||
margin-top: #{$i}px !important;
|
||||
}
|
||||
|
||||
.mr#{$i} {
|
||||
margin-right: #{$i}px !important;
|
||||
}
|
||||
|
||||
.mb#{$i} {
|
||||
margin-bottom: #{$i}px !important;
|
||||
}
|
||||
|
||||
.ml#{$i} {
|
||||
margin-left: #{$i}px !important;
|
||||
}
|
||||
|
||||
.pt#{$i} {
|
||||
padding-top: #{$i}px !important;
|
||||
}
|
||||
|
||||
.pr#{$i} {
|
||||
padding-right: #{$i}px !important;
|
||||
}
|
||||
|
||||
.pb#{$i} {
|
||||
padding-bottom: #{$i}px !important;
|
||||
}
|
||||
|
||||
.pl#{$i} {
|
||||
padding-left: #{$i}px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<el-dialog class='ba-operate-dialog' v-model='dialogVisible' :title='title'>
|
||||
<el-dialog class='cn-operate-dialog' v-model='dialogVisible' :title='title'>
|
||||
<el-scrollbar>
|
||||
<el-form :inline='false' :model='form' label-width='120px'>
|
||||
<el-form-item label='上级菜单'>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<el-dialog class="ba-operate-dialog" v-model="dialogVisible" :title="title">
|
||||
<el-dialog class="cn-operate-dialog" v-model="dialogVisible" :title="title">
|
||||
<el-scrollbar>
|
||||
<el-form :inline="false" :model="form" label-width="120px">
|
||||
<el-form-item label="上级菜单">
|
||||
|
||||
172
src/views/govern/device/manage.vue
Normal file
172
src/views/govern/device/manage.vue
Normal file
@@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<div class="default-main manage" :style="{ height: pageHeight.height }">
|
||||
<DeviceTree @node-click="nodeClick"></DeviceTree>
|
||||
<div class="manage-right" v-if="deviceData" v-loading="loading">
|
||||
<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 in deviceData.dataSetList"
|
||||
:key="item.id"
|
||||
></el-tab-pane>
|
||||
<div :style="{ height: tableHeight }">
|
||||
<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/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(false)
|
||||
const selectAll = ref(false)
|
||||
const dialogFormVisible = ref(false)
|
||||
const getGroupLoading = ref(false)
|
||||
const newGroupVisible = ref(false)
|
||||
const deviceData = ref<any>(null)
|
||||
const dataSet = ref('')
|
||||
const devTypeOptions = ref([])
|
||||
const devModelOptions = ref([])
|
||||
const tableData = ref([])
|
||||
const tableHeight = mainHeight(230).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 = () => {
|
||||
tableData.value = []
|
||||
getTargetById(dataSet.value).then(res => {
|
||||
tableData.value = res.data
|
||||
})
|
||||
}
|
||||
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(res.data, dataSet.value)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.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>
|
||||
15
src/views/govern/device/managePopup.vue
Normal file
15
src/views/govern/device/managePopup.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<el-dialog class="cn-operate-dialog" v-model="dialogVisible" title="设备模版分组">111</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const popupData = ref<any[]>([])
|
||||
const open = (data: any[]) => {
|
||||
dialogVisible.value = true
|
||||
popupData.value = data
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
Reference in New Issue
Block a user