1048 lines
37 KiB
HTML
1048 lines
37 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<link rel="stylesheet" type="text/css" href="./css/style.css" />
|
|
<link rel="stylesheet" type="text/css" href="./css/animation.css" />
|
|
<link rel="stylesheet" type="text/css" href="font/iconfont.css" />
|
|
<link rel="stylesheet" type="text/css" href="./css/zoom1920.css" />
|
|
<title>安全生产综合信息监管</title>
|
|
<style>
|
|
[v-cloak] {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="full-screen">
|
|
<div id="map"></div>
|
|
<div class="content" id="app" v-cloak>
|
|
<div class="db-header">
|
|
<div class="db-header-title-bg">
|
|
<div class="header-loop-bg"></div>
|
|
<div class="header-loop"></div>
|
|
<span>安全生产综合监管</span>
|
|
</div>
|
|
</div>
|
|
<div class="db-toolbar">
|
|
<!--模糊搜索开始-->
|
|
<div class="map-search">
|
|
<div class="map-search-main">
|
|
<input id="map-search-main-input" placeholder="搜索企业名称" v-model="KEYWORDS">
|
|
<i class="iconfont icon-sousuo" id="icon-sousuo"></i>
|
|
<i class="iconfont icon-sousuo" id="icon-sousuo-1" v-on:click="getQuery()" hidden></i>
|
|
</div>
|
|
<div id="map-search-dropdown" class="map-search-dropdown" hidden>
|
|
<div class="h-scrollbar">
|
|
<ul>
|
|
<template v-for="(data,index) in varList">
|
|
<li v-on:click="setCenter(data)">
|
|
<div class="h-icon-dw">
|
|
<i></i>
|
|
</div>
|
|
<div>
|
|
<p>{{data.CORP_NAME || ''}}</p>
|
|
<p>{{data.ADDRESS || ''}}</p>
|
|
</div>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
</div>
|
|
<div class="h-empty" v-if="varList.length==0">
|
|
<div class="h-empty__wrapper h-breakpoint--sm">
|
|
<i class="iconfont icon-wushuju"></i>
|
|
<p class="h-empty__description">暂无数据</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--下拉筛选开始-->
|
|
</div>
|
|
<div class="hv-layout">
|
|
<div class="top-shadow"></div>
|
|
<div class="left-shadow"></div>
|
|
<div class="right-shadow"></div>
|
|
<div class="view-layout stage-2">
|
|
<div class="view-layout-bg">
|
|
<div class="view-layout-loop-bg"></div>
|
|
<div class="view-layout-loop"></div>
|
|
</div>
|
|
<div class="view-layout-main">
|
|
<header>
|
|
<div class="header-time">
|
|
<span>{{time}}</span><span>{{date}}</span><span>{{week}}</span>
|
|
</div>
|
|
</header>
|
|
<section>
|
|
<div class="view-panel">
|
|
<header class="view-panel-title">
|
|
<span>企业统计</span>
|
|
</header>
|
|
<div class="view-panel-main">
|
|
<div class="enterprise-chart">
|
|
<div class="left-aside">
|
|
<div class="circle-bg"></div>
|
|
<div class="circle-outer"></div>
|
|
<div class="circle-line"></div>
|
|
<div class="circle-inner"></div>
|
|
<div class="chart-main" id="chart1">
|
|
</div>
|
|
</div>
|
|
<div class="right-aside">
|
|
<div class="enterprise-box">
|
|
<div class="enterprise-item">
|
|
<i class="bg-green"></i>
|
|
<p>
|
|
企业总数
|
|
<transition name="fade">
|
|
<span class="color-green counter-value">{{animatedAllCount}}</span>
|
|
</transition>
|
|
<b>家</b>
|
|
</p>
|
|
</div>
|
|
<div class="enterprise-item">
|
|
<i class="bg-oringe"></i>
|
|
<p>
|
|
确认企业数
|
|
<span class="color-oringe counter-value">{{animatedSureCount}}</span>
|
|
<b>家</b>
|
|
</p>
|
|
</div>
|
|
<div class="enterprise-item">
|
|
<i class="bg-red"></i>
|
|
<p>
|
|
确认率
|
|
<span class="color-red counter-value">{{animatedSureRate}}</span>
|
|
<b>%</b>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="view-panel">
|
|
<header class="view-panel-title">
|
|
<span>风险辨识情况统计</span>
|
|
</header>
|
|
<div class="view-panel-main neiw">
|
|
<div class="signboard">
|
|
<div class="bg-signbig">
|
|
<label class="counter-value color-blue">{{animatedRiskCorpCount}}</label>
|
|
<span>开展风险辨识企业数</span>
|
|
</div>
|
|
<ul>
|
|
<li>
|
|
<label class="counter-value color-oringe">{{animatedUnitCount}}</label>
|
|
<span>风险点（单元）</span>
|
|
</li>
|
|
<li>
|
|
<label class="counter-value color-green">{{animatedIdCount}}</label>
|
|
<span>辨识部位</span>
|
|
</li>
|
|
<li>
|
|
<label class="counter-value color-red">{{animatedPointCount}}</label>
|
|
<span>存在风险</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="view-panel">
|
|
<header class="view-panel-title">
|
|
<span>辨识部位风险等级</span>
|
|
</header>
|
|
<div class="view-panel-main neiw">
|
|
<div class="Ladder">
|
|
<ul>
|
|
<li class="high-fx bg-map">
|
|
<label>{{riskData.Acount}}</label>
|
|
<span>高风险</span>
|
|
</li>
|
|
<li class="big-fx bg-map">
|
|
<label>{{riskData.Bcount}}</label>
|
|
<span>较大风险</span>
|
|
</li>
|
|
<li class="normal-fx bg-map">
|
|
<label>{{riskData.Ccount}}</label>
|
|
<span>一般风险</span>
|
|
</li>
|
|
<li class="low-fx bg-map">
|
|
<label>{{riskData.Dcount}}</label>
|
|
<span>低风险</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="view-panel">
|
|
<header class="view-panel-title">
|
|
<span>重大危险源企业分布</span>
|
|
</header>
|
|
<div class="view-panel-main neiw">
|
|
<div class="column-chart-bg">
|
|
<div class="column-chart" id="chart2">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<div class="view-layout reverse stage-2">
|
|
<div class="view-layout-bg">
|
|
<div class="view-layout-loop-bg"></div>
|
|
<div class="view-layout-loop"></div>
|
|
</div>
|
|
<div class="view-layout-main">
|
|
<header>
|
|
<div class="header-weather">
|
|
<div class="db-header-weather">
|
|
<!-- <i class="sunny"></i>-->
|
|
<!-- <i id="type"></i>-->
|
|
<span id="type"></span>
|
|
<label>
|
|
<span id="wendu"></span>
|
|
<span class="unit">℃</span>
|
|
</label>
|
|
<dl>
|
|
<dt>风力风向</dt>
|
|
<dd id="feng"></dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<section>
|
|
<div class="view-panel reverse">
|
|
<header class="view-panel-title">
|
|
<span>企业规模统计情况</span>
|
|
</header>
|
|
<div class="view-panel-main">
|
|
<div class="sizestate">
|
|
<dl>
|
|
<dt>规上</dt>
|
|
<dd>{{upCorpNum}}</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>规下</dt>
|
|
<dd>{{downCorpNum}}</dd>
|
|
</dl>
|
|
</div>
|
|
<div class="circular-chart-bg">
|
|
<div class="circular-chart" id="chart3">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="view-panel reverse">
|
|
<header class="view-panel-title">
|
|
<span>企业相关属性统计</span>
|
|
</header>
|
|
<div class="view-panel-main">
|
|
<div class="line-chart-bg">
|
|
<div class="line-chart" id="chart5">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="view-panel reverse">
|
|
<header class="view-panel-title">
|
|
<span>隐患整改对比图</span>
|
|
</header>
|
|
<div class="view-panel-main">
|
|
<div class="line-chart-bg">
|
|
<div class="line-chart" id="chart4">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
|
|
<script type="text/javascript"
|
|
src="https://api.map.baidu.com/api?v=2.0&ak=OElqFYoKiAH8KFtph8ftLKF5NlNrbCUr&s=1"></script>
|
|
<script src="https://pv.sohu.com/cityjson?ie=utf-8" type="text/javascript"></script>
|
|
<script src="js/echart.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="./js/jquery.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="./js/gsap.min.js"></script>
|
|
<script src="../config.js" type="text/javascript" charset="utf-8"></script>
|
|
<script type="text/javascript">
|
|
$(document).ready(function () {
|
|
$("#map").height($(document).height())
|
|
// 搜索点击事件
|
|
$('#icon-sousuo').bind('click', function () {
|
|
$('#icon-sousuo').hide()
|
|
$('#icon-sousuo-1').show()
|
|
$('#map-search-main-input').addClass('show')
|
|
})
|
|
// $("#map-search-main-input").blur(function(){
|
|
// $("#map-search-main-input").removeClass("show");
|
|
// });
|
|
// 筛选点击事件
|
|
$('.map-filter-main:first').bind('click', function () {
|
|
$('.map-filter-main>i:first').toggleClass('show-dropdown')
|
|
$('#first-dropdown').toggle()
|
|
})
|
|
$('.map-filter-main:eq(1)').bind('click', function () {
|
|
$('.map-filter-main>i:eq(1)').toggleClass('show-dropdown')
|
|
$('#second-dropdown').toggle()
|
|
})
|
|
// 隐藏侧边栏
|
|
$('.icon-collapse').bind('click', function () {
|
|
$('.view-layout').toggleClass('collapse')
|
|
$('.left-shadow').toggleClass('width0')
|
|
$('.right-shadow').toggleClass('width0')
|
|
$('.db-toolbar-filter').toggleClass('right0')
|
|
$('.map-search').toggleClass('left0')
|
|
})
|
|
window.addEventListener('resize', function () {
|
|
$("#map").height($(document).height())
|
|
});
|
|
$.getScript('http://api.map.baidu.com/location/ip?ak=OElqFYoKiAH8KFtph8ftLKF5NlNrbCUr&callback=findWeather')
|
|
})
|
|
|
|
function findWeather(data) {
|
|
jQuery.support.cors = true
|
|
$.ajax({
|
|
url: 'http://wthrcdn.etouch.cn/weather_mini',
|
|
type: 'GET',
|
|
dataType: 'json',
|
|
data: { city: (data.content.address).split('省')[1] }, //(returnCitySN.cname).split('省')[1]：获取所在的市
|
|
success: function (res) {
|
|
var city = res.data.city//所在城市
|
|
$('#wendu').html(res.data.wendu)
|
|
$('#feng').html(res.data.forecast[0].fengxiang + ' ' + res.data.forecast[0].fengli.replace('<![CDATA[', '').replace(']]>', ''))
|
|
$('#type').html(res.data.forecast[0].type)
|
|
// var maxTemperature = res.data.forecast[0].high;//最高温度
|
|
// var minTemperature = res.data.forecast[0].low;//最低温度
|
|
// var weather = minTemperature.split(' ')[1] + '~' + maxTemperature.split(' ')[1];
|
|
var type = res.data.forecast[0].type//天气状态
|
|
},
|
|
error: function (err) {
|
|
console.log(err)
|
|
}
|
|
})
|
|
}
|
|
|
|
var vm = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
map: '',
|
|
KEYWORDS: '',
|
|
ECOTypeList: [],
|
|
CORP_TYPE_NAME: '企业经济类型', // 经济类型
|
|
CORP_TYPE: '', // 经济类型
|
|
|
|
varList: [],
|
|
|
|
mapTypeList: [{ id: 1, name: '企业信息' }, { id: 2, name: '隐患信息' }, { id: 3, name: '风险信息' }, { id: 4, name: '重大危险源信息' }],
|
|
MAP_TYPE_NAME: '企业信息', // 经济类型
|
|
MAP_TYPE: '1', // 经济类型
|
|
|
|
time: '',
|
|
date: '',
|
|
week: '',
|
|
|
|
allCount: 0,
|
|
tweenedAllCount: 0,
|
|
sureCount: 0,
|
|
tweenedSureCount: 0,
|
|
sureRate: 0,
|
|
tweenedSureRate: 0,
|
|
upCorpNum: 0,
|
|
downCorpNum: 0,
|
|
riskCorpList: [],
|
|
riskCorpCount: 0,
|
|
tweenedRiskCorpCount: 0,
|
|
unitCount: 0,
|
|
tweenedUnitCount: 0,
|
|
idCount: 0,
|
|
tweenedIdCount: 0,
|
|
pointCount: 0,
|
|
tweenedPointCount: 0,
|
|
riskData: {
|
|
Acount: 0,
|
|
Bcount: 0,
|
|
Ccount: 0,
|
|
Dcount: 0
|
|
}
|
|
},
|
|
computed: {
|
|
animatedAllCount: function () {
|
|
return this.tweenedAllCount.toFixed(0)
|
|
},
|
|
animatedSureCount: function () {
|
|
return this.tweenedSureCount.toFixed(0)
|
|
},
|
|
animatedSureRate: function () {
|
|
return this.tweenedSureRate.toFixed(2)
|
|
},
|
|
animatedRiskCorpCount: function () {
|
|
return this.tweenedRiskCorpCount.toFixed(0)
|
|
},
|
|
animatedUnitCount: function () {
|
|
return this.tweenedUnitCount.toFixed(0)
|
|
},
|
|
animatedIdCount: function () {
|
|
return this.tweenedIdCount.toFixed(0)
|
|
},
|
|
animatedPointCount: function () {
|
|
return this.tweenedPointCount.toFixed(0)
|
|
}
|
|
},
|
|
watch: {
|
|
allCount: function (newValue) {
|
|
gsap.to(this.$data, { duration: 1.5, tweenedAllCount: newValue })
|
|
},
|
|
sureCount: function (newValue) {
|
|
gsap.to(this.$data, { duration: 1.5, tweenedSureCount: newValue })
|
|
},
|
|
sureRate: function (newValue) {
|
|
gsap.to(this.$data, { duration: 1.5, tweenedSureRate: newValue })
|
|
},
|
|
riskCorpCount: function (newValue) {
|
|
gsap.to(this.$data, { duration: 1.5, tweenedRiskCorpCount: newValue })
|
|
},
|
|
unitCount: function (newValue) {
|
|
gsap.to(this.$data, { duration: 1.5, tweenedUnitCount: newValue })
|
|
},
|
|
idCount: function (newValue) {
|
|
gsap.to(this.$data, { duration: 1.5, tweenedIdCount: newValue })
|
|
},
|
|
pointCount: function (newValue) {
|
|
gsap.to(this.$data, { duration: 1.5, tweenedPointCount: newValue })
|
|
}
|
|
},
|
|
methods: {
|
|
init: function () {
|
|
this.handleMap()
|
|
this.getDict()
|
|
this.getCorpStatistics()
|
|
this.getRiskCorp()
|
|
this.getRiskData()
|
|
this.getMajorData()
|
|
this.getHiddenData()
|
|
setInterval(function () {
|
|
vm.getTime()
|
|
}, 1000)
|
|
},
|
|
handleMap() {
|
|
$.ajax({
|
|
xhrFields: {
|
|
withCredentials: true
|
|
},
|
|
type: 'POST',
|
|
url: config.httpurl + 'department/getCityCode',
|
|
data: {
|
|
},
|
|
dataType: 'json',
|
|
success: function (data) {
|
|
vm.map = new BMap.Map('map')
|
|
var point = new BMap.Point(119.570882,39.915455);
|
|
// 39.922898,119.60518
|
|
console.log(data)
|
|
// var point = '邢台市'
|
|
vm.map.centerAndZoom(point, 12)
|
|
vm.map.enableScrollWheelZoom(true)
|
|
|
|
vm.addPoint()
|
|
}
|
|
}).done().fail(function () {
|
|
alert('登录失效!', '请求服务器无响应，稍后再试', 'warning')
|
|
setTimeout(function () {
|
|
window.location.href = '../../login'
|
|
}, 2000)
|
|
})
|
|
},
|
|
getCorpStatistics: function () {
|
|
$.ajax({
|
|
xhrFields: {
|
|
withCredentials: true
|
|
},
|
|
type: 'POST',
|
|
url: config.httpurl + 'corpinfo/main/statistics',
|
|
data: {
|
|
CORP_TYPE: this.CORP_TYPE
|
|
},
|
|
dataType: 'json',
|
|
success: function (data) {
|
|
if ('success' == data.result) {
|
|
vm.allCount = data.pd.allCorpNum
|
|
vm.sureCount = data.pd.sureCorpNum
|
|
if (data.pd.allCorpNum == 0) {
|
|
vm.sureRate = 0
|
|
} else {
|
|
vm.sureRate = ((data.pd.sureCorpNum / data.pd.allCorpNum).toFixed(4)) * 100
|
|
}
|
|
vm.upCorpNum = data.pd.upCorpNum
|
|
vm.downCorpNum = data.pd.downCorpNum
|
|
corpCountChart(data.pd)
|
|
corpScanChart(data.pd)
|
|
corpAttributeChart(data.pd)
|
|
}
|
|
}
|
|
}).done().fail(function () {
|
|
alert('登录失效!', '请求服务器无响应，稍后再试', 'warning')
|
|
setTimeout(function () {
|
|
window.location.href = '../../login'
|
|
}, 2000)
|
|
})
|
|
},
|
|
getRiskCorp: function () {
|
|
$.ajax({
|
|
xhrFields: {
|
|
withCredentials: true
|
|
},
|
|
type: 'POST',
|
|
url: config.httpurl + 'corpinfo/riskStatisticslistAll',
|
|
data: {
|
|
COUNTRY: this.COUNTRY,
|
|
VILLAGE: this.VILLAGE,
|
|
CORP_TYPE: this.CORP_TYPE
|
|
},
|
|
dataType: 'json',
|
|
success: function (data) {
|
|
if ('success' == data.result) {
|
|
vm.riskCorpList = data.varList
|
|
let riskCorpCount = 0
|
|
let unitCount = 0
|
|
let idCount = 0
|
|
let pointCount = 0
|
|
for (let i = 0; i < vm.riskCorpList.length; i++) {
|
|
riskCorpCount++
|
|
unitCount += vm.riskCorpList[i].unitCount
|
|
idCount += vm.riskCorpList[i].idCount
|
|
pointCount += vm.riskCorpList[i].pointCount
|
|
}
|
|
vm.riskCorpCount = riskCorpCount
|
|
vm.unitCount = unitCount
|
|
vm.idCount = idCount
|
|
vm.pointCount = pointCount
|
|
}
|
|
}
|
|
}).done().fail(function () {
|
|
alert('登录失效!', '请求服务器无响应，稍后再试', 'warning')
|
|
setTimeout(function () {
|
|
window.location.href = '../../login'
|
|
}, 2000)
|
|
})
|
|
},
|
|
getRiskData() {
|
|
$.ajax({
|
|
xhrFields: {
|
|
withCredentials: true
|
|
},
|
|
type: 'POST',
|
|
url: config.httpurl + 'riskpoint/main/statistics',
|
|
data: {
|
|
COUNTRY: this.COUNTRY,
|
|
VILLAGE: this.VILLAGE,
|
|
CORP_TYPE: this.CORP_TYPE
|
|
},
|
|
dataType: 'json',
|
|
success: function (data) {
|
|
if ('success' == data.result) {
|
|
vm.riskData = data.pd
|
|
}
|
|
}
|
|
}).done().fail(function () {
|
|
alert('登录失效!', '请求服务器无响应，稍后再试', 'warning')
|
|
setTimeout(function () {
|
|
window.location.href = '../../login'
|
|
}, 2000)
|
|
})
|
|
},
|
|
getMajorData() {
|
|
$.ajax({
|
|
xhrFields: {
|
|
withCredentials: true
|
|
},
|
|
type: 'POST',
|
|
url: config.httpurl + 'majorinformation/main/statistics',
|
|
data: {},
|
|
dataType: 'json',
|
|
success: function (data) {
|
|
if ('success' == data.result) {
|
|
const varLisr = data.varList
|
|
const barData = {
|
|
GROUP_NAME: [],
|
|
Acount: [],
|
|
Bcount: [],
|
|
Ccount: [],
|
|
Dcount: []
|
|
}
|
|
for (let i = 0; i < varLisr.length; i++) {
|
|
barData.GROUP_NAME.push(varLisr[i].GROUP_NAME)
|
|
barData.Acount.push(varLisr[i].Acount)
|
|
barData.Bcount.push(varLisr[i].Bcount)
|
|
barData.Ccount.push(varLisr[i].Ccount)
|
|
barData.Dcount.push(varLisr[i].Dcount)
|
|
}
|
|
majorBar(barData)
|
|
}
|
|
}
|
|
}).done().fail(function () {
|
|
alert('登录失效!', '请求服务器无响应，稍后再试', 'warning')
|
|
setTimeout(function () {
|
|
window.location.href = '../../login'
|
|
}, 2000)
|
|
})
|
|
},
|
|
getHiddenData: function () {
|
|
$.ajax({
|
|
xhrFields: {
|
|
withCredentials: true
|
|
},
|
|
type: 'POST',
|
|
url: config.httpurl + 'hidden/main/statistics',
|
|
data: {},
|
|
dataType: 'json',
|
|
success: function (data) {
|
|
if ('success' == data.result) {
|
|
const varLisr = data.varList
|
|
const lineData = {
|
|
GROUP_NAME: [],
|
|
SBHD_NUM: [],
|
|
ZGHD_NUM: []
|
|
}
|
|
for (let i = 0; i < varLisr.length; i++) {
|
|
lineData.GROUP_NAME.push(varLisr[i].GROUP_NAME)
|
|
lineData.SBHD_NUM.push(varLisr[i].SBHD_NUM)
|
|
lineData.ZGHD_NUM.push(varLisr[i].ZGHD_NUM)
|
|
}
|
|
hiddenLine(lineData)
|
|
}
|
|
}
|
|
}).done().fail(function () {
|
|
alert('登录失效!', '请求服务器无响应，稍后再试', 'warning')
|
|
setTimeout(function () {
|
|
window.location.href = '../../login'
|
|
}, 2000)
|
|
})
|
|
},
|
|
selectEcoType: function (id, name) {
|
|
this.CORP_TYPE = id
|
|
this.CORP_TYPE_NAME = name
|
|
$('.map-filter-main>i:first').toggleClass('show-dropdown')
|
|
$('#first-dropdown').toggle()
|
|
this.getCorpStatistics()
|
|
this.getRiskCorp()
|
|
this.getRiskData()
|
|
this.addPoint()
|
|
},
|
|
selectMapType: function (id, name) {
|
|
this.MAP_TYPE = id
|
|
this.MAP_TYPE_NAME = name
|
|
$('.map-filter-main>i:eq(1)').toggleClass('show-dropdown')
|
|
$('#second-dropdown').toggle()
|
|
this.addPoint()
|
|
},
|
|
getQuery() {
|
|
$('#icon-sousuo').show()
|
|
$('#icon-sousuo-1').hide()
|
|
$('#map-search-dropdown').show(300)
|
|
$('#map-search-main-input').removeClass('show')
|
|
this.addPoint()
|
|
},
|
|
addPoint: function () {
|
|
this.map.clearOverlays()
|
|
if (this.MAP_TYPE == 1) {
|
|
this.getCorpMap();
|
|
} else if (this.MAP_TYPE == 2) {
|
|
this.getHiddenMap()
|
|
} else if (this.MAP_TYPE == 3) {
|
|
this.getRiskMap()
|
|
} else if (this.MAP_TYPE == 4) {
|
|
this.getDangerMap()
|
|
}
|
|
},
|
|
setCenter: function (data) {
|
|
$('#map-search-dropdown').hide(300)
|
|
const point = new BMap.Point(data.LONGITUDE, data.LATITUDE)
|
|
vm.map.centerAndZoom(point, 12)
|
|
},
|
|
getCorpMap: function () {
|
|
$.ajax({
|
|
xhrFields: {
|
|
withCredentials: true
|
|
},
|
|
type: 'POST',
|
|
url: config.httpurl + 'corpinfo/listAllV2',
|
|
data: {
|
|
KEYWORDS: this.KEYWORDS,
|
|
COUNTRY: this.COUNTRY,
|
|
VILLAGE: this.VILLAGE,
|
|
CORP_TYPE: this.CORP_TYPE
|
|
},
|
|
dataType: 'json',
|
|
success: function (data) {
|
|
if ('success' == data.result) {
|
|
const varList = data.varList
|
|
vm.varList = varList
|
|
for (let i = 0; i < varList.length; i++) {
|
|
const point = new BMap.Point(varList[i].LONGITUDE, varList[i].LATITUDE)
|
|
const marker = new BMap.Marker(point) // 创建标注
|
|
vm.map.addOverlay(marker) // 将标注添加到地图中
|
|
// 设置提示框的宽高等
|
|
const opts = {
|
|
title: '<h4>' + varList[i].CORP_NAME + '</h4>',
|
|
width: 320,
|
|
// height: 320,
|
|
enableMessage: false,
|
|
offset: {
|
|
width: 5, height: -15
|
|
}
|
|
}
|
|
// 设置提示框的内容
|
|
const infoWindow = new BMap.InfoWindow(`<table class="table-baidu-map">` +
|
|
`<tr>` +
|
|
`<td class="brbi">企业类型：</td>` +
|
|
`<td>` + (varList[i].CORP_OF_TYPE_VAL || '') + (varList[i].CORP_OF_TYPE2_VAL ? '--' + varList[i].CORP_OF_TYPE2_VAL : '') + `</td>` +
|
|
`</tr>` +
|
|
|
|
`<tr>` +
|
|
`<td class="brbi">主要负责人：</td>` +
|
|
`<td>` + (varList[i].CONTACTS || '') + `</td>` +
|
|
`</tr>` +
|
|
|
|
`<tr>` +
|
|
`<td class="brbi">电话：</td>` +
|
|
`<td>` + (varList[i].CONTACTS_PHONE || '') + `</td>` +
|
|
`</tr>` +
|
|
|
|
`<tr>` +
|
|
`<td class="brbi">风险点：` + (varList[i].unitCount || '0') + `</td>` +
|
|
`<td class="brbi">辨识部位：` + (varList[i].idCount || '0') + ` </td>` +
|
|
`<td class="brbi">存在风险：` + (varList[i].pointCount || '0') + ` </td>` +
|
|
`</tr>` +
|
|
|
|
`<tr>` +
|
|
`<td class="arai_red" >检查清单数：` + (varList[i].checkedCount || '0') + ` </td>` +
|
|
`<td class="arai_green">上报隐患数：` + (varList[i].zdCount + varList[i].ybCount || '0') + ` </td>` +
|
|
`<td class="arai_blue">已整改隐患数：` + (varList[i].zdCount || '0') + ` </td>` +
|
|
`</tr>`
|
|
//
|
|
// `<tr>` +
|
|
// `<td class="brbi">企业状态：</td>` +
|
|
// `<td>` + (varList[i].STATUS_NAME || '') + `</td>` +
|
|
// `</tr>` +
|
|
//
|
|
//
|
|
// `<tr>` +
|
|
// `<td class="brbi">地址：</td>` +
|
|
// `<td>` + (varList[i].ADDRESS || '') + `</td>` +
|
|
// `</tr>`
|
|
, opts)
|
|
marker.addEventListener('mouseover', function () {
|
|
vm.map.openInfoWindow(infoWindow, point)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}).done().fail(function () {
|
|
alert('登录失效!', '请求服务器无响应，稍后再试', 'warning')
|
|
setTimeout(function () {
|
|
window.location.href = '../../login'
|
|
}, 2000)
|
|
})
|
|
},
|
|
getHiddenMap: function () {
|
|
$.ajax({
|
|
xhrFields: {
|
|
withCredentials: true
|
|
},
|
|
type: 'POST',
|
|
url: config.httpurl + 'corpinfo/listAll',
|
|
data: {
|
|
KEYWORDS: this.KEYWORDS,
|
|
COUNTRY: this.COUNTRY,
|
|
VILLAGE: this.VILLAGE,
|
|
CORP_TYPE: this.CORP_TYPE,
|
|
HIDDEN_GIS: 1
|
|
},
|
|
dataType: 'json',
|
|
success: function (data) {
|
|
if ('success' == data.result) {
|
|
const varList = data.varList
|
|
vm.varList = varList
|
|
for (let i = 0; i < varList.length; i++) {
|
|
const point = new BMap.Point(varList[i].LONGITUDE, varList[i].LATITUDE)
|
|
const marker = new BMap.Marker(point) // 创建标注
|
|
vm.map.addOverlay(marker) // 将标注添加到地图中
|
|
// 设置提示框的宽高等
|
|
const opts = {
|
|
title: '<h4>' + varList[i].CORP_NAME + '</h4>',
|
|
width: 280,
|
|
// height: 320,
|
|
enableMessage: false,
|
|
offset: {
|
|
width: 5, height: -15
|
|
}
|
|
}
|
|
// 设置提示框的内容
|
|
const infoWindow = new BMap.InfoWindow(`<table class="table-baidu-map">` +
|
|
`<tr>` +
|
|
`<td class="brbi">主要负责人</td>` +
|
|
`<td>` + (varList[i].CONTACTS || '') + `</td>` +
|
|
`</tr>` +
|
|
|
|
`<tr>` +
|
|
`<td class="brbi">联系电话</td>` +
|
|
`<td>` + (varList[i].CONTACTS_PHONE || '') + `</td>` +
|
|
`</tr>` +
|
|
|
|
`<tr>` +
|
|
`<td class="brbi">上报隐患数</td>` +
|
|
`<td>` + (varList[i].zgCount + varList[i].wzgCount) + `</td>` +
|
|
`</tr>` +
|
|
|
|
`<tr>` +
|
|
`<td class="brbi">整改隐患数</td>` +
|
|
`<td>` + varList[i].zgCount + `</td>` +
|
|
`</tr>` +
|
|
|
|
`<tr>` +
|
|
`<td class="brbi">未整改隐患数</td>` +
|
|
`<td>` + varList[i].wzgCount + `</td>` +
|
|
`</tr>`
|
|
, opts)
|
|
marker.addEventListener('mouseover', function () {
|
|
vm.map.openInfoWindow(infoWindow, point)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}).done().fail(function () {
|
|
alert('登录失效!', '请求服务器无响应，稍后再试', 'warning')
|
|
setTimeout(function () {
|
|
window.location.href = '../../login'
|
|
}, 2000)
|
|
})
|
|
},
|
|
|
|
getRiskMap: function () {
|
|
$.ajax({
|
|
xhrFields: {
|
|
withCredentials: true
|
|
},
|
|
type: 'POST',
|
|
url: config.httpurl + 'corpinfo/riskStatisticslistAll',
|
|
data: {
|
|
KEYWORDS: this.KEYWORDS,
|
|
COUNTRY: this.COUNTRY,
|
|
VILLAGE: this.VILLAGE,
|
|
CORP_TYPE: this.CORP_TYPE
|
|
},
|
|
dataType: 'json',
|
|
success: function (data) {
|
|
if ('success' == data.result) {
|
|
const varList = data.varList
|
|
vm.varList = varList
|
|
for (let i = 0; i < varList.length; i++) {
|
|
const point = new BMap.Point(varList[i].LONGITUDE, varList[i].LATITUDE)
|
|
const marker = new BMap.Marker(point) // 创建标注
|
|
vm.map.addOverlay(marker) // 将标注添加到地图中
|
|
// 设置提示框的宽高等
|
|
const opts = {
|
|
title: '<h4>' + varList[i].CORP_NAME + '</h4>',
|
|
width: 280,
|
|
// height: 320,
|
|
enableMessage: false,
|
|
offset: {
|
|
width: 5, height: -15
|
|
}
|
|
}
|
|
// 设置提示框的内容
|
|
const infoWindow = new BMap.InfoWindow(`<table class="table-baidu-map">` +
|
|
`<tr>` +
|
|
`<td class="brbi">主要负责人</td>` +
|
|
`<td>` + (varList[i].CONTACTS || '') + `</td>` +
|
|
`</tr>` +
|
|
|
|
`<tr>` +
|
|
`<td class="brbi">联系电话</td>` +
|
|
`<td>` + (varList[i].CONTACTS_PHONE || '') + `</td>` +
|
|
`</tr>` +
|
|
|
|
`<tr>` +
|
|
`<td class="brbi">风险点（单元）数</td>` +
|
|
`<td>` + (varList[i].unitCount || 0) + `</td>` +
|
|
`</tr>` +
|
|
|
|
`<tr>` +
|
|
`<td class="brbi">辨识部位数</td>` +
|
|
`<td>` + (varList[i].idCount || 0) + `</td>` +
|
|
`</tr>` +
|
|
|
|
`<tr>` +
|
|
`<td class="brbi">存在风险数</td>` +
|
|
`<td>` + (varList[i].pointCount || 0) + `</td>` +
|
|
`</tr>`
|
|
, opts)
|
|
marker.addEventListener('mouseover', function () {
|
|
vm.map.openInfoWindow(infoWindow, point)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}).done().fail(function () {
|
|
alert('登录失效!', '请求服务器无响应，稍后再试', 'warning')
|
|
setTimeout(function () {
|
|
window.location.href = '../../login'
|
|
}, 2000)
|
|
})
|
|
},
|
|
|
|
getDangerMap: function () {
|
|
$.ajax({
|
|
xhrFields: {
|
|
withCredentials: true
|
|
},
|
|
type: 'POST',
|
|
url: config.httpurl + 'majorinformation/listAll',
|
|
data: {
|
|
KEYWORDS: this.KEYWORDS,
|
|
COUNTRY: this.COUNTRY,
|
|
VILLAGE: this.VILLAGE,
|
|
CORP_TYPE: this.CORP_TYPE
|
|
},
|
|
dataType: 'json',
|
|
success: function (data) {
|
|
if ('success' == data.result) {
|
|
const varList = data.varList
|
|
vm.varList = varList
|
|
for (let i = 0; i < varList.length; i++) {
|
|
const point = new BMap.Point(varList[i].LONGITUDE, varList[i].LATITUDE)
|
|
const marker = new BMap.Marker(point) // 创建标注
|
|
vm.map.addOverlay(marker) // 将标注添加到地图中
|
|
// 设置提示框的宽高等
|
|
const opts = {
|
|
title: '<h4>' + varList[i].MAJOR_NAME + '</h4>',
|
|
width: 280,
|
|
// height: 320,
|
|
enableMessage: false,
|
|
offset: {
|
|
width: 5, height: -15
|
|
}
|
|
}
|
|
let levelName = ''
|
|
if (varList[i].MAJOR_LEVEL == 'level1') {
|
|
levelName = '一级'
|
|
} else if (varList[i].MAJOR_LEVEL == 'level2') {
|
|
levelName = '二级'
|
|
} else if (varList[i].MAJOR_LEVEL == 'level3') {
|
|
levelName = '三级'
|
|
} else if (varList[i].MAJOR_LEVEL == 'level4') {
|
|
levelName = '四级'
|
|
}
|
|
// 设置提示框的内容
|
|
const infoWindow = new BMap.InfoWindow(`<table class="table-baidu-map">` +
|
|
`<tr>` +
|
|
`<td class="brbi">所属企业：</td>` +
|
|
`<td>` + (varList[i].CORP_NAME || '') + `</td>` +
|
|
`</tr>` +
|
|
|
|
`<tr>` +
|
|
`<td class="brbi">等级：</td>` +
|
|
`<td>` + levelName + `</td>` +
|
|
`</tr>` +
|
|
|
|
`<tr>` +
|
|
`<td class="brbi">类型：</td>` +
|
|
`<td>` + (varList[i].TYPE_NAME || '') + `</td>` +
|
|
`</tr>` +
|
|
|
|
`<tr>` +
|
|
`<td class="brbi">主要负责人：</td>` +
|
|
`<td>` + (varList[i].LIABLE_NAME || '') + `</td>` +
|
|
`</tr>` +
|
|
|
|
`<tr>` +
|
|
`<td class="brbi">联系电话：</td>` +
|
|
`<td>` + (varList[i].LIABLE_PHONE || '') + `</td>` +
|
|
`</tr>`
|
|
|
|
, opts)
|
|
marker.addEventListener('mouseover', function () {
|
|
vm.map.openInfoWindow(infoWindow, point)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}).done().fail(function () {
|
|
alert('登录失效!', '请求服务器无响应，稍后再试', 'warning')
|
|
setTimeout(function () {
|
|
window.location.href = '../../login'
|
|
}, 2000)
|
|
})
|
|
},
|
|
|
|
getTime: function () {
|
|
var myDate = new Date
|
|
var year = myDate.getFullYear() //获取当前年
|
|
var mon = myDate.getMonth() + 1 //获取当前月
|
|
var date = myDate.getDate() //获取当前日
|
|
var h = myDate.getHours()//获取当前小时数(0-23)
|
|
var m = myDate.getMinutes()//获取当前分钟数(0-59)
|
|
var s = myDate.getSeconds()//获取当前秒
|
|
if (s < 10) {
|
|
s = '0' + s
|
|
}
|
|
var week = myDate.getDay()
|
|
var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
|
this.time = h + ':' + m + ':' + s
|
|
this.date = year + '.' + mon + '.' + date
|
|
this.week = weeks[week]
|
|
// $("#time").html(year + "年" + mon + "月" + date + "日" + weeks[week]);
|
|
},
|
|
//获取数据字典数据
|
|
getDict: function () {
|
|
//企业经济类型
|
|
$.ajax({
|
|
xhrFields: {
|
|
withCredentials: true
|
|
},
|
|
type: 'POST',
|
|
url: config.httpurl + 'dictionaries/getLevels?tm=' + new Date().getTime(),
|
|
data: { DICTIONARIES_ID: 'f2598ba72e864eadabf0ca4b664d26b9' },
|
|
dataType: 'json',
|
|
success: function (data) {
|
|
vm.ECOTypeList = data.list
|
|
}
|
|
})
|
|
}
|
|
},
|
|
mounted() {
|
|
this.init()
|
|
}
|
|
})
|
|
// $(function() {
|
|
// var H = $(window).height();
|
|
// var W = $(window).width();
|
|
// $(".full-screen").width(W).height(H);
|
|
// getCorpStatistics()
|
|
// $(window).resize(function() {
|
|
// var H = $(window).height();
|
|
// var W = $(window).width();
|
|
// $(".full-screen").width(W).height(H);
|
|
// });
|
|
// })
|
|
|
|
</script>
|