ipfcst-znzx2/ipfcst/ipfcst-reportquery/src/main/frontend/views/datav/index.vue

<template>
  <div id="indexback">
    <!--<dv-border-box-12 style="min-height: calc(100vh - 30px);">-->
    <div style="width:100%;height: 10%;display: flex;justify-content: space-around;margin-bottom: 0.5%;">
      <el-row style="width: 100%">
        <el-col :span="6">
          <div style="text-align: center">
            <span class="elname"></span>
          </div>
        </el-col>
        <el-col :span="3.5">
          <div style="display: flex;justify-content: space-around;padding-top: 2.5%">
            <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>-->
              <!--<img src="./img/QRcode.png" width="40px" height="40px" style="cursor: pointer" @click="openQrcodeDrawer">-->
            </div>
          </div>
        </el-col>
        <el-col :span="7">
          <div style="width:80%;margin-left: 5%">
            <dv-border-box-7 :color="['#0c71d4']"
                             style="text-align:center;border-radius: 10px">
              <span style="color: #f4f4f5;font-size: 25px;font-family: 'mytext'">
                功率预测数据平台
              </span>
            </dv-border-box-7>
          </div>
        </el-col>
        <el-col :span="6">
          <div style="display: flex;justify-content: space-around;margin-top: 2.5%">
            <!--            <div>-->
            <!--              <audio muted ref="mySummaryAudio" :src="summaryAudioUrl"/>-->
            <!--              <el-button class="waringbutt" size="small" @click="openDraw">-->
            <!--                修改通道告警通知-->
            <!--              </el-button>-->
            <!--            </div>-->
            <!--            <el-tooltip effect="dark" placement="bottom">-->
            <!--              <div slot="content">{{isAbnormalInfo}}</div>-->
            <!--              <el-button :class="statusFlag=='true'? 'barbutt' : 'waringbutt'" size="small" @click="equipmentInfo">-->
            <!--                环境数据展示-->
            <!--              </el-button>-->
            <!--            </el-tooltip>-->

            <el-button class="waringbutt" size="small" @click="jump">
              后台数据展示
            </el-button>
            <!--            <el-tooltip placement="bottom" content="扫码小程序" effect="dark" v-show="showAbout">-->
            <!--              <el-button class="waringbutt" icon="el-icon-full-screen" circle size="small"-->
            <!--                         @click="appletsDialogVisible=true"/>-->
            <!--            </el-tooltip>-->
            <!--            <el-tooltip placement="bottom" content="关于我们" effect="dark" v-show="showAbout">-->
            <!--              <el-button class="waringbutt" icon="el-icon-s-custom" circle size="small"-->
            <!--                         @click="aboutusDialogVisible=true"/>-->
            <!--            </el-tooltip>-->
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="dashmain">
      <el-container style="padding-left: 15px;align-self:center;">
        <el-header style="width: 100%;height:auto">

          <div style="display: flex;justify-content: space-around;">
            <dv-border-box-10 style="width: 50%;height: 100%">
              <div class="tunnelBox">
                <div>
                  <dv-border-box-8 class="dv8TunnelStyle">
                    <span style="color: white;  font-size: 14px;">通道显示</span>
                  </dv-border-box-8>
                  <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 class="daysRemainDiv" v-if="daysRemain != undefined" v-show="show">
                    <span class="daysRemainSpan">服务到期剩余：<span :class="daysRemain<30?'warningText':'infoText'">{{daysRemain}}</span>  天</span>
                  </div>
                </div>

                <div class="tunnelstylebg">
                  <div class="tunnelstyle">
                    <div :class="this.analysisStatus === 0?'tunnelbad':'tunnelPanel'"
                         @click="toTunnelList(analysisList,'解析通道')">解析通道
                    </div>
                    <div :class="uploadList.length === 0?'noneDiv':'tunnelDiv'">
                      <div :class="this.uploadStatus === 0?'tunnelbad':'tunnelPanel'"
                           @click="toTunnelList(uploadList,'上报通道')">上报通道
                      </div>
                    </div>
                    <div :class="dataexchangeList.length === 0?'noneDiv':'tunnelDiv'">
                      <div :class="this.dataexchangeStatus === 0?'tunnelbad':'tunnelPanel'"
                           @click="toTunnelList(dataexchangeList,'接入通道')">接入通道
                      </div>
                    </div>
                    <div :class="callBackList.length === 0?'noneDiv':'tunnelDiv'">
                      <div :class="this.callBackStatus === 0?'tunnelbad':'tunnelPanel'"
                           @click="toTunnelList(callBackList,'回传通道')">回传通道
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!--<tunnelLog/>-->
            </dv-border-box-10>
            <dv-border-box-10 style="width: 50%;height: 100%;margin-left: 0.5%">
              <div>
                <dv-border-box-8 class="dv8ObjectStyle">
                  <span style="color: white;  font-size: 14px;">上报信息</span>
                </dv-border-box-8>
                <div class="objectIcon">
                  <svg class="icon" aria-hidden="true" @click="objectLogFlag = true">
                    <use xlink:href="#icon-tuisongtongdao"></use>
                  </svg>
                </div>
                <!--对时时间-->
                <div class="timeDiv">
                  <span>{{date}}</span>
                </div>
              </div>
              <uploadObject/>
            </dv-border-box-10>
          </div>
        </el-header>
        <el-main style="width: 100%;height:auto">
          <dv-border-box-10 style="width: 100%;height: 100%">
            <bottomEcharts/>
          </dv-border-box-10>
        </el-main>
      </el-container>
    </div>
    <!--二维码页面-->
    <div class="drawbg">
      <el-drawer
        title="二维码扫描"
        :visible.sync="qrcodeDrawer"
        :with-header="false"
        :modal-append-to-body="false"
        :wrapperClosable="false"
        direction="ttb"
        size="80%"
      >
        <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="color: #a0c8b3;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;color: #e4e4e4;background-color: #061f3e"
                       @click="saveP">
              提交
            </el-button>
          </div>
        </div>
      </el-drawer>
    </div>
    <!--子通道-->
    <div v-show="onshow" class="tunnelbg">
      <tunnel :list="tunnelList" @onTunnelChange="onTunnelChange"/>
    </div>
    <!--环境数据-->
    <div class="dashhj">
      <div v-if="filterbg" ref="filterbg" class="filterbg">
        <transition-group name="test">
          <div v-if="topup" ref="pop" :key="1" class="topup" :class="this.topup===true?'topupter':'topup'">
            <a ref="topupClose" class="topupClose" @click="close"/>
            <div ref="echartdiv">
              <environment :key="entimer"/>
            </div>
          </div>
        </transition-group>
      </div>
    </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%"
      >
        <leftcharts 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%"
      >
        <UploadObjectLog v-if="objectLogFlag"/>
      </el-dialog>
    </div>
    <!--</dv-border-box-12>-->
  </div>
