diff --git a/src/assets/scss/modules/visual/distributionAnalyze.scss b/src/assets/scss/modules/visual/distributionAnalyze.scss new file mode 100644 index 00000000..a5c3918e --- /dev/null +++ b/src/assets/scss/modules/visual/distributionAnalyze.scss @@ -0,0 +1,135 @@ +@import '../../c/config'; +@import '../../c/function'; +@import './c/common'; + +.title { + padding: 10px; + font-size: 22px; + font-family: PingFang SC; + font-weight: 800; + color: #ffffff; + display: flex; + align-items: center; + position: relative; + + img { + display: block; + margin-right: 5px; + } + span { + display: block; + } + + .second-select { + margin: 0 10px 0 40px; + + ::v-deep .el-input { + width: 140px; + height: 36px; + .el-input__inner { + height: 100%; + padding: 0 10px; + color: #fff; + line-height: 36px; + background: #06186d; + border: 1px solid #1a64cc; + } + .el-icon-arrow-up:before { + content: '\e78f'; + } + } + ::v-deep .el-date-editor { + .el-input__prefix { + left: unset; + right: 5px; + } + } + } + + .cascader { + ::v-deep .el-input { + width: 220px; + } + } + .status-select { + position: absolute; + top: 20px; + right: 10px; + } + .second-select:last-child { + margin-left: 0; + } +} + +.g-cpt-resi { + display: flex; + flex-direction: row; + // flex-wrap: wrap; + // justify-content: center; + height: calc(100vh - 130px); + + .g-l { + flex-shrink: 0; + width: 600px; + height: calc(100vh - 190px); + } + + .g-r { + text-align: center; + margin: 40px 19px 20px; + width: calc(100vw - 60px - 600px); + height: calc(100vh - 140px - 20px); + } +} + +.g-r { + .tb { + position: relative; + height: calc(100vh - 220px); + overflow-y: auto; + @include scrollBar; + + .m-pagination { + position: absolute; + box-sizing: border-box; + right: 0; + bottom: 0; + + width: 100%; + height: 40px; + display: flex; + justify-content: flex-end; + + /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active { + background: #0266d1; + color: #000d3f; + } + + /deep/ .el-pagination .el-pager li { + background: #002e74; + } + + /deep/ .el-pagination .btn-prev { + background: #002e74; + } + + /deep/ .el-pagination .btn-next { + background: #002e74; + } + } + } +} + +.echart-wr { + margin-left: 30px; + // margin-top: 100px; + text-align: center; + position: relative; + width: 500px; + height: 100%; + box-sizing: border-box; + .echart-org { + width: 100%; + height: 90%; + } +} diff --git a/src/assets/scss/modules/visual/processAnalyze.scss b/src/assets/scss/modules/visual/processAnalyze.scss index 82b0e311..2f228f2e 100644 --- a/src/assets/scss/modules/visual/processAnalyze.scss +++ b/src/assets/scss/modules/visual/processAnalyze.scss @@ -200,10 +200,10 @@ } .status-closed { - border-radius: 5px 0 0 0; } .status-pending { + border-radius: 5px 0 0 0; } .sel-status { background-color: #082586; diff --git a/src/router/index.js b/src/router/index.js index bc43c78a..fff616d1 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -274,7 +274,7 @@ router.beforeEach((to, from, next) => { }, { url: "/visual/communityGovern/distributionAnalyze", - name: "项目分布分析", + name: "事件分类分析", id: "distributionAnalyze", }, ], diff --git a/src/views/modules/visual/communityGovern/distributionAnalyze.vue b/src/views/modules/visual/communityGovern/distributionAnalyze.vue index e69de29b..c4e04f5c 100644 --- a/src/views/modules/visual/communityGovern/distributionAnalyze.vue +++ b/src/views/modules/visual/communityGovern/distributionAnalyze.vue @@ -0,0 +1,436 @@ + + + + + + + diff --git a/src/views/modules/visual/communityGovern/distributionLineOption.js b/src/views/modules/visual/communityGovern/distributionLineOption.js new file mode 100644 index 00000000..ef7dec01 --- /dev/null +++ b/src/views/modules/visual/communityGovern/distributionLineOption.js @@ -0,0 +1,77 @@ +import * as echarts from 'echarts' +export function lineOption () { + + return { + + xAxis: { + type: 'category', + // boundaryGap: false, + axisLabel: { + color: '#8ec7dc', + fontSize: 16 + }, + axisTick: { + show: false + }, + axisLine: { + lineStyle: { + color: '#0c4b59' + } + } + }, + yAxis: { + nameTextStyle: { + color: '#8ec7dc', + fontSize: 18 + }, + splitNumber: 4, + minInterval: 1, + show: true, + type: 'value', + axisLabel: { + color: '#8ec7dc', + fontSize: 18 + }, + axisTick: { + show: false + }, + splitLine: { + lineStyle: { + color: ['#145968'], + type: 'dotted' + } + }, + axisLine: { + show: true, + symbol: ['none', 'arrow'], + symbolOffset: [0, 15], + lineStyle: { + color: '#0c4b59' + } + } + }, + series: [ + { + name: '项目数', + type: 'line', + barWidth: 15, + areaStyle: {}, + itemStyle: { + color: new echarts.graphic.LinearGradient( + 0, 1, 0, 0, + [ + { offset: 0, color: 'rgba(121, 55, 255, 0)' }, + { offset: 1, color: '#6339FF' } + ] + ) + } + }, + // { + // data: [820, 932, 901, 934, 1290, 1330, 1320], + // type: 'line', + // areaStyle: {} + // } + ] + + } +} diff --git a/src/views/modules/visual/communityGovern/processAnalyze.vue b/src/views/modules/visual/communityGovern/processAnalyze.vue index 88fe8925..f4c6f7e5 100644 --- a/src/views/modules/visual/communityGovern/processAnalyze.vue +++ b/src/views/modules/visual/communityGovern/processAnalyze.vue @@ -19,6 +19,7 @@ @@ -60,20 +61,20 @@ @clickFeature="clickProject" :showIconLayer="true">
-
已完结
未完结
+ @click="handleChangeStatus('pending')">未结案
+
已结案
+
- - - 已完结 - 未完结 + 未结案 + + 已结案 +
@@ -127,7 +128,7 @@ export default { dateId: '', agencyId: '', - status: 'closed',//状态:待处理 pending,结案closed + status: 'pending',//状态:待处理 pending,结案closed agencyInfo: {}, projectList: [], projectList1: [ @@ -196,6 +197,8 @@ export default { async mounted () { this.userId = this.uid; this.initData() + await this.getWorkUserInfo() + await this.getAgencylist()//获取组织级别 this.getApiData(); }, @@ -206,14 +209,17 @@ export default { }, async getApiData () { - await this.getWorkUserInfo() - // await this.getAgencylist()//获取组织级别 await this.getProjectTotal() await this.loadProjectlist() await this.getLine() }, + handleChangeDate (value) { + this.dateId = value + this.getApiData() + }, + // 获取当前管理员信息 getWorkUserInfo () { const url = '/epmetuser/customerstaff/staffbasicinfo' @@ -239,7 +245,8 @@ export default { // const url = 'http://yapi.elinkservice.cn/mock/102/gov/org/agency/agencylist' const params = { - customerId: '613cc61a6b8ce4c70d21bd413dac72cc' + // customerId: '613cc61a6b8ce4c70d21bd413dac72cc' + customerId: '0c41b272ee9ee95ac6f184ad548a30eb' } const { data, code, msg } = await requestPost(url, params) if (code === 0) { @@ -471,7 +478,6 @@ export default { }); - this.pieOption.title.text = this.pieTotal this.clickPie(0) @@ -527,6 +533,7 @@ export default { this.agencyName = this.$refs["myCascader"].getCheckedNodes()[0].label this.agencyId = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : '' + this.getApiData() console.log(this.agencyIdArray) }, diff --git a/src/views/modules/visual/communityGovern/resiPieOption.js b/src/views/modules/visual/communityGovern/resiPieOption.js index 64b6ad98..7d195966 100644 --- a/src/views/modules/visual/communityGovern/resiPieOption.js +++ b/src/views/modules/visual/communityGovern/resiPieOption.js @@ -85,7 +85,7 @@ const center= ['50%', '250px'] // formatter: '{a|{c}}\n\n{name|{b}}', formatter: '{a|{c}}\n{r|}\n{name|{b}}', minMargin: 5, - edgeDistance: 1, + edgeDistance: -20, lineHeight: 15, color: '#fff', fontSize: 12, diff --git a/src/views/modules/visual/communityGovern/resibuzz.vue b/src/views/modules/visual/communityGovern/resibuzz.vue index 8b7406b6..f042af0b 100644 --- a/src/views/modules/visual/communityGovern/resibuzz.vue +++ b/src/views/modules/visual/communityGovern/resibuzz.vue @@ -93,7 +93,7 @@ export default { { count: 300, categoryName: '环境保护', color: '#FF7800' }, { count: 1048, categoryName: '建设管理', color: '#FFBA00' }, { count: 735, categoryName: '街道吹哨部门报到', color: '#FFD685' }, - { count: 580, categoryName: '社会治安综合', color: '#2A00FF' }, + { count: 1580, categoryName: '社会治安综合', color: '#2A00FF' }, { count: 484, categoryName: '公安交通管理', color: '#C600FF' }, { count: 300, categoryName: '卫生计生监管执法', color: '#FF2A00' }, { count: 484, categoryName: '民生', color: '#3DDA83' }, @@ -215,7 +215,8 @@ export default { // const url = 'http://yapi.elinkservice.cn/mock/102/gov/org/agency/agencylist' const params = { - customerId: '613cc61a6b8ce4c70d21bd413dac72cc' + // customerId: '613cc61a6b8ce4c70d21bd413dac72cc' + customerId: '0c41b272ee9ee95ac6f184ad548a30eb' } const { data, code, msg } = await requestPost(url, params) if (code === 0) { @@ -275,12 +276,24 @@ export default { this.pieData = [{ count: 0, categoryName: '无分类', color: '#00E5ED' }] } - this.pieData.forEach(item => { + let maxValue = this.pieData[0].count + let maxIndex = 0 + 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 + } + }); @@ -290,7 +303,7 @@ export default { return _that.colorArray[params.dataIndex] } } - this.clickPie(0) + this.clickPie(maxIndex) let fun = function (params) { _that.clickPie(params.dataIndex) diff --git a/src/views/modules/visual/communityGovern/typeAnalyze.vue b/src/views/modules/visual/communityGovern/typeAnalyze.vue index 69a2c766..8e77ebdb 100644 --- a/src/views/modules/visual/communityGovern/typeAnalyze.vue +++ b/src/views/modules/visual/communityGovern/typeAnalyze.vue @@ -2,7 +2,7 @@
- 居民热议 + 事件分类分析
@@ -15,17 +15,17 @@ @change="handleChangeAgency" clearable>
-
- - - - +
+ + + +
@@ -70,7 +70,7 @@ 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 { pieOption } from './resiPieOption.js' +import { pieOption } from './typePieOption.js' export default { @@ -86,41 +86,23 @@ export default { 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: 580, 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' - }, + { total: 1048, categoryName: '城市管理', color: '#1B51FF', selected: true }, + { total: 735, categoryName: '为民服务', color: '#00E5ED' }, + { total: 580, categoryName: '安全监管', color: '#7800FF' }, + { total: 484, categoryName: '民政', color: '#16D783' }, + { total: 300, categoryName: '环境保护', color: '#FF7800' }, + { total: 1049, categoryName: '建设管理', color: '#FFBA00' }, + { total: 735, categoryName: '街道吹哨部门报到', color: '#FFD685' }, + { total: 580, categoryName: '社会治安综合', color: '#2A00FF' }, + { total: 484, categoryName: '公安交通管理', color: '#C600FF' }, + { total: 300, categoryName: '卫生计生监管执法', color: '#FF2A00' }, + { total: 484, categoryName: '民生', color: '#3DDA83' }, + { total: 300, categoryName: '街道安全', color: '#FAC126' } ], - status: 'all', - orgId: '', + agencyId: '', + dateId: '', + categoryCode: '', demand: { loading: true, colList: [ @@ -132,18 +114,10 @@ export default { align: "center", width: "10%", }, - { - align: "center", - width: "20%", - }, { align: "center", width: "10%", }, - { - align: "center", - width: "5%", - }, { align: "center", width: "10%", @@ -154,22 +128,22 @@ export default { }, { align: "center", - width: "15%", + width: "5%", }, { align: "center", - width: "5%", + width: "20%", }, { align: "center", - width: "5%", + width: "10%", }, { align: "center", width: "10%", }, ], - header: ["序号", "议题标题", "处理意见", "分类", "状态", "创建时间", "发起人", "已表态/应表态", "支持", "反对", "操作"], + header: ["序号", "项目编号", "类别", "反映渠道", "所属网格", "状态", "项目标题", "转成项目时间", "操作"], list: [], pageSize: 10, pageNo: 1, @@ -199,13 +173,19 @@ export default { async mounted () { this.userId = this.uid; + this.initData() + await this.getAgencylist()//获取组织级别 this.getApiData(); }, methods: { + initData () { + var time = (new Date).getTime() - 24 * 60 * 60 * 1000; + this.dateId = new Date(time); // 获取的是前一天日期 + }, async getApiData () { - await this.getAgencylist()//获取组织级别 + await this.getPie() await this.getTable(); }, @@ -215,7 +195,8 @@ export default { // const url = 'http://yapi.elinkservice.cn/mock/102/gov/org/agency/agencylist' const params = { - customerId: '613cc61a6b8ce4c70d21bd413dac72cc' + // customerId: '613cc61a6b8ce4c70d21bd413dac72cc' + customerId: '0c41b272ee9ee95ac6f184ad548a30eb' } const { data, code, msg } = await requestPost(url, params) if (code === 0) { @@ -232,6 +213,12 @@ export default { } }, + handleChangeDate (value) { + + this.dateId = value + this.getApiData() + }, + pieInitOk (dom) { console.log('pie准备好了', dom) @@ -254,17 +241,16 @@ export default { this.pieTotal = 0 const _that = this // this.$refs.pieChart.showLoading() - // const url ="/gov/issue/issue/resibuzz-leftpiechart"; - const url = "http://yapi.elinkservice.cn/mock/245/gov/issue/issue/resibuzz-leftpiechart"; + // const url ="/data/aggregator/project/projectcategorylist"; + const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/project/projectcategorylist"; let params = { - orgId: this.orgId, + agencyId: this.agencyId, + dateId: this.dateId, }; const { data, code, msg } = await requestPost(url, params); // 获取pieChart配置 - - if (code === 0) { // 获取pieChart配置 this.pieOption = pieOption(this.pieChartS) @@ -272,35 +258,50 @@ export default { // this.pieData = data } else { - this.pieData = [{ count: 0, categoryName: '无分类', color: '#00E5ED' }] + this.pieData = [{ total: 0, categoryName: '无分类', color: '#00E5ED' }] } - this.pieData.forEach(item => { + let maxValue = this.pieData[0].total + let maxIndex = 0 + this.pieData[0].selected = true + this.pieData.forEach((item, index) => { item.name = item.categoryName - item.value = item.count + item.value = item.total 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 + } + }); + this.pieOption.title.text = this.pieTotal this.pieOption.series[1].itemStyle = { color: function (params) { return _that.colorArray[params.dataIndex] } } - this.clickPie(0) + let fun = function (params) { _that.clickPie(params.dataIndex) + + _that.categoryCode = _that.pieData[params.dataIndex].categoryCode + _that.getTable() } this.$refs.pieChart.handleClick(fun) + this.clickPie(maxIndex) } else { this.$message.error(msg); } - }, clickPie (seriesIndex) { @@ -341,26 +342,25 @@ export default { }, - handleChangeState (index) { - this.getTable() - }, - handleChangeAgency (value) { - console.log(value) + this.agencyName = this.$refs["myCascader"].getCheckedNodes()[0].label - this.orgId = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : '' + this.agencyId = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : '' + this.getApiData() console.log(this.agencyIdArray) }, //加载组织数据 async getTable () { - // const url = "/gov/issue/issue/resibuzz"; - const url = "http://yapi.elinkservice.cn/mock/245/gov/issue/issue/resibuzz"; + // const url = "/data/aggregator/project/categoryprojectlist"; + const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/project/categoryprojectlist"; let params = { - status: this.status, - orgId: this.orgId, + dateId: this.dateId, + agencyId: this.agencyId, + categoryCode: this.categoryCode, pageNo: this.demand.pageNo, pageSize: this.demand.pageSize, + isPage: true }; const { data, code, msg } = await requestPost(url, params); @@ -369,17 +369,19 @@ export default { if (code === 0) { this.demand.total = data.total; this.demand.list = data.list.map((item) => { + //楼院小组:issue; 项目立项:agency 事件上报:resi_event【也可控制点击查看时里边三个按钮的显示】 + item.originShow = item.origin === 'issue' ? '楼院小组' : item.origin === 'agency' ? '项目立项' : '事件上报' + //状态:待处理 pending,已结案closed + item.statusShow = item.status === 'pending' ? '待处理' : '已结案' return [ { type: "index" }, - item.issueTitle, - item.suggestion, - item.categoryName, - item.status, - item.createdTime, - item.issueOriginator, - item.voteAccount, - item.supportCount, - item.oppositionCount, + item.projectCode, + item.categoryNames.join(','), + item.originShow, + item.gridName, + item.statusShow, + item.title, + item.time, { type: "operate", list: ["查看"] }, ]; });