jiangyy
4 years ago
11 changed files with 753 additions and 278 deletions
@ -0,0 +1,135 @@ |
|||||
|
@import '../../c/config'; |
||||
|
@import '../../c/function'; |
||||
|
@import './c/common'; |
||||
|
|
||||
|
.m-pop { |
||||
|
@include shield; |
||||
|
background-color: rgba(#000, 0.9); |
||||
|
overflow-y: auto; |
||||
|
|
||||
|
.wrap { |
||||
|
position: relative; |
||||
|
margin: 120px auto; |
||||
|
width: 1020px; |
||||
|
|
||||
|
.title { |
||||
|
padding: 10px; |
||||
|
font-size: 22px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 800; |
||||
|
color: #ffffff; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
img { |
||||
|
display: block; |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
span { |
||||
|
display: block; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn-close { |
||||
|
position: absolute; |
||||
|
top: -10px; |
||||
|
right: -10px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.line { |
||||
|
margin: 20px auto; |
||||
|
width: 900px; |
||||
|
height: 1px; |
||||
|
border: 1px dashed #1257c9; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.m-content { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.m-info { |
||||
|
padding-left: 62px; |
||||
|
font-size: 16px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
line-height: 24px; |
||||
|
width: 50%; |
||||
|
|
||||
|
.info-title { |
||||
|
margin-top: 30px; |
||||
|
font-size: 20px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
color: #ffffff; |
||||
|
line-height: 30px; |
||||
|
} |
||||
|
|
||||
|
.info-prop { |
||||
|
position: relative; |
||||
|
margin: 10px 0; |
||||
|
display: flex; |
||||
|
padding-left: 15px; |
||||
|
|
||||
|
.info-pics { |
||||
|
display: flex; |
||||
|
margin: 20px 0; |
||||
|
img { |
||||
|
display: block; |
||||
|
width: 32%; |
||||
|
height: 90px; |
||||
|
margin-right: 9px; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
} |
||||
|
> span, |
||||
|
> div { |
||||
|
display: block; |
||||
|
max-width: 300px; |
||||
|
} |
||||
|
|
||||
|
&::before { |
||||
|
content: ''; |
||||
|
display: block; |
||||
|
position: absolute; |
||||
|
top: 9px; |
||||
|
left: 0; |
||||
|
width: 7px; |
||||
|
height: 7px; |
||||
|
background: #0c81fe; |
||||
|
border-radius: 3px; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.m-line { |
||||
|
width: 50%; |
||||
|
|
||||
|
.stat { |
||||
|
margin: 20px 0 10px; |
||||
|
display: flex; |
||||
|
.stat-item { |
||||
|
width: 33%; |
||||
|
text-align: center; |
||||
|
|
||||
|
div { |
||||
|
font-size: 17px; |
||||
|
font-family: Source Han Serif SC; |
||||
|
font-weight: 500; |
||||
|
color: rgba(#fff, 0.5); |
||||
|
line-height: 24px; |
||||
|
&.z-weak { |
||||
|
font-size: 12px; |
||||
|
font-family: Source Han Serif SC; |
||||
|
font-weight: 500; |
||||
|
color: rgba(#fff, 0.5); |
||||
|
line-height: 24px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,229 @@ |
|||||
|
<template> |
||||
|
<div class="m-pop"> |
||||
|
<div class="wrap"> |
||||
|
<cpt-card> |
||||
|
<div class="title"> |
||||
|
<img src="@/assets/img/shuju/title-tip.png" /> |
||||
|
<span>议题详情</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="btn-close" |
||||
|
@click="handleClose"> |
||||
|
<img src="@/assets/img/shuju/people/close.png" /> |
||||
|
</div> |
||||
|
<div class="m-content"> |
||||
|
<div class="m-info"> |
||||
|
|
||||
|
<div class="info-prop"> |
||||
|
<span>议题标题：</span> |
||||
|
<span>{{ info.issueTitle }}</span> |
||||
|
</div> |
||||
|
<div class="info-prop"> |
||||
|
<span>议题建议：</span> |
||||
|
<span>{{ info.issueSuggestion }}</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="info-prop"> |
||||
|
<span>话题内容：</span> |
||||
|
<div>{{ info.topicInfo.topicContent }}</div> |
||||
|
<div v-if="info.topicInfo.topicImgs&&info.topicInfo.topicImgs.length>0" |
||||
|
class="info-pics"> |
||||
|
<img :src="src" |
||||
|
:key="src" |
||||
|
v-for="src in info.topicInfo.topicImgs" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="info-prop"> |
||||
|
<span>转议题时间：</span> |
||||
|
<span>{{ info.shiftIssueTime}}</span> |
||||
|
</div> |
||||
|
<div class="info-prop"> |
||||
|
<span>所属网格：</span> |
||||
|
<span>{{ info.belongsGridName}}</span> |
||||
|
</div> |
||||
|
<div class="info-prop"> |
||||
|
<span>话题发表人：</span> |
||||
|
<span>{{ info.topicInfo.publishedUser}}</span> |
||||
|
</div> |
||||
|
<div class="info-prop"> |
||||
|
<span>议题发起人：</span> |
||||
|
<span>{{ info.issueInitiator}}</span> |
||||
|
</div> |
||||
|
<div class="info-prop"> |
||||
|
<span>话题来源：</span> |
||||
|
<span>{{ info.topicInfo.groupName}}</span> |
||||
|
</div> |
||||
|
<div class="info-prop"> |
||||
|
<span>话题发表时间：</span> |
||||
|
<span>{{ info.topicInfo.publishedTimeShow}}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="m-line"> |
||||
|
<div class="stat"> |
||||
|
<div class="stat-item"> |
||||
|
<div> |
||||
|
{{ issueTrend.realityVoteCount }}/{{ |
||||
|
issueTrend.shouldVoteCount |
||||
|
}} |
||||
|
</div> |
||||
|
<div class="z-weak">已表决/应表决</div> |
||||
|
</div> |
||||
|
<div class="stat-item"> |
||||
|
<div>{{ issueTrend.supportAmount }}</div> |
||||
|
<div class="z-weak">支持</div> |
||||
|
</div> |
||||
|
<div class="stat-item"> |
||||
|
<div>{{ issueTrend.oppositionAmount }}</div> |
||||
|
<div class="z-weak">反对</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<line-chart :list="issueChartData" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</cpt-card> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import cptCard from "@/views/modules/visual/cpts/card"; |
||||
|
import screenLoading from "@/views/modules/visual/cpts/loading"; |
||||
|
import { requestPost } from "@/js/dai/request"; |
||||
|
import lineChart from "@/views/modules/visual/cpts/line-chart"; |
||||
|
import dateFormat from "dai-js/tools/dateFormat"; |
||||
|
|
||||
|
export default { |
||||
|
name: "demandInfo", |
||||
|
props: { |
||||
|
issueId: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
components: { |
||||
|
cptCard, |
||||
|
lineChart, |
||||
|
screenLoading, |
||||
|
}, |
||||
|
|
||||
|
data () { |
||||
|
return { |
||||
|
info: { |
||||
|
attitude: "", |
||||
|
belongsGridName: "", |
||||
|
issueIdea: "", |
||||
|
issueInitiator: "", |
||||
|
issueStatus: "", |
||||
|
issueSuggestion: "", |
||||
|
issueTitle: "", |
||||
|
joinVote: false, |
||||
|
projectId: "", |
||||
|
projectStatus: true, |
||||
|
publishIdeaFlag: false, |
||||
|
shiftIssueTime: "", |
||||
|
topicInfo: { |
||||
|
groupId: "", |
||||
|
groupName: "", |
||||
|
groupType: "", |
||||
|
publishedTime: "", |
||||
|
publishedUser: "", |
||||
|
topicContent: "", |
||||
|
topicId: "", |
||||
|
topicImgs: null, |
||||
|
}, |
||||
|
}, |
||||
|
issueTrend: {}, |
||||
|
issueChartData: [], |
||||
|
|
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
computed: {}, |
||||
|
|
||||
|
watch: { |
||||
|
issueId () { |
||||
|
this.getApiData(); |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
mounted () { |
||||
|
this.getApiData(); |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
|
||||
|
handleClose () { |
||||
|
this.$emit("close"); |
||||
|
}, |
||||
|
|
||||
|
async getApiData () { |
||||
|
|
||||
|
await this.getInfo(); |
||||
|
await this.getIssueTrend() |
||||
|
}, |
||||
|
|
||||
|
//加载组织数据 |
||||
|
async getInfo () { |
||||
|
const url = "/resi/hall/issue/detail"; |
||||
|
// const url = "http://yapi.elinkservice.cn/mock/245/gov/issue/issue/resibuzz"; |
||||
|
let params = { |
||||
|
issueId: this.issueId, |
||||
|
}; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.info = data |
||||
|
|
||||
|
this.info.topicInfo.publishedTimeShow = dateFormat(new Date(this.info.topicInfo.publishedTime * 1000), "yyyy-MM-dd") |
||||
|
|
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//加载组织数据 |
||||
|
async getIssueTrend () { |
||||
|
const url = "/resi/hall/issue/votingtrend"; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, { |
||||
|
issueId: this.issueId, |
||||
|
}); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.issueTrend = data; |
||||
|
let chartData = []; |
||||
|
data.polyLine.forEach((item) => { |
||||
|
let date = dateFormat(new Date(item.voteDate * 1000), "yyyy-MM-dd"); |
||||
|
console.log("date:" + date); |
||||
|
chartData.push( |
||||
|
{ |
||||
|
date, |
||||
|
value: item.supportIncrement, |
||||
|
type: "支持", |
||||
|
}, |
||||
|
{ |
||||
|
date, |
||||
|
value: item.oppositionIncrement, |
||||
|
type: "反对", |
||||
|
} |
||||
|
); |
||||
|
}); |
||||
|
this.issueChartData = chartData; |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style |
||||
|
lang="scss" |
||||
|
src="@/assets/scss/modules/visual/issue-info.scss" |
||||
|
scoped |
||||
|
></style> |
||||
@ -0,0 +1,34 @@ |
|||||
|
<template> |
||||
|
<div class="empty"> |
||||
|
<div class="icon"></div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data () { |
||||
|
return {} |
||||
|
}, |
||||
|
methods: {} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss" rel="stylesheet/scss"> |
||||
|
.empty { |
||||
|
width: 100%; |
||||
|
height: calc(100% - 37px); |
||||
|
margin: 15px 0; |
||||
|
|
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
.icon { |
||||
|
width: 100%; |
||||
|
height: 160px; |
||||
|
background: url("../../../../../assets/img/modules/visual/noData.png") |
||||
|
no-repeat; |
||||
|
background-size: contain; |
||||
|
background-position: 50% 50%; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue