车辆总览交互
This commit is contained in:
熊丽君
@ -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
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="bigScreenHead">
|
||||
<div class="tit">汽车</div>
|
||||
<div class="tit">车辆总览</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -35,15 +35,24 @@
|
||||
<div
|
||||
class="bg_box"
|
||||
:style="{
|
||||
top: `calc(${100 - item.carOrdinate + '%'} - 26px)`,
|
||||
left: item.carAbscissa
|
||||
? `calc(${item.carAbscissa + '%'} - 16px)`
|
||||
top: `calc(${100 - item.ordinate + '%'} - 26px)`,
|
||||
left: item.abscissa
|
||||
? `calc(${item.abscissa + '%'} - 16px)`
|
||||
: 'calc(0% - 16px)',
|
||||
}"
|
||||
v-for="item in vehicleList"
|
||||
v-for="item in cardList"
|
||||
:key="item.id"
|
||||
>
|
||||
<i class="el-icon-location"></i>
|
||||
<el-tooltip
|
||||
v-model="item.disabled"
|
||||
:hide-after="3000"
|
||||
content="您有一条新消息"
|
||||
placement="top"
|
||||
effect="light"
|
||||
>
|
||||
<!-- manual -->
|
||||
<i class="el-icon-location"></i>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -132,53 +141,39 @@ export default {
|
||||
scrollList1: [],
|
||||
data: [
|
||||
{
|
||||
readId: 1,
|
||||
readName: "实际名称1",
|
||||
carId: "车牌号1",
|
||||
// createTime: this.parseTime(new Date(), "{h}:{i}:{s}"),
|
||||
status: 1,
|
||||
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",
|
||||
},
|
||||
{
|
||||
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,
|
||||
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: {
|
||||
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",
|
||||
@ -211,6 +206,26 @@ export default {
|
||||
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) {
|
||||
@ -219,9 +234,8 @@ export default {
|
||||
// let time = setInterval(() => {
|
||||
// data.isLocationUpdate = Object.assign(
|
||||
// {},
|
||||
// this.data[Math.floor(Math.random() * 5)]
|
||||
// this.data[Math.floor(Math.random() * 2)]
|
||||
// );
|
||||
// data.isLocationUpdate["createTime"] = +new Date();
|
||||
// if (this.scrollList1.length > 20) {
|
||||
// return clearInterval(time);
|
||||
// }
|
||||
@ -268,15 +282,16 @@ export default {
|
||||
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();
|
||||
readerCardList().then((response) => {
|
||||
this.cardList = response.rows.map((item) => {
|
||||
return { ...item, disabled: false };
|
||||
});
|
||||
this.loading = false;
|
||||
this.getUrl();
|
||||
});
|
||||
// bigPicList().then((response) => {
|
||||
// this.vehicleList = response.data;
|
||||
// });
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
@ -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");
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user