admin-fiveFollowing/src/views/operManage/workStatistics/index.vue

<template>
  <div class="app-container">
    <!-- 筛选start -->
    <div class="filter-container mb-10">
      <div class="left">
        <div class="filter-item">
          时间：
          <el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" style="width:auto">
          </el-date-picker>
        </div>
        <div class="filter-item">
          站点:
          <el-select v-model="region" placeholder="请选择" style="width: 200px">
            <el-option label="站点一" value="1"></el-option>
            <el-option label="站点二" value="2"></el-option>
          </el-select>
        </div>

        <el-button type="primary" icon="el-icon-search" class="search-button">搜索</el-button>
      </div>

      <div class="right">
        <el-button type="primary">导出</el-button>
      </div>
    </div>
    <!-- 筛选end -->

    <!-- 表格start -->
    <el-table :data="tableData" border stripe :header-cell-style="headClass" :cell-style="cellStyle">
      <el-table-column fixed prop="workerNum" label="员工账号" width="">
      </el-table-column>
      <el-table-column prop="workerName" label="员工名称" width="">
      </el-table-column>
      <el-table-column prop="orderQuality" label="接单量" width="">
      </el-table-column>
      <el-table-column prop="completedQuantity" label="完单量" width="">
      </el-table-column>
      <el-table-column prop="incomplete" label="未完成" width="">
      </el-table-column>

      <el-table-column prop="orderQuality" label="响应时间/小时" width="">
      </el-table-column>

      <el-table-column prop="handlingTime" label="处理时间/小时" width="">
      </el-table-column>

      <el-table-column prop="evaluation" label="客户评价" width="">
      </el-table-column>



    </el-table>
    <!-- 表格end -->
  </div>
</template>

<script>
// import DialogComponent from "./dialogComponent";
// import { mapGetters } from "vuex";

export default {
  // name: "Dashboard",
  // computed: {
  //   ...mapGetters(["name"]),
  // },

  // components: { DialogComponent },

  data() {
    return {
      showDialog: false,
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      region: "",
      tableData: [
        {
          workerNum: "8081",
          workerName: "张三",
          orderQuality: "0",
          completedQuantity: '0',
          incomplete: '0',
          responseTime: '0',
          handlingTime: '0',
          evaluation: "",
        },
        {
          workerNum: "8081",
          workerName: "张三",
          orderQuality: "0",
          completedQuantity: '0',
          incomplete: '0',
          responseTime: '0',
          handlingTime: '0',
          evaluation: "",
        },
        {
          workerNum: "8081",
          workerName: "张三",
          orderQuality: "0",
          completedQuantity: '0',
          incomplete: '0',
          responseTime: '0',
          handlingTime: '0',
          evaluation: "",
        },
        {
          workerNum: "8081",
          workerName: "张三",
          orderQuality: "0",
          completedQuantity: '0',
          incomplete: '0',
          responseTime: '0',
          handlingTime: '0',
          evaluation: "",
        },
      ],
    };
  },
  methods: {
    // 表头样式设置
    headClass() {
      return "background:#FAFAFA;";
    },

    //自定义列样式
    // cellStyle({ row, column, rowIndex, columnIndex }) {
    //   if (columnIndex === 3) {
    //     return `color:#0284E8;`;
    //   } else {
    //     return "";
    //   }
    // },
  },
};
</script>

<style lang="scss" scoped></style>