增加总览弹窗

dt2

@@ -0,0 +1 @@
+Subproject commit 99f0d08a3d0fe2802e68aaf46977c5c64ba7d1e5

node_modules/.yarn-integrity

@@ -0,0 +1,10 @@
+{
+  "systemParams": "win32-x64-93",
+  "modulesFolders": [],
+  "flags": [],
+  "linkedModules": [],
+  "topLevelPatterns": [],
+  "lockfileEntries": {},
+  "files": [],
+  "artifacts": {}
+}

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test31/test31.css

@@ -13,3 +13,59 @@
 .box31 ul li .desc {
   font-size: 0.3rem;
 }
+/* 总览弹窗样式 */
+.company-details {
+  position: absolute;
+  top: 30%;
+  left: 18%;
+  width: 900px;
+  height: 300px;
+  /* border: 1px solid #f60; */
+  color: #f4faf3;
+}
+/* 表头样式 */
+.thead-box {
+  width: 100%;
+  height: 50px;
+  background: #2f5d96;
+  font-size: 0.8rem !important;
+  font-style: italic;
+  border-spacing: 15px 30px;
+}
+.table-title-one {
+  width: 10%;
+}
+.table-title-two {
+  width: 15%;
+}
+.table-title-three {
+  width: 8%;
+}
+/* 表单主体部分样式 */
+.tbody-box {
+  width: 100%;
+  height: 40px;
+  border: 1px solid #0012ff;
+}
+.tbody-details {
+  text-align: center;
+}
+.tbody-box-three {
+  height: 80px;
+  text-align: center;
+}
+.tbody-box-three-text {
+  margin-top: 10px;
+}
+.tbody-box-three-num {
+  margin-top: 15px;
+}
+tbody tr:nth-child(odd) {
+  background: #21446f;
+}
+tbody tr:nth-child(even) {
+  background: #1a3455;
+}
+.close-x {
+  text-align: right;
+}

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test31/test31.html

@@ -1,63 +1,158 @@
-<div class="box31 box" data-name='test31'>
-    <div class="toolBox">
-        <span class="fit"></span>
-        <span class="close"></span>
+<div class="box31 box" data-name="test31">
+  <div class="toolBox">
+    <span class="fit"></span>
+    <span class="close"></span>
+  </div>
+  <div class="tool">
+    <div class="title bgTitle">
+      <h2>受攻击最严重业务系统</h2>
     </div>
-    <div class="tool">
-        <div class="title bgTitle">
-            <h2>受攻击最严重业务系统</h2>
-        </div>
+  </div>
+  <div class="test-box">
+    <div class="content">
+      <!-- 态势总览 -->
+      <ul>
+        <li>
+          <img src="../images/networkSecurity/dwzs.png" alt="" />
+          <div class="desc">
+            <div>单位总数</div>
+            <div>35</div>
+          </div>
+        </li>
+        <li>
+          <img src="../images/networkSecurity/yjsb.png" alt="" />
+          <div class="desc">
+            <div>单位总数</div>
+            <div>35</div>
+          </div>
+        </li>
+        <li>
+          <img src="../images/networkSecurity/xtzs.png" alt="" />
+          <div class="desc">
+            <div>单位总数</div>
+            <div>35</div>
+          </div>
+        </li>
+      </ul>
     </div>
-    <div class="test-box">
-        <div class="content">
-            <!-- 态势总览 -->
-            <ul>
-                <li>
-                    <img src="../images/networkSecurity/dwzs.png" alt="">
-                    <div class="desc">
-                        <div>单位总数</div>
-                        <div>35</div>
-                    </div>
-                </li>
-                <li>
-                    <img src="../images/networkSecurity/yjsb.png" alt="">
-                    <div class="desc">
-                        <div>单位总数</div>
-                        <div>35</div>
-                    </div>
-                </li>
-                <li>
-                    <img src="../images/networkSecurity/xtzs.png" alt="">
-                    <div class="desc">
-                        <div>单位总数</div>
-                        <div>35</div>
-                    </div>
-                </li>
-            </ul>
-        </div>
-    </div>
-    <div class="panel-footer"></div>
-
+  </div>
+  <div class="panel-footer"></div>
 </div>
 
-
 <!-- 工具弹框 -->
