Compare commits

...

2 Commits

6 changed files with 374 additions and 486 deletions

View File

@@ -11,7 +11,7 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
#app { #app {
font-family: PingFangSC-Regular, PingFang SC; font-family: pingfang, SF UI Text, Roboto;
font-size: 14px; font-size: 14px;
} }
</style> </style>

View File

@@ -1,9 +1,11 @@
import Vue from "vue"; import Vue from "vue";
import { Form, FormItem, Button, Card, Loading } from "element-ui"; import { Form, FormItem, Button, Card, Loading, Message } from "element-ui";
Vue.use(Form); Vue.use(Form);
Vue.use(FormItem); Vue.use(FormItem);
Vue.use(Button); Vue.use(Button);
Vue.use(Card); Vue.use(Card);
Vue.use(Loading); Vue.use(Loading);
Vue.component(Message);

View File

@@ -11,261 +11,173 @@
</div> </div>
<div class="baseInfo"> <div class="baseInfo">
<van-image :src="require('@/assets/img/renyuanliebiao.png')" /> <van-image :src="require('@/assets/img/renyuanliebiao.png')" />
<span>被征收人姓名</span> <span>被征收人姓名{{ data.userName }}</span>
<span>{{ data.userName }}</span>
</div> </div>
<div class="baseInfo"> <div class="baseInfo">
<van-image :src="require('@/assets/img/credentials_icon.png')" /> <van-image :src="require('@/assets/img/credentials_icon.png')" />
<span>身份证号码</span> <span>身份证号码{{ setIdCard(data.idCard) }}</span>
<span>{{ setIdCard(data.idCard) }}</span>
</div> </div>
<!-- 三张背景图 --> <!-- 三张背景图 -->
<div class="gridBg centerMagin"> <div class="gridBg ">
<div class="gridImg" style="background:#1897FB;"> <div style="background:#1897FB;">
<van-image :src="require('@/assets/img/scan.png')" /> <van-image :src="require('@/assets/img/scan.png')" />
<span class="baseFont">扫一扫</span> <span>扫一扫</span>
</div> </div>
<div <div @click="gotoProject('pg')" style="background:#F1AE4B;">
@click="gotoProject('pg')"
class="gridImg"
style="background:#F1AE4B;"
>
<van-image :src="require('@/assets/img/evaluation.png')" /> <van-image :src="require('@/assets/img/evaluation.png')" />
<span class="baseFont">查评估结果</span> <span>查评估结果</span>
</div> </div>
<div <div @click="gotoProject('xy')" style="background:#16D7ED;">
@click="gotoProject('xy')"
class="gridImg"
style="background:#16D7ED;"
>
<van-image :src="require('@/assets/img/compensation.png')" /> <van-image :src="require('@/assets/img/compensation.png')" />
<span class="baseFont">查补偿协议</span> <span>查补偿协议</span>
</div> </div>
</div> </div>
</div> </div>
<!-- 大背景图 --> <!-- 大背景图 -->
<div class="centerMagin"> <div>
<van-image :src="require('@/assets/img/government.png')" class="bigImg" /> <van-image :src="require('@/assets/img/government.png')" />
</div> </div>
<!-- 项目内容 --> <!-- 项目内容 -->
<van-list> <div :key="item.prjId" v-for="item in data.prjList">
<div :key="item.prjId" v-for="item in data.prjList"> <div class="project">
<div class="project"> <!-- window图标 -->
<!-- window图标 --> <div>
<div> <div class="projectIcon">
<div class="projectIcon"> <img
<img src="@/assets/img/project.png"
src="@/assets/img/project.png" style="width: 25px;height: 25px;"
style="width: 25px;height: 25px;"
/>
</div>
<span class="projectTitle">{{ item.name }}</span>
</div>
<!-- 补偿协议图标 -->
<div class="projectRight">
<van-image
:src="require('@/assets/img/menu_yhxy.png')"
class="projectRightIcon"
/> />
<span class="projectRightFont">{{ item.currentState }}</span> </div>
<span class="projectTitle">{{ item.name }}</span>
</div>
<!-- 补偿协议图标 -->
<div class="projectRight">
<van-image :src="require('@/assets/img/menu_yhxy.png')" />
<span>{{ item.currentState }}</span>
</div>
</div>
<div class="projectCenter">
<!-- 项目内容 -->
<div class="projectCenterBox">
<div>
<van-image :src="require('@/assets/img/project_area.png')" />
<span>项目所在区域{{ item.area }}</span>
</div>
<div>
<van-image :src="require('@/assets/img/project_dep.png')" />
<span>征收部门{{ item.zsbm }}</span>
</div>
<div>
<van-image :src="require('@/assets/img/project_year.png')" />
<span>所属年份{{ item.year }}</span>
</div>
<div>
<van-image :src="require('@/assets/img/project_no.png')" />
<span>征收决定号</span>
<span style="color: #3883f1">
{{ item.zsjdh }}
</span>
</div> </div>
</div> </div>
<div class="projectCenter centerMagin"> <!-- 分户评估结果部分 -->
<!-- 项目内容 --> <div class="assess">
<div class="projectCenterBox"> <van-image :src="require('@/assets/img/assess_1.png')" />
<div class="projectCenterInfo"> <span>分户评估结果</span>
<div class="projectCenterInfo"> </div>
<van-image <div
:src="require('@/assets/img/project_area.png')" :key="assess.id"
class="projectCenterImg" @click="toEvaluate(assess.id, assess.type)"
/> class="assessCenter1"
<span class="projectCenterFont">项目所在区域</span> v-for="assess in item.fhpgList"
<span class="projectCenterFont">{{ item.area }}</span> >
</div> <div>
</div> <span>评估报告编号</span>
<div class="projectCenterInfo"> <span>{{ assess.assessmentNo }}</span>
<div class="projectCenterInfo">
<van-image
:src="require('@/assets/img/project_dep.png')"
class="projectCenterImg"
/>
<span class="projectCenterFont">征收部门</span>
<span class="projectCenterFont">{{ item.zsbm }}</span>
</div>
</div>
<div class="projectCenterInfo">
<div class="projectCenterInfo">
<van-image
:src="require('@/assets/img/project_year.png')"
class="projectCenterImg"
/>
<span class="projectCenterFont">所属年份</span>
<span class="projectCenterFont">{{ item.year }}</span>
</div>
</div>
<div class="projectCenterInfo">
<div class="projectCenterInfo">
<van-image
:src="require('@/assets/img/project_no.png')"
class="projectCenterImg"
/>
<span class="projectCenterFont">征收决定号</span>
<span class="projectCenterFont" style="color: #3883f1">
{{ item.zsjdh }}
</span>
</div>
</div>
</div> </div>
<div class="centerMagin"> <div>
<!-- 分户评估结果部分 --> <span>被征收房屋地址</span>
<div class="assess"> <span class=" protocolTitle">
<div> {{ assess.houseAddress }}
<van-image </span>
:src="require('@/assets/img/assess_1.png')" </div>
class="assessIcon" <div>
/> <span>评估总金额</span>
<span class="assessTitle">分户评估结果</span> <span class="projectTitle" style="color: red"
</div> >¥{{ assess.countValue }}</span
</div> >
<!-- 分户评估遍历内容 --> </div>
<van-list> </div>
<div <!-- 补偿协议部分 -->
:key="assess.id" <div class="assess">
@click="toEvaluate(assess.id, assess.type)" <van-image :src="require('@/assets/img/assess_2.png')" />
class="assessCenter1" <span>补偿结果</span>
v-for="assess in item.fhpgList" </div>
> <div
<div class="assessBox"> :key="protocol.id"
<span class="projectCenterFont">评估报告编号</span> @click="toAgreement(protocol.id)"
<span class="projectCenterFont">{{ class="assessCenter2"
assess.assessmentNo v-for="protocol in item.bcxyList"
}}</span> >
</div> <div>
<div class="assessBox"> <span>协议编号</span>
<span class="projectCenterFont">被征收房屋地址</span> <span>{{ protocol.xyNo }}</span>
<span class="projectCenterFont protocolTitle"> </div>
{{ assess.houseAddress }} <div>
</span> <span>被征收房屋地址</span>
</div> <span class=" protocolTitle">
<div class="assessBox"> {{ protocol.houseAddress }}
<span class="projectCenterFont">评估总金额</span> </span>
<span class="projectTitle" style="color: red" </div>
>¥{{ assess.countValue }}</span <div>
> <span>补偿方式</span>
</div> <span>
</div> {{ protocol.switchProductionWay }}
</van-list> </span>
<!-- 补偿协议部分 --> </div>
<div class="assess"> <div>
<div> <span>合计补偿资金</span>
<van-image <span class="projectTitle" style="color: red"
:src="require('@/assets/img/assess_2.png')" >¥{{ protocol.summationShouldCompensateMoney }}</span
class="assessIcon" >
/>
<span class="assessTitle">补偿结果</span>
</div>
</div>
<!-- 补偿协议遍历内容 -->
<van-list>
<div
:key="protocol.id"
@click="toAgreement()"
class="assessCenter2"
v-for="protocol in item.bcxyList"
>
<div class="assessBox">
<span class="projectCenterFont">协议编号</span>
<span class="projectCenterFont">{{ protocol.xyNo }}</span>
</div>
<div class="assessBox">
<span class="projectCenterFont">被征收房屋地址</span>
<span class="projectCenterFont protocolTitle">
{{ protocol.houseAddress }}
</span>
</div>
<div class="assessBox">
<span class="projectCenterFont">补偿方式</span>
<span class="projectCenterFont">
{{ protocol.switchProductionWay }}
</span>
</div>
<div class="assessBox">
<span class="projectCenterFont">合计补偿资金</span>
<span class="projectTitle" style="color: red"
>¥{{ protocol.summationShouldCompensateMoney }}</span
>
</div>
</div>
</van-list>
</div> </div>
</div> </div>
</div> </div>
</van-list> </div>
<!-- 征收政策背景图 --> <!-- 征收政策背景图 -->
<div class="centerMagin"> <div>
<van-image <van-image :src="require('@/assets/img/expropriationPolicy.png')" />
:src="require('@/assets/img/expropriationPolicy.png')"
class="bigImg"
/>
</div> </div>
<!-- 征收政策部分 --> <!-- 征收政策部分 -->
<div class="centerMagin"> <div class=" zszc">
<span class="projectTitle" style="color: #202020">征收政策</span> <span>征收政策</span>
<div class="assessBox" style="padding-left: 5px; padding-right: 5px"> <span>{{ data.policiesRegulationsLists.totalCount }}</span>
<span class="font11" style="color: #2c2b2b"
>{{ data.policiesRegulationsLists.totalCount }}</span
>
</div>
</div> </div>
<div class="centerMagin" style="padding-bottom: 20px"> <div class=" protocolBox">
<div class="protocolBox"> <div
<!-- 遍历内容 --> :key="item.id"
<van-list> @click="pageJump(item.id)"
<div class="protocolList"
:key="item.id" v-for="(item, i) in data.policiesRegulationsLists.list"
@click="pageJump(item.id)" >
class="protocolList" <!-- 非最后一行有边框 -->
v-for="(item, i) in data.policiesRegulationsLists.list" <div
> style="border-bottom: 1px dashed #C9C7C7"
<!-- 非最后一行 --> v-if="i != data.policiesRegulationsLists.list.length - 1"
<div >
class="protocolLine" <div>{{ item.title }}</div>
v-if="i != data.policiesRegulationsLists.list.length - 1" <div>
> <span>发布时间{{ item.publicTime }}</span>
<div class="font14 protocolTitle">{{ item.title }}</div> <span>区域{{ item.area }}</span>
<div
class="assessBox"
style="padding-left: 5px; padding-right: 5px"
>
<div>
<span class="font11">发布时间</span>
<span class="font11">{{ item.publicTime }}</span>
</div>
<div>
<span class="font11">区域</span>
<span class="font11">{{ item.area }}</span>
</div>
</div>
</div>
<!-- 最后一行 -->
<div style="padding-bottom: 10px" v-else>
<div class="font14 protocolTitle">{{ item.title }}</div>
<div
class="assessBox"
style="padding-left: 5px; padding-right: 5px"
>
<div>
<span class="font11">发布时间</span>
<span class="font11">{{ item.publicTime }}</span>
</div>
<div>
<span class="font11">区域</span>
<span class="font11">{{ item.area }}</span>
</div>
</div>
</div>
</div> </div>
</van-list> </div>
<!-- 最后一行无边框 -->
<div style="padding-bottom: 10px" v-else>
<div>{{ item.title }}</div>
<div>
<span>发布时间{{ item.publicTime }}</span>
<span>区域{{ item.area }}</span>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -411,9 +323,12 @@ export default {
}); });
}, },
// 直接跳转协议结果pdf // 直接跳转协议结果pdf
toAgreement() { toAgreement(id) {
this.$router.push({ this.$router.push({
name: "showPdf" name: "showPdf",
params: {
id
}
}); });
}, },
// 加载项目数统计信息 // 加载项目数统计信息
@@ -494,8 +409,14 @@ export default {
.page { .page {
border-radius: 6px; border-radius: 6px;
background: #f2fbfd; background: #f2fbfd;
padding-bottom: 20px;
> div:nth-child(n + 2) {
margin-top: 10px;
margin-right: 12px;
margin-left: 10px;
}
} }
// 最上面盒子
.topBox { .topBox {
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
@@ -514,239 +435,187 @@ export default {
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: #fff; color: #ffffff;
}
.baseInfo {
display: flex;
.van-image {
width: 22px;
height: 21px;
padding-right: 10px;
padding-left: 31px;
}
span {
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
line-height: 20px;
height: 20px;
color: #fff;
}
}
.gridBg {
display: flex;
overflow: hidden;
align-items: center;
justify-content: space-around;
margin: 10px 12px 0 10px;
height: 120px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.28);
> div {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 90px;
height: 80px;
margin: 12px 6px;
padding-top: 5px;
border-radius: 10px;
.van-image {
width: 38px;
height: 35px;
}
span {
padding-top: 5px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
line-height: 20px;
height: 20px;
color: #fff;
}
}
} }
} }
// 项目部分
.baseInfo {
display: flex;
.van-image {
width: 22px;
height: 21px;
padding-right: 10px;
padding-left: 31px;
}
span {
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
line-height: 20px;
height: 20px;
color: #fff;
}
}
.baseFont {
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
line-height: 20px;
height: 20px;
color: #fff;
}
.centerMagin {
margin-top: 10px;
margin-right: 12px;
margin-left: 10px;
}
.gridBg {
display: flex;
overflow: hidden;
align-items: center;
justify-content: space-around;
height: 120px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.28);
}
.gridImg {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 90px;
height: 80px;
margin: 12px 6px;
padding-top: 5px;
border-radius: 10px;
.van-image {
width: 38px;
height: 35px;
}
span {
padding-top: 5px;
}
}
.bigImg {
width: 100%;
}
.project { .project {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: 41px; height: 41px;
margin-top: 10px; padding: unset 0;
margin-right: 12px; background: url(../assets/img/project_bg.png) no-repeat;
margin-left: 10px; background-position: 0 -2px;
padding-right: 0; background-size: 100% 120%;
padding-left: 0; > div:nth-child(1) {
background: url(../assets/img/project_bg.png); display: flex;
background-size: 100% 41px; align-items: center;
} width: 50%;
height: 100%;
.project > div:nth-child(1) { .projectIcon {
display: flex; display: flex;
align-items: center; align-items: center;
width: 50%; justify-content: center;
height: 100%; padding: 0 8px;
span { height: 100%;
white-space: nowrap; margin-right: 10px;
overflow: hidden; border-radius: 5px 0 0;
text-overflow: ellipsis; background: #3284cd;
}
.projectTitle {
font-family: PingFangSC-Semibold, PingFang SC;
font-size: 16px;
font-weight: 600;
color: #fff;
}
span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.projectRight {
display: flex;
align-items: center;
height: 27px;
opacity: 0.82;
border-radius: 13px 0 0 17px;
background: #24bca3;
.van-image {
width: 17px;
height: 17px;
margin-right: 3px;
margin-left: 8px;
}
span {
font-family: PingFangSC-Semibold, PingFang SC;
font-size: 12px;
font-weight: 600;
padding-right: 5px;
color: #fff;
}
} }
} }
.projectIcon {
display: flex;
align-items: center;
justify-content: center;
padding: 0 8px;
height: 100%;
margin-right: 10px;
border-radius: 5px 0 0;
background: #3284cd;
}
/* 项目名字 */
.projectTitle {
font-family: PingFangSC-Semibold, PingFang SC;
font-size: 16px;
font-weight: 600;
color: #fff;
}
.projectRight {
display: flex;
align-items: center;
height: 27px;
opacity: 0.82;
border-radius: 13px 0 0 17px;
background: #24bca3;
}
/* 项目名字旁边小字 */
.projectRightFont {
font-family: PingFangSC-Semibold, PingFang SC;
font-size: 12px;
line-height: 14px;
padding-right: 5px;
color: #fff;
}
.projectRightIcon {
width: 17px;
height: 17px;
margin-right: 3px;
margin-left: 8px;
}
.projectCenter { .projectCenter {
/* height: 440px; */
padding-bottom: 35px; padding-bottom: 35px;
background: #fff; background: #fff;
box-shadow: 0 2px 6px 1px rgba(212, 212, 212, 0.5); box-shadow: 0 2px 6px 1px rgba(212, 212, 212, 0.5);
} .projectCenterBox {
> div {
.projectCenterBox { display: flex;
padding: 8px 0; align-items: center;
} padding-top: 15px;
width: 100%;
.projectCenterInfo { overflow: hidden;
display: flex; .van-image {
align-items: center; width: 15px;
padding-top: 5px; height: 15px;
width: 100%; padding: 0 10px;
} }
span {
/* 项目内容小图标 */ font-family: PingFangSC-Regular, PingFang SC;
font-size: 14px;
.projectCenterImg { font-weight: 400;
width: 15px; color: #2c2b2b;
height: 15px; }
padding: 0 10px; }
} }
.assess {
/* 项目内容文字 */ display: flex;
align-items: center;
.projectCenterFont { height: 25px;
font-family: PingFangSC-Regular, PingFang SC; padding: 20px 10px;
font-size: 14px; .van-image {
font-weight: 400; width: 24px;
line-height: 20px; height: 24px;
/* height: 12px; */ margin-right: 10px;
color: #2c2b2b; background: #2468f2;
} }
span {
.assess { font-family: PingFangSC-Regular, PingFang SC;
display: flex; font-size: 16px;
align-items: center; font-weight: 400;
justify-content: space-between; color: #2468f2;
width: 100%; }
height: 25px; }
padding-right: 0; .assessCenter1 {
padding-left: 0; margin: 0px 22px;
} border-left: 2px solid #24bca3;
font-weight: 400;
.assessIcon { > div {
width: 24px; display: flex;
height: 24px; align-items: center;
margin-right: 10px; justify-content: space-between;
vertical-align: middle; padding: 5px 0 5px 12px;
background: #2468f2; > span:nth-child(1) {
} white-space: nowrap;
}
/* 分户,协议标题 */ }
}
.assessTitle { .assessCenter2 {
font-family: PingFangSC-Regular, PingFang SC; margin: 0px 22px;
font-size: 16px; border-left: 2px solid #ff5959;
font-weight: 400; font-weight: 400;
line-height: 20px; > div {
height: 20px; display: flex;
color: #2468f2; align-items: center;
} justify-content: space-between;
padding: 5px 0 5px 12px;
.assessRightIcon { > span:nth-child(1) {
width: 24px; white-space: nowrap;
height: 24px; }
background: #2468f2; }
} }
.assessBox {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 12px;
}
.assessBox > span:nth-child(1) {
white-space: nowrap;
}
.assessCenter1 {
margin: 15px 10px;
border-left: 2px solid #24bca3;
}
.assessCenter2 {
margin: 15px 10px;
border-left: 2px solid #ff5959;
} }
.protocolTitle { .protocolTitle {
@@ -754,39 +623,54 @@ export default {
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
// 征收政策部分
/* 政策的发布时间和区域 */ .zszc {
span {
.font11 { font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC; font-weight: 800;
font-size: 12px; color: #202020;
font-weight: 400; display: block;
line-height: 11px; }
height: 11px; > span:nth-child(2) {
color: #9da2a3; margin: 10px 0;
color: #2c2b2b;
font-size: 12px;
}
} }
.protocolBox { .protocolBox {
border-radius: 4px; border-radius: 4px;
background: #fff; background: #fff;
box-shadow: 0 2px 5px 0 rgba(168, 168, 168, 0.5); box-shadow: 0 2px 5px 0 rgba(168, 168, 168, 0.5);
} .protocolList {
padding: 0 20px;
/* .font14 { > div {
font-family: PingFangSC-Regular, PingFang SC; > div:nth-child(1) {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 20px; overflow: hidden;
height: 20px; white-space: nowrap;
color: #202020; text-overflow: ellipsis;
} */ width: 294px;
font-family: PingFangSC-Regular, PingFang SC;
.protocolList { color: #202020;
padding: 20px 21px 0 20px; padding-top: 20px;
} }
> div:nth-child(2) {
.protocolLine { padding: unset 5px;
padding-bottom: 10px; display: flex;
border-bottom: 1px dashed rgba(168, 168, 168, 0.5); justify-content: space-between;
align-items: center;
padding: 20px 0;
span {
font-size: 12px;
color: #9da2a3;
font-weight: 400;
line-height: 11px;
height: 11px;
}
}
}
}
} }
</style> </style>

View File

@@ -61,12 +61,12 @@ export default {
.title { .title {
text-align: center; text-align: center;
font-weight: bolder; font-weight: bolder;
font-size: 14px; font-size: 16px;
} }
.date { .date {
text-align: center; text-align: center;
margin: 10px 0; margin: 10px 0;
font-size: 14px; font-size: 16px;
} }
.bottomContent { .bottomContent {
margin-top: 10px; margin-top: 10px;

View File

@@ -97,7 +97,7 @@ export default {
mounted() {}, mounted() {},
methods: { methods: {
onInit() { onInit() {
if (!window.sessionStorage.getItem("projectId")) { if (this.$route.params.prjId) {
SetProjectId(this.$route.params.prjId); SetProjectId(this.$route.params.prjId);
} }
let data = JSON.parse(window.sessionStorage.getItem("homeData")); let data = JSON.parse(window.sessionStorage.getItem("homeData"));

View File

@@ -134,9 +134,11 @@ export default {
this.info = res; this.info = res;
} else { } else {
this.loading = false; this.loading = false;
this.$notify({ this.$message({
message: "请求出错", message: "请求出错",
duration: 3000 duration: 3000,
type: "error",
center: true
}); });
} }
}, },