Compare commits

...

4 Commits

4 changed files with 200 additions and 41 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 718 B

View File

@ -230,7 +230,7 @@
>
<button class="buzhou">提交</button>
</a-popconfirm>
<button class="buzhou" v-else-if="服务商联系电话 === '部署与使用'" @click="submit()">
<button class="buzhou" v-else-if="showView === '部署与使用'" @click="submit()">
提交
</button>
<button class="quxiao" @click="close()">取消</button>

View File

@ -1,8 +1,34 @@
<template>
<div class="wrapper">
<div class="wrapper-title-left-tree" :key="showKey">
<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' : ''">
<div
class="top"
@click="showBottom(item)"
:class="item.show ? 'topSelect' : ''"
>
{{ item.name }}
({{ item.channelCount }})
<DownOutlined v-show="!item.show" />
@ -10,13 +36,28 @@
</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>
@ -27,13 +68,30 @@
</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 }}
@ -46,6 +104,20 @@
</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">
<div
class="glgknum"
:class="{ active: child.placeTypeCode == chooseId }"
@click="tabClick(child.placeTypeCode)"
>
{{ child.placeTypeName }}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
@ -59,29 +131,35 @@ 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 whoShow1 = ref(whoShow)
const showKey = ref(0)
const treeData = ref([])
const selectId = ref('')
let itemIndex = ref(1)
let chooseId = ref('')
//tab
const btnClick = (index) => {
itemIndex.value = index
}
//
const tabClick = (id) => {
chooseId.value = id
}
//
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
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 == '基础设施') {
let res = {};
let res = {}
if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
res = await getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' })
} else {
@ -90,7 +168,25 @@ export default defineComponent({
areaId: '70be8c5b664f4bcf869d82f2e8335051',
})
}
treeData.value = res.data && res.data.data || []
treeData.value = (res.data && res.data.data) || []
//=========
biaoqianList.value = [
{
placeTypeName: '政府机构',
children: [
{ placeTypeName: '行政中心', placeTypeCode: '1' },
{ placeTypeName: '行政中心', placeTypeCode: '12' },
{ placeTypeName: '行政中心', placeTypeCode: '14' },
],
},
{
placeTypeName: '政府机构1',
children: [
{ placeTypeName: '行政中心', placeTypeCode: '2' },
{ placeTypeName: '行政中心', placeTypeCode: '3' },
],
},
]
//
if (res.data && res.data.data.length == 1) {
showBottom(treeData.value[0])
@ -102,11 +198,6 @@ export default defineComponent({
})
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 })
@ -137,8 +228,8 @@ export default defineComponent({
})
const showBottom = async (item) => {
item.show = !item.show;
let res = {};
item.show = !item.show
let res = {}
if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
res = await getCameraAllOrgan({ parentId: item.id })
} else {
@ -148,17 +239,17 @@ export default defineComponent({
treeData.value.map((treeDataItem, index) => {
if (item.id == treeDataItem.id) {
treeData.value[index].children = res.data && res.data.data || []
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
console.log('item---showDown--------->', item);
console.log('val----showDown-------->', val);
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 = ''
@ -166,12 +257,19 @@ export default defineComponent({
}
}
return {
btnClick,
tabClick,
treeData,
showKey,
onSelect,
showBottom,
showDown,
selectId,
itemIndex,
bumenImg,
biaoqianImg,
biaoqianList,
chooseId,
}
},
beforeUnmount() {
@ -185,6 +283,67 @@ export default defineComponent({
})
</script>
<style lang="less" scoped>
.titleName {
font-size: 18px;
color: #1e1a1a;
margin-bottom: 10px;
padding-left: 10px;
border-left: 6px solid #1296db;
}
.glgkmk {
cursor: pointer;
text-align: center;
position: relative;
display: inline-block;
width: 30%;
margin-bottom: 10px;
.active {
color: #0058e1;
}
.glgknum {
// color: #000000;
}
}
.glgkmk :hover {
color: #0058e1;
}
.nav {
margin-bottom: 13px;
display: flex;
justify-content: space-around;
align-items: center;
font-size: 18px;
font-family: 'Alibaba PuHuiTi';
color: #000000;
line-height: 0.32rem;
margin-bottom: 0.1rem;
.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%;