tall4-pc/src/views/commands.vue

<template>
  <SearchCommands @search="onSearch" />
  <template v-if="data">
    <el-table :data="data" :style="{ 'max-height': contentHeight + 'px' }" 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="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">
          {{ log.ASDU_TYPE[scope.row.type] }}
        </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] }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="协议内容" min-width="80">
        <template #default="scope">
          <el-button type="text" @click="openContent(scope.row.contents)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

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

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

const data = ref([]);
const showContent = ref(false); // 是否显示协议内容弹出框
const contents = ref(''); // 弹出的协议内容
let contentHeight = 600;

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

/**
 * 查询
 * @param {object} options
 * @returns {Promise<void>}
 */
async function onSearch(options) {
  try {
    console.log(options);
    // data.value = await getCommandsStatus(options);
  } catch (error) {
    ElMessage.error('查询失败');
    throw new Error(error);
  }
}

function openContent(content) {
  showContent.value = true;
  contents.value = content;
  console.log('open content', content);
}
</script>