Commit 8b1ae536 authored by 赵啸非's avatar 赵啸非

Merge remote-tracking branch 'origin/master'

parents d286341b 3234e8d6
/* 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;
}
<!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>
@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";
}
!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
{
"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
}
]
}
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
...@@ -150,9 +150,18 @@ ins,a { ...@@ -150,9 +150,18 @@ ins,a {
} }
} }
} }
.table-foot{
display: flex;
justify-content: flex-end;
}
.el-table th { .el-table th {
user-select: all; user-select: all;
} }
/* el-table列数据为空自动显示-- */
.cell:empty::before{
content:'--';
color:gray;
}
.el-progress-bar{ .el-progress-bar{
padding-right: 70px; padding-right: 70px;
margin-right: -70px; margin-right: -70px;
......
<template lang="html"> <template lang="html">
<div style="width:100%;height:800px;"> <div style="width:100%;height:100%;">
<div class="container"> <div class="container">
<!-- <div class="search-box"> <!-- <div class="search-box">
<input <input
...@@ -33,22 +33,22 @@ ...@@ -33,22 +33,22 @@
</template> </template>
<script> <script>
import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap' import { AMapManager, lazyAMapApiLoaderInstance } from "vue-amap";
let amapManager = new AMapManager() let amapManager = new AMapManager();
export default { export default {
name:'AMap', name: "AMap",
data() { data() {
let self = this let self = this;
return { return {
address: null, address: null,
searchKey: '', searchKey: "",
amapManager, amapManager,
markers: [], markers: [],
searchOption: { searchOption: {
city: '全国', city: "全国",
citylimit: true citylimit: true,
}, },
center: [112.938888,28.228272], center: [112.938888, 28.228272],
zoom: 17, zoom: 17,
lng: 0, lng: 0,
lat: 0, lat: 0,
...@@ -56,153 +56,153 @@ export default { ...@@ -56,153 +56,153 @@ export default {
events: { events: {
init() { init() {
lazyAMapApiLoaderInstance.load().then(() => { lazyAMapApiLoaderInstance.load().then(() => {
self.initSearch() self.initSearch();
}) });
}, },
// 点击获取地址的数据 // 点击获取地址的数据
click(e) { click(e) {
self.markers = [] self.markers = [];
let { lng, lat } = e.lnglat let { lng, lat } = e.lnglat;
self.lng = lng self.lng = lng;
self.lat = lat self.lat = lat;
self.center = [lng, lat] self.center = [lng, lat];
self.markers.push([lng, lat]) self.markers.push([lng, lat]);
// 这里通过高德 SDK 完成。 // 这里通过高德 SDK 完成。
let geocoder = new AMap.Geocoder({ let geocoder = new AMap.Geocoder({
radius: 1000, radius: 1000,
extensions: 'all' extensions: "all",
}) });
geocoder.getAddress([lng, lat], function(status, result) { geocoder.getAddress([lng, lat], function (status, result) {
if (status === 'complete' && result.info === 'OK') { if (status === "complete" && result.info === "OK") {
if (result && result.regeocode) { if (result && result.regeocode) {
console.log(result.regeocode.formattedAddress) //控制台打印地址 console.log(result.regeocode.formattedAddress); //控制台打印地址
self.address = result.regeocode.formattedAddress self.address = result.regeocode.formattedAddress;
self.searchKey = result.regeocode.formattedAddress self.searchKey = result.regeocode.formattedAddress;
self.$nextTick() self.$nextTick();
} }
} }
}) });
} },
}, },
// 一些工具插件 // 一些工具插件
plugin: [ plugin: [
{ {
pName: 'Geocoder', pName: "Geocoder",
events: { events: {
init (o) { init(o) {
//console.log("一些工具插件--地址"+o.getAddress()) //console.log("一些工具插件--地址"+o.getAddress())
} },
} },
}, },
{ {
// 定位 // 定位
pName: 'Geolocation', pName: "Geolocation",
events: { events: {
init(o) { init(o) {
// o是高德地图定位插件实例 // o是高德地图定位插件实例
o.getCurrentPosition((status, result) => { o.getCurrentPosition((status, result) => {
if (result && result.position) { 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.center = [self.lng, self.lat];
self.markers.push([self.lng, self.lat]) self.markers.push([self.lng, self.lat]);
// load // load
self.loaded = true self.loaded = true;
// 页面渲染好后 // 页面渲染好后
self.$nextTick() self.$nextTick();
} }
}) });
} },
} },
}, },
{ {
// 工具栏 // 工具栏
pName: 'ToolBar', pName: "ToolBar",
events: { events: {
init(instance) { init(instance) {
//console.log("工具栏:"+instance); //console.log("工具栏:"+instance);
} },
} },
}, },
{ {
// 鹰眼 // 鹰眼
pName: 'OverView', pName: "OverView",
events: { events: {
init(instance) { init(instance) {
//console.log("鹰眼:"+instance); //console.log("鹰眼:"+instance);
} },
} },
}, },
{ {
// 地图类型 // 地图类型
pName: 'MapType', pName: "MapType",
defaultType: 0, defaultType: 0,
events: { events: {
init(instance) { init(instance) {
//console.log("地图类型:"+instance); //console.log("地图类型:"+instance);
} },
} },
}, },
{ {
// 搜索 // 搜索
pName: 'PlaceSearch', pName: "PlaceSearch",
events: { events: {
init(instance) { init(instance) {
//console.log("搜索:"+instance) //console.log("搜索:"+instance)
} },
} },
} },
] ],
} };
}, },
methods: { methods: {
initSearch() { initSearch() {
let vm = this let vm = this;
let map = this.amapManager.getMap() let map = this.amapManager.getMap();
AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) { AMapUI.loadUI(["misc/PoiPicker"], function (PoiPicker) {
var poiPicker = new PoiPicker({ var poiPicker = new PoiPicker({
input: 'search', input: "search",
placeSearchOptions: { placeSearchOptions: {
map: map, map: map,
pageSize: 10 pageSize: 10,
}, },
suggestContainer: 'searchTip', suggestContainer: "searchTip",
searchResultsContainer: 'searchTip' searchResultsContainer: "searchTip",
}) });
vm.poiPicker = poiPicker vm.poiPicker = poiPicker;
// 监听poi选中信息 // 监听poi选中信息
poiPicker.on('poiPicked', function(poiResult) { poiPicker.on("poiPicked", function (poiResult) {
// console.log(poiResult) // console.log(poiResult)
let source = poiResult.source let source = poiResult.source;
let poi = poiResult.item let poi = poiResult.item;
if (source !== 'search') { if (source !== "search") {
poiPicker.searchByKeyword(poi.name) poiPicker.searchByKeyword(poi.name);
} else { } else {
poiPicker.clearSearchResults() poiPicker.clearSearchResults();
vm.markers = [] vm.markers = [];
let lng = poi.location.lng let lng = poi.location.lng;
let lat = poi.location.lat let lat = poi.location.lat;
let address = poi.cityname + poi.adname + poi.name let address = poi.cityname + poi.adname + poi.name;
vm.center = [lng, lat] vm.center = [lng, lat];
vm.markers.push([lng, lat]) vm.markers.push([lng, lat]);
vm.lng = lng vm.lng = lng;
vm.lat = lat vm.lat = lat;
vm.address = address vm.address = address;
vm.searchKey = address vm.searchKey = address;
} }
}) });
}) });
}, },
searchByHand() { searchByHand() {
if (this.searchKey !== '') { if (this.searchKey !== "") {
this.poiPicker.searchByKeyword(this.searchKey) this.poiPicker.searchByKeyword(this.searchKey);
} }
} },
} },
} };
</script> </script>
<style lang="css"> <style lang="css">
......
...@@ -6,61 +6,83 @@ ...@@ -6,61 +6,83 @@
<div class="layout-menu flex flex-1"> <div class="layout-menu flex flex-1">
<!-- logo --> <!-- logo -->
<div class="layout-logo flex"> <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="/"> <router-link to="/">
<img src="../assets/images/logo.png" style="margin-bottom:5px" height="40" alt=""> <img
<b style="color:white;font-size:18px;">&nbsp;&nbsp;&nbsp; AIOT智慧边缘物联网系统 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b> 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> </router-link>
</div> </div>
<!-- 一级菜单 --> <!-- 一级菜单 -->
<ul class="menu-list flex"> <ul class="menu-list flex">
<li v-for='item in menu' :key='item.id'> <li v-for="item in menu" :key="item.id">
<router-link :to="item.path" :active='submenu.path === item.path' :title="item.name"> <router-link
<i :class="'el-icon-'+item.icon"></i> :to="item.path"
{{item.name}} :active="submenu.path === item.path"
:title="item.name"
>
<i :class="`iconfont ${item.icon}`"></i>
<span>
{{ item.name }}
</span>
</router-link> </router-link>
</li> </li>
</ul> </ul>
</div> </div>
<div class="layout-profile"> <div class="layout-profile">
<!-- <span class="el-dropdown-link">
<!-- <span class="el-dropdown-link">
{{userData.currUserName}} {{userData.currUserName}}
<i class="el-icon-arrow-down el-icon--right"></i> <i class="el-icon-arrow-down el-icon--right"></i>
</span> --> </span> -->
<el-dropdown @command="handleCommand"> <el-dropdown @command="handleCommand">
<span class="el-dropdown-link" style="color:white"> <span class="el-dropdown-link" style="color: white">
{{userData.currUserName}} {{ userData.currUserName }}
<i class="el-icon-arrow-down el-icon--right"></i> <i class="el-icon-arrow-down el-icon--right"></i>
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item command="update">修改密码</el-dropdown-item> <el-dropdown-item command="update">修改密码</el-dropdown-item>
<el-dropdown-item command="logout">退出登录</el-dropdown-item> <el-dropdown-item command="logout">退出登录</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> </div>
</div> </div>
<!-- 一级菜单 --> <!-- 一级菜单 -->
<ul class="mobile-menu-list flex flex-pack-justify" v-if='showMobileMenu'> <ul class="mobile-menu-list flex flex-pack-justify" v-if="showMobileMenu">
<li v-for='item in menu' :key='item.id'> <li v-for="item in menu" :key="item.id">
<router-link :to="item.path" :active='submenu.path === item.path' :title="item.name"> <router-link
<i :class="'el-icon-'+item.icon"></i> :to="item.path"
{{item.name}} :active="submenu.path === item.path"
:title="item.name"
>
<i :class="'el-icon-' + item.icon"></i>
{{ item.name }}
</router-link> </router-link>
</li> </li>
</ul> </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"> <div class="layout-submenu">
<ul class="submenu-list flex"> <ul class="submenu-list flex">
<li v-for='item in submenu.children' :key='item.id'> <li v-for="item in submenu.children" :key="item.id">
<a :href="item.path" target="blank" v-if="item.isOut">{{
<a :href="item.path" target="blank" v-if='item.isOut'>{{item.name}}</a> item.name
<router-link :to="item.path" :active='group === item.path' v-else>{{item.name}}</router-link> }}</a>
<router-link :to="item.path" :active="group === item.path" v-else>{{
item.name
}}</router-link>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -73,27 +95,30 @@ export default { ...@@ -73,27 +95,30 @@ export default {
name: "Header", name: "Header",
methods: { methods: {
handleCommand(key) { handleCommand(key) {
if(key === 'update'){ if (key === "update") {
this.$router.push('/login/updatePwd') this.$router.push("/login/updatePwd");
} }
if(key === 'logout'){ if (key === "logout") {
this.logout() this.logout();
} }
}, },
// 退出登录 // 退出登录
logout() { logout() {
this.$post('/login/logout').then(data=>{}).catch(error=>{}).then(()=>{ this.$post("/login/logout")
this.$message.success('已退出登录'); .then((data) => {})
this.$store.commit('logout'); .catch((error) => {})
this.$router.replace('/login'); .then(() => {
}) this.$message.success("已退出登录");
} this.$store.commit("logout");
this.$router.replace("/login");
});
},
}, },
beforeDestroy() { beforeDestroy() {
console.log("beforeDestroy"); console.log("beforeDestroy");
//window.removeEventListener("message", this.getsocketData, false); //window.removeEventListener("message", this.getsocketData, false);
}, },
mounted() { mounted() {
// console.log("mounted"); // console.log("mounted");
// this.$nextTick(function () { // this.$nextTick(function () {
// console.log("login websocket:"+"ws://"+process.env.VUE_APP_WEBSOCKET_API +"/ws?accessToken="+ this.$store.state.userData.id) // console.log("login websocket:"+"ws://"+process.env.VUE_APP_WEBSOCKET_API +"/ws?accessToken="+ this.$store.state.userData.id)
...@@ -104,12 +129,10 @@ export default { ...@@ -104,12 +129,10 @@ export default {
// this.$store.state.userData.id // this.$store.state.userData.id
// ); // );
// }); // });
// let _this = this; // let _this = this;
// const getsocketData = (e) => {i // const getsocketData = (e) => {i
// // 创建接收消息函数 // // 创建接收消息函数
// const data = e && e.detail.data; // const data = e && e.detail.data;
// let obj = JSON.parse(data); // let obj = JSON.parse(data);
// if (obj.type == "SEND_TO_ALL_REQUEST") { // if (obj.type == "SEND_TO_ALL_REQUEST") {
// vm.refreshData(); // vm.refreshData();
...@@ -120,146 +143,160 @@ export default { ...@@ -120,146 +143,160 @@ export default {
// type: "warning", // type: "warning",
// duration: 8000, // duration: 8000,
// }); // });
// } // }
// }; // };
// this.getsocketData = getsocketData; // this.getsocketData = getsocketData;
// // 注册监听事件 // // 注册监听事件
// window.addEventListener("onmessageWS", getsocketData,false); // window.addEventListener("onmessageWS", getsocketData,false);
},
},
computed: { computed: {
activeMenu() {
return this.$route.path;
},
group() { group() {
const relativeGroup = this.$store.state.group; const relativeGroup = this.$store.state.group;
if(relativeGroup) { if (relativeGroup) {
return relativeGroup; return relativeGroup;
} }
let groupArray = this.$route.path.split('/'); let groupArray = this.$route.path.split("/");
let group = this.$route.path; let group = this.$route.path;
let type = groupArray.pop(); let type = groupArray.pop();
if(['add', 'edit', 'view', 'new','importView','resetPwdView'].indexOf(type) > -1){ if (
groupArray.push('list'); ["add", "edit", "view", "new", "importView", "resetPwdView"].indexOf(
group = groupArray.join('/') type
) > -1
) {
groupArray.push("list");
group = groupArray.join("/");
} }
return group; return group;
}, },
relativeGroup() { relativeGroup() {
return this.$store.state.group return this.$store.state.group;
}, },
flat() { flat() {
return this.userData.flat return this.userData.flat;
}, },
menu() { menu() {
if(!this.userData.barList) return []; if (!this.userData.barList) return [];
return this.userData.barList.map(item=>{ return this.userData.barList.map((item) => {
const url = item.url ? item.url : (item.childList[0] ? (item.childList[0].url || '') : ''); const url = item.url
? item.url
: item.childList[0]
? item.childList[0].url || ""
: "";
return { return {
name: item.name, name: item.name,
path: url, path: url,
id: item.id, id: item.id,
icon: item.imgPath, icon: item.imgPath,
children: item.childList.map(sub=>{ children: item.childList.map((sub) => {
return { return {
name: sub.name, 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, id: sub.id,
parentId: sub.parentId, parentId: sub.parentId,
icon: sub.imgPath, icon: sub.imgPath,
isOut: /^https?\:\/\//.test(sub.url) isOut: /^https?\:\/\//.test(sub.url),
} };
}) }),
} };
}) });
}, },
submenu() { submenu() {
if(!this.menu.length) return {}; if (!this.menu.length) return {};
let matchMenu = {}; let matchMenu = {};
this.menu.forEach(item=>{ this.menu.forEach((item) => {
const menu = item; const menu = item;
item.children.forEach(item=>{ item.children.forEach((item) => {
if(item.path === this.group) { if (item.path === this.group) {
matchMenu = menu; matchMenu = menu;
return; return;
} }
}) });
}) });
return matchMenu return matchMenu;
}, },
userData() { userData() {
return this.$store.state.userData; return this.$store.state.userData;
} },
}, },
data() { data() {
return { return {
showMobileMenu: false, showMobileMenu: false,
} };
} },
} };
</script> </script>
<style lang="less"> <style lang="less">
.layout-header{ .layout-header {
.mobile-menu-list{display: none} .mobile-menu-list {
.layout-menu-wrapper{ display: none;
height: 50px; }
line-height: 50px; .layout-menu-wrapper {
height: 66px;
line-height: 66px;
font-size: 14px; font-size: 14px;
color: #eee; color: #eee;
background: #1848c8; background: #2681e8;
.layout-logo{ .layout-logo {
height: 50px; height: 50px;
.el-icon-menu{display: none} .el-icon-menu {
a{ display: none;
}
a {
margin: auto; margin: auto;
} }
img{ img {
vertical-align: middle; vertical-align: middle;
} }
} }
.menu-list{ .menu-list {
li{ li {
a{ a {
display: block; display: block;
padding: 0 12px; padding: 0 12px;
height: 100%; height: 100%;
color: #eee; color: #c7e1ff;
&.router-link-active, &.router-link-active,
&[active]{ &[active] {
//background: #1890ff; //background: #1890ff;
color: #fff; color: #fff;
list-style-type:none; list-style-type: none;
border-bottom:3px solid #fff; border-bottom: 3px solid #fff;
padding-bottom: 2px; padding-bottom: 2px;
} }
} }
} }
} }
.layout-profile{ .layout-profile {
padding-right: 30px; padding-right: 30px;
} }
} }
.layout-submenu-wrapper{ .layout-submenu-wrapper {
padding-left: 20px; padding-left: 20px;
background: #fff; background: #fff;
height: 42px; height: 42px;
border-bottom: 1px solid #ededed; border-bottom: 1px solid #ededed;
.layout-title{ .layout-title {
font-size: 18px; font-size: 18px;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
color: #333; color: #333;
} }
.layout-submenu{ .layout-submenu {
margin-left: 15px; margin-left: 15px;
white-space: nowrap; white-space: nowrap;
overflow: auto; overflow: auto;
li{ li {
a{ a {
display: block; display: block;
padding: 0 10px; padding: 0 10px;
height: 40px; height: 40px;
...@@ -267,7 +304,7 @@ export default { ...@@ -267,7 +304,7 @@ export default {
font-size: 14px; font-size: 14px;
color: #666; color: #666;
&.router-link-active, &.router-link-active,
&[active]{ &[active] {
color: #1890ff; color: #1890ff;
border-bottom: 2px solid #1890ff; border-bottom: 2px solid #1890ff;
} }
...@@ -277,48 +314,48 @@ export default { ...@@ -277,48 +314,48 @@ export default {
} }
} }
@media screen and (max-width: 800px){ @media screen and (max-width: 800px) {
.layout-header { .layout-header {
.mobile-menu-list{ .mobile-menu-list {
display: flex; display: flex;
background: #222333; background: #222333;
padding: 0 10px; padding: 0 10px;
li{ li {
padding: 8px 5px; padding: 8px 5px;
a{ a {
width: 1em; width: 1em;
display: block; display: block;
color: #eee; color: #eee;
font-size: 14px; font-size: 14px;
word-break: break-all; word-break: break-all;
&.router-link-active, &.router-link-active,
&[active]{ &[active] {
color: #1890ff; color: #1890ff;
} }
} }
} }
} }
.layout-submenu-wrapper{ .layout-submenu-wrapper {
padding-left: 0; padding-left: 0;
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
.layout-menu-wrapper { .layout-menu-wrapper {
width: 100%; width: 100%;
.layout-logo{ .layout-logo {
width: 40px; width: 40px;
.el-icon-menu{ .el-icon-menu {
margin: auto; margin: auto;
display: inline-block; display: inline-block;
} }
a{ a {
display: none; display: none;
} }
} }
.menu-list{ .menu-list {
display: none; display: none;
} }
li{ li {
width: 100%; width: 100%;
} }
} }
......
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
<template> <template>
<div class="my-map"> <div class="my-map">
<el-amap <el-amap
ref="map" ref="map"
vid="amapDetail" vid="amapDetail"
...@@ -18,10 +17,10 @@ ...@@ -18,10 +17,10 @@
> >
<div class="tuli1"><slot name="leftTop1"></slot></div> <div class="tuli1"><slot name="leftTop1"></slot></div>
<div class="tuli"><slot name="leftTop"></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 <el-amap-marker
v-for="(marker, index) in markers" v-for="(marker, index) in markers"
:key="'marker' + index" :key="'marker' + index"
...@@ -32,8 +31,6 @@ ...@@ -32,8 +31,6 @@
:extData="marker" :extData="marker"
> >
</el-amap-marker> </el-amap-marker>
</el-amap> </el-amap>
</div> </div>
</template> </template>
...@@ -73,10 +70,12 @@ export default { ...@@ -73,10 +70,12 @@ export default {
}, },
methods: { methods: {
formatterDate, formatterDate,
contentRender(h, params){ contentRender(h, params) {
//console.log(params.extData.extData.productId) //console.log(params.extData.extData.productId)
let value="el-icon-location-information location"+params.extData.extData.productId let value =
return (<i class={value} />) "el-icon-location-information location" +
params.extData.extData.productId;
return <i class={value} />;
}, },
getDeviceDetial() { getDeviceDetial() {
//获取设备列表 //获取设备列表
...@@ -86,15 +85,14 @@ export default { ...@@ -86,15 +85,14 @@ export default {
console.log("刷新数据", data); console.log("刷新数据", data);
// this.markersGroupData = data; // this.markersGroupData = data;
//this.$refs.map.clear(); //this.$refs.map.clear();
let map = this.amapManager.getMap() let map = this.amapManager.getMap();
map.clearMap() map.clearMap();
for(let group of data){ for (let group of data) {
for(let item of group.deviceList){ for (let item of group.deviceList) {
//console.log("marker", item); //console.log("marker", item);
this.setMarker(item); this.setMarker(item);
} }
} }
}, },
...@@ -116,14 +114,13 @@ export default { ...@@ -116,14 +114,13 @@ export default {
events: { events: {
click: (e) => { click: (e) => {
console.log("getExtData", e.target.getExtData()); console.log("getExtData", e.target.getExtData());
}, },
}, },
}; };
this.markers.push(markerLabel); this.markers.push(markerLabel);
}, },
choose() { choose() {
this.$emit("input", false); this.$emit("input", false);
this.$emit("choose", JSON.parse(JSON.stringify(this.mapData)), (val) => { this.$emit("choose", JSON.parse(JSON.stringify(this.mapData)), (val) => {
...@@ -135,7 +132,7 @@ export default { ...@@ -135,7 +132,7 @@ export default {
}, },
data() { data() {
return { return {
markersGroupData:[], markersGroupData: [],
mapData: {}, mapData: {},
info: {}, info: {},
markers: [], markers: [],
...@@ -170,9 +167,9 @@ export default { ...@@ -170,9 +167,9 @@ export default {
} }
.rightTop { .rightTop {
width: 200px; width: 200px;
top: 0px; top: 0px;
right:0px; right: 0px;
position: absolute; position: absolute;
float: right; float: right;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
...@@ -184,11 +181,12 @@ export default { ...@@ -184,11 +181,12 @@ export default {
overflow: auto; overflow: auto;
} }
.my-map { .my-map {
width: 100%;
height: 100vh;
.amap-demo { .amap-demo {
position: relative; position: relative;
width: 100%; width: 100%;
min-height: 650px; height: 100%;
.map-marker { .map-marker {
position: relative; position: relative;
width: 30px; width: 30px;
......
...@@ -21,6 +21,12 @@ Vue.use(Filter); ...@@ -21,6 +21,12 @@ Vue.use(Filter);
Vue.use(GlobalComponents); // 全局组件 Vue.use(GlobalComponents); // 全局组件
Vue.use(VueClipboard) Vue.use(VueClipboard)
Vue.use(VueAMap) Vue.use(VueAMap)
// 引入iconfont
import './assets/fonts/iconfont.css'
// moment 时间处理
import moment from 'moment';
Vue.prototype.$moment = moment;
VueAMap.initAMapApiLoader({ VueAMap.initAMapApiLoader({
key: 'f45cca59553214543a5a77e50a7e04df', key: 'f45cca59553214543a5a77e50a7e04df',
plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder'], plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder'],
......
...@@ -39,25 +39,18 @@ const router = new Router({ ...@@ -39,25 +39,18 @@ const router = new Router({
...restBuilder('param', 'system/param'), // 系统管理--参数管理 ...restBuilder('param', 'system/param'), // 系统管理--参数管理
...restBuilder('task', 'system/task'), // 系统管理--任务管理 ...restBuilder('task', 'system/task'), // 系统管理--任务管理
builder('site/list', 'system/site/index'),//站点 builder('site/list', 'system/site/index'),//站点
...restBuilder('sitestat', 'sitestat'),//站点设备管理 ...restBuilder('sitestat', 'sitestat'),//站点设备管理
builder('sitestat/maplist', 'sitestat/maplist'),//地图站点 builder('sitestat/maplist', 'sitestat/maplist'),//地图站点
builder('sitestat/mapDetail', 'sitestat/mapDetail'),//地图设备 builder('sitestat/mapDetail', 'sitestat/mapDetail'),//地图设备
...restBuilder('platform', 'platform'),//平台 ...restBuilder('platform', 'platform'),//平台
...restBuilder('product', 'product'),//产品 ...restBuilder('product', 'product'),//产品
...restBuilder('device', 'device'),//设备 ...restBuilder('device', 'device'),//设备
...restBuilder('device/alarm/info', 'device/alarm/info'),//设备告警信息 ...restBuilder('device/alarm/info', 'device/alarm/info'),//设备告警信息
...restBuilder('device/module', 'device/module'),//设备模块使用率 ...restBuilder('device/module', 'device/module'),//设备模块使用率
...restBuilder('device/module/use', 'device/module/use'),//设备模块使用率 ...restBuilder('device/module/use', 'device/module/use'),//设备模块使用率
...restBuilder('device/module/distribute', 'device/module/distribute'),//设备前端模块部署 ...restBuilder('device/module/distribute', 'device/module/distribute'),//设备前端模块部署
...restBuilder('device/log', 'device/log'),
...restBuilder('device/log', 'device/log'),//
...restBuilder('firm', 'firm'),// ...restBuilder('firm', 'firm'),//
...restBuilder('alarm/config', 'alarm/config'),//设备告警配置 ...restBuilder('alarm/config', 'alarm/config'),//设备告警配置
...restBuilder('alarm/sms/send', 'alarm/sms/send'),//设备告警短信 ...restBuilder('alarm/sms/send', 'alarm/sms/send'),//设备告警短信
......
...@@ -7,11 +7,15 @@ ...@@ -7,11 +7,15 @@
justify="end" justify="end"
:gutter="10" :gutter="10"
> >
<el-button type="text" size="mini" <el-button type="text" size="mini" style="color: #fff"
>数据更新:{{ formatterDate(statData.updateTime) }} 2分钟后自动更新</el-button >数据更新:{{
formatterDate(statData.updateTime)
}}
2分钟后自动更新</el-button
> >
<el-button <el-button
icon="el-icon-refresh" icon="el-icon-refresh"
style="color: #fff"
size="mini" size="mini"
@click="syncDeviceStat" @click="syncDeviceStat"
type="text" type="text"
...@@ -19,8 +23,161 @@ ...@@ -19,8 +23,161 @@
> >
</el-row> </el-row>
<el-card style="margin-left: 50px; margin-right: 50px; margin-top: 10px"> <el-card
<el-row 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" :gutter="20"
style="height: 80px; align-items: center; margin-top: 10px" style="height: 80px; align-items: center; margin-top: 10px"
> >
...@@ -203,7 +360,7 @@ ...@@ -203,7 +360,7 @@
<i class="el-icon-data-board customIcon"> 数据获取</i> <i class="el-icon-data-board customIcon"> 数据获取</i>
</el-row> </el-row>
</el-col> </el-col>
</el-row> </el-row> -->
</el-card> </el-card>
</el-row> </el-row>
...@@ -212,13 +369,25 @@ ...@@ -212,13 +369,25 @@
:gutter="20" :gutter="20"
> >
<el-col :span="12"> <el-col :span="12">
<!-- 设备总量 -->
<el-card class="box-card"> <el-card class="box-card">
<div id="deviceTotal" style="width: 100%; height: 300px"></div> <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-card>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<!-- 设备状态 -->
<el-card class="box-card"> <el-card class="box-card">
<div id="deviceStat" style="width: 100%; height: 300px"></div> <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-card>
</el-col> </el-col>
</el-row> </el-row>
...@@ -228,13 +397,26 @@ ...@@ -228,13 +397,26 @@
:gutter="20" :gutter="20"
> >
<el-col :span="12"> <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-card>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<!-- 设备消息推送 -->
<el-card class="box-card"> <el-card class="box-card">
<div id="devicePush" style="width: 100%; height: 300px"></div> <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-card>
</el-col> </el-col>
</el-row> </el-row>
...@@ -247,12 +429,22 @@ export default { ...@@ -247,12 +429,22 @@ export default {
userData() { userData() {
return this.$store.state.userData.currUserName; 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() { mounted() {
this.timer = setInterval(this.syncDeviceStat, 1000 * 120); this.timer = setInterval(this.syncDeviceStat, 1000 * 120);
}, },
beforeDestroy() { beforeDestroy() {
clearInterval(this.timer); clearInterval(this.timer);
// 解绑window事件
window.removeEventListener("resize", this.adapterEcharts);
}, },
created() { created() {
let today = new Date(); let today = new Date();
...@@ -286,9 +478,18 @@ export default { ...@@ -286,9 +478,18 @@ export default {
this.findDevicePush(beforeday); this.findDevicePush(beforeday);
}, },
methods: { methods: {
// echarts 适配函数
adapterEcharts() {
this.deviceTotalChart.resize();
this.deviceStatChart.resize();
this.alarmChart.resize();
this.pieChart.resize();
this.pushChart.resize();
},
syncDeviceStat() { syncDeviceStat() {
this.$post("/device/stat/syncDeviceStat", {}) this.$post("/device/stat/syncDeviceStat", {})
.then((res) => { .then((res) => {
console.log(res.data);
if (res.code == 1) { if (res.code == 1) {
this.statData = res.data.data[0]; this.statData = res.data.data[0];
} else { } else {
...@@ -302,6 +503,7 @@ export default { ...@@ -302,6 +503,7 @@ export default {
findDeviceTotalStat(beforeday) { findDeviceTotalStat(beforeday) {
let query = { createTimeStart: this.formatterDate(beforeday) }; let query = { createTimeStart: this.formatterDate(beforeday) };
console.log(query);
this.$post("/device/stat/list", query) this.$post("/device/stat/list", query)
.then((res) => { .then((res) => {
if (res.code == 1) { if (res.code == 1) {
...@@ -377,6 +579,7 @@ export default { ...@@ -377,6 +579,7 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.deviceAlarmEcharts(); this.deviceAlarmEcharts();
this.devicePieEcharts();
}); });
} }
this.loading = false; this.loading = false;
...@@ -444,19 +647,25 @@ export default { ...@@ -444,19 +647,25 @@ export default {
panLeft(num) { panLeft(num) {
return num < 10 ? "0" + num : num; return num < 10 ? "0" + num : num;
}, },
// 设备数据图
myEcharts() { myEcharts() {
// 基于准备好的dom,初始化echarts实例 // 基于准备好的dom,初始化echarts实例
var deviceTotalChart = this.$echarts.init( this.deviceTotalChart = this.$echarts.init(
document.getElementById("deviceTotal") document.getElementById("deviceTotal")
); );
let option = { let option = {
title: { title: {
text: "设备数据", text: "设备数据",
top: "40px",
subtext: "", subtext: "",
x: "center",
}, },
// 图例提示框
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
backgroundColor: "#fff",
textStyle: {
color: "#000",
},
axisPointer: { axisPointer: {
type: "cross", type: "cross",
label: { label: {
...@@ -465,31 +674,61 @@ export default { ...@@ -465,31 +674,61 @@ export default {
}, },
}, },
grid: {
top: "30%",
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
legend: { legend: {
orient: "horizontal", orient: "horizontal",
x: "left", top: "40px",
left: "98",
y: "top", y: "top",
itemWidth: 14,
data: ["设备总量", "在线趋势"], data: ["设备总量", "在线趋势"],
icon: "roundRect",
}, },
xAxis: { xAxis: {
name: "",
type: "category", type: "category",
data: this.beforeday, data: this.beforeday,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
}, },
yAxis: [ yAxis: [
{ {
name: "设备总量",
type: "value", type: "value",
// min: 0, // 配置 Y 轴刻度最小值 min: 0, // 配置 Y 轴刻度最小值
max: 400, // 配置 Y 轴刻度最大值 max: 500, // 配置 Y 轴刻度最大值
// splitNumber: 7, // 配置 Y 轴数值间隔 // interval: 50,
splitNumber: 5, // 配置 Y 轴数值间隔
axisTick: {
show: false,
},
axisLine: {
show: false,
},
}, },
{ {
name: "在线率",
type: "value", type: "value",
// min: 0, // 配置 Y 轴刻度最小值 min: 0, // 配置 Y 轴刻度最小值
max: 1, // 配置 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 { ...@@ -509,24 +748,31 @@ export default {
type: "line", type: "line",
}, },
], ],
color: ["#3366CC", "#008000"], color: ["#2984D8", "#3FCA97"],
}; };
// 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。
deviceTotalChart.setOption(option); this.deviceTotalChart.setOption(option);
// 适配
window.addEventListener("resize", this.adapterEcharts);
}, },
// 设备状态图
deviceStatEcharts() { deviceStatEcharts() {
var deviceStatChart = this.$echarts.init( this.deviceStatChart = this.$echarts.init(
document.getElementById("deviceStat") document.getElementById("deviceStat")
); );
let deviceStatOption = { let deviceStatOption = {
title: { title: {
text: "设备状态", text: "设备状态",
top: "40px",
}, },
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
backgroundColor: "#fff",
textStyle: {
color: "#000",
},
axisPointer: { axisPointer: {
type: "cross", type: "cross",
label: { label: {
...@@ -535,10 +781,15 @@ export default { ...@@ -535,10 +781,15 @@ export default {
}, },
}, },
legend: { legend: {
top: "40px",
left: "98",
itemWidth: 14,
data: ["在线率", "离线率"], data: ["在线率", "离线率"],
icon: "roundRect",
}, },
grid: { grid: {
top: "30%",
left: "3%", left: "3%",
right: "4%", right: "4%",
bottom: "3%", bottom: "3%",
...@@ -549,12 +800,24 @@ export default { ...@@ -549,12 +800,24 @@ export default {
type: "category", type: "category",
boundaryGap: false, boundaryGap: false,
data: this.beforeDeviceStatday, data: this.beforeDeviceStatday,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
}, },
], ],
yAxis: [ yAxis: [
{ {
type: "value", type: "value",
max: 1, max: 1,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
}, },
], ],
series: [ series: [
...@@ -567,18 +830,10 @@ export default { ...@@ -567,18 +830,10 @@ export default {
width: 0, width: 0,
}, },
showSymbol: false, showSymbol: false,
color: "#2984D8",
areaStyle: { areaStyle: {
opacity: 0.8, opacity: 0.8,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: "#ACD1FB",
{
offset: 0,
color: "rgb(128, 255, 165)",
},
{
offset: 1,
color: "rgb(1, 191, 236)",
},
]),
}, },
emphasis: { emphasis: {
focus: "series", focus: "series",
...@@ -590,22 +845,14 @@ export default { ...@@ -590,22 +845,14 @@ export default {
type: "line", type: "line",
stack: "offline", stack: "offline",
smooth: true, smooth: true,
color: "#FA2C2E",
lineStyle: { lineStyle: {
width: 0, 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, showSymbol: false,
areaStyle: { areaStyle: {
opacity: 0.8, opacity: 0.8,
color: "#CE8BA4",
}, },
emphasis: { emphasis: {
focus: "series", focus: "series",
...@@ -615,18 +862,27 @@ export default { ...@@ -615,18 +862,27 @@ export default {
], ],
}; };
deviceStatChart.setOption(deviceStatOption); this.deviceStatChart.setOption(deviceStatOption);
// 适配
window.addEventListener("resize", this.adapterEcharts);
}, },
// 告警趋势图
deviceAlarmEcharts() { deviceAlarmEcharts() {
var chart = this.$echarts.init(document.getElementById("deviceAlarm")); this.alarmChart = this.$echarts.init(
document.getElementById("deviceAlarm")
);
let option = { let option = {
title: { title: {
text: "设备告警趋势", text: "设备告警趋势",
top: "40px",
}, },
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
backgroundColor: "#fff",
textStyle: {
color: "#000",
},
axisPointer: { axisPointer: {
type: "cross", type: "cross",
label: { label: {
...@@ -635,9 +891,15 @@ export default { ...@@ -635,9 +891,15 @@ export default {
}, },
}, },
legend: { legend: {
itemWidth: 14,
top: "40px",
left: "120",
data: ["告警次数"], data: ["告警次数"],
icon: "roundRect",
}, },
grid: { grid: {
top: "30%",
left: "3%", left: "3%",
right: "4%", right: "4%",
bottom: "3%", bottom: "3%",
...@@ -648,11 +910,23 @@ export default { ...@@ -648,11 +910,23 @@ export default {
type: "category", type: "category",
boundaryGap: false, boundaryGap: false,
data: this.beforeDeviceAlarmday, data: this.beforeDeviceAlarmday,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
}, },
], ],
yAxis: [ yAxis: [
{ {
type: "value", type: "value",
axisTick: {
show: false,
},
axisLine: {
show: false,
},
}, },
], ],
series: [ series: [
...@@ -661,22 +935,14 @@ export default { ...@@ -661,22 +935,14 @@ export default {
type: "line", type: "line",
stack: "Total", stack: "Total",
smooth: true, smooth: true,
color: "#247EE4",
lineStyle: { lineStyle: {
width: 0, width: 0,
}, },
showSymbol: false, showSymbol: false,
areaStyle: { areaStyle: {
opacity: 0.8, opacity: 0.8,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: "#ACD1FB",
{
offset: 0,
color: "rgb(55, 162, 255)",
},
{
offset: 1,
color: "rgb(116, 21, 219)",
},
]),
}, },
emphasis: { emphasis: {
focus: "series", focus: "series",
...@@ -685,18 +951,97 @@ export default { ...@@ -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() { devicePushEcharts() {
var chart = this.$echarts.init(document.getElementById("devicePush")); this.pushChart = this.$echarts.init(
document.getElementById("devicePush")
);
let option = { let option = {
title: { title: {
text: "设备消息推送趋势", text: "设备消息推送趋势",
top: "40px",
}, },
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
backgroundColor: "#fff",
textStyle: {
color: "#000",
},
axisPointer: { axisPointer: {
type: "cross", type: "cross",
label: { label: {
...@@ -705,9 +1050,14 @@ export default { ...@@ -705,9 +1050,14 @@ export default {
}, },
}, },
legend: { legend: {
top: "40px",
itemWidth: 14,
left: "160",
data: ["告警次数"], data: ["告警次数"],
icon: "roundRect",
}, },
grid: { grid: {
top: "30%",
left: "3%", left: "3%",
right: "4%", right: "4%",
bottom: "3%", bottom: "3%",
...@@ -717,11 +1067,23 @@ export default { ...@@ -717,11 +1067,23 @@ export default {
{ {
type: "category", type: "category",
data: this.beforeDevicePushday, data: this.beforeDevicePushday,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
}, },
], ],
yAxis: [ yAxis: [
{ {
type: "value", type: "value",
axisTick: {
show: false,
},
axisLine: {
show: false,
},
}, },
], ],
series: [ series: [
...@@ -729,12 +1091,16 @@ export default { ...@@ -729,12 +1091,16 @@ export default {
name: "告警次数", name: "告警次数",
type: "line", type: "line",
smooth: true, smooth: true,
itemStyle: {
color: "#89AAF7",
},
data: this.devicePushyData, data: this.devicePushyData,
}, },
], ],
}; };
chart.setOption(option); this.pushChart.setOption(option);
// 适配
window.addEventListener("resize", this.adapterEcharts);
}, },
}, },
data() { data() {
...@@ -751,7 +1117,6 @@ export default { ...@@ -751,7 +1117,6 @@ export default {
beforePushday: [], beforePushday: [],
beforeAlarmday: [], beforeAlarmday: [],
deviceTotalyData: [], deviceTotalyData: [],
deviceOnlineyData: [], deviceOnlineyData: [],
deviceStatOnlineyData: [], deviceStatOnlineyData: [],
deviceStatOfflineyData: [], deviceStatOfflineyData: [],
...@@ -768,23 +1133,69 @@ export default { ...@@ -768,23 +1133,69 @@ export default {
}; };
</script> </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 { .success {
color: green; color: green;
} }
.warn { .warn {
color: rgb(215, 25, 25); color: rgb(215, 25, 25);
} }
.customIcon {
font-size: 13px;
margin-top: 5px;
color: dodgerblue;
}
.homeIndex { .homeIndex {
display: inline-block; display: inline-block;
position: relative; 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 { .homeIndex::before {
content: ""; content: "";
position: absolute; position: absolute;
...@@ -792,7 +1203,7 @@ export default { ...@@ -792,7 +1203,7 @@ export default {
left: 0; left: 0;
width: 100%; width: 100%;
height: 35%; height: 35%;
background: #1848c8; background: #2681e8;
} }
</style> </style>
<template> <template>
<!-- 弹出框表单 --> <!-- 弹出框表单 -->
<el-dialog :title="title" :visible.sync="open" width="90%" append-to-body> <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px"> <el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-row> <el-row>
<Field label="产品" prop="productId" v-model="form.productId" placeholder="请输入产品"/> <Field
<Field label="告警类型" prop="alarmType" v-model="form.alarmType" type="select" :enumData="dict.alarmType" placeholder="请选择告警类型"/> label="产品"
<Field label="告警级别," prop="alarmLevel" v-model="form.alarmLevel" type="select" :enumData="dict.alarmLevel" placeholder="请选择告警级别,"/> prop="productId"
<Field label="推送方式," prop="alarmPusW1ay" v-model="form.alarmPusW1ay" type="select" :enumData="dict.alarmPusW1ay" placeholder="请选择推送方式,"/> v-model="form.productId"
<Field label="是否启用" prop="isUse" v-model="form.isUse" type="select" :enumData="dict.isUse" placeholder="请选择是否启用"/> placeholder="请输入产品"
/>
</el-row> <Field
label="告警类型"
</el-form> prop="alarmType"
<div slot="footer" class="dialog-footer"> v-model="form.alarmType"
<el-button type="primary" v-if="pageInfo.type !== 'view'" @click="submitForm">确 定</el-button> type="select"
<el-button @click="cancel">取 消</el-button> :enumData="dict.alarmType"
</div> placeholder="请选择告警类型"
</el-dialog> />
<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> </template>
<script> <script>
import form from "@/assets/mixins/formdialog"; import form from "@/assets/mixins/formdialog";
import dialogShow from "./dialogshow"; import dialogShow from "./dialogshow";
export default { export default {
mixins: [form], mixins: [form],
components: { components: {
dialogShow , dialogShow,
}, },
data() { data() {
return { return {
// 遮罩层 // 遮罩层
loading: true, loading: true,
// 弹出层标题 // 弹出层标题
title: "设备告警配置", title: "设备告警配置",
// 是否显示弹出层 // 是否显示弹出层
open: false, open: false,
toString:[ toString: ["alarmType", "alarmLevel", "alarmPusW1ay", "isUse"],
"alarmType", // 表单校验
"alarmLevel", rules: {
"alarmPusW1ay", alarmType: [
"isUse", { required: true, message: "请输入告警类型", trigger: "blur" },
], ],
// 表单校验 alarmLevel: [
rules: { { required: true, message: "请输入告警级别,", trigger: "blur" },
alarmType: [ ],
{required: true,message: "请输入告警类型", trigger: "blur" }, alarmPusW1ay: [
], { required: true, message: "请输入推送方式,", trigger: "blur" },
alarmLevel: [ ],
{required: true,message: "请输入告警级别,", trigger: "blur" }, isUse: [{ required: true, message: "请输入是否启用", trigger: "blur" }],
], createTime: [{ required: true, message: "请选择创建时间" }],
alarmPusW1ay: [ },
{required: true,message: "请输入推送方式,", trigger: "blur" }, };
], },
isUse: [
{required: true,message: "请输入是否启用", trigger: "blur" },
],
createTime: [
{required: true,message: "请选择创建时间" },
],
}
};
},
methods: { methods: {
/** 编辑 */ /** 编辑 */
edit(row) { edit(row) {
this.reset() this.reset();
this.query = { id: row.id }; this.query = { id: row.id };
this.urls.currUrl =this.pageInfo.editUrl;; this.urls.currUrl = this.pageInfo.editUrl;
this.getData(); this.getData();
this.pageInfo.type="edit" this.pageInfo.type = "edit";
this.title = "修改设备告警配置"; this.title = "修改设备告警配置";
}, },
/** 新增 */ /** 新增 */
add(row) { add(row) {
this.reset() this.reset();
this.query = { id: row.id }; this.query = { id: row.id };
this.urls.currUrl = this.pageInfo.addUrl; this.urls.currUrl = this.pageInfo.addUrl;
this.getData(); this.getData();
this.pageInfo.type="add" this.pageInfo.type = "add";
this.title = "新增设备告警配置"; this.title = "新增设备告警配置";
}, },
/** 查看*/ /** 查看*/
view(row) { view(row) {
this.reset() this.reset();
this.query = { id: row.id }; this.query = { id: row.id };
this.urls.currUrl =this.pageInfo.viewUrl;; this.urls.currUrl = this.pageInfo.viewUrl;
this.getData(); this.getData();
this.pageInfo.type="view" this.pageInfo.type = "view";
this.title = "设备告警配置详细"; this.title = "设备告警配置详细";
}, },
/**取消按钮 */ /**取消按钮 */
cancel() { cancel() {
this.open = false; this.open = false;
}, },
/**获取数据后弹框 */ /**获取数据后弹框 */
afterRender(data) { afterRender(data) {
this.open = true; this.open = true;
}, },
afterSubmit(data) { afterSubmit(data) {
this.open = false; this.open = false;
this.$emit("ok"); this.$emit("ok");
}, },
// 表单重置 // 表单重置
reset() { reset() {
this.form = { this.form = {
productId : null, productId: null,
alarmType : 0, alarmType: 0,
alarmLevel : null, alarmLevel: null,
alarmPusW1ay : 0, alarmPusW1ay: 0,
isUse : null, isUse: null,
}; };
this.resetForm("form"); this.resetForm("form");
}, },
resetForm(refName) { resetForm(refName) {
if (this.$refs[refName]) { if (this.$refs[refName]) {
this.$refs[refName].resetFields(); this.$refs[refName].resetFields();
} }
}, },
}, },
}; };
</script> </script>
<template> <template>
<!-- 弹出框表单 --> <!-- 弹出框表单 -->
<el-drawer <el-drawer
:title="title" :title="title"
:visible.sync="open" :visible.sync="open"
:direction="direction" :direction="direction"
size="40%" size="40%"
> >
<el-form ref="form" :model="form" :rules="rules" label-width="120px"> <el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-row> <el-row>
<Field :span="22" label="产品类型" prop="productId" type="select" v-model="form.productId" :enumData="dict.productId" placeholder="请输入产品"/> <Field
<Field :span="22" label="告警类型" prop="alarmType" v-model="form.alarmType" type="select" :enumData="dict.alarmType" placeholder="请选择告警类型"/> :span="22"
<Field :span="22" label="告警级别" prop="alarmLevel" v-model="form.alarmLevel" type="select" :enumData="dict.alarmLevel" placeholder="请选择告警级别,"/> label="产品类型"
<Field :span="22" label="推送方式" prop="alarmPusW1ay" v-model="form.alarmPusW1ay" type="select" :enumData="dict.alarmPusW1ay" placeholder="请选择推送方式,"/> prop="productId"
<Field :span="22" label="备注" prop="remark" v-model="form.remark" type="textarea" placeholder="请输入备注"/> type="select"
<Field :span="22" label="是否启用" prop="enabled" v-model="form.enabled" type="radio" :enumData="dict.enabled" placeholder="请选择是否启用"/> v-model="form.productId"
:enumData="dict.productId"
</el-row> placeholder="请输入产品"
<form-buttons @submit='submitForm' noCancelBtn /> />
</el-form> <Field
:span="22"
</el-drawer> 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> </template>
<script> <script>
import form from "@/assets/mixins/formdialog"; import form from "@/assets/mixins/formdialog";
import dialogShow from "./dialogshow"; import dialogShow from "./dialogshow";
export default { export default {
mixins: [form], mixins: [form],
components: { components: {
dialogShow , dialogShow,
}, },
data() { data() {
return { return {
// 遮罩层 // 遮罩层
loading: true, loading: true,
// 弹出层标题 // 弹出层标题
title: "设备告警配置", title: "设备告警配置",
// 是否显示弹出层 // 是否显示弹出层
open: false, open: false,
toString:[ toString: [
"productId", "productId",
"alarmType", "alarmType",
"alarmLevel", "alarmLevel",
"alarmPusW1ay", "alarmPusW1ay",
"enabled", "enabled",
], ],
// 表单校验 // 表单校验
rules: { rules: {
productId: [ productId: [
{required: true,message: "请选择产品类型", trigger: "blur" }, { required: true, message: "请选择产品类型", trigger: "blur" },
], ],
alarmType: [ alarmType: [
{required: true,message: "请输入告警类型", trigger: "blur" }, { required: true, message: "请输入告警类型", trigger: "blur" },
], ],
alarmLevel: [ alarmLevel: [
{required: true,message: "请输入告警级别,", trigger: "blur" }, { required: true, message: "请输入告警级别,", trigger: "blur" },
], ],
alarmPusW1ay: [ alarmPusW1ay: [
{required: true,message: "请输入推送方式,", trigger: "blur" }, { required: true, message: "请输入推送方式,", trigger: "blur" },
], ],
isUse: [ isUse: [{ required: true, message: "请输入是否启用", trigger: "blur" }],
{required: true,message: "请输入是否启用", trigger: "blur" }, createTime: [{ required: true, message: "请选择创建时间" }],
], },
createTime: [ };
{required: true,message: "请选择创建时间" }, },
],
}
};
},
methods: { methods: {
/** 编辑 */ /** 编辑 */
edit(row) { edit(row) {
this.reset() this.reset();
this.query = { id: row.id }; this.query = { id: row.id };
this.urls.currUrl =this.pageInfo.editUrl;; this.urls.currUrl = this.pageInfo.editUrl;
this.getData(); this.getData();
this.pageInfo.type="edit" this.pageInfo.type = "edit";
this.title = "修改设备告警配置"; this.title = "修改设备告警配置";
}, },
/** 新增 */ /** 新增 */
add(row) { add(row) {
this.reset() this.reset();
this.query = { id: row.id }; this.query = { id: row.id };
this.urls.currUrl = this.pageInfo.addUrl; this.urls.currUrl = this.pageInfo.addUrl;
this.getData(); this.getData();
this.pageInfo.type="add" this.pageInfo.type = "add";
this.title = "新增设备告警配置"; this.title = "新增设备告警配置";
}, },
/** 查看*/ /** 查看*/
view(row) { view(row) {
this.reset() this.reset();
this.query = { id: row.id }; this.query = { id: row.id };
this.urls.currUrl =this.pageInfo.viewUrl;; this.urls.currUrl = this.pageInfo.viewUrl;
this.getData(); this.getData();
this.pageInfo.type="view" this.pageInfo.type = "view";
this.title = "设备告警配置详细"; this.title = "设备告警配置详细";
}, },
/**取消按钮 */ /**取消按钮 */
cancel() { cancel() {
this.open = false; this.open = false;
}, },
/**获取数据后弹框 */ /**获取数据后弹框 */
afterRender(data) { afterRender(data) {
this.open = true; this.open = true;
}, },
afterSubmit(data) { afterSubmit(data) {
this.open = false; this.open = false;
this.$emit("ok"); this.$emit("ok");
}, },
// 表单重置 // 表单重置
reset() { reset() {
this.form = { this.form = {
productId : null, productId: null,
alarmType : 0, alarmType: 0,
alarmLevel : null, alarmLevel: null,
alarmPusW1ay : 0, alarmPusW1ay: 0,
isUse : null, isUse: null,
}; };
this.resetForm("form"); this.resetForm("form");
}, },
resetForm(refName) { resetForm(refName) {
if (this.$refs[refName]) { if (this.$refs[refName]) {
this.$refs[refName].resetFields(); this.$refs[refName].resetFields();
} }
}, },
}, },
}; };
</script> </script>
<template> <template>
<div class="page"> <div class="page">
<LayoutTable :data="tableData" notSearch :config="tableConfig"> <LayoutTable :data="tableData" notSearch :config="tableConfig">
</LayoutTable> </LayoutTable>
<!-- <dialog-show ref="dialogform" @ok="getData" /> -->
<!-- <dialog-show ref="dialogform" @ok="getData" /> --> <drawer-show ref="drawerform" @ok="getData" />
</div>
<drawer-show ref="drawerform" @ok="getData" />
</div>
</template> </template>
<script> <script>
/** 表单弹出框模式需引入 */ /** 表单弹出框模式需引入 */
import drawerShow from "./drawershow"; import drawerShow from "./drawershow";
import table from "@/assets/mixins/table"; import table from "@/assets/mixins/table";
export default { export default {
name: "AlarmConfig", name: "AlarmConfig",
components: {drawerShow }, components: { drawerShow },
mixins: [table], mixins: [table],
created() { created() {},
}, methods: {
methods: { /** 重写新增方法 */
toAdd(row) {
/** 重写新增方法 */ //this.$refs.dialogform.add(row);
toAdd(row) {
//this.$refs.dialogform.add(row);
this.$refs.drawerform.add(row);
},
/** 重写编辑方法 */
toEdit(row) {
this.$refs.drawerform.edit(row);
}, this.$refs.drawerform.add(row);
/** 重写查看方法 */ },
// toView(row) { /** 重写编辑方法 */
// this.$refs.dialogform.view(row); toEdit(row) {
// }, this.$refs.drawerform.edit(row);
// 操作菜单状态 },
/** 重写查看方法 */
// toView(row) {
// this.$refs.dialogform.view(row);
// },
// 操作菜单状态
changeStatus(row, column) { changeStatus(row, column) {
return ( return (
<device-switch <device-switch
...@@ -51,47 +46,89 @@ ...@@ -51,47 +46,89 @@
/> />
); );
}, },
},
data() {
return {
config: {
search: [],
columns: [
{ type: "selection", align: "center", width: 60 },
}, { label: "序号", align: "center", type: "index", width: 60 },
data() { {
return { label: "告警内容",
config: { align: "center",
search: [ prop: "alarmType",
], formatter: this.formatter,
columns: [ },
{type: "selection", width: 60}, {
label: "设备类型",
align: "center",
prop: "productId",
formatter: this.formatterString,
},
{label: "序号",type: "index", width: 60}, {
{label: "告警内容", prop: "alarmType",formatter: this.formatter}, label: "告警级别",
{label: "设备类型", prop: "productId", formatter: this.formatterString}, 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: "创建时间",
{label: "备注", prop: "remark"}, align: "center",
prop: "createTime",
formatter: this.formatterDate,
},
{label: "创建时间", prop: "createTime",formatter:this.formatterDate}, {
label: "更新时间",
{label: "更新时间", prop: "updateTime",formatter:this.formatterDate}, align: "center",
{ prop: "updateTime",
formatter: this.formatterDate,
},
{
prop: "enabled", prop: "enabled",
align: "center",
label: "启用/停用", label: "启用/停用",
width: 100, width: 100,
formatter: this.changeStatus, formatter: this.changeStatus,
}, },
{
{ label: "操作",
label: "操作", align: "center",
width: 240, width: 240,
formatter: row => { formatter: (row) => {
return ( 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> },
\ No newline at end of file };
</script>
<style lang="less" >
.page {
.table-head {
height: 72px;
}
}
</style>
<template> <template>
<layout-view> <layout-view>
<el-descriptions :title="title" :column="column" :size="size" :colon="false" border> <el-descriptions
<template slot="title"> :title="title"
<i class="el-icon-tickets"></i> :column="column"
基本详细信息 :size="size"
</template> :colon="false"
<template slot="extra"> border
<el-button type="primary" @click="$router.go(-1)" size="small">返回</el-button> >
</template> <template slot="title">
<el-descriptions-item label="产品" label-class-name="labelClass" content-class-name="contentClass"> <i class="el-icon-tickets"></i>
{{form.productId}} 基本详细信息
</el-descriptions-item> </template>
<el-descriptions-item label="告警类型" label-class-name="labelClass" content-class-name="contentClass"> <template slot="extra">
{{ util_formatters("alarmType", form.alarmType) }} <el-button type="primary" @click="$router.go(-1)" size="small"
</el-descriptions-item> >返回</el-button
<el-descriptions-item label="告警级别," label-class-name="labelClass" content-class-name="contentClass"> >
{{ util_formatters("alarmLevel", form.alarmLevel) }} </template>
</el-descriptions-item> <el-descriptions-item
<el-descriptions-item label="推送方式," label-class-name="labelClass" content-class-name="contentClass"> label="产品"
{{ util_formatters("alarmPusW1ay", form.alarmPusW1ay) }} label-class-name="labelClass"
</el-descriptions-item> content-class-name="contentClass"
<el-descriptions-item label="是否启用" label-class-name="labelClass" content-class-name="contentClass"> >
{{ util_formatters("isUse", form.isUse) }} {{ form.productId }}
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> <el-descriptions-item
label="告警类型"
</layout-view> 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> </template>
<script> <script>
import view from "@/assets/mixins/view"; import view from "@/assets/mixins/view";
export default { export default {
mixins: [view], mixins: [view],
components: { components: {},
}, methods: {},
methods: { data() {
return {
}, size: "small",
data() { column: 2,
return { toString: ["alarmType", "alarmLevel", "alarmPusW1ay", "isUse"],
size:"small", toArrays: [],
column:2, toDate: [],
toString:[ };
"alarmType", },
"alarmLevel", };
"alarmPusW1ay",
"isUse",
],
toArrays: [
],
toDate: [
]
}
}
}
</script> </script>
<style lang="less"> <style lang="less">
.labelClass{ .labelClass {
width: 200px; width: 200px;
} }
.el-descriptions__body{ .el-descriptions__body {
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
color: #606266; color: #606266;
background-color: #FFF; background-color: #fff;
} }
.contentClass{ .contentClass {
width: 600px; width: 600px;
} }
</style> </style>
\ No newline at end of file
<template> <template>
<div class="page"> <div class="page">
<LayoutTable :data="tableData" notAdd notDel :config="tableConfig"> <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 <drawer-show ref="drawerform" @ok="getData" />
slot="table-head-left2" </div>
style="margin-left: 10px"
icon="el-icon-tickets"
size="mini"
@click="doExport"
:disabled="isExport"
>导出</el-button>
</LayoutTable>
<drawer-show ref="drawerform" @ok="getData" />
</div>
</template> </template>
<script> <script>
/** 表单弹出框模式需引入 */ /** 表单弹出框模式需引入 */
import drawerShow from "./drawershow"; import drawerShow from "./drawershow";
import table from "@/assets/mixins/table"; import table from "@/assets/mixins/table";
export default { export default {
name: "AlarmSmsSend", name: "AlarmSmsSend",
components: {drawerShow }, components: { drawerShow },
mixins: [table], mixins: [table],
created() { 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: { { type: "excel" }
)
/** 重写新增方法 */ .then(() => (this.isExport = false))
toAdd(row) { .catch((error) => {
this.$refs.dialogform.add(row); this.isExport = false;
}, this.$message.error(error.message);
/** 重写编辑方法 */ });
toEdit(row) { },
this.$refs.dialogform.edit(row); },
data() {
}, return {
/** 重写查看方法 */ config: {
toView(row) { search: [
this.$refs.drawerform.view(row); {
}, name: "sendStatus",
/** 导出Excel */ type: "select",
doExport() { label: "发送状态",
this.isExport = true; fuzzy: 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);
});
},
}, {
data() {
return {
config: {
search: [
{
name: "sendStatus",
type: "select",
label: "发送状态",
fuzzy: true
},
{
name: "sendTimeStart", name: "sendTimeStart",
type: "datetime", type: "datetime",
label: "开始时间", label: "开始时间",
}, },
{ {
name: "sendTimeEnd", name: "sendTimeEnd",
type: "datetime", type: "datetime",
label: "结束时间", label: "结束时间",
placeholder:"结束时间" placeholder: "结束时间",
}, },
], ],
columns: [ columns: [
{type: "selection", width: 60}, { type: "selection", align: "center", width: 60 },
{type: "index",label:"序号", width: 60}, { type: "index", align: "center", label: "序号", width: 60 },
{label: "发送内容", prop: "sendMess",width:500}, { label: "发送内容", align: "center", prop: "sendMess", width: 500 },
{label: "联系电话", prop: "mobile"}, { 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: "发送时间",
label: "操作", align: "center",
width: 240, prop: "sendTime",
formatter: row => { formatter: this.formatterDate,
return ( },
<table-buttons noAdd noEdit noDel row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} /> {
); 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
<template> <template>
<div class="page"> <div class="page">
<LayoutTable :data="tableData" notAdd notDel :config="tableConfig"> <LayoutTable :data="tableData" notAdd notDel :config="tableConfig">
<el-button
<el-button
slot="table-head-left2" slot="table-head-left2"
style="margin-left: 10px" style="margin-left: 10px"
icon="el-icon-tickets" icon="el-icon-tickets"
...@@ -11,25 +10,35 @@ ...@@ -11,25 +10,35 @@
:disabled="isExport" :disabled="isExport"
>导出</el-button >导出</el-button
> >
<el-tag slot="table-head-row2-left" size="mini" <el-tag slot="table-head-row2-left" size="mini"
>告警次数:{{ tableData.totalCount }}</el-tag >告警次数:{{ 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 >危险:{{ 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 >次要:{{ 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 >一般:{{ tableData.normalCount }}</el-tag
> >
</LayoutTable>
</LayoutTable>
<dialog-show ref="dialogform" @ok="getData" /> <dialog-show ref="dialogform" @ok="getData" />
</div> </div>
...@@ -52,11 +61,11 @@ export default { ...@@ -52,11 +61,11 @@ export default {
created() { created() {
console.log("queryIn:", this.queryIn); console.log("queryIn:", this.queryIn);
if (this.queryIn&&this.queryIn.alarmDevice) { if (this.queryIn && this.queryIn.alarmDevice) {
this.query={} this.query = {};
this.query["alarmDevice"] = this.queryIn.alarmDevice; this.query["alarmDevice"] = this.queryIn.alarmDevice;
} }
this.changePath("/device/alarm/info") this.changePath("/device/alarm/info");
}, },
methods: { methods: {
/** 重写新增方法 */ /** 重写新增方法 */
...@@ -72,83 +81,101 @@ export default { ...@@ -72,83 +81,101 @@ export default {
// this.$refs.dialogform.view(row); // this.$refs.dialogform.view(row);
// }, // },
/** 导出Excel */ /** 导出Excel */
doExport() { doExport() {
this.isExport = true; this.isExport = true;
this.$download("/device/alarm/info/exportExcel", { this.$download(
"idList": this.selection, "/device/alarm/info/exportExcel",
'alarmDevice': this.$route.query['alarmDevice'], {
'alarmType': this.$route.query['alarmType'], idList: this.selection,
'alarmStatus': this.$route.query['alarmStatus'], alarmDevice: this.$route.query["alarmDevice"],
}, { type: "excel" }).then(() => this.isExport = false).catch(error => { alarmType: this.$route.query["alarmType"],
this.isExport = false; alarmStatus: this.$route.query["alarmStatus"],
this.$message.error(error.message); },
}); { type: "excel" }
}, )
.then(() => (this.isExport = false))
.catch((error) => {
this.isExport = false;
this.$message.error(error.message);
});
},
}, },
data() { data() {
return { return {
config: { config: {
search: [ search: [
{ {
name: "alarmStatus", name: "alarmStatus",
type: "select", type: "select",
label: "告警状态", label: "告警状态",
}, },
{ {
name: "alarmTimeStart", name: "alarmTimeStart",
type: "datetime", type: "datetime",
label: "开始时间", label: "开始时间",
}, },
{ {
name: "alarmTimeEnd", name: "alarmTimeEnd",
type: "datetime", type: "datetime",
label: "结束时间", label: "结束时间",
placeholder:"结束时间" placeholder: "结束时间",
}, },
], ],
columns: [ columns: [
{type: "selection",reserveSelection:true, width: 60,label:"全选"}, {
{ type: "selection",
align: "center",
reserveSelection: true,
width: 60,
label: "全选",
},
{
type: "index", type: "index",
align: "center",
label: "序号", label: "序号",
width: 50 width: 50,
}, },
{ {
label: "告警时间", label: "告警时间",
align: "center",
prop: "alarmTime", prop: "alarmTime",
formatter: this.formatterDate, formatter: this.formatterDate,
}, },
{ {
label: "告警设备", label: "告警设备",
align: "center",
prop: "alarmDevice", prop: "alarmDevice",
formatter: this.formatter, formatter: this.formatter,
}, },
{ {
label: "告警内容", label: "告警内容",
align: "center",
prop: "alarmContent", 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: "告警状态", label: "告警状态",
align: "center",
prop: "alarmStatus", prop: "alarmStatus",
formatter: this.formatter, formatter: this.formatter,
}, },
], ],
}, },
}; };
......
<template> align: "center",<template>
<div class="page"> <div class="page">
<span style="font-size: 13px" <span style="font-size: 13px"
><b>设备列表</b> (<el-link ><b>设备列表</b> (<el-link
...@@ -9,7 +9,11 @@ ...@@ -9,7 +9,11 @@
> >
站点编码:{{ siteCode }} )</span 站点编码:{{ 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-link
> >
<el-button <el-button
...@@ -39,7 +43,7 @@ ...@@ -39,7 +43,7 @@
:disabled="isExport" :disabled="isExport"
>导出</el-button >导出</el-button
> >
<el-tag slot="table-head-row2-left" size="mini" <el-tag slot="table-head-row2-left" size="mini"
>设备总数:{{ tableData.totalCount }}</el-tag >设备总数:{{ tableData.totalCount }}</el-tag
> >
...@@ -180,8 +184,8 @@ export default { ...@@ -180,8 +184,8 @@ export default {
created() { created() {
console.log(this.$route); console.log(this.$route);
this.siteId = this.$route.query.siteId; this.siteId = this.$route.query.siteId;
this.info=this.$route.query this.info = this.$route.query;
this.query={siteId:this.siteId} this.query = { siteId: this.siteId };
this.$get("/sitestat/siteInfo", { this.$get("/sitestat/siteInfo", {
siteId: this.siteId, siteId: this.siteId,
...@@ -200,8 +204,8 @@ export default { ...@@ -200,8 +204,8 @@ export default {
// this.$router.push({ query: {siteId:this.siteId } }); // this.$router.push({ query: {siteId:this.siteId } });
}, },
methods: { methods: {
switchMap(){ switchMap() {
this.$router.push({ this.$router.push({
path: "/sitestat/mapDetail", path: "/sitestat/mapDetail",
query: this.info, query: this.info,
}); });
...@@ -354,14 +358,13 @@ export default { ...@@ -354,14 +358,13 @@ export default {
.then((res) => { .then((res) => {
if (res.code == 1) { if (res.code == 1) {
this.$message.success("编辑站点成功!"); this.$message.success("编辑站点成功!");
this.tree.open=false; this.tree.open = false;
this.getData();
this.getData();
} }
}) })
.catch((error) => { .catch((error) => {
this.loading=false; this.loading = false;
this.$message.error(error.message); this.$message.error(error.message);
}); });
}, },
...@@ -380,7 +383,6 @@ export default { ...@@ -380,7 +383,6 @@ export default {
/> />
); );
}, },
}, },
data() { data() {
return { return {
...@@ -397,7 +399,7 @@ export default { ...@@ -397,7 +399,7 @@ export default {
// 上传的地址 // 上传的地址
url: "/m/device/importData", url: "/m/device/importData",
}, },
info:{}, info: {},
// 站点树 // 站点树
tree: { tree: {
// 是否显示弹出层(设备导入) // 是否显示弹出层(设备导入)
...@@ -421,45 +423,61 @@ export default { ...@@ -421,45 +423,61 @@ export default {
name: "deviceCode", name: "deviceCode",
type: "text", type: "text",
label: "设备编码", label: "设备编码",
fuzzy:true fuzzy: true,
}, },
{ {
name: "deviceStatus", name: "deviceStatus",
type: "select", type: "select",
label: "状态", label: "状态",
}, },
], ],
columns: [ columns: [
{ type: "selection",reserveSelection:true, width: 60 }, { type: "selection", reserveSelection: true, width: 60 },
{ type: "index", label: "序号",align:"center", width: 50 }, { 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: "mac地址", prop: "deviceMac" },
{ {
label: "设备生产商", label: "设备生产商",
align: "center",
prop: "deviceFirmId", prop: "deviceFirmId",
formatter: this.formatter, formatter: this.formatter,
width: 150, width: 150,
}, },
{ label: "负责人", prop: "leadingOfficial" }, { label: "负责人", align: "center", prop: "leadingOfficial" },
{ label: "联系电话", prop: "leadingOfficialTelephone" }, {
label: "联系电话",
align: "center",
prop: "leadingOfficialTelephone",
},
{ {
label: "状态 ", label: "状态 ",
align: "center",
prop: "deviceStatus", prop: "deviceStatus",
formatter: this.formatterStatus, formatter: this.formatterStatus,
}, },
{ label: "利旧设备", prop: "source", formatter: this.formatterYES }, {
label: "利旧设备",
align: "center",
prop: "source",
formatter: this.formatterYES,
},
{ {
prop: "enabled", prop: "enabled",
align: "center",
label: "启用/停用", label: "启用/停用",
width: 100, width: 100,
formatter: this.changeStatus, formatter: this.changeStatus,
...@@ -467,12 +485,14 @@ export default { ...@@ -467,12 +485,14 @@ export default {
{ {
label: "创建时间", label: "创建时间",
align: "center",
prop: "createTime", prop: "createTime",
formatter: this.formatterDate, formatter: this.formatterDate,
}, },
{ {
label: "操作", label: "操作",
align: "center",
width: 240, width: 240,
formatter: (row) => { formatter: (row) => {
return ( return (
...@@ -499,7 +519,6 @@ export default { ...@@ -499,7 +519,6 @@ export default {
) : ( ) : (
"" ""
)} )}
</div> </div>
); );
}, },
......
...@@ -38,8 +38,7 @@ export default { ...@@ -38,8 +38,7 @@ export default {
name: "deviceCode", name: "deviceCode",
type: "text", type: "text",
label: "设备编号", label: "设备编号",
fuzzy:true fuzzy: true,
}, },
{ {
name: "logType", name: "logType",
...@@ -48,40 +47,62 @@ export default { ...@@ -48,40 +47,62 @@ export default {
}, },
], ],
columns: [ 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: "创建时间", label: "创建时间",
align: "center",
prop: "createTime", prop: "createTime",
formatter: this.formatterDate, formatter: this.formatterDate,
width:160 width: 160,
}, },
// { // {
// label: "操作", // label: "操作",
// width: 240, // width: 240,
// formatter: (row) => { // formatter: (row) => {
// return ( // return (
// <table-buttons // <table-buttons
// noAdd // noAdd
// noEdit // noEdit
// noDel // noDel
// row={row} // row={row}
// onEdit={this.toEdit} // onEdit={this.toEdit}
// onView={this.toView} // onView={this.toView}
// onDel={this.toDel} // onDel={this.toDel}
// /> // />
// ); // );
// }, // },
// }, // },
], ],
}, },
}; };
......
...@@ -29,21 +29,18 @@ export default { ...@@ -29,21 +29,18 @@ export default {
}, },
/** 重写查看方法 */ /** 重写查看方法 */
toView(row) { toView(row) {
this.$get("/device/module/distribute/view", { id: row.id })
this.$get("/device/module/distribute/view",{id:row.id})
.then((res) => { .then((res) => {
if (res.code == 1) { if (res.code == 1) {
window.open(res.data.entity.filePath,"_blank") window.open(res.data.entity.filePath, "_blank");
} }
}) })
.catch((error) => { .catch((error) => {
this.$message.error(error.message); this.$message.error(error.message);
}); });
}, },
distribute(row) { distribute(row) {
this.$post("/device/module/distribute/active", row) this.$post("/device/module/distribute/active", row)
.then((res) => { .then((res) => {
if (res.code == 1) { if (res.code == 1) {
...@@ -61,22 +58,34 @@ export default { ...@@ -61,22 +58,34 @@ export default {
config: { config: {
search: [], search: [],
columns: [ columns: [
{ type: "selection", width: 60 }, { type: "selection", align: "center", width: 60 },
{ type: "index", label: "序号", width: 50 }, { type: "index", align: "center", label: "序号", width: 50 },
{ label: "产品", prop: "productId", formatter: this.formatter }, {
label: "产品",
align: "center",
prop: "productId",
formatter: this.formatter,
},
{ {
label: "分辨率", label: "分辨率",
align: "center",
prop: "imageResolution", prop: "imageResolution",
formatter: this.formatter, 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: "操作", label: "操作",
align: "center",
width: 240, width: 240,
formatter: (row) => { formatter: (row) => {
return ( return (
......
<template> <template>
<div class="page"> <div class="page">
<LayoutTable :data="tableData" :config="tableConfig"> <LayoutTable :data="tableData" :config="tableConfig"> </LayoutTable>
</LayoutTable>
<dialog-show ref="dialogform" @ok="getData" /> <dialog-show ref="dialogform" @ok="getData" />
</div> </div>
</template> </template>
<script> <script>
/** 表单弹出框模式需引入 */ /** 表单弹出框模式需引入 */
import dialogShow from "./dialogshow"; import dialogShow from "./dialogshow";
import table from "@/assets/mixins/table"; import table from "@/assets/mixins/table";
export default { export default {
name: "DeviceModule", name: "DeviceModule",
components: {dialogShow }, components: { dialogShow },
mixins: [table], mixins: [table],
created() { created() {},
}, methods: {
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 },
/** 重写新增方法 */ { label: "模块名称", align: "center", prop: "moduleName" },
toAdd(row) {
this.$refs.dialogform.add(row);
},
/** 重写编辑方法 */
toEdit(row) {
this.$refs.dialogform.edit(row);
{ 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> </script>
\ No newline at end of file
...@@ -68,19 +68,24 @@ export default { ...@@ -68,19 +68,24 @@ export default {
config: { config: {
search: [], search: [],
columns: [ columns: [
{ label: "模块名称", prop: "moduleName" }, { label: "模块名称", align: "center", prop: "moduleName" },
// { label: "模块消息编码", prop: "moduleMsgCode" }, // { label: "模块消息编码", prop: "moduleMsgCode" },
{ {
label: "设备名称", label: "设备名称",
align: "center",
prop: "deviceId", prop: "deviceId",
formatter: this.formatterString, formatter: this.formatterString,
}, },
{ label: "产品名称", prop: "platformAndProductName" }, {
label: "产品名称",
align: "center",
prop: "platformAndProductName",
},
{ label: "调用次数", prop: "useNum" }, { label: "调用次数", align: "center", prop: "useNum" },
], ],
}, },
}; };
......
<template> <template>
<div class="page"> <div class="page">
<LayoutTable :data="tableData" :config="tableConfig"> <LayoutTable :data="tableData" :config="tableConfig"> </LayoutTable>
</LayoutTable>
<drawer-show ref="drawerform" @ok="getData" />
<drawer-show ref="drawerform" @ok="getData" /> </div>
</div>
</template> </template>
<script> <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);
},
}, import drawerShow from "./drawershow";
data() { import table from "@/assets/mixins/table";
return { export default {
config: { name: "FirmList",
search: [ components: {
{ drawerShow,
name: "firmName", },
type: "text", mixins: [table],
label: "设备生产厂商名称", created() {},
fuzzy: true methods: {
}, /** 重写新增方法 */
], toAdd(row) {
columns: [ this.$refs.drawerform.add(row);
{ type: "selection",reserveSelection:true, width: 60 }, },
{ type: "index", label: "序号",align:"center", width: 50 }, /** 重写编辑方法 */
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: "创建时间",
label: "操作", align: "center",
width: 240, prop: "createTime",
formatter: row => { formatter: this.formatterDate,
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> </script>
\ No newline at end of file
...@@ -6,45 +6,48 @@ ...@@ -6,45 +6,48 @@
<script> <script>
export default { export default {
name: 'authentication', name: "authentication",
created () { created() {
this.login(); this.login();
}, },
methods: { methods: {
login() { login() {
this.$post('/login/index').then(this.loginSuccess).catch(this.loginFail) this.$post("/login/index").then(this.loginSuccess).catch(this.loginFail);
}, },
loginSuccess({data}) { loginSuccess({ data }) {
this.$store.commit('setUserData', data); this.$store.commit("setUserData", data);
this.$router.replace({ this.$router.replace({
path: this.redirect, path: this.redirect,
}); });
}, },
loginFail(error) { loginFail(error) {
this.$message.error(error.message || '请登录'); this.$message.error(error.message || "请登录");
console.log("href:"+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 == "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({ // this.$router.replace({
// path: '/login', // path: '/login',
// query: { // query: {
// redirect: this.redirect, // redirect: this.redirect,
// } // }
// }); // });
} },
}, },
computed: { computed: {
isLogin() { isLogin() {
return this.$store.state.isLogin return this.$store.state.isLogin;
} },
}, },
data() { data() {
return { return {
redirect: this.$route.query.redirect, redirect: this.$route.query.redirect,
loading: true, loading: true,
} };
} },
} };
</script> </script>
<template> <template>
<div class="page"> <div class="page">
<LayoutTable :data="tableData" :config="tableConfig"> <LayoutTable :data="tableData" :config="tableConfig"> </LayoutTable>
</LayoutTable>
<drawer-show ref="drawerform" @ok="getData" /> <drawer-show ref="drawerform" @ok="getData" />
</div> </div>
</template> </template>
<script> <script>
/** 表单弹出框模式需引入 */ /** 表单弹出框模式需引入 */
import drawerShow from "./drawershow"; import drawerShow from "./drawershow";
import table from "@/assets/mixins/table"; import table from "@/assets/mixins/table";
export default { export default {
name: "Platform", name: "Platform",
components: {drawerShow }, components: { drawerShow },
mixins: [table], mixins: [table],
created() { created() {},
}, methods: {
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) { label: "平台名称,名称唯一",
this.$refs.drawerform.add(row); align: "center",
}, prop: "platformName",
/** 重写编辑方法 */ },
toEdit(row) {
this.$refs.drawerform.edit(row);
},
/** 重写查看方法 */
toView(row) {
this.$refs.drawerform.view(row);
},
}, { label: "平台编码,编码唯一", align: "center", prop: "platformSn" },
data() {
return {
config: {
search: [
],
columns: [
{ type: "selection",reserveSelection:true, width: 60 },
{ type: "index", label: "序号",align:"center", width: 50 },
{label: "平台名称,名称唯一", prop: "platformName"}, {
label: "发送第三方平台消息类型",
align: "center",
prop: "sendMsgType",
formatter: this.formatter,
},
{label: "平台编码,编码唯一", prop: "platformSn"}, {
label: "是否启用发送消息",
{label: "发送第三方平台消息类型", prop: "sendMsgType",formatter: this.formatter}, align: "center",
prop: "sendSwitch",
{label: "是否启用发送消息", prop: "sendSwitch",formatter: this.formatter}, formatter: this.formatter,
{ },
label: "操作", {
width: 240, label: "操作",
formatter: row => { align: "center",
return ( width: 240,
<table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} /> formatter: (row) => {
); return (
} <table-buttons
} noAdd
] row={row}
} onEdit={this.toEdit}
}; onView={this.toView}
} onDel={this.toDel}
/>
);
},
},
],
},
}; };
},
};
</script> </script>
\ No newline at end of file
...@@ -31,27 +31,40 @@ export default { ...@@ -31,27 +31,40 @@ export default {
this.$refs.drawerform.view(row); this.$refs.drawerform.view(row);
}, },
}, },
// beforeRouteEnter(to, from, next) {next(vm => { // beforeRouteEnter(to, from, next) {next(vm => {
// // 通过 `vm` 访问组件实例 // // 通过 `vm` 访问组件实例
// console.log(vm) // console.log(vm)
// })}, // })},
data() { data() {
return { return {
config: { config: {
search: [], search: [],
columns: [ columns: [
// {type: "selection", width: 60}, // {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: "操作", label: "操作",
align: "center",
width: 240, width: 240,
formatter: (row) => { formatter: (row) => {
return ( return (
......
<template> <template>
<!-- 弹出框表单 --> <!-- 弹出框表单 -->
<el-dialog :title="title" :visible.sync="open" width="90%" append-to-body> <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px"> <el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-row> <el-row>
<Field label="站点Id,来源基础服务平台" prop="siteId" v-model="form.siteId" placeholder="请输入站点Id,来源基础服务平台"/> <Field
<Field label="站点编号,来源基础服务平台" prop="siteCode" v-model="form.siteCode" type="textarea" placeholder="请输入站点编号,来源基础服务平台"/> label="站点Id,来源基础服务平台"
<Field label="站点名称" prop="siteName" v-model="form.siteName" type="textarea" placeholder="请输入站点名称"/> prop="siteId"
<Field label="设备总数" prop="deviceTotal" v-model="form.deviceTotal" placeholder="请输入设备总数"/> v-model="form.siteId"
<Field label="在线数量" prop="onlineCount" v-model="form.onlineCount" placeholder="请输入在线数量"/> placeholder="请输入站点Id,来源基础服务平台"
<Field label="离线数量" prop="offlineCount" v-model="form.offlineCount" placeholder="请输入离线数量"/> />
<Field label="停用数量" prop="stopCount" v-model="form.stopCount" placeholder="请输入停用数量"/> <Field
<Field label="待激活数量" prop="unActiveCount" v-model="form.unActiveCount" placeholder="请输入待激活数量"/> label="站点编号,来源基础服务平台"
prop="siteCode"
</el-row> v-model="form.siteCode"
type="textarea"
</el-form> placeholder="请输入站点编号,来源基础服务平台"
<div slot="footer" class="dialog-footer"> />
<el-button type="primary" v-if="pageInfo.type !== 'view'" @click="submitForm">确 定</el-button> <Field
<el-button @click="cancel">取 消</el-button> label="站点名称"
</div> prop="siteName"
</el-dialog> 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> </template>
<script> <script>
import form from "@/assets/mixins/formdialog"; import form from "@/assets/mixins/formdialog";
import dialogShow from "./dialogshow"; import dialogShow from "./dialogshow";
export default { export default {
mixins: [form], mixins: [form],
components: { components: {
dialogShow , dialogShow,
}, },
data() { data() {
return { return {
// 遮罩层 // 遮罩层
loading: true, loading: true,
// 弹出层标题 // 弹出层标题
title: "站点统计", title: "站点统计",
// 是否显示弹出层 // 是否显示弹出层
open: false, open: false,
toString:[ toString: [],
], // 表单校验
// 表单校验 rules: {
rules: { unActiveCount: [
unActiveCount: [ { required: true, message: "请输入待激活数量", trigger: "blur" },
{required: true,message: "请输入待激活数量", trigger: "blur" }, ],
], createTime: [{ required: true, message: "请选择创建时间" }],
createTime: [ },
{required: true,message: "请选择创建时间" }, };
], },
}
};
},
methods: { methods: {
/** 编辑 */ /** 编辑 */
edit(row) { edit(row) {
this.reset() this.reset();
this.query = { id: row.id }; this.query = { id: row.id };
this.urls.currUrl =this.pageInfo.editUrl;; this.urls.currUrl = this.pageInfo.editUrl;
this.getData(); this.getData();
this.pageInfo.type="edit" this.pageInfo.type = "edit";
this.title = "修改站点统计"; this.title = "修改站点统计";
}, },
/** 新增 */ /** 新增 */
add(row) { add(row) {
this.reset() this.reset();
this.query = { id: row.id }; this.query = { id: row.id };
this.urls.currUrl = this.pageInfo.addUrl; this.urls.currUrl = this.pageInfo.addUrl;
this.getData(); this.getData();
this.pageInfo.type="add" this.pageInfo.type = "add";
this.title = "新增站点统计"; this.title = "新增站点统计";
}, },
/** 查看*/ /** 查看*/
view(row) { view(row) {
this.reset() this.reset();
this.query = { id: row.id }; this.query = { id: row.id };
this.urls.currUrl =this.pageInfo.viewUrl;; this.urls.currUrl = this.pageInfo.viewUrl;
this.getData(); this.getData();
this.pageInfo.type="view" this.pageInfo.type = "view";
this.title = "站点统计详细"; this.title = "站点统计详细";
}, },
/**取消按钮 */ /**取消按钮 */
cancel() { cancel() {
this.open = false; this.open = false;
}, },
/**获取数据后弹框 */ /**获取数据后弹框 */
afterRender(data) { afterRender(data) {
this.open = true; this.open = true;
}, },
afterSubmit(data) { afterSubmit(data) {
this.open = false; this.open = false;
this.$emit("ok"); this.$emit("ok");
}, },
// 表单重置 // 表单重置
reset() { reset() {
this.form = { this.form = {
siteId : null, siteId: null,
siteCode : "", siteCode: "",
siteName : "", siteName: "",
deviceTotal : null, deviceTotal: null,
onlineCount : null, onlineCount: null,
offlineCount : null, offlineCount: null,
stopCount : null, stopCount: null,
unActiveCount : null, unActiveCount: null,
}; };
this.resetForm("form"); this.resetForm("form");
}, },
resetForm(refName) { resetForm(refName) {
if (this.$refs[refName]) { if (this.$refs[refName]) {
this.$refs[refName].resetFields(); this.$refs[refName].resetFields();
} }
}, },
}, },
}; };
</script> </script>
...@@ -4,13 +4,8 @@ ...@@ -4,13 +4,8 @@
<el-col :span="6" :xs="12" class="mytree"> <el-col :span="6" :xs="12" class="mytree">
<el-card> <el-card>
<div slot="header"> <div slot="header">
<span <span><b class="cardTitle">站点分布</b></span>
><b class="cardTitle">站点分布</b></span <el-button style="float: right" @click="switchStat" type="text"
>
<el-button
style="float: right; "
@click="switchStat"
type="text"
>切换为地图模式</el-button >切换为地图模式</el-button
> >
</div> </div>
...@@ -122,7 +117,7 @@ export default { ...@@ -122,7 +117,7 @@ export default {
//进入设备列表页面 //进入设备列表页面
this.$router.push({ this.$router.push({
path: "/device/list", path: "/device/list",
query: {sitestatId:row.id,siteId:row.siteId}, query: { sitestatId: row.id, siteId: row.siteId },
}); });
}, },
...@@ -141,13 +136,15 @@ export default { ...@@ -141,13 +136,15 @@ export default {
// this.siteMatterTable.siteId = node.id; // this.siteMatterTable.siteId = node.id;
//this.getSiteMatterTableData(); //this.getSiteMatterTableData();
console.log(node.id.search(",")>-1) console.log(node.id.search(",") > -1);
if (node.id.search(",")>-1) { if (node.id.search(",") > -1) {
console.log(node.id) console.log(node.id);
//this.query = { siteId: node.id.split(",")[0] ,siteIdList:node.id.split(",")} //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 { } else {
this.query = { siteId: node.id }; this.query = { siteId: node.id };
} }
...@@ -168,32 +165,56 @@ export default { ...@@ -168,32 +165,56 @@ export default {
}, },
], ],
columns: [ columns: [
{ type: "selection",reserveSelection:true, width: 60 }, { type: "selection", reserveSelection: true, width: 60 },
{ type: "index", label: "序号",align:"center", width: 50 }, {
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: "离线数量", label: "离线数量",
align: "center",
prop: "offlineCount", prop: "offlineCount",
formatter: this.formatter, formatter: this.formatter,
}, },
{ label: "停用数量", prop: "stopCount", formatter: this.formatter }, {
label: "停用数量",
align: "center",
prop: "stopCount",
formatter: this.formatter,
},
{ {
label: "待激活数量", label: "待激活数量",
align: "center",
prop: "unActiveCount", prop: "unActiveCount",
formatter: this.formatter, formatter: this.formatter,
}, },
{ {
label: "操作", label: "操作",
align: "center",
width: 240, width: 240,
formatter: (row) => { formatter: (row) => {
return ( return (
...@@ -233,7 +254,7 @@ export default { ...@@ -233,7 +254,7 @@ export default {
font-size: 16px; font-size: 16px;
color: rgb(20, 134, 248); color: rgb(20, 134, 248);
list-style-type: none; list-style-type: none;
border-bottom: 3px solid rgb(20, 134, 248); border-bottom: 3px solid rgb(20, 134, 248);
padding-bottom: 2px; padding-bottom: 2px;
} }
.mytree ::v-deep { .mytree ::v-deep {
......
...@@ -194,7 +194,7 @@ export default { ...@@ -194,7 +194,7 @@ export default {
}); });
//this.info = this.$route.query; //this.info = this.$route.query;
this.query = {sitestatId:sitestatId, siteId, siteId }; this.query = { sitestatId: sitestatId, siteId, siteId };
}, },
methods: { methods: {
formatterDate, formatterDate,
...@@ -227,7 +227,7 @@ export default { ...@@ -227,7 +227,7 @@ export default {
path: "/device/list", path: "/device/list",
query: { query: {
siteId: this.info.siteId, siteId: this.info.siteId,
sitestatId:this.info.id sitestatId: this.info.id,
}, },
}); });
}, },
...@@ -364,7 +364,7 @@ export default { ...@@ -364,7 +364,7 @@ export default {
}, },
}; };
</script> </script>
<style scoped> <style lang="less" scoped>
.el-divider--horizontal { .el-divider--horizontal {
margin: 5, 0, 5, 0; margin: 5, 0, 5, 0;
background: 0 0; background: 0 0;
......
...@@ -5,7 +5,6 @@ ...@@ -5,7 +5,6 @@
<el-card> <el-card>
<div slot="header"> <div slot="header">
<span><b class="cardTitle">站点分布</b></span> <span><b class="cardTitle">站点分布</b></span>
<el-button style="float: right" @click="switchStat" type="text" <el-button style="float: right" @click="switchStat" type="text"
>切换为列表模式</el-button >切换为列表模式</el-button
> >
...@@ -30,7 +29,6 @@ ...@@ -30,7 +29,6 @@
</el-scrollbar> </el-scrollbar>
</el-card> </el-row </el-card> </el-row
></Map> ></Map>
<dialog-show ref="dialogform" @ok="getData" /> <dialog-show ref="dialogform" @ok="getData" />
</div> </div>
</template> </template>
...@@ -94,8 +92,8 @@ export default { ...@@ -94,8 +92,8 @@ export default {
console.log("info:", info); console.log("info:", info);
this.$router.push({ this.$router.push({
path: "/sitestat/mapDetail", path: "/sitestat/mapDetail",
// query: info, // query: info,
query: {sitestatId:info.id,siteId:info.siteId}, query: { sitestatId: info.id, siteId: info.siteId },
}); });
}, },
......
<template> <template>
<div class="page"> <div class="page">
<LayoutTable :data="tableData" notAdd notDel :config="tableConfig" /> <LayoutTable :data="tableData" notAdd notDel :config="tableConfig" />
</div> </div>
</template> </template>
...@@ -26,7 +26,13 @@ export default { ...@@ -26,7 +26,13 @@ export default {
}, },
], ],
columns: [ columns: [
{ type: "index", label: "序号",align:"center", width: 50 }, {
type: "index",
align: "center",
label: "序号",
align: "center",
width: 50,
},
{ {
prop: "userName", prop: "userName",
......
<template> <template>
<div class="page"> <div class="page">
<LayoutTable :data='tableData' :config='tableConfig' notPagination /> <LayoutTable :data="tableData" :config="tableConfig" notPagination />
<dialog-show ref="dialogform" @ok="getData" /> <dialog-show ref="dialogform" @ok="getData" />
</div> </div>
</template> </template>
<script> <script>
import table from '@/assets/mixins/table'; import table from "@/assets/mixins/table";
import dialogShow from "./dialogshow"; import dialogShow from "./dialogshow";
export default { export default {
...@@ -16,8 +16,8 @@ export default { ...@@ -16,8 +16,8 @@ export default {
beforeRender(data) { beforeRender(data) {
this.allMenu = this.sortByGroup(this.util_copy(data.data)); this.allMenu = this.sortByGroup(this.util_copy(data.data));
// 存在查询条件,展开全部 // 存在查询条件,展开全部
if(Object.keys(this.$route.query).length) { if (Object.keys(this.$route.query).length) {
this.select = this.allMenu.filter(i=>!i.parentId).map(i=>i.id); this.select = this.allMenu.filter((i) => !i.parentId).map((i) => i.id);
} }
return data; return data;
}, },
...@@ -26,51 +26,57 @@ export default { ...@@ -26,51 +26,57 @@ export default {
}, },
// 按parentId排序分组 // 按parentId排序分组
sortByGroup(data) { sortByGroup(data) {
return data.filter(i=>!i.parentId).reduce((prev, item)=>{ return data
return prev.concat([item], data.filter(i=>i.parentId == item.id)); .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); const index = this.select.indexOf(id);
if(index > -1) { if (index > -1) {
this.select.splice(index, 1); this.select.splice(index, 1);
}else{ } else {
this.select.push(id); this.select.push(id);
} }
this.showChild(); this.showChild();
}, },
showChild() { showChild() {
this.tableData.data = this.allMenu.filter(item=>{ this.tableData.data = this.allMenu.filter((item) => {
return !item.parentId || this.select.indexOf(item.parentId) > -1 return !item.parentId || this.select.indexOf(item.parentId) > -1;
}); });
}, },
// 展示菜单图标 // 展示菜单图标
showIcon(row, column) { showIcon(row, column) {
return <i class={'el-icon-'+row.imgPath}></i> return <i class={"el-icon-" + row.imgPath}></i>;
}, },
// 操作菜单状态 // 操作菜单状态
changeStatus(row, column) { changeStatus(row, column) {
return ( return (
<my-switch <my-switch
confirm confirm
url='/menu/save' url="/menu/save"
row={row} row={row}
onChange={this.statusChange} onChange={this.statusChange}
value={this.tableData.data} value={this.tableData.data}
onInput={(data)=>{ onInput={(data) => {
this.tableData.data = data; this.tableData.data = data;
}}/> }}
) />
);
}, },
afterDel(id) { afterDel(id) {
this.$store.dispatch('login'); this.$store.dispatch("login");
}, },
statusChange() { statusChange() {
this.$store.dispatch('login'); this.$store.dispatch("login");
}, },
handleUp(data) { handleUp(data) {
let type = 0; let type = 0;
let url = "/menu/upOrDown"; let url = "/menu/upOrDown";
this.switchSort(url, data.id, type); this.switchSort(url, data.id, type);
...@@ -78,7 +84,7 @@ export default { ...@@ -78,7 +84,7 @@ export default {
handleDown(data) { handleDown(data) {
let type = 1; let type = 1;
let url = "/menu/upOrDown"; let url = "/menu/upOrDown";
this.switchSort(url, data.id, type); this.switchSort(url, data.id, type);
}, },
...@@ -90,7 +96,7 @@ export default { ...@@ -90,7 +96,7 @@ export default {
}) })
.then((res) => { .then((res) => {
if (res && res.code && res.code == 1) { if (res && res.code && res.code == 1) {
this.getData() this.getData();
this.loading = false; this.loading = false;
this.$message.success("更新排序成功!"); this.$message.success("更新排序成功!");
...@@ -119,101 +125,122 @@ export default { ...@@ -119,101 +125,122 @@ export default {
allMenu: [], // 经过分组排序的表格数据 allMenu: [], // 经过分组排序的表格数据
select: [], // 当前展开的树节点 select: [], // 当前展开的树节点
query: { query: {
'size': -1 size: -1,
}, },
config: { config: {
search: [ search: [
{ {
name: 'name', name: "name",
type: 'text', type: "text",
label: '菜单名称', label: "菜单名称",
}, },
], ],
columns: [ columns: [
{ type: "selection",reserveSelection:true, width: 60 },
{ type: "index", label: "序号",align:"center", width: 50 },
{ {
type: "selection",
align: "center",
reserveSelection: true,
width: 60, width: 60,
formatter: row => { },
const icon = this.select.indexOf(row.id) === -1 ? 'right' : 'down'; { type: "index", label: "序号", align: "center", width: 50 },
return ( {
!row.parentId width: 60,
? <div onClick={()=>{this.selectHandler(row)}}> align: "center",
<i class={'el-icon-arrow-'+icon}></i> 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> </div>
: '' ) : (
) ""
} );
},
}, },
{ {
prop: 'id', prop: "id",
label: 'ID', align: "center",
label: "ID",
width: 60, width: 60,
}, },
{ {
prop: 'name', prop: "name",
label: '名称', align: "center",
label: "名称",
width: 160, width: 160,
}, },
{ {
prop: 'imgPath', prop: "imgPath",
label: '图标', align: "center",
label: "图标",
width: 120, width: 120,
// formatter: this.showIcon, // formatter: this.showIcon,
}, },
{ {
prop: 'authType', prop: "authType",
label: '权限类型', align: "center",
label: "权限类型",
formatter: this.formatter, formatter: this.formatter,
}, },
{ {
prop: 'parentId', prop: "parentId",
label: '父ID', align: "center",
label: "父ID",
}, },
{ {
prop: 'url', prop: "url",
label: '地址', align: "center",
label: "地址",
}, },
{ {
prop: 'status', prop: "status",
label: '状态', align: "center",
label: "状态",
width: 100, width: 100,
formatter: this.changeStatus, formatter: this.changeStatus,
}, },
{ {
label: '操作', label: "操作",
formatter: (row)=> { align: "center",
formatter: (row) => {
return ( return (
<div>
<el-link
style="margin-right:5px;margin-left:5px"
icon="el-icon-top"
onClick={() => {
this.handleUp(row);
}}
></el-link>
<div> <el-link
<el-link style="margin-right:5px;margin-left:5px"
style="margin-right:5px;margin-left:5px" icon="el-icon-bottom"
icon="el-icon-top" onClick={() => {
onClick={() => { this.handleDown(row);
this.handleUp(row); }}
}} ></el-link>
></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} />
<table-buttons
noView
row={row}
onEdit={this.toEdit}
onDel={this.toDel}
/>
</div> </div>
) );
}, },
}, },
], ],
}, },
} };
} },
} };
</script> </script>
<template> <template>
<layout-form> <layout-form>
<el-form <el-form
:model="form" :model="form"
:loading="loading" :loading="loading"
:rules="rules" :rules="rules"
size='small' size="small"
label-width='100px' label-width="100px"
ref="form" ref="form"
> >
<el-row> <el-row>
<Field label="ID" prop="id" v-model="form.id" v-if='pageInfo.type !== "add"' disabled /> <Field
<Field label="名称" prop="name" v-model="form.name"/> label="ID"
<Field label="权限类型" prop="authType" v-model="form.authType" :enumData='dict.authType' type='select' /> prop="id"
<Field label="父级菜单" prop="parentId" v-model="form.parentId" :enumData='menu' type='select' /> 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="url" v-model="form.url" />
<Field label="状态" prop="status" v-model="form.status" :enumData='dict.status' type='radio' /> <Field
<Field label="图标" prop="imgPath" :span='24'> label="状态"
<el-radio-group v-model="form.imgPath" class='form-el-radio-group'> 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 label="">不需要图标</el-radio-button>
<el-radio-button v-for='(icon, index) in icons' :key='index' :label="icon"> <el-radio-button
<i :class="'el-icon-'+icon"></i> v-for="(icon, index) in icons"
{{icon}} :key="index"
:label="icon"
>
<i :class="`iconfont ${icon}`"></i>
{{ icon }}
</el-radio-button> </el-radio-button>
</el-radio-group> </el-radio-group>
</Field> </Field>
</el-row> </el-row>
<form-buttons @submit='submitForm'/> <form-buttons @submit="submitForm" />
</el-form> </el-form>
</layout-form> </layout-form>
</template> </template>
<script> <script>
import form from '@/assets/mixins/form'; import form from "@/assets/mixins/form";
export default { export default {
mixins: [form], mixins: [form],
methods: { methods: {
afterSubmit() { afterSubmit() {
this.$store.dispatch('login'); this.$store.dispatch("login");
this.$router.go(-1); this.$router.go(-1);
}, },
}, },
computed: { computed: {
menu() { menu() {
let menu = {'0': ''}; let menu = { 0: "" };
this.$store.state.userData.barList.forEach(item=>{ this.$store.state.userData.barList.forEach((item) => {
menu[item.id+''] = item.name menu[item.id + ""] = item.name;
}); });
return menu; return menu;
} },
}, },
data() { data() {
return { return {
toString: ['parentId', 'authType', 'status'], toString: ["parentId", "authType", "status"],
icons: [ icons: [
'info', 'error', 'success', 'warning', 'question', "icon-shouye",
'tickets', 'document', 'goods', 'sold-out', 'news', "icon-shezhi",
'message', 'date', 'printer', 'time', 'bell', "icon-xiaoxi",
'mobile-phone', 'service', 'view', 'menu', 'star-on', "icon-xitongguanli",
'location', 'phone', 'picture', 'delete', 'search', "icon-gaojing",
'edit', 'rank', 'refresh', 'share', 'setting', "icon-dalou",
'upload', 'upload2', 'download', 'loading', "icon-xitongguanli1",
], ],
rules: { rules: {
name: [ name: [{ required: true, message: "请输入名称", trigger: "blur" }],
{ required: true, message: '请输入名称', trigger: 'blur' },
],
}, },
} };
} },
} };
</script> </script>
<template> <template>
<div class="page"> <div class="page">
<LayoutTable :data='tableData' :config='tableConfig' /> <LayoutTable :data="tableData" :config="tableConfig" />
<dialog-show ref="dialogform" @ok="getData" /> <dialog-show ref="dialogform" @ok="getData" />
</div> </div>
</template> </template>
<script> <script>
import table from '@/assets/mixins/table'; import table from "@/assets/mixins/table";
import dialogShow from "./dialogshow"; import dialogShow from "./dialogshow";
export default { export default {
mixins: [table], mixins: [table],
components: {dialogShow }, components: { dialogShow },
methods: { methods: {
// 新增 // 新增
toAdd(row) { toAdd(row) {
...@@ -21,89 +21,109 @@ export default { ...@@ -21,89 +21,109 @@ export default {
this.$refs.dialogform.edit(row); this.$refs.dialogform.edit(row);
}, },
// 查看 // 查看
toView(row,) { toView(row) {
this.$refs.dialogform.view(row); this.$refs.dialogform.view(row);
}, },
}, },
data() { data() {
return { return {
config: { config: {
search: [ search: [
{ {
name: 'name', name: "name",
type: 'text', type: "text",
label: '参数名称', label: "参数名称",
}, },
], ],
columns: [ columns: [
{ type: "selection",reserveSelection:true, width: 60 },
{ type: "index", label: "序号",align:"center", width: 50 },
{ {
prop: 'name', type: "selection",
label: '参数名称', align: "center",
reserveSelection: true,
width: 60,
},
{ type: "index", label: "序号", align: "center", width: 50 },
{
prop: "name",
align: "center",
label: "参数名称",
}, },
{ {
prop: 'firstOrganize', prop: "firstOrganize",
label: '一级组织', align: "center",
label: "一级组织",
}, },
{ {
prop: 'secondOrganize', prop: "secondOrganize",
label: '二级组织', align: "center",
label: "二级组织",
}, },
{ {
prop: 'paramKey', prop: "paramKey",
label: '参数键', align: "center",
label: "参数键",
}, },
{ {
prop: 'paramValue', prop: "paramValue",
label: '参数值', align: "center",
label: "参数值",
// formatter: this.util_short('paramValue', 20) // formatter: this.util_short('paramValue', 20)
}, },
{ {
prop: 'validStatus', prop: "validStatus",
label: '有效状态', align: "center",
label: "有效状态",
width: 70, width: 70,
formatter: this.formatter formatter: this.formatter,
}, },
{ {
prop: 'modStatus', prop: "modStatus",
label: '修改状态', align: "center",
label: "修改状态",
width: 100, width: 100,
formatter: this.formatter formatter: this.formatter,
}, },
{ {
prop: 'displayType', prop: "displayType",
label: '展现类型', align: "center",
label: "展现类型",
width: 100, width: 100,
formatter: this.formatter formatter: this.formatter,
}, },
{ {
prop: 'remark', prop: "remark",
label: '备注', align: "center",
label: "备注",
}, },
{ {
label: '操作', label: "操作",
align: "center",
width: 260, width: 260,
formatter: (row)=> { formatter: (row) => {
return ( 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> </script>
<style lang="css"> <style lang="css">
.el-tooltip__popper{ .el-tooltip__popper {
display: inline-block; display: inline-block;
max-width: 80%; max-width: 80%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: normal ; white-space: normal;
line-height: 18px; line-height: 18px;
cursor: pointer; cursor: pointer;
} }
......
<template> <template>
<div class="page"> <div class="page">
<LayoutTable :data='tableData' :config='tableConfig' /> <LayoutTable :data="tableData" :config="tableConfig" />
<dialog-show ref="dialogform" @ok="getData" /> <dialog-show ref="dialogform" @ok="getData" />
</div> </div>
</template> </template>
<script> <script>
import table from '@/assets/mixins/table'; import table from "@/assets/mixins/table";
import dialogShow from "./dialogshow"; import dialogShow from "./dialogshow";
export default { export default {
mixins: [table], mixins: [table],
components: { components: {
dialogShow, dialogShow,
}, },
methods: { methods: {
...@@ -32,56 +32,70 @@ export default { ...@@ -32,56 +32,70 @@ export default {
config: { config: {
search: [ search: [
{ {
name: 'name', name: "name",
type: 'text', type: "text",
label: '资源名称', label: "资源名称",
}, },
{ {
name: 'authType', name: "authType",
type: 'select', type: "select",
label: '权限类型', label: "权限类型",
}, },
], ],
columns: [ 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', // prop: 'id',
// label: 'ID', // label: 'ID',
// }, // },
{ {
prop: 'name', prop: "name",
label: '名称', align: "center",
label: "名称",
}, },
{ {
prop: 'url', prop: "url",
label: '资源', align: "center",
label: "资源",
}, },
{ {
prop: 'authType', prop: "authType",
label: '认证类型', align: "center",
label: "认证类型",
formatter: this.formatter, formatter: this.formatter,
}, },
// { // {
// prop: 'userType', // prop: 'userType',
// label: '用户类型', // label: '用户类型',
// width: 100, // width: 100,
// formatter: this.formatter, // formatter: this.formatter,
// }, // },
{ {
label: '操作', label: "操作",
align: "center",
witdh: 120, witdh: 120,
formatter: (row)=> { formatter: (row) => {
return ( return (
<table-buttons noView row={row} onEdit={this.toEdit} onDel={this.toDel} /> <table-buttons
) noView
row={row}
onEdit={this.toEdit}
onDel={this.toDel}
/>
);
}, },
}, },
], ],
}, },
} };
} },
} };
</script> </script>
<template> <template>
<div class="page"> <div class="page">
<LayoutTable :data="tableData" :config="tableConfig" /> <LayoutTable :data="tableData" :config="tableConfig" />
<dialog-show ref="dialogform" @ok="getData" /> <dialog-show ref="dialogform" @ok="getData" />
<el-dialog title="分配权限" :visible.sync="auth.visible"> <el-dialog title="分配权限" :visible.sync="auth.visible">
<el-form :model="auth.form"> <el-form :model="auth.form">
...@@ -158,7 +158,7 @@ import table from "@/assets/mixins/table"; ...@@ -158,7 +158,7 @@ import table from "@/assets/mixins/table";
import dialogShow from "./dialogshow"; import dialogShow from "./dialogshow";
export default { export default {
mixins: [table], mixins: [table],
components: { dialogShow }, components: { dialogShow },
created() {}, created() {},
methods: { methods: {
beforeRender(data) { beforeRender(data) {
...@@ -186,7 +186,7 @@ export default { ...@@ -186,7 +186,7 @@ export default {
return this.allResources; return this.allResources;
} }
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.$post("/resource/list", {size: -1}) this.$post("/resource/list", { size: -1 })
.then(({ data }) => { .then(({ data }) => {
resolve(this.groupByAuth(data.data)); resolve(this.groupByAuth(data.data));
}) })
...@@ -224,8 +224,8 @@ export default { ...@@ -224,8 +224,8 @@ export default {
getRoleAuths(id) { getRoleAuths(id) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.$post("/role/auth/list", { this.$post("/role/auth/list", {
"roleId": id, roleId: id,
"size": -1, size: -1,
}) })
.then(({ data }) => { .then(({ data }) => {
const result = data.data.map((i) => i.resourceId); const result = data.data.map((i) => i.resourceId);
...@@ -257,7 +257,7 @@ export default { ...@@ -257,7 +257,7 @@ export default {
// return this.allUsers; // return this.allUsers;
// } // }
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.$post("/user/list", { size: -1 }) this.$post("/user/list", { size: -1 })
.then(({ data }) => { .then(({ data }) => {
resolve(data.data); resolve(data.data);
}) })
...@@ -283,10 +283,10 @@ export default { ...@@ -283,10 +283,10 @@ export default {
async getUsersoo(userTypeIdVal, loginNameVal, realNameVal) { async getUsersoo(userTypeIdVal, loginNameVal, realNameVal) {
const query = { const query = {
"size": -1, size: -1,
"userType": userTypeIdVal, userType: userTypeIdVal,
"loginName": loginNameVal, loginName: loginNameVal,
"realName": realNameVal, realName: realNameVal,
}; };
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.$post("/user/list", query) this.$post("/user/list", query)
...@@ -338,8 +338,8 @@ export default { ...@@ -338,8 +338,8 @@ export default {
getRoleUsers(id) { getRoleUsers(id) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.$post("/role/user/list", { this.$post("/role/user/list", {
"roleId": id, roleId: id,
"size": -1, size: -1,
}) })
.then(({ data }) => { .then(({ data }) => {
const result = data.data const result = data.data
...@@ -382,8 +382,8 @@ export default { ...@@ -382,8 +382,8 @@ export default {
async saveUser() { async saveUser() {
try { try {
//this.user.form.userIdList = this.user.checkList.join(","); //this.user.form.userIdList = this.user.checkList.join(",");
this.user.form.userIdList = this.user.checkList this.user.form.userIdList = this.user.checkList;
await this.$post("/role/user/distributionUser", this.user.form,); await this.$post("/role/user/distributionUser", this.user.form);
this.user.visible = false; this.user.visible = false;
this.user.form = this.initForm(); this.user.form = this.initForm();
this.$message.success("操作成功"); this.$message.success("操作成功");
...@@ -447,18 +447,24 @@ export default { ...@@ -447,18 +447,24 @@ export default {
type: "text", type: "text",
label: "角色名", label: "角色名",
}, },
], ],
columns: [ 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", prop: "name",
align: "center",
label: "角色名", label: "角色名",
}, },
{ {
prop: "remark", prop: "remark",
align: "center",
label: "备注", label: "备注",
}, },
// { // {
...@@ -469,12 +475,14 @@ export default { ...@@ -469,12 +475,14 @@ export default {
// }, // },
{ {
prop: "createTime", prop: "createTime",
align: "center",
label: "创建时间", label: "创建时间",
formatter: this.formatterDate, formatter: this.formatterDate,
}, },
{ {
label: "操作", label: "操作",
align: "center",
witdh: 120, witdh: 120,
formatter: (row) => { formatter: (row) => {
return ( return (
...@@ -485,16 +493,15 @@ export default { ...@@ -485,16 +493,15 @@ export default {
onEdit={this.toEdit} onEdit={this.toEdit}
onDel={this.toDel} onDel={this.toDel}
/>{" "} />{" "}
<el-button
<el-button icon="el-icon-share"
icon="el-icon-share" size="mini"
size="mini" type="text"
type="text" onClick={() => this.setAuth(row)}
onClick={() => this.setAuth(row)} >
> 分配权限
分配权限 </el-button>
</el-button> {/*
{/*
<el-button <el-button
icon="el-icon-goods" icon="el-icon-goods"
size="mini" size="mini"
......
...@@ -41,9 +41,13 @@ export default { ...@@ -41,9 +41,13 @@ export default {
}, },
], ],
columns: [ columns: [
{
{ type: "selection",reserveSelection:true, width: 60 }, type: "selection",
{ type: "index", label: "序号",align:"center", width: 50 }, align: "center",
reserveSelection: true,
width: 60,
},
{ type: "index", label: "序号", align: "center", width: 50 },
{ {
prop: "name", prop: "name",
label: "任务名称", label: "任务名称",
......
...@@ -17,10 +17,10 @@ module.exports = { ...@@ -17,10 +17,10 @@ module.exports = {
hot: true,//自动保存 hot: true,//自动保存
proxy: { proxy: {
'/m': { '/m': {
target: 'http://127.0.0.1:18222', target: 'http://192.168.0.98:11091',
changeOrigin: true, changeOrigin: true,
secure: false, secure: false,
cookieDomainRewrite: 'plm.testnew.com', cookieDomainRewrite: 'plm.testnew.com',
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment