<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2023-03-10 15:27:59
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2024-12-03 13:23:28
|
* @FilePath: \bigScreen\src\views\rs\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 { nextTick, onUnmounted, reactive } from 'vue'
|
const resData = reactive({
|
data: [
|
{
|
label: '一般',
|
value: 1
|
},
|
{
|
label: '较大',
|
value: 2
|
},
|
{
|
label: '暂定',
|
value: 9
|
}
|
]
|
})
|
const curSelect = ref('')
|
|
const tabClick = (item) => {
|
if (curSelect.value) EventBus.emit('restHandleDelChange', `4-${curSelect.value}`)
|
curSelect.value = item.value
|
EventBus.emit('restHandleCheckChange', `4-${item.value}`)
|
EventBus.emit('rsTabChange', item.value)
|
}
|
|
nextTick(() => {
|
tabClick(resData.data[0])
|
})
|
|
const showOn = computed(() => (item) => {
|
if (curSelect.value == item.value) {
|
return true
|
}
|
|
return false
|
})
|
|
onUnmounted(() => {
|
if (curSelect.value) EventBus.emit('restHandleDelChange', `4-${curSelect.value}`)
|
})
|
</script>
|
|
<template>
|
<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>
|
</template>
|
|
<style lang="scss" scoped>
|
.cur-container {
|
background: transparent;
|
pointer-events: none;
|
|
.tablist {
|
pointer-events: all;
|
|
&>div {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-top: 16px;
|
padding: 10px;
|
width: 64px;
|
height: 64px;
|
|
border-radius: 50%;
|
box-shadow: inset 0 0 40px #409eff;
|
color: #fff;
|
box-sizing: content-box;
|
|
&.on {
|
position: relative;
|
color: #75b1ff;
|
}
|
|
.label-box {
|
line-height: 24px;
|
text-align: center;
|
}
|
}
|
}
|
}
|
</style>
|
