297 sis-web/src/main/webapp/extend/lcalender/lcalender.css
View file
@@ -0,0 +1,297 @@
/**
* LCalendar绉诲姩绔棩鏈熸椂闂撮�夋嫨鎺т欢
*
* version:1.7.1
*
* author:榛勭
*
* git:https://github.com/xfhxbb/LCalendar
*
* Copyright 2016
*
* Licensed under MIT
*
* 鏈�杩戜慨鏀逛簬锛� 2016-6-12 17:22:20
*/
.gearDate {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 10px;
background-color:white;
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9900;
overflow: hidden;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}

.date_ctrl {
vertical-align: middle;
background-color: #d5d8df;
color: #000;
margin: 0;
height: auto;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
z-index: 9901;
overflow: hidden;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}

.slideInUp {
-webkit-animation: slideInUp .3s;
animation: slideInUp .3s;
}

@-webkit-keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
}

@keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
}

.ym_roll,
.date_roll,
.datetime_roll,
.time_roll {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
height: auto;
overflow: hidden;
background-color: transparent;
-webkit-mask: -webkit-gradient(linear, 0% 50%, 0% 100%, from(#debb47), to(rgba(36, 142, 36, 0)));
-webkit-mask: -webkit-linear-gradient(top, #debb47 50%, rgba(36, 142, 36, 0))
}

.ym_roll>div,
.date_roll>div,
.datetime_roll>div,
.time_roll>div {
font-size: 2.3em;
height: 10em;
float: left;
background-color: transparent;
position: relative;
overflow: hidden;
-webkit-box-flex: 4;
-webkit-flex: 4;
-ms-flex: 4;
flex: 4
}

.ym_roll>div .gear,
.date_roll>div .gear,
.datetime_roll>div .gear,
.time_roll>div .gear {
width: 100%;
float: left;
position: absolute;
z-index: 9902;
margin-top: -4em
}

.date_roll_mask {
-webkit-mask: -webkit-gradient(linear, 0% 40%, 0% 0%, from(#debb47), to(rgba(36, 142, 36, 0)));
-webkit-mask: -webkit-linear-gradient(bottom, #debb47 50%, rgba(36, 142, 36, 0));
padding: 0
}

.date_roll>div:nth-child(2) {
-webkit-box-flex: 2;
-webkit-flex: 2;
-ms-flex: 2;
flex: 2
}

.date_roll>div:nth-child(1),
.datetime_roll>div:nth-child(1) {
-webkit-box-flex: 4;
-webkit-flex: 4;
-ms-flex: 4;
flex: 4
}

.datetime_roll>div:first-child {
-webkit-box-flex: 6;
-webkit-flex: 6;
-ms-flex: 6;
flex: 6
}

.datetime_roll>div:last-child {
-webkit-box-flex: 6;
-webkit-flex: 6;
-ms-flex: 6;
flex: 6
}

.date_grid {
position: relative;
top: 4em;
width: 100%;
height: 2em;
margin: 0;
box-sizing: border-box;
z-index: 0;
border-top: 1px solid #abaeb5;
border-bottom: 1px solid #abaeb5
}

.date_grid>div {
color: #000;
position: absolute;
right: 0;
top: 0;
font-size: .8em;
line-height: 2.5em
}

.date_roll>div:nth-child(3) .date_grid>div {
left: 42%
}

.datetime_roll>div .date_grid>div {
right: 0
}

.datetime_roll>div:first-child .date_grid>div {
left: auto;
right: 0%
}

.datetime_roll>div:last-child .date_grid>div {
left: 50%
}

.time_roll>div:nth-child(1) .date_grid>div {
right: 1em
}

.ym_roll>div:nth-child(1) .date_grid>div {
right: .1em
}

.ym_roll>div .date_grid>div,
.time_roll>div .date_grid>div {
right: 5em
}

.date_btn {
color: #0575f2;
font-size: 1.6em;
line-height: 1em;
text-align: center;
padding: .8em 1em
}

.date_btn_box:before,
.date_btn_box:after {
content: '';
position: absolute;
height: 1px;
width: 100%;
display: block;
background-color: #96979b;
z-index: 15;
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33)
}

.date_btn_box {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
background-color: #f1f2f4;
position: relative
}

.date_btn_box:before {
left: 0;
top: 0;
-webkit-transform-origin: 50% 20%;
transform-origin: 50% 20%
}

.date_btn_box:after {
left: 0;
bottom: 0;
-webkit-transform-origin: 50% 70%;
transform-origin: 50% 70%
}

.date_roll>div:nth-child(1) .gear {
text-indent: 20%
}

.date_roll>div:nth-child(2) .gear {
text-indent: -20%
}

.date_roll>div:nth-child(3) .gear {
text-indent: -55%
}

.datetime_roll>div .gear {
width: 100%;
text-indent: -25%
}

.datetime_roll>div:first-child .gear {
text-indent: -10%
}

.datetime_roll>div:last-child .gear {
text-indent: -50%
}

.ym_roll>div .gear,
.time_roll>div .gear {
width: 100%;
text-indent: -70%
}

.ym_roll>div:nth-child(1) .gear,
.time_roll>div:nth-child(1) .gear {
width: 100%;
text-indent: 10%
}

.tooth {
height: 2em;
line-height: 2em;
text-align: center
}
1 sis-web/src/main/webapp/extend/lcalender/lcalender.min.js
View file
9 sis-web/src/main/webapp/js/mobile/main.js
View file
@@ -35,6 +35,15 @@ app.config(function($stateProvider, $urlRouterProvider) {
}
}
})
.state('tabs.envInd', { //环保指标
url: "/envInd",
views: {
'tabs': {
templateUrl: "templates/envInd",
controller: 'envIndTabCtrl'
}
}
})
.state('tabs.powerInd', { //电量指标
url: "/powerInd",
views: {
12 sis-web/src/main/webapp/js/mobile/templates/envInd.js
View file
@@ -0,0 +1,12 @@
app.controller('envIndTabCtrl', function($scope) {
var calendar = new LCalendar();
calendar.init({
'trigger': '#now', //标签id
'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
'minDate': '1900-1-1', //最小日期
'maxDate': new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() //最大日期
});
$scope.dateChage=function(){
console.log($("#now").val());
}
});
119 sis-web/src/main/webapp/js/mobile/templates/macLoad.js
View file
@@ -6,28 +6,19 @@ app.controller('MacLoadTabCtrl', function($scope) {
$scope.showViewIndex=itemIndex;
}
var hourloadChart = echarts.init(document.getElementById('hourloadChart'));
var dayloadChart = echarts.init(document.getElementById('dayloadChart'));
var monthloadChart = echarts.init(document.getElementById('monthloadChart'));
var option_hourloadChart = {
title:{
text:"今日机组负荷趋势图",
textStyle:{
fontSize:12
}

},
color: ['#5793f3', 'purple', '#675bba'],
tooltip: {
trigger: 'axis'
},
grid: {
right: '2%',
left: '10%',
left: '2%',
top:"12%",
containLabel: true
},

legend: {
top:"3%",
data:['#1机组','#2机组']
},
xAxis: [
{
type: 'category',
@@ -40,25 +31,111 @@ app.controller('MacLoadTabCtrl', function($scope) {
yAxis: [
{
type: 'value',
name: '负荷(mwh)',
position: 'left',
}
],
series: [

{
name:'#1机组',
smooth:true,
type:'line',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 30.7, 35.6, 35.2, 28.7, 18.8, 6.0, 2.3,2.6, 5.9, 9.0, 26.4, 28.7, 30.7, 35.6, 32.2, 28.7, 18.8, 6.0, 2.3]
},
data:[12.0, 12.2, 13.3, 14.5, 16.3, 17.2, 20.3, 23.4, 23.0, 16.5, 12.0, 8,12, 12.2, 13.3, 14.5, 16.3, 10.2, 12.3, 13.4, 13.0, 12.5, 11.8, 11.2],
markPoint: {
symbol:"pin",
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
],
},
showSymbol :false,
areaStyle: {normal: {color:"#5793f3"}},
}
]
};
var option_dayloadChart = {
color: ['#5793f3', 'purple', '#675bba'],
tooltip: {
trigger: 'axis'
},
grid: {
right: '2%',
left: '2%',
containLabel: true
},
xAxis: [
{
name:'#2机组',
smooth:true,
type: 'category',
axisTick: {
alignWithLabel: true
},
data: ['4-1','4-1','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']
}
],
yAxis: [
{
type: 'value',
position: 'left',
}
],
series: [
{
name:'#1机组',
type:'line',
data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
data:[570, 580, 600, 408, 654, 640, 688, 625, 648, 609, 610, 612, 613, 634, 630],
markPoint: {
symbol:"pin",
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
],
},
showSymbol :false,
areaStyle: {normal: {color:"#5793f3"}},
}
]
};
var option_monthloadChart = {
color: ['#5793f3', 'purple', '#675bba'],
tooltip: {
trigger: 'axis'
},
grid: {
right: '2%',
left: '2%',
containLabel: true
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
data: ['15-01','15-02','15-03','15-04','15-05','15-06','15-07','15-08','15-09','15-010','15-011','15-012','16-01','16-02','16-03']
}
],
yAxis: [
{
type: 'value',
position: 'left',
}
],
series: [
{
name:'#1机组',
type:'line',
data:[1570, 1580, 1600, 1408, 1654, 1640, 1688, 1625, 1648, 1609, 1610, 1512, 1513, 1534, 1530],
markPoint: {
symbol:"pin",
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
],
},
showSymbol :false,
areaStyle: {normal: {color:"#5793f3"}},
}
]
};
hourloadChart.setOption(option_hourloadChart);
dayloadChart.setOption(option_dayloadChart);
monthloadChart.setOption(option_monthloadChart);
});