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

shuishen

2021-04-24 9459612c7ef903fd4de76c84f6c172ee3b0ea144

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

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

@@ -2,7 +2,10 @@
    background: transparent;
    border-radius: 10px;
}

.flares {
    background: transparent;
    border-radius: 10px;
}
/* .flare .layui-layer-title {
    padding: 0 80px;
    text-align: center;
@@ -16,4 +19,22 @@
.flare .layui-layer-content {
    background: rgb(255, 255, 255);
    border-radius: 5px 5px 5px 5px;
}

.flares .layui-layer-content {
    background: rgb(255, 255, 255);
    border-radius: 5px 5px 5px 5px;
}
.flares .layui-layer-content::after{
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    background-color: #fff;
    /* z-index: 1111111; */
    position: relative;
    top: 8px;
    left: 95px;
    transform: rotate(45deg);

}

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

@@ -199,7 +199,9 @@
                            <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"
                                    <!-- <el-image style="width: 68px; height: 68px" :src="value" :preview-src-list="imgsl"
                                        v-show="value != 'no'"> -->
                                        <el-image style="width: 68px; height: 68px" :src="value" 
                                        v-show="value != 'no'">
                                    </el-image>
                                    <div v-show="value == 'no'" style="

 public/map/popup/html/FlareClusterLayer_v3.html

@@ -19,6 +19,7 @@
        #appliu {
            /* border: 1px solid #000; */
            border-radius: 5px 5px 5px 5px;
            width: ;
        }

        .names {
@@ -42,6 +43,17 @@
            padding-left: 8px;
            /* border: 1px solid rgb(30, 160, 192); */
        }
        /* .msgs::after{
            content: '';
            display: block;
            width: 10px;
            height: 10px;
            background-color: aquamarine;
            z-index: 1111111;
            position: relative;
            top: 40px;
            left: 20px;
        } */
    </style>
</head>

@@ -63,7 +75,8 @@
                el: '#appliu',
                data: {
                    num: '',
                    name: ''
                    name: '',
                    statesss: '',
                },
                ourData: '',
                // ip2: '',
@@ -80,11 +93,32 @@
                        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 {
                            ct.style.backgroundImage = 'linear-gradient(to right, #787878 , #5F5F5F';
                        // if (dat.onlineStatus == 1) {
                        //     ct.style.backgroundImage = 'linear-gradient(to right, #3DDEA8 , #1FBD9A';
                        // } else {
                        //     ct.style.backgroundImage = 'linear-gradient(to right, #787878 , #5F5F5F';

                        // }
                        if (dat.state != '') {
                            ct.style.backgroundImage = 'linear-gradient(to right, #F49966 , #F49966';
                            // cordActive.style.backgroundImage = 'linear-gradient(to right, #F49966 , #F49966';
                            this.statesss = '故障';
                        } else {
                            if (dat.jtype != 1) {
                                if (dat.onlineStatus == 1) {//el-tabs__active-bar
                                    ct.style.backgroundImage = 'linear-gradient(to right, #32C1A2 , #32C1A2';
                                    // cordActive.style.backgroundImage = 'linear-gradient(to right, #32C1A2 , #32C1A2';
                                    this.statesss = '在线';
                                } else {
                                    ct.style.backgroundImage = 'linear-gradient(to right, #CDCDCD , #CDCDCD';
                                    // cordActive.style.backgroundImage = 'linear-gradient(to right, #CDCDCD , #CDCDCD';
                                    this.statesss = '离线';
                                }
                            } else {
                                ct.style.backgroundImage = 'linear-gradient(to right, #F35B5B , #F35B5B';
                                // cordActive.style.backgroundImage = 'linear-gradient(to right, #F35B5B , #F35B5B';
                                this.statesss = '警报';
                            }
                        }
                    }
                },

 public/map/popup/html/SupervisoryMapPdata.html

@@ -10,10 +10,10 @@
    <script src='../js/FlareClusterLayer_v3.js'></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <!-- element ui -->
    <!-- <link rel="stylesheet" href="../../lib/elementUi.css">
    <script src="../../lib/elementUi.js"></script> -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../../lib/elementUi.css">
    <script src="../../lib/elementUi.js"></script>
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
    <script src="../../lib/axios.js"></script>
    <!-- layui -->
    <link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
@@ -238,7 +238,8 @@
                    </el-card> -->
                  
                        <el-card class="scene-image-box">
                            <el-image v-for="url in imgSrc" :key="url" :src="url"  :preview-src-list="srcList" v-show="imgSrc.length"></el-image>
                            <!-- <el-image v-for="url in imgSrc" :key="url" :src="url"  :preview-src-list="srcList" v-show="imgSrc.length"></el-image> -->
                            <el-image v-for="url in imgSrc" :key="url" :src="url"   v-show="imgSrc.length"></el-image>
                            <span v-show="imgSrc.length == 0">暂无现场图片</span>
                        </el-card>
               
