<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" >
        <a-row :gutter="24">
<!--          <a-col :span="9">-->
<!--            <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="4">
            <a-form-item label="仪表">
              <a-select v-model="meter" placeholder="请选择智能仪表">
                <a-select-option value="111">充电桩无线单相仪表</a-select-option>
                <a-select-option value="123">天车无线三相仪表</a-select-option>
                <a-select-option value="12345">辅机线有线单相仪表</a-select-option>
                <a-select-option value="456">车顶有线三相仪表</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="采集时间">
              <j-date v-model="beginTime" style="width:300px" placeholder="采集时间"
                      :showTime=true dateFormat="YYYY-MM-DD"  />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="6">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery1">查询</a-button>
              </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->
    <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>
    <!-- 操作按钮区域 -->
<!--    <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>-->
<!--      &lt;!&ndash; 高级查询区域 &ndash;&gt;-->
<!--      <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>-->
<!--      <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>-->

    <!-- table区域-begin -->
<!--    <div>-->
<!--      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
<!--        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项-->
<!--        <a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
<!--      </div>-->

<!--      <a-table-->
<!--        ref="table"-->
<!--        size="middle"-->
<!--        :scroll="{x:true}"-->
<!--        bordered-->
<!--        rowKey="id"-->
<!--        :columns="columns"-->
<!--        :dataSource="dataSource"-->
<!--        :pagination="ipagination"-->
<!--        :loading="loading"-->
<!--        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"-->
<!--        class="j-table-force-nowrap"-->
<!--        @change="handleTableChange">-->

<!--        <template slot="htmlSlot" slot-scope="text">-->
<!--          <div v-html="text"></div>-->
<!--        </template>-->
<!--        <template slot="imgSlot" slot-scope="text">-->
<!--          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>-->
<!--          <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>-->
<!--        </template>-->
<!--        <template slot="fileSlot" slot-scope="text">-->
<!--          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>-->
<!--          <a-button-->
<!--            v-else-->
<!--            :ghost="true"-->
<!--            type="primary"-->
<!--            icon="download"-->
<!--            size="small"-->
<!--            @click="downloadFile(text)">-->
<!--            下载-->
<!--          </a-button>-->
<!--        </template>-->

<!--        <span slot="action" slot-scope="text, record">-->
<!--          <a @click="handleEdit(record)">编辑</a>-->

<!--          <a-divider type="vertical" />-->
<!--          <a-dropdown>-->
<!--            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>-->
<!--            <a-menu slot="overlay">-->
<!--              <a-menu-item>-->
<!--                <a @click="handleDetail(record)">详情</a>-->
<!--              </a-menu-item>-->
<!--              <a-menu-item>-->
<!--                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">-->
<!--                  <a>删除</a>-->
<!--                </a-popconfirm>-->
<!--              </a-menu-item>-->
<!--            </a-menu>-->
<!--          </a-dropdown>-->
<!--        </span>-->

<!--      </a-table>-->
<!--    </div>-->

<!--    <bu-fault-analysis-modal ref="modalForm" @ok="modalFormOk"></bu-fault-analysis-modal>-->
  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import BuFaultAnalysisModal from './modules/BuFaultAnalysisModal'
  import JSuperQuery from '@/components/jeecg/JSuperQuery.vue'
  import { getAction } from '@api/manage'

  export default {
    name: 'BuStandardelStatistics',
    mixins:[mixinDevice],
    components: {
      BuFaultAnalysisModal,
      JSuperQuery,
    },
    data () {
      return {
        description: '故障峰值分析表管理页面',
        // 表头
        url: {
          list: "/statistics/buFaultAnalysis/list",
          delete: "/statistics/buFaultAnalysis/delete",
          deleteBatch: "/statistics/buFaultAnalysis/deleteBatch",
          exportXlsUrl: "/statistics/buFaultAnalysis/exportXls",
          importExcelUrl: "statistics/buFaultAnalysis/importExcel",

          // meterElectric:"/sensor/buSensor/meterElectric",
          // meterVoltage:"/sensor/buSensor/meterVoltage",
          // meterPower:"/sensor/buSensor/meterPower",
          meterData:"/sensor/buSensor/meterData",
        },
        dictOptions:{},
        superFieldList:[],
        deviceList:{},
        beginTime:'',
        endTime:'',
        meter:'',
      }
    },
    created() {
    },
    computed: {
    },
    methods: {
      initDictConfig(){
      },
      searchQuery1(){
        this.$http.get(this.url.meterData, { params: {beginTime:this.beginTime,meter: this.meter} })
          .then(res => {
            if (res.success){
              this.deviceList = res.result;
              this.initChart("myChart1",this.deviceList,'电流');
            }else{
              this.$message.error(res.message);
            }
          })
        // this.$http.get(this.url.meterData, { params: {beginTime:this.beginTime} })
        //   .then(res => {
        //     this.deviceList = res.result
        //     this.initChart("myChart2",this.deviceList,'电压');
        //   })
        // this.$http.get(this.url.meterData, { params: {beginTime:this.beginTime} })
        //   .then(res => {
        //     this.deviceList = res.result
        //     this.initChart("myChart3",this.deviceList,'总功率因数');
        //   })
      },
      initChart(id,deviceList,title){
        let myChart = this.$echarts.getInstanceByDom(document.getElementById(id));
        if (!myChart) {
          myChart = this.$echarts.init(document.getElementById(id));
        }
        let xData= [];
        let aData = [];
        let bData = [];
        let cData = [];
        let yData = [];
        let legend = [];
        function functionCount(){
          let ser = [];
          if(title === "电流"){
            for(var i=0;i<deviceList['x'].length;i++){
              xData.push(deviceList['x'][i]);
              aData.push(deviceList['y'][i]);
            }
            legend = ['U相电流']
            let item1 = { name: legend[0], data: aData, type: 'line', smooth: true}
            ser.push(item1);
          }
          // else if(title === "电压"){
          //   for(var i=0;i<deviceList.length;i++){
          //     xData.push(deviceList[i].createTime);
          //     aData.push(deviceList[i].dya);
          //     bData.push(deviceList[i].dyb);
          //     cData.push(deviceList[i].dyc);
          //   }
          //   legend = ['U相电压','V相电压','W相电压']
          //   let item1 = { name: legend[0], data: aData, type: 'line', smooth: true}
          //   let item2 = { name: legend[1], data: bData, type: 'line', smooth: true }
          //   let item3 = { name: legend[2], data: cData, type: 'line', smooth: true }
          //   ser.push(item1);
          //   ser.push(item2);
          //   ser.push(item3);
          // }else if(title === "总功率因数"){
          //   for(var i=0;i<deviceList.length;i++){
          //     xData.push(deviceList[i].createTime);
          //     yData.push(deviceList[i].powerFactor);
          //     aData.push(deviceList[i].powerFactora);
          //     bData.push(deviceList[i].powerFactorb);
          //     cData.push(deviceList[i].powerFactorc);
          //   }
          //   legend = ['U相功率因数','V相功率因数','W相功率因数','总功率因数']
          //   let item1 = { name: legend[0], data: aData, type: 'line', smooth: true}
          //   let item2 = { name: legend[1], data: bData, type: 'line', smooth: true }
          //   let item3 = { name: legend[2], data: cData, type: 'line', smooth: true }
          //   let item4 = { name: legend[3], data: yData, type: 'line', smooth: true }
          //   ser.push(item1);
          //   ser.push(item2);
          //   ser.push(item3);
          //   ser.push(item4);
          // }
          return ser;
        }
        const myOptions = {
          title:{
            left:'center',
            text:title
          },
          tooltip: {
            trigger: 'axis',
          },
          legend:{
            data: legend,
          },
          xAxis: {
            type: 'category',
            gridIndex: 0,
            data: xData,
          },
          yAxis: {
            type: 'value',
          },
          dataZoom: [
            {
              type: 'inside',
              start: 0,
              end: 100
            },
            {
              start: 0,
              end: 100
            }
          ],
          // series: [{
          //   data: xData1,
          //   type: 'line',
          //   smooth: true,
          //   symbol: "none"
          // }]
          series: functionCount()
        };
        myChart.setOption(myOptions)
      },



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