提交

src/router/index.js

@@ -18,6 +18,7 @@ import Fdjhcn from '@/views/fdjh/cn/index.vue'
 import Jkcx from '@/views/xtrz/jkcx/index.vue'
 import pzb from '@/views/xtpzyrz/xtpz/xtpz.vue'
 import Rqdd from '../views/rqdd/rqdd.vue'
+import ssddjk from '../views/ssddjk/ssdd.vue'
 import fdjhnav from '../views/fdjh/LeftNav.vue'
 import ssddnav from '../views/ssdd/LeftNav.vue'
 import xtpznav from '../views/xtpzyrz/LeftNav.vue'
@@ -122,6 +123,11 @@ const routes = [
         component: Rqdd
     },
     {
+        path: '/ssddjk',
+        name: '实时调度监控',
+        component: ssddjk
+    },
+    {
         path: '/dailyPlanning',
         component: () => import('@/views/xndc/index'),
         hidden: true

src/views/rqdd/rqdddm.vue

@@ -195,7 +195,6 @@ export default {
   }
 
 
-
   /deep/ .el-icon-arrow-up {
     transform: rotateZ(0deg);
 
@@ -244,7 +243,7 @@ export default {
   }
 
   /deep/ .el-table__body {
-    //-webkit-border-vertical-spacing: 13px; // 垂直间距
+    -webkit-border-vertical-spacing: 13px; // 垂直间距
   }
 
   /deep/ .el-form-item__content {

src/views/rqdd/rqddllx.vue

@@ -8,6 +8,7 @@
                     :row-style="{background:'none'}"
                     class="mytable"
                     size="mini"
+                    style="font-size: 15px"
             >
                 <el-table-column align="center" label="名称" prop="name" width="170px"></el-table-column>
                 <el-table-column align="center" label="状态" prop="state">
@@ -101,14 +102,6 @@ export default {
                 "upper": "550",
                 "range": "1"
             },
-            {
-                "name": "高德线",
-                "state": "1",
-                "ap": "500",
-                "lower": "450",
-                "upper": "550",
-                "range": "1"
-            },
         ]
     }
 }
@@ -161,9 +154,9 @@ export default {
     //font-size: 17px;
   }
 
-/*  /deep/ .el-table__header {
-    background: url(../Articles/img/bg1.png);
-  }*/
+  /*  /deep/ .el-table__header {
+      background: url(../Articles/img/bg1.png);
+    }*/
 
   ///deep/ .el-table th.el-table__cell.is-leaf {
   //  border-bottom: none;
@@ -253,8 +246,6 @@ export default {
   }
 
 
-
-
   /deep/ .el-table {
     background: url(../Articles/img/组2460.png) no-repeat;
     background-position-x: 30%;

src/views/ssddjk/ssdd.vue

@@ -0,0 +1,262 @@
+<template>
+    <div class="app-container">
+        <div class="topBanner">
+            <div class="topLogo1">
+            </div>
+            <div style="position: absolute;right: 19%;top: 8px">
+                <img alt="" onclick="window.open('/path#/xndc','_self')" src="./img/返回首页.png">
+            </div>
+            <div class="topButton1">
+                <div class="textStatus">
+                    <span>离 线 运 行</span>
+                </div>
+            </div>
+            <div class="partition" style="left: 43.2%"/>
+            <div class="crumb left33">
+                <div class="textCrumb1" onclick="window.open('/path#/ssdd','_self')">
+                    发电端计划监控
+                </div>
+            </div>
+            <div class="partition" style="left: 54.2%"/>
+            <div class="crumb left55">
+                <div class="textCrumb" onclick="window.open('/path#/ssdd','_self')">
+                    约束条件监控
+                </div>
+            </div>
+            <div class="crumb left66">
+                <div class="textCrumb" onclick="window.open('/path#/ssdd','_self')">
+                    数据采集监控
+                </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">
+                <span>信息总览</span>
+            </div>
+            <LeftTop/>
+        </div>
+        <div class="zs2">
+            <div class="littleHeadWord">
+                <span>告警信息</span>
+            </div>
+            <CenterMiddle3/>
+        </div>
+        <div class="ys1">
+            <div class="littleHeadWord">
+                <span>联络线信息</span>
+            </div>
+            <CenterMiddle1/>
+        </div>
+        <div class="yx1">
+            <div class="littleHeadWord">
+                <span>断面信息</span>
+            </div>
+            <CenterMiddle/>
+        </div>
+        <div class="zx">
+            <div class="littleHeadWord">
+                <span>日前调度计划</span>
+            </div>
+            <CenterMiddle2/>
+        </div>
+    </div>
+</template>
+
+<script>
+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, 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/标题.w.png) 8px 0 no-repeat;
+    background-size: 95% 95%;
+    z-index: auto;
+}
+
+.left33 {
+    left: 33%;
+}
+
+.left55 {
+    left: 44.2%;
+}
+
+.left66 {
+    left: 55.2%;
+}
+
+
+.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%;
+    margin-top: 2.5%;
+    font-size: 18px;
+    font-weight: bold;
+}
+
+.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');
+}
+
+.partition {
+    position: absolute;
+    top: 7px;
+    width: 17px;
+    height: 35px;
+    display: flex;
+    background-size: 100% 100%;
+    background-image: url('../../assets/images/partition.png');
+}
+
+.topButton1 {
+    position: absolute;
+    left: 19.5%;
+    width: 179px;
+    height: 42px;
+    display: flex;
+    background-size: 100% 100%;
+    background-image: url('../../assets/images/b-disable.png')
+}
+
+
+.zs1 {
+    width: 32%;
+    height: calc(32vh);
+    position: absolute;
+    top: 9%;
+    left: 0;
+    background: url(./img/1.png) no-repeat;
+
+
+}
+
+.zs2 {
+    width: 32%;
+    height: calc(32vh);
+    position: absolute;
+    top: 9%;
+    left: 32%;
+    background: url(./img/1.png) no-repeat
+
+}
+
+.ys1 {
+    width: 36%;
+    height: calc(45vh);
+    position: absolute;
+    top: 9%;
+    left: 64%;
+    background: url(./img/1.j.png) no-repeat
+
+}
+
+.yx1 {
+    width: 36%;
+    height: calc(45vh);
+    position: absolute;
+    top: 50%;
+    left: 64%;
+    background: url(./img/1.j.png) no-repeat
+}
+
+
+.zx {
+    width: 63.5%;
+    height: calc(58vh);
+    position: absolute;
+    top: 41%;
+    left: 0;
+    background: url(./img/2.png) no-repeat
+}
+
+.littleHeadWord {
+    text-align: left;
+    position: absolute;
+    left: 70px;
+}
+
+.littleHeadWord span {
+    display: flex;
+    align-items: center;
+    margin-top: 5%;
+    font-size: 18px;
+    font-style: italic;
+    font-weight: bold;
+    text-shadow: 0 0 5px #fff, 0 1px 2px rgba(0, 0, 0, 1);
+}
+</style>

src/views/ssddjk/ssdddm.vue

@@ -0,0 +1,258 @@
+<template>
+    <div class="table-wrapper">
+        <div class="table-box">
+            <el-table
+                    :cell-style="{border:0,color:'#fff',background:'none'}"
+                    :data="tableData"
+                    :header-cell-style="{color:'#fff'}"
+                    :row-style="{background:'none'}"
+                    size="mini"
+                    style="font-size: 15px"
+            >
+                <el-table-column align="center" label="断面名称" prop="name" width="180px"></el-table-column>
+                <el-table-column align="center" label="状态" prop="state">
+                    <template slot-scope="scope">
+                        <img height="16px" src="../../assets/images/r-green.png">
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" label="有功" prop="ap"></el-table-column>
+                <el-table-column align="center" label="负限" prop="lower"></el-table-column>
+                <el-table-column align="center" label="正限" prop="upper"></el-table-column>
+                <el-table-column align="center" label="区间" prop="range">
+                    <template slot-scope="scope">
+                        <div style="color:#92fc53">正常</div>
+                    </template>
+                </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 = [
+            {
+                "name": "汗海-庆云断面",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "汗海-庆云断面",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "汗海-庆云断面",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "汗海-庆云断面",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "汗海-庆云断面",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "汗海-庆云断面",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "汗海-庆云断面",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "汗海-庆云断面",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+        ]
+    }
+}
+</script>
+
+<style lang="less" scoped>
+
+.circle {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-color: #4ded68;
+}
+
+@font-face {
+  font-family: AliMaMa;//自定义字体名称
+  src: url("../Articles/font/AlimamaDaoLiTi.ttf")
+}
+
+
+/deep/ .el-table tr {
+  background: none;
+}
+
+
+.table-wrapper {
+  width: 90%;
+  height: 99%;
+
+  .table-box {
+    //min-height: 600px;
+    margin-left: 6%;
+    margin-top: 8%;
+    width: 588px;
+    height: 99%;
+    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 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-icon-arrow-up {
+    transform: rotateZ(0deg);
+
+  }
+
+  /deep/ .el-icon-arrow-up:before {
+    content: url(../../views/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 {
+    background: url(../Articles/img/组2460.png) no-repeat;
+    background-position-x: 30%;
+    background-position-y: 30%;
+    background-size: 100% 100%;
+    height: 95%;
+    //height: 49px;
+  }
+
+
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /deep/ .el-table th.el-table__cell {
+    background: none;
+    border: 0px;
+  }
+
+  /deep/ .el-table tr.el-table__cell {
+    background: none;
+    border: 0px;
+  }
+
+  /deep/ .el-table__body {
+    -webkit-border-vertical-spacing: 13px; // 垂直间距
+  }
+
+  /deep/ .el-form-item__content {
+    text-align: left;
+  }
+
+  /deep/ .el-table, .el-table__expanded-cell {
+
+
+  }
+}
+</style>

src/views/ssddjk/ssddgjxx.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/ssddjk/ssddjh.vue

@@ -0,0 +1,193 @@
+<template>
+    <div class="table-wrapper">
+        <div class="table-box">
+            <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="width: 1429px;font-size: 15px;background: none;"
+            >
+                <el-table-column
+                        align="center"
+                        label="场站名称"
+                        prop="stationName"
+                        width="230px"
+                >
+                </el-table-column>
+                <el-table-column
+                        align="center"
+                        label="类别"
+                        prop="type"
+                >
+                </el-table-column>
+                <el-table-column
+                        align="center"
+                        label="计划值"
+                        prop="plan">
+                </el-table-column>
+                <el-table-column
+                        align="center"
+                        label="计算时刻"
+                        prop="time">
+                </el-table-column>
+                <el-table-column
+                        align="center"
+                        label="是否下发"
+                        prop="status">
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'Article-Index',
+    data() {
+        return {
+            form: {
+                taskNumber: '',
+                date: '',
+                current: 1,
+                size: 10
+            },
+            tableData: ''
+        }
+    },
+    methods: {},
+    mounted() {
+        const tableDataList = require('../tabledata.json');
+        this.tableData = tableDataList.rqddjhList
+    }
+}
+</script>
+
+<style lang="less" scoped>
+
+
+body {
+  border: 0;
+  background-image: url(../Articles/img/bgc.png)
+}
+
+.el-table__row > td {
+  border: none;
+}
+
+.el-table::before {
+  height: 0px;
+}
+
+.table-wrapper {
+  width: 97%;
+  height: 92%;
+  padding-left: 2%;
+
+  .table-box {
+    min-height: 300px;
+    background-size: cover;
+    margin-top: 50px;
+  }
+
+  .title {
+    margin-bottom: 20px;
+    margin-left: 60px;
+    font-size: 18px;
+    color: #fff;
+  }
+
+  /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--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: 11%;
+  }
+
+
+  /deep/ .el-input__inner {
+    width: 100%;
+  }
+
+
+  /deep/ .el-icon-arrow-up {
+    transform: rotateZ(0deg);
+
+  }
+
+
+  /deep/ .el-icon-arrow-up:before {
+    content: url(../Articles/img/xiala2.png);
+  }
+
+  /deep/ .el-input__prefix {
+    left: 75%;
+    padding-top: 3px;
+    width: 10%;
+  }
+
+  /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;
+    border: 0px;
+  }
+
+  /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>

src/views/ssddjk/ssddllx.vue

@@ -0,0 +1,257 @@
+<template>
+    <div class="table-wrapper">
+        <div class="table-box">
+            <el-table
+                    :cell-style="{border:0,color:'#fff'}"
+                    :data="tableData"
+                    :header-cell-style="{color:'#fff'}"
+                    :row-style="{background:'none'}"
+                    class="mytable"
+                    size="mini"
+                    style="font-size: 15px"
+            >
+                <el-table-column align="center" label="名称" prop="name" width="170px"></el-table-column>
+                <el-table-column align="center" label="状态" prop="state">
+                    <template slot-scope="scope">
+                        <img height="16px" src="../../assets/images/r-green.png">
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" label="有功" prop="ap"></el-table-column>
+                <el-table-column align="center" label="负限" prop="lower"></el-table-column>
+                <el-table-column align="center" label="正限" prop="upper"></el-table-column>
+                <el-table-column align="center" label="区间" prop="range">
+                    <template slot-scope="scope">
+                        <div style="color:#92fc53">正常</div>
+                    </template>
+                </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 = [
+            {
+                "name": "高德线",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "高德线",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "高德线",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "高德线",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "高德线",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "高德线",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "高德线",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+        ]
+    }
+}
+</script>
+
+<style lang="less" scoped>
+
+.circle {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-color: #4ded68;
+}
+
+.el-table__row > td {
+  border: none;
+}
+
+.el-table::before {
+  height: 0px;
+}
+
+@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: 8%;
+    width: 588px;
+    height: 99%;
+    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(../../views/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: none;
+    //height: 49px;
+  }
+
+  /deep/ .el-table th.el-table__cell {
+    background: none;
+    border: 0px;
+  }
+
+  /deep/ .el-table__body {
+    //-webkit-border-vertical-spacing: 13px; // 垂直间距
+  }
+
+  /deep/ .el-form-item__content {
+    text-align: left;
+  }
+
+
+  /deep/ .el-table {
+    background: url(../Articles/img/组2460.png) no-repeat;
+    background-position-x: 30%;
+    background-position-y: 30%;
+    background-size: 100% 100%;
+    height: 95%;
+  }
+}
+</style>

