Web/admin-sjzx
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改 在线监测告警 页面

Browse Source
This commit is contained in:
GGJ
2024-04-07 16:40:16 +08:00
parent 266da2405f
commit 81a1e38344
8 changed files with 273 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/pqs/supervise/electricalEnergy/components/NewlyAdd.vue
View File

@@ -7,7 +7,7 @@
</el-form-item>
<el-form-item label="问题来源" prop="problemSources">
<el-select v-model="addData.problemSources" clearable placeholder="请选择问题来源">
<el-select v-model="addData.problemSources" collapse-tags clearable placeholder="请选择问题来源">
<el-option
v-for="item in problemData"
:key="item.code"
@@ -29,12 +29,20 @@
</template>
</el-dialog>
<!-- 新增第二步(在线监测超标问题新增) -->
<el-dialog draggable title="在线监测超标问题新增" v-model="onlineAdd" width="1200px" :before-close="handleClose">
<el-dialog draggable title="在线监测超标问题新增" v-model="onlineAdd" width="1500px" :before-close="handleClose">
<el-divider content-position="left">第二步 选择问题测点</el-divider>
<el-form :inline="true" class="form">
<el-form-item label="告警时间">
<DatePicker ref="DateRef" />
</el-form-item>
<el-form-item label="稳态指标">
<el-select v-model="harmonicTypes" multiple placeholder="请选择稳态指标">
<el-option v-for="item in harmonicTypesList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="越线天数占比(%)">
<el-input-number v-model="rate" :min="0" :max="100" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-Search" @click="searchOnLine">查询</el-button>
@@ -307,7 +315,9 @@ const ruleForm = ref()
const DateRef = ref()
const operationAddRef = ref()
const xTableRef = ref()
const harmonicTypes = ref([]) //稳态指标id集合
const harmonicTypesList = dictData.getBasicData('Indicator_Type')
const rate = ref(60) //越线天数占比（一个月）
const addData = ref({
orgName: '',
problemSources: '',
@@ -414,6 +424,8 @@ const OnlineMonitoring = () => {
const searchOnLine = () => {
isLoading1.value = true
getAllAlarmDetailList({
harmonicTypes: harmonicTypes.value,
rate: rate.value * 0.01,
startTime: DateRef.value.timeValue[0],
endTime: DateRef.value.timeValue[1]
}).then(res => {

22
src/views/pqs/supervise/electricalEnergy/components/detail.vue
View File

@@ -1,7 +1,7 @@
<template>
<el-dialog draggable title="详情" v-model="dialogVisible" width="1400px" :before-close="handleClose">
<el-carousel trigger="click" height="500px" arrow="never" :autoplay="false">
<el-carousel-item>
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="指标" name="1">
<el-divider content-position="left" style="font-size: 18px; font-weight: bolder">
问题基本信息
</el-divider>
@@ -63,12 +63,9 @@
</el-checkbox-group>
</el-form-item>
</el-form>
</el-carousel-item>
<el-carousel-item>
<!-- 填报 -->
<Filling ref="FillingRef" />
</el-carousel-item>
</el-carousel>
</el-tab-pane>
<el-tab-pane label="流程" name="2"><Filling v-if="dialogVisible" :isDisabled='true' ref="FillingRef" /></el-tab-pane>
</el-tabs>
</el-dialog>
</template>
<script setup lang="ts">
@@ -80,6 +77,7 @@ import Filling from './filling.vue'
const dictData = useDictData()
const addData: any = ref({})
const FillingRef = ref()
const activeName = ref(`1`)
const dialogVisible: any = ref(false)
const problemData = dictData.getBasicData('Problem_Sources')
@@ -100,11 +98,7 @@ const handleClose = () => {
defineExpose({ open })
</script>
<style lang="scss" scoped>
:deep(.el-carousel__button) {
width: 10px;
height: 10px;
background-color: var(--el-color-primary);
border-radius: 50%;
opacity: 0.3;
:deep(.el-tabs__content) {
height: 100% !important;
}
</style>

64
src/views/pqs/supervise/electricalEnergy/components/filling.vue
View File

@@ -36,21 +36,49 @@
</el-steps>
<!-- 原因分析 0 -->
<process1 v-if="control == 0" :addData="addData" ref="process0Ref" @handleClose="handleClose" />
<process1
v-if="control == 0"
:addData="addData"
:List="List"
:disabled="disabled"
ref="process0Ref"
@handleClose="handleClose"
/>
<!-- 计划整改措施 1-->
<process2 v-if="control == 1" :addData="addData" ref="process1Ref" @handleClose="handleClose" />
<process2
v-if="control == 1"
:addData="addData"
:List="List"
:disabled="disabled"
ref="process1Ref"
@handleClose="handleClose"
/>
<!-- 实际采取措施 2 -->
<process3 v-if="control == 2" :addData="addData" ref="process2Ref" @handleClose="handleClose" />
<process3
v-if="control == 2"
:addData="addData"
:List="List"
:disabled="disabled"
ref="process2Ref"
@handleClose="handleClose"
/>
<!-- 成效分析 3 -->
<process4 v-if="control == 3" :addData="addData" ref="process3Ref" @handleClose="handleClose" />
<process4
v-if="control == 3"
:addData="addData"
:List="List"
:disabled="disabled"
ref="process3Ref"
@handleClose="handleClose"
/>
<div style="display: flex; justify-content: center; margin-top: 10px" v-show="active == control">
<div style="display: flex; justify-content: center; margin-top: 10px" v-show="!disabled">
<el-button type="primary" @click="Submit">提交审核</el-button>
<el-button @click="handleClose">取消</el-button>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ref, onMounted } from 'vue'
import { useDictData } from '@/stores/dictData'
import process1 from './process1.vue'
import process2 from './process2.vue'
@@ -60,6 +88,7 @@ import { getAbnormalDetail } from '@/api/process-boot/electricitymanagement'
const emit = defineEmits(['beforeClose'])
const dictData = useDictData()
const addData: any = ref({})
const List: any = ref({})
const active = ref(4)
const control = ref()
const stepTitle = ['原因分析', '计划整改措施', '实际采取措施', '成效分析']
@@ -67,12 +96,19 @@ const process0Ref = ref()
const process1Ref = ref()
const process2Ref = ref()
const process3Ref = ref()
const disabled = ref(false)
const prop = defineProps({
isDisabled: {
type: Boolean,
default: false
}
})
const problemData = dictData.getBasicData('Problem_Sources')
const open = (row: any) => {
addData.value = row
getAbnormalDetail(row.powerQualityProblemNo).then((res: any) => {
List.value = res.data
if (res.data.filePathYyfx == null) {
active.value = 0
} else if (res.data.filePathJhzg == null) {
@@ -91,17 +127,25 @@ const open = (row: any) => {
active.value = 2
}
}
control.value = active.value
control.value = active.value == 4 ? 3 : active.value
})
}
const step = (e: number) => {
if (active.value >= e) {
control.value = e
if (active.value == e && !prop.isDisabled) {
disabled.value = false
} else {
disabled.value = true
}
}
}
onMounted(() => {
if (prop.isDisabled) {
disabled.value = prop.isDisabled
}
})
// 提交
const Submit = () => {
if (control.value == 0) {

53
src/views/pqs/supervise/electricalEnergy/components/maintenance.vue
View File

@@ -42,13 +42,11 @@
</template>
<template #operation>
<el-button icon="el-icon-Plus" type="primary" @click="add">新增</el-button>
<el-button icon="el-icon-SuccessFilled" type="primary">归档</el-button>
<el-button icon="el-icon-PieChart" type="primary">历史审核记录</el-button>
</template>
</TableHeader>
<Table ref="tableRef" />
<!-- 新增 -->
<NewlyAdd v-if="showNewlyAdded" @handleClose="handleClose" @onSubmit="" />
<NewlyAdd v-if="showNewlyAdded" @handleClose="handleClose" @onSubmit="beforeClose" />
<!-- 填报 -->
<el-dialog draggable title="填报" v-model="dialogVisible" width="1400px" :before-close="beforeClose">
<Filling ref="FillingRef" @beforeClose="beforeClose" />
@@ -63,7 +61,7 @@ import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { deleteIssues } from '@/api/process-boot/electricitymanagement'
import { deleteIssues, archive } from '@/api/process-boot/electricitymanagement'
import { useDictData } from '@/stores/dictData'
import NewlyAdd from './NewlyAdd.vue'
import Filling from './filling.vue'
@@ -117,16 +115,16 @@ const tableStore: any = new TableStore({
},
{
title: '操作',
width: '150',
width: '180',
render: 'buttons',
buttons: [
{
name: 'edit',
title: '查看',
type: 'primary',
// disabled: row => {
// return !(row.reportProcess != 'Not_Reported' && row.reportProcess != 'Archived')
// },
disabled: row => {
return row.reportProcessStatus == 'Init'
},
icon: 'el-icon-Plus',
render: 'basicButton',
click: async row => {
@@ -139,7 +137,8 @@ const tableStore: any = new TableStore({
disabled: row => {
return (
row.reportProcessStatus == 'Auditt' ||
(row.reportProcess == 'Insights' && row.reportProcessStatus == 'Success')
(row.reportProcess == 'Insights' && row.reportProcessStatus == 'Success') ||
row.reportProcess == 'Archived'
)
},
type: 'primary',
@@ -152,6 +151,39 @@ const tableStore: any = new TableStore({
}, 10)
}
},
{
name: 'edit',
title: '归档',
disabled: row => {
return !(row.reportProcess == 'Insights' && row.reportProcessStatus == 'Success')
},
type: 'primary',
icon: 'el-icon-SuccessFilled',
render: 'basicButton',
popconfirm: {
confirmButtonText: '确认',
cancelButtonText: '取消',
confirmButtonType: 'danger',
title: '确定归档？'
},
click: row => {
archive(row.powerQualityProblemNo).then(() => {
ElMessage.success('归档成功！')
tableStore.index()
})
}
},
{
name: 'edit',
title: '审核记录',
type: 'primary',
disabled: row => {
return row.reportProcessStatus == 'Init'
},
icon: 'el-icon-PieChart',
render: 'basicButton',
click: async row => {}
},
{
name: 'del',
text: '删除',
@@ -164,6 +196,9 @@ const tableStore: any = new TableStore({
confirmButtonType: 'danger',
title: '确定删除？'
},
disabled: row => {
return row.reportProcess == 'Archived'
},
click: row => {
deleteIssues(row.powerQualityProblemNo).then(() => {
ElMessage.success('删除成功')

45
src/views/pqs/supervise/electricalEnergy/components/process1.vue
View File

@@ -1,6 +1,6 @@
<template>
<el-form :model="causeAnalysisData" :rules="rules" ref="form1Ref" label-width="auto">
<el-form-item label="电网侧原因:" prop="reportProcessContentYyfx">
<el-form-item label="电网侧原因:" prop="reportProcessContentYyfx" :disabled="prop.disabled">
<el-checkbox-group v-model="causeAnalysisData.reportProcessContentYyfx">
<el-checkbox v-for="(item, ind) in CauseList" :key="ind" :label="item.code">
{{ item.name }}
@@ -10,7 +10,7 @@
<el-divider></el-divider>
<el-form-item label="用户侧原因:" prop="userReportProcessContentYyfx">
<el-form-item label="用户侧原因:" prop="userReportProcessContentYyfx" :disabled="prop.disabled">
<el-checkbox-group v-model="causeAnalysisData.userReportProcessContentYyfx">
<el-checkbox v-for="(item, ind) in userCauseList" :key="ind" :label="item.code">
{{ item.name }}
@@ -20,7 +20,7 @@
<el-row v-if="prop.addData.problemSources == '用户投诉' || prop.addData.problemSources == '设备异常'">
<el-divider></el-divider>
<el-form-item label="电网侧受影响设备:" prop="powerGridAffectDev">
<el-form-item label="电网侧受影响设备:" prop="powerGridAffectDev" :disabled="prop.disabled">
<el-checkbox-group v-model="causeAnalysisData.powerGridAffectDev">
<el-checkbox v-for="(item, ind) in powerGridAffectDevList" :key="ind" :label="item.code">
{{ item.name }}
@@ -29,7 +29,7 @@
</el-form-item>
<el-divider></el-divider>
<el-form-item label="用户侧受影响设备:" prop="userAffectDev">
<el-form-item label="用户侧受影响设备:" prop="userAffectDev" :disabled="prop.disabled">
<el-checkbox-group v-model="causeAnalysisData.userAffectDev">
<el-checkbox v-for="(item, ind) in userAffectDevList" :key="ind" :label="item.code">
{{ item.name }}
@@ -40,7 +40,7 @@
<el-divider></el-divider>
<el-form-item label="事件描述:" prop="eventDescriptionYyfx">
<el-form-item label="事件描述:" prop="eventDescriptionYyfx" :disabled="prop.disabled">
<el-input
style="width: 400px"
:autosize="{ minRows: 2, maxRows: 4 }"
@@ -49,10 +49,12 @@
v-model="causeAnalysisData.eventDescriptionYyfx"
></el-input>
</el-form-item>
<el-form-item class="item" label="原因分析报告:" style="margin-top: 10px" prop="fileList">
<el-upload
v-model:file-list="causeAnalysisData.fileList"
ref="upload"
v-if="!prop.disabled"
action=""
:limit="1"
:on-exceed="handleExceed"
@@ -62,6 +64,10 @@
<el-button type="primary">上传文件</el-button>
</template>
</el-upload>
<el-button type="primary" link @click="download" v-else>
{{ prop.List.fileNameYyfx }}
</el-button>
</el-form-item>
</el-form>
</template>
@@ -70,11 +76,18 @@ import { useDictData } from '@/stores/dictData'
import { uploadFile, reasonAnalysis } from '@/api/process-boot/electricitymanagement'
import { UploadInstance, UploadProps, UploadRawFile, ElMessage, ElMessageBox } from 'element-plus'
import { genFileId } from 'element-plus'
import { ref, reactive } from 'vue'
import { ref, reactive, onMounted } from 'vue'
const prop = defineProps({
addData: {
type: Object,
default: () => {}
},
List: {
type: Object,
default: () => {}
},
disabled: {
type: Boolean
}
})
const emit = defineEmits(['handleClose'])
@@ -82,6 +95,7 @@ const emit = defineEmits(['handleClose'])
const dictData = useDictData()
const upload = ref()
const form1Ref = ref()
const causeAnalysisData: any = ref({
reportProcessContentYyfx: [],
userReportProcessContentYyfx: [],
@@ -117,10 +131,23 @@ const handleExceed: UploadProps['onExceed'] = files => {
file.uid = genFileId()
upload.value!.handleStart(file)
}
// 下载
const download = async () => {
// window.open(addForm.value.ifile)
let response = await fetch(prop.List.filePathYyfx)
let blob = await response.blob()
let a = document.createElement('a')
a.href = window.URL.createObjectURL(blob)
a.download = prop.List.fileNameYyfx
a.click()
a.remove()
}
onMounted(() => {
if (prop.List.filePathYyfx != null) {
causeAnalysisData.value = prop.List
}
})
const submit = () => {
// console.log('🚀 ~ form1Ref.value.validate ~ =prop.addData:', prop.addData)
form1Ref.value.validate(async (valid: any) => {
if (valid) {
let form = new FormData()

73
src/views/pqs/supervise/electricalEnergy/components/process2.vue
View File

@@ -1,6 +1,12 @@
<template>
<el-form :model="rectificationMeasuresData" :rules="rules" ref="form2Ref" label-width="auto">
<el-form-item label="电网侧整改治理措施:" prop="reportProcessContentJhzg">
<el-form
:model="rectificationMeasuresData"
:rules="rules"
ref="form2Ref"
label-width="auto"
>
<el-form-item label="电网侧整改治理措施:" prop="reportProcessContentJhzg" :disabled="prop.disabled">
<el-checkbox-group v-model="rectificationMeasuresData.reportProcessContentJhzg">
<el-checkbox v-for="item in JhzgList" :label="item.code">{{ item.name }}</el-checkbox>
</el-checkbox-group>
@@ -8,27 +14,34 @@
<el-divider></el-divider>
<el-form-item label="用户侧整改治理措施:" prop="userReportProcessContentJhzg">
<el-form-item label="用户侧整改治理措施:" prop="userReportProcessContentJhzg" :disabled="prop.disabled">
<el-checkbox-group v-model="rectificationMeasuresData.userReportProcessContentJhzg">
<el-checkbox v-for="item in JhzgList" :label="item.code">{{ item.name }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-divider></el-divider>
<el-form-item class="item" label="计划整改措施报告:" style="margin-top: 10px" prop="fileList">
<el-upload
v-model:file-list="rectificationMeasuresData.fileList"
ref="upload"
action=""
:limit="1"
:on-exceed="handleExceed"
:auto-upload="false"
>
<template #trigger>
<el-button type="primary">上传文件</el-button>
</template>
</el-upload>
</el-form-item>
<el-form-item class="item" label="计划整改措施报告:" style="margin-top: 10px" prop="fileList" >
<el-upload
v-model:file-list="rectificationMeasuresData.fileList"
ref="upload"
action=""
v-if="!prop.disabled"
:limit="1"
:on-exceed="handleExceed"
:auto-upload="false"
>
<template #trigger>
<el-button type="primary">上传文件</el-button>
</template>
</el-upload>
<el-button type="primary" link @click="download" v-else>
{{ prop.List.fileNameJhzg }}
</el-button>
</el-form-item>
</el-form>
</template>
<script setup lang="ts">
@@ -36,11 +49,18 @@ import { useDictData } from '@/stores/dictData'
import { uploadFile, correctiveAction } from '@/api/process-boot/electricitymanagement'
import { UploadInstance, UploadProps, UploadRawFile, ElMessage, ElMessageBox } from 'element-plus'
import { genFileId } from 'element-plus'
import { ref, reactive } from 'vue'
import { ref, onMounted } from 'vue'
const prop = defineProps({
addData: {
type: Object,
default: () => {}
},
List: {
type: Object,
default: () => {}
},
disabled: {
type: Boolean
}
})
const emit = defineEmits(['handleClose'])
@@ -70,6 +90,23 @@ const handleExceed: UploadProps['onExceed'] = files => {
file.uid = genFileId()
upload.value!.handleStart(file)
}
// 下载
const download = async () => {
// window.open(addForm.value.ifile)
let response = await fetch(prop.List.filePathJhzg)
let blob = await response.blob()
let a = document.createElement('a')
a.href = window.URL.createObjectURL(blob)
a.download = prop.List.fileNameJhzg
a.click()
a.remove()
}
onMounted(() => {
if (prop.List.filePathJhzg != null) {
rectificationMeasuresData.value = prop.List
}
})
const submit = () => {
form2Ref.value.validate(async (valid: any) => {

34
src/views/pqs/supervise/electricalEnergy/components/process3.vue
View File

@@ -1,6 +1,6 @@
<template>
<el-form :model="rectificationMeasuresData" :rules="rules" ref="form2Ref" label-width="auto">
<el-form-item label="电网侧实际采取措施:" prop="reportProcessContentSjcq">
<el-form-item label="电网侧实际采取措施:" prop="reportProcessContentSjcq" :disabled="prop.disabled">
<el-checkbox-group v-model="rectificationMeasuresData.reportProcessContentSjcq">
<el-checkbox v-for="(item, ind) in SjcqList" :key="ind" :label="item.code">{{ item.name }}</el-checkbox>
</el-checkbox-group>
@@ -8,18 +8,20 @@
<el-divider></el-divider>
<el-form-item label="用户侧实际采取措施:" prop="userReportProcessContentSjcq">
<el-form-item label="用户侧实际采取措施:" prop="userReportProcessContentSjcq" :disabled="prop.disabled">
<el-checkbox-group v-model="rectificationMeasuresData.userReportProcessContentSjcq">
<el-checkbox v-for="(item, ind) in SjcqList" :key="ind" :label="item.code">{{ item.name }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-divider></el-divider>
<el-form-item class="item" label="实际采取措施报告:" style="margin-top: 10px" prop="fileList">
<el-upload
v-model:file-list="rectificationMeasuresData.fileList"
ref="upload"
action=""
v-if="!prop.disabled"
:limit="1"
:on-exceed="handleExceed"
:auto-upload="false"
@@ -28,6 +30,9 @@
<el-button type="primary">上传文件</el-button>
</template>
</el-upload>
<el-button type="primary" link @click="download" v-else>
{{ prop.List.fileNameSjcq }}
</el-button>
</el-form-item>
</el-form>
</template>
@@ -36,11 +41,18 @@ import { useDictData } from '@/stores/dictData'
import { uploadFile, takeAction } from '@/api/process-boot/electricitymanagement'
import { UploadInstance, UploadProps, UploadRawFile, ElMessage, ElMessageBox } from 'element-plus'
import { genFileId } from 'element-plus'
import { ref, reactive } from 'vue'
import { ref, onMounted } from 'vue'
const prop = defineProps({
addData: {
type: Object,
default: () => {}
},
List: {
type: Object,
default: () => {}
},
disabled: {
type: Boolean
}
})
const emit = defineEmits(['handleClose'])
@@ -70,6 +82,22 @@ const handleExceed: UploadProps['onExceed'] = files => {
file.uid = genFileId()
upload.value!.handleStart(file)
}
// 下载
const download = async () => {
// window.open(addForm.value.ifile)
let response = await fetch(prop.List.filePathSjcq)
let blob = await response.blob()
let a = document.createElement('a')
a.href = window.URL.createObjectURL(blob)
a.download = prop.List.fileNameSjcq
a.click()
a.remove()
}
onMounted(() => {
if (prop.List.filePathSjcq != null) {
rectificationMeasuresData.value = prop.List
}
})
const submit = () => {
form2Ref.value.validate(async (valid: any) => {

32
src/views/pqs/supervise/electricalEnergy/components/process4.vue
View File

@@ -1,6 +1,6 @@
<template>
<el-form :model="effectivenessAnalysisData" :rules="rules" ref="form2Ref" label-width="auto">
<el-form-item label="成效分析概述:" style="margin-top: 10px" prop="descriptionZlxg">
<el-form-item label="成效分析概述:" style="margin-top: 10px" prop="descriptionZlxg" :disabled="prop.disabled">
<el-input
type="textarea"
style="width: 400px"
@@ -11,12 +11,14 @@
</el-form-item>
<el-divider></el-divider>
<el-form-item class="item" label="实际采取措施报告:" style="margin-top: 10px" prop="fileList">
<el-upload
v-model:file-list="effectivenessAnalysisData.fileList"
ref="upload"
action=""
:limit="1"
v-if="!prop.disabled"
:on-exceed="handleExceed"
:auto-upload="false"
>
@@ -24,6 +26,9 @@
<el-button type="primary">上传文件</el-button>
</template>
</el-upload>
<el-button type="primary" link @click="download" v-else>
{{ prop.List.fileNameZlxg }}
</el-button>
</el-form-item>
</el-form>
</template>
@@ -32,11 +37,18 @@ import { useDictData } from '@/stores/dictData'
import { uploadFile, effectAnalysis } from '@/api/process-boot/electricitymanagement'
import { UploadInstance, UploadProps, UploadRawFile, ElMessage, ElMessageBox } from 'element-plus'
import { genFileId } from 'element-plus'
import { ref, reactive } from 'vue'
import { ref, onMounted } from 'vue'
const prop = defineProps({
addData: {
type: Object,
default: () => {}
},
List: {
type: Object,
default: () => {}
},
disabled: {
type: Boolean
}
})
const emit = defineEmits(['handleClose'])
@@ -61,6 +73,22 @@ const handleExceed: UploadProps['onExceed'] = files => {
file.uid = genFileId()
upload.value!.handleStart(file)
}
// 下载
const download = async () => {
// window.open(addForm.value.ifile)
let response = await fetch(prop.List.filePathZlxg)
let blob = await response.blob()
let a = document.createElement('a')
a.href = window.URL.createObjectURL(blob)
a.download = prop.List.fileNameZlxg
a.click()
a.remove()
}
onMounted(() => {
if (prop.List.filePathZlxg != null) {
effectivenessAnalysisData.value = prop.List
}
})
const submit = () => {
form2Ref.value.validate(async (valid: any) => {