From 778039b40c8fcbe205f9a4a5fab27518d0c0a90d Mon Sep 17 00:00:00 2001 From: zhanghua <314079846@qq.com> Date: 星期二, 09 一月 2024 09:57:36 +0800 Subject: [PATCH] 2024年第一次bug修改 --- src/components/scene/index.vue | 495 ++++++++++++++++++++++++++++++++---------------------- 1 files changed, 290 insertions(+), 205 deletions(-) diff --git a/src/components/scene/index.vue b/src/components/scene/index.vue index b382cc8..876a5ca 100644 --- a/src/components/scene/index.vue +++ b/src/components/scene/index.vue @@ -1,225 +1,310 @@ <template> - <div class="scene"> - <div class="nav"> - <div class="nav-item" v-for="o in list" :key="o.index" @click="changeActive(o.index)"> - <div class="outer"> - <div :class="['inner',active === o.index ? 'inner-active' : '']"></div> - </div> - <div class="innet-title">{{o.label}}</div> - </div> + <div class="scene"> + <div class="nav"> + <div + class="nav-item" + v-for="o in list" + :key="o.index" + @click="changeActive(o.index)" + > + <div class="outer"> + <div + :class="['inner', active === o.index ? 'inner-active' : '']" + ></div> </div> - <div class="scene-item" v-if="active === 1"> - <el-form ref="arrivalSituation" label-position="right" label-width="120px" :model="arrivalSituation"> - <el-form-item label="鍒拌揪鏃堕棿:"> - <el-input disabled v-model="arrivalSituation.arrivalTime"></el-input> - </el-form-item> - <el-form-item label="鍒拌揪鍦板潃:"> - <el-input disabled v-model="arrivalSituation.arrivalAddress"></el-input> - </el-form-item> - <el-form-item label="鐜板満鎯呭喌璇存槑:"> - <el-input disabled v-model="arrivalSituation.situationExplain"></el-input> - </el-form-item> - <el-form-item label="淇¤鍥炲璇存槑:"> - <el-input disabled v-model="arrivalSituation.replyExplain"></el-input> - </el-form-item> - <el-form-item label="鐜板満鎯呭喌鐓х墖:"> - <img class="img" :src="arrivalSituation.situationPic" alt="" v-if="arrivalSituation.situationPic"> - <!-- <el-input disabled v-model=""></el-input> --> - </el-form-item> - </el-form> - </div> - <div class="scene-item" v-if="active === 2"> - <el-form ref="investigation" label-position="right" label-width="120px" :model="investigation"> - <div class="inves-item"> - <el-form-item label="鎵垮姙闃熷憳:"> - <el-input disabled v-model="investigation.undertaker"></el-input> - </el-form-item> - <el-form-item label="鍗忓姙闃熷憳:"> - <el-input disabled v-model="investigation.assistant"></el-input> - </el-form-item> - </div> - <el-form-item label="鏃堕棿:"> - <el-input disabled v-model="investigation.investigationTime"></el-input> - </el-form-item> - <el-form-item label="鍦板潃:"> - <el-input disabled v-model="investigation.address"></el-input> - </el-form-item> - <el-form-item label="妗堢敱:"> - <el-input disabled v-model="investigation.caseAction"></el-input> - </el-form-item> - <el-form-item label="褰撲簨浜轰俊鎭�:"> - <el-input disabled v-model="investigation.type"></el-input> - </el-form-item> - <el-form-item label="鎯呭喌鎻忚堪:"> - <el-input disabled v-model="investigation.description"></el-input> - </el-form-item> - <el-form-item label="鐓х墖闄勪欢:"> - <img class="img" :src="investigation.pic" alt="" v-if="investigation.pic"> - <!-- <el-input disabled v-model="investigation.pic"></el-input> --> - </el-form-item> - <el-form-item label="绫诲瀷:"> - <el-input disabled v-model="mybaseCase.categoryText"></el-input> - </el-form-item> - <div class="inves-item"> - <el-form-item label="褰撲簨浜哄鍚�:"> - <el-input disabled v-model="partyInfo.name"></el-input> - </el-form-item> - <el-form-item label="鎵嬫満鍙风爜:"> - <el-input disabled v-model="partyInfo.phoneCode"></el-input> - </el-form-item> - </div> - <div class="inves-item"> - <el-form-item label="璇佷欢绫诲瀷:"> - <el-input disabled v-model="partyInfo.certificateTypeText"></el-input> - </el-form-item> - <el-form-item label="璇佷欢鍙风爜:"> - <el-input disabled v-model="partyInfo.certificateCode"></el-input> - </el-form-item> - </div> - <div class="inves-item"> - <el-form-item label="鏂囧寲绋嬪害:"> - <el-input disabled v-model="partyInfo.educationDegreeText"></el-input> - </el-form-item> - <el-form-item label="鑱屼笟:"> - <el-input disabled v-model="partyInfo.career"></el-input> - </el-form-item> - </div> - <el-form-item label="宸ヤ綔鍗曚綅鍙婅亴鍔�:"> - <el-input disabled v-model="partyInfo.work"></el-input> - </el-form-item> - <div class="inves-item"> - <el-form-item label="姘戞棌:"> - <el-input disabled v-model="partyInfo.nationText"></el-input> - </el-form-item> - <el-form-item label="绫嶈疮:"> - <el-input disabled v-model="partyInfo.nativePlace"></el-input> - </el-form-item> - </div> - <el-form-item label="鐜颁綇鍧�:"> - <el-input disabled v-model="partyInfo.liveAddress"></el-input> - </el-form-item> - <el-form-item label="鎴风睄鎵�鍦ㄥ湴:"> - <el-input disabled v-model="partyInfo.registerAddress"></el-input> - </el-form-item> - </el-form> - <el-button>杩斿洖</el-button> - </div> - <div class="scene-item" v-if="active === 3"> - <el-form ref="writ" label-position="right" label-width="120px" :model="writ"> - <el-form-item label="绫诲瀷:"> - <el-input disabled v-model="writ.name"></el-input> - </el-form-item> - </el-form> - </div> + <div class="innet-title">{{ o.label }}</div> + </div> </div> + <div class="scene-item" v-if="active === 1"> + <el-form + ref="arrivalSituation" + label-position="right" + label-width="120px" + :model="arrivalSituation" + > + <el-form-item label="鍒拌揪鏃堕棿:"> + <el-input disabled v-model="arrivalSituation.arrivalTime"></el-input> + </el-form-item> + <el-form-item label="鍒拌揪鍦板潃:"> + <el-input + disabled + v-model="arrivalSituation.arrivalAddress" + ></el-input> + </el-form-item> + <el-form-item label="鐜板満鎯呭喌璇存槑:"> + <el-input + disabled + v-model="arrivalSituation.situationExplain" + ></el-input> + </el-form-item> + <el-form-item label="淇¤鍥炲璇存槑:"> + <el-input disabled v-model="arrivalSituation.replyExplain"></el-input> + </el-form-item> + <el-form-item label="鐜板満鎯呭喌鐓х墖:"> + <div class="flex"> + <template v-for="item in arrivalSituation.situationPic"> + <img class="img" :src="item" alt="" v-if="investigation.pic" /> + </template> + </div> + </el-form-item> + </el-form> + </div> + <div class="scene-item" v-if="active === 2"> + <el-form + ref="investigation" + label-position="right" + label-width="120px" + :model="investigation" + > + <div class="inves-item"> + <el-form-item label="鎵垮姙闃熷憳:"> + <el-input disabled v-model="investigation.undertaker"></el-input> + </el-form-item> + <el-form-item label="鍗忓姙闃熷憳:"> + <el-input disabled v-model="investigation.assistant"></el-input> + </el-form-item> + </div> + <el-form-item label="鏃堕棿:"> + <el-input + disabled + v-model="investigation.investigationTime" + ></el-input> + </el-form-item> + <el-form-item label="鍦板潃:"> + <el-input disabled v-model="investigation.address"></el-input> + </el-form-item> + <el-form-item label="妗堢敱:"> + <el-input disabled v-model="investigation.caseAction"></el-input> + </el-form-item> + <el-form-item label="澶勭疆缁撴灉:"> + <el-input disabled v-model="investigation.description"></el-input> + </el-form-item> + <el-form-item label="鐓х墖闄勪欢:"> + <div class="flex"> + <template v-for="item in investigation.pic"> + <img class="img" :src="item" alt="" v-if="investigation.pic" /> + </template> + </div> + </el-form-item> + <div class="inves-item">褰撲簨浜轰俊鎭�</div> + <el-form-item label="绫诲瀷:"> + <el-input + type="textarea" + :rows="5" + disabled + v-model="type" + ></el-input> + </el-form-item> + <div class="inves-item"> + <el-form-item label="褰撲簨浜哄鍚�:"> + <el-input disabled v-model="partyInfo.name"></el-input> + </el-form-item> + <el-form-item label="鎵嬫満鍙风爜:"> + <el-input disabled v-model="partyInfo.phoneCode"></el-input> + </el-form-item> + </div> + <div class="inves-item"> + <el-form-item label="璇佷欢绫诲瀷:"> + <el-input + disabled + v-model="partyInfo.certificateTypeText" + ></el-input> + </el-form-item> + <el-form-item label="璇佷欢鍙风爜:"> + <el-input disabled v-model="partyInfo.certificateCode"></el-input> + </el-form-item> + </div> + <div class="inves-item"> + <el-form-item label="鏂囧寲绋嬪害:"> + <el-input + disabled + v-model="partyInfo.educationDegreeText" + ></el-input> + </el-form-item> + <el-form-item label="鑱屼笟:"> + <el-input disabled v-model="partyInfo.career"></el-input> + </el-form-item> + </div> + <el-form-item label="宸ヤ綔鍗曚綅鍙婅亴鍔�:"> + <el-input disabled v-model="partyInfo.work"></el-input> + </el-form-item> + <div class="inves-item"> + <el-form-item label="姘戞棌:"> + <el-input disabled v-model="partyInfo.nationText"></el-input> + </el-form-item> + <el-form-item label="绫嶈疮:"> + <el-input disabled v-model="partyInfo.nativePlace"></el-input> + </el-form-item> + </div> + <el-form-item label="鐜颁綇鍧�:"> + <el-input disabled v-model="partyInfo.liveAddress"></el-input> + </el-form-item> + <el-form-item label="鎴风睄鎵�鍦ㄥ湴:"> + <el-input disabled v-model="partyInfo.registerAddress"></el-input> + </el-form-item> + </el-form> + </div> + <div class="scene-item" v-if="active === 3"> + <el-form + ref="writ" + label-position="right" + label-width="120px" + :model="writ" + > + <el-form-item label="绫诲瀷:"> + <el-input + type="textarea" + :rows="5" + disabled + v-model="type" + ></el-input> + </el-form-item> + </el-form> + </div> + </div> </template> <script> +import { FILE_ORIGINAL_URL } from "@/utils"; export default { - data() { - return { - active: 1, - list: [ - { - index: 1, - label: '鍒拌揪鐜板満鎯呭喌' - }, - { - index: 2, - label: '璋冩煡鍙栬瘉' - }, - { - index: 3, - label: '鍛婄煡杩濇硶' - } - ], - mybaseCase: {}, - arrivalSituation: {}, - investigation: {}, - writ: {}, - partyInfo: {} + data() { + return { + active: 1, + list: [ + { + index: 1, + label: "鍒拌揪鐜板満鎯呭喌", + }, + { + index: 2, + label: "璋冩煡鍙栬瘉", + }, + { + index: 3, + label: "鍛婄煡杩濇硶", + }, + ], + mybaseCase: {}, + arrivalSituation: {}, + investigation: {}, + writ: {}, + partyInfo: {}, + type: null, + }; + }, + props: ["currentSitVo", "baseCase"], + created() { + const { + currentSitVo: { arrivalSituation: mylist, investigation: invesList }, + baseCase, + } = this; + if (invesList) { + if (invesList) { + this.investigation = invesList; + this.investigation.pic = []; + if (invesList.pic) { + invesList.pic.forEach((o) => { + o = o.replace("[", "").replace("]", ""); + this.investigation.pic.push( + `${FILE_ORIGINAL_URL}sccg/API/img?fileUrl=${o}` + ); + }); } - }, - props: ['currentSitVo', 'baseCase'], - created() { - const { currentSitVo: { arrivalSituation: mylist, investigation: invesList }, baseCase } = this; - if (invesList) { - const { partyInfo } = invesList; - if (invesList) { - this.investigation = invesList; - } - if (partyInfo) { - this.partyInfo = partyInfo; - } - } - if (mylist) { - this.arrivalSituation = mylist; - } - this.mybaseCase = baseCase; - console.log(baseCase); - console.log(this.currentSitVo); - }, - methods: { - changeActive(idx) { - this.active = idx; - } + this.partyInfo = invesList.partyInfo; + } } -} + if (mylist) { + this.arrivalSituation = mylist; + if (mylist.situationPic) { + if (typeof mylist.situationPic == "string") { + let urls = mylist.situationPic.split(","); + this.arrivalSituation.situationPic = []; + urls.forEach((o) => { + o = o.replace("[", "").replace("]", ""); + this.arrivalSituation.situationPic.push( + `${FILE_ORIGINAL_URL}sccg/API/img?fileUrl=${o}` + ); + }); + } + } else { + this.arrivalSituation.situationPic = []; + } + } + this.mybaseCase = baseCase; + if (baseCase.violationsVO) { + this.type = baseCase.violationsVO.typeText; + } else { + this.type = baseCase.illegalBuilding.categoryText; + } + }, + methods: { + changeActive(idx) { + this.active = idx; + }, + }, +}; </script> <style lang="scss" scoped> .scene { - .nav { - padding: 20px 100px; - display: flex; - justify-content: space-between; + .nav { + padding: 20px 100px; + display: flex; + justify-content: space-between; - .nav-item { - display: flex; - flex-direction: column; - align-items: center; - } - - .outer { - width: 50px; - height: 50px; - border-radius: 50%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - background-color: #0101ff; - } - - .inner { - background-color: #0101ff; - border-radius: 50%; - width: 30px; - height: 30px; - } - - .innet-title { - line-height: 20px; - padding-top: 20px; - } - - .inner-active { - background-color: #fff; - } + .nav-item { + display: flex; + flex-direction: column; + align-items: center; } - .scene-item { - padding: 20px 100px; + .outer { + width: 50px; + height: 50px; + border-radius: 50%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #0101ff; + } - ::v-deep .el-input__inner { - background-color: #09152f; - border: 1px solid #17324c; - } + .inner { + background-color: #0101ff; + border-radius: 50%; + width: 30px; + height: 30px; } - .img{ - width: 60px; - height:60px; + + .innet-title { + line-height: 20px; + padding-top: 20px; } - .inves-item { - display: flex; + + .inner-active { + background-color: #fff; } + } + + .scene-item { + padding: 20px 0px; + + ::v-deep .el-input__inner { + // background-color: #09152f; + // border: 1px solid #17324c; + } + } + + .img { + width: 60px; + height: 60px; + margin-left: 5px; + } + + .flex { + display: flex; + } + + .inves-item { + display: flex; + } } </style> \ No newline at end of file -- Gitblit v1.8.0