Compare commits
4 Commits
df7d94b0bf
...
3672378961
Author | SHA1 | Date |
---|---|---|
a0049873 | 3672378961 | |
gongjiale | 281143503a | |
gongjiale | 1ae34481d7 | |
gongjiale | e48f8cc6ce |
Binary file not shown.
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
After Width: | Height: | Size: 718 B |
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue