<!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>
	<script src="/static/js/qf_web.min.js"></script>

    <style>
		@font-face {font-family:"diget year";src: url("static/fonts/DS-Digital.ttf");};
		@font-face {font-family:"ShuHei";src: url("static/fonts/AlimamaShuHeiTi-Bold.ttf");};
		.font_digit{font-family:diget year;}
		.font_ShuHei{font-family:ShuHei;}

		.yingji{
			border:1px solid red;
			height:100%;


			.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% {
				transform:translateX(1300px);
				display:block;
			  }
			  100% {
				transform:translateX(-1300px);
				display:none;
			  }
			}
			 
			.floating-text {
			  font-size:18px;line-height:1;
			  color: #FDD756;text-shadow: 0 0 5px #fff;
			  animation: floatShadow;
			  animation-name:floatShadow;
			  animation-duration: 20s;
			  animation-iteration-count: infinite;
			  animation-timing-function:linear;
			  position:absolute;top:3px;
			}

			.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;
				li{margin-right:50px;}
			}
			.a0a_ ul:last-child{
				margin-right:12vw;
				li{margin-left:50px;}
			}
			.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;
			}
			.a0a_ ul .active{
				background-image:url(static/img/h_btn_a.png);
			}
			.selects{
				/* width:400px;left:50%;margin-left:-200px; */
				text-align:center;position:absolute;top:0;padding:12px 0;z-index:1000;margin-top:90px;display:flex;
			}
			.selects:before/* , .selects:after */{
				content:"";position:absolute;top:0;left:0;height:100%;width:100%;
				border-style:solid;
				border-width:1px 0 1px 0;
				border-image:linear-gradient(90deg, transparent 10%, #19b597 30%, #19b597 70%, transparent 90%) 1 1;
				background-image:linear-gradient(to bottom, rgba(20, 72, 247, .4), transparent);
			}
			.selects select{
				position:relative;z-index:2;max-width:150px;
				background-color:transparent;color:#92f9ff;
				border-color:transparent;outline:none;
				option{
					background-color:rgba(20, 72, 247, .5);
				}
			}
		}

		.m-body{
			.md1-wrap{
				width:420px;height:220px;left:15px;top:5px;
				ul{
					display:flex;height:100%;width:100%;
					li{
						flex:1;display:flex;justify-content:center;align-items:center;flex-direction:column;
						div{
							width:92px;height:92px;
							display:flex;justify-content:center;align-items:center;
							background:no-repeat center center url('static/natural/icon3.png');
							background-size:100% 100%;
							font{
								font-family:diget year;font-size:40px;margin-bottom:22px;
								letter-spacing:.02rem;
								-webkit-background-clip:text;-webkit-text-fill-color:transparent;
							}
						}
						span{
							font-size:16px;margin-top:5px;
						}
					}

					li:nth-child(1){
						font{
							background-image:linear-gradient(to bottom, #ffffff, #d3ffee, #39ffc9);
						}
						span{color:#08E5F0;}
					}
					li:nth-child(2){
						font{
							background-image:linear-gradient(to bottom, #ffffff, #fff5cd, #ffda32);
						}
						span{color:#BFF008;}
					}
				}
			}

			.l-md3{
				.m-t2{
				}

				div.el-date-editor{
					border-color:#2F8DC2;background-color:rgba(0,0,0,.5);
					input{background-color:transparent;color:#eee;}
					span{color:#aaa;width:20px;}
				}
			}


			.footer{
				.actv{box-shadow:inset 0 0 25px rgba(0, 0, 0, 0.2);}
			}
		}
    </style>
</head>

<body>
    <div id="app" class="yingji">
        <div class="fixed wp100 hv100" style="background-color: #000000;left: 0;top: 0;z-index: 1999;" v-show="!isReady"></div>
            
        <!-- title -->
        <div  class="wp100 hv100" style="display:flex;justify-content:center;">
            <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_" id="h_tab">
					<ul>
						<li data-id="2" class="" >自然资源</li>
						<li data-id="3" class="" >水利系统</li>
					</ul>
					<ul>
						<li data-id="4" class="">电子档案</li>
						<li data-id="5" class="" >后台管理</li>
					</ul>
				</div> -->
            </div>

			<!-- 选择列表 -->
			<div class="selects" id="mselect">
				<select style="margin:0 20px;" id="province">
					<option v-for="(item, i) in province" :value="item.id">{{item.name}}</option>
				</select>
				<select style="margin:0 20px;" id="city">
					<option v-for="(item, i) in city" :value="item.id">{{item.name}}</option>
				</select>
				<select style="margin:0 20px;" id="area">
					<option v-for="(item, i) in area" :value="item.id">{{item.name}}</option>
				</select>
				<select style="margin:0 20px;" id="scompany">
					<option v-for="(item, i) in scompany" :value="item.id">{{item.name}}</option>
				</select>
			</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="fixed flex-text maxIndex pointer" style="left: 30px;top:3px;"
            @click="gotoManagement1()"
            :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 m-body wp100" id="body">
            <div :class="isFullScreen?'tr-left':'tr-left-re'" class="flex flex-column space-between relative" style="display:flex;justify-content:center;height:100%;">
                
                <!-- leftbar -->
                <div style="transform-origin:left center;left:0;" class="absolute" :style="{transform:'scale(' + ( heightScale) + ')'}" id="leftbar">
					<!-- 设备状态 -->
                    <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="md1-wrap absolute">
								<ul>
									<li v-for="item in devicelist">
										<div class="icon"><font>{{item.num}}</font></div>
										<span>{{item.name}}</span>
									</li>
								</ul>
							</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 alarmlist" :key="index">
                                <div style="width: 120px;" class="flex-text ovh">
                                    <div class="flex-1 ml10 mr10 ellipsis2 text-center">{{ item.enterpriseName }}</div>
                                </div>
                                <div class="flex-1 flex-text ovh">
                                    <div class="flex-1 ml10 mr10 ellipsis text-center">{{ item.name }}</div>
                                </div>
                                <div class="text-center flex-1 flex-text">
									<div>
										<div>{{ item.time }}</div>
									</div>
                                </div>
                                <div class="flex-text" style="width: 90px;" :class="item.status == 1?'':'color-yellow'">{{item.state}}</div>
                            </div>
                        </div>
                    </div>
                    <!-- 在线监测报警统计 -->
                    <div style="width: 514px;" class="l-md3">
                        <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;" id="daterage1">
							<div class="m-t2"><div></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="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 style="display:none;">
                        <!-- 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 footer" 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" @click="mineTypeEvent(1)" :class="{actv:mineType===1}">
                                <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" @click="mineTypeEvent(2)" :class="{actv:mineType===2}">
                                <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" @click="mineTypeEvent(3)" :class="{actv:mineType===3}">
                                <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" @click="mineTypeEvent(4)" :class="{actv:mineType===4}">
                                <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 class="relative ml40" @click="mineTypeEvent(5)" :class="{actv:mineType===5}">
                                <img style="width: 134px;height: 146px;" src="static/mine-bg-4.png" alt="">
                                <div class="poa-cover flex-text flex-column">
                                    <div class="color-theme f30" style="margin-top: -24px;">{{mineNumber5 || '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="display:flex;justify-content:center;height:100%;">
                <div style="transform-origin:right center;right: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.dangerWorkName }}</div>
                        </div>
                        <div class="" style="width: 200px;">{{ item.dangerWorkTime }}</div>
                        <div class="" style="width: 150px;"
                            :class="item.auditState == 1?'color-yellow':item.auditState == 3?'color-red':'color-blue'">
							{{['未通过', '审批中；', '已通过'][~~item.state]}}
						</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>

<script src="/static/js/qf_web_ui.min.js"></script>
<!-- 引入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';

	// 小黄
	//const host = location.protocol + '//' + (location.hostname === '192.168.3.38' ? '192.168.2.200' : '192.168.13.200') + ':8013';

	const selfHost = location.hostname === '192.168.3.38' ? 'http://192.168.3.38:8057' : location.protocol + '//' + window.location.host;

    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,
                mineNumber5: 0,

				// 设备状态
				devicelist:[],

                // 公告信息
                notice: {
                    title: '',
                    type: '',
                    desc: '',
                    mine: '',
                    fileList: []
                },
                noticeMask: false,
                noticeList: [],
                noticeIndex: 0,

                // 在线监测实时报警 list
                alarmlist: [],
                // 在线监测报警统计
                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: '',  // 搜索的对应 应急队伍、应急物资、应急预案、应急演练 名称

				province:[],
				city:[],
				area:[],
				scompany:[],

				mineType:void 0,
            }
        },
        watch: {
            isRoad(n) {
                if (n) {
                    roadNet.show()
                } else {
                    roadNet.hide()  // 移除路网
                }
            }
        },
        mounted() {
			var self = this;
            if (!token) {
                window.open(selfHost + '/#/login', '_self')
                return
            }

			var bodyel = document.getElementById("body");
			var leftbar = bodyel.querySelector("#leftbar");

            this.heightScale = (this.clientHeight - 100) / 1080
            this.widthScale = this.clientWidth / 1920

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

            // 开启自动切换通知
            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);


			/* // tab event
			var h_tab = this.$el.querySelector("#h_tab");
			h_tab.onclick = function(e){
				var tag = e.target || e.srcElement;
				if(tag.nodeName === 'LI'){
					var did = ~~tag.dataset.id;
					if(did === 2){
						window.open('/datav/natural.html')
					}else if(did === 3){
						window.open('/datav/watersource.html')
					}else if(did === 5){
						window.open('/')
					};
				};
			}; */


			// 区域选择列表
			var mselect = document.getElementById("mselect");
			var selects = mselect.children;

			// 请求三级联动
			this.reqSelectArea(selects);


			// left3 daterange event
			var left3t2 = leftbar.querySelector("#daterage1>.m-t2");
			(function(){
				var toDay = new Date();
				var startDate = new Date(toDay.getFullYear(), toDay.getMonth()-1, toDay.getDate()).getTime();
				var startF = qf.Utils.Dates(startDate).format('yyyy-MM-dd');
				var dayF = qf.Utils.Dates().format('yyyy-MM-dd');
				var daterange = [startF, dayF];

				// 时间渲染
				self.daterange3 = qf.Vue.renderTo.call(self, {
					el:left3t2.firstElementChild,
					name:'el-date-picker',
					//style: "width:380px",
					data:{
						'timeSpace':daterange,
					},
					attrs: {
						type: "daterange",
						"value-format": "yyyy-MM-dd",
						"range-separator": "至",
						"start-placeholder": "开始日期",
						"end-placeholder": "结束日期",
						clearable: ""
					},
					'value':'timeSpace',
					change: function(e) {
						if(e){
							self.left3()
						}else{
							setTimeout(() => {
								self.daterange3.timeSpace = daterange
							}, 500);
						};
					}
				});
			})();
        },
        methods: {
			reqSelectArea(selects){
				var that = this, i = 0;
				return (function reqiust(id, i){
					var req = {
						params: {
							id:id
						}
					};
					var select = selects[i];
					axios.get(host + '/api/yingji/deptandenterprise/dept', req).then(res => {
						res = res.data, list = res.body;
						i++;
						that[select.id] = list;
						
						select.onchange = function(e){
							var tag = e.target || e.srcElement;
							var value = tag.selectedOptions[0].value;

							if(i<3){
								reqiust(value, i);
							}else{
								that.reqEnterprise(value, selects[i]);
							};
						};

						if(i < 3){
							reqiust(list[0].id, i);
						}else{
							var item = {
								name: "全部",
								label: "全部",
								id: 24,
							};
							
							list.unshift(item);
							that.reqEnterprise(list[0] && list[0].id || 0, selects[i]);
						};
					});
				})(0, i);
			},
			reqEnterprise(value, select){
				var req = {
					params: {
						deptId:(this.deptId = value || 0),
					}
				};
				axios.get(host + '/api/yingji/deptandenterprise/enterprise', req).then(res => {
					res = res.data;
					var list = res.body || [];
					this[select.id] = list;
					this.isReady = true;
					if(list[0]){
						this.enterpriseId = list[0].id;
					}else{
						this.enterpriseId = 0;
						this.marker = [];
					}

					// 矿山数据
					this.reqMines();

					//this.setMap();
				});

				var that = this;
				!select.onchange && (select.onchange = function(e){
					var tag = e.target || e.srcElement;
					var value = tag.selectedOptions[0].value;
					that.enterpriseId = value;
					that.reqMines(that.enterpriseId);
				});
			},
			left1(){
				var req = {
					params: {
						enterpriseId: this.enterpriseId,
						deptId: this.deptId,
						mineType:this.mineType,
					}
				};
				axios.get(host + '/api/yingji/keynoteadmin/deviceStatus', req).then(res => {
					res = res.data;
					var list = res.body || [];
					this.devicelist = list;
				});
			},

			// 请求矿山列表
			reqMines(id){
				var loading = this.$loading({
					lock: true,
					text: '加载中',
					// spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});

				var req = {
                    params: {
						enterpriseId:this.enterpriseId,
						deptId: this.deptId,
						mineType:this.mineType,
                    }
                };

				axios.get(host + '/api/datav/mine', req).then(res => {
					loading.close();
					this.isReady = true;

					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.mineType == 4).length;
					this.mineNumber5 = this.mineList.filter(x => x.mineType == 5).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 = [...markerUpdater];

					// 准备地图
					this.setMap();
					// 初始化
					//_5minus();

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


			left2(){
				var req = {
					params: {
						enterpriseId: this.enterpriseId,
						deptId: this.deptId,
						mineType:this.mineType,
					}
				};
				axios.get(host + '/api/yingji/keynoteadmin/alertList', req).then(res => {
					res = res.data;
					var list = res.body || [];
					this.alarmlist = list;
				});
			},
			left3() {
				var req = {
					params: {
						enterpriseId:this.enterpriseId,
						deptId: this.deptId,
						mineType:this.mineType,
						dateRange: this.daterange3.timeSpace.toString()
					}
				};
				axios.get(host + '/api/yingji/keynoteadmin/opencastAlert', req).then(res => {
					res = res.data;
					this.left3Charts(res.body)
				});
            },

			// 矿山类型
			mineTypeEvent(value){
				if(this.mineType === value){
					this.mineType = void 0
				}else{
					this.mineType = value;
				};

				// 矿山数据
				this.reqMines();
			},


			// -------------------------------------------------------------------
            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')
            },

			gotoManagement1(){
				window.location.href = '/#/login4Index';
			},
            // 设置地图
            setMap() {
                map = new AMap.Map('map', {
                    zoom: 8,  // 缩放级别
                    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 = [
					'static/center-icon.png',
					'static/mine-icon-0.png',
					'static/mine-icon-1.png',
					'https://s3.bmp.ovh/imgs/2023/02/28/cd177c08c6052267.png',
					'static/mine-icon-3.png',
					'static/mine-icon-4.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 || true) {
                        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))
					window.localStorage.setItem('bigScreenDetailMenuModel', 'emergency');
					window.open(selfHost + '/datav/detail/video-monitor.html', '_self')

					return ;
                   
                    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);
            },


            
			left3Charts(body){
				var list = body.list;
				// 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById("main"));
                myChart.clear()  // 定时刷新 实际不刷新 演示用
                let xData = []
                let yData1 = []
                let yData2 = []
				if(this.TabCur === 0){
					for(var item of list){
						xData.push(item.date);
						yData1.push(item.values.alarmCount);
					};
				};
                /* if (this.active === 0) {
                    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))
                    }
                }
                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 = ['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))
                    }
                } */
                // 绘制图表
                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 = (body, data) => {
					var list = body.state, workList = body.dangerWorkList;
					var seriesData = [];
					for(var item of list){
						seriesData.push({
							value: item.value, 
							name: item.name + item.value, 
							label: { color: '#ffffff' }
						})
					};

                    // 基于准备好的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: seriesData,
                                itemStyle: {
                                    // normal: {
                                    //     borderWidth: 2,
                                    //     borderColor: 'rgba(0,0,0,.5)'
                                    // }
                                }
                            }
                        ]
                    });
                    // 饼图点击事件
                    pieChart.on("click", () => {
                        this.maskActive = 0
                        this.getPieList(workList)
                        this.isMaskShow = true
                    });
                }
				var req = {
                    params: {
						enterpriseId:this.enterpriseId,
						deptId: this.deptId,
						mineType:this.mineType,
                    }
                };
				axios.get(host + '/api/yingji/dangerousworkaudit/dangerwork-list', req).then(res => {
					res = res.data;
                    if (res && res.body) {
                        pie(res.body)
                    }
                });
            },
            right3() {
                if (this.overviewTabCur === 0) {
					var req = {
						params: {
							enterpriseId:this.enterpriseId,
							deptId: this.deptId,
							mineType:this.mineType,
						}
					};
					axios.get(host + '/api/yingji/keynoteadmin/deformationMonitoring', req).then(res => {
						res = res.data;
						var body = res.body || {}, list = body.list || [];
						this.overview = [
							{ text: list[0].name, percent: list[0].num, legend: list[0].num + '个' },
							{ text: list[1].name, percent: list[1].num, legend: list[1].num + '个' },
							{ text: list[2].name, percent: list[2].num, legend: list[2].num + '个' },
							{ text: list[3].name, percent: list[3].num, legend: list[3].num + '个' },
							{ text: list[4].name, percent: list[4].num, legend: list[4].num + '%' },
							{ text: list[5].name, percent: list[5].num, legend: list[5].num + '%' }
						]
					});
                }
                if(this.overviewTabCur === 1){
                    const rn1 = Math.round(Math.random() * 0)
                    const rn2 = Math.round(Math.random() * 0)
                    const rn3 = 0
                    const rn4 = Math.floor(rn3 * 100)
                    const rn5 = Math.round(Math.random() * 0)
                    const rn6 = Math.round(Math.random() * 0)
                    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() * 0)
                    const rn2 = Math.round(Math.random() * 0)
                    const rn3 = Math.round(Math.random() * 0)
                    const rn4 = Math.round(Math.random() * 0)
                    const rn5 = Math.round(Math.random() * 0)
                    const rn6 = Math.round(Math.random() * 0)
                    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) {
                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.left2();
                    this.left3();
                    this.right1();
                    this.right2();
                    this.right3();

					this.left1();	  // 设备状态
                }
                /*
                 * 仅第一次加载时执行
                 */
                if (!refesh) {
					setTimeout(() => this.getData('refesh'), 60 * 1000);// 10秒一个刷新周期
                }

				_5minus();
            },

            // 危险作业列表
            getPieList(workList) {
				this.pieList = workList;

				return ;
                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;
                })
            },

            // 危险作业审核
            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(index)
            }, 

            // 切换重点在线监测总览
            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>