feat: 限制元素在画布内拖地

# Conflicts:
#	auto-imports.d.ts
#	src/pages/dataScreen/views/modelList/components/ModelBox.vue

.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'

.vscode/settings.json

@@ -7,7 +7,7 @@
   "editor.tabSize": 2,
   "editor.formatOnPaste": true,
   "editor.guides.bracketPairs": "active",
-  "files.autoSave": "afterDelay",
+  "files.autoSave": "off",
   "git.confirmSync": false,
   "workbench.startupEditor": "newUntitledFile",
   "editor.suggestSelection": "first",

auto-imports.d.ts

@@ -1,69 +1,62 @@
-/*
- * @Author: donghao donghao@supervision.ltd
- * @Date: 2024-08-06 18:00:46
- * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-08-14 09:59:40
- * @FilePath: \General-AI-Platform-Web-Client\auto-imports.d.ts
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- */
 /* eslint-disable */
 /* prettier-ignore */
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
+export {}
 declare global {
-  const EffectScope: typeof import('vue')['EffectScope']
-  const computed: typeof import('vue')['computed']
-  const createApp: typeof import('vue')['createApp']
-  const customRef: typeof import('vue')['customRef']
-  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
-  const defineComponent: typeof import('vue')['defineComponent']
-  const effectScope: typeof import('vue')['effectScope']
-  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
-  const getCurrentScope: typeof import('vue')['getCurrentScope']
-  const h: typeof import('vue')['h']
-  const inject: typeof import('vue')['inject']
-  const isProxy: typeof import('vue')['isProxy']
-  const isReactive: typeof import('vue')['isReactive']
-  const isReadonly: typeof import('vue')['isReadonly']
-  const isRef: typeof import('vue')['isRef']
-  const markRaw: typeof import('vue')['markRaw']
-  const nextTick: typeof import('vue')['nextTick']
-  const onActivated: typeof import('vue')['onActivated']
-  const onBeforeMount: typeof import('vue')['onBeforeMount']
-  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
-  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
-  const onDeactivated: typeof import('vue')['onDeactivated']
-  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
-  const onMounted: typeof import('vue')['onMounted']
-  const onRenderTracked: typeof import('vue')['onRenderTracked']
-  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
-  const onScopeDispose: typeof import('vue')['onScopeDispose']
-  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
-  const onUnmounted: typeof import('vue')['onUnmounted']
-  const onUpdated: typeof import('vue')['onUpdated']
-  const provide: typeof import('vue')['provide']
-  const reactive: typeof import('vue')['reactive']
-  const readonly: typeof import('vue')['readonly']
-  const ref: typeof import('vue')['ref']
-  const resolveComponent: typeof import('vue')['resolveComponent']
-  const shallowReactive: typeof import('vue')['shallowReactive']
-  const shallowReadonly: typeof import('vue')['shallowReadonly']
-  const shallowRef: typeof import('vue')['shallowRef']
-  const toRaw: typeof import('vue')['toRaw']
-  const toRef: typeof import('vue')['toRef']
-  const toRefs: typeof import('vue')['toRefs']
-  const toValue: typeof import('vue')['toValue']
-  const triggerRef: typeof import('vue')['triggerRef']
-  const unref: typeof import('vue')['unref']
-  const useAttrs: typeof import('vue')['useAttrs']
-  const useCssModule: typeof import('vue')['useCssModule']
-  const useCssVars: typeof import('vue')['useCssVars']
-  const useSlots: typeof import('vue')['useSlots']
-  const watch: typeof import('vue')['watch']
-  const watchEffect: typeof import('vue')['watchEffect']
-  const watchPostEffect: typeof import('vue')['watchPostEffect']
-  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+  const EffectScope: typeof import("vue")["EffectScope"];
+  const computed: typeof import("vue")["computed"];
+  const createApp: typeof import("vue")["createApp"];
+  const customRef: typeof import("vue")["customRef"];
+  const defineAsyncComponent: typeof import("vue")["defineAsyncComponent"];
+  const defineComponent: typeof import("vue")["defineComponent"];
+  const effectScope: typeof import("vue")["effectScope"];
+  const getCurrentInstance: typeof import("vue")["getCurrentInstance"];
+  const getCurrentScope: typeof import("vue")["getCurrentScope"];
+  const h: typeof import("vue")["h"];
+  const inject: typeof import("vue")["inject"];
+  const isProxy: typeof import("vue")["isProxy"];
+  const isReactive: typeof import("vue")["isReactive"];
+  const isReadonly: typeof import("vue")["isReadonly"];
+  const isRef: typeof import("vue")["isRef"];
+  const markRaw: typeof import("vue")["markRaw"];
+  const nextTick: typeof import("vue")["nextTick"];
+  const onActivated: typeof import("vue")["onActivated"];
+  const onBeforeMount: typeof import("vue")["onBeforeMount"];
+  const onBeforeUnmount: typeof import("vue")["onBeforeUnmount"];
+  const onBeforeUpdate: typeof import("vue")["onBeforeUpdate"];
+  const onDeactivated: typeof import("vue")["onDeactivated"];
+  const onErrorCaptured: typeof import("vue")["onErrorCaptured"];
+  const onMounted: typeof import("vue")["onMounted"];
+  const onRenderTracked: typeof import("vue")["onRenderTracked"];
+  const onRenderTriggered: typeof import("vue")["onRenderTriggered"];
+  const onScopeDispose: typeof import("vue")["onScopeDispose"];
+  const onServerPrefetch: typeof import("vue")["onServerPrefetch"];
+  const onUnmounted: typeof import("vue")["onUnmounted"];
+  const onUpdated: typeof import("vue")["onUpdated"];
+  const provide: typeof import("vue")["provide"];
+  const reactive: typeof import("vue")["reactive"];
+  const readonly: typeof import("vue")["readonly"];
+  const ref: typeof import("vue")["ref"];
+  const resolveComponent: typeof import("vue")["resolveComponent"];
+  const shallowReactive: typeof import("vue")["shallowReactive"];
+  const shallowReadonly: typeof import("vue")["shallowReadonly"];
+  const shallowRef: typeof import("vue")["shallowRef"];
+  const toRaw: typeof import("vue")["toRaw"];
+  const toRef: typeof import("vue")["toRef"];
+  const toRefs: typeof import("vue")["toRefs"];
+  const toValue: typeof import("vue")["toValue"];
+  const triggerRef: typeof import("vue")["triggerRef"];
+  const unref: typeof import("vue")["unref"];
+  const useAttrs: typeof import("vue")["useAttrs"];
+  const useCssModule: typeof import("vue")["useCssModule"];
+  const useCssVars: typeof import("vue")["useCssVars"];
+  const useSlots: typeof import("vue")["useSlots"];
+  const watch: typeof import("vue")["watch"];
+  const watchEffect: typeof import("vue")["watchEffect"];
+  const watchPostEffect: typeof import("vue")["watchPostEffect"];
+  const watchSyncEffect: typeof import("vue")["watchSyncEffect"];
 }
 // for type re-export
 declare global {

index.html

@@ -18,10 +18,10 @@
     />
     <title>pure-admin-thin</title>
     <link rel="icon" href="/favicon.ico" />
-    <!-- update 2024-07-31 14:21 -->
+    <!-- update 2024-08-14 11:05 -->
     <link
       rel="stylesheet"
-      href="//at.alicdn.com/t/c/font_4412653_br1fznj5w1.css"
+      href="//at.alicdn.com/t/c/font_4412653_5ql8iuyd77a.css"
     />
 
     <script src="https://threejs.org/build/three.js"></script>

mock/asyncRoutes.ts

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

src/api/device.ts

@@ -1,3 +1,11 @@
+/*
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-08-02 10:40:49
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-08-14 10:42:42
+ * @FilePath: \General-AI-Platform-Web-Client\src\api\device.ts
+ * @Description: 设备
+ */
 import { http } from "@/utils/http";
 import { baseUrlApi } from "./utils";
 
@@ -34,3 +42,10 @@ export const getDevices = (params?: object) => {
     params
   });
 };
