网格大屏

packages/bigscreen/viewer/AppGigscreenViewer.vue

@@ -23,6 +23,7 @@
 
 <script>
   import RenderElement from '../designer/components/RenderElement'
+  import AppGridDV from '../../../project/dv/apps/AppGridDV'
 
   export default {
     name: 'AppGigscreenViewer',
@@ -45,6 +46,7 @@
     },
 
     components: {
+      AppGridDV,
       RenderElement
     },
 

project/dv/apps/AppGridDV.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="griddv">
+    <div class="left">
+      <div class="griddv-title">
+        <h2>网格列表</h2>
+      </div>
+      <div class="griddv-tree">
+        <el-tree
+          :data="treeList"
+          :props="defaultProps"
+          @node-click="handleNodeClick"
+          node-key="id"
+          ref="tree"
+          default-expand-all
+          highlight-current>
+        </el-tree>
+      </div>
+    </div>
+    <div class="middle">
+
+    </div>
+    <div class="right" v-if="false">
+
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'AppGridDV',
+
+    label: '网格数据大屏',
+
+    props: {
+      instance: Function,
+      dict: Object,
+    },
+
+    data () {
+      return {
+        treeList: [],
+        defaultProps: {
+          children: 'girdList',
+          label: 'girdName',
+        }
+      }
+    },
+
+    created () {
+      this.getTreeList()
+    },
+
+    mounted () {
+
+    },
+
+    methods: {
+      handleNodeClick (e) {
+        console.log(e)
+      },
+
+      getTreeList () {
+        this.instance.post('/app/appgirdinfo/listAll').then((res) => {
+          if (res.code == 0) {
+            this.treeList = [...res.data]
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .griddv {
+    display: flex;
+    align-items: center;
+    height: 100%;
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .griddv-title {
+      display: flex;
+      width: 320px;
+      height: 62px;
+      background-image: url(../assets/grid/title-bg.png);
+      background-size: 100% 100%;
+
+      h2 {
+        width: 100%;
+        height: 50px;
+        line-height: 50px;
+        padding-left: 24px;
+        font-weight: 600;
+        font-size: 20px;
+        letter-spacing: 1px;
+        color: #fff;
+      }
+    }
+
+    & > div {
+      height: 100%;
+    }
+
+    .right {
+      width: 440px;
+    }
+
+    .middle {
+      flex: 1;
+      margin: 0 20px;
+      background: rgba(7, 11, 35, 0.4);
+      border: 1px solid #2D50B5;
+    }
+
+    .left {
+      width: 320px;
+      background: rgba(7, 11, 35, 0.4);
+      border: 1px solid #2D50B5;
+
+      .griddv-tree {
+        height:  calc(100% - 62px);
+        overflow-y: auto;
+        padding: 0 8px 8px 8px;
+      }
+
+      ::v-deep .el-tree {
+        background: transparent;
+
+        .el-tree-node__expand-icon {
+          color: #eaeff9;
+        }
+
+        .el-tree-node__expand-icon.is-leaf {
+          color: transparent;
+        }
+
+        .el-tree-node__content {
+          height: 32px;
+          color: #eaeff9;
+          font-size: 14px;
+          user-select: none;
+          font-weight: normal!important;
+        }
+
+        .is-current > .el-tree-node__content, .el-tree-node__content:hover {
+          background: linear-gradient(270deg, #4895D9 0%, #2D52CA 100%);
+        }
+      }
+    }
+  }
+</style>