You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
udiwms-vue-frame/src/views/collect/CollectOrderStats.vue

609 lines
18 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="app-container home">
<div>
<!-- <h2>单据上传统计</h2>-->
<!-- <el-divider/>-->
<el-card>
<el-form v-if="queryList && queryList.length > 0" :model="filterQuery" class="query-form"
size="mini" label-width="100px"
>
<el-row style=" display:flex; flex-wrap: wrap; ">
<template v-for="(item, index) in queryList">
<div v-if="showSearch || item.isImport">
<el-form-item v-if="item.columnType == 'input' && executeEval(row,item.expression,true)"
class="query-form-item"
:label="item.columnDesc+`:`" :key="item.id"
>
<el-input
v-model="filterQuery[item.columnName]"
:placeholder="item.columnDesc == '模糊查询' ? '单据号/来源系统/收货方/发货方' : item.columnDesc"
:disabled="executeEval(null,item.disabledFuc,false)"
@keyup.enter.native="executeFuc($event,'5',item.clickFuc)"
clearable
></el-input>
</el-form-item>
<el-form-item v-if="item.columnType == 'select' && executeEval(row,item.expression,true)"
class="query-form-item"
:label="item.columnDesc+`:`"
>
<el-select v-model="filterQuery[item.columnName]"
:placeholder="item.columnDesc"
:disabled="executeEval(null,item.disabledFuc,false)"
clearable
>
<el-option
v-for="dict in item.lableRuleObj"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item v-if="item.columnType == 'selectServer' && executeEval(row,item.expression,true)"
class="query-form-item"
:label="item.columnDesc+`:`"
>
<el-select
v-model="filterQuery[item.columnName]"
:placeholder="item.columnDesc"
@change="executeFuc($event,'5',item.checkRules)"
:disabled="executeEval(null,item.disabledFuc,false)"
filterable
remote
:remote-method="(query) => executeFuc(query,'5',item.clickFuc)"
clearable
>
<el-option
v-for="item in options[item.clickFuc]"
:key="item.code"
:label="item.label"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item v-if="item.columnType == 'datePicker' && executeEval(row,item.expression,true)"
class="query-form-item"
:label="item.columnDesc+`:`"
>
<el-date-picker
:picker-options="pickerOptions"
v-model="actDateRange"
type="daterange"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item v-if="item.columnType == 'date' && executeEval(row,item.expression,true)"
class="query-form-item"
:label="item.columnDesc+`:`"
>
<el-date-picker
v-model="filterQuery[item.columnName]"
:style="`width:${item.width+'px'}`"
value-format="yyyy-MM-dd"
:disabled="executeEval(null,item.disabledFuc,false)"
type="date"
:placeholder="item.columnDesc"
></el-date-picker>
</el-form-item>
</div>
</template>
</el-row>
</el-form>
<div class="top-right-btn">
<el-button-group>
<el-button
type="primary"
icon="el-icon-refresh"
@click="onReset"
>重置
</el-button>
<el-button type="primary" icon="el-icon-search" @click="onSubmit(this)"
>查询
</el-button
>
</el-button-group>
</div>
</el-card>
</div>
<!-- 分割线 -->
<!-- <div class="m0 grid-container grid-container1" style="height: 100%; display: flex; flex-wrap: wrap;">-->
<!-- <el-card-->
<!-- @click.native="handleClick(index)"-->
<!-- v-for="(card, index) in stationList"-->
<!-- :key="index"-->
<!-- class="grid-itemCard"-->
<!-- :body-style="{ padding: '0px', height: '100px', width: '100px', display: 'flex', justifyContent: 'center', alignItems: 'center' }"-->
<!-- >-->
<!-- {{ card.workplaceName }}-->
<!-- </el-card>-->
<!-- </div>-->
<div class="mt10 grid-container grid-container3" style="height: 15%">
<el-card class="grid-item" body-style="padding:0px;height:100%" >
<el-row >
<div class="height-full fl center ml20" style="width: 30%" @click="linkPage('/dept/use/prescribeDir/inout/split/tag/upload?status=2')">
<el-image style="border-radius: 4%;width: 90%;height: 90%"
:src="alreadyUploadingSvg"
>
<div slot="placeholder" class="image-slot">
加载中<span class="dot">...</span>
</div>
</el-image>
</div>
<div class="height-full fr center mr20" @click="linkPage('/dept/use/prescribeDir/inout/split/tag/upload?status=2')">
<span class="header d-block">
已上传医保
</span>
<span class="d-block mt10" :style="{'font-size': '32px','font-weight': 'bolder',color:'#394047'}">
{{ stats.alreadyUploadingCount }}
</span>
</div>
</el-row>
</el-card>
<el-card class="grid-item" body-style="padding:0px;height:100%">
<el-row>
<div class="height-full fl center ml20" style="width: 30%" @click="linkPage('/dept/use/prescribeDir/inout/split/tag/upload?status=1')">
<el-image style="border-radius: 4%;width: 90%;height: 90%"
:src="notUploadingSvg"
>
<div slot="placeholder" class="image-slot">
加载中<span class="dot">...</span>
</div>
</el-image>
</div>
<div class="height-full fr center mr20" @click="linkPage('/dept/use/prescribeDir/inout/split/tag/upload?status=1')">
<span class="header d-block">
未上传医保
</span>
<span class="d-block mt10" :style="{'font-size': '32px','font-weight': 'bolder',color:'#394047'}">
{{ stats.notUploadingCount }}
</span>
</div>
</el-row>
</el-card>
<el-card class="grid-item" body-style="padding:0px;height:100%">
<el-row>
<div class="height-full fl center ml20" style="width: 30%" @click="linkPage('/dept/use/prescribeDir/inout/split/tag/upload?status=3')">
<el-image style="border-radius: 4%;width: 90%;height: 90%"
:src="uploadingFailSvg"
>
<div slot="placeholder" class="image-slot">
加载中<span class="dot">...</span>
</div>
</el-image>
</div>
<div class="height-full fr center mr20" @click="linkPage('/dept/use/prescribeDir/inout/split/tag/upload?status=3')">
<span class="header d-block">
上传失败医保
</span>
<span class="d-block mt10" :style="{'font-size': '32px','font-weight': 'bolder',color:'#394047'}">
{{ stats.uploadingFailCount }}
</span>
</div>
</el-row>
</el-card>
</div>
<div class="mt10 grid-container grid-container3" style="height: 15%">
<el-card class="grid-item" body-style="padding:0px;height:100%" >
<el-row >
<div class="height-full fl center ml20" style="width: 30%" >
<el-image style="border-radius: 4%;width: 90%;height: 90%"
:src="alreadyUploadingSvg"
>
<div slot="placeholder" class="image-slot">
加载中<span class="dot">...</span>
</div>
</el-image>
</div>
<div class="height-full fr center mr20" >
<span class="header d-block">
医保总上传码数量
</span>
<span class="d-block mt10" :style="{'font-size': '32px','font-weight': 'bolder',color:'#394047'}">
{{ stats.codeCount }}
</span>
</div>
</el-row>
</el-card>
<el-card class="grid-item" body-style="padding:0px;height:100%">
<el-row>
<div class="height-full fl center ml20" style="width: 30%" >
<el-image style="border-radius: 4%;width: 90%;height: 90%"
:src="notUploadingSvg"
>
<div slot="placeholder" class="image-slot">
加载中<span class="dot">...</span>
</div>
</el-image>
</div>
<div class="height-full fr center mr20" >
<span class="header d-block">
医保采购上传率
</span>
<span class="d-block mt10" :style="{'font-size': '32px','font-weight': 'bolder',color:'#394047'}">
{{ stats.buyerCentage }}%
</span>
</div>
</el-row>
</el-card>
<el-card class="grid-item" body-style="padding:0px;height:100%">
<el-row>
<div class="height-full fl center ml20" style="width: 30%" >
<el-image style="border-radius: 4%;width: 90%;height: 90%"
:src="notUploadingSvg"
>
<div slot="placeholder" class="image-slot">
加载中<span class="dot">...</span>
</div>
</el-image>
</div>
<div class="height-full fr center mr20">
<span class="header d-block">
医保销售上传率
</span>
<span class="d-block mt10" :style="{'font-size': '32px','font-weight': 'bolder',color:'#394047'}">
{{ stats.salesCentage }}%
</span>
</div>
</el-row>
</el-card>
</div>
</div>
</template>
<script>
import alreadyUploadingSvg from '@/assets/svg/已上传.svg'
import notUploadingSvg from '@/assets/svg/未上传.svg'
import uploadingFailSvg from '@/assets/svg/上传失败.svg'
import { executeFuc, getHead } from '@/utils/customConfig'
import { convertDate } from '@/utils/date'
import { uploadCount } from '@/api/collect/collectOrder'
// import {getOrderList} from "../api/inout/order";
// import {sysMsgTodoPage} from "../api/system/sysMsgTodoApi";
// import productSvg from "@/assets/svg/已对照产品.svg"
// import invSvg from "@/assets/svg/库存预警.svg"
// import certSvg from "@/assets/svg/资质预警.svg"
// import {getInvRemindMsgList} from "../api/system/invRemindMsg";
// import {getUdiInfos} from "../api/basic/udiRelevance";
// // import {listPage} from "@/api/basic/sysWorkplaceManage.js";
// import {getSupCertgetCount, getSupCertRemindMsgList} from "../api/purchase/supCertRedmindMsg";
export default {
name: 'Index',
data() {
return {
alreadyUploadingSvg: alreadyUploadingSvg,
notUploadingSvg: notUploadingSvg,
uploadingFailSvg: uploadingFailSvg,
stats:{
alreadyUploadingCount: 0,
notUploadingCount: 0,
uploadingFailCount: 0,
buyerCentage: 0,
salesCentage: 0,
codeCount: 0,
},
// 待办==================================================
msgLoading: false,
todoCount: 0,
msgList: [],
// =======================================================================
// 单据==================================================
orderLoading: false,
orderTotal: 0,
orderList: [],
// =======================================================================
//界面配置相关
//患者处方
tableHeader: [],
queryList: [],
tableObj: [],
fromList: [],
//处方明细
tableHeader1: [],
queryList1: [],
tableObj1: [],
fromList1: [],
convertDateFun: convertDate,
pickerOptions: {
shortcuts: [
{
text: '最近一周',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
},
{
text: '最近一个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
},
{
text: '最近三个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
}
}
]
},
actDateRange: [],
//界面配置-------------end
filterQuery: {
startTime:null,
endTime:null
}
}
},
methods: {
//界面配置相关------------
executeFuc(row, type, clickFuc, value) {
return executeFuc(this, row, type, clickFuc, value)
},
executeEval(row, expression, defaultRet) {
if (expression) {
return eval(expression)
}
return defaultRet
},
onReset() {
this.filterQuery = {
startTime:null,
endTime:null
}
this.actDateRange = []
this.getList()
},
onSubmit(_this) {
if (_this == null) {
_this = this
}
_this.getList()
},
getList() {
// this.loading = true
if (this.actDateRange !== null) {
this.filterQuery.startTime = this.actDateRange[0]
this.filterQuery.endTime = this.actDateRange[1]
} else {
this.filterQuery.startTime = null
this.filterQuery.endTime = null
}
uploadCount(this.filterQuery).then(res => {
console.log('res111',res)
if (res.code === 20000) {
// this.loading = false
// this.list = res.data || []
// console.log('res.data',res.data)
this.stats = {
notUploadingCount:res.data.notUploadingCount,
alreadyUploadingCount:res.data.alreadyUploadingCount,
uploadingFailCount:res.data.uploadingFailCount,
buyerCentage:res.data.buyerCentage,
salesCentage:res.data.salesCentage,
codeCount:res.data.codeCount,
}
}else {
// this.loading = false
this.$message.error(res.message);
}
// this.total = res.data.total || 0
// this.panelALive = false
}).catch(() => {
// this.loading = false
// this.list = []
// this.total = 0
})
},
linkPage(path) {
console.log(path)
this.$router.push(path)
},
},
mounted() {
getHead('collectOrderStats', '1').then((re) => {
// 处理返回的数据
this.tableObj = re.data
this.tableHeader = re.data.tableList
this.queryList = re.data.queryList
this.fromList = re.data.fromList
this.getList()
})
}
}
</script>
<style scoped lang="scss">
.center {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.el-row .el-card {
margin: 0;
.el-card__body {
padding: 0 !important;
}
}
.el-card {
/* margin-right: 15px; */
/* margin-left: 15px; */
margin-top: 15px;
/* transition: all .5s; */
}
.grid-itemCard {
/* */
margin: 10px;
background-color: #f9f9f9;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.grid-item {
height: 100%;
padding: 15px;
.el-row, .el-col {
height: 100%;
}
.header {
color: #676a6c;
font-size: 20px;
font-weight: bolder;
}
.el-table {
margin-top: 10px;
width: 100%;
}
}
.grid-container {
height: inherit;
display: grid;
grid-gap: 10px;
.el-card {
margin: 0;
}
}
.grid-container1 {
grid-template-columns: repeat(1, 1fr);
padding: 10px;
}
.grid-container2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-container3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-container4 {
grid-template-columns: repeat(4, 1fr);
}
.home {
blockquote {
padding: 10px 20px;
margin: 0 0 20px;
font-size: 17.5px;
border-left: 5px solid #eee;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #eee;
}
.col-item {
margin-bottom: 20px;
}
ul {
padding: 0;
margin: 0;
}
height: calc(100%);
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
color: #676a6c;
overflow-x: hidden;
ul {
list-style-type: none;
}
h4 {
margin-top: 0px;
}
h2 {
margin-top: 10px;
font-size: 26px;
color: #000610;
font-weight: bolder;
}
p {
margin-top: 10px;
b {
font-weight: 700;
}
}
.update-log {
ol {
display: block;
list-style-type: decimal;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 40px;
}
}
}
</style>