You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
692 lines
19 KiB
692 lines
19 KiB
<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-info">
|
|
<div class="info-title">话题内容</div>
|
|
<div class="info-content">{{ info.topicContent }}</div>
|
|
<div class="info-pics">
|
|
<img :src="src"
|
|
:key="src"
|
|
v-for="src in info.topicImgs"
|
|
@click="watchImg(src)" />
|
|
</div>
|
|
<div class="info-prop">
|
|
<span>发布时间：</span>
|
|
<span>{{ info.releaseTime }}</span>
|
|
</div>
|
|
<div class="info-prop">
|
|
<span>话题地址：</span>
|
|
<span>{{ info.releaseAddress }}</span>
|
|
</div>
|
|
<div class="info-prop">
|
|
<span>所属网格：</span>
|
|
<span>{{ info.gridName }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tabs">
|
|
<div class="tab-btn"
|
|
@click="subStartGroupIndex"
|
|
v-if="groupList.length > 9">
|
|
<img src="@/assets/img/shuju/people/arrow-double-left.png" />
|
|
</div>
|
|
<div v-show="index >= startGroupIndex && index < startGroupIndex + 9"
|
|
class="tab"
|
|
:class="groupIndex % groupList.length == index ? 'z-on' : ''"
|
|
:key="'tab' + index"
|
|
@click="groupIndex = index"
|
|
v-for="(item, index) in groupList">
|
|
{{ item.label }}
|
|
</div>
|
|
<div class="tab-btn"
|
|
@click="addStartGroupIndex"
|
|
v-if="groupList.length > 9">
|
|
<img src="@/assets/img/shuju/people/arrow-double-right.png" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="m-case">
|
|
<div class="m-yanpan"
|
|
v-if="groupIndex == 0">
|
|
<div v-if="issueInfo.projectId">
|
|
<analyse v-if="yanPan.loading"
|
|
singleTitle="楼院小组"
|
|
:userList="yanPan.houseUserList"
|
|
:userName="yanPan.icUserName"
|
|
:singleList="yanPan.categoryList"
|
|
@user="toUserInfo"
|
|
@project="toProjectInfo" />
|
|
<screen-loading v-else>加载中</screen-loading>
|
|
</div>
|
|
<div v-else
|
|
class="m-hint">
|
|
<img src="@/assets/img/modules/visual/noData.png"
|
|
class="no-data-img" />
|
|
</div>
|
|
</div>
|
|
<div class="m-tb"
|
|
v-if="groupIndex == 1">
|
|
<cpt-tb :col-list="comment.colList"
|
|
:loading="comment.loading"
|
|
:header="comment.header"
|
|
:list="comment.list"
|
|
@operate="checkTopicCommentImg"></cpt-tb>
|
|
</div>
|
|
|
|
<div v-if="groupIndex == 2">
|
|
<div class="m-row"
|
|
v-if="info.issueId">
|
|
<div class="m-info">
|
|
<div class="info-prop">
|
|
<span>议题标题：</span>
|
|
<span>{{ issueInfo.issueTitle }}</span>
|
|
</div>
|
|
<div class="info-prop">
|
|
<span>议题建议：</span>
|
|
<span>{{ issueInfo.issueSuggestion }}</span>
|
|
</div>
|
|
<div class="info-prop">
|
|
<span>所属网格：</span>
|
|
<span>{{ issueInfo.belongsGridName || "--" }}</span>
|
|
</div>
|
|
<div class="info-prop">
|
|
<span>议题发起人：</span>
|
|
<span>{{ issueInfo.issueInitiator }}</span>
|
|
</div>
|
|
<div v-if="issueInfo.topicInfo&&issueInfo.topicInfo.groupName"
|
|
class="info-prop">
|
|
<span>议题来源：</span>
|
|
<span>{{ issueInfo.topicInfo.groupName }}</span>
|
|
</div>
|
|
<div class="info-prop">
|
|
<span>转议题时间：</span>
|
|
<span>{{ issueInfo.shiftIssueTime }}</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 v-if="issueChartData.length > 0"
|
|
:list="issueChartData" />
|
|
</div>
|
|
</div>
|
|
<div v-else
|
|
class="m-hint">
|
|
<img src="@/assets/img/modules/visual/noData.png"
|
|
class="no-data-img" />
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="groupIndex == 3">
|
|
<div class="m-row"
|
|
v-if="issueInfo.projectId">
|
|
<div class="m-info">
|
|
<div class="info-prop">
|
|
<span>项目标题：</span>
|
|
<span>{{ projectInfo.projectTitle }}</span>
|
|
</div>
|
|
<div class="info-prop">
|
|
<span>项目方案：</span>
|
|
<span>{{ projectInfo.backGround }}</span>
|
|
</div>
|
|
<div class="info-prop">
|
|
<span>内部备注：</span>
|
|
<span>{{ projectInfo.internalRemark || "--" }}</span>
|
|
</div>
|
|
<div class="info-prop">
|
|
<span>当前处理部门：</span>
|
|
<span>{{ projectInfo.departmentNameList.join("、") }}</span>
|
|
</div>
|
|
<div class="info-prop"
|
|
v-if="projectCate.length > 0">
|
|
<span>分类：</span>
|
|
<fold-text :row="3">
|
|
<div :key="item.name"
|
|
v-for="item in projectCate">
|
|
{{ item.name }}
|
|
</div>
|
|
</fold-text>
|
|
</div>
|
|
<div class="info-prop"
|
|
v-if="projectTag.length > 0">
|
|
<span>标签：</span>
|
|
<fold-text :row="3">
|
|
<div :key="item.name"
|
|
v-for="item in projectTag">
|
|
{{ item.name }}
|
|
</div>
|
|
</fold-text>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="m-process"
|
|
v-if="projectProcess.length > 0">
|
|
<div class="process-title">处理进展</div>
|
|
<div class="list">
|
|
<div class="item"
|
|
:class="index === 0 ? 'z-on' : ''"
|
|
:key="item.processId"
|
|
v-for="(item, index) in projectProcess">
|
|
<div class="item-row">
|
|
<div class="name">{{ item.processName }}</div>
|
|
<div class="date">
|
|
{{ item.processTime }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail">
|
|
<div class="detail-field">处理部门：</div>
|
|
<div class="detail-value">{{ item.departmentName }}</div>
|
|
</div>
|
|
|
|
<div class="detail"
|
|
v-if="item.processName != '转项目' && item.publicReply">
|
|
<div class="detail-field">说 明：</div>
|
|
<div class="detail-value">
|
|
<fold-text :row="3">{{ item.publicReply }}</fold-text>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail"
|
|
v-if="item.processName != '转项目' && item.internalRemark">
|
|
<div class="detail-field">内部备注：</div>
|
|
<div class="detail-value">
|
|
<fold-text :row="3">{{
|
|
item.internalRemark
|
|
}}</fold-text>
|
|
</div>
|
|
</div>
|
|
<div class="detail">
|
|
<div class="attachement-list">
|
|
<a :href="att.url"
|
|
target="_blank"
|
|
:key="att.url"
|
|
v-for="att in item.internalFile">
|
|
<i class="el-icon-folder-opened"></i>
|
|
{{ att.name }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else
|
|
class="m-hint">
|
|
<img src="@/assets/img/modules/visual/noData.png"
|
|
class="no-data-img" />
|
|
</div>
|
|
</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 cptTb from "@/views/modules/visual/cpts/tb";
|
|
import lineChart from "@/views/modules/visual/cpts/line-chart";
|
|
import analyse from "@/views/modules/visual/cpts/analyse";
|
|
import foldText from "@/views/components/foldText";
|
|
import dateFormat from "dai-js/tools/dateFormat";
|
|
|
|
function iniData () {
|
|
return {
|
|
groupList: [
|
|
{ label: "研判分析" },
|
|
{ label: "话题评论" },
|
|
{ label: "查看议题" },
|
|
{ label: "查看项目" },
|
|
],
|
|
groupIndex: 0,
|
|
startGroupIndex: 0,
|
|
|
|
info: {
|
|
badgeList: [],
|
|
closeDetail: {
|
|
closeUserName: "",
|
|
closeDateTime: "-1",
|
|
closeReason: "",
|
|
closeUserHeadPhoto: "",
|
|
},
|
|
dimension: "",
|
|
hiddenDetail: null,
|
|
issueId: "",
|
|
longitude: "",
|
|
releaseAddress: "",
|
|
releaseTime: "",
|
|
releaseUserHeadPhoto: "",
|
|
releaseUserName: "",
|
|
shiftIssueFlag: true,
|
|
topicContent: "",
|
|
topicId: "",
|
|
topicImgs: [],
|
|
topicStatus: "discussing",
|
|
},
|
|
|
|
comment: {
|
|
loading: true,
|
|
colList: [
|
|
{
|
|
align: "center",
|
|
width: "20%",
|
|
},
|
|
{
|
|
align: "center",
|
|
width: "20%",
|
|
},
|
|
{
|
|
align: "left",
|
|
width: "50%",
|
|
},
|
|
{
|
|
align: "left",
|
|
width: "10%",
|
|
},
|
|
],
|
|
header: ["评论者", "评论时间", "评论内容", "评论图片"],
|
|
list: [],
|
|
},
|
|
|
|
issueInfo: {
|
|
attitude: "",
|
|
belongsGridName: "",
|
|
issueIdea: "",
|
|
issueInitiator: "",
|
|
issueStatus: "",
|
|
issueSuggestion: "",
|
|
issueTitle: "",
|
|
joinVote: true,
|
|
projectId: "",
|
|
projectStatus: false,
|
|
publishIdeaFlag: false,
|
|
},
|
|
|
|
issueTrend: {},
|
|
issueChartData: [],
|
|
|
|
projectProcess: [],
|
|
|
|
projectInfo: {
|
|
backGround: "",
|
|
departmentList: [
|
|
// { departmentName: "南宁社区-南宁第二网格", staffList: ["周相成"] },
|
|
],
|
|
departmentNameList: [],
|
|
internalRemark: "",
|
|
isSend: false,
|
|
locateAddress: "",
|
|
locateDimension: "",
|
|
locateLongitude: "",
|
|
origin: "",
|
|
originId: "",
|
|
platformIds: [],
|
|
processable: false,
|
|
projectId: "",
|
|
projectStatus: "pending",
|
|
projectTitle: "",
|
|
publicReply: "",
|
|
returnable: false,
|
|
},
|
|
|
|
projectCate: [],
|
|
projectTag: [],
|
|
|
|
yanPan: {
|
|
loading: false,
|
|
|
|
icResiUserId: "",
|
|
houseId: "",
|
|
icUserName: "",
|
|
epmetUserIdList: [],
|
|
houseUserList: [
|
|
// {
|
|
// icResiUserId: '',
|
|
// icUserName: '',
|
|
// }
|
|
],
|
|
categoryList: [],
|
|
projectData: [
|
|
// {
|
|
// firstCategoryCode: '',
|
|
// firstCategoryName: '',
|
|
// projectList: [],
|
|
// }
|
|
],
|
|
},
|
|
};
|
|
}
|
|
|
|
export default {
|
|
name: "demandInfo",
|
|
props: {
|
|
topicId: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
epmetUserIdList: {
|
|
type: Array,
|
|
default: [],
|
|
},
|
|
icResiUserId: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
},
|
|
|
|
components: {
|
|
cptCard,
|
|
cptTb,
|
|
analyse,
|
|
screenLoading,
|
|
lineChart,
|
|
foldText,
|
|
},
|
|
|
|
data: iniData,
|
|
|
|
computed: {},
|
|
|
|
watch: {
|
|
topicId () {
|
|
let data = iniData();
|
|
Object.keys(data).forEach((k) => {
|
|
this[k] = data[k];
|
|
});
|
|
this.getApiData();
|
|
},
|
|
},
|
|
|
|
mounted () {
|
|
this.getApiData();
|
|
},
|
|
|
|
methods: {
|
|
watchImg (src) {
|
|
window.open(src);
|
|
},
|
|
|
|
addStartGroupIndex () {
|
|
const { startGroupIndex, groupList } = this;
|
|
if (startGroupIndex < groupList.length - 9) {
|
|
this.startGroupIndex = startGroupIndex + 1;
|
|
} else {
|
|
this.startGroupIndex = groupList.length - 9;
|
|
}
|
|
},
|
|
subStartGroupIndex () {
|
|
const { startGroupIndex, groupList } = this;
|
|
if (startGroupIndex > 0) {
|
|
this.startGroupIndex = startGroupIndex - 1;
|
|
} else {
|
|
this.startGroupIndex = 0;
|
|
}
|
|
},
|
|
handleClose () {
|
|
this.$emit("close");
|
|
},
|
|
|
|
async getApiData () {
|
|
this.getComment();
|
|
await this.getInfo();
|
|
await this.getIssueInfo();
|
|
this.getIssueTrend();
|
|
this.getProjectProcess();
|
|
this.getProjectInfo();
|
|
this.getProjectCate();
|
|
this.getYanPan();
|
|
},
|
|
|
|
//加载组织数据
|
|
async getInfo () {
|
|
const url = "/resi/group/topic/gettopicdetail";
|
|
|
|
const { data, code, msg } = await requestPost(url, {
|
|
topicId: this.topicId,
|
|
});
|
|
|
|
if (code === 0) {
|
|
this.info = data;
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
|
|
//加载组织数据
|
|
async getComment () {
|
|
const url = "/resi/group/comment/getcommentlistoftopic";
|
|
|
|
const { data, code, msg } = await requestPost(url, {
|
|
topicId: this.topicId,
|
|
pageNo: 1,
|
|
pageSize: 100,
|
|
});
|
|
this.comment.loading = false;
|
|
|
|
if (code === 0) {
|
|
this.comment.list = data.map((item) => {
|
|
return [
|
|
item.commentUserName,
|
|
item.commentTime,
|
|
item.commentContent,
|
|
item.imageList.length > 0
|
|
? { type: "operate", list: ["查看"] }
|
|
: "",
|
|
];
|
|
});
|
|
this.comment.srcList = data;
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
|
|
checkTopicCommentImg (index) {
|
|
const {
|
|
comment: { srcList },
|
|
} = this;
|
|
if (srcList[index] && srcList[index].imageList) {
|
|
this.watchImg(srcList[index].imageList[0].url);
|
|
}
|
|
},
|
|
|
|
//加载组织数据
|
|
async getIssueInfo () {
|
|
const {
|
|
info: { issueId },
|
|
} = this;
|
|
if (!issueId) return;
|
|
const url = "/resi/hall/issue/detail";
|
|
|
|
const { data, code, msg } = await requestPost(url, {
|
|
issueId,
|
|
});
|
|
|
|
if (code === 0) {
|
|
this.issueInfo = data;
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
|
|
//加载组织数据
|
|
async getIssueTrend () {
|
|
const {
|
|
info: { issueId },
|
|
} = this;
|
|
if (!issueId) return;
|
|
const url = "/resi/hall/issue/votingtrend";
|
|
|
|
const { data, code, msg } = await requestPost(url, {
|
|
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);
|
|
}
|
|
},
|
|
|
|
//加载组织数据
|
|
async getProjectProcess () {
|
|
const { issueInfo } = this;
|
|
if (!issueInfo || !issueInfo.projectId) return;
|
|
const url = "/gov/project/trace/processlist-v2";
|
|
|
|
const { data, code, msg } = await requestPost(url, {
|
|
projectId: issueInfo.projectId,
|
|
});
|
|
|
|
if (code === 0) {
|
|
this.projectProcess = data.map((item) => {
|
|
item.processTime = dateFormat(
|
|
new Date(item.processTime * 1000),
|
|
"yyyy-MM-dd hh:mm"
|
|
);
|
|
return item;
|
|
});
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
|
|
//加载组织数据
|
|
async getProjectInfo () {
|
|
const { issueInfo } = this;
|
|
if (!issueInfo || !issueInfo.projectId) return;
|
|
const url = "/gov/project/trace/projectdetail";
|
|
|
|
const { data, code, msg } = await requestPost(url, {
|
|
projectId: issueInfo.projectId,
|
|
});
|
|
|
|
if (code === 0) {
|
|
this.projectInfo = data;
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
|
|
async getProjectCate () {
|
|
const { issueInfo } = this;
|
|
if (!issueInfo || !issueInfo.projectId) return;
|
|
const url = "/gov/project/projectcategory/categorytaglist";
|
|
|
|
const { data, code, msg } = await requestPost(url, {
|
|
projectId: issueInfo.projectId,
|
|
});
|
|
|
|
if (code === 0) {
|
|
this.projectCate = data.categoryList;
|
|
this.projectTag = data.tagList;
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
|
|
//加载组织数据
|
|
async getYanPan () {
|
|
const url = "/gov/project/project/topic-research-analysis";
|
|
|
|
if (!this.issueInfo.projectId) return;
|
|
|
|
const { data, code, msg } = await requestPost(url, {
|
|
epmetUserIdList: this.epmetUserIdList,
|
|
icResiUserId: this.icResiUserId,
|
|
projectId: this.issueInfo.projectId,
|
|
});
|
|
|
|
if (code === 0) {
|
|
data.categoryList = data.projectData.map((item) => {
|
|
return {
|
|
categoryCode: item.firstCategoryCode,
|
|
categoryName: item.firstCategoryName,
|
|
showItem: true,
|
|
projectList: item.projectList.map((subItem) => {
|
|
return {
|
|
title: subItem.projectTitle,
|
|
status: subItem.projectStatus,
|
|
statusName:
|
|
subItem.projectStatus == "pending" ? "待处理" : "结案",
|
|
projectId: subItem.projectId,
|
|
topicId: subItem.topicId,
|
|
};
|
|
}),
|
|
};
|
|
});
|
|
this.yanPan = { ...this.yanPan, ...data };
|
|
this.yanPan.loading = true;
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
|
|
toUserInfo (item) {
|
|
this.$router.push({
|
|
path: `/main-shuju/visual-basicinfo-people/${item.icResiUserId}`,
|
|
});
|
|
},
|
|
|
|
toProjectInfo (item) {
|
|
console.log(item);
|
|
this.topicId = item.topicId;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style
|
|
lang="scss"
|
|
src="@/assets/scss/modules/visual/incident-info.scss"
|
|
scoped
|
|
></style>
|
|
|