|
|
|
|
@ -1,82 +1,108 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="interpret-box">
|
|
|
|
|
<a-form
|
|
|
|
|
ref="formRef"
|
|
|
|
|
:rules="data.rules"
|
|
|
|
|
:model="ruleForm"
|
|
|
|
|
:label-col="labelCol"
|
|
|
|
|
:wrapper-col="wrapperCol"
|
|
|
|
|
>
|
|
|
|
|
<a-form-item label="案件编号">
|
|
|
|
|
<a-input v-model:value="ruleForm.case_no" disabled />
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item label="案件详情">
|
|
|
|
|
<a-input v-model:value="ruleForm.case_description" placeholder="请输入" />
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item label="违规类型" name="typeid">
|
|
|
|
|
<a-select
|
|
|
|
|
v-model:value="ruleForm.typeid"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
:options="data.violationOptions"
|
|
|
|
|
:field-names="{ label: 'itemName', value: 'itemValue' }"
|
|
|
|
|
>
|
|
|
|
|
</a-select>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item label="图斑面积">
|
|
|
|
|
<a-input v-model:value="ruleForm.area" placeholder="请输入" />
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item label="县/区">
|
|
|
|
|
<a-select
|
|
|
|
|
v-model:value="ruleForm.countyid"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
:options="data.cityDatas"
|
|
|
|
|
:field-names="{ label: 'itemName', value: 'itemValue' }"
|
|
|
|
|
>
|
|
|
|
|
</a-select>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item label="乡镇/街道">
|
|
|
|
|
<a-select
|
|
|
|
|
v-model:value="ruleForm.streetid"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
:options="data.streetDatas"
|
|
|
|
|
:field-names="{ label: 'itemName', value: 'itemValue' }"
|
|
|
|
|
>
|
|
|
|
|
</a-select>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item label="社区/村">
|
|
|
|
|
<a-select
|
|
|
|
|
v-model:value="ruleForm.communityname"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
:options="data.communtDatas"
|
|
|
|
|
:field-names="{ label: 'itemName', value: 'itemValue' }"
|
|
|
|
|
>
|
|
|
|
|
</a-select>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item label="详细地址">
|
|
|
|
|
<a-input v-model:value="ruleForm.address" placeholder="请输入" />
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item label="备注">
|
|
|
|
|
<a-textarea
|
|
|
|
|
v-model:value="ruleForm.description"
|
|
|
|
|
placeholder="备注"
|
|
|
|
|
:auto-size="{ minRows: 1, maxRows: 3 }"
|
|
|
|
|
/>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item label="现场照片">
|
|
|
|
|
<ImageUpload :maxSize="20" v-model:file-list="fileList" :maxNumber="10" @change="handleChange" :api="uploadApi" />
|
|
|
|
|
</a-form-item>
|
|
|
|
|
</a-form>
|
|
|
|
|
<div class="interpret-form">
|
|
|
|
|
<a-form
|
|
|
|
|
ref="formRef"
|
|
|
|
|
:rules="data.rules"
|
|
|
|
|
:model="ruleForm"
|
|
|
|
|
:label-col="labelCol"
|
|
|
|
|
:wrapper-col="wrapperCol"
|
|
|
|
|
>
|
|
|
|
|
<a-form-item label="案件编号">
|
|
|
|
|
<a-input v-model:value="ruleForm.case_no" disabled />
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item label="案件详情">
|
|
|
|
|
<a-input v-model:value="ruleForm.case_description" placeholder="请输入" />
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item label="违规类型" name="typeid">
|
|
|
|
|
<a-select
|
|
|
|
|
v-model:value="ruleForm.typeid"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
:options="data.violationOptions"
|
|
|
|
|
:field-names="{ label: 'itemName', value: 'itemValue' }"
|
|
|
|
|
>
|
|
|
|
|
</a-select>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item label="图斑面积">
|
|
|
|
|
<a-input v-model:value="ruleForm.area" placeholder="请输入" />
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item label="县/区">
|
|
|
|
|
<a-select
|
|
|
|
|
v-model:value="ruleForm.countyid"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
:options="data.cityDatas"
|
|
|
|
|
:field-names="{ label: 'itemName', value: 'itemValue' }"
|
|
|
|
|
>
|
|
|
|
|
</a-select>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item label="乡镇/街道">
|
|
|
|
|
<a-select
|
|
|
|
|
v-model:value="ruleForm.streetid"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
:options="data.streetDatas"
|
|
|
|
|
:field-names="{ label: 'itemName', value: 'itemValue' }"
|
|
|
|
|
>
|
|
|
|
|
</a-select>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item label="社区/村">
|
|
|
|
|
<a-select
|
|
|
|
|
v-model:value="ruleForm.communityname"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
:options="data.communtDatas"
|
|
|
|
|
:field-names="{ label: 'itemName', value: 'itemValue' }"
|
|
|
|
|
>
|
|
|
|
|
</a-select>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item label="详细地址">
|
|
|
|
|
<a-input v-model:value="ruleForm.address" placeholder="请输入" />
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item label="备注">
|
|
|
|
|
<a-textarea
|
|
|
|
|
v-model:value="ruleForm.description"
|
|
|
|
|
placeholder="备注"
|
|
|
|
|
:auto-size="{ minRows: 1, maxRows: 3 }"
|
|
|
|
|
/>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item label="现场照片">
|
|
|
|
|
<ImagePreview :imageList="abbreviationPicListData" />
|
|
|
|
|
<ImageUpload
|
|
|
|
|
file-list="fileList"
|
|
|
|
|
:maxSize="20"
|
|
|
|
|
:maxNumber="10"
|
|
|
|
|
:api="imgApi"
|
|
|
|
|
:multiple="true"
|
|
|
|
|
@delete="handleRemove"
|
|
|
|
|
/>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
</a-form>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="btn-box">
|
|
|
|
|
<a-button color="info" class="ml-2" @click="resetForm">取消</a-button>
|
|
|
|
|
<a-button color="info" class="ml-2" type="primary" @click="saveForm">保存</a-button>
|
|
|
|
|
<a-button color="success" class="ml-2" type="primary" @click="submitForm">提交</a-button>
|
|
|
|
|
<a-button color="info" class="ml-2" type="primary" danger @click="eventClose">关闭</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import { ImageUpload } from '@/components/Upload';
|
|
|
|
|
import { ref, reactive , watch} from 'vue';
|
|
|
|
|
import {uploadApi} from '@/api/sys/upload'
|
|
|
|
|
import { ref, reactive, watch, onMounted } from 'vue';
|
|
|
|
|
import { ImagePreview } from '@/components/Preview';
|
|
|
|
|
import { getCaseInfo } from '@/api/monitor/index';
|
|
|
|
|
import { uploadApi } from '@/api/sys/upload';
|
|
|
|
|
// 图片服务器地址
|
|
|
|
|
import { useGlobSetting } from '@/hooks/setting';
|
|
|
|
|
const { uploadUrl } = useGlobSetting();
|
|
|
|
|
const emit = defineEmits(['close']);
|
|
|
|
|
const formRef = ref();
|
|
|
|
|
const labelCol = { span: 7 };
|
|
|
|
|
const wrapperCol = { span: 17 };
|
|
|
|
|
const ruleForm = ref({});
|
|
|
|
|
const fileList = ref([]);
|
|
|
|
|
const filSuccessList = ref([]);
|
|
|
|
|
const formData = ref({});
|
|
|
|
|
const picListData = ref([]);
|
|
|
|
|
const abbreviationPicListData = ref(['https://picsum.photos/id/66/346/216']);
|
|
|
|
|
const data = reactive({
|
|
|
|
|
violationOptions: [],
|
|
|
|
|
communtDatas: [],
|
|
|
|
|
@ -86,7 +112,11 @@
|
|
|
|
|
typeid: [{ required: true, message: '请选择违规类型' }],
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
watch(fileList, (newValue) => {
|
|
|
|
|
// 监听 fileList 的变化
|
|
|
|
|
// newValue 的值就是 formUser 的真实值 === formUser.value
|
|
|
|
|
console.log(newValue);
|
|
|
|
|
});
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
interpretData: {
|
|
|
|
|
type: Object,
|
|
|
|
|
@ -95,32 +125,45 @@
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
console.log(props.interpretData);
|
|
|
|
|
ruleForm.value = props.interpretData;
|
|
|
|
|
watch(
|
|
|
|
|
() => props.interpretData,
|
|
|
|
|
(newVal, oldVal) => {
|
|
|
|
|
ruleForm.value = newVal;
|
|
|
|
|
getFormData();
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const handleChange = (info: UploadChangeParam) => {
|
|
|
|
|
if (info.file.status === 'uploading') {
|
|
|
|
|
loading.value = true;
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (info.file.status === 'done') {
|
|
|
|
|
// Get this url from response in real world.
|
|
|
|
|
getBase64(info.file.originFileObj, (base64Url: string) => {
|
|
|
|
|
imageUrl.value = base64Url;
|
|
|
|
|
loading.value = false;
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
getFormData();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 获取现场照片
|
|
|
|
|
async function getFormData() {
|
|
|
|
|
picListData.value = [];
|
|
|
|
|
const data = await getCaseInfo({ id: ruleForm.value.id });
|
|
|
|
|
formData.value = data;
|
|
|
|
|
data.pics.forEach((item) => {
|
|
|
|
|
let src = item.path;
|
|
|
|
|
item.path = uploadUrl + '/' + item.path;
|
|
|
|
|
item.thumbnail = uploadUrl + '/S_' + src;
|
|
|
|
|
picListData.value.push(item);
|
|
|
|
|
// 缩略图
|
|
|
|
|
abbreviationPicListData.value.push(item.thumbnail);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
if (info.file.status === 'error') {
|
|
|
|
|
loading.value = false;
|
|
|
|
|
message.error('upload error');
|
|
|
|
|
async function imgApi(file, progress) {
|
|
|
|
|
const data = await uploadApi(file, progress);
|
|
|
|
|
if (data.result.length > 0) {
|
|
|
|
|
filList.value.push(file);
|
|
|
|
|
filSuccessList.value.push(data.data.result[0]);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function handleRemove(file) {
|
|
|
|
|
console.log(file);
|
|
|
|
|
var currentIndex = (fileList.value || []).findIndex((element) => element.uid === file.uid);
|
|
|
|
|
fileList.value.splice(currentIndex, 1);
|
|
|
|
|
filSuccessList.value.splice(currentIndex, 1);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
// 获取违规类型
|
|
|
|
|
async function getNoBuildStatus() {
|
|
|
|
|
getMethodCommon('/Categorys/LoadList', { typeid: 'DRONE_CASE_TYPE' }).then((res) => {
|
|
|
|
|
@ -144,6 +187,7 @@
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
// 表单验证
|
|
|
|
|
async function validateForm() {
|
|
|
|
|
let res = await formRef.value
|
|
|
|
|
.validate()
|
|
|
|
|
@ -155,10 +199,44 @@
|
|
|
|
|
});
|
|
|
|
|
return res;
|
|
|
|
|
}
|
|
|
|
|
// 取消
|
|
|
|
|
function resetForm() {
|
|
|
|
|
emit('close');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 保存
|
|
|
|
|
async function saveForm() {
|
|
|
|
|
this.formData.info = this.ruleForm;
|
|
|
|
|
let arr = this.picListData;
|
|
|
|
|
// console.log("arr",arr);
|
|
|
|
|
this.formData.pic_list = [];
|
|
|
|
|
for (let i = 0; i < arr.length; i++) {
|
|
|
|
|
// this.formData.pic_list[i]=this.picListData[i].split("6001/")[1];
|
|
|
|
|
this.formData.pic_list[i] = this.handleImagePath(this.picListData[i].path);
|
|
|
|
|
}
|
|
|
|
|
postMethodCommon('/DroneCaseinfo/AddDroneCaseInfo', this.formData).then((res) => {
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
this.$notify({
|
|
|
|
|
title: '成功',
|
|
|
|
|
message: '保存成功',
|
|
|
|
|
type: 'success',
|
|
|
|
|
duration: 2000,
|
|
|
|
|
});
|
|
|
|
|
this.close();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.interpret-box {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 74vh;
|
|
|
|
|
position: relative;
|
|
|
|
|
.interpret-form {
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
height: 100%;
|
|
|
|
|
padding-bottom: 20px;
|
|
|
|
|
}
|
|
|
|
|
.ant-form {
|
|
|
|
|
padding: 20px;
|
|
|
|
|
display: flex;
|
|
|
|
|
@ -173,5 +251,19 @@
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
::v-deep .ant-image-img{
|
|
|
|
|
width: 50%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.btn-box {
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 10px 10%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0px;
|
|
|
|
|
left: 0;
|
|
|
|
|
background-color: @component-background;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
