Merge branch 'dataDel'

src/api/camera/camera-share.ts

@@ -1,18 +1,32 @@
 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; //工位场景
+  cameraName?: string; //可编辑的相机名称
+  cameraCode?: string; //可编辑的相机设备id
+  cameraWorkspace?: string; //可编辑的场景  id
+  cameraWorkspaceName?: string; //可编辑的场景  name
+  username?: string; //用户名
+  password?: string; //密码
 }
 
 export interface CameraShareQueryType {
@@ -21,7 +35,8 @@ export interface CameraShareQueryType {
   cameraId?: number;
   isAdd?: boolean | number;
   toTenantId?: number;
-  toTenantName?: string; //自己加的
+  tenantName?: string; //企业名称
+  tenantCode?: string; //企业账号
 }
 
 export interface ReturnType {
@@ -34,15 +49,18 @@ export interface ReturnType {
 
 /** 查询分享的相机*/
 export const getShareCameraList = (params: CameraShareQueryType) => {
-  return http.request<ReturnType>({
-    url: '/cameraTenant/getList',
-    method: 'GET',
-    params,
-  });
+  return http.request<ReturnType>(
+    {
+      url: '/cameraTenant/getList',
+      method: 'GET',
+      params,
+    },
+    { isShowErrorMessage: false },
+  );
 };
 
 /** 编辑分享的相机*/
-export const editShareCameraList = (data: CameraShareQueryType) => {
+export const editShareCameraList = (data: CameraShareType) => {
   return http.request<CameraShareType[]>({
     url: '/cameraTenant/update',
     method: 'put',
@@ -51,9 +69,9 @@ export const editShareCameraList = (data: CameraShareQueryType) => {
 };
 
 /** 删除分享的相机*/
-export const delShareCameraList = (toTenantId: number) => {
+export const delShareCameraList = (id: number) => {
   return http.request<CameraShareType[]>({
-    url: `/cameraTenant/updatetoTenantId=${toTenantId}`,
+    url: `/cameraTenant/delete?cameraToTenantId=${id}`,
     method: 'delete',
   });
 };
@@ -63,6 +81,19 @@ export const addShareCameraList = (data: CameraShareType) => {
   return http.request<CameraShareType[]>({
     url: '/cameraTenant/save',
     method: 'post',
-    data,
+    data: [data],
+  });
+};
+
+interface VerifyReturn {
+  tenantName: string;
+  tenantId: number;
+}
+
+/** 验证*/
+export const getVerify = (tenantCode: string) => {
+  return http.request<VerifyReturn>({
+    url: `/cameraTenant/check?tenantCode=${tenantCode}`,
+    method: 'GET',
   });
 };

src/utils/http/axios/index.ts

@@ -17,6 +17,7 @@ import { setObjToUrlParams } from '@/utils/urlUtils';
 import { RequestOptions, Result, CreateAxiosOptions } from './types';
 
 import { useUserStoreWidthOut } from '@/store/modules/user';
+import urlJoin from 'url-join';
 
 const globSetting = useGlobSetting();
 const urlPrefix = globSetting.urlPrefix || '';
@@ -140,7 +141,8 @@ const transform: AxiosTransform = {
     const isUrlStr = isUrl(config.url as string);
 
     if (!isUrlStr && joinPrefix) {
-      config.url = `${urlPrefix}${config.url}`;
+      // 这里做兼容
+      config.url = urlJoin(urlPrefix || '', config.url as string);
     }
 
     if (!isUrlStr && apiUrl && isString(apiUrl)) {

src/views/cameras/overview/CamerasOverview.vue

@@ -67,9 +67,22 @@
   import { deleteCameraItem } from '@/api/camera/camera-overview';
   import { ElMessage, ElMessageBox } from 'element-plus';
   import useCameraShared from './stores/useSharedCamera';
+  import useCameraShare from './stores/useCameraShare';
 
-  const CameraShared = useCameraShared();
-  const { unAddlength } = storeToRefs(CameraShared);
+  const useShare = useCameraShare();
+  const { cameraShareList, queryName, queryAccount, isAddState, queryCameraId, conditionSearch } =
+    useShare;
+
+  const unAddlength = ref<number>();
+  onMounted(() => {
+    // isAddState.value = false;
+    // console.log('isAddState', isAddState.value);
+    // queryToTenantId.value = -10;
+    // conditionSearch();
+  });
+
+  // const CameraShared = useCameraShared();
+  // const { unAddlength } = storeToRefs(CameraShared);
 
   const cameraOverview = useCameraOverview();
   const { cameraItems, loading, total, page, size } = storeToRefs(cameraOverview);

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

@@ -18,25 +18,26 @@
 
 <script setup lang="ts">
   import { ref } from 'vue';
-  import { CameraSharedItem, cameraAddType } from '../constant';
+  import { cameraAddType } from '../constant';
   import { Close } from '@element-plus/icons-vue';
   import EditSharedCamera from './EditSharedCamera.vue';
+  import { CameraShareType } from '@/api/camera/camera-share';
 
-  const props = defineProps<{ modelValue: boolean; editData: CameraSharedItem }>();
+  const props = defineProps<{ modelValue: boolean; editData: CameraShareType }>();
 
-  const emits = defineEmits(['update:modelValue', 'updateData']);
+  const emits = defineEmits(['update:modelValue']);
 
   const addType = ref(cameraAddType[0].value);
 
-  const updateValue = (value) => {
+  const updateValue = () => {
     addType.value = cameraAddType[0].value;
-    emits('update:modelValue', value);
+    emits('update:modelValue', false as boolean);
   };
 
-  const onAddCamera = (data) => {
-    updateValue(false);
-    emits('updateData', data);
-  };
+  // const onAddCamera = (data) => {
+  //   updateValue(false);
+  //   emits('updateData', data);
+  // };
 </script>
 
 <style scoped lang="scss">

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

@@ -4,7 +4,7 @@
       <el-form
         class="ip-form"
         :inline="true"
-        :model="cameraIPData"
+        :model="cameraEditData"
         :rules="rules"
         label-width="84px"
         label-position="left"
@@ -17,7 +17,7 @@
         >
           <el-input
             v-if="item.type === 'input'"
-            v-model="cameraIPData[item.prop]"
+            v-model="cameraEditData[item.prop]"
             :placeholder="item.placeholder"
             style="width: 200px"
             :type="item.prop === 'password' ? 'password' : ''"
@@ -26,7 +26,7 @@
           />
           <el-tree-select
             v-if="item.type === 'tree-select'"
-            v-model="cameraIPData[item.prop]"
+            v-model="cameraEditData[item.prop]"
             :data="scenesTree"
             :render-after-expand="false"
             :default-expand-all="true"
@@ -47,18 +47,23 @@
 
 <script setup lang="ts">
   import { computed, onBeforeMount, ref } from 'vue';
-  import { CameraSharedItem, cameraSharedForm } from '../constant';
-  import { cloneDeep } from 'lodash-es';
+  import { cameraSharedForm } from '../constant';
+
   import useSceneInfos from '@/hooks/useSceneInfos';
+  import useCameraShare from '../stores/useCameraShare';
+  import { CameraShareType } from '@/api/camera/camera-share';
+
+  const useShare = useCameraShare();
+  const { handleEdit } = useShare;
 
   const sceneInfos = useSceneInfos();
   const { scenesTree, flattendWorkspaces, getScenesTree } = sceneInfos;
 
-  const props = defineProps<{ formData?: CameraSharedItem | null }>();
+  const props = defineProps<{ formData?: CameraShareType | null }>();
 
   const emits = defineEmits(['cancel-execute', 'confirm-execute']);
 
-  const cameraIPData = ref<CameraSharedItem>({} as CameraSharedItem);
+  const cameraEditData = ref<CameraShareType>({} as CameraShareType);
 
   const rules = computed(() => {
     const newRule = {};
@@ -71,7 +76,9 @@
   });
 
   const handleTreeSelect = (code: string) => {
-    cameraIPData.value.workspaceId = flattendWorkspaces.value.find((item) => item.code === code).id;
+    cameraEditData.value.cameraWorkspace = flattendWorkspaces.value.find(
+      (item) => item.code === code,
+    ).id;
   };
 
   const handleCancel = () => {
@@ -79,14 +86,20 @@
   };
 
   const handleConfirm = () => {
-    const copyData = cloneDeep(cameraIPData.value);
-    emits('confirm-execute', copyData);
+    const updateData = {
+      id: cameraEditData.value.id,
+      cameraName: cameraEditData.value.cameraName,
+      cameraWorkspace: cameraEditData.value.cameraWorkspace,
+      cameraCode: cameraEditData.value.cameraCode,
+    };
+    handleEdit(updateData);
+    emits('confirm-execute');
   };
 
   onBeforeMount(() => {
     getScenesTree({ level: 3, valueKey: 'code', labelKey: 'name', disabled: true });
     if (props.formData) {
-      cameraIPData.value = props.formData;
+      cameraEditData.value = props.formData;
     }
   });
 </script>

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

@@ -9,9 +9,9 @@
         label-width="84px"
         label-position="left"
       >
-        <el-form-item label="企业账号：" prop="account" style="margin-right: 100px">
+        <el-form-item label="企业账号：" prop="tenantCode" style="margin-right: 100px">
           <el-input
-            v-model="shareData.account"
+            v-model="shareData.tenantCode"
             placeholder="请输入企业账号"
             class="company-input"
           />
@@ -24,8 +24,8 @@
             >验证</el-button
           >
         </el-form-item>
-        <el-form-item label="权限设置：" prop="authority">
-          <el-radio-group v-model="shareData.authority" class="ml-4">
+        <el-form-item label="权限设置：" prop="permission">
+          <el-radio-group v-model="shareData.permission" class="ml-4">
             <el-radio v-for="item in authorityTypeSelect" :label="item.value" :key="item.value">{{
               item.label
             }}</el-radio>
@@ -33,17 +33,17 @@
         </el-form-item>
         <el-form-item
           label="企业名称："
-          prop="name"
+          prop="tenantName"
           class="company-name"
           style="margin-right: 160px"
         >
           <el-input
-            v-model="shareData.name"
+            v-model="shareData.tenantName"
             placeholder="请输入企业账号"
             readonly
             style="width: 200px; height: 32px"
           />
-          <div v-if="shareData.name" class="verify-success">账号验证成功</div>
+          <div v-if="shareData.tenantName" class="verify-success">账号验证成功</div>
         </el-form-item>
         <el-form-item label="分享时间：" prop="time">
           <el-radio-group v-model="shareData.time" class="ml-4" @change="changeTime">
@@ -63,13 +63,13 @@
           >
         </el-form-item>
         <el-form-item label="备注：" prop="notes">
-          <el-input v-model="shareData.notes" placeholder="请输入备注" style="width: 765px" />
+          <el-input v-model="shareData.remark" placeholder="请输入备注" style="width: 765px" />
         </el-form-item>
         <el-button type="primary" @click="handleConfirm" class="confirm">确定</el-button>
         <el-form-item label="分享企业：" prop="shareList" class="company-table">
           <BasicTable
-            :columns="columns"
-            :data-source="shareData.shareList"
+            :columns="getColumns(handleEditState)"
+            :data-source="cameraShareList"
             :row-key="(row) => row.code"
             :action-column="actionColumn"
             :showHeader="false"
@@ -91,29 +91,65 @@
 </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';
+  import { getVerify } from '@/api/camera/camera-share';
+
+  const useShare = useCameraShare();
+  const {
+    cameraShareList,
+    queryName,
+    queryAccount,
+    isAddState,
+    queryCameraId,
+    conditionSearch,
+    handleDel,
+    handleAdd,
+    handleEdit,
+  } = useShare;
 
   const props = defineProps<{ formData?: CameraShowItem | null }>();
 
+  // onMounted(() => {});
+  onMounted(() => {
+    //获取数据
+    queryCameraId.value = props.formData?.id;
+    console.log('queryCameraId', props.formData?.code);
+    conditionSearch();
+  });
+
   const shareData = ref<CameraShareItem>({
-    account: undefined,
-    authority: 'look',
-    name: '',
+    tenantCode: undefined,
+    toTenantId: undefined,
+    permission: '0',
+    tenantName: '',
     time: 'Indefinite',
     days: undefined,
-    notes: '',
+    remark: '',
     shareList: [],
   });
 
-  const handleEdit = (_row) => {};
+  // 将columns改为getcolumns(handleEditState);
+  const handleEditState = (row) => {
+    const editData = {
+      id: row.id as number,
+      connected: row.connected ? false : true,
+    };
+    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 +166,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,
@@ -146,7 +182,11 @@
   });
 
   const verifyAccount = () => {
-    shareData.value.name = 'C' + shareData.value.account;
+    // shareData.value.name = 'C' + shareData.value.account;
+    getVerify(shareData.value.tenantCode!).then((res) => {
+      shareData.value.tenantName = res.tenantName;
+      shareData.value.toTenantId = res.tenantId;
+    });
   };
 
   const changeTime = () => {
@@ -156,12 +196,33 @@
   const changeTimeDay = () => {};
 
   const handleConfirm = () => {
+    //接口
+    // console.log('shareData', shareData.value);
+    // const currentDate = new Date();
+    // console.log('currentDate', currentDate);
+    console.log('props.formData', props.formData);
+    console.log('shareData.value', shareData.value);
+
     const addShareItem = {
-      name: shareData.value.name,
-      account: shareData.value.account!,
-      networkingState: props.formData?.networkingState,
+      cameraId: props.formData?.id,
+      toTenantId: shareData.value.toTenantId,
+      // tenantCode: shareData.value.tenantCode,
+      permission: shareData.value.permission,
+      // tenantName: shareData.value.tenantName,
+      endTime: '2023-03-12 11:45:44',
+      isAdd: false,
+      remark: shareData.value.remark,
+      // ...props.formData,
     };
-    shareData.value.shareList.push(addShareItem);
+    queryCameraId.value = props.formData?.id;
+    handleAdd(addShareItem); //数据未调整
+
+    // const addShareItem = {
+    //   name: shareData.value.name,
+    //   account: shareData.value.account!,
+    //   networkingState: props.formData?.networkingState,
+    // };
+    // shareData.value.shareList.push(addShareItem);
   };
 </script>
 

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"
+        :columns="getColumns(flattendWorkspaces)"
+        :data-source="cameraShareList"
         :row-key="(row) => row.cameraIp"
         :action-column="actionColumn"
         :tableSetting="{
@@ -47,49 +48,83 @@
       class="add-popover"
       v-model="shareEditedPopover"
       :edit-data="handleEditData"
-      @update-data="updateData"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-  import { h, reactive, ref } from 'vue';
-  import { columns } from '../sharedColumns';
+  import { h, reactive, ref, onMounted, watch, onBeforeMount } from 'vue';
+  import { getColumns } from '../sharedColumns';
   import editIcon from '@/assets/images/table/table-edit.png';
   import deleteIcon from '@/assets/images/table/table-delete.png';
-  import { CameraSharedItem } from '../constant';
   import { BasicColumn, TableActionIconsWords, BasicTable } from '@/components/Table';
   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 useSceneInfos from '@/hooks/useSceneInfos';
+  import { CameraShareType } from '@/api/camera/camera-share';
+
+  const useShare = useCameraShare();
+  const {
+    cameraShareList,
+    queryName,
+    queryAccount,
+    isAddState,
+    queryToTenantId,
+    conditionSearch,
+    handleDel,
+    handleEdit,
+  } = useShare;
+
+  const sceneInfos = useSceneInfos();
+  const { flattendWorkspaces, getScenesTree } = sceneInfos;
 
   const props = defineProps<{ addCameraType: string }>();
+  onMounted(() => {
+    isAddState.value = props.addCameraType === 'incomplete' ? false : true;
+    console.log('isAddState', isAddState.value);
+    queryToTenantId.value = -10;
+    conditionSearch();
+    console.log(cameraShareList.value);
+  });
 
   const shareEditedPopover = ref<boolean>(false);
 
-  const handleEditData = ref<CameraSharedItem>({} as CameraSharedItem);
+  const handleEditData = ref<CameraShareType>({} as CameraShareType);
 
-  const handleEdit = (row) => {
+  const handleEditDetail = (row) => {
     shareEditedPopover.value = true;
+    row.cameraWorkspaceName = flattendWorkspaces.value?.find(
+      (item) => item.id === Number(row.cameraWorkspace),
+    )?.code;
     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;
-    }
+  // 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;
+  //   // }
+  // };
+
+  //添加按钮
+  const handleChangeAdd = (row) => {
+    const changeAddData = {
+      id: row.id,
+      isAdd: row.isAdd ? false : true,
+    };
+    handleEdit(changeAddData);
+  };
+
+  const handleDelete = (row) => {
+    console.log('row', row);
+    handleDel(row.cameraId);
   };
 
   //操作列
@@ -109,26 +144,49 @@
           {
             label: '添加',
             type: 'words' + 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: '删除',
             type: 'img',
             icon: deleteIcon,
-            onClick: handleDelete.bind(null, record.row, props.addCameraType),
+            onClick: handleDelete.bind(null, record.row),
           },
         ],
       });
     },
   });
 
-  const queryCameraItems = () => {};
+  //查询
+  const queryCameraItems = () => {
+    isAddState.value = props.addCameraType === 'incomplete' ? false : true;
+    conditionSearch();
+  };
+  //重置
+  const resetSearch = () => {
+    queryName.value = '';
+    queryAccount.value = '';
+  };
+
+  watch(
+    () => props.addCameraType,
+    (_val) => {
+      resetSearch();
+      isAddState.value = props.addCameraType === 'incomplete' ? false : true;
+      console.log('isAddState', isAddState.value);
+      conditionSearch();
+    },
+  );
+
+  onBeforeMount(() => {
+    getScenesTree({ level: 3, valueKey: 'code', labelKey: 'name', disabled: true });
+  });
 </script>
 
 <style scoped>

src/views/cameras/overview/constant.ts

@@ -208,11 +208,11 @@ type CameraShareFormItem = {
 
 export const authorityTypeSelect = [
   {
-    value: 'look',
+    value: '0',
     label: '仅可查看',
   },
   {
-    value: 'operate',
+    value: '1',
     label: '可远程控制',
   },
 ];
@@ -282,9 +282,9 @@ export const cameraShareForm: CameraShareFormItem[] = [
 ];
 
 export const rules = {
-  account: [{ required: true, message: '请输入企业账号', trigger: 'blur' }],
-  authority: [{ required: true, message: '', trigger: 'change' }],
-  name: [{ required: true, message: '请输入企业名称', trigger: 'change' }],
+  tenantCode: [{ required: true, message: '请输入企业账号', trigger: 'blur' }],
+  permission: [{ required: true, message: '', trigger: 'change' }],
+  tenantName: [{ required: true, message: '', trigger: 'change' }],
   time: [{ required: true, message: '', trigger: 'change' }],
   shareList: [{ required: true, message: '', trigger: 'blur' }],
 };
@@ -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: 'connected',
+      render(record) {
+        return h(
+          'img',
+          {
+            src: record.row.connected ? connectedIcon : unConnectedIcon,
+            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: 'tenantName',
+      minWidth: 200,
+    },
+    {
+      label: '账号',
+      prop: 'tenantCode',
+      minWidth: 200,
+    },
+    {
+      label: '联网状态',
+      prop: 'connected',
+      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.connected ? '断开分享' : '分享';
+            },
+          },
+        );
+      },
+      minWidth: 120,
+    },
+  ];
+};
+
 export const sharedCaremaType = [
   {
     value: 'incomplete',
@@ -357,7 +416,7 @@ export const sharedCaremaType = [
 export const cameraSharedForm: CameraAddFormItem[] = [
   {
     label: '名称：',
-    prop: 'name',
+    prop: 'cameraName',
     placeholder: '请输入名称',
     type: 'input',
     required: true,
@@ -402,7 +461,7 @@ export const cameraSharedForm: CameraAddFormItem[] = [
   },
   {
     label: '场景：',
-    prop: 'workspaceCode',
+    prop: 'cameraWorkspaceName',
     placeholder: '请输入场景名称',
     type: 'tree-select',
     required: true,
@@ -429,7 +488,7 @@ export const cameraSharedForm: CameraAddFormItem[] = [
   },
   {
     label: '企业账号：',
-    prop: 'companyAccount',
+    prop: 'tenantCode',
     placeholder: '请输入企业账号',
     type: 'input',
     disabled: true,
@@ -437,7 +496,7 @@ export const cameraSharedForm: CameraAddFormItem[] = [
   },
   {
     label: '设备ID号：',
-    prop: 'code',
+    prop: 'cameraCode',
     placeholder: '自定义ID，不能重复',
     type: 'input',
     required: true,
@@ -446,7 +505,7 @@ export const cameraSharedForm: CameraAddFormItem[] = [
   },
   {
     label: '企业名称：',
-    prop: 'companyName',
+    prop: 'tenantName',
     placeholder: '请输入企业名称',
     type: 'input',
     disabled: true,

src/views/cameras/overview/sharedColumns.ts

@@ -1,62 +1,166 @@
 import { h } from 'vue';
 import type { BasicColumn } from '@/components/Table';
 import { protocalTypeSelect } from './constant';
+import useSceneInfos from '@/hooks/useSceneInfos';
 
-export const columns: BasicColumn[] = [
-  {
-    label: '序号',
-    minWidth: 60,
-    type: 'index',
-    fixed: 'left',
-  },
-  {
-    label: 'IP地址',
-    prop: 'cameraIp',
-    minWidth: 140,
-  },
-  {
-    label: '协议类型',
-    prop: 'cameraType',
-    minWidth: 120,
-    render(record) {
-      return h(
-        'span',
-        {},
-        {
-          default: () =>
-            protocalTypeSelect.find((item) => item.value === record.row.cameraType)?.label,
-        },
-      );
-    },
-  },
-  {
-    label: '端口地址',
-    prop: 'cameraPort',
-    minWidth: 120,
-  },
-  {
-    label: '企业账号',
-    prop: 'companyAccount',
-    minWidth: 140,
-  },
-  {
-    label: '企业名称',
-    prop: 'companyName',
-    minWidth: 140,
-  },
-  {
-    label: '设备ID',
-    prop: 'code',
-    minWidth: 150,
-  },
-  {
-    label: '车间场景',
-    prop: 'workshopName',
-    minWidth: 140,
-  },
-  {
-    label: '工位场景',
-    prop: 'workspaceName',
-    minWidth: 140,
-  },
-];
+// export const columns: BasicColumn[] = [
+//   {
+//     label: '序号',
+//     minWidth: 60,
+//     type: 'index',
+//     fixed: 'left',
+//   },
+//   {
+//     label: 'IP地址',
+//     prop: 'cameraIp',
+//     minWidth: 140,
+//   },
+//   {
+//     label: '协议类型',
+//     prop: 'cameraType',
+//     minWidth: 120,
+//     render(record) {
+//       return h(
+//         'span',
+//         {},
+//         {
+//           default: () => {
+//             return protocalTypeSelect.find((item) => item.value === record.row.cameraType)?.label;
+//           },
+//         },
+//       );
+//     },
+//   },
+//   {
+//     label: '端口地址',
+//     prop: 'cameraPort',
+//     minWidth: 120,
+//   },
+//   {
+//     label: '企业账号',
+//     prop: 'tenantCode',
+//     minWidth: 140,
+//   },
+//   {
+//     label: '企业名称',
+//     prop: 'tenantName',
+//     minWidth: 140,
+//   },
+//   {
+//     label: '设备ID',
+//     prop: 'cameraCode',
+//     minWidth: 150,
+//   },
+//   {
+//     label: '车间场景',
+//     prop: 'workspaceName',
+//     minWidth: 140,
+//   },
+//   {
+//     label: '工位场景',
+//     prop: 'cameraWorkspace',
+//     minWidth: 140,
+//     render(record) {
+//       const sceneInfos = useSceneInfos();
+//       const { flattendWorkspaces } = sceneInfos;
+//       return h(
+//         'span',
+//         {},
+//         {
+//           default: () => {
+//             const code = flattendWorkspaces.value.find(
+//               (item) => item.code === record.row.cameraWorkspace,
+//             );
+//             console.log('flattendWorkspaces', flattendWorkspaces.value);
+
+//             console.log('record.row.cameraWorkspace', code);
+//             return record.row.cameraWorkspace;
+//             return flattendWorkspaces.value.find((item) => item.code === record.row.cameraWorkspace)
+//               ?.id;
+
+//             // return protocalTypeSelect.find((item) => item.value === record.row.cameraType)?.label;
+//           },
+//         },
+//       );
+//     },
+//   },
+// ];
+
+export const getColumns = (flattendWorkspaces): BasicColumn[] => {
+  return [
+    {
+      label: '序号',
+      minWidth: 60,
+      type: 'index',
+      fixed: 'left',
+    },
+    {
+      label: 'IP地址',
+      prop: 'cameraIp',
+      minWidth: 140,
+    },
+    {
+      label: '协议类型',
+      prop: 'cameraType',
+      minWidth: 120,
+      render(record) {
+        return h(
+          'span',
+          {},
+          {
+            default: () => {
+              return protocalTypeSelect.find((item) => item.value === record.row.cameraType)?.label;
+            },
+          },
+        );
+      },
+    },
+    {
+      label: '端口地址',
+      prop: 'cameraPort',
+      minWidth: 120,
+    },
+    {
+      label: '企业账号',
+      prop: 'tenantCode',
+      minWidth: 140,
+    },
+    {
+      label: '企业名称',
+      prop: 'tenantName',
+      minWidth: 140,
+    },
+    {
+      label: '设备ID',
+      prop: 'cameraCode',
+      minWidth: 150,
+    },
+    {
+      label: '车间场景',
+      prop: 'workspaceName',
+      minWidth: 140,
+    },
+    {
+      label: '工位场景',
+      prop: 'cameraWorkspace',
+      minWidth: 140,
+      render(record) {
+        // const sceneInfos = useSceneInfos();
+        // const { flattendWorkspaces } = sceneInfos;
+        return h(
+          'span',
+          {},
+          {
+            default: () => {
+              return flattendWorkspaces?.find(
+                (item) => item.id === Number(record.row.cameraWorkspace),
+              )?.code;
+
+              // return protocalTypeSelect.find((item) => item.value === record.row.cameraType)?.label;
+            },
+          },
+        );
+      },
+    },
+  ];
+};

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

@@ -12,140 +12,89 @@ 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 queryAccount = ref<string>('');
   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,
+        isAdd: isAddState.value,
+      };
+      if (queryName.value) {
+        params.tenantName = queryName.value;
+      }
+
+      if (queryAccount.value) {
+        params.tenantCode = queryAccount.value;
+      }
+      if (queryCameraId.value) {
+        console.log('aa');
+
+        params.cameraId = queryCameraId.value;
+      }
+      if (queryToTenantId.value) {
+        params.toTenantId = queryToTenantId.value;
+      }
+      getShareCameraList(params).then((res) => {
+        cameraShareList.value = res.records;
+        console.log('res', cameraShareList.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;
+        // 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,
+    queryToTenantId,
     conditionSearch,
-    cameraIncompleted,
-    unAddlength,
+    handleDel,
     handleAdd,
-    handleDelete,
-    resetSearch,
+    handleEdit,
   };
 };
 
-export default useCameraShare;
+export default useCameraShared;

src/views/cameras/overview/type.ts

@@ -65,17 +65,18 @@ interface CompanyShareItem {
 
 export interface CameraShareItem {
   /** 企业账号 */
-  account: number | undefined;
+  tenantCode: string | undefined;
+  toTenantId?: number;
   /** 权限设置 */
-  authority: string;
+  permission: string;
   /** 企业名称 */
-  name: string;
+  tenantName: string;
   /** 分享时间 */
   time?: string;
   /** 分享的有限期时间 */
   days?: number;
   /** 备注 */
-  notes?: string;
+  remark?: string;
   /** 密码 */
   shareList: CompanyShareItem[];
 }