风门管理-风门故障管理-提交

package.json

@@ -51,7 +51,7 @@
     "dayjs": "^1.11.9",
     "dexie": "^3.2.2",
     "dom-align": "^1.12.4",
-    "echarts": "^5.5.0",
+    "echarts": "^6.0.0",
     "emoji-mart-vue-fast": "^15.0.0",
     "enquire.js": "^2.1.6",
     "gsap": "^3.11.3",

src/views/vent/deviceManager/comment/DeviceModal.vue

@@ -1,19 +1,10 @@
 <template>
-  <BasicModal
-    v-bind="$attrs"
-    @register="registerModal"
-    :title="title"
-    width="1000px"
-    :showCancelBtn="false"
-    :showOkBtn="false"
-    :footer="null"
-    :destroyOnClose="true"
-    :mask-closable="false"
-    @cancel="closeModalFn"
-  >
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="title" width="1000px" :showCancelBtn="false"
+    :showOkBtn="false" :footer="null" :destroyOnClose="true" :mask-closable="false" @cancel="closeModalFn">
     <a-tabs v-if="props.showTab" v-model:activeKey="activeKey">
       <a-tab-pane key="1" tab="基本信息" force-render>
-        <FormModal :deviceType="deviceType" :record="deviceData" @saveOrUpdate="(values) => emit('saveOrUpdate', values)" />
+        <FormModal :deviceType="deviceType" :record="deviceData"
+          @saveOrUpdate="(values) => emit('saveOrUpdate', values)" />
       </a-tab-pane>
       <!-- <a-tab-pane key="10" v-if="deviceType == 'fanlocal' || deviceType == 'fanmain'" tab="风机曲线" force-render>
         <FanLineModal :record="deviceData" />
@@ -22,27 +13,16 @@
         <DeviceReportInfo v-if="activeKey == '11'" />
       </a-tab-pane>
       <a-tab-pane key="2" tab="点表关联">
-        <PointTable
-          :columns="pointColumns"
-          :pointType="deviceData.strtype"
-          :deviceId="deviceData.id"
-          :valuetype="9"
-          @save="savePointData"
-          @delete="deletePointById"
-        />
+        <PointTable :columns="pointColumns" :pointType="deviceData.strtype" :deviceId="deviceData.id" :valuetype="9"
+          @save="savePointData" @delete="deletePointById" />
       </a-tab-pane>
       <a-tab-pane key="8" tab="虚拟点表配置">
-        <PointTable
-          :columns="simulationColumns"
-          :pointType="deviceData.strtype"
-          :deviceId="deviceData.id"
-          :valuetype="4"
-          @save="savePointData"
-          @delete="deletePointById"
-        />
+        <PointTable :columns="simulationColumns" :pointType="deviceData.strtype" :deviceId="deviceData.id"
+          :valuetype="4" @save="savePointData" @delete="deletePointById" />
       </a-tab-pane>
       <a-tab-pane key="3" tab="关联设备" v-if="deviceType == 'managesys'">
-        <WorkFacePointTable :columns="linkColumns" :deviceId="deviceData.id" @save="savePointData" @delete="deletePointById" />
+        <WorkFacePointTable :columns="linkColumns" :deviceId="deviceData.id" @save="savePointData"
+          @delete="deletePointById" />
       </a-tab-pane>
       <a-tab-pane key="12" tab="关联报表" v-if="deviceType == 'managesys'">
         <WorkFaceReportTable :columns="reportColumns" :device="deviceData" />
@@ -63,14 +43,8 @@
         </template>
       </a-tab-pane>
       <a-tab-pane key="7" tab="摄像头配置">
-        <EditRowTable
-          :columns="cameraColumns"
-          :list="cameraList"
-          :params="{ deviceid: deviceData.id }"
-          @saveOrUpdate="saveCameraData"
-          @deleteById="deleteCameraById"
-          :isAdd="true"
-        />
+        <EditRowTable :columns="cameraColumns" :list="cameraList" :params="{ deviceid: deviceData.id }"
+          @saveOrUpdate="saveCameraData" @deleteById="deleteCameraById" :isAdd="true" />
       </a-tab-pane>
       <a-tab-pane key="9" :tab="'预案管理'">
         <AccidentPlanTable :deviceId="deviceData.id" />
