RMYY_CallCenter_UI/CallCenterWe.../rmyyechartsNew/src/components/IVRSatisfact...

<template>
	<div id="box" style="width: 385px;">
		<div style="margin-left: 200px;position: relative;bottom: 3px;">
			<el-button size="mini" @click="changeType3">修</el-button>
			<el-button size="mini" @click="changeType2">调</el-button>
			<el-button size="mini" @click="changeType4">车</el-button>
		</div>
		<div id="IVRSatisfactionByNow" style="width: 100%;height: 380px;padding: 10px 10px 0 15px;box-sizing: border-box;">
			<el-col :span="6" class="bgbox" v-for="item in dataname">
				<marquee-text :duration="15" :repeat="3" style="padding: 0 5px 20px 0;text-align: center;margin-bottom: 30px;">{{ item.F_name }}</marquee-text>
				<!-- <div class="bgboxname" v-if="item.F_name.length<=5">{{ item.F_name }}</div>
				<div class="bgboxname" v-if="item.F_name.length>5">{{ item.F_name.slice(0,4) }}...</div> -->
				<!-- <div class="bgboxname"><div>{{ item.F_name }}</div></div> -->
				<div class="bgboxcon">{{ item.keycount }}</div>
			</el-col>
		</div>
	</div>
</template>

<script>
	import MarqueeText from 'vue-marquee-text-component'
	import {
		GetTopGD
	} from "../api/dataAnalysis/monitorData.js";
	export default {
		name: "Home",
		props: {
			searchData: {
				type: String,
				default: ''
				
			}
		},
		components: {
			MarqueeText
		},
		data() {
			return {
				seadata: '1',
				gddata:'3000',
				state: 0,
				count: [],
				// countname: ['基础和后勤保障部','信息科','设备科'],
				countname: [],
				countn: [],
				dataname:[]
			};
		},
		watch: {
			searchData(val, oval) {
				this.seadata = val
				this.getDate()
			},
			// "state": function() {
			// 	this.GetIVRSatisfactionByNow()
			// }
		},
		created() {
			this.getDate()
			setInterval(()=>{
				this.getDate()
			},360000)
		},
		mounted() {},
		methods: {
			changeType3(){
				this.gddata = '3000'
				this.getDate()
			},
			changeType2(){
				this.gddata = '2000'
				this.getDate()
			},
			changeType4(){
				this.gddata = '4000'
				this.getDate()
			},
			getDate() {
				const params = {
					type: this.seadata,
					gdtype: this.gddata
				}
				GetTopGD(params).then((res) => {
					if (res.state.toLowerCase() == 'success') {
						this.dataname = []
						let dataAll = res.data
						if(dataAll.length>16){
							dataAll.forEach((v,n)=>{
								if(n<16){
									this.dataname.push(v)
								}
							})
						}else{
							dataAll.forEach((v,n)=>{
								this.dataname.push(v)
							})
						}
					// 	// let arr = [data.data[0].basatisfied,data.data[0].nosatisfied,data.data[0].satisfied]
					// 	let arr = [100, 110, 200]
					// 	this.count = arr.sort(this.ortChange).reverse()
					// 	this.count.forEach((v, n) => {
					// 		if (n == 0) {
					// 			Object.keys(data.data[0]).forEach((key, n) => {
					// 				if (v == data.data[0][key]) {
					// 					this.countname.push(this.getInf(key))
					// 					delete data.data[0][key]
					// 				}
					// 			})
					// 		} else if (n == 1) {
					// 			Object.keys(data.data[0]).forEach((key, n) => {
					// 				if (v == data.data[0][key]) {
					// 					this.countname.push(this.getInf(key))
					// 					delete data.data[0][key]
					// 				}
					// 			})
					// 		} else {
					// 			Object.keys(data.data[0]).forEach((key, n) => {
					// 				if (v == data.data[0][key]) {
					// 					this.countname.push(this.getInf(key))
					// 				}
					// 			})
					// 		}
					// 	})
					// 	console.log(this.count)
					// 	console.log(this.countname)
					// 	this.state = 1
					}
				});
			},
			ortChange(a, b) {
				return a - b;
			},
			getInf(type) {
				const state = {
					"satisfied": '满意',
					"basatisfied": '基本满意',
					"nosatisfied": '不满意'
				}
				return state[type]
			},
			GetIVRSatisfactionByNow() {
				let myChart = this.$echarts.init(document.getElementById("IVRSatisfactionByNow"));
				var Color = ['#503e8d', '#5d3ec5',
					'#874f5f', '#b6575c', '#623363', '#962e66', '#ff4e00', '#fff400', '#0089fe', '#00fdc7',
					'#8f47ff', '#2672cc',
				]
				let option = {
					grid: {
						top: 1,
						// bottom: 20,
						left: 70,
						right: 40,
						height: '100%',
					},
					xAxis: {
						show: false,
						type: 'value'
					},
					yAxis: [{
						type: 'category',
						inverse: true,
						axisLabel: {
							show: true,
							textStyle: {
								fontSize: '14',
								color: '#fff'
							},
						},
						splitLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						},
						data: this.countname
					}, {
						type: 'category',
						inverse: true,
						axisTick: 'none',
						axisLine: 'none',
						show: true,
						axisLabel: {
							textStyle: {
								color: '#ffffff',
								fontSize: '14'
							},
							formatter: function(value) {
								if (value >= 10000) {
									return (value / 10000).toLocaleString() + '万';
								} else {
									return value.toLocaleString();
								}
							},
						},
						data: this.count
					}],
					series: [{
						type: 'bar',
						zlevel: 1,
						showBackground: true,
						backgroundStyle: {
							borderRadius: [0, 20, 20, 0],
							color: '#1a3b55'
						},
						itemStyle: {
							normal: {
								barBorderRadius: [0, 20, 20, 0],
								color: function(params) {
									var colorList = [];
									for (var i = 6; i > 0; i--) {
										colorList.push({
											type: 'bar',
											colorStops: [{
												offset: 0,
												color: Color[i * 2 - 2] // 0% 处的颜色
											}, {
												offset: 1,
												color: Color[i * 2 - 1] // 100% 处的颜色
											}],
											globalCoord: false, // 缺省为 false

										});
									}

									return colorList[params.dataIndex]
								},
							},
						},
						barWidth: 25,
						data: this.count
					}]
				};
				myChart.setOption(option);

			}
		}
	};
