Skip to content

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

'update'

parent 042ca33b
Show whitespace changes
Inline Side-by-side
Showing with 549 additions and 86 deletions
public/datav/detail/static/js/public-detail.js
View file @ 18d5f37d
...@@ -108,13 +108,17 @@ var gemhoUtil = { ...@@ -108,13 +108,17 @@ var gemhoUtil = {
const type = localStorage.getItem('bigScreenDetailMenuModel') const type = localStorage.getItem('bigScreenDetailMenuModel')
if(type === 'emergency'){ if(type === 'emergency'){
window.open('/datav/index.html') //window.open('/datav/index.html')
window.location.href = '/datav/index.html';
}else if(type === 'natural'){ }else if(type === 'natural'){
window.open('/datav/natural.html') //window.open('/datav/natural.html')
window.location.href = '/datav/natural.html';
}else if(type === 'watersystem'){ }else if(type === 'watersystem'){
window.open('/datav/watersource.html') //window.open('/datav/watersource.html')
window.location.href = '/datav/watersource.html';
}else if(type === 'ecosystem'){ }else if(type === 'ecosystem'){
window.open('/datav/index.html') //window.open('/datav/index.html')
window.location.href = '/datav/index.html';
} }
}, },
changeMenu(item) { changeMenu(item) {
......
public/datav/index.html
View file @ 18d5f37d
...@@ -227,9 +227,13 @@ ...@@ -227,9 +227,13 @@
} }
} }
.footer{ .footer{
.actv{box-shadow:inset 0 0 25px rgba(0, 0, 0, 0.2);} .actv{box-shadow:inset 0 0 25px rgba(0, 0, 0, 0.2);}
.item-wrap{
&>div{
cursor:pointer;
}
}
} }
} }
</style> </style>
...@@ -462,7 +466,7 @@ ...@@ -462,7 +466,7 @@
<div class="absolute flex-text footer" style="bottom: 10px;left: 50%;transform: translateX(-50%);"> <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" :style="{ transform: 'scale(' + (widthScale > 1 ? 1 : widthScale) + ')' }">
<div class="flex-text" :class="isFullScreen?'tr-bottom':'tr-bottom-re'"> <div class="flex-text item-wrap" :class="isFullScreen?'tr-bottom':'tr-bottom-re'">
<div class="relative" @click="mineTypeEvent(1)" :class="{actv:mineType===1}"> <div class="relative" @click="mineTypeEvent(1)" :class="{actv:mineType===1}">
<img style="width: 134px;height: 146px;" src="static/mine-bg-0.png" alt=""> <img style="width: 134px;height: 146px;" src="static/mine-bg-0.png" alt="">
<div class="poa-cover flex-text flex-column"> <div class="poa-cover flex-text flex-column">
......
public/datav/natural.html
View file @ 18d5f37d
...@@ -248,6 +248,15 @@ ...@@ -248,6 +248,15 @@
span{color:#aaa;width:20px;} 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> </style>
</head> </head>
...@@ -399,38 +408,38 @@ ...@@ -399,38 +408,38 @@
</div> </div>
</div> </div>
<div class="absolute flex-text" style="bottom: 10px;left: 50%;transform: translateX(-50%);"> <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" :style="{ transform: 'scale(' + (widthScale > 1 ? 1 : widthScale) + ')' }">
<div class="flex-text" :class="isFullScreen?'tr-bottom':'tr-bottom-re'"> <div class="flex-text item-wrap" :class="isFullScreen?'tr-bottom':'tr-bottom-re'">
<div class="relative mine-0"> <div class="relative" @click="mineTypeEvent(1)" :class="{actv:mineType===1}">
<img style="width: 134px;height: 146px;" src="static/mine-bg-0.png" alt=""> <img style="width: 134px;height: 146px;" src="static/mine-bg-0.png" alt="">
<div class="poa-cover flex-text flex-column"> <div class="poa-cover flex-text flex-column">
<div class="color-theme f30" style="margin-top: -24px;">{{mineNumber1 || '0'}}</div> <div class="color-theme f30" style="margin-top: -24px;">{{mineNumber1 || '0'}}</div>
<div class="f18" style="margin-top: 3px;">地下矿山</div> <div class="f18" style="margin-top: 3px;">地下矿山</div>
</div> </div>
</div> </div>
<div class="relative ml40 mine-1"> <div class="relative ml40" @click="mineTypeEvent(2)" :class="{actv:mineType===2}">
<img style="width: 134px;height: 146px;" src="static/mine-bg-1.png" alt=""> <img style="width: 134px;height: 146px;" src="static/mine-bg-1.png" alt="">
<div class="poa-cover flex-text flex-column"> <div class="poa-cover flex-text flex-column">
<div class="color-theme f30" style="margin-top: -24px;">{{mineNumber2 || '0'}}</div> <div class="color-theme f30" style="margin-top: -24px;">{{mineNumber2 || '0'}}</div>
<div class="f18" style="margin-top: 3px;">露天矿山</div> <div class="f18" style="margin-top: 3px;">露天矿山</div>
</div> </div>
</div> </div>
<div class="relative ml40 mine-2"> <div class="relative ml40" @click="mineTypeEvent(3)" :class="{actv:mineType===3}">
<img style="width: 134px;height: 146px;" src="static/mine-bg-2.png" alt=""> <img style="width: 134px;height: 146px;" src="static/mine-bg-2.png" alt="">
<div class="poa-cover flex-text flex-column"> <div class="poa-cover flex-text flex-column">
<div class="color-theme f30" style="margin-top: -24px;">{{mineNumber3 || '0'}}</div> <div class="color-theme f30" style="margin-top: -24px;">{{mineNumber3 || '0'}}</div>
<div class="f18" style="margin-top: 3px;">尾矿库</div> <div class="f18" style="margin-top: 3px;">尾矿库</div>
</div> </div>
</div> </div>
<div class="relative ml40 mine-3"> <div class="relative ml40" @click="mineTypeEvent(4)" :class="{actv:mineType===4}">
<img style="width: 134px;height: 146px;" src="static/mine-bg-3.png" alt=""> <img style="width: 134px;height: 146px;" src="static/mine-bg-3.png" alt="">
<div class="poa-cover flex-text flex-column"> <div class="poa-cover flex-text flex-column">
<div class="color-theme f30" style="margin-top: -24px;">{{mineNumber4 || '0'}}</div> <div class="color-theme f30" style="margin-top: -24px;">{{mineNumber4 || '0'}}</div>
<div class="f18" style="margin-top: 3px;">停产矿山</div> <div class="f18" style="margin-top: 3px;">停产矿山</div>
</div> </div>
</div> </div>
<div class="relative ml40 mine-3"> <div class="relative ml40" @click="mineTypeEvent(5)" :class="{actv:mineType===5}">
<img style="width: 134px;height: 146px;" src="static/mine-bg-4.png" alt=""> <img style="width: 134px;height: 146px;" src="static/mine-bg-4.png" alt="">
<div class="poa-cover flex-text flex-column"> <div class="poa-cover flex-text flex-column">
<div class="color-theme f30" style="margin-top: -24px;">{{mineNumber5 || '0'}}</div> <div class="color-theme f30" style="margin-top: -24px;">{{mineNumber5 || '0'}}</div>
...@@ -890,6 +899,8 @@ ...@@ -890,6 +899,8 @@
city:[], city:[],
area:[], area:[],
scompany:[], scompany:[],
mineType:void 0,
} }
}, },
watch: { watch: {
...@@ -952,7 +963,10 @@ ...@@ -952,7 +963,10 @@
var selects = mselect.children; var selects = mselect.children;
// 请求三级联动 // 请求三级联动
this.reqSelectArea(selects); this.reqSelectArea(selects, onloadDataFinish);
function onloadDataFinish(){
}
// left3 daterange event // left3 daterange event
var left3t2 = rightbar.querySelector("#daterage1>.m-t2"); var left3t2 = rightbar.querySelector("#daterage1>.m-t2");
...@@ -993,7 +1007,7 @@ ...@@ -993,7 +1007,7 @@
})(); })();
}, },
methods: { methods: {
reqSelectArea(selects){ reqSelectArea(selects, callback){
var that = this, i = 0; var that = this, i = 0;
return (function reqiust(id, i){ return (function reqiust(id, i){
var req = { var req = {
...@@ -1021,20 +1035,27 @@ ...@@ -1021,20 +1035,27 @@
if(i < 3){ if(i < 3){
reqiust(list[0].id, i); reqiust(list[0].id, i);
}else{ }else{
that.reqEnterprise(list[0] && list[0].id || 0, selects[i]); var item = {
name: "全部",
label: "全部",
id: 24,
};
list.unshift(item);
that.reqEnterprise(list[0] && list[0].id || 0, selects[i], callback);
}; };
}); });
})(0, i); })(0, i);
}, },
reqEnterprise(value, select){ reqEnterprise(value, select, callback){
var req = { var req = {
params: { params: {
deptId:(this.deptId = value || 0) deptId:(this.deptId = value || 0)
} }
}; };
axios.get(host + '/api/yingji/deptandenterprise/enterprise', req).then(res => { axios.get(host + '/api/yingji/deptandenterprise/enterprise', req).then(res => {
res = res.data; var res = res.data, list = res.body;
var list = res.body || [];
this[select.id] = list; this[select.id] = list;
this.isReady = true; this.isReady = true;
if(list[0]){ if(list[0]){
...@@ -1042,12 +1063,15 @@ ...@@ -1042,12 +1063,15 @@
}else{ }else{
this.enterpriseId = 0; this.enterpriseId = 0;
this.marker = []; this.marker = [];
} };
// 矿山数据
this.reqMines(this.enterpriseId);
this.reqDispense(this.enterpriseId);
// 设置地图
this.setMap(); this.setMap();
callback && callback();
}); });
var that = this; var that = this;
...@@ -1055,7 +1079,7 @@ ...@@ -1055,7 +1079,7 @@
var tag = e.target || e.srcElement; var tag = e.target || e.srcElement;
var value = tag.selectedOptions[0].value; var value = tag.selectedOptions[0].value;
that.enterpriseId = value; that.enterpriseId = value;
that.reqMines(that.enterpriseId); that.reqDispense(that.enterpriseId);
}); });
}, },
reqDeviceStatus(){ reqDeviceStatus(){
...@@ -1072,6 +1096,12 @@ ...@@ -1072,6 +1096,12 @@
}); });
}, },
// 数据分发
reqDispense(enterpriseId){
// 矿山数据
this.reqMines(enterpriseId);
},
// 请求矿山列表 // 请求矿山列表
reqMines(id){ reqMines(id){
var loading = this.$loading({ var loading = this.$loading({
...@@ -1083,11 +1113,13 @@ ...@@ -1083,11 +1113,13 @@
var req = { var req = {
params: { params: {
enterpriseId:id enterpriseId:this.enterpriseId,
deptId: this.deptId,
mineType:this.mineType,
} }
}; };
axios.get(host + '/api/datav/mine', req).then(res => {
axios.get(host + '/api/datav/mine', req).then(res => {
loading.close(); loading.close();
this.isReady = true; this.isReady = true;
...@@ -1095,8 +1127,8 @@ ...@@ -1095,8 +1127,8 @@
this.mineNumber1 = this.mineList.filter(x => x.mineType == 1).length; this.mineNumber1 = this.mineList.filter(x => x.mineType == 1).length;
this.mineNumber2 = this.mineList.filter(x => x.mineType == 2).length; this.mineNumber2 = this.mineList.filter(x => x.mineType == 2).length;
this.mineNumber3 = this.mineList.filter(x => x.mineType == 3).length; this.mineNumber3 = this.mineList.filter(x => x.mineType == 3).length;
this.mineNumber4 = this.mineList.filter(x => x.hasEnable == false).length; this.mineNumber4 = this.mineList.filter(x => x.mineType == 4).length;
this.mineNumber5 = this.mineList.filter(x => x.mineType == 4).length; this.mineNumber5 = this.mineList.filter(x => x.mineType == 5).length;
const markerUpdater = this.mineList.filter(mine => { const markerUpdater = this.mineList.filter(mine => {
if (!mine.longitude || !mine.latitude) { if (!mine.longitude || !mine.latitude) {
...@@ -1122,10 +1154,6 @@ ...@@ -1122,10 +1154,6 @@
drill: mine.emergencyDrillNumber || 0 drill: mine.emergencyDrillNumber || 0
}; };
}); });
/* this.marker = [
{ id: 0, longitude: '117.855635', latitude: '37.065754', mineType: 0, mineId: 0, type: 0, name: '应急管理局', number: '0', address: '平度市东阁街道', userName: '某某某', mobile: '18888888888', team: 0, supplies: 0, plan: 0, drill: 0 }
, ...markerUpdater
]; */
this.marker = [...markerUpdater]; this.marker = [...markerUpdater];
...@@ -1134,7 +1162,6 @@ ...@@ -1134,7 +1162,6 @@
// 初始化 // 初始化
//_5minus(); //_5minus();
//this.getData();
// 获取数据 // 获取数据
this.getData(); this.getData();
}); });
...@@ -1289,6 +1316,18 @@ ...@@ -1289,6 +1316,18 @@
}); });
}, },
// 矿山类型
mineTypeEvent(value){
if(this.mineType === value){
this.mineType = void 0
}else{
this.mineType = value;
};
// 矿山数据
this.reqMines();
},
// ------------------------------------------------------------------- // -------------------------------------------------------------------
querySearchAsync(queryString, cb) { querySearchAsync(queryString, cb) {
var results = queryString ? this.marker.filter(v => v.name.indexOf(queryString) != -1) : this.marker var results = queryString ? this.marker.filter(v => v.name.indexOf(queryString) != -1) : this.marker
...@@ -1326,6 +1365,7 @@ ...@@ -1326,6 +1365,7 @@
gotoManagement1(){ gotoManagement1(){
window.location.href = '/#/login4Index'; window.location.href = '/#/login4Index';
}, },
// 设置地图 // 设置地图
setMap() { setMap() {
map = new AMap.Map('map', { map = new AMap.Map('map', {
...@@ -1349,9 +1389,7 @@ ...@@ -1349,9 +1389,7 @@
}); });
let _this = this let _this = this
AMap.plugin([ AMap.plugin(['AMap.ControlBar',], function () {
'AMap.ControlBar',
], function () {
// 添加 3D 罗盘控制 // 添加 3D 罗盘控制
map.addControl(new AMap.ControlBar({ map.addControl(new AMap.ControlBar({
position: { position: {
...@@ -1362,7 +1400,14 @@ ...@@ -1362,7 +1400,14 @@
})); }));
}); });
var icon = ['https://s3.bmp.ovh/imgs/2023/02/28/7c5a7440766955ea.png', 'https://s3.bmp.ovh/imgs/2023/02/28/a3be161800e3f011.png', 'https://s3.bmp.ovh/imgs/2023/02/28/9e2393a29da416fd.png', 'https://s3.bmp.ovh/imgs/2023/02/28/cd177c08c6052267.png'] 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 // 循环绘制marker
for (var i = 0; i < this.marker.length; i++) { for (var i = 0; i < this.marker.length; i++) {
var marker = new AMap.Marker({ var marker = new AMap.Marker({
...@@ -1481,7 +1526,13 @@ ...@@ -1481,7 +1526,13 @@
window.gotoDataView = (mineType, mineId) => { window.gotoDataView = (mineType, mineId) => {
const mine = this.mineList.filter(x => x.mineType == mineType && x.id == mineId)[0] 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('kd.selected.mine', JSON.stringify(mine))
window.localStorage.setItem('bigScreenDetailMenuModel', 'emergency');
window.open(selfHost + '/datav/detail/video-monitor.html', '_self')
return ;
if(mineType == 1){ if(mineType == 1){
window.open(selfHost + '/datav/underground.html', '_self') window.open(selfHost + '/datav/underground.html', '_self')
} }
......
public/datav/watersource.html
View file @ 18d5f37d
...@@ -179,7 +179,6 @@ ...@@ -179,7 +179,6 @@
} }
.m-body{ .m-body{
border:1px solid red;
.md1-wrap{ .md1-wrap{
width:420px; width:420px;
ul{ ul{
...@@ -256,7 +255,7 @@ ...@@ -256,7 +255,7 @@
} }
.md3-1, .md9{ .md3-1, .md9{
border:1px solid red; margin-top:10px;
.md1-wrap{ .md1-wrap{
display:flex;width:100%;padding:10px 0;margin-top:10px; display:flex;width:100%;padding:10px 0;margin-top:10px;
...@@ -276,7 +275,6 @@ ...@@ -276,7 +275,6 @@
.md1b{ .md1b{
.m-tt3{ .m-tt3{
border:1px solid yellow;
display:flex;justify-content:flex-end; display:flex;justify-content:flex-end;
select{ select{
background-color:transparent;color:#e1ffff;border:1px solid #1DD2D9; background-color:transparent;color:#e1ffff;border:1px solid #1DD2D9;
...@@ -290,7 +288,6 @@ ...@@ -290,7 +288,6 @@
position:relative;height:300px;;width:100%; position:relative;height:300px;;width:100%;
.charts{ .charts{
position:absolute;top:0;left:0;height:100%;width:100%; position:absolute;top:0;left:0;height:100%;width:100%;
border:1px solid green;
} }
} }
} }
...@@ -299,7 +296,7 @@ ...@@ -299,7 +296,7 @@
.md9{ .md9{
.md1b{ .md1b{
div.chartbox{ div.chartbox{
height:200px; height:150px;
} }
.md1-wrap{padding:0;} .md1-wrap{padding:0;}
...@@ -308,6 +305,15 @@ ...@@ -308,6 +305,15 @@
.icon{width:80px;height:80px;} .icon{width:80px;height:80px;}
} }
} }
.footer{
.actv{box-shadow:inset 0 0 25px rgba(0, 0, 0, 0.2);}
.item-wrap{
&>div{
cursor:pointer;
}
}
}
} }
</style> </style>
</head> </head>
...@@ -489,7 +495,7 @@ ...@@ -489,7 +495,7 @@
<div class="absolute flex-text footer" style="bottom: 10px;left: 50%;transform: translateX(-50%);"> <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" :style="{ transform: 'scale(' + (widthScale > 1 ? 1 : widthScale) + ')' }">
<div class="flex-text" :class="isFullScreen?'tr-bottom':'tr-bottom-re'"> <div class="flex-text item-wrap" :class="isFullScreen?'tr-bottom':'tr-bottom-re'">
<div class="relative" @click="mineTypeEvent(1)" :class="{actv:mineType===1}"> <div class="relative" @click="mineTypeEvent(1)" :class="{actv:mineType===1}">
<img style="width: 134px;height: 146px;" src="static/mine-bg-0.png" alt=""> <img style="width: 134px;height: 146px;" src="static/mine-bg-0.png" alt="">
<div class="poa-cover flex-text flex-column"> <div class="poa-cover flex-text flex-column">
...@@ -531,28 +537,10 @@ ...@@ -531,28 +537,10 @@
<div :class="isFullScreen?'tr-right':'tr-right-re'"class="flex flex-column space-between relative" style="display:flex;justify-content:center;height:100%;"> <div :class="isFullScreen?'tr-right':'tr-right-re'"class="flex flex-column space-between relative" style="display:flex;justify-content:center;height:100%;">
<!-- right --> <!-- right -->
<div style="transform-origin:right center;right:0;" class="absolute" :style="{transform: 'scale(' + (heightScale) + ')'}" id="rightbar"> <div style="transform-origin:right center;right:0;margin-top:30px;" class="absolute" :style="{transform:'scale(' + (heightScale) + ')'}" id="rightbar">
<!-- 变形监测报警统计 -->
<!-- <div style="width:514px;background:rgba(0,0,0,.25);padding:10px 0;" 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>
<div id="main" style="width: 100%;height:300px;"></div>
</div> -->
<!-- 风速监测 --> <!-- 风速监测 -->
<div class="md9" style="width:514px;padding:10px 0 10px 15px;background:rgba(0,0,0,.3);"> <div class="md9" style="padding:10px 0 10px 15px;background:rgba(0,0,0,.3);">
<div class="ml10 flex align-center f20 color-theme wp100" <div class="ml10 flex align-center f20 color-theme wp100"
style="background-image:url('static/sub-title.png');background-size:100% 100%;height: 48px;"> style="background-image:url('static/sub-title.png');background-size:100% 100%;height: 48px;">
<div class="ml40">风速监测</div> <div class="ml40">风速监测</div>
...@@ -574,19 +562,18 @@ ...@@ -574,19 +562,18 @@
</div> </div>
</div> </div>
<!-- 温度监测 -->
<!-- 温湿度监测 --> <div class="md9 md10" style="padding:10px 0 10px 15px;background:rgba(0,0,0,.3);">
<div class="md9" style="width:514px;padding:10px 0 10px 15px;background:rgba(0,0,0,.3);">
<div class="ml10 flex align-center f20 color-theme wp100" <div class="ml10 flex align-center f20 color-theme wp100"
style="background-image:url('static/sub-title.png');background-size:100% 100%;height: 48px;"> style="background-image:url('static/sub-title.png');background-size:100% 100%;height: 48px;">
<div class="ml40">温湿度监测</div> <div class="ml40">温度监测</div>
</div> </div>
<div class="relative md1b" style="width:480px;"> <div class="relative md1b" style="width:480px;">
<div class="m-tt3"> <div class="m-tt3">
</div> </div>
<div class="md1-wrap"> <div class="md1-wrap">
<ul style="height:110px;"> <ul style="height:110px;">
<li v-for="item in deviceL1"> <li v-for="item in deviceL2">
<div class="icon"><font>{{item.value}}</font></div> <div class="icon"><font>{{item.value}}</font></div>
<span>{{item.key}}</span> <span>{{item.key}}</span>
</li> </li>
...@@ -595,12 +582,31 @@ ...@@ -595,12 +582,31 @@
<div class="chartbox"> <div class="chartbox">
<div class="charts"></div> <div class="charts"></div>
</div> </div>
</div>
</div>
<!-- 湿度监测 -->
<div class="md9 md11" style="padding:10px 0 10px 15px;background:rgba(0,0,0,.3);">
<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 md1b" style="width:480px;">
<div class="m-tt3">
</div>
<div class="md1-wrap">
<ul style="height:110px;">
<li v-for="item in deviceL3">
<div class="icon"><font>{{item.value}}</font></div>
<span>{{item.key}}</span>
</li>
</ul>
</div>
<div class="chartbox"> <div class="chartbox">
<div class="charts"></div> <div class="charts"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -948,6 +954,7 @@ ...@@ -948,6 +954,7 @@
// 设备状态 // 设备状态
deviceL1:[], deviceL1:[],
deviceL2:[], deviceL2:[],
deviceL3:[],
// 公告信息 // 公告信息
notice: { notice: {
...@@ -1036,6 +1043,12 @@ ...@@ -1036,6 +1043,12 @@
var md9 = this.$el.querySelector(".md9"); var md9 = this.$el.querySelector(".md9");
this.md9chart = md9.querySelector(".charts"); this.md9chart = md9.querySelector(".charts");
var md10 = this.$el.querySelector(".md10");
this.md10charts = md10.querySelector(".charts");
var md11 = this.$el.querySelector(".md11");
this.md11charts = md11.querySelector(".charts");
this.heightScale = (this.clientHeight - 100) / 1080 this.heightScale = (this.clientHeight - 100) / 1080
this.widthScale = this.clientWidth / 1920 this.widthScale = this.clientWidth / 1920
...@@ -1116,6 +1129,7 @@ ...@@ -1116,6 +1129,7 @@
self.m9select2 = document.createElement("select"); self.m9select2 = document.createElement("select");
var slist1 = [ var slist1 = [
{name:'近一周',value:'0'},
{name:'近一月',value:'1'}, {name:'近一月',value:'1'},
{name:'近半年',value:'2'}, {name:'近半年',value:'2'},
{name:'近一年',value:'3'}, {name:'近一年',value:'3'},
...@@ -1132,9 +1146,59 @@ ...@@ -1132,9 +1146,59 @@
self.md9param2 = ~~slist1[0].value; self.md9param2 = ~~slist1[0].value;
})(); })();
}
// right2 选择列表事件
(function(){
self.m10tt3 = md10.querySelector(".m-tt3");
var select = document.createElement("select");
self.m10select2 = document.createElement("select");
var slist1 = [
{name:'近一周',value:'0'},
{name:'近一月',value:'1'},
{name:'近半年',value:'2'},
{name:'近一年',value:'3'},
];
// select1
qf.UI.selectRender(select, slist1, {
onchange: function(val){
self.md10param2 = ~~val;
self.right2Data();
},
});
self.m10tt3.appendChild(self.m10select2);
self.m10tt3.appendChild(select);
self.md10param2 = ~~slist1[0].value;
})();
// right3 选择列表事件
(function(){
self.m11tt3 = md11.querySelector(".m-tt3");
var select = document.createElement("select");
self.m11select2 = document.createElement("select");
var slist1 = [
{name:'近一周',value:'0'},
{name:'近一月',value:'1'},
{name:'近半年',value:'2'},
{name:'近一年',value:'3'},
];
// select1
qf.UI.selectRender(select, slist1, {
onchange: function(val){
self.md11param2 = ~~val;
self.right3Data();
},
});
self.m11tt3.appendChild(self.m11select2);
self.m11tt3.appendChild(select);
self.md11param2 = ~~slist1[0].value;
})();
}
this.seriesDataFormat = function(data, opts){ this.seriesDataFormat = function(data, opts){
var names = data.names || [], list = data.list || data.lists, series = [], categories = [], maxVal = 0; var names = data.names || [], list = data.list || data.lists, series = [], categories = [], maxVal = 0;
if(names[0] && list){ if(names[0] && list){
...@@ -1163,10 +1227,6 @@ ...@@ -1163,10 +1227,6 @@
}; };
return {series:series, categories:categories, maxVal:maxVal} return {series:series, categories:categories, maxVal:maxVal}
}; };
}, },
methods: { methods: {
reqSelectArea(selects, callback){ reqSelectArea(selects, callback){
...@@ -1225,7 +1285,7 @@ ...@@ -1225,7 +1285,7 @@
}else{ }else{
this.enterpriseId = 0; this.enterpriseId = 0;
this.marker = []; this.marker = [];
} };
this.reqDispense(this.enterpriseId); this.reqDispense(this.enterpriseId);
...@@ -1529,12 +1589,14 @@ ...@@ -1529,12 +1589,14 @@
}); });
}, },
// 风速
right1Select(){ right1Select(){
var that = this; var that = this;
var req = { var req = {
params: { params: {
enterpriseId: this.enterpriseId, enterpriseId: this.enterpriseId,
deptId: this.deptId, deptId: this.deptId,
mineType:this.mineType,
} }
}; };
axios.get(host + '/data/sz/sensorList/feng', req).then(res => { axios.get(host + '/data/sz/sensorList/feng', req).then(res => {
...@@ -1550,7 +1612,6 @@ ...@@ -1550,7 +1612,6 @@
that.right1Data(); that.right1Data();
}); });
}, },
right1Data(){ right1Data(){
var that = this; var that = this;
var req = { var req = {
...@@ -1697,8 +1758,351 @@ ...@@ -1697,8 +1758,351 @@
new Highcharts.chart(this.md9chart, option); new Highcharts.chart(this.md9chart, option);
}, },
// 温度
right2Select(){
var that = this;
var req = {
params: {
enterpriseId: this.enterpriseId,
deptId: this.deptId,
mineType:this.mineType,
}
};
axios.get(host + '/data/sz/sensorList/wen', req).then(res => {
var res = res.data, list = res.body || [];
qf.UI.selectRender(that.m10select2, list, {
'name':'equipName',
'value':'equipNo',
onchange: function(val){
that.right2equipNo = val;
that.right2Data();
},
});
that.right2equipNo = list[0] && list[0].equipNo || '';
that.right2Data();
});
},
right2Data(){
var that = this;
var req = {
params: {
enterpriseId: this.enterpriseId,
deptId: this.deptId,
mineType:this.mineType,
equipNo: this.right2equipNo,
timeUtil: this.md10param2,
}
};
axios.get(host + '/api/shuili/temperatureNum', req).then(res => {
var res = res.data, body = res.body || [];
that.deviceL2 = body.list;
});
// 曲线
var req = {
params: {
enterpriseId: this.enterpriseId,
deptId: this.deptId,
mineType:this.mineType,
equipNo: this.right2equipNo,
timeUtil: this.md10param2,
}
};
axios.get(host + '/api/shuili/temperatureData', req).then(res => {
var res = res.data, body = res.body || [];
this.right2Chart(body);
});
},
right2Chart(body){
var formatSeries = this.seriesDataFormat(body, {datekey:'date', serie:{
type: 'spline',
marker: {
enabled: false
},
}, colors:["#fcaa00", "#20ef03", "#38f1f3"]});
var series = formatSeries.series;
var option = {
chart: {
type: 'column',
backgroundColor:'transparent',
//marginTop:30,
marginBottom:55,
marginLeft:30,
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime' || 'category',
labels: {
//rotation:0, // 设置轴标签旋转角度
style:{
color:'#fff'
},
y:15,
},
categories: formatSeries.categories,
lineWidth:0,
//lineColor:'#ff0000',
gridLineColor:'#aaa',
tickLength:0, // 刻度线
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%m-%d',
week: '%m-%d',
month: '%Y-%m',
year: '%Y'
}
},
yAxis: {
title: {
text: ''
},
labels:{
style:{
color:'#fff'
},
x:-6,
},
gridLineColor:'#0F5680',
//minorGridLineWidth: 5,
//gridLineWidth: 5,
//max:opts.maxValDev ? maxVal + maxVal * opts.maxValDev : null,
},
plotOptions: {
column: {
borderWidth: 0,
//y:50,
//itemMarginTop:50,
},
bar:{
borderWidth: 0,
},
},
legend: {
enabled: series.length > 1 ? true : false,
// 图例定位
layout: 'horizontal', // 水平布局:“horizontal”, 垂直布局:“vertical”
floating: false, // 图列是否浮动
align: 'right',
// 图例容器
//width:'100%', // number || String
padding:2, // 内边距
margin:2,
borderRadius:5,
//borderWidth:1,
verticalAlign: 'top',
// 图例项
//itemWidth:120, // 宽度
itemDistance:10, // 间距 20
y:-10,
itemMarginTop:2,
itemStyle:{color:'#fff',},
itemHoverStyle:{color:'#fff',},
},
credits: {
enabled: false
},
tooltip: {
pointFormat: '{series.name}：{point.y} ' + 'mm',
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%m-%d %H:%M',
hour: '%m-%d %H:%M',
day: '%m-%d %H:%M',
week: '%m-%d %H:%M',
month: '%Y-%m',
year: '%Y'
}
},
series: formatSeries.series,
};
new Highcharts.chart(this.md10charts, option);
},
// 湿度
right3Select(){
var that = this;
var req = {
params: {
enterpriseId: this.enterpriseId,
deptId: this.deptId,
mineType:this.mineType,
}
};
axios.get(host + '/data/sz/sensorList/shi', req).then(res => {
var res = res.data, list = res.body || [];
qf.UI.selectRender(that.m11select2, list, {
'name':'equipName',
'value':'equipNo',
onchange: function(val){
that.right3equipNo = val;
that.right3Data();
},
});
that.right3equipNo = list[0] && list[0].equipNo || '';
that.right3Data();
});
},
right3Data(){
var that = this;
var req = {
params: {
enterpriseId: this.enterpriseId,
deptId: this.deptId,
mineType:this.mineType,
equipNo: this.right3equipNo,
timeUtil: this.md11param2,
}
};
axios.get(host + '/api/shuili/humidityNum', req).then(res => {
var res = res.data, body = res.body || [];
that.deviceL3 = body.list;
});
// 曲线
var req = {
params: {
enterpriseId: this.enterpriseId,
deptId: this.deptId,
mineType:this.mineType,
equipNo: this.right3equipNo,
timeUtil: this.md11param2,
}
};
axios.get(host + '/api/shuili/humidityData', req).then(res => {
var res = res.data, body = res.body || [];
this.right3Chart(body);
});
},
right3Chart(body){
var formatSeries = this.seriesDataFormat(body, {datekey:'date', serie:{
type: 'spline',
marker: {
enabled: false
},
}, colors:["#fcaa00", "#20ef03", "#38f1f3"]});
var series = formatSeries.series;
var option = {
chart: {
type: 'column',
backgroundColor:'transparent',
//marginTop:30,
marginBottom:55,
marginLeft:30,
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime' || 'category',
labels: {
//rotation:0, // 设置轴标签旋转角度
style:{
color:'#fff'
},
y:15,
},
categories: formatSeries.categories,
lineWidth:0,
//lineColor:'#ff0000',
gridLineColor:'#aaa',
tickLength:0, // 刻度线
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%m-%d',
week: '%m-%d',
month: '%Y-%m',
year: '%Y'
}
},
yAxis: {
title: {
text: ''
},
labels:{
style:{
color:'#fff'
},
x:-6,
},
gridLineColor:'#0F5680',
//minorGridLineWidth: 5,
//gridLineWidth: 5,
//max:opts.maxValDev ? maxVal + maxVal * opts.maxValDev : null,
},
plotOptions: {
column: {
borderWidth: 0,
//y:50,
//itemMarginTop:50,
},
bar:{
borderWidth: 0,
},
},
legend: {
enabled: series.length > 1 ? true : false,
// 图例定位
layout: 'horizontal', // 水平布局:“horizontal”, 垂直布局:“vertical”
floating: false, // 图列是否浮动
align: 'right',
// 图例容器
//width:'100%', // number || String
padding:2, // 内边距
margin:2,
borderRadius:5,
//borderWidth:1,
verticalAlign: 'top',
// 图例项
//itemWidth:120, // 宽度
itemDistance:10, // 间距 20
y:-10,
itemMarginTop:2,
itemStyle:{color:'#fff',},
itemHoverStyle:{color:'#fff',},
},
credits: {
enabled: false
},
tooltip: {
pointFormat: '{series.name}：{point.y} ' + 'mm',
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%m-%d %H:%M',
hour: '%m-%d %H:%M',
day: '%m-%d %H:%M',
week: '%m-%d %H:%M',
month: '%Y-%m',
year: '%Y'
}
},
series: formatSeries.series,
};
new Highcharts.chart(this.md11charts, option);
},
// 矿山类型 // 矿山类型
...@@ -1713,7 +2117,6 @@ ...@@ -1713,7 +2117,6 @@
this.reqMines(); this.reqMines();
}, },
// ------------------------------------------------------------------- // -------------------------------------------------------------------
querySearchAsync(queryString, cb) { querySearchAsync(queryString, cb) {
var results = queryString ? this.marker.filter(v => v.name.indexOf(queryString) != -1) : this.marker var results = queryString ? this.marker.filter(v => v.name.indexOf(queryString) != -1) : this.marker
...@@ -2036,6 +2439,10 @@ ...@@ -2036,6 +2439,10 @@
this.right1Select(); this.right1Select();
this.right2Select();
this.right3Select();
this.reqDeviceStatus(); // 设备状态 this.reqDeviceStatus(); // 设备状态
} }
/* /*
......
src/views/home4Index.vue
View file @ 18d5f37d
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
</div> </div>
</div> </div>
<div class="bottomTitle">@中和地信有限公司</div> <!-- <div class="bottomTitle">@中和地信有限公司</div> -->
</div> </div>
</template> </template>
...@@ -115,7 +115,6 @@ export default { ...@@ -115,7 +115,6 @@ export default {
var host = location.protocol + "//" + window.location.host; var host = location.protocol + "//" + window.location.host;
if (type === "admin") { if (type === "admin") {
// this.$router.push({ path: "home4Center" }); // this.$router.push({ path: "home4Center" });
this.$router.push({ path: "/user/center" }); this.$router.push({ path: "/user/center" });
} else if (type === "应急管理") { } else if (type === "应急管理") {
// this.$router.push({ path: "home4Center" }); // this.$router.push({ path: "home4Center" });
...@@ -123,11 +122,9 @@ export default { ...@@ -123,11 +122,9 @@ export default {
// location.href = 'http://192.168.3.226:8057/datav/index.html' // location.href = 'http://192.168.3.226:8057/datav/index.html'
location.href = host + "/datav/index.html"; location.href = host + "/datav/index.html";
} else if (type === "自然资源") { } else if (type === "自然资源") {
// location.href = process.env.NODE_ENV + ''
// location.href = 'http://192.168.3.226:8057/datav/natural.html'
//location.href = host + "/datav/natural.html"; //location.href = host + "/datav/natural.html";
} else if (type === "水利系统") { } else if (type === "水利系统") {
// location.href = host + "/datav/watersource.html"; //location.href = host + "/datav/watersource.html";
} else if (type === "电子档案馆") { } else if (type === "电子档案馆") {
// this.$router.push({ path: "home4Center" }); // this.$router.push({ path: "home4Center" });
this.$router.push({ path: "/user/center" }); this.$router.push({ path: "/user/center" });
...@@ -270,7 +267,7 @@ export default { ...@@ -270,7 +267,7 @@ export default {
height: 100%; height: 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 100%; background-size:100% 100%;
overflow: hidden; overflow: hidden;
} }
.content{ .content{
......
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