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>
|