[Feat 0000]数据中心定时任务模块接口联调测试、表格分页器功能实现

src/views/monitor/quartz/QuartzModal1.vue

@@ -0,0 +1,64 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="title" @ok="handleSubmit" width="40%">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+import { ref, computed, unref } from 'vue';
+import { BasicModal, useModalInner } from '/@/components/Modal';
+import { BasicForm, useForm } from '/@/components/Form/index';
+import { formSchema } from './quartz.data';
+import { dataCenterSaveOrUpdateQuartz, getDataCenterQuartzById } from './quartz.api';
+import { isJsonObjectString } from '/@/utils/is';
+// Emits声明
+const emit = defineEmits(['register', 'success']);
+const isUpdate = ref(true);
+//表单配置
+const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+  // labelWidth: 150,
+  schemas: formSchema,
+  showActionButtonGroup: false,
+  // update-begin--author:liaozhiyang---date:20231017---for：【issues/790】弹窗内文本框不居中问题
+  labelWidth: 100,
+  labelCol: null,
+  wrapperCol: null,
+  // update-end--author:liaozhiyang---date:20231017---for：【issues/790】弹窗内文本框不居中问题
+});
+//表单赋值
+const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+  //重置表单
+  await resetFields();
+  setModalProps({ confirmLoading: false });
+  isUpdate.value = !!data?.isUpdate;
+  if (unref(isUpdate)) {
+    //获取详情
+    //data.record = await getQuartzById({id: data.record.id});
+    try {
+      data.record.paramterType = isJsonObjectString(data?.record?.parameter) ? 'json' : 'string';
+    } catch (e) {
+      console.log(e);
+    }
+    //表单赋值
+    await setFieldsValue({
+      ...data.record,
+    });
+  }
+});
+//设置标题
+const title = computed(() => (!unref(isUpdate) ? '新增任务' : '编辑任务'));
+//表单提交事件
+async function handleSubmit(v) {
+  try {
+    let values = await validate();
+    setModalProps({ confirmLoading: true });
+    //提交表单
+    await dataCenterSaveOrUpdateQuartz(values, isUpdate.value);
+    //关闭弹窗
+    closeModal();
+    //刷新列表
+    emit('success');
+  } finally {
+    setModalProps({ confirmLoading: false });
+  }
+}
+</script>

src/views/monitor/quartz/index1.vue

