fix:修改版面样式

device-manager-ui/admin/src/assets/fonts/demo.css

+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

device-manager-ui/admin/src/assets/fonts/demo_index.html

+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3597207" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe627;</span>
+                <div class="name">系统管理-部门管理</div>
+                <div class="code-name">&amp;#xe627;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe751;</span>
+                <div class="name">首页</div>
+                <div class="code-name">&amp;#xe751;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe64b;</span>
+                <div class="name">设置</div>
+                <div class="code-name">&amp;#xe64b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60d;</span>
+                <div class="name">消息</div>
+                <div class="code-name">&amp;#xe60d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xec34;</span>
+                <div class="name">告警</div>
+                <div class="code-name">&amp;#xec34;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6bc;</span>
+                <div class="name">大楼</div>
+                <div class="code-name">&amp;#xe6bc;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe632;</span>
+                <div class="name">系统管理</div>
+                <div class="code-name">&amp;#xe632;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1660811949301') format('woff2'),
+       url('iconfont.woff?t=1660811949301') format('woff'),
+       url('iconfont.ttf?t=1660811949301') format('truetype');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xitongguanli"></span>
+            <div class="name">
+              系统管理-部门管理
+            </div>
+            <div class="code-name">.icon-xitongguanli
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shouye"></span>
+            <div class="name">
+              首页
+            </div>
+            <div class="code-name">.icon-shouye
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shezhi"></span>
+            <div class="name">
+              设置
+            </div>
+            <div class="code-name">.icon-shezhi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xiaoxi"></span>
+            <div class="name">
+              消息
+            </div>
+            <div class="code-name">.icon-xiaoxi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-gaojing"></span>
+            <div class="name">
+              告警
+            </div>
+            <div class="code-name">.icon-gaojing
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-dalou"></span>
+            <div class="name">
+              大楼
+            </div>
+            <div class="code-name">.icon-dalou
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xitongguanli1"></span>
+            <div class="name">
+              系统管理
+            </div>
+            <div class="code-name">.icon-xitongguanli1
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xitongguanli"></use>
+                </svg>
+                <div class="name">系统管理-部门管理</div>
+                <div class="code-name">#icon-xitongguanli</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shouye"></use>
+                </svg>
+                <div class="name">首页</div>
+                <div class="code-name">#icon-shouye</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shezhi"></use>
+                </svg>
+                <div class="name">设置</div>
+                <div class="code-name">#icon-shezhi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xiaoxi"></use>
+                </svg>
+                <div class="name">消息</div>
+                <div class="code-name">#icon-xiaoxi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-gaojing"></use>
+                </svg>
+                <div class="name">告警</div>
+                <div class="code-name">#icon-gaojing</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dalou"></use>
+                </svg>
+                <div class="name">大楼</div>
+                <div class="code-name">#icon-dalou</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xitongguanli1"></use>
+                </svg>
+                <div class="name">系统管理</div>
+                <div class="code-name">#icon-xitongguanli1</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

device-manager-ui/admin/src/assets/fonts/iconfont.css

+@font-face {
+  font-family: "iconfont"; /* Project id 3597207 */
+  src: url('iconfont.woff2?t=1660811949301') format('woff2'),
+       url('iconfont.woff?t=1660811949301') format('woff'),
+       url('iconfont.ttf?t=1660811949301') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-xitongguanli:before {
+  content: "\e627";
+}
+
+.icon-shouye:before {
+  content: "\e751";
+}
+
+.icon-shezhi:before {
+  content: "\e64b";
+}
+
+.icon-xiaoxi:before {
+  content: "\e60d";
+}
+
+.icon-gaojing:before {
+  content: "\ec34";
+}
+
+.icon-dalou:before {
+  content: "\e6bc";
+}
+
+.icon-xitongguanli1:before {
+  content: "\e632";
+}
+

device-manager-ui/admin/src/assets/fonts/iconfont.js

+!function(a){var t,l,e,c,o,n='<svg><symbol id="icon-xitongguanli" viewBox="0 0 1024 1024"><path d="M894.7 597.8h-94.1v-65.9c-0.3-16.4-13.9-29.5-30.4-29.2H542.1V454c83.7-16.7 138.1-98.2 121.3-181.9-16.7-83.7-98.2-138.1-181.9-121.3-83.7 16.7-138.1 98.2-121.3 181.9 12.2 61.2 60.1 109.1 121.3 121.3v48.6H253.3c-16.4-0.3-30 12.8-30.4 29.2v65.9h-94.1c-16.4-0.2-29.9 12.8-30.2 29.2v240c0.3 16.4 13.8 29.4 30.2 29.2h248.7c16.4 0.3 29.9-12.7 30.2-29.1V627c-0.3-16.4-13.7-29.4-30.1-29.2H283.4V561h456.7v36.8H646c-16.4-0.3-29.9 12.7-30.2 29.1V867c0.3 16.4 13.7 29.4 30.1 29.2H894.7c16.4 0.2 29.9-12.8 30.2-29.2V627c-0.3-16.4-13.8-29.5-30.2-29.2z m-547.4 58.3v181.7H159V656.1h188.3z m70.3-348.4c-1.9-52 38.8-95.7 90.8-97.5 52-1.9 95.7 38.8 97.5 90.8 1.9 52-38.8 95.7-90.8 97.5-1.2 0-2.3 0.1-3.5 0.1-50.9 0.7-93-39.9-94-90.9z m446.9 530.1H676.2V656.1h188.3v181.7z" fill="#333333" ></path></symbol><symbol id="icon-shouye" viewBox="0 0 1024 1024"><path d="M979.792374 404.577188 574.183101 83.942886c-34.918864-27.694272-89.619352-27.694272-124.538216 0L44.207626 404.577188c-13.933143 11.008903-16.169326 31.134554-5.332437 44.895683s30.618512 16.169326 44.551655 5.332437l12.55703-10.320847 0 387.547791c0 54.872501 57.968755 95.983874 108.712918 95.983874l639.892491 0c50.22812 0 83.254829-38.531161 83.254829-95.983874L927.844112 445.860575l11.69696 8.944734c5.84848 4.644381 13.073072 6.880564 20.125651 6.880564 9.460776 0 18.921552-4.128339 25.286074-12.213002C995.9617 435.711742 993.725517 415.586091 979.792374 404.577188zM479.919368 864.026877 479.919368 686.508315c0-8.77272 15.997312-13.245087 31.994625-13.245087s31.994625 4.472367 31.994625 13.245087l0 177.346548L479.919368 864.026877 479.919368 864.026877zM864.026877 832.032253c0 21.157736-5.84848 31.994625-19.26558 31.994625L608.585923 864.026877c0-0.516042-0.688056-0.860071-0.688056-1.376113L607.897867 686.508315c0-37.155048-29.930455-77.234336-95.983874-77.234336s-95.983874 40.079288-95.983874 77.234336l0 176.142449c0 0.516042 0.860071 0.860071 0.860071 1.376113L204.868806 864.026877c-20.125651 0-44.723669-17.373425-44.723669-31.994625L160.145137 393.740299 488.864102 134.171006c11.868974-9.288762 33.198723-9.288762 44.895683 0l330.095078 261.11742L863.854863 832.032253z"  ></path></symbol><symbol id="icon-shezhi" viewBox="0 0 1024 1024"><path d="M512 697.6c102.4 0 182.4-83.2 182.4-185.6 0-102.4-83.2-185.6-182.4-185.6-102.4 0-182.4 83.2-182.4 185.6C329.6 614.4 412.8 697.6 512 697.6L512 697.6zM512 646.4c-73.6 0-134.4-60.8-134.4-134.4 0-73.6 60.8-134.4 134.4-134.4 73.6 0 134.4 60.8 134.4 134.4C646.4 585.6 585.6 646.4 512 646.4L512 646.4z"  ></path><path d="M249.015232 843.178592c35.2 28.8 73.6 51.2 112 67.2 41.6-38.4 96-60.8 150.4-60.8 57.6 0 108.8 22.4 150.4 60.8 41.6-16 80-38.4 112-67.2-12.8-54.4-3.2-112 22.4-163.2 28.8-48 73.6-86.4 128-102.4 3.2-22.4 6.4-44.8 6.4-67.2 0-22.4-3.2-44.8-6.4-67.2-54.4-16-99.2-54.4-128-102.4-28.8-48-35.2-108.8-22.4-163.2-35.2-28.8-73.6-51.2-112-67.2-41.6 38.4-92.8 60.8-150.4 60.8-54.4 0-108.8-22.4-150.4-60.8-41.6 16-80 38.4-112 67.2 12.8 54.4 3.2 112-22.4 163.2-28.8 48-73.6 86.4-128 102.4-3.2 22.4-6.4 44.8-6.4 67.2 0 22.4 3.2 44.8 6.4 67.2 54.4 16 99.2 54.4 128 102.4C252.215232 731.178592 261.815232 788.778592 249.015232 843.178592M361.015232 958.378592c-54.4-19.2-105.6-48-150.4-89.6-6.4-6.4-9.6-16-6.4-22.4 16-48 9.6-99.2-16-140.8-25.6-44.8-64-73.6-112-83.2-9.6-3.2-16-9.6-16-19.2-6.4-28.8-9.6-60.8-9.6-89.6 0-28.8 3.2-57.6 9.6-89.6 3.2-9.6 9.6-16 16-19.2 48-12.8 89.6-41.6 112-83.2 25.6-44.8 28.8-92.8 16-140.8-3.2-9.6 0-19.2 6.4-22.4 44.8-38.4 96-67.2 150.4-89.6 9.6-3.2 16 0 22.4 6.4 35.2 35.2 80 57.6 128 57.6 48 0 96-19.2 128-57.6 6.4-6.4 16-9.6 22.4-6.4 54.4 19.2 105.6 48 150.4 89.6 6.4 6.4 9.6 16 6.4 22.4-16 48-9.6 99.2 16 140.8 25.6 44.8 64 73.6 112 83.2 9.6 3.2 16 9.6 16 19.2 6.4 28.8 9.6 60.8 9.6 89.6 0 28.8-3.2 57.6-9.6 89.6-3.2 9.6-9.6 16-16 19.2-48 12.8-89.6 41.6-112 83.2-25.6 44.8-28.8 92.8-16 140.8 3.2 9.6 0 19.2-6.4 22.4-44.8 38.4-96 67.2-150.4 89.6-9.6 3.2-16 0-22.4-6.4-35.2-35.2-80-57.6-128-57.6-48 0-96 19.2-128 57.6-3.2 3.2-9.6 6.4-16 6.4C364.215232 958.378592 361.015232 958.378592 361.015232 958.378592z"  ></path></symbol><symbol id="icon-xiaoxi" viewBox="0 0 1024 1024"><path d="M901.89824 125.31712H122.88c-67.75808 0-122.88 55.12192-122.88 122.88v552.97024c0 67.75808 55.12192 122.88 122.88 122.88h779.01824c67.75808 0 122.88-55.12192 122.88-122.88V248.19712c0-67.74784-55.12192-122.88-122.88-122.88z m81.92 675.85024c0 45.16864-36.75136 81.92-81.92 81.92H122.88c-45.16864 0-81.92-36.75136-81.92-81.92V248.19712c0-45.16864 36.75136-81.92 81.92-81.92h779.01824c45.16864 0 81.92 36.75136 81.92 81.92v552.97024z" fill="" ></path><path d="M527.7184 502.43584a21.7088 21.7088 0 0 1-30.65856 0L206.00832 211.39456l-28.95872 28.95872 291.05152 291.05152c12.21632 12.20608 28.25216 18.31936 44.288 18.31936s32.08192-6.11328 44.288-18.31936l291.05152-291.05152-28.95872-28.95872-291.05152 291.04128z" fill="" ></path></symbol><symbol id="icon-gaojing" viewBox="0 0 1024 1024"><path d="M192 832a32 32 0 0 0 0 64h640a32 32 0 0 0 0-64H192z m0-64h640a96 96 0 0 1 0 192H192a96 96 0 0 1 0-192z"  ></path><path d="M816 208m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z"  ></path><path d="M208 208m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z"  ></path><path d="M480 608a32 32 0 0 1 64 0v160a32 32 0 0 1-64 0v-160z"  ></path><path d="M512 640a112 112 0 1 1 0-224 112 112 0 0 1 0 224z m0-64a48 48 0 1 0 0-96 48 48 0 0 0 0 96zM864 480a32 32 0 0 1 0-64h96a32 32 0 0 1 0 64h-96zM64 480a32 32 0 0 1 0-64h96a32 32 0 0 1 0 64H64zM480 64a32 32 0 0 1 64 0v96a32 32 0 0 1-64 0V64z"  ></path><path d="M272.448 800h-64v-288a304 304 0 0 1 608 0v288h-64v-288a240 240 0 0 0-480 0v288z"  ></path></symbol><symbol id="icon-dalou" viewBox="0 0 1024 1024"><path d="M981.333333 1024h-938.666666a42.666667 42.666667 0 0 1 0-85.333333H85.333333V128A128 128 0 0 1 213.333333 0h302.506667a128 128 0 0 1 128 128v224l202.24 58.453333A128 128 0 0 1 938.666667 533.333333V938.666667h42.666666a42.666667 42.666667 0 0 1 0 85.333333z m-337.493333-85.333333H853.333333V533.333333a42.666667 42.666667 0 0 0-30.72-42.666666l-178.773333-51.626667v148.906667h85.333333a42.666667 42.666667 0 0 1 0 85.333333h-85.333333v72.106667h85.333333a42.666667 42.666667 0 0 1 0 85.333333h-85.333333V938.666667z m-151.04 0h65.706667V128a42.666667 42.666667 0 0 0-42.666667-42.666667H213.333333A42.666667 42.666667 0 0 0 170.666667 128V938.666667h66.133333v-170.666667a42.666667 42.666667 0 0 1 42.666667-42.666667h170.666666a42.666667 42.666667 0 0 1 42.666667 42.666667v170.666667z m-170.666667 0h85.333334v-128h-85.333334V938.666667z m128-320h-170.666666a42.666667 42.666667 0 0 1 0-85.333334h170.666666a42.666667 42.666667 0 0 1 0 85.333334z m0-170.666667h-170.666666a42.666667 42.666667 0 0 1 0-85.333333h170.666666a42.666667 42.666667 0 0 1 0 85.333333z m0-170.666667h-170.666666a42.666667 42.666667 0 0 1 0-85.333333h170.666666a42.666667 42.666667 0 0 1 0 85.333333z"  ></path></symbol><symbol id="icon-xitongguanli1" viewBox="0 0 1024 1024"><path d="M446.805333 955.716267a381.405867 381.405867 0 0 0 133.597867 66.730666c2.7136 0.733867 13.346133 1.2288 29.0816 1.536h-404.650667a34.1504 34.1504 0 0 1 0-68.266666H446.805333z m318.293334-570.043734l3.1232 0.699734a308.002133 308.002133 0 0 1 123.2896 66.884266l6.109866 5.597867a33.109333 33.109333 0 0 1 10.3424 27.818667l-6.417066 57.275733a8.0384 8.0384 0 0 0 4.949333 8.2944l54.442667 23.261867a34.133333 34.133333 0 0 1 18.858666 19.899733l0.8192 2.696533a287.914667 287.914667 0 0 1 1.9456 136.789334l-1.9456 7.936c-2.6112 10.069333-9.8816 18.432-19.694933 22.613333l-54.442667 23.261867a8.0384 8.0384 0 0 0-4.932266 8.2944l6.417066 57.224533a33.024 33.024 0 0 1-8.328533 25.770667l-1.9968 2.048a307.319467 307.319467 0 0 1-121.344 70.126933l-8.072533 2.338133c-2.048 0.546133-4.1472 0.9216-6.263467 1.092267l-3.191467 0.136533c-7.389867 0-14.592-2.286933-20.565333-6.5024l-48.008533-34.065066a8.567467 8.567467 0 0 0-9.8816 0l-48.008534 34.065066a35.669333 35.669333 0 0 1-26.914133 5.9392l-3.106133-0.7168a308.0192 308.0192 0 0 1-123.2896-66.8672l-6.144-5.614933a33.109333 33.109333 0 0 1-10.325334-27.8016l6.434134-57.224533a8.055467 8.055467 0 0 0-4.949334-8.2944l-54.442666-23.261867a34.133333 34.133333 0 0 1-18.858667-19.899733l-0.836267-2.7136a287.914667 287.914667 0 0 1-1.928533-136.789334l1.928533-7.936c2.628267-10.069333 9.898667-18.397867 19.712-22.596266l54.408534-23.261867a8.055467 8.055467 0 0 0 4.949333-8.2944l-6.417067-57.224533a33.024 33.024 0 0 1 8.328534-25.770667l1.9968-2.048a307.3536 307.3536 0 0 1 121.344-70.144l8.072533-2.338133a35.703467 35.703467 0 0 1 30.020267 5.256533l48.008533 34.048a8.567467 8.567467 0 0 0 9.898667 0l48.008533-34.048a35.618133 35.618133 0 0 1 23.773867-6.382933l3.1232 0.426666zM853.333333 0C947.5072 0 1024 71.406933 1024 159.232v400.503467a5.205333 5.205333 0 0 0-0.989867-1.604267l-0.546133-0.392533-66.747733-28.3648v-67.6864l1.467733-12.868267a39.901867 39.901867 0 0 0-1.4336-15.940267l-0.034133-273.629866C955.733333 109.090133 909.824 68.266667 853.333333 68.266667H170.666667c-56.507733 0-102.4 40.789333-102.4 90.965333v568.9344c0 50.158933 45.892267 90.965333 102.4 90.965333h239.36c3.566933 1.536 5.888 4.864 6.075733 8.533334l-0.0512 1.604266-6.570667 58.129067H170.683733C76.6464 887.432533 0 816.042667 0 728.200533V159.249067C0 71.406933 76.629333 0 170.683733 0H853.333333z m-88.302933 456.174933l-33.706667 23.893334a79.701333 79.701333 0 0 1-92.1088 0l-33.723733-23.893334a237.789867 237.789867 0 0 0-71.850667 40.277334l4.522667 40.157866c3.771733 32.750933-14.8992 64.068267-46.062933 77.294934l-38.1952 16.315733a222.993067 222.993067 0 0 0 0 80.384l38.1952 16.3328c31.163733 13.226667 49.834667 44.544 46.08 77.294933l-4.5568 40.174934a237.7216 237.7216 0 0 0 71.850666 40.277333l33.706667-23.927467a79.394133 79.394133 0 0 1 41.5744-14.523733l4.5056-0.119467a79.530667 79.530667 0 0 1 46.08 14.6432l33.6896 23.893334a237.602133 237.602133 0 0 0 71.850667-40.260267l-4.5056-40.174933c-3.754667-32.750933 14.8992-64.068267 46.045866-77.277867l38.212267-16.2816a222.993067 222.993067 0 0 0 0-80.401067l-38.212267-16.349866c-31.146667-13.226667-49.8176-44.544-46.045866-77.312l4.5056-40.1408a237.6192 237.6192 0 0 0-71.850667-40.277334z m-79.7696 75.605334c78.8992 0 143.069867 62.173867 143.069867 138.5984 0 76.4416-64.170667 138.615467-143.069867 138.615466-78.882133 0-143.0528-62.173867-143.0528-138.615466 0-76.424533 64.170667-138.5984 143.0528-138.5984z m0 67.413333c-40.567467 0-73.454933 31.880533-73.454933 71.185067 0 39.3216 32.887467 71.185067 73.454933 71.185066 39.355733 0 71.4752-29.969067 73.386667-67.618133l0.085333-3.549867c-0.0512-38.109867-30.941867-69.205333-69.802667-71.099733l-3.669333-0.085333z" fill="#121649" ></path></symbol></svg>',i=(i=document.getElementsByTagName("script"))[i.length-1].getAttribute("data-injectcss"),h=function(a,t){t.parentNode.insertBefore(a,t)};if(i&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(a){console&&console.log(a)}}function d(){o||(o=!0,e())}function s(){try{c.documentElement.doScroll("left")}catch(a){return void setTimeout(s,50)}d()}t=function(){var a,t=document.createElement("div");t.innerHTML=n,n=null,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(a=document.body).firstChild?h(t,a.firstChild):a.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(l=function(){document.removeEventListener("DOMContentLoaded",l,!1),t()},document.addEventListener("DOMContentLoaded",l,!1)):document.attachEvent&&(e=t,c=a.document,o=!1,s(),c.onreadystatechange=function(){"complete"==c.readyState&&(c.onreadystatechange=null,d())})}(window);
\ No newline at end of file

device-manager-ui/admin/src/assets/fonts/iconfont.json

+{
+  "id": "3597207",
+  "name": "物联网",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "12889883",
+      "name": "系统管理-部门管理",
+      "font_class": "xitongguanli",
+      "unicode": "e627",
+      "unicode_decimal": 58919
+    },
+    {
+      "icon_id": "577364",
+      "name": "首页",
+      "font_class": "shouye",
+      "unicode": "e751",
+      "unicode_decimal": 59217
+    },
+    {
+      "icon_id": "629333",
+      "name": "设置",
+      "font_class": "shezhi",
+      "unicode": "e64b",
+      "unicode_decimal": 58955
+    },
+    {
+      "icon_id": "1311632",
+      "name": "消息",
+      "font_class": "xiaoxi",
+      "unicode": "e60d",
+      "unicode_decimal": 58893
+    },
+    {
+      "icon_id": "5764445",
+      "name": "告警",
+      "font_class": "gaojing",
+      "unicode": "ec34",
+      "unicode_decimal": 60468
+    },
+    {
+      "icon_id": "8361756",
+      "name": "大楼",
+      "font_class": "dalou",
+      "unicode": "e6bc",
+      "unicode_decimal": 59068
+    },
+    {
+      "icon_id": "12820187",
+      "name": "系统管理",
+      "font_class": "xitongguanli1",
+      "unicode": "e632",
+      "unicode_decimal": 58930
+    }
+  ]
+}

device-manager-ui/admin/src/assets/images/home.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12">
+  <image id="首页" y="0.5" width="12" height="11" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAALCAYAAABLcGxfAAAA1UlEQVQokYWOsUqCYRSGH/+iEMpoqEncEhrE3VXcuoDuQ6IL0ckuoKEhaBMXaXFLWrqA0HBwbAt85MAX/HwoHjh857zneT9e1Ly76lz9UB/yew4/qhv1Xm2qa3WyzzBOwG1JK9SpulLr/4aG+q7OErAr5kBdqL1YvtXfHVDeT6rHwBDocLh+gJcC+AROMvwKuMm0S2AZhhpQyeBn4A3olfQNUA1DxPorHdrAF/AK3JX0YI4CDmcLOEviOXAKGECao+pAUVEj0ihlDEPsF+mjqGV6r4H+FhxB2YcETV9JAAAAAElFTkSuQmCC"/>
+</svg>

device-manager-ui/admin/src/assets/images/告警管理.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12">
+  <image id="告警管理" x="-1" y="-1" width="14" height="14" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAABS0lEQVQokX3Sv0vXYRAH8Nc3ysoQCyohI2moISfRfyDBIWhrCUFCaBKKGoSmmvoDmqIc+gcsCIkgaFLQMRpcBLPIsR+TOFQXp/eFJ60O7vN87t539zz3vutEhH/IFfTi+d/g/yW+xjkM70NwoM4+LGGiwd7gRWNfxEq3UDexg4NYxxje4TrGsYqrWKv4zk5GPrXRidiVhxExGBGnIuJu+e60sfnpi4gTpSlTe4qljhV2ISKOR0R/kvO2SMgn/cA1nMcrHMUklvEMIziE7ezrRhn3cLJ6nsdi9foSp/ENXzGtCPlcwekcqv8nmMElPC7fMXzHx5bVrvys8yk+oR8PyvfHwPPGdqZHGjvp32rsntLd+dXm3MZs9fqhsLNVeKOxD2MO9zPxDDZxC+8xUIFJRj69S9iX2t0FXM7EvOURRvFrby+N5MYktombvwGs+p53uBB4fAAAAABJRU5ErkJggg=="/>
+</svg>

device-manager-ui/admin/src/assets/images/平台设置.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12">
+  <image id="平台设置" width="12" height="12" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAABH0lEQVQokV2RPSjFYRTGf66v2x0sDFIXg2sQIaOFUWazRcrHoEzKakPJ4ApZlLLcQcqgTAwyW2wykFISZfHTe++Rf06d932ec07nvOd5UbO+oB6pnRFbV8tqy29NXTqAJmAt7iegH3gHvoBXYBBYBe6y3Stqe+CC2pXJHasTCeeoWStQDzQE/wQe+bMPoFhl6qJ6o05FtzH1RN1TZyNWUi/UjUSuI5BwUT1T+9TmwJORy6mb6UlXwH0MT2PfqsvVFr4FBiL3DZSTSpVQYimUSWp1AA9Ab8SfgWVgPI1KGm+ruxlV5tUVNR98Tr1Uh7Ky7md2+e8H6khW1kagB+gGCsAWsAOUgDwwDLSlwt+fTjYKzADtwDnwAkzHn5wCh4A/YfIQmkKOjGcAAAAASUVORK5CYII="/>
+</svg>

device-manager-ui/admin/src/assets/images/生产厂商.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12">
+  <image id="生产厂商" width="12" height="12" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAABG0lEQVQokW3QPUsQUBTG8Z/iS1lBomtzU5NCNiRuQQ5+gVAIitYWl8APIDS6uURDTYWrm0a7RmAO4hItLiIFRtQTp45g4YFz7z333ufe/3kkqVxOcphkv/MgyfM++ydrmEpynGQ6yZXOW0mOksz8LxjCTWzgA+76G++whqd4i+89/xF8wzHu4RkGsdJ7t3EDl/EEC/XNQpKtC3jfJHlwrq6+Foca4RNmsYQBvMAORrGK7Ua6dib42YcTLRjBj8a7XhcxjNMzpO0LkDaSPD5XbyZ5VC9U7OI+ttqhebzHL7zGQ3ysupBOMdai9X6g+MuhL3iFfUyXvSUo2+7gBC9bcBVzvS6LL2EGnwfKvlYfdcMVhTLejX/t/Uns/Qb8YcvTPw2WuQAAAABJRU5ErkJggg=="/>
+</svg>

device-manager-ui/admin/src/assets/images/站点分布图标.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="12" viewBox="0 0 14 12">
+  <image id="图层_19" data-name="图层 19" width="14" height="12" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAABCElEQVQokW2SP0sDQRDFf4mamEaIIJc2zV2wtLWQtNaC6VKkChH8Bgd3nUXIB4jphJAvIAgWIf5pBVMdNuly16oQUp0MjrJ3tw+m2LfzZubNbilNU0x4YdIChkBN6RUwiHxnY+btUsQFcJ5jR8DSJMoFmb1YgbMJH4EPYAt8Aq86bhbi0RZuEN+7QXxtu5P4X44XJuLtWGoBsogb9TUFqsq9RL4jE/wKvTA5BZ6BhXA60hrYB+pa7Ag4jHynYZre0WpnBS8GvDB5+zuW3CDuAZfAiY41jnznPScQGx2gDcyAO+l4a+RcAQdAN9dsorygDzRtz1GxcNnvBXsifAK+Nb70nMdDJgfmP68GamceNFjdAAAAAElFTkSuQmCC"/>
+</svg>

device-manager-ui/admin/src/assets/images/站点设备地点.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11" height="14" viewBox="0 0 11 14">
+  <image id="地点" width="11" height="14" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAOCAYAAAD5YeaVAAABMUlEQVQokWWSvy9EQRSFv92oKFcyOkGy0+gkKhKVAgUq8SOio1aIwk12oqbwH1CIQkOiV4hiJUIkTCEiSEyi0InCPrnMvLy8vdXMPd87c+7Mq2RZRirrwhqwAvQDr8C+F7OT9By2LhwCc7TXmRczqd1qBKcK4DYwDGzE/YR1YUkXHbGRwBMvZiv2mtaFQUDBeeCgGoUUvFUK0SrqybkJLALT1gXRE4Cx6Jp0kvNpwa0BXAO7Bf04h72YJ+C87R7+686LuS06ay0D3yVQsy6kTQ57Mc/ARQm+Sa5alXrjvRvYA7qANx0S6AE+gaO4/gHW1fkhCrNejD73CPCij+HFrAIzwL1mV1gn16/HrQsDXswjMOTFXFoX+rQP9Cr392/Eux2NA30BH0AN6NSowJUXs/kLKj9euCTXiIAAAAAASUVORK5CYII="/>
+</svg>

device-manager-ui/admin/src/assets/images/系统管理.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12">
+  <image id="系统管理" width="12" height="12" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAA80lEQVQokY2RsUoDQBBEnxICMaKSSg1WgtgGLP0EwUI7IT8hduYjUmol1taSSgujoK2FnZWFEBBiI6jwZHUDpynMwMHu7c7s3tyU+gQ0mQyDIAicAP1/KDWggz/YDN4E53o62XNjeuOYB1YrQKy0BDSKlpciDrEPYAjsxJihvzFQG2ozV4z6ulpTqzFhFjgAesACUAdWgHPgNiccA8vA2ejRfXVfbaXqjHqXtcNii8Uonqq9vLhJwmfm7UIg8FZaeak+ZLwXFuaUNbWrvqu7o+arVLjIvKK+/jEjsBU/HdZtAFXgGXgEWkAbOALuge1vI6D+BQSZFivDzo07AAAAAElFTkSuQmCC"/>
+</svg>

device-manager-ui/admin/src/assets/images/设备管理.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12">
+  <image id="设备管理" width="12" height="12" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAA/klEQVQokYWRPysFUBiHH6KuZJE/oWSQxWKx+BpKhsvNRzAYfABfwIQyKJPFoEyK6JZYsIliuINkMFwmt0dv96jjGLx1hvP+3l/n95y3QyWrYWADGAJawCmwmQ908rvmgWXgHvgA1gudruI+BuwBa+l+8Z/hFtgHepK5vzQQDMWZVl/VHbWv1PMX5hJsA/gEmsAMMAjcAY8x9PNLi8AWUI9eMnSnyL3AKDCVM4wDh8DKn8ztuswZdtUn9U09UgeyzDX1XG2qJ2o1mu/qrDqpNtSFzFBXt9UJ9Vg9i8W9ANcJ6gGoZFG+kvYM3MT2gyE2GrAhBstVkX0VWAJGgINvUm2gs7a/fSsAAAAASUVORK5CYII="/>
+</svg>

device-manager-ui/admin/src/assets/less/base.less

@@ -150,9 +150,18 @@ ins,a {
 		}
 	}
 }
+.table-foot{
+	display: flex;
+	justify-content: flex-end;
+}
 .el-table th {
 	user-select: all;
 }
+/* el-table列数据为空自动显示-- */
+.cell:empty::before{
+    content:'--';
+    color:gray;
+}
 .el-progress-bar{
 	padding-right: 70px;
 	margin-right: -70px;

device-manager-ui/admin/src/components/AMap.vue

 <template lang="html">
- <div style="width:100%;height:800px;">
+ <div style="width:100%;height:100%;">
     <div class="container">
       <!-- <div class="search-box">
         <input
@@ -33,22 +33,22 @@
 </template>
 
 <script>
-import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'
-let amapManager = new AMapManager()
+import { AMapManager, lazyAMapApiLoaderInstance } from "vue-amap";
+let amapManager = new AMapManager();
 export default {
-  name:'AMap',
+  name: "AMap",
   data() {
-    let self = this
+    let self = this;
     return {
       address: null,
-      searchKey: '',
+      searchKey: "",
       amapManager,
       markers: [],
       searchOption: {
-        city: '全国',
-        citylimit: true
+        city: "全国",
+        citylimit: true,
       },
-      center: [112.938888,28.228272],
+      center: [112.938888, 28.228272],
       zoom: 17,
       lng: 0,
       lat: 0,
@@ -56,153 +56,153 @@ export default {
       events: {
         init() {
           lazyAMapApiLoaderInstance.load().then(() => {
-            self.initSearch()
-          })
+            self.initSearch();
+          });
         },
         // 点击获取地址的数据
         click(e) {
-          self.markers = []
-          let { lng, lat } = e.lnglat
-          self.lng = lng
-          self.lat = lat
-          self.center = [lng, lat]
-          self.markers.push([lng, lat])
+          self.markers = [];
+          let { lng, lat } = e.lnglat;
+          self.lng = lng;
+          self.lat = lat;
+          self.center = [lng, lat];
+          self.markers.push([lng, lat]);
           // 这里通过高德 SDK 完成。
           let geocoder = new AMap.Geocoder({
             radius: 1000,
-            extensions: 'all'
-          })
-          geocoder.getAddress([lng, lat], function(status, result) {
-            if (status === 'complete' && result.info === 'OK') {
+            extensions: "all",
+          });
+          geocoder.getAddress([lng, lat], function (status, result) {
+            if (status === "complete" && result.info === "OK") {
               if (result && result.regeocode) {
-                console.log(result.regeocode.formattedAddress) //控制台打印地址
-                self.address = result.regeocode.formattedAddress
-                self.searchKey = result.regeocode.formattedAddress
-                self.$nextTick()
+                console.log(result.regeocode.formattedAddress); //控制台打印地址
+                self.address = result.regeocode.formattedAddress;
+                self.searchKey = result.regeocode.formattedAddress;
+                self.$nextTick();
               }
             }
-          })
-        }
+          });
+        },
       },
       // 一些工具插件
       plugin: [
         {
-          pName: 'Geocoder',
+          pName: "Geocoder",
           events: {
-            init (o) {
+            init(o) {
               //console.log("一些工具插件--地址"+o.getAddress())
-            }
-          }
+            },
+          },
         },
         {
           // 定位
-          pName: 'Geolocation',
+          pName: "Geolocation",
           events: {
             init(o) {
               // o是高德地图定位插件实例
               o.getCurrentPosition((status, result) => {
                 if (result && result.position) {
                   // 设置经度
-                  self.lng = result.position.lng
+                  self.lng = result.position.lng;
                   // 设置维度
-                  self.lat = result.position.lat
+                  self.lat = result.position.lat;
                   // 设置坐标
-                  self.center = [self.lng, self.lat]
-                  self.markers.push([self.lng, self.lat])
+                  self.center = [self.lng, self.lat];
+                  self.markers.push([self.lng, self.lat]);
                   // load
-                  self.loaded = true
+                  self.loaded = true;
                   // 页面渲染好后
-                  self.$nextTick()
+                  self.$nextTick();
                 }
-              })
-            }
-          }
+              });
+            },
+          },
         },
         {
           // 工具栏
-          pName: 'ToolBar',
+          pName: "ToolBar",
           events: {
             init(instance) {
-               //console.log("工具栏:"+instance);
-            }
-          }
+              //console.log("工具栏:"+instance);
+            },
+          },
         },
         {
           // 鹰眼
-          pName: 'OverView',
+          pName: "OverView",
           events: {
             init(instance) {
-               //console.log("鹰眼:"+instance);
-            }
-          }
+              //console.log("鹰眼:"+instance);
+            },
+          },
         },
         {
           // 地图类型
-          pName: 'MapType',
+          pName: "MapType",
           defaultType: 0,
           events: {
             init(instance) {
-               //console.log("地图类型:"+instance);
-            }
-          }
+              //console.log("地图类型:"+instance);
+            },
+          },
         },
         {
           // 搜索
-          pName: 'PlaceSearch',
+          pName: "PlaceSearch",
           events: {
             init(instance) {
-               //console.log("搜索:"+instance)
-            }
-          }
-        }
-      ]
-    }
+              //console.log("搜索:"+instance)
+            },
+          },
+        },
+      ],
+    };
   },
   methods: {
     initSearch() {
-      let vm = this
-      let map = this.amapManager.getMap()
-      AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
+      let vm = this;
+      let map = this.amapManager.getMap();
+      AMapUI.loadUI(["misc/PoiPicker"], function (PoiPicker) {
         var poiPicker = new PoiPicker({
-          input: 'search',
+          input: "search",
           placeSearchOptions: {
             map: map,
-            pageSize: 10
+            pageSize: 10,
           },
-          suggestContainer: 'searchTip',
-          searchResultsContainer: 'searchTip'
-        })
-        vm.poiPicker = poiPicker
+          suggestContainer: "searchTip",
+          searchResultsContainer: "searchTip",
+        });
+        vm.poiPicker = poiPicker;
         // 监听poi选中信息
-        poiPicker.on('poiPicked', function(poiResult) {
+        poiPicker.on("poiPicked", function (poiResult) {
           // console.log(poiResult)
-           let source = poiResult.source
-           let poi = poiResult.item
-           if (source !== 'search') {
-             poiPicker.searchByKeyword(poi.name)
-           } else {
-             poiPicker.clearSearchResults()
-             vm.markers = []
-             let lng = poi.location.lng
-             let lat = poi.location.lat
-             let address = poi.cityname + poi.adname + poi.name
-             vm.center = [lng, lat]
-             vm.markers.push([lng, lat])
-             vm.lng = lng
-             vm.lat = lat
-             vm.address = address
-             vm.searchKey = address
-           }
-        })
-      })
+          let source = poiResult.source;
+          let poi = poiResult.item;
+          if (source !== "search") {
+            poiPicker.searchByKeyword(poi.name);
+          } else {
+            poiPicker.clearSearchResults();
+            vm.markers = [];
+            let lng = poi.location.lng;
+            let lat = poi.location.lat;
+            let address = poi.cityname + poi.adname + poi.name;
+            vm.center = [lng, lat];
+            vm.markers.push([lng, lat]);
+            vm.lng = lng;
+            vm.lat = lat;
+            vm.address = address;
+            vm.searchKey = address;
+          }
+        });
+      });
     },
     searchByHand() {
-      if (this.searchKey !== '') {
-        this.poiPicker.searchByKeyword(this.searchKey)
+      if (this.searchKey !== "") {
+        this.poiPicker.searchByKeyword(this.searchKey);
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style lang="css">

device-manager-ui/admin/src/components/Header.vue

@@ -6,61 +6,83 @@
       <div class="layout-menu flex flex-1">
         <!-- logo -->
         <div class="layout-logo flex">
-          <i class="el-icon-menu" @click='showMobileMenu=!showMobileMenu'> </i>
+          <i class="el-icon-menu" @click="showMobileMenu = !showMobileMenu">
+          </i>
           <router-link to="/">
-            <img src="../assets/images/logo.png" style="margin-bottom:5px" height="40" alt="">
-             <b style="color:white;font-size:18px;">&nbsp;&nbsp;&nbsp; AIOT智慧边缘物联网系统 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b>
+            <img
+              src="../assets/images/logo2.png"
+              style="margin-bottom: 5px"
+              height="27"
+              width="27"
+            />
+            <b style="color: white; font-size: 18px; margin-right: 42px">
+              AIOT智慧边缘物联网系统</b
+            >
           </router-link>
-      
         </div>
         <!-- 一级菜单 -->
         <ul class="menu-list flex">
-          <li v-for='item in menu' :key='item.id'>
-            <router-link :to="item.path" :active='submenu.path === item.path' :title="item.name">
-              <i :class="'el-icon-'+item.icon"></i>
-              {{item.name}}   
+          <li v-for="item in menu" :key="item.id">
+            <router-link
+              :to="item.path"
+              :active="submenu.path === item.path"
+              :title="item.name"
+            >
+              <i :class="`iconfont ${item.icon}`"></i>
+              <span>
+                {{ item.name }}
+              </span>
             </router-link>
           </li>
         </ul>
       </div>
       <div class="layout-profile">
-
-  <!-- <span class="el-dropdown-link">
+        <!-- <span class="el-dropdown-link">
              {{userData.currUserName}}
              <i class="el-icon-arrow-down el-icon--right"></i>
           </span> -->
 
-         <el-dropdown @command="handleCommand">
-          <span class="el-dropdown-link" style="color:white">
-            {{userData.currUserName}}
+        <el-dropdown @command="handleCommand">
+          <span class="el-dropdown-link" style="color: white">
+            {{ userData.currUserName }}
             <i class="el-icon-arrow-down el-icon--right"></i>
           </span>
-           <el-dropdown-menu slot="dropdown">
+          <el-dropdown-menu slot="dropdown">
             <el-dropdown-item command="update">修改密码</el-dropdown-item>
             <el-dropdown-item command="logout">退出登录</el-dropdown-item>
           </el-dropdown-menu>
-        </el-dropdown> 
+        </el-dropdown>
       </div>
     </div>
 
     <!-- 一级菜单 -->
-    <ul class="mobile-menu-list flex flex-pack-justify" v-if='showMobileMenu'>
-      <li v-for='item in menu' :key='item.id'>
-        <router-link :to="item.path" :active='submenu.path === item.path' :title="item.name">
-          <i :class="'el-icon-'+item.icon"></i>
-          {{item.name}}
+    <ul class="mobile-menu-list flex flex-pack-justify" v-if="showMobileMenu">
+      <li v-for="item in menu" :key="item.id">
+        <router-link
+          :to="item.path"
+          :active="submenu.path === item.path"
+          :title="item.name"
+        >
+          <i :class="'el-icon-' + item.icon"></i>
+          {{ item.name }}
         </router-link>
       </li>
     </ul>
 
     <!-- 二级菜单 -->
-    <div class="layout-submenu-wrapper flex" v-if='submenu.children && submenu.children.length'>
+    <div
+      class="layout-submenu-wrapper flex"
+      v-if="submenu.children && submenu.children.length"
+    >
       <div class="layout-submenu">
         <ul class="submenu-list flex">
-          <li v-for='item in submenu.children' :key='item.id'>
-          
-            <a :href="item.path" target="blank" v-if='item.isOut'>{{item.name}}</a>
-            <router-link :to="item.path" :active='group === item.path' v-else>{{item.name}}</router-link>
+          <li v-for="item in submenu.children" :key="item.id">
+            <a :href="item.path" target="blank" v-if="item.isOut">{{
+              item.name
+            }}</a>
+            <router-link :to="item.path" :active="group === item.path" v-else>{{
+              item.name
+            }}</router-link>
           </li>
         </ul>
       </div>
@@ -73,27 +95,30 @@ export default {
   name: "Header",
   methods: {
     handleCommand(key) {
-      if(key === 'update'){
-        this.$router.push('/login/updatePwd')
+      if (key === "update") {
+        this.$router.push("/login/updatePwd");
       }
-      if(key === 'logout'){
-        this.logout()
+      if (key === "logout") {
+        this.logout();
       }
     },
     // 退出登录
     logout() {
-      this.$post('/login/logout').then(data=>{}).catch(error=>{}).then(()=>{
-        this.$message.success('已退出登录');
-        this.$store.commit('logout');
-        this.$router.replace('/login');
-      })
-    }
+      this.$post("/login/logout")
+        .then((data) => {})
+        .catch((error) => {})
+        .then(() => {
+          this.$message.success("已退出登录");
+          this.$store.commit("logout");
+          this.$router.replace("/login");
+        });
+    },
   },
   beforeDestroy() {
     console.log("beforeDestroy");
     //window.removeEventListener("message", this.getsocketData, false);
   },
-    mounted() {
+  mounted() {
     // console.log("mounted");
     // this.$nextTick(function () {
     //   console.log("login websocket:"+"ws://"+process.env.VUE_APP_WEBSOCKET_API +"/ws?accessToken="+ this.$store.state.userData.id)
@@ -104,12 +129,10 @@ export default {
     //       this.$store.state.userData.id
     //   );
     // });
-
     //    let _this = this;
     // const getsocketData = (e) => {i
     //   // 创建接收消息函数
     //   const data = e && e.detail.data;
-
     //   let obj = JSON.parse(data);
     //   if (obj.type == "SEND_TO_ALL_REQUEST") {
     //     vm.refreshData();
@@ -120,146 +143,160 @@ export default {
     //       type: "warning",
     //       duration: 8000,
     //     });
-
     //   }
     // };
-
     // this.getsocketData = getsocketData;
     // // 注册监听事件
     // window.addEventListener("onmessageWS", getsocketData,false);
-
-    },
+  },
   computed: {
+    activeMenu() {
+      return this.$route.path;
+    },
     group() {
       const relativeGroup = this.$store.state.group;
-      if(relativeGroup) {
+      if (relativeGroup) {
         return relativeGroup;
       }
-      let groupArray = this.$route.path.split('/');
+      let groupArray = this.$route.path.split("/");
       let group = this.$route.path;
       let type = groupArray.pop();
-      if(['add', 'edit', 'view', 'new','importView','resetPwdView'].indexOf(type) > -1){
-        groupArray.push('list');
-        group = groupArray.join('/')
+      if (
+        ["add", "edit", "view", "new", "importView", "resetPwdView"].indexOf(
+          type
+        ) > -1
+      ) {
+        groupArray.push("list");
+        group = groupArray.join("/");
       }
       return group;
     },
     relativeGroup() {
-      return this.$store.state.group
+      return this.$store.state.group;
     },
     flat() {
-      return this.userData.flat
+      return this.userData.flat;
     },
     menu() {
-      if(!this.userData.barList) return [];
-      return this.userData.barList.map(item=>{
-        const url = item.url ? item.url : (item.childList[0] ? (item.childList[0].url || '') : '');
+      if (!this.userData.barList) return [];
+      return this.userData.barList.map((item) => {
+        const url = item.url
+          ? item.url
+          : item.childList[0]
+          ? item.childList[0].url || ""
+          : "";
         return {
           name: item.name,
           path: url,
           id: item.id,
           icon: item.imgPath,
-          children: item.childList.map(sub=>{
+          children: item.childList.map((sub) => {
             return {
               name: sub.name,
-              path: sub.url ? sub.url : (sub.childList[0] ? (sub.childList[0].url || 0) : ''),
+              path: sub.url
+                ? sub.url
+                : sub.childList[0]
+                ? sub.childList[0].url || 0
+                : "",
               id: sub.id,
               parentId: sub.parentId,
               icon: sub.imgPath,
-              isOut: /^https?\:\/\//.test(sub.url)
-            }
-          })
-        }
-      })
+              isOut: /^https?\:\/\//.test(sub.url),
+            };
+          }),
+        };
+      });
     },
     submenu() {
-      if(!this.menu.length) return {};
+      if (!this.menu.length) return {};
       let matchMenu = {};
-      this.menu.forEach(item=>{
+      this.menu.forEach((item) => {
         const menu = item;
-        item.children.forEach(item=>{
-          if(item.path === this.group) {
+        item.children.forEach((item) => {
+          if (item.path === this.group) {
             matchMenu = menu;
             return;
           }
-        })
-      })
-      return matchMenu
+        });
+      });
+      return matchMenu;
     },
     userData() {
       return this.$store.state.userData;
-    }
+    },
   },
   data() {
     return {
       showMobileMenu: false,
-    }
-  }
-}
+    };
+  },
+};
 </script>
 
 <style lang="less">
-.layout-header{
-  .mobile-menu-list{display: none}
-  .layout-menu-wrapper{
-    height: 50px;
-    line-height: 50px;
+.layout-header {
+  .mobile-menu-list {
+    display: none;
+  }
+  .layout-menu-wrapper {
+    height: 66px;
+    line-height: 66px;
     font-size: 14px;
     color: #eee;
-    background: #1848c8;
-    .layout-logo{
-     
+    background: #2681e8;
+    .layout-logo {
       height: 50px;
-      .el-icon-menu{display: none}
-      a{
+      .el-icon-menu {
+        display: none;
+      }
+      a {
         margin: auto;
       }
-      img{
+      img {
         vertical-align: middle;
       }
     }
-    
-    .menu-list{
-      li{
-        a{
+
+    .menu-list {
+      li {
+        a {
           display: block;
           padding: 0 12px;
           height: 100%;
-          color: #eee;
+          color: #c7e1ff;
           &.router-link-active,
-          &[active]{
+          &[active] {
             //background: #1890ff;
             color: #fff;
-            list-style-type:none;
-            border-bottom:3px solid #fff;
+            list-style-type: none;
+            border-bottom: 3px solid #fff;
             padding-bottom: 2px;
           }
         }
       }
-      
     }
-    .layout-profile{
+    .layout-profile {
       padding-right: 30px;
     }
   }
 
-  .layout-submenu-wrapper{
+  .layout-submenu-wrapper {
     padding-left: 20px;
     background: #fff;
     height: 42px;
     border-bottom: 1px solid #ededed;
-    .layout-title{
+    .layout-title {
       font-size: 18px;
       height: 40px;
       line-height: 40px;
       color: #333;
     }
-    .layout-submenu{
+    .layout-submenu {
       margin-left: 15px;
       white-space: nowrap;
       overflow: auto;
-      li{
-        a{
+      li {
+        a {
           display: block;
           padding: 0 10px;
           height: 40px;
@@ -267,7 +304,7 @@ export default {
           font-size: 14px;
           color: #666;
           &.router-link-active,
-          &[active]{
+          &[active] {
             color: #1890ff;
             border-bottom: 2px solid #1890ff;
           }
@@ -277,48 +314,48 @@ export default {
   }
 }
 
-@media screen and (max-width: 800px){
+@media screen and (max-width: 800px) {
   .layout-header {
-    .mobile-menu-list{
+    .mobile-menu-list {
       display: flex;
       background: #222333;
       padding: 0 10px;
-      li{
+      li {
         padding: 8px 5px;
-        a{
+        a {
           width: 1em;
           display: block;
           color: #eee;
           font-size: 14px;
           word-break: break-all;
           &.router-link-active,
-          &[active]{
+          &[active] {
             color: #1890ff;
           }
         }
       }
     }
-    .layout-submenu-wrapper{
+    .layout-submenu-wrapper {
       padding-left: 0;
       overflow: auto;
       -webkit-overflow-scrolling: touch;
     }
     .layout-menu-wrapper {
       width: 100%;
-      .layout-logo{
+      .layout-logo {
         width: 40px;
-        .el-icon-menu{
+        .el-icon-menu {
           margin: auto;
           display: inline-block;
         }
-        a{
+        a {
           display: none;
         }
       }
-      .menu-list{
+      .menu-list {
         display: none;
       }
-      li{
+      li {
         width: 100%;
       }
     }

device-manager-ui/admin/src/components/MapDetail.vue

@@ -2,7 +2,6 @@
 
 <template>
   <div class="my-map">
-    
     <el-amap
       ref="map"
       vid="amapDetail"
@@ -18,10 +17,10 @@
     >
       <div class="tuli1"><slot name="leftTop1"></slot></div>
       <div class="tuli"><slot name="leftTop"></slot></div>
-       
-    <div class="rightTop"><slot name="rightTop"></slot></div>
 
-  <!--marker  -->
+      <div class="rightTop"><slot name="rightTop"></slot></div>
+
+      <!--marker  -->
       <el-amap-marker
         v-for="(marker, index) in markers"
         :key="'marker' + index"
@@ -32,8 +31,6 @@
         :extData="marker"
       >
       </el-amap-marker>
-
- 
     </el-amap>
   </div>
 </template>
@@ -73,10 +70,12 @@ export default {
   },
   methods: {
     formatterDate,
-    contentRender(h, params){
+    contentRender(h, params) {
       //console.log(params.extData.extData.productId)
-      let value="el-icon-location-information location"+params.extData.extData.productId
-      return (<i class={value} />)
+      let value =
+        "el-icon-location-information location" +
+        params.extData.extData.productId;
+      return <i class={value} />;
     },
     getDeviceDetial() {
       //获取设备列表
@@ -86,15 +85,14 @@ export default {
       console.log("刷新数据", data);
       // this.markersGroupData = data;
       //this.$refs.map.clear();
-       let map = this.amapManager.getMap()
-       map.clearMap()
-
-      for(let group of data){
-          for(let item of group.deviceList){
-                //console.log("marker", item);
-                this.setMarker(item);
-          }
-
+      let map = this.amapManager.getMap();
+      map.clearMap();
+
+      for (let group of data) {
+        for (let item of group.deviceList) {
+          //console.log("marker", item);
+          this.setMarker(item);
+        }
       }
     },
 
@@ -116,14 +114,13 @@ export default {
         events: {
           click: (e) => {
             console.log("getExtData", e.target.getExtData());
-     
           },
         },
       };
 
       this.markers.push(markerLabel);
     },
-    
+
     choose() {
       this.$emit("input", false);
       this.$emit("choose", JSON.parse(JSON.stringify(this.mapData)), (val) => {
@@ -135,7 +132,7 @@ export default {
   },
   data() {
     return {
-      markersGroupData:[],
+      markersGroupData: [],
       mapData: {},
       info: {},
       markers: [],
@@ -170,9 +167,9 @@ export default {
 }
 .rightTop {
   width: 200px;
-   top: 0px;
-   right:0px;
- 
+  top: 0px;
+  right: 0px;
+
   position: absolute;
   float: right;
   background-color: rgba(255, 255, 255, 1);
@@ -184,11 +181,12 @@ export default {
   overflow: auto;
 }
 .my-map {
+  width: 100%;
+  height: 100vh;
   .amap-demo {
     position: relative;
     width: 100%;
-    min-height: 650px;
-
+    height: 100%;
     .map-marker {
       position: relative;
       width: 30px;

device-manager-ui/admin/src/main.js

@@ -21,6 +21,12 @@ Vue.use(Filter);
 Vue.use(GlobalComponents); // 全局组件
 Vue.use(VueClipboard)
 Vue.use(VueAMap)
+// 引入iconfont
+import './assets/fonts/iconfont.css'
+// moment 时间处理
+import moment from 'moment';
+Vue.prototype.$moment = moment;
+
 VueAMap.initAMapApiLoader({
   key: 'f45cca59553214543a5a77e50a7e04df',
   plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder'],

device-manager-ui/admin/src/router.js

@@ -39,25 +39,18 @@ const router = new Router({
                 ...restBuilder('param', 'system/param'), // 系统管理--参数管理
                 ...restBuilder('task', 'system/task'), // 系统管理--任务管理
                 builder('site/list', 'system/site/index'),//站点
-
-
                 ...restBuilder('sitestat', 'sitestat'),//站点设备管理
                 builder('sitestat/maplist', 'sitestat/maplist'),//地图站点
-
                 builder('sitestat/mapDetail', 'sitestat/mapDetail'),//地图设备
                 ...restBuilder('platform', 'platform'),//平台
                 ...restBuilder('product', 'product'),//产品
                 ...restBuilder('device', 'device'),//设备
-
                 ...restBuilder('device/alarm/info', 'device/alarm/info'),//设备告警信息
                 ...restBuilder('device/module', 'device/module'),//设备模块使用率
                 ...restBuilder('device/module/use', 'device/module/use'),//设备模块使用率
                 ...restBuilder('device/module/distribute', 'device/module/distribute'),//设备前端模块部署
-
-                ...restBuilder('device/log', 'device/log'),//
-
+                ...restBuilder('device/log', 'device/log'),
                 ...restBuilder('firm', 'firm'),//
-
                 ...restBuilder('alarm/config', 'alarm/config'),//设备告警配置
                 ...restBuilder('alarm/sms/send', 'alarm/sms/send'),//设备告警短信
 

device-manager-ui/admin/src/views/Home.vue

@@ -7,11 +7,15 @@
         justify="end"
         :gutter="10"
       >
-        <el-button type="text" size="mini"
-          >数据更新:{{ formatterDate(statData.updateTime) }} 2分钟后自动更新</el-button
+        <el-button type="text" size="mini" style="color: #fff"
+          >数据更新:{{
+            formatterDate(statData.updateTime)
+          }}
+          2分钟后自动更新</el-button
         >
         <el-button
           icon="el-icon-refresh"
+          style="color: #fff"
           size="mini"
           @click="syncDeviceStat"
           type="text"
@@ -19,8 +23,161 @@
         >
       </el-row>
 
-      <el-card style="margin-left: 50px; margin-right: 50px; margin-top: 10px">
-        <el-row
+      <el-card
+        style="
+          margin-left: 50px;
+          margin-right: 50px;
+          margin-top: 10px;
+          height: 160px;
+        "
+      >
+        <div class="total-list">
+          <!-- 设备总数 -->
+          <div class="total-item">
+            <p class="total-item-count">{{ statData.deviceTotalCount }}</p>
+            <span style="font-size: 12px"
+              ><span style="color: #2681e8">昨日 </span
+              ><span
+                :class="{
+                  success: statData.deviceAddCount >= 0,
+                  warn: statData.deviceAddCount < 0,
+                }"
+                >{{
+                  statData.deviceAddCount >= 0
+                    ? "+" + statData.deviceAddCount
+                    : "-" + statData.deviceAddCount
+                }}</span
+              ></span
+            >
+            <p class="total-item-title">
+              <img src="../assets/images/abzs.png" alt="" />
+              <span>设备总数</span>
+            </p>
+          </div>
+          <!-- 监控站点数 -->
+          <div class="total-item">
+            <p class="total-item-count">{{ statData.siteTotalCount }}</p>
+            <span style="font-size: 12px"
+              ><span style="color: #2681e8">昨日 </span
+              ><span
+                :class="{
+                  success: statData.siteAddCount >= 0,
+                  warn: statData.siteAddCount < 0,
+                }"
+                >{{
+                  statData.siteAddCount >= 0
+                    ? "+" + statData.siteAddCount
+                    : "-" + statData.siteAddCount
+                }}</span
+              ></span
+            >
+            <p class="total-item-title">
+              <img src="../assets/images/jczds.png" alt="" />
+              <span>监控站点数</span>
+            </p>
+          </div>
+          <!-- 在线设备 -->
+          <div class="total-item">
+            <p class="total-item-count">{{ statData.deviceOnlineCount }}</p>
+            <span style="font-size: 12px"
+              ><span style="color: #6182f6">上线率 </span
+              ><span v-bind:class="{ success: statData.deviceOnlineRatio >= 0 }"
+                >{{ statData.deviceOnlineRatio * 100 }}%</span
+              ></span
+            >
+            <p class="total-item-title">
+              <img src="../assets/images/zxsb.png" alt="" />
+              <span>在线设备</span>
+            </p>
+          </div>
+          <!-- 离线率 -->
+          <div class="total-item">
+            <p class="total-item-count">{{ statData.deviceOfflineCount }}</p>
+            <span style="font-size: 12px"
+              ><span style="color: #6182f6">离线率 </span
+              ><span v-bind:class="{ warn: statData.deviceOfflineRatio >= 0 }"
+                >{{ statData.deviceOfflineRatio * 100 }}%</span
+              ></span
+            >
+            <p class="total-item-title">
+              <img src="../assets/images/lxsb.png" alt="" />
+              <span>离线设备</span>
+            </p>
+          </div>
+          <!-- 停用设备 -->
+          <div class="total-item">
+            <p class="total-item-count">{{ statData.deviceStopRatio }}</p>
+            <span style="font-size: 12px"
+              ><span style="color: #6182f6">停用率 </span
+              ><span v-bind:class="{ warn: statData.deviceStopRatio >= 0 }"
+                >{{ statData.deviceStopRatio * 100 }}%</span
+              ></span
+            >
+            <p class="total-item-title">
+              <img src="../assets/images/tusb.png" alt="" />
+              <span>停用设备</span>
+            </p>
+          </div>
+          <!-- 未激活设备 -->
+          <div class="total-item">
+            <p class="total-item-count">{{ statData.deviceStopRatio }}</p>
+            <span style="font-size: 12px"
+              ><span style="color: #6182f6">未激活率 </span
+              ><span v-bind:class="{ warn: statData.deviceStopRatio >= 0 }"
+                >{{ statData.deviceStopRatio * 100 }}%</span
+              ></span
+            >
+            <p class="total-item-title">
+              <img src="../assets/images/wjhsb.png" alt="" />
+              <span>未激活设备</span>
+            </p>
+          </div>
+          <!-- 今日警告次数 -->
+          <div class="total-item">
+            <p class="total-item-count">{{ statData.alarmTotalCount }}</p>
+            <span style="font-size: 12px"
+              ><span style="color: #6182f6">昨日 </span
+              ><span
+                v-bind:class="{
+                  success: statData.alarmAddCount >= 0,
+                  warn: statData.alarmAddCount < 0,
+                }"
+                >{{
+                  statData.alarmAddCount >= 0
+                    ? "+" + statData.alarmAddCount
+                    : "-" + statData.alarmAddCount
+                }}</span
+              ></span
+            >
+            <p class="total-item-title">
+              <img src="../assets/images/gjcs.png" alt="" />
+              <span>今日告警次数</span>
+            </p>
+          </div>
+          <!-- 今日消息推送 -->
+          <div class="total-item">
+            <p class="total-item-count">{{ statData.pushTotalCount }}</p>
+            <span style="font-size: 12px"
+              ><span style="color: #6182f6">昨日 </span
+              ><span
+                v-bind:class="{
+                  success: statData.pushAddCount >= 0,
+                  warn: statData.pushAddCount < 0,
+                }"
+                >{{
+                  statData.pushAddCount >= 0
+                    ? "+" + statData.pushAddCount
+                    : "-" + statData.pushAddCount
+                }}</span
+              ></span
+            >
+            <p class="total-item-title">
+              <img src="../assets/images/xits.png" alt="" />
+              <span>今日消息推送次数</span>
+            </p>
+          </div>
+        </div>
+        <!-- <el-row
           :gutter="20"
           style="height: 80px; align-items: center; margin-top: 10px"
         >
@@ -203,7 +360,7 @@
               <i class="el-icon-data-board customIcon"> 数据获取</i>
             </el-row>
           </el-col>
-        </el-row>
+        </el-row> -->
       </el-card>
     </el-row>
 
@@ -212,13 +369,25 @@
       :gutter="20"
     >
       <el-col :span="12">
+        <!-- 设备总量 -->
         <el-card class="box-card">
           <div id="deviceTotal" style="width: 100%; height: 300px"></div>
+          <!-- 天数选择 -->
+          <el-select class="change-day" size="mini" placeholder="请选择">
+            <el-option label="近15天" :value="day15"> </el-option>
+            <el-option label="近30天" :value="day30"> </el-option>
+          </el-select>
         </el-card>
       </el-col>
       <el-col :span="12">
+        <!-- 设备状态 -->
         <el-card class="box-card">
           <div id="deviceStat" style="width: 100%; height: 300px"></div>
+          <!-- 天数选择 -->
+          <el-select class="change-day" size="mini" placeholder="请选择">
+            <el-option label="近15天" :value="day15"> </el-option>
+            <el-option label="近30天" :value="day30"> </el-option>
+          </el-select>
         </el-card>
       </el-col>
     </el-row>
@@ -228,13 +397,26 @@
       :gutter="20"
     >
       <el-col :span="12">
-        <el-card class="box-card">
-          <div id="deviceAlarm" style="width: 100%; height: 300px"></div>
+        <!-- 设备告警 -->
+        <el-card class="box-card device-alarm">
+          <div id="deviceAlarm" style="width: 70%; height: 300px"></div>
+          <div id="PieEcharts" style="width: 30%; height: 300px"></div>
+          <!-- 天数选择 -->
+          <el-select class="change-day" size="mini" placeholder="请选择">
+            <el-option label="近15天" :value="day15"> </el-option>
+            <el-option label="近30天" :value="day30"> </el-option>
+          </el-select>
         </el-card>
       </el-col>
       <el-col :span="12">
+        <!-- 设备消息推送 -->
         <el-card class="box-card">
           <div id="devicePush" style="width: 100%; height: 300px"></div>
+          <!-- 天数选择 -->
+          <el-select class="change-day" size="mini" placeholder="请选择">
+            <el-option label="近15天" :value="day15"> </el-option>
+            <el-option label="近30天" :value="day30"> </el-option>
+          </el-select>
         </el-card>
       </el-col>
     </el-row>
@@ -247,12 +429,22 @@ export default {
     userData() {
       return this.$store.state.userData.currUserName;
     },
+    // 近15天时间
+    day15() {
+      return this.$moment().add(-15, "d").format("YYYY-MM-DD HH:mm:ss");
+    },
+    // 近30天时间
+    day30() {
+      return this.$moment().add(-30, "d").format("YYYY-MM-DD HH:mm:ss");
+    },
   },
   mounted() {
     this.timer = setInterval(this.syncDeviceStat, 1000 * 120);
   },
   beforeDestroy() {
     clearInterval(this.timer);
+    // 解绑window事件
+    window.removeEventListener("resize", this.adapterEcharts);
   },
   created() {
     let today = new Date();
@@ -286,9 +478,18 @@ export default {
     this.findDevicePush(beforeday);
   },
   methods: {
+    // echarts 适配函数
+    adapterEcharts() {
+      this.deviceTotalChart.resize();
+      this.deviceStatChart.resize();
+      this.alarmChart.resize();
+      this.pieChart.resize();
+      this.pushChart.resize();
+    },
     syncDeviceStat() {
       this.$post("/device/stat/syncDeviceStat", {})
         .then((res) => {
+          console.log(res.data);
           if (res.code == 1) {
             this.statData = res.data.data[0];
           } else {
@@ -302,6 +503,7 @@ export default {
 
     findDeviceTotalStat(beforeday) {
       let query = { createTimeStart: this.formatterDate(beforeday) };
+      console.log(query);
       this.$post("/device/stat/list", query)
         .then((res) => {
           if (res.code == 1) {
@@ -377,6 +579,7 @@ export default {
 
             this.$nextTick(() => {
               this.deviceAlarmEcharts();
+              this.devicePieEcharts();
             });
           }
           this.loading = false;
@@ -444,19 +647,25 @@ export default {
     panLeft(num) {
       return num < 10 ? "0" + num : num;
     },
+    // 设备数据图
     myEcharts() {
       // 基于准备好的dom，初始化echarts实例
-      var deviceTotalChart = this.$echarts.init(
+      this.deviceTotalChart = this.$echarts.init(
         document.getElementById("deviceTotal")
       );
       let option = {
         title: {
           text: "设备数据",
+          top: "40px",
           subtext: "",
-          x: "center",
         },
+        // 图例提示框
         tooltip: {
           trigger: "axis",
+          backgroundColor: "#fff",
+          textStyle: {
+            color: "#000",
+          },
           axisPointer: {
             type: "cross",
             label: {
@@ -465,31 +674,61 @@ export default {
           },
         },
 
+        grid: {
+          top: "30%",
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
         legend: {
           orient: "horizontal",
-          x: "left",
+          top: "40px",
+          left: "98",
           y: "top",
+          itemWidth: 14,
           data: ["设备总量", "在线趋势"],
+          icon: "roundRect",
         },
         xAxis: {
-          name: "天",
           type: "category",
           data: this.beforeday,
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
         },
         yAxis: [
           {
-            name: "设备总量",
             type: "value",
-            // min: 0, // 配置 Y 轴刻度最小值
-            max: 400, // 配置 Y 轴刻度最大值
-            // splitNumber: 7, // 配置 Y 轴数值间隔
+            min: 0, // 配置 Y 轴刻度最小值
+            max: 500, // 配置 Y 轴刻度最大值
+            // interval: 50,
+            splitNumber: 5, // 配置 Y 轴数值间隔
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
           },
           {
-            name: "在线率",
             type: "value",
-            // min: 0, // 配置 Y 轴刻度最小值
+            min: 0, // 配置 Y 轴刻度最小值
             max: 1, // 配置 Y 轴刻度最大值
-            //splitNumber: 7, // 配置 Y 轴数值间隔
+            // interval: 5,
+            splitNumber: 5, // 配置 Y 轴数值间隔
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              formatter: "{value} %",
+            },
           },
         ],
 
@@ -509,24 +748,31 @@ export default {
             type: "line",
           },
         ],
-        color: ["#3366CC", "#008000"],
+        color: ["#2984D8", "#3FCA97"],
       };
 
       // 使用刚指定的配置项和数据显示图表。
-      deviceTotalChart.setOption(option);
+      this.deviceTotalChart.setOption(option);
+      // 适配
+      window.addEventListener("resize", this.adapterEcharts);
     },
-
+    // 设备状态图
     deviceStatEcharts() {
-      var deviceStatChart = this.$echarts.init(
+      this.deviceStatChart = this.$echarts.init(
         document.getElementById("deviceStat")
       );
 
       let deviceStatOption = {
         title: {
           text: "设备状态",
+          top: "40px",
         },
         tooltip: {
           trigger: "axis",
+          backgroundColor: "#fff",
+          textStyle: {
+            color: "#000",
+          },
           axisPointer: {
             type: "cross",
             label: {
@@ -535,10 +781,15 @@ export default {
           },
         },
         legend: {
+          top: "40px",
+          left: "98",
+          itemWidth: 14,
           data: ["在线率", "离线率"],
+          icon: "roundRect",
         },
 
         grid: {
+          top: "30%",
           left: "3%",
           right: "4%",
           bottom: "3%",
@@ -549,12 +800,24 @@ export default {
             type: "category",
             boundaryGap: false,
             data: this.beforeDeviceStatday,
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
           },
         ],
         yAxis: [
           {
             type: "value",
-              max: 1,
+            max: 1,
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
           },
         ],
         series: [
@@ -567,18 +830,10 @@ export default {
               width: 0,
             },
             showSymbol: false,
+            color: "#2984D8",
             areaStyle: {
               opacity: 0.8,
-              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: "rgb(128, 255, 165)",
-                },
-                {
-                  offset: 1,
-                  color: "rgb(1, 191, 236)",
-                },
-              ]),
+              color: "#ACD1FB",
             },
             emphasis: {
               focus: "series",
@@ -590,22 +845,14 @@ export default {
             type: "line",
             stack: "offline",
             smooth: true,
+            color: "#FA2C2E",
             lineStyle: {
               width: 0,
-              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: "rgb(255,99,71)",
-                },
-                {
-                  offset: 1,
-                  color: "rgb(255, 0, 0)",
-                },
-              ]),
             },
             showSymbol: false,
             areaStyle: {
               opacity: 0.8,
+              color: "#CE8BA4",
             },
             emphasis: {
               focus: "series",
@@ -615,18 +862,27 @@ export default {
         ],
       };
 
-      deviceStatChart.setOption(deviceStatOption);
+      this.deviceStatChart.setOption(deviceStatOption);
+      // 适配
+      window.addEventListener("resize", this.adapterEcharts);
     },
-
+    // 告警趋势图
     deviceAlarmEcharts() {
-      var chart = this.$echarts.init(document.getElementById("deviceAlarm"));
+      this.alarmChart = this.$echarts.init(
+        document.getElementById("deviceAlarm")
+      );
 
       let option = {
         title: {
           text: "设备告警趋势",
+          top: "40px",
         },
         tooltip: {
           trigger: "axis",
+          backgroundColor: "#fff",
+          textStyle: {
+            color: "#000",
+          },
           axisPointer: {
             type: "cross",
             label: {
@@ -635,9 +891,15 @@ export default {
           },
         },
         legend: {
+          itemWidth: 14,
+          top: "40px",
+
+          left: "120",
           data: ["告警次数"],
+          icon: "roundRect",
         },
         grid: {
+          top: "30%",
           left: "3%",
           right: "4%",
           bottom: "3%",
@@ -648,11 +910,23 @@ export default {
             type: "category",
             boundaryGap: false,
             data: this.beforeDeviceAlarmday,
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
           },
         ],
         yAxis: [
           {
             type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
           },
         ],
         series: [
@@ -661,22 +935,14 @@ export default {
             type: "line",
             stack: "Total",
             smooth: true,
+            color: "#247EE4",
             lineStyle: {
               width: 0,
             },
             showSymbol: false,
             areaStyle: {
               opacity: 0.8,
-              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: "rgb(55, 162, 255)",
-                },
-                {
-                  offset: 1,
-                  color: "rgb(116, 21, 219)",
-                },
-              ]),
+              color: "#ACD1FB",
             },
             emphasis: {
               focus: "series",
@@ -685,18 +951,97 @@ export default {
           },
         ],
       };
-      chart.setOption(option);
+      this.alarmChart.setOption(option);
+      // 适配
+      window.addEventListener("resize", this.adapterEcharts);
     },
-
+    // 告警趋势饼图
+    devicePieEcharts() {
+      this.pieChart = this.$echarts.init(document.getElementById("PieEcharts"));
+      let option = {
+        tooltip: {
+          trigger: "item",
+          backgroundColor: "#fff",
+          textStyle: {
+            color: "#000",
+          },
+        },
+        legend: {
+          show: false,
+        },
+        series: [
+          {
+            type: "pie",
+            radius: ["35%", "50%"],
+            label: {
+              color: "#A3A0A4",
+              position: "outside",
+            },
+            top: "40",
+            labelLine: {
+              length: 10, // 指示线长度
+              length2: 5, // 指示线长度
+            },
+            data: [
+              {
+                value: 1048,
+                name: "离线",
+                itemStyle: {
+                  color: "#ACC8FD",
+                },
+              },
+              {
+                value: 735,
+                name: "缺纸",
+                itemStyle: {
+                  color: "#ADECD4",
+                },
+              },
+              {
+                value: 580,
+                name: "失效",
+                itemStyle: {
+                  color: "#667997",
+                },
+              },
+              {
+                value: 484,
+                name: "其他",
+                itemStyle: {
+                  color: "#FADD85",
+                },
+              },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      };
+      this.pieChart.setOption(option);
+      // 适配
+      window.addEventListener("resize", this.adapterEcharts);
+    },
+    // 消息推送图
     devicePushEcharts() {
-      var chart = this.$echarts.init(document.getElementById("devicePush"));
-
+      this.pushChart = this.$echarts.init(
+        document.getElementById("devicePush")
+      );
       let option = {
         title: {
           text: "设备消息推送趋势",
+          top: "40px",
         },
         tooltip: {
           trigger: "axis",
+          backgroundColor: "#fff",
+          textStyle: {
+            color: "#000",
+          },
           axisPointer: {
             type: "cross",
             label: {
@@ -705,9 +1050,14 @@ export default {
           },
         },
         legend: {
+          top: "40px",
+          itemWidth: 14,
+          left: "160",
           data: ["告警次数"],
+          icon: "roundRect",
         },
         grid: {
+          top: "30%",
           left: "3%",
           right: "4%",
           bottom: "3%",
@@ -717,11 +1067,23 @@ export default {
           {
             type: "category",
             data: this.beforeDevicePushday,
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
           },
         ],
         yAxis: [
           {
             type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
           },
         ],
         series: [
@@ -729,12 +1091,16 @@ export default {
             name: "告警次数",
             type: "line",
             smooth: true,
-
+            itemStyle: {
+              color: "#89AAF7",
+            },
             data: this.devicePushyData,
           },
         ],
       };
-      chart.setOption(option);
+      this.pushChart.setOption(option);
+      // 适配
+      window.addEventListener("resize", this.adapterEcharts);
     },
   },
   data() {
@@ -751,7 +1117,6 @@ export default {
       beforePushday: [],
       beforeAlarmday: [],
       deviceTotalyData: [],
-
       deviceOnlineyData: [],
       deviceStatOnlineyData: [],
       deviceStatOfflineyData: [],
@@ -768,23 +1133,69 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="less">
+/deep/.el-card__body {
+  width: 100%;
+  height: 100%;
+}
+.total-list {
+  width: inherit;
+  height: inherit;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  .total-item {
+    height: 90px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    .total-item-count {
+      font-size: 24px;
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      color: #333333;
+    }
+    .total-item-title {
+      display: flex;
+      align-items: center;
+      img {
+        width: 14px;
+        height: 14px;
+        margin-right: 4px;
+      }
+      span {
+        font-size: 14px;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        color: #8a8a8a;
+      }
+    }
+  }
+}
 .success {
   color: green;
 }
 .warn {
   color: rgb(215, 25, 25);
 }
-.customIcon {
-  font-size: 13px;
-  margin-top: 5px;
-  color: dodgerblue;
-}
 
 .homeIndex {
   display: inline-block;
   position: relative;
 }
+
+/deep/.el-card__body {
+  display: flex;
+  position: relative;
+}
+.change-day {
+  width: 120px !important;
+  position: absolute;
+  top: 40px;
+  right: 20px;
+  z-index: 100;
+}
 .homeIndex::before {
   content: "";
   position: absolute;
@@ -792,7 +1203,7 @@ export default {
   left: 0;
   width: 100%;
   height: 35%;
-  background: #1848c8;
+  background: #2681e8;
 }
 </style>
 

device-manager-ui/admin/src/views/alarm/config/dialogshow.vue

 <template>
-    <!-- 弹出框表单 -->
-    <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
-        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
-            <el-row>
-                                            <Field label="产品" prop="productId" v-model="form.productId" placeholder="请输入产品"/>
-                            <Field label="告警类型" prop="alarmType" v-model="form.alarmType" type="select" :enumData="dict.alarmType" placeholder="请选择告警类型"/>
-                            <Field label="告警级别," prop="alarmLevel" v-model="form.alarmLevel" type="select" :enumData="dict.alarmLevel" placeholder="请选择告警级别,"/>
-                            <Field label="推送方式," prop="alarmPusW1ay" v-model="form.alarmPusW1ay" type="select" :enumData="dict.alarmPusW1ay" placeholder="请选择推送方式,"/>
-                            <Field label="是否启用" prop="isUse" v-model="form.isUse" type="select" :enumData="dict.isUse" placeholder="请选择是否启用"/>
-
-            </el-row>
-
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-            <el-button type="primary" v-if="pageInfo.type !== 'view'" @click="submitForm">确 定</el-button>
-            <el-button @click="cancel">取 消</el-button>
-        </div>
-    </el-dialog>
+  <!-- 弹出框表单 -->
+  <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-row>
+        <Field
+          label="产品"
+          prop="productId"
+          v-model="form.productId"
+          placeholder="请输入产品"
+        />
+        <Field
+          label="告警类型"
+          prop="alarmType"
+          v-model="form.alarmType"
+          type="select"
+          :enumData="dict.alarmType"
+          placeholder="请选择告警类型"
+        />
+        <Field
+          label="告警级别,"
+          prop="alarmLevel"
+          v-model="form.alarmLevel"
+          type="select"
+          :enumData="dict.alarmLevel"
+          placeholder="请选择告警级别,"
+        />
+        <Field
+          label="推送方式,"
+          prop="alarmPusW1ay"
+          v-model="form.alarmPusW1ay"
+          type="select"
+          :enumData="dict.alarmPusW1ay"
+          placeholder="请选择推送方式,"
+        />
+        <Field
+          label="是否启用"
+          prop="isUse"
+          v-model="form.isUse"
+          type="select"
+          :enumData="dict.isUse"
+          placeholder="请选择是否启用"
+        />
+      </el-row>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button
+        type="primary"
+        v-if="pageInfo.type !== 'view'"
+        @click="submitForm"
+        >确 定</el-button
+      >
+      <el-button @click="cancel">取 消</el-button>
+    </div>
+  </el-dialog>
 </template>
 
 <script>
-    import form from "@/assets/mixins/formdialog";
-    import dialogShow from "./dialogshow";
-    export default {
-        mixins: [form],
-        components: {
-            dialogShow ,
-        },
-        data() {
-            return {
-                // 遮罩层
-                loading: true,
-                // 弹出层标题
-                title: "设备告警配置",
-                // 是否显示弹出层
-                open: false,
-                toString:[
-                    "alarmType",
-                    "alarmLevel",
-                    "alarmPusW1ay",
-                    "isUse",
-                ],
-                // 表单校验
-                rules: {
-                    alarmType: [
-                        {required: true,message: "请输入告警类型", trigger: "blur" },
-                    ],
-                    alarmLevel: [
-                        {required: true,message: "请输入告警级别,", trigger: "blur" },
-                    ],
-                    alarmPusW1ay: [
-                        {required: true,message: "请输入推送方式,", trigger: "blur" },
-                    ],
-                    isUse: [
-                        {required: true,message: "请输入是否启用", trigger: "blur" },
-                    ],
-                    createTime: [
-                        {required: true,message: "请选择创建时间" },
-                    ],
-                }
-            };
-        },
+import form from "@/assets/mixins/formdialog";
+import dialogShow from "./dialogshow";
+export default {
+  mixins: [form],
+  components: {
+    dialogShow,
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 弹出层标题
+      title: "设备告警配置",
+      // 是否显示弹出层
+      open: false,
+      toString: ["alarmType", "alarmLevel", "alarmPusW1ay", "isUse"],
+      // 表单校验
+      rules: {
+        alarmType: [
+          { required: true, message: "请输入告警类型", trigger: "blur" },
+        ],
+        alarmLevel: [
+          { required: true, message: "请输入告警级别,", trigger: "blur" },
+        ],
+        alarmPusW1ay: [
+          { required: true, message: "请输入推送方式,", trigger: "blur" },
+        ],
+        isUse: [{ required: true, message: "请输入是否启用", trigger: "blur" }],
+        createTime: [{ required: true, message: "请选择创建时间" }],
+      },
+    };
+  },
 
-        methods: {
-            /** 编辑 */
-            edit(row) {
-                this.reset()
-                this.query = { id: row.id };
-                this.urls.currUrl =this.pageInfo.editUrl;;
-                this.getData();
-                this.pageInfo.type="edit"
-                this.title = "修改设备告警配置";
-            },
-            /** 新增 */
-            add(row) {
-                this.reset()
-                this.query = { id: row.id };
-                this.urls.currUrl = this.pageInfo.addUrl;
-                this.getData();
-                this.pageInfo.type="add"
-                this.title = "新增设备告警配置";
-            },
-            /** 查看*/
-            view(row) {
-                this.reset()
-                this.query = { id: row.id };
-                this.urls.currUrl =this.pageInfo.viewUrl;;
-                this.getData();
-                this.pageInfo.type="view"
-                this.title = "设备告警配置详细";
-            },
-            /**取消按钮 */
-            cancel() {
-                this.open = false;
-            },
-            /**获取数据后弹框 */
-            afterRender(data) {
-                this.open = true;
-            },
+  methods: {
+    /** 编辑 */
+    edit(row) {
+      this.reset();
+      this.query = { id: row.id };
+      this.urls.currUrl = this.pageInfo.editUrl;
+      this.getData();
+      this.pageInfo.type = "edit";
+      this.title = "修改设备告警配置";
+    },
+    /** 新增 */
+    add(row) {
+      this.reset();
+      this.query = { id: row.id };
+      this.urls.currUrl = this.pageInfo.addUrl;
+      this.getData();
+      this.pageInfo.type = "add";
+      this.title = "新增设备告警配置";
+    },
+    /** 查看*/
+    view(row) {
+      this.reset();
+      this.query = { id: row.id };
+      this.urls.currUrl = this.pageInfo.viewUrl;
+      this.getData();
+      this.pageInfo.type = "view";
+      this.title = "设备告警配置详细";
+    },
+    /**取消按钮 */
+    cancel() {
+      this.open = false;
+    },
+    /**获取数据后弹框 */
+    afterRender(data) {
+      this.open = true;
+    },
 
-            afterSubmit(data) {
-                this.open = false;
-                this.$emit("ok");
-            },
+    afterSubmit(data) {
+      this.open = false;
+      this.$emit("ok");
+    },
 
-            // 表单重置
-            reset() {
-                this.form = {
-                    productId : null,
-                    alarmType : 0,
-                    alarmLevel : null,
-                    alarmPusW1ay : 0,
-                    isUse : null,
-                };
-                this.resetForm("form");
-            },
-            resetForm(refName) {
-                if (this.$refs[refName]) {
-                    this.$refs[refName].resetFields();
-                }
-            },
-        },
-    };
+    // 表单重置
+    reset() {
+      this.form = {
+        productId: null,
+        alarmType: 0,
+        alarmLevel: null,
+        alarmPusW1ay: 0,
+        isUse: null,
+      };
+      this.resetForm("form");
+    },
+    resetForm(refName) {
+      if (this.$refs[refName]) {
+        this.$refs[refName].resetFields();
+      }
+    },
+  },
+};
 </script>

device-manager-ui/admin/src/views/alarm/config/drawershow.vue

 <template>
-    <!-- 弹出框表单 -->
-       <el-drawer
+  <!-- 弹出框表单 -->
+  <el-drawer
     :title="title"
     :visible.sync="open"
     :direction="direction"
     size="40%"
   >
-        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
-            <el-row>
-                            <Field :span="22" label="产品类型" prop="productId"  type="select" v-model="form.productId" :enumData="dict.productId" placeholder="请输入产品"/>
-                            <Field :span="22" label="告警类型" prop="alarmType" v-model="form.alarmType" type="select" :enumData="dict.alarmType" placeholder="请选择告警类型"/>
-                            <Field :span="22" label="告警级别" prop="alarmLevel" v-model="form.alarmLevel" type="select" :enumData="dict.alarmLevel" placeholder="请选择告警级别,"/>
-                            <Field :span="22" label="推送方式" prop="alarmPusW1ay" v-model="form.alarmPusW1ay" type="select" :enumData="dict.alarmPusW1ay" placeholder="请选择推送方式,"/>
-                            <Field :span="22" label="备注" prop="remark" v-model="form.remark" type="textarea" placeholder="请输入备注"/>
-                            <Field :span="22" label="是否启用" prop="enabled" v-model="form.enabled" type="radio" :enumData="dict.enabled" placeholder="请选择是否启用"/>
-
-            </el-row>
- <form-buttons @submit='submitForm' noCancelBtn />
-        </el-form>
-   
-       </el-drawer>
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-row>
+        <Field
+          :span="22"
+          label="产品类型"
+          prop="productId"
+          type="select"
+          v-model="form.productId"
+          :enumData="dict.productId"
+          placeholder="请输入产品"
+        />
+        <Field
+          :span="22"
+          label="告警类型"
+          prop="alarmType"
+          v-model="form.alarmType"
+          type="select"
+          :enumData="dict.alarmType"
+          placeholder="请选择告警类型"
+        />
+        <Field
+          :span="22"
+          label="告警级别"
+          prop="alarmLevel"
+          v-model="form.alarmLevel"
+          type="select"
+          :enumData="dict.alarmLevel"
+          placeholder="请选择告警级别,"
+        />
+        <Field
+          :span="22"
+          label="推送方式"
+          prop="alarmPusW1ay"
+          v-model="form.alarmPusW1ay"
+          type="select"
+          :enumData="dict.alarmPusW1ay"
+          placeholder="请选择推送方式,"
+        />
+        <Field
+          :span="22"
+          label="备注"
+          prop="remark"
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请输入备注"
+        />
+        <Field
+          :span="22"
+          label="是否启用"
+          prop="enabled"
+          v-model="form.enabled"
+          type="radio"
+          :enumData="dict.enabled"
+          placeholder="请选择是否启用"
+        />
+      </el-row>
+      <form-buttons @submit="submitForm" noCancelBtn />
+    </el-form>
+  </el-drawer>
 </template>
 
 <script>
-    import form from "@/assets/mixins/formdialog";
-    import dialogShow from "./dialogshow";
-    export default {
-        mixins: [form],
-        components: {
-            dialogShow ,
-        },
-        data() {
-            return {
-                // 遮罩层
-                loading: true,
-                // 弹出层标题
-                title: "设备告警配置",
-                // 是否显示弹出层
-                open: false,
-                toString:[
-                    "productId",
-                    "alarmType",
-                    "alarmLevel",
-                    "alarmPusW1ay",
-                    "enabled",
-                ],
-                // 表单校验
-                rules: {
-                    productId: [
-                        {required: true,message: "请选择产品类型", trigger: "blur" },
-                    ],
-                    alarmType: [
-                        {required: true,message: "请输入告警类型", trigger: "blur" },
-                    ],
-                    alarmLevel: [
-                        {required: true,message: "请输入告警级别,", trigger: "blur" },
-                    ],
-                    alarmPusW1ay: [
-                        {required: true,message: "请输入推送方式,", trigger: "blur" },
-                    ],
-                    isUse: [
-                        {required: true,message: "请输入是否启用", trigger: "blur" },
-                    ],
-                    createTime: [
-                        {required: true,message: "请选择创建时间" },
-                    ],
-                }
-            };
-        },
+import form from "@/assets/mixins/formdialog";
+import dialogShow from "./dialogshow";
+export default {
+  mixins: [form],
+  components: {
+    dialogShow,
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 弹出层标题
+      title: "设备告警配置",
+      // 是否显示弹出层
+      open: false,
+      toString: [
+        "productId",
+        "alarmType",
+        "alarmLevel",
+        "alarmPusW1ay",
+        "enabled",
+      ],
+      // 表单校验
+      rules: {
+        productId: [
+          { required: true, message: "请选择产品类型", trigger: "blur" },
+        ],
+        alarmType: [
+          { required: true, message: "请输入告警类型", trigger: "blur" },
+        ],
+        alarmLevel: [
+          { required: true, message: "请输入告警级别,", trigger: "blur" },
+        ],
+        alarmPusW1ay: [
+          { required: true, message: "请输入推送方式,", trigger: "blur" },
+        ],
+        isUse: [{ required: true, message: "请输入是否启用", trigger: "blur" }],
+        createTime: [{ required: true, message: "请选择创建时间" }],
+      },
+    };
+  },
 
-        methods: {
-            /** 编辑 */
-            edit(row) {
-                this.reset()
-                this.query = { id: row.id };
-                this.urls.currUrl =this.pageInfo.editUrl;;
-                this.getData();
-                this.pageInfo.type="edit"
-                this.title = "修改设备告警配置";
-            },
-            /** 新增 */
-            add(row) {
-                this.reset()
-                this.query = { id: row.id };
-                this.urls.currUrl = this.pageInfo.addUrl;
-                this.getData();
-                this.pageInfo.type="add"
-                this.title = "新增设备告警配置";
-            },
-            /** 查看*/
-            view(row) {
-                this.reset()
-                this.query = { id: row.id };
-                this.urls.currUrl =this.pageInfo.viewUrl;;
-                this.getData();
-                this.pageInfo.type="view"
-                this.title = "设备告警配置详细";
-            },
-            /**取消按钮 */
-            cancel() {
-                this.open = false;
-            },
-            /**获取数据后弹框 */
-            afterRender(data) {
-                this.open = true;
-            },
+  methods: {
+    /** 编辑 */
+    edit(row) {
+      this.reset();
+      this.query = { id: row.id };
+      this.urls.currUrl = this.pageInfo.editUrl;
+      this.getData();
+      this.pageInfo.type = "edit";
+      this.title = "修改设备告警配置";
+    },
+    /** 新增 */
+    add(row) {
+      this.reset();
+      this.query = { id: row.id };
+      this.urls.currUrl = this.pageInfo.addUrl;
+      this.getData();
+      this.pageInfo.type = "add";
+      this.title = "新增设备告警配置";
+    },
+    /** 查看*/
+    view(row) {
+      this.reset();
+      this.query = { id: row.id };
+      this.urls.currUrl = this.pageInfo.viewUrl;
+      this.getData();
+      this.pageInfo.type = "view";
+      this.title = "设备告警配置详细";
+    },
+    /**取消按钮 */
+    cancel() {
+      this.open = false;
+    },
+    /**获取数据后弹框 */
+    afterRender(data) {
+      this.open = true;
+    },
 
-            afterSubmit(data) {
-                this.open = false;
-                this.$emit("ok");
-            },
+    afterSubmit(data) {
+      this.open = false;
+      this.$emit("ok");
+    },
 
-            // 表单重置
-            reset() {
-                this.form = {
-                    productId : null,
-                    alarmType : 0,
-                    alarmLevel : null,
-                    alarmPusW1ay : 0,
-                    isUse : null,
-                };
-                this.resetForm("form");
-            },
-            resetForm(refName) {
-                if (this.$refs[refName]) {
-                    this.$refs[refName].resetFields();
-                }
-            },
-        },
-    };
+    // 表单重置
+    reset() {
+      this.form = {
+        productId: null,
+        alarmType: 0,
+        alarmLevel: null,
+        alarmPusW1ay: 0,
+        isUse: null,
+      };
+      this.resetForm("form");
+    },
+    resetForm(refName) {
+      if (this.$refs[refName]) {
+        this.$refs[refName].resetFields();
+      }
+    },
+  },
+};
 </script>

device-manager-ui/admin/src/views/alarm/config/list.vue

 <template>
-    <div class="page">
-        <LayoutTable :data="tableData" notSearch :config="tableConfig">
-                    </LayoutTable>
-
-        <!-- <dialog-show ref="dialogform" @ok="getData" /> -->
-
-            <drawer-show ref="drawerform" @ok="getData" />
-    </div>
+  <div class="page">
+    <LayoutTable :data="tableData" notSearch :config="tableConfig">
+    </LayoutTable>
+    <!-- <dialog-show ref="dialogform" @ok="getData" /> -->
+    <drawer-show ref="drawerform" @ok="getData" />
+  </div>
 </template>
 
 <script>
-    /** 表单弹出框模式需引入 */
-   import drawerShow from "./drawershow";
-    import table from "@/assets/mixins/table";
-    export default {
-        name: "AlarmConfig",
-        components: {drawerShow },
-        mixins: [table],
-        created() {
-        },
-        methods: {
-
-            /** 重写新增方法 */
-            toAdd(row) {
-                //this.$refs.dialogform.add(row);
-
-                 this.$refs.drawerform.add(row);
-            },
-            /** 重写编辑方法 */
-            toEdit(row) {
-                this.$refs.drawerform.edit(row);
+/** 表单弹出框模式需引入 */
+import drawerShow from "./drawershow";
+import table from "@/assets/mixins/table";
+export default {
+  name: "AlarmConfig",
+  components: { drawerShow },
+  mixins: [table],
+  created() {},
+  methods: {
+    /** 重写新增方法 */
+    toAdd(row) {
+      //this.$refs.dialogform.add(row);
 
-            },
-            /** 重写查看方法 */
-            // toView(row) {
-            //     this.$refs.dialogform.view(row);
-            // },
-             // 操作菜单状态
+      this.$refs.drawerform.add(row);
+    },
+    /** 重写编辑方法 */
+    toEdit(row) {
+      this.$refs.drawerform.edit(row);
+    },
+    /** 重写查看方法 */
+    // toView(row) {
+    //     this.$refs.dialogform.view(row);
+    // },
+    // 操作菜单状态
     changeStatus(row, column) {
       return (
         <device-switch
@@ -51,47 +46,89 @@
         />
       );
     },
+  },
+  data() {
+    return {
+      config: {
+        search: [],
+        columns: [
+          { type: "selection", align: "center", width: 60 },
 
-        },
-        data() {
-            return {
-                config: {
-                    search: [
-                    ],
-                    columns: [
-                        {type: "selection", width: 60},
+          { label: "序号", align: "center", type: "index", width: 60 },
+          {
+            label: "告警内容",
+            align: "center",
+            prop: "alarmType",
+            formatter: this.formatter,
+          },
+          {
+            label: "设备类型",
+            align: "center",
+            prop: "productId",
+            formatter: this.formatterString,
+          },
 
-                        {label: "序号",type: "index", width: 60},
-     {label: "告警内容", prop: "alarmType",formatter: this.formatter},
-                        {label: "设备类型", prop: "productId", formatter: this.formatterString},
+          {
+            label: "告警级别",
+            align: "center",
+            prop: "alarmLevel",
+            formatter: this.formatter,
+          },
+          {
+            label: "推送方式",
+            align: "center",
+            prop: "alarmPusW1ay",
+            formatter: this.formatter,
+          },
+          { label: "备注", align: "center", prop: "remark" },
 
-                        {label: "告警级别", prop: "alarmLevel",formatter: this.formatter},
-                           {label: "推送方式", prop: "alarmPusW1ay",formatter: this.formatter},
- {label: "备注", prop: "remark"},
+          {
+            label: "创建时间",
+            align: "center",
+            prop: "createTime",
+            formatter: this.formatterDate,
+          },
 
- {label: "创建时间", prop: "createTime",formatter:this.formatterDate},
-                   
- {label: "更新时间", prop: "updateTime",formatter:this.formatterDate},
-                         {
+          {
+            label: "更新时间",
+            align: "center",
+            prop: "updateTime",
+            formatter: this.formatterDate,
+          },
+          {
             prop: "enabled",
+            align: "center",
             label: "启用/停用",
             width: 100,
             formatter: this.changeStatus,
           },
 
-                    
-                        {
-                            label: "操作",
-                            width: 240,
-                            formatter: row => {
-                                return (
-                                    <table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} />
-                            );
-                            }
-                        }
-                    ]
-                }
-            };
-        }
+          {
+            label: "操作",
+            align: "center",
+            width: 240,
+            formatter: (row) => {
+              return (
+                <table-buttons
+                  noAdd
+                  row={row}
+                  onEdit={this.toEdit}
+                  onView={this.toView}
+                  onDel={this.toDel}
+                />
+              );
+            },
+          },
+        ],
+      },
     };
-</script>
\ No newline at end of file
+  },
+};
+</script>
+<style lang="less" >
+.page {
+  .table-head {
+    height: 72px;
+  }
+}
+</style>

device-manager-ui/admin/src/views/alarm/config/view.vue

 <template>
-    <layout-view>
-        <el-descriptions  :title="title" :column="column" :size="size" :colon="false" border>
-            <template slot="title">
-                <i class="el-icon-tickets"></i>
-                基本详细信息
-            </template>
-            <template slot="extra">
-                <el-button type="primary" @click="$router.go(-1)" size="small">返回</el-button>
-            </template>
-                                    <el-descriptions-item label="产品" label-class-name="labelClass" content-class-name="contentClass">
-                            {{form.productId}}
-                        </el-descriptions-item>
-                        <el-descriptions-item label="告警类型" label-class-name="labelClass" content-class-name="contentClass">
-                            {{ util_formatters("alarmType", form.alarmType) }}
-                        </el-descriptions-item>
-                        <el-descriptions-item label="告警级别," label-class-name="labelClass" content-class-name="contentClass">
-                            {{ util_formatters("alarmLevel", form.alarmLevel) }}
-                        </el-descriptions-item>
-                        <el-descriptions-item label="推送方式," label-class-name="labelClass" content-class-name="contentClass">
-                            {{ util_formatters("alarmPusW1ay", form.alarmPusW1ay) }}
-                        </el-descriptions-item>
-                        <el-descriptions-item label="是否启用" label-class-name="labelClass" content-class-name="contentClass">
-                            {{ util_formatters("isUse", form.isUse) }}
-                        </el-descriptions-item>
-        </el-descriptions>
-
-    </layout-view>
+  <layout-view>
+    <el-descriptions
+      :title="title"
+      :column="column"
+      :size="size"
+      :colon="false"
+      border
+    >
+      <template slot="title">
+        <i class="el-icon-tickets"></i>
+        基本详细信息
+      </template>
+      <template slot="extra">
+        <el-button type="primary" @click="$router.go(-1)" size="small"
+          >返回</el-button
+        >
+      </template>
+      <el-descriptions-item
+        label="产品"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ form.productId }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="告警类型"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ util_formatters("alarmType", form.alarmType) }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="告警级别,"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ util_formatters("alarmLevel", form.alarmLevel) }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="推送方式,"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ util_formatters("alarmPusW1ay", form.alarmPusW1ay) }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="是否启用"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ util_formatters("isUse", form.isUse) }}
+      </el-descriptions-item>
+    </el-descriptions>
+  </layout-view>
 </template>
 
 <script>
-    import view from "@/assets/mixins/view";
-    export default {
-        mixins: [view],
-        components: {
-        },
-        methods: {
-
-        },
-        data() {
-            return {
-                size:"small",
-                column:2,
-                toString:[
-                    "alarmType",
-                    "alarmLevel",
-                    "alarmPusW1ay",
-                    "isUse",
-                ],
-                toArrays: [
-
-                ],
-                toDate: [
-
-                ]
-            }
-        }
-    }
+import view from "@/assets/mixins/view";
+export default {
+  mixins: [view],
+  components: {},
+  methods: {},
+  data() {
+    return {
+      size: "small",
+      column: 2,
+      toString: ["alarmType", "alarmLevel", "alarmPusW1ay", "isUse"],
+      toArrays: [],
+      toDate: [],
+    };
+  },
+};
 </script>
 <style lang="less">
-    .labelClass{
-        width: 200px;
-    }
-    .el-descriptions__body{
-        margin-left: 5px;
-        margin-right: 5px;
-        color: #606266;
-        background-color: #FFF;
-    }
-    .contentClass{
-        width: 600px;
-    }
+.labelClass {
+  width: 200px;
+}
+.el-descriptions__body {
+  margin-left: 5px;
+  margin-right: 5px;
+  color: #606266;
+  background-color: #fff;
+}
+.contentClass {
+  width: 600px;
+}
 </style>
\ No newline at end of file

device-manager-ui/admin/src/views/alarm/sms/send/list.vue

 <template>
-    <div class="page">
-        <LayoutTable :data="tableData" notAdd notDel :config="tableConfig">
+  <div class="page">
+    <LayoutTable :data="tableData" notAdd notDel :config="tableConfig">
+      <el-button
+        slot="table-head-left2"
+        style="margin-left: 10px"
+        icon="el-icon-tickets"
+        size="mini"
+        @click="doExport"
+        :disabled="isExport"
+        >导出</el-button
+      >
+    </LayoutTable>
 
-             <el-button
-                    slot="table-head-left2"
-                    style="margin-left: 10px"
-                    icon="el-icon-tickets"
-                    size="mini"
-                    @click="doExport"
-                    :disabled="isExport"
-            >导出</el-button>
-                    </LayoutTable>
-
-        <drawer-show ref="drawerform" @ok="getData" />
-    </div>
+    <drawer-show ref="drawerform" @ok="getData" />
+  </div>
 </template>
 
 <script>
-    /** 表单弹出框模式需引入 */
-    import drawerShow from "./drawershow";
-    import table from "@/assets/mixins/table";
-    export default {
-        name: "AlarmSmsSend",
-        components: {drawerShow },
-        mixins: [table],
-        created() {
+/** 表单弹出框模式需引入 */
+import drawerShow from "./drawershow";
+import table from "@/assets/mixins/table";
+export default {
+  name: "AlarmSmsSend",
+  components: { drawerShow },
+  mixins: [table],
+  created() {},
+  methods: {
+    /** 重写新增方法 */
+    toAdd(row) {
+      this.$refs.dialogform.add(row);
+    },
+    /** 重写编辑方法 */
+    toEdit(row) {
+      this.$refs.dialogform.edit(row);
+    },
+    /** 重写查看方法 */
+    toView(row) {
+      this.$refs.drawerform.view(row);
+    },
+    /** 导出Excel */
+    doExport() {
+      this.isExport = true;
+      this.$download(
+        "/alarm/sms/send/exportExcel",
+        {
+          idList: this.selection,
+          sendStatus: this.$route.query["sendStatus"],
+          sendTime: this.$route.query["sendTime"],
         },
-        methods: {
-
-            /** 重写新增方法 */
-            toAdd(row) {
-                this.$refs.dialogform.add(row);
-            },
-            /** 重写编辑方法 */
-            toEdit(row) {
-                this.$refs.dialogform.edit(row);
-
-            },
-            /** 重写查看方法 */
-            toView(row) {
-                this.$refs.drawerform.view(row);
-            },
-             /** 导出Excel */
-            doExport() {
-                this.isExport = true;
-                this.$download("/alarm/sms/send/exportExcel", {
-                "idList": this.selection,
-                    'sendStatus': this.$route.query['sendStatus'],
-                    'sendTime': this.$route.query['sendTime'],
-                }, { type: "excel" }).then(() => this.isExport = false).catch(error => {
-                    this.isExport = false;
-                    this.$message.error(error.message);
-                });
-            },
+        { type: "excel" }
+      )
+        .then(() => (this.isExport = false))
+        .catch((error) => {
+          this.isExport = false;
+          this.$message.error(error.message);
+        });
+    },
+  },
+  data() {
+    return {
+      config: {
+        search: [
+          {
+            name: "sendStatus",
+            type: "select",
+            label: "发送状态",
+            fuzzy: true,
+          },
 
-        },
-        data() {
-            return {
-                config: {
-                    search: [
-                        {
-                            name: "sendStatus",
-                            type: "select",
-                            label: "发送状态",
-                            fuzzy: true
-                        },
- 
-                        {
+          {
             name: "sendTimeStart",
             type: "datetime",
             label: "开始时间",
           },
 
-           {
+          {
             name: "sendTimeEnd",
             type: "datetime",
             label: "结束时间",
-            placeholder:"结束时间"
+            placeholder: "结束时间",
           },
-                    ],
-                    columns: [
-                        {type: "selection", width: 60},
-                       {type: "index",label:"序号", width: 60},
+        ],
+        columns: [
+          { type: "selection", align: "center", width: 60 },
+          { type: "index", align: "center", label: "序号", width: 60 },
 
-                       {label: "发送内容", prop: "sendMess",width:500},
-                        {label: "联系电话", prop: "mobile"},
+          { label: "发送内容", align: "center", prop: "sendMess", width: 500 },
+          { label: "联系电话", align: "center", prop: "mobile" },
 
-                        {label: "接收人员", prop: "receiver"},
+          { label: "接收人员", align: "center", prop: "receiver" },
 
-                        {label: "发送状态", prop: "sendStatus",formatter: this.formatter},
+          {
+            label: "发送状态",
+            align: "center",
+            prop: "sendStatus",
+            formatter: this.formatter,
+          },
 
-                        {label: "发送时间", prop: "sendTime", formatter: this.formatterDate},
-                        {
-                            label: "操作",
-                            width: 240,
-                            formatter: row => {
-                                return (
-                                    <table-buttons noAdd noEdit noDel row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} />
-                            );
-                            }
-                        }
-                    ]
-                }
-            };
-        }
+          {
+            label: "发送时间",
+            align: "center",
+            prop: "sendTime",
+            formatter: this.formatterDate,
+          },
+          {
+            label: "操作",
+            align: "center",
+            width: 240,
+            formatter: (row) => {
+              return (
+                <table-buttons
+                  noAdd
+                  noEdit
+                  noDel
+                  row={row}
+                  onEdit={this.toEdit}
+                  onView={this.toView}
+                  onDel={this.toDel}
+                />
+              );
+            },
+          },
+        ],
+      },
     };
-</script>
\ No newline at end of file
+  },
+};
+</script>
+<style lang="less" >
+.buttons {
+  display: flex;
+  .el-row {
+    margin-left: 20px;
+  }
+}
+</style>
\ No newline at end of file

device-manager-ui/admin/src/views/device/alarm/info/list.vue

 <template>
   <div class="page">
     <LayoutTable :data="tableData" notAdd notDel :config="tableConfig">
-
-         <el-button
+      <el-button
         slot="table-head-left2"
         style="margin-left: 10px"
         icon="el-icon-tickets"
@@ -11,25 +10,35 @@
         :disabled="isExport"
         >导出</el-button
       >
-        
-        <el-tag slot="table-head-row2-left" size="mini"
+
+      <el-tag slot="table-head-row2-left" size="mini"
         >告警次数：{{ tableData.totalCount }}次</el-tag
       >
 
-      <el-tag slot="table-head-row2-left" size="mini" style="margin: 5px" type="danger"
+      <el-tag
+        slot="table-head-row2-left"
+        size="mini"
+        style="margin: 5px"
+        type="danger"
         >危险：{{ tableData.dangerCount }}次</el-tag
       >
 
-      <el-tag slot="table-head-row2-left" size="mini" style="margin: 5px" type="warning"
+      <el-tag
+        slot="table-head-row2-left"
+        size="mini"
+        style="margin: 5px"
+        type="warning"
         >次要：{{ tableData.subCount }}次</el-tag
       >
 
-       <el-tag slot="table-head-row2-left" size="mini" style="margin: 5px" type="info"
+      <el-tag
+        slot="table-head-row2-left"
+        size="mini"
+        style="margin: 5px"
+        type="info"
         >一般：{{ tableData.normalCount }}次</el-tag
       >
-
-        
-         </LayoutTable>
+    </LayoutTable>
 
     <dialog-show ref="dialogform" @ok="getData" />
   </div>
@@ -52,11 +61,11 @@ export default {
   created() {
     console.log("queryIn:", this.queryIn);
 
-    if (this.queryIn&&this.queryIn.alarmDevice) {
-      this.query={}
+    if (this.queryIn && this.queryIn.alarmDevice) {
+      this.query = {};
       this.query["alarmDevice"] = this.queryIn.alarmDevice;
     }
-    this.changePath("/device/alarm/info")
+    this.changePath("/device/alarm/info");
   },
   methods: {
     /** 重写新增方法 */
@@ -72,83 +81,101 @@ export default {
     //     this.$refs.dialogform.view(row);
     // },
     /** 导出Excel */
-            doExport() {
-                this.isExport = true;
-                this.$download("/device/alarm/info/exportExcel", {
-                    "idList": this.selection,
-                    'alarmDevice': this.$route.query['alarmDevice'],
-                    'alarmType': this.$route.query['alarmType'],
-                    'alarmStatus': this.$route.query['alarmStatus'],
-                }, { type: "excel" }).then(() => this.isExport = false).catch(error => {
-                    this.isExport = false;
-                    this.$message.error(error.message);
-                });
-            },
+    doExport() {
+      this.isExport = true;
+      this.$download(
+        "/device/alarm/info/exportExcel",
+        {
+          idList: this.selection,
+          alarmDevice: this.$route.query["alarmDevice"],
+          alarmType: this.$route.query["alarmType"],
+          alarmStatus: this.$route.query["alarmStatus"],
+        },
+        { type: "excel" }
+      )
+        .then(() => (this.isExport = false))
+        .catch((error) => {
+          this.isExport = false;
+          this.$message.error(error.message);
+        });
+    },
   },
   data() {
     return {
       config: {
         search: [
-
           {
             name: "alarmStatus",
             type: "select",
             label: "告警状态",
           },
 
-
           {
             name: "alarmTimeStart",
             type: "datetime",
             label: "开始时间",
           },
 
-           {
+          {
             name: "alarmTimeEnd",
             type: "datetime",
             label: "结束时间",
-            placeholder:"结束时间"
+            placeholder: "结束时间",
           },
-
         ],
         columns: [
- {type: "selection",reserveSelection:true, width: 60,label:"全选"},
-              {
+          {
+            type: "selection",
+            align: "center",
+            reserveSelection: true,
+            width: 60,
+            label: "全选",
+          },
+          {
             type: "index",
+            align: "center",
             label: "序号",
-            width: 50
+            width: 50,
           },
 
-
           {
             label: "告警时间",
+            align: "center",
             prop: "alarmTime",
             formatter: this.formatterDate,
           },
 
           {
             label: "告警设备",
+            align: "center",
             prop: "alarmDevice",
             formatter: this.formatter,
           },
-            {
+          {
             label: "告警内容",
+            align: "center",
             prop: "alarmContent",
           },
 
-          { label: "告警级别", prop: "alarmLevel", formatter: this.formatter },
-
-
+          {
+            label: "告警级别",
+            align: "center",
+            prop: "alarmLevel",
+            formatter: this.formatter,
+          },
 
-          { label: "接收人员,", prop: "alarmReceivePersonnel" },
+          {
+            label: "接收人员,",
+            align: "center",
+            prop: "alarmReceivePersonnel",
+          },
 
-        
           {
             label: "告警状态",
+            align: "center",
             prop: "alarmStatus",
             formatter: this.formatter,
           },
-          
         ],
       },
     };

device-manager-ui/admin/src/views/device/list.vue

-<template>
+  align: "center",<template>
   <div class="page">
     <span style="font-size: 13px"
       ><b>设备列表</b> (<el-link
@@ -9,7 +9,11 @@
       >
       站点编码：{{ siteCode }} )</span
     >
-    <el-link style="margin-left: 10px" type="primary" @click="switchMap" :underline="false"
+    <el-link
+      style="margin-left: 10px"
+      type="primary"
+      @click="switchMap"
+      :underline="false"
       >地图模式</el-link
     >
     <el-button
@@ -39,7 +43,7 @@
         :disabled="isExport"
         >导出</el-button
       >
-      <el-tag slot="table-head-row2-left" size="mini" 
+      <el-tag slot="table-head-row2-left" size="mini"
         >设备总数：{{ tableData.totalCount }}台</el-tag
       >
 
@@ -180,8 +184,8 @@ export default {
   created() {
     console.log(this.$route);
     this.siteId = this.$route.query.siteId;
-    this.info=this.$route.query
-    this.query={siteId:this.siteId}
+    this.info = this.$route.query;
+    this.query = { siteId: this.siteId };
 
     this.$get("/sitestat/siteInfo", {
       siteId: this.siteId,
@@ -200,8 +204,8 @@ export default {
     // this.$router.push({ query: {siteId:this.siteId } });
   },
   methods: {
-    switchMap(){
-       this.$router.push({
+    switchMap() {
+      this.$router.push({
         path: "/sitestat/mapDetail",
         query: this.info,
       });
@@ -354,14 +358,13 @@ export default {
         .then((res) => {
           if (res.code == 1) {
             this.$message.success("编辑站点成功！");
-            this.tree.open=false;
-          
-            this.getData();
+            this.tree.open = false;
 
+            this.getData();
           }
         })
         .catch((error) => {
-          this.loading=false;
+          this.loading = false;
           this.$message.error(error.message);
         });
     },
@@ -380,7 +383,6 @@ export default {
         />
       );
     },
-
   },
   data() {
     return {
@@ -397,7 +399,7 @@ export default {
         // 上传的地址
         url: "/m/device/importData",
       },
-      info:{},
+      info: {},
       // 站点树
       tree: {
         // 是否显示弹出层（设备导入）
@@ -421,45 +423,61 @@ export default {
             name: "deviceCode",
             type: "text",
             label: "设备编码",
-             fuzzy:true
+            fuzzy: true,
           },
           {
             name: "deviceStatus",
             type: "select",
             label: "状态",
           },
-
         ],
         columns: [
-          { type: "selection",reserveSelection:true, width: 60 },
-          { type: "index", label: "序号",align:"center", width: 50 },
+          { type: "selection", reserveSelection: true, width: 60 },
+          { type: "index", label: "序号", align: "center", width: 50 },
 
-          { label: "设备名称", prop: "deviceName" },
+          { label: "设备名称", align: "center", prop: "deviceName" },
 
-          { label: "设备类型", prop: "productId", formatter: this.formatter },
+          {
+            label: "设备类型",
+            align: "center",
+            prop: "productId",
+            formatter: this.formatter,
+          },
 
-          { label: "设备编码", prop: "deviceCode" },
+          { label: "设备编码", align: "center", prop: "deviceCode" },
 
           // { label: "mac地址", prop: "deviceMac" },
 
           {
             label: "设备生产商",
+            align: "center",
             prop: "deviceFirmId",
             formatter: this.formatter,
             width: 150,
           },
-          { label: "负责人", prop: "leadingOfficial" },
-          { label: "联系电话", prop: "leadingOfficialTelephone" },
+          { label: "负责人", align: "center", prop: "leadingOfficial" },
+          {
+            label: "联系电话",
+            align: "center",
+            prop: "leadingOfficialTelephone",
+          },
           {
             label: "状态 ",
+            align: "center",
             prop: "deviceStatus",
             formatter: this.formatterStatus,
           },
 
-          { label: "利旧设备", prop: "source", formatter: this.formatterYES },
+          {
+            label: "利旧设备",
+            align: "center",
+            prop: "source",
+            formatter: this.formatterYES,
+          },
 
           {
             prop: "enabled",
+            align: "center",
             label: "启用/停用",
             width: 100,
             formatter: this.changeStatus,
@@ -467,12 +485,14 @@ export default {
 
           {
             label: "创建时间",
+            align: "center",
             prop: "createTime",
             formatter: this.formatterDate,
           },
 
           {
             label: "操作",
+            align: "center",
             width: 240,
             formatter: (row) => {
               return (
@@ -499,7 +519,6 @@ export default {
                   ) : (
                     ""
                   )}
-
                 </div>
               );
             },

device-manager-ui/admin/src/views/device/log/list.vue

@@ -38,8 +38,7 @@ export default {
             name: "deviceCode",
             type: "text",
             label: "设备编号",
-            fuzzy:true
-           
+            fuzzy: true,
           },
           {
             name: "logType",
@@ -48,40 +47,62 @@ export default {
           },
         ],
         columns: [
-          { label: "traceID", prop: "traceID",width:120 },
+          { label: "traceID", align: "center", prop: "traceID", width: 320 },
 
-          { label: "设备编号", prop: "deviceCode",width:160 },
+          {
+            label: "设备编号",
+            align: "center",
+            prop: "deviceCode",
+            width: 160,
+          },
 
-          { label: "设备名称", prop: "deviceName",width:160 },
-          { label: "内容", prop: "content" },
+          {
+            label: "设备名称",
+            align: "center",
+            prop: "deviceName",
+            width: 160,
+          },
+          { label: "内容", align: "center", prop: "content" },
 
-          { label: "业务标识", prop: "messageHead",width:80 },
+          {
+            label: "业务标识",
+            align: "center",
+            prop: "messageHead",
+            width: 80,
+          },
 
-          { label: "日志类型", prop: "logType", formatter: this.formatter ,width:80},
+          {
+            label: "日志类型",
+            align: "center",
+            prop: "logType",
+            formatter: this.formatter,
+            width: 80,
+          },
 
           {
             label: "创建时间",
+            align: "center",
             prop: "createTime",
             formatter: this.formatterDate,
-            width:160
+            width: 160,
           },
-        //   {
-        //     label: "操作",
-        //     width: 240,
-        //     formatter: (row) => {
-        //       return (
-        //         <table-buttons
-        //           noAdd
-        //           noEdit
-        //           noDel
-        //           row={row}
-        //           onEdit={this.toEdit}
-        //           onView={this.toView}
-        //           onDel={this.toDel}
-        //         />
-        //       );
-        //     },
-        //   },
+          //   {
+          //     label: "操作",
+          //     width: 240,
+          //     formatter: (row) => {
+          //       return (
+          //         <table-buttons
+          //           noAdd
+          //           noEdit
+          //           noDel
+          //           row={row}
+          //           onEdit={this.toEdit}
+          //           onView={this.toView}
+          //           onDel={this.toDel}
+          //         />
+          //       );
+          //     },
+          //   },
         ],
       },
     };

device-manager-ui/admin/src/views/device/module/distribute/list.vue

@@ -29,21 +29,18 @@ export default {
     },
     /** 重写查看方法 */
     toView(row) {
-
-            this.$get("/device/module/distribute/view",{id:row.id})
+      this.$get("/device/module/distribute/view", { id: row.id })
         .then((res) => {
           if (res.code == 1) {
-              window.open(res.data.entity.filePath,"_blank")
+            window.open(res.data.entity.filePath, "_blank");
           }
         })
         .catch((error) => {
           this.$message.error(error.message);
         });
-
     },
 
-     distribute(row) {
-         
+    distribute(row) {
       this.$post("/device/module/distribute/active", row)
         .then((res) => {
           if (res.code == 1) {
@@ -61,22 +58,34 @@ export default {
       config: {
         search: [],
         columns: [
-          { type: "selection", width: 60 },
-          { type: "index", label: "序号", width: 50 },
+          { type: "selection", align: "center", width: 60 },
+          { type: "index", align: "center", label: "序号", width: 50 },
 
-          { label: "产品", prop: "productId", formatter: this.formatter },
+          {
+            label: "产品",
+            align: "center",
+            prop: "productId",
+            formatter: this.formatter,
+          },
 
           {
             label: "分辨率",
+            align: "center",
             prop: "imageResolution",
             formatter: this.formatter,
           },
 
-          { label: "版本号", prop: "version" },
+          { label: "版本号", align: "center", prop: "version" },
 
-          { label: "是否部署", prop: "distribute", formatter: this.formatter },
+          {
+            label: "是否部署",
+            align: "center",
+            prop: "distribute",
+            formatter: this.formatter,
+          },
           {
             label: "操作",
+            align: "center",
             width: 240,
             formatter: (row) => {
               return (

device-manager-ui/admin/src/views/device/module/list.vue

 <template>
-    <div class="page">
-        <LayoutTable :data="tableData" :config="tableConfig">
-                    </LayoutTable>
+  <div class="page">
+    <LayoutTable :data="tableData" :config="tableConfig"> </LayoutTable>
 
-        <dialog-show ref="dialogform" @ok="getData" />
-    </div>
+    <dialog-show ref="dialogform" @ok="getData" />
+  </div>
 </template>
 
 <script>
-    /** 表单弹出框模式需引入 */
-    import dialogShow from "./dialogshow";
-    import table from "@/assets/mixins/table";
-    export default {
-        name: "DeviceModule",
-        components: {dialogShow },
-        mixins: [table],
-        created() {
-        },
-        methods: {
+/** 表单弹出框模式需引入 */
+import dialogShow from "./dialogshow";
+import table from "@/assets/mixins/table";
+export default {
+  name: "DeviceModule",
+  components: { dialogShow },
+  mixins: [table],
+  created() {},
+  methods: {
+    /** 重写新增方法 */
+    toAdd(row) {
+      this.$refs.dialogform.add(row);
+    },
+    /** 重写编辑方法 */
+    toEdit(row) {
+      this.$refs.dialogform.edit(row);
+    },
+    /** 重写查看方法 */
+    // toView(row) {
+    //     this.$refs.dialogform.view(row);
+    // },
+  },
+  data() {
+    return {
+      config: {
+        search: [],
+        columns: [
+          { type: "selection", align: "center", width: 60 },
+          { type: "index", align: "center", label: "序号", width: 50 },
 
-            /** 重写新增方法 */
-            toAdd(row) {
-                this.$refs.dialogform.add(row);
-            },
-            /** 重写编辑方法 */
-            toEdit(row) {
-                this.$refs.dialogform.edit(row);
+          { label: "模块名称", align: "center", prop: "moduleName" },
 
+          { label: "模块消息编码", align: "center", prop: "moduleMsgCode" },
+          {
+            label: "操作",
+            align: "center",
+            width: 240,
+            formatter: (row) => {
+              return (
+                <table-buttons
+                  noAdd
+                  row={row}
+                  onEdit={this.toEdit}
+                  onView={this.toView}
+                  onDel={this.toDel}
+                />
+              );
             },
-            /** 重写查看方法 */
-            // toView(row) {
-            //     this.$refs.dialogform.view(row);
-            // },
-
-        },
-        data() {
-            return {
-                config: {
-                    search: [
-                    ],
-                    columns: [
-                        {type: "selection", width: 60},
-                         {type: "index",label: "序号",width: 50},
-
-                         {label: "模块名称", prop: "moduleName"},
-
-                        {label: "模块消息编码", prop: "moduleMsgCode"},
-                        {
-                            label: "操作",
-                            width: 240,
-                            formatter: row => {
-                                return (
-                                    <table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} />
-                            );
-                            }
-                        }
-                    ]
-                }
-            };
-        }
+          },
+        ],
+      },
     };
+  },
+};
 </script>
\ No newline at end of file

device-manager-ui/admin/src/views/device/module/use/list.vue

@@ -68,19 +68,24 @@ export default {
       config: {
         search: [],
         columns: [
-          { label: "模块名称", prop: "moduleName" },
+          { label: "模块名称", align: "center", prop: "moduleName" },
 
-        //   { label: "模块消息编码", prop: "moduleMsgCode" },
+          //   { label: "模块消息编码", prop: "moduleMsgCode" },
 
           {
             label: "设备名称",
+            align: "center",
             prop: "deviceId",
             formatter: this.formatterString,
           },
 
-          { label: "产品名称", prop: "platformAndProductName" },
+          {
+            label: "产品名称",
+            align: "center",
+            prop: "platformAndProductName",
+          },
 
-          { label: "调用次数", prop: "useNum" },
+          { label: "调用次数", align: "center", prop: "useNum" },
         ],
       },
     };

device-manager-ui/admin/src/views/firm/list.vue

 <template>
-    <div class="page">
-        <LayoutTable :data="tableData" :config="tableConfig">
-                    </LayoutTable>
+  <div class="page">
+    <LayoutTable :data="tableData" :config="tableConfig"> </LayoutTable>
 
-
-        <drawer-show ref="drawerform" @ok="getData" />
-    </div>
+    <drawer-show ref="drawerform" @ok="getData" />
+  </div>
 </template>
 
 <script>
-    /** 表单弹出框模式需引入 */
-
-    import drawerShow from "./drawershow";
-    import table from "@/assets/mixins/table";
-    export default {
-        name: "FirmList",
-        components: {
-            drawerShow
-},
-        mixins: [table],
-        created() {
-        },
-        methods: {
-            /** 重写新增方法 */
-            toAdd(row) {
-                this.$refs.drawerform.add(row);
-            },
-            /** 重写编辑方法 */
-            toEdit(row) {
-                this.$refs.drawerform.edit(row);
-            },
-            /** 重写查看方法 */
-            toView(row) {
-                this.$refs.drawerform.view(row);
-            },
+/** 表单弹出框模式需引入 */
 
-        },
-        data() {
-            return {
-                config: {
-                    search: [
-                        {
-                            name: "firmName",
-                            type: "text",
-                            label: "设备生产厂商名称",
-                            fuzzy: true
-                        },
-                    ],
-                    columns: [
-                          { type: "selection",reserveSelection:true, width: 60 },
-                         { type: "index", label: "序号",align:"center", width: 50 },
+import drawerShow from "./drawershow";
+import table from "@/assets/mixins/table";
+export default {
+  name: "FirmList",
+  components: {
+    drawerShow,
+  },
+  mixins: [table],
+  created() {},
+  methods: {
+    /** 重写新增方法 */
+    toAdd(row) {
+      this.$refs.drawerform.add(row);
+    },
+    /** 重写编辑方法 */
+    toEdit(row) {
+      this.$refs.drawerform.edit(row);
+    },
+    /** 重写查看方法 */
+    toView(row) {
+      this.$refs.drawerform.view(row);
+    },
+  },
+  data() {
+    return {
+      config: {
+        search: [
+          {
+            name: "firmName",
+            type: "text",
+            label: "设备生产厂商名称",
+            fuzzy: true,
+          },
+        ],
+        columns: [
+          {
+            type: "selection",
+            align: "center",
+            reserveSelection: true,
+            width: 60,
+          },
+          { type: "index", label: "序号", align: "center", width: 50 },
 
-                        {label: "设备生产厂商名称", prop: "firmName"},
+          { label: "设备生产厂商名称", align: "center", prop: "firmName" },
 
-                        {label: "设备生产商编码", prop: "firmCode"},
+          { label: "设备生产商编码", align: "center", prop: "firmCode" },
 
-                        {label: "备注", prop: "firmRemark"},
+          { label: "备注", align: "center", prop: "firmRemark" },
 
-                        {label: "创建时间", prop: "createTime", formatter: this.formatterDate},
-                        {
-                            label: "操作",
-                            width: 240,
-                            formatter: row => {
-                                return (
-                                    <table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} />
-                            );
-                            }
-                        }
-                    ]
-                }
-            };
-        }
+          {
+            label: "创建时间",
+            align: "center",
+            prop: "createTime",
+            formatter: this.formatterDate,
+          },
+          {
+            label: "操作",
+            align: "center",
+            width: 240,
+            formatter: (row) => {
+              return (
+                <table-buttons
+                  noAdd
+                  row={row}
+                  onEdit={this.toEdit}
+                  onView={this.toView}
+                  onDel={this.toDel}
+                />
+              );
+            },
+          },
+        ],
+      },
     };
+  },
+};
 </script>
\ No newline at end of file

device-manager-ui/admin/src/views/login/authentication.vue

@@ -6,45 +6,48 @@
 
 <script>
 export default {
-  name: 'authentication',
-  created () {
+  name: "authentication",
+  created() {
     this.login();
   },
   methods: {
     login() {
-      this.$post('/login/index').then(this.loginSuccess).catch(this.loginFail)
+      this.$post("/login/index").then(this.loginSuccess).catch(this.loginFail);
     },
-    loginSuccess({data}) {
-      this.$store.commit('setUserData', data);
+    loginSuccess({ data }) {
+      this.$store.commit("setUserData", data);
       this.$router.replace({
         path: this.redirect,
       });
     },
     loginFail(error) {
-      this.$message.error(error.message || '请登录');
+      this.$message.error(error.message || "请登录");
 
-      console.log("href:"+process.env.VUE_APP_PORTAL_URL)
-     window.location.href=process.env.VUE_APP_PORTAL_URL=='undefined'?'http://192.168.0.98:11072':process.env.VUE_APP_PORTAL_URL
+      console.log("href:" + process.env.VUE_APP_PORTAL_URL);
+      window.location.href =
+        process.env.VUE_APP_PORTAL_URL == "undefined"
+          ? "http://192.168.0.98:11072"
+          : process.env.VUE_APP_PORTAL_URL;
 
-     // window.location.href=process.env.VUE_APP_PORTAL_URL
+      // window.location.href=process.env.VUE_APP_PORTAL_URL
       // this.$router.replace({
       //   path: '/login',
       //   query: {
       //     redirect: this.redirect,
       //   }
       // });
-    }
+    },
   },
   computed: {
     isLogin() {
-      return this.$store.state.isLogin
-    }
+      return this.$store.state.isLogin;
+    },
   },
   data() {
     return {
       redirect: this.$route.query.redirect,
       loading: true,
-    }
-  }
-}
+    };
+  },
+};
 </script>

device-manager-ui/admin/src/views/platform/list.vue

 <template>
-    <div class="page">
-        <LayoutTable :data="tableData" :config="tableConfig">
-                    </LayoutTable>
+  <div class="page">
+    <LayoutTable :data="tableData" :config="tableConfig"> </LayoutTable>
 
-         <drawer-show ref="drawerform" @ok="getData" />
-    </div>
+    <drawer-show ref="drawerform" @ok="getData" />
+  </div>
 </template>
 
 <script>
-    /** 表单弹出框模式需引入 */
-    import drawerShow from "./drawershow";
-    import table from "@/assets/mixins/table";
-    export default {
-        name: "Platform",
-        components: {drawerShow },
-        mixins: [table],
-        created() {
-        },
-        methods: {
+/** 表单弹出框模式需引入 */
+import drawerShow from "./drawershow";
+import table from "@/assets/mixins/table";
+export default {
+  name: "Platform",
+  components: { drawerShow },
+  mixins: [table],
+  created() {},
+  methods: {
+    /** 重写新增方法 */
+    toAdd(row) {
+      this.$refs.drawerform.add(row);
+    },
+    /** 重写编辑方法 */
+    toEdit(row) {
+      this.$refs.drawerform.edit(row);
+    },
+    /** 重写查看方法 */
+    toView(row) {
+      this.$refs.drawerform.view(row);
+    },
+  },
+  data() {
+    return {
+      config: {
+        search: [],
+        columns: [
+          {
+            type: "selection",
+            align: "center",
+            reserveSelection: true,
+            width: 60,
+          },
+          { type: "index", label: "序号", align: "center", width: 50 },
 
-            /** 重写新增方法 */
-            toAdd(row) {
-                this.$refs.drawerform.add(row);
-            },
-            /** 重写编辑方法 */
-            toEdit(row) {
-                this.$refs.drawerform.edit(row);
-
-            },
-            /** 重写查看方法 */
-            toView(row) {
-                this.$refs.drawerform.view(row);
-            },
+          {
+            label: "平台名称，名称唯一",
+            align: "center",
+            prop: "platformName",
+          },
 
-        },
-        data() {
-            return {
-                config: {
-                    search: [
-                    ],
-                    columns: [
-                          { type: "selection",reserveSelection:true, width: 60 },
-                          { type: "index", label: "序号",align:"center", width: 50 },
+          { label: "平台编码，编码唯一", align: "center", prop: "platformSn" },
 
-                        {label: "平台名称，名称唯一", prop: "platformName"},
+          {
+            label: "发送第三方平台消息类型",
+            align: "center",
+            prop: "sendMsgType",
+            formatter: this.formatter,
+          },
 
-                        {label: "平台编码，编码唯一", prop: "platformSn"},
-
-                        {label: "发送第三方平台消息类型", prop: "sendMsgType",formatter: this.formatter},
-
-                        {label: "是否启用发送消息", prop: "sendSwitch",formatter: this.formatter},
-                        {
-                            label: "操作",
-                            width: 240,
-                            formatter: row => {
-                                return (
-                                    <table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} />
-                            );
-                            }
-                        }
-                    ]
-                }
-            };
-        }
+          {
+            label: "是否启用发送消息",
+            align: "center",
+            prop: "sendSwitch",
+            formatter: this.formatter,
+          },
+          {
+            label: "操作",
+            align: "center",
+            width: 240,
+            formatter: (row) => {
+              return (
+                <table-buttons
+                  noAdd
+                  row={row}
+                  onEdit={this.toEdit}
+                  onView={this.toView}
+                  onDel={this.toDel}
+                />
+              );
+            },
+          },
+        ],
+      },
     };
+  },
+};
 </script>
\ No newline at end of file

device-manager-ui/admin/src/views/product/list.vue

@@ -31,27 +31,40 @@ export default {
       this.$refs.drawerform.view(row);
     },
   },
-//   beforeRouteEnter(to, from, next) {next(vm => {
-//     // 通过 `vm` 访问组件实例
-//     console.log(vm)
-//   })},
+  //   beforeRouteEnter(to, from, next) {next(vm => {
+  //     // 通过 `vm` 访问组件实例
+  //     console.log(vm)
+  //   })},
   data() {
     return {
       config: {
         search: [],
         columns: [
           // {type: "selection", width: 60},
-          { type: "index", label: "序号",align:"center", width: 50 },
+          {
+            type: "index",
+            align: "center",
+            label: "序号",
+            align: "center",
+            width: 50,
+          },
 
-          { label: "关联平台", prop: "platformId", formatter: this.formatter },
+          {
+            label: "关联平台",
+            align: "center",
+            align: "center",
+            prop: "platformId",
+            formatter: this.formatter,
+          },
 
-          { label: "产品名称", prop: "productName" },
+          { label: "产品名称", align: "center", prop: "productName" },
 
-          { label: "产品编码", prop: "productCode" },
+          { label: "产品编码", align: "center", prop: "productCode" },
 
-          { label: "备注", prop: "productRemark" },
+          { label: "备注", align: "center", prop: "productRemark" },
           {
             label: "操作",
+            align: "center",
             width: 240,
             formatter: (row) => {
               return (

device-manager-ui/admin/src/views/sitestat/dialogshow.vue

 <template>
-    <!-- 弹出框表单 -->
-    <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
-        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
-            <el-row>
-                                            <Field label="站点Id，来源基础服务平台" prop="siteId" v-model="form.siteId" placeholder="请输入站点Id，来源基础服务平台"/>
-                            <Field label="站点编号，来源基础服务平台" prop="siteCode" v-model="form.siteCode" type="textarea" placeholder="请输入站点编号，来源基础服务平台"/>
-                            <Field label="站点名称" prop="siteName" v-model="form.siteName" type="textarea" placeholder="请输入站点名称"/>
-                            <Field label="设备总数" prop="deviceTotal" v-model="form.deviceTotal" placeholder="请输入设备总数"/>
-                            <Field label="在线数量" prop="onlineCount" v-model="form.onlineCount" placeholder="请输入在线数量"/>
-                            <Field label="离线数量" prop="offlineCount" v-model="form.offlineCount" placeholder="请输入离线数量"/>
-                            <Field label="停用数量" prop="stopCount" v-model="form.stopCount" placeholder="请输入停用数量"/>
-                            <Field label="待激活数量" prop="unActiveCount" v-model="form.unActiveCount" placeholder="请输入待激活数量"/>
-
-            </el-row>
-
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-            <el-button type="primary" v-if="pageInfo.type !== 'view'" @click="submitForm">确 定</el-button>
-            <el-button @click="cancel">取 消</el-button>
-        </div>
-    </el-dialog>
+  <!-- 弹出框表单 -->
+  <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-row>
+        <Field
+          label="站点Id，来源基础服务平台"
+          prop="siteId"
+          v-model="form.siteId"
+          placeholder="请输入站点Id，来源基础服务平台"
+        />
+        <Field
+          label="站点编号，来源基础服务平台"
+          prop="siteCode"
+          v-model="form.siteCode"
+          type="textarea"
+          placeholder="请输入站点编号，来源基础服务平台"
+        />
+        <Field
+          label="站点名称"
+          prop="siteName"
+          v-model="form.siteName"
+          type="textarea"
+          placeholder="请输入站点名称"
+        />
+        <Field
+          label="设备总数"
+          prop="deviceTotal"
+          v-model="form.deviceTotal"
+          placeholder="请输入设备总数"
+        />
+        <Field
+          label="在线数量"
+          prop="onlineCount"
+          v-model="form.onlineCount"
+          placeholder="请输入在线数量"
+        />
+        <Field
+          label="离线数量"
+          prop="offlineCount"
+          v-model="form.offlineCount"
+          placeholder="请输入离线数量"
+        />
+        <Field
+          label="停用数量"
+          prop="stopCount"
+          v-model="form.stopCount"
+          placeholder="请输入停用数量"
+        />
+        <Field
+          label="待激活数量"
+          prop="unActiveCount"
+          v-model="form.unActiveCount"
+          placeholder="请输入待激活数量"
+        />
+      </el-row>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button
+        type="primary"
+        v-if="pageInfo.type !== 'view'"
+        @click="submitForm"
+        >确 定</el-button
+      >
+      <el-button @click="cancel">取 消</el-button>
+    </div>
+  </el-dialog>
 </template>
 
 <script>
-    import form from "@/assets/mixins/formdialog";
-    import dialogShow from "./dialogshow";
-    export default {
-        mixins: [form],
-        components: {
-            dialogShow ,
-        },
-        data() {
-            return {
-                // 遮罩层
-                loading: true,
-                // 弹出层标题
-                title: "站点统计",
-                // 是否显示弹出层
-                open: false,
-                toString:[
-                ],
-                // 表单校验
-                rules: {
-                    unActiveCount: [
-                        {required: true,message: "请输入待激活数量", trigger: "blur" },
-                    ],
-                    createTime: [
-                        {required: true,message: "请选择创建时间" },
-                    ],
-                }
-            };
-        },
+import form from "@/assets/mixins/formdialog";
+import dialogShow from "./dialogshow";
+export default {
+  mixins: [form],
+  components: {
+    dialogShow,
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 弹出层标题
+      title: "站点统计",
+      // 是否显示弹出层
+      open: false,
+      toString: [],
+      // 表单校验
+      rules: {
+        unActiveCount: [
+          { required: true, message: "请输入待激活数量", trigger: "blur" },
+        ],
+        createTime: [{ required: true, message: "请选择创建时间" }],
+      },
+    };
+  },
 
-        methods: {
-            /** 编辑 */
-            edit(row) {
-                this.reset()
-                this.query = { id: row.id };
-                this.urls.currUrl =this.pageInfo.editUrl;;
-                this.getData();
-                this.pageInfo.type="edit"
-                this.title = "修改站点统计";
-            },
-            /** 新增 */
-            add(row) {
-                this.reset()
-                this.query = { id: row.id };
-                this.urls.currUrl = this.pageInfo.addUrl;
-                this.getData();
-                this.pageInfo.type="add"
-                this.title = "新增站点统计";
-            },
-            /** 查看*/
-            view(row) {
-                this.reset()
-                this.query = { id: row.id };
-                this.urls.currUrl =this.pageInfo.viewUrl;;
-                this.getData();
-                this.pageInfo.type="view"
-                this.title = "站点统计详细";
-            },
-            /**取消按钮 */
-            cancel() {
-                this.open = false;
-            },
-            /**获取数据后弹框 */
-            afterRender(data) {
-                this.open = true;
-            },
+  methods: {
+    /** 编辑 */
+    edit(row) {
+      this.reset();
+      this.query = { id: row.id };
+      this.urls.currUrl = this.pageInfo.editUrl;
+      this.getData();
+      this.pageInfo.type = "edit";
+      this.title = "修改站点统计";
+    },
+    /** 新增 */
+    add(row) {
+      this.reset();
+      this.query = { id: row.id };
+      this.urls.currUrl = this.pageInfo.addUrl;
+      this.getData();
+      this.pageInfo.type = "add";
+      this.title = "新增站点统计";
+    },
+    /** 查看*/
+    view(row) {
+      this.reset();
+      this.query = { id: row.id };
+      this.urls.currUrl = this.pageInfo.viewUrl;
+      this.getData();
+      this.pageInfo.type = "view";
+      this.title = "站点统计详细";
+    },
+    /**取消按钮 */
+    cancel() {
+      this.open = false;
+    },
+    /**获取数据后弹框 */
+    afterRender(data) {
+      this.open = true;
+    },
 
-            afterSubmit(data) {
-                this.open = false;
-                this.$emit("ok");
-            },
+    afterSubmit(data) {
+      this.open = false;
+      this.$emit("ok");
+    },
 
-            // 表单重置
-            reset() {
-                this.form = {
-                    siteId : null,
-                    siteCode : "",
-                    siteName : "",
-                    deviceTotal : null,
-                    onlineCount : null,
-                    offlineCount : null,
-                    stopCount : null,
-                    unActiveCount : null,
-                };
-                this.resetForm("form");
-            },
-            resetForm(refName) {
-                if (this.$refs[refName]) {
-                    this.$refs[refName].resetFields();
-                }
-            },
-        },
-    };
+    // 表单重置
+    reset() {
+      this.form = {
+        siteId: null,
+        siteCode: "",
+        siteName: "",
+        deviceTotal: null,
+        onlineCount: null,
+        offlineCount: null,
+        stopCount: null,
+        unActiveCount: null,
+      };
+      this.resetForm("form");
+    },
+    resetForm(refName) {
+      if (this.$refs[refName]) {
+        this.$refs[refName].resetFields();
+      }
+    },
+  },
+};
 </script>

device-manager-ui/admin/src/views/sitestat/list.vue

@@ -4,13 +4,8 @@
       <el-col :span="6" :xs="12" class="mytree">
         <el-card>
           <div slot="header">
-            <span 
-              ><b class="cardTitle">站点分布</b></span
-            >
-            <el-button
-              style="float: right; "
-              @click="switchStat"
-              type="text"
+            <span><b class="cardTitle">站点分布</b></span>
+            <el-button style="float: right" @click="switchStat" type="text"
               >切换为地图模式</el-button
             >
           </div>
@@ -122,7 +117,7 @@ export default {
       //进入设备列表页面
       this.$router.push({
         path: "/device/list",
-        query: {sitestatId:row.id,siteId:row.siteId},
+        query: { sitestatId: row.id, siteId: row.siteId },
       });
     },
 
@@ -141,13 +136,15 @@ export default {
         // this.siteMatterTable.siteId = node.id;
         //this.getSiteMatterTableData();
 
-        console.log(node.id.search(",")>-1)
+        console.log(node.id.search(",") > -1);
 
-        if (node.id.search(",")>-1) {
-          console.log(node.id)
-          //this.query = { siteId: node.id.split(",")[0] ,siteIdList:node.id.split(",")}           
+        if (node.id.search(",") > -1) {
+          console.log(node.id);
+          //this.query = { siteId: node.id.split(",")[0] ,siteIdList:node.id.split(",")}
 
-          this.query = { siteIdList:node.id.split(",").map(i=>parseInt(i)) };
+          this.query = {
+            siteIdList: node.id.split(",").map((i) => parseInt(i)),
+          };
         } else {
           this.query = { siteId: node.id };
         }
@@ -168,32 +165,56 @@ export default {
           },
         ],
         columns: [
-            { type: "selection",reserveSelection:true, width: 60 },
-          { type: "index", label: "序号",align:"center", width: 50 },
+          { type: "selection", reserveSelection: true, width: 60 },
+          {
+            type: "index",
+            align: "center",
+            label: "序号",
+            align: "center",
+            width: 50,
+          },
 
-          { label: "站点名称", prop: "siteName" },
+          { label: "站点名称", align: "center", prop: "siteName" },
 
-          { label: "站点编号", prop: "siteCode" },
+          { label: "站点编号", align: "center", prop: "siteCode" },
 
-          { label: "设备总数", prop: "deviceTotal", formatter: this.formatter },
+          {
+            label: "设备总数",
+            align: "center",
+            prop: "deviceTotal",
+            formatter: this.formatter,
+          },
 
-          { label: "在线数量", prop: "onlineCount", formatter: this.formatter },
+          {
+            label: "在线数量",
+            align: "center",
+            prop: "onlineCount",
+            formatter: this.formatter,
+          },
 
           {
             label: "离线数量",
+            align: "center",
             prop: "offlineCount",
             formatter: this.formatter,
           },
 
-          { label: "停用数量", prop: "stopCount", formatter: this.formatter },
+          {
+            label: "停用数量",
+            align: "center",
+            prop: "stopCount",
+            formatter: this.formatter,
+          },
 
           {
             label: "待激活数量",
+            align: "center",
             prop: "unActiveCount",
             formatter: this.formatter,
           },
           {
             label: "操作",
+            align: "center",
             width: 240,
             formatter: (row) => {
               return (
@@ -233,7 +254,7 @@ export default {
   font-size: 16px;
   color: rgb(20, 134, 248);
   list-style-type: none;
-  border-bottom: 3px solid  rgb(20, 134, 248);
+  border-bottom: 3px solid rgb(20, 134, 248);
   padding-bottom: 2px;
 }
 .mytree ::v-deep {

device-manager-ui/admin/src/views/sitestat/mapDetail.vue

@@ -194,7 +194,7 @@ export default {
       });
 
     //this.info = this.$route.query;
-    this.query = {sitestatId:sitestatId, siteId, siteId };
+    this.query = { sitestatId: sitestatId, siteId, siteId };
   },
   methods: {
     formatterDate,
@@ -227,7 +227,7 @@ export default {
         path: "/device/list",
         query: {
           siteId: this.info.siteId,
-          sitestatId:this.info.id
+          sitestatId: this.info.id,
         },
       });
     },
@@ -364,7 +364,7 @@ export default {
   },
 };
 </script>
-<style scoped>
+<style lang="less" scoped>
 .el-divider--horizontal {
   margin: 5, 0, 5, 0;
   background: 0 0;

device-manager-ui/admin/src/views/sitestat/maplist.vue

@@ -5,7 +5,6 @@
         <el-card>
           <div slot="header">
             <span><b class="cardTitle">站点分布</b></span>
-
             <el-button style="float: right" @click="switchStat" type="text"
               >切换为列表模式</el-button
             >
@@ -30,7 +29,6 @@
           </el-scrollbar>
         </el-card> </el-row
     ></Map>
-
     <dialog-show ref="dialogform" @ok="getData" />
   </div>
 </template>
@@ -94,8 +92,8 @@ export default {
       console.log("info:", info);
       this.$router.push({
         path: "/sitestat/mapDetail",
-       // query: info,
-         query: {sitestatId:info.id,siteId:info.siteId},
+        // query: info,
+        query: { sitestatId: info.id, siteId: info.siteId },
       });
     },
 

device-manager-ui/admin/src/views/system/log/list.vue

 
 <template>
   <div class="page">
-    <LayoutTable :data="tableData" notAdd notDel :config="tableConfig"  />
+    <LayoutTable :data="tableData" notAdd notDel :config="tableConfig" />
   </div>
 </template>
 
@@ -26,7 +26,13 @@ export default {
           },
         ],
         columns: [
-          { type: "index", label: "序号",align:"center", width: 50 },
+          {
+            type: "index",
+            align: "center",
+            label: "序号",
+            align: "center",
+            width: 50,
+          },
 
           {
             prop: "userName",

device-manager-ui/admin/src/views/system/menu/list.vue

 <template>
   <div class="page">
-    <LayoutTable :data='tableData' :config='tableConfig' notPagination  />
+    <LayoutTable :data="tableData" :config="tableConfig" notPagination />
     <dialog-show ref="dialogform" @ok="getData" />
   </div>
 </template>
 
 <script>
-import table from '@/assets/mixins/table';
+import table from "@/assets/mixins/table";
 import dialogShow from "./dialogshow";
 
 export default {
@@ -16,8 +16,8 @@ export default {
     beforeRender(data) {
       this.allMenu = this.sortByGroup(this.util_copy(data.data));
       // 存在查询条件，展开全部
-      if(Object.keys(this.$route.query).length) {
-        this.select = this.allMenu.filter(i=>!i.parentId).map(i=>i.id);
+      if (Object.keys(this.$route.query).length) {
+        this.select = this.allMenu.filter((i) => !i.parentId).map((i) => i.id);
       }
       return data;
     },
@@ -26,51 +26,57 @@ export default {
     },
     // 按parentId排序分组
     sortByGroup(data) {
-      return data.filter(i=>!i.parentId).reduce((prev, item)=>{
-        return prev.concat([item], data.filter(i=>i.parentId == item.id));
-      }, [])
+      return data
+        .filter((i) => !i.parentId)
+        .reduce((prev, item) => {
+          return prev.concat(
+            [item],
+            data.filter((i) => i.parentId == item.id)
+          );
+        }, []);
     },
     // 查看下级菜单
-    selectHandler({id}) {
+    selectHandler({ id }) {
       // 如果已展开，则关闭
       const index = this.select.indexOf(id);
-      if(index > -1) {
+      if (index > -1) {
         this.select.splice(index, 1);
-      }else{
+      } else {
         this.select.push(id);
       }
       this.showChild();
     },
     showChild() {
-      this.tableData.data = this.allMenu.filter(item=>{
-        return !item.parentId || this.select.indexOf(item.parentId) > -1
+      this.tableData.data = this.allMenu.filter((item) => {
+        return !item.parentId || this.select.indexOf(item.parentId) > -1;
       });
     },
     // 展示菜单图标
     showIcon(row, column) {
-      return <i class={'el-icon-'+row.imgPath}></i>
+      return <i class={"el-icon-" + row.imgPath}></i>;
     },
     // 操作菜单状态
     changeStatus(row, column) {
       return (
-        <my-switch 
-          confirm 
-          url='/menu/save'
-          row={row} 
+        <my-switch
+          confirm
+          url="/menu/save"
+          row={row}
           onChange={this.statusChange}
-          value={this.tableData.data} 
-          onInput={(data)=>{
+          value={this.tableData.data}
+          onInput={(data) => {
             this.tableData.data = data;
-          }}/>
-      )
+          }}
+        />
+      );
     },
     afterDel(id) {
-      this.$store.dispatch('login');
+      this.$store.dispatch("login");
     },
     statusChange() {
-      this.$store.dispatch('login');
+      this.$store.dispatch("login");
     },
-     handleUp(data) {
+    handleUp(data) {
       let type = 0;
       let url = "/menu/upOrDown";
       this.switchSort(url, data.id, type);
@@ -78,7 +84,7 @@ export default {
 
     handleDown(data) {
       let type = 1;
-       let url = "/menu/upOrDown";
+      let url = "/menu/upOrDown";
       this.switchSort(url, data.id, type);
     },
 
@@ -90,7 +96,7 @@ export default {
       })
         .then((res) => {
           if (res && res.code && res.code == 1) {
-            this.getData()
+            this.getData();
             this.loading = false;
 
             this.$message.success("更新排序成功！");
@@ -119,101 +125,122 @@ export default {
       allMenu: [], // 经过分组排序的表格数据
       select: [], // 当前展开的树节点
       query: {
-        'size': -1
+        size: -1,
       },
       config: {
         search: [
           {
-            name: 'name',
-            type: 'text',
-            label: '菜单名称',
+            name: "name",
+            type: "text",
+            label: "菜单名称",
           },
         ],
         columns: [
-             { type: "selection",reserveSelection:true, width: 60 },
-          { type: "index", label: "序号",align:"center", width: 50 },
           {
+            type: "selection",
+            align: "center",
+            reserveSelection: true,
             width: 60,
-            formatter: row => {
-              const icon = this.select.indexOf(row.id) === -1 ? 'right' : 'down';
-              return (
-                !row.parentId
-                ? <div onClick={()=>{this.selectHandler(row)}}>
-                  <i class={'el-icon-arrow-'+icon}></i>
+          },
+          { type: "index", label: "序号", align: "center", width: 50 },
+          {
+            width: 60,
+            align: "center",
+            formatter: (row) => {
+              const icon =
+                this.select.indexOf(row.id) === -1 ? "right" : "down";
+              return !row.parentId ? (
+                <div
+                  onClick={() => {
+                    this.selectHandler(row);
+                  }}
+                >
+                  <i class={"el-icon-arrow-" + icon}></i>
                 </div>
-                : ''
-              )
-            }
+              ) : (
+                ""
+              );
+            },
           },
           {
-            prop: 'id',
-            label: 'ID',
+            prop: "id",
+            align: "center",
+            label: "ID",
             width: 60,
           },
           {
-            prop: 'name',
-            label: '名称',
+            prop: "name",
+            align: "center",
+            label: "名称",
             width: 160,
           },
           {
-            prop: 'imgPath',
-            label: '图标',
+            prop: "imgPath",
+            align: "center",
+            label: "图标",
             width: 120,
             // formatter: this.showIcon,
           },
           {
-            prop: 'authType',
-            label: '权限类型',
+            prop: "authType",
+            align: "center",
+            label: "权限类型",
             formatter: this.formatter,
           },
           {
-            prop: 'parentId',
-            label: '父ID',
+            prop: "parentId",
+            align: "center",
+            label: "父ID",
           },
           {
-            prop: 'url',
-            label: '地址',
+            prop: "url",
+            align: "center",
+            label: "地址",
           },
           {
-            prop: 'status',
-            label: '状态',
+            prop: "status",
+            align: "center",
+            label: "状态",
             width: 100,
             formatter: this.changeStatus,
           },
           {
-            label: '操作',
-            formatter: (row)=> {
+            label: "操作",
+            align: "center",
+            formatter: (row) => {
               return (
+                <div>
+                  <el-link
+                    style="margin-right:5px;margin-left:5px"
+                    icon="el-icon-top"
+                    onClick={() => {
+                      this.handleUp(row);
+                    }}
+                  ></el-link>
 
-               <div>
-                   <el-link
-              style="margin-right:5px;margin-left:5px"
-              icon="el-icon-top"
-              onClick={() => {
-                this.handleUp(row);
-              }}
-            ></el-link>
-
-            <el-link
-              style="margin-right:5px;margin-left:5px"
-              icon="el-icon-bottom"
-              onClick={() => {
-                this.handleDown(row);
-              }}
-               
-  ></el-link>
-
-                <table-buttons    noView row={row} onEdit={this.toEdit} onDel={this.toDel} />
+                  <el-link
+                    style="margin-right:5px;margin-left:5px"
+                    icon="el-icon-bottom"
+                    onClick={() => {
+                      this.handleDown(row);
+                    }}
+                  ></el-link>
 
+                  <table-buttons
+                    noView
+                    row={row}
+                    onEdit={this.toEdit}
+                    onDel={this.toDel}
+                  />
                 </div>
-              )
+              );
             },
           },
         ],
       },
-    }
-  }
-}
+    };
+  },
+};
 </script>
 
 

device-manager-ui/admin/src/views/system/menu/show.vue

 <template>
   <layout-form>
     <el-form
-      :model="form" 
-      :loading="loading" 
-      :rules="rules" 
-      size='small'
-      label-width='100px'
-      ref="form" 
+      :model="form"
+      :loading="loading"
+      :rules="rules"
+      size="small"
+      label-width="100px"
+      ref="form"
     >
       <el-row>
-        <Field label="ID" prop="id" v-model="form.id" v-if='pageInfo.type !== "add"' disabled />
-        <Field label="名称" prop="name" v-model="form.name"/>
-        <Field label="权限类型" prop="authType" v-model="form.authType" :enumData='dict.authType' type='select' />
-        <Field label="父级菜单" prop="parentId" v-model="form.parentId" :enumData='menu' type='select' />
+        <Field
+          label="ID"
+          prop="id"
+          v-model="form.id"
+          v-if="pageInfo.type !== 'add'"
+          disabled
+        />
+        <Field label="名称" prop="name" v-model="form.name" />
+        <Field
+          label="权限类型"
+          prop="authType"
+          v-model="form.authType"
+          :enumData="dict.authType"
+          type="select"
+        />
+        <Field
+          label="父级菜单"
+          prop="parentId"
+          v-model="form.parentId"
+          :enumData="menu"
+          type="select"
+        />
         <Field label="访问地址" prop="url" v-model="form.url" />
-        <Field label="状态" prop="status" v-model="form.status" :enumData='dict.status' type='radio' />
-        <Field label="图标" prop="imgPath" :span='24'>
-          <el-radio-group v-model="form.imgPath" class='form-el-radio-group'>
+        <Field
+          label="状态"
+          prop="status"
+          v-model="form.status"
+          :enumData="dict.status"
+          type="radio"
+        />
+        <Field label="图标" prop="imgPath" :span="24">
+          <el-radio-group v-model="form.imgPath" class="form-el-radio-group">
             <el-radio-button label="">不需要图标</el-radio-button>
-            <el-radio-button v-for='(icon, index) in icons' :key='index' :label="icon">
-              <i :class="'el-icon-'+icon"></i>
-              {{icon}}
+            <el-radio-button
+              v-for="(icon, index) in icons"
+              :key="index"
+              :label="icon"
+            >
+              <i :class="`iconfont ${icon}`"></i>
+              {{ icon }}
             </el-radio-button>
           </el-radio-group>
         </Field>
       </el-row>
-      <form-buttons @submit='submitForm'/>
+      <form-buttons @submit="submitForm" />
     </el-form>
   </layout-form>
 </template>
 
 <script>
-import form from '@/assets/mixins/form';
+import form from "@/assets/mixins/form";
 
 export default {
   mixins: [form],
   methods: {
     afterSubmit() {
-      this.$store.dispatch('login');
+      this.$store.dispatch("login");
       this.$router.go(-1);
     },
   },
   computed: {
     menu() {
-      let menu = {'0': '无'};
-      this.$store.state.userData.barList.forEach(item=>{
-        menu[item.id+''] = item.name
+      let menu = { 0: "无" };
+      this.$store.state.userData.barList.forEach((item) => {
+        menu[item.id + ""] = item.name;
       });
       return menu;
-    }
+    },
   },
   data() {
     return {
-      toString: ['parentId', 'authType', 'status'],
+      toString: ["parentId", "authType", "status"],
       icons: [
-        'info', 'error', 'success', 'warning', 'question',
-        'tickets', 'document', 'goods', 'sold-out', 'news',
-        'message', 'date', 'printer', 'time', 'bell',
-        'mobile-phone', 'service', 'view', 'menu', 'star-on',
-        'location', 'phone', 'picture', 'delete', 'search',
-        'edit', 'rank', 'refresh', 'share', 'setting',
-        'upload', 'upload2', 'download', 'loading',
+        "icon-shouye",
+        "icon-shezhi",
+        "icon-xiaoxi",
+        "icon-xitongguanli",
+        "icon-gaojing",
+        "icon-dalou",
+        "icon-xitongguanli1",
       ],
       rules: {
-        name: [
-          { required: true, message: '请输入名称', trigger: 'blur' },
-        ],
+        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
       },
-    }
-  }
-}
+    };
+  },
+};
 </script>
 

device-manager-ui/admin/src/views/system/param/list.vue

 <template>
   <div class="page">
-    <LayoutTable :data='tableData' :config='tableConfig'  />
+    <LayoutTable :data="tableData" :config="tableConfig" />
     <dialog-show ref="dialogform" @ok="getData" />
   </div>
 </template>
 
 <script>
-import table from '@/assets/mixins/table';
+import table from "@/assets/mixins/table";
 import dialogShow from "./dialogshow";
 export default {
   mixins: [table],
-  components: {dialogShow },
+  components: { dialogShow },
   methods: {
     // 新增
     toAdd(row) {
@@ -21,89 +21,109 @@ export default {
       this.$refs.dialogform.edit(row);
     },
     // 查看
-    toView(row,) {
-       this.$refs.dialogform.view(row);
+    toView(row) {
+      this.$refs.dialogform.view(row);
     },
-
   },
   data() {
     return {
       config: {
         search: [
           {
-            name: 'name',
-            type: 'text',
-            label: '参数名称',
+            name: "name",
+            type: "text",
+            label: "参数名称",
           },
         ],
         columns: [
-             { type: "selection",reserveSelection:true, width: 60 },
-          { type: "index", label: "序号",align:"center", width: 50 },
           {
-            prop: 'name',
-            label: '参数名称',
+            type: "selection",
+            align: "center",
+            reserveSelection: true,
+            width: 60,
+          },
+          { type: "index", label: "序号", align: "center", width: 50 },
+          {
+            prop: "name",
+            align: "center",
+            label: "参数名称",
           },
           {
-            prop: 'firstOrganize',
-            label: '一级组织',
+            prop: "firstOrganize",
+            align: "center",
+            label: "一级组织",
           },
           {
-            prop: 'secondOrganize',
-            label: '二级组织',
+            prop: "secondOrganize",
+            align: "center",
+            label: "二级组织",
           },
           {
-            prop: 'paramKey',
-            label: '参数键',
+            prop: "paramKey",
+            align: "center",
+            label: "参数键",
           },
           {
-            prop: 'paramValue',
-            label: '参数值',
+            prop: "paramValue",
+            align: "center",
+            label: "参数值",
             // formatter: this.util_short('paramValue', 20)
           },
           {
-            prop: 'validStatus',
-            label: '有效状态',
+            prop: "validStatus",
+            align: "center",
+            label: "有效状态",
             width: 70,
-            formatter: this.formatter
+            formatter: this.formatter,
           },
           {
-            prop: 'modStatus',
-            label: '修改状态',
+            prop: "modStatus",
+            align: "center",
+            label: "修改状态",
             width: 100,
-            formatter: this.formatter
+            formatter: this.formatter,
           },
           {
-            prop: 'displayType',
-            label: '展现类型',
+            prop: "displayType",
+            align: "center",
+            label: "展现类型",
             width: 100,
-            formatter: this.formatter
+            formatter: this.formatter,
           },
           {
-            prop: 'remark',
-            label: '备注',
+            prop: "remark",
+            align: "center",
+            label: "备注",
           },
           {
-            label: '操作',
+            label: "操作",
+            align: "center",
             width: 260,
-            formatter: (row)=> {
+            formatter: (row) => {
               return (
-                 <table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} />
-              )
+                <table-buttons
+                  noAdd
+                  row={row}
+                  onEdit={this.toEdit}
+                  onView={this.toView}
+                  onDel={this.toDel}
+                />
+              );
             },
           },
         ],
       },
-    }
-  }
-}
+    };
+  },
+};
 </script>
 <style lang="css">
-.el-tooltip__popper{
+.el-tooltip__popper {
   display: inline-block;
   max-width: 80%;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: normal ;
+  white-space: normal;
   line-height: 18px;
   cursor: pointer;
 }

device-manager-ui/admin/src/views/system/resource/list.vue

 <template>
   <div class="page">
-    <LayoutTable :data='tableData' :config='tableConfig'  />
-     <dialog-show ref="dialogform" @ok="getData" />
+    <LayoutTable :data="tableData" :config="tableConfig" />
+    <dialog-show ref="dialogform" @ok="getData" />
   </div>
 </template>
 
 <script>
-import table from '@/assets/mixins/table';
+import table from "@/assets/mixins/table";
 import dialogShow from "./dialogshow";
 export default {
   mixins: [table],
-    components: {
+  components: {
     dialogShow,
   },
   methods: {
@@ -32,56 +32,70 @@ export default {
       config: {
         search: [
           {
-            name: 'name',
-            type: 'text',
-            label: '资源名称',
+            name: "name",
+            type: "text",
+            label: "资源名称",
           },
           {
-            name: 'authType',
-            type: 'select',
-            label: '权限类型',
+            name: "authType",
+            type: "select",
+            label: "权限类型",
           },
         ],
         columns: [
-            { type: "selection",reserveSelection:true, width: 60 },
-          { type: "index", label: "序号",align:"center", width: 50 },
+          {
+            type: "selection",
+            align: "center",
+            reserveSelection: true,
+            width: 60,
+          },
+          { type: "index", label: "序号", align: "center", width: 50 },
           // {
           //   prop: 'id',
           //   label: 'ID',
           // },
           {
-            prop: 'name',
-            label: '名称',
+            prop: "name",
+            align: "center",
+            label: "名称",
           },
           {
-            prop: 'url',
-            label: '资源',
+            prop: "url",
+            align: "center",
+            label: "资源",
           },
           {
-            prop: 'authType',
-            label: '认证类型',
-         
+            prop: "authType",
+            align: "center",
+            label: "认证类型",
+
             formatter: this.formatter,
-          }, 
+          },
           // {
           //   prop: 'userType',
           //   label: '用户类型',
           //   width: 100,
           //   formatter: this.formatter,
-          // }, 
+          // },
           {
-            label: '操作',
+            label: "操作",
+            align: "center",
             witdh: 120,
-            formatter: (row)=> {
+            formatter: (row) => {
               return (
-                <table-buttons     noView row={row} onEdit={this.toEdit} onDel={this.toDel} />
-              )
+                <table-buttons
+                  noView
+                  row={row}
+                  onEdit={this.toEdit}
+                  onDel={this.toDel}
+                />
+              );
             },
           },
         ],
       },
-    }
-  }
-}
+    };
+  },
+};
 </script>
 

device-manager-ui/admin/src/views/system/role/list.vue

 <template>
   <div class="page">
-    <LayoutTable :data="tableData" :config="tableConfig"  />
+    <LayoutTable :data="tableData" :config="tableConfig" />
     <dialog-show ref="dialogform" @ok="getData" />
     <el-dialog title="分配权限" :visible.sync="auth.visible">
       <el-form :model="auth.form">
@@ -158,7 +158,7 @@ import table from "@/assets/mixins/table";
 import dialogShow from "./dialogshow";
 export default {
   mixins: [table],
-   components: { dialogShow },
+  components: { dialogShow },
   created() {},
   methods: {
     beforeRender(data) {
@@ -186,7 +186,7 @@ export default {
         return this.allResources;
       }
       return new Promise((resolve, reject) => {
-        this.$post("/resource/list", {size: -1})
+        this.$post("/resource/list", { size: -1 })
           .then(({ data }) => {
             resolve(this.groupByAuth(data.data));
           })
@@ -224,8 +224,8 @@ export default {
     getRoleAuths(id) {
       return new Promise((resolve, reject) => {
         this.$post("/role/auth/list", {
-          "roleId": id,
-          "size": -1,
+          roleId: id,
+          size: -1,
         })
           .then(({ data }) => {
             const result = data.data.map((i) => i.resourceId);
@@ -257,7 +257,7 @@ export default {
       //   return this.allUsers;
       // }
       return new Promise((resolve, reject) => {
-        this.$post("/user/list", { size: -1  })
+        this.$post("/user/list", { size: -1 })
           .then(({ data }) => {
             resolve(data.data);
           })
@@ -283,10 +283,10 @@ export default {
 
     async getUsersoo(userTypeIdVal, loginNameVal, realNameVal) {
       const query = {
-        "size": -1,
-        "userType": userTypeIdVal,
-        "loginName": loginNameVal,
-        "realName": realNameVal,
+        size: -1,
+        userType: userTypeIdVal,
+        loginName: loginNameVal,
+        realName: realNameVal,
       };
       return new Promise((resolve, reject) => {
         this.$post("/user/list", query)
@@ -338,8 +338,8 @@ export default {
     getRoleUsers(id) {
       return new Promise((resolve, reject) => {
         this.$post("/role/user/list", {
-          "roleId": id,
-          "size": -1,
+          roleId: id,
+          size: -1,
         })
           .then(({ data }) => {
             const result = data.data
@@ -382,8 +382,8 @@ export default {
     async saveUser() {
       try {
         //this.user.form.userIdList = this.user.checkList.join(",");
-        this.user.form.userIdList = this.user.checkList
-        await this.$post("/role/user/distributionUser",  this.user.form,);
+        this.user.form.userIdList = this.user.checkList;
+        await this.$post("/role/user/distributionUser", this.user.form);
         this.user.visible = false;
         this.user.form = this.initForm();
         this.$message.success("操作成功");
@@ -447,18 +447,24 @@ export default {
             type: "text",
             label: "角色名",
           },
-
         ],
         columns: [
-          { type: "selection",reserveSelection:true, width: 60 },
-          { type: "index", label: "序号",align:"center", width: 50 },
+          {
+            type: "selection",
+            align: "center",
+            reserveSelection: true,
+            width: 60,
+          },
+          { type: "index", label: "序号", align: "center", width: 50 },
 
           {
             prop: "name",
+            align: "center",
             label: "角色名",
           },
-             {
+          {
             prop: "remark",
+            align: "center",
             label: "备注",
           },
           // {
@@ -469,12 +475,14 @@ export default {
           // },
           {
             prop: "createTime",
+            align: "center",
             label: "创建时间",
             formatter: this.formatterDate,
           },
-       
+
           {
             label: "操作",
+            align: "center",
             witdh: 120,
             formatter: (row) => {
               return (
@@ -485,16 +493,15 @@ export default {
                     onEdit={this.toEdit}
                     onDel={this.toDel}
                   />{" "}
-       
-                    <el-button
-                      icon="el-icon-share"
-                      size="mini"
-                      type="text"
-                      onClick={() => this.setAuth(row)}
-                    >
-                      分配权限
-                    </el-button>
-                    {/*
+                  <el-button
+                    icon="el-icon-share"
+                    size="mini"
+                    type="text"
+                    onClick={() => this.setAuth(row)}
+                  >
+                    分配权限
+                  </el-button>
+                  {/*
                     <el-button
                       icon="el-icon-goods"
                       size="mini"

device-manager-ui/admin/src/views/system/task/list.vue

@@ -41,9 +41,13 @@ export default {
           },
         ],
         columns: [
-
-             { type: "selection",reserveSelection:true, width: 60 },
-          { type: "index", label: "序号",align:"center", width: 50 },
+          {
+            type: "selection",
+            align: "center",
+            reserveSelection: true,
+            width: 60,
+          },
+          { type: "index", label: "序号", align: "center", width: 50 },
           {
             prop: "name",
             label: "任务名称",

device-manager-ui/admin/vue.config.js

@@ -17,10 +17,10 @@ module.exports = {
 		hot: true,//自动保存
 		proxy: {
 			'/m': {
-				target: 'http://127.0.0.1:18222',
+				target: 'http://192.168.0.98:11091',
 				changeOrigin: true,
 				secure: false,
-				cookieDomainRewrite: 'plm.testnew.com',
+				cookieDomainRewrite: 'plm.testnew.com',			
 			}
 		}
 	}