From ac8e0d29987aafdd912f4aa2b781db402bddca4a Mon Sep 17 00:00:00 2001 From: miaojiale <1123971748@qq.com> Date: Mon, 10 Jul 2023 17:27:40 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E8=81=94=E8=B0=83=EF=BC=8C?= =?UTF-8?q?=E7=BC=BA=E5=9C=B0=E5=9B=BE=E9=83=A8=E5=88=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/api/screen.js | 90 +++++ src/views/dataAnalysis/Bar/BarChart.vue | 11 +- src/views/dataAnalysis/Map/index.vue | 5 + src/views/dataAnalysis/Pie/PieChart.vue | 70 ++-- src/views/dataAnalysis/Pie/PieChartFour.vue | 7 +- src/views/dataAnalysis/Pie/PieChartTwo.vue | 10 +- src/views/dataAnalysis/index.vue | 348 ++++++++++++++------ yarn.lock | 26 +- 9 files changed, 415 insertions(+), 154 deletions(-) create mode 100644 src/api/screen.js diff --git a/package.json b/package.json index 4454aae..b164ce3 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "core-js": "^3.6.5", "crypto-js": "^4.0.0", "dayjs": "^1.8.28", - "echarts": "4.8.0", + "echarts": "5.3.0", "element-ui": "^2.15.2", "js-cookie": "^2.2.1", "jsbarcode": "^3.11.5", diff --git a/src/api/screen.js b/src/api/screen.js new file mode 100644 index 0000000..c4f2bad --- /dev/null +++ b/src/api/screen.js @@ -0,0 +1,90 @@ +import request from "@/utils/request" + +/* 总体数据 */ +export function screenOverview(params = {}) { + return request({ + url: "/disease-data/data/screen/overview", + method: "get", + params, + }) +} +// 医联体地图 +export function unionList(params = {}) { + return request({ + url: "/disease-data/data/screen/union", + method: "get", + params, + }) +} +//近六个月上报量 +export function sixMonthList(params = {}) { + return request({ + url: "/disease-data/data/screen/union/sixMonth", + method: "get", + params, + }) +} +//性别分布 +export function genderCount(params = {}) { + return request({ + url: "/disease-data/data/screen/genderCount", + method: "get", + params, + }) +} +//年龄段分布 +export function ageCount(params = {}) { + return request({ + url: "/disease-data/data/screen/ageCount", + method: "get", + params, + }) +} +//风险分布 +export function riskCount(params = {}) { + return request({ + url: "/disease-data/data/screen/riskCount", + method: "get", + params, + }) +} +//应答情况 +export function checkCondition(params = {}) { + return request({ + url: "/disease-data/data/screen/checkCondition", + method: "get", + params, + }) +} +// 良性疾病 +export function esophagusBenign(params = {}) { + return request({ + url: "/disease-data/data/screen/esophagus/benign", + method: "get", + params, + }) +} +// 良性疾病 +export function gastricBenign(params = {}) { + return request({ + url: "/disease-data/data/screen/gastric/benign", + method: "get", + params, + }) +} +// 胃癌内镜检出率 +export function cancerFound(params = {}) { + return request({ + url: "/disease-data/data/screen/gastric/cancer", + method: "get", + params, + }) +} +// 早癌占比 +export function earlyGastric(params = {}) { + return request({ + url: "/disease-data/data/screen/earlyGastric/cancer", + method: "get", + params, + }) +} diff --git a/src/views/dataAnalysis/Bar/BarChart.vue b/src/views/dataAnalysis/Bar/BarChart.vue index be8dbc6..cc2bda8 100644 --- a/src/views/dataAnalysis/Bar/BarChart.vue +++ b/src/views/dataAnalysis/Bar/BarChart.vue @@ -70,11 +70,16 @@ export default { const option = { tooltip: { trigger: "axis", - formatter: "{b}检出率" + ":" + "{c}%", + // formatter: "{b}检出率" + ":" + "{c}%", + valueFormatter: (value) => "检出率:" + value + "%", axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: "shadow", // 默认为直线，可选为：'line' | 'shadow' }, + backgroundColor: "rgba(50,50,50,0.7)", + textStyle: { + color: "#fff", + }, }, grid: { top: "20%", @@ -133,7 +138,7 @@ export default { axisLabel: { show: true, interval: "0", - rotate: 20, + rotate: 25, textStyle: { color: "#fff", //X轴文字颜色 }, @@ -143,7 +148,7 @@ export default { { type: "bar", stack: "vistors", - barWidth: "30%", + barWidth: 15, data: [], itemStyle: { normal: { diff --git a/src/views/dataAnalysis/Map/index.vue b/src/views/dataAnalysis/Map/index.vue index ca2b0c5..41dc594 100644 --- a/src/views/dataAnalysis/Map/index.vue +++ b/src/views/dataAnalysis/Map/index.vue @@ -71,6 +71,11 @@ export default { : params.name return str }, + // valueFormatter: (value) => value + "%", + backgroundColor: "rgba(50,50,50,0.7)", + textStyle: { + color: "#fff", + }, // textStyle: { fontSize: 14, fontFamily: "fzzz", color: "#fff" }, // backgroundColor: "rgba(0,0,0,0.3)", // borderColor: "rgba(0,0,0,0.3)", diff --git a/src/views/dataAnalysis/Pie/PieChart.vue b/src/views/dataAnalysis/Pie/PieChart.vue index 5bf12b1..0a19f27 100644 --- a/src/views/dataAnalysis/Pie/PieChart.vue +++ b/src/views/dataAnalysis/Pie/PieChart.vue @@ -41,7 +41,37 @@ export default { data() { return { chart: null, - pieConfig: { + pieConfig: {}, + } + }, + watch: { + chartData: { + deep: true, + handler(val) { + this.setOptions(val) + }, + }, + }, + mounted() { + this.$nextTick(() => { + this.initChart() + }) + }, + beforeDestroy() { + if (!this.chart) { + return + } + this.chart.dispose() + this.chart = null + }, + methods: { + initChart() { + this.chart = echarts.init(this.$el) + this.setOptions(this.chartData) + }, + setOptions(chartData) { + // if (!chartData.data) return + this.pieConfig = { title: { text: this.title, subtext: `筛查总例数 {number|${this.totalNum}}`, @@ -62,6 +92,11 @@ export default { }, tooltip: { trigger: "item", + valueFormatter: (value) => value + "%", + backgroundColor: "rgba(50,50,50,0.7)", + textStyle: { + color: "#fff", + }, }, legend: { orient: "horizontal", @@ -93,7 +128,7 @@ export default { { name: this.title, type: "pie", - radius: "50%", + radius: "44%", data: this.chartData, emphasis: { itemStyle: { @@ -104,36 +139,7 @@ export default { }, }, ], - }, - } - }, - watch: { - chartData: { - deep: true, - handler(val) { - this.setOptions(val) - }, - }, - }, - mounted() { - this.$nextTick(() => { - this.initChart() - }) - }, - beforeDestroy() { - if (!this.chart) { - return - } - this.chart.dispose() - this.chart = null - }, - methods: { - initChart() { - this.chart = echarts.init(this.$el) - this.setOptions(this.chartData) - }, - setOptions(chartData) { - // if (!chartData.data) return + } let option = JSON.parse( JSON.stringify(Object.assign(this.pieConfig, this.chartConfig)) ) diff --git a/src/views/dataAnalysis/Pie/PieChartFour.vue b/src/views/dataAnalysis/Pie/PieChartFour.vue index 6f865e6..826e036 100644 --- a/src/views/dataAnalysis/Pie/PieChartFour.vue +++ b/src/views/dataAnalysis/Pie/PieChartFour.vue @@ -92,6 +92,11 @@ export default { }, tooltip: { trigger: "item", + valueFormatter: (value) => value + "%", + backgroundColor: "rgba(50,50,50,0.7)", + textStyle: { + color: "#fff", + }, }, legend: { show: true, @@ -128,7 +133,7 @@ export default { { name: this.title, type: "pie", - radius: "50%", + radius: "44%", data: this.chartData, emphasis: { itemStyle: { diff --git a/src/views/dataAnalysis/Pie/PieChartTwo.vue b/src/views/dataAnalysis/Pie/PieChartTwo.vue index 8d7e060..db031e2 100644 --- a/src/views/dataAnalysis/Pie/PieChartTwo.vue +++ b/src/views/dataAnalysis/Pie/PieChartTwo.vue @@ -73,7 +73,7 @@ export default { // if (!chartData.data) return let option = { title: { - text: this.title + "\n\n" + `{number|${this.totalNum}}`, + // text: this.title + "\n\n" + `{number|${this.totalNum}}`, left: "center", top: "34%", textStyle: { @@ -90,6 +90,11 @@ export default { }, tooltip: { trigger: "item", + valueFormatter: (value) => value + "%", + backgroundColor: "rgba(50,50,50,0.7)", + textStyle: { + color: "#fff", + }, }, legend: { show: true, @@ -123,7 +128,8 @@ export default { name: this.title, type: "pie", top: "-18%", - radius: ["38%", "50%"], + radius: "44%", + // radius: ["30%", "44%"], data: this.chartData, emphasis: { itemStyle: { diff --git a/src/views/dataAnalysis/index.vue b/src/views/dataAnalysis/index.vue index cdb0e42..81a4323 100644 --- a/src/views/dataAnalysis/index.vue +++ b/src/views/dataAnalysis/index.vue @@ -41,7 +41,7 @@
- 当前季度上报量机构排名 + 近六个月上报量机构排名
{{ index + 1 }}
-
{{ item.name }}
-
{{ item.value }}
+
{{ item.unionName }}
+
{{ item.count }}
@@ -130,9 +130,9 @@
@@ -155,16 +155,34 @@ import Map from "./Map/index.vue" import PieChart from "./Pie/PieChart.vue" import PieChartFour from "./Pie/PieChartFour.vue" import PieChartTwo from "./Pie/PieChartTwo.vue" +import { + screenOverview, + unionList, + sixMonthList, + genderCount, + ageCount, + riskCount, + checkCondition, + esophagusBenign, + gastricBenign, + cancerFound, + earlyGastric, +} from "@/api/screen.js" export default { components: { Map, PieChart, PieChartFour, BarChart, PieChartTwo }, data() { return { overAllData: [ - { label: "机构总数", prop: "", value: 191, suffix: "家" }, - { label: "筛查总例数", prop: "", value: 139694, suffix: "" }, - { label: "中高危占比", prop: "", value: 37, suffix: "%" }, - { label: "早诊率", prop: "", value: 91, suffix: "%" }, - { label: "HP阳性人数", prop: "", value: 9703, suffix: "" }, + { label: "机构总数", prop: "unionCount", value: 0, suffix: "家" }, + { label: "筛查总例数", prop: "patientCount", value: 0, suffix: "" }, + { + label: "中高危占比", + prop: "highMiddlePercent", + value: 0, + suffix: "%", + }, + { label: "早诊率", prop: "earlyDiagnosis", value: 0, suffix: "%" }, + { label: "HP阳性人数", prop: "hp", value: 0, suffix: "" }, ], curSelect: 1, selectList: [ @@ -173,88 +191,47 @@ export default { { label: "已筛查数 100-500", value: 3 }, { label: "已筛查数 <100", value: 4 }, ], - rangeList: [ - { - name: "包头医学院属医院", - value: 480, - }, - { - name: "包头医学院第二附属医院", - value: 480, - }, - { - name: "包头医学院第二附属医院", - value: 480, - }, - { - name: "包头医学院第二附属医院", - value: 480, - }, - { - name: "包头医学院第二附属医院", - value: 480, - }, - { - name: "包头医学院第二附属医院", - value: 480, - }, - { - name: "包头医学院第二附属医院", - value: 480, - }, - { - name: "包头医学院第二附属医院", - value: 480, - }, - { - name: "包头医学院第二附属医院", - value: 480, - }, - { - name: "包头医学院第二附属医院", - value: 480, - }, - ], - sexNum: 123455, - ageNum: 34512, - riskNum: 12314, - midhignNum: 1234, + rangeList: [], + sexNum: 0, + ageNum: 0, + riskNum: 0, + midhignNum: 0, colorList1: ["#2197FF", "#1571EA"], colorList2: ["#0A56BD", "#1571EA", "#2197FF", "#3DA5FF", "#72BEFF"], colorList3: ["#47B7A0", "#FFA424", "#EB7126"], colorList4: ["#3B4466", "#1571EA"], pieData1: [ - { value: 1048, name: "男性" }, - { value: 735, name: "女性" }, + { value: 0, name: "男性" }, + { value: 0, name: "女性" }, ], pieData2: [ - { value: 10, name: "40-50" }, - { value: 20, name: "50-60" }, - { value: 20, name: "60-70" }, - { value: 20, name: "70-80" }, - { value: 20, name: "80以上" }, + { value: 0, name: "40-50" }, + { value: 0, name: "50-60" }, + { value: 0, name: "60-70" }, + { value: 0, name: "70-80" }, + { value: 0, name: "80以上" }, ], pieData3: [ - { value: 20, name: "低风险" }, - { value: 20, name: "中风险" }, - { value: 20, name: "高风险" }, + { value: 0, name: "低风险" }, + { value: 0, name: "中风险" }, + { value: 0, name: "高风险" }, ], pieData4: [ - { value: 20, name: "内镜未应答人数" }, - { value: 30, name: "内镜应答人数" }, + { value: 0, name: "内镜未应答人数" }, + { value: 0, name: "内镜应答人数" }, ], barData1: [ - { name: "Barret食管", value: "27" }, - { name: "反流性食管炎", value: "2" }, - { name: "低级别食管粘膜上皮内瘤变", value: "3" }, + { name: "Barret食管", value: "0" }, + { name: "反流性食管炎", value: "0" }, + { name: "低级别食管粘膜上皮内瘤变", value: "0" }, ], barData2: [ - { name: "非萎缩性胃炎", value: "27" }, - { name: "萎缩性胃炎", value: "2" }, - { name: "胃息肉", value: "3" }, - { name: "胃溃疡", value: "8" }, - { name: "十二指肠球部溃疡", value: "11" }, - { name: "低级别胃粘膜上皮内瘤变", value: "11" }, + { name: "非萎缩性胃炎", value: "0" }, + { name: "萎缩性胃炎", value: "0" }, + { name: "胃息肉", value: "0" }, + { name: "胃溃疡", value: "0" }, + { name: "十二指肠球部溃疡", value: "0" }, + { name: "低级别胃粘膜上皮内瘤变", value: "0" }, ], chartConfig1: { title: "食管良性疾病检出率", @@ -264,42 +241,168 @@ export default { }, pieColor4: ["#4EC2AA", "#4EB6FF", "#4E6EFF"], botPieData: [ - { value: 20, name: "高级别胃粘膜上皮内瘤变数" }, - { value: 30, name: "早期胃癌数" }, - { value: 30, name: "进展期胃癌" }, + { value: 0, name: "患癌占比" }, + { value: 0, name: "未患癌占比" }, + // { value: 0, name: "进展期胃癌" }, ], + screenNum: 0, botPieData2: [ - { value: 20, name: "高级别胃粘膜上皮内瘤变数" }, - { value: 30, name: "早期胃癌数" }, - { value: 30, name: "进展期胃癌" }, - ], - mapData: [ - { - name: "静安区中心医院", - value: 123, - }, - { - name: "呼和浩特市第一医院", - value: 456, - }, + { value: 0, name: "患癌占比" }, + { value: 0, name: "未患癌占比" }, ], + mapData: [], } }, watch: {}, - mounted() {}, + mounted() { + this.screenOverview() + this.getUnionList() + this.getSixMonthList() + this.getGenderCount() + this.getAgeCount() + this.getRiskCount() + this.getCheckCondition() + this.esophagusBenignList() + this.gastricBenignList() + this.cancerFound() + this.earlyGastric() + }, methods: { changeSelect(v) { - console.log(v) - this.mapData = [ - { - name: "上海长海医院", - value: 123, - }, - { - name: "南方医科大学南海医院", - value: 456, - }, - ] + this.getUnionList() + }, + // 总体概览五个数值 + screenOverview() { + screenOverview().then((res) => { + if (res.code == 1) { + let data = res.data + this.overAllData.forEach((e, index) => { + let prop = e.prop + if (data[prop]) { + this.overAllData[index].value = data[prop] + } else { + this.overAllData[index].value = 0 + } + }) + } + }) + }, + // 地图列表 + getUnionList() { + let type = this.curSelect + unionList({ type }).then((res) => { + if (res.code == 1) { + let data = res.data + if (data && data.length > 0) { + // data = [ + // { + // unionId: "1638093098842075138", + // unionName: "静安区中心医院", + // count: 21, + // }, + // ] + this.mapData = [] + data.forEach((e) => { + let obj = { + name: e.unionName, + value: e.count, + unionId: e.unionId, + } + this.mapData.push(obj) + }) + } + } + }) + }, + // 近六个月 + getSixMonthList() { + sixMonthList().then((res) => { + if (res.code == 1 && res.data) { + this.rangeList = res.data + } + }) + }, + getGenderCount() { + genderCount().then((res) => { + if (res.code == 1) { + this.pieData1[0].value = res.data.man + this.pieData1[1].value = res.data.woman + this.sexNum = res.data.total + } + }) + }, + getAgeCount() { + ageCount().then((res) => { + if (res.code == 1) { + this.pieData2[0].value = res.data.num1 + this.pieData2[1].value = res.data.num2 + this.pieData2[2].value = res.data.num3 + this.pieData2[3].value = res.data.num4 + this.pieData2[4].value = res.data.num5 + this.ageNum = res.data.num + } + }) + }, + getRiskCount() { + riskCount().then((res) => { + if (res.code == 1) { + this.pieData3[0].value = res.data.low + this.pieData3[1].value = res.data.medium + this.pieData3[2].value = res.data.high + this.riskNum = res.data.total + } + }) + }, + // 内径应答情况 + getCheckCondition() { + checkCondition().then((res) => { + if (res.code == 1) { + this.pieData4[0].value = res.data.checked + this.pieData4[1].value = res.data.unChecked + this.midhignNum = res.data.total + } + }) + }, + // 食管 良性疾病检出率 + esophagusBenignList() { + esophagusBenign().then((res) => { + if (res.code == 1 && res.data) { + this.barData1[0].value = res.data.barret + this.barData1[1].value = res.data.backPercent + this.barData1[2].value = res.data.esophagusLevelPercent + } + }) + }, + // 胃 良性疾病 + gastricBenignList() { + gastricBenign().then((res) => { + if (res.code == 1 && res.data) { + this.barData2[0].value = res.data.nonAtrophicGastritiPercent + this.barData2[1].value = res.data.atrophicGastritiPercent + this.barData2[2].value = res.data.gastricPolypPercent + this.barData2[3].value = res.data.gastricUlcerPercent + this.barData2[4].value = res.data.duodenalUlcerPercent + this.barData2[5].value = res.data.inogmLevelPercent + } + }) + }, + // 胃癌内镜检出率 + cancerFound() { + cancerFound().then((res) => { + if (res.code == 1 && res.data) { + this.botPieData[0].value = res.data.gastricCancer + this.botPieData[1].value = res.data.unGastricCancer + } + }) + }, + // 早癌占比 + earlyGastric() { + earlyGastric().then((res) => { + if (res.code == 1 && res.data) { + this.botPieData2[0].value = res.data.earlyGastricCancer + this.botPieData2[1].value = res.data.unEarlyGastricCancer + } + }) }, }, } @@ -470,7 +573,11 @@ export default { .right-list { height: 554px; padding: 0 18px 18px; - overflow: auto; + overflow: hidden; + + &:hover { + overflow-y: overlay; + } .list-item { font-size: 14px; font-family: AlibabaPuHuiTiM; @@ -530,6 +637,35 @@ export default { color: #fff; font-size: 18px; } +// 美化滚动条 +::-webkit-scrollbar-track-piece { + background-color: #fff; + -webkit-border-radius: 0; + opacity: 0.5; +} + +::-webkit-scrollbar { + width: 6px; + height: 10px; +} + +::-webkit-scrollbar-thumb { + height: 30px; + background-color: #b8b8b8; + -webkit-border-radius: 6px; + outline: 1px solid transparent; + outline-offset: -2px; + border: 1px solid transparent; + filter: alpha(opacity = 30); + -moz-opacity: 0.5; + opacity: 0.5; +} + +::-webkit-scrollbar-thumb:hover { + height: 30px; + background-color: #878987; + -webkit-border-radius: 6px; +}