Files
intc-vue-h5/src/pages/health/statistic/marStatistic/index.vue
2024-12-23 13:09:06 +08:00

686 lines
20 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view class="container">
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
<view class="search-view">
<u-input v-model="queryParams.personName" border="false" type="select" @click="handlePerson" placeholder="请选择人员" suffixIcon="search"
suffixIconStyle="color: #909399" class="search-input">
</u-input>
</view>
<view class="search-view">
<u-input v-model="queryParams.healthRecordName" border="false" type="select" @click="handleHealthRecord" placeholder="请选择健康档案" suffixIcon="search"
suffixIconStyle="color: #909399" class="search-input">
</u-input>
</view>
</u-sticky>
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
<view class="search-view">
<u-input v-model="queryParams.time" placeholder="请选择用药日期" border="false" type="select" readonly suffixIcon="calendar"
suffixIconStyle="color: #909399" class="search-input">
</u-input>
<u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
<u-transition :show="filterPanel" mode="fade">
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
<view class="filter-panel-content">
<view class="select-header">用药日期</view>
<view class="selcet-content" style="padding: 0 24rpx">
<u-input
:disabled="true"
:disabledColor="'#fff'"
class="dateInput"
border="surround"
v-model="queryParams.startTime"
placeholder="请选择开始时间"
>
<template v-slot:suffix>
<u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
</template>
</u-input>
<u-input
:disabled="true"
:disabledColor="'#fff'"
class="dateInput"
border="surround"
v-model="queryParams.endTime"
placeholder="请选择结束时间"
>
<template v-slot:suffix>
<u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
</template>
</u-input>
</view>
</view>
<view class="btn-box">
<u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
<u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
</view>
<u-datetime-picker
:closeOnClickOverlay="true"
:show="timeShow"
v-model="time"
mode="date"
:minDate="-2209017600000"
@close="openOrCloseDate"
@cancel="openOrCloseDate"
@confirm="confirm"
></u-datetime-picker>
</view>
</u-transition>
</view>
</u-sticky>
<div class="app-container" style="overflow: auto">
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<div class="info-sum">
<div class="title">用药天数</div>
<div class="num">{{ mar.marDays }}<span></span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<div class="info-sum">
<div class="title">用药种类</div>
<div class="num">{{ mar.marCategoryCount }}<span></span></div>
</div>
</div>
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<div class="info-sum">
<div class="title">用药次数</div>
<div class="num">{{ mar.marCount }}<span></span></div>
</div>
</div>
<div class="item" v-show="mar.top1Name != null">
<img src="@/static/images/ticketSum.png" alt="" />
<div class="info-sum">
<div class="title">{{ mar.top1Name }}</div>
<div class="num">{{ mar.top1 }}<span></span></div>
</div>
</div>
</div>
<div class="header-con" ref="searchHeightRef" v-show="mar.top2Name != null">
<div class="item" v-show="mar.top2Name != null">
<img src="@/static/images/one.png" alt="" />
<div class="info-sum">
<div class="title">{{ mar.top2Name }}</div>
<div class="num">{{ mar.top2 }}<span></span></div>
</div>
</div>
<div class="item" v-show="mar.top3Name != null">
<img src="@/static/images/ticketSum.png" alt="" />
<div class="info-sum">
<div class="title">{{ mar.top3Name }}</div>
<div class="num">{{ mar.top3 }}<span></span></div>
</div>
</div>
</div>
<div class="header-con" ref="searchHeightRef" v-show="mar.top4Name != null">
<div class="item" v-show="mar.top4Name != null">
<img src="@/static/images/one.png" alt="" />
<div class="info-sum">
<div class="title">{{ mar.top4Name }}</div>
<div class="num">{{ mar.top4 }}<span></span></div>
</div>
</div>
<div class="item" v-show="mar.top5Name != null">
<img src="@/static/images/ticketSum.png" alt="" />
<div class="info-sum">
<div class="title">{{ mar.top5Name }}</div>
<div class="num">{{ mar.top5 }}<span></span></div>
</div>
</div>
</div>
<div class="header-con" ref="searchHeightRef" v-show="mar.top6Name != null">
<div class="item" v-show="mar.top6Name != null">
<img src="@/static/images/one.png" alt="" />
<div class="info-sum">
<div class="title">{{ mar.top6Name }}</div>
<div class="num">{{ mar.top6 }}<span></span></div>
</div>
</div>
<div class="item" v-show="mar.top7Name != null">
<img src="@/static/images/ticketSum.png" alt="" />
<div class="info-sum">
<div class="title">{{ mar.top7Name }}</div>
<div class="num">{{ mar.top7 }}<span></span></div>
</div>
</div>
</div>
<div class="header-con" ref="searchHeightRef" v-show="mar.top8Name != null">
<div class="item" v-show="mar.top8Name != null">
<img src="@/static/images/one.png" alt="" />
<div class="info-sum">
<div class="title">{{ mar.top8Name }}</div>
<div class="num">{{ mar.top8 }}<span></span></div>
</div>
</div>
<div class="item" v-show="mar.top9Name != null">
<img src="@/static/images/ticketSum.png" alt="" />
<div class="info-sum">
<div class="title">{{ mar.top9Name }}</div>
<div class="num">{{ mar.top9 }}<span></span></div>
</div>
</div>
</div>
<div class="header-con" ref="searchHeightRef" v-show="mar.top10Name != null">
<div class="item" v-show="mar.top10Name != null">
<img src="@/static/images/one.png" alt="" />
<div class="info-sum">
<div class="title">{{ mar.top10Name }}</div>
<div class="num">{{ mar.top10 }}<span></span></div>
</div>
</div>
<div class="item" v-show="mar.top11Name != null">
<img src="@/static/images/ticketSum.png" alt="" />
<div class="info-sum">
<div class="title">{{ mar.top11Name }}</div>
<div class="num">{{ mar.top11 }}<span></span></div>
</div>
</div>
</div>
<div class="header-con" ref="searchHeightRef" v-show="mar.top12Name != null">
<div class="item" v-show="mar.top12Name != null">
<img src="@/static/images/one.png" alt="" />
<div class="info-sum">
<div class="title">{{ mar.top12Name }}</div>
<div class="num">{{ mar.top12 }}<span></span></div>
</div>
</div>
<div class="item" v-show="mar.top13Name != null">
<img src="@/static/images/ticketSum.png" alt="" />
<div class="info-sum">
<div class="title">{{ mar.top13Name }}</div>
<div class="num">{{ mar.top13 }}<span></span></div>
</div>
</div>
</div>
<div class="header-con" ref="searchHeightRef" v-show="mar.top14Name != null">
<div class="item" v-show="mar.top14Name != null">
<img src="@/static/images/one.png" alt="" />
<div class="info-sum">
<div class="title">{{ mar.top14Name }}</div>
<div class="num">{{ mar.top14 }}<span></span></div>
</div>
</div>
<div class="item" v-show="mar.top15Name != null">
<img src="@/static/images/ticketSum.png" alt="" />
<div class="info-sum">
<div class="title">{{ mar.top15Name }}</div>
<div class="num">{{ mar.top15 }}<span></span></div>
</div>
</div>
</div>
<div class="header-con" ref="searchHeightRef" v-show="mar.top16Name != null">
<div class="item" v-show="mar.top16Name != null">
<img src="@/static/images/one.png" alt="" />
<div class="info-sum">
<div class="title">{{ mar.top16Name }}</div>
<div class="num">{{ mar.top16 }}<span></span></div>
</div>
</div>
<div class="item" v-show="mar.top17Name != null">
<img src="@/static/images/ticketSum.png" alt="" />
<div class="info-sum">
<div class="title">{{ mar.top17Name }}</div>
<div class="num">{{ mar.top17 }}<span></span></div>
</div>
</div>
</div>
<div></div>
</div>
<u-list :spaceHeight="116" lowerThreshold="100">
<u-list-item v-for="(item, index) in listData" :key="index">
<view class="list-item">
<view class="item-header">
<u--text lines="2"
:text="item.medicalName" size="30rpx" color="#333333" ></u--text>
</view>
<view class="item-row">
<text class="row-label">用药天数</text>
<text class="row-value">{{ item.useDays+" 天"}}</text>
</view>
<view class="item-row">
<text class="row-label">用药次数</text>
<text class="row-value">{{item.count+" 次"}}</text>
</view>
<view class="item-row">
<text class="row-label">用药总量</text>
<text class="row-value">{{ item.dosage+item.unit}}</text>
</view>
</view>
</u-list-item>
<view>
</view>
</u-list>
<u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
@confirm="settingConfirm" @cancel="settingCancel"></u-picker>
<u-picker itemHeight="88" :show="showPerson" :columns="personList" keyName="name" @cancel="handlePersonCancel"
@confirm="handlePersonConfirm"></u-picker>
<u-picker itemHeight="88" :show="showHealthRecord" :columns="healthRecordList" keyName="name" @cancel="handleHealthRecordCancel"
@confirm="handleHealthRecordConfirm"></u-picker>
</view>
<!-- 悬停按钮返回工作台-->
<suspend></suspend>
</template>
<script setup>
import { getMarAnalysis } from '@/api/health/statisticAnalysis'
import { listPerson } from '@/api/health/person'
import { listHealthRecord } from '@/api/health/healthRecord'
import { getDicts } from '@/api/system/dict/data.js'
import dayjs from 'dayjs'
import { timeHandler } from '@/utils/common.ts'
import {onLoad,onShow} from "@dcloudio/uni-app";
// 计算属性与监听属性是在vue中而非uniap中 需要注意!!!
import {reactive ,toRefs,ref,computed }from "vue";
const pageNum = ref(1)
const listData = ref([])
const isShow = ref(false)
const personList = ref([])
const showHealthRecord = ref(false)
const healthRecordList = ref([])
const personTypeList = ref([])
const settingPickShow = ref(false)
const settingColumns = ref([])
const showPerson = ref(false)
const timeShow= ref(false)
const time =ref( Number(new Date()))
const flag= ref(true)
const mar = ref({})
const data = reactive({
filterPanel: false,
queryPersonParams: {
pageNum: 1,
pageSize: 100
},
queryParams: {
type: 1,
time: null,
recordId: null,
dataType: null,
id: null
} ,
queryHealthRecordParams: {
pageNum: 1,
personId:null,
pageSize: 1000
}
})
const { filterPanel, queryPersonParams,queryHealthRecordParams, queryParams} = toRefs(data)
const windowHeight = computed(() => {
uni.getSystemInfoSync().windowHeight - 50
})
onLoad(() => {
getDict()
// getList()
});
onShow(() => {
if (isShow.value) {
listData.value=[]
getList()
isShow.value = false
}
});
function formatMultiLineData(data) {
if (data != null) {
return data.replace(/<br\/>/g, '\n')
}
}
function openOrCloseDate(data) {
timeShow.value = !timeShow.value
flag.value = data
}
function confirm(e) {
const date = timeHandler(new Date(e.value), '-', ':')
let formatValue = 'YYYY-MM-DD'
dayjs(date).format(formatValue)
if (flag.value) {
queryParams.value.startTime = dayjs(date).format(formatValue)
} else {
queryParams.value.endTime = dayjs(date).format(formatValue)
}
timeShow.value = false
}
function searchSubmit() {
if(queryParams.value.startTime!=''&&queryParams.value.startTime!=undefined&&queryParams.value.endTime!=''&&queryParams.value.endTime!=undefined){
queryParams.value.time = queryParams.value.startTime+'-'+queryParams.value.endTime
}
pageNum.value = 1
listData.value = []
getList()
filterPanel.value = false
}
function resetQuery() {
queryParams.value.type = '1'
queryParams.value.startTime = ''
queryParams.value.endTime = ''
queryParams.value.time = ''
}
function getList() {
getMarAnalysis({...queryParams.value }).then(res => {
mar.value = { ...res.data }
listData.value = listData.value.concat(res.data.marMapList)
}).catch(() => {
})
}
function getDict() {
listPerson(queryPersonParams.value).then((response) => {
personList.value = [response.rows]
if(response.rows.length>0){
queryParams.value.personName= response.rows[0].name
queryParams.value.id = response.rows[0].id
queryHealthRecordParams.value.personId=response.rows[0].id
listHealthRecord(queryHealthRecordParams.value).then((response) => {
healthRecordList.value = [response.rows]
if(response.rows.length>0){
queryParams.value.healthRecordName= response.rows[0].name
queryParams.value.recordId = response.rows[0].id
}
getMarAnalysis({...queryParams.value }).then(res => {
mar.value = { ...res.data }
listData.value = listData.value.concat(res.data.marMapList)
}).catch(() => {
})
})
}
})
}
function settingConfirm(e) {
queryParams.value.settingId = e.value[0].settingId
queryParams.value.settingName = e.value[0].settingName
settingPickShow.value = false
}
function settingCancel() {
settingPickShow.value = false
}
function handlePerson() {
if (personList.value[0].length === 0) {
proxy.$refs['uToast'].show({
message: '人员为空 ', type: 'warning'
})
} else {
showPerson.value = true
}
}
function handlePersonConfirm(e) {
queryParams.value.personName = e.value[0].name
queryParams.value.id= e.value[0].id
queryParams.value.healthRecordName = ''
queryParams.value.recordId = ''
queryHealthRecordParams.value.personId=e.value[0].id
listHealthRecord(queryHealthRecordParams.value).then((response) => {
healthRecordList.value = [response.rows]
showPerson.value = false
pageNum.value = 1
listData.value = []
getList()
})
}
function handlePersonCancel() {
showPerson.value = false
listData.value = []
getList()
filterPanel.value = false
}
function handleHealthRecord() {
if (healthRecordList.value[0].length === 0) {
proxy.$refs['uToast'].show({
message: '健康档案为空 ', type: 'warning'
})
} else {
showHealthRecord.value = true
}
}
function handleHealthRecordConfirm(e) {
queryParams.value.healthRecordName = e.value[0].name
queryParams.value.recordId = e.value[0].id
showHealthRecord.value = false
pageNum.value = 1
listData.value = []
getList()
}
function handleHealthRecordCancel() {
queryParams.value.healthRecordName= ""
queryParams.value.recordId = null
showHealthRecord.value = false
listData.value = []
getList()
filterPanel.value = false
}
</script>
<style lang="scss" scoped>
.app-container {
.header-con {
width: 100%;
height: 100px;
background-color: #ffffff;
margin-bottom: 5px;
display: flex;
justify-content: space-between;
align-items: center;
.item {
width: 50%;
height: 100%;
display: flex;
position: relative;
align-items: center;
margin: 5px 10px 5px 10px;
.title {
margin-left: 5px;
color: rgb(133, 133, 148);
margin-bottom: 5px;
font-size: 14px;
}
.num {
margin-left: 5px;
font-weight: bold;
font-size: 14px;
}
}
img {
height: 30px;
width: 30px;
}
}
.header-title {
width: 100%;
height: 30px;
background-color: #ffffff;
margin-bottom: 3px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
}
}
.btnAdd {
width: 146rpx;
height: 56rpx;
line-height: 56rpx;
border-radius: 8rpx;
display:float;
text-align: center;
}
.search-view {
padding: 12rpx 32rpx;
background-color: #ffffff;
display: flex;
align-items: center;
position: relative;
.search-input {
background: #F5F5F5;
color: #333333;
margin-right: 36rpx;
}
.filter-panel {
width: 100%;
position: absolute;
left: 0;
top: 96rpx;
background-color: rgba(0, 0, 0, 0.5);
.filter-panel-content {
background-color: #ffff;
padding: 0 30rpx 30rpx;
.filter-title {
color: #000000;
font-size: 30rpx;
font-weight: 500;
padding: 30rpx 0;
}
.state-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
.state-item {
width: 210rpx;
height: 72rpx;
border: 1rpx solid rgba(0, 0, 0, 0.25);
border-radius: 72rpx;
text-align: center;
line-height: 72rpx;
margin: 0 20rpx 20rpx 0;
font-size: 28rpx;
color: #000000;
}
.active {
background-color: rgba(222, 241, 255, 1);
border: 1rpx solid rgba(22, 119, 255, 1);
}
}
}
.btn-box {
display: flex;
padding: 24rpx 30rpx;
background-color: #fff;
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
}
}
}
.list-item {
margin: 0 24rpx 24rpx;
padding: 32rpx;
background-color: #fff;
.item-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 16rpx;
.status {
.status-item {
width: 120rpx;
height: 44rpx;
text-align: center;
line-height: 44rpx;
border-radius: 4rpx;
font-size: 24rpx;
}
.status1 {
background: #F0F0F0;
color: #8C8C8C;
}
.status2 {
background: rgba(38, 129, 255, 0.2);
color: #2681FF;
}
.status3 {
background: #F7F7F7;
color: #2681FF;
}
.status4 {
background: rgba(255, 85, 51, 0.2);
color: #FF5533;
}
.status5 {
background: #F7F7F7;
color: rgba(0, 0, 0, 0.85);
}
.status7 {
background: rgba(255, 129, 51, 0.2);
color: #FF8133;
}
.status8 {
background: rgba(65, 217, 165, 0.2);
color: #41D9A5;
}
}
}
.item-row {
padding: 16rpx 0;
.row-label {
color: rgba(0, 0, 0, 0.55);
}
.row-value {
color: rgba(0, 0, 0, 0.85)
}
}
.operate {
display: flex;
justify-content: flex-end;
.btn {
width: 146rpx;
height: 56rpx;
line-height: 56rpx;
border-radius: 8rpx;
margin-left: 5rpx;
text-align: center;
}
.circulation {
background: rgba(0, 0, 0, 0.04);
margin-right: 24rpx;
color: rgba(0, 0, 0, 0.85);
}
.filling {
background: #2681FF;
border-radius: 8rpx;
color: #FFFFFF;
}
}
}
</style>