Skip to content

Z
ZiBoYingJI
Commit 0dc544c1 authored by forevertyler's avatar forevertyler
Browse files
Options

update

parent 163d2a43
Hide whitespace changes
Inline Side-by-side
Showing with 1788 additions and 5 deletions
public/datav/env.html 0 → 100644
View file @ 0dc544c1
<!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;}
.natural{
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;margin:0 10px;
background-color:transparent;color:#92f9ff;
border-color:#C99B03;outline:none;
option{
background-color:rgba(20, 72, 247, .5);
}
}
}
.m-body{
border:1px solid red;
.md1-wrap{
width:420px;
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;}
}
}
.bar-list{
dd{
display:flex;align-items:center;margin:0 0 20px 0;
span{text-align:center;width:100px;color:#0AD5E0;}
.bar-warp{
position:relative;
flex:1;
font{
position:absolute;top:0;height:100%;width:auto;z-index:1;
}
.before{left:0;}
.after{right:0;}
.el-progress-bar{margin-right:0;}
}
}
}
}
.l-md2{
.tt-2{
}
}
.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);}
.item-wrap{
&>div{
cursor:pointer;
}
}
}
}
</style>
</head>
<body>
<div id="app" class="natural">
<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>
<!-- 选择列表 -->
<div class="selects" id="mselect">
</div>
<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>
<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%;">
<!-- 物联网主机 -->
<div style="transform-origin:left center;left:0;" class="absolute" :style="{transform:'scale(' + ( heightScale) + ')'}" id="leftbar">
<!-- 设备状态 -->
<div class="mt20 mb20 animation relative ovh l-md2" style="width:514px;background:rgba(0,0,0,.25);padding:10px 0;">
<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="h30 flex space-between align-center f18 ml5 mt10 tt-2">
</div>
<div class="ml5" style="height:300px;display: flex;justify-content: center;align-items: center;">
暂无数据
</div>
</div>
<div class="mt20 mb20 animation relative ovh l-md2" style="width:514px;background:rgba(0,0,0,.25);padding:10px 0;">
<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="h30 flex space-between align-center f18 ml5 mt10 tt-2">
</div>
<div class="ml5" style="height:300px;display: flex;justify-content: center;align-items: center;">
暂无数据
</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 item-wrap" :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) + ')'}" id="rightbar">
<!-- 噪声监测 -->
<div class="mt20 mb20 animation relative ovh l-md2" style="width:514px;background:rgba(0,0,0,.25);padding:10px 0;">
<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="h30 flex space-between align-center f18 ml5 mt10 tt-2">
</div>
<div class="ml5" style="height:300px;display: flex;justify-content: center;align-items: center;">
暂无数据
</div>
</div>
<!-- 排放物监测 -->
<div class="mt20 mb20 animation relative ovh l-md2" style="width:514px;background:rgba(0,0,0,.25);padding:10px 0;">
<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="h30 flex space-between align-center f18 ml5 mt10 tt-2">
</div>
<div class="ml5" style="height:300px;display: flex;justify-content: center;align-items: center;">
暂无数据
</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.180' ? '192.168.3.37' : '192.168.13.200') + ':8013';
// 小黄
//const host = location.protocol + '//' + (location.hostname === '192.168.3.180' ? '192.168.2.200' : '192.168.13.200') + ':8013';
const selfHost = location.hostname === '192.168.3.180' ? '192.168.3.180: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,
// 设备状态
deviceL1:[],
deviceL2:[],
// 公告信息
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: '', // 搜索的对应 应急队伍、应急物资、应急预案、应急演练 名称
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 rightbar = bodyel.querySelector("#rightbar");
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);
// 请求三级联动
var arealist = [
{type:'province'},
{type:'city'},
{type:'area'},
];
this.reqSelectArea(arealist);
// left3 daterange event
var left3t2 = rightbar.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.reqMd3()
}else{
setTimeout(() => {
self.daterange3.timeSpace = daterange
}, 500);
};
}
});
})();
},
methods: {
reqSelectArea(guides){
var that = this, i = 0, compselect;
// 区域选择列表
var selectbox = this.$el.querySelector("#mselect");
return (function reqiust(id, i){
var gitem = guides[i], pervItem = guides[i-1];
gitem.select = gitem.select || document.createElement("select");
var req = {
params: {id:id}
};
axios.get(host + '/api/yingji/deptandenterprise/dept', req).then(res => {
var res = res.data, list = res.body;
// 添加全部
if(i !== 0){
list.unshift({
name: "全部",
label: "全部",
id: id,
});
};
gitem.id = id;
if(gitem.id === (pervItem && pervItem.id)){
gitem.select.style.display = 'none';
}else{
gitem.select.style.display = 'block';
};
gitem.select.dataset.type = gitem.type;
!selectbox.contains(gitem.select) && selectbox.appendChild(gitem.select);
qf.UI.selectRender(gitem.select, list, {
'value':'id',
onchange: function(val){
if(i<3){
reqiust(~~val, i);
}else{
that.reqEnterprise(~~val, compselect);
};
},
});
// increase
i++;
// 判断是否为最后一级
if(guides[i]){
reqiust(list[0].id, i);
}else{
compselect = compselect || document.createElement("select");
!selectbox.contains(compselect) && selectbox.appendChild(compselect);
that.reqEnterprise(list[0] && list[0].id || 0, compselect);
};
});
})(0, i);
},
reqEnterprise(value, select){
var that = this;
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 || [];
qf.UI.selectRender(select, list, {
'value':'id',
onchange: function(val){
that.reqMines(that.enterpriseId = ~~val);
},
});
this.isReady = true;
if(list[0]){
this.enterpriseId = list[0].id;
}else{
this.enterpriseId = 0;
this.marker = [];
}
// 矿山数据
this.reqMines();
});
},
reqDeviceStatus(){
var req = {
params: {
enterpriseId: this.enterpriseId,
deptId: this.deptId,
}
};
axios.get(host + '/api/yingji/keynoteadmin/deviceStatus', req).then(res => {
res = res.data;
var list = res.body || [];
this.devicelist = list;
});
},
// 数据分发
reqDispense(enterpriseId){
// 矿山数据
this.reqMines(enterpriseId);
},
// 请求矿山列表
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();
});
},
reqMd7(){
var req = {
params: {
enterpriseId: this.enterpriseId,
deptId: this.deptId,
}
};
axios.get(host + '/tab/drybeachequipinfor/dryStateCountNature', req).then(res => {
res = res.data;
var list = res.body || [];
this.deviceL1 = list.status;
this.deviceL2 = list.list;
});
},
reqMd8(){
var req = {
params: {
enterpriseId: this.enterpriseId,
deptId: this.deptId,
}
};
axios.get(host + '/api/yingji/keynoteadmin/alertListNature', req).then(res => {
res = res.data;
var list = res.body || [];
this.alarmlist = list;
});
},
reqMd3() {
var req = {
params: {
enterpriseId:this.enterpriseId,
deptId: this.deptId,
dateRange: this.daterange3.timeSpace.toString()
}
};
axios.get(host + '/api/yingji/keynoteadmin/opencastAlertNature', req).then(res => {
res = res.data;
this.left3Charts(res.body)
});
},
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: '报警数据',
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]
});
},
// 矿山类型
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', 'ecosystem');
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);
},
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.reqMd7();
this.reqMd8();
this.reqMd3();
this.reqDeviceStatus(); // 设备状态
}
/*
* 仅第一次加载时执行
*/
if (!refesh) {
//this.reqMines();
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
},
clickActive(index){
this.active = index;
this.showMask = false;
},
// 切换重点在线监测总览
changeoverviewTab(index) {
if (index == this.overviewTabCur) return
this.overviewTabCur = index
},
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>
\ No newline at end of file
public/datav/natural.html
View file @ 0dc544c1
......@@ -754,12 +754,12 @@
<!-- 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.180' ? '192.168.3.37' : '192.168.13.200') + ':8013';
// 小黄
//const host = location.protocol + '//' + (location.hostname === '192.168.3.226' ? '192.168.2.200' : '192.168.13.200') + ':8013';
const selfHost = location.hostname === '192.168.3.226' ? 'http://192.168.3.226:8057' : location.protocol + '//' + window.location.host;
const selfHost = location.hostname === '192.168.3.180' ? '192.168.3.180:8057' : location.protocol + '//' + window.location.host;
const token = Cookies.get('ELADMIN-TOEKN');
axios = axios.create({
......
public/datav/watersource.html
View file @ 0dc544c1
......@@ -863,12 +863,12 @@
<script src="js/highcharts.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.180' ? '192.168.3.37' : '192.168.13.200') + ':8013';
// 小黄
//const host = location.protocol + '//' + (location.hostname === '192.168.3.226' ? '192.168.2.200' : '192.168.13.200') + ':8013';
//const host = location.protocol + '//' + (location.hostname === '192.168.3.180' ? '192.168.2.200' : '192.168.13.200') + ':8013';
const selfHost = location.hostname === '192.168.3.226' ? 'http://192.168.3.226:8057' : location.protocol + '//' + window.location.host;
const selfHost = location.hostname === '192.168.3.180' ? 'http://192.168.3.180:8057' : location.protocol + '//' + window.location.host;
const token = Cookies.get('ELADMIN-TOEKN');
axios = axios.create({
......
src/views/home4Index.vue
View file @ 0dc544c1
......@@ -132,6 +132,7 @@ export default {
store.dispatch('needLoadMenus')
this.$router.push({ path: "/1/edoc" });
}else if (type === "生态环境") {
location.href = host + "/datav/env.html";
// this.$router.push({ path: "home4Center" });
// this.$router.push({ path: "/user/center" });
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment