<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="VelWave">速度</a-select-option>
                <a-select-option value="AccWave">加速度</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" style='display: none' :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 style="margin-left: 8px" @click="searchReset">重置</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 id="myChart4" :style="{height: '480px'}" style="display: inline-block;width: 100%;margin-bottom:24px;"></div>-->
    </div>
  </a-card>
</template>

<script>
  import ACol from 'ant-design-vue/lib/grid/Col'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { getAction, httpAction } from '../../api/manage'
  import LineSmooth from '../../components/chart/LineSmooth'
  import LineChartMultipleTwo from '@/components/chart/LineChartMultipleTwo'
  import LineChartMultid from '@/components/chart/LineChartMultid'
  import echarts from 'echarts'
  import JSelectDevice from '@comp/jeecgbiz/JSelectDevice'
  import 'echarts-gl'

  export default {
    name: 'TestVoltageCurrent',
    mixins: [JeecgListMixin, mixinDevice],
    components: {
      ACol,
      LineSmooth,
      LineChartMultid,
      LineChartMultipleTwo,
      JSelectDevice,
    },
    data() {
      return {
        description: '振动时域图页面',
        style:{},
        // 表头
        columns: [
        ],
        url: {
          list: "/sensor/buSensorDeviceData/list",
          selectList: "/sensor/buSensorDeviceData/selectList",
          getCountUData: "/sensor/buSensorDeviceData/getCountUData",
          getCountIData: "/sensor/buSensorDeviceData/getCountIData",
          getTestData: "/sensor/buSensorDeviceData/getTestData",
          timelist:"/sensor/Vib110sjDto/timelists",
          list120s: "/sensor/Vib110sjDto/list120s",
          sensor: "/sensor/buSensor/getSensorIp",
          getTableName: "/sensor/buSensor/getTableName",
        },
        deviceListZ: [],
        deviceListY: [],
        deviceListX: [],
        deviceList3D: [],
        measureTime: [],
        nodeOne: '',
        nodeSecond: '',
        nodeThree: '',
        node3D: '',
        beginTime:'',
        endTime:'',
        time:'',
        timeList:[],
        node:'',
        createValue: [],
        sensorDicDatas:[],
        checkItem: '',
        deviceName: '',
        tableName: '',
      }
    },
    created() {
    },
    computed: {
      importExcelUrl: function () {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      initDictConfig() {
      },
      onChange(data,dataString){
        // console.log(data);
        // this.createValue = data;
        this.queryParam.beginTime = data + " 00:00:00";
        this.queryParam.endTime = data + " 23:59:59";
        this.measureTime='';
      },
      searchReset() {
        this.queryParam = {};
        // this.createValue = [];
        this.measureTime=[];
        this.loadData(1);
      },
      getLatestTime(){
        this.$http.get(this.url.timelist, { params: {tableName:this.tableName, beginTime: this.queryParam.beginTime,
            endTime: this.queryParam.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()
        // this.node3D = 120;
        // this.$http.get(this.url.getTestData, { params: { node: this.node3D, beginTime: this.beginTime,endTime: this.endTime,vtIndex: this.queryParam.vtIndex } })
        //   .then(res => {
        //     this.deviceList3D = res.result
        //     this.initChart3D("myChart4", this.deviceList3D, '3D时域变化趋势');
        //   })
      },
      selectData1(){
        return new Promise((resolve) => {
          this.$http.get(this.url.list120s, {
            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.list120s, {
            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.list120s, {
            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["xjsdpy"].length;i++){
            xData1[i]=new Array();
            xData1[i][0]=parseFloat(deviceList["xjsdpy"][i]);
            xData1[i][1]=parseFloat(deviceList["yjsdpy"][i]);
          }
        }
        let value = '';
        if (this.queryParam.vtIndex === "VelWave"){
          value = "mm/s";
        }else {
          value = "mm/s²";
        }
        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];
              for (var i = 0, l = params.length; i < l; i++) {
                relVal += '<br/>' + params[i].value[1] + ' mm/s'
              }
              return relVal;
            }
          },
          xAxis: {
            min:0,
            max:204.6,
            interval:12.8,
            type: 'value',
            name: 'ms'
          },
          yAxis: {
            type: 'value',
            name: value
          },
          series: [{
            data: xData1,
            type: 'line',
            smooth: true,
            symbol: "none"
          }]
        };
        myChart.setOption(myOptions)
      },
      // initChart3D(id,data,title){
      //   let myChart = this.$echarts.getInstanceByDom(document.getElementById(id));
      //   if (!myChart) {
      //     myChart = this.$echarts.init(document.getElementById(id));
      //   }
      //   let xData1=[];
      //   if(data){
      //     for(let i=0;i<data.length;i++){
      //       xData1[i] = [];
      //       // xData1[i] = data[i];
      //       for (let j=0;j<data[i]["x"].length;j++){
      //         xData1[i].push([data[i]["x"][j],data[i]["y"][j],data[i]["z"][j]]);
      //       }
      //     }
      //   }
      //   function functionCount(data) {
      //     let ser = [];
      //     for (let a=0; a<data.length; a++){
      //       let item = {
      //         data: xData1[a],
      //         type: 'line3D',
      //         smooth: true,
      //         lineStyle: {
      //           width: 3
      //         }
      //       }
      //       ser.push(item);
      //     }
      //     return ser;
      //   }
      //   // console.log(xData1);
      //   const myOptions = {
      //     title:{
      //       left:'center',
      //       text:title
      //     },
      //     tooltip: {
      //       trigger: 'axis',
      //     },
      //     xAxis3D: {
      //       type: 'value',
      //     },
      //     yAxis3D: {
      //       type: 'category',
      //     },
      //     zAxis3D: {
      //       type: 'value',
      //     },
      //     grid3D: {
      //       viewControl: {
      //         projection: 'orthographic'
      //       }
      //     },
      //     series: functionCount(xData1)
      //   };
      //   myChart.setOption(myOptions)
      // },
      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
        );
      },
      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
          })
      },
    }
  }
</script>

<style scoped>

</style>