Skip to content

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

处理医院地址

parent e90c9c47
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 987 additions and 79 deletions
src/views/dataAnalysis/Map/hospital.js 0 → 100644
View file @ 890bbfc2
This diff is collapsed.
src/views/dataAnalysis/Map/index.vue
View file @ 890bbfc2
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
<script> <script>
import geoList from "./geo" import geoList from "./geo"
import * as echarts from "echarts" import * as echarts from "echarts"
import hospital from "./hospital"
import china from "./china.json" import china from "./china.json"
// import allCode from "./allCode.json" // import allCode from "./allCode.json"
// import data from "./data" // import data from "./data"
...@@ -21,9 +22,19 @@ export default { ...@@ -21,9 +22,19 @@ export default {
value: 50, value: 50,
}, },
], ],
hospital: hospital,
} }
}, },
watch: {}, props: {
mapData: {
type: Array,
},
},
watch: {
mapData(v) {
this.initChart()
},
},
mounted() { mounted() {
this.initChart() //初始化地图 this.initChart() //初始化地图
}, },
...@@ -33,19 +44,33 @@ export default { ...@@ -33,19 +44,33 @@ export default {
// let handleLocate = (arr) => { // let handleLocate = (arr) => {
// for // for
// } // }
// 处理data
let viewHospital = []
for (let i = 0; i < this.mapData.length; i++) {
let obj = {}
this.hospital.forEach((e) => {
if (e.name == this.mapData[i].name) {
obj = e
obj.value = this.mapData[i].value
viewHospital.push(obj)
}
})
}
echarts.registerMap(name, geoJson) echarts.registerMap(name, geoJson)
let option = { let option = {
title: { title: {
text: "", // 地图名称 text: "", // 地图名称
}, },
tooltip: { tooltip: {
show: false, show: true,
// formatter: function (params) { formatter: function (params) {
// if (params.value.length > 1) { let str =
// return params.name + "：" + params.value[2] + "人" params.value === 0 || params.value
// } ? params.name + ":" + params.value
// return `${params.name} ： ${params.value ? params.value : 0}人` : params.name
// }, return str
},
// textStyle: { fontSize: 14, fontFamily: "fzzz", color: "#fff" }, // textStyle: { fontSize: 14, fontFamily: "fzzz", color: "#fff" },
// backgroundColor: "rgba(0,0,0,0.3)", // backgroundColor: "rgba(0,0,0,0.3)",
// borderColor: "rgba(0,0,0,0.3)", // borderColor: "rgba(0,0,0,0.3)",
...@@ -54,7 +79,7 @@ export default { ...@@ -54,7 +79,7 @@ export default {
show: true, show: true,
map: name, map: name,
// roam: true, // roam: true,
zoom: 1.3, zoom: 1.2,
center: [105, 36], center: [105, 36],
label: { label: {
emphasis: { emphasis: {
...@@ -97,46 +122,8 @@ export default { ...@@ -97,46 +122,8 @@ export default {
}, },
}, },
animation: false, animation: false,
data: [ data: [],
{
name: "省立医院",
value: "456",
},
{
name: "安医大",
value: "123",
},
],
}, },
//小点
// {
// //文字和标志
// name: "light",
// type: "scatter",
// coordinateSystem: "geo",
// data: [
// [117.29, 32.0581],
// [118, 32.0581],
// ],
// symbolSize: 10,
// label: {
// normal: {
// // formatter: "{b}",
// formatter: "",
// position: "right",
// show: true,
// },
// emphasis: {
// show: true,
// },
// },
// itemStyle: {
// normal: {
// color: "#A6D5FF",
// },
// },
// },
{ {
type: "lines", type: "lines",
z: 3, z: 3,
...@@ -150,26 +137,20 @@ export default { ...@@ -150,26 +137,20 @@ export default {
show: true, show: true,
position: "end", position: "end",
formatter: `{value|{c}} {title|{b}} `, formatter: `{value|{c}} {title|{b}} `,
// backgroundColor: "#eee",
// borderColor: "#17A597",
// borderWidth: 1,
// borderRadius: 4,
// align: "center",
// width: 64,
rich: { rich: {
title: { title: {
align: "center", align: "center",
lineHeight: 26, fontSize: 14,
fontSize: 16,
color: "#fff", color: "#fff",
}, },
value: { value: {
fontSize: 16, fontSize: 14,
align: "center", align: "center",
color: "#3DF2CD", color: "#3DF2CD",
backgroundColor: "rgba(61,244,206,0.1)", backgroundColor: "rgba(61,244,206,0.1)",
width: 64, width: 64,
height: 26, height: 20,
lineHeight: 20,
borderRadius: [4, 4, 0, 0], borderRadius: [4, 4, 0, 0],
}, },
}, },
...@@ -180,24 +161,7 @@ export default { ...@@ -180,24 +161,7 @@ export default {
color: "#A6D5FF", color: "#A6D5FF",
curveness: 0.1, curveness: 0.1,
}, },
data: [ data: viewHospital,
{
coords: [
[117.29, 32.0581],
[128, 34],
],
name: "省立医院",
value: "456",
},
{
coords: [
[118, 32.0581],
[138, 36],
],
name: "安徽医科大学第一附属医院北区",
value: "4823",
},
],
}, },
], ],
} }
......
src/views/dataAnalysis/Pie/PieChart.vue 0 → 100644
View file @ 890bbfc2
<template>
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import * as echarts from "echarts"
// require("echarts/theme/macarons"); // echarts theme
import resize from "@/components/Charts/mixins/resize"
const animationDuration = 2600
export default {
mixins: [resize],
props: {
className: {
type: String,
default: "chart",
},
title: { type: String },
colorList: {
type: Array,
},
totalNum: {
default: 0,
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "350px",
},
autoResize: {
type: Boolean,
default: true,
},
chartData: {
type: Object,
required: true,
},
},
data() {
return {
chart: null,
pieConfig: {
title: {
text: this.title,
subtext: `筛查总例数 {number|${this.totalNum}}`,
left: "center",
textStyle: {
color: "#fff",
fontWeight: "normal",
},
subtextStyle: {
color: "#aaa",
rich: {
number: {
color: "#9BDFFF",
fontSize: 14,
},
},
},
},
tooltip: {
trigger: "item",
},
legend: {
orient: "horizontal",
left: "center",
bottom: "5%",
itemWidth: 8,
itemHeight: 8,
textStyle: {
color: "#aaa",
fontSize: 14,
},
},
label: {
show: true,
position: "outside",
formatter: "{d}%",
},
labelLine: {
normal: {
length: 20,
length2: 30,
lineStyle: {
width: 1,
},
},
},
color: this.colorList,
series: [
{
name: this.title,
type: "pie",
radius: "50%",
data: [
{ value: 1048, name: "男性" },
{ value: 735, name: "女性" },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
},
}
},
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))
)
// const series = chartData.data.map((v) => {
// return {
// name: v.name,
// value: Number(v.value),
// }
// })
// option.series[0].data = series
this.chart.setOption(option)
},
},
}
</script>
src/views/dataAnalysis/index.vue
View file @ 890bbfc2
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
v-model="curSelect" v-model="curSelect"
placeholder="请选择" placeholder="请选择"
class="my-el-select" class="my-el-select"
@change="changeSelect"
> >
<el-option <el-option
v-for="item in selectList" v-for="item in selectList"
...@@ -33,7 +34,7 @@ ...@@ -33,7 +34,7 @@
</el-select> </el-select>
</div> </div>
<div class="left-map"> <div class="left-map">
<Map></Map> <Map :mapData="mapData"></Map>
</div> </div>
</div> </div>
<div class="over-right"> <div class="over-right">
...@@ -41,15 +42,50 @@ ...@@ -41,15 +42,50 @@
<img src="@/assets/img/DataCenter/bar.png" alt="" /> <img src="@/assets/img/DataCenter/bar.png" alt="" />
<span>当前季度上报量机构排名</span> <span>当前季度上报量机构排名</span>
</div> </div>
<div class="right-list">
<div
class="list-item"
v-for="(item, index) in rangeList"
:key="index"
: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>
</div>
</div>
</div>
</div>
<!-- 详细看板 -->
<div class="detail-panel">
<div class="common-title">详细看板</div>
<div class="crowdDistribution">
<div class="detail-title">筛查人群分布分析</div>
</div>
<div class="pie-list">
<div class="pie-item">
<pie-chart
:class-name="'pie1'"
:height="'300px'"
:title="'筛查人群性别分布'"
:total-num="sexNum"
:chart-data="{}"
:colorList="colorList1"
></pie-chart>
</div> </div>
<div class="pie-item"></div>
<div class="pie-item"></div>
<div class="pie-item"></div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import Map from "./Map/index.vue" import Map from "./Map/index.vue"
import PieChart from "./Pie/PieChart.vue"
export default { export default {
components: { Map }, components: { Map, PieChart },
data() { data() {
return { return {
overAllData: [ overAllData: [
...@@ -66,11 +102,79 @@ export default { ...@@ -66,11 +102,79 @@ export default {
{ label: "已筛查数 100-500", value: 3 }, { label: "已筛查数 100-500", value: 3 },
{ label: "已筛查数 <100", value: 4 }, { 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,
colorList1: ["#2197FF", "#1571EA"],
mapData: [
{
name: "静安区中心医院",
value: 123,
},
{
name: "呼和浩特市第一医院",
value: 456,
},
],
} }
}, },
watch: {}, watch: {},
mounted() {}, mounted() {},
methods: {}, methods: {
changeSelect(v) {
console.log(v)
this.mapData = [
{
name: "上海长海医院",
value: 123,
},
{
name: "南方医科大学南海医院",
value: 456,
},
]
},
},
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -236,8 +340,76 @@ export default { ...@@ -236,8 +340,76 @@ export default {
color: #9bdfff; color: #9bdfff;
} }
} }
.right-list {
padding: 0 18px;
.list-item {
font-size: 14px;
font-family: AlibabaPuHuiTiM;
margin-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
.index {
width: 20px;
}
.name {
flex: 1;
padding: 0 4px;
word-break: break-all;
}
.value {
width: 60px;
}
}
}
}
}
}
.detail-panel {
margin-top: 24px;
.detail-title {
width: 230px;
height: 46px;
line-height: 46px;
padding-left: 18px;
font-size: 18px;
background: linear-gradient(
90deg,
rgba(168, 181, 255, 0.4) 0%,
rgba(168, 181, 255, 0) 100%
);
border-radius: 4px 4px 0px 0px;
color: #cad2ff;
}
.pie-list {
width: 100%;
height: 334px;
background: #252c49;
display: flex;
.pie-item {
padding: 30px 0;
flex: 1;
} }
} }
} }
} }
</style> </style>
<style lang="scss">
// ::v-deep {
.el-select-dropdown {
background: #19283f !important;
border: 1px solid rgba(168, 201, 255, 0.5);
.el-select-dropdown__item {
color: #a8c9ff;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background: #283c5a;
}
.el-select-dropdown__item.selected {
background: #283c5a;
}
}
// }
</style>
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