monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 182f668bd203a3be7e2dda0fd2db4c633054b642 1 parent 76ebcc76

代码优化

Inline Side-by-side
Showing 11 changed files with 134 additions and 36 deletions
... ... @@ -7,6 +7,14 @@
background: white;
background-color: #CCCCCC;
padding: 3px 3px;
width:calc(100% - 10px);
overflow:hidden;
}
.container .cm-card{
overflow-y:auto;
background: white;
border-radius: 3px
}
/*
... ...
... ... @@ -664,6 +664,9 @@ layui.define(['view'], function(exports){
, toYTHViewScreen: function () {
window.open(sessionStorage.getItem("ythView") + '?access_token=' + localStorage.getItem("access_token"));
}
, toDZSWJScreen: function () {
window.open(window.location.origin + '/vue3/index.html#/zj/dp?access_token=' + localStorage.getItem("access_token"));
}
//向右滚动页面标签
, leftPage: function () {
... ...
... ... @@ -68,7 +68,7 @@
</li>
<li class="layui-nav-item" lay-tips="电子税务局">
<!-- <a href="javascript:;" layadmin-event="toBigScreen"><i class="layui-icon layui-icon-chart-screen"></i></a>-->
<a href="javascript:;" layadmin-event="toBigScreen" ><img src="/src/style/img/icon-dianzishuiwuju.png" style="width: 16px;height: 16px"></a>
<a href="javascript:;" layadmin-event="toDZSWJScreen" ><img src="/src/style/img/icon-dianzishuiwuju.png" style="width: 16px;height: 16px"></a>
</li>
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-unselect>
<a href="javascript:;" layadmin-event="more"><i class="layui-icon layui-icon-more-vertical"></i></a>
... ...
<title>资源视图</title>
<iframe src="/vue3/index.html#/res/list" class="layadmin-iframe"/>
<iframe src="/vue3/index.html#/res/list" class="layadmin-iframe" style="height: 99.5%!important;"/>
... ...
<title>资源视图</title>
<iframe src="/vue3/index.html#/res/list" class="layadmin-iframe" style="height: 99.5%!important;"/>
... ...
... ... @@ -7,7 +7,21 @@ export default {
}
},
setup() {
props:{
treeNode: {
type: Object,
default: {}
},
parentNode: {
type: Object,
default: {}
},
projectId: {
type: String,
default: ''
}
},
setup(props, {attrs, slots, emit}) {
let height = Vue.ref(window.innerHeight - 130);
const {proxy} = Vue.getCurrentInstance();
... ... @@ -78,7 +92,7 @@ export default {
proxy.$http.post("/api-web/bOpsPerson/personCollect", {
"page":1,
"limit":10,
"projectId":"1"
"projectId": treeNode.map.nodeType.projectId
}, function (res) {
if (res && res.data) {
dataList.value = res.data
... ... @@ -92,6 +106,11 @@ export default {
getPage();
})
// 监听编辑状态
Vue.watch(() => props.treeNode, (newValue, oldVlaue) => {
getPage();
});
return {
columns,
... ...
... ... @@ -3,8 +3,15 @@
<el-row :gutter="5">
<el-col :span="4">
<div :style="{'min-height':height+'px','height':'100%','overflow':'auto'}" style="background-color: white;border-radius: 3px">
<el-tree :data="dataSource" :default-expanded-keys="[1]" :props="defaultProps"
@node-click="handleNodeClick"/>
<el-tree :data="dataSource" :default-expanded-keys="[1]" :props="defaultProps" >
<template #default="{ node, data }">
<div style=" width: 100%;">
<div style="width: 100%;max-width: 100%;overflow: hidden;text-overflow: ellipsis;text-align: left;" @click="handleNodeClick(data)" :title="node.label">
{{node.label }}
</div>
</div>
</template>
</el-tree>
</div>
</el-col>
<el-col :span="20" >
... ...
<!--:style="{'height':height+'px','max-height':height+'px','overflow':'auto'}"-->
<div class="container tree-config" :style="{'height':height+'px','max-height':height+'px','overflow':'auto'}">
<el-row :gutter="5">
<div class="container" :style="{'height':height+'px','max-height':height+'px'}">
<el-row :gutter="5" >
<el-col :span="4" >
<cm-res-type-tree-view :treeData="treeData" :show-tools="true"></cm-res-type-tree-view>
<div class="cm-card" :style="{'min-height':height+'px','height':'100%'}">
<el-tree :data="treeData" :default-expanded-keys="[1]" @node-click="handleNodeClick"/>
</div>
</el-col>
<el-col :span="20" >
<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 class="cm-card" :style="{'min-height':height+'px','height':'100%'}" >
</div>
</el-col>
</el-row>
<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>
... ...
... ... @@ -9,14 +9,14 @@ export default {
data() {
return {
props : {
label:'title',
label:'label',
children:'children'
}
}
},
setup() {
const {proxy} = Vue.getCurrentInstance();
let height = Vue.ref(window.innerHeight - 50);
let height = Vue.ref(window.innerHeight -10);
const treeData = Vue.ref([]);
const tableData = Vue.ref([]);
... ... @@ -33,13 +33,17 @@ export default {
// 获取左侧树结构
let loadTree = () => {
proxy.$http.get("/api-web/res/list/tree", {}, function (res) {
proxy.$http.get("/api-web/v32/res/list/tree", {}, function (res) {
if (res && res.data) {
treeData.value = res.data
}
});
}
let handleNodeClick =(data) =>{
console.log(data)
}
// 挂载完
Vue.onMounted(() => {
loadTree();
... ...
<div class="container" :style="{'height':height+'px','max-height':height+'px'}">
<el-row :gutter="5" >
<el-col :span="4" >
<div class="cm-card" :style="{'min-height':height+'px','height':'100%'}">
<el-tree :data="treeData" :default-expanded-keys="[1]" @node-click="handleNodeClick"/>
</div>
</el-col>
<el-col :span="20" >
<div class="cm-card" :style="{'min-height':height+'px','height':'100%'}" >
</div>
</el-col>
</el-row>
</div>
... ...
export default {
name: 'resIndex',
template: '',
components: {
'tree-config': Vue.defineAsyncComponent(
() => myImport('components/page/res/treeconfig/index')
),
},
data() {
return {
props : {
label:'label',
children:'children'
}
}
},
setup() {
const {proxy} = Vue.getCurrentInstance();
let height = Vue.ref(window.innerHeight -10);
const treeData = Vue.ref([]);
const tableData = Vue.ref([]);
const dialog = Vue.ref({
title: '资源类型配置',
activeName: ''
});
const dialogVisible = Vue.ref(false);
// 弹框
let showDialog = () => {
dialogVisible.value = true;
}
// 获取左侧树结构
let loadTree = () => {
proxy.$http.get("/api-web/v32/res/list/tree", {}, function (res) {
if (res && res.data) {
treeData.value = res.data
}
});
}
let handleNodeClick =(data) =>{
console.log(data)
}
// 挂载完
Vue.onMounted(() => {
loadTree();
console.log('onMounted');
})
return {
treeData,
height,
showDialog,
dialogVisible,
tableData,
dialog
}
}
}
... ...