Commit c3a12e50 by zhao_shaonan

经纬度点击弹框地图取点

parent 4ab404e9
......@@ -14,11 +14,11 @@
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- 审批自动检测所需js -->
<!--map/*config为内网配置,config_internet为外网配置*/-->
<script type="text/javascript" src="./js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="./js/AutoCheck.js"></script>
<script type="text/javascript" src="./js/autoCheckDemo.js"></script>
<script type="text/javascript" src="./js/spIndex.js"></script>
<script type="text/javascript" src="./js/script.js"></script>
<script type="text/javascript" src="./js/OpMap/ol.js"></script>
<script type="text/javascript" src="./js/OpMap/OpMap.js"></script>
<!--<script type="text/javascript" src="./js/OpMap/config_internet.js"></script>-->
<script type="text/javascript" src="./js/OpMap/config.js"></script>
</body>
</html>
;(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define([], factory);
} else if (typeof exports === 'object') {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory();
} else {
// Browser globals (root is window)
root.AutoCheck = factory();
}
}(this, function () {
var Check = function (checkConfig,checkConfigMin) {
this.id = 'autoCheckModal';
this.isShowFinalBtn = checkConfig['isShowFinalBtn'] === 'undefined'?true:checkConfig['isShowFinalBtn'];
this.finalBtnText = checkConfig['finalBtnText'];
this.checkList = checkConfig['checkList'];
this.checkListMin = checkConfigMin['checkList'];
this.callback = checkConfig['callback'];
this.curStep = 0;
this.curStatus = 'checking';
this.isAutoRunCallback = checkConfig['isAutoRunCallback'] === 'undefined'?false:checkConfig['isAutoRunCallback'];
this.timeGap = checkConfig['timeGap'];
this.timeGapMin = checkConfigMin['timeGap'];
};
Check.prototype.run = function () {
if(this.checkList && this.checkList instanceof Array && this.checkList.length > 0){
this.createHtml();
//this.doCheck();
}
};
Check.prototype.createHtml = function () {
if(!this.finalBtnText || typeof this.finalBtnText !== 'string'){
//this.finalBtnText = '确定';
}
var modal = '<div class="modal" id="'+this.id+'" style="display: none">'
+'<div class="modal-content">'
+'<div class="check-box">'
+'<div class="check-box1" style="display:none;">' //检测页面
+'<a class="min" href="javascript:;" title="最小化" onclick="minC()"></a>'
+'<div class="top-box">'
+'<div class="check-result">'
+'<p class="img-logo"><span src="/src/assets/img/logo.png" class="jc-logo-min"></span></p>'
+'<div class="text-ing"><p class="zzjc">正在检测:<span id="zzjc-text"></span></p></div>'
+'<p class="btn-group"><button type="button" class="toggle-timer" name="toggle-timer">开始</button><button type="button" class="finish" name="finish" style="display:none;" onclick="finish()">完成</button></p>'
+'<div class="loader-container"><span class="runner"></span></div></div></div>'
+'<ul class="check-list"></ul></div>'
+'<div class="jc-box-c">' //首页面
+'<a class="min" href="javascript:;" title="最小化" onclick="minC()"></a>' //首次页面onclick="qmjc()
+'<div class="jc-box">'
+'<div class="r-box"><p class="jc-logo"></p>'
+'<h1 class="titleLogin"></h1></div>'
+'<button class="btn color-1 material-design" data-color="#2f5398" onclick="qmjc()">开始检测</button>'
+'</div></div>';
if(this.isShowFinalBtn){
}
modal += '</div></div></div>';
$('body').append(modal);
var that = this;
$.each(this.checkList, function (i) { //
var li = '<li class="unchecked">'
+'<span class="check-icon2">'+(i+1)+'</span>'
+'<span class="check-text">'+(i===0?this.checking:this.unchecked)+'</span>'
+'<i class="fa fa-chevron-up up-down" onclick="fold(this)"></i>'
+'<span class="check-icon"></span>'
+'<ul class="sub-ul" style="'+(i===0?'display:block;':'display:none;')+'">'
+'</ul></li>';
$('#'+that.id).find('.check-list').append(li);
for(var k in that.checkListMin[i]){
var value=that.checkListMin[i][k];
var liMin ='<li class="sub-li">'
+value[1]+'<span class="check-text2">'+value[0]+'</span>' //<i class="sacn-icon" style="transform: rotateY(360deg);">旋转动画标签
+'<span class="scanning-result">等待扫描</span>' //1.检测合格:<button class="security">安全</button> 2.检测缺失<button class="security-qs">缺失</button> 3.正在扫描:正在扫描... class为scanning
+'</li>';
$('.unchecked').eq(i).find('.sub-ul').append(liMin);
};
});
};
Check.prototype.doCheck = function () {
(function(that){
var timeGap = 500;
if(that.timeGap && parseInt(that.timeGap) === parseInt(that.timeGap)){
timeGap = that.timeGap;
timeGapMin = that.timeGapMin;
}
var doCheck = setInterval(fn,timeGap);
function fn(){
var curLi = $('#'+that.id).find('.check-list>li').eq(that.curStep);
curLi.find('.check-icon').html('');
curLi.find('.check-text').html(that.checkList[that.curStep].checked);
curLi.attr('class','checked');
that.curStep++;
if(that.checkList[that.curStep]){
var nextLi = $('#'+that.id).find('.check-list>li').eq(that.curStep);
nextLi.find('.check-text').html(that.checkList[that.curStep].checking);
nextLi.attr('class','checking');
nextLi.find(".sub-ul").show();
nextLi.find(".sub-ul>li").eq(0).addClass("scanning").find(".scanning-result").text("正在扫描...");
nextLi.find(".sub-ul>li").eq(0).find(".icon2").html('<i class="sacn-icon" style="transform: rotateY(360deg);">');
var length=nextLi.find(".sub-ul li").length;
var newtimeGap=800*length;
window.clearInterval(doCheck);
doCheck=setInterval(fn,newtimeGap);
doCheckMin(nextLi,timeGapMin,that.curStep,that.checkListMin);
}else{
if(that.isAutoRunCallback){
that.callback();
that.destroy();
}else{
$(".runner").css("width","0%");
toggleButton.textContent = "重新检测";
finishButton.style.display = ""; //完成按钮显示
toggleButton.style.display="";
//toggleTimer();
$(".zzjc").html("检测结果:数据质量合格,满足上报公安部规范。");
}
window.clearInterval(doCheck);
}
}
Check.prototype.CheckId=doCheck;
})(this)
};
Check.prototype.destroy = function () {
$('#'+this.id).remove();
};
Check.prototype.stopCheck = function () {
window.clearInterval(this.CheckId);
};
return {
run: function (checkConfig,checkConfigMin) {
var check = new Check(checkConfig,checkConfigMin);
check.run();
},
doCheck: function (checkConfig,checkConfigMin) {
var check = new Check(checkConfig,checkConfigMin);
check.doCheck();
},
stopCheck: function (checkConfig,checkConfigMin) {
var check = new Check(checkConfig,checkConfigMin);
check.stopCheck();
}
};
}));
/*地图底图配置*/
OpMap.prototype.$baseMapConfig = [
{type:'TileGrid',url:"http://68.174.69.45:6080/arcgis/rest/services/founder/dg20191120/MapServer/tile/{z}/{y}/{x}",layerId:'OpVectorBaseMap',Visible:true,projection:'EPSG:4326',label:'矢量',resolutions:[
0.7039144156731805,
0.35195720784848755,
0.17597860391234646,
0.08798930195617323,
0.04399465098998392,
0.02199732549499196,
0.01099866274749598,
0.00549933137374799,
0.002749665686873995,
0.0013748328434369974
],origin : [-180.0, 90]},
]
OpMap.prototype.$MapPz = {
center:[116.403613,39.914687],
// center:[113.772195205092,22.7747319638729],
zoom:8,
minZoom:5,
maxZoom:9,
resolutions:[
1.4062500000000002,
0.7031250000000001,
0.35156250000000006,
0.17578125000000003,
0.08789062500000001,
0.04394531250000001,
0.021972656250000003,
0.010986328125000002,
0.005493164062500001,
0.0027465820312500004,
0.0013732910156250002,
6.866455078125001E-4,
3.4332275390625005E-4,
1.7166137695312503E-4,
8.583068847656251E-5,
4.2915344238281264E-5,
2.14576721191406E-5,
1.07288360595703E-5,
5.36441802978516E-6,
2.68220901485E-6,
1.341104507425E-6,
6.705522537124998E-7
]
}
OpMap.prototype.$ZoomToMapScale = {
5:9244667.36,
6:4622333.68,
7:2311166.84,
8:1155583.42,
9:577791.71,
10:288895.85,
11:144447.93,
12:72223.96,
13:36111.98,
14:18055.99,
15:9028,
16:4514,
17:2257
}
/*地图底图配置*/
OpMap.prototype.$baseMapConfig = [
{
type: 'TileGrid', requestType: "POST", url: 'http://47.92.225.109:6080/arcgis/rest/services/founder/qg20191120/MapServer/tile/{z}/{y}/{x}', layerId: 'OpVectorBaseMap', Visible: true, projection: 'EPSG:4326', label: '矢量', resolutions: [
0.7039144156731805,
0.35195720784848755,
0.17597860391234646,
0.08798930195617323,
0.04399465098998392,
0.02199732549499196,
0.01099866274749598,
0.00549933137374799,
0.002749665686873995,
0.0013748328434369974
], origin: [ -180.0, 90]
},
]
OpMap.prototype.$MapPz = {
center: [116.403613,39.914687],
zoom: 8,
minZoom: 5,
maxZoom: 9,
resolutions: [
1.4062500000000002,
0.7031250000000001,
0.35156250000000006,
0.17578125000000003,
0.08789062500000001,
0.04394531250000001,
0.021972656250000003,
0.010986328125000002,
0.005493164062500001,
0.0027465820312500004,
0.0013732910156250002,
6.866455078125001E-4,
3.4332275390625005E-4,
1.7166137695312503E-4,
8.583068847656251E-5,
4.2915344238281264E-5,
2.14576721191406E-5,
1.07288360595703E-5,
5.36441802978516E-6,
2.68220901485E-6,
1.341104507425E-6,
6.705522537124998E-7
]
}
OpMap.prototype.$ZoomToMapScale = {
5: 9244667.36,
6: 4622333.68,
7: 2311166.84,
8: 1155583.42,
9: 577791.71,
10: 288895.85,
11: 144447.93,
12: 72223.96,
13: 36111.98,
14: 18055.99,
15: 9028,
16: 4514,
17: 2257
}
This source diff could not be displayed because it is too large. You can view the blob instead.
var checkConfig = { //大类
/*按钮文字*/
finalBtnText: '确定',
/*每一步各状态描述<span class="check-icon3">合格</span>*/
checkList: [
{
'unchecked':'检测案件基本信息',
'checking':'正在检测案件基本信息',
'checked':'案件基本信息检测完成'
},
{
'unchecked':'检测案件法律文书',
'checking':'正在检测案件法律文书',
'checked':'案件法律文书检测完成'
},
{
'unchecked':'检测涉案犯罪嫌疑人',
'checking':'正在检测涉案犯罪嫌疑人',
'checked':'涉案犯罪嫌疑人检测完成'
},
{
'unchecked':'检测案件受害人',
'checking':'正在检测案件受害人',
'checked':'案件受害人检测完成'
},
{
'unchecked':'检测嫌疑人法律文书',
'checking':'正在检测嫌疑人法律文书',
'checked':'嫌疑人法律文书检测完成'
}
],
/*是否显示按钮*/
isShowFinalBtn: true,
/*执行结束后的回调函数*/
callback: function () {
},
/*是否自动执行回调函数*/
isAutoRunCallback: false,
/*每一步的时间间隔*/
timeGap: 2500
};
var checkConfigMin = { //小类
/*按钮文字*/
finalBtnText: '确定',
checkList: [
{
'1':['立案单位','<i class="fa fa-book icon2"></i>','合格'],
'2':['立案日期','<i class="fa fa-calendar-check-o icon2"></i>','合格'],
'3':['案件简要情况','<i class="fa fa-edit icon2"></i>','合格'],
'4':['现场勘验编号','<i class="fa fa-file-powerpoint-o icon2"></i>','合格'],
'5':['涉案事由','<i class="fa fa-file-text-o icon2"></i>','缺失']
},
{
'1':['立案决定书','<i class="fa fa-file icon2"></i>','合格'],
'2':['现场分析报告','<i class="fa fa-paste icon2"></i>','合格']
},
{
'1':['基本信息','<i class="fa fa-address-book-o icon2"></i>','合格']
},
{
'1':['基本信息','<i class="fa fa-address-book-o icon2"></i>','合格']
},
{
'1':['立案:逮捕令','<i class="fa fa-file-text-o icon2"></i>','合格'],
'2':['死亡:死亡证明','<i class="fa fa-file-text-o icon2"></i>','合格'],
'3':['精神病:精神病证明','<i class="fa fa-file-text-o icon2"></i>','合格'],
'4':['其他疾病:医院的疾病证明','<i class="fa fa-file-text-o icon2"></i>','缺失']
}
],
/*是否显示按钮*/
isShowFinalBtn: true,
/*执行结束后的回调函数*/
callback: function () {
},
/*是否自动执行回调函数*/
isAutoRunCallback: false,
/*每一步的时间间隔*/
timeGap: 1000
};
AutoCheck.run(checkConfig,checkConfigMin);
//小类检测
function doCheckMin(curLi,timeGapMin,curStep,checkConfigMin){ //curLi当前的大项的li,timeGapMin 小类执行的时间,curStep 当前大类的索引,checkConfigMin小类数组
var arrLi=curLi.find(".sub-ul>li");
var i=0;
var doCheckMin=setInterval(function(){
var value=checkConfigMin[curStep][i+1][2];
if(value=="合格"){ //合格
curLi.find(".sub-ul>li").eq(i).find(".scanning-result").html("<button class='security'>合格</button>");
curLi.find(".sub-ul>li").eq(i).find(".icon2").html('');
curLi.find(".sub-ul>li").eq(i).removeClass('scanning').addClass("scan-hg");
}else{ //缺失
curLi.find(".sub-ul>li").eq(i).find(".scanning-result").html("<button class='security-qs'>缺失</button>");
curLi.find(".sub-ul>li").eq(i).find(".icon2").html('');
curLi.find(".sub-ul>li").eq(i).removeClass('scanning').addClass("scan-qs");
}
i++;
if(i<arrLi.length){
var nxtLi=curLi.find(".sub-ul>li").eq(i);
nxtLi.addClass('scanning');
nxtLi.find(".scanning-result").text("正在扫描...");
$(".icon2").html('');
nxtLi.find(".icon2").html('<i class="sacn-icon" style="transform: rotateY(360deg);">')
}else{ //每一项大类里的小类循环检测完毕执行的语句
window.clearInterval(doCheckMin);
i=0;
$.each(curLi.find(".sub-ul .scanning-result button"),function(i){ //检验是否合格,合格默认收起,否则,显示
if($(this).text()=="缺失"){
curLi.find(".check-icon").text("缺失").addClass("qs");
curLi.find(".fa-chevron-down").removeClass("fa-chevron-down").addClass("fa-chevron-up");
curLi.find(".sub-ul").show();
return false;
}else{
curLi.find(".check-icon").text("合格");
curLi.find(".fa-chevron-up").removeClass("fa-chevron-up").addClass("fa-chevron-down");
curLi.find(".sub-ul").hide();
}
});
$('.check-list').scrollTop( $('.check-list')[0].scrollHeight );
}
},timeGapMin);
}
setInterval("ck()",500);
function ck(){ //实时刷新正在检测项
$('.check-list>li').each(function (i) {
if($(this).hasClass("checking")){
$("#zzjc-text").html($(this).find(".check-text").html().substring(4));
}
});
}
function resetLi(){ //检测完毕,重新检测时重置检测大项的名称
$(".check-text").each(function(i){
if(i==0){
$(this).html(checkConfig["checkList"][i].checking);
}else{
$(this).html(checkConfig["checkList"][i].unchecked);
}
});
$(".check-icon").removeClass("qs");
$(".zzjc").html("正在检测:<span id='zzjc-text'></span>");
$(".check-icon").text('');
$(".sub-ul").hide().eq(0).show();
$(".sub-ul>li").attr("class","sub-li").find(".scanning-result").html("等待扫描");
finishButton.style.display = "none"; //完成按钮隐藏
$(".runner").animate({width:"99%"},"fast");
$(".check-list>li").removeClass("checked").addClass("unchecked");
$(".check-list>li:eq(0)").removeClass("unchecked").addClass("checking");
$(".check-list>li:eq(0)").find(".sub-ul>li").eq(0).addClass("scanning").find(".scanning-result").text("正在扫描..."); //小类的第一项添加正在扫描
$(".check-list>li:eq(0)").find(".sub-ul>li").eq(0).find(".icon2").html('<i class="sacn-icon" style="transform: rotateY(360deg);">'); //小类的第一项添加扫描动画
}
function qmjc(){ //开始检测按钮事件
$(".jc-box-c").hide();
$(".check-box1").show();
toggleTimer();
}
function finish(){ //完成按钮事件
$(".jc-box-c").show();
$(".check-box1").hide();
}
function fold(obj){ //展开收缩
if($(obj).hasClass("fa-chevron-up")){
$(obj).removeClass("fa-chevron-up").addClass("fa-chevron-down");
$(obj).parents(".checked").find(".sub-ul").hide();
}else if($(obj).hasClass("fa-chevron-down")){
$(obj).removeClass("fa-chevron-down").addClass("fa-chevron-up");
$(obj).parents(".checked").find(".sub-ul").show();
}
}
function animate(runner){
runner.animate({width:"0%"},12000);
}
/*进度条*/
var Loader = function () {
var loader = document.querySelector('.loader-container'),
meter = document.querySelector('.meter'),
k, i = 1;
return {
init: function (options) {
options = options || {};
var time = options.time ? options.time : 0,
interval = time/100;
loader.classList.add('run');
//k = window.setInterval(counter, interval);
setTimeout(function () {
loader.classList.add('done');
}, time);
},
}
}();
Loader.init({
// If you have changed the @time in LESS, update this number to the corresponding value. Measured in miliseconds.
time: 10000
});
const timerDisplay = document.querySelector(".timer-display");
const toggleButton = document.querySelector(".toggle-timer");
const finishButton = document.querySelector(".finish");
toggleButton.textContent="开始";
function toggleTimer() { //开始和重新检测按钮点击方法
var timeGapMin=500;
var curStep=0;
var checkConfigMin1 = checkConfigMin['checkList'];
var curLi=$(".check-list>li:eq(0)");
// starts timer
if (toggleButton.textContent=="开始") { //开始第一次检测
$(".check-list>li:eq(0)").removeClass("unchecked").addClass("checking"); //大类的第一个li添加正在检测状态的class
$(".check-list>li:eq(0)").find(".sub-ul>li").eq(0).addClass("scanning").find(".scanning-result").text("正在扫描..."); //小类的第一项添加正在扫描
$(".check-list>li:eq(0)").find(".sub-ul>li").eq(0).find(".icon2").html('<i class="sacn-icon" style="transform: rotateY(360deg);">'); //小类的第一项添加扫描动画
AutoCheck.doCheck(checkConfig,checkConfigMin); //执行检测方法
doCheckMin(curLi,timeGapMin,curStep,checkConfigMin1); //小类执行检测方法
toggleButton.style.display = "none";
$(".runner").css("width","100%");
animate($(".runner"));
// stops timer
} else if(toggleButton.textContent=="重新检测") { //重新检测
resetLi();
AutoCheck.doCheck(checkConfig,checkConfigMin);
doCheckMin(curLi,timeGapMin,curStep,checkConfigMin1); //小类执行检测方法
animate($(".runner"));
toggleButton.style.display = "none";
}
}
toggleButton.addEventListener("click", toggleTimer);
var canvas = {},
centerX = 0,
centerY = 0,
color = '',
containers = document.getElementsByClassName('material-design')
context = {},
element = {},
radius = 0,
requestAnimFrame = function () {
return (
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
}
);
} (),
init = function () {
containers = Array.prototype.slice.call(containers);
for (var i = 0; i < containers.length; i += 1) {
canvas = document.createElement('canvas');
canvas.addEventListener('mouseover', press, false);
containers[i].appendChild(canvas);
canvas.style.width ='100%';
canvas.style.height='100%';
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
}
},
press = function (event) {
color = event.toElement.parentElement.dataset.color;
element = event.toElement;
context = element.getContext('2d');
radius = 0;
centerX = event.offsetX;
centerY = event.offsetY;
context.clearRect(0, 0, element.width, element.height);
draw();
},
draw = function () {
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = color;
context.fill();
radius += 2;
if (radius < element.width) {
requestAnimFrame(draw);
}
};
init();
\ No newline at end of file
/*-------------------------- +
获取id, class, tagName
+-------------------------- */
var get = {
byId: function(id) {
return typeof id === "string" ? document.getElementById(id) : id
},
byClass: function(sClass, oParent) {
var aClass = [];
var reClass = new RegExp("(^| )" + sClass + "( |$)");
var aElem = this.byTagName("*", oParent);
for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
return aClass
},
byTagName: function(elem, obj) {
return (obj || document).getElementsByTagName(elem)
}
};
var dragMinWidth = 250;
var dragMinHeight = 124;
var disX = dixY = 0;
var oMin = document.querySelector(".min");
var oMax = document.querySelector(".max");
var oRevert = document.querySelector(".revert");
var oClose = document.querySelector(".close1");
var oDrag = document.querySelector(".modal-content");
var oModal = document.querySelector(".modal");
//还原按钮
function openC(){
oDrag.style.display = "";
oModal.style.display = "";
}
//最小化按钮
function minC(){
oDrag.style.display = "none";
oModal.style.display = "none";
}
/*oMin.onclick = oClose.onclick = function ()
{
oDrag.style.display = "none";
oModal.style.display = "none";
};*/
//阻止冒泡
oMin.onmousedown = oMax.onmousedown = oClose.onmousedown = function (event)
{
this.onfocus = function () {this.blur()};
(event || window.event).cancelBubble = true
};
......@@ -6,6 +6,7 @@ let base = {
BaseURL: '',//命案管理后台IP
qdLink: "",//前端访问链接
xzxt: '',
arcgisUrl:'',//map
};
if (relUrlIp == "133.8.5.1" ||
relUrlIp == "68.174.69.46" ||
......@@ -23,6 +24,8 @@ if (relUrlIp == "133.8.5.1" ||
base.xzxt = 'http://26.3.13.120:8051/#';
base.tjbh = 'http://80.2.21.62:8080/WebReport/ReportServer?reportlet=scjwzh%5B5b9a%5D%5B65f6%5D%2Fsc073_%5B5211%5D%5B4fa6%5D_%5B547d%5D%5B6848%5D%5B7edf%5D%5B8ba1%5D%5B62a5%5D%5B8868%5D%2Fsc073_xz_matj.cpt&op=view&tjdw=150000000000';
base.sjksh = 'http://68.174.69.46:8052/#/SpaceTimeCombat/HomicideCase/';
//内蒙公安网行政区划
base.arcgisUrl="http://26.3.12.43"
} else {
//------------------------------命案管理后台IP**阿里云**--------------------------------
......@@ -31,6 +34,8 @@ if (relUrlIp == "133.8.5.1" ||
base.xzxt = 'http://47.92.225.109:8004/#';
base.tjbh = 'http://80.2.21.62:8080/WebReport/ReportServer?reportlet=scjwzh%5B5b9a%5D%5B65f6%5D%2Fsc073_%5B5211%5D%5B4fa6%5D_%5B547d%5D%5B6848%5D%5B7edf%5D%5B8ba1%5D%5B62a5%5D%5B8868%5D%2Fsc073_xz_matj.cpt&op=view&tjdw=150000000000';
base.sjksh = 'http://68.174.69.46:8052/#/SpaceTimeCombat/HomicideCase/';
//内蒙公安网行政区划
base.arcgisUrl="http://26.3.12.43"
}
export default base;
<template>
<div>
<el-dialog title="选择经纬度" :visible.sync="jwdDialog" width="850px" class="jyDialog" :close-on-click-modal="false" center :show-close="false">
<!--字典框-->
<!-- <div class="zdyInputW" style="width:260px;">
<select-tree v-model="xzqhItem.xzqh" :placeholder="'请选择行政区划'"
:options="xzqhItem.xzqhCodeOptions" :sendId="xzqhItem.id" :xzqhGetNode="treeOnly" @emitXzqhValue="emitXzqhValue"/>
</div>-->
<div id="map" style="width: 821px;height: 352px"></div>
<div v-show="jingdu!=''||jingdu!='null'||weidu!=''||weidu!='null'">当前经度:{{jingdu}},纬度{{weidu}}</div>
<div slot="footer" class="dialog-footer">
<el-button @click="closeDialog">取 消</el-button>
<el-button type="primary" @click="saveMapDd">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
/*config为内网配置,config_internet为外网配置*/
import poi from '@/assets/img/img_poi.png'
import AllUrl from '@/api/base.js'
import request from '@/utils/axiosHttp.js'
export default {
name: "index",
components:{
/* SelectTree*/
},
props:{
isShowMap:Boolean,
jd:String,
wd:String
},
data(){
return {
treeOnly:true,
xzqhItem:{xzqhCodeOptions:[], xzqh:"",id:'xzqh'},
jwdDialog:this.isShowMap,
jingdu:'',
weidu:'',
emitJd:this.jd==null?'':this.jd,
emitWd:this.wd==null?'':this.wd,
initNum:0,
nodeData:{}
}
},
methods:{
ajaxMap(formObj) {
return request({
url: AllUrl.arcgisUrl+"/arcgis/rest/services/nmsl/MapServer/0",
params:formObj,
method: 'get'
})
},
closeDialog(){
this.jwdDialog=false;
this.$emit("closeMap")
},
saveMapDd(){
if(this.jingdu!=''){
this.$emit("parentAndChilenEvent",this.jingdu,this.weidu);
}
this.jwdDialog=false;
},
initMap(){
let self=this;
let parms = {
id: 'map',//地图id
PositionUi: 'right-top',//(left-top,left-bottom,right-top,right-bottom)
ShowDisplay: false//是否显示切换按钮,可以自己写样式控制图层切换
}
let map = new OpMap().$InitMAP(parms);
let parmL,parmLL;
/*创建要渲染的图层*/
parmL = {
layerId: "PointD",//必填
borderColor: '#12233',//边框颜色
strokeWidth: 2,//边框宽度
fillColor: '#222233',//填充颜色
img: { src: poi, scale: 1 },//图片和图片大小
}
new OpMap().$setLayer(parmL);
if(self.emitJd!=""&&self.emitJd!="null"&&self.emitJd!=null&&self.emitJd!="undefined"&&self.emitWd!=""&&self.emitWd!="null"&&self.emitWd!=null&&self.emitWd!="undefined"){
var parmCenter={
center:[self.emitJd,self.emitWd]//中心点
}
new OpMap().$Center(parmCenter)
/*创建要渲染的图层*/
parmLL = {
layerId: "PointD",//必填
type:'Point',//类型(Point、Circle、Polygon、LineString)//必要
data:[{geometry:[self.emitJd,self.emitWd]}],//点类型和圆[x,y]、线类型[[x,y],[x,y]]、面类型[[[x,y],[x,y],[x,y]]]attributions:{}}]
borderColor: '#12233',//边框颜色
strokeWidth: 2,//边框宽度
fillColor: '#222233',//填充颜色
img: { src: poi, scale: 1 },//图片和图片大小
}
new OpMap().$RenderLayer(parmLL)
}
/*地图点击事件、可对点击的地图元素进行查询(手动渲染的数据,不是底图数据)*/
new OpMap().$setDraw({
zIndex: 0,
layerId: "Retrieval",//必要
type: 'Point',//类型(Point、Circle、Polygon、LineString) //必要
borderColor: "rgba(255,0,0,0.6)",
fillColor: "rgba(255,0,0,0.2)",
strokeWidth: 2,
img: {src: poi, scale: 1},
})
var dragBox = new OpMap().$getInteractions({layerId: 'Retrieval'});
map.addInteraction(dragBox);
dragBox.on('drawend', function (e) {
self.jingdu=e.feature.getGeometry().flatCoordinates[0].toFixed(6);
self.weidu=e.feature.getGeometry().flatCoordinates[1].toFixed(6);
})
dragBox.on('drawstart', function (e) {
/* new OpMap().$getLayer({layerId:'PointD'}).getSource().forEachFeature(function (e) {
/!*e是feature要素 下面是直接删除*!/
new OpMap().$getLayer({layerId:'PointD'}).getSource().removeFeature(e)
})*/
new OpMap().$getLayer({layerId: "Retrieval"}).getSource().clear();
})
/*map.on('click', function (e) {
/!*self.$emit("parentAndChilenEvent",[e.coordinate]);*!/
self.jingdu=e.coordinate[0];
self.weidu=e.coordinate[1];
})*/
},
emitXzqhValue(node){
this.nodeData=node;
},
handleClick(data){
var self=this;
var url=AllUrl.arcgisUrl+"/arcgis/rest/services/nmsl/MapServer/0/query"
this.getDataXiaQu({url:url,data:data});
},
/*获取辖区名称*/
getDataXiaQu(item){
var self=this;
var data=null;
var zurl=item.url+"?where=ADCODE='"+item.data.id+"'&text=&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&returnTrueCurves=false&maxAllowableOffset=&geometryPrecision=&outSR=&having=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&historicMoment=&returnDistinctValues=false&resultOffset=&resultRecordCount=&queryByDistance=&returnExtentOnly=false&datumTransformation=&parameterValues=&rangeValues=&quantizationParameters=&f=pjson";
$.ajax({
type: 'get',
contentType : 'application/json;charset=UTF-8',
dataType: 'jsonp',
url: zurl,
async:false,
xhrFields: { withCredentials: true },
success: function (myJson) {
if(myJson.features.length>0){
data=myJson
self.xunHuanData(data,item.data)
}else{
self.$message({
type: 'warning',
message: '该区域暂无矢量数据!'
})
}
},
error(err) {
console.log(err)
}
});
},
xunHuanData(data,item){
var self=this;
var dataGeo=[];
for(var i=0;i<data.features.length;i++){
data.features[i].attributes.code=item.id;
dataGeo.push({
geometry: data.features[i].geometry.rings,//点类型和圆[x,y]、线类型[[x,y],[x,y]]、面类型[[[x,y],[x,y],[x,y]]]
attributions: data.features[i].attributes
})
}
var strokeWidth=2
var fillColor='rgba(255,19,24,0.05)';
var parm = {
layerId: 'PointD',//必要
type: 'Polygon',//类型(Point、Circle、Polygon、LineString) //必要
data: dataGeo,//必要
text: "",
radius: '',//米
zIndex:0,
borderColor: '#e757ff',
fillColor: fillColor,
strokeWidth: strokeWidth,
img: {src: poi, scale: 1},
}
var feature=new OpMap().$RenderLayer(parm);
var parmCenter={
center:[data.features[0].attributes.centerX,data.features[0].attributes.centerY]//中心点
}
new OpMap().$Center(parmCenter)
},
},
computed: {
newValue() {
return this.xzqhItem.xzqh
}
},
watch:{
newValue(val, oldVal){
let self=this;
if(val!=oldVal){//当前值与上一次得值若相等,地图框选则不变
if(new OpMap().$getLayer({layerId:'PointD'})!=undefined){
new OpMap().$getLayer({layerId:'PointD'}).getSource().forEachFeature(function (e) {
new OpMap().$getLayer({layerId:'PointD'}).getSource().removeFeature(e)
})
}
if(val!=""){
self.handleClick(self.nodeData);
}
}
},
isShowMap(val){
let self=this;
this.jwdDialog=val;
if(val==true&&self.initNum==0){
self.$nextTick(()=>{
self.initMap();
self.initNum++;
})
}
},
jd(val){
this.emitJd=val;
if(val!=''&&val!=null){
this.jingdu=val;
}
},
wd(val){
this.emitWd=val;
if(val!=''&&val!=null){
this.weidu=val;
}
}
},
mounted() {
}
}
</script>
<style scoped>
@import "../../../public/js/OpMap/ol.css";
</style>
......@@ -1042,6 +1042,8 @@
src="../../assets/img/sjcj/tiQingShenPi.gif">
</div>
</div>
<!--地图-->
<dd-map v-show="isShowMap" @parentAndChilenEvent="parentAndChilenEvent" @closeMap="closeMap" :isShowMap="isShowMap" :jd="formLabelAlign.asjfsddDqjd+''" :wd="formLabelAlign.asjfsddDqwd+''"></dd-map>
</div>
</template>
......@@ -1057,13 +1059,15 @@ import SelectTree from "@c/tree_components.vue";
import SelectTreeDialog from "@c/treeCode_components.vue";
// import PureFormPage from "./PureFormPage.vue";
import utilTool from "@/utils/util.js";
import ddMap from '@c/zuobiaoshiqu/index.vue'
export default {
name: "formCommonPage",
components: {
draggable,
LazySelectTreeDialog,
SelectTree,
SelectTreeDialog
SelectTreeDialog,
ddMap
},
props: {
headerTitle: String,
......@@ -1085,6 +1089,7 @@ export default {
},
data() {
return {
isShowMap:false,
rules: {
asjbh: [{ required: true, message: "不能为空", trigger: "change" }],
zatzJyqk: [{ required: true, message: "不能为空", trigger: "change" }],
......@@ -2493,6 +2498,14 @@ export default {
self.initFields();
},
methods: {
closeMap(){
this.isShowMap=false;
},
parentAndChilenEvent(data1,data2){
this.isShowMap=false;
this.formLabelAlign.asjfsddDqjd=data1;
this.formLabelAlign.asjfsddDqwd=data2;
},
deleteZp(type, index, cur) {
let self = this,
xxzjbh = "",
......@@ -2631,6 +2644,9 @@ export default {
});*/
self.getUser();
}
if(id=='asjfsddDqjd'||id=='asjfsddDqwd'){
self.isShowMap=true;
}
},
flwsSave(form) {
return Http({
......@@ -5515,7 +5531,6 @@ export default {
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
debugger
window.opener.location.reload();
window.close()
}).catch(() => {
......
......@@ -62,7 +62,7 @@ module.exports = {
},
proxy: {
"/apiMaxt": {
target: "http://192.168.0.120:9022/", //统一的请求头部每次修改都要重启才会生效 192.168.0.121 39.99.155.173
target: "http://39.99.155.173:9022/", //统一的请求头部每次修改都要重启才会生效 192.168.0.121 39.99.155.173
ws: true,
changeOrigin: true,
pathRewrite: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment