no message

src/pages/modules/home/index.vue

@@ -39,7 +39,39 @@
                 </div>
               </div>
             </div>
-            <div class="r_wraper"></div>
+            <div class="relative r_wraper">
+              <div class="absolute status_wrap">
+                <div class="status_item">
+                    <div class="status_tip green"></div>
+                    <div class="status_name">运行中</div>
+                </div>
+                <div class="status_item">
+                    <div class="status_tip yellow"></div>
+                    <div class="status_name">待机</div>
+                </div>
+                <div class="status_item">
+                    <div class="status_tip gray"></div>
+                    <div class="status_name">关机</div>
+                </div>
+                <div class="status_item">
+                    <div class="status_tip red"></div>
+                    <div class="status_name">故障</div>
+                </div>
+              </div>
+              <div class="area_t_a">1#车间监控</div>
+              <div class="relative area_a">
+                <div class="absolute hw_wrap">
+                  <div class="hw_item green" v-for="(e, i) in dataList" :key="i"></div>
+                </div>
+                <div class="absolute hw_wrap hw_wrap_1">
+                  <div class="hw_item green" v-for="(e, i) in dataList" :key="i"></div>
+                </div>
+                <div class="absolute hw_wrap hw_wrap_2">
+                  <div class="hw_item green" v-for="(e, i) in dataList" :key="i"></div>
+                </div>
+                <div class="absolute status_icon green" :style="{'left': e.x, 'top': e.y}" v-for="(e, i) in machineData" :key="i"></div>
+              </div>
+            </div>
           </div>
           <div class="n_wraper">
             <div class="l_wraper">
@@ -73,7 +105,33 @@
                 </div>
               </div>
             </div>
-            <div class="r_wraper"></div>
+            <div class="relative r_wraper">
+              <div class="absolute status_wrap">
+                <div class="status_item">
+                    <div class="status_tip green"></div>
+                    <div class="status_name">运行中</div>
+                </div>
+                <div class="status_item">
+                    <div class="status_tip yellow"></div>
+                    <div class="status_name">待机</div>
+                </div>
+                <div class="status_item">
+                    <div class="status_tip gray"></div>
+                    <div class="status_name">关机</div>
+                </div>
+                <div class="status_item">
+                    <div class="status_tip red"></div>
+                    <div class="status_name">故障</div>
+                </div>
+              </div>
+              <div class="area_t_a area_t_b">2#车间监控</div>
+              <div class="relative area_b">
+                <div class="absolute hw_wrap hw_wrap_3">
+                  <div class="hw_item green" v-for="(e, i) in dataList1" :key="i"></div>
+                </div>
+                <div class="absolute status_icon green" :style="{'left': e.x, 'top': e.y}" v-for="(e, i) in machineData1" :key="i"></div>
+              </div>
+            </div>
           </div>
       </div>
   </div>
