fj-dc-ui/.svn/pristine/2e/2e6bcef42ed0ff91e0bdd633f8de35e8fbcf9d80.svn-base

<!--  -->
<template>
    <div>
        <!-- <div class="time">
            <el-row>
                <span v-if="spanForPan">开始时间：</span>
                <el-date-picker class="input-class" value-format="yyyy-MM-dd" v-model="sttm" type="date" placeholder="选择日期" @change="changeStartDay()"></el-date-picker>
            </el-row>
            <el-row style="margin-top:.5vh">
                <span v-if="spanForPan" style="margin-right: .6vw;">结束时间:</span>
                <el-date-picker class="input-class" value-format="yyyy-MM-dd" v-model="entm" type="date" placeholder="选择日期" @change="changeEndDay()" ></el-date-picker>
            </el-row>
        </div> -->
		<div class="button" >
			<div v-waves class="dcz"   @click="changeClass(buttonList[0])" >
				<div class="content">
					<div class="content_top" >
						<span style="color:#fff;">督查组</span>
					</div>
					<div class="content_bottom">
						<span class="content_bottom_num" style="color:#fff;font-family:digtalNumber;">{{animateDczNum}}</span>
						<span class="content_bottom_dw" style="color:#fff;">组</span>
					</div>
				</div>
			</div>
			<div v-waves class="dcry"   @click="changeClass(buttonList[1])" >
				<div class="content">
					<div class="content_top" >
						<span style="color:#fff;">督查人员</span>
					</div>
					<div class="content_bottom">
						<span class="content_bottom_num" style="color:#fff;font-family:digtalNumber;">{{animateDcyrNum}}</span>
						<span class="content_bottom_dw" style="color:#fff;">人/次</span>
					</div>
				</div>
			</div>
			<div v-waves class="dcdx"   @click="changeClass(buttonList[2])" >
				<div class="content">
					<div class="content_top" >
						<span style="color:#fff;">督查对象</span>
					</div>
					<div class="content_bottom">
						<span class="content_bottom_num" style="color:#fff;font-family:digtalNumber;">{{animateDcdxNum}}</span>
						<span class="content_bottom_dw" style="color:#fff;">个</span>
					</div>
				</div>
			</div>
			<div v-waves class="fxwt"   @click="changeClass(buttonList[3])" >
				<div class="content">
					<div class="content_top" >
						<span style="color:#fff;">发现问题</span>
					</div>
					<div class="content_bottom">
						<span class="content_bottom_num" style="color:#fff;font-family:digtalNumber;">{{animateFxwtNum}}</span>
						<span class="content_bottom_dw" style="color:#fff;">个</span>
					</div>
				</div>
			</div>
			<div v-waves class="jbyywt"   @click="changeClass(buttonList[4])" >
				<div class="content" >
					<div class="content_top" >
						<span style="color:#fff;">简报引用问题</span>
					</div>
					<div class="content_bottom">
						<span class="content_bottom_num" style="color:#fff;font-family:digtalNumber;">{{animateJbyywtNum}}</span>
						<span class="content_bottom_dw" style="color:#fff;">个</span>
					</div>
				</div>
			</div>
		</div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import waves from "../../directive/waves/index.js"; // 水波纹指令
