<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=no" />
    <title>中和地信企业管理平台</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="css/element-ui.css">
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="css/vant@4.css"/>
    <!-- 先引入 Vue -->
    <script src="js/vue.min.js"></script>
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="js/vue@2.6.14"></script>
    <script src="js/vant.min.js"></script>

    <style>
        .amap-logo {
            z-index: -10;
        }
        .amap-copyright{
            z-index: -10;
        }
        .el-autocomplete-suggestion{
            width: 330px !important;
        }
        .my-autocomplete li{
            line-height: normal;
            padding: 7px;
        }
        .name {
            text-overflow: ellipsis;
            overflow: hidden;
            color: #ffffff;
        }
        .addr {
            font-size: 12px;
            color: rgba(255,255,255,.6);
        }

        .highlighted .addr {
            color: #ddd;
        }

        .el-autocomplete-suggestion li.highlighted, .el-autocomplete-suggestion li:hover{
            background-color: rgba(13,27,48,.7) !important;
        }

        .el-scrollbar__wrap{
            overflow-y: auto;
            overflow-x: hidden;
        }

        .highlight{
	        animation: rotatePercent 2s linear infinite;
        }
        @keyframes rotatePercent{
	        0% {
	            transform: translateX(-25px) translateY(-25px) scale(1);
	        }
            25%{
                transform: translateX(-25px) translateY(-25px) scale(1.2);
            }
            50%{
                transform: translateX(-25px) translateY(-25px) scale(1);
            }
            75%{
                transform: translateX(-25px) translateY(-25px) scale(0.8);
            }
	        100% {
	            transform: translateX(-25px) translateY(-25px) scale(1);
	        }
	    }

        .el-autocomplete-suggestion{
            background-color: rgba(13,27,48,.7) !important;
            border: none !important;
        }
        .el-popper[x-placement^=bottom] .popper__arrow::after{
            border-bottom-color: rgba(13,27,48,.7) !important;
        }

		@keyframes floatShadow {
		  0% {
			text-shadow: 0 0 5px #fff;
			transform:translateX(1300px);
			display:block;
		  }
		  100% {
			text-shadow: 0 0 5px #fff;
			transform:translateX(-1300px);
			display:none;
		  }
		}
		 
		.floating-text {
		  font-size: 30px;
		  color: #FDD756;
		  //animation: floatShadow;
		  animation-name:floatShadow;
		  animation-duration: 20s;
		  animation-iteration-count: infinite;
		  animation-timing-function:linear;
		  position:absolute;
		}

		.a0a_{
			position: absolute;
			top: 0;
			left: 0;
			height: 0;
			width: 100%;
			display: flex;
			justify-content: space-between;
		}
		.a0a_ ul{
			height: 0;
			display: flex;
			margin-top:5vh;
			width: 300px;
		}
		.a0a_ ul:first-child{margin-left:12vw;}
		.a0a_ ul:last-child{margin-right:12vw;}
		.a0a_ ul li{
			cursor: pointer;
			border-radius: 5px;
			background-repeat: no-repeat;
			background-position: top center;
			background-size: 100% 100%;
			background-image: url(static/img/h_btn.png);
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 16px;
			border:1px solid green;
			height:35px;
			width:140px;
			margin-left:50px;
		}
		.a0a_ ul .active{
			background-image:url(static/img/h_btn_a.png);
		}
    </style>
</head>

