From ea141a52bf40791d5850ddd9187e8d83ab450239 Mon Sep 17 00:00:00 2001
From: liuqimichale <123456lq>
Date: Tue, 12 Mar 2019 14:20:18 +0800
Subject: [PATCH] 泊位

---
 src/components/VBerth.vue  | 90 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/VIncome.vue | 35 -----------------------------------
 src/view/VHome.vue         |  8 ++++++--
 3 files changed, 96 insertions(+), 37 deletions(-)
 create mode 100644 src/components/VBerth.vue

diff --git a/src/components/VBerth.vue b/src/components/VBerth.vue
new file mode 100644
index 0000000..2157699
--- /dev/null
+++ b/src/components/VBerth.vue
@@ -0,0 +1,90 @@
+<template>
+    <div class="theme-wrap">
+        <card-title> <span>泊位消息</span></card-title>
+        <div class="theme-body">
+            <account-num>
+                <span>总计</span>
+            </account-num>
+            <div class="income-echart" id="income-echart">
+                <bar-chart :chart-data="pieChartData"></bar-chart>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import CardTitle from './base/CardTitle'
+import AccountNum from './base/AccountNum'
+import barChart from './base/barChart'
+export default {
+  name: 'VBerth',
+  components: {
+    CardTitle,
+    AccountNum,
+    barChart
+  },
+  data() {
+    return {
+      pieChartData: {
+        yData: [1,1],
+        legendData: ['空余','占有']
+      },
+    }
+  },
+  mounted(){
+    //this.drawBar();
+  },
+  methods: {
+    drawBar() {
+      let myChart = echarts.init(document.getElementById('income-echart'));
+      let option = {
+        color: ['#f44'],
+        tooltip : {
+          trigger: 'axis',
+          axisPointer : {
+            type : 'shadow'
+          }
+        },
+        xAxis : [
+          {
+            type : 'category',
+            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
+            axisTick: {
+              alignWithLabel: true
+            }
+          }
+        ],
+        yAxis : [
+          {
+            type : 'value'
+          }
+        ],
+        series : [
+          {
+            name:'每月花费',
+            type:'bar',
+            barWidth: '60%',
+            data:[995,666,444,858,654,236,645,546,846,225,547,356]
+          }
+        ]
+      };
+      myChart.setOption(option);
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+    .theme-wrap {
+        height: 100%;
+    }
+    .theme-body {
+        height: calc(100% - 30px);
+        margin-left: 20px;
+    }
+    .income-echart{
+        height: 70%;
+    }
+
+</style>
diff --git a/src/components/VIncome.vue b/src/components/VIncome.vue
index c2d9918..8d3aa91 100644
--- a/src/components/VIncome.vue
+++ b/src/components/VIncome.vue
@@ -35,42 +35,7 @@ export default {
     //this.drawBar();
   },
   methods: {
-    drawBar() {
-      let myChart = echarts.init(document.getElementById('income-echart'));
-      let option = {
-        color: ['#f44'],
-        tooltip : {
-          trigger: 'axis',
-          axisPointer : {
-            type : 'shadow'
-          }
-        },
-        xAxis : [
-          {
-            type : 'category',
-            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
-            axisTick: {
-              alignWithLabel: true
-            }
-          }
-        ],
-        yAxis : [
-          {
-            type : 'value'
-          }
-        ],
-        series : [
-          {
-            name:'每月花费',
-            type:'bar',
-            barWidth: '60%',
-            data:[995,666,444,858,654,236,645,546,846,225,547,356]
-          }
-        ]
-      };
-      myChart.setOption(option);
 
-    }
   }
 }
 </script>
diff --git a/src/view/VHome.vue b/src/view/VHome.vue
index 31a6541..8dbabeb 100644
--- a/src/view/VHome.vue
+++ b/src/view/VHome.vue
@@ -20,7 +20,9 @@
         <div class="frame-wrap">
           <v-income></v-income>
         </div>
-        <div class="frame-wrap frame-wrap-center"></div>
+        <div class="frame-wrap frame-wrap-center">
+          <v-berth></v-berth>
+        </div>
         <div class="frame-wrap"></div>
       </li>
     </ul>
@@ -34,6 +36,7 @@ import VParking from '../components/VParking'
 import VToll from '../components/VToll'
 import VInout from '../components/VInout'
 import VIncome from '../components/VIncome'
+import VBerth from '../components/VBerth'
 export default {
   name: 'VHome',
   components: {
@@ -42,7 +45,8 @@ export default {
     VParking,
     VToll,
     VInout,
-    VIncome
+    VIncome,
+    VBerth
   }
 }
 </script>
--
libgit2 0.21.4