<template>
	<el-container>
		<el-header>
			<div class="right-panel">
				<!-- <el-select v-model="mgroupId" 
				placeholder="请选择工段" 
				@change="mgroupChange">
					<el-option
						v-for="item in options"
						:key="item.id"
						:label="item.name"
						:value="item.id"
					>
					</el-option>
				</el-select> -->
				<el-date-picker
					v-model="searchDate"
					type="month"
					placeholder="查询日期"
					value-format="YYYY-MM"
					style="width: 160px"
				>
				</el-date-picker>
				<el-button
					type="primary"
					icon="el-icon-search"
					@click="handleQuery"
				></el-button>
			</div>
		</el-header>
		<el-main id="elMain">
			<!-- 0 -->
			<el-card shadow="never" style="margin-bottom: 8px">
				<el-row :gutter="10">
					<el-col :lg="12">
						<el-card shadow="never">
							<div id="linechart0"></div>
						</el-card>
					</el-col>
					<el-col :lg="12">
						<el-card shadow="never" style="position: relative">
						<el-button
							@click="handleExport(0)"
							class="tables"
							type="primary"
							>导出</el-button
						>
						<el-table :data="tableData0" id="exportDiv0" :height="300">
							<el-table-column type="index" width="50" />
							<el-table-column label="任务编号" prop="number" min-width="100px">
							</el-table-column>
							<el-table-column label="计划数" prop="count">
							</el-table-column>
							<el-table-column label="完成数" prop="count_ok">
							</el-table-column>
							<el-table-column label="完成率" prop="rate">
							</el-table-column>
						</el-table>
					</el-card>
					</el-col>
				</el-row>
			</el-card>
			<!-- 1 -->
			<el-card shadow="never" style="margin-bottom: 8px">
				<el-row :gutter="10">
					<el-col :lg="12">
						<el-card shadow="never">
							<div id="linechart1"></div>
						</el-card>
					</el-col>
					<el-col :lg="12">
						<el-card shadow="never" style="position: relative">
							<el-button
								@click="handleExport(1)"
								class="tables"
								type="primary"
								>导出</el-button
							>
							<el-table
								:data="tableData1"
								id="exportDiv1"
								:height="300"
							>
								<el-table-column type="index" width="50" />
								<el-table-column label="任务编号" prop="number" min-width="100px">
								</el-table-column>
								<el-table-column label="计划数" prop="count">
								</el-table-column>
								<el-table-column label="完成数" prop="count_ok">
								</el-table-column>
								<el-table-column label="完成率" prop="rate">
								</el-table-column>
							</el-table>
						</el-card>
					</el-col>
				</el-row>
			</el-card>
			<!-- 2 -->
			<el-card shadow="never" style="margin-bottom: 8px">
				<el-row :gutter="10">
					<el-col :lg="12">
						<el-card shadow="never">
							<div id="linechart2"></div>
						</el-card>
					</el-col>
					<el-col :lg="12">
						<el-card shadow="never" style="position: relative">
							<el-button
								@click="handleExport(2)"
								class="tables"
								type="primary"
								>导出</el-button
							>
							<el-table :data="tableData2" id="exportDiv2" :height="300">
								<el-table-column type="index" width="50" />
								<el-table-column label="任务编号" prop="number" min-width="100px">
								</el-table-column>
								<el-table-column label="计划数" prop="count">
								</el-table-column>
								<el-table-column label="完成数" prop="count_ok">
								</el-table-column>
								<el-table-column label="完成率" prop="rate">
								</el-table-column>
							</el-table>
						</el-card>
					</el-col>
				</el-row>
			</el-card>
			<!-- 3 -->
			<el-card shadow="never" style="margin-bottom: 8px">
				<el-row :gutter="10">
					<el-col :lg="12">
						<el-card shadow="never">
							<div id="linechart3"></div>
						</el-card>
					</el-col>
					<el-col :lg="12">
						<el-card shadow="never" style="position: relative">
							<el-button
								@click="handleExport(3)"
								class="tables"
								type="primary"
								>导出</el-button
							>
							<el-table :data="tableData3" id="exportDiv3" :height="300">
								<el-table-column type="index" width="50" />
								<el-table-column label="任务编号" prop="number" min-width="100px">
								</el-table-column>
								<el-table-column label="计划数" prop="count">
								</el-table-column>
								<el-table-column label="完成数" prop="count_ok">
								</el-table-column>
								<el-table-column label="完成率" prop="rate">
								</el-table-column>
							</el-table>
						</el-card>
					</el-col>
				</el-row>
			</el-card>
			<!-- 4 -->
			<el-card shadow="never" style="margin-bottom: 8px">
				<el-row :gutter="10">
					<el-col :lg="12">
						<el-card shadow="never">
							<div id="linechart4"></div>
						</el-card>
					</el-col>
					<el-col :lg="12">
						<el-card shadow="never" style="position: relative">
							<el-button
								@click="handleExport(4)"
								class="tables"
								type="primary"
								>导出</el-button
							>
							<el-table :data="tableData4" id="exportDiv4" :height="300">
								<el-table-column type="index" width="50" />
								<el-table-column label="任务编号" prop="number" min-width="100px">
								</el-table-column>
								<el-table-column label="计划数" prop="count">
								</el-table-column>
								<el-table-column label="完成数" prop="count_ok">
								</el-table-column>
								<el-table-column label="完成率" prop="rate">
								</el-table-column>
							</el-table>
						</el-card>
					</el-col>
				</el-row>
			</el-card>
			<!-- 5 -->
			<el-card shadow="never" style="margin-bottom: 8px">
				<el-row :gutter="10">
					<el-col :lg="12">
						<el-card shadow="never">
							<div id="linechart5"></div>
						</el-card>
					</el-col>
					<el-col :lg="12">
						<el-card shadow="never" style="position: relative">
							<el-button
								@click="handleExport(5)"
								class="tables"
								type="primary"
								>导出</el-button
							>
							<el-table :data="tableData5" id="exportDiv5" :height="300">
								<el-table-column type="index" width="50" />
								<el-table-column label="任务编号" prop="number" min-width="100px">
								</el-table-column>
								<el-table-column label="计划数" prop="count">
								</el-table-column>
								<el-table-column label="完成数" prop="count_ok">
								</el-table-column>
								<el-table-column label="完成率" prop="rate">
								</el-table-column>
							</el-table>
						</el-card>
					</el-col>
				</el-row>
			</el-card>
			<!-- 6 -->
			<el-card shadow="never" style="margin-bottom: 8px">
				<el-row :gutter="10">
					<el-col :lg="12">
						<el-card shadow="never">
							<div id="linechart6"></div>
						</el-card>
					</el-col>
					<el-col :lg="12">
						<el-card shadow="never" style="position: relative">
							<el-button
								@click="handleExport(6)"
								class="tables"
								type="primary"
								>导出</el-button
							>
							<el-table :data="tableData6" id="exportDiv6" :height="300">
								<el-table-column type="index" width="50" />
								<el-table-column label="任务编号" prop="number" min-width="100px">
								</el-table-column>
								<el-table-column label="计划数" prop="count">
								</el-table-column>
								<el-table-column label="完成数" prop="count_ok">
								</el-table-column>
								<el-table-column label="完成率" prop="rate">
								</el-table-column>
							</el-table>
						</el-card>
					</el-col>
				</el-row>
			</el-card>
			<!-- 7 -->
			<el-card shadow="never" style="margin-bottom: 8px">
				<el-row :gutter="10">
					<el-col :lg="12">
						<el-card shadow="never">
							<div id="linechart7"></div>
						</el-card>
					</el-col>
					<el-col :lg="12">
						<el-card shadow="never" style="position: relative">
							<el-button
								@click="handleExport(7)"
								class="tables"
								type="primary"
								>导出</el-button
							>
							<el-table :data="tableData7" id="exportDiv7" :height="300">
								<el-table-column type="index" width="50" />
								<el-table-column label="任务编号" prop="number" min-width="100px">
								</el-table-column>
								<el-table-column label="计划数" prop="count">
								</el-table-column>
								<el-table-column label="完成数" prop="count_ok">
								</el-table-column>
								<el-table-column label="完成率" prop="rate">
								</el-table-column>
							</el-table>
						</el-card>
					</el-col>
				</el-row>
			</el-card>
			<!-- 8 -->
			<el-card shadow="never" style="margin-bottom: 8px">
				<el-row :gutter="10">
					<el-col :lg="12">
						<el-card shadow="never">
							<div id="linechart8"></div>
						</el-card>
					</el-col>
					<el-col :lg="12">
						<el-card shadow="never" style="position: relative">
							<el-button
								@click="handleExport(8)"
								class="tables"
								type="primary"
								>导出</el-button
							>
							<el-table :data="tableData8" id="exportDiv8" :height="300">
								<el-table-column type="index" width="50" />
								<el-table-column label="任务编号" prop="number" min-width="100px">
								</el-table-column>
								<el-table-column label="计划数" prop="count">
								</el-table-column>
								<el-table-column label="完成数" prop="count_ok">
								</el-table-column>
								<el-table-column label="完成率" prop="rate">
								</el-table-column>
							</el-table>
						</el-card>
					</el-col>
				</el-row>
			</el-card>
			<!-- 9 -->
			<el-card shadow="never" style="margin-bottom: 8px">
				<el-row :gutter="10">
					<el-col :lg="12">
						<el-card shadow="never">
							<div id="linechart9"></div>
						</el-card>
					</el-col>
					<el-col :lg="12">
						<el-card shadow="never" style="position: relative">
							<el-button
								@click="handleExport(9)"
								class="tables"
								type="primary"
								>导出</el-button
							>
							<el-table :data="tableData9" id="exportDiv9" :height="300">
								<el-table-column type="index" width="50" />
								<el-table-column label="任务编号" prop="number" min-width="100px">
								</el-table-column>
								<el-table-column label="计划数" prop="count">
								</el-table-column>
								<el-table-column label="完成数" prop="count_ok">
								</el-table-column>
								<el-table-column label="完成率" prop="rate">
								</el-table-column>
							</el-table>
						</el-card>
					</el-col>
				</el-row>
			</el-card>
			<!-- 10 -->
			<el-card shadow="never" style="margin-bottom: 8px">
				<el-row :gutter="10">
					<el-col :lg="12">
						<el-card shadow="never">
							<div id="linechart10"></div>
						</el-card>
					</el-col>
					<el-col :lg="12">
						<el-card shadow="never" style="position: relative">
							<el-button
								@click="handleExport(10)"
								class="tables"
								type="primary"
								>导出</el-button
							>
							<el-table :data="tableData10" id="exportDiv10" :height="300">
								<el-table-column type="index" width="50" />
								<el-table-column label="任务编号" prop="number" min-width="100px">
								</el-table-column>
								<el-table-column label="计划数" prop="count">
								</el-table-column>
								<el-table-column label="完成数" prop="count_ok">
								</el-table-column>
								<el-table-column label="完成率" prop="rate">
								</el-table-column>
							</el-table>
						</el-card>
					</el-col>
				</el-row>
			</el-card>
			<!-- 11 -->
			<el-card shadow="never" style="margin-bottom: 8px">
				<el-row :gutter="10">
					<el-col :lg="12">
						<el-card shadow="never">
							<div id="linechart11"></div>
						</el-card>
					</el-col>
					<el-col :lg="12">
						<el-card shadow="never" style="position: relative">
							<el-button
								@click="handleExport(11)"
								class="tables"
								type="primary"
								>导出</el-button
							>
							<el-table :data="tableData11" id="exportDiv11" :height="300">
								<el-table-column type="index" width="50" />
								<el-table-column label="任务编号" prop="number" min-width="100px">
								</el-table-column>
								<el-table-column label="计划数" prop="count">
								</el-table-column>
								<el-table-column label="完成数" prop="count_ok">
								</el-table-column>
								<el-table-column label="完成率" prop="rate">
								</el-table-column>
							</el-table>
						</el-card>
					</el-col>
				</el-row>
			</el-card>
			<!-- 12 -->
			<el-card shadow="never" style="margin-bottom: 8px">
				<el-row :gutter="10">
					<el-col :lg="12">
						<el-card shadow="never">
							<div id="linechart12"></div>
						</el-card>
					</el-col>
					<el-col :lg="12">
						<el-card shadow="never" style="position: relative">
							<el-button
								@click="handleExport(12)"
								class="tables"
								type="primary"
								>导出</el-button
							>
							<el-table :data="tableData12" id="exportDiv12" :height="300">
								<el-table-column type="index" width="50" />
								<el-table-column label="任务编号" prop="number" min-width="100px">
								</el-table-column>
								<el-table-column label="计划数" prop="count">
								</el-table-column>
								<el-table-column label="完成数" prop="count_ok">
								</el-table-column>
								<el-table-column label="完成率" prop="rate">
								</el-table-column>
							</el-table>
						</el-card>
					</el-col>
				</el-row>
			</el-card>
			<!-- 13 -->
			<el-card shadow="never" style="margin-bottom: 8px">
				<el-row :gutter="10">
					<el-col :lg="12">
						<el-card shadow="never">
							<div id="linechart13"></div>
						</el-card>
					</el-col>
					<el-col :lg="12">
						<el-card shadow="never" style="position: relative">
							<el-button
								@click="handleExport(13)"
								class="tables"
								type="primary"
								>导出</el-button
							>
							<el-table :data="tableData13" id="exportDiv13" :height="300">
								<el-table-column type="index" width="50" />
								<el-table-column label="任务编号" prop="number" min-width="100px">
								</el-table-column>
								<el-table-column label="计划数" prop="count">
								</el-table-column>
								<el-table-column label="完成数" prop="count_ok">
								</el-table-column>
								<el-table-column label="完成率" prop="rate">
								</el-table-column>
							</el-table>
						</el-card>
					</el-col>
				</el-row>
			</el-card>
			<!-- 14 -->
			<el-card shadow="never" style="margin-bottom: 8px">
				<el-row :gutter="10">
					<el-col :lg="12">
						<el-card shadow="never">
							<div id="linechart14"></div>
						</el-card>
					</el-col>
					<el-col :lg="12">
						<el-card shadow="never" style="position: relative">
							<el-button
								@click="handleExport(14)"
								class="tables"
								type="primary"
								>导出</el-button
							>
							<el-table :data="tableData14" id="exportDiv14" :height="300">
								<el-table-column type="index" width="50" />
								<el-table-column label="任务编号" prop="number" min-width="100px">
								</el-table-column>
								<el-table-column label="计划数" prop="count">
								</el-table-column>
								<el-table-column label="完成数" prop="count_ok">
								</el-table-column>
								<el-table-column label="完成率" prop="rate">
								</el-table-column>
							</el-table>
						</el-card>
					</el-col>
				</el-row>
			</el-card>
			<!-- 15 -->
			<el-card shadow="never" style="margin-bottom: 8px">
				<el-row :gutter="10">
					<el-col :lg="12">
						<el-card shadow="never">
							<div id="linechart15"></div>
						</el-card>
					</el-col>
					<el-col :lg="12">
						<el-card shadow="never" style="position: relative">
							<el-button
								@click="handleExport(15)"
								class="tables"
								type="primary"
								>导出</el-button
							>
							<el-table :data="tableData15" id="exportDiv15" :height="300">
								<el-table-column type="index" width="50" />
								<el-table-column label="任务编号" prop="number" min-width="100px">
								</el-table-column>
								<el-table-column label="计划数" prop="count">
								</el-table-column>
								<el-table-column label="完成数" prop="count_ok">
								</el-table-column>
								<el-table-column label="完成率" prop="rate">
								</el-table-column>
							</el-table>
						</el-card>
					</el-col>
				</el-row>
			</el-card>
		</el-main>
	</el-container>
</template>
<script>
import * as echarts from "echarts";
import T from "@/components/scEcharts/echarts-theme-T.js";
echarts.registerTheme("T", T);
import scEcharts from "@/components/scEcharts";
function deepCopy(obj) {
	return JSON.parse(JSON.stringify(obj));
}
const ondDayTime = 86400000;
export default {
	name: "chart",
	components: {
		scEcharts,
	},
	data() {
		return {
			query: {
				querys:[
					[{field:'start_date',compare:'gte',value:''},{field:'mgroup',compare:'',value:''}],
					[{field:'end_date',compare:'lte',value:''},{field:'mgroup',compare:'',value:''}]
				],
				page:0
			},
			mgroupId:'',
			start_date:'',
			end_date:'',
			currentDate: "",
			searchDate:'',
			options:[],
			basicOption: {
				title: {
					text: "",
				},
				tooltip: {
					trigger: "item",
				},
				legend: {
					top: "3",
					right: "3%",
				},
				color: ["rgb(64,158,255)", "rgb(255,165,0)"],
				series: {
					name: "任务进度",
					type: "pie",
					radius: ["40%", "70%"],
					center: ["50%", "55%"],
					itemStyle: {
						borderRadius: 5
					},
					label: {
						show: true,
						position: "outside",
						formatter: "{b} : {c} ({d}%)",
					},
					data: [
						{ value: 0, name: "合格数" },
						{ value: 0, name: "未完成" },
					],
				},
			},
			tableData0: [],
			tableData1: [],
			tableData2: [],
			tableData3: [],
			tableData4: [],
			tableData5: [],
			tableData6: [],
			tableData7: [],
			tableData8: [],
			tableData9: [],
			tableData10: [],
			tableData11: [],
			tableData12: [],
			tableData13: [],
			tableData14: [],
			tableData15: [],
		};
	},
	mounted() {
		let that = this;
		let nowDate = new Date();
		that.getMgroup();
	},
	methods: {
		getWeekDate(dates){
			let that = this;
			dates = new Date(dates);
			let week =dates.getDay(); //当前时间的week数
			let weekFirst = 0, weekLast = 0; 
			if (week == 0) {
				weekFirst = 6;
				weekLast = 0; //周日特殊处理
			} else {
				weekFirst = week - 1;
				weekLast = 7 - week;
			}
			let first = new Date(dates.getTime() - weekFirst * ondDayTime); //本周周一
			let last = new Date(new Date(dates.getTime() + weekLast * ondDayTime)); //本周周日
			let dateArr = [];
			for (let i = 0; i < 7; i++) {
				let itemDate = new Date(first.getTime() + i * ondDayTime);
				let item = itemDate.getDate();
				dateArr.push(item);
			}
			that.weekDateList = dateArr;
			that.query.start_date = that.query.querys[0][0].value = first.toISOString().split('T')[0];
			that.query.end_date = that.query.querys[1][0].value = last.toISOString().split('T')[0];
			that.options.forEach((item,index)=>{
				console.log('item',item);
				setTimeout(()=>{
					that.getData(item.id,item.name,index);
				},500)
				
			})
		},
		getMgroup(){
			let that = this;
			that.options = [];
			that.$API.mtm.mgroup.list.req({ page: 0}).then((res) => {
				// that.options = res.slice(21);
				that.options = res;
				let nowDate = new Date();
				that.getWeekDate(nowDate);
			});
		},
		setChart(name, option = null) {
			// 根据name 渲染数据, option需填写，否则option为模拟数据
			var myChart = echarts.getInstanceByDom(
				document.getElementById(name)
			);
			if (myChart == undefined) {
				myChart = echarts.init(document.getElementById(name), "T");
			}
			if (option == null) {
				option = Object.assign({}, this.basicOption);
			}
			setTimeout(() => {
				try {
					myChart.setOption(option);
				} catch (error) {}
			}, 500);
		},
		getData(mgroup_id,mgroup_name,mgroup_index) {
			let that = this;
			that.tableData1 = [];
			that.query.querys[0][1].value = null;
			that.query.querys[1][1].value = null;
			let option = deepCopy(that.basicOption);
			option.title.text = mgroup_name+"任务进度";
			option.series.data[0].value = 0;
			option.series.data[1].value = 0;
			that.query.querys[0][1].value = mgroup_id;
			that.query.querys[1][1].value = mgroup_id;
			that.$API.pm.mtask.cquery.req(that.query).then((res) => {
				let names = 'tableData'+mgroup_index;
				that[names] = res;
				// console.log('names',names);
				// console.log('that[names]',that[names]);
				let count_jh = 0,count_ok = 0,count_diff = 0;
				if (res.length > 0) {
					res.forEach((item) => {
						count_jh+=item.count;
						count_ok+=item.count_ok;
					});
					count_diff = count_jh - count_ok;
					option.series.data[0].value = count_ok;
					option.series.data[1].value = count_diff>0?count_diff:0;
					let chartId = 'linechart'+mgroup_index;
					that.setChart(chartId, option);
				}else{
					let chartId = 'linechart'+mgroup_index;
					that.setChart(chartId, option);
				}
			});
		},
		handleQuery(){
			let that = this;
			if(this.searchDate!==''&&this.searchDate!==null){
				let dates = this.searchDate.split('-');
				let year = dates[0];
				let month = dates[1];
				let days = new Date(year, month, 0).getDate();
				let start_date = year + "-" + month + "-01";
				let end_date = year + "-" + month + "-"+days;
				that.query.querys[0][0].value = start_date;
				that.query.querys[1][0].value = end_date;
			}else{
				that.query.querys[0][0].value = that.start_date;
				that.query.querys[1][0].value = that.end_date;
			}
			that.options.forEach((item,index)=>{
				setTimeout(()=>{
					that.getData(item.id,item.name,index);
				},500)
			})
		},
		handleExport(val) {
			this.exportLoading = true;
			let id = "#exportDiv" + val;
			let name = val + "车间完成率";
			this.$XLSX(id, name);
			this.exportLoading = false;
		},
	},
};
</script>

<style scoped>
#linechart1,#linechart2,#linechart3,#linechart4,
#linechart5,#linechart6,#linechart7,#linechart8,
#linechart9,#linechart10,#linechart11,#linechart12,
#linechart13,#linechart14,#linechart15,#linechart0{
	width: 100%;
	height: 300px;
}
.tables {
	position: absolute;
	top: 6px;
	left: 4px;
	z-index: 10;
}
</style>
