feat: 相机列表数据匹配

mock/camera-config/camera-list.ts

@@ -0,0 +1,125 @@
+import { resultSuccess } from '../_util';
+
+const list = [
+  {
+    cameraIp: '10.10.10.10',
+    cameraMac: '255.255.255.255',
+    cameraPort: '8080',
+    cameraType: 'haikang',
+    code: '',
+    createdAt: '',
+    id: 0,
+    integrationState: 0,
+    isDeleted: 0,
+    name: 'SHGD-XDJS-0001',
+    networkingState: 0,
+    nvrEndAt: '',
+    nvrPeriod: 0,
+    nvrStartAt: '',
+    remark: '',
+    resolution: 0,
+    status: 0,
+    updatedAt: '',
+    workshopId: 'ARJ21部装车间',
+    workspaceId: '200工位',
+  },
+  {
+    cameraIp: '10.10.10.10',
+    cameraMac: '255.255.255.255',
+    cameraPort: '8080',
+    cameraType: 'anxus',
+    code: '',
+    createdAt: '',
+    id: 0,
+    integrationState: 0,
+    isDeleted: 0,
+    name: 'SHGD-XDJS-0002',
+    networkingState: 0,
+    nvrEndAt: '',
+    nvrPeriod: 0,
+    nvrStartAt: '',
+    remark: '',
+    resolution: 0,
+    status: 0,
+    updatedAt: '',
+    workshopId: 'ARJ21部装车间',
+    workspaceId: '200工位',
+  },
+  {
+    cameraIp: '10.10.10.10',
+    cameraMac: '255.255.255.255',
+    cameraPort: '8080',
+    cameraType: 'haikang',
+    code: '',
+    createdAt: '',
+    id: 0,
+    integrationState: 0,
+    isDeleted: 0,
+    name: 'SHGD-XDJS-0003',
+    networkingState: 1,
+    nvrEndAt: '',
+    nvrPeriod: 0,
+    nvrStartAt: '',
+    remark: '',
+    resolution: 0,
+    status: 0,
+    updatedAt: '',
+    workshopId: 'ARJ21部装车间',
+    workspaceId: '200工位',
+  },
+  {
+    cameraIp: '10.10.10.10',
+    cameraMac: '255.255.255.255',
+    cameraPort: '8080',
+    cameraType: 'haikang',
+    code: '',
+    createdAt: '',
+    id: 0,
+    integrationState: 0,
+    isDeleted: 0,
+    name: 'SHGD-XDJS-0004',
+    networkingState: 0,
+    nvrEndAt: '',
+    nvrPeriod: 0,
+    nvrStartAt: '',
+    remark: '',
+    resolution: 0,
+    status: 0,
+    updatedAt: '',
+    workshopId: 'ARJ21部装车间',
+    workspaceId: '200工位',
+  },
+  {
+    cameraIp: '10.10.10.10',
+    cameraMac: '255.255.255.255',
+    cameraPort: '8080',
+    cameraType: 'dahua',
+    code: '',
+    createdAt: '',
+    id: 0,
+    integrationState: 0,
+    isDeleted: 0,
+    name: 'SHGD-XDJS-0005',
+    networkingState: 0,
+    nvrEndAt: '',
+    nvrPeriod: 0,
+    nvrStartAt: '',
+    remark: '',
+    resolution: 0,
+    status: 0,
+    updatedAt: '',
+    workshopId: 'ARJ21部装车间',
+    workspaceId: '200工位',
+  },
+];
+
+export default [
+  {
+    url: '/cameraConfig/getCamera',
+    timeout: 1000,
+    method: 'get',
+    response: () => {
+      return resultSuccess(list);
+    },
+  },
+];

package.json

@@ -32,12 +32,12 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "2.0.9",
-    "@types/fabric": "^5.3.6",
+    "@types/fabric": "5.3.6",
     "@vicons/antd": "0.12.0",
     "@vicons/ionicons5": "0.12.0",
     "@vueup/vue-quill": "1.0.0-beta.8",
     "@vueuse/core": "8.9.4",
