chore: 基础信息图表调整

app/src/components/BasicTotal.vue

@@ -0,0 +1,26 @@
+<script>
+export default {
+  name: 'BasicTotal',
+  props: {
+    number: {
+      type: String,
+      default: ''
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    unit: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<template >
+  <div>{{ label }}<span>{{ number }}</span>{{ unit }}</div>
+</template>
+
+<style scoped lang='less'>
+</style>

app/src/views/HomeView.vue

@@ -11,7 +11,7 @@
             style="margin-bottom: 6px"
             title="基础信息"
           >
-            <FirstHight />
+            <BasicInfo />
           </border-panel>
           <border-panel
             height="346px"
@@ -72,7 +72,7 @@
 </template>
 <script>
 import Headers from "@/components/Headers.vue";
-import FirstHight from "./components/FirstHight.vue";
+import BasicInfo from "./components/BasicInfo.vue";
 import AlarmingSituationDynamics from "./components/AlarmingSituationDynamics.vue";
 import AutonomousManagement from "./components/AutonomousManagement.vue";
 import HiddenDangerDetection from "./components/HiddenDangerDetection.vue";
@@ -82,7 +82,7 @@ import WisdomFire from "./components/WisdomFire.vue";
 export default {
   components: {
     Headers,
-    FirstHight,
+    BasicInfo,
     WisdomFire,
     AlarmingSituationDynamics,
     MapCharts,

app/src/views/components/BasicInfo.vue

@@ -0,0 +1,40 @@
+<script>
+import FirstHight from './FirstHight.vue';
+import BasicTotal from '@/components/BasicTotal.vue';
+
+export default {
+  name: 'BasicInfo',
+  components: {
+    FirstHight,
+    BasicTotal
+  }
+}
+</script>
+
+<template >
+  <div class="basic-info">
+      <div class="__top">
+        <FirstHight />
+        <FirstHight />
+      </div>
+      <div class="__bottom">
+        <div>治理重点</div>
+        <div>超高层<span>1326</span>栋</div>
+        <BasicTotal number="1326" label="超高层" unit="栋"/>
+        <BasicTotal number="926" label="老旧" unit="栋"/>
+        <BasicTotal number="1273" label="混合体" unit="栋"/>
+      </div>
+    </div>
+</template>
+
+<style scoped lang='less'>
+.basic-info {
+  padding: 4px;
+  .__top {
+    display: flex; justify-content: space-around;
+  }
+  .__bottom {
+    
+  }
+}
+</style>

app/src/views/components/FirstHight.vue

@@ -1,9 +1,5 @@
 <template>
-  <div>
-    <div>
-      <div ref="chart" class="item" style="width: 240px; height: 209px" />
-    </div>
-  </div>
+  <div ref="chart" class="item" style="width: 220px; height: 180px" />
 </template>
 
 <script>
@@ -23,18 +19,15 @@ export default {
   methods: {
     initChart(data) {
       let angle = 0; //角度，用来做简单的动画效果的
-      let value = 80;
       var timerId;
-      var outerRidus1 = 0.8;
-      var outerRidus2 = 0.85;
+      var outerRidus1 = 0.7;
+      var outerRidus2 = 0.75;
       const option = {
-        //   backgroundColor: '#090d1a',
         legend: {
-          // orient: 'vertical',
           right: "0",
           bottom: "-10px",
-          itemWidth: 14,
-          itemGap: 12,
+          itemWidth: 10,
+          itemGap: 8,
           textStyle: {
             color: "#FFFFFF",
             fontSize: 12,
@@ -48,7 +41,7 @@ export default {
           // 最外层圆
           {
             type: "pie",
-            radius: ["75%", "55%"],
+            radius: ["55%", "60%"],
             center: ["50%", "50%"],
             hoverAnimation: false,
             data: [
@@ -373,18 +366,18 @@ export default {
         };
       }
 
-      const draw = () => {
-        angle = angle + 3;
-        this.chart.setOption(option, true);
-        //window.requestAnimationFrame(draw);
-      };
-      if (timerId) {
-        clearInterval(timerId);
-      }
-      timerId = setInterval(function () {
-        //用setInterval做动画感觉有问题
-        draw();
-      }, 100);
+      // const draw = () => {
+      //   angle = angle + 3;
+      //   this.chart.setOption(option, true);
+      //   //window.requestAnimationFrame(draw);
+      // };
+      // if (timerId) {
+      //   clearInterval(timerId);
+      // }
+      // timerId = setInterval(function () {
+      //   //用setInterval做动画感觉有问题
+      //   draw();
+      // }, 100);
       this.chart.setOption(option);
       //自适应图表
       window.onresize = this.chart.resize;