|
|
@@ -1,4 +1,4 @@
|
|
|
-<template>
|
|
|
+<!--<template>
|
|
|
<div class="statistics">
|
|
|
<ul class="list-inline" :style="{top: widthTop + 'rem'}" :class="{no_tran: widthTop == 2.4}">
|
|
|
<li v-for="(item, index) in itemData" :style="index % 2 == 0 ? 'text-align: right;padding-right: .3rem;' : 'text-align: left;padding-left: .3rem;'">
|
|
|
@@ -14,6 +14,20 @@
|
|
|
</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
+ <ul class="list-inline" :style="{top: widthTop + 'rem'}" :class="{no_tran: widthTop == 2.4}">
|
|
|
+ <li v-for="(item, index) in itemData" :style="index % 2 == 0 ? 'text-align: right;padding-right: .3rem;' : 'text-align: left;padding-left: .3rem;'">
|
|
|
+ <span class="number" v-if="item.type === 2">
|
|
|
+ <img :src="`/images/mobile/@2x/home/count${index + 1}.jpg`" alt="">
|
|
|
+ <span v-html="formatDouble(item.count)" style="vertical-align: middle"></span>
|
|
|
+ <span class="unit">条</span>
|
|
|
+ </span>
|
|
|
+ <span class="number" v-else>
|
|
|
+ <img :src="`/images/mobile/@2x/home/count${index + 1}.jpg`" alt="">
|
|
|
+ <span v-html="formatNumber(item.count, index)" style="vertical-align: middle"></span>
|
|
|
+ <span class="unit" v-if="item.type === 3">家</span>
|
|
|
+ </span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -130,19 +144,24 @@
|
|
|
<style lang="scss" scoped>
|
|
|
.statistics{
|
|
|
position:relative;
|
|
|
- height: .6rem;
|
|
|
+ /* height: 0.6rem;*/
|
|
|
+ height: 8rem;
|
|
|
border-radius:.3rem;
|
|
|
background: #fff;
|
|
|
margin:0 .05rem .2rem;
|
|
|
- overflow: hidden;
|
|
|
+ /*overflow: hidden;*/
|
|
|
+ background: url('/images/mobile/@2x/home/countbg.png') no-repeat center;
|
|
|
ul{
|
|
|
+ float: left;
|
|
|
+ width:50%;
|
|
|
position:absolute;
|
|
|
transition: .5s all linear;
|
|
|
+ border: 1px solid red;
|
|
|
&:no_tran{
|
|
|
transition:none;
|
|
|
}
|
|
|
li{
|
|
|
- width:50%;
|
|
|
+ width:100%;
|
|
|
height:.6rem;
|
|
|
line-height: .6rem;
|
|
|
font-size: .28rem;
|
|
|
@@ -182,4 +201,224 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+</style>-->
|
|
|
+<template>
|
|
|
+ <div class="statistics">
|
|
|
+ <ul class="list-inline pull-left" :style="{top: topLeft + 'rem'}" :class="{no_tran: topLeft == 2.4}">
|
|
|
+ <li v-for="(item, index) in itemData" v-if="index <= 4">
|
|
|
+ <span class="number">
|
|
|
+ <span class="name" v-html="count[index]"></span>
|
|
|
+ <span class="num" v-html="formatNumber(item.count, index)"></span>
|
|
|
+ <span class="unit" v-if="item.type === 3">家</span>
|
|
|
+ </span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <ul class="list-inline pull-right" :style="{top: topRight + 'rem'}" :class="{no_tran: topRight == 2.4}">
|
|
|
+ <li v-for="(item, index) in itemData" v-if="index > 4">
|
|
|
+ <span class="number">
|
|
|
+ <span class="name" v-html="count[index]"></span>
|
|
|
+ <span class="month" v-if="index === 5">(上月)</span>
|
|
|
+ <span class="month" v-if="index === 6">(本月)</span>
|
|
|
+ <span class="num" v-html="formatDouble(item.count)"></span>
|
|
|
+ <span class="unit" v-if="item.type === 2">条</span>
|
|
|
+ </span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ name: 'StatisticsView',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ step: 1,
|
|
|
+ count: ['现货', '品牌', '规格书', '供应商', '店铺', '询价求购', '询价求购', '上年交易', '本年交易'],
|
|
|
+ topLeft: 0,
|
|
|
+ topRight: 0,
|
|
|
+ timerIndex: 0,
|
|
|
+ timer: {}, // 定时器实体
|
|
|
+ imgbox: {
|
|
|
+ 'src': ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.changeIntervalL()
|
|
|
+ this.changeIntervalR()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeIntervalL () {
|
|
|
+ setInterval(() => {
|
|
|
+ this.topLeft += -1
|
|
|
+ let arr1 = this.itemData.slice(0, 5)
|
|
|
+ let arr2 = arr1.shift()
|
|
|
+ arr1.push(arr2)
|
|
|
+ if (this.topLeft === -5) {
|
|
|
+ this.topLeft = 0
|
|
|
+ }
|
|
|
+ }, 2400)
|
|
|
+ },
|
|
|
+ changeIntervalR () {
|
|
|
+ setInterval(() => {
|
|
|
+ this.topRight += -1
|
|
|
+ let arr1 = this.itemData.slice(5, 9)
|
|
|
+ let arr2 = arr1.shift()
|
|
|
+ arr1.push(arr2)
|
|
|
+// this.itemDataTemp.push(this.itemData)
|
|
|
+ if (this.topRight === -4) {
|
|
|
+ this.topRight = 0
|
|
|
+ }
|
|
|
+ }, 3000)
|
|
|
+ },
|
|
|
+ formatNumber (num, type) {
|
|
|
+ if (num.toString().indexOf('E') !== -1) {
|
|
|
+ let arr = num.toString().split('E')
|
|
|
+ num = arr[0] * Math.pow(10, arr[1])
|
|
|
+ }
|
|
|
+ if (num > 99999999) {
|
|
|
+ let str2 = num.toString()
|
|
|
+ num = Math.floor(num / 100000000)
|
|
|
+ if (parseInt(str2.charAt(str2.length - 8)) > 8) {
|
|
|
+ num = num + 1
|
|
|
+ }
|
|
|
+ num = num + '亿'
|
|
|
+ } else if (num > 9999) {
|
|
|
+ let str = num.toString()
|
|
|
+ num = Math.floor(num / 10000)
|
|
|
+ if (parseInt(str.charAt(str.length - 4)) > 4) {
|
|
|
+ num = num + 1
|
|
|
+ }
|
|
|
+ num += '万'
|
|
|
+ } else {
|
|
|
+ if (type >= 7) {
|
|
|
+ num += '元'
|
|
|
+ } else if (type <= 2) {
|
|
|
+ num += '个'
|
|
|
+ } else {
|
|
|
+ num += ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return num
|
|
|
+ },
|
|
|
+ formatDouble (num) {
|
|
|
+ if (num.toString().indexOf('E') !== -1) {
|
|
|
+ let arr = num.toString().split('E')
|
|
|
+ num = arr[0] * Math.pow(10, arr[1])
|
|
|
+ }
|
|
|
+ if (num > 99999999) {
|
|
|
+ num = (num / 100000000).toFixed(2).slice(num.length - 1, 4) + '亿'
|
|
|
+ } else if (num > 9999) {
|
|
|
+ num = (num / 10000).toFixed(2).slice(num.length - 1, 4) + '万'
|
|
|
+ } else {
|
|
|
+ num += ''
|
|
|
+ }
|
|
|
+ return num
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ allCount () {
|
|
|
+ return this.$store.state.count.allCount.data
|
|
|
+ },
|
|
|
+ inquirySheet () {
|
|
|
+ let sheetNum = this.$store.state.count.inquirySheet.data.count
|
|
|
+ return this.formatDouble(sheetNum)
|
|
|
+ },
|
|
|
+ inquirySheetLast () {
|
|
|
+ let lastSheetNum = this.$store.state.count.inquirySheetLast.data.count
|
|
|
+ return this.formatDouble(lastSheetNum)
|
|
|
+ },
|
|
|
+ all () {
|
|
|
+ let count = this.$store.state.supplier.merchant.merchantAll.data
|
|
|
+ return count.content ? count.totalElements : '0'
|
|
|
+ },
|
|
|
+ counts () {
|
|
|
+ return this.$store.state.product.common.counts
|
|
|
+ },
|
|
|
+ list () {
|
|
|
+ let list = JSON.parse(JSON.stringify(this.$store.state.provider.stores.storeList.data))
|
|
|
+ console.log(list)
|
|
|
+ return list.totalElements
|
|
|
+ },
|
|
|
+ itemData () {
|
|
|
+ let str = []
|
|
|
+ if (this.counts.data) {
|
|
|
+ this.counts.data.forEach((value, key, $data) => {
|
|
|
+ str.push({id: $data[key].item, count: $data[key].count, type: 1})
|
|
|
+ })
|
|
|
+ }
|
|
|
+ str.push({id: '供应商', count: this.all ? this.all : 0, type: 3})
|
|
|
+ str.push({id: '本月询价单', count: this.$store.state.count.inquirySheet.data ? this.$store.state.count.inquirySheet.data.count : 0, type: 2})
|
|
|
+ str.push({id: '上月询价单', count: this.$store.state.count.inquirySheetLast.data ? this.$store.state.count.inquirySheetLast.data.count : 0, type: 2})
|
|
|
+ if (this.allCount) {
|
|
|
+ this.allCount.forEach((value, key, $data) => {
|
|
|
+ str.push({id: $data[key].item, count: $data[key].count, type: 1})
|
|
|
+ })
|
|
|
+ }
|
|
|
+ str.push({id: '店铺', count: this.list ? this.list : 0, type: 3})
|
|
|
+ str = [str[1], str[0], str[2], str[3], str[8], str[5], str[4], str[6], str[7]]
|
|
|
+ return str
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .statistics{
|
|
|
+ position:relative;
|
|
|
+ height: 1rem;
|
|
|
+ border-radius:.48rem;
|
|
|
+ background: #fff;
|
|
|
+ margin:0 .05rem .2rem;
|
|
|
+ overflow: hidden;
|
|
|
+ background: url('/images/mobile/@2x/home/countbg.png') no-repeat center;
|
|
|
+ background-size: auto 0.96rem;
|
|
|
+ ul{
|
|
|
+ width:50%;
|
|
|
+ position:relative;
|
|
|
+ transition: .5s all linear;
|
|
|
+ &:first-child{
|
|
|
+ margin-left: .0rem;
|
|
|
+ }
|
|
|
+ &:no_tran{
|
|
|
+ transition:none;
|
|
|
+ }
|
|
|
+ li{
|
|
|
+ width:100%;
|
|
|
+ text-align: center;
|
|
|
+ height:1rem;
|
|
|
+ line-height: 0.92rem;
|
|
|
+ font-size: .28rem;
|
|
|
+ font-weight: bold;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ vertical-align:top;
|
|
|
+ span{
|
|
|
+ &.number{
|
|
|
+ display: inline-block;
|
|
|
+ color:red;
|
|
|
+ font-size: 0.32rem;
|
|
|
+ height: .6rem;
|
|
|
+ vertical-align:middle;
|
|
|
+ line-height:.6rem;
|
|
|
+ font-weight: bold;
|
|
|
+ .name, .month{
|
|
|
+ color: #fff;
|
|
|
+ vertical-align:middle;
|
|
|
+ }
|
|
|
+ .month{
|
|
|
+ font-size: 0.22rem;
|
|
|
+ }
|
|
|
+ .unit, .num{
|
|
|
+ color: #feff00;
|
|
|
+ vertical-align:middle;
|
|
|
+ }
|
|
|
+ .num{
|
|
|
+ padding-left: .1rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
gaoxm