</template>

<script>
  import "./js/iconfont.js"
  import qrcode from './qrcode'
  import tunnelLog from './Leftcharts'
  import uploadObject from './uploadObject'
  import bottomEcharts from './bottomEcharts'
  import tunnel from './tunnel'
  import environment from './environment'
  import Leftcharts from "./Leftcharts";
  import UploadObjectLog from "./uploadObjectLog";
  import {mapGetters} from "vuex";

  export default {
    components: {
      UploadObjectLog,
      Leftcharts,
      uploadObject,
      tunnelLog,
      bottomEcharts,
      tunnel,
      qrcode,
      environment
    },
    data() {
      return {
        daysRemain: '0',// 合同剩余天数
        showAbout: false,
        date: '',//时间
        data: '',
        drawer: false,
        qrcodeDrawer: false,
        filterbg: false,
        topup: false,
        onshow: false,
        backshow: false,
        aboutusDialogVisible: false,
        appletsDialogVisible: false,
        time: '',
        // sign: '0',
        value15: '0',
        // elName: '',
        eqId: '',
        timer: '',
        qrtimer: '',
        entimer: '',
        test: '',
        show:false,
        equipmentInfoList: [],
        equipmentDataTypeList: [],
        summaryAudioUrl: '/audio/gjy.mp3', // 音频地址，调用接口获取
        summaryAudioStatus: 'pause', // pause --当前停止播放状态;play--当前播放状态
        summaryAudioDuration: 0, // 音频时长
        tunnelList: {
          flag: 0,
          value: [],
          showType: 1
        },
        consoleVersion: '',
        monitorVersion: '',
        reportVersion: '',
        libVersion: '',
        valueList: [],
        dataList: [],
        /*通道*/
        analysisList: [],
        callBackList: [],
        dataexchangeList: [],
        uploadList: [],
        analysisStatus: 1,
        callBackStatus: 1,
        dataexchangeStatus: 1,
        uploadStatus: 1,
        channelAlarmList: [],
        updateList: [],
        initgetSysStatusList: '',
        flagNum: 1,
        url: '',
        statusFlag: 'false',
        isAbnormalInfo: '',
        //通道、上报对象日志标识
        tunnelLogFlag: false,
        objectLogFlag: false,
        //时间的定时
        nowTimer: null,
        daysRemainTimer: null
      }
    },
    destroyed() {
      clearInterval(this.test) // 关闭循环
      this.test = null
      clearInterval(this.nowTimer) // 关闭循环
      this.nowTimer = null
      clearInterval(this.daysRemainTimer) // 关闭循环
      this.daysRemainTimer = null
    },
    mounted() {
      this.getServiceExpirationDays()
      this.daysRemainTimer = setInterval(this.getServiceExpirationDays, 1000 * 60 * 60)
      this.nowTime()
      this.nowTimer = setInterval(this.nowTime, 1000 * 60)
      // this.queryXD()
      // this.getVersion()
      this.init()
      this.getEl()
      this.test = setInterval(this.init, 60 * 1000)

    },
    computed: {
      ...mapGetters(["gs"])
    },
    methods: {
      // 获取服务到期时间 定时一小时一次
      getServiceExpirationDays() {
        this.$axios.get('/getExpirationTime').then(res => {
          if(res.data == null){
            this.show = false
          }else {
            this.show = true
            this.daysRemain = res.data
          }
        }).catch(err => {
          console.log('获取服务到期时间异常：' + err)
        })
      },
      changeConsole() {
        var href = window.location.href
        window.location.href = 'https://' + href.split("//")[1].split(":")[0] + ':9001'
      },
      jump() {
        this.$router.push('/realTimeQuery/realPowerQuery')
      },
      init() {
        var gs = localStorage.getItem("gs")
        if (gs != "2") {
          this.showAbout = true
        }
        Promise.all([this.getChannelStatus()]).then((res) => {
          this.analysisList = res[0].analysisList
          this.callBackList = res[0].callBackList
          this.dataexchangeList = res[0].dataexchangeList
          this.uploadList = res[0].uploadList
          // this.channelAlarmList = res[1]
          var data = []
          // var valueList = []
          if (this.analysisList.length > 0) {
            for (var i = 0; i < this.analysisList.length; i++) {
              if (this.analysisList[i].channelStatus === '0') {
                this.analysisStatus = 0
                break
              }
              this.analysisStatus = 1
            }
          }
          if (this.uploadList.length > 0) {
            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.uploadList[i].channelStatus === '0') {
                this.uploadStatus = 0
                break
              }
              this.uploadStatus = 1
            }
          }

          if (this.callBackList.length > 0) {
            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.callBackList[i].channelStatus === '0') {
                this.callBackStatus = 0
                break
              }
              this.callBackStatus = 1
            }
          }
          if (this.dataexchangeList.length > 0) {
            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 (this.dataexchangeList[i].channelStatus === '0') {
                this.dataexchangeStatus = 0
                break
              }
              this.dataexchangeStatus = 1
            }
          }

          // for (var i = 0; i < this.channelAlarmList.length; i++) {
          //   for (var j = 0; j < data.length; j++) {
          //     if (data[j].id === this.channelAlarmList[i].channelId) {
          //       valueList.push(data[j].key)
          //     }
          //   }
          // }
          this.dataList = data
          // this.valueList = valueList
          // this.getLeftChannel()
          // this.getEnvirStatus()
        })
      },
      // 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
      //       }
      //     }
      //   }
      // },
      /*父给子通道信息*/
      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
          }
        }
      },
      getEnvirStatus() {
        this.$axios.get('/dashboard/getIsAbnormal').then(res => {
          this.statusFlag = res.data.isAbnormalData
          this.isAbnormalInfo = res.data.isAbnormalInfo

        }).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)
          })
        })
      },
      getChannelAlarmInfo() {
        const a = this.$axios
        return new Promise(function (resolve, reject) {
          a.get('/dashboard/getChannelAlarmInfo').then(res => {
            resolve(res.data)
          })
        })
      },
      saveP() {
        this.$axios.post('/dashboard/saveAllChannelAlarmInfo', this.updateList).then(res => {
          this.getLeftChannel()
        })
      },
      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
          })
        }
      },
      getEl() {
        this.$axios.get('/electricField/').then(res => {
          this.elName = res.data.name
        }).catch(error => {
          console.error('获取场站名称异常：' + error)
        })
      },
      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
        })
      },
      // 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)
      //   })
      // },
      // 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)
      //   })
      // },
      equipmentInfo() {
        this.filterbg = true
        this.topup = true
        this.$refs.filterbg.style.display = ''
        this.$refs.topupClose.style.display = ''
        /*this.entimer = new Date().getTime()*/
        this.$refs.echartdiv.style.display = ''
      },
      close() {
        this.$refs.echartdiv.style.display = 'none'
        this.topup = false
        this.$refs.topupClose.style.display = 'none'
        setTimeout(this.closefile, 400)
      },
      closefile() {
        this.$refs.filterbg.style.display = 'none'
      },
      // childValue(val) {
      //   this.onshow = val.status
      //   this.tunnelList = {
      //     flag: this.flagNum,
      //     value: val.value,
      //     showType:val.showType
      //   }
      // },
      onTunnelChange(val) {
        this.onshow = val
      },
      openDraw() {
        this.drawer = 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'
        }
      },
      /*对时*/
      nowTime() {
        this.$axios.get('/dashboard/getServerTime').then(res => {
          var today = new Date(res.data)
          var yyyy = today.getFullYear()// 通过日期对象的getFullYear()方法返回年
          var MM = today.getMonth() + 1 < 10 ? '0' + (today.getMonth() + 1) : today.getMonth() + 1// 通过日期对象的getMonth()方法返回年
          var dd = today.getDate() < 10 ? '0' + today.getDate() : today.getDate()// 通过日期对象的getDate()方法返回年
          var hour = today.getHours() < 10 ? '0' + today.getHours() : today.getHours()
          var minute = today.getMinutes() < 10 ? '0' + today.getMinutes() : today.getMinutes()
          // var second = today.getSeconds()<10?'0'+today.getSeconds():today.getSeconds()
          var day // 用于保存星期（getDay()方法得到星期编号）
          if (today.getDay() === 0) day = '星期日 '
          if (today.getDay() === 1) day = '星期一 '
          if (today.getDay() === 2) day = '星期二 '
          if (today.getDay() === 3) day = '星期三 '
          if (today.getDay() === 4) day = '星期四 '
          if (today.getDay() === 5) day = '星期五 '
          if (today.getDay() === 6) day = '星期六 '
          this.date = yyyy + '-' + MM + '-' + dd + '  ' + hour + ':' + minute + '   ' + day
        })

      }
    }
  }
