一体机、配置页

src/config/http.js

@@ -2,7 +2,7 @@ import axios from 'axios'
 import store from '../vuex/store'
 import router from '@/router'
 
-axios.defaults.timeout = 50000
+axios.defaults.timeout = 5000
 axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
 
 axios.interceptors.request.use(
@@ -37,7 +37,6 @@ axios.interceptors.response.use(
         case 400:
           break
         case 401:
-          store.dispatch('delUserInfo')
           router.push('/login')
           break
       }

src/config/mork.js

@@ -0,0 +1,67 @@
+// 1.1查询所有设备
+export const queryAllPoints = () => {
+  let res = {
+    data: [{device_code: '10001', device_name: '车号1'}],
+    message: 'ok'
+  }
+  return res
+}
+// 1.2查询物料类型
+export const queryMaterials = () => {
+  let res = {
+    data: [{value: '1', label: '类型一'}],
+    message: 'ok'
+  }
+  return res
+}
+// 1.3 确认下料
+export const callTask = (material, scode, ncode) => {
+  let res = {
+    message: 'ok'
+  }
+  return res
+}
+// 1.4 放货确认/卸货确认
+export const putAction = (code, option) => {
+  let res = {
+    message: 'ok'
+  }
+  return res
+}
+// 1.5 查询所有就绪或者执行中任务id
+export const queryTaskIds = () => {
+  let res = {
+    data: [{task_id: '1'}],
+    message: 'ok'
+  }
+  return res
+}
+// 1.6 取消操作
+export const pdaCancel = (id) => {
+  let res = {
+    message: 'ok'
+  }
+  return res
+}
+// 1.7 强制完成操作
+export const forceFinish = (id) => {
+  let res = {
+    message: 'ok'
+  }
+  return res
+}
+// 1.8查询所有区域
+export const queryAreas = () => {
+  let res = {
+    data: [{region_code: '1', region_name: 'A区', is_charge: '0', has_agv: '0'}, {region_code: '2', region_name: 'B区', is_charge: '0', has_agv: '0'}, {region_code: '3', region_name: 'C区', is_charge: '0', has_agv: '0'}, {region_code: '4', region_name: 'D区', is_charge: '0', has_agv: '0'}, {region_code: '5', region_name: 'E区', is_charge: '0', has_agv: '0'}],
+    message: 'ok'
+  }
+  return res
+}
+// 1.9 通道释放/通道管控
+export const areaControl = (code, option) => {
+  let res = {
+    message: 'ok'
+  }
+  return res
+}

src/images/oval-white.svg

@@ -1,17 +0,0 @@
-<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
-<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
-    <g fill="none" fill-rule="evenodd">
-        <g transform="translate(1 1)" stroke-width="2">
-            <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
-            <path d="M36 18c0-9.94-8.06-18-18-18">
-                <animateTransform
-                    attributeName="transform"
-                    type="rotate"
-                    from="0 18 18"
-                    to="360 18 18"
-                    dur="1s"
-                    repeatCount="indefinite"/>
-            </path>
-        </g>
-    </g>
-</svg>

src/pages/canvas.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="canvas-wrap">
-    <canvas id="lineCanvas" width="300" height="300"></canvas>
-    <canvas id="carCanvas" width="300" height="300"></canvas>
+    <canvas id="carCanvas" width="645" height="686"></canvas>
   </div>
 </template>
 
@@ -10,77 +9,15 @@ import Easing from '@config/Easing.js'
 export default {
   data () {
     return {
-      keyPoints: [{x: 160, y: 200}, {x: 60, y: 200}, {x: 60, y: 400}, {x: 160, y: 400}]
+      keyPoints: [{x: 112, y: 183}, {x: 112, y: 425}, {x: 43, y: 427}, {x: 112, y: 425}]
     }
   },
   mounted () {
-    setTimeout(() => {
-      this.handleCanvasLine()
-    }, 5000)
     setTimeout(() => {
       this.handleCanvasCar()
-    }, 5900)
+    }, 3000)
   },
   methods: {
-    handleCanvasLine () {
-      const canvas = document.querySelector('#lineCanvas')
-      const ctx = canvas.getContext('2d')
-      let img = new Image()
-      img.src = require('../images/che.png')
-      // 设置线条样式
-      ctx.lineWidth = 1
-      ctx.lineJoin = 'round'
-      ctx.lineCap = 'round'
-      let prevX = this.keyPoints[0].x
-      let prevY = this.keyPoints[0].y
-      let nextX
-      let nextY
-      // 第一帧执行的时间
-      let startTime
-      // 期望动画持续的时间
-      const duration = 900
-      // 动画被切分成若干段,每一段所占总进度的比例
-      const partProportion = 1 / (this.keyPoints.length - 1)
-      // 缓存绘制第n段线段的n值,为了在进行下一段绘制前把这一段线段的末尾补齐
-      let lineIndexCache = 1
-      // 动画帧绘制方法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 = () => {
-          ctx.strokeStyle = `rgba(${81 + 175 * Math.abs(1 - progress * 2)}, ${160 - 160 * Math.abs(progress * 2 - 1)}, ${255},${1})`
-          ctx.beginPath()
-          ctx.moveTo(prevX, prevY)
-          // 当绘制下一段线段前,把上一段末尾缺失的部分补齐
-          if (lineIndex !== lineIndexCache) {
-            ctx.lineTo(this.keyPoints[lineIndex - 1].x, this.keyPoints[lineIndex - 1].y)
-            lineIndexCache = lineIndex
-          }
-          prevX = nextX = ~~(this.keyPoints[lineIndex - 1].x + ((this.keyPoints[lineIndex]).x - this.keyPoints[lineIndex - 1].x) * partProgress)
-          prevY = nextY = ~~(this.keyPoints[lineIndex - 1].y + ((this.keyPoints[lineIndex]).y - this.keyPoints[lineIndex - 1].y) * partProgress)
-          ctx.lineTo(nextX, nextY)
-          ctx.stroke()
-        }
-        draw()
-        if (progress < 1) {
-          requestAnimationFrame(step)
-        } else {
-          console.log('动画执行完毕')
-        }
-      }
-      requestAnimationFrame(step)
-    },
     handleCanvasCar () {
       const canvas = document.querySelector('#carCanvas')
       const ctx = canvas.getContext('2d')
@@ -91,7 +28,7 @@ export default {
       // 第一帧执行的时间
       let startTime
       // 期望动画持续的时间
-      const duration = 2000
+      const duration = 1000
       // 动画被切分成若干段,每一段所占总进度的比例
       const partProportion = 1 / (this.keyPoints.length - 1)
       // 缓存绘制第n段线段的n值,为了在进行下一段绘制前把这一段线段的末尾补齐
@@ -135,6 +72,7 @@ export default {
   position relative
   width 100%
   height 100%
+  background center / 100% auto url('~@/images/area_bg.png') no-repeat
 #lineCanvas
   position absolute
   left 0

src/pages/canvas_back.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="canvas-wrap">
+    <canvas id="lineCanvas" width="645" height="686"></canvas>
+    <canvas id="carCanvas" width="645" height="686"></canvas>
+  </div>
+</template>
+
+<script>
+import Easing from '@config/Easing.js'
+export default {
+  data () {
+    return {
+      keyPoints: [{x: 112, y: 183}, {x: 112, y: 425}, {x: 43, y: 427}, {x: 112, y: 425}]
+    }
+  },
+  mounted () {
+    // setTimeout(() => {
+    //   this.handleCanvasLine()
+    // }, 5000)
+    setTimeout(() => {
+      this.handleCanvasCar()
+    }, 3000)
+  },
+  methods: {
+    handleCanvasLine () {
+      const canvas = document.querySelector('#lineCanvas')
+      const ctx = canvas.getContext('2d')
+      let img = new Image()
+      img.src = require('../images/che.png')
+      // 设置线条样式
+      ctx.lineWidth = 1
+      ctx.lineJoin = 'round'
+      ctx.lineCap = 'round'
+      let prevX = this.keyPoints[0].x
+      let prevY = this.keyPoints[0].y
+      let nextX
+      let nextY
+      // 第一帧执行的时间
+      let startTime
+      // 期望动画持续的时间
+      const duration = 900
+      // 动画被切分成若干段,每一段所占总进度的比例
+      const partProportion = 1 / (this.keyPoints.length - 1)
+      // 缓存绘制第n段线段的n值,为了在进行下一段绘制前把这一段线段的末尾补齐
+      let lineIndexCache = 1
+      // 动画帧绘制方法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 = () => {
+          ctx.strokeStyle = `rgba(${81 + 175 * Math.abs(1 - progress * 2)}, ${160 - 160 * Math.abs(progress * 2 - 1)}, ${255},${1})`
+          ctx.beginPath()
+          ctx.moveTo(prevX, prevY)
+          // 当绘制下一段线段前,把上一段末尾缺失的部分补齐
+          if (lineIndex !== lineIndexCache) {
+            ctx.lineTo(this.keyPoints[lineIndex - 1].x, this.keyPoints[lineIndex - 1].y)
+            lineIndexCache = lineIndex
+          }
+          prevX = nextX = ~~(this.keyPoints[lineIndex - 1].x + ((this.keyPoints[lineIndex]).x - this.keyPoints[lineIndex - 1].x) * partProgress)
+          prevY = nextY = ~~(this.keyPoints[lineIndex - 1].y + ((this.keyPoints[lineIndex]).y - this.keyPoints[lineIndex - 1].y) * partProgress)
+          ctx.lineTo(nextX, nextY)
+          ctx.stroke()
+        }
+        draw()
+        if (progress < 1) {
+          requestAnimationFrame(step)
+        } else {
+          console.log('动画执行完毕')
+        }
+      }
+      requestAnimationFrame(step)
+    },
+    handleCanvasCar () {
+      const canvas = document.querySelector('#carCanvas')
+      const ctx = canvas.getContext('2d')
+      let img = new Image()
+      img.src = require('../images/che.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 = () => {
+          ctx.beginPath()
+          ctx.clearRect(0, 0, 400, 500)
+          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)
+          ctx.drawImage(img, nextX - 15, nextY - 50, 30, 50)
+        }
+        draw()
+        if (progress < 1) {
+          requestAnimationFrame(step)
+        } else {
+          console.log('动画执行完毕')
+        }
+      }
+      requestAnimationFrame(step)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.canvas-wrap
+  position relative
+  width 100%
+  height 100%
+  background: center / 100% auto url('~@/images/area_bg.png') no-repeat;
+  // background-color rgb(16, 38, 105)
+#lineCanvas
+  position absolute
+  left 0
+  top 0
+  z-index 10
+#carCanvas
+  position absolute
+  left 0
+  top 0
+  z-index 11
+</style>

src/pages/index.vue

@@ -1,30 +1,61 @@
 <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="zd-row">
-          <div class="zd-col-24 filter-name">站点：10-10-1</div>
+        <!-- <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>
+            <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="zd-col-10 filter-label">目标站点</div>
-            <div class="zd-col-13 filter-value">
-              <el-select v-model="value" placeholder="请选择">
+            <div class="filter-label">起始设备</div>
+            <div class="filter-value">
+              <el-select v-model="sCode" placeholder="请选择">
                 <el-option
-                  v-for="item in options"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
+                  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="zd-col-10 filter-label">物料类型</div>
-            <div class="zd-col-13 filter-value">
-              <el-select v-model="value" placeholder="请选择">
+            <div class="filter-label">目标设备</div>
+            <div class="filter-value">
+              <el-select v-model="nCode" placeholder="请选择">
                 <el-option
-                  v-for="item in options"
+                  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="请选择">
+                <el-option
+                  v-for="item in options2"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
@@ -33,50 +64,69 @@
             </div>
           </div>
           <div class="zd-row jcflexend button-wrap">
-            <button class="button btn-primary">确认下料</button>
+            <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="zd-col-10 filter-label">区域</div>
-            <div class="zd-col-13 filter-value">
-              <el-select v-model="value" placeholder="请选择">
+            <div class="filter-label">设备</div>
+            <div class="filter-value">
+              <el-select v-model="code" placeholder="请选择">
                 <el-option
-                  v-for="item in options"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
+                  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">区域管控</button>
+            <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="zd-col-24 filter-value">
-              <el-select v-model="value" placeholder="请选择">
+            <div class="filter-label">区域</div>
+            <div class="filter-value">
+              <el-select v-model="area" placeholder="请选择">
                 <el-option
-                  v-for="item in options"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
+                  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="zd-row button-wrap">
-          <button class="zd-col-4 button button_s btn-primary">取消</button>
-          <button class="zd-col-6 button button_s btn-primary">强制完成</button>
-          <button class="zd-col-6 button button_s btn-primary">放货确认</button>
-          <button class="zd-col-6 button button_s btn-primary" @click="handleCanvasBG">卸货确认</button>
+        <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="请选择">
+                <el-option
+                  v-for="item in options4"
+                  :key="item.task_id"
+                  :label="item.task_id"
+                  :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="r-wrap" @click="rectClick">
-        <!-- <t-canvas></t-canvas> -->
+        <t-canvas></t-canvas>
       </div>
     </div>
   </div>
@@ -84,57 +134,171 @@
 
 <script>
 import TCanvas from './canvas.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 {
   components: {
     TCanvas
   },
   data () {
     return {
-      options: [{
-        value: '选项1',
-        label: '黄金糕'
-      }],
-      value: '',
-      points: [[160, 200], [60, 200], [60, 400], [160, 400]],
-      mapCoordinateList: [{x: 160, y: 200}, {x: 60, y: 200}, {x: 60, y: 400}, {x: 160, y: 400}]
+      options1: [],
+      sCode: '',
+      nCode: '',
+      code: '',
+      options2: [],
+      mType: '',
+      options3: [],
+      area: '',
+      options4: [],
+      task: '',
+      disabled1: false,
+      disabled2: false,
+      disabled3: false,
+      disabled4: false,
+      disabled5: false
     }
   },
+  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._queryAreas()
+    this._queryTaskIds()
+  },
   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')
+    },
+    async _queryAllPoints () {
+      let res = await queryAllPoints()
+      this.options1 = [...res.data]
+    },
+    async _queryMaterials () {
+      let res = await queryMaterials()
+      this.options2 = [...res.data]
+    },
+    async _queryAreas () {
+      let res = await queryAreas()
+      this.options3 = [...res.data]
+    },
+    async _queryTaskIds () {
+      let res = await queryTaskIds()
+      this.options4 = [...res.data]
+    },
+    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
+      }
+    },
     rectClick () {
       var ev = window.event
-      // 获取相对于当前所指向对象的位置坐标
-      alert('x:' + ev.offsetX + 'y:' + ev.offsetY)
-    },
-    // handleCanvasBG () {
-    //   this.points.forEach(([x, y]) => {
-    //     this.drawDot(x, y)
-    //   })
-    // },
-    // drawDot (x1, y1, r) {
-    //   const myContext = document.getElementById('canvasBG')
-    //   const ctx = myContext.getContext('2d')
-    //   // ctx.save()
-    //   ctx.beginPath()
-    //   ctx.fillStyle = 'red'
-    //   ctx.arc(x1, y1, r)
-    // },
-    handleCanvasBG () {
-      const myContext = document.getElementById('canvasBG')
-      const ctx = myContext.getContext('2d')
-      ctx.beginPath()
-      this.mapCoordinateList.forEach((item, index) => {
-        if (index + 1 < this.mapCoordinateList.length) {
-          ctx.moveTo(item.x, item.y)
-          ctx.lineTo(this.mapCoordinateList[index + 1].x, this.mapCoordinateList[index + 1].y)
-          ctx.strokeStyle = 'yellow'
-          ctx.lineWidth = '20'
-          ctx.lineCap = 'round'
-        } else {
-          // ctx.moveTo(item.x, item.y)
-          // ctx.lineTo(this.mapCoordinateList[0].x, this.mapCoordinateList[0].y)
-        }
-      })
-      ctx.stroke()
+      console.log('x:' + ev.offsetX + 'y:' + ev.offsetY)
     }
   }
 }

