仪表盘

src/router/index.ts

@@ -84,8 +84,13 @@ export const constantRoutes: RouteRecordRaw[] = [
         component: () => import('@/views/modleServiceProvide/index.vue'),
         name:'ModleServiceProvide',
         meta: {title: '模型服务商管理', icon: 'dashboard', affix: true}
+      },
+      {
+        path:'/dashboard',
+        component: () => import('@/views/dashboard/index.vue'),
+        name:'Dashboard',
+        meta: {title: '仪表盘', icon: 'dashboard', affix: true}
       }
-
     ]
   },
   {

src/views/dashboard/index.vue

@@ -0,0 +1,266 @@
+<script setup lang="ts">
+import { Bottom } from '@element-plus/icons-vue';
+import { onMounted } from 'vue';
+import * as echarts from 'echarts';
+
+const dateRange = ref([])
+const hotModel = ref([])
+const newModel = ref([])
+const trendModel = ref(null)
+
+onMounted(() => {
+  const trend = echarts.init(trendModel.value);
+  trend.setOption({
+    tooltip: {
+      trigger: 'axis'
+    },
+    legend: {
+      data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {}
+      }
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+      type: 'value'
+    },
+    series: [
+      {
+        name: 'Email',
+        type: 'line',
+        stack: 'Total',
+        data: [120, 132, 101, 134, 90, 230, 210]
+      },
+      {
+        name: 'Union Ads',
+        type: 'line',
+        stack: 'Total',
+        data: [220, 182, 191, 234, 290, 330, 310]
+      },
+      {
+        name: 'Video Ads',
+        type: 'line',
+        stack: 'Total',
+        data: [150, 232, 201, 154, 190, 330, 410]
+      },
+      {
+        name: 'Direct',
+        type: 'line',
+        stack: 'Total',
+        data: [320, 332, 301, 334, 390, 330, 320]
+      },
+      {
+        name: 'Search Engine',
+        type: 'line',
+        stack: 'Total',
+        data: [820, 932, 901, 934, 1290, 1330, 1320]
+      }
+    ]
+  })
+})
+</script>
+
+<template>
+  <div class="wrapper">
+    <h2>仪表盘</h2>
+    <div class="container">
+      <div class="model-data">
+        <div class="content">
+          <div class="top">模型调用总量</div>
+          <div class="mid">1,286,432</div>
+          <div class="btm">
+            <div>今日：12,456</div>
+            <el-icon class="custom-icon" color="#52c41a"><Top /></el-icon>
+            <div class="per">5.12%</div>
+          </div>
+        </div>
+        <div class="content">
+          <div class="top">成功率</div>
+          <div class="mid">99.82%</div>
+          <div class="btm">
+            <div>今日：99.95%</div>
+            <el-icon class="custom-icon" color="#52c41a"><Top /></el-icon>
+            <div class="per">0.13%</div>
+          </div>
+        </div>
+        <div class="content">
+          <div class="top">平均响应时间</div>
+          <div class="mid">1.24s</div>
+          <div class="btm">
+            <div>今日：1.18s</div>
+            <el-icon class="custom-icon" color="#52c41a"><Bottom /></el-icon>
+            <div class="per">0.06%</div>
+          </div>
+        </div>
+        <div class="content">
+          <div class="top">模型配置总数</div>
+          <div class="mid">42</div>
+          <div class="btm">
+            <div>本周新增：3</div>
+            <el-icon class="custom-icon" color="#52c41a"><Top /></el-icon>
+            <div class="per">7.7%</div>
+          </div>
+        </div>
+      </div>
+      <div class="echart-img">
+        <div class="left">
+          <div class="top">
+            <div>模型调用趋势</div>
+            <div>
+              <el-date-picker
+                v-model="dateRange"
+                type="daterange"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                :default-time="defaultTime"
+              />
+            </div>
+          </div>
+          <div class="bottom">
+            <div ref="trendModel" style="width: 100%; height: 400px;"></div>
+          </div>
+
+        </div>
+        <div class="right">
+          <div class="top">
+            模型类型分布
+          </div>
+          <div class="bottom">
+
+          </div>
+        </div>
+      </div>
+      <el-row>
+        <el-col :span="3">
+          <h4>热门模型排名</h4>
+        </el-col>
+        <el-col :span="3" :offset="18">
+          <el-button>查看全部</el-button>
+        </el-col>
+      </el-row>
+      <el-table
+        :data="hotModel"
+        empty-text="暂无数据"
+        class="table"
+      >
+        <el-table-column label="排名">
+          <template #default="scope">
+            {{scope.$index+1}}
+          </template>
+        </el-table-column>
+        <el-table-column label="模型名称"/>
+        <el-table-column label="服务商"/>
+        <el-table-column label="调用次数"/>
+        <el-table-column label="平均响应时间"/>
+        <el-table-column label="成功率"/>
+      </el-table>
+      <el-row>
+        <el-col :span="3">
+          <h4>最近新增模型配置</h4>
+        </el-col>
+        <el-col :span="3" :offset="18">
+          <el-button>查看全部</el-button>
+        </el-col>
+      </el-row>
+      <el-table
+        :data="newModel"
+        class="table"
+        empty-text="暂无数据"
+      >
+        <el-table-column label="模型名称"/>
+        <el-table-column label="服务商"/>
+        <el-table-column label="类型"/>
+        <el-table-column label="创建人"/>
+        <el-table-column label="创建时间"/>
+      </el-table>
+    </div>
+
+  </div>
+</template>
+
+<style scoped lang="scss">
+.table{
+  width: 100%;
+  min-height: 300px;
+}
+.container{
+  width: 100%;
+  margin-left: 20px;
+}
+
+.model-data{
+  display: flex;
+  justify-content: space-between;
+}
+.content{
+  display: flex;
+  flex-direction: column;
+  .top{
+    color:#999999;
+    font-size: 13px;
+  }
+  .mid{
+    color: #222222;
+    font-size: 22px;
+    font-weight: 600;
+  }
+  .btm{
+    color:#999999;
+    display: flex;
+    div{
+      font-size: 8px;
+    }
+    .custom-icon{
+      font-weight: 600;
+      height: 100%;
+      svg {
+        stroke-width: 2px !important;
+        /* 或 */
+        font-weight: bold !important;
+      }
+    }
+    .per{
+      color: #52c41a;
+      text-align: center;
+    }
+  }
+}
+.echart-img{
+  padding: 20px 0;
+  display: flex;
+  justify-content: space-between;
+  .left,
+  .right{
+    width: 49%;
+    display: flex;
+    flex-direction: column;
+    .top{
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+    }
+    .bottom{
+      min-height: 400px;
+      width: 100%;
+    }
+  }
+
+}
+.wrapper{
+  margin:10px auto;
+  width:90%;
+}
+</style>

src/views/market/index.vue

@@ -55,7 +55,7 @@
       <el-col :span="1" :offset="4" style="padding-left: 30px">
         <el-button type="primary">搜索</el-button>
       </el-col>
-      <el-col :span="1" style="padding-left: 30px">
+      <el-col :span="1" style="padding-left: 20px;margin-left:30px">
         <el-button>重置</el-button>
       </el-col>
     </el-row>
@@ -229,6 +229,7 @@ const edit = ((index,row)=>{
 .model-msg{
   span{
     color:#666666;
+    font-size: 12px;
   }
 }
 .section-type{