NVR设备界面

src/views/cameras/nvrlist/NvrList.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="nvr-page">
+    <div class="nvr-list">
+      <BasicTable
+        :columns="columns"
+        :data-source="tableData"
+        :row-key="(row) => row.code"
+        :action-column="actionColumn"
+        :pagination="{
+          total: total,
+          pageSize: pagesize,
+          currentPage: page,
+          hideOnSinglePage: !tableData,
+        }"
+        :tableSetting="{
+          size: false,
+          redo: false,
+          fullscreen: false,
+          striped: false,
+          setting: false,
+        }"
+        :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>
+      </BasicTable>
+    </div>
+    <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 editIcon from '@/assets/images/table/table-edit.png';
+import deleteIcon from '@/assets/images/table/table-delete.png';
+import CreateDrawer from './components/CreateDrawer.vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { nvrData } from './type';
+import { storeToRefs } from 'pinia';
+const nvrStore = useNvrStore();
+const { total, page, pagesize } = storeToRefs(nvrStore);
+const { getNvr, addNvr, deleteNvr, updateNvr } = nvrStore;
+const tableData = ref<nvrData[]>();
+const drawerTitle = ref('添加NVR');
+//列表操作
+const handleEdit = (record: Recordable) => {
+  drawerTitle.value = '编辑NVR';
+  const { openDrawer } = createDrawerRef.value;
+  openDrawer(record.id);
+};
+const handleDelete = (record: Recordable) => {
+  ElMessageBox.confirm(
+    '请确认是否删除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();
+};
+//操作列
+const actionColumn: BasicColumn = reactive({
+  width: 200,
+  title: '操作',
+  prop: 'action',
+  key: 'action',
+  fixed: 'right',
+  render(record) {
+    return h(TableActionIcons as any, {
+      space: 20,
+      color: '#629bf9',
+      style: 'img',
+      size: 16,
+      actionIcons: [
+        {
+          label: '修改',
+          icon: editIcon,
+          onClick: handleEdit.bind(null, record.row),
+        },
+        {
+          label: '删除',
+          icon: deleteIcon,
+          onClick: handleDelete.bind(null, record.row),
+        },
+      ],
+    });
+  },
+});
+const handleFormSubmit = (newData) => {
+  addNvr(newData);
+  tableData.value = getNvr();
+};
+const handleFormEdit = (newData) => {
+  updateNvr(newData);
+  tableData.value = getNvr();
+};
+const handlePageNumChange = (pageNum) => {
+  page.value = pageNum;
+  tableData.value = getNvr();
+};
+const handlePageSizeChange = (size) => {
+  pagesize.value = size;
+  tableData.value = getNvr();
+};
+onMounted(() => {
+  tableData.value = getNvr();
+});
+</script>
+
+<style lang="scss" scoped>
+.nvr-page {
+  position: relative;
+  height: calc(100vh - 64px - 12px);
+  background-color: #ffffff;
+  .nvr-list {
+    padding: 35px 21px;
+  }
+}
+</style>

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

@@ -0,0 +1,239 @@
+<template>
+  <el-drawer v-model="isDrawer" :size="width" :title="title" @close="handleReset">
+    <el-form
+      :model="nvrParams"
+      :rules="rules"
+      ref="formRef"
+      label-placement="left"
+      :label-width="80"
+    >
+      <el-form-item label="设备名称" prop="nvrName">
+        <el-input placeholder="请输入设备名称，不可重复" v-model="nvrParams.nvrName" />
+      </el-form-item>
+      <el-form-item label="设备编号" prop="deviceID">
+        <el-input placeholder="自定义编号，不可重复" v-model="nvrParams.deviceID" />
+      </el-form-item>
+      <el-form-item label="设备IP" prop="deviceIP">
+        <el-input placeholder="请输入设备IP" v-model="nvrParams.deviceIP" />
+      </el-form-item>
+      <el-form-item label="设备品牌" prop="deviceBrand">
+        <el-select v-model="nvrParams.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="nvrParams.ipAddress" />
+      </el-form-item>
+      <el-form-item label="用户名" prop="username">
+        <el-input placeholder="请输入用户名" v-model="nvrParams.username" />
+      </el-form-item>
+      <el-form-item label="密码" prop="password">
+        <el-input placeholder="请输入密码" v-model="nvrParams.password" type="password" />
+      </el-form-item>
+      <el-form-item label="使用场景" prop="useCondition">
+        <el-cascader
+          v-model="nvrParams.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="nvrParams.principal" />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input placeholder="请输入备注" v-model="nvrParams.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>
+</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';
+import { cloneDeep } from 'lodash-es';
+const nvrStore = useNvrStore();
+const { getNvr } = nvrStore;
+const ismultiple = { multiple: true };
+const props = defineProps({
+  title: {
+    type: String,
+    default: '添加NVR',
+  },
+  width: {
+    type: Number,
+    default: 450,
+  },
+});
+const emit = defineEmits(['form-submit', 'form-edit']);
+const formRef: any = ref(null);
+const isDrawer = ref(false);
+const initFormNvr = () => ({
+  nvrName: '',
+  deviceID: '',
+  deviceIP: '',
+  deviceBrand: '',
+  ipAddress: '',
+  username: '',
+  password: '',
+  useCondition: '',
+  principal: '',
+  remark: '',
+});
+const nvrParams = ref<nvrData>(initFormNvr());
+const openDrawer = (id?: number) => {
+  isDrawer.value = true;
+  if (id) {
+    nvrParams.value = getNvr(id);
+    return;
+  }
+};
+const closeDrawer = () => {
+  isDrawer.value = false;
+};
+const handleReset = () => {
+  formRef.value.resetFields();
+  nvrParams.value = Object.assign(nvrParams.value, initFormNvr());
+};
+const isAddUser = computed(() => {
+  return props.title === '添加NVR';
+});
+const validateNvrName = (rule, value, callback) => {
+  const nvrList = getNvr();
+  let isDuplicate;
+  if (nvrList) {
+    isDuplicate = nvrList.some((nvr) => nvr.nvrName === value);
+  }
+  if (isDuplicate) {
+    callback(new Error('设备名称重复,请使用其他名称'));
+  } else {
+    callback();
+  }
+};
+const validatedeviceID = (rule, value, callback) => {
+  const nvrList = getNvr();
+  let isDuplicate;
+  if (nvrList) {
+    isDuplicate = nvrList.some((nvr) => nvr.deviceID === value);
+  }
+  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',
+  },
+};
+const formSubmit = () => {
+  const nvrList = getNvr();
+  formRef.value.validate((valid) => {
+    const maxID = nvrList.reduce((max, nvr) => Math.max(max, nvr.id), 0);
+    const nvrData = {
+      id: isAddUser.value ? maxID + 1 : nvrParams.value.id,
+      nvrName: nvrParams.value.nvrName,
+      deviceID: nvrParams.value.deviceID,
+      deviceIP: nvrParams.value.deviceIP,
+      deviceBrand: nvrParams.value.deviceBrand,
+      ipAddress: nvrParams.value.ipAddress,
+      username: nvrParams.value.username,
+      password: nvrParams.value.password,
+      useCondition: nvrParams.value.useCondition,
+      principal: nvrParams.value.principal,
+      remark: nvrParams.value.remark,
+    };
+    if (isAddUser.value) {
+      emit('form-submit', nvrData);
+      ElMessage({
+        message: '添加NVR设备成功.',
+        type: 'success',
+      });
+    } else {
+      emit('form-edit', nvrParams.value);
+      ElMessage({
+        message: '修改NVR设备成功.',
+        type: 'success',
+      });
+    }
+    closeDrawer();
+    handleReset();
+  });
+};
+defineExpose({
+  openDrawer,
+  closeDrawer,
+});
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-cascader {
+  width: 330px;
+}
+</style>

src/views/cameras/nvrlist/constant.ts

@@ -0,0 +1,52 @@
+export const brands = [
+    { value: "DAHUA", label: "大华" },
+    { value: "HIKVISION", 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',
+            },
+        ],
+    },
+]

src/views/cameras/nvrlist/overviewColumns.ts

@@ -0,0 +1,33 @@
+import type { BasicColumn } from '@/components/Table';
+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,
+    }
+  ];

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

@@ -0,0 +1,55 @@
+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: "Hikvision",
+            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

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