调整大屏展示内容

components/AiDvDialog.vue

@@ -0,0 +1,56 @@
+<script>
+import AiDrag from "./AiDrag.vue";
+import AiDvSvg from "./layout/AiDvSvg/AiDvSvg.vue";
+
+export default {
+  name: "AiDvDialog",
+  components: {AiDvSvg, AiDrag},
+  props: {
+    title: {default: "弹窗"},
+    tableData: {default: () => []},
+    columns: {type: [Array, Object]}
+  },
+  data() {
+    return {
+      dialog: false,
+      detail: {}
+    }
+  },
+  computed: {
+    colConfigs() {
+      let config = []
+      if (!Array.isArray(this.columns)) {
+        config = Object.entries(this.columns).map(([key, value]) => {
+          return {...value, prop: key}
+        })
+      } else config = this.columns
+      return config
+    }
+  },
+}
+</script>
+
+<template>
+  <section class="AiDvDialog">
+    <ai-drag v-if="dialog" :resizable="false">
+      <ai-dv-svg :title="title" @close="dialog=false">
+        <slot v-if="$slots.default"/>
+        <el-table v-else class="simple" :data="tableData">
+          <el-table-column v-for="item in colConfigs" :key="item.prop" :prop="item.prop" :label="item.label"/>
+        </el-table>
+      </ai-dv-svg>
+    </ai-drag>
+  </section>
+</template>
+
+<style scoped lang="scss">
+@import "dv";
+
+.AiDvDialog {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 999;
+  transform: translate(-50%, -50%);
+}
+</style>

components/AiDvRender.vue

@@ -32,7 +32,7 @@
           :theme="theme"
           :isShowIndex="data.isShowIndex"
           :config="dvTableConfig"
-          :data="values">
+          :data="values" :simple="data.simple==1">
       </AiDvTable>
       <AiRanking
           v-else-if="currentType === 'AiRanking'"

components/dv.scss

@@ -0,0 +1,62 @@
+:deep(.el-table.simple) {
+  font-size: 13px;
+  color: #fff;
+  background-color: transparent !important;
+
+  .el-table__header {
+    background: rgba(33, 180, 253, 0.1);
+  }
+
+  &::before {
+    display: none !important;
+  }
+
+  tr.el-table__row--striped td {
+    background: rgba(33, 180, 253, 0.1) !important;
+  }
+
+  .el-table th.el-table__cell {
+    background: transparent !important;
+  }
+
+  .el-table__header tr th:first-child .cell {
+    padding-left: 20px !important;
+  }
+
+  .el-table__header tr th.is-right .cell {
+    padding-right: 20px !important;
+  }
+
+  .el-table__body tr td.is-right .cell {
+    padding-right: 20px !important;
+  }
+
+  .el-table__body tr td:first-child .cell {
+    padding-left: 20px !important;
+  }
+
+  &.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+    background-color: rgba(33, 180, 253, 0.1) !important;
+  }
+
+  td.el-table__cell, th.el-table__cell.is-leaf {
+    border-bottom: none !important;
+  }
+
+  th.el-table__cell {
+    background-color: transparent !important;
+  }
+
+  tr {
+    background-color: transparent !important;
+  }
+
+  .el-table__cell {
+    padding: 7px 0;
+    color: #d0e1e8;
+  }
+
+  .el-table__header tr .cell {
+    color: #02FEFF !important;
+  }
+}

components/layout/AiDvSvg/AiDvSvg.vue

