统计

src/router/modules/big-model.ts

@@ -16,6 +16,16 @@ const BigModelRouter = [
     },
   },
   {
+    path: '/model/:id/statistic',
+    name: 'd91af45a-7258-4b1e-8e0b-178e8b66d847',
+    component: () => import('@/views/manage/model/statistic/index.vue'),
+    meta: {
+      title: '模型统计',
+      single: true,
+      root: '86e9f5e8-285d-4038-abc2-a39b2ad7fcd1'
+    }
+  },
+  {
     path: '/app',
     name: 'd446bfb3-4605-477f-a0f4-b7a0a1aa78fe',
     component: () => import('@/views/manage/app/index.vue'),

src/style/antdv.scss

@@ -0,0 +1,10 @@
+.ant-switch-small {
+ .ant-switch-inner {
+  .ant-switch-inner-checked {
+   margin-top: 2px;
+  }
+  .ant-switch-inner-unchecked {
+   margin-top: -12px;
+  }
+ }
+}

src/style/index.scss

@@ -2,7 +2,8 @@
 @use './czr';
 @use './font/font';
 @use './manage';
-@use "element-plus";
+@use "./element-plus";
+@use "./antdv";
 
 * {
   outline: none;  // dom元素选中带边框

src/views/manage/model/index.vue

@@ -48,7 +48,12 @@
         :col="2"
       >
         <template #model="{ row, index }">
-          <div class="model">
+          <div class="model __hover" @click="$router.push({
+              name: 'd91af45a-7258-4b1e-8e0b-178e8b66d847',
+              params: {
+                id: index
+              }
+            })">
             <div class="flex">
               <img src="@/assets/images/model-default-logo.png" class="w-[3.25rem] h-[3.25rem] mr-[var(--czr-gap)]"/>
               <div class="flex flex-1 flex-col justify-around overflow-hidden">
@@ -83,7 +88,7 @@
                   checked-children="启用"
                   un-checked-children="停用"
                   size="small"
-                  @click="onSwitch(row)"
+                  @click.stop="onSwitch(row)"
                 />
               </div>
               <el-tooltip content="编辑" effect="light" placement="top">
@@ -266,13 +271,5 @@ const initDictionary = () => {
   border: var(--czr-border);
   display: flex;
   flex-direction: column;
-  :deep(.ant-switch-inner) {
-    .ant-switch-inner-checked {
-      margin-top: 2px;
-    }
-    .ant-switch-inner-unchecked {
-      margin-top: -12px;
-    }
-  }
 }
 </style>

src/views/manage/model/statistic/line-chart.vue

@@ -0,0 +1,132 @@
+<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>{},
+  color: {},
+  unit: {}
+})
+
+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 = {
+    grid: {
+      bottom: 20,
+      right: 20,
+      left: 40,
+      top: 20,
+    },
+    tooltip: {
+      trigger: 'axis',
+      formatter: (p) => {
+        let str = ''
+        str += p[0].name + '<br/>'
+        str += p[0].marker + '\r' + p[0].value + (props.unit || '')
+        return str
+      },
+    },
+    xAxis: {
+      type: 'category',
+      data: props.data.map(v => v.name),
+      axisLine: {show: false},
+      axisTick: {show: false},
+      splitLine: {show: false},
+      axisLabel: {
+        fontSize: 10,
+        interval: 0,
+        color: '#606266'
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: {show: false},
+      axisTick: {show: false},
+      splitNumber: 3,
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+          color: 'rgba(239, 241, 248, 1)'
+        }
+      },
+      axisLabel: {
+        fontSize: 10,
+        color: '#606266',
+        formatter: `{value}`
+      },
+    },
+    series: [
+      {
+        type: 'line',
+        data: props.data,
+        smooth: true,
+        showSymbol: false,
+        itemStyle: {
+          color: '#45B1FF'
+        },
+        // 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
+        //   },
+        // },
+      }
+    ]
+  }
+  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>