Merge branch 'optimize' of github.com:gcpaas/DataRoom into optimize

data-room-ui/packages/BasicComponents/Input/index.vue

@@ -48,26 +48,33 @@ export default {
   data () {
     return { }
   },
+  watch: {
+    'config.customize.value': {
+      handler (val) {
+        this.$store.commit('bigScreen/changeActiveItemConfig', { ...this.config, customize: { ...this.config.customize, value: this.config.customize.value } })
+      }
+    }
+  },
   mounted () {
     this.chartInit()
-    this.updateComponent()
+    // this.changeStyle()
   },
   methods: {
-    updateComponent () {
-      const input = document.querySelector(`#el-input-${this.config.code}`)
+    changeStyle (config) {
+      const input = document.querySelector(`#el-input-${config.code}`)
 
       // const inputIcon = input.querySelector(`.${this.config.customize.icon.name}`)
-      input.style.backgroundColor = this.config.customize.backgroundStyle.backgroundColor
-      input.style.fontSize = this.config.customize.inputStyle.fontSize + 'px'
-      input.style.color = this.config.customize.inputStyle.color
-      input.style.borderColor = this.config.customize.borderStyle.borderColor
-      input.style.borderWidth = this.config.customize.borderStyle.borderWidth + 'px'
-      input.style.borderStyle = this.config.customize.borderStyle.borderStyle
-      input.style.borderRadius = this.config.customize.borderStyle.borderRadius + 'px'
+      input.style.backgroundColor = config.customize.backgroundStyle.backgroundColor
+      input.style.fontSize = config.customize.inputStyle.fontSize + 'px'
+      input.style.color = config.customize.inputStyle.color
+      input.style.borderColor = config.customize.borderStyle.borderColor
+      input.style.borderWidth = config.customize.borderStyle.borderWidth + 'px'
+      input.style.borderStyle = config.customize.borderStyle.borderStyle
+      input.style.borderRadius = config.customize.borderStyle.borderRadius + 'px'
       // inputIcon.style.fontSize = this.config.customize.inputStyle.fontSize + 'px'
-      if (this.config.customize.icon.name) {
-        const inputIcon = document.querySelector(`.${this.config.customize.icon.name}`)
-        inputIcon.style.fontSize = this.config.customize.inputStyle.fontSize + 'px'
+      if (config.customize.icon.name) {
+        const inputIcon = document.querySelector(`.${config.customize.icon.name}`)
+        inputIcon.style.fontSize = config.customize.inputStyle.fontSize + 'px'
       }
     }
   }
@@ -96,6 +103,8 @@ export default {
     ::v-deep .el-input__inner {
       height: 100%;
       width: 100%;
+      background-color:#151a26;
+      border: 1px solid #DCDFE6;
     }
   }
 

data-room-ui/packages/BigScreenComponentMag/MenuContent.vue

@@ -27,6 +27,6 @@ export default {
 <style lang="scss" scoped>
 .right-screen-list-wrap {
   width: 100%;
-  height: 100%;
+  // height: 100%;
 }
 </style>

data-room-ui/packages/BigScreenDesign/RightSetting/G2CustomSetting.vue

@@ -231,15 +231,15 @@ export default {
       // 1、原数组，2、修改后的数组只包含custom，3、合并的时候xy的配置必须放在最前面
       handler (val) {
         const setList = [].concat(...val.map(item => item.list))
-        const newSetList =  [...this.config.setting,...setList]
-        let newArr = []; //存新数组
-        let hash={}
-        newArr=  newSetList.reduce(function (acc, cru,index) {
-          if (!hash[cru['field']]) {
-            hash[cru['field']] = { index: index }
+        const newSetList = [...this.config.setting, ...setList]
+        let newArr = [] // 存新数组
+        const hash = {}
+        newArr = newSetList.reduce(function (acc, cru, index) {
+          if (!hash[cru.field]) {
+            hash[cru.field] = { index: index }
             acc.push(cru)
           } else {
-            acc.splice(hash[cru['field']]['index'], 1, cru)
+            acc.splice(hash[cru.field].index, 1, cru)
           }
           return acc
         }, [])

data-room-ui/packages/BigScreenList/index.vue

@@ -1,154 +1,157 @@
 <template>
   <div class="big-screen-list-wrap">
-    <div class="top-search-wrap">
-      <el-input
-        v-model="searchKey"
-        class="bs-el-input bs-el-input-search"
-        :placeholder="type === 'bigScreenCatalog' ?'请输入大屏名称':'请输入组件名称'"
-        prefix-icon="el-icon-search"
-        clearable
-        @clear="reSearch"
-        @keyup.enter.native="reSearch"
-      />
-      <el-button
-        type="primary"
-        @click="reSearch"
-      >
-        搜索
-      </el-button>
-    </div>
-    <div
-      v-loading="loading"
-      class="list-wrap bs-scrollbar"
-      element-loading-text="加载中"
-      :style="{
-        display: gridComputed ? 'grid' : 'flex',
-        justifyContent: gridComputed ? 'space-around' : 'flex-start'
-      }"
-    >
-      <!-- 第一个是新增大屏卡片 -->
+    <div class="internal-box">
+      <div class="top-search-wrap">
+        <el-input
+          v-model="searchKey"
+          class="bs-el-input bs-el-input-search"
+          :placeholder="type === 'bigScreenCatalog' ?'请输入大屏名称':'请输入组件名称'"
+          prefix-icon="el-icon-search"
+          clearable
+          @clear="reSearch"
+          @keyup.enter.native="reSearch"
+        />
+        <el-button
+          type="primary"
+          @click="reSearch"
+        >
+          搜索
+        </el-button>
+      </div>
       <div
-        class="big-screen-card-wrap"
+        v-loading="loading"
+        class="list-wrap bs-scrollbar"
+        element-loading-text="加载中"
         :style="{
-          width: gridComputed ? 'auto' : '290px'
+          display: gridComputed ? 'grid' : 'flex',
+          justifyContent: gridComputed ? 'space-around' : 'flex-start'
         }"
-        @click="add"
       >
-        <div class="big-screen-card-inner big-screen-card-inner-add">
-          <div class="add-big-screen-card">
-            <div class="add-big-screen-card-inner">
-              <div class="add-big-screen-card-text">
-                新建{{ type === 'bigScreenCatalog' ? '大屏' : '组件' }}
+        <!-- 第一个是新增大屏卡片 -->
+        <div
+          class="big-screen-card-wrap"
+          :style="{
+            width: gridComputed ? 'auto' : '290px'
+          }"
+          @click="add"
+        >
+          <div class="big-screen-card-inner big-screen-card-inner-add">
+            <div class="add-big-screen-card">
+              <div class="add-big-screen-card-inner">
+                <div class="add-big-screen-card-text">
+                  新建{{ type === 'bigScreenCatalog' ? '大屏' : '组件' }}
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-      <!-- 后面遍历 list -->
-      <div
-        v-for="screen in list"
-        :key="screen.id"
-        class="big-screen-card-wrap"
-        :style="{
-          width: gridComputed ? 'auto' : '290px'
-        }"
-      >
-        <div class="big-screen-card-inner">
-          <div class="screen-card__hover">
-            <div class="screen-card__hover-box">
-              <div class="preview">
-                <div
-                  class="screen-card__oper-label circle"
-                  @click="preview(screen)"
-                >
-                  <span>预览</span>
-                </div>
-                <div
-                  class="circle"
-                  @click="design(screen)"
-                >
-                  <span>设计</span>
-                </div>
-                <div
-                  class="circle"
-                  @click="edit(screen)"
-                >
-                  <span>编辑</span>
+        <!-- 后面遍历 list -->
+        <div
+          v-for="screen in list"
+          :key="screen.id"
+          class="big-screen-card-wrap"
+          :style="{
+            width: gridComputed ? 'auto' : '290px'
+          }"
+        >
+          <div class="big-screen-card-inner">
+            <div class="screen-card__hover">
+              <div class="screen-card__hover-box">
+                <div class="preview">
+                  <div
+                    class="screen-card__oper-label circle"
+                    @click="preview(screen)"
+                  >
+                    <span>预览</span>
+                  </div>
+                  <div
+                    class="circle"
+                    @click="design(screen)"
+                  >
+                    <span>设计</span>
+                  </div>
+                  <div
+                    class="circle"
+                    @click="edit(screen)"
+                  >
+                    <span>编辑</span>
+                  </div>
+                  <div
+                    class="circle"
+                    @click="copy(screen)"
+                  >
+                    <span>复制</span>
+                  </div>
+                  <div
+                    class="circle"
+                    @click="del(screen)"
+                  >
+                    <span>删除</span>
+                  </div>
                 </div>
+              </div>
+            </div>
+            <div class="big-screen-card-img">
+              <el-image
+                :src="screen.coverPicture"
+                fit="fill"
+                style="width: 100%; height: 100%"
+              >
                 <div
-                  class="circle"
-                  @click="copy(screen)"
+                  slot="placeholder"
+                  class="image-slot"
                 >
-                  <span>复制</span>
+                  加载中···
                 </div>
                 <div
-                  class="circle"
-                  @click="del(screen)"
+                  slot="error"
+                  class="image-slot"
+                  style="font-size: 20px"
                 >
-                  <span>删除</span>
+                  <div class="error-img-text">
+                    {{ screen.name }}
+                  </div>
                 </div>
-              </div>
+              </el-image>
             </div>
-          </div>
-          <div class="big-screen-card-img">
-            <el-image
-              :src="screen.coverPicture"
-              fit="fill"
-              style="width: 100%; height: 100%"
-            >
+            <div class="big-screen-bottom">
               <div
-                slot="placeholder"
-                class="image-slot"
+                class="left-bigscreen-title"
+                :title="screen.name"
               >
-                加载中···
+                {{ screen.name }}
               </div>
-              <div
-                slot="error"
-                class="image-slot"
-                style="font-size: 20px"
-              >
-                <div class="error-img-text">
-                  {{ screen.name }}
-                </div>
-              </div>
-            </el-image>
-          </div>
-          <div class="big-screen-bottom">
-            <div
-              class="left-bigscreen-title"
-              :title="screen.name"
-            >
-              {{ screen.name }}
-            </div>
             <!--            <div class="right-bigscreen-time-title">-->
             <!--              {{ screen.updateDate || '-' }}-->
             <!--            </div>-->
+            </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <div class="footer-pagination-wrap">
-      <!-- <div class="footer-pagination-wrap-text">
+      <div class="footer-pagination-wrap">
+        <!-- <div class="footer-pagination-wrap-text">
         总共 {{ totalCount }} 个项目
       </div> -->
-      <div class="bs-pagination">
-        <el-pagination
-          class="bs-el-pagination"
-          popper-class="bs-el-pagination"
-          background
-          layout="total, prev, pager, next, sizes"
-          :page-size="size"
-          prev-text="上一页"
-          next-text="下一页"
-          :total="totalCount"
-          :page-sizes="[10, 20, 50, 100]"
-          :current-page="current"
-          @current-change="currentChangeHandle"
-          @size-change="sizeChangeHandle"
-        />
+        <div class="bs-pagination">
+          <el-pagination
+            class="bs-el-pagination"
+            popper-class="bs-el-pagination"
+            background
+            layout="total, prev, pager, next, sizes"
+            :page-size="size"
+            prev-text="上一页"
+            next-text="下一页"
+            :total="totalCount"
+            :page-sizes="[10, 20, 50, 100]"
+            :current-page="current"
+            @current-change="currentChangeHandle"
+            @size-change="sizeChangeHandle"
+          />
+        </div>
       </div>
     </div>
+
     <!-- 新增或编辑弹窗 -->
     <EditForm
       ref="EditForm"
@@ -317,10 +320,13 @@ export default {
   height: 100%;
   // margin:0 16px;
   margin-left: 16px;
-  padding: 16px;
+  // padding: 16px;
   color: #9ea9b2;
   background-color: var(--bs-background-2) !important;
-
+  .internal-box{
+    height: calc(100% - 32px);
+    padding: 16px;
+  }
   .top-search-wrap {
     display: flex;
     align-items: center;
@@ -339,14 +345,15 @@ export default {
   .list-wrap {
     /* display: grid; */
     overflow: auto;
+    padding-right: 5px;
     // 间隙自适应
     justify-content: space-around;
     // max-height: calc(100vh - 304px);
-    height: calc(100% - 96px);
+    max-height: calc(100% - 90px);
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     grid-gap: 15px;
-
+    padding-bottom: 10px;
     // /deep/ .el-loading-mask {
     //   display: flex;
     //   align-items: center;

data-room-ui/packages/BigScreenMag/MenuContent.vue

@@ -35,6 +35,6 @@ export default {
 <style lang="scss" scoped>
 .right-screen-list-wrap {
   width: 100%;
-  height: 100%;
+  // height: 100%;
 }
 </style>

data-room-ui/packages/ComponentList/index.vue

@@ -1,180 +1,182 @@
 <template>
   <div class="big-screen-list-wrap">
-    <div class="top-search-wrap">
-      <el-select
-        v-if="catalogInfo !== 'system'"
-        v-model="catalogCode"
-        class="bs-el-select"
-        popper-class="bs-el-select"
-        placeholder="请选择分组"
-        clearable
-        @change="reSearch"
-      >
-        <el-option
-          v-for="item in catalogList"
-          :key="item.code"
-          :label="item.name"
-          :value="item.code"
+    <div class="internal-box">
+      <div class="top-search-wrap">
+        <el-select
+          v-if="catalogInfo !== 'system'"
+          v-model="catalogCode"
+          class="bs-el-select"
+          popper-class="bs-el-select"
+          placeholder="请选择分组"
+          clearable
+          @change="reSearch"
+        >
+          <el-option
+            v-for="item in catalogList"
+            :key="item.code"
+            :label="item.name"
+            :value="item.code"
+          />
+        </el-select>
+        <el-input
+          v-model="searchKey"
+          class="bs-el-input"
+          placeholder="请输入组件名称"
+          prefix-icon="el-icon-search"
+          clearable
+          @clear="reSearch"
+          @keyup.enter.native="reSearch"
         />
-      </el-select>
-      <el-input
-        v-model="searchKey"
-        class="bs-el-input"
-        placeholder="请输入组件名称"
-        prefix-icon="el-icon-search"
-        clearable
-        @clear="reSearch"
-        @keyup.enter.native="reSearch"
-      />
-      <el-button
-        type="primary"
-        @click="reSearch"
-      >
-        搜索
-      </el-button>
-      <el-button
-        v-if="catalogInfo !== 'system'"
-        type="primary"
-        @click="catalogManage"
-      >
-        分组管理
-      </el-button>
-    </div>
-    <div
-      v-loading="loading"
-      class="list-wrap bs-scrollbar"
-      element-loading-text="加载中"
-      :style="{
-        display: gridComputed ? 'grid' : 'flex',
-        justifyContent: gridComputed ? 'space-around' : 'flex-start'
-      }"
-    >
-      <!-- 第一个是新增大屏卡片 -->
+        <el-button
+          type="primary"
+          @click="reSearch"
+        >
+          搜索
+        </el-button>
+        <el-button
+          v-if="catalogInfo !== 'system'"
+          type="primary"
+          @click="catalogManage"
+        >
+          分组管理
+        </el-button>
+      </div>
       <div
-        v-if="catalogInfo !== 'system'"
-        class="big-screen-card-wrap"
+        v-loading="loading"
+        class="list-wrap bs-scrollbar"
+        element-loading-text="加载中"
         :style="{
-          width: gridComputed ? 'auto' : '290px'
+          display: gridComputed ? 'grid' : 'flex',
+          justifyContent: gridComputed ? 'space-around' : 'flex-start'
         }"
-        @click="add"
       >
-        <div class="big-screen-card-inner big-screen-card-inner-add">
-          <div class="add-big-screen-card">
-            <div class="add-big-screen-card-inner">
-              <div class="add-big-screen-card-text">
-                新建组件
+        <!-- 第一个是新增大屏卡片 -->
+        <div
+          v-if="catalogInfo !== 'system'"
+          class="big-screen-card-wrap"
+          :style="{
+            width: gridComputed ? 'auto' : '290px'
+          }"
+          @click="add"
+        >
+          <div class="big-screen-card-inner big-screen-card-inner-add">
+            <div class="add-big-screen-card">
+              <div class="add-big-screen-card-inner">
+                <div class="add-big-screen-card-text">
+                  新建组件
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-      <!-- 后面遍历 list -->
-      <div
-        v-for="screen in list"
-        :key="screen.id"
-        class="big-screen-card-wrap"
-        :style="{
-          width: gridComputed ? 'auto' : '290px'
-        }"
-      >
-        <div class="big-screen-card-inner">
-          <div class="screen-card__hover">
-            <div class="screen-card__hover-box">
-              <div class="preview">
-                <div
-                  class="screen-card__oper-label circle"
-                  @click="preview(screen)"
-                >
-                  <span>预览</span>
-                </div>
-                <div
-                  v-if="catalogInfo !== 'system'"
-                  class="circle"
-                  @click="design(screen)"
-                >
-                  <span>设计</span>
-                </div>
-                <div
-                  v-if="catalogInfo !== 'system'"
-                  class="circle"
-                  @click="edit(screen)"
-                >
-                  <span>编辑</span>
+        <!-- 后面遍历 list -->
+        <div
+          v-for="screen in list"
+          :key="screen.id"
+          class="big-screen-card-wrap"
+          :style="{
+            width: gridComputed ? 'auto' : '290px'
+          }"
+        >
+          <div class="big-screen-card-inner">
+            <div class="screen-card__hover">
+              <div class="screen-card__hover-box">
+                <div class="preview">
+                  <div
+                    class="screen-card__oper-label circle"
+                    @click="preview(screen)"
+                  >
+                    <span>预览</span>
+                  </div>
+                  <div
+                    v-if="catalogInfo !== 'system'"
+                    class="circle"
+                    @click="design(screen)"
+                  >
+                    <span>设计</span>
+                  </div>
+                  <div
+                    v-if="catalogInfo !== 'system'"
+                    class="circle"
+                    @click="edit(screen)"
+                  >
+                    <span>编辑</span>
+                  </div>
+                  <div
+                    v-if="catalogInfo !== 'system'"
+                    class="circle"
+                    @click="copy(screen)"
+                  >
+                    <span>复制</span>
+                  </div>
+                  <div
+                    v-if="catalogInfo !== 'system'"
+                    class="circle"
+                    @click="del(screen)"
+                  >
+                    <span>删除</span>
+                  </div>
                 </div>
+              </div>
+            </div>
+            <div class="big-screen-card-img">
+              <el-image
+                :src="catalogInfo !== 'system' ? screen.coverPicture : screen.img"
+                fit="fill"
+                style="width: 100%; height: 100%"
+              >
                 <div
-                  v-if="catalogInfo !== 'system'"
-                  class="circle"
-                  @click="copy(screen)"
+                  slot="placeholder"
+                  class="image-slot"
                 >
-                  <span>复制</span>
+                  加载中···
                 </div>
                 <div
-                  v-if="catalogInfo !== 'system'"
-                  class="circle"
-                  @click="del(screen)"
+                  slot="error"
+                  class="image-slot"
+                  style="font-size: 20px"
                 >
-                  <span>删除</span>
+                  <div class="error-img-text">
+                    {{ catalogInfo !== 'system'? screen.name : screen.title }}
+                  </div>
                 </div>
-              </div>
+              </el-image>
             </div>
-          </div>
-          <div class="big-screen-card-img">
-            <el-image
-              :src="catalogInfo !== 'system' ? screen.coverPicture : screen.img"
-              fit="fill"
-              style="width: 100%; height: 100%"
-            >
+            <div class="big-screen-bottom">
               <div
-                slot="placeholder"
-                class="image-slot"
+                class="left-bigscreen-title"
+                :title="catalogInfo !== 'system'? screen.name : screen.title"
               >
-                加载中···
+                {{ catalogInfo !== 'system'? screen.name : screen.title }}
               </div>
-              <div
-                slot="error"
-                class="image-slot"
-                style="font-size: 20px"
-              >
-                <div class="error-img-text">
-                  {{ catalogInfo !== 'system'? screen.name : screen.title }}
-                </div>
-              </div>
-            </el-image>
-          </div>
-          <div class="big-screen-bottom">
-            <div
-              class="left-bigscreen-title"
-              :title="catalogInfo !== 'system'? screen.name : screen.title"
-            >
-              {{ catalogInfo !== 'system'? screen.name : screen.title }}
             </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <div
-      v-if="catalogInfo !== 'system'"
-      class="footer-pagination-wrap"
-    >
-      <!-- <div class="footer-pagination-wrap-text">
+      <div
+        v-if="catalogInfo !== 'system'"
+        class="footer-pagination-wrap"
+      >
+        <!-- <div class="footer-pagination-wrap-text">
         总共 {{ totalCount }} 个项目
       </div> -->
-      <div class="bs-pagination">
-        <el-pagination
-          class="bs-el-pagination"
-          popper-class="bs-el-pagination"
-          background
-          layout="total, prev, pager, next, sizes"
-          :page-size="size"
-          prev-text="上一页"
-          next-text="下一页"
-          :total="totalCount"
-          :page-sizes="[10, 20, 50, 100]"
-          :current-page="current"
-          @current-change="currentChangeHandle"
-          @size-change="sizeChangeHandle"
-        />
+        <div class="bs-pagination">
+          <el-pagination
+            class="bs-el-pagination"
+            popper-class="bs-el-pagination"
+            background
+            layout="total, prev, pager, next, sizes"
+            :page-size="size"
+            prev-text="上一页"
+            next-text="下一页"
+            :total="totalCount"
+            :page-sizes="[10, 20, 50, 100]"
+            :current-page="current"
+            @current-change="currentChangeHandle"
+            @size-change="sizeChangeHandle"
+          />
+        </div>
       </div>
     </div>
     <!-- 新增或编辑弹窗 -->
@@ -424,12 +426,15 @@ export default {
 .big-screen-list-wrap {
   position: relative;
   height: 100%;
-  padding: 16px;
+  // padding: 16px;
   // margin:0 16px;
   margin-left: 16px;
   color: #9ea9b2;
   background-color: var(--bs-background-2) !important;
-
+  .internal-box{
+    height: calc(100% - 32px);
+    padding: 16px;
+  }
   .top-search-wrap {
     display: flex;
     align-items: center;
@@ -454,15 +459,16 @@ export default {
 
   .list-wrap {
     /* display: grid; */
-    overflow: auto;
+  overflow: auto;
+  padding-right: 5px;
     // 间隙自适应
     justify-content: space-around;
     // max-height: calc(100vh - 304px);
-    height: calc(100% - 96px);
+    max-height: calc(100% - 90px);
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     grid-gap: 15px;
-
+    padding-bottom: 10px;
     // /deep/ .el-loading-mask {
     //   display: flex;
     //   align-items: center;

data-room-ui/packages/DataSetManagement/src/index.vue

@@ -604,6 +604,9 @@ export default {
 @import '../../assets/style/bsTheme.scss';
 @import '../../assets/style/zTree/treePackUp.scss';
 
+::v-deep .big-screen-router-view-wrap{
+  padding-left: 16px !important;
+}
 .bs-pagination {
   ::v-deep .el-input__inner {
     width: 110px !important;
@@ -618,29 +621,6 @@ export default {
   }
 }
 
-.right-box {
-  margin-left: 20px;
-
-  // ::v-deep .ztreeNodeMenu {
-  //   ul {
-  //     background-color: var(--bs-background-1);
-  //   }
-
-  //   li:hover {
-  //     background-color: var(--bs-el-color-primary);
-  //   }
-
-  //   span {
-  //     color: var(--bs-el-text);
-  //   }
-
-  //   .triangle {
-  //     background-color: var(--bs-background-1) !important;
-  //   }
-  // }
-
-}
-
 ::v-deep .left-tab-box {
   span {
     color: var(--bs-el-text);

data-room-ui/packages/DataSetSetting/dataSetSetting.vue

@@ -96,7 +96,9 @@ export default {
 
 <style lang="scss" scoped>
 @import '../assets/style/bsTheme.scss';
-
+::v-deep .big-screen-router-view-wrap{
+  padding-left: 16px !important;
+}
 .data-set-wrap {
   /deep/ .el-dialog__body {
     position: relative;
@@ -123,6 +125,12 @@ export default {
   }
 
   .bs-data-set-management {
+    ::v-deep .bs-container{
+      margin-left: 0 !important;
+    }
+    ::v-deep  .layout {
+        position: absolute !important;
+      }
     ::v-deep .ztree {
       height: auto !important;
     }

data-room-ui/packages/DataSourceManagement/src/index.vue

@@ -178,6 +178,10 @@ export default {
   },
   mounted () {
     this.init()
+    const layoutEl = document.querySelector('.big-screen-router-view-wrap')
+    if (layoutEl) {
+      layoutEl.style.padding = '16px'
+    }
   },
   methods: {
     // 获取当前选择数据集id

data-room-ui/packages/Layout/BigScreenHomeLayout/index.vue

@@ -149,7 +149,9 @@ export default {
     height: calc(100vh - 150px);
     background-color: var(--bs-background-1);
     box-sizing: border-box;
-    padding: 16px 16px 16px 0;
+    padding-top: 16px;
+    padding-right: 16px;
+    padding-bottom: 16px;
   }
 }
 

data-room-ui/packages/SourceList/index.vue

@@ -1,162 +1,165 @@
 <template>
   <div class="big-screen-list-wrap">
-    <div class="top-search-wrap">
-      <el-input
-        v-model="searchKey"
-        class="bs-el-input"
-        placeholder="请输入图片名称"
-        prefix-icon="el-icon-search"
-        clearable
-        @clear="reSearch"
-        @keyup.enter.native="reSearch"
-      />
-      <el-select
-        v-model="extend"
-        class="bs-el-select"
-        popper-class="bs-el-select"
-        placeholder="请选择图片格式"
-        clearable
-        @change="reSearch"
-      >
-        <el-option
-          v-for="item in options"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
+    <div class="internal-box">
+      <div class="top-search-wrap">
+        <el-input
+          v-model="searchKey"
+          class="bs-el-input"
+          placeholder="请输入图片名称"
+          prefix-icon="el-icon-search"
+          clearable
+          @clear="reSearch"
+          @keyup.enter.native="reSearch"
         />
-      </el-select>
-      <el-button
-        size="small"
-        style="margin-right: 20px"
-        type="primary"
-        @click="reSearch"
-      >
-        搜索
-      </el-button>
-      <el-upload
-        accept="image/*, video/*"
-        class="upload-demo"
-        :action="upLoadUrl"
-        :headers="headers"
-        :data="{ module: code }"
-        :before-upload="beforeUpload"
-        :on-success="uploadSuccess"
-        :on-error="uploadError"
-        multiple
-        :file-list="fileList"
-        :show-file-list="false"
-      >
+        <el-select
+          v-model="extend"
+          class="bs-el-select"
+          popper-class="bs-el-select"
+          placeholder="请选择图片格式"
+          clearable
+          @change="reSearch"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
         <el-button
           size="small"
+          style="margin-right: 20px"
           type="primary"
+          @click="reSearch"
         >
-          上传资源
+          搜索
         </el-button>
-      </el-upload>
-    </div>
-    <div
-      v-if="list.length !== 0"
-      v-loading="loading"
-      class="list-wrap bs-scrollbar"
-      element-loading-text="加载中"
-      :style="{
-        display: gridComputed ? 'grid' : 'flex',
-        justifyContent: gridComputed ? 'space-around' : 'flex-start'
-      }"
-    >
-      <!-- <div v-if="list.length !== 0"> -->
+        <el-upload
+          accept="image/*, video/*"
+          class="upload-demo"
+          :action="upLoadUrl"
+          :headers="headers"
+          :data="{ module: code }"
+          :before-upload="beforeUpload"
+          :on-success="uploadSuccess"
+          :on-error="uploadError"
+          multiple
+          :file-list="fileList"
+          :show-file-list="false"
+        >
+          <el-button
+            size="small"
+            type="primary"
+          >
+            上传资源
+          </el-button>
+        </el-upload>
+      </div>
       <div
-        v-for="screen in list"
-        :key="screen.id"
-        class="big-screen-card-wrap"
+        v-if="list.length !== 0"
+        v-loading="loading"
+        class="list-wrap bs-scrollbar"
+        element-loading-text="加载中"
         :style="{
-          width: gridComputed ? 'auto' : '290px'
+          display: gridComputed ? 'grid' : 'flex',
+          justifyContent: gridComputed ? 'space-around' : 'flex-start'
         }"
       >
-        <div class="big-screen-card-inner">
-          <div class="screen-card__hover">
-            <div class="screen-card__hover-box">
-              <div class="preview">
-                <div
-                  class="screen-card__oper-label circle"
-                  @click="preview(screen)"
-                >
-                  <span>预览</span>
-                </div>
-                <div
-                  class="circle"
-                  @click="downLoad(screen)"
-                >
-                  <span>下载</span>
-                </div>
-                <div
-                  class="circle"
-                  @click="del(screen)"
-                >
-                  <span>删除</span>
+        <!-- <div v-if="list.length !== 0"> -->
+        <div
+          v-for="screen in list"
+          :key="screen.id"
+          class="big-screen-card-wrap"
+          :style="{
+            width: gridComputed ? 'auto' : '290px'
+          }"
+        >
+          <div class="big-screen-card-inner">
+            <div class="screen-card__hover">
+              <div class="screen-card__hover-box">
+                <div class="preview">
+                  <div
+                    class="screen-card__oper-label circle"
+                    @click="preview(screen)"
+                  >
+                    <span>预览</span>
+                  </div>
+                  <div
+                    class="circle"
+                    @click="downLoad(screen)"
+                  >
+                    <span>下载</span>
+                  </div>
+                  <div
+                    class="circle"
+                    @click="del(screen)"
+                  >
+                    <span>删除</span>
+                  </div>
+                  <div
+                    class="circle"
+                    @click="copy(screen)"
+                  >
+                    <span>链接</span>
+                  </div>
                 </div>
+              </div>
+            </div>
+            <div class="big-screen-card-img">
+              <el-image
+                :src="screen.url"
+                fit="contain"
+                style="width: 100%; height: 100%"
+              >
                 <div
-                  class="circle"
-                  @click="copy(screen)"
+                  slot="placeholder"
+                  class="image-slot"
                 >
-                  <span>链接</span>
+                  加载中···
                 </div>
-              </div>
+              </el-image>
             </div>
-          </div>
-          <div class="big-screen-card-img">
-            <el-image
-              :src="screen.url"
-              fit="contain"
-              style="width: 100%; height: 100%"
-            >
+            <div class="big-screen-bottom">
               <div
-                slot="placeholder"
-                class="image-slot"
+                class="left-bigscreen-title"
+                :title="screen.originalName"
               >
-                加载中···
+                {{ screen.originalName }}
               </div>
-            </el-image>
-          </div>
-          <div class="big-screen-bottom">
-            <div
-              class="left-bigscreen-title"
-              :title="screen.originalName"
-            >
-              {{ screen.originalName }}
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <div
-      v-else
-      class="empty"
-    >
-      暂无数据
-    </div>
+      <div
+        v-else
+        class="empty"
+      >
+        暂无数据
+      </div>
 
-    <div class="footer-pagination-wrap">
-      <!-- <div class="footer-pagination-wrap-text">
+      <div class="footer-pagination-wrap">
+        <!-- <div class="footer-pagination-wrap-text">
         总共 {{ totalCount }} 个项目
       </div> -->
-      <div class="bs-pagination">
-        <el-pagination
-          class="bs-el-pagination"
-          popper-class="bs-el-pagination"
-          background
-          layout="total, prev, pager, next, sizes"
-          :page-size="size"
-          prev-text="上一页"
-          next-text="下一页"
-          :total="totalCount"
-          :page-sizes="[10, 20, 50, 100]"
-          :current-page="current"
-          @current-change="currentChangeHandle"
-          @size-change="sizeChangeHandle"
-        />
+        <div class="bs-pagination">
+          <el-pagination
+            class="bs-el-pagination"
+            popper-class="bs-el-pagination"
+            background
+            layout="total, prev, pager, next, sizes"
+            :page-size="size"
+            prev-text="上一页"
+            next-text="下一页"
+            :total="totalCount"
+            :page-sizes="[10, 20, 50, 100]"
+            :current-page="current"
+            @current-change="currentChangeHandle"
+            @size-change="sizeChangeHandle"
+          />
+        </div>
       </div>
     </div>
+
     <!-- 新增或编辑弹窗 -->
     <EditForm
       ref="EditForm"
@@ -327,14 +330,17 @@ export default {
 @import '../assets/style/bsTheme.scss';
 .big-screen-list-wrap {
   position: relative;
-  height: 100%;
+  height: calc(100%);
   // height: calc(100% - 16px);
-  padding: 16px;
+  // padding: 16px;
   color: #9ea9b2;
   // margin:0 16px;
   margin-left: 16px;
   background-color: var(--bs-background-2) !important;
-
+  .internal-box{
+    height: calc(100% - 32px);
+    padding: 16px;
+  }
   .top-search-wrap {
     display: flex;
     align-items: center;
@@ -360,14 +366,15 @@ export default {
   .list-wrap {
     /* display: grid; */
     overflow: auto;
+    padding-right: 5px;
     // 间隙自适应
     justify-content: space-around;
     // max-height: calc(100vh - 304px);
-    height: calc(100% - 96px);
+    max-height: calc(100% - 90px);
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     grid-gap: 15px;
-
+    padding-bottom: 10px;
     // /deep/ .el-loading-mask {
     //   display: flex;
     //   align-items: center;

data-room-ui/packages/SourceMag/MenuContent.vue

@@ -33,6 +33,6 @@ export default {
 <style lang="scss" scoped>
 .right-screen-list-wrap {
   width: 100%;
-  height: 100%;
+  // height: 100%;
 }
 </style>

data-room-ui/packages/assets/style/bsTheme.scss

@@ -99,7 +99,9 @@
     color: var(--bs-el-text) !important;
     border-color: var(--bs-el-border) !important;
 
-
+    .cell {
+      color: var(--bs-el-text) !important;
+    }
     th.is-leaf {
       background-color: var(--bs-el-background-1) !important;
     }
@@ -338,7 +340,9 @@
     border-top-color: var(--bs-el-background-1) !important;
 
     &:after {
-      display: none;
+      border-bottom-color: var(--bs-el-background-1) !important;
+      border-top-color: var(--bs-el-background-1) !important;
+      display: none !important;
     }
   }
 
@@ -468,7 +472,10 @@
     border-bottom-color: var(--bs-el-background-1) !important;
 
     &:after {
+      border-bottom-color: var(--bs-el-background-1) !important;
+      border-top-color: var(--bs-el-background-1) !important;
       display: none !important;
+
     }
   }
 }

data-room-ui/packages/assets/style/common/index.scss

@@ -6,16 +6,16 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
 @import "~element-ui/packages/theme-chalk/src/index";
 // 布局样式
 .bs-container {
+  position: relative;
   height: 100% !important;
   // width: 100%;
   // position: absolute;
   box-sizing: border-box;
   // padding: 16px;
-  margin-left: 16px;
   background-color: var(--bs-background-1);
   .inner-container {
     height: 100% !important;
-    background-color: var(--bs-background-2);
+    background-color: var(--bs-background-2) !important;
 
     .filter-container {
       padding: 16px 16px 6px;
@@ -41,6 +41,9 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
 
     // page页样式
     .bs-pagination {
+      position: absolute;
+      right: 0;
+      bottom: 16px;
       padding: 0 10px 0px 16px;
     }
 

data-room-ui/packages/assets/style/zTree/treePackUp.scss

@@ -45,6 +45,7 @@
 }
 
 .visible-pack-up {
+  position: absolute !important;
   right: 7px;
   display: flex;
   height: 40px !important;
@@ -96,14 +97,15 @@
   user-select: none;
   width: 15px;
   z-index: 1;
-  width: 14px;
+  width: 16px;
   display: flex;
+  align-items: center;
   height: auto;
   background-color: var(--bs-el-background-1);
   height: 100%;
 
   a {
-    align-self: center;
+    position: unset !important;
     display: block;
     height: 100px;
     line-height: 0px;
@@ -134,5 +136,5 @@
 
 .right-box {
   width: 75%;
-  // margin-left: 1px;
+  margin-left: 16px;
 }

data-room-ui/packages/assets/style/zTree/zTree.scss

@@ -1,5 +1,6 @@
 
 .tree-box {
+  // background-color: ;
   padding: 0 18px 10px 0;
 }