@@ -78,6 +52,11 @@
       <a-tab-pane v-if="deviceType == 'led'" key="10" :tab="'节目管理'">
         <LEDPlaylistTable :deviceId="deviceData.id" />
       </a-tab-pane>
+
+      <a-tab-pane key="13" :tab="'故障配置管理'">
+        <FaultConfigTable :deviceId="deviceData.id"></FaultConfigTable>
+      </a-tab-pane>
+
       <!-- <a-tab-pane key="9" tab="预警指标修改">
         <template v-if="activeKey == '9'">
         <editWarnTable></editWarnTable>
@@ -88,175 +67,176 @@
   </BasicModal>
 </template>
 <script lang="ts" setup>
-  import { computed, unref, inject, reactive, ref, watch } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import EditRowTable from '../../comment/EditRowTable.vue';
-  import PointTable from './pointTabel/PointTable.vue';
-  import WarningTable from './warningTabel/index.vue';
-  import ManagerWarningTable from './warningTabel/index1.vue';
-  import ManagerWarningDeviceTable from './warningTabel/index2.vue';
-  import BackWindDeviceTable from './warningTabel/index3.vue';
-  import AccidentPlanTable from './warningTabel/index4.vue';
-  import LEDPlaylistTable from './warningTabel/index5.vue';
-  import WorkFacePointTable from './pointTabel/WorkFacePointTable.vue';
-  import WorkFaceReportTable from './pointTabel/WorkFaceReportTable.vue';
-  import DeviceReportInfo from './DeviceReportInfo.vue';
-  // import editWarnTable from './editWarnTable/index.vue'
-  import FanLineModal from './FanLineModal .vue';
-  import FormModal from './FormModal.vue';
-  import { cloneDeep } from 'lodash-es';
-  import { columns as pointColumns, workFaceColumns, simulationColumns, reportColumns } from './pointTabel/point.data';
-  import { saveOrUpdate as pointSaveOrUpdate, deleteById as pointDeleteById } from './pointTabel/point.api';
-  import { columns as cameraColumns } from './cameraTabel/camera.data';
+import { computed, unref, inject, reactive, ref, watch } from 'vue';
+import { BasicModal, useModalInner } from '/@/components/Modal';
+import EditRowTable from '../../comment/EditRowTable.vue';
+import PointTable from './pointTabel/PointTable.vue';
+import WarningTable from './warningTabel/index.vue';
+import ManagerWarningTable from './warningTabel/index1.vue';
+import ManagerWarningDeviceTable from './warningTabel/index2.vue';
+import BackWindDeviceTable from './warningTabel/index3.vue';
+import AccidentPlanTable from './warningTabel/index4.vue';
+import LEDPlaylistTable from './warningTabel/index5.vue';
+import WorkFacePointTable from './pointTabel/WorkFacePointTable.vue';
+import WorkFaceReportTable from './pointTabel/WorkFaceReportTable.vue';
+import DeviceReportInfo from './DeviceReportInfo.vue';
+import FaultConfigTable from './faultConfigTable/index.vue'
+// import editWarnTable from './editWarnTable/index.vue'
+import FanLineModal from './FanLineModal .vue';
+import FormModal from './FormModal.vue';
+import { cloneDeep } from 'lodash-es';
+import { columns as pointColumns, workFaceColumns, simulationColumns, reportColumns } from './pointTabel/point.data';
+import { saveOrUpdate as pointSaveOrUpdate, deleteById as pointDeleteById } from './pointTabel/point.api';
+import { columns as cameraColumns } from './cameraTabel/camera.data';
 
-  import { list as cameraList, saveOrUpdate as cameraSaveOrUpdate, deleteById as cameraDeleteById } from './cameraTabel/camera.api';
+import { list as cameraList, saveOrUpdate as cameraSaveOrUpdate, deleteById as cameraDeleteById } from './cameraTabel/camera.api';
 
-  const props = defineProps({
-    showTab: { type: Boolean, required: true },
-    // deviceType: { type: String },
-  });
-  // 声明Emits
-  const emit = defineEmits(['saveOrUpdate', 'register', 'closeModal']);
-  const isUpdate = inject('isUpdate');
-  const deviceData = inject('formData') as any;
-  const deviceType = inject('deviceType') as any;
-  const record = reactive({});
-  const activeKey = ref('1');
-  const linkColumns = ref<any[]>([]);
+const props = defineProps({
+  showTab: { type: Boolean, required: true },
+  // deviceType: { type: String },
+});
+// 声明Emits
+const emit = defineEmits(['saveOrUpdate', 'register', 'closeModal']);
+const isUpdate = inject('isUpdate');
+const deviceData = inject('formData') as any;
+const deviceType = inject('deviceType') as any;
+const record = reactive({});
+const activeKey = ref('1');
+const linkColumns = ref<any[]>([]);
 