+
+/** 布点获取设备 */
+export const getLinkDevicesApi = (params?: object) => {
+  return http.request<ResultList>("get", baseUrlApi("get_devices/"), {
+    params
+  });
+};

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/api/workshops.ts

@@ -0,0 +1,48 @@
+/*
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-08-02 10:40:49
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-08-14 11:10:51
+ * @FilePath: \General-AI-Platform-Web-Client\src\api\workshops.ts
+ * @Description: 布点
+ */
+import { http } from "@/utils/http";
+import { baseUrlApi } from "./utils";
+
+type Result = {
+  success: boolean;
+  data?: Array<any>;
+};
+
+type ResultList = {
+  success: boolean;
+  data?: {
+    /** 列表数据 */
+    results: Array<any>;
+  };
+};
+/** 获取布点 */
+export const getWorkshopsApi = (params?: object) => {
+  return http.request<ResultList>("get", baseUrlApi("workshops/"), {
+    params
+  });
+};
+
+/** 新增布点 */
+export const addWorkshopsApi = (data?: object) => {
+  return http.request<Result>("post", baseUrlApi("workshops/"), { data });
+};
+
+/** 获取布点设备 */
+export const getWorkshopDevicesApi = (params?: object) => {
+  return http.request<ResultList>("get", baseUrlApi("workshop_devices/"), {
+    params
+  });
+};
+
+/** 新增布点设备 */
+export const addWorkshopDevicesApi = (data?: object) => {
+  return http.request<Result>("post", baseUrlApi("workshop_devices/"), {
+    data
+  });
+};

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

