设备

liuqimichale
1 parent cdf2f6c3
Showing 2 changed files with 84 additions and 2 deletions
src/components/VBerth.vue
src/components/VEquipment.vue
@@ -10,8 +10,8 @@
                    <pie-echart :chart-data="pieChartData"></pie-echart>
                </li>
                <li class="berth-inf">
-                   <p><span class="free-berth">11834</span><span>空余</span></p>
-                   <p><span class="buss-berth">4496</span><span>占有</span></p>
+                   <p><span class="free-berth">{{11834|filterTotal}}</span><span>空余</span></p>
+                   <p><span class="buss-berth">{{4496|filterTotal}}</span><span>占有</span></p>
                </li>
             </ul>
         </div>
+<template>
+    <div class="theme-wrap">
+        <card-title> <span>设备监控消息</span></card-title>
+        <div class="theme-body">
+            <account-num>
+                <span>总计</span>
+            </account-num>
+            <ul class="income-echart">
+                <li>
+                    <pie-echart :chart-data="pieChartData"></pie-echart>
+                </li>
+                <li class="berth-inf">
+                    <p><span class="free-berth">11834</span><span>空余</span></p>
+                    <p><span class="buss-berth">4496</span><span>占有</span></p>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+import CardTitle from './base/CardTitle'
+import AccountNum from './base/AccountNum'
+import PieEchart from './base/PieEchart'
+export default {
+  name: 'VEquipment',
+  components: {
+    CardTitle,
+    AccountNum,
+    PieEchart
+  },
+  data() {
+    return {
+      pieChartData: {
+        yData: [1,1],
+        legendData: ['空余','占有']
+      },
+    }
+  },
+  mounted(){
+    //this.drawBar();
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style scoped lang="scss">
+    .theme-wrap {
+        height: 100%;
+    }
+    .theme-body {
+        height: calc(100% - 30px);
+        margin-left: 20px;
+    }
+    .income-echart{
+        height: 70%;
+        display: flex;
+        >li{
+            flex: 1;
+        }
+        .berth-inf{
+            p{
+                height: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding-right: 20px;
+            }
+            .free-berth{
+                @include fontStyle(24px);
+                background-image: $fontBlue;
+            }
+            .buss-berth{
+                @include fontStyle(24px);
+                background-image: $fontOrange;
+            }
+        }
+    }
+
+</style>