monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit edefc0c975a75396c34450a4eca2f967b7ec0b11 1 parent 9233a99d

权限列表，如果能从缓存中加载到数据，则获取缓存中的数据； 

诊断是结果列表
Inline Side-by-side
Showing 15 changed files with 306 additions and 114 deletions
... ... @@ -3,41 +3,71 @@
@import "../css/components.css";
/*最外层样式*/
.container{
.container {
background-color: #CCCCCC;
padding: 3px 3px;
width:calc(100% - 10px);
width: calc(100% - 10px);
}
.container .cm-card{
overflow-y:auto;
.container .cm-card {
overflow-y: auto;
background: white;
border-radius: 3px
}
.container .cm-card .search {
padding: 3px 10px;
display: flex;
}
.container .cm-card .search .condition {
width: calc(100% - 200px);
display: flex;
flex-wrap: wrap;
}
.container .cm-card .search .condition div{
margin-right: 2px!important;
margin-bottom: 3px!important;
width: 250px!important;
}
.container .cm-card .search .btns {
width: 200px;
display: flex;
padding-left: 10px;
justify-content: center;
align-items:center;
}
.container .cm-card .search-table{
padding: 0px 6px;
}
/*
共通弹框配置样式
custom-class="config-dialog"
*/
.config-dialog .el-dialog__header{
text-align: left!important;
.config-dialog .el-dialog__header {
text-align: left !important;
}
.config-dialog .el-dialog__body{
padding: 5px 10px!important;
padding-bottom: 20px!important;
.config-dialog .el-dialog__body {
padding: 5px 10px !important;
padding-bottom: 20px !important;
}
.el-form-item{
.el-form-item {
display: flex;
}
.el-form-item__content{
.el-form-item__content {
width: 60%;
}
/*加载图标*/
.el-loading-spinner .el-icon{
.el-loading-spinner .el-icon {
width: 70px;
height: 70px;
background: url(../../../start/layui/css/modules/layer/default/loading-mj.png) no-repeat center;
... ... @@ -45,7 +75,7 @@ custom-class="config-dialog"
animation: sk-chase-dot 2.0s infinite ease-in-out both;
opacity: 0.65;
display: block;
margin-left: calc((100% - 70px)/2);
margin-left: calc((100% - 70px) / 2);
}
@keyframes sk-chase-dot {
... ... @@ -53,16 +83,26 @@ custom-class="config-dialog"
transform: rotate(360deg)
}
}
.select-all .el-button{
height:42px;
.select-all .el-button {
height: 42px;
}
.button-more{
position: absolute;right: 0;top: 33px;z-index: 1;background: #f5f7fa;width: 80px; padding: 10px;
.button-more {
position: absolute;
right: 0;
top: 33px;
z-index: 1;
background: #f5f7fa;
width: 80px;
padding: 10px;
}
.breadcrumb .el-breadcrumb{
.breadcrumb .el-breadcrumb {
background: #ffffff;
padding: 20px 5px 0;
}
.breadcrumb .el-breadcrumb .el-breadcrumb__item{
.breadcrumb .el-breadcrumb .el-breadcrumb__item {
cursor: pointer;
}
\ No newline at end of file
}
... ...
... ... @@ -9,24 +9,23 @@
:width="getWidth(item.width)">
<template #default="scope">
<slot :row="scope.row" :prop="item.prop" :column="item">
<div v-if="typeof(item.render) == 'function'" >
<div v-if="typeof(item.click) == 'function'">
<!--<el-link :type="linkType" :underline="isLink" @click="item.click(scope.row)" v-html="item.render(scope.row)"></el-link>-->
<span @click="item.click(scope.row)" v-html="item.render(scope.row)"></span>
</div>
<div v-else>
<!-- <el-link :type="linkType" :underline="isLink" v-html="item.render(scope.row)"></el-link>-->
<span v-html="item.render(scope.row)"></span>
</div>
<div v-if="typeof(item.click) == 'function' && typeof(item.render) == 'function'">
<span style="cursor: pointer" @click="item.click(scope.row)" v-html="item.render(scope.row)"></span>
</div>
<div v-else-if="typeof(item.click) == 'function'" >
<span style="cursor: pointer" @click="item.click(scope.row)"> {{scope.row[item.prop]}}</span>
</div>
<div v-else-if="typeof(item.render) == 'function'" >
<span v-html="item.render(scope.row)">{{scope.row[item.prop]}}</span>
</div>
<span v-else>
{{scope.row[item.prop]}}
{{scope.row[item.prop]}}
</span>
</slot>
</template>
</el-table-column>
<el-table-column v-if="showTools && columns.length > 0" label="操作" width="80">
<el-table-column v-if="showTools && columns.length > 0" label="操作" width="80" align="center">
<template #default="scope">
<slot name="tools" :scope="scope" ></slot>
</template>
... ...
... ... @@ -33,10 +33,6 @@ export default {
type: String,
default: '序号'
},
/*currentPage: {
type: Number,
default: 1
},*/
// 分页页码设置
pageSizes: {
type: Array,
... ... @@ -79,8 +75,7 @@ export default {
showTools:{
type: Boolean,
default: false
},
}
},
data() {
return {}
... ...
... ... @@ -260,6 +260,20 @@ global.getBase64 = (file) => {
});
}
/**
* 判断是否是管理员角色
* <p>
* 作者： Wang
* 时间：2021/12/13 14:31
*/
global.isAdminRole = () =>{
let roles = sessionStorage.getItem('roles');
if(roles && roles.indexOf('ADMIN') != -1){
return true;
}
return false;
}
// 组件默认大小 medium / small / mini
global.elementSize = '';
... ...
... ... @@ -12,7 +12,7 @@ server:
key-store-password: Hg0801..
key-password: Hg0801..
url:
gateway: http://127.0.0.1:8080
gateway: https://192.168.0.248:8080
inspection_web: http://127.0.0.1:8082
assetsweb: http://127.0.0.1:8082
mxgraph_editor: http://127.0.0.1:8085
... ...
<title>故障管理</title>
<iframe src="/vue3/index.html#/fault/faultForm" class="layadmin-iframe" style="height: 99.5%!important;"/>
<iframe src="/vue3/index.html#/fault/result/index" class="layadmin-iframe" style="height: 99.5%!important;"/>
<!--<iframe src="/vue3/index.html#/fault/index" class="layadmin-iframe" style="height: 99.5%!important;"/>-->
... ...
<div style="display: flex">
<div style="cursor:pointer;width: calc(100% - 25px)">{{textString}}</div>
<div @click="openDetail" style="cursor:pointer;width: calc(100% - 25px)">{{textString}}</div>
<el-dropdown style="width: 25px">
<span class="el-dropdown-link" @click="openDetail">
<span class="el-dropdown-link" style="cursor:pointer;">
<i class="el-icon-more" style="color: blue;font-weight: bold;" />
</span>
<template #dropdown>
... ...
... ... @@ -68,7 +68,7 @@ let configPageEdit = (columns, currentNode) => {
proxy.$global.showMsg("请选择关联扩展属性！", "warning")
return;
}
debugger
if(fieldsValueObj.value[row.id] && Object.keys(fieldsValueObj.value[row.id]).length >0){
settingCmDialogFlg.value = flg;
return;
... ...
... ... @@ -126,7 +126,7 @@ const routes = [{
component: () => myImport('views/faultDiagnosis/index')
},
{
path: '/fault/faultForm',
path: '/fault/result/index',
name: 'faultForm',
component: () => myImport('views/faultDiagnosis/result/index')
}/*,
... ...
<div class="container" :style="{'height':height+'px','max-height':height+'px'}">
<div class="cm-card" :style="{'min-height':height+'px','max-height':height+'px','height':'100%'}">
<div class="search">
<!--<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item >
<el-input v-model="formInline.user" placeholder="Approved by"></el-input>
</el-form-item>
<el-form-item >
<el-input v-model="formInline.user" placeholder="Approved by"></el-input>
</el-form-item>
<el-form-item >
<el-input v-model="formInline.user" placeholder="Approved by"></el-input>
</el-form-item>
<el-form-item >
<el-input v-model="formInline.user" placeholder="Approved by"></el-input>
</el-form-item>
<el-form-item >
<el-input v-model="formInline.user" placeholder="Approved by"></el-input>
</el-form-item>
<el-form-item >
<el-select v-model="formInline.region" placeholder="Activity zone">
<el-option label="Zone one" value="shanghai"></el-option>
<el-option label="Zone two" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">Query</el-button>
</el-form-item>
</el-form>-->
<div class="condition">
<el-form-item>
<el-input v-model="formInline.user" placeholder="Approved by"></el-input>
<el-input v-model="searchForm.keyword" placeholder="输入关键字"
@keydown.enter.native="getPage"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="formInline.user" placeholder="Approved by"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="formInline.user" placeholder="Approved by"></el-input>
</el-form-item>
<el-form-item>
<el-select v-model="formInline.region" placeholder="Activity zone">
<!--<el-form-item>
<el-select v-model="searchForm.category" placeholder="故障分类">
<el-option label="Zone one" value="shanghai"></el-option>
<el-option label="Zone two" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form-item>-->
</div>
<div class="btns">
<el-form-item>
<el-button type="primary" @click="onSubmit">Query</el-button>
<el-button type="primary" @click="getPage">搜索</el-button>
</el-form-item>
</div>
</div>
<cm-table-page :columns="[]" :dataList="[]"
@loaddata="getPage" :showIndex="true"
:showIndex="true"
:showSelection="true"
:pageSizes="[10,50,90, 200, 300, 400]" :pageSize="limit"
:showBorder="true" :currentPage="currentPage" :total="total" :loading="false"
:showPage="true" :height="(height - 95)"
:maxWidth="max">
</cm-table-page>
<div class="search-table">
<cm-table-page :columns="list.columns"
:dataList="list.dataList"
:total="list.total"
@loaddata="getPageInfo"
:showIndex="true"
:showBorder="true"
:showPage="true"
:showTools="true"
:height="(height - 105)">
<template #tools="{scope}">
<el-button type="text" size="small" @click.prevent="handleClick(scope.row,scope.$index)">
处理
</el-button>
</template>
</cm-table-page>
</div>
</div>
<!-- 弹框区域 -->
<cm-dialog :title="faultDetailDialogTitle" width="80%" :showDialogVisible="showFaultDetailDialog"
@hidedialog="closeFaultDetailDialog" :showFooter="false">
<template v-slot>
<div>
<el-timeline>
<el-timeline-item timestamp="2018/4/12" placement="top">
<el-card>
<h4>Update Github template</h4>
<p>Tom committed 2018/4/12 20:46</p>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="2018/4/3" placement="top">
<el-card>
<h4>Update Github template</h4>
<p>Tom committed 2018/4/3 20:46</p>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="2018/4/2" placement="top">
<el-card>
<h4>Update Github template</h4>
<p>Tom committed 2018/4/2 20:46</p>
</el-card>
</el-timeline-item>
</el-timeline>
</div>
</template>
</cm-dialog>
</div>
... ...
const faultDetail = () => {
const {proxy} = Vue.getCurrentInstance();
let showFaultDetailDialog = Vue.ref(false);
let faultDetailDialogTitle = Vue.ref('');
let closeFaultDetailDialog = (flg) =>{
showFaultDetailDialog.value = flg;
}
return {
showFaultDetailDialog,
faultDetailDialogTitle,
closeFaultDetailDialog
}
}
export default {
name: 'resIndex',
template: '',
components: {
'tree-config': Vue.defineAsyncComponent(
() => myImport('components/page/res/treeconfig/index')
),
},
components: {},
data() {
return {
props : {
label:'label',
children:'children'
props: {
label: 'label',
children: 'children'
}
}
},
setup() {
const {proxy} = Vue.getCurrentInstance();
let height = Vue.ref(window.innerHeight -20);
let height = Vue.ref(window.innerHeight - 20);
// 搜索表单内容
let searchForm = Vue.ref({
keyword: '',
page: 1,
pageSize: 10
});
let formInline = Vue.ref({
user: '',
region: '',
// 列表展示结果
let list = Vue.ref({
columns: [{
prop: 'faultBody',
label: '故障主体',
click: function (row) {
// 展示弹框
}
}, {
prop: 'createTime',
label: '发生时间'
}, {
prop: 'faultState',
label: '故障状态'
}],
dataList: [],
total: 0
});
/**
* 分页查询
* <p>
* 作者： Wang
* 时间：2021/12/13 16:51
*/
let getPage = () => {
proxy.$http.get(`/api-web/fault/page`, searchForm.value, function (res) {
if (res && res.data) {
list.value.dataList = res.data;
}
});
}
let handleClick = (row, index) => {
}
/**
* 分页切换
* <p>
* 作者： Wang
* 时间：2021/12/13 17:06
*/
let getPageInfo = ({page, limit}) => {
searchForm.value.page = page;
searchForm.value.pageSize = limit;
// 下一页搜索
getPage();
}
const {
showFaultDetailDialog,
faultDetailDialogTitle,
closeFaultDetailDialog
} = faultDetail();
// 挂载完
Vue.onMounted(() => {
// 初始化加载页面
getPage();
})
return {
height,
formInline
searchForm,
list,
getPage,
getPageInfo,
handleClick
}
}
}
... ...
... ... @@ -18,18 +18,18 @@
</el-form-item>
<el-form-item>
<el-button @click="loadResList">查询</el-button>
<el-button v-if="obj.searchList.length > 0" @click="loadResList">查询</el-button>
</el-form-item>
</el-form>
</div>
<div style="width: 100px">
<div style="width: 100px" v-if="$global.isAdminRole()">
<el-button type="primary" @click="showConfigDialog(true)">配置</el-button>
</div>
</div>
<cm-table-page :columns="obj.columns" :dataList="obj.maps" @loaddata="getPage" :showIndex="true"
:pageSizes="[10,50,90, 200, 300, 400]" :pageSize="limit"
:showBorder="true" :currentPage="currentPage" :total="total" :loading="false"
:showBorder="true" :total="total" :loading="false"
:showPage="true" :height="(height - 95)"
:maxWidth="max">
<template #default="{row,prop,column}">
... ...
... ... @@ -62,9 +62,7 @@ export default {
// 当前点击
const currentNode = Vue.ref({});
// 搜索框内容
const searchForm = Vue.ref({
});
const searchForm = Vue.ref({});
// 单元格点及保存的数据
let cellDetail = Vue.ref({});
... ... @@ -152,14 +150,15 @@ export default {
}
let getPage = (pageInfo) =>{
console.log(pageInfo);
debugger;
page.value = pageInfo.page;
limit.value = pageInfo.limit;
loadResList()
}
let isManager = () => {
}
// 配置页面
const {showConfig, configObj, showConfigDialog} = configPage()
... ...
<div class="container" :style="{'height':height+'px','max-height':height+'px'}">
<div class="cm-card" :style="{'min-height':height+'px','max-height':height+'px','height':'100%'}">
<div class="search">
<div class="condition">
<el-form-item>
<el-input v-model="formInline.user" placeholder="输入关键字"></el-input>
</el-form-item>
<el-form-item>
<el-select v-model="formInline.region" placeholder="故障分类">
<el-option label="Zone one" value="shanghai"></el-option>
<el-option label="Zone two" value="beijing"></el-option>
</el-select>
</el-form-item>
</div>
<div class="btns">
<el-form-item>
<el-button type="primary" @click="onSubmit">搜索</el-button>
</el-form-item>
</div>
</div>
<cm-table-page :columns="[]" :dataList="[]"
@loaddata="getPage" :showIndex="true"
:showIndex="true"
:showSelection="true"
:pageSizes="[10,50,90, 200, 300, 400]" :pageSize="limit"
:showBorder="true" :currentPage="currentPage" :total="total" :loading="false"
:showPage="true" :height="(height - 105)"
:maxWidth="max">
</cm-table-page>
</div>
</div>
... ...
export default {
name: 'resIndex',
template: '',
components: {
},
data() {
return {
props : {
label:'label',
children:'children'
}
}
},
setup() {
const {proxy} = Vue.getCurrentInstance();
let height = Vue.ref(window.innerHeight -20);
let formInline = Vue.ref({
user: '',
region: '',
});
// 挂载完
Vue.onMounted(() => {
})
return {
height,
formInline
}
}
}
... ...