问题整改界面 1. 优化各项状态展示效果 2. 新增左侧关键字筛选功能

riku

2024-11-21 55bd7fb6365909a0cbcf0957333c7876bd791bb9

问题整改界面
1. 优化各项状态展示效果
2. 新增左侧关键字筛选功能

 src/components.d.ts

@@ -13,21 +13,27 @@
    CompGenericWrapper: typeof import('./components/CompGenericWrapper.vue')['default']
    CompQuickSet: typeof import('./components/search-option/CompQuickSet.vue')['default']
    Content: typeof import('./components/core/Content.vue')['default']
    ElAffix: typeof import('element-plus/es')['ElAffix']
    ElAside: typeof import('element-plus/es')['ElAside']
    ElAvatar: typeof import('element-plus/es')['ElAvatar']
    ElBadge: typeof import('element-plus/es')['ElBadge']
    ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
    ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
    ElButton: typeof import('element-plus/es')['ElButton']
    ElCalendar: typeof import('element-plus/es')['ElCalendar']
    ElCard: typeof import('element-plus/es')['ElCard']
    ElCascader: typeof import('element-plus/es')['ElCascader']
    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
    ElCol: typeof import('element-plus/es')['ElCol']
    ElCollapse: typeof import('element-plus/es')['ElCollapse']
    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
    ElContainer: typeof import('element-plus/es')['ElContainer']
    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
    ElDialog: typeof import('element-plus/es')['ElDialog']
    ElDivider: typeof import('element-plus/es')['ElDivider']
    ElDrawer: typeof import('element-plus/es')['ElDrawer']
    ElEmpty: typeof import('element-plus/es')['ElEmpty']
    ElForm: typeof import('element-plus/es')['ElForm']
@@ -37,14 +43,19 @@
    ElImage: typeof import('element-plus/es')['ElImage']
    ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
    ElInput: typeof import('element-plus/es')['ElInput']
    ElLink: typeof import('element-plus/es')['ElLink']
    ElMain: typeof import('element-plus/es')['ElMain']
    ElMenu: typeof import('element-plus/es')['ElMenu']
    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
    ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
    ElOption: typeof import('element-plus/es')['ElOption']
    ElPagination: typeof import('element-plus/es')['ElPagination']
    ElPopover: typeof import('element-plus/es')['ElPopover']
    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
    ElRow: typeof import('element-plus/es')['ElRow']
    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
    ElSegmented: typeof import('element-plus/es')['ElSegmented']
    ElSelect: typeof import('element-plus/es')['ElSelect']
    ElSpace: typeof import('element-plus/es')['ElSpace']
    ElStep: typeof import('element-plus/es')['ElStep']
@@ -56,6 +67,7 @@
    ElTabs: typeof import('element-plus/es')['ElTabs']
    ElTag: typeof import('element-plus/es')['ElTag']
    ElText: typeof import('element-plus/es')['ElText']
    ElTooltip: typeof import('element-plus/es')['ElTooltip']
    ElTree: typeof import('element-plus/es')['ElTree']
    ElUpload: typeof import('element-plus/es')['ElUpload']
    Footer: typeof import('./components/core/Footer.vue')['default']

 src/components/FYImageSelectDialog.vue

@@ -6,7 +6,7 @@
    width="66%"
    destroy-on-close
  >
    <div class="main" v-loading="loading">
    <div class="main">
      <el-row justify="end" v-if="!readonly">
        <el-text size="small" type="info" class="m-r-8"
          >最多选择{{ maxSelect }}张图片</el-text

 src/components/SideList.vue

@@ -1,10 +1,55 @@
<template>
  <div class="state-label">
    <el-input
      v-model="filterText"
      icon="Search"
      style="width: 200px"
      placeholder="关键字筛选"
      clearable
    />
    <el-tooltip v-if="legend" placement="bottom-start" effect="dark">
      <template #content>
        <el-space>
          <el-space v-for="(item, index) in stateLabels" :key="index" :size="1">
            <el-icon :color="item.color">
              <component :is="item.icon"></component>
            </el-icon>
            {{ item.name }}
            <!-- <el-text size="small">{{ item.name }}</el-text> -->
          </el-space>
        </el-space>
        <br />
        <el-space>
          <el-space :size="1">
            <el-icon :size="16" color="var(--el-color-success)">
              <Avatar />
            </el-icon>
            正在执行巡查
          </el-space>
          <el-space :size="1">
            <el-icon :size="16" color="var(--el-color-info)">
              <Avatar />
            </el-icon>
            未执行
          </el-space>
        </el-space>
      </template>
      <el-space>
        <el-icon class="cursor-p" :size="16" color="var(--el-color-primary)"
          ><QuestionFilled
        /></el-icon>
        <el-text size="small" class="cursor-p">审核状态图例</el-text>
      </el-space>
    </el-tooltip>
  </div>
  <el-tree
    ref="treeRef"
    class="el-tree"
    v-loading="isLoading"
    :data="dataList"
    :props="defaultProps"
    @node-click="handleNodeClick"
    :filter-node-method="filterNode"
    default-expand-all
    highlight-current
    check-on-click-node
@@ -19,28 +64,80 @@
              : 'custom-tree-node'
          "
        >
          <el-icon v-if="data.type == 0" color="var(--el-color-info)">
            <SuccessFilled/>
          <el-icon
            v-if="data.status == '正在执行'"
            :size="16"
            color="var(--el-color-success)"
            style="margin-left: -16px"
          >
            <Avatar />
          </el-icon>
          <el-icon v-else-if="data.type == 1" color="var(--el-color-danger)">
          <el-icon
            v-if="data.status == '未执行'"
            :size="16"
            color="var(--el-color-info)"
            style="margin-left: -16px"
          >
            <Avatar />
          </el-icon>
          <!-- <el-icon :color="stateLabels[data.type].color">
            <component :is="stateLabels[data.type].icon"></component>
          </el-icon> -->
          <el-icon
            v-if="data.type == 0"
            :size="16"
            color="var(--el-color-info)"
          >
            <SuccessFilled />
          </el-icon>
          <el-icon
            v-else-if="data.type == 1"
            :size="16"
            color="var(--el-color-danger)"
          >
            <QuestionFilled />
          </el-icon>
          <el-icon v-else-if="data.type == 2" color="var(--el-color-warning)">
          <el-icon
            v-else-if="data.type == 2"
            :size="16"
            color="var(--el-color-warning)"
          >
            <QuestionFilled />
          </el-icon>
          <el-icon v-else-if="data.type == 3" color="var(--el-color-danger)">
          <el-icon
            v-else-if="data.type == 3"
            :size="16"
            color="var(--el-color-danger)"
          >
            <WarnTriangleFilled />
          </el-icon>
          <el-icon v-else-if="data.type == 4" color="var(--el-color-danger)">
            <WarningFilled/>
          <el-icon
            v-else-if="data.type == 4"
            :size="16"
            color="var(--el-color-danger)"
          >
            <WarningFilled />
          </el-icon>
          <el-icon v-else-if="data.type == 5" color="var(--el-color-warning)">
            <WarningFilled/>
          <el-icon
            v-else-if="data.type == 5"
            :size="16"
            color="var(--el-color-warning)"
          >
            <WarningFilled />
          </el-icon>
          <el-icon v-else-if="data.type == 6" color="var(--el-color-success)">
            <SuccessFilled/>
          <el-icon
            v-else-if="data.type == 6"
            :size="16"
            color="var(--el-color-success)"
          >
            <SuccessFilled />
          </el-icon>
          <div>{{ node.label }}</div>
          <!-- <el-text>{{ node.label }}</el-text> -->
          {{ node.label }}
          <span v-if="data.count">
            {{ '_(' + data.count + ')' }}
            <!-- <el-text size="small">点次</el-text>) -->
          </span>
        </div>
      </slot>
    </template>
@@ -61,16 +158,59 @@
        }
      ]
    },
    loading: Boolean
    loading: Boolean,
    // 是否展示图例
    legend: {
      type: Boolean,
      default: false
    }
  },
  emits: ['itemClick'],
  data() {
    return {
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      isLoading: this.loading
      isLoading: this.loading,
      stateLabels: [
        {
          color: 'var(--el-color-info)',
          name: '无问题',
          icon: 'SuccessFilled'
        },
        {
          color: 'var(--el-color-danger)',
          name: '问题未审核',
          icon: 'QuestionFilled'
        },
        {
          color: 'var(--el-color-warning)',
          name: '问题部分审核',
          icon: 'QuestionFilled'
        },
        {
          color: 'var(--el-color-danger)',
          name: '未整改',
          icon: 'WarnTriangleFilled'
        },
        {
          color: 'var(--el-color-danger)',
          name: '整改未审核',
          icon: 'WarningFilled'
        },
        {
          color: 'var(--el-color-warning)',
          name: '整改部分审核',
          icon: 'WarningFilled'
        },
        {
          color: 'var(--el-color-success)',
          name: '审核完成',
          icon: 'SuccessFilled'
        }
      ]
    };
  },
  computed: {
@@ -89,6 +229,7 @@
      for (const [key, value] of itemMap) {
        const i = {
          title: key,
          count: value.length,
          children: []
        };
        value.forEach((v) => {
@@ -109,6 +250,9 @@
    }
  },
  watch: {
    filterText(val) {
      this.$refs.treeRef.filter(val);
    },
    loading(nValue) {
      this.isLoading = nValue;
    },
@@ -116,17 +260,17 @@
    dataList(nValue) {
      if (this.isLoading) {
        if (nValue.length > 0) {
          this.dataList.forEach((d) => {
            d.children.forEach((c) => {
              c.selected = false;
            });
          });
          // this.dataList.forEach((d) => {
          //   d.children.forEach((c) => {
          //     c.selected = false;
          //   });
          // });
          if (nValue[0].children.length > 0) {
            const c = nValue[0].children[0];
            c.selected = true;
            // c.selected = true;
            this.$emit('itemClick', c);
          } else {
            nValue[0].selected = true;
            // nValue[0].selected = true;
          }
        }
        this.isLoading = false;
@@ -135,16 +279,21 @@
  },
  methods: {
    handleNodeClick(data) {
      this.dataList.forEach((d) => {
        d.children.forEach((c) => {
          c.selected = false;
        });
      });
      data.selected = true;
      // this.dataList.forEach((d) => {
      //   d.children.forEach((c) => {
      //     c.selected = false;
      //   });
      // });
      // data.selected = true;
      //父节点的点击事件不做传递
      if (data.children == undefined) {
        this.$emit('itemClick', data);
      }
    },

    filterNode(value, data) {
      if (!value) return true;
      return data.title.includes(value);
    }
  }
};
@@ -163,4 +312,15 @@
.selected-tree-node {
  color: var(--el-color-primary);
}

.state-label {
  position: sticky;
  z-index: 1;
  top: 0;
  background-color: white;
  // box-shadow: var(--el-box-shadow-light);
  border-bottom: var(--el-border);
  display: flex;
  padding-bottom: 4px;
}
</style>

 src/components/ToolBar.vue

@@ -9,6 +9,7 @@
            :key="i"
            :type="b.color ? b.color : 'primary'"
            size="small"
            plain
            @click="b.click"
            >{{ b.name }}</el-button
          >
@@ -17,7 +18,7 @@
    </el-row>
    <el-row class="tag-group" v-if="title">
      <el-space>
        <el-tag v-for="(d, i) in descriptions" :key="i" type="info" size="small">{{
        <el-tag v-for="(d, i) in descriptions" :key="i" :type="d.type" size="small">{{
          d.name + ': ' + d.value
        }}</el-tag>
      </el-space>

 src/components/core/BaseContentLayout.vue

@@ -5,7 +5,7 @@
    </el-header>
    <el-container>
      <el-aside class="el-aside" :style="'height: ' + mainHeight">
        <el-scrollbar :noresize="true">
        <el-scrollbar :noresize="true" style="position: relative;">
          <slot name="aside"></slot>
        </el-scrollbar>
      </el-aside>

 src/views/fysp/check/ProCheck.vue

@@ -9,6 +9,7 @@
    </template>
    <template #aside>
      <SideList
        legend
        :items="subtasks"
        :loading="sideLoading"
        @item-click="chooseSubtask"
@@ -37,7 +38,7 @@
          @check="handleProblemCheck"
        ></CompProblemCard>
      </el-scrollbar>
      <el-empty v-else description="暂无记录" v-loading="mainLoading" />
      <el-empty v-else description="暂无问题" v-loading="mainLoading" />
    </template>
  </BaseContentLayout>
  <CompProblemAddOrUpd
@@ -106,21 +107,23 @@
      buttons: [
        {
          name: '新增问题',
          color: 'success',
          // color: 'success',
          color: 'primary',
          click: () => {
            this.proAddOrUpdDialogVisible = true;
          }
        },
        {
          name: '场景图片',
          color: 'warning',
          // color: 'warning',
          color: 'primary',
          click: () => {
            this.anyPhotoDialog = true;
          }
        },
        {
          name: '设施设备',
          color: 'info',
          color: 'primary',
          click: () => {
            this.openDeviceShowDialog();
          }
@@ -238,6 +241,7 @@
        res.forEach((s) => {
          const t = this.getSubtaskType(s);
          list.push({
            status: s.subtask.status,
            type: t,
            title: s.stName,
            categoly: s.stPlanTime.split('T')[0],

 src/views/fysp/check/ProCheckProxy.js

@@ -1,4 +1,4 @@
import { $fysp } from '@/api/index'
import { $fysp } from '@/api/index';

//问题状态
const proStatus = {
@@ -8,7 +8,7 @@
  change_unCheck: 'change_unCheck',
  change_fail: 'change_fail',
  change_pass: 'change_pass'
}
};

export default {
  //统计问题
@@ -34,25 +34,26 @@
      passPer: '0%',
      //审核率
      checkPer: '0%'
    }
    };

    proList.forEach((p) => {
      if (p.ischanged) status.changeNum++
      if (p.ischanged) status.changeNum++;

      if (p.extension3 == 'fail' || p.extension3 == 'change_fail') status.unpassNum++
      if (p.extension3 == 'fail' || p.extension3 == 'change_fail')
        status.unpassNum++;
      else if (
        p.extension3 == 'unCheck' ||
        p.extension3 == 'change_unCheck' ||
        (p.extension3 == 'pass' && p.ischanged)
      )
        status.uncheckNum++
      else status.passNum++
        status.uncheckNum++;
      else status.passNum++;

      if (p.extension3 == proStatus.pass) {
        status.proCheckedNum++
        status.proCheckedNum++;
      }
      if (p.extension3 == proStatus.change_pass) {
        status.changeCheckedNum++
        status.changeCheckedNum++;
      }

      status.changePer =
@@ -60,37 +61,71 @@
          (status.changeNum / status.proNum) * 100
            ? ((status.changeNum / status.proNum) * 100).toFixed(1)
            : 0
        ) + '%'
        ) + '%';
      status.passPer =
        String(
          (status.passNum / status.proNum) * 100
            ? ((status.passNum / status.proNum) * 100).toFixed(1)
            : 0
        ) + '%'
        ) + '%';
      status.checkPer =
        String(
          ((status.passNum + status.unpassNum) / status.proNum) * 100
            ? (((status.passNum + status.unpassNum) / status.proNum) * 100).toFixed(1)
            ? (
                ((status.passNum + status.unpassNum) / status.proNum) *
                100
              ).toFixed(1)
            : 0
        ) + '%'
    })
        ) + '%';
    });

    return status
    return status;
  },

  //统计问题，返回数组形式
  proStatusArray(proList) {
    const status = this.calProStatus(proList)
    const status = this.calProStatus(proList);
    return [
      { name: '问题数', value: status.proNum },
      { name: '整改数', value: status.changeNum },
      { name: '待审核', value: status.uncheckNum },
      { name: '已审核', value: status.passNum },
      { name: '未通过', value: status.unpassNum },
      { name: '整改率', value: status.changePer },
      { name: '通过率', value: status.passPer },
      { name: '审核率', value: status.checkPer }
    ]
      { name: '问题数', value: status.proNum, type: 'info' },
      {
        name: '整改数',
        value: status.changeNum,
        type: status.changeNum < status.proNum ? 'danger' : 'info'
      },
      {
        name: '待审核',
        value: status.uncheckNum,
        type: status.uncheckNum > 0 ? 'danger' : 'info'
      },
      { name: '已审核', value: status.passNum, type: 'info' },
      // {
      //   name: '未通过',
      //   value: status.unpassNum,
      //   type: status.unpassNum > 0 ? 'danger' : 'info'
      // },
      {
        name: '整改率',
        value: status.changePer,
        type:
          status.proNum > 0 && status.changePer != '100.0%'
            ? 'danger'
            : 'success'
      },
      // {
      //   name: '通过率',
      //   value: status.passPer,
      //   type:
      //     status.proNum > 0 && status.passPer != '100.0%' ? 'danger' : 'success'
      // },
      {
        name: '审核率',
        value: status.checkPer,
        type:
          status.proNum > 0 && status.checkPer != '100.0%'
            ? 'danger'
            : 'success'
      }
    ];
  },

  //问题图片和整改图片
@@ -104,33 +139,83 @@
        title: '整改图片',
        path: []
      }
    ]
    ];
    if (pro.mediafileList) {
      pro.mediafileList.forEach((m) => {
        pics[m.ischanged ? 1 : 0].path.push(`${$fysp.imgUrl}${m.extension1}${m.guid}.jpg`)
      })
        pics[m.ischanged ? 1 : 0].path.push(
          `${$fysp.imgUrl}${m.extension1}${m.guid}.jpg`
        );
      });
    }

    return pics
    return pics;
  },

  //问题审核状态转换中文
  proStatusMap(p) {
    switch (p) {
      case proStatus.unCheck:
        return { name: '问题未审核', type: 'warning', index: 0, checkable: true, deletable: true, changeable: false }
        return {
          name: '问题未审核',
          type: 'warning',
          index: 0,
          checkable: true,
          deletable: true,
          changeable: false
        };
      case proStatus.pass:
        return { name: '问题通过', type: 'success', index: 1, checkable: false, deletable: true, changeable: false }
        return {
          name: '问题通过',
          type: 'success',
          index: 1,
          checkable: false,
          deletable: true,
          changeable: false
        };
      case proStatus.fail:
        return { name: '问题不通过', type: 'danger', index: 1, checkable: false, deletable: true, changeable: false }
        return {
          name: '问题不通过',
          type: 'danger',
          index: 1,
          checkable: false,
          deletable: true,
          changeable: false
        };
      case proStatus.change_unCheck:
        return { name: '整改未审核', type: 'warning', index: 2, checkable: true, deletable: false, changeable: true }
        return {
          name: '整改未审核',
          type: 'warning',
          index: 2,
          checkable: true,
          deletable: false,
          changeable: true
        };
      case proStatus.change_fail:
        return { name: '整改不通过', type: 'danger', index: 3, checkable: false, deletable: false, changeable: true }
        return {
          name: '整改不通过',
          type: 'danger',
          index: 3,
          checkable: false,
          deletable: false,
          changeable: true
        };
      case proStatus.change_pass:
        return { name: '整改通过', type: 'success', index: 3, checkable: false, deletable: false, changeable: true }
        return {
          name: '整改通过',
          type: 'success',
          index: 3,
          checkable: false,
          deletable: false,
          changeable: true
        };
      default:
        return { name: '问题未审核', type: 'warning', index: 0, checkable: true, deletable: true }
        return {
          name: '问题未审核',
          type: 'warning',
          index: 0,
          checkable: true,
          deletable: true
        };
    }
  },

