feat: 新增功能NVR管理

src/api/camera/camera-nvr.ts

@@ -0,0 +1,69 @@
+import { http } from '@/utils/http/axios';
+
+export interface NVRListItem {
+  code: string;           // 编码
+  name: string;           // NVR名称
+  nvrIp: string;          // NVR的IP地址
+  nvrPort: string;        // NVR端口号
+  nvrType: string;        // NVR品牌
+  password: string;       // NVR登录密码
+  principal?: string;     // 设备安装负责人
+  remark?: string;        // 备注
+  username: string;       // NVR登录用户名
+  workshopList: number[]; // NVR使用车间列表
+};
+
+export interface NVRListItemAll extends NVRListItem {
+  id: number;
+  tenantId: number;     // 租户ID
+  createdAt: string;
+  updatedAt: string;
+  isDeleted: number;    // 0-未删除，>0-已删除
+  workshopName: string; // NVR绑定车间名称展示
+}
+
+export interface NVRQueryItem {
+  pageNumber: number;
+  pageSize: number;
+};
+
+// 添加NVR
+export const addNVRListItem = (data: NVRListItem) => {
+  return http.request({
+    url: '/nvrOption/saveNvr',
+    method: 'post',
+    data,
+  });
+};
+
+// 删除NVR
+export const deleteNVRListItem = (nvrId: number) => {
+  return http.request({
+    url: `/nvrOption/deleteNvr?nvrId=${nvrId}`,
+    method: 'delete',
+  });
+};
+
+// 编辑NVR
+export const updateNVRListItem = (data: NVRListItem) => {
+  return http.request({
+    url: '/nvrOption/updateNvr',
+    method: 'post',
+    data,
+  });
+};
+
+// 查询NVR
+export const getNVRList = (query: NVRQueryItem) => {
+  return http.request({
+    url: `/nvrOption/getNvr?pageNumber=${query.pageNumber}&pageSize=${query.pageSize}`,
+    method: 'get',
+  });
+};
+// export const getNVRList = (data: NVRQueryItem) => {
+//   return http.request({
+//     url: '/nvrOption/getNvr',
+//     method: 'get',
+//     data,
+//   });
+// };

src/views/cameras/nvrlist/NvrList.vue

@@ -1,91 +1,109 @@
 <template>
   <div class="nvr-page">
     <div class="nvr-list">
-      <BasicTable
-        :columns="columns"
-        :data-source="tableData"
-        :row-key="(row) => row.code"
-        :action-column="actionColumn"
+      <BasicTable :columns="columns" :data-source="nvrList" :row-key="(row) => row.code" :action-column="actionColumn"
         :pagination="{
           total: total,
           pageSize: pagesize,
           currentPage: page,
-          hideOnSinglePage: !tableData,
-        }"
-        :tableSetting="{
+          hideOnSinglePage: !nvrList.length,
+        }" :tableSetting="{
           size: false,
           redo: false,
           fullscreen: false,
           striped: false,
           setting: false,
-        }"
-        :striped="true"
-        ref="tableRef"
-        @page-num-change="handlePageNumChange"
-        @page-size-change="handlePageSizeChange"
-      >
+        }" :striped="true" ref="tableRef" @page-num-change="handlePageNumChange"
+        @page-size-change="handlePageSizeChange">
         <template #tableTitle>
           <el-button type="primary" @click="openCreateDrawer" :icon="Plus">添加</el-button>
         </template>
+        <template #empty>
+          <div class="empty-content flex flex-col items-center">
+            <img :src="emptyImg" class="empty-img" />
+            <span class="empty-text">暂未添加NVR设备</span>
+          </div>
+        </template>
       </BasicTable>
     </div>
