diff --git a/src/images/area_a.jpg b/src/images/area_a.jpg new file mode 100644 index 0000000..050d681 Binary files /dev/null and b/src/images/area_a.jpg differ diff --git a/src/images/area_b.jpg b/src/images/area_b.jpg new file mode 100644 index 0000000..8e599f2 Binary files /dev/null and b/src/images/area_b.jpg differ diff --git a/src/pages/modules/home/index.vue b/src/pages/modules/home/index.vue index 92e1cf5..31e1a67 100644 --- a/src/pages/modules/home/index.vue +++ b/src/pages/modules/home/index.vue @@ -39,7 +39,39 @@ -
+
+
+
+
+
运行中
+
+
+
+
待机
+
+
+
+
关机
+
+
+
+
故障
+
+
+
1#车间监控
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -73,7 +105,33 @@
-
+
+
+
+
+
运行中
+
+
+
+
待机
+
+
+
+
关机
+
+
+
+
故障
+
+
+
2#车间监控
+
+
+
+
+
+
+
@@ -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) diff --git a/src/pages/modules/home/style.stylus b/src/pages/modules/home/style.stylus index 7f3b9cc..f3744ef 100644 --- a/src/pages/modules/home/style.stylus +++ b/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 - background-color #15347b + padding 6px .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 \ No newline at end of file + 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%); \ No newline at end of file diff --git a/src/style/reset.css b/src/style/reset.css index 432359e..86e3134 100644 --- a/src/style/reset.css +++ b/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 {