创新实训——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
      }
}