新增页面以及样式修改

src/assets/css/app.scss

@@ -9,7 +9,7 @@
     margin: 0 auto;
     width: 1180px;
     min-height: 968px;
-   
+
 }
 input:-ms-input-placeholder, textarea:-ms-input-placeholder {
     color: #999 !important;
@@ -36,11 +36,13 @@ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fiel
 body {
     position: relative;
     outline: 0;
-    background-color: #F5F5F5 !important;
+    background-color: #022B7D !important;
     line-height: 1 !important;
     // min-width: 1180px;
-    background: url(../stor/bg1.png) no-repeat center;
-    background-size: 100% 100%;
+    background-image: url(../stor/bg1.png);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
 }
 h1, h2, h3, h4, h5, h6 {
     font-weight: 400;
@@ -596,3 +598,27 @@ p.error {
         white-space:normal;
     }
 }
+.configuration-title {
+    color: #fff;
+    font-size: 18px;
+    font-weight: 600;
+    padding: 20px 0 15px 0;
+    border-bottom: 1px solid #000;
+}
+.configuration-btn-right {
+    text-align: right;
+    padding: 15px 0;
+}
+.configuration-text{
+    color: #e2e1e1;
+    font-size: 13px;
+    line-height: 18px;
+    margin-top: 15px;
+}
+.configuration-table {
+    margin-top: 30px;
+}
+.configuration-subtitle {
+    color: #fff;
+    margin: 20px 0;
+}

src/assets/css/iview_style_reset.scss

@@ -1,7 +1,7 @@
 // 对iview组件样式重写
 
 /* --- Select --- */
-// 
+//
 .formLogin > .ivu-form-item > .ivu-form-item-label{
   color:#fff;
 }
@@ -9,7 +9,6 @@
   content: '';
 }
 
-
 .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu {
     height: inherit;
     line-height: inherit;
@@ -63,9 +62,10 @@
     background-size: 100%;
 }
 
-
-.ivu-select-dropdown{
-    background: #1873FF;
+.menu-contente{
+    .ivu-select-dropdown{
+        background: #1873FF;
+    }
 }
 
 .ivu-select-dropdown li.ivu-menu-item-active:after{
@@ -87,7 +87,49 @@
 // .ivu-menu-item-selected{
 //     color: #fff;
 // }
-
+.ivu-btn-primary{
+    background-color: #1873FF;
+    border-color: #1873FF;
+    &:hover {
+        background-color: #0364F7;
+        border-color: #0364F7;
+    }
+}
+.configuration-table {
+    .ivu-table-header thead tr th {
+        padding: 18px 0;
+    }
+    .ivu-table-cell {
+        color: #fff;
+    }
+    .ivu-table {
+        background-color: transparent;
+        th, td {
+            background-color: transparent;
+            border-bottom: 1px solid #ccc;
+        }
+        &:before {
+            background-color: #ccc;
+        }
+    }
+    .ivu-table-small td {
+        height: auto;
+        padding: 18px 0;
+    }
+    .ivu-table-body {
+        table {
+            border-bottom: 1px solid #ccc;
+        }
+    }
+}
+.dns {
+    .ivu-form-item-label{
+        color: #fff;
+    }
+}
+.ivu-form-item-content {
+    color: #fff;
+}
 
 
 

src/components/menu.vue

@@ -1,137 +1,137 @@
 <template>
-  <div class="menu-contente">
-   <Menu  mode="horizontal" active-name="总览">
+    <div class="menu-contente">
+        <Menu mode="horizontal" active-name="总览">
 
-          <template v-for='(item, index) in menuList'>
-            <template v-if='!!!item.children'>
-              <MenuItem :name="item.name" :to='item.link'>
-                {{item.name}}
-              </MenuItem>
-            </template>
-            <template v-else>
-               <Submenu :name="item.name">
-                <template slot="title">
-                    {{item.name}}
+            <template v-for='(item, index) in menuList'>
+                <template v-if='!!!item.children'>
+                    <MenuItem :name="item.name" :to='item.link'>
+                        {{item.name}}
+                    </MenuItem>
                 </template>
-                <template v-for='i in item.children'>
-                  <MenuItem :to='i.link'  :name="i.name">{{i.name}}</MenuItem>
+                <template v-else>
+                    <Submenu :name="item.name">
+                        <template slot="title">
+                            {{item.name}}
+                        </template>
+                        <template v-for='i in item.children'>
+                            <MenuItem :to='i.link' :name="i.name + index">{{i.name}}</MenuItem>
+                        </template>
+                    </Submenu>
                 </template>
-              </Submenu>
             </template>
-          </template>
-           
-           
+
+
         </Menu>
-  </div>
+    </div>
 </template>
 
 <script>
-export default {
-  name: 'allmenu',
-  data(){
-    return {
-      theme:'',
-        menuList:[
-          {
-            name:"总览",
-            link:'dashbord',
-            isDisabel: false
-          },
-          {
-            name:"风扇控制",
-            link:'fan',
-            isDisabel: false
-          },
-          {
-            name:"FRU信息",
-            link:'fru_info',
-            isDisabel: false
-          },
-          {
-            name:"健康",
-            link:'index/',
-            isDisabel: false,
-            children:[
-              {name:"传感器读值", isDisabel: false},
-              {name:"事件日志", isDisabel: false},
-              {name:"系统日志", isDisabel: false},
-              {name:"BSOD屏幕", isDisabel: false},
-            ]
-          },
-           {
-            name:"配置",
-            link:'index/',
-            isDisabel: false,
-            children:[
-              {name:"Active Directory", link:'index/', isDisabel: false},
-              {name:"DNS", link:'index/', isDisabel: false},
-              {name:"事件日志", link:'index/', isDisabel: false},
-              {name:"Images重定向", link:'index/', isDisabel: false},
-              {name:"LDAP/E-Directory", link:'index/', isDisabel: false},
-              {name:"证书", link:'index/', isDisabel: false},
-              {name:"鼠标的模式", link:'index/', isDisabel: false},
-              {name:"NCSI", link:'index/', isDisabel: false},
-              {name:"网络", link:'index/', isDisabel: false},
-              {name:"网络绑定", link:'index/', isDisabel: false},
-              {name:"网络连接", link:'index/', isDisabel: false},
-              {name:"NTP", link:'index/', isDisabel: false},
-              {name:"PAM 指令", link:'index/', isDisabel: false},
-              {name:"PEF", link:'index/', isDisabel: false},
-              {name:"RADIUS", link:'index/', isDisabel: false},
-              {name:"远程会话", link:'index/', isDisabel: false},
-              {name:"服务", link:'index/', isDisabel: false},
-              {name:"SMTP", link:'index/', isDisabel: false},
-              {name:"SSL", link:'index/', isDisabel: false},
-              {name:"系统日志", link:'index/', isDisabel: false},
-              {name:"系统防火墙", link:'index/', isDisabel: false},
-              {name:"用户", link:'index/', isDisabel: false},
-              {name:"虚拟媒体", link:'index/', isDisabel: false},
-            ]
-          },
-          {
-            name:"运动控制",
-            isDisabel: false,
-            link:'index/',
-            children:[
-              {name:"终端重定向", link:'index/', isDisabel: false},
-              {name:"电源控制", link:'index/', isDisabel: false},
-            
-            ]
-          },
-          {
-            name:"自动视频录制",
-            isDisabel: false,
-            link:'index/',
-            children:[
-              {name:"触发配置", link:'index/', isDisabel: false},
-              {name:"视频录制", link:'index/', isDisabel: false},
-            
-            ]
-          },
-          {
-            name:"维护",
-            isDisabel: false,
-            link:'index/',
-            children:[
-              {name:"保留配置", link:'index/', isDisabel: false},
-              {name:"恢复配置", link:'index/', isDisabel: false},
-              {name:"系统管理员", link:'index/', isDisabel: false},
-            
-            ]
-          },
-          {
-            name:"固件更新",
-            isDisabel: false,
-            link:'index/',
-            children:[
-              {name:"固件更新", link:'index/', isDisabel: false},
-              {name:"协议配置", link:'index/', isDisabel: false},
-            
-            ]
-          },
-        ]
+    export default {
+        name: 'allmenu',
+        data() {
+            return {
+                theme: '',
+                menuList: [
+                    {
+                        name: "总览",
+                        link: 'dashbord',
+                        isDisabel: false
+                    },
+                    {
+                        name: "风扇控制",
+                        link: 'fan',
+                        isDisabel: false
+                    },
+                    {
+                        name: "FRU信息",
+                        link: 'fru_info',
+                        isDisabel: false
+                    },
+                    {
+                        name: "健康",
+                        link: 'index/',
+                        isDisabel: false,
+                        children: [
+                            {name: "传感器读值", isDisabel: false},
+                            {name: "事件日志", isDisabel: false},
+                            {name: "系统日志", isDisabel: false},
+                            {name: "BSOD屏幕", isDisabel: false},
+                        ]
+                    },
+                    {
+                        name: "配置",
+                        link: 'index/',
+                        isDisabel: false,
+                        children: [
+                            {name: "Active Directory", link: '/index/active_directory', isDisabel: false},
+                            {name: "DNS", link: '/index/dns', isDisabel: false},
+                            {name: "事件日志", link: '/index/event_log', isDisabel: false},
+                            {name: "Images重定向", link: 'index/', isDisabel: false},
+                            {name: "LDAP/E-Directory", link: 'index/', isDisabel: false},
+                            {name: "证书", link: 'index/', isDisabel: false},
+                            {name: "鼠标的模式", link: 'index/', isDisabel: false},
+                            {name: "NCSI", link: 'index/', isDisabel: false},
+                            {name: "网络", link: 'index/', isDisabel: false},
+                            {name: "网络绑定", link: 'index/', isDisabel: false},
+                            {name: "网络连接", link: 'index/', isDisabel: false},
+                            {name: "NTP", link: 'index/', isDisabel: false},
+                            {name: "PAM 指令", link: 'index/', isDisabel: false},
+                            {name: "PEF", link: 'index/', isDisabel: false},
+                            {name: "RADIUS", link: 'index/', isDisabel: false},
+                            {name: "远程会话", link: 'index/', isDisabel: false},
+                            {name: "服务", link: 'index/', isDisabel: false},
+                            {name: "SMTP", link: 'index/', isDisabel: false},
+                            {name: "SSL", link: 'index/', isDisabel: false},
+                            {name: "系统日志", link: 'index/', isDisabel: false},
+                            {name: "系统防火墙", link: 'index/', isDisabel: false},
+                            {name: "用户", link: 'index/', isDisabel: false},
+                            {name: "虚拟媒体", link: 'index/', isDisabel: false},
+                        ]
+                    },
+                    {
+                        name: "运动控制",
+                        isDisabel: false,
+                        link: 'index/',
+                        children: [
+                            {name: "终端重定向", link: 'index/', isDisabel: false},
+                            {name: "电源控制", link: 'index/', isDisabel: false},
+
+                        ]
+                    },
+                    {
+                        name: "自动视频录制",
+                        isDisabel: false,
+                        link: 'index/',
+                        children: [
+                            {name: "触发配置", link: 'index/', isDisabel: false},
+                            {name: "视频录制", link: 'index/', isDisabel: false},
+
+                        ]
+                    },
+                    {
+                        name: "维护",
+                        isDisabel: false,
+                        link: 'index/',
+                        children: [
+                            {name: "保留配置", link: 'index/', isDisabel: false},
+                            {name: "恢复配置", link: 'index/', isDisabel: false},
+                            {name: "系统管理员", link: 'index/', isDisabel: false},
+
+                        ]
+                    },
+                    {
+                        name: "固件更新",
+                        isDisabel: false,
+                        link: 'index/',
+                        children: [
+                            {name: "固件更新", link: 'index/', isDisabel: false},
+                            {name: "协议配置", link: 'index/', isDisabel: false},
+
+                        ]
+                    },
+                ]
+            }
+        }
     }
-  }
-}
 </script>
 

src/router/index.js

@@ -21,15 +21,36 @@ const router = new Router({
             component: r => require.ensure([], () => r(require('../views/index')), 'index'),
             children:[
                 { path: '', component:r => require.ensure([], () => r(require('../views/dashbord')), 'dashbord'),},
-                { 
+                {
                     path: 'dashbord', component: r => require.ensure([], () => r(require('../views/dashbord')), 'dashbord'),
                 },
-                { 
+                {
                     path: 'fan',  component: r => require.ensure([], () => r(require('../views/fan')), 'fan'),
                 },
-                 { 
+                {
                     path: 'fru_info',  component: r => require.ensure([], () => r(require('../views/FRUInfo')), 'fan'),
                 },
+                {
+                    path: 'active_directory',
+                    meta: {
+                        title: 'Active Directory'
+                    },
+                    component: r => require.ensure([], () => r(require('../views/configuration/ActiveDirectory')), 'configuration'),
+                },
+                {
+                    path: 'dns',
+                    meta: {
+                        title: 'DNS'
+                    },
+                    component: r => require.ensure([], () => r(require('../views/configuration/DNS')), 'configuration'),
+                },
+                {
+                    path: 'event_log',
+                    meta: {
+                        title: '事件日志'
+                    },
+                    component: r => require.ensure([], () => r(require('../views/configuration/EventLog')), 'configuration'),
+                },
             ]
         },
         {
@@ -37,12 +58,12 @@ const router = new Router({
             name: '登录',
             component: r => require.ensure([], () => r(require('../views/login')), 'login')
         },
-       
+
     ]
 })
 
 // router.beforeEach((to, from, next) => {
-   
+
 //     let title = to.name ? to.name : '领存企业'
 //     next()
 // })

src/views/FRUInfo.vue

@@ -1,175 +1,174 @@
 <template>
-	<div class="dashboard_box" style="width: 1180px;margin: auto;">
-		<table class="table">
-			<thead>
-				<tr>
-					<th>名称</th>
-					<th>速度(RPM)</th>
-					<th style="width: 200px">模式</th>
-					<th style="width: 200px">任务(%)</th>
-					<th style="width: 120px;">操作</th>
-				</tr>
-			</thead>
-			<tbody id="tableContent">
-				<tr v-for='item in fanList'>
-	                <td>{{item.name}}</td>
-	                <td>{{item.speed}}RPM</td>
-	                <td>
-	                    <select v-model='item.model' class="form-control">
-	                        <option value="1" >自动</option>
-	                        <option value="2">手动</option>
-	                    </select>
-	                </td>
-	                <td>
-	                    <input type="text" v-model='item.duty' class="form-control">
-	                </td>
-	                <td>
-	                   <Button type="primary" @click='set(item)'>设置</Button>
-	                </td>
-            	</tr>
-        
-			</tbody>
-		</table>
-	</div>
+    <div class="dashboard_box" style="width: 1180px;margin: auto;">
+        <table class="table">
+            <thead>
+            <tr>
+                <th>名称</th>
+                <th>速度(RPM)</th>
+                <th style="width: 200px">模式</th>
+                <th style="width: 200px">任务(%)</th>
+                <th style="width: 120px;">操作</th>
+            </tr>
+            </thead>
+            <tbody id="tableContent">
+            <tr v-for='(item, index) in fanList' :key="index">
+                <td>{{item.name}}</td>
+                <td>{{item.speed}}RPM</td>
+                <td>
+                    <select v-model='item.model' class="form-control">
+                        <option value="1">自动</option>
+                        <option value="2">手动</option>
+                    </select>
+                </td>
+                <td>
+                    <input type="text" v-model='item.duty' class="form-control">
+                </td>
+                <td>
+                    <Button type="primary" @click='set(item)'>设置</Button>
+                </td>
+            </tr>
+
+            </tbody>
+        </table>
+    </div>
 </template>
 <script>
-export default {
-	name: 'dashbord1',
-	data(){
-		return{
-			fanList:[
-				{name:'fan1', speed: 1000, model: 1, duty:56.3},
-				{name:'fan2', speed: 1000, model: 1, duty:56.3},
-				{name:'fan3', speed: 1000, model: 2, duty:56.3},
-				{name:'fan4', speed: 1000, model: 2, duty:56.3},
-				{name:'fan5', speed: 1000, model: 1, duty:56.3}
-			]
-		}
-	},
-	created() {
-		console.log("111111111111111111")
-	},
-	methods:{
-		set(item){
-			console.log(item)
-		}
-	}
-}
+    export default {
+        name: 'dashbord1',
+        data() {
+            return {
+                fanList: [
+                    {name: 'fan1', speed: 1000, model: 1, duty: 56.3},
+                    {name: 'fan2', speed: 1000, model: 1, duty: 56.3},
+                    {name: 'fan3', speed: 1000, model: 2, duty: 56.3},
+                    {name: 'fan4', speed: 1000, model: 2, duty: 56.3},
+                    {name: 'fan5', speed: 1000, model: 1, duty: 56.3}
+                ]
+            }
+        },
+        created() {
+            console.log("111111111111111111")
+        },
+        methods: {
+            set(item) {
+                console.log(item)
+            }
+        }
+    }
 </script>
 <style lang="scss" scoped>
-* {
-	box-sizing: border-box;
-}
+    * {
+        box-sizing: border-box;
+    }
 
-input {
-	margin: 0;
-}
+    input {
+        margin: 0;
+    }
 
-.dashboard_box {
-	background: -webkit-linear-gradient(bottom, #FFFFFF, #D1E3FF);
-	/* Safari 5.1 - 6.0 */
-	background: -o-linear-gradient(top, #FFFFFF, #D1E3FF);
-	/* Opera 11.1 - 12.0 */
-	background: -moz-linear-gradient(top, #FFFFFF, #D1E3FF);
-	/* Firefox 3.6 - 15 */
-	background: linear-gradient(to top, #FFFFFF, #D1E3FF);
-	height: 100%;
-	overflow-y: auto;
-	/*margin-top:30px;*/
-}
+    .dashboard_box {
+        background: -webkit-linear-gradient(bottom, #FFFFFF, #D1E3FF);
+        /* Safari 5.1 - 6.0 */
+        background: -o-linear-gradient(top, #FFFFFF, #D1E3FF);
+        /* Opera 11.1 - 12.0 */
+        background: -moz-linear-gradient(top, #FFFFFF, #D1E3FF);
+        /* Firefox 3.6 - 15 */
+        background: linear-gradient(to top, #FFFFFF, #D1E3FF);
+        height: 100%;
+        overflow-y: auto;
+        /*margin-top:30px;*/
+    }
 
-.table {
-	border-spacing: 0;
-	border-collapse: collapse;
-	width: 100%;
-	max-width: 100%;
-	font-size:13px;
-}
+    .table {
+        border-spacing: 0;
+        border-collapse: collapse;
+        width: 100%;
+        max-width: 100%;
+        font-size: 13px;
+    }
 
-.table td,
-.table th {
-	padding: 8px;
-	text-align: center;
-}
+    .table td,
+    .table th {
+        padding: 8px;
+        text-align: center;
+    }
 
-.form-control {
-	display: block;
-	width: 100%;
-	height: 30px;
-	line-height: 30px;
-	padding: 4px 12px;
-	font-size: 13px;
-	background: transparent;
-	border: 1px solid #1874FF;
-	color: #003C97;
-	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-}
+    .form-control {
+        display: block;
+        width: 100%;
+        height: 30px;
+        line-height: 30px;
+        padding: 4px 12px;
+        font-size: 13px;
+        background: transparent;
+        border: 1px solid #1874FF;
+        color: #003C97;
+        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+        -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
+        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+    }
 
-.form-control:focus {
-	border-color: #66afe9;
-	outline: 0;
-	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
-	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
-}
+    .form-control:focus {
+        border-color: #66afe9;
+        outline: 0;
+        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
+        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
+    }
 
-.btn {
-	display: inline-block;
-	padding: 4px 20px;
-	margin-bottom: 0;
-	font-size: 13px;
-	font-weight: 400;
-	line-height: 1.42857143;
-	text-align: center;
-	white-space: nowrap;
-	vertical-align: middle;
-	-ms-touch-action: manipulation;
-	touch-action: manipulation;
-	cursor: pointer;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-	background-image: none;
-	border: 1px solid transparent;
-}
+    .btn {
+        display: inline-block;
+        padding: 4px 20px;
+        margin-bottom: 0;
+        font-size: 13px;
+        font-weight: 400;
+        line-height: 1.42857143;
+        text-align: center;
+        white-space: nowrap;
+        vertical-align: middle;
+        -ms-touch-action: manipulation;
+        touch-action: manipulation;
+        cursor: pointer;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        background-image: none;
+        border: 1px solid transparent;
+    }
 
-.btn:focus {
-	outline: none;
-}
+    .btn:focus {
+        outline: none;
+    }
 
-.btn-primary {
-	color: #fff;
-	background-color: #1874FF;
-	border-color: #1874FF;
-	border-radius: 3px;
-}
+    .btn-primary {
+        color: #fff;
+        background-color: #1874FF;
+        border-color: #1874FF;
+        border-radius: 3px;
+    }
 
-.btn-primary:hover {
-	color: #fff;
-	background-color: #0364F7;
-	border-color: #0364F7;
-}
+    .btn-primary:hover {
+        color: #fff;
+        background-color: #0364F7;
+        border-color: #0364F7;
+    }
 
-.dashboard_box table tr:nth-of-type(odd) {
-	background-color: rgba(24, 116, 255, 0.06);
-	;
-}
+    .dashboard_box table tr:nth-of-type(odd) {
+        background-color: rgba(24, 116, 255, 0.06);;
+    }
 
-.dashboard_box table thead tr {
-	background-color: transparent !important;
-}
+    .dashboard_box table thead tr {
+        background-color: transparent !important;
+    }
 
-.dashboard_box table tr td {
-	color: #003C97;
-}
+    .dashboard_box table tr td {
+        color: #003C97;
+    }
 
-.dashboard_box table tr th {
-	color: #022B7D;
-	padding: 14px 8px;
-	font-weight: normal;
-}
-</style>
+    .dashboard_box table tr th {
+        color: #022B7D;
+        padding: 14px 8px;
+        font-weight: normal;
+    }
+</style>

src/views/configuration/ActiveDirectory.vue

@@ -0,0 +1,119 @@
+<template>
+    <div class="active-directory">
+        <div class="configuration-title">Active Directory Settings</div>
+        <div  class="configuration-btn-right">
+            <Button type="primary" @click="modalSettings = true">Advanced Settings</Button>
+        </div>
+        <div class="configuration-text">The list below shows the current list of configured Role Groups. If you would like to delete or modify a role group, select the name in the list and click Delete Role Group or Modify Role Group. To add a new Role Group, select an unconfigured slot and click Add Role Group.</div>
+        <div class="configuration-table">
+            <Table :columns="columnsDirectory" :data="dataDirectory" size="small" ref="table"></Table>
+        </div>
+        <div class="configuration-btn-right">
+            <Button type="primary" style="margin-right: 10px;">Add Role Group</Button>
+            <Button type="primary" style="margin-right: 10px;">Modify Role Group</Button>
+            <Button type="primary">Delete Role Group</Button>
+        </div>
+        <Modal
+                v-model="modalSettings"
+                title="Advanced Settings"
+                width="660"
+                :loading="loading"
+                @on-ok="save"
+                @on-cancel="cancel">
+            <Form :model="formSettings" label-position="left" :label-width="260">
+                <FormItem label="Active Directory Authentication">
+                    <Checkbox v-model="formSettings.authentication">Enable</Checkbox>
+                </FormItem>
+                <FormItem label="Secret Username">
+                    <Input v-model="formSettings.userName" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="Secret Password">
+                    <Input v-model="formSettings.password" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="User Domain Name">
+                    <Input v-model="formSettings.domainName" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="Domain Controller Server Address1">
+                    <Input v-model="formSettings.address1" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="Domain Controller Server Address2">
+                    <Input v-model="formSettings.address2" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="Domain Controller Server Address3">
+                    <Input v-model="formSettings.address3" style="width: 300px;"/>
+                </FormItem>
+            </Form>
+        </Modal>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "ActiveDirectory",
+        data () {
+            return {
+                columnsDirectory: [
+                    {
+                        "title": "Role Group ID",
+                        "key": "ID",
+                        "sortable": true
+                    },
+                    {
+                        "title": "Group Name",
+                        "key": "Name",
+                        "sortable": true
+                    },
+                    {
+                        "title": "Group Domain",
+                        "key": "Domain",
+                        "sortable": true
+                    },
+                    {
+                        "title": "Group Privilege",
+                        "key": "Privilege",
+                        "sortable": true
+                    }
+                ],
+                dataDirectory: [
+                    {
+                        ID: 1,
+                        Name: 'Group Name',
+                        Domain: 'Group Domain',
+                        Privilege: 'Group Privilege'
+                    },
+                    {
+                        ID: 2,
+                        Name: 'Group Name',
+                        Domain: 'Group Domain',
+                        Privilege: 'Group Privilege'
+                    }
+                ],
+                modalSettings: false,
+                loading: true,
+                formSettings: {
+                    authentication: true,
+                    userName: '',
+                    password:  '',
+                    domainName: '',
+                    address1: '',
+                    address2: '',
+                    address3: ''
+                }
+            }
+        },
+        methods: {
+            save() {
+                setTimeout(() => {
+                    this.modalSettings = false;
+                }, 2000);
+            },
+            cancel() {
+
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/views/configuration/DNS.vue

@@ -0,0 +1,134 @@
+<template>
+    <div class="dns">
+        <div class="configuration-title">DNS Server Settings</div>
+        <div class="configuration-text">Manage DNS settings of the device.</div>
+        <Form :model="formServerSettings" label-position="left" :label-width="200">
+            <div class="configuration-subtitle">Host Configuration</div>
+            <div class="configuration-form-item">
+                <FormItem label="Host Settings">
+                    <Select v-model="formServerSettings.hostSettings" style="width: 300px;">
+                        <Option value="0">Manual</Option>
+                        <Option value="1">Automatic</Option>
+                    </Select>
+                </FormItem>
+                <FormItem label="Host Name">
+                    <Input v-model="formServerSettings.hostName" style="width: 300px;"/>
+                </FormItem>
+            </div>
+            <div class="configuration-subtitle">Register BMC</div>
+            <div class="configuration-form-item">
+                <FormItem label="eth0">
+                    <div>
+                        <Checkbox v-model="formServerSettings.registerBMCEth0">Register BMC</Checkbox>
+                    </div>
+                    <div>
+                        <RadioGroup v-model="formServerSettings.radioEth0">
+                            <Radio label="0">Direct Dynamic DNS</Radio>
+                            <Radio label="1">DHCP Client FQDN</Radio>
+                        </RadioGroup>
+                    </div>
+                </FormItem>
+                <FormItem label="eth1">
+                    <div>
+                        <Checkbox v-model="formServerSettings.registerBMCEth1">Register BMC</Checkbox>
+                    </div>
+                    <div>
+                        <RadioGroup v-model="formServerSettings.radioEth1">
+                            <Radio label="0">Direct Dynamic DNS</Radio>
+                            <Radio label="1">DHCP Client FQDN</Radio>
+                        </RadioGroup>
+                    </div>
+                </FormItem>
+            </div>
+            <div class="configuration-subtitle">TSIG Configuration</div>
+            <div class="configuration-form-item">
+                <FormItem label="TSIG Authentication">
+                    <Checkbox v-model="formServerSettings.TSIGAuthentication">Enable</Checkbox>
+                </FormItem>
+                <FormItem label="Current TSIG Private File">
+                    <Input v-model="formServerSettings.currentFile" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="New TSIG Private File">
+                    <Upload action="//jsonplaceholder.typicode.com/posts/">
+                        <Button icon="ios-cloud-upload-outline">Upload files</Button>
+                    </Upload>
+                </FormItem>
+            </div>
+            <div class="configuration-subtitle">Domain Name Configuration</div>
+            <div class="configuration-form-item">
+                <FormItem label="Domain Settings">
+                    <Select v-model="formServerSettings.domainSettings" style="width: 300px;">
+                        <Option value="Manual">Manual</Option>
+                        <Option value="eth1_v6">eth1_v6</Option>
+                    </Select>
+                </FormItem>
+                <FormItem label="Domain Name">
+                    <Input v-model="formServerSettings.domainName" style="width: 300px;"/>
+                </FormItem>
+            </div>
+            <div class="configuration-subtitle">Domain Name Server Configuration</div>
+            <div class="configuration-form-item">
+                <FormItem label="DNS Server Settings">
+                    <Select v-model="formServerSettings.serverSettings" style="width: 300px;">
+                        <Option value="0">Manual</Option>
+                    </Select>
+                </FormItem>
+                <FormItem label="IP Priority">
+                    <RadioGroup v-model="formServerSettings.iPPriority">
+                        <Radio label="0">IPv4</Radio>
+                        <Radio label="1">IPv6</Radio>
+                    </RadioGroup>
+                </FormItem>
+                <FormItem label="DNS Server1">
+                    <Input v-model="formServerSettings.DNSServer1" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="DNS Server2">
+                    <Input v-model="formServerSettings.DNSServer2" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="DNS Server3">
+                    <Input v-model="formServerSettings.DNSServer3" style="width: 300px;"/>
+                </FormItem>
+            </div>
+        </Form>
+        <div class="configuration-btn-right">
+            <Button type="primary" style="margin-right: 10px;">Save</Button>
+            <Button type="primary">Reset</Button>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "DNS",
+        data() {
+            return {
+                formServerSettings: {
+                    hostSettings: '',
+                    hostName: '',
+                    registerBMCEth0: false,
+                    registerBMCEth1: false,
+                    radioEth0: '',
+                    radioEth1: '',
+                    TSIGAuthentication: false,
+                    currentFile: '',
+                    domainSettings: '',
+                    domainName: '',
+                    serverSettings: '',
+                    iPPriority: '',
+                    DNSServer1: '',
+                    DNSServer2: '',
+                    DNSServer3: ''
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .configuration-btn-right {
+        border-top: 1px solid #000;
+    }
+    .configuration-form-item  {
+        padding-left: 40px;
+    }
+</style>

src/views/configuration/EventLog.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="event-log">
+        <div class="configuration-title">System Event Log</div>
+        <div class="configuration-text">This page is used to configure the System Event log information .</div>
+        <div class="event-log-form">
+            <Form :model="formEventLog" label-position="left" :label-width="0">
+                <div class="configuration-subtitle">Current Event Log Policy:</div>
+                <FormItem>
+                    <RadioGroup v-model="formEventLog.radioPolicy" vertical>
+                        <Radio label="0">Enable Linear Event Log Policy</Radio>
+                        <Radio label="1">Enable Circular Event Log Policy</Radio>
+                    </RadioGroup>
+                </FormItem>
+            </Form>
+        </div>
+        <div class="configuration-btn-right">
+            <Button type="primary" style="margin-right: 10px;">Save</Button>
+            <Button type="primary">Reset</Button>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "EventLog",
+        data() {
+            return {
+                formEventLog: {
+                    radioPolicy: ''
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .event-log-form {
+        padding-left: 30px;
+        .configuration-subtitle {
+            font-size: 14px;
+            margin-bottom: 10px;
+        }
+    }
+    .configuration-btn-right {
+        border-top: 1px solid #000;
+    }
+</style>