diff --git a/src/views/dataAnalysis/Map/hospital.js b/src/views/dataAnalysis/Map/hospital.js
new file mode 100644
index 0000000000000000000000000000000000000000..caf1c3a050d34d0375913932611076ab27ad1df7
--- /dev/null
+++ b/src/views/dataAnalysis/Map/hospital.js
@@ -0,0 +1,618 @@
+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,
+  },
+]
diff --git a/src/views/dataAnalysis/Map/index.vue b/src/views/dataAnalysis/Map/index.vue
index 6ba69b958a81b40ef02d152b9037592736bfd4d5..ca2b0c5da7d929654a07025fb4ee7ca0ab1810f2 100644
--- a/src/views/dataAnalysis/Map/index.vue
+++ b/src/views/dataAnalysis/Map/index.vue
@@ -4,6 +4,7 @@
 <script>
 import geoList from "./geo"
 import * as echarts from "echarts"
+import hospital from "./hospital"
 import china from "./china.json"
 // import allCode from "./allCode.json"
 // import data from "./data"
@@ -21,9 +22,19 @@ export default {
           value: 50,
         },
       ],
+      hospital: hospital,
     }
   },
-  watch: {},
+  props: {
+    mapData: {
+      type: Array,
+    },
+  },
+  watch: {
+    mapData(v) {
+      this.initChart()
+    },
+  },
   mounted() {
     this.initChart() //初始化地图
   },
@@ -33,19 +44,33 @@ export default {
       // let handleLocate = (arr) => {
       //   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)
       let option = {
         title: {
           text: "", // 地图名称
         },
         tooltip: {
-          show: false,
-          // formatter: function (params) {
-          //   if (params.value.length > 1) {
-          //     return params.name + "：" + params.value[2] + "人"
-          //   }
-          //   return `${params.name} ： ${params.value ? params.value : 0}人`
-          // },
+          show: true,
+          formatter: function (params) {
+            let str =
+              params.value === 0 || params.value
+                ? params.name + ":" + params.value
+                : params.name
+            return str
+          },
           // textStyle: { fontSize: 14, fontFamily: "fzzz", color: "#fff" },
           // backgroundColor: "rgba(0,0,0,0.3)",
           // borderColor: "rgba(0,0,0,0.3)",
@@ -54,7 +79,7 @@ export default {
           show: true,
           map: name,
           // roam: true,
-          zoom: 1.3,
+          zoom: 1.2,
           center: [105, 36],
           label: {
             emphasis: {
@@ -97,46 +122,8 @@ export default {
               },
             },
             animation: false,
-            data: [
-              {
-                name: "省立医院",
-                value: "456",
-              },
-              {
-                name: "安医大",
-                value: "123",
-              },
-            ],
+            data: [],
           },
-          //小点
-          // {
-          //   //文字和标志
-          //   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",
             z: 3,
@@ -150,26 +137,20 @@ export default {
               show: true,
               position: "end",
               formatter: `{value|{c}} {title|{b}} `,
-              // backgroundColor: "#eee",
-              // borderColor: "#17A597",
-              // borderWidth: 1,
-              // borderRadius: 4,
-              // align: "center",
-              // width: 64,
               rich: {
                 title: {
                   align: "center",
-                  lineHeight: 26,
-                  fontSize: 16,
+                  fontSize: 14,
                   color: "#fff",
                 },
                 value: {
-                  fontSize: 16,
+                  fontSize: 14,
                   align: "center",
                   color: "#3DF2CD",
                   backgroundColor: "rgba(61,244,206,0.1)",
                   width: 64,
-                  height: 26,
+                  height: 20,
+                  lineHeight: 20,
                   borderRadius: [4, 4, 0, 0],
                 },
               },
@@ -180,24 +161,7 @@ export default {
               color: "#A6D5FF",
               curveness: 0.1,
             },
-            data: [
-              {
-                coords: [
-                  [117.29, 32.0581],
-                  [128, 34],
-                ],
-                name: "省立医院",
-                value: "456",
-              },
-              {
-                coords: [
-                  [118, 32.0581],
-                  [138, 36],
-                ],
-                name: "安徽医科大学第一附属医院北区",
-                value: "4823",
-              },
-            ],
+            data: viewHospital,
           },
         ],
       }
diff --git a/src/views/dataAnalysis/Pie/PieChart.vue b/src/views/dataAnalysis/Pie/PieChart.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7b2115370dc56969a548b2faeab6f8206934929b
--- /dev/null
+++ b/src/views/dataAnalysis/Pie/PieChart.vue
@@ -0,0 +1,154 @@
+<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>
diff --git a/src/views/dataAnalysis/index.vue b/src/views/dataAnalysis/index.vue
index 82d4d9f9b42009657e50c2d8334c3aef3d6d5d1a..9a3e49de50d467aa36d02190377621930eaa378f 100644
--- a/src/views/dataAnalysis/index.vue
+++ b/src/views/dataAnalysis/index.vue
@@ -22,6 +22,7 @@
               v-model="curSelect"
               placeholder="请选择"
               class="my-el-select"
+              @change="changeSelect"
             >
               <el-option
                 v-for="item in selectList"
@@ -33,7 +34,7 @@
             </el-select>
           </div>
           <div class="left-map">
-            <Map></Map>
+            <Map :mapData="mapData"></Map>
           </div>
         </div>
         <div class="over-right">
@@ -41,15 +42,50 @@
             <img src="@/assets/img/DataCenter/bar.png" alt="" />
             <span>当前季度上报量机构排名</span>
           </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 class="pie-item"></div>
+        <div class="pie-item"></div>
+        <div class="pie-item"></div>
       </div>
     </div>
   </div>
 </template>
 <script>
 import Map from "./Map/index.vue"
+import PieChart from "./Pie/PieChart.vue"
 export default {
-  components: { Map },
+  components: { Map, PieChart },
   data() {
     return {
       overAllData: [
@@ -66,11 +102,79 @@ 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,
+      colorList1: ["#2197FF", "#1571EA"],
+      mapData: [
+        {
+          name: "静安区中心医院",
+          value: 123,
+        },
+        {
+          name: "呼和浩特市第一医院",
+          value: 456,
+        },
+      ],
     }
   },
   watch: {},
   mounted() {},
-  methods: {},
+  methods: {
+    changeSelect(v) {
+      console.log(v)
+      this.mapData = [
+        {
+          name: "上海长海医院",
+          value: 123,
+        },
+        {
+          name: "南方医科大学南海医院",
+          value: 456,
+        },
+      ]
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>
@@ -236,8 +340,76 @@ export default {
             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>