feat: 初始化布点接口

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/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/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.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() {
+async function fetchPointList() {
-  pointList.value = [
+  const { data } = await getWorkshopsApi();
-    {
+  console.log("fetchPointList_data", data);
-      id: "001",
+  // TODO 未使用判空和loading效果
-      name: "点位1",
+  pointList.value = data?.results;
-      imgUrl:
+  // pointList.value = [
-        "https://img.cgmodel.com/image/2020/1010/big/1537169-1390622992.jpg",
+  //   {
-      deviceList: []
+  //     id: "001",
-    },
+  //     name: "点位1",
-    {
+  //     picture:
-      id: "002",
+  //       "https://img.cgmodel.com/image/2020/1010/big/1537169-1390622992.jpg",
-      name: "点位2",
+  //     deviceList: []
-      imgUrl:
+  //   },
-        "https://p3.toutiaoimg.com/origin/tos-cn-i-qvj2lq49k0/0143ca57f0614e2e9e6b7695993ec648?from=pc.jpg",
+  //   {
-      deviceList: []
+  //     id: "002",
-    },
+  //     name: "点位2",
-    {
+  //     picture:
-      id: "003",
+  //       "https://p3.toutiaoimg.com/origin/tos-cn-i-qvj2lq49k0/0143ca57f0614e2e9e6b7695993ec648?from=pc.jpg",
-      name: "点位3",
+  //     deviceList: []
-      imgUrl:
+  //   },
-        "https://pic.rmb.bdstatic.com/bjh/down/117d26bb4bde23110da2995624fc69c3.jpeg",
+  //   {
-      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",
+async function fetchDeviceList() {
-      name: "设备1",
+  const { data } = await getLinkDevicesApi();
-      type: 1
+  // TODO 未使用判空和loading效果
-    },
+  deviceList.value = data;
-    {
+  console.log(deviceList.value, "fetchDeviceList_data", data);
-      id: "1002",
-      name: "设备2",
-      type: 2
-    },
-    {
-      id: "1003",
-      name: "设备3",
-      type: 1
-    },
-    {
-      id: "1004",
-      name: "设备4",
-      type: 3
-    }
-  ];
 }
 // 切换点位
 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
           >