轨迹使用的是无canvas版本

README.md

@@ -30,5 +30,5 @@ npm test
 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).
 
 # 注意事项
-+ 屏幕分辨率1280 * 960
-+ 15寸分辨率1024*768（这个为标准）
++ 屏幕尺寸1920 * 1080
++ 一体机尺寸1024*768（这个为标准）

src/config/getData.js

@@ -35,6 +35,4 @@ export const areaControl = (code, option) => post('api/pda/areaControl', {
   option: option
 })
 // 1.10 查询设备状态
-export const queryDevice = (code) => post('api/pda/queryDevice', {
-  device_code: code
-})
+export const queryDevice = (arr) => post('api/pda/queryDevice', arr)

src/config/mork.js

@@ -54,27 +54,19 @@ export const areaControl = (code, option) => {
   return res
 }
 export const queryDevice = (t) => {
-  let res = {}
-  if (t === 0) {
-    res = {
-      data: {car1: {x: 105, y: 312, angle: 90}}
-    }
-  } else if (t === 1) {
-    res = {
-      data: {car1: {x: 105, y: 262, angle: 180}}
-    }
-  } else if (t === 2) {
-    res = {
-      data: {car1: {x: 105, y: 202, angle: 180}}
-    }
-  } else if (t === 3) {
-    res = {
-      data: {car1: {x: 105, y: 262, angle: 90}}
-    }
-  } else if (t === 4) {
-    res = {
-      data: {car1: {x: 105, y: 312, angle: 90}}
-    }
+  let res = {
+      "one": {
+          "x": 15821,
+          "y": 60912,
+          "angle": 90
+      },
+      "message": "操作成功",
+      "two": {
+          "x": 15821,
+          "y": 60912,
+          "angle": 90
+      },
+      "status": 200
   }
   return res
 }

src/pages/canvas_new.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="canvas-wrap" @click="rectClick">
+    <canvas id="carCanvas" width="733" height="556"></canvas>
+  </div>
+</template>
+
+<script>
+import Easing from '@config/Easing.js'
+import {queryDevice} from '@config/mork.js'
+// import {queryDevice} from '@config/getData.js'
+export default {
+  data () {
+    return {
+      timer: null,
+      AnimationID: null,
+      keyPoints: [],
+      angle: '',
+      ctx: null
+    }
+  },
+  mounted () {
+    this._queryDevice(0)
+    // this.reFresh()
+  },
+  beforeDestroy () {
+    if (this.timer) {
+      window.clearInterval(this.timer)
+      this.timer = null
+    }
+    if (this.AnimationID) {
+      window.cancelAnimationFrame(this.AnimationID)
+      this.AnimationID = null
+    }
+    this.ctx.clearRect(0, 0, 680, 467)
+  },
+  methods: {
+    reFresh () {
+      let t = 0
+      // this._queryDevice(t)
+      this.timer = setInterval(() => {
+        if (t > 4) {
+          t = 0
+        }
+        this._queryDevice(t)
+        t++
+      }, 1000)
+    },
+    rectClick () {
+      var ev = window.event
+      console.log('x:' + ev.offsetX + 'y:' + ev.offsetY)
+    },
+    async _queryDevice (t) {
+      let res = await queryDevice(t)
+      let obj = res.data.car1
+      obj.x = obj.x / 195
+      obj.y = 556 - obj.y / 250
+      if (this.keyPoints.length <= 1) {
+        this.keyPoints.push(obj)
+        this.angle = res.data.car1.angle
+        const canvas = document.querySelector('#carCanvas')
+        this.ctx = canvas.getContext('2d')
+        this.handleCanvasCar1()
+      } else if (this.keyPoints.length > 1) {
+        this.keyPoints.shift()
+        this.keyPoints.push(res.data.car1)
+        this.angle = res.data.car1.angle
+        const canvas = document.querySelector('#carCanvas')
+        this.ctx = canvas.getContext('2d')
+        this.ctx.clearRect(0, 0, 680, 467)
+        this.handleCanvasCar()
+      }
+    },
+    handleCanvasCar1 () {
+      let img = new Image()
+      img.src = require(`../images/agv_right.png`)
+      this.ctx.clearRect(0, 0, 680, 467)
+      this.ctx.save()
+      this.ctx.translate(this.keyPoints[0].x, this.keyPoints[0].y)
+      this.ctx.rotate(-this.angle * Math.PI / 180)
+      this.ctx.drawImage(img, -img.width / 2, -img.height / 2)
+      this.ctx.restore()
+    },
+    handleCanvasCar () {
+      let img = new Image()
+      img.src = require(`../images/agv_right.png`)
+      let nextX
+      let nextY
+      // 第一帧执行的时间
+      let startTime
+      // 期望动画持续的时间
+      const duration = 1000
+      // 动画被切分成若干段,每一段所占总进度的比例
+      const partProportion = 1 / (this.keyPoints.length - 1)
+      // 缓存绘制第n段线段的n值,为了在进行下一段绘制前把这一段线段的末尾补齐
+      // 动画帧绘制方法currentTime是requestAnimation执行回调方法step时会传入的一个执行时的时间(由performance.now()获得).
+      const step = (currentTime) => {
+        // 第一帧绘制时记录下开始的时间
+        !startTime && (startTime = currentTime)
+        // 已经过去的时间(ms)
+        const timeElapsed = currentTime - startTime
+        // 动画执行的进度 {0,1}
+        let progress = Math.min(timeElapsed / duration, 1)
+        // 加入二次方缓动函数
+        progress = Easing.Quadratic.In(progress)
+        // 描述当前所绘制的是第几段线段
+        const lineIndex = Math.min(Math.floor(progress / partProportion) + 1, this.keyPoints.length - 1)
+        //  当前线段的进度 {0,1}
+        const partProgress = (progress - (lineIndex - 1) * partProportion) / partProportion
+        // 绘制方法
+        const draw = () => {
+          this.ctx.clearRect(0, 0, 680, 467)
+          this.ctx.save()
+          nextX = ~~(this.keyPoints[lineIndex - 1].x + ((this.keyPoints[lineIndex]).x - this.keyPoints[lineIndex - 1].x) * partProgress)
+          nextY = ~~(this.keyPoints[lineIndex - 1].y + ((this.keyPoints[lineIndex]).y - this.keyPoints[lineIndex - 1].y) * partProgress)
+          this.ctx.translate(nextX, nextY)
+          this.ctx.rotate(-this.angle * Math.PI / 180)
+          this.ctx.drawImage(img, -img.width / 2, -img.height / 2)
+          this.ctx.restore()
+        }
+        draw()
+        if (progress < 1) {
+          this.AnimationID = requestAnimationFrame(step)
+        }
+      }
+      this.AnimationID = requestAnimationFrame(step)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.canvas-wrap
+  position relative
+  width 733px
+  height 556px
+  background center / 100% auto url('~@/images/area_bg.png') no-repeat
+</style>

src/pages/index.vue

@@ -6,7 +6,6 @@
     </div>
     <div class="zd-row content">
       <div class="l-wrap">
-        <!-- <div class="title-wrap"><p>站点：10-10-1</p></div> -->
         <div class="list-wrap">
           <div class="zd-row">
             <div class="zd-col-8 scroll-tab">区域</div>
@@ -27,7 +26,7 @@
           <div class="zd-row filter-item">
             <div class="filter-label">起始设备</div>
             <div class="filter-value">
-              <el-select v-model="sCode" placeholder="请选择">
+              <el-select v-model="sCode" placeholder="请选择" @visible-change="vChange1">
                 <el-option
                   v-for="item in options1"
                   :key="item.device_code"
@@ -40,7 +39,7 @@
           <div class="zd-row filter-item">
             <div class="filter-label">目标设备</div>
             <div class="filter-value">
-              <el-select v-model="nCode" placeholder="请选择">
+              <el-select v-model="nCode" placeholder="请选择" @visible-change="vChange1">
                 <el-option
                   v-for="item in options1"
                   :key="item.device_code"
@@ -53,7 +52,7 @@
           <div class="zd-row filter-item">
             <div class="filter-label">物料类型</div>
             <div class="filter-value">
-              <el-select v-model="mType" placeholder="请选择">
+              <el-select v-model="mType" placeholder="请选择" @visible-change="vChange2">
                 <el-option
                   v-for="item in options2"
                   :key="item.value"
@@ -71,7 +70,7 @@
           <div class="zd-row filter-item">
             <div class="filter-label">设备</div>
             <div class="filter-value">
-              <el-select v-model="code" placeholder="请选择">
+              <el-select v-model="code" placeholder="请选择" @visible-change="vChange1">
                 <el-option
                   v-for="item in options1"
                   :key="item.device_code"
@@ -90,7 +89,7 @@
           <div class="zd-row filter-item">
             <div class="filter-label">区域</div>
             <div class="filter-value">
-              <el-select v-model="area" placeholder="请选择">
+              <el-select v-model="area" placeholder="请选择" @visible-change="vChange3">
                 <el-option
                   v-for="item in options3"
                   :key="item.region_code"
@@ -109,7 +108,7 @@
           <div class="zd-row filter-item">
             <div class="filter-label">任务</div>
             <div class="filter-value">
-              <el-select v-model="task" placeholder="请选择">
+              <el-select v-model="task" placeholder="请选择" @visible-change="vChange4">
                 <el-option
                   v-for="item in options4"
                   :key="item.task_id"
@@ -125,7 +124,7 @@
           </div>
         </div>
       </div>
-      <div class="zd-row flexcol jccenter r-wrap">
+      <div class="zd-row flexcol jcflexend r-wrap">
         <t-canvas></t-canvas>
       </div>
     </div>
@@ -133,7 +132,7 @@
 </template>
 
 <script>
-import TCanvas from './canvas.vue'
+import TCanvas from './canvas_new.vue'
 // import {queryAllPoints, queryMaterials, queryAreas, queryTaskIds} from '@config/mork.js'
 import {queryAllPoints, queryMaterials, queryAreas, queryTaskIds, callTask, putAction, areaControl, pdaCancel, forceFinish} from '@config/getData.js'
 export default {
@@ -177,7 +176,6 @@ export default {
   mounted () {
     this._queryAllPoints()
     this._queryMaterials()
-    // this._queryAreas()
     this.refresh()
     this._queryTaskIds()
   },
@@ -212,18 +210,38 @@ export default {
       let res = await queryAllPoints()
       this.options1 = [...res]
     },
+    vChange1 (e) {
+      if (e) {
+        this._queryAllPoints()
+      }
+    },
     async _queryMaterials () {
       let res = await queryMaterials()
       this.options2 = [...res]
     },
+    vChange2 (e) {
+      if (e) {
+        this._queryMaterials()
+      }
+    },
     async _queryAreas () {
       let res = await queryAreas()
       this.options3 = [...res]
     },
+    vChange3 (e) {
+      if (e) {
+        this._queryAreas()
+      }
+    },
     async _queryTaskIds () {
       let res = await queryTaskIds()
       this.options4 = [...res]
     },
+    vChange4 (e) {
+      if (e) {
+        this._queryTaskIds()
+      }
+    },
     async _callTask () {
       this.disabled1 = true
       if (!this.sCode || !this.nCode || !this.mType) {

src/pages/index1.vue

@@ -0,0 +1,447 @@
+<template>
+  <div class="contianer">
+    <div class="header-wrap">
+      <h1>生产控制中心</h1>
+      <div class="exit_btn iconfont" @click="back">&#xe85b;</div>
+    </div>
+    <div class="zd-row content">
+      <div class="l-wrap">
+        <div class="list-wrap">
+          <div class="zd-row">
+            <div class="zd-col-8 scroll-tab">区域</div>
+            <div class="zd-col-8 scroll-tab">是否管控</div>
+            <div class="zd-col-8 scroll-tab">是否存在agv</div>
+          </div>
+          <div class="scroll-container">
+            <vue-seamless-scroll :data="options3" :class-option="defaultOption">
+              <div class="zd-row" v-for="(e, i) in options3" :key="i">
+                <div class="zd-col-8 scroll-item">{{ e.region_name }}</div>
+                <div class="zd-col-8 scroll-item">{{ ['通道释放', '通道管控'][Number(e.is_charge)] }}</div>
+                <div class="zd-col-8 scroll-item">{{ ['没有', '有'][Number(e.has_agv)] }}</div>
+              </div>
+            </vue-seamless-scroll>
+          </div>
+        </div>
+        <div class="item-wrap">
+          <div class="zd-row filter-item">
+            <div class="filter-label">起始设备</div>
+            <div class="filter-value">
+              <el-select v-model="sCode" placeholder="请选择" @visible-change="vChange1">
+                <el-option
+                  v-for="item in options1"
+                  :key="item.device_code"
+                  :label="item.device_name"
+                  :value="item.device_code">
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+          <div class="zd-row filter-item">
+            <div class="filter-label">目标设备</div>
+            <div class="filter-value">
+              <el-select v-model="nCode" placeholder="请选择" @visible-change="vChange1">
+                <el-option
+                  v-for="item in options1"
+                  :key="item.device_code"
+                  :label="item.device_name"
+                  :value="item.device_code">
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+          <div class="zd-row filter-item">
+            <div class="filter-label">物料类型</div>
+            <div class="filter-value">
+              <el-select v-model="mType" placeholder="请选择" @visible-change="vChange2">
+                <el-option
+                  v-for="item in options2"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+          <div class="zd-row jcflexend button-wrap">
+            <button class="button btn-primary" :class="{'btn-info': !sCode || !nCode || !mType}" :disabled="disabled1" @click="_callTask">确认下料</button>
+          </div>
+        </div>
+        <div class="item-wrap">
+          <div class="zd-row filter-item">
+            <div class="filter-label">设备</div>
+            <div class="filter-value">
+              <el-select v-model="code" placeholder="请选择" @visible-change="vChange1">
+                <el-option
+                  v-for="item in options1"
+                  :key="item.device_code"
+                  :label="item.device_name"
+                  :value="item.device_code">
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+          <div class="zd-row jcflexend button-wrap">
+            <button class="button btn-primary" :class="{'btn-info': !code}" :disabled="disabled2" @click="_putAction('1')">放货确认</button>
+            <button class="button btn-primary" :class="{'btn-info': !code}" :disabled="disabled2" @click="_putAction('2')">卸货确认</button>
+          </div>
+        </div>
+        <div class="item-wrap">
+          <div class="zd-row filter-item">
+            <div class="filter-label">区域</div>
+            <div class="filter-value">
+              <el-select v-model="area" placeholder="请选择" @visible-change="vChange3">
+                <el-option
+                  v-for="item in options3"
+                  :key="item.region_code"
+                  :label="item.region_name"
+                  :value="item.region_code">
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+          <div class="zd-row jcflexend button-wrap">
+            <button class="button btn-primary" :class="{'btn-info': !area}" :disabled="disabled3" @click="_areaControl('0')">通道释放</button>
+            <button class="button btn-primary" :class="{'btn-info': !area}" :disabled="disabled3" @click="_areaControl('1')">通道管控</button>
+          </div>
+        </div>
+        <div class="item-wrap">
+          <div class="zd-row filter-item">
+            <div class="filter-label">任务</div>
+            <div class="filter-value">
+              <el-select v-model="task" placeholder="请选择" @visible-change="vChange4">
+                <el-option
+                  v-for="item in options4"
+                  :key="item.task_id"
+                  :label="item.task_name"
+                  :value="item.task_id">
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+          <div class="zd-row jcflexend button-wrap">
+            <button class="button btn-primary" :class="{'btn-info': !area}" :disabled="disabled4" @click="_pdaCancel">取消操作</button>
+            <button class="button btn-primary" :class="{'btn-info': !area}" :disabled="disabled5" @click="_forceFinish">强制完成</button>
+          </div>
+        </div>
+      </div>
+      <div class="zd-row flexcol jcflexend r-wrap">
+        <!-- <t-canvas></t-canvas> -->
+        <div class="relative canvas-wrap">
+          <div class="absolute car" :style="{'left': car1.x / 195 + 'px', 'top': 556 - car1.y / 250 + 'px'}">
+            <div class="car_img" :style="{'transform': 'rotate(-' + car1.angle + 'deg)'}"></div>
+            <div class="absolute car_name">1</div>
+          </div>
+          <div class="absolute car" :style="{'left': car2.x / 195 + 'px', 'top': 556 - car2.y / 250 + 'px'}">
+            <div class="car_img" :style="{'transform': 'rotate(-' + car2.angle + 'deg)'}"></div>
+            <div class="absolute car_name">2</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import TCanvas from './canvas_new.vue'
+// import {queryAllPoints, queryMaterials, queryAreas, queryTaskIds} from '@config/mork.js'
+import {queryAllPoints, queryMaterials, queryAreas, queryTaskIds, callTask, putAction, areaControl, pdaCancel, forceFinish, queryDevice} from '@config/getData.js'
+export default {
+  components: {
+    // TCanvas
+  },
+  data () {
+    return {
+      interTime: this.$store.getters.setTime,
+      timer: null,
+      options1: [],
+      sCode: '',
+      nCode: '',
+      code: '',
+      options2: [],
+      mType: '',
+      options3: [],
+      area: '',
+      options4: [],
+      task: '',
+      disabled1: false,
+      disabled2: false,
+      disabled3: false,
+      disabled4: false,
+      disabled5: false,
+      car1: {x: -100, y: -100, angle: 0},
+      car2: {x: -100, y: -100, angle: 0}
+    }
+  },
+  computed: {
+    defaultOption () {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: 4, // 开始无缝滚动的数据量 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: 5000 // 单步运动停止的时间(默认值1000ms)
+      }
+    }
+  },
+  mounted () {
+    this._queryAllPoints()
+    this._queryMaterials()
+    this.refresh()
+    this._queryTaskIds()
+  },
+  beforeDestroy () {
+    if (this.timer !== null) {
+      clearInterval(this.timer)
+    }
+  },
+  methods: {
+    back () {
+      let flag = !!(document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement)
+      if (flag) {
+        if (document.exitFullscreen) {
+          document.exitFullscreen()
+        } else if (document.webkitCancelFullScreen) {
+          document.webkitCancelFullScreen()
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen()
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen()
+        }
+      }
+      this.$router.push('/setup')
+    },
+    refresh () {
+      this._queryAreas()
+      this._queryDevice()
+      this.timer = setInterval(() => {
+        this._queryAreas()
+        this._queryDevice()
+      }, this.interTime)
+    },
+    async _queryAllPoints () {
+      let res = await queryAllPoints()
+      this.options1 = [...res]
+    },
+    vChange1 (e) {
+      if (e) {
+        this._queryAllPoints()
+      }
+    },
+    async _queryMaterials () {
+      let res = await queryMaterials()
+      this.options2 = [...res]
+    },
+    vChange2 (e) {
+      if (e) {
+        this._queryMaterials()
+      }
+    },
+    async _queryAreas () {
+      let res = await queryAreas()
+      this.options3 = [...res]
+    },
+    vChange3 (e) {
+      if (e) {
+        this._queryAreas()
+      }
+    },
+    async _queryTaskIds () {
+      let res = await queryTaskIds()
+      this.options4 = [...res]
+    },
+    vChange4 (e) {
+      if (e) {
+        this._queryTaskIds()
+      }
+    },
+    async _callTask () {
+      this.disabled1 = true
+      if (!this.sCode || !this.nCode || !this.mType) {
+        this.disabled1 = false
+        return
+      }
+      try {
+        let res = await callTask(this.mType, this.sCode, this.nCode)
+        this.disabled1 = false
+        this.$message({
+          message: res.message,
+          type: 'success'
+        })
+      } catch (e) {
+        this.disabled1 = false
+      }
+    },
+    async _putAction (type) {
+      this.disabled2 = true
+      if (!this.code) {
+        this.disabled2 = false
+        return
+      }
+      try {
+        let res = await putAction(this.code, type)
+        this.disabled2 = false
+        this.$message({
+          message: res.message,
+          type: 'success'
+        })
+      } catch (e) {
+        this.disabled2 = false
+      }
+    },
+    async _areaControl (type) {
+      this.disabled3 = true
+      if (!this.area) {
+        this.disabled3 = false
+        return
+      }
+      try {
+        let res = await areaControl(this.area, type)
+        this.disabled3 = false
+        this.$message({
+          message: res.message,
+          type: 'success'
+        })
+      } catch (e) {
+        this.disabled3 = false
+      }
+    },
+    async _pdaCancel () {
+      this.disabled4 = true
+      if (!this.task) {
+        this.disabled4 = false
+        return
+      }
+      try {
+        let res = await pdaCancel(this.task)
+        this.disabled4 = false
+        this.$message({
+          message: res.message,
+          type: 'success'
+        })
+      } catch (e) {
+        this.disabled4 = false
+      }
+    },
+    async _forceFinish () {
+      this.disabled5 = true
+      if (!this.task) {
+        this.disabled5 = false
+        return
+      }
+      try {
+        let res = await forceFinish(this.task)
+        this.disabled5 = false
+        this.$message({
+          message: res.message,
+          type: 'success'
+        })
+      } catch (e) {
+        this.disabled5 = false
+      }
+    },
+    async _queryDevice () {
+      let arr = [{device_code: '1'}, {device_code: '2'}]
+      let res = await queryDevice(arr)
+      this.car1 = res.one
+      this.car2 = res.two
+      // console.log(this.car1)
+      // this.car1 = {cx: this.car1.x / 195, cy: 556 - this.car1.y / 250, angle: this.car1.angle}
+      // let obj = res.data.car1
+      // obj.x = obj.x / 195
+      // obj.y = 556 - obj.y / 250
+      // if (this.keyPoints.length <= 1) {
+      //   this.keyPoints.push(obj)
+      //   this.angle = res.data.car1.angle
+      //   const canvas = document.querySelector('#carCanvas')
+      //   this.ctx = canvas.getContext('2d')
+      //   this.handleCanvasCar1()
+      // } else if (this.keyPoints.length > 1) {
+      //   this.keyPoints.shift()
+      //   this.keyPoints.push(res.data.car1)
+      //   this.angle = res.data.car1.angle
+      //   const canvas = document.querySelector('#carCanvas')
+      //   this.ctx = canvas.getContext('2d')
+      //   this.ctx.clearRect(0, 0, 680, 467)
+      //   this.handleCanvasCar()
+      // }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.canvas-wrap
+  width 733px
+  height 556px
+  background center / 100% auto url('~@/images/area_bg.png') no-repeat
+.car
+  width 30px
+  height 30px
+  transform translate(-15px, -15px)
+.car_img
+  width 100%
+  height 14px
+  margin 0 auto
+  background center / 100% auto url('~@/images/agv_right.png') no-repeat
+  transform-origin center
+.car_name
+  left calc(50% - .1rem)
+  top -40px
+  width .2rem
+  font-size .14rem
+  line-height .2rem
+  color #fff
+  text-align center
+  background-color: #00bf7c;
+  border-radius: 50%;
+  animation: blink 1.2s ease-out 0s infinite
+  &::before, &::after
+    content: '';
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: -1px
+    top: -1px
+    border-radius: 50%;
+    animation: glow 1.2s ease-out 0s infinite
+    border: 1px solid #46e6ae
+@keyframes blink {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  50% {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes glow {
+  0% {
+    transform: scale(0.5);
+    opacity: 1;
+  }
+  25% {
+    transform: scale(0.8);
+    opacity: 0.75;
+  }
+  50% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  75% {
+    transform: scale(1.2);
+    opacity: 0.25;
+  }
+  100% {
+    transform: scale(1.4);
+    opacity: 0;
+  }
+}
+</style>

src/pages/setup.vue

@@ -3,10 +3,14 @@
     <div class="header-wrap"><h1>生产控制中心</h1></div>
     <h1>配置</h1>
     <div class="setup-wrap">
-      <div class="zd-row">
+      <div class="zd-row mgb1">
         <div class="filter-label">域名地址</div>
         <input type="text" class="filter-value" v-model="baseUrl">
       </div>
+      <div class="zd-row">
+        <div class="filter-label">刷新时间（秒）</div>
+        <input type="number" class="filter-value" v-model="setTime">
+      </div>
       <div class="zd-row button-wrap">
         <button class="zd-col-24 button btn-primary" @click="_config">配置</button>
       </div>
@@ -18,22 +22,33 @@
 export default {
   data () {
     return {
-      baseUrl: this.$store.getters.baseUrl
-      // setTime: this.$store.getters.setTime / 1000
+      baseUrl: this.$store.getters.baseUrl,
+      setTime: this.$store.getters.setTime / 1000
     }
   },
   methods: {
+    _viewport () {
+      this.viewportWidth = window.screen.width
+      this.viewportHeight = window.screen.height
+    },
     _config () {
-      // if (this.setTime > 10800) {
-      //   this.$message({
-      //     message: '刷新时间设置过长',
-      //     type: 'warning'
-      //   })
-      //   return
-      // }
+      if (this.setTime < 3) {
+        this.$message({
+          message: '刷新时间设置过短',
+          type: 'warning'
+        })
+        return
+      }
+      if (this.setTime > 10800) {
+        this.$message({
+          message: '刷新时间设置过长',
+          type: 'warning'
+        })
+        return
+      }
       let obj = {
-        baseUrl: this.baseUrl
-        // setTime: this.setTime * 1000
+        baseUrl: this.baseUrl,
+        setTime: this.setTime * 1000
       }
       this.$store.dispatch('setConfig', obj)
       this.$router.push('/index')
@@ -63,14 +78,19 @@ h1
   _font(.24rem, .3rem, #fff, 400,center)
   margin-bottom .2rem
 .setup-wrap
-  width 4rem
+  width 4.6rem
   background-color rgb(16, 38, 105)
   padding .2rem
 .filter-value
   color #333
   text-align left
   padding 0 .1rem
+  width calc(100% - 1.1rem)
+.filter-label
+  width 1rem
 .button
   margin-left 0
   letter-spacing .2rem
+.mgb1
+  margin-bottom .1rem
 </style>

src/router/index.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 
 const Setup = r => require.ensure([], () => r(require('@page/setup')), 'Setup')
-const Index = r => require.ensure([], () => r(require('@page/index')), 'Index')
+const Index = r => require.ensure([], () => r(require('@page/index1')), 'Index')
 Vue.use(Router)
 
 export default new Router({

src/style/layout.styl

@@ -120,14 +120,13 @@
     text-shadow 0 8px 8px rgba(0,0,0,0.30)
 .content
   position relative
-  padding .67rem .15rem .15rem .15rem
+  padding .67rem 7px .15rem 7px
   _wh(100%, 100%)
 .l-wrap
-  _wh(calc(100% - 705px), 100%)
+  _wh(calc(100% - 740px), 100%)
   overflow auto
 .r-wrap
-  _wh(700px, 100%)
-  padding 10px
+  _wh(733px, 100%)
   background: center / 100% 100% url('~@/images/item_2_bg.png') no-repeat;
 .item-wrap
   width 100%
@@ -135,15 +134,6 @@
   margin-top .05rem
   background: center/ 100% 100% url('~@/images/item_bg_1.png') no-repeat;
   // background-color rgb(16, 38, 105)
-.title-wrap
-  height .4rem
-  padding-left .26rem
-  background: center/ 100% 100% url('~@/images/title_bg.png') no-repeat;
-  p
-    _font(.2rem, .3rem, transparent, 400,)
-    font-family: YouSheBiaoTiHei;
-    background: linear-gradient(to top, rgb(255, 255, 255) 0%, rgb(181, 232, 255) 80%, rgb(181, 232, 255) 100%);
-    -webkit-background-clip: text;
 .filter-item
   margin-bottom .1rem
 .filter-label

src/style/reset.css

@@ -29,9 +29,26 @@ input[type="button"], input[type="submit"], input[type="search"], input[type="re
 	appearance: none;
 }
 
+::-webkit-scrollbar {
+    width: 4px;
+	height: 4px;
+}
+::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+    background-color: #2650a4;
+}
+::-webkit-scrollbar-track {
+    border-radius: 2px;
+    background-color: #e7e7e7;
+    border: 1px solid #cacaca;
+}
+
 .relative {
 	position: relative;
 }
+.absolute {
+	position: absolute;
+}
 .hide {
 	display: none;
 }

src/vuex/modules/com.js

@@ -4,18 +4,18 @@ import { getStore, setStore } from '@config/utils.js'
 const baseUrl = process.env.NODE_ENV === 'development' ? 'http://192.168.81.171:8018' : 'http://192.168.81.171:8018'
 const state = {
   baseUrl: getStore('baseUrl') || baseUrl,
-  lockTime: getStore('lockTime') || 0
+  setTime: getStore('setTime') || 3000
 }
 
 const getters = {
   baseUrl: state => state.baseUrl,
-  lockTime: state => state.lockTime
+  setTime: state => state.setTime
 }
 
 const actions = {
   setConfig ({commit}, res) {
     setStore('baseUrl', res.baseUrl)
-    setStore('lockTime', res.lockTime)
+    setStore('setTime', res.setTime)
     commit(types.COM_CONFIG, res)
   }
 }
@@ -23,7 +23,7 @@ const actions = {
 const mutations = {
   [types.COM_CONFIG] (state, res) {
     state.baseUrl = res.baseUrl
-    state.lockTime = res.lockTime
+    state.setTime = res.setTime
   }
 }