From 6a008d923aafb68f4ec46e7c05f7e9f9bd751c21 Mon Sep 17 00:00:00 2001
From: caill <815519168@qq.com>
Date: Fri, 14 Apr 2023 16:01:35 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/management/TuiWan.vue     | 136 +++++++++++----
 src/pages/management/ZhiPanGuan.vue | 248 ++++++++++++++++++++--------
 2 files changed, 286 insertions(+), 98 deletions(-)

diff --git a/src/pages/management/TuiWan.vue b/src/pages/management/TuiWan.vue
index 66dbb81..5bbeab0 100644
--- a/src/pages/management/TuiWan.vue
+++ b/src/pages/management/TuiWan.vue
@@ -10,7 +10,36 @@
             <div class="item_tip_left">盘管下料</div>
           </div>
           <div class="item_content item_content_1">
-            <div class="item_wrap_l item_wrap_flex">
+            <div class="top_item_content_wrap">
+              <div class="top_item_content_wrap_item">
+                <div class="top_item_content_wrap_item_l">
+                  <span><i class="color1"></i></span>
+                  <span>双斜切计划</span>
+                </div>
+                <div class="top_item_content_wrap_item_r">
+                  <span>100</span>
+                  <span>个</span>
+                </div>
+              </div>
+              <div class="top_item_content_wrap_item">
+                <div class="top_item_content_wrap_item_l">
+                  <span><i class="color2"></i></span>
+                  <span>已生产</span>
+                </div>
+                <div class="top_item_content_wrap_item_r">
+                  <span>200</span>
+                  <span>个</span>
+                </div>
+              </div>
+            </div>
+            <div class="progress_wrap">
+              <div class="progress_txt_wrap">进度</div>
+              <div class="progress_line_wrap">
+                <div class="progress_line" style="width: 50%">100</div>
+                <div class="progress_line progress_line_r" style="width: 50%">50</div>
+              </div>
+            </div>
+            <!-- <div class="item_wrap_l item_wrap_flex">
               <div class="item_td_box">
                 <div class="item_td_inner">
                   <div class="item_td_txt1">计划生产</div>
@@ -26,7 +55,7 @@
                   <div id="echart_zpg_1" style="width: 100%; height: 100%"></div>
                 </div>
               </div>
-            </div>
+            </div> -->
           </div>
         </div>
       </div>
@@ -503,12 +532,12 @@ export default {
   _wh(100%, .38rem)
   background center bottom / 19.06rem 100% url(../../assets/images/screen1/bottom.png) no-repeat
 .fir_wrap
-  _wh(100%, 25%)
+  _wh(100%, 15%)
 .sec_wrap
   _wh(100%, 35%)
   clear both
 .bottom_wrap
-  _wh(100%, calc(40% - .3rem))
+  _wh(100%, calc(50% - .3rem))
   margin-top .3rem
 .left_wrap
   float left
@@ -520,8 +549,6 @@ export default {
   _wh(100%, 50%)
 .item_wrap_l
   _wh(100%, 100%)
-.item_wrap_flex
-  _fj(flex-start)
 .item_tip
   _wh(100%, .32rem)
   line-height .32rem
@@ -540,39 +567,17 @@ export default {
   _wh(100%, calc(100% - .32rem))
   padding .17rem .17rem .24rem .17rem
   background-color #011834
-.item_content_1
-  clear both
 .item_td_box_l
   float left
   _wh(50%, 100%)
-  padding-right .5rem
+  padding-right .3rem
   _fj()
 .item_td_box_r
   float right
   _wh(50%, 100%)
-  padding-left .5rem
+  padding-left .3rem
   _fj()
   background center left / .02rem 1.42rem url(../../assets/images/screen1/line_3.png) no-repeat
-.item_td_box
-  width auto
-  _fj()
-.item_td_inner
-  _wh(1.8rem, .7rem)
-  background center bottom / 100% 100% url(../../assets/images/screen1/item_4.png) no-repeat
-  padding .05rem
-  &:nth-child(2)
-    margin-left .2rem
-.item_td_txt1
-  font-family "SourceHanSansCN"
-  _font(.14rem, .3rem, #78b1de,bold,center)
-.item_td_txt2
-  font-family "SourceHanSansCN"
-  _font(.18rem, .3rem, #fff,bold,center)
-  span
-    font-size .12rem
-    padding 0 .05rem
-.echart_zpg_wrap_1
-  _wh(80%, 80%)
 .item_td_box_1
   _wh(1.6rem, 1.6rem)
   _fj(center, center)
@@ -624,7 +629,7 @@ export default {
     _wh(100%, .44rem)
     .scroll-ul_1_div
       float left
-      _font(.18rem, .44rem, #fff,,center)
+      _font(.14rem, .44rem, #fff,,center)
       word-wrap break-word
       word-break break-all
       white-space nowrap
@@ -683,4 +688,73 @@ export default {
         left 25%
         _wh(7px, 7px)
         border-radius 50%
+.top_item_content_wrap
+  width 50%
+  _fj()
+.top_item_content_wrap_item
+  _wh(50%, .4rem)
+  _fj()
+  background center bottom / 100% 100% url(../../assets/images/screen1/item_5.png) no-repeat
+  padding-right .4rem
+.color1
+  background-color #07E083
+.color2
+  background-color #B68845
+.top_item_content_wrap_item_l
+  _wh(50%, 100%)
+  overflow hidden
+  clear both
+  span
+    display block
+    float left
+    &:nth-child(1)
+      _wh(.1rem, .4rem)
+      margin-left .2rem
+      _fj()
+      overflow hidden
+      i
+        display block
+        _wh(.09rem, .09rem)
+        border-radius 100%
+    &:nth-child(2)
+      font-family "SourceHanSansCN"
+      _font(.14rem, .4rem, #fff,400,)
+      margin-left .1rem
+      overflow hidden
+      text-overflow ellipsis
+      white-space nowrap
+.top_item_content_wrap_item_r
+  _wh(50%, 100%)
+  line-height .4rem
+  overflow hidden
+  text-align right
+  span
+    font-family "SourceHanSansCN"
+    _font(.12rem, .4rem, #fff,700,)
+    &:nth-child(1)
+      font-family "SourceHanSansCN"
+      _font(.18rem, .4rem, #00D5FF,700,)
+      overflow hidden
+      text-overflow ellipsis
+      white-space nowrap
+.item_content_1
+  _fj()
+.progress_wrap
+  width 50%
+  _fj()
+.progress_txt_wrap
+  _wh(.5rem, .44rem)
+  font-family "SourceHanSansCN"
+  _font(.14rem, .44rem, #84B0DA, 700,)
+  letter-spacing .02rem
+.progress_line_wrap
+  _wh(calc(100% - .5rem), .4rem)
+  background-color rgba(0,213,255,0.20)
+  _fj()
+.progress_line
+  height .27rem
+  _font(.16rem, .27rem, #fff,,center)
+  background-color #07E083
+.progress_line_r
+  background-color #B68845
 </style>
diff --git a/src/pages/management/ZhiPanGuan.vue b/src/pages/management/ZhiPanGuan.vue
index 78ca730..46b7b52 100644
--- a/src/pages/management/ZhiPanGuan.vue
+++ b/src/pages/management/ZhiPanGuan.vue
@@ -6,48 +6,76 @@
     <div class="container">
       <div class="top_wrap">
         <div class="left_wrap">
-          <div class="item_wrap">
+          <div class="item_wrap_1">
             <div class="item_tip">
               <div class="item_tip_left">盘管下料</div>
             </div>
             <div class="item_content item_content_1">
               <div class="item_td_box_l">
-                <div class="item_td_box">
-                  <div class="item_td_inner">
-                    <div class="item_td_txt1">双斜切计划</div>
-                    <div class="item_td_txt2">10000<span>个</span></div>
+                <div class="top_item_content_wrap">
+                  <div class="top_item_content_wrap_item">
+                    <div class="top_item_content_wrap_item_l">
+                      <span><i class="color1"></i></span>
+                      <span>双斜切计划</span>
+                    </div>
+                    <div class="top_item_content_wrap_item_r">
+                      <span>100</span>
+                      <span>个</span>
+                    </div>
                   </div>
-                  <div class="item_td_inner">
-                    <div class="item_td_txt1">已生产</div>
-                    <div class="item_td_txt2">10000<span>个</span></div>
+                  <div class="top_item_content_wrap_item">
+                    <div class="top_item_content_wrap_item_l">
+                      <span><i class="color2"></i></span>
+                      <span>已生产</span>
+                    </div>
+                    <div class="top_item_content_wrap_item_r">
+                      <span>200</span>
+                      <span>个</span>
+                    </div>
                   </div>
                 </div>
-                <div class="item_td_box item_td_box_1">
-                  <div class="echart_zpg_wrap_1">
-                    <div id="echart_zpg_1" style="width: 100%; height: 100%"></div>
+                <div class="progress_wrap">
+                  <div class="progress_txt_wrap">进度</div>
+                  <div class="progress_line_wrap">
+                    <div class="progress_line" style="width: 50%">100</div>
+                    <div class="progress_line progress_line_r" style="width: 50%">50</div>
                   </div>
                 </div>
               </div>
               <div class="item_td_box_r">
-                <div class="item_td_box">
-                  <div class="item_td_inner">
-                    <div class="item_td_txt1">无屑计划</div>
-                    <div class="item_td_txt2">10000<span>个</span></div>
+                <div class="top_item_content_wrap">
+                  <div class="top_item_content_wrap_item">
+                    <div class="top_item_content_wrap_item_l">
+                      <span><i class="color1"></i></span>
+                      <span>无屑计划</span>
+                    </div>
+                    <div class="top_item_content_wrap_item_r">
+                      <span>100</span>
+                      <span>个</span>
+                    </div>
                   </div>
-                  <div class="item_td_inner">
-                    <div class="item_td_txt1">已生产</div>
-                    <div class="item_td_txt2">10000<span>个</span></div>
+                  <div class="top_item_content_wrap_item">
+                    <div class="top_item_content_wrap_item_l">
+                      <span><i class="color2"></i></span>
+                      <span>已生产</span>
+                    </div>
+                    <div class="top_item_content_wrap_item_r">
+                      <span>200</span>
+                      <span>个</span>
+                    </div>
                   </div>
                 </div>
-                <div class="item_td_box item_td_box_1">
-                  <div class="echart_zpg_wrap_1">
-                    <div id="echart_zpg_2" style="width: 100%; height: 100%"></div>
+                <div class="progress_wrap">
+                  <div class="progress_txt_wrap">进度</div>
+                  <div class="progress_line_wrap">
+                    <div class="progress_line" style="width: 50%">100</div>
+                    <div class="progress_line progress_line_r" style="width: 50%">50</div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-          <div class="item_wrap">
+          <div class="item_wrap_2">
             <div class="item_tip">
               <div class="item_tip_left">设备报警信息</div>
             </div>
@@ -67,30 +95,73 @@
           </div>
         </div>
         <div class="right_wrap">
-          <div class="item_wrap">
+          <div class="item_wrap_1">
             <div class="item_tip">
               <div class="item_tip_left">直管下料</div>
             </div>
             <div class="item_content item_content_1">
               <div class="item_td_box_l">
-                <div class="item_td_box">
-                  <div class="item_td_inner">
-                    <div class="item_td_txt1">双斜切计划</div>
-                    <div class="item_td_txt2">10000<span>个</span></div>
+                <div class="top_item_content_wrap">
+                  <div class="top_item_content_wrap_item">
+                    <div class="top_item_content_wrap_item_l">
+                      <span><i class="color1"></i></span>
+                      <span>双斜切计划</span>
+                    </div>
+                    <div class="top_item_content_wrap_item_r">
+                      <span>100</span>
+                      <span>个</span>
+                    </div>
                   </div>
-                  <div class="item_td_inner">
-                    <div class="item_td_txt1">已生产</div>
-                    <div class="item_td_txt2">10000<span>个</span></div>
+                  <div class="top_item_content_wrap_item">
+                    <div class="top_item_content_wrap_item_l">
+                      <span><i class="color2"></i></span>
+                      <span>已生产</span>
+                    </div>
+                    <div class="top_item_content_wrap_item_r">
+                      <span>200</span>
+                      <span>个</span>
+                    </div>
                   </div>
                 </div>
-                <div class="item_td_box item_td_box_1">
-                  <div class="echart_zpg_wrap_1">
-                    <div id="echart_zpg_3" style="width: 100%; height: 100%"></div>
+                <div class="progress_wrap">
+                  <div class="progress_txt_wrap">进度</div>
+                  <div class="progress_line_wrap">
+                    <div class="progress_line" style="width: 50%">100</div>
+                    <div class="progress_line progress_line_r" style="width: 50%">50</div>
                   </div>
                 </div>
               </div>
               <div class="item_td_box_r">
-                <div class="item_td_box">
+                <div class="top_item_content_wrap">
+                  <div class="top_item_content_wrap_item">
+                    <div class="top_item_content_wrap_item_l">
+                      <span><i class="color1"></i></span>
+                      <span>无屑计划</span>
+                    </div>
+                    <div class="top_item_content_wrap_item_r">
+                      <span>100</span>
+                      <span>个</span>
+                    </div>
+                  </div>
+                  <div class="top_item_content_wrap_item">
+                    <div class="top_item_content_wrap_item_l">
+                      <span><i class="color2"></i></span>
+                      <span>已生产</span>
+                    </div>
+                    <div class="top_item_content_wrap_item_r">
+                      <span>200</span>
+                      <span>个</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="progress_wrap">
+                  <div class="progress_txt_wrap">进度</div>
+                  <div class="progress_line_wrap">
+                    <div class="progress_line" style="width: 50%">100</div>
+                    <div class="progress_line progress_line_r" style="width: 50%">50</div>
+                  </div>
+                </div>
+                <!-- <div class="item_td_box">
                   <div class="item_td_inner">
                     <div class="item_td_txt1">无屑计划</div>
                     <div class="item_td_txt2">10000<span>个</span></div>
@@ -102,13 +173,13 @@
                 </div>
                 <div class="item_td_box item_td_box_1">
                   <div class="echart_zpg_wrap_1">
-                    <div id="echart_zpg_4" style="width: 100%; height: 100%"></div>
+                    <div id="echart_zpg_2" style="width: 100%; height: 100%"></div>
                   </div>
-                </div>
+                </div> -->
               </div>
             </div>
           </div>
-          <div class="item_wrap">
+          <div class="item_wrap_2">
             <div class="item_tip">
               <div class="item_tip_left">设备状态</div>
             </div>
@@ -570,8 +641,10 @@ export default {
 .right_wrap
   float right
   width 49%
-.item_wrap
-  _wh(100%, 50%)
+.item_wrap_1
+  _wh(100%, 45%)
+.item_wrap_2
+  _wh(100%, 55%)
 .item_wrap_l
   _wh(100%, 100%)
 .item_tip
@@ -597,37 +670,12 @@ export default {
 .item_td_box_l
   float left
   _wh(50%, 100%)
-  padding-right .5rem
-  _fj()
+  padding-right .3rem
 .item_td_box_r
   float right
   _wh(50%, 100%)
-  padding-left .5rem
-  _fj()
+  padding-left .3rem
   background center left / .02rem 1.42rem url(../../assets/images/screen1/line_3.png) no-repeat
-.item_td_box
-  width 50%
-.item_td_inner
-  _wh(1.8rem, .7rem)
-  background center bottom / 100% 100% url(../../assets/images/screen1/item_4.png) no-repeat
-  padding .05rem
-  &:nth-child(2)
-    margin-top .2rem
-.item_td_txt1
-  font-family "SourceHanSansCN"
-  _font(.14rem, .3rem, #78b1de,bold,center)
-.item_td_txt2
-  font-family "SourceHanSansCN"
-  _font(.18rem, .3rem, #fff,bold,center)
-  span
-    font-size .12rem
-    padding 0 .05rem
-.echart_zpg_wrap_1
-  _wh(80%, 80%)
-.item_td_box_1
-  _wh(1.6rem, 1.6rem)
-  _fj(center, center)
-  background center bottom / 100% 100% url(../../assets/images/screen1/item_3.png) no-repeat
 .item_content_2
   position relative
   padding 0
@@ -674,7 +722,7 @@ export default {
     _wh(100%, .44rem)
     .scroll-ul_1_div
       float left
-      _font(.18rem, .44rem, #fff,,center)
+      _font(.14rem, .44rem, #fff,,center)
       word-wrap break-word
       word-break break-all
       white-space nowrap
@@ -733,4 +781,70 @@ export default {
         left 25%
         _wh(7px, 7px)
         border-radius 50%
+.progress_wrap
+  width 100%
+  _fj()
+.progress_txt_wrap
+  _wh(.5rem, .44rem)
+  font-family "SourceHanSansCN"
+  _font(.14rem, .44rem, #84B0DA, 700,)
+  letter-spacing .02rem
+.progress_line_wrap
+  _wh(calc(100% - .5rem), .4rem)
+  background-color rgba(0,213,255,0.20)
+  _fj()
+.progress_line
+  height .27rem
+  _font(.16rem, .27rem, #fff,,center)
+  background-color #07E083
+.progress_line_r
+  background-color #B68845
+.top_item_content_wrap
+  width 100%
+.top_item_content_wrap_item
+  _wh(100%, .4rem)
+  _fj()
+  margin-bottom .2rem
+  background center bottom / 100% 100% url(../../assets/images/screen1/item_5.png) no-repeat
+.color1
+  background-color #07E083
+.color2
+  background-color #B68845
+.top_item_content_wrap_item_l
+  _wh(50%, 100%)
+  overflow hidden
+  clear both
+  span
+    display block
+    float left
+    &:nth-child(1)
+      _wh(.1rem, .4rem)
+      margin-left .2rem
+      _fj()
+      overflow hidden
+      i
+        display block
+        _wh(.09rem, .09rem)
+        border-radius 100%
+    &:nth-child(2)
+      font-family "SourceHanSansCN"
+      _font(.14rem, .4rem, #fff,400,)
+      margin-left .1rem
+      overflow hidden
+      text-overflow ellipsis
+      white-space nowrap
+.top_item_content_wrap_item_r
+  _wh(50%, 100%)
+  line-height .4rem
+  overflow hidden
+  text-align right
+  span
+    font-family "SourceHanSansCN"
+    _font(.12rem, .4rem, #fff,700,)
+    &:nth-child(1)
+      font-family "SourceHanSansCN"
+      _font(.18rem, .4rem, #00D5FF,700,)
+      overflow hidden
+      text-overflow ellipsis
+      white-space nowrap
 </style>