|
- <template>
- <div class="pages">
- <div class="app-titel" style="height: auto; padding: 26px">
- <div class="screeningbox" style="display: flex; flex-wrap: wrap">
- <div class="screeningbox" style="display: flex; align-items: center">
- 添加时间:
- </div>
- <el-radio-group
- v-model="pageParams.dateType"
- size="small"
- @change="tabtimetap"
- >
- <el-radio-button :label="4">近7天</el-radio-button>
- <el-radio-button :label="5">近15天</el-radio-button>
- <el-radio-button :label="6">近30天</el-radio-button>
- </el-radio-group>
- <div style="margin-left: 26px">
- <el-date-picker
- style="width: 250px; height: 32px; line-height: 32px"
- @change="confirmtime()"
- v-model="customtime"
- type="daterange"
- range-separator="至"
- value-format="yyyy-MM-dd"
- start-placeholder="开始日期"
- end-placeholder="结束日期"
- >
- </el-date-picker>
- </div>
-
- <div style="width: 100%; display: flex">
- <div class="items">
- 团队:
- <el-select
- v-model="pageParams.deptId"
- clearable
- placeholder="请选择"
- >
- <el-option
- v-for="item in deptList"
- :key="item.id"
- :label="item.name"
- :value="item.id"
- >
- </el-option>
- </el-select>
- </div>
- <div class="items">
- 接待顾问:
- <el-select
- v-model="pageParams.agentId"
- clearable
- placeholder="请选择"
- >
- <el-option
- v-for="item in accountList"
- :key="item.accountId"
- :label="item.name"
- :value="item.accountId"
- >
- </el-option>
- </el-select>
- </div>
- <div class="items">
- 销讲业务:
- <el-select
- @change="changeSelect"
- v-model="pageParams.marketingBusiness"
- clearable
- placeholder="请选择销讲业务"
- >
- <el-option
- v-for="item in options"
- :key="item.id"
- :label="item.templateName"
- :value="item.id"
- >
- </el-option>
- </el-select>
- </div>
-
- <div class="items">
- <el-button type="primary" @click="employeeUsageStatistics"
- >筛选</el-button
- >
- <el-button type="text" @click="Emptycondition"
- >清空筛选条件</el-button
- >
- </div>
- </div>
- </div>
- </div>
- <!-- <%--
- <div class="screeningbox" style="margin-top: 20px; background: #fff">
- --%> <%--
- <button class="button1" @click="employeeUsageStatistics()">筛选</button
- >--%> <%--
- <button
- style="background: #ffffff; color: #606775"
- class="button1"
- @click="Emptycondition()"
- >
- 清空筛选条件</button
- >--%> <%-- <button class="button1" @click="daochu()">导出</button>--%>
- <%--
- </div>
- --%> -->
-
- <div class="box-forhtml" v-for="(item, index) in objList" :key="index">
- <div class="conbox">{{ item.name }}</div>
- <div class="box-forhtml-flex">
- <div class="left">
- <div class="left-title">
- {{ item.leftTitle }}
- <!-- <%--
- <el-tooltip :content="item.leftReason" placement="bottom-end"
- >--%> <%-- <i class="el-icon-warning-outline"></i>--%> <%-- </el-tooltip
- >--%> -->
- </div>
- <div class="Templatetable">
- <div class="table-tit">
- <div>排名</div>
- <div>无效原因</div>
- <div>接待数</div>
- <div>占比</div>
- <div>操作</div>
- </div>
- <template v-if="item.total > 0">
- <div
- class="table-cent"
- v-for="(itcen, inde) in item.matchKeywords"
- :key="inde"
- >
- <div
- style="
- display: flex;
- align-items: center;
- justify-content: center;
- "
- >
- <img
- v-if="inde == 0"
- style="width: 30px; height: 30px"
- src="https://zkgj.quhouse.com/static/images/system/images/ranking1.png"
- alt=""
- />
- <img
- v-else-if="inde == 1"
- style="width: 30px; height: 30px"
- src="https://zkgj.quhouse.com/static/images/system/images/ranking2.png"
- alt=""
- />
- <img
- v-else-if="inde == 2"
- style="width: 30px; height: 30px"
- src="https://zkgj.quhouse.com/static/images/system/images/ranking3.png"
- alt=""
- />
- <div v-else class="indeclass">{{ inde + 1 }}</div>
- </div>
- <div>{{ itcen.name }}</div>
- <div>{{ itcen.count }}</div>
- <div>{{ itcen.percent }}%</div>
- <div
- style="color: #2671e2; cursor: pointer"
- @click="Toview(item, itcen)"
- >
- 明细
- </div>
- </div>
- </template>
- <template v-else>
- <div
- style="
- width: 100%;
- line-height: 400px;
- text-align: center;
- color: #999999;
- font-size: 16px;
- "
- >
- 暂无数据
- </div>
- </template>
- </div>
- </div>
- <div class="right">
- <div class="right-title">
- <div>
- {{ item.leftTitle }}
- </div>
-
- <div class="export">
- <el-button type="primary" @click="exportExcel(item.url)"
- >导出</el-button
- >
- </div>
- </div>
- <div
- :id="item.id"
- class="container"
- style="width: 100%; height: 400px; text-align: center"
- >
- <img
- v-if="item.total == 0"
- style="width: 400px; height: 400px"
- src="https://zkgj.quhouse.com/static/images/system/images/Elementcircle.png"
- alt=""
- />
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
-
- <script>
- import * as echarts from "echarts";
- import { exportMethodPost } from "@/util/util";
- export default {
- data() {
- return {
- pageParams: {
- dateType: 5, // 4 近七天 5 十五天 6 三十天
- startTime: "", // 开始时间
- endTime: "", // 结束时间
- houseId: "", // 项目id
- agentId: "", // 顾问id
- deptId: "", // 部门id
- marketingBusiness: "", // 销讲业务
- },
- customtime: [], // 时间段选择
- tableData: [], // 员工分析列表
- loading: false,
-
- deptList: [], // 部门/团队列表
- accountList: [], // 顾问列表
- objList: [
- {
- name: "无效接待分布",
- title: "接待总数",
- matchKeywords: [],
- id: "deptName", // echarts渲染的盒子id
- total: 0, // 接待总数
- leftReason: `原因1:无录音(离线接待).
- 原因2:无录音(无设备).
- 原因3:无录音(录音时间小于1分钟).
- 原因4:选择的无效原因.`, // 左侧原因
- rightReason: `1:没电指派无有效录音.
- 2:离线指派无有效录音.
- 3:系统测试.
- 4:非接访场景录音.
- 5:其它.`, // 右侧原因
- leftTitle: "无效原因排名", // 左侧小标题
- rightTitle: "无效原因占比", // 右侧小标题
- url: "/customer/invalidReceptionRankExport", // 导出接口get请求
- },
- ], // 数据合集包含 无效接待分布
- options: [], // 列表
- myChart: null, // 图表实例对象
- };
- },
- created() {
- this.pageParams.houseId = localStorage.getItem("houseId");
- },
-
- mounted() {
- // 员工使用统计
- this.initPage();
- },
-
- methods: {
- // 销讲业务模板
- getMarketingBusiness() {
- this.$api.http
- .marketingBusiness({
- houseId: this.pageParams.houseId,
- })
- .then((res) => {
- if (res.code == 10000) {
- this.options = res.data;
- }
- });
- },
- // 初始化页面
- initPage() {
- this.getAllDeptName();
- this.getAllAccountName();
- this.employeeUsageStatistics();
- this.getMarketingBusiness();
- },
- changeSelect() {
- this.employeeUsageStatistics();
- },
- // 部门
- getAllDeptName() {
- this.$api.http
- .getAllDeptName({ itemId: this.pageParams.houseId })
- .then((res) => {
- if (res.code == 10000) {
- this.deptList = res.data;
- }
- });
- },
-
- // 顾问
- getAllAccountName() {
- this.$api.http
- .getAllAccountName({ itemId: this.pageParams.houseId })
- .then((res) => {
- if (res.code == 10000) {
- this.accountList = res.data;
- }
- });
- },
-
- // 获取员工使用统计
- employeeUsageStatistics() {
- this.$api.http.invalidReceptionRank(this.pageParams).then((res) => {
- console.log(res, "sadlka;ldkls;");
- if (res.code == 10000) {
- let result = res.data;
- this.objList[0].matchKeywords = result.list;
- this.objList[0].total = result.sum;
- let isEmpty =
- this.objList[0].matchKeywords.filter((item) => item.count != 0)
- .length > 0;
- if (!isEmpty) this.myChart && this.myChart.clear();
- this.myChartinit(this.objList[0], isEmpty);
- }
- });
- },
-
- //导出表格
- // TO DO
- exportExcel(url) {
- exportMethodPost(`/autoSR/audit/reception/invalidReceptionRankExport`,'无效接待分析', this.pageParams)
- // let str = "?";
- // for (let i in this.pageParams) {
- // str += i + "=" + (this.pageParams[i] || "") + "&";
- // }
- // window.location.href = "${jypath}" + url + str.substr(0, str.length - 1);
- },
-
- //清空筛选条件
- Emptycondition() {
- this.pageParams = {
- dateType: 5, // 4 近七天 5 十五天 6 三十天
- startTime: "", // 开始时间
- endTime: "", // 结束时间
- houseId: localStorage.getItem("houseId"), // 项目id
- agentId: "", // 顾问id
- deptId: "", // 部门id
- marketingBusiness: "", // 销讲业务
- };
- this.customtime = [];
- this.employeeUsageStatistics();
- },
-
- resetParamsTime() {
- this.pageParams.pageNum = 1;
- this.pageParams.pageSize = 1;
- this.pageParams.startTime = "";
- this.pageParams.endTime = "";
- },
-
- //时间tab切换
- tabtimetap() {
- this.resetParamsTime();
- this.employeeUsageStatistics();
- },
-
- //时间选择
- confirmtime() {
- if (this.customtime.length) {
- this.pageParams.dateType = null;
- this.pageParams.startTime = this.customtime[0];
- this.pageParams.endTime = this.customtime[1];
- this.employeeUsageStatistics();
- }
- },
-
- // 查看详情
- Toview(item, items) {
- let obj = {
- ...this.pageParams,
- accountId: this.pageParams.agentId, // 顾问id
- invalidReason: items.id,
- };
- if (this.pageParams.dateType == 4) {
- obj.dateType = 2;
- } else if (this.pageParams.dateType == 5) {
- // 4 近七天 5 十五天 6 三十天
- this.customtime = this.getTimeArea(15);
- obj.date = this.customtime.join(","); // 筛选时间
- } else if (this.pageParams.dateType == 6) {
- this.customtime = this.getTimeArea(30);
- obj.date = this.customtime.join(","); // 筛选时间
- } else {
- obj.date = this.customtime.join(","); // 筛选时间
- }
-
- this.$router.push({
- path: "/ReceivingRecords/index",
- query: obj,
- });
- },
-
- // 获取时间段
- getTimeArea(x = 1) {
- let starTime = new Date().getTime() - 24 * 60 * 60 * 1000 * x;
- let startDate = `${new Date(starTime).getFullYear()}-${
- new Date(starTime).getMonth() + 1
- }-${new Date(starTime).getDate()}`;
- let endTime = new Date().getTime() - 24 * 60 * 60 * 1000;
- let endDate = `${new Date(endTime).getFullYear()}-${
- new Date(endTime).getMonth() + 1
- }-${new Date(endTime).getDate()}`;
-
- return [startDate, endDate];
- },
-
- // 初始化表格
- myChartinit(item, empity) {
- this.myChart = echarts.init(document.getElementById(item.id));
- let objoptlis = [];
- let option = {};
- if (!empity) {
- option.title = {
- text: "暂无数据",
- x: "center",
- y: "center",
- textStyle: {
- fontSize: 14,
- fontWeight: "normal",
- },
- };
- } else {
- item.matchKeywords.forEach((ice) => {
- objoptlis.push({
- value: ice.count,
- name: ice.name,
- percent: ice.percent,
- });
- });
- option = {
- color: [
- "#66AFF5",
- "#FABD2B",
- "#6F8EDC",
- "#FFCF8F",
- "#F98120",
- "#1CC99E",
- "#9474FB",
- "#657292",
- "#7A6A99",
- "#BF5D52",
- "#EE6666",
- "#77B7E4",
- "#E6A065",
- "#9D5139",
- "#C1AA88",
- "#F87F7A",
- "#F6CF74",
- "#7F5506",
- "#88BB9B",
- "#6E99AA",
- "#5789D0",
- ],
- tooltip: {
- show: true,
- trigger: "item",
- formatter: (data) => {
- console.log(data);
- return (
- data.data.name +
- " " +
- data.data.value +
- "(" +
- data.data.percent +
- "%)"
- );
- },
- },
- legend: {
- type: "scroll",
- data: objoptlis,
- bottom: 0,
- },
- graphic: [
- {
- type: "text",
- left: "center",
- top: "42%",
- style: {
- text: item.total,
- textAlign: "center",
- fill: "#000",
- width: 30,
- height: 30,
- fontSize: 24,
- color: "#32363D",
- fontFamily: "Microsoft YaHei",
- },
- },
- {
- type: "text",
- left: "center",
- top: "55%",
- style: {
- text: item.title,
- textAlign: "center",
- fill: "#000",
- width: 30,
- height: 30,
- fontSize: 16,
- color: "#666666",
- },
- },
- ],
- series: [
- {
- name: "",
- type: "pie",
- radius: ["48%", "70%"],
- avoidLabelOverlap: true,
- data: objoptlis,
- label: {
- show: true,
- },
- },
- ],
- };
- }
- this.myChart.setOption(option);
- },
- },
- };
- </script>
-
-
- <style lang="scss" scoped>
- .app-titel {
- padding: 20px 24px;
- width: 100%;
- /*min-height: 80px;*/
- background: #ffffff;
- box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
- border-radius: 8px;
- display: flex;
- flex-wrap: wrap;
- }
-
- .app-titel .items {
- margin: 20px 24px 0 0;
- }
-
- .toptimeqhuan {
- width: 190px;
- height: 32px;
- background: #ffffff;
- border-radius: 4px;
- border: 1px solid #e0e0e0;
- display: flex;
- align-items: center;
- overflow: hidden;
- margin-left: 30px;
- cursor: pointer;
- }
-
- .toptimeqhuan div {
- flex: 1;
- text-align: center;
- line-height: 32px;
- font-size: 16px;
- }
-
- .tophove {
- color: #ffffff;
- background: #2671e2;
- }
-
- .app-box {
- width: 100%;
- padding-bottom: 20px;
- background: #ffffff;
- box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
- border-radius: 8px;
- padding-top: 20px;
- padding-left: 30px;
- padding-right: 30px;
- margin-top: 30px;
- }
-
- .conbox {
- height: 18px;
- font-size: 18px;
- font-family: PingFangSC-Semibold, PingFang SC;
- font-weight: 600;
- color: #32363d;
- line-height: 18px;
- }
-
- /*.con-bodeer-box{*/
- /* width: 100%;height: 113px;*/
- /* border-radius: 4px;border: 1px solid #E0E0E0;margin-top: 20px;*/
- /*}*/
- /*.con-bodeer-box .con-flex{*/
- /* width: 100%;height: 56px;display: flex;align-items: center;*/
- /*}*/
- /*.con-bodeer-box .con-flex div{*/
- /* flex: 1;text-align: center;line-height: 56px;font-size: 16px;*/
- /*}*/
- .box-forhtml {
- width: 100%;
- min-height: 400px;
- background: #ffffff;
- box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
- border-radius: 8px;
- padding: 20px 30px;
- margin-top: 30px;
- }
-
- .box-forhtml-flex {
- position: relative;
- width: 100%;
- display: flex;
- margin-top: 20px;
- }
-
- .box-forhtml-flex .right .right-title {
- display: flex;
- justify-content: space-between;
- }
-
- .box-forhtml-flex .left .left-title,
- .box-forhtml-flex .right .right-title {
- padding: 12px 0;
- width: 100%;
- }
-
- .box-forhtml-flex .left {
- width: 50%;
- min-height: 320px;
- }
-
- .box-forhtml-flex .right {
- width: 50%;
- min-height: 330px;
- display: flex;
- flex-direction: column;
- align-items: center;
- }
-
- .Templatetable {
- width: 88%;
- height: 100%;
- margin: 0 auto;
- overflow-y: auto;
- }
-
- .table-tit {
- width: 100%;
- height: 20px;
- line-height: 20px;
- display: flex;
- }
-
- .table-tit > div:nth-of-type(1) {
- width: 10%;
- text-align: center;
- font-size: 16px;
- font-family: PingFangSC-Semibold, PingFang SC;
- font-weight: 600;
- color: #606775;
- }
-
- .table-tit > div:nth-of-type(2) {
- width: 40%;
- text-align: center;
- font-size: 16px;
- font-family: PingFangSC-Semibold, PingFang SC;
- font-weight: 600;
- color: #606775;
- }
-
- .table-tit > div:nth-of-type(3) {
- width: 20%;
- text-align: center;
- font-size: 16px;
- font-family: PingFangSC-Semibold, PingFang SC;
- font-weight: 600;
- color: #606775;
- }
-
- .table-tit > div:nth-of-type(4) {
- width: 20%;
- text-align: center;
- font-size: 16px;
- font-family: PingFangSC-Semibold, PingFang SC;
- font-weight: 600;
- color: #606775;
- }
-
- .table-tit > div:nth-of-type(5) {
- width: 10%;
- text-align: center;
- font-size: 16px;
- font-family: PingFangSC-Semibold, PingFang SC;
- font-weight: 600;
- color: #606775;
- }
-
- .table-cent {
- padding: 5px 0;
- width: 100%;
- display: flex;
- margin-top: 10px;
- }
-
- .table-cent > div:nth-of-type(1) {
- width: 10%;
- text-align: center;
- font-size: 14px;
- font-family: PingFangSC-Semibold, PingFang SC;
- color: #32363d;
- }
-
- .table-cent > div:nth-of-type(2) {
- width: 40%;
- text-align: center;
- font-size: 14px;
- font-family: PingFangSC-Semibold, PingFang SC;
- color: #32363d;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
-
- .table-cent > div:nth-of-type(3) {
- width: 20%;
- text-align: center;
- font-size: 14px;
- font-family: PingFangSC-Semibold, PingFang SC;
- color: #32363d;
- }
-
- .table-cent > div:nth-of-type(4) {
- width: 20%;
- text-align: center;
- font-size: 14px;
- font-family: PingFangSC-Semibold, PingFang SC;
- color: #32363d;
- }
-
- .table-cent > div:nth-of-type(5) {
- width: 10%;
- text-align: center;
- font-size: 14px;
- font-family: PingFangSC-Semibold, PingFang SC;
- color: #32363d;
- }
-
- .indeclass {
- width: 20px;
- height: 20px;
- border-radius: 50%;
- background: #ecf1ff;
- color: #ffffff;
- text-align: center;
- line-height: 20px;
- font-size: 14px;
- }
-
- .el-date-editor .el-range__icon {
- line-height: 25px;
- }
-
- .el-date-editor .el-range-separator {
- line-height: 25px;
- }
-
- .el-date-editor .el-range-input,
- .el-date-editor .el-range-separator {
- margin: 3px;
- }
-
- .con-bodeer-box {
- width: 100%;
- height: 113px;
- border-radius: 4px;
- border: 1px solid #e0e0e0;
- margin-top: 20px;
- }
-
- .con-bodeer-box .con-flex {
- width: 100%;
- height: 56px;
- display: flex;
- align-items: center;
- }
-
- .con-bodeer-box .con-flex div {
- flex: 1;
- text-align: center;
- line-height: 56px;
- font-size: 16px;
- }
-
- .backTopbox {
- width: 40px;
- height: 40px;
- border-radius: 50%;
- background: #d0edff;
- position: fixed;
- bottom: 40px;
- right: 40px;
- border: none;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .backTop {
- display: block;
- width: 16px;
- height: 20px;
- }
-
- .btns {
- width: 90px;
- height: 40px;
- display: flex;
- justify-content: center;
- align-items: center;
- color: #fff;
- background: #2671e2;
- border-radius: 8px;
- }
- </style>
|