const express = require('express');
const app = express();
app.use('/',express.static('./dist'));
process.on('uncaughtException', function (err) {
console.log('[uncaughtException] ' + err);
});
var server = app.listen(process.env.PORT || 1001, function () {
let port = server.address().port;
let addr = server.address().address;
console.log('server [APP] listening at ' + addr + ':' + port);
});
{
"name": "menu.nxnhl",
"version": "",
"description": "",
"main": "server.js",
"scripts": {
"global": "yarn add express",
"devGlobal": "yarn add -D gulp@next gulp-pug",
"webpack": "webpack --progress --watch",
"start": "node server"
},
"dependencies": {
"express": "^4.16.4"
},
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.2.3",
"babel-loader": "^8.0.4",
"gulp": "^4.0.0",
"gulp-babel": "^8.0.0",
"gulp-clean-css": "^4.0.0",
"gulp-less": "^4.0.1",
"gulp-pug": "^4.0.1",
"less-plugin-autoprefix": "^2.0.0",
"webpack": "^4.26.1",
"webpack-cli": "^3.1.2"
},
"debug": false
}
const path = require('path');
const webpack = require('webpack');
const pkg=require('./package.json');
const _config={
mode: 'development', development/production
entry:{
'index':'./view/pages/index'
,'app/index':'./view/pages/app/index'
,'view/view':'./view/pages/view/view'
,'alarm/alarm':'./view/pages/alarm/alarm'
,'data/data':'./view/pages/data/data'
,'equipment/equipment':'./view/pages/equipment/equipment'
,'login/login':'./view/pages/login/login'
},
output:{
path: path.resolve(__dirname, './dist/'),
filename: '[name].js'
},
module: {
rules: [
{ ES6
test: /\.m?js$/,
exclude: file => (
/(node_modules|bower_components)/.test(file) &&
!/\.vue\.js/.test(file)
),
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
plugins: [
]
};
module.exports = _config;
import muiTools from '../muiTools'
import {server,api} from '../../config/config'
function _req(data,uri,callback){
muiTools.ajax(server.uri+uri,{
data,
success(res){
muiTools.isStatus(res,(_data)=>{
return typeof callback==='function'?callback(_data):callback;
})
}
})
}
export default{
alarm(data,callback){
_req(data,api.alarm,callback)
},
alarmEdit(data,callback){
_req(data,api.alarmEdit,callback)
},
alarmCount(data,callback){
_req(data,api.alarmCount,callback)
}
}
import muiTools from '../muiTools'
import {server,api} from '../../config/config'
function _req(data,uri,callback){
muiTools.ajax(server.uri+uri,{
data,
success(res){
muiTools.isStatus(res,(_data)=>{
return typeof callback==='function'?callback(_data):callback;
})
}
})
}
export default{
farmList(data,callback){
_req(data,api.farmList,callback)
},
plotList(data,callback){
_req(data,api.plotList,callback)
},
lastData(data,callback){
_req(data,api.lastData,callback)
},
historyData(data,callback){
muiTools.ajax(server.uri+api.historyData,{
data,
success(res){
let _status=res.successful
if(res.hasOwnProperty('sessionStatus')){
mui.alert(',2s','')
mui.later(function(){
parent.location.href=mui.os.wechat ? route.menuLogin : route.login
},2000)
}else if(_status == Number(_status)){
if(_status == 1){
mui.hideLoading()
typeof callback==='function'?callback(res):''
}else{
mui.hideLoading()
mui.alert(res.msg || '')
}
}else{
mui.alert(json.msg,'status')
}
}
})
_req(data,api.historyData,callback)
},
equipmentList(data,callback){
_req(data,api.equipment_list,callback)
},
certralStatus(data,callback){
_req(data,api.certral_status,callback)
},
switchStatus(data,callback){
_req(data,api.control_point,callback)
},
sensorData(data,callback){
_req(data,api.sensorData,callback)
}
}
import muiTools from '../muiTools'
import {server,api} from '../../config/config'
function _req(data,uri,callback){
muiTools.ajax(server.uri+uri,{
data,
success(res){
muiTools.isStatus(res,(_data)=>{
return typeof callback==='function'?callback(_data):callback;
})
}
})
}
export default{
telecommand(data,callback){
_req(data,api.telecommand,callback)
},
telemetering(data,callback){
_req(data,api.telemetering,callback)
},
mainArea(data,callback){
_req(data,api.mainArea,callback)
},
meterArea(data,callback){
_req(data,api.meterArea,callback)
},
meterLine(data,callback){
_req(data,api.meterLine,callback)
},
mainClassify(data,callback){
_req(data,api.mainClassify,callback)
},
}
import muiTools from '../muiTools'
import {server,api} from '../../config/config'
function _req(data,uri,callback){
muiTools.ajax(server.uri+uri,{
data,
success(res){
muiTools.isStatus(res,(_data)=>{
return typeof callback==='function'?callback(_data):callback;
})
}
})
}
export default{
patrol(data,callback){
_req(data,api.patrol,callback)
},
patrolByWeek(data,callback){
_req(data,api.patrolByWeek,callback)
},
patrolEdit(data,callback){
_req(data,api.patrolEdit,callback)
},
patrolCount(data,callback){
_req(data,api.patrolCount,callback)
}
}
import muiTools from '../muiTools'
import {server,api} from '../../config/config'
function _req(data,uri,callback){
muiTools.ajax(server.uri+uri,{
data,
success(res){
muiTools.isStatus(res,(_data)=>{
return typeof callback==='function'?callback(_data):callback;
})
}
})
}
export default{
plineAndPlant(data,callback){
_req(data,api.pline_plant,callback)
}
,pline(data,callback){
_req(data,api.plineList,callback)
}
,plineLastData(data,callback){
_req(data,api.plineLastData,callback)
}
,sensorData(data,callback){
muiTools.ajax(server.uri+api.sensorData,{
data,
success(res){
let _status=res.successful
if(res.hasOwnProperty('sessionStatus')){
mui.alert(',2s','')
mui.later(function(){
parent.location.href=mui.os.wechat ? route.menuLogin : route.login
},2000)
}else if(_status == Number(_status)){
if(_status == 1){
mui.hideLoading()
typeof callback==='function'?callback(res):''
}else{
mui.hideLoading()
mui.alert(res.msg || '')
}
}else{
mui.alert(json.msg,'status')
}
}
})
}
}
@charset "utf-8";
@import '../config/config.less';
html,body{
font-family: " CN","Microsoft YaHei","SimHei";
font-size: @base-size;
}
vue {{}}
[v-cloak] {
display: none;
}
.red{
color: @red !important;
}
.green{
color: @green !important;
}
.yellow{
color: @yellow !important;
}
.blue{
color: @blue !important;
}
.hidden-vis{
visibility:hidden;
}
mui-loading
.mui-show-loading {
position: fixed;
padding: 5px;
width: 120px;
min-height: 120px;
top: 30%;
left: 50%;
margin-left: -60px;
background: rgba(0, 0, 0, 0.6);
text-align: center;
border-radius: 5px;
color: #FFFFFF;
visibility: hidden;
margin: 0;
z-index: 2000;
-webkit-transition-duration: .2s;
transition-duration: .2s;
opacity: 0;
-webkit-transform: scale(0.9) translate(-50%, -50%);
transform: scale(0.9) translate(-50%, -50%);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.mui-show-loading.loading-visible {
opacity: 1;
visibility: visible;
-webkit-transform: scale(1) translate(-50%, -50%);
transform: scale(1) translate(-50%, -50%);
}
.mui-show-loading .mui-spinner{
margin-top: 24px;
width: 36px;
height: 36px;
}
.mui-show-loading .text {
line-height: 1.6;
font-family: -apple-system-font,"Helvetica Neue",sans-serif;
font-size: 14px;
margin: 10px 0 0;
color: #fff;
}
.mui-show-loading-mask {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.mui-show-loading-mask-hidden{
display: none !important;
}
layui-tab
.layui-tab.layui-tab-brief{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 11;
background-color: white;
}
include ../config/config.pug
<!DOCTYPE html>
html(lang="zh-cmn-Hans")
head
meta(charset="UTF-8")
meta(http-equiv="Content-Type", content="text/html;charset=UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no")
meta(http-equiv="X-UA-Compatible", content="ie=edge")
meta(name="keywords", content=KEYWORDS)
meta(name="description", content=DESCRIPTION)
meta(name='renderer' content='webkit')
link(rel="shortcut icon", href=ICON, type="image/x-icon")
- link(rel="stylesheet", href=WEUI_CSS)
block CSS
link(rel="stylesheet", href=MUI_CSS)
link(rel="stylesheet", href=LAYUI_CSS)
- link(rel="stylesheet", href=LAYUI_ADMIN_CSS)
link(rel="stylesheet", href=ICONFONT)
body
block CONTENT
block JS
- script(src=VUE)
- script(src=VUE_TAP)
script(src=MUI_JS)
script(src=LAYUI_JS)
import {route} from '../config/config'
mui.showLoading = function(message,type) {
if (mui.os.plus && type !== 'div') {
mui.plusReady(function() {
plus.nativeUI.showWaiting(message)
})
} else {
var html = ''
html += '<i class="mui-spinner mui-spinner-white"></i>'
html += '<p class="text">' + (message || "") + '</p>'
var mask=document.getElementsByClassName("mui-show-loading-mask")
if(mask.length==0){
mask = document.createElement('div')
mask.classList.add("mui-show-loading-mask")
document.body.appendChild(mask)
mask.addEventListener("touchmove", function(e){e.stopPropagation();e.preventDefault()})
}else{
mask[0].classList.remove("mui-show-loading-mask-hidden")
}
var toast=document.getElementsByClassName("mui-show-loading")
if(toast.length==0){
toast = document.createElement('div')
toast.classList.add("mui-show-loading")
toast.classList.add('loading-visible')
document.body.appendChild(toast)
toast.innerHTML = html
toast.addEventListener("touchmove", function(e){e.stopPropagation();e.preventDefault()})
}else{
toast[0].innerHTML = html
toast[0].classList.add("loading-visible")
}
}
}
mui.hideLoading = function(callback) {
if (mui.os.plus) {
mui.plusReady(function() {
plus.nativeUI.closeWaiting()
})
}
var mask=document.getElementsByClassName("mui-show-loading-mask")
var toast=document.getElementsByClassName("mui-show-loading")
if(mask.length>0){
mask[0].classList.add("mui-show-loading-mask-hidden")
}
if(toast.length>0){
toast[0].classList.remove("loading-visible")
callback && callback()
}
}
export default{
ajax(url,opt){
var _opt={
loadText:'..',
dataType:'json',json
type:'post',HTTP
；
data:{},
xhrFields: {
withCredentials: true
},
crossDomain: true,
headers:{'Content-Type':'application/json'},
error:function(xhr,type,errorThrown){
mui.alert('')
},
success:function(data){
console.log('>>>>debug>>>>')
console.log(data)
}
}
opt=opt?opt:{}
mui.extend(true,_opt,opt)
mui.showLoading(_opt.loadText,'div')
mui.later(function(){
mui.hideLoading()
},2000)
mui.ajax(url,_opt)
}
ajax
,isStatus(json,callback,opt){ajax
var _status=json.successful
opt=opt?opt:{}
var _opt={
noToast:false,
msg:json.msg
}
mui.extend(true,_opt,opt)
if(json.hasOwnProperty('sessionStatus')){
mui.alert(',2s','')
mui.later(function(){
parent.location.href=mui.os.wechat ? route.menuLogin : route.login
},2000)
}else if(_status == Number(_status)){
if(_status == 1){
mui.hideLoading()
_opt.noToast?'':mui.toast(_opt.okText || _opt.msg || '')
typeof callback==='function'?callback(json.data):''
}else{
mui.hideLoading()
_opt.noToast?'':mui.alert(_opt.otherText || _opt.msg || '')
}
}else{
var _title=''
if(json.hasOwnProperty('permissionStatus')){
_title=''
}else{
_title='status'
}
mui.alert(json.msg,_title)
}
}
}
const _t={
getData(key){
return JSON.parse(localStorage.getItem(key))
},
()
getDayStamp(num){
var today=new Date().valueOf()
var onedayStamp=86400000
return today+num*onedayStamp
}
}
export default{
getData(key){
let _now=_t.getDayStamp(0)
,_json=_t.getData(key)
,_time=_json?_json.time:false
if(_time || _time===0){time
if(_now<_time){,,
return JSON.parse(_json.data)
}else{
return false
}
}else{
return _json
}
}
,setData(str,valObj){
let _strArr=String(str).split('.')
const _oldData=_t.getData(_strArr[0])
let _newData=_oldData?_oldData:{}
if(_strArr.length>1){
let _key=_strArr.slice(1).join('.')
const _keyObj=JSON.parse('{"'+_key.replace(/\./g,'":{"')+'":'+JSON.stringify(valObj)+'}'.repeat(_strArr.length-1))
Object.assign(_newData,_keyObj)
}else{
Object.assign(_newData,valObj)
}
localStorage.setItem(_strArr[0],JSON.stringify(_newData))
return _newData
}
,echarts($obj,option){
var echplat = [], plat = [option]
var renderplat = function(index){
var _mychart=echarts.getInstanceByDom($obj[0])
if(_mychart){
$obj[0].innerHTML=''
_mychart.dispose()
renderplat(0)
}else{
echplat[index] = echarts.init($obj[index])
echplat[index].setOption(plat[index],false)
}
window.onresize = echplat[index].resize
}
if(!$obj[0]) return
renderplat(0)
}
,renderEcharts($obj,option){
var echplat = [], plat = [option]
var renderplat = function(index){
echplat[index] = echarts.init($obj[index])
echplat[index].setOption(plat[index],false)
window.onresize = echplat[index].resize
}
if(!$obj[0]) return
renderplat(0)
}
,renderTable($obj,opt){
var axisData = opt.xAxis.data
var series = opt.series
<p class="table-title">'+opt.title.text+'</p>
var table = '<table id="chartTable" style="width:100%text-align:center"><tbody><tr>'
+ '<th></th>'
+ '<th>' + series.name + '</th>'
+ '</tr>'
for (var i = 0, l = axisData.length ;i < l; i++) {
table += '<tr>'
+ '<td>' + axisData[i] + '</td>'
+ '<td>' + series.data[i] + series.unit + '</td>'
+ '</tr>'
}
table += '</tbody></table></div>'
$obj[0].innerHTML=table
}
,stampToDatetime(stamp){
var $date=new Date(stamp)
,temp=''
var year=$date.getFullYear()
,month=$date.getMonth()+1
,day=$date.getDate()
,hour=$date.getHours()
,minute=$date.getMinutes()
,second=$date.getSeconds()
temp=''+year+'-'+(month<10?'0'+month:month)+'-'+(day<10?'0'+day:day)+' '+(hour<10?'0'+hour:hour)+':'+(minute<10?'0'+minute:minute)+':'+(second<10?'0'+second:second)
return temp
}
()
,getDayStamp:_t.getDayStamp
,getParams() {
？
var ArrParam = params?params.split('&'):''
var paramsArr = {}
if(ArrParam == '') {
return {}
} else {
$.each(ArrParam, function(i) {
var param = this.split('=')
paramsArr[param[0]] = param[1]
})
ArrParam.forEach(element => {
var param = element.split('=')
paramsArr[param[0]] = param[1]
})
return paramsArr
}
}
echarts
,getEchartsDefOpt() {
return {
title: {
text: "",
x: "center",
align: "right"
},
tooltip: {
trigger: "axis",
axisPointer: {
animation: false
}
},
xAxis: {
type: "time",
splitLine: {
show: false
}
},
grid: {
y: 40,
x2: 20,
y2: 30,
x: 40
},
yAxis: {
show: true,
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},
series: [{
data: [],
type: "line",
showSymbol: false,
lineStyle:{
normal:{
color:'#7bbae8'
}
},
hoverAnimation: false,
smooth: false
}]
}
},
inTimeRange(time,startTime,endTime){
let _startTimeStamp=new Date(startTime).valueOf()
,_endTimeStamp=new Date(endTime).valueOf()
,_time=time
if(time==0){
_time=new Date().valueOf()
}
if(_time<_startTimeStamp){
return -1
}else if(_time>_endTimeStamp){
return 1
}else{
return 0
}
},
getMenuUri(uri,appid,opt){
let _encodeuri=encodeURIComponent(uri)
,_opt={
appid:appid CorpID
,response_type:'code'
,scope:'snsapi_base'
，<128
,wechat_redirect:'#wechat_redirect'
}
Object.assign(_opt,opt?opt:{})
return `https:open.weixin.qq.com/connect/oauth2/authorize?appid=${_opt.appid}&redirect_uri=${_encodeuri}&response_type=${_opt.response_type}&scope=${_opt.scope}&state=${_opt.state}${_opt.wechat_redirect}`
}
}
const _frame={
init(){
mui.init();
mui(".mui-scroll-wrapper").scroll({
deceleration: 0.0005 });
mui('.nav-left').on('tap','.item',function(){
var _hash=mui(this)[0].dataset.hash
location.href='#'+_hash
})
}
}
module.exports={
frame:_frame
}
@import "../../common/base.less";
@navLeft_width: 55px;
.frame {
display: flex;
flex-direction: column;
& > .mui-content {
padding-bottom: 6px;
display: flex;
align-items: stretch;
flex: 1;
height: 100vh;
}
}
header.mui-bar {
height: 36px;
& > .mui-title {
font-size: 15px;
line-height: 36px;
}
}
.nav-left {
margin: 5px;
box-sizing: border-box;
display: flex;
flex-direction: column;
font-size: 13px;
text-align: center;
box-shadow: 0 1px 6px #ccc;
width: @navLeft_width;
flex: 0 0 @navLeft_width;
& > .item {
padding: 7px 0;
display: flex;
flex-direction: column;
flex:1;
min-height: 70px;
border-bottom: 1px solid #ddd;
margin: 0 @navLeft_width / 5;
}
& .active {
background-color: white;
box-shadow: -4px 1px 4px 1px #ddd;
position: relative;
left: 2px;
margin: 0;
z-index: 2;
border: none;
& * {
color: @blue;
}
}
}
.nav-left i {
display: flex;
align-items: center;
justify-content: center;
color: #666;
font-size: 25px;
overflow: hidden;
flex: 1;
text-align: center;
}
.nav-line {
margin: 5px auto 0;
width: 35px;
text-align: center;
border-top: 1px solid #eee;
}
.content-right {
background-color: white;
box-shadow: 1px 0px 4px 2px #ddd;
flex: 1;
position: relative;
& * {
touch-action: none;
}
}
extends ../../common/base.pug
block append CSS
title= TITLE
block CONTENT
- navleftNAVLEFT
- var navLeft = NAVLEFT?NAVLEFT:[{name:'',icon:'icon-gailan',uri:PATCH_before+'home/home.html'}]
- TITLE,block HEADER
- var frame_title = TITLE?TITLE:'TITLE'
.frame
-
block HEADER
header.mui-bar.mui-bar-nav
h1.mui-title= frame_title
.mui-content
-
.nav-left#nav-user
each item,index in navLeft
.item(class=index==0?'active':'',data-hash=item.hash,data-id=item.id,data-uri=item.uri)
i.iconfont(class=item.icon)
span= item.name
-
.content-right
.mui-scroll-wrapper
.mui-scroll
- ,extend
block FRAME
block append JS
extends ../../common/base.pug
block append CSS
title= TITLE
block CONTENT
.mui-content
.logo
block LOGIN
form#login-form.mui-input-group
.mui-input-row
label
input#username.mui-input-clear.mui-input(type="text" placeholder="")
.mui-input-row
label
input#password.mui-input-clear.mui-input(type="password" placeholder="")
form.mui-input-group
ul.mui-table-view.mui-table-view-chevron
li.mui-table-view-cell
#remember.mui-switch
.mui-switch-handle
.mui-content-padded
button#login.mui-btn.mui-btn-block.mui-btn-primary(type="button")
.mui-content-padded.oauth-area
p.mui-text-center
label#menuAuth
i.iconfont.icon-weixin
span
block append JS
@import '../../common/base.less';
.mui-input-group {
margin-top: 10px;
}
.mui-input-group:first-child {
margin-top: 20px;
}
.mui-input-group label {
width: 25%;
}
.mui-input-row label~input,
.mui-input-row label~select,
.mui-input-row label~textarea {
width: 75%;
}
.mui-checkbox input[type=checkbox],
.mui-radio input[type=radio] {
top: 6px;
}
.mui-content-padded {
margin-top: 25px;
}
.mui-btn {
padding: 10px;
}
.logo{
text-align: center;
padding: 8vh 0 3vh;
&>p{
font-size: 20px;
padding-top: 2vh;
}
}
.icon-weixin{
color:#05ca04;
font-size: 16px;
}
const _s={
uri:'http:test.senontech.com/nxnhl/'
uri:'http:localhost:8084/nxnhl/'
uri:'http:192.168.0.15:8080/nxnhl/'
,cache:true
,cacheTime:600000 10
}
const _api={
,historyData: 'data/read/paintDataBySensor'
,pline_plant:'productionLine/queryProductionLineTypeListWithWorkShop'
,plineList:'productionLine/queryProductionLineList'
,plineLastData:'dataCollect/queryLastDataByProductionLine'
,sensorData:'dataCollect/queryHistoryData'
,patrol:'patrol/queryList'
,patrolByWeek:'patrol/queryListByWeekList'
,patrolEdit:'patrol/edit'
,patrolCount:'patrol/queryListWithCount'
,alarm:'informInfo/queryListWithWorkShop'
,alarmEdit:'informInfo/edit'
,alarmCount:'informInfo/queryListWithCount'
}
const _static={
patrolState:{
'false':''
,'true':''
,'wait':''
,'complete':''
,'beyond':''
}
,alarmState:{
'prewarning':'',
'alarm':''
}
}
weixin
_menu={
appid:'ww3b6d4978149c4609' CorpID
appid:'ww57b0d5bffdbb625e'
,redirect_uri:'http:zlmifan.xicp.io/login/login.html'
,redirect_uri:'http:192.168.0.15:8080/nxnhlmenu/login/login.html'
,response_type:'code'
,scope:'snsapi_base'
,state:''
}
_route={
index:'../app/index.html'
,menuLogin:'http:zlmifan.xicp.io'
,menuLogin:'http:192.168.0.15:8080/nxnhlmenu/index.html'
,login:'../login/login.html'
,delogin:'./login/login.html'index.html
}
module.exports={
server:_s
,api:_api
,static:_static
,menu:_menu
,route:_route
}
- gulpfile->pug.js data
- VERSION :
- DEBUG : .min
- config
- var KEYWORDS=''
- var DESCRIPTION = ''
- var ICON = '' icon(logo)
- var TITLE = ''
-
- var PATCH_before='../' dist
- var PATCH_lib=PATCH_before+'lib/' -
- var PATCH_min =DEBUG?'':'.min'
- var PATCH_logo = PATCH_before+'images/logo.png' logo
- CDN
- iconfont
- var ICONFONT = PATCH_before+'fonts/iconfont.css'
- fetch,fetch,promise_polyfill
- var FETCH=PATCH_lib+'fetch/fetch.umd'+PATCH_min+'.js'
- promise_polyfill
- var PROMISE=PATCH_lib+'polyfill'+PATCH_min+'.js'
- MUI
- var MUI_CSS=PATCH_lib+'mui/css/mui'+PATCH_min+'.css'
- var MUI_JS=PATCH_lib+'mui/js/mui'+PATCH_min+'.js'
- vue
- var VUE = PATCH_lib+ 'vue/vue'+PATCH_min+'.js'
- var VUE_TAP = PATCH_lib+ 'vue/vue-tap'+PATCH_min+'.js'
- layui
- var LAYUI_CSS = PATCH_lib+ 'layui/css/layui.css'
- var LAYUI_JS = PATCH_lib+ 'layui/layui.js'
- var LAYUI_ADMIN_CSS = PATCH_lib+ 'layui/css/admin/admin.css'
- echarts
- var ECHARTS = PATCH_lib+ 'echarts/echarts.common'+PATCH_min+'.js'
- var ECHARTS_ALL = PATCH_lib+ 'echarts/echarts'+PATCH_min+'.js'
- weixinjs
- var WEIXIN = PATCH_lib+ 'menu/jweixin-1.4.0.js'
- frame(index.html)
-
var NAVLEFT =[
{name:'',icon:'icon-gailan',uri:PATCH_before+'view/view.html',hash:'view',id:'viewTab'},
{name:'',icon:'icon-data',uri:PATCH_before+'data/data.html',hash:'data',id:'dataTab'},
{name:'',icon:'icon-alarm',uri:PATCH_before+'alarm/alarm.html',hash:'alarm',id:'alarmTab'},
{name:'',icon:'icon-equipment',uri:PATCH_before+'equipment/equipment.html',hash:'equipment',id:'equipmentTab'}
]
- LOGIN
-
var LOGIN={
title:''
,href:PATCH_before+'login/login.html'
}
- VIEW
-
var VIEW={
href:PATCH_before+'view/view.html'
}
import tools from '../../common/tools'
import alarmAPI from '../../common/api/alarm'
import {static as STATIC} from '../../config/config'
layui.use(['element','form','table','layer','laydate'], function(){
var element = layui.element
,form=layui.form
,$=layui.jquery
,table = layui.table
,layer=layui.layer
,laydate=layui.laydate
,_params=tools.getParams()
,_tabId=_params.tabId
var _alarm={
tabId:'prewarning',
loadAlarm(type){
alarmAPI.alarm({
startDatetime:tools.stampToDatetime(tools.getDayStamp(-1))
,type
,state:'false'
,page:1
,pageSize:100
},data=>{
$('#alarm').html('')
if(data.length<1){
$('#alarm').html('<p class="nodata"></p>')
}else{
let _trClass=''
if(_alarm.tabId==='prewarning'){
_trClass='yellow'
}else{
_trClass='red'
}
$('#alarm').html('')
if(data.length<1){
$('#alarm').html('<p class="nodata"></p>')
}else{
$('#alarm').append(`<div class="layui-colla-item">
<div class="layui-colla-title" data-title="">
<span></span>
<label class="colla-info ${_trClass}" id="alarmInfo"></label></div>
<div id="alarmList" class="layui-colla-content"></div></div>`)
$.each(data,(index,item)=>{
let _alarmInfo=this.renderTable('alarmList',data)
$('#alarmInfo').html(`
${_alarmInfo.alarm}<i class="iconfont icon-alarm"></i>
`)
})
element.render('collapse')
}
$.each(data,(index,item)=>{
let _trClass=''
if(_alarm.tabId==='prewarning'){
_trClass='yellow'
}else{
_trClass='red'
}
$('#alarm').append(`<div class="layui-colla-item">
<div class="layui-colla-title" data-title="${item.name}">
<span>${item.name}</span>
<label class="colla-info ${_trClass}" id="alarmInfo${index}"></label></div>
<div id="alarm${index}" class="layui-colla-content ${_alarm.tabId=='history'?'':'layui-show'}"></div></div>`)
let _alarmInfo=this.renderTable('alarm'+index,item.informInfoList)
let $info=$('#alarmInfo'+index)
if(_alarmInfo.alarm){
$info.html(_alarmInfo.alarm+'')
}else{
$info.removeClass('yellow red')
$info.addClass('green')
$info.html('')
}
})
element.render('collapse')
}
})
},
history(){
let _type=$('#toolType').val()
,_state=$('#toolState').val()
,_Date=$('#toolDate').val()
,_opt={
startDatetime:tools.stampToDatetime(tools.getDayStamp(_Date))
,page:1
,pageSize:1000
}
_type=='' || _type==null?'':_opt.type=_type
_state=='' || _state==null?'':_opt.state=_state
alarmAPI.alarm(_opt,data=>{
$('#alarm').html('')
if(data.length<1){
$('#alarm').html('<p class="nodata"></p>')
}else{
$('#alarm').append(`<div class="layui-colla-item">
<div class="layui-colla-title" data-title="">
<span></span>
<label class="colla-info history" id="alarmInfo"></label></div>
<div id="alarmList" class="layui-colla-content"></div></div>`)
$.each(data,(index,item)=>{
let _alarmInfo=this.renderTable('alarmList',data)
$('#alarmInfo').html(`
${_alarmInfo.alarm}<i class="iconfont icon-alarm"></i>
${_alarmInfo.ok}<i class="iconfont icon-gaojingyichuli"></i>
`)
})
element.render('collapse')
}
})
},
renderTable(id,data){
let _re={
ok:0
,alarm:0
}
$('#'+id).html(`<table class="layui-table" lay-skin="nob">
<tbody></tbody></table>`)
$.each(data,(index,item)=>{
let _i=index+1
,_trClass=''
,_icon=''
if(item.type==='prewarning'){
_trClass='yellow'
}else{
_trClass='red'
}
if(item.state==='true' || item.state===true){
_re.ok++
_trClass='green'
_icon='icon-ok'
}else{
_re.alarm++
}
$('#'+id+' tbody').append(`<tr class="${_trClass}"
data-time="${item.informTime}"
data-remark="${item.remark?item.remark:''}"
data-type="${item.type}"
data-state="${item.state}"
data-id="${item.informInfoId}">
<td>${_i}</td>
<td>${item.content}
<i class="iconfont ${_icon}"></i></td></tr>`)
})
return _re;
}
}
or URLtabId
if(_tabId && _tabId!=''){
element.tabChange('alarmTab', _tabId);
_alarm.tabId=_tabId
if(_tabId=='history'){
$('.tools').removeClass('mui-hidden')
$('#alarm').removeClass('padtop')
let _type=_params.toolType
,_state=_params.toolState
$('#toolType').val(_type)
$('#toolState').val(_state)
form.render('select')
_alarm.history()
}else{
$('.tools').addClass('mui-hidden')
$('#alarm').addClass('padtop')
_alarm.loadAlarm(_tabId)
}
}else{
_alarm.loadAlarm(_alarm.tabId)
}
，hash
element.on('tab(alarmTab)', function(){
let _type=this.getAttribute('lay-id')
_alarm.tabId=_type
if(_type=='history'){
$('.tools').removeClass('mui-hidden')
$('#alarm').removeClass('padtop')
_alarm.history()
}else{
$('.tools').addClass('mui-hidden')
$('#alarm').addClass('padtop')
_alarm.loadAlarm(_type)
}
});
mui('#alarm').on('tap','tr',function(){
let _time=$(this).data('time')
,informInfoId=$(this).data('id')id
,_type=$(this).data('type')
,_typeName=STATIC.alarmState[_type]
,_remark=$(this).data('remark')
,_state=$(this).data('state')
,_content=$(this).children('td+td').html()
,_plineName=$(this).parents('.layui-colla-item').children('.layui-colla-title').data('title')
,_remarkHtml=''
if(_remark && _remark!=''){
_remarkHtml='value="'+_remark+'"'
}else{
_remarkHtml='placeholder="'+_typeName+'"'
}
if(_alarm.tabId=='history'){
layer.open({
title:''
,content:`<p><i class="layui-icon layui-icon-location"></i><span>${_plineName}</span></p>
<p><i class="iconfont icon-gaojingshijian"></i><span>${_time}</span></p>
<p class='layerContent'>${_content}</p>
<p><i class="iconfont icon-yichuli"></i><span>${_state?_remark:''}</span></p>
`
,skin:'alarmLayer'
})
}else{
layer.open({
title:_typeName+''
,content:`<p><i class="layui-icon layui-icon-location"></i><span>${_plineName}</span></p>
<p><i class="iconfont icon-gaojingshijian"></i><span>${_time}</span></p>
<p class='layerContent'>${_content}</p>
<input class="layui-input" id="remark${informInfoId}" ${_remarkHtml}></input>
`
,btn:[_state?'':'']
,skin:'alarmLayer'
,yes:(index,layero)=>{
let remark=$('#remark'+informInfoId).val()
alarmAPI.alarmEdit({
informInfoId
,state:'true'
,remark
},data=>{
layer.close(index);
mui.toast('')
_alarm.loadAlarm(_alarm.tabId)
})
}
})
}
})
select
form.on('select(toolDate)', function(data){
_alarm.history()
});
form.on('select(toolType)', function(data){
_alarm.history()
});
form.on('select(toolState)', function(data){
_alarm.history()
});
});
@import '../../common/base.less';
body{
background-color:white;
}
@padding:15px;
tab
.layui-tab-title li {
padding: 0 10px;
}
.layui-tab{
margin: 0;
padding: @padding/2 @padding 0;
}
.switch{
padding: @padding*4 @padding 0;
color: #666;
width: 80%;
margin-left: 20%;
& input{
margin-bottom: 0;
}
& .layui-form-label{
width: 110px;
}
}
.layui-collapse{
&.padtop{
margin-top: @padding*4;
}
margin: @padding @padding @padding;
& .layui-colla-content{
padding: 0;
}
& .colla-info{
float: right;
font-size: 13px;
}
& .colla-info.history{
font-size: 16px;
color: #666;
& i{
font-size: 18px;
}
}
}
table.layui-table{
margin: 0;
& tr+tr>td{
border-top: 1px solid #e6e6e6 !important;
}
& td i{
font-size: 20px;
float: right;
}
}
layer
.layui-layer.layui-layer-dialog.alarmLayer{
margin-right:4vw;
& .layui-layer-content{
padding: @padding @padding @padding/3;
& p {
padding-bottom:@padding/5;
font-size: 15px;
color: #666;
}
& i{
display: inline-block;
font-size: 20px;
width: 24px;
}
& .layerContent{
position: relative;
padding-bottom: @padding/2;
text-indent: 24px;
&>i{
position: absolute;
width: 24px;
height: 24px;
left: 0;
top: 0;
&::before{
margin-left: -24px;
}
}
}
& textarea{
padding: @padding/5 @padding/3;
}
}
}
.tools{
margin: @padding*4 @padding/2 0;
& .layui-inline{
width: 33.3%;
box-sizing: border-box;
padding: 0 @padding/4;
& select,& input{
margin-bottom: 0;
padding: @padding/2;
}
}
}
.nodata{
position: absolute;
left: 0;
right: 0;
margin-top: -2px;
background-color: white;
text-align: center;
height: 80px;
line-height: 80px;
}
extends ../../common/base.pug
block append CSS
link(href="./alarm.css?v="+VERSION, rel="stylesheet")
block CONTENT
.layui-tab.layui-tab-brief(lay-filter='alarmTab')
ul.layui-tab-title
li.layui-this(lay-id='prewarning')
li(lay-id='alarm')
li(lay-id='history')
-
.tools.layui-form.mui-hidden
.layui-inline
select#toolDate(name="toolDate" lay-filter="toolDate")
option(value='-1') 24
option(value='-7') 7
option(value='-15')
option(value='-30') 1
.layui-inline
select#toolType(name="toolType" lay-filter="toolType")
option(value='')
option(value='prewarning')
option(value='alarm')
.layui-inline
select#toolState(name="toolState" lay-filter="toolState")
option(value='')
option(value='true')
option(value='false')
.layui-inline.mui-hidden
select.layui-input#plantSelect(name='plant')
.layui-collapse.padtop#alarm
block append JS
script(src="./alarm.js?v="+VERSION)
import { frame } from '../../components/frame/frame'
import tools from '../../common/tools'
import plineAPI from '../../common/api/pline'
import userAPI from '../../common/api/user'
import { server, route } from '../../config/config'
layui.use(['element'], function () {
var element = layui.element
, $ = layui.$
var _user = tools.getData('user')
, _isWechat = mui.os.wechat
, _logoutUri = (_isWechat) ? route.menuLogin : route.login
if (_user && _user.username) {
if (_isWechat) {
$('#loginPop ul').append(`<li id="menuunbind" class="mui-table-view-cell">
<a href="javascript:;"></a></li>`)
mui('#loginPop').on('tap', '#menuunbind', function () {
mui.confirm('', '', ['', ''], function (e) {
if (e.index == 1) {
userAPI.menuUnbind({
}, data => {
mui.toast('')
mui('#loginPop').popover('hide');
$('#menuunbind').addClass('mui-hidden')
$('#menubind').removeClass('mui-hidden')
})
}
})
})
$('#loginPop ul').append(`<li id="menubind" class="mui-table-view-cell">
<a href="javascript:;"></a></li>`)
mui('#loginPop').on('tap', '#menubind', function () {
mui.confirm('ID', '', ['', ''], function (e) {
mui.prompt('','','',['',''],function(e){
if (e.index == 1) {
userAPI.menuBind({
, password: e.value
}, data => {
mui.toast('')
mui('#loginPop').popover('hide');
$('#menubind').addClass('mui-hidden')
$('#menuunbind').removeClass('mui-hidden')
})
}
})
document.querySelector('.mui-popup-input input').type='password'
})
if (_user.wechatId && _user.wechatId !== '') {
$('#menubind').addClass('mui-hidden')
$('#menuunbind').removeClass('mui-hidden')
} else {
$('#menuunbind').addClass('mui-hidden')
$('#menubind').removeClass('mui-hidden')
}
}
frame.init();
window.history.pushState(null, null, "#view");
window.addEventListener("popstate", function (e) {
let _uriArr=location.hash.split('?')
,_hash = _uriArr[0].substr(1)
,_paramsURI=_uriArr.length==2?'&'+_uriArr[1]:''
, _params = tools.getParams()
,_uri=''
if(_hash.substr(0,5)==='plant'){
_uri = '../plant/plant.html'
}else{
_uri = '../' + _hash + '/' + _hash + '.html'
}
mui(".nav-left .item").each(function () {
this.classList.remove("active")
if (this.dataset.hash == _hash) {iframe
this.classList.add('active')
var iframe = document.createElement('iframe')
iframe.src = _uri + '?id=' + this.dataset.id+_paramsURI
iframe.classList.add('iframe')
var _iframeDOM = mui('.iframe')[0]
var _iframeDOM_parent = mui('.iframe')[0].parentNode
_iframeDOM_parent.removeChild(_iframeDOM)
_iframeDOM_parent.appendChild(iframe);
}
});
}, false);
iframe
mui('.header').on('tap', '#refresh', () => {
window.history.pushState(null, null, location.hash);
history.back(-1)
})
mui('#loginPop').on('tap', '#outlog', () => {
userAPI.userlogout(data => {
})
location.href = _logoutUri
})
} else {
mui.alert(',2s')
setTimeout(() => {
location.href = _logoutUri
}, 3000)
}
})
@import '../../components/frame/frame.less';
@header-bg:white;
@header-height:8vh;
.header{
background-color: @header-bg;
height: @header-height;
margin-bottom: 1vh;
position: fixed;
top: 0;
left: 0;
right: 0;
& i{
font-weight: bold;
}
& ul{
display: flex;
justify-content: flex-end;
align-items: center;
height: 100%;
&>li{
height: inherit;
display: flex;
align-items: center;
padding: 0 20px;
}
}
}
.frame > .mui-content {
padding-top: 9vh;
}
.alarm{
color: #FF5722;
&::after{
content: '6';
width: 15px;
height: 15px;
padding: 0;
border-radius: 50%;
line-height: 16px;
font-size: 12px;
position: absolute;
text-align: center;
top: 6px;
right: 6px;
background-color: red;
color: white;
}
}
.iframe{
width: 100%;
height: 90vh;
height: fill-available;
overflow: scroll;
border: none;
}
pop
.mui-popover{
width: 95px
}
extends ../../components/frame/frame.pug
block append CSS
link(href="./index.css?v="+VERSION, rel="stylesheet")
block HEADER
.header
ul
li
a#refresh(href='javascript:;' title='refresh')
i.mui-icon.mui-icon-reload
li
a(href='#loginPop' title='user')
i.mui-icon.mui-icon-person
span#username
.mui-popover#loginPop
ul.mui-table-view
li.mui-table-view-cell
a#outlog(href='javascript:;')
block FRAME
iframe.iframe(src=VIEW.href)
block append JS
script(src="./index.js?v="+VERSION)
import tools from '../../common/tools'
import dataAPI from '../../common/api/data'
layui.use(['element','form','table','jquery'], function(){
var element = layui.element
,form=layui.form
,$=layui.jquery
element.tabChange('alarmTab', 'alarmed')
,
var _active={
farmId:'' id ()
,plotId:'' id ()
,dataItemId:'' id()
,dataItemName:''
,unitName:''
,startDatetime: tools.stampToDatetime(tools.getDayStamp(-1)) ,''
,endDatetime: ''
,chartLine:[]
}
var _data={
loadData(){
dataAPI.farmList({},data=>{
$('#farm').html('')
$.each(data,(index,item)=>{
if(index==0){
_active.farmId=item.farmId
}
$('#farm').append(`<option value='${item.farmId}'>${item.farmName}</option>`)
})
form.render('select');
_active.farmId!=''?this.plotList(_active.farmId):mui.alert('');
})
}
,plotList(farmId){
,
dataAPI.plotList({farmId:farmId},data=>{
$('#plot').html('')
$.each(data,(index,item)=>{
if(index==0){
_active.plotId=item.plotId
}
$('#plot').append(`<option value='${item.plotId}'>${item.plotName}</option>`)
})
form.render('select');
_active.plotId!=''?this.lastData(_active.plotId):mui.alert('');
})
}
,chartLine(prewarningValue,alarmValue){
let _alarmTemp=alarmValue?alarmValue.split('~'):[]
, _alarmDown=Number(_alarmTemp[0])
, _alarmUp=Number(_alarmTemp[1])
, _prewarningTemp=prewarningValue?prewarningValue.split('~'):[]
, _prewarnDown=Number(_prewarningTemp[0])
, _prewarnUp=Number(_prewarningTemp[1])
let _line=[{
name:'',
yAxis:_alarmUp,
lineStyle:{color:'#d63646'}
},{
name:'',
yAxis:_prewarnUp,
lineStyle:{color:'#d8ae11'}
},{
name:'',
yAxis:_prewarnDown,
lineStyle:{color:'#d8ae11'}
},{
name:'',
yAxis:_alarmDown,
lineStyle:{color:'#d63646'}
}]
return _line
}
,lastData(plotId){
dataAPI.lastData({plotId:plotId},data=>{
$('#sensorInfo').html('')
if(data.length>0){
$.each(data,(index,item)=>{
let _alarmTemp=item.alarmValue?item.alarmValue.split('~'):[]
, _alarmDown=Number(_alarmTemp[0])
, _alarmUp=Number(_alarmTemp[1])
, _prewarningTemp=item.prewarningValue?item.prewarningValue.split('~'):[]
, _prewarnDown=Number(_prewarningTemp[0])
, _prewarnUp=Number(_prewarningTemp[1])
if(index==0){
id
_active.dataItemId=item.dataItemId
_active.dataItemName=item.dataItemName
_active.unitName=item.unitName
}
let _collectData=item.lastData?item.lastData:{}
,_value=Number(_collectData.value)
,_alarmHtml=''
,_color=''css
,_arrow=''css
switch (item.valueType) {
case 1:
if(_value){
if(_value>=_alarmUp){
_alarmHtml='<label></label>'
,_color='red'
,_arrow='up'
}else if(_value>=_prewarnUp){
_alarmHtml='<label></label>'
,_color='yellow'
,_arrow='up'
}else if(_value>_prewarnDown){
_color='green'
}else if(_value>_alarmDown){
_alarmHtml='<label></label>'
,_color='yellow'
,_arrow='down'
}else if(_value<=_alarmDown){
_alarmHtml='<label></label>'
,_color='red'
,_arrow='down'
}else{
}
}
$('#alarm').html('')
if(data.length<1){
$('#alarm').html('<p class="nodata"></p>')
}else{
let _trClass=''
if(_alarm.tabId==='prewarning'){
_trClass='yellow'
}else{
_trClass='red'
}
$('#alarm').html('')
if(data.length<1){
$('#alarm').html('<p class="nodata"></p>')
}else{
$('#alarm').append(`<div class="layui-colla-item">
<div class="layui-colla-title" data-title="">
<span></span>
<label class="colla-info ${_trClass}" id="alarmInfo"></label></div>
<div id="alarmList" class="layui-colla-content"></div></div>`)
$.each(data,(index,item)=>{
let _alarmInfo=this.renderTable('alarmList',data)
$('#alarmInfo').html(`
${_alarmInfo.alarm}<i class="iconfont icon-alarm"></i>
`)
})
element.render('collapse')
}
$.each(data,(index,item)=>{
let _trClass=''
if(_alarm.tabId==='prewarning'){
_trClass='yellow'
}else{
_trClass='red'
}
$('#alarm').append(`<div class="layui-colla-item">
<div class="layui-colla-title" data-title="${item.name}">
<span>${item.name}</span>
<label class="colla-info ${_trClass}" id="alarmInfo${index}"></label></div>
<div id="alarm${index}" class="layui-colla-content ${_alarm.tabId=='history'?'':'layui-show'}"></div></div>`)
let _alarmInfo=this.renderTable('alarm'+index,item.informInfoList)
let $info=$('#alarmInfo'+index)
if(_alarmInfo.alarm){
$info.html(_alarmInfo.alarm+'')
}else{
$info.removeClass('yellow red')
$info.addClass('green')
$info.html('')
}
})
element.render('collapse')
}
})
},
$('#sensorInfo').append(`<li class="mui-table-view-cell mui-media">
<a data-item-id='${item.dataItemId}' data-item-name='${item.dataItemName}' data-unit-name='${item.unitName}'>
<div class="mui-media-object mui-pull-right ${_color}">
<span class="${_arrow}">${_value?_value.toFixed(2)+item.unitName:'N/A'}</span>
${_alarmHtml}</div>
<div class="mui-media-body">${item.dataItemName}
<p>${_collectData.collectDatetime?_collectData.collectDatetime:''}</p></div></a></li>`)
break;
default:mui.toast('valueType='+item.valueType+'')
break;
}
})
}else{
_active.dataItemId=''
}
_menu={
appid:'ww3b6d4978149c4609' CorpID
appid:'ww57b0d5bffdbb625e'
,redirect_uri:'http:zlmifan.xicp.io/login/login.html'
,redirect_uri:'http:192.168.0.15:8080/nxnhlmenu/login/login.html'
,response_type:'code'
,scope:'snsapi_base'
,state:''
}
_route={
index:'../app/index.html'
,menuLogin:'http:zlmifan.xicp.io'
,menuLogin:'http:192.168.0.15:8080/nxnhlmenu/index.html'
,login:'../login/login.html'
,delogin:'./login/login.html'index.html
}
module.exports={
server:_s
,api:_api
,static:_static
,menu:_menu
,route:_route
}
- gulpfile->pug.js data
- VERSION :
- DEBUG : .min
- config
- var KEYWORDS=''
- var DESCRIPTION = ''
- var ICON = '' icon(logo)
- var TITLE = ''
-
- var PATCH_before='../' dist
- var PATCH_lib=PATCH_before+'lib/' -
- var PATCH_min =DEBUG?'':'.min'
- var PATCH_logo = PATCH_before+'images/logo.png' logo
- CDN
- iconfont
- var ICONFONT = PATCH_before+'fonts/iconfont.css'
- fetch,fetch,promise_polyfill
- var FETCH=PATCH_lib+'fetch/fetch.umd'+PATCH_min+'.js'
- promise_polyfill
- var PROMISE=PATCH_lib+'polyfill'+PATCH_min+'.js'
- MUI
- var MUI_CSS=PATCH_lib+'mui/css/mui'+PATCH_min+'.css'
- var MUI_JS=PATCH_lib+'mui/js/mui'+PATCH_min+'.js'
- vue
- var VUE = PATCH_lib+ 'vue/vue'+PATCH_min+'.js'
- var VUE_TAP = PATCH_lib+ 'vue/vue-tap'+PATCH_min+'.js'
- layui
- var LAYUI_CSS = PATCH_lib+ 'layui/css/layui.css'
- var LAYUI_JS = PATCH_lib+ 'layui/layui.js'
- var LAYUI_ADMIN_CSS = PATCH_lib+ 'layui/css/admin/admin.css'
if(_active.dataItemId==''){
$('#sensorInfo').html('<p class="nodata"></p>')
$('#plineChart').html('<p class="nodata"></p>')
}else{
this.sensorData(_active.dataItemId)
}
})
}
,sensorData(dataItemId){
dataAPI.historyData({
dataItemId:dataItemId?dataItemId:_active.dataItemId
,startDatetime:_active.startDatetime
,endDatetime:_active.endDatetime
,plotId: _active.plotId
},data=>{
this.renderChart(data)
})
}
,
,renderChart(res){
let _series = res.data? res.data['valueList']:[];
_active.chartLine=_data.chartLine(res.prewarningValue,res.alarmValue)
if(_series && _series.length>0){
var _timedata=[]
$.each(_series, (index, item)=>{
_timedata.push({
name:item.value[0],
value:[item.collectDatetime,item.value.toFixed(2)]
})
});
let chartOpt=tools.getEchartsDefOpt()
mui.extend(true,chartOpt,{
title:{
text:_active.dataItemName
}
,xAxis: {
type: 'time',
splitLine:{
show:false
}
}
,yAxis:{
name:_active.unitName
,axisLabel:{
formatter(val){
if(val>999999)
val=val/1000000+'m';
if(val>999)
val=val/1000+'k';
return val;
}
}
}
,tooltip: {
formatter: function (params) {
params = params[0];
return params.name.substr(6,10)+'<br>'+params.value[1]+_active.unitName;
}
}
,series:[{
name:_active.dataItemName
,type: 'line'
,symbol:'none'
,smooth: true
,unitName:_active.unitName
,data:_series
, label: {normal: {show: true}},animation:false
,markLine:{
data:_timedata
,label:{
position: 'middle',
show:false,
formatter: '{b} {c}'+_active.unitName
}}
}]
})
tools.echarts($("#plineChart"), chartOpt);
tools.renderTable($("#plineTable"), chartOpt);
}else{
$('#plineChart').html('<p class="nodata"></p>')
$('#plineTable').html('<p class="nodata"></p>')
}
}
}
form.on('select(farm)', function(data){
_active.farmId=data.value
_data.plotList(_active.farmId)
});
form.on('select(plot)', function(data){
_active.plotId=data.value
_data.lastData(_active.plotId)
});
margin-right:4vw;
& .layui-layer-content{
padding: @padding @padding @padding/3;
& p {
padding-bottom:@padding/5;
font-size: 15px;
color: #666;
}
& i{
display: inline-block;
font-size: 20px;
width: 24px;
}
& .layerContent{
position: relative;
padding-bottom: @padding/2;
text-indent: 24px;
&>i{
position: absolute;
width: 24px;
height: 24px;
left: 0;
top: 0;
&::before{
margin-left: -24px;
}
}
}
& textarea{
padding: @padding/5 @padding/3;
}
}
}
.tools{
margin: @padding*4 @padding/2 0;
& .layui-inline{
width: 33.3%;
box-sizing: border-box;
padding: 0 @padding/4;
& select,& input{
margin-bottom: 0;
padding: @padding/2;
}
}
}
.nodata{
position: absolute;
left: 0;
right: 0;
margin-top: -2px;
background-color: white;
text-align: center;
height: 80px;
line-height: 80px;
}
extends ../../common/base.pug
block append CSS
link(href="./alarm.css?v="+VERSION, rel="stylesheet")
block CONTENT
.layui-tab.layui-tab-brief(lay-filter='alarmTab')
ul.layui-tab-title
li.layui-this(lay-id='prewarning')
li(lay-id='alarm')
li(lay-id='history')
-
.tools.layui-form.mui-hidden
.layui-inline
select#toolDate(name="toolDate" lay-filter="toolDate")
option(value='-1') 24
option(value='-7') 7
option(value='-15')
option(value='-30') 1
.layui-inline
select#toolType(name="toolType" lay-filter="toolType")
option(value='')
option(value='prewarning')
option(value='alarm')
.layui-inline
select#toolState(name="toolState" lay-filter="toolState")
option(value='')
option(value='true')
option(value='false')
.layui-inline.mui-hidden
select.layui-input#plantSelect(name='plant')
.layui-collapse.padtop#alarm
block append JS
script(src="./alarm.js?v="+VERSION)
_data.loadData();
mui
mui.init({
gestureConfig: {
doubletap: true
}
})
tap
mui('.toolbar')
.on('tap','#refresh',function(){
let _plotId=$('#plot').val()
_plotId?_data.lastData(_plotId):mui.alert('')
})
.on('tap','#switchBtn',function(){
/
.
})
ymin-max
mui(".chart").on("doubletap", "#plineChart", function() {
tools.renderEcharts(mui("#plineChart"), {
yAxis: {
min: function(value) {
return (value.min - 2).toFixed(0);
},
max: function(value) {
return (value.max + 2).toFixed(0);
}
}
});
});
mui('#sensorInfo').on('tap','a',function(){
let _dataItemId=$(this).data('itemId')
,_name=$(this).data('itemName')
,_unitName=$(this).data('unitName')
,_unitName=$(this).data('unitName')
_active.dataItemId=_dataItemId
_active.dataItemName=_name
_active.unitName=_unitName
_data.sensorData(_dataItemId)
_active.dataItemId=_dataItemId
_active.dataItemName=_name
_active.unitName=_unitName
_data.sensorData(_dataItemId)
})
mui('#actionsheet').on('tap','a',function(){
let _day=$(this).data('day')
,_html=$(this).html()
_active.startDatetime=tools.stampToDatetime(tools.getDayStamp(_day))
_active.dataItemId?_data.sensorData():mui.alert('')
$('#chartDay').html(_html)
mui('#actionsheet').popover('hide');
})
})
@import '../../common/base.less';
body{
background-color:white;
display: flex;
justify-content: flex-start;
flex-direction: column;
height: 100vh;
}
@padding:15px;
tab
.layui-tab-title li {
padding: 0 10px;
}
.layui-tab{
margin: 0;
padding: @padding/2 @padding 0;
}
.switch{
padding: 5px 15px 5px;
color: #666;
-webkit-box-flex: 0;
& .layui-form-label{
width: 110px;
}
& input[type=text]{
margin-bottom: 0;
}
}
.chart{
flex: 0 0 33vh;
&>#plineChart,&>#plineTable{
width: 100%;
height: 33vh;
}
}
.toolbar{
flex: 0 0 8vh;
padding: 0 6vw;
display: flex;
align-items: center;
justify-content: space-between;
& > a{
font-size: 17px;
color: #777;
}
& > a.btn {
color: white;
background-color: #bbb;
border-radius: 15px;
padding: 3px 10px;
}
}
#sheetBlack {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.1);
z-index: 10;
}
#actionsheet {
width: 30vw;
left: 20px;
& ul.mui-table-view {
margin-top: 0;
}
& li.mui-table-view-cell {
padding: 9px 15px;
}
}
.sensor{
padding-top: 1px;
overflow: scroll;
}
.mui-table-view .mui-media-object {
&.red,&.yellow{
line-height: 21px;
font-size: 21px;
& label{
font-size:12px;
}
}
max-width: inherit;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
& span{
font-family: Muiicons;
&.up::after{
content:'\e584';
font-size: 21px;
font-weight: bold;
}
&.down::after{
content:'\e585';
font-size: 21px;
font-weight: bold;
}
}
}
echarts
#plineTable{
border-spacing: 0;
&>.table-title{
text-align: center;
font-size: 18px;
font-weight: bold;
color: black;
height: 28px;
line-height: 29px;
}
& tr:hover {
background: #dad8d3;
-o-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
& th {
padding: 5px;
text-align: center;
width: 50%;
}
& td{
padding: 3px;
text-align: center;
}
& th {
background:#dadada;
cursor: pointer;
}
& td:first-child, & th:first-child {
border-left: none;
}
& tr:nth-of-type(2n){background:#f1f1f1;cursor: pointer;}
& tr:nth-of-type(2n+1){background:#eaeaea;cursor: pointer;}
& tbody tr:hover{
background: #fbf8e9;
-o-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
}
.mui-toast-container{
margin-bottom: 60px;
}
.nodata{
text-align: center;
height: 10vh;
line-height: 10vh;
}
extends ../../common/base.pug
block append CSS
link(href="./data.css?v="+VERSION, rel="stylesheet")
block CONTENT
-
.switch.layui-form
label.layui-form-label(for='farm') :
.layui-input-block
select.layui-input#farm(name='farm',lay-filter='farm')
-
.switch.layui-form
label.layui-form-label(for='plot') :
.layui-input-block
select.layui-input#plot(name='plot',lay-filter='plot')
.chart
#plineChart
#plineTable.mui-hidden
.toolbar
a.btn#chartPopBtn(href="#actionsheet")
i#chartDay.iconfont.icon-rili
|
span 1
a#refresh(href="javascript:;")
span
|
i.iconfont.icon-f14
- a#switchBtn(href="javascript:;")
- span
- |
- i.iconfont.icon-qiehuan
.mui-popover#actionsheet
ul.mui-table-view
li.mui-table-view-cell
a(data-day='-1') 1
li.mui-table-view-cell
a(data-day='-7') 1
li.mui-table-view-cell
a(data-day='-30') 1
#sheetBlack.mui-hidden
.sensor
ul.mui-table-view#sensorInfo
block append JS
script(src=ECHARTS)
script(src="./data.js?v="+VERSION)
import tools from '../../common/tools'
import dataAPI from '../../common/api/data'
layui.use(['element','form','table','jquery'], function(){
var element = layui.element
,form=layui.form
,$=layui.jquery
element.tabChange('alarmTab', 'alarmed')
,
var _active={
farmId:'' id ()
,plotId:'' id ()
,sensorId:'' id()
,dataItemName:''
}
var _data={
loadData(){
dataAPI.farmList({},data=>{
$('#farm').html('')
$.each(data,(index,item)=>{
if(index==0){
_active.farmId=item.farmId
}
$('#farm').append(`<option value='${item.farmId}'>${item.farmName}</option>`)
})
form.render('select');
_active.farmId!=''?this.plotList(_active.farmId):mui.alert('');
})
}
,plotList(farmId){
,
dataAPI.plotList({farmId:farmId},data=>{
$('#plot').html('')
$.each(data,(index,item)=>{
if(index==0){
_active.plotId=item.plotId
}
$('#plot').append(`<option value='${item.plotId}'>${item.plotName}</option>`)
})
form.render('select');
_active.plotId!=''?this.equipmentList(_active.plotId):mui.alert('');
})
}
,equipmentList(plotId){
dataAPI.equipmentList({plotId:plotId},data=>{
$('#sensorInfo').html('')
if(data.length>0){
$.each(data,(index,item)=>{
let _dataItemList=item.dataItemList?item.dataItemList:{}
,sensorId=item.sensorId
,_value=this.getDataItemValue(_dataItemList)
,modeZeroId=this.getDataItemId(_dataItemList,'') id
,modeOneId=this.getDataItemId(_dataItemList,'') id
,modeStopId=this.getDataItemId(_dataItemList,'') id
$('#sensorInfo').append(`
<li class="mui-table-view-cell mui-media" id='sensor_block_${sensorId}'>
<a data-item-id='${sensorId}' data-name='${item.sensorName}' data-status-id='${_dataItemList[0].dataItemId}'>
<div class="mui-media-data mui-clearfix">
<label class="mui-pull-left"><i class="iconfont icon-equipment"></i> ${item.sensorName}</label>
<span class="mui-pull-right">${_value?_value:''}</span>
</div>
<div class="mui-out-line" id="outline${sensorId}">
</div>
<div class="mui-media-btns" id="sensor${sensorId}">
<button id="sensorBtn${sensorId}0" ${_value==''?'disabled':''} type="button" class="mui-btn" data-loading-text="..." data-sensor-name="${item.sensorName}" data-sensor-id="${sensorId}" data-item-operation="1" data-item-id="${modeOneId}"></button>
<button id="sensorBtn${sensorId}1" ${_value==''?'disabled':''} type="button" class="mui-btn" data-loading-text="..." data-sensor-name="${item.sensorName}" data-sensor-id="${sensorId}" data-item-operation="0" data-item-id="${modeStopId}"></button>
<button id="sensorBtn${sensorId}2" ${_value==''?'disabled':''} type="button" class="mui-btn" data-loading-text="..." data-sensor-name="${item.sensorName}" data-sensor-id="${sensorId}" data-item-operation="1" data-item-id="${modeZeroId}"></button>
</div>
</a></li>`);
this.certralStatus(modeZeroId,(data)=>{
if(data.state == 'true'){
，
$("#sensor"+sensorId).show();
}else{
，
$("#outline"+sensorId).show();
mui.toast('')
}
})
})
$("#sensor"+_active.sensorId).show();
}else{
$('#sensorInfo').html('<p class="nodata"></p>')
$('#plineChart').html('<p class="nodata"></p>')
}
})
}
,certralStatus(dataItemId,cb){
dataAPI.certralStatus({dataItemId:dataItemId},data=>{
cb(data);
})
}
,switchStatus(params,otherParams,cb){
dataAPI.switchStatus(params,data=>{
cb(data,otherParams);
})
}
Id
,getDataItemId(list,dir){
eachid
for(let i=0;i<list.length;i++){
if(list[i]['dataName'].indexOf(dir)>-1){
return list[i]['dataItemId'];
}
if(list[i]['lastData']['value'] == '' && dir==""){
return list[i]['dataItemId'];
}
}
$.each(list,(index,item)=>{
if(item['dataName'].indexOf(dir)>-1){
return item['dataItemId']
}
if(item['lastData']['value'] == '' && dir==""){
return item['dataItemId'];
}
})
}
,getDataItemValue(list){
if(list.length){
for(let i=0;i<list.length;i++){
var item = list[i] || {};
if(item['dataName'].indexOf('')>-1){
if((item['lastData'] ? item['lastData']['value']:'') == ''){
return '';
}
}
if(item['dataName'].indexOf('')>-1){
if((item['lastData'] ? item['lastData']['value']:'') == ''){
return '';
}
}
}
return '';
$.each(list,(index,item)=>{
if(item['dataName'].indexOf('')>-1){
if((item['lastData'] ? item['lastData']['value']:'') == ''){
return '';
}
}
if(item['dataName'].indexOf('')>-1){
if((item['lastData'] ? item['lastData']['value']:'') == ''){
return '';
}
}
})
return '';
}else{
return '';
}
}
,sensorData(sensorId,sensorName){
let id = sensorId
dataAPI.sensorData({sensorId:sensorId},data=>{
let _dataItemList=data?data:[]
,sensorId=id
,_value=this.getDataItemValue(_dataItemList)
,modeZeroId=this.getDataItemId(_dataItemList,'') id
,modeOneId=this.getDataItemId(_dataItemList,'') id
,modeStopId=this.getDataItemId(_dataItemList,'') id
$('#sensor_block_'+sensorId).html(`
<a data-item-id='${sensorId}' data-item-name='${sensorName}' data-status-id='${_dataItemList[0].dataItemId}'>
<div class="mui-media-data mui-clearfix">
<label class="mui-pull-left"><i class="iconfont icon-equipment"></i> ${sensorName}</label>
<span class="mui-pull-right">${_value?_value:''}</span>
</div>
<div class="mui-out-line" id="outline${sensorId}">
</div>
<div class="mui-media-btns" id="sensor${sensorId}">
<button id="sensorBtn${sensorId}0" ${_value==''?'disabled':''} type="button" class="mui-btn" data-loading-text="..." data-sensor-name="${sensorName}" data-sensor-id="${sensorId}" data-item-operation="1" data-item-id="${modeOneId}"></button>
<button id="sensorBtn${sensorId}1" ${_value==''?'disabled':''} type="button" class="mui-btn" data-loading-text="..." data-sensor-name="${sensorName}" data-sensor-id="${sensorId}" data-item-operation="0" data-item-id="${modeStopId}"></button>
<button id="sensorBtn${sensorId}2" ${_value==''?'disabled':''} type="button" class="mui-btn" data-loading-text="..." data-sensor-name="${sensorName}" data-sensor-id="${sensorId}" data-item-operation="1" data-item-id="${modeZeroId}"></button>
</div>
</a>`);
setTimeout(()=>{
$("#sensor"+sensorId).show();
},20);
})
}
}
form.on('select(farm)', function(data){
_active.farmId=data.value
_data.plotList(_active.farmId)
});
form.on('select(plot)', function(data){
_active.plotId=data.value
_data.equipmentList(_active.plotId)
});
_data.loadData();
mui
mui.init({
gestureConfig: {
doubletap: true
}
})
tap
mui('.toolbar')
.on('tap','#refresh',function(){
let _plotId=$('#plot').val()
_plotId?_data.equipmentList(_plotId):mui.alert('')
})
.on('tap','#switchBtn',function(){
/
.
})
，
mui('#sensorInfo').on('tap','a',function(){
if(_active.sensorId)
$("#sensor"+_active.sensorId).hide();
let sensorId=$(this).data('itemId')
,_name=$(this).data('itemName')
,_dataItemId=$(this).data('statusId')
_active.sensorId=sensorId
_active.dataItemName=_name
_data.certralStatus(_dataItemId,sensorId);
})
mui(document.body).on('tap', '.mui-btn', function(e) {
mui(this).button('loading');
let id = $(this).data('itemId')
,operation = $(this).data('itemOperation')
,sensorId = $(this).data('sensorId')
,name = $(this).data('sensorName')
,params = {dataItemId:id,operator:operation}
,list = [0,1,2]
,otherParams = {'sensorId':sensorId,'sensorName':name}
$.each(list,(index,item)=>{
$("#sensorBtn"+sensorId+index).attr('disabled',true);
})
_data.switchStatus(params,otherParams,(data,otherParams)=>{
setTimeout(function() {
_data.sensorData(otherParams.sensorId,otherParams.sensorName);
_data.equipmentList(_active.plotId);
}.bind(this), 5000);
})
});
})
@import '../../common/base.less';
body{
background-color:white;
display: flex;
justify-content: flex-start;
flex-direction: column;
height: 100vh;
}
@padding:15px;
tab
.layui-tab-title li {
padding: 0 10px;
}
.layui-tab{
margin: 0;
padding: @padding/2 @padding 0;
}
.switch{
padding: 5px 15px 5px;
color: #666;
-webkit-box-flex: 0;
& .layui-form-label{
width: 110px;
}
& input[type=text]{
margin-bottom: 0;
}
}
.chart{
flex: 0 0 33vh;
&>#plineChart,&>#plineTable{
width: 100%;
height: 33vh;
}
}
.toolbar{
flex: 0 0 8vh;
padding: 0 6vw;
display: flex;
align-items: center;
justify-content: space-between;
& > a{
font-size: 17px;
color: #777;
}
& > a.btn {
color: white;
background-color: #bbb;
border-radius: 15px;
padding: 3px 10px;
}
}
#sheetBlack {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.1);
z-index: 10;
}
#actionsheet {
width: 30vw;
left: 20px;
& ul.mui-table-view {
margin-top: 0;
}
& li.mui-table-view-cell {
padding: 9px 15px;
}
}
.sensor{
padding-top: 1px;
overflow: scroll;
}
.mui-table-view .mui-media-object {
&.red,&.yellow{
line-height: 21px;
font-size: 21px;
& label{
font-size:12px;
}
}
max-width: inherit;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
& span{
font-family: Muiicons;
&.up::after{
content:'\e584';
font-size: 21px;
font-weight: bold;
}
&.down::after{
content:'\e585';
font-size: 21px;
font-weight: bold;
}
}
}
.mui-media-data{
& label,& span{
line-height: 30px;
font-size: 16px;
}
}
.mui-out-line{
display: none;
margin-top: 15px;
color: #b5b5b5;
font: normal 14px/20px '';
text-indent: 1.5em;
}
.mui-media-btns{
display: none;
margin-top: 15px;
}
echarts
#plineTable{
border-spacing: 0;
&>.table-title{
text-align: center;
font-size: 18px;
font-weight: bold;
color: black;
height: 28px;
line-height: 29px;
}
& tr:hover {
background: #dad8d3;
-o-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
& th {
padding: 5px;
text-align: center;
width: 50%;
}
& td{
padding: 3px;
text-align: center;
}
& th {
background:#dadada;
cursor: pointer;
}
& td:first-child, & th:first-child {
border-left: none;
}
& tr:nth-of-type(2n){background:#f1f1f1;cursor: pointer;}
& tr:nth-of-type(2n+1){background:#eaeaea;cursor: pointer;}
& tbody tr:hover{
background: #fbf8e9;
-o-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
}
.mui-toast-container{
margin-bottom: 60px;
}
.nodata{
text-align: center;
height: 10vh;
line-height: 10vh;
}
extends ../../common/base.pug
block append CSS
link(href="./equipment.css?v="+VERSION, rel="stylesheet")
block CONTENT
-
.switch.layui-form
label.layui-form-label(for='farm') :
.layui-input-block
select.layui-input#farm(name='farm',lay-filter='farm')
-
.switch.layui-form
label.layui-form-label(for='plot') :
.layui-input-block
select.layui-input#plot(name='plot',lay-filter='plot')
.sensor
ul.mui-table-view#sensorInfo
block append JS
script(src="./equipment.js?v="+VERSION)
import {login} from '../../components/login/login'
import tools from '../../common/tools'
import userAPI from '../../common/api/user'
import {route,menu} from '../../config/config'
const _login={
params:tools.getParams(),URL
remeber(){
let _user=this.user
if()
var remember=mui('#remember')[0].classList.contains("mui-active")
if(_user && _user.password)
if(!remember){
mui('#remember').switch()
mui('#remember').switch().toggle()
}
}
}
_login.remeber()
if(_login.params.code){code
mui('#menuAuth')[0].classList.remove('mui-hidden')
tools.setData('user',{
code:_login.params.code
})
}else{
mui('#menuAuth')[0].classList.add('mui-hidden')
}
mui('.mui-content').on('tap','#login',function(){
var username=mui('#username')[0].value
var password=mui('#password')[0].value
var remember=mui('#remember')[0].classList.contains("mui-active")
if(remember){
tools.setData('user',{
password
})
}else{
tools.setData('user',{
password:''
})
}
tools.setData('user',{
username
})
userAPI.userLogin({
username,
password
},data=>{
_login.user=tools.setData('user',{
,wechatId:data.wechatId
})
if(!data.wechatId && !_login.user.nomenubindHint && _login.params.code){ID
mui.confirm('','',['',''],function(e){
if(e.index==0){
_login.user=tools.setData('user',{
nomenubindHint:true
})
mui.alert(',','')
mui.later(()=>{
location.href=route.index
},2000)
}else{
userAPI.menuBind({
code: _login.params.code,
username,
password
},data=>{
mui.alert(',2s','')
mui.later(()=>{
location.href=route.index
},2000)
})
}
})
}else{
location.href=route.index
}
})
})
weixin
mui('.oauth-area').on('tap','#menuAuth',function(){
_login.user=tools.setData('user',{
,wechatId:data.wechatId
})
location.href=route.index
})
})
extends ../../components/login/login.pug
block append CSS
link(href="./login.css?v="+VERSION, rel="stylesheet")
block LOGIN
img(src=PATCH_logo, alt="")
p= LOGIN.title
block append JS
script(src=WEIXIN)
script(src="./login.js?v="+VERSION)
import tools from '../../common/tools'
import alarmAPI from '../../common/api/alarm'
import patrolAPI from '../../common/api/patrol'
import {route} from '../../config/config'
import { ok } from 'assert';
layui.use(['element','form','table','layer'], function(){
var element = layui.element
,form=layui.form
,$=layui.jquery
,table = layui.table
,layer=layui.layer
var _view={
loadAlarm(){
alarmAPI.alarmCount({},data=>{
$.each(data,(index,value)=>{
if(typeof value==='number'){
$('#'+index).html(value)
}
})
})
},
}
_view.loadAlarm()
_view.loadPatrol()
,
mui('.mui-card').on('tap','.block',function(){
let _hash=$(this).data('hash')
,_tab=$(this).data('tab')
,_toolType=$(this).data('toolType')
,_toolState=$(this).data('toolState')
,_other=''
parent.layui.$('.nav-left .item').each((index,item)=>{
let $item= parent.layui.$(item)
,_navHash=$item.data('hash')
$item.removeClass('active')
if(_navHash==_hash){
$item.addClass('active')
}
})
if(_toolType) _other+='&toolType='+_toolType
if(_toolState) _other+='&toolState='+_toolState
parent.location.href=route.index+'#'+_hash+'?tabId='+_tab+_other
})
});
@import '../../common/base.less';
.mui-card-content-inner{
padding: 2%;
display: flex;
flex-wrap: wrap;
& .block{
display: flex;
width: 50%;
padding: 1vh;
height: 16vh;
box-sizing: border-box;
&>.item{
background-color: #eee;
width: 100%;
position: relative;
color: #666;
display: flex;
flex-direction: column;
justify-content: center;
&>label{
font-size: 15px;
display: block;
padding-left: 3vw;
line-height: 6.2vh;
flex: 0 0;
z-index: 10;
}
&>i{
position: absolute;
color: #dbdbdb;
right: 8px;
bottom: 4px;
}
&>number{
font-size: 32px;
padding-left: 6vw;
flex: 1;
}
}
}
}
extends ../../common/base.pug
block append CSS
link(href="./view.css?v="+VERSION, rel="stylesheet")
block CONTENT
.mui-content
.mui-card
.mui-card-header
.mui-card-content
.mui-card-content-inner
-
.block(data-hash='alarm',data-tab='alarm')
.item
number#alarmUndisposedCount.red
i.iconfont.icon-alarm
.block(data-hash='alarm',data-tab='prewarning')
.item
number#prewarningUndisposedCount.yellow
.block(data-hash='alarm',data-tab='history',data-tool-type='alarm',data-tool-state='true')
.item
number#alarmProcessedCount.green
i.iconfont.icon-gaojingyichuli
.block(data-hash='alarm',data-tab='history',data-tool-type='prewarning',data-tool-state='true')
.item
number#prewarningProcessedCount.green
i.iconfont.icon-yichuli
block append JS
import {route,menu} from '../config/config'
if(mui.os.wechat){
tools.setData('env',{
isWechat:true
})
location.href=tools.getMenuUri(menu.redirect_uri,menu.appid)
}else{
tools.setData('env',{
isWechat:false
})
location.href=route.delogin
标签：资源库,..,layui,data,item,服务平台,var,软件,mui From： https://blog.51cto.com/u_16214894/6949811