jfpt-Vue.git - Gitblit

parent: e28cf8c0 | patch | commit | ignore whitespace

Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/jfpt-Vue

shuishen

2021-04-20 4bf7ec9446e7dce8198a122740d73e498ec221a6

Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/jfpt-Vue

11 files modified

2 files added

	public/map/lib/layui/css/modules/layer/myskin/FlareClusterLayer.css	19 ●●●●● patch \| view \| raw \| blame \| history
	public/map/popup/html/FlareClusterLayer_v3 copy.html	318 ●●●●● patch \| view \| raw \| blame \| history
	public/map/popup/html/FlareClusterLayer_v3.html	88 ●●●●● patch \| view \| raw \| blame \| history
	public/map/widgets/securityMap/SecurityMap.js	425 ●●●●● patch \| view \| raw \| blame \| history
	public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js	236 ●●●●● patch \| view \| raw \| blame \| history
	public/map/widgets/supervisoryMap/SupervisoryMap.js	125 ●●●●● patch \| view \| raw \| blame \| history
	src/api/client/client.js	10 ●●●●● patch \| view \| raw \| blame \| history
	src/components/liu-legend/Legend.vue	19 ●●●●● patch \| view \| raw \| blame \| history
	src/views/clientManagement/clientManagement.vue	85 ●●●●● patch \| view \| raw \| blame \| history
	src/views/realTimePolice/real.vue	287 ●●●●● patch \| view \| raw \| blame \| history
	src/views/security/security.vue	6 ●●●●● patch \| view \| raw \| blame \| history
	src/views/system/cs.vue	6 ●●●●● patch \| view \| raw \| blame \| history
	src/views/zc/zc.vue	4 ●●●●● patch \| view \| raw \| blame \| history

 public/map/lib/layui/css/modules/layer/myskin/FlareClusterLayer.css

New file
@@ -0,0 +1,19 @@
.flare {
    background: transparent;
    border-radius: 10px;
}

/* .flare .layui-layer-title {
    padding: 0 80px;
    text-align: center;
    background: rgb(63, 184, 33);
    border: none;
    color: #677788;
    font-size: 20px;
    border-radius: 10px 10px 0 0;
} */

.flare .layui-layer-content {
    background: rgb(255, 255, 255);
    border-radius: 5px 5px 5px 5px;
}

 public/map/popup/html/FlareClusterLayer_v3 copy.html

New file
@@ -0,0 +1,318 @@
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../style/FlareClusterLayer_v3.css">
    <script src='../../lib/jquery.js'></script>
    <script src='../js/FlareClusterLayer_v3.js'></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <!-- layui -->
    <link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
    <style>
        a:hover {
            color: white;
        }
body{
    width: 360px;
    height: 484px;
    overflow: hidden;
}
        #appliutwo {
            width: 330px;
            height: 484px;
            border-radius: 10px;
            margin: 16px 15px 16px 15px;
            
            /* border: springgreen solid 0.5px; */
        }

        .flare-liu-top {
            width: 330px;
            height: 90px;
            /* border: rgb(211, 154, 31) solid 0.5px; */
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            color: white;
            border-radius: 5px 5px 5px 5px;
        }

        .f-l-t-heard {
            width: 300px;
            height: 30px;
            font-size: 18px;
            font-family: PingFangSC-Regular;
        }

        .f-l-t-right {
            width: 300px;
            height: 28px;
            display: flex;
            align-items: center;
            color: white;
            justify-content: space-around;
        }

        .f-l-t-r-msg {
            width: 200px;
            height: 28px;
        }

        .f-l-t-r-but {
            width: 72.531px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            background: rgba(255, 255, 255, .2);
            color: white;
            /* border: wheat 1px solid; */
        }

        .f-l-t-r-but a {
            color: white;
            width: 48.52px;
            height: 16px;
        }

        .flare-liu-body {
            width: 330px;
            height: 361px;
            /* border: rgb(106, 20, 187) solid 0.5px; */

        }

        .r-b-top {
            height: 200px;
            display: flex;

            display: flex;
            flex-direction: column;
        }

        .r-b-t-main {
            display: flex;
            align-items: center;
            justify-content: space-between;

            padding: 10px 0 10px 0;
            margin-bottom: 5px;
        }

        .r-b-t-left {
            display: block;
            width: 27%;

        }

        .r-b-t-right {
            display: block;
            width: 70%;
            color: #5d5d5d;
            font-size: 12px;

        }

        .r-b-t-r-label {
            float: left;
            margin-right: 10px;
            padding: 0 10px 0 10px;
            border: 1px solid rgba(0, 0, 0, 0.5);
            border-radius: 5px;
        }

        .r-b-t-r-imgsl {

            float: left;
            padding: 0 3px 0 3px;
        }
    </style>
</head>

<body>
    <div id="appliutwo" class='police-details-box' class="layui-anim" data-anim="layui-anim-down">
        <!-- 从layui传值给iframe 的占位input -->
        <input type="text" id="sidIput" ref="sidIput" style="display:none">
        <div class="flare-liu-top">
            <div class="f-l-t-heard">{{name}}</div>
            <div class="f-l-t-right">
                <div class="f-l-t-r-msg"></div>
                <div class="f-l-t-r-but"> <a href="#">查看详情</a> </div>
            </div>
        </div>
        <div class="flare-liu-body">
            <!-- layui -->
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">基本信息</li>
                    <li>other</li>
                    <!-- <li>权限分配</li>
                    <li>商品管理</li>
                    <li>订单管理</li> -->
                </ul>
                <div class="layui-tab-content" style="height: 100px;">
                    <div class="layui-tab-item layui-show">
                        <div class="r-b-top">
                            <div class="r-b-t-main">
                                <span class="r-b-t-left">设备名称</span>
                                <span class="r-b-t-right">{{ name }}</span>
                            </div>
                            <div class="r-b-t-main">
                                <span class="r-b-t-left">设备联系人</span>
                                <span class="r-b-t-right">{{ contacts }}: {{ calls }}</span>
                            </div>
                            <!-- 设备标签待定 -->
                            <!-- <div class="r-b-t-main">
                                <span class="r-b-t-left">设备标签</span>
                                <span class="r-b-t-right">
                                    <div 
                                    class="r-b-t-r-label" 
                                    v-for="(value,index) in labels" 
                                    :key="index"
                                    >
                                         {{value}} 
                                    </div>
                                </span>
                            </div> -->
                            <!-- 图暂时没有 -->
                            <div class="r-b-t-main">
                                <span class="r-b-t-left" style="position: relative; top: -27px">部署图片</span>
                                <span class="r-b-t-right">
                                    <div class="r-b-t-r-imgsl" v-for="(value, index) in imgsl" :key="index">
                                        <el-image style="width: 68px; height: 68px" :src="value"
                                            :preview-src-list="imgsl" v-show="value != 'no'">
                                        </el-image>
                                        <div v-show="value == 'no'" style="
                      width: 68px;
                      height: 68px;
                      text-algin: center;
                      color: rgba(0, 0, 0, 0.5);
                    ">
                                            无图片
                                        </div>
                                    </div>
                                </span>
                            </div>
                            <div class="r-b-t-main">
                                <span class="r-b-t-left">部署时间</span>
                                <span class="r-b-t-right">{{ deploymentTime }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">

                    </div>
                    <!-- <div class="layui-tab-item">内容3</div>
                    <div class="layui-tab-item">内容4</div>
                    <div class="layui-tab-item">内容5</div> -->
                </div>
            </div>
        </div>
        <script src="../../lib/layui/layui.js" charset="utf-8"></script>
        <script>
            // var index = parent.layer.getFrameIndex(window.name);

        </script>
        <script>
            var me = new Vue({
                el: '#appliutwo',
                data: {
                    num: '',
                    name: '',
                    //详细信息data
                    ourData: '',
                    // names: '',
                    contacts: '',
                    calls: '',
                    imgsl: [],
                    deploymentTime: '',
                    oldtime: '',
                    newtime: ''
                },
                methods: {
                    getdatas(dat) {
                        this.name = dat.deviceName;
                        me.num = dat.deviceNumber;
                        this.evaluate = "空气质量";
                        this.machineCode = "无数据" && dat.deviceNumber;
                        this.smoke = "烟雾";
                        this.proportion = "电量";
                        this.ReportTime = "最近上报：" + dat.heartbeat;
                        this.contacts = "无数据" && dat.oneContacts;
                        this.calls = "无数据" && dat.onePhone;
                        this.labels = ["无数据"] && [dat.deviceType];
                        var imgD = ["no"];
                        this.imgsl = ["no"] && imgD;
                        this.deploymentTime = "无数据" && dat.stime;

                        var ct = document.getElementsByClassName('flare-liu-top')[0];
                        if (dat.onlineStatus == 1) {
                            ct.style.backgroundImage = 'linear-gradient(to right, #3DDEA8 , #1FBD9A';
                        } else {
                            ct.style.backgroundImage = 'linear-gradient(to right, #787878 , #5F5F5F';

                        }
                    }
                },
                mounted() {
                    this.oldtime = setTimeout(() => {//需要同步数据处理，input中value在mounted中没有直接传值
                        clearTimeout(this.oldtime);
                        this.ourData = JSON.parse(this.$refs.sidIput.value);//json对象转js对象
                        // console.log(this.ourData);
                        this.getdatas(this.ourData);
                    }, 20);

                    window.onload = () => {
                        layui.use('element', function () {
                            var $ = layui.jquery
                                , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

                            //触发事件
                            var active = {
                                // tabAdd: function () {
                                //     //新增一个Tab项
                                //     element.tabAdd('demo', {
                                //         title: '新选项' + (Math.random() * 1000 | 0) //用于演示
                                //         , content: '内容' + (Math.random() * 1000 | 0)
                                //         , id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                                //     })
                                // }
                                // , tabDelete: function (othis) {
                                //     //删除指定Tab项
                                //     element.tabDelete('demo', '44'); //删除：“商品管理”


                                //     othis.addClass('layui-btn-disabled');
                                // }
                                // ,
                                tabChange: function () {
                                    //切换到指定Tab项
                                    element.tabChange('demo', '22'); //切换到：用户管理
                                }
                            };

                            $('.site-demo-active').on('click', function () {
                                var othis = $(this), type = othis.data('type');
                                active[type] ? active[type].call(this, othis) : '';
                            });

                            //Hash地址的定位
                            var layid = location.hash.replace(/^#test=/, '');
                            element.tabChange('test', layid);

                            element.on('tab(test)', function (elem) {
                                location.hash = 'test=' + $(this).attr('lay-id');
                            });

                        });

                    }
                }
            })
        </script>
</body>

</html>

 public/map/popup/html/FlareClusterLayer_v3.html

@@ -12,19 +12,51 @@
    <!-- layui -->
    <link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
    <style>
        
        body {
            /* border: 1px solid rgb(48, 170, 48); */
        }

        #appliu {
            /* border: 1px solid #000; */
            border-radius: 5px 5px 5px 5px;
        }

        .names {
            width: 200px;
            height: 45px;
            color: #fff;
            border-radius: 5px 5px 5px 5px;
            line-height: 45px;
            padding-left: 8px;
            background-color: #fff;
            /* border: 1px solid rgb(223, 52, 52); */
            /* background-4356765795678953423465989-9=\][;'\.,/.,1i123ge: linear-gradient(to right, #FFC031, #F49055);
            background-image: linear-gradient(to right, #3DDEA8, #1FBD9A);
            background-image: linear-gradient(to right, #787878, #5F5F5F); */
        }

        .msgs {
            width: 200px;
            height: 30px;
            line-height: 30px;
            padding-left: 8px;
            /* border: 1px solid rgb(30, 160, 192); */
        }
    </style>
</head>

<body>
    <div id="appliu" class='police-details-box' class="layui-anim" data-anim="layui-anim-down">
        <div>{{name}}</div>
        <div>{{num}}</div>
        <div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div>
        <!-- 从layui传值给iframe 的占位#input1 -->
        <input type="text" id="input1" ref="sidIputoine" style="display:none">
        <!-- 从layui传值给iframe 的占位#input2
        <input type="text" id="input2" ref="ip2" style="display:none" v-model='ip2'> -->
        <div class="names">{{name}}</div>
        <div class="msgs">{{num}}</div>
        <script src="../../lib/layui/layui.js" charset="utf-8"></script>
        <script>
            // var index = parent.layer.getFrameIndex(window.name);
            

        </script>
        <script>
            var me = new Vue({
@@ -33,26 +65,46 @@
                    num: '',
                    name: ''
                },
                ourData: '',
                // ip2: '',
                // computed: {
                //     ip2s() {
                //         // var a = JSON.parse(this.$refs.ip2.value);
                //         var a = me.ip2;
                //         console.log(a, 'computed');
                //         return a;
                //     }
                // },
                methods: {
                    GetQueryString(useName) {
                        var reg = new RegExp("(^|&)" + useName + "=([^&]*)(&|$)", "i");
                        var r = window.location.search.substr(1).match(reg);
                        if (r != null) {
                            return decodeURI(r[2]);
                    getdatas(dat) {
                        me.name = dat.deviceName.length >= 13 ? dat.deviceName.substring(0, 13) + '···' : dat.deviceName;
                        this.num = "无数据" && dat.deviceNumber;
                        var ct = document.getElementsByClassName('names')[0];
                        if (dat.onlineStatus == 1) {
                            ct.style.backgroundImage = 'linear-gradient(to right, #3DDEA8 , #1FBD9A';
                        } else {
                            return null;
                            ct.style.backgroundImage = 'linear-gradient(to right, #787878 , #5F5F5F';

                        }
                    }
                },
                mounted() {
                    window.onload = () => {
                        // console.log(me);
                        // console.log(window.location.href)
                        me.num = me.GetQueryString("num");
                        me.name = me.GetQueryString("name");
                        // console.log(me.num,me.name);
                    }
                    this.oldtime = setTimeout(() => {//需要同步数据处理，input中value在mounted中没有直接传值
                        clearTimeout(this.oldtime);
                        this.ourData = JSON.parse(this.$refs.sidIputoine.value);//json对象转js对象
                        // console.log(this.ourData);
                        this.getdatas(this.ourData);
                    }, 20);

                    // window.onload = () => {

                    // }

                },
                watch: {
                    ip2s() {
                        console.log(this.ip2s)
                    }
                }
            })
        </script>

 public/map/widgets/securityMap/SecurityMap.js

@@ -131,6 +131,19 @@
        addEntitys: null,
        entitysData: [],


        // 用来存储区域名称
        globalRegionName: null,

        // 用来区域得最大最小经纬度
        currentDrawing: [],

        // 存储新增点，线，面，数据的地方
        polygonData: [],
        polygonFlag: false,
        editToolbar: null,
        addPolygonEntitys: null,

        // 巡逻区域或者巡逻路线的描述
        routeOrRegionDescribe: null,

@@ -143,12 +156,13 @@
        y: 0,
        offset: null,
        moveThis: null,

        // 电子围栏需要新增的Id
        newElectronicFenceId: null,

        // 新增路线时，派发人员，人员名称，以及人员id
        peopleRealName: null,
        pepleRealId: null,
        anumber: null,
        realname: null,

        //存放聚合实体
        clusterLayer: null,
@@ -164,6 +178,7 @@
            this.addPolygonEntitys = new GraphicsLayer({
                id: 'addPolygonEntitys'
            });

            // 添加所有图层的地方
            this.entityPolygonAll = new GraphicsLayer({
                id: 'entityPolygonAll'
@@ -171,17 +186,13 @@


            this._map.addLayer(this.addEntitys);


            this._map.addLayer(this.addPolygonEntitys);
            this._map.addLayer(this.entityPolygonAll);

        },

        startup: function() {

            objThis._map.addLayer(objThis._siteLayer);

        },

        //根据key 取value值
@@ -189,17 +200,313 @@
            return (document.location.search.match(new RegExp("(?:^\\?|&)" + key + "=(.*?)(?=&|$)")) || ['', null])[1];
        },

        //带有中文的解码
        getQueryString: function(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return decodeURI(r[2]);
            return null;
        },

        //页面打开后，获取参数数据
        open: function() {
            var that = this;
            var lgtd = that.getQueryStringByKey('jd');
            var lttd = that.getQueryStringByKey('wd');
            if (lgtd == null || lgtd == "") {
                return;
            }
            anumber = that.getQueryStringByKey('code');
            realname = that.getQueryString('name');
            //所在位置标记
            that.addPoint(that.addEntitys, lgtd, lttd, './images/security.png');
            //获取当前处警员的电子围栏信息
            $.ajax({
                //https://web.byisf.com/api/blade-jfpts/enclosure/enclosure/selectEnclosureDetail
                url: 'http://localhost:89/enclosure/enclosure/selectEnclosureDetail',
                type: 'GET',
                dataType: 'JSON',
                data: {
                    anumber: anumber
                },
                success: function(result) {
                    //如果已有电子围栏信息，展示出围栏区域，并且可以编辑
                    if (result.code == 200) {
                        if (JSON.stringify(result.data) != "{}") {
                            var entityArr = [];
                            var coordinate = result.data.coordinate.match(/\(([^)]*)\)/).toString();
                            var a = coordinate.indexOf("(");
                            var b = coordinate.indexOf(")");
                            coordinate = coordinate.substring(a + 1, b) + "";
                            if (coordinate && coordinate != '') {
                                coordinate = coordinate.split(',');
                                for (var i = 0; i < coordinate.length; i++) {
                                    entityArr.push([Number(coordinate[i].split(' ')[0]), Number(coordinate[i].split(' ')[1])]);
                                }
                            }
                            that.addPolygon(that.addPolygonEntitys, entityArr);
                        } else {
                            //如果无电子围栏信息，则提示请编辑电子围栏信息
                            //编辑好电子围栏信息后，将当前处警员的电子围栏信息保存到数据库
                            that.newElectronicFenceId = null;

                            layui.use('layer', function() {
                                layui.layer.msg('请开始划分电子围栏');
                            })
                            that.polygonFlag = true;
                            that.newElectronicFenceId = anumber;
                        }

                    }
                }
            })

            //调用点击事件
            that.clickHand();

            //鼠标右击事件
            document.getElementById('mainMapWidget').onmousedown = function(event) {
                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);
                        that.polygonData.push([normalizedVal[0], normalizedVal[1]]);
                        // 声明空字符串，存储数据
                        var dataStr = '';
                        var data = null;
                        if (that.patrolIndex == 1) {
                            that.addPolyline(that.addPolygonEntitys, that.polygonData);
                            // 获取数据
                            data = that.addPolygonEntitys.graphics[0].geometry.paths[0];
                        } else {
                            that.addPolygon(that.addPolygonEntitys, that.polygonData);
                            // 获取数据
                            data = that.addPolygonEntitys.graphics[0].geometry.rings[0];
                        }

                        // 组装数据
                        for (var i = 0; i < data.length; i++) {
                            dataStr += (data[i][0] + ' ' + data[i][1] + ',');
                        }
                        dataStr = dataStr.substring(0, dataStr.length - 1);

                        //将数据存入数据库
                        $.ajax({
                            //url: 'https://web.byisf.com/api/blade-jfpts/enclosure/enclosure/updatee',
                            url: 'http://localhost:89/enclosure/enclosure/insertes',
                            type: 'POST',
                            dataType: 'JSON',
                            data: {
                                aname: realname,
                                anumber: anumber,
                                routeInfo: dataStr
                            },
                            success: function(result) {
                                if (result.code == 200) {}
                            }
                        })
                    }
                    that.polygonFlag = false;

                }
            }
        },

        close: function() {
        // 鼠标点击事件
        clickHand: function() {

            var self = this;
            self._map.onClick = mapClick;

            function mapClick(evt) {
                debugger;
                var normalizedVal = webMercatorUtils.xyToLngLat(evt.mapPoint.x, evt.mapPoint.y);
                var y = self._map.toMap({
                    spatialReference: '4326',
                    type: "point",
                    x: evt.screenPoint.x,
                    y: evt.screenPoint.y,
                });


                // 编辑中的
                if (self.polygonFlag == true) {
                    if (self.polygonData.length == 0) {
                        self.polygonData.push([normalizedVal[0], normalizedVal[1]]);
                        self.addPoint(self.addPolygonEntitys, normalizedVal[0], normalizedVal[1]);
                    } else if (self.polygonData.length == 1) {
                        self.polygonData.push([normalizedVal[0], normalizedVal[1]]);
                        self.addPolyline(self.addPolygonEntitys, self.polygonData);
                        return;
                    } else if (self.polygonData.length > 1) {
                        self.polygonData.push([normalizedVal[0], normalizedVal[1]]);
                        self.addPolygon(self.addPolygonEntitys, self.polygonData);
                    }

                } else { // 不在编辑中
                    if (evt.graphic) { // 点击在图形上
                        // 保存当前点击得图形
                        // self.currentDrawing = evt.graphic;

                        self.modifyPolygon();

                        self.activateToolbar(evt.graphic);
                    } else { // 点击不在图形上

                        self.modifyPolygon()
                    }
                }

            }

            // 提示信息
            $(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);
                }

                if (self.tabIndex == 1 || self.tabIndex == 2) {

                    if (self.polygonFlag == true) {
                        $('.police-dispatching .tips').stop().show();

                        if (self.polygonData.length == 0) {
                            $('.police-dispatching .tips').text('单击左键开始绘制。');
                        } else {
                            if (e.clientY > ($(window).height() - 98)) {
                                y = ($(window).height() - 88);
                            }
                            $('.police-dispatching .tips').text('单击左键新增加点。单击右键完成绘制。');
                        }

                        $('.police-dispatching .tips').css({
                            'top': y,
                            'left': x,
                        })
                    } else {
                        $('.police-dispatching .tips').stop().hide();
                    }

                } else {
                    $('.police-dispatching .tips').stop().hide();
                }
            })
        },

        //新增线
        addPolyline: function(entitys, path) {
            entitys.clear();
            var polylineSymbol = new SimpleLineSymbol();
            polylineSymbol.color = [255, 0, 0, 1];
            polylineSymbol.width = 4;
            var polyline = new Polyline({
                "paths": [path],
                "spatialReference": {
                    "wkid": 4326
                }
            });

            entitys.add(new Graphic(polyline, polylineSymbol));
        },


        //编辑电子围栏（多边形）
        modifyPolygon: function() {
            var self = this;
            if (self.editToolbar != null) {
                //获取当前的多边形数据
                var polygon = self.editToolbar.getCurrentState();

                //释放编辑后
                self.editToolbar.deactivate();

                self.editToolbar = null;

                // 声明空字符串，存储数据
                var dataStr = '';

                // 获取数据
                var data = polygon.graphic.geometry.rings[0];

                // 组装数据
                for (var i = 0; i < data.length; i++) {
                    dataStr += (data[i][0] + ' ' + data[i][1] + ',');
                }
                dataStr = dataStr.substring(0, dataStr.length - 1);

                //更新电子围栏数据
                $.ajax({
                    //url: 'https://web.byisf.com/api/blade-jfpts/enclosure/enclosure/updatee',
                    url: 'http://localhost:89/enclosure/enclosure/updatee',
                    type: 'POST',
                    dataType: 'JSON',
                    data: {
                        anumber: anumber,
                        routeInfo: dataStr
                    },
                    success: function(result) {
                        if (result.code == 200) {}
                    }
                })

            }
        },


        activateToolbar: function(graphic) {
            var tool = 0;

            this.editToolbar = new Edit(this._map);

            // if (registry.byId("tool_move").checked) {
            tool = tool | Edit.MOVE;
            // }
            // if (registry.byId("tool_vertices").checked) {
            tool = tool | Edit.EDIT_VERTICES;
            // }
            // if (registry.byId("tool_scale").checked) {
            tool = tool | Edit.SCALE;
            // }
            // if (registry.byId("tool_rotate").checked) {
            tool = tool | Edit.ROTATE;
            // }
            // enable text editing if a graphic uses a text symbol
            // if ( graphic.symbol.declaredClass === "esri.symbol.TextSymbol" ) {
            tool = tool | Edit.EDIT_TEXT;
            // }

            var options = {
                allowAddVertices: true,
                allowDeleteVertices: true,
                uniformScaling: true
            };
            this.editToolbar.activate(tool, graphic, options);

        },

        close: function() {},

        // 获取当前时间，以及昨天现在的时间
        getTime: function getTime() {
            var timestamp = Date.parse(new Date());
@@ -246,13 +553,12 @@
            pt.entityData = item;
            var graphic = new esri.Graphic(pt, symbol);
            entitys.add(graphic);


            entityContent.push(item);
        },

        //在地图上新增点
        addPoint: function(entitys, lgtd, lttd, img) {
            var symbol = new esri.symbol.PictureMarkerSymbol(img, 33, 48);
            var symbol = new esri.symbol.PictureMarkerSymbol(img, 22, 22);
            var pt = new Point(lgtd, lttd, new SpatialReference({
                wkid: 4326
            }));
@@ -260,99 +566,20 @@
            entitys.add(graphic);
        },

        addPoints: function(entitys, lgtd, lttd, img) {
            var symbol = new esri.symbol.PictureMarkerSymbol(img, 33, 48);
            var pt = new Point(lgtd, lttd, new SpatialReference({
                wkid: 4326
            }));
            var graphic = new esri.Graphic(pt, symbol);
            entitys.add(graphic);
        },

        //聚合图层事件
        flareClusterLayer: function(datas) {

            console.log(1);

            var that = this;

            var preClustered = false;
            var displaySingleFlaresAtCount = 10;
            var areaDisplayMode = "";
            // var allData = JSON.parse(DATA);
            // DataManager.setData(allData);

            //init the layer, more options are available and explained in the cluster layer constructor
            that.clusterLayer = new FlareClusterLayer({
                id: "flare-cluster-layer",
                spatialReference: new esri.SpatialReference({
        //绘制多边形
        addPolygon: function(entitys, rings) {
            entitys.clear();
            var polygonSymbol = new SimpleFillSymbol();
            polygonSymbol.color = [24, 255, 243, 0.411];
            var polygon = new Polygon({
                "rings": [rings],
                "spatialReference": {
                    "wkid": 4326
                }),
                subTypeFlareProperty: "facilityType",
                singleFlareTooltipProperty: "name",
                displaySubTypeFlares: true,
                displaySingleFlaresAtCount: displaySingleFlaresAtCount,
                flareShowMode: "mouse",
                preClustered: preClustered,
                clusterRatio: 75,
                clusterAreaDisplay: areaDisplayMode,
                clusteringBegin: function(e) {
                    console.log(e, "clustering begin");
                },
                clusteringComplete: function() {
                    console.log("clustering complete");
                }
            });

            //set up a class breaks renderer to render different symbols based on the cluster count. Use the required clusterCount property to break on.
            var defaultSym = new PictureMarkerSymbol("./images/jingbaored.png", 33, 48).setOffset(0, 15);
            var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");
            var xlSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 32, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([200, 52, 59, 0.8]), 1), new dojo.Color([250, 65, 74, 0.8]));
            var lgSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 28, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([41, 163, 41, 0.8]), 1), new dojo.Color([51, 204, 51, 0.8]));
            var mdSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 24, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([82, 163, 204, 0.8]), 1), new dojo.Color([102, 204, 255, 0.8]));
            var smSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 52, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([230, 184, 92, 0.8]), 1), new dojo.Color([255, 204, 102, 0.8]));
            renderer.addBreak(0, 19, smSymbol);
            renderer.addBreak(20, 150, mdSymbol);
            renderer.addBreak(151, 1000, lgSymbol);
            renderer.addBreak(1001, Infinity, xlSymbol);

            that.clusterLayer.setRenderer(renderer); //use standard setRenderer.

            //set up a popup template
            var template = new PopupTemplate({
                title: "{name}",
                fieldInfos: [{
                        fieldName: "facilityType",
                        label: "Facility Type",
                        visible: true
                    },
                    {
                        fieldName: "postcode",
                        label: "Post Code",
                        visible: true
                    },
                    {
                        fieldName: "isOpen",
                        label: "Opening Hours",
                        visible: true
                    }
                ]
            });

            //clusterLayer.infoTemplate = template;
            that._map.infoWindow.titleInBody = false;

            that._map.addLayer(that.clusterLayer);

            //var data = DataManager.getData();
            that.clusterLayer.addData(datas);

        },
        clearLayer: function() {
            var that = this;
            that._map.removeLayer(that.clusterLayer);
            that.clusterLayer = null;
            entitys.add(new Graphic(polygon, polygonSymbol));
        }

    });
    return Widget;
});

 public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js

@@ -169,7 +169,7 @@
    },
    _mapClick: function (e) {//地图全局点击事件 标记不能点击
      // console.log('地图全局点击事件');
      

      if (!e.target) {
        return;
      }
@@ -189,62 +189,144 @@

    onClick: function (evt) { //标志以及聚合表示点击事件
      var eour = evt.graphic.attributes.clusterCount;
      if(eour == undefined){
        var dataO = evt
      if (eour == undefined) {
        var dataO = evt;
        var aa = evt.graphic.screenX;
        var bb = evt.graphic.screenX;
        var data = {
          nums : evt.graphic.attributes.deviceNumber,
          nams : evt.graphic.attributes.deviceName,
          nums: evt.graphic.attributes.deviceNumber,
          nams: evt.graphic.attributes.deviceName,
          type: evt.graphic.attributes.jtype,
        }
        console.log(dataO);
        
        var rightCard = (num,name,posi)=>{
          var that = this;
          var url = './popup/html/FlareClusterLayer_v3.html?num=' + num + '&name=' + name;
            layui.use('layer', function () {
                that.layuiLayer = layui.layer;
                // that.layuiLayer.config({
                //     extend: 'myskin/police-details.css'
                // });
                that.layuiLayer.close(that.layuiLayer.index);
                that.layuiLayer.open({
                    title: '',
                    type: 2,
                    shadeClose: true,
                    shade: false,
                    skin: 'demo-class',
                    id: 'onelyOne',
                    maxmin: false, //开启最大化最小化按钮
                    // area: ['500px', '400px'],
                    offset: posi,
                    skin: 'police-details',
                    content: [url,'no'],
                    resize: false,
                    closeBtn: 1,
                    success: function(layero, index){//成功后添加全局点击关闭
                      console.log(layero, index);
                      
                      // var a = window.onmousedown  = ()=>{
                      //   // parent[0].layer.close(index);
                      //   // begins();
                      // }
                      var d = document.onclick = ()=>{
                        parent[0].layer.close(index);
                        d = '';
                      }
                    },
                });
        // console.log(dataO);
        // console.log(aa - bb);

        var fCard = (posi) => {
          var that = this,
            url = './popup/html/FlareClusterLayer_v3.html',
            clickD = null,
            downs = null,
            moves = null,
            ups = null;
          layui.use('layer', function () {
            that.layuiLayer = layui.layer;
            that.layuiLayer.config({
              extend: 'myskin/FlareClusterLayer.css'
            });
            // layer.alert('layer 新皮肤');
            that.layuiLayer.close(that.layuiLayer.index);
            that.layuiLayer.open({
              title: '',
              type: 2,
              shadeClose: false,
              shade: false,
              skin: 'demo-class',
              id: 'onelyOne',
              maxmin: false, //开启最大化最小化按钮
              area: ['200px', '75px'],
              // area: 'auto',
              offset: posi,
              skin: 'flare',
              closeBtn: 0,//关闭按钮，可通过配置1和2来展示,0关闭
              content: [url, 'no'],
              resize: false,
              scrollbar: false,
              tipsMore: true, //允许多个tipe
              // content: num,
              success: function (layero, index) {//成功后添加全局点击关闭
                $("#layui-layer-iframe" + index).contents().find("#input1").val(JSON.stringify(evt.graphic.attributes));
                // console.log(layero, index);
                layero[0].style.position = 'absolute';
                downs = document.onmousedown = () => {
                  // console.log('down');//start
                  // downs = document.onmousedown = null;
                  var mx = window.event.clientX//鼠标初始位置
                    , my = window.event.clientY
                    , cx = this.offset[1].replace("px","")//初始位置
                    , cy = this.offset[0].replace("px","");
                  moves = document.onmousemove = () => {
                    // console.log('move');//move
                    // console.log(this.offset)
                    var ux = window.event.clientX//记录实时位置
                      , uy = window.event.clientY;
                    var endx = +cx + (ux - mx)// 初始位置+（鼠标初始位置-实时位置）
                      , endy = +cy + (uy - my);
                    layero[0].style.left = endx + 'px';
                    layero[0].style.top = endy + 'px';
                    // console.log(+cx, +cy,'初始位置');
                    // console.log(mx, my,'鼠标初始位置');
                    // console.log(ux, uy,'记录实时位置');
                    // console.log(ux, uy,'最后位置');
                    
                    ups = document.onmouseup = () => {
                      // console.log('up');//end
                      downs = document.onmousedown = null;
                      moves = document.onmousemove = null;
                      ups = document.onmouseup = null;
                    }
                  }
                }

                clickD = document.onclick = () => {
                  parent[0].layer.close(index);
                  parent[0].layer.close(+index + 1);
                  // parent[0].layer.closeAll();
                  // console.log(111111111111)
                  clickD = document.onclick = null;
                }

              },
              end: function () {//关闭事件

              }
            });
            that.layuiLayer.open({//第二个iframe
              title: '',
              type: 2,
              shadeClose: true,
              shade: false,
              skin: 'demo-class',
              id: 'onelyTwo',
              maxmin: false, //开启最大化最小化按钮
              area: ['360px', '484px'],
              // area: 'auto',
              offset: 'r',
              skin: 'flare',
              isOutAnim: false,
              closeBtn: 0,//关闭按钮，可通过配置1和2来展示,0关闭
              content: ['./popup/html/FlareClusterLayer_v3 copy.html'],
              resize: false,
              scrollbar: false,
              // tipsMore: true, //允许多个tipe
              // content: num,
              success: function (layero, index) {//成功后添加全局点击关闭
                // var z = document.onclick = ()=>{
                //   parent[0].layer.close(index);
                // //   // parent[0].layer.close(+index + 1);
                //   z = null;
                // }
                //尝试传值
                //js对象转json对象
                $("#layui-layer-iframe" + index).contents().find("input").val(JSON.stringify(evt.graphic.attributes));
              },
            })
          })
        }
        var offsetMy = [+evt.screenY - 370 + 'px',+evt.screenX - 370 + 'px'];
        rightCard  (data.nums,data.nams,offsetMy);
        var begins = ()=>{
          var offsetMy = [+evt.screenY - 370 + 'px',+evt.screenX - 370 + 'px'];
          rightCard  (data.nums,data.nams,offsetMy);
        var offsetMy = [+evt.screenY - 300 + 'px', +evt.screenX - 172.5 + 'px'];
        // var offsetMy = [+evt.graphic._shape.shape.y - 80 + 'px',+evt.graphic._shape.shape.x  + 'px'];
        fCard(offsetMy);
        var begins = (xy) => {
          var offsetMy = [xy.y + 'px', xy.x + 'px'];
          fCard(offsetMy);
        }
      }else {
        console.log(num,'zoom');
      } else {
        // var taxLotExtent = evt.graphic.geometry.getExtent(); 
        // this.map.setExtent(evt.graphic._extent)
        this.map.setZoom(this.map.getZoom() + 1)//地图中心缩放
        // this.map.setZoom(18);
        // console.log('111:', this.map.zoomToFullExtent(), '222:', evt, evt.graphic._extent, 'zoom');
      }
      console.log(evt)
      // console.log(evt)
      this._restoreInfoWindowSettings();

      if (evt.graphic.attributes.isCluster) {
@@ -444,7 +526,7 @@
      dojo.query("g.cluster-group:empty", this.getNode()).forEach(dojo.destroy);
    },

    

    _graphicDraw: function (e) {
      var g = e.graphic;
      if (g.attributes.isCluster) {
@@ -810,11 +892,11 @@
      //add a text element for the label to display the count and add to the group
      var shapeCenter = this._getShapeCenter(cluster.graphicShape);
      var textShape = groupShape.createText({
          x: shapeCenter.x,
          y: shapeCenter.y + (this.textSymbol.font.size / 2 - 2),
          text: cluster.clusterCount,
          align: 'middle'
        })
        x: shapeCenter.x,
        y: shapeCenter.y + (this.textSymbol.font.size / 2 - 2),
        text: cluster.clusterCount,
        align: 'middle'
      })
        .setFont({
          size: this.textSymbol.font.size,
          family: this.textSymbol.font.family,
@@ -938,10 +1020,10 @@
      //create a transparent circle that contains the boundary of the flares, this is to make sure the mouse events don't fire moving in between flares
      var conCircleRadius = (center.x - (bbox.x - radius - buffer)) + radius; //get the radius of the circle to contain everything
      var containerCircle = groupShape.createCircle({
          cx: center.x,
          cy: center.y,
          r: conCircleRadius
        })
        cx: center.x,
        cy: center.y,
        r: conCircleRadius
      })
        //.setStroke({ width: 1, color: "000" })
        .setFill(new Color([0, 0, 0, 0]));
      containerCircle.rawNode.setAttribute("class", "flare-object cluster-object");
@@ -1242,11 +1324,11 @@
      var textShapes = [];
      for (var i = 0, len = lines.length; i < len; i++) {
        var textShape = tooltipGroup.createText({
            x: xPos,
            y: yPos + (i * 10),
            text: lines[i],
            align: 'middle'
          })
          x: xPos,
          y: yPos + (i * 10),
          text: lines[i],
          align: 'middle'
        })
          .setFill("#000")
          .setFont({
            size: 8,
@@ -1260,12 +1342,12 @@
      var rectPadding = 2;
      var textBox = tooltipGroup.getBoundingBox();
      var rectShape = tooltipGroup.createRect({
          x: textBox.x - rectPadding,
          y: textBox.y - rectPadding,
          width: textBox.width + (rectPadding * 2),
          height: textBox.height + (rectPadding * 2),
          r: 0
        })
        x: textBox.x - rectPadding,
        y: textBox.y - rectPadding,
        width: textBox.width + (rectPadding * 2),
        height: textBox.height + (rectPadding * 2),
        r: 0
      })
        .setFill(new Color([255, 255, 255, 0.9]))
        .setStroke({
          color: "#000",
@@ -1401,11 +1483,11 @@
      //Have to add the flare text after the flare group animation otherwise Edge just reloads the page and dies for some reason?
      if (this.shape.flareText) {
        var flareText = this.shape.createText({
            x: this.shape.flareText.location.x,
            y: this.shape.flareText.location.y,
            text: this.shape.flareText.text,
            align: 'middle'
          })
          x: this.shape.flareText.location.x,
          y: this.shape.flareText.location.y,
          text: this.shape.flareText.text,
          align: 'middle'
        })
          .setFill(layer.textSymbol.color)
          .setFont({
            size: this.shape.flareText.textSize,

 public/map/widgets/supervisoryMap/SupervisoryMap.js

@@ -126,7 +126,7 @@
    layuiLayer: null,
    layuiLadate: null,
    tabIndex: 0,

    heatmapfeatureLayer: null,//liu热力图
    // 保留添加实体图层的变量
    addEntitys: null,
    entitysData: [],
@@ -190,7 +190,7 @@
    getQueryStringByKey: function (key) {
      return (document.location.search.match(new RegExp("(?:^\\?|&)" + key + "=(.*?)(?=&|$)")) || ['', null])[1];
    },

    entityData: [],
    open: function () {
      var that = this;
      $.ajax({
@@ -198,18 +198,101 @@
        type: 'get',
        dataType: 'JSON',
        success: function (res) {
         

          var datas = res.data;


          var heatmapRenderer = null;
          that.entityData = [];



          for (var i = 0; i < datas.length; i++) {
            datas[i].x = Number(datas[i].jd);
            datas[i].y = Number(datas[i].wd);
            // that.entityData[i].lgtd = Number(datas[i].jd);
            // that.entityData[i].lttd = Number(datas[i].wd);
            that.entityData.push({
              lgtd: Number(datas[i].jd),
              lttd: Number(datas[i].wd)
            })
          }
          // console.log(that.entityData, 444444444444444444444)
          // console.log(datas,444444444444444444444)
          that.flareClusterLayer(datas);

          that.heatmapfeatureLayer = that.heatmFeaLayers();

          // console.log(that.heatmapfeatureLayer);
          
          that._map.addLayer(that.heatmapfeatureLayer);
          
          that.checkBoxSelect();
          
          // console.log(that.heatmapfeatureLayer);
        }
      })

    },
    heatmFeaLayers: function () {// liu 热力图渲染器，加载热力图

      var layerDefinition = {
        "geometryType": "esriGeometryPoint",
        "fields": [{
          "num": "num",
          editable: true,
          nullable: true,
          "type": "esriFieldTypeInteger",
          "alias": "数量"
        }]
      };
      var featureCollection = {
        layerDefinition: layerDefinition,
        featureSet: null
      };
      //创建 FeatureLayer 图层
      var featureLayer = new esri.layers.FeatureLayer(featureCollection, {
        mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
        outFields: ["*"],
        opacity: .8
      });
      //设置渲染方式

      return featureLayer;
    },

    checkBoxSelect: function (self) {
      var that = this;
      var heatmapRenderer = null;
      // // return
      // 选中
      // if ($(self).prop('checked') == true) {
      // if (1) {
        heatmapRenderer = new HeatmapRenderer({
          colorStops: [
            { ratio: 0.45, color: "rgba(000,000,255,0)" },
            { ratio: 0.55, color: "rgb(000,255,255)" },
            { ratio: 0.65, color: "rgb(000,255,000)" },
            { ratio: 0.75, color: "rgb(234,126,15)" },
            { ratio: 1.00, color: "rgb(255,000,000)" },
          ],
          blurRadius: 42,
          maxPixelIntensity: 184,
          minPixelIntensity: 0
        });
        this.heatmapfeatureLayer.setRenderer(heatmapRenderer);
        // 取消选中
        var point = null;
        for (var i = 0; i < that.entityData.length; i++) {
          point = new esri.geometry.Point(this.entityData[i].lgtd, this.entityData[i].lttd, new esri.SpatialReference({ wkid: 4326 }));
          this.heatmapfeatureLayer.add(new esri.Graphic(point));
        }
      // } else {
      //   this.heatmapfeatureLayer.clear();
      //   this.heatmapfeatureLayer.setRenderer();
      // }
    },

    close: function () {

    },
@@ -284,14 +367,16 @@

    clickHand: function (e) {//top点击事件，导航
      console.log(e);
    }, 
    },
    
    
    //聚合图层事件
    flareClusterLayer: function (datas) {  //top聚合事件，导航

      var that = this;

      var preClustered = false;
      var displaySingleFlaresAtCount = 10;
      var displaySingleFlaresAtCount = 20;
      var areaDisplayMode = "";
      // var allData = JSON.parse(DATA);
      // DataManager.setData(allData);
@@ -308,7 +393,7 @@
        displaySingleFlaresAtCount: displaySingleFlaresAtCount,
        flareShowMode: "mouse",
        preClustered: preClustered,
        clusterRatio: 75,
        clusterRatio: 120,
        clusterAreaDisplay: areaDisplayMode,
        clusteringBegin: function (e) {
          console.log(e, "clustering begin");
@@ -336,20 +421,20 @@
      var template = new PopupTemplate({
        title: "{name}",
        fieldInfos: [{
            fieldName: "facilityType",
            label: "Facility Type",
            visible: true
          },
          {
            fieldName: "postcode",
            label: "Post Code",
            visible: true
          },
          {
            fieldName: "isOpen",
            label: "Opening Hours",
            visible: true
          }
          fieldName: "facilityType",
          label: "Facility Type",
          visible: true
        },
        {
          fieldName: "postcode",
          label: "Post Code",
          visible: true
        },
        {
          fieldName: "isOpen",
          label: "Opening Hours",
          visible: true
        }
        ]
      });


 src/api/client/client.js

@@ -87,3 +87,13 @@
  })
}

export const getBaTree = (id) => {
  return request({
    url: '/api/blade-user/pages',
    method: 'get',
    params: {
      id,
    }
  })
}


 src/components/liu-legend/Legend.vue

@@ -16,11 +16,11 @@
        return{
            datalist:[//示例数据格式
                {
                    color: 'rgb(233, 39, 25)',
                    color: 'rgb(236, 83, 37)',
                    text: '掉线'
                },
                {
                    color: 'black',
                    color: 'rgb(49, 49, 49)',
                    text: '在线'
                }
            ]
@@ -34,21 +34,22 @@
    position: absolute;
    right: 0;
    .l-l-o{
        color: rgba($color: #000000, $alpha: .5);
        color: rgba($color: #000000, $alpha: .8);
        color: rgb(49, 49, 49);
        position: relative;
        right: 150px;
        margin-left: 10px;
        font-size: 12px;
        font-weight: 300;
        font-size: 14px;
        font-weight: 500;
        font-family: 'Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol';
    }
    .l-l-Img{
        display: inline-block;
        width: 7px;
        height: 7px;
        width: 10px;
        height: 10px;
        // border: 1px solid rgb(17, 198, 253);
        border-radius: 7px;
        margin-right: 7px;
        border-radius: 3px;
        margin-right: 8px;
    }
}
</style>

 src/views/clientManagement/clientManagement.vue

@@ -193,10 +193,11 @@
</template>

<script>
  import {getList, remove, update, add, getclient, getDeptLazyTree, getAll, updates} from "@/api/client/client";
  import {getList, remove, update, add, getclient, getDeptLazyTree, getAll, updates,getBaTree} from "@/api/client/client";
  import {mapGetters} from "vuex";
  import axios from "axios";
  import Legend from '../../components/liu-legend/Legend'
  import AvueMap from "avue-plugin-map";

  export default {
    components:{
@@ -210,11 +211,11 @@
        //legend-liu数据
        datalistLIU:[
                {
                    color: 'rgb(233, 39, 25)',
                    color: 'rgb(236, 83, 37)',
                    text: '掉线'
                },
                {
                    color: 'black',
                    color: 'rgb(49, 49, 49)',
                    text: '在线'
                }
            ],
@@ -315,7 +316,6 @@
              label: "设备编号",
              prop: "deviceNumber",
              width: 130,
              editDisabled: true,
              rules: [
                {
                  required: false,
@@ -336,7 +336,7 @@
              rules: [
                {
                  required: false,
                  message: "请选择上级菜单",
                  message: "请选择使用方",
                  trigger: "click"
                }
              ]
@@ -403,25 +403,7 @@
              addDisplay: false,
              editDisplay: false
            },
            {
              label: "设备类型",
              prop: "deviceType",
              width: 100,
              search: true,
              searchSpan: 3,
              searchLabelWidth: 80,
              searchPlaceholder: "请选择",
              type: "select",
              props: {
                label: "dictValue",
                value: "dictValue"
              },
              dicUrl: "/api/blade-system/dict-biz/child-list?parentId=1357568691367661569",
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            },

            {
              label: "省份",
              prop: "province",
@@ -497,8 +479,32 @@
              viewDisplay: true,
            },
            {
              label: "地址",
              prop: "map",
              hide: true,
              span: 24,
              component: "AvueMap",
            },
            {
              label: "经度",
              hide: true,
              addDisplay: false,
              prop: "jd",
            },
            {
              label: "纬度",
              hide: true,
              addDisplay: false,
              prop: "wd",
            },
            {
              label: "负责人",
              prop: "oneContacts",
              prop: "oneId",
              type: "tree",
              dicUrl: "/api/blade-system/dept/Batrees",
              props: {
                label: "title"
              },
              width: 72,
              hide: true,
              addDisplay: true,
@@ -559,6 +565,31 @@
        },
        data: []
      };
    },
    watch: {
      "form.map": {
        // form是表单或者表格绑定的数据集，v-model='form'
        handler(val) {
          debugger
          if (val) {
            this.form.wd = val.latitude;
            this.form.jd = val.longitude;
            this.form.street = val.formattedAddress;
          }
        },
        immediate: true,
      },
      "form.oneId":{
        handler(val) {
          var that = this;
          getBaTree(val).then(res => {
            if (res) {
              that.form.onePhone = res.data.data.records[0].phone;
              that.form.oneContacts = res.data.data.records[0].name;
            }
          });
        },
      }
    },
    computed: {
      ...mapGetters(["permission"]),
@@ -834,9 +865,9 @@
        //console.log(document.body.clientHeight,event.clientY,cha)
        // 防止菜单太靠底，根据可视高度调整菜单出现位置
        if (cha < 150) {
          menu.style.top = event.clientY -120 - (70) + 'px'
          menu.style.top = event.clientY -120 - (100) + 'px'
        } else {
          menu.style.top = event.clientY -10 - (70) + 'px'
          menu.style.top = event.clientY -10 - (100) + 'px'
        }
        menu.style.left = event.clientX + 10 - (60) + 'px'
        document.addEventListener('click', this.foo); // 给整个document新增监听鼠标事件，点击任何位置执行foo方法

 src/views/realTimePolice/real.vue

@@ -1,9 +1,3 @@
/*
 * @Author: Morpheus
 * @Date: 2021-03-17 15:21:33
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-04-19 14:32:44
 */
<template>
  <basic-container>
    <avue-crud
@@ -40,7 +34,7 @@
          >删 除
        </el-button>
      </template>

 
      <template slot="menuLeft">
        <el-button
          v-bind:class="activeClass == 0 ? 'btn-color' : ''"
@@ -67,27 +61,23 @@
          >全部
        </el-button>
      </template>

 
      <template slot="menuLeft">
        <el-button
          type="warning"
          size="mini"
          plain
          icon="el-icon-download"
          @click="handleExport"
          >导出
        <el-button type="warning"
                    size="mini"
                    plain
                    icon="el-icon-download"
                    @click="handleExport">导出
        </el-button>
        <el-button
          type="warning"
          style="display: none"
          size="small"
          plain
          icon="el-icon-download"
          @click="handleExportStatis"
          >导出报表
        <el-button type="warning"
                    size="small"
                    plain
                    icon="el-icon-pie-chart"
                    @click="handleExportStatis">导出报表
        </el-button>
      </template>

 
 
      <template slot-scope="{ row }" slot="jtype">
        <el-tag
          >{{
@@ -102,7 +92,7 @@
          }}
        </el-tag>
      </template>

 
      <template slot-scope="{ type, size, row }" slot="menu">
        <el-button
          icon="el-icon-s-order"
@@ -143,7 +133,7 @@
        </el-button>
      </template>
    </avue-crud>

 
    <el-dialog
      class="real-dialog"
      title="警情核实"
@@ -171,7 +161,7 @@
          controls
        ></video>
      </el-dialog>

 
      <el-dialog
        class="ss-video-dialog"
        :modal="false"
@@ -193,7 +183,7 @@
          controls
        ></video>
      </el-dialog>

 
      <el-form
        :model="form"
        label-position="right"
@@ -329,7 +319,7 @@
            </el-form-item>
          </el-col>
        </el-row>

 
        <el-row>
          <el-col span="12">
            <el-form-item label="报警时间">
@@ -363,7 +353,7 @@
            </el-form-item>
          </el-col>
        </el-row>

 
        <el-row>
          <el-col span="12">
            <el-form-item label="备注">
@@ -371,7 +361,7 @@
            </el-form-item>
          </el-col>
        </el-row>

 
        <el-row :align="center">
          <el-col class="opt-btn">
            <el-form-item>
@@ -386,14 +376,14 @@
                @click.stop="updateJtyep(form, 1, '办结')"
                >办结
              </el-button>

 
              <img
                src="/img/police-num.png"
                style="margin-top: -20px; height: 80px; vertical-align: middle"
                alt=""
                @click.stop="updateJtyep(form, 1, '推送110')"
              />

 
              <el-button
                type="primary"
                @click.stop="updateJtyep(form, 1, '派送保安')"
@@ -404,7 +394,7 @@
        </el-row>
      </el-form>
    </el-dialog>

 
    <el-drawer title="电子地图" append-to-body="true" :visible.sync="showMap">
      <iframe
        id="mapDiv"
@@ -417,17 +407,17 @@
    </el-drawer>
  </basic-container>
</template>

 
<script>
import { getList, remove, update, add, getclient } from "@/api/real/real";
import { mapGetters } from "vuex";

 
import Hls from "hls.js";

 
import axios from "axios";

 
import Recorder from "js-audio-recorder";

 
export default {
  data() {
    return {
@@ -498,7 +488,7 @@
            type: "datetime",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            searchValue: [this.getStartTime(), this.getEndTime()],
            searchValue:[this.getStartTime(),this.getEndTime()],
            searchRange: true,
            searchSpan: 5,
            hide: true,
@@ -844,7 +834,7 @@
      let values = {
        ...params,
      };

 
      if (
        this.$route.query.waringType &&
        this.$route.query != undefined &&
@@ -886,7 +876,7 @@
            endTime: this.dateTime.day.endTime,
          };
        }

 
        if (
          this.$route.query.startTime != undefined &&
          this.$route.query.startTime != null &&
@@ -899,7 +889,7 @@
          };
        }
      }

 
      if (releaseTimeRange) {
        values = {
          ...params,
@@ -914,7 +904,7 @@
          ...this.query,
        };
      }

 
      if (this.$route.query.timeDesc) {
        values = {
          ...params,
@@ -922,7 +912,7 @@
          ...this.query,
        };
      }

 
      this.loading = true;
      getList(page.currentPage, page.pageSize, values).then((res) => {
        const data = res.data.data;
@@ -930,13 +920,13 @@
          item.waringType == "紧急求救" ? (item.waringType = "一键求助") : "";
        });
        this.page.total = data.total;

 
        data.records.sort((a, b) => {
          return a.jtype - b.jtype;
        });

 
        this.data = data.records;

 
        this.loading = false;
        this.selectionClear();
      });
@@ -945,7 +935,7 @@
      // 当前时间
      var timestamp = Date.parse(new Date());
      var serverDate = new Date(timestamp);

 
      // 本周周一的时间
      var mondayTime =
        timestamp - (serverDate.getDay() - 1) * 24 * 60 * 60 * 1000;
@@ -991,7 +981,7 @@
        currentData.getSeconds() < 10
          ? "0" + currentData.getSeconds()
          : currentData.getSeconds();

 
      return {
        day: {
          beginTime: currentY + "-" + currentM + "-" + currentD + " 00:00:00",
@@ -1132,6 +1122,18 @@
        };
      });
    },
    getStartTime(){
           if (this.$route.query.startTime != undefined && this.$route.query.startTime != null && this.$route.query.startTime != "" ) {
             return this.$route.query.startTime
           }
           return '';
      },
      getEndTime(){
           if (this.$route.query.endTime != undefined && this.$route.query.endTime != null && this.$route.query.endTime != "" ) {
             return this.$route.query.endTime
           }
           return '';
      },
    handleManage(row) {
      this.form = row;
      this.peopleList = [
@@ -1145,7 +1147,7 @@
    },
    updateJtyep(row, jtype, t) {
      var that = this;

 
      axios
        .post(
          "/api/blade-jfpts/alarm/alarm/updateJtype",
@@ -1165,7 +1167,7 @@
        )
        .then(function () {
          that.dialogTableVisible = false;

 
          axios({
            method: "post",
            url: `/api/blade-jfpts/rvideo/stop`,
@@ -1173,7 +1175,7 @@
              jid: row.id,
            },
          }).then((resdata) => {});

 
          that.onLoad(that.page, that.query);
          that.$router.push({
            path: "/policeTracking/track",
@@ -1183,54 +1185,54 @@
    },
    beginTimeOrEndTime(time) {
      var beginTime = new Date(time);

 
      var endTime = new Date(new Date(time).valueOf() - 1000 * 60 * 60 * 3);

 
      var beginY = beginTime.getFullYear();

 
      var beginM =
        beginTime.getMonth() + 1 < 10
          ? "0" + (beginTime.getMonth() + 1)
          : beginTime.getMonth() + 1;

 
      var beginD =
        beginTime.getDate() < 10
          ? "0" + beginTime.getDate()
          : beginTime.getDate();

 
      var beginH =
        beginTime.getHours() < 10
          ? "0" + beginTime.getHours()
          : beginTime.getHours();

 
      var beginm =
        beginTime.getMinutes() < 10
          ? "0" + beginTime.getMinutes()
          : beginTime.getMinutes();

 
      var begins =
        beginTime.getSeconds() < 10
          ? "0" + beginTime.getSeconds()
          : beginTime.getSeconds();

 
      var endY = endTime.getFullYear();

 
      var endM =
        endTime.getMonth() + 1 < 10
          ? "0" + (endTime.getMonth() + 1)
          : endTime.getMonth() + 1;

 
      var endD =
        endTime.getDate() < 10 ? "0" + endTime.getDate() : endTime.getDate();

 
      var endH =
        endTime.getHours() < 10 ? "0" + endTime.getHours() : endTime.getHours();

 
      var endm =
        endTime.getMinutes() < 10
          ? "0" + endTime.getMinutes()
          : endTime.getMinutes();

 
      var ends =
        endTime.getSeconds() < 10
          ? "0" + endTime.getSeconds()
@@ -1250,7 +1252,7 @@
          "Content-type": "application/x-www-form-urlencoded",
        },
      });

 
      //this.form.serialNumber
      newAxios
        .post(
@@ -1269,22 +1271,22 @@
            )
            .then((result) => {
              that.videoSource = result.data.data.m3u8;

 
              if (Hls.isSupported()) {
                var dom = document.getElementById("real_video_conversation");

 
                that.hls = new Hls();

 
                var m3u8Url = decodeURIComponent(that.videoSource);

 
                that.hls.loadSource(m3u8Url);

 
                that.hls.attachMedia(dom);

 
                that.hls.on(Hls.Events.MANIFEST_PARSED, function () {
                  dom.play();
                });

 
                that.hls.on(Hls.Events.ERROR, function (event, data) {
                  console.log(data, 4566824159, "视频播放有问题！！！");
                  if (data.fatal) {
@@ -1315,12 +1317,12 @@
    },
    closeRealVideoBox() {
      var dom = document.getElementById("real_video_conversation");

 
      if (dom.getAttribute("src") != "") {
        dom.pause();

 
        dom.setAttribute("src", "");

 
        this.hls.destroy();
      }
    },
@@ -1334,7 +1336,7 @@
      var dom = document.getElementById("real_old_video");
      dom.pause();
    },

 
    aKeyToCall() {
      this.isActive = true;
      var that = this;
@@ -1346,7 +1348,7 @@
          // compiling: false,(0.x版本中生效,1.x增加中)  // 是否边录边转换，默认是false
        });
      }

 
      // 一键呼叫相关函数
      that.recorder.start().then(
        () => {
@@ -1358,7 +1360,7 @@
        }
      );
    },

 
    // 序列号后期待修改
    aKeyStopCall() {
      this.isActive = false;
@@ -1369,14 +1371,14 @@
          "Content-Type": "application/json;",
        },
      });

 
      var wavAxios = axios.create({
        baseURL: "https://web.byisf.com",
        withCredentials: false,
      });

 
      var that = this;

 
      newCallAxios
        .post(
          `/api_control`,
@@ -1390,15 +1392,15 @@
        .then((result) => {
          var formData = new FormData();
          // that.recorder.downloadWAV("新文件");

 
          var blob = that.recorder.getPCMBlob(); //获取pcm格式音频数据
          //此处获取到blob对象后需要设置fileName满足当前项目上传需求，其它项目可直接传把blob作为file塞入formData
          var newbolb = new Blob([blob], { type: "audio/pcm" });
          var fileOfBlob = new File([newbolb], new Date().getTime() + ".pcm");
          formData.append("file", fileOfBlob);

 
          var wavBlob = that.recorder.getWAVBlob();

 
          var wavformData = new FormData();
          var wavform = new File([wavBlob], new Date().getTime() + ".wav");
          wavformData.append("file", wavform);
@@ -1409,7 +1411,7 @@
            wavformData.entries(),
            132
          );

 
          axios({
            method: "post",
            url: "/api/blade-jfpts/xlfeedback/xlfeedback/put-objecty",
@@ -1420,7 +1422,7 @@
          }).then((resdata) => {
            console.log(resdata);
          });

 
          newCallAxios
            .post(`/api_control`, blob, {
              params: {
@@ -1438,7 +1440,7 @@
            });
        });
    },

 
    peopleOrPhone(e) {
      this.peopleList.forEach((item) => {
        if (item.label == e) {
@@ -1459,139 +1461,104 @@
      this.$confirm("是否导出实时警情数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        type: "warning"
      }).then(() => {
        window.open(
          `/api/blade-jfpts/alarm/alarm/export-alarm?beginTime=${this.$route.query.startTime}&endTime=${this.$route.query.endTime}&waringType=${this.$route.query.waringType}&timeDesc=${this.$route.query.timeDesc}`
        );
        window.open(`/api/blade-jfpts/alarm/alarm/export-alarm?beginTime=${this.$route.query.startTime}&endTime=${this.$route.query.endTime}&waringType=${this.$route.query.waringType}&timeDesc=${this.$route.query.timeDesc}`);
      });
    },
    //数据报表导出
    handleExportStatis() {
      this.$confirm("是否导出实时警情数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let beginTime =
          this.$route.query.startTime == undefined
            ? ""
            : this.$route.query.startTime;
        let endTime =
          this.$route.query.endTime == undefined
            ? ""
            : this.$route.query.endTime;
        let waringType =
          this.$route.query.waringType == undefined
            ? ""
            : this.$route.query.waringType;
        let timeDesc =
          this.$route.query.timeDesc == undefined
            ? ""
            : this.$route.query.timeDesc;
        window.open(
          `http://localhost:8108/ureport/excel?_u=blade-alarm.statis.ureport.xml&beginTime=${beginTime}&endTime=${endTime}&waringType=${waringType}&timeDesc=${timeDesc}`
        );
      });
    },
    getStartTime() {
      if (
        this.$route.query.startTime != undefined &&
        this.$route.query.startTime != null &&
        this.$route.query.startTime != ""
      ) {
        return this.$route.query.startTime;
      handleExportStatis() {
        this.$confirm("是否导出实时警情数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          let beginTime = this.$route.query.startTime==undefined? '':this.$route.query.startTime;
          let endTime = this.$route.query.endTime==undefined? '':this.$route.query.endTime;
          let waringType = this.$route.query.waringType==undefined? '':this.$route.query.waringType;
          let timeDesc = this.$route.query.timeDesc==undefined? '':this.$route.query.timeDesc;
          window.open(`http://localhost:8108/ureport/preview?_u=blade-alarm.statis.ureport.xml&beginTime=${beginTime}&endTime=${endTime}&waringType=${waringType}&timeDesc=${timeDesc}`);
          //window.open(`http://localhost:8108/ureport/excel?_u=blade-alarm.statis.ureport.xml&beginTime=${beginTime}&endTime=${endTime}&waringType=${waringType}&timeDesc=${timeDesc}`);
        });
      }
      return "";
    },
    getEndTime() {
      if (
        this.$route.query.endTime != undefined &&
        this.$route.query.endTime != null &&
        this.$route.query.endTime != ""
      ) {
        return this.$route.query.endTime;
      }
      return "";
    },
  },
};
</script>

 
<style>
.el-card__body .waringTypeClass {
  width: 12%;
}

 
/*页面样式*/
.el-card__body .cityClass1 {
  width: 155px;
  padding-right: 0px !important;
}

 
.el-card__body .cityClass2 {
  width: 100px;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

 
.el-card__body .cityClass3 {
  width: 100px;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

 
/*新增窗体样式*/
.el-dialog .cityClass1 {
  width: 220px;
  padding-right: 0px !important;
}

 
.el-dialog .cityClass2 {
  width: 110px;
  padding-left: 5px !important;
  padding-right: 5px !important;
}

 
.el-dialog .cityClass3 {
  width: 110px;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

 
.cityClassParams .avue-form__group.avue-form__group--flex {
  display: flex;
  justify-content: space-between;
}

 
.cityClassParams .cityClassSelect {
  flex: 1;
  margin: 0 !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

 
.cityClassParams .cityClassSelect:nth-child(2) {
  margin: 0 10px !important;
}

 
.cityClassParams .cityClassSelect .el-form-item {
  margin-bottom: 0px !important;
}

 
.cityClassParams .cityClassSelect .el-form-item .el-input__inner {
  height: 28px !important;
  line-height: 28px !important;
}

 
.cityClass2 div label {
  display: none;
}

 
.cityClass3 div label {
  display: none;
}

 
.old-video-dialog {
  position: absolute !important;
  top: 0 !important;
@@ -1602,7 +1569,7 @@
  height: 100% !important;
  width: 476px !important;
}

 
.old-video-dialog .el-dialog {
  position: absolute !important;
  top: 0 !important;
@@ -1613,23 +1580,23 @@
  margin-top: 15vh !important;
  height: 538px;
}

 
.old-video-dialog .el-dialog .el-dialog__body {
  height: calc(100% - 54px);
  box-sizing: border-box;
}

 
.el-button.active {
  background: #ff0000 !important;
}

 
.el-button.btn-color {
  color: rgb(255, 255, 255);
  background-color: rgb(64, 158, 255);
  border-color: rgb(64, 158, 255);
}

 
.tabFontSize {
  font-size: 15px;
}
</style>
</style>

 src/views/security/security.vue

@@ -248,13 +248,11 @@
            });
          });
      },
      //打开地图
      handleMap(row) {
        
        var that =this;
        that.baseUrl = `/map/index.html?ISinit=1&openid=SecurityMap&jd=${row.jd}&wd=${row.wd}`;
        that.baseUrl = `/map/index.html?ISinit=1&openid=SecurityMap&jd=${row.jd}&wd=${row.wd}&code=${row.code}&name=${row.realName}`;
        this.showMap=true;
        console.log(this.$refs,111);
        console.log(this.$refs.securityMap,222);
        this.$refs.securityMap.onload = () => {
          if (window.frames[0].init) {
            window.frames[0].init("SecurityMap", {

 src/views/system/cs.vue

@@ -662,6 +662,7 @@
            );
          } else if (row.type == "1") {
            insertss(
              row.dj,
              row.nature,
              row.had,
              row.motto,
@@ -671,6 +672,7 @@
            );
          } else if (row.type == "2") {
            insertsr(
              row.dj,
              row.category,
              row.attributes,
              row.developers,
@@ -705,6 +707,7 @@
        );
      } else if (row.type == "1") {
        updateInfos(
          row.dj,
          row.nature,
          row.had,
          row.motto,
@@ -714,6 +717,7 @@
        );
      } else if (row.type == "2") {
        updateInfor(
          row.dj,
          row.category,
          row.attributes,
          row.developers,
@@ -770,6 +774,7 @@
            selectTs(this.form.tenantName).then((re) => {
              const data = res.data.data;
              data.nature = re.data.data[0].nature;
              data.dj = re.data.data[0].dj;
              data.motto = re.data.data[0].motto;
              data.ctime = re.data.data[0].ctime;
              data.had = re.data.data[0].had;
@@ -789,6 +794,7 @@
          } else if (this.form.type == "2") {
            selectTr(this.form.tenantName).then((re) => {
              const data = res.data.data;
              data.dj = re.data.data[0].dj;
              data.category = re.data.data[0].category;
              data.attributes = re.data.data[0].attributes;
              data.developers = re.data.data[0].developers;

 src/views/zc/zc.vue

@@ -167,10 +167,10 @@
      ...mapGetters(["permission"]),
      permissionList() {
        return {
         addBtn: this.vaildData(this.permission.zc_add, true),
         addBtn: this.vaildData(this.permission.zc_add, false),
          viewBtn: this.vaildData(this.permission.zc_view, true),
          delBtn: this.vaildData(this.permission.zc_delete, false),
          editBtn: this.vaildData(this.permission.zc_edit, true)
          editBtn: this.vaildData(this.permission.zc_edit, false)
        };
      },
      ids() {

New file
			@@ -0,0 +1,19 @@
			.flare {
			background: transparent;
			border-radius: 10px;
			}

			/* .flare .layui-layer-title {
			padding: 0 80px;
			text-align: center;
			background: rgb(63, 184, 33);
			border: none;
			color: #677788;
			font-size: 20px;
			border-radius: 10px 10px 0 0;
			} */

			.flare .layui-layer-content {
			background: rgb(255, 255, 255);
			border-radius: 5px 5px 5px 5px;
			}

New file
			@@ -0,0 +1,318 @@
			<!DOCTYPE html>
			<html lang="en">

			<head>
			<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width, initial-scale=1.0">
			<title>Document</title>
			<link rel="stylesheet" href="../style/FlareClusterLayer_v3.css">
			<script src='../../lib/jquery.js'></script>
			<script src='../js/FlareClusterLayer_v3.js'></script>
			<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
			<!-- layui -->
			<link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
			<style>
			a:hover {
			color: white;
			}
			body{
			width: 360px;
			height: 484px;
			overflow: hidden;
			}
			#appliutwo {
			width: 330px;
			height: 484px;
			border-radius: 10px;
			margin: 16px 15px 16px 15px;

			/* border: springgreen solid 0.5px; */
			}

			.flare-liu-top {
			width: 330px;
			height: 90px;
			/* border: rgb(211, 154, 31) solid 0.5px; */
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			color: white;
			border-radius: 5px 5px 5px 5px;
			}

			.f-l-t-heard {
			width: 300px;
			height: 30px;
			font-size: 18px;
			font-family: PingFangSC-Regular;
			}

			.f-l-t-right {
			width: 300px;
			height: 28px;
			display: flex;
			align-items: center;
			color: white;
			justify-content: space-around;
			}

			.f-l-t-r-msg {
			width: 200px;
			height: 28px;
			}

			.f-l-t-r-but {
			width: 72.531px;
			height: 28px;
			line-height: 28px;
			text-align: center;
			background: rgba(255, 255, 255, .2);
			color: white;
			/* border: wheat 1px solid; */
			}

			.f-l-t-r-but a {
			color: white;
			width: 48.52px;
			height: 16px;
			}

			.flare-liu-body {
			width: 330px;
			height: 361px;
			/* border: rgb(106, 20, 187) solid 0.5px; */

			}

			.r-b-top {
			height: 200px;
			display: flex;

			display: flex;
			flex-direction: column;
			}

			.r-b-t-main {
			display: flex;
			align-items: center;
			justify-content: space-between;

			padding: 10px 0 10px 0;
			margin-bottom: 5px;
			}

			.r-b-t-left {
			display: block;
			width: 27%;

			}

			.r-b-t-right {
			display: block;
			width: 70%;
			color: #5d5d5d;
			font-size: 12px;

			}

			.r-b-t-r-label {
			float: left;
			margin-right: 10px;
			padding: 0 10px 0 10px;
			border: 1px solid rgba(0, 0, 0, 0.5);
			border-radius: 5px;
			}

			.r-b-t-r-imgsl {

			float: left;
			padding: 0 3px 0 3px;
			}
			</style>
			</head>

			<body>
			<div id="appliutwo" class='police-details-box' class="layui-anim" data-anim="layui-anim-down">
			<!-- 从layui传值给iframe 的占位input -->
			<input type="text" id="sidIput" ref="sidIput" style="display:none">
			<div class="flare-liu-top">
			<div class="f-l-t-heard">{{name}}</div>
			<div class="f-l-t-right">
			<div class="f-l-t-r-msg"></div>
			<div class="f-l-t-r-but"> <a href="#">查看详情</a> </div>
			</div>
			</div>
			<div class="flare-liu-body">
			<!-- layui -->
			<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
			<ul class="layui-tab-title">
			<li class="layui-this">基本信息</li>
			<li>other</li>
			<!-- <li>权限分配</li>
			<li>商品管理</li>
			<li>订单管理</li> -->
			</ul>
			<div class="layui-tab-content" style="height: 100px;">
			<div class="layui-tab-item layui-show">
			<div class="r-b-top">
			<div class="r-b-t-main">
			<span class="r-b-t-left">设备名称</span>
			<span class="r-b-t-right">{{ name }}</span>
			</div>
			<div class="r-b-t-main">
			<span class="r-b-t-left">设备联系人</span>
			<span class="r-b-t-right">{{ contacts }}: {{ calls }}</span>
			</div>
			<!-- 设备标签待定 -->
			<!-- <div class="r-b-t-main">
			<span class="r-b-t-left">设备标签</span>
			<span class="r-b-t-right">
			<div
			class="r-b-t-r-label"
			v-for="(value,index) in labels"
			:key="index"
			>
			{{value}}
			</div>
			</span>
			</div> -->
			<!-- 图暂时没有 -->
			<div class="r-b-t-main">
			<span class="r-b-t-left" style="position: relative; top: -27px">部署图片</span>
			<span class="r-b-t-right">
			<div class="r-b-t-r-imgsl" v-for="(value, index) in imgsl" :key="index">
			<el-image style="width: 68px; height: 68px" :src="value"
			:preview-src-list="imgsl" v-show="value != 'no'">
			</el-image>
			<div v-show="value == 'no'" style="
			width: 68px;
			height: 68px;
			text-algin: center;
			color: rgba(0, 0, 0, 0.5);
			">
			无图片
			</div>
			</div>
			</span>
			</div>
			<div class="r-b-t-main">
			<span class="r-b-t-left">部署时间</span>
			<span class="r-b-t-right">{{ deploymentTime }}</span>
			</div>
			</div>
			</div>
			<div class="layui-tab-item">

			</div>
			<!-- <div class="layui-tab-item">内容3</div>
			<div class="layui-tab-item">内容4</div>
			<div class="layui-tab-item">内容5</div> -->
			</div>
			</div>
			</div>
			<script src="../../lib/layui/layui.js" charset="utf-8"></script>
			<script>
			// var index = parent.layer.getFrameIndex(window.name);

			</script>
			<script>
			var me = new Vue({
			el: '#appliutwo',
			data: {
			num: '',
			name: '',
			//详细信息data
			ourData: '',
			// names: '',
			contacts: '',
			calls: '',
			imgsl: [],
			deploymentTime: '',
			oldtime: '',
			newtime: ''
			},
			methods: {
			getdatas(dat) {
			this.name = dat.deviceName;
			me.num = dat.deviceNumber;
			this.evaluate = "空气质量";
			this.machineCode = "无数据" && dat.deviceNumber;
			this.smoke = "烟雾";
			this.proportion = "电量";
			this.ReportTime = "最近上报：" + dat.heartbeat;
			this.contacts = "无数据" && dat.oneContacts;
			this.calls = "无数据" && dat.onePhone;
			this.labels = ["无数据"] && [dat.deviceType];
			var imgD = ["no"];
			this.imgsl = ["no"] && imgD;
			this.deploymentTime = "无数据" && dat.stime;

			var ct = document.getElementsByClassName('flare-liu-top')[0];
			if (dat.onlineStatus == 1) {
			ct.style.backgroundImage = 'linear-gradient(to right, #3DDEA8 , #1FBD9A';
			} else {
			ct.style.backgroundImage = 'linear-gradient(to right, #787878 , #5F5F5F';

			}
			}
			},
			mounted() {
			this.oldtime = setTimeout(() => {//需要同步数据处理，input中value在mounted中没有直接传值
			clearTimeout(this.oldtime);
			this.ourData = JSON.parse(this.$refs.sidIput.value);//json对象转js对象
			// console.log(this.ourData);
			this.getdatas(this.ourData);
			}, 20);

			window.onload = () => {
			layui.use('element', function () {
			var $ = layui.jquery
			, element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

			//触发事件
			var active = {
			// tabAdd: function () {
			// //新增一个Tab项
			// element.tabAdd('demo', {
			// title: '新选项' + (Math.random() * 1000 \| 0) //用于演示
			// , content: '内容' + (Math.random() * 1000 \| 0)
			// , id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
			// })
			// }
			// , tabDelete: function (othis) {
			// //删除指定Tab项
			// element.tabDelete('demo', '44'); //删除：“商品管理”


			// othis.addClass('layui-btn-disabled');
			// }
			// ,
			tabChange: function () {
			//切换到指定Tab项
			element.tabChange('demo', '22'); //切换到：用户管理
			}
			};

			$('.site-demo-active').on('click', function () {
			var othis = $(this), type = othis.data('type');
			active[type] ? active[type].call(this, othis) : '';
			});

			//Hash地址的定位
			var layid = location.hash.replace(/^#test=/, '');
			element.tabChange('test', layid);

			element.on('tab(test)', function (elem) {
			location.hash = 'test=' + $(this).attr('lay-id');
			});

			});

			}
			}
			})
			</script>
			</body>

			</html>

			@@ -12,19 +12,51 @@
			<!-- layui -->
			<link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
			<style>

			body {
			/* border: 1px solid rgb(48, 170, 48); */
			}

			#appliu {
			/* border: 1px solid #000; */
			border-radius: 5px 5px 5px 5px;
			}

			.names {
			width: 200px;
			height: 45px;
			color: #fff;
			border-radius: 5px 5px 5px 5px;
			line-height: 45px;
			padding-left: 8px;
			background-color: #fff;
			/* border: 1px solid rgb(223, 52, 52); */
			/* background-4356765795678953423465989-9=\][;'\.,/.,1i123ge: linear-gradient(to right, #FFC031, #F49055);
			background-image: linear-gradient(to right, #3DDEA8, #1FBD9A);
			background-image: linear-gradient(to right, #787878, #5F5F5F); */
			}

			.msgs {
			width: 200px;
			height: 30px;
			line-height: 30px;
			padding-left: 8px;
			/* border: 1px solid rgb(30, 160, 192); */
			}
			</style>
			</head>

			<body>
			<div id="appliu" class='police-details-box' class="layui-anim" data-anim="layui-anim-down">
			<div>{{name}}</div>
			<div>{{num}}</div>
			<div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div>
			<!-- 从layui传值给iframe 的占位#input1 -->
			<input type="text" id="input1" ref="sidIputoine" style="display:none">
			<!-- 从layui传值给iframe 的占位#input2
			<input type="text" id="input2" ref="ip2" style="display:none" v-model='ip2'> -->
			<div class="names">{{name}}</div>
			<div class="msgs">{{num}}</div>
			<script src="../../lib/layui/layui.js" charset="utf-8"></script>
			<script>
			// var index = parent.layer.getFrameIndex(window.name);


			</script>
			<script>
			var me = new Vue({
			@@ -33,26 +65,46 @@
			num: '',
			name: ''
			},
			ourData: '',
			// ip2: '',
			// computed: {
			// ip2s() {
			// // var a = JSON.parse(this.$refs.ip2.value);
			// var a = me.ip2;
			// console.log(a, 'computed');
			// return a;
			// }
			// },
			methods: {
			GetQueryString(useName) {
			var reg = new RegExp("(^\|&)" + useName + "=([^&]*)(&\|$)", "i");
			var r = window.location.search.substr(1).match(reg);
			if (r != null) {
			return decodeURI(r[2]);
			getdatas(dat) {
			me.name = dat.deviceName.length >= 13 ? dat.deviceName.substring(0, 13) + '···' : dat.deviceName;
			this.num = "无数据" && dat.deviceNumber;
			var ct = document.getElementsByClassName('names')[0];
			if (dat.onlineStatus == 1) {
			ct.style.backgroundImage = 'linear-gradient(to right, #3DDEA8 , #1FBD9A';
			} else {
			return null;
			ct.style.backgroundImage = 'linear-gradient(to right, #787878 , #5F5F5F';

			}
			}
			},
			mounted() {
			window.onload = () => {
			// console.log(me);
			// console.log(window.location.href)
			me.num = me.GetQueryString("num");
			me.name = me.GetQueryString("name");
			// console.log(me.num,me.name);
			}
			this.oldtime = setTimeout(() => {//需要同步数据处理，input中value在mounted中没有直接传值
			clearTimeout(this.oldtime);
			this.ourData = JSON.parse(this.$refs.sidIputoine.value);//json对象转js对象
			// console.log(this.ourData);
			this.getdatas(this.ourData);
			}, 20);

			// window.onload = () => {

			// }

			},
			watch: {
			ip2s() {
			console.log(this.ip2s)
			}
			}
			})
			</script>

			@@ -131,6 +131,19 @@
			addEntitys: null,
			entitysData: [],


			// 用来存储区域名称
			globalRegionName: null,

			// 用来区域得最大最小经纬度
			currentDrawing: [],

			// 存储新增点，线，面，数据的地方
			polygonData: [],
			polygonFlag: false,
			editToolbar: null,
			addPolygonEntitys: null,

			// 巡逻区域或者巡逻路线的描述
			routeOrRegionDescribe: null,

			@@ -143,12 +156,13 @@
			y: 0,
			offset: null,
			moveThis: null,

			// 电子围栏需要新增的Id
			newElectronicFenceId: null,

			// 新增路线时，派发人员，人员名称，以及人员id
			peopleRealName: null,
			pepleRealId: null,
			anumber: null,
			realname: null,

			//存放聚合实体
			clusterLayer: null,
			@@ -164,6 +178,7 @@
			this.addPolygonEntitys = new GraphicsLayer({
			id: 'addPolygonEntitys'
			});

			// 添加所有图层的地方
			this.entityPolygonAll = new GraphicsLayer({
			id: 'entityPolygonAll'
			@@ -171,17 +186,13 @@


			this._map.addLayer(this.addEntitys);


			this._map.addLayer(this.addPolygonEntitys);
			this._map.addLayer(this.entityPolygonAll);

			},

			startup: function() {

			objThis._map.addLayer(objThis._siteLayer);

			},

			//根据key 取value值
			@@ -189,17 +200,313 @@
			return (document.location.search.match(new RegExp("(?:^\\?\|&)" + key + "=(.*?)(?=&\|$)")) \|\| ['', null])[1];
			},

			//带有中文的解码
			getQueryString: function(name) {
			var reg = new RegExp("(^\|&)" + name + "=([^&]*)(&\|$)", "i");
			var r = window.location.search.substr(1).match(reg);
			if (r != null) return decodeURI(r[2]);
			return null;
			},

			//页面打开后，获取参数数据
			open: function() {
			var that = this;
			var lgtd = that.getQueryStringByKey('jd');
			var lttd = that.getQueryStringByKey('wd');
			if (lgtd == null \|\| lgtd == "") {
			return;
			}
			anumber = that.getQueryStringByKey('code');
			realname = that.getQueryString('name');
			//所在位置标记
			that.addPoint(that.addEntitys, lgtd, lttd, './images/security.png');
			//获取当前处警员的电子围栏信息
			$.ajax({
			//https://web.byisf.com/api/blade-jfpts/enclosure/enclosure/selectEnclosureDetail
			url: 'http://localhost:89/enclosure/enclosure/selectEnclosureDetail',
			type: 'GET',
			dataType: 'JSON',
			data: {
			anumber: anumber
			},
			success: function(result) {
			//如果已有电子围栏信息，展示出围栏区域，并且可以编辑
			if (result.code == 200) {
			if (JSON.stringify(result.data) != "{}") {
			var entityArr = [];
			var coordinate = result.data.coordinate.match(/\(([^)]*)\)/).toString();
			var a = coordinate.indexOf("(");
			var b = coordinate.indexOf(")");
			coordinate = coordinate.substring(a + 1, b) + "";
			if (coordinate && coordinate != '') {
			coordinate = coordinate.split(',');
			for (var i = 0; i < coordinate.length; i++) {
			entityArr.push([Number(coordinate[i].split(' ')[0]), Number(coordinate[i].split(' ')[1])]);
			}
			}
			that.addPolygon(that.addPolygonEntitys, entityArr);
			} else {
			//如果无电子围栏信息，则提示请编辑电子围栏信息
			//编辑好电子围栏信息后，将当前处警员的电子围栏信息保存到数据库
			that.newElectronicFenceId = null;

			layui.use('layer', function() {
			layui.layer.msg('请开始划分电子围栏');
			})
			that.polygonFlag = true;
			that.newElectronicFenceId = anumber;
			}

			}
			}
			})

			//调用点击事件
			that.clickHand();

			//鼠标右击事件
			document.getElementById('mainMapWidget').onmousedown = function(event) {
			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);
			that.polygonData.push([normalizedVal[0], normalizedVal[1]]);
			// 声明空字符串，存储数据
			var dataStr = '';
			var data = null;
			if (that.patrolIndex == 1) {
			that.addPolyline(that.addPolygonEntitys, that.polygonData);
			// 获取数据
			data = that.addPolygonEntitys.graphics[0].geometry.paths[0];
			} else {
			that.addPolygon(that.addPolygonEntitys, that.polygonData);
			// 获取数据
			data = that.addPolygonEntitys.graphics[0].geometry.rings[0];
			}

			// 组装数据
			for (var i = 0; i < data.length; i++) {
			dataStr += (data[i][0] + ' ' + data[i][1] + ',');
			}
			dataStr = dataStr.substring(0, dataStr.length - 1);

			//将数据存入数据库
			$.ajax({
			//url: 'https://web.byisf.com/api/blade-jfpts/enclosure/enclosure/updatee',
			url: 'http://localhost:89/enclosure/enclosure/insertes',
			type: 'POST',
			dataType: 'JSON',
			data: {
			aname: realname,
			anumber: anumber,
			routeInfo: dataStr
			},
			success: function(result) {
			if (result.code == 200) {}
			}
			})
			}
			that.polygonFlag = false;

			}
			}
			},

			close: function() {
			// 鼠标点击事件
			clickHand: function() {

			var self = this;
			self._map.onClick = mapClick;

			function mapClick(evt) {
			debugger;
			var normalizedVal = webMercatorUtils.xyToLngLat(evt.mapPoint.x, evt.mapPoint.y);
			var y = self._map.toMap({
			spatialReference: '4326',
			type: "point",
			x: evt.screenPoint.x,
			y: evt.screenPoint.y,
			});


			// 编辑中的
			if (self.polygonFlag == true) {
			if (self.polygonData.length == 0) {
			self.polygonData.push([normalizedVal[0], normalizedVal[1]]);
			self.addPoint(self.addPolygonEntitys, normalizedVal[0], normalizedVal[1]);
			} else if (self.polygonData.length == 1) {
			self.polygonData.push([normalizedVal[0], normalizedVal[1]]);
			self.addPolyline(self.addPolygonEntitys, self.polygonData);
			return;
			} else if (self.polygonData.length > 1) {
			self.polygonData.push([normalizedVal[0], normalizedVal[1]]);
			self.addPolygon(self.addPolygonEntitys, self.polygonData);
			}

			} else { // 不在编辑中
			if (evt.graphic) { // 点击在图形上
			// 保存当前点击得图形
			// self.currentDrawing = evt.graphic;

			self.modifyPolygon();

			self.activateToolbar(evt.graphic);
			} else { // 点击不在图形上

			self.modifyPolygon()
			}
			}

			}

			// 提示信息
			$(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);
			}

			if (self.tabIndex == 1 \|\| self.tabIndex == 2) {

			if (self.polygonFlag == true) {
			$('.police-dispatching .tips').stop().show();

			if (self.polygonData.length == 0) {
			$('.police-dispatching .tips').text('单击左键开始绘制。');
			} else {
			if (e.clientY > ($(window).height() - 98)) {
			y = ($(window).height() - 88);
			}
			$('.police-dispatching .tips').text('单击左键新增加点。单击右键完成绘制。');
			}

			$('.police-dispatching .tips').css({
			'top': y,
			'left': x,
			})
			} else {
			$('.police-dispatching .tips').stop().hide();
			}

			} else {
			$('.police-dispatching .tips').stop().hide();
			}
			})
			},

			//新增线
			addPolyline: function(entitys, path) {
			entitys.clear();
			var polylineSymbol = new SimpleLineSymbol();
			polylineSymbol.color = [255, 0, 0, 1];
			polylineSymbol.width = 4;
			var polyline = new Polyline({
			"paths": [path],
			"spatialReference": {
			"wkid": 4326
			}
			});

			entitys.add(new Graphic(polyline, polylineSymbol));
			},


			//编辑电子围栏（多边形）
			modifyPolygon: function() {
			var self = this;
			if (self.editToolbar != null) {
			//获取当前的多边形数据
			var polygon = self.editToolbar.getCurrentState();

			//释放编辑后
			self.editToolbar.deactivate();

			self.editToolbar = null;

			// 声明空字符串，存储数据
			var dataStr = '';

			// 获取数据
			var data = polygon.graphic.geometry.rings[0];

			// 组装数据
			for (var i = 0; i < data.length; i++) {
			dataStr += (data[i][0] + ' ' + data[i][1] + ',');
			}
			dataStr = dataStr.substring(0, dataStr.length - 1);

			//更新电子围栏数据
			$.ajax({
			//url: 'https://web.byisf.com/api/blade-jfpts/enclosure/enclosure/updatee',
			url: 'http://localhost:89/enclosure/enclosure/updatee',
			type: 'POST',
			dataType: 'JSON',
			data: {
			anumber: anumber,
			routeInfo: dataStr
			},
			success: function(result) {
			if (result.code == 200) {}
			}
			})

			}
			},


			activateToolbar: function(graphic) {
			var tool = 0;

			this.editToolbar = new Edit(this._map);

			// if (registry.byId("tool_move").checked) {
			tool = tool \| Edit.MOVE;
			// }
			// if (registry.byId("tool_vertices").checked) {
			tool = tool \| Edit.EDIT_VERTICES;
			// }
			// if (registry.byId("tool_scale").checked) {
			tool = tool \| Edit.SCALE;
			// }
			// if (registry.byId("tool_rotate").checked) {
			tool = tool \| Edit.ROTATE;
			// }
			// enable text editing if a graphic uses a text symbol
			// if ( graphic.symbol.declaredClass === "esri.symbol.TextSymbol" ) {
			tool = tool \| Edit.EDIT_TEXT;
			// }

			var options = {
			allowAddVertices: true,
			allowDeleteVertices: true,
			uniformScaling: true
			};
			this.editToolbar.activate(tool, graphic, options);

			},

			close: function() {},

			// 获取当前时间，以及昨天现在的时间
			getTime: function getTime() {
			var timestamp = Date.parse(new Date());
			@@ -246,13 +553,12 @@
			pt.entityData = item;
			var graphic = new esri.Graphic(pt, symbol);
			entitys.add(graphic);


			entityContent.push(item);
			},

			//在地图上新增点
			addPoint: function(entitys, lgtd, lttd, img) {
			var symbol = new esri.symbol.PictureMarkerSymbol(img, 33, 48);
			var symbol = new esri.symbol.PictureMarkerSymbol(img, 22, 22);
			var pt = new Point(lgtd, lttd, new SpatialReference({
			wkid: 4326
			}));
			@@ -260,99 +566,20 @@
			entitys.add(graphic);
			},

			addPoints: function(entitys, lgtd, lttd, img) {
			var symbol = new esri.symbol.PictureMarkerSymbol(img, 33, 48);
			var pt = new Point(lgtd, lttd, new SpatialReference({
			wkid: 4326
			}));
			var graphic = new esri.Graphic(pt, symbol);
			entitys.add(graphic);
			},

			//聚合图层事件
			flareClusterLayer: function(datas) {

			console.log(1);

			var that = this;

			var preClustered = false;
			var displaySingleFlaresAtCount = 10;
			var areaDisplayMode = "";
			// var allData = JSON.parse(DATA);
			// DataManager.setData(allData);

			//init the layer, more options are available and explained in the cluster layer constructor
			that.clusterLayer = new FlareClusterLayer({
			id: "flare-cluster-layer",
			spatialReference: new esri.SpatialReference({
			//绘制多边形
			addPolygon: function(entitys, rings) {
			entitys.clear();
			var polygonSymbol = new SimpleFillSymbol();
			polygonSymbol.color = [24, 255, 243, 0.411];
			var polygon = new Polygon({
			"rings": [rings],
			"spatialReference": {
			"wkid": 4326
			}),
			subTypeFlareProperty: "facilityType",
			singleFlareTooltipProperty: "name",
			displaySubTypeFlares: true,
			displaySingleFlaresAtCount: displaySingleFlaresAtCount,
			flareShowMode: "mouse",
			preClustered: preClustered,
			clusterRatio: 75,
			clusterAreaDisplay: areaDisplayMode,
			clusteringBegin: function(e) {
			console.log(e, "clustering begin");
			},
			clusteringComplete: function() {
			console.log("clustering complete");
			}
			});

			//set up a class breaks renderer to render different symbols based on the cluster count. Use the required clusterCount property to break on.
			var defaultSym = new PictureMarkerSymbol("./images/jingbaored.png", 33, 48).setOffset(0, 15);
			var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");
			var xlSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 32, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([200, 52, 59, 0.8]), 1), new dojo.Color([250, 65, 74, 0.8]));
			var lgSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 28, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([41, 163, 41, 0.8]), 1), new dojo.Color([51, 204, 51, 0.8]));
			var mdSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 24, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([82, 163, 204, 0.8]), 1), new dojo.Color([102, 204, 255, 0.8]));
			var smSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 52, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([230, 184, 92, 0.8]), 1), new dojo.Color([255, 204, 102, 0.8]));
			renderer.addBreak(0, 19, smSymbol);
			renderer.addBreak(20, 150, mdSymbol);
			renderer.addBreak(151, 1000, lgSymbol);
			renderer.addBreak(1001, Infinity, xlSymbol);

			that.clusterLayer.setRenderer(renderer); //use standard setRenderer.

			//set up a popup template
			var template = new PopupTemplate({
			title: "{name}",
			fieldInfos: [{
			fieldName: "facilityType",
			label: "Facility Type",
			visible: true
			},
			{
			fieldName: "postcode",
			label: "Post Code",
			visible: true
			},
			{
			fieldName: "isOpen",
			label: "Opening Hours",
			visible: true
			}
			]
			});

			//clusterLayer.infoTemplate = template;
			that._map.infoWindow.titleInBody = false;

			that._map.addLayer(that.clusterLayer);

			//var data = DataManager.getData();
			that.clusterLayer.addData(datas);

			},
			clearLayer: function() {
			var that = this;
			that._map.removeLayer(that.clusterLayer);
			that.clusterLayer = null;
			entitys.add(new Graphic(polygon, polygonSymbol));
			}

			});
			return Widget;
			});

			@@ -169,7 +169,7 @@
			},
			_mapClick: function (e) {//地图全局点击事件标记不能点击
			// console.log('地图全局点击事件');


			if (!e.target) {
			return;
			}
			@@ -189,62 +189,144 @@

			onClick: function (evt) { //标志以及聚合表示点击事件
			var eour = evt.graphic.attributes.clusterCount;
			if(eour == undefined){
			var dataO = evt
			if (eour == undefined) {
			var dataO = evt;
			var aa = evt.graphic.screenX;
			var bb = evt.graphic.screenX;
			var data = {
			nums : evt.graphic.attributes.deviceNumber,
			nams : evt.graphic.attributes.deviceName,
			nums: evt.graphic.attributes.deviceNumber,
			nams: evt.graphic.attributes.deviceName,
			type: evt.graphic.attributes.jtype,
			}
			console.log(dataO);

			var rightCard = (num,name,posi)=>{
			var that = this;
			var url = './popup/html/FlareClusterLayer_v3.html?num=' + num + '&name=' + name;
			layui.use('layer', function () {
			that.layuiLayer = layui.layer;
			// that.layuiLayer.config({
			// extend: 'myskin/police-details.css'
			// });
			that.layuiLayer.close(that.layuiLayer.index);
			that.layuiLayer.open({
			title: '',
			type: 2,
			shadeClose: true,
			shade: false,
			skin: 'demo-class',
			id: 'onelyOne',
			maxmin: false, //开启最大化最小化按钮
			// area: ['500px', '400px'],
			offset: posi,
			skin: 'police-details',
			content: [url,'no'],
			resize: false,
			closeBtn: 1,
			success: function(layero, index){//成功后添加全局点击关闭
			console.log(layero, index);

			// var a = window.onmousedown = ()=>{
			// // parent[0].layer.close(index);
			// // begins();
			// }
			var d = document.onclick = ()=>{
			parent[0].layer.close(index);
			d = '';
			}
			},
			});
			// console.log(dataO);
			// console.log(aa - bb);

			var fCard = (posi) => {
			var that = this,
			url = './popup/html/FlareClusterLayer_v3.html',
			clickD = null,
			downs = null,
			moves = null,
			ups = null;
			layui.use('layer', function () {
			that.layuiLayer = layui.layer;
			that.layuiLayer.config({
			extend: 'myskin/FlareClusterLayer.css'
			});
			// layer.alert('layer 新皮肤');
			that.layuiLayer.close(that.layuiLayer.index);
			that.layuiLayer.open({
			title: '',
			type: 2,
			shadeClose: false,
			shade: false,
			skin: 'demo-class',
			id: 'onelyOne',
			maxmin: false, //开启最大化最小化按钮
			area: ['200px', '75px'],
			// area: 'auto',
			offset: posi,
			skin: 'flare',
			closeBtn: 0,//关闭按钮，可通过配置1和2来展示,0关闭
			content: [url, 'no'],
			resize: false,
			scrollbar: false,
			tipsMore: true, //允许多个tipe
			// content: num,
			success: function (layero, index) {//成功后添加全局点击关闭
			$("#layui-layer-iframe" + index).contents().find("#input1").val(JSON.stringify(evt.graphic.attributes));
			// console.log(layero, index);
			layero[0].style.position = 'absolute';
			downs = document.onmousedown = () => {
			// console.log('down');//start
			// downs = document.onmousedown = null;
			var mx = window.event.clientX//鼠标初始位置
			, my = window.event.clientY
			, cx = this.offset[1].replace("px","")//初始位置
			, cy = this.offset[0].replace("px","");
			moves = document.onmousemove = () => {
			// console.log('move');//move
			// console.log(this.offset)
			var ux = window.event.clientX//记录实时位置
			, uy = window.event.clientY;
			var endx = +cx + (ux - mx)// 初始位置+（鼠标初始位置-实时位置）
			, endy = +cy + (uy - my);
			layero[0].style.left = endx + 'px';
			layero[0].style.top = endy + 'px';
			// console.log(+cx, +cy,'初始位置');
			// console.log(mx, my,'鼠标初始位置');
			// console.log(ux, uy,'记录实时位置');
			// console.log(ux, uy,'最后位置');

			ups = document.onmouseup = () => {
			// console.log('up');//end
			downs = document.onmousedown = null;
			moves = document.onmousemove = null;
			ups = document.onmouseup = null;
			}
			}
			}

			clickD = document.onclick = () => {
			parent[0].layer.close(index);
			parent[0].layer.close(+index + 1);
			// parent[0].layer.closeAll();
			// console.log(111111111111)
			clickD = document.onclick = null;
			}

			},
			end: function () {//关闭事件

			}
			});
			that.layuiLayer.open({//第二个iframe
			title: '',
			type: 2,
			shadeClose: true,
			shade: false,
			skin: 'demo-class',
			id: 'onelyTwo',
			maxmin: false, //开启最大化最小化按钮
			area: ['360px', '484px'],
			// area: 'auto',
			offset: 'r',
			skin: 'flare',
			isOutAnim: false,
			closeBtn: 0,//关闭按钮，可通过配置1和2来展示,0关闭
			content: ['./popup/html/FlareClusterLayer_v3 copy.html'],
			resize: false,
			scrollbar: false,
			// tipsMore: true, //允许多个tipe
			// content: num,
			success: function (layero, index) {//成功后添加全局点击关闭
			// var z = document.onclick = ()=>{
			// parent[0].layer.close(index);
			// // // parent[0].layer.close(+index + 1);
			// z = null;
			// }
			//尝试传值
			//js对象转json对象
			$("#layui-layer-iframe" + index).contents().find("input").val(JSON.stringify(evt.graphic.attributes));
			},
			})
			})
			}
			var offsetMy = [+evt.screenY - 370 + 'px',+evt.screenX - 370 + 'px'];
			rightCard (data.nums,data.nams,offsetMy);
			var begins = ()=>{
			var offsetMy = [+evt.screenY - 370 + 'px',+evt.screenX - 370 + 'px'];
			rightCard (data.nums,data.nams,offsetMy);
			var offsetMy = [+evt.screenY - 300 + 'px', +evt.screenX - 172.5 + 'px'];
			// var offsetMy = [+evt.graphic._shape.shape.y - 80 + 'px',+evt.graphic._shape.shape.x + 'px'];
			fCard(offsetMy);
			var begins = (xy) => {
			var offsetMy = [xy.y + 'px', xy.x + 'px'];
			fCard(offsetMy);
			}
			}else {
			console.log(num,'zoom');
			} else {
			// var taxLotExtent = evt.graphic.geometry.getExtent();
			// this.map.setExtent(evt.graphic._extent)
			this.map.setZoom(this.map.getZoom() + 1)//地图中心缩放
			// this.map.setZoom(18);
			// console.log('111:', this.map.zoomToFullExtent(), '222:', evt, evt.graphic._extent, 'zoom');
			}
			console.log(evt)
			// console.log(evt)
			this._restoreInfoWindowSettings();

			if (evt.graphic.attributes.isCluster) {
			@@ -444,7 +526,7 @@
			dojo.query("g.cluster-group:empty", this.getNode()).forEach(dojo.destroy);
			},



			_graphicDraw: function (e) {
			var g = e.graphic;
			if (g.attributes.isCluster) {
			@@ -810,11 +892,11 @@
			//add a text element for the label to display the count and add to the group
			var shapeCenter = this._getShapeCenter(cluster.graphicShape);
			var textShape = groupShape.createText({
			x: shapeCenter.x,
			y: shapeCenter.y + (this.textSymbol.font.size / 2 - 2),
			text: cluster.clusterCount,
			align: 'middle'
			})
			x: shapeCenter.x,
			y: shapeCenter.y + (this.textSymbol.font.size / 2 - 2),
			text: cluster.clusterCount,
			align: 'middle'
			})
			.setFont({
			size: this.textSymbol.font.size,
			family: this.textSymbol.font.family,
			@@ -938,10 +1020,10 @@
			//create a transparent circle that contains the boundary of the flares, this is to make sure the mouse events don't fire moving in between flares
			var conCircleRadius = (center.x - (bbox.x - radius - buffer)) + radius; //get the radius of the circle to contain everything
			var containerCircle = groupShape.createCircle({
			cx: center.x,
			cy: center.y,
			r: conCircleRadius
			})
			cx: center.x,
			cy: center.y,
			r: conCircleRadius
			})
			//.setStroke({ width: 1, color: "000" })
			.setFill(new Color([0, 0, 0, 0]));
			containerCircle.rawNode.setAttribute("class", "flare-object cluster-object");
			@@ -1242,11 +1324,11 @@
			var textShapes = [];
			for (var i = 0, len = lines.length; i < len; i++) {
			var textShape = tooltipGroup.createText({
			x: xPos,
			y: yPos + (i * 10),
			text: lines[i],
			align: 'middle'
			})
			x: xPos,
			y: yPos + (i * 10),
			text: lines[i],
			align: 'middle'
			})
			.setFill("#000")
			.setFont({
			size: 8,
			@@ -1260,12 +1342,12 @@
			var rectPadding = 2;
			var textBox = tooltipGroup.getBoundingBox();
			var rectShape = tooltipGroup.createRect({
			x: textBox.x - rectPadding,
			y: textBox.y - rectPadding,
			width: textBox.width + (rectPadding * 2),
			height: textBox.height + (rectPadding * 2),
			r: 0
			})
			x: textBox.x - rectPadding,
			y: textBox.y - rectPadding,
			width: textBox.width + (rectPadding * 2),
			height: textBox.height + (rectPadding * 2),
			r: 0
			})
			.setFill(new Color([255, 255, 255, 0.9]))
			.setStroke({
			color: "#000",
			@@ -1401,11 +1483,11 @@
			//Have to add the flare text after the flare group animation otherwise Edge just reloads the page and dies for some reason?
			if (this.shape.flareText) {
			var flareText = this.shape.createText({
			x: this.shape.flareText.location.x,
			y: this.shape.flareText.location.y,
			text: this.shape.flareText.text,
			align: 'middle'
			})
			x: this.shape.flareText.location.x,
			y: this.shape.flareText.location.y,
			text: this.shape.flareText.text,
			align: 'middle'
			})
			.setFill(layer.textSymbol.color)
			.setFont({
			size: this.shape.flareText.textSize,

			@@ -126,7 +126,7 @@
			layuiLayer: null,
			layuiLadate: null,
			tabIndex: 0,

			heatmapfeatureLayer: null,//liu热力图
			// 保留添加实体图层的变量
			addEntitys: null,
			entitysData: [],
			@@ -190,7 +190,7 @@
			getQueryStringByKey: function (key) {
			return (document.location.search.match(new RegExp("(?:^\\?\|&)" + key + "=(.*?)(?=&\|$)")) \|\| ['', null])[1];
			},

			entityData: [],
			open: function () {
			var that = this;
			$.ajax({
			@@ -198,18 +198,101 @@
			type: 'get',
			dataType: 'JSON',
			success: function (res) {


			var datas = res.data;


			var heatmapRenderer = null;
			that.entityData = [];



			for (var i = 0; i < datas.length; i++) {
			datas[i].x = Number(datas[i].jd);
			datas[i].y = Number(datas[i].wd);
			// that.entityData[i].lgtd = Number(datas[i].jd);
			// that.entityData[i].lttd = Number(datas[i].wd);
			that.entityData.push({
			lgtd: Number(datas[i].jd),
			lttd: Number(datas[i].wd)
			})
			}
			// console.log(that.entityData, 444444444444444444444)
			// console.log(datas,444444444444444444444)
			that.flareClusterLayer(datas);

			that.heatmapfeatureLayer = that.heatmFeaLayers();

			// console.log(that.heatmapfeatureLayer);

			that._map.addLayer(that.heatmapfeatureLayer);

			that.checkBoxSelect();

			// console.log(that.heatmapfeatureLayer);
			}
			})

			},
			heatmFeaLayers: function () {// liu 热力图渲染器，加载热力图

			var layerDefinition = {
			"geometryType": "esriGeometryPoint",
			"fields": [{
			"num": "num",
			editable: true,
			nullable: true,
			"type": "esriFieldTypeInteger",
			"alias": "数量"
			}]
			};
			var featureCollection = {
			layerDefinition: layerDefinition,
			featureSet: null
			};
			//创建 FeatureLayer 图层
			var featureLayer = new esri.layers.FeatureLayer(featureCollection, {
			mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
			outFields: ["*"],
			opacity: .8
			});
			//设置渲染方式

			return featureLayer;
			},

			checkBoxSelect: function (self) {
			var that = this;
			var heatmapRenderer = null;
			// // return
			// 选中
			// if ($(self).prop('checked') == true) {
			// if (1) {
			heatmapRenderer = new HeatmapRenderer({
			colorStops: [
			{ ratio: 0.45, color: "rgba(000,000,255,0)" },
			{ ratio: 0.55, color: "rgb(000,255,255)" },
			{ ratio: 0.65, color: "rgb(000,255,000)" },
			{ ratio: 0.75, color: "rgb(234,126,15)" },
			{ ratio: 1.00, color: "rgb(255,000,000)" },
			],
			blurRadius: 42,
			maxPixelIntensity: 184,
			minPixelIntensity: 0
			});
			this.heatmapfeatureLayer.setRenderer(heatmapRenderer);
			// 取消选中
			var point = null;
			for (var i = 0; i < that.entityData.length; i++) {
			point = new esri.geometry.Point(this.entityData[i].lgtd, this.entityData[i].lttd, new esri.SpatialReference({ wkid: 4326 }));
			this.heatmapfeatureLayer.add(new esri.Graphic(point));
			}
			// } else {
			// this.heatmapfeatureLayer.clear();
			// this.heatmapfeatureLayer.setRenderer();
			// }
			},

			close: function () {

			},
			@@ -284,14 +367,16 @@

			clickHand: function (e) {//top点击事件，导航
			console.log(e);
			},
			},


			//聚合图层事件
			flareClusterLayer: function (datas) { //top聚合事件，导航

			var that = this;

			var preClustered = false;
			var displaySingleFlaresAtCount = 10;
			var displaySingleFlaresAtCount = 20;
			var areaDisplayMode = "";
			// var allData = JSON.parse(DATA);
			// DataManager.setData(allData);
			@@ -308,7 +393,7 @@
			displaySingleFlaresAtCount: displaySingleFlaresAtCount,
			flareShowMode: "mouse",
			preClustered: preClustered,
			clusterRatio: 75,
			clusterRatio: 120,
			clusterAreaDisplay: areaDisplayMode,
			clusteringBegin: function (e) {
			console.log(e, "clustering begin");
			@@ -336,20 +421,20 @@
			var template = new PopupTemplate({
			title: "{name}",
			fieldInfos: [{
			fieldName: "facilityType",
			label: "Facility Type",
			visible: true
			},
			{
			fieldName: "postcode",
			label: "Post Code",
			visible: true
			},
			{
			fieldName: "isOpen",
			label: "Opening Hours",
			visible: true
			}
			fieldName: "facilityType",
			label: "Facility Type",
			visible: true
			},
			{
			fieldName: "postcode",
			label: "Post Code",
			visible: true
			},
			{
			fieldName: "isOpen",
			label: "Opening Hours",
			visible: true
			}
			]
			});

			@@ -87,3 +87,13 @@
			})
			}

			export const getBaTree = (id) => {
			return request({
			url: '/api/blade-user/pages',
			method: 'get',
			params: {
			id,
			}
			})
			}

			@@ -16,11 +16,11 @@
			return{
			datalist:[//示例数据格式
			{
			color: 'rgb(233, 39, 25)',
			color: 'rgb(236, 83, 37)',
			text: '掉线'
			},
			{
			color: 'black',
			color: 'rgb(49, 49, 49)',
			text: '在线'
			}
			]
			@@ -34,21 +34,22 @@
			position: absolute;
			right: 0;
			.l-l-o{
			color: rgba($color: #000000, $alpha: .5);
			color: rgba($color: #000000, $alpha: .8);
			color: rgb(49, 49, 49);
			position: relative;
			right: 150px;
			margin-left: 10px;
			font-size: 12px;
			font-weight: 300;
			font-size: 14px;
			font-weight: 500;
			font-family: 'Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol';
			}
			.l-l-Img{
			display: inline-block;
			width: 7px;
			height: 7px;
			width: 10px;
			height: 10px;
			// border: 1px solid rgb(17, 198, 253);
			border-radius: 7px;
			margin-right: 7px;
			border-radius: 3px;
			margin-right: 8px;
			}
			}
			</style>

			@@ -193,10 +193,11 @@
			</template>

			<script>
			import {getList, remove, update, add, getclient, getDeptLazyTree, getAll, updates} from "@/api/client/client";
			import {getList, remove, update, add, getclient, getDeptLazyTree, getAll, updates,getBaTree} from "@/api/client/client";
			import {mapGetters} from "vuex";
			import axios from "axios";
			import Legend from '../../components/liu-legend/Legend'
			import AvueMap from "avue-plugin-map";

			export default {
			components:{
			@@ -210,11 +211,11 @@
			//legend-liu数据
			datalistLIU:[
			{
			color: 'rgb(233, 39, 25)',
			color: 'rgb(236, 83, 37)',
			text: '掉线'
			},
			{
			color: 'black',
			color: 'rgb(49, 49, 49)',
			text: '在线'
			}
			],
			@@ -315,7 +316,6 @@
			label: "设备编号",
			prop: "deviceNumber",
			width: 130,
			editDisabled: true,
			rules: [
			{
			required: false,
			@@ -336,7 +336,7 @@
			rules: [
			{
			required: false,
			message: "请选择上级菜单",
			message: "请选择使用方",
			trigger: "click"
			}
			]
			@@ -403,25 +403,7 @@
			addDisplay: false,
			editDisplay: false
			},
			{
			label: "设备类型",
			prop: "deviceType",
			width: 100,
			search: true,
			searchSpan: 3,
			searchLabelWidth: 80,
			searchPlaceholder: "请选择",
			type: "select",
			props: {
			label: "dictValue",
			value: "dictValue"
			},
			dicUrl: "/api/blade-system/dict-biz/child-list?parentId=1357568691367661569",
			hide: true,
			addDisplay: true,
			editDisplay: true,
			viewDisplay: true,
			},

			{
			label: "省份",
			prop: "province",
			@@ -497,8 +479,32 @@
			viewDisplay: true,
			},
			{
			label: "地址",
			prop: "map",
			hide: true,
			span: 24,
			component: "AvueMap",
			},
			{
			label: "经度",
			hide: true,
			addDisplay: false,
			prop: "jd",
			},
			{
			label: "纬度",
			hide: true,
			addDisplay: false,
			prop: "wd",
			},
			{
			label: "负责人",
			prop: "oneContacts",
			prop: "oneId",
			type: "tree",
			dicUrl: "/api/blade-system/dept/Batrees",
			props: {
			label: "title"
			},
			width: 72,
			hide: true,
			addDisplay: true,
			@@ -559,6 +565,31 @@
			},
			data: []
			};
			},
			watch: {
			"form.map": {
			// form是表单或者表格绑定的数据集，v-model='form'
			handler(val) {
			debugger
			if (val) {
			this.form.wd = val.latitude;
			this.form.jd = val.longitude;
			this.form.street = val.formattedAddress;
			}
			},
			immediate: true,
			},
			"form.oneId":{
			handler(val) {
			var that = this;
			getBaTree(val).then(res => {
			if (res) {
			that.form.onePhone = res.data.data.records[0].phone;
			that.form.oneContacts = res.data.data.records[0].name;
			}
			});
			},
			}
			},
			computed: {
			...mapGetters(["permission"]),
			@@ -834,9 +865,9 @@
			//console.log(document.body.clientHeight,event.clientY,cha)
			// 防止菜单太靠底，根据可视高度调整菜单出现位置
			if (cha < 150) {
			menu.style.top = event.clientY -120 - (70) + 'px'
			menu.style.top = event.clientY -120 - (100) + 'px'
			} else {
			menu.style.top = event.clientY -10 - (70) + 'px'
			menu.style.top = event.clientY -10 - (100) + 'px'
			}
			menu.style.left = event.clientX + 10 - (60) + 'px'
			document.addEventListener('click', this.foo); // 给整个document新增监听鼠标事件，点击任何位置执行foo方法

			@@ -1,9 +1,3 @@
			/*
			* @Author: Morpheus
			* @Date: 2021-03-17 15:21:33
			* @Last Modified by: Morpheus
			* @Last Modified time: 2021-04-19 14:32:44
			*/
			<template>
			<basic-container>
			<avue-crud
			@@ -40,7 +34,7 @@
			>删除
			</el-button>
			</template>


			<template slot="menuLeft">
			<el-button
			v-bind:class="activeClass == 0 ? 'btn-color' : ''"
			@@ -67,27 +61,23 @@
			>全部
			</el-button>
			</template>


			<template slot="menuLeft">
			<el-button
			type="warning"
			size="mini"
			plain
			icon="el-icon-download"
			@click="handleExport"
			>导出
			<el-button type="warning"
			size="mini"
			plain
			icon="el-icon-download"
			@click="handleExport">导出
			</el-button>
			<el-button
			type="warning"
			style="display: none"
			size="small"
			plain
			icon="el-icon-download"
			@click="handleExportStatis"
			>导出报表
			<el-button type="warning"
			size="small"
			plain
			icon="el-icon-pie-chart"
			@click="handleExportStatis">导出报表
			</el-button>
			</template>



			<template slot-scope="{ row }" slot="jtype">
			<el-tag
			>{{
			@@ -102,7 +92,7 @@
			}}
			</el-tag>
			</template>


			<template slot-scope="{ type, size, row }" slot="menu">
			<el-button
			icon="el-icon-s-order"
			@@ -143,7 +133,7 @@
			</el-button>
			</template>
			</avue-crud>


			<el-dialog
			class="real-dialog"
			title="警情核实"
			@@ -171,7 +161,7 @@
			controls
			></video>
			</el-dialog>


			<el-dialog
			class="ss-video-dialog"
			:modal="false"
			@@ -193,7 +183,7 @@
			controls
			></video>
			</el-dialog>


			<el-form
			:model="form"
			label-position="right"
			@@ -329,7 +319,7 @@
			</el-form-item>
			</el-col>
			</el-row>


			<el-row>
			<el-col span="12">
			<el-form-item label="报警时间">
			@@ -363,7 +353,7 @@
			</el-form-item>
			</el-col>
			</el-row>


			<el-row>
			<el-col span="12">
			<el-form-item label="备注">
			@@ -371,7 +361,7 @@
			</el-form-item>
			</el-col>
			</el-row>


			<el-row :align="center">
			<el-col class="opt-btn">
			<el-form-item>
			@@ -386,14 +376,14 @@
			@click.stop="updateJtyep(form, 1, '办结')"
			>办结
			</el-button>


			<img
			src="/img/police-num.png"
			style="margin-top: -20px; height: 80px; vertical-align: middle"
			alt=""
			@click.stop="updateJtyep(form, 1, '推送110')"
			/>


			<el-button
			type="primary"
			@click.stop="updateJtyep(form, 1, '派送保安')"
			@@ -404,7 +394,7 @@
			</el-row>
			</el-form>
			</el-dialog>


			<el-drawer title="电子地图" append-to-body="true" :visible.sync="showMap">
			<iframe
			id="mapDiv"
			@@ -417,17 +407,17 @@
			</el-drawer>
			</basic-container>
			</template>


			<script>
			import { getList, remove, update, add, getclient } from "@/api/real/real";
			import { mapGetters } from "vuex";


			import Hls from "hls.js";


			import axios from "axios";


			import Recorder from "js-audio-recorder";


			export default {
			data() {
			return {
			@@ -498,7 +488,7 @@
			type: "datetime",
			format: "yyyy-MM-dd",
			valueFormat: "yyyy-MM-dd",
			searchValue: [this.getStartTime(), this.getEndTime()],
			searchValue:[this.getStartTime(),this.getEndTime()],
			searchRange: true,
			searchSpan: 5,
			hide: true,
			@@ -844,7 +834,7 @@
			let values = {
			...params,
			};


			if (
			this.$route.query.waringType &&
			this.$route.query != undefined &&
			@@ -886,7 +876,7 @@
			endTime: this.dateTime.day.endTime,
			};
			}


			if (
			this.$route.query.startTime != undefined &&
			this.$route.query.startTime != null &&
			@@ -899,7 +889,7 @@
			};
			}
			}


			if (releaseTimeRange) {
			values = {
			...params,
			@@ -914,7 +904,7 @@
			...this.query,
			};
			}


			if (this.$route.query.timeDesc) {
			values = {
			...params,
			@@ -922,7 +912,7 @@
			...this.query,
			};
			}


			this.loading = true;
			getList(page.currentPage, page.pageSize, values).then((res) => {
			const data = res.data.data;
			@@ -930,13 +920,13 @@
			item.waringType == "紧急求救" ? (item.waringType = "一键求助") : "";
			});
			this.page.total = data.total;


			data.records.sort((a, b) => {
			return a.jtype - b.jtype;
			});


			this.data = data.records;


			this.loading = false;
			this.selectionClear();
			});
			@@ -945,7 +935,7 @@
			// 当前时间
			var timestamp = Date.parse(new Date());
			var serverDate = new Date(timestamp);


			// 本周周一的时间
			var mondayTime =
			timestamp - (serverDate.getDay() - 1) * 24 * 60 * 60 * 1000;
			@@ -991,7 +981,7 @@
			currentData.getSeconds() < 10
			? "0" + currentData.getSeconds()
			: currentData.getSeconds();


			return {
			day: {
			beginTime: currentY + "-" + currentM + "-" + currentD + " 00:00:00",
			@@ -1132,6 +1122,18 @@
			};
			});
			},
			getStartTime(){
			if (this.$route.query.startTime != undefined && this.$route.query.startTime != null && this.$route.query.startTime != "" ) {
			return this.$route.query.startTime
			}
			return '';
			},
			getEndTime(){
			if (this.$route.query.endTime != undefined && this.$route.query.endTime != null && this.$route.query.endTime != "" ) {
			return this.$route.query.endTime
			}
			return '';
			},
			handleManage(row) {
			this.form = row;
			this.peopleList = [
			@@ -1145,7 +1147,7 @@
			},
			updateJtyep(row, jtype, t) {
			var that = this;


			axios
			.post(
			"/api/blade-jfpts/alarm/alarm/updateJtype",
			@@ -1165,7 +1167,7 @@
			)
			.then(function () {
			that.dialogTableVisible = false;


			axios({
			method: "post",
			url: `/api/blade-jfpts/rvideo/stop`,
			@@ -1173,7 +1175,7 @@
			jid: row.id,
			},
			}).then((resdata) => {});


			that.onLoad(that.page, that.query);
			that.$router.push({
			path: "/policeTracking/track",
			@@ -1183,54 +1185,54 @@
			},
			beginTimeOrEndTime(time) {
			var beginTime = new Date(time);


			var endTime = new Date(new Date(time).valueOf() - 1000 * 60 * 60 * 3);


			var beginY = beginTime.getFullYear();


			var beginM =
			beginTime.getMonth() + 1 < 10
			? "0" + (beginTime.getMonth() + 1)
			: beginTime.getMonth() + 1;


			var beginD =
			beginTime.getDate() < 10
			? "0" + beginTime.getDate()
			: beginTime.getDate();


			var beginH =
			beginTime.getHours() < 10
			? "0" + beginTime.getHours()
			: beginTime.getHours();


			var beginm =
			beginTime.getMinutes() < 10
			? "0" + beginTime.getMinutes()
			: beginTime.getMinutes();


			var begins =
			beginTime.getSeconds() < 10
			? "0" + beginTime.getSeconds()
			: beginTime.getSeconds();


			var endY = endTime.getFullYear();


			var endM =
			endTime.getMonth() + 1 < 10
			? "0" + (endTime.getMonth() + 1)
			: endTime.getMonth() + 1;


			var endD =
			endTime.getDate() < 10 ? "0" + endTime.getDate() : endTime.getDate();


			var endH =
			endTime.getHours() < 10 ? "0" + endTime.getHours() : endTime.getHours();


			var endm =
			endTime.getMinutes() < 10
			? "0" + endTime.getMinutes()
			: endTime.getMinutes();


			var ends =
			endTime.getSeconds() < 10
			? "0" + endTime.getSeconds()
			@@ -1250,7 +1252,7 @@
			"Content-type": "application/x-www-form-urlencoded",
			},
			});


			//this.form.serialNumber
			newAxios
			.post(
			@@ -1269,22 +1271,22 @@
			)
			.then((result) => {
			that.videoSource = result.data.data.m3u8;


			if (Hls.isSupported()) {
			var dom = document.getElementById("real_video_conversation");


			that.hls = new Hls();


			var m3u8Url = decodeURIComponent(that.videoSource);


			that.hls.loadSource(m3u8Url);


			that.hls.attachMedia(dom);


			that.hls.on(Hls.Events.MANIFEST_PARSED, function () {
			dom.play();
			});


			that.hls.on(Hls.Events.ERROR, function (event, data) {
			console.log(data, 4566824159, "视频播放有问题！！！");
			if (data.fatal) {
			@@ -1315,12 +1317,12 @@
			},
			closeRealVideoBox() {
			var dom = document.getElementById("real_video_conversation");


			if (dom.getAttribute("src") != "") {
			dom.pause();


			dom.setAttribute("src", "");


			this.hls.destroy();
			}
			},
			@@ -1334,7 +1336,7 @@
			var dom = document.getElementById("real_old_video");
			dom.pause();
			},


			aKeyToCall() {
			this.isActive = true;
			var that = this;
			@@ -1346,7 +1348,7 @@
			// compiling: false,(0.x版本中生效,1.x增加中) // 是否边录边转换，默认是false
			});
			}


			// 一键呼叫相关函数
			that.recorder.start().then(
			() => {
			@@ -1358,7 +1360,7 @@
			}
			);
			},


			// 序列号后期待修改
			aKeyStopCall() {
			this.isActive = false;
			@@ -1369,14 +1371,14 @@
			"Content-Type": "application/json;",
			},
			});


			var wavAxios = axios.create({
			baseURL: "https://web.byisf.com",
			withCredentials: false,
			});


			var that = this;


			newCallAxios
			.post(
			`/api_control`,
			@@ -1390,15 +1392,15 @@
			.then((result) => {
			var formData = new FormData();
			// that.recorder.downloadWAV("新文件");


			var blob = that.recorder.getPCMBlob(); //获取pcm格式音频数据
			//此处获取到blob对象后需要设置fileName满足当前项目上传需求，其它项目可直接传把blob作为file塞入formData
			var newbolb = new Blob([blob], { type: "audio/pcm" });
			var fileOfBlob = new File([newbolb], new Date().getTime() + ".pcm");
			formData.append("file", fileOfBlob);


			var wavBlob = that.recorder.getWAVBlob();


			var wavformData = new FormData();
			var wavform = new File([wavBlob], new Date().getTime() + ".wav");
			wavformData.append("file", wavform);
			@@ -1409,7 +1411,7 @@
			wavformData.entries(),
			132
			);


			axios({
			method: "post",
			url: "/api/blade-jfpts/xlfeedback/xlfeedback/put-objecty",
			@@ -1420,7 +1422,7 @@
			}).then((resdata) => {
			console.log(resdata);
			});


			newCallAxios
			.post(`/api_control`, blob, {
			params: {
			@@ -1438,7 +1440,7 @@
			});
			});
			},


			peopleOrPhone(e) {
			this.peopleList.forEach((item) => {
			if (item.label == e) {
			@@ -1459,139 +1461,104 @@
			this.$confirm("是否导出实时警情数据?", "提示", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
			type: "warning"
			}).then(() => {
			window.open(
			`/api/blade-jfpts/alarm/alarm/export-alarm?beginTime=${this.$route.query.startTime}&endTime=${this.$route.query.endTime}&waringType=${this.$route.query.waringType}&timeDesc=${this.$route.query.timeDesc}`
			);
			window.open(`/api/blade-jfpts/alarm/alarm/export-alarm?beginTime=${this.$route.query.startTime}&endTime=${this.$route.query.endTime}&waringType=${this.$route.query.waringType}&timeDesc=${this.$route.query.timeDesc}`);
			});
			},
			//数据报表导出
			handleExportStatis() {
			this.$confirm("是否导出实时警情数据?", "提示", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
			}).then(() => {
			let beginTime =
			this.$route.query.startTime == undefined
			? ""
			: this.$route.query.startTime;
			let endTime =
			this.$route.query.endTime == undefined
			? ""
			: this.$route.query.endTime;
			let waringType =
			this.$route.query.waringType == undefined
			? ""
			: this.$route.query.waringType;
			let timeDesc =
			this.$route.query.timeDesc == undefined
			? ""
			: this.$route.query.timeDesc;
			window.open(
			`http://localhost:8108/ureport/excel?_u=blade-alarm.statis.ureport.xml&beginTime=${beginTime}&endTime=${endTime}&waringType=${waringType}&timeDesc=${timeDesc}`
			);
			});
			},
			getStartTime() {
			if (
			this.$route.query.startTime != undefined &&
			this.$route.query.startTime != null &&
			this.$route.query.startTime != ""
			) {
			return this.$route.query.startTime;
			handleExportStatis() {
			this.$confirm("是否导出实时警情数据?", "提示", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning"
			}).then(() => {
			let beginTime = this.$route.query.startTime==undefined? '':this.$route.query.startTime;
			let endTime = this.$route.query.endTime==undefined? '':this.$route.query.endTime;
			let waringType = this.$route.query.waringType==undefined? '':this.$route.query.waringType;
			let timeDesc = this.$route.query.timeDesc==undefined? '':this.$route.query.timeDesc;
			window.open(`http://localhost:8108/ureport/preview?_u=blade-alarm.statis.ureport.xml&beginTime=${beginTime}&endTime=${endTime}&waringType=${waringType}&timeDesc=${timeDesc}`);
			//window.open(`http://localhost:8108/ureport/excel?_u=blade-alarm.statis.ureport.xml&beginTime=${beginTime}&endTime=${endTime}&waringType=${waringType}&timeDesc=${timeDesc}`);
			});
			}
			return "";
			},
			getEndTime() {
			if (
			this.$route.query.endTime != undefined &&
			this.$route.query.endTime != null &&
			this.$route.query.endTime != ""
			) {
			return this.$route.query.endTime;
			}
			return "";
			},
			},
			};
			</script>


			<style>
			.el-card__body .waringTypeClass {
			width: 12%;
			}


			/页面样式/
			.el-card__body .cityClass1 {
			width: 155px;
			padding-right: 0px !important;
			}


			.el-card__body .cityClass2 {
			width: 100px;
			padding-left: 0px !important;
			padding-right: 0px !important;
			}


			.el-card__body .cityClass3 {
			width: 100px;
			padding-left: 0px !important;
			padding-right: 0px !important;
			}


			/新增窗体样式/
			.el-dialog .cityClass1 {
			width: 220px;
			padding-right: 0px !important;
			}


			.el-dialog .cityClass2 {
			width: 110px;
			padding-left: 5px !important;
			padding-right: 5px !important;
			}


			.el-dialog .cityClass3 {
			width: 110px;
			padding-left: 0px !important;
			padding-right: 0px !important;
			}


			.cityClassParams .avue-form__group.avue-form__group--flex {
			display: flex;
			justify-content: space-between;
			}


			.cityClassParams .cityClassSelect {
			flex: 1;
			margin: 0 !important;
			padding-left: 0px !important;
			padding-right: 0px !important;
			}


			.cityClassParams .cityClassSelect:nth-child(2) {
			margin: 0 10px !important;
			}


			.cityClassParams .cityClassSelect .el-form-item {
			margin-bottom: 0px !important;
			}


			.cityClassParams .cityClassSelect .el-form-item .el-input__inner {
			height: 28px !important;
			line-height: 28px !important;
			}


			.cityClass2 div label {
			display: none;
			}


			.cityClass3 div label {
			display: none;
			}


			.old-video-dialog {
			position: absolute !important;
			top: 0 !important;
			@@ -1602,7 +1569,7 @@
			height: 100% !important;
			width: 476px !important;
			}


			.old-video-dialog .el-dialog {
			position: absolute !important;
			top: 0 !important;
			@@ -1613,23 +1580,23 @@
			margin-top: 15vh !important;
			height: 538px;
			}


			.old-video-dialog .el-dialog .el-dialog__body {
			height: calc(100% - 54px);
			box-sizing: border-box;
			}


			.el-button.active {
			background: #ff0000 !important;
			}


			.el-button.btn-color {
			color: rgb(255, 255, 255);
			background-color: rgb(64, 158, 255);
			border-color: rgb(64, 158, 255);
			}


			.tabFontSize {
			font-size: 15px;
			}
			</style>
			</style>

			@@ -248,13 +248,11 @@
			});
			});
			},
			//打开地图
			handleMap(row) {

			var that =this;
			that.baseUrl = `/map/index.html?ISinit=1&openid=SecurityMap&jd=${row.jd}&wd=${row.wd}`;
			that.baseUrl = `/map/index.html?ISinit=1&openid=SecurityMap&jd=${row.jd}&wd=${row.wd}&code=${row.code}&name=${row.realName}`;
			this.showMap=true;
			console.log(this.$refs,111);
			console.log(this.$refs.securityMap,222);
			this.$refs.securityMap.onload = () => {
			if (window.frames[0].init) {
			window.frames[0].init("SecurityMap", {

			@@ -662,6 +662,7 @@
			);
			} else if (row.type == "1") {
			insertss(
			row.dj,
			row.nature,
			row.had,
			row.motto,
			@@ -671,6 +672,7 @@
			);
			} else if (row.type == "2") {
			insertsr(
			row.dj,
			row.category,
			row.attributes,
			row.developers,
			@@ -705,6 +707,7 @@
			);
			} else if (row.type == "1") {
			updateInfos(
			row.dj,
			row.nature,
			row.had,
			row.motto,
			@@ -714,6 +717,7 @@
			);
			} else if (row.type == "2") {
			updateInfor(
			row.dj,
			row.category,
			row.attributes,
			row.developers,
			@@ -770,6 +774,7 @@
			selectTs(this.form.tenantName).then((re) => {
			const data = res.data.data;
			data.nature = re.data.data[0].nature;
			data.dj = re.data.data[0].dj;
			data.motto = re.data.data[0].motto;
			data.ctime = re.data.data[0].ctime;
			data.had = re.data.data[0].had;
			@@ -789,6 +794,7 @@
			} else if (this.form.type == "2") {
			selectTr(this.form.tenantName).then((re) => {
			const data = res.data.data;
			data.dj = re.data.data[0].dj;
			data.category = re.data.data[0].category;
			data.attributes = re.data.data[0].attributes;
			data.developers = re.data.data[0].developers;

			@@ -167,10 +167,10 @@
			...mapGetters(["permission"]),
			permissionList() {
			return {
			addBtn: this.vaildData(this.permission.zc_add, true),
			addBtn: this.vaildData(this.permission.zc_add, false),
			viewBtn: this.vaildData(this.permission.zc_view, true),
			delBtn: this.vaildData(this.permission.zc_delete, false),
			editBtn: this.vaildData(this.permission.zc_edit, true)
			editBtn: this.vaildData(this.permission.zc_edit, false)
			};
			},
			ids() {