优化

zhanghua

2024-01-21 e1aa0ecffbabd618c71e4ad94370fb8dffe6ee1c

 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>