Merge branch 'master' into 'master'

增加动态柱状图

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

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

@@ -43,4 +43,13 @@ export function querySettlementInfo(data) {
     method: 'post',
     data,
   })
+}
+
+// 查询动态数据
+export function selectBarChangeData(data) {
+  return request({
+    url: '/ybQuery/selectBarChangeData',
+    method: 'post',
+    data,
+  })
 }

src/components/medical-insurance/ybkf/BarChart.vue

@@ -0,0 +1,7 @@
+<template>
+    <div style="width: 100%; height: 700px" id="hightChart"></div>
+</template>
+
+<script>
+
+</script>

src/utils/echarts-utils.js

@@ -1,4 +1,3 @@
-import { yaoPinXiangMuPiPeiYiBao } from '@/api/public-api'
 import * as echarts from 'echarts'
 
 export function pieUtils(id, name, data) {
@@ -539,4 +538,166 @@ export function barUtilsTwo(id, name, Xdata, Ydata, seriesName, yAxisName, unit)
     //自适应大小, 不用的话不会自适应大小。
     linearBarDom.resize()
   }
-}
+}
+
+/**
+ * 柱状图动态显示排名
+ * @param {*} id 
+ * @param {*} name 主题
+ * @param {*} months 月份
+ * @param {*} data 数据
+ * @param {*} num 排名前几
+ * @param {*} unit 单位
+ */
+export function barUtilsThree(id, name, months, data, num, unit) {
+
+  let updateFrequency = 5000
+  let dimension = 0
+  // 预置柱状图颜色(35种)
+  let barColors = [
+    '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
+    '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
+    '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0',
+    '#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
+    '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
+    '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
+    '#6b8e23', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0'
+  ]
+
+  // 验证 这个 是否被创建了
+  let linearBarDom = echarts.getInstanceByDom(id)
+
+  if (linearBarDom == null) {
+    linearBarDom = echarts.init(id)
+  }
+
+  let startIndex = 1
+  let startMoth = months[startIndex]
+
+  let option = {
+    title: {
+      text: name,
+    },
+    grid: {
+      top: '15%',
+      bottom: '10%',
+      left: '10%',
+      right: '10%',
+      containLabel: true
+    },
+    xAxis: {
+      max: 'dataMax',
+      type: 'value',
+      axisLabel: {
+        formatter: function (n) {
+          return Math.round(n) + unit
+        }
+      },
+      axisLine: {
+        show: true,
+        interval: 24,
+        lineStyle: {
+          color: '#000',
+        }
+      },
+    },
+    dataset: {
+      source: data.filter(function (d) {
+        return d[2] === startMoth;
+      })
+    },
+    yAxis: {
+      type: 'category',
+      inverse: true,
+      max: num,
+      axisLabel: {
+        show: true,
+        fontSize: 15,
+        formatter: function (value) {
+          return value
+        },
+      },
+      animationDuration: 300,
+      animationDurationUpdate: 300,
+    },
+    series: [
+      {
+        realtimeSort: true,
+        seriesLayoutBy: 'column',
+        type: 'bar',
+        itemStyle: {
+          color: function (param) {
+            return barColors[param.dataIndex] || '#5470C6'
+          }
+        },
+        encode: {
+          x: dimension,
+          y: 3
+        },
+        // 这个是在柱状图中显示 数字
+        label: {
+          show: true,
+          position: 'right',
+          formatter: function (value) {
+            return Math.ceil(value.value[0]) + unit
+          },
+          fontSize: 16,
+          precision: 1,
+          fontFamily: 'monospace',
+          valueAnimation: true
+        },
+      },
+    ],
+    animationDuration: 0,
+    animationDurationUpdate: updateFrequency,
+    animationEasing: 'linear',
+    animationEasingUpdate: 'linear',
+    graphic: {
+      elements: [
+        {
+          type: 'text',
+          right: '10%',
+          bottom: '15%',
+          style: {
+            text: startMoth,
+            font: 'bolder 80px monospace',
+            fill: 'rgba(100, 100, 100, 0.25)'
+          },
+          z: 100
+        }
+      ]
+    }
+  }
+
+  linearBarDom.setOption(option)
+
+  window.addEventListener("resize", function () {
+    linearBarDom.resize();
+  })
+
+  for (var i = startIndex; i < months.length - 1; ++i) {
+    (function (i) {
+      setTimeout(function () {
+        updateMonth(linearBarDom, option, data, months[i + 1]);
+      }, (i - startIndex) * updateFrequency)
+    })(i);
+  }
+
+  //option && linearBarDom.setOption(option)
+
+}
+
+function updateMonth(myChart, option, data, month) {
+
+  let source = data.filter(function (d) {
+    return d[2] === month
+  })
+
+  option.series[0].data = source
+  option.graphic.elements[0].style.text = month
+  myChart.setOption(option, true)
+  window.addEventListener("resize", function () {
+    myChart.resize();
+  })
+}
+

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

@@ -10,7 +10,8 @@
       <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-button icon="TrendCharts" type="primary" @click="selectChart">分析图</el-button>
+      <el-button icon="Histogram" type="primary" @click="showBarChart">趋势图</el-button>
     </el-header>
     <el-main>
       <el-tabs type="border-card" v-model="setlCondition.selectType" @tab-click="handleClick">
@@ -75,6 +76,9 @@
           <el-dialog v-model="showSetlinfoComponent" :close-on-click-modal="false" title="结算信息" width="70%">
             <Setlinfo :setlinfo="currentSetldetail" />
           </el-dialog>
+          <el-dialog v-model="showChart" :close-on-click-modal="false" title="指标趋势图" width="70%">
+            <BarChart :ybkf="barChangeData" />
+          </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
@@ -172,18 +176,19 @@ import { useStore } from 'vuex'
 import store from '@/store'
 import { getDateRangeFormatDate, formatDatetime } from '@/utils/date'
 import {
-  selectYbStatInfo, selectYbStatRatio, selectYbChart, selectYbStatDetail, querySettlementInfo
+  selectYbStatInfo, selectYbStatRatio, selectYbChart, selectYbStatDetail, querySettlementInfo, selectBarChangeData
 } 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 { pieUtilsOne, barUtilsTwo } from '@/utils/echarts-utils'
+import { pieUtilsOne, barUtilsTwo, barUtilsThree } from '@/utils/echarts-utils'
 import Setlinfo from '../../../components/medical-insurance/setlinfo/Index.vue'
+import BarChart from '../../../components/medical-insurance/ybkf/BarChart.vue'
 
 export default {
   components: {
-    Setlinfo,
+    Setlinfo, BarChart
   },
   setup() {
     const storeU = useStore()
@@ -201,6 +206,57 @@ export default {
       selectPie: '1'
     })
 
+    const showChart = ref(false)
+    const barChangeData = ref([])
+    const showBarChart = (val) => {
+
+      if (setlCondition.setlType === '11') {
+        ElMessage({
+          message: '门诊不参与排名！',
+          type: 'warning',
+          duration: 2500,
+          showClose: true,
+        })
+        return
+      }
+
+      let selectInfo = clone(setlCondition)
+      selectBarChangeData(selectInfo)
+        .then((res) => {
+          barChangeData.value = res
+          showChart.value = true
+
+          //月份
+          let months = []
+          //数据
+          let dataBar = []
+          //显示排名前几名
+          let num = 15
+          //单位
+          let unit = '元'
+
+          barChangeData.value.forEach((item) => {
+            let d = []
+
+            if (months.length === 0 || months[months.length - 1] !== item.yf) {
+              months.push(item.yf)
+            }
+
+            d.push(item.totalFee)
+            d.push(item.medins_type)
+            d.push(item.yf)
+
+            dataBar.push(d)
+          })
+          nextTick(() => {
+            barUtilsThree(hightChart, '总费用(TOP' + num + ')', months, dataBar, num - 1, unit)
+          })
+        })
+        .catch(() => {
+          barChangeData.value = []
+        })
+    }
+
     const setldetails = ref([])
     const showSetldetails = ref(false)
 
@@ -412,7 +468,7 @@ export default {
 
     }
 
-    watch(chartData, (orlData, newData) => {
+    watch(() => chartData.value, () => {
       let nameText
       let barTitles = ['总费用', '全部基金', '药品费', '耗材费']
       if (setlCondition.setlType === '21') {
@@ -470,7 +526,6 @@ export default {
       pieUtilsOne(rcpie, '住院人次', pieRc)
       pieUtilsOne(zytsPie, '住院天数', pieZyts)
       pieUtilsOne(zfyPie, '总费用', pieZfy)
-
     })
 
     const handleClick = (tab, event) => {
@@ -929,6 +984,8 @@ export default {
       titleChart,
       chartData,
       pieChartData,
+      showChart,
+      barChangeData,
       pageSize,
       currentPage,
       filterDialogTitle,
@@ -939,6 +996,7 @@ export default {
       handleCurrentChange,
       handleSizeChange,
       fetchSetldetails,
+      showBarChart,
       selectChart,
       handleClose,
       cancelForm,
@@ -1099,4 +1157,5 @@ function initInsurOptions() {
 :deep(.el-main) {
   padding: 0 5px;
 }
+
 </style>