¶Ô±ÈÐÂÎļþ |
| | |
| | | import request from "@/utils/request"; |
| | | |
| | | |
| | | // æ¥è¯¢é¨è¯çç
人次åäººæ° |
| | | export function getEChartsPatMedOuthospCount(data) { |
| | | return request({ |
| | | url: "/smartor/patouthosp/selectPatMedOuthospCount", |
| | | method: "post", |
| | | data: data, |
| | | }); |
| | | } |
| | | // æ¥è¯¢åºãå
¥é¢çç
人次åäººæ° |
| | | export function getechartsListCountdata(data) { |
| | | return request({ |
| | | url: "/smartor/patinhosp/selectPatMedInhospListCount", |
| | | method: "post", |
| | | data: data, |
| | | }); |
| | | } |
| | | // æ¥è¯¢æ£è
é¨è¯è®°å½å表 |
| | | export function getechartsMedOuthospList(data) { |
| | | return request({ |
| | | url: "/smartor/patouthosp/selectPatMedOuthospList", |
| | | method: "post", |
| | | data: data, |
| | | }); |
| | | } |
| | | // é¦é¡µä¸é¨æ°æ® |
| | | export function getServiceStatistics(data) { |
| | | return request({ |
| | | url: "/smartor/serviceSubtask/getServiceStatistics", |
| | | method: "post", |
| | | data: data, |
| | | }); |
| | | } |
| | | // æ¥è¯¢æ£è
ä½é¢è®°å½å表 |
| | | export function getechartsMedInhospList(data) { |
| | | return request({ |
| | | url: "/smartor/patinhosp/selectPatMedInhospList", |
| | | method: "post", |
| | | data: data, |
| | | }); |
| | | } |
| | | |
| | | // æ¥è¯¢å½åç»é人èªå·±ï¼ç
åºãé¨é¨ï¼çæ£è
ä½é¢è®°å½å表 |
| | | export function getechartsandData(data) { |
| | | return request({ |
| | | url: "/smartor/patinhosp/selectPatMedInhospListByCondition", |
| | | method: "post", |
| | | data: data, |
| | | }); |
| | | } |
| | | |
| | | // åç§å®¤æå¡äººæ¬¡ |
| | | export function getDeptRanking(data) { |
| | | return request({ |
| | | url: "/smartor/patinhosp/getDeptRanking", |
| | | method: "post", |
| | | data: data, |
| | | }); |
| | | } |
| | |
| | | export * from './external' |
| | | export * from './Homeimage' |
| | | export * from './patientexternal' |
| | | export * from './EChartsdata' |
| | |
| | | <!-- å°±è¯ç»è®¡çå --> |
| | | <div class="grid-content bg-purple headerBox bgc1"> |
| | | <div class="title"> |
| | | æ£è
ç»è®¡<span |
| | | é¨è¯æå¡<span |
| | | style=" |
| | | font-size: 25px; |
| | | font-weight: 600; |
| | | text-shadow: 2px 4px 7px rgb(85 132 255 / 50%); |
| | | color: black; |
| | | " |
| | | >{{0}} (人)</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>{{ 0 }}</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>{{ 0 }}</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>{{ 0 }}</p> |
| | | <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; |
| | |
| | | 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">{{ 0 }}</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">{{ 0 }}</p> |
| | | <p style="color: red">{{ DischargeData.rs }}</p> |
| | | <div class="text-color2"> |
| | | <p>使£æå¡äººæ°</p> |
| | | <p>åºé¢æå¡éï¼äººæ¬¡ï¼</p> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | |
| | | <!-- echarsæ°æ®å¯è§å --> |
| | | <div class="grid-content bg-purple" style="min-height: 365px"> |
| | | <div class="title"> |
| | | å°±è¯ç»è®¡ |
| | | æå¡ç»è®¡ |
| | | <span>{{ endatd }} ~ {{ statd }}</span> |
| | | <el-radio-group |
| | | v-model="radio1" |
| | |
| | | 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="grid-contentsa bg-purple" style="margin-top: -180px"> |
| | | <div class="title"> |
| | | å¥åº·å®£æ |
| | | ç§å®¤æå¡é |
| | | <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" |
| | |
| | | type="index" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | prop="skuName" |
| | | width="88" |
| | | prop="deptname" |
| | | width="120" |
| | | 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 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="15"> |
| | | <!-- <el-col :span="24"> |
| | | <div class="grid-content bg-purple" style="min-height: 300px"> |
| | | <div class="title"> |
| | | 宣æç»è®¡ |
| | | <span class="el-icon-s-unfold moreIcon"></span> |
| | | </div> |
| | | <div class="cooperate"> |
| | | <!-- åä½åºå --> |
| | | <div class="pieChart" id="pieCharts"></div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="9"> |
| | | </el-col> --> |
| | | <!-- <el-col :span="9"> |
| | | <div class="grid-content bg-purple" style="min-height: 300px"> |
| | | <div class="title"> |
| | | å项æå¡ç»è®¡ |
| | |
| | | > |
| | | <el-col :span="7"> |
| | | <div style="display: flex"> |
| | | <div class="subtitle">é¨è¯é访</div> |
| | | <div class="subtitle">å½±åé访</div> |
| | | <div class="grid-contents bg-purple-light">0次</div> |
| | | </div> |
| | | </el-col> |
| | |
| | | </el-row> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | </el-col> --> |
| | | </el-row> |
| | | </div> |
| | | </div> |
| | |
| | | |
| | | <script> |
| | | import { |
| | | getoutpatientamount, |
| | | getInhospital, |
| | | getBarchart, |
| | | getQtemplateobj, |
| | | getEChartsPatMedOuthospCount, |
| | | getechartsListCountdata, |
| | | getechartsMedOuthospList, |
| | | getechartsMedInhospList, |
| | | getServiceStatistics, |
| | | getDeptRanking, |
| | | } from "@/api/AiCentre/index"; |
| | | import dayjs from "dayjs"; |
| | | import { data } from "jquery"; |
| | | |
| | | export default { |
| | | name: "home", |
| | |
| | | mypPieCharts: null, |
| | | lastWidth: window.innerWidth, |
| | | lastHeight: window.innerHeight, |
| | | radio1: "å¨", |
| | | radio1: "è¿ä¸å¹´", |
| | | ticketStatistics: {}, |
| | | timeTypeMap: { |
| | | å¨: "day", |
| | | æ: "month", |
| | | å¹´: "year", |
| | | }, |
| | | DischargeData: { |
| | | rs: "", |
| | | rc: "", |
| | | }, |
| | | OutpatientData: { |
| | | rs: "", |
| | | rc: "", |
| | | }, |
| | | order: "", |
| | | Count: "", |
| | | datatni: [], |
| | |
| | | SkuTop: [], |
| | | cylinderSeries: [], |
| | | cylinderXAxis: [], |
| | | dyat: 30, |
| | | customDateRange: [], // èªå®ä¹æ¥æèå´ |
| | | dyat: 365, |
| | | intervalId: null, |
| | | }; |
| | | }, |
| | |
| | | return dayjs().subtract(this.dyat, "day").format("YYYY-MM-DD HH:mm:ss"); |
| | | }, |
| | | 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.getoutpatientamount(); |
| | | // this.getInhospital(); |
| | | // this.getBarchart(); |
| | | this.getTopdata(); |
| | | this.getgraphdata(); |
| | | // this.getranking(); |
| | | this.$nextTick(function () { |
| | | this.getregionAmountCollect(); |
| | | this.myEcharts2(); |
| | | this.getnodeCollect(); |
| | | this.getSkuTop(); |
| | | }); |
| | |
| | | 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(); |
| | | }, |
| | |
| | | // const res = await getnodeCollect(); |
| | | // this.nodeCollect = res.data; |
| | | this.nodeCollect = [ |
| | | { name: "é¨è¯é访", value: 1232 }, |
| | | { name: "å½±åé访", value: 1232 }, |
| | | { name: "åºé¢é访", value: 342 }, |
| | | ]; |
| | | this.myPieChart(); |
| | | }, |
| | | // 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); |
| | | |
| | | // å¨æè®¡ç®intervalå¼ |
| | | 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); |
| | |
| | | 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", |
| | |
| | | }, |
| | | }, |
| | | legend: { |
| | | data: [ |
| | | "åºé¢é访é", |
| | | "é¨è¯é访é", |
| | | "å¨é¢é访é", |
| | | "é¨è¯å¤è¯éç¥", |
| | | "åºé¢å¤è¯éç¥", |
| | | "å¨é¢è¯ä¼°é", |
| | | ], |
| | | data: ["åºé¢æå¡é", "é¨è¯æå¡é", "åºé¢å°±è¯äººæ¬¡", "é¨è¯å°±è¯äººæ¬¡"], |
| | | }, |
| | | xAxis: [ |
| | | { |
| | | type: "category", |
| | | data: [ |
| | | "䏿", |
| | | "äºæ", |
| | | "䏿", |
| | | "åæ", |
| | | "äºæ", |
| | | "å
æ", |
| | | "䏿", |
| | | "å
«æ", |
| | | "乿", |
| | | "åæ", |
| | | ], |
| | | data: [], // åå§ä¸ºç©ºï¼å°éè¿APIæ°æ®å¡«å
|
| | | axisPointer: { |
| | | type: "shadow", |
| | | }, |
| | |
| | | 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} 次", |
| | | }, |
| | |
| | | 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:[], |
| | | 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:[], |
| | | data: [], // åå§ä¸ºç©ºï¼å°éè¿APIæ°æ®å¡«å
|
| | | }, |
| | | { |
| | | name: "å¨é¢é访é", |
| | | type: "bar", |
| | | tooltip: { |
| | | valueFormatter: function (value) { |
| | | return value + " 人"; |
| | | }, |
| | | }, |
| | | // data: [145, 92, 178, 134, 167, 85, 199, 112, 156, 88, 120, 145], |
| | | data:[], |
| | | |
| | | }, |
| | | |
| | | { |
| | | name: "åºé¢å¤è¯éç¥", |
| | | name: "åºé¢å°±è¯äººæ¬¡", |
| | | type: "line", |
| | | smooth: 0.3, |
| | | yAxisIndex: 1, |
| | |
| | | return value + " 次"; |
| | | }, |
| | | }, |
| | | // data: [45, 123, 78, 156, 89, 34, 199, 112, 67, 145, 88, 175], |
| | | data:[], |
| | | |
| | | data: [], // åå§ä¸ºç©ºï¼å°éè¿APIæ°æ®å¡«å
|
| | | }, |
| | | { |
| | | name: "é¨è¯å¤è¯éç¥", |
| | | name: "é¨è¯å°±è¯äººæ¬¡", |
| | | type: "line", |
| | | smooth: 0.3, |
| | | yAxisIndex: 1, |
| | |
| | | return value + " 次"; |
| | | }, |
| | | }, |
| | | // data: [102, 190, 135, 88, 175, 160, 83, 145, 200, 110, 97, 180], |
| | | data:[], |
| | | |
| | | }, |
| | | { |
| | | 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:[], |
| | | |
| | | 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() { |
| | |
| | | }, |
| | | dataset: { |
| | | source: [ |
| | | ["product", "2020", "2021", "2022", "2023", "2024", "2025"], |
| | | // ["åºé¢å®£æ", 56, 82, 88, 70, 53, 85], |
| | | // ["å¨é¢å®£æ", 51, 51, 55, 53, 73, 68], |
| | | // ["é¨è¯å®£æ", 40, 62, 69, 36, 45, 32], |
| | | ["åºé¢å®£æ", ], |
| | | ["å¨é¢å®£æ", ], |
| | | ["é¨è¯å®£æ", ], |
| | | ["product", "2012", "2013", "2014", "2015", "2016", "2017"], |
| | | ["åºé¢å®£æ", 56, 82, 88, 70, 53, 85], |
| | | ["å¨é¢å®£æ", 51, 51, 55, 53, 73, 68], |
| | | ["é¨è¯å®£æ", 40, 62, 69, 36, 45, 32], |
| | | ], |
| | | }, |
| | | xAxis: { type: "category" }, |
| | |
| | | .echars1 { |
| | | flex: 1; |
| | | } |
| | | } |
| | | .dept-table-container { |
| | | flex: 1; |
| | | display: flex; |
| | | flex-direction: column; |
| | | min-height: 0; /* éè¦ï¼å
许å
容æ¶ç¼© */ |
| | | } |
| | | ::v-deep .el-table { |
| | | td:first-child { |
| | |
| | | min-height: 36px; |
| | | border-radius: 20px; |
| | | padding: 0 10px; |
| | | text-align: center; |
| | | } |
| | | .grid-contentsa { |
| | | min-height: 600px; |
| | | border-radius: 20px; |
| | | padding: 0 10px; |
| | | text-align: center; |
| | | } |
| | | |
| | | .grid-contents { |
| | | min-height: 36px; |
| | | border-radius: 20px; |