|
@@ -1,5 +1,78 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="projectManagement_template">
|
|
<div class="projectManagement_template">
|
|
|
|
|
+ <div class="nav_top">
|
|
|
|
|
+ <div class="left_title">
|
|
|
|
|
+ <img src="../img/iconfont/notice.png"><span class="span">Please pay attention to the updated content at any time.</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="right_operation">
|
|
|
|
|
+ <el-dropdown @command="commandDropdown" trigger="click" @visible-change="commandHide('dropdown_projectManagement_division')">
|
|
|
|
|
+ <span class="el-dropdown-link">
|
|
|
|
|
+ <span>{{divisionName}}</span><i class="el-icon-caret-bottom el-icon--right"></i>
|
|
|
|
|
+ </span>
|
|
|
|
|
+ <el-dropdown-menu slot="dropdown" class="scrollbar_style dropdown_projectManagement_division">
|
|
|
|
|
+ <el-dropdown-item v-for="item in divisionNav" :class="{'select':item.id==division}" :command="{'key':'division','id':item.id}" :key="item.id">{{item.name}}</el-dropdown-item>
|
|
|
|
|
+ </el-dropdown-menu>
|
|
|
|
|
+ </el-dropdown>
|
|
|
|
|
+ <el-input placeholder="search..." v-model="keywords" @keyup.native="getLightListKeyUp($event)" class="input-with-select">
|
|
|
|
|
+ <i slot="suffix" class="el-input__icon el-icon-search" @click="getLightList()"></i>
|
|
|
|
|
+ </el-input>
|
|
|
|
|
+ <div class="btn"><img src="../img/iconfont/add.png"><span>New project</span></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="projectManagement_main">
|
|
|
|
|
+ <div class="main_top">
|
|
|
|
|
+ <div class="main_top_left">
|
|
|
|
|
+ <div class="main_top_left_left">
|
|
|
|
|
+ <div class="title">
|
|
|
|
|
+ <div class="l_text">
|
|
|
|
|
+ <span class="span1">TEST</span>
|
|
|
|
|
+ <span class="span1">编号：8398</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="r_btn"><i class="iconfont icon-bianji"></i></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <p class="p"><i class="iconfont icon-dizhi"></i><span class="span2">635 Renmin Road, Haidian District, Beijing</span></p>
|
|
|
|
|
+ <div class="data_bpx">
|
|
|
|
|
+ <div class="li">
|
|
|
|
|
+ <p class="p1">{{(8831).toLocaleString()}}</p>
|
|
|
|
|
+ <p class="p2">Lights</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="li">
|
|
|
|
|
+ <p class="p1">{{(8831).toLocaleString()}}</p>
|
|
|
|
|
+ <p class="p2">Network</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="li">
|
|
|
|
|
+ <p class="p1"><span class="span1">{{(8831).toLocaleString()}}</span><span class="span2">5%</span></p>
|
|
|
|
|
+ <p class="p2">On-line</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="li">
|
|
|
|
|
+ <p class="p1"><span class="span1">{{(8831).toLocaleString()}}</span><span class="span2">5%</span></p>
|
|
|
|
|
+ <p class="p2">Light-up</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="li">
|
|
|
|
|
+ <p class="p1"><span class="span1">{{(439).toLocaleString()}}</span><span class="span2">5%</span></p>
|
|
|
|
|
+ <p class="p2">Flaut</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="main_top_left_right">
|
|
|
|
|
+ <div class="box box1">
|
|
|
|
|
+ <p class="p1"><i></i><span>Time zone</span></p>
|
|
|
|
|
+ <p class="p2">UTC/GMT+08:00</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="box box2">
|
|
|
|
|
+ <p class="p1"><i></i><span>Creation time</span></p>
|
|
|
|
|
+ <p class="p2">2019/04/04 17:36:58</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="box box3">
|
|
|
|
|
+ <p class="p1"><i></i><span>Region</span></p>
|
|
|
|
|
+ <p class="p2">East China ，Guangdong Province</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="main_top_right">
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
@@ -12,6 +85,26 @@
|
|
|
name:'projectManagement',
|
|
name:'projectManagement',
|
|
|
data(){
|
|
data(){
|
|
|
return{
|
|
return{
|
|
|
|
|
+ keywords:'',
|
|
|
|
|
+ division:'',
|
|
|
|
|
+ divisionNav:[{id:'0',name:'All'}],
|
|
|
|
|
+ rightDate:'',
|
|
|
|
|
+ rightDateNav:[{id:'0',name:'Today'}],
|
|
|
|
|
+ myChart1:'',
|
|
|
|
|
+
|
|
|
|
|
+ tableShowId:'-1',
|
|
|
|
|
+ deviceList:[],
|
|
|
|
|
+ deviceArr:[],
|
|
|
|
|
+
|
|
|
|
|
+ faultInformationList:[],
|
|
|
|
|
+ faultInformationArr:[],
|
|
|
|
|
+
|
|
|
|
|
+ myChart2:'',
|
|
|
|
|
+
|
|
|
|
|
+ loading:{
|
|
|
|
|
+ deviceList:false,
|
|
|
|
|
+ faultInformationList:false,
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
computed:{
|
|
computed:{
|
|
@@ -20,12 +113,88 @@
|
|
|
client_key:'client_key',
|
|
client_key:'client_key',
|
|
|
username:'username',
|
|
username:'username',
|
|
|
version:'version',
|
|
version:'version',
|
|
|
-
|
|
|
|
|
}),
|
|
}),
|
|
|
|
|
+ divisionName(){
|
|
|
|
|
+ let name;
|
|
|
|
|
+ for(let d of this.divisionNav){
|
|
|
|
|
+ if(d.id == this.division){
|
|
|
|
|
+ name = d.name;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ return name;
|
|
|
|
|
+ },
|
|
|
|
|
+ rightDateName(){
|
|
|
|
|
+ let name;
|
|
|
|
|
+ for(let d of this.rightDateNav){
|
|
|
|
|
+ if(d.id == this.rightDate){
|
|
|
|
|
+ name = d.name;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ return name;
|
|
|
|
|
+ },
|
|
|
},
|
|
},
|
|
|
mounted(){
|
|
mounted(){
|
|
|
|
|
+ this.rightDate = '0';
|
|
|
|
|
+ this.division = '0';
|
|
|
|
|
+ this.district = '0';
|
|
|
|
|
+
|
|
|
|
|
+ this.deviceArr = [
|
|
|
|
|
+ {prop:'city',label:'City',align:'left',minWidth:70,type:1},
|
|
|
|
|
+ {prop:'total',label:'Total',minWidth:70,type:1},
|
|
|
|
|
+ {prop:'power',label:'Power',minWidth:70},
|
|
|
|
|
+ {prop:'online',label:'On-line',minWidth:70},
|
|
|
|
|
+ {prop:'offline',label:'Off-line',minWidth:70},
|
|
|
|
|
+ {prop:'fault',label:'Fault',minWidth:70},
|
|
|
|
|
+ ];
|
|
|
|
|
+ this.deviceList = [
|
|
|
|
|
+ {'city':5,'total':5,'bl':'5%','power':5,'online':5,'offline':5,'fault':5,id:1},
|
|
|
|
|
+ {'city':5,'total':5,'bl':'5%','power':5,'online':5,'offline':5,'fault':5,id:2},
|
|
|
|
|
+ {'city':5,'total':5,'bl':'5%','power':5,'online':5,'offline':5,'fault':5,id:3},
|
|
|
|
|
+ ];
|
|
|
|
|
+
|
|
|
|
|
+ this.faultInformationArr = [
|
|
|
|
|
+ {prop:'project',label:'Project',minWidth:70},
|
|
|
|
|
+ {prop:'division',label:'Division/District/Upazilla',minWidth:120,type:1},
|
|
|
|
|
+ {prop:'lightId',label:'Light ID',minWidth:70},
|
|
|
|
|
+ {prop:'faultType',label:'Fault type',minWidth:70},
|
|
|
|
|
+ {prop:'faultTime',label:'Fault time',width:160},
|
|
|
|
|
+ ];
|
|
|
|
|
+ this.faultInformationList = [
|
|
|
|
|
+ {'project':5,'division':5,'district':'5%','dpazilla':5,'lightId':5,'faultType':5,'faultTime':5},
|
|
|
|
|
+ ];
|
|
|
|
|
+ let i = 1;
|
|
|
|
|
+ for(let d of this.faultInformationList){
|
|
|
|
|
+ d.webIndex = i;
|
|
|
|
|
+ i++;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
},
|
|
},
|
|
|
methods:{
|
|
methods:{
|
|
|
|
|
+ commandHide(val){
|
|
|
|
|
+ this.$nextTick(function(){
|
|
|
|
|
+ if($('.'+val)&&$('.'+val+' >.select').offset()){
|
|
|
|
|
+ $('.'+val).animate({scrollTop: $('.'+val).scrollTop() + $('.'+val+' >.select').offset().top - $('.'+val).offset().top - 100})
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ commandDropdown(obj){
|
|
|
|
|
+ this.$set(this,obj.key,obj.id)
|
|
|
|
|
+ },
|
|
|
|
|
+ tableEnter(data){
|
|
|
|
|
+ this.tableShowId = data.id;
|
|
|
|
|
+ },
|
|
|
|
|
+ tableLeave(){
|
|
|
|
|
+ this.tableShowId = '-1';
|
|
|
|
|
+ },
|
|
|
|
|
+ /*设备列表*/
|
|
|
|
|
+ getLightListKeyUp(e){
|
|
|
|
|
+ if(e.key == 'Enter'){
|
|
|
|
|
+ this.getLightList();
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ getLightList(){
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
},
|
|
},
|
|
|
watch:{
|
|
watch:{
|
|
|
|
|
|
|
@@ -34,6 +203,222 @@
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style type="text/css" lang="less">
|
|
<style type="text/css" lang="less">
|
|
|
- .headers{
|
|
|
|
|
|
|
+ .projectManagement_template{
|
|
|
|
|
+ .nav_top{
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ width:100%;
|
|
|
|
|
+ height:3.3rem;line-height: 3.3rem;
|
|
|
|
|
+ background:rgba(255,255,255,1);
|
|
|
|
|
+ border:0.1rem solid rgba(240,240,240,1);
|
|
|
|
|
+ .left_title{
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ img{
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ // width: 1.2rem;
|
|
|
|
|
+ height: 1rem;
|
|
|
|
|
+ margin: 0 0.6rem;
|
|
|
|
|
+ }
|
|
|
|
|
+ .span{
|
|
|
|
|
+ font-size:1rem;
|
|
|
|
|
+ font-family:HiraginoSansGB-W3,HiraginoSansGB;
|
|
|
|
|
+ font-weight:normal;
|
|
|
|
|
+ color:rgba(101,112,133,1);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .right_operation{
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ padding-right: 1.6rem;
|
|
|
|
|
+ .el-dropdown{
|
|
|
|
|
+ width: 10rem;
|
|
|
|
|
+ height: 2rem;line-height: 2rem;
|
|
|
|
|
+ background:rgba(246,248,250,1);
|
|
|
|
|
+ border-radius: 0.2rem;
|
|
|
|
|
+ margin-right: 0.8rem;
|
|
|
|
|
+ .el-dropdown-link{
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ padding: 0 0.8rem;
|
|
|
|
|
+ font-size:1rem;
|
|
|
|
|
+ font-family:PingFang-SC-Medium,PingFang-SC;
|
|
|
|
|
+ font-weight:500;
|
|
|
|
|
+ color:rgba(101,112,133,1);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .el-input{
|
|
|
|
|
+ width: 16.5rem;
|
|
|
|
|
+ height: 2rem;line-height: 2rem;
|
|
|
|
|
+ .el-input__inner{
|
|
|
|
|
+ height: 2rem;line-height: 2rem;
|
|
|
|
|
+ background:rgba(246,248,250,1);
|
|
|
|
|
+ border: none;
|
|
|
|
|
+ }
|
|
|
|
|
+ .el-input__icon{
|
|
|
|
|
+ width: 1.8rem;
|
|
|
|
|
+ height: 2rem;line-height: 2rem;
|
|
|
|
|
+ border-top-right-radius: 0.2rem;
|
|
|
|
|
+ border-bottom-right-radius: 0.2rem;
|
|
|
|
|
+ background:#FC8440;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ font-size: 1rem;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .btn{
|
|
|
|
|
+ margin-left: 0.6rem;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ padding: 0.5rem 1rem;
|
|
|
|
|
+ height:1.8rem;
|
|
|
|
|
+ background:rgba(255,255,255,1);
|
|
|
|
|
+ border-radius:0.2rem 0.1rem 0.1rem 0.2rem;
|
|
|
|
|
+ border:0.1rem solid rgba(240,240,240,1);
|
|
|
|
|
+ img{
|
|
|
|
|
+ height: 1.2rem;
|
|
|
|
|
+ margin-right: 0.5rem;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .projectManagement_main{
|
|
|
|
|
+ background:rgba(246,248,250,1);
|
|
|
|
|
+ padding: 0.8rem 1.5rem 1.5rem;
|
|
|
|
|
+ .main_top{
|
|
|
|
|
+ margin-top: 0.8rem;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ .main_top_left{
|
|
|
|
|
+ width:82.5rem;
|
|
|
|
|
+ height:11.6rem;
|
|
|
|
|
+ padding: 0rem 0 0 19rem;
|
|
|
|
|
+ background:linear-gradient(134deg,rgba(252,169,64,1) 0%,rgba(252,132,64,1) 100%);
|
|
|
|
|
+ border-radius:0.3rem;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ .main_top_left_left{
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ .title{
|
|
|
|
|
+ margin-top: 1.8rem;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ height: 1.6rem;
|
|
|
|
|
+ .l_text{
|
|
|
|
|
+ .span1{
|
|
|
|
|
+ font-size:1.33rem;
|
|
|
|
|
+ font-family:PingFangSC-Medium,PingFang SC;
|
|
|
|
|
+ font-weight:500;
|
|
|
|
|
+ color:rgba(255,255,255,1);
|
|
|
|
|
+ }
|
|
|
|
|
+ .span2{
|
|
|
|
|
+ font-size:1rem;
|
|
|
|
|
+ font-family:PingFangSC-Regular,PingFang SC;
|
|
|
|
|
+ font-weight:400;
|
|
|
|
|
+ color:rgba(255,255,255,1);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .r_btn{
|
|
|
|
|
+ margin-right: 3rem;
|
|
|
|
|
+ width:1.6rem;
|
|
|
|
|
+ height:1.6rem;line-height: 1.6rem;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ background:rgba(255,255,255,0.1);
|
|
|
|
|
+ border-radius:0.2rem;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ i{
|
|
|
|
|
+ font-size: 1rem;
|
|
|
|
|
+ color:rgba(255, 255, 255, 0.8);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .p{
|
|
|
|
|
+ margin-top: 0.6rem;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ i{
|
|
|
|
|
+ font-size: 1rem;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ }
|
|
|
|
|
+ span{
|
|
|
|
|
+ margin-left: 0.3rem;
|
|
|
|
|
+ font-size:1rem;
|
|
|
|
|
+ font-family:PingFangSC-Medium,PingFang SC;
|
|
|
|
|
+ font-weight:500;
|
|
|
|
|
+ color:rgba(255,255,255,0.6);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .data_bpx{
|
|
|
|
|
+ margin-top: 1.2rem;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ height:3.8rem;
|
|
|
|
|
+ border:0.05rem solid rgba(253,195,148,1);
|
|
|
|
|
+ margin-right: 3rem;
|
|
|
|
|
+ .li{
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ text-align:center;
|
|
|
|
|
+ border-right:0.05rem solid rgba(253,195,148,1);;
|
|
|
|
|
+ .p1{
|
|
|
|
|
+ margin-top: 0.5rem;
|
|
|
|
|
+ font-size:1.3rem;
|
|
|
|
|
+ font-family:PingFangSC-Regular,PingFang SC;
|
|
|
|
|
+ font-weight:400;
|
|
|
|
|
+ color:rgba(255,255,255,1);
|
|
|
|
|
+ .span2{
|
|
|
|
|
+ margin-left: 0.3rem;
|
|
|
|
|
+ font-size:1rem;
|
|
|
|
|
+ font-family:PingFangSC-Regular,PingFang SC;
|
|
|
|
|
+ font-weight:400;
|
|
|
|
|
+ color:rgba(255,255,255,0.5);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .p2{
|
|
|
|
|
+ font-size:1rem;
|
|
|
|
|
+ font-family:PingFangSC-Regular,PingFang SC;
|
|
|
|
|
+ font-weight:400;
|
|
|
|
|
+ color:rgba(255,255,255,0.7);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .main_top_left_right{
|
|
|
|
|
+ width: 18.8rem;
|
|
|
|
|
+ border-left: 0.1rem dotted #fff;
|
|
|
|
|
+ padding-top: 0.8rem;
|
|
|
|
|
+ padding-left: 0.6rem;
|
|
|
|
|
+ .box{
|
|
|
|
|
+ margin-bottom: 0.6rem;
|
|
|
|
|
+ .p1{
|
|
|
|
|
+ font-size:1rem;
|
|
|
|
|
+ font-family:PingFangSC-Regular,PingFang SC;
|
|
|
|
|
+ font-weight:400;
|
|
|
|
|
+ color:rgba(255,255,255,1);
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ i{
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ top: 0.3rem;
|
|
|
|
|
+ left: -1rem;
|
|
|
|
|
+ width:0.5rem;
|
|
|
|
|
+ height:0.5rem;
|
|
|
|
|
+ background:rgba(252,134,64,1);
|
|
|
|
|
+ border:0.1rem solid rgba(255,201,54,1);
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .p2{
|
|
|
|
|
+ margin-top: 0.2rem;
|
|
|
|
|
+ font-size:1rem;
|
|
|
|
|
+ font-family:PingFangSC-Regular,PingFang SC;
|
|
|
|
|
+ font-weight:400;
|
|
|
|
|
+ color:rgba(255,255,255,0.6);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|
XAWDJ0277HWXPT2\Administrator
