From 843d0abd014ec20424844546fc57a9f976f366ba Mon Sep 17 00:00:00 2001 From: jiangping <jp@doumee.com> Date: 星期一, 02 九月 2024 10:52:59 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- 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