<template>
  <div>
    <div class="background-left-top">
      <div class="col-sm-12" style="height: auto;padding-left: 4%;margin:2%">
      <span class="pf-title">SCADA</span>
      </div>
      <div class="col-sm-12 " style="height: 90%;margin-left: 1%">
          <div class="background-content-img scade-box col-sm-12 col-md-12" >
            <div class="flex-row scada-title">
              <p style="color:#00f6ff"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>
              <p style="color:#ffc21f"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>
              <p style="color:#f27c79"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>
            </div>
              <div class="flex-row scada-title">
              <span class="font-14-medium">总累计流量(NM3)</span>
              <span class="font-14-medium">进站流量(NM3)</span>
              <span class="font-14-medium">热源厂用气量(NM3)</span>
            </div>
        </div>
        <div class="col-sm-12  content-box" style="height: 55%;margin: 1%;width:95%">
            <div class="flex-row scada-title" style="border:1px solid #227ad8">
              <span class="font-14-medium flex-1">地区</span>
              <span class="font-14-medium flex-1">累计流量(NM3)</span>
              <span class="font-14-medium flex-1">进站压力(MPA)</span>
              <span class="font-14-medium flex-1">瞬时流量(NM3)</span>
              <span class="font-14-medium flex-1">出站压力(MPA)</span>
            </div>
            <div class="flex-row scada-title" style="background:rgba(1,44,69,1)" v-for="item in items">
              <span  class="font-16 flex-1">{{item.station_name.toUpperCase()}}</span>
              <span  class="font-16 flex-1">{{item.cumulative_flow}}</span>
              <span  class="font-16 flex-1">{{item.input_pressure}}</span>
              <span  class="font-16 flex-1">{{item.instantaneous_flow}}</span>
              <span  class="font-16 flex-1">{{item.output_pressure}}</span>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {HttpResetClass} from 'vue-client'
  export default {
    name: 'scada',
    data () {
      return {
        items:[{"station_name":"吕小寨","instantaneous_flow":0,"output_pressure":36.594,"create_time":"2021-05-11 18:00:00.0","input_pressure":30.776,"cumulative_flow":0,"id":5},{"station_name":"狄寨塬","instantaneous_flow":26667358,"output_pressure":22.178,"create_time":"2021-05-11 18:00:00.0","input_pressure":10.763,"cumulative_flow":56752,"id":6},{"station_name":"高陵","instantaneous_flow":0,"output_pressure":6.862,"create_time":"2021-05-11 18:00:00.0","input_pressure":6.867,"cumulative_flow":264880,"id":7},{"station_name":"lng","create_time":"2021-05-11 18:00:00.0","cumulative_flow":0,"id":8}]
      }
    },
    methods: {
      getdata(){
              let http = new HttpResetClass()
      http.load('post','api/af-revenue/sql/getLargeScreen',{data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
        this.items = res.data
      })
      }
    },
    ready () {
      // this.getdata()
      // setInterval(this.getdata, 3600000)
      // let http = new HttpResetClass()
      // http.load('post','api/af-revenue/sql/getLargeScreen',{data:{}}).then((res)=>{
      //   this.items = res.data
      // })

    }
  }
</script>

<style scoped>
  @media screen and (max-width: 1920px) {
    .scada-title {
      justify-content: space-around;
      flex-direction: row;
      height: auto;
    }

    .scade-box {
      width: 95%;
      height: 40%;
      margin: inherit;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .scada-font-title {
      margin-right: 1em;
      font-family: tRends;
      font-size: 28px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 35px;
      letter-spacing: 0px;
    }

    .font-14 {
      font-size: 14px;
      font-family: tRends;
    }

    .font-14-medium {
      color: #ffffff;
      line-height: 18px;
      font-size: 14px;
      font-family: font-pingfang-medium;
    }

    .font-16 {
      font-family: pFBold;
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 26px;
      letter-spacing: 0px;
      color: #00f6ff;
    }

    .font-14 {
      font-size: 14px;
      color: white
    }

    .flex-1 {
      flex: 1;
      text-align: center;
    }

    .content-box {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
  }
  @media screen and (max-width: 1440px) {
    .scada-title {
      justify-content: space-around;
      flex-direction: row;
      height: auto;
    }

    .scade-box {
      width: 95%;
      height: 40%;
      margin: inherit;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .scada-font-title {
      margin-right: 1em;
      font-family: tRends;
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 35px;
      letter-spacing: 0px;
    }

    .font-14 {
      font-size: 12px;
      font-family: tRends;
    }

    .font-14-medium {
      color: #ffffff;
      line-height: 18px;
      font-size: 12px;
      font-family: font-pingfang-medium;
    }

    .font-16 {
      font-family: pFBold;
      font-size: 12px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 26px;
      letter-spacing: 0px;
      color: #00f6ff;
    }

    .font-14 {
      font-size: 12px;
      color: white
    }

    .flex-1 {
      flex: 1;
      text-align: center;
    }

    .content-box {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
  }
</style>
