llh_project/src/views/synch/synch.vue

<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>