@@ -327,7 +328,7 @@
                },
                getImgAndVideo() {
                    var that = this;
                    console.log(this.datas.id)
                    // console.log(this.datas.id)
                    axios({
                        method: "post",
                        url: "/api/blade-jfpts/feedback/feedback/selectFeedEdit",
@@ -338,12 +339,12 @@
                        var dL = resdata.data.data;
                        if (dL.length != 0) {
                            if (dL[0].tp.length > 0) {
                                console.log(dL[0].tp);
                                // console.log(dL[0].tp);
                                that.imgSrc = dL[0].tp;
                                that.srcList = dL[0].tp;
                            }
                            if (dL[0].sp.length > 0) {
                                console.log(dL[0].sp);
                                // console.log(dL[0].sp);
                                that.feedbackVideo = dL[0].sp[0];
                            }
                        }

 public/map/popup/html/SupervisoryMapYdata.html

@@ -12,7 +12,9 @@
    <!-- element ui -->
    <link rel="stylesheet" href="../../lib/elementUi.css">
    <script src="../../lib/elementUi.js"></script>

    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
    <script src="../../lib/axios.js"></script>
    <!-- layui -->
    <link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
    <style>
@@ -37,7 +39,7 @@

        .flare-liu-top {
            width: 330px;
            height: 90px;
            height: 140px;
            /* border: rgb(211, 154, 31) solid 0.5px; */
            display: flex;
            align-items: center;
@@ -49,54 +51,38 @@

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

        .f-l-t-right {
            width: 300px;
            height: 28px;
            height: 50px;
            display: flex;
            align-items: center;
            /* align-items: center; */
            color: white;
            justify-content: space-around;
            flex-direction: column;
            font-size: 12px;
        }

        .f-l-t-center {
            width: auto;
            position: relative;
            left: -103px;
            top: 5px;

        .f-l-t-r-number {
            width: 180px;
            margin-left: auto;
        }

        .f-l-t-r-msg {
            width: 200px;
            height: 28px;
            position: relative;
            top: 10px;
            left: -5px;
        .f-l-t-r-time {
            width: 180px;
            margin-left: auto;
        }

        .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;
            /* height: 361px; */
            /* border: rgb(106, 20, 187) solid 0.5px; */

        }
@@ -111,42 +97,61 @@
        .r-b-t-main {
            display: flex;
            align-items: center;
            justify-content: space-between;
            justify-content: center;
            /* justify-content: space-between; */

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

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

            padding: 10px 0 10px 0;
            margin-bottom: 5px;
            position: relative;
            left: 11px;
        }

        .rbt-l,
        .rbt-r {
            width: 150px;
            /* border: rgb(106, 20, 187) solid 0.5px; */
        }



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

        }

        .r-b-t-right {
            display: block;
            /* 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;
        .scene-image-box .el-image {
            display: block;
            min-height: 200px;
            margin-bottom: 10px;
        }

        .r-b-t-r-imgsl {

            float: left;
            padding: 0 3px 0 3px;
        .scene-image-box {
            width: 320px;
            height: 260px;
            overflow: auto;
        }


        .el-tabs__active-bar {
            background-color: aquamarine;
            background-color: #F35B5B;
        }

        .el-tabs__item.is-active,
@@ -161,65 +166,101 @@
        <!-- 从layui传值给iframe 的占位input -->
        <!-- <div class="aaa bbb">13223456745</div> -->
        <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-center">{{machineCode}}</div>
        <div class="flare-liu-top" style="background-image: linear-gradient(to right, #F35B5B , #F35B5B">
            <div class="f-l-t-heard">{{datas.place}}</div>
            <div class="f-l-t-right">
                <div class="f-l-t-r-msg">{{statesss}}</div>
                <div class="f-l-t-r-but"> <a href="#" @click="looks">查看详情</a> </div>
                <div class="f-l-t-r-number">名称：{{datas.deviceNumber}}</div>
                <div class="f-l-t-r-time">接警时间：{{datas.jjTime}}</div>
            </div>
        </div>
        <div class="flare-liu-body">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="基本信息" name="first">
                <el-tab-pane label="警情信息" name="first">
                    <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 class="r-b-t-main-once">
                            <span class="r-b-t-left">ID：</span>
                            <span class="r-b-t-right">{{ datas.alarmPeople }}</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 class="r-b-t-main-once">
                            <span class="r-b-t-left">地址：</span>
                            <span class="r-b-t-right">{{ datas.galarmPeople }}</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 class="r-b-t-main-once">
                            <span class="r-b-t-left">类型：</span>
                            <span class="r-b-t-right">{{ datas.galarmPeople }}</span>
                        </div>
                        <div class="r-b-t-main-once">
                            <span class="r-b-t-left">域名：</span>
                            <span class="r-b-t-right">{{ datas.galarmPeople }}</span>
                        </div>
                        <!-- <div class="r-b-t-main-once">
                            <span class="r-b-t-left">使用方：</span>
                            <span class="r-b-t-right">？？</span>
                        </div> -->
                        <!-- 图暂时没有 -->
                        <!-- <div class="r-b-t-main">
                            <div class="rbt-l">
                                <span class="r-b-t-left">警情内容：</span>
                                <span class="r-b-t-right">{{ datas.content }} </span>
                            </div>
                            <div class="rbt-r">
                                <span class="r-b-t-left">警情类型：</span>
                                <span class="r-b-t-right">{{datas.waringType}}</span>
                            </div>
                        </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 class="rbt-l">
                                <span class="r-b-t-left">联系人：</span>
                                <span class="r-b-t-right">{{ datas.oneContacts }} </span>
                            </div>
                            <div class="rbt-r">
                                <span class="r-b-t-left">联系电话：</span>
                                <span class="r-b-t-right">{{datas.onePhone}}</span>
                            </div>
                        </div>
                        <!-- <div class="r-b-t-main">
                            <div class="rbt-l">
                                <span class="r-b-t-left">二级负责人：</span>
                                <span class="r-b-t-right">{{ datas.twoContacts }} </span>
                            </div>
                            <div class="rbt-r">
                                <span class="r-b-t-left">call：</span>
                                <span class="r-b-t-right">{{datas.twoPhone}}</span>
                            </div>
                        </div>
                        <div class="r-b-t-main">
                            <span class="r-b-t-left">部署时间</span>
                            <span class="r-b-t-right">{{ deploymentTime }}</span>
                        </div>
                            <div class="rbt-l">
                                <span class="r-b-t-left">三级负责人：</span>
                                <span class="r-b-t-right">{{ datas.threeContacts }} </span>
                            </div>
                            <div class="rbt-r">
                                <span class="r-b-t-left">call：</span>
                                <span class="r-b-t-right">{{datas.threePhone}}</span>
                            </div>
                        </div> -->
                    </div>
                </el-tab-pane>
                <!-- <el-tab-pane label="other" name="second">other</el-tab-pane> -->
                <!-- <el-tab-pane label="现场图片" name="second">
                     <el-card class="scene-image-box">
                        <el-image v-for="(item, index) in imgSrc" :key="index" :src="item" :preview-src-list="srcList"
                            v-show="imgSrc.length > 0"></el-image>
                        <span v-show="imgSrc.length == 0">暂无现场图片</span>
                    </el-card> -->

                <!-- <el-card class="scene-image-box">
                            <el-image v-for="url in imgSrc" :key="url" :src="url"  :preview-src-list="srcList" v-show="imgSrc.length"></el-image> -->
                <!--<el-image v-for="url in imgSrc" :key="url" :src="url"   v-show="imgSrc.length"></el-image>
                            <span v-show="imgSrc.length == 0">暂无现场图片</span>
                        </el-card>
               
                    
                </el-tab-pane> -->
                <!-- <el-tab-pane label="现场视频" name="third">
                    <el-card>
                        <video :src="feedbackVideo" style="width: 100%; height: 100%; object-fit: fill" controls
                            v-show="feedbackVideo != ''"></video>
                        <span v-show="feedbackVideo == ''">暂无现场视频</span>
                    </el-card>
                </el-tab-pane> -->
            </el-tabs>
        </div>
    </div>
@@ -232,116 +273,71 @@
        var me = new Vue({
            el: '#appliutwo',
            data: {
                num: '',
                name: '',
                statesss: '',
                //详细信息data
                ourData: '',
                // names: '',
                contacts: '',
                calls: '',
                imgsl: [],
                deploymentTime: '',
                oldtime: '',
                newtime: '',
                machineCode: '',

                a: true,
                activeName: 'first'
                datas: {},
                activeName: 'first',
                imgSrc: [],
                srcList: [],
                feedbackVideo: "",
                // aaa: "",
                // address: "南昌市东湖区永外正街17号",
                // addvcd: "",
                // city: "",
                // coordinate: "POINT(0 0)",
                // createtime: "2021-03-17 10:06:23",
                // district: "",
                // dj: "三级甲等",
                // haveJW: "无地图经纬度",
                // id: 10,
                // information: "<em>南昌一附院</em>一般指南昌大学第一附属医院。南昌大学第一附属医院有东湖院区和象湖院区两个院区，其中东湖院区位于江西省南昌市东湖区永外正街17号，始建于1939年，是一所集医疗、教学、科研、预防保健、康养于一体三级甲等综合医院",
                // isDelete: -1,
                // jd: "",
                // phone: "0791-88692748",
                // province: "",
                // type: "医院",
                // wd: "",
                // yname: "南昌大学第一附属医院",
                // ynumber: "CLRK202103171006232744",
            },
            methods: {
                looks() {
                    window.parent.parent.location.hash = `#/dataL/dataL?id=${this.ourData.id}&deviceName=${this.ourData.deviceName}&deviceNumber=${this.ourData.deviceNumber}&deviceType=${this.ourData.deviceType}&ownership=${this.ourData.ownership}&ownerId=&devicestate=${this.ourData.devicestate}&stime=${this.ourData.stime}&parentId=${this.ourData.parentId}&jd=${this.ourData.jd}&wd=${this.ourData.wd}&street=${this.ourData.street}&dtype=${this.ourData.dtype}&serialNumber=${this.ourData.serialNumber}&stype=&channelNumber=${this.ourData.channelNumber}&pay=&expireTime=${this.ourData.expireTime}&heartbeat=${this.ourData.heartbeat}&province=${this.ourData.province}&city=${this.ourData.city}&district=${this.ourData.district}&state=${this.ourData.state}&reason=&deptId=${this.ourData.deptId}&onePhone=${this.ourData.onePhone}&twoPhone=${this.ourData.twoPhone}&oneId=${this.ourData.oneId}&twoId=&threeId=&oneContacts=${this.ourData.oneContacts}&twoContacts=${this.ourData.twoContacts}&type=${this.ourData.type}&beginTime=&endTime=&pid=${this.ourData.pid}&onlineStatus=${this.ourData.onlineStatus}&jtype=${this.ourData.jtype}&threePhone=${this.ourData.threePhone}&threeContacts=${this.ourData.threeContacts}`;
                },
                getdatas(dat) {

                    var xhr = null
                        , my = this
                        , url = '/api/blade-jfpts/depl/selectInfo?deviceNumber=' + dat.deviceNumber;
                    if (XMLHttpRequest) { //http请求
                        xhr = new XMLHttpRequest();
                    } else {
                        xhr = new ActiveXObject("Microsoft.XMLHTTP");

                    }
                    xhr.open("post", url, true);
                    xhr.send();
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState === 4) {
                            if (xhr.status === 200) {
                                // 判断isJson是否传进来了
                                var imgD = JSON.parse(xhr.responseText);// JSON转js
                                // console.log(imgD)
                                var imgdatas = [];
                                if (imgD.data.length != 0) {
                                    imgdatas = imgD.data[0].paddress.split(',');
                                } else {

                                }
                                // var imgdatas = imgD.data[0].paddress.split(',');
                                my.imgsl = imgdatas.length == 0 ? ['no'] : imgdatas;
                                // my.imgsl = [ //最多3张照片 
                                //     "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57",

                                //     "https://resource-city.sensoro.com/1723C1A66DB44F792564F3648E5AA1EE",
                                //     "https://resource-city.sensoro.com/6E0FB78DC42C35F3B8FF0F6A03472433",
                                // ]
                                // console.log(imgD, my.imgsl);
                            }
                        }
                    }
                    this.name = dat.deviceName.length >= 15 ? dat.deviceName.substring(0, 15) + '···' : 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];
                    var cordActive = document.getElementsByClassName('el-tabs__active-bar')[0];//滑块背景颜色

                    if (dat.state != '') {
                        ct.style.backgroundImage = 'linear-gradient(to right, #F49966 , #F49966';
                        cordActive.style.backgroundImage = 'linear-gradient(to right, #F49966 , #F49966';
                        this.statesss = '故障';
                    } else {
                        if (dat.jtype != 1) {
                            if (dat.onlineStatus == 1) {//el-tabs__active-bar
                                ct.style.backgroundImage = 'linear-gradient(to right, #32C1A2 , #32C1A2';
                                cordActive.style.backgroundImage = 'linear-gradient(to right, #32C1A2 , #32C1A2';
                                this.statesss = '在线';
                            } else {
                                ct.style.backgroundImage = 'linear-gradient(to right, #CDCDCD , #CDCDCD';
                                cordActive.style.backgroundImage = 'linear-gradient(to right, #CDCDCD , #CDCDCD';
                                this.statesss = '离线';
                            }
                        } else {
                            ct.style.backgroundImage = 'linear-gradient(to right, #F35B5B , #F35B5B';
                            cordActive.style.backgroundImage = 'linear-gradient(to right, #F35B5B , #F35B5B';
                            this.statesss = '警报';
                        }
                    }
                    console.log(dat);
                },
                handleClick(tab, event) {//标签tab点击事件
                    // console.log(tab, event);
                }
                },
                getImgAndVideo() {
                    var that = this;
                    // console.log(this.datas.id)
                    axios({
                        method: "post",
                        url: "/api/blade-jfpts/feedback/feedback/selectFeedEdit",
                        params: {
                            jid: this.datas.id,
                        },
                    }).then((resdata) => {
                        var dL = resdata.data.data;
                        if (dL.length != 0) {
                            if (dL[0].tp.length > 0) {
                                // console.log(dL[0].tp);
                                that.imgSrc = dL[0].tp;
                                that.srcList = dL[0].tp;
                            }
                            if (dL[0].sp.length > 0) {
                                // console.log(dL[0].sp);
                                that.feedbackVideo = dL[0].sp[0];
                            }
                        }
                    });
                },
            },
            mounted() {
                this.oldtime = setTimeout(() => {//需要同步数据处理，input中value在mounted中没有直接传值
                    // console.log(this.$refs.sidIput.value);
                    clearTimeout(this.oldtime);
                    this.ourData = JSON.parse(this.$refs.sidIput.value);//json对象转js对象
                    // console.log(this.ourData);
                    this.getdatas(this.ourData);
                }, 20);


                    this.datas = JSON.parse(this.$refs.sidIput.value);//json对象转js对象
                    this.getdatas(this.datas);
                    // this.getImgAndVideo();
                }, 200);
            }
        })
    </script>

 public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js

@@ -229,6 +229,7 @@
            downs = null,
            moves = null,
            ups = null;
           
          layui.use('layer', function () {
            that.layuiLayer = layui.layer;
            that.layuiLayer.config({
@@ -236,136 +237,103 @@
            });
            that.layuiLayer.close(that.layuiLayer.index);
            //两个弹窗
            // layer.alert('layer 新皮肤');
            //   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) {//成功后添加全局点击关闭
            //       // console.log(evt.graphic.attributes);
            //       $("#layui-layer-iframe" + index).contents().find("#input1").val(setdata);
            //       // console.log(layero, index);
            //       that.indexs = index;
              that.layuiLayer.open({
                title: '',
                type: 2,
                shadeClose: false,
                shade: false,
                skin: 'demo-class',
                // id: 'onelyOne',
                maxmin: false, //开启最大化最小化按钮
                area: ['200px', '70px'],
                // area: 'auto',
                offset: posi,
                skin: 'flares',
                closeBtn: 0, //关闭按钮，可通过配置1和2来展示,0关闭
                content: [url, 'no'],
                resize: false,
                scrollbar: false,
                // tipsMore: true, //允许多个tipe
                // content: num,
                success: function (layero, index) {//成功后添加全局点击关闭
                  // console.log(evt.graphic.attributes);
                  $("#layui-layer-iframe" + index).contents().find("#input1").val(setdata);
                  // console.log(layero, index);
                  that.indexs = index;

            //       var isclickD = true
            //         , endx = null
            //         , endy = null;
            //       layero[0].style.position = 'absolute';
                  var isclickD = true
                    , endx = null
                    , endy = null;
                  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", "");
                  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", "");

            //         //判断鼠标是否在地图上
            //         // console.log(mx,'+',my);
            //         if (mx > 359 && mx < 1543 && my > 5 && my < 818) {
            //           // console.log('on map')
            //           if (endx != null && endy != null) {
            //             cx = endx;
            //             cy = endy;
            //           }
            //           moves = document.onmousemove = () => {//鼠标移动事件
            //             // console.log('move');//move
            //             // console.log(this.offset)
            //             var ux = window.event.clientX//记录实时位置
            //               , uy = window.event.clientY;
            //             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,'最后位置');
            //             isclickD = false;
            //             ups = document.onmouseup = () => {//鼠标抬起事件
            //               // console.log('up');//end
            //               // downs = document.onmousedown = null;
            //               moves = document.onmousemove = null;
            //               ups = document.onmouseup = null;
            //               var timess = setTimeout(() => {
            //                 clearTimeout(timess);
            //                 timess = null;
            //                 isclickD = true;
            //               }, 1);
            //             }
            //           }
            //         }
            //       }
            //       clickD = document.onclick = () => {
            //         if (isclickD) {
            //           parent[0].layer.close(index);
            //           parent[0].layer.close(+index + 1);
            //           // parent[0].layer.closeAll();
            //           // console.log(111111111111)
            //           clickD = document.onclick = null;
            //         }
            //       }
                    //判断鼠标是否在地图上
                    // console.log(mx,'+',my);
                    if (mx > 359 && mx < 1543 && my > 5 && my < 818) {
                      // console.log('on map')
                      if (endx != null && endy != null) {
                        cx = endx;
                        cy = endy;
                      }
                      moves = document.onmousemove = () => {//鼠标移动事件
                        // console.log('move');//move
                        // console.log(this.offset)
                        var ux = window.event.clientX//记录实时位置
                          , uy = window.event.clientY;
                        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,'最后位置');
                        isclickD = false;
                        ups = document.onmouseup = () => {//鼠标抬起事件
                          // console.log('up');//end
                          // downs = document.onmousedown = null;
                          moves = document.onmousemove = null;
                          ups = document.onmouseup = null;
                          var timess = setTimeout(() => {
                            clearTimeout(timess);
                            timess = null;
                            isclickD = true;
                          }, 1);
                        }
                      }
                    }
                  }
                  clickD = document.onclick = () => {
                    if (isclickD) {
                      parent[0].layer.close(index);
                      parent[0].layer.close(+index + 1);
                      // parent[0].layer.closeAll();
                      // console.log(111111111111)
                      clickD = document.onclick = null;
                    }
                  }

            //       var mouseWheel = that.map.on("mouse-wheel", myMouseWheelHandler);
                  var mouseWheel = that.map.on("mouse-wheel", myMouseWheelHandler);

            //       function myMouseWheelHandler(event) {
            //         // console.log("Mouse wheel value = " + event.value);
            //         parent[0].layer.close(index);
            //         parent[0].layer.close(+index + 1);
            //         mouseWheel.remove();
            //       }
                  function myMouseWheelHandler(event) {
                    // console.log("Mouse wheel value = " + event.value);
                    parent[0].layer.close(index);
                    parent[0].layer.close(+index + 1);
                    mouseWheel.remove();
                  }

            //     },
            //     end: function () { //关闭事件
                },
                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));
            //     $("#layui-layer-iframe" + index).contents().find("#sidIput").val(setdata);
            //   },
            // })
            //一个弹窗
                }
              });
            that.layuiLayer.open({ //第二个iframe
              title: '',
              type: 2,
@@ -386,18 +354,54 @@
              // 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));
                $("#layui-layer-iframe" + index).contents().find("#sidIput").val(setdata);

              },
            })
            //一个弹窗
            //     that.layuiLayer.open({ //第二个iframe
            //       title: '',
            //       type: 2,
            //       shadeClose: true,
            //       shade: false,
            //       skin: 'demo-class',
            //       id: 'onelyTwo',
            //       maxmin: false, //开启最大化最小化按钮
            //       area: ['360px', '484px'],
            //       // area: 'auto',
            //       offset: winSize,
            //       skin: 'flare',
            //       isOutAnim: false,
            //       closeBtn: 2, //关闭按钮，可通过配置1和2来展示,0关闭
            //       content: ['./popup/html/FlareClusterLayer_v3 copy.html'],
            //       resize: false,
            //       scrollbar: false,
            //       // tipsMore: true, //允许多个tipe
            //       // content: num,
            //       success: function (layero, index) { //成功后添加全局点击关闭
            //         $("#layui-layer-iframe" + index).contents().find("#sidIput").val(setdata);

            //       },
            //     })
          })
        }
        if (mySelf.onceTimeMethod == null) { //防抖.限制时间内点击次数，否则会造成不能正确销毁前一个弹窗
          var offsetMy = [+evt.screenY - 300 + 'px', +evt.screenX - 172.5 + 'px'];
          var offsetMy = [+evt.screenY - 310 + 'px', +evt.screenX - 168 + 'px'];
          if (und == '控制端') {//控制端弹窗关闭
          var offsetMy = [+window.innerHeight / 2 - 115 + 'px', (+window.innerWidth - 360) / 2 + 257 + 'px'];
          console.log('控制端中浮',offsetMy)
        }
          // console.log(evt.screenY);
          var winSize = [+window.innerHeight / 2 - 242 + 'px', +window.innerWidth - 380 + 'px']
          // console.log(winSize,4454645634536);
          fCard(offsetMy, setdata, winSize);
          fCard(offsetMy,setdata,winSize);
          mySelf.onceTimeMethod = setTimeout(() => {
            mySelf.onceTimeMethod = null;
          }, mySelf.onceTime);

 public/map/widgets/supervisoryMap/SupervisoryMap.js

@@ -289,20 +289,20 @@
        $(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 == 1) {
        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 == 1) {
          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 == 2) {
        //   that.getOwnerType($('#ownerCategory'));
        //   that.getOwnerDj($('#ownerLevel'), '');
        //   that.getOwnerTable($($('.analysis-container > div')[ind]).find('.tbody tbody'), '', '');
        // } else if (ind == 0) {
        //   that.getEquipmentTable($($('.analysis-container > div')[ind]).find('.tbody tbody'), '');
        // }
        } else if (ind == 2) {
          that.getOwnerType($('#ownerCategory'));
          that.getOwnerDj($('#ownerLevel'), '');
          that.getOwnerTable($($('.analysis-container > div')[ind]).find('.tbody tbody'), '', '');
        } else if (ind == 0) {
          that.getEquipmentTable($($('.analysis-container > div')[ind]).find('.tbody tbody'), '');
        }

        that.tabIndex = $(this).index();
      })
@@ -366,7 +366,7 @@
        }
        console.log(b, id);
        event.stopPropagation();
        var winSize = [+window.innerHeight / 2 - 242 + 'px', +window.innerWidth - 380 + 'px']
        var winSize = [+window.innerHeight / 2 - 242 + 'px', +window.innerWidth - 380 + 'px'];

        if (b.jd == '' || b.wd == '') {
          // console.log('无地图经纬度');
@@ -383,75 +383,48 @@
        //解决重复JSON.stringify将循环结构转换为JSON。有几率出错，err：TypeError: Converting circular structure to JSON
        //舍弃上面方法，原因是对象里面嵌入对象，造成不能转换成JSON，吧对象去掉就好，
        var as = b;
        // for (let key in as) {
        //   if (typeof as[key] == 'object') {
        //     as = as[key].attributes;
        //     // console.log('youduixang ')
        //     break;
        //   }
        // }
        var setdata = JSON.stringify(as);
          // console.log(setdata,'setdata')
        // console.log(setdata,'setdata')
        var intOpen = () => {
          layui.use('layer', function () {
            that.layuiLayer = layui.layer;
            that.layuiLayer.config({
              extend: 'myskin/FlareClusterLayer.css'
            });
            that.layuiLayer.close(that.layuiLayer.index);
            that.layuiLayer.open({ 
              title: '',
              type: 2,
              shadeClose: true,
              shade: false,
              skin: 'demo-class',
              id: 'onelyTwo',
              maxmin: false, //开启最大化最小化按钮
              area: ['360px', '484px'],
              // area: 'auto',
              offset: winSize,
              skin: 'flare',
              isOutAnim: false,
              closeBtn: 2, //关闭按钮，可通过配置1和2来展示,0关闭
              content: ['./popup/html/SupervisoryMapPdata.html'],
              resize: false,
              scrollbar: false,
              // tipsMore: true, //允许多个tipe
              // content: num,
              success: function (layero, index) { //成功后添加全局点击关闭
                $("#layui-layer-iframe" + index).contents().find("#sidIput").val(setdata);

        layui.use('layer', function () {
          that.layuiLayer = layui.layer;
          that.layuiLayer.config({
            extend: 'myskin/FlareClusterLayer.css'
          });
          that.layuiLayer.close(that.layuiLayer.index);
          that.layuiLayer.open({ //第二个iframe
            title: '',
            type: 2,
            shadeClose: true,
            shade: false,
            skin: 'demo-class',
            id: 'onelyTwo',
            maxmin: false, //开启最大化最小化按钮
            area: ['360px', '484px'],
            // area: 'auto',
            offset: winSize,
            skin: 'flare',
            isOutAnim: false,
            closeBtn: 2, //关闭按钮，可通过配置1和2来展示,0关闭
            content: ['./popup/html/SupervisoryMapPdata.html'],
            resize: false,
            scrollbar: false,
            // tipsMore: true, //允许多个tipe
            // content: num,
            success: function (layero, index) { //成功后添加全局点击关闭
              $("#layui-layer-iframe" + index).contents().find("#sidIput").val(setdata);

            },
              },
            })
          })
        })
        // // document.elementFromPoint(x, y).click();
        // // console.log(x, y)

        // // console.log(that.clusterLayer, that._map, 6)
        // // console.log(id, 'id');
        // // console.log(that.clusterLayer);
        // var Tattributes = null
        //   , ds = that.clusterLayer.allData;
        // for (var key in ds) {
        //   if (ds[key].id == id) {
        //     Tattributes = ds[key];
        //   }
        // }
        // if (mySelf.onceTimeMethod == null) {//防抖.限制时间内点击次数，否则会造成不能正确销毁前一个弹窗
        //   var evtdata = {};
        //   evtdata = {
        //     graphic: {
        //       attributes: Tattributes,
        //     },
        //     screenX: x,
        //     screenY: y,
        //   }
        //   that.clusterLayer._clickOpenOnclick(evtdata, '控制端', that.clusterLayer.indexs);
        //   mySelf.onceTimeMethod = setTimeout(() => {
        //     mySelf.onceTimeMethod = null;
        //   }, mySelf.onceTime);
        // } else {
        // };
        }
        if (mySelf.onceTimeMethod == null) {//防抖.限制时间内点击次数，否则会造成不能正确销毁前一个弹窗
          intOpen();
          mySelf.onceTimeMethod = setTimeout(() => {
            mySelf.onceTimeMethod = null;
          }, mySelf.onceTime);
        } else {
        };
      })
      $('.analysis-container-police .analysis-table-content .tbody').off('click', '.location').on('click', '.location', function (event) {
        event.stopPropagation();
@@ -475,6 +448,50 @@
          }
        }
        console.log(b, id);
        var winSize = [+window.innerHeight / 2 - 242 + 'px', +window.innerWidth - 380 + 'px'];
        var as = b;
        var setdata = JSON.stringify(as);
        // console.log(setdata,'setdata')
        var intOpen = () => {
          layui.use('layer', function () {
            that.layuiLayer = layui.layer;
            that.layuiLayer.config({
              extend: 'myskin/FlareClusterLayer.css'
            });
            that.layuiLayer.close(that.layuiLayer.index);
            that.layuiLayer.open({ 
              title: '',
              type: 2,
              shadeClose: true,
              shade: false,
              skin: 'demo-class',
              id: 'onelyTwo',
              maxmin: false, //开启最大化最小化按钮
              area: ['360px', '484px'],
              // area: 'auto',
              offset: winSize,
              skin: 'flare',
              isOutAnim: false,
              closeBtn: 2, //关闭按钮，可通过配置1和2来展示,0关闭
              content: ['./popup/html/SupervisoryMapYdata.html'],
              resize: false,
              scrollbar: false,
              // tipsMore: true, //允许多个tipe
              // content: num,
              success: function (layero, index) { //成功后添加全局点击关闭
                $("#layui-layer-iframe" + index).contents().find("#sidIput").val(setdata);

              },
            })
          })
        }
        if (mySelf.onceTimeMethod == null) {//防抖.限制时间内点击次数，否则会造成不能正确销毁前一个弹窗
          intOpen();
          mySelf.onceTimeMethod = setTimeout(() => {
            mySelf.onceTimeMethod = null;
          }, mySelf.onceTime);
        } else {
        };
        // var url = './popup/html/owner-details.html?id=' + id;
        // layui.use('layer', function () {
        //   that.layuiLayer = layui.layer;
@@ -496,13 +513,19 @@
        //   });
        // })

        // event.stopPropagation();
        // var lgtd = Number($(this).find('input').attr('lgtd'));
        // var lttd = Number($(this).find('input').attr('lttd'));
        // // console.log($(this).find('input').attr('lttd'));
        // var position = new esri.geometry.Point(lgtd, lttd, new esri.SpatialReference({ wkid: 4326 }));//根据输入坐标信息找地图上的点
        // that._map.centerAndZoom(position, 18);//缩放，10是缩放级别，可以自定义，数值越大缩放越大

        event.stopPropagation();
        if (b.jd == '' || b.wd == '') {
          // console.log('无地图经纬度');
          b.haveJW = '无地图经纬度';
        } else {
          // console.log('有地图经纬度')
          b.haveJW = '有地图经纬度';
          var lgtd = Number($(this).find('input').attr('lgtd'));
          var lttd = Number($(this).find('input').attr('lttd'));
          // console.log($(this).find('input').attr('lttd'));
          var position = new esri.geometry.Point(lgtd, lttd, new esri.SpatialReference({ wkid: 4326 }));//根据输入坐标信息找地图上的点
          that._map.centerAndZoom(position, 18);//缩放，10是缩放级别，可以自定义，数值越大缩放越大
        }

        // var y = +window.innerHeight / 2 + 200;
        // var x = (+window.innerWidth - 360) / 2 + 360 + 70;
@@ -849,23 +872,17 @@
            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' style='display: none'> <input type='button' value='定位'" + ' lgtd=' + result[i].jd + ' lttd=' + result[i].wd + "></td>";
            // if (result[i].state != '') {
            //   stares = '故障';
            //   str += "<td class='location'> <input style='background-image:linear-gradient(to right, #F49966 , #F49966' type='button' value=" + stares + ' lgtd=' + result[i].jd + ' lttd=' + result[i].wd + "></td>";
            // } else {
            //   if (result[i].jtype != 1) {
            //     if (result[i].onlineStatus == 1) {//el-tabs__active-bar
            //       stares = '在线';
            //       str += "<td class='location'> <input style='background-image:linear-gradient(to right, #32C1A2 , #32C1A2' type='button' value=" + stares + ' lgtd=' + result[i].jd + ' lttd=' + result[i].wd + "></td>";
            //     } else {
            //       stares = '离线';
            //       str += "<td class='location'> <input style='background-image:linear-gradient(to right, #CDCDCD , #CDCDCD' type='button' value=" + stares + ' lgtd=' + result[i].jd + ' lttd=' + result[i].wd + "></td>";
            //     }
            //   } else {
            //     stares = '警报';
            //     str += "<td class='location'> <input style='background-image:linear-gradient(to right, #F35B5B , #F35B5B' type='button' value=" + stares + ' lgtd=' + result[i].jd + ' lttd=' + result[i].wd + "></td>";
            //   }
            // }
            if (result[i].jtype == 0) {
              str += "<td class='location'> <input style='color:#000000;background-color:#ffffff;background-image:linear-gradient(to right, #fffff , #fffff' type='button' value='未处理'" + ' lgtd=' + result[i].jd + ' lttd=' + result[i].wd + "></td>";
            } else {
              if (result[i].jtype == 1) {
                str += "<td class='location'> <input style='color:#000000;background-color:#ffffff;background-image:linear-gradient(to right, #fffff , #fffff' type='button' value='处理中'" + ' lgtd=' + result[i].jd + ' lttd=' + result[i].wd + "></td>";

              } else {
                str += "<td class='location'> <input style='color:#000000;background-color:#ffffff;background-image:linear-gradient(to right, #fffff , #fffff' type='button' value='已处理'" + ' lgtd=' + result[i].jd + ' lttd=' + result[i].wd + "></td>";

              }
            }

            str += '</tr>';
            dom.append(str);

 public/map/widgets/supervisoryMap/template.html

@@ -7,7 +7,7 @@
    <!-- 展示分析研判 -->
    <div class="analysis-container">
        <!-- 设备信息 -->
        <!-- <div class="analysis-container-equipment">
        <div class="analysis-container-equipment">
            <div class="analysis-category">
                <ul>
                    <li id='equipmentCategory'>
@@ -57,7 +57,7 @@
                    </div>
                </div>
            </div>
        </div> -->
        </div>
        <!-- 警情信息 -->
        <div class="analysis-container-police">
            <div class="analysis-category">
@@ -109,7 +109,7 @@
                                    <th>类别</th>
                                    <th>接警员</th>
                                    <th>日期</th>
                                    <!-- <th>操作</th> -->
                                    <th>状态</th>
                                </tr>
                            </thead>
                        </table>