-  //表单赋值
-  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
-    //重置表单
-    setModalProps({ confirmLoading: false });
-    Object.assign(deviceData, data.record);
-    // 判断是否是关键阻力路线
-  });
+//表单赋值
+const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+  //重置表单
+  setModalProps({ confirmLoading: false });
+  Object.assign(deviceData, data.record);
+  // 判断是否是关键阻力路线
+});
 
-  //设置标题
-  const title = computed(() => {
-    if (!unref(isUpdate)) {
-      if (deviceData.strname || deviceData.systemname) {
-        return `新增（${deviceData.strname || deviceData.systemname}）`;
-      }
-      return `新增`;
-    } else {
-      if (deviceData['strtype'] == 'sys_majorpath') {
-        linkColumns.value = [
-          ...workFaceColumns,
-          ...[
-            {
-              title: '是否在关键通风路线上',
-              width: 100,
-              dataIndex: 'pathflag',
-              edit: true,
-              editComponent: 'Switch',
-              editValueMap: (value) => {
-                return value ? '是' : '否';
-              },
-            },
-            {
-              title: '传感器类型',
-              width: 100,
-              dataIndex: 'sensorType',
-              edit: true,
-              editComponent: 'Select',
-              editComponentProps: {
-                options: [
-                  {
-                    label: '多参',
-                    value: '1',
-                  },
-                  {
-                    label: '测风',
-                    value: '2',
-                  },
-                ],
-              },
-            },
-            {
-              title: '风向',
-              width: 100,
-              dataIndex: 'winddir',
-              edit: true,
-              editComponent: 'Select',
-              editComponentProps: {
-                options: [
-                  {
-                    label: '进风',
-                    value: '1',
-                  },
-                  {
-                    label: '用风',
-                    value: '2',
-                  },
-                  {
-                    label: '回风',
-                    value: '3',
-                  },
-                ],
-              },
+//设置标题
+const title = computed(() => {
+  if (!unref(isUpdate)) {
+    if (deviceData.strname || deviceData.systemname) {
+      return `新增（${deviceData.strname || deviceData.systemname}）`;
+    }
+    return `新增`;
+  } else {
+    if (deviceData['strtype'] == 'sys_majorpath') {
+      linkColumns.value = [
+        ...workFaceColumns,
+        ...[
+          {
+            title: '是否在关键通风路线上',
+            width: 100,
+            dataIndex: 'pathflag',
+            edit: true,
+            editComponent: 'Switch',
+            editValueMap: (value) => {
+              return value ? '是' : '否';
             },
-            {
-              title: '是否总风量',
-              width: 100,
-              dataIndex: 'windflag',
-              edit: true,
-              editComponent: 'Switch',
-              editValueMap: (value) => {
-                return value ? '是' : '否';
-              },
+          },
+          {
+            title: '传感器类型',
+            width: 100,
+            dataIndex: 'sensorType',
+            edit: true,
+            editComponent: 'Select',
+            editComponentProps: {
+              options: [
+                {
+                  label: '多参',
+                  value: '1',
+                },
+                {
+                  label: '测风',
+                  value: '2',
+                },
+              ],
             },
-            {
-              title: '路线名称',
-              width: 100,
-              dataIndex: 'des',
-              edit: true,
-              editComponent: 'Input',
+          },
+          {
+            title: '风向',
+            width: 100,
+            dataIndex: 'winddir',
+            edit: true,
+            editComponent: 'Select',
+            editComponentProps: {
+              options: [
+                {
+                  label: '进风',
+                  value: '1',
+                },
+                {
+                  label: '用风',
+                  value: '2',
+                },
+                {
+                  label: '回风',
+                  value: '3',
+                },
+              ],
             },
-            {
-              title: ' 阻力值',
-              width: 100,
-              dataIndex: 'testDrag',
-              edit: true,
-              editComponent: 'InputNumber',
+          },
+          {
+            title: '是否总风量',
+            width: 100,
+            dataIndex: 'windflag',
+            edit: true,
+            editComponent: 'Switch',
+            editValueMap: (value) => {
+              return value ? '是' : '否';
             },
-          ],
-        ];
-      } else {
-        linkColumns.value = [...workFaceColumns];
-      }
-      if (deviceData.strname || deviceData.systemname) {
-        return `编辑（${deviceData.strname || deviceData.systemname}）`;
-      }
-      return `编辑`;
+          },
+          {
+            title: '路线名称',
+            width: 100,
+            dataIndex: 'des',
+            edit: true,
+            editComponent: 'Input',
+          },
+          {
+            title: ' 阻力值',
+            width: 100,
+            dataIndex: 'testDrag',
+            edit: true,
+            editComponent: 'InputNumber',
+          },
+        ],
+      ];
+    } else {
+      linkColumns.value = [...workFaceColumns];
+    }
+    if (deviceData.strname || deviceData.systemname) {
+      return `编辑（${deviceData.strname || deviceData.systemname}）`;
     }
-  });
+    return `编辑`;
+  }
+});
 
-  const closeModalFn = () => {
-    activeKey.value = '1';
-    closeModal();
-    emit('closeModal');
-  };
+const closeModalFn = () => {
+  activeKey.value = '1';
+  closeModal();
+  emit('closeModal');
+};
 
-  const savePointData = (data) => {
-    const record = cloneDeep(data.editValueRefs);
-    pointSaveOrUpdate(Object.assign(record, { id: data.id, deviceId: deviceData.id }), data.id);
-  };
-  const saveCameraData = (data: any, reload: Function) => {
-    cameraSaveOrUpdate(Object.assign({ ...data }, { id: data.id, deviceid: deviceData.id }), data.id);
-  };
-  const deletePointById = (id, reload) => {
-    pointDeleteById({ id: id }, reload);
-  };
-  const deleteCameraById = (id, reload) => {
-    cameraDeleteById({ id: id }, reload);
-  };
+const savePointData = (data) => {
+  const record = cloneDeep(data.editValueRefs);
+  pointSaveOrUpdate(Object.assign(record, { id: data.id, deviceId: deviceData.id }), data.id);
+};
+const saveCameraData = (data: any, reload: Function) => {
+  cameraSaveOrUpdate(Object.assign({ ...data }, { id: data.id, deviceid: deviceData.id }), data.id);
+};
+const deletePointById = (id, reload) => {
+  pointDeleteById({ id: id }, reload);
+};
+const deleteCameraById = (id, reload) => {
+  cameraDeleteById({ id: id }, reload);
+};
 </script>
 <style scoped lang="less">
-  ::v-deep .suffix {
-    height: 32px;
-    line-height: 32px;
-    margin-left: 5px;
-    color: #fff;
-  }
+::v-deep .suffix {
+  height: 32px;
+  line-height: 32px;
+  margin-left: 5px;
+  color: #fff;
+}
 </style>

src/views/vent/deviceManager/comment/faultConfigTable/components/operationTable.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="operation-table">
+    <a-form ref="formSta" :model="formState" layout="horizontal" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"
+      autocomplete="off">
+      <a-form-item name="areaPercentThreshold" label="面积百分比阈值(%)">
+        <a-input v-model:value="formState.areaPercentThreshold" type="number" allowClear placeholder="请输入面积百分比阈值"></a-input>
+      </a-form-item>
+      <a-form-item label="门板最大基准面积(cm²)" name="maxAreaBase">
+        <a-input v-model:value="formState.maxAreaBase" type="number" allowClear placeholder="请输入门板最大基准面积"></a-input>
+      </a-form-item>
+      <a-form-item label="像素面积比" name="pixelAreaRatio">
+        <a-input v-model:value="formState.pixelAreaRatio" type="number" placeholder="请输入像素面积比"></a-input>
+      </a-form-item>
+      <a-form-item label="检测时间(秒)" name="detectInterval">
+        <a-input v-model:value="formState.detectInterval" type="number" placeholder="请输入检测时间"></a-input>
+      </a-form-item>
+      <a-form-item label="持续时间阈值(秒)" name="durationThreshold">
+        <a-input v-model:value="formState.durationThreshold" type="number" placeholder="请输入持续时间阈值"></a-input>
+      </a-form-item>
+
+      <a-form-item label="模型路径" name="segModelPath">
+        <a-input v-model:value="formState.segModelPath" placeholder="请输入模型路径"></a-input>
+      </a-form-item>
+      <a-form-item label="摄像头" name="cameraId">
+        <a-select ref="select" v-model:value="formState.cameraId">
+          <a-select-option v-for="(item, index) in cameraData" :key="index" :value="item.value">{{ item.label
+            }}</a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="任务状态" name="status">
+        <a-select ref="select" v-model:value="formState.status">
+          <a-select-option v-for="(item, index) in taskData" :key="index" :value="item.value">{{ item.label
+            }}</a-select-option>
+        </a-select>
+      </a-form-item>
+
+    </a-form>
+    <div style="display: flex;justify-content: flex-end;margin: 20px;">
+      <a-button style="margin-right: 10px;" type="primary" @click="handleConfirm">确定</a-button>
+      <a-button @click="handleCancel">取消</a-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch,} from 'vue'
+import { saveOrUpdate,} from '../faultConfig.api'
+import {taskData} from '../faultConfig.data'
+import { useMessage } from '/@/hooks/web/useMessage';
+let props = defineProps({
+  gateId:{
+    type:String,
+    default:''
+  },
+  recordData: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  },
+  cameraData:{
+    type:Array,
+    default:()=>{
+      return []
+    }
+  }
+})
+const { createMessage } = useMessage();
+let formSta = ref()
+let formState = reactive({
+  id: null,
+  gateId:null,
+  areaPercentThreshold: null,
+  cameraId: null,
+  detectInterval: null,
+  durationThreshold: null,
+  maxAreaBase: null,
+  pixelAreaRatio: null,
+  segModelPath: null,
+  status: null,
+})
+let $emit = defineEmits(['handleClose'])
+
+//确定
+async function handleConfirm() {
+  let res
+  if (props.recordData.id) {
+    res = await saveOrUpdate(formState, true)
+  } else {
+    formState.gateId=props.gateId
+    res = await saveOrUpdate(formState, false)
+  }
+  if (res.code == 200) {
+    createMessage.success('操作成功!')
+    formSta.value.resetFields()
+    $emit('handleClose')
+  } else {
+    createMessage.error('操作失败!')
+  }
+}
+//取消
+function handleCancel() {
+  formSta.value.resetFields()
+  $emit('handleClose')
+}
+
+watch(()=>props.recordData,(newV,oldV)=>{
+  if (JSON.stringify(props.recordData) != '{}') {
+    formState = Object.assign(formState,newV) as any
+  }
+},{
+  immediate:true
+})
+
+</script>
+
+<style lang="less" scoped>
+.zxm-form {
+  padding: 20px 100px 20px 80px !important;
+}
+</style>

src/views/vent/deviceManager/comment/faultConfigTable/faultConfig.api.ts

@@ -0,0 +1,45 @@
+import { defHttp } from '/@/utils/http/axios';
+import { Modal } from 'ant-design-vue';
+
+enum Api {
+  list = '/safety/gate-fault/list',
+  insert = '/safety/gate-fault/insert',
+  update = '/safety/gate-fault/update',
+  delete = '/safety/gate-fault/delete',
+  cameraList='/safety/ventanalyCamera/list'
+}
+
+/**
+ * 故障配置列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.get({ headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, url: Api.list, params });
+
+/**
+ * 保存或者更新用户
+ * @param params
+ */
+export const saveOrUpdate = (params, isUpdate) => {
+  const url = isUpdate ? Api.update : Api.insert;
+  return defHttp.post({ url: url, params });
+};
+/**
+ * 删除用户
+ */
+export const deleteById = (params) => {
+  return defHttp.delete({ url: Api.delete, params })
+};
+
+/**
+ * 故障配置摄像头列表接口
+ * @param params
+ */
+export const cameraList = (params) => defHttp.get({ url: Api.cameraList, params });
+
+
+
+
+
+
+
+

src/views/vent/deviceManager/comment/faultConfigTable/faultConfig.data.ts

@@ -0,0 +1,63 @@
+import { BasicColumn } from '/@/components/Table';
+export const columns: BasicColumn[] = [
+  {
+    title: '序号',
+    width: 60,
+    align: 'center',
+    customRender: ({ index }: { index: number }) => `${index + 1}`
+  },
+  {
+    title: '门板最大基准面积(cm²)',
+    dataIndex: 'maxAreaBase',
+    key: 'maxAreaBase',
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '像素面积比',
+    dataIndex: 'pixelAreaRatio',
+    key: 'pixelAreaRatio',
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '面积百分比阈值(%)',
+    dataIndex: 'areaPercentThreshold',
+    key: 'areaPercentThreshold',
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '检测间隔(秒)',
+    dataIndex: 'detectInterval',
+    key: 'detectInterval',
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '持续时间阈值(秒)',
+    dataIndex: 'durationThreshold',
+    key: 'durationThreshold',
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '任务状态',
+    dataIndex: 'status',
+    key: 'status',
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '操作',
+    dataIndex: 'actionSp',
+    width: 200,
+    align: 'center',
+    slots: { customRender: 'action' },
+  },
+]
+//任务状态
+export const taskData = [
+  { label: '开启', value: '1' },
+  { label: '关闭', value: '0' }
+]

src/views/vent/deviceManager/comment/faultConfigTable/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="fault-config">
+    <a-button type="primary" @click="handleAdd">新增</a-button>
+    <a-table size="small" :dataSource="dataSource" :columns="columns" :scroll="{ y: 620 }" :pagination="pagination"
+      @change="pageChange">
+      <template #action="{ record }">
+        <a class="table-action-link" @click="handleEdit(record)">编辑</a>
+        <a class="table-action-link" @click="handleDelete(record)">删除</a>
+      </template>
+    </a-table>
+    <!-- 新增、编辑弹窗 -->
+    <a-modal v-model:visible="visibleModal" width="650px" :title="titleModal" :footer="null" centered destroyOnClose
+      @cancel="handleCancel">
+      <OperationTable ref="operationModal" :gateId="deviceId" :recordData="recordData" :cameraData="cameraData" @handleClose="handleClose">
+      </OperationTable>
+    </a-modal>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, onMounted } from 'vue'
+import { columns } from './faultConfig.data'
+import { list, deleteById, cameraList } from './faultConfig.api'
+import OperationTable from './components/operationTable.vue'
+
+let props = defineProps({
+  deviceId: {
+    type: String,
+    default: ''
+  }
+})
+
+let operationModal = ref()
+let dataSource = ref<any[]>([]);
+//分页参数配置
+let pagination = reactive({
+  current: 1, // 当前页码
+  pageSize: 10, // 每页显示条数
+  total: 0, // 总条目数，后端返回
+  // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
+  showSizeChanger: true, // 是否可改变每页显示条数
+  pageSizeOptions: ['10', '20', '50'], // 可选的每页显示条数
+});
+let visibleModal = ref(false)//是否显示新增、编辑弹窗
+let titleModal = ref('')
+let recordData = reactive({})
+let cameraData = ref<any[]>([])
+
+//列表查询
+async function getList() {
+  let res = await list({ pageNo: pagination.current, pageSize: pagination.pageSize, gateId: props.deviceId })
+  console.log(res, '风门故障配置列表---')
+  dataSource.value=res.records || []
+  pagination.total=res.total
+}
+//分页切换
+function pageChange(val) {
+  pagination.current = val.current;
+  pagination.pageSize = val.pageSize;
+  getList()
+}
+//新增
+function handleAdd() {
+  titleModal.value = '新增'
+  visibleModal.value = true
+}
+function handleCancel() {
+  operationModal.value.resetFields()
+  visibleModal.value = false
+}
+//编辑
+function handleEdit(record) {
+  titleModal.value = '编辑'
+  recordData = Object.assign({}, record)
+  visibleModal.value = true
+}
+//删除
+async function handleDelete(record) {
+  let res = await deleteById({ id: record.id })
+  console.log(res, '删除')
+  getList()
+}
+function handleClose() {
+  visibleModal.value = false
+  getList()
+}
+//获取摄像头列表
+async function getCameraList() {
+  let res = await cameraList({ pageNo: 1, pageSize: 100, deviceid: props.deviceId })
+  if (res && res.records.length) {
+    cameraData.value = res.records.map(el => {
+      return {
+        label: el.name,
+        value: el.id
+      }
+    })
+  }
+}
+onMounted(() => {
+  getList()
+  getCameraList()
+})
+</script>
+
+<style lang="less" scoped></style>