From e1aa0ecffbabd618c71e4ad94370fb8dffe6ee1c Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期日, 21 一月 2024 20:54:49 +0800
Subject: [PATCH] 优化
---
src/components/scene/index.vue | 543 ++++++++++++++++++++++++++---------------------------
1 files changed, 269 insertions(+), 274 deletions(-)
diff --git a/src/components/scene/index.vue b/src/components/scene/index.vue
index 876a5ca..f415460 100644
--- a/src/components/scene/index.vue
+++ b/src/components/scene/index.vue
@@ -1,7 +1,7 @@
<template>
- <div class="scene">
- <div class="nav">
- <div
+ <div class="scene">
+ <div class="nav">
+ <!-- <div
class="nav-item"
v-for="o in list"
:key="o.index"
@@ -13,298 +13,293 @@
></div>
</div>
<div class="innet-title">{{ o.label }}</div>
- </div>
+ </div> -->
+ <el-steps>
+ <el-step
+ title="鍒拌揪鐜板満"
+ @click.native="changeActive(1)"
+ :status="active == 1 ? 'finish' : 'process'"
+ icon="el-icon-place"
+ ></el-step>
+ <el-step
+ title="璋冩煡鍙栬瘉"
+ @click.native="changeActive(2)"
+ :status="active == 2 ? 'finish' : 'process'"
+ icon="el-icon-camera"
+ ></el-step>
+ <el-step
+ title="鍛婄煡杩濇硶"
+ @click.native="changeActive(3)"
+ :status="active == 3 ? 'finish' : 'process'"
+ icon="el-icon-document"
+ ></el-step>
+ </el-steps>
+ </div>
+ <div class="scene-item two-clumn" v-if="active === 1">
+ <el-descriptions style="width: 50%" :column="1">
+ <el-descriptions-item label="鍒拌揪鏃堕棿">{{
+ arrivalSituation.arrivalTime
+ }}</el-descriptions-item>
+ <el-descriptions-item label="鍒拌揪鍦板潃">{{
+ arrivalSituation.arrivalAddress
+ }}</el-descriptions-item>
+ <el-descriptions-item label="鐜板満鎯呭喌璇存槑">{{
+ arrivalSituation.situationExplain
+ }}</el-descriptions-item>
+ <el-descriptions-item label="淇¤鍥炲璇存槑">{{
+ arrivalSituation.replyExplain
+ }}</el-descriptions-item>
+ </el-descriptions>
+ <div class="div-right">
+ <div style="margin-bottom: 20px">鐜板満鎯呭喌鐓х墖:</div>
+ <div class="flex">
+ <template v-for="item in arrivalSituation.situationPic">
+ <img
+ class="img"
+ :src="item"
+ alt=""
+ v-if="investigation.pic"
+ />
+ </template>
+ </div>
+ </div>
+ </div>
+ <div class="scene-item" v-if="active === 2">
+ <div class="two-clumn">
+ <el-descriptions style="width: 50%" :column="1">
+ <el-descriptions-item label="鎵垮姙闃熷憳">{{
+ investigation.undertaker
+ }}</el-descriptions-item>
+ <el-descriptions-item label="鍗忓姙闃熷憳">{{
+ investigation.assistant
+ }}</el-descriptions-item>
+ <el-descriptions-item label="鏃堕棿">{{
+ investigation.investigationTime
+ }}</el-descriptions-item>
+ <el-descriptions-item label="鍦板潃">{{
+ investigation.address
+ }}</el-descriptions-item>
+ <el-descriptions-item label="妗堢敱">{{
+ investigation.caseAction
+ }}</el-descriptions-item>
+ <el-descriptions-item label="澶勭疆缁撴灉">{{
+ investigation.description
+ }}</el-descriptions-item>
+ </el-descriptions>
+ <div class="div-right">
+ <div style="margin-bottom: 20px">鐓х墖闄勪欢:</div>
+ <div class="flex">
+ <template v-for="item in investigation.pic">
+ <img
+ class="img"
+ :src="item"
+ alt=""
+ v-if="investigation.pic"
+ />
+ </template>
+ </div>
+ </div>
+ </div>
+ <div class="inves-item">褰撲簨浜轰俊鎭�</div>
+ <el-descriptions :column="2">
+ <el-descriptions-item label="濮撳悕">{{
+ partyInfo.name
+ }}</el-descriptions-item>
+ <el-descriptions-item label="鎵嬫満鍙风爜">{{
+ partyInfo.phoneCode
+ }}</el-descriptions-item>
+ <el-descriptions-item label="璇佷欢绫诲瀷">{{
+ partyInfo.certificateTypeText
+ }}</el-descriptions-item>
+ <el-descriptions-item label="璇佷欢鍙风爜">{{
+ partyInfo.certificateCode
+ }}</el-descriptions-item>
+ <el-descriptions-item label="鏂囧寲绋嬪害">{{
+ partyInfo.educationDegreeText
+ }}</el-descriptions-item>
+ <el-descriptions-item label="鑱屼笟">{{
+ partyInfo.career
+ }}</el-descriptions-item>
+ <el-descriptions-item label="宸ヤ綔鍗曚綅鍙婅亴鍔�">{{
+ partyInfo.work
+ }}</el-descriptions-item>
+ <el-descriptions-item label="姘戞棌">{{
+ partyInfo.nationText
+ }}</el-descriptions-item>
+ <el-descriptions-item label="绫嶈疮">{{
+ partyInfo.nativePlace
+ }}</el-descriptions-item>
+ <el-descriptions-item label="鐜颁綇鍧�">{{
+ partyInfo.liveAddress
+ }}</el-descriptions-item>
+ <el-descriptions-item label="鎴风睄鎵�鍦ㄥ湴">{{
+ partyInfo.registerAddress
+ }}</el-descriptions-item>
+ </el-descriptions>
+ </div>
+ <div class="scene-item" v-if="active === 3">
+ <el-descriptions :column="2">
+ <el-descriptions-item label="绫诲瀷">{{
+ type
+ }}</el-descriptions-item>
+ </el-descriptions>
+ </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: {},
- 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}`
- );
- });
- }
- 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;
+ 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}`
+ );
+ });
+ }
+ 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;
+ margin-top: 20px;
+ line-height: 1;
+ .nav {
+ padding: 20px 100px;
+ // display: flex;
+ // justify-content: space-between;
- .nav-item {
- display: flex;
- flex-direction: column;
- align-items: center;
+ .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;
+ }
}
- .outer {
- width: 50px;
- height: 50px;
- border-radius: 50%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- background-color: #0101ff;
+ .two-clumn {
+ display: flex;
}
- .inner {
- background-color: #0101ff;
- border-radius: 50%;
- width: 30px;
- height: 30px;
+ .scene-item {
+ padding: 20px 0px;
+
+ ::v-deep .el-input__inner {
+ // background-color: #09152f;
+ // border: 1px solid #17324c;
+ }
}
- .innet-title {
- line-height: 20px;
- padding-top: 20px;
+ .img {
+ width: 120px;
+ height: 120px;
+ margin-left: 5px;
}
- .inner-active {
- background-color: #fff;
+ .flex {
+ display: flex;
}
- }
- .scene-item {
- padding: 20px 0px;
-
- ::v-deep .el-input__inner {
- // background-color: #09152f;
- // border: 1px solid #17324c;
+ .inves-item {
+ font-size: 16px;
+ font-weight: 600;
+ margin-bottom: 10px;
}
- }
-
- .img {
- width: 60px;
- height: 60px;
- margin-left: 5px;
- }
-
- .flex {
- display: flex;
- }
-
- .inves-item {
- display: flex;
- }
+ .div-right {
+ margin-right: auto;
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0