数据、样式

README.md

@@ -21,6 +21,5 @@ npm run build --report
 For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
 
 # 注意事项
-+ 晟华中控大屏由18块小屏拼接而成，呈 3x6 分布，外配投屏电脑一台，连接 两个显示器
-+ 分辨率都为 1920 * 1080
-+ 接口地址https://apifox.com/apidoc/shared-0bf1a292-c892-44d6-8e28-970c207af9e2
++ 分辨率：3840 * 2560
++ 接口地址：https://apifox.com/apidoc/shared-c603de70-ba0d-4889-b04f-43f0c32bca7f/api-184178705

src/pages/modules/home/index.vue

@@ -1,5 +1,6 @@
 <template>
   <section class="container">
+    <div class="exit_btn iconfont" @click="back">&#xe85b;</div>
     <div class="header">
       <h1>天能涂板暂存库可视化看板</h1>
       <v-time></v-time>
@@ -23,6 +24,11 @@ export default {
     vTime,
     vLeft,
     vRight
+  },
+  methods: {
+    back () {
+      this.$router.push('/setup')
+    }
   }
 }
 </script>
@@ -56,6 +62,19 @@ h1
   background-clip: text;
   text-align center
   margin-top 1%
+.exit_btn
+  position fixed
+  left 8%
+  top 4%
+  z-index 100
+  height .3rem
+  width .3rem
+  line-height .3rem
+  font-size .3rem
+  color #AECAF5
+  text-align: center;
+  cursor: pointer;
+  border-radius: 50%;
 .content
   width 94%
   height 100%

src/pages/modules/home/left.vue

@@ -1,31 +1,361 @@
 <template>
   <div class="n_container">
     <div class="zd-row">
-      <div class="zd-col-10">
-        <div class="zd-row jcflexstart">
+      <div class="zd-col-10 hwpl_wrap_1">
+        <div class="zd-row jcflexstart state_wrap">
           <div class="state_icon bg_col_1"></div>
           <div class="state_title">满货位</div>
           <div class="state_icon bg_col_2"></div>
           <div class="state_title">空货位</div>
         </div>
-        <div class="zd-row">
-          <div class="zd-col-6"></div>
-          <div class="zd-col-6"></div>
-          <div class="zd-col-6"></div>
-          <div class="zd-col-6"></div>
+        <div class="zd-row pie_num_wrap">
+          <div class="pie_wrap">
+            <div class="pie_item">
+              <div id="echart_1" style="width: 100%; height: 100%;"></div>
+            </div>
+            <div class="pie_name">1排</div>
+          </div>
+          <div class="zd-col-6">
+            <div class="zd-row num_wrap num_wrap_1">
+              <div class="zd-col-12 num_label">总货位数</div>
+              <div class="zd-col-12 num_value">{{detail.sum1}}个</div>
+            </div>
+            <div class="zd-row num_wrap num_wrap_2">
+              <div class="zd-col-12 num_label">已用货位</div>
+              <div class="zd-col-12 num_value">{{detail.use1}}个</div>
+            </div>
+            <div class="zd-row num_wrap num_wrap_3">
+              <div class="zd-col-12 num_label">空余货位</div>
+              <div class="zd-col-12 num_value">{{detail.empty1}}个</div>
+            </div>
+          </div>
+          <div class="pie_wrap">
+            <div class="pie_item">
+              <div id="echart_2" style="width: 100%; height: 100%;"></div>
+            </div>
+            <div class="pie_name">2排</div>
+          </div>
+          <div class="zd-col-6">
+            <div class="zd-row num_wrap num_wrap_1">
+              <div class="zd-col-12 num_label">总货位数</div>
+              <div class="zd-col-12 num_value">{{detail.sum2}}个</div>
+            </div>
+            <div class="zd-row num_wrap num_wrap_2">
+              <div class="zd-col-12 num_label">已用货位</div>
+              <div class="zd-col-12 num_value">{{detail.use2}}个</div>
+            </div>
+            <div class="zd-row num_wrap num_wrap_3">
+              <div class="zd-col-12 num_label">空余货位</div>
+              <div class="zd-col-12 num_value">{{detail.empty2}}个</div>
+            </div>
+          </div>
+        </div>
+        <div class="zd-row flexWrap hw_wrap">
+          <div class="hw_item" v-for="e in point2" :key="e.point_code">
+            <p class="zd-row jcflexcenter hw_p1">{{ e.point_code }}</p>
+            <p class="zd-row jcflexcenter hw_p2">{{ e.material_name }}</p>
+          </div>
+        </div>
+        <div class="zd-row flexWrap hw_wrap">
+          <div class="hw_item" v-for="e in point3" :key="e.point_code">
+            <p class="zd-row jcflexcenter hw_p1">{{ e.point_code }}</p>
+            <p class="zd-row jcflexcenter hw_p2">{{ e.material_name }}</p>
+          </div>
+        </div>
+        <div class="zd-row flexWrap hw_wrap">
+          <div class="hw_item" v-for="e in point4" :key="e.point_code">
+            <p class="zd-row jcflexcenter hw_p1">{{ e.point_code }}</p>
+            <p class="zd-row jcflexcenter hw_p2">{{ e.material_name }}</p>
+          </div>
+        </div>
+        <div class="zd-row flexWrap hw_wrap">
+          <div class="hw_item" v-for="e in point5" :key="e.point_code">
+            <p class="zd-row jcflexcenter hw_p1">{{ e.point_code }}</p>
+            <p class="zd-row jcflexcenter hw_p2">{{ e.material_name }}</p>
+          </div>
         </div>
       </div>
