<!DOCTYPE html>
<html>
	<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>渠道月度进销存趋势</title>
	</head>

	<body>
		<script type="text/javascript">
			var pageVue = null;
			function loadJsCss(callback) {
				var jscss_urls = [
					{id: "js6", type: "js", url: "root/js/echarts.js"},
					{id: "js7", type: "js", url: "root/js/calendar.js"},
					{id: "js8", type: "js", url: "root/js/China.js"},
				];
				window.top.initJsCss(document, jscss_urls, callback);
			}
		
			function initVue() {
				new BasicsVue({
					el: "#hbody",
					data: {
						dataRequest: [],
						dataRequestObj: {},

						dataCharts: {
							overall: [
								["month", "入库", "出库", "库存", "库存周转率"],
								["Jan", 200, 300, 320, 0.1],
								["Feb", 330, 450, 453, 0.2],
								["Mar", 130, 220, 230, 0.3],
								["Apri", 220, 110, 120, 0.4],
								["May", 780, 220, 280, 0.5],
								["Jun", 304, 505, 880, 0.7],
								["Jul", 402, 302, 708, 0.8],
								["Aug", 503, 303, 880, 0.9],
								["Sep", 405, 304, 730, 0.6],
								["Oct", 504, 403, 750, 1],
								["Nov", 0, 0, 0, 0],
								["Dec", 0, 0, 0, 0],
							],
							storage: [
								["month", "PFO", "ASD", "PaA", "VSD", "PDA", "输送系统", "网篮导丝", "导丝"],
								["Jan", 200, 300, 320, 503, 303, 880,504, 403, 750,],
								["Feb", 330, 450, 453, 130, 220, 230,304, 505, 880,],
								["Mar", 130, 220, 230, 405, 304, 730,230, 405, 304,],
								["Apri", 220, 110, 120, 780, 220, 280,504, 403, 750,],
								["May", 780, 220, 280, 200, 300, 320,302, 708, 503,],
								["Jun", 304, 505, 880, 330, 450, 453,405, 304, 730,],
								["Jul", 402, 302, 708, 503, 303, 880,303, 880, 453,],
								["Aug", 503, 303, 880, 453, 130, 220, 730,230, 405,],
								["Sep", 405, 304, 730, 504, 403, 750,303, 880, 453,],
								["Oct",  ],
								["Nov", ],
								["Dec", ],
							],
						},
						//Year
						options_year: [
							{
								value: '2021',
								label: '2021'
							}, 
							{
								value: '2022',
								label: '2022'
							}, 
							{
								value: '2023',
								label: '2023'
							},
						],
						value_year: '',
						//Season
						options_season: [
							{
								value: 'Q1',
								label: 'Q1'
							}, 
							{
								value: 'Q2',
								label: 'Q2'
							}, 
							{
								value: 'Q3',
								label: 'Q3'
							}, 
							{
								value: 'Q4',
								label: 'Q4'
							}, 
						],
						value_season: '',
						//Month
						options_month: [
							{
								value: '1',
								label: 'Jan'
							}, 
							{
								value: '2',
								label: 'Feb'
							}, 
							{
								value: '3',
								label: 'Mar'
							},
							{
								value: '4',
								label: 'Apr'
							},
							{
								value: '5',
								label: 'May'
							}, 
							{
								value: '6',
								label: 'June'
							}, 
							{
								value: '7',
								label: 'July'
							},
							{
								value: '8',
								label: 'Aug'
							},
							{
								value: '9',
								label: 'Sept'
							}, 
							{
								value: '10',
								label: 'Oct'
							}, 
							{
								value: '11',
								label: 'Nov'
							},
							{
								value: '12',
								label: 'Dec'
							},
						],
						value_month: '',
						//Area
						options_area: [
							{
								value: 'East',
								label: '东区'
							},
							{
								value: 'West',
								label: '西区'
							},
							{
								value: 'South',
								label: '南区'
							},
							{
								value: 'North',
								label: '北区'
							},
							{
								value: 'Middle',
								label: '中区'
							},
						],
						value_area: '',
						//Province
						options_province: [
							
						],
						value_province: '',
					},

					created() {
						var me = this;

					},
				
					mounted() {
						var me = this;
						//预加载数据
						if (this.dataRequest && this.dataRequest.length) {
						    var result = {};
						    this.loadRequestData(this.dataRequest, result, function(data) {
						        me.dataRequestObj = data;
								
						    });
						}

						me.$nextTick(() => {
							hideLoading();
							let clientHeight = document.documentElement.clientHeight;
							me.initData();
						})
					},

					methods: {
						initData() {
							var me = this;

							me.chart7();
							me.chart71();
						},

						filter() {
							var me = this;
							console.log("filter year", me.value_year);
							console.log("filter season", me.value_season);
							console.log("filter month", me.value_month);
							console.log("filter area", me.value_area);
							console.log("filter province", me.value_province);
						},

						//全国合计
						chart7() {
							var d7 = document.getElementById("ct7");
							var c7 = echarts.init(d7);
							var o7 = {
								title: {
									text: "全国合计",
									left: "center",
								},
								tooltip: {
									trigger: "axis",
									axisPointer: {
										type: "cross",
										crossStyle: {
											color: "#999",
										},
									},
								},
								dataset: {
									source: this.dataCharts.overall,
								},
								legend: {
									bottom: "bottom",
								},
								xAxis: [
									{
										type: "category",
										axisPointer: {
											type: "shadow",
										},
									},
								],
								yAxis: [
									{
										type: "value",
										// interval: 50,
										axisLabel: {
											formatter: "{value}",
										},
									},
									{
										type: "value",
										// interval: 5,
										axisLabel: {
											formatter: "{value}",
										},
									},
								],
								series: [
									{
										name: "入库",
										type: "bar",
										tooltip: {
											valueFormatter: function (value) {
												return value;
											},
										},
									},
									{
										name: "出货",
										type: "bar",
										tooltip: {
											valueFormatter: function (value) {
												return value;
											},
										},
									},
									{
										name: "库存",
										type: "bar",
										tooltip: {
											valueFormatter: function (value) {
												return value;
											},
										},
									},
									{
										name: "库存周转率",
										type: "line",
										yAxisIndex: 1,
										itemStyle: { normal: { label: { show: true } } },
										tooltip: {
											valueFormatter: function (value) {
												return value;
											},
										},
									},
								],
							};
							c7.setOption(o7);
						},

						//产品库存
						chart71() {
							var d71 = document.getElementById("ct7-1");
							var c71 = echarts.init(d71);
							var o71 = {
								title: {
									text: "产品库存",
									left: "center",
								},
								tooltip: {
									trigger: "axis",
									axisPointer: {
										// Use axis to trigger tooltip
										type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
									},
								},
								// grid: {
								// 	containLabel: true,
								// },
								dataset: {
									source: this.dataCharts.storage,
								},
								legend: {
									bottom: "bottom",
								},
								yAxis: {
									type: "value",
								},
								xAxis: {
									type: "category",
								},
								series: [
									{
										type: "bar",
										stack: "total",
										label: {
											show: true,
										},
										emphasis: {
											focus: "series",
										},
									},
									{
										type: "bar",
										stack: "total",
										label: {
											show: true,
										},
										emphasis: {
											focus: "series",
										},
									},
									{
										type: "bar",
										stack: "total",
										label: {
											show: true,
										},
										emphasis: {
											focus: "series",
										},
									},
									{
										type: "bar",
										stack: "total",
										label: {
											show: true,
										},
										emphasis: {
											focus: "series",
										},
									},
									{
										type: "bar",
										stack: "total",
										label: {
											show: true,
										},
										emphasis: {
											focus: "series",
										},
									},
									{
										type: "bar",
										stack: "total",
										label: {
											show: true,
										},
										emphasis: {
											focus: "series",
										},
									},
									{
										type: "bar",
										stack: "total",
										label: {
											show: true,
										},
										emphasis: {
											focus: "series",
										},
									},
									{
										type: "bar",
										stack: "total",
										label: {
											show: true,
										},
										emphasis: {
											focus: "series",
										},
									},
								],
							};
							c71.setOption(o71);
						},
					},
				});
			};

			loadJsCss(function() {
				initVue();
			});
		</script>

		<style>
			[v-cloak] {
				display: none !important;
			}

			.v_main {
				background:linear-gradient(rgba(246, 247, 248, 0.878), rgba(170, 207, 243, 0.785));
				background-size: contain;
				background-position: bottom left; 
			}

			.selectors {
				display: flex;
				align-items: center;
     			justify-content: space-around;
			}
			.selectors el-select {
				flex: 1;
			}

			.charts {
				width: 99%; 
				height: 85%;
				display: flex;
				/* 只要您把这个属性去掉,就不会自动换行了 */
				flex-wrap: wrap;
				justify-content: space-around;
				/* padding-bottom: 10%; */
			}

			.chart { 
				width: 49%;
				height: 95%;
				margin-top: 1%;
			}
		</style>

		<div v-cloak id="hbody" class="h_body" style="margin: 0;padding: 0;">
			<div id="page_root" ref="ref_main" class="v_main" style="padding: 0px 0px 0px 10px">
				<div style="width: 100%; height: 100%; overflow-y: hidden;">
					<div>
						<h3 style="font-weight: 600;color: #045c24;text-align: center;">渠道月度进销存趋势</h3>
					</div>

					<div class="selectors">
						<el-select 
							placeholder="Year"
							v-model="value_year" 
							clearable 
							@change="filter"
							>
							<el-option
								v-for="item in options_year"
								:key="item.value"
								:label="item.label"
								:value="item.value"
								>
							</el-option>
						</el-select>
						<el-select 
							placeholder="Quarter"
							v-model="value_season" 
							clearable 
							@change="filter"
							>
							<el-option
								v-for="item in options_season"
								:key="item.value"
								:label="item.label"
								:value="item.value"
								>
							</el-option>
						</el-select>
						<el-select 
							placeholder="Month"
							v-model="value_month" 
							clearable 
							@change="filter"
							>
							<el-option
								v-for="item in options_month"
								:key="item.value"
								:label="item.label"
								:value="item.value"
								>
							</el-option>
						</el-select>
						<el-select 
							placeholder="Area"
							v-model="value_area" 
							clearable 
							@change="filter"
							>
							<el-option
								v-for="item in options_area"
								:key="item.value"
								:label="item.label"
								:value="item.value"
								>
							</el-option>
						</el-select>
						<el-select 
							placeholder="Province"
							v-model="value_province" 
							clearable 
							@change="filter"
							>
							<el-option
								v-for="item in options_province"
								:key="item.value"
								:label="item.label"
								:value="item.value"
								>
							</el-option>
						</el-select>
					</div>

					<div class="charts">
						<div class="chart">
							<div id = "ct7" style = "width: 100%; height: 100%;" ></div>
						</div>

						<div class="chart">
							<div id = "ct7-1" style = "width: 100%; height: 100%;" ></div>
						</div>
					</div>
				</div>
			</div>
			
			<div id="page_loading" style="position: absolute; top:0px; width: 100vw; height: 50vh;">
			    <div class="spinner">
			      <div class="cube1"></div>
			      <div class="cube2"></div>
			    </div>
			</div>
		</div>
	</body>
</html>