Skip to content

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

处理医院地址

parent e90c9c47
Show whitespace changes
Inline Side-by-side
Showing with 987 additions and 79 deletions
src/views/dataAnalysis/Map/hospital.js 0 → 100644
View file @ 890bbfc2
export default [
{
coords: [
[121.49202, 31.25412],
[128, 30.5],
],
name: "上海长海医院",
value: 0,
},
{
coords: [
[113.140134, 23.072573],
[126, 20],
],
name: "南方医科大学南海医院",
value: 0,
},
{
coords: [
[113.0375, 23.6814],
[124, 23],
],
name: "清远市人民医院",
value: 0,
},
{
coords: [
[109.822748, 40.587845],
[111, 48],
],
name: "包头医学院第二附属医院",
value: 0,
},
{
coords: [
[120.3029, 31.5807],
[128, 33],
],
name: "无锡人民医院医联体",
value: 0,
},
{
coords: [
[120.318041, 31.573824],
[129, 35.5],
],
name: "广东茂名市人民医院",
value: 0,
},
{
coords: [
[110.947446, 22.360822],
[111, 17],
],
name: "广东省信宜市人民医院",
value: 0,
},
{
coords: [
[120.351338, 31.532919],
[130, 28],
],
name: "无锡四院医联体（滨湖中医院）",
value: 0,
},
{
coords: [
[106.232993, 38.478966],
[107, 43.8],
],
name: "宁夏医科大学总医院",
value: 0,
},
{
coords: [
[120.666653, 27.997261],
[132, 25.5],
],
name: "温州市中心医院",
value: 0,
},
{
coords: [
[114.336343, 30.523537],
[128, 38],
],
name: "湖北省第三人民医院医联体",
value: 0,
},
{
coords: [
[113.271768, 23.133784],
[115, 19],
],
name: "广州医科大学附属第二医院",
value: 0,
},
{
coords: [
[103.646572, 31.003238],
[78, 26],
],
name: "都江堰市人民医院",
value: 0,
},
{
coords: [
[119.303336, 26.057464],
[136, 18],
],
name: "福建省立医院南院",
value: 0,
},
{
coords: [
[104.065078, 30.650129],
[84, 28],
],
name: "西藏自治区人民政府驻成都办事处医院",
value: 0,
},
{
coords: [
[120.0231, 29.0195],
[145, 23],
],
name: "永康方大瑞金医院",
value: 0,
},
{
coords: [
[104.0665, 30.5588],
[88, 23.5],
],
name: "四川省科学城医院",
value: 0,
},
{
coords: [
[119.2959, 26.0999],
[131, 14.5],
],
name: "福建省老年医院",
value: 0,
},
{
coords: [
[112.1842, 23.9139],
[114, 14],
],
name: "怀集县人民医院",
value: 0,
},
{
coords: [
[103.1608, 23.3577],
[96, 20],
],
name: "个旧市人民医院",
value: 0,
},
{
coords: [
[119.0389, 29.6095],
[149, 30],
],
name: "淳安县第一人民医院",
value: 0,
},
{
coords: [
[114.1257, 22.5519],
[130, 16],
],
name: "深圳市罗湖区人民医院",
value: 0,
},
{
coords: [
[112.204, 31.0421],
[98, 15.4],
],
name: "荆门市第一人民医院",
value: 0,
},
{
coords: [
[116.9071, 25.9577],
[134, 12.4],
],
name: "于都县人民医院",
value: 0,
},
{
coords: [
[110.2962, 25.2639],
[84, 12.4],
],
name: "广西壮族自治区南溪山医院",
value: 0,
},
{
coords: [
[108.9604, 34.2386],
[64, 34.4],
],
name: "西安医学院第一附属医院",
value: 0,
},
{
coords: [
[119.5427, 26.6562],
[144, 14.4],
],
name: "宁德市中医院",
value: 0,
},
{
coords: [
[114.4924, 37.0748],
[128, 40.4],
],
name: "邢台医学高等专科学校第一附属医院",
value: 0,
},
{
coords: [
[111.6666, 40.8297],
[121, 54.4],
],
name: "呼和浩特市第一医院",
value: 0,
},
{
coords: [
[100.9724, 22.8008],
[88, 16],
],
name: "普洱市思茅区人民医院",
value: 0,
},
{
coords: [
[120.3947, 37.364],
[134, 42],
],
name: "招远市人民医院",
value: 0,
},
{
coords: [
[118.0462, 36.8038],
[132, 44],
],
name: "淄博市北大医疗鲁中医院",
value: 0,
},
{
coords: [
[111.6782, 29.0372],
[75, 30],
],
name: "湘雅常德医院",
value: 0,
},
{
coords: [
[112.0837, 32.6884],
[71, 32],
],
name: "邓州市中心医院",
value: 0,
},
{
coords: [
[120.6974, 27.9937],
[154, 21],
],
name: "温州市人民医院",
value: 0,
},
{
coords: [
[122.2079, 29.9841],
[132, 12],
],
name: "舟山市妇幼保健院",
value: 0,
},
{
coords: [
[102.5374, 24.3454],
[82, 22],
],
name: "玉溪市第三人民医院",
value: 0,
},
{
coords: [
[108.3669, 22.8171],
[98, 11.5],
],
name: "广西医科大学第二附属医院",
value: 0,
},
{
coords: [
[112.9853, 28.1907],
[61, 24],
],
name: "中南大学湘雅医院",
value: 0,
},
{
coords: [
[121.3722, 28.5788],
[146, 32],
],
name: "浙江省台州市路桥区第二人民医院",
value: 0,
},
{
coords: [
[115.8771, 28.6738],
[70, 20],
],
name: "江西省人民医院",
value: 0,
},
{
coords: [
[108.9128, 34.2424],
[73, 36.4],
],
name: "西电集团医院",
value: 0,
},
{
coords: [
[119.3083, 26.0912],
[146, 12.4],
],
name: "福建省肿瘤医院医联体1(福州第一医院）",
value: 0,
},
{
coords: [
[126.6496, 45.7517],
[140, 46],
],
name: "黑龙江省医院",
value: 0,
},
{
coords: [
[120.2881, 31.5673],
[150, 34],
],
name: "无锡三院医联体1",
value: 0,
},
{
coords: [
[120.2851, 31.9219],
[144, 48],
],
name: "江阴人民医院医联体",
value: 0,
},
{
coords: [
[120.9807, 31.386],
[146, 50],
],
name: "昆山中医医院医联体",
value: 0,
},
{
coords: [
[120.2846, 31.5728],
[148, 52],
],
name: "无锡中医医院医联体",
value: 0,
},
{
coords: [
[120.3287, 31.5775],
[149, 54],
],
name: "无锡四院医联体1（九院）",
value: 0,
},
{
coords: [
[114.7461, 23.7883],
[86, 18],
],
name: "东源县中医院",
value: 0,
},
{
coords: [
[120.9797, 28.1167],
[154, 26],
],
name: "乐清市人民医院",
value: 0,
},
{
coords: [
[113.5372, 23.8672],
[66, 17.4],
],
name: "广东省佛冈县人民医院",
value: 0,
},
{
coords: [
[120.278, 31.634],
[151, 56],
],
name: "无锡市惠山区中医院",
value: 0,
},
{
coords: [
[120.2829, 31.5788],
[111, 58],
],
name: "无锡二院医联体",
value: 0,
},
{
coords: [
[119.8294, 31.3625],
[101, 52],
],
name: "宜兴人民医院医联体",
value: 0,
},
{
coords: [
[106.2113, 38.8548],
[71, 46],
],
name: "宁夏人民医院宁南医院医联体",
value: 0,
},
{
coords: [
[102.7431, 25.1253],
[72, 39],
],
name: "南华大学附属第二医院",
value: 0,
},
{
coords: [
[114.4167, 23.1109],
[77, 43],
],
name: "惠州中心医院",
value: 0,
},
{
coords: [
[111.3055, 30.7135],
[74, 41],
],
name: "宜昌市第一人民医院",
value: 0,
},
{
coords: [
[109.8145, 40.6592],
[107, 50],
],
name: "包钢集团第三职工医院",
value: 0,
},
{
coords: [
[116.7918, 33.9558],
[100, 47],
],
name: "淮北市人民医院",
value: 0,
},
{
coords: [
[113.8602, 27.6305],
[85, 14],
],
name: "萍乡市人民医院",
value: 0,
},
{
coords: [
[104.2151, 23.379],
[60, 15],
],
name: "文山市人民医院",
value: 0,
},
{
coords: [
[111.4728, 33.2839],
[70, 44.4],
],
name: "西峡县人民医院",
value: 0,
},
{
coords: [
[121.5068, 31.2886],
[154, 36],
],
name: "上海市同济医院",
value: 0,
},
{
coords: [
[117.2079, 34.2545],
[77, 53],
],
name: "徐州医科大学附属医院",
value: 0,
},
{
coords: [
[114.4694, 22.7813],
[156, 16],
],
name: "惠阳三和医院",
value: 0,
},
{
coords: [
[116.9837, 32.6585],
[75, 51],
],
name: "淮南朝阳医院",
value: 0,
},
{
coords: [
[114.4159, 27.8093],
[70, 49],
],
name: "宜春市人民医院",
value: 0,
},
{
coords: [
[109.4286, 24.2996],
[70, 11],
],
name: "柳州市柳铁中心医院",
value: 0,
},
{
coords: [
[122.0486, 39.6182],
[157, 42],
],
name: "大连瓦房店第三医院",
value: 0,
},
{
coords: [
[116.0996, 39.9377],
[135, 58],
],
name: "北京市门头沟区医院",
value: 0,
},
{
coords: [
[116.3656, 39.9116],
[156, 38.8],
],
name: "无锡太湖医院（解放军101医院）医联体",
value: 0,
},
{
coords: [
[120.3154, 31.576],
[156, 48.8],
],
name: "无锡锡山人民医院医联体",
value: 0,
},
{
coords: [
[120.62, 31.3726],
[159, 46.2],
],
name: "苏州相城人民医院",
value: 0,
},
{
coords: [
[121.1974, 31.023],
[71, 59],
],
name: "上海市松江区中心医院",
value: 0,
},
{
coords: [
[121.4466, 31.2323],
[71, 55],
],
name: "静安区中心医院",
value: 0,
},
]
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 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> </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