feat(图表): 添加图表标题样式并调整字体配置

添加Alibaba-PuHuiTi-Bold字体文件及样式
为PieCenter和LineDropdown组件添加标题样式
调整SceneDistribution组件的字体大小和颜色
移除PieCenter中未使用的z-index导入
在data.json中添加title字段

src/main.ts

@@ -17,6 +17,8 @@ import '@/styles/pages/index.scss'
 import 'animate.css/animate.min.css'
 // 引入标尺
 import 'vue3-sketch-ruler/lib/style.css'
+
+import '@/styles/font/font.scss'
 // 注册图标
 addCollection(uimIcons)
 addCollection(lineMdIcons)

src/packages/components/Charts/MyComponents/LineDropdown/index.vue

@@ -195,9 +195,10 @@
         </linearGradient>
       </defs>
     </svg>
+    <div class="header-title">报警趋势</div>
     <div class="line-dropdown-container">
       <!-- 下拉框 -->
-      <div class="dropdown-container">
+      <!-- <div class="dropdown-container">
         <select v-model="selectedOption" @change="handleDropdownChange" class="custom-dropdown1">
           <option value="总数">总数</option>
           <option value="类型1">类型1</option>
@@ -205,7 +206,7 @@
           <option value="类型3">类型3</option>
         </select>
         <div class="dropdown-arrow">▼</div>
-      </div>
+      </div> -->
 
       <!-- 折线图 -->
       <div class="chart-container">
@@ -417,7 +418,7 @@ const handleDropdownChange = () => {
   padding-top: 0px;
   box-sizing: border-box;
   width: 100%;
-  height: 85%;
+  height: 100%;
 }
 </style>
 
@@ -461,9 +462,36 @@ const handleDropdownChange = () => {
   }
 }
 
+.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: 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;
+}
+
 .svg {
   width: 100%;
-  height: 15%;
-  // background-color: #F7BDA7;
+  height: 45px;
 }
 </style>

src/packages/components/Charts/MyComponents/PieCenter/config.ts

@@ -3,7 +3,6 @@ import { PieCenterConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
-import { zIndex } from 'html2canvas/dist/types/css/property-descriptors/z-index'
 
 export const includes = ['legend']
 

src/packages/components/Charts/MyComponents/PieCenter/index.vue

@@ -195,6 +195,7 @@
                 </linearGradient>
             </defs>
         </svg>
+        <div class="header-title">报警统计</div>
         <v-chart ref="vChartRef" autoresize :init-options="initOptions" :theme="themeColor" :option="option"></v-chart>
     </div>
     
@@ -396,9 +397,22 @@ 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;
+}
+
 .svg {
   width: 100%;
-  height: 15%;
-  // background-color: #F7BDA7;
+  height: 45px;
 }
 </style>

src/packages/components/Charts/MyComponents/SceneDistribution/config.ts

@@ -6,12 +6,12 @@ import dataJson from './data.json'
 export const option = {
   dataset: dataJson.source,
   title: '场景分布概况',
-  titleColor: '#ffffff',
-  titleSize: 20,
+  titleColor: '#E6F7FF',
+  titleSize: 18,
   labelColor: '#E6F7FF',
   labelSize: 16,
   valueColor: '#ffffff',
-  valueSize: 40,
+  valueSize: 34,
   linkColor: '#00E5FF',
   linkText: '查看更多>>'
 }

src/packages/components/Charts/MyComponents/SceneDistribution/data.json

@@ -1,12 +1,14 @@
 {
   "source": [
     {
+      "title":"储罐区",
       "label": "场景总数",
       "value": 264,
       "color": "#00E5FF",
       "image": "scene-total.png"
     },
     {
+      "title":"储罐区",
       "label": "智控场景",
       "value": 264,
       "color": "#FFD700",

src/styles/font/font.scss

@@ -0,0 +1,6 @@
+@font-face {
+  font-family: 'Alibaba-PuHuiTi-Bold';
+  src: url('./Alibaba-PuHuiTi-Bold.otf') format('opentype');
+  font-weight: normal;
+  font-style: normal;
+}