表格

report-ui/package.json

@@ -37,6 +37,7 @@
     "vue-json-editor": "^1.4.3",
     "vue-router": "3.0.1",
     "vue-ruler-tool": "^1.2.4",
+    "vue-superslide": "^0.1.1",
     "vuedraggable": "^2.24.1",
     "vuex": "3.0.1"
   },
@@ -96,4 +97,4 @@
     "last 2 versions",
     "not ie <= 8"
   ]
-}
+}

report-ui/src/main.js

@@ -31,6 +31,9 @@ import Avue from '@smallwei/avue';
 import '@smallwei/avue/lib/index.css';
 Vue.use(Avue);
 
+import VueSuperSlide from 'vue-superslide'
+Vue.use(VueSuperSlide)
+
 // enable element zh-cn
 Vue.use(ElementUI, { zhLocale })
 

report-ui/src/views/report/bigscreen/designer/form/dynamicAddTable.vue

@@ -1,7 +1,206 @@
 <template>
-  <div>表格</div>
+  <div>
+    <el-button
+      type="primary"
+      size="small"
+      icon="el-icon-plus"
+      plain
+      @click="handleAddClick"
+      >新增</el-button
+    >
+    <el-table :data="formData" style="width: 100%">
+      <el-table-column prop="name" label="名称" width="80" />
+      <el-table-column prop="key" label="key值" width="80" />
+      <!-- <el-table-column prop="width" label="宽度" width="80" /> -->
+      <el-table-column label="操作" width="100">
+        <template slot-scope="scope">
+          <el-button
+            @click="handleEditorClick(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            >编辑</el-button
+          >
+          <el-button
+            type="text"
+            size="small"
+            @click="handleDeleteClick(scope.$index, scope.row)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog
+      title="新增"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :before-close="handleClose"
+    >
+      <el-form :model="rowFormData" label-width="50px">
+        <el-form-item label="名称:">
+          <el-input
+            v-model="rowFormData['name']"
+            placeholder="请输入名称"
+            size="mini"
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item label="key值:">
+          <el-input
+            v-model="rowFormData['key']"
+            placeholder="请输入key值"
+            size="mini"
+          >
+          </el-input>
+        </el-form-item>
+        <!-- <el-form-item label="宽度:">
+          <el-input
+            v-model="rowFormData['width']"
+            placeholder="请输入宽度"
+            size="mini"
+          >
+          </el-input>
+        </el-form-item> -->
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="handleSaveClick"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
 </template>
 <script>
-export default {};
+export default {
+  model: {
+    prop: "formData",
+    event: "input"
+  },
+  props: {
+    formData: Array
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      rowFormData: {
+        name: "",
+        key: "",
+        width: ""
+      },
+      flag: true, // true 新增， false 编辑
+      indexEditor: -1, // 编辑第几个数据
+      tableData: [
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1517 弄",
+          zip: 200333
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1519 弄",
+          zip: 200333
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1516 弄",
+          zip: 200333
+        }
+      ]
+    };
+  },
+  methods: {
+    // 新增
+    handleAddClick() {
+      this.rowFormData = {};
+      this.flag = true;
+      this.dialogVisible = true;
+    },
+    // 编辑
+    handleEditorClick(index, row) {
+      this.flag = false;
+      this.rowFormData = this.deepClone(row);
+      this.indexEditor = index;
+      this.dialogVisible = true;
+    },
+    // 关闭
+    handleClose() {
+      this.dialogVisible = false;
+    },
+    // 保存
+    handleSaveClick() {
+      if (this.flag) {
+        // 新增
+        this.formData.push(this.rowFormData);
+        this.dialogVisible = false;
+      } else {
+        // 编辑
+        this.formData[this.indexEditor] = this.rowFormData;
+        this.$set(this.formData, this.indexEditor, this.rowFormData);
+        this.dialogVisible = false;
+      }
+      this.$emit("input", this.formData);
+      this.$emit("change", this.formData);
+    },
+    // 删除
+    handleDeleteClick(index) {
+      this.formData.splice(index, 1);
+      this.$emit("input", this.formData);
+      this.$emit("change", this.formData);
+    }
+  }
+};
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+/deep/::-webkit-scrollbar-track-piece {
+  background-color: transparent;
+}
+/deep/ .el-table__body-wrapper::-webkit-scrollbar {
+  width: 0; // 横向滚动条
+  height: 8px; // 纵向滚动条 必写
+}
+// 滚动条的滑块
+/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background-color: rgba(144, 146, 152, 0.3);
+}
+/deep/.el-table,
+/deep/.el-table__expanded-cell,
+/deep/.el-table th,
+/deep/.el-table tr {
+  background-color: transparent !important;
+  color: #859094 !important;
+  font-size: 12px !important;
+}
+/deep/.el-table td,
+/deep/.el-table th.is-leaf {
+  border-bottom: none;
+  line-height: 26px;
+}
+/deep/.el-table tbody tr:hover {
+  background-color: #263445 !important;
+}
+/deep/.el-table tbody tr:hover > td {
+  background-color: #263445 !important;
+}
+/deep/.el-table::before {
+  height: 0;
+}
+</style>

