From 1f4e7d0f73a73e7350cf5a1df279d5f30904c5d5 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期三, 06 十二月 2023 08:41:32 +0800
Subject: [PATCH] bug
---
screen_standard/src/components/AppLayout.vue | 260 +++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 248 insertions(+), 12 deletions(-)
diff --git a/screen_standard/src/components/AppLayout.vue b/screen_standard/src/components/AppLayout.vue
index 457208e..22f0e80 100644
--- a/screen_standard/src/components/AppLayout.vue
+++ b/screen_standard/src/components/AppLayout.vue
@@ -1,38 +1,185 @@
<template>
<div class="content">
<div class="header">
- <div class="header-item" style="font-size: 20px;">璞嗙背绉戞妧</div>
- <div class="title">DM浜戝伐鍘傝溅闂村ぇ灞�</div>
- <div class="header-item">澶╂皵</div>
- </div>
+ <div class="header-item" style="font-size: 20px;">
+ <el-dropdown trigger="click" v-if="route.name=='home'">
+ <div class="eare-title">
+ {{ tempCom.name}}
+ <div class="right-icon">
+ <img src="@/assets/img/ar_drop@2x.png" alt="">
+ </div>
+ </div>
+ <template #dropdown>
+ <el-dropdown-menu>
+ <el-dropdown-item v-for="(item, index) in comList" :key="index" @click="selectCom(item, index)">{{item.name}}</el-dropdown-item>
+ </el-dropdown-menu>
+ </template>
+ </el-dropdown>
+ <img v-else src="@/assets/img/btn_back@2x.png" style="width: 108px;height: 34px; margin-top: 14px;" @click="back">
+ </div>
+
+ <div class="title">{{ title }}</div>
+ <div class="header-item right">
+
+ <img v-if="!isFull" src="@/assets/img/ic_fullscreen@2x.png" class="full-ic" @click="fullChange">
+ <img v-else src="@/assets/img/ic_exitfullscreen@2x.png" class="full-ic" @click="fullChange">
+ <img src="@/assets/img/title_line@2x.png" class="right-line" alt="">
+ <div class="date">
+ <div class="time">{{ tempDate.time }}</div>
+ <div class="day">{{ `${tempDate.date} ${tempDate.day}` }}</div>
+ </div>
+ <!-- <img src="@/assets/img/title_line@2x.png" class="right-line" alt=""> -->
+ </div>
+ </div>
<div class="num-list">
-
+ <div
+ v-for="(item, index) in layoutList"
+ :key="index"
+ class="num-item"
+ :style="{ 'background-image': `url(${getAssets(item.bgImg)})`}"
+ >
+ <img :src="getAssets(item.logo)" alt="">
+ <div class="item-right">
+ <div class="item-title">{{ item.name }}</div>
+ <div class="num-value">{{ countList[index] }}</div>
+ </div>
+ </div>
</div>
-
+ <KeepAlive>
+ <router-view></router-view>
+ </KeepAlive>
</div>
</template>
<script setup>
-
-import { reactive } from 'vue';
-
+import { getAssets } from '@/utils'
+import { getDepartmentList } from '@/utils/api.js'
+import { reactive, toRefs, onMounted, computed } from 'vue';
+import { useCounterStore } from '@/stores/counter.js'
+import { useRoute, useRouter } from 'vue-router'
+const enterprise = useCounterStore()
+const route = useRoute()
+const router = useRouter()
const layoutList = [
- { bgImg: requir('') }
+ { bgImg: 'bg_zhixingzhong@2x.png', name: '鎵ц涓鍒掓暟(涓�)', logo: 'ic_zhixingzhong@2x.png' },
+ { bgImg: 'bg_yanqijihua@2x.png', name: '寤舵湡璁″垝鏁�(涓�)', logo: 'ic_yanqijihua@2x.png' },
+ { bgImg: 'bg_jinrirenshu@2x.png', name: '浠婃棩鐢熶骇浜烘暟(浜�)', logo: 'ic_jinrirenshu@2x.png' },
+ { bgImg: 'bg_jinrishebei@2x.png', name: '浠婃棩鐢熶骇璁惧(鍙�)', logo: 'ic_jinrishebei@2x.png' },
+ { bgImg: 'bg_jinribuliang@2x.png', name: '浠婃棩涓嶈壇鍝佺巼(%)', logo: 'ic_jinribuliang@2x.png' },
]
+const ingNum = computed(() => {
+ return enterprise.ingNum
+})
+const delayNum = computed(() => {
+ return enterprise.delayNum
+})
+const prouserNum = computed(() => {
+ return enterprise.prouserNum
+})
+const deviceNum = computed(() => {
+ return enterprise.deviceNum
+})
+const unqualifiedRate = computed(() => {
+ return enterprise.unqualifiedRate
+})
+const title = computed(() => {
+ return enterprise.procedureName ? `${enterprise.procedureName}宸ュ簭鏁版嵁鐪嬫澘` : 'DM浜戝伐鍘傝溅闂村ぇ灞�'
+})
+const data = reactive({
+ tempCom: { name: '璞嗙背绉戞妧' },
+ isFull: false,
+ tempDate: {
+ time: '',
+ date: '',
+ day: ''
+ },
+ comList: [],
+ countList: [
+ ingNum||0,
+ delayNum||0,
+ prouserNum||0,
+ deviceNum||0,
+ unqualifiedRate||0
+ ]
+})
+
+
+let { tempCom, isFull, tempDate, comList, countList } = toRefs(data)
+
+const selectCom = (item, index) => {
+ data.tempCom = item
+ enterprise.setDepartId(data.tempCom.id)
+}
+
+const fullChange = () => {
+ data.isFull = !data.isFull
+ let element = document.documentElement;
+ if (data.isFull) { // 鍏ㄥ睆
+ if (element.requestFullscreen) {
+ element.requestFullscreen();
+ } else if (element.webkitRequestFullScreen) {
+ element.webkitRequestFullScreen();
+ } else if (element.mozRequestFullScreen) {
+ element.mozRequestFullScreen();
+ } else if (element.msRequestFullscreen) {
+ // IE11
+ element.msRequestFullscreen();
+ }
+ } else { // 杩樺師
+ if (document.exitFullscreen) {
+ document.exitFullscreen();
+ } else if (document.webkitCancelFullScreen) {
+ document.webkitCancelFullScreen();
+ } else if (document.mozCancelFullScreen) {
+ document.mozCancelFullScreen();
+ } else if (document.msExitFullscreen) {
+ document.msExitFullscreen();
+ }
+ }
+ // data.isFull = !data.isFull
+}
+
+onMounted(() => {
+ getDepartmentList(enterprise.companyId)
+ .then(res => {
+ data.comList = res
+ data.tempCom = res[0]
+ enterprise.setDepartId(data.tempCom.id)
+ })
+ .catch(err => {})
+ const week = ['鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�', '鏄熸湡鏃�']
+ setInterval(() => {
+ let date = new Date()
+ data.tempDate = {
+ time: `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`,
+ date: `${date.getFullYear()}/${date.getMonth()+1}/${date.getDate()}`,
+ day: week[date.getDay()-1]
+ }
+ }, 1000)
+ // console.log(date.getDay());
+
+})
+const back = () => {
+ enterprise.setProcedureName('')
+ router.go(-1)
+}
</script>
<style lang="scss" scoped>
.content {
- background-image: url('@/assets/img/bg@2x.png');
+ background-image: url('@/assets/img/bg.png');
background-position: center;
background-size: 100% 100%;
background-repeat: no-repeat;
+ // width: 1920px;
+ // height: 1080px;
width: 100%;
height: 100%;
padding: 30px;
+ // overflow-y: scroll;
box-sizing: border-box;
.header {
background-image: url('@/assets/img/bg_maintitle@2x.png');
@@ -41,10 +188,26 @@
height: 74px;
display: flex;
padding-top: 1px;
+ padding-left: 20px;
justify-content: space-between;
color: #fff;
.header-item {
- width: 200px;
+ width: 300px;
+ }
+ .eare-title {
+ margin-top: 27px;
+ color: #fff;
+ height: 20px;
+ font-size: 20px;
+ font-family: SourceHanSansSC-Medium, SourceHanSansSC;
+ font-weight: 500;
+ // line-height: 74px;
+ display: flex;
+ .right-icon {
+ width: 20px;
+ height: 20px;
+ margin-left: 8px;
+ }
}
.title {
margin-top: 15px;
@@ -54,10 +217,83 @@
line-height: 25px;
text-align: center;
}
+ .right {
+ margin-top: 20px;
+ height: 30px;
+ display: flex;
+ padding-right: 22px;
+ flex-direction: row-reverse;
+ .full-ic {
+ margin-top: 2px;
+ width: 30px;
+ height: 30px;
+ }
+ .right-line {
+ width: 2px;
+ height: 34px;
+ margin-left: 15px;
+ margin-right: 15px;
+ }
+ .date {
+ .time {
+ height: 20px;
+ font-size: 18px;
+ font-weight: 500;
+ color: #FFFFFF;
+ line-height: 20px;
+ }
+ .day {
+ height: 12px;
+ font-size: 12px;
+ font-weight: 400;
+ color: #D2E0FF;
+ line-height: 12px;
+ }
+ }
+ }
}
.num-list {
+ margin-top: 24px;
+ margin-bottom: 27px;
display: flex;
justify-content: space-between;
+ height: 88px;
+ color: white;
+ .num-item {
+ width: calc(25% - 50px);
+ background-size: 100% 100%;
+ margin-right: 25px;
+ padding-left: 30px;
+ padding-top: 12px;
+ display: flex;
+ &:last-child {
+ margin-right: 0px;
+ }
+ img {
+ width: 52px;
+ height: 52px;
+ }
+ .item-right {
+ margin-left: 12px;
+ .item-title {
+ height: 19px;
+ font-size: 13px;
+ font-weight: 400;
+ color: rgba(255,255,255,0.9);
+ line-height: 19px;
+ }
+ .num-value {
+ height: 35px;
+ font-size: 30px;
+ font-weight: bold;
+ color: #FFFFFF;
+ line-height: 35px;
+ background: linear-gradient(180deg, #EEEEEE 0%, #15CFFF 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+ }
+ }
}
}
</style>
--
Gitblit v1.9.3