修改

dsk-operate-ui/src/assets/styles/index.scss

@@ -122,6 +122,7 @@ aside {
 //main-container全局样式
 .app-container {
   padding: 16px;
+  //margin-top: 56px;
 }
 
 .components-container {
@@ -355,6 +356,7 @@ ul, li {
       background: #DCEBFF;
     }
     .el-table__fixed{
+      bottom:0 !important;
       tr:nth-child(2n){
         background-color: #F8FBFF;
       }

dsk-operate-ui/src/layout/components/Navbar.vue

 <template>
-  <div id="navBar" class="navbar">
-    <div class="left-menu" :style="{width: scrollerWidth}">
-      <tags-view />
-    </div>
-    <div ref="rightMenu" class="flex-box right-menu">
-<!--      <div class="menu-bells"><img src="@/assets/images/message.png"><i /></div>-->
-<!--      <i class="menu-line" />-->
-      <el-dropdown class="avatar-container" trigger="hover">
-        <div class="flex-box avatar-wrapper">
-          <img v-if="avatar" class="pic-avatar" :src="avatar">
-          <span v-else class="user-avatar">{{ name&&name.slice(0, 1).toUpperCase() }}</span>
-          {{ name }}
-        </div>
-        <el-dropdown-menu slot="dropdown" class="user-dropdown">
-          <router-link to="/user/profile">
-            <el-dropdown-item>用户中心</el-dropdown-item>
-          </router-link>
-          <el-dropdown-item divided @click.native="logout">
-            <span>退出</span>
-          </el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
+  <div ref="navbarWidth" style="width: 100%;background: #ffffff;height: 56px;" >
+    <div id="navBar" class="navbar" :style="{width: navbarWidth}">
+      <div class="left-menu" :style="{width: scrollerWidth}">
+        <tags-view />
+      </div>
+      <div ref="rightMenu" class="flex-box right-menu">
+        <!--      <div class="menu-bells"><img src="@/assets/images/message.png"><i /></div>-->
+        <!--      <i class="menu-line" />-->
+        <el-dropdown class="avatar-container" trigger="hover">
+          <div class="flex-box avatar-wrapper">
+            <img v-if="avatar" class="pic-avatar" :src="avatar">
+            <span v-else class="user-avatar">{{ name&&name.slice(0, 1).toUpperCase() }}</span>
+            {{ name }}
+          </div>
+          <el-dropdown-menu slot="dropdown" class="user-dropdown">
+            <router-link to="/user/profile">
+              <el-dropdown-item>用户中心</el-dropdown-item>
+            </router-link>
+            <el-dropdown-item divided @click.native="logout">
+              <span>退出</span>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
     </div>
   </div>
+
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import elementResizeDetectorMaker from "element-resize-detector"
 import TagsView from './TagsView'
-
 export default {
+  props:['offsetWidth'],
   components: {
     TagsView
   },
   data() {
     return {
-      scrollerWidth: null
+      scrollerWidth: null,
+      navbarWidth: null
     }
   },
   computed: {
@@ -46,6 +50,11 @@ export default {
       'name'
     ])
   },
+  watch: {
+    offsetWidth(newValue, oldValue){
+      this.navbarWidth=`calc(100% - ${newValue}px)`
+    }
+  },
   mounted() {
     const _this = this, erd = elementResizeDetectorMaker(), navBar = document.getElementById("navBar")
     erd.listenTo(navBar, element => {
@@ -55,6 +64,7 @@ export default {
         this.scrollerWidth = (nvWidth - rtWidth - 100)+'px' || '800px'
       })
     })
+    this.navbarWidth=`calc(100% - ${this.offsetWidth}px)`
   },
   methods: {
     async logout() {
@@ -67,7 +77,7 @@ export default {
           location.href = '/index';
         })
       }).catch(() => {});
-    }
+    },
   }
 }
 </script>
