直盘管

src/pages/management/ZhiPanGuan.vue

@@ -0,0 +1,365 @@
+<template>
+<section class="bg">
+    <t-header title="海亮铜管件智能车间直盘管下料看板">
+      <p class="p1" @click="toJump">海亮铜管件智能车间推弯生产看板</p>
+    </t-header>
+    <div class="container">
+      <div class="top_wrap">
+        <div class="left_wrap">
+          <div class="item_wrap">
+            <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>
+                  <div class="item_td_inner">
+                    <div class="item_td_txt1">已生产</div>
+                    <div class="item_td_txt2">10000<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>
+                </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>
+                  <div class="item_td_inner">
+                    <div class="item_td_txt1">已生产</div>
+                    <div class="item_td_txt2">10000<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>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="item_wrap">
+            <div class="item_tip">
+              <div class="item_tip_left">设备报警信息</div>
+            </div>
+            <div class="item_content"></div>
+          </div>
+        </div>
+        <div class="right_wrap">
+          <div class="item_wrap">
+            <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>
+                  <div class="item_td_inner">
+                    <div class="item_td_txt1">已生产</div>
+                    <div class="item_td_txt2">10000<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>
+                </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>
+                  <div class="item_td_inner">
+                    <div class="item_td_txt1">已生产</div>
+                    <div class="item_td_txt2">10000<span>个</span></div>
+                  </div>
+                </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>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="item_wrap">
+            <div class="item_tip">
+              <div class="item_tip_left">设备状态</div>
+            </div>
+            <div class="item_content"></div>
+          </div>
+        </div>
+      </div>
+      <div class="bottom_wrap">
+        <div class="item_wrap_l">
+          <div class="item_tip item_tip_l">
+            <div class="item_tip_left">任务列表</div>
+          </div>
+          <div class="item_content"></div>
+        </div>
+      </div>
+    </div>
+    <section class="bottom"></section>
+</section>
+</template>
+
+<script>
+import THeader from '@components/header.vue'
+export default {
+  name: 'ZhiPanGuan',
+  components: {
+    THeader
+  },
+  data () {
+    return {
+      myCharts1: '',
+      myCharts2: '',
+      myCharts3: '',
+      myCharts4: ''
+    }
+  },
+  mounted () {
+    this.setEchart1()
+  },
+  methods: {
+    toJump () {
+      this.$router.push('/TuiWan')
+    },
+    setEchart1 () {
+      // let value = Number(this.objL1.finish_rate)
+      let value = 50
+      let title = '%'
+      let text = '进度'
+      let option = {
+        title: [
+          {
+            text: '{a|' + value + '}{b|' + title + '}\n{c|' + text + '}',
+            x: 'center',
+            y: 'center',
+            textStyle: {
+              rich: {
+                a: {
+                  fontSize: 26,
+                  color: '#00D9FF',
+                  fontFamily: 'SourceHanSansCN',
+                  foontWeight: '700'
+                },
+                b: {
+                  fontSize: 16,
+                  color: '#ffffff',
+                  fontFamily: 'SourceHanSansCN',
+                  foontWeight: '700',
+                  padding: [10, 0, 0, 3]
+                },
+                c: {
+                  color: '#FFFFFF',
+                  fontSize: 13,
+                  fontWeight: '700',
+                  fontFamily: 'SourceHanSansCN',
+                  padding: [10, 0, 0, 0]
+                }
+              }
+            }
+          }
+        ],
+        polar: {
+          radius: ['75%', '83%'],
+          center: ['50%', '50%']
+        },
+        angleAxis: {
+          max: 100,
+          show: false
+        },
+        radiusAxis: {
+          type: 'category',
+          show: true,
+          axisLabel: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        series: [
+          {name: '',
+            type: 'bar',
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: '#0a2543'
+            },
+            data: [value],
+            coordinateSystem: 'polar',
+            itemStyle: {
+              normal: {
+                color: '#00dfff'
+              }
+            }
+          }
+        ]
+      }
+      let option1 = JSON.parse(JSON.stringify(option))
+      let option2 = JSON.parse(JSON.stringify(option))
+      let option3 = JSON.parse(JSON.stringify(option))
+      let option4 = JSON.parse(JSON.stringify(option))
+      option1.title[0].text = '{a|' + '10' + '}{b|' + title + '}\n{c|' + text + '}'
+      option2.title[0].text = '{a|' + '20' + '}{b|' + title + '}\n{c|' + text + '}'
+      option3.title[0].text = '{a|' + '30' + '}{b|' + title + '}\n{c|' + text + '}'
+      option4.title[0].text = '{a|' + '40' + '}{b|' + title + '}\n{c|' + text + '}'
+      let echart1 = document.getElementById('echart_zpg_1')
+      let echart2 = document.getElementById('echart_zpg_2')
+      let echart3 = document.getElementById('echart_zpg_3')
+      let echart4 = document.getElementById('echart_zpg_4')
+      if (this.myCharts1 !== '') {
+        this.myCharts1.dispose()
+      }
+      if (this.myCharts2 !== '') {
+        this.myCharts2.dispose()
+      }
+      if (this.myCharts3 !== '') {
+        this.myCharts3.dispose()
+      }
+      if (this.myCharts4 !== '') {
+        this.myCharts4.dispose()
+      }
+      if (echart1 !== null) {
+        this.myCharts1 = this.$echarts.init(echart1)
+        this.myCharts1.setOption(option1)
+        window.addEventListener('resize', () => {
+          this.myCharts1.resize()
+        })
+      }
+      if (echart2 !== null) {
+        this.myCharts2 = this.$echarts.init(echart2)
+        this.myCharts2.setOption(option2)
+        window.addEventListener('resize', () => {
+          this.myCharts2.resize()
+        })
+      }
+      if (echart3 !== null) {
+        this.myCharts3 = this.$echarts.init(echart3)
+        this.myCharts3.setOption(option3)
+        window.addEventListener('resize', () => {
+          this.myCharts3.resize()
+        })
+      }
+      if (echart4 !== null) {
+        this.myCharts4 = this.$echarts.init(echart4)
+        this.myCharts4.setOption(option4)
+        window.addEventListener('resize', () => {
+          this.myCharts4.resize()
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@css/mixin'
+.bg
+  _wh(100%, 100%)
+  overflow hidden
+.p1
+  position absolute
+  display block
+  cursor pointer
+  left .2509rem
+  top .22rem
+  font-family "SourceHanSansCN"
+  _font(.18rem, .30rem, #fff, 700,)
+  letter-spacing .01rem
+.container
+  _wh(100%, calc(100% - 1.38rem))
+  padding .3rem .2509rem 0
+  overflow hidden
+.bottom
+  _wh(100%, .38rem)
+  background center bottom / 19.06rem 100% url(../../assets/images/screen1/bottom.png) no-repeat
+.top_wrap
+  _wh(100%, 60%)
+  clear both
+.bottom_wrap
+  _wh(100%, 40%)
+.left_wrap
+  float left
+  width 49%
+.right_wrap
+  float right
+  width 49%
+.item_wrap
+  _wh(100%, 50%)
+.item_wrap_l
+  _wh(100%, 100%)
+.item_tip
+  _wh(100%, .32rem)
+  line-height .32rem
+  background center center / 100% 100% url(../../assets/images/screen1/title_bg_2.png) no-repeat
+.item_tip_l
+  background-image url(../../assets/images/screen1/title_bg_d2.png)
+.item_tip_left
+  float left
+  _wh(60%, 100%)
+  font-family "SourceHanSansCN"
+  _font(.18rem, inherit, #fff, 700,)
+  letter-spacing .02rem
+  text-shadow 0 0 .09rem #159AFF
+  padding-left .38rem
+.item_content
+  _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
+  _fj()
+.item_td_box_r
+  float right
+  _wh(50%, 100%)
+  padding-left .5rem
+  _fj()
+  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
+</style>

src/router/index.js

@@ -7,6 +7,8 @@ const DeviceScreen = r => require.ensure([], () => r(require('@page/DeviceScreen
 const WorkshopScreen = r => require.ensure([], () => r(require('@page/WorkshopScreen')), 'WorkshopScreen')
 const HomeScreen = r => require.ensure([], () => r(require('@page/HomeScreen')), 'HomeScreen')
 
+const ZhiPanGuan = r => require.ensure([], () => r(require('@page/management/ZhiPanGuan')), 'ZhiPanGuan')
+
 Vue.use(Router)
 
 export default new Router({
@@ -20,6 +22,10 @@ export default new Router({
       path: '/setup',
       component: Setup
     },
+    {
+      path: '/ZhiPanGuan',
+      component: ZhiPanGuan
+    },
     {
       path: '/MonitoringScreen',
       component: MonitoringScreen