jfpt-Vue.git - Gitblit

parent: 87124181 | patch | commit | ignore whitespace

Merge branch 'master' of http://192.168.0.105:10010/r/jfpt-Vue

Administrator

2021-04-20 d874cdc354465eeed76f7039de9e4d7e5b17dabc

Merge branch 'master' of http://192.168.0.105:10010/r/jfpt-Vue

10 files modified

4 files added

	public/map/images/1.gif	patch \| view \| raw \| blame \| history
	public/map/images/real-time-callPolice-opcity.png	patch \| view \| raw \| blame \| history
	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/alertSecurity/AlertSecurity.js	124 ●●●●● patch \| view \| raw \| blame \| history
	public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js	236 ●●●●● patch \| view \| raw \| blame \| history
	public/map/widgets/supervisoryMap/SupervisoryMap.css	375 ●●●●● patch \| view \| raw \| blame \| history
	public/map/widgets/supervisoryMap/SupervisoryMap.js	601 ●●●●● patch \| view \| raw \| blame \| history
	public/map/widgets/supervisoryMap/template.html	253 ●●●●● patch \| view \| raw \| blame \| history
	src/components/liu-legend/Legend.vue	19 ●●●●● patch \| view \| raw \| blame \| history
	src/views/clientManagement/clientManagement.vue	4 ●●●●● patch \| view \| raw \| blame \| history
	src/views/policeTracking/policeTracking.vue	44 ●●●●● patch \| view \| raw \| blame \| history
	src/views/realTimePolice/real.vue	137 ●●●●● patch \| view \| raw \| blame \| history

 public/map/images/1.gif


 public/map/images/real-time-callPolice-opcity.png


 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/alertSecurity/AlertSecurity.js

@@ -204,8 +204,10 @@
      var deptId = that.getQueryStringByKey('deptId');
      var oneId = that.getQueryStringByKey('oneId');

      that.createEntitys(that.addEntitys, lgtd, lttd, './images/real-time-callPolice-opcity.png');
      that.createTwinkleEntitys(that.addEntitys, lgtd, lttd, './images/real-time-callPolice-opcity.png');
      that.addPoint(that.addEntitys, lgtd, lttd, './images/jingbaored.png');
     
      
      $.ajax({
        url: "https://web.byisf.com/api/blade-user/pages?current=1&size=9999&work_status=&deptId=" + deptId,
        type: 'get',
@@ -232,65 +234,83 @@
    close: function () {

    },
    // 获取当前时间，以及昨天现在的时间
    getTime: function getTime() {
      var timestamp = Date.parse(new Date());

      // 当前时间
      var currentTime = new Date(timestamp);
      // 年
      var currentY = currentTime.getFullYear();
      // 月
      var currentM = currentTime.getMonth() + 1 < 10 ? '0' + (currentTime.getMonth() + 1) : currentTime.getMonth() + 1;
      // 日
      var currentD = currentTime.getDate() < 10 ? '0' + currentTime.getDate() : currentTime.getDate();
      // 时
      var currentH = currentTime.getHours() < 10 ? '0' + currentTime.getHours() : currentTime.getHours();
      // 分
      var currentDd = currentTime.getMinutes() < 10 ? '0' + currentTime.getMinutes() : currentTime.getMinutes();
      // 明天
      var tomorrowTime = new Date(timestamp - 60 * 60 * 24 * 1000);
      // 年
      var tomorrowY = tomorrowTime.getFullYear();
      // 月
      var tomorrowM = tomorrowTime.getMonth() + 1 < 10 ? '0' + (tomorrowTime.getMonth() + 1) : tomorrowTime.getMonth() + 1;
      // 日
      var tomorrowD = tomorrowTime.getDate() < 10 ? '0' + tomorrowTime.getDate() : tomorrowTime.getDate();
      // 时
      var tomorrowH = tomorrowTime.getHours() < 10 ? '0' + tomorrowTime.getHours() : tomorrowTime.getHours();
      // 分
      var tomorrowDd = tomorrowTime.getMinutes() < 10 ? '0' + tomorrowTime.getMinutes() : tomorrowTime.getMinutes();
      return {
        current: currentY + '-' + currentM + '-' + currentD + ' ' + currentH + ':' + currentDd,
        tomorrow: tomorrowY + '-' + tomorrowM + '-' + tomorrowD + ' ' + tomorrowH + ':' + tomorrowDd,
        month: currentM + currentD
      };
    },

    // 创建实体图层
    createEntitys: function (entitys, entityContent, name, item, lgtd, lttd, outlineColors) {

      var symbol = new esri.symbol.PictureMarkerSymbol(outlineColors, 26, 26);
      symbol.name = name;
      var pt = new Point(lgtd, lttd, new esri.SpatialReference({
        wkid: 4326
      }));
      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, 32);
      symbol.xoffset = 0; 
      symbol.yoffset = -2;
      var pt = new Point(lgtd, lttd, new SpatialReference({
        wkid: 4326
      }));
      var graphic = new esri.Graphic(pt, symbol);
      entitys.add(graphic);
    },
    /**
     * 添加实体的公共方法
     * @param {*} entitys 实体类
     * @param {Array} entityContent 存放每个点详细数据的数组
     * @param {string} name 实体的名字
     * @param {*} item 实体数据
     * @param {*} lgtd 经度
     * @param {*} lttd 纬度
     * @param {*} outlineColors 颜色
     */
    createEntitys: function (entitys, lgtd, lttd, image) {

      var symbol = new esri.symbol.PictureMarkerSymbol(image, 44, 44);
   
      var width = 44;
      var height = 44;
      var pt = new Point(lgtd, lttd, new SpatialReference({
        wkid: 4326
      }));

      var graphic = new esri.Graphic(pt, symbol);

      setInterval(function () {
        if (width >= 60) {
          width = 44;
          height = 44;
        }
        width += 1;
        height += 1;
        symbol.width = width;
        symbol.height = height;
        graphic.setSymbol(symbol)
        entitys.add(graphic);
      }, 50)

    },
    /**
     * 添加闪烁实体的公共方法
     * @param {*} entitys 实体类
     * @param {*} lgtd 经度
     * @param {*} lttd 纬度
     * @param {*} color 颜色
     */
    createTwinkleEntitys: function (entitys, lgtd, lttd, image, color) {
      var symbol = new esri.symbol.PictureMarkerSymbol(image, 64, 64);
      var width = 64;
      var height = 64;
      var pt = new Point(lgtd, lttd, new SpatialReference({
        wkid: 4326
      }));

      var graphic = new esri.Graphic(pt, symbol);

      setInterval(function () {
        if (width >= 80) {
          width = 64;
          height = 64;
        }
        width += 1;
        height += 1;
        symbol.width = width;
        symbol.height = height;
        graphic.setSymbol(symbol)
        entitys.add(graphic);
      }, 50)
    },

    addPoints: function (entitys, lgtd, lttd, img) {
      var symbol = new esri.symbol.PictureMarkerSymbol(img, 20, 20);

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

@@ -0,0 +1,375 @@
/* .analysis-and-judgment {
    display: none;
} */

div[open-li='analysis-and-judgment'] {
    box-sizing: border-box;
}

div[open-li='analysis-and-judgment']>ul {
    display: flex;
    height: 36px;
    line-height: 36px;
}

div[open-li='analysis-and-judgment']>ul>li {
    flex: 1;
    font-size: 15px;
    text-align: center;
    color: #7b7b7b;
    cursor: pointer;
    background: #E5E5E5;
}

div[open-li='analysis-and-judgment']>ul>li.on {
    color: #677788;
    background: #fff;
}

.analysis-and-judgment {
    width: 360px;
    height: calc(100%);
    background: rgb(255, 255, 255);
}

/* 分析研判内容容器 */
.analysis-container {
    position: relative;
    height: calc(100% - 38px);
    font-size: 14px;
}

.analysis-container>div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.analysis-container>div:nth-child(2) {
    display: none;
}

.analysis-container>div:nth-child(3) {
    display: none;
}

/* 类别选择，级别选择，以及热力图 */
.analysis-container .analysis-category,
.analysis-container .analysis-level {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 4px 6px 0 6px;
    box-sizing: border-box;
    color: #677788;
}

.analysis-container .analysis-category>ul,
.analysis-container .analysis-level>ul {
    display: flex;
    height: 36px;
    line-height: 36px;
    align-items: center;
}

.analysis-container .analysis-category>ul>li,
.analysis-container .analysis-level>ul>li {
    height: 36px;
    line-height: 36px;
}

.analysis-container .analysis-category>ul>li:first-child,
.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2),
.analysis-container .analysis-level>ul>li:first-child {
    margin-right: 4px;
    position: relative;
    padding-left: 4px;
    flex: 8;
    color: #677788;
    background: rgb(255, 255, 255);
    border: 1px solid rgba(231, 234, 243, 1);
    box-sizing: border-box;
}

.analysis-container .analysis-container-police .analysis-category>ul>li:first-child,
.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) {
    flex: 4;
}


.analysis-container .analysis-category>ul>li:last-child,
.analysis-container .analysis-level>ul>li:last-child {
    flex: 2;
    text-align: center;
}

.analysis-container .analysis-category>ul>li:last-child input,
.analysis-container .analysis-level>ul>li:last-child input {
    vertical-align: middle;
}

/* 类别选择中得下拉框 */
.analysis-container .analysis-category>ul>li:first-child div:first-child,
.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) div:first-child,
.analysis-container .analysis-level>ul>li:first-child div:first-child {
    position: absolute;
    top: 0;
    left: 30px;
    width: calc(100% - 30px);
    height: 34px;
    color: #677788;
    padding-left: 10px;
    box-sizing: border-box;
    cursor: pointer;

}

.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) div:first-child {
    left: 16px;
    width: calc(100% - 16px);
}

.analysis-container .analysis-category>ul>li:first-child div:first-child i,
.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) div:first-child i,
.analysis-container .analysis-level>ul>li:first-child div:first-child i {
    display: block;
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translate(0, -50%);
    width: 10px;
    height: 10px;
    background: url('../../images/select-bg.png') repeat;
    background-size: 100% 100%;
}

.analysis-container .analysis-category>ul>li:first-child div:last-child,
.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) div:last-child,
.analysis-container .analysis-level>ul>li:first-child div:last-child {
    display: none;
    position: absolute;
    top: 35px;
    left: -1px;
    z-index: 10;
    width: calc(100% + 2px);
}


.analysis-container .analysis-category>ul>li:first-child ul,
.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) ul,
.analysis-container .analysis-level>ul>li:first-child ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 300px;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid rgba(231, 234, 243, 1);
    border-top: none;
    box-sizing: border-box;

}

.analysis-container .analysis-category>ul>li:first-child ul li,
.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) ul li,
.analysis-container .analysis-level>ul>li:first-child ul li {
    flex: 1;
    padding-left: 10px;
    height: 34px;
    border-top: 1px solid rgba(231, 234, 243, 1);
    background: rgb(255, 255, 255);
    color: #677788;
    box-sizing: border-box;
    cursor: pointer;
}

.analysis-container .analysis-category>ul>li:first-child ul li:hover,
.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) ul li:hover,
.analysis-container .analysis-level>ul>li:first-child ul li:hover {
    color: #15a2fe;
    background: #beeeff;
}

.analysis-container .analysis-category>ul>li:first-child ul li:first-child,
.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) ul li:first-child,
.analysis-container .analysis-level>ul>li:first-child ul li:first-child {
    border: none;
}

/* 时间选择 */
.analysis-container .analysis-selection-criteria {
    display: flex;
    padding: 4px 6px;
    width: 100%;
    height: 40px;
    line-height: 32px;
    color: #677788;
    box-sizing: border-box;
}

.analysis-container .analysis-selection-criteria input {
    border: 1px solid rgba(231, 234, 243, 0.7);
}

.analysis-container .analysis-selection-criteria input[type='text'] {
    width: 0;
    flex: 5;
    padding: 0 4px;
    color: #677788;
    cursor: pointer;
    background-color: #fff;
    background: url('../../images/laydata-bg.png') no-repeat;
    background-size: 18px 16px;
    background-position: 98% center;
}

.analysis-container .analysis-selection-criteria input[type='button'] {
    width: 0;
    flex: 2;
    color: #fff;
    background: #377DFF;
    cursor: pointer;
}

/* 显示信息得表格 */
.analysis-container .analysis-container-police .analysis-table-content {
    height: calc(100% - 80px);
}

.analysis-container .analysis-container-owner .analysis-table-content {
    margin-top: 4px;
    height: calc(100% - 84px);
}

.analysis-container .analysis-container-equipment .analysis-table-content {
    margin-top: 4px;
    height: calc(100% - 44px);
}

.analysis-container .table {
    height: 100%;
}

.analysis-container .thead {
    height: 31px;
}

.analysis-container .table .tbody {
    height: calc(100% - 31px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}


.analysis-container .table table {
    width: 360px;
    border-collapse: collapse;
    table-layout: fixed;
    box-sizing: border-box;

}

.analysis-container .table table tr {
    height: 30px;
}

.analysis-container .table table tr th,
.analysis-container .table table tr td {
    margin: 0;
    padding: 0 4px;
    border: 1px solid rgba(231, 234, 243, 1);
    height: 30px;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color: #677788;
    box-sizing: border-box;

    overflow: hidden;
    /*超出的文字隐藏*/
    text-overflow: ellipsis;
    /*文字超出后,显示省略号*/
    white-space: nowrap;
    /*文字不换行*/
    word-break: keep-all;
    /*文字不换行*/
}

.analysis-container .table table tr td a {
    color: #677788;
    cursor: default;
}

.analysis-container .table table tr:first-child td {
    border-top: none;

}


.analysis-container .table .tbody tr {
    cursor: pointer;
}

.analysis-container .table .tbody tr td:first-child,
.analysis-container .table .thead tr th:first-child {
    width: 40px;
}

.analysis-container .analysis-container-police .table .tbody tr td:nth-child(2),
.analysis-container .analysis-container-police .table .thead tr th:nth-child(2) {
    width: 80px;
}

.analysis-container .analysis-container-police .table .tbody tr td:nth-child(3),
.analysis-container .analysis-container-police .table .thead tr th:nth-child(3) {
   width: 64px;
}


.analysis-container .analysis-container-police .table .tbody tr td:nth-child(4),
.analysis-container .analysis-container-police .table .thead tr th:nth-child(4) {
    width: 100px;
}


.analysis-container .analysis-container-police .table .tbody tr td:nth-child(5),
.analysis-container .analysis-container-police .table .thead tr th:nth-child(5),
.analysis-container .analysis-container-owner .table .tbody tr td:nth-child(5),
.analysis-container .analysis-container-owner .table .thead tr th:nth-child(5),
.analysis-container .analysis-container-equipment .table .tbody tr td:nth-child(5),
.analysis-container .analysis-container-equipment .table .thead tr th:nth-child(5) {
    cursor: default;
}

.analysis-container .analysis-container-police .table .tbody tr input,
.analysis-container .analysis-container-owner .table .tbody tr input,
.analysis-container .analysis-container-equipment .table .tbody tr input {
    width: 42px;
    height: 20px;
    line-height: 20px;
    color: #fff;
    background: #377DFF;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    vertical-align: middle;
}

.analysis-container .analysis-container-equipment .table .tbody tr td:nth-child(2),
.analysis-container .analysis-container-equipment .table .thead tr th:nth-child(2) {
    width: 68px;
}

.analysis-container .analysis-container-equipment .table .tbody tr td:nth-child(4),
.analysis-container .analysis-container-equipment .table .thead tr th:nth-child(4) {
    width: 68px;
}

.client-max-map{
    width: calc(100% - 360px) !important;
    left: 360px !important;
}

 public/map/widgets/supervisoryMap/SupervisoryMap.js

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

    heatmapfeatureLayer: null,//liu热力图
    // 保留添加实体图层的变量
    addEntitys: null,
    entitysData: [],
@@ -190,6 +190,456 @@
    getQueryStringByKey: function (key) {
      return (document.location.search.match(new RegExp("(?:^\\?|&)" + key + "=(.*?)(?=&|$)")) || ['', null])[1];
    },
    entityData: [],
    //左侧控制栏
    analysisAddEntitys: null,
    constructor: function (options, srcRefNode) {
      this._map = options.map;
      objThis = this;


      this.analysisAddEntitys = new GraphicsLayer({ id: 'analysisAddEntitys' });
      // this.addOneEntitys = new GraphicsLayer({ id: 'addOneEntitys' });
      // this.addTwoEntitys = new GraphicsLayer({ id: 'addTwoEntitys' });
      // this.addThreeEntitys = new GraphicsLayer({ id: 'addThreeEntitys' });

      this._map.addLayer(this.analysisAddEntitys);
      this._map.addLayer(this.addOneEntitys);
    },
    startup: function () {
      objThis._map.addLayer(objThis._siteLayer);
      var that = this;
      that.getEquipmentTable($('.analysis-container-equipment').find('.tbody tbody'),'');
      // 顶部tab得切换事件
      $('.analysis-and-judgment-tab li').click(function () {
        // if (that.tabIndex == $(this).index()) return;
        // if ($(this).index() == 1) { return };
        // if ($(this).index() == 2) { return };

        if (that.entitysData.length > 0) {
          that.analysisAddEntitys.clear();
          that.entitysData = [];
        }

        if (that.heatmapfeatureLayer_1.graphics.length > 0) {
          that.heatmapfeatureLayer_1.clear();
          that.heatmapfeatureLayer_1.setRenderer();
          $('.analysis-category input').prop('checked', false);
        }


        $(this).addClass('on').siblings().removeClass('on');
        var ind = $(this).index();
        $($('.analysis-container > div')[ind]).stop().show().siblings().stop().hide();
        var overText = $('#policeCategory > div:eq(0)').text().trim() == '全部' ? '' : $('#policeCategory > div:eq(0)').text().trim();
        var levelText = $('#policeArea > div:eq(0)').text().trim() == '全部' ? '' : $('#policeArea > div:eq(0)').attr('areaid');
        if (ind == 0) {
          that.getArea($('#policeArea'));
          that.getPoliceTableAnalysis($($('.analysis-container > div')[ind]).find('.tbody tbody'),
            $('#analysis_select_time_start').val() + ':00',
            $('#analysis_select_time_end').val() + ':00', overText, levelText)
        } else if (ind == 1) {
          that.getOwnerType($('#ownerCategory'));
          that.getOwnerDj($('#ownerLevel'), '');
          that.getOwnerTable($($('.analysis-container > div')[ind]).find('.tbody tbody'), '', '');
        } else if (ind == 2) {
          that.getEquipmentTable($($('.analysis-container > div')[ind]).find('.tbody tbody'), '');
        }

        that.tabIndex = $(this).index();
      })

      // 时间查询
      $('#policeSelectTime').off('click').click(function () {

        var times = $(this).prevAll();

        layui.use('layer', function () {

          var layer = layui.layer;
          // 开始时间
          var startTime = $(times[2]).val();
          // 结束时间
          var endTime = $(times[0]).val();

          if (startTime == '') {

            layer.msg('请选择开始时间！', {
              icon: 5,
              time: 2000 //2秒关闭（如果不配置，默认是3秒）
            });
            return;

          } else {

            if (endTime == '') {
              layer.msg('请选择结束时间！', {
                icon: 5,
                time: 2000 //2秒关闭（如果不配置，默认是3秒）
              });
              return;
            } else {

              var text = $('#policeCategory div:eq(0)').text().trim();

              var levelText = $('#policeArea > div:eq(0)').text().trim() == '全部' ? '' : $('#policeArea > div:eq(0)').attr('areaid');
              that.getPoliceTableAnalysis($('.analysis-container-police').find('.tbody tbody'), startTime, endTime, text == '全部' ? '' : text, levelText);

            }

          }

        })




      })

      // 警情列表中的点击事件
      $('.analysis-container-police .analysis-table-content .tbody').off('click', 'tr').on('click', 'tr', function () {
        var id = $(this).attr('term-list');
        var url = './popup/html/police-details.html?obj=' + id;
        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,
            maxmin: false, //开启最大化最小化按钮
            area: ['500px', '400px'],
            offset: 'auto',
            skin: 'police-details',
            content: url,
            closeBtn: 1,
          });
        })
      })
      $('.analysis-container-police .analysis-table-content .tbody').off('click', '.location').on('click', '.location', function (event) {
        event.stopPropagation();
      })
      $('.analysis-container-police .analysis-table-content .tbody').off('click', '.location input').on('click', '.location input', function (event) {
        event.stopPropagation();
        var lgtd = Number($(this).attr('lgtd'));
        var lttd = Number($(this).attr('lttd'));
        var position = new esri.geometry.Point(lgtd, lttd, new esri.SpatialReference({ wkid: 4326 }));//根据输入坐标信息找地图上的点
        that._map.centerAndZoom(position, 18);//缩放，10是缩放级别，可以自定义，数值越大缩放越大
      })

      // 业主列表中的点击事件
      $('.analysis-container-owner .analysis-table-content .tbody').off('click', 'tr').on('click', 'tr', function () {
        var id = $(this).attr('term-list');
        var url = './popup/html/owner-details.html?id=' + id;
        layui.use('layer', function () {
          that.layuiLayer = layui.layer;
          that.layuiLayer.config({
            extend: 'myskin/owner-details.css'
          });
          that.layuiLayer.close(that.layuiLayer.index);
          that.layuiLayer.open({
            title: '业主详情',
            type: 2,
            shadeClose: true,
            shade: false,
            maxmin: false, //开启最大化最小化按钮
            area: ['500px', '340px'],
            offset: 'auto',
            skin: 'owner-details',
            content: url,
            closeBtn: 1,
          });
        })
      })
      $('.analysis-container-owner .analysis-table-content .tbody').off('click', '.location').on('click', '.location', function (event) {
        event.stopPropagation();
      })
      $('.analysis-container-owner .analysis-table-content .tbody').off('click', '.location input').on('click', '.location input', function (event) {
        event.stopPropagation();
        var lgtd = Number($(this).attr('lgtd'));
        var lttd = Number($(this).attr('lttd'));
        var position = new esri.geometry.Point(lgtd, lttd, new esri.SpatialReference({ wkid: 4326 }));//根据输入坐标信息找地图上的点
        that._map.centerAndZoom(position, 18);//缩放，10是缩放级别，可以自定义，数值越大缩放越大
      })

      // 设备列表中的点击事件
      $('.analysis-container-equipment .analysis-table-content .tbody').off('click', 'tr').on('click', 'tr', function () {
        var id = $(this).attr('term-listid');
        var url = './popup/html/equipment-details.html?obj=' + id;
        layui.use('layer', function () {
          that.layuiLayer = layui.layer;
          that.layuiLayer.config({
            extend: 'myskin/equipment-details.css'
          });
          that.layuiLayer.close(that.layuiLayer.index);
          that.layuiLayer.open({
            title: '警情详情',
            type: 2,
            shadeClose: true,
            shade: false,
            maxmin: false, //开启最大化最小化按钮
            area: ['520px', '320px'],
            offset: 'auto',
            skin: 'equipment-details',
            content: url,
            closeBtn: 1,
          });
        })
      })
      $('.analysis-container-equipment .analysis-table-content .tbody').off('click', '.location').on('click', '.location', function (event) {
        event.stopPropagation();
      })
      $('.analysis-container-equipment .analysis-table-content .tbody').off('click', '.location input').on('click', '.location input', function (event) {
        event.stopPropagation();
        var lgtd = Number($(this).attr('lgtd'));
        var lttd = Number($(this).attr('lttd'));
        var position = new esri.geometry.Point(lgtd, lttd, new esri.SpatialReference({ wkid: 4326 }));//根据输入坐标信息找地图上的点
        that._map.centerAndZoom(position, 18);//缩放，10是缩放级别，可以自定义，数值越大缩放越大
      })

      // 警情列表中得热力图是否选中事件
      $('#policeHeatMap').click(function () {
        that.checkBoxSelect(this);
      })
      // 业主信息列表中得热力图是否选中事件
      $('#ownerHeatMap').click(function () {
        that.checkBoxSelect(this);
      })
      // 设备信息列表的热力图是否选中事件
      $('#equipmentHeatMap').click(function () {
        that.checkBoxSelect(this);
      })
      // 警情信息中类别移入事件
      $('#policeCategory').mouseenter(function () {
        if ($('#policeCategory .select-list').is(':hidden')) {
          $('#policeCategory .select-list').stop().slideDown(0);
        }
      })
      // 警情信息中得类别移出事件
      $('#policeCategory').mouseleave(function () {
        if (!$('#policeCategory .select-list').is(':hidden')) {
          $('#policeCategory .select-list').stop().slideUp(0);
        }
      })
      // 警情信息中行政区移入事件
      $('#policeArea').mouseenter(function () {
        if ($('#policeArea .select-list').is(':hidden')) {
          $('#policeArea .select-list').stop().slideDown(0);
        }
      })
      // 警情信息中得行政区移出事件
      $('#policeArea').mouseleave(function () {
        if (!$('#policeArea .select-list').is(':hidden')) {
          $('#policeArea .select-list').stop().slideUp(0);
        }
      })
      // 业主信息中类别移入事件
      $('#ownerCategory').mouseenter(function () {
        if ($('#ownerCategory .select-list').is(':hidden')) {
          $('#ownerCategory .select-list').stop().slideDown(0);
        }
      })
      // 业主信息中得类别移出事件
      $('#ownerCategory').mouseleave(function () {
        if (!$('#ownerCategory .select-list').is(':hidden')) {
          $('#ownerCategory .select-list').stop().slideUp(0);
        }
      })
      // 业主信息中的等级移入事件
      $('#ownerLevel').mouseenter(function () {
        if ($('#ownerLevel .select-list').is(':hidden')) {
          $('#ownerLevel .select-list').stop().slideDown(0);
        }
      })
      // 业主信息中的等级移出事件
      $('#ownerLevel').mouseleave(function () {
        if (!$('#ownerLevel .select-list').is(':hidden')) {
          $('#ownerLevel .select-list').stop().slideUp(0);
        }
      })
      // 设备信息中类别移入事件
      $('#equipmentCategory').mouseenter(function () {
        if ($('#equipmentCategory .select-list').is(':hidden')) {
          $('#equipmentCategory .select-list').stop().slideDown(0);
        }
      })
      // 设备信息中得类别移出事件
      $('#equipmentCategory').mouseleave(function () {
        if (!$('#equipmentCategory .select-list').is(':hidden')) {
          $('#equipmentCategory .select-list').stop().slideUp(0);
        }
      })
      //  警情信息类，业主信息类，设备信息类别，具体项的点击事件
      $('.analysis-container > div .select-list').off('click', 'li').on('click', 'li', function (event) {
        // console.log(event.currentTarget.innerHTML,'innerhtml')
        var text = $(this).text().trim();
        // console.log(text,'text()')
        // console.log(that.tabIndex,'tabIndex')

        $(this).parent().parent().prev().html(text + '<i></i>');
        $(this).parent().parent().stop().slideUp(0);

        if ($(this).attr('areaid')) {
          $(this).parent().parent().prev().attr('areaid', $(this).attr('areaid'));
        } else if ($(this).attr('ownerid')) {
          $(this).parent().parent().prev().attr('ownerid', $(this).attr('ownerid'));
        }


        if (that.tabIndex == 1) {

          var levelText = $('#policeArea > div:eq(0)').text().trim() == '全部' ? '' : $('#policeArea > div:eq(0)').attr('areaid');
          var overText = $('#policeCategory > div:eq(0)').text().trim() == '全部' ? '' : $('#policeCategory > div:eq(0)').text().trim();

          if ($(this).attr('areaid')) {
            that.getPoliceTableAnalysis($('.analysis-container-police').find('.tbody tbody'), $('#analysis_select_time_start').val(), $('#analysis_select_time_end').val(), overText, levelText);
          } else {
            that.getPoliceTableAnalysis($('.analysis-container-police').find('.tbody tbody'), $('#analysis_select_time_start').val(), $('#analysis_select_time_end').val(), overText, levelText);
          }


        } else if (that.tabIndex == 2) {
          var categoryText = $('#ownerCategory > div:eq(0)').text().trim() == '全部' ? '' : $('#ownerCategory > div:eq(0)').attr('ownerid');
          var levelText = $('#ownerLevel > div:eq(0)').text().trim() == '全部' ? '' : $('#ownerLevel > div:eq(0)').text().trim();

          var parentId = $(this).parent().parent().parent().attr('id');
          if (parentId == 'ownerCategory') {
            that.getOwnerDj($('#ownerLevel'), categoryText);
            that.getOwnerTable($('.analysis-container-owner').find('.tbody tbody'), categoryText, '');
          } else {
            that.getOwnerTable($('.analysis-container-owner').find('.tbody tbody'), categoryText, levelText);
          }

        } else if (that.tabIndex == 0) {
          that.getEquipmentTable($('.analysis-container-equipment').find('.tbody tbody'), text == '全部' ? '' : text);
        }

      })
    },
    getArea: function (dom) {
      dom.children('.select-list').children('ul').empty();
      dom.children('.select-list').children('ul').append($("<li areaid='all'>全部</li>"));
      var that = this;
      $.ajax({
        url: 'https://web.byisf.com/api/blade-system/region/select?code=3601',
        type: 'GET',
        dataType: 'JSON',
        success: function (data) {
          var res = data.data;
          for (var i = 0; i < res.length; i++) {
            dom.children('.select-list').children('ul').append($("<li areaid=" + res[i].code + ">" + res[i].name + "</li>"));
          }
        }
      })
    },
    getPoliceTableAnalysis: function (dom, beginTime, endTime, waringType, addvcd) {
      dom.empty();
      var that = this;
      $.ajax({
        url: "https://web.byisf.com/api/blade-jfpts/alarm/alarm/page?current=1&size=99999&waringType=&beginTime=" + beginTime + "&endTime=" + endTime + "&province=36&city=3601&district=" + addvcd,
        type: 'get',
        dataType: 'JSON',
        success: function (data) {
          var result = data.data.records;
          var str = '';
          that.entitysData = [];
          that.analysisAddEntitys.clear();
          for (var a, time, t, e, y, h, i = 0; i < result.length; i++) {

            if (result[i].waringType == "紧急求救") {
              result[i].waringType = "一键求助"
            }

            that.createEntitysAnalysis(that.analysisAddEntitys, that.entitysData, '警情信息', {
              lgtd: result[i].jd,
              lttd: result[i].wd,
              id: result[i].id
            }, result[i].jd, result[i].wd, './images/police-situation.png');

            t = result[i].alarmTime.substr(0, 10);
            e = result[i].alarmTime.substr(11);
            time = t + '&nbsp;' + e;
            y = result[i].alarmTime.substr(5, 5);
            h = result[i].alarmTime.substr(11, 5);
            a = Number(i) + 1;
            str += '<tr term-list=' + result[i].id + '>';
            str += '<td>' + a + '</td>';
            str += '<td title=' + result[i].waringType + '>' + result[i].waringType + '</td>';
            str += '<td title=' + result[i].alarmPeople + '>' + result[i].alarmPeople + '</td>';
            str += "<td><a href='javascript:;' title=" + time + ">" + y + ' ' + h + "</a></td>";
            str += "<td class='location'> <input type='button' value='定位'" + ' lgtd=' + result[i].jd + ' lttd=' + result[i].wd + "></td>";
            str += '</tr>';
            dom.append(str);
            str = '';


          }

          for (var i = 0; i < 1000; i++) {
            var dd = Math.random();
            var cc = Math.random();
          }
        }
      })
    },
    // 获取设备信息列表
    getEquipmentTable: function (dom, deviceType) {
      dom.empty();
      var that = this;
      // console.log(dom, deviceType);
      // dom.append(deviceType);
      $.ajax({
        url: '/api/blade-jfpts/equipment/equipment/selectList?deviceType=' + deviceType,
        type: 'GET',
        dataType: 'JSON',
        success: function (data) {
          var result = data.data;
          var str = '';
          that.entitysData = [];
          that.analysisAddEntitys.clear();
          for (var a, i = 0; i < result.length; i++) {


            that.createEntitysAnalysis(that.analysisAddEntitys, that.entitysData, '设备信息', {
              lgtd: result[i].jd,
              lttd: result[i].wd,
              id: result[i].id
            }, result[i].jd, result[i].wd, './images/ceshi.png');

            a = Number(i) + 1;
            str += "<tr term-listid=" + result[i].id + ">";
            str += '<td>' + a + '</td>';
            str += '<td title=' + result[i].deviceName + '>' + result[i].deviceName + '</td>';
            str += '<td title=' + result[i].deviceType + '>' + result[i].deviceType + '</td>';
            str += '<td>' + result[i].deviceNumber + '</td>';
            str += "<td class='location'> <input type='button' value='定位'" + ' lgtd=' + result[i].jd + ' lttd=' + result[i].wd + "></td>";
            str += '</tr>';
            dom.append(str);
            str = '';
          }


        }
      })
    },
    // 创建实体图层
    createEntitysAnalysis: function (entitys, entityContent, name, item, lgtd, lttd, outlineColors) {

      var symbol = new esri.symbol.PictureMarkerSymbol(outlineColors, 16, 16);
      symbol.name = name;
      var pt = new Point(lgtd, lttd, new SpatialReference({ wkid: 4326 }));
      pt.entityData = item;
      var graphic = new esri.Graphic(pt, symbol);
      entitys.add(graphic);


      entityContent.push(item);
  },
    //左侧控制栏↑

    open: function () {
      var that = this;
@@ -198,18 +648,123 @@
        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.push({
              lgtd: Number(datas[i].jd),
              lttd: Number(datas[i].wd)
            })
          }
          that.flareClusterLayer(datas);
          
          that.heatmapfeatureLayer = that.heatmFeaLayers();
          that._map.addLayer(that.heatmapfeatureLayer);
          // that.checkBoxSelect();//左侧控制热力图重复
        }
      })
      var that = this;
      var intTime = () => {
        var time = this.getTime();
        $("#tabcontainer").css("width", "360px");
        $('#mapcontentClass').addClass('client-max-map'); //追加样式
        AppEvent.dispatchAppEvent(AppEvent.APPLICATION_RESIZE, {});

        that.tabIndex = 0;
        $('.analysis-and-judgment-tab li:eq(0)').addClass('on').siblings().removeClass('on');
        $($('.analysis-container > div')[0]).stop().show().siblings().stop().hide();

        that.heatmapfeatureLayer_1 = that.heatmFeaLayers();

        that._map.addLayer(that.heatmapfeatureLayer_1);
        $('#analysis_select_time_start').val(time.tomorrow);
        $('#analysis_select_time_end').val(time.current);

        layui.use('laydate', function () {
          that.layuiLadate = layui.laydate;
          //执行一个laydate实例 开始
          that.layuiLadate.render({
            elem: '#analysis_select_time_start', //指定元素
            type: "datetime",
            format: 'yyyy-MM-dd HH:mm',
            trigger: 'click'
          });
          // 结束
          that.layuiLadate.render({
            elem: '#analysis_select_time_end', //指定元素
            type: "datetime",
            format: 'yyyy-MM-dd HH:mm',
            trigger: 'click'
          });
        });
        that.getArea($('#policeArea'));
        that.getPoliceTableAnalysis($('.analysis-container-police').find('.tbody tbody'), time.tomorrow, time.current, '', '');
        that.clickHand();

      }
      intTime();
    },
    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: 100,
          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 () {

    },
@@ -283,15 +838,17 @@
    },

    clickHand: function (e) {//top点击事件，导航
      console.log(e);
    }, 
      // 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,10 +865,10 @@
        displaySingleFlaresAtCount: displaySingleFlaresAtCount,
        flareShowMode: "mouse",
        preClustered: preClustered,
        clusterRatio: 75,
        clusterRatio: 120,
        clusterAreaDisplay: areaDisplayMode,
        clusteringBegin: function (e) {
          console.log(e, "clustering begin");
          // console.log("clustering begin");
        },
        clusteringComplete: function () {
          console.log("clustering complete");
@@ -336,20 +893,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
        }
        ]
      });


 public/map/widgets/supervisoryMap/template.html

@@ -1 +1,252 @@
<div></div>
<div class='analysis-and-judgment' open-li='analysis-and-judgment'>
    <ul class='analysis-and-judgment-tab'>
        <li>设备信息</li>
        <li class='on'>警情信息</li>
        <li class='on'>业主信息</li>
    </ul>
    <!-- 展示分析研判 -->
    <div class="analysis-container">
        <!-- 设备信息 -->
        <div class="analysis-container-equipment">
            <div class="analysis-category">
                <ul>
                    <li id='equipmentCategory'>
                        类型：
                        <div>
                            全部

                            <i>

                            </i>
                        </div>
                        <div class='select-list'>
                            <ul>
                                <li>全部</li>
                                <li>一体化摄像头</li>
                                <li>普通枪式摄像头</li>
                                <li>红外夜视防水型摄像头</li>
                                <li>球型摄像头</li>
                                <li>高速球</li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <input type="checkbox" id='equipmentHeatMap'> 热力图
                    </li>
                </ul>
            </div>
            <div class='analysis-table-content'>
                <div class="table">
                    <div class="thead">
                        <table>
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>设备名称</th>
                                    <th>设备类型</th>
                                    <th>设备编码</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="tbody">
                        <table>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- 警情信息 -->
        <div class="analysis-container-police">
            <div class="analysis-category">
                <ul>
                    <li id='policeCategory'>
                        类型：
                        <div>
                            全部
                            <i>

                            </i>
                        </div>
                        <div class='select-list'>
                            <ul>
                                <li>全部</li>
                                <li>一键求助</li>
                            </ul>
                        </div>
                    </li>
                    <li id='policeArea'>
                        区：
                        <div>
                            全部
                            <i>

                            </i>
                        </div>
                        <div class='select-list'>
                            <ul>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <input type="checkbox" id='policeHeatMap'> 热力图
                    </li>
                </ul>
            </div>
            <div class='analysis-selection-criteria'>
                <input type="text" id='analysis_select_time_start' readonly> <span>-</span> <input type="text" id='analysis_select_time_end' readonly>
                <input type="button" value='查询' id='policeSelectTime'>
            </div>
            <div class='analysis-table-content'>
                <div class="table">
                    <div class="thead">
                        <table>
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>类别</th>
                                    <th>接警员</th>
                                    <th>日期</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="tbody">
                        <table>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- 业主信息 -->
        <div class="analysis-container-owner">
            <div class="analysis-category">
                <ul>
                    <li id='ownerCategory'>
                        类型：
                        <div>
                            全部

                            <i>

                            </i>
                        </div>
                        <div class='select-list'>
                            <ul>
                           
                            </ul>
                        </div>
                    </li>
                    <li>
                        <input type="checkbox" id='ownerHeatMap'> 热力图
                    </li>
                </ul>
            </div>
            <div class="analysis-level">
                <ul>
                    <li id='ownerLevel'>
                        等级：
                        <div>
                            全部

                            <i>

                            </i>
                        </div>
                        <div class='select-list'>
                            <ul>
                        
                            </ul>
                        </div>
                    </li>
                    <li>
                        <!-- 级别 -->
                    </li>
                </ul>
            </div>

            <div class='analysis-table-content'>
                <div class="table">
                    <div class="thead">
                        <table>
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>类别</th>
                                    <th>等级</th>
                                    <th>名称</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="tbody">
                        <table>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- 设备信息
        <div class="analysis-container-equipment">
            <div class="analysis-category">
                <ul>
                    <li id='equipmentCategory'>
                        类型：
                        <div>
                            全部

                            <i>

                            </i>
                        </div>
                        <div class='select-list'>
                            <ul>
                                <li>全部</li>
                                <li>一体化摄像头</li>
                                <li>普通枪式摄像头</li>
                                <li>红外夜视防水型摄像头</li>
                                <li>球型摄像头</li>
                                <li>高速球</li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <input type="checkbox" id='equipmentHeatMap'> 热力图
                    </li>
                </ul>
            </div>
            <div class='analysis-table-content'>
                <div class="table">
                    <div class="thead">
                        <table>
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>设备名称</th>
                                    <th>设备类型</th>
                                    <th>设备编码</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="tbody">
                        <table>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div> -->
    </div>
</div>

 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

@@ -211,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: '在线'
                }
            ],

 src/views/policeTracking/policeTracking.vue

@@ -295,6 +295,31 @@
              class="el-collapse-item__header focusing is-active"
            >
              <div class="avue-group__header avue-group">
                <i class="el-icon-document avue-group__icon"></i>
                <h1 class="avue-group__title">对讲信息</h1>
              </div>
            </div>
          </div>

          <el-card class="receiving-alarm-box">
            <div v-for="(item, index) in audios" :key="index" style="margin: 10px 0; width: 100%; height: 40px;">
              <audio :src="item.address" style="width: 40%; height: 100%;"  controls></audio>
            </div>
          </el-card>

          <div
            style="margin-top: 20px"
            role="tab"
            aria-expanded="true"
            aria-controls="el-collapse-content-823"
            aria-describedby="el-collapse-content-823"
          >
            <div
              role="button"
              tabindex="0"
              class="el-collapse-item__header focusing is-active"
            >
              <div class="avue-group__header avue-group">
                <i class="el-icon-s-custom avue-group__icon"></i>
                <h1 class="avue-group__title">保安信息</h1>
              </div>
@@ -608,6 +633,7 @@
      baseUrl: "",
      oldVideoSatart: false,
      vaddress: null,
      audios: [],
    };
  },
  created() {
@@ -618,7 +644,7 @@
  },
  mounted() {
    this.getList();

    this.getAudios();
    this.$refs.mapDiv.onload = () => {
      window.frames[0].init("AlertSecurity", {
        x: this.form.jd,
@@ -790,7 +816,9 @@
    getList() {
      var that = this;
      axios
        .get(`/api/blade-user/pages?current=1&size=9999&work_status=&deptId=${that.form.deptId}`)
        .get(
          `/api/blade-user/pages?current=1&size=9999&work_status=&deptId=${that.form.deptId}`
        )
        .then(function (res) {
          that.tableData = [];
          var i = 0;
@@ -849,6 +877,18 @@
        this.$refs.multipleTable.clearSelection();
      }
    },

    getAudios() {
      axios({
        method: "get",
        url: "/api/blade-jfpts/avideo/list",
        params: {
          jid: this.form.id,
        },
      }).then((resdata) => {
        this.audios = resdata.data.data.records;
      });
    },
  },
};
</script>

 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-12 17:28:33
 */
<template>
  <basic-container>
    <avue-crud
@@ -69,20 +63,23 @@
      </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"
                    size="small"
                    plain
                    icon="el-icon-pie-chart"
                    @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
@@ -413,7 +410,7 @@
    </el-drawer>
  </basic-container>
</template>

 
<script>
import { getList, remove, update, add, getclient } from "@/api/real/real";
import { mapGetters } from "vuex";
@@ -494,7 +491,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,
@@ -1128,18 +1125,26 @@
        };
      });
    },
    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 '';
      },
    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 = [
@@ -1467,30 +1472,66 @@
      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/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}`);
        });
    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}`);
      });
    },
    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 "";
    },
  },
};
</script>

 
<style>
.el-card__body .waringTypeClass {
  width: 12%;
@@ -1605,4 +1646,4 @@
.tabFontSize {
  font-size: 15px;
}
</style>
</style>

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>

			@@ -204,8 +204,10 @@
			var deptId = that.getQueryStringByKey('deptId');
			var oneId = that.getQueryStringByKey('oneId');

			that.createEntitys(that.addEntitys, lgtd, lttd, './images/real-time-callPolice-opcity.png');
			that.createTwinkleEntitys(that.addEntitys, lgtd, lttd, './images/real-time-callPolice-opcity.png');
			that.addPoint(that.addEntitys, lgtd, lttd, './images/jingbaored.png');


			$.ajax({
			url: "https://web.byisf.com/api/blade-user/pages?current=1&size=9999&work_status=&deptId=" + deptId,
			type: 'get',
			@@ -232,65 +234,83 @@
			close: function () {

			},
			// 获取当前时间，以及昨天现在的时间
			getTime: function getTime() {
			var timestamp = Date.parse(new Date());

			// 当前时间
			var currentTime = new Date(timestamp);
			// 年
			var currentY = currentTime.getFullYear();
			// 月
			var currentM = currentTime.getMonth() + 1 < 10 ? '0' + (currentTime.getMonth() + 1) : currentTime.getMonth() + 1;
			// 日
			var currentD = currentTime.getDate() < 10 ? '0' + currentTime.getDate() : currentTime.getDate();
			// 时
			var currentH = currentTime.getHours() < 10 ? '0' + currentTime.getHours() : currentTime.getHours();
			// 分
			var currentDd = currentTime.getMinutes() < 10 ? '0' + currentTime.getMinutes() : currentTime.getMinutes();
			// 明天
			var tomorrowTime = new Date(timestamp - 60 * 60 * 24 * 1000);
			// 年
			var tomorrowY = tomorrowTime.getFullYear();
			// 月
			var tomorrowM = tomorrowTime.getMonth() + 1 < 10 ? '0' + (tomorrowTime.getMonth() + 1) : tomorrowTime.getMonth() + 1;
			// 日
			var tomorrowD = tomorrowTime.getDate() < 10 ? '0' + tomorrowTime.getDate() : tomorrowTime.getDate();
			// 时
			var tomorrowH = tomorrowTime.getHours() < 10 ? '0' + tomorrowTime.getHours() : tomorrowTime.getHours();
			// 分
			var tomorrowDd = tomorrowTime.getMinutes() < 10 ? '0' + tomorrowTime.getMinutes() : tomorrowTime.getMinutes();
			return {
			current: currentY + '-' + currentM + '-' + currentD + ' ' + currentH + ':' + currentDd,
			tomorrow: tomorrowY + '-' + tomorrowM + '-' + tomorrowD + ' ' + tomorrowH + ':' + tomorrowDd,
			month: currentM + currentD
			};
			},

			// 创建实体图层
			createEntitys: function (entitys, entityContent, name, item, lgtd, lttd, outlineColors) {

			var symbol = new esri.symbol.PictureMarkerSymbol(outlineColors, 26, 26);
			symbol.name = name;
			var pt = new Point(lgtd, lttd, new esri.SpatialReference({
			wkid: 4326
			}));
			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, 32);
			symbol.xoffset = 0;
			symbol.yoffset = -2;
			var pt = new Point(lgtd, lttd, new SpatialReference({
			wkid: 4326
			}));
			var graphic = new esri.Graphic(pt, symbol);
			entitys.add(graphic);
			},
			/**
			* 添加实体的公共方法
			* @param {*} entitys 实体类
			* @param {Array} entityContent 存放每个点详细数据的数组
			* @param {string} name 实体的名字
			* @param {*} item 实体数据
			* @param {*} lgtd 经度
			* @param {*} lttd 纬度
			* @param {*} outlineColors 颜色
			*/
			createEntitys: function (entitys, lgtd, lttd, image) {

			var symbol = new esri.symbol.PictureMarkerSymbol(image, 44, 44);

			var width = 44;
			var height = 44;
			var pt = new Point(lgtd, lttd, new SpatialReference({
			wkid: 4326
			}));

			var graphic = new esri.Graphic(pt, symbol);

			setInterval(function () {
			if (width >= 60) {
			width = 44;
			height = 44;
			}
			width += 1;
			height += 1;
			symbol.width = width;
			symbol.height = height;
			graphic.setSymbol(symbol)
			entitys.add(graphic);
			}, 50)

			},
			/**
			* 添加闪烁实体的公共方法
			* @param {*} entitys 实体类
			* @param {*} lgtd 经度
			* @param {*} lttd 纬度
			* @param {*} color 颜色
			*/
			createTwinkleEntitys: function (entitys, lgtd, lttd, image, color) {
			var symbol = new esri.symbol.PictureMarkerSymbol(image, 64, 64);
			var width = 64;
			var height = 64;
			var pt = new Point(lgtd, lttd, new SpatialReference({
			wkid: 4326
			}));

			var graphic = new esri.Graphic(pt, symbol);

			setInterval(function () {
			if (width >= 80) {
			width = 64;
			height = 64;
			}
			width += 1;
			height += 1;
			symbol.width = width;
			symbol.height = height;
			graphic.setSymbol(symbol)
			entitys.add(graphic);
			}, 50)
			},

			addPoints: function (entitys, lgtd, lttd, img) {
			var symbol = new esri.symbol.PictureMarkerSymbol(img, 20, 20);

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

			@@ -0,0 +1,375 @@
			/* .analysis-and-judgment {
			display: none;
			} */

			div[open-li='analysis-and-judgment'] {
			box-sizing: border-box;
			}

			div[open-li='analysis-and-judgment']>ul {
			display: flex;
			height: 36px;
			line-height: 36px;
			}

			div[open-li='analysis-and-judgment']>ul>li {
			flex: 1;
			font-size: 15px;
			text-align: center;
			color: #7b7b7b;
			cursor: pointer;
			background: #E5E5E5;
			}

			div[open-li='analysis-and-judgment']>ul>li.on {
			color: #677788;
			background: #fff;
			}

			.analysis-and-judgment {
			width: 360px;
			height: calc(100%);
			background: rgb(255, 255, 255);
			}

			/* 分析研判内容容器 */
			.analysis-container {
			position: relative;
			height: calc(100% - 38px);
			font-size: 14px;
			}

			.analysis-container>div {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			}

			.analysis-container>div:nth-child(2) {
			display: none;
			}

			.analysis-container>div:nth-child(3) {
			display: none;
			}

			/* 类别选择，级别选择，以及热力图 */
			.analysis-container .analysis-category,
			.analysis-container .analysis-level {
			width: 100%;
			height: 40px;
			line-height: 40px;
			padding: 4px 6px 0 6px;
			box-sizing: border-box;
			color: #677788;
			}

			.analysis-container .analysis-category>ul,
			.analysis-container .analysis-level>ul {
			display: flex;
			height: 36px;
			line-height: 36px;
			align-items: center;
			}

			.analysis-container .analysis-category>ul>li,
			.analysis-container .analysis-level>ul>li {
			height: 36px;
			line-height: 36px;
			}

			.analysis-container .analysis-category>ul>li:first-child,
			.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2),
			.analysis-container .analysis-level>ul>li:first-child {
			margin-right: 4px;
			position: relative;
			padding-left: 4px;
			flex: 8;
			color: #677788;
			background: rgb(255, 255, 255);
			border: 1px solid rgba(231, 234, 243, 1);
			box-sizing: border-box;
			}

			.analysis-container .analysis-container-police .analysis-category>ul>li:first-child,
			.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) {
			flex: 4;
			}


			.analysis-container .analysis-category>ul>li:last-child,
			.analysis-container .analysis-level>ul>li:last-child {
			flex: 2;
			text-align: center;
			}

			.analysis-container .analysis-category>ul>li:last-child input,
			.analysis-container .analysis-level>ul>li:last-child input {
			vertical-align: middle;
			}

			/* 类别选择中得下拉框 */
			.analysis-container .analysis-category>ul>li:first-child div:first-child,
			.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) div:first-child,
			.analysis-container .analysis-level>ul>li:first-child div:first-child {
			position: absolute;
			top: 0;
			left: 30px;
			width: calc(100% - 30px);
			height: 34px;
			color: #677788;
			padding-left: 10px;
			box-sizing: border-box;
			cursor: pointer;

			}

			.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) div:first-child {
			left: 16px;
			width: calc(100% - 16px);
			}

			.analysis-container .analysis-category>ul>li:first-child div:first-child i,
			.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) div:first-child i,
			.analysis-container .analysis-level>ul>li:first-child div:first-child i {
			display: block;
			position: absolute;
			top: 50%;
			right: 4px;
			transform: translate(0, -50%);
			width: 10px;
			height: 10px;
			background: url('../../images/select-bg.png') repeat;
			background-size: 100% 100%;
			}

			.analysis-container .analysis-category>ul>li:first-child div:last-child,
			.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) div:last-child,
			.analysis-container .analysis-level>ul>li:first-child div:last-child {
			display: none;
			position: absolute;
			top: 35px;
			left: -1px;
			z-index: 10;
			width: calc(100% + 2px);
			}


			.analysis-container .analysis-category>ul>li:first-child ul,
			.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) ul,
			.analysis-container .analysis-level>ul>li:first-child ul {
			display: flex;
			flex-direction: column;
			width: 100%;
			max-height: 300px;
			height: auto;
			overflow-y: auto;
			overflow-x: hidden;
			border: 1px solid rgba(231, 234, 243, 1);
			border-top: none;
			box-sizing: border-box;

			}

			.analysis-container .analysis-category>ul>li:first-child ul li,
			.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) ul li,
			.analysis-container .analysis-level>ul>li:first-child ul li {
			flex: 1;
			padding-left: 10px;
			height: 34px;
			border-top: 1px solid rgba(231, 234, 243, 1);
			background: rgb(255, 255, 255);
			color: #677788;
			box-sizing: border-box;
			cursor: pointer;
			}

			.analysis-container .analysis-category>ul>li:first-child ul li:hover,
			.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) ul li:hover,
			.analysis-container .analysis-level>ul>li:first-child ul li:hover {
			color: #15a2fe;
			background: #beeeff;
			}

			.analysis-container .analysis-category>ul>li:first-child ul li:first-child,
			.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) ul li:first-child,
			.analysis-container .analysis-level>ul>li:first-child ul li:first-child {
			border: none;
			}

			/* 时间选择 */
			.analysis-container .analysis-selection-criteria {
			display: flex;
			padding: 4px 6px;
			width: 100%;
			height: 40px;
			line-height: 32px;
			color: #677788;
			box-sizing: border-box;
			}

			.analysis-container .analysis-selection-criteria input {
			border: 1px solid rgba(231, 234, 243, 0.7);
			}

			.analysis-container .analysis-selection-criteria input[type='text'] {
			width: 0;
			flex: 5;
			padding: 0 4px;
			color: #677788;
			cursor: pointer;
			background-color: #fff;
			background: url('../../images/laydata-bg.png') no-repeat;
			background-size: 18px 16px;
			background-position: 98% center;
			}

			.analysis-container .analysis-selection-criteria input[type='button'] {
			width: 0;
			flex: 2;
			color: #fff;
			background: #377DFF;
			cursor: pointer;
			}

			/* 显示信息得表格 */
			.analysis-container .analysis-container-police .analysis-table-content {
			height: calc(100% - 80px);
			}

			.analysis-container .analysis-container-owner .analysis-table-content {
			margin-top: 4px;
			height: calc(100% - 84px);
			}

			.analysis-container .analysis-container-equipment .analysis-table-content {
			margin-top: 4px;
			height: calc(100% - 44px);
			}

			.analysis-container .table {
			height: 100%;
			}

			.analysis-container .thead {
			height: 31px;
			}

			.analysis-container .table .tbody {
			height: calc(100% - 31px);
			overflow-y: auto;
			overflow-x: hidden;
			scrollbar-width: thin;
			}


			.analysis-container .table table {
			width: 360px;
			border-collapse: collapse;
			table-layout: fixed;
			box-sizing: border-box;

			}

			.analysis-container .table table tr {
			height: 30px;
			}

			.analysis-container .table table tr th,
			.analysis-container .table table tr td {
			margin: 0;
			padding: 0 4px;
			border: 1px solid rgba(231, 234, 243, 1);
			height: 30px;
			text-align: center;
			font-size: 14px;
			font-weight: 400;
			color: #677788;
			box-sizing: border-box;

			overflow: hidden;
			/超出的文字隐藏/
			text-overflow: ellipsis;
			/文字超出后,显示省略号/
			white-space: nowrap;
			/文字不换行/
			word-break: keep-all;
			/文字不换行/
			}

			.analysis-container .table table tr td a {
			color: #677788;
			cursor: default;
			}

			.analysis-container .table table tr:first-child td {
			border-top: none;

			}


			.analysis-container .table .tbody tr {
			cursor: pointer;
			}

			.analysis-container .table .tbody tr td:first-child,
			.analysis-container .table .thead tr th:first-child {
			width: 40px;
			}

			.analysis-container .analysis-container-police .table .tbody tr td:nth-child(2),
			.analysis-container .analysis-container-police .table .thead tr th:nth-child(2) {
			width: 80px;
			}

			.analysis-container .analysis-container-police .table .tbody tr td:nth-child(3),
			.analysis-container .analysis-container-police .table .thead tr th:nth-child(3) {
			width: 64px;
			}


			.analysis-container .analysis-container-police .table .tbody tr td:nth-child(4),
			.analysis-container .analysis-container-police .table .thead tr th:nth-child(4) {
			width: 100px;
			}


			.analysis-container .analysis-container-police .table .tbody tr td:nth-child(5),
			.analysis-container .analysis-container-police .table .thead tr th:nth-child(5),
			.analysis-container .analysis-container-owner .table .tbody tr td:nth-child(5),
			.analysis-container .analysis-container-owner .table .thead tr th:nth-child(5),
			.analysis-container .analysis-container-equipment .table .tbody tr td:nth-child(5),
			.analysis-container .analysis-container-equipment .table .thead tr th:nth-child(5) {
			cursor: default;
			}

			.analysis-container .analysis-container-police .table .tbody tr input,
			.analysis-container .analysis-container-owner .table .tbody tr input,
			.analysis-container .analysis-container-equipment .table .tbody tr input {
			width: 42px;
			height: 20px;
			line-height: 20px;
			color: #fff;
			background: #377DFF;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			vertical-align: middle;
			}

			.analysis-container .analysis-container-equipment .table .tbody tr td:nth-child(2),
			.analysis-container .analysis-container-equipment .table .thead tr th:nth-child(2) {
			width: 68px;
			}

			.analysis-container .analysis-container-equipment .table .tbody tr td:nth-child(4),
			.analysis-container .analysis-container-equipment .table .thead tr th:nth-child(4) {
			width: 68px;
			}

			.client-max-map{
			width: calc(100% - 360px) !important;
			left: 360px !important;
			}

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

			heatmapfeatureLayer: null,//liu热力图
			// 保留添加实体图层的变量
			addEntitys: null,
			entitysData: [],
			@@ -190,6 +190,456 @@
			getQueryStringByKey: function (key) {
			return (document.location.search.match(new RegExp("(?:^\\?\|&)" + key + "=(.*?)(?=&\|$)")) \|\| ['', null])[1];
			},
			entityData: [],
			//左侧控制栏
			analysisAddEntitys: null,
			constructor: function (options, srcRefNode) {
			this._map = options.map;
			objThis = this;


			this.analysisAddEntitys = new GraphicsLayer({ id: 'analysisAddEntitys' });
			// this.addOneEntitys = new GraphicsLayer({ id: 'addOneEntitys' });
			// this.addTwoEntitys = new GraphicsLayer({ id: 'addTwoEntitys' });
			// this.addThreeEntitys = new GraphicsLayer({ id: 'addThreeEntitys' });

			this._map.addLayer(this.analysisAddEntitys);
			this._map.addLayer(this.addOneEntitys);
			},
			startup: function () {
			objThis._map.addLayer(objThis._siteLayer);
			var that = this;
			that.getEquipmentTable($('.analysis-container-equipment').find('.tbody tbody'),'');
			// 顶部tab得切换事件
			$('.analysis-and-judgment-tab li').click(function () {
			// if (that.tabIndex == $(this).index()) return;
			// if ($(this).index() == 1) { return };
			// if ($(this).index() == 2) { return };

			if (that.entitysData.length > 0) {
			that.analysisAddEntitys.clear();
			that.entitysData = [];
			}

			if (that.heatmapfeatureLayer_1.graphics.length > 0) {
			that.heatmapfeatureLayer_1.clear();
			that.heatmapfeatureLayer_1.setRenderer();
			$('.analysis-category input').prop('checked', false);
			}


			$(this).addClass('on').siblings().removeClass('on');
			var ind = $(this).index();
			$($('.analysis-container > div')[ind]).stop().show().siblings().stop().hide();
			var overText = $('#policeCategory > div:eq(0)').text().trim() == '全部' ? '' : $('#policeCategory > div:eq(0)').text().trim();
			var levelText = $('#policeArea > div:eq(0)').text().trim() == '全部' ? '' : $('#policeArea > div:eq(0)').attr('areaid');
			if (ind == 0) {
			that.getArea($('#policeArea'));
			that.getPoliceTableAnalysis($($('.analysis-container > div')[ind]).find('.tbody tbody'),
			$('#analysis_select_time_start').val() + ':00',
			$('#analysis_select_time_end').val() + ':00', overText, levelText)
			} else if (ind == 1) {
			that.getOwnerType($('#ownerCategory'));
			that.getOwnerDj($('#ownerLevel'), '');
			that.getOwnerTable($($('.analysis-container > div')[ind]).find('.tbody tbody'), '', '');
			} else if (ind == 2) {
			that.getEquipmentTable($($('.analysis-container > div')[ind]).find('.tbody tbody'), '');
			}

			that.tabIndex = $(this).index();
			})

			// 时间查询
			$('#policeSelectTime').off('click').click(function () {

			var times = $(this).prevAll();

			layui.use('layer', function () {

			var layer = layui.layer;
			// 开始时间
			var startTime = $(times[2]).val();
			// 结束时间
			var endTime = $(times[0]).val();

			if (startTime == '') {

			layer.msg('请选择开始时间！', {
			icon: 5,
			time: 2000 //2秒关闭（如果不配置，默认是3秒）
			});
			return;

			} else {

			if (endTime == '') {
			layer.msg('请选择结束时间！', {
			icon: 5,
			time: 2000 //2秒关闭（如果不配置，默认是3秒）
			});
			return;
			} else {

			var text = $('#policeCategory div:eq(0)').text().trim();

			var levelText = $('#policeArea > div:eq(0)').text().trim() == '全部' ? '' : $('#policeArea > div:eq(0)').attr('areaid');
			that.getPoliceTableAnalysis($('.analysis-container-police').find('.tbody tbody'), startTime, endTime, text == '全部' ? '' : text, levelText);

			}

			}

			})




			})

			// 警情列表中的点击事件
			$('.analysis-container-police .analysis-table-content .tbody').off('click', 'tr').on('click', 'tr', function () {
			var id = $(this).attr('term-list');
			var url = './popup/html/police-details.html?obj=' + id;
			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,
			maxmin: false, //开启最大化最小化按钮
			area: ['500px', '400px'],
			offset: 'auto',
			skin: 'police-details',
			content: url,
			closeBtn: 1,
			});
			})
			})
			$('.analysis-container-police .analysis-table-content .tbody').off('click', '.location').on('click', '.location', function (event) {
			event.stopPropagation();
			})
			$('.analysis-container-police .analysis-table-content .tbody').off('click', '.location input').on('click', '.location input', function (event) {
			event.stopPropagation();
			var lgtd = Number($(this).attr('lgtd'));
			var lttd = Number($(this).attr('lttd'));
			var position = new esri.geometry.Point(lgtd, lttd, new esri.SpatialReference({ wkid: 4326 }));//根据输入坐标信息找地图上的点
			that._map.centerAndZoom(position, 18);//缩放，10是缩放级别，可以自定义，数值越大缩放越大
			})

			// 业主列表中的点击事件
			$('.analysis-container-owner .analysis-table-content .tbody').off('click', 'tr').on('click', 'tr', function () {
			var id = $(this).attr('term-list');
			var url = './popup/html/owner-details.html?id=' + id;
			layui.use('layer', function () {
			that.layuiLayer = layui.layer;
			that.layuiLayer.config({
			extend: 'myskin/owner-details.css'
			});
			that.layuiLayer.close(that.layuiLayer.index);
			that.layuiLayer.open({
			title: '业主详情',
			type: 2,
			shadeClose: true,
			shade: false,
			maxmin: false, //开启最大化最小化按钮
			area: ['500px', '340px'],
			offset: 'auto',
			skin: 'owner-details',
			content: url,
			closeBtn: 1,
			});
			})
			})
			$('.analysis-container-owner .analysis-table-content .tbody').off('click', '.location').on('click', '.location', function (event) {
			event.stopPropagation();
			})
			$('.analysis-container-owner .analysis-table-content .tbody').off('click', '.location input').on('click', '.location input', function (event) {
			event.stopPropagation();
			var lgtd = Number($(this).attr('lgtd'));
			var lttd = Number($(this).attr('lttd'));
			var position = new esri.geometry.Point(lgtd, lttd, new esri.SpatialReference({ wkid: 4326 }));//根据输入坐标信息找地图上的点
			that._map.centerAndZoom(position, 18);//缩放，10是缩放级别，可以自定义，数值越大缩放越大
			})

			// 设备列表中的点击事件
			$('.analysis-container-equipment .analysis-table-content .tbody').off('click', 'tr').on('click', 'tr', function () {
			var id = $(this).attr('term-listid');
			var url = './popup/html/equipment-details.html?obj=' + id;
			layui.use('layer', function () {
			that.layuiLayer = layui.layer;
			that.layuiLayer.config({
			extend: 'myskin/equipment-details.css'
			});
			that.layuiLayer.close(that.layuiLayer.index);
			that.layuiLayer.open({
			title: '警情详情',
			type: 2,
			shadeClose: true,
			shade: false,
			maxmin: false, //开启最大化最小化按钮
			area: ['520px', '320px'],
			offset: 'auto',
			skin: 'equipment-details',
			content: url,
			closeBtn: 1,
			});
			})
			})
			$('.analysis-container-equipment .analysis-table-content .tbody').off('click', '.location').on('click', '.location', function (event) {
			event.stopPropagation();
			})
			$('.analysis-container-equipment .analysis-table-content .tbody').off('click', '.location input').on('click', '.location input', function (event) {
			event.stopPropagation();
			var lgtd = Number($(this).attr('lgtd'));
			var lttd = Number($(this).attr('lttd'));
			var position = new esri.geometry.Point(lgtd, lttd, new esri.SpatialReference({ wkid: 4326 }));//根据输入坐标信息找地图上的点
			that._map.centerAndZoom(position, 18);//缩放，10是缩放级别，可以自定义，数值越大缩放越大
			})

			// 警情列表中得热力图是否选中事件
			$('#policeHeatMap').click(function () {
			that.checkBoxSelect(this);
			})
			// 业主信息列表中得热力图是否选中事件
			$('#ownerHeatMap').click(function () {
			that.checkBoxSelect(this);
			})
			// 设备信息列表的热力图是否选中事件
			$('#equipmentHeatMap').click(function () {
			that.checkBoxSelect(this);
			})
			// 警情信息中类别移入事件
			$('#policeCategory').mouseenter(function () {
			if ($('#policeCategory .select-list').is(':hidden')) {
			$('#policeCategory .select-list').stop().slideDown(0);
			}
			})
			// 警情信息中得类别移出事件
			$('#policeCategory').mouseleave(function () {
			if (!$('#policeCategory .select-list').is(':hidden')) {
			$('#policeCategory .select-list').stop().slideUp(0);
			}
			})
			// 警情信息中行政区移入事件
			$('#policeArea').mouseenter(function () {
			if ($('#policeArea .select-list').is(':hidden')) {
			$('#policeArea .select-list').stop().slideDown(0);
			}
			})
			// 警情信息中得行政区移出事件
			$('#policeArea').mouseleave(function () {
			if (!$('#policeArea .select-list').is(':hidden')) {
			$('#policeArea .select-list').stop().slideUp(0);
			}
			})
			// 业主信息中类别移入事件
			$('#ownerCategory').mouseenter(function () {
			if ($('#ownerCategory .select-list').is(':hidden')) {
			$('#ownerCategory .select-list').stop().slideDown(0);
			}
			})
			// 业主信息中得类别移出事件
			$('#ownerCategory').mouseleave(function () {
			if (!$('#ownerCategory .select-list').is(':hidden')) {
			$('#ownerCategory .select-list').stop().slideUp(0);
			}
			})
			// 业主信息中的等级移入事件
			$('#ownerLevel').mouseenter(function () {
			if ($('#ownerLevel .select-list').is(':hidden')) {
			$('#ownerLevel .select-list').stop().slideDown(0);
			}
			})
			// 业主信息中的等级移出事件
			$('#ownerLevel').mouseleave(function () {
			if (!$('#ownerLevel .select-list').is(':hidden')) {
			$('#ownerLevel .select-list').stop().slideUp(0);
			}
			})
			// 设备信息中类别移入事件
			$('#equipmentCategory').mouseenter(function () {
			if ($('#equipmentCategory .select-list').is(':hidden')) {
			$('#equipmentCategory .select-list').stop().slideDown(0);
			}
			})
			// 设备信息中得类别移出事件
			$('#equipmentCategory').mouseleave(function () {
			if (!$('#equipmentCategory .select-list').is(':hidden')) {
			$('#equipmentCategory .select-list').stop().slideUp(0);
			}
			})
			// 警情信息类，业主信息类，设备信息类别，具体项的点击事件
			$('.analysis-container > div .select-list').off('click', 'li').on('click', 'li', function (event) {
			// console.log(event.currentTarget.innerHTML,'innerhtml')
			var text = $(this).text().trim();
			// console.log(text,'text()')
			// console.log(that.tabIndex,'tabIndex')

			$(this).parent().parent().prev().html(text + '<i></i>');
			$(this).parent().parent().stop().slideUp(0);

			if ($(this).attr('areaid')) {
			$(this).parent().parent().prev().attr('areaid', $(this).attr('areaid'));
			} else if ($(this).attr('ownerid')) {
			$(this).parent().parent().prev().attr('ownerid', $(this).attr('ownerid'));
			}


			if (that.tabIndex == 1) {

			var levelText = $('#policeArea > div:eq(0)').text().trim() == '全部' ? '' : $('#policeArea > div:eq(0)').attr('areaid');
			var overText = $('#policeCategory > div:eq(0)').text().trim() == '全部' ? '' : $('#policeCategory > div:eq(0)').text().trim();

			if ($(this).attr('areaid')) {
			that.getPoliceTableAnalysis($('.analysis-container-police').find('.tbody tbody'), $('#analysis_select_time_start').val(), $('#analysis_select_time_end').val(), overText, levelText);
			} else {
			that.getPoliceTableAnalysis($('.analysis-container-police').find('.tbody tbody'), $('#analysis_select_time_start').val(), $('#analysis_select_time_end').val(), overText, levelText);
			}


			} else if (that.tabIndex == 2) {
			var categoryText = $('#ownerCategory > div:eq(0)').text().trim() == '全部' ? '' : $('#ownerCategory > div:eq(0)').attr('ownerid');
			var levelText = $('#ownerLevel > div:eq(0)').text().trim() == '全部' ? '' : $('#ownerLevel > div:eq(0)').text().trim();

			var parentId = $(this).parent().parent().parent().attr('id');
			if (parentId == 'ownerCategory') {
			that.getOwnerDj($('#ownerLevel'), categoryText);
			that.getOwnerTable($('.analysis-container-owner').find('.tbody tbody'), categoryText, '');
			} else {
			that.getOwnerTable($('.analysis-container-owner').find('.tbody tbody'), categoryText, levelText);
			}

			} else if (that.tabIndex == 0) {
			that.getEquipmentTable($('.analysis-container-equipment').find('.tbody tbody'), text == '全部' ? '' : text);
			}

			})
			},
			getArea: function (dom) {
			dom.children('.select-list').children('ul').empty();
			dom.children('.select-list').children('ul').append($("<li areaid='all'>全部</li>"));
			var that = this;
			$.ajax({
			url: 'https://web.byisf.com/api/blade-system/region/select?code=3601',
			type: 'GET',
			dataType: 'JSON',
			success: function (data) {
			var res = data.data;
			for (var i = 0; i < res.length; i++) {
			dom.children('.select-list').children('ul').append($("<li areaid=" + res[i].code + ">" + res[i].name + "</li>"));
			}
			}
			})
			},
			getPoliceTableAnalysis: function (dom, beginTime, endTime, waringType, addvcd) {
			dom.empty();
			var that = this;
			$.ajax({
			url: "https://web.byisf.com/api/blade-jfpts/alarm/alarm/page?current=1&size=99999&waringType=&beginTime=" + beginTime + "&endTime=" + endTime + "&province=36&city=3601&district=" + addvcd,
			type: 'get',
			dataType: 'JSON',
			success: function (data) {
			var result = data.data.records;
			var str = '';
			that.entitysData = [];
			that.analysisAddEntitys.clear();
			for (var a, time, t, e, y, h, i = 0; i < result.length; i++) {

			if (result[i].waringType == "紧急求救") {
			result[i].waringType = "一键求助"
			}

			that.createEntitysAnalysis(that.analysisAddEntitys, that.entitysData, '警情信息', {
			lgtd: result[i].jd,
			lttd: result[i].wd,
			id: result[i].id
			}, result[i].jd, result[i].wd, './images/police-situation.png');

			t = result[i].alarmTime.substr(0, 10);
			e = result[i].alarmTime.substr(11);
			time = t + ' ' + e;
			y = result[i].alarmTime.substr(5, 5);
			h = result[i].alarmTime.substr(11, 5);
			a = Number(i) + 1;
			str += '<tr term-list=' + result[i].id + '>';
			str += '<td>' + a + '</td>';
			str += '<td title=' + result[i].waringType + '>' + result[i].waringType + '</td>';
			str += '<td title=' + result[i].alarmPeople + '>' + result[i].alarmPeople + '</td>';
			str += "<td><a href='javascript:;' title=" + time + ">" + y + ' ' + h + "</a></td>";
			str += "<td class='location'> <input type='button' value='定位'" + ' lgtd=' + result[i].jd + ' lttd=' + result[i].wd + "></td>";
			str += '</tr>';
			dom.append(str);
			str = '';


			}

			for (var i = 0; i < 1000; i++) {
			var dd = Math.random();
			var cc = Math.random();
			}
			}
			})
			},
			// 获取设备信息列表
			getEquipmentTable: function (dom, deviceType) {
			dom.empty();
			var that = this;
			// console.log(dom, deviceType);
			// dom.append(deviceType);
			$.ajax({
			url: '/api/blade-jfpts/equipment/equipment/selectList?deviceType=' + deviceType,
			type: 'GET',
			dataType: 'JSON',
			success: function (data) {
			var result = data.data;
			var str = '';
			that.entitysData = [];
			that.analysisAddEntitys.clear();
			for (var a, i = 0; i < result.length; i++) {


			that.createEntitysAnalysis(that.analysisAddEntitys, that.entitysData, '设备信息', {
			lgtd: result[i].jd,
			lttd: result[i].wd,
			id: result[i].id
			}, result[i].jd, result[i].wd, './images/ceshi.png');

			a = Number(i) + 1;
			str += "<tr term-listid=" + result[i].id + ">";
			str += '<td>' + a + '</td>';
			str += '<td title=' + result[i].deviceName + '>' + result[i].deviceName + '</td>';
			str += '<td title=' + result[i].deviceType + '>' + result[i].deviceType + '</td>';
			str += '<td>' + result[i].deviceNumber + '</td>';
			str += "<td class='location'> <input type='button' value='定位'" + ' lgtd=' + result[i].jd + ' lttd=' + result[i].wd + "></td>";
			str += '</tr>';
			dom.append(str);
			str = '';
			}


			}
			})
			},
			// 创建实体图层
			createEntitysAnalysis: function (entitys, entityContent, name, item, lgtd, lttd, outlineColors) {

			var symbol = new esri.symbol.PictureMarkerSymbol(outlineColors, 16, 16);
			symbol.name = name;
			var pt = new Point(lgtd, lttd, new SpatialReference({ wkid: 4326 }));
			pt.entityData = item;
			var graphic = new esri.Graphic(pt, symbol);
			entitys.add(graphic);


			entityContent.push(item);
			},
			//左侧控制栏↑

			open: function () {
			var that = this;
			@@ -198,18 +648,123 @@
			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.push({
			lgtd: Number(datas[i].jd),
			lttd: Number(datas[i].wd)
			})
			}
			that.flareClusterLayer(datas);

			that.heatmapfeatureLayer = that.heatmFeaLayers();
			that._map.addLayer(that.heatmapfeatureLayer);
			// that.checkBoxSelect();//左侧控制热力图重复
			}
			})
			var that = this;
			var intTime = () => {
			var time = this.getTime();
			$("#tabcontainer").css("width", "360px");
			$('#mapcontentClass').addClass('client-max-map'); //追加样式
			AppEvent.dispatchAppEvent(AppEvent.APPLICATION_RESIZE, {});

			that.tabIndex = 0;
			$('.analysis-and-judgment-tab li:eq(0)').addClass('on').siblings().removeClass('on');
			$($('.analysis-container > div')[0]).stop().show().siblings().stop().hide();

			that.heatmapfeatureLayer_1 = that.heatmFeaLayers();

			that._map.addLayer(that.heatmapfeatureLayer_1);
			$('#analysis_select_time_start').val(time.tomorrow);
			$('#analysis_select_time_end').val(time.current);

			layui.use('laydate', function () {
			that.layuiLadate = layui.laydate;
			//执行一个laydate实例开始
			that.layuiLadate.render({
			elem: '#analysis_select_time_start', //指定元素
			type: "datetime",
			format: 'yyyy-MM-dd HH:mm',
			trigger: 'click'
			});
			// 结束
			that.layuiLadate.render({
			elem: '#analysis_select_time_end', //指定元素
			type: "datetime",
			format: 'yyyy-MM-dd HH:mm',
			trigger: 'click'
			});
			});
			that.getArea($('#policeArea'));
			that.getPoliceTableAnalysis($('.analysis-container-police').find('.tbody tbody'), time.tomorrow, time.current, '', '');
			that.clickHand();

			}
			intTime();
			},
			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: 100,
			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 () {

			},
			@@ -283,15 +838,17 @@
			},

			clickHand: function (e) {//top点击事件，导航
			console.log(e);
			},
			// 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,10 +865,10 @@
			displaySingleFlaresAtCount: displaySingleFlaresAtCount,
			flareShowMode: "mouse",
			preClustered: preClustered,
			clusterRatio: 75,
			clusterRatio: 120,
			clusterAreaDisplay: areaDisplayMode,
			clusteringBegin: function (e) {
			console.log(e, "clustering begin");
			// console.log("clustering begin");
			},
			clusteringComplete: function () {
			console.log("clustering complete");
			@@ -336,20 +893,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
			}
			]
			});

			@@ -1 +1,252 @@
			<div></div>
			<div class='analysis-and-judgment' open-li='analysis-and-judgment'>
			<ul class='analysis-and-judgment-tab'>
			<li>设备信息</li>
			<li class='on'>警情信息</li>
			<li class='on'>业主信息</li>
			</ul>
			<!-- 展示分析研判 -->
			<div class="analysis-container">
			<!-- 设备信息 -->
			<div class="analysis-container-equipment">
			<div class="analysis-category">
			<ul>
			<li id='equipmentCategory'>
			类型：
			<div>
			全部

			<i>

			</i>
			</div>
			<div class='select-list'>
			<ul>
			<li>全部</li>
			<li>一体化摄像头</li>
			<li>普通枪式摄像头</li>
			<li>红外夜视防水型摄像头</li>
			<li>球型摄像头</li>
			<li>高速球</li>
			</ul>
			</div>
			</li>
			<li>
			<input type="checkbox" id='equipmentHeatMap'> 热力图
			</li>
			</ul>
			</div>
			<div class='analysis-table-content'>
			<div class="table">
			<div class="thead">
			<table>
			<thead>
			<tr>
			<th>序号</th>
			<th>设备名称</th>
			<th>设备类型</th>
			<th>设备编码</th>
			<th>操作</th>
			</tr>
			</thead>
			</table>
			</div>
			<div class="tbody">
			<table>
			<tbody>

			</tbody>
			</table>
			</div>
			</div>
			</div>
			</div>
			<!-- 警情信息 -->
			<div class="analysis-container-police">
			<div class="analysis-category">
			<ul>
			<li id='policeCategory'>
			类型：
			<div>
			全部
			<i>

			</i>
			</div>
			<div class='select-list'>
			<ul>
			<li>全部</li>
			<li>一键求助</li>
			</ul>
			</div>
			</li>
			<li id='policeArea'>
			区：
			<div>
			全部
			<i>

			</i>
			</div>
			<div class='select-list'>
			<ul>
			</ul>
			</div>
			</li>
			<li>
			<input type="checkbox" id='policeHeatMap'> 热力图
			</li>
			</ul>
			</div>
			<div class='analysis-selection-criteria'>
			<input type="text" id='analysis_select_time_start' readonly> <span>-</span> <input type="text" id='analysis_select_time_end' readonly>
			<input type="button" value='查询' id='policeSelectTime'>
			</div>
			<div class='analysis-table-content'>
			<div class="table">
			<div class="thead">
			<table>
			<thead>
			<tr>
			<th>序号</th>
			<th>类别</th>
			<th>接警员</th>
			<th>日期</th>
			<th>操作</th>
			</tr>
			</thead>
			</table>
			</div>
			<div class="tbody">
			<table>
			<tbody></tbody>
			</table>
			</div>
			</div>
			</div>
			</div>
			<!-- 业主信息 -->
			<div class="analysis-container-owner">
			<div class="analysis-category">
			<ul>
			<li id='ownerCategory'>
			类型：
			<div>
			全部

			<i>

			</i>
			</div>
			<div class='select-list'>
			<ul>

			</ul>
			</div>
			</li>
			<li>
			<input type="checkbox" id='ownerHeatMap'> 热力图
			</li>
			</ul>
			</div>
			<div class="analysis-level">
			<ul>
			<li id='ownerLevel'>
			等级：
			<div>
			全部

			<i>

			</i>
			</div>
			<div class='select-list'>
			<ul>

			</ul>
			</div>
			</li>
			<li>
			<!-- 级别 -->
			</li>
			</ul>
			</div>

			<div class='analysis-table-content'>
			<div class="table">
			<div class="thead">
			<table>
			<thead>
			<tr>
			<th>序号</th>
			<th>类别</th>
			<th>等级</th>
			<th>名称</th>
			<th>操作</th>
			</tr>
			</thead>
			</table>
			</div>
			<div class="tbody">
			<table>
			<tbody></tbody>
			</table>
			</div>
			</div>
			</div>
			</div>
			<!-- 设备信息
			<div class="analysis-container-equipment">
			<div class="analysis-category">
			<ul>
			<li id='equipmentCategory'>
			类型：
			<div>
			全部

			<i>

			</i>
			</div>
			<div class='select-list'>
			<ul>
			<li>全部</li>
			<li>一体化摄像头</li>
			<li>普通枪式摄像头</li>
			<li>红外夜视防水型摄像头</li>
			<li>球型摄像头</li>
			<li>高速球</li>
			</ul>
			</div>
			</li>
			<li>
			<input type="checkbox" id='equipmentHeatMap'> 热力图
			</li>
			</ul>
			</div>
			<div class='analysis-table-content'>
			<div class="table">
			<div class="thead">
			<table>
			<thead>
			<tr>
			<th>序号</th>
			<th>设备名称</th>
			<th>设备类型</th>
			<th>设备编码</th>
			<th>操作</th>
			</tr>
			</thead>
			</table>
			</div>
			<div class="tbody">
			<table>
			<tbody>

			</tbody>
			</table>
			</div>
			</div>
			</div>
			</div> -->
			</div>
			</div>

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

			@@ -211,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: '在线'
			}
			],

			@@ -295,6 +295,31 @@
			class="el-collapse-item__header focusing is-active"
			>
			<div class="avue-group__header avue-group">
			<i class="el-icon-document avue-group__icon"></i>
			<h1 class="avue-group__title">对讲信息</h1>
			</div>
			</div>
			</div>

			<el-card class="receiving-alarm-box">
			<div v-for="(item, index) in audios" :key="index" style="margin: 10px 0; width: 100%; height: 40px;">
			<audio :src="item.address" style="width: 40%; height: 100%;" controls></audio>
			</div>
			</el-card>

			<div
			style="margin-top: 20px"
			role="tab"
			aria-expanded="true"
			aria-controls="el-collapse-content-823"
			aria-describedby="el-collapse-content-823"
			>
			<div
			role="button"
			tabindex="0"
			class="el-collapse-item__header focusing is-active"
			>
			<div class="avue-group__header avue-group">
			<i class="el-icon-s-custom avue-group__icon"></i>
			<h1 class="avue-group__title">保安信息</h1>
			</div>
			@@ -608,6 +633,7 @@
			baseUrl: "",
			oldVideoSatart: false,
			vaddress: null,
			audios: [],
			};
			},
			created() {
			@@ -618,7 +644,7 @@
			},
			mounted() {
			this.getList();

			this.getAudios();
			this.$refs.mapDiv.onload = () => {
			window.frames[0].init("AlertSecurity", {
			x: this.form.jd,
			@@ -790,7 +816,9 @@
			getList() {
			var that = this;
			axios
			.get(`/api/blade-user/pages?current=1&size=9999&work_status=&deptId=${that.form.deptId}`)
			.get(
			`/api/blade-user/pages?current=1&size=9999&work_status=&deptId=${that.form.deptId}`
			)
			.then(function (res) {
			that.tableData = [];
			var i = 0;
			@@ -849,6 +877,18 @@
			this.$refs.multipleTable.clearSelection();
			}
			},

			getAudios() {
			axios({
			method: "get",
			url: "/api/blade-jfpts/avideo/list",
			params: {
			jid: this.form.id,
			},
			}).then((resdata) => {
			this.audios = resdata.data.data.records;
			});
			},
			},
			};
			</script>

			@@ -1,9 +1,3 @@
			/*
			* @Author: Morpheus
			* @Date: 2021-03-17 15:21:33
			* @Last Modified by: Morpheus
			* @Last Modified time: 2021-04-12 17:28:33
			*/
			<template>
			<basic-container>
			<avue-crud
			@@ -69,20 +63,23 @@
			</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"
			size="small"
			plain
			icon="el-icon-pie-chart"
			@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
			@@ -413,7 +410,7 @@
			</el-drawer>
			</basic-container>
			</template>


			<script>
			import { getList, remove, update, add, getclient } from "@/api/real/real";
			import { mapGetters } from "vuex";
			@@ -494,7 +491,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,
			@@ -1128,18 +1125,26 @@
			};
			});
			},
			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 '';
			},
			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 = [
			@@ -1467,30 +1472,66 @@
			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/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}`);
			});
			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}`);
			});
			},
			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 "";
			},
			},
			};
			</script>


			<style>
			.el-card__body .waringTypeClass {
			width: 12%;
			@@ -1605,4 +1646,4 @@
			.tabFontSize {
			font-size: 15px;
			}
			</style>
			</style>