-    <CreateDrawer
-      ref="createDrawerRef"
-      :title="drawerTitle"
-      @form-submit="handleFormSubmit"
-      @form-edit="handleFormEdit"
-    />
+    <CreateDrawer ref="createDrawerRef" :title="drawerTitle" @form-submit="handleFormSubmit"
+      @form-edit="handleFormEdit" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { h, ref, reactive, onMounted } from 'vue';
-import { BasicTable, TableActionIcons, BasicColumn } from '@/components/Table';
-import { columns } from './overviewColumns';
-import useNvrStore from './store/useNvrList';
 import { Plus } from '@element-plus/icons-vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
 import editIcon from '@/assets/images/table/table-edit.png';
 import deleteIcon from '@/assets/images/table/table-delete.png';
+import emptyImg from '@/assets/images/table/table-empty.png';
+import { columns } from './overviewColumns';
+import { BasicTable, TableActionIcons, BasicColumn } from '@/components/Table';
 import CreateDrawer from './components/CreateDrawer.vue';
-import { ElMessage, ElMessageBox } from 'element-plus';
-import { nvrData } from './type';
-import { storeToRefs } from 'pinia';
-import { conditions } from './constant';
-const nvrStore = useNvrStore();
-const { total, page, pagesize } = storeToRefs(nvrStore);
-const { getNvr, addNvr, deleteNvr, updateNvr } = nvrStore;
-const tableData = ref<nvrData[]>();
+import { deleteNVRListItem, getNVRList, NVRListItemAll } from '@/api/camera/camera-nvr';
+
+const nvrList = ref<NVRListItemAll[]>([]);
+const total = ref(0);
+const page = ref(1);
+const pagesize = ref(10);
+
+const getNvrList = () => {
+  const queryForm = {
+    pageNumber: page.value,
+    pageSize: pagesize.value,
+  };
+  getNVRList(queryForm).then((res) => {
+    console.log('获取表格数据', res);
+    total.value = res.totalRow;
+    nvrList.value = res.records;
+  });
+}
+
 const drawerTitle = ref('添加NVR');
-//列表操作
-const handleEdit = (record: Recordable) => {
+const createDrawerRef = ref();
+//添加数据
+const openCreateDrawer = () => {
+  drawerTitle.value = '添加NVR';
+  const { openDrawer } = createDrawerRef.value;
+  openDrawer();
+};
+// 编辑
+const handleEdit = (row) => {
   drawerTitle.value = '编辑NVR';
   const { openDrawer } = createDrawerRef.value;
-  openDrawer(record.id);
+  openDrawer(row);
 };
-const handleDelete = (record: Recordable) => {
+// 删除
+const handleDelete = (row) => {
   ElMessageBox.confirm(
+    '删除后使用该NVR设备的车间内相关相机历史视频内容将无法查看',
     '请确认是否删除NVR设备信息？',
-    '该NVR设备已添加相机，删除后将无法查看相关相机的视频回放',
     {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
-    },
-  ).then(() => {
-    deleteNvr(record.id);
-    tableData.value = getNvr();
-    ElMessage({
-      message: '删除NVR设备成功.',
-      type: 'success',
-    });
-  });
-};
-//添加数据
-const createDrawerRef = ref();
-const openCreateDrawer = () => {
-  drawerTitle.value = '添加NVR';
-  const { openDrawer } = createDrawerRef.value;
-  openDrawer();
+      type: 'warning',
+      customClass: 'deleteMessage',
+      center: true
+    }
+  )
+    .then(() => {
+      deleteNVRListItem(row.id).then(() => {
+        ElMessage({
+          message: '删除NVR设备成功.',
+          type: 'success',
+        });
+        getNvrList();
+      })
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '取消删除',
+      })
+    })
 };
+
 //操作列
 const actionColumn: BasicColumn = reactive({
   width: 200,
@@ -114,24 +132,36 @@ const actionColumn: BasicColumn = reactive({
     });
   },
 });
