<template>
  <div class="gasvalue">
    <div class="label">管网运行</div>
    <!--<div>-->
    <!--<div class="div-select">-->
    <!--<select v-model="date" >-->
    <!--<option :value="date" v-for="s in date">{{s}}</option>-->
    <!--</select>-->
    <!--</div>-->
    <div class="d1">
      <div class="d11">
        <table class="backgroundimg">
          <tr>
            <td class="td2">总供气量</td>
          </tr>
          <tr>
            <td class="td3"><span v-for="a in totalgasarrary" track-by="$index">{{a}}</span><span class="span-unit">{{unit}}</span>
            </td>
          </tr>
          <tr>
            <td class="td4"></td>
          </tr>
        </table>
      </div>
      <div class="d12">
        <table class="backgroundimg">
          <tr>
            <td class="td2">总销气量</td>
          </tr>
          <tr>
            <td class="td3"><span v-for="a in totalgasarrary" track-by="$index">{{a}}</span><span class="span-unit">{{unit}}</span>
            </td>
          </tr>
          <tr>
            <td class="td4"></td>
          </tr>
        </table>
      </div>
    </div>
    <!--</div>-->
  </div>
</template>

<script>
  import * as DataSql from '../../../stores/DataSql'
  import * as Util from '../../../Util'
  import co from 'co'

  export default {
    name: "supplygas",
    data() {
      return {
        totalgas: '',
        totalgasarrary: [],
        date: [2018, 2017, 2016],
        sqlcondition: '',
        result: [],
        unit: '',
        resdata: []
      }
    },
    methods: {
      //请求后台数据
      searchdata(year) {

        let sqldata = DataSql.getData(this, 'pregas',{startDate:year,f_filiale:this.$parent.$parent.f_filiale}, 'resdata')
        co(sqldata)
      },
      // 将数值打碎成数组
      gasValueStyle(s) {
        this.totalgasarrary = []
        for (var i = 0; i < s.length; i++) {
          this.totalgasarrary.push(s.charAt(i))
        }
      },
      // 数据增加单位
      datafix(data) {
        var s = data + ''
        if (s.length > 9) {
          s = s.substring(0, s.length - 8);
          this.unit = '亿'
        }
        if (s.length > 5) {
          s = s.substring(0, s.length - 4);
          this.unit = '万'
        }
        this.gasValueStyle(s)
      },
      //取整
      getValueInt() {
        var index = this.totalgas.toString().indexOf('.');
        var s = 0
        if (index > -1) {
          s = this.totalgas.toString().substring(0, index);
        } else {
          s = this.totalgas
        }
        this.datafix(s)
      }
    },
    watch: {
      'resdata':{
        deep: true,
        handler(val) {
          this.totalgas = this.resdata[0].value
        }
      },
      'totalgas'(val) {
        this.getValueInt()
        this.$parent.loaddata++
      }
    },
    ready() {
      // 拼接sql
      var date = Util.toStandardDateString();
      var year = date.substring(0, 4)-4

      this.searchdata(year)
    }
  }
</script>

<style scoped>
  @media screen and (max-width: 1920px) {
    .label {
      font-size: 0.85em;
      color: #fff;
      height: 8%;
      width: 100%;
      margin-left: 6%;
    }
    table {
      width: 100%;
      height: 100%;
    }

    span {
      border: solid 1px #00f7ff;
      /*margin: 0px 5px;*/
      /*padding: 1px 6px;*/
      background-color: #01363f;
      color: #f7cb32;
      font-size: 2.6rem;
      font-weight: bolder;
      /*width: 30px;*/
      /*height: 44px;*/
      margin: 0% 2%;
      padding: 1% 2%;
      border-radius: 4px;
    }

    .backgroundimg td {
      text-align: center;
      /*width: 486px;*/
      height: 40%;
      width: 100%;
      color: #ffffff;
    }

    .td2 {
      font-size: 1.8rem;
      height: 20%!important;
    }

    .td3 {
      padding-left: 4%;
      text-align: center;
    }

    .td4 {
    }

    .span-unit {
      margin-left: 1px;
      font-size: 1.5em;
      color: #f7cb32;
      border: none;
      background-color: rgba(1, 207, 242, 0);
    }

    .backgroundimg {
      /*background-image: url('../../../../static/ManageHomePic/gasborder.png');*/
      background-size: 90% 75%;
      background: no-repeat center;
    }

    .d1 {
      /*height: 250px;*/
      width: 100%;
      height: 100%;
      padding-top: 5%;
    }

    .d11 {
      /*height: 140px*/
      width: 100%;
      height: 45%;
    }

    .d12 {
      /*height: 114px;*/
      width: 100%;
      height: 45%;
    }

  }
  @media screen and (max-width: 1366px) {
    .label {
      font-size: 0.85em;
      color: #fff;
      height: 8%;
      width: 100%;
      margin-left: 6%;
    }
    table {
      width: 100%;
      height: 100%;
    }

    span {
      border: solid 1px #00f7ff;
      /*margin: 0px 5px;*/
      /*padding: 1px 6px;*/
      background-color: #01363f;
      color: #f7cb32;
      font-size: 1.8rem;
      font-weight: bolder;
      /*width: 30px;*/
      /*height: 44px;*/
      margin: 0% 2%;
      padding: 1% 2%;
      border-radius: 4px;
    }

    .backgroundimg td {
      text-align: center;
      /*width: 486px;*/
      height: 40%;
      width: 100%;
      color: #ffffff;
    }

    .td2 {
      font-size: 1.2rem;
      height: 20%!important;
    }

    .td3 {
      padding-left: 4%;
      text-align: center;
    }

    .td4 {
    }

    .span-unit {
      margin-left: 1px;
      font-size: 1em;
      color: #f7cb32;
      border: none;
      background-color: rgba(1, 207, 242, 0);
    }

    .backgroundimg {
      /*background-image: url('../../../../static/ManageHomePic/gasborder.png');*/
      background-size: 90% 75%;
      background: no-repeat center;
    }

    .d1 {
      /*height: 250px;*/
      width: 100%;
      height: 100%;
      padding-top: 5%;
    }

    .d11 {
      /*height: 140px*/
      width: 100%;
      height: 45%;
    }

    .d12 {
      /*height: 114px;*/
      width: 100%;
      height: 45%;
    }

  }

</style>
