设备管理

ruoyi-ui/src/views/home.vue

@@ -1,285 +1,303 @@
 <template>
-   <div style="background-color:#000928;width:100%;height:100%">
-     <div class="header"></div>
-     <div class="left_content">
-          <div style="width:93%;height:100%;padding-left:5%">
-          <div :class="{active:showTable == 8 && menuShow == 0}" @click="showTable = 8;menuShow= 0" class="icon_class">
-               <div class="icon_content">
-                    <img class="icon_image" src="../assets/picture/home.png" />
-               </div>
-               <div>
-                    <div class="icon_title">首页</div>
-               </div>
-          </div>     
-
-           <div :class="{active:showTable == 6 && menuShow == 0}" class="icon_class" @click="showTable = 6;menuShow= 0">
-               <div class="icon_content">
-                    <img class="icon_image" src="../assets/picture/scb.png" />
-               </div>
-               <div>
-                    <div class="icon_title">硫含量超标船舶管理</div>
-               </div>
-          </div>  
-
-           <div :class="{active:showTable == 1 && menuShow == 0}" class="icon_class" @click="showTable = 1;menuShow= 0">
-               <div class="icon_content">
-                    <img class="icon_image" src="../assets/picture/exhaust.png" />
-               </div>
-               <div>
-                    <div class="icon_title">船舶尾气黑烟抓拍</div>
-               </div>
-          </div>  
+  <div style="background-color:#000928;width:100%;height:100%">
+    <div class="header"></div>
+    <div class="left_content">
+      <div style="width:93%;height:100%;padding-left:5%">
+        <div :class="{active:showTable == 8 && menuShow == 0}" @click="showTable = 8;menuShow= 0" class="icon_class">
+          <div class="icon_content">
+            <img class="icon_image" src="../assets/picture/home.png"/>
+          </div>
+          <div>
+            <div class="icon_title">首页</div>
+          </div>
+        </div>
 
-           <div :class="{active:showTable == 4 && menuShow == 0}" class="icon_class" @click="showTable = 4;menuShow= 0">
-               <div class="icon_content">
-                    <img class="icon_image" src="../assets/picture/statistics.png" />
-               </div>
-               <div>
-                    <div class="icon_title">统计分析</div>
-               </div>
-          </div>  
- <div class="userDiv" :class="{active:menuShow == 2}" @click="menuShow = 2">
-          <el-popover
-          placement="right"
-          style="opacity: 0"
-          trigger="click">
-          <div  class="userContent">
-               <div index="1" :class="{menu:showTable == 2}" class="menu_title" @click="showTable =2">
-               <i class="el-icon-s-custom"></i>
-               <span>用户管理</span>
-               </div>
-               <div index="2" :class="{menu:showTable == 7}" class="menu_title" @click="showTable =7">
-               <i class="el-icon-user"></i>
-               <span>角色管理</span>
-               </div>
-               <div index="3" :class="{menu:showTable == 3}" class="menu_title" @click="showTable =3">
-               <i class="el-icon-document"></i>
-               <span>机构管理</span>
-               </div>
-               <div index="4" :class="{menu:showTable == 5}" class="menu_title" @click="showTable =5">
-               <i class="el-icon-setting"></i>
-               <span>登录日志</span>
-               </div>     
+        <div :class="{active:showTable == 6 && menuShow == 0}" class="icon_class" @click="showTable = 6;menuShow= 0">
+          <div class="icon_content">
+            <img class="icon_image" src="../assets/picture/scb.png"/>
           </div>
-           <div class="icon_class" slot="reference">
-               <div class="icon_content">
-                    <img class="icon_image" src="../assets/picture/equipment.png" />
-               </div>
-               <div>
-                    <div class="icon_title">设备管理</div>
-               </div>
-          </div>  
-         </el-popover>  
+          <div>
+            <div class="icon_title">硫含量超标船舶管理</div>
           </div>
+        </div>
 
-          <div class="userDiv" :class="{active:menuShow == 1}" @click="menuShow = 1">
-          <el-popover
-          placement="right"
-          style="opacity: 0"
-          trigger="click">
-          <div  class="userContent">
-               <div index="1" :class="{menu:showTable == 2}" class="menu_title" @click="showTable =2">
-               <i class="el-icon-s-custom"></i>
-               <span>用户管理</span>
-               </div>
-               <div index="2" :class="{menu:showTable == 7}" class="menu_title" @click="showTable =7">
-               <i class="el-icon-user"></i>
-               <span>角色管理</span>
-               </div>
-               <div index="3" :class="{menu:showTable == 3}" class="menu_title" @click="showTable =3">
-               <i class="el-icon-document"></i>
-               <span>机构管理</span>
-               </div>
-               <div index="4" :class="{menu:showTable == 5}" class="menu_title" @click="showTable =5">
-               <i class="el-icon-setting"></i>
-               <span>登录日志</span>
-               </div>     
+        <div :class="{active:showTable == 1 && menuShow == 0}" class="icon_class" @click="showTable = 1;menuShow= 0">
+          <div class="icon_content">
+            <img class="icon_image" src="../assets/picture/exhaust.png"/>
           </div>
-           <div class="icon_class" slot="reference">
-               <div class="icon_content">
-                    <img class="icon_image" src="../assets/picture/user.png" />
-               </div>
-               <div>
-                    <div class="icon_title">用户管理</div>
-               </div>
-          </div>  
-         </el-popover>  
+          <div>
+            <div class="icon_title">船舶尾气黑烟抓拍</div>
           </div>
+        </div>
+
+        <div :class="{active:showTable == 4 && menuShow == 0}" class="icon_class" @click="showTable = 4;menuShow= 0">
+          <div class="icon_content">
+            <img class="icon_image" src="../assets/picture/statistics.png"/>
           </div>
+          <div>
+            <div class="icon_title">统计分析</div>
+          </div>
+        </div>
+        <div class="userDiv" :class="{active:menuShow == 2}" @click="menuShow = 2">
+          <el-popover
+            placement="right"
+            style="opacity: 0"
+            trigger="click"
+          >
+            <div class="userContent">
+              <div index="1" :class="{menu:showTable == 11}" target="showHere" class="menu_title" @click="showTable =11">
+                <i class="el-icon-s-custom"></i>
+                <span>嗅探设备</span>
+              </div>
+              <div index="2" :class="{menu:showTable == 10}" class="menu_title" @click="showTable =10">
+                <i class="el-icon-user"></i>
+                <span>光谱设备</span>
+              </div>
+              <div index="3" :class="{menu:showTable == 9}" class="menu_title" @click="showTable =9">
+                <i class="el-icon-document"></i>
+                <span>黑烟设备</span>
+              </div>
+            </div>
+            <div class="icon_class" slot="reference">
+              <div class="icon_content">
+                <img class="icon_image" src="../assets/picture/equipment.png"/>
+              </div>
+              <div>
+                <div class="icon_title">设备管理</div>
+              </div>
+            </div>
+          </el-popover>
+        </div>
+
+        <div class="userDiv" :class="{active:menuShow == 1}" @click="menuShow = 1">
+          <el-popover
+            placement="right"
+            style="opacity: 0"
+            trigger="click"
+          >
+            <div class="userContent">
+              <div index="1" :class="{menu:showTable == 2}" class="menu_title" @click="showTable =2">
+                <i class="el-icon-s-custom"></i>
+                <span>用户管理</span>
+              </div>
+              <div index="2" :class="{menu:showTable == 7}" class="menu_title" @click="showTable =7">
+                <i class="el-icon-user"></i>
+                <span>角色管理</span>
+              </div>
+              <div index="3" :class="{menu:showTable == 3}" class="menu_title" @click="showTable =3">
+                <i class="el-icon-document"></i>
+                <span>机构管理</span>
+              </div>
+              <div index="4" :class="{menu:showTable == 5}" class="menu_title" @click="showTable =5">
+                <i class="el-icon-setting"></i>
+                <span>登录日志</span>
+              </div>
+            </div>
+            <div class="icon_class" slot="reference">
+              <div class="icon_content">
+                <img class="icon_image" src="../assets/picture/user.png"/>
+              </div>
+              <div>
+                <div class="icon_title">用户管理</div>
+              </div>
+            </div>
+          </el-popover>
+        </div>
       </div>
-      
-      <div class="center_content">
-            <xtTable v-show="showTable == 1"></xtTable>
-            <userTable v-if="showTable==2"></userTable>
-            <deptTable v-if="showTable==3"></deptTable>
-            <statisticalTable v-if="showTable==4"></statisticalTable>
-            <logininforTable v-if="showTable==5"></logininforTable>
-            <liuTable v-if="showTable==6"></liuTable>
-            <roleTable v-if="showTable==7"></roleTable>
-            <homeTable v-if="showTable==8"></homeTable>
-      </div>
+    </div>
 
-      
+    <div class="center_content">
+      <xtTable v-show="showTable == 1"></xtTable>
+      <userTable v-if="showTable==2"></userTable>
+      <deptTable v-if="showTable==3"></deptTable>
+      <statisticalTable v-if="showTable==4"></statisticalTable>
+      <logininforTable v-if="showTable==5"></logininforTable>
+      <liuTable v-if="showTable==6"></liuTable>
+      <roleTable v-if="showTable==7"></roleTable>
+      <homeTable v-if="showTable==8"></homeTable>
+      <iframe style="height:330rem;width:100%" v-show="showTable==9" marginwidth="0" marginheight="0" vspace="0"
+              hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" frameborder="0" name="showHere"
+              src="http://119.45.121.229:8090/?opt=1"
+      ></iframe>
+      <iframe style="height:330rem;width:100%" v-show="showTable==10" marginwidth="0" marginheight="0" vspace="0"
+              hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" frameborder="0" name="showHere"
+              src="http://101.133.159.237:8087/device.html?opt=1"
+      ></iframe>
+      <iframe style="height:330rem;width:100%" v-show="showTable==11" marginwidth="0" marginheight="0" vspace="0"
+              hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" frameborder="0" name="showHere"
+              src="http://47.92.161.189:81/index.html?opt=1"
+      ></iframe>
+    </div>
 
-      <!-- <div v-show="showUserMenu" class="userContent">
-                <div index="1" class="menu_title" @click="showTable =2">
-               <i class="el-icon-s-custom"></i>
-               <span>用户管理</span>
-               </div>
-               <div index="2" class="menu_title" @click="showTable =2">
-               <i class="el-icon-user"></i>
-               <span>角色管理</span>
-               </div>
-               <div index="3" class="menu_title" @click="showTable =3">
-               <i class="el-icon-document"></i>
-               <span>机构管理</span>
-               </div>
-               <div index="4" class="menu_title" @click="showTable =5">
-               <i class="el-icon-setting"></i>
-               <span>登录日志</span>
-               </div>     
-      </div> -->
-   </div>
+
+    <!-- <div v-show="showUserMenu" class="userContent">
+              <div index="1" class="menu_title" @click="showTable =2">
+             <i class="el-icon-s-custom"></i>
+             <span>用户管理</span>
+             </div>
+             <div index="2" class="menu_title" @click="showTable =2">
+             <i class="el-icon-user"></i>
+             <span>角色管理</span>
+             </div>
+             <div index="3" class="menu_title" @click="showTable =3">
+             <i class="el-icon-document"></i>
+             <span>机构管理</span>
+             </div>
+             <div index="4" class="menu_title" @click="showTable =5">
+             <i class="el-icon-setting"></i>
+             <span>登录日志</span>
+             </div>
+    </div> -->
+  </div>
 </template>
 
 <script>
-import xtTable from "./components/table/xtTable.vue"
-import userTable from "./components/table/userTable.vue"
-import deptTable from "./components/table/deptTable.vue"
-import roleTable from "./components/table/roleTable.vue"
-import statisticalTable from "./components/table/statisticalTable.vue"
-import logininforTable from "./monitor/logininfor/index.vue"
-import liuTable from "./components/table/liuTable.vue"
-import homeTable from "./components/table/homeTable.vue"
+import xtTable from './components/table/xtTable.vue'
+import userTable from './components/table/userTable.vue'
+import deptTable from './components/table/deptTable.vue'
+import roleTable from './components/table/roleTable.vue'
+import statisticalTable from './components/table/statisticalTable.vue'
+import logininforTable from './monitor/logininfor/index.vue'
+import liuTable from './components/table/liuTable.vue'
+import homeTable from './components/table/homeTable.vue'
+
 export default {
-  name: "index",
+  name: 'index',
   components: {
-	 xtTable,
-      userTable,
-      deptTable,
-      roleTable,
-      statisticalTable,
-      logininforTable,
-      liuTable,
-      homeTable		//在此处注册
+    xtTable,
+    userTable,
+    deptTable,
+    roleTable,
+    statisticalTable,
+    logininforTable,
+    liuTable,
+    homeTable		//在此处注册
   },
   data() {
     return {
       // 版本号
-      version: "3.6.0",
-      showUserMenu:false,
-      showTable:8,
-      menuShow:0,
-    };
+      version: '3.6.0',
+      showUserMenu: false,
+      showTable: 8,
+      menuShow: 0
+    }
   },
   methods: {
     goTarget(href) {
-      window.open(href, "_blank");
+      window.open(href, '_blank')
     },
-    userClick(){
-      this.showUserMenu = true;
+    userClick() {
+      this.showUserMenu = true
     },
-    clickMenu(event){
-          console.log(1111);
-          console.log(event);
+    clickMenu(event) {
+      console.log(1111)
+      console.log(event)
     }
-  },
-};
+  }
+}
 </script>
 
 <style lang="scss">
-     .header{
-        height: 58rem;
-        width: 100%;
-        background: url("../assets/picture/title.png") no-repeat;
-        background-size: 100% 100%;
-     }
-     .left_content{
-        height: 337rem;
-        width: 87rem;
-     //    src\assets\picture\bg_menu_1.png
-        background: url("../assets/picture/bg_menu_1.png") no-repeat;
-        background-size: 100% 100%;
-        margin-left:10rem;
-        padding-top:2rem;
-        float: left
-     }
-     .icon_content{
-        text-align: center;
-     }
-     .icon_image{
-        height: 27rem;
-        width: 27rem;
-     }
-     .icon_title{
-        padding-top:3rem;
-        font-size: 7rem;
-        color:white;
-        text-align: center
-     }
-     .center_content{
-        background-color:white;
-        width:670rem;
-        height:330rem;
-        float: right;
-        margin-right:20rem
-     }
-     .icon_class{
-        width:100%;
-        height: 55rem;
-        padding-top:10rem;
-     }
-     .userContent{
-          //   position: absolute; 
-          //   z-index:1002; 
-          //   top: 315rem; 
-          //   left: 95rem; 
-            width: 45rem; 
-            height: 50rem; 
-          //   background-color:rgba(0,0,139,1);
-            padding-top:3rem;
-     }
-     .menu_title{
-          color:#fff;
-          font-size: 6rem;
-          margin-top:2rem;
-          padding-left:7rem
-     }
+.header {
+  height: 58rem;
+  width: 100%;
+  background: url("../assets/picture/title.png") no-repeat;
+  background-size: 100% 100%;
+}
+
+.left_content {
+  height: 337rem;
+  width: 87rem;
+  //    src\assets\picture\bg_menu_1.png
+  background: url("../assets/picture/bg_menu_1.png") no-repeat;
+  background-size: 100% 100%;
+  margin-left: 10rem;
+  padding-top: 2rem;
+  float: left
+}
+
+.icon_content {
+  text-align: center;
+}
+
+.icon_image {
+  height: 27rem;
+  width: 27rem;
+}
+
+.icon_title {
+  padding-top: 3rem;
+  font-size: 7rem;
+  color: white;
+  text-align: center
+}
+
+.center_content {
+  background-color: white;
+  width: 670rem;
+  height: 330rem;
+  float: right;
+  margin-right: 20rem
+}
+
+.icon_class {
+  width: 100%;
+  height: 55rem;
+  padding-top: 10rem;
+}
+
+.userContent {
+  //   position: absolute;
+  //   z-index:1002;
+  //   top: 315rem;
+  //   left: 95rem;
+  width: 45rem;
+  height: 50rem;
+  //   background-color:rgba(0,0,139,1);
+  padding-top: 3rem;
+}
+
+.menu_title {
+  color: #fff;
+  font-size: 6rem;
+  margin-top: 2rem;
+  padding-left: 7rem
+}
 
-     .active{
-         background-color: #041446;
-     }
+.active {
+  background-color: #041446;
+}
 
-     .menu{
-         color:#00ffff
-     }
+.menu {
+  color: #00ffff
+}
 
-     .el-popover {
-          background-color:blue;
-          background: url("../assets/picture/bg_zcd.png") no-repeat;
-          background-size: 100% 100%;
-          border:0px;
-          min-width: 0;
-     }
+.el-popover {
+  background-color: blue;
+  background: url("../assets/picture/bg_zcd.png") no-repeat;
+  background-size: 100% 100%;
+  border: 0px;
+  min-width: 0;
+}
 
 
-     // .popper__arrow::after{
-     //    /*el-popover上边三角表层的颜色---也就是视觉上的角*/
-     //   display: none
-     // }
+// .popper__arrow::after{
+//    /*el-popover上边三角表层的颜色---也就是视觉上的角*/
+//   display: none
+// }
 
-     //  .popper__arrow{
-     //    /*el-popover上边三角表层的颜色---也就是视觉上的角*/
-     //   display: none
-     // }
-     .el-popper .popper__arrow, .el-popper .popper__arrow::after{
-          display: none
-     }
+//  .popper__arrow{
+//    /*el-popover上边三角表层的颜色---也就是视觉上的角*/
+//   display: none
+// }
+.el-popper .popper__arrow, .el-popper .popper__arrow::after {
+  display: none
+}
 
-     // .has-gutter{
-     //      //  background: linear-gradient(blue, pink);
-     //      background-color: #00ffff
-     // }
+// .has-gutter{
+//      //  background: linear-gradient(blue, pink);
+//      background-color: #00ffff
+// }
 
 </style>