同步

src/components/SideBar.vue

@@ -10,6 +10,7 @@
       <el-menu-item index="/views/certificate/index">凭证管理</el-menu-item>
       <el-menu-item index="/views/account/register">账号管理</el-menu-item>
       <el-menu-item index="/views/duty/duty">责任认定</el-menu-item>
+      <el-menu-item index="/views/synch/synch">同步</el-menu-item>
       <el-menu-item index="/views/audit/behavior">行为审计</el-menu-item>
       <el-submenu index="">
         <template #title>

src/router.js

@@ -72,6 +72,11 @@ export default new Router({
           name: 'duty',
           component: () => import('./views/duty/duty.vue'),
         },
+        {
+          path: '/views/synch/synch',
+          name: 'synch',
+          component: () => import('./views/synch/synch.vue'),
+        },
       ],
     },
   ],

src/views/duty/duty.vue

@@ -15,7 +15,7 @@
         <el-col :span="1"><el-button type="success" icon="el-icon-plus">认证报告批量导出</el-button></el-col>
       </el-col>
       <el-col>
-        <el-table :data="tableData" style="width: 100%" border type="selection">
+        <el-table :data="tableData" style="width: 100%" border>
           <el-table-column align="center" type="selection" width="40"> </el-table-column>
           <el-table-column align="center" prop="user" label="用户" width="200"> </el-table-column>
           <el-table-column align="center" prop="behavior" label="行为"> </el-table-column>

src/views/synch/synch.vue

@@ -0,0 +1,135 @@
+<template>
+  <div id="synch">
+    <el-row class="register">
+      <el-col :span="24" class="btn">
+        <el-col :span="20"><h3>同步</h3></el-col>
+      </el-col>
+      <el-col :span="24" class="search">
+        <el-col :span="6" class="searchSel">
+          <el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
+        </el-col>
+        <el-col :span="5" class="searchInp"><el-input v-model="input1" placeholder="输入策略名"></el-input></el-col>
+        <el-col :span="5" class="searchInp"><el-input v-model="input2" placeholder="输入服务器名称"></el-input></el-col>
+        <el-col :span="2" class="searchBtn"><el-button icon="el-icon-search"></el-button></el-col>
+      </el-col>
+      <el-col>
+        <el-table :data="tableData" style="width: 100%" border>
+          <el-table-column align="center" prop="data" label="时间"> </el-table-column>
+          <el-table-column align="center" prop="name1" label="策略名称" width="80"> </el-table-column>
+          <el-table-column align="center" prop="name2" label="服务器名称" width="150"> </el-table-column>
+          <el-table-column align="center" prop="behavior" label="同步行为"> </el-table-column>
+          <el-table-column align="center" prop="stata" label="完成情况"> </el-table-column>
+          <el-table-column align="center" label="操作" width="130">
+            <el-button type="text" @click="dialogTableVisible = true">查看异常信息</el-button>
+          </el-table-column>
+        </el-table>
+        <el-col class="paging">
+          <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
+        </el-col>
+      </el-col>
+    </el-row>
+    <el-dialog title="查看异常信息" fullscreen :visible.sync="dialogTableVisible">
+      <el-table :data="dialogData">
+        <el-table-column align="center" property="time" label="时间"></el-table-column>
+        <el-table-column align="center" property="reason" label="原因"></el-table-column>
+      </el-table>
+      <div slot="footer" align="center" class="dialog-footer">
+        <el-button type="primary" @click="dialogTableVisible = false">返回</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { log } from 'util';
+export default {
+  name: 'synch',
+  props: {},
+  components: {},
+  data: () => ({
+    tableData: [
+      {
+        data: '2018年9月1日上午9：40至2018年12月3日下午5：23',
+        name1: 'abc',
+        name2: '服务器1',
+        behavior: '同步用户数据',
+        stata: '正常',
+      },
+      {
+        data: '2018年9月1日上午9：40至2018年12月3日下午5：23',
+        name1: 'Zed',
+        name2: '服务器1',
+        behavior: '同步应用数据',
+        stata: '异常',
+      },
+      {
+        data: '2018年9月1日上午9：40至2018年12月3日下午5：23',
+        name1: 'bac',
+        name2: '服务器2',
+        behavior: '同步文档数据',
+        stata: '异常',
+      },
+      {
+        data: '2018年9月1日上午9：40至2018年12月3日下午5：23',
+        name1: 'bca',
+        name2: '服务器2',
+        behavior: '同步用户数据',
+        stata: '正常',
+      },
+    ],
+    dialogData: [
+      { time: '时间：2018年9月1日上午9：40', reason: '网络终断' },
+      { time: '时间：2018年12月3日下午5：23', reason: '人为停止' },
+      { time: '时间：2019年3月28日下午9：52', reason: '人为停止' },
+      { time: '时间：2019年6月17日上午11：20', reason: '未知原因  ' },
+    ],
+    input1: '',
+    input2: '',
+    value1: '',
+    dialogTableVisible: false,
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  padding: 0;
+}
+.register {
+  width: 100%;
+  padding: 20px;
+}
+.btn {
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  margin: 20px 0;
+}
+.search {
+  height: 40px;
+  line-height: 40px;
+  margin: 0 0 20px 0;
+}
+.searchSel .el-select {
+  border-radius: 0;
+}
+/deep/.searchInp .el-input__inner {
+  border-radius: 0;
+}
+.searchBtn .el-button {
+  border-radius: 0;
+}
+.paging {
+  text-align: right;
+  margin: 10px 0;
+}
+</style>