創新實訓——010

本篇介紹頁面的樣式設計。

顏色

1、頁面的整體我選用偏黑色的灰色（#1e1e1e），可以在每一頁的style中添加
body{ background-color: #1e1e1e; }
2、字體顏色我選用和背景色對比鮮明的偏白色（#fff），可以在每一個有字顯示的標籤裏添加style='color:#fff'
3、這裏重點說明element-ui中的展開行裏面的顏色如何更改
展開行的樣式如下所示：

想要把表格和頁面顏色統一需要做如下操作：

<el-table
   :data="tableData"
   :header-cell-style="{background:'#1e1e1e',color:'#fff'}"
   :header-row-style="{background:'#1e1e1e',color:'#fff'}"
   :row-style="{background:'#1e1e1e',color:'#fff'}"
   :cell-style="{background:'#1e1e1e',color:'#fff'}"
   style="width: 100%">
   <el-table-column type="expand">
     <template slot-scope="props">
       <el-form label-position="left" inline class="demo-table-expand" style="color:#fff">
         <el-form-item label="日誌ID">
           <span>{{ props.row.id }}</span>
         </el-form-item>
         ……此處省略
       </el-form>
     </template>
   </el-table-column>
   <el-table-column
     label="日誌ID"
     prop="id"
     width="100">
   </el-table-column>
   <el-table-column
     label="訪問IP"
     prop="ip">
   </el-table-column>
   <el-table-column
     label="是否異常"
     prop="result"
     width="100">
   </el-table-column>
</el-table>
.el-table{
   background:#1e1e1e;
}
.el-table::before {
   height: 0px;
}
.el-table__expanded-cell{
   background: #1e1e1e;
}
.el-table th, .el-table tr {
   background-color: #1e1e1e;
}

效果如下所示：

表格以此類推。
另外展開表裏的樣式可以在<style>中如下設置：

.demo-table-expand {
   font-size: 0;
 }
 .demo-table-expand label {
   width: 90px;
   color: #99a9bf;
 }
 .demo-table-expand .el-form-item {
   margin-right: 0;
   margin-bottom: 0;
   width: 100%;
 }

佈局設計

佈局我這裏採用了element-ui的佈局方案，整體遵循左邊顯示圖表數據，右邊顯示詳細日誌信息的原則，採用柵欄佈局，示例如下圖所示：

<el-row :gutter="15">
      <!--graphForFirst和logFlush均爲自定義組件-->
      <el-col :span="12"><graphForFirst></graphForFirst></el-col>
      <el-col :span="12"><logFlush/></el-col>
</el-row>

效果如下圖所示：

滾動條

這裏我需要重點強調以下滾動條的配置，因爲這個困擾了我好長時間。
我們知道頁面的原滾動條是這樣的：

這與我們設計頁面不搭，顯得過於突兀，而像現在正在寫博客的CSDN的markdown編輯器的滾動條樣式就非常好看，而element-ui的樣式也非常好，舉例如下：

<el-col :span="14">
            <div style="height:630px">
                <el-scrollbar style="height:100%" ref="elScrollBar">
                    <div>
                        <自定義組件>
                    </div>
                </el-scrollbar>
            </div>
</el-col>
<style>
.el-scrollbar__wrap {
    overflow-x: hidden;/*隱藏橫向滾動軸*/
 }
</style>

效果如下所示：

實時日誌流前端實現

相比於其他組件的前端設計，實時日誌流的顯示比較棘手。
這裏我的做法是在redis裏存儲最新的一次日誌，然後前後端通過websocket不斷返回該值，並且判斷該值是否和上一值是否相等，如果相等則不添加到前端頁面，不相等則添加到dom中，如下所示：

mounted(){
      var namespace = '/theLogFlush';
      //this.socket = io.connect(location.protocol + '//' + document.domain + ':5000'  + namespace);
      this.socket = io.connect(location.protocol + '//localhost:5000'  + namespace);
      var that=this
      this.socket.on('theLogFlush', function(res) {
        console.log(res.data);
        if(that.msg!=res.data){
          that.msg=res.data
          document.getElementById('log').innerText+=res.data
          document.getElementById('log').innerHTML+='<br/>'
          that.updateScroll()
        }
      });
 }

效果如下：

並且在日誌流不斷添加的過程中我們要保證滾動條是跟隨滾動的，可以這樣做：

<el-scrollbar style="height:100%" ref="elScrollBar">
        <div>
            <h5 id="log" style="color:green">實時訪問日誌……<br></h5>
        </div>
</el-scrollbar>
methods:{
      //使滾動條時時跟上
      updateScroll(){
          this.$refs['elScrollBar'].wrap.scrollTop = this.$refs['elScrollBar'].wrap.scrollHeight
      }
}