实训/设计平台 左侧地图列表样式调整

src/views/designPlatform/demonList.vue

@@ -1,19 +1,21 @@
 <template>
   <div v-loading="loading" class="joylink-card map-list-main">
-    <div class="clearfix">
-      <span>{{ $t('map.publishedMapList') }}</span>
+    <div>
+      <div class="mapListName">
+        <span>{{ $t('map.publishedMapList') }}</span>
+      </div>
+      <template v-if="!getMapByCode">
+        <filter-city ref="filerCity" filter-empty :local-param-name="localParamName" @filterSelectChange="refresh" />
+        <el-input v-model="filterText" :placeholder="this.$t('global.filteringKeywords')" clearable />
+      </template>
     </div>
     <div class="text_item">
-      <filter-city v-if="!getMapByCode" ref="filerCity" filter-empty :local-param-name="localParamName" @filterSelectChange="refresh" />
-      <el-input v-if="!getMapByCode" v-model="filterText" :placeholder="this.$t('global.filteringKeywords')" clearable />
-      <div class="tree_mian_box">
-        <el-tree ref="tree" class="tree_box" :data="treeList" :default-expanded-keys="defaultShowKeys" node-key="id" :props="defaultProps" highlight-current :span="22" :filter-node-method="filterNode" @node-click="clickEvent">
-          <span slot-scope="{ node:tnode, data }">
-            <span class="el-icon-tickets" :style="{color: data.valid ? 'green':''}" />
-            <span>&nbsp;{{ tnode.label }}</span>
-          </span>
-        </el-tree>
-      </div>
+      <el-tree ref="tree" :data="treeList" :default-expanded-keys="defaultShowKeys" node-key="id" :props="defaultProps" highlight-current :span="22" :filter-node-method="filterNode" @node-click="clickEvent">
+        <span slot-scope="{ node:tnode, data }">
+          <span class="el-icon-tickets" :style="{color: data.valid ? 'green':''}" />
+          <span>&nbsp;{{ tnode.label }}</span>
+        </span>
+      </el-tree>
     </div>
   </div>
 </template>
@@ -231,45 +233,28 @@ export default {
 };
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
-    .back-home {
-        float: right;
-        cursor: pointer;
-
-    &:hover {
-         color: #3ea726;
-     }
-    }
     .text_item{
-        height: 100%;
-        padding-top: 47px;
-        .tree_mian_box{
-            height: calc(100% - 76px);
-        }
+        width: 100%;
+        flex: 1;
+        overflow: auto;
+        padding-bottom: 10px;
+        padding-top: 5px;
     }
 
     .map-list-main{
-        text-align:left;
-		height: 100%;
-        position: relative;
+        height: 100%;
+        display:flex;
+        flex-direction:column;
+    }
+    .mapListName{
+        padding: 15px 0px 15px 20px;
+        border-bottom: 1px solid #EBEEF5;
     }
-	.clearfix{
-		padding: 0 20px;
-		border-bottom: 1px solid #EBEEF5;
-		box-sizing: border-box;
-		height: 47px;
-		line-height: 47px;
-        position: absolute;
-        width:100%;
-	}
-	.tree_box{
-		height: 100%;
-	}
 </style>
 <style>
     .el-tree {
         overflow-x: hidden;
     }
-
     .el-tree-node.is-current>.el-tree-node__content {
         background-color: #e4e3e3 !important;
     }

src/views/trainingPlatform/demonList.vue

@@ -1,37 +1,39 @@
 <template>
   <div v-loading="loading" class="joylink-card map-list-main">
-    <div class="clearfix">
-      <span>{{ $t('global.mapList') }}</span>
+    <div>
+      <div class="mapListName">
+        <span>{{ $t('global.mapList') }}</span>
+      </div>
+      <template v-if="!IsProject">
+        <filter-city ref="filerCity" filter-empty local-param-name="training_cityCode" @filterSelectChange="refresh" />
+        <el-input v-model="filterText" :placeholder="this.$t('global.filteringKeywords')" clearable />
+      </template>
     </div>
     <div class="left-map-list">
