性能分析

src/views/pass-guest-statistic/index.vue

@@ -159,14 +159,14 @@ const state: any = reactive({
     },
     chart3: {
       time: [
-        dayjs(new Date().getTime() - 60 * 60 * 24 * 7).format('YYYY-MM-DD'),
+        dayjs(new Date().getTime() - 60 * 60 * 24 * 7 * 1000).format('YYYY-MM-DD'),
         dayjs(new Date()).format('YYYY-MM-DD')
       ],
       data: []
     },
     chart4: {
       time: [
-        dayjs(new Date().getTime() - 60 * 60 * 24 * 7).format('YYYY-MM-DD'),
+        dayjs(new Date().getTime() - 60 * 60 * 24 * 7 * 1000).format('YYYY-MM-DD'),
         dayjs(new Date()).format('YYYY-MM-DD')
       ],
       data: []

src/views/run-config-manage/monitor-analysis/run-statistic/chart/bar.vue

@@ -22,9 +22,10 @@ const initChart = () => {
   echarts.dispose(ref_chart.value)
   const chart = echarts.init(ref_chart.value)
   const option = {
+    color: '#2bc994',
     grid: {
       top: 40,
-      bottom: 50,
+      bottom: 20,
       left: 40,
       right: 10
     },
@@ -59,10 +60,9 @@ const initChart = () => {
     series: [
       {
         name: 'TOP5高频接口',
-        type: 'line',
+        type: 'bar',
         data: props.data,
-        symbol: 'none',
-        smooth: false
+        barMaxWidth: 60
       }
     ]
   }

src/views/run-config-manage/monitor-analysis/run-statistic/chart/bar3.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="chart-main" ref="ref_main">
+    <div class="chart-ref" ref="ref_chart" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, onMounted, watch, nextTick } from 'vue'
+import * as echarts from 'echarts'
+
+const props = defineProps({
+  data: <any>{}
+})
+
+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 = {
+    color: '#2bc994',
+    grid: {
+      top: 40,
+      bottom: 20,
+      left: 40,
+      right: 10
+    },
+    tooltip: {
+      trigger: 'axis'
+    },
+    xAxis: {
+      type: 'category',
+      data: props.data.map((v) => v.name),
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: {
+        // color: 'rgba(255, 255, 255, 0.50)',
+        fontSize: 10
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: { show: false },
+      axisTick: { show: false },
+      // splitLine: {
+      //   lineStyle: {
+      //     color: 'rgba(255, 255, 255, 0.50)',
+      //     type: 'dotted'
+      //   }
+      // },
+      axisLabel: {
+        // color: 'rgba(255, 255, 255, 0.50)',
+        fontSize: 10
+      }
+    },
+    series: [
+      {
+        name: '接口交换数据量',
+        type: 'bar',
+        data: props.data,
+        barMaxWidth: 60
+      }
+    ]
+  }
+  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="less" scoped>
+.chart-main {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+
+  .chart-ref {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/run-config-manage/monitor-analysis/run-statistic/chart/line2.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="chart-main" ref="ref_main">
+    <div class="chart-ref" ref="ref_chart" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, onMounted, watch, nextTick } from 'vue'
+import * as echarts from 'echarts'
+
+const props = defineProps({
+  data: <any>{}
+})
+
+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 = {
+    color: '#ffcf81',
+    grid: {
+      top: 40,
+      bottom: 20,
+      left: 40,
+      right: 10
+    },
+    tooltip: {
+      trigger: 'axis'
+    },
+    xAxis: {
+      type: 'category',
+      data: props.data.map((v) => v.name),
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: {
+        // color: 'rgba(255, 255, 255, 0.50)',
+        fontSize: 10
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: { show: false },
+      axisTick: { show: false },
+      // splitLine: {
+      //   lineStyle: {
+      //     color: 'rgba(255, 255, 255, 0.50)',
+      //     type: 'dotted'
+      //   }
+      // },
+      axisLabel: {
+        // color: 'rgba(255, 255, 255, 0.50)',
+        fontSize: 10
+      }
+    },
+    series: [
+      {
+        name: '慢查询占比',
+        type: 'line',
+        data: props.data,
+        symbol: 'emptyCircle',
+        symbolSize: 6,
+        smooth: false
+      }
+    ]
+  }
+  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="less" scoped>
+.chart-main {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+
+  .chart-ref {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/run-config-manage/monitor-analysis/run-statistic/chart/line4.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="chart-main" ref="ref_main">
+    <div class="chart-ref" ref="ref_chart" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, onMounted, watch, nextTick } from 'vue'
+import * as echarts from 'echarts'
+
+const props = defineProps({
+  data: <any>{}
+})
+
+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 = {
+    color: '#ffcf81',
+    grid: {
+      top: 40,
+      bottom: 20,
+      left: 40,
+      right: 10
+    },
+    tooltip: {
+      trigger: 'axis'
+    },
+    xAxis: {
+      type: 'category',
+      data: props.data.map((v) => v.name),
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: {
+        // color: 'rgba(255, 255, 255, 0.50)',
+        fontSize: 10
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: { show: false },
+      axisTick: { show: false },
+      // splitLine: {
+      //   lineStyle: {
+      //     color: 'rgba(255, 255, 255, 0.50)',
+      //     type: 'dotted'
+      //   }
+      // },
+      axisLabel: {
+        // color: 'rgba(255, 255, 255, 0.50)',
+        fontSize: 10
+      }
+    },
+    series: [
+      {
+        name: '异常告警数据量',
+        type: 'line',
+        data: props.data,
+        symbol: 'emptyCircle',
+        symbolSize: 6,
+        smooth: false
+      }
+    ]
+  }
+  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="less" scoped>
+.chart-main {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+
+  .chart-ref {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/run-config-manage/monitor-analysis/run-statistic/index.vue

@@ -5,7 +5,7 @@
         <el-tab-pane label="实时状态" name="0"></el-tab-pane>
         <el-tab-pane label="性能分析" name="1"></el-tab-pane>
       </el-tabs>
-      <div class="flex-1 flex flex-col gap-4">
+      <div class="flex-1 flex flex-col gap-4 overflow-hidden">
         <template v-if="state.tabIndex == 0">
           <div class="h-[40%]">
             <div class="grid grid-cols-4 h-full gap-4">
@@ -268,11 +268,14 @@
               </div>
             </div>
           </div>
-          <div class="flex-1 grid grid-cols-2 gap-4">
-            <div class="flex-1 p-4">
+          <div class="flex-1 grid grid-cols-2 grid-rows-2 overflow-hidden">
+            <div class="flex-1 p-4 flex flex-col overflow-hidden">
               <div class="text-[20px] text-[#2E3238] flex items-center">TOP5高频接口</div>
+              <div class="flex-1 overflow-hidden">
+                <bar1Com :data="state.analysis.chart1" />
+              </div>
             </div>
-            <div class="flex-1 p-4">
+            <div class="flex-1 p-4 flex flex-col overflow-hidden">
               <div class="text-[20px] text-[#2E3238] flex items-center">
                 慢查询占比
                 <div style="margin-left: auto">
@@ -285,34 +288,43 @@
                   />
                 </div>
               </div>
+              <div class="flex-1 overflow-hidden">
+                <line2Com :data="state.analysis.chart2.data" />
+              </div>
             </div>
-            <div class="flex-1 p-4">
+            <div class="flex-1 p-4 flex flex-col overflow-hidden">
               <div class="text-[20px] text-[#2E3238] flex items-center">
                 接口交换数据量
                 <div style="margin-left: auto">
                   <el-date-picker
                     v-model="state.analysis.chart3.time"
-                    type="date"
-                    value-format="YYYY-MM"
+                    type="daterange"
+                    value-format="YYYY-MM-DD"
                     @change="initChart3"
-                    style="width: 120px"
+                    style="width: 220px"
                   />
                 </div>
               </div>
+              <div class="flex-1 overflow-hidden">
+                <bar3Com :data="state.analysis.chart3.data" />
+              </div>
             </div>
-            <div class="flex-1 p-4">
+            <div class="flex-1 p-4 flex flex-col overflow-hidden">
               <div class="text-[20px] text-[#2E3238] flex items-center">
                 异常告警数据量
                 <div style="margin-left: auto">
                   <el-date-picker
                     v-model="state.analysis.chart4.time"
-                    type="date"
+                    type="month"
                     value-format="YYYY-MM"
                     @change="initChart4"
                     style="width: 120px"
                   />
                 </div>
               </div>
+              <div class="flex-1 overflow-hidden">
+                <line4Com :data="state.analysis.chart4.data" />
+              </div>
             </div>
           </div>
         </template>
@@ -326,6 +338,10 @@ import { onMounted, reactive } from 'vue'
 import pieCom from './chart/pie.vue'
 import dayjs from 'dayjs'
 import lineCom from './chart/line.vue'
+import line2Com from './chart/line2.vue'
+import line4Com from './chart/line4.vue'
+import bar1Com from './chart/bar1.vue'
+import bar3Com from './chart/bar3.vue'
 import { numberJoinChar } from '@/utils/czr-util'
 
 const state: any = reactive({
@@ -372,14 +388,25 @@ const state: any = reactive({
     },
     chart1: [],
     chart2: { time: dayjs(new Date()).format('YYYY-MM-DD'), data: [] },
-    chart3: { time: dayjs(new Date()).format('YYYY-MM'), data: [] },
+    chart3: {
+      time: [
+        dayjs(new Date().getTime() - 60 * 60 * 24 * 7 * 1000).format('YYYY-MM-DD'),
+        dayjs(new Date()).format('YYYY-MM-DD')
+      ],
+      data: []
+    },
     chart4: { time: dayjs(new Date()).format('YYYY-MM'), data: [] }
   }
 })
 const onQuery = () => {
+  console.log(state.analysis.chart3.time)
   if (state.tabIndex == 0) {
     initBroadband()
   } else if (state.tabIndex == 1) {
+    initChart1()
+    initChart2()
+    initChart3()
+    initChart4()
   }
 }
 const initBroadband = () => {
@@ -397,9 +424,47 @@ const initBroadband = () => {
   }
   state.real.broadband.data = arr
 }
-const initChart2 = () => {}
-const initChart3 = () => {}
-const initChart4 = () => {}
+const initChart1 = () => {
+  const arr = []
+  for (let i = 1; i <= 5; i++) {
+    arr.push({
+      name: `接口${i}`,
+      value: i * 10000
+    })
+  }
+  state.analysis.chart1 = arr
+}
+const initChart2 = () => {
+  state.analysis.chart2.data = [
+    { name: '00:00', value: 123 },
+    { name: '04:00', value: 215 },
+    { name: '08:00', value: 616 },
+    { name: '12:00', value: 812 },
+    { name: '16:00', value: 214 },
+    { name: '18:00', value: 295 },
+    { name: '22:00', value: 319 }
+  ]
+}
+const initChart3 = () => {
+  const arr = []
+  for (let i = 1; i <= 10; i++) {
+    arr.push({
+      name: `接口${i}`,
+      value: Math.floor(Math.random() * 100000)
+    })
+  }
+  state.analysis.chart3.data = arr
+}
+const initChart4 = () => {
+  const arr = []
+  for (let d = 1; d <= 31; d++) {
+    arr.push({
+      name: d,
+      value: Math.floor(Math.random() * 100)
+    })
+  }
+  state.analysis.chart4.data = arr
+}
 onMounted(() => {
   onQuery()
 })