vpp/src/views/xndc/index.vue

<template>
  <div class="app-container">
    <div class="topBanner">
      <div class="topLogo"></div>
      <div class="topStatus b-disable" v-if="status === 'd'">
        <div class="textStatus">
          离 线 运 行
        </div>
      </div>
      <div class="topStatus b-running" v-if="status === 'r1'">
        <div class="textStatus">
          日 前 调 度
        </div>
      </div>
      <div class="topStatus b-running" v-if="status === 'r2'">
        <div class="textStatus">
          实 时 调 度
        </div>
      </div>
      <div class="topStatus b-running" v-if="status === 'r3'">
        <div class="textStatus">
          完 全 运 行
        </div>
      </div>
      <div class="topStatus b-stop" v-if="status === 's'">
        <div class="textStatus">
          停 止 运 行
        </div>
      </div>
      <div class="crumb left33">
        <div class="textCrumb">
          日前调度监控
        </div>
      </div>
      <div class="partition" style="left: 43%"/>
      <div class="crumb left44">
        <div class="textCrumb">
          实时调度监控
        </div>
      </div>
      <div class="partition" style="left: 54%"/>
      <div class="crumb-c" style="left: 55.1%">
        <div class="textCrumb-c" @click="showDialog()">
          虚拟电厂指令切换
        </div>
      </div>
    </div>
    <div class="main-container">
      <div class="main-card">
        <div class="barBox">
          <div class="barTitle">
            信息总览
          </div>
        </div>
        <div class="barBox1">
          <div class="barTitle">
            告警信息
          </div>
        </div>
        <div class="barBox">
          <div class="barTitle">
            风电发电功率
          </div>
          <RightTop/>
        </div>
      </div>
      <div class="main-card">
        <div class="barBox">
          <div class="barTitle">
            负荷用电功率
          </div>
          <LeftMiddle/>
        </div>
        <div class="barBox">
          <div class="barTitle">
            联络线信息
          </div>
          <CenterMiddle/>
        </div>
        <div class="barBox">
          <div class="barTitle">
            光伏发电功率
          </div>
          <RightMiddle/>
        </div>
      </div>
      <div class="main-card">
        <div class="barBox">
          <div class="barTitle">
            储能发电/用电功率
          </div>
          <LeftBottom/>
        </div>
        <div class="barBox">
          <div class="barTitle">
            断面信息
          </div>
          <CenterMiddle/>
        </div>
        <div class="barBox">
          <div class="barTitle">
            火电发电功率
          </div>
          <RightBottom/>
        </div>
      </div>
    </div>
    <!-- 指令切换弹框 -->
    <div class="dialogInfoBg" v-if="dialogShow">
      <!-- 弹框头 -->
      <div class="rightTitleTextBg">
        <div class="rightMainTitle">
          <span>{{ dialogTitle }}</span>
          <div @click="dialogShow = false"/>
        </div>
      </div>
      <!-- 弹框主体 -->
      <div style="height: 100px">
        <el-radio-group v-model="selected">
          <table id="radioTable">
            <tr>
              <td>
                <el-radio label="r1">在线运行：日前调度</el-radio>
              </td>
              <td>
                <el-radio label="r2">在线运行：实时调度</el-radio>
              </td>
            </tr>
            <tr>
              <td>
                <el-radio label="r3">在线运行：完全</el-radio>
              </td>
              <td>
                <el-radio label="s">停止运行</el-radio>
              </td>
            </tr>
          </table>
        </el-radio-group>
      </div>
      <el-divider></el-divider>
      <div style="position: absolute;margin-left: 135px;margin-top: 20px">
        <el-button type="primary" @click="confirm">确 认</el-button>
        <el-button type="info" @click="cancel">取 消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import LeftMiddle from "./modules/left-middle"
import LeftBottom from "./modules/left-bottom"
import CenterMiddle from "./modules/center-middle"
import RightTop from "./modules/right-top"
import RightMiddle from "./modules/right-middle"
import RightBottom from "./modules/right-bottom"

export default {
  components: {
    LeftMiddle,
    LeftBottom,
    CenterMiddle,
    RightTop,
    RightMiddle,
    RightBottom
  },
  data() {
    return {
      status: 'd',
      dialogTitle: '虚拟电厂指令切换',
      dialogShow: false,
      selected: null
    }
  },
  mounted() {
  },
  methods: {
    showDialog() {
      this.selected = null
      this.dialogShow = true
    },
    confirm() {
      if (this.selected) {
        this.$confirm('确认执行所选指令操作？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功'
          });
          this.status = this.selected
          this.dialogShow = false
        }).catch(() => {
        })
      }
    },
    cancel() {
      this.dialogShow = false
    }
  }
}
</script>

<style scoped>
.topStatus {
  position: absolute;
  left: 19.5%;
  width: 179px;
  height: 42px;
  display: flex;
  background-size: 100% 100%;
}

.b-disable {
  background-image: url('../../assets/images/b-disable.png')
}

.b-running {
  background-image: url('../../assets/images/b-running.png')
}

.b-stop {
  background-image: url('../../assets/images/b-stop.png')
}

.textStatus {
  display: flex;
  align-items: center;
  margin-left: 24%;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0 0 5px #fff, 0 1px 2px rgba(0, 0, 0, 1);
}

.crumb {
  position: absolute;
  top: 5px;
  width: 182px;
  height: 42px;
  display: flex;
  background-size: 100% 100%;
  background-image: url('../../assets/images/crumb.png');
}

#radioTable td {
  height: 50px;
  text-align: left;
}

.left33 {
  left: 33%;
}

.left44 {
  left: 44.2%;
}

.textCrumb {
  display: flex;
  /*align-items: center;*/
  margin-left: 20%;
  margin-top: 2.5%;
  font-size: 18px;
  font-weight: bold;
}

.crumb-c {
  position: absolute;
  top: 5px;
  width: 222px;
  height: 42px;
  display: flex;
  background-size: 100% 100%;
  background-image: url('../../assets/images/crumb_c.png');
}

.textCrumb-c {
  display: flex;
  /*align-items: center;*/
  margin-left: 18%;
  margin-top: 2.5%;
  font-size: 18px;
  font-weight: bold;
  color: aqua;
  cursor: pointer;
}

.partition {
  position: absolute;
  top: 7px;
  width: 17px;
  height: 35px;
  display: flex;
  background-size: 100% 100%;
  background-image: url('../../assets/images/partition.png');
}

.barBox1 {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: url(../../assets/images/bg/bgBar1.png) -2px -1px no-repeat;
  margin-right: 1%;
}

.dialogInfoBg {
  background: url(../../assets/images/dialog/bg.png) 100% no-repeat;
  background-size: 100% 100%;
  padding: 1%;
  width: 30%;
  height: 260px;
  position: absolute;
  top: 35%;
  left: 34%;
}

.rightTitleTextBg {
  height: 28%;
  background-size: 100% 100%;
  background: url(../../assets/images/dialog/t-line.png) no-repeat center;
}

.rightMainTitle {
  color: rgb(255, 255, 255);
  font-size: 18px;
  font-weight: 550;
  /*font-style: italic;*/
  text-shadow: 0 0 5px #fff, 0 1px 2px rgba(0, 0, 0, 1);
  margin-left: 36.5%;
  position: relative;
  top: 0;
  display: flex;
  justify-content: space-between;
}

/deep/ .el-divider--horizontal {
  margin: 20px auto 0;
  background: 0 0;
  border-top: 1px dashed #767676;
  width: 90%;
  text-align: center;
}

/deep/ .el-button--primary {
  background: url(../../assets/images/dialog/b-confirm.png) no-repeat center !important;
  color: white !important;
  font-size: 20px;
  font-weight: bold;
  width: 145px;
  height: 42px;
  border-color: transparent;
}

/deep/ .el-button--info {
  background: url(../../assets/images/dialog/b-cancel.png) no-repeat center !important;
  color: #FFFFFF !important;
  font-size: 20px;
  font-weight: bold;
  width: 145px;
  height: 42px;
  border-color: transparent;
}

/deep/ .el-radio__input.is-checked + .el-radio__label {
  color: #FFFFFF;
}

/deep/ .el-radio__input.is-checked .el-radio__inner {
  border-color: #40ffff;
  background: transparent;
}

/deep/ .el-radio__inner {
  border: 2px solid rgba(242, 242, 242, 0.45);
  border-radius: 100%;
  width: 18px;
  height: 18px;
  background-color: transparent;
  cursor: pointer;
  box-sizing: border-box;
}

/deep/ .el-radio__inner::after {
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background-color: #40ffff;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .15s ease-in;
}

/deep/ .el-radio__input {
  white-space: nowrap;
  cursor: pointer;
  outline: 0;
  line-height: 1;
  vertical-align: middle;
}

/deep/ .el-radio-button__inner {
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: left;
}

/deep/ .el-radio__label {
  padding-left: 10px;
  font-size: 20px;
  font-weight: 500;
  vertical-align: middle;
}

/deep/ .el-radio {
  color: #ffffff;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  outline: 0;
  margin-right: 30px;
}

</style>