对比分析首页优化

1、有多个对比分析功能，展示列表
2、增加删除列表后增加删除按钮

@@ -3,6 +3,9 @@
     justify-content: center;
     justify-content: center;
     margin-top: 30px;
     margin-top: 30px;
 }
 }
+body{
+    padding:0;
+}
 .iconAdd{
 .iconAdd{
     width:50%;
     width:50%;
     height:240px;
     height:240px;
@@ -16,7 +19,8 @@
 /*add页面*/
 /*add页面*/
 .analysis-add-container{
 .analysis-add-container{
     height: 100%;
     height: 100%;
-    background-color: #f6f6f6;
+    background-color: #FFFFFF;
+    overflow: auto;
 }
 }
 .add-top{
 .add-top{
     background-color: #FFFFFF;
     background-color: #FFFFFF;
@@ -79,6 +83,87 @@
     color: #337ab7;
     color: #337ab7;
     cursor: pointer;
     cursor: pointer;
 }
 }
+.text-left{
+    text-align: left;
+}
+.analysis-list{
+    padding:20px;
+}
+.analysis-list table{
+    margin-top:0;
+}
+.list-title{
+    margin-bottom:20px;
+}
+.analysis-list .el-table th.el-table__cell{
+    color: rgb(30,159,255);
+    font-weight: bold;
+    background-color: rgb(235,245,249);
+}
+.icon-bg{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 20px;
+    height: 20px;
+    background:rgb(30,159,255);
+    border-radius: 2px;
+    cursor: pointer;
+}
+.icon-list{
+    display: inline-block;
+    background-size: 100%;
+    background-position: center;
+    width: 14px;
+    height: 14px;
+}
+.button-flex-div-center span{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.button-flex-div-center .icon-list{
+    margin-right: 3px;
+}
+.list-search{
+    margin-bottom: 20px;
+}
+.icon-list-delete{
+    background-image: url("/vue3/src/assets/images/analysis/icon-list-delete.png");
+}
+.icon-list-group{
+    background-image: url("/vue3/src/assets/images/analysis/icon-list-group.png");
+}
 
 
+.icon-list-message{
+    background-image: url("/vue3/src/assets/images/analysis/icon-list-message.png");
+}
+.icon-list-safe{
+    background-image: url("/vue3/src/assets/images/analysis/icon-list-safe.png");
+}
 
 
+.icon-list-net{
+    background-image: url("/vue3/src/assets/images/analysis/icon-list-net.png");
+}
+.search-text{
+    cursor: pointer;
+}
+.alert-div{
+    position:absolute;
+    top:0;
+}
 
 
+.analysis-table-div{
+    margin-bottom: 34px;
+}
+.demo-pagination-block{
+    background: #FFFFFF;
+    position: fixed;
+    bottom: 0;
+    border: 1px    solid #ccc;
+    width: 100%;
+    text-align: left;
+    left: 0;
+    padding: 5px 10px;
+    z-index: 1;
+}

@@ -2,7 +2,7 @@
     <div class="add-top-title" style=" padding: 20px 20px 20px 20px;font-size: 16px;color:#337ab7">
     <div class="add-top-title" style=" padding: 20px 20px 20px 20px;font-size: 16px;color:#337ab7">
         比对分析场景
         比对分析场景
     </div>
     </div>
-    <div class="analysis-drop">
+    <div class="analysis-drop" v-if="!isShowLIst">
         <router-link :to="'/analysis/add'" class="analysis link-type">
         <router-link :to="'/analysis/add'" class="analysis link-type">
             <div  class="analysis-index-container" style="display: grid;">
             <div  class="analysis-index-container" style="display: grid;">
                     <img src="/vue3/src/assets/images/analysis/icon-add.png" style="margin-left: 20px;"></img>
                     <img src="/vue3/src/assets/images/analysis/icon-add.png" style="margin-left: 20px;"></img>
@@ -11,4 +11,76 @@
         </router-link>
         </router-link>
 
 
     </div>
     </div>
+    <div class="analysis-list" v-if="isShowLIst">
+        <el-row class="list-search">
+            <el-col :span="6">
+                <div class="search-input flex-div-start">
+                    <el-input v-model="inputSearch" placeholder="请输入创建人名称" />
+                    <span class="search-text" @click="searchData">搜索</span>
+                </div>
+
+            </el-col>
+        </el-row>
+       <!-- <el-row class="list-title">
+            <el-col :span="24" class="text-left">
+                <el-button type="primary" class="button-flex-div-center"><i class="icon-list icon-list-add"></i>新增</el-button>
+                <el-button type="primary" class="button-flex-div-center"><i class="icon-list icon-list-delete"></i>删除</el-button>
+            </el-col>
+        </el-row>-->
+        <el-row class="analysis-table-div">
+            <el-col :span="24">
+                <el-table border ref="multipleTable"  @selection-change="handleSelectionChange" :data="tableData" stripe style="width: 100%">
+<!--                    <el-table-column align="center"  type="selection" width="55" />-->
+                    <el-table-column prop="configName"  align="center" label="配置项名称" sortable  width="180" />
+                    <el-table-column prop="configDepict" label="配置项描述" sortable  width="180" />
+                    <el-table-column prop="timeScopeName" label="时间范围" sortable width="180"  ></el-table-column>
+                    <el-table-column align="center" prop="nickname" label="创建人名称" sortable  width="180" />
+                    <el-table-column align="center" prop="createTime"  :formatter="dateFormat" label="创建时间" sortable  width="210" />
+
+                    <el-table-column prop="address" label="操作" >
+                        <template #default="scope">
+                            <div class="list-handle">
+                                <span class="icon-bg">
+                                     <i class="icon-list icon-list-delete" @click="handleDelete(scope.row)"></i>
+                                </span>
+                                <!--<i class="icon-list icon-list-group"></i>
+                                <i class="icon-list icon-list-message"></i>
+                                <i class="icon-list icon-list-safe"></i>
+                                <i class="icon-list icon-list-net"></i>-->
+                            </div>
+
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </el-col>
+        </el-row>
+        <el-row>
+            <div class="demo-pagination-block">
+                <el-pagination
+                        v-model:currentPage="currentPage4"
+                        :page-sizes="[10,20,30,40]"
+                        :page-size="pageSize"
+                        layout="total,  prev, pager, next, sizes, jumper"
+                        :total="totalCount"
+                        @size-change="handleSizeChange"
+                        @current-change="handleCurrentChange"
+                >
+                </el-pagination>
+            </div>
+        </el-row>
+    </div>
+    <div class="add-dialog">
+        <el-dialog  v-model="addVisible" :title="添加配置" width="50%" @close="closeDialog" top="15vh">
+            <el-form ref="addHandleForm" :model="addHandleForm" label-width="120px">
+                <el-form-item label="名称">
+                    <el-input v-model="addHandleForm.parentName"></el-input>
+                </el-form-item>
+
+                <el-form-item label="描述">
+                    <el-input v-model="addHandleForm.desc"></el-input>
+                </el-form-item>
+            </el-form>
+        </el-dialog>
+
+    </div>
 </div>
 </div>

@@ -4,10 +4,128 @@ export default {
     components:{},
     components:{},
     data () {
     data () {
         return {
         return {
+            multipleSelection:[],
+            domainName:sessionStorage.getItem('domainName'),
+            apiUrl:'/api-web/ContrastAnalysis/getParentNodes',
+            apiUrl1:'/api-web/ContrastAnalysis/deleteScene',
+            addVisible:false,//新增弹框
+            inputSearch:'',//搜索内容
+            nickname:'',//
+            messageVisible:false,//消息提示
+            pageSize:10,//每页显示条数
+            // currentPage:1,//当前页
+            // totalCount:0,//总条数
 
 
         }
         }
     },
     },
     setup(){
     setup(){
+        const {proxy} = Vue.getCurrentInstance();
+        const isShowLIst=Vue.ref(false);
+        const tableData=Vue.ref([]);
+        const totalCount=Vue.ref(0);
+        const currentPage=Vue.ref(1);
 
 
+        // 挂载完
+        Vue.onMounted(() => {
+            proxy.getData();
+
+        })
+        //获取对比分析列表
+        const getData=()=>{
+            let params={
+                nickname:proxy.nickname,
+                limit:proxy.pageSize,
+                page:proxy.currentPage
+            }
+            $.get(proxy.domainName +proxy.apiUrl+'?access_token='+localStorage.getItem('access_token'),params,function (res) {
+                if(res){
+                    console.log("res",res)
+                    proxy.totalCount=res.count;
+                    proxy.tableData=res.data;
+                    proxy.tableData.map((item,index)=>{
+                        item.createTime= proxy.dateForma(item,item.createTime)
+                    })
+                }
+
+
+                if(proxy.tableData && proxy.tableData.length>0){
+                    proxy.isShowLIst=true
+                }else{
+                    proxy.isShowLIst=false
+
+                }
+
+            })
+
+        }
+
+        const toggleSelection=(rows)=> {
+            if (rows) {
+                rows.forEach((row) => {
+                    this.$refs.multipleTable.toggleRowSelection(row)
+                })
+            } else {
+                this.$refs.multipleTable.clearSelection()
+            }
+        }
+        const handleSelectionChange=(val)=> {
+            this.multipleSelection = val
+        }
+        //单个删除
+        const handleDelete=(item)=>{
+
+            let params={
+                id:item.id
+            }
+            $.get(proxy.domainName +proxy.apiUrl1+'?access_token='+localStorage.getItem('access_token'),params,function (res) {
+                if(res){
+                    proxy.$global.showMsg("删除成功","warning")
+                    proxy.getData();
+                }
+            })
+        }
+        const searchData=()=>{
+            proxy.nickname=proxy.inputSearch;
+            proxy.getData();
+        }
+        //格式化时间格式
+        let dateForma=(row,column)=>{
+            const daterc = column
+            if(daterc!=null){
+                const dateMat= new Date(parseInt(daterc));
+                const year = dateMat.getFullYear();
+                const month = dateMat.getMonth() + 1;
+                const day = dateMat.getDate();
+                const hh = dateMat.getHours();
+                const mm = dateMat.getMinutes();
+                const ss = dateMat.getSeconds();
+                const timeFormat= year + "年" + month + "月" + day + "日 " + hh + ":" + mm + ":" + ss;
+                return timeFormat;
+            }
+
+        }
+        const handleSizeChange = (val) => {
+            proxy.pageSize=val;
+            proxy.getData();
+        }
+        //切换当前页
+        const handleCurrentChange = (val) => {
+            proxy.currentPage=val;
+            proxy.getData();
+        }
+        return{
+            isShowLIst,
+            tableData,
+            toggleSelection,
+            handleSelectionChange,
+            getData,
+            handleDelete,
+            dateForma,
+            searchData,
+            handleSizeChange,
+            handleCurrentChange,
+            totalCount,
+            currentPage
+        }
     }
     }
 }
 }