Statistics.vue 5.55 KB
Newer Older
shabai517's avatar
shabai517 committed
1 2
<template>
  <div class="statistics-container">
shabai517's avatar
shabai517 committed
3
    <Row class="row">
4
        <Col :xs="{ span: 24 }" :sm="{span: 12}" :md="{ span: 8}" :lg="{ span: 8}">
shabai517's avatar
shabai517 committed
5 6
            <div class="item-container">
                <div class="item">
7 8
                      <Spin fix v-if="treePrideShow"></Spin>
                      <TreePrideSimple></TreePrideSimple>
shabai517's avatar
shabai517 committed
9
                      <a class="static-more-button" @click="gotoStaticDetails">More</a>
shabai517's avatar
shabai517 committed
10 11 12
                </div>
            </div>
        </Col>
13
        <Col :xs="{ span: 24 }" :sm="{span: 12}" :md="{ span: 8}" :lg="{ span: 8}">
shabai517's avatar
shabai517 committed
14 15
            <div class="item-container">
                <div class="item">
shabai517's avatar
shabai517 committed
16 17
                      <Spin fix v-if="linePrideShow"></Spin>
                      <LinePrideSimple></LinePrideSimple>
shabai517's avatar
shabai517 committed
18
                      <a class="static-more-button" @click="gotoStaticDetails">More</a>
shabai517's avatar
shabai517 committed
19 20 21
                </div>
            </div>
        </Col>
22
        <Col :xs="{ span: 24 }" :sm="{span: 12}" :md="{ span: 8}" :lg="{ span: 8}">
shabai517's avatar
shabai517 committed
23 24
            <div class="item-container">
                <div class="item">
shabai517's avatar
shabai517 committed
25 26 27
                      <Spin fix v-if="mapPrideShow"></Spin>
                      <MapPrideSimple></MapPrideSimple>
                      <a class="static-more-button" @click="gotoStaticDetails">More</a>
shabai517's avatar
shabai517 committed
28 29 30 31
                </div>
            </div>
        </Col>
    </Row>
shabai517's avatar
shabai517 committed
32 33 34 35 36
    <!--
    <div class="button-wrapper">
        <a class="button statistic-button" @click="">More Data</a>
    </div>
    -->
shabai517's avatar
shabai517 committed
37 38 39
  </div>
</template>
<script>
shabai517's avatar
shabai517 committed
40 41 42 43
    import LinePrideSimple from './statistics_chart/LineSimple.vue'
    import SunburstPrideSimple from './statistics_chart/SunburstSimple.vue'
    import SankeyPrideSimple from './statistics_chart/SankeySimple.vue'
    import MapPrideSimple from './statistics_chart/MapSimple.vue'
44
    import TreePrideSimple from './statistics_chart/TreeSimple.vue'
shabai517's avatar
shabai517 committed
45
    import store from "@/store/store.js"
