时序数据归档

 src/api/data/arc/data.ts

对比新文件
@@ -0,0 +1,20 @@
import request from '@/config/axios'

export interface ArcDataVO {
  id: string
  arcId: string,
  value: string,
  arcTime: string,
  createTime: string
}

export interface ArcDataPageReqVO extends PageParam {
  arcId?:string,
  startTime?: Date,
  endTime?: Date,
}

// 查询ArcSetting列表
export const getPage = (params: ArcDataPageReqVO) => {
  return request.get({ url: '/data/da/arc/dataPage', params })
}

 src/api/data/arc/index.ts

对比新文件
@@ -0,0 +1,40 @@
import request from '@/config/axios'

export interface ArcSettingVO {
  id: string
  name: string,
  type: string,
  point: string,
  calculate: string,
  isEnable: string
}

export interface ArcSettingPageReqVO extends PageParam {
  name?: string,
  type?: string
}

// 查询ArcSetting列表
export const getArcSettingPage = (params: ArcSettingPageReqVO) => {
  return request.get({ url: '/data/da/arc/page', params })
}

// 查询ArcSetting详情
export const getArcSetting = (id: number) => {
  return request.get({ url: `/data/da/arc/info/${id}`})
}

// 新增ArcSetting
export const createArcSetting = (data: ArcSettingVO) => {
  return request.post({ url: '/data/da/arc/create', data })
}

// 修改ArcSetting
export const updateArcSetting = (data: ArcSettingVO) => {
  return request.put({ url: '/data/da/arc/update', data })
}

// 删除ArcSetting
export const deleteArcSetting = (id: number) => {
  return request.delete({ url: '/data/da/arc/delete?id=' + id })
}

 src/utils/dict.ts

@@ -187,5 +187,7 @@
  CAMERA_BRAND = 'camera_brand',
  CAPTURE_TYPE = 'capture_type',
  MODEL_RESULT_TYPE = 'model_result_type',
  DATA_QUALITY = 'data_quality'
  DATA_QUALITY = 'data_quality',
  ARC_TYPE = 'arc_type',
  ARC_CALCULATE_TYPE = 'arc_calculate_type'
}

 src/views/data/arc/ArcData.vue

对比新文件
@@ -0,0 +1,148 @@
<template>
  <el-drawer
    v-model="drawer"
    size="60%"
    title="归档数据"
    :direction="direction"
    :before-close="handleClose"
  >
    <!-- 搜索 -->
    <ContentWrap>
      <el-form
        class="-mb-15px"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="queryParams.startTime"
            format="YYYY-MM-DD HH:mm:00"
            value-format="YYYY-MM-DD HH:mm:00"
            type="datetime"
            :clearable="false"
            placeholder="选择日期时间"/>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            v-model="queryParams.endTime"
            format="YYYY-MM-DD HH:mm:00"
            value-format="YYYY-MM-DD HH:mm:00"
            type="datetime"
            :clearable="false"
            placeholder="选择日期时间"/>
        </el-form-item>
        <el-form-item>
          <el-button @click="getList()">查询</el-button>
        </el-form-item>
      </el-form>
    </ContentWrap>
    <!-- 列表 -->
    <ContentWrap>
      <el-table v-loading="loading" :data="list">
        <el-table-column
          prop="value"
          label="数据值"
          header-align="center"
          align="center"
          min-width="100"
        />
        <el-table-column
          prop="arcTime"
          label="归档时间"
          header-align="center"
          align="center"
          min-width="150"
        />
        <el-table-column
          prop="createTime"
          label="创建时间"
          header-align="center"
          align="center"
        />
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </ContentWrap>
  </el-drawer>
