监测分析

src/directives/drag.ts

@@ -24,8 +24,8 @@ const dragDirective = {
 
       if (mouse) {
         // 使用鼠标当前位置初始化
-        const mouseX = window.event.clientX + 20
-        const mouseY = window.event.clientY + 20
+        const mouseX = (window.event as any).clientX + 20
+        const mouseY = (window.event as any).clientY + 20
 
         // 计算初始位置，确保不会超出窗口
         let initLeft = Math.min(mouseX, windowWidth - elWidth)

src/layout/top-left/index.vue

@@ -54,6 +54,7 @@ const state: any = reactive({})
       flex: 1;
       display: flex;
       flex-direction: column;
+      overflow: hidden;
       .top-left-layout-center-content-views {
         overflow: hidden;
         flex: 1;

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

@@ -0,0 +1,88 @@
+<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

@@ -12,8 +12,8 @@
         class="mr-1"
       />应用中心
     </div>
-    <div class="bm-main-box mt-4">
-      <div class="mb-4 flex items-center">
+    <div class="bm-main-box mt-4 mr-[-15px]">
+      <div class="flex items-center">
         <img
           src="../../../../assets/images/app/app-default-logo.png"
           class="mr-[var(--czr-gap)] h-[3.25rem] w-[3.25rem]"
@@ -48,15 +48,15 @@
         />
       </div>
       <template v-if="state.tab == 1">
-        <div class="flex flex-1 flex-col overflow-y-auto">
-          <div class="flex h-[66px] items-center">
+        <div class="mt-4 flex flex-1 flex-col overflow-y-auto pr-2">
+          <div class="mt-3 flex h-[4.13rem] items-center">
             <div class="text-2xl font-bold text-[#303133]">累计指标</div>
             <div class="wi-[200px] ml-auto">
               <CzrFormColumn
                 class="__czr-table-form-column"
                 :span="24"
                 label-width="0px"
-                v-model:param="state.analysis.query.dateType"
+                v-model:param="state.analysis.dateType"
                 link="select"
                 :options="[
                   { label: '近7天', value: 1 },
@@ -69,20 +69,169 @@
             <SvgIcon name="czr_tip" class="ml-2" />
             <div class="text-xs text-[#C0C4CC]">累计指标不受时间筛选影响</div>
           </div>
-          <div class="relative mt-3 flex h-[110px] gap-4">
+          <div class="relative mt-5 flex gap-4">
             <div
-              class="flex-1 rounded-t-4xl bg-linear-to-tr from-[#FEFEFC] to-[#DAE9FE]"
-            ></div>
+              class="relative h-[6.88rem] flex-1 rounded-t-4xl bg-linear-to-tr from-[#FEFEFC] to-[#DAE9FE]"
+            >
+              <div class="relative z-10">
+                <div
+                  class="title-1 mt-[1.63rem] ml-[2.25rem] text-[1.25rem] font-bold text-[#2E3238]"
+                >
+                  累计Token消耗
+                </div>
+                <div
+                  class="mt-2 ml-[2.94rem] text-[1.75rem] font-bold text-[#303133]"
+                >
+                  438
+                  <!--                  23.4<span class="text-[0.88rem] text-[#909399]">%</span>-->
+                </div>
+              </div>
+              <div
+                class="absolute right-4 bottom-4 h-[8.06rem] w-[13.15rem] bg-[url('@/assets/images/app/app-monitor-icon-1.png')] bg-[length:100%_100%] bg-no-repeat"
+              />
+            </div>
             <div
-              class="flex-1 rounded-t-4xl bg-linear-to-tr from-[#FEFEFC] to-[#DAE9FE]"
-            ></div>
+              class="relative h-[6.88rem] flex-1 rounded-t-4xl bg-linear-to-tr from-[#FEFEFC] to-[#DAE9FE]"
+            >
+              <div class="relative z-10">
+                <div
+                  class="title-1 mt-[1.63rem] ml-[2.25rem] text-[1.25rem] font-bold text-[#2E3238]"
+                >
+                  累计用户数
+                </div>
+                <div
+                  class="mt-2 ml-[2.94rem] text-[1.75rem] font-bold text-[#303133]"
+                >
+                  112
+                </div>
+              </div>
+              <div
+                class="absolute right-4 bottom-4 h-[8.06rem] w-[13.15rem] bg-[url('@/assets/images/app/app-monitor-icon-2.png')] bg-[length:100%_100%] bg-no-repeat"
+              />
+            </div>
             <div
-              class="flex-1 rounded-t-4xl bg-linear-to-tr from-[#FEFEFC] to-[#DAE9FE]"
-            ></div>
+              class="relative h-[6.88rem] flex-1 rounded-t-4xl bg-linear-to-tr from-[#FEFEFC] to-[#DAE9FE]"
+            >
+              <div class="relative z-10">
+                <div
+                  class="title-1 mt-[1.63rem] ml-[2.25rem] text-[1.25rem] font-bold text-[#2E3238]"
+                >
+                  累计对话数
+                </div>
+                <div
+                  class="mt-2 ml-[2.94rem] text-[1.75rem] font-bold text-[#303133]"
+                >
+                  438
+                </div>
+              </div>
+              <div
+                class="absolute right-4 bottom-4 h-[8.06rem] w-[13.15rem] bg-[url('@/assets/images/app/app-monitor-icon-3.png')] bg-[length:100%_100%] bg-no-repeat"
+              />
+            </div>
             <div
-              class="flex-1 rounded-t-4xl bg-[url('@/assets/images/checked.png')]"
+              class="h-[6.88rem] flex-1 rounded-t-4xl bg-[url('@/assets/images/app/app-monitor-icon-4.png')] bg-[length:100%_100%] bg-no-repeat"
             ></div>
           </div>
+          <div class="mt-4 grid grid-cols-2 gap-4">
+            <div
+              class="col-span-1 flex h-[23rem] flex-col rounded-xl border-1 border-[#dfebfe] p-4"
+            >
+              <div
+                class="flex h-[2.25rem] items-center text-[1.25rem] text-[#2E3238]"
+              >
+                Token消耗量
+                <CzrFormColumn
+                  class="__czr-table-form-column ml-auto"
+                  width="5rem"
+                  label-width="0px"
+                  v-model:param="state.analysis.tokens.dateType"
+                  link="select"
+                  :options="[
+                    { label: '按日', value: 1 },
+                    { label: '按周', value: 2 },
+                    { label: '按月', value: 3 },
+                  ]"
+                  placeholder="应用状态"
+                />
+              </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>
+                <div class="col-span-2">
+                  <lineChart
+                    :data="state.analysis.tokens.line"
+                    rgb="47, 130, 255"
+                  />
+                </div>
+              </div>
+            </div>
+            <div
+              class="col-span-1 flex h-[23rem] flex-col rounded-xl border-1 border-[#dfebfe] p-4"
+            >
+              <div
+                class="flex h-[2.25rem] items-center text-[1.25rem] text-[#2E3238]"
+              >
+                用户来源
+              </div>
+              <div class="mt-[var(--czr-gap)] grid flex-1">
+                <pieChart :data="state.analysis.user" />
+              </div>
+            </div>
+            <div
+              class="col-span-1 flex h-[23rem] flex-col rounded-xl border-1 border-[#dfebfe] p-4"
+            >
+              <div
+                class="flex h-[2.25rem] items-center text-[1.25rem] text-[#2E3238]"
+              >
+                全部会话数
+              </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>
+                <div class="col-span-2">
+                  <lineChart
+                    :data="state.analysis.session.line"
+                    rgb="109, 221, 227"
+                  />
+                </div>
+              </div>
+            </div>
+            <div
+              class="col-span-1 flex h-[23rem] flex-col rounded-xl border-1 border-[#dfebfe] p-4"
+            >
+              <div
+                class="flex h-[2.25rem] items-center text-[1.25rem] text-[#2E3238]"
+              >
+                活跃用户数
+              </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>
+                <div class="col-span-2">
+                  <lineChart
+                    :data="state.analysis.active.line"
+                    rgb="255, 194, 70"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="mt-6 flex h-[4.13rem] items-center">
+            <div class="text-2xl font-bold text-[#303133]">渠道分析</div>
+          </div>
+          <div class="mt-4 max-h-[300px] w-full">
+            <CzrTable
+              v-loading="state.analysis.channel.loading"
+              :data="state.analysis.channel.data"
+              :head="state.analysis.channel.head"
+              :no-foot="true"
+              :full="true"
+            >
+            </CzrTable>
+          </div>
         </div>
       </template>
       <template v-else-if="state.tab == 2">
@@ -134,10 +283,10 @@
               />
               <CzrFormColumn
                 :span="13"
-                label="输入token"
+                label="输入Token"
                 v-model:param="state.logs.texts.p7"
                 link="number"
-                placeholder="token数量"
+                placeholder="Token数量"
               />
               <CzrFormColumn
                 :span="11"
@@ -145,14 +294,14 @@
                 label-width="40px"
                 v-model:param="state.logs.texts.p8"
                 link="number"
-                placeholder="token数量"
+                placeholder="Token数量"
               />
               <CzrFormColumn
                 :span="13"
-                label="输出token"
+                label="输出Token"
                 v-model:param="state.logs.texts.p9"
                 link="number"
-                placeholder="token数量"
+                placeholder="Token数量"
               />
               <CzrFormColumn
                 :span="11"
@@ -160,7 +309,7 @@
                 label-width="40px"
                 v-model:param="state.logs.texts.p10"
                 link="number"
-                placeholder="token数量"
+                placeholder="Token数量"
               />
               <CzrFormColumn
                 :span="13"
@@ -180,7 +329,7 @@
             </CzrForm>
           </div>
         </CzrDialogDrag>
-        <div class="log flex-1">
+        <div class="log mt-4 flex-1">
           <CzrContent
             v-model:tableHead="state.logs.query.head"
             @handleReset="onReset"
@@ -265,7 +414,6 @@
                 :page="state.logs.query.page.pageNum"
                 :pageSize="state.logs.query.page.pageSize"
                 @handlePage="onPage"
-                v-model:selected="state.logs.query.selected"
               >
               </CzrTable>
             </template>
@@ -290,6 +438,7 @@ 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'
@@ -310,7 +459,83 @@ const state: any = reactive({
   tab: 1,
   detail: {},
   analysis: {
-    query: { dateType: 1 },
+    dateType: 1,
+    tokens: {
+      dateType: 1,
+      pie: [
+        { name: '省公安厅', value: 3567 },
+        { name: '省人社厅', value: 357 },
+        { name: '省大数据局', value: 367 },
+      ],
+      line: [
+        { name: '05-07', value: 3567 },
+        { name: '05-07', value: 357 },
+        { name: '05-07', value: 367 },
+        { name: '05-07', value: 3567 },
+        { name: '05-07', value: 3567 },
+        { name: '05-07', value: 3567 },
+        { name: '05-07', value: 3567 },
+        { name: '05-07', value: 3567 },
+      ],
+    },
+    user: [
+      { name: 'API', value: 3567 },
+      { name: '应用市场', value: 357 },
+    ],
+    session: {
+      pie: [
+        { name: '省公安厅', value: 3567 },
+        { name: '省人社厅', value: 357 },
+        { name: '省大数据局', value: 367 },
+      ],
+      line: [
+        { name: '05-07', value: 3567 },
+        { name: '05-07', value: 357 },
+        { name: '05-07', value: 367 },
+        { name: '05-07', value: 3567 },
+        { name: '05-07', value: 3567 },
+        { name: '05-07', value: 3567 },
+        { name: '05-07', value: 3567 },
+        { name: '05-07', value: 3567 },
+      ],
+    },
+    active: {
+      pie: [
+        { name: '省公安厅', value: 3567 },
+        { name: '省人社厅', value: 357 },
+        { name: '省大数据局', value: 367 },
+      ],
+      line: [
+        { name: '05-07', value: 3567 },
+        { name: '05-07', value: 357 },
+        { name: '05-07', value: 367 },
+        { name: '05-07', value: 3567 },
+        { name: '05-07', value: 3567 },
+        { name: '05-07', value: 3567 },
+        { name: '05-07', value: 3567 },
+        { name: '05-07', value: 3567 },
+      ],
+    },
+    channel: {
+      loading: false,
+      head: [
+        { value: 'p1', label: '渠道', show: true },
+        { value: 'p1', label: '对话数', show: true },
+        { value: 'p1', label: '活跃用户数', show: true },
+        { value: 'p1', label: '会话数', show: true },
+        { value: 'p1', label: 'Token消耗量', show: true },
+      ],
+      data: [
+        { p1: 'sdsd' },
+        { p1: 'sdsd' },
+        { p1: 'sdsd' },
+        { p1: 'sdsd' },
+        { p1: 'sdsd' },
+        { p1: 'sdsd' },
+        { p1: 'sdsd' },
+        { p1: 'sdsd' },
+      ],
+    },
   },
   logs: {
     texts: {},
@@ -324,8 +549,8 @@ const state: any = reactive({
         { value: 'p1', label: '意图识别', show: true },
         { value: 'p1', label: '输入', show: true },
         { value: 'p1', label: '输出', show: true },
-        { value: 'p1', label: '输入token', show: true },
-        { value: 'p1', label: '输出token', show: true },
+        { value: 'p1', label: '输入Token', show: true },
+        { value: 'p1', label: '输出Token', show: true },
         { value: 'p1', label: '请求时间', show: true },
         { value: 'p1', label: '整体耗时', show: true },
         { value: 'p1', label: '反馈', show: true },
@@ -348,7 +573,7 @@ const state: any = reactive({
       formReal: {},
       result: {
         total: 0,
-        data: [],
+        data: [{ p1: 'sdsd' }, { p1: 'sdsd' }],
       },
       selected: [],
     },
@@ -478,4 +703,15 @@ const initDictionary = () => {
     padding: 0;
   }
 }
+.title-1 {
+  display: flex;
+  align-items: center;
+  &:before {
+    content: '';
+    width: 0.19rem;
+    height: 0.88rem;
+    background: #3ac3ff;
+    margin-right: 0.5rem;
+  }
+}
 </style>

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

@@ -17,6 +17,7 @@ import * as echarts from 'echarts'
 
 const props = defineProps({
   data: <any>{},
+  rgb: { default: '47, 130, 255' },
 })
 
 const { proxy } = getCurrentInstance()
@@ -31,9 +32,9 @@ const initChart = () => {
   const chart = echarts.init(ref_chart.value)
   const option = {
     grid: {
-      bottom: 20,
+      bottom: 30,
       right: 20,
-      left: 40,
+      left: 50,
       top: 20,
     },
     tooltip: {
@@ -81,23 +82,28 @@ const initChart = () => {
         smooth: true,
         showSymbol: false,
         itemStyle: {
-          color: '#45B1FF',
+          color: `rgba(${props.rgb}, 1)`,
+        },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 1,
+            x2: 0,
+            y2: 0,
+            colorStops: [
+              {
+                offset: 0,
+                color: `rgba(${props.rgb}, 0.1)`, // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: `rgba(${props.rgb}, 0.2)`, // 100% 处的颜色
+              },
+            ],
+            global: false, // 缺省为 false
+          },
         },
-        // areaStyle: {
-        //   color: {
-        //     type: 'linear',
-        //     x: 0,
-        //     y: 1,
-        //     x2: 0,
-        //     y2: 0,
-        //     colorStops: [{
-        //       offset: 0, color: 'red' // 0% 处的颜色
-        //     }, {
-        //       offset: 1, color: 'blue' // 100% 处的颜色
-        //     }],
-        //     global: false // 缺省为 false
-        //   },
-        // },
       },
     ],
   }
@@ -132,6 +138,7 @@ onMounted(() => {
   flex: 1;
   width: 100%;
   height: 100%;
+  box-shadow: 0rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.05);
   .chart-ref {
     width: 100%;
     height: 100%;