refactor(Charts): 重构折线图组件

- 移除自定义标题和边框样式，使用公共组件 PublicSmallBorder
- 添加 titleText 配置项

src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/config.ts

@@ -9,6 +9,7 @@ export const includes = ['xAxis', 'yAxis', 'grid']
 // 其它配置
 const otherConfig = {
   dateTime: {
+    show: true,
     selectValue: 'day',
     dataset: [
       {
@@ -34,6 +35,7 @@ const otherConfig = {
     ]
   },
   sceneCode: '',
+  titleText: "报警趋势"
 }
 
 export const option = {

src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/index.vue

@@ -1,28 +1,24 @@
 <template>
   <div class="go-border-box">
-    <img src="./assets/title.svg" class="svg" />
-    <div class="header-title">报警趋势</div>
-    <CustomSelect 
-            :options="option.dateTime.dataset" 
-            :selectedValue="option.dateTime.selectValue"
-            @change="handleSelectChange"
-        />
+    <PublicSmallBorder :title-text="option.titleText" :select-option="option.dateTime" @change="handleSelectChange">
+      <!-- <CustomSelect :options="option.dateTime.dataset" :selectedValue="option.dateTime.selectValue"
+        @change="handleSelectChange" /> -->
 
       <div class="line-dropdown-container">
         <!-- 新增的风险级别下拉框 -->
         <div class="risk-level-select">
-        <CustomSelect 
-                :options="riskLevelOptions" 
-                :selectedValue="selectedRiskLevel"
-                @change="handleRiskLevelChange"
-            />
+          <CustomSelect :options="riskLevelOptions" :selectedValue="selectedRiskLevel"
+            @change="handleRiskLevelChange" />
         </div>
 
         <!-- 折线图 -->
         <div class="chart-container">
-        <v-chart ref="vChartRef" autoresize :init-options="initOptions" :theme="themeColor" :option="option"></v-chart>
+          <v-chart ref="vChartRef" autoresize :init-options="initOptions" :theme="themeColor"
+            :option="option"></v-chart>
         </div>
       </div>
+    </PublicSmallBorder>
+
   </div>
 </template>
 
@@ -39,6 +35,7 @@ import config, { includes } from './config'
 import { DatasetComponent, GridComponent, TooltipComponent } from 'echarts/components'
 import CustomSelect from './select.vue'
 import axiosInstance from '@/api/axios'
+import PublicSmallBorder from '../../Public_SmallBorder/index.vue'
 
 const props = defineProps({
   themeSetting: {
@@ -96,7 +93,7 @@ const processChartData = async (timeType: string, riskLevel: number) => {
   const rawData = await fetchChartData(timeType, riskLevel)
 
   // 根据时间类型处理数据格式
-  let processedData: Array<{time: string, value: number}> = []
+  let processedData: Array<{ time: string, value: number }> = []
 
   switch (timeType) {
     case 'day':
@@ -173,7 +170,7 @@ onMounted(() => {
 .line-dropdown-container {
   width: 100%;
   height: 100%;
-  background: rgba(13, 16, 22, 1);
+  /* background: rgba(13, 16, 22, 1); */
   position: relative;
 }
 
@@ -319,7 +316,7 @@ onMounted(() => {
   transform: translateY(-50%) rotate(180deg);
 }
 
-.custom-dropdown1:focus + .dropdown-arrow {
+.custom-dropdown1:focus+.dropdown-arrow {
   transform: translateY(-50%) rotate(180deg);
   color: rgba(58, 160, 255, 1);
   text-shadow: 0 0 8px rgba(58, 160, 255, 0.5);
@@ -334,59 +331,6 @@ onMounted(() => {
 </style>
 
 <style lang="scss" scoped>
-@include go(border-box) {
-  position: relative;
-  border-radius: 5px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  // 不渐变
-  // background-color: #0E121B;
-  // 渐变
-  background: linear-gradient(to top,
-      rgba(14, 18, 27, 1) 0%,
-      rgba(14, 18, 27, 0.6) 100%);
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-radius: 5px;
-    padding: 2px;
-    /* 边框宽度 */
-    background: linear-gradient(to top,
-        rgba(128, 128, 128, 0.3),
-        rgba(128, 128, 128, 0));
-    -webkit-mask:
-      linear-gradient(#fff, #fff) content-box,
-      linear-gradient(#fff, #fff);
-    -webkit-mask-composite: xor;
-    mask-composite: exclude;
-    pointer-events: none;
-  }
-}
-
-.header-title {
-  position: absolute;
-  height: 45px;
-  line-height: 45px;
-  left: 80px;
-  white-space: nowrap;
-  font-family: 'CustomFont';
-  font-style: italic;
-  letter-spacing: 0.5px;
-  color: #eee;
-  text-shadow: 1px 3px 10px #000000;
-  font-size: 16px;
-}
-
 // 新增风险级别下拉框样式
 .risk-level-select {
   position: relative;
@@ -429,9 +373,4 @@ onMounted(() => {
     }
   }
 }
-
-.svg {
-  width: 100%;
-  height: 45px;
-}
 </style>