412 lines
11 KiB
Vue
412 lines
11 KiB
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> |