更改基础设施--左侧树选中状态以及取消选中（没区分西海岸和市局）
This commit is contained in:
parent
05c93f9dd9
commit
b5ad10130f
|
|
@ -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,37 +45,28 @@
|
|||
</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'
|
||||
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({
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const selectedKeys = ref([])
|
||||
const checkedKeys = ref([])
|
||||
const router = useRouter()
|
||||
const fieldNames = {
|
||||
children: 'children',
|
||||
title: 'name',
|
||||
}
|
||||
const whoShow1 = ref(whoShow)
|
||||
const showKey = ref(0)
|
||||
const treeData = ref([])
|
||||
const init = () => {
|
||||
const selectId = ref('')
|
||||
|
||||
// 初始化
|
||||
const init = async () => {
|
||||
treeData.value = []
|
||||
console.log(
|
||||
'router.currentRoute.value.query.select',
|
||||
|
|
@ -129,149 +81,35 @@
|
|||
router.currentRoute.value.query.select
|
||||
)
|
||||
if (select == '基础设施') {
|
||||
let res = {};
|
||||
if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
|
||||
getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then(
|
||||
(res) => {
|
||||
treeData.value = res.data.data
|
||||
}
|
||||
)
|
||||
res = await getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' })
|
||||
} else {
|
||||
getCameraInfoByAreaId({
|
||||
// 西海岸
|
||||
res = await 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++
|
||||
// })
|
||||
treeData.value = res.data && res.data.data || []
|
||||
}
|
||||
}
|
||||
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)
|
||||
|
||||
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) {
|
||||
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: val.id })
|
||||
} else {
|
||||
getCameraInfoByAreaId({
|
||||
areaId: val.id,
|
||||
}).then((res) => {
|
||||
// 西海岸
|
||||
res = await getCameraInfoByAreaId({ areaId: val.id })
|
||||
}
|
||||
treeData.value.map((treeDataItem, index) => {
|
||||
if (item.id == treeDataItem.id) {
|
||||
treeData.value[index].children.map((childItem, childIndex) => {
|
||||
|
|
@ -280,97 +118,51 @@
|
|||
res.data.data
|
||||
}
|
||||
})
|
||||
console.log('treeData.value.[index]', treeData.value[index])
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
if (child) {
|
||||
selectId.value = child.id
|
||||
}
|
||||
}
|
||||
watch(selectedKeys, () => {
|
||||
console.log('selectedKeys', selectedKeys)
|
||||
|
||||
watch(selectId, (newVal) => {
|
||||
if (newVal == '') {
|
||||
mybus.emit('getCameraByParentId', '')
|
||||
mybus.emit('getListByParentId', '')
|
||||
}
|
||||
})
|
||||
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 showBottom = async (item) => {
|
||||
item.show = !item.show;
|
||||
let res = {};
|
||||
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])
|
||||
}
|
||||
})
|
||||
})
|
||||
res = await getCameraAllOrgan({ parentId: item.id })
|
||||
} else {
|
||||
getCameraInfoByAreaId({
|
||||
areaId: item.id,
|
||||
}).then((res) => {
|
||||
// 西海岸
|
||||
res = await getCameraInfoByAreaId({ areaId: item.id })
|
||||
}
|
||||
|
||||
treeData.value.map((treeDataItem, index) => {
|
||||
if (item.id == treeDataItem.id) {
|
||||
treeData.value[index].children = res.data.data
|
||||
treeData.value[index].children = res.data && res.data.data || []
|
||||
console.log('treeData.value.[index]', treeData.value[index])
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
const showDown = (item, val) => {
|
||||
console.log('showDown', val)
|
||||
selectId.value = val.id
|
||||
console.log('item---showDown--------->', item);
|
||||
console.log('val----showDown-------->', val);
|
||||
if (item.children) {
|
||||
val.show = !val.show
|
||||
val.show = !val.show;
|
||||
// 取消选中
|
||||
if (!val.show) {
|
||||
selectId.value = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
value,
|
||||
onSearch,
|
||||
selectedKeys,
|
||||
checkedKeys,
|
||||
fieldNames,
|
||||
treeData,
|
||||
dianjisousuo,
|
||||
quxiaoshijian,
|
||||
xuanzeshijian,
|
||||
showKey,
|
||||
onSelect,
|
||||
showBottom,
|
||||
|
|
@ -386,62 +178,10 @@
|
|||
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 {
|
||||
.primaryNode {
|
||||
.top {
|
||||
width: 100%;
|
||||
height: 0.4rem;
|
||||
|
|
@ -452,26 +192,32 @@
|
|||
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;
|
||||
|
|
@ -481,10 +227,12 @@
|
|||
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,33 +242,41 @@
|
|||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
color: #0058e1 !important;
|
||||
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;
|
||||
|
|
@ -528,10 +284,12 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 0.1rem;
|
||||
& > div {
|
||||
|
||||
&>div {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -541,29 +299,34 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue