<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2023-03-10 15:27:59
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2024-11-28 11:35:07
|
* @FilePath: \bigScreen\src\views\space\components\leftContainer.vue
|
* @Description:
|
*
|
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
|
-->
|
<script setup>
|
import EventBus from 'utils/bus'
|
|
import { getDictionary } from "@/api/dict/dict"
|
import { onUnmounted, reactive } from 'vue'
|
const resData = reactive({
|
data: []
|
})
|
|
const gawList = ref([
|
{
|
label: '污水管网',
|
value: "3-3-2",
|
select: true
|
},
|
{
|
label: '雨水管网',
|
value: "3-3-4",
|
select: false
|
},
|
])
|
const curSelect = ref('')
|
|
// 获取下拉字典
|
const getDictData = (code) => {
|
const param = {
|
code: code,
|
}
|
getDictionary(param).then((res) => {
|
resData.data = res.data.data.filter(i => i.dictKey != 7 && i.dictKey != 9 && i.dictKey != 11).map(item => {
|
return {
|
label: item.dictValue,
|
value: item.dictKey
|
}
|
})
|
|
tabClick(resData.data[0])
|
})
|
}
|
|
const tabClick = (item) => {
|
EventBus.emit('destroyPop', 'destroyPop')
|
if (curSelect.value) {
|
if (curSelect.value == '3') {
|
EventBus.emit('restHandleDelChange', `3-3`)
|
EventBus.emit('restHandleDelChange', `3-3-1`)
|
EventBus.emit('restHandleDelChange', `3-3-2`)
|
EventBus.emit('restHandleDelChange', `3-3-3`)
|
EventBus.emit('restHandleDelChange', `3-3-4`)
|
} else {
|
gawList.value.forEach(element => {
|
if (element.value == `3-3-2`) {
|
element.select = true
|
} else {
|
element.select = false
|
}
|
});
|
EventBus.emit('restHandleDelChange', `3-${curSelect.value}`)
|
}
|
}
|
curSelect.value = item.value
|
if (item.value == '3') {
|
EventBus.emit('restHandleCheckChange', `3-3-2`)
|
} else {
|
EventBus.emit('restHandleCheckChange', `3-${item.value}`)
|
}
|
EventBus.emit('spaceTabChange', item.value)
|
EventBus.emit('flyToyqfw', 'flyToyqfw')
|
}
|
|
const tabClickGW = (item) => {
|
if (item.select) {
|
EventBus.emit('restHandleDelChange', item.value)
|
item.select = false
|
} else {
|
EventBus.emit('restHandleCheckChange', item.value)
|
item.select = true
|
}
|
}
|
|
const showOn = computed(() => (item) => {
|
if (curSelect.value == item.value) {
|
return true
|
}
|
return false
|
})
|
|
getDictData("emergency_space_type")
|
|
onUnmounted(() => {
|
if (curSelect.value) EventBus.emit('restHandleDelChange', `3-${curSelect.value}`)
|
EventBus.emit('restHandleDelChange', `3-3-1`)
|
EventBus.emit('restHandleDelChange', `3-3-2`)
|
EventBus.emit('restHandleDelChange', `3-3-3`)
|
EventBus.emit('restHandleDelChange', `3-3-4`)
|
})
|
</script>
|
|
<template>
|
<div>
|
<div class="left-container cur-container">
|
<div class="tablist h100">
|
<div class="cursor-p" :class="{ on: showOn(item) }" v-for="item, index in resData.data" :key="index"
|
@click="tabClick(item)">
|
<div class="label-box">
|
{{ item.label }}
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-if="curSelect == '3'">
|
<div class="cur-container-title">
|
<div class="tablist">
|
<div class="cursor-p" :class="{ on: item.select }" v-for="item, index in gawList" :key="index"
|
@click="tabClickGW(item)">
|
<div class="label-box">
|
{{ item.label }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<style lang="scss" scoped>
|
.left-container {
|
width: auto;
|
}
|
|
.cur-container {
|
background: transparent;
|
pointer-events: none;
|
|
.tablist {
|
pointer-events: all;
|
|
&>div {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-top: 10px;
|
padding: 8px;
|
width: 64px;
|
height: 48px;
|
|
border-radius: 50%;
|
box-shadow: inset 0 0 40px #409eff;
|
color: #fff;
|
box-sizing: content-box;
|
font-size: 12px;
|
|
&.on {
|
position: relative;
|
// color: #75b1ff;
|
box-shadow: inset 0 0 100px #2a8ef1;
|
}
|
|
.label-box {
|
padding: 8px;
|
line-height: 20px;
|
text-align: center;
|
}
|
}
|
}
|
}
|
|
.cur-container-title {
|
background: transparent;
|
pointer-events: none;
|
margin-left: 120px;
|
margin-top: 120px;
|
|
.tablist {
|
pointer-events: all;
|
|
&>div {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-top: 10px;
|
padding: 8px;
|
width: 64px;
|
height: 48px;
|
|
color: #fff;
|
border-radius: 50%;
|
box-shadow: inset 0 0 40px #409eff;
|
box-sizing: content-box;
|
font-size: 12px;
|
|
&.on {
|
position: relative;
|
// color: #75b1ff;
|
box-shadow: inset 0 0 100px #2a8ef1;
|
}
|
|
.label-box {
|
padding: 8px;
|
line-height: 16px;
|
text-align: center;
|
}
|
}
|
}
|
}
|
</style>
|
