<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="6">
            <a-form-item label="设备名称">
              <j-select-device placeholder="请选择设备名称" :multiple="false" v-model="queryParam.deviceId"
                               @change="deviceChange"/>
<!--              <j-search-select-tag placeholder="请选择设备名称" v-model="queryParam.deviceId" dict="bu_device,device_name,id" @change="deviceChange"/>-->
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="传感器">
              <a-select placeholder="请选择测量位置" v-model="queryParam.sensorId"
                        @change="numberChange" :filter-option="filterOption">
                <a-select-option v-for="d in sensorDicDatas" :key="d.dataValue" :value="d.dataValue" >
                  {{d.dataValue}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="请选择时间">
            <j-date @change="onChange" v-model="queryParam.beginTime" :showTime=true dateFormat="YYYY-MM-DD" style="width: 290px"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="测量项目">
              <a-select v-model="queryParam.vtIndex" placeholder="请选择测量项目">
                <a-select-option value="VelEU">速度</a-select-option>
                <a-select-option value="AccEU">加速度</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="2" >
            <a-button type="primary" @click="getLatestTime" style="margin-left: 8px">更新时间</a-button>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="测量时间">
              <a-select v-model="measureTime" 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 :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="getDeviceList">查询</a-button>
<!--              <a-button type="primary" @click="getLatestTime" icon="update" style="margin-left: 8px">更新时间</a-button>-->
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div>
      <div id="myChart1" :style="{height: '480px'}" style="display: inline-block;width: 100%;margin-bottom:24px;"></div>
      <div id="myChart2" :style="{height: '480px'}" style="display: inline-block;width: 100%;margin-bottom:24px;"></div>
      <div id="myChart3" :style="{height: '480px'}" style="display: inline-block;width: 100%;margin-bottom:24px;"></div>
    </div>
  </a-card>
</template>
<script>
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import JSelectDevice from '@comp/jeecgbiz/JSelectDevice'
  import { getAction } from '@/api/manage'
  import ACol from 'ant-design-vue/es/grid/Col'
    export default {
      name: 'TestChart',
      mixins: [JeecgListMixin],
      components: {
        ACol,
        JSelectDevice
      },
      created() {
        // this.getLatestTime();
      },
      // mounted() {
        // this.getDeviceList();
      // },
      data() {
        return {
          url: {
            list:"111",
            list120: "/sensor/Vib110sjDto/list120",
            timelist:"/sensor/Vib110sjDto/timelist",
            delete: "/sensor/buSensor/delete",
            deleteBatch: "/sensor/buSensor/deleteBatch",
            exportXlsUrl: "/sensor/buSensor/exportXls",
            importExcelUrl: "sensor/buSensor/importExcel",
            sensor: "/sensor/buSensor/getSensorIp",
            getTableName: "/sensor/buSensor/getTableName",
          },
          timeList:[],
          deviceListZ: [],
          deviceListY: [],
          deviceListX: [],
          measureTime: [],
          actionName:'',
          columns:[],
          beginTime:'',
          endTime:'',
          createValue: [],
          sensorDicDatas:[],
          checkItem: '',
          deviceName: '',
          tableName: '',
        }
      },
      methods: {
        loadData(){
        },
        handleChange(){

        },
        onChange(data,dataString){
          // console.log(data);
          this.beginTime = data + " 00:00:00";
          this.endTime = data + " 23:59:59";
          this.measureTime='';
        },
        getLatestTime(){
          this.$http.get(this.url.timelist, { params: {tableName:this.tableName, beginTime: this.beginTime,
              endTime: this.endTime, vtIndex: this.queryParam.vtIndex} }).then(res => {
            if (res.result === null ){
              this.$message.error("请选择查询条件")
              return
            }
            if (res.result[0].length === 0 ){
              this.$message.error("没有符合当前条件的数据，请重新选择")
              return
            }
            this.timeList=res.result[0];
          })
          this.measureTime='';
        },
        getDeviceList() {
          if (this.measureTime.length === 0){
            this.$message.error("请选择测量时间，再进行查询")
            return
          }
          this.selectData()
        },
        selectData1(){
          return  new Promise((resolve) => {
            this.$http.get(this.url.list120, {
              params: {
                measureTime: this.measureTime,
                node_id: this.nodeOne,
                vtIndex: this.queryParam.vtIndex
              }
            })
              .then(res => {
                this.deviceListZ = res.result
                this.initChart("myChart1", this.deviceListZ, '垂直向测量数据');
                resolve()
              })
          })
        },
        selectData2(){
          return  new Promise((resolve) => {
            this.$http.get(this.url.list120, {
              params: {
                measureTime: this.measureTime,
                node_id: this.nodeSecond,
                vtIndex: this.queryParam.vtIndex
              }
            })
              .then(res => {
                this.deviceListY = res.result
                this.initChart("myChart2", this.deviceListY, '径向测量数据');
                resolve()
              })
          })
        },
        selectData3(){
          return  new Promise((resolve) => {
            this.$http.get(this.url.list120, {
              params: {
                measureTime: this.measureTime,
                node_id: this.nodeThree,
                vtIndex: this.queryParam.vtIndex
              }
            })
              .then(res => {
                this.deviceListX = res.result
                this.initChart("myChart3", this.deviceListX, '轴向测量数据');
                resolve()
              })
          })
        },
        selectData(){
          this.selectData1()
            .then(() => this.selectData2().then(() => this.selectData3()));
        },


        initChart(id,deviceList,title){
          let myChart = this.$echarts.getInstanceByDom(document.getElementById(id));
          if (!myChart) {
            myChart = this.$echarts.init(document.getElementById(id));
          }
          let xData1=new Array();
          if(deviceList){
            for(var i=0;i<deviceList["yjsdpy"].length;i++){
                xData1[i]=new Array();
                xData1[i][0]=parseFloat(deviceList["xjsdpy"][i]);
                xData1[i][1]=parseFloat(deviceList["yjsdpy"][i]);
            }
          }
          // let yData1=new Array();
          // if(deviceList){
          //   for(var i=0;i<deviceList["yjsdpy"].length;i++){
          //     xData1[i]=deviceList["xjsdpy"][i];
          //     yData1[i]=deviceList["yjsdpy"][i];
          //   }
          // }
          let length = deviceList["xjsdpy"].length;
          // console.log(xData1);
          const myOptions = {
            title:{
              left:'center',
              text:title
            },
            tooltip: {
              trigger: 'axis',
              formatter: function (params) {
                // console.log(params);
                var relVal = params[0].value[0]+" HZ";
                for (var i = 0, l = params.length; i < l; i++) {
                  relVal += '<br/>' + params[i].value[1] + ' m/s'
                }
                return relVal;
              }
            },
            xAxis: {
              min:0,
              max:length,
              interval:401,
              type: 'value',
              gridIndex: 0,
              name: 'Hz'
            },
            yAxis: {
              type: 'value',
              name: 'mm/s',
            },
            series: [{
              data: xData1,
              type: 'line',
              smooth: true,
              symbol: "none"
            }]
          };
          myChart.setOption(myOptions)
        },

        deviceChange: function (value){
          this.deviceName = value;
          this.getSensorDatas(value);
          this.measureTime='';
        },
        getSensorDatas(deviceId){
          this.$http.get(this.url.sensor,{params:{deviceId:deviceId}})
            .then(res => {
              this.sensorDicDatas = res.result
            })
        },
        numberChange: function (value) {
          this.checkItem = value;
          let param = {deviceId: this.deviceName, checkItem: value}
          getAction(this.url.getTableName, param, 'get').then((res) => {
            this.nodeOne = res[0];
            this.nodeSecond = res[1];
            this.nodeThree = res[2];
            this.tableName = "vib_"+res[0]+"sy_dto,"+"vib_"+res[1]+"sy_dto,"+"vib_"+res[2]+"sy_dto";
          })
          this.measureTime='';
        },
        filterOption(input, option) {
          console.log(option);
          return (
            option.data.attrs.tag.toLowerCase().indexOf(input.toLowerCase()) >= 0
          );
        },





      }
    }
</script>

<style scoped>

</style>