基础设施左侧列表
This commit is contained in:
851673013@qq.com
parent
93071ea26c
commit
5ebcd9630b
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<div class="wrapper-title-left-tree" :key="showKey">
|
<div class="wrapper-title-left-tree" :key="showKey">
|
||||||
<div v-for="item in treeData" :key="item.key" class="primaryNode">
|
<div v-for="item in treeData" :key="item.id" class="primaryNode">
|
||||||
<!-- <div v-if="!item.children || item.children.length == 0">
|
<!-- <div v-if="!item.children || item.children.length == 0">
|
||||||
{{ item.title }}
|
{{ item.title }}
|
||||||
</div> -->
|
</div> -->
|
||||||
|
|
@ -10,15 +10,15 @@
|
||||||
@click="showBottom(item)"
|
@click="showBottom(item)"
|
||||||
:class="item.show ? 'topSelect' : ''"
|
:class="item.show ? 'topSelect' : ''"
|
||||||
>
|
>
|
||||||
{{ item.title }}
|
{{ item.name }}
|
||||||
<DownOutlined v-show="!item.show" />
|
<DownOutlined v-show="!item.show" />
|
||||||
<UpOutlined v-show="item.show" />
|
<UpOutlined v-show="item.show" />
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom" v-show="item.show">
|
<div class="bottom" v-show="item.show">
|
||||||
<div v-for="val in item.children" :key="val.key" class="item">
|
<div v-for="val in item.children" :key="val.id" class="item">
|
||||||
<div
|
<div
|
||||||
class="up"
|
class="up"
|
||||||
:class="selectId == val.key ? 'select' : ''"
|
:class="selectId == val.id ? 'select' : ''"
|
||||||
@click="showDown(item, val), onSelect(item, val)"
|
@click="showDown(item, val), onSelect(item, val)"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -31,7 +31,7 @@
|
||||||
p-id="2156"
|
p-id="2156"
|
||||||
width="0.25rem"
|
width="0.25rem"
|
||||||
height="0.25rem"
|
height="0.25rem"
|
||||||
v-show="selectId == val.key"
|
v-show="selectId == val.id"
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z"
|
d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z"
|
||||||
|
|
@ -40,10 +40,10 @@
|
||||||
></path>
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
<span class="name">
|
<span class="name">
|
||||||
{{ val.title }}
|
{{ val.name }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<span v-if="item.title !== '区级'">{{ val.total }}</span>
|
<span v-if="item.children.length < 0">{{ val.total }}</span>
|
||||||
<span v-else>
|
<span v-else>
|
||||||
<down-outlined v-show="!val.show" />
|
<down-outlined v-show="!val.show" />
|
||||||
<up-outlined v-show="val.show" />
|
<up-outlined v-show="val.show" />
|
||||||
|
|
@ -52,9 +52,9 @@
|
||||||
<div class="down" v-show="val.show">
|
<div class="down" v-show="val.show">
|
||||||
<div
|
<div
|
||||||
v-for="child in val.children"
|
v-for="child in val.children"
|
||||||
:key="child.key"
|
:key="child.id"
|
||||||
class="child"
|
class="child"
|
||||||
:class="selectId == child.key ? 'select2' : ''"
|
:class="selectId == child.id ? 'select2' : ''"
|
||||||
@click="onSelect(item, val, child)"
|
@click="onSelect(item, val, child)"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -67,7 +67,7 @@
|
||||||
p-id="2156"
|
p-id="2156"
|
||||||
width="0.25rem"
|
width="0.25rem"
|
||||||
height="0.25rem"
|
height="0.25rem"
|
||||||
v-show="selectId == child.key"
|
v-show="selectId == child.id"
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z"
|
d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z"
|
||||||
|
|
@ -76,7 +76,7 @@
|
||||||
></path>
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
<span class="name">
|
<span class="name">
|
||||||
{{ child.title }}
|
{{ child.name }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<span>{{ child.total }}</span>
|
<span>{{ child.total }}</span>
|
||||||
|
|
@ -97,7 +97,7 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { defineComponent, ref, watch } from 'vue'
|
import { defineComponent, ref, watch } from 'vue'
|
||||||
import { selectDeptList } from '@/api/home.js'
|
import { getCameraAllOrgan } from '@/api/videoSurveillance'
|
||||||
import mybus from '@/myplugins/mybus'
|
import mybus from '@/myplugins/mybus'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
|
import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
|
||||||
|
|
@ -127,43 +127,44 @@
|
||||||
'获取url中的select=====================>',
|
'获取url中的select=====================>',
|
||||||
router.currentRoute.value.query.select
|
router.currentRoute.value.query.select
|
||||||
)
|
)
|
||||||
if (
|
if (select == '基础设施') {
|
||||||
// select !== '基础设施' &&
|
getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then(
|
||||||
select !== '数据资源' &&
|
(res) => {
|
||||||
select !== '知识库'
|
treeData.value = res.data.data
|
||||||
) {
|
|
||||||
selectDeptList({ type: select }).then((res) => {
|
|
||||||
// console.log('区划数据=========================>', res.data.data)
|
|
||||||
res.data.data.forEach((val) => {
|
|
||||||
if (val.type !== '全部能力目录') {
|
|
||||||
let obj = {
|
|
||||||
title: val.type,
|
|
||||||
total: val.total,
|
|
||||||
show: val.type === '市级' ? true : false,
|
|
||||||
select: false,
|
|
||||||
key: val.type,
|
|
||||||
children: [],
|
|
||||||
}
|
}
|
||||||
switch (val.type) {
|
)
|
||||||
case '市级':
|
// selectDeptList({ type: select }).then((res) => {
|
||||||
case '其他':
|
// // console.log('区划数据=========================>', res.data.data)
|
||||||
generateChildren(val, obj)
|
// res.data.data.forEach((val) => {
|
||||||
break
|
// if (val.type !== '全部能力目录') {
|
||||||
case '区级':
|
// let obj = {
|
||||||
generateChildren2(val, obj)
|
// title: val.type,
|
||||||
break
|
// total: val.total,
|
||||||
}
|
// show: val.type === '市级' ? true : false,
|
||||||
treeData.value.push(obj)
|
// select: false,
|
||||||
}
|
// key: val.type,
|
||||||
})
|
// children: [],
|
||||||
// 排序
|
// }
|
||||||
const sortArr = ['全部能力目录', '市级', '区级', '企业', '其他']
|
// switch (val.type) {
|
||||||
treeData.value.sort((a, b) => {
|
// case '市级':
|
||||||
return sortArr.indexOf(a.key) - sortArr.indexOf(b.key)
|
// case '其他':
|
||||||
})
|
// generateChildren(val, obj)
|
||||||
console.log('左侧树结构数据======================>', treeData.value)
|
// break
|
||||||
showKey.value++
|
// case '区级':
|
||||||
})
|
// generateChildren2(val, obj)
|
||||||
|
// break
|
||||||
|
// }
|
||||||
|
// treeData.value.push(obj)
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// // 排序
|
||||||
|
// const sortArr = ['全部能力目录', '市级', '区级', '企业', '其他']
|
||||||
|
// treeData.value.sort((a, b) => {
|
||||||
|
// return sortArr.indexOf(a.key) - sortArr.indexOf(b.key)
|
||||||
|
// })
|
||||||
|
// console.log('左侧树结构数据======================>', treeData.value)
|
||||||
|
// showKey.value++
|
||||||
|
// })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
mybus.on('getDeptList', () => {
|
mybus.on('getDeptList', () => {
|
||||||
|
|
@ -241,25 +242,20 @@
|
||||||
// }
|
// }
|
||||||
const selectId = ref('')
|
const selectId = ref('')
|
||||||
const onSelect = (item, val, child) => {
|
const onSelect = (item, val, child) => {
|
||||||
if (item.title === '区级') {
|
console.log('item, val, child', child)
|
||||||
if (child) {
|
getCameraAllOrgan({ parentId: val.id }).then((res) => {
|
||||||
if (selectId.value !== child.key) {
|
treeData.value.map((treeDataItem, index) => {
|
||||||
mybus.emit('paramsGetResources', [child.key])
|
if (item.id == treeDataItem.id) {
|
||||||
selectId.value = child.key
|
treeData.value[index].children.map((childItem, childIndex) => {
|
||||||
} else {
|
if (childItem.id == val.id) {
|
||||||
mybus.emit('paramsGetResources', [])
|
treeData.value[index].children[childIndex].children =
|
||||||
selectId.value = ''
|
res.data.data
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (selectId.value !== val.key) {
|
|
||||||
mybus.emit('paramsGetResources', [val.key])
|
|
||||||
selectId.value = val.key
|
|
||||||
} else {
|
|
||||||
mybus.emit('paramsGetResources', [])
|
|
||||||
selectId.value = ''
|
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
console.log('treeData.value.[index]', treeData.value[index])
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
}
|
}
|
||||||
watch(selectedKeys, () => {
|
watch(selectedKeys, () => {
|
||||||
console.log('selectedKeys', selectedKeys)
|
console.log('selectedKeys', selectedKeys)
|
||||||
|
|
@ -305,10 +301,18 @@
|
||||||
}
|
}
|
||||||
const showBottom = (item) => {
|
const showBottom = (item) => {
|
||||||
item.show = !item.show
|
item.show = !item.show
|
||||||
|
getCameraAllOrgan({ parentId: item.id }).then((res) => {
|
||||||
|
treeData.value.map((treeDataItem, index) => {
|
||||||
|
if (item.id == treeDataItem.id) {
|
||||||
|
treeData.value[index].children = res.data.data
|
||||||
|
console.log('treeData.value.[index]', treeData.value[index])
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
}
|
}
|
||||||
const showDown = (item, val) => {
|
const showDown = (item, val) => {
|
||||||
console.log('showDown', val)
|
console.log('showDown', val)
|
||||||
if (item.title === '区级') {
|
if (item.children) {
|
||||||
val.show = !val.show
|
val.show = !val.show
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue