优化

zhanghua

2024-01-21 e1aa0ecffbabd618c71e4ad94370fb8dffe6ee1c

 src/components/scene/index.vue

@@ -1,7 +1,7 @@
<template>
  <div class="scene">
    <div class="nav">
      <div
            <!--    <div
        class="nav-item"
        v-for="o in list"
        :key="o.index"
@@ -13,153 +13,136 @@
          ></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>
    <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="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" />
                        <img
                            class="img"
                            :src="item"
                            alt=""
                            v-if="investigation.pic"
                        />
            </template>
          </div>
        </el-form-item>
      </el-form>
            </div>
    </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-form-item>
                </div>
            </div>
        <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>
            <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>
@@ -225,6 +208,7 @@
            );
          });
        }

      } else {
        this.arrivalSituation.situationPic = [];
      }
@@ -245,10 +229,12 @@
</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;
@@ -264,7 +250,7 @@
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #0101ff;
            // background-color: #0101ff;
    }

    .inner {
@@ -284,6 +270,10 @@
    }
  }

    .two-clumn {
        display: flex;
    }

  .scene-item {
    padding: 20px 0px;

@@ -294,8 +284,8 @@
  }

  .img {
    width: 60px;
    height: 60px;
        width: 120px;
        height: 120px;
    margin-left: 5px;
  }

@@ -304,7 +294,12 @@
  }

  .inves-item {
    display: flex;
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 10px;
    }
    .div-right {
        margin-right: auto;
  }
}
</style>