@@ -0,0 +1,218 @@
+<template>
+  <div class="device-manager-box">
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <template #tableTitle>
+        <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd" style="margin-right: 5px">新增</a-button>
+        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
+        <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
+        <a-dropdown v-if="selectedRowKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleDelete">
+                <Icon icon="ant-design:delete-outlined" />
+                删除
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button
+            >批量操作
+            <Icon icon="mdi:chevron-down" />
+          </a-button>
+        </a-dropdown>
+      </template>
+      <template #action="{ record }">
+        <div class="vent-row-center">
+          <a-popconfirm v-if="record.status == -1" title="是否启动选中任务?" @confirm="handlerResume(record)" style="display: inline-block">
+            <a class="table-action-link">启动</a>
+          </a-popconfirm>
+          <a-popconfirm v-if="record.status == 0" title="是否暂停选中任务?" @confirm="handlerPause(record)" style="display: inline-block">
+            <a class="table-action-link">停止</a>
+          </a-popconfirm>
+          <TableAction :dropDownActions="getDropDownAction(record)" />
+        </div>
+      </template>
+    </BasicTable>
+    <QuartzModal @register="registerModal" @success="reload" />
+  </div>
+</template>
+<script lang="ts" name="monitor-quartz" setup>
+import { ref } from 'vue';
+import { BasicTable, TableAction } from '/@/components/Table';
+import { useModal } from '/@/components/Modal';
+import { useListPage } from '/@/hooks/system/useListPage';
+import {
+  getDataCenterList,
+  getDataCenterExportUrl,
+  getDataCenterImportUrl,
+  deleteDataCenterQuartz,
+  batchDataCenterDeleteQuartz,
+  resumeDataCenterJob,
+  pauseDataCenterJob,
+  excuteDataCenterJob,
+} from './quartz.api';
+import { columns, searchFormSchema } from './quartz.data';
+import QuartzModal from './QuartzModal1.vue';
+import { useMessage } from '/@/hooks/web/useMessage';
+
+const { createMessage } = useMessage();
+const [registerModal, { openModal }] = useModal();
+// 列表页面公共参数、方法
+const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
+  designScope: 'quartz-template',
+  tableProps: {
+    title: '任务列表',
+    api: getDataCenterList,
+    columns: columns,
+    actionColumn: {
+      width: 180,
+    },
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+      fieldMapToTime: [['fieldTime', ['beginDate', 'endDate'], 'YYYY-MM-DD HH:mm:ss']],
+    },
+  },
+  exportConfig: {
+    name: '定时任务列表',
+    url: getDataCenterExportUrl,
+  },
+  importConfig: {
+    url: getDataCenterImportUrl,
+  },
+});
+
+const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
+
+/**
+ * 操作列定义
+ * @param record
+ */
+function getActions(record) {
+  return [
+    {
+      label: '启动',
+      popConfirm: {
+        title: '是否启动选中任务?',
+        confirm: handlerResume.bind(null, record),
+      },
+      ifShow: (_action) => {
+        return record.status == -1;
+      },
+    },
+    {
+      label: '停止',
+      popConfirm: {
+        title: '是否暂停选中任务?',
+        confirm: handlerPause.bind(null, record),
+      },
+      ifShow: (_action) => {
+        return record.status == 0;
+      },
+    },
+  ];
+}
+
+/**
+ * 下拉操作栏
+ */
+function getDropDownAction(record) {
+  return [
+    {
+      label: '立即执行',
+      popConfirm: {
+        title: '是否立即执行任务?',
+        confirm: handlerExecute.bind(null, record),
+      },
+    },
+    {
+      label: '编辑',
+      onClick: handleEdit.bind(null, record),
+    },
+    {
+      label: '删除',
+      popConfirm: {
+        title: '是否确认删除',
+        confirm: handleDelete.bind(null, record),
+      },
+    },
+  ];
+}
+
+/**
+ * 新增事件
+ */
+function handleAdd() {
+  openModal(true, {
+    isUpdate: false,
+  });
+}
+
+/**
+ * 编辑事件
+ */
+function handleEdit(record) {
+  openModal(true, {
+    record,
+    isUpdate: true,
+  });
+}
+
+/**
+ * 删除事件
+ */
+async function handleDelete(record) {
+  await deleteDataCenterQuartz({ id: record.id }, reload);
+}
+
+/**
+ * 立即执行
+ */
+async function handlerExecute(record) {
+  if (record.sysType == 'collect') {
+    await excuteDataCenterJob({ id: record.id }, record.sysType, 'execute', reload);
+  } else if (record.sysType == 'compute') {
+    await excuteDataCenterJob({ id: record.id }, record.sysType, 'execute', reload);
+  } else if (record.sysType == 'monitor') {
+    await excuteDataCenterJob({ id: record.id }, record.sysType, 'execute', reload);
+  } else {
+    // await collectJob({ id: record.id }, reload);
+  }
+}
+
+/**
+ * 暂停
+ */
+async function handlerPause(record) {
+  if (record.sysType == 'collect') {
+    await pauseDataCenterJob({ id: record.id }, record.sysType, 'pause', reload);
+  } else if (record.sysType == 'compute') {
+    await pauseDataCenterJob({ id: record.id }, record.sysType, 'pause', reload);
+  } else if (record.sysType == 'monitor') {
+    await pauseDataCenterJob({ id: record.id }, record.sysType, 'pause', reload);
+  } else {
+    // await collectJob({ id: record.id }, reload);
+  }
+}
+
+/**
+ * 启动
+ */
+async function handlerResume(record) {
+  if (record.sysType == 'collect') {
+    await resumeDataCenterJob({ id: record.id }, record.sysType, 'resume', reload);
+  } else if (record.sysType == 'compute') {
+    await resumeDataCenterJob({ id: record.id }, record.sysType, 'resume', reload);
+  } else if (record.sysType == 'monitor') {
+    await resumeDataCenterJob({ id: record.id }, record.sysType, 'resume', reload);
+  } else {
+    // await collectJob({ id: record.id }, reload);
+  }
+}
+
+/**
+ * 批量删除事件
+ */
+async function batchHandleDelete() {
+  await batchDataCenterDeleteQuartz({ ids: selectedRowKeys.value }, reload);
+}
+</script>

src/views/monitor/quartz/quartz.api.ts

