刷新

package.json

@@ -25,6 +25,7 @@
     "vue-particles": "^1.0.9",
     "vue-router": "^3.0.1",
     "vue-seamless-scroll": "^1.1.16",
+    "vuedraggable": "^2.24.3",
     "vuex": "^3.0.1",
     "yarn": "^1.22.21"
   },

src/main.js

@@ -3,13 +3,13 @@ import Vue from 'vue'
 import App from './App'
 import router from './router'
 import store from './vuex/store'
-import './style/reset.css'
+// import './style/reset.css'
 import './style/layout.styl'
 import * as echarts from 'echarts'
 import 'default-passive-events'
 import VueParticles from 'vue-particles'
 import scroll from 'vue-seamless-scroll'
-import {Message, Select, Option} from 'element-ui'
+import {Message, Select, Option, Button, Input} from 'element-ui'
 
 Vue.prototype.$echarts = echarts
 Vue.use(VueParticles)
@@ -17,6 +17,8 @@ Vue.use(scroll)
 Vue.prototype.$message = Message
 Vue.use(Select)
 Vue.use(Option)
+Vue.use(Button)
+Vue.use(Input)
 Vue.config.productionTip = false
 /* eslint-disable no-new */
 new Vue({

src/pages/modules/PointStatus.vue

@@ -0,0 +1,75 @@
+<template>
+    <section
+      class="cbox"
+      :style="{
+        backgroundImage: 'url(' + bgUrl + ')'
+      }"
+    >
+      <div
+      v-for="(item, index) in retData"
+      :key="index"
+      class="abox"
+      :style="{
+        width: item.width + 'px',
+        height: item.height + 'px',
+        left: item.x + 'px',
+        top: item.y + 'px',
+        backgroundImage: 'url(' + item.imageUrl + ')'
+      }"
+      >
+      </div>
+    </section>
+</template>
+
+<script>
+import {dwzt} from '@js/mork001.js'
+export default {
+  name: 'PointStatus',
+  data () {
+    return {
+      bgUrl: '',
+      retData: []
+      // retData: [
+      //   {
+      //     'id': 1,
+      //     'type': 'component1',
+      //     'name': '点位1',
+      //     'x': 196,
+      //     'y': 389,
+      //     'width': 100,
+      //     'height': 50,
+      //     'imageUrl': 'https://img2.baidu.com/it/u=2914671817,628443499&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=889'
+      //   }
+      // ],
+    }
+  },
+  mounted () {
+    this.initData()
+  },
+  methods: {
+    async initData () {
+      let res = await dwzt()
+      clearInterval(this.timeOut)
+      this.bgUrl = res.bgUrl
+      this.retData = res.pointArr
+    }
+  }
+}
+</script>
+
+<style scoped>
+.cbox {
+  position: relative;
+  width: 1920px;
+  height: 1080px;
+  text-align: center;
+  background-size: 100% 100%;
+}
+.abox {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  background-size: 100% 100%;
+}
+</style>

src/pages/modules/pointscreen.vue

@@ -170,7 +170,7 @@
         <label></label>
       </div>
       <div v-else>
-        请选择一个组件
+        请选择一个点位
       </div>
     </div>
   </div>
@@ -671,8 +671,9 @@ input {
   background-size: 100% 100%;
 }
 .highlight-border {
-  border: 3px solid #2196f3; /* 蓝色高亮边框 */
-  /* 可选：添加阴影增强效果 */
-  box-shadow: 0 0 8px rgba(33, 150, 243, 0.5);
+  /* border: 3px solid #2196f3; */
+  /* box-shadow: 0 0 8px rgba(33, 150, 243, 0.5); */
+  border: 3px solid #ff0;
+  box-shadow: 0 0 20px rgb(255, 255, 0);
 }
 </style>

src/router/index.js

@@ -7,6 +7,7 @@ const home = r => require.ensure([], () => r(require('@page/modules/home/index')
 // const SortWorkMonitor = r => require.ensure([], () => r(require('@page/modules/SortWorkMonitor')), 'SortWorkMonitor')
 const Weight = r => require.ensure([], () => r(require('@page/modules/Weight')), 'Weight')
 const InStore = r => require.ensure([], () => r(require('@page/modules/InStore')), 'InStore')
+const PointStatus = r => require.ensure([], () => r(require('@page/modules/PointStatus')), 'PointStatus')
 
 Vue.use(Router)
 
@@ -32,6 +33,10 @@ export default new Router({
     {
       path: '/InStore',
       component: InStore
+    },
+    {
+      path: '/PointStatus',
+      component: PointStatus
     }
   ]
 })

yarn.lock

@@ -6396,6 +6396,11 @@ sort-keys@^1.0.0:
   dependencies:
     is-plain-obj "^1.0.0"
 
+sortablejs@1.10.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.10.2.tgz#6e40364d913f98b85a14f6678f92b5c1221f5290"
+  integrity sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A==
+
 source-list-map@^2.0.0:
   version "2.0.0"
   resolved "http://registry.npm.taobao.org/source-list-map/download/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"
@@ -7178,6 +7183,13 @@ vue@^2.5.2:
   resolved "http://registry.npm.taobao.org/vue/download/vue-2.5.17.tgz#0f8789ad718be68ca1872629832ed533589c6ada"
   integrity sha512-mFbcWoDIJi0w0Za4emyLiW72Jae0yjANHbCVquMKijcavBGypqlF7zHRgMa5k4sesdv7hv2rB4JPdZfR+TPfhQ==
 
+vuedraggable@^2.24.3:
+  version "2.24.3"
+  resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-2.24.3.tgz#43c93849b746a24ce503e123d5b259c701ba0d19"
+  integrity sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==
+  dependencies:
+    sortablejs "1.10.2"
+
 vuex@^3.0.1:
   version "3.0.1"
   resolved "http://registry.npm.taobao.org/vuex/download/vuex-3.0.1.tgz#e761352ebe0af537d4bb755a9b9dc4be3df7efd2"