基础设施-左侧
This commit is contained in:
gaoyuanwei
parent
f2671b729d
commit
4fba819602
|
|
@ -3,9 +3,12 @@
|
||||||
|
|
||||||
<div class="details-pageconetent" v-if="whoShow1 && whoShow1.itShowQingDao">
|
<div class="details-pageconetent" v-if="whoShow1 && whoShow1.itShowQingDao">
|
||||||
<home-header></home-header>
|
<home-header></home-header>
|
||||||
<div class="details-pageconetent-left">
|
<div class="details-pageconetent-left" v-if="Cardsname != '基础设施'">
|
||||||
<detailsPageconetentTree />
|
<detailsPageconetentTree />
|
||||||
</div>
|
</div>
|
||||||
|
<div class="details-pageconetent-left" v-else>
|
||||||
|
<detailsPageInfrastructureTree />
|
||||||
|
</div>
|
||||||
<div class="top" v-if="Cardsname != '知识库' && Cardsname != '基础设施'">
|
<div class="top" v-if="Cardsname != '知识库' && Cardsname != '基础设施'">
|
||||||
<div class="top-title">
|
<div class="top-title">
|
||||||
<div
|
<div
|
||||||
|
|
@ -681,6 +684,7 @@
|
||||||
import DetailsPageResource from '@/views/home/components/DetailsPageResource.vue'
|
import DetailsPageResource from '@/views/home/components/DetailsPageResource.vue'
|
||||||
// 基础设施引用
|
// 基础设施引用
|
||||||
import InfrastructurePage from './infrastructurePage.vue'
|
import InfrastructurePage from './infrastructurePage.vue'
|
||||||
|
import detailsPageInfrastructureTree from './detailsPageInfrastructureTree.vue'
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
setup() {
|
setup() {
|
||||||
// const store = useStore()
|
// const store = useStore()
|
||||||
|
|
@ -1319,6 +1323,7 @@
|
||||||
// VideoSurveillance,
|
// VideoSurveillance,
|
||||||
DetailsPageResource,
|
DetailsPageResource,
|
||||||
InfrastructurePage,
|
InfrastructurePage,
|
||||||
|
detailsPageInfrastructureTree,
|
||||||
},
|
},
|
||||||
beforeUnmount() {
|
beforeUnmount() {
|
||||||
mybus.off('selectCardsitem')
|
mybus.off('selectCardsitem')
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,518 @@
|
||||||
|
<template>
|
||||||
|
<div class="wrapper">
|
||||||
|
<div class="wrapper-title-left-tree" :key="showKey">
|
||||||
|
<div v-for="item in treeData" :key="item.key" class="primaryNode">
|
||||||
|
<!-- <div v-if="!item.children || item.children.length == 0">
|
||||||
|
{{ item.title }}
|
||||||
|
</div> -->
|
||||||
|
<div
|
||||||
|
class="top"
|
||||||
|
@click="showBottom(item)"
|
||||||
|
:class="item.show ? 'topSelect' : ''"
|
||||||
|
>
|
||||||
|
{{ item.title }}
|
||||||
|
<DownOutlined v-show="!item.show" />
|
||||||
|
<UpOutlined v-show="item.show" />
|
||||||
|
</div>
|
||||||
|
<div class="bottom" v-show="item.show">
|
||||||
|
<div v-for="val in item.children" :key="val.key" class="item">
|
||||||
|
<div
|
||||||
|
class="up"
|
||||||
|
:class="selectId == val.key ? 'select' : ''"
|
||||||
|
@click="showDown(item, val), onSelect(item, val)"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<svg
|
||||||
|
t="1654068878091"
|
||||||
|
class="icon"
|
||||||
|
viewBox="0 0 1024 1024"
|
||||||
|
version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
p-id="2156"
|
||||||
|
width="0.25rem"
|
||||||
|
height="0.25rem"
|
||||||
|
v-show="selectId == val.key"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z"
|
||||||
|
p-id="2157"
|
||||||
|
fill="#0058e1"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
<span class="name">
|
||||||
|
{{ val.title }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span v-if="item.title !== '区级'">{{ val.total }}</span>
|
||||||
|
<span v-else>
|
||||||
|
<down-outlined v-show="!val.show" />
|
||||||
|
<up-outlined v-show="val.show" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="down" v-show="val.show">
|
||||||
|
<div
|
||||||
|
v-for="child in val.children"
|
||||||
|
:key="child.key"
|
||||||
|
class="child"
|
||||||
|
:class="selectId == child.key ? 'select2' : ''"
|
||||||
|
@click="onSelect(item, val, child)"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<svg
|
||||||
|
t="1654068878091"
|
||||||
|
class="icon"
|
||||||
|
viewBox="0 0 1024 1024"
|
||||||
|
version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
p-id="2156"
|
||||||
|
width="0.25rem"
|
||||||
|
height="0.25rem"
|
||||||
|
v-show="selectId == child.key"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z"
|
||||||
|
p-id="2157"
|
||||||
|
fill="#0058e1"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
<span class="name">
|
||||||
|
{{ child.title }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span>{{ child.total }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <a-directory-tree
|
||||||
|
class="draggable-tree"
|
||||||
|
block-node
|
||||||
|
:tree-data="treeData"
|
||||||
|
@select="onSelect"
|
||||||
|
></a-directory-tree> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { defineComponent, ref, watch } from 'vue'
|
||||||
|
import { selectDeptList } from '@/api/home.js'
|
||||||
|
import mybus from '@/myplugins/mybus'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
|
||||||
|
export default defineComponent({
|
||||||
|
setup() {
|
||||||
|
const selectedKeys = ref([])
|
||||||
|
const checkedKeys = ref([])
|
||||||
|
const router = useRouter()
|
||||||
|
const fieldNames = {
|
||||||
|
children: 'children',
|
||||||
|
title: 'name',
|
||||||
|
}
|
||||||
|
const showKey = ref(0)
|
||||||
|
const treeData = ref([])
|
||||||
|
const init = () => {
|
||||||
|
treeData.value = []
|
||||||
|
console.log(
|
||||||
|
'router.currentRoute.value.query.select',
|
||||||
|
router.currentRoute.value.query.select
|
||||||
|
)
|
||||||
|
let select = router.currentRoute.value.query.select
|
||||||
|
if (select === '123') {
|
||||||
|
select = ''
|
||||||
|
}
|
||||||
|
// debugger
|
||||||
|
console.log(
|
||||||
|
'获取url中的select=====================>',
|
||||||
|
router.currentRoute.value.query.select
|
||||||
|
)
|
||||||
|
if (
|
||||||
|
// select !== '基础设施' &&
|
||||||
|
select !== '数据资源' &&
|
||||||
|
select !== '知识库'
|
||||||
|
) {
|
||||||
|
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 '市级':
|
||||||
|
case '其他':
|
||||||
|
generateChildren(val, obj)
|
||||||
|
break
|
||||||
|
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', () => {
|
||||||
|
init()
|
||||||
|
})
|
||||||
|
// 生成children
|
||||||
|
const generateChildren = (val, obj) => {
|
||||||
|
if (val.dataList.length > 0) {
|
||||||
|
val.dataList.forEach((child) => {
|
||||||
|
let children = {
|
||||||
|
title: child.deptName,
|
||||||
|
show: false,
|
||||||
|
select: false,
|
||||||
|
total: child.deptCount,
|
||||||
|
key: child.deptId,
|
||||||
|
}
|
||||||
|
obj.children.push(children)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 区级特殊处理
|
||||||
|
const generateChildren2 = (val, obj) => {
|
||||||
|
if (val.dataList.length > 0) {
|
||||||
|
val.dataList.forEach((dis) => {
|
||||||
|
let children = {
|
||||||
|
title: dis.type,
|
||||||
|
total: dis.total,
|
||||||
|
show: false,
|
||||||
|
select: false,
|
||||||
|
key: dis.dataList[0].districtId,
|
||||||
|
children: [],
|
||||||
|
}
|
||||||
|
if (dis.dataList.length > 0) {
|
||||||
|
dis.dataList.forEach((child) => {
|
||||||
|
let children2 = {
|
||||||
|
title: child.deptName,
|
||||||
|
total: child.deptCount,
|
||||||
|
show: false,
|
||||||
|
select: false,
|
||||||
|
key: child.deptId,
|
||||||
|
}
|
||||||
|
children.children.push(children2)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
obj.children.push(children)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// const onSelect = (event, node, dragNode, dragNodesKeys) => {
|
||||||
|
// console.log(event[0], node.node.children, dragNode, dragNodesKeys)
|
||||||
|
// if (!node.node.children) {
|
||||||
|
// mybus.emit('paramsGetResources', [event[0]])
|
||||||
|
// } else {
|
||||||
|
// let arr = []
|
||||||
|
// switch (event[0]) {
|
||||||
|
// case '全部能力目录':
|
||||||
|
// mybus.emit('paramsGetResources', [])
|
||||||
|
// break
|
||||||
|
// case '区级':
|
||||||
|
// node.node.children.forEach((dis) => {
|
||||||
|
// dis.children.forEach((val) => {
|
||||||
|
// arr.push(val.key)
|
||||||
|
// })
|
||||||
|
// })
|
||||||
|
// mybus.emit('paramsGetResources', arr)
|
||||||
|
// break
|
||||||
|
// default:
|
||||||
|
// node.node.children.forEach((val) => {
|
||||||
|
// arr.push(val.key)
|
||||||
|
// })
|
||||||
|
// mybus.emit('paramsGetResources', arr)
|
||||||
|
// break
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
const selectId = ref('')
|
||||||
|
const onSelect = (item, val, child) => {
|
||||||
|
if (item.title === '区级') {
|
||||||
|
if (child) {
|
||||||
|
if (selectId.value !== child.key) {
|
||||||
|
mybus.emit('paramsGetResources', [child.key])
|
||||||
|
selectId.value = child.key
|
||||||
|
} else {
|
||||||
|
mybus.emit('paramsGetResources', [])
|
||||||
|
selectId.value = ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (selectId.value !== val.key) {
|
||||||
|
mybus.emit('paramsGetResources', [val.key])
|
||||||
|
selectId.value = val.key
|
||||||
|
} else {
|
||||||
|
mybus.emit('paramsGetResources', [])
|
||||||
|
selectId.value = ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
watch(selectedKeys, () => {
|
||||||
|
console.log('selectedKeys', selectedKeys)
|
||||||
|
})
|
||||||
|
watch(checkedKeys, (val) => {
|
||||||
|
if (val.checked.length > 1) {
|
||||||
|
val.checked.halfChecked = val.checked.shift()
|
||||||
|
}
|
||||||
|
console.log('onCheck', val)
|
||||||
|
})
|
||||||
|
const value = ref('')
|
||||||
|
const onSearch = (searchValue) => {
|
||||||
|
console.log('use value', searchValue)
|
||||||
|
console.log('or use this.value', value.value.child)
|
||||||
|
}
|
||||||
|
// checkedKeys, checkedNodes, node, event
|
||||||
|
function xuanzeshijian(checkedKeys) {
|
||||||
|
checkedKeys.value.checked = []
|
||||||
|
checkedKeys.value.checked[0] =
|
||||||
|
checkedKeys.checked[checkedKeys.checked.length - 1]
|
||||||
|
// console.log('checkedKeys1', checkedNodes)
|
||||||
|
console.log('checkedKeys', checkedKeys)
|
||||||
|
}
|
||||||
|
let quxiaoshijian = ''
|
||||||
|
function dianjisousuo(selectedKeys, selectedNodes, node, event) {
|
||||||
|
if (quxiaoshijian == selectedNodes.node.id) {
|
||||||
|
quxiaoshijian = ''
|
||||||
|
mybus.emit('paramsGetResources', quxiaoshijian)
|
||||||
|
} else {
|
||||||
|
quxiaoshijian = selectedNodes.node.id
|
||||||
|
mybus.emit('paramsGetResources', selectedNodes.node.id.trim())
|
||||||
|
}
|
||||||
|
console.log(
|
||||||
|
'dianjisousuo',
|
||||||
|
selectedKeys,
|
||||||
|
'dianjisousuo',
|
||||||
|
selectedNodes,
|
||||||
|
'dianjisousuo',
|
||||||
|
node,
|
||||||
|
'dianjisousuo',
|
||||||
|
event
|
||||||
|
)
|
||||||
|
}
|
||||||
|
const showBottom = (item) => {
|
||||||
|
item.show = !item.show
|
||||||
|
}
|
||||||
|
const showDown = (item, val) => {
|
||||||
|
console.log('showDown', val)
|
||||||
|
if (item.title === '区级') {
|
||||||
|
val.show = !val.show
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
value,
|
||||||
|
onSearch,
|
||||||
|
selectedKeys,
|
||||||
|
checkedKeys,
|
||||||
|
fieldNames,
|
||||||
|
treeData,
|
||||||
|
dianjisousuo,
|
||||||
|
quxiaoshijian,
|
||||||
|
xuanzeshijian,
|
||||||
|
showKey,
|
||||||
|
onSelect,
|
||||||
|
showBottom,
|
||||||
|
showDown,
|
||||||
|
selectId,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeUnmount() {
|
||||||
|
mybus.off('getDeptList')
|
||||||
|
console.log('getDeptList销毁~~~~~~~~~~~~~~~~~~~')
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
UpOutlined,
|
||||||
|
DownOutlined,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
// .wrapper {
|
||||||
|
// height: 100%;
|
||||||
|
// width: 100%;
|
||||||
|
// padding: .2rem;
|
||||||
|
// .wrapper-title {
|
||||||
|
// height: .28rem;
|
||||||
|
// width: 100%;
|
||||||
|
// margin-bottom: .25rem;
|
||||||
|
// .wrapper-title-name {
|
||||||
|
// width: 100%;
|
||||||
|
// height: .17rem;
|
||||||
|
// font-size: .18rem;
|
||||||
|
// font-family: 'AlibabaPuHuiTiR';
|
||||||
|
// font-weight: 400;
|
||||||
|
// color: #0058e1;
|
||||||
|
// line-height: .34rem;
|
||||||
|
// }
|
||||||
|
// .wrapper-title-yangshi {
|
||||||
|
// width: .4rem;
|
||||||
|
// height: .03rem;
|
||||||
|
// background: #0058e1;
|
||||||
|
// border-radius: .02rem;
|
||||||
|
// margin-top: .2rem;
|
||||||
|
// margin-left: .15rem;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// .wrapper-title-left-tree {
|
||||||
|
// overflow-y: auto;
|
||||||
|
// height: 80%;
|
||||||
|
// width: 2.1rem;
|
||||||
|
// }
|
||||||
|
// .wrapper-title-left-tree::-webkit-scrollbar {
|
||||||
|
// width: .05rem;
|
||||||
|
// height: .05rem;
|
||||||
|
// }
|
||||||
|
// .wrapper-title-left-tree::-webkit-scrollbar-thumb {
|
||||||
|
// border-radius: .05rem;
|
||||||
|
// background-color: #0058e1;
|
||||||
|
// }
|
||||||
|
// .wrapper-title-left-tree::-webkit-scrollbar-track {
|
||||||
|
// background-color: transparent;
|
||||||
|
// }
|
||||||
|
// :deep(.ant-tree-treenode) {
|
||||||
|
// margin-top: .1rem;
|
||||||
|
// height: .23rem;
|
||||||
|
// overflow: hidden;
|
||||||
|
// text-overflow: ellipsis;
|
||||||
|
// display: -webkit-box;
|
||||||
|
// -webkit-line-clamp: 1;
|
||||||
|
// -webkit-box-orient: vertical;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
.primaryNode {
|
||||||
|
.top {
|
||||||
|
width: 100%;
|
||||||
|
height: 0.4rem;
|
||||||
|
background: rgba(0, 135, 225, 0.1);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 0.1rem;
|
||||||
|
margin-top: 0.08rem;
|
||||||
|
}
|
||||||
|
.top:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
// 0058e1 透明度 0.5
|
||||||
|
background: rgba(0, 88, 225, 0.8);
|
||||||
|
color: white;
|
||||||
|
:deep(.anticon) {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.topSelect {
|
||||||
|
background: #0058e1;
|
||||||
|
color: white;
|
||||||
|
:deep(.anticon) {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
width: 100%;
|
||||||
|
background: rgba(244, 245, 248, 0.8);
|
||||||
|
padding: 0 0.1rem;
|
||||||
|
// margin-bottom: .08rem;
|
||||||
|
.up {
|
||||||
|
cursor: pointer;
|
||||||
|
height: 0.4rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
border-top: 0.01rem solid #ccc;
|
||||||
|
padding: 0 0.1rem;
|
||||||
|
& > div {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.up:hover {
|
||||||
|
.name {
|
||||||
|
color: #0058e1;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
color: #0058e1;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.select {
|
||||||
|
padding: 0 0.1rem 0 0;
|
||||||
|
.name {
|
||||||
|
width: 1.7rem;
|
||||||
|
color: #0058e1;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
color: #0058e1;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item:nth-of-type(1) .up {
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
.down {
|
||||||
|
width: 100%;
|
||||||
|
.child {
|
||||||
|
cursor: pointer;
|
||||||
|
height: 0.4rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 0.1rem;
|
||||||
|
& > div {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.child:hover {
|
||||||
|
.name {
|
||||||
|
color: #0058e1;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
color: #0058e1;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.select2 {
|
||||||
|
.name {
|
||||||
|
width: 1.7rem;
|
||||||
|
color: #0058e1;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
color: #0058e1;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
padding: 0 0.1rem 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue