VPP/vpp-ui/src/views/vpp/xndc/index.vue

<template>
  <div class="app-container">
    <div class="topBanner">
      <div class="topLogo"></div>
      <div v-if="status == '4'" class="topStatus b-disable">
        <div class="textStatus">
          离 线 运 行
        </div>
      </div>
      <div v-if="status == '1'" class="topStatus b-running">
        <div class="textStatus">
          日 前 调 度
        </div>
      </div>
      <div v-if="status == '2'" class="topStatus b-running">
        <div class="textStatus">
          实 时 调 度
        </div>
      </div>
      <div v-if="status == '3'" class="topStatus b-running">
        <div class="textStatus">
          完 全 运 行
        </div>
      </div>
      <div v-if="status == '0'" class="topStatus b-stop">
        <div class="textStatus">
          停 止 运 行
        </div>
      </div>
      <div class="crumb left33">
        <div class="textCrumb" onclick="window.open('/#/rqdd','_self')">
          日前调度监控
        </div>
      </div>
      <div class="partition" style="left: 43%"/>
      <div class="crumb left44">
        <div class="textCrumb" onclick="window.open('/#/ssddjk','_self')">
          实时调度监控
        </div>
      </div>
      <div class="partition" style="left: 54%"/>
      <div class="crumb left55">
        <div class="textCrumb1" onclick="window.open('/#/xtpz','_self')">
          系统配置与日志
        </div>
      </div>
      <div class="partition" style="left: 65%"/>
      <div class="crumb-c" style="left: 66%">
        <div class="textCrumb-c" @click="showDialog()">
          虚拟电厂指令切换
        </div>
      </div>
      <div style="position: absolute;right: 19%;top: 8px">
        <img alt="" src="../ssddjk/img/返回首页.png" @click="logout">
      </div>
    </div>
    <div class="main-container">
      <div class="main-card">
        <div class="barBox">
          <div class="barTitle">
            信息总览
          </div>
          <LeftTop/>
        </div>
        <div class="barBox1">
          <div class="barTitle">
            告警信息
          </div>
          <CenterTop/>
        </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>
          <CenterBottom/>
        </div>
        <div class="barBox">
          <div class="barTitle">
            火电发电功率
          </div>
          <RightBottom/>
        </div>
      </div>
    </div>
    <!-- 指令切换弹框 -->
    <div v-if="dialogShow" class="dialogInfoBg">
      <!-- 弹框头 -->
      <div class="rightTitleTextBg">
        <div class="rightMainTitle">
          <span>{{ dialogTitle }}</span>
          <div @click="dialogShow = false"/>
        </div>
      </div>
      <!-- 弹框主体 -->
      <div style="height: 150px">
        <el-radio-group v-model="selected">
          <table id="radioTable">
            <tr v-if="status=='4'">
              <td>
                <el-radio label="1">在线运行：日前调度</el-radio>
              </td>
              <td>
                <el-radio label="2">在线运行：实时调度</el-radio>
              </td>
            </tr>
            <tr v-if="status=='4'">
              <td>
                <el-radio label="3">在线运行：完全</el-radio>
              </td>
              <td>
                <el-radio label="0">停止运行</el-radio>
              </td>
            </tr>
            <tr v-if="status=='4'">
              <td>
                <el-radio label="4">离线状态</el-radio>
              </td>
            </tr>
            <tr v-if="status=='1' || status=='2'">
              <td>
                <el-radio label="4">离线状态</el-radio>
              </td>
              <td>
                <el-radio label="3">在线运行：完全</el-radio>
              </td>
            </tr>
            <tr v-if="status=='3'">
              <td>
                <el-radio label="4">离线状态</el-radio>
              </td>
            </tr>
            <tr v-if="status=='0'">
              <td>
                <el-radio label="4">离线状态</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 LeftTop from "./modules/left-top"
import LeftMiddle from "./modules/left-middle"
import LeftBottom from "./modules/left-bottom"
import CenterTop from "./modules/center-top"
import CenterMiddle from "./modules/center-middle"
import CenterBottom from "./modules/center-bottom"
import RightTop from "./modules/right-top"
import RightMiddle from "./modules/right-middle"
import RightBottom from "./modules/right-bottom"
import {addCommand, listCommandRunType} from "@/api/vpp/type";

export default {
  components: {
    LeftTop,
    LeftMiddle,
    LeftBottom,
    CenterTop,
    CenterMiddle,
    CenterBottom,
    RightTop,
    RightMiddle,
    RightBottom,
  },
  data() {
    return {
      status: '',
      dialogTitle: '虚拟电厂指令切换',
      dialogShow: false,
      selected: null,
      table: {
        status: ''
      }
    }
  },
  /*created() {
    this.listCommandRunType()
  },*/
  mounted() {
    this.listCommandRunType()
  },
  methods: {
    listCommandRunType() {
      listCommandRunType().then(response => {
        if (response.rows.length > 0) {
          this.status = response.rows[0].status
        }
      })
    },
    showDialog() {
      this.selected = null
      this.dialogShow = true
    },
    confirm() {
      if (this.selected) {
        this.$confirm('确认执行所选指令操作？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.table.status = this.selected
          addCommand(this.table).then(response => {
            this.$message({
              type: 'success',
              message: '操作成功'
            });
            this.listCommandRunType()
            this.dialogShow = false
          });

        }).catch(() => {
        })
      }
    },
    cancel() {
      this.dialogShow = false
    },
    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/index';
        })
      }).catch(() => {
      });
    }
  }
}
</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/vpp/images/b-disable.png')
}

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

.b-stop {
  background-image: url('../../../assets/vpp/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/vpp/images/crumb.png');
}

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

.left33 {
  left: 33%;
}

.left44 {
  left: 44%;
}

.left55 {
  left: 55%;
}

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

.textCrumb1 {
  display: flex;
  /*align-items: center;*/
  margin-left: 16.5%;
  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/vpp/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;
}

.userHead {
  position: absolute;
  right: 15.5%;
  margin-top: 0.2%;
}

.userName {
  text-align: left;
  position: absolute;
  right: 10%;
  margin-top: 0.2%;
}

.split {
  position: absolute;
  right: 9.2%;
  margin-top: 0.2%;
}

.userDept {
  text-align: left;
  position: absolute;
  right: 2%;
  margin-top: 0.5%;
  font-size: 22px;
}

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

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

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

.rightTitleTextBg {
  height: 28%;
  background-size: 100% 100%;
  background: url(../../../assets/vpp/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/vpp/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/vpp/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;
}

/deep/ .el-radio-group {
  margin-left: calc(6vh);

}

</style>