虚拟电厂页面

src/views/xndc/index.vue

@@ -2,6 +2,48 @@
   <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">
@@ -33,6 +75,7 @@
           <div class="barTitle">
             联络线信息
           </div>
+          <CenterMiddle/>
         </div>
         <div class="barBox">
           <div class="barTitle">
@@ -52,6 +95,7 @@
           <div class="barTitle">
             断面信息
           </div>
+          <CenterMiddle/>
         </div>
         <div class="barBox">
           <div class="barTitle">
@@ -61,12 +105,37 @@
         </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">
+          <el-radio label="r1">在线运行：日前调度</el-radio>
+          <el-radio label="r2">在线运行：实时调度</el-radio>
+          <el-radio label="r3">在线运行：完全</el-radio>
+          <el-radio label="s">停止运行</el-radio>
+        </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"
@@ -75,14 +144,126 @@ 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(){
+      this.status = this.selected
+      this.dialogShow = false
+    },
+    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');
+}
+
+.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%;
@@ -91,4 +272,109 @@ export default {
   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: -15%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.el-divider--horizontal{
+  /*margin: 0 0 8px;*/
+  margin: 0 auto;
+  background: 0 0;
+  border-top: 1px dashed #767676;
+  width: 90%;
+  text-align: center;
+}
+
+.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;
+}
+.el-button--info {
+  background: url(../../assets/images/dialog/b-cancel.png) no-repeat center !important;
+  color: white !important;
+  font-size: 20px;
+  font-weight: bold;
+  width: 145px;
+  height: 42px;
+  border-color: transparent;
+}
+
+/deep/ .el-radio__input.is-checked .el-radio__inner {
+  border-color: #40ffff;
+  background: #40ffff;
+}
+
+/deep/ .el-radio__inner {
+  border: 1px solid #595959;
+  border-radius: 100%;
+  width: 18px;
+  height: 18px;
+  background-color: transparent;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+/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>

src/views/xndc/modules/center-middle.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="table-wrapper">
+    <div class="table-box">
+<!--      <div class="title"-->
+<!--           style="font-family: AliMaMa;font-size: 30px;font-weight: 1000;text-align: left;height: 40px">-->
+<!--        <span style="position: absolute;top:-3px;left: 70px">普通负荷</span>-->
+<!--      </div>-->
+      <el-table
+          :cell-style="{border:0,color:'#fff'}"
+          :data="tableData"
+          :header-cell-style="{color:'#fff'}"
+          :row-style="{backgroundColor:'rgb(4,66,115,0.3)'}"
+          size="mini"
+          style="background: none"
+      >
+        <el-table-column
+            align="center"
+            label="节点名称"
+            prop="stationName"
+        >
+        </el-table-column>
+        <el-table-column
+            align="center"
+            label="预测值"
+            prop="capacity"
+        >
+        </el-table-column>
+        <el-table-column
+            align="center"
+            label="预测时间"
+            prop="time">
+        </el-table-column>
+        <el-table-column
+            align="center"
+            label="数据接收时间"
+            prop="date">
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      form: {
+        taskNumber: '',
+        date: '',
+        current: 1,
+        size: 10
+      },
+      tableData: []
+    }
+  },
+  methods: {},
+  mounted() {
+    this.tableData = [    {
+      "stationName": "国电龙源官村风电场",
+      "control": "是",
+      "capacity": "50",
+      "time": "00:00",
+      "status": "已下发",
+      "date": "2023-11-28"
+    },
+      {
+        "stationName": "国电龙源官村风电场",
+        "control": "是",
+        "capacity": "50",
+        "time": "00:10",
+        "status": "已下发",
+        "date": "2023-11-28"
+      },
+      {
+        "stationName": "国电龙源官村风电场",
+        "control": "是",
+        "capacity": "50",
+        "time": "00:20",
+        "status": "已下发",
+        "date": "2023-11-28"
+      },
+      {
+        "stationName": "国电龙源官村风电场",
+        "control": "是",
+        "capacity": "50",
+        "time": "00:30",
+        "status": "已下发",
+        "date": "2023-11-28"
+      },
+      {
+        "stationName": "国电龙源官村风电场",
+        "control": "是",
+        "capacity": "50",
+        "time": "00:40",
+        "status": "已下发",
+        "date": "2023-11-28"
+      }]
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+@font-face {
+  font-family: AliMaMa;//自定义字体名称
+  src: url("../../Articles/font/AlimamaDaoLiTi.ttf")
+}
+
+.table-wrapper {
+  //width: 1483px;
+  //padding-left: 20px;
+
+  .table-box {
+    //min-height: 600px;
+    margin-left: 6%;
+    margin-top: 5%;
+    width: 550px;
+    background-size: cover;
+  }
+
+  /deep/ .el-form-item__label {
+    color: #fff;
+    //font-size: 17px;
+  }
+
+  /deep/ .el-input__inner {
+    background-color: rgba(14, 73, 131);
+    border: 1px solid rgb(64, 153, 255);
+    //height: 34px;
+    //font-size: 17px;
+  }
+
+  /deep/ .el-table__header {
+    background: url(../../Articles/img/bg1.png);
+  }
+
+  ///deep/ .el-table th.el-table__cell.is-leaf {
+  //  border-bottom: none;
+  //}
+
+  /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
+    background-color: rgb(103, 118, 49) !important
+  }
+
+  /deep/ .el-col {
+    padding: 0;
+    display: inline-block;
+    position: relative;
+  }
+
+  /deep/ .el-col:nth-child(1) {
+    width: 19%;
+  }
+
+  /deep/ .el-col:nth-child(2) {
+    width: 22%;
+  }
+
+  /deep/ .el-col:nth-child(3) {
+    width: 19%;
+  }
+
+  /deep/ .el-col:nth-child(4) {
+    width: 19%;
+  }
+
+  /deep/ .el-col:nth-child(5) {
+    width: 15%;
+  }
+
+  /deep/ .el-input__inner:nth-child(1) {
+    //width: 176px;
+  }
+
+  /deep/ .el-input__inner:nth-child(2) {
+    //width: 176px;
+  }
+
+  /deep/ .el-input__inner:nth-child(2) {
+    //width: 126px;
+  }
+
+  /deep/ .el-input__inner:nth-child(2) {
+    //width: 175px;
+  }
+
+  /deep/ .el-icon-arrow-up {
+    transform: rotateZ(0deg);
+
+  }
+
+  /deep/ .el-icon-arrow-up:before {
+    content: url(../../Articles/img/xiala2.png);
+  }
+
+  /deep/ .el-input__prefix {
+    right: -60px;
+    padding-top: 3px;
+  }
+
+  /deep/ .el-icon-date:before {
+    content: url(../../Articles/img/riqi.png);
+  }
+
+  /deep/ .el-table__header tr {
+    background: url(../../Articles/img/bg1.png);
+    //height: 49px;
+  }
+
+  /deep/ .el-table th.el-table__cell {
+    background: none;
+  }
+
+  /deep/ .el-table__body {
+    //-webkit-border-vertical-spacing: 13px; // 垂直间距
+  }
+
+  /deep/ .el-form-item__content {
+    text-align: left;
+  }
+
+  /deep/ .el-table, .el-table__expanded-cell {
+    background-color: rgb(1, 40, 81);
+  }
+}
+</style>