feat: 页面细节优化

mock/asyncRoutes.ts

@@ -123,7 +123,7 @@ const enterpriseRouter = {
   path: "/enterprise",
   meta: {
     title: "企业管理",
-    icon: "lollipop",
+    icon: "buildingOne",
     rank: 16
   },
   children: [
@@ -132,7 +132,7 @@ const enterpriseRouter = {
       name: "EnterpriseList",
       meta: {
         title: "企业管理",
-        roles: ["admin", "common"]
+        roles: ["admin"]
       }
     }
   ]
@@ -142,7 +142,7 @@ const myAlgorithmRouter = {
   path: "/myAlgorithm",
   meta: {
     title: "我的算法库",
-    icon: "lollipop",
+    icon: "terminal",
     rank: 17
   },
   children: [
@@ -161,7 +161,7 @@ const algorithmTestingRouter = {
   path: "/algorithmTesting",
   meta: {
     title: "算法实测",
-    icon: "lollipop",
+    icon: "camera",
     rank: 18
   },
   children: [

mock/list.ts

@@ -15,7 +15,8 @@ export default [
               type: 4,
               name: "项目一",
               leader: "张三",
-              phone: 13888888888
+              phone: 13888888888,
+              modelNum: "2"
             }
             // {
             //   index: 2,

mock/login.ts

@@ -6,7 +6,7 @@ export default [
     url: "/login",
     method: "post",
     response: ({ body }) => {
-      if (body.username === "admin") {
+      if (body.username === "admin" && body.password === "admin123") {
         return {
           success: true,
           data: {
@@ -18,7 +18,7 @@ export default [
             expires: "2023/10/30 00:00:00"
           }
         };
-      } else {
+      } else if (body.username === "common" && body.password === "common123") {
         return {
           success: true,
           data: {
@@ -30,7 +30,37 @@ export default [
             expires: "2023/10/30 00:00:00"
           }
         };
+      } else {
+        return {
+          success: false,
+          msg: "用户名密码错误"
+        };
       }
+      // if (body.username === "admin") {
+      //   return {
+      //     success: true,
+      //     data: {
+      //       username: "admin",
+      //       // 一个用户可能有多个角色
+      //       roles: ["admin"],
+      //       accessToken: "eyJhbGciOiJIUzUxMiJ9.admin",
+      //       refreshToken: "eyJhbGciOiJIUzUxMiJ9.adminRefresh",
+      //       expires: "2023/10/30 00:00:00"
+      //     }
+      //   };
+      // } else {
+      //   return {
+      //     success: true,
+      //     data: {
+      //       username: "common",
+      //       // 一个用户可能有多个角色
+      //       roles: ["common"],
+      //       accessToken: "eyJhbGciOiJIUzUxMiJ9.common",
+      //       refreshToken: "eyJhbGciOiJIUzUxMiJ9.commonRefresh",
+      //       expires: "2023/10/30 00:00:00"
+      //     }
+      //   };
+      // }
     }
   }
 ] as MockMethod[];

package.json

@@ -60,6 +60,7 @@
     "@commitlint/config-conventional": "^17.6.6",
     "@iconify-icons/ant-design": "^1.2.7",
     "@iconify-icons/ep": "^1.2.12",
+    "@iconify-icons/icon-park-outline": "^1.2.11",
     "@iconify-icons/ri": "^1.2.9",
     "@iconify/vue": "^4.1.1",
     "@pureadmin/theme": "^3.1.0",

pnpm-lock.yaml

@@ -94,6 +94,9 @@ devDependencies:
   "@iconify-icons/ep":
     specifier: ^1.2.12
     version: 1.2.12
+  "@iconify-icons/icon-park-outline":
+    specifier: ^1.2.11
+    version: 1.2.11
   "@iconify-icons/ri":
     specifier: ^1.2.9
     version: 1.2.9
@@ -1333,6 +1336,15 @@ packages:
       "@iconify/types": 2.0.0
     dev: true
 
+  /@iconify-icons/icon-park-outline@1.2.11:
+    resolution:
+      {
+        integrity: sha512-YfdXTQJNqHsmtwrYCRHQu3TfyB7ybT27rZj668ZLjRxWBW3QEVDnvIGkNWgCiMYVOxlZJHOidke33MvfFmcNhw==
+      }
+    dependencies:
+      "@iconify/types": 2.0.0
+    dev: true
+
   /@iconify-icons/ri@1.2.9:
     resolution:
       {

public/serverConfig.json

@@ -1,5 +1,5 @@
 {
-  "Version": "4.5.0",
+  "Version": "1.0.0",
   "Title": "Admin",
   "FixedHeader": true,
   "HiddenSideBar": false,
@@ -10,7 +10,7 @@
   "DarkMode": false,
   "Grey": false,
   "Weak": false,
-  "HideTabs": false,
+  "HideTabs": true,
   "SidebarStatus": true,
   "EpThemeColor": "rgba(28, 13, 130)",
   "ShowLogo": true,

src/assets/svg/add_icon.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 18.3332C14.6024 18.3332 18.3334 14.6022 18.3334 9.99984C18.3334 5.39746 14.6024 1.6665 10 1.6665C5.39765 1.6665 1.66669 5.39746 1.66669 9.99984C1.66669 14.6022 5.39765 18.3332 10 18.3332Z" stroke="#1C0D82" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M10 6.6665V13.3332" stroke="#1C0D82" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.66669 10H13.3334" stroke="#1C0D82" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/svg/alarm_icon.svg

@@ -0,0 +1,9 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.6665 8.33333C4.6665 6.4924 6.1589 5 7.99984 5C9.84077 5 11.3332 6.4924 11.3332 8.33333V13.6667H4.6665V8.33333Z" stroke="#1C0D82" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M8 1.66675V2.66675" stroke="#1C0D82" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.9641 3.10938L11.3213 3.87543" stroke="#1C0D82" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.0727 6.76245L13.0879 6.93612" stroke="#1C0D82" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.92725 6.76245L2.91205 6.93608" stroke="#1C0D82" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.03613 3.10938L4.67893 3.87543" stroke="#1C0D82" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 13.6667H14.3333" stroke="#1C0D82" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/svg/algorithm_icon.svg

@@ -0,0 +1,11 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_529_12491)">
+<path d="M8.00016 1.33325L6.00016 3.33325H3.3335V5.99992L1.3335 7.99992L3.3335 9.99992V12.6666H6.00016L8.00016 14.6666L10.0002 12.6666H12.6668V9.99992L14.6668 7.99992L12.6668 5.99992V3.33325H10.0002L8.00016 1.33325Z" stroke="#1C0D82" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" stroke="#1C0D82" stroke-width="1.5" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_529_12491">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/edit_icon.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5 10.8333V16.6667C17.5 17.1269 17.1269 17.5 16.6667 17.5H3.33333C2.8731 17.5 2.5 17.1269 2.5 16.6667V3.33333C2.5 2.8731 2.8731 2.5 3.33333 2.5H9.16667" stroke="#1C0D82" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.83331 11.1333V14.1667H8.88215L17.5 5.54504L14.4563 2.5L5.83331 11.1333Z" stroke="#1C0D82" stroke-width="1.5" stroke-linejoin="round"/>
+</svg>

src/assets/svg/history_icon.svg

@@ -0,0 +1,12 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_529_12469)">
+<path d="M1.93945 2.24243V4.66667H4.3637" stroke="#1C0D82" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.3335 7.99992C1.3335 11.6818 4.31826 14.6666 8.00016 14.6666C11.6821 14.6666 14.6668 11.6818 14.6668 7.99992C14.6668 4.31802 11.6821 1.33325 8.00016 1.33325C5.53283 1.33325 3.37853 2.67362 2.22575 4.66595" stroke="#1C0D82" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.00186 4L8.00146 8.00293L10.8279 10.8294" stroke="#1C0D82" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_529_12469">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/model_icon.svg

@@ -0,0 +1,12 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_529_12475)">
+<path d="M8.00016 9L4.66683 7L1.3335 9V13L4.66683 15L8.00016 13V9Z" stroke="#1C0D82" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.6667 9L11.3333 7L8 9V13L11.3333 15L14.6667 13V9Z" stroke="#1C0D82" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.3332 3L7.99984 1L4.6665 3V7L7.99984 9L11.3332 7V3Z" stroke="#1C0D82" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_529_12475">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/components/ReIcon/src/offlineIcon.ts

@@ -8,7 +8,23 @@ import { addIcon } from "@iconify/vue/dist/offline";
 import HomeFilled from "@iconify-icons/ep/home-filled";
 import InformationLine from "@iconify-icons/ri/information-line";
 import Lollipop from "@iconify-icons/ep/lollipop";
+import ProjectIcon from "@iconify-icons/icon-park-outline/list-view";
+import Terminal from "@iconify-icons/icon-park-outline/terminal";
+import Computer from "@iconify-icons/icon-park-outline/computer";
+import CategoryManagement from "@iconify-icons/icon-park-outline/category-management";
+import WeixinFavorites from "@iconify-icons/icon-park-outline/weixin-favorites";
+import BuildingOne from "@iconify-icons/icon-park-outline/building-one";
+import Alarm from "@iconify-icons/icon-park-outline/alarm";
+import Camera from "@iconify-icons/icon-park-outline/camera";
 
 addIcon("homeFilled", HomeFilled);
 addIcon("informationLine", InformationLine);
 addIcon("lollipop", Lollipop);
+addIcon("projectIcon", ProjectIcon);
+addIcon("terminal", Terminal);
+addIcon("computer", Computer);
+addIcon("categoryManagement", CategoryManagement);
+addIcon("weixinFavorites", WeixinFavorites);
+addIcon("buildingOne", BuildingOne);
+addIcon("alarm", Alarm);
+addIcon("camera", Camera);

src/layout/components/navbar.vue

@@ -5,7 +5,8 @@ import mixNav from "./sidebar/mixNav.vue";
 import { useNav } from "@/layout/hooks/useNav";
 import Breadcrumb from "./sidebar/breadCrumb.vue";
 import topCollapse from "./sidebar/topCollapse.vue";
-import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
+// import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
+import IconParkOutline from "@iconify-icons/icon-park-outline/logout";
 import Setting from "@iconify-icons/ri/settings-3-line";
 
 const {
@@ -53,10 +54,7 @@ const {
         <template #dropdown>
           <el-dropdown-menu class="logout">
             <el-dropdown-item @click="logout">
-              <IconifyIconOffline
-                :icon="LogoutCircleRLine"
-                style="margin: 5px"
-              />
+              <IconifyIconOffline :icon="IconParkOutline" style="margin: 5px" />
               退出系统
             </el-dropdown-item>
           </el-dropdown-menu>
@@ -66,6 +64,7 @@ const {
         class="set-icon navbar-bg-hover"
         title="打开项目配置"
         @click="onPanel"
+        v-if="false"
       >
         <IconifyIconOffline :icon="Setting" />
       </span>

src/router/modules/alarm.ts

@@ -1,9 +1,9 @@
-import Alarm from "@/assets/svg/alarm.svg?component";
 export default {
   path: "/warning",
   meta: {
     title: "告警管理",
-    icon: Alarm,
+    icon: "alarm",
+    showLink: false,
     rank: 14
   },
   children: [

src/router/modules/device.ts

@@ -1,9 +1,8 @@
-import Alarm from "@/assets/svg/alarm.svg?component";
 export default {
   path: "/device",
   meta: {
     title: "设备管理",
-    icon: Alarm,
+    icon: "categoryManagement",
     rank: 19
   },
   children: [

src/router/modules/platformAlgorithm.ts

@@ -1,19 +1,18 @@
-import Alarm from "@/assets/svg/alarm.svg?component";
 export default {
   path: "/platformAlgorithm",
   meta: {
     title: "平台算法库",
-    icon: Alarm,
+    icon: "terminal",
     rank: 15
   },
   children: [
     {
-      path: "/platformAlgorithm/index",
+      path: "/platformAlgorithm",
       name: "platformAlgorithm",
       component: () => import("@/views/platformAlgorithm/index.vue"),
       meta: {
         title: "平台算法库",
-        roles: ["admin", "common"]
+        roles: ["admin"]
       }
     }
   ]

src/router/modules/project.ts

@@ -1,27 +1,44 @@
-import Project from "@/assets/svg/project.svg?component";
 export default {
   path: "/project",
+  redirect: "/project/list",
   meta: {
     title: "项目管理",
-    icon: Project,
+    icon: "projectIcon",
     rank: 11
   },
   children: [
     {
-      path: "/project/list/index",
+      path: "/project/list",
       name: "ProjectList",
       component: () => import("@/views/project/list/index.vue"),
       meta: {
         title: "项目列表",
+        showLink: true,
+        // showParent: true,
         roles: ["admin", "common"]
       }
+      // children: [
+      //   {
+      //     path: "/project/details",
+      //     name: "ProjectDetails",
+      //     component: () => import("@/views/project/details/index.vue"),
+      //     meta: {
+      //       title: "项目详情",
+      //       // showLink: false,
+      //       showParent: true,
+      //       roles: ["admin", "common"]
+      //     }
+      //   }
+      // ]
     },
     {
-      path: "/project/details/index",
+      path: "/project/details",
       name: "ProjectDetails",
       component: () => import("@/views/project/details/index.vue"),
       meta: {
         title: "项目详情",
+        showLink: false,
+        activePath: "/project/list",
         roles: ["admin", "common"]
       }
     }

src/router/modules/remaining.ts

@@ -32,7 +32,7 @@ export default [
     name: "Screen",
     meta: {
       title: "数据大屏",
-      icon: "lollipop",
+      icon: "computer",
       // showLink: true,
       rank: 1
     },
@@ -53,7 +53,7 @@ export default [
     name: "Screen1",
     meta: {
       title: "企业大屏",
-      icon: "lollipop",
+      icon: "computer",
       // showLink: true,
       rank: 2
     },

src/style/login.css

@@ -12,7 +12,7 @@
   /* width: 100%;
   height: 100%; */
   left: 10%;
-  top: 5%;
+  top: 10%;
 }
 
 .login-container {

src/views/algorithmTesting/index.vue

@@ -117,7 +117,7 @@ onBeforeUnmount(() => {
 
 <template>
   <div class="main">
-    <h2>算法实测</h2>
+    <h2 class="mb-4 text-xl">算法实测</h2>
     <el-card shadow="hover">
       <el-row :gutter="24" justify="space-between">
         <el-col :xs="12" :sm="12">
@@ -165,3 +165,8 @@ onBeforeUnmount(() => {
     </el-card>
   </div>
 </template>
+<style lang="scss">
+.el-input__inner {
+  color: #333;
+}
+</style>

src/views/device/index.vue

@@ -41,8 +41,14 @@ setTimeout(() => {
   loading.value = !loading.value;
 }, 800);
 
+const deviceInfo = ref({
+  name: "CMR-025",
+  isSelect: false
+});
+
 const selectDevice = (value, index) => {
   const isSelected = value.isSelect;
+  deviceInfo.value = value;
   nextTick(() => {
     deviceList.value.forEach(item => {
       item.isSelect = false;
@@ -70,7 +76,7 @@ const selectDevice = (value, index) => {
     <div class="device-image float-left">
       <el-skeleton animated :loading="loading">
         <div class="device-image-bg">
-          <img :src="device_bg" />
+          <img :src="device_bg" class="w-[844px] h-[744px]" />
           <div class="device-image-tag">
             <span
               :class="deviceList[0].isSelect ? 'device-image-tag-select' : ''"
@@ -92,7 +98,7 @@ const selectDevice = (value, index) => {
           <div class="device-image-tag">
             <span
               :class="deviceList[2].isSelect ? 'device-image-tag-select' : ''"
-              >CMR-026</span
+              >CMR-027</span
             >
             <img
               :src="deviceList[2].isSelect ? device_tag_select : device_tag"
@@ -101,7 +107,7 @@ const selectDevice = (value, index) => {
           <div class="device-image-tag">
             <span
               :class="deviceList[3].isSelect ? 'device-image-tag-select' : ''"
-              >CMR-026</span
+              >CMR-028</span
             >
             <img
               :src="deviceList[3].isSelect ? device_tag_select : device_tag"
@@ -110,7 +116,7 @@ const selectDevice = (value, index) => {
           <div class="device-image-tag">
             <span
               :class="deviceList[4].isSelect ? 'device-image-tag-select' : ''"
-              >CMR-026</span
+              >CMR-029</span
             >
             <img
               :src="deviceList[4].isSelect ? device_tag_select : device_tag"
@@ -119,7 +125,7 @@ const selectDevice = (value, index) => {
           <div class="device-image-tag">
             <span
               :class="deviceList[5].isSelect ? 'device-image-tag-select' : ''"
-              >CMR-026</span
+              >CMR-030</span
             >
             <img
               :src="deviceList[5].isSelect ? device_tag_select : device_tag"
@@ -128,7 +134,7 @@ const selectDevice = (value, index) => {
           <div class="device-image-tag">
             <span
               :class="deviceList[6].isSelect ? 'device-image-tag-select' : ''"
-              >CMR-026</span
+              >CMR-031</span
             >
             <img
               :src="deviceList[6].isSelect ? device_tag_select : device_tag"
@@ -137,8 +143,8 @@ const selectDevice = (value, index) => {
         </div>
       </el-skeleton>
     </div>
-    <div class="float-right w-[30%] h-[90vh]">
-      <el-card class="box-card h-full">
+    <div class="float-right" style="width: calc(100% - 904px)">
+      <el-card class="box-card h-full" shadow="never">
         <template #header>
           <div class="card-header">
             <span>设备列表</span>
@@ -146,7 +152,7 @@ const selectDevice = (value, index) => {
         </template>
         <div class="device-id">
           <p class="device-id-title">设备ID</p>
-          <el-scrollbar height="384px">
+          <el-scrollbar height="300px">
             <p
               v-for="(item, index) in deviceList"
               :key="index"
@@ -161,7 +167,7 @@ const selectDevice = (value, index) => {
         <div class="device-content">
           <div class="device-content-box">
             <span>设备名称</span>
-            <p>CMR-025</p>
+            <p>{{ deviceInfo.name }}</p>
           </div>
           <div class="device-content-box">
             <span>设备S/N</span>
@@ -183,11 +189,15 @@ const selectDevice = (value, index) => {
 <style lang="scss">
 .device-image {
   display: flex;
-  align-items: center;
-  height: 90vh;
+  // align-items: center;
+  // height: 90vh;
 
   .device-image-bg {
     position: relative;
+    box-sizing: border-box;
+    padding: 20px;
+    background: #fff;
+    border-radius: 4px;
 
     .device-image-tag {
       position: absolute;
@@ -286,6 +296,7 @@ const selectDevice = (value, index) => {
         height: 48px;
         padding: 0 20px;
         line-height: 48px;
+        color: #333;
         cursor: pointer;
       }
 
@@ -294,19 +305,25 @@ const selectDevice = (value, index) => {
           "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
         font-size: 15px;
         font-weight: 400;
-        color: #666;
+        color: #999;
+      }
+
+      .device-id-select {
+        color: #fff;
+        background: #1c0d82;
       }
     }
 
-    .device-id-select {
-      color: #fff;
-      background: #1c0d82;
+    .el-divider--horizontal {
+      margin-top: 16px;
     }
 
     .device-content {
       padding: 0 20px;
 
       .device-content-box {
+        margin-bottom: 12px;
+
         span {
           box-sizing: border-box;
           display: block;
@@ -326,7 +343,7 @@ const selectDevice = (value, index) => {
           padding: 0 12px;
           font-family: "Helvetica Neue", Helvetica, "PingFang SC",
             "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-          font-size: 12px;
+          font-size: 14px;
           font-weight: 400;
           line-height: 32px;
           border: 1px solid #dcdcdc;

src/views/enterprise/components/DialogForm.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { message } from "@/utils/message";
-import { FormInstance } from "element-plus";
+import { FormInstance, ElTable } from "element-plus";
 
 const props = defineProps({
   visible: {
@@ -21,7 +21,6 @@ const props = defineProps({
 });
 
 const ruleFormRef = ref<FormInstance>();
-
 const formVisible = ref(false);
 const formData = ref(props.data);
 const title = ref("新建企业");
@@ -32,11 +31,16 @@ const submitForm = async (formEl: FormInstance | undefined) => {
   await formEl.validate(valid => {
     if (valid) {
       const data = formData;
-      console.log(data);
-
-      message("提交成功", { type: "success" });
-      emit("submit-form", data);
+      if (props.type == "add") {
+        message("添加成功", { type: "success" });
+      } else if (props.type == "edit") {
+        message("修改成功", { type: "success" });
+      } else {
+        message("新建成功", { type: "success" });
+      }
+      emit("submit-form", data, props.type, multipleSelection.value);
       formVisible.value = false;
+      multipleTableRef.value.clearSelection();
       formData.value = {};
     }
   });
@@ -46,40 +50,42 @@ const resetForm = (formEl: FormInstance | undefined) => {
   if (!formEl) return;
   formEl.resetFields();
 };
-
+const multipleTableRef = ref<InstanceType<typeof ElTable>>();
 const closeDialog = () => {
   formVisible.value = false;
+  multipleTableRef.value.clearSelection();
   resetForm(ruleFormRef.value);
+  formData.value = {};
 };
 
 const tableData = [
   {
-    version: "2016-05-03",
-    name: "Tom"
+    version: "V1.6.25",
+    name: "文字识别"
   },
   {
-    version: "2016-05-02",
-    name: "Tom"
+    version: "V1.6.25",
+    name: "机器人抓取目标定位"
   },
   {
-    version: "2016-05-04",
-    name: "Tom"
+    version: "V1.6.25",
+    name: "料口堵塞识别"
   },
   {
-    version: "2016-05-01",
-    name: "Tom"
+    version: "V1.6.25",
+    name: "工件尺寸测量"
   },
   {
-    version: "2016-05-08",
-    name: "Tom"
+    version: "V1.6.25",
+    name: "工件面积测量"
   },
   {
-    version: "2016-05-06",
-    name: "Tom"
+    version: "V1.6.25",
+    name: "工件角度测量"
   },
   {
-    version: "2016-05-07",
-    name: "Tom"
+    version: "V1.6.25",
+    name: "工件曲率测量"
   }
 ];
 
@@ -91,6 +97,11 @@ const onPageSizeChange = (size: number) => {
 const onCurrentChange = (current: number) => {
   pagination.value.current = current;
 };
+const multipleSelection = ref([]);
+const handleSelectionChange = val => {
+  formData.value.algorithmLibrary = val;
+  multipleSelection.value = val;
+};
 
 const emit = defineEmits(["update:visible", "submit-form"]);
 watch(
@@ -110,10 +121,15 @@ watch(
 watch(
   () => props.type,
   val => {
+    console.log(val);
     if (val == "edit") {
       title.value = "编辑企业";
     } else if (val == "add") {
+      console.log(props.data);
+
       title.value = "添加算法";
+    } else {
+      title.value = "新建企业";
     }
   }
 );
@@ -149,11 +165,14 @@ const rules = {
       label-width="100px"
       v-if="props.type != 'add'"
     >
-      <el-form-item label="企业全称" prop="name">
-        <el-input v-model="formData.name" placeholder="请输入企业全称" />
+      <el-form-item label="企业全称" prop="privateEnterprise">
+        <el-input
+          v-model="formData.privateEnterprise"
+          placeholder="请输入企业全称"
+        />
       </el-form-item>
-      <el-form-item label="企业联系人" prop="leader">
-        <el-input v-model="formData.leader" placeholder="请输入企业联系人" />
+      <el-form-item label="企业联系人" prop="contacts">
+        <el-input v-model="formData.contacts" placeholder="请输入企业联系人" />
       </el-form-item>
       <el-form-item label="联系方式" prop="phone">
         <el-input v-model="formData.phone" placeholder="请输入联系方式" />
@@ -170,7 +189,7 @@ const rules = {
       label-width="100px"
       v-else
     >
-      <div class="algorithm-header mb-2">
+      <div class="algorithm-header mb-5">
         <el-image
           preview-teleported
           loading="lazy"
@@ -180,13 +199,13 @@ const rules = {
           ]"
           :initial-index="1"
           fit="cover"
-          class="w-[72px] h-[72px] mr-4"
+          class="w-[72px] h-[72px] mr-4 rounded"
         />
-        <span>{{ formData.name }}</span>
+        <span>{{ formData.privateEnterprise }}</span>
       </div>
-      <el-form-item label="方向" prop="leader">
+      <el-form-item label="方向" prop="direction">
         <el-select
-          v-model="formData.leader"
+          v-model="formData.direction"
           placeholder="请选择方向"
           :style="{ width: '100%' }"
         >
@@ -194,9 +213,9 @@ const rules = {
           <el-option label="类型2" value="2" />
         </el-select>
       </el-form-item>
-      <el-form-item label="类型" prop="leader">
+      <el-form-item label="类型" prop="description">
         <el-select
-          v-model="formData.leader"
+          v-model="formData.description"
           placeholder="请选择类型"
           :style="{ width: '100%' }"
         >
@@ -207,12 +226,14 @@ const rules = {
       <el-row>
         <el-col class="mb-4">
           <el-table
+            ref="multipleTableRef"
             :data="tableData"
             style="width: 100%"
             :header-cell-style="{ background: '#F5F5F5' }"
+            @selection-change="handleSelectionChange"
           >
             <el-table-column type="selection" width="55" />
-            <el-table-column prop="name" label="名称" width="150" />
+            <el-table-column prop="name" label="名称" />
             <el-table-column prop="version" label="版本" />
           </el-table>
         </el-col>
@@ -250,23 +271,28 @@ const rules = {
 // }
 .project-dialog {
   .el-dialog__header {
+    padding: 16px 20px;
     margin-right: 0;
     border-bottom: 1px solid #e0e0e0;
   }
 
   .el-dialog__body {
-    padding: 30px 24px;
+    padding: 24px;
   }
 
-  .btn-color:hover {
-    color: #fff;
-    background-color: #1c0d82;
-    opacity: 0.25;
-  }
+  // .btn-color:hover {
+  //   color: #fff;
+  //   background-color: #1c0d82;
+  //   opacity: 0.25;
+  // }
 
   .algorithm-header {
     display: flex;
     align-items: center;
+
+    span {
+      color: #333;
+    }
   }
 }
 </style>

src/views/enterprise/index.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import { markRaw, nextTick, reactive, ref } from "vue";
-import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import AddFill from "@iconify-icons/ri/add-circle-line";
+import { markRaw, nextTick, onMounted, reactive, ref } from "vue";
 import { useWindowSize } from "@vueuse/core";
 import emptyPic from "@/assets/static/project_empty.png";
-import { Search, Edit, QuestionFilled } from "@element-plus/icons-vue";
+import { Search, QuestionFilled } from "@element-plus/icons-vue";
 import dialogForm from "./components/DialogForm.vue";
 import { type PaginationProps } from "@pureadmin/table";
 import { ElMessageBox } from "element-plus";
 import { message } from "@/utils/message";
+import enterprise_default from "@/assets/static/enterprise_default.png";
+import AddFill from "@/assets/svg/add_icon.svg?component";
+import Edit from "@/assets/svg/edit_icon.svg?component";
 
 defineOptions({
   name: "EnterpriseList"
@@ -32,19 +33,78 @@ const svg = `
       `;
 
 const INITIAL_DATA = {
-  name: "",
-  status: "",
-  type: "",
-  mark: "",
-  leader: "",
-  phone: ""
+  privateEnterprise: "",
+  enterpriseId: "",
+  contacts: "",
+  address: "",
+  phone: "",
+  platformServices: "",
+  algorithmLibrary: [],
+  isSelect: false
 };
 const formDialogVisible = ref(false);
 const formData = ref({ ...INITIAL_DATA });
-const enterprise = ref([]);
+const enterprise = ref([
+  {
+    privateEnterprise: "洛伦电子(南京)有限公司",
+    enterpriseId: "NJCJDQGZZ123456",
+    contacts: "李洛伦",
+    address: "江苏省南京市雨花台区安德门大街259号",
+    phone: "13562563565",
+    platformServices: "2024年12月21日",
+    algorithmLibrary: [
+      {
+        version: "V1.6.25",
+        name: "工件面积测量"
+      },
+      {
+        version: "V1.6.25",
+        name: "工件角度测量"
+      },
+      {
+        version: "V1.6.25",
+        name: "工件曲率测量"
+      }
+    ],
+    isSelect: false
+  },
+  {
+    privateEnterprise: "洛伦电子(南京)有限公司2",
+    enterpriseId: "NJCJDQGZZ1234562",
+    contacts: "李洛伦2",
+    address: "江苏省南京市雨花台区安德门大街259号2",
+    phone: "13562563565",
+    platformServices: "2024年12月22日",
+    algorithmLibrary: [
+      {
+        version: "V1.6.25",
+        name: "工件面积测量"
+      },
+      {
+        version: "V1.6.25",
+        name: "工件角度测量"
+      },
+      {
+        version: "V1.6.25",
+        name: "工件曲率测量"
+      }
+    ],
+    isSelect: false
+  }
+]);
 
 const customType = ref("");
 const dataList = ref([]);
+const enterpriseInfo = ref({
+  privateEnterprise: "",
+  enterpriseId: "",
+  contacts: "",
+  address: "",
+  phone: "",
+  platformServices: "",
+  algorithmLibrary: [],
+  isSelect: false
+});
 const pagination = reactive<PaginationProps>({
   total: 0,
   pageSize: 10,
@@ -108,36 +168,90 @@ function handleDelete(row) {
     .catch(() => {});
 }
 
-const addEnterprise = data => {
-  console.log(data.value);
-  enterprise.value.unshift(data.value);
+const addEnterprise = (data, type, multipleSelection) => {
+  if (type == "add") {
+    if (multipleSelection.length > 0) {
+      dataList.value.unshift(...multipleSelection);
+    }
+  } else if (type == "edit") {
+    enterprise.value.forEach((item, index) => {
+      if (item.enterpriseId == data.value.enterpriseId) {
+        Object.assign(enterprise.value[index], data.value);
+        Object.assign(enterpriseInfo.value, data.value);
+      }
+    });
+  } else {
+    enterprise.value.unshift(data.value);
+  }
+  // enterprise.value.unshift(data.value);
   // count.value++;
 };
+const addCompany = () => {
+  customType.value = "";
+  formDialogVisible.value = true;
+};
 const editEnterprise = () => {
   customType.value = "edit";
   formDialogVisible.value = true;
   nextTick(() => {
-    formData.value = { ...enterprise.value[0] };
+    formData.value = { ...enterpriseInfo.value };
   });
 };
 const addAlgorithm = () => {
   customType.value = "add";
   formDialogVisible.value = true;
   nextTick(() => {
-    formData.value = { ...enterprise.value[0] };
+    formData.value = { ...enterpriseInfo.value };
   });
   // count.value++;
 };
+
+const selectEnterprise = (value, index) => {
+  const isSelected = value.isSelect;
+  nextTick(() => {
+    enterprise.value.forEach(item => {
+      item.isSelect = false;
+    });
+
+    enterprise.value[index] = Object.assign({}, enterprise.value[index], {
+      isSelect: isSelected ? false : true
+    });
+    enterpriseInfo.value = { ...value };
+    Object.assign(dataList.value, value.algorithmLibrary);
+    // enterprise.value[index] = {
+    //   privateEnterprise: "洛伦电子(南京)有限公司",
+    //   enterpriseId: "NJCJDQGZZ123456",
+    //   contacts: "李洛伦",
+    //   address: "江苏省南京市雨花台区安德门大街259号",
+    //   phone: "13562563565",
+    //   platformServices: "2024年12月21日",
+    //   algorithmLibrary: [],
+    //   isSelect: isSelected ? false : true
+    // };
+  });
+};
+onMounted(() => {
+  enterprise.value.forEach(item => {
+    item.isSelect = false;
+  });
+
+  enterprise.value[0] = Object.assign({}, enterprise.value[0], {
+    isSelect: true
+  });
+  enterpriseInfo.value = { ...enterprise.value[0] };
+  Object.assign(dataList.value, enterprise.value[0].algorithmLibrary);
+});
 </script>
 
 <template>
   <div class="main">
     <div class="w-full flex justify-between mb-4">
-      <h2>企业管理</h2>
+      <h2 class="text-xl">企业管理</h2>
       <el-button
         type="primary"
         color="#1C0D82"
-        @click="formDialogVisible = true"
+        @click="addCompany"
+        v-if="enterprise.length > 0"
       >
         新建企业
       </el-button>
@@ -149,24 +263,20 @@ const addAlgorithm = () => {
     >
       <el-card class="box-card" shadow="never" v-show="enterprise.length < 1">
         <el-empty description="暂未添加任何项目" :image="emptyPic">
-          <el-button
-            type="primary"
-            color="#1C0D82"
-            @click="formDialogVisible = true"
-          >
+          <el-button type="primary" color="#1C0D82" @click="addCompany">
             新建企业
           </el-button>
         </el-empty>
       </el-card>
       <template v-if="enterprise.length > 0">
-        <div class="w-[37%] h-full float-left">
+        <div class="w-[21%] h-full float-left">
           <el-card
             class="box-card-left"
             :style="{ height: `calc(${height}px - 10vh - 20px)` }"
           >
             <template #header>
               <div class="card-header flex justify-between">
-                <span class="w-[20%]">企业列表</span>
+                <span class="w-[30%] font-semibold">企业列表</span>
               </div>
             </template>
             <el-input
@@ -180,93 +290,85 @@ const addAlgorithm = () => {
               <p
                 v-for="(item, index) in enterprise"
                 :key="index"
-                class="scrollbar-item h-9"
+                :class="
+                  item.isSelect ? 'enterprise-id-select ' : 'scrollbar-item'
+                "
+                class="h-9"
+                @click="selectEnterprise(item, index)"
               >
-                {{ item.name }}
+                {{ item.privateEnterprise }}
               </p>
             </el-scrollbar>
           </el-card>
         </div>
-        <div class="float-right w-[62%]">
+        <div class="float-right w-[78%]">
           <el-card
-            class="box-card"
+            class="box-card-right"
             :style="{ height: `calc(${height}px - 10vh - 20px)` }"
           >
             <template #header>
               <div class="card-header flex justify-between">
-                <span>企业详情</span>
+                <span class="font-semibold">企业详情</span>
                 <el-button
                   link
                   text
                   style="color: #1c0d82"
-                  :icon="Edit"
                   @click="editEnterprise"
                 >
+                  <el-icon :size="20" class="mr-2"><Edit /></el-icon>
                   编辑
                 </el-button>
               </div>
             </template>
             <div class="flex">
-              <el-skeleton animated :loading="loading" class="flex">
-                <!-- <span>企业全称：{{ "电子有限公司" }}</span>
+              <!-- <el-skeleton animated :loading="loading" class="flex"> -->
+              <!-- <span>企业全称：{{ "电子有限公司" }}</span>
                 <span>ID：{{ "电子有限公司" }}</span> -->
-                <el-image
-                  preview-teleported
-                  loading="lazy"
-                  src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
-                  :preview-src-list="[
-                    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
-                  ]"
-                  :initial-index="1"
-                  fit="cover"
-                  class="w-[72px] h-[72px] mr-4"
-                />
-                <div class="enterprise-description">
-                  <p>
-                    企业全称：<span>{{ "洛伦电子(南京)有限公司" }}</span>
-                  </p>
-                  <p>
-                    企业地址：<span>{{
-                      "江苏省南京市雨花台区安德门大街259号"
-                    }}</span>
-                  </p>
-                </div>
-                <div class="enterprise-description">
-                  <p>
-                    ID：<span>{{ "NJCJDQGZZ123456" }}</span>
-                  </p>
-                  <p>
-                    联系方式：<span>{{ "13562563565" }}</span>
-                  </p>
-                </div>
-                <div class="enterprise-description">
-                  <p>
-                    企业联系人：<span>{{ "李洛伦" }}</span>
-                  </p>
-                  <p>
-                    平台服务：<span>{{ "2024年12月21日" }}</span>
-                    <el-tag class="mx-1" type="danger" effect="plain"
-                      >到期</el-tag
-                    >
-                  </p>
-                </div>
-              </el-skeleton>
+              <el-image
+                preview-teleported
+                loading="lazy"
+                :src="enterprise_default"
+                :preview-src-list="[enterprise_default]"
+                :initial-index="1"
+                fit="cover"
+                class="w-[72px] h-[72px] mr-4"
+              />
+              <div class="enterprise-description">
+                <p>
+                  企业全称：<span>{{ enterpriseInfo.privateEnterprise }}</span>
+                </p>
+                <p>
+                  企业地址：<span>{{ enterpriseInfo.address }}</span>
+                </p>
+              </div>
+              <div class="enterprise-description">
+                <p>
+                  ID：<span>{{ enterpriseInfo.enterpriseId }}</span>
+                </p>
+                <p>
+                  联系方式：<span>{{ enterpriseInfo.phone }}</span>
+                </p>
+              </div>
+              <div class="enterprise-description">
+                <p>
+                  企业联系人：<span>{{ enterpriseInfo.contacts }}</span>
+                </p>
+                <p>
+                  平台服务：<span>{{ enterpriseInfo.platformServices }}</span>
+                  <el-tag class="mx-1" type="danger" :hit="true">到期</el-tag>
+                </p>
+              </div>
+              <!-- </el-skeleton> -->
             </div>
             <el-divider style="margin-top: 18px" />
             <div class="w-full flex justify-between mb-4">
               <h4>企业算法库</h4>
-              <el-button
-                link
-                text
-                style="color: #1c0d82"
-                :icon="useRenderIcon(AddFill)"
-                @click="addAlgorithm"
-              >
+              <el-button link text style="color: #1c0d82" @click="addAlgorithm">
+                <el-icon :size="20" class="mr-2"><AddFill /></el-icon>
                 添加算法
               </el-button>
             </div>
             <pure-table
-              border
               align-whole="left"
               showOverflowTooltip
               table-layout="auto"
@@ -285,12 +387,7 @@ const addAlgorithm = () => {
               @page-current-change="handleCurrentChange"
             >
               <template #operation="{ row }">
-                <el-button
-                  class="reset-margin"
-                  link
-                  type="danger"
-                  @click="handleDelete(row)"
-                >
+                <el-button link type="danger" @click="handleDelete(row)">
                   删除
                 </el-button>
               </template>
@@ -307,7 +404,7 @@ const addAlgorithm = () => {
     />
   </div>
 </template>
-<style lang="scss">
+<style scoped lang="scss">
 // :deep(.el-input .el-input__inner) {
 //   .el-input__wrapper {
 //     box-shadow: none;
@@ -320,9 +417,65 @@ const addAlgorithm = () => {
 //   border: none;
 //   background-color: rgba(255, 255, 255, 0);
 // }
+
+.box-card-right {
+  .enterprise-description {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-around;
+    margin-right: 24px;
+
+    p {
+      font-size: 14px;
+      color: #666;
+
+      span {
+        color: #333;
+      }
+
+      .el-tag {
+        color: #f56c6c;
+        //   background: #fde2e2;
+        //   border: #fef0f0;
+
+        //   .el-tag__content {
+        //     color: #f56c6c !important;
+        //   }
+      }
+    }
+  }
+}
+</style>
+<style lang="scss">
+.msg-box-style {
+  // --el-messagebox-width: 580px;
+  // height: 184px;
+  // .btn-custom-cancel:hover {
+  //   color: #fff;
+  //   // color: skyblue;
+  //   background-color: #1c0d82;
+  //   opacity: 0.5;
+  // }
+
+  .btn-custom-confirm {
+    color: #fff;
+    background-color: #1c0d82;
+    border: #1c0d82;
+
+    &:hover {
+      color: #fff;
+      // color: skyblue;
+      background-color: #1c0d82;
+      opacity: 0.5;
+    }
+  }
+}
+
 .input-style {
   .el-input__wrapper {
     padding-left: 20px;
+    margin-bottom: 10px;
     box-shadow: none !important;
     // margin-bottom: 10px;
     // border: none;
@@ -331,6 +484,7 @@ const addAlgorithm = () => {
 }
 
 .scrollbar-item {
+  height: 38px;
   padding-left: 20px;
   font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
     "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
@@ -338,37 +492,24 @@ const addAlgorithm = () => {
   font-weight: 400;
   line-height: 2.25rem;
   color: #666;
+  cursor: pointer;
 }
 
 .box-card-left {
   .el-card__body {
     padding: 10px 0 20px;
-  }
-}
-
-.box-card {
-  .enterprise-description {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: space-around;
-    margin-right: 24px;
 
-    p {
-      color: #666;
-
-      span {
-        color: #333;
-      }
-
-      .el-tag {
-        background: #fde2e2;
-        border: #fef0f0;
-
-        .el-tag__content {
-          color: #f56c6c !important;
-        }
-      }
+    .enterprise-id-select {
+      height: 38px;
+      padding-left: 20px;
+      font-family: "Helvetica Neue", Helvetica, "PingFang SC",
+        "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 2.25rem;
+      color: #fff;
+      cursor: pointer;
+      background: #1c0d82;
     }
   }
 }

src/views/error/403.vue

@@ -49,7 +49,7 @@ const router = useRouter();
       </p>
       <el-button
         type="primary"
-        @click="router.push('/')"
+        @click="router.push('/project/list/index')"
         v-motion
         :initial="{
           opacity: 0,

src/views/error/404.vue

@@ -49,7 +49,7 @@ const router = useRouter();
       </p>
       <el-button
         type="primary"
-        @click="router.push('/')"
+        @click="router.push('/project/list/index')"
         v-motion
         :initial="{
           opacity: 0,

src/views/error/500.vue

@@ -49,7 +49,7 @@ const router = useRouter();
       </p>
       <el-button
         type="primary"
-        @click="router.push('/')"
+        @click="router.push('/project/list/index')"
         v-motion
         :initial="{
           opacity: 0,

src/views/login/index.vue

@@ -11,13 +11,22 @@ import { initRouter, getTopMenu } from "@/router/utils";
 import { bg, leftLogo, sst } from "./utils/static";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 // import update from "./components/update.vue";
-import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
+import {
+  ref,
+  reactive,
+  onMounted,
+  onBeforeUnmount,
+  toRaw,
+  nextTick
+} from "vue";
 // import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
 
 // import dayIcon from "@/assets/svg/day.svg?component";
 // import darkIcon from "@/assets/svg/dark.svg?component";
-import Lock from "@iconify-icons/ri/lock-fill";
-import User from "@iconify-icons/ri/user-3-fill";
+import Lock from "@iconify-icons/icon-park-outline/lock";
+import User from "@iconify-icons/icon-park-outline/user";
+import PreviewClose from "@iconify-icons/icon-park-outline/preview-close";
+import PreviewOpen from "@iconify-icons/icon-park-outline/preview-open";
 
 defineOptions({
   name: "Login"
@@ -48,7 +57,10 @@ const onLogin = async (formEl: FormInstance | undefined) => {
   await formEl.validate((valid, fields) => {
     if (valid) {
       useUserStoreHook()
-        .loginByUsername({ username: ruleForm.username, password: "admin123" })
+        .loginByUsername({
+          username: ruleForm.username,
+          password: ruleForm.password
+        })
         .then(res => {
           if (res.success) {
             // 获取后端路由
@@ -56,7 +68,13 @@ const onLogin = async (formEl: FormInstance | undefined) => {
               router.push(getTopMenu(true).path);
               message("登录成功", { type: "success" });
             });
+          } else {
+            message("登录失败", { type: "error" });
           }
+        })
+        .catch(() => {
+          loading.value = false;
+          message("登录失败", { type: "error" });
         });
     } else {
       loading.value = false;
@@ -64,7 +82,8 @@ const onLogin = async (formEl: FormInstance | undefined) => {
     }
   });
 };
-
+const passwordType = ref("password");
+const refInput = ref();
 /** 使用公共函数，避免`removeEventListener`失效 */
 function onkeypress({ code }: KeyboardEvent) {
   if (code === "Enter") {
@@ -72,6 +91,17 @@ function onkeypress({ code }: KeyboardEvent) {
   }
 }
 
+function showPass() {
+  if (passwordType.value === "password") {
+    passwordType.value = "text";
+  } else {
+    passwordType.value = "password";
+  }
+  nextTick(() => {
+    refInput.value.focus();
+  });
+}
+
 onMounted(() => {
   window.document.addEventListener("keypress", onkeypress);
 });
@@ -84,7 +114,10 @@ onBeforeUnmount(() => {
 <template>
   <div class="select-none">
     <img :src="bg" class="wave" />
-    <img :src="sst" class="logo-small" />
+    <div class="logo-small">
+      <component :is="toRaw(sst)" />
+    </div>
+    <!-- <img :src="sst" class="logo-small" /> -->
     <!-- <div class="flex-c absolute right-5 top-3"> -->
     <!-- 主题 -->
     <!-- <el-switch
@@ -129,7 +162,6 @@ onBeforeUnmount(() => {
                 prop="username"
               >
                 <el-input
-                  clearable
                   v-model="ruleForm.username"
                   placeholder="账号"
                   :prefix-icon="useRenderIcon(User)"
@@ -140,12 +172,27 @@ onBeforeUnmount(() => {
             <Motion :delay="150">
               <el-form-item prop="password">
                 <el-input
-                  clearable
-                  show-password
+                  ref="refInput"
+                  :type="passwordType"
                   v-model="ruleForm.password"
                   placeholder="密码"
                   :prefix-icon="useRenderIcon(Lock)"
-                />
+                >
+                  <template #suffix>
+                    <el-icon
+                      class="el-icon el-input__icon el-input__password"
+                      @click="showPass"
+                    >
+                      <IconifyIconOffline
+                        :icon="
+                          passwordType == 'password'
+                            ? PreviewClose
+                            : PreviewOpen
+                        "
+                      />
+                    </el-icon>
+                  </template>
+                </el-input>
               </el-form-item>
             </Motion>
             <Motion :delay="250">
@@ -200,6 +247,7 @@ onBeforeUnmount(() => {
 }
 
 .login-btn {
+  height: 40px;
   font-weight: 600;
   // font-family: "PingFang SC";
   color: #fff;
@@ -214,6 +262,9 @@ onBeforeUnmount(() => {
   opacity: 0.5;
 }
 
+.el-input__icon {
+  cursor: pointer;
+}
 // :deep(.el-button) {
 //   font-weight: bold;
 //   color: #fff;

src/views/login/utils/static.ts

@@ -1,6 +1,6 @@
 import bg from "@/assets/login/bg.png";
 import leftLogo from "@/assets/login/leftLogo.png";
-import sst from "@/assets/login/sst.png";
+import sst from "@/assets/login/sst.svg?component";
 import avatar from "@/assets/login/avatar.svg?component";
 import logo from "@/assets/login/logo.svg?component";
 import illustration from "@/assets/login/illustration.svg?component";

src/views/myAlgorithm/components/Card.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed, PropType } from "vue";
 // import MoreFilled from "@iconify-icons/ant-design/ellipsis-outlined";
-import myLogo from "@/assets/static/myLogo.png";
+// import myLogo from "@/assets/static/myLogo.png";
+import logon from "@/assets/svg/logo_icon.svg?component";
 // import { MoreFilled } from "@element-plus/icons-vue";
 
 defineOptions({
@@ -22,6 +23,7 @@ const props = defineProps({
     type: Object as PropType<CardProductType>
   }
 });
+console.log(props.product);
 
 const cardClass = computed(() => [
   "list-card-item",
@@ -38,7 +40,8 @@ const cardLogoClass = computed(() => [
   <div :class="cardClass">
     <div class="list-card-item_detail bg-bg_color">
       <div :class="cardLogoClass">
-        <img :src="myLogo" class="bg" />
+        <logon />
+        <!-- <img :src="myLogo" class="bg" /> -->
       </div>
       <div class="list-card-item_content">
         <p class="list-card-item_detail--title">
@@ -113,7 +116,7 @@ const cardLogoClass = computed(() => [
       font-size: 14px;
       font-weight: 400;
       line-height: 22px;
-      color: 333;
+      color: #333;
     }
 
     &--title {
@@ -141,7 +144,7 @@ const cardLogoClass = computed(() => [
         line-height: 26px;
         color: #fff;
         text-align: center;
-        background: #67c23a;
+        background: #44aef5;
         border-radius: 2px;
       }
     }
@@ -159,7 +162,7 @@ const cardLogoClass = computed(() => [
     }
 
     &--update {
-      margin-bottom: 12px;
+      margin-bottom: 8px;
       font-family: "Helvetica Neue", Helvetica, "PingFang SC",
         "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
       font-size: 14px;

src/views/myAlgorithm/components/DialogForm.vue

@@ -174,10 +174,10 @@ const rules = {
     padding: 30px 24px;
   }
 
-  .btn-color:hover {
-    color: #fff;
-    background-color: #1c0d82;
-    opacity: 0.25;
-  }
+  // .btn-color:hover {
+  //   color: #fff;
+  //   background-color: #1c0d82;
+  //   opacity: 0.25;
+  // }
 }
 </style>

src/views/myAlgorithm/index.vue

@@ -148,7 +148,7 @@ const addProject = product => {
 <template>
   <div class="main">
     <div class="w-full flex justify-between mb-4">
-      <h2>我的算法库</h2>
+      <h2 class="text-xl">我的算法库</h2>
     </div>
     <div
       v-loading="dataLoading"
@@ -240,12 +240,12 @@ const addProject = product => {
 .msg-box-style {
   // --el-messagebox-width: 580px;
   // height: 184px;
-  .btn-custom-cancel:hover {
-    color: #fff;
-    // color: skyblue;
-    background-color: #1c0d82;
-    opacity: 0.5;
-  }
+  // .btn-custom-cancel:hover {
+  //   color: #fff;
+  //   // color: skyblue;
+  //   background-color: #1c0d82;
+  //   opacity: 0.5;
+  // }
 
   .btn-custom-confirm {
     color: #fff;

src/views/platformAlgorithm/index.vue

@@ -33,7 +33,7 @@ const dataStaticList = ref([]);
 const loading = ref(true);
 const pagination = reactive<PaginationProps>({
   total: 0,
-  pageSize: 10,
+  pageSize: 15,
   currentPage: 1,
   background: false
 });
@@ -149,7 +149,7 @@ function handleSelectionChange(val) {
   console.log("handleSelectionChange", val);
 }
 
-async function onSearch(page = 1, size = 10) {
+async function onSearch(page = 1, size = 15) {
   loading.value = true;
   const { data } = await getAlgorithmList();
   console.log(data);
@@ -194,14 +194,58 @@ const options = [
   {
     value: "深度学习",
     label: "深度学习算法"
+  }
+];
+const optionsB = [
+  {
+    value: "全部",
+    label: "全部"
   },
   {
     value: "通用类",
     label: "通用类"
   },
   {
-    value: "OCR文字识别",
-    label: "OCR文字识别"
+    value: "手机、电子、SMT",
+    label: "手机、电子、SMT"
+  },
+  {
+    value: "手机、液晶显示屏",
+    label: "手机、液晶显示屏"
+  },
+  {
+    value: "手机、电子、手机、工件装配、SMT",
+    label: "手机、电子、手机、工件装配、SMT"
+  }
+];
+const optionsC = [
+  {
+    value: "全部",
+    label: "全部"
+  },
+  {
+    value: "OCR识别",
+    label: "OCR识别"
+  },
+  {
+    value: "尺寸测量",
+    label: "尺寸测量"
+  },
+  {
+    value: "机器人定位引导",
+    label: "机器人定位引导"
+  },
+  {
+    value: "多目标定位",
+    label: "多目标定位"
+  },
+  {
+    value: "装配目标检测",
+    label: "装配目标检测"
+  },
+  {
+    value: "PCB板表面缺陷检测",
+    label: "PCB板表面缺陷检测"
   }
 ];
 onMounted(() => {
@@ -215,7 +259,7 @@ const formDialogVisible = ref(false);
 <template>
   <div class="main">
     <div class="w-full flex justify-between mb-4">
-      <h2>平台算法库</h2>
+      <h2 class="text-xl">平台算法库</h2>
     </div>
     <div
       v-loading="loading"
@@ -271,7 +315,7 @@ const formDialogVisible = ref(false);
               class="mr-3"
             >
               <el-option
-                v-for="item in options"
+                v-for="item in optionsB"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value"
@@ -284,7 +328,7 @@ const formDialogVisible = ref(false);
               class="mr-3"
             >
               <el-option
-                v-for="item in options"
+                v-for="item in optionsC"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value"
@@ -296,7 +340,6 @@ const formDialogVisible = ref(false);
             <el-button type=""> 重置 </el-button>
           </div>
           <pure-table
-            border
             align-whole="left"
             showOverflowTooltip
             table-layout="auto"
@@ -318,7 +361,8 @@ const formDialogVisible = ref(false);
               <span class="mr-2">{{ row.name }}</span>
               <el-tag
                 class="mx-1"
-                :type="row.type == '经典算法' ? 'success' : 'danger'"
+                :class="row.type == '经典算法' ? 'tagStyle' : 'tagDeepStyle'"
+                :type="row.type == '经典算法' ? '' : ''"
                 effect="plain"
               >
                 {{ row.type }}
@@ -328,7 +372,7 @@ const formDialogVisible = ref(false);
               <el-button
                 class="reset-margin"
                 link
-                type="danger"
+                text
                 @click="handleDelete(row)"
               >
                 删除
@@ -347,12 +391,12 @@ const formDialogVisible = ref(false);
 .msg-box-style {
   // --el-messagebox-width: 580px;
   // height: 184px;
-  .btn-custom-cancel:hover {
-    color: #fff;
-    // color: skyblue;
-    background-color: #1c0d82;
-    opacity: 0.5;
-  }
+  // .btn-custom-cancel:hover {
+  //   color: #fff;
+  //   // color: skyblue;
+  //   background-color: #1c0d82;
+  //   opacity: 0.5;
+  // }
 
   .btn-custom-confirm {
     color: #fff;
@@ -367,4 +411,25 @@ const formDialogVisible = ref(false);
     }
   }
 }
+
+.reset-margin {
+  // --el-button-text-color: #e80d0d;
+  color: #e80d0d !important;
+
+  &:hover {
+    opacity: 0.5;
+  }
+}
+
+.tagStyle {
+  color: rgb(68 174 245);
+  background: rgb(22 148 229 / 5%);
+  border: 1px solid rgb(22 148 229 / 60%);
+}
+
+.tagDeepStyle {
+  color: rgb(247 95 25);
+  background: rgb(247 95 25 / 10%);
+  border: 1px solid rgb(247 95 25 / 100%);
+}
 </style>

src/views/project/details/components/Bar.vue

@@ -115,7 +115,7 @@ setOptions(
       //   data: [1600, 2460, 4500]
       // },
       {
-        name: "star",
+        name: "已检出",
         type: "bar",
         barWidth: "20%",
         itemStyle: {
@@ -134,7 +134,7 @@ setOptions(
       },
       {
         //折线(右边数据)
-        name: "总量",
+        name: "缺陷检出",
         type: "line",
         yAxisIndex: 1,
         data: [160, 246, 450, 160, 246],

src/views/project/details/components/BarDetail.vue

@@ -19,6 +19,13 @@ const barChartRef = ref<HTMLDivElement | null>(null);
 const { setOptions, resize } = useECharts(barChartRef as Ref<HTMLDivElement>, {
   theme
 });
+const props = defineProps({
+  barInfo: {
+    type: Object
+  }
+});
+
+const barData = ref({ ...props.barInfo });
 
 setOptions(
   {
@@ -37,7 +44,7 @@ setOptions(
       }
     },
     grid: {
-      bottom: "20px",
+      bottom: "30px",
       right: "30px",
       left: "40px"
     },
@@ -54,7 +61,8 @@ setOptions(
           alignWithLabel: true
         },
         axisLabel: {
-          interval: 0
+          interval: 0,
+          color: "#333"
           // width: "70",
           // overflow: "truncate"
         },
@@ -65,7 +73,11 @@ setOptions(
     yAxis: [
       {
         type: "value",
-        triggerEvent: true
+        triggerEvent: true,
+        axisLabel: {
+          //y轴字体
+          color: "#333"
+        }
       },
       {
         type: "value",
@@ -74,7 +86,11 @@ setOptions(
           //分割线配置
           show: false
         },
-        triggerEvent: true
+        triggerEvent: true,
+        axisLabel: {
+          //y轴字体
+          color: "#333"
+        }
       }
     ],
     series: [
@@ -115,7 +131,7 @@ setOptions(
       //   data: [1600, 2460, 4500]
       // },
       {
-        name: "star",
+        name: "已检出",
         type: "bar",
         barWidth: "20%",
         itemStyle: {
@@ -130,14 +146,14 @@ setOptions(
             }
           ])
         },
-        data: [3620, 7500, 1450, 3620, 7500]
+        data: barData.value.barList
       },
       {
         //折线(右边数据)
-        name: "总量",
+        name: "缺陷检出",
         type: "line",
         yAxisIndex: 1,
-        data: [160, 246, 450, 160, 246],
+        data: barData.value.lineList,
         itemStyle: {
           //折线颜色
           color: "#0246F6"

src/views/project/details/components/DialogForm.vue

@@ -30,14 +30,13 @@ const props = defineProps({
     }
   }
 });
-
 const ruleFormRef = ref<FormInstance>();
 const formVisible = ref(false);
 const formData = ref(props.data);
 const title = ref("新建应用算法");
 const customWidth = ref(560);
 const customType = ref(props.type);
-console.log(customType, "customType");
+console.log(formData, "customType");
 const pagination = ref({ current: 1, pageSize: 12, total: 48 });
 const onPageSizeChange = (size: number) => {
   pagination.value.pageSize = size;
@@ -112,9 +111,22 @@ const submitForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
   await formEl.validate(valid => {
     if (valid) {
-      message("提交成功", { type: "success" });
-      formVisible.value = false;
-      resetForm(formEl);
+      if (activeStep.value == 0 && customType.value == "newBuilt") {
+        activeStep.value++;
+      } else {
+        message("提交成功", { type: "success" });
+        // formVisible.value = false;
+        const data = formData.value;
+        console.log(data);
+        if (customType.value == "newBuilt") {
+          emit("submit-form", data);
+        }
+        formVisible.value = false;
+        formData.value = {};
+        activeStep.value = 0;
+        // closeDialog();
+        // resetForm(formEl);
+      }
     }
   });
 };
@@ -127,20 +139,58 @@ const resetForm = (formEl: FormInstance | undefined) => {
 const closeDialog = () => {
   formVisible.value = false;
   activeStep.value = 0;
+  phoneChecked.value = false;
+  httpFirst.value = false;
+  httpSecond.value = false;
+  httpThird.value = false;
+  formData.value.inputSource = "";
   resetForm(ruleFormRef.value);
 };
 
 const nextStep = () => {
-  if (activeStep.value++ > 2) activeStep.value = 0;
+  if (activeStep.value == 1) {
+    activeStep.value--;
+  } else {
+    activeStep.value++;
+  }
 };
 
 const phoneChecked = ref(false);
 const httpFirst = ref(false);
 const httpSecond = ref(false);
 const httpThird = ref(false);
-const count = ref(3);
+const cardInfoData = ref([
+  {
+    typeId: 1,
+    isChecked: false
+  },
+  {
+    typeId: 2,
+    isChecked: false
+  },
+  {
+    typeId: 3,
+    isChecked: false
+  }
+]);
+
+const emit = defineEmits(["update:visible", "submit-form"]);
+function getMobileMsg() {
+  ruleFormRef.value.clearValidate();
+}
+
+function selectCard(cardInfo) {
+  cardInfoData.value.forEach(item => {
+    if (item.typeId == cardInfo.typeId) {
+      item.isChecked = cardInfo.isChecked;
+    } else {
+      item.isChecked = false;
+    }
+  });
+
+  console.log(cardInfo);
+}
 
-const emit = defineEmits(["update:visible"]);
 watch(
   () => formVisible.value,
   val => {
@@ -153,16 +203,17 @@ watch(
   val => {
     if (val == "newBuilt") {
       title.value = "新建应用算法";
-      customWidth.value = 580;
+      customWidth.value = 620;
+      formData.value = props.data;
     } else if (val == "history") {
       title.value = "历史推理";
       customWidth.value = 790;
     } else if (val == "alarm") {
-      title.value = "告警配置";
+      title.value = "告警设置";
       customWidth.value = 580;
     } else if (val == "algorithm") {
       title.value = "算法配置";
-      customWidth.value = 580;
+      customWidth.value = 620;
     }
     customType.value = val;
   }
@@ -183,7 +234,20 @@ watch(
 );
 
 const rules = {
-  name: [{ required: true, message: "请输入产品名称", trigger: "blur" }]
+  inputSource: [{ required: true, message: "请选择输入源", trigger: "blur" }],
+  platformWarn: [
+    { required: true, message: "请选择检测类型", trigger: "blur" }
+  ],
+  phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
+  httpAddressA: [
+    { required: true, message: "请输入HTTP调用地址", trigger: "blur" }
+  ],
+  httpAddressB: [
+    { required: true, message: "请输入HTTP调用地址", trigger: "blur" }
+  ],
+  httpAddressC: [
+    { required: true, message: "请输入HTTP调用地址", trigger: "blur" }
+  ]
 };
 </script>
 
@@ -211,16 +275,18 @@ const rules = {
       :rules="rules"
       label-position="top"
       label-width="160px"
-      v-if="
-        (activeStep == 0 && customType == 'newBuilt') ||
-        customType == 'algorithm'
-      "
     >
-      <el-row :gutter="30">
+      <el-row
+        :gutter="30"
+        v-if="
+          (activeStep == 0 && customType == 'newBuilt') ||
+          customType == 'algorithm'
+        "
+      >
         <re-col :value="18" :xs="24" :sm="24">
-          <el-form-item label="输入源" prop="name">
+          <el-form-item label="输入源" prop="inputSource">
             <el-select
-              v-model="formData.name"
+              v-model="formData.inputSource"
               placeholder="请选择输入源"
               :style="{ width: '100%' }"
             >
@@ -242,28 +308,120 @@ const rules = {
           />
         </re-col>
         <re-col :value="24" :xs="24" :sm="24">
-          <el-form-item label="选择算法">
-            <template v-for="i in count" :key="i">
-              <AlgorithmCard />
-            </template>
+          <el-form-item label="选择算法" class="font-bold">
+            <div class="algorithm-card-style">
+              <template v-for="item in cardInfoData" :key="item.typeId">
+                <AlgorithmCard :cardInfo="item" @select-card="selectCard" />
+              </template>
+            </div>
+          </el-form-item>
+        </re-col>
+      </el-row>
+      <el-row
+        :gutter="30"
+        v-if="
+          (activeStep == 1 && customType == 'newBuilt') || customType == 'alarm'
+        "
+      >
+        <re-col :value="24" :xs="24" :sm="24">
+          <el-form-item label="平台警告" prop="platformWarn">
+            <el-select
+              v-model="formData.platformWarn"
+              placeholder="请选择检测方向"
+              :style="{ width: '100%' }"
+            >
+              <el-option label="类型1" value="1" />
+              <el-option label="类型2" value="2" />
+            </el-select>
+          </el-form-item>
+        </re-col>
+
+        <re-col :value="24" :xs="24" :sm="24">
+          <el-form-item
+            label="短信通知"
+            :prop="phoneChecked ? 'phone' : 'empty'"
+            class="flex"
+          >
+            <el-input
+              v-model="formData.phone"
+              :style="{ width: '95%', 'margin-right': 'auto' }"
+              placeholder="请输入手机号"
+            />
+            <el-checkbox
+              v-model="phoneChecked"
+              fill="#1C0D82"
+              size="large"
+              @change="getMobileMsg"
+            />
+          </el-form-item>
+        </re-col>
+        <re-col :value="24" :xs="24" :sm="24">
+          <el-form-item
+            label="设备警告"
+            :prop="httpFirst ? 'httpAddressA' : 'empty'"
+            class="flex form-item-style mb-4"
+          >
+            <el-input
+              v-model="formData.httpAddressA"
+              :style="{ width: '95%', 'margin-right': 'auto' }"
+              placeholder="请输入HTTP调用地址"
+            />
+            <el-checkbox
+              v-model="httpFirst"
+              fill="#1C0D82"
+              size="large"
+              @change="getMobileMsg"
+            />
+          </el-form-item>
+          <el-form-item
+            :prop="httpSecond ? 'httpAddressB' : 'empty'"
+            class="flex form-item-style"
+          >
+            <el-input
+              v-model="formData.httpAddressB"
+              :style="{ width: '95%', 'margin-right': 'auto' }"
+              placeholder="请输入HTTP调用地址"
+            />
+            <el-checkbox
+              v-model="httpSecond"
+              fill="#1C0D82"
+              size="large"
+              @change="getMobileMsg"
+            />
+          </el-form-item>
+          <el-form-item
+            :prop="httpThird ? 'httpAddressC' : 'empty'"
+            class="flex form-item-style"
+          >
+            <el-input
+              v-model="formData.httpAddressC"
+              :style="{ width: '95%', 'margin-right': 'auto' }"
+              placeholder="请输入HTTP调用地址"
+            />
+            <el-checkbox
+              v-model="httpThird"
+              fill="#1C0D82"
+              size="large"
+              @change="getMobileMsg"
+            />
           </el-form-item>
         </re-col>
       </el-row>
     </el-form>
-    <el-form
+    <!-- <el-form
       ref="ruleFormRef"
       :model="formData"
       :rules="rules"
       label-position="top"
-      v-if="
+      v-show="
         (activeStep == 1 && customType == 'newBuilt') || customType == 'alarm'
       "
     >
       <el-row :gutter="30">
         <re-col :value="24" :xs="24" :sm="24">
-          <el-form-item label="平台警告" prop="name">
+          <el-form-item label="平台警告" prop="platformWarn">
             <el-select
-              v-model="formData.name"
+              v-model="formData.platformWarn"
               placeholder="请选择检测方向"
               :style="{ width: '100%' }"
             >
@@ -274,48 +432,78 @@ const rules = {
         </re-col>
 
         <re-col :value="24" :xs="24" :sm="24">
-          <el-form-item label="短信通知" prop="leader" class="flex">
+          <el-form-item
+            label="短信通知"
+            :prop="phoneChecked ? 'phone' : 'empty'"
+            class="flex"
+          >
             <el-input
-              v-model="formData.leader"
+              v-model="formData.phone"
               :style="{ width: '95%', 'margin-right': 'auto' }"
               placeholder="请输入手机号"
             />
-            <el-checkbox v-model="phoneChecked" fill="#1C0D82" size="large" />
+            <el-checkbox
+              v-model="phoneChecked"
+              fill="#1C0D82"
+              size="large"
+              @change="getMobileMsg"
+            />
           </el-form-item>
         </re-col>
         <re-col :value="24" :xs="24" :sm="24">
           <el-form-item
             label="设备警告"
-            prop="leader"
+            :prop="httpFirst ? 'httpAddress' : 'empty'"
             class="flex form-item-style"
           >
             <el-input
-              v-model="formData.leader"
+              v-model="formData.httpAddressA"
               :style="{ width: '95%', 'margin-right': 'auto' }"
               placeholder="请输入HTTP调用地址"
             />
-            <el-checkbox v-model="httpFirst" fill="#1C0D82" size="large" />
+            <el-checkbox
+              v-model="httpFirst"
+              fill="#1C0D82"
+              size="large"
+              @change="getMobileMsg"
+            />
           </el-form-item>
-          <el-form-item prop="leader" class="flex form-item-style">
+          <el-form-item
+            :prop="httpSecond ? 'httpAddress' : 'empty'"
+            class="flex form-item-style"
+          >
             <el-input
-              v-model="formData.leader"
+              v-model="formData.httpAddressB"
               :style="{ width: '95%', 'margin-right': 'auto' }"
               placeholder="请输入HTTP调用地址"
             />
-            <el-checkbox v-model="httpSecond" fill="#1C0D82" size="large" />
+            <el-checkbox
+              v-model="httpSecond"
+              fill="#1C0D82"
+              size="large"
+              @change="getMobileMsg"
+            />
           </el-form-item>
-          <el-form-item prop="leader" class="flex form-item-style">
+          <el-form-item
+            :prop="httpThird ? 'httpAddress' : 'empty'"
+            class="flex form-item-style"
+          >
             <el-input
-              v-model="formData.leader"
+              v-model="formData.httpAddressC"
               :style="{ width: '95%', 'margin-right': 'auto' }"
               placeholder="请输入HTTP调用地址"
             />
-            <el-checkbox v-model="httpThird" fill="#1C0D82" size="large" />
+            <el-checkbox
+              v-model="httpThird"
+              fill="#1C0D82"
+              size="large"
+              @change="getMobileMsg"
+            />
           </el-form-item>
         </re-col>
       </el-row>
-    </el-form>
-    <el-row v-if="customType == 'history'">
+    </el-form> -->
+    <el-row v-if="customType == 'history'" class="pb-6">
       <div class="w-full flex justify-end mb-4">
         <el-button type="primary" color="#1C0D82"> 批量导出 </el-button>
       </div>
@@ -334,7 +522,12 @@ const rules = {
           <el-table-column prop="address" label="缺陷检出" />
           <el-table-column prop="zip" label="导出">
             <template #default>
-              <el-button link type="primary" size="small">
+              <el-button
+                link
+                type="primary"
+                size="small"
+                style="font-size: 14px"
+              >
                 {{ "导出" }}
               </el-button>
             </template>
@@ -362,8 +555,8 @@ const rules = {
         <el-button
           @click="nextStep"
           class="btn-color"
-          v-if="customType == 'newBuilt' && activeStep < 1"
-          >下一步</el-button
+          v-if="customType == 'newBuilt'"
+          >{{ activeStep == 0 ? "下一步" : "上一步" }}</el-button
         >
         <el-button
           type="primary"
@@ -381,18 +574,37 @@ const rules = {
   border-radius: 8px;
 
   .el-dialog__header {
+    padding-top: 16px;
+    padding-bottom: 16px;
     margin-right: 0;
+    font-weight: 600;
     border-bottom: 1px solid #e0e0e0;
   }
 
+  .el-dialog__body {
+    padding-top: 24px;
+    padding-bottom: 0;
+  }
+
   .form-item-style {
-    margin-bottom: 10px;
+    margin-bottom: 18px;
   }
 
-  .btn-color:hover {
-    color: #fff;
-    background-color: #1c0d82;
-    opacity: 0.25;
+  // .btn-color:hover {
+  //   color: #fff;
+  //   background-color: #1c0d82;
+  //   opacity: 0.25;
+  // }
+  .el-form--label-top .el-form-item {
+    .el-form-item__label {
+      color: #333;
+    }
+
+    .algorithm-card-style {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+    }
   }
 }
 

src/views/project/details/components/ModelCard.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import BarDetail from "./BarDetail.vue";
 import Radar from "./Radar.vue";
-import AddFill from "@iconify-icons/ri/add-circle-line";
+import History from "@/assets/svg/history_icon.svg?component";
+import Algorithm from "@/assets/svg/algorithm_icon.svg?component";
+import Alarm from "@/assets/svg/alarm_icon.svg?component";
+import Model from "@/assets/svg/model_icon.svg?component";
 
 defineOptions({
   name: "ModelCard"
@@ -21,8 +23,9 @@ const props = defineProps({
     type: Object
   }
 });
-console.log(props);
-
+// console.log(props);
+const modelData = ref({ ...props.modelInfo });
+console.log(modelData);
 const loading = ref(true);
 const emit = defineEmits(["btn-type"]);
 const handleClickBtn = type => {
@@ -39,38 +42,42 @@ setTimeout(() => {
     <div class="list-item">
       <div class="list-item-header mb-[18px]">
         <span class="font-bold"
-          >{{ "苏胜天OCR文字识别模型" }}<i>v1.6.25</i>
+          >{{ modelData.modelName }}<i>{{ modelData.version }}</i>
         </span>
         <!-- <span>{{ "算力设备：" }}</span> -->
         <span>
           <el-button
             link
             type=""
-            :icon="useRenderIcon(AddFill)"
             text
+            style="color: #1c0d82"
             @click="handleClickBtn('history')"
+            ><el-icon :size="16" class="mr-2"><History /></el-icon
             >历史推理</el-button
           >
           <el-button
             v-if="false"
             link
-            :icon="useRenderIcon(AddFill)"
             text
+            style="color: #1c0d82"
             @click="handleClickBtn('model')"
+            ><el-icon :size="16" class="mr-2"><Model /></el-icon
             >模型测试</el-button
           >
           <el-button
             link
-            :icon="useRenderIcon(AddFill)"
             text
+            style="color: #1c0d82"
             @click="handleClickBtn('alarm')"
+            ><el-icon :size="16" class="mr-2"><Alarm /></el-icon
             >告警设置</el-button
           >
           <el-button
             link
-            :icon="useRenderIcon(AddFill)"
             text
+            style="color: #1c0d82"
             @click="handleClickBtn('algorithm')"
+            ><el-icon :size="16" class="mr-2"><Algorithm /></el-icon
             >算法配置</el-button
           >
         </span>
@@ -79,64 +86,40 @@ setTimeout(() => {
         <div class="list-item-content-box">
           <el-skeleton animated :loading="loading">
             <template #default>
-              <BarDetail style="width: 100%; height: 240px" />
+              <BarDetail
+                :barInfo="modelData.barData"
+                style="width: 100%; height: 240px"
+              />
             </template>
           </el-skeleton>
         </div>
         <div class="list-item-content-box">
           <el-skeleton animated :loading="loading">
             <template #default>
-              <Radar style="width: 100%; height: 240px" />
+              <Radar
+                :radarInfo="modelData.radarData"
+                style="width: 100%; height: 240px"
+              />
             </template>
           </el-skeleton>
         </div>
         <div class="list-item-content-box-pic">
           <el-skeleton animated :loading="loading">
             <template #default>
-              <el-image
-                preview-teleported
-                loading="lazy"
-                src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
-                :preview-src-list="[
-                  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
-                ]"
-                :initial-index="1"
-                fit="cover"
-                class="list-item-image"
-              />
-              <el-image
-                preview-teleported
-                loading="lazy"
-                src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
-                :preview-src-list="[
-                  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
-                ]"
-                :initial-index="1"
-                fit="cover"
-                class="list-item-image"
-              />
-              <el-image
-                preview-teleported
-                loading="lazy"
-                src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
-                :preview-src-list="[
-                  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
-                ]"
-                :initial-index="1"
-                fit="cover"
-                class="list-item-image"
-              />
-              <el-image
-                preview-teleported
-                loading="lazy"
-                src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
-                :preview-src-list="[
-                  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
-                ]"
-                :initial-index="1"
-                fit="cover"
-                class="list-item-image"
-              />
+              <template
+                v-for="(item, index) in modelData.imageData"
+                :key="index"
+              >
+                <el-image
+                  preview-teleported
+                  loading="lazy"
+                  :src="item"
+                  :preview-src-list="[item]"
+                  :initial-index="1"
+                  fit="cover"
+                  class="list-item-image"
+                />
+              </template>
             </template>
           </el-skeleton>
           <!-- <div class="list-item-content-box-top"> -->
@@ -283,7 +266,7 @@ setTimeout(() => {
   display: flex;
   flex-direction: column;
   // height: 300px;
-  padding: 10px;
+  padding: 10px 0;
   margin-bottom: 10px;
   // background: #fafafa;
 }
@@ -400,6 +383,7 @@ setTimeout(() => {
   height: 260px;
   padding: 16px;
   background: #f2f6ff;
+  border-radius: 4px;
 }
 
 .list-item .list-item-content .list-item-content-box:nth-of-type(2) {

src/views/project/details/components/Pie.vue

@@ -30,7 +30,11 @@ setOptions(
       }
     },
     tooltip: {
-      trigger: "item"
+      trigger: "item",
+      formatter: function (params) {
+        // 图例值格式化
+        return `${params.value}%`;
+      }
     },
     legend: {
       icon: "rect",
@@ -58,9 +62,14 @@ setOptions(
           borderWidth: 1
         },
         data: [
-          { value: 1600, name: "已占用" },
-          { value: 400, name: "未占用" }
-        ]
+          { value: 80, name: "已占用" },
+          { value: 20, name: "未占用" }
+        ],
+        label: {
+          formatter: function (params) {
+            return params.value + "%";
+          }
+        }
         // emphasis: {
         //   itemStyle: {
         //     shadowBlur: 10,

src/views/project/details/components/Radar.vue

@@ -23,12 +23,22 @@ const { setOptions, resize } = useECharts(
   }
 );
 const dataMax = ref([
-  { name: "类型A", max: 15 },
-  { name: "类型B", max: 15 },
-  { name: "类型C", max: 15 },
-  { name: "类型D", max: 15 },
-  { name: "类型E", max: 15 }
+  { name: "类型A", max: 15, color: "#333" },
+  { name: "类型B", max: 15, color: "#333" },
+  { name: "类型C", max: 15, color: "#333" },
+  { name: "类型D", max: 15, color: "#333" },
+  { name: "类型E", max: 15, color: "#333" }
 ]);
+
+const props = defineProps({
+  radarInfo: {
+    type: Array
+  }
+});
+
+const radarData = ref([...props.radarInfo]);
+console.log(radarData);
+
 setOptions(
   {
     title: {
@@ -94,16 +104,7 @@ setOptions(
         },
         symbolSize: 4, //圆点大小
         symbol: "circle", //圆点样式
-        data: [
-          {
-            name: "类型A",
-            value: [5, 6, 7, 8, 9]
-          },
-          {
-            name: "类型B",
-            value: [9, 8, 7, 6, 5]
-          }
-        ]
+        data: radarData.value
       }
     ]
   },

src/views/project/details/components/algorithmCard.vue

@@ -4,23 +4,28 @@ import { ref } from "vue";
 // import BarDetail from "./BarDetail.vue";
 // import Radar from "./Radar.vue";
 // import AddFill from "@iconify-icons/ri/add-circle-line";
-import logon from "@/assets/static/logo_icon.png";
+import logon from "@/assets/svg/logo_icon.svg?component";
 
 defineOptions({
   name: "AlgorithmCard"
 });
 
 const props = defineProps({
-  modelInfo: {
-    type: Object
+  cardInfo: {
+    type: Object,
+    default: () => {
+      return {};
+    }
   }
 });
 console.log(props);
 
 const loading = ref(true);
-const checked = ref(false);
+const cardInfoData = ref(props.cardInfo);
+const emit = defineEmits(["select-card"]);
 function selectCard() {
-  checked.value = !checked.value;
+  cardInfoData.value.isChecked = !cardInfoData.value.isChecked;
+  emit("select-card", cardInfoData.value);
 }
 setTimeout(() => {
   loading.value = !loading.value;
@@ -30,13 +35,15 @@ setTimeout(() => {
 <template>
   <div>
     <div
-      :class="checked ? 'algorithm-card-select' : 'algorithm-card'"
+      :class="
+        cardInfoData.isChecked ? 'algorithm-card-select' : 'algorithm-card'
+      "
       @click="selectCard"
     >
       <div class="algorithm-card-header">
-        <img :src="logon" />
+        <logon />
         <el-checkbox
-          v-model="checked"
+          v-model="cardInfoData.isChecked"
           @change="selectCard"
           fill="#1C0D82"
           size="large"
@@ -68,13 +75,13 @@ setTimeout(() => {
 <style lang="scss">
 .algorithm-card,
 .algorithm-card-select {
+  box-sizing: border-box;
   // display: flex;
   // flex-wrap: wrap;
-  // justify-content: space-between;
-  box-sizing: border-box;
-  width: 250px;
+  justify-content: space-between;
+  width: 280px;
   height: 160px;
-  padding: 10px;
+  padding: 12px 16px;
   margin-bottom: 10px;
   cursor: pointer;
   border: 1px solid #e0e0e0;
@@ -85,6 +92,11 @@ setTimeout(() => {
     flex: 1;
     align-items: center;
     justify-content: space-between;
+    margin-bottom: 10px;
+
+    .el-checkbox.el-checkbox--large {
+      height: auto;
+    }
 
     .el-checkbox__inner {
       border-radius: 50%;
@@ -96,6 +108,7 @@ setTimeout(() => {
       display: flex;
       align-items: center;
       height: 28px;
+      margin-bottom: 4px;
 
       .algorithm-card-content-title-left {
         height: 24px;
@@ -118,12 +131,12 @@ setTimeout(() => {
         line-height: 24px;
         color: #fff;
         text-align: center;
-        background: #67c23a;
+        background: #44aef5;
         border-radius: 2px;
       }
 
       .deep-learn {
-        background: #f56c6c;
+        background: #f75f19;
       }
     }
   }
@@ -131,7 +144,7 @@ setTimeout(() => {
   .algorithm-card-content-version {
     height: 24px;
     // font-family: "PingFang SC";
-    font-size: 12px;
+    font-size: 14px;
     font-weight: 400;
     line-height: 24px;
     color: #666;
@@ -139,7 +152,7 @@ setTimeout(() => {
 
   .algorithm-card-content-update {
     height: 24px;
-    font-size: 12px;
+    font-size: 14px;
     font-weight: 400;
     line-height: 24px;
     color: #666;
@@ -149,9 +162,9 @@ setTimeout(() => {
     }
   }
 
-  &:nth-of-type(odd) {
-    margin-right: 15px;
-  }
+  // &:nth-of-type(odd) {
+  //   margin-right: 15px;
+  // }
 }
 
 .algorithm-card-select {

src/views/project/details/index.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import dialogForm from "./components/DialogForm.vue";
 import { isEmpty } from "@pureadmin/utils";
-import { ref, onMounted, computed } from "vue";
+import { ref, onMounted, computed, nextTick, reactive } from "vue";
 import { useWindowSize } from "@vueuse/core";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 // import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import ModelCard from "./components/ModelCard.vue";
 import Bar from "./components/Bar.vue";
@@ -14,17 +14,21 @@ import emptyPic from "@/assets/static/project_empty.png";
 defineOptions({
   name: "ProjectDetails"
 });
+const router = useRouter();
 const route = useRoute();
 const getParameter = isEmpty(route.params) ? route.query : route.params;
 console.log(getParameter);
+const projectInfo = ref({ ...getParameter });
 const INITIAL_DATA = {
   name: "",
-  status: "",
-  description: "",
   type: "",
-  mark: "",
   leader: "",
-  phone: ""
+  phone: "",
+  inputSource: "",
+  platformWarn: "",
+  httpAddressA: "",
+  httpAddressB: "",
+  httpAddressC: ""
 };
 const formDialogVisible = ref(false);
 const formData = ref({ ...INITIAL_DATA });
@@ -34,16 +38,130 @@ const echartsLoading = ref(true);
 const loading = ref(false);
 const noMore = computed(() => count.value >= 5);
 const disabled = computed(() => loading.value || noMore.value);
-const load = () => {
+const load = type => {
   loading.value = true;
-  setTimeout(() => {
-    count.value += 2;
-    loading.value = false;
-  }, 2000);
+  if (type == "add") {
+    nextTick(() => {
+      setTimeout(() => {
+        modelCardData.unshift({
+          typeId: 3,
+          modelName: "苏胜天文字OCR识别模型new",
+          version: "v1.6.3",
+          barData: {
+            barList: [3620, 7500, 1450, 3620, 7500],
+            lineList: [160, 246, 450, 160, 246]
+          },
+          radarData: [
+            {
+              name: "类型A",
+              value: [5, 6, 7, 8, 9]
+            },
+            {
+              name: "类型B",
+              value: [9, 8, 7, 6, 5]
+            }
+          ],
+          imageData: [
+            "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
+            "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
+            "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
+            "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
+          ]
+        });
+        loading.value = false;
+      }, 1000);
+    });
+  } else {
+    if (modelCardData.length > 5) {
+      return (loading.value = false);
+    } else {
+      return (loading.value = false);
+      // setTimeout(() => {
+      //   modelCardData.value.push({
+      //     modelName: "苏胜天文字OCR识别模型3",
+      //     version: "v1.6.3",
+      //     barData: {
+      //       barList: [3620, 7500, 1450, 3620, 7500],
+      //       lineList: [160, 246, 450, 160, 246]
+      //     },
+      //     radarData: [
+      //       {
+      //         name: "类型A",
+      //         value: [5, 6, 7, 8, 9]
+      //       },
+      //       {
+      //         name: "类型B",
+      //         value: [9, 8, 7, 6, 5]
+      //       }
+      //     ],
+      //     imageData: [
+      //       "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
+      //       "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
+      //       "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
+      //       "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
+      //     ]
+      //   });
+      //   loading.value = false;
+      // }, 2000);
+    }
+  }
 };
 setTimeout(() => {
   echartsLoading.value = !echartsLoading.value;
 }, 800);
+const modelCardData = reactive([
+  {
+    typeId: 1,
+    modelName: "苏胜天文字OCR识别模型",
+    version: "v1.6.25",
+    barData: {
+      barList: [3620, 7500, 1450, 3620, 7500],
+      lineList: [160, 246, 450, 160, 246]
+    },
+    radarData: [
+      {
+        name: "类型C",
+        value: [5, 6, 7, 8, 9]
+      },
+      {
+        name: "类型D",
+        value: [9, 8, 7, 6, 5]
+      }
+    ],
+    imageData: [
+      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
+      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
+      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
+      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
+    ]
+  },
+  {
+    typeId: 2,
+    modelName: "苏胜天文字OCR识别模型2",
+    version: "v1.6.0",
+    barData: {
+      barList: [7500, 3620, 1450, 7500, 3620],
+      lineList: [160, 160, 450, 246, 246]
+    },
+    radarData: [
+      {
+        name: "类型E",
+        value: [6, 9, 7, 3, 5]
+      },
+      {
+        name: "类型F",
+        value: [7, 3, 4, 6, 9]
+      }
+    ],
+    imageData: [
+      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
+      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
+      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
+      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
+    ]
+  }
+]);
+
 const customType = ref("");
 function openDialog(type) {
   console.log(type);
@@ -51,6 +169,40 @@ function openDialog(type) {
   formDialogVisible.value = true;
 }
 
+function addCardInfo(info) {
+  console.log(info);
+  if (info.inputSource) {
+    load("add");
+    // nextTick(() => {
+    //   modelCardData.push({
+    //     modelName: "苏胜天文字OCR识别模型3",
+    //     version: "v1.6.3",
+    //     barData: {
+    //       barList: [3620, 7500, 1450, 3620, 7500],
+    //       lineList: [160, 246, 450, 160, 246]
+    //     },
+    //     radarData: [
+    //       {
+    //         name: "类型A",
+    //         value: [5, 6, 7, 8, 9]
+    //       },
+    //       {
+    //         name: "类型B",
+    //         value: [9, 8, 7, 6, 5]
+    //       }
+    //     ],
+    //     imageData: [
+    //       "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
+    //       "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
+    //       "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
+    //       "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
+    //     ]
+    //   });
+    //   // loading.value = false;
+    // });
+  }
+}
+
 onMounted(() => {
   // formDialogVisible.value = true;
 });
@@ -59,7 +211,12 @@ onMounted(() => {
 <template>
   <div class="main">
     <div class="w-full flex justify-between mb-4">
-      <el-button :icon="Back" key="项目详情" text class="btn-style"
+      <el-button
+        :icon="Back"
+        key="项目详情"
+        text
+        class="btn-style"
+        @click="router.push('/project/list')"
         >项目详情</el-button
       >
     </div>
@@ -71,10 +228,10 @@ onMounted(() => {
               <span class="font-bold">项目信息</span>
             </div>
           </template>
-          <div class="flex justify-stretch">
-            <span class="mr-4">项目名称：{{ "文字识别" }}</span>
-            <span class="mr-4">负责人：{{ "识别线主管" }}</span>
-            <span class="mr-4">联系方式：{{ "13811111111" }}</span>
+          <div class="flex justify-stretch mb-4">
+            <span class="mr-4">项目名称：{{ projectInfo.name }}</span>
+            <span class="mr-4">负责人：{{ projectInfo.leader }}</span>
+            <span class="mr-4">联系方式：{{ projectInfo.phone }}</span>
           </div>
           <div class="project-info">
             <div class="project-info-box">
@@ -97,10 +254,10 @@ onMounted(() => {
       <el-col :value="24" :xs="24" :sm="24">
         <el-card
           shadow="never"
-          :style="{ height: `calc(${height}px - 35vh - 100px)` }"
+          :style="{ height: `calc(${height}px - 35vh - 110px)` }"
         >
           <template #header>
-            <div class="flex justify-between">
+            <div class="flex justify-between" style="align-items: center">
               <span class="font-bold">算法应用</span>
               <el-button
                 type="primary"
@@ -113,7 +270,7 @@ onMounted(() => {
           <el-empty
             description="暂未添加任何项目"
             :image="emptyPic"
-            v-show="count < 1"
+            v-show="modelCardData.length < 1"
           >
             <el-button
               type="primary"
@@ -125,19 +282,19 @@ onMounted(() => {
           </el-empty>
           <el-scrollbar
             class="infinite-list-wrapper"
-            :height="`calc(${height}px - 35vh - 200px)`"
+            :height="`calc(${height}px - 35vh - 220px)`"
           >
             <div
               v-infinite-scroll="load"
               class="list"
               :infinite-scroll-disabled="disabled"
             >
-              <template v-for="i in count" :key="i">
-                <ModelCard :modelInfo="INITIAL_DATA" @btn-type="openDialog" />
+              <template v-for="item in modelCardData" :key="item.typeId">
+                <ModelCard :modelInfo="item" @btn-type="openDialog" />
               </template>
             </div>
             <p v-if="loading">Loading...</p>
-            <p v-if="noMore">No more</p>
+            <!-- <p v-if="noMore">No more</p> -->
           </el-scrollbar>
         </el-card>
       </el-col>
@@ -146,6 +303,7 @@ onMounted(() => {
       v-model:visible="formDialogVisible"
       :data="formData"
       :type="customType"
+      @submit-form="addCardInfo"
     />
   </div>
 </template>
@@ -157,8 +315,9 @@ onMounted(() => {
 
 .btn-style {
   // font-family: "PingFang SC";
+  padding-left: 0;
   font-size: 20px;
-  font-weight: 400;
+  font-weight: 600;
   color: #333;
 
   &:hover {

src/views/project/list/components/Card.vue

@@ -84,13 +84,13 @@ const cardLogoClass = computed(() => [
           </div>
         </el-row>
         <p class="list-card-item_detail--desc">
-          项目负责人：{{ product.leader }}
+          项目负责人：<span>{{ product.leader }}</span>
         </p>
         <p class="list-card-item_detail--desc text-text_color_regular">
-          联系方式：{{ product.phone }}
+          联系方式：<span>{{ product.phone }}</span>
         </p>
         <p class="list-card-item_detail--desc text-text_color_regular">
-          模型应用数：{{ product.modelNum }}
+          模型应用数：<span>{{ product.modelNum }}</span>
         </p>
       </div>
     </div>
@@ -138,7 +138,7 @@ const cardLogoClass = computed(() => [
     &--name {
       margin-bottom: 8px;
       font-size: 16px;
-      font-weight: 400;
+      font-weight: 600;
       // font-family: "PingFang SC";
       color: #333;
     }
@@ -151,6 +151,10 @@ const cardLogoClass = computed(() => [
       line-height: 22px;
       // font-family: "Roboto";
       color: #666;
+
+      span {
+        color: #333;
+      }
     }
   }
 

src/views/project/list/components/DialogForm.vue

@@ -85,7 +85,7 @@ const rules = {
 <template>
   <el-dialog
     v-model="formVisible"
-    title="新建项目"
+    :title="formData.name ? '编辑项目' : '新建项目'"
     :width="560"
     class="project-dialog"
     append-to-body
@@ -166,7 +166,9 @@ const rules = {
 // }
 .project-dialog {
   .el-dialog__header {
+    padding: 16px 20px;
     margin-right: 0;
+    font-weight: 600;
     border-bottom: 1px solid #e0e0e0;
   }
 
@@ -174,10 +176,10 @@ const rules = {
     padding: 30px 24px;
   }
 
-  .btn-color:hover {
-    color: #fff;
-    background-color: #1c0d82;
-    opacity: 0.25;
-  }
+  // .btn-color:hover {
+  //   color: #fff;
+  //   background-color: #1c0d82;
+  //   opacity: 0.25;
+  // }
 }
 </style>

src/views/project/list/index.vue

@@ -36,7 +36,8 @@ const INITIAL_DATA = {
   type: "",
   mark: "",
   leader: "",
-  phone: ""
+  phone: "",
+  modelNum: ""
 };
 
 const pagination = ref({ current: 1, pageSize: 12, total: 0 });
@@ -148,7 +149,7 @@ const addProject = product => {
 <template>
   <div class="main">
     <div class="w-full flex justify-between mb-4">
-      <h2>项目列表</h2>
+      <h2 class="text-xl">项目列表</h2>
       <el-button
         type="primary"
         color="#1C0D82"
@@ -181,6 +182,7 @@ const addProject = product => {
     >
       <el-card
         class="box-card"
+        shadow="never"
         :body-style="{
           height: '462px',
           display: 'flex',
@@ -264,12 +266,12 @@ const addProject = product => {
 .msg-box-style {
   // --el-messagebox-width: 580px;
   // height: 184px;
-  .btn-custom-cancel:hover {
-    color: #fff;
-    // color: skyblue;
-    background-color: #1c0d82;
-    opacity: 0.5;
-  }
+  // .btn-custom-cancel:hover {
+  //   color: #fff;
+  //   // color: skyblue;
+  //   background-color: #1c0d82;
+  //   opacity: 0.5;
+  // }
 
   .btn-custom-confirm {
     color: #fff;

src/views/screen/components/Header.vue

@@ -10,7 +10,7 @@ const props = defineProps({
 });
 const router = useRouter();
 function goBack() {
-  router.push("/project/list/index");
+  router.push("/project/list");
 }
 </script>
 

src/views/screen/components/LongBoxGroup.vue

@@ -1,4 +1,6 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import headerLine from "@/assets/screen/header_line.png";
+</script>
 
 <template>
   <div class="box_container">
@@ -17,22 +19,22 @@
           <div class="header_title">{{ name }}</div>
           <div class="header_addon">
             <div class="line">
-              <img src="src/assets/screen/header_line.png" alt="" />
+              <img :src="headerLine" alt="" />
             </div>
             <div class="line">
-              <img src="src/assets/screen/header_line.png" alt="" />
+              <img :src="headerLine" alt="" />
             </div>
             <div class="line">
-              <img src="src/assets/screen/header_line.png" alt="" />
+              <img :src="headerLine" alt="" />
             </div>
             <div class="line">
-              <img src="src/assets/screen/header_line.png" alt="" />
+              <img :src="headerLine" alt="" />
             </div>
             <div class="line">
-              <img src="src/assets/screen/header_line.png" alt="" />
+              <img :src="headerLine" alt="" />
             </div>
             <div class="line">
-              <img src="src/assets/screen/header_line.png" alt="" />
+              <img :src="headerLine" alt="" />
             </div>
           </div>
         </div>

src/views/screen/components/VueChart.vue

@@ -21,9 +21,13 @@ function clear() {
 }
 
 function draw() {
-  clear();
-  chart = echarts.init(elChart.value);
-  chart.setOption(props.option);
+  if (chart) {
+    chart.setOption(props.option);
+  } else {
+    clear();
+    chart = echarts.init(elChart.value);
+    chart.setOption(props.option);
+  }
 }
 
 onMounted(draw);

src/views/screen/components/charts/BarChart2.vue

@@ -21,26 +21,26 @@ const props = defineProps({
     default: () => []
   },
   data: {
-    type: Array,
-    default: () => []
+    type: Object,
+    default: () => {}
   }
 });
-
 const name_list = computed(() => {
-  return props.data.map((item: any) => {
+  return props.data.nameList.map((item: any) => {
     return item.name;
   });
 });
 
-const value_list = computed(() => {
-  return props.data.map((item: any) => {
-    return item.value;
-  });
-});
+// const value_list = computed(() => {
+//   return props.data.map((item: any) => {
+//     return item.value;
+//   });
+// });
 
 const value_100_minus_list = computed(() => {
-  return props.data.map((item: any) => {
-    return parseInt(100 - parseInt(item.value));
+  return props.data.valueList.map((item: any) => {
+    // return parseInt(100 - parseInt(item.value));
+    return parseInt(parseInt(item.value));
   });
 });
 
@@ -51,13 +51,14 @@ const chartOption = computed(() => {
     },
     legend: {
       bottom: 0,
-      data: ["总量", "占用"],
+      show: false,
+      data: ["占用"],
       textStyle: {
         color: "rgba(255, 255, 255, 0.40)"
       }
     },
     grid: {
-      top: "30px",
+      top: "50px",
       left: "50px",
       bottom: "50px",
       right: "10px"
@@ -77,18 +78,23 @@ const chartOption = computed(() => {
         show: true,
         interval: "auto",
         formatter: "{value} %"
-      }
+      },
+      animationDuration: 300,
+      animationDurationUpdate: 300,
+      animationEasing: "linear",
+      animationEasingUpdate: "linear"
     },
     series: [
+      // {
+      //   data: value_list.value,
+      //   type: "bar",
+      //   stack: "use",
+      //   color: "#5BF6EF",
+      //   name: "总量",
+      //   barWidth: "24px"
+      // },
       {
-        data: value_list.value,
-        type: "bar",
-        stack: "use",
-        color: "#5BF6EF",
-        name: "总量",
-        barWidth: "24px"
-      },
-      {
+        // realtimeSort: true,
         data: value_100_minus_list.value,
         type: "bar",
         stack: "use",
@@ -97,6 +103,10 @@ const chartOption = computed(() => {
         barWidth: "24px"
       }
     ]
+    // animationDuration: 3000,
+    // animationDurationUpdate: 3000,
+    // animationEasing: "linear",
+    // animationEasingUpdate: "linear"
   };
 });
 </script>

src/views/screen/components/charts/LineChart1.vue

@@ -43,7 +43,7 @@ const chartOption = computed(() => {
       type: "category",
       data: name_list.value,
       axisLabel: {
-        color: "rgba(255, 255, 255, 0.80)"
+        color: "rgba(255, 255, 255, 0.40)"
       }
     },
     yAxis: [
@@ -65,14 +65,14 @@ const chartOption = computed(() => {
         axisLabel: {
           show: true,
           formatter: "{value}", //右侧Y轴文字显示
-          color: "rgba(255, 255, 255, 0.80)"
+          color: "rgba(255, 255, 255, 0.40)"
         }
       }
     ],
     grid: {
       top: "30px",
       left: "40px",
-      bottom: "20px",
+      bottom: "30px",
       right: "10px"
     },
     series: [
@@ -81,7 +81,7 @@ const chartOption = computed(() => {
         type: "line",
         smooth: true,
         symbol: "circle", //标记的图形为实心圆
-        symbolSize: 15, //标记的大小
+        symbolSize: 6, //标记的大小
         itemStyle: {
           //折线拐点标志的样式
           color: "#1FC6FF"

src/views/screen/components/charts/LineChart2.vue

@@ -44,7 +44,7 @@ const chartOption = computed(() => {
       type: "category",
       data: name_list.value,
       axisLabel: {
-        color: "rgba(255, 255, 255, 0.60)"
+        color: "rgba(255, 255, 255, 0.40)"
       }
     },
     yAxis: [
@@ -73,7 +73,7 @@ const chartOption = computed(() => {
     grid: {
       top: "30px",
       left: "40px",
-      bottom: "20px",
+      bottom: "30px",
       right: "10px"
     },
     series: [
@@ -82,7 +82,7 @@ const chartOption = computed(() => {
         type: "line",
         smooth: true,
         symbol: "circle", //标记的图形为实心圆
-        symbolSize: 15, //标记的大小
+        symbolSize: 6, //标记的大小
         itemStyle: {
           //折线拐点标志的样式
           color: "#1FC6FF"

src/views/screen/components/charts/Pie1.vue

@@ -74,18 +74,25 @@ const chartOption = computed(() => {
         label: {
           color: "rgba(255, 255, 255, 0.80)",
           formatter: function (params) {
+            console.log(params);
             return params.name + "{hr|" + params.value + "}";
           },
           rich: {
             hr: {
               align: "center",
               color: "inherit",
+              fontWeight: "bold",
               fontSize: 14
             }
           }
         },
         labelLine: {
-          show: true
+          show: true,
+          length: 20,
+          length2: 20,
+          lineStyle: {
+            color: "#fff" // 设置标示线的颜色
+          }
         },
         data: props.data
       },

src/views/screen/components/charts/Pie3D.vue

@@ -3,7 +3,7 @@
     style="display: flex; justify-content: center; width: 100%; height: 278px"
   >
     <div style="position: relative; width: 100%; height: 100%">
-      <img class="pie_img" src="src/assets/screen/pie_bg.png" alt="" />
+      <img class="pie_img" :src="pieBg" alt="" />
       <vue-chart
         :option="chartOption"
         style="position: absolute; width: 100%; height: 100%"
@@ -16,6 +16,7 @@ import VueChart from "../../components/VueChart.vue";
 // import * as echarts from "echarts";
 import "echarts-gl";
 import { computed } from "vue";
+import pieBg from "@/assets/screen/pie_bg.png";
 
 const props = defineProps({
   data: {
@@ -146,7 +147,8 @@ function getPie3D(pieData, internalDiameterRatio) {
         selected: false,
         hovered: false,
         k
-      }
+      },
+      itemStyle: {}
     };
 
     if (typeof pieData[i].itemStyle !== "undefined") {
@@ -196,7 +198,7 @@ function getPie3D(pieData, internalDiameterRatio) {
       color: "#fff",
       fontWeight: 500,
       formatter: function (params) {
-        return params.name + " " + "{hr|" + params.value + "}";
+        return params.name + " " + "{hr|" + params.value + "}" + "%";
       },
       rich: {
         hr: {
@@ -249,7 +251,7 @@ function getPie3D(pieData, internalDiameterRatio) {
             params.color
           };"></span>${option.series[params.seriesIndex].pieData?.value || ""}`;
         }
-        return "";
+        return "{value} %";
       }
     },
     xAxis3D: {

src/views/screen/index.vue

@@ -48,26 +48,30 @@ const randomIntFn = (min: number, max: number) => {
   return Math.floor(Math.random() * (max - min + 1) + min);
 };
 
-const randomFloatFn = (min: number, max: number) => {
-  return (Math.random() * (max - min + 1) + min).toFixed(2);
+// const randomFloatFn = (min: number, max: number) => {
+//   return (Math.random() * (max - min + 1) + min).toFixed(2);
+// };
+
+const randomRangeFn = (min: number, max: number) => {
+  return parseInt(Math.random() * (max - min) + min).toFixed(2);
 };
 
 setInterval(() => {
   //card1
-  setTimeout(() => {
-    state.data.card1.data[0].value = randomIntFn(0, 1000);
-    state.data.card1.data[1].value = randomIntFn(0, 1000);
-  }, 100);
+  // setTimeout(() => {
+  //   state.data.card1.data[0].value = randomIntFn(0, 1000);
+  //   state.data.card1.data[1].value = randomIntFn(0, 1000);
+  // }, 100);
   //card2
-  setTimeout(() => {
-    state.data.card2.data[0].value = randomIntFn(0, 1000);
-    state.data.card2.data[1].value = randomIntFn(0, 1000);
-    state.data.card2.data[2].value = randomIntFn(0, 1000);
-    state.data.card2.data[3].value = randomIntFn(0, 1000);
-    state.data.card2.data[4].value = randomIntFn(0, 1000);
-    state.data.card2.data[5].value = randomIntFn(0, 1000);
-    state.data.card2.data[6].value = randomIntFn(0, 1000);
-  }, 200);
+  // setTimeout(() => {
+  //   state.data.card2.data[0].value = randomIntFn(0, 1000);
+  //   state.data.card2.data[1].value = randomIntFn(0, 1000);
+  //   state.data.card2.data[2].value = randomIntFn(0, 1000);
+  //   state.data.card2.data[3].value = randomIntFn(0, 1000);
+  //   state.data.card2.data[4].value = randomIntFn(0, 1000);
+  //   state.data.card2.data[5].value = randomIntFn(0, 1000);
+  //   state.data.card2.data[6].value = randomIntFn(0, 1000);
+  // }, 200);
 
   //card3
   setTimeout(() => {
@@ -106,62 +110,101 @@ setInterval(() => {
   }, 500);
 
   //card7
-  setTimeout(() => {
-    state.data.card7.data[0].value = randomIntFn(0, 500);
-    state.data.card7.data[1].value = randomIntFn(0, 500);
-  }, 600);
+  // setTimeout(() => {
+  //   state.data.card7.data[0].value = randomIntFn(0, 500);
+  //   state.data.card7.data[1].value = randomIntFn(0, 500);
+  // }, 600);
 
   //card8
   setTimeout(() => {
-    state.data.card8.data.cpu_used = randomFloatFn(0, 100);
-    state.data.card8.data.memory_used = randomFloatFn(0, 100);
-    state.data.card8.data.disk_used = randomFloatFn(0, 100);
-    state.data.card8.data.image_server_used = randomFloatFn(0, 100);
+    // state.data.card8.data.cpu_used = randomFloatFn(0, 100);
+    // state.data.card8.data.memory_used = randomFloatFn(0, 100);
+    state.data.card8.data.cpu_used = randomRangeFn(90, 100);
+    state.data.card8.data.memory_used = randomRangeFn(90, 100);
+    // state.data.card8.data.disk_used = randomFloatFn(0, 100);
+    // state.data.card8.data.image_server_used = randomFloatFn(0, 100);
   }, 700);
 
   //card9
-  setTimeout(() => {
-    state.data.card9.data[0].value = randomIntFn(0, 100);
-    state.data.card9.data[1].value = randomIntFn(0, 100);
-    state.data.card9.data[2].value = randomIntFn(0, 100);
-    state.data.card9.data[3].value = randomIntFn(0, 100);
-    state.data.card9.data[4].value = randomIntFn(0, 100);
-    state.data.card9.data[5].value = randomIntFn(0, 100);
-    state.data.card9.data[6].value = randomIntFn(0, 100);
-    state.data.card9.data[7].value = randomIntFn(0, 100);
-    state.data.card9.data[8].value = randomIntFn(0, 100);
-    state.data.card9.data[9].value = randomIntFn(0, 100);
-    state.data.card9.data[10].value = randomIntFn(0, 100);
-    state.data.card9.data[11].value = randomIntFn(0, 100);
-  }, 800);
+  // setTimeout(() => {
+  //   state.data.card9.data[0].value = randomIntFn(0, 100);
+  //   state.data.card9.data[1].value = randomIntFn(0, 100);
+  //   state.data.card9.data[2].value = randomIntFn(0, 100);
+  //   state.data.card9.data[3].value = randomIntFn(0, 100);
+  //   state.data.card9.data[4].value = randomIntFn(0, 100);
+  //   state.data.card9.data[5].value = randomIntFn(0, 100);
+  //   state.data.card9.data[6].value = randomIntFn(0, 100);
+  //   state.data.card9.data[7].value = randomIntFn(0, 100);
+  //   state.data.card9.data[8].value = randomIntFn(0, 100);
+  //   state.data.card9.data[9].value = randomIntFn(0, 100);
+  //   state.data.card9.data[10].value = randomIntFn(0, 100);
+  //   state.data.card9.data[11].value = randomIntFn(0, 100);
+  // }, 800);
 
   //card10
   setTimeout(() => {
-    state.data.card10.cloud_cpu_used_top5[0].value = randomFloatFn(0, 100);
-    state.data.card10.cloud_cpu_used_top5[1].value = randomFloatFn(0, 100);
-    state.data.card10.cloud_cpu_used_top5[2].value = randomFloatFn(0, 100);
-    state.data.card10.cloud_cpu_used_top5[3].value = randomFloatFn(0, 100);
-    state.data.card10.cloud_cpu_used_top5[4].value = randomFloatFn(0, 100);
+    state.data.card10.cloud_cpu_used_top5[0].value = randomRangeFn(95, 100);
+    state.data.card10.cloud_cpu_used_top5[1].value = randomRangeFn(90, 94);
+    state.data.card10.cloud_cpu_used_top5[2].value = randomRangeFn(85, 89);
+    state.data.card10.cloud_cpu_used_top5[3].value = randomRangeFn(80, 84);
+    state.data.card10.cloud_cpu_used_top5[4].value = randomRangeFn(75, 79);
 
-    state.data.card10.cloud_memory_used_top5[0].value = randomFloatFn(0, 100);
-    state.data.card10.cloud_memory_used_top5[1].value = randomFloatFn(0, 100);
-    state.data.card10.cloud_memory_used_top5[2].value = randomFloatFn(0, 100);
-    state.data.card10.cloud_memory_used_top5[3].value = randomFloatFn(0, 100);
-    state.data.card10.cloud_memory_used_top5[4].value = randomFloatFn(0, 100);
+    state.data.card10.cloud_memory_used_top5[0].value = randomRangeFn(95, 100);
+    state.data.card10.cloud_memory_used_top5[1].value = randomRangeFn(90, 94);
+    state.data.card10.cloud_memory_used_top5[2].value = randomRangeFn(85, 89);
+    state.data.card10.cloud_memory_used_top5[3].value = randomRangeFn(80, 84);
+    state.data.card10.cloud_memory_used_top5[4].value = randomRangeFn(75, 79);
 
-    state.data.card10.local_cpu_used_top5[0].value = randomFloatFn(0, 100);
-    state.data.card10.local_cpu_used_top5[1].value = randomFloatFn(0, 100);
-    state.data.card10.local_cpu_used_top5[2].value = randomFloatFn(0, 100);
-    state.data.card10.local_cpu_used_top5[3].value = randomFloatFn(0, 100);
-    state.data.card10.local_cpu_used_top5[4].value = randomFloatFn(0, 100);
+    state.data.card10.local_cpu_used_top5[0].value = randomRangeFn(95, 100);
+    state.data.card10.local_cpu_used_top5[1].value = randomRangeFn(90, 94);
+    state.data.card10.local_cpu_used_top5[2].value = randomRangeFn(85, 89);
+    state.data.card10.local_cpu_used_top5[3].value = randomRangeFn(80, 84);
+    state.data.card10.local_cpu_used_top5[4].value = randomRangeFn(75, 79);
 
-    state.data.card10.local_memory_used_top5[0].value = randomFloatFn(0, 100);
-    state.data.card10.local_memory_used_top5[1].value = randomFloatFn(0, 100);
-    state.data.card10.local_memory_used_top5[2].value = randomFloatFn(0, 100);
-    state.data.card10.local_memory_used_top5[3].value = randomFloatFn(0, 100);
-    state.data.card10.local_memory_used_top5[4].value = randomFloatFn(0, 100);
+    state.data.card10.local_memory_used_top5[0].value = randomRangeFn(95, 100);
+    state.data.card10.local_memory_used_top5[1].value = randomRangeFn(90, 94);
+    state.data.card10.local_memory_used_top5[2].value = randomRangeFn(85, 89);
+    state.data.card10.local_memory_used_top5[3].value = randomRangeFn(80, 84);
+    state.data.card10.local_memory_used_top5[4].value = randomRangeFn(75, 79);
   }, 900);
 }, 10000);
+//card1
+// setTimeout(() => {
+//   state.data.card1.data[0].value = randomIntFn(0, 1000);
+//   state.data.card1.data[1].value = randomIntFn(0, 1000);
+// }, 100);
+//card2
+// setTimeout(() => {
+//   state.data.card2.data[0].value = randomIntFn(0, 1000);
+//   state.data.card2.data[1].value = randomIntFn(0, 1000);
+//   state.data.card2.data[2].value = randomIntFn(0, 1000);
+//   state.data.card2.data[3].value = randomIntFn(0, 1000);
+//   state.data.card2.data[4].value = randomIntFn(0, 1000);
+//   state.data.card2.data[5].value = randomIntFn(0, 1000);
+//   state.data.card2.data[6].value = randomIntFn(0, 1000);
+// }, 200);
+setInterval(() => {
+  // for (let i = 0; i < state.data.card9.data.valueList.length; i++) {
+  //   // if (state.data.card9.data.valueList[i] % 2 == 0) {
+  //   //   state.data.card9.data.valueList[i] -= Math.round(Math.random() * 10);
+  //   // } else {
+  //   //   state.data.card9.data.valueList[i] += Math.round(Math.random() * 20);
+  //   // }
+  //   state.data.card9.data.valueList[i].value = randomIntFn(0, 100);
+  // }
+  state.data.card9.data.valueList[0].value = randomRangeFn(90, 100);
+  state.data.card9.data.valueList[1].value = randomRangeFn(90, 100);
+  state.data.card9.data.valueList[2].value = randomRangeFn(90, 100);
+  state.data.card9.data.valueList[3].value = randomRangeFn(80, 100);
+  state.data.card9.data.valueList[4].value = randomRangeFn(90, 100);
+  state.data.card9.data.valueList[5].value = randomRangeFn(70, 100);
+  state.data.card9.data.valueList[6].value = randomRangeFn(60, 100);
+  state.data.card9.data.valueList[7].value = randomRangeFn(50, 100);
+  state.data.card9.data.valueList[8].value = randomRangeFn(80, 100);
+  state.data.card9.data.valueList[9].value = randomRangeFn(60, 100);
+  state.data.card9.data.valueList[10].value = randomRangeFn(70, 100);
+  state.data.card9.data.valueList[11].value = randomRangeFn(30, 100);
+}, 2000);
 </script>
 
 <template>

src/views/screen/layouts/UsedStatus.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
 // import { computed } from "vue";
+import cpu from "@/assets/screen/cpu.png";
+import memory from "@/assets/screen/memory.png";
+import disk from "@/assets/screen/disk.png";
+import imageServer from "@/assets/screen/image_server.png";
 
 const props = defineProps({
   data: {
@@ -25,16 +29,16 @@ const used_text_class = data => {
 <template>
   <div class="used_box">
     <div class="box_container">
-      <div class="left"><img src="src/assets/screen/cpu.png" alt="" /></div>
+      <div class="left"><img :src="cpu" alt="" /></div>
       <div class="right">
-        <div class="title_text">cpu</div>
+        <div class="title_text">CPU</div>
         <div :class="used_text_class(props.data.cpu_used)">
           {{ props.data.cpu_used }}%
         </div>
       </div>
     </div>
     <div class="box_container">
-      <div class="left"><img src="src/assets/screen/memory.png" alt="" /></div>
+      <div class="left"><img :src="memory" alt="" /></div>
       <div class="right">
         <div class="title_text">内存</div>
         <div :class="used_text_class(props.data.memory_used)">
@@ -43,7 +47,7 @@ const used_text_class = data => {
       </div>
     </div>
     <div class="box_container">
-      <div class="left"><img src="src/assets/screen/disk.png" alt="" /></div>
+      <div class="left"><img :src="disk" alt="" /></div>
       <div class="right">
         <div class="title_text">主存储</div>
         <div :class="used_text_class(props.data.disk_used)">
@@ -53,7 +57,7 @@ const used_text_class = data => {
     </div>
     <div class="box_container">
       <div class="left">
-        <img src="src/assets/screen/image_server.png" alt="" />
+        <img :src="imageServer" alt="" />
       </div>
       <div class="right">
         <div class="title_text">镜像服务器</div>

src/views/screen/mock.js

@@ -1,7 +1,7 @@
 export const card1_data = {
   data: [
-    { value: 762, name: "深度学习算法" },
-    { value: 359, name: "经典算法" }
+    { value: 238, name: "深度学习算法" },
+    { value: 19, name: "经典算法" }
   ]
 };
 
@@ -109,14 +109,14 @@ export const card6_data = {
 
 export const card7_data = {
   data: [
-    { name: "已占用", value: 900 },
-    { name: "未占用", value: 2000 }
+    { name: "已占用", value: 90 },
+    { name: "未占用", value: 10 }
   ]
 };
 
 export const card8_data = {
   data: {
-    cpu_used: "58.9",
+    cpu_used: "91.9",
     memory_used: "89.45",
     disk_used: "15.08",
     image_server_used: "33.94"
@@ -124,56 +124,86 @@ export const card8_data = {
 };
 
 export const card9_data = {
-  data: [
-    {
-      name: "节点1",
-      value: 80
-    },
-    {
-      name: "虚拟机1",
-      value: 70
-    },
-    {
-      name: "虚拟机2",
-      value: 60
-    },
-    {
-      name: "虚拟机3",
-      value: 90
-    },
-    {
-      name: "虚拟机4",
-      value: 80
-    },
-    {
-      name: "虚拟机5",
-      value: 80
-    },
-    {
-      name: "虚拟机6",
-      value: 70
-    },
-    {
-      name: "虚拟机7",
-      value: 60
-    },
-    {
-      name: "虚拟机8",
-      value: 90
-    },
-    {
-      name: "虚拟机9",
-      value: 80
-    },
-    {
-      name: "虚拟机10",
-      value: 70
-    },
-    {
-      name: "虚拟机11",
-      value: 60
-    }
-  ]
+  // data: [
+  //   {
+  //     name: "节点1",
+  //     value: 80
+  //   },
+  //   {
+  //     name: "虚拟机1",
+  //     value: 70
+  //   },
+  //   {
+  //     name: "虚拟机2",
+  //     value: 60
+  //   },
+  //   {
+  //     name: "虚拟机3",
+  //     value: 90
+  //   },
+  //   {
+  //     name: "虚拟机4",
+  //     value: 80
+  //   },
+  //   {
+  //     name: "虚拟机5",
+  //     value: 80
+  //   },
+  //   {
+  //     name: "虚拟机6",
+  //     value: 70
+  //   },
+  //   {
+  //     name: "虚拟机7",
+  //     value: 60
+  //   },
+  //   {
+  //     name: "虚拟机8",
+  //     value: 90
+  //   },
+  //   {
+  //     name: "虚拟机9",
+  //     value: 80
+  //   },
+  //   {
+  //     name: "虚拟机10",
+  //     value: 70
+  //   },
+  //   {
+  //     name: "虚拟机11",
+  //     value: 60
+  //   }
+  // ]
+  data: {
+    nameList: [
+      { name: "节点1" },
+      { name: "虚拟机1" },
+      { name: "虚拟机2" },
+      { name: "虚拟机3" },
+      { name: "虚拟机4" },
+      { name: "虚拟机5" },
+      { name: "虚拟机6" },
+      { name: "虚拟机7" },
+      { name: "虚拟机8" },
+      { name: "虚拟机9" },
+      { name: "虚拟机10" },
+      { name: "虚拟机11" }
+    ],
+    valueList: [
+      { value: 90 },
+      { value: 60 },
+      { value: 90 },
+      { value: 80 },
+      { value: 90 },
+      { value: 70 },
+      { value: 60 },
+      { value: 50 },
+      { value: 80 },
+      { value: 70 },
+      { value: 60 },
+      { value: 90 }
+    ]
+  }
 };
 
 export const card10_data = {

src/views/screen1/components/Header.vue

@@ -10,7 +10,7 @@ const props = defineProps({
 });
 const router = useRouter();
 function goBack() {
-  router.push("/project/list/index");
+  router.push("/project/list");
 }
 </script>
 

src/views/screen1/components/VueChart.vue

@@ -21,9 +21,13 @@ function clear() {
 }
 
 function draw() {
-  clear();
-  chart = echarts.init(elChart.value);
-  chart.setOption(props.option);
+  if (chart) {
+    chart.setOption(props.option);
+  } else {
+    clear();
+    chart = echarts.init(elChart.value);
+    chart.setOption(props.option);
+  }
 }
 
 onMounted(draw);

src/views/screen1/components/charts/DeviceOnline.vue

@@ -1,7 +1,8 @@
 <template>
   <div style="width: 100%; height: 180px">
     <div class="header_title">
-      <div class="title_text">最新入驻</div>
+      <div class="title_text">设备名称</div>
+      <div class="title_text">设备状态</div>
     </div>
     <div class="list_container scroll-container">
       <vue3-seamless-scroll :list="props.data" class="scroll" :step="0.5">
@@ -39,6 +40,7 @@ const getDeviceStatusClass = (status: string) => {
   flex-shrink: 0;
   gap: 10px;
   align-items: center;
+  justify-content: space-between;
   width: 428px;
   height: 42px;
   padding: 10px 20px;

src/views/screen1/components/charts/LineChart1.vue

@@ -140,7 +140,7 @@ const chartOption = computed(() => {
       //   itemGap: 20, // 图例每项之间的间隔。
       itemHeight: 10, //  图例标记的图形高度。
       textStyle: {
-        color: "rgba(255, 255, 255, 0.80)",
+        color: "rgba(255, 255, 255, 0.40)",
         fontSize: 12,
         padding: [0, 8, 0, 8]
       }
@@ -163,7 +163,7 @@ const chartOption = computed(() => {
           }
         },
         axisLabel: {
-          color: "#rgba(255, 255, 255, 0.80)",
+          color: "#rgba(255, 255, 255, 0.40)",
           fontSize: 12,
           fontWeight: 400
           //坐标轴刻度标签的相关设置
@@ -201,7 +201,7 @@ const chartOption = computed(() => {
         },
         axisLabel: {
           show: true,
-          color: "rgba(255, 255, 255, 0.80)",
+          color: "rgba(255, 255, 255, 0.40)",
           fontSize: 14
         },
         axisTick: {

src/views/screen1/components/charts/LineChart2.vue

@@ -44,7 +44,7 @@ const chartOption = computed(() => {
       type: "category",
       data: name_list.value,
       axisLabel: {
-        color: "rgba(255, 255, 255, 0.60)"
+        color: "rgba(255, 255, 255, 0.40)"
       }
     },
     yAxis: [
@@ -71,9 +71,9 @@ const chartOption = computed(() => {
       }
     ],
     grid: {
-      top: "30px",
+      top: "25px",
       left: "60px",
-      bottom: "20px",
+      bottom: "25px",
       right: "40px"
     },
     series: [

src/views/screen1/components/charts/LineChartAndBarChart.vue

@@ -92,7 +92,7 @@ const chartOption = computed(() => {
       type: "category",
       data: name_list.value,
       axisLabel: {
-        color: "rgba(255, 255, 255, 0.60)"
+        color: "rgba(255, 255, 255, 0.40)"
       }
     },
     yAxis: [

src/views/screen1/components/charts/Pie3D.vue

@@ -3,10 +3,10 @@
     style="display: flex; justify-content: center; width: 100%; height: 180px"
   >
     <div style="position: relative; width: 100%; height: 100%">
-      <img class="pie_img" src="src/assets/screen/pie_bg.png" alt="" />
+      <img class="pie_img" :src="pieBg" alt="" />
       <vue-chart
         :option="chartOption"
-        style="position: absolute; top: -60px; width: 100%; height: 170%"
+        style="position: absolute; top: 0; width: 100%; height: 100%"
       />
     </div>
   </div>
@@ -16,6 +16,7 @@ import VueChart from "../../components/VueChart.vue";
 // import * as echarts from "echarts";
 import "echarts-gl";
 import { computed } from "vue";
+import pieBg from "@/assets/screen/pie_bg.png";
 
 const props = defineProps({
   data: {
@@ -204,7 +205,7 @@ function getPie3D(pieData, internalDiameterRatio) {
       color: "#fff",
       fontWeight: 500,
       formatter: function (params) {
-        return params.name + " " + "{hr|" + params.value + "}";
+        return params.name + " " + "{hr|" + params.value + "}%";
       },
       rich: {
         hr: {
@@ -217,7 +218,8 @@ function getPie3D(pieData, internalDiameterRatio) {
       }
     },
     labelLine: {
-      length: 14,
+      smooth: 0.2,
+      length: 10,
       length2: 50,
       lineStyle: {
         color: "#fff" // 设置标示线的颜色
@@ -283,7 +285,7 @@ function getPie3D(pieData, internalDiameterRatio) {
         zoomSensitivity: 0,
         panSensitivity: 0,
         // autoRotate: true,
-        distance: 250
+        distance: 160
       },
       // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
       postEffect: {
@@ -291,7 +293,7 @@ function getPie3D(pieData, internalDiameterRatio) {
         enable: false,
         bloom: {
           enable: true,
-          bloomIntensity: 0.1
+          bloomIntensity: 0
         },
         SSAO: {
           enable: true,

src/views/screen1/index.vue

@@ -3,7 +3,7 @@
     <div class="data-dashboard-bg">
       <img
         style="width: 1920px; height: 1080px; filter: brightness(60%)"
-        src="/src/assets/screen/bg2.png"
+        :src="bg2"
         alt=""
       />
     </div>
@@ -97,7 +97,7 @@
       </BoxGroup>
     </section>
     <section class="card10">
-      <img src="src/assets/screen/bg_center.png" alt="" />
+      <img :src="bgCenter" alt="" />
     </section>
   </div>
 </template>
@@ -123,6 +123,8 @@ import LineChart2 from "@/views/screen1/components/charts/LineChart2.vue";
 import DeviceOnline from "@/views/screen1/components/charts/DeviceOnline.vue";
 import Pie3D from "@/views/screen1/components/charts/Pie3D.vue";
 import LineChartAndBarChart from "@/views/screen1/components/charts/LineChartAndBarChart.vue";
+import bgCenter from "@/assets/screen/bg_center.png";
+import bg2 from "@/assets/screen/bg2.png";
 
 const randomIntFn = (min: number, max: number) => {
   return Math.floor(Math.random() * (max - min + 1) + min);
@@ -227,26 +229,30 @@ setInterval(() => {
 
   //card6
   setTimeout(() => {
-    state.data.card6.data[0].value = randomIntFn(0, 500);
-    state.data.card6.data[1].value = randomIntFn(0, 500);
+    state.data.card6.data[0].value = randomIntFn(0, 100);
+    // state.data.card6.data[1].value = randomIntFn(0, 500);
+    state.data.card6.data[1].value = 100 - state.data.card6.data[0].value;
   }, 600);
 
   //card7
   setTimeout(() => {
-    state.data.card7.data[0].value = randomIntFn(0, 500);
-    state.data.card7.data[1].value = randomIntFn(0, 500);
+    state.data.card7.data[0].value = randomIntFn(0, 100);
+    // state.data.card7.data[1].value = randomIntFn(0, 500);
+    state.data.card7.data[1].value = 100 - state.data.card7.data[0].value;
   }, 700);
 
   //card8
   setTimeout(() => {
-    state.data.card8.data[0].value = randomIntFn(0, 500);
-    state.data.card8.data[1].value = randomIntFn(0, 500);
+    state.data.card8.data[0].value = randomIntFn(0, 100);
+    // state.data.card8.data[1].value = randomIntFn(0, 500);
+    state.data.card8.data[1].value = 100 - state.data.card8.data[0].value;
   }, 800);
 
   //card9
   setTimeout(() => {
-    state.data.card9.data[0].value = randomIntFn(0, 500);
-    state.data.card9.data[1].value = randomIntFn(0, 500);
+    state.data.card9.data[0].value = randomIntFn(0, 100);
+    // state.data.card9.data[1].value = randomIntFn(0, 500);
+    state.data.card9.data[1].value = 100 - state.data.card9.data[0].value;
   }, 900);
 
   //card10

src/views/screen1/mock.js

@@ -120,6 +120,76 @@ export const card1_data = {
           { name: "30", value: 210 },
           { name: "31", value: 150 }
         ]
+      },
+      {
+        data: [
+          { name: "1", value: 10 },
+          { name: "2", value: 160 },
+          { name: "3", value: 10 },
+          { name: "4", value: 190 },
+          { name: "5", value: 20 },
+          { name: "6", value: 50 },
+          { name: "7", value: 160 },
+          { name: "8", value: 200 },
+          { name: "9", value: 90 },
+          { name: "10", value: 20 },
+          { name: "11", value: 50 },
+          { name: "12", value: 60 },
+          { name: "13", value: 100 },
+          { name: "14", value: 60 },
+          { name: "15", value: 120 },
+          { name: "16", value: 90 },
+          { name: "17", value: 210 },
+          { name: "18", value: 10 },
+          { name: "19", value: 60 },
+          { name: "20", value: 120 },
+          { name: "21", value: 150 },
+          { name: "22", value: 60 },
+          { name: "23", value: 120 },
+          { name: "24", value: 90 },
+          { name: "25", value: 20 },
+          { name: "26", value: 150 },
+          { name: "27", value: 60 },
+          { name: "28", value: 120 },
+          { name: "29", value: 90 },
+          { name: "30", value: 20 },
+          { name: "31", value: 150 }
+        ]
+      },
+      {
+        data: [
+          { name: "1", value: 150 },
+          { name: "2", value: 160 },
+          { name: "3", value: 20 },
+          { name: "4", value: 90 },
+          { name: "5", value: 20 },
+          { name: "6", value: 150 },
+          { name: "7", value: 260 },
+          { name: "8", value: 120 },
+          { name: "9", value: 190 },
+          { name: "10", value: 210 },
+          { name: "11", value: 150 },
+          { name: "12", value: 60 },
+          { name: "13", value: 150 },
+          { name: "14", value: 60 },
+          { name: "15", value: 10 },
+          { name: "16", value: 190 },
+          { name: "17", value: 210 },
+          { name: "18", value: 150 },
+          { name: "19", value: 60 },
+          { name: "20", value: 10 },
+          { name: "21", value: 150 },
+          { name: "22", value: 60 },
+          { name: "23", value: 120 },
+          { name: "24", value: 290 },
+          { name: "25", value: 210 },
+          { name: "26", value: 10 },
+          { name: "27", value: 60 },
+          { name: "28", value: 10 },
+          { name: "29", value: 90 },
+          { name: "30", value: 20 },
+          { name: "31", value: 150 }
+        ]
       }
     ]
   }
@@ -262,28 +332,28 @@ export const card5_data = {
 
 export const card6_data = {
   data: [
-    { name: "已占用", value: 50 },
-    { name: "未占用", value: 100 }
+    { name: "已占用", value: 60 },
+    { name: "未占用", value: 40 }
   ]
 };
 
 export const card7_data = {
   data: [
     { name: "已占用", value: 50 },
-    { name: "未占用", value: 80 }
+    { name: "未占用", value: 50 }
   ]
 };
 
 export const card8_data = {
   data: [
-    { name: "已占用", value: 50 },
-    { name: "未占用", value: 60 }
+    { name: "已占用", value: 70 },
+    { name: "未占用", value: 30 }
   ]
 };
 export const card9_data = {
   data: [
-    { name: "已占用", value: 40 },
-    { name: "未占用", value: 80 }
+    { name: "已占用", value: 80 },
+    { name: "未占用", value: 20 }
   ]
 };
 export const card10_data = {