左侧

src/components/time.vue

@@ -1,14 +1,10 @@
 <template>
-  <div class="data_box clearfix">
-    <div class="date_item date">{{date}}</div>
-    <div class="date_item time clearfix">
-      <div class="tiem_item hours">{{hours}}</div>
-      <div class="colon">:</div>
-      <div class="tiem_item minutes">{{minutes}}</div>
-      <div class="colon">:</div>
-      <div class="tiem_item seconds">{{seconds}}</div>
+  <div class="data_box">
+    <div class="time">{{time}}</div>
+    <div class="date_item">
+      <div class="year">{{year}}</div>
+      <div class="year">{{ date }}</div>
     </div>
-    <div class="date_item week">{{week}}</div>
   </div>
 </template>
 
@@ -19,9 +15,7 @@ export default {
     return {
       timer: null,
       time: '',
-      hours: '',
-      minutes: '',
-      seconds: '',
+      year: '',
       date: '',
       week: ''
     }
@@ -42,10 +36,8 @@ export default {
       let myddy = new Date().getDay()
       let week = weekday[myddy]
       this.time = `${hh}:${mm}:${ss}`
-      this.hours = `${hh}`
-      this.minutes = `${mm}`
-      this.seconds = `${ss}`
-      this.date = `${year}年${month}月${date}日`
+      this.year = `${year}`
+      this.date = `${month}.${date}`
       this.week = `${week}`
     }
   },
@@ -60,24 +52,23 @@ export default {
 <style lang="stylus" scoped>
 .data_box
   position absolute
-  right .3rem
-  top 0
-  height .75rem
-  span
-    display inline-block
-    font-size .14rem
-    line-height .75rem
+  right 30px
+  top 21px
+  width 300px
+  height 39px
+  display: flex
+  justify-content: flex-end
 .time
-  width 1rem
-  text-align center
+  font-size: 39px;
+  line-height: 29px;
+  font-family: 'YouSheBiaoTiHei';
+  color: #AECAF5;
 .date_item
-  float left
-  line-height .75rem
-.tiem_item
-  float left
-  width .2rem
-.colon
-  float left
-  width .09rem
-  text-align center
+  margin-left 10px
+.year
+  font-size: 16px;
+  font-family: 'YouSheBiaoTiHei';
+  color: #AECAF5;
+  line-height: 16px;
+  opacity: 0.7;
 </style>

src/config/mork2.js

@@ -257,3 +257,106 @@ export const homepageDataLeft = () => {
   }
   return res
 }
+
+/**
+ * 新版大屏首页右侧报表
+ */
+export const homepageDataRight = () => {
+  let res = {
+    'capacityRate': {
+      'mix': 65.1543659,
+      'press': 75.12341242,
+      'dry': 55.13421,
+      'sort': 70.124352521
+    },
+    'stateStatistics': {
+      'count': 110,
+      'running': 50,
+      'pausing': 30,
+      'shutdown': 20,
+      'inTrouble': 10
+    },
+    'areaDeviceStatus': {
+      'mix': {
+        'running': 7,
+        'pausing': 3,
+        'shutdown': 4,
+        'inTrouble': 1
+      },
+      'press': {
+        'running': 4,
+        'pausing': 2,
+        'shutdown': 1,
+        'inTrouble': 0
+      },
+      'dry': {
+        'running': 4,
+        'pausing': 7,
+        'shutdown': 8,
+        'inTrouble': 2
+      },
+      'sort': {
+        'running': 7,
+        'pausing': 3,
+        'shutdown': 3,
+        'inTrouble': 1
+      }
+    },
+    'top10Of30Days': [
+      {
+        'deviceName': '压机1',
+        'count': 10
+      },
+      {
+        'deviceName': '压机2',
+        'count': 9
+      },
+      {
+        'deviceName': '混料机1',
+        'count': 8
+      },
+      {
+        'deviceName': '窑1',
+        'count': 7
+      },
+      {
+        'deviceName': '分拣拆垛机械手1',
+        'count': 6
+      },
+      {
+        'deviceName': '压机7',
+        'count': 5
+      },
+      {
+        'deviceName': '码垛机械手1',
+        'count': 4
+      },
+      {
+        'deviceName': '窑前桁架1',
+        'count': 3
+      },
+      {
+        'deviceName': '拆盘机1',
+        'count': 2
+      },
+      {
+        'deviceName': '覆膜机1',
+        'count': 1
+      }
+    ],
+    'deviceWorkOrder': [
+      {
+        'process': '压制',
+        'deviceCode': 'YJ01',
+        'deviceName': '压机1',
+        'status': '运行',
+        'workOrder': 'GD0001',
+        'bom': '1001C1',
+        'material': 'ZLMCZ1001C122211GM001BD20-8',
+        'qty': '1000块',
+        'startTime': '2023-11-20 14:32:32'
+      }
+    ]
+  }
+  return res
+}

