总览状态添加日志默认10条

src/assets/styles/variables.scss

@@ -36,7 +36,7 @@ $base-sub-menu-background:#000c17;
 $base-sub-menu-hover:#001528;
 */
 
-$base-sidebar-width: 200px;
+$base-sidebar-width: 210px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

src/components/ImageUpload/index.vue

@@ -71,6 +71,11 @@ export default {
       type: Boolean,
       default: true,
     },
+    // 是否获取图片宽高
+    isGetPicInfo: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -164,6 +169,27 @@ export default {
           return false;
         }
       }
+      if (this.isGetPicInfo) {
+        const isSize = new Promise((resolve, reject) => {
+          //上传文件为图片类型
+          let img = new Image();
+          img.onload = function () {
+            resolve(img);
+          };
+          img.src = URL.createObjectURL(file);
+        }).then(
+          (res) => {
+            let picInfo = {
+              width: res.width,
+              height: res.height,
+            };
+            this.$emit("getPicInfo", picInfo);
+          },
+          (err) => {
+            return Promise.reject();
+          }
+        );
+      }
       this.loading = this.$loading({
         lock: true,
         text: "上传中",

src/router/index.js

@@ -71,6 +71,18 @@ export const constantRoutes = [
       },
     ]
   },
+  {
+    path: '/vehicleMent',
+    component: (resolve) => require(['@/views/vehicleMent/layout'], resolve),
+    hidden: true,
+    children: [
+      {
+        path: 'overview',
+        component: (resolve) => require(['@/views/vehicleMent/overview/index'], resolve),
+        name: 'overview',
+      },
+    ]
+  },
   {
     path: '/redirect',
     component: Layout,

src/views/vehicleMent/components/bigScreenHead/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="bigScreenHead">
+    <div class="tit">车辆总览</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BigScreenHead",
+  props: {},
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.bigScreenHead {
+  width: 1920px;
+  height: 100px;
+  background-image: url(./bg.png);
+  background-size: 100% 80px;
+  background-repeat: no-repeat;
+  .tit {
+    font-size: 36px;
+    font-family: YouSheBiaoTiHei;
+    color: #91d5fe;
+    line-height: 47px;
+    letter-spacing: 6px;
+    text-align: center;
+    padding-top: 13px;
+  }
+}
+</style>

src/views/vehicleMent/components/rocketTit/index.vue

@@ -0,0 +1,52 @@
+
+
+<template>
+  <div class="rocketTit">
+      <img class="rocket" src="./rocket.png" alt="">
+      <span><slot /></span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RocketTit',
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data () {
+    return {
+
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+.rocket {
+    width: 17.5px;
+    height: 17.5px;
+    margin-right: 10px;
+    vertical-align: middle;
+}
+.rocketTit {
+    font-size: 16px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #FFFFFF;
+    line-height: 22px;
+    vertical-align: middle;
+    span {
+        vertical-align: middle;
+    }
+}
+
+
+</style>

src/views/vehicleMent/components/scaleBox.vue

@@ -0,0 +1,80 @@
+<template>
+  <div style="background-color: #000; height: 100%; width: 100%">
+    <div
+      class="ScaleBox"
+      ref="ScaleBox"
+      :style="{
+        width: width + 'px',
+        height: height + 'px',
+      }"
+    >
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ScaleBox",
+  props: {},
+  data() {
+    return {
+      scale: 0,
+      width: 1920,
+      height: 1080,
+    };
+  },
+  mounted() {
+    this.setScale();
+    window.addEventListener("resize", this.debounce(this.setScale));
+  },
+  methods: {
+    getScale() {
+      const { width, height } = this;
+      const wh = window.innerHeight / height;
+      const ww = window.innerWidth / width;
+      console.log(ww < wh ? ww : wh);
+      return ww < wh ? ww : wh;
+    },
+    setScale() {
+      this.scale = this.getScale();
+      if (this.$refs.ScaleBox) {
+        this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
+      }
+    },
+    debounce(fn, delay) {
+      const delays = delay || 500;
+      let timer;
+      return function () {
+        const th = this;
+        const args = arguments;
+        if (timer) {
+          clearTimeout(timer);
+        }
+        timer = setTimeout(function () {
+          timer = null;
+          fn.apply(th, args);
+        }, delays);
+      };
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+#ScaleBox {
+  --scale: 1;
+}
+.ScaleBox {
+  position: absolute;
+  transform: scale(var(--scale)) translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  transform-origin: 0 0;
+  left: 50%;
+  top: 50%;
+  transition: 0.3s;
+  z-index: 999;
+  // background: rgba(255, 0, 0, 0.3);
+}
+</style>

src/views/vehicleMent/journal.vue

@@ -98,6 +98,11 @@
         align="center"
         prop="distance"
       ></el-table-column>
+      <el-table-column label="车辆状态" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.status == 0 ? "离开" : "进入" }}工房
+        </template>
+      </el-table-column>
       <el-table-column
         label="记录时间"
         align="center"

src/views/vehicleMent/layout.vue

@@ -0,0 +1,94 @@
+<template>
+  <scalseBox>
+    <div class="digScreenLayout">
+      <div class="bg1"></div>
+      <bigScreenHead></bigScreenHead>
+      <router-view class="content" />
+    </div>
+  </scalseBox>
+</template>
+
+<script>
+import scalseBox from "./components/scaleBox.vue";
+import bigScreenHead from "./components/bigScreenHead/index.vue";
+export default {
+  name: "DigScreenLayout",
+  components: {
+    scalseBox,
+    bigScreenHead,
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style>
+.warp-scroll div {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+</style>
+
+<style lang="scss" scoped>
+.digScreenLayout {
+  position: relative;
+  width: 1920px;
+  height: 1080px;
+  background-color: #0d1049;
+  // background-image: url("../img/bg.png");
+  background-size: cover;
+  display: flex;
+  flex-direction: column;
+  .content {
+    flex: 1;
+  }
+  .bg1 {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 1920px;
+    height: 485px;
+    // background-image: url("./img/bg-1.png");
+    background-size: cover;
+  }
+}
+
+.left1 {
+  position: absolute;
+  top: 120px;
+  left: 24px;
+}
+.left2 {
+  position: absolute;
+  top: 345px;
+  left: 24px;
+}
+.center1 {
+  position: absolute;
+  top: 107px;
+  left: 578px;
+}
+
+.right1 {
+  position: absolute;
+  top: 120px;
+  right: 24px;
+}
+.right2 {
+  position: absolute;
+  top: 345px;
+  right: 24px;
+}
+.bottom1 {
+  position: absolute;
+  bottom: 16px;
+  left: 24px;
+}
+.bottom2 {
+  position: absolute;
+  bottom: 16px;
+  right: 24px;
+}
+</style>

src/views/vehicleMent/map.vue

@@ -12,14 +12,20 @@
           <el-input v-model.number="dataInfo.scale"></el-input>
           <span style="color: #818895">px/m</span>
         </el-form-item>
-        <el-form-item label="横轴像素:" prop="xpixel">
+        <!-- <el-form-item label="横轴像素:" prop="xpixel">
           <el-input v-model.number="dataInfo.xpixel"></el-input>
         </el-form-item>
         <el-form-item label="纵轴像素:" prop="ypixel">
           <el-input v-model.number="dataInfo.ypixel"></el-input>
-        </el-form-item>
+        </el-form-item> -->
         <el-form-item label="图片:" prop="pic">
-          <ImageUpload v-model="dataInfo.pic" :isShowTip="false" :limit="1" />
+          <ImageUpload
+            v-model="dataInfo.pic"
+            @getPicInfo="getPicInfo"
+            :isGetPicInfo="true"
+            :isShowTip="false"
+            :limit="1"
+          />
         </el-form-item>
         <el-form-item>
           <el-button
@@ -47,14 +53,14 @@ export default {
           { required: true, message: "请输入比例尺", trigger: "blur" },
           { type: "number", message: "必须为数字值", trigger: "blur" },
         ],
-        xpixel: [
-          { required: true, message: "请输入横轴像素", trigger: "blur" },
-          { type: "number", message: "必须为数字值", trigger: "blur" },
-        ],
-        ypixel: [
-          { required: true, message: "请输入纵轴像素", trigger: "blur" },
-          { type: "number", message: "必须为数字值", trigger: "blur" },
-        ],
+        // xpixel: [
+        //   { required: true, message: "请输入横轴像素", trigger: "blur" },
+        //   { type: "number", message: "必须为数字值", trigger: "blur" },
+        // ],
+        // ypixel: [
+        //   { required: true, message: "请输入纵轴像素", trigger: "blur" },
+        //   { type: "number", message: "必须为数字值", trigger: "blur" },
+        // ],
       },
     };
   },
@@ -62,12 +68,15 @@ export default {
     this.getList();
   },
   methods: {
-    /** 查询岗位列表 */
     getList() {
       mapList().then((response) => {
         this.dataInfo = response.rows[0] || {};
       });
     },
+    getPicInfo(e) {
+      this.dataInfo.xpixel = e.width;
+      this.dataInfo.ypixel = e.height;
+    },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate((valid) => {

src/views/vehicleMent/overview.vue

@@ -1,11 +1,8 @@
 <template>
   <div class="app-container">
     <!-- <scalseBox> -->
-    <div
-      class="content"
-      :style="{ width: dataInfo.xpixel + 'px', height: dataInfo.ypixel + 'px' }"
-      v-loading="loading"
-    >
+    <div class="content" style="width: 100%" v-loading="loading">
+      <!-- :style="{ width: dataInfo.xpixel + 'px', height: dataInfo.ypixel + 'px' }" -->
       <img :src="dataInfo.pic" alt="" class="bg_img" />
       <div
         class="bg_box"
@@ -162,7 +159,7 @@ export default {
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none;
-    // width: 100%;
+    width: 100%;
     // height: 100%;
   }
   .bg_box {

src/views/vehicleMent/overview/center1.vue

@@ -0,0 +1,169 @@
+<template>
+  <container3 title="全厂工房作业信息" :width="1445" :height="975">
+    <div
+      style="
+        width: 100%;
+        height: 100%;
+        margin-top: 10px;
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+      "
+    >
+      <div
+        style="
+          display: inline-block;
+          max-width: 100%;
+          max-height: 100%;
+          position: relative;
+          user-select: none;
+        "
+        v-loading="loading"
+      >
+        <img
+          style="
+            max-width: 100%;
+            max-height: 100%;
+            vertical-align: middle;
+            position: relative;
+          "
+          :src="dataInfo.pic"
+          alt=""
+        />
+        <div
+          class="bg_box"
+          :style="{
+            top: `calc(${100 - item.carOrdinate + '%'} - 26px)`,
+            left: item.carAbscissa
+              ? `calc(${item.carAbscissa + '%'} - 16px)`
+              : 'calc(0% - 16px)',
+          }"
+          v-for="item in vehicleList"
+          :key="item.id"
+        >
+          <i class="el-icon-location"></i>
+        </div>
+      </div>
+    </div>
+  </container3>
+</template>
+<script>
+import { mapList } from "@/api/vehicleMent/map";
+import { bigPicList } from "@/api/vehicleMent/journal";
+import { readerCardList } from "@/api/vehicleMent/reader";
+import container3 from "./components/container3/index.vue";
+export default {
+  components: {
+    container3,
+  },
+  data() {
+    return {
+      loading: true,
+      socket: "",
+      path: "",
+      dataInfo: {},
+      vehicleList: [],
+      cardList: [],
+    };
+  },
+  methods: {
+    getUrl() {
+      this.request({
+        url: "/getSocketUrl",
+        method: "get",
+      }).then((res) => {
+        if (200 == res.code) {
+          this.path = res.msg;
+          this.init();
+        }
+      });
+    },
+    init: function () {
+      if (typeof WebSocket === "undefined") {
+        alert("您的浏览器不支持socket");
+      } else {
+        // 实例化socket
+        this.socket = new WebSocket(this.path);
+        console.log(this.socket);
+        // 监听socket连接
+        this.socket.onopen = this.open;
+        // 监听socket错误信息
+        this.socket.onerror = this.error;
+        // 监听socket消息
+        this.socket.onmessage = this.getMessage;
+      }
+    },
+    open() {
+      console.log("socket连接成功");
+    },
+    error: function () {
+      console.log("连接错误");
+    },
+    getMessage(msg) {
+      const data = JSON.parse(msg.data);
+      if (data.isLocationUpdate) {
+        console.log(data.isLocationUpdate);
+        this.changeAdjustState(data.isLocationUpdate);
+      }
+    },
+    close: function () {
+      console.log("socket已经关闭");
+    },
+    changeAdjustState(obj) {
+      if (this.vehicleList.length > 0) {
+        var res = this.findElem(this.vehicleList, "cardNumber", obj.cardNumber);
+        if (res != "-1") {
+          this.vehicleList.splice(res, 1, obj); // 替换值，如果数组有这个id存在，再次修改的时候覆盖原来的值
+        } else {
+          this.vehicleList.push(obj);
+        }
+      } else {
+        this.vehicleList.push(obj);
+      }
+    },
+    // 判断数组对象中是否有某个值
+    findElem(arrayToSearch, attr, val) {
+      for (var i = 0; i < arrayToSearch.length; i++) {
+        if (arrayToSearch[i][attr] == val) {
+          return i; // 返回当前索引值
+        }
+      }
+      return -1;
+    },
+  },
+  destroyed() {
+    console.log("out");
+    // 销毁监听
+    this.socket.onclose = this.close;
+  },
+  created() {
+    this.loading = true;
+    mapList({
+      pageNum: 1,
+      pageSize: 10,
+      type: "3",
+    }).then((res) => {
+      this.dataInfo = res.rows[0] || {};
+      bigPicList().then((response) => {
+        this.vehicleList = response.data;
+        readerCardList().then((response) => {
+          console.log(response.rows);
+          this.loading = false;
+          this.cardList = response.rows;
+          this.getUrl();
+        });
+      });
+    });
+  },
+};
+</script>
+<style lang="scss" scoped>
+.bg_box {
+  position: absolute;
+  z-index: 2;
+  .el-icon-location {
+    color: yellow;
+    font-size: 30px;
+  }
+}
+</style>

src/views/vehicleMent/overview/components/container3/index.vue

@@ -0,0 +1,152 @@
+
+
+<template>
+  <div
+    class="container3"
+    :style="{ width: width + 'px', height: height + 'px' }"
+  >
+    <div class="tit">
+      <rocketTit>{{ title }}</rocketTit>
+      <div class="datePicker">
+        <slot name="datePicker"></slot>
+      </div>
+    </div>
+    <div class="content">
+      <slot />
+      <div class="spot spot1"></div>
+      <div class="spot spot2"></div>
+      <div class="spot spot3"></div>
+      <div class="spot spot4"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import rocketTit from "../../../components/rocketTit/index.vue";
+
+export default {
+  name: "container3",
+  components: {
+    rocketTit,
+  },
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    width: {
+      type: Number,
+      default: 535,
+    },
+    height: {
+      type: Number,
+      default: 914,
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.container3 {
+  display: flex;
+  flex-direction: column;
+  width: 537px;
+  height: 307px;
+  color: #ffffff;
+  font-size: 16px;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+
+  .tit {
+    padding: 16px 16px 16px 24px;
+    position: relative;
+    .datePicker {
+      position: absolute;
+      right: 16px;
+      top: 12px;
+
+      ::v-deep .el-date-editor {
+        border-radius: 0;
+        box-shadow: none !important;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        vertical-align: middle;
+        color: #fff;
+        background-color: transparent;
+        .el-range-input,
+        .el-range-separator {
+          color: #fff;
+        }
+        .el-range-editor.is-active {
+          border-color: #fff !important;
+        }
+
+        input {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+
+  .content {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    flex: 1;
+    padding: 2px;
+    box-sizing: border-box;
+    position: relative;
+    border-top: 1px solid #91d5fe;
+    border-bottom: 1px solid #91d5fe;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: -7px;
+      left: 0px;
+      display: block;
+      height: 1px;
+      width: 100%;
+      opacity: 0.4;
+      background: #91d5fe;
+    }
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: -7px;
+      left: 0px;
+      display: block;
+      height: 1px;
+      width: 100%;
+      opacity: 0.4;
+      background: #91d5fe;
+    }
+
+    .spot {
+      position: absolute;
+      width: 6px;
+      height: 6px;
+      background-color: #91d5fe;
+      border-radius: 50%;
+    }
+    .spot1 {
+      top: -3px;
+      left: 0;
+    }
+    .spot2 {
+      top: -3px;
+      right: 0;
+    }
+    .spot3 {
+      bottom: -3px;
+      left: 0;
+    }
+    .spot4 {
+      bottom: -3px;
+      right: 0;
+    }
+  }
+}
+</style>

src/views/vehicleMent/overview/index.vue

@@ -0,0 +1,446 @@
+<template>
+  <div class="tab1">
+    <div class="center1">
+      <container3 title="车辆总览" :width="1405" :height="975">
+        <div
+          style="
+            width: 100%;
+            height: 100%;
+            margin-top: 10px;
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+          "
+        >
+          <div
+            style="
+              display: inline-block;
+              max-width: 100%;
+              max-height: 100%;
+              position: relative;
+              user-select: none;
+            "
+            v-loading="loading"
+          >
+            <img
+              style="
+                max-width: 100%;
+                max-height: 100%;
+                vertical-align: middle;
+                position: relative;
+              "
+              :src="dataInfo.pic"
+              alt=""
+            />
+            <div
+              class="bg_box"
+              :style="{
+                top: `calc(${100 - item.ordinate + '%'} - 26px)`,
+                left: item.abscissa
+                  ? `calc(${item.abscissa + '%'} - 16px)`
+                  : 'calc(0% - 16px)',
+              }"
+              v-for="item in cardList"
+              :key="item.id"
+            >
+              <el-tooltip
+                v-model="item.disabled"
+                content="您有一条新消息"
+                placement="top"
+                effect="light"
+                popper-class="x_popper"
+                manual
+              >
+                <!-- :hide-after="3000" -->
+                <!-- manual -->
+                <i class="el-icon-location"></i>
+              </el-tooltip>
+            </div>
+          </div>
+        </div>
+      </container3>
+    </div>
+    <div class="right1">
+      <container3 title="车辆状态" :width="460" :height="975">
+        <div style="max-width: 100%; max-height: 100%; overflow: hidden"></div>
+        <vue-seamless-scroll
+          ref="seamlessScroll"
+          :data="listData"
+          class="warp"
+          :class-option="{
+            step: 0, // 数值越大速度滚动越快
+            limitMoveNum: scrollList1.length > 11 ? scrollList1.length : 11, // 开始无缝滚动的数据量 this.dataList.length
+            hoverStop: true, // 是否开启鼠标悬停stop
+            direction: 1, // 0向下 1向上 2向左 3向右
+            openWatch: true, // 开启数据实时监控刷新dom
+            singleHeight: 84, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+            singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+            waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+          }"
+        >
+          <ul>
+            <li
+              class="item"
+              :class="item.status == 0 ? 'active' : ''"
+              v-for="(item, index) in scrollList1"
+              :key="index"
+            >
+              <div class="item-tit">{{ item.readName }}</div>
+              <div class="item-content">
+                <el-row>
+                  <el-col :span="12"
+                    ><span class="text-tit">车牌号:</span
+                    ><span class="text-val">{{ item.carId }}</span></el-col
+                  >
+                  <el-col :span="12">
+                    <span class="text-tit">车辆状态:</span>
+                    <span class="text-val level1" v-if="item.status == 0"
+                      >离开</span
+                    >
+                    <span class="text-val level2" v-if="item.status == 1"
+                      >进入</span
+                    >
+                  </el-col>
+                </el-row>
+                <el-row>
+                  <el-col :span="24"
+                    ><span class="text-tit">时间:</span
+                    ><span class="text-val">{{
+                      parseTime(item.createTime)
+                    }}</span></el-col
+                  >
+                </el-row>
+              </div>
+            </li>
+          </ul>
+        </vue-seamless-scroll>
+      </container3>
+    </div>
+  </div>
+</template>
+
+<script>
+import container3 from "./components/container3/index.vue";
+import vueSeamlessScroll from "vue-seamless-scroll";
+import { mapList } from "@/api/vehicleMent/map";
+import { bigPicList } from "@/api/vehicleMent/journal";
+import { readerCardList } from "@/api/vehicleMent/reader";
+import { journalList } from "@/api/vehicleMent/journal";
+export default {
+  name: "tab1",
+  components: {
+    container3,
+    vueSeamlessScroll,
+  },
+  data() {
+    return {
+      loading: true,
+      socket: "",
+      path: "",
+      dataInfo: {},
+      vehicleList: [],
+      cardList: [],
+      listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
+      scrollList1: [],
+      data: [
+        {
+          carAbscissa: "49.969116",
+          carId: "皖A 12345",
+          carOrdinate: "59.233448",
+          cardNumber: "0000090759",
+          createTime: 1645148782783,
+          distance: 80,
+          driverName: "小王",
+          driverPhone: "13166778765",
+          lowVoltage: "0",
+          northAngle: 0,
+          readId: 254,
+          readName: "254号读卡器",
+          status: "0",
+        },
+        {
+          carAbscissa: "49.969116",
+          carId: "皖A 12345",
+          carOrdinate: "59.233448",
+          cardNumber: "0000090759",
+          createTime: 1645148782783,
+          distance: 80,
+          driverName: "小王",
+          driverPhone: "13166778765",
+          lowVoltage: "0",
+          northAngle: 0,
+          readId: 254,
+          readName: "254号读卡器",
+          status: "0",
+        },
+      ],
+    };
+  },
+  methods: {
+    getUrl() {
+      this.request({
+        url: "/getSocketUrl",
+        method: "get",
+      }).then((res) => {
+        if (200 == res.code) {
+          this.path = res.msg;
+          this.init();
+        }
+      });
+    },
+    init: function () {
+      if (typeof WebSocket === "undefined") {
+        alert("您的浏览器不支持socket");
+      } else {
+        // 实例化socket
+        this.socket = new WebSocket(this.path);
+        console.log(this.socket);
+        // 监听socket连接
+        this.socket.onopen = this.open;
+        // 监听socket错误信息
+        this.socket.onerror = this.error;
+        // 监听socket消息
+        this.socket.onmessage = this.getMessage;
+      }
+    },
+    open() {
+      console.log("socket连接成功");
+    },
+    error: function () {
+      console.log("连接错误");
+    },
+    setDataList(obj) {
+      this.scrollList1.push(obj);
+      this.listData = Array(this.scrollList1.length).fill(0);
+      this.$refs.seamlessScroll.reset();
+      setTimeout(() => {
+        this.$refs.seamlessScroll.$refs.wrap.scrollTop =
+          this.$refs.seamlessScroll.$refs.wrap.scrollHeight;
+      }, 0);
+      this.setLeftNew(obj);
+    },
+    setLeftNew(obj) {
+      this.cardList.map((item) => {
+        if (item.id == obj.readId) {
+          item.disabled = true;
+          setTimeout(() => {
+            item.disabled = false;
+          }, 3000);
+        }
+      });
+    },
+    getMessage(msg) {
+      let data = JSON.parse(msg.data);
+      if (data.isLocationUpdate) {
+        this.setDataList(data.isLocationUpdate);
+      }
+      // let time = setInterval(() => {
+      //   data.isLocationUpdate = Object.assign(
+      //     {},
+      //     this.data[Math.floor(Math.random() * 2)]
+      //   );
+      //   if (this.scrollList1.length > 20) {
+      //     return clearInterval(time);
+      //   }
+      //   if (data.isLocationUpdate) {
+      //     this.setDataList(data.isLocationUpdate);
+      //   }
+      // }, 5000);
+    },
+    close: function () {
+      console.log("socket已经关闭");
+    },
+    // changeAdjustState(obj) {
+    //   if (this.vehicleList.length > 0) {
+    //     var res = this.findElem(this.vehicleList, "cardNumber", obj.cardNumber);
+    //     if (res != "-1") {
+    //       this.vehicleList.splice(res, 1, obj); // 替换值，如果数组有这个id存在，再次修改的时候覆盖原来的值
+    //     } else {
+    //       this.vehicleList.push(obj);
+    //     }
+    //   } else {
+    //     this.vehicleList.push(obj);
+    //   }
+    // },
+    // // 判断数组对象中是否有某个值
+    // findElem(arrayToSearch, attr, val) {
+    //   for (var i = 0; i < arrayToSearch.length; i++) {
+    //     if (arrayToSearch[i][attr] == val) {
+    //       return i; // 返回当前索引值
+    //     }
+    //   }
+    //   return -1;
+    // },
+  },
+  destroyed() {
+    console.log("out");
+    // 销毁监听
+    this.socket.onclose = this.close;
+  },
+  created() {
+    this.loading = true;
+    mapList({
+      pageNum: 1,
+      pageSize: 10,
+      type: "3",
+    }).then((res) => {
+      this.dataInfo = res.rows[0] || {};
+      readerCardList().then((response) => {
+        this.cardList = response.rows.map((item) => {
+          return { ...item, disabled: false };
+        });
+        this.loading = false;
+        this.getUrl();
+        journalList({ pageNum: 1, pageSize: 10 }).then((response) => {
+          this.scrollList1 = response.rows;
+        });
+      });
+      // bigPicList().then((response) => {
+      //   this.vehicleList = response.data;
+      // });
+    });
+  },
+};
+</script>
+<style lang="scss">
+.x_popper {
+  background-color: #3765af !important;
+  border: 0 !important;
+  color: #fff;
+  .popper__arrow {
+    border-top-color: #3765af !important;
+    &::after {
+      border-top-color: #3765af !important;
+    }
+  }
+}
+</style>
+<style lang="scss" scoped>
+.center1 {
+  position: absolute;
+  top: 86px;
+  left: 24px;
+}
+.right1 {
+  position: absolute;
+  top: 86px;
+  left: 1436px;
+}
+.bg_box {
+  position: absolute;
+  z-index: 2;
+  .el-icon-location {
+    color: yellow;
+    font-size: 30px;
+  }
+}
+.warp {
+  height: 890px;
+  margin: 10px auto 0 auto;
+  padding-right: 10px;
+  // overflow: hidden;
+  overflow: auto;
+  // 自定义滚动条
+  &::-webkit-scrollbar {
+    // display: none;
+  }
+  &::-webkit-scrollbar {
+    width: 6px;
+    // height: 640px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 3px;
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: rgba(255, 255, 255, 1);
+  }
+  &::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.2);
+    border-radius: 0;
+    background: rgba(241, 241, 241, 0.1);
+  }
+  ul {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    list-style: none;
+    padding: 0;
+    margin: 0 auto;
+    .item {
+      display: flex;
+      box-shadow: inset 0px 0px 20px 0px rgba(0, 255, 255, 0.75);
+      background: #0a1047;
+      height: 80px;
+      margin: 0 0 4px 0;
+      &.active {
+        box-shadow: inset 0px 0px 20px 0px #ffd082;
+      }
+      .item-tit {
+        text-align: center;
+        width: 140px;
+        height: 80px;
+        font-size: 18px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #00ffff;
+        line-height: 80px;
+        background: rgba(0, 255, 255, 0.14);
+      }
+      &.active .item-tit {
+        color: #ffd082;
+        background: rgba(255, 208, 130, 0.14);
+      }
+      .item-content {
+        flex: 1;
+        line-height: 30px;
+        padding: 10px;
+      }
+      .text-tit {
+        font-size: 16px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #00ffff;
+        margin-right: 8px;
+      }
+      .text-val {
+        font-size: 14px;
+        font-family: PingFang-SC-Regular, PingFang-SC;
+        font-weight: 400;
+        color: #ffffff;
+      }
+      &.active .text-tit {
+        color: #ffd082;
+      }
+
+      .level1 {
+        display: inline-block;
+        border-radius: 2px;
+        border: 1px solid #f64f58;
+        font-size: 14px;
+        color: #f64f58;
+        line-height: 1;
+        padding: 5px 5px;
+      }
+      .level2 {
+        display: inline-block;
+
+        border-radius: 2px;
+        border: 1px solid #fa8c16;
+        font-size: 14px;
+        color: #fa8c16;
+        line-height: 1;
+        padding: 5px 5px;
+      }
+      .level3 {
+        display: inline-block;
+
+        border-radius: 2px;
+        border: 1px solid #91d5fe;
+        font-size: 14px;
+        color: #91d5fe;
+        line-height: 1;
+        padding: 5px 5px;
+      }
+    }
+  }
+}
+</style>

src/views/vehicleMent/overview/right1.vue

@@ -0,0 +1,300 @@
+<template>
+  <container3 title="全厂作业明细" :width="420" :height="975">
+    <div style="max-width: 100%; max-height: 100%; overflow: hidden"></div>
+    <vue-seamless-scroll
+      ref="seamlessScroll"
+      :data="listData"
+      class="warp"
+      :class-option="{
+        step: 1, // 数值越大速度滚动越快
+        limitMoveNum: scrollList1.length > 11 ? scrollList1.length : 11, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 84, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+      }"
+    >
+      <ul>
+        <li
+          class="item"
+          :class="item.dangerLevel == '一级' ? 'active' : ''"
+          v-for="item in scrollList1"
+          :key="item.id"
+        >
+          <div class="item-tit">{{ item.workHome }}</div>
+          <div class="item-content">
+            <el-row>
+              <el-col :span="12"
+                ><span class="text-tit">车间:</span
+                ><span class="text-val">{{ item.workshop }}</span></el-col
+              >
+              <el-col :span="12"
+                ><span class="text-tit">产品:</span
+                ><span class="text-val">{{ item.product }}</span></el-col
+              >
+            </el-row>
+            <el-row>
+              <el-col :span="12"
+                ><span class="text-tit">工序:</span
+                ><span class="text-val">{{ item.procedure }}</span></el-col
+              >
+              <el-col :span="12">
+                <span class="text-tit">危险级别:</span>
+                <span
+                  class="text-val level1"
+                  v-if="item.dangerLevel == '一级'"
+                  >{{ item.dangerLevel }}</span
+                >
+                <span
+                  class="text-val level2"
+                  v-if="item.dangerLevel == '二级'"
+                  >{{ item.dangerLevel }}</span
+                >
+                <span
+                  class="text-val level3"
+                  v-if="item.dangerLevel == '三级'"
+                  >{{ item.dangerLevel }}</span
+                >
+              </el-col>
+            </el-row>
+          </div>
+        </li>
+      </ul>
+    </vue-seamless-scroll>
+  </container3>
+</template>
+<script>
+import container3 from "./components/container3/index.vue";
+import vueSeamlessScroll from "vue-seamless-scroll";
+export default {
+  components: {
+    container3, //#endregion,
+    vueSeamlessScroll,
+  },
+  data() {
+    return {
+      listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
+      scrollList1: [],
+      data: [
+        {
+          id: 5,
+          workHome: "工房5",
+          workshop: "车间二",
+          product: "产品2",
+          procedure: "工序2",
+          dangerLevel: "一级",
+        },
+        {
+          id: 6,
+          workHome: "工房6",
+          workshop: "车间一",
+          product: "产品3",
+          procedure: "工序3",
+          dangerLevel: "一级",
+        },
+        {
+          id: 7,
+          workHome: "工房7",
+          workshop: "车间一",
+          product: "产品2",
+          procedure: "工序2",
+          dangerLevel: "一级",
+        },
+        {
+          id: 8,
+          workHome: "工房8",
+          workshop: "车间一",
+          product: "产品1",
+          procedure: "工序1",
+          dangerLevel: "一级",
+        },
+        {
+          id: 9,
+          workHome: "工房9",
+          workshop: "车间一",
+          product: "产品1",
+          procedure: "工序1",
+          dangerLevel: "一级",
+        },
+        {
+          id: 10,
+          workHome: "工房10",
+          workshop: "车间一",
+          product: "产品1",
+          procedure: "工序1",
+          dangerLevel: "一级",
+        },
+        {
+          id: 11,
+          workHome: "工房11",
+          workshop: "车间一",
+          product: "产品1",
+          procedure: "工序1",
+          dangerLevel: "一级",
+        },
+        {
+          id: 12,
+          workHome: "工房12",
+          workshop: "车间一",
+          product: "产品1",
+          procedure: "工序1",
+          dangerLevel: "一级",
+        },
+        {
+          id: 13,
+          workHome: "工房13",
+          workshop: "车间一",
+          product: "产品1",
+          procedure: "工序1",
+          dangerLevel: "一级",
+        },
+        {
+          id: 14,
+          workHome: "工房14",
+          workshop: "车间一",
+          product: "产品1",
+          procedure: "工序1",
+          dangerLevel: "一级",
+        },
+        {
+          id: 15,
+          workHome: "工房15",
+          workshop: "车间一",
+          product: "产品1",
+          procedure: "工序1",
+          dangerLevel: "一级",
+        },
+      ],
+    };
+  },
+  methods: {
+    getList() {
+      // 全厂作业明细
+      this.request({
+        url: "/hx/scientificProduction/getHxJobDetailsPic",
+      }).then(({ data }) => {
+        this.scrollList1 = [...data, ...this.data];
+        // this.scrollList1 = data;
+        this.listData = Array(this.scrollList1.length).fill(0);
+        this.$refs.seamlessScroll.reset();
+      });
+    },
+  },
+  created() {
+    this.getList();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.warp {
+  height: 890px;
+  margin: 10px auto 0 auto;
+  overflow: hidden;
+  ul {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    list-style: none;
+    padding: 0;
+    margin: 0 auto;
+    // li,
+    // a {
+    //   display: block;
+    //   display: flex;
+    //   justify-content: space-between;
+    //   font-size: 15px;
+    // }
+    // li {
+    //   font-weight: 400;
+    //   color: #fff;
+    //   display: block;
+    //   height: 80px;
+    //   background: linear-gradient(270deg, rgba(30, 43, 99, 0) 0%, #1e2b63 100%);
+    //   margin: 0 0 4px 0;
+    //   img {
+    //     vertical-align: sub;
+    //     margin-right: 5px;
+    //   }
+    // }
+    .item {
+      display: flex;
+      box-shadow: inset 0px 0px 20px 0px rgba(0, 255, 255, 0.75);
+      background: #0a1047;
+      height: 80px;
+      margin: 0 0 4px 0;
+      &.active {
+        box-shadow: inset 0px 0px 20px 0px #ffd082;
+      }
+      .item-tit {
+        text-align: center;
+        width: 124px;
+        height: 80px;
+        font-size: 18px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #00ffff;
+        line-height: 80px;
+        background: rgba(0, 255, 255, 0.14);
+      }
+      &.active .item-tit {
+        color: #ffd082;
+        background: rgba(255, 208, 130, 0.14);
+      }
+      .item-content {
+        flex: 1;
+        line-height: 30px;
+        padding: 10px 25px;
+      }
+      .text-tit {
+        font-size: 16px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #00ffff;
+        margin-right: 8px;
+      }
+      .text-val {
+        font-size: 14px;
+        font-family: PingFang-SC-Regular, PingFang-SC;
+        font-weight: 400;
+        color: #ffffff;
+      }
+      &.active .text-tit {
+        color: #ffd082;
+      }
+
+      .level1 {
+        display: inline-block;
+        border-radius: 2px;
+        border: 1px solid #f64f58;
+        font-size: 14px;
+        color: #f64f58;
+        line-height: 1;
+        padding: 5px 5px;
+      }
+      .level2 {
+        display: inline-block;
+
+        border-radius: 2px;
+        border: 1px solid #fa8c16;
+        font-size: 14px;
+        color: #fa8c16;
+        line-height: 1;
+        padding: 5px 5px;
+      }
+      .level3 {
+        display: inline-block;
+
+        border-radius: 2px;
+        border: 1px solid #91d5fe;
+        font-size: 14px;
+        color: #91d5fe;
+        line-height: 1;
+        padding: 5px 5px;
+      }
+    }
+  }
+}
+</style>

src/views/vehicleMent/reader.vue

@@ -82,6 +82,7 @@
       <el-table-column label="横坐标" align="center" prop="abscissa" />
       <el-table-column label="纵坐标" align="center" prop="ordinate" />
       <el-table-column label="与正北夹角" align="center" prop="northAngle" />
+      <el-table-column label="区域范围" align="center" prop="recordDistance" />
       <el-table-column label="录入时间" align="center" prop="createTime" />
       <!-- <el-table-column
         label="创建时间"
@@ -158,6 +159,12 @@
             placeholder="请输入与正北夹角"
           />
         </el-form-item>
+        <el-form-item label="区域范围" prop="recordDistance">
+          <el-input
+            v-model.number="form.recordDistance"
+            placeholder="请输入区域范围"
+          />
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -228,6 +235,10 @@ export default {
           { required: true, message: "与正北夹角不能为空", trigger: "blur" },
           { type: "number", message: "必须为数字值", trigger: "blur" },
         ],
+        recordDistance: [
+          { required: true, message: "区域范围不能为空", trigger: "blur" },
+          { type: "number", message: "必须为数字值", trigger: "blur" },
+        ],
       },
     };
   },
@@ -259,6 +270,7 @@ export default {
         abscissa: undefined,
         ordinate: undefined,
         northAngle: undefined,
+        recordDistance: undefined,
       };
       this.resetForm("form");
     },