From f13c99f6d68c4faf083ca269e9925f331c9bfdde Mon Sep 17 00:00:00 2001 From: WXL (wul) <wl_5969728@163.com> Date: 星期二, 19 八月 2025 13:53:00 +0800 Subject: [PATCH] 统计页面数据接入 --- src/views/index.vue | 159 ++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 116 insertions(+), 43 deletions(-) diff --git a/src/views/index.vue b/src/views/index.vue index 90b71a1..500289c 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -94,15 +94,30 @@ 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> <!-- 涓儴绾挎�ф煴鐘跺浘 --> @@ -118,8 +133,8 @@ 绉戝鏈嶅姟閲� <span>{{ endatd }} ~ {{ statd }}</span> </div> - <div style="max-height: 690px; width: 100%; overflow: auto"> - <el-table style="width: 100%" :data="SkuTop"> + <div class="dept-table-container"> + <el-table v-if="SkuTop.length > 0" style="width: 100%" :data="SkuTop" :height="tableHeight"> <template v-for="(item, index) in SkuTop"></template> <el-table-column prop="order" @@ -129,7 +144,7 @@ ></el-table-column> <el-table-column prop="deptname" - width="88" + width="120" class-name="name" ></el-table-column> @@ -137,24 +152,26 @@ <template slot-scope="scope"> {{ scope.row.rc }}娆� </template> </el-table-column> </el-table> + <div v-else class="empty-tip"> + <el-empty description="鏆傛棤绉戝鏈嶅姟鏁版嵁"></el-empty> +</div> </div> </div> </el-col> </el-row> <!-- 搴曢儴涓�涓� --> <el-row :gutter="20" style="margin-bottom: 20px"> - <el-col :span="24"> + <!-- <el-col :span="24"> <div class="grid-content bg-purple" style="min-height: 300px"> <div class="title"> 瀹f暀缁熻 <span class="el-icon-s-unfold moreIcon"></span> </div> <div class="cooperate"> - <!-- 鍚堜綔鍖哄煙 --> <div class="pieChart" id="pieCharts"></div> </div> </div> - </el-col> + </el-col> --> <!-- <el-col :span="9"> <div class="grid-content bg-purple" style="min-height: 300px"> <div class="title"> @@ -306,7 +323,7 @@ mypPieCharts: null, lastWidth: window.innerWidth, lastHeight: window.innerHeight, - radio1: "鍛�", + radio1: "杩戜竴骞�", ticketStatistics: {}, timeTypeMap: { 鍛�: "day", @@ -330,7 +347,8 @@ SkuTop: [], cylinderSeries: [], cylinderXAxis: [], - dyat: 6, + customDateRange: [], // 鑷畾涔夋棩鏈熻寖鍥� + dyat: 365, intervalId: null, }; }, @@ -343,17 +361,33 @@ 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"); }, + tableHeight() { + // 鏍规嵁鏁版嵁閲忓姩鎬佽绠楅珮搴� + const rowHeight = 40; // 姣忚澶х害楂樺害 + const headerHeight = 40; // 琛ㄥご楂樺害 + const minHeight = 500; // 鏈�灏忛珮搴� + const maxHeight = 600; // 鏈�澶ч珮搴� + + const calculatedHeight = this.SkuTop.length * rowHeight + headerHeight; + return Math.min(Math.max(calculatedHeight, minHeight), maxHeight); + } }, created() { this.getTopdata(); this.getgraphdata(); - this.getranking(); + // this.getranking(); this.$nextTick(function () { this.myEcharts2(); this.getnodeCollect(); @@ -372,15 +406,35 @@ methods: { // 鏀瑰彉鏃堕棿浜嬩欢 changes() { - if (this.radio1 == "鍛�") { - this.dyat = 6; - } else if (this.radio1 == "鏈�") { - this.dyat = 30; - } else { - this.dyat = 364; + 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.myEcharts2(); this.getnodeCollect(); @@ -461,12 +515,7 @@ let params = { startDate: this.endatd, endDate: this.statd, - timeType: - this.radio1 === "鍛�" - ? "day" - : this.radio1 === "鏈�" - ? "month" - : "year", + timeType: this.getTimeType() }; try { @@ -477,6 +526,28 @@ } 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) { // 鎸夋椂闂存帓搴忕‘淇濇暟鎹『搴忔纭� @@ -491,22 +562,18 @@ const pmoData = []; sortedData.forEach((item) => { - // 鏍规嵁鏃堕棿绫诲瀷鏍煎紡鍖栨樉绀� - let timeLabel = item.timePeriod; - if (this.radio1 === "鍛�") { - timeLabel = dayjs(item.timePeriod).format("MM-DD"); - } else if (this.radio1 === "鏈�") { - timeLabel = item.timePeriod.split("-")[1] + "鏈�"; - } else { - timeLabel = item.timePeriod.split("-")[0] + "骞�"; - } + // 鏍规嵁鏃堕棿绫诲瀷鏍煎紡鍖栨樉绀� + 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); - }); + xAxisData.push(timeLabel); + dischargeFollowData.push(item.dischargeFollowCount); + outpatientFollowData.push(item.outpatientFollowCount); + pmiData.push(item.pmiCount); + pmoData.push(item.pmoCount); +}); // 鏇存柊鍥捐〃 this.updateChart( @@ -837,6 +904,12 @@ flex: 1; } } +.dept-table-container { + flex: 1; + display: flex; + flex-direction: column; + min-height: 0; /* 閲嶈锛氬厑璁稿唴瀹规敹缂� */ +} ::v-deep .el-table { td:first-child { .cell { -- Gitblit v1.9.3