monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 10375436efe9eae24ad854562d298a5348a75292 1 parent 867a17cc

优化

Inline Side-by-side
Showing 19 changed files with 772 additions and 19 deletions
# **shuo'ming说明**
# **说明**
- hg-monitor-web-base 基于天津现有功能作为基类
- hg-monitor-web-new 最新开发版本
- hg-monitor-web-tj 天津10月后的个性化开发
- hg-monitor-web-tj 天津21年10月后的个性化开发
说明说明注意事项 版本开发，天津版本的开发可在base中修改，然后将代码复制到hg-monitor-web-tj代码中
... ...
... ... @@ -55,6 +55,84 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe60c;</span>
<div class="name">AK-BT_对勾_B</div>
<div class="code-name">&amp;#xe60c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe617;</span>
<div class="name">对勾选中</div>
<div class="code-name">&amp;#xe617;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62a;</span>
<div class="name">对勾</div>
<div class="code-name">&amp;#xe62a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60e;</span>
<div class="name">对勾_块</div>
<div class="code-name">&amp;#xe60e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe640;</span>
<div class="name">进度条-对勾</div>
<div class="code-name">&amp;#xe640;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe686;</span>
<div class="name">叉</div>
<div class="code-name">&amp;#xe686;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6e7;</span>
<div class="name">对，勾</div>
<div class="code-name">&amp;#xe6e7;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe618;</span>
<div class="name">规范－导航栏－叉</div>
<div class="code-name">&amp;#xe618;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe654;</span>
<div class="name">地图找房_交叉</div>
<div class="code-name">&amp;#xe654;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe730;</span>
<div class="name">对勾</div>
<div class="code-name">&amp;#xe730;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe733;</span>
<div class="name">对勾</div>
<div class="code-name">&amp;#xe733;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6b5;</span>
<div class="name">操作-对勾</div>
<div class="code-name">&amp;#xe6b5;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60b;</span>
<div class="name">AK-BT_对勾_A</div>
<div class="code-name">&amp;#xe60b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe600;</span>
<div class="name">文件</div>
<div class="code-name">&amp;#xe600;</div>
... ... @@ -300,9 +378,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1632902475934') format('woff2'),
url('iconfont.woff?t=1632902475934') format('woff'),
url('iconfont.ttf?t=1632902475934') format('truetype');
src: url('iconfont.woff2?t=1632921801844') format('woff2'),
url('iconfont.woff?t=1632921801844') format('woff'),
url('iconfont.ttf?t=1632921801844') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
... ... @@ -329,6 +407,123 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-bt_duigou_B"></span>
<div class="name">
AK-BT_对勾_B
</div>
<div class="code-name">.icon-bt_duigou_B
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-duigouxuanzhong"></span>
<div class="name">
对勾选中
</div>
<div class="code-name">.icon-duigouxuanzhong
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-confirm-line"></span>
<div class="name">
对勾
</div>
<div class="code-name">.icon-confirm-line
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-duigou_kuai"></span>
<div class="name">
对勾_块
</div>
<div class="code-name">.icon-duigou_kuai
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-duigou3"></span>
<div class="name">
进度条-对勾
</div>
<div class="code-name">.icon-duigou3
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-cha"></span>
<div class="name">
叉
</div>
<div class="code-name">.icon-cha
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-duigou4"></span>
<div class="name">
对，勾
</div>
<div class="code-name">.icon-duigou4
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-guifandaohanglancha"></span>
<div class="name">
规范－导航栏－叉
</div>
<div class="code-name">.icon-guifandaohanglancha
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ziyuan"></span>
<div class="name">
地图找房_交叉
</div>
<div class="code-name">.icon-ziyuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-duigou"></span>
<div class="name">
对勾
</div>
<div class="code-name">.icon-duigou
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-duigou1"></span>
<div class="name">
对勾
</div>
<div class="code-name">.icon-duigou1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-duigou2"></span>
<div class="name">
操作-对勾
</div>
<div class="code-name">.icon-duigou2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-bt_duigou_a"></span>
<div class="name">
AK-BT_对勾_A
</div>
<div class="code-name">.icon-bt_duigou_a
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-wenjian"></span>
<div class="name">
文件
... ... @@ -699,6 +894,110 @@
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-bt_duigou_B"></use>
</svg>
<div class="name">AK-BT_对勾_B</div>
<div class="code-name">#icon-bt_duigou_B</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-duigouxuanzhong"></use>
</svg>
<div class="name">对勾选中</div>
<div class="code-name">#icon-duigouxuanzhong</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-confirm-line"></use>
</svg>
<div class="name">对勾</div>
<div class="code-name">#icon-confirm-line</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-duigou_kuai"></use>
</svg>
<div class="name">对勾_块</div>
<div class="code-name">#icon-duigou_kuai</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-duigou3"></use>
</svg>
<div class="name">进度条-对勾</div>
<div class="code-name">#icon-duigou3</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-cha"></use>
</svg>
<div class="name">叉</div>
<div class="code-name">#icon-cha</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-duigou4"></use>
</svg>
<div class="name">对，勾</div>
<div class="code-name">#icon-duigou4</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-guifandaohanglancha"></use>
</svg>
<div class="name">规范－导航栏－叉</div>
<div class="code-name">#icon-guifandaohanglancha</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-ziyuan"></use>
</svg>
<div class="name">地图找房_交叉</div>
<div class="code-name">#icon-ziyuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-duigou"></use>
</svg>
<div class="name">对勾</div>
<div class="code-name">#icon-duigou</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-duigou1"></use>
</svg>
<div class="name">对勾</div>
<div class="code-name">#icon-duigou1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-duigou2"></use>
</svg>
<div class="name">操作-对勾</div>
<div class="code-name">#icon-duigou2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-bt_duigou_a"></use>
</svg>
<div class="name">AK-BT_对勾_A</div>
<div class="code-name">#icon-bt_duigou_a</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-wenjian"></use>
</svg>
<div class="name">文件</div>
... ...
@font-face {
font-family: "iconfont"; /* Project id 2843738 */
src: url('iconfont.woff2?t=1632902475934') format('woff2'),
url('iconfont.woff?t=1632902475934') format('woff'),
url('iconfont.ttf?t=1632902475934') format('truetype');
src: url('iconfont.woff2?t=1632921801844') format('woff2'),
url('iconfont.woff?t=1632921801844') format('woff'),
url('iconfont.ttf?t=1632921801844') format('truetype');
}
.iconfont {
... ... @@ -13,6 +13,58 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-bt_duigou_B:before {
content: "\e60c";
}
.icon-duigouxuanzhong:before {
content: "\e617";
}
.icon-confirm-line:before {
content: "\e62a";
}
.icon-duigou_kuai:before {
content: "\e60e";
}
.icon-duigou3:before {
content: "\e640";
}
.icon-cha:before {
content: "\e686";
}
.icon-duigou4:before {
content: "\e6e7";
}
.icon-guifandaohanglancha:before {
content: "\e618";
}
.icon-ziyuan:before {
content: "\e654";
}
.icon-duigou:before {
content: "\e730";
}
.icon-duigou1:before {
content: "\e733";
}
.icon-duigou2:before {
content: "\e6b5";
}
.icon-bt_duigou_a:before {
content: "\e60b";
}
.icon-wenjian:before {
content: "\e600";
}
... ...
... ... @@ -6,6 +6,97 @@
"description": "",
"glyphs": [
{
"icon_id": "4198630",
"name": "AK-BT_对勾_B",
"font_class": "bt_duigou_B",
"unicode": "e60c",
"unicode_decimal": 58892
},
{
"icon_id": "5712911",
"name": "对勾选中",
"font_class": "duigouxuanzhong",
"unicode": "e617",
"unicode_decimal": 58903
},
{
"icon_id": "6119227",
"name": "对勾",
"font_class": "confirm-line",
"unicode": "e62a",
"unicode_decimal": 58922
},
{
"icon_id": "15726782",
"name": "对勾_块",
"font_class": "duigou_kuai",
"unicode": "e60e",
"unicode_decimal": 58894
},
{
"icon_id": "16160534",
"name": "进度条-对勾",
"font_class": "duigou3",
"unicode": "e640",
"unicode_decimal": 58944
},
{
"icon_id": "18368038",
"name": "叉",
"font_class": "cha",
"unicode": "e686",
"unicode_decimal": 59014
},
{
"icon_id": "18406123",
"name": "对，勾",
"font_class": "duigou4",
"unicode": "e6e7",
"unicode_decimal": 59111
},
{
"icon_id": "650748",
"name": "规范－导航栏－叉",
"font_class": "guifandaohanglancha",
"unicode": "e618",
"unicode_decimal": 58904
},
{
"icon_id": "1512024",
"name": "地图找房_交叉",
"font_class": "ziyuan",
"unicode": "e654",
"unicode_decimal": 58964
},
{
"icon_id": "1664366",
"name": "对勾",
"font_class": "duigou",
"unicode": "e730",
"unicode_decimal": 59184
},
{
"icon_id": "1833856",
"name": "对勾",
"font_class": "duigou1",
"unicode": "e733",
"unicode_decimal": 59187
},
{
"icon_id": "1915007",
"name": "操作-对勾",
"font_class": "duigou2",
"unicode": "e6b5",
"unicode_decimal": 59061
},
{
"icon_id": "4198629",
"name": "AK-BT_对勾_A",
"font_class": "bt_duigou_a",
"unicode": "e60b",
"unicode_decimal": 58891
},
{
"icon_id": "1118",
"name": "文件",
"font_class": "wenjian",
... ...
... ... @@ -4,10 +4,10 @@ import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class HGMonitorWebApplication {
public class HGMonitorNewWebApplication {
public static void main(String[] args) {
SpringApplication.run(HGMonitorWebApplication.class, args);
SpringApplication.run(HGMonitorNewWebApplication.class, args);
}
}
... ...
<title>资源视图</title>
<iframe src="/vue3/index.html#/res/list" class="layadmin-iframe"/>
... ...
@import "../icon/iconfont.css";
@import "../css/assets.css";
/*资源配置*/
@import "../css/res.css";
/*最外层样式*/
.container{
background: white;
background-color: #CCCCCC;
padding: 3px 3px;
}
/*
共通弹框配置样式
custom-class="config-dialog"
*/
.config-dialog .el-dialog__header{
text-align: left!important;
}
.config-dialog .el-dialog__body{
padding: 5px 10px!important;
padding-bottom: 20px!important;
min-height: 500px;
}
/*加载图标*/
.el-loading-spinner .icon-mj{
width: 70px;
height: 70px;
... ...
... ... @@ -77,14 +77,5 @@
/*background-color: rgb(249, 249, 249);*/
/*}*/
.assets-configmanager .config-dialog .el-dialog__header{
text-align: left!important;
}
.assets-configmanager .config-dialog .el-dialog__body{
padding: 5px 10px!important;
padding-bottom: 20px!important;
min-height: 500px;
}
/* 属性配置 -- end */
... ...
.tree-config {
}
.tree-config .card-item{
background-color: white;
padding: 0px 0px;
border-radius: 3px;
text-align: left;
height: 100%;
}
.tree-config .tree-node {
display: flex;
flex-direction: row;
width: 100%;
}
.tree-config .filter-view{
padding: 10px 20px;
}
.tree-config .tree-node .tree-node-label{
width: calc(100% - 40px);
text-align: left;
}
.tree-config .tree-node .tree-node-tools{
width: 40px;
text-align: right;
}
.tree-config .tree-node .tree-node-tools a{
margin: 2px;
}
... ...
<div class="container tree-config" :style="{'height':height+'px','max-height':height+'px','overflow':'hidden','padding':'0px'}">
<el-row :gutter="5">
<el-col :span="4" >
<div class="card-item">
<div class="filter-view">
<el-input v-model="filterText" size="samll" placeholder="请输入关键字" />
</div>
<div :style="{'height':height+'px','max-height':(height - 54)+'px','overflow':'auto','padding':'0px'}">
<el-tree ref="tree" style="padding:6px;" :props="props" :data="treeData" node-key="id" default-expand-all :expand-on-click-node="false">
<template #default="{ node, data }">
<div class="tree-node">
<div class="tree-node-label">{{ node.label }}</div>
<div class="tree-node-tools">
<a @click="append(data)">
<i class="el-icon-plus"></i>
</a>
<a @click="remove(node, data)">
<i class="el-icon-delete"></i>
</a>
</div>
</div>
</template>
</el-tree>
</div>
</div>
</el-col>
<el-col :span="20" >
<div class="card-item">
<div style="padding: 3px 6px;">
<el-button type="primary" @click="showDialog">添加</el-button>
<span class="iconfont icon-wenjianjia"></span>
</div>
<el-table :data="tableData" style="width: 100%">
<el-table-column fixed prop="date" label="Date" width="150" />
<el-table-column prop="name" label="Name" width="120" />
<el-table-column prop="state" label="State" width="120" />
<el-table-column prop="city" label="City" width="120" />
<el-table-column prop="address" label="Address" width="600" />
<el-table-column prop="zip" label="Zip" width="120" />
<el-table-column fixed="right" label="Operations" width="120">
<template #default>
<el-button type="text" size="small" @click="handleClick">Detail</el-button>
<el-button type="text" size="small">Edit</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-col>
</el-row>
<el-dialog top="2vh" :title="dialog.title" v-model="dialogVisible" custom-class="config-dialog" width="80%" destroy-on-close>
<el-tabs v-model="dialog.activeName" @tab-click="handleClick">
<el-tab-pane label="基本信息" name="jbxx">
</el-tab-pane>
<el-tab-pane label="基本信息1" name="jbxx1">
</el-tab-pane>
<el-tab-pane label="基本信息2" name="jbxx2">
</el-tab-pane>
</el-tabs>
</el-dialog>
<el-dialog top="2vh" title="添加节点" v-model="addDialogVisible" custom-class="config-dialog" width="80%" destroy-on-close>
{{data}}
</el-dialog>
</div>
... ...
export default {
name: 'treeconfig',
template: '',
components: {},
data() {
return {
props : {
label:'title',
children:'children'
}
}
},
setup() {
let height = Vue.ref(window.innerHeight - 130);
const filterText = Vue.ref('');
const {proxy} = Vue.getCurrentInstance();
const treeData = Vue.ref([]);
const tableData = Vue.ref([]);
let treeNodeData = Vue.ref({});
const dialog = Vue.ref({
title: '',
activeName: ''
});
const dialogVisible = Vue.ref(false);
const addDialogVisible = Vue.ref(false);
// 添加树节点
let append = (data) => {
treeNodeData.value = data;
addDialogVisible.value = true;
// const newChild = {
// id: 1111,
// title: 'testtest',
// children: []
// }
// if (!data.children) {
// data.children = []
// }
// data.children.push(newChild)
// this.dataSource = [...this.dataSource]
}
// 删除树节点
let remove = (node, data) => {
const parent = node.parent
const children = parent.data.children || parent.data
const index = children.findIndex((d) => d.id === data.id)
children.splice(index, 1)
this.dataSource = [...this.dataSource]
}
// 筛选
let filterNode = (value) => {
if (!value) return true
let arr = data.filter(function (v) {
if (v.label.indexOf(value) != -1) {
return v;
}
})
console.log(arr);
return arr;
}
// 弹框
let showDialog = () => {
dialogVisible.value = true;
}
// 调用接口
// 获取左侧树结构
let loadTree = () => {
proxy.$http.get("/api-web/home/resType/getTree?notExist=machineroom&table=resources&exist=HOST_MINICOMPUTER_SERVER", {}, function (res) {
if (res && res.data) {
treeData.value = res.data
}
});
}
// 监听编辑状态
Vue.watch(() => filterText.value, (newValue, oldVlaue) => {
proxy.$refs.tree.filter(newValue)
});
// 挂载完
Vue.onMounted(() => {
loadTree();
console.log('onMounted');
})
return {
height,
treeData,
append,
remove,
filterText,
filterNode,
showDialog,
dialogVisible,
tableData,
dialog,
treeNodeData
}
}
}
... ...
... ... @@ -27,6 +27,11 @@ const routes = [{
path: '/assets/configmanager',
name: 'configmanager',
component: () => myImport('views/assets/configmanager/index')
},
{
path: '/res/list',
name: 'resList',
component: () => myImport('views/res/list/index')
}
];
... ...
<!--:style="{'height':height+'px','max-height':height+'px','overflow':'auto'}"-->
<div class="container tree-config" >
<div class="card-item">
<div style="padding: 3px 6px;text-align: right">
<el-button type="primary" @click="showDialog">配置</el-button>
</div>
<el-table :data="tableData" style="width: 100%">
<el-table-column fixed prop="date" label="Date" width="150" />
<el-table-column prop="name" label="Name" width="120" />
<el-table-column prop="state" label="State" width="120" />
<el-table-column prop="city" label="City" width="120" />
<el-table-column prop="address" label="Address" width="600" />
<el-table-column prop="zip" label="Zip" width="120" />
<el-table-column fixed="right" label="Operations" width="120">
<template #default>
<el-button type="text" size="small" @click="handleClick">Detail</el-button>
<el-button type="text" size="small">Edit</el-button>
</template>
</el-table-column>
</el-table>
</div>
<el-dialog top="2vh" :title="dialog.title" v-model="dialogVisible" custom-class="config-dialog" width="80%" destroy-on-close>
<tree-config></tree-config>
</el-dialog>
</div>
... ...
export default {
name: 'resIndex',
template: '',
components: {
'tree-config': Vue.defineAsyncComponent(
() => myImport('components/page/res/treeconfig/index')
),
},
data() {
return {
}
},
setup() {
const {proxy} = Vue.getCurrentInstance();
let height = Vue.ref(window.innerHeight);
const tableData = [];
const dialog = Vue.ref({
title: '资源类型配置',
activeName: ''
});
const dialogVisible = Vue.ref(false);
// 弹框
let showDialog = () => {
dialogVisible.value = true;
}
// 挂载完
Vue.onMounted(() => {
console.log('onMounted');
})
return {
height,
showDialog,
dialogVisible,
tableData,
dialog
}
}
}
... ...
... ... @@ -47,6 +47,14 @@
</dependencies>
<build>
<resources>
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/**</include>
</includes>
</resource>
</resources>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
... ...