添加时间筛选

zhanghua

2025-07-16 7c20fd15b7fbc2bd5756b39d5ab655cc849ffcc3

 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>