vis389/src/views/vehicleMent/overview/index.vue

<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.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="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";
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();
      setTimeout(() => {
        this.$refs.seamlessScroll.$refs.wrap.scrollTop =
          this.$refs.seamlessScroll.$refs.wrap.scrollHeight;
      }, 0);
    },
    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);
      }
      // let time = setInterval(() => {
      //   data.isLocationUpdate = Object.assign(
      //     {},
      //     this.data[Math.floor(Math.random() * 5)]
      //   );
      //   data.isLocationUpdate["createTime"] = +new Date();
      //   if (this.scrollList1.length > 20) {
      //     return clearInterval(time);
      //   }
      //   if (data.isLocationUpdate) {
      //     this.setDataList(data.isLocationUpdate);
      //   }
      // }, 1000);
    },
    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: 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>