From 97a7efab9f24f9c71a09b5fd381c4d247097c28d Mon Sep 17 00:00:00 2001
From: Free-sss <630042479@qq.com>
Date: Mon, 1 Sep 2025 16:45:36 +0800
Subject: [PATCH] =?UTF-8?q?chore=EF=BC=9A=E7=BB=9F=E4=B8=80=E5=B0=8F?=
 =?UTF-8?q?=E6=A0=87=E9=A2=98css=EF=BC=9A=20font-family:=20'CustomFont';?=
 =?UTF-8?q?=20=20=20=20=20font-style:=20italic;=20=20=20=20=20letter-spaci?=
 =?UTF-8?q?ng:=200.5px;=20=20=20=20=20color:=20#eee;=20=20=20=20=20text-sh?=
 =?UTF-8?q?adow:=201px=203px=2010px=20#000000;=20=20=20=20=20font-size:=20?=
 =?UTF-8?q?16px;=20=20=20=20=20=E5=A4=A7=E6=A0=87=E9=A2=98css=EF=BC=9Afont?=
 =?UTF-8?q?-family:=20'CustomFont';=20=20=20=20=20color:#eee?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ConfinedSpace/AlarmNowList/config.ts      |  5 --
 .../FiniteSpatialDistribution/config.ts       |  2 +-
 .../FiniteSpatialDistribution/index.vue       | 27 +++---
 .../ConfinedSpace/PieCircleCommen/config.ts   |  5 --
 .../ConfinedSpace/SmallBorder01Co/index.vue   |  8 +-
 .../Charts/ConfinedSpace/videoCheck/config.ts |  5 --
 .../AlarmListHaz/config.ts                    |  9 +-
 .../AlarmListHaz/index.vue                    |  9 +-
 .../AlarmListHazC/config.ts                   | 11 ++-
 .../AlarmListHazC/index.vue                   |  7 ++
 .../LineDropdownHaz/index.vue                 | 24 ++---
 .../LineGraph01Haz/index.vue                  | 57 ++++++------
 .../MaxTrimHaz/config.ts                      |  4 +-
 .../MaxTrimHaz/index.vue                      |  7 +-
 .../PieCenterHaz/index.vue                    | 11 +--
 .../SmallBorder/index.vue                     |  4 +-
 .../TopAlarmsHaz/config.ts                    | 40 ++++-----
 .../TopAlarmsHaz/index.vue                    | 19 ++--
 .../yushiVideoHaz/index.vue                   | 88 +++++++------------
 19 files changed, 164 insertions(+), 178 deletions(-)

