伸缩功能

src/components/pannel/index.html

@@ -11,6 +11,7 @@
       </div>
       <div class="more">
         <slot name="header"></slot>
+        <div v-show="flexIble" class="flexIble hover_pointer" :class="[isOpen ? 'flexIble_open' : '']" @click="open"></div>
       </div>
     </div>
     <div class="light"></div>

src/components/pannel/index.js

@@ -9,6 +9,13 @@ export default {
       type: String,
       default: 'bk_normal'
     },
+    /**
+     * 是否可以伸缩
+     */
+    flexIble: {
+      type: Boolean,
+      default: false
+    },
     // 定义跳转页面url
     uri: {
       type: String,
@@ -29,14 +36,19 @@ export default {
     style: function () {
       return {
         height: this.height + 'px',
-        width: this.width + 'px'
+        width: this.isOpen ? 1000 + 'px' : this.width + 'px'
       };
     }
   },
   data () {
     return {
+      // 是否展开
+      isOpen: false
     };
   },
   methods: {
+    open () {
+      this.isOpen = !this.isOpen
+    }
   }
 };

src/components/pannel/index.scss

@@ -33,6 +33,7 @@
       margin-top: 2px;
       height: 32px;
       background: rgba(8, 33, 71, 1);
+      justify-content: space-between;
 
       .title_bk {
         // font-style: italic;
@@ -113,6 +114,21 @@
   }
 }
 
+.flexIble {
+  z-index: 4;
+  width: 16px;
+  height: 16px;
+  background: url('./close.png');
+  background-size: 100% 100%;
+}
+
+.flexIble_open {
+  width: 16px;
+  height: 16px;
+  background: url('./open.png') !important;
+  background-size: 100% 100%;
+}
+
 @keyframes lightmove {
 
   /* 动画关键帧 */

src/style/_base.scss

@@ -36,6 +36,9 @@ body {
   }
 
   .right_side {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
     position: absolute;
     right: 20px;
     top: 100px;

src/views/property/comps/left/bottom/1/index.html

@@ -1,4 +1,4 @@
-<Pannel title="经营性资产分析" height="340">
+<Pannel title="经营性资产分析" height="340" flexIble>
   <div class="full">
     <div class="top">
       <PannelTabs @change="tabChange" :data="pannelTabData"></PannelTabs>

src/views/property/comps/left/bottom/3/index.html

@@ -1,4 +1,4 @@
 
-<Pannel title="资产长期闲置预警" height="305">
+<Pannel title="资产长期闲置预警" height="305" flexIble>
   <ScrollTable :headers="headers" :data="data"></ScrollTable>
 </Pannel>

src/views/property/comps/left/bottom/4/index.html

@@ -1,4 +1,4 @@
 
-<Pannel title="负债组织清单" height="305">
+<Pannel title="负债组织清单" height="305" flexIble>
   <ScrollTable :headers="headers" :data="data"></ScrollTable>
 </Pannel>

src/views/property/comps/left/middle/3/index.html

@@ -1,4 +1,4 @@
 
-<Pannel title="资源不规范出租预警" height="305">
+<Pannel title="资源不规范出租预警" height="305" flexIble>
   <ScrollTable :headers="headers" :data="data"></ScrollTable>
 </Pannel>

src/views/property/comps/left/top/3/index.html

@@ -1,4 +1,4 @@
 
-<Pannel title="资源处置预警" height="305">
+<Pannel title="资源处置预警" height="305" flexIble>
   <ScrollTable :headers="headers" :data="data"></ScrollTable>
 </Pannel>

src/views/property/comps/right/bottom/3/index.html

@@ -1,4 +1,4 @@
 
-<Pannel title="合同长期未执行预警" height="305">
+<Pannel title="合同长期未执行预警" height="305" flexIble>
   <ScrollTable :headers="headers" :data="data"></ScrollTable>
 </Pannel>

src/views/property/comps/right/bottom/4/index.html

@@ -1,4 +1,4 @@
 
-<Pannel title="债务组织清单" height="305">
+<Pannel title="债务组织清单" height="305" flexIble>
   <ScrollTable :headers="headers" :data="data"></ScrollTable>
 </Pannel>

src/views/property/comps/right/middle/3/index.html

@@ -1,4 +1,4 @@
 
-<Pannel title="合同到期预警" height="305">
+<Pannel title="合同到期预警" height="305" flexIble>
   <ScrollTable :headers="headers" :data="data"></ScrollTable>
 </Pannel>

src/views/property/comps/right/top/3/index.html

@@ -1,4 +1,4 @@
 
-<Pannel title="合同结款到期预警" height="305">
+<Pannel title="合同结款到期预警" height="305" flexIble>
   <ScrollTable :headers="headers" :data="data"></ScrollTable>
 </Pannel>

src/views/property/main-gis/index.scss

@@ -21,7 +21,6 @@
       .legend_item {
         display: flex;
         justify-content: center;
-        // border: 1px solid red;
         align-items: center;
 
         .icon {

src/views/resources/comps/left/bottom/1/index.html

@@ -1,4 +1,4 @@
-<Pannel title="资金支出分析" height="340">
+<Pannel title="资金支出分析" height="340" flexIble>
   <div class="full">
     <div class="top">
       <PannelTabs @change="tabChange" :data="pannelTabData"></PannelTabs>

src/views/resources/comps/left/bottom/2/index.html

@@ -1,4 +1,4 @@
 
-<Pannel title="资金往来不规范预警分析" height="305">
+<Pannel title="资金往来不规范预警分析" height="305" flexIble>
   <ScrollTable :headers="headers" :data="data"></ScrollTable>
 </Pannel>

src/views/resources/comps/left/middle/2/index.html

@@ -1,4 +1,4 @@
 
-<Pannel title="资源不规范出租预警" height="305">
+<Pannel title="资源不规范出租预警" height="305" flexIble>
   <ScrollTable :headers="headers" :data="data"></ScrollTable>
 </Pannel>

src/views/resources/comps/left/top/2/index.html

@@ -1,4 +1,4 @@
 
-<Pannel title="资源处置预警" height="305">
+<Pannel title="资源处置预警" height="305" flexIble>
   <ScrollTable :headers="headers" :data="data"></ScrollTable>
 </Pannel>

src/views/resources/comps/right/bottom/2/index.html

@@ -1,4 +1,4 @@
 
-<Pannel title="合同长期未执行预警" height="305">
+<Pannel title="合同长期未执行预警" height="305" flexIble>
   <ScrollTable :headers="headers" :data="data"></ScrollTable>
 </Pannel>

src/views/resources/comps/right/middle/2/index.html

@@ -1,4 +1,4 @@
 
-<Pannel title="合同到期预警" height="305">
+<Pannel title="合同到期预警" height="305" flexIble>
   <ScrollTable :headers="headers" :data="data"></ScrollTable>
 </Pannel>

src/views/resources/comps/right/top/2/index.html

@@ -1,4 +1,4 @@
 
-<Pannel title="合同结款到期预警" height="305">
+<Pannel title="合同结款到期预警" height="305" flexIble>
   <ScrollTable :headers="headers" :data="data"></ScrollTable>
 </Pannel>