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.
855 lines
23 KiB
855 lines
23 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 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>
|
|
<div class="second-title">
|
|
<div class="second-title-label">党建单位分布</div>
|
|
</div>
|
|
|
|
<div class="box-wr">
|
|
<div class="box-left box-left-w400">
|
|
<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>
|
|
<div class="box-right">
|
|
<div class="box-map">
|
|
<screen-map class="map"
|
|
ref="map"
|
|
@clickFeature="clickProject"
|
|
:showIconLayer="true"></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>
|
|
|
|
</cpt-card>
|
|
<dialog-info v-show="showedMoreInfo"
|
|
:info="detailInfo"
|
|
@close="showedMoreInfo = 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 screenMap from "@/views/modules/visual/components/screen-map";
|
|
|
|
export default {
|
|
name: "warning-box",
|
|
components: {
|
|
cptCard,
|
|
screenTable,
|
|
dialogInfo,
|
|
screenMap
|
|
},
|
|
data () {
|
|
return {
|
|
|
|
showedMoreInfo: false,
|
|
tableLoading: false,
|
|
warningList: [],
|
|
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: '',
|
|
agencyId: '',
|
|
value2: '',
|
|
timeRange: '',
|
|
visibleLoading: true,
|
|
serviceMatter: 'all',
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
activeIndex: 0,
|
|
activeLevel: "1",
|
|
selectAgency: '',
|
|
unitList: [],
|
|
propTree: [],
|
|
partyItem: [],
|
|
cateInfo: [],
|
|
//地图相关数据
|
|
isfirstInit: true,//记录是否是首次加载地图
|
|
agencyInfo: {},//登陆者的组织信息：主要为了获取地图中心点和level
|
|
unitMapList: [],
|
|
unitMapList1: [
|
|
{
|
|
type: '党建楼宇',
|
|
name: '建联单位1',
|
|
latitude: 36.062227,
|
|
longitude: 120.389455,
|
|
},
|
|
{
|
|
type: '党建楼宇',
|
|
name: '建联单位2',
|
|
latitude: 36.082227,
|
|
longitude: 120.389455,
|
|
},
|
|
{
|
|
type: '机关直属部门',
|
|
name: '建联单位3',
|
|
latitude: 36.062227,
|
|
longitude: 120.379455,
|
|
},
|
|
{
|
|
type: '两新党建',
|
|
name: '建联单位4',
|
|
latitude: 36.082227,
|
|
longitude: 120.379455,
|
|
},
|
|
{
|
|
type: '辖区单位',
|
|
name: '建联单位5',
|
|
latitude: 36.092227,
|
|
longitude: 120.379455,
|
|
},
|
|
{
|
|
type: '其他',
|
|
name: '建联单位6',
|
|
latitude: 36.102227,
|
|
longitude: 120.379455,
|
|
}
|
|
],
|
|
detailInfo: {}
|
|
};
|
|
},
|
|
async mounted () {
|
|
const { user } = this.$store.state
|
|
this.agencyId = user.agencyId
|
|
console.log('agencyId-------', this.agencyId)
|
|
this.initTime()
|
|
await nextTick(100);
|
|
await this.getAgencyList()
|
|
this.loadUnit()
|
|
this.getList(this.agencyId)
|
|
this.getCateCount(this.agencyId)
|
|
this.getCateType(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: {
|
|
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 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 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
|
|
},
|
|
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')
|
|
}
|
|
}
|
|
this.partyItem = data.map((item, index) => {
|
|
return {
|
|
...item,
|
|
...colorItem[index]
|
|
}
|
|
})
|
|
} 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)
|
|
}
|
|
},
|
|
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.getList(_arr[0])
|
|
this.getMapUnitList(_arr[0])
|
|
this.getCateCount(_arr[0])
|
|
this.getCateType(_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), this.timeFormat(end)]
|
|
},
|
|
timeFormat (date) {
|
|
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 + ' 00:00:00'
|
|
},
|
|
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
|
|
}
|
|
})
|
|
// this.unitMapList = this.unitMapList1
|
|
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
|
|
}
|
|
});
|
|
|
|
|
|
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')//其他
|
|
]
|
|
|
|
|
|
//第一次加载完置为false
|
|
this.loadMap()
|
|
|
|
this.isfirstInit = false
|
|
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
|
|
},
|
|
|
|
|
|
//加载地图数据
|
|
loadMap () {
|
|
if (this.isfirstInit) {
|
|
//mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray
|
|
this.$refs.map.loadMap(this.agencyInfo, null, null, this.unitMapList, this.iconUrlArray, null)
|
|
} else {
|
|
this.$refs.map.refreshMap(null, this.unitMapList)
|
|
|
|
}
|
|
},
|
|
|
|
//点击项目
|
|
clickProject (feature) {
|
|
console.log('标注信息', feature.values_.properties)
|
|
},
|
|
async handleLook (val) {
|
|
|
|
this.detailId = val.id
|
|
await this.getDetail(val.id)
|
|
this.showedMoreInfo = true
|
|
},
|
|
|
|
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);
|
|
},
|
|
},
|
|
};
|
|
</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;
|
|
overflow: hidden;
|
|
.pagination {
|
|
margin-top: 0;
|
|
}
|
|
.box-map {
|
|
height: 400px;
|
|
// 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%;
|
|
}
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|