资金支出分析

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

@@ -1,3 +1,11 @@
 <Pannel title="资金支出分析" height="340">
-  
+  <div class="full">
+    <div class="top">
+      <PannelTabs @change="tabChange" ></PannelTabs>
+    </div>
+    <div class="buttom">
+      <LineCharts v-if="tabIndex === '1'" id="otherline"></LineCharts>
+      <PieCharts v-if="tabIndex === '2'" id="otherpie"></PieCharts>
+    </div>
+  </div>
 </Pannel>

src/views/capital/comps/left/bottom/1/index.js

@@ -1,11 +1,18 @@
 import Pannel from '@/components/pannel/index.vue';
+import PannelTabs from '@/components/pannel-tabs/index.vue';
+import LineCharts from '@/components/charts/line/index.vue';
+import PieCharts from '@/components/charts/pie/index.vue';
 
 export default {
   components: {
+    LineCharts,
+    PieCharts,
+    PannelTabs,
     Pannel
   },
   data () {
     return {
+      tabIndex: '1'
     };
   },
   created () {
@@ -13,5 +20,9 @@ export default {
   mounted () {
   },
   methods: {
+    tabChange (info) {
+      console.log(info);
+      this.tabIndex = info.id
+    }
   }
 };

src/views/capital/comps/left/bottom/1/index.scss

@@ -0,0 +1,17 @@
+.full {
+  display: flex;
+  flex-direction: column;
+
+  .top {
+    height: 50px !important;
+    width: 100%;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-end;
+  }
+
+  .buttom {
+    flex: 1;
+    width: 100%;
+  }
+}

src/views/capital/comps/left/middle/1/index.html

@@ -1,11 +1,11 @@
 <Pannel title="资金收入分析" height="340">
-    <div class="full">
-      <div class="top">
-        <PannelTabs @change="tabChange"></PannelTabs>
-      </div>
-      <div class="buttom">
-        <LineCharts v-if="tabIndex === '1'"></LineCharts>
-        <PieCharts v-if="tabIndex === '2'"></PieCharts>
-      </div>
+  <div class="full">
+    <div class="top">
+      <PannelTabs @change="tabChange"></PannelTabs>
     </div>
+    <div class="buttom">
+      <LineCharts v-if="tabIndex === '1'"></LineCharts>
+      <PieCharts v-if="tabIndex === '2'"></PieCharts>
+    </div>
+  </div>
 </Pannel>