report-ui/src/views/report/bigscreen/designer/tools.js

@@ -894,11 +894,210 @@ const widgetTools = [
           placeholder: '',
           value: '表格',
         },
+        {
+          type: 'el-select',
+          label: '字体位置',
+          name: 'textAlign',
+          required: false,
+          placeholder: '',
+          selectOptions: [
+            { code: 'center', name: '居中' },
+            { code: 'left', name: '左对齐' },
+            { code: 'right', name: '右对齐' },
+          ],
+          value: 'center'
+        },
+        {
+          type: 'el-input-number',
+          label: '字体大小',
+          name: 'fontSize',
+          required: false,
+          placeholder: '',
+          value: '16'
+        },
+        {
+          type: 'el-switch',
+          label: '开启滚动',
+          name: 'isRoll',
+          required: false,
+          placeholder: '',
+          value: true
+        },
+        {
+          type: 'el-input-number',
+          label: '滚动时间(毫秒)',
+          name: 'rollTime',
+          required: false,
+          placeholder: '',
+          value: 1000
+        },
+        {
+          type: 'el-input-number',
+          label: '滚动个数',
+          name: 'rollNumber',
+          required: false,
+          placeholder: '',
+          value: 1
+        },
+        {
+          type: 'el-switch',
+          label: '线条',
+          name: 'isLine',
+          required: false,
+          placeholder: '',
+          value: false
+        },
+        {
+          type: 'el-input-number',
+          label: '边框宽度',
+          name: 'borderWidth',
+          required: false,
+          placeholder: '',
+          value: 1
+        },
+        {
+          type: 'vue-color',
+          label: '边框颜色',
+          name: 'borderColor',
+          required: false,
+          placeholder: '',
+          value: '#fff'
+        },
+        [
+          {
+            name: '表头设置',
+            list: [
+              {
+                type: 'el-switch',
+                label: '表头显隐',
+                name: 'isHeader',
+                required: false,
+                placeholder: '',
+                value: true,
+              },
+              {
+                type: 'vue-color',
+                label: '表头颜色',
+                name: 'headColor',
+                require: false,
+                placeholder: '',
+                value: '#fff',
+              },
+              {
+                type: 'vue-color',
+                label: '表头背景',
+                name: 'headBackColor',
+                require: false,
+                placeholder: '',
+                value: '#0a73ff',
+              },
+            ],
+          },
+          {
+            name: '表体设置',
+            list: [
+              {
+                type: 'vue-color',
+                label: '文字颜色',
+                name: 'bodyColor',
+                required: false,
+                placeholder: '',
+                value: '#fff',
+              },
+              {
+                type: 'vue-color',
+                label: '表格背景',
+                name: 'tableBgColor',
+                require: false,
+                placeholder: '',
+                value: '',
+              },
+              {
+                type: 'vue-color',
+                label: '奇行颜色',
+                name: 'oldColor',
+                require: false,
+                placeholder: '',
+                value: '#0a2732',
+              },
+              {
+                type: 'vue-color',
+                label: '偶行颜色',
+                name: 'eventColor',
+                required: false,
+                placeholder: '',
+                value: '#003b51'
+              }
+            ],
+          },
+        ],
         {
           type: 'dynamic-add-table',
+          label: '',
+          name: 'dynamicAddTable',
+          required: false,
+          placeholder: '',
+          value: [{name: '日期', key: 'date', width: 200},{name: '姓名', key: 'name', width: 200}, {name: '地址', key: 'address', width: '200'}]
         }
       ],