@@ -141,18 +226,18 @@
   * @returns 下一个问题状态
   */
  proNextStatus(s, isPass) {
    let status, action
    let status, action;
    switch (s) {
      case proStatus.unCheck:
        status = isPass ? proStatus.pass : proStatus.fail
        action = isPass ? 0 : 1
        break
        status = isPass ? proStatus.pass : proStatus.fail;
        action = isPass ? 0 : 1;
        break;
      case proStatus.change_unCheck:
        status = isPass ? proStatus.change_pass : proStatus.change_fail
        action = isPass ? 2 : 3
        break
        status = isPass ? proStatus.change_pass : proStatus.change_fail;
        action = isPass ? 2 : 3;
        break;
    }
    return { status: status, action: action }
    return { status: status, action: action };
  },

  /**
@@ -161,19 +246,19 @@
   * @returns 下一个问题状态
   */
  proBeforeStatus(s) {
    let status, action
    let status, action;
    switch (s) {
      case proStatus.fail:
      case proStatus.pass:
        status = proStatus.unCheck
        action = 4
        break
      case proStatus.change_fail:  
        status = proStatus.unCheck;
        action = 4;
        break;
      case proStatus.change_fail:
      case proStatus.change_pass:
        status = proStatus.change_unCheck
        action = 5
        break
        status = proStatus.change_unCheck;
        action = 5;
        break;
    }
    return { status: status, action: action }
    return { status: status, action: action };
  }
}
};

 src/views/fysp/check/components/CompProblemCard.vue

