<template>
  <div class="dashboard">
    <div class="dashboardTop">
      <div class="dashboardTopBox">
        <el-col :span="6" style="padding-top: .5%">
          <div style="text-align: center">
            <span class="elName">{{elName}}</span>
          </div>
        </el-col>
        <el-col :span="3"class="colBox">
          <!--限电-->
          <div class="myswitch">
            <el-switch
              v-model="sign"
              class="switchStyle"
              style="margin-left:20px;"
              active-text="限电"
              active-color="red"
              active-value="1"
              inactive-text="不限电"
              inactive-value="0"
              inactive-color="#40E0D0"
              @change="saveXD"
            />
          </div>
          <!--二维码-->
          <div class="qrcodeDiv">
            <svg class="icon" aria-hidden="true" @click="openQrcodeDrawer">
              <use xlink:href="#icon-erweima"></use>
            </svg>
          </div>
        </el-col>
        <el-col :span="6">
          <!--版本号-->
          <div class="versionBox">
            <div class="versionDiv">
              <span class="sysName" @click="changeConsole"> 功率预测数据平台</span>
              <div class="version">
                <span>后台管理：{{ this.consoleVersion }}</span>
                <span>统计查询：{{ this.reportVersion }}</span>
                <span>系统监控：{{ this.monitorVersion }}</span>
                <span>lib：{{ this.libVersion }}</span>
              </div>
            </div>

          </div>
        </el-col>
        <!--右侧按钮-->
        <el-col :span="8">
            <div class="otherButton">
              <div style="height: 60px">
                <el-button type="primary"  size="small" @click="openDraw">
                  修改通道告警通知
                </el-button>
                <el-button type="primary"  size="small" @click="openEnvir">
                  环境数据展示
                </el-button>
                <el-button type="primary" :class="statusFlag=='true'? 'barbutt' : 'waringbutt'" size="small" @click="jump">
                  后台数据展示
                </el-button>
                <el-tooltip placement="top" content="扫码小程序" effect="light">
                  <el-button type="success"  icon="el-icon-full-screen" circle size="small" @click="appletsDialogVisible=true" />
                </el-tooltip>
                <el-tooltip placement="right" content="关于我们" effect="light">
                  <el-button type="warning" icon="el-icon-s-custom" circle size="small" @click="aboutusDialogVisible=true" />
                </el-tooltip>
              </div>

          </div>

        </el-col>
      </div>

    </div>
    <div class="dashboardMain">
      <!--通道灯-->
      <div class="dashTop">
        <el-card class="tunnelBoxCard">
          <div class="tunnelTop">
            <div class="tunnelText"><span>通道信息</span></div>
            <div class="tunnelIcon">
              <svg class="icon" aria-hidden="true" style=" transform: rotate(0.25turn);" @click="tunnelLogFlag = true">
                <use xlink:href="#icon-tuisong-tuisongtongdao20-01"></use>
              </svg>
            </div>
          </div>
          <div class="tunnelstylebg">
            <div class="tunnel">
              <div  :class="analysisStatus === 0?'tunnelbad':'tunnelPanel'" @click="toTunnelList(analysisList,'解析通道')">解析通道</div>
              <div  :class="uploadList.length === 0?'noneDiv':'tunnelDiv'">
                <div :class="uploadStatus === 0?'tunnelbad':'tunnelPanel'" @click="toTunnelList(uploadList,'上报通道')">上报通道</div>
              </div>
              <div  :class="dataexchangeList.length === 0?'noneDiv':'tunnelDiv'">
                <div :class="dataexchangeStatus === 0?'tunnelbad':'tunnelPanel'" @click="toTunnelList(dataexchangeList,'接入通道')">接入通道</div>
              </div>
              <div :class="callBackList.length === 0?'noneDiv':'tunnelDiv'">
                <div :class="callBackStatus === 0?'tunnelbad':'tunnelPanel'" @click="toTunnelList(callBackList,'回传通道')">回传通道</div>
              </div>
            </div>
          </div>
        </el-card>
        <el-card class="uploadBoxCard">
          <div class="objectTop">
            <div class="objectText">上报对象</div>
            <div class="objectIcon">
              <svg class="icon" aria-hidden="true" @click="objectLogFlag = true">
                <use xlink:href="#icon-tuisongtongdao"></use>
              </svg>
            </div>
          </div>
         <upload-object/>
        </el-card>
      </div>
      <!--预测曲线-->
      <el-card class="echart-card">
        <bottom-left/>
      </el-card>
    </div>
    <!--告警-->
    <div class="waringTunnel">
      <audio muted ref="mySummaryAudio" :src="summaryAudioUrl" />
    </div>
    <!--二维码扫描抽屉-->
    <div class="drawbg">
      <el-drawer
        title="二维码扫描"
        :visible.sync="qrcodeDrawer"
        @close="colseQrcode"
        :modal-append-to-body="false"
        :wrapperClosable="false"
        size="80%"
        direction="ttb"
      >
        <!--<div class="drawclose" @click="colseQrcode" />-->
        <qrcode :key="qrtimer" style="height: 100%" :url="url" />
      </el-drawer>
    </div>
    <!--修改通告告警抽屉-->
    <div>
      <el-drawer
        :visible.sync="drawer"
        :with-header="false"
        :modal-append-to-body="false"
        size="55%"
      >
        <div class="waringdraw">
          <div style="text-align: center">
            <span style="font-size: 20px">修改通道告警通知</span>
          </div>
          <div style="display: flex;justify-content: center">
            <el-transfer
              v-model="valueList"
              :data="dataList"
              :titles="['告警提示', '告警不提示']"
              style="margin-left:10px;margin-top:20px;"
              @change="handleChange"
            />
          </div>
          <div style="text-align: center">
            <el-button size="small" style="margin-left:10px;margin-top:20px;" @click="saveP">
              提交
            </el-button>
          </div>
        </div>
      </el-drawer>
    </div>
    <!--子通道-->
    <div v-if="onshow">
      <son-tunnel :list="tunnelList" @onTunnelChange="onTunnelChange"/>
    </div>
    <!--环境数据-->
    <div v-if="enShow">
      <envionment :enshow="enList" @onEnChange="onEnChange"/>
    </div>
    <!--关于我们-->
    <div class="gydialog">
      <el-dialog
        title="关于我们"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        :visible.sync="aboutusDialogVisible"
        style="padding: 0px;"
        width="500px"
      >
        <hr align="center" width="100%" color="#57387A" SIZE="1">
        <el-row>
          <el-col :span="8"><img src="../../assets/aboutus.png" width="150px" height="150px"></el-col>
          <el-col :span="16"><br><div class="context">沈阳嘉越电力科技有限公司成立于2010年11月，是一家集科研、生产、销售、服务于一体的高新技术企业。公司主要业务包括新能源智能功率预测、新能源智慧场站技术与服务、新能源综合能源服务、电网技术服务等四大板块。</div>
            <div>联系电话：024-89633377</div>
          </el-col>
        </el-row>
      </el-dialog>
    </div>
    <!--扫码程序-->
    <div class="appdialog">
      <el-dialog
        title="扫码小程序"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        :visible.sync="appletsDialogVisible"
        style="padding: 0px;"
        width="550px"
      >
        <img src="../../assets/applets.jpg" width="500" height="500">
      </el-dialog>
    </div>
    <!--通道异常日志-->
    <div class="logInfo">
      <el-dialog
        title="通道异常日志"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        :visible.sync="tunnelLogFlag"
        style="padding: 0px;"
        width="60%"
      >
        <tunnel-log v-if="tunnelLogFlag"/>
      </el-dialog>
    </div>
    <!--上报对象日志-->
    <div class="logInfo">
      <el-dialog
        title="上报对象异常日志"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        :visible.sync="objectLogFlag"
        style="padding: 0px;"
        width="60%"
      >
        <upload-object-log v-if="objectLogFlag"/>
      </el-dialog>
    </div>
  </div>

</template>

<script>
import "../datav/js/iconfont.js"
import tunnelLog from "./centerLeft1";
import sonTunnel from "./centerLeft2";
import uploadObject from "./centerRight1";
import uploadObjectLog from "./centerRight2";
import envionment from "./center";
import bottomLeft from "./bottomLeft";
import qrcode from './qrcode'
// import bottomRight from "./bottomRight";
export default {
  data() {
    return {
      /*通道*/
      tunnelList:[],
      enList:[],
      analysisList: [],
      callBackList: [],
      dataexchangeList: [],
      uploadList: [],
      flagNum: 0,
      flag: 0,
      onshow: false,//子通道是否显示
      enShow: false,//环境数据是否显示
      timer: '',
      elName: '',
      drawer: false,//修改通道信息是否显示
      qrcodeDrawer: false,//二维码是否显示
      qrtimer: '',
      url: '',
      sign: '0',
      valueList: [],
      dataList: [],
      /*版本号*/
      consoleVersion: '',
      monitorVersion: '',
      reportVersion: '',
      libVersion:'',
      /*通道状态*/
      analysisStatus: 1,
      callBackStatus: 1,
      dataexchangeStatus: 1,
      uploadStatus: 1,
      /*环境数据是否正常*/
      statusFlag: 'false',
      aboutusDialogVisible: false,
      appletsDialogVisible: false,
      summaryAudioUrl: '/audio/gjy.mp3', // 音频地址，调用接口获取
      summaryAudioStatus: 'pause', // pause --当前停止播放状态;play--当前播放状态
      summaryAudioDuration: 0, // 音频时长
      //通道、上报对象日志标识
      tunnelLogFlag: false,
      objectLogFlag: false
    };
  },
  components: {
    tunnelLog,
    sonTunnel,
    uploadObject,
    uploadObjectLog,
    envionment,
    bottomLeft,
    qrcode
    // bottomRight
  },
  destroyed() {
    clearInterval(this.timer)
    clearInterval(this.initgetSysStatusList) // 关闭循环
  },
  mounted() {
    this.getEl()
    this.init()
    this.getVersion()
  },
  methods: {
    init(){
      this.queryXD()
      this.tunnelInfo()
      this.timer = setInterval(this.tunnelInfo, 1000 * 60)
    },
    jump() {
      this.$router.push('/realTimeQuery/realPowerQuery')
    },
    tunnelInfo() {
      Promise.all([this.getChannelStatus(), this.getChannelAlarmInfo() ]).then((res) => {
        this.analysisList = res[0].analysisList
        this.callBackList = res[0].callBackList
        this.dataexchangeList = res[0].dataexchangeList
        this.uploadList = res[0].uploadList
        let channelAlarmList = res[1]
        var data = []
        var valueList = []
        if(this.analysisList.length>0){
          const result =this.analysisList.filter(w => w.channelStatus === '0')
          if(result.length>0) {
            this.analysisStatus = 0
          }else{
            this.analysisStatus = 1
          }
        }
        if(this.uploadList.length>0){
          const result =this.uploadList.filter(w => w.channelStatus === '0')
          if(result.length>0) {
            this.uploadStatus = 0
          }else{
            this.uploadStatus = 1
          }
          for (var i = 0; i < this.uploadList.length; i++) {
            data.push({
              id: this.uploadList[i].channelId,
              key: 'upload-' + this.uploadList[i].channelId,
              label: this.uploadList[i].channelName,
              channelStatus: this.uploadList[i].channelStatus
            })
          }
        }

        if(this.callBackList.length>0){
          const result =this.callBackList.filter(w => w.channelStatus === '0')
          if(result.length>0) {
            this.callBackStatus = 0
          }else{
            this.callBackStatus = 1
          }
          for (var i = 0; i < this.callBackList.length; i++) {
            data.push({
              id: this.callBackList[i].channelId,
              key: 'callBack-' + this.callBackList[i].channelId,
              label: this.callBackList[i].channelName,
              channelStatus: this.callBackList[i].channelStatus
            })
          }
        }

        if(this.dataexchangeList.length>0){
          const result =this.dataexchangeList.filter(w => w.channelStatus === '0')
          if(result.length>0) {
            this.dataexchangeStatus = 0
          }else{
            this.dataexchangeStatus = 1
          }
          for (var i = 0; i < this.dataexchangeList.length; i++) {
            data.push({
              id: this.dataexchangeList[i].channelId,
              key: 'dataexchange-' + this.dataexchangeList[i].channelId,
              label: this.dataexchangeList[i].channelName,
              channelStatus: this.dataexchangeList[i].channelStatus
            })
          }
        }

        if(channelAlarmList.length>0){
          for (var i = 0; i < channelAlarmList.length; i++) {
            for (var j = 0; j < data.length; j++) {
              if (data[j].id === channelAlarmList[i].channelId) {
                valueList.push(data[j].key)
              }
            }
          }
        }
        this.dataList = data
        this.valueList = valueList
        this.getLeftChannel()
        this.getEnvirStatus()
        // var _self = this
        // this.initgetSysStatusList = setInterval(function () {
        //   _self.getLeftChannel()
        //   _self.getEnvirStatus()
        // }, 1000*60)
        // this.test = setInterval(function () {
        //   location.reload()
        // },60*60*1000)
      }).catch(e=>{
        console.log(e)
        this.$message.error("通道页面获取通道状态信息异常："+e)
      })
    },

    getLeftChannel() {
      var waringLeft = this.dataList
      var waringRight = this.valueList
      var temp = []
      for (let i = 0; i < waringLeft.length; i++) {
        var flag = true
        a:for (let j = 0; j < waringRight.length; j++) {
          var is = waringRight[j].indexOf('-')
          var right = waringRight[j].substring((is + 1), (waringRight[j].length + 1))
          if (waringLeft[i].id == right) {
            flag = false
            break a
          }
        }
        if (flag) {
          temp.push(waringLeft[i])
          if (waringLeft[i].channelStatus == '0') {
            this.summaryAudioClick()
            break
          }
        }
      }
      // console.log(temp)
    },
    getVersion() {
      this.$axios.get('/dashboard/getSysVersion').then(res => {
        this.reportVersion = res.data[0].reportVersion
        this.monitorVersion = res.data[0].monitorVersion
        this.consoleVersion = res.data[0].consoleVersion
        this.libVersion = res.data[0].libVersion
      }).catch(error=>{
        this.$message.error('获取版本号异常：'+error)
      })
    },
    /*父给子通道信息*/
    toTunnelList(list,name){
      this.onshow = true
      if(name === '接入通道'){
        this.tunnelList = {
          flag: this.flagNum++,
          value: list,
          showType:0,
          name: name
        }
      }else{
        this.tunnelList = {
          flag: this.flagNum++,
          value: list,
          showType:1,
          name: name
        }
      }
    },
    onEnChange(val){
      this.enShow = val
    },
    onTunnelChange(val){
      this.onshow = val
    },
    saveP() {
      this.$axios.post('/dashboard/saveAllChannelAlarmInfo', this.updateList).then(res => {
        this.getLeftChannel()
      }).catch(e=>{
        console.error(e)
        this.$message.error('保存告警信息异常：'+e)
      })
    },
    queryXD() {
      this.$axios.get('/dashboard/getPowerLimitPlanSign').then((res) => {
        if (res.data.sign === 1) {
          // 限电
          this.sign = '1'
        } else {
          // 不限电
          this.sign = '0'
        }
      }).catch((error) => {
        this.$message.error('查询限电标识出错' + error)
      })
    },
    getChannelStatus() {
      const a = this.$axios
      return new Promise(function(resolve, reject) {
        a.get('/dashboard/getChannelStatus').then(res => {
          resolve(res.data)
        })
      }).catch((error) => {
        console.error('查询通道状态出错' + error)
      })
    },
    getChannelAlarmInfo() {
      const a = this.$axios
      return new Promise(function(resolve, reject) {
        a.get('/dashboard/getChannelAlarmInfo').then(res => {
          resolve(res.data)
        })
      }).catch((error) => {
        console.error('查询告警信息出错' + error)
      })
    },
    getEl() {
      this.$axios.get('/electricField/').then(res => {
        this.elName = res.data.name
      }).catch((error) => {
        console.error('查询场站名字出错' + error)
      })
    },
    handleChange(value, direction, movedKeys) {
      this.updateList = []
      for (var i = 0; i < value.length; i++) {
        var is = value[i].indexOf('-')
        var left = value[i].substring(0, is)
        var right = value[i].substring((is + 1), (value[i].length + 1))
        this.updateList.push({
          channelType: left,
          channelId: right
        })
      }
    },
    getEnvirStatus() {
      this.$axios.get('/dashboard/getIsAbnormal').then(res => {
        // console.log(res)
        this.statusFlag = res.data
      }).catch((error) => {
        console.error('查询环境数据是否正常出错' + error)
      })
    },
    saveXD(val) {
      var sign = 0
      if (val === '1') {
        sign = 1
      }
      var PowerLimitPlanSign = {
        id: 1,
        sign: sign
      }
      this.$axios.post('/dashboard/savePowerLimitPlanSign', PowerLimitPlanSign).then(res => {

      }).catch((error) => {
        this.$message.error('保存限电标识出错' + error)
      })
    },
    openDraw() {
      this.drawer = true
    },
    openEnvir(){
      this.enShow = true
      this.enList = {
        flag: this.flag++,
        show: true
      }
    },
    openQrcodeDrawer() {
      this.qrcodeDrawer = true
      this.qrtimer = new Date().getTime()
      this.url = ''
    },
    colseQrcode() {
      this.qrcodeDrawer = false
      this.url = '/aboutus.png'
    },
    summaryAudioClick() {
      const that = this
      if (that.summaryAudioStatus == 'pause') {
        that.$refs.mySummaryAudio.play()
        that.summaryAudioStatus = 'play' // 当前播放状态,记得修改图片
        that.$refs.mySummaryAudio.addEventListener('ended', function() {
          that.$refs.mySummaryAudio.pause()
          that.summaryAudioStatus = 'pause'
        })
      } else {
        that.$refs.mySummaryAudio.pause()
        that.summaryAudioStatus = 'pause'
      }
    },
    changeConsole(){
      var href = window.location.href
      window.location.href='https://'+href.split("//")[1].split(":")[0]+':9001'
    },
  }
};
</script>

<style scoped>
  .dashboard{
    height: 100%;
    background-color: rgb(240, 240, 240);
  }
  .dashboardTop{
    width:100%;
    height: 8%;
    display: flex;
    justify-content: space-around;
    margin-bottom: 0.5%;
    background-color: #2d2f33;
  }
  .dashboardTopBox{
    width: 100%;
    margin-top: .5%;
    align-self: center;
  }
  .dashboardTop .elName{
    display: inline-block;
    color: #fffafa;
    font-size: 30px;
    font-family:'mytext';
  }
  .colBox{
    padding-top: .5%;
    display: flex;
    justify-content: space-around;
  }
  .qrcodeDiv{
    margin-top: 2%;
  }
  .myswitch{
    display: inline-block;
    margin-top: 3%;
  }
  .dashboardTop .waringTunnel,.versionBox{
    display: inline-block;
    margin-left: .5%;
  }
  .dashboardTop .el-col-3 {
    width: 13%;
  }
  .versionBox{
    display: flex;
    justify-content: center;
  }
  .sysName{
    display: inline-block;
    color: white;
    font-size: 24px
  }
  .versionDiv{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .version{
    color: white;
    font-size: 14px;
    display: flex;
    justify-content: space-around;
  }
  .otherButton{
    display: flex;
    justify-content: flex-end;
    margin-top: 2%;
    margin-right: 1.5%;
  }
  .dashboardMain{
    height: 89%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
.dashTop, .logInfo{
  width: 98%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: .5%;
}
.echart-card{
  margin-bottom: .5%;
}
  .tunnelBoxCard,.uploadBoxCard {
    width: 49.8%;
    display: inline-block;
  }
  .tunnelTop{
    display: flex;
    justify-content: space-between;
  }
  .tunnelText,.objectText{
    width: 15%;
    height: 30px;
    border: 1px solid #7fcad4;
    box-shadow: inset 0px 0px 8px #7fcad4;
    display: flex;
    align-self:center;
    justify-content: center;
    padding-top: .3%;
  }

  .objectTop{
    display: flex;
    justify-content: space-between;
  }
  .tunnelstylebg{
    display: flex;
    margin: 0 auto;
    height: 75px
  }
  .tunnel{
    width: 100%;
    align-self:center;
    display: flex;
    justify-content: space-around;
    flex-wrap:wrap;
  }
  .echart-card{
    margin-top: .5%;
    width: 98%;
  }
  .echart-card /deep/ .el-card__body{
    padding: 0px;
  }
  .box-card /deep/ .el-card__body {
    padding: 5px;
  }
  .tunnelBoxCard /deep/ .el-card__body,.uploadBoxCard /deep/ .el-card__body{
    padding: 15px;
    padding-top: 10px;
  }
  /***修改开关颜色****/
  /deep/ .myswitch .el-switch__label.is-active {
    color: #409EFF;
  }
  /deep/ .myswitch .el-switch__label--left,
  /deep/ .myswitch .el-switch__label--right{
    color: white;
  }
  .noneDiv{
    display: none;
  }
  .tunnelDiv{
    display: inline-block;
  }
  .waringbutt{}
  .barbutt{
    background: #ff0003;
    color:#e4e4e4;
    margin-left: 10px;
    border-radius: 5px;
  }
  .barbutt:hover{
    background-color: rgba(255, 0, 3, 0.87);
    color:#e4e4e4;
    margin-left: 10px;
    border-radius: 5px;
  }
  .barbutt:focus{
    background-color: #ff0003;
    color:#e4e4e4;
    margin-left: 10px;
    border-radius: 5px;
  }
  .tunnelPanel {
    width: 150px;
    height: 30px;
    display: inline-block;
    border: 1px solid rgba(8, 220, 14, 0.5);
    background: linear-gradient(180deg, rgba(27, 220, 8, 0.3),rgba(0,180,220,0.1),rgba(0,180,220,0.1), rgba(44, 220, 4, 0.3));
    border-radius: .5rem;
    text-align: center;
    cursor: pointer;
    box-shadow: 2px 5px 10px rgba(0,180,220,.5);

  }
  .tunnelbad{
    width: 150px;
    height: 30px;
    color: white;
    background: #E94057;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #F27121, #E94057);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #F27121, #E94057); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border-radius: 5px;
    border: 1px solid red;
    box-shadow: 2px 5px 10px rgba(255,0,3,.5);
    display: inline-block;
    text-align: center;
    cursor: pointer;
  }
  .icon {
    width: 1em;
    height: 1em;
    font-size: 30px;
    cursor: pointer;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
  @font-face {
    font-family: 'mytext';
    src: url("../datav/img/huawenxinwei.ttf");
    /*src: url("../../assets/huawenxinwei.ttf");*/
    font-weight: normal;
    font-style: normal;
  }
</style>
