<!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">
			<div class="row">
				<div class="bg-white q-ma-sm" >
					<div class="search-block">
						<div class="search-block-label">
							<label class="text-center" style="width: 140px;">機台名稱</label>
						</div>
						<q-select v-model="device" hide-underline align="center" :options="device_select_option" style="min-width: 200px;" class="col search-block-input" @input="clear_legend_list()"></q-select>
					</div>
					<div style="height: 245px;">
						<echart ref="trend" class="bg-white fit" :options="chart_gauge" autoresize></echart>
					</div>
					<!-- <div class="row justify-center items-center flex-1 pointer-events-none">
						<q-btn class="" label="異常中" color="negative" size="20px" rounded></q-btn>
					</div> -->
				</div>
				<div class="row items-center col bg-white q-ma-sm" style="display: flex; justify-content: flex-start;">
					<div class="column q-px-sm" style="max-height: 300px;margin: 10px 0;">
						<div v-for="(item,inx) in device_item_list" :class="item_class_ctrl.includes(item.value)?'active':''" class="row items-center justify-between q-mx-sm device_item" @click="add_chart_item($event,item)">
							<div class="row items-center">
								<span>{{item.icon}}</span>
								<span>{{item.label}}</span>
							</div>
							<div class="row items-center">
								<div class="row justify-center text-right w3-round-xxlarge q-mx-sm" >
									<!-- 上限變色判斷 -->
									<span v-if="SoftTagName[`Alarm_Max_${item.value}`]?SoftTagName[`Alarm_Max_${item.value}`].value:false" class="text-negative q-px-sm">{{SoftTagName[item.value]?SoftTagName[item.value].value:0}}</span>
									<!-- 下限變色判斷 -->
									<span v-else-if="SoftTagName[`Alarm_Min_${item.value}`]?SoftTagName[`Alarm_Min_${item.value}`].value:false" class="text-negative q-px-sm">{{SoftTagName[item.value]?SoftTagName[item.value].value:0}}</span>
									<!-- 正常顯示 -->
									<span v-else class="text-blue-4 q-px-sm">{{SoftTagName[item.value]?SoftTagName[item.value].value:0}}</span>
									<!-- <span class="text-blue-4 q-px-sm">{{SoftTagName[item.value]?SoftTagName[item.value].value:0}}</span> -->
								</div>
								<span class="q-px-sm text-grey-7" align="right" style="width: 78px; padding: 0 8px 0 0;">{{item.unit}}</span>
							</div>
						</div>

					</div>
				</div>
			</div>
			<div style="height:530px" class="q-pa-sm">
				<echart ref="trend" class="bg-white fit q-py-sm" :options="chart_line" 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>