SZYGM1.0/src/views/statisticalanalysis/components/echart/tableforms.vue

<template>
  <div class="data-table">
    <div
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      class="data-table-content"
    >
      <template v-if="tableList.length && action == 0">
        <el-table
          :data="tableList"
          style="width: 100%"
          :row-style="rowStyle"
          :style="dataTableContentStyle"
          height="calc(100vh - 190px)"
          max-height="calc(100vh - 190px)"
          :stripe="tableProps.stripe"
          :border="tableProps.border"
          :row-key="tableProps.rowKey"
          :highlight-current-row="tableProps.highlightCurrentRow"
          :header-cell-class-name="tableProps.headerCellClassName"
          :tooltip-effect="tableProps.tooltipEffect"
          :show-summary="tableProps.showSummary"
        >
          <el-table-column
            prop="indexs"
            label="序号"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="dat"
            label="时间"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
            prop="weight"
            label="重量(吨)"
          >
          </el-table-column>
        </el-table>
      </template>
      <template v-if="tableList.length && action == 1">
        <el-table
          :data="tableList"
          style="width: 100%"
          :row-style="rowStyle"
          :style="dataTableContentStyle"
          height="calc(100vh - 190px)"
          max-height="calc(100vh - 190px)"
          :stripe="tableProps.stripe"
          :border="tableProps.border"
          :row-key="tableProps.rowKey"
          :highlight-current-row="tableProps.highlightCurrentRow"
          :header-cell-class-name="tableProps.headerCellClassName"
          :tooltip-effect="tableProps.tooltipEffect"
          :show-summary="tableProps.showSummary"
        >
          <el-table-column
            prop="indexs"
            label="序号"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="dat"
            label="时间"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
            prop="flightNum"
            label="重量(吨)"
          >
          </el-table-column>
        </el-table>
      </template>
      <template v-if="tableList.length && action == 2">
        <el-table
          :data="tableList"
          style="width: 100%"
          :row-style="rowStyle"
          :style="dataTableContentStyle"
          height="calc(100vh - 190px)"
          max-height="calc(100vh - 190px)"
          :stripe="tableProps.stripe"
          :border="tableProps.border"
          :row-key="tableProps.rowKey"
          :highlight-current-row="tableProps.highlightCurrentRow"
          :header-cell-class-name="tableProps.headerCellClassName"
          :tooltip-effect="tableProps.tooltipEffect"
          :show-summary="tableProps.showSummary"
        >
          <el-table-column
            prop="indexs"
            label="序号"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="dat"
            label="时间"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
            prop="flightNum"
            label="运单数(单)"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
            prop="weight"
            label="重量(吨)"
          >
          </el-table-column>
        </el-table>
      </template>
      <template v-if="tableList.length && action == 3">
        <el-table
          :data="tableList"
          style="width: 100%"
          :row-style="rowStyle"
          :style="dataTableContentStyle"
          height="calc(100vh - 190px)"
          max-height="calc(100vh - 190px)"
          :stripe="tableProps.stripe"
          :border="tableProps.border"
          :row-key="tableProps.rowKey"
          :highlight-current-row="tableProps.highlightCurrentRow"
          :header-cell-class-name="tableProps.headerCellClassName"
          :tooltip-effect="tableProps.tooltipEffect"
          :show-summary="tableProps.showSummary"
        >
          <el-table-column
            prop="indexs"
            label="序号"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="fdt"
            label="时间"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
            prop="weight"
            label="重量(吨)"
          >
          </el-table-column>
        </el-table>
      </template>
      <template v-if="tableList.length && action == 4">
        <el-table
          :data="tableList"
          style="width: 100%"
          :row-style="rowStyle"
          :style="dataTableContentStyle"
          height="calc(100vh - 190px)"
          max-height="calc(100vh - 190px)"
          :stripe="tableProps.stripe"
          :border="tableProps.border"
          :row-key="tableProps.rowKey"
          :highlight-current-row="tableProps.highlightCurrentRow"
          :header-cell-class-name="tableProps.headerCellClassName"
          :tooltip-effect="tableProps.tooltipEffect"
          :show-summary="tableProps.showSummary"
          :summary-method="totalOutPrice"
        >
          <el-table-column
            prop="indexs"
            label="序号"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="flightdate"
            label="日期"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="flightNo"
            label="航班号"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="line"
            label="航线"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="stand"
            label="机位"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="totalWeight"
            label="货物总重 (KG)"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="pullWeight"
            label="拉货 (KG)"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <!-- <el-table-column
            prop="dat"
            label="时间"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
            prop="pullFlightNum"
            label="航班量(班)"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
            prop="pullWeight"
            label="重量(吨)"
          >
          </el-table-column> -->
        </el-table>
      </template>
      <template v-if="tableList.length && action == 5">
        <el-table
          :data="tableList"
          style="width: 100%"
          :row-style="rowStyle"
          :style="dataTableContentStyle"
          height="calc(100vh - 190px)"
          max-height="calc(100vh - 190px)"
          :stripe="tableProps.stripe"
          :border="tableProps.border"
          :row-key="tableProps.rowKey"
          :highlight-current-row="tableProps.highlightCurrentRow"
          :header-cell-class-name="tableProps.headerCellClassName"
          :tooltip-effect="tableProps.tooltipEffect"
          :summary-method="totalOutPrice"
        >
          <el-table-column
            prop="indexs"
            label="序号"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="IATACode"
            label="航司"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="flightNO"
            label="航班号"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="flightDate"
            label="执飞日期"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="planLandingTime"
            label="计划降落时间"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="acLandingTime"
            label="实际降落时间"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="target"
            label="航程"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="unLoadTime"
            label="卸机时间"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="planeDownTime_IN"
            label="库区到达时间"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="depotJoinTime_IN"
            label="货站交接时间"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="tallyTime_in"
            label="理货时间"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
        </el-table>
      </template>
      <template v-if="tableList.length && action == 6">
        <el-table
          :data="tableList"
          style="width: 100%"
          :row-style="rowStyle"
          :style="dataTableContentStyle"
          height="calc(100vh - 190px)"
          max-height="calc(100vh - 190px)"
          :stripe="tableProps.stripe"
          :border="tableProps.border"
          :row-key="tableProps.rowKey"
          :highlight-current-row="tableProps.highlightCurrentRow"
          :header-cell-class-name="tableProps.headerCellClassName"
          :tooltip-effect="tableProps.tooltipEffect"
          :summary-method="totalOutPrice"
          :show-summary="tableProps.showSummary"
        >
          <el-table-column
            prop="indexs"
            label="序号"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="flightDate"
            label="执飞日期"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="planFlightNum"
            label="计划航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="finishFlightNum"
            label="已完成航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="ygmNum"
            label="一个码航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="speNum"
            label="特货航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="receiveSureNum"
            label="收运核单航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="securityNum"
            label="安检放行航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="addCargoNum"
            label="加货航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="stowageNum"
            label="预配载航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="depotJoinNum"
            label="交接复核航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="planeDownNum"
            label="机下交接航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="pullNum"
            label="拉下航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="pullSureNum"
            label="拉回确认航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
        </el-table>
      </template>
      <template v-if="tableList.length && action == 7">
        <el-table
          :data="tableList"
          style="width: 100%"
          :row-style="rowStyle"
          :style="dataTableContentStyle"
          height="calc(100vh - 190px)"
          max-height="calc(100vh - 190px)"
          :stripe="tableProps.stripe"
          :border="tableProps.border"
          :row-key="tableProps.rowKey"
          :highlight-current-row="tableProps.highlightCurrentRow"
          :header-cell-class-name="tableProps.headerCellClassName"
          :tooltip-effect="tableProps.tooltipEffect"
          :summary-method="totalOutPrice"
          :show-summary="tableProps.showSummary"
        >
          <el-table-column
            prop="indexs"
            label="序号"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="flightDate"
            label="执飞日期"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="planFlightNum"
            label="计划航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="finishFlightNum"
            label="已完成航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="speNum"
            label="特货航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="unLoadNum"
            label="卸机航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="arriveNum"
            label="库区到达航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="depotJoinNum"
            label="货站交接航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="tallyNum"
            label="理货航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="outWarehouseNum"
            label="出库航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
        </el-table>
      </template>
      <template v-if="tableList.length && action == 8">
        <el-table
          :data="tableList"
          style="width: 100%"
          :row-style="rowStyle"
          :style="dataTableContentStyle"
          height="calc(100vh - 190px)"
          max-height="calc(100vh - 190px)"
          :stripe="tableProps.stripe"
          :border="tableProps.border"
          :row-key="tableProps.rowKey"
          :highlight-current-row="tableProps.highlightCurrentRow"
          :header-cell-class-name="tableProps.headerCellClassName"
          :tooltip-effect="tableProps.tooltipEffect"
          :summary-method="totalOutPrice"
          :show-summary="tableProps.showSummary"
        >
          <el-table-column
            prop="indexs"
            label="序号"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="flightDate"
            label="执飞日期"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="planFlightNum"
            label="计划航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="finishFlightNum"
            label="已完成航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="speNum"
            label="特货航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="enterParkNum"
            label="入园航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="enterCustomsNum"
            label="海关放行航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="toStationNum"
            label="运抵货站航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="securityNum"
            label="安检放行航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="receiveSureNum"
            label="收运核单航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="tallyNum"
            label="理货航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="requestDepotJoinNum"
            label="发起货站交接航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="resureNum"
            label="交接复核航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="planeDownNum"
            label="机下交接航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="pullregisterNum"
            label="拉下登记航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="stowageNum"
            label="实配航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
        </el-table>
      </template>
      <template v-if="tableList.length && action == 9">
        <el-table
          :data="tableList"
          style="width: 100%"
          :row-style="rowStyle"
          :style="dataTableContentStyle"
          height="calc(100vh - 190px)"
          max-height="calc(100vh - 190px)"
          :stripe="tableProps.stripe"
          :border="tableProps.border"
          :row-key="tableProps.rowKey"
          :highlight-current-row="tableProps.highlightCurrentRow"
          :header-cell-class-name="tableProps.headerCellClassName"
          :tooltip-effect="tableProps.tooltipEffect"
          :summary-method="totalOutPrice"
          :show-summary="tableProps.showSummary"
        >
          <el-table-column
            prop="indexs"
            label="序号"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="flightDate"
            label="执飞日期"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="planFlightNum"
            label="计划航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="finishFlightNum"
            label="已完成航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="speNum"
            label="特货航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="unloadNum"
            label="卸机航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="planeDownTimeNum"
            label="机下交接航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="depotJoinNum"
            label="货站交接航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="tallyNum"
            label="理货航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="passCustomsNum"
            label="海关放行航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
          <el-table-column
            prop="outWarehouseNum"
            label="出库航班数"
            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
          >
          </el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tableList: {
      type: Array,
      default: () => [],
    },
    action: {
      type: Number,
      default: 0,
    },
    set: {
      type: Number,
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      rowStyle: {
        height: "50px",
        fontSize: "14px",
        color: "#101116",
      },
      tableProps: {
        height: "100%",
        maxHeight: "100%",
        stripe: true,
        border: true,
        highlightCurrentRow: false,
        rowClassName: "rowClass",
        headerCellClassName: "headerCell",
        tooltipEffect: "light",
        showSummary: true,
        rowKey: "",
      },
      tableColumnProperty: {
        width: "",
        fixed: "",
        sortable: false,
        showOverflowTooltip: true,
        align: "center",
        headerAlign: "",
      },
    };
  },
  watch: {
    tableList: {
      handler(val) {
        // console.log(val, "111111111");
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    dataTableContentStyle() {
      const style = {};
      if (this.minHeight) {
        style["min-height"] = this.minHeight;
      }
      if (this.tableHeight) {
        style["height"] = this.tableHeight;
      }
      return style;
    },
  },
  methods: {
    totalOutPrice(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (
          column.property != "stand" &&
          column.property != "flightdate" &&
          column.property != "indexs" &&
          column.property != "flightNo" &&
          column.property != "line"
        ) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index];
        }
      });
      return sums;
    },
    //滚动分页加载
    // load  () {
    //   this.$emit("load", true);
    // };
  },
};
</script>
<style lang="scss" scoped>
.el-table {
  display: flex;
  flex-direction: column;
}
.infinite-list {
  // height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}
:deep.el-table {
  .rowClass {
    height: 40px;
    font-size: 14px;
    color: #101116;
  }
  .el-table__header .el-table__cell {
    height: 40px;
    background: #ffffff;
    font-size: 14px;
    font-weight: bold;
    color: #101116;
  }
  .editBtn {
    background: #ffffff;
    border: 1px solid #f79ec6;
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #ac014d;
  }
  .delBtn {
    background: #eb2f3b;
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #ffffff;
    border: none;
  }
  .child-list {
    font-size: 14px;
    font-family: Helvetica;
    font-weight: 400;
    color: #101116;
  }
  .btn-all {
    justify-content: center;
    .btn-list {
      margin-right: 10px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .el-table__body .el-table__cell {
    &.el-table-column--selection > .cell {
      display: block;
      text-align: center;
    }
    &.cell-click {
      color: #2d67e3;
      cursor: pointer;
    }
  }
}
:deep.el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell {
  background-color: #f0f3f7;
}
.tableStatus {
  font-size: 14px;
  .icon {
    width: 14px;
    height: 14px;
    background: #2d67e3;
    border-radius: 2px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -2px;
  }
  .status0 {
    position: relative;
    top: 5px;
  }
  .status1 {
    position: relative;
    top: 5px;
    .icon {
      background-color: #afb4bf;
    }
  }
  .status2 {
    position: relative;
    top: 5px;
    .icon {
      background-color: #eb2f3b;
    }
  }
}
</style>