From a11bc1bed7953b88213330582c2085f60b5a73b1 Mon Sep 17 00:00:00 2001 From: liukangdong <898885815@qq.com> Date: 星期三, 12 六月 2024 15:01:56 +0800 Subject: [PATCH] Merge branch 'master' of http://139.186.142.91:10010/r/productDev/dmvisit --- admin/src/views/platform/index.vue | 487 +++++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 371 insertions(+), 116 deletions(-) diff --git a/admin/src/views/platform/index.vue b/admin/src/views/platform/index.vue index d25f751..85fa291 100644 --- a/admin/src/views/platform/index.vue +++ b/admin/src/views/platform/index.vue @@ -1,8 +1,8 @@ <template> <div class="main_app"> - <div class="df_ac mb20"> - <el-select v-model="currentPlatform" class="w300"> - <el-option v-for="item in platformList" :key="item.id"></el-option> + <div class="mb20"> + <el-select v-model="platformId" @change="getList()"> + <el-option v-for="item in PlatformList" :key="item.id" :value="item.id" :label="item.name" /> </el-select> <el-button type="primary" class="ml20" @click="handleSet" >閰嶇疆鏈堝彴</el-button @@ -12,47 +12,68 @@ <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 class="left"> + <div class="status mr10">浣滀笟涓�</div> + <div class="name">6鍙锋湀鍙�</div> + <div class="ite"> + <span class="placeholder9">浣滀笟锛�</span><span>1</span> + </div> + <div class="ite"> + <span class="placeholder9">浣滀笟锛�</span><span>1</span> + </div> + <div class="ite"> + <span class="placeholder9">浣滀笟锛�</span><span class="red">1</span> + </div> </div> - <el-button type="primary">鍙彿</el-button> + <el-button type="primary" @click="handleQueuing()">鍙彿</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 class="list"> + <div class="info" v-for="j in 3"> + <div class="line"> + <div class="left"> + <span class="plate">鐨朅12122</span> </div> - <div> - <span>鎬昏繍杈撻噺</span - ><span class="ml10 placeholder9">3000涓囨敮</span - ><span class="primaryColor ml10 pointer" @click="isShowDetail = true">杩愬崟璇︽儏</span> + <div class="right"> + <span class="green">浣滀笟涓�</span> + <span class="green ml20">23鍒嗛挓26绉�</span> </div> </div> - <div class="right"> - <el-button type="primary" @click="handleFinish()" - >浣滀笟瀹屾垚</el-button - > - <el-button plain>杞Щ鏈堝彴</el-button> - <el-button plain>寮傚父鎸傝捣</el-button> + <div class="line"> + <div class="ite"> + <span>杩愯緭鍗曞彿锛�</span> + <span>202020</span> + </div> + <div class="ite"> + <span>椹鹃┒鍛橈細</span> + <span>202020</span> + </div> + <div class="ite"> + <span>鎵嬫満鍙凤細</span> + <span>202020</span> + </div> + <div class="ite"> + <span>鎬昏繍杈撻噺锛�</span> + <span>202020</span> + </div> + <div class="ite" style="width: 66.6%"> + <span>杩愯緭鍏徃锛�</span> + <span>20202dasd鐜╁効鐜╁効鐜╁効棰濆 棰濆0</span> + </div> + <div class="ite"></div> + </div> + <div class="line"> + <div class="left"> + <span class="primaryColor pointer" @click="isShowDetail = true" + >杩愬崟璇︽儏</span + > + </div> + <div class="right"> + <el-button type="primary" @click="handleFinish()" + >浣滀笟瀹屾垚</el-button + > + <el-button plain>杞Щ鏈堝彴</el-button> + <el-button plain>寮傚父鎸傝捣</el-button> + </div> </div> </div> </div> @@ -69,7 +90,7 @@ <div class="mb20"> <div class="title">鍏ュ簱鏈堝彴缁�</div> <div class="list"> - <div class="item">1鍙锋湀鍙�</div> + <div class="item active">1鍙锋湀鍙�</div> <div class="item">2鍙锋湀鍙�</div> <div class="item">1鍙锋湀鍙�</div> <div class="item">2鍙锋湀鍙�</div> @@ -93,42 +114,38 @@ <!-- 杩愬崟璇︽儏 --> <el-dialog title="杩愬崟璇︽儏" + center :visible.sync="isShowDetail" width="420px" > <div class="detail_modal"> <div class="head"> - <div class="line"> - <span class="ccc">杩愯緭鍗曞彿</span> - <span>28282</span> - </div> - <div class="line"> - <span class="ccc">杩愯緭杞﹁締</span> - <span>鐨朅12122</span> - </div> - <div class="line"> - <span class="ccc">椹鹃┒鍛�</span> - <span>鐜嬪痉鍙�</span> - <span>1888888</span> - </div> - <div class="line"> - <span class="ccc">鎬昏繍杈撻噺</span> - <span>28282涓囨敮</span> + <div class="plate">鐨朅12122</div> + <div class="list"> + <div class="item"> + <span>杩愯緭鍗曞彿锛�</span> + <span>22222</span> + </div> + <div class="item"> + <span>鎬昏繍杈撻噺锛�</span> + <span>22222</span> + </div> + <div class="item"> + <span>椹鹃┒鍛橈細</span> + <span>22222</span> + </div> </div> </div> + <div class="title">鍚堝悓鍒楄〃</div> <div class="content"> <div class="item"> - <div class="line"> - <div>鍚堝悓鍙凤細1292992</div> - <div class="address">鏀惰揣鍦帮細address</div> - </div> - <div class="line"> - <div>鐗╂枡鍚嶇О锛氶粍灞�</div> - <div>鏁伴噺锛�700</div> - </div> - <div class="line"> - <div>鐗╂枡鍚嶇О锛氶粍灞�</div> - <div>鏁伴噺锛�200</div> + <div class="contract">鍚堝悓鍙凤細1292992</div> + <div class="placeholder6">鏀惰揣鍦帮細address</div> + <div class="list"> + <div class="line"> + <div class="left"><span>鐗╂枡鍚嶇О锛�</span><span>榛勫北</span></div> + <div class="right"><span>鏁伴噺锛�</span><span>100</span></div> + </div> </div> </div> </div> @@ -137,87 +154,214 @@ <el-button @click="isShowDetail = false">鍏抽棴</el-button> </span> </el-dialog> + <!-- --> + <el-drawer + title="鏈堝彴鍙彿-xx鍙锋湀鍙�" + :visible.sync="isShowQueuing" + size="720px" + > + <div class="queuing_modal"> + <div class="df_ac mb20"> + <span>鎼滅储杞﹁締锛�</span> + <el-input + class="flex1 mr20" + v-model="queuingForm.aa" + placeholder="璇疯緭鍏ヨ溅鐗屽彿" + ></el-input> + <el-button type="primary">鏌ユ壘</el-button> + <el-button>閲嶇疆</el-button> + </div> + <div class="list"> + <div class="item"> + <div class="head df_sb"> + <div class="plate">鐨朅12122</div> + <div class="status">宸茬鍒�</div> + </div> + <div class="info"> + <div class="ite"> + <span>杩愯緭鍗曞彿锛�</span> + <span>12312</span> + </div> + <div class="ite"> + <span>椹鹃┒鍛橈細</span> + <span>12312</span> + </div> + <div class="ite"> + <span>鎵嬫満鍙凤細</span> + <span>12312</span> + </div> + <div class="ite"> + <span>鎬昏繍杈撻噺锛�</span> + <span>12312</span> + </div> + <div class="ite" style="width: 66%"> + <span>杩愯緭鍏徃锛�</span> + <span>12312</span> + </div> + </div> + <div class="footer df_sb"> + <div class="detail">杩愬崟璇︽儏</div> + <el-button type="primary">鍙彿</el-button> + </div> + </div> + </div> + <el-button class="mt30" @click="isShowQueuing = false">鍏抽棴</el-button> + </div> + </el-drawer> </div> </template> <script> +import { getPlatform, getPlatformJob } from '@/api' export default { - data() { + data () { return { - currentPlatform: '', - platformList: [], + platformId: '', + PlatformList: [], + dataList: [], isShowSet: false, // 鏈堝彴閰嶇疆 setParam: {}, isShowDetail: false, // 杩愬崟璇︽儏 - detail: {} + detail: {}, + isShowQueuing: false, + queuingForm: {} } }, + created () { + this.getPlatList() + this.getList() + }, methods: { - handleFinish(item) { + handleQueuing (row) { + this.isShowQueuing = true + }, + getList () { + const { platformId } = this + getPlatformJob({ + model: { platformId } + }).then(res => { + this.dataList = res.records + }) + }, + handleFinish (item) { this.$confirm('楂樻灦搴�6鍙锋湀鍙� 鐨朅12345 浣滀笟缁撴潫', '娓╅Θ鎻愮ず', { confirmButtonText: '纭畾', cancelButtonText: '鍙栨秷', type: 'warning' }) }, - handleSet() { + getPlatList () { + getPlatform({ + model: {} + }).then(res => { + this.PlatformList = res.records + }) + }, + handleSet () { this.isShowSet = true }, - setReset() { }, - setSub() { } + setReset () { }, + setSub () { } } } </script> <style lang="scss" scoped> +@import "@/assets/style/variables.scss"; .platform_list { .item { - padding: 16px 24px; + /* padding: 16px 24px; */ + background: #ffffff; border-radius: 2px; - border: 2px solid #cccccc; + border: 1px solid #dfe2e8; margin-bottom: 12px; .head { display: flex; justify-content: space-between; - .name { - font-size: 16px; - } - .status { + align-items: center; + height: 50px; + background: linear-gradient(270deg, #ffffff 0%, #ebf6f7 100%); + border-radius: 2px 2px 0px 0px; + padding: 0 28px; + .left { flex: 1; - margin-left: 50px; - span { + display: flex; + align-items: center; + .name { + font-size: 16px; + margin-right: 50px; + } + .status { + line-height: 25px; + height: 25px; + padding: 0 4px; + background: #00ba67; + border-radius: 2px; + color: #ffffff; + } + .ite { margin-right: 30px; } } } - .info { + .list { + display: flex; + flex-wrap: wrap; + justify-content: space-between; 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 { + padding: 16px; + .info { + background: #effbf5; + border-radius: 2px; + border: 1px solid #dfe2e8; + padding: 16px; + border-radius: 2px; + margin-bottom: 10px; + width: 30%; + .line { display: flex; align-items: center; + justify-content: space-between; + flex-wrap: wrap; + margin-bottom: 6px; + span { + &:nth-child(1) { + color: #999999; + } + } + .ite { + width: 33.3%; + margin-top: 8px; + } + .left { + .plate { + font-size: 15px; + color: #111111; + padding: 4px 5px; + font-weight: 700; + border: 1px solid #279baa; + background-color: #fff; + } + } + .right { + display: flex; + align-items: center; + } } } } } } +.main_head { + display: flex; + justify-content: space-between; + align-items: center; + .tabs { + flex: 1; + } +} /* */ .set_modal { .title { @@ -233,33 +377,144 @@ cursor: pointer; width: 30%; height: 32px; - background-color: #d9d9d9; - border: 1px solid #4d99a7; + border: 1px solid #dfe2e8; display: flex; justify-content: center; align-items: center; - border-radius: 6px; + border-radius: 2px; margin-bottom: 12px; + } + .active { + background: rgba(39, 155, 170, 0.06); + border: 1px solid #279baa; + color: #279baa; } } } /* */ .detail_modal { font-size: 12px; + color: #282828; .head { - border-bottom: 1px solid #999999; - } - .item { - border-bottom: 1px solid #999999; - } - .line { - display: flex; - justify-content: space-between; - .ccc{ - color: #999999; + background: rgba(39, 155, 170, 0.05); + border-radius: 4px; + border: 1px solid #dfe2e8; + padding: 16px; + .plate { + width: 90px; + text-align: center; + font-size: 15px; + color: #111111; + padding: 4px 5px; + font-weight: 700; + border: 1px solid #279baa; + background-color: #fff; } - .address { - margin-right: 30px; + .list { + display: flex; + flex-wrap: wrap; + margin-top: 16px; + .item { + width: 50%; + margin-bottom: 8px; + span { + &:nth-child(1) { + color: #666666; + } + } + } + } + } + .title { + margin: 16px 0; + font-weight: 500; + font-size: 16px; + color: #222222; + } + .content { + .item { + border-radius: 4px; + border: 1px solid #dfe2e8; + padding: 16px; + .list { + background: #f7f7f7; + border-radius: 4px; + padding: 12px 16px; + margin-top: 10px; + } + .contract { + font-weight: 500; + font-size: 15px; + color: #279baa; + margin-bottom: 4px; + } + .line { + display: flex; + margin-bottom: 8px; + &:nth-last-child(1) { + margin: 0; + } + div { + span { + &:nth-child(1) { + color: #666666; + } + } + } + .left { + flex: 6; + } + .right { + flex: 4; + } + } + } + } +} +/* */ +.queuing_modal { + padding: 10px 30px; + .list { + .item { + background: #f4fafb; + border-radius: 2px; + border: 1px solid #dfe2e8; + margin-bottom: 10px; + padding: 16px; + .head { + margin-bottom: 15px; + .plate { + width: 90px; + text-align: center; + font-size: 15px; + color: #111111; + padding: 4px 5px; + font-weight: 700; + border: 1px solid #279baa; + background-color: #fff; + } + .status { + color: $primaryColor; + } + } + .info { + display: flex; + flex-wrap: wrap; + .ite { + width: 33.3%; + margin-bottom: 8px; + span { + &:nth-child(1) { + color: #666666; + } + } + } + } + .footer { + .detail { + color: $primaryColor; + } + } } } } -- Gitblit v1.9.3