-<div class="tools" style="display: none;">
-
-    <div class="containerTool test31Toll">
-        <ul>
-            <li>
-                <span>宽度：</span>
-                <input class="setWidth" type="text">
-                <span id="validateAge" class="regValidate"></span>
-            </li>
-            <li>
-                <span>高度：</span>
-                <input class="setHeight" type="text">
-            </li>
-        </ul>
-        <!-- 确定 -->
-        <button class="fixBtn toolBtn">确定</button>
-        <button class="offBtn toolBtn">取消</button>
-    </div>
-</div>
+<div class="tools" style="display: none">
+  <div class="containerTool test31Toll">
+    <ul>
+      <li>
+        <span>宽度：</span>
+        <input class="setWidth" type="text" />
+        <span id="validateAge" class="regValidate"></span>
+      </li>
+      <li>
+        <span>高度：</span>
+        <input class="setHeight" type="text" />
+      </li>
+    </ul>
+    <!-- 确定 -->
+    <button class="fixBtn toolBtn">确定</button>
+    <button class="offBtn toolBtn">取消</button>
+  </div>
+</div>
+<!-- 点击总览弹窗 -->
+<div class="company-details">
+  <div class="close-x">X</div>
+  <!-- 弹窗表格 -->
+  <table>
+    <!-- 表头部分 -->
+    <thead class="thead-box">
+      <tr>
+        <th class="table-title-one">序号</th>
+        <th class="table-title-two">单位名称</th>
+        <th class="table-title-two">系统名称</th>
+        <th class="table-title-three">高风险</th>
+        <th class="table-title-three">中风险</th>
+        <th class="table-title-three">低风险</th>
+        <th class="table-title-three">合计</th>
+        <th class="table-title-one">备注</th>
+      </tr>
+    </thead>
+    <!-- 表单主体部分 -->
+    <tbody>
+      <tr class="tbody-box">
+        <td class="tbody-details">1</td>
+        <td class="tbody-details">市政市管理执法支队</td>
+        <td class="tbody-details">无</td>
+        <td class="tbody-details">-</td>
+        <td class="tbody-details">-</td>
+        <td class="tbody-details">5</td>
+        <td class="tbody-details">5</td>
+        <td class="tbody-details"></td>
+      </tr>
+      <tr class="tbody-box">
+        <td class="tbody-details">2</td>
+        <td class="tbody-details">市设施运行中心</td>
+        <td class="tbody-details">市设施运行中心门户系统</td>
+        <td class="tbody-details">0</td>
+        <td class="tbody-details">0</td>
+        <td class="tbody-details">24</td>
+        <td class="tbody-details">24</td>
+        <td class="tbody-details"></td>
+      </tr>
+      <tr class="tbody-box-three">
+        <td class="tbody-details">3</td>
+        <td class="tbody-details">市环卫中心</td>
+        <td class="tbody-details">
+          市环卫中心门户网站系统
+          <div class="tbody-box-three-text">垃圾转运处置计量称重管理系统</div>
+        </td>
+        <td class="tbody-details">
+          0
+          <div class="tbody-box-three-num">0</div>
+        </td>
+        <td class="tbody-details">
+          0
+          <div class="tbody-box-three-num">0</div>
+        </td>
+        <td class="tbody-details">
+          3
+          <div class="tbody-box-three-num">3</div>
+        </td>
+        <td class="tbody-details">
+          3
+          <div class="tbody-box-three-num">3</div>
+        </td>
+        <td class="tbody-details"></td>
+      </tr>
+      <tr class="tbody-box">
+        <td class="tbody-details">4</td>
+        <td class="tbody-details">市照明中心</td>
+        <td class="tbody-details">市照明中心门户网站系统</td>
+        <td class="tbody-details">-</td>
+        <td class="tbody-details">-</td>
+        <td class="tbody-details">5</td>
+        <td class="tbody-details">5</td>
+        <td class="tbody-details">备案未更新 无法正常访问</td>
+      </tr>
+      <tr class="tbody-box">
+        <td class="tbody-details">5</td>
+        <td class="tbody-details">市供水中心</td>
+        <td class="tbody-details">无</td>
+        <td class="tbody-details">-</td>
+        <td class="tbody-details">-</td>
+        <td class="tbody-details">5</td>
+        <td class="tbody-details">5</td>
+        <td class="tbody-details">无业务系统</td>
+      </tr>
+      <tr class="tbody-box">
+        <td class="tbody-details">6</td>
+        <td class="tbody-details">市停车管理中心</td>
+        <td class="tbody-details">无</td>
+        <td class="tbody-details">-</td>
+        <td class="tbody-details">-</td>
+        <td class="tbody-details">5</td>
+        <td class="tbody-details">5</td>
+        <td class="tbody-details">无业务系统</td>
+      </tr>
+    </tbody>
+  </table>
+</div>

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test31/test31.js

@@ -1,25 +1,22 @@
-const test31 = (function() {
-    function test31(id, domTitle) {
-        if (domTitle) {
-            $('.test31 .title h2').text(domTitle)
-        }
-        $('.test31 .box').css('z-index', ++zIndex)
-        $('.test31 .box').attr('data-id', id)
-        move3('.test31 .test-box')
-        move2('.test31 .containerTool')
-
-
-
-        $('.test31 .close').click(function() {
-            $('.test31 .box').remove();
-            $('.test31 .containerTool').css('display', 'none');
-            $('.test31 .setWidth').val('')
-            $('.test31 .setHeight').val('')
-            moduleIdRemove.push(id)
-        })
-
-        eventClick('.test31');
+const test31 = (function () {
+  function test31(id, domTitle) {
+    if (domTitle) {
+      $(".test31 .title h2").text(domTitle);
     }
+    $(".test31 .box").css("z-index", ++zIndex);
+    $(".test31 .box").attr("data-id", id);
+    move3(".test31 .test-box");
+    move2(".test31 .containerTool");
+
+    $(".test31 .close").click(function () {
+      $(".test31 .box").remove();
+      $(".test31 .containerTool").css("display", "none");
+      $(".test31 .setWidth").val("");
+      $(".test31 .setHeight").val("");
+      moduleIdRemove.push(id);
+    });
 
-    return test31
-})();
+    eventClick(".test31");
+  }
+  return test31;
+})();

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test31/test31.less

@@ -18,4 +18,4 @@
       }
     }
   }
-}
+}

spring-cloud/server-page/src/main/resources/static/testEcharts/test/main/css/main.css

@@ -4,9 +4,12 @@ html {
   overflow: hidden;
 }
 @font-face {
-  font-family: 'iconfont';
-  src: url('iconfont/iconfont.eot');
-  src: url('iconfont/iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont/iconfont.woff') format('woff'), url('iconfont/iconfont.ttf') format('truetype'), url('iconfont/iconfont.svg#iconfont') format('svg');
+  font-family: "iconfont";
+  src: url("iconfont/iconfont.eot");
+  src: url("iconfont/iconfont.eot?#iefix") format("embedded-opentype"),
+    url("iconfont/iconfont.woff") format("woff"),
+    url("iconfont/iconfont.ttf") format("truetype"),
+    url("iconfont/iconfont.svg#iconfont") format("svg");
 }
 .iconfont {
   font-family: "iconfont" !important;

spring-cloud/server-page/src/main/resources/static/testEcharts/test/main/js/main.js

@@ -5,24 +5,26 @@ import domClick from "./domClick.js"; // 模块菜单信息的添加监听
 import { manyValues } from "./util.js";
 
 //左侧菜单点击
-$('.left li').click(function() {
-    tab($(this).index()); //把点击元素对应的索引传进去
+$(".left li").click(function () {
+  tab($(this).index()); //把点击元素对应的索引传进去
 });
 
 //选项卡
 function tab(n) {
-    $('.left li').eq(n).addClass('itemActive').siblings().removeClass('itemActive');
-    $('.center > div').eq(n).addClass('active').siblings().removeClass('active');
+  $(".left li")
+    .eq(n)
+    .addClass("itemActive")
+    .siblings()
+    .removeClass("itemActive");
+  $(".center > div").eq(n).addClass("active").siblings().removeClass("active");
 }
 
 // 可移动组件（非）
-move2('.showMenu');
+move2(".showMenu");
 
+move(".addThemeBox");
 
-
-move('.addThemeBox');
-
-move('.themeOpt');
+move(".themeOpt");
 
 // 获取所有主题
 allTheme();
@@ -32,8 +34,6 @@ allTheme();
 // 模块菜单信息的添加监听
 // 保存接口
 
-
-
 const url = window.location.search;
 const problem = manyValues(url); // 获取url后面的参数
 
@@ -41,108 +41,105 @@ const problem = manyValues(url); // 获取url后面的参数
 // 通过主题id渲染页面
 setTheme(problem.id);
 
-
 domClick(problem.id);
 
 // 各个模块 && 渲染模块菜单信息的table表格
 modus();
 
 // 按下
-document.onkeydown = function(e) {
-    if (78 == e.keyCode && e.altKey) {
-        if (url.indexOf('type=-1') === -1) { // 没找到
-            window.location.href += '&type=-1'
-        } else {
-            window.location.href = url.split('&')[0]
-        }
+document.onkeydown = function (e) {
+  if (78 == e.keyCode && e.altKey) {
+    if (url.indexOf("type=-1") === -1) {
+      // 没找到
+      window.location.href += "&type=-1";
+    } else {
+      window.location.href = url.split("&")[0];
     }
-}
+  }
+};
 
 // 后台预览，隐藏页面头部菜单
-if (problem.type === '-1') {
-    setTimeout(() => {
-        $('.header').css('opacity', '0');
-        $('.toolBox').css('opacity', '0');
-        $('.box').css('resize', 'none')
-        $('.box').attr('draggable', false)
-        for (const box of $('.box')) {
-            box.ondragend = null;
-        }
-    }, 100);
+if (problem.type === "-1") {
+  setTimeout(() => {
+    $(".header").css("opacity", "0");
+    $(".toolBox").css("opacity", "0");
+    $(".box").css("resize", "none");
+    $(".box").attr("draggable", false);
+    for (const box of $(".box")) {
+      box.ondragend = null;
+    }
+  }, 100);
 }
 
-
-
 //拖拽上传
-layui.use(['layer', 'jquery', 'form', 'upload'], function() {
-    layer = layui.layer;
-    $ = layui.jquery;
-    var upload = layui.upload;
-    upload.render({
-        elem: '#uploadFile',
-        url: basicUrl + '/upload/themeImgUpload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
-            ,
-        accept: 'image',
-        acceptMime: 'image/*',
-        ext: 'jpg|png|gif|bmp|jpeg',
-        data: { prefix: 'themeInfo' },
-        done: function(res) {
-            $("#backgroundPath").val(res.data.filePath)
-            layer.msg('上传成功');
-            layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', basicUrl + res.data.filePath);
-            themeSubmit.themeName = $('#name').val();
-            themeSubmit.backgroundPath = res.data.filePath;
-        }
-    });
-})
-
-
-
-$('.detail-container').carousel({
-    // 宽
-    // width: '100%',
-    // 高
-    height: 300,
-    // 图片内容
-    content: $('.detail-container .item'),
-    // 是否自动播放
-    isPlay: false,
-    // 是否显示圆点
-    navShow: true,
-    // 圆点位置
-    navPosition: 'center',
-    // 圆点大小
-    navSize: '0.2rem',
-    // 圆点激活状态时的颜色
-    navActiveColor: 'rgb(62 206 225)',
-    // 圆点未激活状态时的颜色
-    navColor: 'rgb(31 209 197 / 50%)',
-    // 翻页显示方式
-    changeBtn: 'hover', //hover（移入显示） hide（不显示） always（一直显示）
-    // 播放时间
-    duration: 3000,
-    // 轮播方式
-    type: 'animate', //fade animate
+layui.use(["layer", "jquery", "form", "upload"], function () {
+  layer = layui.layer;
+  $ = layui.jquery;
+  var upload = layui.upload;
+  upload.render({
+    elem: "#uploadFile",
+    url: basicUrl + "/upload/themeImgUpload", //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
+    accept: "image",
+    acceptMime: "image/*",
+    ext: "jpg|png|gif|bmp|jpeg",
+    data: { prefix: "themeInfo" },
+    done: function (res) {
+      $("#backgroundPath").val(res.data.filePath);
+      layer.msg("上传成功");
+      layui
+        .$("#uploadDemoView")
+        .removeClass("layui-hide")
+        .find("img")
+        .attr("src", basicUrl + res.data.filePath);
+      themeSubmit.themeName = $("#name").val();
+      themeSubmit.backgroundPath = res.data.filePath;
+    },
+  });
 });
 
-
+$(".detail-container").carousel({
+  // 宽
+  // width: '100%',
+  // 高
+  height: 300,
+  // 图片内容
+  content: $(".detail-container .item"),
+  // 是否自动播放
+  isPlay: false,
+  // 是否显示圆点
+  navShow: true,
+  // 圆点位置
+  navPosition: "center",
+  // 圆点大小
+  navSize: "0.2rem",
+  // 圆点激活状态时的颜色
+  navActiveColor: "rgb(62 206 225)",
+  // 圆点未激活状态时的颜色
+  navColor: "rgb(31 209 197 / 50%)",
+  // 翻页显示方式
+  changeBtn: "hover", //hover（移入显示） hide（不显示） always（一直显示）
+  // 播放时间
+  duration: 3000,
+  // 轮播方式
+  type: "animate", //fade animate
+});
 
 function select() {
-    $(document).click(function() {
-        $(".select_module_con ul").slideUp();
-    })
-    var module = $(".select_result");
-    module.click(function(e) {
-        e.stopPropagation();
-        var ul = $(this).next();
-        ul.stop().slideToggle();
-        ul.children().click(function(e) {
-            e.stopPropagation();
-            $(this).parent().prev().children("span").text($(this).text());
-            ul.stop().slideUp();
-        })
-    })
+  $(document).click(function () {
+    $(".select_module_con ul").slideUp();
+  });
+  var module = $(".select_result");
+  module.click(function (e) {
+    e.stopPropagation();
+    var ul = $(this).next();
+    ul.stop().slideToggle();
+    ul.children().click(function (e) {
+      e.stopPropagation();
+      $(this).parent().prev().children("span").text($(this).text());
+      ul.stop().slideUp();
+    });
+  });
 }
-$(function() {
-    select();
-})
+$(function () {
+  select();
+});

spring-cloud/server-page/src/main/resources/static/testEcharts/test/main/main.html

@@ -1,307 +1,326 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>主题</title>
-    <link rel="stylesheet" href="../css/reset.css">
-
+    <link rel="stylesheet" href="../css/reset.css" />
 
-    <link rel="stylesheet" href="../iconfont/iconfont.css">
+    <link rel="stylesheet" href="../iconfont/iconfont.css" />
 
     <!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_3220227_au0b065szuu.css"> -->
-    <link rel="stylesheet" href="../css/layui.css">
+    <link rel="stylesheet" href="../css/layui.css" />
     <!-- <link rel="stylesheet" href="https://layui.11dz.cn/layui-v2.6.8/layui/css/layui.css"> -->
 
-    <link rel="stylesheet" href="../css/layui.css">
-
-
-    <link rel="stylesheet" href="../css/coom.css">
-    <link rel="stylesheet" href="../index.css">
-    <link rel="stylesheet" href="../css/carousel.css">
-
-
+    <link rel="stylesheet" href="../css/layui.css" />
 
+    <link rel="stylesheet" href="../css/coom.css" />
+    <link rel="stylesheet" href="../index.css" />
+    <link rel="stylesheet" href="../css/carousel.css" />
 
-    <link rel="stylesheet" href="./css/main.css">
+    <link rel="stylesheet" href="./css/main.css" />
 
     <script>
-        (function() {
-            function setFont() {
-                var html = document.documentElement; // 根元素
-                var designWidth = 3840; // 设计稿宽度
-                // html.clientWidth 视口宽度
-                html.style.fontSize = (html.clientWidth / designWidth) * 100 + "px"; // 设置字体大小
-            }
-
-            setFont();
-            // 设备尺寸变化时，重新设置根元素字体大小
-            window.onresize = setFont;
-        })();
-    </script>
+      (function () {
+        function setFont() {
+          var html = document.documentElement; // 根元素
+          var designWidth = 3840; // 设计稿宽度
+          // html.clientWidth 视口宽度
+          html.style.fontSize = (html.clientWidth / designWidth) * 100 + "px"; // 设置字体大小
+        }
 
-</head>
+        setFont();
+        // 设备尺寸变化时，重新设置根元素字体大小
+        window.onresize = setFont;
+      })();
+    </script>
+  </head>
 
-<body>
+  <body>
     <!--  // 新增主题 组件库  保存 主题 清空组 -->
-    <div class="wrapper" style="background: url(../images/networkSecurity/xkbg.png) 0% 0% / cover;">
-        <div class="heaTit">
-            <h1 data-name="dfdf"></h1>
-        </div>
-        <header class="header">
-            <nav class="menuBox">
-                <ul>
-                    <!-- 新增主题 -->
-                    <li class="itemActive btnSun addTheme">
-                        <span class="btnSun menuBtn iconfont icon-caidan"></span>
-                        <span class="txt">新增主题</span>
-                    </li>
-
-                    <!-- 组件库 -->
-                    <li class="menuTool itemActive btnSun">
-                        <span class="btnSun menuBtn iconfont icon-caidan"></span>
-                        <span class="txt">组件库</span>
-                    </li>
-
-                    <!-- 保存 -->
-                    <li class="hold"><span class="btnSun iconfont icon-baocun1"></span>
-                        <span class="txt">保存</span>
-                    </li>
-
-                    <!-- 主题 -->
-                    <li class="themeBox"><span class="btnSun iconfont icon-kejichengguo"></span>
-                        <span class="txt">主题</span>
-                    </li>
-
-                    <!-- 清空 -->
-                    <!-- <li class="cancel"><span class="btnSun iconfont icon-qingkonghuancun"></span>
+    <div
+      class="wrapper"
+      style="background: url(../images/networkSecurity/xkbg.png) 0% 0% / cover"
+    >
+      <div class="heaTit">
+        <h1 data-name="dfdf"></h1>
+      </div>
+      <header class="header">
+        <nav class="menuBox">
+          <ul>
+            <!-- 新增主题 -->
+            <li class="itemActive btnSun addTheme">
+              <span class="btnSun menuBtn iconfont icon-caidan"></span>
+              <span class="txt">新增主题</span>
+            </li>
+
+            <!-- 组件库 -->
+            <li class="menuTool itemActive btnSun">
+              <span class="btnSun menuBtn iconfont icon-caidan"></span>
+              <span class="txt">组件库</span>
+            </li>
+
+            <!-- 保存 -->
+            <li class="hold">
+              <span class="btnSun iconfont icon-baocun1"></span>
+              <span class="txt">保存</span>
+            </li>
+
+            <!-- 主题 -->
+            <li class="themeBox">
+              <span class="btnSun iconfont icon-kejichengguo"></span>
+              <span class="txt">主题</span>
+            </li>
+
+            <!-- 清空 -->
+            <!-- <li class="cancel"><span class="btnSun iconfont icon-qingkonghuancun"></span>
                         <span class="txt">清空</span>
                     </li> -->
-
-                </ul>
-            </nav>
-        </header>
-        <section class="contentBox" id="contentBox">
-            <!-- <ul class="tab">
+          </ul>
+        </nav>
+      </header>
+      <section class="contentBox" id="contentBox">
+        <!-- <ul class="tab">
                 <li class="tab-item active" data-id='12'>局机关</li>
                 <li class="tab-item" data-id='11'>华为云</li>
                 <li class="tab-item" data-id='7'>浪潮云</li>
             </ul> -->
-            <div class="center">
-                <!-- 主题显示区域 -->
-                <div class="centerBox">
-                    <div class="theme">
-                    </div>
-                </div>
-            </div>
-        </section>
+        <div class="center">
+          <!-- 主题显示区域 -->
+          <div class="centerBox">
+            <div class="theme"></div>
+          </div>
+        </div>
+      </section>
     </div>
 
+    <div class="springFrame" style="opacity: 0">
+      <iframe src="main2.html" frameborder="0"></iframe>
 
-    <div class="springFrame" style="opacity: 0;">
-        <iframe src="main2.html" frameborder="0"></iframe>
-
-        <div class="frameClose">X</div>
+      <div class="frameClose">X</div>
     </div>
 
-
     <!-- 新增主题区域 -->
-    <div class="addThemeBox" draggable="true" style="display: none;">
-        <form id="addForm">
-            <div>
-                <label for="name">主题名</label>
-                <input autocomplete="off" type="text" id="name" name="name" placeholder="请输入组件名">
-                <span id="validateName" class="regValidate"></span>
-            </div>
+    <div class="addThemeBox" draggable="true" style="display: none">
+      <form id="addForm">
+        <div>
+          <label for="name">主题名</label>
+          <input
+            autocomplete="off"
+            type="text"
+            id="name"
+            name="name"
+            placeholder="请输入组件名"
+          />
+          <span id="validateName" class="regValidate"></span>
+        </div>
 
-            <div>
-                <label for="name">宽</label>
-                <input autocomplete="off" type="text" id="themeW" name="themeW" placeholder="请输入主题宽度">
-                <span id="validateW" class="regValidate"></span>
-            </div>
+        <div>
+          <label for="name">宽</label>
+          <input
+            autocomplete="off"
+            type="text"
+            id="themeW"
+            name="themeW"
+            placeholder="请输入主题宽度"
+          />
+          <span id="validateW" class="regValidate"></span>
+        </div>
 
-            <div>
-                <label for="name">高</label>
-                <input autocomplete="off" type="text" id="themeH" name="themeH" placeholder="请输入主题高度">
-                <span id="validateH" class="regValidate"></span>
-            </div>
+        <div>
+          <label for="name">高</label>
+          <input
+            autocomplete="off"
+            type="text"
+            id="themeH"
+            name="themeH"
+            placeholder="请输入主题高度"
+          />
+          <span id="validateH" class="regValidate"></span>
+        </div>
 
-            <div class="layui-form-item">
-                <label class="layui-form-label">主题背景</label>
-                <div class="layui-input-inline">
-                    <div class="layui-row">
-                        <div style="width: 4rem;height: 2.5rem;" class="layui-upload-drag layui-col-xs6" id="uploadFile">
-                            <i class="layui-icon"></i>
-                            <p>点击上传，或将图片拖拽到此处</p>
-                        </div>
-                        <div style="margin-left: 4px;width: 4rem;height: 2.5rem;" class="layui-hide layui-col-xs6" id="uploadDemoView">
-                            <img style="max-width: 4rem;max-height: 2.5rem;" src="" alt="上传成功后渲染" style="max-width: 5rem">
-                        </div>
-                    </div>
-                </div>
+        <div class="layui-form-item">
+          <label class="layui-form-label">主题背景</label>
+          <div class="layui-input-inline">
+            <div class="layui-row">
+              <div
+                style="width: 4rem; height: 2.5rem"
+                class="layui-upload-drag layui-col-xs6"
+                id="uploadFile"
+              >
+                <i class="layui-icon"></i>
+                <p>点击上传，或将图片拖拽到此处</p>
+              </div>
+              <div
+                style="margin-left: 4px; width: 4rem; height: 2.5rem"
+                class="layui-hide layui-col-xs6"
+                id="uploadDemoView"
+              >
+                <img
+                  style="max-width: 4rem; max-height: 2.5rem"
+                  src=""
+                  alt="上传成功后渲染"
+                  style="max-width: 5rem"
+                />
+              </div>
             </div>
+          </div>
+        </div>
 
-            <div class="addThemeBox_btns">
-                <button class="submitBtn btnBg1" type="button">提交</button>
-                <button class="returnBtn btnBg2" type="button">返回</button>
-            </div>
-        </form>
+        <div class="addThemeBox_btns">
+          <button class="submitBtn btnBg1" type="button">提交</button>
+          <button class="returnBtn btnBg2" type="button">返回</button>
+        </div>
+      </form>
     </div>
 
     <!-- 菜单显示区域 -->
     <div class="menu">
-        <div class="showMenu" style="display: none;">
-            <div class="menuClose"></div>
-            <ul class="nav showMenuBox">
-            </ul>
-        </div>
+      <div class="showMenu" style="display: none">
+        <div class="menuClose"></div>
+        <ul class="nav showMenuBox"></ul>
+      </div>
     </div>
 
     <!-- 主题选择区域 -->
-    <div class="themeOpt" draggable="true" style="display: none;">
-        <header class="themeTit">请选择主题</header>
-        <ul class="subject" draggable="true">
-        </ul>
+    <div class="themeOpt" draggable="true" style="display: none">
+      <header class="themeTit">请选择主题</header>
+      <ul class="subject" draggable="true"></ul>
     </div>
 
-
     <!-- 保存成功弹框 -->
     <div class="holdToos">
-        <span class="succ">保 存 成 功</span>
-        <!-- <span class="lose">保 存 失 败</span> -->
+      <span class="succ">保 存 成 功</span>
+      <!-- <span class="lose">保 存 失 败</span> -->
     </div>
 
-    <div class="holdToosLose" style="display: none;">
-        <span class="lose" style="display: block;">保 存 失 败</span>
+    <div class="holdToosLose" style="display: none">
+      <span class="lose" style="display: block">保 存 失 败</span>
     </div>
 
     <!-- 保存成功弹框 -->
     <div class="addThemeToos">
-        <span class="succ">添加成功</span>
-        <!-- <span class="lose">添加失败</span> -->
+      <span class="succ">添加成功</span>
+      <!-- <span class="lose">添加失败</span> -->
     </div>
 
     <!-- 确认清空弹框 -->
     <div class="cancelToos">
-        <p>确认清空吗？</p>
-        <div class="btns">
-            <button class="succBtn">确认</button>
-            <button class="loseBtn">取消</button>
-        </div>
+      <p>确认清空吗？</p>
+      <div class="btns">
+        <button class="succBtn">确认</button>
+        <button class="loseBtn">取消</button>
+      </div>
     </div>
 
     <!-- 详情弹框 -->
-    <div class="detailsToos" style="display: none;">
-        <div class="leftNav">
-            <!-- <section value='a'>
+    <div class="detailsToos" style="display: none">
+      <div class="leftNav">
+        <!-- <section value='a'>
                 <option value="a">网络设备1</option>
                 <option value="b">网络设备2</option>
                 <option value="c">网络设备3</option>
             </section> -->
 
-            <div class="select_module_con">
-                <div class="select_result">
-                    <span>选择节目</span>
-                    <div class="triangle"></div>
-                </div>
-                <ul>
-                    <li>节目1</li>
-                    <li>节目2</li>
-                    <li>节目3</li>
-                </ul>
-            </div>
+        <div class="select_module_con">
+          <div class="select_result">
+            <span>选择节目</span>
+            <div class="triangle"></div>
+          </div>
+          <ul>
+            <li>节目1</li>
+            <li>节目2</li>
+            <li>节目3</li>
+          </ul>
+        </div>
 
-            <div class="detail-container">
-                <div class="item">
-                    <div class="detail-title">资源名称</div>
-                    <div class="active">运维系统服务器</div>
-                    <div>通信-服务器</div>
-                </div>
-                <div class="item">
-                    <div class="detail-title">资源名称</div>
-                    <div class="active">运维系统服务器</div>
-                    <div>通信-服务器</div>
-                </div>
-                <div class="item">
-                    <div class="detail-title">资源名称</div>
-                    <div class="active">运维系统服务器</div>
-                    <div>通信-服务器</div>
-                </div>
-            </div>
+        <div class="detail-container">
+          <div class="item">
+            <div class="detail-title">资源名称</div>
+            <div class="active">运维系统服务器</div>
+            <div>通信-服务器</div>
+          </div>
+          <div class="item">
+            <div class="detail-title">资源名称</div>
+            <div class="active">运维系统服务器</div>
+            <div>通信-服务器</div>
+          </div>
+          <div class="item">
+            <div class="detail-title">资源名称</div>
+            <div class="active">运维系统服务器</div>
+            <div>通信-服务器</div>
+          </div>
         </div>
-        <div class="rightInfo">
-            <div class="info-item">
-                <div class="tool">
-                    <div class="title bgTitle">
-                        <h2>业务系统</h2>
-                    </div>
-                </div>
-                <ul>
-                    <li>
-                        <span>资源名称</span>
-                        <span>运维系统服务器</span>
-                    </li>
-                    <li>
-                        <span>资源名称</span>
-                        <span>运维系统服务器</span>
-                    </li>
-                    <li>
-                        <span>资源名称</span>
-                        <span>运维系统服务器</span>
-                    </li>
-                    <li>
-                        <span>资源名称</span>
-                        <span>运维系统服务器</span>
-                    </li>
-                    <li>
-                        <span>资源名称</span>
-                        <span>运维系统服务器</span>
-                    </li>
-                </ul>
+      </div>
+      <div class="rightInfo">
+        <div class="info-item">
+          <div class="tool">
+            <div class="title bgTitle">
+              <h2>业务系统</h2>
             </div>
+          </div>
+          <ul>
+            <li>
+              <span>资源名称</span>
+              <span>运维系统服务器</span>
+            </li>
+            <li>
+              <span>资源名称</span>
+              <span>运维系统服务器</span>
+            </li>
+            <li>
+              <span>资源名称</span>
+              <span>运维系统服务器</span>
+            </li>
+            <li>
+              <span>资源名称</span>
+              <span>运维系统服务器</span>
+            </li>
+            <li>
+              <span>资源名称</span>
+              <span>运维系统服务器</span>
+            </li>
+          </ul>
+        </div>
 
-            <div class="bottom-info">
-                <div class="tool">
-                    <div class="title bgTitle">
-                        <h2>业务系统</h2>
-                    </div>
-                </div>
-                <div class="charts-box">
-                    <div class="charts-item">
-                        <div class="title">
-                            <span>健康状态</span>
-                        </div>
-                        <div class="foolr charts1"></div>
-                    </div>
-                    <div class="charts-item">
-                        <div class="title">
-                            <span>CPU使用率</span>
-                        </div>
-                        <div class="foolr charts2"></div>
-                    </div>
-                    <div class="charts-item">
-                        <div class="title">
-                            <span>内存使用率</span>
-                        </div>
-                        <div class="foolr charts3"></div>
-                    </div>
-                </div>
+        <div class="bottom-info">
+          <div class="tool">
+            <div class="title bgTitle">
+              <h2>业务系统</h2>
             </div>
-
+          </div>
+          <div class="charts-box">
+            <div class="charts-item">
+              <div class="title">
+                <span>健康状态</span>
+              </div>
+              <div class="foolr charts1"></div>
+            </div>
+            <div class="charts-item">
+              <div class="title">
+                <span>CPU使用率</span>
+              </div>
+              <div class="foolr charts2"></div>
+            </div>
+            <div class="charts-item">
+              <div class="title">
+                <span>内存使用率</span>
+              </div>
+              <div class="foolr charts3"></div>
+            </div>
+          </div>
         </div>
-        <div class="detailClose">X</div>
+      </div>
+      <div class="detailClose">X</div>
     </div>
 
     <script src="../components/test8/graphData.js"></script>
 
-
     <script src="../js/jquery-3.4.1.js"></script>
     <script src="../js/carousel.js"></script>
     <script src="../js/layui.js"></script>
 
-
     <script src="../js/echarts.min.js"></script>
     <script src="../js/china.js"></script>
     <script src="../js/bmap.min.js"></script>
@@ -310,15 +329,17 @@
     <script src="../js/common.js"></script>
 
     <script>
-        for (let i = 1; i <= 50; i++) {
-            const link = $(`<link rel="stylesheet" href="../components/test${i}/test${i}.css">`);
-            const div = $(`<div class="test${i}"></div>`)
-            const script = document.createElement('script');
-            script.src = `../components/test${i}/test${i}.js`
-            $('head').append(link);
-            $('.theme').append(div);
-            $('body').append(script);
-        }
+      for (let i = 1; i <= 50; i++) {
+        const link = $(
+          `<link rel="stylesheet" href="../components/test${i}/test${i}.css">`
+        );
+        const div = $(`<div class="test${i}"></div>`);
+        const script = document.createElement("script");
+        script.src = `../components/test${i}/test${i}.js`;
+        $("head").append(link);
+        $(".theme").append(div);
+        $("body").append(script);
+      }
     </script>
 
     <script src="./js/common.js"></script>
@@ -328,10 +349,5 @@
     <script src="./js/main.js" type="module"></script>
 
     <script src="./js/netWorkDevOps.js"></script>
-
-
-
-</body>
-
-
-</html>
+  </body>
+</html>

yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+