@@ -76,9 +86,12 @@ export default {
 .navbar {
   height: 56px;
   overflow: inherit;
-  position: relative;
+  /*position: relative;*/
   background: #fff;
   box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  position: fixed;
+  top:0;
+  z-index: 9999;
 
   .left-menu{
     float: left;

dsk-operate-ui/src/layout/components/TagsView/ScrollPane.vue

@@ -90,6 +90,7 @@ export default {
       height: 100%;
       padding-top: 24px;
       margin-bottom: 0 !important;
+      overflow: auto;
     }
     .is-horizontal{
       width: 0;

dsk-operate-ui/src/layout/index.vue

 <template>
   <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
     <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
-    <sidebar v-if="!sidebar.hide" class="sidebar-container" @handleBar="handleSideBar"/>
+    <sidebar v-if="!sidebar.hide" class="sidebar-container" @handleBar="handleSideBar" id="sidebar"/>
     <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
       <div :class="{'fixed-header':fixedHeader}">
-        <navbar :is-side-bar="isSideBar"/>
-   
+        <navbar :offsetWidth="offsetWidth"/>
       </div>
       <app-main/>
       <right-panel>
@@ -21,7 +20,7 @@ import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
 import { mapState } from 'vuex'
 import variables from '@/assets/styles/variables.scss'
-
+import elementResizeDetectorMaker from "element-resize-detector"
 export default {
   name: 'Layout',
   components: {
@@ -35,7 +34,8 @@ export default {
   mixins: [ResizeMixin],
   data() {
     return {
-      isSideBar: ''
+      isSideBar: '',
+      offsetWidth:null,
     }
   },
   computed: {
@@ -59,13 +59,25 @@ export default {
       return variables;
     }
   },
+  mounted(){
+    this.$nextTick(() => {
+      this.listenSider()
+    })
+  },
   methods: {
     handleClickOutside() {
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
     },
-	handleSideBar(val) {
-	  this.isSideBar = val
-	}
+    handleSideBar(val) {
+      this.isSideBar = val
+      this.listenSider()
+    },
+    listenSider(){
+      const _this = this, erd = elementResizeDetectorMaker(), partBox = document.getElementById("sidebar")
+      erd.listenTo(partBox, element => {
+        this.offsetWidth=partBox.offsetWidth;
+      })
+    },
   }
 }
 </script>

dsk-operate-ui/src/views/macro/economies/component/comparison.vue

@@ -16,7 +16,8 @@
         <span class="flex-box" @click="handleMessage"><img src="@/assets/images/ability_excel.png">导出EXCEL</span>
       </div>
     </div>
-    <div class="table-item">
+    <div class="table-item" ref="regionalStyle">
+      <!--<div class="table-title" :class="fixed == true ? 'fixed' : ''" :style="'width:' + StyWidth">-->
       <div class="table-title">
         <span class="span-tit">指标</span>
         <span class="span-tit">
@@ -288,7 +289,9 @@ export default {
       value4Flag:false,
       value5Flag:false,
       regionData:[],
-      compareList:[{},{},{},{},{}]
+      compareList:[{},{},{},{},{}],
+      fixed: false,
+      StyWidth:null
     }
   },
   watch: {
@@ -296,6 +299,12 @@ export default {
       console.log(newValue)
     }
   },
+  mounted(){
+    // window.addEventListener('scroll', this.handleScroll);
+  },
+  destroyed () {
+    // window.removeEventListener('scroll', this.handleScroll)
+  },
   created() {
     this.dataRegion();
     // this.getData();
@@ -331,6 +340,10 @@ export default {
         this.getData(params)
       }
     })
+
+    this.$nextTick(function () {
+      this.StyWidth = this.$refs.regionalStyle.offsetWidth + 'px';
+    })
   },
   computed: {
     getHeaders() {
@@ -343,6 +356,14 @@ export default {
     }
   },
   methods: {
+    handleScroll () {
+      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+      if (scrollTop > 145) {
+        this.fixed = true
+      } else {
+        this.fixed = false
+      }
+    },
     getData(params){
       params.year=this.queryParams.year;
       multipleCompare(params).then(res => {
@@ -631,6 +652,7 @@ export default {
     }
     .table-item{
       margin-top: 22px;
+      position: relative;
       ::v-deep .el-table{
         .el-table__body{
           width: 100% !important;
@@ -643,7 +665,7 @@ export default {
         }
       }
       .table-title{
-        width: 100%;
+        /*width: 100%;*/
         display: flex;
         /*justify-content:space-around;*/
         border: 1px solid #E6EAF1;
@@ -677,5 +699,10 @@ export default {
         }
       }
     }
+    .fixed{
+      position: fixed;
+      z-index: 999;
+      top: 56px;
+    }
   }
 </style>

dsk-operate-ui/src/views/macro/urban/index.vue

 <template>
-  <div class="app-container urban">
-    <div class="content">
+  <div class="app-container urban" ref="urban">
+    <div class="content" ref="queryForm">
       <div class="flex-box query-box">
         <div class="flex-box query-params">
           <span class="common-title">城投平台</span>
@@ -296,7 +296,9 @@ export default {
       customerId:'',
       companyId:'',
       show_page:true,
-      MaxPage:500
+      MaxPage:500,
+      // 表格高度
+      tableHeight: 0,
     }
   },
   watch:{
@@ -317,6 +319,15 @@ export default {
     this.getType()
     this.querySubmit()
   },
+  mounted() {
+    this.$nextTick(() => {
+      // window.innerHeight 浏览器窗口的可见高度，下面的 220 是除了table最大高度的剩余空间。
+      // let height = this.$refs.urban.offsetHeight - this.$refs.queryForm.offsetHeight;
+      // this.tableHeight = height;
+      // console.log(window.innerHeight,"|||||||||")
+      // console.log(this.$refs.urban.offsetHeight)
+    })
+  },
   methods: {
     getType(){
       uipGroupData({}).then(res => {