| | |
| | | <div class="input-header__tip">填写事件基础信息</div> |
| | | </div> |
| | | <div class="input-form"> |
| | | <el-form ref="user" label-width="160px" autoComplete="on" :model="ill" :rules="createillRules" |
| | | label-position="right"> |
| | | <el-form |
| | | ref="user" |
| | | label-width="160px" |
| | | autoComplete="on" |
| | | :model="ill" |
| | | :rules="createillRules" |
| | | label-position="right" |
| | | > |
| | | <div class="user-item"> |
| | | <!-- 问题类型 --> |
| | | <el-form-item class="optionItem" label="问题类型:" prop="category"> |
| | | <el-select v-model="ill.type" placeholder="违建" disabled> |
| | | <el-option v-for="item in communityList" :key="item.name" :label="item.name" |
| | | :value="item.value" :disabled="item.disabled"> |
| | | <el-form-item |
| | | class="optionItem" |
| | | label="问题类型:" |
| | | prop="category" |
| | | > |
| | | <el-select |
| | | v-model="ill.type" |
| | | placeholder="违建" |
| | | disabled |
| | | > |
| | | <el-option |
| | | v-for="item in communityList" |
| | | :key="item.name" |
| | | :label="item.name" |
| | | :value="item.value" |
| | | :disabled="item.disabled" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <!-- 违建类别 --> |
| | | <el-form-item class="optionItems" label="违建类别:" prop="categoryId"> |
| | | <el-select v-model="ill.categoryId" placeholder="请选择违建类别" size="small"> |
| | | <el-option v-for="item in bigKindList" :key="item.id" :label="item.name" |
| | | :value="item.id" :disabled="item.disabled"> |
| | | <el-form-item |
| | | class="optionItems" |
| | | label="违建类别:" |
| | | prop="categoryId" |
| | | > |
| | | <el-select |
| | | v-model="ill.categoryId" |
| | | placeholder="请选择违建类别" |
| | | size="small" |
| | | > |
| | | <el-option |
| | | v-for="item in bigKindList" |
| | | :key="item.id" |
| | | :label="item.name" |
| | | :value="item.id" |
| | | :disabled="item.disabled" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </div> |
| | | <!-- 当事人姓名 --> |
| | | <el-form-item class="optionItems" label="当事人姓名:" prop="partyName"> |
| | | <el-input placeholder="请填写当事人姓名" v-model="ill.partyName"></el-input> |
| | | <el-form-item |
| | | class="optionItems" |
| | | label="当事人姓名:" |
| | | prop="partyName" |
| | | > |
| | | <el-input |
| | | placeholder="请填写当事人姓名" |
| | | v-model="ill.partyName" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <!-- 当事人身份证号 --> |
| | | <el-form-item class="optionItems" label="当事人身份证号:" prop="partyIdCard"> |
| | | <el-input placeholder="请填写当事人身份证号" maxlength="18" v-model="ill.partyIdCard"></el-input> |
| | | <el-form-item |
| | | class="optionItems" |
| | | label="当事人身份证号:" |
| | | prop="partyIdCard" |
| | | > |
| | | <el-input |
| | | placeholder="请填写当事人身份证号" |
| | | maxlength="18" |
| | | v-model="ill.partyIdCard" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <!-- 当事人联系电话 --> |
| | | <el-form-item class="optionItem" label="当事人联系电话:" prop="partyPhone"> |
| | | <el-input v-model="ill.partyPhone" maxlength="11" placeholder="请填写当事人联系电话"></el-input> |
| | | <el-form-item |
| | | class="optionItem" |
| | | label="当事人联系电话:" |
| | | prop="partyPhone" |
| | | > |
| | | <el-input |
| | | v-model="ill.partyPhone" |
| | | maxlength="11" |
| | | placeholder="请填写当事人联系电话" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <div class="user-item"> |
| | | <!-- 违建地点 --> |
| | | <el-form-item class="optionItems" label="违建地点:" prop="site"> |
| | | <el-input placeholder="请填写违建地点" v-model="ill.site"></el-input> |
| | | <el-form-item |
| | | class="optionItems" |
| | | label="违建地点:" |
| | | prop="site" |
| | | > |
| | | <el-input |
| | | placeholder="请填写违建地点" |
| | | v-model="ill.site" |
| | | ></el-input> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="user-item"> |
| | | <!-- 所属街道 --> |
| | | <el-form-item class="optionItems" label="所属街道:" prop="streetId"> |
| | | <el-select v-model="ill.streetId" placeholder="请选择所属街道" @change="handleStreet"> |
| | | <el-option v-for="item in streetList" :key="item.id" :label="item.regionName" :value="item.id" |
| | | > |
| | | <el-form-item |
| | | class="optionItems" |
| | | label="所属街道:" |
| | | prop="streetId" |
| | | > |
| | | <el-select |
| | | v-model="ill.streetId" |
| | | placeholder="请选择所属街道" |
| | | @change="handleStreet" |
| | | > |
| | | <el-option |
| | | v-for="item in streetList" |
| | | :key="item.id" |
| | | :label="item.regionName" |
| | | :value="item.id" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <!-- 所属社区 --> |
| | | <el-form-item class="optionItems" label="所属社区:" prop="communityId"> |
| | | <el-select v-model="ill.communityId" placeholder="请选择所属社区"> |
| | | <el-option v-for="item in communityList" :key="item.id" :label="item.regionName" |
| | | :value="item.id"> |
| | | <el-form-item |
| | | class="optionItems" |
| | | label="所属社区:" |
| | | prop="communityId" |
| | | > |
| | | <el-select |
| | | v-model="ill.communityId" |
| | | placeholder="请选择所属社区" |
| | | > |
| | | <el-option |
| | | v-for="item in communityList" |
| | | :key="item.id" |
| | | :label="item.regionName" |
| | | :value="item.id" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </div> |
| | | <!-- 身份证正反面照片 --> |
| | | <el-form-item class="optionItems" label="身份证正、反面照片:" prop="positive"> |
| | | <el-form-item |
| | | class="optionItems" |
| | | label="身份证正、反面照片:" |
| | | prop="positive" |
| | | > |
| | | <template> |
| | | <div class="idcard"> |
| | | <!-- <el-upload--> |
| | | <!-- action="/sccg/file/medias"--> |
| | | <!-- list-type="picture-card"--> |
| | | <!-- :show-file-list="false"--> |
| | | <!-- :headers="getToken()" multiple--> |
| | | <!-- :limit="50" :on-success="handleSuccess">--> |
| | | <!-- <i class="el-icon-plus"></i>--> |
| | | <!-- <span class="text" v-if="ill.positive === ''">身份证正面</span>--> |
| | | <!-- <img :src="ill.positive" alt="" class="img" v-else>--> |
| | | <!-- </el-upload>--> |
| | | <el-upload list-type="picture-card" class="upload-demo" :show-file-list="false" |
| | | action="/sccg/file/medias" :headers="getToken()" multiple |
| | | :limit="50" :on-success="handleSuccess"> |
| | | <!-- <img v-if="ill.positive === ''"--> |
| | | <!-- src="https://axure-file.lanhuapp.com/90466432-c999-4bf0-80b8-ee3f96a2099e__15f765432d579a14b8f6591c100d30e3.svg"--> |
| | | <!-- alt="">--> |
| | | <i v-if="ill.positive === ''" class="el-icon-plus"></i> |
| | | <span class="text" v-if="ill.positive === ''">身份证正面</span> |
| | | <img :src="ill.positive" alt="" class="img" v-else> |
| | | <!-- <el-upload--> |
| | | <!-- action="/sccg/file/medias"--> |
| | | <!-- list-type="picture-card"--> |
| | | <!-- :show-file-list="false"--> |
| | | <!-- :headers="getToken()" multiple--> |
| | | <!-- :limit="50" :on-success="handleSuccess">--> |
| | | <!-- <i class="el-icon-plus"></i>--> |
| | | <!-- <span class="text" v-if="ill.positive === ''">身份证正面</span>--> |
| | | <!-- <img :src="ill.positive" alt="" class="img" v-else>--> |
| | | <!-- </el-upload>--> |
| | | <el-upload |
| | | list-type="picture-card" |
| | | class="upload-demo" |
| | | :show-file-list="false" |
| | | action="/sccg/file/medias" |
| | | :headers="getToken()" |
| | | multiple |
| | | :limit="50" |
| | | :on-success="handleSuccess" |
| | | > |
| | | <!-- <img v-if="ill.positive === ''"--> |
| | | <!-- src="https://axure-file.lanhuapp.com/90466432-c999-4bf0-80b8-ee3f96a2099e__15f765432d579a14b8f6591c100d30e3.svg"--> |
| | | <!-- alt="">--> |
| | | <i |
| | | v-if="ill.positive === ''" |
| | | class="el-icon-plus" |
| | | ></i> |
| | | <span |
| | | class="text" |
| | | v-if="ill.positive === ''" |
| | | >身份证正面</span |
| | | > |
| | | <img |
| | | :src="ill.positive" |
| | | alt="" |
| | | class="img" |
| | | v-else |
| | | /> |
| | | </el-upload> |
| | | <el-upload list-type="picture-card" class="upload-demo" :show-file-list="false" |
| | | action="/sccg/file/medias" :headers="getToken()" multiple |
| | | :limit="50" :on-success="handleSuccess2"> |
| | | <!-- <img v-if="ill.negative === '' "--> |
| | | <!-- src="https://axure-file.lanhuapp.com/90466432-c999-4bf0-80b8-ee3f96a2099e__15f765432d579a14b8f6591c100d30e3.svg"--> |
| | | <!-- alt="">--> |
| | | <i v-if="ill.negative === ''" class="el-icon-plus"></i> |
| | | <span class="text" v-if="ill.negative === ''">身份证反面</span> |
| | | <img :src="ill.negative" alt="" class="img" v-else /> |
| | | <el-upload |
| | | list-type="picture-card" |
| | | class="upload-demo" |
| | | :show-file-list="false" |
| | | action="/sccg/file/medias" |
| | | :headers="getToken()" |
| | | multiple |
| | | :limit="50" |
| | | :on-success="handleSuccess2" |
| | | > |
| | | <!-- <img v-if="ill.negative === '' "--> |
| | | <!-- src="https://axure-file.lanhuapp.com/90466432-c999-4bf0-80b8-ee3f96a2099e__15f765432d579a14b8f6591c100d30e3.svg"--> |
| | | <!-- alt="">--> |
| | | <i |
| | | v-if="ill.negative === ''" |
| | | class="el-icon-plus" |
| | | ></i> |
| | | <span |
| | | class="text" |
| | | v-if="ill.negative === ''" |
| | | >身份证反面</span |
| | | > |
| | | <img |
| | | :src="ill.negative" |
| | | alt="" |
| | | class="img" |
| | | v-else |
| | | /> |
| | | </el-upload> |
| | | </div> |
| | | </template> |
| | | </el-form-item> |
| | | <!-- 报警时间 --> |
| | | <el-form-item class="optionItems" label="报警时间:" prop="alarmTime"> |
| | | <el-date-picker v-model="ill.alarmTime" type="datetime" placeholder="选择报警时间"> |
| | | <el-form-item |
| | | class="optionItems" |
| | | label="报警时间:" |
| | | prop="alarmTime" |
| | | > |
| | | <el-date-picker |
| | | v-model="ill.alarmTime" |
| | | type="datetime" |
| | | placeholder="选择报警时间" |
| | | > |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | <div class="not-need"> |
| | | <div class="not-need__header"> |
| | | 执法违建情况 |
| | | </div> |
| | | <el-form ref="condition" label-width="160px" autoComplete="on" :model="ill" :rules="createillRules"> |
| | | <div class="not-need__header">执法违建情况</div> |
| | | <el-form |
| | | ref="condition" |
| | | label-width="160px" |
| | | autoComplete="on" |
| | | :model="ill" |
| | | :rules="createillRules" |
| | | > |
| | | <!-- 违建具体位置 --> |
| | | <el-form-item class="optionItems" label="违建具体位置:" prop="position"> |
| | | <el-input placeholder="请填写违建具体位置" v-model="ill.position"></el-input> |
| | | <el-form-item |
| | | class="optionItems" |
| | | label="违建具体位置:" |
| | | prop="position" |
| | | > |
| | | <el-input |
| | | placeholder="请填写违建具体位置" |
| | | v-model="ill.position" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <div class="area"> |
| | | <el-form-item class="optionItems" label="违法建设长、宽、高:" prop="buildingLength"> |
| | | <el-input placeholder="单位米" v-model="ill.buildingLength"></el-input> |
| | | <el-form-item |
| | | class="optionItems" |
| | | label="违法建设长、宽、高:" |
| | | prop="buildingLength" |
| | | > |
| | | <el-input |
| | | placeholder="单位米" |
| | | v-model="ill.buildingLength" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item class="optionItems" label-width='0px' prop="buildingWidth"> |
| | | <el-input placeholder="单位米" v-model="ill.buildingWidth"></el-input> |
| | | <el-form-item |
| | | class="optionItems" |
| | | label-width="0px" |
| | | prop="buildingWidth" |
| | | > |
| | | <el-input |
| | | placeholder="单位米" |
| | | v-model="ill.buildingWidth" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item class="optionItems" label-width='0px' prop="buildingHigh"> |
| | | <el-input placeholder="单位米" v-model="ill.buildingHigh"></el-input> |
| | | <el-form-item |
| | | class="optionItems" |
| | | label-width="0px" |
| | | prop="buildingHigh" |
| | | > |
| | | <el-input |
| | | placeholder="单位米" |
| | | v-model="ill.buildingHigh" |
| | | ></el-input> |
| | | </el-form-item> |
| | | </div> |
| | | <el-form-item class="optionItems" label="违法建设面积:" prop="buildingArea"> |
| | | <el-input placeholder="请填写违法建设面积" v-model="ill.buildingArea"></el-input> |
| | | <el-form-item |
| | | class="optionItems" |
| | | label="违法建设面积:" |
| | | prop="buildingArea" |
| | | > |
| | | <el-input |
| | | placeholder="请填写违法建设面积" |
| | | v-model="ill.buildingArea" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item class="optionItems" label="违法建筑材料:" prop="materials"> |
| | | <el-input placeholder="请填写违法建筑材料" v-model="ill.materials"></el-input> |
| | | <el-form-item |
| | | class="optionItems" |
| | | label="违法建筑材料:" |
| | | prop="materials" |
| | | > |
| | | <el-input |
| | | placeholder="请填写违法建筑材料" |
| | | v-model="ill.materials" |
| | | ></el-input> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | <div class="input-footer"> |
| | | <el-button type="primary" class="confirm" @click="handleUser">确定</el-button> |
| | | <el-button type="primary" class="confirm" @click="handleUser" |
| | | >确定</el-button |
| | | > |
| | | <el-button class="back" @click="handleBack">返回</el-button> |
| | | </div> |
| | | </div> |
| | |
| | | <script> |
| | | // import MyMap from "@/components/map"; |
| | | import MyMap from "@/components/map/leafletMap.vue"; |
| | | import {parseTime} from '@/utils/index' |
| | | import { parseTime, FILE_ORIGINAL_PATH } from '@/utils/index' |
| | | import { validateName, validatePhone, validateCardId, validateNum } from '@/utils/validate' |
| | | export default { |
| | | components: { |
| | |
| | | callback(new Error('报警时间不能为空')) |
| | | } |
| | | } |
| | | const checkStreet=(rule, value, callback) => { |
| | | const checkStreet = (rule, value, callback) => { |
| | | if (value) { |
| | | callback(); |
| | | } else { |
| | |
| | | } |
| | | }, |
| | | created() { |
| | | const { getBigKind, getCommityList,getStreetList } = this; |
| | | const { getBigKind, getCommityList, getStreetList } = this; |
| | | getStreetList(0); |
| | | |
| | | // this.ill.category = this.mytype + 1; |
| | |
| | | ill.buildingHigh = parseFloat(ill.buildingHigh); |
| | | ill.buildingWidth = parseFloat(ill.buildingWidth); |
| | | ill.buildingArea = parseFloat(ill.buildingArea); |
| | | |
| | | ill.negative = ill.negative.replace(FILE_ORIGINAL_PATH, "") |
| | | ill.positive = ill.positive.replace(FILE_ORIGINAL_PATH, "") |
| | | that.$axios({ |
| | | method: 'post', |
| | | url: 'sccg/base_case/addition_illegal_building', |
| | | data: { |
| | | ...ill, |
| | | alarmTime:parseTime(ill.alarmTime) |
| | | alarmTime: parseTime(ill.alarmTime) |
| | | }, |
| | | }) |
| | | .then(res => { |
| | |
| | | } |
| | | }, |
| | | handleSuccess(res, file, filelist) { |
| | | this.ill.positive = `${FILE_ORIGINAL_PATH}` + res.data; |
| | | // this.ill.positive = res.data |
| | | // let oll =this.ill.positive |
| | | // let that=this |
| | | // this.$axios({ |
| | | // url:'sccg/API/img?fileUrl='+res.data, |
| | | // method:"get", |
| | | // responseType: 'blob' |
| | | // }).then(res=>{ |
| | | |
| | | // const baseUrl = 'http://140.143.152.226:8410/'; |
| | | // this.ill.positive = baseUrl + res.data.url1; |
| | | // this.ill.positive = res.data |
| | | // let oll =this.ill.positive |
| | | let that=this |
| | | this.$axios({ |
| | | url:'sccg/API/img?fileUrl='+res.data, |
| | | method:"get", |
| | | responseType: 'blob' |
| | | }).then(res=>{ |
| | | // const blob = new Blob([res]) |
| | | // var reader = new window.FileReader(); |
| | | // reader.readAsDataURL(blob); |
| | | // reader.onloadend = function () { |
| | | |
| | | const blob = new Blob([res]) |
| | | var reader = new window.FileReader(); |
| | | reader.readAsDataURL(blob); |
| | | reader.onloadend = function () { |
| | | // that.ill.positive= reader.result |
| | | // } |
| | | |
| | | that.ill.positive= reader.result |
| | | } |
| | | |
| | | }) |
| | | // }) |
| | | |
| | | }, |
| | | handleSuccess2(res, file, filelist) { |
| | | // const baseUrl = 'http://140.143.152.226:8410/'; |
| | | // this.ill.negative = baseUrl + res.data.url1; |
| | | // this.ill.negative = res.data |
| | | let that=this |
| | | this.$axios({ |
| | | url:'sccg/API/img?fileUrl='+res.data, |
| | | method:"get", |
| | | responseType: 'blob' |
| | | }).then(res=>{ |
| | | this.ill.negative = `${FILE_ORIGINAL_PATH}` + res.data; |
| | | // this.ill.negative = res.data |
| | | // let that=this |
| | | // this.$axios({ |
| | | // url:'sccg/API/img?fileUrl='+res.data, |
| | | // method:"get", |
| | | // responseType: 'blob' |
| | | // }).then(res=>{ |
| | | |
| | | const blob = new Blob([res]) |
| | | var reader = new window.FileReader(); |
| | | reader.readAsDataURL(blob); |
| | | reader.onloadend = function () { |
| | | console.log(reader.result) |
| | | that.ill.negative= reader.result |
| | | } |
| | | // const blob = new Blob([res]) |
| | | // var reader = new window.FileReader(); |
| | | // reader.readAsDataURL(blob); |
| | | // reader.onloadend = function () { |
| | | // console.log(reader.result) |
| | | // that.ill.negative= reader.result |
| | | // } |
| | | |
| | | }) |
| | | // }) |
| | | }, |
| | | |
| | | // 查询社区 |
| | |
| | | async getStreetList(id) { |
| | | let arr |
| | | await this.$axios({ |
| | | method:'get', |
| | | url:`sccg/sccg_region/getChildren/${id}`, |
| | | method: 'get', |
| | | url: `sccg/sccg_region/getChildren/${id}`, |
| | | }) |
| | | .then(res=>{ |
| | | if(res.code === 200){ |
| | | arr = res.data; |
| | | } |
| | | }) |
| | | .then(res => { |
| | | if (res.code === 200) { |
| | | arr = res.data; |
| | | } |
| | | }) |
| | | this.streetList = arr; |
| | | }, |
| | | // 街道更改 |
| | |
| | | this.communityList = res.data; |
| | | }) |
| | | }, |
| | | handleBack(){ |
| | | handleBack() { |
| | | this.$emit('changeDialog', { flag: false }); |
| | | } |
| | | }, |
| | |
| | | } |
| | | } |
| | | .el-form { |
| | | // &::v-deep .el-form-item__label { |
| | | // color: #4b9bb7; |
| | | // } |
| | | // &::v-deep .el-form-item__label { |
| | | // color: #4b9bb7; |
| | | // } |
| | | |
| | | // &::v-deep .el-input__inner { |
| | | // // background-color: #09152f; |
| | | // border: 1px solid #17324c; |
| | | // } |
| | | // &::v-deep .el-input__inner { |
| | | // // background-color: #09152f; |
| | | // border: 1px solid #17324c; |
| | | // } |
| | | |
| | | // &::v-deep .el-textarea__inner { |
| | | // // background-color: #09152f; |
| | | // border: 1px solid #17324c; |
| | | // } |
| | | } |
| | | // &::v-deep .el-textarea__inner { |
| | | // // background-color: #09152f; |
| | | // border: 1px solid #17324c; |
| | | // } |
| | | } |
| | | .input-form { |
| | | |
| | | |
| | | .upload-demo { |
| | | position: relative; |
| | | margin-right: 20px; |