fix: 健康统计，统计功能页面初始化，未开发。

src/views/health/doctorRecord/index.vue

@@ -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',
+  'package_unit',
-  'nursing_type'
+  '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,40 +424,49 @@ 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 = '7'
+    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 = '7'
+    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
   }
 }
@@ -448,6 +481,9 @@ function handleAddDetail() {
 
 const handleDetailOperate = (operate, row) => {
   switch (operate) {
+    case 'copy':
+      handleCopy(row)
+      break
     case 'edit':
       handleUpdateDetail(row)
       break
@@ -458,10 +494,59 @@ const handleDetailOperate = (operate, row) => {
       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
+      showNursingType.value = false
+      showMedicine.value = false
+    } else if (type == '3') {
+      //药品
+      getMedicineList()
+      showCheckType.value = false
+      showNursingType.value = false
+      showMedicine.value = true
+    } else if (type == '4') {
+      //护理治疗
+      showCheckType.value = false
+      showNursingType.value = true
+      showMedicine.value = false
+    } else if (type == '5') {
+      showCheckType.value = false
+      showNursingType.value = false
+      showMedicine.value = false
+    } else if (type == '6') {
+      showCheckType.value = false
+      showNursingType.value = false
+      showMedicine.value = false
+    } else if (type == '7') {
+      showCheckType.value = false
+      showNursingType.value = false
+      showMedicine.value = false
+    }
+    formDetail.value.id = null
+    openDetail.value = true
+    titleDetail.value = '复制费用明细'
+  })
+}
 // 取消按钮
 function cancelDetail() {
   openDetail.value = false
   resetDetail()
+  //检测检查
+  showCheckType.value = false
+  showNursingType.value = false
+  showMedicine.value = false
 }
 /** 总利息按钮操作 */
 function handleUpdateCost() {

src/views/health/doctorStatistic/index.vue

@@ -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>

src/views/health/healthAnalysis/index.vue

@@ -0,0 +1,415 @@
+<template>
+  <div class="app-container" style="overflow: auto">
+    <div class="header-title" ref="searchHeightRef">&nbsp;&nbsp;&nbsp;&nbsp;健康总览</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">&nbsp;&nbsp;&nbsp;&nbsp;成员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>

src/views/health/healthStatistic/index.vue

@@ -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>