Skip to content

I
IT-monitor
Commit fd874de0 authored by 张伯涛's avatar 张伯涛
Browse files
Options

设备管理布局修改

parent e8ed1d26
Hide whitespace changes
Inline Side-by-side
Showing with 85 additions and 67 deletions
src/views/IntegratedMonitor/equipment.vue
View file @ fd874de0
<template> <template>
<div id="container_max" class="monitor"> <div id="container_max" class="monitor">
<div class="mointorHead"> <div class="mointorHead">
<span>监测总数: <!-- <el-form inline label-width="auto" label-position="right">-->
<span class="equipmentCount" @click="toMonitorPage">104</span>设备的 <!-- <el-form-item v-if="showList === false" class="headSearch" label=" ">-->
<span class="MonitorPointCount" @click="toMonitorPage">2142</span>个监测点</span> <!-- <i style="font-size: 23px;line-height: 32px; background-color: #d6d6d6; border: 1px solid #cccccc " class="el-icon-search" />-->
<div style="display: flex"> <!-- <el-input v-model.trim="serchForm.CONNAMECN" class="searchInput" clearable placeholder="请输入关键字" />-->
<div id="count1" class="blockDiv" onclick="handleShowList(1)"> <!-- </el-form-item>-->
<span class="st-square" style="background-color: #3db58d;" /> <!-- </el-form>-->
<span class="blockCount">1664</span>
</div>
<div id="count2" class="blockDiv" onclick="handleShowList(2)">
<span class="st-square" style="background-color: #edb845;" />
<span class="blockCount">12</span>
</div>
<div id="count3" class="blockDiv" onclick="handleShowList(3)">
<span class="st-square" style="background-color: #eb5d5d;" />
<span class="blockCount">17</span>
</div>
<div id="count4" class="blockDiv" onclick="handleShowList(4)">
<span class="st-square" style="background-color: #a6a6a6;" />
<span class="blockCount">448</span>
</div>
<div id="count5" class="blockDiv" onclick="handleShowList(5)">
<span class="st-square" style="background-color: black;" />
<span class="blockCount">1</span>
</div>
</div>
<el-form inline label-width="auto" label-position="right"> <el-form inline label-width="auto" label-position="right">
<el-form-item v-if="showList === false" class="headSearch" label=" "> <el-form-item v-if="showList === false" class="headSearch" label=" ">
<i style="font-size: 23px;line-height: 32px; background-color: #d6d6d6; border: 1px solid #cccccc " class="el-icon-search" /> <el-input v-model.trim="serchForm.CONNAMECN" clearable placeholder="请输入关键字" />
<el-input v-model.trim="serchForm.CONNAMECN" class="searchInput" clearable placeholder="请输入关键字" />
</el-form-item> </el-form-item>
<el-button type="primary" size="mini" class="headBtn">查询</el-button>
</el-form> </el-form>
<el-link v-if="showList" class="backClass" type="primary" @click.stop="handleGoback">返回</el-link> <el-link v-if="showList" class="backClass" type="primary" @click.stop="handleGoback">返回</el-link>
<div> <div>
<el-button type="button" size="mini" class="headBtn" @click="handleToRecovery">回收站</el-button> <el-button type="primary" size="mini" class="headBtn" @click="handleToRecovery">回收站</el-button>
<el-button type="button" size="mini" class="headBtn" @click="refresh">刷新</el-button> <el-button type="primary" size="mini" class="headBtn" @click="refresh">刷新</el-button>
<el-button v-if="!fullscreen" id="fullscreen_btn" type="button" size="mini" class="headBtn">全屏</el-button> <el-button v-if="!fullscreen" id="fullscreen_btn" type="primary" size="mini" class="headBtn">全屏</el-button>
<el-button v-if="fullscreen" id="fullscreen_btn2" type="button" size="mini" class="headBtn">取消全屏</el-button> <el-button v-if="fullscreen" id="fullscreen_btn2" type="primary" size="mini" class="headBtn">取消全屏</el-button>
</div> </div>
</div> </div>
<el-divider />
<div class="mointorBody"> <div class="mointorBody">
<div style="display: flex;justify-content: space-between;padding-top: 5px;padding-bottom: 10px">
<div style="font-weight: bold">设备管理列表</div>
<div style="display: flex">
<div>
<span><span style="color: #333333">监测总数:</span>
<span class="equipmentCount" @click="toMonitorPage">104</span><span style="color: #333333">设备的</span>
<span class="MonitorPointCount" @click="toMonitorPage">2142</span><span style="color: #333333">个监测点</span></span>
</div>
<div style="display: flex">
<div id="count1" class="blockDiv" onclick="handleShowList(1)">
<span class="st-square" style="background-color: #3db58d;" />
<span class="blockCount">1664</span>
</div>
<div id="count2" class="blockDiv" onclick="handleShowList(2)">
<span class="st-square" style="background-color: #edb845;" />
<span class="blockCount">12</span>
</div>
<div id="count3" class="blockDiv" onclick="handleShowList(3)">
<span class="st-square" style="background-color: #eb5d5d;" />
<span class="blockCount">17</span>
</div>
<div id="count4" class="blockDiv" onclick="handleShowList(4)">
<span class="st-square" style="background-color: #a6a6a6;" />
<span class="blockCount">448</span>
</div>
<div id="count5" class="blockDiv" onclick="handleShowList(5)">
<span class="st-square" style="background-color: black;" />
<span class="blockCount">1</span>
</div>
</div>
</div>
</div>
<el-table <el-table
v-if="showList === true" v-if="showList === true"
:data="countDataList" :data="countDataList"
...@@ -353,7 +367,34 @@ export default { ...@@ -353,7 +367,34 @@ export default {
} }
} }
.monitor{ .monitor{
padding: 10px; .blockDiv{
margin: 0 15px;
.blockCount{
cursor: pointer;
color: #3c8dbc;
}
.st-square{
cursor: pointer;
margin-right: 6px;
width: 9px;
height: 9px;
display: inline-block;
}
}
.equipmentCount{
color: #72afd2;
cursor: pointer;
}
.MonitorPointCount{
color: #eb5d5d;
cursor: pointer;
}
.el-divider--horizontal{
padding-top: 10px;
margin: 0!important;
height: 14px!important;
background-color: #F1F1F1!important;
}
.caretDown{ .caretDown{
display: inline-block; display: inline-block;
width: 0; width: 0;
...@@ -365,6 +406,7 @@ export default { ...@@ -365,6 +406,7 @@ export default {
border-left: 4px solid transparent; border-left: 4px solid transparent;
} }
.mointorBody{ .mointorBody{
padding: 10px 10px 0 10px;
.name-icon{ .name-icon{
width: 20px; width: 20px;
height: 20px; height: 20px;
...@@ -387,22 +429,20 @@ export default { ...@@ -387,22 +429,20 @@ export default {
} }
} }
.mointorHead{ .mointorHead{
padding-top: 10px; padding: 10px 10px 0 10px;
background-color: #edeef3 !important;
line-height: 32px; line-height: 32px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-left: 15px; //.headBtn{
.headBtn{ // height: 24px;
height: 24px; // border-radius: 4px;
border-radius: 4px; // line-height: 22px;
line-height: 22px; // font-size: 12px;
font-size: 12px; // padding: 0 10px;
padding: 0 10px; // margin: 5px;
margin: 5px; // color: #444;
color: #444; // border-color: #ddd;
border-color: #ddd; //}
}
.headSearch{ .headSearch{
.searchInput{ .searchInput{
border: 1px solid #cccccc; border: 1px solid #cccccc;
...@@ -416,28 +456,6 @@ export default { ...@@ -416,28 +456,6 @@ export default {
display: flex; display: flex;
} }
} }
.blockDiv{
margin: 0 15px;
.blockCount{
cursor: pointer;
color: #3c8dbc;
}
.st-square{
cursor: pointer;
margin-right: 6px;
width: 9px;
height: 9px;
display: inline-block;
}
}
.equipmentCount{
color: #72afd2;
cursor: pointer;
}
.MonitorPointCount{
color: #eb5d5d;
cursor: pointer;
}
} }
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment