Merge branch 'master' into 'master'

添加报表柱状图和钻取

See merge request lighter/vue-intergration-platform!3

src/api/medical-insurance/si-ybkf.js

@@ -17,3 +17,30 @@ export function selectYbStatRatio(data) {
     data,
   })
 }
+
+// 查询图形数据
+export function selectYbChart(data) {
+  return request({
+    url: '/ybQuery/selectYbChart',
+    method: 'post',
+    data,
+  })
+}
+
+// 查询报表明细数据
+export function selectYbStatDetail(data) {
+  return request({
+    url: '/ybQuery/selectYbStatDetail',
+    method: 'post',
+    data,
+  })
+}
+
+// 查询病人明细数据
+export function querySettlementInfo(data) {
+  return request({
+    url: '/siQuery/querySettlementInfo',
+    method: 'post',
+    data,
+  })
+}

src/utils/echarts-utils.js

@@ -1,3 +1,4 @@
+import { yaoPinXiangMuPiPeiYiBao } from '@/api/public-api'
 import * as echarts from 'echarts'
 
 export function pieUtils(id, name, data) {
@@ -125,6 +126,113 @@ export function barUtils(id, name, Xdata, Ydata) {
   }
 }
 
+// 重构柱状图
+/**
+ * 参数
+ * @param {*} id 图渲染容器id
+ * @param {*} name 图标题
+ * @param {*} Xdata x轴数据
+ * @param {*} Ydata y轴数据
+ * @param {*} seriesName 图数据种类
+ * @param {*} yAxisName y轴单位说明
+ */
+export function barUtilsOne(id, name, Xdata, Ydata, seriesName, yAxisName) {
+  // 验证 这个 是否被创建了
+  let linearBarDom = echarts.getInstanceByDom(id)
+  if (linearBarDom == null) {
+    linearBarDom = echarts.init(id)
+  }
+
+  if (seriesName.length < 0) {
+    return
+  }
+
+  let series = []
+
+  for (let i = 0; i < seriesName.length; i++) {
+    series.push({
+      name: seriesName[i],
+      type: 'bar',
+      // stack: 'all',
+      barMaxwidth: 35,
+      barGap: '10%',
+      color: {
+        type: 'linear',
+        x: 0,
+        y: 1,
+        colorStops: [
+          {
+            offset: 0,
+            color: '#6633ff',
+          },
+          {
+            offset: 0.5,
+            color: '#6699ff'
+          },
+          {
+            offset: 1,
+            color: '#66ffff'
+          }
+        ]
+      },
+      label: {
+        show: true,
+        textStyle: {
+          color: '#0000ff'
+        },
+        position: 'top',
+        formatter(p) {
+          return p.value > 0 ? p.value : ''
+        }
+      },
+      data: Ydata[i]
+    })
+
+  }
+
+  linearBarDom.setOption({
+    title: {
+      text: name,
+    },
+    xAxis: {
+      type: 'category',
+      data: Xdata,
+      axisLabel: {
+        color: '#bb3137',
+        fontSize: 16
+      }
+    },
+    yAxis: {
+      type: 'value',
+      name: yAxisName,
+      nameLocation: 'end',
+    },
+    legend: {
+      data: seriesName,
+      top: "0%"
+    },
+    tooltip: {},
+    toolbox: {
+      show: 1,
+      itemSize: 30,
+      x: 'right',
+      y: 'top',
+      feature: {
+        saveAsImage: {
+          show: true,
+          title: '下载图片',
+          type: 'png'
+        }
+      }
+    },
+    series: series,
+  })
+  window.onresize = function () {
+    //自适应大小, 不用的话不会自适应大小。
+    linearBarDom.resize()
+  }
+}
+
 // 主题注册 也没有用到
 export function echartsZhuTiZhuCe() {
   zhuTi.filter((item) => {

src/views/medical-insurance/allpatient/InsurIncomeAnalysis.vue

@@ -10,12 +10,13 @@
       <el-divider direction="vertical"></el-divider>
       <el-button icon="Search" type="success" @click="fetchSetlinfos">查询</el-button>
       <el-button icon="Download" type="primary" @click="exportSetlinfoExcel">导出Excel</el-button>
+      <el-button type="primary" @click="selectChart">图形</el-button>
     </el-header>
     <el-main>
       <el-tabs type="border-card" v-model="setlCondition.selectType" @tab-click="handleClick">
         <el-tab-pane label="数据" name="first">
           <el-table :data="setlinfos" :height="tableHeight" border highlight-current-row row-key="childKey" show-summary
-            :summary-method="getSummaries1" stripe>
+            :summary-method="getSummaries1" stripe @row-dblclick="fetchSetldetails">
             <el-table-column label="险种类型" prop="insurName" fixed header-align="center"></el-table-column>
             <el-table-column label="住院人次" prop="psnCount" align="center" header-align="center"></el-table-column>
             <el-table-column label="住院天数" prop="inDays" align="center" header-align="center"></el-table-column>
@@ -33,6 +34,47 @@
             <el-table-column label="其他基金" prop="otherFunds" align="right" header-align="center"></el-table-column>
             <el-table-column label="全部基金" prop="allFunds" align="right" header-align="center"></el-table-column>
           </el-table>
+          <el-dialog v-model="showSetldetails" :close-on-click-modal="false" :close-on-press-escape="false"
+            :title="filterDialogTitle" width="70%">
+            <div style="width: 130px; height: 36px; position: absolute; top: 16px; right: 60px">
+              <el-button icon="Download" type="primary" @click="exportYbDetailExcel">导出Excel</el-button>
+            </div>
+            <el-table :data="setldetails.slice(pageSize * (currentPage - 1), pageSize * currentPage)" height="560"
+              highlight-current-row stripe @row-dblclick="openSetlinfoComponent">
+              <el-table-column fixed label="序号" type="index" width="40"></el-table-column>
+              <el-table-column fixed label="姓名" prop="psnName" width="60"></el-table-column>
+              <el-table-column label="住院号" prop="patNo" width="70"></el-table-column>
+              <el-table-column label="次数" prop="times" width="40"></el-table-column>
+              <el-table-column label="性别" prop="gendName" width="50"></el-table-column>
+              <el-table-column label="出生日期" prop="brdy"></el-table-column>
+              <el-table-column label="身份证" prop="certno"></el-table-column>
+              <el-table-column label="参保地区" prop="insuplcAdmdvsName"></el-table-column>
+              <el-table-column label="险种类型" prop="insutypeName"></el-table-column>
+              <el-table-column label="人员类别" prop="psnTypeName"></el-table-column>
+              <el-table-column label="就诊ID" prop="mdtrtId"></el-table-column>
+              <el-table-column label="结算ID" prop="setlId"></el-table-column>
+              <el-table-column label="入院时间" prop="begntime"></el-table-column>
+              <el-table-column label="出院时间" prop="endtime"></el-table-column>
+              <el-table-column label="结算时间" prop="setlTime"></el-table-column>
+              <el-table-column label="医疗类别" prop="medTypeName"></el-table-column>
+              <el-table-column label="总费用" prop="medfeeSumamt"></el-table-column>
+              <el-table-column label="报销金额" prop="fundPaySumamt"></el-table-column>
+              <el-table-column label="医疗救助" prop="mafPay"></el-table-column>
+              <el-table-column label="个人账户支出" prop="acctPay"></el-table-column>
+              <el-table-column label="个人现金支出" prop="psnCashPay"></el-table-column>
+              <el-table-column label="大病支出" prop="hifmiPay"></el-table-column>
+              <el-table-column label="西药费" prop="chargeWesternMedicine"></el-table-column>
+              <el-table-column label="中成药费" prop="chargePatentMedicine"></el-table-column>
+              <el-table-column label="中药饮片费" prop="chargeHerbal"></el-table-column>
+              <el-table-column label="耗材费" prop="chargeSanitaryMaterial"></el-table-column>
+            </el-table>
+            <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[15, 30, 45, 60]"
+              :total="setldetails.length" layout="total, sizes, prev, pager, next, jumper" style="margin-top: 5px"
+              @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
+          </el-dialog>
+          <el-dialog v-model="showSetlinfoComponent" :close-on-click-modal="false" title="结算信息" width="70%">
+            <Setlinfo :setlinfo="currentSetldetail" />
+          </el-dialog>
         </el-tab-pane>
         <el-tab-pane label="同比" name="second">
           <el-table :data="setlinfos" :height="tableHeight" border highlight-current-row row-key="childKey" show-summary
@@ -84,25 +126,30 @@
         </el-tab-pane>
       </el-tabs>
     </el-main>
+    <el-drawer :title="titleChart" v-model="qxtDrawer" size="70%">
+      <div style="width: 100%; height: 90%" id="ybChart"></div>
+    </el-drawer>
   </el-container>
 </template>
 
 <script>
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { useStore } from 'vuex'
 import store from '@/store'
 import { getDateRangeFormatDate, formatDatetime } from '@/utils/date'
 import {
-  selectYbStatInfo, selectYbStatRatio
+  selectYbStatInfo, selectYbStatRatio, selectYbChart, selectYbStatDetail, querySettlementInfo
 } from '@/api/medical-insurance/si-ybkf'
 import { clone } from '@/utils/clone'
 import { Export } from '@/utils/ExportExcel'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { downloadExcel } from '@/utils/excel'
+import { barUtilsOne } from '@/utils/echarts-utils'
+import Setlinfo from '../../../components/medical-insurance/setlinfo/Index.vue'
 
 export default {
   components: {
-
+    Setlinfo,
   },
   setup() {
     const storeU = useStore()
@@ -111,6 +158,15 @@ export default {
     const dateRange = ref([])
     const dateS = getDateRangeFormatDate(dateRange.value)
 
+    const setlinfos = ref([])
+
+    const qxtDrawer = ref(false)
+    const titleChart = ref('图形')
+    const chartData = ref([])
+
+    const setldetails = ref([])
+    const showSetldetails = ref(false)
+
     const setlCondition = reactive({
       startTime: dateS.startTime,
       endTime: dateS.endTime,
@@ -121,7 +177,37 @@ export default {
       options: initInsurOptions(),
     })
 
-    const setlinfos = ref([])
+    const fetchSetldetails = (row) => {
+      let selectInfo = clone(setlCondition)
+      selectInfo.insurType = row.insurType
+      selectYbStatDetail(selectInfo)
+        .then((res) => {
+          setldetails.value = res
+          showSetldetails.value = true
+        })
+        .catch(() => {
+          setldetails.value = []
+        })
+    }
+
+    const filterDialogTitle = computed(() => {
+      let yearL = setlCondition.startTime.substr(0, 4)
+      const setlTypeName = filterSetlTypeName()
+      return yearL + setlTypeName + '结算明细'
+    })
+
+    const showSetlinfoComponent = ref(false)
+    const currentSetldetail = ref({})
+    const openSetlinfoComponent = (row) => {
+      const param = {
+        psnNo: row.psnNo,
+        mdtrtId: row.mdtrtId,
+      }
+      querySettlementInfo(param).then((res) => {
+        currentSetldetail.value = res
+        showSetlinfoComponent.value = true
+      })
+    }
 
     const fetchSetlinfos = () => {
       if (!dateRange.value) {
@@ -183,10 +269,140 @@ export default {
 
     }
 
+    const exportYbDetailExcel = () => {
+      if (setldetails.value.length === 0) {
+        ElMessage({
+          message: '没有可以导出的数据！',
+          type: 'warning',
+          duration: 2500,
+          showClose: true,
+        })
+      } else {
+        const title = {
+          patNo: '住院号',
+          times: '住院次数',
+          psnName: '姓名',
+          gendName: '性别',
+          brdy: '出生日期',
+          certno: '身份证',
+          insuplcAdmdvsName: '参保地名称',
+          insutypeName: '险种类型',
+          medTypeName: '医疗类别',
+          psnTypeName: '人员类别',
+          mdtrtId: '就诊ID',
+          setlId: '结算ID',
+          begntime: '入院时间',
+          endtime: '出院时间',
+          setlTime: '结算时间',
+          medfeeSumamt: '总费用',
+          fundPaySumamt: '报销金额',
+          mafPay: '医疗救助',
+          acctPay: '个人账户支出',
+          psnCashPay: '个人现金支出',
+          hifmiPay: '大病支出',
+          medfeeSumamt: '西药费',
+          medfeeSumamt: '中成药费',
+          medfeeSumamt: '中药饮片费',
+          medfeeSumamt: '总耗材费费用',
+        }
+        Export(setldetails.value, title, filterDialogTitle.value)
+      }
+    }
+
     const handleChange = (value) => {
 
     }
 
+    const pageSize = ref(30)
+    const currentPage = ref(1)
+    const handleSizeChange = (val) => {
+      pageSize.value = val
+    }
+    const handleCurrentChange = (val) => {
+      currentPage.value = val
+    }
+
+    const selectChart = () => {
+
+      if (!dateRange.value) {
+        ElMessage({
+          message: '请选择时间范围！',
+          type: 'warning',
+          duration: 2500,
+          showClose: true,
+        })
+        return
+      }
+
+      if (!setlCondition.dataInfo) {
+        ElMessage({
+          message: '请选择险种！',
+          type: 'warning',
+          duration: 2500,
+          showClose: true,
+        })
+        return
+      }
+
+      setlCondition.setlType = setlCondition.dataInfo[0]
+      setlCondition.insurType = setlCondition.dataInfo[1]
+
+      setlCondition.startTime = formatDatetime(dateRange.value[0])
+      setlCondition.endTime = formatDatetime(dateRange.value[1])
+
+      let yearL = setlCondition.startTime.substr(0, 4)
+      let yearR = setlCondition.endTime.substr(0, 4)
+
+      if (yearL != yearR) {
+        ElMessage({
+          message: '请选择同一年份！',
+          type: 'warning',
+          duration: 2500,
+          showClose: true,
+        })
+        return
+      }
+
+      qxtDrawer.value = true
+      titleChart.value = yearL + '年医保收入分析图'
+
+
+      selectYbChart(setlCondition).then((res) => {
+        chartData.value = res
+      })
+    }
+
+    watch(chartData, (orlData, newData) => {
+      let nameText
+      let barTitles = ['总费用', '全部基金', '药品费', '耗材费']
+      if (setlCondition.setlType === '21') {
+        nameText = '住院'
+      } else {
+        nameText = '门诊'
+      }
+      nameText = titleChart.value + '(' + nameText + ')'
+      let yAxisName = '单位：元'
+
+      let echartsXdata = []
+      let echartsYdatas = []
+      let zfy = []
+      let zjj = []
+      let ypf = []
+      let clf = []
+      chartData.value.forEach((item) => {
+        zfy.push(item.zfy_jn)
+        zjj.push(item.zjj_jn)
+        ypf.push(item.ypf_jn)
+        clf.push(item.clf_jn)
+        echartsXdata.push(item.month)
+      })
+      echartsYdatas.push(zfy)
+      echartsYdatas.push(zjj)
+      echartsYdatas.push(ypf)
+      echartsYdatas.push(clf)
+      barUtilsOne(ybChart, nameText, echartsXdata, echartsYdatas, barTitles, yAxisName)
+    })
+
     const handleClick = (tab, event) => {
 
       if (!dateRange.value) {
@@ -605,6 +821,30 @@ export default {
       }
     }
 
+    const handleClose = (done) => {
+      if (this.loading) {
+        return;
+      }
+      this.$confirm('确定要提交表单吗？')
+        .then(_ => {
+          this.loading = true;
+          this.timer = setTimeout(() => {
+            done();
+            // 动画关闭需要一定的时间
+            setTimeout(() => {
+              this.loading = false;
+            }, 400);
+          }, 2000);
+        })
+        .catch(_ => { });
+    }
+
+    const cancelForm = () => {
+      this.loading = false;
+      this.dialog = false;
+      clearTimeout(this.timer);
+    }
+
     onMounted(() => {
       // 初始化数据
       setlCondition.selectType = 'first'
@@ -615,10 +855,28 @@ export default {
       dateRange,
       setlCondition,
       setlinfos,
+      qxtDrawer,
+      titleChart,
+      chartData,
+      pageSize,
+      currentPage,
+      filterDialogTitle,
+      setldetails,
+      showSetldetails,
+      showSetlinfoComponent,
+      currentSetldetail,
+      handleCurrentChange,
+      handleSizeChange,
+      fetchSetldetails,
+      selectChart,
+      handleClose,
+      cancelForm,
       getSummaries1,
       exportSetlinfoExcel,
+      exportYbDetailExcel,
       handleChange,
       handleClick,
+      openSetlinfoComponent,
       fetchSetlinfos,
     }
   },