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.
1305 lines
36 KiB
1305 lines
36 KiB
<template>
|
|
<div class="warning-box">
|
|
<cpt-card class="card-wr">
|
|
<div class="card-title">
|
|
<img class="title-icon"
|
|
src="../../../../assets/img/shuju/title-tip.png" />
|
|
<div class="title-label">
|
|
联建单位分析
|
|
<el-cascader v-model="selectAgency"
|
|
:options="propTree"
|
|
:props="{ checkStrictly: true }"
|
|
:show-all-levels="false"
|
|
clearable
|
|
@change="handleCascader">
|
|
</el-cascader>
|
|
|
|
</div>
|
|
<!-- <div class="second-select">
|
|
<el-select v-model="serviceMatter"
|
|
placeholder="请选择"
|
|
@change="handleSelectChange"
|
|
@clear="handleSelectChange">
|
|
<el-option v-for="item in unitList"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="second-select">
|
|
<el-date-picker v-model="timeRange"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
prefix-icon="el-icon-caret-bottom"
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
:clearable="false"
|
|
:default-time="['00:00:00', '23:59:59']"
|
|
@change="handleTimeChange">
|
|
</el-date-picker>
|
|
</div> -->
|
|
</div>
|
|
|
|
<div class="second-title">
|
|
<div class="second-title-label">联建单位分布</div>
|
|
</div>
|
|
|
|
<div class="box-wr calc-h">
|
|
<div class="box-left flex-column wd50">
|
|
<!-- <div v-for="(item, index) in partyItem"
|
|
:key="index"
|
|
class="box-left-item">
|
|
<div class="box-label">{{ item.label }}</div>
|
|
<div class="box-num"
|
|
:style="'color:' + item.color">{{ item.value }}</div>
|
|
</div> -->
|
|
<div class="echart-wr echart-wr100">
|
|
<screen-echarts-frame class="echart-org"
|
|
@myChartMethod="pieInitOks"
|
|
ref="eduChart"></screen-echarts-frame>
|
|
</div>
|
|
|
|
<div class="warning-box-bottom mt0 table-h">
|
|
<screen-table :headerList="headerTypeList"
|
|
:tableData="unitTableData"
|
|
:headerStyle="headerStyle"
|
|
:tableContentStyle="headerStyle"
|
|
:visibleLoading="visibleLoading"
|
|
:operate="true"
|
|
@look="handleUnitLook"></screen-table>
|
|
<div class="pagination">
|
|
<el-pagination :current-page="unitpageNo"
|
|
:page-size="unitpageSize"
|
|
background
|
|
layout="prev, pager, next"
|
|
@size-change="pageSizeHandle"
|
|
@current-change="pageCurrentHandle"
|
|
:total="unitTotal">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="box-right">
|
|
<div class="box-map">
|
|
<screen-map v-show="showMap" class="map"
|
|
ref="cmap"
|
|
:mapId="'cmap'"
|
|
:showPolygonLayer="true"
|
|
:isAddOpenlay="true"
|
|
:clickType="'popup'"
|
|
:showIconLayer="true"
|
|
:showPolIconLayer="true"
|
|
:areaScale="0.1"
|
|
@clickFeature="clickProject"
|
|
></screen-map>
|
|
</div>
|
|
<!-- <div class="map-tips">
|
|
<div v-for="(item, index) in partyItem"
|
|
:key="index"
|
|
class="map-tips-item">
|
|
<div class="map-tips-icon">
|
|
<img :src="item.icon" />
|
|
</div>
|
|
<div class="map-tips-label">{{ item.label }}</div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-title mt40">
|
|
<div class="second-title mt0">
|
|
<div class="second-title-label">联建活动分类统计</div>
|
|
|
|
</div>
|
|
<div class="second-select">
|
|
<el-select v-model="serviceMatter"
|
|
placeholder="请选择"
|
|
@change="handleSelectChange"
|
|
@clear="handleSelectChange">
|
|
<el-option v-for="item in unitList"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="second-select">
|
|
<el-date-picker v-model="timeRange"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
prefix-icon="el-icon-caret-bottom"
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
:clearable="false"
|
|
:default-time="['00:00:00', '23:59:59']"
|
|
@change="handleTimeChange">
|
|
</el-date-picker>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="box-wr box-wr-400">
|
|
<div class="box-left">
|
|
<div v-for="(item, index) in cateInfo"
|
|
:key="index"
|
|
class="box-left-item">
|
|
<div class="box-label">{{ item.label }}</div>
|
|
<div class="box-num">{{ item.value }}</div>
|
|
</div>
|
|
<!-- <div class="box-left-item">
|
|
<div class="box-label">组织活动</div>
|
|
<div class="box-num">1233</div>
|
|
</div> -->
|
|
</div>
|
|
<div class="box-right">
|
|
<div class="warning-box-bottom">
|
|
<screen-table :headerList="headerList"
|
|
:tableData="tableData"
|
|
:visibleLoading="visibleLoading"
|
|
:operate="true"
|
|
@look="handleLook"></screen-table>
|
|
<div class="pagination">
|
|
<el-pagination :current-page="pageNo"
|
|
:page-size="pageSize"
|
|
background
|
|
layout="prev, pager, next"
|
|
@size-change="pageSizeChangeHandleNew"
|
|
@current-change="pageCurrentChangeHandleNew"
|
|
:total="total">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</cpt-card>
|
|
<dialog-info v-if="showedMoreInfo" v-fixed
|
|
:info="detailInfo"
|
|
@close="showedMoreInfo = false" />
|
|
<unit-info v-if="showedUnitMoreInfo" v-fixed
|
|
:list="unitAclist"
|
|
ref="unitdetailInfo"
|
|
@close="showedUnitMoreInfo = false" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { requestPost } from "@/js/dai/request";
|
|
import util from '@js/util.js';
|
|
import screenTable from "../components/screen-table/index";
|
|
import cptCard from "@/views/modules/visual/cpts/card";
|
|
import nextTick from "dai-js/tools/nextTick";
|
|
import dialogInfo from './dialogInfo.vue'
|
|
import unitInfo from './unitInfo.vue'
|
|
import screenMap from "@/views/modules/visual/components/screen-map";
|
|
import screenEchartsFrame from "../components/screen-echarts-frame";
|
|
import { pieOption } from './options'
|
|
|
|
export default {
|
|
name: "warning-box",
|
|
components: {
|
|
cptCard,
|
|
screenTable,
|
|
dialogInfo,
|
|
unitInfo,
|
|
screenMap,
|
|
screenEchartsFrame
|
|
},
|
|
data () {
|
|
return {
|
|
|
|
showedMoreInfo: false,
|
|
showedUnitMoreInfo: false,
|
|
tableLoading: false,
|
|
warningList: [],
|
|
headerTypeList: [
|
|
{ title: "序号", coulmn: 'index' },
|
|
{ title: "单位名称", coulmn: 'unitName' },
|
|
{ title: "单位类型", coulmn: 'type' },
|
|
],
|
|
headerStyle: [
|
|
{
|
|
'width': '60px'
|
|
},
|
|
{
|
|
'min-width': '160px'
|
|
},
|
|
{
|
|
'width': '160px'
|
|
}
|
|
],
|
|
headerList: [
|
|
{ title: "序号", coulmn: 'index' },
|
|
{ title: "活动标题", coulmn: 'title' },
|
|
{ title: "单位名称", coulmn: 'unitName' },
|
|
{ title: "活动地址", coulmn: 'address' },
|
|
{ title: "服务事项", coulmn: 'serviceMatterName' },
|
|
{ title: "服务人数", coulmn: 'peopleCount' },
|
|
{ title: "活动时间", coulmn: 'activityTime' }
|
|
],
|
|
tableData: [
|
|
// [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
|
|
],
|
|
detailId: '',
|
|
unitdetailId: '',
|
|
agencyId: '',
|
|
value2: '',
|
|
timeRange: '',
|
|
visibleLoading: true,
|
|
serviceMatter: 'all',
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
unitpageNo: 1,
|
|
unitpageSize: 10,
|
|
unitTotal: 0,
|
|
unitTableData: [],
|
|
activeIndex: 0,
|
|
activeLevel: "1",
|
|
selectAgency: '',
|
|
unitList: [],
|
|
unitType: '',
|
|
propTree: [],
|
|
partyItem: [],
|
|
cateInfo: [],
|
|
//地图相关数据
|
|
isfirstInit: true,//记录是否是首次加载地图
|
|
agencyInfo: {},//登陆者的组织信息：主要为了获取地图中心点和level
|
|
unitMapList: [],
|
|
|
|
detailInfo: {},
|
|
unitdetailInfo: {},
|
|
pieEduChartSs: null,
|
|
pieEduOptions: null,
|
|
eduList: [],
|
|
partyCode: '',
|
|
totalCount: 0,
|
|
noInit: false,
|
|
orgData: [],
|
|
orgId: '',
|
|
orgLevel: '',
|
|
parentPolygon: [],
|
|
unitAclist: [],
|
|
showMap: false
|
|
};
|
|
},
|
|
async mounted () {
|
|
const { user } = this.$store.state
|
|
this.agencyId = user.agencyId
|
|
console.log('agencyId-------', this.agencyId)
|
|
this.initTime()
|
|
await nextTick(100);
|
|
await this.getAgencyList()
|
|
await this.loadOrgData()
|
|
await this.getCateType(this.agencyId)
|
|
this.loadUnit()
|
|
this.getList(this.agencyId)
|
|
this.getUnitList(this.agencyId)
|
|
this.getCateCount(this.agencyId)
|
|
|
|
|
|
await this.getWorkUserInfo()
|
|
// await this.getMapUnitList(this.agencyId)
|
|
},
|
|
watch: {
|
|
timeRange (val) {
|
|
console.log('val-www', val)
|
|
// this.getList(this.agencyId);
|
|
// this.getCateCount(this.agencyId)
|
|
}
|
|
},
|
|
methods: {
|
|
pieInitOks (dom) {
|
|
console.log('pies准备好了', dom)
|
|
this.pieEduChartS = dom
|
|
// this.pieInitState = true
|
|
|
|
},
|
|
initEduCharts() {
|
|
// const eId = document.getElementById('echartOrg')
|
|
// let _charts = echarts.init(eId)
|
|
let option = {
|
|
|
|
}
|
|
let legend = {
|
|
show: true,
|
|
orient: 'vertical',
|
|
top: '20%',
|
|
right: 0,
|
|
textStyle: {
|
|
width: 90,
|
|
color: '#fff',
|
|
rich: {
|
|
a: {
|
|
width: 90
|
|
}
|
|
}
|
|
},
|
|
formatter: name => {
|
|
for (let a = 0; a < this.partyItem.length; a++) {
|
|
// this.data 这个数据中有名称和次数
|
|
if (this.partyItem[a].name === name) {
|
|
//两个名称进行对比，取出对应的次数
|
|
let params1 = name + "\n"; //然后return你需要的legend格式即可
|
|
console.log(params1);
|
|
let tmp = params1.split("\n");
|
|
let res = "" + params1;
|
|
for (let i in tmp) {
|
|
res = res.replace(tmp[i], "");
|
|
}
|
|
return res + params1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
this.pieEduOptions = pieOption(this.pieEduChartS)
|
|
this.pieEduOptions.legend = { ...legend }
|
|
// this.pieEduOptions.series[1].width = 400
|
|
this.clickEduPie(0)
|
|
let fun = params => {
|
|
this.clickEduPie(params.dataIndex)
|
|
}
|
|
this.$refs.eduChart.handleClick(fun)
|
|
// this.noInit = true
|
|
// option && this.$refs.pieChart.setOption(option);
|
|
|
|
},
|
|
clickEduPie (seriesIndex) {
|
|
let _code = ''
|
|
let isClick = false
|
|
this.partyItem.forEach((element, index) => {
|
|
if (index === seriesIndex) {
|
|
_code = element.code
|
|
|
|
if (!this.noInit) isClick = false
|
|
else {
|
|
element.isClick = !element.isClick
|
|
isClick = element.isClick
|
|
}
|
|
|
|
element.label = {
|
|
show: true,
|
|
|
|
};
|
|
element.labelLine = {
|
|
show: true,
|
|
lineStyle: {
|
|
opacity: 1,
|
|
}
|
|
|
|
};
|
|
console.log('zlcm')
|
|
} else {
|
|
element.isClick = false
|
|
element.label = {
|
|
show: false,
|
|
|
|
};
|
|
element.labelLine = {
|
|
show: false,
|
|
lineStyle: {
|
|
opacity: 0,
|
|
color: 'rgba(255,255,255,0)'
|
|
}
|
|
|
|
};
|
|
|
|
}
|
|
});
|
|
this.unitType = isClick && _code || ''
|
|
this.pieEduOptions.title.text = this.totalCount
|
|
this.pieEduOptions.series[1].data = this.partyItem
|
|
// this.$refs.pieChart.hideLoading()
|
|
this.$refs.eduChart.setOption(this.pieEduOptions)
|
|
if (this.noInit) {
|
|
const _arr = this.selectAgency[this.selectAgency.length - 1].split('-')
|
|
const orgType = _arr[1] !== 'grid' ? 'agency': 'grid'
|
|
this.unitpageNo = 1
|
|
this.getUnitList(_arr[0])
|
|
// this.getCateType(_arr[0], isClick && _code || '')
|
|
}
|
|
this.noInit = true
|
|
|
|
|
|
},
|
|
handleTimeChange (time) {
|
|
if (time) {
|
|
const startTimeArray = util.dateFormatter(time[0], 'date').split('-')
|
|
const endTimeArray = util.dateFormatter(time[1], 'date').split('-')
|
|
|
|
const startTime = startTimeArray[0] + '-' + startTimeArray[1] + '-' + startTimeArray[2] + ' 00:00:00'
|
|
const endTime = endTimeArray[0] + '-' + endTimeArray[1] + '-' + endTimeArray[2] + ' 23:59:59'
|
|
this.timeRange = [startTime, endTime]
|
|
// this.startTimeShow = startTimeArray[0] + '年' + startTimeArray[1] + '月' + startTimeArray[2] + '日'
|
|
// this.endTimeShow = endTimeArray[0] + '年' + endTimeArray[1] + '月' + endTimeArray[2] + '日'
|
|
} else {
|
|
this.initTime()
|
|
}
|
|
this.getList(this.agencyId);
|
|
this.getCateCount(this.agencyId)
|
|
},
|
|
// 根据单位获取活动类表
|
|
async getAcList (agencyId, unitId) {
|
|
|
|
const url = "/heart/icpartyactivity/activitylist"
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/list"
|
|
let params = {
|
|
pageNo: 1,
|
|
pageSize: 9999,
|
|
agencyId,
|
|
unitId
|
|
}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
|
|
if (code === 0) {
|
|
this.unitAclist = data.list && data.list.map((item, index) => {
|
|
return {
|
|
...item,
|
|
index: index + 1
|
|
}
|
|
})
|
|
if (this.unitAclist.length > 0) this.showedUnitMoreInfo = true
|
|
else this.$message.warning('该单位还没有活动')
|
|
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
//具体活动列表
|
|
async getList (agencyId) {
|
|
this.visibleLoading = true
|
|
|
|
const url = "/heart/icpartyactivity/activitylist"
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/list"
|
|
let params = {
|
|
agencyId,
|
|
pageSize: this.pageSize,
|
|
pageNo: this.pageNo,
|
|
serviceMatter: this.serviceMatter == 'all' ? '' : this.serviceMatter,
|
|
startTime: this.timeRange && this.timeRange[0] || '',
|
|
endTime: this.timeRange && this.timeRange[1] || ''
|
|
}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
|
|
if (code === 0) {
|
|
this.total = data.total
|
|
this.tableData = data.list.map((item, index) => {
|
|
return {
|
|
...item,
|
|
index: index + 1
|
|
}
|
|
})
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
this.visibleLoading = false
|
|
},
|
|
// 获取联建单位
|
|
async getUnitList (agencyId) {
|
|
this.visibleLoading = true
|
|
// this.showMap = false
|
|
const url = "/heart/icpartyunit/listbrief"
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/list"
|
|
let params = {
|
|
agencyId,
|
|
pageSize: this.unitpageSize,
|
|
pageNo: this.unitpageNo,
|
|
type: this.unitType
|
|
}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
|
|
if (code === 0) {
|
|
this.showMap = false
|
|
this.unitTotal = data.total
|
|
this.unitTableData = data.list.map((item, index) => {
|
|
return {
|
|
...item,
|
|
index: index + 1
|
|
}
|
|
})
|
|
const url = require('../../../../assets/img/shuju/measure/other.png')
|
|
this.iconUrlArray = [url]
|
|
|
|
this.showMap = true
|
|
//第一次加载完置为false
|
|
this.$nextTick(() => {
|
|
|
|
this.loadMap()
|
|
this.$forceUpdate()
|
|
this.isfirstInit = false
|
|
})
|
|
// this.isfirstInit = false
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
this.visibleLoading = false
|
|
},
|
|
async getAgencyList () {
|
|
// const url = "/gov/org/customeragency/staffinagencylist";
|
|
// const url = '/gov/org/customeragency/agencygridtree'
|
|
const url = '/gov/org/customeragency/staffinagencylist'
|
|
// let params = {
|
|
// agencyId: this.$store.state.user.agencyId,
|
|
// };
|
|
const { data, code, msg } = await requestPost(url);
|
|
if (code === 0) {
|
|
console.log('data-org----o', data)
|
|
let { agencyList, subAgencyList } = data
|
|
this.selectAgency = [`${agencyList.agencyId}-${agencyList.level}`]
|
|
let arr = []
|
|
agencyList.subAgencyList = subAgencyList
|
|
arr.push(agencyList)
|
|
this.propTree = arr && this.getTreeData(arr)
|
|
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
async loadOrgData () {
|
|
|
|
const url = "/gov/org/agency/maporg"
|
|
let params = {
|
|
orgId: this.orgId,
|
|
level: this.orgLevel
|
|
}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
|
|
if (code === 0) {
|
|
|
|
this.orgData = data
|
|
this.orgId = this.orgData.id
|
|
this.orgLevel = this.orgData.level
|
|
this.parentPolygon = []
|
|
this.parentPolygon = data.children.map(item => {
|
|
return {
|
|
...item,
|
|
color: "#00E5ED",
|
|
fillColor: "rgba(0, 229, 237, 0.16)"
|
|
}
|
|
})
|
|
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
|
|
},
|
|
getTreeData (data) {
|
|
if (!Array.isArray(data)) return []
|
|
let arr = data.map(item => {
|
|
let _item = {}
|
|
if (item.subAgencyList) {
|
|
if (item.subAgencyList.length === 0) {
|
|
_item = {
|
|
label: item.agencyName,
|
|
value: item.agencyId + '-' + item.level,
|
|
level: item.level,
|
|
children: undefined
|
|
}
|
|
} else _item = {
|
|
label: item.agencyName,
|
|
value: item.agencyId + '-' + item.level,
|
|
level: item.level,
|
|
children: this.getTreeData(item.subAgencyList)
|
|
}
|
|
} else {
|
|
_item = {
|
|
label: item.agencyName,
|
|
value: item.agencyId + '-' + item.level,
|
|
level: item.level,
|
|
}
|
|
}
|
|
return _item
|
|
})
|
|
return arr
|
|
},
|
|
async getCateCount (agencyId) {
|
|
|
|
const url = "/heart/icpartyactivity/statistics"
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/list"
|
|
let params = {
|
|
agencyId,
|
|
serviceMatter: this.serviceMatter == 'all' ? '' : this.serviceMatter,
|
|
startTime: this.timeRange && this.timeRange[0] || '',
|
|
endTime: this.timeRange && this.timeRange[1] || ''
|
|
}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
|
|
if (code === 0) {
|
|
this.cateInfo = data
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
async getCateType (agencyId) {
|
|
|
|
const url = "/heart/icpartyunit/typestatistics"
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/list"
|
|
let params = {
|
|
agencyId,
|
|
// serviceMatter: this.serviceMatter == 'all' ? '' : this.serviceMatter,
|
|
// startTime: this.timeRange && this.timeRange[0] || '',
|
|
// endTime: this.timeRange && this.timeRange[1] || ''
|
|
}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
|
|
if (code === 0) {
|
|
// this.cateInfo = data
|
|
const colorItem = {
|
|
0: {
|
|
color: 'rgba(250, 32, 10, 1)',
|
|
icon: require('../../../../assets/img/shuju/measure/lxdj.png')
|
|
},
|
|
1: {
|
|
color: 'rgba(251, 177, 4, 1)',
|
|
icon: require('../../../../assets/img/shuju/measure/lxzz.png')
|
|
},
|
|
2: {
|
|
color: 'rgba(80, 194, 237, 1)',
|
|
icon: require('../../../../assets/img/shuju/measure/qydw.png')
|
|
},
|
|
3: {
|
|
color: 'rgba(65, 181, 104, 1)',
|
|
icon: require('../../../../assets/img/shuju/measure/jgzs.png')
|
|
},
|
|
4: {
|
|
color: 'rgba(192, 21, 195, 1)',
|
|
icon: require('../../../../assets/img/shuju/measure/qita.png')
|
|
},
|
|
5: {
|
|
color: '#ee7801',
|
|
icon: require('../../../../assets/img/shuju/measure/minban.png')
|
|
},
|
|
6: {
|
|
color: '#e70683',
|
|
icon: require('../../../../assets/img/shuju/measure/jijin.png')
|
|
},
|
|
7: {
|
|
color: '#0189d5',
|
|
icon: require('../../../../assets/img/shuju/measure/other.png')
|
|
}
|
|
}
|
|
this.partyItem = data.map((item, index) => {
|
|
return {
|
|
...item,
|
|
...colorItem[index],
|
|
name: item.label,
|
|
isClick: false
|
|
}
|
|
})
|
|
this.totalCount = 0
|
|
data.forEach(item => {
|
|
this.totalCount += Number(item.value)
|
|
})
|
|
this.initEduCharts()
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
async getDetail (id) {
|
|
|
|
const url = "/heart/icpartyactivity/detail"
|
|
let params = {
|
|
id: id
|
|
}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
|
|
if (code === 0) {
|
|
this.detailInfo = data
|
|
this.detailInfo.serviceMatterNameShow = data.serviceMatterNameList.join(',')
|
|
this.detailInfo.unitNameShow = data.unitNameList.join(',')
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
async handleCascader (val) {
|
|
console.log('val-vvv', val)
|
|
if (val.length > 0) {
|
|
const _arr = val[val.length - 1].split('-')
|
|
const orgType = _arr[1] !== 'grid' ? 'agency' : 'grid'
|
|
this.agencyId = _arr[0]
|
|
this.orgId = _arr[0]
|
|
this.orgLevel = orgType
|
|
this.unitType = ''
|
|
this.getList(_arr[0])
|
|
await this.getCateType(_arr[0])
|
|
await this.loadOrgData()
|
|
this.agencyInfo = { ...this.orgData }
|
|
console.log('agencyInfo-----', this.agencyInfo)
|
|
this.getUnitList(_arr[0])
|
|
// this.getMapUnitList(_arr[0])
|
|
this.getCateCount(_arr[0])
|
|
|
|
}
|
|
|
|
},
|
|
initTime () {
|
|
const end = new Date();
|
|
const start = new Date();
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
console.log('time-rtt', this.timeFormat(start), this.timeFormat(end))
|
|
this.timeRange = [this.timeFormat(start, '00:00:00'), this.timeFormat(end, '23:59:59')]
|
|
},
|
|
timeFormat (date, h) {
|
|
if (!date || typeof date === 'string') {
|
|
return false
|
|
}
|
|
var y = date.getFullYear() //年
|
|
var m = date.getMonth() + 1 //月
|
|
if (m < 10) m = '0' + m
|
|
var d = date.getDate() //日
|
|
if (d < 10) d = '0' + d
|
|
|
|
return y + '-' + m + '-' + d + ' ' + h
|
|
},
|
|
async loadUnit () {
|
|
const url = "/heart/serviceitem/dict-list"
|
|
|
|
let params = {
|
|
|
|
}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
|
|
if (code === 0) {
|
|
this.unitList = data
|
|
this.unitList.unshift({
|
|
label: '全部',
|
|
value: 'all'
|
|
})
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
|
|
},
|
|
|
|
// 获取当前管理员信息
|
|
getWorkUserInfo () {
|
|
const url = '/epmetuser/customerstaff/staffbasicinfo'
|
|
let params = {}
|
|
window.app.ajax.post(
|
|
url,
|
|
params,
|
|
(data, rspMsg) => {
|
|
this.agencyInfo = data
|
|
if (!data.latitude) {
|
|
this.agencyInfo.latitude = 36.072227
|
|
}
|
|
if (!data.longitude) {
|
|
this.agencyInfo.longitude = 120.389455
|
|
}
|
|
if (!data.level) {
|
|
this.agencyInfo.level = 'street'
|
|
}
|
|
|
|
},
|
|
(rspMsg, data) => {
|
|
this.$message.error(rspMsg)
|
|
}
|
|
)
|
|
|
|
},
|
|
|
|
// //获取分类
|
|
// async loadType () {
|
|
// const url = "/sys/dict/data/dictlist"
|
|
|
|
// let params = {
|
|
// dictType: 'party_unit_type'
|
|
// }
|
|
|
|
// const { data, code, msg } = await requestPost(url, params)
|
|
|
|
// if (code === 0) {
|
|
// this.typeList = data
|
|
|
|
// } else {
|
|
// this.$message.error(msg)
|
|
// }
|
|
|
|
// },
|
|
|
|
//获取联建单位分布图
|
|
async getMapUnitList (agencyId) {
|
|
const url = "/heart/icpartyunit/distribution"
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/distribution"
|
|
|
|
let params = {
|
|
agencyId
|
|
}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
|
|
if (code === 0) {
|
|
console.log('unitMapList----data', data)
|
|
this.unitMapList = data.map((item, index) => {
|
|
return {
|
|
...item,
|
|
urlIndex: index
|
|
}
|
|
})
|
|
|
|
console.log('unitMapList----', this.unitMapList)
|
|
this.unitMapList.forEach(item => {
|
|
|
|
if (item.type === '楼宇党建') {
|
|
item.urlIndex = 0
|
|
} else if (item.type === '两新组织') {
|
|
item.urlIndex = 1
|
|
} else if (item.type === '区域单位党建') {
|
|
item.urlIndex = 2
|
|
} else if (item.type === '机关直属部门') {
|
|
item.urlIndex = 3
|
|
} else if (item.type === '社会团体') {
|
|
item.urlIndex = 4
|
|
} else if (item.type === '民办非企业单位') {
|
|
item.urlIndex = 5
|
|
} else if (item.type === '基金会') {
|
|
item.urlIndex = 6
|
|
} else if (item.type === '其他') {
|
|
item.urlIndex = 7
|
|
}
|
|
});
|
|
const url = require('../../../../assets/img/shuju/measure/other.png')
|
|
// this.iconUrlArray = [
|
|
// require('../../../../assets/img/shuju/measure/lxdj.png'),//楼宇党建
|
|
// require('../../../../assets/img/shuju/measure/lxzz.png'),//两新组织
|
|
// require('../../../../assets/img/shuju/measure/qydw.png'),//区域单位党建
|
|
// require('../../../../assets/img/shuju/measure/jgzs.png'),//机关直属部门
|
|
// require('../../../../assets/img/shuju/measure/qita.png'),//社会团体
|
|
// require('../../../../assets/img/shuju/measure/minban.png'),//民办
|
|
// require('../../../../assets/img/shuju/measure/jijin.png'),//基金
|
|
// require('../../../../assets/img/shuju/measure/other.png')//其他
|
|
// ]
|
|
this.iconUrlArray = [url, url, url, url, url, url, url, url]
|
|
|
|
|
|
//第一次加载完置为false
|
|
this.loadMap()
|
|
|
|
this.isfirstInit = false
|
|
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
|
|
},
|
|
|
|
|
|
//加载地图数据
|
|
loadMap () {
|
|
if (this.isfirstInit) {
|
|
//mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray
|
|
|
|
const polIconUrlArray = [
|
|
'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png'
|
|
]
|
|
console.log('this.unitTableData', this.unitTableData)
|
|
this.$refs.cmap.loadMap(this.agencyInfo, this.parentPolygon, polIconUrlArray, this.unitTableData, this.iconUrlArray, null)
|
|
} else {
|
|
this.$refs.cmap.refreshMap(this.agencyInfo, this.parentPolygon, this.unitTableData)
|
|
|
|
}
|
|
},
|
|
|
|
//点击项目
|
|
async clickProject (feature) {
|
|
console.log('标注信息', feature.values_.properties)
|
|
if (!feature.values_.properties.info.id) {
|
|
return false
|
|
}
|
|
const info = feature.values_.properties.info
|
|
const url = "/heart/icpartyunit/detail"
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/distribution"
|
|
|
|
let params = {
|
|
id: info.id
|
|
}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
|
|
if (code === 0) {
|
|
console.log('data-------', data)
|
|
let _info = {
|
|
unitName: '',
|
|
type: '',
|
|
contact: '',
|
|
contactMobile: '',
|
|
memberCount: '',
|
|
remark: '',
|
|
address: ''
|
|
}
|
|
let coordinate = [info.longitude, info.latitude]
|
|
for(const n in _info) {
|
|
_info[n] = data[n] && data[n] || '--'
|
|
}
|
|
_info.type = info.type
|
|
|
|
|
|
let showData = `
|
|
<div style='font-size:16px; color:#FFFFFF;'>单位信息</div>
|
|
<div style='font-size:12px; color:#FFFFFF;margin-top:10px'>单位名称：
|
|
<span>`+ _info.unitName + `</span>
|
|
</div>
|
|
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>单位类型：
|
|
<span>`+ _info.type + `</span>
|
|
</div>
|
|
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>联系人：
|
|
<span>`+ _info.contact + `</span>
|
|
</div>
|
|
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>联系电话：
|
|
<span>`+ _info.contactMobile + `</span>
|
|
</div>
|
|
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>在职党员：
|
|
<span>`+ _info.memberCount + `</span>
|
|
</div>
|
|
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>备注：
|
|
<span>`+ _info.remark + `</span>
|
|
</div>
|
|
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>地址：
|
|
<span>`+ _info.address + `</span>
|
|
</div>
|
|
`
|
|
this.$refs.cmap.handleShowPopup(showData, coordinate)
|
|
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
async handleLook (val) {
|
|
|
|
this.detailId = val.id
|
|
await this.getDetail(val.id)
|
|
this.showedMoreInfo = true
|
|
},
|
|
async handleUnitLook(val) {
|
|
this.unitdetailId = val.id
|
|
// await this.getDetail(val.id)
|
|
// this.showedUnitMoreInfo = true
|
|
await this.getAcList(this.agencyId, val.id)
|
|
this.$nextTick(() => {
|
|
console.log('this.$refs', this.$refs['unitdetailInfo'])
|
|
this.$refs['unitdetailInfo'].getDetail(this.unitAclist[0].id)
|
|
})
|
|
},
|
|
|
|
handleSelectChange (val) {
|
|
this.getList(this.agencyId);
|
|
this.getCateCount(this.agencyId)
|
|
},
|
|
pageSizeChangeHandleNew (val) {
|
|
this.pageNo = 1;
|
|
this.pageSize = val;
|
|
this.getList(this.agencyId);
|
|
},
|
|
pageCurrentChangeHandleNew (val) {
|
|
this.pageNo = val;
|
|
this.getList(this.agencyId);
|
|
},
|
|
pageCurrentHandle(val) {
|
|
this.unitpageNo = val
|
|
this.getUnitList(this.agencyId)
|
|
},
|
|
pageSizeHandle(val) {
|
|
this.unitpageSize = val
|
|
this.getUnitList(this.agencyId)
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style
|
|
lang="scss"
|
|
src="@/assets/scss/modules/visual/warning.scss"
|
|
scoped
|
|
></style>
|
|
<style lang="scss" scoped>
|
|
.warning-box {
|
|
display: flex;
|
|
.card-wr {
|
|
flex: 1;
|
|
}
|
|
.card-wr:last-child {
|
|
margin-left: 20px;
|
|
}
|
|
::v-deep .table-body {
|
|
overflow: auto;
|
|
&::-webkit-scrollbar {
|
|
width: 8px;
|
|
// background: linear-gradient(270deg, #0063FE, #0095FF);
|
|
}
|
|
|
|
&::-webkit-scrollbar-corner,
|
|
/* 滚动条角落 */
|
|
&::-webkit-scrollbar-thumb,
|
|
&::-webkit-scrollbar-track {
|
|
/*滚动条的轨道*/
|
|
border-radius: 4px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-corner,
|
|
&::-webkit-scrollbar-track {
|
|
/* 滚动条轨道 */
|
|
|
|
background: rgba(12, 129, 254, 0.24);
|
|
// box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
/* 滚动条手柄 */
|
|
background: linear-gradient(270deg, #0063fe, #0095ff);
|
|
}
|
|
}
|
|
}
|
|
.card-title {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
.title-icon {
|
|
display: block;
|
|
width: 46px;
|
|
height: 34px;
|
|
box-sizing: border-box;
|
|
margin-right: 6px;
|
|
}
|
|
.title-label {
|
|
font-size: 20px;
|
|
font-weight: 800;
|
|
::v-deep .el-input {
|
|
width: 180px;
|
|
margin-left: 10px;
|
|
.el-input__inner {
|
|
font-size: 18px;
|
|
// font-weight: 800;
|
|
color: #fff;
|
|
background: #06186d;
|
|
border: 1px solid #1a64cc;
|
|
}
|
|
.el-icon-arrow-down::before {
|
|
content: "\e790";
|
|
}
|
|
}
|
|
}
|
|
::v-deep .el-dropdown {
|
|
font-size: 16px;
|
|
color: #fff;
|
|
font-weight: 800;
|
|
}
|
|
}
|
|
.second-title {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 20px;
|
|
.second-title-label {
|
|
position: relative;
|
|
padding-left: 40px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
}
|
|
.second-title-label::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 20px;
|
|
width: 12px;
|
|
height: 12px;
|
|
box-sizing: border-box;
|
|
margin-top: -6px;
|
|
background: #2865fa;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.second-select {
|
|
margin: 0 10px 0 10px;
|
|
::v-deep .el-input {
|
|
width: 180px;
|
|
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";
|
|
}
|
|
// .el-select__caret:before {
|
|
// content: '\E790'
|
|
// }
|
|
}
|
|
::v-deep .el-date-editor {
|
|
width: 360px;
|
|
position: relative;
|
|
background: #06186d;
|
|
border: 1px solid #1a64cc;
|
|
.el-range-input {
|
|
color: #fff;
|
|
background: #06186d;
|
|
}
|
|
.el-range-separator {
|
|
color: #fff;
|
|
}
|
|
.el-range__icon {
|
|
position: absolute;
|
|
right: 5px;
|
|
// float: right;
|
|
}
|
|
.el-input__prefix {
|
|
left: unset;
|
|
right: 5px;
|
|
}
|
|
}
|
|
}
|
|
.second-select:last-child {
|
|
margin-left: 0;
|
|
}
|
|
.box-wr {
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
.box-left {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
.box-left-item {
|
|
.box-label {
|
|
font-size: 16px;
|
|
color: rgba(255, 255, 255, 0.72);
|
|
}
|
|
.box-num {
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.box-right {
|
|
flex: 1;
|
|
height: 100%;
|
|
margin-left: 10px;
|
|
overflow: hidden;
|
|
.pagination {
|
|
margin-top: 0;
|
|
}
|
|
.box-map {
|
|
height: 100%;
|
|
// border: 1px solid #2865fa;
|
|
|
|
.map {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
.box-left-w400 {
|
|
flex-wrap: wrap;
|
|
width: 400px;
|
|
box-sizing: border-box;
|
|
padding-top: 60px;
|
|
padding-left: 100px;
|
|
.box-left-item {
|
|
width: 50%;
|
|
}
|
|
}
|
|
}
|
|
.flex-column {
|
|
flex-direction: column;
|
|
}
|
|
.box-wr-400 {
|
|
height: 400px;
|
|
.box-left {
|
|
width: 300px;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.box-left-item:last-child {
|
|
margin-top: 100px;
|
|
}
|
|
}
|
|
}
|
|
.echart-wr {
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
width: 90%;
|
|
height: 320px;
|
|
box-sizing: border-box;
|
|
.echart-org {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.echart-cicle {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 240px;
|
|
height: 240px;
|
|
box-sizing: border-box;
|
|
margin-top: -120px;
|
|
margin-left: -120px;
|
|
border: 1px dashed rgba(0, 96, 240, 1);
|
|
border-radius: 50%;
|
|
}
|
|
.echart-cicle0 {
|
|
left: 80px;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
.table-h {
|
|
height: calc(100vh - 630px);
|
|
}
|
|
.calc-h {
|
|
height: calc(100vh - 240px);
|
|
padding-bottom: 20px;
|
|
}
|
|
.wd50 {
|
|
width: 50%;
|
|
}
|
|
.map-tips {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
padding-top: 10px;
|
|
padding-bottom: 20px;
|
|
.map-tips-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 20px;
|
|
margin-right: 40px;
|
|
.map-tips-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
box-sizing: border-box;
|
|
margin-right: 10px;
|
|
// background: #DD2719;
|
|
// border-radius: 2px;
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.map-tips-label {
|
|
font-size: 16px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.mt0 {
|
|
margin: 0;
|
|
}
|
|
.mt40 {
|
|
margin-top: 40px;
|
|
}
|
|
</style>
|
|
|