From 1a74c4ab9c4f1fff15e85e57743f6967c4898b91 Mon Sep 17 00:00:00 2001
From: Mr.Zhang <710666463@qq.com>
Date: 星期三, 23 八月 2023 16:23:46 +0800
Subject: [PATCH] 大屏适配
---
screen_standard/src/views/index.vue | 243 +++++++++++++++++++++++++++--------------------
1 files changed, 139 insertions(+), 104 deletions(-)
diff --git a/screen_standard/src/views/index.vue b/screen_standard/src/views/index.vue
index ebfbe10..7b7a115 100644
--- a/screen_standard/src/views/index.vue
+++ b/screen_standard/src/views/index.vue
@@ -1,26 +1,7 @@
<template>
<div class="content1">
- <div class="content_left">
- <!-- 褰撴棩鍛樺伐浜ч噺TOP10 -->
- <div class="content_left_item1">
- <div class="content_left_item1_head">
- <span>褰撴棩鍛樺伐浜ч噺TOP10</span>
- </div>
- <div class="content_left_item1_content">
- <div class="content_left_item1_content_row" v-for="(item, index) in data.production" :key="index">
- <div class="content_left_item1_content_row_name">
- <div :class="index > 2 ? 'num bg1' : 'num bg2'">{{ index + 1 }}</div>
- <span>{{ item.userName }}</span>
- </div>
- <div class="content_left_item1_content_row_line">
- <el-progress :show-text="false" :percentage="item.doneNum / baseNum * 100">
- </el-progress>
- </div>
- <div class="content_left_item1_content_row_num">{{ item.doneNum }}</div>
- </div>
- </div>
- </div>
- <!-- 浠撳簱瀹炴椂浣欓噺缁熻 -->
+ <!-- <div class="content_left">
+
<div class="content_left_item2">
<div class="content_left_item2_head">
<span>浠撳簱瀹炴椂浣欓噺缁熻</span>
@@ -45,7 +26,7 @@
</div>
</div>
</div>
- </div>
+ </div> -->
<div class="content_center">
<!-- 鎴愬搧璁″垝杩涘害/宸ュ簭杩涘害 -->
<div class="content_center_top">
@@ -78,8 +59,7 @@
:content="'宸叉姤宸ヨ壇鍝佹暟' + child.doneNum + '锛涘伐搴忚鍒掓暟' + child.planNum" placement="top">
<div class="scroll_item_row_item" @click="jump(child.procedureId, child.procedureName)">
<div class="scroll_item_row_item_x"></div>
- <!-- <img v-if="i == 0 || i == 1" src="@/assets/img/ic_complete@2x.png" alt="" /> -->
- <span v-if="child.rate < 100">{{ child.rate }}%</span>
+ <span v-if="child.rate < 100">{{ child.rate.toFixed(0) }}%</span>
<img v-else src="@/assets/img/ic_complete@2x.png" alt="" />
<span class="scroll_item_row_item_wz">{{ child.procedureName }}</span>
</div>
@@ -110,38 +90,60 @@
<div class="scroll_item_row">{{ item.qualifiedNum }}</div>
<div class="scroll_item_row">{{ item.unqualifiedNum }}</div>
<div class="scroll_item_row">{{ item.undoneNum }}</div>
- <div class="scroll_item_row">{{ item.unqualifiedRate }}%</div>
+ <div class="scroll_item_row">{{ (item.unqualifiedRate||0).toFixed(2) }}%</div>
</div>
</div>
</div>
</div>
</div>
<!-- 鎶ュ伐鏃ュ織 -->
- <div class="content_center_bottom">
- <div class="content_center_bottom_head">
- <span>鎶ュ伐鏃ュ織</span>
- </div>
- <div class="content_center_bottom_b">
- <div class="content_center_top_form_head">
- <div class="content_center_top_form_head_item">鍛樺伐鍚嶇О</div>
- <div class="content_center_top_form_head_item">鐗╂枡鍚嶇О</div>
- <div class="content_center_top_form_head_item">鐗╂枡缂栫爜</div>
- <div class="content_center_top_form_head_item">鎶ュ伐鏃堕棿</div>
- <div class="content_center_top_form_head_item">鑹搧鏁�</div>
- <div class="content_center_top_form_head_item">涓嶈壇鍝佹暟</div>
- <div class="content_center_top_form_head_item">涓嶈壇鐜�</div>
+ <div style="display: flex;">
+ <div class="content_left" style="flex: 1;">
+ <div class="content_left_item1">
+ <div class="content_left_item1_head">
+ <span>褰撴棩鍛樺伐浜ч噺TOP10</span>
+ </div>
+ <div class="content_left_item1_content" ref="scrollContainer">
+ <div class="content_left_item1_content_row" v-for="(item, index) in data.production" :key="index">
+ <div class="content_left_item1_content_row_name">
+ <div :class="index > 2 ? 'num bg1' : 'num bg2'">{{ index + 1 }}</div>
+ <span>{{ item.userName }}</span>
+ </div>
+ <div class="content_left_item1_content_row_line">
+ <el-progress :show-text="false" :percentage="item.doneNum / baseNum * 100">
+ </el-progress>
+ </div>
+ <div class="content_left_item1_content_row_num">{{ item.doneNum }}</div>
+ </div>
+ </div>
</div>
- <div @mouseenter="handleMouseEnter3" @mouseleave="handleMouseLeave3" class="main_container">
- <div ref="scrollContainer3" class="scroll_container">
- <div v-for="(item, index) in data.log" :key="index"
- :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'">
- <div class="scroll_item_row">{{ item.userName }}</div>
- <div class="scroll_item_row">{{ item.materialName }}</div>
- <div class="scroll_item_row">{{ item.materialCode }}</div>
- <div class="scroll_item_row">{{ item.createTime }}</div>
- <div class="scroll_item_row">{{ item.qualifiedNum ? item.qualifiedNum : '-' }}</div>
- <div class="scroll_item_row">{{ item.unqualifiedNum }}</div>
- <div class="scroll_item_row">{{ item.unqualifiedRate ? item.unqualifiedRate : '0' }}%</div>
+ </div>
+ <div class="content_center_bottom">
+ <div class="content_center_bottom_head">
+ <span>鎶ュ伐鏃ュ織</span>
+ </div>
+ <div class="content_center_bottom_b">
+ <div class="content_center_top_form_head">
+ <div class="content_center_top_form_head_item">鍛樺伐鍚嶇О</div>
+ <div class="content_center_top_form_head_item">鐗╂枡鍚嶇О</div>
+ <div class="content_center_top_form_head_item">宸ュ簭</div>
+ <div class="content_center_top_form_head_item">鎶ュ伐鏃堕棿</div>
+ <div class="content_center_top_form_head_item">鑹搧鏁�</div>
+ <div class="content_center_top_form_head_item">涓嶈壇鍝佹暟</div>
+ <div class="content_center_top_form_head_item">涓嶈壇鐜�</div>
+ </div>
+ <div @mouseenter="handleMouseEnter3" @mouseleave="handleMouseLeave3" class="main_container">
+ <div ref="scrollContainer3" class="scroll_container">
+ <div v-for="(item, index) in data.log" :key="index"
+ :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'">
+ <div class="scroll_item_row">{{ item.userName }}</div>
+ <div class="scroll_item_row">{{ item.procedureName }}</div>
+ <div class="scroll_item_row">{{ item.materialCode }}</div>
+ <div class="scroll_item_row">{{ dateToSub(item.createTime) }}</div>
+ <div class="scroll_item_row">{{ item.qualifiedNum || 0 }}</div>
+ <div class="scroll_item_row">{{ item.unqualifiedNum || 0 }}</div>
+ <div class="scroll_item_row">{{ (item.unqualifiedRate || 0).toFixed(2) }}%</div>
+ </div>
</div>
</div>
</div>
@@ -155,12 +157,16 @@
<span>杩�7澶╀笉鑹搧鍒嗗竷</span>
</div>
<div class="content_right_top_nr">
- <div class="content_right_top_nr_bottom_yuan" v-if="data.typeDistribution.length > 0">
- <span>{{ data.num }}</span>
- <span>涓嶈壇椤瑰垎甯�</span>
- </div>
+
<div class="content_right_top_nr_top" id="lineChrat"></div>
- <div class="content_right_top_nr_bottom" id="pieChart"></div>
+ <div class="content_right_top_nr_bottom">
+ <div class="content_right_top_nr_bottom_yuan" v-if="data.typeDistribution.length > 0">
+ <span>{{ data.num }}</span>
+ <span>涓嶈壇椤瑰垎甯�</span>
+ </div>
+ <div id="pieChart"></div>
+ </div>
+
</div>
</div>
<!-- 璁惧宸℃璁板綍 -->
@@ -179,7 +185,7 @@
<div ref="scrollContainer4" class="scroll_container">
<div v-for="(item, index) in data.patrolInspection" :key="index"
:class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'">
- <div class="scroll_item_row">{{ item.checkdate }}</div>
+ <div class="scroll_item_row">{{ dateToSub(item.checkdate) }}</div>
<div class="scroll_item_row">{{ item.deviceName }}</div>
<div class="scroll_item_row">{{ item.status == 0 ? '鍚堟牸' : '涓嶅悎鏍�' }}</div>
<div class="scroll_item_row">{{ item.userName }}</div>
@@ -193,6 +199,7 @@
</template>
<script setup>
+import { dateToSub } from '@/utils'
import { reactive, ref, onMounted, nextTick, onUnmounted, computed, watch, toRefs } from 'vue'
import { getPlanData, getTop, getStockList, getWorkPlansList, getProcedureProcessList, getRecordLogPage, getDeviceCheckPage, getUnqualified7DayData, getUnqualifiedCateData } from '@/utils/api.js'
import { useCounterStore } from '@/stores/counter.js'
@@ -273,27 +280,44 @@
if (res.length > 0) {
data.baseNum = res[0].doneNum
data.production = res
+ start()
}
})
// 浠撳簱瀹炴椂浣欓噺缁熻
- getStockList(companyId.value, departId.value)
- .then(res => {
- data.marginStatistics = res
- nextTick(() => {
- start()
- })
- })
- // 鎴愬搧璁″垝杩涘害
- getWorkPlansList(companyId.value, departId.value)
- .then(res => {
- data.plannedProgress = res
- nextTick(() => {
- start1()
- })
- })
+ // getStockList(companyId.value, departId.value)
+ // .then(res => {
+ // data.marginStatistics = res
+ // nextTick(() => {
+ // start()
+ // })
+ // })
+ cate.value.forEach((item, index) => {
+ if (item.active) {
+ if (index == 1) {
+ getProcedureProcessList(companyId.value, departId.value)
+ .then(res => {
+ data.processProgress = res
+ nextTick(() => {
+ start2()
+ })
+ })
+ } else {
+ // 鎴愬搧璁″垝杩涘害
+ getWorkPlansList(companyId.value, departId.value)
+ .then(res => {
+ data.plannedProgress = res
+ nextTick(() => {
+ start1()
+ })
+ })
+ }
+ }
+ })
+
+
// 鎶ュ伐鏃ュ織
getRecordLogPage(companyId.value, departId.value, {
- capacity: 9999,
+ capacity: 20,
model: {},
page: 1
}).then(res => {
@@ -630,12 +654,13 @@
}
function ListScroll() {
let scrollDom = scrollContainer.value
+ if (!scrollDom) return
// 鍒よ缁勪欢鏄惁娓叉煋瀹屾垚
if (scrollDom.offsetHeight == 0) {
scrollDom = scrollContainer.value
} else {
// 濡傛灉鍒楄〃鏁伴噺杩囧皯涓嶈繘琛屾粴鍔�
- if (scrollDom.children.length < 8) {
+ if (scrollDom.children.length < 6) {
clearTimeout(timer.value)
return
}
@@ -655,6 +680,7 @@
function ListScroll1() {
let scrollDom = scrollContainer1.value
// 鍒よ缁勪欢鏄惁娓叉煋瀹屾垚
+ if (!scrollDom) return
if (scrollDom.offsetHeight == 0) {
scrollDom = scrollContainer1.value
} else {
@@ -678,17 +704,20 @@
}
function ListScroll2() {
let scrollDom = scrollContainer2.value
+ if (!scrollDom) return
// 鍒よ缁勪欢鏄惁娓叉煋瀹屾垚
if (scrollDom.offsetHeight == 0) {
scrollDom = scrollContainer2.value
} else {
// 濡傛灉鍒楄〃鏁伴噺杩囧皯涓嶈繘琛屾粴鍔�
- if (scrollDom.children.length < 7) {
+ if (scrollDom.children.length < 10) {
clearTimeout(timer2.value)
return
}
// 缁勪欢杩涜婊氬姩
scrollDom.scrollTop += 1
+ // console.log('scrollDom.scrollTop', scrollDom.scrollTop);
+ // console.log('scrollDom.scrollHeight - scrollDom.clientHeight', scrollDom.scrollHeight - scrollDom.clientHeight);
// 鍒ゆ柇鏄惁婊氬姩鍒板簳閮�
if (scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) {
// 鑾峰彇缁勪欢绗竴涓妭鐐�
@@ -702,12 +731,13 @@
}
function ListScroll3() {
let scrollDom = scrollContainer3.value
+ if (!scrollDom) return
// 鍒よ缁勪欢鏄惁娓叉煋瀹屾垚
if (scrollDom.offsetHeight == 0) {
scrollDom = scrollContainer3.value
} else {
// 濡傛灉鍒楄〃鏁伴噺杩囧皯涓嶈繘琛屾粴鍔�
- if (scrollDom.children.length < 6) {
+ if (scrollDom.children.length <= 5) {
clearTimeout(timer3.value)
return
}
@@ -726,12 +756,13 @@
}
function ListScroll4() {
let scrollDom = scrollContainer4.value
+ if (!scrollDom) return
// 鍒よ缁勪欢鏄惁娓叉煋瀹屾垚
if (scrollDom.offsetHeight == 0) {
scrollDom = scrollContainer4.value
} else {
// 濡傛灉鍒楄〃鏁伴噺杩囧皯涓嶈繘琛屾粴鍔�
- if (scrollDom.children.length < 7) {
+ if (scrollDom.children.length < 5) {
clearTimeout(timer4.value)
return
}
@@ -761,6 +792,7 @@
<style lang="scss" scoped>
.content1 {
+ flex: 1;
width: 100%;
height: auto;
display: flex;
@@ -769,9 +801,10 @@
.content_left {
flex: 1;
+ margin-right: 20px;
.content_left_item1 {
width: 100%;
- height: 398px;
+ height: 284px;
margin-bottom: 20px;
.content_left_item1_head {
background: url('@/assets/img/home_title_short@2x.png');
@@ -795,8 +828,9 @@
.content_left_item1_content {
width: 100%;
- height: 360px;
+ height: 246px;
padding: 20px;
+ overflow: hidden;
box-sizing: border-box;
background: linear-gradient(180deg, rgba(52, 88, 159, 0) 0%, rgba(0, 86, 255, 0.4) 100%);
@@ -878,8 +912,6 @@
.content_left_item2 {
width: 100%;
flex: 1;
- display: flex;
- flex-direction: column;
.content_left_item2_head {
background: url('@/assets/img/home_title_short@2x.png');
background-repeat: no-repeat;
@@ -903,14 +935,13 @@
.content_left_item2_content {
width: 100%;
height: 361px;
- height: 100%;
padding: 20px;
box-sizing: border-box;
background: linear-gradient(180deg, rgba(52, 88, 159, 0) 0%, rgba(0, 86, 255, 0.4) 100%);
.item2_content_head {
width: 100%;
- height: 36px;
+ height: 35px;
display: flex;
align-items: center;
background: rgba(52, 88, 159, 0.5);
@@ -934,7 +965,7 @@
.main_container {
width: 100%;
- height: calc(100% - 36px);
+ height: calc(100% - 35px);
.scroll_container {
width: 100%;
@@ -951,7 +982,7 @@
.scroll_item {
width: 100%;
- height: 36px;
+ height: 35px;
display: flex;
align-items: center;
@@ -980,17 +1011,17 @@
}
.content_center {
- flex: 2;
- margin: 0 20px;
+ flex: 3;
+ margin-right: 20px;
.content_center_top {
width: 100%;
- height: 509px;
+ height: 424px;
margin-bottom: 20px;
background: linear-gradient(180deg, rgba(52, 88, 159, 0) 0%, rgba(0, 86, 255, 0.4) 100%);
.content_center_top_list {
width: 100%;
- height: 38px;
+ height: 35px;
display: flex;
align-items: center;
@@ -1005,9 +1036,9 @@
}
.content_center_top_list_item {
width: 200px;
- height: 38px;
+ height: 35px;
cursor: pointer;
- line-height: 38px;
+ line-height: 35px;
padding-left: 34px;
box-sizing: border-box;
font-size: 16px;
@@ -1049,6 +1080,7 @@
&:nth-child(5) {
flex: 2.7;
+
}
}
}
@@ -1056,7 +1088,6 @@
.main_container {
width: 100%;
height: calc(100% - 34px);
-
.scroll_container {
width: 100%;
height: 100%;
@@ -1072,10 +1103,9 @@
.scroll_item {
width: 100%;
- height: 58px;
+ height: 50px;
display: flex;
align-items: center;
-
.scroll_item_row {
flex: 1;
height: 100%;
@@ -1090,14 +1120,16 @@
&:nth-child(5) {
flex: 3;
+
}
-
.scroll_item_row_item {
+ margin-top: -11px;
width: 29px;
height: 29px;
border-radius: 50%;
margin-right: 19px;
display: flex;
+ flex-direction: column;
align-items: center;
justify-content: center;
border: 2px solid #01D9FE;
@@ -1209,7 +1241,7 @@
.scroll_item {
width: 100%;
- height: 36px;
+ height: 35px;
display: flex;
align-items: center;
@@ -1244,8 +1276,8 @@
.content_center_bottom {
width: 100%;
- height: 286px;
-
+ height: 284px;
+ flex: 2;
.content_center_bottom_head {
width: 100%;
height: 38px;
@@ -1317,7 +1349,7 @@
.scroll_item {
width: 100%;
- height: 37px;
+ height: 35px;
display: flex;
align-items: center;
@@ -1346,10 +1378,9 @@
.content_right {
flex: 1;
-
.content_right_top {
width: 100%;
- height: 511px;
+ height: 425px;
margin-bottom: 20px;
.content_right_top_head {
@@ -1376,12 +1407,15 @@
height: calc(100% - 38px);
background: linear-gradient(180deg, rgba(52, 88, 159, 0) 0%, rgba(0, 86, 255, 0.4) 100%);
position: relative;
-
+ #pieChart {
+ width: 100%;
+ height: 100%;
+ }
.content_right_top_nr_bottom_yuan {
position: absolute;
top: 50%;
left: 50%;
- transform: translate(-50%, 53%);
+ transform: translate(-50%, -50%);
z-index: 999;
width: 114px;
height: 114px;
@@ -1419,6 +1453,7 @@
.content_right_top_nr_bottom {
width: 100%;
height: 50%;
+ position: relative;
}
}
}
@@ -1455,7 +1490,7 @@
.item2_content_head {
width: 100%;
- height: 36px;
+ height: 35px;
display: flex;
align-items: center;
background: rgba(52, 88, 159, 0.5);
@@ -1479,7 +1514,7 @@
.main_container {
width: 100%;
- height: calc(100% - 36px);
+ height: calc(100% - 35px);
.scroll_container {
width: 100%;
@@ -1496,7 +1531,7 @@
.scroll_item {
width: 100%;
- height: 36px;
+ height: 35px;
display: flex;
align-items: center;
--
Gitblit v1.9.3