<template>
|
<div class="system-add-user-container">
|
<el-dialog :title="title" v-model="isShowDialog" width="50%">
|
<el-form :model="form" size="default" ref="formRef" :rules="rules" label-width="120px">
|
<el-row :gutter="35">
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="序号" prop="serialNumber">
|
<el-input v-model.trim="form.serialNumber" placeholder="序号" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="卡号" prop="cardNo">
|
<el-input v-model.trim="form.cardNo" placeholder="卡号" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="报警人员名称" prop="realName">
|
<el-input v-model.trim="form.realName" placeholder="报警人员名称" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="报警状态" prop="alarmStatus">
|
<el-radio-group v-model="form.alarmStatus">
|
<el-radio label="1">报警</el-radio>
|
<el-radio label="2">已处理</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="报警时间" prop="alarmTime">
|
<el-date-picker v-model="form.alarmTime" value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择报警时间" style="width: 100%" />
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="报警信息" prop="alarmInfo">
|
<el-input v-model.trim="form.alarmInfo" :autosize="{ minRows: 1 }" type="textarea" placeholder="报警信息" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="报警类型" prop="alarmType">
|
<el-select v-model="form.alarmType" placeholder="请选择报警类型">
|
<el-option v-for="(item,index) in alarmTypeList" :key="index" :label="item.name" :value="item.value"/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="报警位置" prop="alarmLocation">
|
<el-input v-model.trim="form.alarmLocation" :autosize="{ minRows: 1 }" type="textarea" placeholder="报警地点所在区域" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="">
|
<el-button type="primary" v-throttle @click="showMapLocation" size="default">获取经纬度</el-button>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="经度">
|
<el-input v-model.trim="form.longitude" placeholder="经度(支持手动输入)" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="纬度">
|
<el-input v-model.trim="form.latitude" placeholder="纬度(支持手动输入)" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="楼层号" prop="floorNo">
|
<el-input v-model.trim="form.floorNo" placeholder="楼层号" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-if="form.alarmStatus == '2'">
|
<el-form-item label="销警时间" prop="handleTime">
|
<el-date-picker v-model="form.handleTime" value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择销警时间" style="width: 100%" />
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-if="form.alarmStatus == '1'">
|
<el-form-item label="销警时间">
|
<el-date-picker v-model="form.handleTime" value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择销警时间" style="width: 100%" />
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-if="form.alarmStatus == '2'">
|
<el-form-item label="处理信息" prop="handleInfo">
|
<el-input v-model.trim="form.handleInfo" :autosize="{ minRows: 1 }" type="textarea" placeholder="处理信息" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-if="form.alarmStatus == '1'">
|
<el-form-item label="处理信息">
|
<el-input v-model.trim="form.handleInfo" :autosize="{ minRows: 1 }" type="textarea" placeholder="处理信息" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="跳转地址">
|
<el-input v-model.trim="form.thirdAddress" :autosize="{ minRows: 1 }" type="textarea" placeholder="跳转地址" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="isShowDialog = !isShowDialog" size="default">取 消</el-button>
|
<el-button type="primary" v-throttle @click="onSubmit" size="default">确 定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
<mapLocation ref="mapLocation" @giveLatLng="achieveLatLng"></mapLocation>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { reactive, toRefs, onMounted, defineComponent, ref } from 'vue';
|
import { ElMessageBox, ElMessage } from 'element-plus';
|
import axios from "axios";
|
import {judgeReportApi} from "/@/api/dataUpload/saftyBaseInfo/judgeReport";
|
import mapLocation from "./mapLocation.vue"
|
|
// 定义接口来定义对象的类型
|
interface DataState {
|
title: string
|
isShowDialog: boolean
|
form: {
|
uuid: string
|
serialNumber: string
|
cardNo: string
|
realName: string
|
alarmStatus: string
|
alarmTime: string
|
alarmInfo: string
|
alarmType: string
|
alarmLocation: string
|
longitude: string
|
latitude: string
|
floorNo: string
|
handleTime: string
|
handleInfo: string
|
thirdAddress: string
|
}
|
rules:{}
|
alarmTypeList: Array<alarmType>
|
}
|
|
interface alarmType {
|
value: string
|
name: string
|
}
|
|
export default defineComponent({
|
name: 'reportDialog',
|
components: {mapLocation },
|
setup(props, context) {
|
const formRef = ref()
|
const mapLocation = ref()
|
const state = reactive<DataState>({
|
title: '',
|
isShowDialog: false,
|
form: {
|
uuid: '',
|
serialNumber: '',
|
cardNo: '',
|
realName: '',
|
alarmStatus: '',
|
alarmTime: '',
|
alarmInfo: '',
|
alarmType: '',
|
alarmLocation: '',
|
longitude: '',
|
latitude: '',
|
floorNo: '',
|
handleTime: '',
|
handleInfo: '',
|
thirdAddress: 'http://117.190.40.54:8081/location_system_5.4.9/login/login.html?company=GUOTAI&version=5.4.9'
|
},
|
rules:{
|
serialNumber: [{ required: true, message: '请填写序号', trigger: 'blur' }],
|
cardNo: [{ required: true, message: '请填写卡号', trigger: 'blur' }],
|
realName: [{ required: true, message: '请填写报警人员名称', trigger: 'blur' }],
|
alarmStatus: [{ required: true, message: '请选择报警状态', trigger: 'blur' }],
|
alarmTime: [{ required: true, message: '请选择报警时间', trigger: 'blur' }],
|
alarmInfo: [{ required: true, message: '请填写报警信息', trigger: 'blur' }],
|
alarmType: [{ required: true, message: '请选择报警类型', trigger: 'blur' }],
|
alarmLocation: [{ required: true, message: '请填写报警位置', trigger: 'blur' }],
|
floorNo: [{ required: true, message: '请填写楼层号', trigger: 'blur' }],
|
handleTime: [{ required: true, message: '请选择销警时间', trigger: 'blur' }],
|
handleInfo: [{ required: true, message: '请填写处理信息', trigger: 'blur' }]
|
},
|
alarmTypeList: [
|
{value: '01', name: '一键求救报警'},
|
{value: '02', name: '滞留预警'},
|
{value: '03', name: '越界报警'},
|
{value: '04', name: '超员预警'},
|
{value: '05', name: '缺员预警'},
|
{value: '06', name: '静止预警'},
|
{value: '07', name: '作业人员离开报警'},
|
{value: '08', name: '非作业人员闯入报警'}
|
]
|
})
|
|
// 页面加载时
|
onMounted(() => {
|
|
})
|
// 打开弹窗
|
const open = (type: string, data: object) => {
|
state.isShowDialog = true;
|
if (type === 'add') {
|
state.title = '新增上报';
|
state.form = {
|
uuid: '',
|
serialNumber: '',
|
cardNo: '',
|
realName: '',
|
alarmStatus: '',
|
alarmTime: '',
|
alarmInfo: '',
|
alarmType: '',
|
alarmLocation: '',
|
longitude: '',
|
latitude: '',
|
floorNo: '',
|
handleTime: '',
|
handleInfo: '',
|
thirdAddress: 'http://117.190.40.54:8081/location_system_5.4.9/login/login.html?company=GUOTAI&version=5.4.9'
|
}
|
}else{
|
state.title = '重新上报'
|
Object.keys(state.form).forEach(key => {
|
if (Object.prototype.hasOwnProperty.call(data,key)) {
|
state.form[key] = JSON.parse(JSON.stringify(data))[key];
|
}
|
})
|
// state.form = {
|
// uuid: data.uuid,
|
// serialNumber: '',
|
// cardNo: '',
|
// realName: '',
|
// alarmStatus: '',
|
// alarmTime: '',
|
// alarmInfo: '',
|
// alarmType: '',
|
// alarmLocation: '',
|
// longitude: '',
|
// latitude: '',
|
// floorNo: '',
|
// handleTime: '',
|
// handleInfo: '',
|
// thirdAddress: 'http://117.190.40.54:8081/location_system_5.4.9/login/login.html?company=GUOTAI&version=5.4.9'
|
// }
|
}
|
};
|
|
// 新增修改
|
const onSubmit = async () => {
|
formRef.value.validate(async (valid:Boolean) => {
|
if(valid){
|
const res = await judgeReportApi().addPosition([state.form])
|
if(res.data.code == '200'){
|
ElMessage({
|
type:'success',
|
message:'数据上报成功'
|
})
|
state.isShowDialog = false
|
}else{
|
ElMessage({
|
type:'warning',
|
message:res.data.msg
|
})
|
}
|
context.emit('refresh');
|
}else{
|
ElMessage({
|
type:'warning',
|
message:'请完善基本信息'
|
})
|
}
|
})
|
}
|
const showMapLocation=()=>{
|
mapLocation.value.openMapLocation(state.form.longitude,state.form.latitude)
|
}
|
|
const achieveLatLng=(lng: string,lat: string)=>{
|
state.form.longitude = lng
|
state.form.latitude = lat
|
}
|
|
return {
|
formRef,
|
mapLocation,
|
open,
|
onSubmit,
|
showMapLocation,
|
achieveLatLng,
|
...toRefs(state)
|
};
|
}
|
});
|
</script>
|
