From 4587d9bddab1277fac0168a36abc23559b8c8031 Mon Sep 17 00:00:00 2001
From: JINGYJ <1458671527@qq.com>
Date: Thu, 14 Sep 2023 15:06:17 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A1=B5=E9=9D=A2=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                                    |   2 +-
 mock/asyncRoutes.ts                           |  21 +-
 package.json                                  |   2 -
 src/layout/components/navbar.vue              |   4 +-
 src/main.ts                                   |  16 +-
 src/router/modules/remaining.ts               |  16 +-
 src/views/enterprise/index.vue                |  79 +++++
 src/views/project/details/components/Bar.vue  | 158 +++++++++
 .../project/details/components/DialogForm.vue | 294 +++++++++++++++++
 .../project/details/components/ModelCard.vue  | 305 ++++++++++++++++++
 src/views/project/details/index.vue           | 120 ++++++-
 src/views/project/list/components/Card.vue    |   2 +-
 .../project/list/components/DialogForm.vue    |  49 ++-
 src/views/project/list/index.vue              |  30 +-
 14 files changed, 1057 insertions(+), 41 deletions(-)
 create mode 100644 src/views/enterprise/index.vue
 create mode 100644 src/views/project/details/components/Bar.vue
 create mode 100644 src/views/project/details/components/DialogForm.vue
 create mode 100644 src/views/project/details/components/ModelCard.vue

diff --git a/index.html b/index.html
index f7f6135..50cf8cf 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
       name="viewport"
       content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
     />
-    <title>pure-admin-thin</title>
+    <title>LNYD</title>
     <link rel="icon" href="/favicon.ico" />
     <script>
       window.process = {};
diff --git a/mock/asyncRoutes.ts b/mock/asyncRoutes.ts
index d809649..43a554a 100644
--- a/mock/asyncRoutes.ts
+++ b/mock/asyncRoutes.ts
@@ -119,6 +119,25 @@ const warningRouter = {
   ]
 };
 
+const enterpriseRouter = {
+  path: "/enterprise",
+  meta: {
+    title: "企业管理",
+    icon: "lollipop",
+    rank: 15
+  },
+  children: [
+    {
+      path: "/enterprise/index",
+      name: "EnterpriseList",
+      meta: {
+        title: "企业列表",
+        roles: ["admin", "common"]
+      }
+    }
+  ]
+};
+
 export default [
   {
     url: "/getAsyncRoutes",
@@ -126,7 +145,7 @@ export default [
     response: () => {
       return {
         success: true,
-        data: [projectRouter, modelRouter, warningRouter]
+        data: [projectRouter, modelRouter, warningRouter, enterpriseRouter]
       };
     }
   }
diff --git a/package.json b/package.json
index 05e1413..66ff356 100644
--- a/package.json
+++ b/package.json
@@ -129,7 +129,5 @@
       "stable": "*"
     }
   },
-  "repository": "git@github.com:pure-admin/pure-admin-thin.git",
-  "author": "xiaoxian521",
   "license": "MIT"
 }
diff --git a/src/layout/components/navbar.vue b/src/layout/components/navbar.vue
index 056e9ce..1f774cf 100644
--- a/src/layout/components/navbar.vue
+++ b/src/layout/components/navbar.vue
@@ -62,13 +62,13 @@ const {
           </el-dropdown-menu>
         </template>
       </el-dropdown>
-      <!-- <span
+      <span
         class="set-icon navbar-bg-hover"
         title="打开项目配置"
         @click="onPanel"
       >
         <IconifyIconOffline :icon="Setting" />
-      </span> -->
+      </span>
     </div>
   </div>
 </template>
diff --git a/src/main.ts b/src/main.ts
index ed639ce..e3a38da 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,11 +5,11 @@ import ElementPlus from "element-plus";
 import { getServerConfig } from "./config";
 import { createApp, Directive } from "vue";
 import { MotionPlugin } from "@vueuse/motion";
-// import { useEcharts } from "@/plugins/echarts";
+import { useEcharts } from "@/plugins/echarts";
 import { injectResponsiveStorage } from "@/utils/responsive";
 
-// import Table from "@pureadmin/table";
-// import PureDescriptions from "@pureadmin/descriptions";
+import Table from "@pureadmin/table";
+import PureDescriptions from "@pureadmin/descriptions";
 
 // 引入重置样式
 import "./style/reset.scss";
@@ -49,9 +49,11 @@ getServerConfig(app).then(async config => {
   app.use(router);
   await router.isReady();
   injectResponsiveStorage(app, config);
-  app.use(MotionPlugin).use(ElementPlus);
-  // .use(useEcharts);
-  // .use(Table);
-  // .use(PureDescriptions);
+  app
+    .use(MotionPlugin)
+    .use(ElementPlus)
+    .use(useEcharts)
+    .use(Table)
+    .use(PureDescriptions);
   app.mount("#app");
 });
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index 665f6ae..689a42b 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -30,12 +30,22 @@ export default [
   {
     path: "/screen",
     name: "Screen",
-    component: () => import("@/views/error/404.vue"),
     meta: {
       title: "数据大屏",
       icon: "lollipop",
       // showLink: true,
-      rank: 102
-    }
+      rank: 103
+    },
+    children: [
+      {
+        path: "/screen",
+        name: "Sereen",
+        component: () => import("@/views/error/404.vue"),
+        meta: {
+          title: "数据大屏",
+          roles: ["admin", "common"]
+        }
+      }
+    ]
   }
 ] as Array<RouteConfigsTable>;
