新增系统配置与日志

src/router/index.js

@@ -4,6 +4,7 @@ import Login from '../views/Login/Login.vue'
 import Table1 from '../views/Articles/index.vue'
 import Fdjh from '../views/fdjh/fdjh.vue'
 import ssdd from '../views/ssdd/ssdd.vue'
+import xtpz from '../views/xtpzyrz/xtpzyrz.vue'
 import Gznfh from '@/views/ydjhdjk/gznfh/index.vue'
 import Llx from '@/views/ystjjk/llx/index.vue'
 import Dm from '@/views/ystjjk/dm/index.vue'
@@ -16,10 +17,11 @@ import Fdjhgf from '@/views/fdjh/gf/index.vue'
 import rqddjh from '@/views/rqdd/rqddjh.vue'
 import Fdjhcn from '@/views/fdjh/cn/index.vue'
 import Jkcx from '@/views/xtrz/jkcx/index.vue'
-import Xtpz from '../views/xtpz/xtpz.vue'
+import pzb from '@/views/xtpzyrz/xtpz/xtpz.vue'
 import Rqdd from '../views/rqdd/rqdd.vue'
 import fdjhnav from '../views/fdjh/LeftNav.vue'
 import ssddnav from '../views/ssdd/LeftNav.vue'
+import xtpznav from '../views/xtpzyrz/LeftNav.vue'
 
 Vue.use(VueRouter)
 
@@ -50,6 +52,11 @@ const routes = [
         component: ssdd
     },
     {
+        path: '/xtpz',
+        name: '系统配置',
+        component: xtpz
+    },
+    {
         path: '/fdjhhd',
         name: '火电厂',
         component: Fdjhhd
@@ -111,9 +118,9 @@ const routes = [
     },
 
     {
-        path: '/xtpz',
-        name: '系统配置',
-        component: Xtpz
+        path: '/pzb',
+        name: '配置表',
+        component: pzb
     },
     {
         path: '/rqdd',
@@ -135,6 +142,11 @@ const routes = [
         name: '实时调度菜单',
         component: ssddnav
     },
+    {
+        path: '/xtpznav',
+        name: '系统配置菜单',
+        component: xtpznav
+    },
 
 ]
 

src/views/xtpz/xtpz.vue

@@ -1,447 +0,0 @@
-<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-row :gutter="20">
-        <el-button
-            id="message_btn1"
-            class="el-icon-blue-left"
-        >断面</el-button>
-        <el-button
-            id="message_btn2"
-            class="el-icon-blue-left"
-        >联络线</el-button>
-
-        <el-button
-            id="message_btn3"
-            class="el-icon-blue-right"
-        >刷新
-        </el-button>
-        <el-button
-            id="message_btn4"
-            class="el-icon-red-right"
-        >
-          删除
-        </el-button>
-        <el-button
-            id="message_btn4"
-            class="el-icon-yellow-right"
-        >
-          修改
-        </el-button>
-        <el-button
-            id="message_btn4"
-            class="el-icon-green-right"
-            @click="sendmessage()"
-        >
-          新增
-        </el-button>
-      </el-row>
-      <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: 17px;background: none"
-      >
-        <el-table-column
-            align="center"
-            label="断面名称"
-            prop="xtpzName"
-            width="270px"
-        >
-        </el-table-column>
-        <el-table-column
-            align="center"
-            label="状态"
-            prop="xtpzStatus"
-        >
-        </el-table-column>
-        <el-table-column
-            align="center"
-            label="from节点"
-            prop="from">
-        </el-table-column>
-        <el-table-column
-            align="center"
-            label="to节点"
-            prop="to">
-        </el-table-column>
-        <el-table-column
-            align="center"
-            label="负限"
-            prop="low">
-        </el-table-column>
-        <el-table-column
-            align="center"
-            label="正限"
-            prop="height">
-        </el-table-column>
-      </el-table>
-    </div>
-
-
-    <!-- 弹出的页面内容 -->
-    <el-dialog :visible.sync="getmessage" class="tanchuang-dialog" title="新增数据" :center="true" :show-close="false">
-      <div slot="title" class="header-title">
-        <span style="font-weight:bold;font-size: 20px;"> 新增数据 </span>
-      </div>
-      <el-form ref="ruleForm" :model="ruleForm" label-position="center"
-               label-width="130px"
-               size="mini">
-        <el-row>
-          <el-col :span="12" style="width: 40%; float: left;">
-            <el-form-item label="断面名称：" style="width: 100%; float: left;color: white">
-              <el-input v-model="xtpzName" placeholder="汗海-庆云断面" style="width: 100%;">启用</el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12" style="width: 40%; float: left;">
-            <el-form-item label="状态：" style="width: 100%; float: right;">
-              <el-input v-model="xtpzStatus" placeholder="状态"
-                        style="width: 100%; text-align: center;"></el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <el-row>
-          <el-col :span="12" style="width: 40%; float: left;">
-            <el-form-item label="from节点：" style="width: 100%; float: left;">
-              <el-input v-model="from" placeholder="汗海"
-                        style="width: 100%;float: left;">汗海
-              </el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12" style="width: 40%; float: left;">
-            <el-form-item label="to节点：" style="width: 100%; float: left;">
-              <el-input v-model="to" placeholder="庆云" style="width: 100%;float: left;">庆云</el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <el-row>
-          <el-col :span="12" style="width: 40%; float: left;">
-            <el-form-item label="负限：" style="width: 100%; float: left;">
-              <el-input v-model="low" placeholder="250" style="width: 100%;">250</el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12" style="width: 40%; float: left;">
-            <el-form-item label="正限：" style="width: 100%; float: right;">
-              <el-input v-model="height" placeholder="200" style="width: 100%;">200</el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-      <el-row class="hengxianimg">
-        <el-divider/>
-      </el-row>
-
-      <el-row :gutter="20" id="tijiao_btn">
-        <el-button
-            id="form_btn1"
-            class="el-icon-blue-left2"
-            @click="cancelForm()"
-        >
-          保存
-        </el-button>
-        <el-button
-            id="form_btn2"
-            class="el-icon-yellow-right2"
-            @click="cancelForm()"
-        >取消</el-button>
-
-      </el-row>
-
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: 'Xtpz',
-  data() {
-    return {
-      tableData: [],
-      //弹框
-      getmessage: false,
-      ruleForm: {
-        xtpzName: '',
-        xtpzStatus: '',
-        from: '',
-        to: '',
-        low: '',
-        height: '',
-      }
-    }
-  },
-  methods: {
-    //弹框
-    sendmessage() {
-      this.getmessage = true
-    },
-    //弹框
-    cancelForm() {
-      this.getmessage = false
-    }
-  },
-  mounted() {
-    const tableDataList = require('./xtpzdata.json');
-    this.tableData = tableDataList.xtpzDataList
-  }
-}
-</script>
-
-<style lang="less" scoped>
-
-
-@font-face {
-  font-family: AliMaMa;//自定义字体名称
-  src: url("../Articles/font/AlimamaDaoLiTi.ttf")
-}
-
-body {
-  border: 0;
-  background-image: url(./img/beijing.png)
-}
-
-/deep/ .el-table__header tr {
-  background: url(./img/tableTitlebg.png);
-  height: 49px;
-
-}
-
-.el-divider--horizontal {
-  margin: 8px 0;
-  background: 0 0;
-  border-top: 1px dashed #e8eaec;
-  width: 90%;
-  text-align: center;
-  left: 5%;
-}
-
-.el-icon-blue-left {
-  background: url("./img/bluebtn.png");
-  width: 100px;
-  height: 40px;
-  padding-top: 8px;
-  font-size: 25px;
-  color: whitesmoke;
-  border: 0px dashed;
-  background-repeat: no-repeat;
-  float: left;
-}
-
-.el-icon-red-right {
-  background: url("./img/redbtn.png");
-  width: 100px;
-  height: 40px;
-  padding-top: 8px;
-  font-size: 25px;
-  color: whitesmoke;
-  border: 0px dashed;
-  background-repeat: no-repeat;
-  float: right;
-}
-
-.el-icon-blue-right {
-  background: url("./img/bluebtn.png");
-  width: 100px;
-  height: 40px;
-  padding-top: 8px;
-  font-size: 25px;
-  color: whitesmoke;
-  border: 0px dashed;
-  background-repeat: no-repeat;
-  float: right;
-}
-
-.el-icon-yellow-right {
-  background: url("./img/yellowbtn.png");
-  width: 100px;
-  height: 40px;
-  padding-top: 8px;
-  font-size: 25px;
-  color: whitesmoke;
-  border: 0px dashed;
-  background-repeat: no-repeat;
-  float: right;
-}
-
-.el-icon-green-right {
-  background: url("./img/greenbtn.png");
-  width: 100px;
-  height: 40px;
-  padding-top: 8px;
-  font-size: 25px;
-  color: whitesmoke;
-  border: 0px dashed;
-
-  background-repeat: no-repeat;
-  float: right;
-}
-
-
-.el-icon-blue-left2 {
-  background: url("./img/submitbtn.png");
-  width: 145px;
-  height: 42px;
-  border: 0px dashed;
-  padding-top: 8px;
-  background-repeat: no-repeat;
-  float: left;
-  text-align: center;
-  left: 10%;
-  font-size: 25px;
-  color: whitesmoke;
-
-}
-
-#tijiao_btn {
-  float: left;
-  text-align: center;
-  left: 30%;
-}
-
-.el-icon-yellow-right2 {
-  background: url("./img/cancelbtn.png");
-  width: 145px;
-  height: 42px;
-  border: 0px dashed;
-  background-repeat: no-repeat;
-  float: left;
-  margin-left: 50px;
-  font-size: 25px;
-  padding-top: 8px;
-  color: whitesmoke;
-}
-
-
-/deep/ .header-title {
-  background: url("./img/m.png");
-  background-position: 50% 20%;
-  background-repeat: no-repeat;
-  background-size: 50% 130%;
-  text-align: center;
-  height: 40px;
-  margin-top: 10px;
-}
-
-/deep/ .el-dialog {
-  background-color: rgba(255, 0, 0, 0.0);
-  color: #FFFFFF;
-  background-image: url("./img/tanchuangbg.png");
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  isplay: flex;
-  flex-direction: column;
-  margin: 0 !important;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  /*height:600px;*/
-  max-height: calc(100% - 100px);
-  max-width: calc(100% - 70px);
-}
-
-/deep/ .el-dialog .el-dialog__body {
-  flex: 1;
-  overflow: auto;
-}
-
-/deep/ .el-input__inner {
-  background-image: url("./img/inputbg.png");
-  background-color: rgba(255, 0, 0, 0.0);
-  color: white;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  font-weight: bold;
-}
-
-/deep/ .el-form-item__label {
-  color: white;
-}
-
-.table-wrapper {
-  width: 1483px;
-  padding-left: 20px;
-
-  .table-box {
-    min-height: 600px;
-    background-size: cover;
-  }
-
-  .title {
-    margin-bottom: 20px;
-    margin-left: 60px;
-    font-size: 18px;
-    color: #fff;
-  }
-
-
-  /deep/ .el-table__header {
-    background: url(./img/tableTitlebg.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-icon-arrow-up {
-    transform: rotateZ(0deg);
-
-  }
-
-  /deep/ .el-input__prefix {
-    right: -60px;
-    padding-top: 3px;
-  }
-
-  /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>

src/views/xtpzyrz/LeftNav.vue

@@ -0,0 +1,140 @@
+<template>
+    <div class="sidebar">
+        <div style="font-family: AliMaMa;font-size: 30px;font-weight: 1000;text-align: left;">
+            <span style="position: absolute;top:-3px;left: 70px;color: #fff;">目录</span>
+        </div>
+        <div style="height: 40px"></div>
+        <el-menu
+                active-text-color="#ffd04b"
+                background-color="transparent"
+                class="sidebar-el-menu"
+                default-active="1"
+                text-color="#fff">
+            <!-- 一级菜单 -->
+            <template v-for="item in list">
+                <el-submenu v-if="item.children && item.children.length" :key="item.path" :index="item.path">
+                    <template slot="title"><img :src="require('../fdjh/img/plan.png')" style="margin-right: 10px;"
+                                                width="28px"/><span style="font-size:18px;font-weight:bold">{{
+                        item.name
+                        }}</span>
+                    </template>
+                    <!-- 二级菜单 -->
+                    <template v-for="itemChild in item.children">
+                        <el-submenu v-if="itemChild.children && itemChild.children.length" :key="itemChild.path"
+                                    :index="itemChild.path">
+                            <template slot="title"><img :src="require('../fdjh/img/pc1.png')"
+                                                        style="margin-right: 10px;"/><span
+                                    style="font-size:16px;font-weight:bold">{{ itemChild.name }}</span></template>
+                            <!-- 三级菜单 -->
+                            <el-menu-item v-for="itemChild_Child in itemChild.children" :key="itemChild_Child.path"
+                                          :index="itemChild_Child.path" @click="changePage(itemChild_Child)">
+                                <img :src="require('../fdjh/img/last1.png')" style="margin-right: 10px;"/><span
+                                    slot="title">{{ itemChild_Child.name }}</span></el-menu-item>
+                        </el-submenu>
+
+                        <el-menu-item v-else :key="itemChild.path" :index="itemChild.path"><img
+                                :src="require('../fdjh/img/pc1.png')"
+                                style="margin-right: 10px;"/><span slot="title">{{ itemChild.name }}</span>
+                        </el-menu-item>
+                    </template>
+                </el-submenu>
+                <el-menu-item v-else :key="item.path" :index="item.path"><img :src="require('../fdjh/img/plan.png')"
+                                                                              style="margin-right: 10px;"
+                                                                              width="28px"/><span
+                        slot="title">{{ item.name }}</span></el-menu-item>
+            </template>
+        </el-menu>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            list: [
+                {
+                    path: "/1",
+                    name: "系统配置与日志",
+                    children: [
+                        {
+                            path: "/1/1",
+                            name: "系统日志",
+                            children: [
+                                {
+                                    path: "/#/jkcx",
+                                    name: "接口、程序",
+                                }
+                            ]
+                        },
+                        {
+                            path: "/1/2",
+                            name: "系统配置",
+                            children: [
+                                {
+                                    path: "/#/pzb",
+                                    name: "配置表",
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    },
+    methods: {
+        changePage(obj) {
+            var parentIframe = parent.document.getElementById('showcontent');
+            parentIframe.src = obj.path;
+        }
+
+    }
+}
+</script>
+
+<style scoped>
+.sidebar {
+    display: block;
+    text-align: left;
+
+}
+
+.sidebar::-webkit-scrollbar {
+    width: 0;
+}
+
+.sidebar-el-menu:not(.el-menu--collapse) {
+//position: absolute; //top: 6%; margin: 0px 0 30px 30px; background-size: 100% 100%; height: 90%;
+}
+
+/deep/ .el-submenu__title:hover {
+    background-color: rgb(103, 118, 49) !important;
+}
+
+/deep/ .sidebar-el-menu {
+    margin-left: 23px !important;
+}
+
+.sidebar > ul {
+    height: 100%;
+}
+
+.el-menu {
+    border: 0 !important;
+}
+
+.el-menu-item {
+    height: 40px;
+    font-size: 16px;
+    font-weight: bold;
+}
+
+.el-submenu .el-menu-item:hover {
+    background-color: rgb(103, 118, 49) !important;
+}
+
+.el-sub-menu__title:hover {
+    background-color: rgb(103, 118, 49) !important;
+}
+</style>
+
+

src/views/xtpzyrz/xtpz/xtpz.vue

@@ -0,0 +1,452 @@
+<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-row :gutter="20">
+                <el-button
+                        id="message_btn1"
+                        class="el-icon-blue-left"
+                >断面
+                </el-button>
+                <el-button
+                        id="message_btn2"
+                        class="el-icon-blue-left"
+                >联络线
+                </el-button>
+
+                <el-button
+                        id="message_btn3"
+                        class="el-icon-blue-right"
+                >刷新
+                </el-button>
+                <el-button
+                        id="message_btn4"
+                        class="el-icon-red-right"
+                >
+                    删除
+                </el-button>
+                <el-button
+                        id="message_btn4"
+                        class="el-icon-yellow-right"
+                >
+                    修改
+                </el-button>
+                <el-button
+                        id="message_btn4"
+                        class="el-icon-green-right"
+                        @click="sendmessage()"
+                >
+                    新增
+                </el-button>
+            </el-row>
+            <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: 17px;background: none"
+            >
+                <el-table-column
+                        align="center"
+                        label="断面名称"
+                        prop="xtpzName"
+                        width="270px"
+                >
+                </el-table-column>
+                <el-table-column
+                        align="center"
+                        label="状态"
+                        prop="xtpzStatus"
+                >
+                </el-table-column>
+                <el-table-column
+                        align="center"
+                        label="from节点"
+                        prop="from">
+                </el-table-column>
+                <el-table-column
+                        align="center"
+                        label="to节点"
+                        prop="to">
+                </el-table-column>
+                <el-table-column
+                        align="center"
+                        label="负限"
+                        prop="low">
+                </el-table-column>
+                <el-table-column
+                        align="center"
+                        label="正限"
+                        prop="height">
+                </el-table-column>
+            </el-table>
+        </div>
+
+
+        <!-- 弹出的页面内容 -->
+        <el-dialog :center="true" :show-close="false" :visible.sync="getmessage" class="tanchuang-dialog"
+                   title="新增数据">
+            <div slot="title" class="header-title">
+                <span style="font-weight:bold;font-size: 20px;"> 新增数据 </span>
+            </div>
+            <el-form ref="ruleForm" :model="ruleForm" label-position="center"
+                     label-width="130px"
+                     size="mini">
+                <el-row>
+                    <el-col :span="12" style="width: 40%; float: left;">
+                        <el-form-item label="断面名称：" style="width: 100%; float: left;color: white">
+                            <el-input v-model="xtpzName" placeholder="汗海-庆云断面" style="width: 100%;">启用
+                            </el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12" style="width: 40%; float: left;">
+                        <el-form-item label="状态：" style="width: 100%; float: right;">
+                            <el-input v-model="xtpzStatus" placeholder="状态"
+                                      style="width: 100%; text-align: center;"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+
+                <el-row>
+                    <el-col :span="12" style="width: 40%; float: left;">
+                        <el-form-item label="from节点：" style="width: 100%; float: left;">
+                            <el-input v-model="from" placeholder="汗海"
+                                      style="width: 100%;float: left;">汗海
+                            </el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12" style="width: 40%; float: left;">
+                        <el-form-item label="to节点：" style="width: 100%; float: left;">
+                            <el-input v-model="to" placeholder="庆云" style="width: 100%;float: left;">庆云</el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+
+                <el-row>
+                    <el-col :span="12" style="width: 40%; float: left;">
+                        <el-form-item label="负限：" style="width: 100%; float: left;">
+                            <el-input v-model="low" placeholder="250" style="width: 100%;">250</el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12" style="width: 40%; float: left;">
+                        <el-form-item label="正限：" style="width: 100%; float: right;">
+                            <el-input v-model="height" placeholder="200" style="width: 100%;">200</el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <el-row class="hengxianimg">
+                <el-divider/>
+            </el-row>
+
+            <el-row id="tijiao_btn" :gutter="20">
+                <el-button
+                        id="form_btn1"
+                        class="el-icon-blue-left2"
+                        @click="cancelForm()"
+                >
+                    保存
+                </el-button>
+                <el-button
+                        id="form_btn2"
+                        class="el-icon-yellow-right2"
+                        @click="cancelForm()"
+                >取消
+                </el-button>
+
+            </el-row>
+
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'Xtpz',
+    data() {
+        return {
+            tableData: [],
+            //弹框
+            getmessage: false,
+            ruleForm: {
+                xtpzName: '',
+                xtpzStatus: '',
+                from: '',
+                to: '',
+                low: '',
+                height: '',
+            }
+        }
+    },
+    methods: {
+        //弹框
+        sendmessage() {
+            this.getmessage = true
+        },
+        //弹框
+        cancelForm() {
+            this.getmessage = false
+        }
+    },
+    mounted() {
+        const tableDataList = require('./xtpzdata.json');
+        this.tableData = tableDataList.xtpzDataList
+    }
+}
+</script>
+
+<style lang="less" scoped>
+
+
+@font-face {
+  font-family: AliMaMa;//自定义字体名称
+  src: url("../../Articles/font/AlimamaDaoLiTi.ttf")
+}
+
+body {
+  border: 0;
+  background-image: url(./img/beijing.png)
+}
+
+/deep/ .el-table__header tr {
+  background: url(./img/tableTitlebg.png);
+  height: 49px;
+
+}
+
+.el-divider--horizontal {
+  margin: 8px 0;
+  background: 0 0;
+  border-top: 1px dashed #e8eaec;
+  width: 90%;
+  text-align: center;
+  left: 5%;
+}
+
+.el-icon-blue-left {
+  background: url("./img/bluebtn.png");
+  width: 100px;
+  height: 40px;
+  padding-top: 8px;
+  font-size: 25px;
+  color: whitesmoke;
+  border: 0px dashed;
+  background-repeat: no-repeat;
+  float: left;
+}
+
+.el-icon-red-right {
+  background: url("./img/redbtn.png");
+  width: 100px;
+  height: 40px;
+  padding-top: 8px;
+  font-size: 25px;
+  color: whitesmoke;
+  border: 0px dashed;
+  background-repeat: no-repeat;
+  float: right;
+}
+
+.el-icon-blue-right {
+  background: url("./img/bluebtn.png");
+  width: 100px;
+  height: 40px;
+  padding-top: 8px;
+  font-size: 25px;
+  color: whitesmoke;
+  border: 0px dashed;
+  background-repeat: no-repeat;
+  float: right;
+}
+
+.el-icon-yellow-right {
+  background: url("./img/yellowbtn.png");
+  width: 100px;
+  height: 40px;
+  padding-top: 8px;
+  font-size: 25px;
+  color: whitesmoke;
+  border: 0px dashed;
+  background-repeat: no-repeat;
+  float: right;
+}
+
+.el-icon-green-right {
+  background: url("./img/greenbtn.png");
+  width: 100px;
+  height: 40px;
+  padding-top: 8px;
+  font-size: 25px;
+  color: whitesmoke;
+  border: 0px dashed;
+
+  background-repeat: no-repeat;
+  float: right;
+}
+
+
+.el-icon-blue-left2 {
+  background: url("./img/submitbtn.png");
+  width: 145px;
+  height: 42px;
+  border: 0px dashed;
+  padding-top: 8px;
+  background-repeat: no-repeat;
+  float: left;
+  text-align: center;
+  left: 10%;
+  font-size: 25px;
+  color: whitesmoke;
+
+}
+
+#tijiao_btn {
+  float: left;
+  text-align: center;
+  left: 30%;
+}
+
+.el-icon-yellow-right2 {
+  background: url("./img/cancelbtn.png");
+  width: 145px;
+  height: 42px;
+  border: 0px dashed;
+  background-repeat: no-repeat;
+  float: left;
+  margin-left: 50px;
+  font-size: 25px;
+  padding-top: 8px;
+  color: whitesmoke;
+}
+
+
+/deep/ .header-title {
+  background: url("./img/m.png");
+  background-position: 50% 20%;
+  background-repeat: no-repeat;
+  background-size: 50% 130%;
+  text-align: center;
+  height: 40px;
+  margin-top: 10px;
+}
+
+/deep/ .el-dialog {
+  background-color: rgba(255, 0, 0, 0.0);
+  color: #FFFFFF;
+  background-image: url("./img/tanchuangbg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  isplay: flex;
+  flex-direction: column;
+  margin: 0 !important;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  /*height:600px;*/
+  max-height: calc(100% - 100px);
+  max-width: calc(100% - 70px);
+}
+
+/deep/ .el-dialog .el-dialog__body {
+  flex: 1;
+  overflow: auto;
+}
+
+/deep/ .el-input__inner {
+  background-image: url("./img/inputbg.png");
+  background-color: rgba(255, 0, 0, 0.0);
+  color: white;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  font-weight: bold;
+}
+
+/deep/ .el-form-item__label {
+  color: white;
+}
+
+.table-wrapper {
+  width: 1483px;
+  padding-left: 20px;
+
+  .table-box {
+    min-height: 600px;
+    background-size: cover;
+  }
+
+  .title {
+    margin-bottom: 20px;
+    margin-left: 60px;
+    font-size: 18px;
+    color: #fff;
+  }
+
+
+  /deep/ .el-table__header {
+    background: url(./img/tableTitlebg.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-icon-arrow-up {
+    transform: rotateZ(0deg);
+
+  }
+
+  /deep/ .el-input__prefix {
+    right: -60px;
+    padding-top: 3px;
+  }
+
+  /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>

src/views/xtpzyrz/xtpzyrz.vue

@@ -0,0 +1,57 @@
+<template>
+    <div class="page">
+        <div id="iframe0" class="pos_2" style="">
+            <iframe src="/#/xtpznav" style="width: 100%;height: 100%">
+            </iframe>
+        </div>
+        <div id="iframe1" class="pos_3" style="">
+            <iframe id="showcontent" style="width: 100%;height: 100%">
+            </iframe>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'fdjh-name'
+}
+</script>
+
+<style lang="css" scoped>
+.page {
+    background: url('../fdjh/img/fdjh-bj.png') no-repeat;
+    width: 100%;
+    height: calc(100vh);
+    background-size: 100% 100%;
+}
+
+iframe {
+    border: 0;
+}
+
+#iframe0 {
+    background: url(../fdjh/img/img.png) no-repeat;
+}
+
+#iframe1 {
+    background: url(../fdjh/img/img.png) no-repeat;
+}
+
+
+.pos_2 {
+    position: absolute;
+    width: 20%;
+    height: 89%;
+    left: 1%;
+    top: 10%;
+}
+
+.pos_3 {
+    position: absolute;
+    width: 79%;
+    height: 89%;
+    left: 21%;
+    right: 33px;
+    top: 10%;
+}
+</style>