调整颜色

src/views/dashboard/overview/components/AlarnTypeBar/index.vue

@@ -2,7 +2,7 @@
   <div ref="alarmTypeBar" class="chart-container"></div>
 </template>
 <script setup lang="ts">
-import { markRaw, onMounted, ref } from 'vue';
+import { markRaw, onMounted, reactive, ref } from 'vue';
 import { origGet, top3Sel } from '@/api/faultManage/actAlarm';
 import * as echarts from 'echarts/core';
 import {
@@ -17,7 +17,8 @@ import { BarChart, PieChart } from 'echarts/charts';
 import { CanvasRenderer } from 'echarts/renderers';
 import { LabelLayout } from 'echarts/features';
 import useI18n from '@/hooks/useI18n';
-
+import useDictStore from '@/store/modules/dict';
+const { getDict } = useDictStore();
 const { t } = useI18n();
 
 echarts.use([
@@ -47,6 +48,14 @@ const alarmTypeBar = ref<HTMLElement | undefined>(undefined);
 /**图实例对象 */
 const alarmTypeBarChart = ref<any>(null);
 
+/**告警类型颜色 */
+let dict: {
+  /**原始严重程度 */
+  activeAlarmSeverity: DictType[];
+} = reactive({
+  activeAlarmSeverity: [],
+});
+
 // 将现有数据补全为期望的格式
 function completeData(existingData: any, expectedData: any) {
   const result = expectedData.map((item: any) => {
@@ -113,9 +122,9 @@ function initPicture() {
         return b.value - a.value;
       })
       .slice(0, 3);
-    pieArr.sort((a: any, b: any) => {
-      return b.value - a.value;
-    });
+    // pieArr.sort((a: any, b: any) => {
+    //   return b.value - a.value;
+    // });
     const optionData: any = {
       title: [
         {
@@ -171,9 +180,7 @@ function initPicture() {
             show: false,
           },
           center: ['35%', '25%'],
-          data: pieArr.sort((a: any, b: any) => {
-            return a.value - b.value;
-          }),
+          data: pieArr,
           lineStyle: 'none', // 设置线条样式为无，即可去掉线条
           zlevel: 2, // 设置zlevel为1，使得柱状图在下层显示
           itemStyle: {
@@ -183,13 +190,12 @@ function initPicture() {
             color: function (colors: any) {
               const realName = colors.name.split(':')[0];
               var colorList: any = {
-                [t('views.index.Event')]: '#9bca63',
-                [t('views.index.Warning')]: '#26c0c0',
-                [t('views.index.Minor')]: '#27727b',
-                [t('views.index.Major')]: '#d7504b',
-                [t('views.index.Critical')]: 'rgba(218,44,54,1)',
+                [t('views.index.Event')]: '#1677ff',
+                [t('views.index.Warning')]: '#722ed1',
+                [t('views.index.Minor')]: '#fadb14',
+                [t('views.index.Major')]: '#ffc069',
+                [t('views.index.Critical')]: '#f5222d',
               };
-
               return colorList[realName];
             },
           },
@@ -271,7 +277,15 @@ function fnDesign(container: HTMLElement | undefined, option: any) {
 }
 
 onMounted(() => {
-  initPicture();
+  getDict('active_alarm_severity')
+    .then(res => {
+      if (res.length > 0) {
+        dict.activeAlarmSeverity = res;
+      }
+    })
+    .finally(() => {
+      initPicture();
+    });
 });
 </script>
 

src/views/dashboard/overview/components/UPFFlow/index.vue

@@ -102,7 +102,7 @@ function initPicture() {
       value: [upValue, downValue],
     };
 
-    var color = ['rgba(7,217,162', 'rgba(92, 123, 217'];
+    var color = ['rgba(250, 219, 20', 'rgba(92, 123, 217'];
     var lineY: any = [];
 
     for (var i = 0; i < charts.names.length; i++) {