-      <filter-city v-if="!getMapByCode" ref="filerCity" filter-empty local-param-name="training_cityCode" @filterSelectChange="refresh" />
-      <el-input v-if="!getMapByCode" v-model="filterText" :placeholder="this.$t('global.filteringKeywords')" clearable />
-      <div style="height: calc(100% - 76px); overflow: auto;">
-        <el-tree
-          ref="tree"
-          :data="treeList"
-          node-key="key"
-          :props="{children: 'children',label: 'name'}"
-          highlight-current
-          :span="22"
-          :filter-node-method="filterNode"
-          :default-expanded-keys="expandList"
-          @node-click="clickEvent"
-          @node-expand="nodeExpand"
-          @node-collapse="nodeCollapse"
-        >
-          <span slot-scope="{ node }">
-            <span
-              class="el-icon-tickets"
-            />
-            <span v-if="node.data.id ==='Simulation'">&nbsp;{{ node.data.name+ $t('global.simulationSystem') }}</span>
-            <span v-else-if="node.data.id ==='Lesson'">&nbsp;{{ node.data.name+ $t('global.lessonSystem') }}</span>
-            <span v-else-if="node.data.id ==='Exam'">&nbsp;{{ node.data.name+ $t('global.examSystem') }}</span>
-            <span v-else-if="node.data.id ==='Plan'">&nbsp;{{ node.data.name+ $t('global.runPlanSystem') }}</span>
-            <span v-else>&nbsp;{{ node.data.name }}</span>
-          </span>
-        </el-tree>
-      </div>
+      <el-tree
+        ref="tree"
+        :data="treeList"
+        node-key="key"
+        :props="{children: 'children',label: 'name'}"
+        highlight-current
+        :span="22"
+        :filter-node-method="filterNode"
+        :default-expanded-keys="expandList"
+        @node-click="clickEvent"
+        @node-expand="nodeExpand"
+        @node-collapse="nodeCollapse"
+      >
+        <span slot-scope="{ node }">
+          <span
+            class="el-icon-tickets"
+          />
+          <span v-if="node.data.id ==='Simulation'">&nbsp;{{ node.data.name+ $t('global.simulationSystem') }}</span>
+          <span v-else-if="node.data.id ==='Lesson'">&nbsp;{{ node.data.name+ $t('global.lessonSystem') }}</span>
+          <span v-else-if="node.data.id ==='Exam'">&nbsp;{{ node.data.name+ $t('global.examSystem') }}</span>
+          <span v-else-if="node.data.id ==='Plan'">&nbsp;{{ node.data.name+ $t('global.runPlanSystem') }}</span>
+          <span v-else>&nbsp;{{ node.data.name }}</span>
+        </span>
+      </el-tree>
     </div>
   </div>
 </template>
@@ -65,9 +67,9 @@ export default {
         project() {
             return getSessionStorage('project');
         },
-        getMapByCode() {
-            const project = getSessionStorage('project');
-            return GetMapListByProjectList.includes(project);
+        IsProject() {
+            // 实训平台 是否为通过项目code获取地图列表的项目
+            return GetMapListByProjectList.includes(this.project);
         }
     },
     watch: {
@@ -76,7 +78,7 @@ export default {
         }
     },
     mounted() {
-        if (this.getMapByCode) {
+        if (this.IsProject) {
             this.refresh();
         }
     },
@@ -148,7 +150,7 @@ export default {
             this.filterSelect = filterSelect;
             try {
                 let res = {};
-                if (this.getMapByCode) {
+                if (this.IsProject) {
                     res = await getSubSystemByProjectCode();
                 } else {
                     res = await getTrainingSystemList(filterSelect);
@@ -210,37 +212,26 @@ export default {
 };
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
-    .clearfix{
-        width:100%;
-        height: 47px;
-        line-height: 47px;
-        padding-left: 17px;
-        position:absolute;
-    }
-    .back-home {
-        float: right;
-        cursor: pointer;
-
-    &:hover {
-         color: #3ea726;
-     }
+    .mapListName{
+        padding: 15px 0px 15px 17px;
     }
     .left-map-list{
         width: 100%;
-        height: 100%;
-        padding-top: 47px;
+        flex: 1;
+        overflow: auto;
+        padding-bottom: 10px;
+        padding-top: 5px;
     }
     .map-list-main{
-        text-align:left;
         height: 100%;
-        position: relative;
+        display:flex;
+        flex-direction:column;
     }
 </style>
 <style>
     .el-tree {
         overflow-x: hidden;
     }
-
     .el-tree-node.is-current>.el-tree-node__content {
         background-color: #e4e3e3 !important;
     }