南昌市物联网技防平台-前端
liuyg
2021-04-24 886ae93d02bf5350a67c84a7701f13f517801506
Merge branch 'master' of http://192.168.0.105:10010/r/jfpt-Vue
6 files modified
2 files added
335 ■■■■■ changed files
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 35 ●●●●● patch | view | raw | blame | history
public/map/widgets/securityMap/SecurityMap.js 167 ●●●● patch | view | raw | blame | history
public/map/widgets/securityMap/template.html 20 ●●●● patch | view | raw | blame | history
src/views/policeTracking/policeTracking.vue 35 ●●●●● patch | view | raw | blame | history
src/views/supervisoryConsole/data.vue 2 ●●● patch | view | raw | blame | history
vue.config.js 76 ●●●● 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 ">新增&nbsp;|&nbsp;</a>
            <a class=" insert " id="insertEngineeringMap">新增&nbsp;|&nbsp;</a>
        </div>
        <div class="editBtn">
            <img src="./images/edit.png" style="width:14px;height:14px;">
            <a class=" edit " id="editEngineeringMap">编辑&nbsp;|&nbsp;</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': '/'
        }
      }
    }
  }
};