优化

zhanghua

2024-01-21 e1aa0ecffbabd618c71e4ad94370fb8dffe6ee1c

优化

 src/components/detail/index.vue

@@ -1,151 +1,112 @@
<template>
  <div class="view">
    <div class="view-data">
      <div class="data-item">
        <div class="data-item__left">
          <label class="data-title"> 问题类型：</label>
          <span class="data-detail">{{
            getCategoryLabel(baseCase.category)
          }}</span>
    <div class="view">
        <div class="view-data">
            <el-descriptions class="margin-top" :column="2"  border>
                <el-descriptions-item label="问题类型">{{
                    getCategoryLabel(baseCase.category)
                }}</el-descriptions-item>

                <el-descriptions-item label="事发地点">{{
                    baseCase.site
                }}</el-descriptions-item>

                <el-descriptions-item label="大类名称"
                    ><span class="data-detail">{{
                        baseCase.violationsVO.categoryText
                    }}</span></el-descriptions-item
                >
                <el-descriptions-item label="商铺名称"
                    ><span class="data-detail">{{
                        baseCase.violationsVO.shopName
                    }}</span></el-descriptions-item
                >
                <el-descriptions-item label="小类名称"
                    ><span class="data-detail">{{
                        baseCase.violationsVO.typeText
                    }}</span></el-descriptions-item
                >

                <el-descriptions-item label="反映人"
                    ><span class="data-detail">{{
                        baseCase.violationsVO.informant
                    }}</span></el-descriptions-item
                >
                <el-descriptions-item label="事件等级"
                    ><span class="data-detail">{{
                        baseCase.violationsVO.gradeText
                    }}</span></el-descriptions-item
                >
                <el-descriptions-item label="联系方式"
                    ><span class="data-detail">{{
                        baseCase.violationsVO.informantPhoneCode
                    }}</span></el-descriptions-item
                >

                <el-descriptions-item label="案由"
                    ><span class="data-detail">{{
                        baseCase.violationsVO.actionCause
                    }}</span></el-descriptions-item
                >

                <el-descriptions-item label="身份证号"
                    ><span class="data-detail">{{
                        baseCase.violationsVO.informantIdCard
                    }}</span></el-descriptions-item
                >
                <el-descriptions-item label="所属街道"
                    ><span class="data-detail">{{
                        baseCase.streetText
                    }}</span></el-descriptions-item
                >
                <el-descriptions-item label="所属社区"
                    ><span class="data-detail">{{
                        baseCase.communityText
                    }}</span></el-descriptions-item
                >
                <el-descriptions-item label="问题描述"
                    ><span class="data-detail">{{
                        baseCase.violationsVO.description
                    }}</span></el-descriptions-item
                >
            </el-descriptions>
        </div>
      </div>
      <div class="data-item">
        <div class="data-item__left">
          <label class="data-title"> 大类名称：</label>
          <span class="data-detail">{{
            baseCase.violationsVO.categoryText
          }}</span>
        <div class="view-process">
            <div class="process-header">
                <el-button
                    :type="activeIndex === item.index ? 'primary' : ''"
                    v-for="item in titleList"
                    :key="item.title"
                    @click="changeComponent(item.index)"
                >
                    {{ item.title }}</el-button
                >
            </div>
            <div class="show-item">
                <div class="show-wrap">
                    <MyProcess
                        v-if="activeIndex === 1"
                        :handlePassVo="handlePassVo"
                        :baseCase="baseCase"
                    ></MyProcess>
                    <MyFilePicture
                        v-else-if="activeIndex === 2"
                        :filesPictureVo="filesPictureVo"
                        :mycode="mycode"
                    ></MyFilePicture>
                    <MySovleProblem
                        v-else-if="activeIndex === 3"
                        :baseCase="baseCase"
                        :handlePassVo="handlePassVo"
                    ></MySovleProblem>
                    <MyScene
                        v-else
                        :currentSitVo="currentSitVo"
                        :baseCase="baseCase"
                    ></MyScene>
                </div>
            </div>
        </div>
      </div>
      <div class="data-item">
        <div class="data-item__left">
          <label class="data-title"> 小类名称：</label>
          <span class="data-detail">{{ baseCase.violationsVO.typeText }}</span>
        </div>
      </div>
      <div class="data-item">
        <div class="data-item__left">
          <label class="data-title"> 事件等级：</label>
          <span class="data-detail">{{ baseCase.violationsVO.gradeText }}</span>
        </div>
      </div>
      <div class="data-item">
        <div class="data-item__left">
          <label class="data-title"> 案由：</label>
          <span class="data-detail">{{
            baseCase.violationsVO.actionCause
          }}</span>
        </div>
      </div>
      <div class="data-item">
        <div class="data-item__left">
          <label class="data-title"> 所属街道：</label>
          <span class="data-detail">{{ baseCase.streetText }}</span>
        </div>
      </div>
      <div class="data-item">
        <div class="data-item__left">
          <label class="data-title"> 所属社区：</label>
          <span class="data-detail">{{ baseCase.communityText }}</span>
        </div>
      </div>
      <div class="data-item">
        <div class="data-item__left">
          <label class="data-title"> 事发地点：</label>
          <span class="data-detail">{{ baseCase.site }}</span>
        </div>
      </div>
      <div class="data-item">
        <div class="data-item__left">
          <label class="data-title"> 商铺名称：</label>
          <span class="data-detail">{{ baseCase.violationsVO.shopName }}</span>
        </div>
      </div>
      <div class="data-item">
        <div class="data-item__left">
          <label class="data-title"> 问题描述：</label>
          <span class="data-detail">{{
            baseCase.violationsVO.description
          }}</span>
        </div>
      </div>
      <div class="data-user">
        <div class="data-item">
          <div class="data-item__left">
            <label class="data-title"> 反映人：</label>
            <span class="data-detail">{{
              baseCase.violationsVO.informant
            }}</span>
          </div>
        </div>
        <div class="data-item">
          <div class="data-item__right">
            <label class="data-title"> 联系方式：</label>
            <span class="data-detail">{{
              baseCase.violationsVO.informantPhoneCode
            }}</span>
          </div>
        </div>
        <div class="data-item">
          <div class="data-item__left">
            <label class="data-title"> 身份证号：</label>
            <span class="data-detail">{{
              baseCase.violationsVO.informantIdCard
            }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="view-process">
      <div class="process-header">
        <div
          class="process-title-item"
          v-for="item in titleList"
          :key="item.title"
          @click="changeComponent(item.index)"
        >
          <div
            :class="[
              'process-title',
              activeIndex === item.index ? 'title-active' : '',
            ]"
          >
            {{ item.title }}
          </div>
          <div
            :class="[
              'under-line',
              activeIndex === item.index ? 'line-active' : '',
            ]"
          ></div>
        </div>
      </div>
      <div class="show-item">
        <div class="show-wrap">
          <MyProcess
            v-if="activeIndex === 1"
            :handlePassVo="handlePassVo"
            :baseCase="baseCase"
          ></MyProcess>
          <MyFilePicture
            v-else-if="activeIndex === 2"
            :filesPictureVo="filesPictureVo"
            :mycode="mycode"
          ></MyFilePicture>
          <MySovleProblem
            v-else-if="activeIndex === 3"
            :baseCase="baseCase"
            :handlePassVo="handlePassVo"
          ></MySovleProblem>
          <MyScene
            v-else
            :currentSitVo="currentSitVo"
            :baseCase="baseCase"
          ></MyScene>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import MyProcess from "@/components/process";
