kd-aiot-frontend-aps/src/views/productionPlan/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading">
      <productionPlan-search
        @search="reload"
        ref="searchRef"
        :statusOpt="statusOpt"
        :planType="planType"
        :activeName="activeName"
      >
      </productionPlan-search>
      
      <!-- <div class="statistics">
        <el-row :gutter="24">
          <el-col :span="cardSpan">
            <el-card shadow="hover" class="cardItem">
              <div>
                <div class="cardText">待排产计划数量</div>
                <div class="cardNum">{{ planStatistics.waitPlanNum }}</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="cardSpan">
            <el-card shadow="hover" class="cardItem">
              <div>
                <div class="cardText">计划生产数量</div>
                <div class="cardNum">{{ planStatistics.planNum }}</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="cardSpan">
            <el-card shadow="hover" class="cardItem">
              <div>
                <div class="cardText">已下发生产数量</div>
                <div class="cardNum">{{ planStatistics.issueNum }}</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="cardSpan">
            <el-card shadow="hover" class="cardItem">
              <div>
                <div class="cardText">待派工数量</div>
                <div class="cardNum">0</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="cardSpan">
            <el-card shadow="hover" class="cardItem">
              <div>
                <div class="cardText">待完工生产数量</div>
                <div class="cardNum">{{ planStatistics.waitFinishNum }}</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="cardSpan">
            <el-card shadow="hover" class="cardItem">
              <div>
                <div class="cardText">待领料数量</div>
                <div class="cardNum">0</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="cardSpan">
            <el-card shadow="hover" class="cardItem">
              <div>
                <div class="cardText">已完工数量</div>
                <div class="cardNum">{{ planStatistics.finishNum }}</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="cardSpan">
            <el-card shadow="hover" class="cardItem">
              <div>
                <div class="cardText">已入库数量</div>
                <div class="cardNum">{{ planStatistics.stockNum }}</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div> -->
      <div class="btn_box">
        <el-button
          type="success"
          size="mini"
          v-if="timeDimensionPlanType == 3"
          @click="factAdd(3)"
          >新增</el-button
        >
        <el-button type="success" size="mini" @click="homogeneityInspect"
          >齐套性检查</el-button
        >
        <el-button type="primary" size="mini" v-if="isshow" @click="disassemblePlan"
          >计划分解</el-button
        >
        <el-button type="primary" size="mini">补单计划</el-button>
        <el-button type="info" size="mini">计划行事历</el-button>
        <el-button type="warning" size="mini">预警设置</el-button>
        <el-button type="primary" size="mini" v-if="isshow" @click="handleMerge"
          >合批</el-button
        >
        <el-button type="danger" size="mini">延期申请</el-button>
        <el-button type="danger" size="mini">变更申请</el-button>

       
      </div>

      <el-tabs v-model="activeName" type="card" size="mini" @tab-click="handleSele">
        <el-tab-pane label="未发布" name="first"></el-tab-pane>
        <el-tab-pane label="已发布" name="second"></el-tab-pane>
        <el-tab-pane label="已变更" name="change"></el-tab-pane>
      </el-tabs>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :key="activeName"
        :initLoad="false"
        :columns="newColumns"
        :datasource="datasource"
        row-key="code"
        :selection.sync="selection"
        :cache-key="cacheKeyUrl"
        @sort-change="onSortChange"
        autoAmendPage
        :parse-data="parseData"
        @update:selection="handleSelectionChange"
        @columns-change="handleColumnChange"
      >
        <template v-slot:batchNo="{ row }">
          <el-link type="primary" :underline="false">
            <!-- @click.stop="splitDetails(1, row)" -->
            <el-tag type="success" size="mini" v-if="row.joinPlanCode">
              拆</el-tag
            >

            <el-tag
              type="danger"
              size="mini"
              v-if="row.splitBatch == 2"
              @click.stop="splitDetails(2, row)"
            >
              合</el-tag
            >
            {{ row.batchNo }}
          </el-link>
        </template>

        <template v-slot:selection="{ row }">
          <div class="check_box" @click="handOneSelection(row)">
            <div class="check act_check" v-if="selectionFilter(row)">
              <i class="el-icon-check"></i>
            </div>
            <div class="check" v-else></div>
          </div>
        </template>

        <template v-slot:code="{ row }">
          <el-link type="primary" :underline="false" @click="goDetail(row)">
            {{ row.code }}
          </el-link>
        </template>

        <template v-slot:salesCode="{ row }">
          {{ row.salesCode }}
        </template>

        <template v-slot:priority="{ row }">
          <div style="display: flex">
            <el-input
              v-model="row.priority"
              type="number"
              size="mini"
              :min="0"
              :max="10"
              @change="priorityChange(row)"
              style="width: 80px"
            >
            </el-input>

            <el-popover
              placement="right"
              width="200"
              trigger="hover"
              content="数值越大优先级越高（0-3普通, 4-6优先, 7-10紧急）"
            >
              <div class="sort-wrap" slot="reference">
                <i class="el-icon-caret-top" @click="sortTop(row)"></i>
                <i class="el-icon-caret-bottom" @click="sortBottom(row)"></i>
              </div>
            </el-popover>
          </div>
        </template>

        <template v-slot:productNum="{ row }">
          {{ row.productNum }} {{ row.unit }}
        </template>

        <template v-slot:productWeight="{ row }">
          {{ row.productWeight }} {{ row.weightUnit }}
        </template>

        <template v-slot:requiredFormingNum="{ row }">
          {{ row.requiredFormingNum }} {{ row.unit }}
        </template>

        <template v-slot:newSumOrderWeight="{ row }">
          {{ row.newSumOrderWeight }} {{ row.newWeightUnit }}
        </template>

        <template v-slot:status="{ row }">
          <span :class="{ 'ele-text-danger': row.status == 3 }">
            {{ statusFormatter(row.status) }}
          </span>
        </template>
        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-link
            type="primary"
            :underline="false"
            v-if="row.status == 2 && row.splitBatch != 1"
            @click="handleOrderPublish(1, row)"
          >
            发布
          </el-link>
          <el-link
            type="primary"
            v-if="row.status == 3"
            :underline="false"
            @click="handleOrderPublish(2, row)"
          >
            重新发布
          </el-link>

          <el-link
            v-if="
              row.splitBatch != 2 &&
              row.splitBatch != 1 &&
              !row.joinPlanCode &&
              activeName == 'first'
            "
            type="primary"
            :underline="false"
            @click="planEdit(row)"
          >
            修改
          </el-link>

          <el-link
            v-if="row.joinPlanCode && activeName == 'first' && row.status != 4"
            type="danger"
            :underline="false"
            @click="handleDel(row)"
          >
            删除
          </el-link>

          <el-link
            v-if="
              clientEnvironmentId != 4 &&
              activeName == 'first' &&
              row.splitBatch != 2 &&
              !row.joinPlanCode
            "
            type="primary"
            :underline="false"
            @click="toUnpack(row)"
          >
            拆批
          </el-link>
        </template>
      </ele-pro-table>
    </el-card>

    <unpackDialog ref="unpackRef" @success="newReload" />

    <mergeDialog ref="mergeRef" @success="reload"></mergeDialog>

    <unpackDetails ref="DetailsRef"></unpackDetails>

    <homogeneityInspectDialog
      ref="homogeneityInspectDialog"
      @success="reload"
    />
    <homogeneityInspectInstallDialog
      ref="homogeneityInspectInstallDialog"
      @success="reload"
    />

    <disassemblePlanPop
      ref="disassemblePlanRef"
      @close="reload"
    ></disassemblePlanPop>
    <!-- v-if="factoryShow" :factoryObj="factoryObj" -->
    <factoryAdd
      ref="factoryAddRef"
      :factoryType="factoryType"
      
      @close="factoryClose"
    ></factoryAdd>
  </div>