-      data: [],
+      data: [
+        {
+          type: 'el-radio-group',
+          label: '数据类型',
+          name: 'dataType',
+          require: false,
+          placeholder: '',
+          selectValue: true,
+          selectOptions: [
+            {
+              code: 'staticData',
+              name: '静态数据',
+            },
+            {
+              code: 'dynamicData',
+              name: '动态数据',
+            },
+          ],
+          value: 'staticData',
+        },
+        {
+          type: 'el-input-number',
+          label: '刷新时间(毫秒)',
+          name: 'refreshTime',
+          relactiveDom: 'dataType',
+          relactiveDomValue: 'dynamicData',
+          value: 5000
+        },
+        {
+          type: 'el-button',
+          label: '静态数据',
+          name: 'staticData',
+          required: false,
+          placeholder: 'px',
+          relactiveDom: 'dataType',
+          relactiveDomValue: 'staticData',
+          value: [
+            {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, 
+            {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, 
+            {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, 
+            {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, 
+            {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, 
+            {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, 
+            {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, 
+          ],
+        },
+        {
+          type: 'dycustComponents',
+          label: '',
+          name: 'dynamicData',
+          required: false,
+          placeholder: 'px',
+          relactiveDom: 'dataType',
+          relactiveDomValue: 'dynamicData',
+          chartType: 'widget-barchart',
+          value: '',
+        },
+      ],
       position: [
         {
           type: 'el-input-number',

report-ui/src/views/report/bigscreen/designer/widget/widgetTable.vue

@@ -1,26 +1,192 @@
 <template>
-  <div class="table">
-    <div class="table_header">
-      <div>序号</div>
-      <div>列1</div>
-      <div>列2</div>
-      <div>列3</div>
-    </div>
-    <div class="table_content">
-      <div class="table_item">
-        <div>1</div>
-        <div>我们是第一行</div>
+  <div :style="styleObj">
+    <superslide v-if="hackReset" :options="options" class="txtScroll-top">
+      <div class="title">
+        <div
+          v-for="(item, index) in header"
+          :style="headerTableStlye"
+          :key="index"
+        >
+          {{ item.name }}
+        </div>
       </div>
-    </div>
+      <div class="bd">
+        <ul class="infoList">
+          <li v-for="(item, index) in list" :key="index">
+            <div
+              v-for="(itemChild, idx) in header"
+              :key="idx"
+              :style="[bodyTableStyle, bodyTable(index)]"
+            >
+              {{ item[itemChild.key] }}
+            </div>
+          </li>
+        </ul>
+      </div>
+    </superslide>
   </div>
 </template>
 <script>
 export default {
+  props: {
+    value: Object,
+    ispreview: Boolean
+  },
   data() {
     return {
-      list: [{ name: 123 }]
+      hackReset: true,
+      options: {
+        titCell: ".hd ul",
+        mainCell: ".bd ul",
+        effect: "topLoop",
+        autoPage: true,
+        effect: "top",
+        autoPlay: true,
+        vis: 5
+      },
+      header: [],
+      list: [],
+      optionsSetUp: {},
+      optionsPosition: {},
+      optionsData: {}
     };
+  },
+  computed: {
+    styleObj() {
+      const allStyle = this.optionsPosition;
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: allStyle.width + "px",
+        height: allStyle.height + "px",
+        left: allStyle.left + "px",
+        top: allStyle.top + "px"
+      };
+    },
+    headerTableStlye() {
+      const headStyle = this.optionsSetUp;
+      return {
+        "text-align": headStyle.textAlign,
+        "font-size": headStyle.fontSize + "px",
+        "border-style": headStyle.isLine ? "solid" : "none",
+        "border-width": headStyle.borderWidth + "px",
+        "border-color": headStyle.borderColor,
+        display: headStyle.isHeader ? "block" : "none",
+        color: headStyle.headColor,
+        "background-color": headStyle.headBackColor
+      };
+    },
+    bodyTableStyle() {
+      const bodyStyle = this.optionsSetUp;
+      return {
+        "text-align": bodyStyle.textAlign,
+        "font-size": bodyStyle.fontSize + "px",
+        "border-style": bodyStyle.isLine ? "solid" : "none",
+        "border-width": bodyStyle.borderWidth + "px",
+        "border-color": bodyStyle.borderColor,
+        color: bodyStyle.bodyColor,
+        "background-color": bodyStyle.tableBgColor
+      };
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsSetUp = val.setup;
+        this.optionsPosition = val.position;
+        this.optionsData = val.data;
+        this.initData();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.optionsSetUp = this.value.setup;
+    this.optionsPosition = this.value.position;
+    this.optionsData = this.value.data;
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.handlerRollFn();
+      this.handlerHead();
+      this.handlerData();
+    },
+    handlerRollFn() {
+      const options = this.options;
+      const rollSet = this.optionsSetUp;
+      options.autoPlay = rollSet.isRoll;
+      options.delayTime = rollSet.rollTime;
+      options.scroll = rollSet.rollNumber;
+      this.options = options;
+      this.hackResetFun();
+    },
+    handlerHead() {
+      const head = this.optionsSetUp.dynamicAddTable;
+      this.header = head;
+    },
+    handlerData() {
+      const tableData = this.optionsData;
+      console.log(tableData);
+      tableData.dataType == "staticData"
+        ? this.handlerStaticData(tableData.staticData)
+        : this.handlerDymaicData();
+    },
+    handlerStaticData(data) {
+      console.log(data);
+      this.list = data;
+    },
+    handlerDymaicData() {},
+    // vue hack 之强制刷新组件
+    hackResetFun() {
+      this.hackReset = false;
+      this.$nextTick(() => {
+        this.hackReset = true;
+      });
+    },
+    // 计算 奇偶背景色
+    bodyTable(index) {
+      if (index % 2) {
+        return {
+          "background-color": this.optionsSetUp.eventColor
+        };
+      } else {
+        return {
+          "background-color": this.optionsSetUp.oldColor
+        };
+      }
+    }
   }
 };
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+/* 本例子css */
+.txtScroll-top {
+  overflow: hidden;
+  position: relative;
+}
+.title {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
+.title > div {
+  height: 50px;
+  line-height: 50px;
+  width: 100%;
+}
+.txtScroll-top .infoList li {
+  height: 50px;
+  line-height: 50px;
+  display: flex;
+  flex-direction: row;
+}
+.txtScroll-top .infoList li > div {
+  width: 100%;
+}
+.txtScroll-top .infoList li:nth-child(n) {
+  background: rgb(0, 59, 81);
+}
+.txtScroll-top .infoList li:nth-child(2n) {
+  background: rgb(10, 39, 50);
+}
+</style>