接口ing

src/api/camera/camera-share.ts

@@ -1,18 +1,26 @@
 import { http } from '@/utils/http/axios';
 
 export interface CameraShareType {
-  id?: number;
-  cameraId: number;
-  toTenantId: number;
-  permission: string;
-  endTime: string;
-  isAdd: boolean;
-  isDelete: boolean;
-  creator: string;
-  createTime: string;
-  remark: string;
-  tenantId: number;
-  cameraToTenantId: number;
+  id?: number; //唯一id
+  cameraId?: number; //相机id  -1表示全部
+  toTenantId?: number; //对应的公司id  发给谁  -1表示全部  -10表示自己
+  permission?: string; //权限  0/1
+  endTime?: string; //结束时间  有限期
+  isAdd?: boolean; //是否添加     -1表示全部
+  isDelete?: boolean; //是否删除
+  creator?: string; //创建者
+  createTime?: string; //创建时间
+  remark?: string; //备注
+  tenantId?: number; //谁发的相机共享
+  connected?: boolean; //是否连接
+  cameraIp?: string; //相机的ip地址
+  cameraType?: string; //相机的协议类型
+  cameraPort?: string; //端口地址
+  tenantName?: string; //企业名称
+  tenantCode?: string; //企业账号
+  code?: string; //设备id
+  workspaceName?: string; //车间场景;
+  name?: string; //工位场景
 }
 
 export interface CameraShareQueryType {
@@ -42,7 +50,7 @@ export const getShareCameraList = (params: CameraShareQueryType) => {
 };
 
 /** 编辑分享的相机*/
-export const editShareCameraList = (data: CameraShareQueryType) => {
+export const editShareCameraList = (data: CameraShareType) => {
   return http.request<CameraShareType[]>({
     url: '/cameraTenant/update',
     method: 'put',

src/views/cameras/overview/components/ShareCameraDetail.vue

@@ -69,7 +69,7 @@
         <el-form-item label="分享企业：" prop="shareList" class="company-table">
           <BasicTable
             :columns="columns"
-            :data-source="shareData.shareList"
+            :data-source="cameraShareList"
             :row-key="(row) => row.code"
             :action-column="actionColumn"
             :showHeader="false"
@@ -91,15 +91,35 @@
 </template>
 
 <script setup lang="ts">
-  import { h, reactive, ref } from 'vue';
+  import { h, reactive, ref, onMounted } from 'vue';
   import { BasicColumn, BasicTable, TableActionIcons } from '@/components/Table';
   import { CameraShareItem, CameraShowItem } from '../type';
   import editIcon from '@/assets/images/table/table-edit.png';
   import deleteIcon from '@/assets/images/table/table-delete.png';
-  import { rules, authorityTypeSelect, timeTypeSelect, columns } from '../constant';
+  import { rules, authorityTypeSelect, timeTypeSelect, columns, getColumns } from '../constant';
+  import useCameraShare from '../stores/useCameraShare';
+
+  const useShare = useCameraShare();
+  const {
+    cameraShareList,
+    queryName,
+    queryAccount,
+    isAddState,
+    queryCameraId,
+    conditionSearch,
+    handleDel,
+    handleAdd,
+    handleEdit,
+  } = useShare;
 
   const props = defineProps<{ formData?: CameraShowItem | null }>();
 
+  // onMounted(() => {
+  //   //获取数据
+  //   queryCameraId.value = props.formData?.code;
+  //   conditionSearch();
+  // });
+
   const shareData = ref<CameraShareItem>({
     account: undefined,
     authority: 'look',
@@ -110,10 +130,22 @@
     shareList: [],
   });
 
-  const handleEdit = (_row) => {};
+  // 将columns改为getcolumns(handleEditState);
+  const handleEditState = (row) => {
+    const editData = {
+      id: row.id as number,
+      networkingState: row.networkingState === 0 ? 1 : 0,
+    };
+    handleEdit(editData);
+  };
+  //列其中的编辑
+  const getcolumns = getColumns(handleEditState);
+
   const handleDelete = (row) => {
     const indexToRemove = shareData.value.shareList.findIndex((item) => item.name === row.name);
     shareData.value.shareList.splice(indexToRemove, 1);
+    //接口
+    // handleDel(row.id);
   };
 
   //操作列
@@ -130,11 +162,11 @@
         style: 'img',
         size: 16,
         actionIcons: [
-          {
-            label: '编辑',
-            icon: editIcon,
-            onClick: handleEdit.bind(null, record.row),
-          },
+          // {
+          //   label: '编辑',
+          //   icon: editIcon,
+          //   onClick: handleEdit.bind(null, record.row),
+          // },
           {
             label: '删除',
             icon: deleteIcon,
@@ -156,6 +188,13 @@
   const changeTimeDay = () => {};
 
   const handleConfirm = () => {
+    //接口
+    // const addShareItem = {
+    //   ...props.formData,
+    //   ...shareData,
+    // };
+    // queryCameraId.value = props.formData?.code;
+    // handleAdd(addShareItem); //数据未调整
     const addShareItem = {
       name: shareData.value.name,
       account: shareData.value.account!,

src/views/cameras/overview/components/SharedTable.vue

@@ -27,9 +27,10 @@
       </div>
     </div>
     <div class="camera-list">
+      <!-- :data-source="props.addCameraType === 'complete' ? cameraCompleted : cameraIncompleted" -->
       <BasicTable
         :columns="columns"
-        :data-source="props.addCameraType === 'complete' ? cameraCompleted : cameraIncompleted"
+        :data-source="cameraShareList"
         :row-key="(row) => row.cameraIp"
         :action-column="actionColumn"
         :tableSetting="{
@@ -53,7 +54,7 @@
 </template>
 
 <script setup lang="ts">
-  import { h, reactive, ref } from 'vue';
+  import { h, reactive, ref, onMounted } from 'vue';
   import { columns } from '../sharedColumns';
   import editIcon from '@/assets/images/table/table-edit.png';
   import deleteIcon from '@/assets/images/table/table-delete.png';
@@ -62,34 +63,66 @@
   import CameraEditshared from '../components/CameraEditshared.vue';
   import useCameraShared from '../stores/useSharedCamera';
   import { storeToRefs } from 'pinia';
-
-  const CameraShared = useCameraShared();
-  const { queryName, queryAccount, cameraCompleted, cameraIncompleted } = storeToRefs(CameraShared);
-  const { handleAdd, handleDelete, resetSearch } = CameraShared;
+  import useCameraShare from '../stores/useCameraShare';
+  // import { onMounted } from 'vue';
+
+  const useShare = useCameraShare();
+  const {
+    cameraShareList,
+    queryName,
+    queryAccount,
+    isAddState,
+    queryCameraId,
+    conditionSearch,
+    handleDel,
+    handleAdd,
+    handleEdit,
+  } = useShare;
+
+  // const CameraShared = useCameraShared();
+  // const { queryName, queryAccount, cameraCompleted, cameraIncompleted } = storeToRefs(CameraShared);
+  // const { handleAdd, handleDelete, resetSearch } = CameraShared;
 
   const props = defineProps<{ addCameraType: string }>();
+  onMounted(() => {
+    isAddState.value = props.addCameraType === 'incomplete' ? false : true;
+    conditionSearch();
+  });
 
   const shareEditedPopover = ref<boolean>(false);
 
   const handleEditData = ref<CameraSharedItem>({} as CameraSharedItem);
 
-  const handleEdit = (row) => {
+  const handleEditDetail = (row) => {
     shareEditedPopover.value = true;
     handleEditData.value = row;
   };
 
   const updateData = (data) => {
-    if (props.addCameraType === 'complete') {
-      const indexToEdit = cameraIncompleted.value.findIndex(
-        (item) => item.cameraIp === data.cameraIp,
-      );
-      cameraIncompleted.value[indexToEdit] = data;
-    } else {
-      const indexToEdit = cameraCompleted.value.findIndex(
-        (item) => item.cameraIp === data.cameraIp,
-      );
-      cameraCompleted.value[indexToEdit] = data;
-    }
+    // if (props.addCameraType === 'complete') {
+    //   const indexToEdit = cameraIncompleted.value.findIndex(
+    //     (item) => item.cameraIp === data.cameraIp,
+    //   );
+    //   cameraIncompleted.value[indexToEdit] = data;
+    // } else {
+    //   const indexToEdit = cameraCompleted.value.findIndex(
+    //     (item) => item.cameraIp === data.cameraIp,
+    //   );
+    //   cameraCompleted.value[indexToEdit] = data;
+    // }
+  };
+
+  //添加按钮
+  const handleChangeAdd = (row) => {
+    const changeAddData = {
+      id: row.id,
+      isAdd: row.isAdd ? false : true,
+    };
+    handleEdit(changeAddData);
+  };
+
+  const handleDelete = (row) => {
+    handleDel(row.id);
   };
 
   //操作列
@@ -109,13 +142,14 @@
           {
             label: '添加',
             type: 'words' + props.addCameraType,
-            onClick: handleAdd.bind(null, record.row, props.addCameraType),
+            // onClick: handleAdd.bind(null, record.row, props.addCameraType),
+            onClick: handleChangeAdd.bind(null, record.row),
           },
           {
             label: '编辑',
             type: 'img',
             icon: editIcon,
-            onClick: handleEdit.bind(null, record.row),
+            onClick: handleEditDetail.bind(null, record.row),
           },
           {
             label: '删除',
@@ -128,7 +162,16 @@
     },
   });
 
-  const queryCameraItems = () => {};
+  //查询
+  const queryCameraItems = () => {
+    isAddState.value = props.addCameraType === 'incomplete' ? false : true;
+    conditionSearch();
+  };
+  //重置
+  const resetSearch = () => {
+    queryName.value = '';
+    queryAccount.value = undefined;
+  };
 </script>
 
 <style scoped>

src/views/cameras/overview/constant.ts

@@ -334,7 +334,7 @@ export const columns: BasicColumn[] = [
         { onClick: () => updateNetworkingState(record.row), style: 'cursor: pointer;' },
         {
           default: () => {
-            return record.row.networkingState === 0 ? '连接' : '断开连接';
+            return record.row.networkingState === 0 ? '分享' : '断开分享';
           },
         },
       );
@@ -343,6 +343,65 @@ export const columns: BasicColumn[] = [
   },
 ];
 
+//改造成需要传入方法
+export const getColumns = (edit: Function): BasicColumn[] => {
+  return [
+    {
+      label: '联网状态',
+      prop: 'networkingState',
+      render(record) {
+        return h(
+          'img',
+          {
+            src: record.row.networkingState === 0 ? unConnectedIcon : connectedIcon,
+            style:
+              'width: 20px; height: 20px; object-fit: fill; display: inline-block; line-height: 20px; vertical-align: middle;',
+          },
+          {},
+        );
+      },
+      minWidth: 120,
+      align: 'center',
+      sortable: 'custom',
+    },
+    {
+      label: '名称',
+      prop: 'name',
+      minWidth: 200,
+    },
+    {
+      label: '账号',
+      prop: 'account',
+      minWidth: 200,
+    },
+    {
+      label: '联网状态',
+      prop: 'networkingState',
+      render(record) {
+        // const updateNetworkingState = (row) => {
+        //   if (row.networkingState === 0) {
+        //     row.networkingState = 1;
+        //   } else {
+        //     row.networkingState = 0;
+        //   }
+        // };
+        return h(
+          ElTag,
+          {
+            onClick: () => edit(record.row),
+          },
+          {
+            default: () => {
+              return record.row.networkingState === 0 ? '分享' : '断开分享';
+            },
+          },
+        );
+      },
+      minWidth: 120,
+    },
+  ];
+};
+
 export const sharedCaremaType = [
   {
     value: 'incomplete',

src/views/cameras/overview/stores/useCameraShare.ts

@@ -12,140 +12,86 @@ import {
   addShareCameraList,
 } from '@/api/camera/camera-share';
 
-export const useCameraShare = () => {
-  // const cameraCompleted = ref<CameraSharedItem[]>([
-  //   {
-  //     cameraIp: '172.13.25.0000',
-  //     cameraType: 'haikang',
-  //     cameraPort: '11',
-  //     companyAccount: 111,
-  //     companyName: '1111',
-  //     code: 'C919-140',
-  //     workshopName: 'C919车间',
-  //     workspaceName: '东侧',
-  //     shareState: 'complete',
-  //     password: '11',
-  //     username: '22',
-  //   },
-  // ]);
-
-  // const cameraIncompleted = ref<CameraSharedItem[]>([
-  //   {
-  //     cameraIp: '172.13.25.0011',
-  //     cameraType: 'haikang',
-  //     cameraPort: '11',
-  //     companyAccount: 111,
-  //     companyName: '1111',
-  //     code: 'C919-141',
-  //     workshopName: 'C919车间',
-  //     workspaceName: '西侧',
-  //     shareState: 'incomplete',
-  //     password: '11',
-  //     username: '22',
-  //   },
-  //   {
-  //     cameraIp: '172.13.25.0009',
-  //     cameraType: 'haikang',
-  //     cameraPort: '11',
-  //     companyAccount: 111,
-  //     companyName: '1111',
-  //     code: 'C919-142',
-  //     workshopName: 'C919车间',
-  //     workspaceName: '北侧',
-  //     shareState: 'incomplete',
-  //     password: '11',
-  //     username: '22',
-  //   },
-  // ]);
-
+export const useCameraShared = () => {
   const cameraShareList = ref<CameraShareType[]>([]);
   const queryName = ref<string>();
   const queryAccount = ref<number>();
   const isAddState = ref<boolean | number>(-1);
-  const queryCameraId = ref<number>(-1);
-  const total = ref(0);
+  const queryCameraId = ref<number | undefined>(-1);
+  const queryToTenantId = ref<number>(-1);
+  // const total = ref(0);
   const page = ref(1);
-  const size = ref(10);
+  const size = ref(100);
+  // const size = Infinity;
 
   // 条件查询事件
   const conditionSearch = () => {
-    getShareCameraList().then(())
-    const params: CameraShareQueryType = {
+    const param = {
       pageNumber: page.value,
       pageSize: size.value,
+      cameraId: -1,
+      isAdd: -1,
+      toTenantId: -1,
     };
-    if (queryName.value) {
-      params.toTenantName = queryName.value;
-    }
+    //先获取总数作为
+    getShareCameraList(param).then((res) => {
+      size.value = res.totalRow;
+      const params: CameraShareQueryType = {
+        pageNumber: page.value,
+        pageSize: size.value,
+      };
+      if (queryName.value) {
+        params.toTenantName = queryName.value;
+      }
 
-    if (queryAccount.value) {
-      params.toTenantId = queryAccount.value;
-    }
-    if (isAddState.value) {
-      params.isAdd = isAddState.value;
-    }
-    if (queryCameraId.value) {
-      params.cameraId = queryCameraId.value;
-    }
-    getShareCameraList(params).then((res) => {
-      cameraShareList.value = res.records;
-      total.value = res.totalRow;
+      if (queryAccount.value) {
+        params.toTenantId = queryAccount.value;
+      }
+      if (isAddState.value) {
+        params.isAdd = isAddState.value;
+      }
+      if (queryCameraId.value) {
+        params.cameraId = queryCameraId.value;
+      }
+      if (queryToTenantId.value) {
+        params.toTenantId = queryToTenantId.value;
+      }
+      getShareCameraList(params).then((res) => {
+        cameraShareList.value = res.records;
+        // total.value = res.totalRow;
+      });
     });
   };
 
   const handleAdd = (data: CameraShareType) => {
     addShareCameraList(data).then(() => {
-
+      conditionSearch();
     });
   };
 
-  // const handleAdd = (row, addCameraType) => {
-  //   if (addCameraType === 'complete') return;
-  //   const currentData = cameraIncompleted.value.find((item) => (item.cameraIp = row.cameraIp));
-  //   const indexToRemove = cameraIncompleted.value.findIndex(
-  //     (item) => item.cameraIp === row.cameraIp,
-  //   );
-  //   if (indexToRemove !== -1) {
-  //     cameraIncompleted.value.splice(indexToRemove, 1);
-  //   }
-  //   if (currentData) {
-  //     cameraCompleted.value.push(currentData!);
-  //   }
-  //   ElMessage({
-  //     message: '添加成功',
-  //     type: 'success',
-  //   });
-  // };
-
-  const handleDelete = (row, addCameraType) => {
-    if (addCameraType === 'complete') {
-      const indexToRemove = cameraCompleted.value.findIndex(
-        (item) => item.cameraIp === row.cameraIp,
-      );
-      cameraCompleted.value.splice(indexToRemove, 1);
-    } else {
-      const indexToRemove = cameraIncompleted.value.findIndex(
-        (item) => item.cameraIp === row.cameraIp,
-      );
-      cameraIncompleted.value.splice(indexToRemove, 1);
-    }
+  const handleDel = (id: number) => {
+    delShareCameraList(id).then(() => {
+      conditionSearch();
+    });
   };
 
-  const resetSearch = () => {
-    queryName.value = '';
-    queryAccount.value = '';
+  const handleEdit = (data: CameraShareType) => {
+    editShareCameraList(data).then(() => {
+      conditionSearch();
+    });
   };
 
   return {
+    cameraShareList,
     queryName,
     queryAccount,
+    isAddState,
+    queryCameraId,
     conditionSearch,
-    cameraIncompleted,
-    unAddlength,
+    handleDel,
     handleAdd,
-    handleDelete,
-    resetSearch,
+    handleEdit,
   };
 };
 
-export default useCameraShare;
+export default useCameraShared;