-    "@vueuse/router": "^10.6.1",
+    "@vueuse/router": "10.6.1",
     "@wangeditor/editor": "5.1.23",
     "@wangeditor/editor-for-vue": "5.1.12",
     "axios": "0.27.2",
@@ -56,8 +56,9 @@
     "print-js": "1.6.0",
     "qrcode": "1.5.1",
     "qs": "6.11.0",
-    "url-join": "^5.0.0",
+    "url-join": "5.0.0",
     "vue": "3.3.4",
+    "vue-hooks-plus": "1.8.6",
     "vue-router": "4.1.2",
     "vue-types": "4.1.1",
     "vuedraggable": "4.1.0",
@@ -145,4 +146,4 @@
       ]
     }
   }
-}
+}

pnpm-lock.yaml

@@ -9,7 +9,7 @@ dependencies:
     specifier: 2.0.9
     version: 2.0.9(vue@3.3.4)
   '@types/fabric':
-    specifier: ^5.3.6
+    specifier: 5.3.6
     version: 5.3.6
   '@vicons/antd':
     specifier: 0.12.0
@@ -24,7 +24,7 @@ dependencies:
     specifier: 8.9.4
     version: 8.9.4(vue@3.3.4)
   '@vueuse/router':
-    specifier: ^10.6.1
+    specifier: 10.6.1
     version: 10.6.1(vue-router@4.1.2)(vue@3.3.4)
   '@wangeditor/editor':
     specifier: 5.1.23
@@ -81,11 +81,14 @@ dependencies:
     specifier: 6.11.0
     version: 6.11.0
   url-join:
-    specifier: ^5.0.0
+    specifier: 5.0.0
     version: 5.0.0
   vue:
     specifier: 3.3.4
     version: 3.3.4
+  vue-hooks-plus:
+    specifier: ^1.8.6
+    version: 1.8.6(vue@3.3.4)
   vue-router:
     specifier: 4.1.2
     version: 4.1.2(vue@3.3.4)
@@ -1045,6 +1048,10 @@ packages:
     resolution: {integrity: sha512-kow8REgIIG42atN9vAaIdpEqVzj6WzV9m0PII8oce+an4Lc3eyfQF32/FbabbGmfWuF7TceTdd+gh74kOrXkPw==}
     dev: true
 
+  /@types/js-cookie@3.0.6:
+    resolution: {integrity: sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==}
+    dev: false
+
   /@types/json-schema@7.0.11:
     resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
     dev: true
@@ -1392,6 +1399,10 @@ packages:
     resolution: {integrity: sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ==}
     dev: false
 
+  /@vue/devtools-api@6.5.1:
+    resolution: {integrity: sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==}
+    dev: false
+
   /@vue/reactivity-transform@3.3.4:
     resolution: {integrity: sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==}
     dependencies:
@@ -2691,6 +2702,11 @@ packages:
     dev: false
     optional: true
 
+  /decode-uri-component@0.2.2:
+    resolution: {integrity: sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==}
+    engines: {node: '>=0.10'}
+    dev: false
+
   /decompress-response@4.2.1:
     resolution: {integrity: sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==}
     engines: {node: '>=8'}
@@ -3818,6 +3834,11 @@ packages:
       to-regex-range: 5.0.1
     dev: true
 
