<!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="w3-row-padding w3-stretch">
  <q-field label="年月" label-width="4" class="search-field w3-col l2 m6 s12 flex-space"  >
    <date-picker v-model="search.year_month" type="month" placeholder="請選年月份" :clearable="false" value-type="format" format="YYYY-MM"></date-picker>
  </q-field>
  <q-field label="項目" label-width="4" class="search-field w3-col l3 m6 s12 flex-space" >
    <q-select v-model="search.item" align="left" :options="itemOptions" class="q-pl-sm"></q-select>
  </q-field>
  <q-btn glossy label="查詢" @click="searchData()" color="primary" size="1.2em" class="id-btn" ></q-btn>
</div>

<div class="w3-section" style="height: 900px;">
  <echart :options="chartOptions" class="w3-card w3-white" autoresize style="width: 100%; height: 100%;" id="my-pie"></echart>
</div>

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

</html>