From 829f5116884f98643ffc5b2a548a600d40c0cedb Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期一, 14 四月 2025 23:09:32 +0800
Subject: [PATCH] 处理图片显示问题
---
src/views/operate/disposal/casepool/pool/createUser/ill/index.vue | 811 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 809 insertions(+), 2 deletions(-)
diff --git a/src/views/operate/disposal/casepool/pool/createUser/ill/index.vue b/src/views/operate/disposal/casepool/pool/createUser/ill/index.vue
index e894c43..6ddf652 100644
--- a/src/views/operate/disposal/casepool/pool/createUser/ill/index.vue
+++ b/src/views/operate/disposal/casepool/pool/createUser/ill/index.vue
@@ -1,3 +1,810 @@
<template>
- <div>2</div>
-</template>
\ No newline at end of file
+ <div class="ill">
+ <div class="input-area">
+ <div class="input-header">
+ <div class="input-header__title">鍩虹淇℃伅</div>
+ <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"
+ >
+ <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-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-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>
+ <!-- 褰撲簨浜鸿韩浠借瘉鍙� -->
+ <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>
+ <div class="user-item">
+ <!-- 杩濆缓鍦扮偣 -->
+ <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-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-option>
+ </el-select>
+ </el-form-item>
+ </div>
+ <!-- 韬唤璇佹鍙嶉潰鐓х墖 -->
+ <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>
+ <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-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"
+ >
+ <!-- 杩濆缓鍏蜂綋浣嶇疆 -->
+ <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>
+ <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>
+ </div>
+ <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>
+ </el-form>
+ </div>
+ <div class="input-footer">
+ <el-button type="primary" class="confirm" @click="handleUser"
+ >纭畾</el-button
+ >
+ <el-button class="back" @click="handleBack">杩斿洖</el-button>
+ </div>
+ </div>
+ <div class="map-area">
+ <!-- <MyMap /> -->
+ </div>
+ </div>
+</template>
+<script>
+// import MyMap from "@/components/map";
+import MyMap from "@/components/map/leafletMap.vue";
+import { parseTime, FILE_ORIGINAL_PATH } from '@/utils/index'
+import { validateName, validatePhone, validateCardId, validateNum } from '@/utils/validate'
+export default {
+ components: {
+ MyMap
+ },
+ data() {
+ const checkArea = (rule, value, callback) => {
+ if (value) {
+ validateNum(value) ? callback() : callback(new Error('璇疯緭鍏ユ纭殑杩濇硶寤鸿闈㈢Н'))
+ } else {
+ callback(new Error('杩濇硶寤鸿闈㈢Н涓嶈兘涓虹┖'))
+ }
+ }
+ const checkHigh = (rule, value, callback) => {
+ if (value) {
+ validateNum(value) ? callback() : callback(new Error('璇疯緭鍏ユ纭殑杩濇硶寤鸿楂樺害'))
+ } else {
+ callback(new Error('杩濇硶寤鸿楂樺害涓嶈兘涓虹┖'));
+
+ }
+ }
+ const checkWidth = (rule, value, callback) => {
+ if (value) {
+ validateNum(value) ? callback() : callback(new Error('璇疯緭鍏ユ纭殑杩濇硶寤鸿瀹藉害'))
+ } else {
+ callback(new Error('杩濇硶寤鸿瀹藉害涓嶈兘涓虹┖'));
+
+ }
+ }
+ const checkLength = (rule, value, callback) => {
+ if (value) {
+ validateNum(value) ? callback() : callback(new Error('璇疯緭鍏ユ纭殑杩濇硶寤鸿闀垮害'))
+ } else {
+ callback(new Error('杩濇硶寤鸿闀垮害涓嶈兘涓虹┖'));
+
+ }
+ }
+ const checkCategoryId = (rule, value, callback) => {
+ if (value) {
+ callback();
+ } else {
+ callback(new Error('杩濆缓绫诲埆涓嶈兘涓虹┖'));
+ }
+ }
+ const checkCommunityId = (rule, value, callback) => {
+ if (value) {
+ callback();
+ } else {
+ callback(new Error('鎵�灞炵ぞ鍖轰笉鑳戒负绌�'));
+ }
+ }
+ const checkMaterials = (rule, value, callback) => {
+ if (value) {
+ callback();
+ } else {
+ callback(new Error('杩濇硶寤虹瓚鏉愭枡涓嶈兘涓虹┖'));
+ }
+ }
+ const checkIdCard = (rule, value, callback) => {
+ if (value) {
+ validateCardId(value) ? callback() : callback(new Error('璇疯緭鍏ユ纭殑韬唤璇佸彿鐮�'))
+ } else {
+ callback(new Error('褰撲簨浜鸿韩浠借瘉鍙风爜涓嶈兘涓虹┖'));
+ }
+ }
+ const checkName = (rule, value, callback) => {
+ if (value) {
+ validateName(value) ? callback() : callback(new Error('璇疯緭鍏ユ纭殑褰撲簨浜轰俊鎭�'))
+ } else {
+ callback(new Error('褰撲簨浜哄鍚嶄笉鑳戒负绌�'));
+ }
+ }
+ const checkPhone = (rule, value, callback) => {
+ if (value) {
+ validatePhone(value) ? callback() : callback(new Error('璇疯緭鍏ユ纭殑鎵嬫満鍙风爜'))
+ } else {
+ callback(new Error('褰撲簨浜鸿仈绯荤數璇濅笉鑳戒负绌�'));
+ }
+ }
+ const checkPosition = (rule, value, callback) => {
+ if (value) {
+ callback();
+ } else {
+ callback(new Error('杩濇硶寤鸿鍏蜂綋浣嶇疆涓嶈兘涓虹┖'));
+ }
+ }
+ const checkPositive = (rule, value, callback) => {
+ if (value) {
+ if (this.ill.negative === '') {
+ callback('韬唤璇佸弽闈笉鑳戒负绌�');
+ } else {
+ callback();
+ }
+ } else {
+ callback(new Error('韬唤璇佹闈笉鑳戒负绌�'));
+
+ }
+ }
+ const checkSite = (rule, value, callback) => {
+ if (value) {
+ callback();
+ } else {
+ callback(new Error('杩濇硶寤鸿鍦扮偣涓嶈兘涓虹┖'));
+ }
+ }
+ const checkDate = (rule, value, callback) => {
+ if (value) {
+ callback();
+ } else {
+ callback(new Error('鎶ヨ鏃堕棿涓嶈兘涓虹┖'))
+ }
+ }
+ const checkStreet = (rule, value, callback) => {
+ if (value) {
+ callback();
+ } else {
+ callback(new Error('鎵�灞炶閬撲笉鑳戒负绌�'))
+ }
+ }
+ return {
+ ill: {
+ buildingArea: '',
+ buildingHigh: '',
+ buildingLength: '',
+ buildingWidth: '',
+ // category: '',
+ categoryId: '',
+ communityId: '',
+ materials: "",
+ partyIdCard: "",
+ partyName: "",
+ partyPhone: "",
+ position: "",
+ positive: "",
+ negative: "",
+ site: "",
+ alarmTime: '',
+ },
+ createillRules: {
+ buildingArea: [
+ {
+ required: true, trigger: 'blur', validator: checkArea
+ }
+ ],
+ buildingHigh: [
+ {
+ required: true, trigger: 'blur', validator: checkHigh
+ }
+ ],
+ buildingLength: [
+ {
+ required: true, trigger: 'blur', validator: checkLength
+ }
+ ],
+ buildingWidth: [
+ {
+ required: true, trigger: 'blur', validator: checkWidth
+ }
+ ],
+ categoryId: [
+ {
+ required: true, trigger: 'change', validator: checkCategoryId
+ }
+ ],
+ communityId: [
+ {
+ required: true, trigger: 'change', validator: checkCommunityId
+ }
+ ],
+ materials: [
+ {
+ required: true, trigger: 'blur', validator: checkMaterials
+ }
+ ],
+ partyIdCard: [
+ {
+ required: true, trigger: 'blur', validator: checkIdCard
+ }
+ ],
+ partyName: [
+ {
+ required: true, trigger: 'blur', validator: checkName
+ }
+ ],
+ partyPhone: [
+ {
+ required: true, trigger: 'blur', validator: checkPhone
+ }
+ ],
+ position: [
+ {
+ required: true, trigger: 'blur', validator: checkPosition
+ }
+ ],
+ positive: [
+ {
+ required: true, trigger: 'change', validator: checkPositive
+ }
+ ],
+ site: [
+ {
+ required: true, trigger: 'blur', validator: checkSite
+ }
+ ],
+ alarmTime: [
+ {
+ required: true, trigger: 'change', validator: checkDate
+ }
+ ],
+ streetId: [
+ {
+ required: true, trigger: 'change', validator: checkStreet
+ }
+ ],
+ },
+ bigKindList: [],
+ communityList: [
+ ],
+ streetList: [],
+ }
+ },
+ created() {
+ const { getBigKind, getCommityList, getStreetList } = this;
+ getStreetList(0);
+
+ // this.ill.category = this.mytype + 1;
+ getBigKind();
+ getCommityList();
+ },
+ methods: {
+ handleUser() {
+ const that = this;
+ this.$refs.user.validate((valid) => {
+ if (valid) {
+ that.$refs.condition.validate((flag) => {
+ if (flag) {
+ const { ill } = this;
+ ill.buildingLength = parseFloat(ill.buildingLength);
+ 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)
+ },
+ })
+ .then(res => {
+ if (res.code === 200) {
+ this.$message({
+ type: 'success',
+ message: res.message
+ })
+ this.$emit('changeDialog', { flag: false });
+ this.refresh();
+ } else {
+ this.$message({
+ type: 'warning',
+ message: res.message,
+ })
+ }
+ })
+ } else {
+ return false;
+ }
+ })
+ } else {
+ return false;
+ }
+ })
+ },
+ // 鑾峰彇澶х被鍒楄〃
+ getBigKind() {
+ this.$axios({
+ method: 'get',
+ url: 'sccg/illegal_building/query/type_second'
+ }).then(res => {
+ this.bigKindList = res.data;
+ })
+ },
+ // 鑾峰彇token
+ getToken() {
+ const token = sessionStorage.getItem('token');
+ const tokenHead = sessionStorage.getItem('tokenHead');
+ if (token && tokenHead) {
+ return { Authorization: tokenHead + token };
+ }
+ },
+ 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 blob = new Blob([res])
+ // var reader = new window.FileReader();
+ // reader.readAsDataURL(blob);
+ // reader.onloadend = function () {
+
+ // that.ill.positive= reader.result
+ // }
+
+ // })
+
+ },
+ handleSuccess2(res, file, filelist) {
+ 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
+ // }
+
+ // })
+ },
+
+ // 鏌ヨ绀惧尯
+ getCommityList() {
+ this.$axios({
+ method: 'get',
+ url: 'sccg/dict/query_type?level=1&typeCode=' + '10'
+ })
+ .then(res => {
+ })
+ },
+ // 鑾峰彇琛楅亾淇℃伅
+ async getStreetList(id) {
+ let arr
+ await this.$axios({
+ method: 'get',
+ url: `sccg/sccg_region/getChildren/${id}`,
+ })
+ .then(res => {
+ if (res.code === 200) {
+ arr = res.data;
+ }
+ })
+ this.streetList = arr;
+ },
+ // 琛楅亾鏇存敼
+ handleStreet(id) {
+ this.ill.communityId = '';
+ this.$axios({
+ method: 'get',
+ url: `sccg/sccg_region/getChildren/${id}`
+ })
+ .then(res => {
+ this.communityList = res.data;
+ })
+ },
+ handleBack() {
+ this.$emit('changeDialog', { flag: false });
+ }
+ },
+ watch: {
+ 'ill.buildingLength': {
+ handler(newVal, oldVal) {
+ if (newVal) {
+ this.ill.buildingWidth !== '' && validateNum(newVal) && validateNum(this.ill.buildingWidth) ? this.ill.buildingArea = newVal * this.ill.buildingWidth : '';
+ }
+ },
+ deep: true,
+ },
+ 'ill.buildingWidth': {
+ handler(newVal, oldVal) {
+ if (newVal) {
+ this.ill.buildingLength !== '' && validateNum(newVal) && validateNum(this.ill.buildingLength) ? this.ill.buildingArea = newVal * this.ill.buildingLength : '';
+ }
+ },
+ deep: true,
+ }
+ },
+ props: ['mytype', 'changeDialog', 'refresh']
+}
+</script>
+<style lang="scss" scoped>
+.ill {
+ display: flex;
+ padding: 20px 10px 50px;
+
+ .user-item {
+ display: flex;
+ }
+
+ .input-area {
+ flex: 3;
+ padding: 10px 20px;
+
+ .input-header {
+ color: #4b9bb7;
+
+ .input-header__title {
+ line-height: 60px;
+ font-weight: 650;
+ font-size: 20px;
+ }
+
+ .input-header__tip {
+ line-height: 40px;
+ }
+ }
+ .el-form {
+ // &::v-deep .el-form-item__label {
+ // color: #4b9bb7;
+ // }
+
+ // &::v-deep .el-input__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;
+ .text {
+ position: absolute;
+ top: 22%;
+ left: 26%;
+ }
+ }
+
+ .idcard {
+ display: flex;
+ }
+
+ .idCardZ {
+ width: 200px;
+ height: 200px;
+ }
+ }
+
+ .input-footer {
+ display: flex;
+ justify-content: center;
+ }
+ }
+
+ .img {
+ width: 100%;
+ height: 100%;
+ }
+
+ .area {
+ display: flex;
+ }
+
+ .map-area {
+ flex: 2;
+ }
+}
+</style>
--
Gitblit v1.8.0