refactor(Charts/HazardousChemicalsSpace): 优化 AlarmList 和 LineGraph 组件,移除未使用的 Select 组件
- 修复 AlarmListHazC 组件中的数据解析逻辑 - 调整 LineGraph01Haz 组件的样式 - 删除 PieCenterHaz 中未使用的 select 组件
This commit is contained in:
parent
4635366147
commit
85b6f78163
@ -33,6 +33,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</PublicSmallBorder>
|
</PublicSmallBorder>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@ -79,7 +80,7 @@ const fetchRecentAlarms = async () => {
|
|||||||
if (res.state === true) {
|
if (res.state === true) {
|
||||||
let rawData = [];
|
let rawData = [];
|
||||||
if (Array.isArray(res.value.items)) {
|
if (Array.isArray(res.value.items)) {
|
||||||
rawData = res.data.value.items;
|
rawData = res.value.items;
|
||||||
} else if (Array.isArray(res.value)) {
|
} else if (Array.isArray(res.value)) {
|
||||||
rawData = res.value;
|
rawData = res.value;
|
||||||
}
|
}
|
||||||
|
@ -264,7 +264,7 @@ onMounted(() => {
|
|||||||
|
|
||||||
|
|
||||||
.textContent {
|
.textContent {
|
||||||
padding-top: 20px;
|
// padding-top: 20px;
|
||||||
/* background-color: brown; */
|
/* background-color: brown; */
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
@ -1,159 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="custom-select" @click="toggleDropdown">
|
|
||||||
<div class="select-display">
|
|
||||||
<span class="select-text">{{ getSelectedLabel() }}</span>
|
|
||||||
<span class="select-arrow" :class="{ 'arrow-up': isDropdownOpen }">▼</span>
|
|
||||||
</div>
|
|
||||||
<div class="select-dropdown" v-show="isDropdownOpen">
|
|
||||||
<div
|
|
||||||
v-for="item in options"
|
|
||||||
:key="item.value"
|
|
||||||
class="select-option"
|
|
||||||
:class="{ 'selected': item.value === selectedValue }"
|
|
||||||
@click.stop="selectOption(item)"
|
|
||||||
>
|
|
||||||
{{ item.label }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, onMounted, onUnmounted } from 'vue'
|
|
||||||
|
|
||||||
// 定义props
|
|
||||||
const props = defineProps<{
|
|
||||||
options: Array<{ label: string; value: any }>
|
|
||||||
selectedValue: any
|
|
||||||
}>()
|
|
||||||
|
|
||||||
// 定义emits
|
|
||||||
const emit = defineEmits<{
|
|
||||||
change: [value: any]
|
|
||||||
}>()
|
|
||||||
|
|
||||||
// 响应式数据
|
|
||||||
const isDropdownOpen = ref(false)
|
|
||||||
|
|
||||||
// 切换下拉菜单显示状态
|
|
||||||
const toggleDropdown = (event: Event) => {
|
|
||||||
event.stopPropagation()
|
|
||||||
isDropdownOpen.value = !isDropdownOpen.value
|
|
||||||
}
|
|
||||||
|
|
||||||
// 选择选项
|
|
||||||
const selectOption = (item: any) => {
|
|
||||||
emit('change', item.value)
|
|
||||||
isDropdownOpen.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取选中项的标签
|
|
||||||
const getSelectedLabel = () => {
|
|
||||||
const selectedItem = props.options.find(
|
|
||||||
(item: any) => item.value === props.selectedValue
|
|
||||||
)
|
|
||||||
return selectedItem ? selectedItem.label : '请选择'
|
|
||||||
}
|
|
||||||
|
|
||||||
// 点击外部关闭下拉菜单
|
|
||||||
const handleClickOutside = (event: Event) => {
|
|
||||||
const target = event.target as HTMLElement
|
|
||||||
if (!target.closest('.custom-select')) {
|
|
||||||
isDropdownOpen.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 组件挂载时添加全局点击事件监听
|
|
||||||
onMounted(() => {
|
|
||||||
document.addEventListener('click', handleClickOutside)
|
|
||||||
})
|
|
||||||
|
|
||||||
// 组件卸载时移除事件监听
|
|
||||||
onUnmounted(() => {
|
|
||||||
document.removeEventListener('click', handleClickOutside)
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.custom-select {
|
|
||||||
position: absolute;
|
|
||||||
top: 12px;
|
|
||||||
right: 14px;
|
|
||||||
font-size: 12px;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-display {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
height: 22px;
|
|
||||||
padding: 0 10px;
|
|
||||||
background-color: rgb(48, 110, 100);
|
|
||||||
color: #fff;
|
|
||||||
border-radius: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-text {
|
|
||||||
flex: 1;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-arrow {
|
|
||||||
margin-left: 8px;
|
|
||||||
font-size: 10px;
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
|
|
||||||
&.arrow-up {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-dropdown {
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
background-color: rgb(48, 110, 100);
|
|
||||||
border-radius: 6px;
|
|
||||||
margin-top: 2px;
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
||||||
overflow: hidden;
|
|
||||||
animation: slideDown 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-option {
|
|
||||||
padding: 10px 12px;
|
|
||||||
color: #fff;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background-color 0.2s ease;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.selected {
|
|
||||||
background-color: rgba(255, 255, 255, 0.2);
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:last-child) {
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slideDown {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-10px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
Loading…
Reference in New Issue
Block a user