<template>
  <div class="snapshotss-box">
    <div
      style="margin:16px 0;height:1px;background:rgba(228,229,231,1);border:1px solid rgba(239,240,241,1);"
    ></div>
    <div class="snapshotss-top">
      <div class="snapshotss-top-left">
        <span>今日营业时间</span>
        <span>{{chillerCommand.openTime?( chillerCommand.openTime.slice(0,2)+':'+chillerCommand.openTime.slice(2,4)):"--"}} - {{chillerCommand.endTime?(chillerCommand.endTime.slice(0,2)+':'+chillerCommand.endTime.slice(2,4)):"--"}}</span>
      </div>
      <div class="snapshotss-top-center">
        <span class="MicrYaHei">当前运行模式</span>
        <span>{{chillerCommand.model || '--'}}</span>
      </div>
      <div class="snapshotss-top-right">
        <span>室外环境</span>
        <span>多云 25 °C</span>
      </div>
    </div>
    <div class="snapshotss-center1">
      <div class="snapshotss-center1-title Micbold">系统运行状态</div>
      <div class="snapshotss-center1-content">
        <div class="snapshotss-cont">
          <div class="snapshotss-cont-top Micbold">冷水机组</div>
          <div class="snapshotss-cont-bottom">
            <div class="snapshotss-cont-bot-1">
              <span>{{chillerOrg.chillerNumSetLOrg || 0}}</span>
              <span>{{chillerOrg.chillerNumSetSOrg || 0}}</span>
              <span>{{chillerOrg.chillWaterOutTempSetOrg?chillerOrg.chillWaterOutTempSetOrg.toFixed(1):'--'}} °C</span>
            </div>
            <div class="snapshotss-cont-bot-2 MicrYaHei">
              <span>大</span>
              <span>小</span>
              <span>温度</span>
            </div>
          </div>
        </div>
        <div class="snapshotss-cont">
          <div class="snapshotss-cont-top Micbold">冷冻水泵</div>
          <div class="snapshotss-cont-bottom">
            <div class="snapshotss-cont-bot-1">
              <span>{{chillerOrg.coolPumpNumSetLOrg || 0}}</span>
              <span>{{chillerOrg.coolPumpNumSetSOrg || 0}}</span>
              <span>{{chillerOrg.coolPumpFreqSetOrg?chillerOrg.coolPumpFreqSetOrg.toFixed(0):'--'}} Hz</span>
            </div>
            <div class="snapshotss-cont-bot-2">
              <span>大</span>
              <span>小</span>
              <span>设定频率</span>
            </div>
          </div>
        </div>
        <div class="snapshotss-cont">
          <div class="snapshotss-cont-top Micbold">冷却水泵</div>
          <div class="snapshotss-cont-bottom">
            <div class="snapshotss-cont-bot-1">
              <span>{{chillerOrg.chillPumpNumSetLOrg || 0}}</span>
              <span>{{chillerOrg.chillPumpNumSetSOrg || 0}}</span>
              <span>{{chillerOrg.chillPumpFreqSetOrg?chillerOrg.chillPumpFreqSetOrg.toFixed(0):'--'}} Hz</span>
            </div>
            <div class="snapshotss-cont-bot-2">
              <span>大</span>
              <span>小</span>
              <span>设定频率</span>
            </div>
          </div>
        </div>
        <div class="snapshotss-cont">
          <div class="snapshotss-cont-top Micbold">冷却塔</div>
          <div class="snapshotss-cont-bottom">
            <div class="snapshotss-cont-bot-1">
              <span>{{chillerOrg.coolTowerNumSetLOrg || 0}}</span>
              <span>{{chillerOrg.coolTowerNumSetSOrg || 0}}</span>
              <span>{{chillerOrg.coolTowerFreqSet?chillerOrg.coolTowerFreqSet.toFixed(0):'--'}} Hz</span>
            </div>
            <div class="snapshotss-cont-bot-2">
              <span>大</span>
              <span>小</span>
              <span>设定频率</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="snapshotss-center2">
      <div class="snapshotss-cont2-box1 MicrYaHei">
        <span>数据传输情况</span>
        <span :class="chillerCommand.isExecuted==1?'span1':'span2'">
          能耗
          <img v-if="chillerCommand.energyErrorFlag==1" src="../../assets/finish.png" alt />
          <img v-else src="../../assets/wrong.png" alt />
        </span>
        <span :class="chillerCommand.isExecuted==1?'span1':'span2'">
          环境
          <img v-if="chillerCommand.environmentErrorFlag==1" src="../../assets/finish.png" alt />
          <img v-else src="../../assets/wrong.png" alt />
        </span>
        <span :class="chillerCommand.isExecuted==1?'span1':'span2'">
          BA
          <img v-if="chillerCommand.baErrorFalg==1" src="../../assets/finish.png" alt />
          <img v-else src="../../assets/wrong.png" alt />
        </span>
      </div>
      <div class="snapshotss-cont2-box2 MicrYaHei">
        <span>实际冷量</span>
        <span>{{chillerCommand.nowPlantLoad?parseInt(chillerCommand.nowPlantLoad):'--'}} kW</span>
        <span>未来1小时预测冷量</span>
        <span>{{chillerCommand.predictedLoad1h?parseInt(chillerCommand.predictedLoad1h):'--'}} kW</span>
      </div>
    </div>
    <div class="snapshotss-foot">
      <div class="leftL">
        <div class="leftLengend">
          <i class="outIcon"></i> 室外温度
          <i class="innerIcon"></i> 室内平均温度
          <i class="innerMax"></i> 室内最高温度
        </div>
         <div id="snapshotssLeft" style="width:100%;height:250px;margin-right:;24px;"></div>
      </div>
      <div class="rightL">
        <div class="rightLengend">
          <i class="reactCool"></i> 实际供冷量
          <i class="preCool"></i> 预测冷量
        </div>
       <div id="snapshotssRight" style="width:100%;height:250px;"></div>
      </div>
     
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
import { queryQuickData, getCommand } from "@/api/strategy/strategy.js";
export default {
  props:['appealsDate','time'],
  data() {
    return {
      imgFinish: true,
      imgFinishList: [
        {
          name: "能耗",
          img1: require("../../assets/finish.png"),
          img2: require("../../assets/wrong.png")
        },
        {
          name: "环境",
          img1: require("../../assets/finish.png"),
          img2: require("../../assets/wrong.png")
        },
        {
          name: "BA",
          img1: require("../../assets/finish.png"),
          img2: require("../../assets/wrong.png")
        }
      ],
      chillerOrg: {},
      chillerCommand: {},
      chillerHourList: [],
      dataX: [],
      loadX: [],
      dataY1: [],
      dataY2: [],
      dataY3: [],
      loadY1: [],
      loadY2: [],
      loadY3: [],
      dataY1Min:'',
      dataY1Max:''
    };
  },
  mounted() {
    this.getQuickData();
  },
  watch:{
    time(newV,old){
      this.getQuickData();
    }
  },
  methods: {
    getMax(arr) {
            var max = arr[0]
            for (var i = 0; i < arr.length; i++) {
                if (max < arr[i]) {
                    max = arr[i]
                }
            }
            return max
        },
        getMin(arr) {
            var min = arr[0]
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] == '') {
                    arr.splice(arr[i], 1)
                }
                if (min > arr[i]) {
                    min = arr[i]
                }
            }

            return min
        },
    getQuickData() {
      let params = {
        getParams: {
          date: this.appealsDate, //日期 yyyyMMdd
          time: this.time
        }
      };
      this.chillerCommand = {}
      this.chillerHourList = []
      queryQuickData(params).then(res => {
        this.chillerOrg = res.chillerOrg || {};
        this.chillerCommand = res.chillerOrg || {};
        this.chillerHourList = res.chillerHourList || [];
        this.drawData();
      });
    },
    drawData() {
      this.dataY1 = []
      this.dataX = []
      this.loadX = []
      this.dataY2 = []
      this.dataY3 = []
      this.loadY1 = []
      this.loadY2 = []
      this.loadY3 = []
      this.chillerHourList.forEach(el => {
        el.value = el.time.slice(0, 2) + ":" + el.time.slice(2, 4);
        this.dataX.push(el.value);
        this.loadX.push(el.value);
        this.dataY1.push(el.tout=='-9999'?undefined:el.tout);
        this.dataY2.push(el.meanTindoor);
        this.dataY3.push(el.maxTindoor);
        this.loadY1.push(el.nowPlantLoad?(el.nowPlantLoad=='-9999'?undefined:el.nowPlantLoad):undefined);
        this.loadY2.push(el.predictedLoadUpLimit?(el.predictedLoadUpLimit=='-9999'?undefined:el.predictedLoadUpLimit):undefined);
        this.loadY3.push(el.redictedLoadDownLimit?(el.redictedLoadDownLimit == '-9999'?undefined:el.redictedLoadDownLimit):undefined);  
      });
      let arr = []
      arr = arr
          .concat(this.dataY1)
          .concat(this.dataY2)
          .concat(this.dataY3)
      this.dataY1Min = this.getMin(arr)
      this.dataY1Max = this.getMax(arr)
      let minG = parseInt(this.dataY1Min % 10),
          minS = parseInt((this.dataY1Min % 100) / 10),
          maxG = parseInt(this.dataY1Max % 10),
          maxS = parseInt((this.dataY1Max % 100) / 10)
      if (minG > 5) {
          this.dataY1Min = String(minS) + '5'
      } else if (minG <= 5) {
          this.dataY1Min = String(minS) + '0'
      }
      if (maxG > 5) {
          this.dataY1Max = String(maxS + 1) + '0'
      } else if (maxG <= 5) {
          this.dataY1Max = String(maxS) + '0'
      }
      this.drawSnapshotssLeft();
      this.drawSnapshotssRight();
    },
    drawSnapshotssLeft() {
      var snapshotssLeft = echarts.init(
        document.getElementById("snapshotssLeft")
      );
      let option = {
        tooltip: {
          trigger: "axis"
        },
        title:{
          text:'室内外温度',
          fontSize:'16px',
          color:'#1F2429'
        },
       
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.dataX
        },
        yAxis: {
          type: "value",
          min: Number(this.dataY1Min),
          max: Number(this.dataY1Max),
          interval: 2,
          axisLabel:{formatter:'{value}  ℃'}
        },
        series: [
          {
            name: "室外温度",
            type: "line",
           
            data: this.dataY1,
            color:'#0091FF'
          },
          {
            name: "室内平均温度",
            type: "line",
           
            data: this.dataY2,
            color:'#00D6B9'
          },
          {
            name: "室内最高温度",
            type: "line",
            
            data: this.dataY3,
            color:'#FFBA6B'
          }
        ]
      };
      snapshotssLeft.setOption(option);
    },
    drawSnapshotssRight() {
      var snapshotssRight = echarts.init(
        document.getElementById("snapshotssRight")
      );
      snapshotssRight.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            animation: false,
            label: {
              backgroundColor: "#ccc",
              borderColor: "#aaa",
              borderWidth: 1,
              shadowBlur: 0,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              color: "#222"
            }
          }
          //  formatter: function (params) {
          // //     return params[2].name + '<br />' + params[2].value;
          // }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        title:{
          text:'预测冷量',
          fontSize:'16px',
          color:'#1F2429'
        },
        xAxis: {
          type: "category",
          data: this.loadX
        },
        yAxis: {
          splitNumber: 3,
          splitLine: {
            show: false
          },
          axisLabel:{formatter:'{value}  KW'}
        },
        series: [
          {
            name: "L",
            type: "line",
            data: this.loadY2,
            lineStyle: {
              opacity: 0
            },
            stack: "confidence-band",
            symbol: "none"
          },
          {
            name: "U",
            type: "line",
            data: this.loadY3,
            lineStyle: {
              opacity: 0
            },
            areaStyle: {
              color: "#ccc"
            },
            stack: "confidence-band",
            symbol: "none"
          },
          {
            type: "line",
            data: this.loadY1,
            hoverAnimation: false,
            symbolSize: 6,
            itemStyle: {
              color: "#0091FF"
            },
            showSymbol: false
          }
        ]
      });
    },
      getData() {
      this.chillerHourList.forEach(el => {
        el.value = el.time.slice(0, 2) + ":" + el.time.slice(2, 4);
        this.dataX.push(el.value);
        this.loadX.push(el.value);
        this.dataY1.push(el.tout);
        this.dataY2.push(el.meanTindoor);
        this.dataY3.push(el.maxTindoor);
        this.loadY1.push(el.nowPlantLoad?(el.nowPlantLoad=='-9999'?0:el.nowPlantLoad):0);
        this.loadY2.push(el.predictedLoadUpLimit?el.predictedLoadUpLimit:0);
        this.loadY3.push(el.redictedLoadDownLimit?el.redictedLoadDownLimit:0);
      });
    },
    drawLeft() {
      var leftLine = echarts.init(document.getElementById("leftLine"));
      let option = {
        tooltip: {
          trigger: "axis"
        },
        title:{
          text:'室内外温度',
          fontSize:'16px',
          color:'#1F2429'
        },
       
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.dataX
        },
        yAxis: {
          type: "value",
          axisLabel:{formatter:'{value}  ℃'}
        },
        series: [
          {
            name: "室外温度",
            type: "line",
            stack: "总量",
            data: this.dataY1,
            color:'#0091FF'
          },
          {
            name: "室内平均温度",
            type: "line",
            stack: "总量",
            data: this.dataY2,
            color:'#00D6B9'
          },
          {
            name: "室内最高温度",
            type: "line",
            stack: "总量",
            data: this.dataY3,
            color:'#FFBA6B'
          }
        ]
      };
      leftLine.setOption(option);
    },
    drawRight() {
      var rightLine = echarts.init(document.getElementById("rightLine"));
      rightLine.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            animation: false,
            label: {
              backgroundColor: "#ccc",
              borderColor: "#aaa",
              borderWidth: 1,
              shadowBlur: 0,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              color: "#222"
            }
          }
          //  formatter: function (params) {
          // //     return params[2].name + '<br />' + params[2].value;
          // }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        title:{
          text:'预测冷量',
          fontSize:'16px',
          color:'#1F2429'
        },
        xAxis: {
          type: "category",
          data: this.loadX
        },
        yAxis: {
          splitNumber: 3,
          splitLine: {
            show: false
          },
          axisLabel:{formatter:'{value}  KW'}
        },
        series: [
          {
            name: "L",
            type: "line",
            data: this.loadY2,
            lineStyle: {
              opacity: 0
            },
            stack: "confidence-band",
            symbol: "none"
          },
          {
            name: "U",
            type: "line",
            data: this.loadY3,
            lineStyle: {
              opacity: 0
            },
            areaStyle: {
              color: "#ccc"
            },
            stack: "confidence-band",
            symbol: "none"
          },
          {
            type: "line",
            data: this.loadY1,
            hoverAnimation: false,
            symbolSize: 6,
            itemStyle: {
              color: "#0091FF"
            },
            showSymbol: false
          }
        ]
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.snapshotss-box {
  .snapshotss-top {
    padding: 0 20px;
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    .snapshotss-top-center {
      margin: 0 178px;
    }
    span {
      display: block;
    }
    span:nth-of-type(1) {
      height: 22px;
      font-size: 14px;
      color: rgba(100, 108, 115, 1);
      line-height: 19px;
      margin-bottom: 4px;
    }
    span:nth-of-type(2) {
      height: 28px;
      font-size: 20px;
      font-family: PingFangTC-Medium, PingFangTC;
      font-weight: 500;
      color: rgba(31, 36, 41, 1);
      line-height: 28px;
    }
  }
  .snapshotss-center1 {
    padding: 0 20px;
    margin-bottom: 20px;
    .snapshotss-center1-title {
      height: 24px;
      font-size: 16px;
      color: rgba(31, 36, 41, 1);
      line-height: 21px;
      margin-bottom: 14px;
    }
    .snapshotss-center1-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .snapshotss-cont {
        border-radius: 4px;
        border: 1px solid rgba(238, 238, 238, 1);
        .snapshotss-cont-top {
          height: 40px;
          background: rgba(248, 249, 250, 1);
          border-radius: 4px;
          font-size: 16px;
          color: rgba(31, 36, 41, 1);
          line-height: 40px;
          padding-left: 20px;
        }
        .snapshotss-cont-bottom {
          padding: 14px 20px;
          .snapshotss-cont-bot-1 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 4px;
            span {
              height: 32px;
              font-size: 20px;
              font-family: Persagy;
              color: rgba(31, 36, 41, 1);
              line-height: 29px;
            }
            span:nth-of-type(2) {
              margin: 0 20px;
            }
          }
          .snapshotss-cont-bot-2 {
            span {
              height: 22px;
              font-size: 14px;
              color: rgba(100, 108, 115, 1);
              line-height: 19px;
            }
            span:nth-of-type(2) {
              margin: 0 50px;
            }
          }
        }
      }
    }
  }
  .snapshotss-center2 {
    padding: 0 20px;
    margin-bottom: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .snapshotss-cont2-box1,
    .snapshotss-cont2-box2 {
      height: 80px;
      background: url("../../assets/copy.png");
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      padding-left: 24px;
    }
    .snapshotss-cont2-box1 {
      padding-right: 120px;
      span:nth-of-type(1) {
        height: 22px;
        font-size: 14px;
        color: rgba(100, 108, 115, 1);
        line-height: 19px;
        margin-right: 20px;
      }
      span:not(:first-child) {
        height: 28px;
        background: rgba(255, 255, 255, 1);
        border-radius: 16px;
        font-size: 14px;
        color: rgba(31, 36, 41, 1);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 6px 0 12px;
        margin-right: 20px;
        img {
          width: 20px;
          height: 20px;
          margin-left: 8px;
        }
      }
      .span1 {
        border: 1px solid rgba(52, 199, 36, 1);
      }
      .span2 {
        border: 1px solid rgba(245, 78, 69, 1);
      }
    }
    .snapshotss-cont2-box2 {
      span:nth-of-type(1),
      span:nth-of-type(3) {
        height: 22px;
        font-size: 14px;
        color: rgba(100, 108, 115, 1);
        line-height: 19px;
        margin-right: 16px;
      }
      span:nth-of-type(2),
      span:nth-of-type(4) {
        height: 32px;
        font-size: 24px;
        font-family: Persagy;
        color: rgba(31, 36, 41, 1);
        line-height: 29px;
        margin-right: 64px;
      }
      span:nth-of-type(3) {
        margin-right: 16px;
      }
    }
  }
  .snapshotss-foot {
    display: flex;
    justify-content: space-between;
    height: 300px;
     .leftL{
      flex:1;
      .leftLengend{
        text-align: center;
        margin-bottom: 10px;
        i{
          display: inline-block;
          width:16px;
          height: 6px;
          border-radius:3px;
          vertical-align: middle;
        }
        .innerIcon{
          background:rgba(0,214,185,1);
          margin: 0 20px;
        }
        .outIcon{
          background:rgba(0,145,255,1);
        }
        .innerMax{
          background:rgba(255,186,107,1);
        }
      }
    }
    .rightL{
      flex:1;
      .rightLengend{
        text-align: center;
        margin-bottom: 10px;
        i{
          display: inline-block;
          width:16px;
          height: 6px;
          border-radius:3px;
          vertical-align: middle;
        }
        .reactCool{
          background:rgba(0,214,185,1);
         
        }
        .preCool{
          background:rgba(0,145,255,1);
          opacity:0.29;
          margin-left:20px;
        }
      }
    }
  }
}
</style>