</template>

<script>
  import {
    getList,
    del,
    updatePriority,
    getPlanStatistics
  } from '@/api/productionPlan/index.js';
  import productionPlanSearch from './components/productionPlan-search.vue';
  import unpackDialog from './components/unpackDialog.vue';
  import mergeDialog from './components/mergeDialog.vue';
  import homogeneityInspectDialog from './components/homogeneityInspectDialog.vue';
  import homogeneityInspectInstallDialog from './components/homogeneityInspectInstallDialog.vue';
  import unpackDetails from './components/unpackDetails.vue';
  import disassemblePlanPop from './components/disassemblePlanPop.vue';
  import factoryAdd from './components/factoryAdd/index.vue';
  import { release } from '@/api/productionPlan/order.js';
  import { getCode } from '@/api/codeManagement';
  import { fieldModel } from '@/api/saleOrder';
  import { debounce } from 'lodash';
  import tabMixins from '@/mixins/tableColumnsMixin';

  export default {
    mixins: [tabMixins],
    components: {
      productionPlanSearch,
      unpackDialog,
      mergeDialog,
      unpackDetails,
      disassemblePlanPop,
      factoryAdd,
      homogeneityInspectDialog,
      homogeneityInspectInstallDialog
    },
    props: {
      timeDimensionPlanType: { type: Number, default: 1 },
      cacheKeyUrl: { type: String, default: '513b2388-aps-productionPlan' }
    },
    data() {
      return {
        planStatistics: {
          waitPlanNum: 0,
          planNum: 0,
          issueNum: 0,
          waitFinishNum: 0,
          finishNum: 0,
          stockNum: 0
        },
        activeName: 'first',
        isshow:true,
        // 加载状态
        loading: false,
        pageType: 'add',
        dialogTitle: '',
        isBindPlan: false,
        statusOpt: {
          first: [
            { label: '所有状态', value: '3,2' },
            { label: '待发布', value: '2' },
            { label: '发布失败', value: '3' },
            { label: '已发布', value: '4' }
          ],
          second: [
            { label: '所有状态', value: '7,4,5,6' },
            { label: '待生产', value: '4' },
            { label: '生产中', value: '5' },
            { label: '已完成', value: '6' },
            { label: '已延期', value: '7' }
          ],
          change: [{ label: '已变更', value: '9' }]
        },
        planType: [
          { label: '所有计划类型', value: null },
          { label: '内销计划', value: '1' },
          { label: '外销计划', value: '2' },
          { label: '预制计划', value: '3' },
          { label: '改型计划', value: '4' },
          { label: '返工返修计划', value: '5' },


        ],
        newColumns: [],

        selection: [],

        // factoryShow: false,
        factoryType: 3,
        factoryObj: {},
        cardSpan: 3,
        columnsVersion:1
      };
    },
    computed: {
      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      },
      // 表格列配置
      columns() {
        const num = this.columnsVersion
        const opt = {
          first: [],
          second: [
            {
              prop: 'releaseTime',
              label: '工单发布日期',
              align: 'center',

              minWidth: 110
            },
            {
              prop: 'planFormingTime',
              label: '预测生产日期',
              align: 'center',

              minWidth: 110
            },
            {
              prop: 'deliveryTime',
              label: '预测交货日期',
              align: 'center',

              minWidth: 110
            },
            {
              prop: 'formingTime',
              label: '实际交货日期',
              align: 'center',

              minWidth: 110
            }
          ],
          change: []
        };

        return [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            slot: 'selection'
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          },

          {
            slot: 'batchNo',
            prop: 'batchNo',
            label: '批次号',
            align: 'center',
            minWidth: 140,
            sortable: true
          },

          {
            slot: 'code',
            prop: 'code',
            action: 'code',
            label: '计划编号',
            align: 'center',

            minWidth: 160,
            sortable: true
          },

          {
            prop: 'salesCode',
            action: 'salesCode',
            label: '销售订单号',
            align: 'center',
            minWidth: 160
          },

          {
            prop: 'productCode',
            label: '编码',
            align: 'center',

            minWidth: 140
          },
          {
            prop: 'productName',
            label: '名称',
            align: 'center',

            minWidth: 140
          },
          {
            prop: 'specification',
            label: '规格',
            align: 'center',
            minWidth: 150,

            showOverflowTooltip: true
          },
          {
            prop: 'productionCodes',
            label: '生产编号',
            align: 'center',
            minWidth: 150,
            showOverflowTooltip: true
          },
          {
            prop: 'model',
            label: '型号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'brandNo',
            label: '牌号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'priority',
            label: '优先级',
            align: 'center',
            minWidth: 120,
            slot: 'priority',
            sortable: 'custom'
          },

          {
            prop: 'produceRoutingName',
            label: '工艺路线',
            align: 'center',
            width: 140,
            showOverflowTooltip: true
          },

          {
            prop: 'productNum',
            label: '计划数量',
            align: 'center',

            slot: 'productNum'
          },
          {
            prop: 'productWeight',
            label: '计划重量',
            align: 'center',

            slot: 'productWeight'
          },
          {
            prop: 'requiredFormingNum',
            label: '要求生产数量',
            align: 'center',

            slot: 'requiredFormingNum'
          },

          {
            prop: 'newSumOrderWeight',
            label: '要求生产重量',
            align: 'center',

            slot: 'newSumOrderWeight'
          },

          {
            prop: 'scheduleStatusName',
            label: '进度状态',
            align: 'center',
            minWidth: 100
          },

          // {
          //   prop: '',
          //   label: '已排产数量',
          //   align: 'center',
          //   showOverflowTooltip: true
          // },

          // {
          //   prop: '',
          //   label: '未排产数量',
          //   align: 'center',
          //   showOverflowTooltip: true
          // },

          // {
          //   prop: '',
          //   label: '已生产数量',
          //   align: 'center',
          //   showOverflowTooltip: true
          // },

          // {
          //   prop: '',
          //   label: '未生产数量',
          //   align: 'center',
          //   showOverflowTooltip: true
          // },

          {
            prop: 'factoriesName',
            label: '所属工厂',
            align: 'center'
          },

          // {
          //   prop: '',
          //   label: '合格品数',
          //   align: 'center'
          // },

          // {
          //   prop: '',
          //   label: '不合格品数',
          //   align: 'center'
          // },

          // {
          //   prop: '',
          //   label: '合格率',
          //   align: 'center'
          // },

          {
            prop: 'moCount',
            label: '模数',
            align: 'center',
            show: this.clientEnvironmentId == '4'
          },

          {
            prop: 'blockCount',
            label: '块数',
            align: 'center',
            show: this.clientEnvironmentId == '4'
          },
          {
            prop: 'noWordCount',
            label: '未排程块数',
            align: 'center',

            show: this.clientEnvironmentId == '4',
            minWidth: 110
          },
          {
            prop: 'planDeliveryTime',
            label: '计划交付日期',
            align: 'center',
            width: 110,
            showOverflowTooltip: true
          },
          {
            prop: 'reqMoldTime',
            label: '订单要求计划交付日期',
            align: 'center',
            width: 110,
            showOverflowTooltip: true
          },

          {
            prop: 'startTime',
            label: '计划开始日期',
            align: 'center',
            width: 110,
            showOverflowTooltip: true
          },

          {
            prop: 'endTime',
            label: '计划结束日期',
            align: 'center',
            width: 110,
            showOverflowTooltip: true
          },

          {
            prop: 'orderType',
            label: '计划类型',
            align: 'center',

            formatter: (row) => {
              const obj = this.planType.find((i) => i.value == row.planType);
              return obj && obj.label;
            }
          },
          {
            prop: 'version',
            label: '版本',
            align: 'center',

            minWidth: 80
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            width: 110,
            showOverflowTooltip: true
          },
          {
            columnKey: 'status',
            slot: 'status',
            label: '状态',
            align: 'center',
            formatter: (row) => {
              const obj = this.statusOpt[this.activeName].find(
                (i) => i.value == row.status
              );
              return obj && obj.label;
            }
          },
          {
            prop: 'customerName',
            label: '客户名称',
            align: 'center',
            showOverflowTooltip: true
          },

          {
            prop: 'serialNo',
            label: '客户代号',
            align: 'center',
            showOverflowTooltip: true
          },

          {
            prop: 'simpleName',
            label: '客户简称',
            align: 'center',
            showOverflowTooltip: true
          },
        ];
      }
    },
    created() {
      this.getFieldModel();
    },
    mounted() {
      this.getPlanStatistics();
    },
    methods: {
      handleSele(e){
        if(e.index==='1'){
          this.isshow=false;
        }else{
          this.isshow=true;
        }
      },

      async getPlanStatistics() {
        let res = await getPlanStatistics();
        console.log(res);
        this.planStatistics = res;
      },
      homogeneityInspect() {
        if (this.selection.length == 0) {
          this.$message.warning('请至少选择一条计划！');
          return;
        }
        let flag = false;
        let type = 0;
        for (let item of this.selection) {
          type = item.produceType;
          for (let ele of this.selection) {
            if (item.produceType != ele.produceType) {
              flag = true;
              break;
            }
          }
        }
        if (flag) {
          this.$message.warning('请选择加工方式相同的计划！');
          return;
        }
        console.log(type);
        if (type == 2) {
          this.$refs.homogeneityInspectDialog.open(this.selection);
        } else if (type == 3) {
          this.$refs.homogeneityInspectInstallDialog.open(this.selection);
        } else {
          this.$message.warning('请确认加工方式！');
        }
      },
      statusFormatter(status) {
        const obj = this.statusOpt[this.activeName].find(
          (i) => i.value == status
        );

        return obj && obj.label;
      },
      /* 表格数据源 */
      datasource({ page, limit, where }) {
        return getList({
          pageNum: page,
          timeDimensionPlanType: this.timeDimensionPlanType,
          size: limit,
          ...where,
          ...this.sort
        });
      },
      // 发布工单
      handleOrderPublish(type, row) {
        if (!row.produceRoutingName) {
          return this.$message.error('请先选择工艺路线！');
        }

        this.$confirm('发布工单后不可撤回，确定发布吗？', '发布确认')
          .then(async () => {
            const loading = this.$loading({
              lock: true,
              fullscreen: true,
              text: '工单发布中...'
            });
            try {
              let code = row.workOrderCode;
              if (!code) {
                code = await getCode('product_order_code');
              }
              // 反显对象会报错 status
              const data = await release([row.id]);
              if (data || data === 0) {
                this.$message.success('发布成功！');
              } else {
                this.$message.error('发布失败，请重新发布！');
              }
              this.reload();
            } catch (error) {
              console.error(error);
            }
            loading.close();
          })
          .catch((err) => {
            console.error(err);
          });

        // this.$router.push({
        //   path: '/productionPlan/workOrderPublish',
        //   query: {
        //     type,
        //     id: row.id
        //   }
        // });
      },
      // 修改计划
      planEdit(row) {
        if (row.timeDimensionPlanType == 3) {
          this.factoryObj = row;
          // this.factoryType = ;
          // this.factoryShow = true;
          this.$refs.factoryAddRef.open(row );
        } else {
          this.$router.push({
            path: '/saleOrder/salesToProduction',
            query: {
              type: 'edit',
              id: row.id
            }
          });
        }
      },

      getFieldModel() {
        fieldModel({ fieldModel: 't_main_category' }).then((res) => {
          const privateColumn = [];
          if (this.activeName == 'first') {
            privateColumn.push({
              columnKey: 'action',
              label: '操作',
              width: 148,
              align: 'center',
              resizable: false,
              fixed: 'right',
              slot: 'action'
            });
          } else {
            privateColumn = [];
          }

          let newRes = res.map((m) => {
            return {
              prop: 'extField.' + m.prop,
              label: m.label,
              align: 'center',
              showOverflowTooltip: true
            };
          });

          this.newColumns = [...this.columns, ...newRes, ...privateColumn];


          this.$forceUpdate();
        });
      },

      handleTabChange() {
        this.$refs.searchRef.reset();
      },

      /* 刷新表格 */
      reload(where) {
        
        this.$nextTick(() => {
          this.$refs.table.reload({ page: 1, where });
        });
      },
      newReload() {
        
        this.$nextTick(() => {
          this.$refs.table.reload({ page: 1});
        });
      },
      /* 数据转为树形结构 */
      parseData(data) {
        return {
          ...data,
          list: this.$util.toTreeData({
            data: data.list,
            count: data.total,

            idField: 'code',
            parentIdField: 'joinPlanCode'
          })
        };
      },

      handleDel(row) {
        this.$confirm('确定删除当前数据？', '提示')
          .then(() => {
            del(row.id).then((res) => {
              this.reload();
              this.$message.success('删除成功');
            });
          })
          .catch(() => {});
      },
      handleSelectionChange(list) {
        if (list.length > 1) {
          let _list = [];
          list.forEach((e) => {
            if (e.childList.length > 0 && e.splitBatch != 2) {
              _list.push(...e.childList);
            } else {
              _list.push(e);
            }
          });
          this.selection = _list;
        } else {
          this.selection = [];
        }
      },

      handOneSelection(row) {
        const index = this.selection.findIndex((item) => item.id == row.id);
        if (index >= 0) {
          this.selection.splice(index, 1);
        } else {
          this.selection.push(row);
        }
      },

      selectionFilter(row) {
        return this.selection.findIndex((item) => item.id == row.id) >= 0;
      },

      goDetail({ id }) {
        console.log('尽然详情')
        this.$router.push({
          path: '/productionPlan/detail',
          query: { id }
        });
      },

      //  计划分解
      disassemblePlan() {
        if (this.selection.length != 1) {
          return this.$message.warning('计划分解只能选择一个计划！');
        }

        this.$refs.disassemblePlanRef.open(this.selection[0]);
      },

      // 拆批
      toUnpack(row) {
        if (!row.batchNo) {
          return this.$message.error('请先填写批次号！');
        }
        this.$refs.unpackRef.open(row);
      },

      // 合并
      handleMerge() {
        if (this.selection.length <= 1) {
          return this.$message.warning('请先勾选二个或多个计划！');
        }
        const productCode = this.selection[0].productCode;
        const produceRoutingId = this.selection[0].produceRoutingId;

        for (var i = 0; i < this.selection.length; i++) {
          if (productCode != this.selection[i].productCode) {
            return this.$message.warning('产品编码不一致！');
          }

          if (produceRoutingId != this.selection[i].produceRoutingId) {
            return this.$message.warning('工艺路线不一致！');
          }
        }

        this.$refs.mergeRef.open(this.selection);

        console.log(this.selection);
      },

      splitDetails(type, row) {
        this.$refs.DetailsRef.open(type, row);
      },

      factAdd(type) {
        this.factoryType = type;
  
        this.$refs.factoryAddRef.open();
        // this.factoryShow = true;
      },

      factoryClose(val) {
        // this.factoryShow = false;
        this.factoryType= 3;
        this.factoryObj= {};
        if (val) {
          this.reload();
        }
      },

      onSortChange(e) {
        let sort = {
          orderBy: e.order,
          sortName: e.prop
        };
        this.sort = sort;
        this.reload();
      },

      sortTop(row) {
        row.priority = Number(row.priority) + 1;
        this.priorityChange(row);
      },
      sortBottom(row) {
        if (row.priority <= 1) {
          return;
        }
        row.priority = Number(row.priority) - 1;
        this.priorityChange(row);
      },

      priorityChange(row) {
        if (row.priority > 10) {
          row.priority = 10; // 如果大于 10，则设置为 10
        } else if (row.priority < 0) {
          row.priority = 0; // 如果小于 0，则设置为 0
        }

        this.priorityFn(row);
      },
      priorityFn: debounce(function (row) {
        let params = {
          id: row.id,
          priority: row.priority
        };
        updatePriority(params).then((res) => {});
      }, 800)
    }
  };
</script>

<style lang="scss" scoped>
  .btn_box {
    margin-bottom: 6px;
  }

  .check_box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .check {
    width: 14px;
    height: 14px;
    border: 1px solid #dddddd;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .act_check {
    border: 1px solid #409eff;
    background: #409eff;

    .el-icon-check {
      color: #fff;
      font-size: 10px;
    }
  }
  .statistics {
    padding: 10px 10px 20px;
  }
  .cardItem {
    border: 1px solid rgb(225, 225, 225);
    text-align: center;
    color: white;
    background-color: rgba(24, 144, 255, 0.8);
    overflow: hidden;
    padding: 10px;
  }
  .cardText {
    font-size: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .cardNum {
    font-size: 32px;
    font-style: italic;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  @media (max-width: 768px) {
    .cardText {
      font-size: 14px;
    }

    .cardNum {
      font-size: 24px;
    }
  }
  ::v-deep .el-card__body {
    padding: 17px 12px !important;
  }
</style>