src/views/ssddjk/ssddxxzl.vue

@@ -0,0 +1,210 @@
+<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)'}"
+                    :show-header="false"
+                    size="mini"
+                    style="background: none;margin-top: -1%;font-size: 15px"
+            >
+                <el-table-column label="信息" prop="info">
+                    <template slot-scope="scope">
+                        <div style="height: 25px">
+                            <img :height="20" :width="20" alt=""
+                                 src="../../assets/images/shape1.png"
+                                 style="position:absolute;top: 8px">
+                            <img :height="25" :width="535"
+                                 alt=""
+                                 src="../../assets/images/bg/bg-table-row.png" style="position:absolute;left: 35px">
+                            <span style="position:absolute;top:8px;left: 43px">{{ scope.row.info }}</span>
+                        </div>
+                    </template>
+                </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 = [
+            {
+                "info": "0:00时刻，现货数据接口正常",
+            },
+            {
+                "info": "0:00时刻，D5000数据接口正常",
+            },
+            {
+                "info": "0:15时刻，储能AGC数据下发正常",
+            },
+            {
+                "info": "0:15时刻，火电AGC数据下发正常",
+            },
+            {
+                "info": "0:15时刻，储能AGC数据下发正常",
+            },
+            {
+                "info": "0:15时刻，火电AGC数据下发正常",
+            },
+        ]
+    }
+}
+</script>
+
+<style lang="less" scoped>
+
+@font-face {
+  font-family: AliMaMa;//自定义字体名称
+  src: url("../Articles/font/AlimamaDaoLiTi.ttf")
+}
+
+.table-wrapper {
+  //width: 1483px;
+  padding-top: 20px;
+
+  width: 84%;
+
+  .table-box {
+    //min-height: 600px;
+    margin-left: 6%;
+    margin-top: 8%;
+    width: 545px;
+    background-size: cover;
+  }
+
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /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;
+    border: 0px;
+  }
+
+  /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>

src/views/xndc/index.vue

@@ -1,158 +1,158 @@
 <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 class="app-container">
