Commit 6f64534a authored by 王晓旭's avatar 王晓旭

添加在线取号记录报表

parent a378e28b
...@@ -31,6 +31,10 @@ export function getQueueData(params) { ...@@ -31,6 +31,10 @@ export function getQueueData(params) {
export function getQueueInfo(params) { export function getQueueInfo(params) {
return http.post(`${BASEURL}/inter/reportform/queinfo`, params); return http.post(`${BASEURL}/inter/reportform/queinfo`, params);
} }
//在线取号记录报表接口
export function getQuhaoData(params) {
return http.post(`${BASEURL}/inter/reportform/onlineQueList`, params);
}
//业务事项关联 //业务事项关联
export function getBusinessEvent(params) { export function getBusinessEvent(params) {
return http.get(`${BASEURL}/inter/reportform/busanalyse`, params); return http.get(`${BASEURL}/inter/reportform/busanalyse`, params);
......
<template>
<div class="search-form">
<a-space direction="vertical" size="middle">
<a-button block class="export-btn" icon="upload" @click="handleExport">
导出
</a-button>
<y-select
allowClear
showSearch
optionFilterProp="label"
placeholder="请选择大厅"
v-model="searchForm.hallid"
>
<a-select-option value="" label="全部大厅"> 全部大厅 </a-select-option>
<a-select-option
v-for="v in datingList"
:key="v.id"
:value="v.id"
:label="v.hallName"
>
{{ v.hallName }}
</a-select-option>
</y-select>
<y-select
allowClear
showSearch
optionFilterProp="label"
placeholder="请选择部门"
v-model="searchForm.sectionid"
>
<a-select-option value="" label="全部部门"> 全部部门 </a-select-option>
<a-select-option
v-for="v in deptList"
:key="v.id"
:value="v.id"
:label="v.name"
>
{{ v.name }}
</a-select-option>
</y-select>
<y-select
allowClear
showSearch
optionFilterProp="label"
placeholder="请选择设备"
v-model="searchForm.id"
>
<a-select-option value="" label="全部设备"> 全部设备 </a-select-option>
<a-select-option
v-for="v in deviceData"
:key="v.id"
:value="v.id"
:label="v.name"
>
{{ v.name }}
</a-select-option>
</y-select>
<y-select
allowClear
showSearch
optionFilterProp="label"
placeholder="请选择状态"
v-model="searchForm.style"
>
<a-select-option value="" label="全部状态"> 全部状态 </a-select-option>
<a-select-option
v-for="v in style"
:key="v.key"
:value="v.key"
:label="v.name"
>
{{ v.name }}
</a-select-option>
</y-select>
<y-range-picker valueFormat="YYYY-MM-DD" v-model="searchForm.time" />
<a-input
allowClear
placeholder="输入排队编号搜索"
v-model="searchForm.flownum"
/>
<a-button block class="search-btn" icon="search" @click="handleSearch">
搜索
</a-button>
</a-space>
</div>
</template>
<script>
import YSelect from "@/components/YSelect.vue";
import YRangePicker from "@/components/YRangePicker.vue";
import storage from "@/utils/js/Storage";
import { mapMutations } from "vuex";
import { getDatingList, getBumenList, getTaskList ,getTakeableList} from "@/api/dataAdmin";
import { debounce } from "lodash";
const style = [
{
key: 0,
name: "排队中",
},
{
key: 1,
name: "办理中",
},
{
key: 4,
name: "办理完成",
},
];
export default {
name: "numAcquisition-search",
components: {
YSelect,
YRangePicker,
},
data() {
return {
siteId: storage.get(2, "siteId"),
style,
datingList: [], // 大厅列表
deptList: [], // 部门列表
deviceData: [], // 设备列表
// 搜索数据
searchForm: {
id: "", // 排队机id
style: "", // 状态
device_type:"",//设备类型
time: [
this.$moment().format("YYYY-MM-DD"),
this.$moment().format("YYYY-MM-DD"),
], // 时间区间
flownum: "", // 排号编码
hallid: "", // 大厅id
sectionid: "", // 部门id
},
};
},
created() {
this.getDatingListArr();
this.getBumenListArr();
this.getTakeableList();
},
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 getTakeableList() {
let res = await getTakeableList({
page: 1,
size: -1,
});
if (res.code == 1) {
let { data } = res;
this.deviceData = data;
// console.log(this.deviceData)
}
},
// async getTaskList() {
// let res = await getTaskList({
// page: 1,
// size: -1,
// });
// if (res.code == 1) {
// let { data } = res.data;
// this.deviceData = data;
// console.log(this.deviceData)
// }
// },
// 搜索
handleSearch() {
if(this.searchForm.id){
let device = this.deviceData.filter((i)=>{
return this.searchForm.id == i.id
})
this.searchForm.device_type = device[0].device_type
}
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>
...@@ -115,6 +115,18 @@ const routes = [ ...@@ -115,6 +115,18 @@ const routes = [
activeMenu: "/home/dataManagement", activeMenu: "/home/dataManagement",
}, },
}, },
{
path: "numAcquisition",
name: "numAcquisition",
component: () =>
import(
/* webpackChunkName: "numAcquisition" */ "@/views/dataAdmin/components/queueCall/numAcquisition.vue"
),
meta: {
title: "在线取号记录报表",
activeMenu: "/home/dataManagement",
},
},
{ {
path: "callRecord", path: "callRecord",
name: "callRecord", name: "callRecord",
......
<template>
<div>
<a-drawer
title="办理明细"
placement="right"
width="700px"
:visible="Visible"
@close="onClose"
>
<!-- 头部 -->
<div class="header">
<div class="elapsed-time">
<p class="elapsed-time-title">
<span>总耗时:</span>
<span
>{{ detailsInfo.alltime ? detailsInfo.alltime : "--" }}
<span v-if="detailsInfo.alltime">
<a-icon
v-if="compareTime(detailsInfo.alltime, detailsInfo.p_alltime)"
type="arrow-up"
style="color: #ff4d4f"
/>
<a-icon v-else type="arrow-down" style="color: #1bbc9b" />
</span>
</span>
</p>
<p class="time">
<span>平均耗时:</span>
<span>{{
detailsInfo.p_alltime ? detailsInfo.p_alltime : "--"
}}</span>
</p>
</div>
<div class="elapsed-time">
<p class="elapsed-time-title">
<span>等待时间:</span>
<span>{{
detailsInfo.waittime ? detailsInfo.waittime : "--"
}}</span>
<span v-if="detailsInfo.waittime">
<a-icon
v-if="compareTime(detailsInfo.waittime, detailsInfo.p_waittime)"
type="arrow-up"
style="color: #ff4d4f"
/>
<a-icon v-else type="arrow-down" style="color: #1bbc9b" />
</span>
</p>
<p class="time">
<span>平均等待时间:</span>
<span>{{
detailsInfo.p_waittime ? detailsInfo.p_waittime : "--"
}}</span>
</p>
</div>
<div class="elapsed-time">
<p class="elapsed-time-title">
<span>办理时间:</span>
<span>{{ detailsInfo.bltime ? detailsInfo.bltime : "--" }}</span>
<span v-if="detailsInfo.bltime">
<a-icon
v-if="compareTime(detailsInfo.bltime, detailsInfo.p_bltime)"
type="arrow-up"
style="color: #ff4d4f"
/>
<a-icon v-else type="arrow-down" style="color: #1bbc9b" />
</span>
</p>
<p class="time">
<span>平均办理时间:</span>
<span>{{
detailsInfo.p_bltime ? detailsInfo.p_bltime : "--"
}}</span>
</p>
</div>
</div>
<!-- 步骤条 -->
<a-steps direction="vertical" :current="style">
<a-step title="未办理">
<a-icon type="environment" slot="icon" />
<div slot="description" class="transact-step">
<a-row :gutter="[0, 8]">
<a-col :span="12">
<span>申报人:</span>{{ detailsInfo.people_name || "--" }}
</a-col>
<a-col :span="12">
<span>取号时间:</span>{{ detailsInfo.taketime }}
</a-col>
</a-row>
<a-row :gutter="[0, 8]">
<a-col :span="12">
<span>取号编号:</span
>{{ detailsInfo.flownum ? detailsInfo.flownum : "--" }}
</a-col>
<a-col :span="12">
<span>取号方式:</span
>{{ detailsInfo.wy_signin === 0 ? "现场取号" : "线上取号" }}
</a-col>
</a-row>
<a-row :gutter="[0, 8]">
<a-col :span="12">
<span>注册方式:</span
>{{
detailsInfo.register_type == "Applets"
? "小程序"
: detailsInfo.register_type == "wechat"
? "公众号"
: detailsInfo.register_type == "app"
? "自助服务终端"
: "--"
}}
</a-col>
<!-- <a-col :span="12">
<span>取号设备:</span>{{ detailsInfo.take_name }}
</a-col> -->
</a-row>
<a-row :gutter="[0, 8]">
<a-col :span="24">
<span>办理业务:</span>{{ detailsInfo.business || "--" }}
</a-col>
</a-row>
<!-- 当前办理步骤标识 -->
<div class="transact-tips2" v-if="detailsInfo.style === 0">
<span class="tips-text"> 未办理 </span>
</div>
<div class="transact-tips1" v-if="detailsInfo.style === 1">
<span class="tips-text"> 办理中 </span>
</div>
<div class="transact-tips3" v-if="detailsInfo.style === 4">
<span class="tips-text"> 办理完成 </span>
</div>
</div>
</a-step>
<a-step
title="办理中"
v-if="detailsInfo.style === 1 || detailsInfo.style === 4"
>
<a-icon type="environment" slot="icon" />
<div slot="description">
<a-row :gutter="[0, 8]">
<a-col :span="12">
<span>办理窗口:</span>{{ detailsInfo.window_name }}
</a-col>
<a-col :span="12">
<span>开始办理时间:</span>{{ detailsInfo.calltime }}
</a-col>
</a-row>
<a-row :gutter="[0, 8]">
<a-col :span="12">
<span>工作人员:</span>{{ detailsInfo.workman_name }}
</a-col>
<!-- <a-col :span="12"> <span>健康状态:</span>绿码 </a-col> -->
</a-row>
<a-row :gutter="[0, 8]">
<a-col :span="12">
<span>叫号设备:</span>{{ detailsInfo.call_name || "--" }}
</a-col>
</a-row>
</div>
</a-step>
<a-step title="办理完成" v-if="detailsInfo.style === 4">
<a-icon type="environment" slot="icon" />
<div slot="description">
<a-row :gutter="[0, 8]">
<a-col :span="12">
<span>办理结束时间:</span>{{ detailsInfo.endtime }}
</a-col>
</a-row>
<a-row :gutter="[0, 8]">
<a-col :span="12">
<span>办件编号:</span
>{{ detailsInfo.ordernumber ? detailsInfo.ordernumber : "--" }}
</a-col>
</a-row>
</div>
</a-step>
</a-steps>
</a-drawer>
</div>
</template>
<script>
export default {
props: {
detailsVisible: {
type: Boolean,
required: true,
default: false,
},
detailsInfo: {
type: Object,
required: true,
default: () => {
return {};
},
},
},
data() {
return {};
},
computed: {
Visible: {
get() {
return this.detailsVisible;
},
set(val) {
this.$emit("update:detailsVisible", val);
},
},
style() {
if (this.detailsInfo === 0) {
return 1;
} else if (this.detailsInfo === 2) {
return 2;
} else {
return 3;
}
},
},
methods: {
onClose() {
this.Visible = false;
},
// 比较时间大小
compareTime(time1, time2) {
if (this.timeToSec(time1) - this.timeToSec(time2) > 0) {
return true;
}
return false;
},
// 转换时间为秒
timeToSec(time) {
if (time) {
let s = "";
let min,
sec = "";
if (time.includes("分钟") && time.includes("")) {
min = time.split("分钟")[0];
sec = time.split("分钟")[1].split("")[0];
s = Number(min * 60) + Number(sec);
return s;
} else if (time.includes("分钟")) {
min = time.split("分钟")[0];
s = Number(min * 60);
return s;
} else if (time.includes("")) {
sec = time.split("")[0];
s = Number(sec);
return s;
} else {
return 0;
}
} else {
return 0;
}
},
},
};
</script>
<style lang="less" scoped>
.header {
height: 90px;
margin-bottom: 20px;
border-left: 5px solid #1890ff;
border-radius: 0px 8px 8px 0px;
background-color: #e6f2fd;
display: flex;
justify-content: space-around;
align-items: center;
.elapsed-time-title {
font-size: 16px;
}
.time {
color: #1890ff;
}
}
.transact-step {
position: relative;
.transact-tips1,
.transact-tips2,
.transact-tips3 {
width: 90px;
height: 90px;
font-size: 16px;
font-weight: 600;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: -27px;
right: 0px;
transform: rotate(45deg);
}
.transact-tips1 {
border: 8px solid rgba(0, 168, 112, 0.1);
color: #00a870;
}
.transact-tips2 {
border: 8px solid rgba(8, 87, 232, 0.1);
color: #0857e8;
}
.transact-tips3 {
border: 8px solid rgba(101, 101, 101, 0.1);
color: #656565;
}
}
</style>
\ No newline at end of file
...@@ -66,14 +66,14 @@ ...@@ -66,14 +66,14 @@
</div> </div>
</div> </div>
<div slot="footer" class="btn-box"> <div slot="footer" class="btn-box">
<a-space> <!-- <a-space>
<a-button type="primary" @click="checkPortrayal" <a-button type="primary" @click="checkPortrayal"
>查看TA的数据画像</a-button >查看TA的数据画像</a-button
> >
<a-button type="primary" @click="checkBlockchain" <a-button type="primary" @click="checkBlockchain"
>区块链信息</a-button >区块链信息</a-button
> >
</a-space> </a-space> -->
</div> </div>
</a-modal> </a-modal>
</div> </div>
......
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