Commit c265c85a authored by ww-xxy's avatar ww-xxy

优化暂离报表

parent 0640c16f
<template> <template>
<!-- 窗口评价报表搜索 --> <!-- 窗口评价报表搜索 -->
<div class="search-form"> <div class="search-form">
<a-space direction="vertical" size="middle"> <a-space direction="vertical" size="middle">
<a-button block class="export-btn" icon="upload" @click="handleExport"> <a-button block class="export-btn" icon="upload" @click="handleExport">
导出 导出
</a-button> </a-button>
<a-range-picker valueFormat="YYYY-MM-DD" v-model="searchForm.time" /> <a-range-picker valueFormat="YYYY-MM-DD" v-model="searchForm.time" />
<a-input <a-input
allowClear allowClear
placeholder="请输入工作人员姓名搜索" placeholder="请输入工作人员姓名搜索"
v-model="searchForm.workman_name" v-model="searchForm.workman_name"
/> />
<a-button block class="search-btn" icon="search" @click="handleSearch"> <a-button block class="search-btn" icon="search" @click="handleSearch">
搜索 搜索
</a-button> </a-button>
</a-space> </a-space>
</div> </div>
</template> </template>
<script>
import storage from "@/utils/js/Storage";
import { mapMutations } from "vuex";
import { getDatingList, getBumenList, getOptonList } from "@/api/dataAdmin";
import { debounce } from "lodash";
export default {
name: "staffLeft-search",
data() {
return {
siteId: storage.get(2, "siteId"),
datingList: [], // 大厅列表
deptList: [], // 部门列表
evaChoose: [], //评价选项
evaFrom: [], // 评价来源
evaDates: [], // 评价日期
optonList: [], // 评价选项列表
// 搜索数据
searchForm: {
workman_name: "",
type: "ckpj",
time: [
this.$moment().format("YYYY-MM-DD"),
this.$moment().format("YYYY-MM-DD"),
], // 时间区间
},
};
},
created() {
this.getDatingListArr();
this.getBumenListArr();
this.getOptonList();
},
methods: {
...mapMutations("search", ["set_searForm", "set_isExport", "reset"]),
// 获取大厅列表
async getDatingListArr() {
let res = await getDatingList({
page: 1,
size: -1,
siteId: this.siteId,
});
if (res.code == 1) {
let { data } = res.data;
this.datingList = data;
}
},
// // 获取部门列表
async getBumenListArr() {
let res = await getBumenList({
page: 1,
size: -1,
siteId: this.siteId,
});
if (res.code == 1) {
let { data } = res.data;
this.deptList = data;
}
},
// 获取评价选项
async getOptonList() {
let res = await getOptonList();
if (res.code == 1) {
this.optonList = res.data;
}
},
// 搜索 <script>
handleSearch() { import storage from "@/utils/js/Storage";
let option_id = this.evaChoose.join(","); import { mapMutations } from "vuex";
let pjxt = this.evaFrom.join(","); import { getDatingList, getBumenList, getOptonList } from "@/api/dataAdmin";
this.searchForm.option_id = option_id; import { debounce } from "lodash";
this.searchForm.pjxt = pjxt; export default {
this.set_searForm(this.searchForm); name: "staffLeft-search",
data() {
return {
siteId: storage.get(2, "siteId"),
datingList: [], // 大厅列表
deptList: [], // 部门列表
evaChoose: [], //评价选项
evaFrom: [], // 评价来源
evaDates: [], // 评价日期
optonList: [], // 评价选项列表
// 搜索数据
searchForm: {
workman_name: "",
type: "ckpj",
time: [
this.$moment().format("YYYY-MM-DD"),
this.$moment().format("YYYY-MM-DD"),
], // 时间区间
}, },
};
// 导出 },
handleExport: debounce( created() {
function () { this.getDatingListArr();
this.$bus.$emit("export"); this.getBumenListArr();
}, this.getOptonList();
2000, },
{ methods: {
leading: true, ...mapMutations("search", ["set_searForm", "set_isExport", "reset"]),
trailing: false, // 获取大厅列表
} async getDatingListArr() {
), let res = await getDatingList({
page: 1,
size: -1,
siteId: this.siteId,
});
if (res.code == 1) {
let { data } = res.data;
this.datingList = data;
}
},
// // 获取部门列表
async getBumenListArr() {
let res = await getBumenList({
page: 1,
size: -1,
siteId: this.siteId,
});
if (res.code == 1) {
let { data } = res.data;
this.deptList = data;
}
}, },
beforeDestroy() {
this.reset(); // 获取评价选项
async getOptonList() {
let res = await getOptonList();
if (res.code == 1) {
this.optonList = res.data;
}
}, },
};
</script> // 搜索
handleSearch() {
<style lang="less" scoped> let option_id = this.evaChoose.join(",");
</style> let pjxt = this.evaFrom.join(",");
this.searchForm.option_id = option_id;
\ No newline at end of file this.searchForm.pjxt = pjxt;
this.set_searForm(this.searchForm);
},
// 导出
handleExport: debounce(
function () {
this.$bus.$emit("export");
},
2000,
{
leading: true,
trailing: false,
}
),
},
beforeDestroy() {
this.reset();
},
};
</script>
<style lang="less" scoped>
</style>
<template> <template>
<!-- 窗口评价报表搜索 --> <!-- 窗口评价报表搜索 -->
<div class="search-form"> <div class="search-form">
<a-space direction="vertical" size="middle"> <a-space direction="vertical" size="middle">
<a-button block class="export-btn" icon="upload" @click="handleExport"> <a-button block class="export-btn" icon="upload" @click="handleExport">
导出 导出
</a-button> </a-button>
<a-range-picker valueFormat="YYYY-MM-DD" v-model="searchForm.time" /> <a-range-picker valueFormat="YYYY-MM-DD" v-model="searchForm.time" />
<a-input <a-input
allowClear allowClear
placeholder="请输入窗口编号搜索" placeholder="请输入窗口编号搜索"
v-model="searchForm.window_num" v-model="searchForm.window_num"
/> />
<a-button block class="search-btn" icon="search" @click="handleSearch"> <a-button block class="search-btn" icon="search" @click="handleSearch">
搜索 搜索
</a-button> </a-button>
</a-space> </a-space>
</div> </div>
</template> </template>
<script>
import storage from "@/utils/js/Storage";
import { mapMutations } from "vuex";
import { getDatingList, getBumenList, getOptonList } from "@/api/dataAdmin";
import { debounce } from "lodash";
export default {
name: "windowLeft-search",
data() {
return {
siteId: storage.get(2, "siteId"),
datingList: [], // 大厅列表
deptList: [], // 部门列表
evaChoose: [], //评价选项
evaFrom: [], // 评价来源
evaDates: [], // 评价日期
optonList: [], // 评价选项列表
// 搜索数据
searchForm: {
window_num: "",
time: [
this.$moment().format("YYYY-MM-DD"),
this.$moment().format("YYYY-MM-DD"),
], // 时间区间
},
};
},
created() {
this.getDatingListArr();
this.getBumenListArr();
this.getOptonList();
},
methods: {
...mapMutations("search", ["set_searForm", "set_isExport", "reset"]),
// 获取大厅列表
async getDatingListArr() {
let res = await getDatingList({
page: 1,
size: -1,
siteId: this.siteId,
});
if (res.code == 1) {
let { data } = res.data;
this.datingList = data;
}
},
// // 获取部门列表
async getBumenListArr() {
let res = await getBumenList({
page: 1,
size: -1,
siteId: this.siteId,
});
if (res.code == 1) {
let { data } = res.data;
this.deptList = data;
}
},
// 获取评价选项
async getOptonList() {
let res = await getOptonList();
if (res.code == 1) {
this.optonList = res.data;
}
},
// 搜索 <script>
handleSearch() { import storage from "@/utils/js/Storage";
this.set_searForm(this.searchForm); import { mapMutations } from "vuex";
import { getDatingList, getBumenList, getOptonList } from "@/api/dataAdmin";
import { debounce } from "lodash";
export default {
name: "windowLeft-search",
data() {
return {
siteId: storage.get(2, "siteId"),
datingList: [], // 大厅列表
deptList: [], // 部门列表
evaChoose: [], //评价选项
evaFrom: [], // 评价来源
evaDates: [], // 评价日期
optonList: [], // 评价选项列表
// 搜索数据
searchForm: {
window_num: "",
time: [
this.$moment().format("YYYY-MM-DD"),
this.$moment().format("YYYY-MM-DD"),
], // 时间区间
}, },
};
// 导出 },
handleExport: debounce( created() {
function () { this.getDatingListArr();
this.$bus.$emit("export"); this.getBumenListArr();
}, this.getOptonList();
2000, },
{ methods: {
leading: true, ...mapMutations("search", ["set_searForm", "set_isExport", "reset"]),
trailing: false, // 获取大厅列表
} async getDatingListArr() {
), let res = await getDatingList({
page: 1,
size: -1,
siteId: this.siteId,
});
if (res.code == 1) {
let { data } = res.data;
this.datingList = data;
}
},
// // 获取部门列表
async getBumenListArr() {
let res = await getBumenList({
page: 1,
size: -1,
siteId: this.siteId,
});
if (res.code == 1) {
let { data } = res.data;
this.deptList = data;
}
}, },
beforeDestroy() {
this.reset(); // 获取评价选项
async getOptonList() {
let res = await getOptonList();
if (res.code == 1) {
this.optonList = res.data;
}
}, },
};
</script> // 搜索
handleSearch() {
<style lang="less" scoped> this.set_searForm(this.searchForm);
</style> },
\ No newline at end of file // 导出
handleExport: debounce(
function () {
this.$bus.$emit("export");
},
2000,
{
leading: true,
trailing: false,
}
),
},
beforeDestroy() {
this.reset();
},
};
</script>
<style lang="less" scoped>
</style>
...@@ -7,70 +7,69 @@ ...@@ -7,70 +7,69 @@
:visible="Visible" :visible="Visible"
@close="onClose" @close="onClose"
> >
<!-- 头部 --> <!-- 头部 -->
<div class="header"> <div class="header">
<div class="elapsed-time"> <div class="elapsed-time">
<p class="elapsed-time-title"> <p class="elapsed-time-title">
<span>累计次数</span> <span>累计次数</span>
</p> </p>
<p class="time"> <p class="time">{{ detailsInfo.total }}</p>
{{detailsInfo.total}}
</p>
</div>
<div class="elapsed-time">
<p class="elapsed-time-title">
<span>累计时长</span>
</p>
<p class="time">
<span>{{allTime}}</span>
</p>
</div>
<div class="elapsed-time">
<p class="elapsed-time-title">
<span>最近暂离时间</span>
</p>
<p class="time">
{{createTime}}
</p>
</div>
</div> </div>
<!-- 步骤条 --> <div class="elapsed-time">
<a-steps direction="vertical"> <p class="elapsed-time-title">
<a-step :title="(index+1)" v-for="(item,index) in detailsInfo.data" :key="item.stopid"> <span>累计时长</span>
<a-icon type="environment" slot="icon" /> </p>
<div slot="description" class="transact-step"> <p class="time">
<a-row :gutter="[0, 8]"> <span>{{ allTime }}</span>
<a-col :span="12"> </p>
<span>窗口编号:</span>{{ item.window_num || "--" }} </div>
</a-col> <div class="elapsed-time">
<a-col :span="12"> <p class="elapsed-time-title">
<span>工作人员:</span>{{ item.workman_name || "--" }} <span>最近暂离时间</span>
</a-col> </p>
</a-row> <p class="time">
<a-row :gutter="[0, 8]"> {{ createTime }}
<a-col :span="12"> </p>
<span>暂离时间:</span </div>
>{{ item.workman_name || "--" }} </div>
</a-col> <!-- 步骤条 -->
<a-col :span="12"> <a-steps direction="vertical">
<span>回归时间:</span <a-step
>{{ item.end_time || "--" }} :title="index + 1"
</a-col> v-for="(item, index) in detailsInfo.data"
</a-row> :key="item.stopid"
<a-row :gutter="[0, 8]"> >
<a-col :span="12"> <a-icon type="environment" slot="icon" />
<span>暂离时长:</span> <div slot="description" class="transact-step">
{{item.zl_time || "--"}} <a-row :gutter="[0, 8]">
</a-col> <a-col :span="12">
<a-col :span="12"> <span>窗口编号:</span>{{ item.window_num || "--" }}
<span>暂离原因:</span> </a-col>
{{ item.stoptitle || "--" }} <a-col :span="12">
</a-col> <span>工作人员:</span>{{ item.workman_name || "--" }}
</a-row> </a-col>
</div> </a-row>
</a-step> <a-row :gutter="[0, 8]">
</a-steps> <a-col :span="12">
<span>暂离时间:</span>{{ item.create_time || "--" }}
</a-col>
<a-col :span="12">
<span>回归时间:</span>{{ item.end_time || "--" }}
</a-col>
</a-row>
<a-row :gutter="[0, 8]">
<a-col :span="12">
<span>暂离时长:</span>
{{ item.zl_time + " 分钟" || "--" }}
</a-col>
<a-col :span="12">
<span>暂离原因:</span>
{{ item.stoptitle || "--" }}
</a-col>
</a-row>
</div>
</a-step>
</a-steps>
</a-drawer> </a-drawer>
</div> </div>
</template> </template>
...@@ -204,4 +203,4 @@ export default { ...@@ -204,4 +203,4 @@ export default {
color: #656565; color: #656565;
} }
} }
</style> </style>
\ No newline at end of file
<template> <template>
<div> <div>
<a-table <a-table
style="width: 1500px" style="width: 1500px"
size="middle" size="middle"
:columns="columns" :columns="columns"
:data-source="tableData" :data-source="tableData"
:loading="loading" :loading="loading"
:scroll="{ :scroll="{
y: 490, y: 490,
}" }"
:row-selection="{ :row-selection="{
selectedRowKeys: selectedRowKeys, selectedRowKeys: selectedRowKeys,
onChange: onSelectChange, onChange: onSelectChange,
}" }"
:rowKey="(record) => record.id" :rowKey="(record) => record.id"
:pagination="{ :pagination="{
showTotal: (total) => `共 ${total} 条`, showTotal: (total) => `共 ${total} 条`,
current: current, current: current,
total: total, total: total,
pageSize: size, pageSize: size,
showQuickJumper: true, showQuickJumper: true,
}" }"
@change="changeTable" @change="changeTable"
> >
<!-- 评价人照片 --> <!-- 评价人照片 -->
<template slot="picture" slot-scope="text"> <template slot="picture" slot-scope="text">
<a-avatar v-if="!text" shape="square" :size="40" icon="user" /> <a-avatar v-if="!text" shape="square" :size="40" icon="user" />
<img <img
v-else v-else
:src="baseurl + '/' + text" :src="baseurl + '/' + text"
class="cursor-pointer w-[50px] max-h-[50px] rounded-[4px]" class="cursor-pointer w-[50px] max-h-[50px] rounded-[4px]"
@click="$viewerApi({ images: [baseurl + '/' + text] })" @click="$viewerApi({ images: [baseurl + '/' + text] })"
/> />
</template> </template>
<!-- 操作 --> <!-- 操作 -->
<template slot="action" slot-scope="text, record"> <template slot="action" slot-scope="text, record">
<a-space> <a-space>
<a-tag <a-tag
class="cursor-pointer" class="cursor-pointer"
color="blue" color="blue"
@click="checkInfo(record.workmanid,record.all_time,record.create_time)" @click="
> checkInfo(record.workmanid, record.all_time, record.create_time)
详情 "
</a-tag> >
</a-space> 详情
</template> </a-tag>
</a-table> </a-space>
<!-- 详情 --> </template>
<StepoutDetails </a-table>
:detailsInfo="detailsInfo" <!-- 详情 -->
:detailsVisible.sync="detailsVisible" <StepoutDetails
:title="title" :detailsInfo="detailsInfo"
:allTime="allTime" :detailsVisible.sync="detailsVisible"
:createTime="createTime" :title="title"
></StepoutDetails> :allTime="allTime"
</div> :createTime="createTime"
</template> ></StepoutDetails>
</div>
<script> </template>
import { mapState } from "vuex";
import storage from "@/utils/js/Storage"; <script>
import StepoutDetails from "./components/StepoutDetails.vue"; import { mapState } from "vuex";
import { export2Excel } from "@/utils/js/exportExcel"; import storage from "@/utils/js/Storage";
import { stopToWorkman, stopInfo } from "@/api/dataAdmin"; import StepoutDetails from "./components/StepoutDetails.vue";
const tHeader = [ import { export2Excel } from "@/utils/js/exportExcel";
"工作人员", import { stopToWorkman, stopInfo } from "@/api/dataAdmin";
"暂离次数", const tHeader = ["工作人员", "暂离次数", "累计计时(分钟)", "最近暂离时间"]; // 导出的表头名信息
"累计计时", const filterVal = ["workman_name", "count", "all_time", "create_time"]; // 导出的表头字段名,需要导出表格字段名
"最近暂离时间", export default {
]; // 导出的表头名信息 components: {
const filterVal = [ StepoutDetails,
"workman_name", },
"count", data() {
"all_time", const columns = [
"create_time", {
]; // 导出的表头字段名,需要导出表格字段名 title: "序号",
export default { width: 100,
components: { align: "center",
StepoutDetails, customRender: (text, record, index) => {
}, return (this.current - 1) * this.size + index + 1;
data() { },
const columns = [ },
{ {
title: "序号", title: "工作人员",
width: 100, width: 100,
align: "center", dataIndex: "workman_name",
customRender: (text, record, index) => { customRender: (text) => {
return (this.current - 1) * this.size + index + 1; return text ? text : "--";
}, },
}, },
{ {
title: "工作人员", title: "暂离次数",
width: 100, width: 100,
dataIndex: "workman_name", dataIndex: "count",
customRender: (text) => { customRender: (text) => {
return text ? text : "--"; return text ? text : "--";
}, },
}, },
{ {
title: "暂离次数", title: "累计计时(分钟)",
width: 100, width: 100,
dataIndex: "count", dataIndex: "all_time",
customRender: (text) => { customRender: (text) => {
return text ? text : "--"; return text ? text : "--";
}, },
}, },
{ {
title: "累计计时", title: "最近暂离时间",
width: 100, width: 100,
dataIndex: "all_time", dataIndex: "create_time",
customRender: (text) => { customRender: (text) => {
return text ? text : "--"; return text ? text : "--";
}, },
}, },
{ {
title: "最近暂离时间", title: "操作",
width: 100, width: 150,
dataIndex: "create_time", align: "center",
customRender: (text) => { scopedSlots: {
return text ? text : "--"; customRender: "action",
}, },
}, },
{ ];
title: "操作", return {
width: 150, baseurl: process.env.VUE_APP_API_PHP_URL,
align: "center", siteId: storage.get(2, "siteId"),
scopedSlots: { columns,
customRender: "action", tHeader,
}, filterVal,
}, tableData: [],
]; current: 1,
return { size: 10,
baseurl: process.env.VUE_APP_API_PHP_URL, total: 0,
siteId: storage.get(2, "siteId"), searchForm: {
columns, info: "",
tHeader, type: "phpj",
filterVal, sectionid: "", // 部门id
tableData: [], hallid: "", // 大厅id
current: 1, option_id: "", // 评价ids
size: 10, pjxt: "", // 评价来源
total: 0, time: [
searchForm: { this.$moment().format("YYYY-MM-DD"),
info: "", this.$moment().format("YYYY-MM-DD"),
type: "phpj", ], // 时间区间
sectionid: "", // 部门id },
hallid: "", // 大厅id loading: false,
option_id: "", // 评价ids selectedRowKeys: [], // 表格选中的key
pjxt: "", // 评价来源 excelData: [], // 导出数据
time: [ detailsInfo: {}, // 详情信息
this.$moment().format("YYYY-MM-DD"), allTime: "",
this.$moment().format("YYYY-MM-DD"), createTime: "",
], // 时间区间 detailsVisible: false,
}, title: "办理明细",
loading: false, };
selectedRowKeys: [], // 表格选中的key },
excelData: [], // 导出数据 computed: {
detailsInfo: {}, // 详情信息 ...mapState("search", ["searForm"]),
allTime:"", },
createTime:"", watch: {
detailsVisible: false, searForm: {
title: "办理明细", handler(newForm) {
}; if (JSON.stringify(newForm) != "{}") {
}, this.searchForm = newForm;
computed: { this.current = 1;
...mapState("search", ["searForm"]), this.stopToWorkman();
}, }
watch: { },
searForm: { deep: true,
handler(newForm) { },
if (JSON.stringify(newForm) != "{}") { },
this.searchForm = newForm; created() {
this.current = 1; this.stopToWorkman();
this.stopToWorkman(); this.$bus.$off("export");
} this.$bus.$on("export", () => {
}, this.exportExcel();
deep: true, });
}, },
}, methods: {
created() { // 获取报表
this.stopToWorkman(); async stopToWorkman() {
this.$bus.$off("export"); this.loading = true;
this.$bus.$on("export", () => { let { data, total } = await this.getDataList();
this.exportExcel(); this.total = total;
}); this.tableData = data;
}, this.$emit("update", { total, time: this.searchForm.time });
methods: { this.loading = false;
// 获取报表 },
async stopToWorkman() {
this.loading = true; // 获取数据函数
let { data, total } = await this.getDataList(); async getDataList(searchForm) {
this.total = total; let list = [];
this.tableData = data; let listTotal = 0;
this.$emit("update", { total, time: this.searchForm.time }); let res = await stopToWorkman({
this.loading = false; page: this.current,
}, size: this.size,
...this.searchForm,
// 获取数据函数 ...searchForm,
async getDataList(searchForm) { });
let list = []; if (res.code == 1) {
let listTotal = 0; let { data, total } = res.data.data;
let res = await stopToWorkman({ list = data;
page: this.current, listTotal = total;
size: this.size, }
...this.searchForm, return {
...searchForm, data: list,
}); total: listTotal,
if (res.code == 1) { };
let { data, total } = res.data.data; },
list = data;
listTotal = total; // 翻页
} changeTable(pagination) {
return { let { current } = pagination;
data: list, this.current = current;
total: listTotal, this.stopToWorkman();
}; },
},
// 勾选表格
// 翻页 onSelectChange(keys, rows) {
changeTable(pagination) { this.selectedRowKeys = keys;
let { current } = pagination; const res = new Map();
this.current = current; this.excelData = [...this.excelData, ...rows]
this.stopToWorkman(); .filter((v) => {
}, return !res.has(v.id) && res.set(v.id, 1);
})
// 勾选表格 .filter((v) => {
onSelectChange(keys, rows) { return this.selectedRowKeys.some((val) => v.id == val);
this.selectedRowKeys = keys; });
const res = new Map(); },
this.excelData = [...this.excelData, ...rows]
.filter((v) => { // 导出表格
return !res.has(v.id) && res.set(v.id, 1); async exportExcel() {
}) let obj = {
.filter((v) => { 1: "窗口评价",
return this.selectedRowKeys.some((val) => v.id == val); 2: "自助服务终端",
}); 3: "背靠背评价",
}, 4: "微官网",
5: "好差评",
// 导出表格 6: "一体化评价",
async exportExcel() { };
let obj = { if (this.selectedRowKeys.length && this.excelData.length) {
1: "窗口评价", // 深度克隆避免影响页面表格展示
2: "自助服务终端", let data = this.$_.cloneDeep(this.excelData);
3: "背靠背评价", data.forEach((item) => {
4: "微官网", Object.keys(obj).forEach((keys) => {
5: "好差评", if (item.pjxt == keys) {
6: "一体化评价", item.pjxt = obj[keys];
}; }
if (this.selectedRowKeys.length && this.excelData.length) { });
// 深度克隆避免影响页面表格展示 });
let data = this.$_.cloneDeep(this.excelData); export2Excel(
data.forEach((item) => { this.tHeader,
Object.keys(obj).forEach((keys) => { this.filterVal,
if (item.pjxt == keys) { data,
item.pjxt = obj[keys]; "办理事项评价记录报表" + this.$moment().format("YYYYMMDDHHmmss")
} );
}); } else {
}); this.dataSection(this.getDataList, {}, (data) => {
export2Excel( if (!data.length) {
this.tHeader, this.$message.warning("暂无数据");
this.filterVal, return;
data, }
"办理事项评价记录报表" + this.$moment().format("YYYYMMDDHHmmss") data.forEach((item) => {
); Object.keys(obj).forEach((keys) => {
} else { if (item.pjxt == keys) {
this.dataSection(this.getDataList, {}, (data) => { item.pjxt = obj[keys];
if (!data.length) { }
this.$message.warning("暂无数据"); });
return; });
} export2Excel(
data.forEach((item) => { this.tHeader,
Object.keys(obj).forEach((keys) => { this.filterVal,
if (item.pjxt == keys) { data,
item.pjxt = obj[keys]; "办理事项评价记录报表" + this.$moment().format("YYYYMMDDHHmmss")
} );
}); });
}); }
export2Excel( },
this.tHeader,
this.filterVal, // 数据切片
data, async dataSection(fn, searchForm, callback) {
"办理事项评价记录报表" + this.$moment().format("YYYYMMDDHHmmss") let dataList = [];
); let page = 1;
}); let size = 1000;
} let execute = async () => {
}, let { data, total } = await fn({ page, size, ...searchForm });
dataList = [...dataList, ...data];
// 数据切片 this.$app.progressFile.show = true;
async dataSection(fn, searchForm, callback) { this.$app.progressFile.percent = parseInt(
let dataList = []; (dataList.length / total) * 100
let page = 1; );
let size = 1000; if (dataList.length >= total || data.length == 0) {
let execute = async () => { if (callback) callback(dataList);
let { data, total } = await fn({ page, size, ...searchForm }); this.$app.progressFile.show = false;
dataList = [...dataList, ...data]; this.$app.progressFile.percent = 1;
this.$app.progressFile.show = true; return;
this.$app.progressFile.percent = parseInt( }
(dataList.length / total) * 100 setTimeout(() => {
); page += 1;
if (dataList.length >= total || data.length == 0) { execute();
if (callback) callback(dataList); });
this.$app.progressFile.show = false; };
this.$app.progressFile.percent = 1; execute();
return; },
} // 详情
setTimeout(() => { async checkInfo(id, alltime, createtime) {
page += 1; let res = await stopInfo({
execute(); page: 1,
}); size: -1,
}; time: this.searchForm.time,
execute(); workmanid: id,
}, });
// 详情 if (res.code == 1) {
async checkInfo(id,alltime,createtime) { let { data } = res;
let res = await stopInfo({ this.detailsInfo = data;
page:1, this.detailsVisible = true;
size:-1, this.allTime = alltime;
time:this.searchForm.time, this.createTime = createtime;
workmanid:id }
}); },
if (res.code == 1) { },
let { data } = res; };
this.detailsInfo = data; </script>
this.detailsVisible = true;
this.allTime = alltime <style lang="less" scoped></style>
this.createTime = createtime
}
},
},
};
</script>
<style lang="less" scoped>
</style>
<template> <template>
<div> <div>
<a-table <a-table
style="width: 1500px" style="width: 1500px"
size="middle" size="middle"
:columns="columns" :columns="columns"
:data-source="tableData" :data-source="tableData"
:loading="loading" :loading="loading"
:scroll="{ :scroll="{
y: 490, y: 490,
}" }"
:row-selection="{ :row-selection="{
selectedRowKeys: selectedRowKeys, selectedRowKeys: selectedRowKeys,
onChange: onSelectChange, onChange: onSelectChange,
}" }"
:rowKey="(record) => record.id" :rowKey="(record) => record.id"
:pagination="{ :pagination="{
showTotal: (total) => `共 ${total} 条`, showTotal: (total) => `共 ${total} 条`,
current: current, current: current,
total: total, total: total,
pageSize: size, pageSize: size,
showQuickJumper: true, showQuickJumper: true,
}" }"
@change="changeTable" @change="changeTable"
> >
<!-- 评价人照片 --> <!-- 评价人照片 -->
<template slot="picture" slot-scope="text"> <template slot="picture" slot-scope="text">
<a-avatar v-if="!text" shape="square" :size="40" icon="user" /> <a-avatar v-if="!text" shape="square" :size="40" icon="user" />
<img <img
v-else v-else
:src="baseurl + '/' + text" :src="baseurl + '/' + text"
class="cursor-pointer w-[50px] max-h-[50px] rounded-[4px]" class="cursor-pointer w-[50px] max-h-[50px] rounded-[4px]"
@click="$viewerApi({ images: [baseurl + '/' + text] })" @click="$viewerApi({ images: [baseurl + '/' + text] })"
/> />
</template> </template>
<!-- 操作 --> <!-- 操作 -->
<template slot="action" slot-scope="text, record"> <template slot="action" slot-scope="text, record">
<a-space> <a-space>
<a-tag <a-tag
class="cursor-pointer" class="cursor-pointer"
color="blue" color="blue"
@click="checkInfo(record.windowid,record.all_time,record.create_time)" @click="
> checkInfo(record.windowid, record.all_time, record.create_time)
详情 "
</a-tag> >
</a-space> 详情
</template> </a-tag>
</a-table> </a-space>
<!-- 详情 --> </template>
<StepoutDetails </a-table>
:detailsInfo="detailsInfo" <!-- 详情 -->
:detailsVisible.sync="detailsVisible" <StepoutDetails
:title="title" :detailsInfo="detailsInfo"
:allTime="allTime" :detailsVisible.sync="detailsVisible"
:createTime="createTime" :title="title"
></StepoutDetails> :allTime="allTime"
</div> :createTime="createTime"
</template> ></StepoutDetails>
</div>
<script> </template>
import { mapState } from "vuex";
import storage from "@/utils/js/Storage"; <script>
import StepoutDetails from "./components/StepoutDetails.vue"; import { mapState } from "vuex";
import { export2Excel } from "@/utils/js/exportExcel"; import storage from "@/utils/js/Storage";
import { stopToWindow, stopInfo } from "@/api/dataAdmin"; import StepoutDetails from "./components/StepoutDetails.vue";
const tHeader = [ import { export2Excel } from "@/utils/js/exportExcel";
"窗口编号", import { stopToWindow, stopInfo } from "@/api/dataAdmin";
"暂离次数", const tHeader = ["窗口编号", "暂离次数", "累计计时(分钟)", "最近暂离时间"]; // 导出的表头名信息
"累计计时", const filterVal = ["window_num", "count", "all_time", "create_time"]; // 导出的表头字段名,需要导出表格字段名
"最近暂离时间", export default {
]; // 导出的表头名信息 components: {
const filterVal = [ StepoutDetails,
"window_num", },
"count", data() {
"all_time", const columns = [
"create_time", {
]; // 导出的表头字段名,需要导出表格字段名 title: "序号",
export default { width: 100,
components: { align: "center",
StepoutDetails, customRender: (text, record, index) => {
}, return (this.current - 1) * this.size + index + 1;
data() { },
const columns = [ },
{ {
title: "序号", title: "窗口编号",
width: 100, width: 100,
align: "center", dataIndex: "window_num",
customRender: (text, record, index) => { customRender: (text) => {
return (this.current - 1) * this.size + index + 1; return text ? text : "--";
}, },
}, },
{ {
title: "窗口编号", title: "暂离次数",
width: 100, width: 100,
dataIndex: "window_num", dataIndex: "count",
customRender: (text) => { customRender: (text) => {
return text ? text : "--"; return text ? text : "--";
}, },
}, },
{ {
title: "暂离次数", title: "累计计时(分钟)",
width: 100, width: 100,
dataIndex: "count", dataIndex: "all_time",
customRender: (text) => { customRender: (text) => {
return text ? text : "--"; return text ? text : "--";
}, },
}, },
{ {
title: "累计计时", title: "最近暂离时间",
width: 100, width: 100,
dataIndex: "all_time", dataIndex: "create_time",
customRender: (text) => { customRender: (text) => {
return text ? text : "--"; return text ? text : "--";
}, },
}, },
{ {
title: "最近暂离时间", title: "操作",
width: 100, width: 150,
dataIndex: "create_time", align: "center",
customRender: (text) => { scopedSlots: {
return text ? text : "--"; customRender: "action",
}, },
}, },
{ ];
title: "操作", return {
width: 150, baseurl: process.env.VUE_APP_API_PHP_URL,
align: "center", siteId: storage.get(2, "siteId"),
scopedSlots: { columns,
customRender: "action", tHeader,
}, filterVal,
}, tableData: [],
]; current: 1,
return { size: 10,
baseurl: process.env.VUE_APP_API_PHP_URL, total: 0,
siteId: storage.get(2, "siteId"), searchForm: {
columns, info: "",
tHeader, type: "phpj",
filterVal, sectionid: "", // 部门id
tableData: [], hallid: "", // 大厅id
current: 1, option_id: "", // 评价ids
size: 10, pjxt: "", // 评价来源
total: 0, time: [
searchForm: { this.$moment().format("YYYY-MM-DD"),
info: "", this.$moment().format("YYYY-MM-DD"),
type: "phpj", ], // 时间区间
sectionid: "", // 部门id },
hallid: "", // 大厅id loading: false,
option_id: "", // 评价ids selectedRowKeys: [], // 表格选中的key
pjxt: "", // 评价来源 excelData: [], // 导出数据
time: [ detailsInfo: {}, // 详情信息
this.$moment().format("YYYY-MM-DD"), allTime: "",
this.$moment().format("YYYY-MM-DD"), createTime: "",
], // 时间区间 detailsVisible: false,
}, title: "详情",
loading: false, };
selectedRowKeys: [], // 表格选中的key },
excelData: [], // 导出数据 computed: {
detailsInfo: {}, // 详情信息 ...mapState("search", ["searForm"]),
allTime:"", },
createTime:"", watch: {
detailsVisible: false, searForm: {
title: "详情", handler(newForm) {
}; if (JSON.stringify(newForm) != "{}") {
}, this.searchForm = newForm;
computed: { this.current = 1;
...mapState("search", ["searForm"]), this.stopToWindow();
}, }
watch: { },
searForm: { deep: true,
handler(newForm) { },
if (JSON.stringify(newForm) != "{}") { },
this.searchForm = newForm; created() {
this.current = 1; this.stopToWindow();
this.stopToWindow(); this.$bus.$off("export");
} this.$bus.$on("export", () => {
}, this.exportExcel();
deep: true, });
}, },
}, methods: {
created() { // 获取报表
this.stopToWindow(); async stopToWindow() {
this.$bus.$off("export"); this.loading = true;
this.$bus.$on("export", () => { let { data, total } = await this.getDataList();
this.exportExcel(); this.total = total;
}); this.tableData = data;
}, this.$emit("update", { total, time: this.searchForm.time });
methods: { this.loading = false;
// 获取报表 },
async stopToWindow() {
this.loading = true; // 获取数据函数
let { data, total } = await this.getDataList(); async getDataList(searchForm) {
this.total = total; let list = [];
this.tableData = data; let listTotal = 0;
this.$emit("update", { total, time: this.searchForm.time }); let res = await stopToWindow({
this.loading = false; page: this.current,
}, size: this.size,
...this.searchForm,
// 获取数据函数 ...searchForm,
async getDataList(searchForm) { });
let list = []; if (res.code == 1) {
let listTotal = 0; let { data, total } = res.data.data;
let res = await stopToWindow({ list = data;
page: this.current, listTotal = total;
size: this.size, }
...this.searchForm, return {
...searchForm, data: list,
}); total: listTotal,
if (res.code == 1) { };
let { data, total } = res.data.data; },
list = data;
listTotal = total; // 翻页
} changeTable(pagination) {
return { let { current } = pagination;
data: list, this.current = current;
total: listTotal, this.stopToWindow();
}; },
},
// 勾选表格
// 翻页 onSelectChange(keys, rows) {
changeTable(pagination) { this.selectedRowKeys = keys;
let { current } = pagination; const res = new Map();
this.current = current; this.excelData = [...this.excelData, ...rows]
this.stopToWindow(); .filter((v) => {
}, return !res.has(v.id) && res.set(v.id, 1);
})
// 勾选表格 .filter((v) => {
onSelectChange(keys, rows) { return this.selectedRowKeys.some((val) => v.id == val);
this.selectedRowKeys = keys; });
const res = new Map(); },
this.excelData = [...this.excelData, ...rows]
.filter((v) => { // 导出表格
return !res.has(v.id) && res.set(v.id, 1); async exportExcel() {
}) let obj = {
.filter((v) => { 1: "窗口评价",
return this.selectedRowKeys.some((val) => v.id == val); 2: "自助服务终端",
}); 3: "背靠背评价",
}, 4: "微官网",
5: "好差评",
// 导出表格 6: "一体化评价",
async exportExcel() { };
let obj = { if (this.selectedRowKeys.length && this.excelData.length) {
1: "窗口评价", // 深度克隆避免影响页面表格展示
2: "自助服务终端", let data = this.$_.cloneDeep(this.excelData);
3: "背靠背评价", data.forEach((item) => {
4: "微官网", Object.keys(obj).forEach((keys) => {
5: "好差评", if (item.pjxt == keys) {
6: "一体化评价", item.pjxt = obj[keys];
}; }
if (this.selectedRowKeys.length && this.excelData.length) { });
// 深度克隆避免影响页面表格展示 });
let data = this.$_.cloneDeep(this.excelData); export2Excel(
data.forEach((item) => { this.tHeader,
Object.keys(obj).forEach((keys) => { this.filterVal,
if (item.pjxt == keys) { data,
item.pjxt = obj[keys]; "办理事项评价记录报表" + this.$moment().format("YYYYMMDDHHmmss")
} );
}); } else {
}); this.dataSection(this.getDataList, {}, (data) => {
export2Excel( if (!data.length) {
this.tHeader, this.$message.warning("暂无数据");
this.filterVal, return;
data, }
"办理事项评价记录报表" + this.$moment().format("YYYYMMDDHHmmss") data.forEach((item) => {
); Object.keys(obj).forEach((keys) => {
} else { if (item.pjxt == keys) {
this.dataSection(this.getDataList, {}, (data) => { item.pjxt = obj[keys];
if (!data.length) { }
this.$message.warning("暂无数据"); });
return; });
} export2Excel(
data.forEach((item) => { this.tHeader,
Object.keys(obj).forEach((keys) => { this.filterVal,
if (item.pjxt == keys) { data,
item.pjxt = obj[keys]; "办理事项评价记录报表" + this.$moment().format("YYYYMMDDHHmmss")
} );
}); });
}); }
export2Excel( },
this.tHeader,
this.filterVal, // 数据切片
data, async dataSection(fn, searchForm, callback) {
"办理事项评价记录报表" + this.$moment().format("YYYYMMDDHHmmss") let dataList = [];
); let page = 1;
}); let size = 1000;
} let execute = async () => {
}, let { data, total } = await fn({ page, size, ...searchForm });
dataList = [...dataList, ...data];
// 数据切片 this.$app.progressFile.show = true;
async dataSection(fn, searchForm, callback) { this.$app.progressFile.percent = parseInt(
let dataList = []; (dataList.length / total) * 100
let page = 1; );
let size = 1000; if (dataList.length >= total || data.length == 0) {
let execute = async () => { if (callback) callback(dataList);
let { data, total } = await fn({ page, size, ...searchForm }); this.$app.progressFile.show = false;
dataList = [...dataList, ...data]; this.$app.progressFile.percent = 1;
this.$app.progressFile.show = true; return;
this.$app.progressFile.percent = parseInt( }
(dataList.length / total) * 100 setTimeout(() => {
); page += 1;
if (dataList.length >= total || data.length == 0) { execute();
if (callback) callback(dataList); });
this.$app.progressFile.show = false; };
this.$app.progressFile.percent = 1; execute();
return; },
} // 详情
setTimeout(() => { async checkInfo(id, alltime, createtime) {
page += 1; let res = await stopInfo({
execute(); page: 1,
}); size: -1,
}; time: this.searchForm.time,
execute(); windowid: id,
}, });
// 详情 if (res.code == 1) {
async checkInfo(id,alltime,createtime) { let { data } = res;
let res = await stopInfo({ this.detailsInfo = data;
page:1, this.detailsVisible = true;
size:-1, this.allTime = alltime;
time:this.searchForm.time, this.createTime = createtime;
windowid:id }
}); },
if (res.code == 1) { },
let { data } = res; };
this.detailsInfo = data; </script>
this.detailsVisible = true;
this.allTime = alltime <style lang="less" scoped></style>
this.createTime = createtime
}
},
},
};
</script>
<style lang="less" scoped>
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment