From 920865c6f8394e9055cb963949ca37bb60b95494 Mon Sep 17 00:00:00 2001
From: gaohaifeng <zgaohaifeng@qq.com>
Date: Wed, 27 Aug 2025 17:03:51 +0800
Subject: [PATCH] =?UTF-8?q?feat(LineDropdownHaz):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E9=A3=8E=E9=99=A9=E7=BA=A7=E5=88=AB=E7=AD=9B=E9=80=89=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E5=B9=B6=E6=9B=B4=E6=96=B0=E5=9B=BE=E8=A1=A8=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增风险级别下拉选择器组件，支持按不同风险级别筛选报警数据
添加mock数据文件并实现数据处理逻辑
更新图表样式和交互逻辑
---
 .../LineDropdownHaz/index.ts                  |   2 +-
 .../LineDropdownHaz/index.vue                 | 164 +++++++++++++++---
 .../LineDropdownHaz/mock.json                 | 104 +++++++++++
 3 files changed, 246 insertions(+), 24 deletions(-)
 create mode 100644 src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/mock.json

diff --git a/src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/index.ts b/src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/index.ts
index 3a15436..cf01f25 100644
--- a/src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/index.ts
+++ b/src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/index.ts
@@ -5,7 +5,7 @@ export const LineDropdownConfig: ConfigType = {
   key: 'LineDropdownHaz',
   chartKey: 'VLineDropdownHaz',
   conKey: 'VCLineDropdownHaz',
-  title: '下拉折线图',
+  title: '报警趋势',
   category: 'HazardousChemicalsSpace',
   categoryName: '危化品场景',
   package: PackagesCategoryEnum.CHARTS,
diff --git a/src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/index.vue b/src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/index.vue
index 68917c2..d9c2196 100644
--- a/src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/index.vue
+++ b/src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/index.vue
@@ -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 {
diff --git a/src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/mock.json b/src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/mock.json
new file mode 100644
index 0000000..4e71645
--- /dev/null
+++ b/src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/mock.json
@@ -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
+        }
+    ]
+}
\ No newline at end of file