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

@@ -19,8 +19,8 @@
               </Submenu>
             </template>
           </template>
-           
-           
+
+
         </Menu>
   </div>
 </template>
@@ -49,10 +49,10 @@ export default {
           },
           {
             name:"健康",
-            // link:'index/',
+            link:'index/',
             isDisabel: false,
             children:[
-              {name:"传感器读值", link:'sensor_history', isDisabel: false},
+              {name:"传感器读值", isDisabel: false},
               {name:"事件日志", isDisabel: false},
               {name:"系统日志", isDisabel: false},
               {name:"BSOD屏幕", isDisabel: false},
@@ -95,7 +95,7 @@ export default {
             children:[
               {name:"终端重定向", link:'index/', isDisabel: false},
               {name:"电源控制", link:'index/', isDisabel: false},
-            
+
             ]
           },
           {
@@ -105,7 +105,7 @@ export default {
             children:[
               {name:"触发配置", link:'index/', isDisabel: false},
               {name:"视频录制", link:'index/', isDisabel: false},
-            
+
             ]
           },
           {
@@ -116,7 +116,7 @@ export default {
               {name:"保留配置", link:'index/', isDisabel: false},
               {name:"恢复配置", link:'index/', isDisabel: false},
               {name:"系统管理员", link:'index/', isDisabel: false},
-            
+
             ]
           },
           {
@@ -126,7 +126,7 @@ export default {
             children:[
               {name:"固件更新", link:'index/', isDisabel: false},
               {name:"协议配置", link:'index/', isDisabel: false},
-            
+
             ]
           },
         ]
@@ -135,14 +135,3 @@ export default {
 }
 </script>
 
-<style lang='scss' scoped>
-  .menu-contente{
-    /*position: fixed;*/
-    width: 1180px;
-    /*top: 0px;
-    left: 0px;
-    right: 0px;*/
-    margin-left:auto;
-    margin-right:auto;
-  }
-</style>

src/router/index.js

@@ -13,7 +13,7 @@ const router = new Router({
     routes: [
         {
             path: '/',
-            redirect: '/index/dashbord'
+            redirect: '/index'
         },
         {
             path: '/index',
@@ -21,18 +21,15 @@ 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: 'sensor_history',  component: r => require.ensure([], () => r(require('../views/SensorHistory')), 'sensor_history'),
-                },
             ]
         },
         {
@@ -40,12 +37,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,182 +1,35 @@
 <template>
 	<div class="dashboard_box" style="width: 1180px;margin: auto;">
-		<div class="dashboard_box">
-        <h3>
-           Field Replaceable Unit(FRU)
-
-        </h3>
-        <p style="display:none">
-           This page gives detailed information for the various FRU devices present in this system.
-
-        </p>
-
-        <h4 style="display:none">
-           Basic Information:
-
-        </h4>
-        <div style="display:none" class="subSection">
-            <table cellspacing="0" cellpadding="6" border="0" width="700">
-                <tbody><tr><td width="40%"><strong>
-                  FRU Device ID
-
-                </strong></td>
-                    <td><select id="_FRUDeviceID" class="classicTxtBox"></select></td></tr>
-                <tr><td><strong>
-                   FRU Device Name
-
-                </strong></td>
-                    <td><label id="_FRUDeviceName" class="classicTxtBox"></label></td></tr>
-            </tbody></table>
-        </div>
-        
-        <h4>
-         Chassis Information:
-
-        </h4>
-        <div class="subSection">
-            <table cellspacing="0" cellpadding="6" border="0" width="700">
-                <tbody><tr><td width="40%"><strong>
-                  Chassis Information Area Format Version
-
-                </strong></td>
-                    <td><label id="_CI_ChassisInfoAreaFormatVersion" class="classicTxtBox"></label></td></tr>
-                <tr><td><strong>
-                Chassis Type
-
-                </strong></td>
-                    <td><label id="_CI_ChassisType" class="classicTxtBox"></label></td></tr>
-                <tr><td><strong>
-                   Chassis Part Number
-
-                </strong></td>
-                    <td><label id="_CI_ChassisPartNum" class="classicTxtBox"></label></td></tr>
-                <tr><td><strong>
-                   Chassis Serial Number
-
-                </strong></td>
-                    <td><label id="_CI_ChassisSerialNum" class="classicTxtBox"></label></td></tr>
-                <tr><td><strong>
-                   Chassis Extra
-
-                </strong></td>
-                    <td><label id="_CI_CustomFields" class="classicTxtBox"></label></td></tr>
-            </tbody></table>
-        </div>
-
-        <h4>
-          Board Information:
-
-        </h4>
-        <div class="subSection">
-            <table cellspacing="0" cellpadding="6" border="0" width="700">
-                <tbody><tr><td width="40%"><strong>
-                  Board Information Area Format Version
-
-                </strong></td>
-                    <td><label id="_BI_BoardInfoAreaFormatVersion" class="classicTxtBox"></label></td></tr>
-                <tr><td><strong>
-                  Language
-
-                </strong></td>
-                    <td><label id="_BI_Language" class="classicTxtBox"></label></td></tr>
-                <tr><td><strong>
-                    Manufacture Date Time
-
-                </strong></td>
-                    <td><label id="_BI_MfgDateTime" class="classicTxtBox"></label></td></tr>
-                <tr><td><strong>
-                  Board Manufacturer
-
-                </strong></td>
-                    <td><label id="_BI_BoardMfr" class="classicTxtBox"></label></td></tr>
-                <tr><td><strong>
-                   Board Product Name
-
-                </strong></td>
-                    <td><label id="_BI_BoardProductName" class="classicTxtBox"></label></td></tr>
-                <tr><td><strong>
-                   Board Serial Number
-
-                </strong></td>
-                    <td><label id="_BI_BoardSerialNum" class="classicTxtBox"></label></td></tr>
-                <tr><td><strong>
-                    Board Part Number
-
-                </strong></td>
-                    <td><label id="_BI_BoardPartNum" class="classicTxtBox"></label></td></tr>
-                <tr><td><strong>
-                    FRU File ID
-
-                </strong></td>
-                    <td><label id="_BI_FRUFileID" class="classicTxtBox"></label></td></tr>
-                <tr><td><strong>
-                   Board Extra
-
-                </strong></td>
-                    <td><label id="_BI_CustomFields" class="classicTxtBox"></label></td></tr>
-            </tbody></table>
-        </div>
-
-        <h4>
-          Product Information:
-
-        </h4>
-        <div class="subSection">
-            <table cellspacing="0" cellpadding="6" border="0" width="700">
-                <tbody><tr><td width="40%"><strong>
-                   Product Information Area Format Version
-
-                </strong></td>
-                    <td><label id="_PI_ProductInfoAreaFormatVersion" class="classicTxtBox"></label></td></tr>
-                <tr><td><strong>
-                   </script>Language
-
-                </strong></td>
-                    <td><label id="_PI_Language" class="classicTxtBox"></label></td></tr>
-                <tr><td><strong>
-                    Manufacturer Name
-
-                </strong></td>
-                    <td><label id="_PI_MfrName" class="classicTxtBox"></label></td></tr>
-                <tr><td><strong>
-                  Product Name
-
-                </strong></td>
-                    <td><label id="_PI_ProductName" class="classicTxtBox"></label></td></tr>
-                <tr><td><strong>
-                   Product Part Number
-
-                </strong></td>
-                    <td><label id="_PI_ProductPartNum" class="classicTxtBox"></label></td></tr>
-                <tr><td><strong>
-                   Product Version
-
-                </strong></td>
-                    <td><label id="_PI_ProductVersion" class="classicTxtBox"></label></td></tr>
-                <tr><td><strong>
-                  Product Serial Number
-
-                </strong></td>
-                    <td><label id="_PI_ProductSerialNum" class="classicTxtBox"></label></td></tr>
-                <tr><td><strong>
-                  Asset Tag
-
-                </strong></td>
-                    <td><label id="_PI_AssetTag" class="classicTxtBox"></label></td></tr>
-                <tr><td><strong>
-                 FRU File ID
-
-                </strong></td>
-                    <td><label id="_PI_FRUFileID" class="classicTxtBox"></label></td></tr>
-                <tr><td><strong>
-                   Product Extra
-
-                </strong></td>
-                    <td><label id="_PI_CustomFields" class="classicTxtBox"></label></td></tr>
-            </tbody></table>
-        </div>
-    </div>
-		
+		<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>
 </template>
 <script>
@@ -212,44 +65,111 @@ input {
 	margin: 0;
 }
 
-table {
-    font-size: 12px;
+.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;*/
 }
 
-tr {
-    height: 26px;
+.table {
+	border-spacing: 0;
+	border-collapse: collapse;
+	width: 100%;
+	max-width: 100%;
+	font-size:13px;
 }
-td{
-    width: 40%;
+
+.table td,
+.table th {
+	padding: 8px;
+	text-align: center;
 }
-.dashboard_box {
-	width: 1180px;
-    margin: auto;
-    margin-top: 10px;
-    /* background: #040C19; */
-    padding: 10px 0;
-    color: #fff;
-    h3 {
-	    color: #fff;
-	    margin-bottom: 0;
-	    padding-bottom: 5px;
-	}
+
+.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;
 }
-h4 {
-    font-size: 15px;
-    width: auto;
-    margin: 3px;
-    padding: 2px;
+
+.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);
 }
-h3 {
-    color: #fff;
-    font-size: 20px;
-    padding-bottom: 0px;
-    /*margin-top: 5px;*/
-    border-bottom: 1px solid #000;
+
+.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;
 }
-.subSection {
-    padding: 20px;
-    padding-top: 0px;
+
+.btn:focus {
+	outline: none;
+}
+
+.btn-primary {
+	color: #fff;
+	background-color: #1874FF;
+	border-color: #1874FF;
+	border-radius: 3px;
+}
+
+.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 thead tr {
+	background-color: transparent !important;
+}
+
+.dashboard_box table tr td {
+	color: #003C97;
+}
+
+.dashboard_box table tr th {
+	color: #022B7D;
+	padding: 14px 8px;
+	font-weight: normal;
 }
-</style>
+</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>