zkPCproject/src/views/Statistics/ReceptionStatistical.vue

<template>
  <div class="box-center">
    <div class="app-top">
      <div class="app-titel" v-if="role != 3" style="margin-bottom: 10px">
        <div class="titel-text">项目选择:</div>
        <div style="margin-left: 26px">
          <el-select
            v-model="houseId"
            placeholder="请选择"
            filterable
            @change="houseChange"
          >
            <el-option
              v-for="item in houseList"
              :key="item.id"
              :label="item.propertyName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="app-titel">
        <div class="titel-text">接待时间:</div>
        <div class="toptimeqhuan">
          <div :class="{ tophove: dateType == 4 }" @click="tabtimetap(4)">
            近7天
          </div>
          <div :class="{ tophove: dateType == 5 }" @click="tabtimetap(5)">
            近15天
          </div>
          <div :class="{ tophove: dateType == 6 }" @click="tabtimetap(6)">
            近30天
          </div>
        </div>
        <div style="margin-left: 26px">
          <el-date-picker
            v-model="customtime"
            @change="confirmtime()"
            type="daterange"
            range-separator="-"
            :default-time="['00:00:00', '23:59:59']"
            :clearable="false"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="app-titel" style="margin-top: 15px" v-show="isOpen">
        <div class="div-lab">
          <div style="margin-right: 20px" class="titel-text">团队:</div>
          <el-select
            v-model="deptId"
            filterable
            @change="deptChange"
            placeholder="请选择"
            class="div-inp"
          >
            <el-option
              v-for="item in options"
              :key="item.deptId"
              :label="item.name"
              :value="item.deptId"
            >
            </el-option>
          </el-select>
        </div>
        <div style="margin-left: 26px" class="div-lab">
          <div style="margin-right: 20px" class="titel-text">置业顾问:</div>
          <el-select
            v-model="accountId"
            filterable
            @change="repChange"
            placeholder="请选择"
            class="div-inp"
          >
            <el-option
              v-for="item in repList"
              :key="item.accountId"
              :label="item.name"
              :value="item.accountId"
            >
            </el-option>
          </el-select>
        </div>
        
      </div>
      <div class="app-titel" style="margin-top: 15px">
         <div style="margin-left: 30px">
          <el-button type="primary" size="small" @click="screen()"
            >筛选</el-button
          >
          <el-button type="text" size="small" @click="reset()"
            >清空筛选条件</el-button
          >
                  <el-button style="margin-left:10px;" @click="isSystoleForm" type="text">{{isOpen?'收起':'展开'}}<i style="margin-left:5px;" :class="isOpen?'el-icon-arrow-up':'el-icon-arrow-down'"></i></el-button>

        </div>
        <div
          style="margin-left: auto; margin-right: 10px"
          v-if="sta_rec_downLoad"
        >
          <el-button @click="downLoad" icon="el-icon-download">导出</el-button>
        </div>
      </div>
     
    </div>
    <!-- 表格 -->
    <div class="cen-tab">
      <el-table :header-cell-style="{background:'#F5F7FA',color:'#333333'}" :data="tableData" style="width: 100%">
        <el-table-column prop="batchId" width="120" label="序号" align="center">
          <template slot-scope="scope">
            {{
              scope.$index == tableData.length - 1
                ? "合计/平均"
                : scope.$index + 1
            }}
          </template>
        </el-table-column>
        <el-table-column
          width="120"
          prop="accountName"
          label="日期"
          align="center"
          sortable
        >
          <template slot-scope="scope">
            {{
              scope.$index == tableData.length - 1
                ? scope.row.statDate
                : scope.row.statDate.substring(0, 10)
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="fraction"
          label="平均执行率"
          align="center"
          width="110"
          sortable
        >
          <template slot-scope="{ row }"> {{ row.fraction }}% </template>
        </el-table-column>
        <el-table-column
          prop="receptionCount"
          label="接待量"
          align="center"
          sortable
        >
          <template slot-scope="{ row }"> {{ row.receptionCount }}次 </template>
        </el-table-column>
        <el-table-column
          prop="accountNum"
          label="接待顾问"
          align="center"
          sortable
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="activeCustomer"
          label="有效接待"
          align="center"
          sortable
          width="100"
        >
          <template slot-scope="{ row }"> {{ row.activeCustomer }}次 </template>
        </el-table-column>
        <el-table-column
          prop="prohibitedCustomer"
          label="违禁接待次数"
          align="center"
          sortable
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="sumDurationMinutes"
          label="接待时长(分)"
          align="center"
          sortable
          width="120"
        >
          <template slot-scope="{ row }">
            {{ Math.floor(row.sumDurationMinutes) }}分钟
          </template>
        </el-table-column>
        <el-table-column
          prop="prohibitedZb"
          label="违禁接待占比"
          align="center"
          width="150"
          sortable
        >
          <template slot-scope="{ row }"> {{ row.prohibitedZb }}% </template>
        </el-table-column>
        
        <el-table-column
          v-for="(item, idx) in tablist"
          :key="idx"
          :prop="item.props"
          :label="item.label"
          align="center"
          sortable
          width="100"
        >
          <template slot-scope="{ row }"> {{ row[item.props] }}% </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              v-if="scope.$index < tableData.length - 1"
              type="text"
              size="small"
              @click="toDetail(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="[10, 30, 50]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog title="详情" :visible.sync="dialogVisible" width="80%">
      <div class="cen-tab">
        <el-table
          :data="detailData"
          stripe
          style="width: 100%"
        >
          <el-table-column prop="batchId" label="序号" align="center">
            <template slot-scope="scope">
              {{
                scope.$index == detailData.length - 1
                  ? "合计/平均"
                  : scope.$index + 1
              }}
            </template>
          </el-table-column>
          <el-table-column prop="accountName" label="顾问" align="center">
          </el-table-column>
          <el-table-column prop="deptName" label="归属团队" align="center">
          </el-table-column>
          <el-table-column prop="fraction" label="平均执行率" align="center" >
          </el-table-column>
          <el-table-column prop="receptionCount" label="接待量" align="center" >
          </el-table-column>
          <el-table-column
            prop="activeCustomer"
            label="有效接待"
            align="center"
            
          >
          </el-table-column>
          <el-table-column
            prop="prohibitedCustomer"
            label="违禁接待次数"
            align="center"
            
          >
          </el-table-column>
          <el-table-column
            prop="sumDurationMinutes"
            label="接待时长(分)"
            align="center"
            
          >
            <template slot-scope="{ row }">
              {{ Math.floor(row.sumDurationMinutes) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="prohibitedZb"
            label="违禁接待占比"
            align="center"
            
          >
          </el-table-column>
          
          <el-table-column
            v-for="(item, idx) in tablist1"
            :key="idx"
            :prop="item.props"
            :label="item.label"
            align="center"
          >
          </el-table-column>
        </el-table>
        <div style="display: flex; justify-content: flex-end; margin-top: 10px">
          <el-pagination
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
            :current-page="current1"
            :page-sizes="[10, 30, 50]"
            :page-size="size1"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total1"
          >
          </el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { exportMethodPost } from "@/util/util";
export default {
  data() {
    return {
      isOpen:false,
      houseId: "",
      buildingoptions: [],
      houseList: [],
      detailData: [],
      dateType: 2,
      repList: [],
      current: 1,
      current1: 1,
      accountId: "",
      size: 10,
      total: 20,
      size1: 10,
      total1: 20,
      customtime: [],
      tablist: [],
      tablist1: [],
      deptId: "",
      tableData: [],
      orgType: localStorage.getItem("orgType"),
      options: [],
      value: "1",
      statDateStart: "",
      statDateEnd: "",
      echarlist: [],
      echarlist1: [],
      echarlist2: [],
      echarlist3: [],
      teamAllLevel: [],
      teamAllLevelid: "",
      teamAllLeve2id: "",
      teamAllLeve2: [],
      statDate: "",
      dialogVisible: false,
      houseList: [],
      role: "",
    };
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  created() {
    this.sta_rec_downLoad = this.permissions["sta_rec_downLoad"];
  },
  mounted() {
    this.role = localStorage.getItem("orgType");
    if (this.role == 3) {
      this.houseId = localStorage.getItem("houseId");
      this.tabtimetap(4);
      this.deptFindList();
    } else {
      this.zkhousePage();
    }
  },
  methods: {
    isSystoleForm(){
      this.isOpen = !this.isOpen
    },
    downLoad() {
      let obj = {
        houseId: this.houseId,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
        type: 1,
        current: 1,
        size: 1,
        deptId: this.deptId,
        accountId: this.accountId,
        dateType: this.dateType == 7 ? null : this.dateType,
      };
      exportMethodPost(
        "autoSR/cusStageStatistics/receptionStatisticsExport",
        "接待统计",
        obj
      );
    },
    houseChange() {
      this.customtime = [];
      this.TimetoAhoose = 4;
      this.statDateStart = "";
      this.deptId = "";
      this.accountId = "";
      this.statDateEnd = "";
      this.tabtimetap(4);
      this.deptFindList();
    },
    zkhousePage() {
      this.$api.api
        .findHouseByUser({
          orgType: localStorage.getItem("orgType"),
        })
        .then((res) => {
          this.houseList = res.data;
          this.houseId = res.data[0].id;
          this.tabtimetap(4);
          this.deptFindList();
        });
    },
    toDetail(row) {
      console.log(row);
      this.statDate = row.statDate.substring(0, 10);
      this.dialogVisible = true;
      this.getDetailList();
    },
    // 获取detail
    getDetailList() {
      this.$api.api
        .receptionStatistics({
          houseId: this.houseId,
          statDate: this.statDate,
          current: this.current,
          size: this.size,
          deptId: this.deptId,
          accountId: this.accountId,
          type: 2,
        })
        .then((res) => {
          this.detailData = res.data.records;
          // 数据处理
          // 需要两个数组，一个用来展示
          this.deailDate(0);
          this.total1 = res.data.total;
        });
    },
    screen() {
      this.current = 1;
      this.accountRank();
    },
    reset() {
      this.current = 1;
      this.deptId = "";
      this.accountId = "";
      this.accountRank();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    deptFindList() {
      // 获取团队
      this.$api.http
        .overviewfindList({
          houseId: this.houseId,
        })
        .then((res) => {
          let userinfo = JSON.parse(sessionStorage.getItem("zk-userInfo"));
          if (userinfo.content.deptType == 1) {
            this.options.push(...res.data);
            this.deptId = this.options[0].deptId;
          } else {
            this.options = [
              {
                name: "全部",
                deptId: "",
              },
            ];
            this.options.push(...res.data);
            this.deptId = "";
          }
          this.receptionStatisticsAllAccount();
          this.accountRank();
        });
    },
    deptChange() {
      this.receptionStatisticsAllAccount();
      this.accountId = "";
    },
    receptionStatisticsAllAccount() {
      this.$api.api
        .receptionStatisticsAllAccount({
          houseId: this.houseId,
          deptId: this.deptId,
        })
        .then((res) => {
          console.log(res);
          this.repList = [];
          this.repList.push(...res.data);
          this.accountRank();
        });
    },
    // 获取列表
    repChange() {
      this.accountRank();
    },
    accountRank() {
      this.$api.api
        .receptionStatistics({
          houseId: this.houseId,
          statDateStart: this.statDateStart,
          statDateEnd: this.statDateEnd,
          current: this.current,
          size: this.size,
          deptId: this.deptId,
          accountId: this.accountId,
          dateType: this.dateType == 7 ? null : this.dateType,
          type: 1,
        })
        .then((res) => {
          this.tableData = res.data.records;
          // 数据处理
          // 需要两个数组，一个用来展示
          this.deailDate();
          this.total = res.data.total;
        });
    },
    confirmtime() {
      this.dateType = 7;
      this.statDateStart = this.customtime[0];
      this.statDateEnd = this.customtime[1];
      this.init();
    },
    init() {
      this.accountRank();
    },
    deailDate(idx) {
      if (idx) {
        this.tablist1 = [];
        // 当他是第一个 小将
        // console.log("第一个");
        this.deailDate[0].resultsList.map((item, idx) => {
          let obj = {};
          obj.label = item.name;
          obj.props = "str" + idx;
          this.tablist1.push(obj);
        });
        this.deailDate.map((item) => {
          this.tablist1.map((item1, idx) => {
            item[item1.props] = item.resultsList[idx].zxl;
          });
        });
      } else {
        this.tablist = [];
        // 当他是第一个 小将
        // console.log("第一个");
        this.tableData[0].resultsList.map((item, idx) => {
          let obj = {};
          obj.label = item.name;
          obj.props = "str" + idx;
          this.tablist.push(obj);
        });
        this.tableData.map((item) => {
          this.tablist.map((item1, idx) => {
            item[item1.props] = item.resultsList[idx].zxl;
          });
        });
      }
    },
    handleCurrentChange(e) {
      this.current = e;
      this.accountRank();
    },
    handleSizeChange(e) {
      this.size = e;
      this.accountRank();
    },
    handleCurrentChange1(e) {
      this.current1 = e;
      // this.accountRank();
    },
    handleSizeChange1(e) {
      this.size1 = e;
      // this.accountRank();
    },
    //切换时间
    tabtimetap(index) {
      this.statDateStart = "";
      this.statDateEnd = "";
      this.dateType = index;
      this.customtime = [];
      
      //给时间选择器赋值
      let num = 24 * 3600 * 1000;
      //	获取当前时间戳转换为日期格式
      if (index == 4) {
        num = 24 * 3600 * 1000 * 7;
      }
      if (index == 5) {
        num = 24 * 3600 * 1000 * 15;
      }
      if (index == 6) {
        num = 24 * 3600 * 1000 * 30;
      }
      this.customtime = [
        this.timestampToTime(new Date().getTime() - num),
        this.timestampToTime(new Date().getTime() - 24 * 3600 * 1000),
      ];

      this.init();
    },
    dealData(arr) {
      let num = Math.max.apply(
        Math,
        arr.map(function (o) {
          return o.zxl;
        })
      ); //结果：3
      arr.map((item) => {
        item.zxl1 = Math.floor((item.zxl / num) * 100);
      });
      return arr;
    },

    
    timestampToTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var yyyy = date.getFullYear() + "-";
      var MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var dd = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      return yyyy + MM + dd;
    },
  },
};
</script>

<style scoped="scoped" lang="scss" >
.box-center {
  width: 100%;
  padding: 5px 15px 20px;
  min-width: 1000px;
}
.cen-tab {
  width: 100%;
  padding: 15px;
  background: #ffffff;
  margin-top: 15px;
}
.tophove {
  color: #ffffff;
  background: #2671e2;
}
.app-top {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  padding-top: 15px;
  padding-bottom: 15px;
  .app-titel {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .label {
      font-size: 14px;
      font-weight: 400;
      color: #32363d;
      line-height: 32px;
      text-align: right;
    }
    .titel-text {
      height: 100%;
      font-size: 16px;
      color: #32363d;
      text-indent: 30px;
    }
    .toptimeqhuan {
      height: 30px;
      background: #ffffff;
      display: flex;
      align-items: center;
      margin-left: 20px;
    }
    .toptimeqhuan div {
      padding-left: 20px;
      padding-right: 20px;
      text-align: center;
      line-height: 30px;
      font-size: 14px;
      margin-right: 15px;
      border-radius: 4px;
      border: 1px solid #e0e0e0;
    }
  }
}
.div-lab {
  display: flex;
  margin: 5px;
}
.div-inp {
  width: 250px;
}

.app-box-san {
  width: 100%;
  height: 400px;
  display: flex;
  margin-top: 15px;
  .zuo {
    flex: 1;
    height: 100%;
    margin-right: 15px;
    background: #ffffff;
    border-radius: 4px;
    .title {
      width: 100%;
      height: 55px;
      // border-bottom: 1px solid #e0e0e0;
      display: flex;
      align-content: center;
      .text1 {
        flex: 2;
        line-height: 55px;
        text-indent: 20px;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
            display: flex;
            align-items: center;
      }
      .text2 {
        flex: 1;
        height: 55px;
        display: flex;
        align-items: center;
      }
    }
  }
  .you {
    height: 100%;
    flex: 1;
    background: #ffffff;
    border-radius: 4px;
    .title {
      width: 100%;
      height: 55px;
      // border-bottom: 1px solid #e0e0e0;
      display: flex;
      align-content: center;
      .text1 {
        flex: 2;
        line-height: 55px;
        text-indent: 20px;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
            display: flex;
            align-items: center;
      }
      .text2 {
        flex: 1;
        height: 55px;
        display: flex;
        align-items: center;
      }
    }
  }
}

.hejisan {
  width: 92%;
  margin: 15px auto;
  display: flex;
  // padding-top: 10px;
  // padding-bottom: 10px;
  .text1-1 {
    color: #666666;
  }
  .text1-2 {
    color: #333333;
    margin-top: 10px;
  }
}

// 进度条
.jinbox {
  width: 100%;
  height: 18px;
  line-height: 18px;
  display: flex;
  font-size: 16px;
  color: #2c3542;
  margin-top: 24px;
  align-items: center;
  .jinboxtit {
    width: 14%;
    height: 18px;
    padding-right: 6px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .jinbox-box {
    width: 75%;
    height: 100%;
    border-radius: 8px;
    background: #f2f2f2;
  }
  .boxbaifenbi {
    height: 100%;
    background: #60d7a0;
    border-radius: 8px;
    max-width: 100%;
  }
  .boxbaifenbi2 {
    height: 100%;
    max-width: 100%;
    background: #5b8ff9;
  }
  .jinboxbott {
    width: 16%;
    text-indent: 50px;
  }
}
.div-lab {
  display: flex;
  margin: 5px;
}
.div-inp {
  width: 200px;
}
.label {
  font-size: 14px;
  font-weight: 400;
  color: #32363d;
  line-height: 32px;
  margin-left: 15px;
  min-width: 40px;
}
/deep/ .el-table__header-wrapper{
  thead{
    tr{
      th{
        background: #F5F7FA;
        color: #333333;
      }
    }
  }
}
/deep/ .el-dialog--center{
  border-radius: 8px;
  .el-dialog__title{
    font-weight: bold;
  }
}
/deep/ .el-button--primary{
  background: #2671E2 !important;
  border: 1px solid #2671E2 !important;
}
/deep/ .el-button--text{
  color: #2671E2;
}
</style>