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

+<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/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;
+}

@@ -144,7 +144,12 @@ const routes = [{
 		path: '/vue3/portSense',
 		path: '/vue3/portSense',
 		name: 'portSense',
 		name: 'portSense',
 		component: () => myImport('views/portSense/index')
 		component: () => myImport('views/portSense/index')
-	}
+	},
+	{
+		path: '/cache',
+		name: 'cacheData',
+		component: () => myImport('views/cacheData/index')
+	},
 ];
 ];
 
 
 // hash模式： createWebHashHistory
 // 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
+
+    }
+
+}

@@ -48,6 +48,7 @@ export default {
     computed: {},
     computed: {},
     setup(props){
     setup(props){
         const {proxy} = Vue.getCurrentInstance();
         const {proxy} = Vue.getCurrentInstance();
+        let height = Vue.ref(window.innerHeight - 10);
         let id = proxy.$global.getQueryVariable('configId') ;
         let id = proxy.$global.getQueryVariable('configId') ;
         let config = Vue.ref(id == false ? null : id);
         let config = Vue.ref(id == false ? null : id);
         let count=Vue.ref(0);
         let count=Vue.ref(0);
@@ -148,6 +149,7 @@ export default {
         }
         }
 
 
         return {
         return {
+            height,
             getEnvironmentData,
             getEnvironmentData,
             loadTableDataList,
             loadTableDataList,
             page,
             page,

@@ -323,7 +323,10 @@ export default {
             this.type='base';
             this.type='base';
             this.state=this.faultEnvironmentRadio;
             this.state=this.faultEnvironmentRadio;
             this.setDetailConfig(this.type)
             this.setDetailConfig(this.type)
-            this.getBaseList();
+            if(this.faultEnvironmentRadio==1){
+                this.getBaseList();
+
+            }
 
 
         },
         },
         //APM
         //APM
@@ -644,13 +647,17 @@ export default {
             this.baseVisible=false;
             this.baseVisible=false;
             if(itemData.faultConfId){
             if(itemData.faultConfId){
                 this.faultConfId=itemData.faultConfId;
                 this.faultConfId=itemData.faultConfId;
+                this.propsData.faultConfId=this.faultConfId;
+
             }
             }
             this.setTargetId(itemData.targetId);
             this.setTargetId(itemData.targetId);
             // this.targetId=itemData;
             // this.targetId=itemData;
+            this.propsData.targetId=itemData.targetId;
             //获取已添加的环境基础列表
             //获取已添加的环境基础列表
             this.getBaseList();
             this.getBaseList();
         },
         },
         getBaseList(){
         getBaseList(){
+            this.$refs.basic.setBizId();
             this.$refs.basic.getEnvironmentData();
             this.$refs.basic.getEnvironmentData();
 
 
         },
         },