BJ_web_developers / dyitoc

Blame view

src/views/berthsection.vue 2.97 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
 
          <div class="pos-abs halfPieText">
adf82b69   liuqimichale   调取接口 
9
 
            <p>{{scale}}%</p>
78a3ba7b   liuqimichale   泊位 
10
11
12
 
            <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'
adf82b69   liuqimichale   调取接口 
30
 
  import { berthAddress } from '../api/api'
a390d377   liuqimichale   泊位 
31
32
33
34
35
 
  
  export default {
    name: 'berthsection',
    components: {
      titlesection,
78a3ba7b   liuqimichale   泊位 
36
37
 
      totalsection,
      halfPieChart
a390d377   liuqimichale   泊位 
38
39
40
 
    },
    data() {
      return {
753334c6   liuqimichale   进出场 
41
 
        pieChartData: {
adf82b69   liuqimichale   调取接口 
42
 
          yData: [1,1],
753334c6   liuqimichale   进出场 
43
44
 
          legendData: ['空余','占有']
        },
adf82b69   liuqimichale   调取接口 
45
46
47
48
 
        totalVal: '',
        free: '',
        nofree: '',
        scale: ''
a390d377   liuqimichale   泊位 
49
50
51
 
      }
    },
    created() {
adf82b69   liuqimichale   调取接口 
52
 
      this.getList()
a390d377   liuqimichale   泊位 
53
54
55
 
    },
    methods: {
      getList() {
adf82b69   liuqimichale   调取接口 
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
        berthAddress({
          orgIds: this.GLOBAL.paramsvariables
        }).then((res)=>{
          let data = res.data.data
          console.log(data)
          this.totalVal = data.allBerthNum.toString()
          this.free = data.freeBerthNum
          this.nofree = data.isOccupyBertnNum
          this.pieChartData = {
            yData: [data.freeBerthNum,data.isOccupyBertnNum],
            legendData: ['空余','占有']
          }
          // this.pieChartData.yData = [10,20]
          // this.pieChartData.yData.push(data.freeBerthNum)
          // this.pieChartData.yData.push(data.isOccupyBertnNum)
          this.scale = ((data.isOccupyBertnNum/(data.freeBerthNum+data.isOccupyBertnNum))*100).toFixed(0)
        })
a390d377   liuqimichale   泊位 
73
74
75
76
77
78
79
80
81
82
 
      },
    }
  }
  </script>
  
  <style lang="scss"  scoped>
    .berth-wrap {
      display: flex;
      li{
        flex: 1;
78a3ba7b   liuqimichale   泊位 
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
 
        .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   泊位 
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
 
          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>