src/views/data/channel/opcda/tag/index.vue

@@ -1,8 +1,8 @@
<template>
  <el-drawer
    v-model="drawer"
    size="50%"
    title="ModBus Tag"
    size="60%"
    title="OpcDA Tag"
    :direction="direction"
    :before-close="handleClose"
  >
@@ -37,11 +37,32 @@
            type="primary"
            plain
            @click="openForm('create')"
            v-hasPermi="['data:channel-modbus:create']"
            v-hasPermi="['data:channel-opcda:create']"
          >
            <Icon icon="ep:plus" class="mr-5px" />
            新增
          </el-button>
          <el-button
            type="warning"
            plain
            @click="handleImport"
            v-hasPermi="['data:channel-opcda-tag:import']">
            <Icon icon="ep:upload" /> 导入
          </el-button>
          <el-button
            type="success"
            plain
            @click="handleExport"
            :loading="exportLoading"
            v-hasPermi="['data:channel-opcda-tag:export']">
            <Icon icon="ep:download" />导出
          </el-button>
        </el-form-item>
        <el-form-item label="更新当前值" label-width="100px">
          <el-switch
            v-model="queryParams.currentValue"
            active-color="#13ce66"
            inactive-color="#ff4949"/>
        </el-form-item>
      </el-form>
    </ContentWrap>
@@ -68,10 +89,31 @@
          align="center"
        >
          <template #default="scope">
            <el-tag v-if="scope.row.enabled === true" size="small">是</el-tag>
            <el-tag v-if="scope.row.enabled === 1" size="small">是</el-tag>
            <el-tag v-else size="small" type="danger">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="dataValue"
          label="数据值"
          header-align="center"
          align="center"
          min-width="100"
          :formatter="(row) => {if (row.dataValue === -2.0) {return '--';}return row.dataValue;}"
        />
        <el-table-column
          prop="dataTime"
          label="数据时间"
          header-align="center"
          align="center"
          min-width="150"
        />
        <el-table-column
          prop="dataQuality"
          label="数据质量"
          header-align="center"
          align="center"
        />
        <el-table-column label="操作" align="center" min-width="110" fixed="right">
          <template #default="scope">
            <el-button
@@ -103,12 +145,17 @@
    </ContentWrap>
    <!-- 表单弹窗：添加/修改 -->
    <TagForm ref="formRef" @success="getList" />
    <TagImportForm ref="importFormRef" @success="getList" />
  </el-drawer>
</template>
<script lang="ts" setup>
  import type { DrawerProps } from 'element-plus'
  import * as OpcdaTagApi from "@/api/data/channel/opcda/tag";
  import * as OpcDaTagApi from "@/api/data/channel/opcda/tag";
  import TagForm from './TagForm.vue'
  import download from "@/utils/download";
  import {ref,reactive} from "vue";
  import TagImportForm from '../../common/tag/TagImportForm.vue'
  import {onBeforeUnmount, onMounted} from "vue";

  defineOptions({name: 'ModBusTag'})

@@ -124,7 +171,9 @@
    pageNo: 1,
    pageSize: 10,
    serverId: undefined,
    tagName: undefined
    tagName: undefined,
    serverName: undefined,
    currentValue:false,
  })
  const queryFormRef = ref() // 搜索的表单
  const exportLoading = ref(false) // 导出的加载中
@@ -133,7 +182,7 @@
  const getList = async () => {
    loading.value = true
    try {
      const page = await OpcdaTagApi.getOpcdaTagPage(queryParams)
      const page = await OpcDaTagApi.getOpcdaTagPage(queryParams)
      list.value = page.list
      total.value = page.total
    } finally {
@@ -165,7 +214,7 @@
      // 删除的二次确认
      await message.delConfirm()
      // 发起删除
      await OpcdaTagApi.deleteOpcdaTag(id)
      await OpcDaTagApi.deleteOpcdaTag(id)
      message.success(t('common.delSuccess'))
      // 刷新列表
      await getList()
@@ -174,10 +223,11 @@
  }

  /** 打开弹窗 */
  const open = async (serverId?: string) => {
  const open = async (serverId?: string, serverName?: string) => {
    resetForm()
    drawer.value = true
    queryParams.serverId = serverId
    queryParams.serverName = serverName
    if (serverId) {
      getList()
    }
@@ -195,4 +245,46 @@
  const handleClose = (done: () => void) => {
    drawer.value = false
  }

  /** tag导入 */
  const importFormRef = ref()
  const handleImport = () => {
    if(queryParams.serverId){
      importFormRef.value.open(queryParams.serverName, '/data/channel/opcda/tag/import',OpcDaTagApi.importOpcDaTagTemplate(), 'OpcDa', queryParams.serverId)
    }
  }

  /** 导出按钮操作 */
  const handleExport = async () => {
    try {
      // 导出的二次确认
      await message.exportConfirm()
      // 发起导出
      exportLoading.value = true
      const data = await OpcDaTagApi.exportOpcDaTag(queryParams)
      download.excel(data, 'OpcDa_' + queryParams.serverName + '_Tag列表.xlsx')
    } catch {
    } finally {
      exportLoading.value = false
    }
  }
  let intervalId;

  onMounted(async () => {
    // 创建定时器
    intervalId = setInterval(async () => {
      if(queryParams.currentValue){
        const page = await OpcDaTagApi.getOpcdaTagPage(queryParams)
        list.value = page.list
        total.value = page.total
      }
    }, 10000);
  });

  // 在组件卸载时清除定时器
  onBeforeUnmount(() => {
    if (intervalId) {
      clearInterval(intervalId);
    }
  });
</script>