</script>

<style>
  .timeDiv {
    display: inline-block;
    float: right;
    margin-top: 1.2%;
    margin-right: 1.2%;
    color: white;
    /*font-size: 18px;*/
  }

  /****服务到期时间时间****/
  .daysRemainDiv {
    float: right;
    line-height: 29px;
    margin-top: 1%;
    margin-right: 2%
  }

  .daysRemainSpan {
    color: #fff;
    font-size: 20px;
    font-weight: bolder
  }
.warningText{
  color: #ff4f00;
}
.infoText{
  color: #fff;
}
  /*********/
  #indexback {
    min-height: calc(105vh - 50px);
    position: relative;
    z-index: 0;
    background-image: url("../dashboard/img/pageBg.png");
    background-size: cover;
    padding-top: .5%;
  }

  .dashmain {
    width: 100%;
    height: 90%;
    /*margin-top: 1%;*/
    display: flex;
  }

  .elname {
    /*width: 300px;*/
    color: #f4f4f5;
    font-size: 30px;
    font-family: 'mytext';
    padding-top: 1.5%;
    display: inline-block;
  }

  .waringbutt {
    background-color: #061f3e;
    color: #e4e4e4;
    margin-left: 10px;
    border-radius: 5px;
  }

  .waringbutt:hover {
    background-color: rgba(6, 31, 62, 0.42);
    color: #e4e4e4;
    margin-left: 10px;
    border-radius: 5px;
  }

  .waringbutt:focus {
    background-color: #061f3e;
    color: #e4e4e4;
    margin-left: 10px;
    border-radius: 5px;
  }

  .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;
  }

  .dashmain .el-main {
    display: block;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    overflow: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px;
    padding-top: 10px;
  }

  .context {
    text-align: justify;
    text-justify: inter-ideograph;
    text-indent: 2em;
    font-size: 13px;
    width: 300px;
    top: 5000px;
    line-height: 20px;
  }

  .mytitle {
    width: 100px;
    height: 30px;
    line-height: 30px;
    display: flex;
    justify-content: center;
    color: #a0c8b3;
    background: #00559a;
    cursor: pointer;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    position: fixed;
    right: 0.3%;
    top: 7.5%;
    z-index: 2000;
  }

  .gydialog .el-dialog {
    background: #061f3e;
    /*border: 1px solid #6e6e6e;*/
    box-shadow: inset 0 0 0 2px rgba(5, 210, 248, 1);
  }

  .gydialog .el-dialog__body {
    padding: 0px 20px 10px;
    color: #29a0c8;
    font-size: 14px;
    word-break: break-all;
  }

  .gydialog .el-dialog__header {
    padding: 10px 20px 0px;
  }

  .gydialog .el-dialog__title {
    line-height: 24px;
    font-size: 18px;
    color: #29a0c8;
  }

  .logInfo .el-dialog {
    background: #061f3e;
    /*border: 1px solid #6e6e6e;*/
    box-shadow: inset 0 0 0 2px rgba(5, 210, 248, 1);
  }

  .logInfo .el-dialog__body {
    padding: 0px 20px 10px;
    color: #29a0c8;
    font-size: 14px;
    word-break: break-all;
  }

  .logInfo .el-dialog__header {
    padding: 10px 20px 0px;
  }

  .logInfo .el-dialog__title {
    line-height: 24px;
    font-size: 18px;
    color: white;
  }

  .applets {
    width: 100px;
    height: 30px;
    line-height: 30px;
    display: flex;
    justify-content: center;
    color: #a0c8b3;
    background: #00559a;
    cursor: pointer;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    position: fixed;
    right: 0.3%;
    top: 3.5%;
    z-index: 1000;
  }

  .drawclose {
    display: block;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: url(./img/s_ico3.png);
    background-size: 100% 100%;
    position: absolute;
    top: 5px;
    right: 12px;
    z-index: 1000;
  }

  .echartdiv .el-input__inner {
    -webkit-appearance: none;
    background-color: transparent;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #2fa0a3;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #2fa0a3;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    width: 100%;
  }

  .dashhj .filterbg >>> input {
    background: #001528;
    border: 1px solid #41fafd;
    color: white;
  }

  .dashhj .filterbg {
    width: 100%;
    height: 100%;
    background: rgba(30, 182, 254, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 998;
    /*   display: none;*/
  }

  .tunnelbg {
    width: 100%;
    height: 100%;
    background: rgba(28, 144, 203, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 998;
  }

  .dashhj .topup {
    width: 97%;
    height: 97%;
    background: #061f3e;
    position: relative;
    z-index: 999;
    border-radius: 8px;
    margin: 10% auto;
    margin-top: 2%;
    animation: closemove 0.4s;
  }

  .dashhj .topupter {
    width: 97%;
    height: 97%;
    background: #061f3e;
    position: relative;
    z-index: 999;
    border-radius: 8px;
    margin: 0 auto;
    margin-top: 2%;
    animation: mymove 0.4s;
  }

  .dashhj .topup .topupClose {
    display: block;
    width: 44px;
    height: 44px;
    background: url(./img/s_ico3.png);
    background-size: 100% 100%;
    position: absolute;
    top: -22px;
    right: -22px;
    z-index: 1000;
  }

  .dashhj .topup .topupClose:hover {
    transform: rotate(90deg);
  }

  .myswitch {
    width: 200px;
    padding-top: 3%
  }

  .myswitch .el-switch__label {
    -webkit-transition: .2s;
    transition: .2s;
    height: 20px;
    font-size: 14px;
    font-weight: 500;
    vertical-align: middle;
    color: #829293;
  }

  .myswitch .el-switch__label.is-active {
    color: #07b296;
    /*color: #409EFF;*/
  }

  .waringdraw {
    width: 100%;
    height: 100%;
    background-color: #061f3e;
  }

  .waringdraw .el-transfer {
    margin-top: 0px;
  }

  .waringdraw .el-transfer__buttons button {
    background-color: #061f3e;
    border-color: white;
    color: #e4e4e4;
  }

  .waringdraw .el-transfer-panel {
    border: 1px solid #2a3058;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(6, 31, 62, 0.79);
    display: inline-block;
    vertical-align: middle;
    width: 300px;
    max-height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
  }

  .waringdraw .el-transfer-panel .el-transfer-panel__header {
    height: 40px;
    line-height: 40px;
    background: #344869;
    margin: 0;
    padding-left: 15px;
    border-bottom: 1px solid #EBEEF5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #a0c8b3;
  }

  .waringdraw .el-transfer-panel__item.el-checkbox {
    color: #65c7c8;
  }

  .waringdraw .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label {
    font-size: 16px;
    color: #a0c8b3;
    font-weight: 400;
  }

  .noneDiv {
    display: none;
  }

  .tunnelDiv {
    display: inline-block;
  }

  .tunnelBox {
    padding-bottom: 1.5%;
  }

  .dv8TunnelStyle {
    width: 120px;
    line-height: 30px;
    text-align: center;
    margin-left: 1%;
    margin-top: 1%;
    display: inline-block
  }

  .dv8ObjectStyle {
    display: inline-block;
    width: 120px;
    line-height: 30px;
    text-align: center;
    margin-left: 1%;
    margin-top: 1%;
  }

  .tunnelIcon {
    display: inline-block;
    float: right;
    margin-top: 1%;
    margin-right: .5%
  }

  .objectIcon {
    display: inline-block;
    float: right;
    margin-top: 1%;
    margin-right: .5%
  }

  .tunnelstylebg {
    display: flex;
    margin: 0 auto;
    height: 75px
  }

  .tunnelstyle {
    width: 100%;
    align-self: center;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  /*.tunnelstyle{*/
  /*width: 100%;*/
  /*display: flex;*/
  /*justify-content:space-around;*/
  /*margin-top: 1%;*/
  /*height: 75px*/
  /*}*/
  .tunnelPanel {
    display: inline-block;
    cursor: pointer;
    text-align: center;
    height: 30px;
    width: 140px;
    color: #adffc8;
    font-size: 16px;
    padding-top: 0.2%;
    margin-top: 0.1%;
    border-radius: .5rem;
    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));
    box-shadow: 0 0 2rem rgba(0, 180, 220, .1) inset;
    overflow: hidden;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-name: breathe;
    -webkit-animation-duration: 1500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
  }

  .tunnelbad {
    background: linear-gradient(to right, #ffb40d, #ff420d, #df0808);
    display: inline-block;
    cursor: pointer;
    text-align: center;
    height: 30px;
    width: 140px;
    color: #adffc8;
    font-size: 16px;
    /*padding-top: 0.2%;*/
    /*margin-top: 0.1%;*/
    border-radius: .5rem;
    border: 1px solid rgba(0, 180, 220, 0.5);
    box-shadow: 0 0 2rem rgba(0, 180, 220, .1) inset;
    overflow: hidden;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-name: tunnelbad;
    -webkit-animation-duration: 1500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
  }

  @-webkit-keyframes breathe {
    0% {
      opacity: 1;
      box-shadow: 0 1px 2px rgba(9, 223, 37, 0.4), 0 1px 1px rgba(0, 147, 223, 0.1) inset;
    }
    50% {
      opacity: 0.5;
      box-shadow: 0 1px 2px rgba(120, 223, 17, 0.4), 0 1px 1px rgba(0, 147, 223, 0.1) inset;
    }
    100% {
      opacity: 1;
      border: 1px solid rgba(145, 235, 143, 0.7);
      box-shadow: 0 1px 30px #57df00, 0 1px 20px #34df3d inset;
    }
  }

  @-webkit-keyframes tunnelbad {
    0% {
      opacity: 1;
      box-shadow: 0 1px 2px rgba(223, 55, 52, 0.4), 0 1px 1px rgba(0, 147, 223, 0.1) inset;
    }
    50% {
      opacity: 0.7;
      box-shadow: 0 1px 2px rgba(223, 0, 7, 0.58), 0 1px 1px rgba(0, 147, 223, 0.1) inset;
    }
    100% {
      opacity: 1;
      border: 1px solid rgba(59, 235, 235, 0.7);
      box-shadow: 0 1px 30px #df3734, 0 1px 20px #ff420d inset;
    }
  }

  /* 滚动条的宽度*/
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  /*滚动条的滑块*/
  ::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }

  @keyframes mymove {
    0% {
      width: 0px;
      height: 700px;
    }
    100% {
      width: 80%;
      height: 700px;
    }
  }

  @keyframes closemove {
    100% {
      width: 0px;
      height: 700px;
    }
    0% {
      width: 80%;
      height: 700px;
    }
  }

  @keyframes animate {
    0%, 50%, 100% {
      transform: rotate(0deg) scale(1);
    }
    25% {
      transform: rotate(4deg) scale(0.98);
    }
    75% {
      transform: rotate(-4deg) scale(1.02);
    }
  }

  .qrcodeDiv {
    padding: 1.5%;
    padding-right: 5%
  }

  .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("./img/huawenxinwei.ttf");
    font-weight: normal;
    font-style: normal;
  }

  @media screen and (max-device-width: 960px) {
    .elname {
      font-size: 14px;
    }

    .title-gl {
      font-size: 14px;
    }
  }
</style>