点位管理

src/views/videoControl/pointControl/hooks/index.js

 import { onMounted, ref, watch } from "vue";
 import request from "@/utils/request";
 import { ElMessageBox } from "element-plus";
-function useIndex(apis) {
+function useIndex(apis, callback) {
   const visible = ref(false);
+  const search = ref({});
   const form = ref({
-    regionName:''
+    regionName: "",
   });
   const list = ref([]);
+  const page = ref({
+    pageNum: 1,
+    pageSize: 10,
+    total: 0,
+  });
 
   watch(
-    () => visible,
+    () => visible.value,
     (newVal) => {
       if (newVal == false) {
         form.value = {};
-      } 
+      }
     }
   );
 
-  function toView() {}
+  watch([() => page.value.pageNum, () => page.value.pageSize], (val) => {
+    getList();
+  });
   function toEdit(data) {
     getDetail(data.id);
     visible.value = true;
@@ -25,24 +33,31 @@ function useIndex(apis) {
   function toAdd() {
     visible.value = true;
   }
-  function toDel(data) {
+  function toDel(data, immclose = true) {
     //弹框确认
-    ElMessageBox.confirm("是否删除该区域？").then(() => {
-      request({
-        url: apis.delete + data.id,
-        method: "delete",
-      }).then((res) => {
-        visible.value = false;
-        getList();
+    return new Promise((resolve) => {
+      ElMessageBox.confirm("是否删除？").then(() => {
+        request({
+          url: apis.delete + data.id,
+          method: "delete",
+        }).then((res) => {
+          if (immclose) {
+            visible.value = false;
+            getList();
+          }
+          resolve();
+        });
       });
     });
   }
-  function getList() {
+  function getList(params) {
     request({
       url: apis.list,
       method: "get",
+      params: { ...params, ...page.value, ...search.value },
     }).then((res) => {
-      list.value = res.data;
+      list.value = res.data || res.rows;
+      page.value.total = res.total;
     });
   }
   function getDetail(id) {
@@ -50,50 +65,66 @@ function useIndex(apis) {
       url: apis.detail + id,
       method: "get",
     }).then((res) => {
+      callback && callback(res);
       form.value = res.data;
+      return res;
     });
   }
-  function toSubmit() {
-    if (form.value.id) {
-      request({
-        url: apis.edit,
-        method: "put",
-        data: form.value,
-      }).then((res) => {
-        visible.value = false;
-        getList();
-      });
-    } else {
-      request({
-        url: apis.add,
-        method: "post",
-        data: form.value,
-      }).then((res) => {
-        visible.value = false;
-        getList();
-      });
-    }
+  function toSubmit(immclose = true) {
+    return new Promise((resolve, reject) => {
+      if (form.value.id) {
+        request({
+          url: apis.edit,
+          method: "put",
+          data: form.value,
+        }).then((res) => {
+          if (immclose) {
+            visible.value = false;
+            getList();
+          }
+          resolve();
+        });
+      } else {
+        request({
+          url: apis.add,
+          method: "post",
+          data: form.value,
+        }).then((res) => {
+          if (immclose) {
+            visible.value = false;
+            getList();
+          }
+          resolve();
+        });
+      }
+    });
   }
 
   function toClose() {
     visible.value = false;
   }
-
+  function toOpen() {
+    visible.value = false;
+  }
   onMounted(() => {
-    getList();
+    if (apis.list) {
+      getList();
+    }
   });
 
   return {
     visible,
     form,
     list,
-    toView,
+    page,
     toEdit,
     toAdd,
     toDel,
     getDetail,
     toClose,
     toSubmit,
+    getList,
+    toOpen,
   };
 }
 

src/views/videoControl/pointControl/index.scss

-.areaNodes{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-}
\ No newline at end of file
+.areaNodes {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.pagination-right {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  margin-top: 20px;
+}
+.el-tree {
+  :deep(.is-current) {
+    & > .el-tree-node__content {
+         background-color: var(--el-color-primary-light-9);
+    }
+  }
+}

src/views/videoControl/pointControl/utils/index.js

+// 随机生成十个颜色
+export const colors = () => {
+  const r = Math.floor(Math.random() * 256);
+  const g = Math.floor(Math.random() * 256);
+  const b = Math.floor(Math.random() * 256);
+  const a = 0.8;
+  return `rgba(${r},${g},${b},${a})`;
+};
+
+
+export function drawImage(video){
+  const img = video;
+  const canvas = document.getElementById('canvas');
+  const ctx = canvas.getContext('2d');
+  canvas.width = img.offsetWidth;
+  canvas.height = img.offsetHeight;
+  ctx.drawImage(img, 0, 0, canvas.width, canvas.height); // 绘制图片
+  return canvas.toDataURL("image/jpg")
+}
\ No newline at end of file