Skip to content

A
agcs2.0-web
Commit ac8e0d29 authored by miaojiale's avatar miaojiale
Browse files
Options

接口联调，缺地图部分

parent 4554d034
Hide whitespace changes
Inline Side-by-side
Showing with 415 additions and 154 deletions
src/api/screen.js 0 → 100644
View file @ ac8e0d29
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,
})
}
src/views/dataAnalysis/Bar/BarChart.vue
View file @ ac8e0d29
......@@ -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: {
......
src/views/dataAnalysis/Map/index.vue
View file @ ac8e0d29
......@@ -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)",
......
src/views/dataAnalysis/Pie/PieChart.vue
View file @ ac8e0d29
......@@ -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))
)
......
src/views/dataAnalysis/Pie/PieChartFour.vue
View file @ ac8e0d29
......@@ -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: {
......
src/views/dataAnalysis/Pie/PieChartTwo.vue
View file @ ac8e0d29
......@@ -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: {
......
src/views/dataAnalysis/index.vue
View file @ ac8e0d29
......@@ -41,7 +41,7 @@
<div class="over-right">
<div class="right-title">
<img src="@/assets/img/DataCenter/bar.png" alt="" />
<span>当前季度上报量机构排名</span>
<span>近六个月上报量机构排名</span>
</div>
<div class="right-list">
<div
......@@ -51,8 +51,8 @@
:style="{ color: index < 3 ? '#9bdfff' : '#ffffff' }"
>
<div class="index">{{ index + 1 }}</div>
<div class="name">{{ item.name }}</div>
<div class="value">{{ item.value }}</div>
<div class="name">{{ item.unionName }}</div>
<div class="value">{{ item.count }}</div>
</div>
</div>
</div>
......@@ -130,9 +130,9 @@
<pie-chart-two
:className="'pieChart4'"
:colorList="pieColor4"
:totalNum="20"
:totalNum="screenNum"
:chartData="botPieData"
:title="'内镜总数'"
:title="'胃癌内镜检出率'"
></pie-chart-two>
</div>
<div class="pie-item">
......@@ -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;
}
</style>
<style lang="scss">
// ::v-deep {
......
yarn.lock
View file @ ac8e0d29
......@@ -3926,12 +3926,13 @@ ecc-jsbn@~0.1.1:
jsbn "~0.1.0"
safer-buffer "^2.1.0"
echarts@4.8.0:
version "4.8.0"
resolved "https://registry.npmmirror.com/echarts/-/echarts-4.8.0.tgz#b2c1cfb9229b13d368ee104fc8eea600b574d4c4"
integrity sha512-YwShpug8fWngj/RlgxDaYrLBoD+LsZUArrusjNPHpAF+is+gGe38xx4W848AwWMGoi745t3OXM52JedNrv+F6g==
echarts@5.3.0:
version "5.3.0"
resolved "https://registry.npmmirror.com/echarts/-/echarts-5.3.0.tgz#39342fcf0f763413fecd9d2afd1c415163de694d"
integrity sha512-zENufmwFE6WjM+24tW3xQq4ICqQtI0CGj4bDVDNd3BK3LtaA/5wBp+64ykIyKy3QElz0cieKqSYP4FX9Lv9MwQ==
dependencies:
zrender "4.3.1"
tslib "2.3.0"
zrender "5.3.0"
ee-first@1.1.1:
version "1.1.1"
......@@ -10434,6 +10435,11 @@ ts-pnp@^1.1.6:
resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
tslib@2.3.0:
version "2.3.0"
resolved "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
tslib@^1.9.0:
version "1.14.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
......@@ -11384,10 +11390,12 @@ zip-stream@^2.1.2:
compress-commons "^2.1.1"
readable-stream "^3.4.0"
zrender@4.3.1:
version "4.3.1"
resolved "https://registry.npmmirror.com/zrender/-/zrender-4.3.1.tgz#baf8aa6dc8187a2f819692d7d5f9bedfa2b90fa3"
integrity sha512-CeH2TpJeCdG0TAGYoPSAcFX2ogdug1K7LIn9UO/q9HWqQ54gWhrMAlDP9AwWYMUDhrPe4VeazQ4DW3msD96nUQ==
zrender@5.3.0:
version "5.3.0"
resolved "https://registry.npmmirror.com/zrender/-/zrender-5.3.0.tgz#297c05dc2521362816c4ddced10a1e306646bbc8"
integrity sha512-Ln2QB5uqI1ftNYMtCRxd+XDq6MOttLgam2tmhKAVA+j0ko47UT+VNlDvKTkqe4K2sJhBvB0EhYNLebqlCTjatQ==
dependencies:
tslib "2.3.0"
zwitch@^1.0.0:
version "1.0.5"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment