alert-front/src/views/run/calc/index.vue

<script lang="ts" setup>
import { Badge, Button, Divider, Switch } from 'ant-design-vue'
import { onMounted, ref } from 'vue'
import moment from 'moment'
import HistoryModal from '../../exa/config/HistoryModal.vue'
import { calcFormSchemas, columns, searchFormSchema } from './calc.data'

import { BasicTable, TableAction, useTable } from '@/components/Table'
import { BasicForm, useForm } from '@/components/Form'

import { getInstantCount, getInstantPage, updateInstant } from '@/api/alert/run/instant'
import { getExaNow } from '@/api/alert/exa'
import { useI18n } from '@/hooks/web/useI18n'
import { router } from '@/router'
import { useMessage } from '@/hooks/web/useMessage'
import { IconEnum } from '@/enums/appEnum'
import { useModal } from '@/components/Modal'

defineOptions({ name: 'InstantCalc' })
const { createMessage } = useMessage()
const { t } = useI18n()

const [registerHistoryModal, { openModal: openHistoryModal }] = useModal()
const [registerCreateModal, { openModal: openCreateModal }] = useModal()
const [registerUpdateModal, { openModal: openUpdateModal }] = useModal()

const [registerTable, { getForm, reload, getDataSource, updateTableDataRecord }] = useTable({
  title: '实例列表',
  api: getInstantPage,
  rowKey: 'id',
  immediate: true,
  columns,
  formConfig: {
    labelWidth: 70,
    schemas: searchFormSchema,
    showResetButton: false,
    actionColOptions: {
      span: 2,
    },

  },
  useSearchForm: true,
  showTableSetting: true,
  showIndexColumn: false,
  actionColumn: {
    width: 100,
    title: t('common.action'),
    dataIndex: 'action',
    fixed: 'right',
  },
})

const isShow = ref<boolean>(false)

function handleCreate() {
  openCreateModal(true, { isUpdate: false })
  isShow.value = true
}

function handleEdit(record: Recordable) {
  openUpdateModal(true, { record, isUpdate: true })
}
async function handleDelete(record: Recordable) {
  await deleteRole(record.id)
  createMessage.success(t('common.delSuccessText'))
  reload()
}

const itemName = ref<string>()
const legendName = ref<string[]>()
function handleHistory(record: Recordable) {
  itemName.value = (JSON.parse(record.instantInfo)).model_state
  legendName.value = []
  legendName.value.push(`${record.mpName}-${itemName.value}`)
  openHistoryModal(true, { record })
}

function handleWarnConfig(record: Recordable) {
  router.push(`/run/warnConfig?id=${record.id}`)
}

/**
 * BasicForm绑定注册;
 */
const [registerForm] = useForm({
  // 注册表单列
  schemas: calcFormSchemas,
  // 是否显示展开收起按钮，默认false
  // showAdvancedButton: true,
  // // // 超过指定行数折叠，默认3行
  // autoAdvancedLine: 1,
  // // // 折叠时默认显示行数，默认1行
  // alwaysShowLines: 1,
  layout: 'horizontal',
  model: { time: [moment().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')] },
  fieldMapToTime: [
    // data为时间组件在表单内的字段，startTime，endTime为转化后的开始时间于结束时间
    ['time', ['startTime', 'endTime'], 'YYYY-MM-DD HH:mm:ss'],
  ],
  actionColOptions: { span: 2 },
  showSubmitButton: false,
  showResetButton: false,
})

/**
 * 点击提交按钮的value值----改为导出按钮
 * @param values
 */
function handleSubmit(values: any) {
  console.log('提交按钮数据::::', values)
}
// 回算
function handleCalc(values: any) {
  console.log('提交按钮数据::::', values)
}
</script>

<template>
  <div>
    <BasicTable @register="registerTable">
      <template #form-formFooter>
        <!-- <a-button v-auth="['run:instant:create']" type="primary" :pre-icon="IconEnum.ADD" @click="handleCreate">
          {{ t('action.create') }}
        </a-button> -->
        <Divider orientation="left">
          回算
        </Divider>
        <!-- 自定义表单 -->
        <BasicForm @register="registerForm">
          <template #advanceBefore>
            <a-button v-auth="['run:instant:create']" type="primary" :pre-icon="IconEnum.ADD" @click="handleCreate">
              {{ t('action.create') }}
            </a-button>
          </template>
        </BasicForm>
      </template>

      <!-- 统计量点击跳转历史曲线 -->
      <template #history="{ record }">
        <a @click="handleHistory(record)">
          {{ record.pointSte }}
        </a>
        <!-- <SlidersOutlined class="click-status" /> -->
      </template>

      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              { icon: IconEnum.BACK_CALC, label: t('action.backCalc'), onClick: handleWarnConfig.bind(null, record) },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <HistoryModal :item-name="itemName" :legend-name="legendName" @register="registerHistoryModal" />
    <CreateModal :item-name="itemName" :legend-name="legendName" @register="registerCreateModal" @success="reload" />
    <UpdateModal @register="registerUpdateModal" @success="reload" />
  </div>
</template>

<style lang="less" scoped>
:deep(.instant) {
  font-weight: bold;
  color: #0B55A4
}

:deep(.alarm .ant-badge-status-dot) {
  animation: flash 1s linear infinite;
}

@keyframes flash {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.runningStatus {
  cursor: pointer;
}
</style>