monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit de9770fdf96c69de323c60574d3f954b786c9ca9 1 parent 87329661

对比分析首页优化 

1、有多个对比分析功能，展示列表
2、增加删除列表后增加删除按钮
Inline Side-by-side
Showing 9 changed files with 277 additions and 2 deletions
... ... @@ -3,6 +3,9 @@
justify-content: center;
margin-top: 30px;
}
body{
padding:0;
}
.iconAdd{
width:50%;
height:240px;
... ... @@ -16,7 +19,8 @@
/*add页面*/
.analysis-add-container{
height: 100%;
background-color: #f6f6f6;
background-color: #FFFFFF;
overflow: auto;
}
.add-top{
background-color: #FFFFFF;
... ... @@ -79,6 +83,87 @@
color: #337ab7;
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>
<div class="analysis-drop">
<div class="analysis-drop" v-if="!isShowLIst">
<router-link :to="'/analysis/add'" class="analysis link-type">
<div class="analysis-index-container" style="display: grid;">
<img src="/vue3/src/assets/images/analysis/icon-add.png" style="margin-left: 20px;"></img>
... ... @@ -11,4 +11,76 @@
</router-link>
</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>
... ...
... ... @@ -4,10 +4,128 @@ export default {
components:{},
data () {
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(){
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
}
}
}
\ No newline at end of file
... ...