@@ -89,9 +89,16 @@
            type="danger"
            size="small"
            @click="deletePro"
            :disabled="!proStatus.deletable"
            disabled
            >删除</el-button
          >
          <!-- <el-button
            type="danger"
            size="small"
            @click="deletePro"
            :disabled="!proStatus.deletable"
            >删除</el-button
          > -->
          <!-- 审核驳回操作 -->
          <!-- <el-button
            v-if="

 src/views/fysp/check/components/CompSubTaskStatistic.vue

@@ -1,43 +1,76 @@
<template>
  <el-space>
    <el-descriptions :column="3" size="small" border direction="vertical">
      <el-descriptions-item label="问题数">{{
        summary.proCount
      }}</el-descriptions-item>
      <el-descriptions-item label="整改数">{{
        summary.changeCount
      }}</el-descriptions-item>
      <el-descriptions-item label="整改率">{{
        summary.changePer
      }}</el-descriptions-item>
      <el-descriptions-item
        label="问题数"
        label-class-name="problem-label"
        class-name="secondary-content"
        >{{ summary.proCount }}</el-descriptions-item
      >
      <el-descriptions-item
        label="整改数"
        label-class-name="problem-label"
        class-name="secondary-content"
        >{{ summary.changeCount }}</el-descriptions-item
      >
      <el-descriptions-item
        label="整改率"
        label-class-name="problem-label"
        :class-name="summary.changePer < 0.6 ? 'danger-content' : 'secondary-content'"
        >{{ formatPercent(summary.changePer) }}</el-descriptions-item
      >
    </el-descriptions>
    <el-descriptions :column="8" size="small" border direction="vertical">
      <el-descriptions-item label="巡查点次">{{
        summary.total
      }}</el-descriptions-item>
      <el-descriptions-item label="问题未审核">{{
        summary.proUnCheck
      }}</el-descriptions-item>
      <el-descriptions-item label="部分审核">{{
        summary.proPartCheck
      }}</el-descriptions-item>
      <el-descriptions-item label="全部审核">{{
        summary.proAllCheck
      }}</el-descriptions-item>
      <el-descriptions-item
        label="巡查点次"
        label-class-name="pro-check-label"
        class-name="secondary-content"
        >{{ summary.total }}</el-descriptions-item
      >
      <el-descriptions-item
        label="问题未审核"
        label-class-name="pro-check-label"
        :class-name="summary.proUnCheck > 0 ? 'danger-content' : 'secondary-content'"
        >{{ summary.proUnCheck }}</el-descriptions-item
      >
      <el-descriptions-item
        label="部分审核"
        label-class-name="pro-check-label"
        :class-name="summary.proPartCheck > 0 ? 'danger-content' : 'secondary-content'"
        >{{ summary.proPartCheck }}</el-descriptions-item
      >
      <el-descriptions-item
        label="全部审核"
        label-class-name="pro-check-label"
        class-name="secondary-content"
        >{{ summary.proAllCheck }}</el-descriptions-item
      >
    </el-descriptions>
    <el-descriptions :column="8" size="small" border direction="vertical">
      <el-descriptions-item label="未整改">{{
        summary.UnChange
      }}</el-descriptions-item>
      <el-descriptions-item label="整改未审核">{{
        summary.changeUnCheck
      }}</el-descriptions-item>
      <el-descriptions-item label="部分审核">{{
        summary.changePartCheck
      }}</el-descriptions-item>
      <el-descriptions-item label="全部审核">{{
        summary.changeAllCheck
      }}</el-descriptions-item>
      <el-descriptions-item
        label="未整改"
        label-class-name="change-check-label"
        :class-name="summary.UnChange > 0 ? 'danger-content' : 'secondary-content'"
        >{{ summary.UnChange }}</el-descriptions-item
      >
      <el-descriptions-item
        label="整改未审核"
        label-class-name="change-check-label"
        :class-name="summary.changeUnCheck > 0 ? 'danger-content' : 'secondary-content'"
        >{{ summary.changeUnCheck }}</el-descriptions-item
      >
      <el-descriptions-item
        label="部分审核"
        label-class-name="change-check-label"
        :class-name="summary.changePartCheck > 0 ? 'danger-content' : 'secondary-content'"
        >{{ summary.changePartCheck }}</el-descriptions-item
      >
      <el-descriptions-item
        label="全部审核"
        label-class-name="change-check-label"
        class-name="secondary-content"
        >{{ summary.changeAllCheck }}</el-descriptions-item
      >
    </el-descriptions>
  </el-space>
  <!-- <el-space>
