<!DOCTYPE html>
<html lang="zh-tw">

<head><?php
		include_once "html_head.inc";
		?></head>

<body>
	<div id="q-app" :visible="IsVueReady==true" @mousemove="FnIdleReset">
		<?php
		include_once "html_layout_header.inc";
		?>

		<div class="container column">
			<div class="row">
				<div class="search-block">
					<div class="search-block-label">
						<label class="text-center" style="width: 140px;">完工日期(起)</label>
					</div>
					<date-picker style="width: 200px;" class="col search-block-input" v-model="search.start_at" format="YYYY-MM-DD" type="date" value-type="format"></date-picker>
				</div>
				<div class="search-block">
					<div class="search-block-label">
						<label class="text-center" style="width: 140px;">完工日期(迄)</label>
					</div>
					<date-picker style="width: 200px;" class="col search-block-input" v-model="search.end_at" format="YYYY-MM-DD" type="date" value-type="format"></date-picker>
				</div>
				<div class="row items-center">
					<q-btn color="primary" class="id-btn" style="margin:10px; height: 40px;" glossy label="查詢" @click="searchData()" /></q-btn>
					<q-btn color="light" class="id-btn" style="margin:10px;" glossy label="清除" @click="refresh()" /></q-btn>
					<q-btn color="secondary" class="id-btn" style="margin:10px;" glossy label="匯出" @click="exportData()"></q-btn>
				</div>
			</div>
			<div class="row justify-start">
				<div class="search-block">
					<div class="search-block-label trend-red">
						<label class="text-center" style="min-width:100px">設備1</label>
					</div>
					<q-select style="width: 180px;" class="col search-block-input" v-model="search.machine1" align="center" :options="machineOptions" clearable></q-select>
				</div>
				<div class="search-block">
					<div class="search-block-label trend-orange">
						<label class="text-center" style="min-width:65px">設備2</label>
					</div>
					<q-select style="width: 180px;" class="col search-block-input" v-model="search.machine2" align="center" :options="machineOptions" clearable></q-select>
				</div>
				<div class="search-block">
					<div class="search-block-label trend-green">
						<label class="text-center" style="min-width:65px">設備3</label>
					</div>
					<q-select style="width: 180px;" class="col search-block-input" v-model="search.machine3" align="center" :options="machineOptions" clearable></q-select>
				</div>
				<div class="search-block">
					<div class="search-block-label trend-blue">
						<label class="text-center" style="min-width:65px">設備4</label>
					</div>
					<q-select style="width: 180px;" class="col search-block-input" v-model="search.machine4" align="center" :options="machineOptions" clearable></q-select>
				</div>
				<div class="search-block">
					<div class="search-block-label trend-pink">
						<label class="text-center" style="min-width:65px">設備5</label>
					</div>
					<q-select style="width: 180px;" class="col search-block-input" v-model="search.machine5" align="center" :options="machineOptions" clearable></q-select>
				</div>
			</div>

			<div style="height: 600px; margin: 10px;" class="col w3-margin-top">
				<echart :class="['bg-white', 'shadow-2']" ref="trend" :options="TrendObj.options" :style="{ width: '100%', height: '100%', borderRadius: '2px' }" autoresize></echart>
			</div>
		</div>
	</div>

	<?php
	include_once "html_layout_footer.inc";
	?>
	</div>
	<?php
	include_once "html_loading.inc";
	?>
</body><?php
		$is_report_download = true;
		$is_googlemap = true;
		$is_echarts = true;
		include_once "html_down.inc";
		?>

</html>