初始化

frontend/packages/BigScreenDesign/HistoryList/index.vue

@@ -0,0 +1,123 @@
+<!--
+ * @description: 时间线
+-->
+<template>
+  <el-dialog
+    title="历史操作"
+    :visible.sync="dialogVisible"
+    width="50%"
+    :modal="true"
+    :modal-append-to-body="false"
+    :appen-to-body="true"
+    class="bs-dialog-wrap bs-el-dialog"
+  >
+    <div class="layer-list-wrap">
+      <!-- el-table 三列，动作，时间，操作。操作栏中是回退 -->
+      <el-table
+        :data="chartList"
+        border
+        style="width: 100%"
+        class="bs-el-table"
+        :row-class-name="tableRowClassName"
+      >
+        <el-table-column
+          prop="timelineTitle"
+          label="动作"
+          class-name="bs-el-table-column"
+        />
+        <el-table-column
+          prop="updateTime"
+          label="时间"
+          width="180"
+          class-name="bs-el-table-column"
+        />
+        <el-table-column
+          prop="operation"
+          label="操作"
+          width="100"
+          class-name="bs-el-table-column"
+        >
+          <template slot-scope="scope">
+            <el-button
+              type="text"
+              size="small"
+              @click="rollback(scope.$index)"
+            >
+              回退
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <span
+      slot="footer"
+      class="dialog-footer"
+    >
+      <el-button
+        class="bs-el-button-default"
+        @click="dialogVisible = false"
+      >
+        取消
+      </el-button>
+      <el-button
+        type="primary"
+        @click="clearTimeline"
+      >
+        清除历史
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+<script>
+import { mapState, mapMutations } from 'vuex'
+export default {
+  name: 'HistoryList',
+  props: {},
+  data () {
+    return {
+      dialogVisible: false
+    }
+  },
+  computed: {
+    ...mapState({
+      chartList: state => state.bigScreen.timelineStore,
+      currentTimeLine: state => state.bigScreen.currentTimeLine
+    })
+  },
+  mounted () {},
+  methods: {
+    ...mapMutations({
+      clearTimeline: 'bigScreen/clearTimeline',
+      rollbackTimeline: 'bigScreen/rollbackTimeline'
+    }),
+    init () {
+      this.dialogVisible = true
+    },
+    rollback (index) {
+      this.rollbackTimeline(index)
+      this.dialogVisible = false
+    },
+    tableRowClassName ({ row, rowIndex }) {
+      if (rowIndex === this.currentTimeLine - 1) {
+        return 'choosed-row'
+      }
+      return ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../BigScreenDesign/fonts/iconfont.css';
+@import '../../assets/style/bsTheme.scss';
+.layer-list-wrap {
+  ::v-deep .choosed-row {
+    .bs-el-table-column {
+      border-color: var(--bs-el-border) !important;
+      background: var(--bs-background-2) !important;
+      background-color: var(--bs-background-2) !important;
+      opacity: 0.7;
+    }
+  }
+}
+</style>