Skip to content

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

'update'

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