<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
<!--          <a-col :span="8">-->
<!--            <a-form-item label="请选择时间">-->
<!--              <a-range-picker @change="onChange" :showTime=true dateFormat="YYYY-MM-DD HH:mm:ss" />-->
<!--            </a-form-item>-->
<!--          </a-col>-->
<!--          <a-col :span="3">-->
<!--              <a-button style="margin-left: 8px" @click="onChange" type="primary" icon="plus">获取所有时间</a-button>-->
<!--          </a-col>-->
          <a-col :xl="6" :lg="7" :md="8" :sm="24" :span="12">
            <a-form-item label="测量时间">
              <a-select v-model="time" show-search placeholder="请选择测量时间">
                <a-select-option v-for="(item, index) in timeList" :key="index" :value="item">
                  {{ item }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<!--              <a-button type="primary" @click="searchQuery">查询</a-button>-->
<!--              <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>-->
              <a-button style="margin-left: 8px" @click="textNumber" type="primary" icon="plus">画图</a-button>
              </span>
          </a-col>
          <a-col :span="12">
            <div>
              <div id="myChart" :style="{height: '550px'}" style="display: inline-block;width: 100%;margin-bottom:24px;"></div>
            </div>
          </a-col>
          <a-col :span="12">
            <div>
              <div id="myChart1" :style="{height: '550px'}" style="display: inline-block;width: 100%;margin-bottom:24px;"></div>
            </div>
          </a-col>
          <a-col :span="12">
            <div>
              <div id="myChart2" :style="{height: '550px'}" style="display: inline-block;width: 100%;margin-bottom:24px;"></div>
            </div>
          </a-col>
          <a-col :span="12">
            <div>
              <div id="myChart3" :style="{height: '550px'}" style="display: inline-block;width: 100%;margin-bottom:24px;"></div>
            </div>
          </a-col>
          <a-col :span="12">
            <div>
              <div id="myChart4" :style="{height: '550px'}" style="display: inline-block;width: 100%;margin-bottom:24px;"></div>
            </div>
          </a-col>
          <a-col :span="12">
            <div>
              <div id="myChart5" :style="{height: '550px'}" style="display: inline-block;width: 100%;margin-bottom:24px;"></div>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
<!--    <div class="table-operator">-->
<!--      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>-->
<!--      <a-button type="primary" icon="download" @click="handleExportXls('模拟量信息管理表')">导出</a-button>-->
<!--      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">-->
<!--        <a-button type="primary" icon="import">导入</a-button>-->
<!--      </a-upload>-->
<!--      <a-dropdown v-if="selectedRowKeys.length > 0">-->
<!--        <a-menu slot="overlay">-->
<!--          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>-->
<!--        </a-menu>-->
<!--        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>-->
<!--      </a-dropdown>-->
<!--    </div>-->
  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { getAction } from '@api/manage'

  export default {
    name: 'BuVibrationData',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
    },
    data () {
      return {
        url: {
          list: "/module/buMnl/list",
          delete: "/module/buMnl/delete",
          deleteBatch: "/module/buMnl/deleteBatch",
          exportXlsUrl: "/module/buMnl/exportXls",
          importExcelUrl: "module/buMnl/importExcel",
          collectTimeList: "/sensor/Vib110sjDto/collectTimeList",
          getTextNumber1: "/bigScreen/getTextNumber1",
          getTextNumber2: "/bigScreen/getTextNumber2",
          getTextNumber3: "/bigScreen/getTextNumber3",
          getTextNumber4: "/bigScreen/getTextNumber4",
          getTextNumber5: "/bigScreen/getTextNumber5",
          getTextNumber6: "/bigScreen/getTextNumber6",

        },
        dictOptions: {},
        timeList: [],
        time: '',

      }
    },
    created() {
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      initDictConfig(){
      },
      loadData(){
        this.onChange();
      },
      onChange() {
        this.$http.get(this.url.collectTimeList, { params: {} }).then(res => {
          if (res.result === null ){
            this.$message.error("数据库中没有振动数据")
            return
          }
          if (res.result[0].length === 0 ){
            this.$message.error("没有符合当前条件的数据，请重新选择")
            return
          }
          this.timeList = res.result;
        })
      },
      textNumber(){
        this.$http.get(this.url.getTextNumber1,{params:{time: this.time}}).then((res) => {
          this.initChart("myChart",res.result,'X时域数据');
        })
        this.$http.get(this.url.getTextNumber2,{params:{time: this.time}}).then((res) => {
          this.initChart("myChart1",res.result,'X频域数据');
        })
        this.$http.get(this.url.getTextNumber3,{params:{time: this.time}}).then((res) => {
          this.initChart("myChart2",res.result,'Y时域数据');
        })
        this.$http.get(this.url.getTextNumber4,{params:{time: this.time}}).then((res) => {
          this.initChart("myChart3",res.result,'Y频域数据');
        })
        this.$http.get(this.url.getTextNumber5,{params:{time: this.time}}).then((res) => {
          this.initChart("myChart4",res.result,'Z时域数据');
        })
        this.$http.get(this.url.getTextNumber6,{params:{time: this.time}}).then((res) => {
          this.initChart("myChart5",res.result,'Z频域数据');
        })
      },
      initChart(id,data,title){
        let myChart = this.$echarts.getInstanceByDom(document.getElementById(id));
        if (!myChart) {
          myChart = this.$echarts.init(document.getElementById(id));
        }
        let xData = [];
        let yData = [];
        if(data){
          for(var i=0;i<data["x"].length;i++){
            xData.push(data["x"][i]);
            yData.push(data["y"][i]);
          }
        }
        // console.log(xData);
        const myOption = {
          title:{
            left:'center',
            text:title
          },
          tooltip: {
            trigger: 'axis',
          },
          xAxis: {
            type: 'category',
            data: xData
          },
          yAxis: {
            type: 'value',
          },
          dataZoom: [
            {
              type: 'inside',
              start: 0,
              end: 100
            },
            {
              start: 0,
              end: 100
            }
          ],
          series: [{
            data: yData,
            type: 'line',
          }]
        };
        myChart.setOption(myOption,true)
      },

    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>