+        <div class="topBanner">
+            <div class="topLogo"></div>
+            <div v-if="status === 'd'" class="topStatus b-disable">
+                <div class="textStatus">
+                    离 线 运 行
+                </div>
+            </div>
+            <div v-if="status === 'r1'" class="topStatus b-running">
+                <div class="textStatus">
+                    日 前 调 度
+                </div>
+            </div>
+            <div v-if="status === 'r2'" class="topStatus b-running">
+                <div class="textStatus">
+                    实 时 调 度
+                </div>
+            </div>
+            <div v-if="status === 'r3'" class="topStatus b-running">
+                <div class="textStatus">
+                    完 全 运 行
+                </div>
+            </div>
+            <div v-if="status === 's'" class="topStatus b-stop">
+                <div class="textStatus">
+                    停 止 运 行
+                </div>
+            </div>
+            <div class="crumb left33">
+                <div class="textCrumb" onclick="window.open('/path#/rqdd','_self')">
+                    日前调度监控
+                </div>
+            </div>
+            <div class="partition" style="left: 43%"/>
+            <div class="crumb left44">
+                <div class="textCrumb" onclick="window.open('/path#/ssddjk','_self')">
+                    实时调度监控
+                </div>
+            </div>
+            <div class="partition" style="left: 54%"/>
+            <div class="crumb-c" style="left: 55.1%">
+                <div class="textCrumb-c" @click="showDialog()">
+                    虚拟电厂指令切换
+                </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>
-      <div class="topStatus b-running" v-if="status === 'r1'">
-        <div class="textStatus">
-          日 前 调 度
+        <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>
-      <div class="topStatus b-running" v-if="status === 'r2'">
-        <div class="textStatus">
-          实 时 调 度
+        <!-- 指令切换弹框 -->
+        <div v-if="dialogShow" class="dialogInfoBg">
+            <!-- 弹框头 -->
+            <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>
-      <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>
-      <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="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 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>
@@ -167,305 +167,305 @@ import RightMiddle from "./modules/right-middle"
 import RightBottom from "./modules/right-bottom"
 
 export default {
-  components: {
-    LeftTop,
-    LeftMiddle,
-    LeftBottom,
-    CenterTop,
-    CenterMiddle,
-    CenterBottom,
-    RightTop,
-    RightMiddle,
-    RightBottom
-  },
-  data() {
-    return {
-      status: 'd',
-      dialogTitle: '虚拟电厂指令切换',
-      dialogShow: false,
-      selected: null
-    }
-  },
-  mounted() {
-  },
-  methods: {
-    showDialog() {
-      this.selected = null
-      this.dialogShow = true
+    components: {
+        LeftTop,
+        LeftMiddle,
+        LeftBottom,
+        CenterTop,
+        CenterMiddle,
+        CenterBottom,
+        RightTop,
+        RightMiddle,
+        RightBottom
+    },
+    data() {
+        return {
+            status: 'd',
+            dialogTitle: '虚拟电厂指令切换',
+            dialogShow: false,
+            selected: null
+        }
     },
-    confirm() {
-      if (this.selected) {
-        this.$confirm('确认执行所选指令操作？', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          this.$message({
-            type: 'success',
-            message: '操作成功'
-          });
-          this.status = this.selected
-          this.dialogShow = false
-        }).catch(() => {
-        })
-      }
+    mounted() {
     },
-    cancel() {
-      this.dialogShow = false
+    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%;
+    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')
+    background-image: url('../../assets/images/b-disable.png')
 }
 
 .b-running {
-  background-image: url('../../assets/images/b-running.png')
+    background-image: url('../../assets/images/b-running.png')
 }
 
 .b-stop {
-  background-image: url('../../assets/images/b-stop.png')
+    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);
+    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');
+    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;
+    height: 50px;
+    text-align: left;
 }
 
 .left33 {
-  left: 33%;
+    left: 33%;
 }
 
 .left44 {
-  left: 44.2%;
+    left: 44.2%;
 }
 
 .textCrumb {
-  display: flex;
-  /*align-items: center;*/
-  margin-left: 20%;
-  margin-top: 2.5%;
-  font-size: 18px;
-  font-weight: bold;
+    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');
+    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;
+    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%;
+    position: absolute;
+    right: 15.5%;
+    margin-top: 0.2%;
 }
 
 .userName {
-  text-align: left;
-  position: absolute;
-  right: 10%;
-  margin-top: 0.2%;
+    text-align: left;
+    position: absolute;
+    right: 10%;
+    margin-top: 0.2%;
 }
 
 .split {
-  position: absolute;
-  right: 9.2%;
-  margin-top: 0.2%;
+    position: absolute;
+    right: 9.2%;
+    margin-top: 0.2%;
 }
 
 .userDept {
-  text-align: left;
-  position: absolute;
-  right: 2%;
-  margin-top: 0.5%;
-  font-size: 22px;
+    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/images/partition.png');
+    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/bg-bar1.png) -2px -1px no-repeat;
-  margin-right: 1%;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    background: url(../../assets/images/bg/bg-bar1.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%;
+    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;
+    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;
+    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;
+    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;
+    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;
+    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;
+    color: #FFFFFF;
 }
 
 /deep/ .el-radio__input.is-checked .el-radio__inner {
-  border-color: #40ffff;
-  background: transparent;
+    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;
+    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;
+    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;
+    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;
+    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;
+    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;
+    color: #ffffff;
+    line-height: 1;
+    cursor: pointer;
+    white-space: nowrap;
+    outline: 0;
+    margin-right: 30px;
 }
 
-</style>
+</style>