src/pages/setup.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="zd-row flexcol jccenter contianer">
+    <div class="header-wrap"><h1>生产控制中心</h1></div>
+    <h1>配置</h1>
+    <div class="setup-wrap">
+      <div class="zd-row">
+        <div class="filter-label">域名地址</div>
+        <input type="text" class="filter-value" v-model="baseUrl">
+      </div>
+      <div class="zd-row button-wrap">
+        <button class="zd-col-24 button btn-primary" @click="_config">配置</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      baseUrl: this.$store.getters.baseUrl
+      // setTime: this.$store.getters.setTime / 1000
+    }
+  },
+  methods: {
+    _config () {
+      // if (this.setTime > 10800) {
+      //   this.$message({
+      //     message: '刷新时间设置过长',
+      //     type: 'warning'
+      //   })
+      //   return
+      // }
+      let obj = {
+        baseUrl: this.baseUrl
+        // setTime: this.setTime * 1000
+      }
+      this.$store.dispatch('setConfig', obj)
+      this.$router.push('/index')
+      let element = document.documentElement
+      if (!(document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement)) {
+        if (element.requestFullscreen) {
+          element.requestFullscreen()
+        } else if (element.webkitRequestFullScreen) {
+          element.webkitRequestFullScreen()
+        } else if (element.mozRequestFullScreen) {
+          element.mozRequestFullScreen()
+        } else if (element.msRequestFullscreen) {
+          // IE11
+          element.msRequestFullscreen()
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@style/mixin'
+h1
+  font-family: "YouSheBiaoTiHei";
+  letter-spacing: .2rem;
+  _font(.24rem, .3rem, #fff, 400,center)
+  margin-bottom .2rem
+.setup-wrap
+  width 4rem
+  background-color rgb(16, 38, 105)
+  padding .2rem
+.filter-value
+  color #333
+  text-align left
+  padding 0 .1rem
+</style>

src/router/index.js

@@ -1,6 +1,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')
 Vue.use(Router)
 
@@ -8,7 +9,11 @@ export default new Router({
   routes: [
     {
       path: '/',
-      redirect: '/index'
+      redirect: '/setup'
+    },
+    {
+      path: '/setup',
+      component: Setup
     },
     {
       path: '/index',

src/style/layout.styl

@@ -5,6 +5,32 @@
   src: url('iconfont/iconfont.woff2') format('woff2'),
        url('iconfont/iconfont.woff') format('woff'),
        url('iconfont/iconfont.ttf') format('truetype');
+@font-face {
+  font-family: "YouSheBiaoTiHei";
+  src: url('font/YouSheBiaoTiHei.ttf') format('truetype');
+}
+// @font-face {
+//   font-family: "SourceHanSansCN-Bold";
+//   src: url('font/SourceHanSansCN-Bold.otf') format('truetype');
+// }
+// @font-face {
+//   font-family: "SourceHanSansCN-Regular";
+//   src: url('font/SourceHanSansCN-Regular.otf') format('truetype');
+// }
+// @font-face {
+//   font-family: "SourceHanSansCN-Medium";
+//   src: url('font/SourceHanSansCN-Medium.otf') format('truetype');
+// }
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon-guanbi:before {
+  content: "\e60f";
+}
 
 // 下拉框
 .el-select {
@@ -14,70 +40,138 @@
   font-size: .16rem;
 }
 .el-input__inner {
-  height .4rem;
+  height .34rem;
   font-size: .14rem;
-  line-height: .4rem;
-  // text-align: right;
-  border: 0;
-  background-color: transparent;
-  color: #b0c7e8;
+  line-height: .34rem;
+  border: 1px solid#4980BD;
+  background-color: rgba(45,88,184,0.1);
+  color: #fff;
+  border-radius: 0;
+}
+.el-input__inner:hover, .el-select:hover .el-input__inner {
+  border-color: #21D0F2;
 }
 .el-select-dropdown__item {
-  // text-align: right;
   color: #b0c7e8;
 }
 .el-select-dropdown {
-  border-color: #47567d;
-  background-color: #47567d;
+  border-color: #4980BD;
+  background-color: rgba(7,31,62,0.95);
 }
 .el-popper[x-placement^=bottom] .popper__arrow::after {
-  border-bottom-color: #47567d;
+  top: 0;
+  border-bottom-color: #4980BD;
 }
 .el-popper[x-placement^=bottom] .popper__arrow {
-  border-bottom-color: #47567d;
+  border-bottom-color: #4980BD;
+}
+.el-icon-arrow-up:before {
+  content: ''
+}
+.el-select .el-input .el-select__caret {
+  background: center / 60% auto url('~@/images/arrow.png') no-repeat;
+}
+.el-message__icon {
+  font-size: 16px
+}
+.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
+  background-color: rgba(7,31,62,0.95)
 }
 
 .button-wrap {
-  margin-top: 30px;
+  margin-top: .16rem;
 }
-
 .button {
-  font-size: .16rem;
-  line-height: .4rem;
+  font-size: .14rem;
+  line-height: .3rem;
+  height: .3rem;
   color #fff;
   padding: 0 .1rem
-  border: 1px solid #fff;
-  border-radius: 10px;
+  border: 0;
   background: transparent;
-}
-.button_s {
-  font-size: .12rem;
-  padding: 0 .02rem
+  box-sizing: border-box;
+  margin-left: .1rem;
 }
 .btn-primary {
-  background: linear-gradient(0deg, #005ad2, #00a0ec);
-  border-color: #083a7e;
+  background: linear-gradient(0deg, #126AB2, #57BCF1);
+}
+.btn-primary:disabled {
+  background: linear-gradient(0deg, #6f7f87, #a2a7a7);
+}
+.btn-info {
+  background: linear-gradient(0deg, #6f7f87, #a2a7a7);
 }
 .contianer
   _wh(100%, 100%)
-  padding .15rem
+  // background: center / 100% 100% url('~@/images/bg.jpg') no-repeat;
+  background-color: #153289;
+  overflow hidden
+.header-wrap
+  position fixed
+  z-index 10
+  top 0
+  _wh(100%, .97rem)
+  background: center / 100% 100% url('~@/images/header_bg.png') no-repeat
+  h1
+    _font(.3rem, 0.47rem, #fff,,center)
+    font-family "YouSheBiaoTiHei"
+    letter-spacing: .05rem;
+    text-indent: 0.05rem;
+    text-shadow 0 8px 8px rgba(0,0,0,0.30)
 .content
+  position relative
+  padding .67rem .15rem .15rem .15rem
   _wh(100%, 100%)
 .l-wrap
-  _wh(34%, 100%)
+  _wh(calc(100% - 705px), 100%)
+  overflow auto
 .r-wrap
-  _wh(65%, 100%)
-  background: linear-gradient(90deg, #213a62, #243a63);
-  border-radius: 10px;
+  _wh(700px, 100%)
+  background: center / 100% 100% url('~@/images/item_2_bg.png') no-repeat;
 .item-wrap
   width 100%
-  padding .15rem .08rem
-  background: linear-gradient(90deg, #213a62, #243a63);
-  border-radius: 10px;
-  margin-top: .2rem;
-.filter-name
-  _font(.18rem, 1, #fff, 700,)
+  padding 0.12rem 0.1rem 0.12rem 0.1rem
+  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
-  _font(.16rem, .4rem, #cee4ff,,)
+  width .56rem
+  _font(.14rem, .34rem, #fff,,right)
 .filter-value
-  _font(.14rem, .4rem, #b0c7e8,,right)
+  width calc(100% - .65rem)
+  _font(.14rem, .34rem, #fff,,right)
+.list-wrap
+  _wh(100%, calc(100% - 5.25rem))
+  min-height 1.6rem
+  padding 0.1rem 0.12rem
+  background: center/ 100% 100% url('~@/images/item_bg_1.png') no-repeat;
+  // background-color rgb(16, 38, 105)
+.scroll-tab
+  _font(.14rem, .34rem, #fff,,center)
+  font-family YouSheBiaoTiHei;
+  background-color #1F438A
+.scroll-container
+  height calc(100% - .34rem)
+  overflow hidden
+.scroll-item
+  _font(.14rem, .34rem, #fff,,center)
+  background: rgba(31,46,73,0.9)
+  border 1px solid rgba(122,159,224,0.17)
+.exit_btn
+  position fixed
+  z-index 10
+  left: 0.2rem;
+  top: 0.1rem;
+  opacity: .2;
+  _font(.2rem,.2rem, #fff,,center)

src/style/reset.css

@@ -21,7 +21,7 @@ body, html {
 	-webkit-user-select: auto;
 	-ms-user-select: auto;
 	user-select: auto;
-	background: linear-gradient(358deg, #031229,#1d2b48,#0a122c);
+	background-color: #11337d;
 }
 
 input[type="button"], input[type="submit"], input[type="search"], input[type="reset"], textarea, select{