使用iframe实现将四个页面合成一个页面，并可以随意切换_四个网页一个屏

作者：我家自动化 | 2024-03-05 15:04:14
踩
四个网页一个屏
任务

将“抄表册管理”、“抄表计划管理”、“执行抄表”、“抄表数据审核”、“抄表数据发布”四个页面整合成一个页面：“计划抄表”，以流程图节点的形式进行串联。
效果如下

这里写图片描述
红箭头所指的地方是一个流程图，每一个节点点击后会显示该节点所对应的页面，而每个页面的显示都要从控制层为切入点进入。
代码

<%@page import="org.apache.commons.lang3.RandomUtils"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ page import="org.springframework.context.i18n.LocaleContextHolder"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>计划抄表</title>
<%@ include file="/WEB-INF/view/head2.jsp" %>
<style type="text/css">
.management .power_menu {
  position: relative;
  left: 0px;
  top: 0px;
  right: auto;
  bottom: auto;
}
.management .power_menu ul {
  overflow: hidden;
  margin-bottom: -2px;
  padding-left: 1px;
  background-color: #fff;
  display: inline-block;
  border-top: 10px solid #fff;
  border-bottom: 10px solid #fff;
  border-left: 10px solid #fff;
}
.management .power_menu li {
  margin-left: -1px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  float: left;
  background: #efefef;
  padding: 0px 15px;
  position: relative;
  z-index: 1;
}
.management .power_menu li.hover {
  color: #fff;
  background: #008feb;
  z-index: 2;
}
.management .power_menu li.hover em.left {
  display: inline-block;
  border: 15px solid #008feb;
  border-left: 15px solid #efefef;
}
.management .power_menu li.hover em.right {
  display: inline-block;
  border: 15px solid #efefef;
  border-left: 15px solid #008feb;
}
.management .power_menu li.hover:last-child em.right {
  display: inline-block;
  border: 15px solid #fff;
  border-left: 15px solid #008feb;
}
.management .power_menu li:last-child em.right {
  display: inline-block;
  border: 15px solid #fff;
  border-left: 15px solid #efefef;
}
.management .power_menu li em.left,
.management .power_menu li em.right {
  display: inline-block;
  border: 15px solid #efefef;
}
.management .power_menu li em.left {
  position: absolute;
  left: -15px;
}
.management .power_menu li em.right {
  position: absolute;
  right: -15px;
}
.management .power_menu li span {
  display: inline-block;
  width: 17px;
  height: 25px;
  line-height: 30px;
  vertical-align: middle;
  margin-right: 5px;
}
.management .power_menu li .meter_book {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIzNkRBQTcyMEEwODExRTc4QUFBQTVDQTNEODMzQUVCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIzNkRBQTczMEEwODExRTc4QUFBQTVDQTNEODMzQUVCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjM2REFBNzAwQTA4MTFFNzhBQUFBNUNBM0Q4MzNBRUIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjM2REFBNzEwQTA4MTFFNzhBQUFBNUNBM0Q4MzNBRUIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7POHVWAAAAm0lEQVR42mLcuHHjfwbSwEIgToBx/Pz8GFig7FogPkKEAS3YBGGGXAHiA0QY8gabIBMDFQALFrF2IObEoV4XiH8C8QSYwKZNm7Aakgl19hMsco+htAGUFgFibRYcNk5Btg0PCADi9VQJk8FjCCxMuIFYAMpmJNeQJZS6pBFNrIIcQxrQxAoGNGDRgQoQOxChXwefIdlQTBQACDAAWkoXk6mGlN4AAAAASUVORK5CYII=) 0px center repeat-x;
}
.management .power_menu li .meter_book_c {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjI2MTM1NjIxMEEwOTExRTdBODBGQkE4MjVDQTVCMjFFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjI2MTM1NjIyMEEwOTExRTdBODBGQkE4MjVDQTVCMjFFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjYxMzU2MUYwQTA5MTFFN0E4MEZCQTgyNUNBNUIyMUUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjYxMzU2MjAwQTA5MTFFN0E4MEZCQTgyNUNBNUIyMUUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5ePebOAAAAnUlEQVR42mL4TzpYAMQMyJiFAQJqgfgIA2HQgk0QZsgVID5AhCFvsAkyMVABsGARawdiThzqdYH4JxBPQBZkBIUUkA4E4g1QsQ9QZz8hwhEiQKzNAA3xAKTQ/gDEBegxgAOD9P2nSpgMHkNgscMNxAKwwCbXkCWUuqQRTayCHEMa0MQKBjRg0YEKEDsQoV8HluzRJUDJnp8UlwAEGAAN4owVgoQiZgAAAABJRU5ErkJggg==) 0px center repeat-x;
}
.management .power_menu li .meter_plan {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkVEQjkyODQ2MEEwODExRTc5NjNFRTIyMDg3OEI3NDk1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkVEQjkyODQ3MEEwODExRTc5NjNFRTIyMDg3OEI3NDk1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RURCOTI4NDQwQTA4MTFFNzk2M0VFMjIwODc4Qjc0OTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RURCOTI4NDUwQTA4MTFFNzk2M0VFMjIwODc4Qjc0OTUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4X1jGcAAACB0lEQVR42pSVPWiTURSGk5g6KIqiBVFBrV0FRRdpEXQQFY1DrQrtIIijYEEkBYmdSidpi0NxcvBncTBBS3UoFTcpWlCCFcVgKy4OrZogQonPkfeD4+X7EnPg4f7k3pfznXPuSbpYLKYaWF3jAIzGHcjlcv+sM1BxFOCoW0dW0HoS1vs7pVLpihfMwg64AZ+hDFu1522jWIJfMKT9PGwIBc1KMKf5HhhLCMEX+A13tL4QHsjGXJrX/ggsplo0L3gOzsMqOAgTsLnB3XIzQTvQrfkReOuyHGe7mgm+kVA0j5KRZN+bCXqh1Qr+UqsxzLi5xW4bdMI7OPQf92/BVJKHV+Gy5u9h1tVbSmX1CHbCaY0/YZniTvNi/sY7zdOzyT6JPNblk1CDGSf4FNaomBfgNbSrImx+FtGKF5zThZTEQhsGe2aX4D50KTTr4B5sgf2Z4FJN7DXv3X4HXIOLulzX13Tj1SfG48pB3gtuh2PWQOClmkRkZ+ADPEjoOMsMN6HXJ8XiNq7MX1fMZvSZu+FVjNZtEmJt7RnctWL3ghOuc4xotKx+Uz12BGJ90Kb5V3WpapiUJDsFD+XpYlyDxVP7fW3k4YGwrwX190QZtRiegB/+AGKW+R57DJGHjeywYmneTcOK+qXFdBP0S2wAb0ezQXk0so8KzaD+Y6yrV+G5eYbYCzv0R4ABALJ2jJ1BDNR6AAAAAElFTkSuQmCC) 0px center repeat-x;
  width: 20px;
}
.management .power_menu li .meter_plan_c {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjExQzUyMUY0MEEwOTExRTdBMkQ3ODAxRjBCQzQ4QkYxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjExQzUyMUY1MEEwOTExRTdBMkQ3ODAxRjBCQzQ4QkYxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTFDNTIxRjIwQTA5MTFFN0EyRDc4MDFGMEJDNDhCRjEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTFDNTIxRjMwQTA5MTFFN0EyRDc4MDFGMEJDNDhCRjEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz60RaXFAAAB6UlEQVR42pTVT0iUQRjH8VfbPHhJRS+1YLt1DewY6BIdRESrg5Wyly5Cl7CDB291ko0gFDqsHsKTXvYgUlS3PYVEsIvJkiKxpRGI0KYmtQTrd+Q3Obzs+776wMeZ992ZZ8f5t16tVvNC2HgU0e6/Bv6UveN4iWXM6rlT5U/sooRhrDh9puQoYur0GN/U4byTyEarVPAHT/R+Ai1uw5jKJRRVv4Jpr358RxVzer7vbxCr02lN7zPY8k4ZbsJ7mp8zuIYs2kP6lqISmgbdqt/AKmohCRNRCT8pka3bxQiK3aiEbqImTX7ltHPY6NTN3F3AZXxG6gT9X+Bt0AjH8VD1dXx09punbbWIi7ilch+/0GDn25wUU7mqJK/UeQAHyDsJ36FZm3kTBXRoR5j6XZTtee3SWWyWeud0EgdIwwykG+1I4D2+oNWf0OpSJ/ucxD+MOO8quK36OXzFU3dR4ujDTXxAr/PZEDawELA4Zh6f4447wgeoaiQT+ua8PpvBvO+/MCPcNrcVZpEyidxVzjo3R0alWdUd7cekb1RpnFX9h26p30Fz6DeIv4iHtMnhjd02o5qjelHUMSuo7Meer82oLuWUe80HxXWN4JJW0myPMfRolXPuz4R30t8KacMzLYSJfbxW8qM2hwIMAPBJIhGPhzpWAAAAAElFTkSuQmCC) 0px center repeat-x;
  width: 20px;
}
.management .power_menu li .meter_execute {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAYAAACQjC21AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkJGRkJBN0UxMEEwODExRTc5NjQ4QkEyQTYwNENFOTc1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkJGRkJBN0UyMEEwODExRTc5NjQ4QkEyQTYwNENFOTc1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QkZGQkE3REYwQTA4MTFFNzk2NDhCQTJBNjA0Q0U5NzUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QkZGQkE3RTAwQTA4MTFFNzk2NDhCQTJBNjA0Q0U5NzUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6kRKyyAAAB9klEQVR42oyUTUhUURTHZ2rMkUAXClqOadjChaRhLaQ2gohgDQkudBVYouDGbW5c6c59ghpBCBUpM6LiQmwR9AGBiAtBIaFSoynCoJgS9Xfh/+R0eYMe+HHuux/nnns+XjSVSkVOkEEY1nge2uxiMpn8b/MZ73ABXPTmqsy4/KTbrcESeAWbcAeGYBt6zJ6rsAxdEIen6XR6CYqCDVHz5EVoiZxe9qBQ4/dwk+fvWw+fwIH5/gdjcEveu1DchQWtF4a91HoYg3Wohgzchnc5vOuSA3lyIoF3O34M78nYoUuejDVBq9lzAUbgJfQZ77qtqwmoNxuewRu4DLNQZgzmw0MYhcewpvn79pkfpQOZkX4A52UkkLh0r+pzGmrd5WR6C/075hlzsiOdkB7Q3B/o11ye1r+ac5WBhytQDBVaKJVela4Bv53+whfF1Mp3F8NrcMnc1i49Abs5suxi+EvJc5Imy1EosVmekO6ERvipA/uesT7Fr1ud4+RRWB1egQ2NM2q/t7AEW0qOy3gzdMCUYvkBz677FR432Q36+rW6wz3tky75rKJ+IWNOGsjwgG/wMKRPz8K5kPiVhszV+Qaz6gr3t5nU03pk2JcNxe8GfIPnqsvjwo6YuDWZ7/EcGZ4z4wril7WLsVP8pjLSP+SRlay/+UiAAQCin3RjZgCp8gAAAABJRU5ErkJggg==) 0px center repeat-x;
  width: 20px;
}
.management .power_menu li .meter_execute_c {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAYAAACQjC21AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjI2Njc5MUREMEEwOTExRTdBOUIzOTlCRjZDOUY0QzFCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjI2Njc5MURFMEEwOTExRTdBOUIzOTlCRjZDOUY0QzFCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjY2NzkxREIwQTA5MTFFN0E5QjM5OUJGNkM5RjRDMUIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjY2NzkxREMwQTA5MTFFN0E5QjM5OUJGNkM5RjRDMUIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5HiaudAAABy0lEQVR42pSUzytEURTH3/AwFn6UqfFjZJSFHaUJZTM7FspCym4aaRY21ixkwT9gZUEpUiyYhaSIhY1Y+FE2JOXH0AzlRzQzmed79R3O3B4vpz7dd88599x7zj33GZZlGQ6MWD+y5uSfZ+RKMajWdH7xXWM4iYjuAXvgDXSDMXBr5UoGbIN+4AbzYAuUZePIgBvW/+RJfKuDmHrKcyAj5mkwDTqAh6XoAeu0lwrfPLuU1Q7n3DEOWv8ovko5Rd8PUGWX8oCoUzt1QdApfNTCSVAIwiLlURnQB5rBPo2LNNaDVxASAf30mQIucML5hQyY1ordR+ME5xERsJE6lW4JGBfrLsGpiTKaWifFOPo4DlP3DoaoK6D9XqyrMxjsEFSAWhq8HI85NoKotmkK3IAqTf8gL+WOR1/gvBzEfunBSdbwiPOo3S1PiDbI3nLApsYRrSuUdNkFbBAOqg/bqFdPa4bPbJO6XtGHB3Y/BzdYEbVQL2OXr+MFXIEEuAb9YJkXo6SFF5fzZCytuM8gHxTa/E+8NromPWASBMEOmAWVYJCBdTkDYRAAcbAEIlmj66uQf8sqW6uchIStiIf5FtNwlgTHR55ISlJ3/hRgAMz63WS6uJVTAAAAAElFTkSuQmCC) 0px center repeat-x;
  width: 20px;
}
.management .power_menu li .meter_check {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkNEREJGM0Q1MEEwODExRTc4QjE1QTEyOEE0QkI0NzQ2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkNEREJGM0Q2MEEwODExRTc4QjE1QTEyOEE0QkI0NzQ2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0REQkYzRDMwQTA4MTFFNzhCMTVBMTI4QTRCQjQ3NDYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0REQkYzRDQwQTA4MTFFNzhCMTVBMTI4QTRCQjQ3NDYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4wB8YpAAABjklEQVR42pzUSygFURzH8cG9XisiUsJCJI9QFhZKkoW4ZUEsSMmCDSV2yrVyJQtR0mXBTqh7WXglEVGsWEqSFUJKkUe+p/6jaZoZw6lP93bOmV//6X/ORIRCoWpN04LI1KzHK2bRg0/zos/n+/nvkaA9zNmEpWEaiWizCjSGqYomcKLZj0tsYt4pMFJ+PzTncYwa1ElglFOYm2EMDP43LBorCEhgLdqR7xTmtShfBS2hAgsyd4BnZDuFTWEL8aagclTh3LB3EIdOYaPIwRoSTEFnhn2qylLMoC8cDsdZhV2gUgKvbIJasYsU3GNAvQ2BXqsG6IH7FkHqTI7DL03oRBmK0GLXTRVYbwpSIx3JWDTMXUuHS/56zu7wjgJTt3Nxo5fudrzIHVVSpapuxOrHxiP3LMll4AgaMGmY6+fLcauHbcsXY9Xmjj5gGMXYkArH8ChHJEA31QHuUmHN6EWWTTVfiJErdYQmvBnWVffXcarCnjD0y+s1IgMdyDOtqeeXVUFuG1Ao93bHadO3AAMA6ddddMTG5uIAAAAASUVORK5CYII=) 0px center repeat-x;
  width: 19px;
}
.management .power_menu li .meter_check_c {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjI1NjI3QTFBMEEwOTExRTdCQUFDRDRCNkQ3MjhBN0YwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjI1NjI3QTFCMEEwOTExRTdCQUFDRDRCNkQ3MjhBN0YwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjU2MjdBMTgwQTA5MTFFN0JBQUNENEI2RDcyOEE3RjAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjU2MjdBMTkwQTA5MTFFN0JBQUNENEI2RDcyOEE3RjAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4eXB7KAAABZElEQVR42pzUvUvDQBjH8aut9WVyEdFBOggqtlBEcBBBUGdxUFzsroMI6urg5uTiIBZUEHFqBSuiCB3EwcX/QbSLFHwDEbE1fk8ucITLJfGBDzSX5HfPJb0Ix3EmcO/41ye2EYewickgIcQ19oS5OrGDM+RQF36lZh8KmHUYbziydeiGZYOWECYwSpgeuP/fsCSK2FTHI+qeAVtYo6F9GXSKKtLauOxuyha2izJaDUEZz41LaLeF9aCiAtssQaM4wAlW0OL3zNzAV5+gedRxjjyecKMekfEFyMCSISihJljXxrrxjlzUv0ZKXdvnGb/ClvzdIMJXFd9Ia2NJ9KIiDxIRwj7UHpU68IBFNOPQ3Zs1jIfcAV149HxVVvWvxgWZ/SihZujoGRvI4lJ1WMALBjGNPBbkMuewjJTP8n7QhCJuMYsv7fwYZEN3sb9XGlwzOMak6shba7LzsC8ggzjKtot+BRgA5UUOqF8qEBsAAAAASUVORK5CYII=) 0px center repeat-x;
  width: 19px;
}
.management .power_menu li .meter_record {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkQ5RTNBODREMEEwODExRTdCRDM0OTZBNzZERjdCMDY3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkQ5RTNBODRFMEEwODExRTdCRDM0OTZBNzZERjdCMDY3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RDlFM0E4NEIwQTA4MTFFN0JEMzQ5NkE3NkRGN0IwNjciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RDlFM0E4NEMwQTA4MTFFN0JEMzQ5NkE3NkRGN0IwNjciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz71zVOhAAABF0lEQVR42mLcuHEjAx7ADMR7gdgeyj8JxHZA/AumwM/PD66YiQE/kIEa1AnE9UBsDsTquBSDDGPBYxgjlN4BxJuQXIvTsHdArM9ABQAyjBeIBalhGAuZ+kBhlwrSv2nTpudAuhEYET/INWwWEPMD8QMgjgHiO0A8l4lMw0AGLQBiByD+Ag0qlKQBiqW5QHwBiM8DcS05EQADZkCcBDXoCRA3ATEXuYaxQ+lGqAtJjiAmBiqCEWIYcgC/hdLbgJgTWsy8AeJ/QDwHiP9C5d9B1WYAcQA0jX1ANgyUxi5Dk4Y+UknxDIhDkMqzOiB+BMSJQBwP1bcCiJeBixhg4XgLqmApEP+nwJfvQC5LA+LlQDyPwiD7CBBgAPpCNmM1QttMAAAAAElFTkSuQmCC) 0px center repeat-x;
  width: 20px;
}
.management .power_menu li .meter_record_c {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjI0RjY5NzU2MEEwOTExRTc4MEY4OURFQkI5NTIzOEQwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjI0RjY5NzU3MEEwOTExRTc4MEY4OURFQkI5NTIzOEQwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjRGNjk3NTQwQTA5MTFFNzgwRjg5REVCQjk1MjM4RDAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjRGNjk3NTUwQTA5MTFFNzgwRjg5REVCQjk1MjM4RDAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6iMV9IAAABC0lEQVR42uTUMUoDQRTG8ecmGAyI5AQ5gaTT0j2ChaUgCoFcwkCscgZJIE1C6hRiaZkugp1YiIhp4pLCQgQd/yNfyDarONkuD37MsvvmY3dnGHPO2S8KuHHLGmMzq9/+CKsqpI2mrnez+iMzK1p2bWi8xkjXhaxmH5agZjmUD9tGJY+wYuC8fdQ1f4oW3kPDLrGDRxzjAd0oMMwH9RDjTb/K0mF+lbq4xQTnIQuwqD2cKegZFyiHhpU0tvSG/16gyHKsNQlL/+BXjVfYwgdm+EIHn3qeqLeBQ+2xeTrM77E7bY1a6qR4wREOdK+JJ5ziRPOGGPwcMZxD92row63wlYk/1GJM3eo1/xZgAPy77SdIC3EZAAAAAElFTkSuQmCC) 0px center repeat-x;
  width: 20px;
}
ul, ol {
    margin: 0 0 0px 0px;
    padding: 0;
}   
</style>
</head>
<body style="height:100%">
<div class="management">
    <div class="power_menu">
        <ul>
            <li class="hover" value="0"><span class=" meter_book"></span>抄表册管理<em class="right"></em></li>
            <li value="1"><em class="left"></em><span class=" meter_plan"></span>抄表计划管理<em class="right"></em></li>
            <li value="2"><em class="left"></em><span class=" meter_execute"></span>抄表执行<em class="right"></em></li>
            <li value="3"><em class="left"></em><span class=" meter_check"></span>抄表结果审核<em class="right"></em></li>
            <li value="4"><em class="left"></em><span class=" meter_record"></span>发布数据记录<em class="right"></em></li>
        </ul>
    </div>
