williamet/vis389
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
熊丽君
2022-02-17 15:42:30 +08:00
parent 1f24940da0
commit 662a36c340
18 changed files with 1488 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

390
src/views/vehicleMent/overview/index.vue Normal file
View File

@ -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>