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.
821 lines
23 KiB
821 lines
23 KiB
<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"
|
|
clearable
|
|
@change="handleCascader">
|
|
</el-cascader>
|
|
</div>
|
|
</div>
|
|
<div class="box-wr">
|
|
<div class="card-wr">
|
|
<div class="card-title">
|
|
<!-- <img class="title-icon"
|
|
src="../../../../assets/img/shuju/title-tip.png" /> -->
|
|
<div class="card-left-title">
|
|
志愿者服务情况
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-echart">
|
|
<div class="card-left">
|
|
<div class="card-count">
|
|
<div class="card-count-item">
|
|
<div class="card-count-content">
|
|
<div class="card-count-num">{{ vInfo.partyTotal || 0 }}</div>
|
|
<div class="card-count-label">党员数量</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-count-item">
|
|
<div class="card-count-content">
|
|
<div class="card-count-num">{{ vInfo.resiTotal || 0 }}</div>
|
|
<div class="card-count-label">居民数量</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="echart-wr">
|
|
<!-- <div class="echart-cicle"></div> -->
|
|
<div id="echartService"
|
|
class="echart-org"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="card-echart">
|
|
<div class="card-left">
|
|
<div class="card-count">
|
|
<div class="card-count-item">
|
|
<div class="card-count-content">
|
|
<div class="card-count-num">{{ vInfo.partyServiceTotal || 0 }}</div>
|
|
<div class="card-count-label">党员服务次数</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-count-item">
|
|
<div class="card-count-content">
|
|
<div class="card-count-num">{{ vInfo.resiServiceTotal || 0 }}</div>
|
|
<div class="card-count-label">居民服务次数</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="echart-wr">
|
|
<!-- <div class="echart-cicle"></div> -->
|
|
<div id="echartCount"
|
|
class="echart-org"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div class="card-wr card-wr-map">
|
|
<div class="card-title">
|
|
<!-- <img class="title-icon"
|
|
src="../../../../assets/img/shuju/title-tip.png" /> -->
|
|
<div class="card-left-title">
|
|
多元化治理平面图
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-map">
|
|
<screen-map class="map"
|
|
ref="map"
|
|
@clickFeature="clickMapVolunteer"
|
|
:showIconLayer="true"
|
|
:clickType="'popup'"
|
|
:isAddOpenlay="true"></screen-map>
|
|
</div>
|
|
<div class="map-tips">
|
|
|
|
<div class="map-tips-item"
|
|
v-for="item in legendArray"
|
|
:key="item.optionValue">
|
|
|
|
<img class="title-icon"
|
|
:src="item.url" />
|
|
<div class="map-tips-label">{{item.optionLabel}}</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</cpt-card>
|
|
</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 screenMap from "@/views/modules/visual/components/screen-map";
|
|
|
|
import * as echarts from 'echarts';
|
|
export default {
|
|
name: "warning-box",
|
|
components: {
|
|
cptCard,
|
|
screenTable,
|
|
screenMap
|
|
},
|
|
data () {
|
|
return {
|
|
warningList: [],
|
|
headerList: [
|
|
{ title: "序号", coulmn: 'index' },
|
|
{ title: "需求类型", coulmn: 'gridName' },
|
|
{ title: "具体内容", coulmn: 'buildingName' },
|
|
{ title: "上报情况", coulmn: 'neighborhoodName' },
|
|
{ title: "上报人", coulmn: 'residentNames' },
|
|
{ title: "上报时间", coulmn: 'residentNames' },
|
|
{ title: "是否认领", coulmn: 'residentNames' },
|
|
{ title: "认领方", coulmn: 'residentNames' },
|
|
{ title: "认领时间", coulmn: 'residentNames' }
|
|
],
|
|
tableData: [
|
|
// [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
|
|
],
|
|
value2: '',
|
|
selectAgency: '',
|
|
propTree: [],
|
|
visibleLoading: true,
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
activeIndex: 0,
|
|
activeLevel: "1",
|
|
|
|
//地图相关数据
|
|
isfirstInit: true,//记录是否是首次加载地图
|
|
agencyInfo: {},//登陆者的组织信息：主要为了获取地图中心点和level
|
|
distributionsList: [],
|
|
|
|
legendArray: [],
|
|
|
|
iconUrlArray: [
|
|
require('../../../../assets/img/shuju/volunteer1.png'),//文化队伍
|
|
require('../../../../assets/img/shuju/volunteer2.png'),//楼委会
|
|
require('../../../../assets/img/shuju/volunteer3.png'),//能人达人
|
|
require('../../../../assets/img/shuju/volunteer4.png'),//老友俱乐部
|
|
require('../../../../assets/img/shuju/volunteer5.png'),//代办员
|
|
require('../../../../assets/img/shuju/volunteer6.png'),//调解员
|
|
require('../../../../assets/img/shuju/volunteer7.png'),//采集员
|
|
require('../../../../assets/img/shuju/volunteer8.png'),//治安巡逻
|
|
require('../../../../assets/img/shuju/volunteer9.png'),//其他
|
|
],
|
|
vPersonal: [],
|
|
vCount: [],
|
|
vpTotal: 0,
|
|
vcTotal: 0,
|
|
vInfo: {}
|
|
};
|
|
},
|
|
async mounted () {
|
|
await nextTick(100);
|
|
await this.getAgencyList()
|
|
this.getPie(this.$store.state.user.agencyId)
|
|
// this.initCharts()
|
|
// this.initCount()
|
|
|
|
await this.getWorkUserInfo()
|
|
await this.getMapUnitList(this.$store.state.user.agencyId)
|
|
},
|
|
methods: {
|
|
initCharts (total, data) {
|
|
const eId = document.getElementById('echartService')
|
|
let _charts = echarts.init(eId)
|
|
let option = {
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
show: true,
|
|
top: 'bottom',
|
|
left: 'center',
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
title: {
|
|
text: total, //图形标题，配置在中间对应效果图的80%
|
|
subtext: '志愿者总数',
|
|
left: "center",
|
|
top: "center",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 28,
|
|
align: "center"
|
|
},
|
|
subtextStyle: {
|
|
fontSize: 16,
|
|
color: '#fff'
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
// name: 'Access From',
|
|
type: 'pie',
|
|
radius: ['50%', '60%'],
|
|
avoidLabelOverlap: false,
|
|
left: 'center',
|
|
width: 400,
|
|
label: {
|
|
show: false,
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: false,
|
|
fontSize: '14',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
|
|
data: data
|
|
}
|
|
]
|
|
}
|
|
option && _charts.setOption(option);
|
|
|
|
},
|
|
initCount (total, data) {
|
|
const eId = document.getElementById('echartCount')
|
|
let _charts = echarts.init(eId)
|
|
let option = {
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
show: true,
|
|
top: 'bottom',
|
|
left: 'center',
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
title: {
|
|
text: total, //图形标题，配置在中间对应效果图的80%
|
|
subtext: '志愿者服务总数',
|
|
left: "center",
|
|
top: "center",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 28,
|
|
align: "center"
|
|
},
|
|
subtextStyle: {
|
|
fontSize: 16,
|
|
color: '#fff'
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
// name: 'Access From',
|
|
type: 'pie',
|
|
// center: ['10%', '50%'],
|
|
radius: ['50%', '60%'],
|
|
avoidLabelOverlap: false,
|
|
// top: top + '%',
|
|
// height: '80%',
|
|
left: 'center',
|
|
width: 400,
|
|
label: {
|
|
show: false,
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: false,
|
|
fontSize: '14',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
|
|
data: data
|
|
}
|
|
]
|
|
}
|
|
option && _charts.setOption(option);
|
|
|
|
},
|
|
async getPie (agencyId) {
|
|
const url = "/data/report/heart/demand/volunteer/service";
|
|
let params = {
|
|
agencyId,
|
|
};
|
|
const { data, code, msg } = await requestPost(url, params);
|
|
if (code === 0) {
|
|
console.log('data-ddd', data)
|
|
this.vInfo = data
|
|
const arr = [{
|
|
name: '党员数量',
|
|
value: data.partyTotal,
|
|
itemStyle: {
|
|
color: 'rgba(26, 178, 255, 1)'
|
|
}
|
|
}, {
|
|
name: '居民数量',
|
|
value: data.resiTotal,
|
|
itemStyle: {
|
|
color: 'rgba(250, 193, 38, 1)'
|
|
}
|
|
}]
|
|
const arr1 = [{
|
|
name: '党员数量',
|
|
value: data.partyServiceTotal,
|
|
itemStyle: {
|
|
color: 'rgba(26, 178, 255, 1)'
|
|
}
|
|
}, {
|
|
name: '居民数量',
|
|
value: data.resiServiceTotal,
|
|
itemStyle: {
|
|
color: 'rgba(250, 193, 38, 1)'
|
|
}
|
|
}]
|
|
this.vPersonal = [...arr]
|
|
this.vCount = [...arr1]
|
|
this.vpTotal = data.volunteerTotal
|
|
this.vcTotal = data.serviceTotal
|
|
this.initCharts(data.volunteerTotal, arr)
|
|
this.initCount(data.serviceTotal, arr1)
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
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)
|
|
}
|
|
},
|
|
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
|
|
},
|
|
// 【人员预警】 楼宇预警数量列表
|
|
pageSizeChangeHandleNew (val) {
|
|
this.pageNo = 1;
|
|
this.pageSize = val;
|
|
},
|
|
pageCurrentChangeHandleNew (val) {
|
|
this.pageNo = val;
|
|
},
|
|
|
|
// 获取当前管理员信息
|
|
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 getMapUnitList (agencyId) {
|
|
const url = "/epmetuser/volunteer/distribution"
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/distribution"
|
|
|
|
let params = {
|
|
customerId: this.$store.state.user.customerId,
|
|
agencyId
|
|
}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
|
|
if (code === 0) {
|
|
this.legendArray = data.legends
|
|
|
|
this.legendArray.forEach((legendTtem, index) => {
|
|
if (index < this.iconUrlArray.length) {
|
|
legendTtem.url = this.iconUrlArray[index]
|
|
} else {//超过原型数量的都默认为第一个图标
|
|
legendTtem.url = this.iconUrlArray[0]
|
|
}
|
|
|
|
});
|
|
this.legendArray.push({
|
|
optionValue: 'other',
|
|
optionLabel: '其他',
|
|
url: this.iconUrlArray[8]
|
|
})
|
|
|
|
this.distributionsList = data.distributions
|
|
|
|
this.distributionsList.forEach(item => {
|
|
let typeShow = ''
|
|
if (item.volunteerCategories.length > 0) {
|
|
typeShow = item.volunteerCategories[0]
|
|
} else {
|
|
typeShow = 'other'
|
|
}
|
|
item.urlIndex = 0
|
|
for (let i = 0; i < this.legendArray.length; i++) {
|
|
if (typeShow === this.legendArray[i].optionValue) {
|
|
item.urlIndex = i
|
|
break;
|
|
}
|
|
}
|
|
|
|
});
|
|
console.log(this.distributionsList)
|
|
|
|
//第一次加载完置为false
|
|
this.loadMap()
|
|
this.isfirstInit = false
|
|
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
|
|
},
|
|
|
|
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.getServicePie(_arr[0], orgType)
|
|
this.getPie(_arr[0])
|
|
this.getMapUnitList(_arr[0])
|
|
}
|
|
|
|
},
|
|
//加载地图数据
|
|
loadMap () {
|
|
if (this.isfirstInit) {
|
|
//mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray
|
|
this.$refs.map.loadMap(this.agencyInfo, null, null, this.distributionsList, this.iconUrlArray, null)
|
|
} else {
|
|
this.$refs.map.refreshMap(null, this.distributionsList)
|
|
|
|
}
|
|
},
|
|
|
|
//点击项目
|
|
async clickMapVolunteer (feature) {
|
|
console.log('标注信息', feature.values_.properties)
|
|
if (!feature.values_.properties.info.icResiUserId) {
|
|
return false
|
|
}
|
|
const info = feature.values_.properties.info
|
|
const url = "/epmetuser/icresiuser/resi-brief/" + info.icResiUserId
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/distribution"
|
|
|
|
let params = {}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
|
|
if (code === 0) {
|
|
let coordinate = [info.longitude, info.latitude]
|
|
data.gridName = data.gridName ? data.gridName : '--'
|
|
data.villageName = data.villageName ? data.villageName : '--'
|
|
data.icUserName = data.icUserName ? data.icUserName : '--'
|
|
data.mobile = data.mobile ? data.mobile : '--'
|
|
data.idCard = data.idCard ? data.idCard : '--'
|
|
data.birthday = data.birthday ? data.birthday : '--'
|
|
data.contacts = data.contacts ? data.contacts : '--'
|
|
data.contactsMobile = data.contactsMobile ? data.contactsMobile : '--'
|
|
|
|
data.isBdhjShow = data.isBdhj ? data.isBdhj === '0' ? '否' : '是' : '--'
|
|
data.genderShow = data.gender ? data.gender === '0' ? '女' : '男' : '--'
|
|
let categoriesArray = []
|
|
|
|
for (let key in data.volunteerCategories) {
|
|
categoriesArray.push(data.volunteerCategories[key])
|
|
|
|
}
|
|
|
|
|
|
if (categoriesArray.length > 0) {
|
|
data.categories = categoriesArray.join(',')
|
|
} else {
|
|
data.categories = '--'
|
|
}
|
|
|
|
let showData = `
|
|
<div style='font-size:16px; color:#FFFFFF;'>居民信息</div>
|
|
<div style='font-size:12px; color:#FFFFFF;margin-top:10px'>所属网格：
|
|
<span>`+ data.gridName + `</span>
|
|
</div>
|
|
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>所属小区：
|
|
<span>`+ data.villageName + `</span>
|
|
</div>
|
|
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>本地户籍：
|
|
<span>`+ data.isBdhjShow + `</span>
|
|
</div>
|
|
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>姓名：
|
|
<span>`+ data.icUserName + `</span>
|
|
</div>
|
|
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>手机：
|
|
<span>`+ data.mobile + `</span>
|
|
</div>
|
|
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>性别：
|
|
<span>`+ data.genderShow + `</span>
|
|
</div>
|
|
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>身份证号：
|
|
<span>`+ data.idCard + `</span>
|
|
</div>
|
|
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>出生日期：
|
|
<span>`+ data.birthday + `</span>
|
|
</div>
|
|
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>联系人：
|
|
<span>`+ data.contacts + `</span>
|
|
</div>
|
|
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>联系人手机：
|
|
<span>`+ data.contactsMobile + `</span>
|
|
</div>
|
|
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>志愿者类别：
|
|
<span>`+ data.categories + `</span>
|
|
</div>
|
|
`
|
|
// console.log(showData)
|
|
this.$refs.map.handleShowPopup(showData, coordinate)
|
|
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style
|
|
lang="scss"
|
|
src="@/assets/scss/modules/visual/warning.scss"
|
|
scoped
|
|
></style>
|
|
<style lang="scss" scoped>
|
|
.warning-box {
|
|
// display: flex;
|
|
.box-wr {
|
|
display: flex;
|
|
margin-top: 40px;
|
|
}
|
|
.card-wr {
|
|
flex: 1;
|
|
}
|
|
.card-wr:last-child {
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
.card-title {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
margin-bottom: 10px;
|
|
padding: 4px 2px;
|
|
.title-icon {
|
|
display: block;
|
|
// width: 36px;
|
|
// height: 29px;
|
|
box-sizing: border-box;
|
|
margin-right: 5px;
|
|
}
|
|
.title-label {
|
|
font-size: 22px;
|
|
font-family: PingFang SC;
|
|
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";
|
|
}
|
|
}
|
|
}
|
|
::v-deep .el-dropdown {
|
|
font-size: 16px;
|
|
color: #fff;
|
|
font-weight: 800;
|
|
}
|
|
}
|
|
.card-echart {
|
|
display: flex;
|
|
margin-top: 40px;
|
|
|
|
.card-left {
|
|
position: relative;
|
|
flex: 1;
|
|
display: flex;
|
|
}
|
|
}
|
|
.card-echart:last-child {
|
|
padding-bottom: 40px;
|
|
}
|
|
.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%;
|
|
}
|
|
}
|
|
.card-count {
|
|
flex: 1;
|
|
.card-count-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 418px;
|
|
height: 124px;
|
|
box-sizing: border-box;
|
|
margin-top: 20px;
|
|
// padding-left: 192px;
|
|
background: url("../../../../assets/img/shuju/measure/dangyuan.png") center
|
|
no-repeat;
|
|
background-size: cover;
|
|
.card-count-content {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
padding-left: 30px;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
.card-count-num {
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
}
|
|
.card-count-label {
|
|
margin-top: 6px;
|
|
font-size: 16px;
|
|
color: rgba(255, 255, 255, 0.72);
|
|
}
|
|
}
|
|
.card-count-content::after {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
content: "";
|
|
width: 1px;
|
|
height: 50px;
|
|
margin-top: -25px;
|
|
background: rgba(98, 162, 205, 1);
|
|
}
|
|
}
|
|
.card-count-item:last-child {
|
|
background: url("../../../../assets/img/shuju/measure/jumin.png") center
|
|
no-repeat;
|
|
}
|
|
}
|
|
|
|
.map-tips {
|
|
width: 100%;
|
|
display: flex;
|
|
// justify-content: center;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
box-sizing: border-box;
|
|
padding: 6px 0 0 100px;
|
|
// padding-top: 10px;
|
|
// padding-bottom: 10px;
|
|
|
|
.map-tips-item {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
margin-top: 10px;
|
|
margin-right: 40px;
|
|
|
|
.map-tips-icon {
|
|
width: 20px;
|
|
height: 10px;
|
|
box-sizing: border-box;
|
|
margin-right: 10px;
|
|
background: #dd2719;
|
|
border-radius: 2px;
|
|
}
|
|
.map-tips-label {
|
|
font-size: 16px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-wr-map {
|
|
// height: calc(988px - 120px);
|
|
text-align: center;
|
|
|
|
.card-map {
|
|
margin-top: 30px;
|
|
width: 100%;
|
|
// height: calc(988px - 285px);
|
|
height: calc(988px - 335px);
|
|
padding-left: 20px;
|
|
.map {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
</style>
|
|
|