<template>
<div>
<div class="top_title" >
<el-col :span="5" :offset="1">
<div>待办工作：{{ statisticNum.work }}</div>
</el-col>
<el-col :span="5">
<div>今日案卷数量：{{ statisticNum.todayCase }}</div>
</el-col>
<el-col :span="5">
<div>累计案卷数量：{{ statisticNum.allCase }}</div>
</el-col>
<el-col :span="5">
<div>商户数量：{{ statisticNum.merchant }}</div>
</el-col>
<!--<el-col :span="4">-->
<!--<div>部件数量：{{ statisticNum.parts }}</div>-->
<!--</el-col>-->
</div>
<div id="map" class="leaflet_container">
<div style="padding-left: 20px;padding-top: 20px">
<el-row class="title">
<el-col :span="6">
<div class="titlenumtext">{{ status.register }}</div>
</el-col>
<el-col :span="6">
<div class="titlenumtext">{{ status.dispatch }}</div>
</el-col>
<el-col :span="6">
<div class="titlenumtext">{{ status.disposal }}</div>
</el-col>
<el-col :span="6">
<div class="titlenumtext">{{ status.disposaling }}</div>
</el-col>
</el-row>
<el-row class="title" style="padding-top: 5px">
<el-col :span="1">
<div class="icon-red"/>
</el-col>
<el-col :span="5">
<div class="titletext">待立案</div>
</el-col>
<el-col :span="1">
<div class="icon-yellow"/>
</el-col>
<el-col :span="5">
<div class="titletext">待派遣</div>
</el-col>
<el-col :span="1">
<div class="icon-green"/>
</el-col>
<el-col :span="5">
<div class="titletext">待处置</div>
</el-col>
<el-col :span="1">
<div class="icon-blue"/>
</el-col>
<el-col :span="5">
<div class="titletext">处置中</div>
</el-col>
</el-row>
</div>
</div>
</div>
</template>
<script>
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import { workListPage } from '@/api/coorBusiness/case'
import { statisticByState, statisticToday } from '@/api/overview'
import { merchantDetail, getIdByCode } from '@/api/merchant/merchant'
import { punishStatisticByMerchant } from '@/api/merchant/punish'
var esri = require('esri-leaflet')
export default {
name: 'CaseOverview',
data() {
return {
listLoading: false, // 加载动画
TianDiTu: {
Normal: {
Map: 'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
Annotion: 'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
},
Satellite: {
Map: 'https://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
Annotion: 'https://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
},
Terrain: {
Map: 'https://t{s}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
Annotion: 'https://t{s}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
},
Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
},
map: null,
tab: 'lamp',
showtable: true,
controlQuery: {
lampIds: [],
circuitId: '',
lampBoxId: '',
controlType: ''
},
listQuery: {
offset: 1,
limit: 1000000,
isShopCase: '1'
}, // 筛选条件
list: [],
multipleSelection: [], // 多选选中项
iconlist: [],
baselayer: [],
caselist: [], // 路灯（map）
statisticNum: {
work: 0,
todayCase: 0,
allCase: 0,
merchant: 0,
parts: 0
},
status: {
register: 0,
dispatch: 0,
disposal: 0,
disposaling: 0
}
}
},
mounted() {
this.init()
this.initData()
this.getCase()
},
methods: {
tableclick() {
this.showtable = !this.showtable
},
async initData() {
const statusDetail = await statisticByState()
this.status = statusDetail.data
const resDetail = await statisticToday()
this.statisticNum = resDetail.data
},
removemarkers() {
for (var i = 0; i < this.iconlist.length; i++) {
this.map.removeLayer(this.iconlist[i])
}
var base = this.baselayer
this.map.eachLayer(function(layer) {
if (layer !== base[0] && layer !== base[1]) {
layer.remove()
}
})
},
async getCase() {
// this.removemarkers()
const resDetail = await workListPage(this.listQuery)
this.caselist = resDetail.data.rows
if (this.caselist.length === 0) {
return
}
var Icon
var poslist = []
this.iconlist = []
var iconstr
for (var i = 0; i < this.caselist.length; i++) {
if (this.caselist[i].caseState === 10) { // 待立案
Icon = L.icon({
iconUrl: require('../../assets/global_images/red.png'),
iconSize: [30, 30]
})
iconstr = require('../../assets/global_images/red.png')
} else if (this.caselist[i].caseState === 20) {
Icon = L.icon({
iconUrl: require('../../assets/global_images/yellow.png'),
iconSize: [30, 30]
})
iconstr = require('../../assets/global_images/yellow.png')
} else if (this.caselist[i].caseState === 30) {
Icon = L.icon({
iconUrl: require('../../assets/global_images/green.png'),
iconSize: [30, 30]
})
iconstr = require('../../assets/global_images/green.png')
} else if (this.caselist[i].caseState === 39) {
Icon = L.icon({
iconUrl: require('../../assets/global_images/blue.png'),
iconSize: [30, 30]
})
iconstr = require('../../assets/global_images/blue.png')
} else {
Icon = L.icon({
iconUrl: require('../../assets/global_images/gray.png'),
iconSize: [30, 30]
})
iconstr = require('../../assets/global_images/gray.png')
}
var item = L.marker([this.caselist[i].lat, this.caselist[i].lng], {
icon: Icon,
id: this.caselist[i]
}).addTo(this.map)
var that = this
item.on('click', function(e) {
if (e.target.dragging._marker._popup) {
e.target.dragging._marker.unbindPopup()
}
var data = e.target.options.id
var img = data.fileIdVerify.split(',')
img = img.map(item => process.env.BASE_API + '/static/' + item)
if (data.caseState === 10) { // 待立案
iconstr = require('../../assets/global_images/red.png')
} else if (data.caseState === 20) {
iconstr = require('../../assets/global_images/yellow.png')
} else if (data.caseState === 30) {
iconstr = require('../../assets/global_images/green.png')
} else if (data.caseState === 39) {
iconstr = require('../../assets/global_images/blue.png')
} else {
iconstr = require('../../assets/global_images/gray.png')
}
// const { caseStateName ,caseid, casetypeName, reportTime, fieldintro,description } = data
var btndetail = 'btndetail' + data.id
var str = '<div style="font-size: 14px;width:420px;">' +
'<div style="font-size: 14px;font-weight: bold;margin-bottom: 10px;">' +
'<img src="' + iconstr + '">' +
'<div style="margin-top: -26px;margin-left: 30px">' + data.caseStateName + ' ' + data.caseid + '</div></div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">案卷状态：</label>' + data.caseStateName + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">案卷类别：</label>' + data.casetypeName + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">上报时间：</label>' + data.reportTime + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">案卷地点：</label>' + data.fieldintro + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">案卷情况：</label>' + data.description + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">上报图片：</label></div>' +
'<div>'
for (var i = 0; i < img.length; i++) {
str += ('<img style="width: 200px;height: 150px;margin-right: 10px" src="' + img[i] + '">')
}
str += '</div>'
str += '<div style="text-align: right;margin-right: 10px;margin-top: 5px"><button style="background-color: #409eff;border-color: #409eff;color: white;padding: 5px 8px;font-size: 14px;border-radius: 4px;" id="' + btndetail + '">查看详情</button></div></div>'
str += '</div></div>'
var popup = L.popup().setContent(str)
e.target.dragging._marker.bindPopup(popup, { minWidth: 410 }).openPopup()
document.getElementById(btndetail).onclick = function() {
that.$router.push({ path: '/caseDetailRead/' + data.id })
}
})
this.iconlist.push(item)
var pos = [Number(this.caselist[i].lat), Number(this.caselist[i].lng)]
poslist.push(pos)
}
if (this.caselist.length !== 0) {
this.setZoom(poslist)
}
},
setZoom(points) {
if (points.length > 0) {
var maxLng = points[0][1]
var minLng = points[0][1]
var maxLat = points[0][0]
var minLat = points[0][0]
var res
for (var i = points.length - 1; i >= 0; i--) {
res = points[i]
if (res[1] > maxLng) maxLng = res[1]
if (res[1] < minLng) minLng = res[1]
if (res[0] > maxLat) maxLat = res[0]
if (res[0] < minLat) minLat = res[0]
}
var cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
var cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
var zoom = this.getZoom(maxLng, minLng, maxLat, minLat)
this.map.setView({ lat: cenLat, lng: cenLng }, zoom)
} else {
// 没有坐标，显示全中国
this.map.setView({ lat: 103.388611, lng: 35.563611 }, 5)
}
},
getZoom(maxLng, minLng, maxLat, minLat) {
var zoom = ['50', '100', '200', '500', '1000', '2000', '5000', '10000', '20000', '25000', '50000', '100000', '200000', '500000', '1000000', '2000000', '5000000']// 级别18到3。
var latlng = L.latLng(maxLat, maxLng)
var distance = latlng.distanceTo(L.latLng(minLat, minLng))
// var distance = pointA.distanceTo(pointB)// 获取两点距离,保留小数点后两位
for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
if (zoom[i] - distance > 0) {
return 18 - i + 2 // 之所以会多2，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
}
}
return 5
},
async shopDetail(id) {
const shop = await getIdByCode(id)
const shopid = shop.data.id
this.id = shopid
const [res, res1] = await Promise.all([merchantDetail(shopid), punishStatisticByMerchant(shopid)])
const data = res.data
const data1 = res1.data
if (!data.shopInfo) {
throw new Error('数据错误')
}
const { chargePhone, deptName, address, rentArea, rentStatusName } = data.shopInfo
const shopbtn = 'btndetail' + this.id
return `
<div style="font-size: 14px;width:300px;">
<div style="font-weight: bold;padding-bottom: 10px ">${data.merchantInfo.merchantName}</div>
<div style="padding-bottom: 2px"><label style="padding-right: 5px">联系电话：</label>${chargePhone}</div>
<div style="padding-bottom: 2px"><label style="padding-right: 5px">管理部门：</label>${deptName}</div>
<div style="padding-bottom: 2px"><label style="padding-right: 5px">详细地址：</label>${address}</div>
<div style="padding-bottom: 2px"><label style="padding-right: 5px">租用面积：</label>${rentArea}</div>
<div style="padding-bottom: 2px"><label style="padding-right: 5px">租用状态：</label>${rentStatusName}</div>
<div style="padding-bottom: 2px"><label style="padding-right: 5px">店铺情况：</label></div>
<table border="1" style="border-collapse: collapse;"><tr style="background-color: #eeeeee"><th style="width: 90px;text-align: center">处罚</th><th style="width: 90px;text-align: center">警告</th><th style="width: 90px;text-align: center">劝导</th></tr>
<tr><td style="text-align: center">${data1.punish}</td><td style="text-align: center">${data1.warn}</td><td style="text-align: center">${data1.persuade}</td></tr></table>
<div style="text-align: right;margin-right: 10px;margin-top: 10px"><button style="background-color: #409eff;border-color: #409eff;color: white;padding: 5px 8px;font-size: 14px;border-radius: 4px;" id="${shopbtn}">查看详情</button></div></div>
</div></div>`
},
async init() {
const map = L.map('map', {
minZoom: 2,
maxZoom: 18,
center: [28.238528, 116.601117],
zoom: 15,
zoomControl: false,
attributionControl: false,
crs: L.CRS.EPSG3857
})
map.doubleClickZoom.disable()
this.map = map // data上需要挂载
window.map = map
this.baselayer.push(L.tileLayer(
'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
{ subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
).addTo(map))
this.baselayer.push(L.tileLayer(
'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
{ subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
).addTo(map))
var shop = { // 图层名称
url: 'http://111.198.10.15:13002/arcgis/rest/services/crbj/FeatureServer/1'
// opacity: 0.8,
// f: 'json'
}
var shop_layer = esri.featureLayer(shop).addTo(map)
console.log(shop_layer)
var that = this
shop_layer.on('click', function(e) {
var id = e.layer.feature.properties.objid
console.log(id)
// var id = '1346730611456352258'
that.shopDetail(id).then(res => {
var str = res
L.popup({ minWidth: 300 }).setContent(str).setLatLng(e.latlng).openOn(map)
const shopbtn = 'btndetail' + that.id
console.log('btndetail' + that.id)
document.getElementById(shopbtn).onclick = function() {
that.$router.push({ path: '/merchantDetail/' + that.id })
}
})
})
},
// 多选触发方法
handleSelectionChange(val) {
this.multipleSelection = val
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
$tableTitleHeight:35px;
.leaflet_container{
width: 100%;
height: 80vh;
}
.top_title{
height: 40px;
font-size: 18px;
border: 1px solid #b5b5b5;
padding-top: 10px;
background-color: white;
}
.title{
height: 40px;
width: 320px;
padding-top: 10px;
padding-left: 5px;
z-index: 100000;
background-color: rgba(255, 255, 255, 0.91);
}
.titletext{
text-align: center;
font-size: 15px;
}
.titlenumtext{
text-align: center;
font-size: 19px;
}
.icon-gray {
width: 10px;
height: 10px;
background-color: #555555;
margin-left: 10px;
margin-top: 5px;
border-radius: 50%;
}
.icon-red {
width: 10px;
height: 10px;
background-color: #d0021b;
margin-left: 10px;
margin-top: 5px;
border-radius: 50%;
}
.icon-green {
width: 10px;
height: 10px;
margin-top: 5px;
margin-left: 10px;
background-color: #00b238;
border-radius: 50%;
}
.icon-yellow {
width: 10px;
height: 10px;
margin-left: 10px;
background-color: #ffcc00;
margin-top: 5px;
border-radius: 50%;
}
.icon-blue {
width: 10px;
height: 10px;
background-color: #8eb4f6;
margin-left: 10px;
margin-top: 5px;
border-radius: 50%;
}
.list{
text-align:center;
width: 500px;
height: 40px;
z-index: 10000;
position: absolute;
right:20px;
top:20px;
}
.btn_bottom{
text-align:center;
width: 100%;
height:70px;
z-index: 1000;
position: fixed; bottom: 0; left: 0;right:0;
}
.table-name{
position:relative;
width: 100px;
top:20px;
margin:-10px auto; //外面的div高度的一半
z-index: 100001;
}
.table-title{
background-color:rgba(243, 243, 243, 1);
height: $tableTitleHeight;
.title-header{
line-height:$tableTitleHeight;
color: #606266;
font-size: 15px;
i{
margin-left: 5px;
margin-right: 5px;
}
}
}
</style>