src/pages/modules/home/left/index.vue

@@ -103,7 +103,7 @@ export default {
 .n_body_container
     width 100%
     height 100%
-    padding 125px 0 50px 27px
+    padding 125px 0 50px 50px
     display: flex;
     justify-content: space-between;
     align-items: center;

src/pages/modules/home/left/left.vue

@@ -80,10 +80,12 @@
                     </div>
                   </div>
                   <div class="pie_legend">
-                    <div class="pie_legend_item" v-for="(e, i) in inventory" :key="i">
+                    <div class="pie_legend_item" v-for="(e, i) in inventory" :key="i" :class="'pie_legend_item_bg_' + (i + 1)">
                       <p class="pie_legend_txt_1">{{ e.materialCode }}</p>
-                      <p class="pie_legend_txt_1">{{ e.qty }}</p>
-                      <p class="pie_legend_txt_1">{{ e.rate }}</p>
+                      <div class="pie_legend_txt_wraper">
+                        <p class="pie_legend_txt_2">{{ e.qty }}</p>
+                        <p class="pie_legend_txt_3">{{ e.rate }}</p>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -106,6 +108,9 @@
 import { homepageDataLeft } from '@js/mork2.js'
 import symbol1 from '@img/symbol_1.png'
 import symbol2 from '@img/symbol_2.png'
+import symbol3 from '@img/symbol_3.png'
+import symbol4 from '@img/symbol_4.png'
+import lineSelected from '@img/line_selected.png'
 export default {
   data () {
     return {
@@ -166,9 +171,10 @@ export default {
       let total = res.inventory.reduce((a, b) => {
         return a + Number(b.qty)
       }, 0)
-      total = 5
       res.inventory.map(el => {
-        this.$set(el, 'rate', Number(el.qty) * 100 / Number(total) + '%')
+        let rate = Number(el.qty) * 100 / Number(total)
+        rate = rate.toFixed(2) + '%'
+        this.$set(el, 'rate', rate)
       })
       this.inventory = [...res.inventory]
       this.history = [...res.history]
@@ -638,7 +644,6 @@ export default {
       let total = this.inventory.reduce((a, b) => {
         return a + Number(b.value)
       }, 0)
-      total = 5
       let seriesData = []
       this.inventory.forEach(r => {
         seriesData.push(r)
@@ -727,6 +732,11 @@ export default {
       })
     },
     setEchart5 () {
+      let img = {
+        imgSrc1: symbol3,
+        imgSrc2: symbol4,
+        imgSrc3: lineSelected
+      }
       let barName = []
       let barData1 = []
       let barData2 = []
@@ -735,9 +745,13 @@ export default {
         barData1.push(el.press)
         barData2.push(el.sort)
       })
+      let total = 0
+      this.history.map(el => {
+        total = Math.max(total, Number(el.press), Number(el.sort))
+      })
       let option = {
         grid: {
-          top: 50,
+          top: 55,
           left: 0,
           right: 0,
           bottom: 0,
@@ -746,43 +760,87 @@ export default {
         tooltip: {
           trigger: 'axis',
           showContent: false,
-          extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
           axisPointer: {
             type: 'line',
             lineStyle: {
               type: 'solid',
-              color: 'rgba(255, 255, 255, .5)'
+              width: '2',
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                  offset: 0,
+                  color: 'rgba(254,254,254,0)'
+                }, {
+                  offset: 1,
+                  color: 'rgba(254,254,254,0)'
+                }],
+                global: false
+              }
             }
           }
         },
         legend: {
           icon: 'rect',
+          top: '0',
+          right: '0',
           textStyle: {
-            color: '#fff',
-            fontSize: 14,
-            lineHeight: 14
+            color: '#9BB9DD',
+            fontSize: 16,
+            lineHeight: 16
           },
-          itemGap: 30.86,
-          itemWidth: 14,
-          itemHeight: 14,
-          data: [{name: '压制', itemStyle: {color: '#4D62FF'}}, {name: '成品', itemStyle: {color: '#A03CFC'}}]
+          itemGap: 30,
+          itemWidth: 8,
+          itemHeight: 8,
+          data: [{name: '压制', itemStyle: {color: '#67D470'}}, {name: '成品', itemStyle: {color: '#1980EA'}}]
         },
         xAxis: {
           type: 'category',
+          // boundaryGap: false,
           axisTick: {
             show: false
           },
           axisLine: {
             show: true,
             lineStyle: {
-              width: 2,
-              color: '#8FABBF'
+              width: 1,
+              color: '#3C5787'
             }
           },
           axisLabel: {
             interval: 0,
-            color: '#8FABBF',
-            fontSize: 16
+            // rotate: 45,
+            color: '#7591B2',
+            fontSize: 12,
+            lineHeight: 12,
+            // align: 'right',
+            fontFamily: 'SourceHanSansCN-Regular',
+            margin: 10,
+            formatter: (value) => {
+              let str = ''
+              let num = 5
+              let valLength = value.length
+              let rowNum = Math.ceil(valLength / num)
+              if (rowNum > 1) {
+                for (let i = 0; i < rowNum; i++) {
+                  let temp = ''
+                  let start = i * num
+                  let end = start + num
+                  if (i === rowNum - 1) {
+                    temp = value.substring(start, end)
+                  } else {
+                    temp = value.substring(start, end) + '\n'
+                  }
+                  str += temp
+                }
+                return str
+              } else {
+                return value
+              }
+            }
           },
           data: barName
         },
@@ -792,33 +850,36 @@ export default {
           axisLine: {
             show: false
           },
-          splitNumber: 2,
+          splitNumber: 4,
           axisTick: {
             show: false
           },
           axisLabel: {
-            color: '#8FABBF',
-            fontSize: 14
+            color: '#B5C5D4',
+            fontSize: 16,
+            fontFamily: 'SourceHanSansCN-Regular'
           },
           splitLine: {
             show: true,
             lineStyle: {
-              type: [8, 4],
-              dashOffset: 4,
-              color: '#8FABBF'
+              type: [4, 3],
+              color: '#455C86'
             }
-          }
+          },
+          max: total
         },
         series: [
           {
             name: '压制',
             type: 'line',
-            symbol: 'circle',
+            symbol: 'image://' + img.imgSrc1,
+            symbolSize: [10, 10],
+            legendHoverLink: true,
             showSymbol: false,
             itemStyle: {
-              color: '#4D62FF',
+              color: '#67D470',
               lineStyle: {
-                color: '#4D62FF',
+                color: '#67D470',
                 width: 2
               }
             },
@@ -826,11 +887,11 @@ export default {
               color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                 {
                   offset: 0,
-                  color: 'rgba(160, 60, 252, 0.1)'
+                  color: 'rgba(103,212,112,0.1)'
                 },
                 {
                   offset: 1,
-                  color: 'rgba(160, 60, 252, 0.5)'
+                  color: 'rgba(103,212,112,0.74)'
                 }
               ])
             },
@@ -839,12 +900,14 @@ export default {
           {
             name: '成品',
             type: 'line',
-            symbol: 'circle',
+            symbol: 'image://' + img.imgSrc2,
+            symbolSize: [10, 10],
+            legendHoverLink: true,
             showSymbol: false,
             itemStyle: {
-              color: '#A03CFC',
+              color: '#58A2E3',
               lineStyle: {
-                color: '#A03CFC',
+                color: '#58A2E3',
                 width: 2
               }
             },
@@ -852,15 +915,49 @@ export default {
               color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                 {
                   offset: 0,
-                  color: 'rgba(79, 18, 255, 0.1)'
+                  color: 'rgba(45,144,255,0)'
                 },
                 {
                   offset: 1,
-                  color: 'rgba(79, 18, 255, 0.5)'
+                  color: 'rgba(45,144,255,0.85)'
                 }
               ])
             },
             data: barData2
+          },
+          {
+            // name: '阴影',
+            // type: 'bar',
+            // barWidth: '38px',
+            // itemStyle: {
+            //   normal: {
+            //     color: {
+            //       type: 'linear',
+            //       x: 0,
+            //       y: 0,
+            //       x2: 0,
+            //       y2: 1,
+            //       colorStops: [
+            //         {
+            //           offset: 0.1,
+            //           color: 'rgba(254,254,254,0.1)'
+            //         },
+            //         {
+            //           offset: 1,
+            //           color: 'rgba(254,254,254,0.1)'
+            //         }
+            //       ]
+            //     }
+            //   }
+            // },
+            // data: [total],
+            // z: -1
+            name: '阴影',
+            type: 'pictorialBar',
+            barWidth: '38px',
+            symbol: 'image://' + img.imgSrc3,
+            data: [total],
+            z: -1
           }
         ]
       }
@@ -950,12 +1047,47 @@ export default {
     _wh(222px, 222px)
     background center / 100% auto url('../../../../images/pie-bg_2.png') no-repeat
 .pie_legend
-  _wh(calc(100% - 207px), 100%)
-  margin-left 207px
-  _fj(row, flex-start)
-  flex-wrap: wrap
+  _wh(calc(100% - 195px), 100%)
+  margin-left 195px
+  // _fj(row, flex-start)
+  // flex-wrap: wrap
 .pie_legend_item
-  width 50%
+  width 100%
+  padding 0 0px 5px 20px
+.pie_legend_item_bg_1
+  background top left / 18px auto url('../../../../images/fk_1.png') no-repeat
+.pie_legend_item_bg_2
+  background top left / 18px auto url('../../../../images/fk_2.png') no-repeat
+.pie_legend_item_bg_3
+  background top left / 18px auto url('../../../../images/fk_3.png') no-repeat
+.pie_legend_item_bg_4
+  background top left / 18px auto url('../../../../images/fk_4.png') no-repeat
+.pie_legend_item_bg_5
+  background top left / 18px auto url('../../../../images/fk_5.png') no-repeat
+.pie_legend_txt_1
+  font-size: 12px;
+  line-height: 18px
+  font-family: 'SourceHanSansCN-Regular';
+  color: #9BB9DD;
+  word-wrap: break-word;
+.pie_legend_txt_wraper
+  _wh(100%, 20px)
+  _fj(row)
+.pie_legend_txt_2
+  font-size 20px
+  line-height: 20px
+  font-family: 'YouSheBiaoTiHei'
+  color: transparent;
+  background: linear-gradient(0deg, #E5F2FC 0%, #CDEAFC 53.3154296875%, #A0DBFC 100%);
+  filter: drop-shadow(rgba(5,28,55,0.42) 0px 2px 8px);
+  -webkit-background-clip: text;
+  background-clip: text;
+.pie_legend_txt_3
+  font-size: 16px;
+  line-height: 20px
+  font-family: 'SourceHanSansCN-Regular';
+  color: #9BB9DD;
+  opacity: 0.5;
 .pie_inner_1
     _wh(100%, 100%)
     background center / 100% url('../../../../images/pie_1.png') no-repeat

src/pages/modules/home/left/right.vue

@@ -6,5 +6,5 @@
 @import '~@style/mixin'
 .right_wraper
     _wh(100%, 100%)
-    background center / 100% url('../../../../images/bg-center_left.jpg') no-repeat
+    background center / 100% 100% url('../../../../images/bg-center_left.jpg') no-repeat
 </style>

src/pages/modules/home/right/index.vue

@@ -2,9 +2,12 @@
     <div class="n_container">
         <div class="n_header">
             <div class="n_header_h1">
-                <h1>据控制中心</h1>
+                <h1>控制中心</h1>
             </div>
+            <v-time></v-time>
         </div>
+        <div class="right_bg"></div>
+        <div class="button_bg"></div>
         <div class="n_body_container">
             <div class="n_left_wraper">
                 <left-page></left-page>
@@ -19,10 +22,12 @@
 <script>
 import leftPage from './left.vue'
 import rightPage from './right.vue'
+import vTime from '@components/time.vue'
 export default {
   components: {
     leftPage,
-    rightPage
+    rightPage,
+    vTime
   }
 }
 </script>
@@ -32,39 +37,59 @@ export default {
     position relative
     width 100%
     height 100%
+    background center / 100% url('../../../../images/bg-home_right.jpg') no-repeat
     overflow hidden
 .n_header
+    position absolute
+    left 0
+    top 0
     width 100%
-    height 8%
+    height 181px
     background center / 100% url('../../../../images/bg-top_right.png') no-repeat
 .n_header_h1
     width: 100%;
     height: 100%;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
+    padding-top 26px
     h1
-        font-size: 32px;
-        line-height: 1;
-        color: #fff;
-        font-weight: normal;
-        text-align: right;
-        padding-bottom 2%
-        letter-spacing 6px
-        font-family "阿里妈妈数黑体" !important
-        padding-left 3px
+        font-size: 60px;
+        font-family: 'YouSheBiaoTiHei';
+        font-weight: 400;
+        color: transparent;
+        line-height: 44px;
+        opacity: 0.89;
+        letter-spacing 18px
+        background: linear-gradient(0deg, #AAD0F6 0%, #D7E7F5 53.3154296875%, #E0EAF6 100%);
+        filter: drop-shadow(#092F6D 1px 4px 1px);
+        -webkit-background-clip: text;
+        background-clip: text;
+        text-align left
+        padding-left 9px
+.right_bg
+    position absolute
+    right 0
+    top 111px
+    width 34px
+    height 839px
+    background center / 100% url('../../../../images/bg-right.png') no-repeat
+.button_bg
+    position absolute
+    left 0
+    bottom 0
+    width 100%
+    height 46px
+    background center / 100% url('../../../../images/bg-button_right.png') no-repeat
 .n_body_container
     width 100%
-    height 92%
+    height 100%
+    padding 125px 50px 50px 0
     display: flex;
     justify-content: space-between;
     align-items: center;
 .n_left_wraper
-    width 49.5%
+    width calc(100% - 965px)
     height 100%
-    background #fff
+    padding-top 5px
 .n_right_wraper
-    width 49.5%
+    width 935px
     height 100%
-    background #fff
 </style>

src/pages/modules/home/right/left.vue

@@ -1,9 +1,10 @@
 <template>
-    <div class="left_wraper">左</div>
+    <div class="left_wraper"></div>
 </template>
 
 <style lang="stylus" scoped>
 @import '~@style/mixin'
 .left_wraper
     _wh(100%, 100%)
+    background center / 100% 100% url('../../../../images/bg-center_right.jpg') no-repeat
 </style>

src/pages/modules/home/right/right.vue

@@ -1,9 +1,122 @@
 <template>
-    <div class="right_wraper">右</div>
+    <div class="right_wraper">
+        <div class="item_wraper flexbetween">
+            <div class="l_item_wraper">
+                <div class="title_wraper">
+                    <p>设备产能利用</p>
+                </div>
+                <div class="content_wraper">
+                  <div class="echart_wraper">
+                      <div id="new_home_echart_6" style="width: 100%; height: 100%;"></div>
+                  </div>
+                </div>
+            </div>
+            <div class="l_item_wraper">
+                <div class="title_wraper">
+                    <p>设备运行统计</p>
+                </div>
+                <div class="content_wraper">
+                  <div class="echart_wraper">
+                      <div id="new_home_echart_7" style="width: 100%; height: 100%;"></div>
+                  </div>
+                </div>
+            </div>
+        </div>
+        <div class="item_wraper flexbetween">
+            <div class="l_item_wraper">
+                <div class="title_wraper">
+                    <p>工序设备状态</p>
+                </div>
+                <div class="content_wraper">
+                  <div class="echart_wraper">
+                      <div id="new_home_echart_6" style="width: 100%; height: 100%;"></div>
+                  </div>
+                </div>
+            </div>
+            <div class="l_item_wraper">
+                <div class="title_wraper">
+                    <p>30天故障-TOP10</p>
+                </div>
+                <div class="content_wraper">
+                  <div class="echart_wraper">
+                      <div id="new_home_echart_7" style="width: 100%; height: 100%;"></div>
+                  </div>
+                </div>
+            </div>
+        </div>
+        <div class="item_wraper">
+            <div class="title_wraper">
+                <p>设备工单生产</p>
+            </div>
+            <div class="content_wraper">
+            </div>
+        </div>
+    </div>
 </template>
 
+<script>
+import { homepageDataRight } from '@js/mork2.js'
+export default {
+  data () {
+    return {
+      interTime: this.$store.getters.setTime,
+      timer: null,
+      capacityRate: {}, // 设备产能利用
+      stateStatistics: {},
+      deviceWorkOrder: [] // 设备工单生产
+    }
+  },
+  created () {
+    this._homepageDataRight()
+    this.refresh()
+  },
+  methods: {
+    refresh () {
+      this.timer = setInterval(() => {
+        this._homepageDataRight()
+      }, this.interTime)
+    },
+    async _homepageDataRight () {
+      let res = await homepageDataRight()
+      this.capacityRate = res.capacityRate
+      this.deviceWorkOrder = [...res.deviceWorkOrder]
+    }
+  }
+}
+</script>
+
 <style lang="stylus" scoped>
 @import '~@style/mixin'
 .right_wraper
     _wh(100%, 100%)
+.item_wraper
+    _wh(100%, calc((100% - 50px) / 3))
+    margin-bottom 25px
+    &:last-child
+        margin-bottom 0
+.l_item_wraper
+    _wh(calc(50% - 15.5px), 100%)
+    .title_wraper
+      background center / 100% url('../../../../images/bg-title_2.png') no-repeat
+    .content_wraper
+      padding 20px
+      background center / 100% url('../../../../images/bg-m_2.png') no-repeat
+.title_wraper
+    _wh(100%, 42px)
+    background center / 100% url('../../../../images/bg-title_1.png') no-repeat
+    padding 6px 44px
+    p
+      font-size 24px
+      font-family: 'YouSheBiaoTiHei';
+      font-weight: 400;
+      color: transparent;
+      line-height 24px
+      background: linear-gradient(0deg, #F9FEFF 0%, #F5FCFF 53.3154296875%, #BAE9FF 100%);
+      -webkit-background-clip: text;
+      background-clip: text;
+.content_wraper
+    _wh(100%, calc(100% - 42px))
+    background center / 100% url('../../../../images/bg-m_1.png') no-repeat
+.echart_wraper
+    _wh(100%, 100%)
 </style>

src/pages/modules/pinye.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="box">
+        <div class="n_left_wraper">
+            <left-page></left-page>
+        </div>
+        <div class="n_left_wraper">
+            <right-page></right-page>
+        </div>
+    </div>
+</template>
+
+<script>
+import leftPage from './home/left/index.vue'
+import rightPage from './home/right/index.vue'
+export default {
+  components: {
+    leftPage,
+    rightPage
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.box
+    width 100%
+    height 100%
+    display: flex
+    justify-content: space-between;
+.n_left_wraper
+    width 50%
+    height 100%
+</style>

src/router/index.js

@@ -4,6 +4,7 @@ import Router from 'vue-router'
 const Setup = r => require.ensure([], () => r(require('@page/Setup')), 'Setup')
 const lIndex = r => require.ensure([], () => r(require('@page/modules/home/left/index')), 'newscreen')
 const rIndex = r => require.ensure([], () => r(require('@page/modules/home/right/index')), 'newscreen')
+const pinye = r => require.ensure([], () => r(require('@page/modules/pinye')), 'pinye')
 
 Vue.use(Router)
 
@@ -25,6 +26,10 @@ export default new Router({
     {
       path: '/rindex',
       component: rIndex
+    },
+    {
+      path: '/pinye',
+      component: pinye
     }
   ]
 })

src/style/reset.css

@@ -72,6 +72,7 @@ html, body {
      width: 100%;
      height: 100%;
      width: 1920px;
+     /* width: 3840px; */
      height: 1080px;
 }