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>
<div id="container_max" class="monitor">
<div class="mointorHead">
<span>监测总数:
<span class="equipmentCount" @click="toMonitorPage">104</span>设备的
<span class="MonitorPointCount" @click="toMonitorPage">2142</span>个监测点</span>
<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>
<!-- <el-form inline label-width="auto" label-position="right">-->
<!-- <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" class="searchInput" clearable placeholder="请输入关键字" />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<el-form inline label-width="auto" label-position="right">
<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" class="searchInput" clearable placeholder="请输入关键字" />
<el-input v-model.trim="serchForm.CONNAMECN" clearable placeholder="请输入关键字" />
</el-form-item>
<el-button type="primary" size="mini" class="headBtn">查询</el-button>
</el-form>
<el-link v-if="showList" class="backClass" type="primary" @click.stop="handleGoback">返回</el-link>
<div>
<el-button type="button" size="mini" class="headBtn" @click="handleToRecovery">回收站</el-button>
<el-button type="button" 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_btn2" type="button" size="mini" class="headBtn">取消全屏</el-button>
<el-button type="primary" size="mini" class="headBtn" @click="handleToRecovery">回收站</el-button>
<el-button type="primary" size="mini" class="headBtn" @click="refresh">刷新</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="primary" size="mini" class="headBtn">取消全屏</el-button>
</div>
</div>
<el-divider />
<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
v-if="showList === true"
:data="countDataList"
......@@ -353,7 +367,34 @@ export default {
}
}
.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{
display: inline-block;
width: 0;
......@@ -365,6 +406,7 @@ export default {
border-left: 4px solid transparent;
}
.mointorBody{
padding: 10px 10px 0 10px;
.name-icon{
width: 20px;
height: 20px;
......@@ -387,22 +429,20 @@ export default {
}
}
.mointorHead{
padding-top: 10px;
background-color: #edeef3 !important;
padding: 10px 10px 0 10px;
line-height: 32px;
display: flex;
justify-content: space-between;
padding-left: 15px;
.headBtn{
height: 24px;
border-radius: 4px;
line-height: 22px;
font-size: 12px;
padding: 0 10px;
margin: 5px;
color: #444;
border-color: #ddd;
}
//.headBtn{
// height: 24px;
// border-radius: 4px;
// line-height: 22px;
// font-size: 12px;
// padding: 0 10px;
// margin: 5px;
// color: #444;
// border-color: #ddd;
//}
.headSearch{
.searchInput{
border: 1px solid #cccccc;
......@@ -416,28 +456,6 @@ export default {
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>
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