[Feat 0000] 报表绑定功能开发

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

@@ -41,9 +41,12 @@
           @delete="deletePointById"
         />
       </a-tab-pane>
-      <a-tab-pane key="3" tab="设备关联" v-if="deviceType == 'managesys'">
+      <a-tab-pane key="3" tab="关联设备" v-if="deviceType == 'managesys'">
         <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" />
+      </a-tab-pane>
       <a-tab-pane v-if="deviceType == 'managesys'" key="4" tab="预警条目管理">
         <ManagerWarningDeviceTable v-if="activeKey == '4'" :deviceId="deviceData.id" />
       </a-tab-pane>
@@ -85,174 +88,175 @@
   </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 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 } 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 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 ? '是' : '否';
+  //设置标题
+  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: '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',
-                },
-              ],
+            {
+              title: '风向',
+              width: 100,
+              dataIndex: 'winddir',
+              edit: true,
+              editComponent: 'Select',
+              editComponentProps: {
+                options: [
+                  {
+                    label: '进风',
+                    value: '1',
+                  },
+                  {
+                    label: '用风',
+                    value: '2',
+                  },
+                  {
+                    label: '回风',
+                    value: '3',
+                  },
+                ],
+              },
             },
-          },
-          {
-            title: '是否总风量',
-            width: 100,
-            dataIndex: 'windflag',
-            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: '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}）`;
+            {
+              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 `编辑`;
     }
-    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/pointTabel/WorkFacePointTable copy.vue

@@ -1,224 +0,0 @@
-<template>
-  <div class="p-4">
-    <div class="btm-group vent-flex-row-between">
-      <div>
-        <label style="color: #fff">设备类型：</label>
-        <ApiTreeSelect
-          @change="handleChange"
-          :api="deviceList.bind(null, { devicetype: '' })"
-          :fieldNames="{ children: 'children', label: 'itemText', value: 'itemValue' }"
-          v-model:value="deviceKind"
-          style="width: 200px"
-        />
-        <a-button type="primary" @click="addRow"> 新增 </a-button>
-      </div>
-      <div>
-        <a-button type="primary" @click="handleSave"> 保存 </a-button>
-      </div>
-    </div>
-    <BasicTable @register="registerTable" :dataSource="dataSource" :columns="workFaceColumns" @edit-change="onEditChange">
-      <template #action="{ record, column }">
-        <TableAction :actions="createActions(record, column)" />
-      </template>
-    </BasicTable>
-    <DeviceModalTable
-      @register="registerModal"
-      :deviceType="deviceKind"
-      :deviceID="deviceId"
-      @reload="getWorkFaceList"
-      :selectionRowKeys="selectionRowKeys"
-    />
-  </div>
-</template>
-<script lang="ts">
-  import { defineComponent, ref, nextTick, inject, onMounted } from 'vue';
-  import { BasicTable, useTable, TableAction, BasicColumn, ActionItem, EditRecordRow } from '/@/components/Table';
-  import { useModal } from '/@/components/Modal';
-  import { ApiTreeSelect } from '/@/components/Form';
-  import DeviceModalTable from './DeviceModalTable.vue';
-  import { deviceId, workDeviceList, deviceList, list, edit } from './point.api';
-  import { workFaceColumns, deviceColumns } from './point.data';
-
-  export default defineComponent({
-    components: { BasicTable, TableAction, DeviceModalTable, ApiTreeSelect },
-    props: {
-      columns: {
-        type: Array,
-        requried: true,
-      },
-      deviceId: {
-        type: String || Number,
-        requried: true,
-      },
-      list: {
-        type: Function,
-        requried: true,
-      },
-      isAdd: {
-        type: Boolean,
-      },
-    },
-    emits: ['save', 'delete'],
-    setup(props, { emit }) {
-      const activeTab = ref('1');
-      const deviceKind = ref('');
-      const type = inject('deviceType') || '';
-
-      const currentEditKeyRef = ref('');
-      const options = ref([]);
-
-      const dataSource = ref<any>([]);
-      const selectionRowKeys = ref<any[]>([]);
-
-      const [registerModal, { openModal }] = useModal();
-
-      const [registerTable, { insertTableDataRecord, reload }] = useTable({
-        title: '',
-        showIndexColumn: true,
-        showTableSetting: false,
-        tableSetting: { fullScreen: true },
-        actionColumn: {
-          width: 160,
-          title: '操作',
-          dataIndex: 'action',
-          slots: { customRender: 'action' },
-        },
-      });
-
-      function addRow() {
-        openModal();
-      }
-
-      function handleEdit(record: EditRecordRow) {
-        currentEditKeyRef.value = record.key;
-        record.onEdit?.(true);
-      }
-
-      function handleCancel(record: EditRecordRow) {
-        currentEditKeyRef.value = '';
-        record.onEdit?.(false, false);
-      }
-
-      function handleDelete(record: EditRecordRow) {
-        emit('delete', record.id, reload);
-      }
-      async function getOptions() {
-        const res = await deviceList({ devicetype: '' });
-        options.value = res;
-        deviceKind.value = options.value[0]['itemValue'];
-        getWorkFaceList();
-      }
-
-      function getWorkFaceList() {
-        workDeviceList({ deviceKind: deviceKind.value, sysId: props.deviceId }).then((res) => {
-          dataSource.value = res['records'];
-          selectionRowKeys.value = dataSource.value.map((item) => item.deviceId) || [];
-        });
-      }
-
-      function handleChange(id) {
-        deviceKind.value = id;
-        getWorkFaceList();
-      }
-
-      async function handleSave(record: EditRecordRow) {
-        dataSource.value.filter((item) => {
-          if (record.id && record.id === item.id) {
-            Object.assign(item, record.editValueRefs);
-          }
-        });
-        console.log('[ dataSource ] >', dataSource.value, record);
-        // 校验
-        await edit(dataSource.value);
-        record.editable = false;
-      }
-
-      function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
-        if (!record.editable) {
-          if (props.isAdd) {
-            return [
-              {
-                label: '编辑',
-                disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
-                onClick: handleEdit.bind(null, record),
-              },
-              {
-                label: '删除',
-                disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
-                onClick: handleDelete.bind(null, record),
-              },
-            ];
-          } else {
-            return [
-              {
-                label: '编辑',
-                disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
-                onClick: handleEdit.bind(null, record),
-              },
-            ];
-          }
-        }
-        return [
-          {
-            label: '保存',
-            onClick: handleSave.bind(null, record, column),
-          },
-          {
-            label: '取消',
-            popConfirm: {
-              title: '是否取消编辑',
-              confirm: handleCancel.bind(null, record, column),
-            },
-          },
-        ];
-      }
-
-      function onEditChange({ column, value, record }) {
-        // 本例
-        if (column.dataIndex === 'devicetype') {
-          // record.editValueRefs.name4.value = `${value}`;
-        }
-        // console.log(column, value, record);
-      }
-
-      onMounted(async () => {
-        await getOptions();
-        getWorkFaceList();
-      });
-
-      return {
-        activeTab,
-        registerTable,
-        handleEdit,
-        createActions,
-        onEditChange,
-        addRow,
-        workFaceColumns,
-        deviceColumns,
-        getOptions,
-        options,
-        deviceList,
-        dataSource,
-        deviceKind,
-        handleChange,
-        registerModal,
-        handleSave,
-        selectionRowKeys,
-        getWorkFaceList,
-        // handleChangeDeviceType,
-        // handleChangeLinkCode,
-        // monitorParamsOptions,
-      };
-    },
-  });
-</script>
-<style scoped lang="less">
-  @ventSpace: zxm;
-  
-  :deep(.@{ventSpace}-table-body) {
-    height: auto !important;
-  }
-  .btm-group {
-    padding-bottom: 2px;
-  }
-</style>

