feat(LineDropdownHaz): 添加风险级别筛选功能并更新图表数据
新增风险级别下拉选择器组件，支持按不同风险级别筛选报警数据 添加mock数据文件并实现数据处理逻辑 更新图表样式和交互逻辑
This commit is contained in:
parent
5a62df9233
commit
920865c6f8
@ -5,7 +5,7 @@ export const LineDropdownConfig: ConfigType = {
|
||||
key: 'LineDropdownHaz',
|
||||
chartKey: 'VLineDropdownHaz',
|
||||
conKey: 'VCLineDropdownHaz',
|
||||
title: '下拉折线图',
|
||||
title: '报警趋势',
|
||||
category: 'HazardousChemicalsSpace',
|
||||
categoryName: '危化品场景',
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
|
||||
@ -7,17 +7,16 @@
|
||||
:selectedValue="option.dateTime.selectValue"
|
||||
@change="handleSelectChange"
|
||||
/>
|
||||
|
||||
<div class="line-dropdown-container">
|
||||
<!-- 下拉框 -->
|
||||
<!-- <div class="dropdown-container">
|
||||
<select v-model="selectedOption" @change="handleDropdownChange" class="custom-dropdown1">
|
||||
<option value="总数">总数</option>
|
||||
<option value="类型1">类型1</option>
|
||||
<option value="类型2">类型2</option>
|
||||
<option value="类型3">类型3</option>
|
||||
</select>
|
||||
<div class="dropdown-arrow">▼</div>
|
||||
</div> -->
|
||||
<!-- 新增的风险级别下拉框 -->
|
||||
<div class="risk-level-select">
|
||||
<CustomSelect
|
||||
:options="riskLevelOptions"
|
||||
:selectedValue="selectedRiskLevel"
|
||||
@change="handleRiskLevelChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 折线图 -->
|
||||
<div class="chart-container">
|
||||
@ -28,7 +27,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, PropType, ref, watch } from 'vue'
|
||||
import { computed, PropType, ref, watch, onMounted } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use } from 'echarts/core'
|
||||
@ -38,6 +37,7 @@ import { mergeTheme } from '@/packages/public/chart'
|
||||
import config, { includes } from './config'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent } from 'echarts/components'
|
||||
import CustomSelect from './select.vue'
|
||||
import mockData from './mock.json'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
@ -56,10 +56,86 @@ const props = defineProps({
|
||||
|
||||
const selectedOption = ref('总数')
|
||||
|
||||
// 新增风险级别相关状态
|
||||
const selectedRiskLevel = ref('全部')
|
||||
const riskLevelOptions = ref([
|
||||
{ label: '全部', value: '全部' },
|
||||
{ label: '重大风险', value: '重大风险' },
|
||||
{ label: '较大风险', value: '较大风险' },
|
||||
{ label: '一般风险', value: '一般风险' },
|
||||
{ label: '低风险', value: '低风险' }
|
||||
])
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent])
|
||||
|
||||
// 数据处理函数
|
||||
const processChartData = (timeType: string, riskLevel: string) => {
|
||||
const rawData = mockData[timeType as keyof typeof mockData] || []
|
||||
|
||||
// 根据时间类型处理数据格式
|
||||
let processedData: Array<{time: string, value: number}> = []
|
||||
|
||||
switch (timeType) {
|
||||
case 'day':
|
||||
processedData = rawData.map((item: any) => ({
|
||||
time: `${item.hour}:00`,
|
||||
value: item.alarm_count
|
||||
}))
|
||||
break
|
||||
case 'week':
|
||||
const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
|
||||
processedData = rawData.map((item: any) => ({
|
||||
time: weekDays[item.dayOfWeek],
|
||||
value: item.alarm_count
|
||||
}))
|
||||
break
|
||||
case 'month':
|
||||
processedData = rawData.map((item: any) => ({
|
||||
time: `${item.day}日`,
|
||||
value: item.alarm_count
|
||||
}))
|
||||
break
|
||||
case 'quarter':
|
||||
case 'year':
|
||||
processedData = rawData.map((item: any) => ({
|
||||
time: `${item.month}月`,
|
||||
value: item.alarm_count
|
||||
}))
|
||||
break
|
||||
default:
|
||||
processedData = []
|
||||
}
|
||||
|
||||
// 根据风险级别过滤数据（这里可以根据实际需求调整过滤逻辑）
|
||||
if (riskLevel !== '全部') {
|
||||
// 示例：根据风险级别调整数值（实际项目中应该有对应的风险级别数据）
|
||||
const riskMultiplier = {
|
||||
'重大风险': 0.4,
|
||||
'较大风险': 0.3,
|
||||
'一般风险': 0.2,
|
||||
'低风险': 0.1
|
||||
}[riskLevel] || 1
|
||||
|
||||
processedData = processedData.map(item => ({
|
||||
...item,
|
||||
value: Math.round(item.value * riskMultiplier)
|
||||
}))
|
||||
}
|
||||
|
||||
return {
|
||||
dimensions: ['time', 'value'],
|
||||
source: processedData
|
||||
}
|
||||
}
|
||||
|
||||
// 更新图表数据
|
||||
const updateChartData = () => {
|
||||
const newData = processChartData(props.chartConfig.option.dateTime.selectValue, selectedRiskLevel.value)
|
||||
props.chartConfig.option.dataset = newData
|
||||
}
|
||||
|
||||
const option = computed(() => {
|
||||
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
})
|
||||
@ -69,10 +145,23 @@ const handleDropdownChange = () => {
|
||||
console.log('Selected option:', selectedOption.value)
|
||||
}
|
||||
|
||||
// 处理下拉选择器变化
|
||||
// 处理时间下拉选择器变化
|
||||
const handleSelectChange = (value: any) => {
|
||||
props.chartConfig.option.dateTime.selectValue = value
|
||||
updateChartData()
|
||||
}
|
||||
|
||||
// 新增风险级别选择处理函数
|
||||
const handleRiskLevelChange = (value: any) => {
|
||||
selectedRiskLevel.value = value
|
||||
updateChartData()
|
||||
console.log('Selected risk level:', value)
|
||||
}
|
||||
|
||||
// 组件挂载时初始化数据
|
||||
onMounted(() => {
|
||||
updateChartData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -293,18 +382,47 @@ const handleSelectChange = (value: any) => {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.header-title{
|
||||
position: absolute;
|
||||
// 新增风险级别下拉框样式
|
||||
.risk-level-select {
|
||||
position: relative;
|
||||
width: 90%;
|
||||
margin: 10px auto 0;
|
||||
|
||||
:deep(.custom-select) {
|
||||
z-index: 999;
|
||||
position: relative;
|
||||
top: 0;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
left: 80px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #eee;
|
||||
font-style: italic;
|
||||
text-shadow: 0 0 10px #00E5FF;
|
||||
white-space: nowrap;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
:deep(.select-display) {
|
||||
background-color: rgb(19, 22, 33);
|
||||
border: 1px solid rgb(75, 83, 99);
|
||||
color: #fff;
|
||||
border-radius: 6px;
|
||||
padding: 0 12px;
|
||||
height: 28px;
|
||||
font-size: 12px;
|
||||
min-width: 90px;
|
||||
}
|
||||
|
||||
:deep(.select-dropdown) {
|
||||
background-color: rgb(19, 22, 33);
|
||||
border: 1px solid rgb(75, 83, 99);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
:deep(.select-option) {
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(75, 83, 99, 0.3);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: rgba(75, 83, 99, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.svg {
|
||||
|
||||
@ -0,0 +1,104 @@
|
||||
{
|
||||
"day": [
|
||||
{
|
||||
"alarm_count": 1,
|
||||
"hour": 6
|
||||
},
|
||||
{
|
||||
"alarm_count": 1,
|
||||
"hour": 7
|
||||
},
|
||||
{
|
||||
"alarm_count": 59,
|
||||
"hour": 12
|
||||
},
|
||||
{
|
||||
"alarm_count": 71,
|
||||
"hour": 13
|
||||
}
|
||||
],
|
||||
"week": [
|
||||
{
|
||||
"dayOfWeek": 1,
|
||||
"alarm_count": 14
|
||||
},
|
||||
{
|
||||
"dayOfWeek": 2,
|
||||
"alarm_count": 15
|
||||
},
|
||||
{
|
||||
"dayOfWeek": 3,
|
||||
"alarm_count": 132
|
||||
}
|
||||
],
|
||||
"month": [
|
||||
{
|
||||
"alarm_count": 13,
|
||||
"day": 17
|
||||
},
|
||||
{
|
||||
"alarm_count": 75,
|
||||
"day": 18
|
||||
},
|
||||
{
|
||||
"alarm_count": 94,
|
||||
"day": 19
|
||||
},
|
||||
{
|
||||
"alarm_count": 34,
|
||||
"day": 20
|
||||
},
|
||||
{
|
||||
"alarm_count": 23,
|
||||
"day": 21
|
||||
},
|
||||
{
|
||||
"alarm_count": 6,
|
||||
"day": 22
|
||||
},
|
||||
{
|
||||
"alarm_count": 14,
|
||||
"day": 25
|
||||
},
|
||||
{
|
||||
"alarm_count": 15,
|
||||
"day": 26
|
||||
},
|
||||
{
|
||||
"alarm_count": 132,
|
||||
"day": 27
|
||||
}
|
||||
],
|
||||
"quarter": [
|
||||
{
|
||||
"alarm_count": 18,
|
||||
"month": 7
|
||||
},
|
||||
{
|
||||
"alarm_count": 406,
|
||||
"month": 8
|
||||
}
|
||||
],
|
||||
"year": [
|
||||
{
|
||||
"alarm_count": 10,
|
||||
"month": 4
|
||||
},
|
||||
{
|
||||
"alarm_count": 10,
|
||||
"month": 5
|
||||
},
|
||||
{
|
||||
"alarm_count": 10,
|
||||
"month": 6
|
||||
},
|
||||
{
|
||||
"alarm_count": 18,
|
||||
"month": 7
|
||||
},
|
||||
{
|
||||
"alarm_count": 406,
|
||||
"month": 8
|
||||
}
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user