// var TWEEN = require('@tweenjs/tween.js');
export default {
	//import引入的组件需要注入到对象中才能使用
	components: {},
	props:["dczNum","dcyrNum","dcdxNum","fxwtNum","jbyywtNum"],
	data() {
		//这里存放数据
		return {
			spanForPan:true,
			animateDczNum:0,
			animateDcyrNum:0,
			animateDcdxNum:0,
			animateFxwtNum:0,
			animateJbyywtNum:0,
			sttm: "",
			entm: "",
			buttonList:[
				{
					id:'dcz',
					className:'dcz',
					spanName:'督查组',
					count:0,
					unit:'组',
					checked:false,
					mapPointColor:'#13C5A6',
					barStartColor:'#59f3be',
					barEndColor:'#13C4B8'
				},
				{
					id:'dcry',
					className:'dcry',
					spanName:'督查人员',
					count:0,
					unit:'人/次',
					checked:false,
					mapPointColor:'#3D62F6',
					barStartColor:'#50b1eb',
					barEndColor:'#5072f7'
				},
				{
					id:'dcdx',
					className:'dcdx',
					spanName:'督查对象',
					count:0,
					unit:'个',
					checked:false,
					mapPointColor:'#13C4B8',
					barStartColor:'#76eac2',
					barEndColor:'#27cbc1'
				},
				{
					id:'fxwt',
					className:'fxwt',
					spanName:'发现问题',
					count:0,
					unit:'个',
					checked:false,
					mapPointColor:'#35A0FC',
					barStartColor:'#3ccefa',
					barEndColor:'#48abfc'
				},
				{
					id:'jbyywt',
					className:'jbyywt',
					spanName:'简报引用问题',
					count:0,
					unit:'个',
					checked:false,
					mapPointColor:'#35A0FC',
					barStartColor:'#3ccefa',
					barEndColor:'#48abfc'
				}
			],
			// checkedClassName: "",
			resultClass:"dcz_checked",
			findVal:{},
		};
	},
	directives: {
		waves
	},
	//监听属性 类似于data概念
	computed: {
		
	},
	//监控data中的数据变化
	watch: {
		dczNum(newValue,oldValue){
			this.animateCount(oldValue,newValue,'animateDczNum');
		},
		dcyrNum(newValue,oldValue){
			this.animateCount(oldValue,newValue,'animateDcyrNum');
		},
		dcdxNum(newValue,oldValue){
			this.animateCount(oldValue,newValue,'animateDcdxNum');
		},
		fxwtNum(newValue,oldValue){
			this.animateCount(oldValue,newValue,'animateFxwtNum');
		},
		jbyywtNum(newValue,oldValue){
			this.animateCount(oldValue,newValue,'animateJbyywtNum');
		},
	},
	//方法集合
	methods: {
		animateCount:function(oldValue,newValue,numberName){
			let _self = this;
			function animate () {
				if (TWEEN.update()) {
				requestAnimationFrame(animate);

				}
			}
			new TWEEN.Tween({ animateNumber:oldValue })
				.easing(TWEEN.Easing.Quadratic.Out)
				.to({ animateNumber:newValue }, 400)
				.onUpdate(function () {

				var tempNumber =Number(this.animateNumber.toFixed(0));
				_self[numberName] = _self.toThousands(tempNumber);
				
				
				}).start();
			animate();
		},
		 //动画配套逗号方法
		toThousands:function(num) {
			var result = [ ], counter = 0;
			num = (num || 0).toString().split('');
			for (var i = num.length - 1; i >= 0; i--) {
				counter++;
				result.unshift(num[i]);
				if (!(counter % 3) && i != 0) { result.unshift(','); }
			}
			return result.join('');
		} ,
		changeClass(item){
		var _this = this;
		this.$emit('barsType',item);
			if(this.resultClass === ""){
				this.resultClass = item.id;
				item.checked = true;
				item.className += '_checked';
			}else{
				if(item.checked === false){
					if(this.resultClass !== item.id){
						for(let i = 0; i < this.buttonList.length; i++){
							if(this.buttonList[i].checked === true){
								this.buttonList[i].className = this.buttonList[i].className.split('_')[0];
								this.buttonList[i].checked = false;
							}
						}
						item.className += '_checked';
						item.checked = true;
						this.resultClass = item.id;
					}else{
						item.className += '_checked';
						item.checked = true;
					}
				}else{
					item.className = item.className.split('_')[0];
					item.checked = false;
				}
			}
		},
		changeStartDay(){
			if(this.sttm === null){
				this.sttm = "";
			}
			if(this.entm === null){
				this.entm = "";
			}
			this.$emit('globalTime',{sttm:this.sttm,entm:this.entm});
		},
		changeEndDay(){
			if(this.sttm === null){
				this.sttm = "";
			}
			if(this.entm === null){
				this.entm = "";
			}
			this.$emit('globalTime',{sttm:this.sttm,entm:this.entm});
		},
	},
	//生命周期 - 创建完成（可以访问当前this实例）
	created() {
		
	},
	//生命周期 - 挂载完成（可以访问DOM元素）
	mounted() {
		// this.$emit('barsType',{id:'dcz',unit:'组'});
		this.$emit('globalTime',{sttm:this.sttm,entm:this.entm});
		if(window.innerWidth <= 1024){
			this.spanForPan = false;
		}else{
			this.spanForPan = true;
		}
		TWEEN.update();
	},
	beforeCreate() {}, //生命周期 - 创建之前
	beforeMount() {}, //生命周期 - 挂载之前
	beforeUpdate() {}, //生命周期 - 更新之前
	updated() {}, //生命周期 - 更新之后
	beforeDestroy() {}, //生命周期 - 销毁之前
	destroyed() {}, //生命周期 - 销毁完成
	activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss">
@mixin inputBorder_dark{
	[data-theme="dark"] & {
		border:1px solid rgba(110, 134, 166, 1);
	}
}
@media screen and (min-width: 900px) {
  @import "@scss/homeForPad";
  .input-class {
  	width: 16vw !important;
	}
}
// @media screen and (min-width: 960px) {
//   @import "@scss/homeForPad";
//   .input-class {
//   	width: 16vw !important;
// 	}
// }
@media  screen and (min-width: 1024px) and (max-width:1920px){
	@import "@scss/home";
	.input-class {
  	width: 9vw !important;
	}
}
@media screen and (min-width: 1920px) {
  @import "@scss/home1920";
  .input-class {
  	width: 9vw !important;
	}
}
.input-class .el-input__inner {
	background-color: transparent;
	@include inputBorder_dark;
}
</style>
<style>
/* 浅色input */

</style>