| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2023-03-10 15:27:59 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2024-11-18 16:10:10 |
| | | * @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. |
| | | * @Description: |
| | | * |
| | | * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. |
| | | --> |
| | | <script setup> |
| | | import EventBus from 'utils/bus' |
| | |
| | | |
| | | const gawList = ref([ |
| | | { |
| | | label: '给水管网', |
| | | value: "3-3-1", |
| | | select: false |
| | | }, |
| | | { |
| | | label: '燃气管网', |
| | | value: "3-3-3", |
| | | select: false |
| | | }, |
| | | { |
| | | label: '污水管网', |
| | | value: "3-3-2", |
| | | select: true |
| | |
| | | { |
| | | label: '雨水管网', |
| | | value: "3-3-4", |
| | | select: true |
| | | select: false |
| | | }, |
| | | ]) |
| | | const curSelect = ref('') |
| | |
| | | code: code, |
| | | } |
| | | getDictionary(param).then((res) => { |
| | | resData.data = res.data.data.map(item => { |
| | | 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 |
| | |
| | | } |
| | | |
| | | const tabClick = (item) => { |
| | | console.log('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`) |
| | | EventBus.emit('restHandleCheckChange', `3-3-4`) |
| | | } else { |
| | | EventBus.emit('restHandleCheckChange', `3-${item.value}`) |
| | | } |
| | |
| | | </div> |
| | | </div> |
| | | <div v-if="curSelect == '3'"> |
| | | <div class="left-container cur-container-title"> |
| | | <div class="tablist h100"> |
| | | <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"> |
| | |
| | | |
| | | <style lang="scss" scoped> |
| | | .left-container { |
| | | width: 64px; |
| | | width: auto; |
| | | } |
| | | |
| | | .cur-container { |
| | |
| | | margin-top: 10px; |
| | | padding: 8px; |
| | | width: 64px; |
| | | height: 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; |
| | |
| | | } |
| | | |
| | | .label-box { |
| | | line-height: 24px; |
| | | padding: 8px; |
| | | line-height: 20px; |
| | | text-align: center; |
| | | } |
| | | } |
| | |
| | | background: transparent; |
| | | pointer-events: none; |
| | | margin-left: 120px; |
| | | margin-top: 60px; |
| | | font-size: 12px; |
| | | margin-top: 120px; |
| | | |
| | | .tablist { |
| | | pointer-events: all; |
| | |
| | | justify-content: center; |
| | | margin-top: 10px; |
| | | padding: 8px; |
| | | width: 54px; |
| | | height: 54px; |
| | | width: 64px; |
| | | height: 48px; |
| | | |
| | | color: #fff; |
| | | border-radius: 50%; |
| | | box-shadow: inset 0 0 40px #409eff; |
| | | color: #fff; |
| | | box-sizing: content-box; |
| | | font-size: 12px; |
| | | |
| | | &.on { |
| | | position: relative; |
| | |
| | | } |
| | | |
| | | .label-box { |
| | | line-height: 14px; |
| | | padding: 8px; |
| | | line-height: 16px; |
| | | text-align: center; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | | </style> |