-      <div class="zd-col-12"></div>
+      <div class="zd-col-1 gd_wrap">
+        <p class="txt">A<br>G<br>V<br>过<br>道</p>
+      </div>
+      <div class="zd-col-12 hwpl_wrap_2">
+        <div class="zd-row flexWrap">
+          <div class="hw_item" v-for="e in point1" :key="e.point_code" :class="{'hw_item_active': e.point_status === '2'}">
+            <p class="zd-row jcflexcenter hw_p1">{{ e.point_code }}</p>
+            <p class="zd-row jcflexcenter hw_p2">{{ e.material_name }}</p>
+          </div>
+        </div>
+      </div>
+      <div class="zd-col-1 gd_wrap">
+        <p class="txt">人<br>工<br>取<br>货<br>通<br>道</p>
+      </div>
     </div>
   </div>
 </template>
 
+<script>
+import { boardPoint } from '@js/getData2.js'
+export default {
+  data () {
+    return {
+      interTime: this.$store.getters.setTime,
+      ltimer: null,
+      point1: [],
+      point2: [],
+      point3: [],
+      point4: [],
+      point5: [],
+      detail: {sum1: '', sum2: '', empty1: '', empty2: '', use1: '', use2: ''}
+    }
+  },
+  created () {
+    this.refresh()
+  },
+  beforeDestroy () {
+    clearInterval(this.ltimer)
+  },
+  methods: {
+    refresh () {
+      this._boardPoint()
+      this.ltimer = setInterval(() => {
+        this._boardPoint()
+      }, this.interTime)
+    },
+    async _boardPoint () {
+      let res = await boardPoint()
+      this.detail = res.detail
+      this.point1 = [...res.pointList].slice(0, 162)
+      this.point2 = [...res.pointList].slice(162, 183)
+      this.point3 = [...res.pointList].slice(183, 204)
+      this.point4 = [...res.pointList].slice(204, 225)
+      this.point5 = [...res.pointList].slice(225, 246)
+      this.setEchart1()
+      this.setEchart2()
+    },
+    setEchart1 () {
+      let value = Number(this.detail.use1) / Number(this.detail.sum1)
+      value = value * 100
+      value = value.toFixed(0)
+      let option = {
+        grid: {
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          containLabel: true
+        },
+        title: {
+          text: `{a|${value}}{b|%}`,
+          x: 'center',
+          y: 'center',
+          textStyle: {
+            rich: {
+              a: {
+                fontSize: 36,
+                color: '#DBE7F6',
+                fontFamily: 'YouSheBiaoTiHei'
+              },
+              b: {
+                fontSize: 20,
+                padding: [9, 0, 0, 3],
+                color: '#fff',
+                fontFamily: 'YouSheBiaoTiHei'
+              }
+            }
+          }
+        },
+        series: [{
+          name: '进度',
+          type: 'pie',
+          radius: ['76%', '100%'],
+          center: ['50%', '50%'],
+          clockwise: false,
+          label: {
+            show: false
+          },
+          data: [{
+            name: '已完成',
+            value: value,
+            itemStyle: {
+              decal: {
+                color: '#3D92ED',
+                backgroundColor: '#1774E8',
+                dashArrayX: [1, 0],
+                dashArrayY: [1, 4],
+                rotation: -Math.PI / 4
+              }
+            }
+          }, {
+            name: '未完成',
+            value: 100 - value,
+            itemStyle: {
+              decal: {
+                color: '#597491',
+                backgroundColor: '#2f5175',
+                dashArrayX: [1, 0],
+                dashArrayY: [2, 4],
+                rotation: -Math.PI / 4
+              }
+            },
+            emphasis: {
+              disabled: true
+            }
+          }]
+        }, {
+          type: 'pie',
+          radius: ['99%', '100%'],
+          clockwise: false,
+          itemStyle: {
+            color: '#45B1F1'
+          },
+          label: {
+            show: false
+          },
+          data: [1]
+        }, {
+          type: 'pie',
+          radius: ['75%', '76%'],
+          clockwise: false,
+          itemStyle: {
+            color: '#45B1F1'
+          },
+          label: {
+            show: false
+          },
+          data: [1]
+        }]
+      }
+      if (document.getElementById('echart_1') == null) {
+        return
+      }
+      this.$echarts.dispose(document.getElementById('echart_1'))
+      let echart = this.$echarts.init(document.getElementById('echart_1'))
+      echart.setOption(option)
+      window.addEventListener('resize', () => {
+        echart.resize()
+      })
+    },
+    setEchart2 () {
+      let value = Number(this.detail.use2) / Number(this.detail.sum2)
+      value = value * 100
+      value = value.toFixed(0)
+      let option = {
+        grid: {
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          containLabel: true
+        },
+        title: {
+          text: `{a|${value}}{b|%}`,
+          x: 'center',
+          y: 'center',
+          textStyle: {
+            rich: {
+              a: {
+                fontSize: 36,
+                color: '#DBE7F6',
+                fontFamily: 'YouSheBiaoTiHei'
+              },
+              b: {
+                fontSize: 20,
+                padding: [9, 0, 0, 3],
+                color: '#fff',
+                fontFamily: 'YouSheBiaoTiHei'
+              }
+            }
+          }
+        },
+        series: [{
+          name: '进度',
+          type: 'pie',
+          radius: ['76%', '100%'],
+          center: ['50%', '50%'],
+          clockwise: false,
+          label: {
+            show: false
+          },
+          data: [{
+            name: '已完成',
+            value: value,
+            itemStyle: {
+              decal: {
+                color: '#3D92ED',
+                backgroundColor: '#1774E8',
+                dashArrayX: [1, 0],
+                dashArrayY: [1, 4],
+                rotation: -Math.PI / 4
+              }
+            }
+          }, {
+            name: '未完成',
+            value: 100 - value,
+            itemStyle: {
+              decal: {
+                color: '#597491',
+                backgroundColor: '#2f5175',
+                dashArrayX: [1, 0],
+                dashArrayY: [2, 4],
+                rotation: -Math.PI / 4
+              }
+            },
+            emphasis: {
+              disabled: true
+            }
+          }]
+        }, {
+          type: 'pie',
+          radius: ['99%', '100%'],
+          clockwise: false,
+          itemStyle: {
+            color: '#45B1F1'
+          },
+          label: {
+            show: false
+          },
+          data: [1]
+        }, {
+          type: 'pie',
+          radius: ['75%', '76%'],
+          clockwise: false,
+          itemStyle: {
+            color: '#45B1F1'
+          },
+          label: {
+            show: false
+          },
+          data: [1]
+        }]
+      }
+      if (document.getElementById('echart_2') == null) {
+        return
+      }
+      this.$echarts.dispose(document.getElementById('echart_2'))
+      let echart = this.$echarts.init(document.getElementById('echart_2'))
+      echart.setOption(option)
+      window.addEventListener('resize', () => {
+        echart.resize()
+      })
+    }
+  }
+}
+</script>
+
 <style lang="stylus" scoped>
 @import '~@style/mixin'
 .n_container
   _wh(100%, 100%)
   background center / 100% 100% url('../../../images/bg-center.png') no-repeat
-  padding 2%
+  padding .25rem 0 .25rem .25rem
+.hwpl_wrap_1
+  width 4.32rem
+.hwpl_wrap_2
+  width 5.56rem
+.gd_wrap
+  width calc(50% - 4.94rem)
+.state_wrap
+  margin-bottom .38rem
 .state_icon
   _wh(.1rem, .1rem)
 .state_title
@@ -39,4 +369,56 @@
   background-color #8EB5E5
   border-radius 4px
   box-shadow 0px 0px 12px 4px rgba(142, 181, 229, .5)
+.pie_num_wrap
+  margin-bottom .2rem
+.pie_wrap
+  width 1.075rem
+.pie_item
+  position relative
+  _wh(1.075rem, 1.075rem)
+  padding .14rem .135rem .135rem .14rem
+  background center / 100% auto url('../../../images/pie-bg_1.png') no-repeat
+.pie_name
+  _font(.16rem, .16rem, #fff,,center)
+.num_wrap
+  _wh(100%, .3rem)
+  padding .1rem .05rem
+  margin-bottom .058rem
+.num_wrap_1
+  background center / 100% 100% url('../../../images/gl-bg_1.png') no-repeat
+.num_wrap_2
+  background center / 100% 100% url('../../../images/gl-bg_2.png') no-repeat
+.num_wrap_3
+  background center / 100% 100% url('../../../images/gl-bg_3.png') no-repeat
+.num_label
+  _font(.1rem, .1rem, #fff,,left)
+.num_value
+  _font(.11rem, .1rem, #fff,,right)
+  font-family: 'YouSheBiaoTiHei';
+.hw_wrap
+  margin-bottom .5rem
+  &:last-child
+    margin-bottom 0
+.hw_item
+  _wh(.6rem, auto)
+  padding .096rem .05rem .05rem .05rem
+  margin-bottom .02rem
+  background center / 100% 100% url('../../../images/bg-hw.png') no-repeat
+.hw_item_active
+  background-image url('../../../images/bg-hw_active.png')
+  .hw_p1
+    color #3CC1FF
+.hw_p1
+  _font(.1rem, .11rem,#fff,,)
+  font-family: 'YouSheBiaoTiHei'
+  height .22rem
+  overflow hidden
+.hw_p2
+  _font(.1rem, .1rem, #fff,,center)
+  font-family: "SourceHanSansCN-Bold";
+  height 0.2rem
+  overflow hidden
+.txt
+  _font(.2rem, .4rem, #fff,,center)
+  font-family: "YouSheBiaoTiHei"
 </style>

src/pages/modules/home/right.vue

@@ -1,9 +1,443 @@
 <template>
-  <div class="n_container"></div>
+  <div class="n_container">
+    <div class="right_item">
+      <div class="title_wrap"><p>库存分析</p></div>
+      <div class="data_wrap data_wrap_1">
+        <ul class="scroll_tab scroll_tab_1">
+          <li>物料名称</li>
+          <li>数量</li>
+        </ul>
+        <div class="scroll_container">
+          <vue-seamless-scroll :data="kcfx" :class-option="defaultOption1">
+            <ul class="scroll-ul scroll-ul_1">
+              <li v-for="(e, i) in kcfx" :key="i">
+                <div class="scroll-item">{{e.material_name}}</div>
+                <div class="scroll-item">{{e.sum}}</div>
+              </li>
+            </ul>
+          </vue-seamless-scroll>
+        </div>
+      </div>
+    </div>
+    <div class="right_item">
+      <div class="title_wrap"><p>出入库趋势</p></div>
+      <div class="data_wrap">
+        <div id="r_echart_1" style="width: 100%; height: 100%;"></div>
+      </div>
+    </div>
+    <div class="right_item">
+      <div class="title_wrap"><p>当日出入作业</p></div>
+      <div class="data_wrap data_wrap_1">
+        <ul class="scroll_tab">
+          <li>作业时间</li>
+          <li>货位</li>
+          <li>物料</li>
+          <li>出入类型</li>
+          <li>数量</li>
+        </ul>
+        <div class="scroll_container">
+          <vue-seamless-scroll :data="today" :class-option="defaultOption1">
+            <ul class="scroll-ul">
+              <li v-for="(e, i) in today" :key="i">
+              <div class="scroll-item">{{e.time}}</div>
+              <div class="scroll-item">{{e.point_code}}</div>
+              <div class="scroll-item">{{e.material_name}}</div>
+              <div class="scroll-item">
+                <span class="state" :class="'state_' + e.direction"></span>
+                <p class="state_name">{{['入库', '出库'][Number(e.direction)]}}</p>
+              </div>
+              <div class="scroll-item">{{e.number}}</div>
+              </li>
+            </ul>
+          </vue-seamless-scroll>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
+<script>
+import symbol3 from '@img/symbol_3.png'
+import symbol4 from '@img/symbol_4.png'
+import lineSelected from '@img/line_selected.png'
+import { boardKc } from '@js/getData2.js'
+export default {
+  data () {
+    return {
+      interTime: this.$store.getters.setTime,
+      rtimer: null,
+      rtimer1: null,
+      qs: [],
+      today: [],
+      kcfx: []
+    }
+  },
+  computed: {
+    defaultOption1 () {
+      return {
+        step: 0.4, // 数值越大速度滚动越快
+        limitMoveNum: 7, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
+      }
+    }
+  },
+  created () {
+    this.refresh()
+  },
+  beforeDestroy () {
+    clearInterval(this.rtimer)
+    clearInterval(this.rtimer1)
+  },
+  methods: {
+    refresh () {
+      this._boardKc()
+      this.rtimer = setInterval(() => {
+        this._boardKc()
+      }, this.interTime)
+    },
+    async _boardKc () {
+      let res = await boardKc()
+      clearInterval(this.rtimer1)
+      let qs = [...res.qs]
+      for (let i = 0; i < qs.length; i++) {
+        for (let j = i + 1; j < qs.length; j++) {
+          if (qs[i].date === qs[j].date) {
+            if (qs[i].direction === '0') {
+              qs[i].innum = qs[i].num
+            }
+            if (qs[i].direction === '1') {
+              qs[i].outnum = qs[i].num
+            }
+            if (qs[j].direction === '0') {
+              qs[i].innum = qs[j].num
+            }
+            if (qs[j].direction === '1') {
+              qs[i].outnum = qs[j].num
+            }
+            qs.splice(j, 1)
+            j--
+          }
+        }
+      }
+      qs.map(el => {
+        if (!(el.hasOwnProperty('innum') || el.hasOwnProperty('outnum'))) {
+          if (el.direction === '0') {
+            el.innum = el.num
+            el.outnum = 0
+          }
+          if (el.direction === '1') {
+            el.outnum = el.num
+            el.innum = 0
+          }
+        }
+      })
+      this.qs = [...qs]
+      this.today = [...res.today]
+      this.kcfx = [...res.kcfx]
+      this.setEchart1()
+    },
+    setEchart1 () {
+      let img = {
+        imgSrc1: symbol3,
+        imgSrc2: symbol4,
+        imgSrc3: lineSelected
+      }
+      let total = 0
+      this.qs.map(el => {
+        total = Math.max(total, Number(el.innum), Number(el.outnum))
+      })
+      let barName = []
+      let barData1 = []
+      let barData2 = []
+      let totalDate = []
+      this.qs.map(el => {
+        barName.push(el.date)
+        barData1.push(el.innum)
+        barData2.push(el.outnum)
+      })
+      let option = {
+        grid: {
+          top: 90,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          showContent: false,
+          axisPointer: {
+            type: 'line',
+            lineStyle: {
+              type: 'solid',
+              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: '#9BB9DD',
+            fontSize: 32,
+            lineHeight: 32,
+            padding: [0, 6]
+          },
+          itemGap: 60,
+          itemWidth: 16,
+          itemHeight: 16,
+          data: [{name: '入库', itemStyle: {color: '#67D470'}}, {name: '出库', itemStyle: {color: '#1980EA'}}]
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 1,
+              color: '#3C5787'
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            color: '#7591B2',
+            fontSize: 32,
+            lineHeight: 32,
+            fontFamily: 'SourceHanSansCN-Regular',
+            margin: 20
+          },
+          data: barName
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false
+          },
+          splitNumber: 4,
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            color: '#B5C5D4',
+            fontSize: 32,
+            fontFamily: 'SourceHanSansCN-Regular'
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: [8, 6],
+              color: '#455C86'
+            }
+          },
+          max: total
+        },
+        series: [
+          {
+            name: '入库',
+            type: 'line',
+            symbol: 'image://' + img.imgSrc1,
+            symbolSize: [20, 20],
+            legendHoverLink: true,
+            showSymbol: false,
+            itemStyle: {
+              color: '#67D470',
+              lineStyle: {
+                color: '#67D470',
+                width: 4
+              }
+            },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                {
+                  offset: 0,
+                  color: 'rgba(103,212,112,0.1)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(103,212,112,0.74)'
+                }
+              ])
+            },
+            data: barData1
+          },
+          {
+            name: '出库',
+            type: 'line',
+            symbol: 'image://' + img.imgSrc2,
+            symbolSize: [20, 20],
+            legendHoverLink: true,
+            showSymbol: false,
+            itemStyle: {
+              color: '#58A2E3',
+              lineStyle: {
+                color: '#58A2E3',
+                width: 4
+              }
+            },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                {
+                  offset: 0,
+                  color: 'rgba(45,144,255,0)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(45,144,255,0.85)'
+                }
+              ])
+            },
+            data: barData2
+          },
+          {
+            name: '阴影',
+            type: 'pictorialBar',
+            barWidth: '76px',
+            symbol: 'image://' + img.imgSrc3,
+            data: totalDate,
+            z: -1
+          }
+        ]
+      }
+      if (document.getElementById('r_echart_1') == null) {
+        return
+      }
+      this.$echarts.dispose(document.getElementById('r_echart_1'))
+      let echart = this.$echarts.init(document.getElementById('r_echart_1'))
+      echart.setOption(option)
+      let len = 0
+      this.rtimer1 = setInterval(() => {
+        if (len === barName.length) {
+          len = 0
+        }
+        totalDate[len] = total
+        echart.setOption({
+          series: [{
+            data: barData1
+          }, {
+            data: barData2
+          }, {
+            data: totalDate
+          }
+          ]
+        })
+        echart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: len
+        })
+        totalDate = []
+        len++
+      }, 2000)
+      window.addEventListener('resize', () => {
+        echart.resize()
+      })
+    }
+  }
+}
+</script>
+
 <style lang="stylus" scoped>
 @import '~@style/mixin'
 .n_container
   _wh(100%, 100%)
+.right_item
+  height calc((100% - 0.2rem) / 3)
+  margin-bottom .1rem
+  &:last-child
+    margin-bottom 0
+.title_wrap
+  height .5rem
+  background center / 100% 100% url('../../../images/bg-title_1.png') no-repeat
+  padding 0 1rem 0 .3rem
+  p
+    font-size .22rem
+    font-family: 'YouSheBiaoTiHei';
+    font-weight: 400;
+    color: transparent;
+    line-height .4rem
+    background: linear-gradient(0deg, #F9FEFF 0%, #F5FCFF 53.3154296875%, #BAE9FF 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+.data_wrap
+  height calc(100% - .5rem)
+  background center / 100% 100% url('../../../images/bg-m_1.png') no-repeat
+  padding .2rem .25rem
+.data_wrap_1
+  padding .1rem .25rem .2rem .25rem
+.scroll_tab
+  _wh(100%, .38rem)
+  background center / 100% url('../../../images/table-bg_1.png') no-repeat
+  li
+    float left
+    width 15%
+    _font(.16rem,.38rem,#AFBED8,,center)
+    font-family: 'SourceHanSansCN-Regular';
+    font-weight: bold;
+    font-style: italic;
+    word-wrap break-word
+    word-break break-all
+    white-space nowrap
+    padding 0 .05rem
+    overflow hidden
+    box-sizing border-box
+    &:nth-child(1)
+      width 40%
+.scroll_tab_1 li
+  width 50%
+.scroll_container
+  width 100%
+  height calc(100% - .38rem)
+  overflow hidden
+.scroll-ul
+  li
+    _wh(100%, .4rem)
+    border-bottom .01rem solid rgba(122,159,224,0.17)
+    &:nth-child(even)
+      background rgba(31,46,73,0.7)
+    &:nth-child(odd)
+      background rgba(31,46,73,0.55)
+  .scroll-item
+    float left
+    _wh(15%, .39rem)
+    _fj(row, center)
+    _font(.16rem, .16rem, #B2BBD7,,center)
+    font-family: 'SourceHanSansCN-Regular';
+    font-style: italic;
+    word-wrap break-word
+    word-break break-all
+    // white-space nowrap
+    padding 0 .05rem
+    overflow hidden
+    &:nth-child(1)
+      width 40%
+    .state
+      display block
+      _wh(.2rem, .14rem)
+    .state_name
+      width calc(100% - .4rem)
+.scroll-ul_1 li .scroll-item
+  width 50%
 </style>

src/style/iconfont/iconfont.json

@@ -1,37 +0,0 @@
-{
-  "id": "1255596",
-  "name": "nl-hht-hl",
-  "font_family": "iconfont",
-  "css_prefix_text": "icon-",
-  "description": "",
-  "glyphs": [
-    {
-      "icon_id": "2229060",
-      "name": "无信号",
-      "font_class": "no-signal",
-      "unicode": "e76b",
-      "unicode_decimal": 59243
-    },
-    {
-      "icon_id": "400034",
-      "name": "下拉",
-      "font_class": "htmal5icon03",
-      "unicode": "e626",
-      "unicode_decimal": 58918
-    },
-    {
-      "icon_id": "731140",
-      "name": "选择",
-      "font_class": "guanbi1",
-      "unicode": "e608",
-      "unicode_decimal": 58888
-    },
-    {
-      "icon_id": "4736203",
-      "name": "关闭",
-      "font_class": "guanbi",
-      "unicode": "e60f",
-      "unicode_decimal": 58895
-    }
-  ]
-}

src/style/layout.styl

@@ -2,7 +2,7 @@
 @import 'iconfont.styl'
 
 .state_0
-  background center / 100% 100% url('../images/state_0.png') no-repeat
+  background center / 100% 100% url('../images/state_2.png') no-repeat
 .state_1
   background center / 100% 100% url('../images/state_1.png') no-repeat
 .state_2

src/style/reset.css

@@ -230,9 +230,15 @@ div, p {
 .zd-col-1 {
     width: 4.16667%
 }
+.flexWrap {
+    flex-wrap: wrap
+}
 .jcflexstart {
 	justify-content: flex-start !important;
 }
+.jcflexcenter {
+	justify-content: center !important;
+}
 .allHeight {
     height: 100%;
 }