控制台样式

src/css/console.less

@@ -1,20 +1,23 @@
+@import './reset.less';
+
 body.console {
   overflow: auto;
+  background: @activeBg;
 }
 .echarts {
   width: 100%;
-  height: 300px;
+  height: 292px;
   padding: 0 15px;
 }
 .barChartPay {
   width: 100%;
-  height: 300px;
+  height: 261px;
 }
 .emptyCircle {
   width: 35%;
-  height: 200px;
+  height: 135px;
   float: left;
-  margin-top: 32px;
+  margin-top: 38px;
 }
 #emptyCircleB {
   margin-top: 50px;
@@ -25,8 +28,9 @@ body.console {
 .partWrap {
   // overflow: auto;
   height: auto;
-  background: #f5f5f5;
+  background: @activeBg;
   min-width: 1185px;
+  padding: 10px;
   ul {
     padding: 0 40px;
   }
@@ -68,9 +72,10 @@ body.console {
   .title {
     font-size: 16px;
     font-weight: bold;
-    border-bottom: 1px solid #E2E5EF;
-    height: 36px;
-    line-height: 36px;
+    color: @themeFontClr;
+    border-bottom: 1px solid @themeBorderClr;
+    height: 40px;
+    line-height: 40px;
     padding-left: 15px;
     cursor: pointer;
   }
@@ -81,7 +86,7 @@ body.console {
 }
 .grayLine {
   height: 10px;
-  background-color: #f5f5f5;
+  background-color: @activeBg;
 }
 .partTitleT {
   height: 44px;
@@ -92,7 +97,7 @@ body.console {
   right: 0;
   width: 100%;
   box-sizing: border-box;
-  background-color: #fff;
+  background-color: @themeColor;
   z-index: 20;
   height: 44px;
   line-height: 44px;
@@ -104,20 +109,22 @@ body.console {
   p {
     display: inline-block;
     font-size: 16px;
+    color: @themeFontClr;
     span {
       font-size: 16px;
+      color: #fff;
     }
   }
   .dateDetail {
     font-size: 12px;
-    color: #777777;
+    color: @themeFontClr;
     margin-right: 30px;
     font-weight: normal;
   }
   .monthYear {
     float: right;
     margin-right: 20px;
-    border: 1px solid #5A8EEE;
+    border: 1px solid #00A1FF;
     height: 28px;
     line-height: 28px;
     border-radius: 4px;
@@ -133,11 +140,11 @@ body.console {
       font-weight: normal;
     }
     .year {
-      background-color: #5A8EEE;
+      background-color: #00A1FF;
       color: #fff;
     }
     .mon {
-      color: #5A8EEE;
+      color: @themeFontClr;
     }
   }
 }
@@ -150,39 +157,40 @@ body.console {
 .pubEchart {
   width: 100%;
   display: inline-block;
-  margin-bottom: 10px;
-  background-color: #fff;
-  border-top: 10px solid #f5f5f5;
+  /*margin-bottom: 10px;*/
+  background-color: @themeColor;
+  border-top: 10px solid @activeBg;
 }
 .pubEchartB {
   width: 55%;
   display: inline-block;
   margin-bottom: 10px;
   background-color: #fff;
-  border-top: 10px solid #f5f5f5;
-  border-left: 10px solid #f5f5f5;
+  border-top: 10px solid @activeBg;
+  border-left: 10px solid @activeBg;
   box-sizing: border-box;
 }
 .paymoney {
   box-sizing: border-box;
   position: relative;
+  background: @themeColor;
 }
 .dept {
   box-sizing: border-box;
 }
 .circle {
-  height: 304px;
+  height: 256px;
   width: 100%;
   display: inline-block;
-  background-color: #fff;
   box-sizing: border-box;
   position: relative;
+  background: @themeColor;
 }
 .circleB {
-  height: 350px;
+  height: 258px;
   width: 45%;
   display: inline-block;
-  background-color: #fff;
+  background-color: @themeColor;
   box-sizing: border-box;
   position: relative;
 }
@@ -198,14 +206,14 @@ body.console {
   right: 0;
   padding-right: 30px;
   box-sizing: border-box;
-  max-height: 250px;
-  overflow: auto;
+  max-height: 180px;
+  overflow: hidden;
   table {
     width: 100%;
   }
   .explainLi {
-    height: 30px;
-    line-height: 30px;
+    height: 26px;
+    line-height: 26px;
     span {
       display: inline-block;
     }
@@ -224,13 +232,14 @@ body.console {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        color: @themeFontClr;
       }
       .smp {
         width: 100px;
       }
     }
     .deptNum {
-      color: #333;
+      color: @themeFontClr;
       font-size: 16px;
       font-weight: bold;
       padding-right: 10px;
@@ -238,7 +247,7 @@ body.console {
       text-align: right;
     }
     .percent {
-      color: #777;
+      color: @themeFontClr;
       width: 40px;
     }
   }
@@ -247,15 +256,17 @@ body.console {
 
 .part01 {
   width: 28%;
-  background-color: #fff;
-  border-right: 10px solid #f5f5f5;
+  background-color: @themeColor;
+  border-right: 10px solid @activeBg;
   box-sizing: border-box;
   ul {
-    padding: 40px 20px;
-    border-bottom: 10px solid #f5f5f5;
+    padding: 28px 20px;
+    border-bottom: 10px solid @activeBg;
+    /*background: @themeColor;*/
     li {
       float: left;
       width: 33.33%;
+      color: #fff;
       border-left: 3px solid #F2637B;
       height: 72px;
       box-sizing: border-box;
@@ -270,49 +281,56 @@ body.console {
   }
   
   .defect {
-    background-color: #fff;
-    height: 452px;
+    /*background-color: @themeColor;*/
+    height: 385px;
     overflow: hidden;
     .list {
-      padding: 15px 5px;
+      padding: 13px 5px;
       width: 100%;
       box-sizing: border-box;
       overflow-y: auto;
       overflow-x: hidden;
       height: 405px;
     }
-    .thead {
+    /*.thead {
       td {
         color: #51649C;
       }
-    }
+    }*/
     .qtable {
       width: 100%;
       overflow: auto;
+      .thead{
+        background: #142753;
+      }
     }
     td {
-      padding: 7px 10px;
+      padding: 8px 10px;
+      color: @themeFontClr;
       i {
         width: 17px;
         height: 17px;
         line-height: 17px;
         border-radius: 8px;
-        background-color: #999;
+        background-color: #526186;
         color: #fff;
         display: inline-block;
         text-align: center;
         font-size: 12px;
       }
     }
-    tr {
-      border-bottom: 1px solid #f5f5f5;
-      box-sizing: border-box;
+    tr:nth-child(2n+1) {
+      background: #283B69;
+      /*border-bottom: 1px solid @activeBg;
+      box-sizing: border-box;*/
     }
     .td01 {
       min-width: 30px;
+      text-align: center;
     }
     .td02name {
       min-width: 113px;
+      color: @themeFontClr;
     }
     .td02 {
     }
@@ -325,12 +343,12 @@ body.console {
   }
 }
 .part02{
-  border-right: 10px solid #f5f5f5;
+  border-right: 10px solid @activeBg;
   box-sizing: border-box;
   width: 39%;
-  background-color: #fff;
+  background-color: @themeColor;
   .bingli {
-    padding: 20px;
+    padding: 10px 20px;
     li {
       float: left;
       width: 23%;
@@ -338,17 +356,19 @@ body.console {
     }
     .fst {
       // border-right: 1px solid #E2E5EF;
+      border-right: 1px solid @themeBorderClr;
       box-sizing: border-box;
       width: 30%;
     }
   }
   .bingliLis {
-    border-top: 1px solid #E2E5EF;
-    padding: 20px 30px;
-    height: 197px;
+    border-top: 1px solid @themeBorderClr;
+    padding: 15px 30px;
+    height: 168px;
     box-sizing: border-box;
     p {
       text-align: center;
+      color: @themeFontClr;
       font-weight: bold;
       font-size: 16px;
       padding-bottom: 5px;
@@ -356,22 +376,23 @@ body.console {
   }
   .panPartPub {
     width: 33.33%;
-    height: 130px;
+    height: 110px;
     float: left;
     position: relative;
     p {
       text-align: center;
       font-size: 12px;
+      color: @themeFontClr;
       font-weight: normal;
-      width: 100px;
+      width: 78px;
       position: absolute;
       bottom: 0;
       left: 50%;
       margin-left: -50px;
     }
     .fen {
-      width: 100px;
-      height: 100px;
+      width: 78px;
+      height: 78px;
       position: absolute;
       left: 50%;
       margin-left: -50px;
@@ -385,31 +406,37 @@ body.console {
   .barChartLine {
     box-sizing: border-box;
     width: 100%;
-    height: 300px;
+    height: 257px;
   }
   .barChartLineBox {
-    border-bottom: 10px solid #f5f5f5;
+    border-bottom: 10px solid @activeBg;
     // width: 100%;
     padding-left: 15px;
+    background: @themeColor;
   }
 }
 
 .partTitlePub {
-  height: 44px;
-  line-height: 44px;
+  height: 40px;
+  line-height: 40px;
   padding: 0 15px;
   box-sizing: border-box;
-  border-bottom: 1px solid #E2E5EF;
+  background: @themeColor;
+  border-bottom: 1px solid @themeBorderClr;
   font-weight: bold;
+  color:@themeFontClr;
   font-size: 16px;
   cursor: pointer;
+  span{
+    color: @themeFontClr;
+  }
   .name {
     float: left;
     font-size: 16px;
   }
   .personNum {
     float: right;
-    color: #51649C;
+    color: @themeFontClr;
   }
 }
 
@@ -419,9 +446,11 @@ body.console {
   height: 36px;
   line-height: 40px;
   font-weight: bold;
+  color: @themeFontClr;
 }
 .explainNum {
   margin-top: 8px;
+  color: @themeFontClr;
 }
 
 .toggleSlide {
@@ -439,6 +468,9 @@ body.console {
     position: relative;
     font-size: 14px;
     border-radius: 4px;
+    span{
+      color: @themeFontClr;
+    }
     img {
       width: 10px;
       position: absolute;

src/css/reset.less

@@ -94,6 +94,9 @@ textarea {
 @headerHt:50px;   /*logo栏高度*/
 @menuLiHt:40px;   /*菜单项高度*/
 @menuWt:205px;   /*菜单宽度*/
+@themeColor:#203463;    //主题背景色
+@themeFontClr:#fff;   //主题字体色
+@themeBorderClr:#4A5D8E;    //主题边框色
 @activeColor:#00A1FF;   /*菜单项选中颜色*/
 @activeBg:#142753;   /*菜单项选中背景*/
 @borderColor:#E2E5EF; /**边框颜色**/

src/html/console.html

@@ -17,7 +17,7 @@
     </div>
   </div>
   <div class="partTitleT"></div>
-  <div class="grayLine"></div>
+  <!--<div class="grayLine"></div>-->
   <div class="partWrap clearfix">
 
       <div class="part01 fl">
@@ -124,7 +124,7 @@
         
         <div class="pubEchartB paymoney">
           <p class="title">各科室质控平均分柱状图</p>
-          <div id="barChartPay" class="barChartPay"></div>
+          <div id="barChartPay" class="barChartPay" style="height: 217px;"></div>
         </div>
       </div>
 

src/js/console.js

@@ -96,22 +96,22 @@ function resizeBox(){
 function dateChange(){
     $(".monthYear .mon").click(function(){
         $(this).css({
-            backgroundColor:'#5A8EEE',
+            backgroundColor:'#00A1FF',
             color:'#fff'
         }).siblings().css({
-            color:'#5A8EEE',
-            backgroundColor:'#fff'
+            color:'#fff',
+            backgroundColor:'#203463'
         })
         dateType = 1
         getBarData(1)
     })
     $(".monthYear .year").click(function(){
         $(this).css({
-            backgroundColor:'#5A8EEE',
+            backgroundColor:'#00A1FF',
             color:'#fff'
         }).siblings().css({
-            color:'#5A8EEE',
-            backgroundColor:'#fff'
+            color:'#fff',
+            backgroundColor:'#203463'
         })
         dateType = 2
         getBarData(2)
@@ -305,7 +305,8 @@ function getBarData(type){
         }).then((res)=>{
             let data = res.data;
             if(data.code == 0){
-                let result1 = data.data['各模块缺陷占比排行']||[]
+                let result1 = data.data['各模块缺陷占比排行']||[];
+                result1.length>8?result1.length=8:"";
                 queList(result1)
             }
         })
@@ -396,7 +397,7 @@ function part02pan(data,dom){
     let color = ['#37CBCB','#dedede'];
     let echartData = data;
     option = {
-        backgroundColor: bgColor,
+        //backgroundColor: bgColor,
         color: color,
         title: [{
             text:'{val|' + echartData[0].percentStr + '}',
@@ -406,7 +407,7 @@ function part02pan(data,dom){
                 rich: {
                     val: {
                         fontSize: 14,
-                        color: '#333',
+                        color: '#fff',
                         fontWeight: 'bold',
                         padding: [10, 0]
                     },
@@ -461,7 +462,7 @@ function lineChart(dataX,dataY){
             left: 0,
             textStyle: {
                 fontSize: 14,
-                color:'#666666',
+                color:'#fff',
                 fontWeight: 400
             }
         }],
@@ -503,7 +504,7 @@ function lineChart(dataX,dataY){
             },
             axisLine: {//x轴
                 lineStyle:{
-                    color:'#AAAAAA'
+                    color:'#fff'
                 }
             }
         },
@@ -512,7 +513,7 @@ function lineChart(dataX,dataY){
             axisLabel: {
                 formatter: '{value} %',
                 textStyle: {
-                    color: '#333333'
+                    color: '#fff'
                 }
             },
             
@@ -569,7 +570,7 @@ function lineChartSpecial(dataX,dataY){
                 },
                 axisLabel: {//x轴刻度
                     textStyle: {
-                        color: '#333'
+                        color: '#fff'
                     },
                     rotate:45,
                     formatter: function (value) {
@@ -582,7 +583,7 @@ function lineChartSpecial(dataX,dataY){
                 },
                 axisLine: {//x轴
                     lineStyle:{
-                        color:'#AAAAAA'
+                        color:'#fff'
                     }
                 }
             }
@@ -598,12 +599,12 @@ function lineChartSpecial(dataX,dataY){
                 },
                 axisLabel: {//y轴刻度
                     textStyle: {
-                        color: '#333333'
+                        color: '#fff'
                     }
                 },
                 splitLine:{//分割线
                     lineStyle:{
-                        color:'#EFF3FC'
+                        color:'#4A5D8E'
                     }
                 }
             }
@@ -615,7 +616,7 @@ function lineChartSpecial(dataX,dataY){
             left: 10,
             textStyle: {
                 fontSize: 14,
-                color:'#666666',
+                color:'#fff',
                 fontWeight: 400
             }
         }],
@@ -661,7 +662,7 @@ function barChartPay(dataX,dataY){
                 },
                 axisLabel: {//x轴刻度
                     textStyle: {
-                        color: '#333'
+                        color: '#fff'
                     },
                     rotate:45,
                     formatter: function (value) {
@@ -690,12 +691,12 @@ function barChartPay(dataX,dataY){
                 },
                 axisLabel: {//y轴刻度
                     textStyle: {
-                        color: '#333333'
+                        color: '#fff'
                     }
                 },
                 splitLine:{//分割线
                     lineStyle:{
-                        color:'#EFF3FC'
+                        color:'#4A5D8E'
                     }
                 }
             }
@@ -707,7 +708,7 @@ function barChartPay(dataX,dataY){
             left: 10,
             textStyle: {
                 fontSize: 14,
-                color:'#666666',
+                color:'#fff',
                 fontWeight: 400
             }
         }],
@@ -840,7 +841,7 @@ function barChart(data,type){
             left: 10,
             textStyle: {
                 fontSize: 14,
-                color:'#666666',
+                color:'#fff',
                 fontWeight: 400
             }
         }],
@@ -850,6 +851,9 @@ function barChart(data,type){
             right:15,
             top:15,
             selectedMode:false,
+            textStyle:{
+                color:'#fff'
+            },
             formatter: function (name) {
                 return name;
             }
@@ -874,7 +878,7 @@ function barChart(data,type){
                 data:  dataX,
                 axisLabel: {//x轴刻度
                     textStyle: {
-                        color: '#333'
+                        color: '#fff'
                     },
                     rotate:'45',
                     formatter: function (value) {
@@ -887,7 +891,7 @@ function barChart(data,type){
                 },
                 axisLine: {//x轴
                     lineStyle:{
-                        color:'#AAAAAA'
+                        color:'#4A5D8E'
                     }
                 },
             }
@@ -901,9 +905,14 @@ function barChart(data,type){
                 axisTick: {
                     show: false
                 },
+                axisLabel: {//y轴刻度
+                  textStyle: {
+                    color: '#fff'
+                  }
+                },
                 splitLine:{//分割线
                     lineStyle:{
-                        color:'#EFF3FC'
+                        color:'#4A5D8E'
                     }
                 }
             }
@@ -942,7 +951,7 @@ function emptyCircle(data){
     $(window).resize(function(){
         myChart.resize()
     });
-    let bgColor = '#fff';
+    let bgColor = '#203463';
     let title = '总量';
     let color = ['#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336','#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336'];
     let echartData = data;
@@ -951,7 +960,7 @@ function emptyCircle(data){
         total += echartData[i].num
     }
     option = {
-        backgroundColor: bgColor,
+        /*backgroundColor: bgColor,*/
         color: color,
         title: [{
             text: data.length>0?'{val|' + total + '}\n{name|' + title + '}':'',
@@ -961,14 +970,14 @@ function emptyCircle(data){
                 rich: {
                     val: {
                         fontSize: 24,
-                        color: '#333',
+                        color: '#fff',
                         fontWeight: 'bold',
                         padding: [10, 0]
                     },
                     name: {
                         fontSize: 12,
                         fontWeight: 'normal',
-                        color: '#777',
+                        color: '#fff',
                     }
                 }
             }
@@ -1036,7 +1045,7 @@ function emptyCircleB(data){
     $(window).resize(function(){
         myChart.resize()
     });
-    let bgColor = '#fff';
+    let bgColor = '#203463';
     let title = '总量';
     let color = ['#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336','#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336'];
     let echartData = data;
@@ -1045,7 +1054,7 @@ function emptyCircleB(data){
         total += echartData[i].num
     }
     option = {
-        backgroundColor: bgColor,
+        /*backgroundColor: bgColor,*/
         color: color,
         title: [{
             text: data.length>0?'{val|' + total + '}\n{name|' + title + '}':'',
@@ -1055,14 +1064,14 @@ function emptyCircleB(data){
                 rich: {
                     val: {
                         fontSize: 24,
-                        color: '#333',
+                        color: '#fff',
                         fontWeight: 'bold',
                         padding: [10, 0]
                     },
                     name: {
                         fontSize: 12,
                         fontWeight: 'normal',
-                        color: '#777',
+                        color: '#fff',
                     }
                 }
             }
@@ -1138,7 +1147,7 @@ function queList(data){
     for(let i = 0;i < data.length;i++){
         strAll += `
             <tr>
-                <td style="text-align:center;"><i style="background:${i < 3?'#bea571':'#eff3fc'};color:${i < 3?'#fff':'#999'};">${i+1}</i></td>
+                <td style="text-align:center;"><i style="background:${i < 3?'#ECB22E':'#526186'};color:${i < 3?'#fff':'#B7BDCC'};">${i+1}</i></td>
                 <td><p class="td02name">${data[i].name}</p></td>
                 <td>${data[i].num}</td>
                 <td>${data[i].percentStr}</td>

src/js/index.js

@@ -43,8 +43,12 @@ function initMenu(data,userInfo){
   $("#miniMenuTmpl").tmpl(data).appendTo(".menu-mini ul");
   //用户数据填充
   $("#userName").text(userInfo.linkman);
+  //初始菜单选中
+  $(".menu .page").eq(0).addClass("active");
+  if($(".menu .page").eq(0).is(".YH-KZT")){
+    $(".container").addClass("console-cont");
+  }
   //菜单收起展开
-  $(".menu .page").eq(0).addClass("active")
   $(".list-1").on("click",function(){
     // $(".list-1 .slide-up").removeClass('slide-up');
     // $(this).toggleClass('slide-up');
@@ -86,7 +90,7 @@ function initMenu(data,userInfo){
       url += `?doctorName=${userInfo.linkman}`
     }
     if(code === 'YH-KZT'){
-      $("#mainBox").addClass("console-cont");
+      $(".container").addClass("console-cont");
     }
     $("#contentIframe").attr("src",url);
   });