@@ -13,10 +13,18 @@ enum Api {
   importExcelUrl = '/ventanaly/quartzJob/importExcel',
   execute = '/ventanaly/quartzJob/execute',
   deleteBatch = '/ventanaly/quartzJob/deleteBatch',
-  //数据中心  启动  停止   立即执行接口
-  collect = '/collect/quartzJob',
-  compute = '/compute/quartzJob',
-  monitor = '/ventanaly/quartzJob',
+  //数据中心
+  dataCenterList = '/dataCenter/ventanaly/quartzJob/list',
+  //数据采集 collect  数据分析  compute  应用  monitor    ------启动  resume   停止  pause  立即执行 execute
+  collect = '/dataCenter/collect/quartzJob/resume',
+  compute = '/dataCenter/compute/quartzJob/pause',
+  dataCentersave = '/dataCenter/ventanaly/quartzJob/add',
+  dataCenteredit = '/dataCenter/ventanaly/quartzJob/edit',
+  dataCenterget = '/dataCenter/ventanaly/quartzJob/queryById',
+  dataCenterdelete = '/dataCenter/ventanaly/quartzJob/delete',
+  dataCenterexportXlsUrl = '/dataCenter/ventanaly/quartzJob/exportXls',
+  dataCenterimportExcelUrl = '/dataCenter/ventanaly/quartzJob/importExcel',
+  dataCenterdeleteBatch = '/dataCenter/ventanaly/quartzJob/deleteBatch',
 }
 
 /**
@@ -93,48 +101,180 @@ export const executeImmediately = (params, handleSuccess) => {
 };
 
 /**
- * 数据中心---启动
+ * 批量删除任务
  * @param params
  */
-export const collectJob = (params, handleSuccess) => {
-  return defHttp.get({ url: Api.collect, params }).then(() => {
-    handleSuccess();
+export const batchDeleteQuartz = (params, handleSuccess) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
+        handleSuccess();
+      });
+    },
   });
 };
+/**
+ * 数据中心---获取定时任务列表
+ * @param params
+ */
+export const getDataCenterList = (params) =>
+  defHttp.get({
+    headers: {
+      'X-Access-Token':
+        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNzU5ODQxMTcwfQ.fHaM3l-d88tUSLOs8sstXsDuSCn6Agbj_EMZMgV6waw',
+    },
+    url: Api.dataCenterList,
+    params,
+  });
+/**
+ * 导出api
+ */
+export const getDataCenterExportUrl = Api.exportXlsUrl;
+/**
+ * 导入api
+ */
+export const getDataCenterImportUrl = Api.importExcelUrl;
 
 /**
- * 数据中心---暂停
+ * 保存或者更新任务
  * @param params
  */
