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

View File

@ -1,8 +1,34 @@
<template> <template>
<div class="wrapper"> <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 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.name }}
({{ item.channelCount }}) ({{ item.channelCount }})
<DownOutlined v-show="!item.show" /> <DownOutlined v-show="!item.show" />
@ -10,13 +36,28 @@
</div> </div>
<div class="bottom" v-show="item.show"> <div class="bottom" v-show="item.show">
<div v-for="val in item.children" :key="val.id" class="item"> <div v-for="val in item.children" :key="val.id" class="item">
<div class="up" :class="selectId == val.id ? 'select' : ''" <div
@click="showDown(item, val), onSelect(item, val)"> class="up"
:class="selectId == val.id ? 'select' : ''"
@click="showDown(item, val), onSelect(item, val)"
>
<div> <div>
<svg t="1654068878091" class="icon" viewBox="0 0 1024 1024" version="1.1" <svg
xmlns="http://www.w3.org/2000/svg" p-id="2156" width="0.25rem" height="0.25rem" t="1654068878091"
v-show="selectId == val.id"> class="icon"
<path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z" p-id="2157" fill="#0058e1"></path> 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> </svg>
<span class="name">{{ val.name }}({{ val.channelCount }})</span> <span class="name">{{ val.name }}({{ val.channelCount }})</span>
</div> </div>
@ -27,13 +68,30 @@
</span> </span>
</div> </div>
<div class="down" v-show="val.show"> <div class="down" v-show="val.show">
<div v-for="child in val.children" :key="child.id" class="child" <div
:class="selectId == child.id ? 'select2' : ''" @click="onSelect(item, child, child)"> v-for="child in val.children"
:key="child.id"
class="child"
:class="selectId == child.id ? 'select2' : ''"
@click="onSelect(item, child, child)"
>
<div> <div>
<svg t="1654068878091" class="icon" viewBox="0 0 1024 1024" version="1.1" <svg
xmlns="http://www.w3.org/2000/svg" p-id="2156" width="0.25rem" height="0.25rem" t="1654068878091"
v-show="selectId == child.id"> class="icon"
<path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z" p-id="2157" fill="#0058e1"></path> 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> </svg>
<span class="name"> <span class="name">
{{ child.name }} {{ child.name }}
@ -46,6 +104,20 @@
</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">
<div
class="glgknum"
:class="{ active: child.placeTypeCode == chooseId }"
@click="tabClick(child.placeTypeCode)"
>
{{ child.placeTypeName }}
</div>
</div>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
@ -59,29 +131,35 @@ import { DETAIL_PAGE_CONTENT_DEFAULT_TAB } from '@/global/GlobalConfig.js'
export default defineComponent({ export default defineComponent({
setup() { setup() {
const biaoqianList = ref([])
const bumenImg = require('@/assets/newHome/bumen.png')
const biaoqianImg = require('@/assets/newHome/biaoqian.png')
const router = useRouter() const router = useRouter()
const whoShow1 = ref(whoShow) const whoShow1 = ref(whoShow)
const showKey = ref(0) const showKey = ref(0)
const treeData = ref([]) const treeData = ref([])
const selectId = 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 () => { const init = async () => {
treeData.value = [] treeData.value = []
console.log( let select =
'router.currentRoute.value.query.select', router.currentRoute.value.query.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') { if (select === '123') {
select = '' select = ''
} }
console.log(
'获取url中的select=====================>',
router.currentRoute.value.query.select
)
if (select == '基础设施') { if (select == '基础设施') {
let res = {}; let res = {}
if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) { if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
res = await getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }) res = await getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' })
} else { } else {
@ -90,9 +168,27 @@ export default defineComponent({
areaId: '70be8c5b664f4bcf869d82f2e8335051', 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) { if (res.data && res.data.data.length == 1) {
showBottom(treeData.value[0]) showBottom(treeData.value[0])
} }
} }
@ -102,11 +198,6 @@ export default defineComponent({
}) })
const onSelect = async (item, val, 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 = {} let res = {}
if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) { if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
res = await getCameraAllOrgan({ parentId: val.id }) res = await getCameraAllOrgan({ parentId: val.id })
@ -137,8 +228,8 @@ export default defineComponent({
}) })
const showBottom = async (item) => { const showBottom = async (item) => {
item.show = !item.show; item.show = !item.show
let res = {}; let res = {}
if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) { if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
res = await getCameraAllOrgan({ parentId: item.id }) res = await getCameraAllOrgan({ parentId: item.id })
} else { } else {
@ -148,17 +239,17 @@ export default defineComponent({
treeData.value.map((treeDataItem, index) => { treeData.value.map((treeDataItem, index) => {
if (item.id == treeDataItem.id) { 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]) console.log('treeData.value.[index]', treeData.value[index])
} }
}) })
} }
const showDown = (item, val) => { const showDown = (item, val) => {
selectId.value = val.id selectId.value = val.id
console.log('item---showDown--------->', item); console.log('item---showDown--------->', item)
console.log('val----showDown-------->', val); console.log('val----showDown-------->', val)
if (item.children) { if (item.children) {
val.show = !val.show; val.show = !val.show
// //
if (!val.show) { if (!val.show) {
selectId.value = '' selectId.value = ''
@ -166,12 +257,19 @@ export default defineComponent({
} }
} }
return { return {
btnClick,
tabClick,
treeData, treeData,
showKey, showKey,
onSelect, onSelect,
showBottom, showBottom,
showDown, showDown,
selectId, selectId,
itemIndex,
bumenImg,
biaoqianImg,
biaoqianList,
chooseId,
} }
}, },
beforeUnmount() { beforeUnmount() {
@ -185,6 +283,67 @@ export default defineComponent({
}) })
</script> </script>
<style lang="less" scoped> <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 { .primaryNode {
.top { .top {
width: 100%; width: 100%;
@ -232,7 +391,7 @@ export default defineComponent({
border-top: 0.01rem solid #ccc; border-top: 0.01rem solid #ccc;
padding: 0 0.1rem; padding: 0 0.1rem;
&>div { & > div {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
} }
@ -289,7 +448,7 @@ export default defineComponent({
align-items: center; align-items: center;
padding: 0 0.1rem; padding: 0 0.1rem;
&>div { & > div {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
} }