| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2023-03-10 15:27:59 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2024-11-09 15:46:30 |
| | | * @LastEditTime: 2024-11-12 18:10:32 |
| | | * @FilePath: \bigScreen\src\views\space\components\leftContainer.vue |
| | | * @Description: |
| | | * |
| | | * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. |
| | | --> |
| | | <script setup> |
| | | import dataContent from './box/dataContent.vue' |
| | | import unitContent from './box/unitContent.vue' |
| | | import fireContent from './box/fireContent.vue' |
| | | import EventBus from 'utils/bus' |
| | | |
| | | import { getDictionary } from "@/api/dict/dict" |
| | | import { onUnmounted, reactive } from 'vue' |
| | | const resData = reactive({ |
| | | data: [] |
| | | }) |
| | | const curSelect = ref('') |
| | | |
| | | // 获取下拉字典 |
| | | const getDictData = (code) => { |
| | | const param = { |
| | | code: code, |
| | | } |
| | | getDictionary(param).then((res) => { |
| | | resData.data = res.data.data.map(item => { |
| | | return { |
| | | label: item.dictValue, |
| | | value: item.dictKey |
| | | } |
| | | }) |
| | | |
| | | tabClick(resData.data[0]) |
| | | }) |
| | | } |
| | | |
| | | const tabClick = (item) => { |
| | | if (curSelect.value) EventBus.emit('restHandleDelChange', `3-${curSelect.value}`) |
| | | curSelect.value = item.value |
| | | EventBus.emit('restHandleCheckChange', `3-${item.value}`) |
| | | EventBus.emit('spaceTabChange', item.value) |
| | | } |
| | | |
| | | 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}`) |
| | | }) |
| | | </script> |
| | | |
| | | <template> |
| | | <div class="left-container cur-container"> |
| | | |
| | | <!-- <div class="unit box"> |
| | | <title-box> |
| | | <template #titleName> |
| | | 入住单位统计 |
| | | </template> |
| | | </title-box> |
| | | <unit-content></unit-content> |
| | | <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="nowrap-ellipsis-hidden"> |
| | | {{ item.label }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="fire box"> |
| | | <title-box> |
| | | <template #titleName> |
| | | 实时火警事件 |
| | | </template> |
| | | </title-box> |
| | | <fire-content></fire-content> |
| | | </div> --> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | .cur-container { |
| | | background: transparent; |
| | | pointer-events: none; |
| | | |
| | | .tablist { |
| | | pointer-events: all; |
| | | |
| | | &>div { |
| | | margin-top: 16px; |
| | | padding: 10px; |
| | | width: 64px; |
| | | height: 64px; |
| | | line-height: 64px; |
| | | text-align: center; |
| | | border-radius: 50%; |
| | | box-shadow: inset 0 0 40px #409eff; |
| | | color: #fff; |
| | | box-sizing: content-box; |
| | | |
| | | &.on { |
| | | position: relative; |
| | | color: #75b1ff; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |