日前调度计划页面

src/views/rqdd/rqdd.vue

@@ -1,9 +1,9 @@
 <template>
     <div class="app-container">
         <div class="topBanner">
-            <div class="topLogo">
+            <div class="topLogo1">
             </div>
-            <div style="position: absolute;right: 18%;top: 8px">
+            <div style="position: absolute;right: 19%;top: 8px">
                 <img alt="" onclick="window.open('/path#/xndc','_self')" src="./img/返回首页.png">
             </div>
             <div class="topButton1">
@@ -35,6 +35,15 @@
                     数据采集监控
                 </div>
             </div>
+
+            <img class="userHead" src="../../assets/images/default-user.png">
+            <div class="userName">
+                <div style="font-size: 20px">韩翔宇</div>
+                0000000000
+            </div>
+            <img class="split" src="../../assets/images/line-v-w.png">
+            <div class="userDept">某某某部门</div>
+
         </div>
         <div class="zs1">
             <div class="littleHeadWord">
@@ -46,6 +55,7 @@
             <div class="littleHeadWord">
                 <span>告警信息</span>
             </div>
+            <CenterMiddle3/>
         </div>
         <div class="ys1">
             <div class="littleHeadWord">
@@ -72,15 +82,54 @@
 import CenterMiddle2 from "@/views/rqdd/rqddjh.vue";
 import CenterMiddle from "@/views/rqdd/rqdddm.vue";
 import CenterMiddle1 from "@/views/rqdd/rqddllx.vue";
+import CenterMiddle3 from "@/views/rqdd/rqddgjxx.vue";
 import LeftTop from "@/views/rqdd/rqddxxzl.vue";
 
 export default {
     name: 'rqdd-name',
-    components: {LeftTop, CenterMiddle, CenterMiddle1, CenterMiddle2}
+    components: {LeftTop, CenterMiddle, CenterMiddle1, CenterMiddle2, CenterMiddle3}
 }
 </script>
 
 <style lang="css" scoped>
+.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;
+}
+
+.topLogo1 {
+    position: absolute;
+    width: 270px;
+    height: 66px;
+    left: 2%;
+    top: 0;
+    background: url(./img/标题.q.png) 8px 0 no-repeat;
+    background-size: 95% 95%;
+    z-index: auto;
+}
+
 .left33 {
     left: 33%;
 }

src/views/rqdd/rqddgjxx.vue

@@ -0,0 +1,219 @@
+<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:'rgba(255,255,255,1)'}"
+                    :data="tableData"
+                    :header-cell-style="{color:'#fff'}"
+                    :row-style="{backgroundColor:'rgb(4,66,115,0.3)'}"
+                    :show-header="false"
+                    style="background: none;margin-top: -1%;"
+            >
+                <el-table-column align="center" label="信息" prop="info">
+                    <template slot-scope="scope">
+                        <div style="height: 25px">
+                            <img v-if="scope.row.state === 1" :height="20"
+                                 :width="20"
+                                 alt=""
+                                 src="../../assets/images/warning1.png" style="position:absolute;top: 10px;">
+                            <img v-if="scope.row.state === 2" :height="20"
+                                 :width="20"
+                                 alt=""
+                                 src="../../assets/images/warning.png" style="position:absolute;top: 10px;">
+                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ scope.row.info }}
+                        </div>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    data() {
+        return {
+            form: {
+                taskNumber: '',
+                date: '',
+                current: 1,
+                size: 10
+            },
+            tableData: []
+        }
+    },
+    methods: {
+        handleRowClick(row, event, column) {
+            // 在这里处理行点击事件
+            console.log('行点击事件：', row, event, column);
+        }
+    },
+    mounted() {
+        this.tableData = [
+            {
+                "info": "轻微警告：联络线（高德线）接近正限",
+                "state": 1
+            }, {
+                "info": "轻微警告：联络线（高德线）接近正限",
+                "state": 1
+            },
+            {
+                "info": "严重警告：联络线（高德线）严重超越正限",
+                "state": 2
+            },
+            {
+                "info": "轻微警告：联络线（高德线）接近正限",
+                "state": 1
+            },
+            {
+                "info": "轻微警告：联络线（高德线）接近正限",
+                "state": 1
+            },
+        ]
+    }
+}
+</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: 9%;
+    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 tbody tr {
+    pointer-events: none;
+  }
+
+  /deep/ .el-table__header {
+    background: url(../Articles/img/bg1.png);
+  }
+
+  /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 .el-table__row {
+    background: url("./img/矩形866.4.png") no-repeat;
+  }
+
+  /deep/ .el-table__body {
+    //-webkit-border-vertical-spacing: 5px; // 垂直间距
+  }
+
+  /deep/ .el-form-item__content {
+    text-align: left;
+  }
+
+  /deep/ .el-table, .el-table__expanded-cell {
+    background-color: rgb(1, 40, 81);
+  }
+
+  /deep/ .el-table th.el-table__cell {
+    border: 0;
+
+  }
+
+  .el-table::before {
+    height: 0;
+  }
+
+  .el-table__row > td {
+    border: none;
+  }
+}
+</style>

src/views/rqdd/rqddxxzl.vue

@@ -88,8 +88,8 @@ export default {
   .table-box {
     //min-height: 600px;
     margin-left: 6%;
-    margin-top: 5%;
-    width: 550px;
+    margin-top: 8%;
+    width: 545px;
     background-size: cover;
   }