From 5ffc36a1db18d3112a9b50a9cf3953d7fcf21bae Mon Sep 17 00:00:00 2001
From: huanghongfeng <huanghongfeng@hnkhzn.com>
Date: 星期二, 19 八月 2025 16:37:24 +0800
Subject: [PATCH] 更新
---
项目代码/DP/src/views/indexs/right-center.vue | 287 ++++++++++++++-------------------------------------------
1 files changed, 70 insertions(+), 217 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/DP/src/views/indexs/right-center.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/DP/src/views/indexs/right-center.vue"
index 843e7be..640b0f8 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/DP/src/views/indexs/right-center.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/DP/src/views/indexs/right-center.vue"
@@ -1,238 +1,91 @@
<template>
- <div id="centerLeft1">
- <div class="bg-color-black">
- <div class="d-flex pt-2 pl-2">
- <span>
- <ul>
- <li>鍚堟牸锛歿{container_data.qualified}}</li>
- <li>寰呮锛歿{container_data.waitCheck}}</li>
- <li>妫�淇腑锛歿{container_data.checkIng}}</li>
- <li>绌烘墭锛歿{container_data.empty}}</li>
- <li>瀹炴墭锛歿{container_data.full}}</li>
- </ul>
- </span>
+ <ul class="user_Overview flex">
+ <li class="user_Overview-item">
+ <div class="user_Overview_nums" :class="kst ? 'allnum' : 'online'">
+ <dv-digital-flop style="width:100%;height:100%;" />
</div>
- <div class="d-flex jc-center" style="margin-left: 23%;">
- <CenterLeft1Chart />
- </div>
- <!-- 4涓富瑕佺殑鏁版嵁 -->
- <!-- <div class="bottom-data">
- <div
- class="item-box mt-2"
- v-for="(item, index) in numberData"
- :key="index"
- >
- <div class="d-flex" style="margin-left:60px">
- <span class="coin">#</span>
- <dv-digital-flop class="dv-digital-flop" :config="item.number" />
- </div>
- <p class="text" style="text-align: center;">
- {{ item.text }}
- <span class="colorYellow">(涓�)</span>
- </p>
- </div>
- </div> -->
- </div>
- </div>
+ <p>姝ｅ父</p>
+ </li>
+ </ul>
</template>
<script>
-import CenterLeft1Chart from '@/components/echart/centerLeft1Chart'
-import axios from 'axios'
export default {
data() {
return {
- container_data:{},
- // numberData: [
- // {
- // number: {
- // number: [15],
- // toFixed: 1,
- // textAlign: 'left',
- // content: '{nt}',
- // style: {
- // fontSize: 24
- // }
- // },
- // text: '浠婃棩鏋勫缓鎬婚噺'
- // },
- // {
- // number: {
- // number: [1144],
- // toFixed: 1,
- // textAlign: 'left',
- // content: '{nt}',
- // style: {
- // fontSize: 24
- // }
- // },
- // text: '鎬诲叡瀹屾垚鏁伴噺'
- // },
- // {
- // number: {
- // number: [361],
- // toFixed: 1,
- // textAlign: 'left',
- // content: '{nt}',
- // style: {
- // fontSize: 24
- // }
- // },
- // text: '姝ｅ湪缂栬瘧鏁伴噺'
- // },
- // {
- // number: {
- // number: [157],
- // toFixed: 1,
- // textAlign: 'left',
- // content: '{nt}',
- // style: {
- // fontSize: 24
- // }
- // },
- // text: '鏈�氳繃鏁伴噺'
- // }
- // ]
- }
+ kst: true,
+ };
},
- components: {
- CenterLeft1Chart
- },
- mounted() {
- this.changeTiming()
- },
- methods: {
- changeTiming() {
- this.changeNumber()
- setInterval(() => {
- this.changeNumber()
- }, 3000)
- },
- changeNumber() {
- // this.numberData.forEach((item, index) => {
- // item.number.number[0] += ++index
- // item.number = { ...item.number }
- // })
- axios.post("http://192.168.12.189:8098/api/VV_Container/GetContainerMessage",null)
- .then((res) => {
- this.container_data = res;
-
- // this.numberData = [
- // {
- // number: {
- // number: [agvs.emptyNum],
- // toFixed: 1,
- // textAlign: 'left',
- // content: '{nt}',
- // style: {
- // fontSize: 24
- // }
- // },
- // text: '鎬诲叡绌鸿揣浣�'
- // },
- // {
- // number: {
- // number: [agvs.storedNum],
- // toFixed: 1,
- // textAlign: 'left',
- // content: '{nt}',
- // style: {
- // fontSize: 24
- // }
- // },
- // text: '鎬诲叡鏈夎揣璐т綅'
- // },
- // {
- // number: {
- // number: [agvs.num],
- // toFixed: 1,
- // textAlign: 'left',
- // content: '{nt}',
- // style: {
- // fontSize: 24
- // }
- // },
- // text: '鎬诲叡缂撳瓨鏋�'
- // },
- // {
- // number: {
- // number: [agvs.ngNum],
- // toFixed: 1,
- // textAlign: 'left',
- // content: '{nt}',
- // style: {
- // fontSize: 24
- // }
- // },
- // text: '鎺夌嚎缂撳瓨鏋舵暟閲�'
- // }
- // ]
- // this.numberData = GetLocationData
- }).catch((res) => {
- console.log(res)
- })
- }
- }
-}
+};
</script>
-<style lang="scss" scoped>
-$box-width: 610px;
-$box-height: 410px;
+<style lang='scss' scoped>
+.user_Overview {
+ li {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
-#centerLeft1 {
- padding: 16px;
- height: $box-height;
- width: $box-width;
- border-radius: 10px;
- .bg-color-black {
- height: $box-height - 30px;
- border-radius: 10px;
- }
- .text {
- color: #c3cbde;
- }
- .dv-dec-3 {
- position: relative;
- width: 100px;
- height: 20px;
- top: -3px;
- }
+ p {
+ text-align: center;
+ font-size: 16px;
+ margin-top: 10px;
+ }
- .bottom-data {
- .item-box {
- & > div {
- padding-right: 5px;
- }
- font-size: 14px;
- float: right;
+ .user_Overview_nums {
+
+ width: 200px; /* 鏀惧ぇ瀹瑰櫒 */
+ height: 200px;
+ text-align: center;
+ line-height: 250px;
+ font-size: 52px;
+ margin: 50px auto;
position: relative;
- width: 50%;
- color: #d3d6dd;
- .dv-digital-flop {
- width: 120px;
- height: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ &::before {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: contain; /* 鍏抽敭淇敼锛氱瓑姣斾緥缂╂斁 */
+ z-index: 1;
}
- // 閲戝竵
- .coin {
+
+ /* 鏁板瓧鍐呭灞傜骇鎻愰珮 */
+ > * {
position: relative;
- top: 6px;
- font-size: 20px;
- color: #ffc107;
+ z-index: 2;
}
- .colorYellow {
- color: yellowgreen;
+
+ &.bgdonghua::before {
+ animation: rotating 14s linear infinite;
}
- p {
- text-align: center;
- }
+ }
+
+ /* 涓嶅悓绫诲悕瀵瑰簲涓嶅悓鑳屾櫙鍥� */
+ .allnum::before {
+ background-image: url("../../assets/img/left_top_lan.png");
+ }
+
+ .online::before {
+ background-image: url("../../assets/img/left_top_lv.png");
+ }
+
+ .offline::before {
+ background-image: url("../../assets/img/left_top_huang.png");
+ }
+
+ .laramnum::before {
+ background-image: url("../../assets/img/left_top_hong.png");
}
}
}
-
-ul li{
- float: left;
- list-style-type: none;
- margin-left: 8%;
-}
-</style>
+</style>
\ No newline at end of file
--
Gitblit v1.9.3