jinganhandle/pages/index/index.vue

<template>
	<view class="content">
		<image class="top-bg" src="/static/top_bg.png"></image>
		<view class="text-area">
			<!-- 第一行 -->
			<text class="left-bg-one"></text>
			<text class="left-title-one">红码</text>
			<text class="center-bg-one"></text>
			
			<navigator url="../detail/detail?handler_state2=1&sm_color=红码" hover-class="navigator-hover">
			<text class="center-title-one">已处置</text>
			<text class="center-num-one">{{centerNum1}}</text>
			<text class="center-add-one">今日{{centerAdd1}}人</text>
			</navigator>
			
			<navigator url="../detail/detail?sm_color=红码&handler_state2=0" hover-class="navigator-hover">
			<text class="right-title-one">处置中</text>
			<text class="right-num-one">{{rightNum1}}</text>
			<text class="right-add-one">今日{{rightAdd1}}人</text>
			</navigator>
			<!-- 第二行 -->
			<text class="left-bg-two"></text>
			<text class="left-title-two">黄码</text>
			<text class="center-bg-two"></text>
			
			<navigator url="../detail/detail?sm_color=黄码&handler_state2=1" hover-class="navigator-hover">
			<text class="center-title-two">已处置</text>
			<text class="center-num-two">{{centerNum2}}</text>
			<text class="center-add-two">今日{{centerAdd2}}人</text>
			</navigator>
			
			<navigator url="../detail/detail?sm_color=黄码&handler_state2=0" hover-class="navigator-hover">
			<text class="right-title-two">处置中</text>
			<text class="right-num-two">{{rightNum2}}</text>
			<text class="right-add-two">今日{{rightAdd2}}人</text>
			</navigator>
			<!-- 第三行 -->
			<text class="left-bg-three"></text>
			<text class="left-title-three">重点人员</text>
			<text class="center-bg-three"></text>
			
			<navigator url="../detail/detail?iskey=1&handler_state2=1" hover-class="navigator-hover">
			<text class="center-title-three">已处置</text>
			<text class="center-num-three">{{centerNum3}}</text>
			<text class="center-add-three">今日{{centerAdd3}}人</text>
			</navigator>
			
			<navigator url="../detail/detail?iskey=1&handler_state2=0" hover-class="navigator-hover">
			<text class="right-title-three">处置中</text>
			<text class="right-num-three">{{rightNum3}}</text>
			<text class="right-add-three">今日{{rightAdd3}}人</text>
			</navigator>
			<!-- 第四行 -->
			<text class="left-bg-four"></text>
			<text class="left-title-four">脱管人员</text>
			<text class="center-bg-four"></text>
			
			<navigator url="../detail/detail?istoken=1&handler_state2=1" hover-class="navigator-hover">
			<text class="center-title-four">已处置</text>
			<text class="center-num-four">{{centerNum4}}</text>
			<text class="center-add-four">今日{{centerAdd4}}人</text>
			</navigator>
			
			<navigator url="../detail/detail?istoken=1&handler_state2=0" hover-class="navigator-hover">
			<text class="right-title-four">处置中</text>
			<text class="right-num-four">{{rightNum4}}</text>
			<text class="right-add-four">今日{{rightAdd4}}人</text>
			</navigator>
			<!-- 第五行 -->
			<text class="left-bg-five"></text>
			<text class="left-title-five">发热人员</text>
			<text class="center-bg-five"></text>
			
			<navigator url="../detail/detail?ishot=1&handler_state2=1" hover-class="navigator-hover">
			<text class="center-title-five">已处置</text>
			<text class="center-num-five">{{centerNum5}}</text>
			<text class="center-add-five">今日{{centerAdd5}}人</text>
			</navigator>
			
			<navigator url="../detail/detail?ishot=1&handler_state2=0" hover-class="navigator-hover">
			<text class="right-title-five">处置中</text>
			<text class="right-num-five">{{rightNum5}}</text>
			<text class="right-add-five">今日{{rightAdd5}}人</text>
			</navigator>
			<!-- 图一 -->
			<image class="center-icon" src="/static/center_icon.png"></image>
			<text class="center-title">处置人数走势图</text>
			
			<text class="anniu">
				<text @click="selectMap(1)" v-bind:class="{active:isActive===1}">
					<text style=" margin-left: 10rpx; margin-right: 10rpx;">红码</text>
				</text>
				<text @click="selectMap(2)" v-bind:class="{active:isActive===2}" style=" margin-left: 25rpx;">
					<text style=" margin-left: 10rpx; margin-right: 10rpx;">黄码</text>
				</text>
				<text @click="selectMap(3)" v-bind:class="{active:isActive===3}" style=" margin-left: 25rpx;">
					<text style=" margin-left: 10rpx; margin-right: 10rpx;">重点人员</text>
				</text>
				<text @click="selectMap(4)" v-bind:class="{active:isActive===4}" style=" margin-left: 25rpx;">
					<text style=" margin-left: 10rpx; margin-right: 10rpx;">脱管人员</text>
				</text>
				<text @click="selectMap(5)" v-bind:class="{active:isActive===5}" style=" margin-left: 25rpx;">
					<text style=" margin-left: 10rpx; margin-right: 10rpx;">发热人员</text>
				</text>
			</text>
			
			<!-- 折线图 -->
		    <div class="chartContainer1">
			  <div class="chart1" ref="chart1"></div>
		    </div>
			<!-- 图二 -->
			<image class="bottom-icon" src="/static/bottom_icon.png"></image>
			<text class="bottom-title">每日处置时长</text>
			<!-- 柱状图 -->
			<div class="chartContainer2">
			  <div class="chart2" ref="chart2"></div>
			</div>
			
		</view>
	</view>
</template>

<script>
	import echarts from "echarts";
	export default {
		data() {
			return {
				// 第一行
				centerNum1:'',
				centerAdd1:'',
				rightNum1:'',
				rightAdd1:'',
				// 第二行
				centerNum2:'',
				centerAdd2:'',
				rightNum2:'',
				rightAdd2:'',
				// 第三行
				centerNum3:'',
				centerAdd3:'',
				rightNum3:'',
				rightAdd3:'',
				// 第四行
				centerNum4:'',
				centerAdd4:'',
				rightNum4:'',
				rightAdd4:'',
				// 第五行
				centerNum5:'',
				centerAdd5:'',
				rightNum5:'',
				rightAdd5:'',
				// 图一
				date:['12-27','12-28','12-29','12-30','12-31','01-01','01-02','01-03'],
				valuenew:[90,90,115,100,95,100,140,110,80],
				isActive:1,
				chart1_color:'',
				chart1_iskey:'',
				chart1_ishot:'',
				chart1_istoken:'',
				// 图二
				date2:['12-27','12-28','12-29','12-30','12-31','01-01','01-02','01-03'],
				valuenew2:[3.5,4.5,2.5,3.8,2.5,1.5,3.5,4.5]
			}
		},
		onLoad() {

		},
		mounted() {
			this.getHandleText()
			this.getEightRed1()
			this.getEightAvg()
		},
		watch: {
		    date: {
		      handler(val, oldVal) {
		        // console.log(val)
		        this.getEchartData1()
		      },
		      deep: true, //true 深度监听
		    },
			date2: {
			  handler(val, oldVal) {
			    // console.log(val)
			    this.getEchartData2()
			  },
			  deep: true, //true 深度监听
			},
		  },
		methods: {
			//图一处各选项
			selectMap(index){
			  this.isActive=index;
			  if(this.isActive===2){
				  this.chart1_color='黄码'
				  this.chart1_iskey=''
				  this.chart1_istoken=''
				  this.chart1_ishot=''
				  this.getEightRed1()
			  }
			  if(this.isActive===3){
			      this.chart1_iskey='1'
				  this.chart1_color=''
				  this.chart1_istoken=''
				  this.chart1_ishot=''
				  this.getEightRed2()
			  }
			  if(this.isActive===4){
			  	  this.chart1_istoken='1'
				  this.chart1_color=''
				  this.chart1_iskey=''
				  this.chart1_ishot=''
				  this.getEightRed3()
			  }
			  if(this.isActive===5){
			  	  this.chart1_ishot='1'
				  this.chart1_color=''
				  this.chart1_iskey=''
				  this.chart1_istoken=''
				  this.getEightRed4()
			  }
			  if(this.isActive===1){
				  this.chart1_color=''
				  this.chart1_iskey=''
				  this.chart1_istoken=''
			  	  this.chart1_ishot=''
				  this.getEightRed1()
			  }
			},
			//处置情况分析
			getHandleText() {
				this.$axios.post('/bigData2/mobqueryHandlerTj.action', {
						headers: {
							'Content-Type': 'application/json',
						}
					})
					.then(res => {
						//红码
						this.centerNum1=res.data.redL.red_lj_handlded
						this.centerAdd1=res.data.redT.red_handlded
						this.rightNum1=res.data.redL.red_lj_unhandlded
						this.rightAdd1=res.data.redT.red_unhandlded
						//黄码
						this.centerNum2=res.data.yellowL.yellow_lj_handlded
						this.centerAdd2=res.data.yellowT.yellow_handlded
						this.rightNum2=res.data.yellowL.yellow_lj_unhandlded
						this.rightAdd2=res.data.yellowT.yellow_unhandlded
						//重点人员
						this.centerNum3=res.data.keyL.key_lj_handlded
						this.centerAdd3=res.data.keyT.key_handlded
						this.rightNum3=res.data.keyL.key_lj_unhandlded
						this.rightAdd3=res.data.keyT.key_unhandlded
						//脱管人员
						this.centerNum4=res.data.tokenL.token_lj_handlded
						this.centerAdd4=res.data.tokenT.token_handlded
						this.rightNum4=res.data.tokenL.token_lj_unhandlded
						this.rightAdd4=res.data.tokenT.token_unhandlded
						//发热人员
						this.centerNum5=res.data.hotL.hot_lj_handlded
						this.centerAdd5=res.data.hotT.hot_handlded
						this.rightNum5=res.data.hotL.hot_lj_unhandlded
						this.rightAdd5=res.data.hotT.hot_unhandlded
					})
					.catch(err => {
						console.log(err)
					})
			},
			//图一红黄码近8天处置统计--红黄码
			getEightRed1() {
				this.date=[]
				this.valuenew=[]
				this.$axios.post('/bigData2/mobqueryEightRed.action?sm_color='+this.chart1_color, {
						headers: {
							'Content-Type': 'application/json',
						}
					})
					.then(res => {
						// console.log(res.data)
						for (var i = 0; i < res.data.date.length; i++) {
						  this.date.push(res.data.date[i].substring(6));
						}
						for (var i = 0; i < res.data.data.length; i++) {
						  this.valuenew.push(res.data.data[i].red_handlded);
						}
						this.date=this.date.reverse()
						this.valuenew=this.valuenew.reverse()
					})
					.catch(err => {
						console.log(err)
					})
			},
			//图一红黄码近8天处置统计--重点
			getEightRed2() {
				this.date=[]
				this.valuenew=[]
				this.$axios.post('/bigData2/mobqueryEightRed.action?iskey='+this.chart1_iskey, {
						headers: {
							'Content-Type': 'application/json',
						}
					})
					.then(res => {
						// console.log(res.data)
						for (var i = 0; i < res.data.date.length; i++) {
						  this.date.push(res.data.date[i].substring(6));
						}
						for (var i = 0; i < res.data.data.length; i++) {
						  this.valuenew.push(res.data.data[i].red_handlded);
						}
						this.date=this.date.reverse()
						this.valuenew=this.valuenew.reverse()
					})
					.catch(err => {
						console.log(err)
					})
			},
			//图一红黄码近8天处置统计--脱管
			getEightRed3() {
				this.date=[]
				this.valuenew=[]
				this.$axios.post('/bigData2/mobqueryEightRed.action?istoken='+this.chart1_istoken, {
						headers: {
							'Content-Type': 'application/json',
						}
					})
					.then(res => {
						// console.log(res.data)
						for (var i = 0; i < res.data.date.length; i++) {
						  this.date.push(res.data.date[i].substring(6));
						}
						for (var i = 0; i < res.data.data.length; i++) {
						  this.valuenew.push(res.data.data[i].red_handlded);
						}
						this.date=this.date.reverse()
						this.valuenew=this.valuenew.reverse()
					})
					.catch(err => {
						console.log(err)
					})
			},
			//图一红黄码近8天处置统计--发热
			getEightRed4() {
				this.date=[]
				this.valuenew=[]
				this.$axios.post('/bigData2/mobqueryEightRed.action?ishot='+this.chart1_ishot, {
						headers: {
							'Content-Type': 'application/json',
						}
					})
					.then(res => {
						// console.log(res.data)
						for (var i = 0; i < res.data.date.length; i++) {
						  this.date.push(res.data.date[i].substring(6));
						}
						for (var i = 0; i < res.data.data.length; i++) {
						  this.valuenew.push(res.data.data[i].red_handlded);
						}
						this.date=this.date.reverse()
						this.valuenew=this.valuenew.reverse()
					})
					.catch(err => {
						console.log(err)
					})
			},
			//图二处置时长
			getEightAvg() {
				this.date2=[]
				this.valuenew2=[]
				this.$axios.post('/bigData2/mobqueryEightAvg.action', {
						headers: {
							'Content-Type': 'application/json',
						}
					})
					.then(res => {
						// console.log(res.data)
						for (var i = 0; i < res.data.date.length; i++) {
						  this.date2.push(res.data.date[i].substring(6));
						}
						for (var i = 0; i < res.data.data.length; i++) {
						  this.valuenew2.push(res.data.data[i].duration);
						}
						this.date2=this.date2.reverse()
						this.valuenew2=this.valuenew2.reverse()
						// console.log(this.date2)
						// console.log(this.valuenew2)
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 折线图
			getEchartData1() {
			  const chart1 = this.$refs.chart1;
			  var option = null;
			  const myChart = this.$echarts.init(chart1);
			  option = {
				tooltip: {
				  trigger: "axis",
				  axisPointer: {
					type: "shadow",
				  },
				  textStyle: {
					fontSize: 12,
					fontWeight: 200,
				  },
				},
				legend: {
				},
				grid: {
				  left:"2%",
				  right: "8%",
				  bottom: "0%",
				  top:"19%",
				  containLabel: true,
				},
				textStyle: {
				  fontFamily: "FZZhunYuan-M02S",
				  fontWeight: "bold",
				  fontColor: "#FEFEFE",
				},
				color: ["#419EFF"],
				xAxis: [
				  {
					type: "category",
					// name: "(时段)",
					nameTextStyle: {
					  color: "#fff",
					},
					boundaryGap: false,
					data: this.date,
					axisLabel: {
					  show: true,
					  height: 15,
					  fontSize: 12,
					  fontFamily: "Microsoft YaHei-3970(82674968)",
					  fontWeight: "bold",
					  color: "#999999",
					  align: "center",
					  rotate: 45,//倾斜角度
					  margin:20,
					},
					axisLine: {
					  show: false,
					  lineStyle: {
						color: "#676767",
					  },
					},
				  },
				],
				yAxis: [
				  {
					name: "(人)",
					nameGap: 10,
					type: "value",
					scale: true,
					axisLabel: {
					  show: true,
					  height: 14,
					  fontSize: 12,
					  fontFamily: "FZZhunYuan-M02S",
					  fontWeight: "bold",
					  color: "#999999",
					},
					axisLine: {
					  show: false,
					  lineStyle: {
						color: "#999999", //人数的颜色
					  },
					},
					splitLine: {
					  show: true,
					  lineStyle: {
						type: "dotted",
						color: "#D9D9D9",
					  },
					},
				  },
				],
				series: [
				  {
					// name: "最近一周游客人数",
					type: "line",
					symbol: "emptyCircle",
					symbolSize: 7,
					data: this.valuenew, //
				  },
				],
			  };
			  myChart.setOption(option);
			  window.addEventListener("resize", function () {
				myChart.resize();
			  });
			  this.$on("hook:destroyed", () => {
				window.removeEventListener("resize", function () {
				  chart1.resize();
				});
			  });
			  return option;
			},
			//图二
			getEchartData2() {
			  const chart2 = this.$refs.chart2;
			  var option = null;
			  const myChart = this.$echarts.init(chart2);
			  option = {
				color: ["#419EFF"],
				xAxis: {
				    type: 'category',
				    data: this.date2,
					axisLabel: {
					  show: true,
					  height: 17,
					  fontSize: 11,
					  fontFamily: "Microsoft YaHei-3970(82674968)",
					  fontWeight: "bold",
					  color: "#999999",
					  align: "center",
					  rotate: 45,//倾斜角度
					  margin:17,
					},
					axisLine: {
					  show: false,
					  lineStyle: {
						color: "#676767",
					  },
					},
				  },
				  yAxis: {
					name: "(小时)",
				    type: "value",
				    scale: true,
				    axisLabel: {
				      show: true,
				      height: 14,
				      fontSize: 12,
				      fontFamily: "FZZhunYuan-M02S",
				      fontWeight: "bold",
				      color: "#999999",
				    },
				    axisLine: {
				      show: false,
				      lineStyle: {
				    	color: "#999999", //人数的颜色
				      },
				    },
				    splitLine: {
				      show: true,
				      lineStyle: {
				    	type: "dotted",
				    	color: "#D9D9D9",
				      },
				    },
				  },
				  series: [
				    {
				      data: this.valuenew2,
				      type: 'bar'
				    }
				  ]
			  };
			  myChart.setOption(option);
			  window.addEventListener("resize", function () {
				myChart.resize();
			  });
			  this.$on("hook:destroyed", () => {
				window.removeEventListener("resize", function () {
				  chart2.resize();
				});
			  });
			  return option;
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.top-bg {
		height: 100px;
		width: 375px;
		margin-top: 0rpx;
		margin-left: auto;
		margin-right: auto;
	}

	.text-area {
		display: flex;
		width: 375px;
	}
	/* 第一行 */
	.left-bg-one{
		margin-top: 85rpx;
		margin-left: 30rpx;
		width: 68rpx;
		height: 11rpx;
		background: #A3D0FF;
		position: absolute;
		z-index: 1;
	}
	.left-title-one {
		margin-left: 35rpx;
		margin-top: 63rpx;
		width: 56rpx;
		height: 27rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #000000;
		position: absolute;
		z-index: 2;
	}
	.center-bg-one{
		margin-top: 28rpx;
		margin-left: 196rpx;
		width: 2rpx;
		height: 104rpx;
		background: #D9D9D9;
		position: absolute;
		z-index: 1;
	}
	.center-title-one{
		margin-top: 96rpx;
		margin-left: 231rpx;
		position: absolute;
		width: 85rpx;
		height: 26rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #999999;
	}
	.center-num-one{
		margin-top: 49rpx;
		margin-left: 238rpx;
		position: absolute;
		width: 85rpx;
		height: 31rpx;
		font-size: 40rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #000000;
	}
	.center-add-one{
		margin-top: 30rpx;
		margin-left: 312rpx;
		position: absolute;
		width: 200rpx;
		height: 19rpx;
		font-size: 20rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #3D9EF8;
	}
	.right-title-one{
		margin-top: 96rpx;
		margin-left: 509rpx;
		position: absolute;
		width: 85rpx;
		height: 26rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #999999;
	}
	.right-num-one{
		margin-top: 49rpx;
		margin-left: 541rpx;
		position: absolute;
		width: 85rpx;
		height: 31rpx;
		font-size: 40rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #000000;
	}
	.right-add-one{
		margin-top: 30rpx;
		margin-left: 592rpx;
		position: absolute;
		width: 200rpx;
		height: 19rpx;
		font-size: 20rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #3D9EF8;
	}
	/* 第二行 */
	.left-bg-two{
		margin-top: 235rpx;
		margin-left: 30rpx;
		width: 68rpx;
		height: 11rpx;
		background: #A3D0FF;
		position: absolute;
		z-index: 1;
	}
	.left-title-two {
		margin-left: 35rpx;
		margin-top: 213rpx;
		width: 56rpx;
		height: 27rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #000000;
		position: absolute;
		z-index: 2;
	}
	.center-bg-two{
		margin-top: 173rpx;
		margin-left: 196rpx;
		width: 2rpx;
		height: 104rpx;
		background: #D9D9D9;
		position: absolute;
		z-index: 1;
	}
	.center-title-two{
		margin-top: 241rpx;
		margin-left: 231rpx;
		position: absolute;
		width: 85rpx;
		height: 26rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #999999;
	}
	.center-num-two{
		margin-top: 194rpx;
		margin-left: 238rpx;
		position: absolute;
		width: 85rpx;
		height: 31rpx;
		font-size: 40rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #000000;
	}
	.center-add-two{
		margin-top: 175rpx;
		margin-left: 312rpx;
		position: absolute;
		width: 200rpx;
		height: 19rpx;
		font-size: 20rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #3D9EF8;
	}
	.right-title-two{
		margin-top: 241rpx;
		margin-left: 509rpx;
		position: absolute;
		width: 85rpx;
		height: 26rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #999999;
	}
	.right-num-two{
		margin-top: 194rpx;
		margin-left: 541rpx;
		position: absolute;
		width: 85rpx;
		height: 31rpx;
		font-size: 40rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #000000;
	}
	.right-add-two{
		margin-top: 175rpx;
		margin-left: 592rpx;
		position: absolute;
		width: 200rpx;
		height: 19rpx;
		font-size: 20rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #3D9EF8;
	}
	/* 第三行 */
	.left-bg-three{
		margin-top: 385rpx;
		margin-left: 30rpx;
		width: 123rpx;
		height: 11rpx;
		background: #A3D0FF;
		position: absolute;
		z-index: 1;
	}
	.left-title-three {
		margin-left: 35rpx;
		margin-top: 363rpx;
		width: 115rpx;
		height: 27rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #000000;
		position: absolute;
		z-index: 2;
	}
	.center-bg-three{
		margin-top: 323rpx;
		margin-left: 196rpx;
		width: 2rpx;
		height: 104rpx;
		background: #D9D9D9;
		position: absolute;
		z-index: 1;
	}
	.center-title-three{
		margin-top: 391rpx;
		margin-left: 231rpx;
		position: absolute;
		width: 85rpx;
		height: 26rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #999999;
	}
	.center-num-three{
		margin-top: 344rpx;
		margin-left: 238rpx;
		position: absolute;
		width: 85rpx;
		height: 31rpx;
		font-size: 40rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #000000;
	}
	.center-add-three{
		margin-top: 325rpx;
		margin-left: 312rpx;
		position: absolute;
		width: 200rpx;
		height: 19rpx;
		font-size: 20rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #3D9EF8;
	}
	.right-title-three{
		margin-top: 391rpx;
		margin-left: 509rpx;
		position: absolute;
		width: 85rpx;
		height: 26rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #999999;
	}
	.right-num-three{
		margin-top: 344rpx;
		margin-left: 541rpx;
		position: absolute;
		width: 85rpx;
		height: 31rpx;
		font-size: 40rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #000000;
	}
	.right-add-three{
		margin-top: 325rpx;
		margin-left: 592rpx;
		position: absolute;
		width: 200rpx;
		height: 19rpx;
		font-size: 20rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #3D9EF8;
	}
	/* 第四行 */
	.left-bg-four{
		margin-top: 535rpx;
		margin-left: 30rpx;
		width: 123rpx;
		height: 11rpx;
		background: #A3D0FF;
		position: absolute;
		z-index: 1;
	}
	.left-title-four {
		margin-left: 35rpx;
		margin-top: 513rpx;
		width: 115rpx;
		height: 27rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #000000;
		position: absolute;
		z-index: 2;
	}
	.center-bg-four{
		margin-top: 473rpx;
		margin-left: 196rpx;
		width: 2rpx;
		height: 104rpx;
		background: #D9D9D9;
		position: absolute;
		z-index: 1;
	}
	.center-title-four{
		margin-top: 541rpx;
		margin-left: 231rpx;
		position: absolute;
		width: 85rpx;
		height: 26rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #999999;
	}
	.center-num-four{
		margin-top: 494rpx;
		margin-left: 238rpx;
		position: absolute;
		width: 85rpx;
		height: 31rpx;
		font-size: 40rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #000000;
	}
	.center-add-four{
		margin-top: 475rpx;
		margin-left: 312rpx;
		position: absolute;
		width: 200rpx;
		height: 19rpx;
		font-size: 20rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #3D9EF8;
	}
	.right-title-four{
		margin-top: 541rpx;
		margin-left: 509rpx;
		position: absolute;
		width: 85rpx;
		height: 26rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #999999;
	}
	.right-num-four{
		margin-top: 494rpx;
		margin-left: 541rpx;
		position: absolute;
		width: 85rpx;
		height: 31rpx;
		font-size: 40rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #000000;
	}
	.right-add-four{
		margin-top: 475rpx;
		margin-left: 592rpx;
		position: absolute;
		width: 200rpx;
		height: 19rpx;
		font-size: 20rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #3D9EF8;
	}
	/* 第五行 */
	.left-bg-five{
		margin-top: 685rpx;
		margin-left: 30rpx;
		width: 123rpx;
		height: 11rpx;
		background: #A3D0FF;
		position: absolute;
		z-index: 1;
	}
	.left-title-five {
		margin-left: 35rpx;
		margin-top: 663rpx;
		width: 115rpx;
		height: 27rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #000000;
		position: absolute;
		z-index: 2;
	}
	.center-bg-five{
		margin-top: 623rpx;
		margin-left: 196rpx;
		width: 2rpx;
		height: 104rpx;
		background: #D9D9D9;
		position: absolute;
		z-index: 1;
	}
	.center-title-five{
		margin-top: 691rpx;
		margin-left: 231rpx;
		position: absolute;
		width: 85rpx;
		height: 26rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #999999;
	}
	.center-num-five{
		margin-top: 644rpx;
		margin-left: 238rpx;
		position: absolute;
		width: 85rpx;
		height: 31rpx;
		font-size: 40rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #000000;
	}
	.center-add-five{
		margin-top: 625rpx;
		margin-left: 312rpx;
		position: absolute;
		width: 200rpx;
		height: 19rpx;
		font-size: 20rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #3D9EF8;
	}
	.right-title-five{
		margin-top: 691rpx;
		margin-left: 509rpx;
		position: absolute;
		width: 85rpx;
		height: 26rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #999999;
	}
	.right-num-five{
		margin-top: 644rpx;
		margin-left: 541rpx;
		position: absolute;
		width: 85rpx;
		height: 31rpx;
		font-size: 40rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #000000;
	}
	.right-add-five{
		margin-top: 625rpx;
		margin-left: 592rpx;
		position: absolute;
		width: 200rpx;
		height: 19rpx;
		font-size: 20rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #3D9EF8;
	}
	/* 图一 */
	.center-icon{
		margin-top: 772rpx;
		margin-left: 30rpx;
		position: absolute;
		width: 29rpx;
		height: 29rpx;
	}
	.center-title{
		margin-top: 766rpx;
		margin-left: 68rpx;
		position: absolute;
		width: 229rpx;
		height: 33rpx;
		font-size: 32rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: bold;
		color: #000000;
	}
	.anniu{
		margin-top: 826rpx;
		margin-left: 105rpx;
		position: absolute;
		width:580rpx;
		height:40rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #999999;
		text-align: center;
	}
	.active{
		width: 70rpx;
		height: 40rpx;
		border-radius: 2rpx;
		color: #419EFF;
		background: #E8F3FF;
	}
	.chart1{
		margin-top: 885rpx;
		margin-left: 40rpx;
		position: absolute;
		height: 348rpx;
		width: 660rpx;
	}
	/* 图二 */
	.bottom-icon{
		margin-top: 1289rpx;
		margin-left: 30rpx;
		position: absolute;
		width: 29rpx;
		height: 29rpx;
	}
	.bottom-title{
		margin-top: 1283rpx;
		margin-left: 68rpx;
		position: absolute;
		width: 229rpx;
		height: 33rpx;
		font-size: 32rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: bold;
		color: #000000;
	}
	/* 柱状图 */
	.chart2{
		margin-top: 1352rpx;
		margin-left: 38rpx;
		position: absolute;
		height: 358rpx;
		width: 660rpx;
	}
</style>