From e1aa0ecffbabd618c71e4ad94370fb8dffe6ee1c Mon Sep 17 00:00:00 2001 From: zhanghua <314079846@qq.com> Date: 星期日, 21 一月 2024 20:54:49 +0800 Subject: [PATCH] 优化 --- src/views/operate/disposal/casepool/pool/index.vue | 2 src/components/detail/index.vue | 470 ++++++++---------- src/components/scene/index.vue | 543 ++++++++++---------- src/components/process/index.vue | 280 ++++++---- vue.config.js | 2 src/views/operate/disposal/casepool/learn/updateUser/uploadResult/components/evidence/index.vue | 2 src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/vio/index.vue | 4 src/components/solveProblem/index.vue | 163 ++++++ src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/evidence/index.vue | 2 src/views/operate/disposal/casepool/notDeal/updateUser/uploadResult/components/evidence/index.vue | 2 10 files changed, 804 insertions(+), 666 deletions(-) diff --git a/src/components/detail/index.vue b/src/components/detail/index.vue index 65dac44..d7d4b3e 100644 --- a/src/components/detail/index.vue +++ b/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> \ No newline at end of file diff --git a/src/components/process/index.vue b/src/components/process/index.vue index 376b98c..57a1383 100644 --- a/src/components/process/index.vue +++ b/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> \ No newline at end of file diff --git a/src/components/scene/index.vue b/src/components/scene/index.vue index 876a5ca..f415460 100644 --- a/src/components/scene/index.vue +++ b/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> \ No newline at end of file diff --git a/src/components/solveProblem/index.vue b/src/components/solveProblem/index.vue index 99f2fbf..39bdf53 100644 --- a/src/components/solveProblem/index.vue +++ b/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 '銆愭淳閬f剰瑙併��' + return '銆愭淳閬f剰瑙併��' } 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> \ No newline at end of file diff --git a/src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/evidence/index.vue b/src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/evidence/index.vue index b79daa5..f5ccbdb 100644 --- a/src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/evidence/index.vue +++ b/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; diff --git a/src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/vio/index.vue b/src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/vio/index.vue index b675f00..c72c8e1 100644 --- a/src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/vio/index.vue +++ b/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; diff --git a/src/views/operate/disposal/casepool/learn/updateUser/uploadResult/components/evidence/index.vue b/src/views/operate/disposal/casepool/learn/updateUser/uploadResult/components/evidence/index.vue index 5cc6e1f..f398994 100644 --- a/src/views/operate/disposal/casepool/learn/updateUser/uploadResult/components/evidence/index.vue +++ b/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; diff --git a/src/views/operate/disposal/casepool/notDeal/updateUser/uploadResult/components/evidence/index.vue b/src/views/operate/disposal/casepool/notDeal/updateUser/uploadResult/components/evidence/index.vue index 897e107..be6ec91 100644 --- a/src/views/operate/disposal/casepool/notDeal/updateUser/uploadResult/components/evidence/index.vue +++ b/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; diff --git a/src/views/operate/disposal/casepool/pool/index.vue b/src/views/operate/disposal/casepool/pool/index.vue index 3119cca..9c93699 100644 --- a/src/views/operate/disposal/casepool/pool/index.vue +++ b/src/views/operate/disposal/casepool/pool/index.vue @@ -653,7 +653,7 @@ value = '寰呭鐞�' break; case 1: - value = '璇姤' + value = '鍐嶅涔� / 鍐嶈缁�' break; case 2: value = '涓婃姤' diff --git a/vue.config.js b/vue.config.js index 1dc1c13..5671702 100644 --- a/vue.config.js +++ b/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 } -- Gitblit v1.8.0