diff --git a/src/packages/components/Charts/ConfinedSpace/AlarmNowList/config.ts b/src/packages/components/Charts/ConfinedSpace/AlarmNowList/config.ts
index 6884688..bf3a7e4 100644
--- a/src/packages/components/Charts/ConfinedSpace/AlarmNowList/config.ts
+++ b/src/packages/components/Charts/ConfinedSpace/AlarmNowList/config.ts
@@ -7,11 +7,6 @@ import { chartInitConfig } from '@/settings/designSetting'
 export const styleConfig = {
   titleText: '实时报警',
   titleOption: {
-    color: '#ffffff',
-    fontSize: '17px',
-    fontStyle: 'normal',
-    fontWeight: 'normal',
-    fontFamily: 'CustomFont',
   },
   headerOption: {
     paddingLeft: 0,
diff --git a/src/packages/components/Charts/ConfinedSpace/FiniteSpatialDistribution/config.ts b/src/packages/components/Charts/ConfinedSpace/FiniteSpatialDistribution/config.ts
index eaffaac..0d6476f 100644
--- a/src/packages/components/Charts/ConfinedSpace/FiniteSpatialDistribution/config.ts
+++ b/src/packages/components/Charts/ConfinedSpace/FiniteSpatialDistribution/config.ts
@@ -123,5 +123,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
     public key: string = FiniteSpatialDistributionConfig.key
     public chartConfig = cloneDeep(FiniteSpatialDistributionConfig)
     public option = echartOptionProfixHandle(option, includes)
-    public attr = { ...chartInitConfig, x: 0, y: 0, w: 430, h: 300, zIndex: 1 }
+    public attr = { ...chartInitConfig, x: 0, y: 0, w: 420, h: 280, zIndex: 1 }
 }
\ No newline at end of file
diff --git a/src/packages/components/Charts/ConfinedSpace/FiniteSpatialDistribution/index.vue b/src/packages/components/Charts/ConfinedSpace/FiniteSpatialDistribution/index.vue
index 9e5410d..4e56dd5 100644
--- a/src/packages/components/Charts/ConfinedSpace/FiniteSpatialDistribution/index.vue
+++ b/src/packages/components/Charts/ConfinedSpace/FiniteSpatialDistribution/index.vue
@@ -24,7 +24,7 @@ import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components'
 import dataJson from './data.json'
-import {  getPie3D } from './3dPie'
+import { getPie3D } from './3dPie'
 import axiosInstance from '@/api/axios';
 
 const props = defineProps({
@@ -55,12 +55,12 @@ const initializeChartData = () => {
     // 使用 dataJson 中的 source 数据初始化图表
     if (dataJson && dataJson.source) {
         props.chartConfig.option.dataset = { ...dataJson }
-        
+
         // 计算总数并更新标题
         const totalValue = dataJson.source.reduce((total: number, item: any) => {
             return total + (item.value || 0)
         }, 0)
-        
+
         // 更新图表标题中的总数
         if (props.chartConfig.option.title && props.chartConfig.option.title[0]) {
             props.chartConfig.option.title[0].text = totalValue
@@ -68,8 +68,8 @@ const initializeChartData = () => {
 
         const series = getPie3D(dataJson.source, 0.8);
 
-        props.chartConfig.option.series=series
-        
+        props.chartConfig.option.series = series
+
         console.log('图表数据已初始化:', props.chartConfig.option.dataset)
     }
 }
@@ -79,11 +79,11 @@ const updateChartData = (newData: any) => {
 
     // 确保数据被正确设置到图表配置中
     props.chartConfig.option.dataset = newData
-    
+
     const totalValue = newData.source.reduce((total: number, item: any) => {
         return total + (item.value || 0)
     }, 0)
-    
+
     // 更新图表标题中的总数
     if (props.chartConfig.option.title && props.chartConfig.option.title[0]) {
         props.chartConfig.option.title[0].text = totalValue
@@ -158,13 +158,14 @@ onMounted(async () => {
     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;
+    left: 70px;
     white-space: nowrap;
+    font-family: 'CustomFont';
+    font-style: italic;
+    letter-spacing: 0.5px;
+    color: #eee;
+    text-shadow: 1px 3px 10px #000000;
+    font-size: 16px;
 }
 
 
diff --git a/src/packages/components/Charts/ConfinedSpace/PieCircleCommen/config.ts b/src/packages/components/Charts/ConfinedSpace/PieCircleCommen/config.ts
index 0c30084..aadabad 100644
--- a/src/packages/components/Charts/ConfinedSpace/PieCircleCommen/config.ts
+++ b/src/packages/components/Charts/ConfinedSpace/PieCircleCommen/config.ts
@@ -45,11 +45,6 @@ const otherConfig = {
   },
   titleText: '报警统计',
   titleOption: {
-    color: '#ffffff',
-    fontSize: '17px',
-    fontStyle: 'normal',
-    fontWeight: 'normal',
-    fontFamily: 'CustomFont',
   },
   headerOption: {
     paddingLeft: 0,
diff --git a/src/packages/components/Charts/ConfinedSpace/SmallBorder01Co/index.vue b/src/packages/components/Charts/ConfinedSpace/SmallBorder01Co/index.vue
index 83f9b7d..1488353 100644
--- a/src/packages/components/Charts/ConfinedSpace/SmallBorder01Co/index.vue
+++ b/src/packages/components/Charts/ConfinedSpace/SmallBorder01Co/index.vue
@@ -366,9 +366,11 @@ const handleSelectChange = (value: any) => {
 
       .title {
         font-family: 'CustomFont';
-        letter-spacing: 1px;
-        color: #ffffff;
-        font-size: 17px;
+        font-style: italic;
+        letter-spacing: 0.5px;
+        color: #eee;
+        text-shadow: 1px 3px 10px #000000;
+        font-size: 16px;
         padding-left: 45px;
       }
     }
diff --git a/src/packages/components/Charts/ConfinedSpace/videoCheck/config.ts b/src/packages/components/Charts/ConfinedSpace/videoCheck/config.ts
index 7a8ecab..7afce1d 100644
--- a/src/packages/components/Charts/ConfinedSpace/videoCheck/config.ts
+++ b/src/packages/components/Charts/ConfinedSpace/videoCheck/config.ts
@@ -29,11 +29,6 @@ export const option = {
   isOldStyle: true,
   titleText: '视频巡查',
   titleOption: {
-    color: '#ffffff',
-    fontSize: '17px',
-    fontStyle: 'normal',
-    fontWeight: 'normal',
-    fontFamily: 'CustomFont',
   },
   headerOption: {
     paddingLeft: 0,
diff --git a/src/packages/components/Charts/HazardousChemicalsSpace/AlarmListHaz/config.ts b/src/packages/components/Charts/HazardousChemicalsSpace/AlarmListHaz/config.ts
index 82a22b6..5e771f7 100644
--- a/src/packages/components/Charts/HazardousChemicalsSpace/AlarmListHaz/config.ts
+++ b/src/packages/components/Charts/HazardousChemicalsSpace/AlarmListHaz/config.ts
@@ -36,14 +36,13 @@ export const option = {
   itemHeight: 28,
   fontSize: 12,
   title: '近60分钟报警信息',
-  titleSize: 17,
+  titleSize: 16,
   titleColor: '#ffffff',
-  iconColor: '#00E5FF',
   fontWeight: 'normal',
-  fontStyle: 'normal',
-  paddingX: 40,
+  fontStyle: 'italic',
+  paddingX: 50,
   paddingY: -30,
-  letterSpacing: 1,
+  letterSpacing: 0.5,
   isShowButton: false
 }
 
diff --git a/src/packages/components/Charts/HazardousChemicalsSpace/AlarmListHaz/index.vue b/src/packages/components/Charts/HazardousChemicalsSpace/AlarmListHaz/index.vue
index 9f53c41..3d71c36 100644
--- a/src/packages/components/Charts/HazardousChemicalsSpace/AlarmListHaz/index.vue
+++ b/src/packages/components/Charts/HazardousChemicalsSpace/AlarmListHaz/index.vue
@@ -104,7 +104,14 @@ const getStatusColor = (status: string) => {
         height: 35px;
         display: flex;
         align-items: center;
-        padding: 0 20px 0 20px;
+        padding: 2px 20px 0 20px;
+
+        font-family: 'CustomFont';
+        font-style: italic;
+        letter-spacing: 0.5px;
+        color: #eee;
+        text-shadow: 1px 3px 10px #000000;
+        font-size: 16px;
       }
     }
 
diff --git a/src/packages/components/Charts/HazardousChemicalsSpace/AlarmListHazC/config.ts b/src/packages/components/Charts/HazardousChemicalsSpace/AlarmListHazC/config.ts
index 8ca1d9b..04f08d8 100644
--- a/src/packages/components/Charts/HazardousChemicalsSpace/AlarmListHazC/config.ts
+++ b/src/packages/components/Charts/HazardousChemicalsSpace/AlarmListHazC/config.ts
@@ -37,14 +37,13 @@ export const option = {
   itemHeight: 28,
   fontSize: 12,
   title: '近60分钟报警信息',
-  titleSize: 17,
+  titleSize: 16,
   titleColor: '#ffffff',
-  iconColor: '#00E5FF',
   fontWeight: 'normal',
-  fontStyle: 'normal',
-  paddingX: 40,
-  paddingY: -30,
-  letterSpacing: 1,
+  fontStyle: 'italic',
+  paddingX: 45,
+  paddingY: -25,
+  letterSpacing: 0.5,
   isShowButton: false
 }
 
diff --git a/src/packages/components/Charts/HazardousChemicalsSpace/AlarmListHazC/index.vue b/src/packages/components/Charts/HazardousChemicalsSpace/AlarmListHazC/index.vue
index 101efc2..69cf55e 100644
--- a/src/packages/components/Charts/HazardousChemicalsSpace/AlarmListHazC/index.vue
+++ b/src/packages/components/Charts/HazardousChemicalsSpace/AlarmListHazC/index.vue
@@ -179,6 +179,13 @@ onUnmounted(() => {
         display: flex;
         align-items: center;
         padding: 0 20px 0 20px;
+
+        font-family: 'CustomFont';
+        font-style: italic;
+        letter-spacing: 0.5px;
+        color: #eee;
+        text-shadow: 1px 3px 10px #000000;
+        font-size: 16px;
       }
     }
 
diff --git a/src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/index.vue b/src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/index.vue
index d878ece..43930ec 100644
--- a/src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/index.vue
+++ b/src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/index.vue
@@ -371,18 +371,18 @@ onMounted(() => {
   }
 }
 
-.header-title{
-    position: absolute;
-    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;
+.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;
 }
 
 // 新增风险级别下拉框样式
diff --git a/src/packages/components/Charts/HazardousChemicalsSpace/LineGraph01Haz/index.vue b/src/packages/components/Charts/HazardousChemicalsSpace/LineGraph01Haz/index.vue
index d51fa72..d81d0a4 100644
--- a/src/packages/components/Charts/HazardousChemicalsSpace/LineGraph01Haz/index.vue
+++ b/src/packages/components/Charts/HazardousChemicalsSpace/LineGraph01Haz/index.vue
@@ -1,17 +1,14 @@
 <template>
   <div class="go-border-box">
-    
+
     <img src="./assets/title.svg" class="svg" />
     <div class="buttonContent">
       <span class="title">报警处置情况</span>
     </div>
 
     <!-- 使用新的下拉选择器组件 -->
-    <CustomSelect 
-        :options="option.dateTime.dataset" 
-        :selectedValue="option.dateTime.selectValue"
-        @change="handleSelectChange"
-    />
+    <CustomSelect :options="option.dateTime.dataset" :selectedValue="option.dateTime.selectValue"
+      @change="handleSelectChange" />
 
     <div class="textContent">
       <div class="textInContent">
@@ -39,7 +36,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { PropType, computed, watch, ref, nextTick,onMounted } from 'vue'
+import { PropType, computed, watch, ref, nextTick, onMounted } from 'vue'
 import VChart from 'vue-echarts'
 import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
@@ -72,7 +69,7 @@ const props = defineProps({
 const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
 
 const option = computed(() => {
-    return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 
 use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
@@ -108,7 +105,7 @@ const convertToChineseWeekday = (dateString: string): string => {
 // 数据转换函数：将API返回的数据转换为组件需要的格式
 const convertApiDataToMockFormat = async (timeRange: string) => {
   const dataArray = await fetchChartData(timeRange)
-  
+
   if (!Array.isArray(dataArray) || dataArray.length === 0) {
     return {
       alertTotal: 0,
@@ -117,16 +114,16 @@ const convertApiDataToMockFormat = async (timeRange: string) => {
       datavalues: [['时间', '数值']]
     }
   }
-  
+
   // 计算聚合数据
   const alertTotal = dataArray.reduce((sum, item) => sum + (item.alarm_count || 0), 0)
   const unprocessedAlert = dataArray.reduce((sum, item) => sum + (item.un_alarm_count || 0), 0)
   const avgHandleTimeSum = dataArray.reduce((sum, item) => sum + (item.avg_handle_time_seconds || 0), 0)
   const averageResolutionTime = Math.round(avgHandleTimeSum / dataArray.length)
-  
+
   // 根据不同时间范围生成datavalues
   let datavalues: (string | number)[][] = [['时间', '数值']]
-  
+
   switch (timeRange) {
     case 'day':
       datavalues = [['时间', '数值'], ...dataArray.map(item => [
@@ -140,12 +137,12 @@ const convertApiDataToMockFormat = async (timeRange: string) => {
         const date = new Date(item.alarm_time_)
         return date.getDay() === 1 // 周一
       })
-      
+
       // 如果找到周一，则从周一开始截取数据；否则保持原数据
-      const filteredData = firstMondayIndex !== -1 
-        ? dataArray.slice(firstMondayIndex) 
+      const filteredData = firstMondayIndex !== -1
+        ? dataArray.slice(firstMondayIndex)
         : dataArray
-      
+
       datavalues = [['时间', '数值'], ...filteredData.map(item => [
         convertToChineseWeekday(item.alarm_time_),
         item.avg_handle_time_seconds || 0
@@ -172,7 +169,7 @@ const convertApiDataToMockFormat = async (timeRange: string) => {
     default:
       datavalues = [['时间', '数值']]
   }
-  
+
   return {
     alertTotal,
     unprocessedAlert,
@@ -198,12 +195,12 @@ const updateChartData = async () => {
 // 图表配置
 const chartOption = computed(() => {
   const mergedOption = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
-  
+
   if (!mergedOption.dataset) {
     mergedOption.dataset = {}
   }
   mergedOption.dataset.source = currentData.value.datavalues
-  
+
   return mergedOption
 })
 
@@ -400,13 +397,21 @@ onMounted(() => {
 
 .buttonContent span {
 
-  font-size: 15px;
-  color: #ffffff;
-  letter-spacing: 2px;
-  font-weight: 500;
-  text-shadow: -4px -4px 10px #3B8ED4;
-  padding: 0;
-  margin: 0;
+  font-family: 'CustomFont';
+  font-style: italic;
+  letter-spacing: 0.5px;
+  color: #eee;
+  text-shadow: 1px 3px 10px #000000;
+  font-size: 16px;
+  margin-top: -2px;
+}
 
+.title {
+  font-family: 'CustomFont';
+  font-style: italic;
+  letter-spacing: 0.5px;
+  color: #eee;
+  text-shadow: 1px 3px 10px #000000;
+  font-size: 16px;
 }
 </style>
diff --git a/src/packages/components/Charts/HazardousChemicalsSpace/MaxTrimHaz/config.ts b/src/packages/components/Charts/HazardousChemicalsSpace/MaxTrimHaz/config.ts
index 8a576aa..1fbb8ab 100644
--- a/src/packages/components/Charts/HazardousChemicalsSpace/MaxTrimHaz/config.ts
+++ b/src/packages/components/Charts/HazardousChemicalsSpace/MaxTrimHaz/config.ts
@@ -3,6 +3,7 @@ import { CreateComponentType } from '@/packages/index.d'
 import { MaxTrimConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 import { chartInitConfig } from '@/settings/designSetting'
+import { fontFamily } from 'html2canvas/dist/types/css/property-descriptors/font-family'
 
 export enum WritingModeEnum {
   HORIZONTAL = '水平',
@@ -41,10 +42,11 @@ export const option = {
   paddingX: 35,
   paddingY: 6,
   textAlign: 'start', // 水平对齐方式
-  fontWeight: 'bold',
+  fontWeight: 'normal',
   fontStyle: 'italic',
   // 字间距
   letterSpacing: 10,
+  fontFamily: 'CustomFont',
   writingMode: 'horizontal-tb',
   backgroundColor: '#00000000'
 }
diff --git a/src/packages/components/Charts/HazardousChemicalsSpace/MaxTrimHaz/index.vue b/src/packages/components/Charts/HazardousChemicalsSpace/MaxTrimHaz/index.vue
index 472ce16..a76e979 100644
--- a/src/packages/components/Charts/HazardousChemicalsSpace/MaxTrimHaz/index.vue
+++ b/src/packages/components/Charts/HazardousChemicalsSpace/MaxTrimHaz/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="go-text-box">
-    <div class="content" >
+    <div class="content">
       {{ option.dataset }}
     </div>
     <svg width="1920" height="94" class="svg" viewBox="0 0 1920 94" fill="none"
@@ -286,7 +286,7 @@ const { fontColor,
   writingMode,
   backgroundColor,
   fontWeight,
-  fontStyle, fontShadowColor } = toRefs(props.chartConfig.option)
+  fontStyle, fontShadowColor, fontFamily } = toRefs(props.chartConfig.option)
 
 const option = shallowReactive({
   dataset: configOption.dataset
@@ -333,7 +333,8 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
   font-weight: v-bind('fontWeight');
   font-style: v-bind('fontStyle');
   background-color: v-bind('backgroundColor');
-  text-shadow: 0px 4px 3px  v-bind('fontShadowColor');
+  text-shadow: 0px 4px 3px v-bind('fontShadowColor');
+  font-family: v-bind('fontFamily');
 }
 
 .go-text-box .svg {
diff --git a/src/packages/components/Charts/HazardousChemicalsSpace/PieCenterHaz/index.vue b/src/packages/components/Charts/HazardousChemicalsSpace/PieCenterHaz/index.vue
index 91ea3ed..cc2a78c 100644
--- a/src/packages/components/Charts/HazardousChemicalsSpace/PieCenterHaz/index.vue
+++ b/src/packages/components/Charts/HazardousChemicalsSpace/PieCenterHaz/index.vue
@@ -328,12 +328,13 @@ const handleSelectChange = async (value: string) => {
     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;
+    font-family: 'CustomFont';
+    font-style: italic;
+    letter-spacing: 0.5px;
+    color: #eee;
+    text-shadow: 1px 3px 10px #000000;
+    font-size: 16px;
 }
 
 
diff --git a/src/packages/components/Charts/HazardousChemicalsSpace/SmallBorder/index.vue b/src/packages/components/Charts/HazardousChemicalsSpace/SmallBorder/index.vue
index fc78efd..4b04a06 100644
--- a/src/packages/components/Charts/HazardousChemicalsSpace/SmallBorder/index.vue
+++ b/src/packages/components/Charts/HazardousChemicalsSpace/SmallBorder/index.vue
@@ -67,9 +67,11 @@ $border-gradient-end: rgba(128, 128, 128, 0);
     // z-index: 2;
     width: 100%;
     height: 12%;
-    .svg{
+
+    .svg {
       width: 100%;
     }
+
     // background-color: antiquewhite;
 
     & .svg {
diff --git a/src/packages/components/Charts/HazardousChemicalsSpace/TopAlarmsHaz/config.ts b/src/packages/components/Charts/HazardousChemicalsSpace/TopAlarmsHaz/config.ts
index 11c4721..97562f3 100644
--- a/src/packages/components/Charts/HazardousChemicalsSpace/TopAlarmsHaz/config.ts
+++ b/src/packages/components/Charts/HazardousChemicalsSpace/TopAlarmsHaz/config.ts
@@ -3,7 +3,7 @@ import { CreateComponentType } from '@/packages/index.d'
 import { TopAlarmsConfig } from './index'
 import dataJson from './data.json'
 export const option = {
-  dateTime: {
+    dateTime: {
         selectValue: 'day',
         dataset: [
             {
@@ -29,26 +29,26 @@ export const option = {
         ]
     },
 
-  dataset: dataJson.source,
-  title: '未处置报警数TOP5',
-  titleColor: '#ffffff',
-  titleSize: 17,
-  rankColor: '#5AA1AD',
-  nameColor: '#eeeeee',
-  valueColor: '#eeeeee',
-  barColorStart: '#2f72b5',
-  barColorEnd: '#99C6E6',
-  dropdownOptions: ['当日', '当月', '当年'],
-  dropdownDefault: '当日',
-  iconColor: '#00E5FF',
-  letterSpacing: 1,
-  paddingX: 40,
-  paddingY: -5,
-  isShowButton: false
+    dataset: dataJson.source,
+    title: '未处置报警数TOP5',
+    titleColor: '#ffffff',
+    titleSize: 16,
+    rankColor: '#5AA1AD',
+    nameColor: '#eeeeee',
+    valueColor: '#eeeeee',
+    barColorStart: '#2f72b5',
+    barColorEnd: '#99C6E6',
+    dropdownOptions: ['当日', '当月', '当年'],
+    dropdownDefault: '当日',
+    iconColor: '#00E5FF',
+    letterSpacing: 0.5,
+    paddingX: 45,
+    paddingY: -5,
+    isShowButton: false
 }
 export default class Config extends PublicConfigClass implements CreateComponentType {
-  public key = TopAlarmsConfig.key
-  public chartConfig = TopAlarmsConfig
-  public option = option
+    public key = TopAlarmsConfig.key
+    public chartConfig = TopAlarmsConfig
+    public option = option
 
 }
diff --git a/src/packages/components/Charts/HazardousChemicalsSpace/TopAlarmsHaz/index.vue b/src/packages/components/Charts/HazardousChemicalsSpace/TopAlarmsHaz/index.vue
index 9f966d4..e5969a6 100644
--- a/src/packages/components/Charts/HazardousChemicalsSpace/TopAlarmsHaz/index.vue
+++ b/src/packages/components/Charts/HazardousChemicalsSpace/TopAlarmsHaz/index.vue
@@ -1,12 +1,8 @@
 <template>
   <SmallBorder class="SmallBorder">
     <div class="go-top-alarms">
-      <CustomSelect 
-            :options="option.dateTime.dataset" 
-            :selectedValue="option.dateTime.selectValue"
-            @change="handleSelectChange"
-            class="top-select"
-        />
+      <CustomSelect :options="option.dateTime.dataset" :selectedValue="option.dateTime.selectValue"
+        @change="handleSelectChange" class="top-select" />
       <div class="header">
         <div class="title">
           <div class="title-text">
@@ -143,7 +139,7 @@ onMounted(async () => {
   color: #fff;
 
   .top-select {
-    top:20px;
+    top: 20px;
   }
 
   .header {
@@ -161,9 +157,16 @@ onMounted(async () => {
         height: 35px;
         display: flex;
         align-items: center;
-        padding: 0 20px 0 20px;
+        padding: 2px 20px 0 20px;
         margin-left: 0px;
         clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
+
+        font-family: 'CustomFont';
+        font-style: italic;
+        letter-spacing: 0.5px;
+        color: #eee;
+        text-shadow: 1px 3px 10px #000000;
+        font-size: 16px;
       }
     }
 
diff --git a/src/packages/components/Charts/HazardousChemicalsSpace/yushiVideoHaz/index.vue b/src/packages/components/Charts/HazardousChemicalsSpace/yushiVideoHaz/index.vue
index f9517cc..629e8f3 100644
--- a/src/packages/components/Charts/HazardousChemicalsSpace/yushiVideoHaz/index.vue
+++ b/src/packages/components/Charts/HazardousChemicalsSpace/yushiVideoHaz/index.vue
@@ -5,53 +5,23 @@
     <div class="header-title">实时视频</div>
     <div :class="option.isOldStyle ? 'video_title' : 'video_title video_title_new'" v-if="option.showBtn">
       <div class="title_text" v-if="option.showTree && option.showBtn">{{ option.videoTitle }}</div>
-      <n-select
-        v-if="!option.showTree"
-        class="video_select"
-        placement="top-end"
-        v-model:value="option.selectedDataSource"
-        :options="option.dataSource"
-        :style="`width:${w / 2}px;`"
-        @update:value="handleSelectDataSource"
-      />
-      <n-button
-        tertiary
-        v-else-if="option.showTree && option.showBtn && option.isOldStyle"
+      <n-select v-if="!option.showTree" class="video_select" placement="top-end"
+        v-model:value="option.selectedDataSource" :options="option.dataSource" :style="`width:${w / 2}px;`"
+        @update:value="handleSelectDataSource" />
+      <n-button tertiary v-else-if="option.showTree && option.showBtn && option.isOldStyle"
         :class="option.isOldStyle ? 'videoChangBtn' : 'videoChangBtn videoChangBtn_new'"
-        @click="handleClick"
-        >切换</n-button
-      >
-      <n-button
-        tertiary
-        v-else-if="option.showTree && option.showBtn && !option.isOldStyle"
+        @click="handleClick">切换</n-button>
+      <n-button tertiary v-else-if="option.showTree && option.showBtn && !option.isOldStyle"
         :class="option.isOldStyle ? 'videoChangBtn' : 'videoChangBtn videoChangBtn_new'"
-        @click="handleClick"
-      ></n-button>
+        @click="handleClick"></n-button>
 
-      <n-modal
-        v-model:show="showDialog"
-        :mask-closable="false"
-        preset="card"
-        title="选择摄像头"
-        :class="['custom-tab-modal']"
-        :draggable="{ bounds: 'none' }"
-        :style="{ width: '644px', height: '420px' }"
-      >
-        <n-tree-select
-          ref="cameraTree"
-          class="cameraTree"
-          :menu-props="{
-            class: 'custom-dropdown'
-          }"
-          v-model:value="option.selectedDataSource"
-          :options="option.dataset.list"
-          clearable
-          :default-expanded-keys="option.expandedKeys"
-          style="width: 615px; margin-top: 16px"
-          :show="isDropdownOpen"
-          @update:show="handleShowChange"
-          @update:value="handleSelectDataSource"
-        />
+      <n-modal v-model:show="showDialog" :mask-closable="false" preset="card" title="选择摄像头"
+        :class="['custom-tab-modal']" :draggable="{ bounds: 'none' }" :style="{ width: '644px', height: '420px' }">
+        <n-tree-select ref="cameraTree" class="cameraTree" :menu-props="{
+          class: 'custom-dropdown'
+        }" v-model:value="option.selectedDataSource" :options="option.dataset.list" clearable
+          :default-expanded-keys="option.expandedKeys" style="width: 615px; margin-top: 16px" :show="isDropdownOpen"
+          @update:show="handleShowChange" @update:value="handleSelectDataSource" />
       </n-modal>
     </div>
     <div ref="vYushiVideoRef" class="go-video" :id="uuid"></div>
@@ -625,7 +595,7 @@ const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (n
 }
 </style>
 <style lang="scss">
-.custom-tab-modal > .n-card-header {
+.custom-tab-modal>.n-card-header {
   background-color: rgba(26, 56, 113, 1) !important;
   background-image: linear-gradient(to right, rgba(8, 100, 177, 0.7), transparent) !important;
   padding: 16px !important;
@@ -633,7 +603,7 @@ const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (n
   border-bottom-width: 0px !important;
 }
 
-.custom-tab-modal > .n-card__content {
+.custom-tab-modal>.n-card__content {
   background-color: rgba(26, 56, 113, 1) !important;
   border: 2px solid rgba(62, 200, 244, 1);
   padding-left: 12px;
@@ -729,6 +699,7 @@ const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (n
   box-shadow: unset !important;
   width: 615px !important;
 }
+
 .custom-data-table .v-binder-follower-content {
   transform: translateX(7px) translateY(104px) !important;
 }
@@ -773,18 +744,19 @@ const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (n
   }
 }
 
-.header-title{
-    position: absolute;
-    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;
+.header-title {
+  position: absolute;
+  top: 3px;
+  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;
 }
 
 .svg {