</template>
<script lang="ts" setup>
  import type {DrawerProps} from 'element-plus'
  import * as ArcDataApi from "@/api/data/arc/data";
  import {ref} from "vue";
  import {getYMDHM0} from "@/utils/dateUtil";

  defineOptions({name: 'ArcData'})

  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,
    arcId:undefined,
    startTime: undefined,
    endTime: getYMDHM0(new Date()),
  })
  const queryFormRef = ref() // 搜索的表单
  const exportLoading = ref(false) // 导出的加载中

  /** 查询列表 */
  const getList = async () => {
    loading.value = true
    try {
      const page = await ArcDataApi.getPage(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 open = async (arcId?: string) => {
    resetForm()
    drawer.value = true
    queryParams.arcId = arcId
    if (arcId) {
      getList()
    }
  }
  defineExpose({open}) // 提供 open 方法，用于打开弹窗

  /** 重置表单 */
  const resetForm = () => {
    queryParams.pageNo = 1
    queryParams.pageSize = 10
    queryParams.arcId = ''
    queryParams.startTime = ''
    queryParams.endTime = getYMDHM0(new Date())
  }

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

 src/views/data/arc/ArcSettingForm.vue

对比新文件
@@ -0,0 +1,169 @@
<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="50%">
    <el-form
      ref="formRef"
      v-loading="formLoading"
      :model="formData"
      :rules="formRules"
      label-width="120px"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入归档名称" />
      </el-form-item>
      <el-form-item label="归档周期" prop="type">
        <el-select
          v-model="formData.type"
          clearable
          placeholder="请选择归档周期"
        >
          <el-option
            v-for="dict in getDictOptions(DICT_TYPE.ARC_TYPE)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="归档点位" prop="point">
            <el-select
              v-model="formData.point"
              filterable
              placeholder="请选择归档点位">
              <el-option
                v-for="(item, index) in pointList"
                :key="index"
                :label="item.pointName"
                :value="item.pointNo"/>
            </el-select>
      </el-form-item>
      <el-form-item label="计算方法" prop="calculate">
        <el-select
          v-model="formData.calculate"
          clearable
          placeholder="请选择计算方法"
        >
          <el-option
            v-for="dict in getDictOptions(DICT_TYPE.ARC_CALCULATE_TYPE)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否启用" prop="isEnable">
        <el-select
          v-model="formData.isEnable"
          clearable
          placeholder="请选择是否启用"
        >
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.COM_IS_INT)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
  import {DICT_TYPE, getDictOptions, getIntDictOptions} from "@/utils/dict";
  import * as ArcDataApi from '@/api/data/arc'
  import { CommonStatusEnum } from '@/utils/constants'
  import * as DaPoint from "@/api/data/da/point";

  defineOptions({ name: 'ArcSettingForm' })

  const { t } = useI18n() // 国际化
  const message = useMessage() // 消息弹窗
  const dialogVisible = ref(false) // 弹窗的是否展示
  const dialogTitle = ref('') // 弹窗的标题
  const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
  const formType = ref('') // 表单的类型：create - 新增；update - 修改
  const formData = ref({
    id: undefined,
    name: undefined,
    type: undefined,
    point: undefined,
    calculate: undefined,
    isEnable: 1
  })
  const formRules = reactive({
    name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
    type: [{ required: true, message: '归档周期不能为空', trigger: 'blur' }],
    point: [{ required: true, message: '归档点位不能为空', trigger: 'blur' }],
    calculate: [{ required: true, message: '计算方法不能为空', trigger: 'blur' }]
  })
  const formRef = ref() // 表单 Ref
  const pointList = ref([{
    pointName: '',
    pointNo: ''
  }])
  const queryParams = reactive({
    pointTypes: "MEASURE,CONSTANT",
  })
  /** 打开弹窗 */
  const open = async (type: string, id?: number) => {
    dialogVisible.value = true
    dialogTitle.value = t('action.' + type)
    formType.value = type
    resetForm()
    getPointList()
    // 修改时，设置数据
    if (id) {
      formLoading.value = true
      try {
        formData.value = await ArcDataApi.getArcSetting(id)
      } finally {
        formLoading.value = false
      }
    }
  }
  defineExpose({ open }) // 提供 open 方法，用于打开弹窗

  /** 提交表单 */
  const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
  const submitForm = async () => {
    // 校验表单
    if (!formRef) return
    const valid = await formRef.value.validate()
    if (!valid) return
    // 提交请求
    formLoading.value = true
    try {
      const data = formData.value as unknown as ArcDataApi.ArcSettingVO
      if (formType.value === 'create') {
        await ArcDataApi.createArcSetting(data)
        message.success(t('common.createSuccess'))
      } else {
        await ArcDataApi.updateArcSetting(data)
        message.success(t('common.updateSuccess'))
      }
      dialogVisible.value = false
      // 发送操作成功的事件
      emit('success')
    } finally {
      formLoading.value = false
    }
  }
  const getPointList = async () => {
    pointList.value = await DaPoint.getPointSimpleList(queryParams)
  }
  /** 重置表单 */
  const resetForm = () => {
    formData.value = {
      id: undefined,
      name: undefined,
      type: undefined,
      point: undefined,
      calculate: undefined,
      isEnable: 1
    }
    formRef.value?.resetFields()
  }
</script>

 src/views/data/arc/index.vue

对比新文件
@@ -0,0 +1,167 @@
<template>
    <!-- 搜索 -->
    <ContentWrap>
        <el-form
                class="-mb-15px"
                :model="queryParams"
                ref="queryFormRef"
                :inline="true"
                label-width="68px"
        >
            <el-form-item label="名称" prop="name">
                <el-input
                        v-model="queryParams.name"
                        placeholder="请输入名称"
                        clearable
                        @keyup.enter="handleQuery"
                        class="!w-240px"
                />
            </el-form-item>
            <el-form-item>
                <el-button @click="handleQuery">
                    <Icon icon="ep:search" class="mr-5px"/>
                    搜索
                </el-button>
                <el-button @click="resetQuery">
                    <Icon icon="ep:refresh" class="mr-5px"/>
                    重置
                </el-button>
                <el-button
                        type="primary"
                        plain
                        @click="openForm('create')"
                >
                    <Icon icon="ep:plus" class="mr-5px"/>
                    新增
                </el-button>
            </el-form-item>
        </el-form>
    </ContentWrap>

    <!-- 列表 -->
    <ContentWrap>
        <el-table v-loading="loading" :data="list">
            <el-table-column label="名称" align="center" prop="name"/>
            <el-table-column label="归档周期" align="center" prop="type"/>
            <el-table-column label="归档点位" align="center" prop="point"/>
            <el-table-column label="计算方法" align="center" prop="calculate"/>
            <el-table-column label="是否启用" align="center" prop="isEnable"/>
            <el-table-column label="操作" align="center" min-width="110" fixed="right">
                <template #default="scope">
                    <el-button
                            link
                            type="primary"
                            @click="openForm('update', scope.row.id)"
                    >
                        编辑
                    </el-button>
                    <el-button
                            link
                            type="primary"
                            @click="openArcData(scope.row.id)"
                    >
                        历史值
                    </el-button>
                    <el-button
                            link
                            type="danger"
                            @click="handleDelete(scope.row.id)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <Pagination
                :total="total"
                v-model:page="queryParams.pageNo"
                v-model:limit="queryParams.pageSize"
                @pagination="getList"
        />
    </ContentWrap>

    <!-- 表单弹窗：添加/修改 -->
    <ArcSettingForm ref="formRef" @success="getList"/>

    <!-- 历史值弹窗 -->
    <ArcData ref="dataRef"/>

</template>
<script lang="ts" setup>
    import * as ArcSetting from '@/api/data/arc/index'
    import ArcSettingForm from './ArcSettingForm.vue'
    import ArcData from './ArcData.vue'

    defineOptions({name: 'DataArc'})

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

    const loading = ref(true) // 列表的加载中
    const total = ref(0) // 列表的总页数
    const list = ref([]) // 列表的数据
    const queryParams = reactive({
        pageNo: 1,
        pageSize: 10,
        name: undefined,
        type: undefined
    })
    const queryFormRef = ref() // 搜索的表单
    const exportLoading = ref(false) // 导出的加载中

    /** 查询列表 */
    const getList = async () => {
        loading.value = true
        try {
            const page = await ArcSetting.getArcSettingPage(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)
    }

    /** 历史操作 */
    const dataRef = ref()
    const openArcData = (id?: string) => {
      dataRef.value.open(id)
    }

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

    /** 初始化 **/
    onMounted(async () => {
        await getList()
    })
</script>