<template><!--管理视图-首页-->
	<div class="box-bg">
		<div class="main-top">
			<Select v-model="projectId" @on-change="changeProject" class="project-select">
				<Option v-for="(item, index) in projectList" :value="item.project_id" :key="index">{{item.project_name}}</Option>
			</Select>
			<div class="weather-data">
				<p>今日天气 ：{{weather.cond_txt}}   {{weather.tmp}}℃</p>
				<p>空气质量指数： {{weather.qlty}}</p>
				<p v-if="weather.title">灾害预警：{{weather.title}}</p>
				<p v-if="weather.level">预警级别：{{weather.level}}预警</p>
			</div>
		</div>
		
		<scroller lock-y :scrollbar-x=false>
      <div class="box1">
        <div class="box1-item">
        	<h1>{{baseData.deviceNum}}</h1>
        	<h6><i class="dot color1"></i>设备总数</h6>
        </div>
        <div class="box1-item">
        	<h1>{{baseData.signInToday}}</h1>
        	<h6><i class="dot color2"></i>今日签到</h6>
        </div>
        <div class="box1-item">
        	<h1>{{baseData.maintainInMonth}}</h1>
        	<h6><i class="dot color3"></i>本月维修</h6>
        </div>
        <div class="box1-item">
        	<h1>{{baseData.inspectionInMonth}}</h1>
        	<h6><i class="dot color4"></i>本月巡检</h6>
        </div>
        <div class="box1-item">
        	<h1>{{baseData.maintenanceInMonth}}</h1>
        	<h6><i class="dot color5"></i>本月维保</h6>
        </div>
      </div>
    </scroller>
    
    <div class="box2">
    	<div class="box2-title">
    		<p>重要设施设备运行状况</p>
  			<a @click="toWarningPage">设备预警 <Badge :count="warningNum"></Badge></a>
    	</div>
    	<div v-for="(item, index) in deviceDataList" :key="index" class="box2-data">
    		<Row>
    			<Col span="4"><img src="./assets/images/icon.png" /><h5>{{item.sysName}}</h5></Col>
    			<Col span="20" class="box2-data-num">
    				<Row>
    					<Col span="6" @click.native="toNormalList(item.sysId, item.normalNumber)"><h4>{{item.normalNumber}}</h4><h6>正常</h6></Col>
    					<Col span="6" @click.native="toFaultList(item.sysId, item.malfunctionNumber)"><h4>{{item.malfunctionNumber}}</h4><h6>故障</h6></Col>
    					<Col span="6"><h4>{{item.matainNumber}}</h4><h6>维保</h6></Col>
    					<Col span="6"><h4 :class="item.disable > 0 ? 'color-error' : ''">{{item.stopNumber}}</h4><h6>停用</h6></Col>
    				</Row>
    			</Col>
    		</Row>
    	</div>
    </div>
    
    <!--上月能耗统计-->
    <div class="box3">
    	<div class="box3-title">
    		<p>上月能耗统计</p>
    	</div>
    	<Row class="box3-data">
    		<Col span="8"><dl><h5>水</h5><h3>{{waterMonthData}}L</h3></dl></Col>
    		<Col span="8"><dl><h5>电</h5><h3>{{electricityMonthData}}kWh</h3></dl></Col>
    		<Col span="8"><dl><h5>气</h5><h3>{{gasMonthData}}m³</h3></dl></Col>
    	</Row>
    </div>
    
    <!--用水同比-->
    <div class="box3">
    	<div class="box3-title">
    		<p>用水同比</p>
    	</div>
    	<div ref="echartWater" class="echarts-box" :style="{width: echartWidth}"></div>
    </div>
    
    <!--用电同比-->
    <div class="box3">
    	<div class="box3-title">
    		<p>用电同比</p>
    	</div>
    	<div ref="echart2" class="echarts-box" :style="{width: echartWidth}"></div>
    </div>
    
    <!--用气同比-->
    <div class="box3">
    	<div class="box3-title">
    		<p>用气同比</p>
    	</div>
    	<div ref="echart3" class="echarts-box" :style="{width: echartWidth}"></div>
    </div>
	</div>