@@ -155,130 +116,131 @@
import { CATEGOTY } from "@/utils/helper";

export default {
  components: {
    MyProcess,
    MyFilePicture,
    MySovleProblem,
    MyScene,
  },
  data() {
    return {
      myInfo: {},
      activeIndex: 1,
      titleList: [
        {
          title: "办理经过",
          index: 1,
        },
        {
          title: "案卷图片",
          index: 2,
        },
        {
          title: "问题处理",
          index: 3,
        },
        {
          title: "现场情况",
          index: 4,
        },
      ],
      baseCase: {},
      handlePassVo: {},
      currentSitVo: {},
      filesPictureVo: {},
    };
  },
  created() {
    this.baseCase = this.info.baseCase;
    this.handlePassVo = this.info.handlePassVo;
    this.currentSitVo = this.info.currentSitVo;
    this.filesPictureVo = this.info.filesPictureVo;
  },
  methods: {
    changeComponent(index) {
      this.activeIndex = index;
    components: {
        MyProcess,
        MyFilePicture,
        MySovleProblem,
        MyScene,
    },
    getCategoryLabel(category) {
      return CATEGOTY.find((item) => item.value === category).label;
    data() {
        return {
            myInfo: {},
            activeIndex: 1,
            titleList: [
                {
                    title: "办理经过",
                    index: 1,
                },
                {
                    title: "案卷图片",
                    index: 2,
                },
                {
                    title: "问题处理",
                    index: 3,
                },
                {
                    title: "现场情况",
                    index: 4,
                },
            ],
            baseCase: {},
            handlePassVo: {},
            currentSitVo: {},
            filesPictureVo: {},
        };
    },
  },
  props: ["info", "mycode"],
    created() {
        this.baseCase = this.info.baseCase;
        this.handlePassVo = this.info.handlePassVo;
        this.currentSitVo = this.info.currentSitVo;
        this.filesPictureVo = this.info.filesPictureVo;
    },
    methods: {
        changeComponent(index) {
            this.activeIndex = index;
        },
        getCategoryLabel(category) {
            return CATEGOTY.find((item) => item.value === category).label;
        },
    },
    props: ["info", "mycode"],
};
</script>
<style lang="scss" scoped>
.view {
  display: flex;
  padding: 20px;
    // display: flex;
    padding: 20px;

  .view-data {
    color: #4b9bb7;
    // flex: 4;
    padding: 0 30px 0 20px;
    width: 480px;
    .data-item {
      display: flex;
      justify-content: space-between;
      line-height: 40px;
    }

    border: 1px solid #17324c;
    .data-title {
      line-height: 1.8;
      width: 70px;
      text-align: right;
      display: inline-grid;
    }
    .data-detail {
      line-height: 1.8;
      max-width: 240px;
      display: inline-grid;
      color: #333;

      width: calc(100% - 70px) !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: normal !important;
    }
  }

  .view-process {
    flex: 6;
    margin-left: 20px;

    .process-header {
      display: flex;
      line-height: 40px;

      .process-title-item {
        width: 120px;
        text-align: center;

        .under-line {
          height: 2px;
          width: 100%;
    .view-data {
        color: #4b9bb7;
        // flex: 4;
        padding: 0 30px 0 20px;
        // width: 480px;
        .data-item {
            display: flex;
            justify-content: space-between;
            line-height: 40px;
        }

        .title-active {
          color: #4b9bb7;
        // border: 2px solid #ccc;
        border-radius: 5px;
        .data-title {
            line-height: 1.8;
            width: 70px;
            text-align: right;
            display: inline-grid;
        }
        .data-detail {
            line-height: 1.8;
            max-width: 240px;
            display: inline-grid;
            color: #333;

        .line-active {
          background-color: #4b9bb7;
          border-radius: 20px;
            width: calc(100% - 70px) !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: normal !important;
        }
      }
    }

    .show-item {
      overflow: hidden;
      height: 600px;
      position: relative;
      .show-wrap {
        overflow: auto;
        height: 600px;
      }
    .view-process {
        flex: 6;
        margin: 20px 0px 0px 20px;

        .process-header {
            display: flex;
            line-height: 40px;

            .process-title-item {
                width: 120px;
                text-align: center;

                .under-line {
                    height: 2px;
                    width: 100%;
                }

                .title-active {
                    color: #4b9bb7;
                }

                .line-active {
                    background-color: #4b9bb7;
                    border-radius: 20px;
                }
            }
        }

        .show-item {
            overflow: hidden;
            height: 600px;
            position: relative;
            .show-wrap {
                overflow: auto;
                height: 600px;
            }
        }
    }
  }
}
</style>

 src/components/process/index.vue

@@ -1,15 +1,32 @@
<template>
  <div class="my-process">
    <div class="my-pro-header">
      <el-steps :space="260" :active="active" finish-status="success">
        <el-step
          v-for="item in list"
          :title="item.name"
          :key="item.title"
        ></el-step>
      </el-steps>
    </div>
    <div class="my-pro-main">
    <div class="my-process">
        <div class="my-pro-header">
            <el-steps
                :space="260"
                :active="active"
                align-center
            >
                <el-step
                    v-for="item in list"
                    :title="item.name"
                    :key="item.title"
                >
                    <template slot="description">
                        <div>环节用时：</div>
                        <div>
                            <i class="el-icon-time"></i>
                            {{
                                item.disposeRecords.length !== 0
                                    ? item.disposeRecords[0].linkTime
                                    : ''
                            }}
                            <!-- <span>day</span> -->
                        </div>
                    </template>
                </el-step>
            </el-steps>
        </div>
        <!-- <div class="my-pro-main">
      <div class="pro-step-ver" v-for="(item, index) in list" :key="item.title">
        <div
          :class="[
@@ -72,136 +89,153 @@
          </div>
        </div>
      </div>
    </div> -->
    </div>
  </div>
</template>
<script>
import helper from "@/utils/mydate";
export default {
  data() {
    return {
      active: 0,
      list: [],
    };
  },
  props: ["handlePassVo", "baseCase"],
  created() {
    const {
      handlePassVo: { workflowConfigSteps: mylist },
      baseCase: { state: mystate },
    } = this;
    if (mystate === 6) {
      this.active = 1;
    } else if (mystate === 7) {
      this.active = 2;
    } else if (mystate === 8) {
      this.active = 3;
    } else if (mystate === 9) {
      this.active = 4;
    } else {
      this.active = 0;
    }
    this.list = mylist;
  },
  methods: {
    filterTime(time) {
      if (time) {
        return helper(time);
      }
      return;
    data() {
        return {
            active: 0,
            list: [],
        };
    },
  },
    props: ["handlePassVo", "baseCase"],
    created() {
        const {
            handlePassVo: { workflowConfigSteps: mylist },
            baseCase: { state: mystate },
        } = this;
        if (mystate === 6) {
            this.active = 1;
        } else if (mystate === 7) {
            this.active = 2;
        } else if (mystate === 8) {
            this.active = 3;
        } else if (mystate === 9) {
            this.active = 4;
        } else {
            this.active = 0;
        }
        this.list = mylist;
    },
    methods: {
        filterTime(time) {
            if (time) {
                return helper(time);
            }
            return;
        },
    },
};
</script>
<style lang="scss" scoped>
// ::v-deep .el-step.is-horizontal .el-step__line {
//     border-top: 2px dashed #ccd1de;
//     height: 0;
//     background-color: transparent;
// }
::v-deep .el-step__title {
    font-size: 20px;
    padding: 10px 0;
}
::v-deep .el-step__title.is-process {
    color: #5388f1;
}

::v-deep .el-step__description{
    font-size: 14px;
}

.my-process {
  padding-top: 50px;
  .my-pro-header {
    padding: 0 30px;
    line-height: 1;
    padding-top: 50px;
    .my-pro-header {
        padding: 0 30px;
        line-height: 1;

    .pro-step {
      flex: 1;
        .pro-step {
            flex: 1;

      .pro-step-top {
        display: flex;
        align-items: center;
            .pro-step-top {
                display: flex;
                align-items: center;

        .line {
          flex: 1;
          height: 2px;
                .line {
                    flex: 1;
                    height: 2px;
                }
            }

            .pro-step-name {
                line-height: 20px;
            }
        }
      }
    }

      .pro-step-name {
        line-height: 20px;
      }
    .my-pro-main {
        margin-top: 30px;
        margin-left: -50px;
        .pro-step-ver {
            display: flex;
            align-items: flex-start;
            .line {
                width: 2px;
                height: 100px;
            }
        }
        .pro-step-top {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .pro-step-name {
            width: 120px;
            line-height: 24px;
            margin-right: 10px;
            text-align: right;
        }
        .desc {
            flex: 1;
            line-height: 24px;
            margin-left: 10px;
            // color: #4b9bb7;
            .desc-content-endtime {
                display: flex;
                justify-content: flex-end;
                padding-right: 50px;
            }
        }
    }
  }

  .my-pro-main {
    margin-top: 30px;
    margin-left: -50px;
    .pro-step-ver {
      display: flex;
      align-items: flex-start;
      .line {
        width: 2px;
        height: 100px;
      }
    .circle {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: #fff;
        border: 2px solid #808080;
    }
    .pro-step-top {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .pro-step-name {
      width: 120px;
      line-height: 24px;
      margin-right: 10px;
      text-align: right;
    }
    .desc {
      flex: 1;
      line-height: 24px;
      margin-left: 10px;
      // color: #4b9bb7;
      .desc-content-endtime {
        display: flex;
        justify-content: flex-end;
        padding-right: 50px;
      }
    }
  }

  .circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid #808080;
  }

  .line {
    background-color: #c0c4cc;
  }
  .in-process {
    color: #0079fe;
  }
  .in-process__circle {
    border: 2px solid #0079fe;
  }
  .finish-line {
    background-color: #0079fe;
  }
  .finish {
    border: 2px solid #4b9bb7;
  }
  .finish-name {
    color: #4b9bb7;
  }
  .desc-content-message {
    color: #666;
  }
    .line {
        background-color: #c0c4cc;
    }
    .in-process {
        color: #0079fe;
    }
    .in-process__circle {
        border: 2px solid #0079fe;
    }
    .finish-line {
        background-color: #0079fe;
    }
    .finish {
        border: 2px solid #4b9bb7;
    }
    .finish-name {
        color: #4b9bb7;
    }
    .desc-content-message {
        color: #666;
    }
}
</style>

 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>

 src/components/solveProblem/index.vue

@@ -1,11 +1,42 @@
<template>
    <div class="sovle-problem">
        <div class="sovle-header">
            <div class="sovle-limit">处理时限:{{dispatchInfo.disposeDate}}</div>
            <div class="sovle-limit">剩余时间:{{getRestTime(dispatchInfo.disposeDate)}}</div>
            <div class="sovle-limit">
                处理时间:{{ dispatchInfo.createTime }}
            </div>
            <div class="sovle-limit">
                剩余时间:{{ getRestTime(dispatchInfo.disposeDate) || '未限制' }}
            </div>
        </div>
        <div class="sovle-timeline">
            <el-timeline >
        <div class="my-process">
            <div class="my-pro-header">
                <el-steps :space="260" :active="active" align-center>
                    <el-step v-for="item in list" :key="item.name">
                        <template slot="title">
                            <div>
                                【{{ item.name }}】
                                {{
                                    item.disposeRecords &&
                                    item.disposeRecords.length != 0
                                        ? item.disposeRecords[0].handlerText
                                        : ''
                                }}
                            </div>
                        </template>
                        <template slot="description">
                            <div>
                                {{
                                    item.disposeRecords &&
                                    item.disposeRecords.length != 0
                                        ? item.disposeRecords[0].result
                                        : ''
                                }}
                            </div>
                        </template>
                    </el-step>
                </el-steps>

                <!-- <el-timeline >
                <el-timeline-item :color="mycolor" v-for="item in list" :key="item.id">
                    <div class="title">
                        <div class="title-left">【{{item.name}}】处理人: {{item.disposeRecords && item.disposeRecords.length
@@ -17,7 +48,8 @@
                    </div>
                    <div class="message">{{filterPerson(item.name)}} {{item.disposeRecords && item.disposeRecords.length !=0 ? item.disposeRecords[0].result:''}}</div>
                </el-timeline-item>
            </el-timeline>
            </el-timeline> -->
            </div>
        </div>
    </div>
</template> 
@@ -27,6 +59,7 @@
export default {
    data() {
        return {
            active: 0,
            mycolor: '#02a7f0',
            list: [],
            dispatchInfo: {},
@@ -42,18 +75,30 @@
        if (baseCase.dispatchInfo) {
            this.dispatchInfo = baseCase.dispatchInfo;
        }
        debugger
        if (baseCase.state === 6) {
            this.active = 1;
        } else if (baseCase.state === 7) {
            this.active = 2;
        } else if (baseCase.state === 8) {
            this.active = 3;
        } else if (baseCase.state === 9) {
            this.active = 4;
        } else {
            this.active = 0;
        }
    },
    methods: {
        // 获得意见
        filterPerson(name) {
            const { dispatchInfo } = this;
            if (name === '调度') {
                return '【派遣意见】' 
                return '【派遣意见】'
            } else if (name === '处理') {
                return '【处理结果】'
            }else if (name === '核查') {
            } else if (name === '核查') {
                return '【核查结果】'
            }  else if (name === '结案') {
            } else if (name === '结案') {
                return '【评定结果】'
            }
            return
@@ -79,6 +124,7 @@
</script>
<style lang="scss" scoped>
.sovle-problem {
    padding-top: 20px;
    .sovle-header {
        padding: 0 40px;
        display: flex;
@@ -102,4 +148,105 @@
        font-size: 12px;
    }
}
.my-process {
    padding-top: 20px;
    .my-pro-header {
        padding: 0 30px;
        line-height: 1;

        .pro-step {
            flex: 1;

            .pro-step-top {
                display: flex;
                align-items: center;

                .line {
                    flex: 1;
                    height: 2px;
                }
            }

            .pro-step-name {
                line-height: 20px;
            }
        }
        ::v-deep .el-step__title {
            font-size: 18px;
            padding: 10px 0;
        }
        ::v-deep .el-step__title.is-process {
            color: #5388f1;
        }

        ::v-deep .el-step__description {
            font-size: 14px;
        }
    }

    .my-pro-main {
        margin-top: 30px;
        margin-left: -50px;
        .pro-step-ver {
            display: flex;
            align-items: flex-start;
            .line {
                width: 2px;
                height: 100px;
            }
        }
        .pro-step-top {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .pro-step-name {
            width: 120px;
            line-height: 24px;
            margin-right: 10px;
            text-align: right;
        }
        .desc {
            flex: 1;
            line-height: 24px;
            margin-left: 10px;
            // color: #4b9bb7;
            .desc-content-endtime {
                display: flex;
                justify-content: flex-end;
                padding-right: 50px;
            }
        }
    }

    .circle {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: #fff;
        border: 2px solid #808080;
    }

    .line {
        background-color: #c0c4cc;
    }
    .in-process {
        color: #0079fe;
    }
    .in-process__circle {
        border: 2px solid #0079fe;
    }
    .finish-line {
        background-color: #0079fe;
    }
    .finish {
        border: 2px solid #4b9bb7;
    }
    .finish-name {
        color: #4b9bb7;
    }
    .desc-content-message {
        color: #666;
    }
}
</style>

 src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/evidence/index.vue

@@ -422,7 +422,7 @@
    position: absolute;
    top: 0;
    z-index: 3000;
    background-color: #06122c;
    background-color: #fff;

    .user-form-header {
        background-color: #fff;

 src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/vio/index.vue

@@ -46,8 +46,8 @@
                          const arrivalSituationId = arriveData.id;
                          const investigationId = evidenceData.id;
                          const partyInfoId = this.evidenceData ? partyInfo.id : null;
                          const evidencePic = evidenceData.pic.join(',');
                          const situationPic = arriveData.situationPic.join(',');
                          const evidencePic = evidenceData.pic;//.join(',');
                          const situationPic = arriveData.situationPic;//.join(',');
                          delete evidenceData.id;
                          delete evidenceData.partyInfo;
                          delete evidenceData.userInfo;

 src/views/operate/disposal/casepool/learn/updateUser/uploadResult/components/evidence/index.vue

@@ -536,7 +536,7 @@
    position: absolute;
    top: 0;
    z-index: 3000;
    background-color: #06122c;
    background-color: #fff;
    .user-form-header{
        background-color: #fff;
        color: #4b9bb7;

 src/views/operate/disposal/casepool/notDeal/updateUser/uploadResult/components/evidence/index.vue

@@ -536,7 +536,7 @@
    position: absolute;
    top: 0;
    z-index: 3000;
    background-color: #06122c;
    background-color: #FFF;
    .user-form-header{
        background-color: #fff;
        color: #4b9bb7;

 src/views/operate/disposal/casepool/pool/index.vue

@@ -653,7 +653,7 @@
                    value = '待处理'
                    break;
                case 1:
                    value = '误报'
                    value = '再学习 / 再训练'
                    break;
                case 2:
                    value = '上报'

 vue.config.js

@@ -40,7 +40,7 @@
      // 跨域配置
      "/sccg": {
        // target: `http://42.193.1.25/`,      //测试环境
        // target: `http://111.1.140.92:8082/`,
        // target: `http://111.1.140.92:28081/`,
        target: `http://10.88.10.18:8082/`,
        changeOrigin: true
      }