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.
521 lines
13 KiB
521 lines
13 KiB
4 years ago
|
<template>
|
||
|
|
<cpt-card>
|
||
|
|
<div class="title">
|
||
|
|
<img src="@/assets/img/shuju/title-tip.png" />
|
||
|
|
<span>居民热议</span>
|
||
|
|
|
||
|
|
<div class="second-select cascader">
|
||
|
|
|
||
|
|
<el-cascader class="customer_cascader"
|
||
|
|
ref="myCascader"
|
||
|
|
v-model="agencyIdArray"
|
||
|
|
:key="iscascaderShow"
|
||
|
|
:options="casOptions"
|
||
|
|
:props="optionProps"
|
||
|
|
:show-all-levels="false"
|
||
|
|
@change="handleChangeAgency"></el-cascader>
|
||
|
|
</div>
|
||
|
|
<div class="second-select status-select">
|
||
|
|
<el-select v-model="status"
|
||
|
|
:popper-append-to-body="false"
|
||
|
|
placeholder="请选择">
|
||
|
|
<el-option v-for="(item,index) in stateArray"
|
||
|
|
:key="item.value"
|
||
|
|
:label="item.label"
|
||
|
|
:value="item.value"
|
||
|
|
@click.native="handleChangeState(index)">
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="g-cpt-resi">
|
||
|
|
<div class="g-l">
|
||
|
|
<screen-echarts-frame v-if=" !dataLoading"
|
||
|
|
class="echart-wr"
|
||
|
|
@myChartMethod="pieInitOk"
|
||
|
|
ref="pieChart"></screen-echarts-frame>
|
||
|
|
|
||
|
|
<div class="table-status"
|
||
|
|
v-if="dataLoading">
|
||
|
|
<screen-loading>加载中</screen-loading>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="g-r">
|
||
|
|
<div class="m-tb">
|
||
|
|
|
||
|
|
<div class="tb">
|
||
|
|
<cpt-tb :col-list="demand.colList"
|
||
|
|
:loading="demand.loading"
|
||
|
|
:header="demand.header"
|
||
|
|
:list="demand.list"
|
||
|
|
@operate="toIssueInfo"></cpt-tb>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="m-pagination">
|
||
|
|
<el-pagination :current-page="demand.pageNo"
|
||
|
|
:page-size="demand.pageSize"
|
||
|
|
:total="demand.total"
|
||
|
|
background
|
||
|
|
layout="prev, pager, next"
|
||
|
|
@current-change="handlePageNoChange_demand">
|
||
|
|
</el-pagination>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<issue-info v-if="showIssue"
|
||
|
|
:issueId="issueId"
|
||
|
|
@close="showIssue = false" />
|
||
|
|
|
||
|
|
</cpt-card>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { Loading } from "element-ui"; //引入Loading服务
|
||
|
|
import { requestPost } from "@/js/dai/request";
|
||
|
|
import cptCard from "@/views/modules/visual/cpts/card";
|
||
|
|
import cptTb from "@/views/modules/visual/cpts/tb";
|
||
|
|
import screenEchartsFrame from "@/views/modules/visual/components/screen-echarts-frame";
|
||
|
|
import ScreenLoading from "@/views/modules/visual/components/screen-loading";
|
||
|
|
import ScreenNodata from "@/views/modules/visual/components/screen-nodata";
|
||
|
|
import { pieOption } from './resiPieOption.js'
|
||
|
|
import nextTick from 'dai-js/tools/nextTick'
|
||
|
|
import issueInfo from "./cpt/issue-info";
|
||
|
|
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "HomeMap",
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
dataLoading: true,
|
||
|
|
|
||
|
|
pieChartS: null,
|
||
|
|
pieChart: '',
|
||
|
|
pieOption: {},
|
||
|
|
pieInitState: false,
|
||
|
|
pieTotal: 0,
|
||
|
|
colorArray: [],
|
||
|
|
pieData: [
|
||
|
|
// { count: 1048, categoryName: '城市管理', color: '#1B51FF', selected: true },
|
||
|
|
// { count: 735, categoryName: '为民服务', color: '#00E5ED' },
|
||
|
|
// { count: 580, categoryName: '安全监管', color: '#7800FF' },
|
||
|
|
// { count: 484, categoryName: '民政', color: '#16D783' },
|
||
|
|
// { count: 300, categoryName: '环境保护', color: '#FF7800' },
|
||
|
|
// { count: 1048, categoryName: '建设管理', color: '#FFBA00' },
|
||
|
|
// { count: 735, categoryName: '街道吹哨部门报到', color: '#FFD685' },
|
||
|
|
// { count: 1580, categoryName: '社会治安综合', color: '#2A00FF' },
|
||
|
|
// { count: 484, categoryName: '公安交通管理', color: '#C600FF' },
|
||
|
|
// { count: 300, categoryName: '卫生计生监管执法', color: '#FF2A00' },
|
||
|
|
// { count: 484, categoryName: '民生', color: '#3DDA83' },
|
||
|
|
// { count: 300, categoryName: '街道安全', color: '#FAC126' }
|
||
|
|
],
|
||
|
|
//voting 已转项目：shift_project 已关闭：closed，全部：all
|
||
|
|
stateArray: [
|
||
|
|
{
|
||
|
|
label: '全部',
|
||
|
|
value: 'all'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '表决中',
|
||
|
|
value: 'voting'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '已转项目',
|
||
|
|
value: 'shift_project'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '已关闭',
|
||
|
|
value: 'closed'
|
||
|
|
},
|
||
|
|
],
|
||
|
|
|
||
|
|
status: 'all',
|
||
|
|
orgId: '',
|
||
|
|
orgTypeSel: '',
|
||
|
|
tableList: [],
|
||
|
|
demand: {
|
||
|
|
loading: true,
|
||
|
|
colList: [
|
||
|
|
{
|
||
|
|
align: "center",
|
||
|
|
width: "5%",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
align: "center",
|
||
|
|
width: "10%",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
align: "center",
|
||
|
|
width: "20%",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
align: "center",
|
||
|
|
width: "10%",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
align: "center",
|
||
|
|
width: "5%",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
align: "center",
|
||
|
|
width: "10%",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
align: "center",
|
||
|
|
width: "10%",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
align: "center",
|
||
|
|
width: "15%",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
align: "center",
|
||
|
|
width: "5%",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
align: "center",
|
||
|
|
width: "5%",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
align: "center",
|
||
|
|
width: "10%",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
header: ["序号", "议题标题", "处理意见", "分类", "状态", "创建时间", "发起人", "已表态/应表态", "支持", "反对", "操作"],
|
||
|
|
list: [],
|
||
|
|
pageSize: 10,
|
||
|
|
pageNo: 1,
|
||
|
|
total: 0,
|
||
|
|
},
|
||
|
|
showIssue: false,
|
||
|
|
issueId: '',
|
||
|
|
|
||
|
|
casOptions: [],
|
||
|
|
agencyIdArray: [],
|
||
|
|
customerList: [],
|
||
|
|
iscascaderShow: 0,
|
||
|
|
|
||
|
|
optionProps: {
|
||
|
|
multiple: false,
|
||
|
|
value: 'orgLevel',
|
||
|
|
label: 'agencyName',
|
||
|
|
children: 'subAgencyList',
|
||
|
|
checkStrictly: true
|
||
|
|
},
|
||
|
|
|
||
|
|
};
|
||
|
|
},
|
||
|
|
// mixins: [animate]
|
||
|
|
beforeDestroy () {
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
async mounted () {
|
||
|
|
this.dataLoading = true
|
||
|
|
await this.getAgencylist()//获取组织级别
|
||
|
|
await this.getApiData()
|
||
|
|
|
||
|
|
this.dataLoading = false
|
||
|
|
|
||
|
|
this.getPie()
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
|
||
|
|
async getApiData () {
|
||
|
|
await this.getPieChart()
|
||
|
|
await this.getTable();
|
||
|
|
},
|
||
|
|
|
||
|
|
// 获取当前登录人员信息及组织信息
|
||
|
|
async getAgencylist () {
|
||
|
|
const url = "/gov/org/customeragency/agencygridtree";
|
||
|
|
let params = {};
|
||
|
|
|
||
|
|
const { data, code, msg } = await requestPost(url, params);
|
||
|
|
if (code === 0) {
|
||
|
|
this.agencyInfo = data
|
||
|
|
this.orgId = this.agencyInfo.agencyId
|
||
|
|
this.orgType = this.agencyInfo.level === 'grid' ? 'grid' : 'agency'
|
||
|
|
|
||
|
|
if (!this.agencyInfo.latitude) {
|
||
|
|
this.agencyInfo.latitude = 36.072227
|
||
|
|
}
|
||
|
|
if (!this.agencyInfo.longitude) {
|
||
|
|
this.agencyInfo.longitude = 120.389455
|
||
|
|
}
|
||
|
|
if (!this.agencyInfo.level) {
|
||
|
|
this.agencyInfo.level = 'street'
|
||
|
|
}
|
||
|
|
|
||
|
|
//组织级联数据
|
||
|
|
++this.iscascaderShow
|
||
|
|
this.casOptions = []
|
||
|
|
this.agencyIdArray.length = []
|
||
|
|
|
||
|
|
if (data) {
|
||
|
|
this.casOptions.push(data)
|
||
|
|
this.agencyIdArray.push(this.agencyInfo.orgLevel)
|
||
|
|
}
|
||
|
|
|
||
|
|
} else {
|
||
|
|
this.$message.error(msg);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
// 获取饼状图
|
||
|
|
async getPieChart () {
|
||
|
|
if (this.$refs.pieChart) {
|
||
|
|
this.$refs.pieChart.clear()
|
||
|
|
this.$refs.pieChart.showLoading()
|
||
|
|
}
|
||
|
|
|
||
|
|
const url = "/gov/issue/issue/resibuzz-leftpiechart";
|
||
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/gov/issue/issue/resibuzz-leftpiechart";
|
||
|
|
let params = {
|
||
|
|
orgId: this.orgId,
|
||
|
|
orgType: this.orgType,
|
||
|
|
status: this.status,
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
const { data, code, msg } = await requestPost(url, params);
|
||
|
|
|
||
|
|
if (code === 0) {
|
||
|
|
if (data && data.length > 0) {
|
||
|
|
|
||
|
|
this.pieData = data
|
||
|
|
|
||
|
|
} else {
|
||
|
|
this.pieData = []
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.$refs.pieChart) {
|
||
|
|
this.$refs.pieChart.hideLoading()
|
||
|
|
}
|
||
|
|
|
||
|
|
} else {
|
||
|
|
this.$message.error(msg);
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
pieInitOk (dom) {
|
||
|
|
console.log('pie准备好了', dom)
|
||
|
|
this.pieChartS = dom
|
||
|
|
this.pieInitState = true
|
||
|
|
|
||
|
|
},
|
||
|
|
getPie () {
|
||
|
|
if (this.pieInitState) {
|
||
|
|
this.assignPieChart()
|
||
|
|
} else {
|
||
|
|
setTimeout(() => {
|
||
|
|
this.getPie()
|
||
|
|
}, 500)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
clickPie (seriesIndex) {
|
||
|
|
this.pieData.forEach((element, index) => {
|
||
|
|
if (index === seriesIndex) {
|
||
|
|
element.label = {
|
||
|
|
show: true,
|
||
|
|
|
||
|
|
};
|
||
|
|
element.labelLine = {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
opacity: 1,
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
console.log('zhilma')
|
||
|
|
|
||
|
|
} else {
|
||
|
|
element.label = {
|
||
|
|
show: false,
|
||
|
|
|
||
|
|
};
|
||
|
|
element.labelLine = {
|
||
|
|
show: false,
|
||
|
|
lineStyle: {
|
||
|
|
opacity: 0,
|
||
|
|
color: 'rgba(255,255,255,0)'
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.pieOption.series[1].data = this.pieData
|
||
|
|
|
||
|
|
this.$refs.pieChart.setOption(this.pieOption)
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
assignPieChart () {
|
||
|
|
|
||
|
|
this.pieTotal = 0
|
||
|
|
|
||
|
|
if (this.pieData.length > 0) {
|
||
|
|
this.$refs.pieChart.setNoData(false)
|
||
|
|
const _that = this
|
||
|
|
let maxIndex = 0
|
||
|
|
let maxValue = this.pieData[0].count
|
||
|
|
|
||
|
|
this.pieData[0].selected = true
|
||
|
|
|
||
|
|
this.pieData.forEach((item, index) => {
|
||
|
|
item.name = item.categoryName
|
||
|
|
item.value = item.count
|
||
|
|
this.colorArray.push(item.color)
|
||
|
|
this.pieTotal = this.pieTotal + item.value
|
||
|
|
|
||
|
|
if (item.value > maxValue) {
|
||
|
|
maxValue = item.value
|
||
|
|
maxIndex = index
|
||
|
|
item.selected = true
|
||
|
|
} else if (index !== 0) {
|
||
|
|
item.selected = false
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
// 获取pieChart配置
|
||
|
|
this.pieOption = pieOption(this.pieChartS)
|
||
|
|
this.pieOption.title.text = this.pieTotal
|
||
|
|
this.pieOption.series[1].itemStyle = {
|
||
|
|
color: function (params) {
|
||
|
|
return _that.colorArray[params.dataIndex]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.clickPie(maxIndex)
|
||
|
|
|
||
|
|
let fun = function (params) {
|
||
|
|
_that.clickPie(params.dataIndex)
|
||
|
|
}
|
||
|
|
this.$refs.pieChart.handleClick(fun)
|
||
|
|
} else {
|
||
|
|
this.$refs.pieChart.setNoData(true)
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
async handleChangeState (index) {
|
||
|
|
await this.getApiData()
|
||
|
|
this.assignPieChart()
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
async handleChangeAgency (value) {
|
||
|
|
let orgArray = []
|
||
|
|
let key = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : ''
|
||
|
|
if (key) {
|
||
|
|
orgArray = key.split('-')
|
||
|
|
this.orgId = orgArray[0]
|
||
|
|
this.orgType = orgArray[1] === 'grid' ? 'grid' : 'agency'
|
||
|
|
} else {
|
||
|
|
this.orgId = ''
|
||
|
|
this.orgType = ''
|
||
|
|
}
|
||
|
|
|
||
|
|
await this.getApiData()
|
||
|
|
this.assignPieChart()
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
//加载组织数据
|
||
|
|
async getTable () {
|
||
|
|
const url = "/gov/issue/issue/resibuzz";
|
||
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/gov/issue/issue/resibuzz";
|
||
|
|
let params = {
|
||
|
|
status: this.status,
|
||
|
|
orgId: this.orgId,
|
||
|
|
orgType: this.orgType,
|
||
|
|
pageNo: this.demand.pageNo,
|
||
|
|
pageSize: this.demand.pageSize,
|
||
|
|
};
|
||
|
|
|
||
|
|
const { data, code, msg } = await requestPost(url, params);
|
||
|
|
this.demand.loading = false;
|
||
|
|
|
||
|
|
if (code === 0) {
|
||
|
|
this.demand.total = data.total;
|
||
|
|
this.tableList = data.list
|
||
|
|
this.demand.list = data.list.map((item) => {
|
||
|
|
return [
|
||
|
|
{ type: "index" },
|
||
|
|
item.issueTitle ? item.issueTitle : '',
|
||
|
|
item.suggestion ? item.suggestion : '',
|
||
|
|
item.categoryName.join(','),
|
||
|
|
item.status ? item.status : '',
|
||
|
|
item.createdTime ? item.createdTime : '',
|
||
|
|
item.issueOriginator ? item.issueOriginator : '',
|
||
|
|
item.voteAccount ? item.voteAccount : '',
|
||
|
|
item.supportCount ? item.supportCount : 0,
|
||
|
|
item.oppositionCount ? item.oppositionCount : 0,
|
||
|
|
{ type: "operate", list: ["查看"] },
|
||
|
|
];
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
this.$message.error(msg);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
handlePageNoChange_demand (val) {
|
||
|
|
this.demand.pageNo = val;
|
||
|
|
this.getTable();
|
||
|
|
},
|
||
|
|
|
||
|
|
async toIssueInfo (index) {
|
||
|
|
const { tableList } = this;
|
||
|
|
this.issueId = tableList[index].issueId
|
||
|
|
this.showIssue = true
|
||
|
|
|
||
|
|
},
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
uid: {
|
||
|
|
type: String,
|
||
|
|
default: "",
|
||
|
|
// default: "8ada68cb6f1e4b9a8333348a39ef3aee",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
computed: {},
|
||
|
|
|
||
|
|
components: {
|
||
|
|
cptCard,
|
||
|
|
cptTb,
|
||
|
|
screenEchartsFrame,
|
||
|
|
ScreenLoading,
|
||
|
|
ScreenNodata,
|
||
|
|
issueInfo
|
||
|
|
},
|
||
|
|
|
||
|
|
watch: {
|
||
|
|
uid (id) {
|
||
|
|
this.userId = id;
|
||
|
|
},
|
||
|
|
userId () {
|
||
|
|
this.getApiData();
|
||
|
|
window.scrollTo(0, 0);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style
|
||
|
|
lang="scss"
|
||
|
|
src="@/assets/scss/modules/visual/resibuzz.scss"
|
||
|
|
scoped
|
||
|
|
></style>
|
||
|
|
|
||
|
|
<style lang=scss scoped>
|
||
|
|
</style>
|