| public/map/images/edit.png | patch | view | raw | blame | history | |
| public/map/images/point.png | patch | view | raw | blame | history | |
| public/map/widgets/securityMap/SecurityMap.css | ●●●●● patch | view | raw | blame | history | |
| public/map/widgets/securityMap/SecurityMap.js | ●●●●● patch | view | raw | blame | history | |
| public/map/widgets/securityMap/template.html | ●●●●● patch | view | raw | blame | history | |
| src/views/policeTracking/policeTracking.vue | ●●●●● patch | view | raw | blame | history | |
| src/views/supervisoryConsole/data.vue | ●●●●● patch | view | raw | blame | history | |
| vue.config.js | ●●●●● patch | view | raw | blame | history |
public/map/images/edit.png
public/map/images/point.png
public/map/widgets/securityMap/SecurityMap.css
@@ -1,10 +1,10 @@ .mapBtn { background-color: #ffffff; width: 14vh; width: 20.4vh; height: 4vh; position: relative; top: 3vh; right: -45vh; right: -22vh; border-radius: 5px; } @@ -22,6 +22,10 @@ letter-spacing: 1.5px; } .editBtn { float: left; } .mapBtn img { position: relative; left: 1.2vh; @@ -31,4 +35,31 @@ a:hover { color: #3385FF; cursor: pointer; } .insBtn:hover { cursor: pointer; color: #3385FF; } .editBtn:hover { cursor: pointer; } .delBtn:hover { cursor: pointer; } .tips { width: 120px; height: 18px; background-color: #ffffff; position: absolute; display: none; border-radius: 5px; } .tips span { line-height: 18px; font-size: 10px; } public/map/widgets/securityMap/SecurityMap.js
@@ -142,6 +142,9 @@ //当前处警员是否已有电子围栏 isEngineer: false, //是否可编辑 isEdit: false, // 用来记录巡逻区域或者巡逻路线的下标的 patrolIndex: 0, @@ -151,6 +154,9 @@ y: 0, offset: null, moveThis: null, //编辑工具激活后为true editToolbarStatus: false, //基础路径 //pathUrl: "http://localhost:89", @@ -196,7 +202,13 @@ var that = this; //删除电子围栏点击事件 $(".mapBtn .delete").click(function() { $(".mapBtn .delBtn").click(function() { if (!that.isEngineer) { layui.use('layer', function() { layui.layer.msg('请先新增电子围栏信息!') }) return; } //需选中电子围栏,然后进行删除 layer.confirm('是否确认删除', { btn: ['确定', '取消'], //按钮 @@ -225,17 +237,39 @@ }) //新增电子围栏 $('.mapBtn .insert').click(function() { $('.mapBtn .insBtn').click(function() { //修改按钮样式 $("#insertEngineeringMap").css("color", "#3385FF") //判断 if (that.isEngineer) { layui.use('layer', function() { layui.layer.msg('已存在电子围栏'); }) layui.layer.msg('已存在电子围栏'); }) //新增按钮颜色改回 $("#insertEngineeringMap").css("color", "#757575"); } else { layui.use('layer', function() { layui.layer.msg('请开始划分电子围栏'); }) that.polygonFlag = true; } }) //编辑电子围栏 $('.mapBtn .editBtn').click(function() { if (!that.isEngineer) { layui.use('layer', function() { layui.layer.msg('请先新增电子围栏信息!') }) return; } $("#editEngineeringMap").css("color", "#3385FF"); //修改为可编辑状态 that.isEdit = true; layui.use('layer', function() { layui.layer.msg('点击电子围栏图形即可编辑'); }) }) }, @@ -307,13 +341,9 @@ //鼠标右击事件 document.getElementById('mainMapWidget').onmousedown = function(event) { //去除系统默认右键功能 event.preventDefault(); if (event.button == 2) { if (that.polygonData.length < 2) { layui.use('layer', function() { layui.layer.msg('不能形成区域,请继续划分!!!') }) return; } if (that.polygonFlag == true) { // 勾画最后一个点 var normalizedVal = webMercatorUtils.xyToLngLat(event.mapPoint.x, event.mapPoint.y); @@ -350,8 +380,12 @@ success: function(result) { if (result.code == 200) { layui.use('layer', function() { layui.layer.msg('新增电子围栏成功!') }) layui.layer.msg('新增电子围栏成功!') }) //清除点信息 that.polygonData = []; //新增按钮颜色改回 $("#insertEngineeringMap").css("color", "#757575"); } } }) @@ -404,58 +438,75 @@ that.isChecked = true; self.modifyPolygon(); //self.modifyPolygon(); self.activateToolbar(evt.graphic); //进入编辑状态 //self.activateToolbar(evt.graphic); } else { // 点击不在图形上 //修改电子围栏选中状态 that.isChecked = false; self.modifyPolygon() } if (that.isEdit) { that.isChecked = true; self.modifyPolygon(); //进入编辑状态 self.activateToolbar(evt.graphic); } } } // 提示信息 $(document).off('mousemove').mousemove(function(e) { var y = e.clientY + 10; var x = e.clientX + 20; if (e.clientX < 40) { var x = 40; } if (e.clientY < 42) { y = 42; } if (e.clientY > ($(window).height() - 82)) { y = ($(window).height() - 66); } if (e.clientX > ($(window).width() - 184)) { x = ($(window).width() - 184); } $(document).off('mousemove').mousemove(function(ev) { var oEvent = ev || event; //鼠标移动 var oDiv1 = document.getElementById('securityMapTips1'); var oDiv2 = document.getElementById('securityMapTips2'); var oDiv3 = document.getElementById('securityMapTips3'); var oDiv4 = document.getElementById('securityMapTips4'); //新增电子围栏提示语 if (self.polygonFlag == true) { $('.securityMapTips').stop().show(); var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; if (self.polygonData.length == 0) { $('.securityMapTips').text('单击左键开始绘制。'); } else { if (e.clientY > ($(window).height() - 98)) { y = ($(window).height() - 88); } $('.securityMapTips').text('单击左键新增加点。单击右键完成绘制。'); oDiv1.style.left = oEvent.clientX + scrollLeft + 15 + 'px'; oDiv1.style.top = oEvent.clientY + scrollTop + 'px'; oDiv1.style.display = 'block'; } $('.securityMapTips').css({ 'top': y, 'left': x, }) if (self.polygonData.length == 1) { oDiv1.style.display = 'none'; oDiv2.style.left = oEvent.clientX + scrollLeft + 15 + 'px'; oDiv2.style.top = oEvent.clientY + scrollTop + 'px'; oDiv2.style.display = 'block'; } if (self.polygonData.length > 1) { oDiv2.style.display = 'none'; oDiv3.style.left = oEvent.clientX + scrollLeft + 15 + 'px'; oDiv3.style.top = oEvent.clientY + scrollTop + 'px'; oDiv3.style.display = 'block'; } } else { $('.securityMapTips').stop().hide(); oDiv3.style.display = 'none'; } //编辑电子围栏提示语 if (that.editToolbarStatus) { $("#securityMapTips4").css("width", "200px"); $("#securityMapTips4").css("height", "36"); var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; oDiv4.style.left = oEvent.clientX + scrollLeft + 15 + 'px'; oDiv4.style.top = oEvent.clientY + scrollTop + 'px'; oDiv4.style.display = 'block'; } else { oDiv4.style.display = 'none'; } }) }, @@ -510,18 +561,29 @@ routeInfo: dataStr }, success: function(result) { if (result.code == 200) {} if (result.code == 200) { layui.use('layer', function() { layui.layer.msg('电子围栏修改成功!'); }) $("#editEngineeringMap").css("color", "#757575"); $("#securityMapTips4").css("display", "none"); self.isEdit = false; self.editToolbarStatus = false; } } }) } }, activateToolbar: function(graphic) { var that = this; that.editToolbarStatus = true; var tool = 0; this.editToolbar = new Edit(this._map); // if (registry.byId("tool_move").checked) { tool = tool | Edit.MOVE; @@ -566,7 +628,11 @@ //在地图上新增点 addPoint: function(entitys, lgtd, lttd, img) { var symbol = new esri.symbol.PictureMarkerSymbol(img, 22, 22); if (img == undefined) { var symbol = new esri.symbol.PictureMarkerSymbol('./images/point.png', 22, 22); } else { var symbol = new esri.symbol.PictureMarkerSymbol(img, 22, 22); } var pt = new Point(lgtd, lttd, new SpatialReference({ wkid: 4326 })); @@ -574,6 +640,7 @@ entitys.add(graphic); }, //绘制多边形 addPolygon: function(entitys, rings) { entitys.clear(); public/map/widgets/securityMap/template.html
@@ -2,15 +2,29 @@ <div class="mapBtn"> <div class="insBtn"> <img src="./images/add-0.png" style="width:14px;height:14px;"> <a class=" insert " id="insertEngineeringMap ">新增 | </a> <a class=" insert " id="insertEngineeringMap">新增 | </a> </div> <div class="editBtn"> <img src="./images/edit.png" style="width:14px;height:14px;"> <a class=" edit " id="editEngineeringMap">编辑 | </a> </div> <div class="delBtn"> <img src="./images/del.png" style="width:14px;height:14px;"> <a class="delete " id="securityMapClearMap ">删除</a> <a class="delete " id="securityMapClearMap">删除</a> </div> </div> <!-- 提示语 --> <div class="securityMapTips"> <div id="securityMapTips1" class="tips"> <span>左键点击开始绘制</span> </div> <div id="securityMapTips2" class="tips"> <span>左键以继续绘制</span> </div> <div id="securityMapTips3" class="tips"> <span>右键点击完成绘制</span> </div> <div id="securityMapTips4" class="tips"> <span>拖动点或线来改变电子围栏区域,点击围栏区域外地图任意点完成修改</span> </div> </div> src/views/policeTracking/policeTracking.vue
@@ -186,7 +186,9 @@ <i class="el-icon-document avue-group__icon"></i> <h1 class="avue-group__title">人员信息</h1> <el-button @click="onSubmit('通知' + ensureNames, 1), (flag = false)" @click=" onSubmit('通知' + ensureNames, 1, ensureId), (flag = false) " size="small" style="position: absolute; right: 0" :disabled="!flag" @@ -584,6 +586,7 @@ tableData: [], multipleSelection: [], ensureNames: "", ensureId: "", baseUrl: "", oldVideoSatart: false, vaddress: null, @@ -729,23 +732,27 @@ currenS, }; }, onSubmit(zc, jtype) { onSubmit(zc, jtype, ensureId) { var that = this; var subData = { jid: this.form.id, jtype: jtype, rid: this.form.alarmId, bz: this.form.bz, snumber: this.form.alarmId, sname: this.form.alarmPeople, zc: zc, zctime: this.getDate().current, }; if (ensureId && ensureId != "") { subData.securityArr = ensureId; } axios .post( "/api/blade-jfpts/alarm/alarm/updateJtype", {}, { params: { jid: this.form.id, jtype: jtype, rid: this.form.alarmId, bz: this.form.bz, snumber: this.form.alarmId, sname: this.form.alarmPeople, zc: zc, zctime: this.getDate().current, }, params: subData, } ) .then(function (res) { @@ -813,8 +820,12 @@ }, handleSelectionChange(val) { console.log(val, 9898); this.ensureNames = ""; this.ensureId = ""; val.forEach((item, index) => { this.ensureId += item.id; this.ensureId += ","; if (index == val.length - 1) { this.ensureNames += item.name; this.ensureNames += "。"; src/views/supervisoryConsole/data.vue
@@ -78,7 +78,7 @@ class="info-content-table" :data="tableData" stripe style="width: 100%; margin: 10px" style="width: 100%; margin: 0 10px" max-height="380px" :resizable="false" > vue.config.js
@@ -7,42 +7,44 @@ * @LastEditTime: 2021-01-29 15:58:39 */ module.exports = { //路径前缀 publicPath: "./", lintOnSave: true, productionSourceMap: false, chainWebpack: (config) => { //忽略的打包文件 config.externals({ 'vue': 'Vue', 'vue-router': 'VueRouter', 'vuex': 'Vuex', 'axios': 'axios', 'element-ui': 'ELEMENT', }); const entry = config.entry('app'); entry.add('babel-polyfill').end(); entry.add('classlist-polyfill').end(); entry.add('@/mock').end(); }, css: { extract: { ignoreOrder: true } }, //开发模式反向代理配置,生产模式请使用Nginx部署并配置反向代理 devServer: { port: 1888, proxy: { '/api': { //本地服务接口地址 // target: 'http://localhost:82/', target: 'https://web.byisf.com/api/', //远程演示服务地址,可用于直接启动项目 //target: 'https://saber.bladex.vip/api', ws: true, pathRewrite: { '^/api': '/' } } } //路径前缀 publicPath: "./", lintOnSave: true, productionSourceMap: false, chainWebpack: (config) => { //忽略的打包文件 config.externals({ 'vue': 'Vue', 'vue-router': 'VueRouter', 'vuex': 'Vuex', 'axios': 'axios', 'element-ui': 'ELEMENT', }); const entry = config.entry('app'); entry.add('babel-polyfill').end(); entry.add('classlist-polyfill').end(); entry.add('@/mock').end(); }, css: { extract: { ignoreOrder: true } }, //开发模式反向代理配置,生产模式请使用Nginx部署并配置反向代理 devServer: { port: 1888, proxy: { '/api': { //本地服务接口地址 // target: 'http://192.168.0.109:82/', target: 'https://web.byisf.com/api/', //远程演示服务地址,可用于直接启动项目 //target: 'https://saber.bladex.vip/api', ws: true, pathRewrite: { '^/api': '/' } } } } };