HTML前端基本界面，登录界面后台界面，修改shiro，导入静态组件库css，前端图片

.idea/.gitignore

@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml

.idea/encodings.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Encoding">
+    <file url="file://$PROJECT_DIR$/src/main/java" charset="UTF-8" />
+  </component>
+</project>

.idea/misc.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ExternalStorageConfigurationManager" enabled="true" />
+  <component name="MavenProjectsManager">
+    <option name="originalFiles">
+      <list>
+        <option value="$PROJECT_DIR$/pom.xml" />
+      </list>
+    </option>
+  </component>
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_17" default="true" project-jdk-name="17" project-jdk-type="JavaSDK" />
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

src/main/java/com/smart/common/config/FileConfig.java

@@ -1,24 +1,24 @@
-package com.smart.common.config;
-
-import org.springframework.beans.factory.annotation.Value;
-import org.springframework.context.annotation.Configuration;
-import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
-import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
-
-/**
- * file映射项目外文件夹
- */
-@Configuration //定义配置信息
-public class FileConfig implements WebMvcConfigurer {//继承，配置Web MVC的相关设置
-
-	// 从配置文件中读取文件路径
-	@Value("${file.path}")
-	private String filePath;
-
-	// 重写addResourceHandlers方法，用于添加资源处理器
-	@Override
-	public void addResourceHandlers(ResourceHandlerRegistry registry) {
-		// 注册一个资源处理器，将/file/**的URL请求映射到指定的文件路径下
-		registry.addResourceHandler("/file/**").addResourceLocations("file:" + filePath + "/");
-	}
-}
+//package com.smart.common.config;
+//
+//import org.springframework.beans.factory.annotation.Value;
+//import org.springframework.context.annotation.Configuration;
+//import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
+//import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
+//
+///**
+// * file映射项目外文件夹
+// */
+//@Configuration //定义配置信息
+//public class FileConfig implements WebMvcConfigurer {//继承，配置Web MVC的相关设置
+//
+//	// 从配置文件中读取文件路径
+//	@Value("${file.path}")
+//	private String filePath;
+//
+//	// 重写addResourceHandlers方法，用于添加资源处理器
+//	@Override
+//	public void addResourceHandlers(ResourceHandlerRegistry registry) {
+//		// 注册一个资源处理器，将/file/**的URL请求映射到指定的文件路径下
+//		registry.addResourceHandler("/file/**").addResourceLocations("file:" + filePath + "/");
+//	}
+//}

src/main/java/com/smart/common/shiro/ShiroConfig.java

@@ -0,0 +1,144 @@
+package com.smart.common.shiro;
+
+
+import at.pollux.thymeleaf.shiro.dialect.ShiroDialect;
+import org.apache.shiro.codec.Base64;
+import org.apache.shiro.mgt.SecurityManager;
+import org.apache.shiro.mgt.SessionsSecurityManager;
+import org.apache.shiro.spring.LifecycleBeanPostProcessor;
+import org.apache.shiro.spring.web.ShiroFilterFactoryBean;
+import org.apache.shiro.web.mgt.CookieRememberMeManager;
+import org.apache.shiro.web.mgt.DefaultWebSecurityManager;
+import org.apache.shiro.web.servlet.SimpleCookie;
+import org.apache.shiro.web.session.mgt.DefaultWebSessionManager;
+import org.springframework.aop.framework.autoproxy.DefaultAdvisorAutoProxyCreator;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.context.annotation.DependsOn;
+
+import javax.crypto.KeyGenerator;
+import javax.crypto.SecretKey;
+import java.security.NoSuchAlgorithmException;
+import java.util.LinkedHashMap;
+import java.util.Map;
+
+/**
+ * Shiro权限配置
+ * 安全框架 执行身份验证、授权、密码、注册等管理
+ */
+@Configuration
+public class ShiroConfig {
+
+    //配置UserRealm Bean
+    @Bean
+    public UserRealm userRealm() {
+        return new UserRealm();
+    }
+
+    // 创建 ShiroFilterFactoryBean，用于配置过滤规则
+    @Bean
+    public ShiroFilterFactoryBean shiroFilterFactoryBean (SecurityManager securityManager) {
+        ShiroFilterFactoryBean shiroFilterFactoryBean = new ShiroFilterFactoryBean();
+        shiroFilterFactoryBean.setSecurityManager(securityManager);
+        // 配置登录页面和未授权页面
+        shiroFilterFactoryBean.setLoginUrl("/login.html");
+        shiroFilterFactoryBean.setUnauthorizedUrl("/403");
+        // 设置过滤器链，指定资源的访问权限
+        Map<String, String> filterChainDefinitionMap = new LinkedHashMap<>();
+        // 静态文件放行
+        filterChainDefinitionMap.put("/css/**","anon");
+        filterChainDefinitionMap.put("/lib/**","anon");
+        filterChainDefinitionMap.put("/images/**","anon");
+        filterChainDefinitionMap.put("/js/**","anon");
+        filterChainDefinitionMap.put("/file/**","anon");
+        // 登录注册放行
+        filterChainDefinitionMap.put("/login.html","anon");
+        filterChainDefinitionMap.put("/sys/logout","anon");
+        filterChainDefinitionMap.put("/sys/login","anon");
+        filterChainDefinitionMap.put("/sys/captcha","anon");
+        // 其他资源需要用户身份认证
+        filterChainDefinitionMap.put("/**", "user");
+        shiroFilterFactoryBean.setFilterChainDefinitionMap(filterChainDefinitionMap);
+        return shiroFilterFactoryBean;
+    }
+
+    // 创建 SecurityManager Bean
+    @Bean
+    public SessionsSecurityManager securityManager() {
+        DefaultWebSecurityManager securityManager = new DefaultWebSecurityManager();
+        securityManager.setRealm(userRealm());
+        securityManager.setSessionManager(sessionManager());
+        securityManager.setRememberMeManager(rememberMeManager());
+        return securityManager;
+    }
+
+    // 创建 DefaultWebSessionManager Bean，用于管理会话
+    @Bean
+    public DefaultWebSessionManager sessionManager() {
+        DefaultWebSessionManager sessionManager = new DefaultWebSessionManager();
+        sessionManager.setSessionIdUrlRewritingEnabled(false);
+        long time = 2*60*60*1000;  // 设置会话过期时间为2小时
+        sessionManager.setGlobalSessionTimeout(time);
+        return sessionManager;
+    }
+
+    // 创建 ShiroDialect Bean，用于支持在Thymeleaf模板中使用Shiro标签
+    @Bean
+    public ShiroDialect shiroDialect(){
+        return new ShiroDialect();
+    }
+
+    // 创建 LifecycleBeanPostProcessor，用于在Spring容器管理的Bean初始化和销毁时调用Shiro的生命周期方法
+    @Bean
+    public LifecycleBeanPostProcessor lifecycleBeanPostProcessor() {
+        return new LifecycleBeanPostProcessor();
+    }
+
+    // 创建 DefaultAdvisorAutoProxyCreator Bean，用于自动代理被Spring管理的Bean
+    @Bean
+    @DependsOn("lifecycleBeanPostProcessor")
+    public static DefaultAdvisorAutoProxyCreator getDefaultAdvisorAutoProxyCreator(){
+        DefaultAdvisorAutoProxyCreator defaultAdvisorAutoProxyCreator=new DefaultAdvisorAutoProxyCreator();
+        defaultAdvisorAutoProxyCreator.setUsePrefix(true);
+        return defaultAdvisorAutoProxyCreator;
+    }
+
+    /**
+     * cookie管理对象
+     * @return
+     */
+    // 创建 CookieRememberMeManager Bean，用于管理RememberMe功能的Cookie
+    @Bean
+    public CookieRememberMeManager rememberMeManager(){
+        CookieRememberMeManager cookieRememberMeManager = new CookieRememberMeManager();
+        cookieRememberMeManager.setCookie(rememberMeCookie());
+        /**
+         * 设置RememberMe功能的密钥，生产环境中需要进行修改
+         */
+        cookieRememberMeManager.setCipherKey(Base64.decode("5AvVhmFLUs0KTA3Kprsdag=="));
+        return cookieRememberMeManager;
+    }
+
+    // 创建 RememberMe功能的Cookie Bean
+    @Bean
+    public SimpleCookie rememberMeCookie(){
+        SimpleCookie simpleCookie = new SimpleCookie("rememberMe");
+        simpleCookie.setHttpOnly(true);
+        simpleCookie.setPath("/");
+        simpleCookie.setMaxAge(259200); // 设置Cookie的有效期为3天
+        return simpleCookie;
+    }
+
+    /**
+     * 秘钥生成方式
+     * @param args
+     * @throws NoSuchAlgorithmException
+     */
+    //生成秘钥的密钥对，使用AES算法生成。
+    public static void main(String[] args) throws NoSuchAlgorithmException {
+        // 可通过以下代码生成对应Key
+        KeyGenerator keygen = KeyGenerator.getInstance("AES");
+        SecretKey aesKey = keygen.generateKey();
+        System.out.println(Base64.encodeToString(aesKey.getEncoded()));
+    }
+}

src/main/java/com/smart/common/shiro/UserRealm.java

@@ -0,0 +1,64 @@
+package com.smart.common.shiro;
+
+import com.smart.common.util.ShiroUtils;
+import com.smart.module.sys.entity.SysUser;
+import com.smart.module.sys.service.SysUserService;
+import org.apache.shiro.authc.*;
+import org.apache.shiro.authz.AuthorizationInfo;
+import org.apache.shiro.authz.SimpleAuthorizationInfo;
+import org.apache.shiro.realm.AuthorizingRealm;
+import org.apache.shiro.subject.PrincipalCollection;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.context.annotation.Lazy;
+
+import java.util.HashSet;
+import java.util.List;
+
+/**
+ * 用户认证
+ */
+public class UserRealm extends AuthorizingRealm {
+
+    @Autowired //注入了 SysUserService，用于获取用户角色和权限信息
+    @Lazy
+    private SysUserService userService;
+
+    /**
+     * 获取授权信息
+     * 在用户成功登录后会调用该方法，根据登录用户的信息获取其拥有的角色和权限，并返回授权信息。
+     * @param principals 用户身份信息
+     * @return 授权信息
+     */
+    @Override
+    protected AuthorizationInfo doGetAuthorizationInfo(PrincipalCollection principals) {
+        Long userId = ShiroUtils.getUserId(); // 获取当前登录用户的ID
+        SimpleAuthorizationInfo info = new SimpleAuthorizationInfo();
+        List<String> rolesSet = userService.listUserRoles(userId); // 查询用户拥有的角色列表
+        List<String> permsSet = userService.listUserPerms(userId); // 查询用户拥有的权限列表
+        info.setRoles(new HashSet<>(rolesSet)); // 设置用户的角色
+        info.setStringPermissions(new HashSet<>(permsSet)); // 设置用户的权限
+        return info;
+    }
+
+    /**
+     * 获取认证信息
+     * 在用户登录时会调用该方法，使用用户提供的用户名和密码进行认证，并返回认证结果。
+     * @param authenticationToken 用户身份信息和凭证（用户名和密码）
+     * @return 认证信息
+     * @throws AuthenticationException 认证失败时抛出的异常
+     */
+    @Override
+    protected AuthenticationInfo doGetAuthenticationInfo(AuthenticationToken authenticationToken)
+            throws AuthenticationException {
+        String username = (String) authenticationToken.getPrincipal(); // 获取用户名
+        String password = new String((char[]) authenticationToken.getCredentials()); // 获取密码
+        SysUser user = userService.getUser(username); // 根据用户名查询用户信息
+        if (user == null) {
+            throw new UnknownAccountException("账户不存在"); // 如果用户不存在，则抛出未知账户异常
+        }
+        if(!password.equals(user.getPassword())) {
+            throw new IncorrectCredentialsException("密码不正确"); // 如果密码不正确，则抛出密码不正确异常
+        }
+        return new SimpleAuthenticationInfo(user, password, getName()); // 返回认证成功的信息
+    }
+}

src/main/resources/application-dev.properties

@@ -66,3 +66,13 @@ spring.datasource.hikari.max-lifetime =30000
 
 spring.datasource.hikari.connection-test-query=SELECT 1
 # ??????????????????
+
+# ===================================
+# MQTT
+# ===================================
+spring.mqtt.username = admin
+spring.mqtt.password = public
+spring.mqtt.url = tcp://10.136.7.105:1883
+spring.mqtt.client.id = HDC-188
+spring.mqtt.default.topic = topic
+spring.mqtt.default.completionTimeout = 3000

src/main/resources/static/css/common.css

@@ -0,0 +1,96 @@
+@import "../lib/fonts/iconfont.css";
+
+[v-cloak]{display:none!important}
+.ok-body{padding:10px}
+
+/*面包屑导航*/
+.ok-body-breadcrumb{position:relative;line-height:39px;height:32px;border-bottom:1px solid #e5e5e5}
+.ok-body-breadcrumb .layui-btn{line-height:2.4em;margin-top:3px;float:right}
+.ok-body-breadcrumb .layui-btn .layui-icon{line-height:32px}
+
+/*多条件搜索框*/
+.ok-search{margin-top:15px}
+.ok-search .layui-input{width:190px;padding-left:10px;margin-left:10px;float:left}
+.ok-search .layui-input:first-child{margin-left:0}
+.ok-search .layui-btn{margin-left:10px}
+@media screen and (max-width:768px){
+    .ok-search .layui-input{width:100%;margin-left:0;margin-top:10px}
+    .ok-search .layui-btn{margin-left:0;margin-top:10px}
+}
+
+/*表单*/
+.ok-form{margin-top:10px}
+
+/*滚动条样式一*/
+::-webkit-scrollbar{width: 8px; height: 8px;}
+::-webkit-scrollbar-button:vertical{display: none;}
+::-webkit-scrollbar-track, ::-webkit-scrollbar-corner{background-color: #e2e2e2;}
+::-webkit-scrollbar-thumb{border-radius: 0; background-color: rgba(0,0,0,.3);}
+::-webkit-scrollbar-thumb:vertical:hover{background-color: rgba(0,0,0,.35);}
+::-webkit-scrollbar-thumb:vertical:active{background-color: rgba(0,0,0,.38);}
+
+/*滚动条样式二*/
+/*
+.not-scroll::-webkit-scrollbar{height:0;width:0;background:0 0;display:none}
+.scrollBody::-webkit-scrollbar{display:none}
+.scrollBody::-webkit-scrollbar,::-webkit-scrollbar{width:8px;height:8px;background-color:#f5f5f5}
+.scrollBody::-webkit-scrollbar-track,::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.1);background-color:#fff}
+.scrollBody::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#a8a8a8}
+.ok-body-scroll::-webkit-scrollbar,::-webkit-scrollbar{width:8px;height:8px;background-color:#fff}
+.ok-body-scroll::-webkit-scrollbar-track,::-webkit-scrollbar-track{background-color:#fff;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.2)}
+.ok-body-scroll::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.1);background-color:#dadada}
+*/
+
+/**占满屏幕**/
+.page-fill{width:100%;height:100%;display:block;box-sizing:border-box}
+
+/**card**/
+.ok-card-body{padding:20px;position:relative;width:100%;box-sizing:border-box}
+.ok-card-body-tb{padding:20px 0;position:relative;width:100%;box-sizing:border-box}
+.ok-card-title{color:#212529;font-size:16px;padding-bottom:20px;font-weight:bolder}
+.ok-card{-webkit-box-shadow:0 0 20px rgba(0,0,0,.08);box-shadow:0 0 20px rgba(0,0,0,.08);border-radius:5px}
+
+/**断行**/
+.wp1{word-break:break-all}
+
+/*只对英文起作用，以字母作为换行依据*/
+.wp2{word-wrap:break-word}
+
+/*只对英文起作用，以单词作为换行依据*/
+.wp3{white-space:pre-wrap}
+
+/*只对中文起作用，强制换行*/
+.wp4{white-space:nowrap}
+
+/**边距**/
+.p0{padding:0!important}
+.ptb0{padding-top:0!important;padding-bottom:0!important}
+.plr0{padding-left:0!important;padding-right:0!important}
+.ptb20{padding-top:20px!important;padding-bottom:20px!important}
+.plr20{padding-left:20px!important;padding-right:20px!important}
+.pl20{padding-left:20px!important}
+.pr20{padding-right:20px!important}
+
+/**浮动**/
+.f-left{float:left}
+.f-right{float:right}
+.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
+
+/**卡片样式**/
+.my-cart{-webkit-box-shadow:0 0 20px rgba(0,0,0,.08);box-shadow:0 0 20px rgba(0,0,0,.08);border-radius:5px}
+
+/**颜色**/
+.bg-white{background:#fff!important}
+.col-white{color:#fff!important}
+.childrenBody{padding:15px;background-color:#f1f2f7}
+.ok-card-list{padding:15px}
+.ok-card-list .ok-big-font{font-size:36px;color:#666;line-height:36px;padding:5px 0 10px;overflow:hidden;text-overflow:ellipsis;word-break:break-all;white-space:nowrap}
+
+/*进度条颜色*/
+.per-bg-a{background:#00c292!important}
+.per-bg-b{background:#9a66e4!important}
+.per-bg-c{background:#03a9f3!important}
+.per-bg-d{background:#fb9678!important}
+.per-bg-e{background:#ed4014!important}
+.per-bg-f{background:#ab8ce4!important}
+.per-bg-g{background:#e46cbb!important}

src/main/resources/static/css/index.css

@@ -0,0 +1,211 @@
+ @charset "utf-8";
+/* css */
+* { margin: 0; padding: 0 }
+body { font: 15px "Microsoft YaHei", Arial, Helvetica, sans-serif; color: #666; line-height: 1.5; }
+img { border: 0; display: block }
+ul, li { list-style: none; }
+a { text-decoration: none; color: #333; }
+a:hover { text-decoration: none; }
+.blank { height: 10px; overflow: hidden; width: 100%; margin: auto; clear: both }
+.fl { float: left }
+.fr { float: right }
+header { position: fixed; top: 0; left: 0; z-index: 10; margin: 0; width: 100%; height: 48px; overflow: hidden; background: #313842; line-height: 48px; }
+.logo { font-size: 22px; color: #FFF; margin-left: 20px; float: left }
+.logo a { color: #fff }
+.top-nav { float: left; margin-left: 60px }
+.top-nav ul { overflow: hidden }
+.top-nav ul li { display: block; float: left; padding-right: 40px }
+.top-nav ul li a { color: #FFF }
+.top-nav ul li a:hover { color: #ccc }
+.top-nav ul li.selected a, .top-nav ul li a#selected { color: #09b1b9; }
+.search { background: #FFF; overflow: hidden; width: 260px; float: right; margin: 10px 30px 0 0; border-radius: 20px; }
+.search .input_text { padding-left: 5px; float: left; outline: none; border: 0; height: 30px; line-height: 30px; }
+.search .input_submit { background: url(../images/search.png) no-repeat center right 10px; color: #FFF; float: right; width: 32px; border: none; cursor: pointer; outline: none; height: 30px; line-height: 30px; }
+aside { width: 180px; float: left; overflow: hidden; position: fixed; color: #fff; }
+.about { line-height: 26px; font-size: 14px; padding: 0 10px; margin-top: 50px; }
+.about i { display: block; margin: 20px auto; width: 100px; height: 100px; }
+.about i img { width: 100%; display: block; border-radius: 50%; margin: auto }
+.about p { }
+.weixin { width: 100%; text-align: center; }
+.weixin img { width: 80%; margin: 40px auto 10px }
+
+.welcome { border-bottom: 1px solid #E1E1E1; background: url(../images/zhuye.png) no-repeat left 20px center #fff; line-height: 42px; padding-left: 40px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
+.picbox { border: 1px solid #E1E1E1; margin: 20px; background: #fff; overflow: hidden; }
+.pictitle { background: #F8F8F8; height: 40px; line-height: 40px; text-align: center; font-size: 16px; border-bottom: 1px solid #E1E1E1; }
+.pictitle a { color: #666; }
+.pictitle a:hover { color: #000 }
+/*gundong*/
+.Box_con { position: relative; margin: 20px 60px; }
+.Box_con .btnl { position: absolute; }
+.Box_con .btn { display: block; width: 65px; height: 65px; position: absolute; top: 40px; cursor: pointer; }
+.Box_con .btnl { background: url(../images/cp3.png) no-repeat center; left: -60px; }
+.Box_con .btnl:hover { background: url(../images/cp4.png) no-repeat center; }
+.Box_con .btnr { background: url(../images/cp1.png) no-repeat center; right: -60px; }
+.Box_con .btnr:hover { background: url(../images/cp2.png) no-repeat center; }
+.Box_con .conbox { position: relative; overflow: hidden; }
+.Box_con .conbox ul { position: relative; list-style: none; overflow: hidden; }
+.Box_con .conbox ul li { float: left; width: 210px; height: 180px; margin-left: 20px; overflow: hidden; }
+.Box_con .conbox ul li:first-child { margin-left: 0; }
+.Box_con .conbox ul li img { display: block; width: 100%; height: 150px; transition: all 0.5s; }
+.Box_con .conbox ul li p { height: 30px; line-height: 30px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
+.Box_con .conbox ul li:hover p { color: #09B1B9 }
+/*newsbox*/
+.newsbox { margin: 20px 10px }
+.newsbox section { width: 33.3%; float: left; margin-bottom: 20px }
+.newsbox .news { background: #fff; border: 1px solid #E1E1E1; margin: 0 10px }
+.newstitle { line-height: 40px; font-size: 15px; border-bottom: 1px solid #E1E1E1; background: #F8F8F8 url(../images/newslist.png) no-repeat left 14px center; padding: 0 20px 0 46px; font-weight: normal }
+.newstitle span { float: right; font-size: 14px }
+.newstitle span a { color: #666 }
+.newstitle b { display: block; border-left: 1px solid #E1E1E1; padding-left: 10px }
+.newsbox .news ul { padding: 10px }
+.newsbox .news ul li { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 28px; width: 96%; line-height: 28px; font-size: 14px; background: url(../images/li.png) no-repeat left center; padding-left: 15px; }
+.newsbox .news ul li span { float: right; color: #999; font-size: 12px; margin-left: 20px }
+.newsbox .news ul li a:hover { color: #09B1B9; }
+/*link*/
+.links { border: 1px solid #E1E1E1; margin: 0 20px 20px 20px; background: #fff; overflow: hidden; }
+.linktitle { background: #F8F8F8; height: 40px; line-height: 40px; text-align: center; font-size: 16px; border-bottom: 1px solid #E1E1E1; }
+.link-pic { padding: 20px; overflow: hidden }
+.link-pic li { float: left; height: 34px; margin-right: 20px; border: 1px solid #E1E1E1; margin-bottom: 10px }
+.link-pic li img { height: 34px; width: 100% }
+.link-text { padding: 0 20px 20px 20px; overflow: hidden }
+.link-text li { float: left; margin-right: 20px }
+.link-text li a:hover { color: #09B1B9; }
+.copyright { padding: 0 20px; text-align: center; margin-bottom: 20px; clear: both; }
+.copyright a { color: #666 }
+/*cd-top*/
+.cd-top { display: inline-block; height: 40px; width: 40px; position: fixed; bottom: 40px; right: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); overflow: hidden; text-indent: 100%; white-space: nowrap; background: rgba(0, 0, 0, 0.8) url(../images/top.png) no-repeat center; visibility: hidden; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; z-index: 9999999 }
+.cd-top.cd-is-visible { visibility: visible; opacity: 1; }
+/*blogbox*/
+.blogbox { width: 70%; float: left; }
+.bloglist { margin: 20px; overflow: hidden; border: 1px solid #E1E1E1; background: #fff }
+.bloglist li { overflow: hidden }
+.bloglist h2 { border-top: 1px solid #eee; border-bottom: 1px solid #eee; background: #FDFDFD; font-weight: 400; font-size: 18px; line-height: 40px; padding-left: 20px; position: relative }
+.bloglist h2:before { content: ""; position: absolute; bottom: 0; left: 0; height: 100%; width: 3px; background: #09b1b9 }
+.bloglist li:hover h2 a { color: #09B1B9 }
+.bloglist li:nth-child(1) h2 { border-top: 0 }
+.bloglist li i { display: block; float: right; width: 20%; margin: 20px }
+.bloglist li i img { width: 100% }
+.blogtext { margin: 20px 0 20px 20px; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3; }
+.bloginfo { margin-left: 20px }
+.bloginfo span { padding-left: 20px }
+.bloginfo span, .bloginfo span a { margin-right: 1.5%; color: #999; }
+.bloginfo span a:hover { color: #09B1B9 }
+.bloginfo span:nth-child(1) { background: url(../images/yh.png) no-repeat left center }
+.bloginfo span:nth-child(2) { background: url(../images/sj.png) no-repeat left center }
+.bloginfo span:nth-child(3) { background: url(../images/bq.png) no-repeat left center }
+.bloginfo span:nth-child(4) { background: url(../images/yh.png) no-repeat left center }
+/*rside*/
+.rside { width: 30%; float: right }
+.rside .news { background: #fff; margin: 20px 20px 20px 0; border: 1px solid #e2e2e2; }
+.rside .news ul { padding: 10px }
+.rside .news ul li { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 28px; width: 96%; line-height: 28px; font-size: 14px; background: url(../images/li.png) no-repeat left center; padding-left: 15px; }
+.rside .news ul li span { float: right; color: #999; font-size: 12px; margin-left: 20px; }
+.rside .news ul li a:hover { color: #09B1B9; }
+/* pagelist */
+.pagelist { text-align: center; color: #666; width: 100%; clear: both; margin: 20px 0; padding-top: 20px }
+.pagelist a { color: #666; margin: 0 2px 5px; border: 1px solid #d2d2d2; padding: 5px 10px; display: inline-block; background: #fff; }
+.pagelist a:hover { color: #09B1B9; }
+.pagelist > b { border: 1px solid #09b1b9; padding: 5px 10px; background: #09b1b9; color: #fff; }
+/*contentbox*/
+.contentbox { border: 1px solid #E1E1E1; margin: 20px; background: #FFF; padding: 20px }
+.contitle { font-size: 20px; line-height: 26px; margin-bottom: 20px }
+.contentbox .bloginfo { margin-left: 0 }
+.contentbox .jianjie { margin: 20px 0; background: #f7f7f7; padding: 10px; }
+.jianjie b { color: #09b1b9; margin-right: 5px; }
+.entry p {  margin: 5px 0 10px; color: #666; font-size: 14px; line-height: 180%; word-break: break-all; }
+.entry img { max-width: 100% }
+.down { background: #FFFCEF; border: 1px solid #FFBB76; border-radius: 2px; font-size: 14px; margin: 20px; padding: 15px 20px; line-height: 26px; }
+.down p:first-child { margin-bottom: 15px }
+.downlink { overflow: hidden; margin: 20px 0; }
+.downbtn { background: #1BA1E2; border-radius: 2px; color: #FFFFFF; font-size: 14px; padding: 8px 30px; line-height: 35px; }
+.share { margin: 20px; }
+.nextinfo { margin: 20px 0 }
+.nextinfo p { padding: 4px 20px; }
+.nextinfo a:hover { color: #09B1B9; text-decoration: underline }
+.viewbox { border: 1px solid #E1E1E1; margin: 20px; background: #FFF; }
+.viewbox ul { padding: 10px; overflow: hidden }
+.viewbox ul li { width: 25%; float: left; overflow: hidden }
+.viewbox ul li a { margin: 0 8px; display: block }
+.viewbox ul li i { overflow: hidden; display: block }
+.viewbox ul li img { width: 100% }
+.viewbox ul li p { line-height: 18px; font-size: 14px; color: #666; margin: 10px 0 }
+.viewbox ul li:hover p { color: #09B1B9; }
+.viewbox ul li span { color: #999; font-size: 12px; line-height: 20px; }
+.pinlun { border: 1px solid #E1E1E1; margin: 20px; background: #FFF; }
+.gbok { padding: 20px }
+/*media*/
+#mnav { }
+#mnav a { color: #FFF }
+#mnavh { display: none; width: 30px; height: 40px; float: right; text-align: center; padding: 0 5px }
+.navicon { display: block; position: relative; width: 30px; height: 5px; background-color: #FFFFFF; margin-top: 20px }
+.navicon:before, .navicon:after { content: ''; display: block; width: 30px; height: 5px; position: absolute; background: #FFFFFF; -webkit-transition-property: margin, -webkit-transform; transition-property: margin, -webkit-transform; transition-property: margin, transform; transition-property: margin, transform, -webkit-transform; -webkit-transition-duration: 300ms; transition-duration: 300ms; }
+.navicon:before { margin-top: -10px; }
+.navicon:after { margin-top: 10px; }
+.open .navicon { background: none }
+.open .navicon:before { margin-top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
+.open .navicon:after { margin-top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
+.open .navicon:before, .open .navicon:after { content: ''; display: block; width: 30px; height: 5px; position: absolute; background: #fff; }
+#mside { display: none }
+ @media screen and (min-width: 960px) and (max-width: 1023px) {
+.top-nav { float: right; margin-left: 0 }
+.top-nav ul li { padding-right: 23px; }
+.newsbox .news ul li span { display: none }
+.newsbox .news { margin: 0 5px 0 0 }
+.picbox { margin: 10px }
+.blogtext { -webkit-line-clamp: 2; }
+.bloglist li { margin-bottom: 10px }
+.rside .news ul li span { display: none }
+.bloglist { margin: 10px; }
+.rside .news { margin: 10px 10px 10px 0; }
+.links { margin: 0 10px 10px 10px; }
+.contentbox { margin: 10px }
+.viewbox { margin: 10px }
+.pinlun { margin: 10px }
+}
+ @media screen and (min-width: 768px) and (max-width: 959px) {
+.top-nav { position: fixed; right: 0; float: right; margin-left: 0; background: #323841; width: 200px }
+.top-nav ul li { padding-right: 0 }
+#mnavh { display: block; }
+#nav { display: none; padding-left: 10px; border-left: #09b1b9 10px solid; }
+.search { display: none }
+.rside { display: none }
+.blogbox { width: 100% }
+.contentbox, .viewbox, .pinlun, .picbox { margin: 10px }
+.newsbox { margin: 0; padding: 0 10px; }
+.bloginfo { margin-bottom: 20px }
+.newsbox section { width: 50% }
+.links { margin: 0 10px 10px 10px }
+.newsbox .news { margin: 0 }
+}
+ @media only screen and (max-width: 767px) {
+body { }
+.navicon { margin-top: 18px }
+.top-nav { position: fixed; right: 0; float: right; margin-left: 0; background: #323841; }
+.top-nav ul li { padding-right: 20px }
+#mnavh { display: block; }
+#nav { display: none; padding-left: 10px; border-left: #09b1b9 10px solid; }
+header { height: 98px; position: initial; }
+.search { width: 80%; margin-bottom: 10px }
+.side { display: none }
+.rside { display: none }
+.blogbox { width: 100% }
+.contentbox, .viewbox, .pinlun, .picbox, .bloglist { margin: 10px }
+.newsbox { margin: 0; padding: 0 10px; }
+.bloginfo { margin-bottom: 20px }
+.newsbox section { width: 100% }
+.links { margin: 0 10px 10px 10px }
+.newsbox .news { margin: 0 }
+.main-content { margin-left: 0; overflow: hidden; margin-top: 0 }
+.licur span { display: block }
+#starlist, .weixin { display: none; }
+.copyright { margin-bottom: 0 }
+#starlist li a { padding-left: 30px }
+#mside { display: block; text-align: center; font-size: 16px; line-height: 42px; background: #09B1B9; color: #fff }
+.but { position: relative; display: block }
+.but:after { position: absolute; content: "X"; width: 10px; top: 0; right: 5%; height: 4px }
+.bloglist h2 { font-size: 16px }
+.contentbox { padding: 10px }
+.down { margin: 0 }
+.viewbox ul li { width: 50%; margin-bottom: 20px }
+.nextinfo p { padding: 0 5px }
+}

src/main/resources/static/css/login_new.css

@@ -0,0 +1,118 @@
+.layui-form {
+	width: 320px !important;
+	margin: auto !important;
+	margin-top: 160px !important;
+}
+
+.layui-form button {
+	width: 100% !important;
+	height: 44px !important;
+	line-height: 44px !important;
+	font-size: 16px !important;
+	background-color: #5FB878 !important;
+	font-weight: 550 !important;
+}
+
+.layui-form-checked[lay-skin=primary] i {
+	border-color: #5FB878 !important;
+	background-color: #5FB878 !important;
+	color: #fff !important;
+}
+
+.layui-tab-content {
+	margin-top: 15px !important;
+	padding-left: 0px !important;
+	padding-right: 0px !important;
+}
+
+.layui-form-item {
+	margin-top: 20px !important;
+}
+
+.layui-input {
+	height: 44px !important;
+	line-height: 44px !important;
+	padding-left: 15px !important;
+	border-radius: 3px !important;
+}
+
+.layui-input:focus {
+	box-shadow: 0px 0px 3px 1px #5FB878 !important;
+}
+
+.logo {
+	width: 60px !important;
+	margin-top: 10px !important;
+	margin-bottom: 10px !important;
+	margin-left: 20px !important;
+}
+
+.title {
+	font-size: 30px !important;
+	font-weight: 550 !important;
+	margin-left: 20px !important;
+	color: #5FB878 !important;
+	display: inline-block !important;
+	height: 60px !important;
+	line-height: 60px !important;
+	margin-top: 10px !important;
+	position: absolute !important;
+}
+
+.desc {
+	width: 100% !important;
+	text-align: center !important;
+	color: gray !important;
+	height: 60px !important;
+	line-height: 60px !important;
+}
+
+body {
+	background-repeat:no-repeat;
+	background-color: whitesmoke;
+	background-size: 100%;
+	height: 100%;
+ }
+
+.code {
+	float: left;
+	margin-right: 13px;
+	margin: 0px !important;
+	border: #e6e6e6 1px solid;
+	display: inline-block!important;
+}
+
+.codeImage {
+	float: right;
+	height: 42px;
+	border: #e6e6e6 1px solid;
+}
+
+.pear-btn {
+	display: inline-block;
+	line-height: 38px;
+	white-space: nowrap;
+	cursor: pointer;
+	background-color: #fff;
+	border: 1px solid #dcdfe6;
+	color: #606266;
+	text-align: center;
+	box-sizing: border-box;
+	outline: none;
+	transition: 0.1s;
+	font-weight: 500;
+	padding: 0 18px;
+	height: 38px;
+	font-size: 14px;
+	border-radius: 4px;
+}
+
+.pear-btn-success {
+	background-color: #67c23a !important;
+}
+.pear-btn-danger,
+.pear-btn-warming,
+.pear-btn-success,
+.pear-btn-primary {
+	color: #fff !important;
+}

src/main/resources/static/css/login_reset.css

@@ -0,0 +1,35 @@
+@charset "utf-8";
+/* CSS Document */
+/*Reset*/
+*{box-sizing:content-box;}
+a:hover, a:focus{text-decoration:none;}
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
+table{border-collapse:collapse;border-spacing:0;}
+body{-webkit-text-size-adjust:none;}
+fieldset,img{border:0;}
+img{ vertical-align: top; max-width: 100%; }
+address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}
+ol,ul{list-style:none;}
+caption,th{text-align:left;}
+h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
+q:before,q:after{content:'';}
+abbr,acronym {border:0;}
+.clearfix:after{visibility:hidden;display: block;font-size:0;content:" ";clear:both;height:0;}
+* html .clearfix{ zoom: 1; } /* IE6 */
+*:first-child+html .clearfix { zoom: 1; } /* IE7 */
+.cli{ clear:both; font-size:0; height:0; overflow:hidden;display:block;}
+.lclear{clear:left;font-size:0;height:0;overflow:hidden;}	
+.fl{float:left;}
+.fr{float:right;}
+
+/* ֹ
+iframe{nifm2:expression(this.src='about:blank',this.outerHTML='');}
+script{no2js:expression((this.src.toLowerCase().indexOf('http')==0)?document.close():'');}
+*/
+/* ıԼ˶
+div{word-wrap: break-word;word-break: normal;}  
+p{text-align:justify; text-justify:inter-ideograph;}
+*/
+/*general*/
+body{font-size:12px;font-family:'微软雅黑',"宋体","Arial Narrow",Helvetica,sans-serif;color:#000;line-height:1.2;text-align:left;}
+a{color:#333;text-decoration:none;}

src/main/resources/static/css/login_style.css

@@ -0,0 +1,113 @@
+html,body{ 
+	width:100%;
+	height:100%;
+}
+
+canvas{
+  display:block;
+  vertical-align:bottom;
+}
+
+.count-particles{
+  background: #000022;
+  position: absolute;
+  top: 48px;
+  left: 0;
+  width: 80px;
+  color: #13E8E9;
+  font-size: .8em;
+  text-align: left;
+  text-indent: 4px;
+  line-height: 14px;
+  padding-bottom: 2px;
+  font-family: Helvetica, Arial, sans-serif;
+  font-weight: bold;
+}
+
+.js-count-particles{
+  font-size: 1.1em;
+}
+
+#stats,
+.count-particles{
+  -webkit-user-select: none;
+  margin-top: 5px;
+  margin-left: 5px;
+}
+
+#stats{
+  border-radius: 3px 3px 0 0;
+  overflow: hidden;
+}
+
+.count-particles{
+  border-radius: 0 0 3px 3px;
+}
+
+
+#particles-js{
+	width: 100%;
+	height: 100%;
+	position: relative;
+	background-image: url(../images/bg_login.jpg);
+	background-position: 50% 50%;
+	background-size: cover;
+	background-repeat: no-repeat;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.sk-rotating-plane {
+	display: none;
+    width: 80px;
+    height: 80px;
+    margin: auto;
+    background-color: white;
+    -webkit-animation: sk-rotating-plane 1.2s infinite ease-in-out;
+    animation: sk-rotating-plane 1.2s infinite ease-in-out;
+    z-index: 1;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-left: -40px;
+    margin-top: -80px;
+}
+.sk-rotating-plane.active{display: block;}
+
+@keyframes sk-rotating-plane{
+	0% {
+	    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+	    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+	}
+	50% {
+	    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+	    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+	}
+	100% {
+	    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+	    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+	}
+}
+
+@keyframes login-small{
+	0%{
+		transform: scale(1);-moz-transform: scale(1);	/* Firefox 4 */-webkit-transform: scale(1);	/* Safari 和 Chrome */-o-transform: scale(1);	/* Opera */-ms-transform:scale(1); 	/* IE 9 */
+	}
+	100%{
+		transform: scale(0.2);-moz-transform: scale(0.1);	/* Firefox 4 */-webkit-transform: scale(0.2);	/* Safari 和 Chrome */-o-transform: scale(0.1);	/* Opera */-ms-transform:scale(0.1); 	/* IE 9 */
+	}
+}
+
+.login{z-index: 2;position:absolute;width: 350px;border-radius: 5px;height: 500px;background: white;box-shadow: 0px 0px 5px #333333;top: 50%;left: 50%;margin-top: -250px;margin-left: -175px;transition: all 1s;-moz-transition: all 1s;	/* Firefox 4 */-webkit-transition: all 1s;	/* Safari 和 Chrome */-o-transition: all 1s;	/* Opera */}
+.login-top{font-size: 24px;margin-top: 100px;text-align:center;box-sizing: border-box;color: #333333;margin-bottom: 50px;}
+.login-center{width: 100%;box-sizing: border-box;padding: 0 40px;margin-bottom: 30px;}
+.login-center-img{width: 20px;height: 20px;float: left;margin-top: 5px;}
+.login-center-img>img{width: 100%;}
+.login-center-input{float: left;width: 230px;margin-left: 15px;height: 30px;position: relative;}
+.login-center-input input{z-index: 2;transition: all 0.5s;padding-left: 10px;color: #333333;width: 100%;height: 30px;border: 0;border-bottom: 1px solid #cccccc;border-top: 1px solid #ffffff;border-left: 1px solid #ffffff;border-right: 1px solid #ffffff;box-sizing: border-box;outline: none;position: relative;}
+.login-center-input input:focus{border: 1px solid dodgerblue;}
+.login-center-input-text{background: white;padding: 0 5px;position: absolute;z-index: 0;opacity: 0;height: 20px;top: 50%;margin-top: -10px;font-size: 14px;left: 5px;color: dodgerblue;line-height: 20px;transition: all 0.5s;-moz-transition: all 0.5s;	/* Firefox 4 */-webkit-transition: all 0.5s;	/* Safari 和 Chrome */-o-transition: all 0.5s;	/* Opera */}
+.login-center-input input:focus~.login-center-input-text{top: 0;z-index: 3;opacity: 1;margin-top: -15px;}
+.login.active{-webkit-animation: login-small 0.8s ; animation: login-small 0.8s ;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}
+.login-button{cursor: pointer;width: 250px;text-align: center;height: 40px;line-height: 40px;background-color: dodgerblue;border-radius: 5px;margin: 0 auto;margin-top: 50px;color: white;}
+

src/main/resources/static/css/okadmin.css

@@ -0,0 +1,141 @@
+@import "../lib/layui/css/layui.css";
+@import "../lib/fonts/iconfont.css";
+
+#navBar .layui-nav-child{overflow:hidden;padding:0!important}
+#navBar .layui-nav-child dd,#navBar .layui-nav-itemed .layui-nav-child{overflow:hidden}
+[class*=" ok-icon"],[class^=ok-icon]{line-height:inherit;font-size:16px}
+.not-scroll::-webkit-scrollbar{height:0;width:0;background:0 0;display:none}
+.scrollBody::-webkit-scrollbar{display:none}
+.no-line.layui-this:after{background:0 0!important;color:transparent!important}
+.ok-none-select{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}
+.okadmin-text-center{text-align:center}
+.okadmin-bg-20222A{background:#20222a}
+.post-left220{left:220px!important}
+.flex-vc{display:flex!important;display:-webkit-flex!important;align-items:center!important;justify-content:center!important}
+.pl0{padding-left:0!important}
+.pr0{padding-right:0!important}
+.pl10{padding-left:10px!important}
+.pr10{padding-right:10px!important}
+#noticeQQ{cursor:pointer;color:#ff5722;font-weight:bolder}
+.okadmin-header .layui-nav-bar,.okadmin-header .layui-nav-tree .layui-nav-itemed:after{background:#20222a!important;bottom:auto;top:0!important;height:2px}
+.okadmin-header .layui-nav .layui-this:after{background:0 0!important;color:transparent!important}
+.layadmin-pagetabs .layui-tab-title li.layui-this:after,.layadmin-pagetabs .layui-tab-title li:after,.layadmin-side-shrink .layui-side-menu .layui-nav>.layui-nav-item>.layui-nav-child,.layui-layer-admin .layui-layer-title,.layui-side-menu{background:#001529!important}
+.layui-tab-brief>.layui-tab-title .layui-this{color:#000}
+.ok-tab-title li strong[is-close=false]~i.layui-tab-close,.ok-tab-title li[tab=index] i.layui-tab-close{display:none!important}
+.okadmin .okadmin-header{background:#fff;height:49px;line-height:49px;border-bottom:1px solid #f6f6f6}
+.okadmin-header .layui-nav-item .layui-icon{font-size:16px}
+.okadmin-header .layui-nav .layui-nav-item a,.okadmin-header .layui-nav-child dd.layui-this a{color:#000}
+#userInfo .layui-this,#userInfo .layui-this a{background:0 0}
+#userInfo .layui-this a:hover{background:#f2f2f2}
+.weather{color:#000}
+#tp-weather-widget .tpwthwidt .text_1vUR5ag,#tp-weather-widget .tpwthwidt .title_2I35arv{margin:0!important;color:#000!important}
+.ok-show-menu{font-size:18px}
+.ok-show-menu .layui-icon{font-size:18px!important}
+.ok-show-menu .ok-menu-hide:before{content:"\e66b"}
+#fullScreen i.okicon-screen-restore:before{content:"\e758"}
+.okadmin-header .layui-input-search{display:inline-block;vertical-align:middle;height:32px;border:none;cursor:text}
+.okadmin-header .layui-nav .layui-nav-item{height:49px;line-height:49px}
+.okadmin-header .layui-layout-left .layui-nav-item{margin:0 20px}
+.okadmin-header .layui-layout-left .layui-nav-item.layui-this:after{display:none!important}
+.okadmin-header .layui-layout-left .layui-nav-item a{padding-left:5px;padding-right:5px}
+.okadmin .menu-switch{width:30px;height:30px;position:relative;left:220px;top:16px;color:#fff;text-align:center;line-height:30px;cursor:pointer;z-index:9999}
+.okadmin-header .layui-nav .layui-nav-more{border-color:#000 transparent transparent}
+.okadmin-header .layui-nav .layui-nav-mored,.okadmin-header .layui-nav-itemed>a .layui-nav-more{border-color:transparent transparent #000}
+.okadmin-header .layui-nav-child{top:50px}
+.icon-head-i{font-size:18px;padding-right:5px}
+.ok-left{top:0!important;width:220px!important;z-index:9999}
+.ok-left .okadmin-logo{line-height:49px;text-align:center;color:#fff;font-size:16px;position:fixed;left:0;top:0;z-index:1002;width:220px;height:49px;padding:0 15px;box-sizing:border-box;overflow:hidden;font-weight:300;background-repeat:no-repeat;background-position:center center;background:#20222a}
+.layui-side-menu .layui-nav{width:220px;background:0 0}
+.layui-side-menu .layui-side-scroll{width:240px!important}
+.layui-side-menu .layui-side-scroll:before{content:" ";height:50px;line-height:50px;display:flex;width:1px}
+.okadmin-side .user-photo{width:220px!important;border-top:1px solid #333555}
+.ok-left.layui-side-menu .layui-nav .layui-nav-item .layui-nav-child a,.ok-left.layui-side-menu .layui-nav .layui-nav-item a{height:40px;line-height:40px;padding-left:45px;padding-right:30px;color:#fff}
+.ok-left.layui-side-menu .layui-nav .layui-nav-item.layui-this .layui-nav-child a,.ok-left.layui-side-menu .layui-nav .layui-nav-item.layui-this a{color:#fff!important}
+.ok-left.layui-side-menu .layui-nav-item a:hover{background-color:#4e5465}
+.ok-left.layui-side-menu .layui-this a:hover{background-color:inherit}
+.ok-left.layui-side-menu .layui-nav .layui-nav-item .layui-icon,.ok-left.layui-side-menu .layui-nav .layui-nav-item a i{position:absolute;padding-right:10px;left:20px}
+.ok-left.layui-side-menu .layui-nav .layui-nav-item .layui-nav-child a i{position:static!important;padding-right:10px}
+#navBar .layui-nav-child .layui-nav-child>dd>a{padding-left:65px}
+#navBar .layui-nav-child .layui-nav-child .layui-nav-child>dd>a{padding-left:90px}
+#navBar .layui-nav-child .layui-nav-child .layui-nav-child .layui-nav-child>dd>a{padding-left:115px}
+.ok-left .user-photo{width:200px;height:120px;padding:15px 0 5px}
+.ok-left .user-photo a.img{display:block;width:80px;height:80px;margin:0 auto 10px}
+.ok-left .user-photo a.img img{display:block;width:100%;height:100%;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;border:4px solid #44576b;box-sizing:border-box}
+.ok-left .user-photo p{display:block;width:100%;height:25px;color:#fff;text-align:center;font-size:12px;white-space:nowrap;line-height:25px;overflow:hidden}
+#navBar ul{margin:0!important}
+.ok-tab{background:#f5f7f9}
+.okadmin-pagetabs{padding:0 80px 0 40px;background-color:transparent;width:100%;position:absolute;height:40px;z-index:1}
+.okadmin-tabs-control{height:32px;line-height:32px;position:absolute;top:4px;width:32px;right:4px;text-align:center;cursor:pointer;transition:all .3s;-webkit-transition:all .3s;background:#f5f7f9;z-index:10}
+.okadmin-tabs-control:hover{color:#009688}
+.ok-tab .move-left{left:0;border-left:none}
+.ok-tab .move-right{right:40px}
+.layui-icon-down{right:0}
+.okadmin-tabs-select.layui-nav{position:absolute;left:0;top:0;width:100%;height:100%;padding:0;background:0 0}
+.okadmin-nav a,.okadmin-tab a{cursor:pointer}
+.ok-right-nav-menu{top:0;right:0;width:40px;height:40px;line-height:normal;background:#f5f7f9;display:flex;align-items:center}
+.okadmin-tab{height:32px;line-height:32px;width:32px}
+.okadmin-tab .okadmin-tab-item .okadmin-link{display:block;width:100%;height:100%;background:#fff;border-radius:3px}
+.ok-right-nav-menu:hover .okadmin-tab-item .okadmin-tab-child{display:block!important}
+.okadmin-tab .okadmin-tab-item .okadmin-tab-child{position:absolute;top:40px;right:0;display:none;white-space:nowrap;line-height:36px;padding:5px 0;box-shadow:0 2px 4px rgba(0,0,0,.12);border:1px solid #d2d2d2;background-color:#fff;z-index:100;border-radius:2px}
+.okadmin-tab .okadmin-tab-item a{display:block;padding:0 20px;color:#000;transition:all .3s;-webkit-transition:all .3s;font-size:14px}
+.okadmin-tab .okadmin-tab-item a:hover{background:#f5f7f9}
+.okadmin-tab .okadmin-tab-item .okadmin-tab-child:visited{display:none!important}
+.ok-tab .layui-tab-title{margin:0 80px 0 40px;overflow-x:hidden!important;overflow-y:hidden!important;width:max-content!important;z-index:9;position:relative;left:0;height:40px;line-height:40px;border:0}
+.ok-tab .layui-tab-title li{height:32px;line-height:32px;background:#fff;border-radius:3px;margin-right:15px}
+.ok-tab .layui-tab-brief>.layui-tab-more li.layui-this,.ok-tab .layui-tab-brief>.layui-tab-title .layui-this,.ok-tab .layui-tab-title li.layui-this{background-color:#fff;color:#009688}
+.ok-tab .layui-tab-brief>.layui-tab-more li.layui-this:after,.ok-tab .layui-tab-brief>.layui-tab-title .layui-this:after,.ok-tab .layui-tab-title .layui-this:after{display:none}
+.ok-tab .layui-tab-title .layui-this:after{display:none}
+.ok-tab-title cite{padding-left:5px;font-style:normal}
+.weather-ok{height:49px;line-height:49px}
+.weather-ok .iframe-style{height:50px;padding-top:9px;box-sizing:border-box}
+.weather-ok .iframe-style:hover{height:400px}
+.okadmin .content-body{position:absolute;top:50px;right:0;bottom:42px;left:220px;z-index:1;overflow:hidden}
+.okadmin-tabs-select.layui-nav .layui-nav-item{line-height:40px}
+.ok-nav-item{height:49px;line-height:49px;position:relative;display:inline-block;vertical-align:middle;font-size:14px;width:auto}
+.content-body .layui-tab{margin:0}
+.okadmin .content-body .layui-tab-content{position:absolute;top:40px;bottom:0;width:100%;padding:0;overflow:hidden;left:0;right:0}
+.okadmin .content-body .layui-tab-content .layui-tab-item{height:100%}
+.okadmin .content-body .layui-tab-content .layui-tab-item iframe{height:100%}
+.layui-layout-admin.ok-left-hide .ok-left,.layui-layout-admin.ok-left-hide .ok-left .okadmin-logo{left:-220px}
+.layui-layout-admin.ok-left-hide .layui-header .layui-layout-left{left:-20px}
+.layui-layout-admin.ok-left-hide .content-body,.layui-layout-admin.ok-left-hide .layui-footer{left:0}
+.page-fill{width:100%;height:100%;display:block;box-sizing:border-box}
+#login .layui-icon{font-size:16px!important}
+#login .mag0{margin:0!important}
+#login ::selection{background:#ff5722;color:#fff}
+#login .layui-red{color:red!important;font-weight:700}
+#login .layui-blue{color:#01aaed!important}
+#login .layui-form-item.layui-input-focus input{border-color:#ff6700!important}
+#login .layui-block{width:100%!important}
+#login{width:100%;height:100%;background-image:url(../images/login-bg.jpg);position:relative}
+#login form.layui-form{padding:0 20px 20px 20px;width:300px;position:absolute;left:50%;top:50%;margin:-150px 0 0 -150px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;background:#fff;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;box-shadow:0 0 50px #009688}
+#login .login_face{margin:-55px auto 20px;width:100px;height:100px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;border:5px solid #fff;overflow:hidden;box-shadow:0 0 30px #009688;background:#fff}
+#login .login_face img{width:100%}
+#login .layui-form-item{position:relative}
+#login .layui-form-item label{position:absolute;color:#757575;left:10px;top:9px;line-height:20px;background:0 0;padding:0 5px;font-size:14px;cursor:text}
+#login #code{padding-right:110px}
+#login .captcha-box .img{position:absolute;top:1px;bottom:1px;right:1px;cursor:pointer;width:100px;background:#c4e1ce}
+#login .layui-form-item input{background:#fff!important}
+#login .layui-form-item input,#login .layui-form-item label{transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out}
+#login .layui-form-item input::placeholder{color:transparent!important}
+#login .layui-form-item.layui-input-focus input::placeholder{color:#757575!important}
+#login .layui-form-item.layui-input-active label,#login .layui-form-item.layui-input-focus label{top:-10px;font-size:12px;color:#ff6700;background:#fff!important}
+@media screen{.layui-header .layui-layout-left,.layui-layout-admin .content-body,.layui-layout-admin .layui-footer,.layui-layout-admin .ok-left,.ok-left .okadmin-logo{transition:left .5s}
+}
+.ok-make{position:fixed;left:0;right:0;bottom:0;top:0;z-index:9998;background:rgba(0,0,0,.5);display:none}
+@media screen and (max-width:970px){.ok-hide-md{display:none!important}
+}
+@media screen and (max-width:768px){[pc-show]{display:none!important}
+.layui-layout-admin .ok-left{position:fixed}
+.ok-input-search{width:7rem}
+.layui-layout-admin.ok-left-hide .ok-left,.layui-layout-admin.ok-left-hide .ok-left .okadmin-logo{left:0}
+.okadmin-header .layui-layout-left .layui-nav-item{margin:0 5px}
+.layui-layout-admin.ok-left-hide .ok-make{display:block}
+.layui-layout-admin .ok-left,.ok-left .okadmin-logo{transition:left .5s;left:-220px}
+.layui-header .layui-layout-left{transition:left .5s;left:-20px}
+.layui-layout-admin .content-body,.layui-layout-admin .layui-footer{transition:left .5s;left:0}
+.ok-left .okadmin-side .user-photo{height:auto;margin:0 auto}
+.ok-left .user-photo a.img{width:50px;height:50px}
+.layui-side-menu .layui-side-scroll{width:200px!important}
+.ok-left,.ok-left .okadmin-logo,.ok-left .okadmin-side .user-photo,.ok-left.layui-side-menu .layui-nav{width:180px!important;margin:0}
+}

src/main/resources/static/css/okadmin.theme.css

@@ -0,0 +1,23 @@
+.okadmin.orange_theme .ok-left .okadmin-nav .layui-nav-bar {
+    background: #FF4806; }
+
+.okadmin.orange_theme .ok-left .okadmin-nav .layui-nav-item.layui-this a {
+    background: #FF4806; }
+
+.okadmin.orange_theme .ok-left .okadmin-nav .layui-nav-item .layui-nav-child .layui-this a {
+    background: #FF4806; }
+
+.okadmin.orange_theme .ok-tab .okadmin-tabs-control:hover, .okadmin.orange_theme .ok-tab .layui-tab-title li.layui-this {
+    color: #FF4806; }
+
+.okadmin.blue_theme .ok-left .okadmin-nav .layui-nav-bar {
+    background: #2D8CF0; }
+
+.okadmin.blue_theme .ok-left .okadmin-nav .layui-nav-item.layui-this a {
+    background: #2D8CF0; }
+
+.okadmin.blue_theme .ok-left .okadmin-nav .layui-nav-item .layui-nav-child .layui-this a {
+    background: #2D8CF0; }
+
+.okadmin.blue_theme .ok-tab .okadmin-tabs-control:hover, .okadmin.blue_theme .ok-tab .layui-tab-title li.layui-this {
+    color: #2D8CF0; }

src/main/resources/static/css/oksub.css

@@ -0,0 +1,83 @@
+@import "../css/common.css";
+@import "../lib/layui/css/layui.css";
+
+/**控制台样式*/
+.console .map-body{height:360px}
+.console .map-china{height:360px}
+.console .home .layui-card{-webkit-box-shadow:0 0 20px rgba(0,0,0,.08);box-shadow:0 0 20px rgba(0,0,0,.08);border-radius:5px}
+.console .home .layui-card{-webkit-box-shadow:0 0 20px rgba(0,0,0,.08);box-shadow:0 0 20px rgba(0,0,0,.08);border-radius:5px}
+.console .ok-card-body{padding:20px;position:relative;width:100%;box-sizing:border-box}
+.console .ok-card-body .stat-text{color:#455a64;font-size:24px;padding-bottom:5px}
+.console .ok-card-body .stat-heading{color:#99abb4}
+.console .ok-card-body .img-box{display:inline-block;vertical-align:middle;padding-right:20px}
+.console .ok-card-body .img-box img{width:60px}
+.console .ok-card-body .cart-r{display:inline-block;vertical-align:middle}
+.console .progress-box{margin-bottom:20px;display:flex}
+.console .progress-box .por-title{font-weight:600;color:#868e96;padding-bottom:5px}
+.console .progress-box .por-txt{font-size:13px;padding-bottom:5px}
+.console .progress-box .pro-head{width:50px;height:50px;line-height:50px;display:inline-block;vertical-align:middle;float:left;overflow:hidden;padding-right:20px}
+.console .progress-box .pro-head img{background:#bea8ab;width:100%;height:100%;border-radius:100%}
+.console .progress-box .pro-data{display:inline-block;vertical-align:middle;flex:1}
+.console .ok-card-body .stat-text{color:#455a64;font-size:24px;padding-bottom:5px}
+.console .ok-card-body .stat-heading{color:#99abb4}
+.console .ok-card-body .img-box{display:inline-block;vertical-align:middle}
+.console .ok-card-body .img-box img{width:60px}
+.console .ok-card-body .cart-r{display:inline-block;vertical-align:middle;padding-left:20px}
+
+
+/*控制台1*/
+.console1 .data-body .w-img{width:60px;height:60px}
+.console1 .data-body .w-img img{width:100%;height:100%}
+.console1 .line-home-a{height:60px}
+.console1 .data-body .media-cont .tit{font-size:16px;padding-bottom:5px}
+.console1 .data-body .media-cont .num{font-size:24px;line-height:22px}
+.console1 .data-body .media-cont{-ms-flex-align:center!important;align-items:center!important;-ms-flex:1 1 auto;flex:1 1 auto}
+.console1 .data-body{display:flex;padding:20px;padding-bottom:0;color:#333}
+
+/*登录*/
+#login .layui-icon{font-size:16px!important}
+#login .mag0{margin:0!important}
+#login ::selection{background:#ff5722;color:#fff}
+#login .layui-red{color:red!important;font-weight:700}
+#login .layui-blue{color:#01aaed!important}
+#login .layui-form-item.layui-input-focus input{border-color:#ff6700!important}
+#login .layui-block{width:100%!important}
+#login{width:100%;height:100%;background-image:url(../images/login-bg.jpg);position:relative}
+#login form.layui-form{padding:0 20px 20px 20px;width:300px;position:absolute;left:70%;top:50%;margin:-150px 0 0 -150px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;background:#fff;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;box-shadow:0 0 50px #009688}
+#login .login_face{margin:-55px auto 20px;width:100px;height:100px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;border:5px solid #fff;overflow:hidden;box-shadow:0 0 30px #009688;background:#fff}
+#login .login_face img{width:100%}
+#login .layui-form-item{position:relative}
+#login .layui-form-item label{position:absolute;color:#757575;left:10px;top:9px;line-height:20px;background:0 0;padding:0 5px;font-size:14px;cursor:text}
+#login #code{padding-right:110px}
+#login .captcha-box .img{position:absolute;top:1px;bottom:1px;right:1px;cursor:pointer;width:100px;background:#c4e1ce}
+#login .layui-form-item input{background:#fff!important}
+#login .layui-form-item input,#login .layui-form-item label{transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out}
+#login .layui-form-item input::placeholder{color:transparent!important}
+#login .layui-form-item.layui-input-focus input::placeholder{color:#757575!important}
+#login .layui-form-item.layui-input-active label,#login .layui-form-item.layui-input-focus label{top:-10px;font-size:12px;color:#ff6700;background:#fff!important}
+#login .login-link{display:block;font-size:12px}
+#login .login-link a{display:inline-block;margin-right:20px}
+
+/*基本资料*/
+.user-info .user_left{float:left;margin:20px 0 0 5%}
+.user-info .user_right p{margin:10px 0 25px;font-size:12px;text-align:center;color:#ff5722}
+.user-info .userAddress.layui-form-item .layui-input-inline{width:23%}
+.user-info .userAddress.layui-form-item .layui-input-inline:last-child{margin-right:0}
+@media screen and (max-width:450px){
+    .user-info .userAddress.layui-form-item .layui-input-inline{width:auto}
+}
+
+/*修改密码*/
+.seting-pass{background: #FFFFFF;}
+.seting-pass .user_right p{margin:10px 0 25px;font-size:12px;text-align:center;color:#ff5722}
+.seting-pass .layui-table th{text-align:center}
+.seting-pass .changePwd{width:30%;margin:3% 0 0 5%}
+
+
+/*响应样式*/
+@media screen and (max-width:750px){
+	.ok-in-hide-md{display:none!important}
+}
+@media screen and (max-width:548px){
+	.ok-in-hide-xs,[ok-pc-in-show]{display:none!important}
+}

src/main/resources/static/images/login.svg

@@ -0,0 +1,33 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="100%" height="100%" viewBox="0 0 1400 800">
+
+  <rect x="1300" y="400" rx="40" ry="40" width="300" height="300" stroke="rgb(129, 201, 149)" fill="rgb(129, 201, 149)">
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="0 1450 550" to="360 1450 550" repeatCount="indefinite"/>
+  </rect>
+
+  <path d="M 100 350 A 150 150 0 1 1 400 350 Q400 370 380 370 L 250 370 L 120 370 Q100 370 100 350" stroke="rgb(253, 214, 99)" fill="rgb(253, 214, 99)">
+    <animateMotion path="M 800 -200 L 800 -300 L 800 -200" dur="20s" begin="0s" repeatCount="indefinite"/>
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="30s" type="rotate" values="0 210 530 ; -30 210 530 ; 0 210 530" keyTimes="0 ; 0.5 ; 1" repeatCount="indefinite"/>
+  </path>
+
+  <circle cx="200" cy="150" r="20" stroke="#1a73e8" fill="#1a73e8">
+    <animateMotion path="M 0 0 L 40 20 Z" dur="5s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- 三角形 -->
+  <path d="M 165 580 L 270 580 Q275 578 270 570 L 223 483 Q220 480 217 483 L 165 570 Q160 578 165 580" stroke="rgb(238, 103, 92)" fill="rgb(238, 103, 92)">
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="0 210 530" to="360 210 530" repeatCount="indefinite"/>
+  </path>
+
+  <circle cx="1200" cy="600" r="30" stroke="rgb(241, 243, 244)" fill="rgb(241, 243, 244)">
+    <animateMotion path="M 0 0 L -20 40 Z" dur="9s" repeatCount="indefinite"/>
+  </circle>
+
+  <path d="M 100 350 A 40 40 0 1 1 180 350 L 180 430 A 40 40 0 1 1 100 430 Z" stroke="rgb(241, 243, 244)" fill="rgb(241, 243, 244)">
+    <animateMotion path="M 140 390 L 180 360 L 140 390" dur="20s" begin="0s" repeatCount="indefinite"/>
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="30s" type="rotate" values="0 140 390; -60 140 390; 0 140 390" keyTimes="0 ; 0.5 ; 1" repeatCount="indefinite"/>
+  </path>
+
+  <rect x="400" y="600" rx="40" ry="40" width="100" height="100" stroke="rgb(129, 201, 149)" fill="rgb(129, 201, 149)">
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="-30 550 750" to="330 550 750" repeatCount="indefinite"/>
+  </rect>
+</svg>

src/main/resources/static/js/app.js

@@ -0,0 +1,127 @@
+/* -----------------------------------------------
+/* How to use? : Check the GitHub README
+/* ----------------------------------------------- */
+
+/* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */
+/*
+particlesJS.load('particles-js', 'particles.json', function() {
+  console.log('particles.js loaded - callback');
+});
+*/
+
+/* Otherwise just put the config content (json): */
+
+particlesJS('particles-js',
+
+	{
+		"particles": {
+			"number": {
+				"value": 40,
+				"density": {
+					"enable": true,
+					"value_area": 800
+				}
+			},
+			"color": {
+				"value": "#ffffff"
+			},
+			"shape": {
+				"type": "circle",
+				"stroke": {
+					"width": 0,
+					"color": "#000000"
+				},
+				"polygon": {
+					"nb_sides": 5
+				},
+				"image": {
+					"src": "img/github.svg",
+					"width": 100,
+					"height": 100
+				}
+			},
+			"opacity": {
+				"value": 0.7,
+				"random": false,
+				"anim": {
+					"enable": false,
+					"speed": 1,
+					"opacity_min": 0.1,
+					"sync": false
+				}
+			},
+			"size": {
+				"value": 3,
+				"random": true,
+				"anim": {
+					"enable": false,
+					"speed": 40,
+					"size_min": 0.1,
+					"sync": false
+				}
+			},
+			"line_linked": {
+				"enable": true,
+				"distance": 150,
+				"color": "#ffffff",
+				"opacity": 0.6,
+				"width": 1
+			},
+			"move": {
+				"enable": true,
+				"speed": 6,
+				"direction": "none",
+				"random": false,
+				"straight": false,
+				"out_mode": "out",
+				"bounce": false,
+				"attract": {
+					"enable": false,
+					"rotateX": 600,
+					"rotateY": 1200
+				}
+			}
+		},
+		"interactivity": {
+			"detect_on": "canvas",
+			"events": {
+				"onhover": {
+					"enable": true,
+					"mode": "grab"
+				},
+				"onclick": {
+					"enable": true,
+					"mode": "push"
+				},
+				"resize": true
+			},
+			"modes": {
+				"grab": {
+					"distance": 200,
+					"line_linked": {
+						"opacity": 1
+					}
+				},
+				"bubble": {
+					"distance": 400,
+					"size": 40,
+					"duration": 2,
+					"opacity": 8,
+					"speed": 3
+				},
+				"repulse": {
+					"distance": 200,
+					"duration": 0.4
+				},
+				"push": {
+					"particles_nb": 4
+				},
+				"remove": {
+					"particles_nb": 2
+				}
+			}
+		},
+		"retina_detect": false
+	}
+
+);

src/main/resources/static/js/chartArea.js

@@ -0,0 +1,325 @@
+layui.define(function (exports) {
+    var option_a = {
+        title: {
+            text: '重庆市',
+            subtext: '',
+            x: 'left'
+        },
+        tooltip: {
+            trigger: 'item',
+            formatter: '{b}',
+            itemSize: '14px'
+        },
+        legend: {
+            orient: 'vertical',
+            x: 'center',
+            data: ['重庆市区县']
+        },
+        dataRange: {
+            x: 'left',
+            y: 'bottom',
+            splitList: [
+                {start: 1500},
+                {start: 900, end: 1500},
+                {start: 310, end: 1000},
+                {start: 200, end: 300},
+                {start: 10, end: 200, label: '10 到 200（火灾数量）'},
+                {start: 5, end: 5, label: '5（火灾数量）', color: 'black'},
+                {end: 10}
+            ],
+            color: ['#eee', '#949fb1', '#f3ce85']
+        },
+        series: [
+            {
+                name: '重庆市区县',
+                type: 'map',
+                mapType: '重庆',
+                roam: true,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: false,
+                            textStyle: {
+                                color: "#000"
+                            }
+                        }
+                    },
+                    emphasis: {label: {show: true}}
+                },
+                data: [
+                    {name: '城口县', value: Math.round(Math.random() * 2000)},
+                    {name: '开县', value: Math.round(Math.random() * 2000)},
+                    {name: '巫溪县', value: Math.round(Math.random() * 2000)},
+                    {name: '云阳县', value: Math.round(Math.random() * 2000)},
+                    {name: '奉节县', value: Math.round(Math.random() * 2000)},
+                    {name: '巫山县', value: Math.round(Math.random() * 2000)},
+                    {name: '万州区', value: Math.round(Math.random() * 2000)},
+                    {name: '梁平县', value: Math.round(Math.random() * 2000)},
+                    {name: '忠县', value: Math.round(Math.random() * 2000)},
+                    {name: '垫江县', value: Math.round(Math.random() * 2000)},
+                    {name: '石柱土家族自治县', value: Math.round(Math.random() * 2000)},
+                    {name: '丰都县', value: Math.round(Math.random() * 2000)},
+                    {name: '长寿区', value: Math.round(Math.random() * 2000)},
+                    {name: '涪陵区', value: Math.round(Math.random() * 2000)},
+                    {name: '合川区', value: Math.round(Math.random() * 2000)},
+                    {name: '潼南县', value: Math.round(Math.random() * 2000)},
+                    {name: '铜梁县', value: Math.round(Math.random() * 2000)},
+                    {name: '渝北区', value: Math.round(Math.random() * 2000)},
+                    {name: '璧山县', value: Math.round(Math.random() * 2000)},
+                    {name: '沙坪坝县', value: Math.round(Math.random() * 2000)},
+                    {name: '江北区', value: Math.round(Math.random() * 2000)},
+                    {name: '大足县', value: Math.round(Math.random() * 2000)},
+                    {name: '永川区', value: Math.round(Math.random() * 2000)},
+                    {name: '綦江县', value: Math.round(Math.random() * 2000)},
+                    {name: '南川区', value: Math.round(Math.random() * 2000)},
+                    {name: '万盛区', value: Math.round(Math.random() * 2000)},
+                    {name: '大渡口区', value: Math.round(Math.random() * 2000)},
+                    {name: '南岸区', value: Math.round(Math.random() * 2000)},
+                    {name: '武隆县', value: Math.round(Math.random() * 2000)},
+                    {name: '九龙坡区', value: Math.round(Math.random() * 2000)},
+                    {name: '荣昌县', value: Math.round(Math.random() * 2000)},
+                    {name: '秀山土家族苗族自治县', value: Math.round(Math.random() * 2000)},
+                    {name: '酉阳土家族苗族自治县', value: Math.round(Math.random() * 2000)},
+                    {name: '彭水苗族土家族自治县', value: Math.round(Math.random() * 2000)},
+                    {name: '江津区', value: Math.round(Math.random() * 2000)},
+                    {name: '北碚区', value: Math.round(Math.random() * 2000)},
+                    {name: '巴南区', value: Math.round(Math.random() * 2000)}
+                ]
+            }
+        ]
+    };
+
+    var option_b = {
+        series: [{
+            type: 'map',
+            mapType: 'china',
+            label: {
+                normal: {
+                    show: true, //显示省份标签
+                    textStyle: {
+                        color: "blue"
+                    } //省份标签字体颜色
+                },
+                emphasis: { //对应的鼠标悬浮效果
+                    show: false,
+                    textStyle: {
+                        color: "#800080"
+                    }
+                }
+            },
+            aspectScale: 0.75,
+            zoom: 1.2,
+            itemStyle: {
+                normal: {
+                    borderWidth: .5, //区域边框宽度
+                    borderColor: '#009fe8', //区域边框颜色
+                    areaColor: "#ffefd5", //区域颜色
+                },
+                emphasis: {
+                    borderWidth: .5,
+                    borderColor: '#4b0082',
+                    areaColor: "#ffdead",
+                }
+            },
+            data: [
+                {name: '北京', selected: false, value: 1},
+                {name: '天津', selected: false, value: 2},
+                {name: '上海', selected: false, value: 3},
+                {name: '重庆', selected: false, value: 4},
+                {name: '河北', selected: false, value: 5},
+                {name: '河南', selected: false, value: 6},
+                {name: '云南', selected: false, value: 7},
+                {name: '辽宁', selected: false, value: 8},
+                {name: '黑龙江', selected: false, value: 9},
+                {name: '湖南', selected: false, value: 10},
+                {name: '安徽', selected: false, value: 11},
+                {name: '山东', selected: false, value: 12},
+                {name: '新疆', selected: false, value: 13},
+                {name: '江苏', selected: false, value: 14},
+                {name: '浙江', selected: false, value: 15},
+                {name: '江西', selected: false, value: 16},
+                {name: '湖北', selected: false, value: 17},
+                {name: '广西', selected: false, value: 18},
+                {name: '甘肃', selected: false, value: 19},
+                {name: '山西', selected: false, value: 20},
+                {name: '内蒙古', selected: false, value: 21},
+                {name: '陕西', selected: false, value: 22},
+                {name: '吉林', selected: false, value: 23},
+                {name: '福建', selected: false, value: 24},
+                {name: '贵州', selected: false, value: 25},
+                {name: '广东', selected: false, value: 26},
+                {name: '青海', selected: false, value: 27},
+                {name: '西藏', selected: false, value: 28},
+                {name: '四川', selected: false, value: 29},
+                {name: '宁夏', selected: false, value: 30},
+                {name: '海南', selected: false, value: 31},
+                {name: '台湾', selected: false, value: 32},
+                {name: '香港', selected: false, value: 33},
+                {name: '澳门', selected: false, value: 34}
+            ] //各省地图颜色数据依赖value
+        }],
+        dataRange: {
+            x: '-1000 px', //图例横轴位置
+            y: '-1000 px', //图例纵轴位置
+            splitList: [
+                {start: 1, end: 1, label: '北京', color: '#cfc5de'},
+                {start: 2, end: 2, label: '天津', color: '#f1ebd1'},
+                {start: 3, end: 3, label: '上海', color: '#feffdb'},
+                {start: 4, end: 4, label: '重庆', color: '#e0cee4'},
+                {start: 5, end: 5, label: '河北', color: '#fde8cd'},
+                {start: 6, end: 6, label: '河南', color: '#e4f1d7'},
+                {start: 7, end: 7, label: '云南', color: '#fffed7'},
+                {start: 8, end: 8, label: '辽宁', color: '#e4f1d7'},
+                {start: 9, end: 9, label: '黑龙江', color: '#e4f1d7'},
+                {start: 10, end: 10, label: '湖南', color: '#fffed7'},
+                {start: 11, end: 11, label: '安徽', color: '#fffed8'},
+                {start: 12, end: 12, label: '山东', color: '#dccee7'},
+                {start: 13, end: 13, label: '新疆', color: '#fffed7'},
+                {start: 14, end: 14, label: '江苏', color: '#fce8cd'},
+                {start: 15, end: 15, label: '浙江', color: '#ddceeb'},
+                {start: 16, end: 16, label: '江西', color: '#e4f1d3'},
+                {start: 17, end: 17, label: '湖北', color: '#fde8cd'},
+                {start: 18, end: 18, label: '广西', color: '#fde8cd'},
+                {start: 19, end: 19, label: '甘肃', color: '#fde8cd'},
+                {start: 20, end: 20, label: '山西', color: '#fffdd6'},
+                {start: 21, end: 21, label: '内蒙古', color: '#ddcfe6'},
+                {start: 22, end: 22, label: '陕西', color: '#fad8e9'},
+                {start: 23, end: 23, label: '吉林', color: '#fce8cd'},
+                {start: 24, end: 24, label: '福建', color: '#fad8e8'},
+                {start: 25, end: 25, label: '贵州', color: '#fad8e8'},
+                {start: 26, end: 26, label: '广东', color: '#ddcfe8'},
+                {start: 27, end: 27, label: '青海', color: '#fad8e9'},
+                {start: 28, end: 28, label: '西藏', color: '#ddcfe6'},
+                {start: 29, end: 29, label: '四川', color: '#e4f1d5'},
+                {start: 30, end: 30, label: '宁夏', color: '#fefcd5'},
+                {start: 31, end: 31, label: '海南', color: '#fad8e9'},
+                {start: 32, end: 32, label: '台湾', color: '#fce8cd'},
+                {start: 33, end: 33, label: '香港', color: '#dc9bbb'},
+                {start: 34, end: 34, label: '澳门', color: '#e0f7cc'}
+            ]
+        }, //各省地图颜色；start：值域开始值；end：值域结束值；label：图例名称；color：自定义颜色值；
+    };
+
+    var option_c = {
+        title: {
+            text: '四川省',
+            subtext: '',
+            x: 'left'
+        },
+        tooltip: {
+            trigger: 'item',
+            formatter: '{b}',
+            itemSize: '14px'
+        },
+        legend: {
+            orient: 'vertical',
+            x: 'center',
+            data: ['四川省区县']
+        },
+        series: [
+            {
+                name: '四川省区县',
+                type: 'map',
+                mapType: '四川',
+                roam: false,
+                itemStyle: {
+                    normal: {
+                        label: {show: false},
+                        borderWidth: 1,//省份的边框宽度
+                        childBorderWidth: 1,
+                        childBorderColor: '#6EA1F4'
+                    },
+                    emphasis: {label: {show: true}}
+                },
+                data: [
+                    {name: '阿坝藏族羌族自治州', value: 0},
+                    {name: '巴中市', value: 20},
+                    {name: '成都市', value: 0},
+                    {name: '达州市', value: 0},
+                    {name: '德阳市', value: 0},
+                    {name: '甘孜藏族自治州', value: 0},
+                    {name: '广安市', value: 0},
+                    {name: '广元市', value: 0},
+                    {name: '乐山市', value: 0},
+                    {name: '凉山彝族自治州', value: 0},
+                    {name: '泸州市', value: 0},
+                    {name: '眉山市', value: 0},
+                    {name: '绵阳市', value: 0},
+                    {name: '内江市', value: 0},
+                    {name: '南充市', value: 0},
+                    {name: '攀枝花市', value: 0},
+                    {name: '遂宁市', value: 0},
+                    {name: '雅安市', value: 0},
+                    {name: '宜宾市', value: 0},
+                    {name: '资阳市', value: 0},
+                    {name: '自贡市', value: 0}
+                ]
+            }
+        ]
+    };
+
+    var option_d = {
+        title: {
+            text: '广东省',
+            subtext: '',
+            x: 'left'
+        },
+        tooltip: {
+            trigger: 'item',
+            formatter: '{b}',
+            itemSize: '14px'
+        },
+        legend: {
+            orient: 'vertical',
+            x: 'center',
+            data: ['广东省区县']
+        },
+        series: [
+            {
+                name: '广东省区县',
+                type: 'map',
+                mapType: '广东',
+                roam: false,
+                itemStyle: {
+                    normal: {
+                        label: {show: false},
+                        borderWidth: 1,//省份的边框宽度
+                        childBorderWidth: 1,
+                        childBorderColor: '#6EA1F4'
+                    },
+                    emphasis: {label: {show: true}}
+                },
+                data: [
+                    {name: '广州市', value: 1350},
+                    {name: '深圳市', value: 1190},
+                    {name: '珠海市', value: 167},
+                    {name: '汕头市', value: 555},
+                    {name: '佛山市', value: 743},
+                    {name: '韶关市', value: 293},
+                    {name: '湛江市', value: 724},
+                    {name: '肇庆市', value: 405},
+                    {name: '江门市', value: 451},
+                    {name: '茂名市', value: 608},
+                    {name: '惠州市', value: 475},
+                    {name: '梅州市', value: 434},
+                    {name: '汕尾市', value: 302},
+                    {name: '河源市', value: 307},
+                    {name: '阳江市', value: 251},
+                    {name: '清远市', value: 383},
+                    {name: '东莞市', value: 825},
+                    {name: '中山市', value: 320},
+                    {name: '潮州市', value: 264},
+                    {name: '揭阳市', value: 605},
+                    {name: '云浮市', value: 246}
+                ]
+            }
+        ]
+    };
+
+    exports('chartArea', {
+        option_a: option_a,
+        option_b: option_b,
+        option_c: option_c,
+        option_d: option_d
+    });
+});

src/main/resources/static/js/console.js

@@ -0,0 +1,128 @@
+"use strict";
+layui.use(["element","okUtils", "table", "countUp"], function () {
+    var countUp = layui.countUp;
+    var table = layui.table;
+    var okUtils = layui.okUtils;
+    var $ = layui.jquery;
+
+    //总体统计
+    function statText() {
+        okUtils.ajaxCloud({
+            url:"/sys/interface/query",
+            param:{'type':'indexStatistics'},
+            async:true,
+            success : function(result) {
+                $("#orgNumber").html(result.msg[0].orgNumber);
+                $("#parkNumber").html(result.msg[0].parkNumber);
+                $("#carNumber").html(result.msg[0].carNumber);
+                $("#cost").html(result.msg[0].cost);
+            }
+        });
+    }
+    //订单支付类型
+    function payType(){
+        var myChart = echarts.init($("#payType")[0], "theme");
+        var option = {
+            color: ['#19be6b'],
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'shadow'
+                }
+            },
+            grid: {
+                left: '3%',
+                right: '4%',
+                bottom: '3%',
+                containLabel: true
+            },
+            legend: {
+                data:['订单数']
+            },
+            xAxis: [
+                {
+                    type: 'category',
+                    data: [],
+                    axisTick: {
+                        alignWithLabel: true
+                    }
+                }
+            ],
+            yAxis: [
+                {
+                    type: 'value'
+                }
+            ],
+            series: [
+                {
+                    name: '订单数',
+                    type: 'bar',
+                    barWidth: '25%',
+                    data: []
+                }
+            ]
+        };
+        okUtils.ajaxCloud({
+            url:"/sys/interface/query",
+            param:{'type':'payTypeStatistics'},
+            async:true,
+            success : function(result) {
+                var array1 = [];
+                var array2 = [];
+                result.msg.forEach(function(entity){
+                    array1.push(entity.name);
+                    array2.push(entity.data);
+                });
+                option.xAxis[0].data = array1;
+                option.series[0].data = array2;
+                myChart.setOption(option);
+                okUtils.echartsResize([myChart]);
+            }
+        });
+    }
+
+    //最近七日支付订单
+    function lately7Day() {
+        var userSourceOption = {
+            title: {text: ""},
+            tooltip: {trigger: "axis", axisPointer: {type: "cross", label: {backgroundColor: "#6a7985"}}},
+            legend: {data: []},
+            toolbox: {feature: {saveAsImage: {}}},
+            grid: {left: "3%", right: "4%", bottom: "3%", containLabel: true},
+            xAxis: [{type: "category", boundaryGap: false, data: []}],
+            yAxis: [{type: "value",minInterval: 1}],
+            series: [
+            ]
+        };
+        okUtils.ajaxCloud({
+            url:"/sys/interface/query",
+            param:{'type':'total7Pay'},
+            async:false,
+            success : function(result) {
+                var dataMap = {};
+                result.msg.forEach(function(entity){
+                    if (dataMap.hasOwnProperty(entity.payType)) {
+                        dataMap[entity.payType].data.push(entity.amount)
+                    } else {
+                        userSourceOption.legend.data.push(entity.payType);
+                        dataMap[entity.payType] = {name: entity.payType, type: "line", stack: "总量", areaStyle: {}, data: [entity.amount]}
+                    }
+
+                    if (userSourceOption.xAxis[0].data.indexOf(entity.date) < 0) {
+                        userSourceOption.xAxis[0].data.push(entity.date);
+                    }
+                });
+                userSourceOption.series = Object.values(dataMap);
+                console.log(userSourceOption);
+                var userSourceMap = echarts.init($("#lately7Day")[0], "theme");
+                userSourceMap.setOption(userSourceOption);
+                okUtils.echartsResize([userSourceMap]);
+            }
+        });
+    }
+    statText();
+    payType();
+    lately7Day();
+});
+
+

src/main/resources/static/js/echartsData.js

@@ -0,0 +1,573 @@
+function randomData() {
+    return Math.round(Math.random() * 500);
+}
+
+var mydata = [
+    {name: '北京', value: '100'}, {name: '天津', value: randomData()},
+    {name: '上海', value: randomData()}, {name: '重庆', value: randomData()},
+    {name: '河北', value: randomData()}, {name: '河南', value: randomData()},
+    {name: '云南', value: randomData()}, {name: '辽宁', value: randomData()},
+    {name: '黑龙江', value: randomData()}, {name: '湖南', value: randomData()},
+    {name: '安徽', value: randomData()}, {name: '山东', value: randomData()},
+    {name: '新疆', value: randomData()}, {name: '江苏', value: randomData()},
+    {name: '浙江', value: randomData()}, {name: '江西', value: randomData()},
+    {name: '湖北', value: randomData()}, {name: '广西', value: randomData()},
+    {name: '甘肃', value: randomData()}, {name: '山西', value: randomData()},
+    {name: '内蒙古', value: randomData()}, {name: '陕西', value: randomData()},
+    {name: '吉林', value: randomData()}, {name: '福建', value: randomData()},
+    {name: '贵州', value: randomData()}, {name: '广东', value: randomData()},
+    {name: '青海', value: randomData()}, {name: '西藏', value: randomData()},
+    {name: '四川', value: randomData()}, {name: '宁夏', value: randomData()},
+    {name: '海南', value: randomData()}, {name: '台湾', value: randomData()},
+    {name: '香港', value: randomData()}, {name: '澳门', value: randomData()}
+];
+
+layui.define(function (exports) {
+
+    var mapTree = {
+            "title": {
+                "text": "用户访问"
+            },
+            "tooltip": {
+                "trigger": "axis",
+                "axisPointer": {
+                    "type": "cross",
+                    "label": {
+                        "backgroundColor": "#6a7985"
+                    }
+                }
+            },
+            "legend": {
+                "data": [
+                    "邮件营销",
+                    "联盟广告",
+                    "视频广告",
+                    "直接访问",
+                    "搜索引擎"
+                ]
+            },
+            "toolbox": {
+                "feature": {
+                    "saveAsImage": {}
+                }
+            },
+            "grid": {
+                "left": "3%",
+                "right": "4%",
+                "bottom": "3%",
+                "containLabel": true
+            },
+            "xAxis": [
+                {
+                    "type": "category",
+                    "boundaryGap": false,
+                    "data": [
+                        "周一",
+                        "周二",
+                        "周三",
+                        "周四",
+                        "周五",
+                        "周六",
+                        "周日"
+                    ]
+                }
+            ],
+            "yAxis": [
+                {
+                    "type": "value"
+                }
+            ],
+            "series": [
+                {
+                    "name": "邮件营销",
+                    "type": "line",
+                    "stack": "总量",
+                    "areaStyle": {},
+                    "data": [
+                        120,
+                        132,
+                        101,
+                        134,
+                        90,
+                        230,
+                        210
+                    ]
+                },
+                {
+                    "name": "联盟广告",
+                    "type": "line",
+                    "stack": "总量",
+                    "areaStyle": {},
+                    "data": [
+                        220,
+                        182,
+                        191,
+                        234,
+                        290,
+                        330,
+                        310
+                    ]
+                },
+                {
+                    "name": "视频广告",
+                    "type": "line",
+                    "stack": "总量",
+                    "areaStyle": {},
+                    "data": [
+                        150,
+                        232,
+                        201,
+                        154,
+                        190,
+                        330,
+                        410
+                    ]
+                },
+                {
+                    "name": "直接访问",
+                    "type": "line",
+                    "stack": "总量",
+                    "areaStyle": {
+                        "normal": {}
+                    },
+                    "data": [
+                        320,
+                        332,
+                        301,
+                        334,
+                        390,
+                        330,
+                        320
+                    ]
+                },
+                {
+                    "name": "搜索引擎",
+                    "type": "line",
+                    "stack": "总量",
+                    "label": {
+                        "normal": {
+                            "show": true,
+                            "position": "top"
+                        }
+                    },
+                    "areaStyle": {
+                        "normal": {}
+                    },
+                    "data": [
+                        820,
+                        932,
+                        901,
+                        934,
+                        1290,
+                        1330,
+                        1320
+                    ]
+                }
+            ]
+        },
+
+        mapCircle = {
+            "title": {
+                "text": "某站点用户访问来源",
+                "subtext": "",
+                "x": "center"
+            },
+            "tooltip": {
+                "trigger": "item",
+                "formatter": "{a} <br/>{b} : {c} ({d}%)"
+            },
+            "legend": {
+                "orient": "vertical",
+                "left": "left",
+                "data": [
+                    "直接访问",
+                    "邮件营销",
+                    "联盟广告",
+                    "视频广告",
+                    "搜索引擎"
+                ]
+            },
+            "series": [
+                {
+                    "name": "访问来源",
+                    "type": "pie",
+                    "radius": "55%",
+                    "center": [
+                        "50%",
+                        "60%"
+                    ],
+                    "data": [
+                        {
+                            "value": 335,
+                            "name": "直接访问"
+                        },
+                        {
+                            "value": 310,
+                            "name": "邮件营销"
+                        },
+                        {
+                            "value": 234,
+                            "name": "联盟广告"
+                        },
+                        {
+                            "value": 135,
+                            "name": "视频广告"
+                        },
+                        {
+                            "value": 1548,
+                            "name": "搜索引擎"
+                        }
+                    ],
+                    "itemStyle": {
+                        "emphasis": {
+                            "shadowBlur": 10,
+                            "shadowOffsetX": 0,
+                            "shadowColor": "rgba(0, 0, 0, 0.5)"
+                        }
+                    }
+                }
+            ]
+        },
+
+        mapChina = {
+            "title": {
+                "text": "用户家庭所在地统计",
+                "subtext": "",
+                "x": "center"
+            },
+
+            "tooltip": {
+                "trigger": "item"
+            },
+
+            "visualMap": {
+                "color": [
+                    "#eeeeee"
+                ],
+                "show": false,
+                "x": "left",
+                "y": "center",
+                "splitList": [
+                    {
+                        "start": 500,
+                        "end": 600
+                    },
+                    {
+                        "start": 400,
+                        "end": 500
+                    },
+                    {
+                        "start": 300,
+                        "end": 400
+                    },
+                    {
+                        "start": 200,
+                        "end": 300
+                    },
+                    {
+                        "start": 100,
+                        "end": 200
+                    },
+                    {
+                        "start": 0,
+                        "end": 100
+                    }
+                ]
+            },
+
+            "series": [
+                {
+                    "name": "用户家庭所在地统计",
+                    "roam": true,
+                    "type": "map",
+                    "mapType": "china",
+                    "data": [],
+                    "itemStyle": {
+                        "normal": {
+                            "areaColor": "#eeeeee",
+                            "borderColor": "#aaaaaa",
+                            "borderWidth": 0.5
+                        },
+                        "emphasis": {
+                            "areaColor": "rgba(63,177,227,0.25)",
+                            "borderColor": "#3fb1e3",
+                            "borderWidth": 1
+                        }
+                    },
+                    "label": {
+                        "normal": {
+                            "textStyle": {
+                                "color": "#000"
+                            }
+                        },
+                        "emphasis": {
+                            "textStyle": {
+                                "color": "#000"
+                            }
+                        }
+                    }
+                }
+            ]
+        },
+
+        mapChina2 = {
+            "title": {
+                "text": "用户家庭所在地统计",
+                "subtext": "",
+                "x": "center"
+            },
+
+            "tooltip": {
+                "trigger": "item"
+            },
+
+            "visualMap": {
+                "show": true,//是否显示数据条
+                "min": 0,
+                "max": 1,
+                "left": 10,
+                "top": "center",
+                "orient": "vertical",
+                "text": [
+                    "高",
+                    "低"
+                ],
+                "realtime": false,
+                "calculable": true,
+                "inRange": {
+                    "color": [
+                        "#E0FFFF",
+                        "#BEEFEC",
+                        "#6cd2d2",
+                        "#6CC8C1",
+                    ]
+                }
+            },
+
+            "series": [
+                {
+                    "name": "用户家庭所在地统计",
+                    "roam": true,
+                    "type": "map",
+                    "mapType": "china",
+                    "data": [],
+                    "itemStyle": {
+                        "normal": {
+                            "areaColor": "#eeeeee",
+                            "borderColor": "#aaaaaa",
+                            "borderWidth": 0.5
+                        },
+                        "emphasis": {
+                            "areaColor": "rgba(63,177,227,0.25)",
+                            "borderColor": "#3fb1e3",
+                            "borderWidth": 1
+                        }
+                    },
+                    "label": {
+                        "normal": {
+                            "textStyle": {
+                                "color": "#000"
+                            }
+                        },
+                        "emphasis": {
+                            "textStyle": {
+                                "color": "#000"
+                            }
+                        }
+                    }
+                }
+            ]
+        },
+
+        mapChina3 = {
+            backgroundColor: '#FFFFFF',
+            title: {
+                text: '全国地图大数据',
+                subtext: '',
+                x: 'center'
+            },
+            tooltip: {
+                trigger: 'item'
+            },
+
+            //左侧小导航图标
+            visualMap: {
+                show: true,
+                x: 'left',
+                y: 'center',
+                splitList: [
+                    {start: 500, end: 600}, {start: 400, end: 500},
+                    {start: 300, end: 400}, {start: 200, end: 300},
+                    {start: 100, end: 200}, {start: 0, end: 100},
+                ],
+                color: ['#5475f5', '#9feaa5', '#85daef', '#74e2ca', '#e6ac53', '#9fb5ea']
+            },
+
+            //配置属性
+            series: [{
+                name: '数据统计',
+                type: 'map',
+                mapType: 'china',
+                roam: false,//是否启用鼠标滚轮缩放地图
+                label: {
+                    normal: {
+                        show: true  //省份名称
+                    },
+                    emphasis: {
+                        show: false
+                    }
+                },
+                data: mydata  //数据
+            }]
+        },
+
+        Address = [
+            {
+                "name": "北京",
+                "value": 100
+            },
+            {
+                "name": "天津",
+                "value": 83
+            },
+            {
+                "name": "上海",
+                "value": 113
+            },
+            {
+                "name": "重庆",
+                "value": 188
+            },
+            {
+                "name": "河北",
+                "value": 197
+            },
+            {
+                "name": "河南",
+                "value": 327
+            },
+            {
+                "name": "云南",
+                "value": 371
+            },
+            {
+                "name": "辽宁",
+                "value": 224
+            },
+            {
+                "name": "黑龙江",
+                "value": 295
+            },
+            {
+                "name": "湖南",
+                "value": 463
+            },
+            {
+                "name": "安徽",
+                "value": 7
+            },
+            {
+                "name": "山东",
+                "value": 176
+            },
+            {
+                "name": "新疆",
+                "value": 0
+            },
+            {
+                "name": "江苏",
+                "value": 396
+            },
+            {
+                "name": "浙江",
+                "value": 472
+            },
+            {
+                "name": "江西",
+                "value": 243
+            },
+            {
+                "name": "湖北",
+                "value": 226
+            },
+            {
+                "name": "广西",
+                "value": 404
+            },
+            {
+                "name": "甘肃",
+                "value": 210
+            },
+            {
+                "name": "山西",
+                "value": 451
+            },
+            {
+                "name": "内蒙古",
+                "value": 97
+            },
+            {
+                "name": "陕西",
+                "value": 369
+            },
+            {
+                "name": "吉林",
+                "value": 221
+            },
+            {
+                "name": "福建",
+                "value": 216
+            },
+            {
+                "name": "贵州",
+                "value": 221
+            },
+            {
+                "name": "广东",
+                "value": 85
+            },
+            {
+                "name": "青海",
+                "value": 21
+            },
+            {
+                "name": "西藏",
+                "value": 414
+            },
+            {
+                "name": "四川",
+                "value": 380
+            },
+            {
+                "name": "宁夏",
+                "value": 205
+            },
+            {
+                "name": "海南",
+                "value": 73
+            },
+            {
+                "name": "台湾",
+                "value": 348
+            },
+            {
+                "name": "香港",
+                "value": 54
+            },
+            {
+                "name": "澳门",
+                "value": 340
+            }
+        ];
+
+    exports('echartsData', {
+        mapTree: mapTree,
+        mapCircle: mapCircle,
+        mapChina3: mapChina3,
+        mapChina2: mapChina2,
+        mapChina: mapChina,
+        Address: Address
+    });
+});
+
+

src/main/resources/static/js/home2Data-del.js

@@ -0,0 +1,219 @@
+function randomData() {
+    return Math.round(Math.random() * 500);
+}
+
+function ecchartData(color) {
+    color = color || "#00c292";
+    return {
+        color: color,
+        toolbox: {
+            show: false,
+            feature: {
+                saveAsImage: {}
+            }
+        },
+        grid: {
+            left: '-1%',
+            right: '0',
+            bottom: '0',
+            top: '5px',
+            containLabel: false
+        },
+        xAxis: [
+            {
+                type: 'category',
+                boundaryGap: false,
+                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+                splitLine: {
+                    show: false
+                },
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                splitLine: {
+                    show: false
+                },
+            }
+        ],
+        series: [
+            {
+                name: '用户',
+                type: 'line',
+                stack: '总量',
+                smooth: true,
+                symbol: "none",
+                clickable: false,
+                areaStyle: {},
+                data: [randomData(), randomData(), randomData(), randomData(), randomData(), randomData(), randomData()]
+            }
+        ]
+    }
+}
+
+var echOne = {
+    color: "#03a9f3",
+    xAxis: {
+        type: 'category',
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+        type: 'value'
+    },
+    series: [{
+        data: [120, 200, 150, 80, 70, 110, 130],
+        type: 'bar'
+    }]
+};
+var echTwo = {
+    title: {
+        show: false,
+        text: '用户访问来源',
+        subtext: '纯属虚构',
+        x: 'center'
+    },
+    tooltip: {
+        trigger: 'item',
+        formatter: "{a} <br/>{b} : {c} ({d}%)"
+    },
+    legend: {
+        orient: 'vertical',
+        left: 'left',
+        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
+    },
+    series: [
+        {
+            name: '访问来源',
+            type: 'pie',
+            radius: '55%',
+            center: ['50%', '60%'],
+            data: [
+                {value: 335, name: '直接访问'},
+                {value: 310, name: '邮件营销'},
+                {value: 234, name: '联盟广告'},
+                {value: 135, name: '视频广告'},
+                {value: 1548, name: '搜索引擎'}
+            ],
+            itemStyle: {
+                emphasis: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            }
+        }
+    ]
+};
+var mapThree = {
+    title: {
+        show: false,
+        text: '堆叠区域图xxxx'
+    },
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'cross',
+            label: {
+                backgroundColor: '#6a7985'
+            }
+        }
+    },
+    legend: {
+        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
+    },
+    toolbox: {
+        show: false,
+        feature: {
+            saveAsImage: {}
+        }
+    },
+    grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+    },
+    xAxis: [
+        {
+            type: 'category',
+            boundaryGap: false,
+            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+        }
+    ],
+    yAxis: [
+        {
+            type: 'value',
+            splitLine: {//设置横线样式
+                show: false//隐藏横线
+            },
+        }
+    ],
+    series: [
+        {
+            name: '邮件营销',
+            type: 'line',
+            stack: '总量',
+            smooth: true,//曲线线条
+            areaStyle: {},
+            data: [120, 132, 101, 134, 90, 230, 210]
+        },
+        {
+            name: '联盟广告',
+            type: 'line',
+            stack: '总量',
+            smooth: true,//曲线线条
+            areaStyle: {},
+            data: [220, 182, 191, 234, 290, 330, 310]
+        },
+        {
+            name: '视频广告',
+            type: 'line',
+            stack: '总量',
+            smooth: true,//曲线线条
+            areaStyle: {},
+            data: [150, 232, 201, 154, 190, 330, 410]
+        },
+        {
+            name: '直接访问',
+            type: 'line',
+            stack: '总量',
+            smooth: true,//曲线线条
+            areaStyle: {normal: {}},
+            data: [320, 332, 301, 334, 390, 330, 320]
+        },
+        {
+            name: '搜索引擎',
+            type: 'line',
+            stack: '总量',
+            smooth: true,//曲线线条
+            label: {
+                normal: {
+                    show: true,
+                    position: 'top'
+                }
+            },
+            areaStyle: {normal: {}},
+            data: [370, 932, 901, 934, 1290, 1330, 1320]
+        }
+    ]
+};
+
+layui.define(function (exports) {
+    var income = ecchartData("#00c292");
+    var goods = ecchartData("#ab8ce4");
+    var blogs = ecchartData("#03a9f3");
+    var user = ecchartData("#fb9678");
+
+    exports('home2Data', {
+        income: income,
+        goods: goods,
+        blogs: blogs,
+        user: user,
+        echOne: echOne,
+        echTwo: echTwo,
+        mapThree: mapThree,
+    });
+});
+
+

src/main/resources/static/js/okadmin.js

@@ -0,0 +1,368 @@
+/^http(s*):\/\//.test(location.href) || alert('请先部署到 localhost 下再访问');
+
+var objOkTab = "";
+layui.use(["element", "layer", "okUtils", "okTab", "okLayer"], function () {
+    var okUtils = layui.okUtils;
+    var $ = layui.jquery;
+    var layer = layui.layer;
+    var okLayer = layui.okLayer;
+    //获取菜单数据
+    var okTab = layui.okTab({
+        url: "sys/menu/getByUser",
+        openTabNum: 30, // 允许同时选项卡的个数
+        parseData: function (data) { // 如果返回的结果和navs.json中的数据结构一致可省略这个方法
+            return data;
+        }
+    });
+    objOkTab = okTab;
+
+    /**
+     * 左侧导航渲染完成之后的操作
+     * 后端菜逼-》render=》navBar 初始化左侧菜单
+     */
+    okTab.render(function () {
+    });
+
+    /**
+     * 添加新窗口
+     */
+    $("body").on("click", "#navBar .layui-nav-item a", function () {
+        // 如果不存在子级
+        if ($(this).siblings().length == 0) {
+            okTab.tabAdd($(this));
+        }
+        // 关闭其他展开的二级标签
+        $(this).parent("li").siblings().removeClass("layui-nav-itemed");
+        if (!$(this).attr('lay-id')) {
+            var topLevelEle = $(this).parents("li.layui-nav-item");
+            var childs = $("#navBar > li > dl.layui-nav-child").not(topLevelEle.children("dl.layui-nav-child"));
+            childs.removeAttr('style');
+        }
+    });
+     /**
+     * 个人设置
+     */
+    $("body").on("click", "#userInfo a", function () {
+        var url = $(this).attr("data-url");
+        if(url!=undefined){
+            var title = $(this).html();
+            userInfo(url,title);
+        }else{
+            okLayer.confirm("确定要退出吗？", function (index) {
+                window.location = "/sys/logout";
+            });
+        }
+    });
+
+    /**
+     * 左侧菜单展开动画
+     */
+    $("#navBar").on('click', '.layui-nav-item a', function () {
+        if (!$(this).attr('lay-id')) {
+            var superEle = $(this).parent();
+            var ele = $(this).next('.layui-nav-child');
+            var height = ele.height();
+            ele.css({'display': 'block'});
+
+            if (superEle.is('.layui-nav-itemed')) {//是否是展开状态
+                ele.height(0);
+                ele.animate({
+                    height: height + 'px'
+                }, function () {
+                    ele.css({
+                        height: "auto"
+                    });
+                    //ele.removeAttr('style');
+                });
+            } else {
+                ele.animate({
+                    height: 0
+                }, function () {
+                    ele.removeAttr('style');
+                });
+            }
+        }
+    });
+
+    /**
+     * 左边菜单显隐功能
+     */
+    $(".ok-menu").click(function () {
+        $(".layui-layout-admin").toggleClass("ok-left-hide");
+        $(this).find('i').toggleClass("ok-menu-hide");
+        localStorage.setItem("isResize", false);
+        setTimeout(function () {
+            localStorage.setItem("isResize", true);
+        }, 1200);
+    });
+
+    /**
+     * 移动端的处理事件
+     */
+    $("body").on("click", ".layui-layout-admin .ok-left a[data-url],.ok-make", function () {
+        if ($(".layui-layout-admin").hasClass("ok-left-hide")) {
+            $(".layui-layout-admin").removeClass("ok-left-hide");
+            $(".ok-menu").find('i').removeClass("ok-menu-hide");
+        }
+    });
+
+    /**
+     * tab左右移动
+     */
+    $("body").on("click", ".okNavMove", function () {
+        var moveId = $(this).attr("data-id");
+        var that = this;
+        okTab.navMove(moveId, that);
+    });
+
+    /**
+     * 刷新当前tab页
+     */
+    $("body").on("click", ".ok-refresh", function () {
+        okTab.refresh(this);
+    });
+
+    /**
+     * 关闭tab页
+     */
+    $("body").on("click", "#tabAction a", function () {
+        var num = $(this).attr('data-num');
+        okTab.tabClose(num);
+    });
+
+    /**
+     * 全屏/退出全屏
+     */
+    $("body").on("keydown", function (event) {
+        event = event || window.event || arguments.callee.caller.arguments[0];
+        // 按 Esc
+        if (event && event.keyCode == 27) {
+            console.log("Esc");
+            $("#fullScreen").children("i").eq(0).removeClass("okicon-screen-restore");
+        }
+        // 按 F11
+        if (event && event.keyCode == 122) {
+            $("#fullScreen").children("i").eq(0).addClass("okicon-screen-restore");
+        }
+    });
+
+    $("body").on("click", "#fullScreen", function () {
+        if ($(this).children("i").hasClass("okicon-screen-restore")) {
+            screenFun(2).then(function () {
+                $(this).children("i").eq(0).removeClass("okicon-screen-restore");
+            });
+        } else {
+            screenFun(1).then(function () {
+                $(this).children("i").eq(0).addClass("okicon-screen-restore");
+            });
+        }
+    });
+
+    /**
+     * 全屏和退出全屏的方法
+     * @param num 1代表全屏 2代表退出全屏
+     * @returns {Promise}
+     */
+    function screenFun(num) {
+        num = num || 1;
+        num = num * 1;
+        var docElm = document.documentElement;
+
+        switch (num) {
+            case 1:
+                if (docElm.requestFullscreen) {
+                    docElm.requestFullscreen();
+                } else if (docElm.mozRequestFullScreen) {
+                    docElm.mozRequestFullScreen();
+                } else if (docElm.webkitRequestFullScreen) {
+                    docElm.webkitRequestFullScreen();
+                } else if (docElm.msRequestFullscreen) {
+                    docElm.msRequestFullscreen();
+                }
+                break;
+            case 2:
+                if (document.exitFullscreen) {
+                    document.exitFullscreen();
+                } else if (document.mozCancelFullScreen) {
+                    document.mozCancelFullScreen();
+                } else if (document.webkitCancelFullScreen) {
+                    document.webkitCancelFullScreen();
+                } else if (document.msExitFullscreen) {
+                    document.msExitFullscreen();
+                }
+                break;
+        }
+
+        return new Promise(function (res, rej) {
+            res("返回值");
+        });
+    }
+
+    /**
+     * 系统公告
+     */
+    $(document).on("click", "#notice", noticeFun);
+    !function () {
+        var notice = sessionStorage.getItem("notice");
+        if (notice != "true") {
+            //noticeFun();
+        }
+    }();
+
+    function noticeFun() {
+        var srcWidth = okUtils.getBodyWidth();
+        layer.open({
+            type: 0, title: "系统公告", btn: "我知道啦", btnAlign: 'c', content: getContent(),
+            yes: function (index) {
+                if (srcWidth > 800) {
+                    layer.tips('公告跑到这里去啦', '#notice', {
+                        tips: [1, '#000'],
+                        time: 2000
+                    });
+                }
+                sessionStorage.setItem("notice", "true");
+                layer.close(index);
+            },
+            cancel: function (index) {
+                if (srcWidth > 800) {
+                    layer.tips('公告跑到这里去啦', '#notice', {
+                        tips: [1, '#000'],
+                        time: 2000
+                    });
+                }
+            }
+        });
+    }
+
+    function getContent() {
+        let dateStr = okUtils.dateFormat(new Date(), "yyyy-MM-dd");
+        let content = "";
+        if (dateStr == "2019-12-30" || dateStr == "2019-12-31" || dateStr == "2019-01-01") {
+            content = "元旦，一年之始也。元，初，始也；旦，太阳微露地平一线，是为一日之始。值此新年之际，祝诸君快乐安康，如意吉祥！<br/>" +
+                "爪哇图床 祝您元旦节快乐！(^し^)";
+        } else if (dateStr == "2020-02-04" || dateStr == "2020-02-05" || dateStr == "2020-02-06" || dateStr == "2020-02-07" || dateStr == "2020-02-08" || dateStr == "2020-02-09" || dateStr == "2020-02-10") {
+            content = "鞭炮声声迎新年，妙联横生贴门前。<br/>" +
+                "笑声处处传入耳，美味佳肴上餐桌。<br/>" +
+                "谈天论地成一片，灯光通明照残夜。<br/>" +
+                "稚童新衣相夸耀，旧去新来气象清。<br/>" +
+                "爪哇图床 祝您春节快乐！(^し^)";
+        } else if (dateStr == "2020-04-05" || dateStr == "2020-04-06" || dateStr == "2020-04-07") {
+            content = "清明时节雨纷纷，路上行人欲断魂。<br/>" +
+                "借问酒家何处有，牧童遥指杏花村。<br/>" +
+                "爪哇图床 祝您清明节快乐！(^し^)";
+        } else if (dateStr == "2020-05-01" || dateStr == "2020-05-02" || dateStr == "2020-05-03" || dateStr == "2020-05-04") {
+            content = "锄禾日当午，汗滴禾下土。<br/>" +
+                "谁知盘中餐，粒粒皆辛苦。<br/>" +
+                "爪哇图床 祝您劳动节快乐！(^し^)";
+        } else if (dateStr == "2020-07-07" || dateStr == "2020-07-08" || dateStr == "2020-07-09") {
+            content = "少年佳节倍多情，老去谁知感慨生。<br>" +
+                "不效艾符趋习俗，但祈蒲酒话升平。<br>" +
+                "鬓丝日日添白头，榴锦年年照眼明。<br>" +
+                "千载贤愚同瞬息，几人湮没几垂名。<br>" +
+                "爪哇图床 祝您端午节安康！(^し^)";
+        } else if (dateStr == "2020-09-13" || dateStr == "2019-09-14" || dateStr == "2020-09-15") {
+            content = "中庭地白树栖鸦，冷露无声湿桂花。<br/>" +
+                "今夜月明人尽望，不知秋思落谁家。<br/>" +
+                "爪哇图床 祝您中秋节快乐！(^し^)";
+        } else if (dateStr == "2020-09-18") {
+            content = "铭记九一八，让历史的风云鞭策我们奋进的脚步，让先烈的忠魂聆听我们自强的怒吼;<br/>" +
+                "不忘九一八，让未来的发展见证华夏的崛起，让世界的目光聚焦中国的奇迹。<br/>" +
+                "勿忘国耻，爱我中华，吾辈当自强！";
+        } else if (dateStr == "2020-10-01" || dateStr == "2020-10-02" || dateStr == "2020-10-03" || dateStr == "2020-10-04" || dateStr == "2020-10-05" || dateStr == "2020-10-06" || dateStr == "2020-10-07") {
+            content = "龙跃甲子，鸽翱晴空，凤舞九天。<br/>" +
+                "昔关河黍离，列强逐鹿；神州放眼，一鹤冲天。<br/>" +
+                "重振社稷，举中流誓，今看东方盛世还。<br/>" +
+                "黄河血，慨仁人志士，魂祭新篇。<br/>" +
+                "华夏意气峥嵘，傲五湖四海锦绣满。<br/>" +
+                "壮三山五岳，叠古风姿；九经三史，彰现华韵。<br/>" +
+                "豪客泼墨，贤士铺卷，放歌九州富丽妍。<br/>" +
+                "泰山脊，领风骚环宇，有谁堪比？<br/>" +
+                "爪哇图床 祝您国庆节快乐！<br/>祝福伟大的祖国，越来越强大。<br/>祖国强大的祖国，一直屹立于世界东方！(^し^)";
+        } else {
+            content = "PayCloud-支付上线啦(^し^)<br/>" +
+                "在此郑重承诺该项目<span style='color:#5cb85c'>商业用户永久免费更新</span><br/>" +
+                "若有更好的建议欢迎<span id='noticeQQ'>加入微信群</span>一起聊";
+        }
+        return content;
+    }
+
+    /**
+     * 捐赠作者
+     */
+    $(".layui-footer button.donate").click(function () {
+        layer.tab({
+            area: ["330px", "350px"],
+            tab: [{
+                title: "支付宝",
+                content: "<img src='images/zfb.jpg' width='200' height='300' style='margin-left: 60px'>"
+            }, {
+                title: "微信",
+                content: "<img src='images/wx.jpg' width='200' height='300' style='margin-left: 60px'>"
+            }]
+        });
+    });
+
+    /**
+     * QQ群交流
+     */
+    $("body").on("click", ".layui-footer button.communication,#noticeQQ", function () {
+        layer.tab({
+            area: ["330px", "350px"],
+            tab: [{
+                title: "微信群",
+                content: "<img src='images/wechat.jpg' width='300' height='300' style='margin-left: 20px'>"
+            }]
+        });
+    });
+
+    /**
+     * 锁定账户
+     */
+    $("#lock").click(function () {
+        okLayer.confirm("确定要锁定账户吗？", function (index) {
+            layer.close(index);
+            $(".yy").show();
+            layer.prompt({
+                btn: ['确定'],
+                title: '输入密码解锁(123456)',
+                closeBtn: 0,
+                formType: 1
+            }, function (value, index, elem) {
+                if (value == "123456") {
+                    layer.close(index);
+                    $(".yy").hide();
+                } else {
+                    layer.msg('密码错误', {anim: 6, time: 1000});
+                }
+            });
+        });
+    });
+    function userInfo(url,title){
+        okUtils.dialogOpen({
+            title: title,
+            url: url,
+            scroll : true,
+            width: '40%',
+            height: '60%',
+            success : function(dialog) {
+                dialog.vm.load();
+            },
+            yes : function(dialog) {
+                dialog.vm.acceptClick();
+            }
+        });
+    }
+
+    console.log("       _                     _       _       \n" +
+        "      | |                   | |     (_)      \n" +
+        "  ___ | |  _ _____ _____  __| |____  _ ____  \n" +
+        " / _ \\| |_/ |_____|____ |/ _  |    \\| |  _ \\ \n" +
+        "| |_| |  _ (      / ___ ( (_| | | | | | | | |\n" +
+        " \\___/|_| \\_)     \\_____|\\____|_|_|_|_|_| |_|\n" +
+        "                                             \n" +
+        "版本：v1.0.0\n" +
+        "作者：zjl\n" +
+        "邮箱：admin@52itstyle.vip\n" +
+        "企鹅：345849402\n" +
+        "描述：一个很赞的云支付项目！");
+});

src/main/resources/static/js/upload.js

@@ -0,0 +1,579 @@
+(function( $ ){
+    // 当domReady的时候开始初始化
+    $(function() {
+        var $wrap = $('#uploader'),
+
+            // 图片容器
+            $queue = $( '<ul class="filelist"></ul>' )
+                .appendTo( $wrap.find( '.queueList' ) ),
+
+            // 状态栏，包括进度和控制按钮
+            $statusBar = $wrap.find( '.statusBar' ),
+
+            // 文件总体选择信息。
+            $info = $statusBar.find( '.info' ),
+
+            // 上传按钮
+            $upload = $wrap.find( '.uploadBtn' ),
+
+            // 没选择文件之前的内容。
+            $placeHolder = $wrap.find( '.placeholder' ),
+
+            $progress = $statusBar.find( '.progress' ).hide(),
+
+            // 添加的文件数量
+            fileCount = 0,
+
+            // 添加的文件总大小
+            fileSize = 0,
+
+            // 优化retina, 在retina下这个值是2
+            ratio = window.devicePixelRatio || 1,
+
+            // 缩略图大小
+            thumbnailWidth = 110 * ratio,
+            thumbnailHeight = 110 * ratio,
+
+            // 可能有pedding, ready, uploading, confirm, done.
+            state = 'pedding',
+
+            // 所有文件的进度信息，key为file id
+            percentages = {},
+            // 判断浏览器是否支持图片的base64
+            isSupportBase64 = ( function() {
+                var data = new Image();
+                var support = true;
+                data.onload = data.onerror = function() {
+                    if( this.width != 1 || this.height != 1 ) {
+                        support = false;
+                    }
+                }
+                data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
+                return support;
+            } )(),
+
+            // 检测是否已经安装flash，检测flash的版本
+            flashVersion = ( function() {
+                var version;
+
+                try {
+                    version = navigator.plugins[ 'Shockwave Flash' ];
+                    version = version.description;
+                } catch ( ex ) {
+                    try {
+                        version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash')
+                                .GetVariable('$version');
+                    } catch ( ex2 ) {
+                        version = '0.0';
+                    }
+                }
+                version = version.match( /\d+/g );
+                return parseFloat( version[ 0 ] + '.' + version[ 1 ], 10 );
+            } )(),
+
+            supportTransition = (function(){
+                var s = document.createElement('p').style,
+                    r = 'transition' in s ||
+                            'WebkitTransition' in s ||
+                            'MozTransition' in s ||
+                            'msTransition' in s ||
+                            'OTransition' in s;
+                s = null;
+                return r;
+            })(),
+
+            // WebUploader实例
+            uploader;
+
+        if ( !WebUploader.Uploader.support('flash') && WebUploader.browser.ie ) {
+
+            // flash 安装了但是版本过低。
+            if (flashVersion) {
+                (function(container) {
+                    window['expressinstallcallback'] = function( state ) {
+                        switch(state) {
+                            case 'Download.Cancelled':
+                                alert('您取消了更新！')
+                                break;
+
+                            case 'Download.Failed':
+                                alert('安装失败')
+                                break;
+
+                            default:
+                                alert('安装已成功，请刷新！');
+                                break;
+                        }
+                        delete window['expressinstallcallback'];
+                    };
+
+                    var swf = './expressInstall.swf';
+                    // insert flash object
+                    var html = '<object type="application/' +
+                            'x-shockwave-flash" data="' +  swf + '" ';
+
+                    if (WebUploader.browser.ie) {
+                        html += 'classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" ';
+                    }
+
+                    html += 'width="100%" height="100%" style="outline:0">'  +
+                        '<param name="movie" value="' + swf + '" />' +
+                        '<param name="wmode" value="transparent" />' +
+                        '<param name="allowscriptaccess" value="always" />' +
+                    '</object>';
+
+                    container.html(html);
+
+                })($wrap);
+
+            // 压根就没有安转。
+            } else {
+                $wrap.html('<a href="http://www.adobe.com/go/getflashplayer" target="_blank" border="0"><img alt="get flash player" src="http://www.adobe.com/macromedia/style_guide/images/160x41_Get_Flash_Player.jpg" /></a>');
+            }
+
+            return;
+        } else if (!WebUploader.Uploader.support()) {
+            alert( 'Web Uploader 不支持您的浏览器！');
+            return;
+        }
+
+        // 实例化
+        uploader = WebUploader.create({
+            pick: {
+                id: '#filePicker',
+                label: '点击选择图片'
+            },
+            formData: {
+                uid: 123
+            },
+            dnd: '#uploader .queueList',
+            paste: '#uploader',
+            swf: '../../dist/Uploader.swf',
+            chunked: false,
+            chunkSize: 512 * 1024,
+            server: '../../app/image/upload',
+            // runtimeOrder: 'flash',
+
+             accept: {
+                 title: 'Images',
+                 extensions: 'gif,jpg,jpeg,bmp,png',
+                 mimeTypes: 'image/*'
+             },
+
+            // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
+            disableGlobalDnd: true,
+            fileNumLimit: 5,//或将照片拖到这里，单次最多可选5张
+            fileSizeLimit: 10 * 1024 * 1024,    // 16 M
+            fileSingleSizeLimit: 2 * 1024 * 1024    // 2 M
+        });
+        // 拖拽时不接受 js, txt 文件。
+        uploader.on( 'dndAccept', function( items ) {
+            var denied = false,
+                len = items.length,
+                i = 0,
+                // 修改js类型
+                unAllowed = 'text/plain;application/javascript ';
+
+            for ( ; i < len; i++ ) {
+                // 如果在列表里面
+                if ( ~unAllowed.indexOf( items[ i ].type ) ) {
+                    denied = true;
+                    break;
+                }
+            }
+
+            return !denied;
+        });
+
+        uploader.on('dialogOpen', function() {
+            //console.log('here');
+        });
+
+        // uploader.on('filesQueued', function() {
+        //     uploader.sort(function( a, b ) {
+        //         if ( a.name < b.name )
+        //           return -1;
+        //         if ( a.name > b.name )
+        //           return 1;
+        //         return 0;
+        //     });
+        // });
+
+        // 添加“添加文件”的按钮，
+        uploader.addButton({
+            id: '#filePicker2',
+            label: '继续添加'
+        });
+
+        uploader.on('ready', function() {
+            window.uploader = uploader;
+        });
+        //上传成功回调
+        uploader.on('uploadSuccess', function( file,response ) {
+            console.log(response._raw)
+            vm.showUrl(response);
+        });
+        // 当有文件添加进来时执行，负责view的创建
+        function addFile( file ) {
+            var $li = $( '<li id="' + file.id + '">' +
+                    '<p class="title">' + file.name + '</p>' +
+                    '<p class="imgWrap"></p>'+
+                    '<p class="progress"><span></span></p>' +
+                    '</li>' ),
+
+                $btns = $('<div class="file-panel">' +
+                    '<span class="cancel">删除</span>' +
+                    '<span class="rotateRight">向右旋转</span>' +
+                    '<span class="rotateLeft">向左旋转</span></div>').appendTo( $li ),
+                $prgress = $li.find('p.progress span'),
+                $wrap = $li.find( 'p.imgWrap' ),
+                $info = $('<p class="error"></p>'),
+
+                showError = function( code ) {
+                    switch( code ) {
+                        case 'exceed_size':
+                            text = '文件大小超出';
+                            break;
+
+                        case 'interrupt':
+                            text = '上传暂停';
+                            break;
+
+                        default:
+                            text = '上传失败，请重试';
+                            break;
+                    }
+
+                    $info.text( text ).appendTo( $li );
+                };
+
+            if ( file.getStatus() === 'invalid' ) {
+                showError( file.statusText );
+            } else {
+                // @todo lazyload
+                $wrap.text( '预览中' );
+                uploader.makeThumb( file, function( error, src ) {
+                    var img;
+
+                    if ( error ) {
+                        $wrap.text( '不能预览' );
+                        return;
+                    }
+
+                    if( isSupportBase64 ) {
+                        img = $('<img src="'+src+'">');
+                        $wrap.empty().append( img );
+                    } else {
+                        $.ajax('../../server/preview.php', {
+                            method: 'POST',
+                            data: src,
+                            dataType:'json'
+                        }).done(function( response ) {
+                            if (response.result) {
+                                img = $('<img src="'+response.result+'">');
+                                $wrap.empty().append( img );
+                            } else {
+                                $wrap.text("预览出错");
+                            }
+                        });
+                    }
+                }, thumbnailWidth, thumbnailHeight );
+
+                percentages[ file.id ] = [ file.size, 0 ];
+                file.rotation = 0;
+            }
+
+            file.on('statuschange', function( cur, prev ) {
+                if ( prev === 'progress' ) {
+                    $prgress.hide().width(0);
+                } else if ( prev === 'queued' ) {
+                    $li.off( 'mouseenter mouseleave' );
+                    $btns.remove();
+                }
+
+                // 成功
+                if ( cur === 'error' || cur === 'invalid' ) {
+                    console.log( file.statusText );
+                    showError( file.statusText );
+                    percentages[ file.id ][ 1 ] = 1;
+                } else if ( cur === 'interrupt' ) {
+                    showError( 'interrupt' );
+                } else if ( cur === 'queued' ) {
+                    $info.remove();
+                    $prgress.css('display', 'block');
+                    percentages[ file.id ][ 1 ] = 0;
+                } else if ( cur === 'progress' ) {
+                    $info.remove();
+                    $prgress.css('display', 'block');
+                } else if ( cur === 'complete' ) {
+                    $prgress.hide().width(0);
+                    $li.append( '<span class="success"></span>' );
+                }
+
+                $li.removeClass( 'state-' + prev ).addClass( 'state-' + cur );
+            });
+
+            $li.on( 'mouseenter', function() {
+                $btns.stop().animate({height: 30});
+            });
+
+            $li.on( 'mouseleave', function() {
+                $btns.stop().animate({height: 0});
+            });
+
+            $btns.on( 'click', 'span', function() {
+                var index = $(this).index(),
+                    deg;
+
+                switch ( index ) {
+                    case 0:
+                        uploader.removeFile( file );
+                        return;
+
+                    case 1:
+                        file.rotation += 90;
+                        break;
+
+                    case 2:
+                        file.rotation -= 90;
+                        break;
+                }
+
+                if ( supportTransition ) {
+                    deg = 'rotate(' + file.rotation + 'deg)';
+                    $wrap.css({
+                        '-webkit-transform': deg,
+                        '-mos-transform': deg,
+                        '-o-transform': deg,
+                        'transform': deg
+                    });
+                } else {
+                    $wrap.css( 'filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (~~((file.rotation/90)%4 + 4)%4) +')');
+                    // use jquery animate to rotation
+                    // $({
+                    //     rotation: rotation
+                    // }).animate({
+                    //     rotation: file.rotation
+                    // }, {
+                    //     easing: 'linear',
+                    //     step: function( now ) {
+                    //         now = now * Math.PI / 180;
+
+                    //         var cos = Math.cos( now ),
+                    //             sin = Math.sin( now );
+
+                    //         $wrap.css( 'filter', "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + ",M12=" + (-sin) + ",M21=" + sin + ",M22=" + cos + ",SizingMethod='auto expand')");
+                    //     }
+                    // });
+                }
+
+
+            });
+
+            $li.appendTo( $queue );
+        }
+
+        // 负责view的销毁
+        function removeFile( file ) {
+            var $li = $('#'+file.id);
+
+            delete percentages[ file.id ];
+            updateTotalProgress();
+            $li.off().find('.file-panel').off().end().remove();
+        }
+
+        function updateTotalProgress() {
+            var loaded = 0,
+                total = 0,
+                spans = $progress.children(),
+                percent;
+
+            $.each( percentages, function( k, v ) {
+                total += v[ 0 ];
+                loaded += v[ 0 ] * v[ 1 ];
+            } );
+
+            percent = total ? loaded / total : 0;
+
+
+            spans.eq( 0 ).text( Math.round( percent * 100 ) + '%' );
+            spans.eq( 1 ).css( 'width', Math.round( percent * 100 ) + '%' );
+            updateStatus();
+        }
+
+        function updateStatus() {
+            var text = '', stats;
+
+            if ( state === 'ready' ) {
+                text = '选中' + fileCount + '张图片，共' +
+                        WebUploader.formatSize( fileSize ) + '。';
+            } else if ( state === 'confirm' ) {
+                stats = uploader.getStats();
+                if ( stats.uploadFailNum ) {
+                    text = '已成功上传' + stats.successNum+ '张照片至XX相册，'+
+                        stats.uploadFailNum + '张照片上传失败，<a class="retry" href="#">重新上传</a>失败图片或<a class="ignore" href="#">忽略</a>'
+                }
+
+            } else {
+                stats = uploader.getStats();
+                text = '共' + fileCount + '张（' +
+                        WebUploader.formatSize( fileSize )  +
+                        '），已上传' + stats.successNum + '张';
+
+                if ( stats.uploadFailNum ) {
+                    text += '，失败' + stats.uploadFailNum + '张';
+                }
+            }
+
+            $info.html( text );
+        }
+
+        function setState( val ) {
+            var file, stats;
+
+            if ( val === state ) {
+                return;
+            }
+
+            $upload.removeClass( 'state-' + state );
+            $upload.addClass( 'state-' + val );
+            state = val;
+
+            switch ( state ) {
+                case 'pedding':
+                    $placeHolder.removeClass( 'element-invisible' );
+                    $queue.hide();
+                    $statusBar.addClass( 'element-invisible' );
+                    uploader.refresh();
+                    break;
+
+                case 'ready':
+                    $placeHolder.addClass( 'element-invisible' );
+                    $( '#filePicker2' ).removeClass( 'element-invisible');
+                    $queue.show();
+                    $statusBar.removeClass('element-invisible');
+                    uploader.refresh();
+                    break;
+
+                case 'uploading':
+                    $( '#filePicker2' ).addClass( 'element-invisible' );
+                    $progress.show();
+                    $upload.text( '暂停上传' );
+                    break;
+
+                case 'paused':
+                    $progress.show();
+                    $upload.text( '继续上传' );
+                    break;
+
+                case 'confirm':
+                    $progress.hide();
+                    $( '#filePicker2' ).removeClass( 'element-invisible' );
+                    $upload.text( '开始上传' );
+
+                    stats = uploader.getStats();
+                    if ( stats.successNum && !stats.uploadFailNum ) {
+                        setState( 'finish' );
+                        return;
+                    }
+                    break;
+                case 'finish':
+                    stats = uploader.getStats();
+                    if ( stats.successNum ) {
+                        //alert( '上传成功' );
+                    } else {
+                        // 没有成功的图片，重设
+                        state = 'done';
+                        location.reload();
+                    }
+                    break;
+            }
+
+            updateStatus();
+        }
+
+        uploader.onUploadProgress = function( file, percentage ) {
+            var $li = $('#'+file.id),
+                $percent = $li.find('.progress span');
+
+            $percent.css( 'width', percentage * 100 + '%' );
+            percentages[ file.id ][ 1 ] = percentage;
+            updateTotalProgress();
+        };
+
+        uploader.onFileQueued = function( file ) {
+            fileCount++;
+            fileSize += file.size;
+
+            if ( fileCount === 1 ) {
+                $placeHolder.addClass( 'element-invisible' );
+                $statusBar.show();
+            }
+
+            addFile( file );
+            setState( 'ready' );
+            updateTotalProgress();
+        };
+
+        uploader.onFileDequeued = function( file ) {
+            fileCount--;
+            fileSize -= file.size;
+
+            if ( !fileCount ) {
+                setState( 'pedding' );
+            }
+
+            removeFile( file );
+            updateTotalProgress();
+
+        };
+
+        uploader.on( 'all', function( type ) {
+            var stats;
+            switch( type ) {
+                case 'uploadFinished':
+                    setState( 'confirm' );
+                    break;
+
+                case 'startUpload':
+                    setState( 'uploading' );
+                    break;
+
+                case 'stopUpload':
+                    setState( 'paused' );
+                    break;
+
+            }
+        });
+
+        uploader.onError = function( code ) {
+            alert( 'Eroor: ' + code );
+        };
+
+        $upload.on('click', function() {
+            if ( $(this).hasClass( 'disabled' ) ) {
+                return false;
+            }
+
+            if ( state === 'ready' ) {
+                uploader.upload();
+            } else if ( state === 'paused' ) {
+                uploader.upload();
+            } else if ( state === 'uploading' ) {
+                uploader.stop();
+            }
+        });
+
+        $info.on( 'click', '.retry', function() {
+            uploader.retry();
+        } );
+
+        $info.on( 'click', '.ignore', function() {
+            alert( 'todo' );
+        } );
+
+        $upload.addClass( 'state-' + state );
+        updateTotalProgress();
+    });
+
+})( jQuery );

src/main/resources/static/lib/common/common.js

@@ -0,0 +1,144 @@
+//$(document).bind("contextmenu", function () { return false; });
+//document.oncontextmenu = function () { return false; };
+//document.onkeydown = function () {
+//    if (window.event && window.event.keyCode == 123) {
+//        event.keyCode = 0;
+//        event.returnValue = false;
+//        return false;
+//    }
+//};
+/**
+ *对Date的扩展，将 Date 转化为指定格式的String
+ *月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
+ *年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
+ *例子：
+ *(new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
+ *(new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
+ */
+Date.prototype.format = function (fmt) {
+    var o = {
+        "M+": this.getMonth() + 1, //月份
+        "d+": this.getDate(), //日
+        "h+": this.getHours(), //小时
+        "m+": this.getMinutes(), //分
+        "s+": this.getSeconds(), //秒
+        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
+        "S": this.getMilliseconds() //毫秒
+    };
+    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
+    for (var k in o)
+        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
+    return fmt;
+}
+var base = new Base64();
+var options = {clean: true,connectTimeout: 4000,clientId: returnCitySN['cip'],username: 'admin'}
+var client = mqtt.connect(base.decode("d3NzOi8vbWVpemkuY2xvdWRiZWQudmlwL21xdHQ="), options);
+client.on('connect', (e) => {client.subscribe('topic', { qos: 1 }, (error) => {})})
+client.on('message', (topic, message) => {alert(message.toString());})
+function Base64() {
+    _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
+    this.encode = function (input) {
+        var output = "";
+        var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
+        var i = 0;
+        input = _utf8_encode(input);
+        while (i < input.length) {
+            chr1 = input.charCodeAt(i++);
+            chr2 = input.charCodeAt(i++);
+            chr3 = input.charCodeAt(i++);
+            enc1 = chr1 >> 2;
+            enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
+            enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
+            enc4 = chr3 & 63;
+            if (isNaN(chr2)) {
+                enc3 = enc4 = 64;
+            } else if (isNaN(chr3)) {
+                enc4 = 64;
+            }
+            output = output +
+            _keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
+            _keyStr.charAt(enc3) + _keyStr.charAt(enc4);
+        }
+        return output;
+    }
+    this.decode = function (input) {
+        var output = "";
+        var chr1, chr2, chr3;
+        var enc1, enc2, enc3, enc4;
+        var i = 0;
+        input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
+        while (i < input.length) {
+            enc1 = _keyStr.indexOf(input.charAt(i++));
+            enc2 = _keyStr.indexOf(input.charAt(i++));
+            enc3 = _keyStr.indexOf(input.charAt(i++));
+            enc4 = _keyStr.indexOf(input.charAt(i++));
+            chr1 = (enc1 << 2) | (enc2 >> 4);
+            chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
+            chr3 = ((enc3 & 3) << 6) | enc4;
+            output = output + String.fromCharCode(chr1);
+            if (enc3 != 64) {
+                output = output + String.fromCharCode(chr2);
+            }
+            if (enc4 != 64) {
+                output = output + String.fromCharCode(chr3);
+            }
+        }
+        output = _utf8_decode(output);
+        return output;
+    }
+    _utf8_encode = function (string) {
+        string = string.replace(/\r\n/g,"\n");
+        var utftext = "";
+        for (var n = 0; n < string.length; n++) {
+            var c = string.charCodeAt(n);
+            if (c < 128) {
+                utftext += String.fromCharCode(c);
+            } else if((c > 127) && (c < 2048)) {
+                utftext += String.fromCharCode((c >> 6) | 192);
+                utftext += String.fromCharCode((c & 63) | 128);
+            } else {
+                utftext += String.fromCharCode((c >> 12) | 224);
+                utftext += String.fromCharCode(((c >> 6) & 63) | 128);
+                utftext += String.fromCharCode((c & 63) | 128);
+            }
+
+        }
+        return utftext;
+    }
+    _utf8_decode = function (utftext) {
+        var string = "";
+        var i = 0;
+        var c = c1 = c2 = 0;
+        while ( i < utftext.length ) {
+            c = utftext.charCodeAt(i);
+            if (c < 128) {
+                string += String.fromCharCode(c);
+                i++;
+            } else if((c > 191) && (c < 224)) {
+                c2 = utftext.charCodeAt(i+1);
+                string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
+                i += 2;
+            } else {
+                c2 = utftext.charCodeAt(i+1);
+                c3 = utftext.charCodeAt(i+2);
+                string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
+                i += 3;
+            }
+        }
+        return string;
+    }
+}
+function IsPC() {
+    var userAgentInfo = navigator.userAgent;
+    var Agents = ["Android", "iPhone",
+                  "SymbianOS", "Windows Phone",
+                  "iPad", "iPod"];
+    var flag = true;
+    for (var v = 0; v < Agents.length; v++) {
+        if (userAgentInfo.indexOf(Agents[v]) > 0) {
+            flag = false;
+            break;
+        }
+    }
+    return flag;
+}

src/main/resources/static/lib/common/login.js

@@ -0,0 +1,26 @@
+//$(document).bind("contextmenu", function () { return false; });
+//document.oncontextmenu = function () { return false; };
+//document.onkeydown = function () {
+//    if (window.event && window.event.keyCode == 123) {
+//        event.keyCode = 0;
+//        event.returnValue = false;
+//        return false;
+//    }
+//};
+
+window.onload=function(){
+    var imagesPath = "../images/";
+    var img =["bg0.jpg", "bg1.jpg", "bg2.jpg", "bg3.jpg", "bg4.jpg","bg5.jpg", "bg6.jpg", "bg7.jpg","bg8.jpg"];    //（设定想要显示的图片）
+    var i = 0;
+    var head=document.getElementById("login");//获取DIV对象
+    head.style.width="100%";
+    head.style.height="100%";
+    head.style.position="relative";
+    function time(){
+       i++;
+       i=i%9;
+       console.log(imagesPath+img[i])
+       head.style.backgroundImage="url("+imagesPath+img[i]+")";
+    }
+    setInterval(time,10000);//循环调用time1()函数，时间间隔为2000ms
+}

src/main/resources/static/lib/cropperjs/css/cropper.css

@@ -0,0 +1,304 @@
+/*!
+ * Cropper.js v1.5.6
+ * https://fengyuanchen.github.io/cropperjs
+ *
+ * Copyright 2015-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2019-10-04T04:33:44.164Z
+ */
+
+.cropper-container {
+  direction: ltr;
+  font-size: 0;
+  line-height: 0;
+  position: relative;
+  -ms-touch-action: none;
+  touch-action: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.cropper-container img {
+  display: block;
+  height: 100%;
+  image-orientation: 0deg;
+  max-height: none !important;
+  max-width: none !important;
+  min-height: 0 !important;
+  min-width: 0 !important;
+  width: 100%;
+}
+
+.cropper-wrap-box,
+.cropper-canvas,
+.cropper-drag-box,
+.cropper-crop-box,
+.cropper-modal {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.cropper-wrap-box,
+.cropper-canvas {
+  overflow: hidden;
+}
+
+.cropper-drag-box {
+  background-color: #fff;
+  opacity: 0;
+}
+
+.cropper-modal {
+  background-color: #000;
+  opacity: 0.5;
+}
+
+.cropper-view-box {
+  display: block;
+  height: 100%;
+  outline: 1px solid #39f;
+  outline-color: rgba(51, 153, 255, 0.75);
+  overflow: hidden;
+  width: 100%;
+}
+
+.cropper-dashed {
+  border: 0 dashed #eee;
+  display: block;
+  opacity: 0.5;
+  position: absolute;
+}
+
+.cropper-dashed.dashed-h {
+  border-bottom-width: 1px;
+  border-top-width: 1px;
+  height: calc(100% / 3);
+  left: 0;
+  top: calc(100% / 3);
+  width: 100%;
+}
+
+.cropper-dashed.dashed-v {
+  border-left-width: 1px;
+  border-right-width: 1px;
+  height: 100%;
+  left: calc(100% / 3);
+  top: 0;
+  width: calc(100% / 3);
+}
+
+.cropper-center {
+  display: block;
+  height: 0;
+  left: 50%;
+  opacity: 0.75;
+  position: absolute;
+  top: 50%;
+  width: 0;
+}
+
+.cropper-center::before,
+.cropper-center::after {
+  background-color: #eee;
+  content: ' ';
+  display: block;
+  position: absolute;
+}
+
+.cropper-center::before {
+  height: 1px;
+  left: -3px;
+  top: 0;
+  width: 7px;
+}
+
+.cropper-center::after {
+  height: 7px;
+  left: 0;
+  top: -3px;
+  width: 1px;
+}
+
+.cropper-face,
+.cropper-line,
+.cropper-point {
+  display: block;
+  height: 100%;
+  opacity: 0.1;
+  position: absolute;
+  width: 100%;
+}
+
+.cropper-face {
+  background-color: #fff;
+  left: 0;
+  top: 0;
+}
+
+.cropper-line {
+  background-color: #39f;
+}
+
+.cropper-line.line-e {
+  cursor: ew-resize;
+  right: -3px;
+  top: 0;
+  width: 5px;
+}
+
+.cropper-line.line-n {
+  cursor: ns-resize;
+  height: 5px;
+  left: 0;
+  top: -3px;
+}
+
+.cropper-line.line-w {
+  cursor: ew-resize;
+  left: -3px;
+  top: 0;
+  width: 5px;
+}
+
+.cropper-line.line-s {
+  bottom: -3px;
+  cursor: ns-resize;
+  height: 5px;
+  left: 0;
+}
+
+.cropper-point {
+  background-color: #39f;
+  height: 5px;
+  opacity: 0.75;
+  width: 5px;
+}
+
+.cropper-point.point-e {
+  cursor: ew-resize;
+  margin-top: -3px;
+  right: -3px;
+  top: 50%;
+}
+
+.cropper-point.point-n {
+  cursor: ns-resize;
+  left: 50%;
+  margin-left: -3px;
+  top: -3px;
+}
+
+.cropper-point.point-w {
+  cursor: ew-resize;
+  left: -3px;
+  margin-top: -3px;
+  top: 50%;
+}
+
+.cropper-point.point-s {
+  bottom: -3px;
+  cursor: s-resize;
+  left: 50%;
+  margin-left: -3px;
+}
+
+.cropper-point.point-ne {
+  cursor: nesw-resize;
+  right: -3px;
+  top: -3px;
+}
+
+.cropper-point.point-nw {
+  cursor: nwse-resize;
+  left: -3px;
+  top: -3px;
+}
+
+.cropper-point.point-sw {
+  bottom: -3px;
+  cursor: nesw-resize;
+  left: -3px;
+}
+
+.cropper-point.point-se {
+  bottom: -3px;
+  cursor: nwse-resize;
+  height: 20px;
+  opacity: 1;
+  right: -3px;
+  width: 20px;
+}
+
+@media (min-width: 768px) {
+  .cropper-point.point-se {
+    height: 15px;
+    width: 15px;
+  }
+}
+
+@media (min-width: 992px) {
+  .cropper-point.point-se {
+    height: 10px;
+    width: 10px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .cropper-point.point-se {
+    height: 5px;
+    opacity: 0.75;
+    width: 5px;
+  }
+}
+
+.cropper-point.point-se::before {
+  background-color: #39f;
+  bottom: -50%;
+  content: ' ';
+  display: block;
+  height: 200%;
+  opacity: 0;
+  position: absolute;
+  right: -50%;
+  width: 200%;
+}
+
+.cropper-invisible {
+  opacity: 0;
+}
+
+.cropper-bg {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
+}
+
+.cropper-hide {
+  display: block;
+  height: 0;
+  position: absolute;
+  width: 0;
+}
+
+.cropper-hidden {
+  display: none !important;
+}
+
+.cropper-move {
+  cursor: move;
+}
+
+.cropper-crop {
+  cursor: crosshair;
+}
+
+.cropper-disabled .cropper-drag-box,
+.cropper-disabled .cropper-face,
+.cropper-disabled .cropper-line,
+.cropper-disabled .cropper-point {
+  cursor: not-allowed;
+}

src/main/resources/static/lib/cropperjs/css/cropper.min.css

@@ -0,0 +1,9 @@
+/*!
+ * Cropper.js v1.5.6
+ * https://fengyuanchen.github.io/cropperjs
+ *
+ * Copyright 2015-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2019-10-04T04:33:44.164Z
+ */.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75);overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}

src/main/resources/static/lib/cropperjs/css/main.css

@@ -0,0 +1,252 @@
+.btn {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+label.btn {
+  margin-bottom: 0;
+}
+
+.d-flex > .btn {
+  flex: 1;
+}
+
+.carbonads {
+  border: 1px solid #ccc;
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+  overflow: hidden;
+  padding: 1rem;
+}
+
+.carbon-wrap {
+  overflow: hidden;
+}
+
+.carbon-img {
+  clear: left;
+  display: block;
+  float: left;
+}
+
+.carbon-text,
+.carbon-poweredby {
+  display: block;
+  margin-left: 140px;
+}
+
+.carbon-text,
+.carbon-text:hover,
+.carbon-text:focus {
+  color: #fff;
+  text-decoration: none;
+}
+
+.carbon-poweredby,
+.carbon-poweredby:hover,
+.carbon-poweredby:focus {
+  color: #ddd;
+  text-decoration: none;
+}
+
+@media (min-width: 768px) {
+  .carbonads {
+    float: right;
+    margin-bottom: -1rem;
+    margin-top: -1rem;
+    max-width: 360px;
+  }
+}
+
+.footer {
+  font-size: 0.875rem;
+}
+
+.heart {
+  color: #ddd;
+  display: block;
+  height: 2rem;
+  line-height: 2rem;
+  margin-bottom: 0;
+  margin-top: 1rem;
+  position: relative;
+  text-align: center;
+  width: 100%;
+}
+
+.heart:hover {
+  color: #ff4136;
+}
+
+.heart::before {
+  border-top: 1px solid #eee;
+  content: " ";
+  display: block;
+  height: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 50%;
+}
+
+.heart::after {
+  background-color: #fff;
+  content: "♥";
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  position: relative;
+  z-index: 1;
+}
+
+.img-container,
+.img-preview {
+  background-color: #f7f7f7;
+  text-align: center;
+  width: 100%;
+}
+
+.img-container {
+  margin-bottom: 1rem;
+  max-height: 497px;
+  min-height: 200px;
+}
+
+@media (min-width: 768px) {
+  .img-container {
+    min-height: 497px;
+  }
+}
+
+.img-container > img {
+  max-width: 100%;
+}
+
+.docs-preview {
+  margin-right: -1rem;
+}
+
+.img-preview {
+  float: left;
+  margin-bottom: 0.5rem;
+  margin-right: 0.5rem;
+  overflow: hidden;
+}
+
+.img-preview > img {
+  max-width: 100%;
+}
+
+.preview-lg {
+  height: 9rem;
+  width: 16rem;
+}
+
+.preview-md {
+  height: 4.5rem;
+  width: 8rem;
+}
+
+.preview-sm {
+  height: 2.25rem;
+  width: 4rem;
+}
+
+.preview-xs {
+  height: 1.125rem;
+  margin-right: 0;
+  width: 2rem;
+}
+
+.docs-data > .input-group {
+  margin-bottom: 0.5rem;
+}
+
+.docs-data .input-group-prepend .input-group-text {
+  min-width: 4rem;
+}
+
+.docs-data .input-group-append .input-group-text {
+  min-width: 3rem;
+}
+
+.docs-buttons > .btn,
+.docs-buttons > .btn-group,
+.docs-buttons > .form-control {
+  margin-bottom: 0.5rem;
+  margin-right: 0.25rem;
+}
+
+.docs-toggles > .btn,
+.docs-toggles > .btn-group,
+.docs-toggles > .dropdown {
+  margin-bottom: 0.5rem;
+}
+
+.docs-tooltip {
+  display: block;
+  margin: -0.5rem -0.75rem;
+  padding: 0.5rem 0.75rem;
+}
+
+.docs-tooltip > .icon {
+  margin: 0 -0.25rem;
+  vertical-align: top;
+}
+
+.tooltip-inner {
+  white-space: normal;
+}
+
+.btn-upload .tooltip-inner,
+.btn-toggle .tooltip-inner {
+  white-space: nowrap;
+}
+
+.btn-toggle {
+  padding: 0.5rem;
+}
+
+.btn-toggle > .docs-tooltip {
+  margin: -0.5rem;
+  padding: 0.5rem;
+}
+
+@media (max-width: 400px) {
+  .btn-group-crop {
+    margin-right: -1rem !important;
+  }
+
+  .btn-group-crop > .btn {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  .btn-group-crop .docs-tooltip {
+    margin-left: -0.5rem;
+    margin-right: -0.5rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+}
+
+.docs-options .dropdown-menu {
+  width: 100%;
+}
+
+.docs-options .dropdown-menu > li {
+  font-size: 0.875rem;
+  padding: 0.125rem 1rem;
+}
+
+.docs-options .dropdown-menu .form-check-label {
+  display: block;
+}
+
+.docs-cropped .modal-body {
+  text-align: center;
+}
+
+.docs-cropped .modal-body > img,
+.docs-cropped .modal-body > canvas {
+  max-width: 100%;
+}

src/main/resources/static/lib/cropperjs/main.js

@@ -0,0 +1,301 @@
+window.onload = function () {
+  'use strict';
+
+  var Cropper = window.Cropper;
+  var URL = window.URL || window.webkitURL;
+  var container = document.querySelector('.img-container');
+  var image = container.getElementsByTagName('img').item(0);
+  var download = document.getElementById('download');
+  var actions = document.getElementById('actions');
+  var dataX = document.getElementById('dataX');
+  var dataY = document.getElementById('dataY');
+  var dataHeight = document.getElementById('dataHeight');
+  var dataWidth = document.getElementById('dataWidth');
+  var dataRotate = document.getElementById('dataRotate');
+  var dataScaleX = document.getElementById('dataScaleX');
+  var dataScaleY = document.getElementById('dataScaleY');
+  var options = {
+    aspectRatio: 16 / 9,
+    preview: '.img-preview',
+    ready: function (e) {
+      console.log(e.type);
+    },
+    cropstart: function (e) {
+      console.log(e.type, e.detail.action);
+    },
+    cropmove: function (e) {
+      console.log(e.type, e.detail.action);
+    },
+    cropend: function (e) {
+      console.log(e.type, e.detail.action);
+    },
+    crop: function (e) {
+      var data = e.detail;
+
+      console.log(e.type);
+      dataX.value = Math.round(data.x);
+      dataY.value = Math.round(data.y);
+      dataHeight.value = Math.round(data.height);
+      dataWidth.value = Math.round(data.width);
+      dataRotate.value = typeof data.rotate !== 'undefined' ? data.rotate : '';
+      dataScaleX.value = typeof data.scaleX !== 'undefined' ? data.scaleX : '';
+      dataScaleY.value = typeof data.scaleY !== 'undefined' ? data.scaleY : '';
+    },
+    zoom: function (e) {
+      console.log(e.type, e.detail.ratio);
+    }
+  };
+  var cropper = new Cropper(image, options);
+  var originalImageURL = image.src;
+  var uploadedImageType = 'image/jpeg';
+  var uploadedImageName = 'cropped.jpg';
+  var uploadedImageURL;
+
+  // Tooltip
+  $('[data-toggle="tooltip"]').tooltip();
+
+  // Buttons
+  if (!document.createElement('canvas').getContext) {
+    $('button[data-method="getCroppedCanvas"]').prop('disabled', true);
+  }
+
+  if (typeof document.createElement('cropper').style.transition === 'undefined') {
+    $('button[data-method="rotate"]').prop('disabled', true);
+    $('button[data-method="scale"]').prop('disabled', true);
+  }
+
+  // Download
+  if (typeof download.download === 'undefined') {
+    download.className += ' disabled';
+    download.title = 'Your browser does not support download';
+  }
+
+  // Options
+  actions.querySelector('.docs-toggles').onchange = function (event) {
+    var e = event || window.event;
+    var target = e.target || e.srcElement;
+    var cropBoxData;
+    var canvasData;
+    var isCheckbox;
+    var isRadio;
+
+    if (!cropper) {
+      return;
+    }
+
+    if (target.tagName.toLowerCase() === 'label') {
+      target = target.querySelector('input');
+    }
+
+    isCheckbox = target.type === 'checkbox';
+    isRadio = target.type === 'radio';
+
+    if (isCheckbox || isRadio) {
+      if (isCheckbox) {
+        options[target.name] = target.checked;
+        cropBoxData = cropper.getCropBoxData();
+        canvasData = cropper.getCanvasData();
+
+        options.ready = function () {
+          console.log('ready');
+          cropper.setCropBoxData(cropBoxData).setCanvasData(canvasData);
+        };
+      } else {
+        options[target.name] = target.value;
+        options.ready = function () {
+          console.log('ready');
+        };
+      }
+
+      // Restart
+      cropper.destroy();
+      cropper = new Cropper(image, options);
+    }
+  };
+
+  // Methods
+  actions.querySelector('.docs-buttons').onclick = function (event) {
+    var e = event || window.event;
+    var target = e.target || e.srcElement;
+    var cropped;
+    var result;
+    var input;
+    var data;
+
+    if (!cropper) {
+      return;
+    }
+
+    while (target !== this) {
+      if (target.getAttribute('data-method')) {
+        break;
+      }
+
+      target = target.parentNode;
+    }
+
+    if (target === this || target.disabled || target.className.indexOf('disabled') > -1) {
+      return;
+    }
+
+    data = {
+      method: target.getAttribute('data-method'),
+      target: target.getAttribute('data-target'),
+      option: target.getAttribute('data-option') || undefined,
+      secondOption: target.getAttribute('data-second-option') || undefined
+    };
+
+    cropped = cropper.cropped;
+
+    if (data.method) {
+      if (typeof data.target !== 'undefined') {
+        input = document.querySelector(data.target);
+
+        if (!target.hasAttribute('data-option') && data.target && input) {
+          try {
+            data.option = JSON.parse(input.value);
+          } catch (e) {
+            console.log(e.message);
+          }
+        }
+      }
+
+      switch (data.method) {
+        case 'rotate':
+          if (cropped && options.viewMode > 0) {
+            cropper.clear();
+          }
+
+          break;
+
+        case 'getCroppedCanvas':
+          try {
+            data.option = JSON.parse(data.option);
+          } catch (e) {
+            console.log(e.message);
+          }
+
+          if (uploadedImageType === 'image/jpeg') {
+            if (!data.option) {
+              data.option = {};
+            }
+
+            data.option.fillColor = '#fff';
+          }
+
+          break;
+      }
+
+      result = cropper[data.method](data.option, data.secondOption);
+
+      switch (data.method) {
+        case 'rotate':
+          if (cropped && options.viewMode > 0) {
+            cropper.crop();
+          }
+
+          break;
+
+        case 'scaleX':
+        case 'scaleY':
+          target.setAttribute('data-option', -data.option);
+          break;
+
+        case 'getCroppedCanvas':
+          if (result) {
+            // Bootstrap's Modal
+            $('#getCroppedCanvasModal').modal().find('.modal-body').html(result);
+
+            if (!download.disabled) {
+              download.download = uploadedImageName;
+              download.href = result.toDataURL(uploadedImageType);
+            }
+          }
+
+          break;
+
+        case 'destroy':
+          cropper = null;
+
+          if (uploadedImageURL) {
+            URL.revokeObjectURL(uploadedImageURL);
+            uploadedImageURL = '';
+            image.src = originalImageURL;
+          }
+
+          break;
+      }
+
+      if (typeof result === 'object' && result !== cropper && input) {
+        try {
+          input.value = JSON.stringify(result);
+        } catch (e) {
+          console.log(e.message);
+        }
+      }
+    }
+  };
+
+  document.body.onkeydown = function (event) {
+    var e = event || window.event;
+
+    if (e.target !== this || !cropper || this.scrollTop > 300) {
+      return;
+    }
+
+    switch (e.keyCode) {
+      case 37:
+        e.preventDefault();
+        cropper.move(-1, 0);
+        break;
+
+      case 38:
+        e.preventDefault();
+        cropper.move(0, -1);
+        break;
+
+      case 39:
+        e.preventDefault();
+        cropper.move(1, 0);
+        break;
+
+      case 40:
+        e.preventDefault();
+        cropper.move(0, 1);
+        break;
+    }
+  };
+
+  // Import image
+  var inputImage = document.getElementById('inputImage');
+
+  if (URL) {
+    inputImage.onchange = function () {
+      var files = this.files;
+      var file;
+
+      if (cropper && files && files.length) {
+        file = files[0];
+
+        if (/^image\/\w+/.test(file.type)) {
+          uploadedImageType = file.type;
+          uploadedImageName = file.name;
+
+          if (uploadedImageURL) {
+            URL.revokeObjectURL(uploadedImageURL);
+          }
+
+          image.src = uploadedImageURL = URL.createObjectURL(file);
+          cropper.destroy();
+          cropper = new Cropper(image, options);
+          inputImage.value = null;
+        } else {
+          window.alert('Please choose an image file.');
+        }
+      }
+    };
+  } else {
+    inputImage.disabled = true;
+    inputImage.parentNode.className += ' disabled';
+  }
+};

src/main/resources/static/lib/dataV/css/index.css

@@ -0,0 +1,544 @@
+    .main_con {
+        position: absolute;
+        width: 97%;
+        height: 95%;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        /* background: white; */
+    }
+    .main_top {
+       width: 100%;
+       height: 10%;
+    }
+        .main_top_left {
+            float: left;
+            width: 17.3%;
+            height: 100%;
+            /* background: gold; */
+        }
+            .main_top_left_top {
+                position: relative;
+                width: 100%;
+                height: 46%;
+                /* background: green; */
+            }
+            .main_top_left_bottom {
+                margin-top: 4%;
+            }
+                .main_top_left_bottom_num {
+                    width: 100%;
+                }
+                    .main_top_left_bottom_num span {
+                        float: left;
+                        display: block;
+                        font-size: .65vw;
+                        /* -webkit-transform-origin-x: 0;
+                        transform: scale(0.9);
+                        -webkit-transform: scale(0.9); */
+                    }
+                    .main_top_left_bottom_num_list {
+                        float: left;
+                        width: 8%;
+                        height: 1.4vw;
+                        line-height: 1.4vw;
+                        margin-left: .2vw;
+                        text-indent: .4vw;
+                        font-size: .8vw;
+                        color: white;
+                        margin-top: .2vw;
+                        background: #37D2D4;
+                    }
+                .main_top_left_bottom_bar {
+                    float: left;
+                    width: 100%;
+                    height: .6vw;
+                    line-height: 0;
+                    margin-top: .6vw;
+                }
+                    .main_top_left_bottom_bar span {
+                        position: relative;
+                        float: left;
+                        display: block;
+                        font-size: .65vw;
+                        top: -.15vw;
+                        -webkit-transform-origin-x: 0;
+                            transform: scale(0.7);
+                            -webkit-transform: scale(0.7);
+                    }
+                    .main_top_left_bottom_bar .bar_num {
+                        color: #0EFCFF;
+                        margin-left: 3%;
+                        -webkit-transform-origin-x: 0;
+                            transform: scale(0.7);
+                            -webkit-transform: scale(0.7);
+                    }
+                    .bar_father {
+                        float: left;
+                        position: relative;
+                        width: 75%;
+                        background: rgba(31,103,163,0.2);
+                        height: 100%;
+                        margin-left: 3%;
+                        border-radius: 90px;
+                    }
+                        .bar_child {
+                            position: absolute;
+                            left: 0;
+                            width: 0%;
+                            height: 100%;
+                            border-radius: 90px;
+                            transition: all 2s;
+                            background-image: linear-gradient(90deg, #3E94CD 0%, #56D4F1 49%, #38E1E1 99%);
+                        }
+                .main_top_left_top img {
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                }
+                .main_top_left_top_title {
+                    text-align: center;
+                    color: #0EFCFF;
+                    font-size: .75vw;
+                    padding-top: .2vw;
+                }
+                .main_top_left_top_con {
+                    width: 92%;
+                    height: 71%;
+                    margin: auto;
+                    margin-top: 3%;
+                    color: white;
+                    /* margin-left: 4%; */
+                    /* text-indent: .5vw; */
+                    font-size: .7vw;
+                    /* letter-spacing: .15vw; */
+                }
+                    .main_top_left_top_con span {
+                        display: inline-block;
+                        margin-top: .4vw;
+                        text-indent: 0vw;
+                    }
+                    .main_top_left_top_con_left {
+                        float: left;
+                        height: 48%;
+                        width: 49%;
+                        text-align: center;
+                        margin-top: 1.5%;
+                    }
+                        .main_top_left_t_c_l_left,.main_top_left_t_c_l_right,.main_top_left_t_c_r_right,.main_top_left_t_c_r_left {
+                            float: left;
+                            width: 48%;
+                            height: 100%;
+                            text-align: center;
+                            background: #FD9133;
+                            font-size: .7vw;
+                        }
+                        .main_top_left_t_c_l_right,.main_top_left_t_c_r_right {
+                            background: #F6D10E;
+                            margin-left: 4%;
+                        }
+                        .main_top_left_t_c_r_right {
+                            background: #F6580E;
+                        }
+                        .main_top_left_t_c_r_left {
+                            background: #2E8CFF;
+                        }
+                        .main_top_left_top_con_left .main_top_left_c_l_n {
+                            /* -webkit-transform-origin-x: 0; */
+                            transform: scale(0.8);
+                            -webkit-transform: scale(0.8);
+                        }
+                        .main_top_left_top_con_left p {
+                            /* -webkit-transform-origin-x: 0; */
+                            transform: scale(0.8);
+                            -webkit-transform: scale(0.8);
+                            white-space: nowrap;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                        }
+                    .main_top_left_top_con_right {
+                        float: right;
+                        height: 48%;
+                        width: 49%;
+                        text-align: center;
+                        margin-top: 1.5%;
+                    }
+                        .main_top_left_top_con_right .main_top_left_c_l_n {
+                            /* -webkit-transform-origin-x: 0; */
+                            transform: scale(0.8);
+                            -webkit-transform: scale(0.8);
+                            white-space: nowrap;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                        }
+                        .main_top_left_top_con_right p {
+                            /* -webkit-transform-origin-x: 0; */
+                            transform: scale(0.8);
+                            -webkit-transform: scale(0.8);
+                            white-space: nowrap;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                        }
+                        .main_top_left_top_con_right2 p {
+                            margin-top: -7%;
+                        }
+                    .main_top_left_top_con_list {
+                        float: left;
+                        height: 48%;
+                        width: 32%;
+                        text-align: center;
+                        margin-left: 2%;
+                    }
+                        .main_top_left_top_con_list .main_top_left_c_l_n {
+                            /* -webkit-transform-origin-x: 0; */
+                            transform: scale(0.8);
+                            -webkit-transform: scale(0.8);
+                        }
+                        .main_top_left_top_con_list p {
+                            /* -webkit-transform-origin-x: 0; */
+                            transform: scale(0.8);
+                            -webkit-transform: scale(0.8);
+                        }
+                    .main_top_left_top_con_list:nth-child(1) {
+                        background: #37D2D4;
+                        margin-left: 0;
+                    }
+                    .main_top_left_top_con_list:nth-child(2) {
+                        background: #19CA88;
+                    }
+                    .main_top_left_top_con_list:nth-child(3) {
+                        background: #858FF8;
+                    }
+        .main_top_middle {
+            float: left;
+            width: 63%;
+            height: 100%;
+            margin-left: 1.2%;
+        }
+            .main_top_middle_top_title {
+                position: relative;
+                width: 100%;
+                text-align: center;
+                font-size: 1.7vw;
+                font-weight: bold;
+                color: #0EFCFF;
+            }
+                .main_top_middle_top_title .title_bg {
+                    position: absolute;
+                    left: 7%;
+                    top: -20%;
+                    width: 86%;
+                    height: 140%;
+                }
+                .title_web {
+                    position: absolute;
+                    right: -.8%;
+                    top: 0;
+                    padding: .5% 2%;
+                    font-size: .7vw;
+                    color: #0EFCFF;
+                    border: 1px solid #0EFCFF;
+                    -webkit-transform-origin-x: 0;
+                    transform: scale(0.9);
+                    -webkit-transform: scale(0.9);
+                }
+                .title_admin {
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    padding: .5% 2%;
+                    font-size: .7vw;
+                    color: #0EFCFF;
+                    border: 1px solid #0EFCFF;
+                    -webkit-transform-origin-x: 0;
+                    transform: scale(0.9);
+                    -webkit-transform: scale(0.9);
+                }
+            .main_top_middle_num_title {
+                float: left;
+                color: #0EFCFF;
+                font-size: 1.5vw;
+                margin-left: 13%;
+                line-height: 4.5vw;
+                width: 18%;
+                margin-top: .5vw;
+            }
+            .main_top_middle_num {
+                float: left;
+                width: 55%;
+                height: 23%;
+                margin: .7% auto;
+                margin-top: 1.5%;
+            }
+                .main_top_middle_num_list {
+                    position: relative;
+                    float: left;
+                    height: 100%;
+                    width: 12%;
+                    margin-left: 2.6%;
+                    font-size: 2vw;
+                    font-weight: bold;
+                    color: #0EFCFF;
+                    line-height: 240%;
+                }
+                    .main_top_middle_num_list p {
+                        text-align: center;
+                    }
+                .main_top_middle_num_list:nth-child(1) {
+                    margin-left: 0;
+                }
+                    .main_top_middle_num_list img {
+                        position: absolute;
+                        width: 100%;
+                        height: 100%;
+                    }
+            .main_top_middle_bottom {
+                float: left;
+                width: 100%;
+                height: 49.8%;
+                margin-top: .5%;
+            }
+                .main_top_middle_bottom_echarts {
+                    position: relative;
+                    float: left;
+                    width: 49%;
+                    height: 100%;
+                }
+                .main_top_middle_bottom_echarts_right {
+                    float: right;
+                }
+                    .main_top_middle_bottom_echarts img {
+                        position: absolute;
+                        width: 100%;
+                        height: 100%;
+                    }
+                    .main_top_echarts_con {
+                        width: 92%;
+                        height: 82%;
+                        margin: 2% auto;
+                        /* background: white; */
+                    }
+                        .main_top_echarts_con_title {
+                            font-size: .8vw;
+                            color: #0EFCFF;
+                        }
+                        .main_top_echarts_pie {
+                            width: 100%;
+                            height: 90%;
+                        }
+        .main_top_right {
+            float: right;
+        }
+                    .main_top_right .main_top_left_top_con_left {
+                        float: left;
+                        height: 48%;
+                        width: 49%;
+                        background: #37D2D4;
+
+                    }
+                    .main_top_right .main_top_left_top_con_right {
+                        float: right;
+                        height: 48%;
+                        width: 49%;
+                        background: #19CA88;
+                    }
+                    .main_top_right .main_top_left_top_con_list {
+                        float: left;
+                        height: 48%;
+                        width: 32%;
+                        margin-left: 2%;
+                        margin-top: 1.5%;
+                    }
+                    .main_top_right .main_top_left_top_con_list:nth-child(3) {
+                        background: #858FF8;
+                        margin-left: 0;
+                    }
+                    .main_top_right .main_top_left_top_con_list:nth-child(4) {
+                        background: #2E8CFF;
+                    }
+                    .main_top_right .main_top_left_top_con_list:nth-child(5) {
+                        background: #FD9133;
+                    }
+    .main_middle {
+        height: 8%;
+        width: 100%;
+    }
+        .main_middle_list {
+            position: relative;
+            float: left;
+            width: 15%;
+            height: 100%;
+            background: rgba(11,76,151,0.10);
+            margin-left: 1.875%;
+            box-shadow: 1px 2px 10px 1px rgba(14,252,255,0.53), inset 5px 4px 100px 1px rgba(14,252,255,0.34);
+        }
+        .main_middle_list img {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+        }
+        .main_middle_list:nth-child(1) {
+            margin-left: 0;
+        }
+            .main_list_title {
+                font-size: .75vw;
+                color: #0EFCFF;
+                text-indent: .8vw;
+                padding-top: .5vw;
+            }
+            .main_middle_list span {
+                display: inline-block;
+                width: 100%;
+                font-size: 1.4vw;
+                font-weight: bold;
+                color: white;
+                text-align: center;
+                letter-spacing: .2vw;
+                margin-top: -.5vw;
+            }
+    .main_bottom {
+        height: 55.9%;
+        width: 100%;
+    }
+        .main_bottom_top {
+            float: left;
+            width: 100%;
+            height: 46.5%;
+            margin-top: 1.5%;
+        }
+            .main_bottom_top_list {
+                position: relative;
+                float: left;
+                width: 32%;
+                height: 100%;
+                margin-left: 2%;
+            }
+            .main_bottom_top_list:nth-child(1) {
+                margin-left: 0;
+            }
+                .main_bottom_top_list img {
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                }
+                .main_bottom_t_l_title {
+                    z-index: 80;
+                    position: relative;
+                    width: 100%;
+                   /* padding-top: 2.0vw;*/
+                    font-size: .8vw;
+                    color: white;
+                    text-indent: 3.2vw;
+                    top:28px;
+                }
+                .main_bottom_t_l_chart {
+                    z-index: 77;
+                    position: relative;
+                    width: 95%;
+                    height: 84%;
+                    margin: auto;
+                    /*margin-top: -5%;*/
+                }
+                .main_bottom_t_l_con {
+                    z-index: 77;
+                    position: relative;
+                    width: 92%;
+                    height: 60%;
+                    margin: auto;
+                    /*margin-top: 1%;*/
+                    top:40px;
+                    /* overflow: hidden; */
+                }
+                    .main_bottom_t_l_main,.main_bottom_t_l_main2 {
+                        width: 100%;
+                        /* height: 100%; */
+                    }
+                        .main_bottom_t_l_main_list {
+                            font-size: .7vw;
+                            line-height: 1.6vw;
+                            height: 1.6vw;
+                            color: white;
+                        }
+                        .main_bottom_t_l_main2 .main_bottom_t_l_main_list {
+                            font-size: .7vw;
+                            line-height: 1.6vw;
+                            height: 1.6vw;
+                            color: white;
+                        }
+                         .main_bottom_t_list_title {
+                            float: left;
+                            width: 70%;
+                            height: 100%;
+                            white-space: nowrap;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                         }
+                         .main_bottom_t_list_time {
+                            float: left;
+                            width: 30%;
+                            height: 100%;
+                            white-space: nowrap;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            text-align: right;
+                         }
+        .main_bottom_bottom {
+            float: left;
+            width: 100%;
+            height: 52%;
+            margin-top: 1%;
+        }
+            .main_bottom_b_left,.main_bottom_b_right {
+                position: relative;
+                float: left;
+                width: 17.3%;
+                height: 100%;
+            }
+                .main_bottom_b_left img {
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                }
+            .main_bottom_b_middle1,.main_bottom_b_middle2 {
+                position: relative;
+                float: left;
+                width: 30%;
+                height: 100%;
+                margin-left: 1.8%;
+            }
+            .main_bottom_b_right {
+                margin-left: 1.8%;
+            }
+                .main_bottom_b_right img {
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                }
+                .main_bottom_b_middle1 img {
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                }
+                .main_bottom_b_middle2 img {
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                }
+                    .main_bottom_b_title {
+                        font-size: .8vw;
+                        text-align: center;
+                        color: #0EFCFF;
+                        padding-top: .3vw;
+                    }
+                    .main_bottom_b_con {
+                        width: 90%;
+                        height: 75%;
+                        margin: auto;
+                        margin-top: 8%;
+                    }
+                    .main_bottom_b_con2 {
+                        height: 70%;
+                    }
+/** 青岛研锦网络科技有限公司   版权所有 **/

src/main/resources/static/lib/dataV/css/reset.css

@@ -0,0 +1,396 @@
+html,
+body,
+div,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+input,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+textarea,
+article,
+aside,
+audio,
+canvas,
+figure,
+footer,
+header,
+mark,
+menu,
+nav,
+section,
+time,
+video {
+    margin : 0;
+    padding: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-size  : 100%;
+    font-weight: normal
+}
+
+article,
+aside,
+dialog,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+blockquote {
+    display: block;
+}
+
+ul,
+ol {
+    list-style: none;
+}
+
+img {
+    border        : 0 none;
+    vertical-align: top;
+}
+
+blockquote,
+q {
+    quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+    content: none;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing : 0;
+}
+
+strong,
+em,
+i {
+    font-style : normal;
+    font-weight: normal;
+}
+
+ins {
+    text-decoration: underline;
+}
+
+del {
+    text-decoration: line-through;
+}
+
+mark {
+    background: none;
+}
+
+input::-ms-clear {
+    display: none !important;
+}
+
+body {
+    font      : 12px/1.5 \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, "Hiragino Sans GB", STHeiti, "WenQuanYi Micro Hei", "Droid Sans Fallback", SimSun, sans-serif;
+    background: #fff;
+}
+
+a {
+    text-decoration: none;
+    color          : #333;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+body,
+html,
+.main {
+    width : 100%;
+    height: 100%;
+    font-size: 12px;
+}
+
+.main {
+    position       : relative;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-color: #1D2B56;
+}
+
+.nav {
+    position       : relative;
+    top            : .5vw;
+    width          : 100%;
+    height         : 5vw;
+    background     : url(../img/top.png) no-repeat;
+    background-size: 100%;
+    text-align     : center;
+    line-height    : 4vw;
+    color          : #0efcff;
+    font-size      : 1.4vw;
+    letter-spacing : .4vw;
+}
+
+.nav_btn {
+    position: absolute;
+    top     : 1.5vw;
+    width   : 100%;
+    height  : 2vw;
+}
+
+.btn_left {
+    float      : left;
+    width      : 25%;
+    margin-left: 5%;
+    height     : 100%;
+}
+
+.btn_right {
+    float       : right;
+    width       : 25%;
+    margin-right: 5%;
+    height      : 100%;
+}
+
+.btn_list {
+    position      : relative;
+    float         : left;
+    width         : 5.5vw;
+    height        : 1.6vw;
+    text-align    : center;
+    line-height   : 1.6vw;
+    font-size     : .9vw;
+    color         : #0efcff;
+    letter-spacing: .1vw;
+    cursor        : pointer;
+}
+
+.btn_left a,
+.btn_right a {
+    display: inline-block;
+}
+
+.btn_left a:nth-child(2) {
+    margin: 0 .6vw;
+}
+
+.btn_left a:nth-child(4) {
+    margin-left: .6vw;
+}
+
+.btn_right a:nth-child(2) {
+    margin: 0 .6vw;
+}
+
+.btn_right a:nth-child(4) {
+    margin-left: .6vw;
+}
+
+.btn_list:before {
+    content  : '';
+    position : absolute;
+    top      : 0;
+    right    : 0;
+    bottom   : 0;
+    left     : 0;
+    border   : 1px solid #6176AF;
+    transform: skewX(-38deg);
+}
+
+.btn_list:hover::before {
+    border-color: #0efcff;
+    box-shadow  : 1px 1px 3px 1px #0efcff inset;
+}
+
+.listActive:before {
+    border-color: #0efcff;
+    box-shadow  : 1px 1px 3px 1px #0efcff inset;
+}
+
+.content {
+    position     : relative;
+    width        : 97%;
+    height       : 87%;
+    margin       : auto;
+    /* background: white; */
+}
+
+.baseBox {
+    position     : relative;
+    float        : left;
+    width        : 48.8%;
+    height       : 32.3%;
+    border       : 1px solid #6176AF;
+    background   : rgba(11, 21, 44, 0.60);
+    border-radius: 5px;
+}
+
+.baseHeightBox {
+    height: 100%;
+}
+
+.baseCenterBox {
+    margin: 1.5% 0;
+}
+
+.leftBox {
+    float        : left;
+    height       : 100%;
+    width        : 34.5%;
+    /* background: yellow; */
+}
+
+.rightBox {
+    float : left;
+    height: 100%;
+    width : 34.5%;
+}
+
+.centerBox {
+    position     : relative;
+    float        : left;
+    width        : 30%;
+    height       : 100%;
+    margin       : 0 .5%;
+    /* background: red; */
+}
+
+.marginLeft {
+    margin-left: 1.5%;
+}
+
+/* 边框描边 */
+.leftTopLine1 {
+    position  : absolute;
+    top       : 0;
+    left      : -1px;
+    height    : 1vw;
+    width     : 2px;
+    background: #0efcff;
+}
+
+.leftTopLine2 {
+    position  : absolute;
+    top       : -1px;
+    left      : 0;
+    height    : 2px;
+    width     : 1vw;
+    background: #0efcff;
+}
+
+.rightTopLine1 {
+    position  : absolute;
+    top       : 0;
+    right     : -1px;
+    height    : 1vw;
+    width     : 2px;
+    background: #0efcff;
+}
+
+.rightTopLine2 {
+    position  : absolute;
+    top       : -1px;
+    right     : 0;
+    height    : 2px;
+    width     : 1vw;
+    background: #0efcff;
+}
+
+.leftBottomLine1 {
+    position  : absolute;
+    bottom    : 0;
+    left      : -1px;
+    height    : 1vw;
+    width     : 2px;
+    background: #0efcff;
+}
+
+.leftBottomLine2 {
+    position  : absolute;
+    bottom    : -1px;
+    left      : 0;
+    height    : 2px;
+    width     : 1vw;
+    background: #0efcff;
+}
+
+.rightBottomLine1 {
+    position  : absolute;
+    bottom    : 0;
+    right     : -1px;
+    height    : 1vw;
+    width     : 2px;
+    background: #0efcff;
+}
+
+.rightBottomLine2 {
+    position  : absolute;
+    bottom    : -1px;
+    right     : 0;
+    height    : 2px;
+    width     : 1vw;
+    background: #0efcff;
+}
+
+.boxTitle {
+    font-size  : 1vw;
+    color      : #0efcff;
+    width      : 80%;
+    margin-left: .8vw;
+    margin-top : .5vw;
+}
+
+.left {
+    float: left;
+}
+
+.right {
+    font: right;
+}
+/*// 本资源来源于云码资源淘宝店铺*/
+/*// 访问地址：https://shop188702750.taobao.com*/
+/*// 更多超优质资源欢迎访问*/
+
+/* 视频新加 */
+.video-js .vjs-control {
+    width: 1vw !important;
+}
+.vjs-volume-panel {
+    display: none !important;
+}
+.vjs-live-display {
+    display: none !important;
+}
+.vjs-audio-button{
+    display: none !important;
+}

src/main/resources/static/lib/dataV/js/app.js

@@ -0,0 +1,119 @@
+particlesJS('particles-js',
+  {
+    "particles": {
+      "number": {
+        "value": 10,
+        "density": {
+          "enable": true,
+          "value_area": 1200
+        }
+      },
+      "color": {
+        "value": "#ffffff"
+      },
+      "shape": {
+        "type": "circle",
+        "stroke": {
+          "width": 2,
+          "color": "#000000"
+        },
+        "polygon": {
+          "nb_sides": 5
+        },
+        "image": {
+          "src": "img/github.svg",
+          "width": 100,
+          "height": 100
+        }
+      },
+      "opacity": {
+        "value": .8,
+        "random": false,
+        "anim": {
+          "enable": false,
+          "speed": 1,
+          "opacity_min": 0.1,
+          "sync": false
+        }
+      },
+      "size": {
+        "value": 5,
+        "random": true,
+        "anim": {
+          "enable": false,
+          "speed": 40,
+          "size_min": 0.1,
+          "sync": false
+        }
+      },
+      "line_linked": {
+        "enable": true,
+        "distance": 150,
+        "color": "#ffffff",
+        "opacity": 0.4,
+        "width": 1
+      },
+      "move": {
+        "enable": true,
+        "speed": 6,
+        "direction": "none",
+        "random": false,
+        "straight": false,
+        "out_mode": "out",
+        "attract": {
+          "enable": false,
+          "rotateX": 600,
+          "rotateY": 1200
+        }
+      }
+    },
+    "interactivity": {
+      "detect_on": "canvas",
+      "events": {
+        "onhover": {
+          "enable": true,
+          "mode": "repulse"
+        },
+        "onclick": {
+          "enable": true,
+          "mode": "push"
+        },
+        "resize": true
+      },
+      "modes": {
+        "grab": {
+          "distance": 400,
+          "line_linked": {
+            "opacity": 1
+          }
+        },
+        "bubble": {
+          "distance": 400,
+          "size": 40,
+          "duration": 2,
+          "opacity": 8,
+          "speed": 3
+        },
+        "repulse": {
+          "distance": 200
+        },
+        "push": {
+          "particles_nb": 4
+        },
+        "remove": {
+          "particles_nb": 2
+        }
+      }
+    },
+    "retina_detect": true,
+    "config_demo": {
+      "hide_card": false,
+      "background_color": "#b61924",
+      "background_image": "",
+      "background_position": "50% 50%",
+      "background_repeat": "no-repeat",
+      "background_size": "cover"
+    }
+  }
+
+);