@@ -2,6 +2,9 @@
 const w = 12, h = 10, r = 200
 export default {
   name: "AiDvSvg",
+  props: {
+    title: {default: "慧智会言"},
+  },
   data() {
     return {
       border: "",
@@ -18,7 +21,7 @@ export default {
       this.width = width
       this.height = height
       this.getBorder(width, height)
-      const vv = width - w, hh = height - h
+      const vv = width - w
       this.box = {
         top: `m${vv - r + 33},${13 + h}l7,0l-2.5,-3l-7,0l2.5,3zm-1.5,0l-4.5,-5.5l-7,0l4.5,5.5l7,0zm-21,-7l6,7l7,0l-6,-7l-7,0z`,
         leftBottom: `m46.5,${height + 10}l7,0l-2.5,-3l-7,0l2.5,3zm-1.5,0l-4.5,-5.5l-7,0l4.5,5.5l7,0zm-21,-7l6,7l7,0l-6,-7l-7,0z`,
@@ -96,7 +99,7 @@ export default {
     </svg>
     <div class="close" @click="$emit('close')"/>
     <div class="content">
-      <div class="header">慧智会言</div>
+      <div class="header" v-text="title"/>
       <slot/>
     </div>
   </section>

components/layout/AiDvTable/AiDvTable.vue

@@ -1,163 +1,300 @@
 <template>
-  <div class="aiDvTable" :class="'aiDvTable-' + theme + ' aiDvTable-' + size">
+  <section class="AiDvTable">
-    <div class="header" :style="headerStyle">
+    <el-table v-if="simple" class="simple" :data="tableData">
+      <el-table-column v-for="item in columns" :key="item.prop" v-bind="item"/>
+    </el-table>
+    <div v-else class="aiDvTable" :class="'aiDvTable-' + theme + ' aiDvTable-' + size">
+      <div class="header" :style="headerStyle">
       <span
-        v-for="(item, index) in header"
+          v-for="(item, index) in header"
-        :key="index"
+          :key="index"
-        :style="{
+          :style="{
           width: config[index].width ? config[index].width + 'px' : '',
           textAlign: config[index].align,
           flex: config[index].width ? 'inherit' : 1
         }">
         {{ item.v }}
       </span>
-    </div>
+      </div>
-    <div class="body">
+      <div class="body">
-      <div class="row" v-for="(item, index) in body" :class="[stripe === '1' ? 'stripe' : '']" :key="index">
+        <div class="row" v-for="(item, index) in body" :class="[stripe === '1' ? 'stripe' : '']" :key="index">
-        <div
+          <div
-          v-for="(column, i) in item"
+              v-for="(column, i) in item"
-          :key="i"
+              :key="i"
-          :style="{
+              :style="{
             color: config[i].color,
             textAlign: config[i].align,
             fontSize: config[i].fontSize,
             width: config[i].width ? config[i].width + 'px' : '',
             flex: config[i].width ? 'inherit' : 1
           }">
-          <i v-if="isShowIndex === '1' && i === 0">{{ index + 1 }}</i>
+            <i v-if="isShowIndex === '1' && i === 0">{{ index + 1 }}</i>
-          <render-slot
+            <render-slot
-            v-if="config[i].render"
+                v-if="config[i].render"
-            :render="config[i].render"
+                :render="config[i].render"
-            :row="item"
+                :row="item"
-            :column="column">
+                :column="column">
-          </render-slot>
+            </render-slot>
-          <span v-else :title="column" @click="onClick(config[i], item)">{{ column }}</span>
+            <span v-else :title="column" @click="onClick(config[i], item)">{{ column }}</span>
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  </section>
 </template>
 
 <script>
-  export default {
+export default {
-    name: 'AiDvTable',
+  name: 'AiDvTable',
 
-    components: {
+  components: {
-      renderSlot: {
+    renderSlot: {
-        functional: true,
+      functional: true,
-        props: {
+      props: {
-          render: Function,
+        render: Function,
-          column: {type: [String, Number] },
+        column: {type: [String, Number]},
-          row: {type: [Array, Object] },
+        row: {type: [Array, Object]},
-        },
+      },
-        render: (h, data) => {
+      render: (h, data) => {
-          let params = {
+        let params = {
-            row: data.props.row
+          row: data.props.row
-          }
-          if (data.props.column) {
-            params.column = data.props.column
-          }
-          return data.props.render(h, params)
         }
+        if (data.props.column) {
+          params.column = data.props.column
+        }
+        return data.props.render(h, params)
+      }
+    }
+  },
+
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
+
+    headerStyle: {
+      type: Object,
+      default: () => {
       }
     },
 
-    props: {
+    isShowIndex: {
-      data: {
+      type: String,
-        type: Array,
+      default: '0'
-        default: () => []
+    },
-      },
 
-      headerStyle: {
+    stripe: {
-        type: Object,
+      type: String,
-        default: () => {}
+      default: '1'
-      },
+    },
 
-      isShowIndex: {
+    theme: {
-        type: String,
+      type: String,
-        default: '0'
+      default: '0'
-      },
+    },
 
-      stripe: {
+    config: {
-        type: String,
+      type: Array,
-        default: '1'
+      default: () => []
-      },
+    },
 
-      theme: {
+    size: {
-        type: String,
+      type: String,
-        default: '0'
+      default: 'small'
-      },
+    },
+    simple: Boolean
+  },
 
-      config: {
+  data() {
-        type: Array,
+    return {
-        default: () => []
+      header: [],
+      body: []
+    }
+  },
+  computed: {
+    columns: v => v.header.map((e, i) => {
+      let item = {}
+      Object.values(e).forEach(label => {
+        const {align} = v.config[i]
+        item.align = align
+        item.prop = `col${i}`
+        item.label = label
+      })
+      return item
+    }),
+    tableData: v => v.body.map(arr => {
+      const item = {}
+      Object.values(arr).forEach((value, i) => {
+        item[`col${i}`] = value
+      })
+      return item
+    })
+  },
+  watch: {
+    data: {
+      handler(v) {
+        this.init(v)
       },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    init(value) {
+      if (!value.length) {
+        this.header = []
+        this.body = []
 
-      size: {
+        return false
-        type: String,
+      }
-        default: 'small'
+
+      const headerKey = Object.keys(value[0])[0]
+      const bodyKey = Object.keys(value[0]).filter(v => {
+        return v !== headerKey
+      })
+
+      this.header = value.map(v => {
+        return {
+          v: v[headerKey]
+        }
+      })
+
+      this.body = bodyKey.map(v => {
+        return value.map(e => e[v])
+      })
+    },
+
+    onClick(config, e) {
+      if (config.click && typeof config.click === 'function') {
+        return config.click.call(this, e)
       }
     },
+  }
+}
+</script>
 
-    data () {
+<style lang="scss" scoped>
-      return {
+@import "../../dv";
-        header: [],
+
-        body: []
+.aiDvTable {
+  height: 100%;
+  overflow: hidden;
+
+  ::-webkit-scrollbar {
+    width: 5px;
+    height: 14px;
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    min-height: 20px;
+    background-clip: content-box;
+    box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset;
+  }
+
+  ::-webkit-scrollbar-track {
+    box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 40px;
+    font-size: 16px;
+    padding: 0 16px;
+    color: rgba(255, 255, 255, 0.7);
+    background: rgba(70, 70, 70, 0.35);
+
+    span {
+      flex: 1;
+      text-align: center;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      -o-text-overflow: ellipsis;
+
+      &:first-child {
+        text-align: left;
       }
-    },
+    }
+  }
 
-    watch: {
+  .body {
-      data: {
+    height: calc(100% - 40px);
-        handler (v) {
+    padding: 10px 0;
-          this.init(v)
+    overflow-y: auto;
-        },
+    box-sizing: border-box;
-        deep: true,
+
-        immediate: true
+    .row {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 52px;
+      padding: 0 16px;
+      box-sizing: border-box;
+
+      &.stripe:nth-of-type(2n) {
+        background: rgba(48, 48, 48, 0.4);
       }
-    },
 
-    mounted () {
+      div {
-    },
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 1;
+        font-size: 16px;
+        text-align: center;
+        color: #ffffff;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        -o-text-overflow: ellipsis;
 
-    methods: {
+        span {
-      init (value) {
+          flex: 1;
-        if (!value.length) {
+          overflow: hidden;
-          this.header = []
+          white-space: nowrap;
-          this.body = []
+          text-overflow: ellipsis;
-
+          -o-text-overflow: ellipsis;
-          return false
         }
 
-        const headerKey = Object.keys(value[0])[0]
+        i {
-        const bodyKey = Object.keys(value[0]).filter(v => {
+          width: 20px;
-          return v !== headerKey
+          height: 20px;
-        })
+          line-height: 20px;
+          margin-right: 10px;
+          text-align: center;
+          font-size: 12px;
+          color: #18FEFE;
+          font-style: normal;
+          background: url(./asset/rankbg.png) no-repeat;
+          background-size: 100% 100%;
+        }
 
-        this.header = value.map(v => {
+        &:first-child {
-          return {
+          justify-content: start;
-            v: v[headerKey]
+          text-align: left;
-          }
-        })
-
-        this.body = bodyKey.map(v => {
-          return value.map(e => e[v])
-        })
-      },
-
-      onClick (config, e) {
-        if (config.click && typeof config.click === 'function') {
-          return config.click.call(this, e)
         }
       }
     }
   }
-</script>
 
-<style lang="scss" scoped>
+  &.aiDvTable-mini {
-  .aiDvTable {
+    .header {
-    height: 100%;
+      height: 36px;
-    overflow: hidden;
+    }
 
+    .row {
+      height: 40px;
+    }
+  }
+
+  &.aiDvTable-1 {
     ::-webkit-scrollbar {
       width: 5px;
       height: 14px;
@@ -170,138 +307,26 @@
     ::-webkit-scrollbar-thumb {
       min-height: 20px;
       background-clip: content-box;
-      box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset;
+      box-shadow: 0 0 0 5px rgba(250, 181, 108, 0.5) inset;
     }
 
     ::-webkit-scrollbar-track {
-      box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset;
+      box-shadow: 1px 1px 5px rgba(50, 181, 108, 0.5) inset;
     }
 
     .header {
-      display: flex;
+      background: rgba(226, 121, 81, 0.2);
-      align-items: center;
-      width: 100%;
-      height: 40px;
-      font-size: 16px;
-      padding: 0 16px;
-      color: rgba(255, 255, 255, 0.7);
-      background: rgba(70, 70, 70, 0.35);
-
-      span {
-        flex: 1;
-        text-align: center;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        -o-text-overflow:ellipsis;
-
-        &:first-child {
-          text-align: left;
-        }
-      }
     }
 
     .body {
-      height: calc(100% - 40px);
+      div {
-      padding: 10px 0;
+        i {
-      overflow-y: auto;
+          color: #FFA086;
-      box-sizing: border-box;
+          background: url(./asset/rankbg-dj.png) no-repeat;
-      .row {
+          background-size: 100% 100%;
-        display: flex;
-        align-items: center;
-        width: 100%;
-        height: 52px;
-        padding: 0 16px;
-        box-sizing: border-box;
-
-        &.stripe:nth-of-type(2n) {
-          background: rgba(48, 48, 48, 0.4);
-        }
-
-        div {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          flex: 1;
-          font-size: 16px;
-          text-align: center;
-          color: #ffffff;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          -o-text-overflow:ellipsis;
-
-          span {
-            flex: 1;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            -o-text-overflow:ellipsis;
-          }
-
-          i {
-            width: 20px;
-            height: 20px;
-            line-height: 20px;
-            margin-right: 10px;
-            text-align: center;
-            font-size: 12px;
-            color: #18FEFE;
-            font-style: normal;
-            background: url(./asset/rankbg.png) no-repeat;
-            background-size: 100% 100%;
-          }
-
-          &:first-child {
-            justify-content: start;
-            text-align: left;
-          }
-        }
-      }
-    }
-
-    &.aiDvTable-mini {
-      .header {
-        height: 36px;
-      }
-
-      .row {
-        height: 40px;
-      }
-    }
-
-    &.aiDvTable-1 {
-      ::-webkit-scrollbar {
-        width: 5px;
-        height: 14px;
-      }
-
-      ::-webkit-scrollbar-corner {
-        background: transparent;
-      }
-
-      ::-webkit-scrollbar-thumb {
-        min-height: 20px;
-        background-clip: content-box;
-        box-shadow: 0 0 0 5px rgba(250, 181, 108, 0.5) inset;
-      }
-
-      ::-webkit-scrollbar-track {
-        box-shadow: 1px 1px 5px rgba(50, 181, 108, 0.5) inset;
-      }
-      .header {
-        background: rgba(226, 121, 81, 0.2);
-      }
-
-      .body {
-        div {
-          i {
-            color: #FFA086;
-            background: url(./asset/rankbg-dj.png) no-repeat;
-            background-size: 100% 100%;
-          }
         }
       }
     }
   }
+}
 </style>

packages/bigscreen/designer/components/componentConfig.vue

@@ -103,6 +103,15 @@
               </el-select>
             </div>
           </div>
+          <div class="layout-config__item" v-if="config.type === 'AiDvTable'">
+            <label>简易样式</label>
+            <div class="layout-config__item--right">
+              <el-select size="mini" v-model="config.simple" placeholder="请选择" clearable>
+                <el-option label="是" value="1"/>
+                <el-option label="否" value="0"/>
+              </el-select>
+            </div>
+          </div>
           <div class="layout-config__item" v-if="config.type !== 'AiDvTable'">
             <label>表格行数</label>
             <div class="layout-config__item--right">
@@ -207,12 +216,25 @@
         </div>
       </div>
     </div>
+    <div class="layout-right__content--wrapper">
+      <div class="layout-config__group">
+        <h2>进阶设置</h2>
+        <config-item label="设置弹窗">
+          <config-item label="标题">
+<!--            <el-input v-model="config.dialog.title" clearable/>-->
+          </config-item>
+        </config-item>
+      </div>
+    </div>
   </section>
 </template>
 
 <script>
+import ConfigItem from "./configItem.vue";
+
 export default {
   name: 'componentConfig',
+  components: {ConfigItem},
 
   props: {
     config: {default: () => ({})},
@@ -226,7 +248,7 @@ export default {
         'border11', 'border12', 'border13'],//边框待选项
       summaryList: ['summary0', 'summary1', 'summary2', 'summary3', 'summary4', 'summary6', 'summary5',
         'summary7', 'summary8', 'summary9', 'summary10', 'summary11', 'summary12', 'summary13', 'summary14',
-        'summary15', 'summary16', 'summary17', 'summary18','summary19'],//汇总待选项
+        'summary15', 'summary16', 'summary17', 'summary18', 'summary19'],//汇总待选项
       //是否显示排名
       tableStatus: [
         {label: '是', value: '1'},

packages/bigscreen/designer/config.js

@@ -426,76 +426,78 @@ const components = [{
     }]
   }]
 }, {
-  type: 'table', label: '表格', list: [{
+  label: '表格', list: [
-    label: '表格', type: 'table', list: [{
+    {
-      type: 'table',
+      label: '单表格', list: [{
-      label: '表格',
+        type: 'table',
-      title: '表格',
+        label: '表格',
-      border: 'border6',
+        title: '表格',
-      width: 650,
+        border: 'border6',
-      height: 400,
+        width: 650,
-      zIndex: 1,
+        height: 400,
-      thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/table.png',
+        zIndex: 1,
-      dataX: '',
+        thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/table.png',
-      dataY: [],
+        dataX: '',
-      rowNum: 7,
+        dataY: [],
-      isShowIndex: '1',
+        rowNum: 7,
-      sourceDataId: '',
+        isShowIndex: '1',
-      api: '',
+        sourceDataId: '',
-      apiData: [],
+        api: '',
-      dataType: 'staticData',
+        apiData: [],
-      dynamicData: [],
+        dataType: 'staticData',
-      staticData: [{name: '列1', v: 23, v2: 3}, {name: '列2', v: 12, v2: 4}, {name: '列2', v: 12, v2: 4}]
+        dynamicData: [],
-    }, {
+        staticData: [{name: '列1', v: 23, v2: 3}, {name: '列2', v: 12, v2: 4}, {name: '列2', v: 12, v2: 4}]
-      type: 'AiDvTable',
-      label: '新版表格',
-      title: '新版表格',
-      border: 'border6',
-      width: 650,
-      height: 400,
-      zIndex: 1,
-      thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/table.png',
-      dataX: '',
-      dataY: [],
-      rowNum: 7,
-      stripe: '1',
-      isShowIndex: '1',
-      sourceDataId: '',
-      api: '',
-      config: [{
-        width: '', color: '', align: ''
       }, {
-        width: '', color: '', align: ''
+        type: 'AiDvTable',
+        label: '新版表格',
+        title: '新版表格',
+        border: 'border6',
+        width: 650,
+        height: 400,
+        zIndex: 1,
+        thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/table.png',
+        dataX: '',
+        dataY: [],
+        rowNum: 7,
+        stripe: '1',
+        isShowIndex: '1',
+        sourceDataId: '',
+        api: '',
+        config: [{
+          width: '', color: '', align: ''
+        }, {
+          width: '', color: '', align: ''
+        }, {
+          width: '', color: '', align: ''
+        }],
+        apiData: [],
+        dataType: 'staticData',
+        dynamicData: [],
+        staticData: [{name: '列1', v: 23, v2: 3}, {name: '列2', v: 12, v2: 4}, {name: '列2', v: 12, v2: 4}]
       }, {
-        width: '', color: '', align: ''
+        type: 'AiRanking',
-      }],
+        label: '排行榜',
-      apiData: [],
+        title: '排行榜',
-      dataType: 'staticData',
+        border: 'border6',
-      dynamicData: [],
+        width: 523,
-      staticData: [{name: '列1', v: 23, v2: 3}, {name: '列2', v: 12, v2: 4}, {name: '列2', v: 12, v2: 4}]
+        height: 400,
-    }, {
+        zIndex: 1,
-      type: 'AiRanking',
+        thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/table.png',
-      label: '排行榜',
+        dataX: '',
-      title: '排行榜',
+        dataY: [],
-      border: 'border6',
+        rowNum: 7,
-      width: 523,
+        subType: 'Ranking1',
-      height: 400,
+        stripe: '1',
-      zIndex: 1,
+        isShowIndex: '1',
-      thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/table.png',
+        sourceDataId: '',
-      dataX: '',
+        api: '',
-      dataY: [],
+        apiData: [],
-      rowNum: 7,
+        dataType: 'staticData',
-      subType: 'Ranking1',
+        dynamicData: [],
-      stripe: '1',
+        staticData: [{name: '列1', value: 23}, {name: '列2', value: 12}, {name: '列2', value: 12}]
-      isShowIndex: '1',
+      }]
-      sourceDataId: '',
+    },
-      api: '',
+  ]
-      apiData: [],
-      dataType: 'staticData',
-      dynamicData: [],
-      staticData: [{name: '列1', value: 23}, {name: '列2', value: 12}, {name: '列2', value: 12}]
-    }]
-  }]
 }, {
   type: 'ai3d', label: "3D", list: [{
     label: "3D楼栋", type: 'building', list: [{