@@ -96,6 +96,10 @@ function getIconClass(name: string, iconName: string) {
     return activeName.value === name
       ? `icon-shebeiguanli-xuanzhong`
       : `${iconName}`;
+  } else if (name === "DeviceSetting") {
+    return activeName.value === name
+      ? `icon-shebeibudian-xuanzhong`
+      : `${iconName}`;
   } else {
     return `${iconName}`;
   }
@@ -225,10 +229,10 @@ $--noneSelectedColor: #666666;
       }
 
       .iconfont {
-        width: 32px;
-        height: 32px;
-        font-size: 32px;
-        line-height: 32px;
+        width: 24px;
+        height: 24px;
+        font-size: 24px;
+        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();
-  console.log("fetchGroupData_res", res);
-  groupList.value = res.data;
+  // const res = await getPowerGroupList();
+  // console.log("fetchGroupData_res", res);
+  // 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 phoneIndustry from "@/assets/dataScreen/modelList/phoneIndustry.png";
-import photovoltaicIndustry from "@/assets/dataScreen/modelList/photovoltaicIndustry.png";
-import pipeIndustry from "@/assets/dataScreen/modelList/pipeIndustry.png";
-import mechanicalIndustry from "@/assets/dataScreen/modelList/mechanicalIndustry.png";
-import lithiumBatteryIndustry from "@/assets/dataScreen/modelList/lithiumBatteryIndustry.png";
-import healthcareIndustry from "@/assets/dataScreen/modelList/healthcareIndustry.png";
-import foundryIndustry from "@/assets/dataScreen/modelList/foundryIndustry.png";
-import electronicsIndustry from "@/assets/dataScreen/modelList/electronicsIndustry.png";
-import bathroomIndustry from "@/assets/dataScreen/modelList/bathroomIndustry.png";
-import bankIndustry from "@/assets/dataScreen/modelList/bankIndustry.png";
-import PCBIndustry from "@/assets/dataScreen/modelList/PCBIndustry.png";
+// import generalIndustry from "@/assets/dataScreen/modelList/generalIndustry.png";
+// import phoneIndustry from "@/assets/dataScreen/modelList/phoneIndustry.png";
+// import photovoltaicIndustry from "@/assets/dataScreen/modelList/photovoltaicIndustry.png";
+// import pipeIndustry from "@/assets/dataScreen/modelList/pipeIndustry.png";
+// import mechanicalIndustry from "@/assets/dataScreen/modelList/mechanicalIndustry.png";
+// import lithiumBatteryIndustry from "@/assets/dataScreen/modelList/lithiumBatteryIndustry.png";
+// import healthcareIndustry from "@/assets/dataScreen/modelList/healthcareIndustry.png";
+// import foundryIndustry from "@/assets/dataScreen/modelList/foundryIndustry.png";
+// import electronicsIndustry from "@/assets/dataScreen/modelList/electronicsIndustry.png";
+// import bathroomIndustry from "@/assets/dataScreen/modelList/bathroomIndustry.png";
+// import bankIndustry from "@/assets/dataScreen/modelList/bankIndustry.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/inUsedBg.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/modules/deviceSetting.ts

@@ -12,7 +12,7 @@ export default {
   path: "/deviceSetting",
   meta: {
     title: $t("menus.hsdeviceSetting"),
-    icon: "icon-shebeiguanli-weixuan",
+    icon: "icon-shebeibudian-weixuan",
     // showLink: false,
     bodyClass: "deviceSetting_page",
     rank: 8,

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

@@ -4,6 +4,7 @@ import { getWarnList } from "@/api/alarm";
 import { onMounted, ref, reactive, h } from "vue";
 // import { BaseTable } from "@/components/CustomTable";
 import { getConfig } from "@/config";
+import emptyIcon from "@/assets/emptyIcon.png";
 import dayjs from "dayjs";
 
 defineOptions({
@@ -276,12 +277,13 @@ onMounted(() => {
             pagination.pageSize * pagination.currentPage
           ).length === 0
         "
+        :image="emptyIcon"
         :description="`暂无信息`"
       />
       <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;
-          height: 88px;
+          width: 100%;
+          height: 100%;
           position: absolute;
-          background: url("@/assets/computePower/guoqi.svg") no-repeat 0 0;
-          background-size: cover;
+          background: url("@/assets/computePower/guoqi.svg") no-repeat 100% 0;
           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/deviceSetting/components/deviceAttr.vue

@@ -105,6 +105,41 @@ const fontAttr = reactive({
   overline: false
 });
 
+// 获取画布边界
+const getCanvasBoundaries = () => {
+  const canvasObj = canvasEditor.canvas.getObjects()[1];
+  return {
+    width: canvasObj.width,
+    height: canvasObj.height
+  };
+};
+
+const constrainObjectWithinCanvas = obj => {
+  const { width, height } = getCanvasBoundaries();
+
+  // 获取对象的当前尺寸和位置
+  const objLeft = obj.left;
+  const objTop = obj.top;
+  const objWidth = obj.width * obj.scaleX;
+  const objHeight = obj.height * obj.scaleY;
+  // 限制对象在画布内移动
+  if (objLeft < 0) {
+    obj.left = 0;
+  }
+  if (objTop < 0) {
+    obj.top = 0;
+  }
+  if (objLeft + objWidth > width) {
+    obj.left = width - objWidth;
+  }
+  if (objTop + objHeight > height) {
+    obj.top = height - objHeight;
+  }
+
+  // 更新对象的位置
+  obj.setCoords();
+};
+
 const getObjectAttr = e => {
   const activeObject = canvasEditor.canvas.getActiveObject();
   // 不是当前obj，跳过
@@ -159,6 +194,14 @@ const init = () => {
   event.on("selectCancel", selectCancel);
   event.on("selectOne", getObjectAttr);
   canvasEditor.canvas.on("object:modified", getObjectAttr);
+  // 监听 object:moving 事件以限制移动范围
+  canvasEditor.canvas.on("object:moving", e => {
+    const activeObject = e.target;
+    if (activeObject) {
+      constrainObjectWithinCanvas(activeObject);
+      canvasEditor.canvas.renderAll();
+    }
+  });
 };
 
 // 通用属性改变
@@ -260,6 +303,7 @@ onBeforeUnmount(() => {
   event.off("selectCancel", selectCancel);
   event.off("selectOne", getObjectAttr);
   canvasEditor.canvas.off("object:modified", getObjectAttr);
+  canvasEditor.canvas.off("object:moving");
 });
 </script>
 <template>

src/views/deviceSetting/components/deviceSelect.vue

@@ -271,6 +271,17 @@ onMounted(() => {
 //   setSize();
 //   handleClose();
 // };
+
+watch(
+  () => props.deviceList,
+  () => {
+    console.log(props.deviceList, "watch_deviceList");
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+);
 </script>
 
 <style scoped lang="scss">

src/views/deviceSetting/hooks/usePointObject.ts

@@ -1,6 +1,6 @@
 export const usePointObject = () => {
   function getPointObject(record) {
-    const { imgUrl } = record;
+    const { picture } = record;
     // TODO: 获取点位对象
     return JSON.stringify({
       version: "5.3.0",
@@ -80,7 +80,7 @@ export const usePointObject = () => {
           hasControls: false,
           evented: false,
           crossOrigin: null,
-          src: imgUrl,
+          src: picture,
           filters: []
         }
       ]

src/views/deviceSetting/index.scss

@@ -65,7 +65,7 @@
     }
     .point_detail_wrap {
       .deviceOfPoint_wrap {
-        background-color: red;
+        background-color: goldenrod;
         height: calc(100vh - 290px);
       }
       .footer_btns {

src/views/deviceSetting/index.vue

@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2024-08-02 10:52:32
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-08-13 14:37:07
+ * @LastEditTime: 2024-08-14 11:22:32
  * @FilePath: \General-AI-Platform-Web-Client\src\views\deviceSetting\index.vue
  * @Description: 设备点位管理设置
  @ 交互说明
@@ -18,6 +18,8 @@ import DeviceAttr from "./components/deviceAttr.vue";
 import DeviceSettingAdd from "./components/add.vue";
 import DeviceSelect from "./components/deviceSelect.vue";
 import { usePointObject } from "./hooks/usePointObject";
+import { getWorkshopsApi } from "@/api/workshops";
+import { getLinkDevicesApi } from "@/api/device";
 // TODO 完善预览
 // 功能组件
 import { CanvasEventEmitter } from "@/utils/event/notifier";
@@ -119,64 +121,53 @@ const initFabric = () => {
  * @设备点位
  */
 // 新增点位
-function addLocal() {
+function addPoint() {
   deviceSettingAddRef.value?.openDialog();
 }
 // 编辑点位
-function editLocal() {
+function editPoint() {
   deviceSettingAddRef.value?.openDialog();
 }
 // 删除点位
-function deleteLocal() {}
+function deletePoint() {}
 // 查看获取点位
-function fetchLocalList() {
-  pointList.value = [
-    {
-      id: "001",
-      name: "点位1",
-      imgUrl:
-        "https://img.cgmodel.com/image/2020/1010/big/1537169-1390622992.jpg",
-      deviceList: []
-    },
-    {
-      id: "002",
-      name: "点位2",
-      imgUrl:
-        "https://p3.toutiaoimg.com/origin/tos-cn-i-qvj2lq49k0/0143ca57f0614e2e9e6b7695993ec648?from=pc.jpg",
-      deviceList: []
-    },
-    {
-      id: "003",
-      name: "点位3",
-      imgUrl:
-        "https://pic.rmb.bdstatic.com/bjh/down/117d26bb4bde23110da2995624fc69c3.jpeg",
-      deviceList: []
-    }
-  ];
+async function fetchPointList() {
+  const { data } = await getWorkshopsApi();
+  console.log("fetchPointList_data", data);
+  // TODO 未使用判空和loading效果
+  pointList.value = data?.results;
+  // pointList.value = [
+  //   {
+  //     id: "001",
+  //     name: "点位1",
+  //     picture:
+  //       "https://img.cgmodel.com/image/2020/1010/big/1537169-1390622992.jpg",
+  //     deviceList: []
+  //   },
+  //   {
+  //     id: "002",
+  //     name: "点位2",
+  //     picture:
+  //       "https://p3.toutiaoimg.com/origin/tos-cn-i-qvj2lq49k0/0143ca57f0614e2e9e6b7695993ec648?from=pc.jpg",
+  //     deviceList: []
+  //   },
+  //   {
+  //     id: "003",
+  //     name: "点位3",
+  //     picture:
+  //       "https://pic.rmb.bdstatic.com/bjh/down/117d26bb4bde23110da2995624fc69c3.jpeg",
+  //     deviceList: []
+  //   }
+  // ];
   activePointId.value = pointList.value[0].id;
   activePoint.value = pointList.value[0];
-  deviceList.value = [
-    {
-      id: "1001",
-      name: "设备1",
-      type: 1
-    },
-    {
-      id: "1002",
-      name: "设备2",
-      type: 2
-    },
-    {
-      id: "1003",
-      name: "设备3",
-      type: 1
-    },
-    {
-      id: "1004",
-      name: "设备4",
-      type: 3
-    }
-  ];
+}
+// 获取设备列表
+async function fetchDeviceList() {
+  const { data } = await getLinkDevicesApi();
+  // TODO 未使用判空和loading效果
+  deviceList.value = data;
+  console.log(deviceList.value, "fetchDeviceList_data", data);
 }
 // 切换点位
 function tabPoint(tab) {
@@ -188,28 +179,6 @@ function tabPoint(tab) {
   });
 }
 
-// 获取设备列表
-// function fetchDeviceList() {
-//   // fetchDeviceList()
-//   deviceList.value = [
-//     {
-//       id: "1",
-//       name: "设备1",
-//       type: 1
-//     }
-//   ];
-// }
-
-// function fetchDeviceList(params) {
-//   deviceList.value = [
-//     {
-//       id: "1",
-//       name: "设备1",
-//       type: 1
-//     }
-//   ]
-// }
-
 // 有点位了再初始化
 watch(
   () => pointList.value,
@@ -236,7 +205,8 @@ watch(
 // );
 
 onMounted(() => {
-  fetchLocalList();
+  fetchPointList();
+  fetchDeviceList();
 });
 // 发射全局事件
 provide("fabric", fabric);
@@ -248,7 +218,7 @@ provide("canvasEditor", canvasEditor);
     <header class="flex items-center justify-between" v-if="state.showFabric">
       <h3>设备布点</h3>
       <div>
-        <el-button type="primary" @click="addLocal" v-if="pointList.length"
+        <el-button type="primary" @click="addPoint" v-if="pointList.length"
           >新建位置</el-button
         >
       </div>
@@ -266,7 +236,7 @@ provide("canvasEditor", canvasEditor);
           本页面为数据可视化大屏中设备点位界面的配置页，通过上传设备所处区域的实拍图或平面图后，根据设备的实际位置，简单的使用拖拽等操作将设备列表中的设备与位置进行匹配，使之能够在数据可视化大屏中更加精细化而直观的了解设备的具体位置与状态。
         </p>
         <div class="flex justify-center">
-          <el-button type="primary" @click="addLocal">新建位置</el-button>
+          <el-button type="primary" @click="addPoint">新建位置</el-button>
         </div>
       </div>
       <div class="w-full point_detail_wrap" v-show="pointList.length">
@@ -303,13 +273,13 @@ provide("canvasEditor", canvasEditor);
           </div>
         </div>
         <div class="footer_btns">
-          <el-button type="primary" @click="editLocal" v-if="pointList.length"
+          <el-button type="primary" @click="editPoint" v-if="pointList.length"
             >编辑位置</el-button
           >
           <el-button
             type="danger"
             plain
-            @click="deleteLocal"
+            @click="deletePoint"
             v-if="pointList.length"
             >删除位置</el-button
           >

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/modelList/index.vue

@@ -3,8 +3,9 @@ import ModelCard from "./components/ModelCard.vue";
 // import { getModelList } from "@/api/list";
 import { getModelsList } from "@/api/model";
 import { onMounted, ref } from "vue";
+import modelTitle from "@/assets/model_title.png";
 defineOptions({
-  name: "ServerList"
+  name: "ModelList"
 });
 // TODO 0416 卡片分页封装
 const svg = `
@@ -67,7 +68,7 @@ onMounted(() => {
 <template>
   <div class="main modelList_wrap">
     <div class="modelList_header">
-      苏胜天大模型衍生模型库
+      <img class="w-[218px] h-[19px]" :src="modelTitle" />
       <span class="text-[24px] text-[#154DDD]">{{ modelNum }}</span>
     </div>
     <div
@@ -118,6 +119,9 @@ onMounted(() => {
   border: 1px solid rgba(21, 77, 221, 0.2);
   .modelList_header {
     box-sizing: border-box;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
     padding: 16px;
     height: 62px;
     font-family: Douyin Sans, Douyin Sans;

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",
-    bgIcon: "/src/assets/home/abnormal_icon.png",
+    bgImage: abnormalTotal,
+    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",
-    bgIcon: "/src/assets/home/equipment_icon.png",
+    bgImage: equipmentTotal,
+    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",
-    bgIcon: "/src/assets/home/coverage_icon.png",
+    bgImage: coverageWorkshop,
+    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",
-    bgIcon: "/src/assets/home/resource_icon.png",
+    bgImage: resourceUtilization,
+    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);