13176889840
3 years ago
5 changed files with 1049 additions and 4 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