Skip to content

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

'update'

parent c1e410ce
Show whitespace changes
Inline Side-by-side
Showing with 1984 additions and 2067 deletions
public/datav/index.html
View file @ 2d8b6fc7
...@@ -498,7 +498,6 @@ ...@@ -498,7 +498,6 @@
</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 :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) + ')'}"> <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;">
...@@ -1148,7 +1147,6 @@ ...@@ -1148,7 +1147,6 @@
} }
}); });
})(); })();
}, },
methods: { methods: {
reqSelectArea(selects){ reqSelectArea(selects){
...@@ -1216,7 +1214,7 @@ ...@@ -1216,7 +1214,7 @@
that.reqMines(that.enterpriseId); that.reqMines(that.enterpriseId);
}); });
}, },
reqDeviceStatus(){ left1(){
var req = { var req = {
params: { params: {
enterpriseId: this.enterpriseId, enterpriseId: this.enterpriseId,
...@@ -1299,7 +1297,7 @@ ...@@ -1299,7 +1297,7 @@
}, },
left1(){ left2(){
var req = { var req = {
params: { params: {
enterpriseId: this.enterpriseId, enterpriseId: this.enterpriseId,
...@@ -1871,13 +1869,13 @@ ...@@ -1871,13 +1869,13 @@
} }
}); });
this.left1(); this.left2();
this.left3(); this.left3();
this.right1(); this.right1();
this.right2(); this.right2();
this.right3(); this.right3();
this.reqDeviceStatus(); // 设备状态 this.left1(); // 设备状态
} }
/* /*
* 仅第一次加载时执行 * 仅第一次加载时执行
......
public/datav/natural.html
View file @ 2d8b6fc7
...@@ -179,8 +179,9 @@ ...@@ -179,8 +179,9 @@
} }
.m-body{ .m-body{
border:1px solid red;
.md1-wrap{ .md1-wrap{
width:420px;height:220px;left:15px;top:5px; width:420px;
ul{ ul{
display:flex;height:100%;width:100%; display:flex;height:100%;width:100%;
li{ li{
...@@ -214,6 +215,27 @@ ...@@ -214,6 +215,27 @@
span{color:#BFF008;} 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{ .l-md3{
...@@ -286,22 +308,29 @@ ...@@ -286,22 +308,29 @@
<!-- 物联网主机 --> <!-- 物联网主机 -->
<div style="transform-origin:left center;left:0;" class="absolute" :style="{transform:'scale(' + ( heightScale) + ')'}" id="leftbar"> <div style="transform-origin:left center;left:0;" class="absolute" :style="{transform:'scale(' + ( heightScale) + ')'}" id="leftbar">
<!-- 设备状态 --> <!-- 设备状态 -->
<div style="width: 514px;"> <div style="width:514px;margin-bottom:260px;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" style="height: 220px;width: 480px;"> <div class="relative" style="width: 480px;">
<div class="md1-wrap absolute"> <div class="md1-wrap">
<ul> <ul style="height:220px;">
<li v-for="item in deviceL1"> <li v-for="item in deviceL1">
<div class="icon"><font>{{item.num}}</font></div> <div class="icon"><font>{{item.num}}</font></div>
<span>{{item.name}}</span> <span>{{item.name}}</span>
</li> </li>
</ul> </ul>
<dl class="bar-list">
<dd v-for="item in deviceL2">
<span>{{item.name}}</span>
<div class="bar-warp">
<font class="before">在线{{item.online}}</font>
<el-progress :text-inside="true" :show-text="false" :stroke-width="26":percentage="item.online / (item.online+item.offline) * 100" stroke-linecap="square" color="#5CBAC6" define-back-color="#888"></el-progress>
<font class="after">{{item.offline}}离线</font>
</div> </div>
<div class="md2-wrap"> </dd>
// </dl>
</div> </div>
</div> </div>
</div> </div>
...@@ -414,138 +443,55 @@ ...@@ -414,138 +443,55 @@
<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%;">
<div style="transform-origin:right center;right:0;" class="absolute" :style="{transform: 'scale(' + (heightScale) + ')'}"> <div style="transform-origin:right center;right:0;" class="absolute" :style="{transform: 'scale(' + (heightScale) + ')'}" id="rightbar">
<!-- 停产矿山视频ai报警 -->
<div class="mb20 animation relative ovh" style="width: 514px;height: 296px;">
<div class="flex align-center f20 color-theme wp100"
style="background-image: url('static/sub-title.png');background-size: 100% 100%;height: 48px;">
<div class="ml40">停产矿山视频ai报警</div>
</div>
<div class="flex space-end">
<div class="space-between mt10 mr20 flex" style="width: 450px;">
<div class="flex-text f16">
<div>报警总数：<span class="color-light">{{ aiTotal }}</span></div>
<!-- <div class="ml30">处理数：<span class="color-light">{{ handled }}</span></div> -->
</div>
<div class="h30 flex-text pointer relative"
style="width: 90px;background-image: url('static/time-button-bg.png');background-size: 100% 100%;z-index: 200;"
@click="aiShowMask = !aiShowMask;showMask = false">
<div class="color-theme f14" style="transform: translateY(-2px);">{{
timeSelect[aiActive] }}</div>
<img class="ml5" style="width: 8px;height: 8px;transform: translateY(-2px);"
src="static/drop-down.png" alt="">
<div class="absolute wp100 selece-box" <!-- 变形监测实时报警 -->
style="left: 0;bottom: 0;transform: translateY(calc(100% + 10px));background-color: rgba(13,27,48,.7);border-radius: 5px;padding: 3px 0;" <div class="mt20 mb20 animation relative ovh l-md2" style="width:514px;background:rgba(0,0,0,.25);padding:10px 0;">
v-show="aiShowMask"> <div class="ml10 flex align-center f20 color-theme wp100"
<div class="f14 h30 flex-text select" :class="index == aiActive?'color-light':''" style="background-image: url('static/sub-title.png');background-size: 100% 100%;height: 48px;">
style="padding: 0 10px;" v-for="(item,index) in timeSelect" :key="index" <div class="ml40">变形监测实时报警</div>
@click.stop="clickAiActive(index)">
<div class="flex-1">{{ item }}</div>
</div>
</div>
</div>
</div>
</div> </div>
<div class="flex space-end"> <div style="width: 483px;background-color:rgba(27,165,169,.5);border:1px solid #1EAEAC;font-weight:bold;" class="h30 flex space-between align-center f18 ml5 mt10 tt-2">
<div>
<div style="width: 483px;background: linear-gradient(to right, rgba(171,238,255,0),rgba(171,238,255,.6));"
class="h30 color-light flex space-between align-center f18 mr5 mt10">
<div style="width: 120px;" class="flex-text">矿山名称</div> <div style="width: 120px;" class="flex-text">矿山名称</div>
<div class="flex-1 text-center">视频点名称</div> <div class="flex-1 text-center">设备名称</div>
<div class="text-center flex-1">报警时间</div> <div class="text-center flex-1">报警时间</div>
<div class="flex-text" style="width: 90px;">图片</div> <div class="flex-text" style="width: 90px;">状态</div>
<div style="width: 3px;" class="h30"></div> <div style="width: 3px;" class="h30"></div>
</div> </div>
<div class="absolute mr5" <div class="ml5" style="height:300px;overflow-y:scroll;width:483px;color:#0BD2E0;">
style="height: 168px;overflow-y: scroll;width: 483px;"> <div class="solid-bottom flex space-between f14" style="height:64px;" v-for="(item,index) in alarmlist" :key="index">
<div class="solid-bottom flex space-between f14" style="height: 64px;"
v-for="(item,index) in aiAlarm" :key="index">
<div style="width: 120px;" class="flex-text ovh"> <div style="width: 120px;" class="flex-text ovh">
<div class="flex-1 ml10 mr10 ellipsis2 text-center">{{ item.mineName }}</div> <div class="flex-1 ml10 mr10 ellipsis2 text-center">{{ item.enterpriseName }}</div>
</div> </div>
<div class="flex-1 flex-text ovh"> <div class="flex-1 flex-text ovh">
<div class="flex-1 ml10 mr10 ellipsis text-center">{{ item.videoName }}</div> <div class="flex-1 ml10 mr10 ellipsis text-center">{{ item.name }}</div>
</div> </div>
<div class="text-center flex-1 flex-text"> <div class="text-center flex-1 flex-text">
<div> <div>
<div>{{ item.warnDatetime }}</div> <div>{{ item.time }}</div>
</div>
</div>
<div class="flex-text" style="width: 90px;">
<img style="width: 64px;height: 44px;border-radius: 5px;" :src="'/file'+item.warnImg"
alt="">
</div>
</div>
</div> </div>
</div> </div>
<div class="flex-text" style="width: 90px;" :class="item.status == 1?'':'color-yellow'">{{item.state}}</div>
</div> </div>
</div> </div>
<!-- 危险作业审批 -->
<div class="mt20 mb20" style="width: 514px;">
<div class="flex align-center f20 color-theme wp100"
style="background-image: url('static/sub-title.png');background-size: 100% 100%;height: 48px;">
<div class="ml40">危险作业审批</div>
</div> </div>
<div class="mt20 relative" style="width: 100%;height:260px;">
<div class="poa-cover" id="pie"></div>
<div class="absolute" style="right: 30px;bottom: 50px;"> <!-- 变形监测报警统计 -->
<div class="flex-text"> <div style="width:514px;background:rgba(0,0,0,.25);padding:10px 0;" class="l-md3">
<div class="round" style="width: 10px;height: 10px;background-color: #3ceaed;"> <div class="ml10 flex align-center f20 color-theme wp100"
</div>
<div class="f14 ml10">已通过</div>
</div>
<div class="flex-text mt5">
<div class="round" style="width: 10px;height: 10px;background-color: #e66a6a;">
</div>
<div class="f14 ml10">未通过</div>
</div>
<div class="flex-text mt5">
<div class="round" style="width: 10px;height: 10px;background-color: #f9b65e;">
</div>
<div class="f14 ml10">审核中</div>
</div>
</div>
</div>
</div>
<!-- 重点在线监测总览 -->
<div style="width: 514px;">
<div class="flex align-center f20 color-theme wp100"
style="background-image: url('static/sub-title.png');background-size: 100% 100%;height: 48px;"> 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="flex space-end"> <div class="flex-text ml20 mt10" style="width: 450px;">
<div class="flex-text mt10" style="width: 450px;margin-right: 26px;">
<div class="flex-1 flex-text f14 pointer animation" <div class="flex-1 flex-text f14 pointer animation"
:class="[index == 0?'':'ml15',index == overviewTabCur?'color-light':'']" :class="[index == 0?'':'ml15',index == TabCur?'color-light':'']"
style="height: 38px;background-image: url('static/button-bg.png');background-size: 100% 100%;" style="height: 38px;background-image: url('static/button-bg.png');background-size: 100% 100%;"
v-for="(item,index) in overviewTabs" :key="index" @click="changeoverviewTab(index)">{{ v-for="(item,index) in tabs" :key="index" @click="changeTab(index)">{{ item }}</div>
item }}</div>
</div>
</div>
<div class="flex-text mt20 mb20">
<div class="ml30">
<div class="h30 flex-text" v-for="(item,index) in overview.length" :key="index">
<div class="text-right f14 flex-1">{{ overview[index].text }}</div>
</div>
</div>
<div class="flex-1 ml10 mr10">
<div class="h30 flex-text" v-for="(item,index) in overview.length" :key="index">
<div class="relative round wp100"
style="background-color: rgba(10,26,72,.6);height: 8px;">
<div class="absolute round animation"
style="left: 0;top: 0;background: linear-gradient(to right, #12cacd, #0af2f6);height: 8px;"
:style="{ width: overview[index].percent + '%' }"></div>
</div>
</div>
</div>
<div class="mr40">
<div class="h30 flex-text" v-for="(item,index) in overview.length" :key="index">
<div class="f14 flex-1 color-yellow">{{ overview[index].legend }}</div>
</div>
</div> </div>
<div class="space-end mt10 flex ml20" style="width: 450px;" id="daterage1">
<div class="m-t2"><div></div></div>
</div> </div>
<div id="main" style="width: 100%;height:300px;"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -901,7 +847,7 @@ ...@@ -901,7 +847,7 @@
// 在线监测实时报警 list // 在线监测实时报警 list
alarmlist: [], alarmlist: [],
// 在线监测报警统计 // 在线监测报警统计
tabs: ['变形监测', '环境监测', '人员定位'], tabs: ['边坡监测', '尾矿库监测', '沉降监测', '地压监测'],
TabCur: 0, TabCur: 0,
timeSelect: ['近一月', '近半年', '近一年'], timeSelect: ['近一月', '近半年', '近一年'],
active: 0, active: 0,
...@@ -963,7 +909,7 @@ ...@@ -963,7 +909,7 @@
} }
var bodyel = document.getElementById("body"); var bodyel = document.getElementById("body");
var leftbar = bodyel.querySelector("#leftbar"); var rightbar = bodyel.querySelector("#rightbar");
this.heightScale = (this.clientHeight - 100) / 1080 this.heightScale = (this.clientHeight - 100) / 1080
this.widthScale = this.clientWidth / 1920 this.widthScale = this.clientWidth / 1920
...@@ -1001,23 +947,6 @@ ...@@ -1001,23 +947,6 @@
}, 10 * 1000); }, 10 * 1000);
/* // tab event
var h_tab = this.$el.querySelector("#h_tab");
h_tab.onclick = function(e){
var tag = e.target || e.srcElement;
if(tag.nodeName === 'LI'){
var did = ~~tag.dataset.id;
if(did === 2){
window.open('/datav/natural.html')
}else if(did === 3){
window.open('/datav/watersource.html')
}else if(did === 5){
window.open('/')
};
};
}; */
// 区域选择列表 // 区域选择列表
var mselect = document.getElementById("mselect"); var mselect = document.getElementById("mselect");
var selects = mselect.children; var selects = mselect.children;
...@@ -1025,8 +954,43 @@ ...@@ -1025,8 +954,43 @@
// 请求三级联动 // 请求三级联动
this.reqSelectArea(selects); this.reqSelectArea(selects);
// 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: { methods: {
reqSelectArea(selects){ reqSelectArea(selects){
...@@ -1176,7 +1140,7 @@ ...@@ -1176,7 +1140,7 @@
}); });
}, },
left1(){ reqMd7(){
var req = { var req = {
params: { params: {
enterpriseId: this.enterpriseId, enterpriseId: this.enterpriseId,
...@@ -1186,16 +1150,144 @@ ...@@ -1186,16 +1150,144 @@
axios.get(host + '/tab/drybeachequipinfor/dryStateCountNature', req).then(res => { axios.get(host + '/tab/drybeachequipinfor/dryStateCountNature', req).then(res => {
res = res.data; res = res.data;
var list = res.body || []; var list = res.body || [];
console.log('left1 ________________ ', list);
this.deviceL1 = list.status; this.deviceL1 = list.status;
this.deviceL2 = list.list; 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]
});
},
// ------------------------------------------------------------------- // -------------------------------------------------------------------
querySearchAsync(queryString, cb) { querySearchAsync(queryString, cb) {
...@@ -1237,7 +1329,7 @@ ...@@ -1237,7 +1329,7 @@
// 设置地图 // 设置地图
setMap() { setMap() {
map = new AMap.Map('map', { map = new AMap.Map('map', {
zoom: 14, // 缩放级别 zoom: 8, // 缩放级别
zooms: [3, 16], zooms: [3, 16],
layers: [ layers: [
// 卫星 // 卫星
...@@ -1478,140 +1570,6 @@ ...@@ -1478,140 +1570,6 @@
}, },
right1(){
let params = {
page: 1,
count: 100
}
if(this.aiActive === 0) {
params.limitDay = 30
}
if(this.aiActive === 1) {
params.limitDay = 179
}
if(this.aiActive === 2) {
params.limitDay = 365
}
axios.get(host + '/api/datav/video-ai', {
params: params
}).then(res => {
if (res && res.data) {
this.aiTotal = res.data.total
this.handled = 0
this.aiAlarm = res.data.results
}
});
},
right2() {
const pie = (body, data) => {
var list = body.state, workList = body.dangerWorkList;
var seriesData = [];
for(var item of list){
seriesData.push({
value: item.value,
name: item.name + item.value,
label: { color: '#ffffff' }
})
};
// 基于准备好的dom，初始化echarts实例
pieChart = echarts.init(document.getElementById("pie"));
pieChart.clear() // 定时刷新 实际不刷新 演示用
pieChart.setOption({
color: ['#3ceaed', '#e66a6a', '#f9b65e'],
series: [
{
type: "pie",
startAngle: 0,
center: ['35%', '50%'],
radius: '70%',
data: seriesData,
itemStyle: {
// normal: {
// borderWidth: 2,
// borderColor: 'rgba(0,0,0,.5)'
// }
}
}
]
});
// 饼图点击事件
pieChart.on("click", () => {
this.maskActive = 0
this.getPieList(workList)
this.isMaskShow = true
});
}
var req = {
params: {
enterpriseId:this.enterpriseId,
}
};
axios.get(host + '/api/yingji/dangerousworkaudit/dangerwork-list', req).then(res => {
res = res.data;
if (res && res.body) {
pie(res.body)
}
});
},
right3() {
if (this.overviewTabCur === 0) {
var req = {
params: {
enterpriseId:this.enterpriseId,
deptId: this.deptId,
}
};
axios.get(host + '/api/yingji/keynoteadmin/deformationMonitoring', req).then(res => {
res = res.data;
var body = res.body || {}, list = body.list || [];
this.overview = [
{ text: list[0].name, percent: list[0].num, legend: list[0].num + '个' },
{ text: list[1].name, percent: list[1].num, legend: list[1].num + '个' },
{ text: list[2].name, percent: list[2].num, legend: list[2].num + '个' },
{ text: list[3].name, percent: list[3].num, legend: list[3].num + '个' },
{ text: list[4].name, percent: list[4].num, legend: list[4].num + '%' },
{ text: list[5].name, percent: list[5].num, legend: list[5].num + '%' }
]
});
}
if(this.overviewTabCur === 1){
const rn1 = Math.round(Math.random() * 0)
const rn2 = Math.round(Math.random() * 0)
const rn3 = 0
const rn4 = Math.floor(rn3 * 100)
const rn5 = Math.round(Math.random() * 0)
const rn6 = Math.round(Math.random() * 0)
this.overview = [
{ text: '监测设备总数', percent: rn1, legend: rn1 + '个' },
{ text: '设备离线总数', percent: rn2, legend: rn2 + '个' },
{ text: '设备在线总数', percent: rn3, legend: rn3 + '个' },
{ text: '设备在线率', percent: rn4, legend: rn4 + '%' },
{ text: '当月报警数量', percent: rn5, legend: rn5 + '个' },
{ text: '报警处理率', percent: rn6, legend: rn6 + '%' }
]
}
if(this.overviewTabCur === 2){
const rn1 = Math.round(Math.random() * 0)
const rn2 = Math.round(Math.random() * 0)
const rn3 = Math.round(Math.random() * 0)
const rn4 = Math.round(Math.random() * 0)
const rn5 = Math.round(Math.random() * 0)
const rn6 = Math.round(Math.random() * 0)
this.overview = [
{ text: '井下作业人数', percent: rn1, legend: rn1 + '人' },
{ text: '带班领导下井数', percent: rn2, legend: rn2 + '人' },
{ text: '人员报警数量', percent: rn3, legend: rn3 + '个' },
{ text: '区域报警数量', percent: rn4, legend: rn4 + '个' },
{ text: '人员报警处置率', percent: rn5, legend: rn5 + '%' },
{ text: '区域报警处置率', percent: rn6, legend: rn6 + '%' }
]
}
},
async getData(refesh) { async getData(refesh) {
this.refreshTimes = this.refreshTimes + 1; this.refreshTimes = this.refreshTimes + 1;
/** /**
...@@ -1637,10 +1595,9 @@ ...@@ -1637,10 +1595,9 @@
} }
}); });
this.left1(); this.reqMd7();
this.right1(); this.reqMd8();
this.right2(); this.reqMd3();
this.right3();
this.reqDeviceStatus(); // 设备状态 this.reqDeviceStatus(); // 设备状态
} }
...@@ -1703,7 +1660,6 @@ ...@@ -1703,7 +1660,6 @@
changeoverviewTab(index) { changeoverviewTab(index) {
if (index == this.overviewTabCur) return if (index == this.overviewTabCur) return
this.overviewTabCur = index this.overviewTabCur = index
this.right3()
}, },
clickAiActive(index){ clickAiActive(index){
......
public/datav/watersource.html
View file @ 2d8b6fc7
This source diff could not be displayed because it is too large. You can view the blob instead.
src/views/home4Index V0.2.vue deleted 100644 → 0
View file @ c1e410ce
<template>
<div class="login" :style="'background-image:url(' + Background + ');'">
<div class="topTitle" :style="'background-image:url(' + Title + ');'">
中和地信企业管理平台
</div>
<div class="subTopTitle">
<h2 :style="'background-image:url(' + Welcome + ');'">
<img src="@/assets/home4Index/icon5.png" />
<div class="wrapper" style=" position: absolute;
top: 38px;
left: 86px;
width: 300px;
padding-left: 20px;
overflow: hidden;
"> <div class="floating-text">
中和地信有限公司欢迎您！
</div>
</div>
</h2>
<h2 @click="navTo('admin')" style="cursor: pointer;">
<img src="@/assets/home4Index/icon6.png" />管理后台
</h2>
</div>
<div class="wrapper">
<div class="content">
<ul>
<li
v-for="(item, index) in dataList"
:key="index"
@click="navTo(item.label)"
>
<div class="itemDiv">
<img
:src="require(`@/assets/home4Index/icon${index + 1}.png`)"
alt=""
/>
<p>
<span>{{ item.label }}</span>
<img src="@/assets/home4Index/underline2.png" />
</p>
</div>
</li>
</ul>
</div>
</div>
<div class="bottomTitle">@中和地信有限公司</div>
</div>
</template>
<script>
import qs from "qs";
import Background from "@/assets/home4Index/bg.png";
import Title from "@/assets/home4Index/title.png";
import Welcome from "@/assets/home4Index/underline.png";
import { mapGetters } from "vuex";
import menuApi from "@/api/system/menu.js";
export default {
name: "Login",
data() {
return {
show: false,
userStyle: null,
Background: Background,
Welcome,
Title,
codeUrl: "",
cookiePass: "",
loading: false,
redirect: undefined,
dataList: [],
};
},
computed: {
...mapGetters(["user"]),
},
watch: {
$route: {
handler: function (route) {
const data = route.query;
if (data && data.redirect) {
this.redirect = data.redirect;
delete data.redirect;
if (JSON.stringify(data) !== "{}") {
this.redirect =
this.redirect + "&" + qs.stringify(data, { indices: false });
}
}
},
immediate: true,
},
},
created() {
// // 按照不同域名加载不同页面样式（企业、应急局），加载完毕后再显示页面
// const host = window.location.host;
// if (host === "yingji.longxijiancai.com") {
// this.userStyle = "应急局";
// }
// if (host === "qiye.longxijiancai.com") {
// this.userStyle = "企业";
// }
menuApi.getMenusHome().then((res) => {
this.dataList = res.body;
});
},
methods: {
navTo(type) {
var host = location.protocol + "//" + window.location.host;
if (type === "admin") {
// this.$router.push({ path: "home4Center" });
this.$router.push({ path: "/user/center" });
} else if (type === "应急管理") {
// this.$router.push({ path: "home4Center" });
// this.$router.push({ path: "/user/center" });
// location.href = 'http://192.168.3.226:8057/datav/index.html'
location.href = host + "/datav/index.html";
} 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";
} else if (type === "水利资源") {
// location.href = 'http://192.168.3.226:8057/datav/watersource.html'
location.href = host + "/datav/watersource.html";
} else if (type === "电子档案馆") {
// this.$router.push({ path: "home4Center" });
this.$router.push({ path: "/user/center" });
}
},
},
};
</script>
<style rel="stylesheet/scss" lang="scss">
@keyframes floatShadow {
0% {
transform: translateX(280px);
display: block;
}
100% {
transform: translateX(-300px);
display: none;
}
}
.floating-text {
font-size: 18px;
line-height: 1;
color: #fff;
text-shadow: 0 0 5px #fff;
animation: floatShadow;
animation-name: floatShadow;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
// position: absolute;
// top: 38px;
}
.subTopTitle {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-between;
position: absolute;
top: 10px;
width: 100%;
/* z-index: 99999; */
height: 110px;
color: #fff;
font-size: 12px;
padding: 10px 43px;
align-items: center;
h2 {
display: inline-block;
vertical-align: middle;
letter-spacing: 2px;
font-weight: 600;
color: #fdfdfd;
&:first-child {
height: 50px;
background-repeat: no-repeat;
background-position-y: 30px;
}
}
img {
vertical-align: middle;
margin-right: 10px;
}
}
.topTitle {
position: absolute;
top: 0;
width: 100%;
color: #fff;
text-align: center;
background-size: cover;
height: 100px;
font-size: 38px;
line-height: 100px;
font-weight: bold;
letter-spacing: 5px;
}
.bottomTitle {
position: absolute;
bottom: 0;
background: #021d39;
height: 32px;
width: 100%;
line-height: 32px;
color: #fff;
text-align: center;
}
.wrapper {
.header {
h2 {
color: #00346b;
text-align: right;
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}
}
h1 {
text-align: center;
color: #00346b;
}
ul {
list-style: none;
// width: 1200px;
overflow: hidden;
}
li {
display: flex;
justify-content: center;
float: left;
width: 304px;
// background: #173e67;
height: 620px;
line-height: 170px;
text-align: center;
color: #fff;
font-size: 28px;
font-weight: bold;
margin: 10px;
cursor: pointer;
&:nth-child(1) {
// background: #135965;
}
&:nth-child(4) {
// background: #135965;
}
&:hover {
background-image: url("../assets/home4Index/bg2.png");
}
background-image: url("../assets/home4Index/bg1.png");
background-repeat: no-repeat;
background-size: cover;
}
}
.itemDiv {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
& > img {
width: 120px;
margin-left: 20px;
}
p {
width: 180px;
margin-top: -10px;
position: relative;
span {
font-weight: 500;
letter-spacing: 3px;
}
img {
position: absolute;
bottom: 45px;
right: 15px;
}
}
}
.login {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-size: cover;
}
</style>
src/views/home4Index.vue
View file @ 2d8b6fc7
...@@ -126,7 +126,7 @@ export default { ...@@ -126,7 +126,7 @@ export default {
// location.href = process.env.NODE_ENV + '' // location.href = process.env.NODE_ENV + ''
// location.href = 'http://192.168.3.226:8057/datav/natural.html' // 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 = 'http://192.168.3.226:8057/datav/watersource.html' // location.href = 'http://192.168.3.226:8057/datav/watersource.html'
location.href = host + "/datav/watersource.html"; location.href = host + "/datav/watersource.html";
} else if (type === "电子档案馆") { } else if (type === "电子档案馆") {
......
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