|
@@ -5,22 +5,28 @@
|
|
<!-- <div class="more">更多</div> -->
|
|
<!-- <div class="more">更多</div> -->
|
|
</div>
|
|
</div>
|
|
<div class="panel-header">
|
|
<div class="panel-header">
|
|
- <el-row :gutter="24">
|
|
|
|
- <el-col :span="6">
|
|
|
|
- <el-select v-model="borrowType" clearable placeholder="借用类型" style="width: 140px;" @change="fetchRanking">
|
|
|
|
|
|
+ <el-row :gutter="16">
|
|
|
|
+ <el-col :span="4">
|
|
|
|
+ <el-select v-model="borrowType" clearable placeholder="借用类型" style="width: 100%;" @change="fetchRanking">
|
|
<el-option label="全部" value="all" />
|
|
<el-option label="全部" value="all" />
|
|
<el-option label="常规借用" value="regular" />
|
|
<el-option label="常规借用" value="regular" />
|
|
<el-option label="课堂借用" value="classroom" />
|
|
<el-option label="课堂借用" value="classroom" />
|
|
<el-option label="特殊借用" value="special" />
|
|
<el-option label="特殊借用" value="special" />
|
|
</el-select>
|
|
</el-select>
|
|
</el-col>
|
|
</el-col>
|
|
- <el-col :span="12">
|
|
|
|
|
|
+ <el-col :span="10">
|
|
<el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" clearable
|
|
<el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" clearable
|
|
- @change="fetchRanking" />
|
|
|
|
|
|
+ @change="fetchRanking" style="width: 100%;" />
|
|
</el-col>
|
|
</el-col>
|
|
- <el-col :span="6">
|
|
|
|
- <el-select multiple clearable v-model="deviceTagIds" placeholder="标签名" collapse-tags style="margin-left: 30%; width: 100px;"
|
|
|
|
- @change="fetchRanking">
|
|
|
|
|
|
+ <el-col :span="10">
|
|
|
|
+ <el-select
|
|
|
|
+ multiple
|
|
|
|
+
|
|
|
|
+ v-model="deviceTagIds"
|
|
|
|
+ placeholder="标签名"
|
|
|
|
+ style="width: 270px;"
|
|
|
|
+ @change="fetchRanking"
|
|
|
|
+ class="select-tags">
|
|
<el-option v-for="item in labelType" :key="item.id" :label="item.name" :value="item.id" >
|
|
<el-option v-for="item in labelType" :key="item.id" :label="item.name" :value="item.id" >
|
|
</el-option>
|
|
</el-option>
|
|
</el-select>
|
|
</el-select>
|
|
@@ -256,6 +262,7 @@ onMounted(() => {
|
|
}
|
|
}
|
|
|
|
|
|
.panel-header {
|
|
.panel-header {
|
|
|
|
+ width: 100%;
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
@@ -290,4 +297,36 @@ onMounted(() => {
|
|
:deep(.el-table__inner-wrapper::before) {
|
|
:deep(.el-table__inner-wrapper::before) {
|
|
display: none;
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+/* 多选下拉框样式优化 */
|
|
|
|
+:deep(.el-select__tags) {
|
|
|
|
+ max-width: 100%;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ flex-wrap: nowrap;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+:deep(.el-tag) {
|
|
|
|
+ margin-right: 6px;
|
|
|
|
+ margin-bottom: 0;
|
|
|
|
+ max-width: 120px;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+:deep(.el-select__input) {
|
|
|
|
+ min-width: 60px;
|
|
|
|
+}
|
|
|
|
+:deep(.select-tags .el-select__selection){
|
|
|
|
+ overflow: auto;
|
|
|
|
+ flex-wrap: nowrap;
|
|
|
|
+ /* 隐藏滚动条 */
|
|
|
|
+ scrollbar-width: none; /* Firefox */
|
|
|
|
+ -ms-overflow-style: none; /* IE and Edge */
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+:deep(.select-tags .el-select__selection)::-webkit-scrollbar {
|
|
|
|
+ display: none; /* Chrome, Safari and Opera */
|
|
|
|
+}
|
|
</style>
|
|
</style>
|