Merge branch 'develop' of http://192.168.10.28:3000/Yaxin/General-AI-Platform-Web-Client

.env.production

@@ -10,4 +10,6 @@ VITE_CDN = false
 # 是否启用gzip压缩或brotli压缩（分两种情况，删除原始文件和不删除原始文件）
 # 压缩时不删除原始文件的配置：gzip、brotli、both（同时开启 gzip 与 brotli 压缩）、none（不开启压缩，默认）
 # 压缩时删除原始文件的配置：gzip-clear、brotli-clear、both-clear（同时开启 gzip 与 brotli 压缩）、none（不开启压缩，默认）
-VITE_COMPRESSION = "none"
+VITE_COMPRESSION = "none"
+# 生产环境后端地址
+VITE_APP_BASE_URL = 'http://192.168.10.70:8080'

mock/asyncRoutes.ts

@@ -17,17 +17,17 @@ import { MockMethod } from "vite-plugin-mock";
  * common：普通角色
  */
 
-const demoRouter = {
+// const demoRouter = {
-  path: "/demo/leftTree",
+//   path: "/demo/leftTree",
-  name: "DemoLeftTree",
+//   name: "DemoLeftTree",
-  meta: {
+//   meta: {
-    showLink: false,
+//     showLink: false,
-    title: "测试",
+//     title: "测试",
-    icon: "",
+//     icon: "",
-    roles: ["admin", "common"],
+//     roles: ["admin", "common"],
-    rank: 101
+//     rank: 101
-  }
+//   }
-};
+// };
 
 export default [
   {
@@ -36,7 +36,7 @@ export default [
     response: () => {
       return {
         success: true,
-        data: [demoRouter]
+        data: []
       };
     }
   }

src/api/routes.ts

@@ -1,4 +1,5 @@
 import { http } from "@/utils/http";
+import { baseUrlApi } from "./utils";
 
 type Result = {
   success: boolean;
@@ -6,5 +7,5 @@ type Result = {
 };
 
 export const getAsyncRoutes = () => {
-  return http.request<Result>("get", "/getAsyncRoutes");
+  return http.request<Result>("get", baseUrlApi("getAsyncRoutes"));
 };

src/layout/components/sidebar/logo.vue

@@ -9,7 +9,7 @@
 <script setup lang="ts">
 import { getTopMenu } from "@/router/utils";
 import { useNav } from "@/layout/hooks/useNav";
-
+import navLogo from "@/assets/svg/nav_logo.svg?component";
 const props = defineProps({
   collapse: Boolean
 });
@@ -28,7 +28,8 @@ const { title } = useNav();
         :to="getTopMenu()?.path ?? '/'"
       >
         <!-- <img src="/logo.svg" alt="logo" /> -->
-        <img src="/src/assets/svg/nav_logo.svg" alt="logo" />
+        <!-- <img :src="navLogo" alt="logo" /> -->
+        <navLogo />
       </router-link>
       <router-link
         v-else
@@ -37,7 +38,8 @@ const { title } = useNav();
         class="text-center sidebar-logo-link"
         :to="getTopMenu()?.path ?? '/'"
       >
-        <img src="/src/assets/svg/nav_logo.svg" alt="logo" />
+        <!-- <img :src="navLogo" alt="logo" /> -->
+        <navLogo />
       </router-link>
     </transition>
   </div>

src/layout/components/sidebar/vertical.vue

@@ -225,10 +225,10 @@ $--noneSelectedColor: #666666;
       }
 
       .iconfont {
-        width: 32px;
+        width: 24px;
-        height: 32px;
+        height: 24px;
-        font-size: 32px;
+        font-size: 24px;
-        line-height: 32px;
+        line-height: 24px;
         border-radius: 8px;
       }
 

src/mockProdServer.ts

@@ -5,8 +5,23 @@ const modules: Record<string, any> = import.meta.glob("../mock/*.ts", {
 });
 const mockModules = [];
 
+// Object.keys(modules).forEach(key => {
+//   mockModules.push(...modules[key].default);
+// });
 Object.keys(modules).forEach(key => {
-  mockModules.push(...modules[key].default);
+  const module = modules[key];
+  if (module) {
+    const moduleDefault = module.default;
+    if (Array.isArray(moduleDefault)) {
+      mockModules.push(...moduleDefault);
+    } else if (typeof moduleDefault === "object") {
+      mockModules.push(moduleDefault);
+    } else {
+      console.error(`Module ${key} does not have a valid default export.`);
+    }
+  } else {
+    console.error(`Module ${key} could not be loaded.`);
+  }
 });
 
 export function setupProdMockServer() {

src/pages/dataScreen/views/alarm/alarmInfoIndex.vue

@@ -259,6 +259,7 @@ onMounted(() => {
                   placeholder="告警名称"
                   @change="getList"
                   clearable
+                  class="alarm_select"
                 >
                   <!-- <el-option label="名称1" value="1" />
                   <el-option label="名称2" value="2" /> -->
@@ -275,6 +276,7 @@ onMounted(() => {
                   placeholder="告警等级"
                   @change="getList"
                   clearable
+                  class="alarm_select"
                 >
                   <el-option
                     v-for="(v, k) in alarmLevelStatusEnum"
@@ -372,4 +374,9 @@ onMounted(() => {
 
 <style lang="scss">
 @import "./alarmInfoIndex.scss";
+.alarm_select {
+  .el-input__wrapper {
+    box-shadow: 0 0 0 1px #088bd6 inset;
+  }
+}
 </style>

src/pages/dataScreen/views/computePowerAllocation/computePowerAllocationIndex.vue

@@ -14,7 +14,7 @@ import { ComputePowerPoolItem } from "./typing";
 import { AnimationPic } from "@/components/AnimationCard";
 import computePowerAllocationIcon from "@/assets/animate/device/computePowerAllocation.json";
 import { DsBox2 } from "@/components/DsBox";
-import { getPowerGroupList } from "@/api/list";
+// import { getPowerGroupList } from "@/api/list";
 import { getComputeConfig } from "@/api/computePower";
 
 defineOptions({
@@ -31,9 +31,31 @@ async function fetchPowerData() {
   poolsData.value = res.data;
 }
 async function fetchGroupData() {
-  const res = await getPowerGroupList();
+  // const res = await getPowerGroupList();
-  console.log("fetchGroupData_res", res);
+  // console.log("fetchGroupData_res", res);
-  groupList.value = res.data;
+  // groupList.value = res.data.splice(0, 5);
+  groupList.value = [
+    {
+      label: "NVIDIA GeForce 4090",
+      type: 1
+    },
+    {
+      label: "瑞芯微 RK3566",
+      type: 0
+    },
+    {
+      label: "瑞芯微 RK3566",
+      type: 0
+    },
+    {
+      label: "NVIDIA GeForce 4090",
+      type: 1
+    },
+    {
+      label: "NVIDIA GeForce 4090",
+      type: 1
+    }
+  ];
 }
 
 onMounted(() => {

src/pages/dataScreen/views/home/homeIndex.scss

@@ -64,10 +64,12 @@
     height: 96px;
     background: url("@/assets/svg/screenSmallBgCommon.svg") no-repeat;
     .mid_box_icon {
-      width: 76px;
+      margin: 0 10px;
+      width: 56px;
       height: 94px;
-      background: url("@/assets/svg/dataScreen/abnormal.svg") no-repeat center
+      background: url("@/assets/svg/dataScreen/abnormal.png") no-repeat center
         center;
+      background-size: 100%;
     }
     .mid_box_info {
       display: flex;
@@ -89,26 +91,29 @@
   }
   .mid_box:nth-of-type(2) {
     .mid_box_icon {
-      width: 76px;
+      width: 56px;
       height: 94px;
-      background: url("@/assets/svg/dataScreen/device.svg") no-repeat center
+      background: url("@/assets/svg/dataScreen/device.png") no-repeat center
         center;
+      background-size: 100%;
     }
   }
   .mid_box:nth-of-type(3) {
     .mid_box_icon {
-      width: 76px;
+      width: 56px;
       height: 94px;
-      background: url("@/assets/svg/dataScreen/workshop.svg") no-repeat center
+      background: url("@/assets/svg/dataScreen/workshop.png") no-repeat center
         center;
+      background-size: 100%;
     }
   }
   .mid_box:nth-of-type(4) {
     .mid_box_icon {
-      width: 76px;
+      width: 56px;
       height: 94px;
-      background: url("@/assets/svg/dataScreen/resource.svg") no-repeat center
+      background: url("@/assets/svg/dataScreen/resource.png") no-repeat center
         center;
+      background-size: 100%;
     }
   }
 }

src/pages/dataScreen/views/modelList/components/ModelBox.vue

@@ -1,17 +1,28 @@
 <script setup lang="ts">
 import { computed, PropType } from "vue";
-import generalIndustry from "@/assets/dataScreen/modelList/generalIndustry.png";
+// import generalIndustry from "@/assets/dataScreen/modelList/generalIndustry.png";
-import phoneIndustry from "@/assets/dataScreen/modelList/phoneIndustry.png";
+// import phoneIndustry from "@/assets/dataScreen/modelList/phoneIndustry.png";
-import photovoltaicIndustry from "@/assets/dataScreen/modelList/photovoltaicIndustry.png";
+// import photovoltaicIndustry from "@/assets/dataScreen/modelList/photovoltaicIndustry.png";
-import pipeIndustry from "@/assets/dataScreen/modelList/pipeIndustry.png";
+// import pipeIndustry from "@/assets/dataScreen/modelList/pipeIndustry.png";
-import mechanicalIndustry from "@/assets/dataScreen/modelList/mechanicalIndustry.png";
+// import mechanicalIndustry from "@/assets/dataScreen/modelList/mechanicalIndustry.png";
-import lithiumBatteryIndustry from "@/assets/dataScreen/modelList/lithiumBatteryIndustry.png";
+// import lithiumBatteryIndustry from "@/assets/dataScreen/modelList/lithiumBatteryIndustry.png";
-import healthcareIndustry from "@/assets/dataScreen/modelList/healthcareIndustry.png";
+// import healthcareIndustry from "@/assets/dataScreen/modelList/healthcareIndustry.png";
-import foundryIndustry from "@/assets/dataScreen/modelList/foundryIndustry.png";
+// import foundryIndustry from "@/assets/dataScreen/modelList/foundryIndustry.png";
-import electronicsIndustry from "@/assets/dataScreen/modelList/electronicsIndustry.png";
+// import electronicsIndustry from "@/assets/dataScreen/modelList/electronicsIndustry.png";
-import bathroomIndustry from "@/assets/dataScreen/modelList/bathroomIndustry.png";
+// import bathroomIndustry from "@/assets/dataScreen/modelList/bathroomIndustry.png";
-import bankIndustry from "@/assets/dataScreen/modelList/bankIndustry.png";
+// import bankIndustry from "@/assets/dataScreen/modelList/bankIndustry.png";
-import PCBIndustry from "@/assets/dataScreen/modelList/PCBIndustry.png";
+// import PCBIndustry from "@/assets/dataScreen/modelList/PCBIndustry.png";
+import model_bank from "@/assets/svg/model/model_bank.png";
+import model_battery from "@/assets/svg/model/model_battery.png";
+import model_car from "@/assets/svg/model/model_car.png";
+import model_ceramics from "@/assets/svg/model/model_ceramics.png";
+import model_medical from "@/assets/svg/model/model_medical.png";
+import model_metal from "@/assets/svg/model/model_metal.png";
+import model_metallurgy from "@/assets/svg/model/model_metallurgy.png";
+import model_PCB from "@/assets/svg/model/model_PCB.png";
+import model_phone from "@/assets/svg/model/model_phone.png";
+import model_photovoltaic from "@/assets/svg/model/model_photovoltaic.png";
+import model_PVC from "@/assets/svg/model/model_PVC.png";
 
 defineOptions({
   name: "ModelBox"
@@ -45,37 +56,37 @@ function getModelIcon(params: string) {
     params == "手机、电子、SMT" ||
     params == "手机、液晶显示屏"
   ) {
-    return phoneIndustry;
+    return model_phone;
   } else if (
     params ==
     "机械、金属工件、线缆、铸造、薄膜、玻璃、造纸、铝板带、铝箔、铜箔、无纺布"
   ) {
-    return mechanicalIndustry;
+    return model_metal;
   } else if (
     params == "PVC管材、金属管材、金属工件、塑料水管、汽车软管、线缆"
   ) {
-    return pipeIndustry;
+    return model_PVC;
   } else if (params == "锂电池") {
-    return lithiumBatteryIndustry;
+    return model_battery;
   } else if (params == "食品、饮料、医疗卫生" || params == "食品、饮料") {
-    return healthcareIndustry;
+    return model_medical;
   } else if (params == "陶瓷、卫浴、瓷砖") {
-    return bathroomIndustry;
+    return model_ceramics;
   } else if (
     params == "机加工、光伏、电子、SMT、手机、锂电池、精密零部件加工" ||
     params == "光伏"
   ) {
-    return photovoltaicIndustry;
+    return model_photovoltaic;
   } else if (params == "钢铁、冶金、铸造") {
-    return foundryIndustry;
+    return model_metallurgy;
   } else if (params == "银行、营业厅") {
-    return bankIndustry;
+    return model_bank;
   } else if (params == "机加工、电子、手机、精密零部件加工、汽车") {
-    return electronicsIndustry;
+    return model_car;
   } else if (params == "PCB") {
-    return PCBIndustry;
+    return model_PCB;
   } else {
-    return generalIndustry;
+    return model_PCB;
   }
 }
 const emit = defineEmits(["check-detail", "delete-item"]);
@@ -140,7 +151,7 @@ const handleClickDetail = (modelData: CardProductType) => {
     rgba(255, 207, 95, 0.4) 0%,
     rgba(255, 207, 95, 0) 100%
   );
-  background-image: url("@/assets/dataScreen/modelList/inUsed.svg");
+  // background-image: url("@/assets/dataScreen/modelList/inUsed.svg");
   background-repeat: no-repeat;
   cursor: pointer;
   .model-box-state {

src/pages/dataScreen/views/modelList/modelList.scss

@@ -152,12 +152,12 @@
     }
   }
 }
-:deep(.modelListDialog) {
+.modelListDialog {
   width: 640px;
   // height: 300px;
   background: #021f4e !important;
   border-radius: 8px;
-  border: 1px solid #438cff;
+  border: 1px solid #438cff !important;
   .el-dialog__body {
     padding: 0 20px 20px;
     .modelListDialogBody {

src/router/utils.ts

@@ -187,6 +187,7 @@ function initRouter() {
     // 开启动态路由缓存本地sessionStorage
     const key = "async-routes";
     const asyncRouteList = storageSession().getItem(key) as any;
+    console.log(asyncRouteList, "asyncRouteList");
     if (asyncRouteList && asyncRouteList?.length > 0) {
       return new Promise(resolve => {
         handleAsyncRoutes(asyncRouteList);

src/views/alarm/index.vue

@@ -283,7 +283,7 @@ onMounted(() => {
       <template v-if="pagination.total > 0">
         <pure-table
           showOverflowTooltip
-          alignWhole="center"
+          alignWhole="left"
           :data="listData"
           :columns="columns"
           :header-cell-style="{

src/views/computePowerAllocation/computePowerAllocation.scss

@@ -1,7 +1,7 @@
 .computePowerAllocation_wrap {
   height: 100%;
   background-color: #ffffff;
-  border-radius: 8px 8px 8px 8px;
+  // border-radius: 8px 8px 8px 8px;
   border: 1px solid rgba(21, 77, 221, 0.2);
   .computePowerAllocation_header {
     box-sizing: border-box;
@@ -18,7 +18,10 @@
     .head_info {
       padding: 12px 16px;
       background: url("@/assets/computePower/computePowerBg.png") no-repeat;
-      background-size: 100% 100%;
+      // background-size: 100% 100%;
+      background-size: cover;
+      border: 1px solid rgba(21, 77, 221, 0.1);
+      border-radius: 6px;
       // font-size: 28px;
       .bg_header_logo {
         width: 80px;
@@ -32,10 +35,11 @@
     .banner_group {
       padding-top: 24px;
       & > li {
-        width: 306px;
+        flex: 1;
+        margin-right: 16px;
         height: 88px;
         background-color: rgba(256, 256, 256, 0.1);
-        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
+        // box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
         border-radius: 8px 8px 8px 8px;
         border: 1px solid #154ddd;
         position: relative;
@@ -53,17 +57,19 @@
         }
 
         .bg_banner_group_logo {
-          width: 316px;
+          width: 100%;
-          height: 88px;
+          height: 100%;
           position: absolute;
-          background: url("@/assets/computePower/guoqi.svg") no-repeat 0 0;
+          background: url("@/assets/computePower/guoqi.svg") no-repeat 100% 0;
-          background-size: cover;
           opacity: 0.1;
         }
         .bg_banner_group_logo_1 {
-          background: url("@/assets/computePower/NVIDIA.svg");
+          background: url("@/assets/computePower/NVIDIA.svg") no-repeat 100% 0;
         }
       }
+      & > li:last-child {
+        margin-right: 0;
+      }
     }
 
     /* footer */

src/views/computePowerAllocation/index.vue

@@ -18,7 +18,28 @@ defineOptions({
   name: "ComputePowerAllocation"
 });
 
-const groupList = ref<Record<string, any>[]>([]); //获取dom;
+const groupList = ref<Record<string, any>[]>([
+  {
+    label: "NVIDIA GeForce 4090",
+    type: 1
+  },
+  {
+    label: "瑞芯微 RK3566",
+    type: 0
+  },
+  {
+    label: "瑞芯微 RK3566",
+    type: 0
+  },
+  {
+    label: "NVIDIA GeForce 4090",
+    type: 1
+  },
+  {
+    label: "NVIDIA GeForce 4090",
+    type: 1
+  }
+]); //获取dom;
 
 const poolsData = ref<ComputePowerPoolItem[]>([]);
 
@@ -30,7 +51,29 @@ async function fetchPowerData() {
 async function fetchGroupData() {
   const res = await getPowerGroupList();
   console.log("fetchGroupData_res", res);
-  groupList.value = res.data.splice(0, 5);
+  // groupList.value = res.data.splice(0, 5);
+  // groupList.value = [
+  //   {
+  //     label: "NVIDIA GeForce 4090",
+  //     type: 1
+  //   },
+  //   {
+  //     label: "瑞芯微 RK3566",
+  //     type: 0
+  //   },
+  //   {
+  //     label: "瑞芯微 RK3566",
+  //     type: 0
+  //   },
+  //   {
+  //     label: "NVIDIA GeForce 4090",
+  //     type: 1
+  //   },
+  //   {
+  //     label: "NVIDIA GeForce 4090",
+  //     type: 1
+  //   }
+  // ];
 }
 
 onMounted(() => {

src/views/device/components/TreeCard.vue

@@ -47,7 +47,7 @@ onMounted(() => {
   border: 1px solid rgba(21, 77, 221, 0.2);
   .collapseTree_header {
     box-sizing: border-box;
-    padding-top: 28px;
+    padding-top: 20px;
     padding-left: 20px;
     width: 100%;
     height: 62px;

src/views/device/index.vue

@@ -4,6 +4,7 @@ import DeviceCard from "./components/DeviceCard.vue";
 import { getDeviceClassfication, getDevices } from "@/api/device";
 import { onMounted, ref, watch, onBeforeUnmount, nextTick } from "vue";
 import { emitter } from "@/utils/mitt";
+import emptyIcon from "@/assets/emptyIcon.png";
 
 defineOptions({
   name: "DeviceList"
@@ -128,7 +129,7 @@ onMounted(() => {
   <div class="flex justify-start h-full main device_wrap">
     <TreeCard class="h-full" />
     <div
-      class="flex-1 ml-5 device_body"
+      class="flex-1 ml-4 device_body"
       v-loading="dataLoading"
       :element-loading-svg="svg"
       element-loading-svg-view-box="-10, -10, 50, 50"
@@ -197,6 +198,7 @@ onMounted(() => {
               pagination.pageSize * pagination.current
             ).length === 0
           "
+          :image="emptyIcon"
           :description="`${searchValue} 产品不存在`"
         />
         <template v-if="pagination.total > 0">

src/views/device/scene.scss

@@ -3,7 +3,6 @@
     .deviceScene_body {
       .scene_box {
         background-color: white;
-        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
         border-radius: 8px;
         height: calc(100vh - 160px);
       }
@@ -27,7 +26,7 @@
       }
 
       .right {
-        width: 32.61%;
+        width: 33.61%;
         .alarm_head {
           padding: 7px 16px;
           border-bottom: 1px solid #e0e0e0;

src/views/device/scene.vue

@@ -97,7 +97,7 @@ const columns = [
         {
           style: {
             color: "#e80d0d",
-            fontSize: "12px"
+            fontSize: "14px"
           }
         },
         val.warning_name
@@ -390,7 +390,7 @@ onMounted(() => {
         <template v-if="pagination.total > 0">
           <pure-table
             showOverflowTooltip
-            alignWhole="center"
+            alignWhole="left"
             :data="alarmListData"
             :columns="columns"
             :header-cell-style="{

src/views/modelList/components/ModelCard.vue

@@ -151,6 +151,7 @@ const deepAlgorithm = computed(() => [
   width: 100%;
   height: 278px;
   border-radius: 8px;
+  border: 1px solid rgba(21, 77, 221, 0.2);
   // box-shadow: 0 8px 16px 0 rgb(0 0 0 / 10%);
 
   .model-header {

src/views/serverModule/index.vue

@@ -3,6 +3,7 @@ import ServerCard from "./components/ServerCard.vue";
 // import { getServerList } from "@/api/list";
 import { getServerList } from "@/api/server";
 import { onMounted, ref } from "vue";
+import emptyIcon from "@/assets/emptyIcon.png";
 defineOptions({
   name: "ServerList"
 });
@@ -98,6 +99,7 @@ onMounted(() => {
     >
       <el-empty
         v-show="serverList.length === 0"
+        :image="emptyIcon"
         :description="`${searchValue} 产品不存在`"
       />
       <template v-if="pagination.total > 0">

src/views/workbench/components/Notify.vue

@@ -160,7 +160,7 @@ console.log(props.MessageData);
     justify-content: flex-start;
     align-items: center;
     height: 72px;
-    background: #f5f5f5;
+    background: rgba(21, 77, 221, 0.05);
     border-radius: 4px 4px 4px 4px;
     cursor: pointer;
     .notify_box_left {

src/views/workbench/index.vue

@@ -13,6 +13,14 @@ import { onMounted, ref } from "vue";
 // import SwiperShow from "./components/SwiperShow.vue";
 // import dataViewIcon1 from "@/assets/svg/icons/dataViewIcon1.svg";
 // import dataViewIcon2 from "@/assets/svg/icons/dataViewIcon1.svg";
+import abnormalTotal from "@/assets/home/abnormal_total.png";
+import abnormalIcon from "@/assets/home/abnormal_icon.png";
+import equipmentTotal from "@/assets/home/equipment_total.png";
+import equipmentIcon from "@/assets/home/equipment_icon.png";
+import coverageWorkshop from "@/assets/home/coverage_workshop.png";
+import coverageIcon from "@/assets/home/coverage_icon.png";
+import resourceUtilization from "@/assets/home/resource_utilization.png";
+import resourceIcon from "@/assets/home/resource_icon.png";
 
 defineOptions({
   name: "Workbench"
@@ -49,8 +57,8 @@ const dataViewList = ref([
     color: "#FF861A",
     bgColor: "#FFE9D6",
     bigBgColor: "#FFFAF5",
-    bgImage: "/src/assets/home/abnormal_total.png",
+    bgImage: abnormalTotal,
-    bgIcon: "/src/assets/home/abnormal_icon.png",
+    bgIcon: abnormalIcon,
     icon: "icon-yichangzongliang1"
   },
   {
@@ -59,8 +67,8 @@ const dataViewList = ref([
     color: "#5786FF",
     bgColor: "#D6E0FF",
     bigBgColor: "#F5F8FF",
-    bgImage: "/src/assets/home/equipment_total.png",
+    bgImage: equipmentTotal,
-    bgIcon: "/src/assets/home/equipment_icon.png",
+    bgIcon: equipmentIcon,
     icon: "icon-shebeizongliang1"
   },
   {
@@ -69,8 +77,8 @@ const dataViewList = ref([
     color: "#5024FE",
     bgColor: "#DDD5FD",
     bigBgColor: "#F5F3FD",
-    bgImage: "/src/assets/home/coverage_workshop.png",
+    bgImage: coverageWorkshop,
-    bgIcon: "/src/assets/home/coverage_icon.png",
+    bgIcon: coverageIcon,
     icon: "icon-fugaichejian"
   },
   {
@@ -78,10 +86,9 @@ const dataViewList = ref([
     value: "89300",
     color: "#14A1FF",
     bgColor: "#D6EFFF",
-    bgImage: "/src/assets/home/resource_utilization.png",
+    bgImage: resourceUtilization,
-    bgIcon: "/src/assets/home/resource_icon.png",
+    bgIcon: resourceIcon,
     bigBgColor: "#F5FBFF",
-
     icon: "icon-ziyuanshiyong1"
   }
 ]);
@@ -407,6 +414,7 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .workbench_wrap {
+  margin-top: 8px;
   overflow-x: hidden;
   overflow-y: scroll;
   height: calc(100% - 0px);