-const handleFormSubmit = (newData) => {
-  addNvr(newData);
-  tableData.value = getNvr();
+
+const handleFormSubmit = () => {
+  ElMessage({
+    message: '添加NVR设备成功.',
+    type: 'success',
+  });
+  getNvrList();
 };
-const handleFormEdit = (newData) => {
-  updateNvr(newData);
-  tableData.value = getNvr();
+
+const handleFormEdit = () => {
+  ElMessage({
+    message: '修改NVR设备成功.',
+    type: 'success',
+  });
+  getNvrList();
 };
+
 const handlePageNumChange = (pageNum) => {
   page.value = pageNum;
-  tableData.value = getNvr();
+  getNvrList();
 };
+
 const handlePageSizeChange = (size) => {
+  page.value = 1;
   pagesize.value = size;
-  tableData.value = getNvr();
+  getNvrList();
 };
+
 onMounted(() => {
-  tableData.value = getNvr();
+  getNvrList();
 });
 </script>
 
@@ -140,8 +170,54 @@ onMounted(() => {
   position: relative;
   height: calc(100vh - 64px - 12px);
   background-color: #ffffff;
+
   .nvr-list {
     padding: 35px 21px;
   }
 }
-</style>
+
+.empty-content {
+  margin: auto;
+  padding: 125px 0;
+}
+
+.empty-img {
+  width: 396px;
+}
+
+.empty-text {
+  font-size: 22px;
+  color: #8e8e8e;
+  line-height: 30px;
+  text-align: center;
+}
+</style>
+<style lang="scss">
+.deleteMessage {
+  padding: 20px 24px;
+  box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.03), 0px 9px 28px 0px rgba(0, 0, 0, 0.05), 0px 6px 16px -8px rgba(0, 0, 0, 0.08);
+  border-radius: 8px;
+
+  .el-message-box__headerbtn {
+    margin-top: 12px;
+    margin-right: 12px;
+  }
+
+  .el-message-box__title {
+    justify-content: start;
+    color: rgba(0, 0, 0, 0.88);
+    font-size: 16px;
+    font-weight: 500;
+  }
+
+  .el-message-box__container {
+    justify-content: start;
+    margin-left: 23px;
+  }
+
+  .el-message-box__btns {
+    display: block;
+    float: right;
+  }
+}
+</style>

src/views/cameras/nvrlist/components/CreateDrawer.vue

@@ -1,244 +1,235 @@
 <template>
-  <el-drawer v-model="isDrawer" :size="width" :title="title" @close="handleReset">
-    <el-form
-      :model="formParams"
-      :rules="rules"
-      ref="formRef"
-      label-placement="left"
-      :label-width="80"
-    >
-      <el-form-item label="设备名称" prop="nvrName">
-        <el-input placeholder="请输入设备名称，不可重复" v-model="formParams.nvrName" />
-      </el-form-item>
-      <el-form-item label="设备编号" prop="deviceID">
-        <el-input placeholder="自定义编号，不可重复" v-model="formParams.deviceID" />
-      </el-form-item>
-      <el-form-item label="设备IP" prop="deviceIP">
-        <el-input placeholder="请输入设备IP" v-model="formParams.deviceIP" />
-      </el-form-item>
-      <el-form-item label="设备品牌" prop="deviceBrand">
-        <el-select v-model="formParams.deviceBrand" placeholder="请选择设备品牌">
-          <el-option
-            v-for="item in brands"
-            :key="item.value"
-            :label="item.label"
-            :value="item.label"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="端口" prop="ipAddress">
-        <el-input placeholder="请输入端口号" v-model="formParams.ipAddress" />
-      </el-form-item>
-      <el-form-item label="用户名" prop="username">
-        <el-input placeholder="请输入用户名" v-model="formParams.username" />
-      </el-form-item>
-      <el-form-item label="密码" prop="password">
-        <el-input placeholder="请输入密码" v-model="formParams.password" type="password" />
-      </el-form-item>
-      <el-form-item label="使用场景" prop="useCondition">
-        <el-cascader
-          v-model="formParams.useCondition"
-          :options="conditions"
-          :props="ismultiple"
-          collapse-tags
-          collapse-tags-tooltip
-          clearable
-        />
-      </el-form-item>
-      <el-form-item label="负责人" prop="principal">
-        <el-input placeholder="请输入设备安装负责人" v-model="formParams.principal" />
-      </el-form-item>
-      <el-form-item label="备注" prop="remark">
-        <el-input placeholder="请输入备注" v-model="formParams.remark" :rows="5" type="textarea" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-space size="middle">
-        <el-button @click="handleReset">重置</el-button>
-        <el-button type="primary" @click="formSubmit">提交</el-button>
-      </el-space>
-    </template>
-  </el-drawer>
+  <div>
+    <el-drawer v-model="isDrawer" :size="350" :title="title" @close="closeDrawer">
+      <el-form :model="formParams" :rules="rules" ref="formRef" label-position="left" :label-width="85">
+        <el-form-item label="设备名称：" prop="name">
+          <el-input v-model="formParams.name" placeholder="请输入设备名称" />
+        </el-form-item>
+        <el-form-item label="设备编号：" prop="code" :error="codeError">
+          <el-input v-model="formParams.code" placeholder="自定义编码，不可重复" />
+        </el-form-item>
+        <el-form-item label="设备品牌：" prop="nvrType">
+          <el-select v-model="formParams.nvrType" placeholder="请选择设备品牌">
+            <el-option v-for="item in brands" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="IP地址：" prop="nvrIp" :error="ipError">
+          <el-input v-model="formParams.nvrIp" placeholder="请输入设备IP地址，不可重复" />
+        </el-form-item>
+        <el-form-item label="端口：" prop="nvrPort">
+          <el-input v-model="formParams.nvrPort" placeholder="请输入设备端口" />
+        </el-form-item>
+        <el-form-item label="用户名：" prop="username">
+          <el-input v-model="formParams.username" placeholder="请输入设备用户名" />
+        </el-form-item>
+        <el-form-item label="密码：" prop="password">
+          <el-input v-model="formParams.password" placeholder="请输入设备密码" type="password" show-password />
+        </el-form-item>
+        <el-form-item label="使用场景：" prop="workshopList">
+          <el-cascader v-model="workLocations" :options="locationOptions" :props="ismultiple" collapse-tags
+            collapse-tags-tooltip clearable placeholder="请选择使用该NVR的车间" @change="handleCascaderChange" />
+        </el-form-item>
+        <el-form-item label="负责人：" prop="principal">
+          <el-input v-model="formParams.principal" placeholder="请输入设备安装负责人" />
+        </el-form-item>
+        <el-form-item label="备注：" prop="remark">
+          <el-input v-model="formParams.remark" type="textarea" maxlength="200" :autosize="{ minRows: 3 }"
+            show-word-limit placeholder="请输入该设备相关备注" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="btn-box">
+          <el-button @click="closeDrawer">取消</el-button>
+          <el-button type="primary" @click="formSubmit">提交</el-button>
+        </div>
+      </template>
+    </el-drawer>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue';
-import { nvrData } from '../type';
-import { brands, conditions } from '../constant';
-import { FormRules, ElMessage } from 'element-plus';
-import useNvrStore from '../store/useNvrList';
-const nvrStore = useNvrStore();
-const { getNvr } = nvrStore;
-const ismultiple = { multiple: true };
-const props = defineProps({
-  title: {
-    type: String,
-    default: '添加NVR',
-  },
-  width: {
-    type: Number,
-    default: 450,
-  },
-});
+import { ref, computed, onMounted } from 'vue';
+import { brands, useWorkLocation } from '../constant';
+import { FormRules } from 'element-plus';
+import {
+  NVRListItem,
+  NVRListItemAll,
+  addNVRListItem,
+  updateNVRListItem,
+} from '@/api/camera/camera-nvr';
+
+interface Props {
+  title: String,
+};
+const props = defineProps<Props>();
 const emit = defineEmits(['form-submit', 'form-edit']);
-const formRef: any = ref(null);
+
 const isDrawer = ref(false);
+const formRef: any = ref(null);
+const ismultiple = { multiple: true };
+
+const { locationOptions, getLocationOptions, getWorkLocation } = useWorkLocation();
+const workLocations = ref<[number | undefined, number | undefined] | []>([]);
+
+const codeError = ref('');
+const ipError = ref('');
+
 const initFormNvr = () => ({
-  nvrName: '',
-  deviceID: '',
-  deviceIP: '',
-  deviceBrand: '',
-  ipAddress: '',
+  name: '',
+  code: '',
+  nvrIp: '',
+  nvrType: '',
+  nvrPort: '',
   username: '',
   password: '',
-  useCondition: '',
+  workshopList: [],
   principal: '',
   remark: '',
 });
-const formParams = ref<nvrData>(initFormNvr());
-const openDrawer = (id?: number) => {
+const formParams = ref<NVRListItem>(initFormNvr());
+
+const deleteKey = (obj, ...args) => {
+  args.forEach(v => { delete obj[v] });
+  return obj;
+}
+const openDrawer = (row: NVRListItemAll) => {
   isDrawer.value = true;
-  if (id) {
-    formParams.value = Object.assign(formParams.value, getNvr(id));
+  if (row) {
+    formParams.value = Object.assign(formParams.value, row);
+    deleteKey(formParams.value, 'createdAt', 'isDeleted', 'tenantId', 'updatedAt', 'workshopName');
+    console.log(formParams.value);
+    formParams.value.workshopList.map((item, index) => {
+      workLocations.value[index] = getWorkLocation(item, locationOptions.value)
+    });
     return;
-  }
+  };
 };
+
 const closeDrawer = () => {
   isDrawer.value = false;
-};
-const handleReset = () => {
   formRef.value.resetFields();
   formParams.value = Object.assign(formParams.value, initFormNvr());
+  workLocations.value = [];
 };
+
 const isAddUser = computed(() => {
   return props.title === '添加NVR';
 });
-const validateNvrName = (rule, value, callback) => {
-  const nvrList = getNvr();
-  let isDuplicate;
-  if (nvrList) {
-    isDuplicate = nvrList.some((nvr) => {
-      return nvr.nvrName === value && nvr.id !== formParams.value.id;
-    });
-  }
-  if (isDuplicate) {
-    callback(new Error('设备名称重复,请使用其他名称'));
-  } else {
-    callback();
-  }
-};
-const validatedeviceID = (rule, value, callback) => {
-  const nvrList = getNvr();
-  let isDuplicate;
-  if (nvrList) {
-    isDuplicate = nvrList.some((nvr) => {
-      return nvr.deviceID === value && nvr.id !== formParams.value.id;
-    });
-  }
-  if (isDuplicate) {
-    callback(new Error('设备编号重复,请使用其他编号'));
-  } else {
-    callback();
-  }
-};
+
 const rules: FormRules = {
-  nvrName: [
-    {
-      required: true,
-      message: '设备名称不能为空',
-      trigger: 'blur',
-    },
-    {
-      validator: validateNvrName,
-      trigger: 'blur',
-    },
-  ],
-  deviceID: [
-    {
-      required: true,
-      message: '设备编号不能为空',
-      trigger: 'blur',
-    },
-    {
-      validator: validatedeviceID,
-      trigger: 'blur',
-    },
-  ],
-  deviceIP: {
-    required: true,
-    message: '设备IP不能为空',
-    trigger: 'blur',
-  },
-  deviceBrand: {
-    required: true,
-    message: '设备品牌不能为空',
-    trigger: 'blur',
-  },
-  ipAddress: {
-    required: true,
-    message: '端口不能为空',
-    trigger: 'blur',
-  },
-  username: {
-    required: true,
-    message: '用户名不能为空',
-    trigger: 'blur',
-  },
-  password: {
-    required: true,
-    message: '密码不能为空',
-    trigger: 'blur',
-  },
-  useCondition: {
-    required: true,
-    message: '使用场景不能为空',
-    trigger: 'blur',
-  },
+  name: { required: true, message: '设备名称不能为空', trigger: 'blur' },
+  code: { required: true, message: '设备编号不能为空', trigger: 'change' },
+  nvrType: { required: true, message: '设备品牌不能为空', trigger: 'change' },
+  nvrIp: { required: true, message: '设备IP不能为空', trigger: 'change' },
+  nvrPort: { required: true, message: '端口不能为空', trigger: 'blur' },
+  username: { required: true, message: '用户名不能为空', trigger: 'blur' },
+  password: { required: true, message: '密码不能为空', trigger: 'blur' },
+  workshopList: { required: true, message: '使用场景不能为空', trigger: 'change' },
+};
+
+const handleCascaderChange = () => {
+  formParams.value.workshopList = workLocations.value.map((item) => {
+    return item[1];
+  })
 };
+
 const formSubmit = () => {
-  const nvrList = getNvr();
-  formRef.value.validate((valid) => {
-    if (valid) {
-      const maxID = nvrList.reduce((max, nvr) => Math.max(max, nvr.id), 0);
-      const nvrData = {
-        id: isAddUser.value ? maxID + 1 : formParams.value.id,
-        nvrName: formParams.value.nvrName,
-        deviceID: formParams.value.deviceID,
-        deviceIP: formParams.value.deviceIP,
-        deviceBrand: formParams.value.deviceBrand,
-        ipAddress: formParams.value.ipAddress,
-        username: formParams.value.username,
-        password: formParams.value.password,
-        useCondition: formParams.value.useCondition,
-        principal: formParams.value.principal,
-        remark: formParams.value.remark,
-      };
-      if (isAddUser.value) {
-        emit('form-submit', nvrData);
-        ElMessage({
-          message: '添加NVR设备成功.',
-          type: 'success',
-        });
-      } else {
-        emit('form-edit', formParams.value);
-        ElMessage({
-          message: '修改NVR设备成功.',
-          type: 'success',
-        });
-      }
-      closeDrawer();
-      handleReset();
-    }
+  const errorText = ref('');
+  // 捕获当前表单中是否有el-form-item__error即错误信息
+  const errorTipElements = document.querySelectorAll('.el-form-item__error');
+  errorTipElements.forEach((element) => {
+    if (element.textContent)
+      errorText.value = element.textContent;
   });
+
+  if (errorText.value === '') {
+    codeError.value = '';
+    ipError.value = '';
+    formRef.value.validate((valid) => {
+      if (valid) {
+        const nvrData = {
+          name: formParams.value.name,
+          code: formParams.value.code,
+          nvrIp: formParams.value.nvrIp,
+          nvrType: formParams.value.nvrType,
+          nvrPort: formParams.value.nvrPort,
+          username: formParams.value.username,
+          password: formParams.value.password,
+          workshopList: formParams.value.workshopList,
+          principal: formParams.value.principal,
+          remark: formParams.value.remark,
+        };
+
+        if (isAddUser.value) {
+          addNVRListItem(nvrData).then((res) => {
+            if (Object.getOwnPropertyNames(res).length != 0) {
+              codeError.value = res.code === 'NVR的编码已存在' ? '设备编号重复' : '';
+              ipError.value = res.nvrIp === 'NVR的IP已存在' ? 'IP地址重复' : '';
+            } else {
+              emit('form-submit');
+              closeDrawer();
+            }
+          });
+        } else {
+          updateNVRListItem(formParams.value).then((res) => {
+            if (Object.getOwnPropertyNames(res).length != 0) {
+              codeError.value = res.code === 'NVR的编码已存在' ? '设备编号重复' : '';
+              ipError.value = res.nvrIp === 'NVR的IP已存在' ? 'IP地址重复' : '';
+            } else {
+              emit('form-edit');
+              closeDrawer();
+            }
+          });
+        }
+      }
+    });
+  }
 };
+
 defineExpose({
   openDrawer,
   closeDrawer,
 });
+
+onMounted(() => {
+  getLocationOptions();
+})
 </script>
 
 <style lang="scss" scoped>
-::v-deep .el-cascader {
-  width: 330px;
+:deep(.el-drawer__header) {
+  position: relative;
+
+  >:first-child {
+    margin-left: 32px;
+    font-weight: 600;
+    font-size: 16px;
+    color: rgba(0, 0, 0, 0.88);
+  }
+
+  .el-drawer__close-btn {
+    position: absolute;
+    color: #000;
+  }
+}
+
+:deep(.el-drawer__body) {
+  border-top: 1px solid #0000000F;
+}
+
+:deep(.el-form-item__label) {
+  padding-right: 0;
+}
+
+:deep(.el-cascader) {
+  width: 230px;
+}
+
+.btn-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin-top: 10px;
 }
 </style>

src/views/cameras/nvrlist/constant.ts

@@ -1,52 +1,56 @@
+import { ref } from 'vue';
+import { getShopSpaceList } from '@/api/scene/scene';
+
+// nvrType 可选项
 export const brands = [
-    { value: "DAHUA", label: "大华" },
-    { value: "HIKVISION", label: "海康" }
+  { value: "dahua", label: "大华" },
+  { value: "haikang", label: "海康" },
+  { value: "anxunshi", label: "安讯士" },
+  { value: "huawei", label: "华为" },
 ];
-export const conditions = [
-    {
-        value: 1,
-        label: 'Asia',
-        children: [
-            {
-                value: 2,
-                label: 'China',
-            },
-            {
-                value: 3,
-                label: 'Japan',
-            },
-            {
-                value: 4,
-                label: 'Korea',
-            },
-        ],
-    },
-    {
-        value: 5,
-        label: 'Europe',
-        children: [
-            {
-                value: 6,
-                label: 'France',
-            },
-            {
-                value: 7,
-                label: 'UK',
-            },
-        ],
-    },
-    {
-        value: 8,
-        label: 'North America',
-        children: [
-            {
-                value: 9,
-                label: 'US',
-            },
-            {
-                value: 10,
-                label: 'Canada',
-            },
-        ],
-    },
-]
+
+// 公司-车间 级联可选项
+type Location = {
+  value: number;
+  label: string;
+  children: {
+    value: number;
+    label: string;
+  }[];
+};
+
+export function useWorkLocation() {
+  const locationOptions = ref<Location[]>([]);
+
+  const getLocationOptions = () => {
+    getShopSpaceList().then((res) => {
+      locationOptions.value =
+        res?.map((item) => {
+          const newChildren =
+            item.children?.map((x) => {
+              return { value: x.id, label: x.name };
+            }) || [];
+          return {
+            value: item.id,
+            label: item.name,
+            children: newChildren,
+          };
+        }) || [];
+    });
+  };
+
+  // 入参一个children里的value，根据这个value找到其父亲的value，返回[父value，子value]
+  const getWorkLocation = (workshopId: number, array) => {
+    const company: Location = array.find((item) =>
+      item.children.find((subItem) => {
+        subItem.value === workshopId;
+      }));
+    return company?.value, workshopId;
+  };
+
+  return {
+    locationOptions,
+    getLocationOptions,
+    getWorkLocation
+  };
+}

src/views/cameras/nvrlist/overviewColumns.ts

@@ -1,33 +1,48 @@
 import type { BasicColumn } from '@/components/Table';
+import { brands } from './constant';
+import { h } from 'vue';
+
 export const columns: BasicColumn[] = [
-    {
-      label: '序号',
-      minWidth: 60,
-      type: 'index',
-    },
-    {
-      label: '名称',
-      prop: 'nvrName',
-      minWidth: 100,
-    },
-    {
-      label: '设备ID',
-      prop: 'deviceID',
-      minWidth: 100,
-    },
-    {
-      label: 'IP地址',
-      prop: 'ipAddress',
-      minWidth: 140,
-    },
-    {
-      label: '使用场景',
-      prop: 'useCondition',
-      minWidth: 150,
-    },
-    {
-      label: '负责人',
-      prop: 'principal',
-      minWidth: 140,
+  {
+    label: '序号',
+    minWidth: 60,
+    type: 'index',
+  },
+  {
+    label: '名称',
+    prop: 'name',
+    minWidth: 100,
+  },
+  {
+    label: '设备品牌',
+    prop: 'nvrType',
+    minWidth: 140,
+    render(record) {
+      return h(
+        'span',
+        {},
+        brands.find(item => item.value === record.row.nvrType)?.label
+      )
     }
-  ];
+  },
+  {
+    label: '设备编号',
+    prop: 'code',
+    minWidth: 100,
+  },
+  {
+    label: 'IP地址',
+    prop: 'nvrIp',
+    minWidth: 140,
+  },
+  {
+    label: '使用场景',
+    prop: 'workshopName',
+    minWidth: 150,
+  },
+  {
+    label: '负责人',
+    prop: 'principal',
+    minWidth: 140,
+  }
+];

src/views/cameras/nvrlist/store/useNvrList.ts

@@ -1,55 +0,0 @@
-import { ref, reactive } from 'vue'
-import { defineStore } from "pinia";
-import { nvrData } from '../type';
-export const useNvrList = defineStore('nvr-list', () => {
-    const nvrList = reactive<nvrData[]>([
-        {
-            id: 1,
-            nvrName: "大华",
-            deviceID: "C919-140A-10",
-            deviceIP: "172.16.23.9090",
-            deviceBrand: "海康",
-            ipAddress: "172.16.23.9090",
-            username: "Chauncey",
-            password: "123456789",
-            useCondition: [[5,6],[5,7]],
-            principal: "张三三",
-            remark: "这是自己添加的数据"
-        }
-    ])
-    const total = ref(0)
-    const page = ref(1);
-    const pagesize = ref(10);
-    //获取NVR列表数据
-    const getNvr = (id?: number): nvrData[] => {
-        if (id) {
-            return nvrList.find(nvr => nvr.id === id)
-        }
-        total.value = nvrList.length
-        const start = (page.value - 1) * pagesize.value;
-        const end = start + pagesize.value;
-        const paginatedList = nvrList.slice(start, end)
-        return paginatedList
-    }
-    //NVR添加数据接口函数
-    const addNvr = (nvr: nvrData) => {
-        nvrList.push(nvr)
-    }
-    //NVR删除数据接口函数
-    const deleteNvr = (id: number) => {
-        const index = nvrList.findIndex(nvr => nvr.id === id);
-        if (index !== -1) {
-            nvrList.splice(index, 1)
-        }
-    }
-    //修改NVR设备数据
-    const updateNvr = (updatedNvr: nvrData) => {
-        const index = nvrList.findIndex(nvr => nvr.id === updatedNvr.id);
-        if (index !== -1) {
-            nvrList[index] = { ...nvrList[index], ...updatedNvr }
-        }
-    }
-    return { total, page, pagesize, getNvr, addNvr, deleteNvr, updateNvr }
-});
-
-export default useNvrList;

src/views/cameras/nvrlist/type.ts

@@ -1,13 +0,0 @@
-export interface nvrData {
-    id?: number;
-    nvrName: string;
-    deviceID: string;
-    deviceIP: string;
-    deviceBrand: string;
-    ipAddress: string;
-    username: string;
-    password: string;
-    useCondition: number[][];
-    principal?: string;
-    remark?: string;
-}