Skip to content

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

'update'

parent 885d2ea8
Show whitespace changes
Inline Side-by-side
Showing with 252 additions and 207 deletions
public/datav/index.html
View file @ 703cff55
...@@ -85,26 +85,24 @@ ...@@ -85,26 +85,24 @@
@keyframes floatShadow { @keyframes floatShadow {
0% { 0% {
text-shadow: 0 0 5px #fff;
transform:translateX(1300px); transform:translateX(1300px);
display:block; display:block;
} }
100% { 100% {
text-shadow: 0 0 5px #fff;
transform:translateX(-1300px); transform:translateX(-1300px);
display:none; display:none;
} }
} }
.floating-text { .floating-text {
font-size: 30px; font-size:18px;line-height:1;
color: #FDD756; color: #FDD756;text-shadow: 0 0 5px #fff;
//animation: floatShadow; animation: floatShadow;
animation-name:floatShadow; animation-name:floatShadow;
animation-duration: 20s; animation-duration: 20s;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-timing-function:linear; animation-timing-function:linear;
position:absolute; position:absolute;top:3px;
} }
.a0a_{ .a0a_{
...@@ -159,9 +157,14 @@ ...@@ -159,9 +157,14 @@
<div class="floating-text">中和地信有限公司欢迎您</div> <div class="floating-text">中和地信有限公司欢迎您</div>
<div class="a0a_"> <div class="a0a_" id="h_tab">
<ul><li data-id="1" class="active">应急管理</li> <li data-id="2" class="">自然资源</li></ul> <ul>
<ul><li data-id="5" class="">水利系统</li> <li data-id="6" class="">电子档案</li></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> </div>
</div> </div>
...@@ -796,8 +799,6 @@ ...@@ -796,8 +799,6 @@
const host = location.protocol + '//' + (location.hostname === '192.168.3.226' ? '192.168.3.37' : '192.168.13.200') + ':8013'; 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'; const selfHost = location.hostname === '192.168.3.226' ? 'http://192.168.3.226:8057' : 'http://192.168.13.200:8057';
...@@ -986,6 +987,25 @@ ...@@ -986,6 +987,25 @@
} }
this.noticeIndex = this.noticeIndex + 1; this.noticeIndex = this.noticeIndex + 1;
}, 10 * 1000); }, 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: { methods: {
querySearchAsync(queryString, cb) { querySearchAsync(queryString, cb) {
......
public/datav/natural.html
View file @ 703cff55
...@@ -752,10 +752,10 @@ ...@@ -752,10 +752,10 @@
</div> </div>
<div class="a0a_" id="a0a_"> <div class="a0a_" id="a0a_">
<ul> <ul>
<li><a href="javascript:void(0)">返回首页</a></li> <li><a href="/datav/index.html">返回首页</a></li>
</ul> </ul>
<ul> <ul>
<li><a href="javascript:void(0)">后台管理</a></li> <li><a href="/#/dashboard">后台管理</a></li>
</ul> </ul>
</div> </div>
</header> </header>
...@@ -916,12 +916,17 @@ ...@@ -916,12 +916,17 @@
const LOCAL_API = location.protocol + '//' + (location.hostname === '192.168.3.226' ? '192.168.3.37' : '192.168.13.200') + ':8013'; 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(){ qf(function(){
var host = location.protocol + '//' + window.location.host; var host = location.protocol + '//' + window.location.host;
var token = Cookies.get('ELADMIN-TOEKN'); var token = Cookies.get('ELADMIN-TOEKN');
if (!token) {
window.open(selfHost + '/#/login', '_self')
return
}
axios = axios.create({ axios = axios.create({
baseURL: LOCAL_API, baseURL: LOCAL_API,
...@@ -997,8 +1002,6 @@ ...@@ -997,8 +1002,6 @@
var wrap33 = amd33.querySelector(".wrap"); var wrap33 = amd33.querySelector(".wrap");
var select33 = amd33.querySelector("select"); var select33 = amd33.querySelector("select");
console.log('mounted ________________ ', this);
select33.onchange = function(e){ select33.onchange = function(e){
var value = this.selectedOptions[0].value; var value = this.selectedOptions[0].value;
m.alarmTrend(value); m.alarmTrend(value);
...@@ -1176,7 +1179,7 @@ ...@@ -1176,7 +1179,7 @@
})(); })();
// 温度监测 // 风速监测
(m.fengsu = function(dateRange){ (m.fengsu = function(dateRange){
m.requst('get', '/data/sz/countStatistics/feng', {}).then(function(res){ m.requst('get', '/data/sz/countStatistics/feng', {}).then(function(res){
self.dm4 = res; self.dm4 = res;
......
public/datav/watersource.html
View file @ 703cff55
...@@ -380,8 +380,33 @@ ...@@ -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{ .a-md33{
height:3.78rem; height:3.54rem;margin-bottom:1rem;
.item_2{ .item_2{
position:absolute;top:.56rem;left:.50rem;z-index:10; position:absolute;top:.56rem;left:.50rem;z-index:10;
select{background-color:transparent;color:#e1ffff;font-size:.14rem;padding:.02rem;} select{background-color:transparent;color:#e1ffff;font-size:.14rem;padding:.02rem;}
...@@ -391,21 +416,21 @@ ...@@ -391,21 +416,21 @@
} }
.a-md34{ .a-md34{
height:5.02rem; height:5.04rem;margin-bottom:.50rem;
dl.scrolling4{ dl.scrolling4{
dt{ dt{
grid-template-columns:33.33% 33.33% 33.33%; grid-template-columns:25% 25% 25% 25%;
span{text-align:center;} span{text-align:center;}
} }
dd{ dd{
grid-template-columns:33.33% 33.33% 33.33%; grid-template-columns:25% 25% 25% 25%;
span{text-align:center;display:block;} span{text-align:center;display:block;}
} }
} }
} }
.a-md35{ .a-md35{
height:4.20rem; height:1.60rem;visibility:hidden;
dl.scrolling4{ dl.scrolling4{
dt{ dt{
grid-template-columns:33.33% 33.33% 33.33%; grid-template-columns:33.33% 33.33% 33.33%;
...@@ -752,10 +777,10 @@ ...@@ -752,10 +777,10 @@
</div> </div>
<div class="a0a_" id="a0a_"> <div class="a0a_" id="a0a_">
<ul> <ul>
<li><a href="javascript:void(0)">返回首页</a></li> <li><a href="/datav/index.html">返回首页</a></li>
</ul> </ul>
<ul> <ul>
<li><a href="javascript:void(0)">后台管理</a></li> <li><a href="/#/dashboard">后台管理</a></li>
</ul> </ul>
</div> </div>
</header> </header>
...@@ -765,36 +790,17 @@ ...@@ -765,36 +790,17 @@
<section class="b0_" id="b0_"> <section class="b0_" id="b0_">
<div class="b0_a active"> <div class="b0_a active">
<div class="side b0_left"> <div class="side b0_left">
<div class="a-md32" id="amd32"> <div class="a-md40" id="amd40">
<div class="abs-full"> <div class="abs-full">
<div class="m-tt"> <div class="m-tt">
<h4>位移监测</h4> <h4>年度降水总量</h4>
</div> </div>
<div class="m-body"> <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="ct-box">
<div class="wrap"> <h3>本年度累计降水量</h3>
<dl class="scrolling4"> <span>
<dt> <font>{{dm1.num}}</font>mm
<span>站点编号</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>
</div> </div>
</div> </div>
</div> </div>
...@@ -804,12 +810,6 @@ ...@@ -804,12 +810,6 @@
<div class="m-tt"> <div class="m-tt">
<h4>位移报警趋势</h4> <h4>位移报警趋势</h4>
</div> </div>
<div class="item_2 shadow1">
<select>
<option value="1">近一月</option>
<option value="3">近三月</option>
</select>
</div>
<div class="m-body"> <div class="m-body">
<div class="wrap"> <div class="wrap">
</div> </div>
...@@ -821,13 +821,12 @@ ...@@ -821,13 +821,12 @@
<div class="a-md32 a-md34"> <div class="a-md32 a-md34">
<div class="abs-full"> <div class="abs-full">
<div class="m-tt"> <div class="m-tt">
<h4>温度监测</h4> <h4>降水监测</h4>
</div> </div>
<div class="m-body"> <div class="m-body">
<div class="m-t2"> <div class="m-t2">
<ul> <ul>
<li><h3>156</h3><span>设备总数</span></li> <li v-for="(item, i) in dm3.statistics"><h3>{{item.num}}</h3><span>{{item.name}}</span></li>
<li><h3>24</h3><span>设备离线</span></li>
</ul> </ul>
</div> </div>
<div class="ct-box"> <div class="ct-box">
...@@ -835,13 +834,15 @@ ...@@ -835,13 +834,15 @@
<dl class="scrolling4"> <dl class="scrolling4">
<dt> <dt>
<span>站点编号</span> <span>站点编号</span>
<span>测点名称</span> <span>测站名称</span>
<span>实时温度</span> <span>实时雨量</span>
<span>实时雨量</span>
</dt> </dt>
<dd> <dd v-for="(item, i) in dm3.list">
<span>5546884655</span> <span>{{item.code}}</span>
<span>测点1</span> <span>{{item.name}}</span>
<span>24°C</span> <span>{{item.value}}mm</span>
<span>{{item.zongliang}}mm</span>
</dd> </dd>
</dl> </dl>
</div> </div>
...@@ -852,31 +853,9 @@ ...@@ -852,31 +853,9 @@
<div class="a-md32 a-md35" id="amd35"> <div class="a-md32 a-md35" id="amd35">
<div class="abs-full"> <div class="abs-full">
<div class="m-tt"> <div class="m-tt">
<h4>温度监测</h4> <h4></h4>
</div> </div>
<div class="m-body"> <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> </div>
</div> </div>
...@@ -888,7 +867,6 @@ ...@@ -888,7 +867,6 @@
</div> </div>
</body> </body>
<!-- 引入echarts --> <!-- 引入echarts -->
<script src="js/echarts.min.js"></script> <script src="js/echarts.min.js"></script>
<script src="js/echarts-gl.js"></script> <script src="js/echarts-gl.js"></script>
...@@ -917,12 +895,16 @@ ...@@ -917,12 +895,16 @@
const LOCAL_API = location.protocol + '//' + (location.hostname === '192.168.3.226' ? '192.168.3.37' : '192.168.13.200') + ':8013'; 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(){ qf(function(){
var host = location.protocol + '//' + window.location.host; var host = location.protocol + '//' + window.location.host;
var token = Cookies.get('ELADMIN-TOEKN'); var token = Cookies.get('ELADMIN-TOEKN');
if (!token) {
window.open(selfHost + '/#/login', '_self')
return
}
axios = axios.create({ axios = axios.create({
baseURL: LOCAL_API, baseURL: LOCAL_API,
...@@ -971,8 +953,7 @@ ...@@ -971,8 +953,7 @@
data() { data() {
return { return {
dm1:{}, dm1:{},
dm3:{},
} }
}, },
watch: { watch: {
...@@ -997,15 +978,59 @@ ...@@ -997,15 +978,59 @@
var amd33 = self.$el.querySelector("#amd33"); var amd33 = self.$el.querySelector("#amd33");
var wrap33 = amd33.querySelector(".wrap"); var wrap33 = amd33.querySelector(".wrap");
console.log('mounted ________________ ', this);
// 年度降水总量
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 = { var option = {
chart: { chart: {
type: 'column', type: 'column',
backgroundColor:'transparent', backgroundColor:'transparent',
//marginTop:30, //marginTop:30,
//marginBottom:30, marginBottom:55,
//marginLeft:30, marginLeft:30,
}, },
title: { title: {
text: '' text: ''
...@@ -1013,17 +1038,20 @@ ...@@ -1013,17 +1038,20 @@
subtitle: { subtitle: {
text: '' text: ''
}, },
tooltip:{
enabled:false,
borderWidth:10,
},
xAxis: { xAxis: {
type: 'datetime', type: 'datetime' || 'category',
categories: [1,2,3,4,5], labels: {
//rotation:0, // 设置轴标签旋转角度
style:{
color:'#fff'
},
y:15,
},
categories: formatSeries.categories,
lineWidth:0, lineWidth:0,
//lineColor:'#ff0000', //lineColor:'#ff0000',
gridLineColor:'#aaa', gridLineColor:'#aaa',
tickLength:0, // 刻度线
dateTimeLabelFormats: { dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L', millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S', second: '%H:%M:%S',
...@@ -1040,10 +1068,15 @@ ...@@ -1040,10 +1068,15 @@
text: '' text: ''
}, },
labels:{ labels:{
style:{
color:'#fff'
},
x:-6, x:-6,
}, },
gridLineColor:'#aaa', gridLineColor:'#0F5680',
max:null, //minorGridLineWidth: 5,
//gridLineWidth: 5,
//max:opts.maxValDev ? maxVal + maxVal * opts.maxValDev : null,
}, },
plotOptions: { plotOptions: {
column: { column: {
...@@ -1055,27 +1088,8 @@ ...@@ -1055,27 +1088,8 @@
borderWidth: 0, 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: { legend: {
//enabled: series.length > 1 ? true : false, enabled: series.length > 1 ? true : false,
// 图例定位 // 图例定位
layout: 'horizontal', // 水平布局:“horizontal”, 垂直布局:“vertical” layout: 'horizontal', // 水平布局:“horizontal”, 垂直布局:“vertical”
floating: false, // 图列是否浮动 floating: false, // 图列是否浮动
...@@ -1094,29 +1108,37 @@ ...@@ -1094,29 +1108,37 @@
itemDistance:10, // 间距 20 itemDistance:10, // 间距 20
y:-10, y:-10,
itemMarginTop:2, itemMarginTop:2,
itemStyle:{}, itemStyle:{color:'#fff',},
itemHoverStyle:{}, itemHoverStyle:{color:'#fff',},
}, },
credits: { credits: {
enabled: false enabled: false
}, },
series: [{ tooltip: {
data: [ pointFormat: '{series.name}：{point.y} ' + 'mm',
{"name":"高区应急行业","y":16,"color":"#2CAFFE"}, dateTimeLabelFormats: {
{"name":"船舶工业行业","y":7,"color":"#90ED7D"}, 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); new Highcharts.chart(wrap33, option);
m.requst('get', '/data/mp/countStatistics', {}).then(function(res){
console.log('res ________________ ', res);
self.dm1 = res
}); });
})();
// 降水监测
(m.jiangshui = function(dateRange){
m.requst('get', '/data/rg/countStatistics', {}).then(function(res){
self.dm3 = res;
});
})();
return ; 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