BJ_web_developers / dyitoc

Blame view

src/views/berthsection.vue 2.33 KB
Edit Raw Normal View History
a390d377   liuqimichale   泊位 
1
2
3
4
5
 
  <template>
    <div>
      <titlesection title="泊位"></titlesection>
      <totalsection :totalNum="totalVal"></totalsection>
      <ul class="flexfm berth-wrap">
78a3ba7b   liuqimichale   泊位 
6
 
        <li class="pos-rel">
753334c6   liuqimichale   进出场 
7
 
          <halfPieChart :chart-data="pieChartData"></halfPieChart>
78a3ba7b   liuqimichale   泊位 
8
9
10
11
12
 
          <div class="pos-abs halfPieText">
            <p>78%</p>
            <p>占有</p>
          </div>
        </li>
a390d377   liuqimichale   泊位 
13
 
        <li>
78a3ba7b   liuqimichale   泊位 
14
 
          <div class="berth-main">
a390d377   liuqimichale   泊位 
15
16
 
            <p><span class="free">{{ free|formatNum }}</span> <span>空余</span></p>
          </div>
78a3ba7b   liuqimichale   泊位 
17
 
          <div class="berth-main">
a390d377   liuqimichale   泊位 
18
19
20
21
22
23
24
25
26
27
28
 
            <p><span class="nofree">{{ nofree|formatNum }}</span> <span>占有</span></p>
          </div>
  
        </li>
      </ul>
    </div>
  </template>
  
  <script>
  import titlesection from '../components/titlesection'
  import totalsection from '../components/total'
78a3ba7b   liuqimichale   泊位 
29
 
  import halfPieChart from '../components/halfPieChart'
a390d377   liuqimichale   泊位 
30
31
32
33
34
35
 
  import {fetchList} from '../api/api'
  
  export default {
    name: 'berthsection',
    components: {
      titlesection,
78a3ba7b   liuqimichale   泊位 
36
37
 
      totalsection,
      halfPieChart
a390d377   liuqimichale   泊位 
38
39
40
 
    },
    data() {
      return {
753334c6   liuqimichale   进出场 
41
42
43
44
 
        pieChartData: {
          yData: [100,200],
          legendData: ['空余','占有']
        },
a390d377   liuqimichale   泊位 
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
        totalVal: '21973',
        free: '454123',
        nofree: '5125'
      }
    },
    created() {
    },
    methods: {
      getList() {
        fetchList()
        .then(res => {
          console.log(res);
  
        });
      },
    }
  }
  </script>
  
  <style lang="scss"  scoped>
    .berth-wrap {
      display: flex;
      li{
        flex: 1;
78a3ba7b   liuqimichale   泊位 
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
        .halfPieText{
          width: 100%;
          text-align: center;
          top:50%;
          transform:translateY(-50%) ;
          p{
            &:nth-of-type(1){
              @include fonttextStyle(24px);
              background-image: $fontOrange;
            }
            &:nth-of-type(2){
              padding-top: 5px;
             font-size: 12px;
              color: #fff;
            }
          }
        }
        .berth-main{
a390d377   liuqimichale   泊位 
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
 
          height: 50%;
          display: flex;
          align-items:center;
          p{
            height: 24px;
            color: #fff;
            font-size: 12px;
            .free{
              @include fonttextStyle(24px);
              background-image: $fontBlue;
            }
            .nofree{
              @include fonttextStyle(24px);
              background-image: $fontOrange;
            }
            span:nth-of-type(1){
              width: 100px;
              display: inline-block;
            }
          }
        }
      }
    }
  </style>