+  /filter-obj@1.1.0:
+    resolution: {integrity: sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /finalhandler@1.1.2:
     resolution: {integrity: sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==}
     engines: {node: '>= 0.8'}
@@ -4611,6 +4632,11 @@ packages:
     hasBin: true
     dev: true
 
+  /js-cookie@3.0.5:
+    resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
+    engines: {node: '>=14'}
+    dev: false
+
   /js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
     dev: true
@@ -5767,6 +5793,16 @@ packages:
       side-channel: 1.0.4
     dev: false
 
+  /query-string@7.1.3:
+    resolution: {integrity: sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==}
+    engines: {node: '>=6'}
+    dependencies:
+      decode-uri-component: 0.2.2
+      filter-obj: 1.1.0
+      split-on-first: 1.1.0
+      strict-uri-encode: 2.0.0
+    dev: false
+
   /querystringify@2.2.0:
     resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
     requiresBuild: true
@@ -6026,6 +6062,11 @@ packages:
     dev: false
     optional: true
 
+  /screenfull@5.2.0:
+    resolution: {integrity: sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /scroll-into-view-if-needed@2.2.31:
     resolution: {integrity: sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==}
     dependencies:
@@ -6210,6 +6251,11 @@ packages:
     resolution: {integrity: sha512-Ctl2BrFiM0X3MANYgj3CkygxhRmr9mi6xhejbdO960nF6EDJApTYpn0BQnDKlnNBULKiCN1n3w9EBkHK8ZWg+g==}
     dev: true
 
+  /split-on-first@1.1.0:
+    resolution: {integrity: sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==}
+    engines: {node: '>=6'}
+    dev: false
+
   /split2@3.2.2:
     resolution: {integrity: sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==}
     dependencies:
@@ -6232,6 +6278,11 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
+  /strict-uri-encode@2.0.0:
+    resolution: {integrity: sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==}
+    engines: {node: '>=4'}
+    dev: false
+
   /string-argv@0.3.1:
     resolution: {integrity: sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==}
     engines: {node: '>=0.6.19'}
@@ -7004,6 +7055,21 @@ packages:
       - supports-color
     dev: true
 
+  /vue-hooks-plus@1.8.6(vue@3.3.4):
+    resolution: {integrity: sha512-RQfEJkTXYMmHztgAHLhLBc/8n90qz6Pk2xV8WPNDiu+cn9ClwxdjPHvfj6J01BJ8G+tULXEBxD8XO9F1cf0A0w==}
+    peerDependencies:
+      vue: ^3.2.25
+    dependencies:
+      '@types/js-cookie': 3.0.6
+      '@vue/devtools-api': 6.5.1
+      js-cookie: 3.0.5
+      lodash: 4.17.21
+      qs: 6.11.0
+      query-string: 7.1.3
+      screenfull: 5.2.0
+      vue: 3.3.4
+    dev: false
+
   /vue-router@4.1.2(vue@3.3.4):
     resolution: {integrity: sha512-5BP1qXFncVRwgV/XnqzsKApdMjQPqWIpoUBdL1ynz8HyLxIX/UDAx7Ql2BjmA5CXT/p61JfZvkpiFWFpaqcfag==}
     peerDependencies:

src/api/camera/camera-overview.ts

@@ -0,0 +1,26 @@
+import { http } from '@/utils/http/axios';
+import { CameraIPItem } from '@/views/cameras/overview/type';
+
+export type CameraQueryParams = {
+  /** 相机协议类型 */
+  cameraType?: string;
+  /** 设备ID */
+  deviceId?: string;
+  /** 相机IP */
+  ip?: string;
+  /** 场景 */
+  sceneId?: string;
+};
+
+export const getCameraList = (params: CameraQueryParams) => {
+  return http.request<CameraIPItem[]>(
+    {
+      url: '/cameraConfig/getCamera',
+      method: 'get',
+      params,
+    },
+    {
+      urlPrefix: '',
+    },
+  );
+};

src/components/Table/src/Table.vue

@@ -85,7 +85,7 @@
       <el-table
         ref="tableElRef"
         v-bind="getBindValues"
-        v-loading="getLoading"
+        v-loading="tableLoading"
         @sort-change="sortChange"
       >
         <template v-for="item in getTableColumns" :key="item.key">
@@ -209,6 +209,8 @@
   const { getAppTheme, getDarkTheme } = useDesignSetting();
 
   const { getLoading, setLoading } = useLoading(getProps);
+  // loading修改
+  const tableLoading = computed(() => props.loading);
 
   const { getPaginationInfo, setPagination } = usePagination(getProps);
 

src/components/Table/src/hooks/useDataSource.ts

@@ -49,6 +49,8 @@ export function useDataSource(
   });
 
   async function fetch(opt?: {}, isRestReload?) {
+    console.log('fetch====');
+
     try {
       setLoading(true);
       const { request, pagination }: any = unref(propsRef);

src/components/Table/src/props.ts

@@ -92,4 +92,8 @@ export const basicProps = {
     type: Boolean,
     default: false,
   },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
 };

src/views/cameras/overview/CamerasOverview.vue

@@ -8,6 +8,7 @@
         :row-key="(row) => row.name"
         :action-column="actionColumn"
         :pagination="false"
+        :loading="loading"
         :tableSetting="{
           size: false,
           redo: false,
@@ -35,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-  import { h, reactive, ref } from 'vue';
+  import { h, onMounted, reactive, ref } from 'vue';
   import { BasicTable, TableActionIcons } from '@/components/Table';
   import { BasicColumn } from '@/components/Table';
   import { getColumns } from './overviewColumns';
@@ -46,23 +47,15 @@
   import previewIcon from '@/assets/images/table/table-preview.png';
   import editIcon from '@/assets/images/table/table-edit.png';
   import deleteIcon from '@/assets/images/table/table-delete.png';
+  import useCameraOverview from './stores/useCameraOverview';
+  import { storeToRefs } from 'pinia';
 
   // 添加弹窗相关
   const showAddPopover = ref(false);
 
-  const cameraItems = [
-    {
-      cameraIp: '10.10.10.10',
-      protocal: '海康威视',
-      cameraPort: '8080',
-      mac: '255.255.255.255',
-      name: 'SHGD-XDJS-0001',
-      workshopId: 'ARJ21部装车间',
-      workspaceId: '200工位',
-      networkState: 1,
-      status: 1,
-    },
-  ];
+  const cameraOverview = useCameraOverview();
+  const { cameraItems, loading } = storeToRefs(cameraOverview);
+  const { getCameraItems } = cameraOverview;
 
   //操作列
   const actionColumn: BasicColumn = reactive({
@@ -110,6 +103,10 @@
   const handleDelete = () => {};
 
   const handleEdit = () => {};
+
+  onMounted(() => {
+    getCameraItems({});
+  });
 </script>
 
 <style scoped>

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

@@ -39,10 +39,12 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, ref } from 'vue';
+  import { computed, onBeforeMount, ref } from 'vue';
   import { CameraIPItem } from '../type';
   import { cameraIPAddForm } from '../constant';
 
+  const props = defineProps<{ formData?: CameraIPItem | null }>();
+
   const cameraIPData = ref<CameraIPItem>({} as CameraIPItem);
 
   const rules = computed(() => {
@@ -54,6 +56,12 @@
     });
     return newRule;
   });
+
+  onBeforeMount(() => {
+    if (props.formData) {
+      cameraIPData.value = props.formData;
+    }
+  });
 </script>
 
 <style scoped>

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

@@ -67,12 +67,13 @@
         </template>
       </BasicTable>
     </div>
+    <EditCamera v-model="showEditPop" style="z-index: 9" :edit-data="editRow" />
   </div>
 </template>
 
 <script setup lang="ts">
   import { computed, h, reactive, ref } from 'vue';
-  import { CameraRangeItem } from '../type';
+  import { CameraRangeItem, CameraIPItem } from '../type';
   import { cameraRangeAddForm } from '../constant';
   import SearchCamerasAction from './SearchCamerasAction.vue';
   import { BasicTable } from '@/components/Table';
@@ -81,9 +82,13 @@
   import emptyImg from '@/assets/images/table/table-empty.png';
   import editIcon from '@/assets/images/table/table-edit.png';
   import deleteIcon from '@/assets/images/table/table-delete.png';
+  import EditCamera from './CameraEditPopover.vue';
 
   const cameraRangeData = ref<CameraRangeItem>({} as CameraRangeItem);
 
+  const showEditPop = ref(false);
+  const editRow = ref<CameraIPItem | null>(null);
+
   const rules = computed(() => {
     const newRule = {};
     cameraRangeAddForm.forEach((item) => {
@@ -209,7 +214,10 @@
 
   const handleDelete = () => {};
 
-  const handleEdit = () => {};
+  const handleEdit = (row) => {
+    showEditPop.value = true;
+    editRow.value = row;
+  };
 </script>
 
 <style scoped>
@@ -248,13 +256,9 @@
     margin-right: 0;
     margin-bottom: 28px;
   }
-  :deep(.el-table__body-wrapper tr td.el-table-fixed-column--left) {
-    background: unset;
-  }
-  :deep(.el-table__body-wrapper tr td.el-table-fixed-column--right) {
-    background: unset;
-  }
   :deep(.el-table .warm-row) {
     background: #f9e6e5 !important;
+    --el-table-row-hover-bg-color: none;
+    --el-bg-color: none;
   }
 </style>

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

@@ -50,6 +50,7 @@
 
 <style scoped lang="scss">
   .pop-card {
+    position: relative;
     margin-left: 21px !important;
   }
 

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

@@ -0,0 +1,73 @@
+<template>
+  <el-card v-if="props.modelValue" class="pop-card">
+    <template #header>
+      <div class="flex justify-between items-center pop-head">
+        <span class="pop-head-name">编辑相机</span>
+        <el-icon :size="16" class="mr-3" @click="updateValue(false)"><Close /></el-icon>
+      </div>
+    </template>
+    <div class="pop-content flex justify-center items-center">
+      <IPAddCamera :form-data="props.editData" />
+      <span class="pop-footer">
+        <el-button @click="updateValue(false)">取消</el-button>
+        <el-button type="primary" @click="addCamera">确定</el-button>
+      </span>
+    </div>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+  import { Close } from '@element-plus/icons-vue';
+  import IPAddCamera from './AddCameraByIP.vue';
+  import { CameraIPItem } from '../type';
+
+  const props = defineProps<{ modelValue: boolean; editData?: CameraIPItem | null }>();
+
+  const emits = defineEmits(['update:modelValue']);
+
+  const updateValue = (value) => {
+    emits('update:modelValue', value);
+  };
+
+  const addCamera = () => {};
+</script>
+
+<style scoped lang="scss">
+  .pop-card {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+  }
+
+  .pop-head {
+    height: 56px;
+
+    &-name {
+      margin-left: 24px;
+      font-size: 16px;
+      font-weight: 500;
+      color: #252525;
+    }
+  }
+
+  .pop-content {
+    height: 566px;
+  }
+
+  .pop-footer {
+    position: absolute;
+    right: 24px;
+    bottom: 27px;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  :deep(.el-card__header) {
+    padding: 0;
+  }
+  :deep(.el-card__body) {
+    padding: 0;
+  }
+</style>

src/views/cameras/overview/overviewColumns.ts

@@ -3,65 +3,76 @@ import { ElSwitch } from 'element-plus';
 import type { BasicColumn } from '@/components/Table';
 import connectedIcon from '@/assets/images/table/camera-netConnect.png';
 import unConnectedIcon from '@/assets/images/table/camera-netUnconnect.png';
+import { protocalTypeSelect } from './constant';
 
 export const getColumns = (switchChange: () => unknown): BasicColumn[] => {
   return [
     {
       label: '序号',
-      minWidth: 40,
+      minWidth: 60,
       type: 'index',
       fixed: 'left',
     },
     {
       label: 'IP地址',
       prop: 'cameraIp',
-      minWidth: 80,
+      minWidth: 140,
     },
     {
       label: '协议类型',
-      prop: 'protocal',
-      minWidth: 60,
+      prop: 'cameraType',
+      minWidth: 80,
+      render(record) {
+        return h(
+          'span',
+          {},
+          {
+            default: () =>
+              protocalTypeSelect.find((item) => item.value === record.row.cameraType)?.label,
+          },
+        );
+      },
     },
     {
       label: '端口地址',
       prop: 'cameraPort',
-      minWidth: 60,
+      minWidth: 80,
     },
     {
       label: 'MAC地址',
-      prop: 'mac',
-      minWidth: 100,
+      prop: 'cameraMac',
+      minWidth: 140,
     },
     {
       label: '设备ID',
       prop: 'name',
-      minWidth: 110,
+      minWidth: 150,
     },
     {
       label: '车间场景',
       prop: 'workshopId',
-      minWidth: 100,
+      minWidth: 140,
     },
     {
       label: '工位场景',
       prop: 'workspaceId',
-      minWidth: 60,
+      minWidth: 80,
     },
     {
       label: '联网状态',
-      prop: 'networkState',
+      prop: 'networkingState',
       render(record) {
         return h(
           'img',
           {
-            src: record.row.networkState === 0 ? unConnectedIcon : connectedIcon,
+            src: record.row.networkingState === 0 ? connectedIcon : unConnectedIcon,
             style:
               'width: 20px; height: 20px; object-fit: fill; display: inline-block; line-height: 20px; vertical-align: middle;',
           },
           {},
         );
       },
-      minWidth: 80,
+      minWidth: 120,
       align: 'center',
       sortable: 'custom',
     },
@@ -76,15 +87,20 @@ export const getColumns = (switchChange: () => unknown): BasicColumn[] => {
             onChange: () => {
               switchChange();
             },
-            activeValue: 1,
-            inactiveValue: 0,
+            activeValue: 0,
+            inactiveValue: 1,
           },
           {},
         );
       },
-      minWidth: 100,
+      minWidth: 140,
       align: 'center',
       sortable: 'custom',
     },
+    {
+      label: '备注',
+      prop: 'remark',
+      minWidth: 60,
+    },
   ];
 };

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

@@ -0,0 +1,27 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+import { CameraQueryParams, getCameraList } from '@/api/camera/camera-overview';
+import { CameraIPItem } from '../type';
+import { useRequest } from 'vue-hooks-plus';
+
+export const useCameraOverview = defineStore('camera-overview', () => {
+  const cameraItems = ref<CameraIPItem[]>([]);
+
+  const { loading, run: getCameraItems } = useRequest(
+    (params: CameraQueryParams) => {
+      return getCameraList(params).then((res) => {
+        return res;
+      });
+    },
+    {
+      manual: true,
+      onSuccess: (res) => {
+        cameraItems.value = res;
+      },
+    },
+  );
+
+  return { cameraItems, loading, getCameraItems };
+});
+
+export default useCameraOverview;

src/views/cameras/overview/type.ts

@@ -1,14 +1,32 @@
 export interface CameraIPItem {
-  name: string;
+  /** 相机IP */
   cameraIp: string;
+  /**	相机协议类型 */
+  cameraType: string;
+  /** 相机端口 */
   cameraPort: string;
-  protocal: string;
-  user: string;
-  workshopId: string;
-  password: string;
-  workspacer: string;
+  /** 相机MAC地址 */
+  cameraMac: string;
+  /** 相机ID */
   cameraId: string;
+  /** 车间场景 */
+  workshopId: string;
+  /** 工位场景 */
+  workspaceId: string;
+  /** 工位负责人 */
+  principal?: string;
+  /** 联网状态: 0-启用, 1-禁用 */
+  networkingState: number;
+  /** 状态: 0-启用, 1-禁用 */
+  status: number;
+  /** 描述 */
   remark?: string;
+  /** 相机名称 */
+  name: string;
+  /** 用户名 */
+  user?: string;
+  /** 密码 */
+  password: string;
 }
 
 export interface CameraRangeItem {