src/views/vent/deviceManager/comment/pointTabel/WorkFaceReportTable.vue

@@ -0,0 +1,278 @@
+<template>
+  <div class="p-4">
+    <div class="btm-group vent-flex-row-between">
+      <div class="mb-10px">
+        <JDictSelectTag v-model:value="deviceKind" placeholder="请输入设备类型" dictCode="analyReportType" />
+        <a-button class="ml-5px mr-5px" type="primary" @click="handleAddDevices"> 新增 </a-button>
+        <a-button type="primary" @click="handleAssoicate"> 自动关联 </a-button>
+      </div>
+      <!-- <a-button class="vent-margin-l-10" type="primary" @click="handleSave()"> 批量保存 </a-button> -->
+    </div>
+    <BasicTable ref="editTable" @register="registerTable">
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '查看报表数据',
+              onClick: () => handlePreview(record),
+            },
+            {
+              label: '删除',
+              popConfirm: {
+                title: '确认删除？',
+                confirm: () => handleDelete(record),
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <BasicModal title="手动关联报表数据" width="800px" @register="registerModal">
+      <a-button type="primary" @click="handleSaveSelection"> 批量保存 </a-button>
+      <BasicTable @register="registerTable2">
+        <template #action="{ record }">
+          <TableAction
+            :actions="[
+              {
+                label: '保存',
+                onClick: () => handleSave(record),
+              },
+            ]"
+          />
+        </template>
+      </BasicTable>
+    </BasicModal>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, nextTick, watch } from 'vue';
+  import { BasicModal, useModal } from '/@/components/Modal';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import {
+    deviceList,
+    sceneReportAssociationList,
+    sceneReportAssociationDelete,
+    findPotentialAssociations,
+    autoAssociate,
+    manualAssociate,
+  } from './point.api';
+  import { reportColumns } from './point.data';
+  import { message, Modal } from 'ant-design-vue';
+  import { JDictSelectTag } from '/@/components/Form';
+  import { JsonPreview } from '/@/components/CodeEditor';
+  import { h } from 'vue';
+
+  export default defineComponent({
+    components: { BasicTable, TableAction, BasicModal, JDictSelectTag },
+    props: {
+      columns: {
+        type: Array<any>,
+        requried: true,
+      },
+      device: {
+        type: Object,
+        requried: true,
+        default: () => ({}),
+      },
+    },
+    emits: ['save', 'delete'],
+    setup(props) {
+      const deviceKind = ref('');
+
+      const [registerModal, { openModal }] = useModal();
+
+      const [registerTable, tableCtx] = useTable({
+        columns: props.columns,
+        title: '',
+        api: ({ pageNo, pageSize }) => {
+          return sceneReportAssociationList({
+            pageNo,
+            pageSize,
+            sceneId: props.device.id,
+          });
+        },
+        showIndexColumn: true,
+        showTableSetting: false,
+        tableSetting: { fullScreen: true },
+        actionColumn: {
+          width: 160,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+        },
+      });
+
+      const [registerTable2, tableCtx2] = useTable({
+        columns: reportColumns,
+        api() {
+          return findPotentialAssociations({ sceneName: props.device.systemname, reportType: deviceKind.value });
+        },
+        pagination: false,
+        rowSelection: { type: 'checkbox' },
+        actionColumn: {
+          width: 160,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+        },
+      });
+
+      function handleSave(record) {
+        return manualAssociate([
+          {
+            ...record,
+            sceneId: props.device.id,
+          },
+        ])
+          .then((res) => {
+            message.success(res);
+            tableCtx.reload();
+            tableCtx2.reload();
+          })
+          .catch((res) => {
+            message.error(res.message);
+          });
+      }
+      function handleSaveSelection() {
+        return manualAssociate(
+          tableCtx2.getSelectRows().map((e) => ({
+            ...e,
+            sceneId: props.device.id,
+          }))
+        )
+          .then((res) => {
+            message.success(res);
+            tableCtx.reload();
+            tableCtx2.reload();
+          })
+          .catch((res) => {
+            message.error(res.message);
+          });
+      }
+      function handleDelete(record) {
+        return sceneReportAssociationDelete({
+          id: record.id,
+        })
+          .then((res) => {
+            message.success(res);
+            tableCtx.reload();
+          })
+          .catch((res) => {
+            message.error(res.message);
+          });
+      }
+      function handleAssoicate() {
+        if (!deviceKind.value) return message.info('请选择设备类型');
+        return autoAssociate({
+          reportType: deviceKind.value,
+        })
+          .then((res) => {
+            message.success(res);
+            tableCtx.reload();
+          })
+          .catch((res) => {
+            message.error(res.message);
+          });
+      }
+      function handlePreview(record) {
+        Modal.info({
+          title: record.reportPointName,
+          width: 700,
+          content: h(JsonPreview, {
+            data: record.reportJsonData,
+            style: { backgroundColor: '#333', marginRight: '38px' },
+          }),
+        });
+      }
+
+      function handleAddDevices() {
+        if (!deviceKind.value) return message.info('请选择设备类型');
+        openModal();
+        nextTick(() => tableCtx2.reload());
+      }
+
+      watch(
+        () => props.columns,
+        (columns = []) => {
+          // linkColumns.value = columns
+          // reload()
+          tableCtx.setColumns(columns);
+        }
+      );
+
+      return {
+        registerTable,
+        registerTable2,
+        deviceKind,
+        deviceList,
+        registerModal,
+        handleAddDevices,
+        handleSave,
+        handleAssoicate,
+        handleDelete,
+        handleSaveSelection,
+        handlePreview,
+      };
+    },
+  });
+</script>
+<style scoped lang="less">
+  @ventSpace: zxm;
+
+  :deep(.@{ventSpace}-table-body) {
+    height: auto !important;
+  }
+  .btm-group {
+    padding-bottom: 2px;
+  }
+  .device-button-group {
+    // margin: 0 20px;
+    display: flex;
+    flex-wrap: wrap;
+    pointer-events: auto;
+    position: relative;
+    margin-top: 10px;
+    margin-bottom: 5px;
+    &::after {
+      position: absolute;
+      content: '';
+      width: calc(100% + 10px);
+      height: 2px;
+      top: 30px;
+      left: -10px;
+      border-bottom: 1px solid #0efcff;
+    }
+    .device-button {
+      padding: 4px 10px;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 14px;
+
+      color: #fff;
+      cursor: pointer;
+      margin: 0 1px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        border: 1px solid #6176af;
+        // transform: skewX(-38deg);
+        background-color: rgba(0, 77, 103, 85%);
+        z-index: -1;
+      }
+    }
+    .device-active {
+      // color: #0efcff;
+      &::before {
+        border-color: #0efcff;
+        box-shadow: 1px 1px 3px 1px #0efcff inset;
+      }
+    }
+  }
+</style>

