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

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,
-          itemWidth: 8,
+          //  orient: 'vertical',
+          //  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>