up

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/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/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/container1/index.vue

@@ -0,0 +1,102 @@
+
+
+<template>
+  <div class="container1">
+    <div class="tit">
+      <rocketTit>{{ title }}</rocketTit>
+      <div class="datePicker">
+        <slot name="datePicker"></slot>
+      </div>
+    </div>
+    <div class="content">
+      <div class="snap">
+        <slot name="snap"></slot>
+      </div>
+
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import rocketTit from "../../../components/rocketTit/index.vue";
+
+export default {
+  name: "container1",
+  components: {
+    rocketTit,
+  },
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.container1 {
+  display: flex;
+  flex-direction: column;
+  width: 537px;
+  height: 597px;
+  background-image: url(./bg.png);
+  background-size: cover;
+  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 {
+    flex: 1;
+    padding: 2px;
+    box-sizing: border-box;
+    overflow: hidden;
+    position: relative;
+    .snap {
+      position: absolute;
+      top: 20px;
+      left: 25px;
+      font-weight: 300;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,102 @@
+
+
+<template>
+  <div class="container2">
+    <div class="tit">
+      <rocketTit>{{ title }}</rocketTit>
+      <div class="datePicker">
+        <slot name="datePicker"></slot>
+      </div>
+    </div>
+    <div class="content">
+      <div class="snap">
+        <slot name="snap"></slot>
+      </div>
+
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import rocketTit from "../../../components/rocketTit/index.vue";
+
+export default {
+  name: "container2",
+  components: {
+    rocketTit,
+  },
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.container2 {
+  display: flex;
+  flex-direction: column;
+  width: 537px;
+  height: 307px;
+  background-image: url(./bg.png);
+  background-size: cover;
+  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 {
+    flex: 1;
+    padding: 2px;
+    box-sizing: border-box;
+    overflow: hidden;
+    position: relative;
+    .snap {
+      position: absolute;
+      top: 20px;
+      left: 25px;
+      font-weight: 300;
+    }
+  }
+}
+</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,390 @@
+<template>
+  <div class="tab1">
+    <div class="center1">
+      <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>
+    </div>
+    <div class="right1">
+      <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.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">{{ item.readName }}</span></el-col
+                  >
+                </el-row>
+                <el-row>
+                  <el-col :span="12"
+                    ><span class="text-tit">时间:</span
+                    ><span class="text-val">{{ item.createTime }}</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>
+              </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";
+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: [
+        {
+          readId: 1,
+          readName: "实际名称1",
+          carId: "车牌号1",
+          // createTime: this.parseTime(new Date(), "{h}:{i}:{s}"),
+          status: 1,
+        },
+        {
+          readId: 2,
+          readName: "实际名称2",
+          carId: "车牌号2",
+          // createTime: this.parseTime(new Date(), "{h}:{i}:{s}"),
+          status: 1,
+        },
+        {
+          readId: 3,
+          readName: "实际名称3",
+          carId: "车牌号3",
+          // createTime: this.parseTime(new Date(), "{h}:{i}:{s}"),
+          status: 0,
+        },
+        {
+          readId: 4,
+          readName: "实际名称4",
+          carId: "车牌号4",
+          // createTime: this.parseTime(new Date(), "{h}:{i}:{s}"),
+          status: 0,
+        },
+        {
+          readId: 5,
+          readName: "实际名称5",
+          carId: "车牌号5",
+          // createTime: this.parseTime(new Date(), "{h}:{i}:{s}"),
+          status: 1,
+        },
+      ],
+    };
+  },
+  methods: {
+    setDataList(obj) {
+      this.scrollList1.push(obj);
+      this.listData = Array(this.scrollList1.length).fill(0);
+      this.$refs.seamlessScroll.reset();
+    },
+    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) {
+      let data = JSON.parse(msg.data);
+      if (data.isLocationUpdate) {
+        this.setDataList(data.isLocationUpdate);
+      }
+      // setInterval(() => {
+      //   data.isLocationUpdate = Object.assign(
+      //     {},
+      //     this.data[Math.floor(Math.random() * 5)]
+      //   );
+      //   data.isLocationUpdate["createTime"] = this.parseTime(
+      //     new Date(),
+      //     "{h}:{i}:{s}"
+      //   );
+      //   if (data.isLocationUpdate) {
+      //     this.setDataList(data.isLocationUpdate);
+      //   }
+      // }, 3000);
+    },
+    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>
+.center1 {
+  position: absolute;
+  top: 86px;
+  left: 24px;
+}
+.right1 {
+  position: absolute;
+  top: 86px;
+  left: 1476px;
+}
+.bg_box {
+  position: absolute;
+  z-index: 2;
+  .el-icon-location {
+    color: yellow;
+    font-size: 30px;
+  }
+}
+.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;
+    .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: 100px;
+        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>