@@ -87,15 +145,12 @@ export default {
     return {
       interTime: this.$store.getters.setTime,
       timer: null,
-      materList: [], // 原料库存
       curList: [], // 当日出入
-      historyList: [], // 历史分析
-      statisList: [], // 当日生产统计
-      loadList: [], // 当日车间上下料
-      taskList: [], // 当日搬运任务
-      agvList: [],
-      rgvList: [],
       stateStatistics: {}, // 设备运行统计
+      dataList: [],
+      dataList1: [],
+      machineData: [{x: '10%', y: '10%'}, {x: '10%', y: '32%'}, {x: '10%', y: '53%'}, {x: '10%', y: '79%'}, {x: '75%', y: '71%'}, {x: '80%', y: '71%'}, {x: '85.4%', y: '71%'}, {x: '90.4%', y: '71%'}, {x: '95.6%', y: '71%'}],
+      machineData1: [{x: '10%', y: '19%'}, {x: '10%', y: '36%'}, {x: '10%', y: '63%'}, {x: '10%', y: '81%'}],
       myChart1: null,
       myChart2: null,
       myChart3: null,
@@ -104,6 +159,8 @@ export default {
   },
   created () {
     this.refresh()
+    this.dataList = new Array(50)
+    this.dataList1 = new Array(140)
   },
   mounted () {
     this.myChart1 = this.$echarts.init(this.$refs.echartsRef1)
@@ -157,7 +214,6 @@ export default {
     },
     async _getAllBigScreen () {
       let res = await getAllBigScreen()
-      this.materList = [...res.inventoryAnalysis]
       this.curList = [...res.inventoryIOAnalysis]
       res.stateStatistics.fourState.map(el => {
         let rate = Number(el.status) * 100 / Number(res.stateStatistics.count)

src/pages/modules/home/style.stylus

@@ -39,18 +39,36 @@
 .n_wraper
   width 100%
   height calc(50% - 4px)
-  background-color #082B64
   display: flex;
   justify-content: space-between;
   &:first-child
     margin-bottom 8px
 .l_wraper
-  width 24%
+  width calc(100% - 767px)
   height 100%
+  padding 0 4px
+  background-color #141828
 .r_wraper
-  width 75%
+  width 760px
   height 100%
-  background center / 100% 100% url('../../../images/area_a.png') no-repeat
+  padding 4px
+  background-color #141828
+.area_t_a
+  font-size 14px
+  color #fff
+  text-align center
+  line-height 30px
+  height calc(100% - 165px)
+.area_a
+  width 752px
+  height 155px
+  margin 0 auto
+  background center / 100% 100% url('../../../images/area_a.jpg') no-repeat
+.area_t_b
+  height calc(100% - 160px)
+.area_b
+  height 150px
+  background center / 100% 100% url('../../../images/area_b.jpg') no-repeat
 .item_wraper
   width 100%
   height calc(50% - 2px)
@@ -69,24 +87,19 @@
     font-weight: 400;
     color: #fff;
     line-height 12px
-.title_wraper_1
-  background-image url('../../../images/bg-title_1_s.png')
 .content_wraper
   width 100%
   height calc(100% - 24px)
-  padding 4px
+  padding 6px
-  background-color #15347b
 .content_wraper_2
   padding 0
   display flex
   justify-content space-between
 .pie_wraper
-  width 50%
+  width 48%
   height 100%
-  // padding 1px 0 0 1px
-  // background left center / 111px 111px url('../../../images/pie-bg_2_s.png') no-repeat
 .pie_legend
-  width 50%
+  width 52%
   height 100%
   display flex
   flex-direction row
@@ -95,7 +108,7 @@
   flex-wrap: wrap
 .pie_legend_item
   width 50%
-  padding 0 0px 2px 10px
+  padding 0 0 0 10px
 .pie_legend_txt_1
   font-size: 8px;
   line-height: 8px
@@ -191,4 +204,51 @@
         height 14px
       .state_name
         width 100%
-        height 20px
+        height 20px
+.hw_wrap
+  width: 60px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between
+  left: 60.79%;
+  top: 7%;
+.hw_wrap_1
+  top: 36%;
+.hw_wrap_2
+  top: 66%;
+.hw_wrap_3
+  left: 73.54%
+  top: 13%;
+.hw_item
+  width: 5px;
+  height: 7px;
+  margin: 0.5px;
+.status_wrap
+  top 10px
+  right 10px
+  display flex
+.status_item
+  display flex
+  align-items center
+  margin-left 10px
+.status_tip
+  width 6px
+  height 6px
+  border-radius 1px
+.green
+  background-color #11ff0d
+.yellow
+  background-color #fdfd0f
+.gray
+  background-color #bfbfbf
+.red
+  background-color #ff1016
+.status_name
+  margin-left 5px
+  font-size 10px
+  color #fff
+.status_icon
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 4px solid rgba(22, 52, 22, 80%);

src/style/reset.css

@@ -84,7 +84,7 @@ body {
      -ms-user-select:none;/*IE10*/
      -khtml-user-select:none;/*早期浏览器*/
      user-select:none;
-     background-color: #133471;
+     background: linear-gradient(to right, #13296f, #1546b8, #13296f);
 }
 
 div, p {