Compare commits
No commits in common. "1ae34481d79f9fbc749f4b864fb98f3e7477a36c" and "bc73b269a6e6befaeaf6777e0ef26a7a2f120a96" have entirely different histories.
1ae34481d7
...
bc73b269a6
|
|
@ -230,7 +230,7 @@
|
|||
>
|
||||
<button class="buzhou">提交</button>
|
||||
</a-popconfirm>
|
||||
<button class="buzhou" v-else-if="showView === '部署与使用'" @click="submit()">
|
||||
<button class="buzhou" v-else-if="服务商联系电话 === '部署与使用'" @click="submit()">
|
||||
提交
|
||||
</button>
|
||||
<button class="quxiao" @click="close()">取消</button>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,8 @@
|
|||
<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 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" />
|
||||
|
|
@ -36,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>
|
||||
|
|
@ -68,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 }}
|
||||
|
|
@ -104,20 +46,6 @@
|
|||
</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>
|
||||
|
|
@ -131,35 +59,29 @@ 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 = []
|
||||
let select =
|
||||
router.currentRoute.value.query.select ||
|
||||
DETAIL_PAGE_CONTENT_DEFAULT_TAB
|
||||
console.log(
|
||||
'router.currentRoute.value.query.select',
|
||||
router.currentRoute.value.query.select
|
||||
)
|
||||
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 {
|
||||
|
|
@ -168,27 +90,9 @@ export default defineComponent({
|
|||
areaId: '70be8c5b664f4bcf869d82f2e8335051',
|
||||
})
|
||||
}
|
||||
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' },
|
||||
],
|
||||
},
|
||||
]
|
||||
treeData.value = res.data && res.data.data || []
|
||||
// 只有一个，默认展开到二级菜单
|
||||
if (res.data && res.data.data.length == 1) {
|
||||
if(res.data && res.data.data.length == 1) {
|
||||
showBottom(treeData.value[0])
|
||||
}
|
||||
}
|
||||
|
|
@ -198,6 +102,11 @@ 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 })
|
||||
|
|
@ -228,8 +137,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 {
|
||||
|
|
@ -239,17 +148,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 = ''
|
||||
|
|
@ -257,19 +166,12 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
return {
|
||||
btnClick,
|
||||
tabClick,
|
||||
treeData,
|
||||
showKey,
|
||||
onSelect,
|
||||
showBottom,
|
||||
showDown,
|
||||
selectId,
|
||||
itemIndex,
|
||||
bumenImg,
|
||||
biaoqianImg,
|
||||
biaoqianList,
|
||||
chooseId,
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
|
|
@ -283,67 +185,6 @@ 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%;
|
||||
|
|
@ -391,7 +232,7 @@ export default defineComponent({
|
|||
border-top: 0.01rem solid #ccc;
|
||||
padding: 0 0.1rem;
|
||||
|
||||
& > div {
|
||||
&>div {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
|
@ -448,7 +289,7 @@ export default defineComponent({
|
|||
align-items: center;
|
||||
padding: 0 0.1rem;
|
||||
|
||||
& > div {
|
||||
&>div {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue