From 7c20fd15b7fbc2bd5756b39d5ab655cc849ffcc3 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期三, 16 七月 2025 22:39:23 +0800
Subject: [PATCH] 添加时间筛选
---
src/components/scene/index.vue | 319 ++++++++++++++++++++++++++++++++---------------------
1 files changed, 192 insertions(+), 127 deletions(-)
diff --git a/src/components/scene/index.vue b/src/components/scene/index.vue
index d29b5cc..aaea743 100644
--- a/src/components/scene/index.vue
+++ b/src/components/scene/index.vue
@@ -1,125 +1,153 @@
<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
+ 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> -->
+ <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 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="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">
+ <img
+ class="img"
+ :src="item"
+ alt=""
+ v-if="investigation.pic"
+ />
</template>
</div>
- <!-- <el-input disabled v-model="investigation.pic"></el-input> -->
- </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="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-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>
+ <el-descriptions :column="2">
+ <el-descriptions-item label="绫诲瀷">{{
+ type
+ }}</el-descriptions-item>
+ </el-descriptions>
</div>
</div>
</template>
<script>
+import { FILE_ORIGINAL_PATH } from "@/utils";
export default {
data() {
return {
@@ -127,59 +155,87 @@
list: [
{
index: 1,
- label: '鍒拌揪鐜板満鎯呭喌'
+ label: "鍒拌揪鐜板満鎯呭喌",
},
{
index: 2,
- label: '璋冩煡鍙栬瘉'
+ label: "璋冩煡鍙栬瘉",
},
{
index: 3,
- label: '鍛婄煡杩濇硶'
- }
+ label: "鍛婄煡杩濇硶",
+ },
],
mybaseCase: {},
arrivalSituation: {},
investigation: {},
writ: {},
partyInfo: {},
- type: null
- }
+ type: null,
+ };
},
- props: ['currentSitVo', 'baseCase'],
+ props: ["currentSitVo", "baseCase"],
created() {
- const { currentSitVo: { arrivalSituation: mylist, investigation: invesList }, baseCase } = this;
+ const {
+ currentSitVo: { arrivalSituation: mylist, investigation: invesList },
+ baseCase,
+ } = this;
if (invesList) {
if (invesList) {
this.investigation = invesList;
- this.investigation.pic = invesList.pic?.split(",");
+ this.investigation.pic = [];
+ if (invesList.pic) {
+ invesList.pic.forEach((o) => {
+ o = o.replace("[", "").replace("]", "");
+
+ this.investigation.pic.push(
+ FILE_ORIGINAL_PATH + o
+ );
+ });
+ }
this.partyInfo = invesList.partyInfo;
}
}
if (mylist) {
this.arrivalSituation = mylist;
- this.arrivalSituation.situationPic = mylist.situationPic.split(",")
+ 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_PATH + o
+ );
+ });
+ }
+
+ } else {
+ this.arrivalSituation.situationPic = [];
+ }
}
this.mybaseCase = baseCase;
if (baseCase.violationsVO) {
- this.type = baseCase.violationsVO.typeText;
+ this.type = baseCase.violationsVO.typeText;
} else {
- this.type = baseCase.illegalBuilding.categoryText;
+ this.type = baseCase.illegalBuilding.categoryText;
}
},
methods: {
changeActive(idx) {
this.active = idx;
- }
- }
-}
+ },
+ },
+};
</script>
<style lang="scss" scoped>
.scene {
+ margin-top: 20px;
+ line-height: 1;
.nav {
padding: 20px 100px;
- display: flex;
- justify-content: space-between;
+ // display: flex;
+ // justify-content: space-between;
.nav-item {
display: flex;
@@ -195,7 +251,7 @@
flex-direction: column;
align-items: center;
justify-content: center;
- background-color: #0101ff;
+ // background-color: #0101ff;
}
.inner {
@@ -215,18 +271,22 @@
}
}
+ .two-clumn {
+ display: flex;
+ }
+
.scene-item {
padding: 20px 0px;
::v-deep .el-input__inner {
- background-color: #09152f;
- border: 1px solid #17324c;
+ // background-color: #09152f;
+ // border: 1px solid #17324c;
}
}
.img {
- width: 60px;
- height: 60px;
+ width: 120px;
+ height: 120px;
margin-left: 5px;
}
@@ -235,7 +295,12 @@
}
.inves-item {
- display: flex;
+ font-size: 16px;
+ font-weight: 600;
+ margin-bottom: 10px;
+ }
+ .div-right {
+ margin-right: auto;
}
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0