11-mes-new/src/views/3DOverview/components/LeftContentOrder.vue

<template>
  <div class="left-content-equipment-check">
    <!-- <TechyFakeTable :table-props="tableProps" :table-data="tableData" />
    <TechyFakeTable :table-props="tableProps2" :table-data="tableData2" /> -->
    <div class="el-table-wrapper fix-table">
      <!-- <TechyTable key="table-1" :showIndex="false" :table-config="tableProps" :table-data="tableData"></TechyTable> -->
      <el-table
        key="LeftContentOrder1"
        border
        :data="tableData"
        :header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
      >
        <el-table-column
          label="订单编号"
          prop="orderCode"
          :show-overflow-tooltip="true"
          :resizable="true"
          align="center"
        />
        <el-table-column
          label="客户名称"
          prop="clientName"
          :show-overflow-tooltip="true"
          :resizable="true"
          align="center"
        />
        <el-table-column label="规格" prop="specs" :resizable="true" align="center" :width="100" />
        <el-table-column label="完成度" prop="finished" :resizable="true" align="center" :width="100">
          <template slot-scope="scope">
            <el-progress
              class="lb-progress-bar"
              type="circle"
              :percentage="scope.row.finished"
              :width="14"
              :stroke-width="2"
              color="#47FF27"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <div class="el-table-wrapper">
      <el-table
        key="LeftContentOrder2"
        border
        :data="tableData2"
        :header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
      >
        <el-table-column label="订单编号" prop="orderCode" :show-overflow-tooltip="true" :resizable="true" />
        <el-table-column label="客户名称" prop="clientName" :show-overflow-tooltip="true" :resizable="true" />
        <el-table-column label="规格" prop="specs" :resizable="true" />
        <el-table-column label="完成度" prop="finished" :resizable="true" />
      </el-table>
    </div> -->
  </div>
</template>

<script>
// import TechyFakeTable from './TechyFakeTable.vue'
// import TechyTable from './TechyTable.vue'

const tableData = [
  { orderCode: 'DD202200910', clientName: '中建材', specs: '50cm', finished: 80 },
  { orderCode: 'DD202200911', clientName: '蚌埠研究院', specs: '5mm', finished: 40 },
  { orderCode: 'DD202200912', clientName: '中建材', specs: '50cm', finished: 77 },
  { orderCode: 'DD202200913', clientName: '国资委', specs: '50cm', finished: 66 },
  { orderCode: 'DD202200914', clientName: '合肥新能源', specs: '50cm', finished: 55 }
  // { orderCode: 'DD202200915', clientName: '中信科技', specs: '50cm', finished: 77 }
  // { orderCode: 'DD202200916', clientName: 'H', specs: '50cm', finished: 33 }
]
const tableData2 = [
  { orderCode: 'DD202200910', clientName: '中建材', specs: '50cm', finished: 80 },
  { orderCode: 'DD202200911', clientName: '蚌埠研究院', specs: '5mm', finished: 40 },
  { orderCode: 'DD202200912', clientName: '中建材', specs: '50cm', finished: 77 },
  { orderCode: 'DD202200913', clientName: '国资委', specs: '50cm', finished: 66 },
  { orderCode: 'DD202200914', clientName: '合肥新能源', specs: '50cm', finished: 55 },
  { orderCode: 'DD202200915', clientName: '中信科技', specs: '50cm', finished: 77 }
  // { orderCode: 'DD202200916', clientName: 'H', specs: '50cm', finished: 33 }
]

export default {
  name: 'LeftContentOrder',
  components: {},
  data() {
    return { tableData, tableData2 }
  },
  created() {},
  mounted() {},
  methods: {}
}
</script>

<style scoped>
.fix-table >>> .el-table td .cell {
  width: 70% !important;
  margin: auto;
  text-align: left;
}

.left-content-equipment-check {
  display: flex;
  gap: calc(100vw / 1920 * 16);
}

.el-table-wrapper {
  flex: 1;
}

.left-content-equipment-check > div {
  overflow: hidden;
  overflow-x: auto;
}

.el-table-wrapper >>> * {
  background: transparent;
}
.el-table-wrapper >>> .el-table::before,
.el-table-wrapper >>> .el-table--group::after,
.el-table-wrapper >>> .el-table--border::after {
  background: transparent;
}

.el-table-wrapper >>> .el-table {
  font-size: 8px;
  background-color: transparent;
  color: #fff9;
  border: 0;
}

.el-table-wrapper >>> .el-table th.is-leaf,
.el-table-wrapper >>> .el-table td {
  border-color: #0d1728;
  padding: 0;
}

.el-table__row--striped:hover > td,
.el-table-wrapper >>> .el-table__row:hover > td {
  background-color: rgba(79, 114, 136, 0.29) !important;
}

.el-table-wrapper >>> table {
  border: unset;
}

.el-table-wrapper >>> thead {
  color: #fff;
}
.el-table-wrapper >>> tr {
  background: unset;
}
.el-table-wrapper >>> tbody td > div,
.el-table-wrapper >>> thead th > div {
  white-space: nowrap;
}
.el-table-wrapper >>> th,
.el-table-wrapper >>> td {
  padding: 0;
}

.el-table-wrapper >>> tbody > tr:nth-child(even) {
  background: rgba(76, 97, 123, 0.2);
}

.lb-progress-bar {
  left: 30px;
  display: flex;
}
.lb-progress-bar >>> .el-progress__text {
  color: #fff9;
  left: -85%;
}
</style>