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 | 406 +++++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 263 insertions(+), 143 deletions(-) diff --git a/src/views/index.vue b/src/views/index.vue index 9b1f7fc..8b63e39 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -20,7 +20,7 @@ <el-row :gutter="20"> <el-col :span="10"> <div class="home-user-task-stats"> - <p>{{ OutpatientData.rs }}</p> + <p>{{ OutpatientData.rc }}</p> <div class="text-color2"> <p>闂ㄨ瘖灏辫瘖閲忥紙浜烘锛�</p> </div> @@ -28,7 +28,7 @@ </el-col> <el-col :span="10"> <div class="home-user-task-stats"> - <p>{{ OutpatientData.rc }}</p> + <p>{{ OutpatientData.rs }}</p> <div class="text-color2"> <p>闂ㄨ瘖鏈嶅姟閲忥紙浜烘锛�</p> </div> @@ -62,7 +62,7 @@ <el-row :gutter="20"> <el-col :span="10"> <div class="home-user-task-stats"> - <p style="color: red">{{ DischargeData.rs }}</p> + <p style="color: red">{{ DischargeData.rc }}</p> </div> <div class="text-color2"> <p>鍑洪櫌灏辫瘖閲忥紙浜烘锛�</p> @@ -70,7 +70,7 @@ </el-col> <el-col :span="10"> <div class="home-user-task-stats"> - <p style="color: red">{{ DischargeData.rc }}</p> + <p style="color: red">{{ DischargeData.rs }}</p> <div class="text-color2"> <p>鍑洪櫌鏈嶅姟閲忥紙浜烘锛�</p> </div> @@ -94,24 +94,39 @@ 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"> @@ -128,15 +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> @@ -292,7 +305,7 @@ getechartsListCountdata, getechartsMedOuthospList, getechartsMedInhospList, - getechartsandData, + getServiceStatistics, getDeptRanking, } from "@/api/AiCentre/index"; import dayjs from "dayjs"; @@ -308,8 +321,13 @@ mypPieCharts: null, lastWidth: window.innerWidth, lastHeight: window.innerHeight, - radio1: "鍛�", + radio1: "杩戜竴鍛�", ticketStatistics: {}, + timeTypeMap: { + 鍛�: "day", + 鏈�: "month", + 骞�: "year", + }, DischargeData: { rs: "", rc: "", @@ -327,7 +345,8 @@ SkuTop: [], cylinderSeries: [], cylinderXAxis: [], - dyat: 30, + customDateRange: [], // 鑷畾涔夋棩鏈熻寖鍥� + dyat: 6, intervalId: null, }; }, @@ -340,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.getTopdata(); this.getgraphdata(); - this.getranking(); + // this.getranking(); this.$nextTick(function () { - this.getregionAmountCollect(); + this.myEcharts2(); this.getnodeCollect(); this.getSkuTop(); }); @@ -369,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.refreshData(); + }, + + // 澶勭悊鑷畾涔夋棩鏈熷彉鍖� + handleCustomDateChange(range) { + if (!range || range.length !== 2) return; + + this.customDateRange = range; + this.refreshData(); + }, + + // 缁熶竴鍒锋柊鏁版嵁鐨勬柟娉� + refreshData() { this.getgraphdata(); - this.getranking(); + // this.getranking(); this.getTopdata(); - this.getregionAmountCollect(); + this.myEcharts2(); this.getnodeCollect(); this.getSkuTop(); }, @@ -396,25 +441,35 @@ }, // 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: "鏀惧皠绉�1" }, - { amount: 0, count: 67, skuId: "0", skuName: "鏀惧皠绉�2" }, - ]; + 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" }, + // ]; }, // 鑾峰彇澶撮儴鏁版嵁 getTopdata() { @@ -441,31 +496,154 @@ } }); }, - // 鑾峰彇灏辫瘖鏁伴噺 - getranking() { - let Rankingdata = { - startDate: this.endatd, - endDate: this.statd, - cy: 1, - }; - getDeptRanking(Rankingdata).then((res) => {}); - }, // 鑾峰彇涓儴绾挎煴鍥炬暟鎹� - getgraphdata() { - let Outhospdata = { + getranking() {}, + + async getgraphdata() { + let params = { startDate: this.endatd, endDate: this.statd, - cy: 1, + timeType: this.getTimeType() }; - let Inhospdata = { - startDate: this.endatd, - endDate: this.statd, - cy: 1, - }; - getechartsMedOuthospList(Outhospdata).then((res) => {}); - getechartsMedInhospList(Inhospdata).then((res) => {}); + + 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); @@ -475,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", @@ -499,30 +678,12 @@ }, }, legend: { - data: [ - "鍑洪櫌闅忚閲�", - "闂ㄨ瘖闅忚閲�", - // "鍦ㄩ櫌闅忚閲�", - // "闂ㄨ瘖澶嶈瘖閫氱煡", - "鍑洪櫌鏈嶅姟浜烘", - "闂ㄨ瘖鏈嶅姟浜烘", - ], + data: ["鍑洪櫌鏈嶅姟閲�", "闂ㄨ瘖鏈嶅姟閲�", "鍑洪櫌灏辫瘖浜烘", "闂ㄨ瘖灏辫瘖浜烘"], }, xAxis: [ { type: "category", - data: [ - "涓�鏈�", - "浜屾湀", - "涓夋湀", - "鍥涙湀", - "浜旀湀", - "鍏湀", - "涓冩湀", - "鍏湀", - "涔濇湀", - "鍗佹湀", - ], + data: [], // 鍒濆涓虹┖锛屽皢閫氳繃API鏁版嵁濉厖 axisPointer: { type: "shadow", }, @@ -533,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} 娆�", }, @@ -553,50 +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: "褰卞儚闅忚閲�", - // type: "bar", - // tooltip: { - // valueFormatter: function (value) { - // return value + " 浜�"; - // }, - // }, - // data: [102, 190, 135, 88, 175, 160, 83, 145, 200, 110, 97, 180], - // }, { - name: "闂ㄨ瘖闅忚閲�", + name: "闂ㄨ瘖鏈嶅姟閲�", type: "bar", tooltip: { valueFormatter: function (value) { return value + " 浜�"; }, }, - data: [145, 92, 178, 134, 167, 85, 199, 112, 156, 88, 120, 145], + data: [], // 鍒濆涓虹┖锛屽皢閫氳繃API鏁版嵁濉厖 }, - - // { - // name: "鍑洪櫌澶嶈瘖閫氱煡", - // type: "line", - // smooth: 0.3, - // yAxisIndex: 1, - // tooltip: { - // valueFormatter: function (value) { - // return value + " 娆�"; - // }, - // }, - // data: [45, 123, 78, 156, 89, 34, 199, 112, 67, 145, 88, 175], - // }, { - name: "鍑洪櫌鏈嶅姟浜烘", + name: "鍑洪櫌灏辫瘖浜烘", type: "line", smooth: 0.3, yAxisIndex: 1, @@ -605,10 +739,10 @@ return value + " 娆�"; }, }, - data: [102, 190, 135, 88, 175, 160, 83, 145, 200, 110, 97, 180], + data: [], // 鍒濆涓虹┖锛屽皢閫氳繃API鏁版嵁濉厖 }, { - name: "闂ㄨ瘖鏈嶅姟浜烘", + name: "闂ㄨ瘖灏辫瘖浜烘", type: "line", smooth: 0.3, yAxisIndex: 1, @@ -617,29 +751,15 @@ 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() { -- Gitblit v1.9.3