diff --git a/acupuncture-前台/src/api/indexCom.js b/acupuncture-前台/src/api/indexCom.js index 1b647a5f..4c77e047 100644 --- a/acupuncture-前台/src/api/indexCom.js +++ b/acupuncture-前台/src/api/indexCom.js @@ -114,5 +114,12 @@ export function patientTotal(data) { }); } // 诊疗信息 +export function zlInfo(data) { + return request({ + url: "/statistics/zlInfo", + method: "post", + data: data, + }); +} // 治疗类型 // 随访分布 diff --git a/acupuncture-前台/src/views/index.vue b/acupuncture-前台/src/views/index.vue index 9ff9269a..ed5f9388 100644 --- a/acupuncture-前台/src/views/index.vue +++ b/acupuncture-前台/src/views/index.vue @@ -17,13 +17,13 @@ -
+
@@ -69,9 +69,9 @@ export default { }, methods: { resize() { - this.$refs.patient.getRenew(); - this.$refs.JM.getRenew(); - this.$refs.XGZL.getRenew(); + // this.$refs.patient.getRenew(); + // this.$refs.JM.getRenew(); + // this.$refs.XGZL.getRenew(); }, // 周 月 季 年 radioChange(_data, _type, _timeType) { diff --git a/acupuncture-前台/src/views/indexCom/JM.vue b/acupuncture-前台/src/views/indexCom/JM.vue index 7fc5360f..2c6c4ebe 100644 --- a/acupuncture-前台/src/views/indexCom/JM.vue +++ b/acupuncture-前台/src/views/indexCom/JM.vue @@ -1,296 +1,362 @@ - + >>>.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 diff --git a/acupuncture-前台/src/views/indexCom/index.js b/acupuncture-前台/src/views/indexCom/index.js index 658574d9..a23f45a3 100644 --- a/acupuncture-前台/src/views/indexCom/index.js +++ b/acupuncture-前台/src/views/indexCom/index.js @@ -1,4 +1,5 @@ import * as echarts from "echarts"; +// -------- 患者信息统计 -------- // 患者总数 export const HZXX = { tooltip: { @@ -218,6 +219,232 @@ export const diseaseEcharts = { ], }; + +// -------- 诊疗信息统计 -------- +// 病种 +export const diagnoseEcharts = { + 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: { + name: "数量( 个 )", + type: "value", + minInterval: 1, + splitLine: { + show: true, + lineStyle: { + type: "dashed", + }, + }, + + }, + grid: { + top: "12%", + left: "1%", + right: "14%", + bottom: "0%", + containLabel: true, + }, + yAxis: { + type: "category", + data: [], + }, + series: [ + { + name: "数量：", + data: [], + type: "bar", + barMaxWidth: 24, //柱图宽度 + color: "#4f8bff", + }, + + ], +}; +// 体系 +export const systemEcharts = { + 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: [], + type: "bar", + barMaxWidth: 24, //柱图宽度 + color: "#4f8bff", + itemStyle: { + normal: { + //这里设置柱形图圆角 [左上角，右上角，右下角，左下角] + barBorderRadius: [50, 50, 0, 0], + }, + }, + }, + + ], +}; +// 体质 +export const physiqueEcharts = { + 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: [], + type: "bar", + barMaxWidth: 24, //柱图宽度 + color: "#4f8bff", + itemStyle: { + normal: { + //这里设置柱形图圆角 [左上角，右上角，右下角，左下角] + barBorderRadius: [50, 50, 0, 0], + }, + }, + }, + + ], +}; +// 体态 +export const postureEcharts = { + 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", "#ffcd6c", "#00d1a1", "#a794fe","#EE6666"], + series: [ + { + type: "pie", + radius: "80%", + avoidLabelOverlap: false, + label: { + show: false, + position: "center", + }, + labelLine: { + show: false, + }, + data: [], + }, + ], +}; // 患者信息 - 数据分析 export const HZXXSJFX = { tooltip: { diff --git a/acupuncture-前台/src/views/indexCom/patient.vue b/acupuncture-前台/src/views/indexCom/patient.vue index 722ac98a..c1f31125 100644 --- a/acupuncture-前台/src/views/indexCom/patient.vue +++ b/acupuncture-前台/src/views/indexCom/patient.vue @@ -158,7 +158,7 @@ { value: res.data.totalPatients, name: "女" - }, + } ]; // 年龄分布 let ageValue = res.data.age @@ -249,8 +249,8 @@ }, // 重新渲染图标 getRenew() { - this.Linepatient(); - this.columnar(); + // this.Linepatient(); + // this.columnar(); }, }, };