Skip to content

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

'update'

parent 885d2ea8
Hide whitespace changes
Inline Side-by-side
Showing with 252 additions and 207 deletions
public/datav/index.html
View file @ 703cff55
......@@ -85,26 +85,24 @@
@keyframes floatShadow {
0% {
text-shadow: 0 0 5px #fff;
transform:translateX(1300px);
display:block;
}
100% {
text-shadow: 0 0 5px #fff;
transform:translateX(-1300px);
display:none;
}
}
.floating-text {
font-size: 30px;
color: #FDD756;
//animation: floatShadow;
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;
position:absolute;top:3px;
}
.a0a_{
......@@ -159,9 +157,14 @@
<div class="floating-text">中和地信有限公司欢迎您</div>
<div class="a0a_">
<ul><li data-id="1" class="active">应急管理</li> <li data-id="2" class="">自然资源</li></ul>
<ul><li data-id="5" class="">水利系统</li> <li data-id="6" class="">电子档案</li></ul>
<div class="a0a_" id="h_tab">
<ul>
<li data-id="1" class="active">应急管理</li>
<li data-id="2" class="" >自然资源</li></ul>
<ul>
<li data-id="3" class="" >水利系统</li>
<li data-id="4" class="">电子档案</li>
</ul>
</div>
</div>
</div>
......@@ -796,8 +799,6 @@
const host = location.protocol + '//' + (location.hostname === '192.168.3.226' ? '192.168.3.37' : '192.168.13.200') + ':8013';
console.log('host ________________ ', location.hostname);
const selfHost = location.hostname === '192.168.3.226' ? 'http://192.168.3.226:8057' : 'http://192.168.13.200:8057';
......@@ -986,6 +987,25 @@
}
this.noticeIndex = this.noticeIndex + 1;
}, 10 * 1000);
// tab event
var h_tab = this.$el.querySelector("#h_tab");
console.log('h_tab ________________ ', h_tab);
h_tab.onclick = function(e){
var tag = e.target || e.srcElement;
console.log('tag ________________ ', tag);
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')
};
};
};
},
methods: {
querySearchAsync(queryString, cb) {
......
public/datav/natural.html
View file @ 703cff55
......@@ -752,10 +752,10 @@
</div>
<div class="a0a_" id="a0a_">
<ul>
<li><a href="javascript:void(0)">返回首页</a></li>
<li><a href="/datav/index.html">返回首页</a></li>
</ul>
<ul>
<li><a href="javascript:void(0)">后台管理</a></li>
<li><a href="/#/dashboard">后台管理</a></li>
</ul>
</div>
</header>
......@@ -916,12 +916,17 @@
const LOCAL_API = location.protocol + '//' + (location.hostname === '192.168.3.226' ? '192.168.3.37' : '192.168.13.200') + ':8013';
console.log('LOCAL_API ________________ ', LOCAL_API);
const selfHost = location.hostname === '192.168.3.226' ? 'http://192.168.3.226:8057' : 'http://192.168.13.200:8013';
qf(function(){
var host = location.protocol + '//' + window.location.host;
var token = Cookies.get('ELADMIN-TOEKN');
if (!token) {
window.open(selfHost + '/#/login', '_self')
return
}
axios = axios.create({
baseURL: LOCAL_API,
......@@ -997,8 +1002,6 @@
var wrap33 = amd33.querySelector(".wrap");
var select33 = amd33.querySelector("select");
console.log('mounted ________________ ', this);
select33.onchange = function(e){
var value = this.selectedOptions[0].value;
m.alarmTrend(value);
......@@ -1176,7 +1179,7 @@
})();
// 温度监测
// 风速监测
(m.fengsu = function(dateRange){
m.requst('get', '/data/sz/countStatistics/feng', {}).then(function(res){
self.dm4 = res;
......
public/datav/watersource.html
View file @ 703cff55
......@@ -380,8 +380,33 @@
}
}
.a-md40{
height:2.66rem;
.ct-box{
margin:0;
&:before{
content:"";position:absolute;top:.32rem;left:.46rem;height:1.56rem;width:.95rem;
background:no-repeat center center url('static/water/md40_1.png');
background-size:100% 100%;
}
h3{
display:flex;line-height:1;
position:absolute;top:.64rem;left:1.97rem;height:.37rem;width:2.50rem;
background:no-repeat center center url('static/water/md40_2.png');
background-size:100% 100%;
font-size:.18rem;font-weight:normal;padding:.04rem 0 0 .60rem;
}
span{
position:absolute;top:1.24rem;left:2.58rem;height:.37rem;width:2.50rem;
font{
font-family:"diget year";font-size:.47rem;color:#c5f9ff;
}
}
}
}
.a-md33{
height:3.78rem;
height:3.54rem;margin-bottom:1rem;
.item_2{
position:absolute;top:.56rem;left:.50rem;z-index:10;
select{background-color:transparent;color:#e1ffff;font-size:.14rem;padding:.02rem;}
......@@ -391,21 +416,21 @@
}
.a-md34{
height:5.02rem;
height:5.04rem;margin-bottom:.50rem;
dl.scrolling4{
dt{
grid-template-columns:33.33% 33.33% 33.33%;
grid-template-columns:25% 25% 25% 25%;
span{text-align:center;}
}
dd{
grid-template-columns:33.33% 33.33% 33.33%;
grid-template-columns:25% 25% 25% 25%;
span{text-align:center;display:block;}
}
}
}
.a-md35{
height:4.20rem;
height:1.60rem;visibility:hidden;
dl.scrolling4{
dt{
grid-template-columns:33.33% 33.33% 33.33%;
......@@ -752,10 +777,10 @@
</div>
<div class="a0a_" id="a0a_">
<ul>
<li><a href="javascript:void(0)">返回首页</a></li>
<li><a href="/datav/index.html">返回首页</a></li>
</ul>
<ul>
<li><a href="javascript:void(0)">后台管理</a></li>
<li><a href="/#/dashboard">后台管理</a></li>
</ul>
</div>
</header>
......@@ -765,36 +790,17 @@
<section class="b0_" id="b0_">
<div class="b0_a active">
<div class="side b0_left">
<div class="a-md32" id="amd32">
<div class="a-md40" id="amd40">
<div class="abs-full">
<div class="m-tt">
<h4>位移监测</h4>
<h4>年度降水总量</h4>
</div>
<div class="m-body">
<div class="m-t2">
<ul>
<li v-for="(item, i) in dm1.statistics"><h3>{{item.num}}</h3><span>{{item.name}}</span></li>
</ul>
</div>
<div class="ct-box">
<div class="wrap">
<dl class="scrolling4">
<dt>
<span>站点编号</span>
<span>测点名称</span>
<span>X位移</span>
<span>Y位移</span>
<span>Z位移</span>
</dt>
<dd v-for="(item, i) in dm1.list">
<span>{{item.code}}</span>
<span>{{item.name}}</span>
<span>{{item.x}}mm</span>
<span>{{item.y}}mm</span>
<span>{{item.z}}mm</span>
</dd>
</dl>
</div>
<h3>本年度累计降水量</h3>
<span>
<font>{{dm1.num}}</font>mm
</span>
</div>
</div>
</div>
......@@ -804,12 +810,6 @@
<div class="m-tt">
<h4>位移报警趋势</h4>
</div>
<div class="item_2 shadow1">
<select>
<option value="1">近一月</option>
<option value="3">近三月</option>
</select>
</div>
<div class="m-body">
<div class="wrap">
</div>
......@@ -821,13 +821,12 @@
<div class="a-md32 a-md34">
<div class="abs-full">
<div class="m-tt">
<h4>温度监测</h4>
<h4>降水监测</h4>
</div>
<div class="m-body">
<div class="m-t2">
<ul>
<li><h3>156</h3><span>设备总数</span></li>
<li><h3>24</h3><span>设备离线</span></li>
<li v-for="(item, i) in dm3.statistics"><h3>{{item.num}}</h3><span>{{item.name}}</span></li>
</ul>
</div>
<div class="ct-box">
......@@ -835,13 +834,15 @@
<dl class="scrolling4">
<dt>
<span>站点编号</span>
<span>测点名称</span>
<span>实时温度</span>
<span>测站名称</span>
<span>实时雨量</span>
<span>实时雨量</span>
</dt>
<dd>
<span>5546884655</span>
<span>测点1</span>
<span>24°C</span>
<dd v-for="(item, i) in dm3.list">
<span>{{item.code}}</span>
<span>{{item.name}}</span>
<span>{{item.value}}mm</span>
<span>{{item.zongliang}}mm</span>
</dd>
</dl>
</div>
......@@ -852,31 +853,9 @@
<div class="a-md32 a-md35" id="amd35">
<div class="abs-full">
<div class="m-tt">
<h4>温度监测</h4>
<h4></h4>
</div>
<div class="m-body">
<div class="m-t2">
<ul>
<li><h3>156</h3><span>设备总数</span></li>
<li><h3>24</h3><span>设备离线</span></li>
</ul>
</div>
<div class="ct-box">
<div class="wrap">
<dl class="scrolling4">
<dt>
<span>站点编号</span>
<span>测点名称</span>
<span>实时温度</span>
</dt>
<dd>
<span>5546884655</span>
<span>测点1</span>
<span>24°C</span>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
......@@ -888,7 +867,6 @@
</div>
</body>
<!-- 引入echarts -->
<script src="js/echarts.min.js"></script>
<script src="js/echarts-gl.js"></script>
......@@ -917,12 +895,16 @@
const LOCAL_API = location.protocol + '//' + (location.hostname === '192.168.3.226' ? '192.168.3.37' : '192.168.13.200') + ':8013';
console.log('LOCAL_API ________________ ', LOCAL_API);
const selfHost = location.hostname === '192.168.3.226' ? 'http://192.168.3.226:8057' : 'http://192.168.13.200:8013';
qf(function(){
var host = location.protocol + '//' + window.location.host;
var token = Cookies.get('ELADMIN-TOEKN');
if (!token) {
window.open(selfHost + '/#/login', '_self')
return
}
axios = axios.create({
baseURL: LOCAL_API,
......@@ -971,8 +953,7 @@
data() {
return {
dm1:{},
dm3:{},
}
},
watch: {
......@@ -997,126 +978,167 @@
var amd33 = self.$el.querySelector("#amd33");
var wrap33 = amd33.querySelector(".wrap");
console.log('mounted ________________ ', this);
var option = {
chart: {
type: 'column',
backgroundColor:'transparent',
//marginTop:30,
//marginBottom:30,
//marginLeft:30,
},
title: {
text: ''
},
subtitle: {
text: ''
},
tooltip:{
enabled:false,
borderWidth:10,
},
xAxis: {
type: 'datetime',
categories: [1,2,3,4,5],
lineWidth:0,
//lineColor:'#ff0000',
gridLineColor:'#aaa',
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:{
x:-6,
},
gridLineColor:'#aaa',
max:null,
},
plotOptions: {
column: {
borderWidth: 0,
//y:50,
//itemMarginTop:50,
},
bar:{
borderWidth: 0,
},
},
tooltip: {
// {point.y:.4f} // 保留4位小数
//headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
//pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}:</td>' +
//'<td style="padding:0"><b>{point.y}'+unit+'</b> </td></tr>',
footerFormat: '</table>',
shared: true, // hover时是否显示所有线段值
useHTML: true,
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%m-%d %H时',
week: '%m-%d',
month: '%Y-%m',
year: '%Y'
}
},
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:{},
itemHoverStyle:{},
},
credits: {
enabled: false
},
series: [{
data: [
{"name":"高区应急行业","y":16,"color":"#2CAFFE"},
{"name":"船舶工业行业","y":7,"color":"#90ED7D"},
],
}],
};
new Highcharts.chart(wrap33, option);
m.requst('get', '/data/mp/countStatistics', {}).then(function(res){
console.log('res ________________ ', res);
// 年度降水总量
m.requst('get', '/data/rg/rainfall-year', {}).then(function(res){
self.dm1 = res
});
// 24小时各监测点降水量
(m.alarmTrend = function(){
m.requst('get', '/data/rg/rainfallDay', {}).then(function(res){
var seriesDataFormat = function(data, opts){
var names = data.names || [], list = data.list || data.lists, series = [], categories = [], maxVal = 0;
if(names[0] && list){
var colors = opts.colors || ['#7CB5EC', '#90ED7D', '#F7A35C', '#8085E9', '#F15C80', '#E4D354', '#2B908F', '#F45B5B', '#91E8E1', '#0769CB', '#00ABBD', '#ffd886', "#9F2E61", "#4D670C"];
var len = names.length;
for(var i=0; i<len; i++){
var item = names[i];
var serie = Object.assign({}, opts.serie) || {};
serie.name = item.name;
!serie.data && (serie.data = []);
serie.key = item.key;
!serie.type && (serie.type = data.chartType || opts.type);
serie.color = colors[i];
series.push(serie);
};
for(var item of list){
var values = item.values;
var timestamp = item['date'];
categories.push(timestamp);
for(var serie of series){
var value = values[serie.key] * 1;
Math.abs(value) > maxVal && (maxVal = Math.abs(value));
serie.data.push([timestamp, value]);
};
};
};
return {series:series, categories:categories, maxVal:maxVal}
};
var formatSeries = seriesDataFormat(res, {datekey:'date', serie:{
type: 'column',
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(wrap33, option);
});
})();
// 降水监测
(m.jiangshui = function(dateRange){
m.requst('get', '/data/rg/countStatistics', {}).then(function(res){
self.dm3 = res;
});
})();
return ;
......
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