src/views/vent/deviceManager/comment/pointTabel/point.api.ts

@@ -27,6 +27,16 @@ enum Api {
 
   workRelevanceDeviceTypes = '/safety/managesysDevice/typelist',
   workRelevanceDeviceDelete = '/safety/managesysDevice/delete',
+
+  autoAssociate = '/safety/sceneReportAssociation/autoAssociate',
+  sceneReportAssociationDelete = '/safety/sceneReportAssociation/delete',
+  sceneReportAssociationDeleteBatch = '/safety/sceneReportAssociation/deleteBatch',
+  sceneReportAssociationEdit = '/safety/sceneReportAssociation/edit',
+  findPotentialAssociations = '/safety/sceneReportAssociation/findPotentialAssociations',
+  sceneReportAssociationList = '/safety/sceneReportAssociation/list',
+  manualAssociate = '/safety/sceneReportAssociation/manualAssociate',
+  queryReportData = '/safety/sceneReportAssociation/queryReportData',
+  queryPageList = '/safety/sceneReportAssociation/queryPageList',
 }
 /**
  * 导出api
@@ -144,3 +154,14 @@ export const workRelevanceDeviceDelete = (params, handleSuccess) => {
     handleSuccess();
   });
 };
+
+export const autoAssociate = (params) => defHttp.post({ url: Api.autoAssociate, params });
+export const sceneReportAssociationDelete = (params) => defHttp.delete({ url: Api.sceneReportAssociationDelete, params }, { joinParamsToUrl: true });
+export const sceneReportAssociationDeleteBatch = (params) =>
+  defHttp.delete({ url: Api.sceneReportAssociationDeleteBatch, params }, { joinParamsToUrl: true });
+export const sceneReportAssociationEdit = (params) => defHttp.put({ url: Api.sceneReportAssociationEdit, params });
+export const findPotentialAssociations = (params) => defHttp.get({ url: Api.findPotentialAssociations, params });
+export const sceneReportAssociationList = (params) => defHttp.get({ url: Api.sceneReportAssociationList, params });
+export const manualAssociate = (params) => defHttp.post({ url: Api.manualAssociate, params });
+export const queryReportData = (params) => defHttp.get({ url: Api.queryReportData, params });
+export const queryPageList = (params) => defHttp.get({ url: Api.queryPageList, params });

src/views/vent/deviceManager/comment/pointTabel/point.data.ts

@@ -201,3 +201,10 @@ export const workFaceColumns: BasicColumn[] = [
   //   },
   // },
 ];
+
+export const reportColumns: BasicColumn[] = [
+  {
+    title: '测点名称',
+    dataIndex: 'reportPointName',
+  },
+];