mky-vent-base/src/views/vent/bundle/bundleMonitorTable/index.vue

<template>
  <div class="dustMonitor">
    <customHeader>束管日报分析</customHeader>
    <a-table :columns="columns" :data-source="tableData" size="small" :scroll="{ y: 500 }" class="tableW">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'action'">
          <a class="action-link" @click="toDetail(record)">数据分析</a>
        </template>
      </template>
    </a-table>
    <a-modal style="width: 24%; height: 600px" title="爆炸三角形" v-model:visible="modalVisible" :draggable="true" :footer="null">
      <blastDelta :posMonitor="posMonitor" />
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, shallowRef } from 'vue';
import { columns } from './bundle-table.data';
import { getBundleInfoList } from './bundle-table.api';
import customHeader from '/@/components/vent/customHeader.vue';
// import { blastDelta } from './modal/blastDelta.vue';
import blastDelta from './modal/blastDelta.vue';

let tableData = ref<any[]>([]);
let modalVisible = ref(false);
const posMonitor = shallowRef({});
async function getTableList() {
  let res = await getBundleInfoList({ type: 'bundle' });
  const content = res.content;
  let contentArr = JSON.parse(content);
  tableData.value = contentArr;
}

function toDetail(record: any) {
  posMonitor.value = record;
  console.log(posMonitor.value, 'posMonitor');
  modalVisible.value = true;
}
onMounted(() => {
  getTableList();
});
</script>

<style lang="less" scoped>
@import '/@/design/theme.less';

.dustMonitor {
  width: 100%;
  height: 100%;
  padding: 80px 10px 15px 10px;
  box-sizing: border-box;
  position: relative;
}

:deep(.zxm-table-thead > tr > th:last-child) {
  border-right: 1px solid #91e9fe !important;
}

:deep(.zxm-picker-input > input) {
  color: #fff;
}

:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
  border: 1px solid var(--vent-form-item-border) !important;
  background-color: #ffffff00 !important;
}

:deep(.zxm-select-selection-item) {
  color: #fff !important;
}
</style>