Merge branch 'zz-test' into master

# Conflicts:
#	app/src/components/Headers.vue
#	app/src/views/HomeView.vue

app/src/components/Headers.vue

@@ -131,24 +131,25 @@ export default {
 img {
   width: 16px;
   height: 15px;
+  margin-right: 8px;
 }
 .tab-list {
   width: 100%;
   display: flex;
   justify-content: space-between;
 }
-.bg-img {
-  width: 138px;
-  height: 48px;
-  font-size: 18px;
-  background: url("../assets/btn.png") no-repeat;
-  background-size: 100% 100%;
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding-left: 10px;
-  line-height: 49px;
+.bg-img{
+    width: 118px;
+    height: 48px;
+    font-size: 18px;
+    background: url('../assets/btn.png')  no-repeat;
+    background-size: 100% 100%;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-left: 10px;
+    line-height: 49px;
 }
 .bg-img:hover {
   cursor: pointer;

app/src/views/HomeView.vue

@@ -9,6 +9,7 @@
         style="padding: 0px 35px; display: flex; justify-content: space-between"
       >
         <div>
+
           <border-panel
             height="302px"
             style="margin-bottom: 6px"
@@ -24,6 +25,19 @@
             2222
           </border-panel>
           <border-panel height="296px" title="自主管理"> 3333 </border-panel>
+        <border-panel height="302px" style="margin-bottom: 6px;" title="基础信息">
+          1111
+          <div class="firsts">
+            <FirstHight/>
+          </div>
+        </border-panel>
+        <border-panel height="346px" style="margin-bottom: 6px;"  title="隐患排查（一楼一策）">
+          2222
+        </border-panel>
+        <border-panel height="296px"  title="自主管理">
+          3333
+        </border-panel>
+
         </div>
         <div class="display: flex;">
           <div style=""></div>
@@ -61,9 +75,11 @@
 </template>
 <script>
 import Headers from "@/components/Headers.vue";
-export default {
-  components: { Headers },
-};
+import FirstHight from "./components/FirstHight.vue";
+export default{
+components:{Headers,FirstHight}
+}
+
 </script>
 <style scoped>
 .home {
@@ -71,4 +87,5 @@ export default {
   background-size: 100% 100%;
   width: 100%;
 }
+
 </style>

app/src/views/components/FirstHight.vue

@@ -0,0 +1,231 @@
+<template>
+    <div>
+<div>
+    <div ref="chart" class="item" style="width: 187px; height: 219px" />
+</div>
+    </div>
+</template>
+
+<script >
+export default {
+    data() {
+    return {
+      chart: null,
+    };
+  },
+    watch: {
+    caseList: {
+      handler(val) {
+        if (val.length > 0) {
+          this.$nextTick(() => {
+            // 获取dom容器
+            const chartDom = this.$refs.chart;
+            // 初始化图表实例
+            this.chart = echarts.init(chartDom);
+            this.initChart(val);
+          });
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  mounted(){
+    const chartDom = this.$refs.chart;
+  //   // 初始化图表实例
+    this.chart = echarts.init(chartDom);
+    this.initChart();
+    console.log(22222, this.CaseList);
+  },
+methods:{
+    initChart(data){
+     const option={
+        backgroundColor: "#031845",
+     color: [
+    "#2edfa3",
+    "#bce672",
+    "#ff4777",
+    "#70f3ff",
+    "#4b5cc4",
+    "#f47983",
+    "#8d4bbb",
+    "#6635EF",
+    "#FFAFDA",
+  ],
+  tooltip: {
+    trigger: "item",
+    formatter: "{a} <br/>{b}: {c} ({d}%)",
+  },
+  legend: {
+    orient: "horizontal",
+    icon: "circle",
+    bottom: 20,
+    x: "center",
+    textStyle: {
+      color: "#fff",
+    },
+    data: [
+      "独居",
+      "与配偶同住",
+      "	与子女同住",
+      "仅与重度残疾子女共同居住",
+      "与配偶及子女同住",
+      "与其他亲属同住",
+      "与父母同住",
+      "与其他人同住",
+    ],
+  },
+  series: [
+    {
+      name: "访问来源",
+      type: "pie",
+      selectedMode: "single",
+      radius: [0, "38%"],
+
+      label: {
+        normal: {
+          show: false,
+          position: "inner",
+          formatter: "{d}%",
+          textStyle: {
+            color: "#fff",
+            fontWeight: "normal",
+            fontSize: 20,
+          },
+        },
+      },
+      labelLine: {
+        normal: {
+          show: false,
+        },
+      },
+      data: [
+        {
+          value: 100,
+          name: "独居",
+        },
+        {
+          value: 100,
+          name: "与配偶同住",
+        },
+        {
+          value: 100,
+          name: "与子女同住",
+        },
+        {
+          value: 100,
+          name: "仅与重度残疾子女共同居住",
+        },
+        {
+          value: 100,
+          name: "与配偶及子女同住",
+        },
+        {
+          value: 100,
+          name: "与其他亲属同住",
+        },
+        {
+          value: 100,
+          name: "与父母同住",
+        },
+        {
+          value: 100,
+          name: "与其他人同住",
+        },
+      ],
+    },
+    {
+      name: "访问来源",
+      type: "pie",
+      radius: ["40%", "42%"],
+      label: {
+        normal: {
+          formatter: "{b|{b}}\n{hr|}\n{d|{d}%}",
+          rich: {
+            b: {
+              fontSize: 20,
+              color: "#fff",
+              align: "left",
+              padding: 4,
+            },
+            hr: {
+              borderColor: "#12EABE",
+              width: "100%",
+              borderWidth: 2,
+              height: 0,
+            },
+            d: {
+              fontSize: 20,
+              color: "#fff",
+              align: "left",
+              padding: 4,
+            },
+            c: {
+              fontSize: 20,
+              color: "#fff",
+              align: "center",
+              padding: 4,
+            },
+          },
+        },
+      },
+      labelLine: {
+        normal: {
+          show: true,
+          length: 20,
+          length2: 20,
+          lineStyle: {
+            type: "dashed",
+            width: 2,
+          },
+        },
+      },
+      data: [
+        {
+          value: 100,
+          name: "独居",
+        },
+        {
+          value: 100,
+          name: "与配偶同住",
+        },
+        {
+          value: 100,
+          name: "与子女同住",
+        },
+        {
+          value: 100,
+          name: "仅与重度残疾子女共同居住",
+        },
+        {
+          value: 100,
+          name: "与配偶及子女同住",
+        },
+        {
+          value: 100,
+          name: "与其他亲属同住",
+        },
+        {
+          value: 100,
+          name: "与父母同住",
+        },
+        {
+          value: 100,
+          name: "与其他人同住",
+        },
+      ],
+    },
+  ],
+     }
+     this.chart.setOption(option);
+      //自适应图表
+      window.onresize = this.chart.resize;
+    }
+}
+    
+}
+</script>
+
+<style scoped>
+
+</style>