Authored by 鲁尚清

缓存数据功能页面,故障诊断基础环境全部添加后刷新

<title>缓存数据</title>
<iframe src="/vue3/index.html#/cache" class="layadmin-iframe" style="height: 99.5%!important;"/>
... ...
... ... @@ -53,3 +53,5 @@
/*对比分析*/
@import "../css/analysis.css";
/*缓存数据*/
@import "../css/cacheData.css";
... ...
.cache-container{
height:100%;
background: #FFFFFF;
padding:20px;
}
.tag-item{
margin-right: 10px;
}
.view-container{
min-height: 600px;
padding:0 10px 10px;
display: flex;
flex-flow: column;
align-items: flex-start;
}
.view-title{
padding-bottom: 10px;
}
.view-detail{
flex: 1;
width: 100%;
text-align: left;
border:1px solid #ccc;
max-height: 600px;
overflow-y: auto;
}
.detail-data{
padding:10px;
}
\ No newline at end of file
... ...
... ... @@ -144,7 +144,12 @@ const routes = [{
path: '/vue3/portSense',
name: 'portSense',
component: () => myImport('views/portSense/index')
}
},
{
path: '/cache',
name: 'cacheData',
component: () => myImport('views/cacheData/index')
},
];
// hash模式: createWebHashHistory
... ...
<div class="cache-container">
<el-row>
<el-col :span="24">
<div class="flex-div-start margin-top-bottom-10">
<el-input class="margin-right-10" v-model="keyWords" placeholder="输入关键字" />
<div class="flex-div-start">
<el-button type="primary" @click="onBtnSearch()" style="margin-left: 10px">搜索</el-button>
</div>
</div>
</el-col>
</el-row>
<el-row class="margin-top-bottom-10">
<el-col :span="24" class="flex-div-start margin-bottom-10">
<el-check-tag class="tag-item" v-for="(item,index) in tagData" :checked="checkedId==item.id" @click="changeTag(item.id)">{{item.name}}</el-check-tag>
</el-col>
</el-row>
<el-row class="margin-top-bottom-10">
<el-col :span="24" class="flex-div-start margin-bottom-10">
<!-- <span>匹配项:{{num}}个</span>-->
<span>[筛选:{{num}}个]</span>
</el-col>
</el-row>
<el-row class="margin-bottom-50">
<el-col :span="24" class="table-height">
<cm-table-page v-show="tableDataList" :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList"
:showIndex="true" :total="count" :showSelection="false"
:showBorder="true" :loading="false" :pageSize="pageSize"
:showPage="true" :showTools="true" :height="(height - 500)">
<template #tools="{scope}">
<el-button type="text" size="small" @click.prevent="handleView(scope.row,scope.$index)">
查看
</el-button>
</template>
</cm-table-page>
</el-col>
</el-row>
</div>
<cm-dialog :title="titleName" width="90%" :showDialogVisible="cacheVisible" @hidedialog="closeDialog" :showCancelBtn="true" :showFooter="false">
<template v-slot>
<div class="view-container">
<div class="view-title">Value:</div>
<div class="view-detail">
<div class="detail-data">
{{viewData}}
</div>
</div>
</div>
<div class="margin-top flex-center ">
<el-button @click="cancelBtn">取消</el-button>
</div>
</template>
</cm-dialog>
... ...
export default {
name: 'cacheData',
template: '',
components: {},
props:[],
data () {
return {
}
},
setup(){
const {proxy} = Vue.getCurrentInstance();
// Start LSQ 2022/1/5
let height = Vue.ref(window.innerHeight - 10);
// 挂载完
Vue.onMounted(() => {
})
//配置项标签数据
let tagData=Vue.ref([{
name:'配置1',
id:'001'
},{
name:'配置2',
id:'002'
},{
name:'配置3',
id:'003'
}])
//表格字段
let columns=Vue.ref([
{
prop: 'busTypeName',
label: '业务系统',
sortable: true,
align: 'center',
},
{
prop: 'resName',
label: '资源名称',
sortable: true,
align: 'center',
},
])
let page=Vue.ref(1);
let pageSize=Vue.ref(10);
let keyWords=Vue.ref();
let count=Vue.ref(0);
let tableDataList=Vue.ref([{
busTypeName:'电子税务局',
id:'111',
resName:'缓存',
val:'25698458'
}]);
let checkedId = Vue.ref(0);
let titleName=Vue.ref('查看数据')
let cacheVisible=Vue.ref(false);
let viewData=Vue.ref();
//匹配项数
let num=Vue.ref(0);
//点击标签进行搜索
const changeTag = (status) => {
console.log("aa",status)
checkedId.value = status;
getDataList();
}
//操作按钮 查看
const handleView=(row,index)=>{
viewData.value=row.val;
cacheVisible.value=true;
}
//重新加载表格数据
let loadTableDataList = ({page, limit}) => {
page.value=page;
pageSize.value=limit;
getDataList()
}
// 点击按钮搜索
let onBtnSearch = () => {
getDataList();
}
//获取缓存数据
let getDataList=()=>{
let params={
page:page.value,
pageSize:pageSize.value,
keyWord:keyWords.value,
id:checkedId.value
}
/*proxy.$http.get(`/api-web/`, params, function (res) {
if (res && res.success) {
count.value = res.count;
tableDataList.value = res.data;
}
});*/
}
//关闭弹框回调函数
let closeDialog=()=>{
}
//关闭弹框
let cancelBtn=()=>{
cacheVisible.value=false;
}
return {
num,
height,
columns,
tagData,
page,
count,
pageSize,
keyWords,
tableDataList,
checkedId,
changeTag,
handleView,
loadTableDataList,
onBtnSearch,
getDataList,
cacheVisible,
titleName,
viewData,
closeDialog,
cancelBtn
}
//End LSQ 2022/1/5
}
}
\ No newline at end of file
... ...
... ... @@ -48,6 +48,7 @@ export default {
computed: {},
setup(props){
const {proxy} = Vue.getCurrentInstance();
let height = Vue.ref(window.innerHeight - 10);
let id = proxy.$global.getQueryVariable('configId') ;
let config = Vue.ref(id == false ? null : id);
let count=Vue.ref(0);
... ... @@ -148,6 +149,7 @@ export default {
}
return {
height,
getEnvironmentData,
loadTableDataList,
page,
... ...
... ... @@ -323,7 +323,10 @@ export default {
this.type='base';
this.state=this.faultEnvironmentRadio;
this.setDetailConfig(this.type)
this.getBaseList();
if(this.faultEnvironmentRadio==1){
this.getBaseList();
}
},
//APM
... ... @@ -644,13 +647,17 @@ export default {
this.baseVisible=false;
if(itemData.faultConfId){
this.faultConfId=itemData.faultConfId;
this.propsData.faultConfId=this.faultConfId;
}
this.setTargetId(itemData.targetId);
// this.targetId=itemData;
this.propsData.targetId=itemData.targetId;
//获取已添加的环境基础列表
this.getBaseList();
},
getBaseList(){
this.$refs.basic.setBizId();
this.$refs.basic.getEnvironmentData();
},
... ...