共享相机

src/components/Table/index.ts

@@ -1,5 +1,6 @@
 export { default as BasicTable } from './src/Table.vue';
 export { default as TableAction } from './src/components/TableAction.vue';
 export { default as TableActionIcons } from './src/components/TableActionIcons.vue';
+export { default as TableActionIconsWords } from './src/components/TableActionIconsWords.vue';
 export * from './src/types/table';
 export * from './src/types/tableAction';

src/components/Table/src/components/TableActionIconsWords.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="flex items-center justify-center">
+    <el-space :size="space">
+      <div v-for="item in props.actionIcons" :key="item.label" @click="item.onClick">
+        <el-tooltip :content="item.label" effect="light">
+          <el-icon v-if="item.type === 'icon'" :color="props.color" :size="props.size">
+            <component :is="item.icon" />
+          </el-icon>
+          <img v-if="item.type === 'img'" :src="item.icon" :style="{ width: `${props.size}px` }" />
+        </el-tooltip>
+        <div v-if="item.type === 'words'" style="color: rgb(17, 153, 232)">{{ item.label }}</div>
+      </div>
+    </el-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ActionItem } from '@/components/Table';
+
+  const props = defineProps<{
+    space: number;
+    size: number;
+    color: string;
+    style: 'img' | 'icon';
+    actionIcons: ActionItem[];
+  }>();
+</script>
+
+<style scoped></style>

src/views/cameras/overview/CamerasOverview.vue

@@ -25,6 +25,7 @@
         <template #tableTitle>
           <el-button type="primary" :icon="Plus" @click="showAddPopover = true">添加</el-button>
           <el-button color="#1890FF" @click="showSharedPopover = true" plain>共享相机</el-button>
+          <div class="add-tip" v-if="unAddlength > 0">{{ unAddlength }}</div>
         </template>
         <template #empty>
           <div class="empty-content flex flex-col items-center">
@@ -62,6 +63,10 @@
   import { CameraIPItem, CameraShowItem } from './type';
   import { deleteCameraItem } from '@/api/camera/camera-overview';
   import { ElMessage, ElMessageBox } from 'element-plus';
+  import useCameraShared from './stores/useSharedCamera';
+
+  const CameraShared = useCameraShared();
+  const { unAddlength } = storeToRefs(CameraShared);
 
   const cameraOverview = useCameraOverview();
   const { cameraItems, loading, total, page, size } = storeToRefs(cameraOverview);
@@ -195,6 +200,13 @@
     text-align: center;
   }
 
+  .add-tip {
+    position: absolute;
+    left: 187px;
+    top: 64px;
+    font-size: 16px;
+    color: red;
+  }
   .add-popover {
     position: absolute;
     width: calc(100% - 21px);

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

@@ -12,7 +12,6 @@
         @confirm-execute="onAddCamera"
         :form-data="props.editData"
       />
-      <!-- <RangeAddCamera v-if="addType === 'ipRange'" @cancel-execute="updateValue(false)" /> -->
     </div>
   </el-card>
 </template>
@@ -22,17 +21,11 @@
   import { CameraSharedItem, cameraAddType } from '../constant';
   import { Close } from '@element-plus/icons-vue';
   import EditSharedCamera from './EditSharedCamera.vue';
-  import RangeAddCamera from './AddCameraByRange.vue';
-  import useCameraOverview from '../stores/useCameraOverview';
-  import { emit } from 'process';
 
   const props = defineProps<{ modelValue: boolean; editData: CameraSharedItem }>();
 
   const emits = defineEmits(['update:modelValue', 'updateData']);
 
-  const cameraOverview = useCameraOverview();
-  const { addCamera } = cameraOverview;
-
   const addType = ref(cameraAddType[0].value);
 
   const updateValue = (value) => {
@@ -41,10 +34,8 @@
   };
 
   const onAddCamera = (data) => {
-    // addCamera(data);
     updateValue(false);
     emits('updateData', data);
-    // console.log('data', data);
   };
 </script>
 

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

@@ -18,14 +18,6 @@
       </div>
     </template>
     <div><SharedTable :addCameraType="addType" /></div>
-    <!-- <div class="pop-content flex justify-center items-center">
-      <IPAddCamera
-        v-if="addType === 'ip'"
-        @cancel-execute="updateValue(false)"
-        @confirm-execute="onAddCamera"
-      />
-      <RangeAddCamera v-if="addType === 'ipRange'" @cancel-execute="updateValue(false)" />
-    </div> -->
   </el-card>
 </template>
 
@@ -34,28 +26,17 @@
   import { sharedCaremaType } from '../constant';
   import { Close } from '@element-plus/icons-vue';
   import SharedTable from './SharedTable.vue';
-  import IPAddCamera from './AddCameraByIP.vue';
-  import RangeAddCamera from './AddCameraByRange.vue';
-  import useCameraOverview from '../stores/useCameraOverview';
 
   const props = defineProps<{ modelValue: boolean }>();
 
   const emits = defineEmits(['update:modelValue']);
 
-  const cameraOverview = useCameraOverview();
-  const { addCamera } = cameraOverview;
-
   const addType = ref(sharedCaremaType[0].value);
 
   const updateValue = (value) => {
     addType.value = sharedCaremaType[0].value;
     emits('update:modelValue', value);
   };
-
-  const onAddCamera = (data) => {
-    addCamera(data);
-    updateValue(false);
-  };
 </script>
 
 <style scoped lang="scss">

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

@@ -22,32 +22,8 @@
             style="width: 200px"
             :type="item.prop === 'password' ? 'password' : ''"
             :show-password="item.prop === 'password'"
-            :disabled="item.prop === 'principal' && props.formData !== undefined"
+            :disabled="item.disabled"
           />
-          <el-select
-            v-if="item.type === 'select'"
-            v-model="cameraIPData[item.prop]"
-            :placeholder="item.placeholder"
-            style="width: 200px"
-          >
-            <el-option
-              v-for="protocal in item.option"
-              :key="protocal.value"
-              :label="protocal.label"
-              :value="protocal.value"
-            />
-          </el-select>
-          <!-- <el-tree-select
-            v-if="item.type === 'tree-select'"
-            v-model="cameraIPData[item.prop]"
-            :data="scenesTree"
-            :render-after-expand="false"
-            :default-expand-all="true"
-            check-strictly
-            :placeholder="item.placeholder"
-            style="width: 200px"
-            @change="handleTreeSelect"
-          /> -->
         </el-form-item>
       </el-form>
     </div>
@@ -60,18 +36,13 @@
 
 <script setup lang="ts">
   import { computed, onBeforeMount, ref } from 'vue';
-  import { CameraIPItem } from '../type';
   import { CameraSharedItem, cameraSharedForm } from '../constant';
-  import useSceneInfos from '@/hooks/useSceneInfos';
   import { cloneDeep } from 'lodash-es';
 
   const props = defineProps<{ formData?: CameraSharedItem | null }>();
 
   const emits = defineEmits(['cancel-execute', 'confirm-execute']);
 
-  const sceneInfos = useSceneInfos();
-  const { scenesTree, flattendWorkspaces, getScenesTree } = sceneInfos;
-
   const cameraIPData = ref<CameraSharedItem>({} as CameraSharedItem);
 
   const rules = computed(() => {
@@ -90,19 +61,10 @@
 
   const handleConfirm = () => {
     const copyData = cloneDeep(cameraIPData.value);
-    // copyData.workspaceId = flattendWorkspaces.value.find(
-    //   (item) => item.code === cameraIPData.value.workspaceCode,
-    // ).id;
-    // delete (copyData as any).workspaceCode;
     emits('confirm-execute', copyData);
   };
 
-  // const handleTreeSelect = (code: string) => {
-  //   cameraIPData.value.workspaceId = flattendWorkspaces.value.find((item) => item.code === code).id;
-  // };
-
   onBeforeMount(() => {
-    getScenesTree({ level: 3, valueKey: 'code', labelKey: 'name', disabled: true });
     if (props.formData) {
       cameraIPData.value = props.formData;
     }

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

@@ -110,17 +110,17 @@
     shareList: [
       {
         name: 'C203',
-        account: 111,
+        account: 111777777777,
         networkingState: 0,
       },
       {
         name: 'C204',
-        account: 111,
+        account: 111888888888,
         networkingState: 0,
       },
       {
         name: 'C205',
-        account: 111,
+        account: 111999999999,
         networkingState: 1,
       },
     ],
@@ -159,7 +159,7 @@
   });
 
   const verifyAccount = () => {
-    shareData.value.name = shareData.value.account + '公司';
+    shareData.value.name = 'C' + shareData.value.account;
   };
 
   const changeTime = () => {

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

@@ -29,7 +29,7 @@
     <div class="camera-list">
       <BasicTable
         :columns="columns"
-        :data-source="props.addCameraType === 'complete' ? cameraCompleted : cameraInCompleted"
+        :data-source="props.addCameraType === 'complete' ? cameraCompleted : cameraIncompleted"
         :row-key="(row) => row.cameraIp"
         :action-column="actionColumn"
         :tableSetting="{
@@ -53,98 +53,42 @@
 </template>
 
 <script setup lang="ts">
-  import { h, onMounted, reactive, ref, computed } from 'vue';
+  import { h, reactive, ref } from 'vue';
   import { columns } from '../sharedColumns';
   import editIcon from '@/assets/images/table/table-edit.png';
   import deleteIcon from '@/assets/images/table/table-delete.png';
-  import { queryTypeSelect, protocalTypeSelect, CameraSharedItem } from '../constant';
-  import useCameraOverview from '../stores/useCameraOverview';
-  import useSceneInfos from '@/hooks/useSceneInfos';
-  import { storeToRefs } from 'pinia';
-  import { BasicColumn, TableActionIcons, BasicTable } from '@/components/Table';
-  import { Plus } from '@element-plus/icons-vue';
+  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 props = defineProps<{ addCameraType: string }>();
+  const CameraShared = useCameraShared();
+  const { queryName, queryAccount, cameraCompleted, cameraIncompleted } = storeToRefs(CameraShared);
+  const { handleAdd, handleDelete, resetSearch } = CameraShared;
 
-  const cameraCompleted = ref<CameraSharedItem[]>([
-    {
-      cameraIp: '11133',
-      cameraType: 'haikang',
-      cameraPort: '11',
-      companyAccount: 111,
-      companyName: '1111',
-      code: '3',
-      workshopName: '222',
-      workspaceName: '2233',
-      shareState: 'complete',
-      password: '11',
-      username: '22',
-    },
-  ]);
-  const cameraInCompleted = ref<CameraSharedItem[]>([
-    {
-      cameraIp: '111',
-      cameraType: 'haikang',
-      cameraPort: '11',
-      companyAccount: 111,
-      companyName: '1111',
-      code: '1',
-      workshopName: '222',
-      workspaceName: '2233',
-      shareState: 'incomplete',
-      password: '11',
-      username: '22',
-    },
-    {
-      cameraIp: '11122',
-      cameraType: 'haikang',
-      cameraPort: '11',
-      companyAccount: 111,
-      companyName: '1111',
-      code: '2',
-      workshopName: '222',
-      workspaceName: '2233',
-      shareState: 'incomplete',
-      password: '11',
-      username: '22',
-    },
-  ]);
+  const props = defineProps<{ addCameraType: string }>();
 
-  const queryName = ref<string>();
-  const queryAccount = ref<string>();
   const shareEditedPopover = ref<boolean>(false);
 
-  const handleAdd = (row) => {
-    if (props.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!);
-    }
-  };
-
   const handleEditData = ref<CameraSharedItem>({} as CameraSharedItem);
+
   const handleEdit = (row) => {
     shareEditedPopover.value = true;
     handleEditData.value = row;
   };
-  const handleDelete = (_row) => {};
 
   const updateData = (data) => {
-    console.log(data);
     if (props.addCameraType === 'complete') {
-      //   const currentData = cameraCompleted.value.find((item) => (item.cameraIp = data.cameraIp));
-      const indexToRemove = cameraInCompleted.value.findIndex(
-        (item) => item.cameraIp === row.cameraIp,
+      const indexToEdit = cameraIncompleted.value.findIndex(
+        (item) => item.cameraIp === data.cameraIp,
       );
-      currentData = data;
+      cameraIncompleted.value[indexToEdit] = data;
     } else {
+      const indexToEdit = cameraCompleted.value.findIndex(
+        (item) => item.cameraIp === data.cameraIp,
+      );
+      cameraCompleted.value[indexToEdit] = data;
     }
   };
 
@@ -156,7 +100,7 @@
     key: 'action',
     fixed: 'right',
     render(record) {
-      return h(TableActionIcons as any, {
+      return h(TableActionIconsWords as any, {
         space: 20,
         color: '#629bf9',
         style: 'img',
@@ -164,18 +108,20 @@
         actionIcons: [
           {
             label: '添加',
-            icon: Plus,
-            onClick: handleAdd.bind(null, record.row),
+            type: 'words',
+            onClick: handleAdd.bind(null, record.row, props.addCameraType),
           },
           {
             label: '编辑',
+            type: 'img',
             icon: editIcon,
             onClick: handleEdit.bind(null, record.row),
           },
           {
             label: '删除',
+            type: 'img',
             icon: deleteIcon,
-            onClick: handleDelete.bind(null, record.row),
+            onClick: handleDelete.bind(null, record.row, props.addCameraType),
           },
         ],
       });
@@ -183,18 +129,6 @@
   });
 
   const queryCameraItems = () => {};
-
-  // 重置查询条件
-  const resetSearch = () => {
-    queryName.value = '';
-    queryAccount.value = '';
-    // queryCameraType.value = '';
-    // queryWorkSpace.value = '';
-  };
-
-  //   onMounted(() => {
-  //     getScenesTree({ level: 3, valueKey: 'code', labelKey: 'name' });
-  //   });
 </script>
 
 <style scoped>

src/views/cameras/overview/constant.ts

@@ -54,6 +54,7 @@ type CameraAddFormItem = {
   required: boolean;
   rule?: any[];
   labelWidth?: string;
+  disabled?: boolean;
 };
 
 export const cameraIPAddForm: CameraAddFormItem[] = [
@@ -283,7 +284,7 @@ export const cameraShareForm: CameraShareFormItem[] = [
 export const rules = {
   account: [{ required: true, message: '请输入企业账号', trigger: 'blur' }],
   authority: [{ required: true, message: '', trigger: 'change' }],
-  name: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
+  name: [{ required: true, message: '请输入企业名称', trigger: 'change' }],
   time: [{ required: true, message: '', trigger: 'change' }],
   shareList: [{ required: true, message: '', trigger: 'blur' }],
 };
@@ -321,9 +322,16 @@ export const columns: BasicColumn[] = [
     label: '联网状态',
     prop: 'networkingState',
     render(record) {
+      const updateNetworkingState = (row) => {
+        if (row.networkingState === 0) {
+          row.networkingState = 1;
+        } else {
+          row.networkingState = 0;
+        }
+      };
       return h(
         ElTag,
-        {},
+        { onClick: () => updateNetworkingState(record.row), style: 'cursor: pointer;' },
         {
           default: () => {
             return record.row.networkingState === 0 ? '连接' : '断开连接';
@@ -353,6 +361,7 @@ export const cameraSharedForm: CameraAddFormItem[] = [
     placeholder: '请输入名称',
     type: 'input',
     required: true,
+    disabled: false,
     rule: [{ required: true, message: '请输入名称', trigger: 'blur' }],
   },
   {
@@ -361,6 +370,7 @@ export const cameraSharedForm: CameraAddFormItem[] = [
     placeholder: '请输入IP地址',
     type: 'input',
     required: true,
+    disabled: true,
     rule: [{ required: true, message: '请输入IP地址', trigger: 'blur' }],
   },
   {
@@ -369,15 +379,16 @@ export const cameraSharedForm: CameraAddFormItem[] = [
     placeholder: '请输入端口号',
     type: 'input',
     required: true,
+    disabled: true,
     rule: [{ required: true, message: '请输入端口号', trigger: 'blur' }],
   },
   {
     label: '协议类型：',
     prop: 'cameraType',
     placeholder: '请输入协议类型',
-    type: 'select',
+    type: 'input',
     required: true,
-    option: protocalTypeSelect,
+    disabled: true,
     rule: [{ required: true, message: '请输入协议类型', trigger: 'blur' }],
   },
   {
@@ -386,6 +397,7 @@ export const cameraSharedForm: CameraAddFormItem[] = [
     placeholder: '请输入用户名',
     type: 'input',
     required: true,
+    disabled: true,
     rule: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
   },
   {
@@ -394,6 +406,7 @@ export const cameraSharedForm: CameraAddFormItem[] = [
     placeholder: '请输入场景名称',
     type: 'input',
     required: true,
+    disabled: false,
     rule: [{ required: true, message: '请输入场景名称', trigger: 'blur' }],
   },
   {
@@ -402,6 +415,7 @@ export const cameraSharedForm: CameraAddFormItem[] = [
     placeholder: '请输入用户名密码',
     type: 'input',
     required: true,
+    disabled: true,
     rule: [{ required: true, message: '请输入用户名密码', trigger: 'blur' }],
   },
   {
@@ -409,6 +423,7 @@ export const cameraSharedForm: CameraAddFormItem[] = [
     prop: 'companyAccount',
     placeholder: '请输入企业账号',
     type: 'input',
+    disabled: true,
     required: false,
   },
   {
@@ -417,6 +432,7 @@ export const cameraSharedForm: CameraAddFormItem[] = [
     placeholder: '自定义ID，不能重复',
     type: 'input',
     required: true,
+    disabled: false,
     rule: [{ required: true, message: '请输入设备ID号', trigger: 'blur' }],
   },
   {
@@ -424,6 +440,7 @@ export const cameraSharedForm: CameraAddFormItem[] = [
     prop: 'companyName',
     placeholder: '请输入企业名称',
     type: 'input',
+    disabled: true,
     required: false,
   },
 ];

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

@@ -0,0 +1,108 @@
+import { computed, ref } from 'vue';
+import { defineStore } from 'pinia';
+import { CameraSharedItem } from '../constant';
+import { ElMessage } from 'element-plus';
+
+export const useCameraShare = defineStore('camera-share', () => {
+  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',
+    },
+  ]);
+
+  const queryName = ref<string>();
+  const queryAccount = ref<string>();
+
+  const unAddlength = computed(() => {
+    return cameraIncompleted.value.length;
+  });
+
+  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 resetSearch = () => {
+    queryName.value = '';
+    queryAccount.value = '';
+  };
+
+  return {
+    queryName,
+    queryAccount,
+    cameraCompleted,
+    cameraIncompleted,
+    unAddlength,
+    handleAdd,
+    handleDelete,
+    resetSearch,
+  };
+});
+
+export default useCameraShare;