初步完成分布统计页面dev

3 files changed, 588 insertions, 17 deletions

diff --git a/src/views/dashboard/components/Admin.vue b/src/views/dashboard/components/Admin.vue
index beeed90..1a868ec 100644
--- a/src/views/dashboard/components/Admin.vue
+++ b/src/views/dashboard/components/Admin.vue
@@ -1,11 +1,12 @@
 <script lang="ts" setup>
-import { ref, onMounted, reactive, toRefs } from "vue"
+import { ref } from "vue"
 import { use } from "echarts/core"
 import { LineChart } from "echarts/charts"
 import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from "echarts/components"
 import { SVGRenderer } from "echarts/renderers"
 import VChart from "vue-echarts"
 import * as sys from "@/api/sys"
+import { useNow } from "@vueuse/core"
 
 // 系统运行时间数据
 const workday = ref(0)
@@ -57,20 +58,7 @@ const option = ref({
 })
 
 // 当前时间
-const state = reactive({
-  nowTime: new Date().toLocaleString()
-})
-
-function getnowTime(nowTime: any): any {
-  setInterval(() => {
-    const date = new Date()
-    nowTime.value = date.toLocaleString()
-  }, 1000)
-}
-onMounted(() => {
-  getnowTime(nowTime)
-})
-const { nowTime } = toRefs(state)
+const nowTime = useNow()
 </script>
 
 <template>
@@ -129,7 +117,6 @@ const { nowTime } = toRefs(state)
         </el-card>
       </el-col>
     </el-row>
-    <!-- <el-empty description="Admin 权限可见" /> -->
   </div>
 </template>
 
diff --git a/src/views/fx/index.vue b/src/views/fx/index.vue
new file mode 100644
index 0000000..5d97ce7
--- /dev/null
+++ b/src/views/fx/index.vue
@@ -0,0 +1,295 @@
+<!-- 分析统计页面 -->
+<script lang="ts" setup>
+import { ref, onMounted } from "vue"
+import { use } from "echarts/core"
+import { BarChart, PieChart } from "echarts/charts"
+import {
+  DatasetComponent,
+  TransformComponent,
+  TooltipComponent,
+  GridComponent,
+  ToolboxComponent,
+  LegendComponent
+} from "echarts/components"
+import { SVGRenderer } from "echarts/renderers"
+import VChart from "vue-echarts"
+import { SuitcaseLine, Histogram, MapLocation } from "@element-plus/icons-vue"
+import { Choropleth } from "@antv/l7plot"
+
+// echart 图表
+use([
+  PieChart,
+  BarChart,
+  DatasetComponent,
+  ToolboxComponent,
+  TransformComponent,
+  GridComponent,
+  TooltipComponent,
+  SVGRenderer,
+  LegendComponent
+])
+const ispoption = ref({
+  tooltip: [
+    {
+      trigger: "item",
+      formatter: "<b>{a}</b> </br> {c} (<b>{d}%</b>)"
+    }
+  ],
+  toolbox: [
+    {
+      feature: {
+        saveAsImage: { show: true } // 保存图表
+      }
+    }
+  ],
+  legend: [
+    {
+      orient: "vertical",
+      x: "left"
+    }
+  ],
+  dataset: [
+    {
+      dimensions: ["name", "count"],
+      source: [
+        ["Hannah Krause", 41],
+        ["Zhao Qian", 20],
+        ["Jasmin Krause ", 52],
+        ["Li Lei", 37],
+        ["Karle Neumann", 25],
+        ["Adrian Groß", 19],
+        ["Mia Neumann", 71],
+        ["Böhm Fuchs", 36],
+        ["Han Meimei", 67]
+      ]
+    }
+  ],
+  series: [
+    {
+      name: "IPv6 DNS数量统计",
+      type: "pie",
+      // 最小显示角度
+      minShowLabelAngle: 1,
+      encode: { itemName: "name", value: "count" }
+    }
+  ]
+})
+
+const asnoption = ref({
+  toolbox: [
+    {
+      feature: {
+        saveAsImage: { show: true } // 保存图表
+      }
+    }
+  ],
+  dataset: [
+    {
+      dimensions: ["name", "count"],
+      source: [
+        ["Hannah Krause", 41],
+        ["Zhao Qian", 20],
+        ["Jasmin Krause ", 52],
+        ["Li Lei", 37],
+        ["Karle Neumann", 25],
+        ["Adrian Groß", 19],
+        ["Mia Neumann", 71],
+        ["Böhm Fuchs", 36],
+        ["Han Meimei", 67]
+      ]
+    },
+    {
+      transform: {
+        type: "sort",
+        config: { dimension: "count", order: "desc" }
+      }
+    }
+  ],
+  xAxis: {
+    type: "category",
+    axisLabel: { interval: 0, rotate: 30 }
+  },
+  yAxis: {},
+  tooltip: {
+    trigger: "axis",
+    axisPointer: {
+      type: "shadow"
+    }
+  },
+  series: [
+    {
+      name: "IPv6 DNS数量统计",
+      type: "bar",
+      encode: { x: "name", y: "count" },
+      datasetIndex: 1
+    }
+  ]
+})
+
+// L7Plot
+onMounted(() => {
+  new Choropleth("mapcontainer", {
+    map: {
+      type: "map",
+      // style: 'blank',
+      center: [120.19382669582967, 30.258134],
+      zoom: 3,
+      pitch: 0
+    },
+    source: {
+      //"Russian Federation",
+      data: [
+        { name: "China", value: 200 },
+        { name: "Colombia", value: 250 },
+        { name: "United States", value: 180 },
+        { name: "Germany", value: 120 },
+
+        { name: "Russia", value: 130 },
+        { name: "澳大利亚", value: 130 },
+        { name: "新加坡", value: 170 },
+        { name: "巴西", value: 80 }
+      ],
+      joinBy: {
+        sourceField: "name",
+        geoField: "english"
+      }
+    },
+    viewLevel: {
+      level: "world",
+      adcode: "all"
+    },
+    autoFit: true,
+    color: {
+      field: "value",
+      value: ["#B8E1FF", "#7DAAFF", "#3D76DD", "#0047A5", "#001D70"],
+      scale: { type: "quantize" }
+    },
+    style: {
+      opacity: 1,
+      stroke: "#ccc",
+      lineWidth: 0.6,
+      lineOpacity: 1
+    },
+    chinaBorder: false,
+    label: {
+      visible: true,
+      field: "value",
+      style: {
+        fill: "#000",
+        opacity: 0.8,
+        fontSize: 10,
+        stroke: "#fff",
+        strokeWidth: 1.5,
+        textAllowOverlap: false,
+        padding: [5, 5]
+      }
+    },
+    state: {
+      active: true,
+      select: {
+        stroke: "black",
+        lineWidth: 1.5,
+        lineOpacity: 0.8
+      }
+    },
+    tooltip: {
+      items: ["name", "value"],
+      trigger: "mousemove"
+    },
+    zoom: {
+      position: "bottomright"
+    },
+    legend: {
+      position: "bottomleft"
+    }
+  })
+})
+</script>
+
+<template>
+  <div class="app-container">
+    <!-- Top 10厂商 -->
+    <el-row justify="center">
+      <el-col class="icenter">
+        <el-card class="box-card" style="width: 92%" shadow="hover">
+          <template #header>
+            <div class="fig-title">
+              <SuitcaseLine style="width: 2em; height: 2em; margin-right: 8px" />
+              <div style="font-size: 24px; font-weight: 900">IPv6 DNS分布厂商统计</div>
+            </div>
+          </template>
+          <!-- 饼图展示厂商 -->
+          <v-chart class="chart" :option="ispoption" autoresize />
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row justify="center">
+      <el-col class="icenter">
+        <el-card class="box-card" style="width: 92%" shadow="hover">
+          <template #header>
+            <div class="fig-title">
+              <Histogram style="width: 2em; height: 2em; margin-right: 8px" />
+              <div style="font-size: 24px; font-weight: 900">IPv6 DNS分布自治域统计</div>
+            </div>
+          </template>
+          <!-- 柱状图展示ASN -->
+          <v-chart class="chart" :option="asnoption" autoresize />
+        </el-card>
+      </el-col>
+    </el-row>
+    <!-- 地理可视化 -->
+    <el-row justify="center">
+      <el-col class="icenter">
+        <el-card class="box-card" style="width: 92%" shadow="hover">
+          <template #header>
+            <div class="fig-title">
+              <MapLocation style="width: 2em; height: 2em; margin-right: 8px" />
+              <div style="font-size: 24px; font-weight: 900">IPv6 DNS分布国家统计</div>
+            </div>
+          </template>
+          <!-- 地理 -->
+          <div id="mapcontainer" style="position: relative; height: 100%; min-height: 500px" />
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.chart {
+  height: 60vh;
+}
+.el-row {
+  margin-bottom: 20px;
+}
+.card-title {
+  font-size: 24px;
+  margin: 10px;
+  font-weight: 900;
+  color: aliceblue;
+}
+.count-num {
+  font-size: 36px;
+  font-weight: 900;
+  color: azure;
+}
+
+.icenter {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.fig-title {
+  margin-top: 13px;
+  line-height: 12px;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+}
+
+.box-card {
+  height: auto;
+  width: 80%;
+}
+</style>
diff --git a/src/views/stats/index.vue b/src/views/stats/index.vue
index eab1f4c..5d97ce7 100644
--- a/src/views/stats/index.vue
+++ b/src/views/stats/index.vue
@@ -1,6 +1,295 @@
 <!-- 分析统计页面 -->
+<script lang="ts" setup>
+import { ref, onMounted } from "vue"
+import { use } from "echarts/core"
+import { BarChart, PieChart } from "echarts/charts"
+import {
+  DatasetComponent,
+  TransformComponent,
+  TooltipComponent,
+  GridComponent,
+  ToolboxComponent,
+  LegendComponent
+} from "echarts/components"
+import { SVGRenderer } from "echarts/renderers"
+import VChart from "vue-echarts"
+import { SuitcaseLine, Histogram, MapLocation } from "@element-plus/icons-vue"
+import { Choropleth } from "@antv/l7plot"
+
+// echart 图表
+use([
+  PieChart,
+  BarChart,
+  DatasetComponent,
+  ToolboxComponent,
+  TransformComponent,
+  GridComponent,
+  TooltipComponent,
+  SVGRenderer,
+  LegendComponent
+])
+const ispoption = ref({
+  tooltip: [
+    {
+      trigger: "item",
+      formatter: "<b>{a}</b> </br> {c} (<b>{d}%</b>)"
+    }
+  ],
+  toolbox: [
+    {
+      feature: {
+        saveAsImage: { show: true } // 保存图表
+      }
+    }
+  ],
+  legend: [
+    {
+      orient: "vertical",
+      x: "left"
+    }
+  ],
+  dataset: [
+    {
+      dimensions: ["name", "count"],
+      source: [
+        ["Hannah Krause", 41],
+        ["Zhao Qian", 20],
+        ["Jasmin Krause ", 52],
+        ["Li Lei", 37],
+        ["Karle Neumann", 25],
+        ["Adrian Groß", 19],
+        ["Mia Neumann", 71],
+        ["Böhm Fuchs", 36],
+        ["Han Meimei", 67]
+      ]
+    }
+  ],
+  series: [
+    {
+      name: "IPv6 DNS数量统计",
+      type: "pie",
+      // 最小显示角度
+      minShowLabelAngle: 1,
+      encode: { itemName: "name", value: "count" }
+    }
+  ]
+})
+
+const asnoption = ref({
+  toolbox: [
+    {
+      feature: {
+        saveAsImage: { show: true } // 保存图表
+      }
+    }
+  ],
+  dataset: [
+    {
+      dimensions: ["name", "count"],
+      source: [
+        ["Hannah Krause", 41],
+        ["Zhao Qian", 20],
+        ["Jasmin Krause ", 52],
+        ["Li Lei", 37],
+        ["Karle Neumann", 25],
+        ["Adrian Groß", 19],
+        ["Mia Neumann", 71],
+        ["Böhm Fuchs", 36],
+        ["Han Meimei", 67]
+      ]
+    },
+    {
+      transform: {
+        type: "sort",
+        config: { dimension: "count", order: "desc" }
+      }
+    }
+  ],
+  xAxis: {
+    type: "category",
+    axisLabel: { interval: 0, rotate: 30 }
+  },
+  yAxis: {},
+  tooltip: {
+    trigger: "axis",
+    axisPointer: {
+      type: "shadow"
+    }
+  },
+  series: [
+    {
+      name: "IPv6 DNS数量统计",
+      type: "bar",
+      encode: { x: "name", y: "count" },
+      datasetIndex: 1
+    }
+  ]
+})
+
+// L7Plot
+onMounted(() => {
+  new Choropleth("mapcontainer", {
+    map: {
+      type: "map",
+      // style: 'blank',
+      center: [120.19382669582967, 30.258134],
+      zoom: 3,
+      pitch: 0
+    },
+    source: {
+      //"Russian Federation",
+      data: [
+        { name: "China", value: 200 },
+        { name: "Colombia", value: 250 },
+        { name: "United States", value: 180 },
+        { name: "Germany", value: 120 },
+
+        { name: "Russia", value: 130 },
+        { name: "澳大利亚", value: 130 },
+        { name: "新加坡", value: 170 },
+        { name: "巴西", value: 80 }
+      ],
+      joinBy: {
+        sourceField: "name",
+        geoField: "english"
+      }
+    },
+    viewLevel: {
+      level: "world",
+      adcode: "all"
+    },
+    autoFit: true,
+    color: {
+      field: "value",
+      value: ["#B8E1FF", "#7DAAFF", "#3D76DD", "#0047A5", "#001D70"],
+      scale: { type: "quantize" }
+    },
+    style: {
+      opacity: 1,
+      stroke: "#ccc",
+      lineWidth: 0.6,
+      lineOpacity: 1
+    },
+    chinaBorder: false,
+    label: {
+      visible: true,
+      field: "value",
+      style: {
+        fill: "#000",
+        opacity: 0.8,
+        fontSize: 10,
+        stroke: "#fff",
+        strokeWidth: 1.5,
+        textAllowOverlap: false,
+        padding: [5, 5]
+      }
+    },
+    state: {
+      active: true,
+      select: {
+        stroke: "black",
+        lineWidth: 1.5,
+        lineOpacity: 0.8
+      }
+    },
+    tooltip: {
+      items: ["name", "value"],
+      trigger: "mousemove"
+    },
+    zoom: {
+      position: "bottomright"
+    },
+    legend: {
+      position: "bottomleft"
+    }
+  })
+})
+</script>
+
 <template>
   <div class="app-container">
-    <el-card />
+    <!-- Top 10厂商 -->
+    <el-row justify="center">
+      <el-col class="icenter">
+        <el-card class="box-card" style="width: 92%" shadow="hover">
+          <template #header>
+            <div class="fig-title">
+              <SuitcaseLine style="width: 2em; height: 2em; margin-right: 8px" />
+              <div style="font-size: 24px; font-weight: 900">IPv6 DNS分布厂商统计</div>
+            </div>
+          </template>
+          <!-- 饼图展示厂商 -->
+          <v-chart class="chart" :option="ispoption" autoresize />
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row justify="center">
+      <el-col class="icenter">
+        <el-card class="box-card" style="width: 92%" shadow="hover">
+          <template #header>
+            <div class="fig-title">
+              <Histogram style="width: 2em; height: 2em; margin-right: 8px" />
+              <div style="font-size: 24px; font-weight: 900">IPv6 DNS分布自治域统计</div>
+            </div>
+          </template>
+          <!-- 柱状图展示ASN -->
+          <v-chart class="chart" :option="asnoption" autoresize />
+        </el-card>
+      </el-col>
+    </el-row>
+    <!-- 地理可视化 -->
+    <el-row justify="center">
+      <el-col class="icenter">
+        <el-card class="box-card" style="width: 92%" shadow="hover">
+          <template #header>
+            <div class="fig-title">
+              <MapLocation style="width: 2em; height: 2em; margin-right: 8px" />
+              <div style="font-size: 24px; font-weight: 900">IPv6 DNS分布国家统计</div>
+            </div>
+          </template>
+          <!-- 地理 -->
+          <div id="mapcontainer" style="position: relative; height: 100%; min-height: 500px" />
+        </el-card>
+      </el-col>
+    </el-row>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.chart {
+  height: 60vh;
+}
+.el-row {
+  margin-bottom: 20px;
+}
+.card-title {
+  font-size: 24px;
+  margin: 10px;
+  font-weight: 900;
+  color: aliceblue;
+}
+.count-num {
+  font-size: 36px;
+  font-weight: 900;
+  color: azure;
+}
+
+.icenter {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.fig-title {
+  margin-top: 13px;
+  line-height: 12px;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+}
+
+.box-card {
+  height: auto;
+  width: 80%;
+}
+</style>