监测

src/views/manage/app/monitor/circle-chart.vue

@@ -1,88 +0,0 @@
-<template>
-  <div class="chart-main" ref="ref_main">
-    <div class="chart-ref" ref="ref_chart" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  getCurrentInstance,
-  reactive,
-  ref,
-  onMounted,
-  watch,
-  nextTick,
-} from 'vue'
-import * as echarts from 'echarts'
-
-const props = defineProps({
-  data: <any>{},
-})
-
-const { proxy } = getCurrentInstance()
-const state = reactive({
-  resizeObserver: <any>null,
-  chart: <any>null,
-})
-const ref_chart = ref()
-const ref_main = ref()
-const initChart = () => {
-  echarts.dispose(ref_chart.value)
-  const chart = echarts.init(ref_chart.value)
-  const option = {
-    tooltip: {
-      trigger: 'item',
-    },
-    series: [
-      {
-        type: 'pie',
-        data: props.data,
-        radius: ['15%', '70%'],
-        padAngle: 1,
-        label: {
-          formatter: '{b}\n{d}%',
-          color: '#606266',
-          fontSize: 16,
-          fontFamily: 'PingFang SC',
-          fontWeight: 'bold',
-        },
-      },
-    ],
-  }
-  chart.setOption(option)
-  state.resizeObserver = new ResizeObserver((entries) => {
-    for (const entry of entries) {
-      chart && chart.resize()
-    }
-  })
-  state.resizeObserver.observe(ref_main.value)
-  return chart
-}
-watch(
-  () => props.data,
-  () => {
-    state.chart = initChart()
-  },
-)
-onMounted(() => {
-  nextTick(() => {
-    state.chart = initChart()
-  })
-  return () => {
-    state.resizeObserver?.unobserve(ref_main?.value)
-    state.resizeObserver?.disconnect()
-  }
-})
-</script>
-
-<style lang="scss" scoped>
-.chart-main {
-  flex: 1;
-  width: 100%;
-  height: 100%;
-  .chart-ref {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>

src/views/manage/app/monitor/index.vue

@@ -155,8 +155,35 @@
                 />
               </div>
               <div class="mt-[var(--czr-gap)] grid flex-1 grid-cols-3">
-                <div class="col-span-1">
-                  <circleChart :data="state.analysis.tokens.pie" />
+                <div
+                  class="col-span-1 flex flex-col items-center justify-center gap-4"
+                >
+                  <div
+                    class="relative flex h-[12.5rem] w-[12.5rem] items-center justify-center"
+                  >
+                    <div
+                      class="absolute h-full w-full animate-spin bg-[url('@/assets/images/app/app-monitor-icon-5.png')] bg-[length:100%_100%] bg-no-repeat"
+                      style="animation-duration: 5s"
+                    />
+                    <div
+                      class="absolute text-[2.5rem] font-bold text-[#2E3238]"
+                    >
+                      1234
+                    </div>
+                  </div>
+                  <div
+                    class="flex items-center gap-2 text-[1.13rem] text-[#909399]"
+                  >
+                    相比前天
+                    <div class="flex text-[1.5rem] font-bold text-[#00A700]">
+                      <SvgIcon
+                        name="czr_arrow_1"
+                        color="#00A700"
+                        size="24"
+                        rotate="180"
+                      />50%
+                    </div>
+                  </div>
                 </div>
                 <div class="col-span-2">
                   <lineChart
@@ -187,8 +214,34 @@
                 全部会话数
               </div>
               <div class="mt-[var(--czr-gap)] grid flex-1 grid-cols-3">
-                <div class="col-span-1">
-                  <circleChart :data="state.analysis.session.pie" />
+                <div
+                  class="col-span-1 flex flex-col items-center justify-center gap-4"
+                >
+                  <div
+                    class="relative flex h-[12.5rem] w-[12.5rem] items-center justify-center"
+                  >
+                    <div
+                      class="absolute h-full w-full animate-spin bg-[url('@/assets/images/app/app-monitor-icon-6.png')] bg-[length:100%_100%] bg-no-repeat"
+                      style="animation-duration: 5s"
+                    />
+                    <div
+                      class="absolute text-[2.5rem] font-bold text-[#2E3238]"
+                    >
+                      1234
+                    </div>
+                  </div>
+                  <div
+                    class="flex items-center gap-2 text-[1.13rem] text-[#909399]"
+                  >
+                    相比前天
+                    <div class="flex text-[1.5rem] font-bold text-[#FF5454]">
+                      <SvgIcon
+                        name="czr_arrow_1"
+                        color="#FF5454"
+                        size="24"
+                      />50%
+                    </div>
+                  </div>
                 </div>
                 <div class="col-span-2">
                   <lineChart
@@ -207,8 +260,34 @@
                 活跃用户数
               </div>
               <div class="mt-[var(--czr-gap)] grid flex-1 grid-cols-3">
-                <div class="col-span-1">
-                  <circleChart :data="state.analysis.active.pie" />
+                <div
+                  class="col-span-1 flex flex-col items-center justify-center gap-4"
+                >
+                  <div
+                    class="relative flex h-[12.5rem] w-[12.5rem] items-center justify-center"
+                  >
+                    <div
+                      class="absolute h-full w-full animate-spin bg-[url('@/assets/images/app/app-monitor-icon-7.png')] bg-[length:100%_100%] bg-no-repeat"
+                      style="animation-duration: 5s"
+                    />
+                    <div
+                      class="absolute text-[2.5rem] font-bold text-[#2E3238]"
+                    >
+                      1234
+                    </div>
+                  </div>
+                  <div
+                    class="flex items-center gap-2 text-[1.13rem] text-[#909399]"
+                  >
+                    相比前天
+                    <div class="flex text-[1.5rem] font-bold text-[#FF5454]">
+                      <SvgIcon
+                        name="czr_arrow_1"
+                        color="#FF5454"
+                        size="24"
+                      />50%
+                    </div>
+                  </div>
                 </div>
                 <div class="col-span-2">
                   <lineChart
@@ -438,15 +517,9 @@ import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import lineChart from './line-chart.vue'
 import pieChart from './pie-chart.vue'
-import circleChart from './circle-chart.vue'
-import { pluginDetail } from '@/api/modules/model'
 import { useDictionaryStore } from '@/stores'
-import { YMDHms } from '@/utils/czr-util'
 import { debounce } from 'lodash'
-import { documentGetDocumentsByPage } from '@/api/modules/knowledge/document'
 import { Search } from '@element-plus/icons-vue'
-import CzrDialogDrag from '@/components/czr-ui/CzrDialogDrag.vue'
-import CzrContent from '@/components/czr-ui/CzrContent.vue'
 
 const DictionaryStore = useDictionaryStore()
 const route = useRoute()

src/views/manage/app/monitor/pie-chart.vue

@@ -26,9 +26,11 @@ const state = reactive({
 })
 const ref_chart = ref()
 const ref_main = ref()
+const colors = ['58, 136, 255', '96, 217, 169', '31, 182, 221', '255, 116, 44']
 const initChart = () => {
   echarts.dispose(ref_chart.value)
   const chart = echarts.init(ref_chart.value)
+  const padAngle = 1
   const option = {
     tooltip: {
       trigger: 'item',
@@ -37,8 +39,15 @@ const initChart = () => {
       {
         type: 'pie',
         data: props.data,
-        radius: ['15%', '70%'],
-        padAngle: 1,
+        radius: ['68%', '70%'],
+        padAngle: padAngle,
+        itemStyle: {
+          borderRadius: 10,
+          color: (p) => {
+            const colorRgb = colors[p.dataIndex % (colors.length - 1)]
+            return `rgba(${colorRgb}, 1)`
+          },
+        },
         label: {
           formatter: '{b}\n{d}%',
           color: '#606266',
@@ -49,6 +58,45 @@ const initChart = () => {
         labelLine: {
           length2: 100,
         },
+        emphasis: {
+          disabled: true,
+        },
+      },
+      {
+        type: 'pie',
+        data: props.data,
+        radius: ['52%', '62%'],
+        padAngle: padAngle,
+        itemStyle: {
+          borderRadius: 10,
+          color: (p) => {
+            const colorRgb = colors[p.dataIndex % (colors.length - 1)]
+            return {
+              type: 'linear',
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: `rgba(${colorRgb}, 0.3)`, // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: `rgba(${colorRgb}, 1)`, // 100% 处的颜色
+                },
+              ],
+              global: false, // 缺省为 false
+            }
+          },
+        },
+        emphasis: {
+          disabled: true,
+        },
+        label: {
+          show: false,
+        },
       },
     ],
   }