fix: 健康统计，统计功能页面初始化，未开发。
This commit is contained in:
tianyongbao
@@ -138,6 +138,11 @@
|
||||
<el-date-picker clearable v-model="formDetail.costTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择产生时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="治疗类型" v-show="showMedicine" prop="treatType">
|
||||
<el-select v-model="form.treatType" placeholder="请选择用药类型" @change="handleTreatTypeChange">
|
||||
<el-option v-for="dict in mar_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="showMedicine" label="药品名称" prop="medicineId">
|
||||
<el-select v-model="formDetail.medicineId" placeholder="请选择药品名称" @change="handleMedicineChange" clearable>
|
||||
<el-option v-for="medicine in medicineList" :key="medicine.id" :label="medicine.shortNameBrandPackaging" :value="medicine.id" />
|
||||
@@ -157,16 +162,16 @@
|
||||
<el-input v-model="formDetail.costName" placeholder="请输入费用名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单价" prop="price">
|
||||
<el-input v-model="formDetail.price" type="number" placeholder="请输入单价">
|
||||
<el-input v-model="formDetail.price" type="number" @change="handlePriceChange" placeholder="请输入单价">
|
||||
<template #suffix>元</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="数量" prop="count">
|
||||
<el-input v-model="formDetail.count" type="number" @change="handleCountchange" placeholder="请输入数量"> </el-input>
|
||||
<el-input v-model="formDetail.count" type="number" @change="handleCountChange" placeholder="请输入数量"> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="单位" disabled prop="unit">
|
||||
<el-select v-model="formDetail.unit" clearable placeholder="请选择单位">
|
||||
<el-option v-for="dict in medical_unit" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
||||
<el-option v-for="dict in package_unit" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="总价" prop="totalCost">
|
||||
@@ -200,23 +205,23 @@
|
||||
<div class="content-con">
|
||||
<el-table v-loading="loading" @selection-change="handleSelectionChange" :data="doctorRecordCostList">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="产生时间" align="center" prop="costTime" width="180"> </el-table-column>
|
||||
<el-table-column label="产生时间" align="center" prop="costTime" width="170"> </el-table-column>
|
||||
<el-table-column label="费用类型" width="100" align="center" prop="type">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="cost_type" :value="scope.row.type" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="费用名称" align="center" prop="costName" />
|
||||
<el-table-column label="单价" align="center" width="80" prop="price" />
|
||||
<el-table-column label="单价（元）" align="center" width="100" prop="price" />
|
||||
<el-table-column label="数量" align="center" width="80" prop="count" />
|
||||
<el-table-column label="单位" align="center" width="80" prop="unit">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="medical_unit" :value="scope.row.unit" />
|
||||
<dict-tag :options="package_unit" :value="scope.row.unit" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="总价" align="center" width="100" prop="totalCost" />
|
||||
<el-table-column label="总价（元）" align="center" width="100" prop="totalCost" />
|
||||
|
||||
<el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
|
||||
<el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width">
|
||||
<template v-slot="scope">
|
||||
<div class="ctrl-btn d-flex">
|
||||
<el-tooltip v-for="item in operateDetailList" :key="item.id" class="item" effect="dark" :content="item.title" placement="top">
|
||||
@@ -244,12 +249,13 @@ import dayjs from 'dayjs'
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import { require } from '@/utils/require'
|
||||
const { proxy } = getCurrentInstance()
|
||||
const { doctor_type, cost_type, check_type, medical_unit, nursing_type } = proxy.useDict(
|
||||
const { doctor_type, cost_type, check_type, package_unit, nursing_type, mar_type } = proxy.useDict(
|
||||
'doctor_type',
|
||||
'cost_type',
|
||||
'check_type',
|
||||
'medical_unit',
|
||||
'nursing_type'
|
||||
'package_unit',
|
||||
'nursing_type',
|
||||
'mar_type'
|
||||
)
|
||||
const medicineList = ref([])
|
||||
const doctorRecordList = ref([])
|
||||
@@ -281,6 +287,7 @@ const operateList = ref([
|
||||
{ id: 'delete', icon: 'Delete', title: '删除', hasPermi: ['health:doctorRecord:remove'] }
|
||||
])
|
||||
const operateDetailList = ref([
|
||||
{ id: 'copy', icon: 'Link', title: '复制', hasPermi: ['health:doctorRecord:edit'] },
|
||||
{ id: 'edit', icon: 'Edit', title: '修改', hasPermi: ['health:doctorRecord:edit'] },
|
||||
{ id: 'delete', icon: 'Delete', title: '删除', hasPermi: ['health:doctorRecord:remove'] }
|
||||
])
|
||||
@@ -301,6 +308,11 @@ const data = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 1000
|
||||
},
|
||||
queryMedicineParams: {
|
||||
pageNum: 1,
|
||||
treatmentType: null,
|
||||
pageSize: 1000
|
||||
},
|
||||
queryHealthRecordParams: {
|
||||
pageNum: 1,
|
||||
personId: null,
|
||||
@@ -332,7 +344,14 @@ const data = reactive({
|
||||
})
|
||||
/** 查询药品管理列表 */
|
||||
function getMedicineList() {
|
||||
listMedicineBasic(queryPersonParams.value).then((response) => {
|
||||
listMedicineBasic(queryMedicineParams.value).then((response) => {
|
||||
medicineList.value = response.rows
|
||||
})
|
||||
}
|
||||
const handleTreatTypeChange = (type) => {
|
||||
queryMedicineParams.value.treatmentType = type
|
||||
|
||||
listMedicineBasic(queryMedicineParams.value).then((response) => {
|
||||
medicineList.value = response.rows
|
||||
})
|
||||
}
|
||||
@@ -355,7 +374,7 @@ const handleOperate = (operate, row) => {
|
||||
}
|
||||
}
|
||||
|
||||
const { queryParams, form, formDetail, rules, queryPersonParams, queryHealthRecordParams, rulesDetail } = toRefs(data)
|
||||
const { queryParams, form, formDetail, rules, queryPersonParams, queryMedicineParams, queryHealthRecordParams, rulesDetail } = toRefs(data)
|
||||
|
||||
const handlePersonChange = (personId) => {
|
||||
queryHealthRecordParams.personId = personId
|
||||
@@ -367,9 +386,14 @@ const handlePersonChange = (personId) => {
|
||||
})
|
||||
}
|
||||
|
||||
const handleCountchange = (count) => {
|
||||
const handleCountChange = (count) => {
|
||||
if (formDetail.value.price != null) {
|
||||
formDetail.value.totalCost = count * formDetail.value.price
|
||||
formDetail.value.totalCost = parseFloat(count * formDetail.value.price).toFixed(2)
|
||||
}
|
||||
}
|
||||
const handlePriceChange = (price) => {
|
||||
if (formDetail.value.count != null) {
|
||||
formDetail.value.totalCost = parseFloat(price * formDetail.value.count).toFixed(2)
|
||||
}
|
||||
}
|
||||
const handleNursingTypechange = (type) => {
|
||||
@@ -388,7 +412,7 @@ const handleCheckTypechange = (type) => {
|
||||
|
||||
const handleMedicineChange = (medicineId) => {
|
||||
getMedicineBasic(medicineId).then((response) => {
|
||||
formDetail.value.unit = response.data.unit
|
||||
formDetail.value.unit = response.data.packageUnit
|
||||
formDetail.value.costName = response.data.shortNameBrandPackaging
|
||||
})
|
||||
}
|
||||
@@ -400,7 +424,87 @@ const handleTypeChange = (type) => {
|
||||
showNursingType.value = false
|
||||
showMedicine.value = false
|
||||
formDetail.value.costName = '挂号费'
|
||||
formDetail.value.unit = '7'
|
||||
formDetail.value.count = 1
|
||||
formDetail.value.unit = '6'
|
||||
} else if (type == '2') {
|
||||
//检测检查
|
||||
showCheckType.value = true
|
||||
showNursingType.value = false
|
||||
showMedicine.value = false
|
||||
formDetail.value.count = 1
|
||||
formDetail.value.unit = '5'
|
||||
} else if (type == '3') {
|
||||
//药品
|
||||
getMedicineList()
|
||||
showCheckType.value = false
|
||||
showNursingType.value = false
|
||||
showMedicine.value = true
|
||||
formDetail.value.count = 1
|
||||
} else if (type == '4') {
|
||||
//护理治疗
|
||||
showCheckType.value = false
|
||||
showNursingType.value = true
|
||||
showMedicine.value = false
|
||||
formDetail.value.unit = '6'
|
||||
formDetail.value.count = 1
|
||||
} else if (type == '5') {
|
||||
showCheckType.value = false
|
||||
showNursingType.value = false
|
||||
showMedicine.value = false
|
||||
formDetail.value.costName = '交通费'
|
||||
formDetail.value.unit = '6'
|
||||
formDetail.value.count = 1
|
||||
} else if (type == '6') {
|
||||
showCheckType.value = false
|
||||
showNursingType.value = false
|
||||
showMedicine.value = false
|
||||
formDetail.value.costName = '餐饮'
|
||||
formDetail.value.unit = '6'
|
||||
formDetail.value.count = 1
|
||||
} else if (type == '7') {
|
||||
showCheckType.value = false
|
||||
showNursingType.value = false
|
||||
showMedicine.value = false
|
||||
formDetail.value.costName = ''
|
||||
formDetail.value.count = 1
|
||||
formDetail.value.unit = null
|
||||
}
|
||||
}
|
||||
|
||||
/** 新增按钮操作 */
|
||||
function handleAddDetail() {
|
||||
resetDetail()
|
||||
getMedicineList()
|
||||
titleDetail.value = '添加费用明细'
|
||||
openDetail.value = true
|
||||
}
|
||||
|
||||
const handleDetailOperate = (operate, row) => {
|
||||
switch (operate) {
|
||||
case 'copy':
|
||||
handleCopy(row)
|
||||
break
|
||||
case 'edit':
|
||||
handleUpdateDetail(row)
|
||||
break
|
||||
case 'delete':
|
||||
handleDeleteDetail(row)
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
/** 复制按钮操作 */
|
||||
function handleCopy(row) {
|
||||
resetDetail()
|
||||
getDoctorRecordCost(row.id).then((response) => {
|
||||
formDetail.value = response.data
|
||||
const type = response.data.type
|
||||
//挂号费
|
||||
if (type == '1') {
|
||||
showCheckType.value = false
|
||||
showNursingType.value = false
|
||||
showMedicine.value = false
|
||||
} else if (type == '2') {
|
||||
//检测检查
|
||||
showCheckType.value = true
|
||||
@@ -421,47 +525,28 @@ const handleTypeChange = (type) => {
|
||||
showCheckType.value = false
|
||||
showNursingType.value = false
|
||||
showMedicine.value = false
|
||||
formDetail.value.costName = '交通费'
|
||||
formDetail.value.unit = '7'
|
||||
} else if (type == '6') {
|
||||
showCheckType.value = false
|
||||
showNursingType.value = false
|
||||
showMedicine.value = false
|
||||
formDetail.value.costName = '餐饮'
|
||||
formDetail.value.unit = '7'
|
||||
} else if (type == '7') {
|
||||
showCheckType.value = false
|
||||
showNursingType.value = false
|
||||
showMedicine.value = false
|
||||
formDetail.value.costName = ''
|
||||
formDetail.value.unit = null
|
||||
}
|
||||
}
|
||||
|
||||
/** 新增按钮操作 */
|
||||
function handleAddDetail() {
|
||||
resetDetail()
|
||||
getMedicineList()
|
||||
titleDetail.value = '添加费用明细'
|
||||
formDetail.value.id = null
|
||||
openDetail.value = true
|
||||
}
|
||||
|
||||
const handleDetailOperate = (operate, row) => {
|
||||
switch (operate) {
|
||||
case 'edit':
|
||||
handleUpdateDetail(row)
|
||||
break
|
||||
case 'delete':
|
||||
handleDeleteDetail(row)
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
titleDetail.value = '复制费用明细'
|
||||
})
|
||||
}
|
||||
// 取消按钮
|
||||
function cancelDetail() {
|
||||
openDetail.value = false
|
||||
resetDetail()
|
||||
//检测检查
|
||||
showCheckType.value = false
|
||||
showNursingType.value = false
|
||||
showMedicine.value = false
|
||||
}
|
||||
/** 总利息按钮操作 */
|
||||
function handleUpdateCost() {
|
||||
|
||||
680
src/views/health/doctorStatistic/index.vue
Normal file
680
src/views/health/doctorStatistic/index.vue
Normal file
@@ -0,0 +1,680 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="search-con">
|
||||
<div class="title">查询条件</div>
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
|
||||
<el-form-item label="人员姓名" prop="id">
|
||||
<el-select v-model="queryParams.id" placeholder="请选择人员姓名" @change="handlePersonChange">
|
||||
<el-option v-for="person in personList" :key="person.id" :label="person.name" :value="person.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="健康档案" prop="recordId">
|
||||
<el-select v-model="queryParams.recordId" placeholder="请选择健康档案" @change="handleRecordChange">
|
||||
<el-option v-for="health in healthRecordList" :key="health.id" :label="health.name" :value="health.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用药日期" prop="time" v-if="queryParams.type === 1">
|
||||
<el-date-picker
|
||||
v-model="queryParams.time"
|
||||
type="daterange"
|
||||
range-separator="~"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
format="YYYY-MM-DD"
|
||||
@calendar-change="calendarChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="" prop="time" v-if="queryParams.type === 2">
|
||||
<el-date-picker
|
||||
v-model="queryParams.time"
|
||||
type="monthrange"
|
||||
range-separator="~"
|
||||
format="YYYY-MM"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
:disabled-date="disabledDateFun"
|
||||
@calendar-change="calendarChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="" prop="time" v-if="queryParams.type === 3">
|
||||
<yearPicker
|
||||
v-model="queryParams.time"
|
||||
ref="statisticPicker"
|
||||
labelText="选择年份"
|
||||
:initYear="dateValue"
|
||||
:showYear="showYearValue"
|
||||
:maxLength="5"
|
||||
sp="~"
|
||||
@updateTimeRange="updateStatisticYear"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="search-btn-con">
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-con" style="height: calc(100% - 1.45rem)">
|
||||
<div class="summary-con" style="height: 115px">
|
||||
<div class="right-con" v-show="mar.marCategoryCount > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">用药种类</div>
|
||||
<div>
|
||||
<span class="num">{{ mar.marCategoryCount }}</span
|
||||
><span class="unit">种</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con" v-show="mar.marCount > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">用药次数</div>
|
||||
<div>
|
||||
<span class="num">{{ mar.marCount }}</span
|
||||
><span class="unit">次 </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right-con" v-show="mar.qingre > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">清热解毒</div>
|
||||
<div>
|
||||
<span class="num">{{ mar.qingre }}</span
|
||||
><span class="unit">次</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con" v-show="mar.zhike > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">止咳化痰平喘</div>
|
||||
<div>
|
||||
<span class="num">{{ mar.zhike }}</span
|
||||
><span class="unit">次</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con" v-show="mar.wuhua > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">雾化消炎</div>
|
||||
<div>
|
||||
<span class="num">{{ mar.wuhua }}</span
|
||||
><span class="unit">次</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con" v-show="mar.kangjun > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">抗菌消炎</div>
|
||||
<div>
|
||||
<span class="num">{{ mar.kangjun }}</span> <span class="unit">次</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary-con" v-show="mar.kangguomin > 0 || mar.kangbingdu > 0 || mar.tuishao > 0 || mar.biyan > 0 || mar.changdao > 0" style="height: 115px">
|
||||
<div class="right-con" v-show="mar.kangguomin > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">抗过敏</div>
|
||||
<div>
|
||||
<span class="num">{{ mar.kangguomin }}</span> <span class="unit">次</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con" v-show="mar.kangbingdu > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">抗病毒</div>
|
||||
<div>
|
||||
<span class="num">{{ mar.kangbingdu }}</span
|
||||
><span class="unit">次</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con" v-show="mar.tuishao > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">退烧用药</div>
|
||||
<div>
|
||||
<span class="num">{{ mar.tuishao }}</span
|
||||
><span class="unit">次</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con" v-show="mar.biyan > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">鼻炎腺样体</div>
|
||||
<div>
|
||||
<span class="num">{{ mar.biyan }}</span> <span class="unit">次</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con" v-show="mar.changdao > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">肠道消化</div>
|
||||
<div>
|
||||
<span class="num">{{ mar.changdao }}</span> <span class="unit">次</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con" v-show="mar.mianyili > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">免疫力</div>
|
||||
<div>
|
||||
<span class="num">{{ mar.mianyili }}</span> <span class="unit">次</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title-con" style="margin-top: 18px">
|
||||
<div class="title">用药统计</div>
|
||||
<div class="operate-btn-con">
|
||||
<el-radio-group v-model="radioVal" @change="handleRadioChange">
|
||||
<el-radio-button label="用药次数柱状图" />
|
||||
<el-radio-button label="用药次数折线图" />
|
||||
<el-radio-button label="按天用药明细" />
|
||||
<el-radio-button label="用药分类明细" />
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-con">
|
||||
<div v-show="radioVal === '用药次数柱状图'" class="chart" id="chartBar" style="height: calc(100% - 225px); margin-top: -10px"></div>
|
||||
<div v-show="radioVal === '用药次数折线图'" class="chart" id="chartLine" style="height: calc(100% - 225px); margin-top: -10px"></div>
|
||||
<el-table v-show="radioVal === '按天用药明细'" v-loading="loading" :data="mar.tableMarList" height="calc(100% - 245px)">
|
||||
<el-table-column label="序号" width="50" type="index" align="center">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.$index + 1 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="用药日期" align="center" prop="time" />
|
||||
<el-table-column prop="detail" label="用药明细" v-if="queryParams.type === 1">
|
||||
<template #default="scope">
|
||||
<span v-html="formatMultiLineData(scope.row.detail)"></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-table v-show="radioVal === '用药分类明细'" v-loading="loading" :data="mar.marMapList" height="calc(100% - 245px)">
|
||||
<el-table-column label="序号" width="50" type="index" align="center">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.$index + 1 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="药品名称" align="center" prop="time" />
|
||||
<el-table-column label="用药次数" align="center" prop="value" />
|
||||
<el-table-column label="用药总量" align="center" prop="dosage" />
|
||||
<el-table-column label="单位" align="center" prop="unit" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="CreditAnalysis">
|
||||
import dayjs from 'dayjs'
|
||||
import * as echarts from 'echarts'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import yearPicker from '@/components/YearPicker/index.vue'
|
||||
import { getMarAnalysis } from '@/api/health/statisticAnalysis'
|
||||
import { listPerson, getPerson } from '@/api/health/person'
|
||||
import { listHealthRecord } from '@/api/health/healthRecord'
|
||||
const { proxy } = getCurrentInstance()
|
||||
const { deal_type, account_type, deal_category } = proxy.useDict('deal_type', 'account_type', 'deal_category')
|
||||
const personList = ref([])
|
||||
const healthRecordList = ref([])
|
||||
|
||||
const dateValue = ref({ startYear: 2000, endYear: new Date().getFullYear() })
|
||||
const showYearValue = ref({ startShowYear: '', endShowYear: '' })
|
||||
const updateStatisticYear = (startYear, endYear) => {
|
||||
queryParams.value.time = [new Date(startYear, 0, 1), new Date(endYear, 0, 1)]
|
||||
if (endYear - startYear > 5) {
|
||||
ElMessage.warning('时间跨度不能大于5年，默认选择开始日期的5年')
|
||||
queryParams.value.time = [new Date(startYear, 0, 1), new Date(startYear + 5, 0, 1)]
|
||||
}
|
||||
}
|
||||
|
||||
const dates = [{ value: 1, label: '日' }]
|
||||
const accountsList = ref([])
|
||||
const loading = ref(true)
|
||||
const total = ref(0)
|
||||
const radioVal = ref('用药次数柱状图')
|
||||
const dateValidate = (rules, value, callback) => {
|
||||
const dateType = rules.dateType || 'days'
|
||||
const num = rules.num || 31
|
||||
const dateString = rules.dateString || '天'
|
||||
const message = rules.message || `时间跨度不能超过${num}${dateString}`
|
||||
|
||||
if (value && value.length === 2) {
|
||||
const start = value[0]
|
||||
const end = value[1]
|
||||
if (dayjs(end).diff(dayjs(start), dateType) > num) {
|
||||
queryParams.value.time = [start, dayjs(start).add(23, 'months')]
|
||||
ElMessage.warning(message)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const data = reactive({
|
||||
queryParams: {
|
||||
type: 1,
|
||||
time: null,
|
||||
id: null,
|
||||
dataType: '1',
|
||||
dealType: null,
|
||||
dealCategory: null
|
||||
},
|
||||
queryPersonParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 1000
|
||||
},
|
||||
queryHealthRecordParams: {
|
||||
pageNum: 1,
|
||||
personId: null,
|
||||
state: '1',
|
||||
pageSize: 1000
|
||||
},
|
||||
rules: {
|
||||
time: [{ validator: dateValidate, dateType: 'months', num: 23, dateRange: '月', message: '时间跨度不能大于24个月，默认选择开始日期的24个月' }]
|
||||
}
|
||||
})
|
||||
|
||||
const { queryParams, rules, queryPersonParams, queryHealthRecordParams } = toRefs(data)
|
||||
|
||||
const handleRecordChange = (recordId) => {
|
||||
queryParams.value.recordId = recordId
|
||||
getList()
|
||||
}
|
||||
|
||||
const handlePersonChange = (personId) => {
|
||||
queryHealthRecordParams.personId = personId
|
||||
listHealthRecord(queryHealthRecordParams).then((response) => {
|
||||
healthRecordList.value = response.rows
|
||||
if (response.rows.length > 0) {
|
||||
queryParams.value.recordId = response.rows[0].id
|
||||
getList()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/** 查询成员管理列表 */
|
||||
function getPersonList() {
|
||||
listPerson(queryPersonParams.value).then((response) => {
|
||||
personList.value = response.rows
|
||||
if (response.rows.length > 0) {
|
||||
queryParams.value.id = response.rows[0].id
|
||||
queryHealthRecordParams.personId = response.rows[0].id
|
||||
listHealthRecord(queryHealthRecordParams).then((res) => {
|
||||
healthRecordList.value = res.rows
|
||||
if (res.rows.length > 0) {
|
||||
queryParams.value.recordId = res.rows[0].id
|
||||
getList()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const today = new Date()
|
||||
const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2)
|
||||
const start = dayjs(end).add(-60, 'day')
|
||||
queryParams.value.time = [start, end]
|
||||
const handleTimeChange = (type) => {
|
||||
queryParams.value.time = null
|
||||
if (type === 1) {
|
||||
const today = new Date()
|
||||
const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2)
|
||||
const start = dayjs(end).add(-60, 'day')
|
||||
queryParams.value.time = [start, end]
|
||||
} else if (type === 2) {
|
||||
const today = new Date()
|
||||
const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
|
||||
const start = dayjs(end).add(-11, 'months')
|
||||
queryParams.value.time = [start, end]
|
||||
} else if (type === 3) {
|
||||
const today = new Date()
|
||||
const endYear = today.getFullYear()
|
||||
queryParams.value.time = [new Date(endYear - 2, 0, 1), new Date(endYear, 0, 1)]
|
||||
showYearValue.value = { startShowYear: endYear - 2, endShowYear: endYear }
|
||||
}
|
||||
getList()
|
||||
}
|
||||
function formatMultiLineData(data) {
|
||||
if (data != null) {
|
||||
return data.replace(/<br\/>/g, '<br/>')
|
||||
}
|
||||
}
|
||||
const disabledDateFun = (time) => {
|
||||
const arr = [0, 30, 365, 365 * 5]
|
||||
const days = arr[queryParams.value.type]
|
||||
|
||||
if (firstChooseDate.value) {
|
||||
const one = days * 24 * 3600 * 1000
|
||||
const minTime = firstChooseDate.value - one
|
||||
const maxTime = firstChooseDate.value + one
|
||||
const startTime = minTime
|
||||
const endTime = maxTime > Date.now() - 8.64e7 ? Date.now() - 8.64e7 : maxTime
|
||||
return time.getTime() > endTime || time.getTime() < startTime
|
||||
} else {
|
||||
return time.getTime() > Date.now() - 8.64e7
|
||||
}
|
||||
}
|
||||
|
||||
const firstChooseDate = ref('')
|
||||
const calendarChange = (val) => {
|
||||
firstChooseDate.value = val[0].getTime()
|
||||
if (val[1]) firstChooseDate.value = ''
|
||||
}
|
||||
|
||||
const mar = ref({})
|
||||
const chartData = ref({
|
||||
name: [],
|
||||
value1: []
|
||||
})
|
||||
|
||||
function getList() {
|
||||
loading.value = true
|
||||
chartData.value = { name: [], value1: [] }
|
||||
const { type, time, id, recordId } = queryParams.value
|
||||
let formatValue = 'YYYY-MM-DD'
|
||||
if (type === 1) {
|
||||
formatValue = 'YYYY-MM-DD'
|
||||
} else if (type === 2) {
|
||||
formatValue = 'YYYY-MM'
|
||||
} else {
|
||||
formatValue = 'YYYY'
|
||||
}
|
||||
const params = {
|
||||
type,
|
||||
startTime: time && time.length > 0 ? dayjs(time[0]).format(formatValue) : '',
|
||||
endTime: time && time.length > 0 ? dayjs(time[1]).format(formatValue) : '',
|
||||
id,
|
||||
recordId
|
||||
}
|
||||
getMarAnalysis(params).then((response) => {
|
||||
loading.value = false
|
||||
mar.value = { ...response.data }
|
||||
mar.value.marList.map((item) => {
|
||||
return {
|
||||
name: item.time,
|
||||
value: item.value
|
||||
}
|
||||
})
|
||||
response.data.marList.map((item) => {
|
||||
chartData.value.name.push(item.time)
|
||||
chartData.value.value1.push(item.value)
|
||||
})
|
||||
handleRadioChange(currentType.value)
|
||||
})
|
||||
}
|
||||
|
||||
function handleQuery() {
|
||||
getList()
|
||||
}
|
||||
|
||||
function resetQuery() {
|
||||
proxy.resetForm('queryRef')
|
||||
queryParams.value.id = null
|
||||
const today = new Date()
|
||||
const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2)
|
||||
const start = dayjs(end).add(-60, 'day')
|
||||
queryParams.value.time = [start, end]
|
||||
total.value = 0
|
||||
getPersonList()
|
||||
}
|
||||
|
||||
const drawBar = (data) => {
|
||||
if (document.getElementById('chartBar') === null) {
|
||||
return
|
||||
}
|
||||
echarts.dispose(document.getElementById('chartBar'))
|
||||
const myChart = echarts.init(document.getElementById('chartBar'))
|
||||
|
||||
const option = {
|
||||
legend: {
|
||||
// 图示例样式
|
||||
show: true,
|
||||
top: 50,
|
||||
right: 50,
|
||||
itemGap: 20
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
formatter: function (params) {
|
||||
return params[0].name + '<br>' + '用药：' + params[0].value + '次'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: data.name,
|
||||
axisTick: {
|
||||
alignWithLabel: true // 刻度线是否与标签对齐，默认false
|
||||
},
|
||||
// 设置 X 轴线条粗细
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 1, // 根据需求调整数值大小，单位是像素
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
// min: 1, // 设置 y 轴的最小值为 0
|
||||
// max: 16, // 设置 y 轴的最大值为 100
|
||||
interval: 1, //设置y轴刻度间隔
|
||||
axisTick: {
|
||||
show: true // 默认为true，如果要隐藏，则改为 false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: data.value1,
|
||||
type: 'bar',
|
||||
barWidth: 10, // 根据需求调整数值大小，单位是像素
|
||||
itemStyle: {
|
||||
// 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
|
||||
color: function (params) {
|
||||
// 这里可以根据需要设置不同的颜色，比如根据数据值
|
||||
if (params.data < 4) {
|
||||
return '#37b328'
|
||||
} else if (params.data >= 4 && params.data < 8) {
|
||||
return '#ff00ff'
|
||||
} else if (params.data >= 8 && params.data < 12) {
|
||||
return '#ff0066'
|
||||
} else if (params.data >= 12 && params.data < 15) {
|
||||
return '#ff0000'
|
||||
} else if (params.data >= 15) {
|
||||
return '#990000' // 数据在50到99之间为蓝色
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
// 添加点击事件的处理函数
|
||||
emphasis: {
|
||||
// itemStyle: {
|
||||
// color: '#2283cf',
|
||||
// barWidth: 20 // 根据需求调整数值大小，单位是像素
|
||||
// },
|
||||
barWidth: 24 // 根据需求调整数值大小，单位是像素
|
||||
}
|
||||
}
|
||||
|
||||
myChart.setOption(option)
|
||||
}
|
||||
|
||||
const drawLine = (data) => {
|
||||
if (document.getElementById('chartLine') === null) {
|
||||
return
|
||||
}
|
||||
echarts.dispose(document.getElementById('chartLine'))
|
||||
const myChart = echarts.init(document.getElementById('chartLine'))
|
||||
|
||||
const option = {
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
formatter: function (params) {
|
||||
return params[0].name + '<br>' + '用药：' + params[0].value + '次'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: data.name,
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
// min: 1, // 设置 y 轴的最小值为 0
|
||||
// max: 16, // 设置 y 轴的最大值为 100
|
||||
interval: 1, //设置y轴刻度间隔
|
||||
axisTick: {
|
||||
show: true
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: data.value1,
|
||||
type: 'line',
|
||||
lineStyle: {
|
||||
color: '#4181c9'
|
||||
},
|
||||
itemStyle: {
|
||||
// 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
|
||||
color: function (params) {
|
||||
// 这里可以根据需要设置不同的颜色，比如根据数据值
|
||||
if (params.data < 4) {
|
||||
return '#37b328'
|
||||
} else if (params.data >= 4 && params.data < 8) {
|
||||
return '#ff00ff'
|
||||
} else if (params.data >= 8 && params.data < 12) {
|
||||
return '#ff0066'
|
||||
} else if (params.data >= 12 && params.data < 15) {
|
||||
return '#ff0000'
|
||||
} else if (params.data >= 15) {
|
||||
return '#990000' // 数据在50到99之间为蓝色
|
||||
}
|
||||
}
|
||||
},
|
||||
smooth: true,
|
||||
symbol: 'emptyCircle',
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(65,129,201, 0.70)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(65,129,201, 0.10)'
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: 'rgba(65,129,201, 0.10)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
myChart.setOption(option)
|
||||
}
|
||||
|
||||
const currentType = ref('用药次数柱状图')
|
||||
const handleRadioChange = (type) => {
|
||||
currentType.value = type
|
||||
switch (type) {
|
||||
case '用药次数柱状图':
|
||||
drawBar(chartData.value)
|
||||
break
|
||||
case '用药次数折线图':
|
||||
drawLine(chartData.value)
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
getPersonList()
|
||||
</script>
|
||||
BIN
src/views/health/healthAnalysis/assets/completionTickets.png
Normal file
BIN
src/views/health/healthAnalysis/assets/completionTickets.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
BIN
src/views/health/healthAnalysis/assets/completionTime.png
Normal file
BIN
src/views/health/healthAnalysis/assets/completionTime.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
BIN
src/views/health/healthAnalysis/assets/four.png
Normal file
BIN
src/views/health/healthAnalysis/assets/four.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
src/views/health/healthAnalysis/assets/one.png
Normal file
BIN
src/views/health/healthAnalysis/assets/one.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
src/views/health/healthAnalysis/assets/positiveRating.png
Normal file
BIN
src/views/health/healthAnalysis/assets/positiveRating.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
src/views/health/healthAnalysis/assets/three.png
Normal file
BIN
src/views/health/healthAnalysis/assets/three.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
BIN
src/views/health/healthAnalysis/assets/ticketSum.png
Normal file
BIN
src/views/health/healthAnalysis/assets/ticketSum.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
src/views/health/healthAnalysis/assets/two.png
Normal file
BIN
src/views/health/healthAnalysis/assets/two.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
415
src/views/health/healthAnalysis/index.vue
Normal file
415
src/views/health/healthAnalysis/index.vue
Normal file
@@ -0,0 +1,415 @@
|
||||
<template>
|
||||
<div class="app-container" style="overflow: auto">
|
||||
<div class="header-title" ref="searchHeightRef"> 健康总览</div>
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<img src="./assets/one.png" alt="" />
|
||||
<div class="info-sum">
|
||||
<div class="title">成员总数</div>
|
||||
<div class="num">{{ 0 }}<span>人</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="./assets/ticketSum.png" alt="" />
|
||||
<div class="info-sum">
|
||||
<div class="title">档案总数</div>
|
||||
<div class="num">{{ 0 }}<span>份</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="./assets/completionTickets.png" alt="" />
|
||||
<div class="info-sum">
|
||||
<div class="title">活动次数</div>
|
||||
<div class="num">{{ 0 }}<span>次</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="./assets/completionTime.png" alt="" />
|
||||
<div class="info-sum">
|
||||
<div class="title">就医次数</div>
|
||||
<div class="num">{{ investBalance }}<span>次</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<img src="./assets/one.png" alt="" />
|
||||
<div class="info-sum">
|
||||
<div class="title">医院数量</div>
|
||||
<div class="num">{{ unClearedOnlineDebt }}<span>个</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="./assets/ticketSum.png" alt="" />
|
||||
<div class="info-sum">
|
||||
<div class="title">大夫数量</div>
|
||||
<div class="num">{{ peopleLendHistory }}<span>个</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="./assets/completionTickets.png" alt="" />
|
||||
<div class="info-sum">
|
||||
<div class="title">用药次数</div>
|
||||
<div class="num">{{ creditBalance }}<span>次</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="./assets/completionTime.png" alt="" />
|
||||
<div class="info-sum">
|
||||
<div class="title">用药种类</div>
|
||||
<div class="num">{{ investBalance }}<span>种</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<img src="./assets/one.png" alt="" />
|
||||
<div class="info-sum">
|
||||
<div class="title">测量体温次数</div>
|
||||
<div class="num">{{ unClearedOnlineDebt }}<span>次</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="./assets/ticketSum.png" alt="" />
|
||||
<div class="info-sum">
|
||||
<div class="title">低烧次数（36.9~37.5℃）</div>
|
||||
<div class="num">{{ peopleLendHistory }}<span>次</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="./assets/completionTickets.png" alt="" />
|
||||
<div class="info-sum">
|
||||
<div class="title">中烧次数（37.5~38.5℃）</div>
|
||||
<div class="num">{{ creditBalance }}<span>次</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="./assets/completionTime.png" alt="" />
|
||||
<div class="info-sum">
|
||||
<div class="title">高烧次数（>=38.5℃）</div>
|
||||
<div class="num">{{ investBalance }}<span>次</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-title" ref="searchHeightRef"> 成员1信息</div>
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<img src="./assets/one.png" alt="" />
|
||||
<div class="info-sum">
|
||||
<div class="title">档案份数</div>
|
||||
<div class="num">{{ debitICount }}<span>份</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="./assets/ticketSum.png" alt="" />
|
||||
<div class="info-sum">
|
||||
<div class="title">就医次数</div>
|
||||
<div class="num">{{ debitIICount }}<span>次</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="./assets/completionTickets.png" alt="" />
|
||||
<div class="info-sum">
|
||||
<div class="title">总费用</div>
|
||||
<div class="num">{{ debitOnlineCount }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="./assets/completionTime.png" alt="" />
|
||||
<div class="info-sum">
|
||||
<div class="title">医院数量</div>
|
||||
<div class="num">{{ storedValueCardCount }}<span>个</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-con" ref="searchHeightRef">
|
||||
<div class="item">
|
||||
<img src="./assets/one.png" alt="" />
|
||||
<div class="info-sum">
|
||||
<div class="title">大夫数量</div>
|
||||
<div class="num">{{ otherDebitCount }}<span>次</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="./assets/ticketSum.png" alt="" />
|
||||
<div class="info-sum">
|
||||
<div class="title">用药次数</div>
|
||||
<div class="num">{{ debitTotalBalance }}<span>次</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="./assets/completionTickets.png" alt="" />
|
||||
<div class="info-sum">
|
||||
<div class="title">用药种类</div>
|
||||
<div class="num">{{ debitBalance }}<span>元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="./assets/completionTime.png" alt="" />
|
||||
<div class="info-sum">
|
||||
<div class="title">高烧天数（>=38.5℃）</div>
|
||||
<div class="num">{{ debitOnlineBalance }}<span>天</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="facilityType">
|
||||
import {
|
||||
getPosAccountsInfo,
|
||||
getInvestAccountsInfo,
|
||||
getCreditReportInfo,
|
||||
getLendAccountsInfo,
|
||||
getCreditAccountsInfo,
|
||||
getDebitAccountsInfo
|
||||
} from '@/api/invest/accountAnalysis.js'
|
||||
|
||||
//POS机信息
|
||||
const posCount = ref(0) //POS机总数
|
||||
const currentMonthAmount = ref(0) //当月刷卡金额
|
||||
const currentMonthCommission = ref(0) //当月刷卡手续费
|
||||
const currentMonthCount = ref(0) //当月刷卡次数
|
||||
const currentYearAmount = ref(0) //当年刷卡金额
|
||||
const currentYearCommission = ref(0) //当年刷卡手续费
|
||||
const currentYearCount = ref(0) //当年刷卡次数
|
||||
const accumulateAmount = ref(0) //累计刷卡金额
|
||||
const accumulateCommission = ref(0) //累计刷卡手续费
|
||||
const accumulateCount = ref(0) //累计刷卡次数
|
||||
|
||||
//投资账户信息
|
||||
const stocksCount = ref(0) //股票账户
|
||||
const futuresCount = ref(0) //期货账户
|
||||
const currentMonthInvest = ref(0) //当月收益
|
||||
const currentMonthIncome = ref(0) //当月盈利
|
||||
const currentMonthExpenses = ref(0) //当月亏损
|
||||
const futuresIncome = ref(0) //期货收益
|
||||
const totalIncome = ref(0) //投资总收益
|
||||
const stocksIncome = ref(0) //股票收益
|
||||
const investBalance = ref(0) //投资账户余额
|
||||
|
||||
//储蓄账户信息
|
||||
const debitCount = ref(0) //储蓄卡总数
|
||||
const debitICount = ref(0) //I类储蓄卡总数
|
||||
const debitIICount = ref(0) //II类储蓄卡总数
|
||||
const debitOnlineCount = ref(0) //网络账户总数
|
||||
const storedValueCardCount = ref(0) //储值卡总数
|
||||
const otherDebitCount = ref(0) //其他账户数
|
||||
const storedValueCardBalance = ref(0) //储值卡余额
|
||||
const housingFundBalance = ref(0) //公积金余额
|
||||
const medicalBalance = ref(0) //医保余额
|
||||
const debitOnlineBalance = ref(0) //网络账户余额
|
||||
const personalPensionBalance = ref(0) //个人养老金余额
|
||||
const otherDebitBalance = ref(0) //其他余额
|
||||
const debitBalance = ref(0) //储蓄卡余额
|
||||
const debitTotalBalance = ref(0) //储蓄账户余额
|
||||
|
||||
//借贷账户信息
|
||||
const peopleLendHistory = ref(0) //人情借贷余额
|
||||
const peopleLendCount = ref(0) //人情账户
|
||||
const onlineLendCount = ref(0) //贷款账户
|
||||
const unclearedOnlineDebtCount = ref(0) //未结清贷款账户数
|
||||
const unClearedOnlineDebt = ref(0) //未结清贷款本息
|
||||
const unClearedOnlineDebtPrinciple = ref(0) //未结清贷款本金
|
||||
const unClearedOnlineDebtInterest = ref(0) //未结清贷款利息
|
||||
const clearedOnlineDebtCount = ref(0) //已结清贷款账户数
|
||||
const clearedOnlineDebt = ref(0) //已结清贷款本息
|
||||
const clearedOnlineDebtPrinciple = ref(0) //已结清贷款本金
|
||||
const clearedOnlineDebtInterest = ref(0) //已结清贷款利息
|
||||
const dueOnlineDebt = ref(0) //本月应还贷款
|
||||
const repaidOnlineDebt = ref(0) //本月已还贷款
|
||||
const leftOnlineDebt = ref(0) //本月剩余应还贷款
|
||||
|
||||
//信用卡信息
|
||||
const creditInstallmentHistory = ref(0)
|
||||
const creditCount = ref(0) //信用卡数量
|
||||
const currentCreditBill = ref(0)
|
||||
const creditInstallment = ref(0)
|
||||
const creditLimit = ref(0) //信用卡额度
|
||||
const lastSixMonthUsedLimit = ref(0) //近6月使用额度
|
||||
const lastSixMonthUsedRate = ref(0) //近6月使用率
|
||||
const lastMonthUsedLimit = ref(0) //上月已用额度
|
||||
const lastMonthUsedRate = ref(0) //上月使用率
|
||||
const creditBalance = ref(0) //信用卡余额
|
||||
const creditAvailableLimit = ref(0) //信用卡可用额度
|
||||
const creditBillRate = ref(0) //信用卡使用率
|
||||
const unclearedCreditInstallmentCount = ref(0) //未结清分期数量
|
||||
const unclearedCreditInstallment = ref(0) //未结清分期本息
|
||||
const unclearedCreditInstallmentPrinciple = ref(0) //未结清分期本金
|
||||
const unclearedCreditInstallmentInterest = ref(0) //未结清分期利息
|
||||
const clearedCreditInstallmentCount = ref(0) //已结清分期数量
|
||||
const clearedCreditInstallmentDebt = ref(0) //已结清分期本息
|
||||
const clearedCreditInstallmentPrinciple = ref(0) //已结清分期本金
|
||||
const clearedCreditInstallmentInterest = ref(0) //已结清分期利息
|
||||
|
||||
//征信报告信息
|
||||
const lastOneMonths = ref(0) //近1月硬查询
|
||||
const lastTwoMonths = ref(0) //近2月硬查询
|
||||
const lastThreeMonths = ref(0) //近3月硬查询
|
||||
const lastSixMonths = ref(0) //近6月硬查询
|
||||
const lastOneYears = ref(0) //近1年硬查询
|
||||
const lastTwoYears = ref(0) //近2年硬查询
|
||||
const lastAllYears = ref(0) //所有硬查询
|
||||
const lastSixMonthQueryCount = ref(0) //近6月个人查询
|
||||
const lastSixMonthsAfterLoan = ref(0) //近6月贷后管理
|
||||
const lastTwoYearsAfterLoan = ref(0) //近2年贷后管理
|
||||
const totalAfterLoan = ref(0) //总贷后管理
|
||||
|
||||
const getInvestAccountsInfoData = () => {
|
||||
getInvestAccountsInfo().then((res) => {
|
||||
stocksCount.value = res.data.stocksCount
|
||||
futuresCount.value = res.data.futuresCount
|
||||
totalIncome.value = res.data.totalIncome
|
||||
futuresIncome.value = res.data.futuresIncome
|
||||
stocksIncome.value = res.data.stocksIncome
|
||||
investBalance.value = res.data.investBalance
|
||||
currentMonthInvest.value = res.data.currentMonthInvest
|
||||
currentMonthIncome.value = res.data.currentMonthIncome
|
||||
currentMonthExpenses.value = res.data.currentMonthExpenses
|
||||
})
|
||||
}
|
||||
|
||||
const getPosAccountsInfoData = () => {
|
||||
getPosAccountsInfo().then((res) => {
|
||||
posCount.value = res.data.posCount
|
||||
currentMonthAmount.value = res.data.currentMonthAmount
|
||||
currentMonthCommission.value = res.data.currentMonthCommission
|
||||
currentMonthCount.value = res.data.currentMonthCount
|
||||
currentYearAmount.value = res.data.currentYearAmount
|
||||
currentYearCommission.value = res.data.currentYearCommission
|
||||
currentYearCount.value = res.data.currentYearCount
|
||||
accumulateAmount.value = res.data.accumulateAmount
|
||||
accumulateCommission.value = res.data.accumulateCommission
|
||||
accumulateCount.value = res.data.accumulateCount
|
||||
})
|
||||
}
|
||||
|
||||
const getCreditAccountsInfoData = () => {
|
||||
getCreditAccountsInfo().then((res) => {
|
||||
creditCount.value = res.data.creditCount
|
||||
currentCreditBill.value = res.data.currentCreditBill
|
||||
creditInstallment.value = res.data.creditInstallment
|
||||
creditLimit.value = res.data.creditLimit
|
||||
lastSixMonthUsedLimit.value = res.data.lastSixMonthUsedLimit
|
||||
lastSixMonthUsedRate.value = res.data.lastSixMonthUsedRate
|
||||
lastMonthUsedLimit.value = res.data.lastMonthUsedLimit
|
||||
lastMonthUsedRate.value = res.data.lastMonthUsedRate
|
||||
creditBalance.value = res.data.creditBalance
|
||||
creditAvailableLimit.value = res.data.creditAvailableLimit
|
||||
creditBillRate.value = res.data.creditBillRate
|
||||
unclearedCreditInstallmentCount.value = res.data.unclearedCreditInstallmentCount
|
||||
unclearedCreditInstallment.value = res.data.unclearedCreditInstallment
|
||||
unclearedCreditInstallmentPrinciple.value = res.data.unclearedCreditInstallmentPrinciple
|
||||
unclearedCreditInstallmentInterest.value = res.data.unclearedCreditInstallmentInterest
|
||||
clearedCreditInstallmentCount.value = res.data.clearedCreditInstallmentCount
|
||||
clearedCreditInstallmentDebt.value = res.data.clearedCreditInstallmentDebt
|
||||
clearedCreditInstallmentPrinciple.value = res.data.clearedCreditInstallmentPrinciple
|
||||
clearedCreditInstallmentInterest.value = res.data.clearedCreditInstallmentInterest
|
||||
})
|
||||
}
|
||||
const getLendAccountsInfoData = () => {
|
||||
getLendAccountsInfo().then((res) => {
|
||||
peopleLendCount.value = res.data.peopleLendCount
|
||||
onlineLendCount.value = res.data.onlineLendCount
|
||||
unClearedOnlineDebt.value = res.data.unClearedOnlineDebt
|
||||
creditInstallmentHistory.value = res.data.creditInstallmentHistory
|
||||
peopleLendHistory.value = res.data.peopleLendHistory
|
||||
unclearedOnlineDebtCount.value = res.data.unclearedOnlineDebtCount
|
||||
clearedOnlineDebtCount.value = res.data.clearedOnlineDebtCount
|
||||
clearedOnlineDebt.value = res.data.clearedOnlineDebt
|
||||
dueOnlineDebt.value = res.data.dueOnlineDebt
|
||||
repaidOnlineDebt.value = res.data.repaidOnlineDebt
|
||||
leftOnlineDebt.value = res.data.leftOnlineDebt
|
||||
unClearedOnlineDebtPrinciple.value = res.data.unClearedOnlineDebtPrinciple
|
||||
unClearedOnlineDebtInterest.value = res.data.unClearedOnlineDebtInterest
|
||||
clearedOnlineDebtPrinciple.value = res.data.clearedOnlineDebtPrinciple
|
||||
clearedOnlineDebtInterest.value = res.data.clearedOnlineDebtInterest
|
||||
})
|
||||
}
|
||||
const getCreditReportInfoData = () => {
|
||||
getCreditReportInfo().then((res) => {
|
||||
lastOneMonths.value = res.data.lastOneMonths
|
||||
lastTwoMonths.value = res.data.lastTwoMonths
|
||||
lastThreeMonths.value = res.data.lastThreeMonths
|
||||
lastSixMonths.value = res.data.lastSixMonths
|
||||
lastOneYears.value = res.data.lastOneYears
|
||||
lastTwoYears.value = res.data.lastTwoYears
|
||||
lastAllYears.value = res.data.lastAllYears
|
||||
lastSixMonthQueryCount.value = res.data.lastSixMonthQueryCount
|
||||
lastSixMonthsAfterLoan.value = res.data.lastSixMonthsAfterLoan
|
||||
lastTwoYearsAfterLoan.value = res.data.lastTwoYearsAfterLoan
|
||||
totalAfterLoan.value = res.data.totalAfterLoan
|
||||
})
|
||||
}
|
||||
const getDebitAccountsInfoData = () => {
|
||||
getDebitAccountsInfo().then((res) => {
|
||||
debitCount.value = res.data.debitCount
|
||||
debitICount.value = res.data.debitICount
|
||||
debitIICount.value = res.data.debitIICount
|
||||
debitOnlineCount.value = res.data.debitOnlineCount
|
||||
storedValueCardCount.value = res.data.storedValueCardCount
|
||||
debitBalance.value = res.data.debitBalance
|
||||
debitTotalBalance.value = res.data.debitTotalBalance
|
||||
debitOnlineBalance.value = res.data.debitOnlineBalance
|
||||
storedValueCardBalance.value = res.data.storedValueCardBalance
|
||||
housingFundBalance.value = res.data.housingFundBalance
|
||||
medicalBalance.value = res.data.medicalBalance
|
||||
personalPensionBalance.value = res.data.personalPensionBalance
|
||||
otherDebitBalance.value = res.data.otherDebitBalance
|
||||
otherDebitCount.value = res.data.otherDebitCount
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getInvestAccountsInfoData()
|
||||
getPosAccountsInfoData()
|
||||
getDebitAccountsInfoData()
|
||||
getCreditAccountsInfoData()
|
||||
getLendAccountsInfoData()
|
||||
getCreditReportInfoData()
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.app-container {
|
||||
.header-con {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.item {
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
margin: 30px 60px 30px 60px;
|
||||
.title {
|
||||
margin-left: 20px;
|
||||
color: rgb(133, 133, 148);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.num {
|
||||
margin-left: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
img {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
.header-title {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 3px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
680
src/views/health/healthStatistic/index.vue
Normal file
680
src/views/health/healthStatistic/index.vue
Normal file
@@ -0,0 +1,680 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="search-con">
|
||||
<div class="title">查询条件</div>
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
|
||||
<el-form-item label="人员姓名" prop="id">
|
||||
<el-select v-model="queryParams.id" placeholder="请选择人员姓名" @change="handlePersonChange">
|
||||
<el-option v-for="person in personList" :key="person.id" :label="person.name" :value="person.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="健康档案" prop="recordId">
|
||||
<el-select v-model="queryParams.recordId" placeholder="请选择健康档案" @change="handleRecordChange">
|
||||
<el-option v-for="health in healthRecordList" :key="health.id" :label="health.name" :value="health.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用药日期" prop="time" v-if="queryParams.type === 1">
|
||||
<el-date-picker
|
||||
v-model="queryParams.time"
|
||||
type="daterange"
|
||||
range-separator="~"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
format="YYYY-MM-DD"
|
||||
@calendar-change="calendarChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="" prop="time" v-if="queryParams.type === 2">
|
||||
<el-date-picker
|
||||
v-model="queryParams.time"
|
||||
type="monthrange"
|
||||
range-separator="~"
|
||||
format="YYYY-MM"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
:disabled-date="disabledDateFun"
|
||||
@calendar-change="calendarChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="" prop="time" v-if="queryParams.type === 3">
|
||||
<yearPicker
|
||||
v-model="queryParams.time"
|
||||
ref="statisticPicker"
|
||||
labelText="选择年份"
|
||||
:initYear="dateValue"
|
||||
:showYear="showYearValue"
|
||||
:maxLength="5"
|
||||
sp="~"
|
||||
@updateTimeRange="updateStatisticYear"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="search-btn-con">
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-con" style="height: calc(100% - 1.45rem)">
|
||||
<div class="summary-con" style="height: 115px">
|
||||
<div class="right-con" v-show="mar.marCategoryCount > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">用药种类</div>
|
||||
<div>
|
||||
<span class="num">{{ mar.marCategoryCount }}</span
|
||||
><span class="unit">种</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con" v-show="mar.marCount > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">用药次数</div>
|
||||
<div>
|
||||
<span class="num">{{ mar.marCount }}</span
|
||||
><span class="unit">次 </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right-con" v-show="mar.qingre > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">清热解毒</div>
|
||||
<div>
|
||||
<span class="num">{{ mar.qingre }}</span
|
||||
><span class="unit">次</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con" v-show="mar.zhike > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">止咳化痰平喘</div>
|
||||
<div>
|
||||
<span class="num">{{ mar.zhike }}</span
|
||||
><span class="unit">次</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con" v-show="mar.wuhua > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">雾化消炎</div>
|
||||
<div>
|
||||
<span class="num">{{ mar.wuhua }}</span
|
||||
><span class="unit">次</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con" v-show="mar.kangjun > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">抗菌消炎</div>
|
||||
<div>
|
||||
<span class="num">{{ mar.kangjun }}</span> <span class="unit">次</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary-con" v-show="mar.kangguomin > 0 || mar.kangbingdu > 0 || mar.tuishao > 0 || mar.biyan > 0 || mar.changdao > 0" style="height: 115px">
|
||||
<div class="right-con" v-show="mar.kangguomin > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">抗过敏</div>
|
||||
<div>
|
||||
<span class="num">{{ mar.kangguomin }}</span> <span class="unit">次</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con" v-show="mar.kangbingdu > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">抗病毒</div>
|
||||
<div>
|
||||
<span class="num">{{ mar.kangbingdu }}</span
|
||||
><span class="unit">次</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con" v-show="mar.tuishao > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">退烧用药</div>
|
||||
<div>
|
||||
<span class="num">{{ mar.tuishao }}</span
|
||||
><span class="unit">次</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con" v-show="mar.biyan > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">鼻炎腺样体</div>
|
||||
<div>
|
||||
<span class="num">{{ mar.biyan }}</span> <span class="unit">次</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con" v-show="mar.changdao > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">肠道消化</div>
|
||||
<div>
|
||||
<span class="num">{{ mar.changdao }}</span> <span class="unit">次</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con" v-show="mar.mianyili > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">免疫力</div>
|
||||
<div>
|
||||
<span class="num">{{ mar.mianyili }}</span> <span class="unit">次</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title-con" style="margin-top: 18px">
|
||||
<div class="title">用药统计</div>
|
||||
<div class="operate-btn-con">
|
||||
<el-radio-group v-model="radioVal" @change="handleRadioChange">
|
||||
<el-radio-button label="用药次数柱状图" />
|
||||
<el-radio-button label="用药次数折线图" />
|
||||
<el-radio-button label="按天用药明细" />
|
||||
<el-radio-button label="用药分类明细" />
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-con">
|
||||
<div v-show="radioVal === '用药次数柱状图'" class="chart" id="chartBar" style="height: calc(100% - 225px); margin-top: -10px"></div>
|
||||
<div v-show="radioVal === '用药次数折线图'" class="chart" id="chartLine" style="height: calc(100% - 225px); margin-top: -10px"></div>
|
||||
<el-table v-show="radioVal === '按天用药明细'" v-loading="loading" :data="mar.tableMarList" height="calc(100% - 245px)">
|
||||
<el-table-column label="序号" width="50" type="index" align="center">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.$index + 1 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="用药日期" align="center" prop="time" />
|
||||
<el-table-column prop="detail" label="用药明细" v-if="queryParams.type === 1">
|
||||
<template #default="scope">
|
||||
<span v-html="formatMultiLineData(scope.row.detail)"></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-table v-show="radioVal === '用药分类明细'" v-loading="loading" :data="mar.marMapList" height="calc(100% - 245px)">
|
||||
<el-table-column label="序号" width="50" type="index" align="center">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.$index + 1 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="药品名称" align="center" prop="time" />
|
||||
<el-table-column label="用药次数" align="center" prop="value" />
|
||||
<el-table-column label="用药总量" align="center" prop="dosage" />
|
||||
<el-table-column label="单位" align="center" prop="unit" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="CreditAnalysis">
|
||||
import dayjs from 'dayjs'
|
||||
import * as echarts from 'echarts'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import yearPicker from '@/components/YearPicker/index.vue'
|
||||
import { getMarAnalysis } from '@/api/health/statisticAnalysis'
|
||||
import { listPerson, getPerson } from '@/api/health/person'
|
||||
import { listHealthRecord } from '@/api/health/healthRecord'
|
||||
const { proxy } = getCurrentInstance()
|
||||
const { deal_type, account_type, deal_category } = proxy.useDict('deal_type', 'account_type', 'deal_category')
|
||||
const personList = ref([])
|
||||
const healthRecordList = ref([])
|
||||
|
||||
const dateValue = ref({ startYear: 2000, endYear: new Date().getFullYear() })
|
||||
const showYearValue = ref({ startShowYear: '', endShowYear: '' })
|
||||
const updateStatisticYear = (startYear, endYear) => {
|
||||
queryParams.value.time = [new Date(startYear, 0, 1), new Date(endYear, 0, 1)]
|
||||
if (endYear - startYear > 5) {
|
||||
ElMessage.warning('时间跨度不能大于5年，默认选择开始日期的5年')
|
||||
queryParams.value.time = [new Date(startYear, 0, 1), new Date(startYear + 5, 0, 1)]
|
||||
}
|
||||
}
|
||||
|
||||
const dates = [{ value: 1, label: '日' }]
|
||||
const accountsList = ref([])
|
||||
const loading = ref(true)
|
||||
const total = ref(0)
|
||||
const radioVal = ref('用药次数柱状图')
|
||||
const dateValidate = (rules, value, callback) => {
|
||||
const dateType = rules.dateType || 'days'
|
||||
const num = rules.num || 31
|
||||
const dateString = rules.dateString || '天'
|
||||
const message = rules.message || `时间跨度不能超过${num}${dateString}`
|
||||
|
||||
if (value && value.length === 2) {
|
||||
const start = value[0]
|
||||
const end = value[1]
|
||||
if (dayjs(end).diff(dayjs(start), dateType) > num) {
|
||||
queryParams.value.time = [start, dayjs(start).add(23, 'months')]
|
||||
ElMessage.warning(message)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const data = reactive({
|
||||
queryParams: {
|
||||
type: 1,
|
||||
time: null,
|
||||
id: null,
|
||||
dataType: '1',
|
||||
dealType: null,
|
||||
dealCategory: null
|
||||
},
|
||||
queryPersonParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 1000
|
||||
},
|
||||
queryHealthRecordParams: {
|
||||
pageNum: 1,
|
||||
personId: null,
|
||||
state: '1',
|
||||
pageSize: 1000
|
||||
},
|
||||
rules: {
|
||||
time: [{ validator: dateValidate, dateType: 'months', num: 23, dateRange: '月', message: '时间跨度不能大于24个月，默认选择开始日期的24个月' }]
|
||||
}
|
||||
})
|
||||
|
||||
const { queryParams, rules, queryPersonParams, queryHealthRecordParams } = toRefs(data)
|
||||
|
||||
const handleRecordChange = (recordId) => {
|
||||
queryParams.value.recordId = recordId
|
||||
getList()
|
||||
}
|
||||
|
||||
const handlePersonChange = (personId) => {
|
||||
queryHealthRecordParams.personId = personId
|
||||
listHealthRecord(queryHealthRecordParams).then((response) => {
|
||||
healthRecordList.value = response.rows
|
||||
if (response.rows.length > 0) {
|
||||
queryParams.value.recordId = response.rows[0].id
|
||||
getList()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/** 查询成员管理列表 */
|
||||
function getPersonList() {
|
||||
listPerson(queryPersonParams.value).then((response) => {
|
||||
personList.value = response.rows
|
||||
if (response.rows.length > 0) {
|
||||
queryParams.value.id = response.rows[0].id
|
||||
queryHealthRecordParams.personId = response.rows[0].id
|
||||
listHealthRecord(queryHealthRecordParams).then((res) => {
|
||||
healthRecordList.value = res.rows
|
||||
if (res.rows.length > 0) {
|
||||
queryParams.value.recordId = res.rows[0].id
|
||||
getList()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const today = new Date()
|
||||
const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2)
|
||||
const start = dayjs(end).add(-60, 'day')
|
||||
queryParams.value.time = [start, end]
|
||||
const handleTimeChange = (type) => {
|
||||
queryParams.value.time = null
|
||||
if (type === 1) {
|
||||
const today = new Date()
|
||||
const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2)
|
||||
const start = dayjs(end).add(-60, 'day')
|
||||
queryParams.value.time = [start, end]
|
||||
} else if (type === 2) {
|
||||
const today = new Date()
|
||||
const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
|
||||
const start = dayjs(end).add(-11, 'months')
|
||||
queryParams.value.time = [start, end]
|
||||
} else if (type === 3) {
|
||||
const today = new Date()
|
||||
const endYear = today.getFullYear()
|
||||
queryParams.value.time = [new Date(endYear - 2, 0, 1), new Date(endYear, 0, 1)]
|
||||
showYearValue.value = { startShowYear: endYear - 2, endShowYear: endYear }
|
||||
}
|
||||
getList()
|
||||
}
|
||||
function formatMultiLineData(data) {
|
||||
if (data != null) {
|
||||
return data.replace(/<br\/>/g, '<br/>')
|
||||
}
|
||||
}
|
||||
const disabledDateFun = (time) => {
|
||||
const arr = [0, 30, 365, 365 * 5]
|
||||
const days = arr[queryParams.value.type]
|
||||
|
||||
if (firstChooseDate.value) {
|
||||
const one = days * 24 * 3600 * 1000
|
||||
const minTime = firstChooseDate.value - one
|
||||
const maxTime = firstChooseDate.value + one
|
||||
const startTime = minTime
|
||||
const endTime = maxTime > Date.now() - 8.64e7 ? Date.now() - 8.64e7 : maxTime
|
||||
return time.getTime() > endTime || time.getTime() < startTime
|
||||
} else {
|
||||
return time.getTime() > Date.now() - 8.64e7
|
||||
}
|
||||
}
|
||||
|
||||
const firstChooseDate = ref('')
|
||||
const calendarChange = (val) => {
|
||||
firstChooseDate.value = val[0].getTime()
|
||||
if (val[1]) firstChooseDate.value = ''
|
||||
}
|
||||
|
||||
const mar = ref({})
|
||||
const chartData = ref({
|
||||
name: [],
|
||||
value1: []
|
||||
})
|
||||
|
||||
function getList() {
|
||||
loading.value = true
|
||||
chartData.value = { name: [], value1: [] }
|
||||
const { type, time, id, recordId } = queryParams.value
|
||||
let formatValue = 'YYYY-MM-DD'
|
||||
if (type === 1) {
|
||||
formatValue = 'YYYY-MM-DD'
|
||||
} else if (type === 2) {
|
||||
formatValue = 'YYYY-MM'
|
||||
} else {
|
||||
formatValue = 'YYYY'
|
||||
}
|
||||
const params = {
|
||||
type,
|
||||
startTime: time && time.length > 0 ? dayjs(time[0]).format(formatValue) : '',
|
||||
endTime: time && time.length > 0 ? dayjs(time[1]).format(formatValue) : '',
|
||||
id,
|
||||
recordId
|
||||
}
|
||||
getMarAnalysis(params).then((response) => {
|
||||
loading.value = false
|
||||
mar.value = { ...response.data }
|
||||
mar.value.marList.map((item) => {
|
||||
return {
|
||||
name: item.time,
|
||||
value: item.value
|
||||
}
|
||||
})
|
||||
response.data.marList.map((item) => {
|
||||
chartData.value.name.push(item.time)
|
||||
chartData.value.value1.push(item.value)
|
||||
})
|
||||
handleRadioChange(currentType.value)
|
||||
})
|
||||
}
|
||||
|
||||
function handleQuery() {
|
||||
getList()
|
||||
}
|
||||
|
||||
function resetQuery() {
|
||||
proxy.resetForm('queryRef')
|
||||
queryParams.value.id = null
|
||||
const today = new Date()
|
||||
const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2)
|
||||
const start = dayjs(end).add(-60, 'day')
|
||||
queryParams.value.time = [start, end]
|
||||
total.value = 0
|
||||
getPersonList()
|
||||
}
|
||||
|
||||
const drawBar = (data) => {
|
||||
if (document.getElementById('chartBar') === null) {
|
||||
return
|
||||
}
|
||||
echarts.dispose(document.getElementById('chartBar'))
|
||||
const myChart = echarts.init(document.getElementById('chartBar'))
|
||||
|
||||
const option = {
|
||||
legend: {
|
||||
// 图示例样式
|
||||
show: true,
|
||||
top: 50,
|
||||
right: 50,
|
||||
itemGap: 20
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
formatter: function (params) {
|
||||
return params[0].name + '<br>' + '用药：' + params[0].value + '次'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: data.name,
|
||||
axisTick: {
|
||||
alignWithLabel: true // 刻度线是否与标签对齐，默认false
|
||||
},
|
||||
// 设置 X 轴线条粗细
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 1, // 根据需求调整数值大小，单位是像素
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
// min: 1, // 设置 y 轴的最小值为 0
|
||||
// max: 16, // 设置 y 轴的最大值为 100
|
||||
interval: 1, //设置y轴刻度间隔
|
||||
axisTick: {
|
||||
show: true // 默认为true，如果要隐藏，则改为 false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: data.value1,
|
||||
type: 'bar',
|
||||
barWidth: 10, // 根据需求调整数值大小，单位是像素
|
||||
itemStyle: {
|
||||
// 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
|
||||
color: function (params) {
|
||||
// 这里可以根据需要设置不同的颜色，比如根据数据值
|
||||
if (params.data < 4) {
|
||||
return '#37b328'
|
||||
} else if (params.data >= 4 && params.data < 8) {
|
||||
return '#ff00ff'
|
||||
} else if (params.data >= 8 && params.data < 12) {
|
||||
return '#ff0066'
|
||||
} else if (params.data >= 12 && params.data < 15) {
|
||||
return '#ff0000'
|
||||
} else if (params.data >= 15) {
|
||||
return '#990000' // 数据在50到99之间为蓝色
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
// 添加点击事件的处理函数
|
||||
emphasis: {
|
||||
// itemStyle: {
|
||||
// color: '#2283cf',
|
||||
// barWidth: 20 // 根据需求调整数值大小，单位是像素
|
||||
// },
|
||||
barWidth: 24 // 根据需求调整数值大小，单位是像素
|
||||
}
|
||||
}
|
||||
|
||||
myChart.setOption(option)
|
||||
}
|
||||
|
||||
const drawLine = (data) => {
|
||||
if (document.getElementById('chartLine') === null) {
|
||||
return
|
||||
}
|
||||
echarts.dispose(document.getElementById('chartLine'))
|
||||
const myChart = echarts.init(document.getElementById('chartLine'))
|
||||
|
||||
const option = {
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
formatter: function (params) {
|
||||
return params[0].name + '<br>' + '用药：' + params[0].value + '次'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: data.name,
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
// min: 1, // 设置 y 轴的最小值为 0
|
||||
// max: 16, // 设置 y 轴的最大值为 100
|
||||
interval: 1, //设置y轴刻度间隔
|
||||
axisTick: {
|
||||
show: true
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: data.value1,
|
||||
type: 'line',
|
||||
lineStyle: {
|
||||
color: '#4181c9'
|
||||
},
|
||||
itemStyle: {
|
||||
// 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
|
||||
color: function (params) {
|
||||
// 这里可以根据需要设置不同的颜色，比如根据数据值
|
||||
if (params.data < 4) {
|
||||
return '#37b328'
|
||||
} else if (params.data >= 4 && params.data < 8) {
|
||||
return '#ff00ff'
|
||||
} else if (params.data >= 8 && params.data < 12) {
|
||||
return '#ff0066'
|
||||
} else if (params.data >= 12 && params.data < 15) {
|
||||
return '#ff0000'
|
||||
} else if (params.data >= 15) {
|
||||
return '#990000' // 数据在50到99之间为蓝色
|
||||
}
|
||||
}
|
||||
},
|
||||
smooth: true,
|
||||
symbol: 'emptyCircle',
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(65,129,201, 0.70)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(65,129,201, 0.10)'
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: 'rgba(65,129,201, 0.10)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
myChart.setOption(option)
|
||||
}
|
||||
|
||||
const currentType = ref('用药次数柱状图')
|
||||
const handleRadioChange = (type) => {
|
||||
currentType.value = type
|
||||
switch (type) {
|
||||
case '用药次数柱状图':
|
||||
drawBar(chartData.value)
|
||||
break
|
||||
case '用药次数折线图':
|
||||
drawLine(chartData.value)
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
getPersonList()
|
||||
</script>
|
||||
Reference in New Issue
Block a user