Skip to content

Z
ZiBoYingJI
Commit ef3ef72b authored by Kimber's avatar Kimber
Browse files
Options

'update'

parent 3c22383d
Hide whitespace changes
Inline Side-by-side
Showing with 346 additions and 238 deletions
public/datav/index.html
View file @ ef3ef72b
......@@ -18,163 +18,214 @@
<script src="js/vant.min.js"></script>
<style>
.amap-logo {
z-index: -10;
}
.amap-copyright{
z-index: -10;
}
.el-autocomplete-suggestion{
width: 330px !important;
}
.my-autocomplete li{
line-height: normal;
padding: 7px;
}
.name {
text-overflow: ellipsis;
overflow: hidden;
color: #ffffff;
}
.addr {
font-size: 12px;
color: rgba(255,255,255,.6);
}
@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;}
.highlighted .addr {
color: #ddd;
}
.yingji{
border:1px solid red;
height:100%;
.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;
}
.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);
}
.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;
}
.highlighted .addr {
color: #ddd;
}
@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;
}
.el-autocomplete-suggestion li.highlighted, .el-autocomplete-suggestion li:hover{
background-color: rgba(13,27,48,.7) !important;
}
.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;text-align:center;position:absolute;top:0;left:50%;margin-left:-200px;padding:12px 0;z-index:1000;margin-top:90px;
.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);
}
}
.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);
.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;
background-color:transparent;color:#92f9ff;
border-color:transparent;outline:none;
option{
background-color:rgba(20, 72, 247, .5);
}
}
}
.selects select{
position:relative;z-index:2;
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;}
}
}
}
}
</style>
</head>
<body>
<div id="app">
<div class="fixed wp100 hv100" style="background-color: #000000;left: 0;top: 0;z-index: 1999;"
v-show="!isReady"></div>
<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 style="height:120px;display:flow-root;">
<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%;">
......@@ -194,17 +245,21 @@
</div>
<!-- 选择列表 -->
<div class="selects" >
<select style="margin:0 20px;">
<option value="1">淄博市</option>
<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="selectArea">
<option v-for="(item, i) in selectArea" :value="item.id">{{item.name}}</option>
<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;width:120px;" id="selectCompany">
<option v-for="(item, i) in selectUnit" :value="item.id">{{item.name}}</option>
<select style="margin:0 20px;" id="scompany">
<option v-for="(item, i) in scompany" :value="item.id">{{item.name}}</option>
</select>
</div>
<div>
</div>
......@@ -238,38 +293,29 @@
<!-- <div class="fixed wp100 hv100" style="z-index: 199;" @click="showMask = aiShowMask = false"
v-show="showMask || aiShowMask"></div> -->
<div class="flex-text" style="margin-top:70px;">
<div :class="isFullScreen?'tr-left':'tr-left-re'"
class="flex flex-column space-between relative" :style="{ height: 980 / heightScale + 'px', width: 514 * heightScale + 'px' }">
<div class="flex-text m-body wp100">
<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 top;left: 0;top: 0;" class="absolute" :style="{transform: 'scale(' + ( heightScale) + ')'}">
<div style="transform-origin:left center;left:0;" class="absolute" :style="{transform:'scale(' + ( heightScale) + ')'}">
<div style="width: 514px;">
<div class="ml10 flex align-center f20 color-theme wp100"
style="background-image: url('static/sub-title.png');background-size: 100% 100%;height: 48px;">
<div class="ml40">物联网主机</div>
<div class="ml40">设备状态</div>
</div>
<div class="relative" style="height: 220px;width: 480px;">
<div class="flex-text" style="transform: rotateX(65deg) translateY(-180px);">
<img class="rotateImg" style="width: 420px;height: 420px;" src="static/rotate.png" alt="">
</div>
<div class="absolute wp100" style="left: 0;top: 30px;">
<el-carousel indicator-position="none" type="card" :autoplay="true" :interval="3000"
arrow="never" @change="swiper = $event">
<el-carousel-item v-for="(item,index) in main" :key="index">
<el-tooltip class="item" effect="dark" :content="item.name" placement="top">
<div class="relative auto" style="width: 101px;">
<img class="animation" :class="index == swiper?'mt40':''"
style="width: 101px;height: 94px;"
:src="item.isLine == 1?'static/on-line.png':'static/off-line.png'"
alt="">
<div class="poa-cover text-center f16"
:class="item.isLine == 1?'color-yellow':'color-theme'">{{ item.isLine ==
1 ? '在线' : '离线' }}</div>
</div>
</el-tooltip>
</el-carousel-item>
</el-carousel>
</div>
<div class="md1-wrap absolute">
<ul>
<li>
<div class="icon"><font>156</font></div>
<span>设备在线</span>
</li>
<li>
<div class="icon"><font>156</font></div>
<span>设备离线</span>
</li>
</ul>
</div>
</div>
</div>
<!-- 在线监测实时报警 -->
......@@ -435,15 +481,21 @@
<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 mine-3">
<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>
<div :class="isFullScreen?'tr-right':'tr-right-re'"
class="flex flex-column space-between relative" :style="{ height: 980 / heightScale + 'px', width: 514 * heightScale + 'px' }">
<div :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 top;right: 0;top: 0;" class="absolute" :style="{transform: 'scale(' + (heightScale) + ')'}">
<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"
......@@ -912,6 +964,7 @@
mineNumber2: 0,
mineNumber3: 0,
mineNumber4: 0,
mineNumber5: 0,
// 公告信息
notice: {
title: '',
......@@ -924,23 +977,6 @@
noticeList: [],
noticeIndex: 0,
// 物联网主机列表
main: [
{ id: 1, name: '物联网主机', isLine: 1 },
{ id: 2, name: '物联网主机', isLine: 1 },
{ id: 3, name: '物联网主机', isLine: 0 },
{ id: 4, name: '物联网主机', isLine: 1 },
{ id: 5, name: '物联网主机', isLine: 1 },
{ id: 6, name: '物联网主机', isLine: 1 },
{ id: 7, name: '物联网主机', isLine: 0 },
{ id: 8, name: '物联网主机', isLine: 1 },
{ id: 9, name: '物联网主机', isLine: 1 },
{ id: 10, name: '物联网主机', isLine: 1 },
{ id: 11, name: '物联网主机', isLine: 0 },
{ id: 12, name: '物联网主机', isLine: 1 }
],
swiper: 0,
// 在线监测实时报警 list
alarm: [],
// 在线监测报警统计
......@@ -983,8 +1019,10 @@
markerTypeName: ['应急队伍', '应急物资', '应急预案', '应急演练'],
markerSearchName: '', // 搜索的对应 应急队伍、应急物资、应急预案、应急演练 名称
selectArea:[],
selectUnit:[],
province:[],
city:[],
area:[],
scompany:[],
}
},
watch: {
......@@ -1002,14 +1040,14 @@
window.open(selfHost + '/#/login', '_self')
return
}
this.heightScale = (this.clientHeight - 100) / 980
this.heightScale = (this.clientHeight - 100) / 1080
this.widthScale = this.clientWidth / 1920
window.onresize = () => {
location.reload()
}
// 开启自动切换通知
setInterval(() => {
......@@ -1039,13 +1077,13 @@
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){
......@@ -1055,46 +1093,111 @@
};
};
}; */
// 区域列表
this.reqSelectArea();
var selectArea = document.getElementById("selectArea");
selectArea.onchange = function(e){
var value = this.selectedOptions[0].value;
self.reqEnterprise(value);
};
// 企业选择列表
var selectCompany = document.getElementById("selectCompany");
selectCompany.onchange = function(e){
var value = this.selectedOptions[0].value;
self.reqMines(this.enterpriseId = value);
};
// 区域选择列表
var mselect = document.getElementById("mselect");
var selects = mselect.children;
// 请求三级联动
this.reqSelectArea(selects);
},
methods: {
reqSelectArea(){
axios.get(host + '/api/yingji/deptandenterprise/dept').then(res => {
res = res.data;
this.selectArea = res.body;
this.reqEnterprise(res.body[0].id);
});
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, select[i]);
};
};
if(i < 3){
reqiust(list[0].id, i);
}else{
that.reqEnterprise(list[0] && list[0].id || 0, selects[i]);
};
});
})(0, i);
},
reqEnterprise(value, select){
if(true){
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 || [];
console.log('body ________________ ', list, select);
this[select.id] = list;
this.isReady = true;
if(list[0]){
this.reqMines(this.enterpriseId = list[0].id);
}else{
this.marker = [];
}
this.setMap();
});
};
},
reqEnterprise(value){
reqDeviceStatus(){
var req = {
params: {
deptId:value
}
};
axios.get(host + '/api/yingji/deptandenterprise/enterprise', req).then(res => {
params: {
enterpriseId: this.enterpriseId,
deptId: this.deptId,
}
};
axios.get(host + '/api/yingji/keynoteadmin/deviceStatus', req).then(res => {
res = res.data;
var body = res.body || [];
this.selectUnit = body;
body[0] && this.reqMines(this.enterpriseId = body[0].id);
console.log('deviceStatus ________________ ', res);
return ;
var list = res.body || [];
console.log('body ________________ ', list, select);
this[select.id] = list;
this.isReady = true;
if(list[0]){
this.reqMines(this.enterpriseId = list[0].id);
}else{
this.marker = [];
}
this.setMap();
});
},
// 请求矿山列表
reqMines(id){
var loading = this.$loading({
......@@ -1110,11 +1213,17 @@
}
};
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.hasEnable == false).length;
this.mineNumber5 = this.mineList.filter(x => x.mineType == 4).length;
const markerUpdater = this.mineList.filter(mine => {
if (!mine.longitude || !mine.latitude) {
return false;
......@@ -1146,8 +1255,6 @@
this.marker = [...markerUpdater];
loading.close();
this.isReady = true;
// 准备地图
this.setMap();
// 初始化
......@@ -1258,9 +1365,9 @@
marker.plan = this.marker[i].plan
marker.drill = this.marker[i].drill
marker.mineType = this.marker[i].mineType
marker.mineId = this.marker[i].mineId
marker.mineId = this.marker[i].mineId;
if (i != 0) {
if (i != 0 || true) {
marker.on('click', function (e) {
var infoWindow = new AMap.InfoWindow({
isCustom: true,
......@@ -1733,7 +1840,9 @@
this.right2();
this.right3();
if(this.marker && this.marker[0]){
this.reqDeviceStatus(); // 设备状态
if(this.marker && this.marker[1]){
// 在线实时报警
this.alarm = [
{ id: 1, name: this.marker[1].name, equipment: '氧气浓度', day: '2023-05-25', time: '00:49:48', statusTxt: '已处理', status: 1 },
......@@ -1761,7 +1870,6 @@
// 危险作业列表
getPieList(workList) {
this.pieList = workList;
console.log('workList ________________ ', workList);
return ;
this.pieList = [];
......
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