From 585d0408f6970c02a545d0a1b99c72fdcf370632 Mon Sep 17 00:00:00 2001 From: WXL (wul) <wl_5969728@163.com> Date: 星期二, 19 八月 2025 10:54:46 +0800 Subject: [PATCH] 统计页面数据接入 --- src/views/index.vue | 491 ++++++++++++++++++++++++++++++++++++----------------- 1 files changed, 330 insertions(+), 161 deletions(-) diff --git a/src/views/index.vue b/src/views/index.vue index fe67590..8b63e39 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -7,49 +7,48 @@ <!-- 灏辫瘖缁熻鐩掑瓙 --> <div class="grid-content bg-purple headerBox bgc1"> <div class="title"> - 鎮h�呯粺璁�<span + 闂ㄨ瘖鏈嶅姟<span style=" font-size: 25px; font-weight: 600; text-shadow: 2px 4px 7px rgb(85 132 255 / 50%); color: black; " - >12322 (浜�)</span - > + ></span> <span>{{ endatd }} ~ {{ statd }}</span> </div> <el-row :gutter="20"> - <el-col :span="8"> + <el-col :span="10"> <div class="home-user-task-stats"> - <p>{{ 11231 }}</p> + <p>{{ OutpatientData.rc }}</p> <div class="text-color2"> - <p>闂ㄨ瘖鎬绘暟锛堜汉锛�</p> + <p>闂ㄨ瘖灏辫瘖閲忥紙浜烘锛�</p> </div> </div> </el-col> - <el-col :span="7"> + <el-col :span="10"> <div class="home-user-task-stats"> - <p>{{ 9207 }}</p> + <p>{{ OutpatientData.rs }}</p> <div class="text-color2"> - <p>浣忛櫌鎬绘暟锛堜汉锛�</p> + <p>闂ㄨ瘖鏈嶅姟閲忥紙浜烘锛�</p> </div> </div> </el-col> - <el-col :span="7"> + <!-- <el-col :span="7"> <div class="home-user-task-stats"> <p>{{ 1209 }}</p> <div class="text-color2"> <p>浣撴鎬绘暟锛堜汉锛�</p> </div> </div> - </el-col> + </el-col> --> </el-row> </div> </el-col> <el-col :span="9"> <div class="grid-content bg-purple headerBox bgc2"> <div class="title"> - 闂ㄨ瘖鏈嶅姟鎬绘暟 + 鍑洪櫌鏈嶅姟 <span style=" font-size: 25px; @@ -57,24 +56,23 @@ font-weight: 600; color: red; " - >12322 (浜�)</span - > + ></span> <span>{{ endatd }} ~ {{ statd }}</span> </div> <el-row :gutter="20"> - <el-col :span="12"> + <el-col :span="10"> <div class="home-user-task-stats"> - <p style="color: red">{{ 3453 }}</p> + <p style="color: red">{{ DischargeData.rc }}</p> </div> <div class="text-color2"> - <p>浣忛櫌鏈嶅姟浜烘暟</p> + <p>鍑洪櫌灏辫瘖閲忥紙浜烘锛�</p> </div> </el-col> - <el-col :span="12"> + <el-col :span="10"> <div class="home-user-task-stats"> - <p style="color: red">{{ 4213 }}</p> + <p style="color: red">{{ DischargeData.rs }}</p> <div class="text-color2"> - <p>浣撴鏈嶅姟浜烘暟</p> + <p>鍑洪櫌鏈嶅姟閲忥紙浜烘锛�</p> </div> </div> </el-col> @@ -88,7 +86,7 @@ <!-- echars鏁版嵁鍙鍖� --> <div class="grid-content bg-purple" style="min-height: 365px"> <div class="title"> - 灏辫瘖缁熻 + 鏈嶅姟缁熻 <span>{{ endatd }} ~ {{ statd }}</span> <el-radio-group v-model="radio1" @@ -96,28 +94,43 @@ style="margin-left: 390px" @change="changes" > - <el-radio-button label="鍛�" @click="dyat = 7"></el-radio-button> <el-radio-button - label="鏈�" - @click="dyat = 30" + label="杩戜竴鍛�" + @click="dyat = 7" ></el-radio-button> <el-radio-button - label="骞�" - @click="dyat = 360" + label="杩戜竴鏈�" + @click="dyat = 31" ></el-radio-button> + <el-radio-button + label="杩戜竴骞�" + @click="dyat = 365" + ></el-radio-button> + <el-radio-button label="鑷畾涔�"> + <el-date-picker + v-if="radio1 === '鑷畾涔�'" + v-model="customDateRange" + type="daterange" + range-separator="鑷�" + start-placeholder="寮�濮嬫棩鏈�" + end-placeholder="缁撴潫鏃ユ湡" + value-format="yyyy-MM-dd" + @change="handleCustomDateChange" + ></el-date-picker> + </el-radio-button> </el-radio-group> </div> - <!-- 涓棿echars --> + <!-- 涓儴绾挎�ф煴鐘跺浘 --> <div class="boxEchars"> <div class="echars1" id="echars"></div> </div> </div> </el-col> - <!-- 涓棿鍜屽彸杈� --> + <!-- 鍙宠竟鍒楄〃 --> <el-col :span="4" class="aside"> <div class="grid-content bg-purple" style="margin-top: -180px"> <div class="title"> - 鍋ュ悍瀹f暀 + 绉戝鏈嶅姟閲� <span>{{ endatd }} ~ {{ statd }}</span> </div> <div style="max-height: 690px; width: 100%; overflow: auto"> @@ -130,14 +143,13 @@ type="index" ></el-table-column> <el-table-column - prop="skuName" + prop="deptname" width="88" class-name="name" ></el-table-column> - <el-table-column prop="count" class-name="count"> - <template slot-scope="scope"> - {{ scope.row.count }}娆� - </template> + + <el-table-column prop="rc" class-name="rc"> + <template slot-scope="scope"> {{ scope.row.rc }}娆� </template> </el-table-column> </el-table> </div> @@ -146,7 +158,7 @@ </el-row> <!-- 搴曢儴涓�涓� --> <el-row :gutter="20" style="margin-bottom: 20px"> - <el-col :span="15"> + <el-col :span="24"> <div class="grid-content bg-purple" style="min-height: 300px"> <div class="title"> 瀹f暀缁熻 @@ -158,7 +170,7 @@ </div> </div> </el-col> - <el-col :span="9"> + <!-- <el-col :span="9"> <div class="grid-content bg-purple" style="min-height: 300px"> <div class="title"> 鍚勯」鏈嶅姟缁熻 @@ -281,7 +293,7 @@ </el-row> </div> </div> - </el-col> + </el-col> --> </el-row> </div> </div> @@ -289,10 +301,12 @@ <script> import { - getoutpatientamount, - getInhospital, - getBarchart, - getQtemplateobj, + getEChartsPatMedOuthospCount, + getechartsListCountdata, + getechartsMedOuthospList, + getechartsMedInhospList, + getServiceStatistics, + getDeptRanking, } from "@/api/AiCentre/index"; import dayjs from "dayjs"; @@ -307,8 +321,21 @@ mypPieCharts: null, lastWidth: window.innerWidth, lastHeight: window.innerHeight, - radio1: "鍛�", + radio1: "杩戜竴鍛�", ticketStatistics: {}, + timeTypeMap: { + 鍛�: "day", + 鏈�: "month", + 骞�: "year", + }, + DischargeData: { + rs: "", + rc: "", + }, + OutpatientData: { + rs: "", + rc: "", + }, order: "", Count: "", datatni: [], @@ -318,7 +345,8 @@ SkuTop: [], cylinderSeries: [], cylinderXAxis: [], - dyat: 30, + customDateRange: [], // 鑷畾涔夋棩鏈熻寖鍥� + dyat: 6, intervalId: null, }; }, @@ -331,19 +359,25 @@ atd() { return dayjs().subtract(this.dyat, "day").format("YYYY-MM-DD HH:mm:ss"); }, - statd() { + statd() { + if (this.radio1 === "鑷畾涔�" && this.customDateRange.length > 0) { + return this.customDateRange[1]; + } return dayjs().format("YYYY-MM-DD"); }, endatd() { + if (this.radio1 === "鑷畾涔�" && this.customDateRange.length > 0) { + return this.customDateRange[0]; + } return dayjs().subtract(this.dyat, "day").format("YYYY-MM-DD"); }, }, created() { - // this.getoutpatientamount(); - // this.getInhospital(); - // this.getBarchart(); + this.getTopdata(); + this.getgraphdata(); + // this.getranking(); this.$nextTick(function () { - this.getregionAmountCollect(); + this.myEcharts2(); this.getnodeCollect(); this.getSkuTop(); }); @@ -360,17 +394,37 @@ methods: { // 鏀瑰彉鏃堕棿浜嬩欢 changes() { - if (this.radio1 == "鍛�") { - this.dyat = 7; - } else if (this.radio1 == "鏈�") { - this.dyat = 30; - } else { - this.dyat = 360; + switch (this.radio1) { + case "杩戜竴鍛�": + this.dyat = 7; + break; + case "杩戜竴鏈�": + this.dyat = 30; + break; + case "杩戜竴骞�": + this.dyat = 365; + break; + case "鑷畾涔�": + // 鑷畾涔夋棩鏈熷鐞嗗湪handleCustomDateChange鏂规硶涓� + return; } - this.getregionAmountCollect(); - // this.getoutpatientamount(); - // this.getInhospital(); - // this.getBarchart(); + this.refreshData(); + }, + + // 澶勭悊鑷畾涔夋棩鏈熷彉鍖� + handleCustomDateChange(range) { + if (!range || range.length !== 2) return; + + this.customDateRange = range; + this.refreshData(); + }, + + // 缁熶竴鍒锋柊鏁版嵁鐨勬柟娉� + refreshData() { + this.getgraphdata(); + // this.getranking(); + this.getTopdata(); + this.myEcharts2(); this.getnodeCollect(); this.getSkuTop(); }, @@ -387,38 +441,209 @@ }, // top鎺掕 async getSkuTop() { - // const res = await getSkuTop(10, this.endatd, this.statd); - // this.SkuTop = res.data; - this.SkuTop = [ - { amount: 0, count: 123, skuId: "0", skuName: "蹇冭偤绉�" }, - { amount: 0, count: 122, skuId: "0", skuName: "鑲捐剰绉�" }, - { amount: 0, count: 112, skuId: "0", skuName: "娉屽翱绉�" }, - { amount: 0, count: 111, skuId: "0", skuName: "鐢风" }, - { amount: 0, count: 102, skuId: "0", skuName: "濡囦骇绉�" }, - { amount: 0, count: 98, skuId: "0", skuName: "澶栫" }, - { amount: 0, count: 89, skuId: "0", skuName: "鎬ヨ瘖" }, - { amount: 0, count: 88, skuId: "0", skuName: "鍣ㄦ绉�" }, - { amount: 0, count: 87, skuId: "0", skuName: "楠ㄧ" }, - { amount: 0, count: 67, skuId: "0", skuName: "鏀惧皠绉�" }, - { amount: 0, count: 89, skuId: "0", skuName: "鎬ヨ瘖" }, - { amount: 0, count: 88, skuId: "0", skuName: "鍣ㄦ绉�" }, - { amount: 0, count: 87, skuId: "0", skuName: "楠ㄧ" }, - { amount: 0, count: 67, skuId: "0", skuName: "鏀惧皠绉�" }, - ]; + let Rankingdata = { + startDate: this.endatd, + endDate: this.statd, + cy: 1, + }; + await getDeptRanking(Rankingdata).then((res) => { + if (res.code == 200) { + this.SkuTop = res.rows.sort((a, b) => b.rc - a.rc); + console.log(this.SkuTop, "this.SkuTop"); + } + }); + + // this.SkuTop = [ + // { amount: 0, count: 123, skuId: "0", skuName: "蹇冭偤绉�" }, + // { amount: 0, count: 122, skuId: "0", skuName: "鑲捐剰绉�" }, + // { amount: 0, count: 112, skuId: "0", skuName: "娉屽翱绉�" }, + // { amount: 0, count: 111, skuId: "0", skuName: "鐢风" }, + // { amount: 0, count: 102, skuId: "0", skuName: "濡囦骇绉�" }, + // { amount: 0, count: 98, skuId: "0", skuName: "澶栫" }, + // { amount: 0, count: 89, skuId: "0", skuName: "鎬ヨ瘖" }, + // { amount: 0, count: 88, skuId: "0", skuName: "鍣ㄦ绉�" }, + // { amount: 0, count: 87, skuId: "0", skuName: "楠ㄧ" }, + // { amount: 0, count: 67, skuId: "0", skuName: "鏀惧皠绉�" }, + // { amount: 0, count: 89, skuId: "0", skuName: "鎬ヨ瘖" }, + // { amount: 0, count: 88, skuId: "0", skuName: "鍣ㄦ绉�" }, + // { amount: 0, count: 87, skuId: "0", skuName: "楠ㄧ" }, + // { amount: 0, count: 67, skuId: "0", skuName: "鏀惧皠绉�1" }, + // { amount: 0, count: 67, skuId: "0", skuName: "鏀惧皠绉�2" }, + // ]; }, - // 鑾峰彇闂ㄨ瘖鍩虹鏁版嵁 - getoutpatientamount() { - getoutpatientamount().then((res) => {}); + // 鑾峰彇澶撮儴鏁版嵁 + getTopdata() { + let hospCountdata = { + startDate: this.endatd, + endDate: this.statd, + cy: 1, + }; + let Countdata = { + startDate: this.endatd, + endDate: this.statd, + cy: 1, + }; + // 鏌ヨ闂ㄨ瘖鐪嬬梾浜烘鍜屼汉鏁� + getEChartsPatMedOuthospCount(hospCountdata).then((res) => { + if (res.code == 200) { + this.OutpatientData = res.data; + } + }); + // 鏌ヨ鍑恒�佸叆闄㈢湅鐥呬汉娆″拰浜烘暟 + getechartsListCountdata(Countdata).then((res) => { + if (res.code == 200) { + this.DischargeData = res.data; + } + }); }, - // 鑾峰彇灏辫瘖鏁伴噺 - getBarchart() { - getBarchart().then((res) => {}); - }, - // 鑾峰彇鎬婚噺鏁伴噺 - getInhospital() { - getInhospital().then((res) => {}); + // 鑾峰彇涓儴绾挎煴鍥炬暟鎹� + getranking() {}, + + async getgraphdata() { + let params = { + startDate: this.endatd, + endDate: this.statd, + timeType: this.getTimeType() + }; + + try { + const res = await getServiceStatistics(params); + if (res.code === 200) { + this.processChartData(res.data); + } + } catch (error) { + console.error("鑾峰彇鍥捐〃鏁版嵁澶辫触:", error); + } }, + // 鑾峰彇鏃堕棿绫诲瀷 + getTimeType() { + if (this.radio1 === "杩戜竴鍛�" || this.radio1 === "杩戜竴鏈�") { + return "day"; + } + + if (this.radio1 === "杩戜竴骞�") { + return "month"; + } + + // 鑷畾涔夋棩鏈熻寖鍥� + if (this.radio1 === "鑷畾涔�" && this.customDateRange.length === 2) { + const start = dayjs(this.customDateRange[0]); + const end = dayjs(this.customDateRange[1]); + const diffDays = end.diff(start, 'day'); + + return diffDays > 60 ? "month" : "day"; + } + + return "day"; // 榛樿杩斿洖day绫诲瀷 + }, + processChartData(data) { + // 鎸夋椂闂存帓搴忕‘淇濇暟鎹『搴忔纭� + const sortedData = [...data].sort( + (a, b) => new Date(a.timePeriod) - new Date(b.timePeriod) + ); + + const xAxisData = []; + const dischargeFollowData = []; + const outpatientFollowData = []; + const pmiData = []; + const pmoData = []; + + sortedData.forEach((item) => { + // 鏍规嵁鏃堕棿绫诲瀷鏍煎紡鍖栨樉绀� + const timeType = this.getTimeType(); + const timeLabel = timeType === "day" + ? dayjs(item.timePeriod).format("MM-DD") + : dayjs(item.timePeriod).format("YYYY-MM"); + + xAxisData.push(timeLabel); + dischargeFollowData.push(item.dischargeFollowCount); + outpatientFollowData.push(item.outpatientFollowCount); + pmiData.push(item.pmiCount); + pmoData.push(item.pmoCount); +}); + + // 鏇存柊鍥捐〃 + this.updateChart( + xAxisData, + dischargeFollowData, + outpatientFollowData, + pmiData, + pmoData + ); + }, + updateChart( + xAxisData, + dischargeFollowData, + outpatientFollowData, + pmiData, + pmoData + ) { + if (!this.myChart2) { + this.myEcharts2(); + return; + } + + // 璁$畻闅忚閲忕殑鏈�澶у�� + const maxFollow = Math.max( + ...dischargeFollowData, + ...outpatientFollowData + ); + // 璁$畻鏈嶅姟浜烘鐨勬渶澶у�� + const maxService = Math.max(...pmiData, ...pmoData); + + // 鍔ㄦ�佽绠梚nterval鍊� + const followInterval = this.calculateOptimalInterval(maxFollow); + const serviceInterval = this.calculateOptimalInterval(maxService); + + const option = { + xAxis: { + data: xAxisData, + }, + yAxis: [ + { + interval: followInterval, + max: Math.ceil(maxFollow / followInterval) * followInterval, + }, + { + interval: serviceInterval, + max: Math.ceil(maxService / serviceInterval) * serviceInterval, + }, + ], + series: [ + { data: dischargeFollowData }, + { data: outpatientFollowData }, + { data: pmiData }, + { data: pmoData }, + ], + }; + + this.myChart2.setOption(option); + }, + + // 璁$畻鏈�浼樼殑interval鍊� + calculateOptimalInterval(maxValue) { + if (maxValue <= 0) return 50; // 榛樿鍊� + + // 鏍规嵁鏈�澶у�艰绠楀悎閫傜殑闂撮殧 + const magnitude = Math.pow(10, Math.floor(Math.log10(maxValue))); + const stepRatio = maxValue / magnitude; + + let interval; + if (stepRatio > 5) { + interval = magnitude; + } else if (stepRatio > 2) { + interval = magnitude / 2; + } else { + interval = magnitude / 5; + } + + // 纭繚interval鏄暣鏁� + interval = Math.round(interval); + + // 闄愬埗鏈�灏忛棿闅� + return Math.max(interval, 50); + }, // 鑾峰彇绾跨姸鍥炬椂闂� async getregionAmountCollect() { //getregionAmountCollect(1, this.endatd, this.statd); @@ -428,11 +653,12 @@ this.series = [123, 123, 223, 212, 432, 123, 442, 234]; this.myEcharts2(); }, - // 绾挎�у浘 + // 绾挎�у浘鍙婃煴鐘跺浘 myEcharts2() { var echarts = require("echarts"); var myChart2 = echarts.init(document.getElementById("echars")); this.myChart2 = myChart2; + var option2 = { tooltip: { trigger: "axis", @@ -452,30 +678,12 @@ }, }, legend: { - data: [ - "鍑洪櫌闅忚閲�", - "褰卞儚闅忚閲�", - "鍦ㄩ櫌闅忚閲�", - "闂ㄨ瘖澶嶈瘖閫氱煡", - "鍑洪櫌澶嶈瘖閫氱煡", - "鍦ㄩ櫌璇勪及閲�", - ], + data: ["鍑洪櫌鏈嶅姟閲�", "闂ㄨ瘖鏈嶅姟閲�", "鍑洪櫌灏辫瘖浜烘", "闂ㄨ瘖灏辫瘖浜烘"], }, xAxis: [ { type: "category", - data: [ - "涓�鏈�", - "浜屾湀", - "涓夋湀", - "鍥涙湀", - "浜旀湀", - "鍏湀", - "涓冩湀", - "鍏湀", - "涔濇湀", - "鍗佹湀", - ], + data: [], // 鍒濆涓虹┖锛屽皢閫氳繃API鏁版嵁濉厖 axisPointer: { type: "shadow", }, @@ -486,18 +694,14 @@ type: "value", name: "闅忚閲�", min: 0, - max: 250, - interval: 50, axisLabel: { formatter: "{value} 浜�", }, }, { type: "value", - name: "澶嶈瘖/璇勪及娆℃暟", + name: "鏈嶅姟浜烘", min: 0, - max: 250, - interval: 50, axisLabel: { formatter: "{value} 娆�", }, @@ -506,38 +710,27 @@ grid: { top: "35%" }, series: [ { - name: "鍑洪櫌闅忚閲�", + name: "鍑洪櫌鏈嶅姟閲�", type: "bar", tooltip: { valueFormatter: function (value) { return value + " 浜�"; }, }, - data: [120, 150, 165, 90, 140, 200, 130, 85, 175, 95, 110, 160], + data: [], // 鍒濆涓虹┖锛屽皢閫氳繃API鏁版嵁濉厖 }, { - name: "褰卞儚闅忚閲�", + name: "闂ㄨ瘖鏈嶅姟閲�", type: "bar", tooltip: { valueFormatter: function (value) { return value + " 浜�"; }, }, - data: [102, 190, 135, 88, 175, 160, 83, 145, 200, 110, 97, 180], + data: [], // 鍒濆涓虹┖锛屽皢閫氳繃API鏁版嵁濉厖 }, { - name: "鍦ㄩ櫌闅忚閲�", - type: "bar", - tooltip: { - valueFormatter: function (value) { - return value + " 浜�"; - }, - }, - data: [145, 92, 178, 134, 167, 85, 199, 112, 156, 88, 120, 145], - }, - - { - name: "鍑洪櫌澶嶈瘖閫氱煡", + name: "鍑洪櫌灏辫瘖浜烘", type: "line", smooth: 0.3, yAxisIndex: 1, @@ -546,10 +739,10 @@ return value + " 娆�"; }, }, - data: [45, 123, 78, 156, 89, 34, 199, 112, 67, 145, 88, 175], + data: [], // 鍒濆涓虹┖锛屽皢閫氳繃API鏁版嵁濉厖 }, { - name: "闂ㄨ瘖澶嶈瘖閫氱煡", + name: "闂ㄨ瘖灏辫瘖浜烘", type: "line", smooth: 0.3, yAxisIndex: 1, @@ -558,41 +751,15 @@ return value + " 娆�"; }, }, - data: [102, 190, 135, 88, 175, 160, 83, 145, 200, 110, 97, 180], - }, - { - name: "鍦ㄩ櫌璇勪及閲�", - type: "line", - smooth: 0.3, - yAxisIndex: 1, - tooltip: { - valueFormatter: function (value) { - return value + " 娆�"; - }, - }, - data: [120, 150, 165, 90, 140, 200, 130, 85, 175, 95, 110, 160], + data: [], // 鍒濆涓虹┖锛屽皢閫氳繃API鏁版嵁濉厖 }, ], }; - myChart2.on("updateAxisPointer", function (event) { - const xAxisInfo = event.axesInfo[0]; - if (xAxisInfo) { - const dimension = xAxisInfo.value + 1; - myChart2.setOption({ - series: { - id: "pie", - label: { - formatter: "{b}: {@[" + dimension + "]} ", - }, - encode: { - value: dimension, - tooltip: dimension, - }, - }, - }); - } - }); + myChart2.setOption(option2); + + // 鍒濆鍔犺浇鏁版嵁 + this.getgraphdata(); }, // 楗肩姸鍥� myPieChart() { @@ -980,7 +1147,9 @@ min-height: 36px; border-radius: 20px; padding: 0 10px; + text-align: center; } + .grid-contents { min-height: 36px; border-radius: 20px; -- Gitblit v1.9.3