@@ -68,7 +101,7 @@
        changeAllCheck: 0,
        proCount: 0,
        changeCount: 0,
        changePer: '0%'
        changePer: 0
      };
      this.subtasks.forEach((s) => {
        _summary.total++;
@@ -106,19 +139,14 @@
      });

      if (_summary.proCount != 0) {
        _summary.changePer =
          Math.round((_summary.changeCount / _summary.proCount) * 1000) / 10 +
          '%';
        _summary.changePer = _summary.changeCount / _summary.proCount;
      }
      // _summary.forEach((s, i) => {
      //   if (i > 0) {
      //     let per = Math.round((s.value / _summary[0].value) * 1000) / 10
      //     if (isNaN(per)) per = 0
      //     s.value = `${s.value}(${per}%)`
      //   }
      // })

      return _summary;
    }
  },
  methods: {
    formatPercent(value) {
      return Math.round(value * 1000) / 10 + '%';
    }
  }
};
@@ -128,4 +156,34 @@
  padding: 0px 4px !important;
  /* font-size: 13px !important; */
}

:deep(.problem-label) {
  background: var(--el-color-primary-light-7) !important;
}
:deep(.problem-content) {
  /* background: var(--el-color-danger-light-9); */
}

:deep(.pro-check-label) {
  background: var(--el-color-success-light-7) !important;
}
:deep(.pro-check-content) {
}

:deep(.change-check-label) {
  background: var(--el-color-warning-light-7) !important;
}
:deep(.change-check-content) {
}

:deep(.danger-content) {
  color: var(--el-color-danger) !important;
  font-weight: 600 !important;
  font-size: 17px !important;
}

:deep(.secondary-content) {
  color: var(--el-text-color-regular) !important;
  font-size: 12px !important;
}
</style>

 src/views/fysp/task/TaskManage.vue

@@ -229,10 +229,10 @@
          type = 0;
          break;
        case '正在执行':
          type = 1;
          type = 5;
          break;
        case '已结束':
          type = 2;
          type = 6;
          break;
        default:
          type = 0;