<body>
    <div id="app">
        <div class="fixed wp100 hv100" style="background-color: #000000;left: 0;top: 0;z-index: 1999;"
            v-show="!isReady"></div>
        <!-- title -->
        <div style="height: 120px;">
            <div class="flex-text color-theme f30 wp100 relative maxIndex fixed"
                :class="isFullScreen?'tr-top':'tr-top-re'"
                style="height: 120px;background-image: url('static/title.png');background-size: 100% 100%;">
                <div style="margin-top: -44px;">中和地信企业管理平台</div>
				<div class="floating-text">中和地信有限公司欢迎您</div>


				<div class="a0a_">
					<ul><li data-id="1" class="active">应急管理</li> <li data-id="2" class="">自然资源</li></ul>
					<ul><li data-id="5" class="">水利系统</li> <li data-id="6" class="">电子档案</li></ul>
				</div>
            </div>
        </div>

        <div class="fixed flex-text maxIndex pointer" style="right: 30px;top: 45px;"
            @click="gotoManagement()"
            :class="isFullScreen?'tr-top':'tr-top-re'">
            <img style="width: 24px;height: 24px;" src="static/backstage.png" alt="">
            <div class="f20 color-theme ml10">后台管理</div>
        </div>

        <div class="wp100 hv100 fixed" style="left: 0;top: 0;" id="map"></div>

        <div class="fixed hv100" :class="isFullScreen?'tr-left':'tr-left-re'"
            style="left: 0;top: 0;background: linear-gradient(to right, rgba(12,29,47,.9), rgba(12,29,47,0));pointer-events:none;" :style="{ width: 490 * heightScale+ 'px' }">
        </div>
        <div class="fixed hv100" :class="isFullScreen?'tr-right':'tr-right-re'"
            style="right: 0;top: 0;background: linear-gradient(to right, rgba(12,29,47,0), rgba(12,29,47,.9));pointer-events:none;" :style="{ width: 490 * heightScale+ 'px' }">
        </div>
        <div class="fixed wp100" :class="isFullScreen?'tr-bottom':'tr-bottom-re'"
            style="left: 0;bottom: 0;height: 300px;background: linear-gradient(to bottom, rgba(12,29,47,0), rgba(12,29,47,.9));pointer-events:none;">
        </div>

        <!-- mask -->
        <!-- <div class="fixed wp100 hv100" style="z-index: 199;" @click="showMask = aiShowMask = false"
            v-show="showMask || aiShowMask"></div> -->

        <div class="flex-text" style="margin-top: -20px;">
            <div :class="isFullScreen?'tr-left':'tr-left-re'"
                class="flex flex-column space-between relative" :style="{ height: 980 / heightScale + 'px', width: 514 * heightScale + 'px' }">
                <!-- 物联网主机 -->
                <div style="transform-origin: left top;left: 0;top: 0;" class="absolute" :style="{transform: 'scale(' + ( heightScale) + ')'}">
                    <div style="width: 514px;">
                        <div class="ml10 flex align-center f20 color-theme wp100"
                            style="background-image: url('static/sub-title.png');background-size: 100% 100%;height: 48px;">
                            <div class="ml40">物联网主机</div>
                        </div>
                        <div class="relative" style="height: 220px;width: 480px;">
                            <div class="flex-text" style="transform: rotateX(65deg) translateY(-180px);">
                                <img class="rotateImg" style="width: 420px;height: 420px;" src="static/rotate.png" alt="">
                            </div>
                            <div class="absolute wp100" style="left: 0;top: 30px;">
                                <el-carousel indicator-position="none" type="card" :autoplay="true" :interval="3000"
                                    arrow="never" @change="swiper = $event">
                                    <el-carousel-item v-for="(item,index) in main" :key="index">
                                        <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
                                            <div class="relative auto" style="width: 101px;">
                                                <img class="animation" :class="index == swiper?'mt40':''"
                                                    style="width: 101px;height: 94px;"
                                                    :src="item.isLine == 1?'static/on-line.png':'static/off-line.png'"
                                                    alt="">
                                                <div class="poa-cover text-center f16"
                                                    :class="item.isLine == 1?'color-yellow':'color-theme'">{{ item.isLine ==
                                                    1 ? '在线' : '离线' }}</div>
                                            </div>
                                        </el-tooltip>
                                    </el-carousel-item>
                                </el-carousel>
                            </div>
                        </div>
                    </div>
                    <!-- 在线监测实时报警 -->
                    <div class="mt20 mb20 animation relative ovh" style="width: 514px;height: 316px;">
                        <div class="ml10 flex align-center f20 color-theme wp100"
                            style="background-image: url('static/sub-title.png');background-size: 100% 100%;height: 48px;">
                            <div class="ml40">在线监测实时报警</div>
                        </div>
                        <div style="width: 483px;background: linear-gradient(to right, rgba(171,238,255,.6),rgba(171,238,255,0));"
                            class="h30 color-light flex space-between align-center f18 ml5 mt10">
                            <div style="width: 120px;" class="flex-text">矿山名称</div>
                            <div class="flex-1 text-center">设备名称</div>
                            <div class="text-center flex-1">报警时间</div>
                            <div class="flex-text" style="width: 90px;">状态</div>
                            <div style="width: 3px;" class="h30"></div>
                        </div>
                        <div class="absolute ml5" style="height: 228px;overflow-y: scroll;width: 483px;">
                            <div class="solid-bottom flex space-between f14" style="height: 64px;"
                                v-for="(item,index) in alarm" :key="index">
                                <div style="width: 120px;" class="flex-text ovh">
                                    <div class="flex-1 ml10 mr10 ellipsis2 text-center">{{ item.name }}</div>
                                </div>
                                <div class="flex-1 flex-text ovh">
                                    <div class="flex-1 ml10 mr10 ellipsis text-center">{{ item.equipment }}</div>
                                </div>
                                <div class="text-center flex-1 flex-text">
                                    <div>
                                        <div>{{ item.day }}</div>
                                        <div>{{ item.time }}</div>
                                    </div>
                                </div>
                                <div class="flex-text" style="width: 90px;" :class="item.status == 1?'':'color-yellow'">{{
                                    item.statusTxt }}</div>
                            </div>
                        </div>
                    </div>
                    <!-- 在线监测报警统计 -->
                    <div style="width: 514px;">
                        <div class="ml10 flex align-center f20 color-theme wp100"
                            style="background-image: url('static/sub-title.png');background-size: 100% 100%;height: 48px;">
                            <div class="ml40">在线监测报警统计</div>
                        </div>
                        <div class="flex-text ml20 mt10" style="width: 450px;">
                            <div class="flex-1 flex-text f14 pointer animation"
                                :class="[index == 0?'':'ml15',index == TabCur?'color-light':'']"
                                style="height: 38px;background-image: url('static/button-bg.png');background-size: 100% 100%;"
                                v-for="(item,index) in tabs" :key="index" @click="changeTab(index)">{{ item }}</div>
                        </div>
                        <div class="space-end mt10 flex ml20" style="width: 450px;">
                            <div class="h30 flex-text pointer relative"
                                style="width: 90px;background-image: url('static/time-button-bg.png');background-size: 100% 100%;z-index: 200;"
                                @click="showMask = !showMask;aiShowMask = false">
                                <div class="color-theme f14" style="transform: translateY(-2px);">{{ timeSelect[active] }}
                                </div>
                                <img class="ml5" style="width: 8px;height: 8px;transform: translateY(-2px);"
                                    src="static/drop-down.png" alt="">
    
                                <div class="absolute wp100 selece-box"
                                    style="left: 0;bottom: 0;transform: translateY(calc(100% + 10px));background-color: rgba(13,27,48,.7);border-radius: 5px;padding: 3px 0;"
                                    v-show="showMask">
                                    <div class="f14 h30 flex-text select" :class="index == active?'color-light':''"
                                        style="padding: 0 10px;" v-for="(item,index) in timeSelect" :key="index"
                                        @click.stop="clickActive(index)">
                                        <div class="flex-1">{{ item }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="main" style="width: 100%;height:220px;"></div>
                    </div>
                </div>
            </div>

            <!-- center -->
            <div class="relative maxIndex flex-1" style="pointer-events:none;" :style="{ height: 980 / heightScale + 'px' }">
                <div class="flex-text mt10" :style="{ transform: 'scale(' + (widthScale > 1 ? 1 : widthScale) + ')' }">
                    <div>
                        <!-- notice -->
                        <div class="wp100 h50 round flex-text pointer" style="background-color: rgba(13,27,48,.7);pointer-events:auto;">
                            <div class="flex-1" v-if="isReady">
                                <van-notice-bar background="none" left-icon="volume-o" color="#ffffff" :speed="80" :text="(notice.type?'【'+notice.type+'】':'')+notice.title" @click="noticeMask = true"/>
                            </div>
                        </div>
    
                        <div class="flex-text mt10">
                            <div style="width: 80px;" ref="control"></div>
                            <div class="h50 round flex-text pointer"
                                style="background-color: rgba(13,27,48,.7);width: 120px;pointer-events:auto;"
                                @click="isRoad = !isRoad">
                                <div class="h50 round flex-text map-icon" style="width: 120px;">
                                    <div class="round flex-text" style="width: 16px;height: 16px;border: 2px solid #ffffff;">
                                        <div class="round" style="width: 8px;height: 8px;background-color: #ffffff;"
                                            v-if="isRoad"></div>
                                    </div>
                                    <div class="f20 ml10">路网</div>
                                </div>
                            </div>
                            <div class="h50 round flex-text ml10 ovh"
                                style="background-color: rgba(13,27,48,.7);pointer-events:auto;padding: 0 12px;">
                                <div class="flex-text h50 pointer map-icon" style="width: 50px;" @click="zoomIn"><img
                                        style="width: 26px;height: 26px;" src="static/map-icon-0.png" alt=""></div>
                                <div class="flex-text h50 pointer map-icon" style="width: 50px;" @click="zoomOut"><img
                                        style="width: 26px;height: 26px;" src="static/map-icon-1.png" alt=""></div>
                                <div class="flex-text h50 pointer map-icon" :class="drawType == 'line'?'bg-mask':''"
                                    style="width: 50px;" @click="draw('line')"><img style="width: 26px;height: 26px;"
                                        src="static/map-icon-2.png" alt=""></div>
                                <div class="flex-text h50 pointer map-icon" :class="drawType == 'area'?'bg-mask':''"
                                    style="width: 50px;" @click="draw('area')"><img style="width: 26px;height: 26px;"
                                        src="static/map-icon-3.png" alt=""></div>
                                <div class="flex-text h50 pointer map-icon" style="width: 50px;" @click="locate"><img
                                        style="width: 26px;height: 26px;" src="static/map-icon-4.png" alt=""></div>
                                <div class="flex-text h50 pointer map-icon" style="width: 50px;" @click="isFullScreen = true">
                                    <img style="width: 26px;height: 26px;" src="static/map-icon-5.png" alt="">
                                </div>
                                <div class="flex-text h50 pointer map-icon" style="width: 50px;" @click="isFullScreen = false">
                                    <img style="width: 26px;height: 26px;" src="static/map-icon-6.png" alt="">
                                </div>
                            </div>
                            <div class="h50 round flex-text ml10"
                                style="background-color: rgba(13,27,48,.7);pointer-events:auto;padding: 0 12px;">
                                <div class="flex-text h50" style="width: 50px;"><img style="width: 26px;height: 26px;"
                                        src="static/search.png" alt=""></div>
                                <!-- <el-input class="f20" v-model.trim="search" placeholder="请输入关键字"></el-input> -->
                                <el-autocomplete popper-class="my-autocomplete" class="f20" v-model.trim="search" :fetch-suggestions="querySearchAsync" placeholder="请输入关键字" @select="handleSelect">
                                    <template slot-scope="{ item }">
                                        <div class="name">{{ item.name }}</div>
                                        <span class="addr">{{ item.address }}{{ item.address }}</span>
                                    </template>
                                </el-autocomplete>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="absolute flex-text" style="bottom: 10px;left: 50%;transform: translateX(-50%);">
                    <div class="flex-text" :style="{ transform: 'scale(' + (widthScale > 1 ? 1 : widthScale) + ')' }">
                        <div class="flex-text" :class="isFullScreen?'tr-bottom':'tr-bottom-re'">
                            <div class="relative mine-0">
                                <img style="width: 134px;height: 146px;" src="static/mine-bg-0.png" alt="">
                                <div class="poa-cover flex-text flex-column">
                                    <div class="color-theme f30" style="margin-top: -24px;">{{mineNumber1 || '0'}}</div>
                                    <div class="f18" style="margin-top: 3px;">地下矿山</div>
                                </div>
                            </div>
                            <div class="relative ml40 mine-1">
                                <img style="width: 134px;height: 146px;" src="static/mine-bg-1.png" alt="">
                                <div class="poa-cover flex-text flex-column">
                                    <div class="color-theme f30" style="margin-top: -24px;">{{mineNumber2 || '0'}}</div>
                                    <div class="f18" style="margin-top: 3px;">露天矿山</div>
                                </div>
                            </div>
                            <div class="relative ml40 mine-2">
                                <img style="width: 134px;height: 146px;" src="static/mine-bg-2.png" alt="">
                                <div class="poa-cover flex-text flex-column">
                                    <div class="color-theme f30" style="margin-top: -24px;">{{mineNumber3 || '0'}}</div>
                                    <div class="f18" style="margin-top: 3px;">尾矿库</div>
                                </div>
                            </div>
                            <div class="relative ml40 mine-3">
                                <img style="width: 134px;height: 146px;" src="static/mine-bg-3.png" alt="">
                                <div class="poa-cover flex-text flex-column">
                                    <div class="color-theme f30" style="margin-top: -24px;">{{mineNumber4 || '0'}}</div>
                                    <div class="f18" style="margin-top: 3px;">停产矿山</div>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>

            <div :class="isFullScreen?'tr-right':'tr-right-re'"
                class="flex flex-column space-between relative" :style="{ height: 980 / heightScale + 'px', width: 514 * heightScale + 'px' }">
                
                <div style="transform-origin: right top;right: 0;top: 0;" class="absolute" :style="{transform: 'scale(' + (heightScale) + ')'}">
                    <!-- 停产矿山视频ai报警 -->
                    <div class="mb20 animation relative ovh" style="width: 514px;height: 296px;">
                        <div class="flex align-center f20 color-theme wp100"
                            style="background-image: url('static/sub-title.png');background-size: 100% 100%;height: 48px;">
                            <div class="ml40">停产矿山视频ai报警</div>
                        </div>
                        <div class="flex space-end">
                            <div class="space-between mt10 mr20 flex" style="width: 450px;">
                                <div class="flex-text f16">
                                    <div>报警总数：<span class="color-light">{{ aiTotal }}</span></div>
                                    <!-- <div class="ml30">处理数：<span class="color-light">{{ handled }}</span></div> -->
                                </div>
                                <div class="h30 flex-text pointer relative"
                                    style="width: 90px;background-image: url('static/time-button-bg.png');background-size: 100% 100%;z-index: 200;"
                                    @click="aiShowMask = !aiShowMask;showMask = false">
                                    <div class="color-theme f14" style="transform: translateY(-2px);">{{
                                        timeSelect[aiActive] }}</div>
                                    <img class="ml5" style="width: 8px;height: 8px;transform: translateY(-2px);"
                                        src="static/drop-down.png" alt="">

                                    <div class="absolute wp100 selece-box"
                                        style="left: 0;bottom: 0;transform: translateY(calc(100% + 10px));background-color: rgba(13,27,48,.7);border-radius: 5px;padding: 3px 0;"
                                        v-show="aiShowMask">
                                        <div class="f14 h30 flex-text select" :class="index == aiActive?'color-light':''"
                                            style="padding: 0 10px;" v-for="(item,index) in timeSelect" :key="index"
                                            @click.stop="clickAiActive(index)">
                                            <div class="flex-1">{{ item }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="flex space-end">
                            <div>
                                <div style="width: 483px;background: linear-gradient(to right, rgba(171,238,255,0),rgba(171,238,255,.6));"
                                    class="h30 color-light flex space-between align-center f18 mr5 mt10">
                                    <div style="width: 120px;" class="flex-text">矿山名称</div>
                                    <div class="flex-1 text-center">视频点名称</div>
                                    <div class="text-center flex-1">报警时间</div>
                                    <div class="flex-text" style="width: 90px;">图片</div>
                                    <div style="width: 3px;" class="h30"></div>
                                </div>
                                <div class="absolute mr5"
                                    style="height: 168px;overflow-y: scroll;width: 483px;">
                                    <div class="solid-bottom flex space-between f14" style="height: 64px;"
                                        v-for="(item,index) in aiAlarm" :key="index">
                                        <div style="width: 120px;" class="flex-text ovh">
                                            <div class="flex-1 ml10 mr10 ellipsis2 text-center">{{ item.mineName }}</div>
                                        </div>
                                        <div class="flex-1 flex-text ovh">
                                            <div class="flex-1 ml10 mr10 ellipsis text-center">{{ item.videoName }}</div>
                                        </div>
                                        <div class="text-center flex-1 flex-text">
                                            <div>
                                                <div>{{ item.warnDatetime }}</div>
                                            </div>
                                        </div>
                                        <div class="flex-text" style="width: 90px;">
                                            <img style="width: 64px;height: 44px;border-radius: 5px;" :src="'/file'+item.warnImg"
                                                alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 危险作业审批 -->
                    <div class="mt20 mb20" style="width: 514px;">
                        <div class="flex align-center f20 color-theme wp100"
                            style="background-image: url('static/sub-title.png');background-size: 100% 100%;height: 48px;">
                            <div class="ml40">危险作业审批</div>
                        </div>
                        <div class="mt20 relative" style="width: 100%;height:260px;">
                            <div class="poa-cover" id="pie"></div>

                            <div class="absolute" style="right: 30px;bottom: 50px;">
                                <div class="flex-text">
                                    <div class="round" style="width: 10px;height: 10px;background-color: #3ceaed;">
                                    </div>
                                    <div class="f14 ml10">已通过</div>
                                </div>
                                <div class="flex-text mt5">
                                    <div class="round" style="width: 10px;height: 10px;background-color: #e66a6a;">
                                    </div>
                                    <div class="f14 ml10">未通过</div>
                                </div>
                                <div class="flex-text mt5">
                                    <div class="round" style="width: 10px;height: 10px;background-color: #f9b65e;">
                                    </div>
                                    <div class="f14 ml10">审核中</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 重点在线监测总览 -->
                    <div style="width: 514px;">
                        <div class="flex align-center f20 color-theme wp100"
                            style="background-image: url('static/sub-title.png');background-size: 100% 100%;height: 48px;">
                            <div class="ml40">重点在线监测总览</div>
                        </div>
                        <div class="flex space-end">
                            <div class="flex-text mt10" style="width: 450px;margin-right: 26px;">
                                <div class="flex-1 flex-text f14 pointer animation"
                                    :class="[index == 0?'':'ml15',index == overviewTabCur?'color-light':'']"
                                    style="height: 38px;background-image: url('static/button-bg.png');background-size: 100% 100%;"
                                    v-for="(item,index) in overviewTabs" :key="index" @click="changeoverviewTab(index)">{{
                                    item }}</div>
                            </div>
                        </div>
                        <div class="flex-text mt20 mb20">
                            <div class="ml30">
                                <div class="h30 flex-text" v-for="(item,index) in overview.length" :key="index">
                                    <div class="text-right f14 flex-1">{{ overview[index].text }}</div>
                                </div>
                            </div>
                            <div class="flex-1 ml10 mr10">
                                <div class="h30 flex-text" v-for="(item,index) in overview.length" :key="index">
                                    <div class="relative round wp100"
                                        style="background-color: rgba(10,26,72,.6);height: 8px;">
                                        <div class="absolute round animation"
                                            style="left: 0;top: 0;background: linear-gradient(to right, #12cacd, #0af2f6);height: 8px;"
                                            :style="{ width: overview[index].percent + '%' }"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="mr40">
                                <div class="h30 flex-text" v-for="(item,index) in overview.length" :key="index">
                                    <div class="f14 flex-1 color-yellow">{{ overview[index].legend }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- 饼图弹窗列表 -->
        <div class="fixed maxIndex wp100 hv100 flex-text" style="left: 0;top: 0;" v-if="isMaskShow && isReady">
            <div class="bg-mask relative" style="border-radius: 10px;width: 1200px;height: 55vh;padding: 30px;">
                <div class="flex align-center space-between">
                    <div style="width: 514px;">
                        <div class="flex align-center f20 color-theme wp100"
                            style="background-image: url('static/sub-title.png');background-size: 100% 100%;height: 48px;">
                            <div class="ml40">危险作业审批</div>
                        </div>
                    </div>
                    <img class="pointer mr10" style="width: 35px;height: 35px;" src="static/close-icon.png" alt=""
                        @click="isMaskShow = false">
                </div>
                <div class="flex-text mt20">
                    <div class=" flex-text f16 pointer animation"
                        :class="[index == 0?'':'ml20',index == maskActive?'color-light':'']"
                        style="height: 44px;width: 120px;background-image: url('static/button-bg.png');background-size: 100% 100%;"
                        v-for="(item,index) in maskTabs" :key="index" @click="changeMaskTab(index)">{{ item }}</div>
                </div>
                <div class="mt20 ml20 mr20 h44 f20 flex-text text-center"
                    style="background: linear-gradient(to bottom, rgba(171,238,255,.15), rgba(171,238,255,.3));border-bottom: 1px solid #abeeff;">
                    <div class="flex-1">矿山名称</div>
                    <div class="flex-1">作业名称</div>
                    <div class="" style="width: 200px;">作业时间</div>
                    <div class="" style="width: 150px;">状态</div>
                    <div class="" style="width: 220px;">操作</div>
                    <div style="width: 3px;" class="h44"></div>
                </div>
                <div class="absolute"
                    style="height: calc(100% - 236px);overflow-y: scroll;width: calc(100% - 100px);left: 50px;">
                    <div class="h44 color-theme text-center flex-text" :class="'bg-list-' + (index % 2)"
                        :style="{ marginTop: index == 0 ? '' : '2px' }" v-for="(item,index) in pieList" :key="index">
                        <div class="flex-1 ovh">
                            <div class="ml20 mr20 ellipsis">{{ item.mineName }}</div>
                        </div>
                        <div class="flex-1 ovh">
                            <div class="ml20 mr20 ellipsis">{{ item.name }}</div>
                        </div>
                        <div class="" style="width: 200px;">{{ item.workDate }}</div>
                        <div class="" style="width: 150px;"
                            :class="item.auditState == 1?'color-yellow':item.auditState == 3?'color-red':'color-blue'">{{
                            item.auditState == 1?'审核中':item.auditState == 3?'未通过':'已通过' }}</div>
                        <div class="flex-text" style="width: 220px;">
                            <!-- <div class="color-white pointer flex-text"
                                style="border-bottom: 1px solid #ffffff;height: 28px;box-sizing: border-box;">查看</div> -->
                            <div class="color-blue ml20 pointer flex-text"
                                style="border-bottom: 1px solid #1e9fe2;height: 28px;box-sizing: border-box;"
                                v-if="item.auditState == 1" @click="auditDangerousWork(item, 2)">通过</div>
                            <div class="color-red ml20 pointer flex-text"
                                style="border-bottom: 1px solid #e95353;height: 28px;box-sizing: border-box;"
                                v-if="item.auditState == 1" @click="auditDangerousWork(item, 3)">拒绝</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- marker弹窗列表 -->
        <div class="fixed maxIndex wp100 hv100 flex-text" style="left: 0;top: 0;" v-if="markerMask && isReady">
            <div class="bg-mask relative" style="border-radius: 10px;width: 1200px;height: 55vh;padding: 30px;">
                <div class="flex align-center space-between">
                    <div style="width: 514px;">
                        <div class="flex align-center f20 color-theme wp100"
                            style="background-image: url('static/sub-title.png');background-size: 100% 100%;height: 48px;">
                            <div class="ml40">{{ markerTypeName[markerType] }}列表</div>
                        </div>
                    </div>
                    <img class="pointer mr10" style="width: 35px;height: 35px;" src="static/close-icon.png" alt=""
                        @click="markerMask = false">
                </div>
                <div class="flex align-center mt20 ml20 mr20">
                    <div class="color-theme f18">条件查询</div>
                    <div class="flex-text ml20" style="height: 44px;width: 180px;background-color: rgba(20,72,124,.4);border-radius: 8px;">
                        <el-input class="flex-1 ml10 mr10 markerInput" v-model.trim="markerSearchName" :placeholder="markerTypeName[markerType] + '名称'"></el-input>
                    </div>
                    <div class=" flex-text f16 pointer animation color-light ml20"
                        style="height: 44px;width: 120px;background-image: url('static/button-bg.png');background-size: 100% 100%;" @click="markerSearch">搜索</div>
                </div>
                <template v-if="markerType == 0"><!-- 应急队伍 -->
                    <div class="mt20 ml20 mr20 h44 f20 flex-text text-center"
                        style="background: linear-gradient(to bottom, rgba(171,238,255,.15), rgba(171,238,255,.3));border-bottom: 1px solid #abeeff;">
                        <div class="flex-1">队伍名称</div>
                        <div class="flex-1">队伍类别</div>
                        <div class="flex-1">应急成员</div>
                        <div class="flex-1">责任人</div>
                        <div class="" style="flex: 2;">联系电话</div>
                        <div style="width: 3px;" class="h44"></div>
                    </div>
                    <div class="absolute" style="height: calc(100% - 236px);overflow-y: scroll;width: calc(100% - 100px);left: 50px;">
                        <div class="h44 color-theme text-center flex-text" :class="'bg-list-' + (index % 2)"
                            :style="{ marginTop: index == 0 ? '' : '2px' }" v-for="(item,index) in markerList" :key="index">
                            <div class="flex-1 ovh">
                                <div class="ml20 mr20 ellipsis">{{ item.name }}</div>
                            </div>
                            <div class="flex-1 ovh">
                                <div class="ml20 mr20 ellipsis">{{ item.dict34Name || '-' }}</div>
                            </div>
                            <div class="flex-1 ovh">
                                <div class="ml20 mr20 ellipsis">{{ item.member || '-' }}</div>
                            </div>
                            <div class="flex-1 ovh">
                                <div class="ml20 mr20 ellipsis">{{ item.liablePerson || '-' }}</div>
                            </div>
                            <div class="ovh" style="flex: 2;">
                                <div class="ml20 mr20 ellipsis">{{ item.liablePersonPhone || '-' }}</div>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-if="markerType == 1"><!-- 应急物资 -->
                    <div class="mt20 ml20 mr20 h44 f20 flex-text text-center"
                        style="background: linear-gradient(to bottom, rgba(171,238,255,.15), rgba(171,238,255,.3));border-bottom: 1px solid #abeeff;">
                        <div class="flex-1">物资名称</div>
                        <div class="flex-1">物资类型</div>
                        <div class="flex-1">状态</div>
                        <div class="flex-1">责任人</div>
                        <div class="" style="flex: 2;">电话</div>
                        <div style="width: 3px;" class="h44"></div>
                    </div>
                    <div class="absolute" style="height: calc(100% - 236px);overflow-y: scroll;width: calc(100% - 100px);left: 50px;">
                        <div class="h44 color-theme text-center flex-text" :class="'bg-list-' + (index % 2)"
                            :style="{ marginTop: index == 0 ? '' : '2px' }" v-for="(item,index) in markerList" :key="index">
                            <div class="flex-1 ovh">
                                <div class="ml20 mr20 ellipsis">{{ item.name }}</div>
                            </div>
                            <div class="flex-1 ovh">
                                <div class="ml20 mr20 ellipsis">{{ item.dict37Name || '-' }}</div>
                            </div>
                            <div class="flex-1 ovh">
                                <div class="ml20 mr20 ellipsis">{{ item.dict38Name || '-' }}</div>
                            </div>
                            <div class="flex-1 ovh">
                                <div class="ml20 mr20 ellipsis">{{ item.liablePerson || '-' }}</div>
                            </div>
                            <div class="ovh" style="flex: 2;">
                                <div class="ml20 mr20 ellipsis">{{ item.liablePersonPhone || '-' }}</div>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-if="markerType == 2"><!-- 应急预案 -->
                    <div class="mt20 ml20 mr20 h44 f20 flex-text text-center"
                        style="background: linear-gradient(to bottom, rgba(171,238,255,.15), rgba(171,238,255,.3));border-bottom: 1px solid #abeeff;">
                        <div class="flex-1">预案名称</div>
                        <div class="flex-1">预案类型</div>
                        <div class="flex-1">预案等级</div>
                        <div class="flex-1">备案编号</div>
                        <div class="" style="flex: 2;">备案日期</div>
                        <div style="width: 3px;" class="h44"></div>
                    </div>
                    <div class="absolute" style="height: calc(100% - 236px);overflow-y: scroll;width: calc(100% - 100px);left: 50px;">
                        <div class="h44 color-theme text-center flex-text" :class="'bg-list-' + (index % 2)"
                            :style="{ marginTop: index == 0 ? '' : '2px' }" v-for="(item,index) in markerList" :key="index">
                            <div class="flex-1 ovh">
                                <div class="ml20 mr20 ellipsis">{{ item.name }}</div>
                            </div>
                            <div class="flex-1 ovh">
                                <div class="ml20 mr20 ellipsis">{{ item.dict35Name }}</div>
                            </div>
                            <div class="flex-1 ovh">
                                <div class="ml20 mr20 ellipsis">{{ item.dict36Name }}</div>
                            </div>
                            <div class="flex-1 ovh">
                                <div class="ml20 mr20 ellipsis">{{ item.code }}</div>
                            </div>
                            <div class="ovh" style="flex: 2;">
                                <div class="ml20 mr20 ellipsis">{{ item.recordDate }}</div>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-if="markerType == 3"><!-- 应急演练 -->
                    <div class="mt20 ml20 mr20 h44 f20 flex-text text-center"
                        style="background: linear-gradient(to bottom, rgba(171,238,255,.15), rgba(171,238,255,.3));border-bottom: 1px solid #abeeff;">
                        <div class="flex-1">演练名称</div>
                        <div class="flex-1">演练日期</div>
                        <div class="flex-1">演练区域</div>
                        <div class="flex-1">所属预案</div>
                        <div class="" style="flex: 2;">所属矿山</div>
                        <div style="width: 3px;" class="h44"></div>
                    </div>
                    <div class="absolute" style="height: calc(100% - 236px);overflow-y: scroll;width: calc(100% - 100px);left: 50px;">
                        <div class="h44 color-theme text-center flex-text" :class="'bg-list-' + (index % 2)"
                            :style="{ marginTop: index == 0 ? '' : '2px' }" v-for="(item,index) in markerList" :key="index">
                            <div class="flex-1 ovh">
                                <div class="ml20 mr20 ellipsis">{{ item.name }}</div>
                            </div>
                            <div class="flex-1 ovh">
                                <div class="ml20 mr20 ellipsis">{{ item.drillDate }}</div>
                            </div>
                            <div class="flex-1 ovh">
                                <div class="ml20 mr20 ellipsis">{{ item.drillArea }}</div>
                            </div>
                            <div class="flex-1 ovh">
                                <div class="ml20 mr20 ellipsis">{{ item.emergencyPlanName }}</div>
                            </div>
                            <div class="ovh" style="flex: 2;">
                                <div class="ml20 mr20 ellipsis">{{ item.mineName }}</div>
                            </div>
                        </div>
                    </div>
                </template>
                
            </div>
        </div>

        <!-- 公告弹窗 -->
        <div class="fixed maxIndex wp100 hv100 flex-text" style="left: 0;top: 0;" v-if="noticeMask && isReady">
            <div class="bg-mask relative" style="border-radius: 10px;width: 1200px;height: 55vh;padding: 30px;">
                <div class="flex align-center space-between">
                    <div></div>
                    <img class="pointer mr10" style="width: 35px;height: 35px;" src="static/close-icon.png" alt=""
                        @click="noticeMask = false">
                </div>
                <div class="absolute" style="line-height: 1.6;max-height: calc(100% - 125px);overflow-y: auto;margin-top: 30px;width: calc(100% - 80px);">
                    <div class="flex align-start f18">
                        <div class="text-right color-theme" style="width: 10%;">标题：</div>
                        <div class="flex-1 ml20" style="margin-right: 100px;">{{ notice.title }}</div>
                    </div>
                    <div class="flex align-start f18 mt20">
                        <div class="text-right color-theme" style="width: 10%;">类型：</div>
                        <div class="flex-1 ml20" style="margin-right: 100px;">{{ notice.type }}</div>
                    </div>
                    <div class="flex align-start f18 mt20">
                        <div class="text-right color-theme" style="width: 10%;">描述：</div>
                        <div class="flex-1 ml20" style="margin-right: 100px;">{{ notice.desc }}</div>
                    </div>
                    <div class="flex align-start f18 mt20">
                        <div class="text-right color-theme" style="width: 10%;">通知矿山：</div>
                        <div class="flex-1 ml20" style="margin-right: 100px;">{{ notice.mine }}</div>
                    </div>
                    <div class="flex align-start f18 mt20" v-show="notice.fileList.length > 0">
                        <div class="text-right color-theme" style="width: 10%;">附件：</div>
                        <div class="flex-1 ml20" style="margin-right: 100px;" v-for="file in notice.fileList" :key="file.url">
                            <a class="color-white" :href="host + '/file' + file.url" target="_blank">{{ file.name }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>


<!-- 引入echarts -->
<script src="js/echarts.min.js"></script>
<script src="js/echarts-gl.js"></script>
<!-- 引入组件库 -->
<script src="js/element-ui.js"></script>
<!-- 引入高德js -->
<script src="js/maps.js"></script>
<script src="js/loca.js"></script>
<script src="js/es5.min.js"></script>
<script src="js/maps-MouseTool.js"></script>
<!-- axios -->
<script src="js/axios.min.js"></script>
<!-- cookie -->
<script src="js/js.cookie.js"></script>
<script>

	
    const host = location.protocol + '//' + (location.hostname === '192.168.3.226' ? '192.168.3.37' : '192.168.13.200') + ':8013';

	console.log('host ________________ ', location.hostname);

	const selfHost = location.hostname === '192.168.3.226' ? 'http://192.168.3.226:8057' : 'http://192.168.13.200:8057';


    const token = Cookies.get('ELADMIN-TOEKN');
    axios = axios.create({
        headers: { 'Authorization': token }
    });
    axios.interceptors.response.use(
        response => {
            return response
        }, error => {
            console.error(error)
            let code = 0
            let message = ''
            try {
                code = error.response.data.status
                message = error.response.data.message
            } catch (e) {
                if (error.toString().indexOf('Error: timeout') !== -1) {
                    console.error('当前网络不佳')
                    return
                }
            }
            if (!code) {
                console.error('当前网络不佳')
                return
            }
            if (code === 401) {
                alert('登录信息失效，请重新登录')
                window.open(selfHost + '/#/login', '_self')
                return
            }
            if (code === 400 && message === '不允许访问') {
                alert('您没有权限使用此功能，请联系管理员开通')
                return
            }
            if (message) {
                alert(message)
                return
            }
        });
    
    var map;  // 地图
    var mouseTool;  // 鼠标工具
    var roadNet;  // 路网
    var pieChart;  // 圆环图
    new Vue({
        el: '#app',
        data() {
            return {
                host,
                isReady: false,  // 页面是否准备好  请求完接口变为true
                clientHeight: document.body.clientHeight,
                clientWidth: document.body.clientWidth,
                heightScale: 1,
                widthScale: 1,

                // 数据刷新次数
                refreshTimes: 0,
                // 全部矿山
                mineList: [],
                mineNumber1: 0,
                mineNumber2: 0,
                mineNumber3: 0,
                mineNumber4: 0,
                // 公告信息
                notice: {
                    title: '',
                    type: '',
                    desc: '',
                    mine: '',
                    fileList: []
                },
                noticeMask: false,
                noticeList: [],
                noticeIndex: 0,

                // 物联网主机列表
                main: [
                    { id: 1, name: '物联网主机', isLine: 1 },
                    { id: 2, name: '物联网主机', isLine: 1 },
                    { id: 3, name: '物联网主机', isLine: 0 },
                    { id: 4, name: '物联网主机', isLine: 1 },
                    { id: 5, name: '物联网主机', isLine: 1 },
                    { id: 6, name: '物联网主机', isLine: 1 },
                    { id: 7, name: '物联网主机', isLine: 0 },
                    { id: 8, name: '物联网主机', isLine: 1 },
                    { id: 9, name: '物联网主机', isLine: 1 },
                    { id: 10, name: '物联网主机', isLine: 1 },
                    { id: 11, name: '物联网主机', isLine: 0 },
                    { id: 12, name: '物联网主机', isLine: 1 }
                ],
                swiper: 0,

                // 在线监测实时报警 list
                alarm: [],
                // 在线监测报警统计
                tabs: ['地下矿山人员定位', '地下矿山环境监测', '尾矿库在线监测'],
                TabCur: 0,
                timeSelect: ['近一月', '近半年', '近一年'],
                active: 0,
                showMask: false,

                // 停产矿山视频ai报警
                aiActive: 0,
                aiShowMask: false,
                aiTotal: 0,  // 报警总数
                handled: 0,  // 已处理数量
                aiAlarm: [],

                // 重点在线监测总览
                overviewTabs: ['地下矿山人员定位', '地下矿山环境监测', '尾矿库在线监测'],
                overviewTabCur: 0,
                overview: [],

                // 地图
                marker: [],
                isRoad: false,  // 是否展示路网
                search: '',  // 搜索文本
                isFullScreen: false,  // 是否全屏地图
                drawType: '',  // 测量类型  直线、区域

                // 饼图弹窗
                isMaskShow: false,
                maskTabs: ['全部', '审核中', '已通过', '未通过'],
                maskActive: 0,
                pieList: [ ],

                // marker 弹窗
                markerMask: false,
                markerList: [  // 弹窗列表
                ],
                markerType: null,
                markerTypeName: ['应急队伍', '应急物资', '应急预案', '应急演练'],
                markerSearchName: '',  // 搜索的对应 应急队伍、应急物资、应急预案、应急演练 名称
            }
        },
        watch: {
            isRoad(n) {
                if (n) {
                    roadNet.show()
                } else {
                    roadNet.hide()  // 移除路网
                }
            }
        },
        mounted() {
            if (!token) {
                window.open(selfHost + '/#/login', '_self')
                return
            }
            this.heightScale = (this.clientHeight - 100) / 980
            this.widthScale = this.clientWidth / 1920

            window.onresize = () => {
                location.reload()
            }

            // 获取数据
            this.getData();

            // 开启自动切换通知
            setInterval(() => {
                if (this.noticeMask) {// 当前正在查看通知，不跳！
                    return;
                }
                if (!this.noticeList || this.noticeList.length == 0) {// 当前没有通知
                    this.noticeIndex = 0;
                    this.notice = {};
                    return;
                }
                if (this.noticeList.length <= this.noticeIndex) {
                    this.noticeIndex = 0;
                }
                const notice = this.noticeList[this.noticeIndex];
                let fileList = [];
                if (notice.filesPath) {
                    fileList = JSON.parse(notice.filesPath);
                }
                this.notice = {
                    title: notice.name || '',
                    type: notice.dict40Name || '',
                    desc: notice.detail || '',
                    mine: notice.mineName || '',
                    fileList: fileList
                }
                this.noticeIndex = this.noticeIndex + 1;
            }, 10 * 1000);
        },
        methods: {
            querySearchAsync(queryString, cb) {
                var results = queryString ? this.marker.filter(v => v.name.indexOf(queryString) != -1) : this.marker

                // 模拟请求数据
                clearTimeout(this.timeout)
                this.timeout = setTimeout(() => {
                    cb(results)
                }, 500);
            },
            handleSelect(item) {
                this.search = item.name
                let idx = this.marker.findIndex(v => v.name == item.name)
                map.setCenter([Number(this.marker[idx].longitude), Number(this.marker[idx].latitude)])
                
                var currentMarker = null
                var currentOverlays = map.getAllOverlays() ;// 当前覆盖物集合
                currentOverlays.forEach((pointItem, index) => {
                    pointItem.dom.classList.remove('highlight')
                    if(pointItem.name == item.name){
                        currentMarker = pointItem
                    }
                })
                currentMarker.dom.classList.add('highlight')
                setTimeout(() => {
                    currentMarker.dom.classList.remove('highlight')
                }, 8000);
                // currentMarker.setIcon('https://s3.bmp.ovh/imgs/2023/02/28/7c5a7440766955ea.png'); //坠落动画
            },
            // 跳转到后台管理
            gotoManagement() {
                window.open('http://192.168.13.200:8057', '_self')
            },
            // 设置地图
            setMap() {
                map = new AMap.Map('map', {
                    zoom: 14,  // 缩放级别
                    zooms: [3, 16],
                    layers: [
                        // 卫星
                        new AMap.TileLayer.Satellite(),
                    ],
                    viewMode: '3D', // 地图模式
                    pitch: 40, //设置俯仰角
                    center: [117.855635, 37.065754]  // 中心经纬度
                })
                roadNet = new AMap.TileLayer.RoadNet()  // 路网
                map.add(roadNet)  // 添加路网
                roadNet.hide()  // 隐藏路网
                mouseTool = new AMap.MouseTool(map);  // 添加鼠标工具 测距、测面积

                var loca = new Loca.Container({
                    map,
                });

                let _this = this
                AMap.plugin([
                    'AMap.ControlBar',
                ], function () {
                    // 添加 3D 罗盘控制
                    map.addControl(new AMap.ControlBar({
                        position: {
                            left: ((_this.$refs.control.getBoundingClientRect().left - 20) / (_this.widthScale > 1 ? 1 : _this.widthScale)) + 'px',
                            top: '149px'
                        },
                        showControlButton: true,  // 是否显示倾斜、旋转按钮。默认为 true
                    }));
                });

                var icon = ['https://s3.bmp.ovh/imgs/2023/02/28/7c5a7440766955ea.png', 'https://s3.bmp.ovh/imgs/2023/02/28/a3be161800e3f011.png', 'https://s3.bmp.ovh/imgs/2023/02/28/9e2393a29da416fd.png', 'https://s3.bmp.ovh/imgs/2023/02/28/cd177c08c6052267.png']
                // 循环绘制marker
                for (var i = 0; i < this.marker.length; i++) {
                    var marker = new AMap.Marker({
                        position: [Number(this.marker[i].longitude), Number(this.marker[i].latitude)],
                        icon: new AMap.Icon({
                            image: icon[this.marker[i].type],
                            size: new AMap.Size(50, 50), //图标大小
                            imageSize: new AMap.Size(50, 50)
                        }),
                        offset: new AMap.Pixel(-25, -25)
                    });
                    // marker.setMap(map);

                    marker.id = this.marker[i].id
                    marker.name = this.marker[i].name
                    marker.number = this.marker[i].number
                    marker.address = this.marker[i].address
                    marker.userName = this.marker[i].userName
                    marker.mobile = this.marker[i].mobile
                    marker.team = this.marker[i].team
                    marker.supplies = this.marker[i].supplies
                    marker.plan = this.marker[i].plan
                    marker.drill = this.marker[i].drill
                    marker.mineType = this.marker[i].mineType
                    marker.mineId = this.marker[i].mineId

                    if (i != 0) {
                        marker.on('click', function (e) {
                            var infoWindow = new AMap.InfoWindow({
                                isCustom: true,
                                draggable: true,  //是否可拖动
                                offset: new AMap.Pixel(30, -24),
                                anchor: 'top-left',
                                content: ""
                            });
                            infoWindow.setContent(`
                        <div class="mask-box">
                            <div class="flex ovh mask-box relative">
                                <img class="absolute pointer" style="width: 18px;height: 18px;right: 12px;top: 12px;" src="static/close-icon.png" onclick="map.clearInfoWindow()" />
                                <div class="bg-mask" style="width: 230px;border-radius: 6px 0 0 6px;">
                                    <div class="f14" style="padding: 20px 15px;line-height: 18px;">
                                        <div class="flex align-start">
                                            <div>矿山名称：</div>
                                            <div class="flex-1">${e.target.name}</div>
                                        </div>
                                        <div class="flex align-start mt10">
                                            <div>矿山编号：</div>
                                            <div class="flex-1">${e.target.number}</div>
                                        </div>
                                        <div class="flex align-start mt10">
                                            <div>矿山地址：</div>
                                            <div class="flex-1">${e.target.address}</div>
                                        </div>
                                        <div class="flex align-start mt10">
                                            <div>负责人：</div>
                                            <div class="flex-1">${e.target.userName}</div>
                                        </div>
                                        <div class="flex align-start mt10">
                                            <div>联系方式：</div>
                                            <div class="flex-1">${e.target.mobile}</div>
                                        </div>
                                    </div>  
                                    <div class="flex-text" style="border-top: 1px solid rgba(171,238,255,.3)">
                                        <div class="flex-1 pointer h40 flex-text f16 color-theme" onclick='gotoDataView(${e.target.mineType},${e.target.mineId})'>数据总览</div>
                                        <!-- <div class="flex-1 pointer h40 flex-text f16 color-theme" style="border-left: 1px solid rgba(171,238,255,.3)">视频监控</div> -->
                                    </div>  
                                </div>
                                <div class="bg-mask" style="width: 165px;margin-left: 1px;border-radius: 0 6px 6px 0;">
                                    <div class="f14" style="padding: 20px 15px;line-height: 18px;">
                                        <div>运行状态：</div>
                                        <div class="flex-text mt10">
                                            <div class="relative pointer" onclick="showMarkerMask(${e.target.mineType},${e.target.mineId},0)">
                                                <img style="width: 64px;height: 66px;" src="static/round-ball.png" />
                                                <div class="poa-cover flex-text flex-column">
                                                    <div class="f20 color-theme">${e.target.team}</div> 
                                                    <div class="f14" style="transform: scale(.75);margin-top: -4px;">应急队伍</div>   
                                                </div>
                                            </div>
                                            <div class="relative pointer ml10" onclick="showMarkerMask(${e.target.mineType},${e.target.mineId},1)">
                                                <img style="width: 64px;height: 66px;" src="static/round-ball.png" />
                                                <div class="poa-cover flex-text flex-column">
                                                    <div class="f20 color-theme">${e.target.supplies}</div> 
                                                    <div class="f14" style="transform: scale(.75);margin-top: -4px;">应急物资</div>   
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flex-text" style="margin-top: 5px;">
                                            <div class="relative pointer" onclick="showMarkerMask(${e.target.mineType},${e.target.mineId},2)">
                                                <img style="width: 64px;height: 66px;" src="static/round-ball.png" />
                                                <div class="poa-cover flex-text flex-column">
                                                    <div class="f20 color-theme">${e.target.plan}</div> 
                                                    <div class="f14" style="transform: scale(.75);margin-top: -4px;">应急预案</div>   
                                                </div>
                                            </div>
                                            <div class="relative ml10 pointer" onclick="showMarkerMask(${e.target.mineType},${e.target.mineId},3)">
                                                <img style="width: 64px;height: 66px;" src="static/round-ball.png" />
                                                <div class="poa-cover flex-text flex-column">
                                                    <div class="f20 color-theme">${e.target.drill}</div> 
                                                    <div class="f14" style="transform: scale(.75);margin-top: -4px;">应急演练</div>   
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>      
                            </div>
                        </div>`);
                            infoWindow.open(map, e.lnglat)
                        })
                    }
                    map.add(marker)
                }

                window.showMarkerMask = (mineType, mineId, type) => {
                    this.showMarkerMasks(mineType, mineId, type)
                }

                window.gotoDataView = (mineType, mineId) => {
                    const mine = this.mineList.filter(x => x.mineType == mineType && x.id == mineId)[0]
                    window.localStorage.setItem('kd.selected.mine', JSON.stringify(mine))
                    if(mineType == 1){
                        window.open(selfHost + '/datav/underground.html', '_self')
                    }
                    if(mineType == 2){
                        window.open(selfHost + '/datav/open-air.html', '_self')
                    }
                    if(mineType == 3){
                        window.open(selfHost + '/datav/tailings.html', '_self')
                    }
                }

                // 弧线
                var pulseLink = new Loca.PulseLinkLayer({
                    // loca,
                    zIndex: 10,
                    opacity: 1,
                    visible: true,
                    zooms: [2, 22],
                    depth: true,
                });

                const locaData = {
                    "type": "FeatureCollection",
                    "features": []
                }

                for (const mi in this.marker) {
                    const item = this.marker[mi];
                    const locaItem = {
                        "type": "Feature",
                        "properties": {
                            "type": 0,
                            "ratio": 0.0369,
                            "lineWidthRatio": 1
                        },
                        "geometry": {
                            "type": "LineString",
                            "coordinates": [
                                [
                                    117.855635,
                                    37.065754
                                ],
                                [
                                    item.longitude,
                                    item.latitude
                                ]
                            ]
                        }
                    };
                    locaData.features.push(locaItem);
                }

                var geo = new Loca.GeoJSONSource({
                    data: locaData
                });

                pulseLink.setSource(geo);
                pulseLink.setStyle({
                    unit: 'meter',
                    dash: [40000, 0, 40000, 0],
                    lineWidth: function () {
                        return [70, 10];
                    },
                    height: function (index, feat) {
                        return feat.distance / 3 + 1000;
                    },
                    // altitude: 1000,
                    smoothSteps: 30,
                    speed: function (index, prop) {
                        return 1000 + Math.random();
                    },
                    flowLength: 1000,
                    lineColors: function (index, feat) {
                        // return ['rgb(255,228,105)', 'rgb(255,164,105)', 'rgba(1, 34, 249,1)'];
                        return ['rgb(49,208,194)'];
                    },
                    maxHeightScale: 0.4, // 弧顶位置比例
                    headColor: 'rgba(255, 255, 0, 1)',
                    trailColor: 'rgba(255, 255,0,0)',
                });
                loca.add(pulseLink);
                loca.animate.start();

                var dat = new Loca.Dat();
                dat.addLayer(pulseLink);
            },

            left3() {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById("main"));
                myChart.clear()  // 定时刷新 实际不刷新 演示用
                let xData = []
                let yData1 = []
                let yData2 = []
                if (this.active === 0) {
                    xData = ['3/27', '3/28', '3/29', '3/30', '3/31', '4/1', '4/2', '4/3', '4/4', '4/5', '4/6', '4/7', '4/8', '4/9', '4/10', '4/11', '4/12', '4/13', '4/14', '4/15', '4/16', '4/17', '4/18', '4/19', '4/20', '4/21', '4/22', '4/23', '4/24', '4/25']
                    for (const i in xData) {
                        yData1.push(Math.round(Math.random() * 10))
                        yData2.push(Math.round(Math.random() * 10))
                    }
                }
                if (this.active === 1) {
                    xData = ['11月', '12月', '1月', '2月', '3月', '4月']
                    for (const i in xData) {
                        yData1.push(Math.round(Math.random() * 40))
                        yData2.push(Math.round(Math.random() * 40))
                    }
                }
                if (this.active === 2) {
                    xData = ['5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月', '4月']
                    for (const i in xData) {
                        yData1.push(Math.round(Math.random() * 40))
                        yData2.push(Math.round(Math.random() * 40))
                    }
                }
                // 绘制图表
                const bars = [{
                    name: this.TabCur === 0 ? '区域报警' : this.TabCur === 1 ? '环境监测报警' : this.TabCur === 2 ? '在线监测报警' : '',
                    type: 'bar',
                    data: yData1,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
                                // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                                offset: 0,
                                color: '#0ee3f9'
                            }, {
                                offset: 1,
                                color: '#09f1f6'
                            }]),
                            //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                            barBorderRadius: [100, 100, 0, 0]
                        }
                    },
                    barWidth: '40%'
                }];
                const lines = [];
                if (this.TabCur === 0) {
                    lines.push({
                        name: '人员报警',
                        type: 'line',
                        smooth: true,
                        data: yData2,
                        itemStyle: {
                            color: '#ffa900'
                        }
                    });
                }
                myChart.setOption({
                    xAxis: {
                        data: xData,
                        axisLine: { lineStyle: { color: '#ffffff' } },
                        axisTick: { show: false }
                    },
                    yAxis: {
                        splitLine: { show: false },
                        axisLabel: { textStyle: { color: '#ffffff' } }
                    },
                    grid: { bottom: 40, top: 20 },
                    legend: {
                        show: true,
                        textStyle: {
                            color: '#FFF'
                        }
                    },
                    dataZoom: [
                        {
                            type: "slider",
                            show: false,
                            start: 0,
                            endValue: 30,  // 一次性展示31个
                            textStyle: { color: "#ffffff" },
                            height: 0,
                            zoomLock: true, // 是否只平移不缩放
                        },
                        {
                            type: "inside",  //内置型数据区域缩放组件
                            moveOnMouseMove: true  // 开启鼠标移动窗口平移
                        }
                    ],
                    series: [...bars,...lines]
                });
            },

            right1(){
                let params = {
                    page: 1,
                    count: 100
                }
                if(this.aiActive === 0) {
                    params.limitDay = 30
                }
                if(this.aiActive === 1) {
                    params.limitDay = 179
                }
                if(this.aiActive === 2) {
                    params.limitDay = 365
                }
                axios.get(host + '/api/datav/video-ai', {
                    params: params
                }).then(res => {
                    if (res && res.data) {
                        this.aiTotal = res.data.total
                        this.handled = 0
                        this.aiAlarm = res.data.results
                    }
                });
            },
            right2() {
                const pie = (data) => {
                    // 基于准备好的dom，初始化echarts实例
                    pieChart = echarts.init(document.getElementById("pie"));
                    pieChart.clear()  // 定时刷新 实际不刷新 演示用
                    pieChart.setOption({
                        color: ['#3ceaed', '#e66a6a', '#f9b65e'],
                        series: [
                            {
                                type: "pie",
                                startAngle: 0,
                                center: ['35%', '50%'],
                                radius: '70%',
                                data: [
                                    { value: data.pass, name: '已通过：' + data.pass, label: { color: '#ffffff' } },
                                    { value: data.unpass, name: '未通过：' + data.unpass, label: { color: '#ffffff' } },
                                    { value: data.none, name: '审核中：' + data.none, label: { color: '#ffffff' } }
                                ],
                                itemStyle: {
                                    // normal: {
                                    //     borderWidth: 2,
                                    //     borderColor: 'rgba(0,0,0,.5)'
                                    // }
                                }
                            }
                        ]
                    });
                    // 饼图点击事件
                    pieChart.on("click", () => {
                        this.maskActive = 0
                        this.getPieList()
                        this.isMaskShow = true
                    });
                }
                axios.get(host + '/api/datav/dangerous-work/audit-state').then(res => {
                    if (res && res.data) {
                        pie(res.data)
                    }
                });
            },
            right3() {
                if (this.overviewTabCur === 0) {
                    const rn1 = Math.round(Math.random() * 60)
                    const rn2 = Math.round(Math.random() * rn1)
                    const rn3 = Math.round(Math.random() * 10)
                    const rn4 = Math.round(Math.random() * 10)
                    const rn5 = Math.round(Math.random() * 100)
                    const rn6 = Math.round(Math.random() * 100)
                    this.overview = [
                        { text: '井下作业人数', percent: rn1, legend: rn1 + '人' },
                        { text: '带班领导下井数', percent: rn2, legend: rn2 + '人' },
                        { text: '人员报警数量', percent: rn3, legend: rn3 + '个' },
                        { text: '区域报警数量', percent: rn4, legend: rn4 + '个' },
                        { text: '人员报警处置率', percent: rn5, legend: rn5 + '%' },
                        { text: '区域报警处置率', percent: rn6, legend: rn6 + '%' }
                    ]
                }
                if(this.overviewTabCur === 1){
                    const rn1 = Math.round(Math.random() * 20)
                    const rn2 = Math.round(Math.random() * rn1)
                    const rn3 = rn1 - rn2
                    const rn4 = Math.floor(rn3 * 100 / rn1)
                    const rn5 = Math.round(Math.random() * 100)
                    const rn6 = Math.round(Math.random() * 100)
                    this.overview = [
                        { text: '监测设备总数', percent: rn1, legend: rn1 + '个' },
                        { text: '设备离线总数', percent: rn2, legend: rn2 + '个' },
                        { text: '设备在线总数', percent: rn3, legend: rn3 + '个' },
                        { text: '设备在线率', percent: rn4, legend: rn4 + '%' },
                        { text: '当月报警数量', percent: rn5, legend: rn5 + '个' },
                        { text: '报警处理率', percent: rn6, legend: rn6 + '%' }
                    ]
                }
                if(this.overviewTabCur === 2){
                    const rn1 = Math.round(Math.random() * 20)
                    const rn2 = Math.round(Math.random() * rn1)
                    const rn3 = rn1 - rn2
                    const rn4 = Math.floor(rn3 * 100 / rn1)
                    const rn5 = Math.round(Math.random() * 100)
                    const rn6 = Math.round(Math.random() * 100)
                    this.overview = [
                        { text: '监测设备总数', percent: rn1, legend: rn1 + '个' },
                        { text: '设备离线总数', percent: rn2, legend: rn2 + '个' },
                        { text: '设备在线总数', percent: rn3, legend: rn3 + '个' },
                        { text: '设备在线率', percent: rn4, legend: rn4 + '%' },
                        { text: '当月报警数量', percent: rn5, legend: rn5 + '个' },
                        { text: '报警处理率', percent: rn6, legend: rn6 + '%' }
                    ]
                }
                
            },

            async getData(refesh) {
                var loading;
                this.refreshTimes = this.refreshTimes + 1;
                /**
                 * 5分钟1次
                 */
                const _5minus = () => {
                    // 刷新通知
                    axios.get(host + '/api/datav/notice').then(res => {
                        this.noticeList = res && res.data && res.data.results;
                        this.noticeIndex = 0;
                        if (!refesh && this.noticeList && this.noticeList.length > 0) {
                            let fileList = [];
                            if (this.noticeList[0].filesPath) {
                                fileList = JSON.parse(this.noticeList[0].filesPath);
                            }
                            this.notice = {
                                title: this.noticeList[0].name || '',
                                type: this.noticeList[0].dict40Name || '',
                                desc: this.noticeList[0].detail || '',
                                mine: this.noticeList[0].mineName || '',
                                fileList: fileList
                            }
                        }
                    });
                    this.left3();
                    this.right1();
                    this.right2();
                    this.right3();
                    // 在线实时报警
                    this.alarm = [
                        { id: 1, name: this.marker[1].name, equipment: '氧气浓度', day: '2023-05-25', time: '00:49:48', statusTxt: '报警中', status: 0 },
                        { id: 2, name: this.marker[1].name, equipment: '二氧化碳浓度', day: '2023-05-25', time: '11:15:32', statusTxt: '已处理', status: 1 },
                        { id: 3, name: this.marker[1].name, equipment: '一氧化碳浓度', day: '2023-05-25', time: '19:02:42', statusTxt: '报警中', status: 0 }
                    ];
                }
                /*
                 * 仅第一次加载时执行
                 */
                if (!refesh) {
                    loading = this.$loading({
                        lock: true,
                        text: '加载中',
                        // spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    // 查询全部矿山
                    axios.get(host + '/api/datav/mine').then(res => {
                        this.mineList = res && res.data && res.data.results;
                        this.mineNumber1 = this.mineList.filter(x => x.mineType == 1).length;
                        this.mineNumber2 = this.mineList.filter(x => x.mineType == 2).length;
                        this.mineNumber3 = this.mineList.filter(x => x.mineType == 3).length;
                        this.mineNumber4 = this.mineList.filter(x => x.hasEnable == false).length;
                        const markerUpdater = this.mineList.filter(mine => {
                            if (!mine.longitude || !mine.latitude) {
                                return false;
                            }
                            return true;
                        }).map(mine => {
                            return {
                                id: 't' + mine.mineType + 'id' + mine.id,
                                mineType: mine.mineType,
                                mineId: mine.id,
                                longitude: mine.longitude,
                                latitude: mine.latitude,
                                type: mine.mineType,
                                name: mine.name,
                                number: mine.code || '-',
                                address: mine.address || '-',
                                userName: mine.liablePerson || '-',
                                mobile: mine.liablePersonPhone || '-',
                                team: mine.emergencyTeamNumber || 0,
                                supplies: mine.emergencySuppliesNumber || 0,
                                plan: mine.emergencyPlanNumber || 0,
                                drill: mine.emergencyDrillNumber || 0
                            };
                        });
                        this.marker = [
                            { id: 0, longitude: '117.855635', latitude: '37.065754', mineType: 0, mineId: 0, type: 0, name: '应急管理局', number: '0', address: '平度市东阁街道', userName: '某某某', mobile: '18888888888', team: 0, supplies: 0, plan: 0, drill: 0 }
                            , ...markerUpdater
                        ];
                        loading.close();
                        this.isReady = true;
                        // 准备地图
                        this.setMap();
                        // 初始化
                        _5minus();
                    });
                }
                
                if (this.refreshTimes % 60 == 0) {
                    _5minus();
                }
                setTimeout(() => this.getData('refesh'), 10 * 1000);// 10秒一个刷新周期
            },

            // 危险作业列表
            getPieList() {
                this.pieList = []
                // 0~3 '全部', '审批中', '已通过', '未通过'
                const state = this.maskActive
                axios.get(host + '/api/datav/dangerous-work', {
                    params: {
                        auditState: state || null,
                        hasEnable: true,
                        count: 6
                    }
                }).then(res => {
                    this.pieList = res && res.data && res.data.results
                    console.log(this.pieList)
                })
            },

            // 危险作业审核
            auditDangerousWork(work, auditState) {
                axios.post(host + '/api/dangerous-work/audit', {
                    id: work.id,
                    auditState
                }).then(ret => {
                    console.log(ret)
                    if (ret && ret.status && ret.status == 200) {
                        alert('审核完成')
                        this.getPieList()
                    }
                })
            },

            // 切换在线监测报警统计
            changeTab(index) {
                if (index == this.TabCur) return
                this.TabCur = index
                this.left3()
            },

            clickActive(index){
                this.active = index;
                this.showMask = false;
                this.left3()
            }, 

            // 切换重点在线监测总览
            changeoverviewTab(index) {
                if (index == this.overviewTabCur) return
                this.overviewTabCur = index
                this.right3()
            },

            clickAiActive(index){
                this.aiActive = index;
                this.aiShowMask = false;
                this.right1()
            }, 

            // 切换危险作业审批
            changeMaskTab(index) {
                if (index == this.maskActive) return
                this.maskActive = index
                this.getPieList()
            },

            // 点击marker弹窗中的 应急队伍、应急物资、应急预案、应急演练
            showMarkerMasks(mineType, mineId, type) {
                // id 是 标记点的id
                // type  0 是应急队伍；1 是应急物资；2 是应急预案；3 是应急演练
                this.markerType = type
                this.markerSearchParam = {
                    mineType,
                    mineId
                }
                this.markerSearchName = ''
                this.markerSearch()
            },
            // marker弹窗搜索
            markerSearch(){
                let url = ''
                if (this.markerType == 0) {
                    url = '/api/datav/emergency-team'
                }
                if (this.markerType == 1) {
                    url = '/api/datav/emergency-supplies'
                }
                if (this.markerType == 2) {
                    url = '/api/datav/emergency-plan'
                }
                if (this.markerType == 3) {
                    url = '/api/datav/emergency-drill'
                }
                axios.get(host + url, {
                    params: {
                        ...this.markerSearchParam,
                        nameLike: this.markerSearchName,
                        count: 6
                    }
                }).then(res => {
                    this.markerList = res && res.data && res.data.results
                    console.log(this.markerList)
                    this.markerMask = true
                })
            },


            // 放大地图
            zoomIn() {
                map.zoomIn()
            },
            // 缩小地图
            zoomOut() {
                map.zoomOut()
            },
            draw(type) {
                this.drawType = this.drawType == type ? '' : type
                mouseTool.close(true)
                switch (this.drawType) {
                    case 'line':
                        mouseTool.rule({
                            lineOptions: {//可缺省
                                strokeStyle: "solid",
                                strokeColor: "#0ee3f8",
                                strokeOpacity: 1,
                                strokeWeight: 2
                            }
                        });
                        break;
                    case 'area':
                        mouseTool.measureArea({
                            strokeColor: '#0ee3f8',
                            fillColor: '#80d8ff',
                            fillOpacity: 0.3
                            //同 Polygon 的 Option 设置
                        });
                        break;
                }
            },
            // 回到中心点
            locate() {
                map.setCenter([117.855635, 37.065754])
            }
        }
    })
</script>

</html>