</template>

<script>
	import { Scroller } from 'vux';
	import echarts from 'echarts';
	
	import {
		getProjectInfoByCompanyId, 
		getNowWeatherInfo, getWarningWeatherInfo,
		getShenJiaoSuoBaseData, getDeviceWarningNum, getCountDeviceStateOnLevelGroup,
		getMonthWaterElectricityGasStatistics, getYearWaterElectricityGasStatistics
	} from './service/getData.js';
	export default {
		components: {
			'scroller': Scroller
		},
		data () {
	    return {
	    	companyId: localStorage.companyId || '', //公司id
	    	projectList: [], //项目列表数据
	    	projectId: '', //项目id
	    	
	    	lon: '114.085945', //项目定位的经度
	    	lat: '22.547', //项目定位的纬度
//	    	lon: '114.04', //项目定位的经度
//	    	lat: '29.54', //项目定位的纬度
	    	weather: {}, //天气数据
	    	
	    	baseData: {
	    		deviceNum: '0', //设备总数
	    		signInToday: '0', //今日签到
	    		maintainInMonth: '0', //本月维修
	    		inspectionInMonth: '0', //本月巡检
	    		maintenanceInMonth: '0' //本月维保
	    	},
	    	warningNum: 0, //预警设备数量
	    	deviceDataList: [],
	    	
	    	waterMonthData: 0, //水
	 			electricityMonthData: 0, //电
	 			gasMonthData: 0, //气
	 			
	    	echartWidth: '', //echart图表的宽度，计算
	    	xAxisData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], //X轴数据
	    	waterData: { //用水数据
	    		category: [], //X轴数据
	    		lastYear: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120],
	    		thisYear: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120]
	    	},
	    	elecData: { //用电数据
	    		lastYear: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120],
	    		thisYear: [120, 110, 340, 40, 50, 60, 70, 80, 90, 100, 110, 120]
	    	},
	    	gasData: { //用气数据
	    		lastYear: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120],
	    		thisYear: [120, 110, 340, 40, 50, 60, 70, 80, 90, 100, 110, 120]
	    	}
	    }
	 	},
	 	mounted() {
	 		var self = this;
	 		self.echartWidth = (window.innerWidth - 40) + 'px';
			this.$nextTick(function() {
//				self.drawEcharts1();
//				self.drawEcharts2();
//				self.drawEcharts3();
			})
		},
	 	created: function() {
			 this.getProjectData();
			 EbeiPlugins.setBackButtonHidden(true);
	 	},
	 	methods: {
	 		getProjectData() { //查询项目列表数据
	 			var self = this;
	 			self.projectList = [];
	 			self.$Spin.show();
	 			getProjectInfoByCompanyId({companyId: self.companyId}).then(res => {
	 				self.$Spin.hide();
	 				if(res.status == 200 && res.data.length && res.data.length > 0) {
	 					self.projectList = res.data;
	 					self.projectId = res.data[0].project_id;
	 				}
	 				this.initData();
	 			})
	 		},
	 		changeProject(value) {
	 			localStorage.projectId = value;
	 			this.initData(); //项目切换之后，重新获取页面数据
	 		},
	 		initData() {
	 			this.getWeatherWarning(); //天气预警
	 			this.getBaseData(); //获取设备总数等基础数据
	 			this.getDeviceStateData(); //重要设施设备运行状况
	 			this.getWarningNum(); //获取设备预警数量
	 			this.getMonthDeviceData(); //获取上月水电气数据
	 			this.getYearDeviceData(); //获取年水电气对比数据
	 		},
	 		getWeatherWarning() { //天气预警
	 			var self = this;
	 			self.weather = {};
	 			var jsonData = {
	 				companyId: self.companyId,
	 				lon: self.lon, //经度
	 				lat: self.lat, //纬度
	 			};
	 			self.$Spin.show();
	 			getNowWeatherInfo(jsonData).then(res => {
	 				self.$Spin.hide();
	 				if(res.status == 200) {
	 					self.weather.cond_txt = res.data.cond_txt; //天气
	 					self.weather.tmp = res.data.tmp; //温度
	 					self.weather.qlty = res.data.qlty; //空气质量
	 				}
	 			});
	 			getWarningWeatherInfo(jsonData).then(res => {
	 				self.$Spin.hide();
	 				if(res.status == 200 && res.data.status == 'ok') {
	 					self.weather.title = res.data.title; //预警标题
	 					self.weather.level = res.data.level; //预警级别
	 				}
	 			});
	 		},
	 		getBaseData() { //获取设备总数等基础数据
	 			var self = this;
	 			self.baseData = {
	    		deviceNum: 0, //设备总数
	    		signInToday: 0, //今日签到
	    		maintainInMonth: 0, //本月维修
	    		inspectionInMonth: 0, //本月巡检
	    		maintenanceInMonth: 0 //本月维保
	    	};
	 			var dataJson = {
	 				companyId: self.companyId,
	 				projectId: self.projectId,
	 			};
	 			getShenJiaoSuoBaseData(dataJson).then(res => {
	 				if(res.status == 200) {
	 					self.baseData = {
			    		deviceNum: res.data.deviceNum, //设备总数
			    		signInToday: res.data.signInToday, //今日签到
			    		maintainInMonth: res.data.maintainInMonth, //本月维修
			    		inspectionInMonth: res.data.inspectionInMonth, //本月巡检
			    		maintenanceInMonth: res.data.maintenanceInMonth //本月维保
			    	};
	 				}
	 			})
	 		},
	 		getWarningNum() { //获取设备预警数量
	 			var self = this;
	 			self.warningNum = 0;
	 			var jsonData = {
	 				companyId: self.companyId,
	 				projectId: self.projectId,
	 			};
	 			getDeviceWarningNum(jsonData).then(res => {
	 				if(res.status == 200) {
	 					self.warningNum = res.data.warningNum;
	 				}
	 			})
	 		},
	 		getDeviceStateData() { //获取重要设施设备运行状况
	 			var self = this;
	 			self.deviceDataList = [];
	 			var dataJson = {
	 				companyId: self.companyId,
	 				projectId: self.projectId,
	 			};
	 			getCountDeviceStateOnLevelGroup(dataJson).then(res => {
	 				if(res.status == 200) {
	 					self.deviceDataList = res.data;
	 				}
	 			})
	 		},
	 		toWarningPage() { //跳转到预警设备列表
	 			this.$router.push('/warningDevice');
	 		},
	 		toNormalList(sysId, num) { //跳转到正常设备列表
	 			if(parseInt(num) > 0) {
	 				this.$router.push('/normalDevice?sysId='+sysId);
	 			}
	 		},
	 		toFaultList(sysId, num) { //跳转到故障设备列表
	 			if(parseInt(num) > 0) {
	 				this.$router.push('/faultDevice?sysId='+sysId);
	 			}
	 		},
	 		getMonthDeviceData() { //获取上月水电气数据
	 			var self = this;
	 			self.waterMonthData = 0;
	 			self.electricityMonthData = 0;
	 			self.gasMonthData = 0;
	 			if(self.projectId == '') {
	 				self.$Message.info("请选择项目");
	 				return false;
	 			}
	 			var jsonData = {
	 				companyId: self.companyId,
	 				projectId: self.projectId,
	 				classify: '1', //水：1，电：2，气：3
	 			};
	 			getMonthWaterElectricityGasStatistics(jsonData).then(res => {
	 				if(res.status == 200) {
	 					self.waterMonthData = res.data.monthUses; //水
	 				}
	 			});
	 			var jsonData2 = {
	 				companyId: self.companyId,
	 				projectId: self.projectId,
	 				classify: '2', //水：1，电：2，气：3
	 			};
	 			getMonthWaterElectricityGasStatistics(jsonData2).then(res => {
	 				if(res.status == 200) {
	 					self.electricityMonthData = res.data.monthUses; //电
	 				}
	 			})
	 			var jsonData3 = {
	 				companyId: self.companyId,
	 				projectId: self.projectId,
	 				classify: '3', //水：1，电：2，气：3
	 			};
	 			getMonthWaterElectricityGasStatistics(jsonData3).then(res => {
	 				if(res.status == 200) {
	 					self.gasMonthData = res.data.monthUses; //气
	 				}
	 			})
	 		},
	 		getYearDeviceData() {
	 			var self = this;
	 			self.waterData = { //用水数据
	    		category: [],
	    		lastYear: [],
	    		thisYear: []
	    	};
	    	self.elecData = { //用电数据
	    		category: [],
	    		lastYear: [],
	    		thisYear: []
	    	};
	    	self.gasData = { //用气数据
	    		category: [],
	    		lastYear: [],
	    		thisYear: []
	    	};
	 			
	 			var jsonData1 = {
	 				companyId: self.companyId,
	 				projectId: self.projectId,
	 				classify: '1', //水：1，电：2，气：3
	 			};
	 			getYearWaterElectricityGasStatistics(jsonData1).then(res => {
	 				if(res.status == 200) {
	 					self.waterData = res.data;
	 					self.drawEcharts1();
	 				}
	 			})
	 			
	 			var jsonData2 = {
	 				companyId: self.companyId,
	 				projectId: self.projectId,
	 				classify: '2', //水：1，电：2，气：3
	 			};
	 			getYearWaterElectricityGasStatistics(jsonData2).then(res => {
	 				if(res.status == 200) {
	 					self.elecData = res.data;
	 					self.drawEcharts2();
	 				}
	 			})
	 			
	 			var jsonData3 = {
	 				companyId: self.companyId,
	 				projectId: self.projectId,
	 				classify: '3', //水：1，电：2，气：3
	 			};
	 			getYearWaterElectricityGasStatistics(jsonData3).then(res => {
	 				if(res.status == 200) {
	 					self.gasData = res.data;
	 					self.drawEcharts3();
	 				}
	 			})
	 		},
	 		
	 		drawEcharts1() { //用水对比数据
				var myChart = echarts.init(this.$refs.echartWater);
				myChart.setOption({
					color: ['#61A5E8', '#7ECF51'],
					grid: {
						left: 50,
						right: 0
					},
					legend: {
						data: ['去年','今年'],
		        left: 'center',
    			},
    			xAxis: {
    				type: 'category',
    				data: this.waterData.category
    			},
    			yAxis: {
        		type : 'value'
    			},
			    series: [{
			    	name: '去年',
		        type: 'bar',
		        stack: '总量',
            data: this.waterData.lastYear,
        	}, {
        		name: '今年',
		        type: 'bar',
		        stack: '总量',
            data: this.waterData.thisYear,
			    }]
				});
	 		},
	 		drawEcharts2() { //用电对比数据
				var myChart = echarts.init(this.$refs.echart2);
				myChart.setOption({
					color: ['#61A5E8', '#7ECF51'],
					grid: {
						left: 50,
						right: 0
					},
					legend: {
						data: ['去年','今年'],
		        left: 'center',
    			},
    			xAxis: {
    				type: 'category',
    				data: this.elecData.category
    			},
    			yAxis: {
        		type : 'value'
    			},
			    series: [{
			    	name: '去年',
		        type: 'line',
            data: this.elecData.lastYear,
        	}, {
        		name: '今年',
		        type: 'line',
            data: this.elecData.thisYear,
			    }]
				});
	 		},
	 		drawEcharts3() { //用气对比数据
				var myChart = echarts.init(this.$refs.echart3);
				myChart.setOption({
					color: ['#61A5E8', '#7ECF51'],
					grid: {
						left: 50,
						right: 0
					},
					legend: {
						data: ['去年','今年'],
		        left: 'center',
    			},
    			xAxis: {
    				type: 'category',
    				data: this.gasData.category
    			},
    			yAxis: {
        		type : 'value'
    			},
			    series: [{
			    	name: '去年',
		        type: 'bar',
            data: this.gasData.lastYear,
        	}, {
        		name: '今年',
		        type: 'line',
            data: this.gasData.thisYear,
			    }]
				});
	 		},
	 	}
	}
</script>

<style scoped>
	@import "./assets/css/index.css";
	.main-top {background-image: url(./assets/images/top_bg.png);}
</style>