From 1534347f8730f4394a8959ebe3bbd655d27a4726 Mon Sep 17 00:00:00 2001 From: "1747191978@qq.com" <1942943850@qq.com> Date: Mon, 17 Feb 2025 11:16:46 +0800 Subject: [PATCH] =?UTF-8?q?=E6=82=A3=E8=80=85=E7=BB=9F=E8=AE=A1=EF=BC=88?= =?UTF-8?q?=E6=82=A3=E8=80=85=E6=80=BB=E6=95=B0=E3=80=81=E6=80=A7=E5=88=AB?= =?UTF-8?q?=E3=80=81=E5=B9=B4=E9=BE=84=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- acupuncture-前台/src/api/indexCom.js | 11 + acupuncture-前台/src/views/index.vue | 2 +- acupuncture-前台/src/views/indexCom/index.js | 185 ++++++- .../src/views/indexCom/patient.vue | 515 ++++++++++-------- 4 files changed, 446 insertions(+), 267 deletions(-) diff --git a/acupuncture-前台/src/api/indexCom.js b/acupuncture-前台/src/api/indexCom.js index c1c452df..1b647a5f 100644 --- a/acupuncture-前台/src/api/indexCom.js +++ b/acupuncture-前台/src/api/indexCom.js @@ -105,3 +105,14 @@ export function queryData(data) { data: data, }); } +// 患者信息 +export function patientTotal(data) { + return request({ + url: "/statistics/patientTotal", + method: "post", + data: data, + }); +} +// 诊疗信息 +// 治疗类型 +// 随访分布 diff --git a/acupuncture-前台/src/views/index.vue b/acupuncture-前台/src/views/index.vue index cc1de33b..9ff9269a 100644 --- a/acupuncture-前台/src/views/index.vue +++ b/acupuncture-前台/src/views/index.vue @@ -6,7 +6,7 @@ diff --git a/acupuncture-前台/src/views/indexCom/index.js b/acupuncture-前台/src/views/indexCom/index.js index 06be9f74..32d069cc 100644 --- a/acupuncture-前台/src/views/indexCom/index.js +++ b/acupuncture-前台/src/views/indexCom/index.js @@ -1,5 +1,5 @@ import * as echarts from "echarts"; -// 患者信息 +// 患者总数 export const HZXX = { tooltip: { trigger: "item", @@ -52,8 +52,48 @@ export const HZXX = { }, ], }; -// 患者信息 - 数据分析 -export const HZXXSJFX = { +// 患者性别 +export const gende = { + tooltip: { + trigger: "item", + }, + title: { + text: "", + left: "center", + top: "40%", + textStyle: { + textAlign: "center", + color: "#393D4E", + fontSize: 40, + fontWeight: 600, + }, + }, + grid: { + top: "0%", + left: "0", + right: "0%", + bottom: "0%", + containLabel: true, + }, + color: ["#4F8BFF", "#FE4943"], + series: [ + { + type: "pie", + radius: "80%", + avoidLabelOverlap: false, + label: { + show: false, + position: "center", + }, + labelLine: { + show: false, + }, + data: [], + }, + ], +}; +// 年龄分布 +export const ageEcharts = { tooltip: { trigger: "axis", axisPointer: { @@ -78,20 +118,7 @@ export const HZXXSJFX = { }, xAxis: { type: "category", - data: [ - "2023-01", - "2023-02", - "2023-03", - "2023-04", - "2023-05", - "2023-06", - "2023-07", - "2023-08", - "2023-09", - "2023-10", - "2023-11", - "2023-12", - ], + data: ["<40","41-50","51-60","61-70","71-80",">80",], }, grid: { top: "12%", @@ -101,7 +128,7 @@ export const HZXXSJFX = { containLabel: true, }, yAxis: { - name: "单位( 个 )", + name: "数量( 个 )", type: "value", minInterval: 1, splitLine: { @@ -113,8 +140,8 @@ export const HZXXSJFX = { }, series: [ { - name: "仅溶栓人数", - data: [20, 20, 50, 80, 70, 11, 15], + name: "<40", + data: [], type: "bar", barMaxWidth: 24, //柱图宽度 color: "#4f8bff", @@ -126,8 +153,8 @@ export const HZXXSJFX = { }, }, { - name: "仅介入人数", - data: [120, 200, 150, 80, 70, 110, 10], + name: "41-50", + data: [], type: "bar", barMaxWidth: 24, //柱图宽度 color: "#ffcd6c", @@ -138,12 +165,114 @@ export const HZXXSJFX = { }, }, }, + { + name: "51-60", + data: [], + type: "bar", + barMaxWidth: 24, //柱图宽度 + color: "#ffcd6c", + itemStyle: { + normal: { + //这里设置柱形图圆角 [左上角，右上角，右下角，左下角] + barBorderRadius: [50, 50, 0, 0], + }, + }, + }, + { + name: "61-70", + data: [], + type: "bar", + barMaxWidth: 24, //柱图宽度 + color: "#4f8bff", + itemStyle: { + normal: { + //这里设置柱形图圆角 [左上角，右上角，右下角，左下角] + barBorderRadius: [50, 50, 0, 0], + }, + }, + }, + { + name: "71-80", + data: [120, 200, 150, 80, 70, 110, 10], + type: "bar", + barMaxWidth: 24, //柱图宽度 + color: "#ffcd6c", + itemStyle: { + normal: { + //这里设置柱形图圆角 [左上角，右上角，右下角，左下角] + barBorderRadius: [50, 50, 0, 0], + }, + }, + }, + { + name: ">80", + data: [], + type: "bar", + barMaxWidth: 24, //柱图宽度 + color: "#ffcd6c", + itemStyle: { + normal: { + //这里设置柱形图圆角 [左上角，右上角，右下角，左下角] + barBorderRadius: [50, 50, 0, 0], + }, + }, + }, + ], +}; + +// 患者信息 - 数据分析 +export const HZXXSJFX = { + tooltip: { + trigger: "axis", + axisPointer: { + type: "cross", + label: { + backgroundColor: "#6a7985", + }, + }, + formatter: function (params) { + let res1 = params[0].name; + for (var i = 0, l = params.length; i < l; i++) { + res1 += + "
" + + `` + + params[i].seriesName + + " : " + + params[i].value + + "个"; + } + return res1; + }, + }, + xAxis: { + type: "category", + data: ["性别"], + }, + grid: { + top: "12%", + left: "5%", + right: "2%", + bottom: "0%", + containLabel: true, + }, + yAxis: { + name: "数量( 个 )", + type: "value", + minInterval: 1, + splitLine: { + show: true, + lineStyle: { + type: "dashed", + }, + }, + }, + series: [ { - name: "未溶栓且未介入人数", - data: [120, 200, 150, 80, 70, 110, 15], + name: "男", + data: [20, 20, 50, 80, 70, 11, 15], type: "bar", barMaxWidth: 24, //柱图宽度 - color: "#00d1a1", + color: "#4f8bff", itemStyle: { normal: { //这里设置柱形图圆角 [左上角，右上角，右下角，左下角] @@ -152,11 +281,11 @@ export const HZXXSJFX = { }, }, { - name: "溶栓+介入人数", - data: [120, 200, 150, 80, 70, 110, 15], + name: "女", + data: [120, 200, 150, 80, 70, 110, 10], type: "bar", barMaxWidth: 24, //柱图宽度 - color: "#a794fe", + color: "#ffcd6c", itemStyle: { normal: { //这里设置柱形图圆角 [左上角，右上角，右下角，左下角] diff --git a/acupuncture-前台/src/views/indexCom/patient.vue b/acupuncture-前台/src/views/indexCom/patient.vue index a9bd3de7..7fbf5e59 100644 --- a/acupuncture-前台/src/views/indexCom/patient.vue +++ b/acupuncture-前台/src/views/indexCom/patient.vue @@ -1,246 +1,285 @@ + >>>.el-card__body { + padding: 10px 0 !important; + } + + .dis { + display: flex; + } + + .header-title { + font-size: 18px; + } + + .title-box { + padding: 10px 20px; + border-bottom: 1px solid #dfe6ec; + } + + .dian-box { + align-items: center; + } + + .dian { + display: inline-block; + width: 16px; + height: 16px; + border-radius: 50%; + margin: 0 10px; + } + + .title-box { + justify-content: space-between; + } + + .>>>.el-radio--small.is-bordered { + margin-right: 20px !important; + margin-left: 0 !important; + } + + >>>.el-radio__input { + display: none; + } + + >>>.el-radio__label { + padding-left: 5px; + } + + .app-container { + padding: 0; + display: flex; + justify-content: space-between; + } + + .title { + display: flex; + align-items: center; + font-size: 20px; + font-weight: 600; + } + + .title-bor { + display: inline-block; + height: 20px; + width: 6px; + background: #4f8bff; + margin-right: 10px; + border-radius: 8px; + } + \ No newline at end of file