样式

src/assets/css/layout2.styl

@@ -0,0 +1,133 @@
+@import 'mixin2.styl'
+
+// 样式测试
+.style_block
+  display none
+  position absolute
+  _wh(calc(100% / 3), calc(100% / 3))
+  background red
+// 页面跳转
+.tooltip_wrap
+  position fixed
+  bottom 10%
+  z-index 10
+  _wh(auto, 40px)
+  padding 5px 5px
+  background-color rgba(228,233,237,1)
+  _fj(row)
+  &:hover
+    opacity 1 !important
+.left_tooltip_wrap
+    right 0
+    border-top-left-radius 12px
+    border-bottom-left-radius 12px
+.right_tooltip_wrap
+    left 0
+    border-top-right-radius 12px
+    border-bottom-right-radius 12px
+.tooltip_arrow
+  _wh(40px, 100%)
+  _font(14px, 30px, #999,,)
+.tooltip_pages
+  height 100%
+  _fj(row)
+  transition width .3s ease
+  overflow hidden
+.tooltip_page
+  height 100%
+  margin 0 5px
+  _font(14px, 30px, #999,,)
+  border 1px solid #999
+  border-radius: 30px;
+  box-sizing: border-box;
+  padding: 0 10px;
+  &:hover
+    background-color #03fcfd
+    border-color #03fcfd
+    color #fff
+.current_page
+    background-color #02d0d0
+    border-color #02d0d0
+    color #fff
+
+// 弹窗
+.popup_block_wraper
+  position fixed
+  top 0
+  left 0
+  z-index 100
+  width 550px
+  padding 20px 14px 30px 14px
+  _bis('../images/screen3/popup_bg.png')
+.foldline
+  position absolute
+  right -109px
+  z-index 10
+  _wh(127px,105px)
+  _bis('../images/screen3/dot_line.png')
+.foldline_right
+   right -109px
+.foldline_left
+   left -109px
+   transform rotateY(180deg)
+.popup_bg
+  _wh(100%, 100%)
+  background top center / 100% 18px url(../images/screen3/popup_line.png) no-repeat
+  overflow hidden
+.popup_block
+  _wh(100%,100%)
+  padding 15px 0 0 0
+.pop_header
+    _wh(100%, 28px)
+    padding 0 5px
+    _fj(row)
+.pop_name
+  width 50%
+  _font(14px,28px,#32C5FF,,left)
+  text-shadow 2px 2px 4px #A6E6FF
+  margin-bottom 8px
+.pop_status
+  _wh(50%, 28px)
+  _fj(row,flex-end)
+.pop_status_dot
+    _wh(15px, 15px)
+    border-radius 50%
+    margin-right 10px
+.pop_status_text
+    _font(16px, 28px, #fff,,)
+.pop_content
+  _wh(100%, calc(100% - 28px))
+  padding 0 5px
+  overflow-y auto
+  _fj(row,flex-start)
+  flex-wrap wrap
+.pop_item
+    _wh(calc(50% - 2.5px), 30px)
+    _fj(row,flex-start)
+    background-color rgba(50,197,255,50%)
+    border-left 3px solid #fdfd0f
+    margin-bottom 5px
+    padding 0 5px
+    &:nth-child(2n+2)
+        width calc(50% - 2.5px)
+        margin-left 5px
+.pop_label
+    width 100px
+    _font(12px, 24px, #fff,,left)
+.pop_val
+    width calc(100% - 100px)
+    _font(13px, 24px, #0ff,,left)
+    white-space nowrap
+.pop_val_s
+    width calc(100% - 118px)
+.pop_unit
+    width 18px
+    _font(13px, 24px, #fff,,right)
+    overflow hidden
+.icon-guanbi
+    position absolute
+    top 8px
+    right 9px
+    _wh(30px, 22px)
+    _font(15px, 22px, #fff,,center)
+    background-color #0a3679

src/assets/css/mixin2.styl

@@ -0,0 +1,48 @@
+$green = #30EBC9
+$yellow = #E2BB0E
+$gray = #516282
+$gray1 = #8B90A6
+$orange = #F96700
+$green2 = #65d837
+
+.green
+  background-color #11ff0d
+.yellow
+  background-color #fdfd0f
+.gray
+  background-color #bfbfbf
+.gray1
+  background-color #d8d1d1
+.red
+  background-color #ff1016
+
+//宽高
+_wh(w, h)
+  width: w
+  height: h
+
+//字体大小、行高、颜色
+_font(size,height,color=#ffffff,weight=normal,align=center)
+  font-size: size
+  line-height: height
+  color: color
+  font-weight: weight
+  text-align: align
+
+// 背景图片地址和大小
+_bis(url,w=100%,h=100%,x=center,y=center,r=no-repeat)
+  background-position: x y
+  background-size: w h
+  background-image: url(url)
+  background-repeat: r
+
+// 背景图片改变颜色
+_shadow(w,c)
+  filter drop-shadow(w 0 0 c)
+
+//flex 布局和 子元素 对其方式
+_fj(c=column, x=space-between,y=center)
+  display: flex
+  flex-direction: c
+  justify-content: x
+  align-items: y

src/assets/js/getData1.js

@@ -24,52 +24,116 @@ export const errCensus = (id) => post('api/deviceScreen/errCensus', {})
 /**  仓储监控 */
 export const storageMonitor = (id) => post('api/dashboard/warehouseMonitor', {})
 /**  生产统计 */
-export const productionStatistics = (id) => post('api/dashboard/productionStatistics', {})
-// export const productionStatistics = () => {
-//   let res = {
-//     'total': {
-//       'pressWeight': 0,
-//       'dryWeight': 0,
-//       'sortWeight': 0
-//     },
-//     'mixProduction': [
-//       {
-//         'value': 0,
-//         'name': 'string'
-//       }
-//     ],
-//     'pressProduction': {
-//       'dailyProductionQty': 0,
-//       'dailyProductionWeight': 0,
-//       'equipmentProduction': [
-//         {
-//           'name': 'string',
-//           'qty': 0,
-//           'weight': 0
-//         }
-//       ]
-//     },
-//     'finishedProductCompletionRate': [
-//       {
-//         'name': 'string',
-//         'completed': 0,
-//         'uncompleted': 0
-//       }
-//     ],
-//     'workOrder': [
-//       {
-//         'workOrderCode': 'string',
-//         'equipment': 'string',
-//         'materialCode': 'string',
-//         'customer': 'string',
-//         'planned': 0,
-//         'completed': 0,
-//         'status': 'string',
-//         'planStartTime': 'string',
-//         'startTime': 'string',
-//         'endTime': 'string'
-//       }
-//     ]
-//   }
-//   return res
-// }
+// export const productionStatistics = (id) => post('api/dashboard/productionStatistics', {})
+export const productionStatistics = () => {
+  let res = {
+    'pressProduction': {
+      'dailyProductionQty': 32.25,
+      'equipmentProduction': [
+        {
+          'qty': 11000,
+          'name': '压机1',
+          'weight': 13000
+        },
+        {
+          'qty': 4000,
+          'name': '压机2',
+          'weight': 19000
+        },
+        {
+          'qty': 5000,
+          'name': '压机3',
+          'weight': 3000
+        }
+      ],
+      'dailyProductionWeight': 64.25
+    },
+    'workOrder': [
+      {
+        'planStartTime': '2023-08-18 14:02:48',
+        'workOrderCode': 'DD001',
+        'equipment': '压机1',
+        'materialCode': 'WL01',
+        'startTime': '2023-08-18 14:02:48',
+        'planned': '1000kg',
+        'completed': '827kg',
+        'endTime': '2023-08-18 14:02:48',
+        'customer': '厂家1',
+        'status': '完成'
+      },
+      {
+        'planStartTime': '2023-08-18 14:02:48',
+        'workOrderCode': 'DD002',
+        'equipment': '混料机2',
+        'materialCode': 'WL02',
+        'startTime': '2023-08-18 14:02:48',
+        'planned': '1000kg',
+        'completed': '894kg',
+        'customer': '厂家2',
+        'status': '已下发'
+      },
+      {
+        'planStartTime': '2023-08-18 14:02:48',
+        'workOrderCode': 'DD003',
+        'equipment': '压机3',
+        'materialCode': 'WL03',
+        'planned': '3000kg',
+        'completed': '627kg',
+        'customer': '厂家3',
+        'status': '未生产'
+      },
+      {
+        'planStartTime': '2023-08-18 14:02:48',
+        'workOrderCode': 'DD004',
+        'equipment': '混料机4',
+        'materialCode': 'WL04',
+        'startTime': '2023-08-18 14:02:48',
+        'planned': '8000kg',
+        'completed': '6137kg',
+        'customer': '厂家4',
+        'status': '暂停'
+      }
+    ],
+    'total': {
+      'pressWeight': 30.25,
+      'dryWeight': 20.25,
+      'sortWeight': 16.25
+    },
+    'finishedProductCompletionRate': [
+      {
+        'uncompleted': 5000,
+        'name': '物料1',
+        'completed': 4000
+      },
+      {
+        'uncompleted': 3000,
+        'name': '物料2',
+        'completed': 4000
+      },
+      {
+        'uncompleted': 4000,
+        'name': '物料3',
+        'completed': 3000
+      }
+    ],
+    'mixProduction': [
+      {
+        'name': '物料1',
+        'value': 800.25
+      },
+      {
+        'name': '物料2',
+        'value': 800.25
+      },
+      {
+        'name': '物料3',
+        'value': 900.25
+      },
+      {
+        'name': '物料4',
+        'value': 600.25
+      }
+    ]
+  }
+  return res
+}