527 lines
14 KiB
Vue
527 lines
14 KiB
Vue
<template>
|
|
<div class="wrapper">
|
|
<div class="nav">
|
|
<div :class="{ active: itemIndex == 1 }" @click="btnClick(1)">
|
|
<span
|
|
class="photo"
|
|
:style="{
|
|
backgroundImage: `url(${bumenImg}) `,
|
|
backgroundSize: 'cover',
|
|
}"
|
|
></span>
|
|
<span>部门</span>
|
|
</div>
|
|
<div :class="{ active: itemIndex == 2 }" @click="btnClick(2)">
|
|
<span
|
|
class="photo"
|
|
:style="{
|
|
backgroundImage: `url(${biaoqianImg}) `,
|
|
backgroundSize: 'cover',
|
|
}"
|
|
></span>
|
|
<span>标签</span>
|
|
</div>
|
|
</div>
|
|
<div v-if="itemIndex == 1" class="wrapper-title-left-tree" :key="showKey">
|
|
<div v-for="item in treeData" :key="item.id" class="primaryNode">
|
|
<div
|
|
class="top"
|
|
@click="showBottom(item)"
|
|
:class="item.show ? 'topSelect' : ''"
|
|
>
|
|
{{ item.name }}
|
|
({{ item.channelCount }})
|
|
<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.id" class="item">
|
|
<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>
|
|
<span class="name">{{ val.name }}({{ val.channelCount }})</span>
|
|
</div>
|
|
<span v-if="item.children.length < 0">{{ 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.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>
|
|
<span class="name">
|
|
{{ child.name }}
|
|
</span>
|
|
</div>
|
|
<span>{{ child.channelCount }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="itemIndex == 2" class="wrapper-title-left-tree">
|
|
<div v-for="(item, index) in biaoqianList">
|
|
<div class="titleName">{{ item.placeTypeName }}</div>
|
|
<div class="glgkmk" v-for="(child, index) in item.children">
|
|
<a-tooltip placement="topLeft">
|
|
<template #title>{{ child.placeTypeName }}</template>
|
|
<div
|
|
class="glgknum"
|
|
:class="{ active: child.placeTypeCode == chooseId }"
|
|
@click="tabClick(child.placeTypeCode)"
|
|
>
|
|
{{ child.placeTypeName }}
|
|
</div>
|
|
</a-tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { defineComponent, ref, watch } from 'vue'
|
|
import { getCameraAllOrgan } from '@/api/videoSurveillance'
|
|
|
|
import { getCameraInfoByAreaId, getPlaceType } 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 biaoqianList = ref([])
|
|
const bumenImg = require('@/assets/newHome/bumen.png')
|
|
const biaoqianImg = require('@/assets/newHome/biaoqian.png')
|
|
const router = useRouter()
|
|
const showKey = ref(0)
|
|
const treeData = ref([])
|
|
const selectId = ref('')
|
|
let itemIndex = ref(1)
|
|
let chooseId = ref('')
|
|
//切换tab
|
|
const btnClick = (index) => {
|
|
itemIndex.value = index
|
|
if (index === 2) {
|
|
if (chooseId.value !== '') {
|
|
let placeTypeCode = []
|
|
placeTypeCode.push(chooseId.value)
|
|
mybus.emit('CameraConditionPlaceType', placeTypeCode)
|
|
} else {
|
|
mybus.emit('clearLeftSelect')
|
|
}
|
|
} else {
|
|
if (selectId.value !== '') {
|
|
mybus.emit('getCameraByParentId', {
|
|
id: selectId.value,
|
|
})
|
|
} else {
|
|
mybus.emit('clearLeftSelect')
|
|
}
|
|
}
|
|
}
|
|
//选择标签内容
|
|
const tabClick = (id) => {
|
|
if (chooseId.value === id) {
|
|
chooseId.value = ''
|
|
// mybus.emit('clearLeftSelect')
|
|
mybus.emit('CameraConditionPlaceType', [])
|
|
} else {
|
|
chooseId.value = id
|
|
let placeTypeCode = []
|
|
placeTypeCode.push(id)
|
|
mybus.emit('CameraConditionPlaceType', placeTypeCode)
|
|
}
|
|
}
|
|
// 初始化
|
|
const init = async () => {
|
|
treeData.value = []
|
|
let select =
|
|
router.currentRoute.value.query.select ||
|
|
DETAIL_PAGE_CONTENT_DEFAULT_TAB
|
|
if (select === '123') {
|
|
select = ''
|
|
}
|
|
if (select == '基础设施') {
|
|
let res = {}
|
|
|
|
res = await getCameraInfoByAreaId({
|
|
areaId: '70be8c5b664f4bcf869d82f2e8335051',
|
|
})
|
|
treeData.value = (res.data && res.data.data) || []
|
|
let tabs = {}
|
|
tabs = await getPlaceType()
|
|
//获取标签列表=========
|
|
biaoqianList.value = (tabs.data && tabs.data.data) || []
|
|
// 只有一个，默认展开到二级菜单
|
|
if (res.data && res.data.data.length == 1) {
|
|
showBottom(treeData.value[0])
|
|
}
|
|
}
|
|
}
|
|
mybus.on('getDeptList', () => {
|
|
init()
|
|
})
|
|
mybus.on('clearChoose', () => {
|
|
selectId.value = ''
|
|
chooseId.value = ''
|
|
})
|
|
const onSelect = async (item, val, child) => {
|
|
let res = {}
|
|
console.log('点击', item, val, child)
|
|
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
|
|
}
|
|
})
|
|
}
|
|
})
|
|
if (child) {
|
|
if (selectId.value === child.id) {
|
|
selectId.value = ''
|
|
} else {
|
|
selectId.value = child.id
|
|
// 查询数据并上图
|
|
const param = {
|
|
id: val.id,
|
|
reset: true,
|
|
}
|
|
mybus.emit('getCameraByParentId', param)
|
|
}
|
|
}
|
|
}
|
|
|
|
watch(selectId, (newVal) => {
|
|
if (newVal == '') {
|
|
mybus.emit('getCameraByParentId', {
|
|
id: '70be8c5b664f4bcf869d82f2e8335051',
|
|
})
|
|
}
|
|
})
|
|
|
|
const showBottom = async (item) => {
|
|
item.show = !item.show
|
|
let res = {}
|
|
// 西海岸
|
|
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])
|
|
}
|
|
})
|
|
}
|
|
const showDown = (item, val) => {
|
|
selectId.value = val.id
|
|
//mybus.emit('getCameraByParentId', val.id)
|
|
if (item.children) {
|
|
val.show = !val.show
|
|
// 取消选中
|
|
if (!val.show) {
|
|
selectId.value = ''
|
|
// mybus.emit('clearLeftSelect')
|
|
} else {
|
|
mybus.emit('getCameraByParentId', {
|
|
id: val.id,
|
|
})
|
|
}
|
|
}
|
|
}
|
|
return {
|
|
btnClick,
|
|
tabClick,
|
|
treeData,
|
|
showKey,
|
|
onSelect,
|
|
showBottom,
|
|
showDown,
|
|
selectId,
|
|
itemIndex,
|
|
bumenImg,
|
|
biaoqianImg,
|
|
biaoqianList,
|
|
chooseId,
|
|
}
|
|
},
|
|
beforeUnmount() {
|
|
mybus.off('getDeptList')
|
|
mybus.off('clearChoose')
|
|
},
|
|
components: {
|
|
UpOutlined,
|
|
DownOutlined,
|
|
},
|
|
})
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.titleName {
|
|
font-size: 18px;
|
|
color: #7e7676;
|
|
margin-bottom: 10px;
|
|
padding-left: 6px;
|
|
border-left: 6px solid #1296db;
|
|
margin-left: 10px;
|
|
}
|
|
.glgkmk {
|
|
cursor: pointer;
|
|
text-align: left;
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 45%;
|
|
margin-bottom: 10px;
|
|
margin-left: 10px;
|
|
|
|
.glgknum {
|
|
// width: 100px;
|
|
// color: #000000;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
word-break: break-all;
|
|
}
|
|
.active {
|
|
color: #0058e1;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.glgkmk :hover {
|
|
color: #0058e1;
|
|
}
|
|
.nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-right: 20px;
|
|
align-items: center;
|
|
font-size: 18px;
|
|
font-family: 'Alibaba PuHuiTi';
|
|
color: #000000;
|
|
line-height: 0.32rem;
|
|
margin-bottom: 24px;
|
|
|
|
.photo {
|
|
display: inline-block;
|
|
height: 0.3rem;
|
|
width: 0.3rem;
|
|
margin-right: 0.1rem;
|
|
}
|
|
|
|
div {
|
|
padding: 0 0.1rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
div:hover {
|
|
color: #1296db;
|
|
}
|
|
|
|
.active {
|
|
font-weight: 600;
|
|
color: #1296db;
|
|
border-bottom: 0.02rem solid #1296db;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
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 !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;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|