调整后的黄金指标,首页状态颜色自定义

src/views/faultManage/active-alarm/index.vue

@@ -438,7 +438,6 @@ function fnModalVisibleBy(code: string) {
 function fnModalOk() {
   modalState.confirmLoading = true;
   const from = toRaw(modalState.from);
-  console.log(from)
   if (from.ackState==="1") {
     message.error({
       content: t('views.faultManage.activeAlarm.ackError'),

src/views/index.vue

@@ -14,6 +14,8 @@ import { PieChart } from 'echarts/charts';
 import { LabelLayout } from 'echarts/features';
 import { useRoute } from 'vue-router';
 import useAppStore from '@/store/modules/app';
+import useDictStore from '@/store/modules/dict';
+const { getDict } = useDictStore();
 const appStore = useAppStore();
 const route = useRoute();
 const { t } = useI18n();
@@ -28,6 +30,13 @@ echarts.use([
   LabelLayout,
 ]);
 
+/**字典数据 */
+/**用户性别字典 */
+let indexColor = ref<DictType[]>([
+  { label: 'normal', value: 'normal', elTagType: '', elTagClass: '' },
+  { label: 'abnormal', value: 'abnormal', elTagType: '', elTagClass: '' },
+]);
+
 /**表格字段列 */
 //customRender(){} ----单元格处理
 let tableColumns: ColumnsType = [
@@ -174,7 +183,10 @@ function fnGetList(one: boolean) {
         orient: 'vertical',
         left: 'left',
       },
-      color: ['#91cc75', '#ee6666'],
+      color: [
+        '' + indexColor.value[0]['elTagClass'],
+        '' + indexColor.value[1]['elTagClass'],
+      ],
       series: [
         {
           name: t('views.index.realNeStatus'),
@@ -393,6 +405,12 @@ function fnLocale() {
 }
 
 onMounted(() => {
+  getDict('index_status').then(res => {
+    if (res.length > 0) {
+      indexColor.value = res;
+    }
+  });
+  //console.log(indexColor)
   fnLocale();
   fnGetList(true);
   timer = setInterval(() => fnGetList(false), 10000); // 每隔10秒执行一次

src/views/perfManage/goldTarget/index.vue

@@ -83,7 +83,7 @@ function fnTableSize({ key }: MenuInfo) {
 /**查询参数 */
 let queryParams: any = reactive({
   /**卡片切换Flag */
-  cardFlag: 0,   //0-显示统计图 1-显示统计表  
+  cardFlag: 0, //0-显示统计图 1-显示统计表
   /**告警设备类型 */
   neType: '',
   /**告警网元标识 */
@@ -195,6 +195,7 @@ function fnDesign() {
     title: t('views.perfManage.goldTarget.time'),
     dataIndex: 'timeGroup',
     align: 'center',
+    fixed: 'right',
   });
   if (!queryRangePicker.value) {
     queryRangePicker.value = ['', ''];
@@ -204,6 +205,7 @@ function fnDesign() {
   const neType = queryParams.neType[0];
   let goldXDate: any = [];
   let goldYData: any = [];
+  let hideAll: any = {};
   goldData(queryParams).then(res => {
     if (res.code === RESULT_CODE_SUCCESS) {
       if (res.data.length > 0) {
@@ -214,6 +216,7 @@ function fnDesign() {
           .filter(key => !['timeGroup', 'neName', 'startIndex'].includes(key))
           .map(key => {
             const title: any = findTitleByKey(key);
+            hideAll[title]=false;
             return {
               name: title,
               data: res.data.map((item: any) => parseInt(item[key])),
@@ -246,20 +249,26 @@ function fnDesign() {
           },
         },
         legend: {
-          right: 10,
+          //  orient: 'vertical',
-          itemWidth: 8,
+          //  left: 'left',
+          type: 'scroll',
+          orient: 'vertical', // vertical
+          right: 20,
+          //itemWidth: 20,
+          itemGap: 25,
           textStyle: {
             color: '#646A73',
           },
           icon: 'circle',
+          selected:hideAll,
         },
         grid: {
           left: '10%',
-          right: '5%',
+          right: '30%',
           bottom: '20%',
         },
         yAxis: [
-          { type: 'value', axisLabel: { fontSize: 10 } },
+          { type: 'value', splitNumber: 4, axisLabel: { fontSize: 10 } },
           {
             type: 'value',
             position: 'right',
@@ -469,7 +478,9 @@ onMounted(() => {
           :data-source="tableState.data"
           :size="tableState.size"
           :pagination="tablePagination"
-          :scroll="{ x: true }"
+          :scroll="{ x: tableColumnsDnd.length * 200, y: 450 }"
+          @resizeColumn="(w:number, col:any) => (col.width = w)"
+          :show-expand-column="false"
         >
         </a-table>
       </a-card>
@@ -494,7 +505,7 @@ onMounted(() => {
       <div class="chart">
         <ChartLine
           :option="chartsOption.perfChart"
-          :dataZoom="true"
+          :dataZoom="false"
           height="400px"
         ></ChartLine>
       </div>