zhaoyongnian
3 years ago
4 changed files with 1006 additions and 1 deletions
@ -0,0 +1,736 @@ |
|||||
|
<template> |
||||
|
<div class="warning-box"> |
||||
|
<cpt-card> |
||||
|
<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" |
||||
|
:getCheckedNodes="getCheckedNodes" |
||||
|
clearable |
||||
|
@change="handleCascader"> |
||||
|
</el-cascader> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="card-echart"> |
||||
|
<div class="card-left"> |
||||
|
<!-- <div class="card-left-title">党员学历统计</div> --> |
||||
|
<div class="card-flex"> |
||||
|
<div class="echart-wr echart-wr100"> |
||||
|
<screen-echarts-frame class="echart-org" |
||||
|
@myChartMethod="pieInitOks" |
||||
|
ref="eduChart"></screen-echarts-frame> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="warning-box-bottom"> |
||||
|
<screen-table |
||||
|
:headerList="headerEduList" |
||||
|
:tableData="eduList" |
||||
|
:headerStyle="headerStyle" |
||||
|
:tableContentStyle="headerStyle" |
||||
|
:visibleLoading="visibleLoading" |
||||
|
:operate="false" |
||||
|
@row="handleClickRow" |
||||
|
></screen-table> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination |
||||
|
:current-page="pageNo" |
||||
|
:page-size="pageSize" |
||||
|
background |
||||
|
layout="prev, pager, next" |
||||
|
@size-change="pageSizeChangeHandle" |
||||
|
@current-change="pageCurrentChangeHandle" |
||||
|
:total="total" |
||||
|
> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="card-right"> |
||||
|
<screen-map class="map" |
||||
|
ref="map" |
||||
|
@clickFeature="clickProject" |
||||
|
@lookMore="lookMore" |
||||
|
:showPolygonLayer="true" |
||||
|
:isAddOpenlay="true" |
||||
|
:clickType="'popup'" |
||||
|
:showIconLayer="true" |
||||
|
:showPolIconLayer="true" |
||||
|
:areaScale="0.1"></screen-map> |
||||
|
</div> |
||||
|
</div> |
||||
|
</cpt-card> |
||||
|
<member-info v-if="showedUnitMoreInfo" |
||||
|
:list="unitAclist" |
||||
|
ref="unitdetailInfo" |
||||
|
@close="showedUnitMoreInfo = false" /> |
||||
|
<people-more v-show="showedMoreInfo" |
||||
|
v-if="userId" |
||||
|
:userId="userId" |
||||
|
:gridName="''" |
||||
|
@close="showedMoreInfo = false" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { requestPost } from "@/js/dai/request"; |
||||
|
import screenTable from "../components/screen-table/index"; |
||||
|
import cptCard from "@/views/modules/visual/cpts/card"; |
||||
|
import nextTick from "dai-js/tools/nextTick"; |
||||
|
import screenEchartsFrame from "../components/screen-echarts-frame"; |
||||
|
import { pieOption } from './options' |
||||
|
import * as echarts from 'echarts'; |
||||
|
import screenMap from "@/views/modules/visual/components/screen-map"; |
||||
|
import memberInfo from './memberInfo.vue' |
||||
|
import peopleMore from "@/views/modules/visual/basicinfo/cpts/people-more"; |
||||
|
|
||||
|
export default { |
||||
|
name: "gridParty", |
||||
|
components: { |
||||
|
cptCard, |
||||
|
screenTable, |
||||
|
screenEchartsFrame, |
||||
|
screenMap, |
||||
|
memberInfo, |
||||
|
peopleMore |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
headerStyle: [ |
||||
|
{ |
||||
|
'max-width': '60px' |
||||
|
}, |
||||
|
{ |
||||
|
'min-width': '100px' |
||||
|
}, |
||||
|
{ |
||||
|
'min-width': '100px' |
||||
|
}, |
||||
|
{ |
||||
|
'min-width': '160px' |
||||
|
} |
||||
|
], |
||||
|
headerEduList: [ |
||||
|
{ title: "序号", coulmn: 'index' }, |
||||
|
{ title: "姓名", coulmn: 'name' }, |
||||
|
{ title: "手机号码", coulmn: 'mobile' } |
||||
|
], |
||||
|
noEduInit: false, |
||||
|
selectAgency: null, |
||||
|
eduTotalCount: 0, |
||||
|
propTree: [], |
||||
|
visibleLoading: true, |
||||
|
agencyId: '', |
||||
|
orgType: '', |
||||
|
eduCode: '', // 点击饼状图 查询列表，查询地图 |
||||
|
pageNo: 1, |
||||
|
pageSize: 10, |
||||
|
total: 0, |
||||
|
eduItem: [], |
||||
|
eduList: [], |
||||
|
pieEduOptions: null, |
||||
|
showedUnitMoreInfo: false, |
||||
|
unitAclist: [], |
||||
|
// 地图相关*********************************************start |
||||
|
isfirstInit: true, |
||||
|
agencyInfo: {},//登陆者的组织信息：主要为了获取地图中心点和level |
||||
|
iconUrlArray: [], |
||||
|
parentPolygon: [], |
||||
|
orgId: '', |
||||
|
unitMapList: [], |
||||
|
showedMoreInfo: false, |
||||
|
userId:"", |
||||
|
// 地图相关*********************************************end |
||||
|
}; |
||||
|
}, |
||||
|
async mounted() { |
||||
|
await nextTick(100); |
||||
|
await this.getAgencyList() |
||||
|
this.agencyId = this.$store.state.user.agencyId |
||||
|
this.getEduCount(this.$store.state.user.agencyId) // 饼状统计图 |
||||
|
this.getEduList() // 左下角列表数据 |
||||
|
// 地图相关start |
||||
|
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') |
||||
|
] |
||||
|
await this.loadOrgData() |
||||
|
await this.getWorkUserInfo() |
||||
|
this.loadMap() |
||||
|
this.isfirstInit = false |
||||
|
// 地图相关end |
||||
|
}, |
||||
|
methods: { |
||||
|
loadMap () { |
||||
|
if (this.isfirstInit) { |
||||
|
const polIconUrlArray = [ |
||||
|
'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png' |
||||
|
] |
||||
|
this.$refs.map.loadMap(this.agencyInfo, this.parentPolygon, polIconUrlArray, this.unitMapList, this.iconUrlArray, null,) |
||||
|
} else { |
||||
|
this.$refs.map.refreshMap(this.agencyInfo, this.parentPolygon, this.unitMapList) |
||||
|
} |
||||
|
}, |
||||
|
// 加载组织树 |
||||
|
async getAgencyList(node, resolve) { |
||||
|
const url = '/gov/org/customeragency/agencygridtree' |
||||
|
// let params = { |
||||
|
// agencyId: this.$store.state.user.agencyId, |
||||
|
// }; |
||||
|
const { data, code, msg } = await requestPost(url); |
||||
|
if (code === 0) { |
||||
|
console.log('data-org----o', data) |
||||
|
this.selectAgency = [`${data.agencyId}-${data.level}`] |
||||
|
this.orgType = data.level |
||||
|
this.agencyId = data.agencyId |
||||
|
let arr = [] |
||||
|
arr.push(data) |
||||
|
this.propTree = arr && this.getTreeData(arr) |
||||
|
} else { |
||||
|
} |
||||
|
}, |
||||
|
// 组织树相关方法 |
||||
|
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 handleCascader(val) { |
||||
|
console.log('val-vvv', val) |
||||
|
const _arr = val[val.length - 1].split('-') |
||||
|
const orgType = _arr[1] !== 'grid' ? 'agency': 'grid' |
||||
|
this.agencyId = _arr[0] |
||||
|
this.orgId = _arr[0] |
||||
|
this.orgType = orgType |
||||
|
this.noEduInit = false |
||||
|
this.agencyInfo = { ...this.orgData } |
||||
|
console.log('agencyInfo-----', this.agencyInfo) |
||||
|
this.eduCode = '' |
||||
|
await this.loadOrgData() |
||||
|
this.getEduCount(_arr[0]) |
||||
|
this.eduList = [] |
||||
|
this.pageNo = 1; |
||||
|
this.pageSize = 10; |
||||
|
await this.getEduList() |
||||
|
this.getMapData() |
||||
|
}, |
||||
|
// 图标相关********************************* |
||||
|
// 饼状统计 |
||||
|
async getEduCount(agencyId) { |
||||
|
const url = "/epmetuser/icVolunteerPoly/statistics"; |
||||
|
let params = { |
||||
|
agencyId |
||||
|
}; |
||||
|
const { data, code, msg } = await requestPost(url, params); |
||||
|
if (code === 0) { |
||||
|
this.eduItem = data.map(item => { |
||||
|
return { |
||||
|
...item, |
||||
|
name: item.label, |
||||
|
isClick: false |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
this.eduTotalCount = 0 |
||||
|
data.forEach(item => { |
||||
|
this.eduTotalCount += Number(item.value) |
||||
|
}) |
||||
|
this.initEduCharts() |
||||
|
} else { |
||||
|
} |
||||
|
}, |
||||
|
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.eduItem.length; a++) { |
||||
|
// this.data 这个数据中有名称和次数 |
||||
|
if (this.eduItem[a].name === name) { |
||||
|
//两个名称进行对比，取出对应的次数 |
||||
|
let params1 = name + "\n"; //然后return你需要的legend格式即可 |
||||
|
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.clickEduPie(0) |
||||
|
let fun = params => { |
||||
|
this.clickEduPie(params.dataIndex) |
||||
|
} |
||||
|
this.$refs.eduChart.handleClick(fun) |
||||
|
}, |
||||
|
// 点击饼状图 |
||||
|
clickEduPie (seriesIndex) { |
||||
|
let _code = '' |
||||
|
let isClick = false |
||||
|
this.eduItem.forEach((element, index) => { |
||||
|
if (index === seriesIndex) { |
||||
|
_code = element.code |
||||
|
|
||||
|
if (!this.noEduInit) 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.eduCode = isClick && _code || '' |
||||
|
this.pieEduOptions.title.text = this.eduTotalCount |
||||
|
this.pieEduOptions.series[1].data = this.eduItem |
||||
|
// this.$refs.pieChart.hideLoading() |
||||
|
this.$refs.eduChart.setOption(this.pieEduOptions) |
||||
|
if (this.noEduInit) { |
||||
|
const _arr = this.selectAgency[this.selectAgency.length - 1].split('-') |
||||
|
const orgType = _arr[1] !== 'grid' ? 'agency': 'grid' |
||||
|
this.pageNo = 1 |
||||
|
this.getEduList(isClick && _code || '') |
||||
|
this.getMapData(isClick && _code || '') |
||||
|
} |
||||
|
this.noEduInit = true |
||||
|
}, |
||||
|
// 列表相关************************************* |
||||
|
// 请求列表数据 |
||||
|
async getEduList(_code) { |
||||
|
this.visibleLoading = true |
||||
|
const url = "/epmetuser/icVolunteerPoly/list"; |
||||
|
let params = { |
||||
|
code: this.eduCode, |
||||
|
agencyId: this.agencyId, |
||||
|
pageNo: this.pageNo, |
||||
|
pageSize: this.pageSize |
||||
|
}; |
||||
|
const { data, code, msg } = await requestPost(url, params); |
||||
|
if (code === 0) { |
||||
|
this.eduList = data.list.map((item, index) => { |
||||
|
return { |
||||
|
...item, |
||||
|
index: index + 1 |
||||
|
} |
||||
|
}) |
||||
|
this.total = data.total |
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
this.visibleLoading = false |
||||
|
}, |
||||
|
pieInitOks (dom) { |
||||
|
console.log('pies准备好了', dom) |
||||
|
this.pieEduChartS = dom |
||||
|
// this.pieInitState = true |
||||
|
}, |
||||
|
// 点击列表 |
||||
|
handleClickRow(val) { |
||||
|
this.servicelist(val.idCard) |
||||
|
}, |
||||
|
// 多元-社区自组织服务需求分页列表 |
||||
|
async servicelist (idCard) { |
||||
|
const url = "/heart/residemand/service-list"; |
||||
|
let params = { |
||||
|
pageNo: 1, |
||||
|
pageSize: 1000, |
||||
|
type: 'volunteer', // 志愿者：volunteer；社区自组织：community_org； |
||||
|
idCard: idCard, // volunteer时传入此参数。 |
||||
|
serverId: '' |
||||
|
}; |
||||
|
const { data, code, msg } = await requestPost(url, params); |
||||
|
if (code === 0) { |
||||
|
if (data.list.length > 0) { |
||||
|
this.showedUnitMoreInfo = true |
||||
|
this.unitAclist = data.list |
||||
|
this.$nextTick(() => { |
||||
|
console.log(this.unitAclist[0].demandRecId) |
||||
|
this.$refs['unitdetailInfo'].getDetail(this.unitAclist[0].demandRecId) |
||||
|
}) |
||||
|
} else { |
||||
|
this.showedUnitMoreInfo = false |
||||
|
this.unitAclist = [] |
||||
|
this.$message.warning('该志愿者还没有需求') |
||||
|
} |
||||
|
} else { |
||||
|
} |
||||
|
}, |
||||
|
getCheckedNodes(val) { |
||||
|
console.log('val-nnn', val) |
||||
|
}, |
||||
|
pageSizeChangeHandle(val) { |
||||
|
this.pageNo = 1; |
||||
|
this.pageSize = val; |
||||
|
this.getEduList(this.eduCode) |
||||
|
}, |
||||
|
pageCurrentChangeHandle(val) { |
||||
|
this.pageNo = val; |
||||
|
this.getEduList(this.eduCode) |
||||
|
}, |
||||
|
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) |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
// 获取当前管理员信息 |
||||
|
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) |
||||
|
} |
||||
|
) |
||||
|
|
||||
|
}, |
||||
|
// 获取位置信息 |
||||
|
getMapData () { |
||||
|
const url = '/epmetuser/icVolunteerPoly/mapData' |
||||
|
let params = { |
||||
|
agencyId: this.agencyId, |
||||
|
code: this.eduCode |
||||
|
} |
||||
|
window.app.ajax.post( |
||||
|
url, |
||||
|
params, |
||||
|
(data, rspMsg) => { |
||||
|
this.unitMapList = data |
||||
|
this.isfirstInit = false |
||||
|
this.loadMap() |
||||
|
}, |
||||
|
(rspMsg, data) => { |
||||
|
this.$message.error(rspMsg) |
||||
|
} |
||||
|
) |
||||
|
}, |
||||
|
//点击项目 |
||||
|
async clickProject (feature) { |
||||
|
this.userId = '' |
||||
|
const featureInfo = feature.values_.properties.info |
||||
|
this.userId = feature.values_.properties.info.id |
||||
|
console.log('feature.values_.properties.info:::', JSON.stringify(feature.values_.properties.info)) |
||||
|
let coordinate = [featureInfo.longitude, featureInfo.latitude] |
||||
|
console.log(feature.values_.properties.info) |
||||
|
let showData = ` |
||||
|
<div style='font-size:16px; color:#FFFFFF;'>个人信息</div> |
||||
|
<div style='font-size:12px; color:#FFFFFF;margin-top:10px'>姓名： |
||||
|
<span>`+ feature.values_.properties.info.name + `</span> |
||||
|
</div> |
||||
|
<div style='font-size:12px; color:#FFFFFF;margin-top:10px'>所属网格： |
||||
|
<span>`+ feature.values_.properties.info.gridName + `</span> |
||||
|
</div> |
||||
|
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>所属房屋： |
||||
|
<span>`+ feature.values_.properties.info.houseName + `</span> |
||||
|
</div> |
||||
|
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>手机号： |
||||
|
<span>`+ feature.values_.properties.info.mobile + `</span> |
||||
|
</div> |
||||
|
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>身份证号： |
||||
|
<span>`+ feature.values_.properties.info.idCard + `</span> |
||||
|
</div> |
||||
|
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>工作单位： |
||||
|
<span>`+ feature.values_.properties.info.gzdw + `</span> |
||||
|
</div> |
||||
|
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>人户状况： |
||||
|
<span>`+ feature.values_.properties.info.rhzk + `</span> |
||||
|
</div> |
||||
|
` |
||||
|
this.$refs.map.handleShowPopup(showData, coordinate, true) |
||||
|
}, |
||||
|
lookMore(e) { |
||||
|
this.userId = this.userId |
||||
|
console.log('userId:', this.userId) |
||||
|
this.showedMoreInfo = true |
||||
|
} |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style |
||||
|
lang="scss" |
||||
|
src="@/assets/scss/modules/visual/warning.scss" |
||||
|
scoped |
||||
|
></style> |
||||
|
<style |
||||
|
lang="scss" |
||||
|
src="@/assets/scss/modules/visual/basicInfoMain.scss" |
||||
|
scoped |
||||
|
></style> |
||||
|
<style lang="scss" scoped> |
||||
|
.card-title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
cursor: pointer; |
||||
|
.title-icon { |
||||
|
display: block; |
||||
|
width: 46px; |
||||
|
height: 34px; |
||||
|
box-sizing: border-box; |
||||
|
margin-right: 6px; |
||||
|
} |
||||
|
::v-deep .el-dropdown { |
||||
|
font-size: 18px; |
||||
|
color: #fff; |
||||
|
font-weight: 800; |
||||
|
} |
||||
|
.title-time { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
box-sizing: border-box; |
||||
|
margin-left: 30px; |
||||
|
font-size: 14px; |
||||
|
color: #fff; |
||||
|
.title-time-label { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
::v-deep .el-date-editor--month { |
||||
|
width: 100px; |
||||
|
.el-input__inner { |
||||
|
width: 100px; |
||||
|
height: 24px; |
||||
|
box-sizing: border-box; |
||||
|
padding: 0; |
||||
|
font-size: 14px; |
||||
|
color: #fff; |
||||
|
line-height: 24px; |
||||
|
text-align: center; |
||||
|
background: #06186D; |
||||
|
border: 1px solid #1A64CC; |
||||
|
border-radius: 2px; |
||||
|
} |
||||
|
.el-input__prefix { |
||||
|
display: none; |
||||
|
} |
||||
|
.el-input__suffix { |
||||
|
right: 0; |
||||
|
.el-input__icon { |
||||
|
line-height: 24px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.title-label { |
||||
|
font-size: 20px; |
||||
|
font-weight: 800; |
||||
|
::v-deep .el-input { |
||||
|
|
||||
|
width: 180px; |
||||
|
.el-input__inner { |
||||
|
font-size: 18px; |
||||
|
// font-weight: 800; |
||||
|
color: #fff; |
||||
|
background: #06186d; |
||||
|
border: 1px solid #1a64cc; |
||||
|
} |
||||
|
.el-icon-arrow-down::before { |
||||
|
content: "\e790"; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.card-echart { |
||||
|
display: flex; |
||||
|
margin-top: 40px; |
||||
|
height: 100%; |
||||
|
.card-left { |
||||
|
position: relative; |
||||
|
flex: 1; |
||||
|
height: 100%; |
||||
|
width: 50%; |
||||
|
.card-flex { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
} |
||||
|
} |
||||
|
.card-right { |
||||
|
position: relative; |
||||
|
flex: 1; |
||||
|
height: 790px; |
||||
|
width: 50%; |
||||
|
.map { |
||||
|
height: 100%; |
||||
|
width: 100%; |
||||
|
} |
||||
|
.div_map { |
||||
|
box-sizing: border-box; |
||||
|
height: 100%; |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.card-left-title { |
||||
|
position: relative; |
||||
|
padding-left: 40px; |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
color: #fff; |
||||
|
} |
||||
|
.card-left-title::after { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
left: 20px; |
||||
|
width: 12px; |
||||
|
height: 12px; |
||||
|
box-sizing: border-box; |
||||
|
margin-top: -6px; |
||||
|
background: #2865FA; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
.echart-wr { |
||||
|
position: relative; |
||||
|
flex-shrink: 0; |
||||
|
width: 50%; |
||||
|
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; |
||||
|
} |
||||
|
} |
||||
|
.echart-wr100 { |
||||
|
width: 70%; |
||||
|
} |
||||
|
.warning-box-bottom { |
||||
|
height: calc(100% - 500px); |
||||
|
box-sizing: border-box; |
||||
|
margin: 0; |
||||
|
padding: 0 30px; |
||||
|
// overflow-y: scroll; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,251 @@ |
|||||
|
<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="list-wr info-h"> |
||||
|
<div class="list-left info-scroll"> |
||||
|
<div v-for="(item, index) in list" :key="item.id" class="left-item" |
||||
|
:class="current == index &&'left-item-on'" @click="handleTabs(item, index)"> |
||||
|
<div class="item-title">{{ item.content }}</div> |
||||
|
<div class="item-time">{{ item.reportTime }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="list-right list-wr info-scroll"> |
||||
|
<div class="list"> |
||||
|
|
||||
|
<div class="item"> |
||||
|
<span class="item-field">所属网格：</span> |
||||
|
<span v-if="info.gridName">{{ info.gridName }}</span> |
||||
|
</div> |
||||
|
<div class="item"> |
||||
|
<span class="item-field">需求类型：</span> |
||||
|
<span v-if="info.categoryName">{{ info.categoryName }}</span> |
||||
|
</div> |
||||
|
<div class="item"> |
||||
|
<span class="item-field">上报人：</span> |
||||
|
<span v-if="info.reportUserName">{{ info.reportUserName }}</span> |
||||
|
</div> |
||||
|
<div class="item"> |
||||
|
<span class="item-field">上报人手机：</span> |
||||
|
<span v-if="info.reportUserMobile">{{ info.reportUserMobile }}</span> |
||||
|
</div> |
||||
|
<div class="item"> |
||||
|
<span class="item-field">上报时间：</span> |
||||
|
<span v-if="info.reportTime">{{ info.reportTime }}</span> |
||||
|
</div> |
||||
|
<div class="item"> |
||||
|
<span class="item-field">需求人：</span> |
||||
|
<span v-if="info.demandUserName">{{ info.demandUserName }}</span> |
||||
|
</div> |
||||
|
<div class="item"> |
||||
|
<span class="item-field">服务时间：</span> |
||||
|
<span v-if="info.wantServiceTime">{{ info.wantServiceTime }}</span> |
||||
|
</div> |
||||
|
<div class="item"> |
||||
|
<span class="item-field">需求内容：</span> |
||||
|
<span v-if="info.content">{{ info.content }}</span> |
||||
|
</div> |
||||
|
<div class="item"> |
||||
|
<span class="item-field">服务方：</span> |
||||
|
<span v-if="info.serviceShowName">{{ info.serviceShowName }}</span> |
||||
|
</div> |
||||
|
<div class="item"> |
||||
|
<span class="item-field">实际服务时间：</span> |
||||
|
<span v-if="info.categoryName">{{ info.serviceStartTime }} 至 {{ info.serviceEndTime }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- <div class="tabs"> |
||||
|
<div |
||||
|
class="tab-btn" |
||||
|
> |
||||
|
<img src="@/assets/img/shuju/people/arrow-double-left.png" /> |
||||
|
</div> |
||||
|
<div |
||||
|
class="tab z-on" |
||||
|
> |
||||
|
研判分析 |
||||
|
</div> |
||||
|
<div |
||||
|
class="tab-btn" |
||||
|
> |
||||
|
<img src="@/assets/img/shuju/people/arrow-double-right.png" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div style="padding: 30px 0;"> |
||||
|
<analyse :single-list="demandList" :single-title="'需求上报'" :more-title="'事件上报'" :user-list="userLists" |
||||
|
:user-name="userName" :has-event="false" :more-list="eventList" /> |
||||
|
</div> --> |
||||
|
|
||||
|
|
||||
|
</cpt-card> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import cptCard from "@/views/modules/visual/cpts/card"; |
||||
|
import analyse from '../cpts/analyse.vue' |
||||
|
import { requestPost } from "@/js/dai/request"; |
||||
|
|
||||
|
export default { |
||||
|
name: "dialogInfo", |
||||
|
props: { |
||||
|
list: { |
||||
|
type: Array, |
||||
|
default: () => [], |
||||
|
}, |
||||
|
type: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
agencyId: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
components: { |
||||
|
cptCard, |
||||
|
analyse |
||||
|
}, |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
list: [], |
||||
|
current: 0, |
||||
|
info: {} |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
mounted() { |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
handleClose() { |
||||
|
this.$emit("close"); |
||||
|
}, |
||||
|
handleTabs(item, index) { |
||||
|
this.current = index |
||||
|
this.getDetail(item.demandRecId) |
||||
|
}, |
||||
|
async getDetail (id) { |
||||
|
this.info = {} |
||||
|
const _id = this.list[0].id |
||||
|
const url = "/heart/userdemand/demandDetail" |
||||
|
let params = { |
||||
|
demandRecId: id || _id |
||||
|
} |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.info = data |
||||
|
// this.info.serviceMatterNameShow = data.serviceMatterNameList.join(',') |
||||
|
// this.info.unitNameShow = data.unitNameList.join(',') |
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" src="@/assets/scss/modules/visual/people.scss" scoped></style> |
||||
|
<style lang="scss" scoped> |
||||
|
.m-pop { |
||||
|
.wrap { |
||||
|
margin-bottom: 0; |
||||
|
.list { |
||||
|
display: block; |
||||
|
width: 50%; |
||||
|
.item { |
||||
|
display: flex; |
||||
|
width: 100%; |
||||
|
box-sizing: border-box; |
||||
|
margin-top: 0; |
||||
|
margin-bottom: 15px; |
||||
|
font-size: 16px; |
||||
|
cursor: pointer; |
||||
|
.item-field { |
||||
|
// width: 100px; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
.item-content { |
||||
|
width: 100%; |
||||
|
max-height: 420px; |
||||
|
overflow-y: auto; |
||||
|
|
||||
|
} |
||||
|
::v-deep p { |
||||
|
margin: 0; |
||||
|
img { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.item-desc { |
||||
|
font-size: 16px; |
||||
|
margin-bottom: 10px; |
||||
|
line-height: 24px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.list-title { |
||||
|
width: 100%; |
||||
|
box-sizing: border-box; |
||||
|
padding: 20px 0 10px 62px; |
||||
|
font-size: 20px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
.list-wr { |
||||
|
display: flex; |
||||
|
padding: 0 32px; |
||||
|
|
||||
|
} |
||||
|
.list-left { |
||||
|
width: 180px; |
||||
|
height: 100%; |
||||
|
box-sizing: border-box; |
||||
|
padding-right: 20px; |
||||
|
flex-shrink: 0; |
||||
|
border-right: 1px dashed #1257c9; |
||||
|
overflow: auto; |
||||
|
.left-item { |
||||
|
padding: 10px 0; |
||||
|
cursor: pointer; |
||||
|
.item-title { |
||||
|
font-size: 16px; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
margin-bottom: 5px; |
||||
|
} |
||||
|
} |
||||
|
.left-item-on { |
||||
|
color: #0095FF; |
||||
|
} |
||||
|
} |
||||
|
.list-right { |
||||
|
flex: 1; |
||||
|
height: 100%; |
||||
|
overflow: auto; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</style> |
||||
Loading…
Reference in new issue