wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

更改基础设施--左侧树选中状态以及取消选中（没区分西海岸和市局）

This commit is contained in:
guoyue 2022-10-10 17:10:43 +08:00
parent 05c93f9dd9
commit b5ad10130f
1 changed files with 231 additions and 468 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

699
front/src/views/home/detailsPageInfrastructureTree.vue
View File

@ -2,14 +2,7 @@
<div class="wrapper">
<div class="wrapper-title-left-tree" :key="showKey">
<div v-for="item in treeData" :key="item.id" class="primaryNode">
<!-- <div v-if="!item.children || item.children.length == 0">
{{ item.title }}
</div> -->
<div
class="top"
@click="showBottom(item)"
:class="item.show ? 'topSelect' : ''"
>
<div class="top" @click="showBottom(item)" :class="item.show ? 'topSelect' : ''">
{{ item.name }}
({{ item.channelCount }})
<DownOutlined v-show="!item.show" />
@ -17,28 +10,13 @@
</div>
<div class="bottom" v-show="item.show">
<div v-for="val in item.children" :key="val.id" class="item">
<div
class="up"
:class="selectId == val.id ? 'select' : ''"
@click="showDown(item, val), onSelect(item, val)"
>
<div class="up" :class="selectId == val.id ? '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.id"
>
<path
d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z"
p-id="2157"
fill="#0058e1"
></path>
<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.id">
<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.name }}({{ val.channelCount }})</span>
</div>
@ -49,30 +27,13 @@
</span>
</div>
<div class="down" v-show="val.show">
<div
v-for="child in val.children"
:key="child.id"
class="child"
:class="selectId == child.id ? 'select2' : ''"
@click="onSelect(item, child, child)"
>
<div v-for="child in val.children" :key="child.id" class="child"
:class="selectId == child.id ? 'select2' : ''" @click="onSelect(item, child, 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.id"
>
<path
d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z"
p-id="2157"
fill="#0058e1"
></path>
<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.id">
<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.name }}
@ -84,407 +45,251 @@
</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 { getCameraAllOrgan } from '@/api/videoSurveillance'
import { getCameraInfoByAreaId } from '@/api/file'
import mybus from '@/myplugins/mybus'
import { useRouter } from 'vue-router'
import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
import { DETAIL_PAGE_CONTENT_DEFAULT_TAB } from '@/global/GlobalConfig.js'
export default defineComponent({
setup() {
const selectedKeys = ref([])
const checkedKeys = ref([])
const router = useRouter()
const fieldNames = {
children: 'children',
title: 'name',
import { defineComponent, ref, watch } from 'vue'
import { getCameraAllOrgan } from '@/api/videoSurveillance'
import { getCameraInfoByAreaId } from '@/api/file'
import mybus from '@/myplugins/mybus'
import { useRouter } from 'vue-router'
import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
import { DETAIL_PAGE_CONTENT_DEFAULT_TAB } from '@/global/GlobalConfig.js'
export default defineComponent({
setup() {
const router = useRouter()
const whoShow1 = ref(whoShow)
const showKey = ref(0)
const treeData = ref([])
const selectId = ref('')
// 初始化
const init = async () => {
treeData.value = []
console.log(
'router.currentRoute.value.query.select',
router.currentRoute.value.query.select
)
let select = router.currentRoute.value.query.select || DETAIL_PAGE_CONTENT_DEFAULT_TAB
if (select === '123') {
select = ''
}
const whoShow1 = ref(whoShow)
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 || DETAIL_PAGE_CONTENT_DEFAULT_TAB
if (select === '123') {
select = ''
}
console.log(
'获取url中的select=====================>',
router.currentRoute.value.query.select
)
if (select == '基础设施') {
if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then(
(res) => {
treeData.value = res.data.data
}
)
} else {
getCameraInfoByAreaId({
areaId: '70be8c5b664f4bcf869d82f2e8335051',
}).then((res) => {
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 '市级':
// 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) => {
console.log('item, val, child', child)
mybus.emit('getCameraByParentId', val.id)
mybus.emit('getListByParentId', val.id)
console.log(
'获取url中的select=====================>',
router.currentRoute.value.query.select
)
if (select == '基础设施') {
let res = {};
if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
getCameraAllOrgan({ parentId: val.id }).then((res) => {
treeData.value.map((treeDataItem, index) => {
if (item.id == treeDataItem.id) {
treeData.value[index].children.map((childItem, childIndex) => {
if (childItem.id == val.id) {
treeData.value[index].children[childIndex].children =
res.data.data
}
})
console.log('treeData.value.[index]', treeData.value[index])
}
})
})
res = await getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' })
} else {
getCameraInfoByAreaId({
areaId: val.id,
}).then((res) => {
treeData.value.map((treeDataItem, index) => {
if (item.id == treeDataItem.id) {
treeData.value[index].children.map((childItem, childIndex) => {
if (childItem.id == val.id) {
treeData.value[index].children[childIndex].children =
res.data.data
}
})
console.log('treeData.value.[index]', treeData.value[index])
}
})
// 西海岸
res = await getCameraInfoByAreaId({
areaId: '70be8c5b664f4bcf869d82f2e8335051',
})
}
if (child) {
selectId.value = child.id
}
treeData.value = res.data && res.data.data || []
}
watch(selectedKeys, () => {
console.log('selectedKeys', selectedKeys)
}
mybus.on('getDeptList', () => {
init()
})
const onSelect = async (item, val, child) => {
console.log('item--------onSelect---->', item);
console.log('val------onSelect------>', val);
console.log('child-----onSelect------->', child);
mybus.emit('getCameraByParentId', val.id)
mybus.emit('getListByParentId', val.id)
let res = {}
if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
res = await getCameraAllOrgan({ parentId: val.id })
} else {
// 西海岸
res = await getCameraInfoByAreaId({ areaId: val.id })
}
treeData.value.map((treeDataItem, index) => {
if (item.id == treeDataItem.id) {
treeData.value[index].children.map((childItem, childIndex) => {
if (childItem.id == val.id) {
treeData.value[index].children[childIndex].children =
res.data.data
}
})
}
})
watch(checkedKeys, (val) => {
if (val.checked.length > 1) {
val.checked.halfChecked = val.checked.shift()
if (child) {
selectId.value = child.id
}
}
watch(selectId, (newVal) => {
if (newVal == '') {
mybus.emit('getCameraByParentId', '')
mybus.emit('getListByParentId', '')
}
})
const showBottom = async (item) => {
item.show = !item.show;
let res = {};
if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
res = await getCameraAllOrgan({ parentId: item.id })
} else {
// 西海岸
res = await getCameraInfoByAreaId({ areaId: item.id })
}
treeData.value.map((treeDataItem, index) => {
if (item.id == treeDataItem.id) {
treeData.value[index].children = res.data && res.data.data || []
console.log('treeData.value.[index]', treeData.value[index])
}
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
if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
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])
}
})
})
} else {
getCameraInfoByAreaId({
areaId: 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) => {
selectId.value = val.id
console.log('item---showDown--------->', item);
console.log('val----showDown-------->', val);
if (item.children) {
val.show = !val.show;
// 取消选中
if (!val.show) {
selectId.value = ''
}
}
const showDown = (item, val) => {
console.log('showDown', val)
if (item.children) {
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,
},
})
}
return {
treeData,
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%;
.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;
background: rgba(0, 135, 225, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
border-top: 0.01rem solid #ccc;
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;
&>div {
display: flex;
justify-content: flex-start;
}
.name {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all;
}
}
.topSelect {
background: #0058e1;
color: white;
:deep(.anticon) {
color: white;
.up:hover {
.name {
color: #0058e1;
font-weight: 600;
}
span {
color: #0058e1;
font-weight: 600;
}
}
.bottom {
.select {
padding: 0 0.1rem 0 0;
.name {
width: 1.7rem;
color: #0058e1 !important;
font-weight: 600;
}
span {
color: #0058e1;
font-weight: 600;
}
}
.item:nth-of-type(1) .up {
border-top: none;
}
.down {
width: 100%;
background: rgba(244, 245, 248, 0.8);
padding: 0 0.1rem;
// margin-bottom: .08rem;
.up {
.child {
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 {
&>div {
display: flex;
justify-content: flex-start;
}
.name {
overflow: hidden;
text-overflow: ellipsis;
@ -494,76 +299,34 @@
word-break: break-all;
}
}
.up:hover {
.child:hover {
.name {
color: #0058e1;
font-weight: 600;
}
span {
color: #0058e1;
font-weight: 600;
}
}
.select {
padding: 0 0.1rem 0 0;
.select2 {
.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;
word-break: break-all;
}
}
.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;
}
padding: 0 0.1rem 0 0;
}
}
}
}
</style>