From 09132fa0cc6f9d9dba97e12b50700c2ef51a0b6e Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期日, 29 九月 2024 11:30:31 +0800
Subject: [PATCH] 月台屏
---
screen/src/views/PlatformCall.vue | 299 +++++++++++++++++++++++++++++++++++++
screen/package-lock.json | 6
screen/src/assets/images/call/ic_left@2x.png | 0
screen/src/assets/images/call/ic_news@2x.png | 0
/dev/null | 76 ---------
screen/src/assets/images/call/ic_right@2x.png | 0
admin/src/views/platform/queueUp.vue | 33 +++-
screen/package.json | 1
screen/src/assets/images/call/title@2x.png | 0
screen/src/router/index.js | 8
10 files changed, 335 insertions(+), 88 deletions(-)
diff --git a/admin/src/views/platform/queueUp.vue b/admin/src/views/platform/queueUp.vue
index 329fef3..6b4a9b1 100644
--- a/admin/src/views/platform/queueUp.vue
+++ b/admin/src/views/platform/queueUp.vue
@@ -23,7 +23,7 @@
</div>
<el-table class="mb20" v-loading="loading" :data="dataList" stripe row-key="id" default-expand-all>
<el-table-column type="index" label="搴忓彿" width="80" />
- <el-table-column label="杞︾墝鍙�" width="160">
+ <el-table-column label="杞︾墝鍙�" width="130">
<template slot-scope="{ row }">
<div class="plate_id">
<span>{{ row.carCodeFront.slice(0, 1) }}</span>
@@ -33,10 +33,13 @@
</div>
</template>
</el-table-column>
- <el-table-column prop="carrierName" label="杩愯緭鍏徃" min-width="200" />
- <el-table-column prop="billCode" label="杩愬崟鍙�" min-width="200" />
- <el-table-column prop="totalNum" label="鎬昏繍杈撻噺(涓囨敮)" min-width="130" />
- <el-table-column prop="driverName" label="椹鹃┒鍛�" min-width="140">
+ <el-table-column v-if="activeGroup.type == 2" prop="contractNum" label="鍚堝悓鍗曞彿" min-width="120" />
+ <template v-else>
+ <el-table-column prop="carrierName" label="杩愯緭鍏徃" min-width="120" />
+ <el-table-column prop="billCode" label="杩愬崟鍙�" min-width="120" />
+ </template>
+ <el-table-column prop="totalNum" label="鎬昏繍杈撻噺(涓囨敮)" min-width="110" />
+ <el-table-column prop="driverName" label="椹鹃┒鍛�" min-width="130">
<template slot-scope="{ row }">
<span class="mr10">{{ row.driverName }}</span>
<span>{{ row.drivierPhone }}</span>
@@ -45,7 +48,8 @@
<el-table-column prop="signDate" label="绛惧埌鏃堕棿" min-width="150" />
<el-table-column label="鎿嶄綔" align="center" width="100" fixed="right">
<template slot-scope="{ row }">
- <el-button v-if="row.type != 4" type="text" @click="handleDetail(row)" v-permissions="['business:company:update']">杩愬崟璇︽儏</el-button>
+ <el-button v-if="activeGroup != 2" type="text" @click="handleDetail(row)" v-permissions="['business:company:update']">杩愬崟璇︽儏</el-button>
+ <el-button v-if="activeGroup == 2" type="text" @click="subDetail(row)" v-permissions="['business:company:update']">棰勭害璇︽儏</el-button>
</template>
</el-table-column>
</el-table>
@@ -55,12 +59,14 @@
<PlatformSign ref="PlatformSignRef" v-if="isPlatformSign" @success="getPlatGroupList"
@close="isPlatformSign = false" />
<WaybillDetail ref="WaybillDetailRef" v-if="isShowDetail" @success="getList" @close="isShowDetail = false" />
+ <DriverDetail v-if="isShowDriver" ref="DriverDetailRef" />
</div>
</template>
<script>
import Pagination from '@/components/common/Pagination'
import QueryForm from '@/components/common/QueryForm'
+import DriverDetail from "@/views/task/driverDetail.vue"
import {
getPlatformGroupList,
platformLineUpPage,
@@ -74,7 +80,8 @@
Pagination,
QueryForm,
PlatformSign,
- WaybillDetail
+ WaybillDetail,
+ DriverDetail
},
data() {
return {
@@ -84,6 +91,7 @@
staticParam: {},
dataList: [],
loading: false,
+ isShowDriver: false,
isPlatformSign: false,
pagination: {
pageSize: 10,
@@ -165,6 +173,15 @@
this.filters = {}
this.getList()
},
+ subDetail(row) {
+ this.isShowDriver = true
+ this.$nextTick(() => {
+ this.$refs.DriverDetailRef.id = row.objId
+ this.$refs.DriverDetailRef.type = row.objType
+ this.$refs.DriverDetailRef.getDetail()
+ this.$refs.DriverDetailRef.isShowModal = true
+ })
+ },
handleDetail(row) {
this.isShowDetail = true
this.$nextTick(() => {
@@ -206,7 +223,7 @@
.plate_id {
display: flex;
- width: 111px;
+ width: 110px;
font-weight: 600;
height: 30px;
line-height: 30px;
diff --git a/screen/package-lock.json b/screen/package-lock.json
index 8d805de..a994c4d 100644
--- a/screen/package-lock.json
+++ b/screen/package-lock.json
@@ -11,6 +11,7 @@
"dayjs": "^1.11.11",
"echarts": "^5.5.1",
"pinia": "^2.1.7",
+ "uqrcodejs": "^4.0.7",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
},
@@ -2686,6 +2687,11 @@
"browserslist": ">= 4.21.0"
}
},
+ "node_modules/uqrcodejs": {
+ "version": "4.0.7",
+ "resolved": "https://registry.npmjs.org/uqrcodejs/-/uqrcodejs-4.0.7.tgz",
+ "integrity": "sha512-84+aZmD2godCVI+93lxE3YUAPNY8zAJvNA7xRS7R7U+q57KzMDepBSfNCwoRUhWOfR6eHFoAOcHRPwsP6ka1cA=="
+ },
"node_modules/vite": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/vite/-/vite-5.3.1.tgz",
diff --git a/screen/package.json b/screen/package.json
index 3420547..5bcc574 100644
--- a/screen/package.json
+++ b/screen/package.json
@@ -12,6 +12,7 @@
"dayjs": "^1.11.11",
"echarts": "^5.5.1",
"pinia": "^2.1.7",
+ "uqrcodejs": "^4.0.7",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
},
diff --git a/screen/src/assets/images/call/ic_left@2x.png b/screen/src/assets/images/call/ic_left@2x.png
new file mode 100644
index 0000000..f10ffcf
--- /dev/null
+++ b/screen/src/assets/images/call/ic_left@2x.png
Binary files differ
diff --git a/screen/src/assets/images/call/ic_news@2x.png b/screen/src/assets/images/call/ic_news@2x.png
new file mode 100644
index 0000000..8cb8ec0
--- /dev/null
+++ b/screen/src/assets/images/call/ic_news@2x.png
Binary files differ
diff --git a/screen/src/assets/images/call/ic_right@2x.png b/screen/src/assets/images/call/ic_right@2x.png
new file mode 100644
index 0000000..daa7a41
--- /dev/null
+++ b/screen/src/assets/images/call/ic_right@2x.png
Binary files differ
diff --git a/screen/src/assets/images/call/title@2x.png b/screen/src/assets/images/call/title@2x.png
new file mode 100644
index 0000000..d3c4f5b
--- /dev/null
+++ b/screen/src/assets/images/call/title@2x.png
Binary files differ
diff --git a/screen/src/router/index.js b/screen/src/router/index.js
index 40416e7..aee2fea 100644
--- a/screen/src/router/index.js
+++ b/screen/src/router/index.js
@@ -1,5 +1,5 @@
import { createRouter, createWebHashHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import HomeView from '../views/PlatformCall.vue'
const router = createRouter({
history: createWebHashHistory(import.meta.env.BASE_URL),
@@ -10,9 +10,9 @@
component: () => import('../views/EnergyConsum.vue')
},
{
- path: '/home',
- name: 'home',
- component: () => import('../views/HomeView.vue')
+ path: '/PlatformCall',
+ name: 'PlatformCall',
+ component: () => import('../views/PlatformCall.vue')
},
{
path: '/EnergyConsum',
diff --git a/screen/src/views/HomeView.vue b/screen/src/views/HomeView.vue
deleted file mode 100644
index 403c86b..0000000
--- a/screen/src/views/HomeView.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-import dayjs from 'dayjs'
-
-const weekMap = ['鏄熸湡鏃�', '鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�',]
-const datetime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))
-setInterval(() => {
- datetime.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
-},1000)
-
-</script>
-<template>
- <div class="main_app">
- <div class="main_header">
- <div class="datetime">{{ datetime }} {{ weekMap[new Date().getDay()] }}</div>
- <div class="title">瀹夋嘲鐗╂祦鏅烘収鍥尯鎺掗槦鍙彿</div>
- <div class="datetime"></div>
- </div>
- <div class="main_content">
- <div class="box in_box">
- <div class="title">瀹夋嘲鐗╂祦鍏ュ簱鏈堝彴</div>
- <div class="line head">
- <div class="no item">搴忓彿</div>
- <div class="item">杞︾墝鍙�</div>
- <div class="item">鐘舵��</div>
- <div class="item">鍋滈潬鏈堝彴</div>
- </div>
- <div class="line" v-for="i in 6">
- <div class="no item">1</div>
- <div class="item">鐨朅12313</div>
- <div class="item">鍙彿涓�</div>
- <div class="item">8鍙锋湀鍙�</div>
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<style lang="scss" scoped>
-.main_app{
- color: #fff;
- width: 100%;
- min-height: 100vh;
- background: #000000;
- padding: 42px;
- .main_content{
- display: flex;
- .box{
- margin-right: 52px;
- .title{
- background-color: #36321d;
- font-size: 26px;
- }
- .line{
- display: flex;
- }
- }
- }
- .main_header{
- display: flex;
- align-items: center;
- padding: 20px;
- margin-bottom: 20px;
- .datetime{
- width: 350px;
- font-size: 24px;
- }
- .title{
- flex: 1;
- font-size: 36px;
- font-weight: 600;
- text-align: center;
- }
- }
-}
-</style>
\ No newline at end of file
diff --git a/screen/src/views/PlatformCall.vue b/screen/src/views/PlatformCall.vue
new file mode 100644
index 0000000..62856e9
--- /dev/null
+++ b/screen/src/views/PlatformCall.vue
@@ -0,0 +1,299 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import dayjs from 'dayjs'
+import UQRCode from 'uqrcodejs'
+
+const initQrcode = () => {
+ var qr = new UQRCode();
+ // 璁剧疆浜岀淮鐮佸唴瀹�
+ qr.data = "https://uqrcode.cn/doc";
+ qr.size = 254;
+ // 璋冪敤鍒朵綔浜岀淮鐮佹柟娉�
+ qr.make();
+ var canvas = document.getElementById("qrcode");
+ var canvasContext = canvas.getContext("2d");
+ qr.canvasContext = canvasContext;
+ qr.drawCanvas();
+}
+onMounted(() => {
+ initQrcode()
+})
+
+const weekMap = ['鍛ㄦ棩', '鍛ㄤ竴', '鍛ㄤ簩', '鍛ㄤ笁', '鍛ㄥ洓', '鍛ㄤ簲', '鍛ㄥ叚']
+const newWeek = ref(weekMap[new Date().getDay()])
+const newDate = ref(dayjs().format('YYYY-MM-DD'))
+const newTime = ref(dayjs().format('HH:mm'))
+setInterval(() => {
+ newWeek.value = weekMap[new Date().getDay()]
+ newDate.value = dayjs().format('YYYY-MM-DD')
+ newTime.value = dayjs().format('HH:mm')
+}, 1000)
+</script>
+<template>
+ <div class="main_app">
+ <div class="main_header">
+ <img class="bg" src="@/assets/images/call/title@2x.png" alt="">
+ <div class="title">瀹夋嘲鏅烘収鐗╂祦鍥尯-杞﹁締鍙彿澶у睆</div>
+ <div class="time_wrap">
+ <div class="left">
+ <div class="week">{{ newWeek }}</div>
+ <div class="date">{{ newDate }}</div>
+ </div>
+ <div class="time">{{ newTime }}</div>
+ </div>
+ </div>
+ <div class="main_content">
+ <div class="list">
+ <div class="line header">
+ <div class="item no">搴忓彿</div>
+ <div class="item">杞︾墝鍙�</div>
+ <div class="item status">鐘舵��</div>
+ <div class="item">鍋滈潬鏈堝彴</div>
+ <div class="item">鏃堕棿</div>
+ </div>
+ <div class="line">
+ <div class="item no">搴忓彿</div>
+ <div class="item">杞︾墝鍙�</div>
+ <div class="item">
+ <div class="status underway">浣滀笟涓�</div>
+ </div>
+ <div class="item">鍋滈潬鏈堝彴</div>
+ <div class="item">鏃堕棿</div>
+ </div>
+ <div class="line">
+ <div class="item no">搴忓彿</div>
+ <div class="item">杞︾墝鍙�</div>
+ <div class="item">
+ <div class="status call_ed">浣滀笟涓�</div>
+ </div>
+ <div class="item">鍋滈潬鏈堝彴</div>
+ <div class="item">鏃堕棿</div>
+ </div>
+ <div class="line">
+ <div class="item no">搴忓彿</div>
+ <div class="item">杞︾墝鍙�</div>
+ <div class="item">
+ <div class="status padding">浣滀笟涓�</div>
+ </div>
+ <div class="item">鍋滈潬鏈堝彴</div>
+ <div class="item">鏃堕棿</div>
+ </div>
+ </div>
+ <div class="current">
+ <div class="tip_wrap">
+ <img src="@/assets/images/call/ic_left@2x.png" class="icon icon_l" alt="">
+ <img src="@/assets/images/call/ic_right@2x.png" class="icon icon_r" alt="">
+ <div class="empty">
+ <div class="title">娓╅Θ鎻愮ず</div>
+ <div class="line">1銆佽鍙告満鏍规嵁鍙彿灞忔彁绀哄叆鍥�</div>
+ <div class="line">2銆佹湭鍙彿杞﹁締璇疯�愬績绛夊緟</div>
+ <div class="line">3銆佽鏈夊簭鎺掗槦鍏ュ洯</div>
+ <div class="line">4銆佽鍗歌揣缁撴潫绂佹鍦ㄥ洯鍖洪�楃暀</div>
+ <div class="line">5銆佽閬靛畧鍥尯瀹夊叏瑙勭珷鍒跺害</div>
+ </div>
+ </div>
+ <div class="qrcode_wrap">
+ <div class="qrcode">
+ <canvas id="qrcode" width="254" height="254"></canvas>
+ </div>
+ <div class="title">璇锋壂鐮佺鍒�</div>
+ </div>
+ </div>
+ </div>
+ <div class="main_footer">
+ <img src="@/assets/images/call/ic_news@2x.png" class="icon" alt="">
+ <div class="title">璇锋牴鎹槦鍒楁彁绀轰俊鎭紝渚濇绛夊�欒繘鍦�</div>
+ <div class="icon"></div>
+ </div>
+ </div>
+</template>
+
+<style lang="scss" scoped>
+.main_app {
+ color: #fff;
+ width: 100%;
+ height: 100vh;
+ background-color: #092030;
+ position: relative;
+ z-index: -2;
+ display: flex;
+ flex-direction: column;
+
+ .main_header {
+ width: 100%;
+ height: 112px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 50px;
+ .title {
+ font-weight: 800;
+ font-size: 48px;
+ }
+
+ .time_wrap {
+ display: flex;
+ align-items: center;
+ .date {
+ font-weight: 500;
+ font-size: 20px;
+ text-align: right;
+ }
+ .week {
+ font-weight: 500;
+ font-size: 20px;
+ text-align: right;
+ }
+ .time {
+ font-weight: 500;
+ font-size: 50px;
+ margin-left: 15px;
+ }
+ }
+ .bg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ z-index: -1;
+ }
+ }
+ .main_content{
+ flex: 1;
+ display: flex;
+ padding: 30px 20px;
+ position: relative;
+ .list{
+ flex: 5;
+ margin-right: 20px;
+ .line{
+ display: flex;
+ align-items: center;
+ height: 100px;
+ &:nth-of-type(2n){
+ background: rgba(255,255,255,0);
+ }
+ &:nth-of-type(2n + 1){
+ background: rgba(0,237,255,0.13);
+ }
+ .item{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-weight: 500;
+ font-size: 36px;
+ flex: 10;
+ .status{
+ width: 174px;
+ height: 76px;
+ border-radius: 8px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ .underway{
+ background-color: #51b2ce;
+ }
+ .call_ed{
+ background-color: #f2a43a;
+ }
+ .padding{
+ background-color: #1c485a;
+ }
+ }
+ .no{
+ flex: 5;
+ }
+
+ }
+ .header{
+ font-size: bold;
+ font-size: 40px;
+ background: linear-gradient( 180deg, #00B5D1 0%, #003C57 100%) !important;
+ }
+ }
+ .current{
+ /* height: calc( 100vh - 192px ); */
+ flex: 2;
+ display: flex;
+ flex-direction: column;
+ .tip_wrap{
+ margin-bottom: 20px;
+ width: 100%;
+ position: relative;
+ flex-shrink: 0;
+ flex: 1;
+ .empty{
+ padding: 30px 40px;
+ font-weight: 500;
+ font-size: 30px;
+ .title{
+ text-align: center;
+ font-weight: bold;
+ font-size: 36px;
+ margin-bottom: 20px;
+ }
+ .line{
+ margin-bottom: 10px;
+ }
+ }
+ .icon{
+ position: absolute;
+ width: 52px;
+ height: 52px;
+ }
+ .icon_l{
+ left: 0;
+ top: 0;
+ }
+ .icon_r{
+ right: 0;
+ bottom: 0;
+ }
+ }
+ .qrcode_wrap{
+ width: 100%;
+ flex: 1;
+ flex-shrink: 0;
+ background-color: #51b2ce;
+ padding: 36px 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ .qrcode{
+ padding: 12px;
+ background-color: #fff;
+ }
+ .title{
+ margin-top: 20px;
+ font-weight: bold;
+ font-size: 38px;
+ color: #111111;
+ }
+ }
+ }
+ }
+ .main_footer{
+ background-color: #1D8D9E;
+ height: 80px;
+ display: flex;
+ align-items: center;
+ padding: 0 50px;
+ .icon{
+ width: 52px;
+ height: 52px;
+ }
+ .title{
+ flex: 1;
+ text-align: center;
+ font-weight: 500;
+ font-size: 37px;
+ }
+ }
+
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3