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