<template>
  <div id="unit" class="flex-row">
    <div class="basic-main" @keyup.enter="search">
      <div class="flex" v-if="!show">
        <!--class="span form-horizontal select-overspread container-fluid auto"-->
        <div style="height: auto;">
          <button style="float:right;" class="button_search button_spacing" @click="search()">查询</button>
          <button style="float:right;" class="button_search button_spacing" @click="exportToExcel()">导出为Excel</button>
        </div>
        <div style="overflow: scroll;">
          <table id="tab" style="white-space: nowrap" class="table table-bordered table-striped table-hover" cellpadding="1" cellspacing="1" border="1">
            <tr>
              <th rowspan="2">时间</th>
              <th rowspan="2"></th>
              <th rowspan="2">吕小寨门站</th>
              <th rowspan="2">狄寨塬门站</th>
              <th rowspan="2">高陵门站</th>
              <th rowspan="2">耿镇站</th>
              <th rowspan="2">港务区高高调</th>
              <th colspan="19">高中压调压站(MPa)</th>
            </tr>
            <tr>

              <th>吕小寨</th>
              <th>狄寨塬</th>
              <th>港务区</th>
              <th>未央湖</th>
              <th>凤十站</th>
              <th>草五站</th>
              <th>建章路</th>
              <th>昆明路</th>
              <th>科七路</th>
              <th>凤八路</th>
              <th>万寿北</th>
              <th>环东路</th>
              <th>西延路</th>
              <th>丈八站</th>
              <th>朱雀路1</th>
              <th>朱雀路2</th>
              <th>浐河路</th>
              <th>长鸣路</th>
              <th>曲江站</th>
            </tr>
            <!--这里用for循环去做-->
            <tr v-for="data in model.rows">
              <th>{{data.time}}</th>
              <th>{{data.pressureType}}</th>
              <th>{{data.data01}}</th>
              <th>{{data.data02}}</th>
              <th>{{data.data03}}</th>
              <th>{{data.data04}}</th>
              <th>{{data.data05}}</th>
              <th>{{data.data06}}</th>
              <th>{{data.data07}}</th>
              <th>{{data.data08}}</th>
              <th>{{data.data09}}</th>
              <th>{{data.data10}}</th>
              <th>{{data.data11}}</th>
              <th>{{data.data12}}</th>
              <th>{{data.data13}}</th>
              <th>{{data.data14}}</th>
              <th>{{data.data15}}</th>
              <th>{{data.data16}}</th>
              <th>{{data.data17}}</th>
              <th>{{data.data18}}</th>
              <th>{{data.data19}}</th>
              <th>{{data.data20}}</th>
              <th>{{data.data21}}</th>
              <th>{{data.data22}}</th>
              <th>{{data.data23}}</th>
              <th>{{data.data24}}</th>
            </tr>
            <!--footer 循环-->
            <tr v-for="data in modelFlow.rows">
              <th colspan="2">流量</th>
              <th>{{data.data01}}</th>
              <th>{{data.data02}}</th>
              <th>{{data.data03}}</th>
              <th>{{data.data04}}</th>
              <th>{{data.data05}}</th>
              <th>{{data.data06}}</th>
              <th>{{data.data07}}</th>
              <th>{{data.data08}}</th>
              <th>{{data.data09}}</th>
              <th>{{data.data10}}</th>
              <th>{{data.data11}}</th>
              <th>{{data.data12}}</th>
              <th>{{data.data13}}</th>
              <th>{{data.data14}}</th>
              <th>{{data.data15}}</th>
              <th>{{data.data16}}</th>
              <th>{{data.data17}}</th>
              <th>{{data.data18}}</th>
              <th>{{data.data19}}</th>
              <th>{{data.data20}}</th>
              <th>{{data.data21}}</th>
              <th>{{data.data22}}</th>
              <th>{{data.data23}}</th>
              <th>{{data.data24}}</th>
            </tr>

            <tr>
              <th rowspan="2">时间</th>
              <th colspan="4">球罐</th>
              <th colspan="5">高中压调压站</th>
              <th colspan="16">供热站</th>
            </tr>
            <!--第二个表头开始-->
            <tr>
              <th>球罐A</th>
              <th>球罐B</th>
              <th>球罐C</th>
              <th>球罐D</th>
              <th>西万路</th>
              <th>曲一</th>
              <th>郭杜</th>
              <th>西航</th>
              <th>西户门站</th>
              <th>西热电</th>
              <th>阳光</th>
              <th>雁东站</th>
              <th>圣元站</th>
              <th>融鑫路</th>
              <th>朝阳站</th>
              <th>南门站</th>
              <th>沣东站</th>
              <th>品诚站</th>
              <th>朱雀站</th>
              <th>太华站</th>
              <th>明德站</th>
              <th>嘉盛站</th>
              <th>大兴站</th>
              <th>城北站</th>
              <th>幸福林带</th>
            </tr>
            <!--数据区域 这里用for循环去做-->
            <tr v-for="data in model.rows">
              <th>{{data.time}}</th>
              <th>{{data.data25}}</th>
              <th>{{data.data26}}</th>
              <th>{{data.data27}}</th>
              <th>{{data.data28}}</th>
              <th>{{data.data29}}</th>
              <th>{{data.data30}}</th>
              <th>{{data.data31}}</th>
              <th>{{data.data32}}</th>
              <th>{{data.data33}}</th>
              <th>{{data.data34}}</th>
              <th>{{data.data35}}</th>
              <th>{{data.data36}}</th>
              <th>{{data.data37}}</th>
              <th>{{data.data38}}</th>
              <th>{{data.data39}}</th>
              <th>{{data.data40}}</th>
              <th>{{data.data41}}</th>
              <th>{{data.data42}}</th>
              <th>{{data.data43}}</th>
              <th>{{data.data44}}</th>
              <th>{{data.data45}}</th>
              <th>{{data.data46}}</th>
              <th>{{data.data47}}</th>
              <th>{{data.data48}}</th>
              <th>{{data.data49}}</th>
            </tr>
            <!--第二个 footer 循环去做-->
            <tr v-for="data in modelFlow.rows">
              <th colspan="5">流量</th>
              <th>{{data.data29}}</th>
              <th>{{data.data30}}</th>
              <th>{{data.data31}}</th>
              <th>{{data.data32}}</th>
              <th>{{data.data33}}</th>
              <th>{{data.data34}}</th>
              <th>{{data.data35}}</th>
              <th>{{data.data36}}</th>
              <th>{{data.data37}}</th>
              <th>{{data.data38}}</th>
              <th>{{data.data39}}</th>
              <th>{{data.data40}}</th>
              <th>{{data.data41}}</th>
              <th>{{data.data42}}</th>
              <th>{{data.data43}}</th>
              <th>{{data.data44}}</th>
              <th>{{data.data45}}</th>
              <th>{{data.data46}}</th>
              <th>{{data.data47}}</th>
              <th>{{data.data48}}</th>
              <th>{{data.data49}}</th>
            </tr>
            <!--表格的底部-->

            <tr>
              <th colspan="8">门站当日购气量(Nm3)</th>
              <th colspan="6">门站实际用气量(万Nm3)</th>
              <th colspan="7">本月累计购气量(Nm3)</th>
              <th rowspan="6" colspan="5"><br/>制表:<br/><br/><br/> 审核:</th>
            </tr>
            <tr>
              <td colspan="8">111</td>
              <td colspan="6">222</td>
              <td colspan="7">333</td>
            </tr>
            <tr >
              <th colspan="21" style="text-align:left">其他运行情况备注:</th>
            </tr>
            <tr>
              <th colspan="10">111</th>
              <th colspan="11">222</th>
            </tr>
            <tr>
              <th colspan="10">111</th>
              <th colspan="11">222</th>
            </tr>
            <tr>
              <th colspan="10">111</th>
              <th colspan="11">222</th>
            </tr>
            <tr>
              <th colspan="10">111</th>
              <th colspan="11">222</th>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {PagedList} from "vue-client";

  export default {
    name: "GasSupplyOperation",
    title:'供气运行日报表',
    data(){
      return{
        model: new PagedList('api/af-revenue/sql/getGasSupplyRunningPressure',30,{}),
        modelFlow: new PagedList('api/af-revenue/sql/getGasSupplyRunningFlow',30,{}),
        date:{
          today:"",
          yesterday:""
        },
        modelBackup:{}
      }
    },
    async ready(){
      await this.model.search();
      await this.modelFlow.search();
      this.resetData();
      console.log("this.model=",this.model)
      console.log("this.modelFlow",this.modelFlow)
    },
    methods:{
      resetData(){
        // 进站压力数据和出站压力数据拆分
        let data = this.model.rows;
        for(let index in data){
          console.log("index=",index)
          //将出站压力和进站压力合并为一列,所有的出站压力字段写这里  ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
          let output = JSON.stringify(data[index*2],['time','data01_output','data02_output','data03_output','data04_output','data05_output','data07_output','data09_output','data10_output','data11_output','data12_output','data13_output','data14_output','data15_output','data16_output','data17_output','data18_output','data19_output','data20_output','data21_output','data22_output','data23_output','data24_output','data29_output','data30_output','data31_output','data32_output','data33_output','data34_output','data35_output','data36_output','data37_output','data38_output','data39_output','data40_output','data41_output','data42_output','data43_output','data44_output','data45_output','data46_output','data47_output','data48_output','data49_output',]);
          output = JSON.parse(output);
          let outputJson = JSON.parse('{}');
          outputJson['pressureType'] = '出站';
          this.model.rows[index*2]['type'] = '进站';
          for(let jsonIndex in output){
            let outputIndex =jsonIndex.indexOf('output');
            if(outputIndex>0){
              //从进站数据中分离出站数据
              let prefix = jsonIndex.substr(0,outputIndex-1);
              let value = JSON.parse(data[index*2][jsonIndex]);
              delete data[index*2][jsonIndex];
              outputJson[prefix] = value;
            }
            else{
              outputJson[jsonIndex] = data[index*2]["time"];
            }
          }
          //向数组后面插入出站压力
          data.splice(2*index+1,0,outputJson);
        }
      },
      exportToExcel(){
        this.$resetpost('rs/logic/GasSupplyRunningExport',{raw_data:this.model.rows})
      },
      async search(){
        await this.model.search();
        await this.modelFlow.search();
        this.resetData();
        console.log("this.model.rows=",this.model.rows)
      }
    }
  }
</script>

<style scoped>

</style>
