feat: 完成出警统计

src/views/main/right/PoliceStatistics/CallPoliceCount.vue

@@ -0,0 +1,91 @@
+<template >
+  <div id="callPoliceCount"></div>
+</template>
+
+<script>
+import { Area } from '@antv/g2plot';
+
+export default {
+  name: 'CallPoliceCount',
+  data() {
+    return {}
+  },
+  mounted() {
+    this.renderChart();
+  },
+  methods: {
+    renderChart() {
+      const data = [
+        {
+          type: '星期一',
+          value: 30
+        },
+        {
+          type: '星期二',
+          value: 80
+        },{
+          type: '星期三',
+          value: 70
+        },{
+          type: '星期四',
+          value: 90
+        },{
+          type: '星期五',
+          value: 100
+        },
+        {
+          type: '星期六',
+          value: 110
+        },
+        {
+          type: '星期日',
+          value: 120
+        },
+      ]
+
+      const area = new Area('callPoliceCount', {
+        data,
+        xField: 'type',
+        yField: 'value',
+        xAxis: {
+          range: [0, 1],
+          label: {
+            style: {
+              fill: '#85e9ff'
+            }
+          }
+        },
+        yAxis: {
+          grid: {
+            line: {
+              style: {
+                stroke: '#3be1ff',
+                lineDash: [3, 3],
+                opacity: 0.5
+              }
+            }
+          },
+          label: {
+            style: {
+              fill: '#85e9ff'
+            }
+          }
+        },
+        areaStyle: () => {
+          return {
+            fill: 'l(90) 0:#18B7F7 0.5:#7ec2f3 1:#000000',
+          };
+        },
+      });
+      area.render();
+    }
+  }
+}
+</script>
+
+<style scoped lang='less'>
+#callPoliceCount {
+  width: 312px;
+  height: 160px;
+}
+</style>

src/views/main/right/PoliceStatistics/PoliceCount.vue

@@ -0,0 +1,86 @@
+<template >
+  <div id="policeCount"></div>
+</template>
+
+<script>
+import { Pie } from '@antv/g2plot';
+
+export default {
+  name: 'PoliceCount',
+  data() {
+    return {}
+  },
+  mounted() {
+    this.renderChart();
+  },
+  methods: {
+    renderChart() {
+      const data = [
+        { type: '北碚区1', value: 779 },
+        { type: '北碚区2', value: 779 },
+        { type: '北碚区3', value: 779 },
+        { type: '北碚区4', value: 779 },
+        { type: '北碚区5', value: 779 },
+        { type: '北碚区6', value: 779 },
+      ];
+
+      const piePlot = new Pie('policeCount', {
+        appendPadding: 10,
+        data,
+        angleField: 'value',
+        colorField: 'type',
+        radius: 1,
+        innerRadius: 0.64,
+        meta: {
+          value: {
+            formatter: (v) => `${v}`,
+          },
+        },
+        label: null,
+        statistic: {
+          title: {
+            content: '出警次数',
+            style: {
+              color: '#fff',
+              fontSize: '1vh',
+            },
+            offsetY: -4,
+          },
+          content: {
+            style: {
+              color: '#ffde24',
+              fontSize: '1.5vh',
+            },
+            offsetY: 4,
+          },
+        },
+        interactions: [
+          {
+            type: 'pie-statistic-active',
+            cfg: {
+              start: [
+                { trigger: 'element:mouseenter', action: 'pie-statistic:change' },
+                { trigger: 'legend-item:mouseenter', action: 'pie-statistic:change' },
+              ],
+              end: [
+                { trigger: 'element:mouseleave', action: 'pie-statistic:reset' },
+                { trigger: 'legend-item:mouseleave', action: 'pie-statistic:reset' },
+              ],
+            },
+          },
+        ],
+      });
+
+      piePlot.update({ "theme": { "styleSheet": { "brandColor": "#B8E1FF", "paletteQualitative10": ["#B8E1FF", "#9AC5FF", "#7DAAFF", "#5B8FF9", "#3D76DD", "#085EC0", "#0047A5", "#00318A", "#001D70"], "paletteQualitative20": ["#B8E1FF", "#9AC5FF", "#7DAAFF", "#5B8FF9", "#3D76DD", "#085EC0", "#0047A5", "#00318A", "#001D70"] } } });
+      piePlot.render();
+    }
+  }
+}
+</script>
+
+<style scoped lang='less'>
+#policeCount {
+  width: 312px;
+  height: 160px;
+}
+</style>

src/views/main/right/PoliceStatistics/index.vue

@@ -0,0 +1,59 @@
+<template >
+  <div class="policeStatistics">
+    <div class="__switch">
+      <div :class="[activeClass('doCurrent')]" @click="displayInfo('doCurrent')" >当日出警</div>
+      <div :class="[activeClass('doWeek')]" @click="displayInfo('doWeek')" >近一周出警</div>
+      <div :class="[activeClass('doMouth')]" @click="displayInfo('doMouth')" >近一月出警</div>
+    </div>
+    <div>
+      <PoliceCount />
+      <CallPoliceCount />
+    </div>
+  </div>
+</template>
+
+<script>
+import CallPoliceCount from './CallPoliceCount.vue'
+import PoliceCount from './PoliceCount.vue'
+
+export default {
+  name: 'PoliceStatistics',
+  components: {
+    CallPoliceCount,
+    PoliceCount
+  },
+  data() {
+    return {
+      active: 'doCurrent'
+    }
+  },
+  methods: {
+    activeClass(name) {
+      return this.active === name ? 'active' : ''
+    },
+    displayInfo(name) {
+      this.active = name
+      this[name] && this[name]()
+    },
+  }
+}
+</script>
+
+<style scoped lang='less'>
+.policeStatistics {
+  .__switch {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      font-size: 14px;
+      font-weight: 600;
+      color: #85e9ff;
+      gap: 20px;
+      cursor: pointer;
+      
+    .active {
+      color: #ffd169;
+    }
+    }
+}
+</style>

src/views/main/right/RescueStationStatistics/index.vue

@@ -3,19 +3,27 @@
     <div class="title">全市站点分布</div>
     <div class="content">
       <div class="item">
-        <div class="value">12</div>
+        <div class="value">
+          <CountTo :startVal="0" :endVal="12" separator="" :duration="2000" />
+        </div>
         <div class="label">北碚区</div>
       </div>
       <div class="item">
-        <div class="value">03</div>
+        <div class="value">
+          <CountTo :startVal="0" :endVal="3" separator="" :duration="2000" />
+        </div>
         <div class="label">渝北区</div>
       </div>
       <div class="item">
-        <div class="value">13</div>
+        <div class="value">
+          <CountTo :startVal="0" :endVal="13" separator="" :duration="2000" />
+        </div>
         <div class="label">渝北区</div>
       </div>
       <div class="item">
-        <div class="value">13</div>
+        <div class="value">
+          <CountTo :startVal="0" :endVal="13" separator="" :duration="2000" />
+        </div>
         <div class="label">渝北区</div>
       </div>
     </div>
@@ -23,9 +31,11 @@
 </template>
 
 <script>
+import CountTo from 'vue-count-to'
 
 export default {
   name: 'RescueStationStatistics',
+  components: {CountTo},
   data() {
     return {}
   },

src/views/main/right/index.vue

@@ -4,7 +4,7 @@
     <RescueStationStatistics />
   </ContainerBorder>
   <ContainerBorder  title="出警统计">
-    111
+    <PoliceStatistics />
   </ContainerBorder>
   <ContainerBorder  title="消防日志">
     111
@@ -15,13 +15,15 @@
 <script>
 import { ContainerBorder, FloatPanel } from '@/components'
 import RescueStationStatistics from './RescueStationStatistics/index.vue'
+import PoliceStatistics from './PoliceStatistics/index.vue'
 
 export default {
   name: 'MainView.Right',
   components: {
     ContainerBorder,
     FloatPanel,
-    RescueStationStatistics
+    RescueStationStatistics,
+    PoliceStatistics
   }
 }
 </script>