src/views/data/channel/http/api/tag/index.vue

@@ -1,8 +1,8 @@
<template>
  <el-drawer
    v-model="drawer"
    size="50%"
    title="Kio Tag"
    size="60%"
    title="Http Tag"
    :direction="direction"
    :before-close="handleClose"
  >
@@ -26,22 +26,45 @@
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery">
            <Icon icon="ep:search" class="mr-5px" />
            <Icon icon="ep:search" class="mr-5px"/>
            搜索
          </el-button>
          <el-button @click="resetQuery">
            <Icon icon="ep:refresh" class="mr-5px" />
            <Icon icon="ep:refresh" class="mr-5px"/>
            重置
          </el-button>
          <el-button
            type="primary"
            plain
            @click="openForm('create')"
            v-hasPermi="['data:channel-kio:create']"
            v-hasPermi="['data:channel-http:create']"
          >
            <Icon icon="ep:plus" class="mr-5px" />
            <Icon icon="ep:plus" class="mr-5px"/>
            新增
          </el-button>
          <el-button
            type="warning"
            plain
            @click="handleImport"
            v-hasPermi="['data:channel-http-tag:import']">
            <Icon icon="ep:upload"/>
            导入
          </el-button>
          <el-button
            type="success"
            plain
            @click="handleExport"
            :loading="exportLoading"
            v-hasPermi="['data:channel-http-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>
@@ -75,8 +98,34 @@
          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"
        >
          <template #default="scope">
            <el-tag v-if="scope.row.dataQuality === 'Good'" size="small" type="success">{{scope.row.dataQuality}}</el-tag>
            <el-tag v-if="scope.row.dataQuality === 'Bad'" size="small" type="danger">{{scope.row.dataQuality}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="110" fixed="right">
@@ -85,7 +134,7 @@
              link
              type="primary"
              @click="openForm('update', scope.row.id)"
              v-hasPermi="['data:channel-kio:update']"
              v-hasPermi="['data:channel-http:update']"
            >
              编辑
            </el-button>
@@ -93,7 +142,7 @@
              link
              type="danger"
              @click="handleDelete(scope.row.id)"
              v-hasPermi="['data:channel-kio:delete']"
              v-hasPermi="['data:channel-http:delete']"
            >
              删除
            </el-button>
@@ -109,97 +158,149 @@
      />
    </ContentWrap>
    <!-- 表单弹窗：添加/修改 -->
    <TagForm ref="formRef" @success="getList" />
    <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 HttpTagApi from "@/api/data/channel/http/tag";
import TagForm from './TagForm.vue'
  import type {DrawerProps} from 'element-plus'
  import * as HttpTagApi from "@/api/data/channel/http/tag";
  import TagForm from './TagForm.vue'
  import download from "@/utils/download";
  import {ref} from "vue";
  import {onBeforeUnmount, onMounted} from "vue";
  import TagImportForm from '../../../common/tag/TagImportForm.vue'
  import * as OpcUaTagApi from "@/api/data/channel/opcua/tag";

defineOptions({name: 'HttpTag'})
  defineOptions({name: 'HttpTag'})

const message = useMessage() // 消息弹窗
const {t} = useI18n() // 国际化
  const message = useMessage() // 消息弹窗
  const {t} = useI18n() // 国际化

const drawer = ref(false)
const direction = ref<DrawerProps['direction']>('rtl')
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  apiId: undefined,
  tagName: undefined
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
  const drawer = ref(false)
  const direction = ref<DrawerProps['direction']>('rtl')
  const loading = ref(true) // 列表的加载中
  const total = ref(0) // 列表的总页数
  const list = ref([]) // 列表的数据
  const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    apiId: undefined,
    tagName: undefined,
    httpName: undefined,
    currentValue:false,
  })
  const queryFormRef = ref() // 搜索的表单
  const exportLoading = ref(false) // 导出的加载中

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const page = await HttpTagApi.getHttpTagPage(queryParams)
    list.value = page.list
    total.value = page.total
  } finally {
    loading.value = false
  /** 查询列表 */
  const getList = async () => {
    loading.value = true
    try {
      const page = await HttpTagApi.getHttpTagPage(queryParams)
      list.value = page.list
      total.value = page.total
    } finally {
      loading.value = false
    }
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id, queryParams.apiId)
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await HttpTagApi.deleteHttpTag(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {
  }
}

/** 打开弹窗 */
const open = async (apiId?: string) => {
  resetForm()
  drawer.value = true
  queryParams.apiId = apiId
  if (apiId) {
  /** 搜索按钮操作 */
  const handleQuery = () => {
    queryParams.pageNo = 1
    getList()
  }
}
defineExpose({open}) // 提供 open 方法，用于打开弹窗

/** 重置表单 */
const resetForm = () => {
  queryParams.pageNo = 1
  queryParams.pageSize = 10
  queryParams.apiId = ''
  queryParams.tagName = ''
}
  /** 重置按钮操作 */
  const resetQuery = () => {
    queryFormRef.value.resetFields()
    handleQuery()
  }

const handleClose = (done: () => void) => {
  drawer.value = false
}
  /** 添加/修改操作 */
  const formRef = ref()
  const openForm = (type: string, id?: number) => {
    formRef.value.open(type, id, queryParams.apiId)
  }

  /** 删除按钮操作 */
  const handleDelete = async (id: number) => {
    try {
      // 删除的二次确认
      await message.delConfirm()
      // 发起删除
      await HttpTagApi.deleteHttpTag(id)
      message.success(t('common.delSuccess'))
      // 刷新列表
      await getList()
    } catch {
    }
  }

  /** 打开弹窗 */
  const open = async (apiId?: string, name?: string) => {
    resetForm()
    drawer.value = true
    queryParams.apiId = apiId
    queryParams.httpName = name
    if (apiId) {
      getList()
    }
  }
  defineExpose({open}) // 提供 open 方法，用于打开弹窗

  /** 重置表单 */
  const resetForm = () => {
    queryParams.pageNo = 1
    queryParams.pageSize = 10
    queryParams.apiId = ''
    queryParams.tagName = ''
  }

  const handleClose = (done: () => void) => {
    drawer.value = false
  }

  /** tag导入 */
  const importFormRef = ref()
  const handleImport = () => {
    if (queryParams.apiId) {
      importFormRef.value.open(queryParams.httpName, '/data/channel/http/tag/import', HttpTagApi.importHttpTagTemplate(), 'Http', queryParams.apiId)
    }
  }

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

  let intervalId;

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

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