<template>
    <div class="gis">
        <div id="mapbox">
            <div style="position:absolute;left:500px;top:10px">
                <button @click="Mutil.tianSlA()" class="map-botton">卫星地图</button>
                <button @click="Mutil.tianSlB()" class="map-botton">全景地图</button>
            </div>

            <div v-show="isShowVideo" v-drag
                 style="display: none;position:absolute;left:1000px;top:10px;z-index: 30;padding: 5px; background-color: rgba(2, 40, 90, 0.8);width: 400px;height: 255px;border-radius: 5px;border: 1px solid #000;">
                <div style="width: 100%;height: 30px;">
                    <span style="float: left;color: #fff;font-size: 1rem;">{{deviceVideo.deviceName}}</span>
                    <span @click="closeVideo" style="float: right;margin-right: 10px;font-size: 1.5rem;color: #fff;"
                          class="el-icon-close"></span>
                </div>
                <div id="div_video"></div>
            </div>



        </div>
        <div style="">
            <div
                    style="width: 500px;height: 100%;z-index: 11;background-color: rgba(2, 40, 90, 0.7);position: absolute;top: 0;left: 10px;float: left;">
                <QyMapone></QyMapone>
            </div>
            <div class="markBox">
                <div @click="mapqiye" class="markbox-div" ref="qyzc" style="margin-top: 100px;">
                        <div class="markbox-click" ref="qyimg" style="width: 30%;height: 100%;float: left;text-align: right;">
                            <img width="27px" src="@/assets/mark/markqy.png" />
                        </div>
                        <div class="markbox-span" ref="zqyzc" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
                            <span>企业注册<p></p><span style="font-family: 'UnidreamLED';font-size: 1.5rem;">{{tjNumberObj.enterpriseRegNum}}</span></span>
                        </div>
                </div>
                
                <div @click="mapwxy" class="markbox-div" ref="wxy">
                        <div class="markbox-click" ref="wxyimg" style="width: 30%;height: 100%;float: left;text-align: right;">
                            <img width="35px" src="@/assets/mark/weixianyuan.png"  style="margin-top: 20px;"/>
                        </div>
                        <div class="markbox-span" ref="zwxy" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
                            <span>危险源<p></p><span style="font-family: 'UnidreamLED';font-size: 1.5rem;">{{tjNumberObj.dangerNum}}</span></span>
                        </div>

                </div>
                <div @click="mapshipin" class="markbox-div" ref="jk">
                        <div class="markbox-click" ref="shipinimg" style="width: 30%;height: 100%;float: left;text-align: right;">
                            <img width="32px" src="@/assets/mark/jiankong.png" />
                        </div>

                        <div class="markbox-span" ref="zjk" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
                            <span>监控监测点<p></p><span style="font-family: 'UnidreamLED';font-size: 1.5rem;">{{tjNumberObj.cameraNum}}</span></span>
                        </div>
                </div>
                <div class="markbox-div" ref="wh">
                        <div ref="whimg" class="markbox-click" style="width: 30%;height: 100%;float: left;text-align: right;">
                            <img width="32px" src="@/assets/mark/weihaichangsuo.png" />
                        </div>
                        <div class="markbox-span" ref="zwh" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
                            <span>职业危害场所<p></p><span style="font-family: 'UnidreamLED';font-size: 1.5rem;">0</span></span>
                        </div>
                </div>
                
                <div @click="yinhuan" class="markbox-div" ref="yh">
                        <div class="markbox-click" ref="yhimg" style="width: 30%;height: 100%;float: left;text-align: right;">
                            <img width="30px" src="@/assets/mark/yinhuan.png" />
                        </div>
                        <div class="markbox-span" ref="zyh" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
                            <span>隐患<p></p><span style="font-family: 'UnidreamLED';font-size: 1.5rem;">{{tjNumberObj.troubleNum}}</span></span>
                        </div>
                  
                </div>
                
            </div>
        </div>
        <el-dialog title="危险源" :visible.sync="dialogVisible1">
            <el-form ref="goods" :model="goods" label-width="100px" class="demo-ruleForm">
                <el-form-item label="名称:" prop="goodsName">
                    <el-input v-model="goods.goodsName" placeholder="请输入危险源名称" />
                </el-form-item>
                <el-form-item label="物品类型:" prop="category">
                    <el-input v-model="goods.category" placeholder="请输入物品类型" />
                </el-form-item>
                <el-form-item label="联系人:" prop="contacts">
                    <el-input v-model="goods.contacts" placeholder="请输入联系人" />
                </el-form-item>
                <el-form-item label="联系电话:" prop="phone">
                    <el-input v-model="goods.phone" placeholder="请输入联系电话" />
                </el-form-item>
                <el-form-item label="危险等级:" prop="dangerGrade">
                    <el-input v-model="goods.dangerGrade" placeholder="请输入危险等级" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel()">取 消</el-button>
                <el-button type="primary" @click="submit1()">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="隐患" :visible.sync="dialogVisible2">
            <el-form ref="trouble" :model="trouble" label-width="100px" class="demo-ruleForm">
                <el-form-item label="隐患名称:" prop="troubleName">
                    <el-input v-model="trouble.troubleName" placeholder="请输入隐患名称" />
                </el-form-item>
                <el-form-item label="隐患类型:" prop="troubleType">
                    <el-input v-model="trouble.troubleType" placeholder="请输入隐患类型" />
                </el-form-item>
                <el-form-item label="隐患等级:" prop="troubleLevel">
                    <el-input v-model="trouble.troubleLevel" placeholder="请输入隐患等级(Ⅰ级，Ⅱ级，Ⅲ级)" />
                </el-form-item>
                <el-form-item label="地址:" prop="address">
                    <el-input v-model="trouble.address" placeholder="请输入地址" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel()">取 消</el-button>
                <el-button type="primary" @click="submit2()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    import {
        Component,
        Vue,
        Provide
    } from "vue-property-decorator";
    import METHOD from "@/utils/methods";
    import "@/utils/directive.js";
    import {
        Icon
    } from "element-ui";
    import "@/utils/VamapLoad.ts";
    import DrawTool from "@/components/drawTool.vue";
    import Search from "@/components/search.vue";
    import Mutil from "@/utils/mapUtil.js";
    import METHOD from "@/utils/methods";
    import QyMaptwo from './qyMaptwo.vue';
    import QyMapone from './qyMapone.vue';
    import vueDrag from 'vue-dragging'
    import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
    Vue.use(vueDrag)
    @Component({
        components: {
            DrawTool,
            Search,
            QyMapone,
            QyMaptwo
        },
    })
    export default class GIS extends Vue {


        @Provide() Mutil: any;
        @Provide() mapLoadDone = false;
        @Provide() MAP: any;
        @Provide() isShowVideo: boolean = false;
        @Provide() player: any;
        @Provide() mapOption = {
            plugin: [{
                pName: "MapType",
                defaultType: 1,
            },
                {
                    pName: "ToolBar",
                },
            ],
            center: [115, 28],
            zoom: 10,
            events: {},
        };
        @Provide() searchData: any = {
            type: "0",
        };
        /* 地图 */
        @Provide() markers: any = [];
        @Provide() markers1: any = [];
        @Provide() markers2: any = [];
        @Provide() markers3: any = [];
        @Provide() mapData: any = [];
        @Provide() windowsArr: any = [];
        @Provide() windowsArr1: any = [];
        @Provide() windowsArr2: any = [];
        @Provide() windowsArr3: any = [];
        @Provide() currentWindow: any = "";
        // @Provide() searchOption: any = {
        //     city: "石家庄",
        //     citylimit: true,
        // };
        @Provide() lastVideoPlayId: any = "";
        @Provide() markersB: any = [];
        @Provide() dialogVisible1: Boolean = false;
        @Provide() dialogVisible2: Boolean = false;
        @Provide() toolobj: any;
        @Provide() mouseTool: any; //测量工具
        @Provide() toolVisble: boolean = false;
        @Provide() tjNumberObj: any = {};
        @Provide() deviceVideo: any = {};
        @Provide() qiyeVisble: boolean = true;
        @Provide() wxyVisble: boolean = true;
        @Provide() shipinVisble: boolean = true;
        @Provide() weihaiVisble: boolean = true;
        @Provide() yinhuanVisble: boolean = true;
        @Provide() treecheckedObj: any = {};
        @Provide() goods: any = {};
        @Provide() trouble: any = {};

        getMapData() {
            let that = this;
            METHOD.axiosPost(
                that,
                `/enterpriseInfo/queryEnterpriseInfo`, {
                    page: 1,
                    size: 1000,
                    accountStatus: "0"
                },
                function (res: any) {
                    if (res.code == 0 && res.data.pageData.length > 0) {
                        that.mapData = res.data.pageData;
                        let latSum = 0;
                        let lngSum = 0;
                        that.mapData.forEach((ele: any, index: any) => {
                            that.addMark(ele, index);
                            lngSum += ele.longitude;
                            latSum += ele.latitude;
                        });
                        let center = [
                            lngSum / that.mapData.length,
                            latSum / that.mapData.length,
                        ];
                        that.Mutil.setViewF({
                            center: center
                        })
                    }
                }
            );
        }
        getWindowInfo(enterpriseId: string) {
            let that = this;
            (window as any).checkDetail = function (param: string) {
                that.$router.push({
                    path: "/EnDetail",
                    query: {
                        enterpriseId: param
                    }
                });
            };
            METHOD.axiosGet(
                that,
                `/enterpriseInfo/getMapEnterpriseInfoById/${enterpriseId}`,
                function (res: any) {
                    if (res.code == 0) {
                        let obj = res.data.enterpriseInfo,
                            zdnum = res.data.bigDangerNum,
                            wxnum = res.data.dangerNum,
                            html =
                                `<div class="windowDg"><h3>企业详细信息</h3>` +
                                `<p><span>企业名称:</span>${obj.unitName}</p>` +
                                `<p><span>统一社会信用代码:</span>${obj.orgCode}</p>` +
                                `<p><span>企业法人:</span>${obj.legalPerson}</p>` +
                                `<p><span>注册地址:</span>${obj.regAddress}</p>` +
                                `<p><span>法人邮箱:</span>${obj.legalPersonEmail}</p>` +
                                `<p><span>经营地址:</span>${obj.runAddress}</p>` +
                                `<p><span>法人手机:</span>${obj.legalPersonPhone}</p>` +
                                `<p><span>管理员姓名:</span>${obj.userName}</p>` +
                                `<p><span>管理员手机:</span>${obj.mobliePhone}</p>` +
                                `<p><span>管理员邮箱:</span>${obj.email}</p>` +
                                `<div class="wxyWrap">` +
                                `<span class="itm">${wxnum[0].gradeName}<br><b>${wxnum[0].num}个</b></span>` +
                                `<span class="itm">${wxnum[1].gradeName}<br><b>${wxnum[1].num}个</b></span>` +
                                `<span class="itm">${wxnum[2].gradeName}<br><b>${wxnum[2].num}个</b></span>` +
                                `<span class="itm">${wxnum[3].gradeName}<br><b>${wxnum[3].num}个</b></span>` +
                                `<span class="itm">重大危险源<br>${zdnum}个</span>` +
                                `</div>` +
                                `<div class="cent margT10"><button class="el-button el-button--small" onclick="checkDetail('${obj.enterpriseId}')">查看企业详情</button></div>` +
                                `</div>`;
                        that.Mutil.addPopup(html, obj.enterpriseId, obj.longitude, obj.latitude)

                    }
                }
            );
        }
        getWxyWindowInfo(goodsId: string) {
            let that = this;
            (window as any).dialogVisible1Change = function () {
                that.dialogVisible1Change(goodsId);
            };
            METHOD.axiosGet(
                that,
                `/enterpriseGoods/getMapEnterpriseGoodsById/${goodsId}`,
                function (res: any) {
                    if (res.code == 0) {
                        let goods = res.data,
                            html =
                                `<div class="windowDg"><h3>危险源</h3>` +
                                `<p><span>名称:</span>${goods.goodsName}</p>` +
                                `<p><span>物品类型:</span>${goods.category}</p>` +
                                `<p><span>联系人:</span>${goods.contacts}</p>` +
                                `<p><span>联系电话:</span>${goods.phone}</p>` +
                                `<p><span>危险等级:</span>${goods.dangerGrade}</p>` +
                                `</div>` +
                                `<p class="gengxin"><button class="el-button el-button--small" onClick="dialogVisible1Change('${goods.id}')" size="small">修改</button></p>`;
                        that.Mutil.addPopup(html, goods.id, goods.longitude, goods.latitude)

                    }
                }
            );
        }

        getshipinWindowInfo(deviceId: string) {
            let that = this;
            this.closeVideo();
            METHOD.axiosGet(
                that,
                `/safetyDeviceInfo/getSafetyDeviceInfoById/${deviceId}`,
                function (res: any) {
                    if (res.code == 0) {
                        that.treecheckedObj = res.data;
                        that.deviceVideo = res.data;
                        let device = res.data;
                        that.isShowVideo = true;
                        that.player.play('http://27.128.189.137:18000/flv/hls/' + that.treecheckedObj.deviceNumber + '.flv', 1);
                        that.lastVideoPlayId = that.treecheckedObj.deviceNumber;//记录上次播放的视频ID
                    }
                }
            );
        }
        getyinhuanWindowInfo(troubleId: string) {
            let that = this;
            (window as any).dialogVisible2Change = function () {
                that.dialogVisible2Change(troubleId);
            };
            this.closeVideo();
            METHOD.axiosGet(
                that,
                `/hiddenTrouble/getMapHiddenTroubleById/${troubleId}`,
                function (res: any) {
                    if (res.code == 0) {
                        let trouble = res.data,
                            html =
                                `<div class="windowDg"><h3>隐患</h3>` +
                                `<p><span>隐患名称:</span>${trouble.troubleName}</p >` +
                                `<p><span>隐患类型:</span>${trouble.troubleType}</p >` +
                                `<p><span>隐患等级:</span>${trouble.troubleLevel}</p >` +
                                `<p><span>地址:</span>${trouble.address}</p >` +
                                `</div>` +
                                `<p class="gengxin"><button class="el-button el-button--small" onClick="dialogVisible2Change('${trouble.id}')" size="small">修改</button></p>`;
                        that.Mutil.addPopup(html, trouble.id, trouble.longitude, trouble.latitude)

                    }
                }
            );
        }
        //关闭视频方法
        closeVideo() {
            if (this.lastVideoPlayId != "") {
                this.player.stop('http://27.128.189.137:18000/flv/hls/' + this.lastVideoPlayId + '.flv', 1);
            }
            this.isShowVideo = false;
        }
        addMark(obj: any, index: any) {
            let icon,
                that = this;
            icon = require("@/assets/mark/markqy.png");
            let option = {
                position: [Number(obj.longitude), Number(obj.latitude)],
                content: ` <img src="${icon}" width="25">`,
                label: {
                    content: obj.unitName,
                    offset: [28, -7]
                },
                offset: [-13, -2],
                events: {
                    click: (e: any) => {
                        that.windowsArr.forEach((ele: any) => {
                            // console.log(ele,"ele")
                            ele.visible = false;
                        });
                        that.$nextTick(() => {
                            // console.log(ele,"ele")
                            that.currentWindow = that.windowsArr[index];
                            that.currentWindow.visible = true;
                        });
                    },
                },
                visible: true,
            };
            that.Mutil.addMarkerToMap(
                'qiye',
                obj.unitName,
                icon,
                [obj.longitude, obj.latitude],
                0.4,
                obj.enterpriseId
            );
        }
        wxyaddMark(obj: any, index: any) {
            let icon,
                that = this;
            icon = require("@/assets/mark/weixianyuan.png");
            let option = {
                position: [Number(obj.longitude), Number(obj.latitude)],
                content: ` <img src="${icon}" width="50">`,
                label: {
                    content: obj.unitName,
                    offset: [28, -7]
                },
                offset: [-13, -2],
                events: {
                    click: (e: any) => {
                        that.windowsArr1.forEach((ele: any) => {
                            ele.visible = false;
                        });
                        that.$nextTick(() => {
                            that.currentWindow = that.windowsArr1[index];
                            that.currentWindow.visible = true;
                        });
                    },
                },
                visible: true,
            };
            that.Mutil.addMarkerToMap(
                'wxy',
                obj.goodsName,
                icon,
                [obj.longitude, obj.latitude],
                0.6,
                obj.id
            );
        }
        shipinaddMark(obj: any, index: any) {
            let icon,
                that = this;
            icon = require("@/assets/mark/jiankong.png");
            let option = {
                position: [Number(obj.longitude), Number(obj.latitude)],
                content: ` <img src="${icon}" width="50">`,
                label: {
                    content: obj.unitName,
                    offset: [28, -7]
                },
                offset: [-13, -2],
                events: {
                    click: (e: any) => {
                        that.windowsArr2.forEach((ele: any) => {
                            ele.visible = false;
                        });
                        that.$nextTick(() => {
                            that.currentWindow = that.windowsArr2[index];
                            that.currentWindow.visible = true;
                        });
                    },
                },
                visible: true,
            };
            that.Mutil.addMarkerToMap(
                'shipin',
                obj.deviceName,
                icon,
                [obj.longitude, obj.latitude],
                0.6,
                obj.id
            );
        }
        yhaddMark(obj: any, index: any) {
            let icon,
                that = this;
            icon = require("@/assets/mark/yinhuan.png");
            let option = {
                position: [Number(obj.longitude), Number(obj.latitude)],
                content: ` <img src="${icon}" width="50">`,
                label: {
                    content: obj.unitName,
                    offset: [28, -7]
                },
                offset: [-13, -2],
                events: {
                    click: (e: any) => {
                        that.windowsArr3.forEach((ele: any) => {
                            ele.visible = false;
                        });
                        that.$nextTick(() => {
                            that.currentWindow = that.windowsArr3[index];
                            that.currentWindow.visible = true;
                        });
                    },
                },
                visible: true,
            };
            that.Mutil.addMarkerToMap(
                'yh',
                obj.troubleName,
                icon,
                [obj.longitude, obj.latitude],
                0.6,
                obj.id
            );
        }
        change(v: any) {
            let that = this;
            that.mapData.forEach((ele: any, index: any) => {
                if (ele.dataType == v || v == 0) {
                    that.markers[index].visible = true;
                } else {
                    that.markers[index].visible = false;
                }
            });
            that.wxymapData.forEach((ele: any, index: any) => {
                if (ele.dataType == v || v == 0) {
                    that.markers1[index].visible = true;
                } else {
                    that.markers1[index].visible = false;
                }
            });
            that.shipinmapData.forEach((ele: any, index: any) => {
                if (ele.dataType == v || v == 0) {
                    that.markers2[index].visible = true;
                } else {
                    that.markers2[index].visible = false;
                }
            });
            that.yhmapData.forEach((ele: any, index: any) => {
                if (ele.dataType == v || v == 0) {
                    that.markers3[index].visible = true;
                } else {
                    that.markers3[index].visible = false;
                }
            });
        }

        /* 搜索 */
        onSearchResult(pois: any) {
            let latSum = 0;
            let lngSum = 0;
            if (pois.length > 0) {
                pois.forEach((poi: any) => {
                    let {
                        lng,
                        lat
                    } = poi;
                    lngSum += lng;
                    latSum += lat;
                    this.markersB.push([poi.lng, poi.lat]);
                });
                let center = {
                    lng: lngSum / pois.length,
                    lat: latSum / pois.length,
                };
                this.mapOption.center = [center.lng, center.lat];
            }
        }
        getPopcon(qyid: any) {
            let that = this;
            that.getWindowInfo(qyid);
        }
        getWxyPopcon(wxyid: any) {
            let that = this;
            that.getWxyWindowInfo(wxyid);
        }
        getshipinPopcon(shipinid: any) {
            let that = this;
            that.getshipinWindowInfo(shipinid);
        }
        getyinhuanPopcon(yinhuanid: any) {
            let that = this;
            that.getyinhuanWindowInfo(yinhuanid);
        }
        created() {
            this.getMapData();
        }
        cancel(){
            this.goods={};
            this.trouble={};
            this.dialogVisible1 = false;
            this.dialogVisible2 = false;
        }
        dialogVisible1Change(goodsId: string) {
            let that = this;
            METHOD.axiosGet(
                that,
                `/enterpriseGoods/getMapEnterpriseGoodsById/${goodsId}`,
                function (res: any) {
                    if (res.code == 0) {
                        console.log(res.data)
                        that.goods = res.data;
                        that.dialogVisible1 = true;
                    }
                }
            );
        }
        submit1() {
            let that = this;
            (that as any).$refs["goods"].validate((valid: Boolean) => {
                if (valid) {
                    let param = Object.assign(that.goods);
                    METHOD.axiosPost(that, `/enterpriseGoods/editMapEnterpriseGoods`, param, function (res: any) {
                        if (res.code == 0) {
                            that.$message({
                                type: "success",
                                message: "修改危险源成功",
                            });
                            that.dialogVisible1 = false;
                        }
                    });
                }
            });
        }
        dialogVisible2Change(troubleId: string) {
            let that = this;
            METHOD.axiosGet(
                that,
                `/hiddenTrouble/getMapHiddenTroubleById/${troubleId}`,
                function (res: any) {
                    if (res.code == 0) {
                        that.trouble = res.data;
                        that.dialogVisible2 = true;
                    }
                }
            );
        }
        submit2() {
            let that = this;
            (that as any).$refs["trouble"].validate((valid: Boolean) => {
                if (valid) {
                    let param = Object.assign(that.trouble);
                    METHOD.axiosPost(that, `/hiddenTrouble/editMapHiddenTrouble`, param, function (res: any) {
                        if (res.code == 0) {
                            that.$message({
                                type: "success",
                                message: "修改隐患成功",
                            });
                        }
                        that.dialogVisible2 = false;
                    });
                }
            });
        }
        mounted() {

            let that = this;

            that.player = new WasmPlayer(null, "div_video", null);
            that.mapLoadDone = true;
            that.Mutil = new Mutil("mapbox");
            that.MAP = that.Mutil.MAP;
            that.Mutil.mapSelectBind((evt: any) => {
                //这是地图marker点击回调监听
                if (evt.selected[0].get('type') === 'qiye') {
                    that.Mutil.closeAllOverlays();
                    let id = evt.selected[0].get('did');
                    if (id) that.getPopcon(id);
                } else if (evt.selected[0].get('type') === 'wxy') {//其他类的气泡
                    that.Mutil.closeAllOverlays();
                    let id = evt.selected[0].get('did');
                    if (id) that.getWxyPopcon(id);
                } else if (evt.selected[0].get('type') === 'shipin') {//其他类的气泡
                    that.Mutil.closeAllOverlays();
                    let id = evt.selected[0].get('did');
                    if (id) that.getshipinPopcon(id);
                } else if (evt.selected[0].get('type') === 'yh') {//其他类的气泡
                    that.Mutil.closeAllOverlays();
                    let id = evt.selected[0].get('did');
                    if (id) that.getyinhuanPopcon(id);
                }


            })
            this.getStatiData();
            this.Mutil.getBoundaries("新乐");
        }

        mapqiye() {
            if (this.qiyeVisble) {
                this.Mutil.visibleMarks(false, "qiye");
                this.qiyeVisble = false;
                this.$refs.qyzc.style.background = "#24BBC7";
                this.$refs.zqyzc.lastChild.style.color = "#013056";                
                // this.$refs.qyimg.lastChild.style.display = "none";

            } else {
                this.Mutil.visibleMarks(true, "qiye");
                this.qiyeVisble = true;
                this.$refs.qyzc.style.background = "RGBA(5, 52, 82, 0.7)";
                this.$refs.zqyzc.lastChild.style.color = "#fff";
            }

        }
        // mapbox(){
        //     let that = this;
        //     that.Mutil.closeAllOverlays();
        // }
        mapwxy() {
            if (this.wxyVisble) {
                this.Mutil.visibleMarks(false, "wxy");
                this.wxyVisble = false;
                this.$refs.wxy.style.background = "#24BBC7";
                this.$refs.zwxy.lastChild.style.color = "#013056";
            } else {
                this.Mutil.visibleMarks(true, "wxy");
                this.wxyVisble = true;
                this.$refs.wxy.style.background = "RGBA(5, 52, 82, 0.7)";
                this.$refs.zwxy.lastChild.style.color = "#fff";
            }
        }
        mapshipin() {
            if (this.shipinVisble) {
                this.Mutil.visibleMarks(false, "shipin");
                this.shipinVisble = false;
                this.$refs.jk.style.background = "#24BBC7";
                this.$refs.zjk.lastChild.style.color = "#013056";
            } else {
                this.Mutil.visibleMarks(true, "shipin");
                this.shipinVisble = true;
                this.$refs.jk.style.background = "RGBA(5, 52, 82, 0.7)";
                this.$refs.zjk.lastChild.style.color = "#fff";
            }
        }
        yinhuan() {
            if (this.yinhuanVisble) {
                this.Mutil.visibleMarks(false, "yh");
                this.yinhuanVisble = false;
                this.$refs.yh.style.background = "#24BBC7";
                this.$refs.zyh.lastChild.style.color = "#013056";
            } else {
                this.Mutil.visibleMarks(true, "yh");
                this.yinhuanVisble = true;
                this.$refs.yh.style.background = "RGBA(5, 52, 82, 0.7)";
                this.$refs.zyh.lastChild.style.color = "#fff";
            }
        }
        // editFun(row: any) {
        //     this.dialogTit = "编辑";
        //     this.formData = Object.assign({}, row);
        //     this.zjKey++;
        //     this.dialogVisible = true;
        // }
        getStatiData() {
            let that = this;
            METHOD.axiosPost(
                that,
                `/dataStatistics/managerDataStatistics`,
                { cityId: "", countyId: "", provinceId: "" },
                function (res: any) {
                    if (res.code == 0) {
                        that.tjNumberObj = res.data;
                        console.log("that.tjNumberObj", that.tjNumberObj)
                        let obj = res.data,
                            arr: any = [];
                        arr.push({
                            name: "预警处理中",
                            value: Number(obj.alarmingNum),
                        });
                        arr.push({
                            name: "预警已处理",
                            value: Number(obj.handleAlarmNum),
                        });


                        // that.$nextTick(() => {
                        //   that.$set(that.config, "data", arr);
                        // });

                        if (res.code == 0 && res.data.goodsList.length > 0) {
                            that.wxymapData = res.data.goodsList;
                            let wxylatSum = 0;
                            let wxylngSum = 0;
                            that.wxymapData.forEach((ele: any, index: any) => {
                                that.wxyaddMark(ele, index);
                                wxylngSum += ele.longitude;
                                wxylatSum += ele.latitude;
                            });
                            let center = [
                                wxylngSum / that.wxymapData.length,
                                wxylatSum / that.wxymapData.length,
                            ];
                            that.Mutil.setViewF({
                                center: center
                            })
                        }
                        if (res.code == 0 && res.data.cameraList.length > 0) {
                            that.shipinmapData = res.data.cameraList;
                            let shipinlatSum = 0;
                            let shipinlngSum = 0;
                            that.shipinmapData.forEach((ele: any, index: any) => {
                                that.shipinaddMark(ele, index);
                                shipinlngSum += ele.longitude;
                                shipinlatSum += ele.latitude;
                            });
                            let center = [
                                shipinlngSum / that.shipinmapData.length,
                                shipinlatSum / that.shipinmapData.length,
                            ];
                            that.Mutil.setViewF({
                                center: center
                            })
                        }
                        if (res.code == 0 && res.data.troubleList.length > 0) {
                            that.yhmapData = res.data.troubleList;
                            let yhlatSum = 0;
                            let yhlngSum = 0;
                            that.yhmapData.forEach((ele: any, index: any) => {
                                that.yhaddMark(ele, index);
                                yhlngSum += ele.longitude;
                                yhlatSum += ele.latitude;
                            });
                            let center = [
                                yhlngSum / that.yhmapData.length,
                                yhlatSum / that.yhmapData.length,
                            ];
                            that.Mutil.setViewF({
                                center: center
                            })
                        }
                    }
                }
            );
        }
    }
</script>

<style lang="scss">
    @import "@/utils/public.scss";

    .map-botton {
        width: 100px;
        height: 50px;
        outline: none;
        z-index: 10;
        position: absolute;
    }

    .gengxin {
        text-align: center;
        color: #fff;
    }

    .map-botton:nth-child(1) {
        left: 50px;
    }

    .map-botton:nth-child(2) {
        left: 160px;
    }

    .map-botton:nth-child(3) {
        left: 270px;
    }

    #mapbox {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .gis {
        position: relative;
        overflow: hidden;
    }

    /* .div-isShowVideo{
    width: 200px;
    height: 350px;
} */
    /* .div-isShowVideo .divspan{
    width: 100%;
    height: 20px;
} */
    .markBox {
        z-index: 30;
        width: 185px;
        height: calc(100vh - 230px);
        background: url('../../assets/z3.png') 100% 100%;
        position: absolute;
        top: -67px;
        right: 10px;
    }

    .markBox .markbox-div {
        width: 100%;
        height: 70px;
        text-align: center;
        background-color: RGBA(17, 59, 89, 0.7);
        font-size: 100% 100%;
        margin-top: 30px;
        cursor:pointer;
    }

    .markbox-span {
        float: right;
        text-align: center;
        font-size: 15px;
        /* font-family: 'UnidreamLED'; */
        color: #fff;
    }

    .markbox-click img {
        /* width: 30px; */
        margin-top: 17px;
    }

    .show-box {
        position: absolute !important;
        z-index: 9;
        /* background: rgba(204, 204, 204, 0.7); */
        top: 4px;
        right: 10px;
    }

    .search-box {
        position: absolute !important;
        top: 14px;
        left: 80px;
    }

    .ol-zoom {
        top: .5em;
        left: 500px !important;
    }
</style>