</div>

<div>
    <iframe id="iframe_0" src="${basePath}/meterReading/book/show.do?menuId=41" style="padding: 0px; width: 100%;" frameborder="no" border="0"  scrolling="yes" allowtransparency="yes"></iframe>
</div>

<script type="text/javascript">
var iframeHeight = $(window).height()*0.9;
$("#iframe_0").height(iframeHeight);

    $(".power_menu").on("click","li",function(){
        $(this).addClass("hover").siblings("li").removeClass("hover");

        $(".meter_book").removeClass("meter_book_c");
        $(".meter_plan").removeClass("meter_plan_c");
        $(".meter_execute").removeClass("meter_execute_c");
        $(".meter_check").removeClass("meter_check_c");
        $(".meter_record").removeClass("meter_record_c");

        switch($(this).val())
        {
            case 0:
                $(".meter_book").addClass("meter_book_c");
                document.getElementById("iframe_0").src="${basePath}/meterReading/book/show.do?menuId=41";
                break;
            case 1:
                $(".meter_plan").addClass("meter_plan_c");
                document.getElementById("iframe_0").src="${basePath}/meterReading/meterPlan/show.do?menuId=42";
                break;
            case 2:
                $(".meter_execute").addClass("meter_execute_c");
                document.getElementById("iframe_0").src="${basePath}/meterReading/execute/show.do?menuId=43";
                break;
            case 3:
                $(".meter_check").addClass("meter_check_c");
                document.getElementById("iframe_0").src="${basePath}/meterReading/check/showMeterRecordCheck.do?menuId=45";
                break;
            case 4:
                $(".meter_record").addClass("meter_record_c");
                document.getElementById("iframe_0").src="${basePath}/meterReading/pub/showMeterRecordPubList.do?menuId=44";
                break;
            default:
                break;
        }
        if($(this).val()=='0'){
            $(".meter_book").addClass("meter_book_c");
        }
    }).find('li:first').trigger('click');
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
结尾

感兴趣的小伙伴可以加入我们的QQ群：372702757
本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】