Commit ea141a52bf40791d5850ddd9187e8d83ab450239
1 parent
d91b873f
泊位
Showing
3 changed files
with
96 additions
and
37 deletions
src/components/VBerth.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <div class="theme-wrap"> | ||
| 3 | + <card-title> <span>泊位消息</span></card-title> | ||
| 4 | + <div class="theme-body"> | ||
| 5 | + <account-num> | ||
| 6 | + <span>总计</span> | ||
| 7 | + </account-num> | ||
| 8 | + <div class="income-echart" id="income-echart"> | ||
| 9 | + <bar-chart :chart-data="pieChartData"></bar-chart> | ||
| 10 | + </div> | ||
| 11 | + </div> | ||
| 12 | + </div> | ||
| 13 | +</template> | ||
| 14 | + | ||
| 15 | +<script> | ||
| 16 | +import CardTitle from './base/CardTitle' | ||
| 17 | +import AccountNum from './base/AccountNum' | ||
| 18 | +import barChart from './base/barChart' | ||
| 19 | +export default { | ||
| 20 | + name: 'VBerth', | ||
| 21 | + components: { | ||
| 22 | + CardTitle, | ||
| 23 | + AccountNum, | ||
| 24 | + barChart | ||
| 25 | + }, | ||
| 26 | + data() { | ||
| 27 | + return { | ||
| 28 | + pieChartData: { | ||
| 29 | + yData: [1,1], | ||
| 30 | + legendData: ['空余','占有'] | ||
| 31 | + }, | ||
| 32 | + } | ||
| 33 | + }, | ||
| 34 | + mounted(){ | ||
| 35 | + //this.drawBar(); | ||
| 36 | + }, | ||
| 37 | + methods: { | ||
| 38 | + drawBar() { | ||
| 39 | + let myChart = echarts.init(document.getElementById('income-echart')); | ||
| 40 | + let option = { | ||
| 41 | + color: ['#f44'], | ||
| 42 | + tooltip : { | ||
| 43 | + trigger: 'axis', | ||
| 44 | + axisPointer : { | ||
| 45 | + type : 'shadow' | ||
| 46 | + } | ||
| 47 | + }, | ||
| 48 | + xAxis : [ | ||
| 49 | + { | ||
| 50 | + type : 'category', | ||
| 51 | + data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',], | ||
| 52 | + axisTick: { | ||
| 53 | + alignWithLabel: true | ||
| 54 | + } | ||
| 55 | + } | ||
| 56 | + ], | ||
| 57 | + yAxis : [ | ||
| 58 | + { | ||
| 59 | + type : 'value' | ||
| 60 | + } | ||
| 61 | + ], | ||
| 62 | + series : [ | ||
| 63 | + { | ||
| 64 | + name:'每月花费', | ||
| 65 | + type:'bar', | ||
| 66 | + barWidth: '60%', | ||
| 67 | + data:[995,666,444,858,654,236,645,546,846,225,547,356] | ||
| 68 | + } | ||
| 69 | + ] | ||
| 70 | + }; | ||
| 71 | + myChart.setOption(option); | ||
| 72 | + | ||
| 73 | + } | ||
| 74 | + } | ||
| 75 | +} | ||
| 76 | +</script> | ||
| 77 | + | ||
| 78 | +<style scoped lang="scss"> | ||
| 79 | + .theme-wrap { | ||
| 80 | + height: 100%; | ||
| 81 | + } | ||
| 82 | + .theme-body { | ||
| 83 | + height: calc(100% - 30px); | ||
| 84 | + margin-left: 20px; | ||
| 85 | + } | ||
| 86 | + .income-echart{ | ||
| 87 | + height: 70%; | ||
| 88 | + } | ||
| 89 | + | ||
| 90 | +</style> |
src/components/VIncome.vue
| @@ -35,42 +35,7 @@ export default { | @@ -35,42 +35,7 @@ export default { | ||
| 35 | //this.drawBar(); | 35 | //this.drawBar(); |
| 36 | }, | 36 | }, |
| 37 | methods: { | 37 | methods: { |
| 38 | - drawBar() { | ||
| 39 | - let myChart = echarts.init(document.getElementById('income-echart')); | ||
| 40 | - let option = { | ||
| 41 | - color: ['#f44'], | ||
| 42 | - tooltip : { | ||
| 43 | - trigger: 'axis', | ||
| 44 | - axisPointer : { | ||
| 45 | - type : 'shadow' | ||
| 46 | - } | ||
| 47 | - }, | ||
| 48 | - xAxis : [ | ||
| 49 | - { | ||
| 50 | - type : 'category', | ||
| 51 | - data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',], | ||
| 52 | - axisTick: { | ||
| 53 | - alignWithLabel: true | ||
| 54 | - } | ||
| 55 | - } | ||
| 56 | - ], | ||
| 57 | - yAxis : [ | ||
| 58 | - { | ||
| 59 | - type : 'value' | ||
| 60 | - } | ||
| 61 | - ], | ||
| 62 | - series : [ | ||
| 63 | - { | ||
| 64 | - name:'每月花费', | ||
| 65 | - type:'bar', | ||
| 66 | - barWidth: '60%', | ||
| 67 | - data:[995,666,444,858,654,236,645,546,846,225,547,356] | ||
| 68 | - } | ||
| 69 | - ] | ||
| 70 | - }; | ||
| 71 | - myChart.setOption(option); | ||
| 72 | 38 | ||
| 73 | - } | ||
| 74 | } | 39 | } |
| 75 | } | 40 | } |
| 76 | </script> | 41 | </script> |
src/view/VHome.vue
| @@ -20,7 +20,9 @@ | @@ -20,7 +20,9 @@ | ||
| 20 | <div class="frame-wrap"> | 20 | <div class="frame-wrap"> |
| 21 | <v-income></v-income> | 21 | <v-income></v-income> |
| 22 | </div> | 22 | </div> |
| 23 | - <div class="frame-wrap frame-wrap-center"></div> | 23 | + <div class="frame-wrap frame-wrap-center"> |
| 24 | + <v-berth></v-berth> | ||
| 25 | + </div> | ||
| 24 | <div class="frame-wrap"></div> | 26 | <div class="frame-wrap"></div> |
| 25 | </li> | 27 | </li> |
| 26 | </ul> | 28 | </ul> |
| @@ -34,6 +36,7 @@ import VParking from '../components/VParking' | @@ -34,6 +36,7 @@ import VParking from '../components/VParking' | ||
| 34 | import VToll from '../components/VToll' | 36 | import VToll from '../components/VToll' |
| 35 | import VInout from '../components/VInout' | 37 | import VInout from '../components/VInout' |
| 36 | import VIncome from '../components/VIncome' | 38 | import VIncome from '../components/VIncome' |
| 39 | +import VBerth from '../components/VBerth' | ||
| 37 | export default { | 40 | export default { |
| 38 | name: 'VHome', | 41 | name: 'VHome', |
| 39 | components: { | 42 | components: { |
| @@ -42,7 +45,8 @@ export default { | @@ -42,7 +45,8 @@ export default { | ||
| 42 | VParking, | 45 | VParking, |
| 43 | VToll, | 46 | VToll, |
| 44 | VInout, | 47 | VInout, |
| 45 | - VIncome | 48 | + VIncome, |
| 49 | + VBerth | ||
| 46 | } | 50 | } |
| 47 | } | 51 | } |
| 48 | </script> | 52 | </script> |