diff --git a/src/views/enterprise/index.vue b/src/views/enterprise/index.vue
new file mode 100644
index 0000000..2a2b1fc
--- /dev/null
+++ b/src/views/enterprise/index.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import AddFill from "@iconify-icons/ri/add-circle-line";
+import { useWindowSize } from "@vueuse/core";
+
+defineOptions({
+  name: "EnterpriseList"
+});
+const count = ref(3);
+const { height } = useWindowSize();
+const input = ref("");
+const loading = ref(true);
+setTimeout(() => {
+  loading.value = !loading.value;
+}, 800);
+
+const add = () => {
+  count.value++;
+};
+</script>
+
+<template>
+  <div class="main">
+    <div class="w-full flex justify-between mb-4">
+      <el-button :icon="useRenderIcon(AddFill)" @click="add">
+        新建企业
+      </el-button>
+    </div>
+    <div class="w-[37%] h-full float-left">
+      <el-card
+        class="box-card"
+        :style="{ height: `calc(${height}px - 10vh - 50px)` }"
+      >
+        <template #header>
+          <div class="card-header flex justify-between">
+            <span class="w-[20%]">企业列表</span>
+            <el-input
+              v-model="input"
+              placeholder="Please input"
+              class="w-[70%]"
+              clearable
+            />
+          </div>
+        </template>
+        <el-scrollbar max-height="400px">
+          <p v-for="item in count" :key="item" class="scrollbar-demo-item">
+            {{ "电子有限公司" }}
+          </p>
+        </el-scrollbar>
+      </el-card>
+    </div>
+    <div class="float-right w-[62%]">
+      <el-card
+        class="box-card"
+        :style="{ height: `calc(${height}px - 10vh - 50px)` }"
+      >
+        <template #header>
+          <div class="card-header flex justify-between">
+            <span>企业详情</span>
+            <el-button :icon="useRenderIcon(AddFill)" @click="add">
+              编辑
+            </el-button>
+          </div>
+        </template>
+        <div class="flex flex-col">
+          <el-skeleton animated :loading="loading">
+            <span>企业全称：{{ "电子有限公司" }}</span>
+            <span>ID：{{ "电子有限公司" }}</span>
+          </el-skeleton>
+          <el-skeleton :rows="5" animated :loading="loading">
+            <span>企业全称：{{ "电子有限公司" }}</span>
+            <span>ID：{{ "电子有限公司" }}</span>
+          </el-skeleton>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
diff --git a/src/views/project/details/components/Bar.vue b/src/views/project/details/components/Bar.vue
new file mode 100644
index 0000000..4fbe841
--- /dev/null
+++ b/src/views/project/details/components/Bar.vue
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { ref, computed, watch, type Ref } from "vue";
+import { useAppStoreHook } from "@/store/modules/app";
+import {
+  delay,
+  useDark,
+  useECharts,
+  type EchartOptions
+} from "@pureadmin/utils";
+import * as echarts from "echarts/core";
+
+const { isDark } = useDark();
+
+const theme: EchartOptions["theme"] = computed(() => {
+  return isDark.value ? "dark" : "light";
+});
+
+const barChartRef = ref<HTMLDivElement | null>(null);
+const { setOptions, resize } = useECharts(barChartRef as Ref<HTMLDivElement>, {
+  theme
+});
+
+setOptions(
+  {
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow"
+      }
+    },
+    grid: {
+      bottom: "20px",
+      right: "30px",
+      left: "40px"
+    },
+    legend: {
+      //@ts-expect-error
+      right: true,
+      data: ["watchers", "fork", "star"]
+    },
+    xAxis: [
+      {
+        type: "category",
+        axisTick: {
+          alignWithLabel: true
+        },
+        axisLabel: {
+          interval: 0
+          // width: "70",
+          // overflow: "truncate"
+        },
+        data: ["2021", "2022", "2023"],
+        triggerEvent: true
+      }
+    ],
+    yAxis: [
+      {
+        type: "value",
+        triggerEvent: true
+      },
+      {
+        type: "value",
+
+        splitLine: {
+          //分割线配置
+          show: false
+        },
+        triggerEvent: true
+      }
+    ],
+    series: [
+      // {
+      //   name: "watchers",
+      //   type: "bar",
+      //   barWidth: "10%",
+      //   itemStyle: {
+      //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+      //       {
+      //         offset: 0,
+      //         color: "#e6a23c"
+      //       },
+      //       {
+      //         offset: 1,
+      //         color: "#eebe77"
+      //       }
+      //     ])
+      //   },
+      //   data: [200, 320, 800]
+      // },
+      // {
+      //   name: "fork",
+      //   type: "bar",
+      //   barWidth: "15%",
+      //   itemStyle: {
+      //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+      //       {
+      //         offset: 0,
+      //         color: "#f56c6c"
+      //       },
+      //       {
+      //         offset: 1,
+      //         color: "#f89898"
+      //       }
+      //     ])
+      //   },
+      //   data: [1600, 2460, 4500]
+      // },
+      {
+        name: "star",
+        type: "bar",
+        barWidth: "15%",
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: "#409EFF"
+            },
+            {
+              offset: 1,
+              color: "#53a7ff"
+            }
+          ])
+        },
+        data: [1450, 3620, 7500]
+      },
+      {
+        //折线(右边数据)
+        name: "总量",
+        type: "line",
+        yAxisIndex: 1,
+        data: [160, 246, 450],
+        itemStyle: {
+          //折线颜色
+          color: "#2A47F8"
+        }
+      }
+    ],
+    addTooltip: true
+  },
+  {
+    name: "click",
+    callback: params => {
+      console.log("click", params);
+    }
+  }
+);
+
+watch(
+  () => useAppStoreHook().getSidebarStatus,
+  () => {
+    delay(600).then(() => resize());
+  }
+);
+</script>
+
+<template>
+  <div ref="barChartRef" style="width: 100%; height: 35vh" />
+</template>
diff --git a/src/views/project/details/components/DialogForm.vue b/src/views/project/details/components/DialogForm.vue
new file mode 100644
index 0000000..4623ed2
--- /dev/null
+++ b/src/views/project/details/components/DialogForm.vue
@@ -0,0 +1,294 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { message } from "@/utils/message";
+import { FormInstance } from "element-plus";
+import ReCol from "@/components/ReCol";
+
+// const SELECT_OPTIONS = [
+//   { label: "网关", value: 1 },
+//   { label: "人工智能", value: 2 },
+//   { label: "CVM", value: 3 },
+//   { label: "防火墙", value: 4 },
+//   { label: "未知", value: 5 }
+// ];
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  data: {
+    type: Object,
+    default: () => {
+      return {};
+    }
+  }
+});
+
+const ruleFormRef = ref<FormInstance>();
+
+const formVisible = ref(false);
+const formData = ref(props.data);
+const title = ref("添加检查项模型");
+const activeStep = ref(0);
+// const textareaValue = ref("");
+
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036"
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036"
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036"
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036"
+  },
+  {
+    date: "2016-05-08",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036"
+  },
+  {
+    date: "2016-05-06",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036"
+  },
+  {
+    date: "2016-05-07",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036"
+  }
+];
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate(valid => {
+    if (valid) {
+      message("提交成功", { type: "success" });
+      formVisible.value = false;
+      resetForm(formEl);
+    }
+  });
+};
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+
+const closeDialog = () => {
+  formVisible.value = false;
+  activeStep.value = 0;
+  resetForm(ruleFormRef.value);
+};
+
+const nextStep = () => {
+  if (activeStep.value++ > 2) activeStep.value = 0;
+};
+
+const emit = defineEmits(["update:visible"]);
+watch(
+  () => formVisible.value,
+  val => {
+    emit("update:visible", val);
+  }
+);
+
+watch(
+  () => props.visible,
+  val => {
+    formVisible.value = val;
+  }
+);
+
+watch(
+  () => props.data,
+  val => {
+    formData.value = val;
+  }
+);
+
+const rules = {
+  name: [{ required: true, message: "请输入产品名称", trigger: "blur" }]
+};
+</script>
+
+<template>
+  <el-dialog
+    v-model="formVisible"
+    :title="title"
+    :width="1080"
+    draggable
+    :before-close="closeDialog"
+  >
+    <el-row :gutter="30" class="mb-12">
+      <re-col :value="30" :xs="24" :sm="24">
+        <el-steps
+          :space="200"
+          :active="activeStep"
+          finish-status="success"
+          simple
+        >
+          <el-step title="选择模型" />
+          <el-step title="选择算力" />
+          <el-step title="支付" />
+        </el-steps>
+      </re-col>
+    </el-row>
+    <!-- 表单内容 -->
+    <el-form
+      ref="ruleFormRef"
+      :model="formData"
+      :rules="rules"
+      label-width="100px"
+      v-if="activeStep == 0"
+    >
+      <el-row :gutter="30">
+        <re-col :value="12" :xs="24" :sm="24">
+          <el-form-item label="检测方向" prop="name">
+            <el-input
+              v-model="formData.name"
+              :style="{ width: '480px' }"
+              placeholder="请选择检测方向"
+            />
+          </el-form-item>
+        </re-col>
+
+        <re-col :value="12" :xs="24" :sm="24">
+          <el-form-item label="检测类型" prop="leader">
+            <el-input
+              v-model="formData.leader"
+              :style="{ width: '480px' }"
+              placeholder="请选择检测类型"
+            />
+          </el-form-item>
+        </re-col>
+
+        <re-col>
+          <el-table :data="tableData" style="width: 100%" height="300" border>
+            <el-table-column type="selection" width="55" />
+            <el-table-column prop="date" label="Date" width="150" />
+            <el-table-column prop="name" label="Name" />
+            <el-table-column prop="state" label="State" />
+            <el-table-column prop="city" label="City" />
+            <el-table-column prop="address" label="Address" />
+            <el-table-column prop="zip" label="Zip" />
+          </el-table>
+        </re-col>
+      </el-row>
+    </el-form>
+    <el-form
+      ref="ruleFormRef"
+      :model="formData"
+      :rules="rules"
+      label-width="160px"
+      v-if="activeStep == 1"
+    >
+      <el-row :gutter="30">
+        <re-col :value="12" :xs="24" :sm="24">
+          <el-form-item label="选择算力资源" prop="name">
+            <el-input
+              v-model="formData.name"
+              :style="{ width: '480px' }"
+              placeholder="请选择检测方向"
+            />
+          </el-form-item>
+        </re-col>
+
+        <re-col :value="12" :xs="24" :sm="24">
+          <el-form-item label="选择购买时间" prop="leader">
+            <el-input
+              v-model="formData.leader"
+              :style="{ width: '480px' }"
+              placeholder="请选择检测类型"
+            />
+          </el-form-item>
+        </re-col>
+        <re-col :value="12" :xs="24" :sm="24">
+          <el-form-item label="选择GPU数量（核）" prop="name">
+            <el-input
+              v-model="formData.name"
+              :style="{ width: '480px' }"
+              placeholder="请选择检测方向"
+            />
+          </el-form-item>
+        </re-col>
+
+        <re-col :value="12" :xs="24" :sm="24">
+          <el-form-item label="选择GPU数量（卡）" prop="leader">
+            <el-input
+              v-model="formData.leader"
+              :style="{ width: '480px' }"
+              placeholder="请选择检测类型"
+            />
+          </el-form-item>
+        </re-col>
+        <re-col :value="12" :xs="24" :sm="24">
+          <el-form-item label="选择内存数量（GB）" prop="name">
+            <el-input
+              v-model="formData.name"
+              :style="{ width: '480px' }"
+              placeholder="请选择检测方向"
+            />
+          </el-form-item>
+        </re-col>
+
+        <re-col :value="12" :xs="24" :sm="24">
+          <el-form-item label="选择节点数量" prop="leader">
+            <el-input
+              v-model="formData.leader"
+              :style="{ width: '480px' }"
+              placeholder="请选择检测类型"
+            />
+          </el-form-item>
+        </re-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="closeDialog">取消</el-button>
+        <el-button @click="nextStep" v-if="activeStep < 2">下一步</el-button>
+        <el-button type="primary" @click="submitForm(ruleFormRef)">
+          确定
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<style scoped lang="scss">
+.dialog-footer {
+  text-align: center;
+}
+</style>
diff --git a/src/views/project/details/components/ModelCard.vue b/src/views/project/details/components/ModelCard.vue
new file mode 100644
index 0000000..65d438b
--- /dev/null
+++ b/src/views/project/details/components/ModelCard.vue
@@ -0,0 +1,305 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import AddFill from "@iconify-icons/ri/add-circle-line";
+
+defineOptions({
+  name: "ModelCard"
+});
+
+// interface CardProductType {
+//   type: number;
+//   isSetup: boolean;
+//   description: string;
+//   name: string;
+// }
+const modelStep = ref(1);
+const props = defineProps({
+  modelInfo: {
+    type: Object
+  }
+});
+console.log(props);
+</script>
+
+<template>
+  <div>
+    <div class="list-item">
+      <div class="list-item-header mb-[18px]">
+        <span class="font-bold">{{ "苏胜天OCR文字识别模型" }}</span>
+        <span>{{ "算力设备：" }}</span>
+        <span>
+          <el-button
+            type="primary"
+            :icon="useRenderIcon(AddFill)"
+            class="button"
+            text
+            >历史推理</el-button
+          >
+          <el-button
+            type="primary"
+            :icon="useRenderIcon(AddFill)"
+            class="button"
+            text
+            >模型设置</el-button
+          >
+        </span>
+      </div>
+      <div class="list-item-content">
+        <div class="list-item-content-left">
+          <div class="list-item-content-left-progress">
+            <el-progress
+              type="circle"
+              stroke-linecap="butt"
+              :stroke-width="10"
+              :width="80"
+              :percentage="0"
+            />
+            <p>{{ "GPU占用（核）" }}</p>
+          </div>
+          <div class="list-item-content-left-progress">
+            <el-progress
+              type="circle"
+              stroke-linecap="butt"
+              :stroke-width="10"
+              :width="80"
+              :percentage="30"
+            />
+            <p>{{ "GPU占用（核）" }}</p>
+          </div>
+          <div class="list-item-content-left-progress">
+            <el-progress
+              type="circle"
+              stroke-linecap="butt"
+              :stroke-width="10"
+              :width="80"
+              :percentage="60"
+            />
+            <p>{{ "GPU占用（核）" }}</p>
+          </div>
+          <div class="list-item-content-left-progress">
+            <el-progress
+              type="circle"
+              stroke-linecap="butt"
+              :stroke-width="10"
+              :width="80"
+              :percentage="80"
+            />
+            <p>{{ "GPU占用（核）" }}</p>
+          </div>
+        </div>
+        <div class="list-item-content-right">
+          <div class="list-item-content-right-first" v-if="modelStep == 1">
+            <el-button
+              size="large"
+              type="success"
+              :icon="useRenderIcon(AddFill)"
+              @click="modelStep = 2"
+            >
+              添加推理图片或视频
+            </el-button>
+          </div>
+          <div class="list-item-content-right-second" v-if="modelStep == 2">
+            <div>
+              <span class="mr-10">{{ "待处理文件：99999" }}</span>
+              <el-button
+                size="large"
+                type="success"
+                :icon="useRenderIcon(AddFill)"
+              >
+                继续上传
+              </el-button>
+            </div>
+            <div>
+              <el-button
+                size="large"
+                type="success"
+                :icon="useRenderIcon(AddFill)"
+                @click="modelStep = 3"
+              >
+                开始推理
+              </el-button>
+            </div>
+          </div>
+          <div class="list-item-content-right-third" v-if="modelStep == 3">
+            <div class="list-item-content-right-third-header">
+              <div class="w-60">
+                <span>{{ "snadjkas" }}</span>
+                <el-progress
+                  :text-inside="true"
+                  :stroke-width="40"
+                  :percentage="50"
+                  striped
+                  striped-flow
+                  status="exception"
+                >
+                  <span>推理中···</span>
+                </el-progress>
+              </div>
+              <div>
+                <span>{{ "缺陷数：99999" }}</span>
+              </div>
+              <div>
+                <el-button
+                  size="large"
+                  type="danger"
+                  :icon="useRenderIcon(AddFill)"
+                  @click="modelStep = 2"
+                >
+                  终止推理
+                </el-button>
+              </div>
+            </div>
+            <div class="list-item-content-right-third-image">
+              <el-image
+                style="width: 100px; height: 100px"
+                src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
+                :zoom-rate="1.2"
+                :initial-index="1"
+                :preview-src-list="[
+                  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
+                ]"
+                fit="cover"
+              />
+              <el-image
+                style="width: 100px; height: 100px"
+                src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
+                :zoom-rate="1.2"
+                :initial-index="1"
+                :preview-src-list="[
+                  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
+                ]"
+                fit="cover"
+              />
+              <el-image
+                style="width: 100px; height: 100px"
+                src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
+                :zoom-rate="1.2"
+                :initial-index="1"
+                :preview-src-list="[
+                  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
+                ]"
+                fit="cover"
+              />
+              <el-image
+                style="width: 100px; height: 100px"
+                src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
+                :zoom-rate="1.2"
+                :initial-index="1"
+                :preview-src-list="[
+                  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
+                ]"
+                fit="cover"
+              />
+              <el-image
+                style="width: 100px; height: 100px"
+                src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
+                :zoom-rate="1.2"
+                :initial-index="1"
+                :preview-src-list="[
+                  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
+                ]"
+                fit="cover"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.list-item {
+  display: flex;
+  flex-direction: column;
+  height: 300px;
+  padding: 10px;
+  margin-bottom: 10px;
+  background: #fafafa;
+}
+// .list-item + .list-item {
+//   margin-top: 10px;
+// }
+.list-item .list-item-header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.list-item .list-item-content {
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+}
+
+.list-item .list-item-content .list-item-content-left {
+  display: flex;
+  flex-wrap: wrap;
+  width: 500px;
+  margin-right: 50px;
+}
+
+.list-item
+  .list-item-content
+  .list-item-content-left
+  .list-item-content-left-progress {
+  flex: 50%;
+}
+
+.list-item .list-item-content .list-item-content-right {
+  display: flex;
+  flex: 1;
+}
+
+.list-item
+  .list-item-content
+  .list-item-content-right
+  .list-item-content-right-first {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+}
+
+.list-item
+  .list-item-content
+  .list-item-content-right
+  .list-item-content-right-second {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.list-item
+  .list-item-content
+  .list-item-content-right
+  .list-item-content-right-third {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+.list-item
+  .list-item-content
+  .list-item-content-right
+  .list-item-content-right-third
+  .list-item-content-right-third-header {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-around;
+  height: 30%;
+}
+
+.list-item
+  .list-item-content
+  .list-item-content-right
+  .list-item-content-right-third
+  .list-item-content-right-third-image {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-around;
+}
+</style>
diff --git a/src/views/project/details/index.vue b/src/views/project/details/index.vue
index 7cab2db..b04dd4a 100644
--- a/src/views/project/details/index.vue
+++ b/src/views/project/details/index.vue
@@ -1,11 +1,127 @@
 <script setup lang="ts">
+import dialogForm from "./components/DialogForm.vue";
+import { isEmpty } from "@pureadmin/utils";
+import { ref, onMounted, computed } from "vue";
+import { useWindowSize } from "@vueuse/core";
+import { useRoute } from "vue-router";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import ModelCard from "./components/ModelCard.vue";
+import Bar from "./components/Bar.vue";
+import AddFill from "@iconify-icons/ri/add-circle-line";
 defineOptions({
   name: "ProjectDetails"
 });
+const route = useRoute();
+const getParameter = isEmpty(route.params) ? route.query : route.params;
+console.log(getParameter);
+const INITIAL_DATA = {
+  name: "",
+  status: "",
+  description: "",
+  type: "",
+  mark: "",
+  leader: "",
+  phone: ""
+};
+const formDialogVisible = ref(false);
+const formData = ref({ ...INITIAL_DATA });
+const { height } = useWindowSize();
+const count = ref(5);
+const echartsLoading = ref(true);
+const loading = ref(false);
+const noMore = computed(() => count.value >= 10);
+const disabled = computed(() => loading.value || noMore.value);
+const load = () => {
+  loading.value = true;
+  setTimeout(() => {
+    count.value += 2;
+    loading.value = false;
+  }, 2000);
+};
+setTimeout(() => {
+  echartsLoading.value = !echartsLoading.value;
+}, 800);
+
+onMounted(() => {
+  // formDialogVisible.value = true;
+});
 </script>
 
 <template>
-  <div class="container">
-    <h1>算法管理</h1>
+  <div class="main">
+    <el-row :gutter="24">
+      <el-col :value="24" :xs="24" :sm="24" class="mb-[18px]">
+        <el-card shadow="always">
+          <template #header>
+            <div>
+              <span class="font-bold">项目信息</span>
+            </div>
+          </template>
+          <div class="flex align-baseline justify-around">
+            <div class="flex flex-col justify-around">
+              <span>项目名称：{{ "文字识别" }}</span>
+              <span>负责人：{{ "识别线主管" }}</span>
+              <span>联系方式：{{ "13811111111" }}</span>
+            </div>
+            <div>
+              <el-progress
+                type="circle"
+                stroke-linecap="butt"
+                :stroke-width="30"
+                :percentage="80"
+              />
+              <p>{{ "GPU占用（核）" }}</p>
+            </div>
+            <el-skeleton animated :loading="echartsLoading">
+              <template #default>
+                <Bar style="width: 240px; height: 240px" />
+              </template>
+            </el-skeleton>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :value="24" :xs="24" :sm="24">
+        <el-card
+          shadow="always"
+          :style="{ height: `calc(${height}px - 30vh - 100px)` }"
+        >
+          <template #header>
+            <div class="flex justify-between">
+              <span class="font-bold">模型列表</span>
+              <el-button
+                type="primary"
+                :icon="useRenderIcon(AddFill)"
+                class="button"
+                @click="formDialogVisible = true"
+                >新建模型</el-button
+              >
+            </div>
+          </template>
+          <el-scrollbar
+            class="infinite-list-wrapper"
+            :height="`calc(${height}px - 35vh - 150px)`"
+          >
+            <div
+              v-infinite-scroll="load"
+              class="list"
+              :infinite-scroll-disabled="disabled"
+            >
+              <template v-for="i in count" :key="i">
+                <ModelCard :modelInfo="INITIAL_DATA" />
+              </template>
+            </div>
+            <p v-if="loading">Loading...</p>
+            <p v-if="noMore">No more</p>
+          </el-scrollbar>
+        </el-card>
+      </el-col>
+    </el-row>
+    <dialogForm v-model:visible="formDialogVisible" :data="formData" />
   </div>
 </template>
+<style scoped lang="scss">
+.infinite-list-wrapper {
+  // height: 720px;
+  text-align: center;
+}
+</style>
diff --git a/src/views/project/list/components/Card.vue b/src/views/project/list/components/Card.vue
index 153dd1f..a895d0e 100644
--- a/src/views/project/list/components/Card.vue
+++ b/src/views/project/list/components/Card.vue
@@ -142,7 +142,7 @@ const cardInfoClass = computed(() => [
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 260px;
+      width: 250px;
       height: 150px;
       font-size: 32px;
       color: #0052d9;
diff --git a/src/views/project/list/components/DialogForm.vue b/src/views/project/list/components/DialogForm.vue
index 83037ec..1f10718 100644
--- a/src/views/project/list/components/DialogForm.vue
+++ b/src/views/project/list/components/DialogForm.vue
@@ -3,13 +3,13 @@ import { ref, watch } from "vue";
 import { message } from "@/utils/message";
 import { FormInstance } from "element-plus";
 
-const SELECT_OPTIONS = [
-  { label: "网关", value: 1 },
-  { label: "人工智能", value: 2 },
-  { label: "CVM", value: 3 },
-  { label: "防火墙", value: 4 },
-  { label: "未知", value: 5 }
-];
+// const SELECT_OPTIONS = [
+//   { label: "网关", value: 1 },
+//   { label: "人工智能", value: 2 },
+//   { label: "CVM", value: 3 },
+//   { label: "防火墙", value: 4 },
+//   { label: "未知", value: 5 }
+// ];
 
 const props = defineProps({
   visible: {
@@ -28,7 +28,7 @@ const ruleFormRef = ref<FormInstance>();
 
 const formVisible = ref(false);
 const formData = ref(props.data);
-const textareaValue = ref("");
+// const textareaValue = ref("");
 
 const submitForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
@@ -81,7 +81,7 @@ const rules = {
 <template>
   <el-dialog
     v-model="formVisible"
-    title="新建产品"
+    title="新建项目"
     :width="680"
     draggable
     :before-close="closeDialog"
@@ -93,27 +93,42 @@ const rules = {
       :rules="rules"
       label-width="100px"
     >
-      <el-form-item label="产品名称" prop="name">
+      <el-form-item label="项目名称" prop="name">
         <el-input
           v-model="formData.name"
           :style="{ width: '480px' }"
-          placeholder="请输入产品名称"
+          placeholder="请输入项目名称"
         />
       </el-form-item>
-      <el-form-item label="产品状态" prop="status">
+      <el-form-item label="项目负责人" prop="leader">
+        <el-input
+          v-model="formData.leader"
+          :style="{ width: '480px' }"
+          placeholder="请输入项目负责人"
+        />
+      </el-form-item>
+      <el-form-item label="联系方式" prop="phone">
+        <el-input
+          v-model="formData.phone"
+          :style="{ width: '480px' }"
+          placeholder="请输入联系方式"
+        />
+      </el-form-item>
+      <!-- <el-form-item label="产品状态" prop="status">
         <el-radio-group v-model="formData.status">
           <el-radio label="0">已停用</el-radio>
           <el-radio label="1">已启用</el-radio>
         </el-radio-group>
-      </el-form-item>
-      <el-form-item label="产品描述" prop="description">
+      </el-form-item> -->
+      <el-form-item label="项目简介" prop="description">
         <el-input
           v-model="formData.description"
+          type="textarea"
           :style="{ width: '480px' }"
-          placeholder="请输入产品描述"
+          placeholder="请输入项目简介"
         />
       </el-form-item>
-      <el-form-item label="产品类型" prop="type">
+      <!-- <el-form-item label="产品类型" prop="type">
         <el-select
           v-model="formData.type"
           clearable
@@ -136,7 +151,7 @@ const rules = {
           :style="{ width: '480px' }"
           placeholder="请输入内容"
         />
-      </el-form-item>
+      </el-form-item> -->
     </el-form>
     <template #footer>
       <el-button @click="closeDialog">取消</el-button>
diff --git a/src/views/project/list/index.vue b/src/views/project/list/index.vue
index 8ae485d..c1905cf 100644
--- a/src/views/project/list/index.vue
+++ b/src/views/project/list/index.vue
@@ -5,6 +5,9 @@ import { message } from "@/utils/message";
 import { ElMessageBox } from "element-plus";
 import { ref, onMounted, nextTick } from "vue";
 import dialogForm from "./components/DialogForm.vue";
+import { useRouter } from "vue-router";
+import { isString } from "@pureadmin/utils";
+import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import Search from "@iconify-icons/ep/search";
 import AddFill from "@iconify-icons/ri/add-circle-line";
@@ -29,7 +32,9 @@ const INITIAL_DATA = {
   status: "",
   description: "",
   type: "",
-  mark: ""
+  mark: "",
+  leader: "",
+  phone: ""
 };
 
 const pagination = ref({ current: 1, pageSize: 12, total: 0 });
@@ -90,9 +95,24 @@ const handleManageProduct = product => {
     formData.value = { ...product, status: product?.isSetup ? "1" : "0" };
   });
 };
-
+const router = useRouter();
 const handleProductDetail = product => {
-  console.log("111");
+  Object.keys(product).forEach(param => {
+    if (!isString(product[param])) {
+      product[param] = product[param].toString();
+    }
+  });
+  // 保存信息到标签页
+  useMultiTagsStoreHook().handleTags("push", {
+    path: `/project/details`,
+    name: "ProjectDetails",
+    query: product,
+    meta: {
+      title: `项目详情`,
+      showLink: false
+    }
+  });
+  router.push({ name: "ProjectDetails", query: product });
   // formDialogVisible.value = true;
   // nextTick(() => {
   //   formData.value = { ...product, status: product?.isSetup ? "1" : "0" };
@@ -107,12 +127,12 @@ const handleProductDetail = product => {
         :icon="useRenderIcon(AddFill)"
         @click="formDialogVisible = true"
       >
-        新建产品
+        新建项目
       </el-button>
       <el-input
         style="width: 300px"
         v-model="searchValue"
-        placeholder="请输入产品名称"
+        placeholder="请输入项目名称"
         clearable
         v-if="false"
       >