tall4-pc/src/views/commands.vue

<template>
  <SearchCommands @search="onSearch" />
  <template v-if="data">
    <el-table :data="data" :max-height="contentHeight" border stripe style="width: 100%">
      <el-table-column align="center" fixed label="设备ID" min-width="100" prop="deviceId" />
      <el-table-column align="center" label="时间" min-width="200">
        <template #default="scope">
          {{ dayjs(new Date(+scope.row.createdAt)).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="传输方向" min-width="80">
        <template #default="scope">
          {{ log.DIRECTION[scope.row.dir] }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="传输启动" min-width="80">
        <template #default="scope">
          {{ log.PRM[scope.row.prm] }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="安全模式" min-width="80">
        <template #default="scope">
          {{ log.SER[scope.row.ser] }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="流控" min-width="80">
        <template #default="scope">
          {{ log.DFC[scope.row.dfc] }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="功能码" min-width="180">
        <template #default="scope">
          {{ log.CODE[scope.row.code].text }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="包序号" min-width="80" prop="serialNo" />

      <el-table-column align="center" label="类型标识" min-width="80">
        <template #default="scope">
          <span v-if="scope.row.asduType && log.ASDU_TYPE[scope.row.asduType]">
            {{ log.ASDU_TYPE[scope.row.asduType].text }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="信息体顺序" min-width="100">
        <template #default="scope">
          {{ log.INFO_ORDER[scope.row.infoOrder] }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="信息体个数" min-width="100" prop="infoNum" />

      <el-table-column align="center" label="传输原因" min-width="180">
        <template #default="scope">
          {{ log.REASON[scope.row.reason].text }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="协议内容" min-width="80">
        <template #default="scope">
          <el-button type="text" @click="openContent(scope.row.content)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="page.page"
      :default-page-size="50"
      :page-count="page.count"
      :page-size="page.size"
      :page-sizes="[1, 10, 20, 50, 100]"
      :total="page.total"
      background
      class="my-3 float-right"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="onSizeChange"
      @current-change="onCurrentPageChange"
    ></el-pagination>
  </template>

  <!--    弹出框-->
  <el-dialog v-model="showContent" title="协议内容">
    <code class="font-mono">{{ contents }}</code>
  </el-dialog>
</template>

<script setup>
import { getLog } from 'apis';
import SearchCommands from 'components/commands/search-commands.vue';
import dayjs from 'dayjs';
import { ElMessage } from 'element-plus';
import { computed, onMounted, ref } from 'vue';
import { useStore } from 'vuex';
import * as log from '@/config/log';

const data = ref([]);
const page = ref({
  page: 1,
  size: 50,
  count: 0,
  total: 0,
});
const showContent = ref(false); // 是否显示协议内容弹出框
const contents = ref(''); // 弹出的协议内容
const contentHeight = ref(700);
const store = useStore();
const currentDeviceId = computed(() => store.state.device.currentDeviceId);

// 设置表格高度
onMounted(() => {
  const winHeight = document.documentElement.clientHeight;
  contentHeight.value = winHeight - 250;
  onSearch();
});

/**
 * 查询
 * @param {object} options
 * @returns {Promise<void>}
 */
async function onSearch(
  options = {
    ...page.value,
    sort: [
      {
        col: 'createdAt',
        order: 'DESC',
      },
    ],
    deviceId: currentDeviceId.value,
  },
) {
  try {
    const resData = await getLog(options);
    page.value = resData.page;
    data.value = resData.data;
  } catch (error) {
    ElMessage.error('查询失败');
    throw new Error(error);
  }
}

/**
 * 打开协议内容的弹出框 并记录值
 * @param {string} content 协议内容
 */
function openContent(content) {
  showContent.value = true;
  contents.value = content;
}

// 当前页码变化
const onCurrentPageChange = pageEvent => {
  const options = {
    page: pageEvent,
    size: page.value.size || 50,
    sort: [
      {
        col: 'createdAt',
        order: 'DESC',
      },
    ],
    deviceId: currentDeviceId.value,
  };
  onSearch(options);
};

// 每页条数变化
const onSizeChange = size => {
  const options = {
    page: 1,
    size,
    sort: [
      {
        col: 'createdAt',
        order: 'DESC',
      },
    ],
    deviceId: currentDeviceId.value,
  };
  onSearch(options);
};
</script>