-export const computeJob = (params, handleSuccess) => {
-  return defHttp.get({ url: Api.compute, params }).then(() => {
-    handleSuccess();
+export const dataCenterSaveOrUpdateQuartz = (params, isUpdate) => {
+  let url = isUpdate ? Api.dataCenteredit : Api.dataCentersave;
+  return defHttp.post({
+    headers: {
+      'X-Access-Token':
+        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNzU5ODQxMTcwfQ.fHaM3l-d88tUSLOs8sstXsDuSCn6Agbj_EMZMgV6waw',
+    },
+    url: url,
+    params,
   });
 };
 
 /**
- * 数据中心---立即执行
+ * 查询任务详情
  * @param params
  */
-export const monitorJob = (params, handleSuccess) => {
-  return defHttp.get({ url: Api.monitor, params }).then(() => {
-    handleSuccess();
+export const getDataCenterQuartzById = (params) => {
+  return defHttp.get({
+    headers: {
+      'X-Access-Token':
+        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNzU5ODQxMTcwfQ.fHaM3l-d88tUSLOs8sstXsDuSCn6Agbj_EMZMgV6waw',
+    },
+    url: Api.get,
+    params,
   });
 };
+
+/**
+ * 删除任务
+ * @param params
+ */
+export const deleteDataCenterQuartz = (params, handleSuccess) => {
+  return defHttp
+    .delete(
+      {
+        headers: {
+          'X-Access-Token':
+            'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNzU5ODQxMTcwfQ.fHaM3l-d88tUSLOs8sstXsDuSCn6Agbj_EMZMgV6waw',
+        },
+        url: Api.delete,
+        data: params,
+      },
+      { joinParamsToUrl: true }
+    )
+    .then(() => {
+      handleSuccess();
+    });
+};
 /**
  * 批量删除任务
  * @param params
  */
-export const batchDeleteQuartz = (params, handleSuccess) => {
+export const batchDataCenterDeleteQuartz = (params, handleSuccess) => {
   Modal.confirm({
     title: '确认删除',
     content: '是否删除选中数据',
     okText: '确认',
     cancelText: '取消',
     onOk: () => {
-      return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
-        handleSuccess();
-      });
+      return defHttp
+        .delete(
+          {
+            headers: {
+              'X-Access-Token':
+                'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNzU5ODQxMTcwfQ.fHaM3l-d88tUSLOs8sstXsDuSCn6Agbj_EMZMgV6waw',
+            },
+            url: Api.deleteBatch,
+            data: params,
+          },
+          { joinParamsToUrl: true }
+        )
+        .then(() => {
+          handleSuccess();
+        });
     },
   });
 };
+
+// // 定义可配置的控制接口
+function generateApiPath(moduleType, operation) {
+  return `/dataCenter/${moduleType}/quartzJob/${operation}`;
+}
+// 启动作业接口
+export const resumeDataCenterJob = (params: any, sysType: string, operation: string, handleSuccess: () => void) => {
+  const currentModule = sysType;
+  const apiPath = generateApiPath(currentModule, operation);
+  return defHttp
+    .get({
+      headers: {
+        'X-Access-Token':
+          'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNzU5ODQxMTcwfQ.fHaM3l-d88tUSLOs8sstXsDuSCn6Agbj_EMZMgV6waw',
+      },
+      url: apiPath,
+      params,
+    })
+    .then(() => {
+      handleSuccess();
+    });
+};
+
+// 停止作业接口
+export const pauseDataCenterJob = (params: any, sysType: String, operation: String, handleSuccess: () => void) => {
+  const currentModule = sysType;
+  const apiPath = generateApiPath(currentModule, operation);
+  return defHttp
+    .get({
+      headers: {
+        'X-Access-Token':
+          'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNzU5ODQxMTcwfQ.fHaM3l-d88tUSLOs8sstXsDuSCn6Agbj_EMZMgV6waw',
+      },
+      url: apiPath,
+      params,
+    })
+    .then(() => {
+      handleSuccess();
+    });
+};
+
+// 立即执行作业接口
+export const excuteDataCenterJob = (params: any, sysType: String, operation: String, handleSuccess: () => void) => {
+  const currentModule = sysType;
+  const apiPath = generateApiPath(currentModule, operation);
+  return defHttp
+    .get({
+      headers: {
+        'X-Access-Token':
+          'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNzU5ODQxMTcwfQ.fHaM3l-d88tUSLOs8sstXsDuSCn6Agbj_EMZMgV6waw',
+      },
+      url: apiPath,
+      params,
+    })
+    .then(() => {
+      handleSuccess();
+    });
+};

src/views/vent/dataCenter/deviceCenter/index.vue

@@ -28,10 +28,10 @@
             <div class="right-title">实时监测：</div>
             <a-table
               size="small"
-              :scroll="{ y: 680 }"
+              :scroll="{ y: 650 }"
               :columns="outerColumns"
-              :data-source="deviceList"
-              :pagination="pagination"
+              :data-source="paginatedData2"
+              :pagination="paginationConfig2"
               :row-key="(record) => record.id"
               :expand-row-by-click="true"
               :expanded-row-keys="expandedRowKeys"
@@ -59,11 +59,11 @@
                 <a-table
                   size="small"
                   :columns="innerColumns"
-                  :data-source="monitorList"
-                  :pagination="pagination"
+                  :data-source="paginatedData"
+                  :pagination="paginationConfig"
                   :loading="loadingMap[record.id]"
                   bordered
-                  overflow-y="auto"
+                  :scroll="{ y: 410 }"
                 >
                   <template #bodyCell="{ column, record: innerRecord }">
                     <template v-if="column.dataIndex === 'value'">
@@ -87,7 +87,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick, reactive, onMounted, onUnmounted, inject, shallowRef, computed } from 'vue';
+import { ref, nextTick, reactive, onMounted, onUnmounted, watch, shallowRef, computed } from 'vue';
 import { usePermission } from '/@/hooks/web/usePermission';
 import customHeader from '/@/components/vent/customHeader.vue';
 import { AesEncryption } from '/@/utils/cipher';
@@ -119,22 +119,69 @@ const expandedRowKeys = ref([]);
 
 // 加载状态映射
 const loadingMap = reactive({});
-
-// 分页配置
-const pagination = reactive({
+// 分页参数
+const paginationState = ref({
   current: 1,
   pageSize: 10,
-  total: computed(() => deviceList.value.length),
-  showSizeChanger: true,
-  pageSizeOptions: ['10', '20', '50'],
-  onChange: (page, size) => {
-    pagination.current = page;
-    pagination.pageSize = size;
-  },
-  onShowSizeChange: (current, size) => {
-    pagination.current = 1;
-    pagination.pageSize = size;
-  },
+  total: 0,
+});
+const paginationState2 = ref({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+});
+// 计算分页后的数据
+const paginatedData = computed(() => {
+  const start = (paginationState.value.current - 1) * paginationState.value.pageSize;
+  const end = start + paginationState.value.pageSize;
+  return monitorList.value.slice(start, end);
+});
+// 计算分页后的数据
+const paginatedData2 = computed(() => {
+  const start = (paginationState2.value.current - 1) * paginationState2.value.pageSize;
+  const end = start + paginationState2.value.pageSize;
+  return deviceList.value.slice(start, end);
+});
+// 分页器配置 - 修复响应式问题
+const paginationConfig = computed(() => {
+  return {
+    current: paginationState.value.current,
+    pageSize: paginationState.value.pageSize,
+    total: monitorList.value.length,
+    showSizeChanger: true,
+    showQuickJumper: true,
+    showTotal: (total) => `共 ${total} 条`,
+    pageSizeOptions: ['10', '20', '50', '100'],
+    size: 'small',
+    onChange: (page, pageSize) => {
+      paginationState.value.current = page;
+      paginationState.value.pageSize = pageSize;
+    },
+    onShowSizeChange: (current, size) => {
+      paginationState.value.current = 1;
+      paginationState.value.pageSize = size;
+    },
+  };
+});
+const paginationConfig2 = computed(() => {
+  return {
+    current: paginationState2.value.current,
+    pageSize: paginationState2.value.pageSize,
+    total: deviceList.value.length,
+    showSizeChanger: true,
+    showQuickJumper: true,
+    showTotal: (total) => `共 ${total} 条`,
+    pageSizeOptions: ['10', '20', '50', '100'],
+    size: 'small',
+    onChange: (page, pageSize) => {
+      paginationState2.value.current = page;
+      paginationState2.value.pageSize = pageSize;
+    },
+    onShowSizeChange: (current, size) => {
+      paginationState2.value.current = 1;
+      paginationState2.value.pageSize = size;
+    },
+  };
 });
 // 切换tab页面
 async function onChangeTab(tab) {
@@ -371,7 +418,7 @@ const loadMonitoringData = async (deviceId) => {
 
   loadingMap[deviceId] = true;
   try {
-    const result = await getDevMonitorListById({ devId: deviceId });
+    const result = await getDevMonitorListById({ devId: deviceId.toString() });
     monitorList.value = Object.values(result.readData);
   } catch (error) {
     console.error(`加载设备 ${deviceId} 数据失败:`, error);
@@ -384,6 +431,11 @@ onMounted(async () => {
   await getDeviceType();
 });
 onUnmounted(() => {});
+// 监听分页变化
+watch(
+  () => [paginationState.value.current, paginationState.value.pageSize],
+  () => {}
+);
 </script>
 
 <style lang="less" scoped>
@@ -479,172 +531,6 @@ onUnmounted(() => {});
           }
         }
       }
-
-      .detail-content {
-        width: 100%;
-        height: 100%;
-      }
-
-      .history-content {
-        position: relative;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        background: url('/@/assets/images/fire/bj1.png') no-repeat center;
-        background-size: 100% 100%;
-        color: #fff;
-
-        .left-box {
-          width: 40%;
-          height: 100%;
-          margin-right: 15px;
-          padding: 10px;
-          box-sizing: border-box;
-          background: url('/@/assets/images/fire/bj1.png') no-repeat center;
-          background-size: 100% 100%;
-
-          .left-title {
-            display: flex;
-            height: 30px;
-            align-items: center;
-            font-size: 14px;
-            margin-bottom: 10px;
-
-            span {
-              color: #fff;
-            }
-
-            .zd-open {
-              color: rgb(0, 242, 255);
-            }
-
-            .zd-close {
-              color: #ff0000;
-            }
-
-            .title-fz {
-              margin-right: 25px;
-            }
-          }
-
-          .left-content {
-            display: flex;
-            justify-content: flex-start;
-            align-items: flex-start;
-            flex-wrap: wrap;
-            height: calc(100% - 40px);
-            overflow-y: auto;
-
-            .card-box {
-              position: relative;
-              // width: 242px;
-              width: 182px;
-              height: 120px;
-              margin-bottom: 15px;
-              display: flex;
-              justify-content: center;
-
-              .card-itemN {
-                position: relative;
-                width: 85px;
-                height: 120px;
-                background: url('/@/assets/images/zd-2.png') no-repeat center;
-                background-size: 100% 100%;
-                cursor: pointer;
-
-                .card-item-label {
-                  width: 100%;
-                  position: absolute;
-                  bottom: 5px;
-                  font-size: 12px;
-                  color: #fff;
-                  text-align: center;
-                }
-              }
-
-              .card-itemL {
-                position: relative;
-                width: 85px;
-                height: 120px;
-                background: url('/@/assets/images/zd-3.png') no-repeat center;
-                background-size: 100% 100%;
-                cursor: pointer;
-
-                .card-item-label {
-                  width: 100%;
-                  position: absolute;
-                  bottom: 5px;
-                  font-size: 12px;
-                  color: #fff;
-                  text-align: center;
-                }
-              }
-
-              .card-itemD {
-                position: relative;
-                width: 85px;
-                height: 120px;
-                background: url('/@/assets/images/zd-1.png') no-repeat center;
-                background-size: 100% 100%;
-                cursor: pointer;
-
-                .card-item-label {
-                  width: 100%;
-                  position: absolute;
-                  bottom: 5px;
-                  font-size: 12px;
-                  color: #fff;
-                  text-align: center;
-                }
-              }
-
-              .card-modal {
-                width: 86px;
-                position: absolute;
-                left: 140px;
-                color: #fff;
-                top: 50%;
-                transform: translate(0, -50%);
-                font-size: 12px;
-              }
-
-              .card-modal1 {
-                width: 86px;
-                position: absolute;
-                left: -42px;
-                color: #fff;
-                top: 50%;
-                transform: translate(0, -50%);
-                font-size: 12px;
-              }
-            }
-          }
-        }
-
-        .right-box {
-          width: calc(60% - 15px);
-          height: 100%;
-          padding: 10px;
-          box-sizing: border-box;
-          background: url('/@/assets/images/fire/bj1.png') no-repeat center;
-          background-size: 100% 100%;
-
-          .historytable {
-            height: 100%;
-          }
-
-          .right-title {
-            display: flex;
-            height: 30px;
-            align-items: center;
-            font-size: 14px;
-            color: #fff;
-            margin-bottom: 10px;
-          }
-        }
-      }
     }
   }
 }

src/views/vent/dataCenter/stationCenter/device.api.ts

@@ -2,13 +2,28 @@ import { defHttp } from '/@/utils/http/axios';
 
 enum Api {
   subStationList = '/safety/ventanalySubStation/alllist',
-  deviceTypeList = '/safety/ventanalyDeviceInfo/DeviceKind/queryBySystem',
-  deviceList = '/compute/deviceData/getDeviceAll',
-  devMonitorList = '/compute/deviceData/getDeviceMonitorInfo',
+  deviceList = '/dataCenter/compute/deviceData/getDeviceAll',
+  devMonitorList = '/dataCenter/compute/deviceData/getDeviceMonitorInfo',
 }
 // 分站查询接口
 export const subStationList = (params) => defHttp.get({ url: Api.subStationList, params });
 //根据设备类型获取设备列表
-export const getDeviceListByType = (params) => defHttp.post({ url: Api.deviceList, params });
+export const getDeviceListByType = (params) =>
+  defHttp.post({
+    headers: {
+      'X-Access-Token':
+        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNzU5ODQxMTcwfQ.fHaM3l-d88tUSLOs8sstXsDuSCn6Agbj_EMZMgV6waw',
+    },
+    url: Api.deviceList,
+    params,
+  });
 //根据设备id获取设备监控数据
-export const getDevMonitorListById = (params) => defHttp.post({ url: Api.devMonitorList, params });
+export const getDevMonitorListById = (params) =>
+  defHttp.post({
+    headers: {
+      'X-Access-Token':
+        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNzU5ODQxMTcwfQ.fHaM3l-d88tUSLOs8sstXsDuSCn6Agbj_EMZMgV6waw',
+    },
+    url: Api.devMonitorList,
+    params,
+  });