shabai517's avatar
shabai517 committed
46 47 48
    export default {
        data () {
            return {
shabai517's avatar
shabai517 committed
49 50 51 52
                treePrideApi: this.$store.state.baseApiURL + '/stats/SUBMISSIONS_PER_CATEGORIES',
                sankeyPrideApi: this.$store.state.baseApiURL + '/stats/SUBMISSIONS_PER_MONTH',
                mapPrideApi: this.$store.state.baseApiURL + '/stats/SUBMISSIONS_PER_COUNTRY',
                linePrideApi: this.$store.state.baseApiURL + '/stats/SUBMISSIONS_PER_YEAR',
53
                treePrideShow:true,
shabai517's avatar
shabai517 committed
54 55 56
                sankeyPrideShow:true,
                mapPrideShow:true,
                linePrideShow:true,
shabai517's avatar
shabai517 committed
57
            }
shabai517's avatar
shabai517 committed
58 59
        },
        components: {
shabai517's avatar
shabai517 committed
60 61 62 63
            LinePrideSimple,
            SunburstPrideSimple,
            SankeyPrideSimple,
            MapPrideSimple,
64
            TreePrideSimple
shabai517's avatar
shabai517 committed
65 66 67 68 69
        },
        methods:{
            gotoStaticDetails(){
                this.$router.push({name:'statisticsdetails'})
            },
70
            queryTree(){
shabai517's avatar
shabai517 committed
71
                this.$http
72
                  .get(this.treePrideApi)
shabai517's avatar
shabai517 committed
73
                  .then(function(res){
74 75
                    this.treePrideShow=false;
                    this.$bus.$emit('show-simple-tree', res.body);
shabai517's avatar
shabai517 committed
76 77 78 79 80 81 82 83 84
                  },function(err){

                  });
           },
           querySankey(){
                this.$http
                  .get(this.sankeyPrideApi)
                  .then(function(res){
                    this.sankeyPrideShow=false;
shabai517's avatar
shabai517 committed
85
                    this.$bus.$emit('show-simple-sankey', res.body);
shabai517's avatar
shabai517 committed
86 87 88 89 90 91 92 93 94 95
                  },function(err){

                  });
           },
           queryLine(){
                this.$http
                  .get(this.linePrideApi)
                  .then(function(res){
                    this.linePrideShow=false;
                    console.log(res.body);
shabai517's avatar
shabai517 committed
96
                    this.$bus.$emit('show-simple-line', res.body);
shabai517's avatar
shabai517 committed
97 98 99 100 101 102 103 104 105
                  },function(err){

                  });
           },
           queryMap(){
                this.$http
                  .get(this.mapPrideApi)
                  .then(function(res){
                    this.mapPrideShow=false;
shabai517's avatar
shabai517 committed
106
                    this.$bus.$emit('show-simple-map', res.body);
shabai517's avatar
shabai517 committed
107 108 109 110 111 112
                  },function(err){

                  });
           },
        },
        mounted: function(){
113
            this.queryTree();
shabai517's avatar
shabai517 committed
114 115 116
            this.querySankey();
            this.queryLine();
            this.queryMap();
shabai517's avatar
shabai517 committed
117
        },
shabai517's avatar
shabai517 committed
118 119 120 121
    }
</script>
<style scoped>
    .statistics-container{
shabai517's avatar
shabai517 committed
122
        width:80%;
shabai517's avatar
shabai517 committed
123 124
        height: 100%;
        position: relative;
shabai517's avatar
shabai517 committed
125
        padding: 50px 0;
shabai517's avatar
shabai517 committed
126
        margin:0 auto;
shabai517's avatar
shabai517 committed
127 128 129 130 131 132
    }
    .carousel-container{
        display:block;
    }
    .row{
        margin:0 auto;
shabai517's avatar
shabai517 committed
133
        max-width: 100% !important;
shabai517's avatar
shabai517 committed
134 135 136 137
    }

    .item-container{
        text-align: center;
shabai517's avatar
shabai517 committed
138
        margin: 10px 15px;
shabai517's avatar
shabai517 committed
139 140 141
    }

    .item{
shabai517's avatar
shabai517 committed
142 143 144 145 146 147 148 149 150 151 152 153 154
        position: relative;
        border: 1px solid #ececec;
        border-radius: 6px;
    } 
    .static-more-button{
        position: absolute;
        top: 5px;
        right: 10px;
        border-bottom-style:none !important;
    }
    .button-wrapper{
        text-align: center;
    }
shabai517's avatar
shabai517 committed
155
       
shabai517's avatar
shabai517 committed
156 157 158 159 160 161 162 163
    .statistic-button{
        margin: 0 auto;
        padding: 20px 85px;
        text-decoration: none;
        text-transform: uppercase;
        background-color: #5bc0be;
        font-size: 24px;
        border-radius: 6px;
shabai517's avatar
shabai517 committed
164 165
    }
    @media (min-width: 768px) { 
shabai517's avatar
shabai517 committed
166
        .statistics-container{
shabai517's avatar
shabai517 committed
167 168 169 170
            width: 750px;
        }
    }
    @media (min-width: 992px) { 
shabai517's avatar
shabai517 committed
171
        .statistics-container{
shabai517's avatar
shabai517 committed
172 173 174 175
            width: 970px;
        }
    }
    @media (min-width: 1200px) {
shabai517's avatar
shabai517 committed
176
        .statistics-container{
shabai517's avatar
shabai517 committed
177 178 179 180
            width: 1170px;
        }
    }
    @media (min-width: 1600px) {
shabai517's avatar
shabai517 committed
181
        .statistics-container{
shabai517's avatar
shabai517 committed
182 183
            width: 1552px;
        }
shabai517's avatar
shabai517 committed
184 185
    }
</style>