</script>

<style scoped>
	/deep/.el-button {
		border: 1px solid #46bec3;
		background: #011832;
		color: #fff;
	}

	#box {
		background-image: url("../assets/imgs/报修高频事件.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding-top: 10px;
	}

	.bgbox {
		width: 90px;
		height: 75px;
		text-align: center;
		background-image: url("../assets/imgs/编组 5.png");
		margin-top: 10px;
		position: relative;
		background-size: 100% 90%;
	}
	/* 移动 */
	@keyframes scrolltext{
	  0% {
	    transform: translateX(100%);
		-webkit-transform: translateX(100%);
	  }
	
	  100% {
	    transform: translateX(-100%);
		-webkit-transform: translateX(-100%);
	  }
	}
	@-webkit-keyframes scrolltext {
	    0% {
	        transform: translateX(100%);
	        -webkit-transform: translateX(100%);
	    }
	    100% {
	        transform: translateX(-100%);
	        -webkit-transform: translateX(-100%);
	    }
	}
	
	.bgboxname{
		height:21px;
		overflow: hidden;
	}
	.bgboxname > div{
	  white-space: nowrap;
	  width: 100%;
	  animation: 5s scrolltext infinite normal;
	}
	
	.bgboxcon {
		width: 90px;
		text-align: center;
		position: absolute;
		right: 5px;
		bottom: 30px;
		color: #38acac;
		font-size: 14px;
	}
</style>