From d3d61193582d35c1e6a61d4452b816e0d99f948c Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期一, 02 九月 2024 10:19:41 +0800
Subject: [PATCH] ll
---
admin/src/views/platform/queueUp.vue | 232 ++++++++++++---------------------------------------------
1 files changed, 51 insertions(+), 181 deletions(-)
diff --git a/admin/src/views/platform/queueUp.vue b/admin/src/views/platform/queueUp.vue
index 9ad3106..785983c 100644
--- a/admin/src/views/platform/queueUp.vue
+++ b/admin/src/views/platform/queueUp.vue
@@ -1,129 +1,31 @@
<template>
<div class="main_app">
- <div class="df_ac mb20">
- <el-select v-model="filters.currentPlatform" class="w300">
- <el-option v-for="item in platformList" :key="item.id"></el-option>
- </el-select>
- <el-input v-model="filters.id" placeholder="杞︾墝鍙�" class="ml20 w200" />
- <el-button type="primary" class="ml20" @click="getList()">鏌ヨ</el-button>
- <el-button class="ml20" @click="clear">閲嶇疆</el-button>
+ <div class="mb20 main_header">
+ <div class="platgroup_tabs">
+ <div
+ class="tab"
+ :class="{ active: activeGroup.id === item.id }"
+ @click="platgroupClick(item)"
+ v-for="(item, i) in PlatGroupList"
+ :key="i"
+ >
+ {{ item.name }}
+ </div>
</div>
- <!-- -->
- <div class="platform_list">
- <div class="item" v-for="i in 2">
- <div class="head">
- <div class="name">6鍙锋湀鍙�</div>
- <div class="status">
- <span class="green">浣滀笟涓�</span>
- <span class="">浣滀笟锛�1</span>
- <span>鍙彿锛�1</span>
- <span>绛夊緟锛�1</span>
- <span class="red">寮傚父锛�1</span>
- </div>
- <!-- <el-button type="primary">鍙彿</el-button> -->
- </div>
- <div class="info" v-for="j in 3">
- <div class="line">
- <div class="left">
- <span class="plate mr20">鐨朅12122</span>
- <span class="placeholder9">椹鹃┒鍛�</span>
- <span>鐜嬫煇鏌�</span>
- <span>18888888888</span>
- </div>
- <div class="right">
- <span class="green">浣滀笟涓�</span>
- <span class="placeholder9 ml20">浣滀笟鏃堕暱锛�23鍒嗛挓26绉�</span>
- </div>
- </div>
- <div class="line">
- <div class="left">
- <div>
- <span>杩愯緭鍗曞彿</span
- ><span class="ml10 placeholder9">1231231</span>
- </div>
- <div>
- <span>鎬昏繍杈撻噺</span
- ><span class="ml10 placeholder9">3000涓囨敮</span
- ><span class="primaryColor ml10 pointer">杩愬崟璇︽儏</span>
- </div>
- </div>
- </div>
- </div>
- </div>
</div>
- <!-- 閰嶇疆鏄剧ず鏈堝彴 -->
- <el-dialog
- title="閰嶇疆鏄剧ず鏈堝彴"
- :visible.sync="isShowSet"
- center
- width="420px"
- >
- <div class="set_modal">
- <div class="mb20">
- <div class="title">鍏ュ簱鏈堝彴缁�</div>
- <div class="list">
- <div class="item">1鍙锋湀鍙�</div>
- <div class="item">2鍙锋湀鍙�</div>
- <div class="item">1鍙锋湀鍙�</div>
- <div class="item">2鍙锋湀鍙�</div>
- </div>
- </div>
- <div>
- <div class="title">鍏ュ簱鏈堝彴缁�</div>
- <div class="list">
- <div class="item">1鍙锋湀鍙�</div>
- <div class="item">2鍙锋湀鍙�</div>
- <div class="item">1鍙锋湀鍙�</div>
- <div class="item">2鍙锋湀鍙�</div>
- </div>
- </div>
- </div>
- <span slot="footer" class="dialog-footer">
- <el-button @click="setReset">閲嶇疆</el-button>
- <el-button type="primary" @click="setSub">纭畾</el-button>
- </span>
- </el-dialog>
- <!-- 杩愬崟璇︽儏 -->
- <el-dialog
- title="閰嶇疆鏄剧ず鏈堝彴"
- :visible.sync="isShowSet"
- center
- width="420px"
- >
- <div class="set_modal">
- <div class="mb20">
- <div class="title">鍏ュ簱鏈堝彴缁�</div>
- <div class="list">
- <div class="item">1鍙锋湀鍙�</div>
- <div class="item">2鍙锋湀鍙�</div>
- <div class="item">1鍙锋湀鍙�</div>
- <div class="item">2鍙锋湀鍙�</div>
- </div>
- </div>
- <div>
- <div class="title">鍏ュ簱鏈堝彴缁�</div>
- <div class="list">
- <div class="item">1鍙锋湀鍙�</div>
- <div class="item">2鍙锋湀鍙�</div>
- <div class="item">1鍙锋湀鍙�</div>
- <div class="item">2鍙锋湀鍙�</div>
- </div>
- </div>
- </div>
- <span slot="footer" class="dialog-footer">
- <el-button @click="setReset">閲嶇疆</el-button>
- <el-button type="primary" @click="setSub">纭畾</el-button>
- </span>
- </el-dialog>
</div>
</template>
<script>
+import {
+ getPlatformGroupList
+} from '@/api'
export default {
data () {
return {
filters: {},
- platformList: [],
+ activeGroup: {},
+ PlatGroupList: [],
isShowSet: false, // 鏈堝彴閰嶇疆
setParam: {},
@@ -131,7 +33,26 @@
detail: {}
}
},
+ created () {
+ this.getPlatGroupList()
+ },
methods: {
+ getPlatGroupList () {
+ getPlatformGroupList({
+ queryData: 1,
+ queryType: 1
+ }).then(res => {
+ this.PlatGroupList = res || []
+ if (this.activeGroup && this.activeGroup.id) {
+ this.activeGroup = res.find(item => item.id === this.activeGroup.id)
+ } else {
+ this.activeGroup = res[0]
+ }
+ })
+ },
+ platgroupClick (item) {
+ this.activeGroup = { ...item }
+ },
getList () { },
clear () { }
}
@@ -139,75 +60,24 @@
</script>
<style lang="scss" scoped>
-.platform_list {
- .item {
- padding: 16px 24px;
- border-radius: 2px;
- border: 2px solid #cccccc;
- margin-bottom: 12px;
- .head {
- display: flex;
- justify-content: space-between;
- .name {
- font-size: 16px;
- }
- .status {
- flex: 1;
- margin-left: 50px;
- span {
- margin-right: 30px;
- }
- }
- }
- .info {
- margin-top: 10px;
- border: 1px solid #999999;
- padding: 6px 8px;
- border-radius: 2px;
- margin-bottom: 10px;
- .line {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 6px;
- .left {
- .plate {
- border: 1px solid #4969f6;
- border-radius: 2px;
- padding: 0 5px;
- }
- }
- .right {
- display: flex;
- align-items: center;
- }
- }
- }
- }
-}
-
-/* */
-.set_modal {
- .title {
- font-size: 16px;
- font-weight: 600;
- margin-bottom: 16px;
- }
- .list {
+@import "@/assets/style/variables.scss";
+.main_header {
+ .platgroup_tabs {
+ flex: 1;
display: flex;
- justify-content: space-between;
- flex-wrap: wrap;
- .item {
+ border-bottom: 1px solid #dfe2e8;
+ .tab {
+ color: #666666;
+ margin-right: 40px;
cursor: pointer;
- width: 30%;
- height: 32px;
- background-color: #d9d9d9;
- border: 1px solid #4d99a7;
- display: flex;
- justify-content: center;
- align-items: center;
- border-radius: 6px;
- margin-bottom: 12px;
+ padding-bottom: 18px;
+ border-bottom: 2px solid #fff;
+ }
+ .active {
+ font-weight: 500;
+ font-size: 15px;
+ color: #222222;
+ border-bottom: 2px solid $primary-color;
}
}
}
--
Gitblit v1.9.3