466 lines
13 KiB
Vue
466 lines
13 KiB
Vue
<template>
|
|
<div class="bigScreen-wrap">
|
|
<div v-if="trackPositions.length > 0" id="map"></div>
|
|
<div v-else class="map-box">
|
|
<div></div>
|
|
</div>
|
|
<div class="content-right">
|
|
<div class="content-right_main">
|
|
<div class="content-right_time">
|
|
<div @click="onDayUp">前一天</div>
|
|
<el-date-picker
|
|
v-model="punchCardTime"
|
|
@change="getSafeHatPayDataPage"
|
|
:clearable="false"
|
|
value-format="yyyy-MM-dd"
|
|
type="date"
|
|
size="medium"
|
|
placeholder="选择日期"
|
|
>
|
|
</el-date-picker>
|
|
<div @click="onDayNext">后一天</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="trackPositions.length > 0">
|
|
<el-table
|
|
:data="dataList"
|
|
row-key="id"
|
|
class="tables"
|
|
height="calc(610px - 64px - 64px)"
|
|
>
|
|
<el-table-column
|
|
type="selection"
|
|
align="center"
|
|
width="55"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="detailPlace"
|
|
align="center"
|
|
label="当前位置"
|
|
show-overflow-tooltip
|
|
>
|
|
<template slot-scope="scope">
|
|
经度:{{ scope.row.latitude }} 纬度:{{ scope.row.longitude }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="uploadTime"
|
|
align="center"
|
|
label="上传时间"
|
|
show-overflow-tooltip
|
|
></el-table-column>
|
|
</el-table>
|
|
<pagination
|
|
:total="Number(printInfo.total)"
|
|
:page.sync="printInfo.pageNo"
|
|
:limit.sync="printInfo.pageSize"
|
|
@pagination="getSafeHatPayDataPage"
|
|
:pageSizes="[...$store.state.PAGESIZRS]"
|
|
layout="total,sizes, prev, pager, next, jumper"
|
|
/>
|
|
</div>
|
|
<div v-else class="nodata-box">
|
|
<div class="new-nodata">
|
|
<div></div>
|
|
<span>暂无数据...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getSafeHatPayDataPageApi } from "@/assets/js/api/smartSafeHat/smartSafeHat.js";
|
|
import dayjs from "dayjs";
|
|
// 时间插件
|
|
import duration from "dayjs/plugin/duration";
|
|
dayjs.extend(duration);
|
|
export default {
|
|
props: {
|
|
courseWriterInfo: {
|
|
type: Object,
|
|
default: {},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
myMap: Object,
|
|
marker: Object,
|
|
markerIp: [],
|
|
infoWindow: "",
|
|
footerIndex: 1,
|
|
projectSn: "",
|
|
allProjectData: [],
|
|
mapDialogData: {},
|
|
nowProjectSn: "",
|
|
showRight: true,
|
|
punchCardTime: dayjs().format("YYYY-MM-DD"),
|
|
trackPositions: [],
|
|
printInfo: {
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
total: 0, //总条数
|
|
workTicketId: "",
|
|
},
|
|
dataList: [],
|
|
workerInfo: {},
|
|
workingHour: "",
|
|
};
|
|
},
|
|
mounted() {
|
|
this.projectSn = this.$store.state.projectSn;
|
|
},
|
|
methods: {
|
|
onDayUp() {
|
|
this.punchCardTime = dayjs(this.punchCardTime)
|
|
.subtract(1, "day")
|
|
.format("YYYY-MM-DD");
|
|
this.getSafeHatPayDataPage();
|
|
this.getSafeHatPayDataList();
|
|
},
|
|
onDayNext() {
|
|
this.punchCardTime = dayjs(this.punchCardTime)
|
|
.add(1, "day")
|
|
.format("YYYY-MM-DD");
|
|
this.getSafeHatPayDataPage();
|
|
this.getSafeHatPayDataList();
|
|
},
|
|
// 获取列表信息
|
|
getSafeHatPayDataPage() {
|
|
let data = {
|
|
projectSn: this.projectSn,
|
|
pageNo: this.printInfo.pageNo,
|
|
pageSize: this.printInfo.pageSize,
|
|
// devSn: this.courseWriterInfo.devSn,
|
|
workerInfoId: this.courseWriterInfo.workerId,
|
|
mockDesc: 1,
|
|
uploadTime_begin: dayjs(this.punchCardTime).format(
|
|
"YYYY-MM-DD 00:00:00"
|
|
),
|
|
uploadTime_end: dayjs(this.punchCardTime).format("YYYY-MM-DD 23:59:59"),
|
|
};
|
|
getSafeHatPayDataPageApi(data).then((res) => {
|
|
console.log(res);
|
|
if (res.code == 200) {
|
|
this.dataList = res.result.records.map((item) => {
|
|
return {
|
|
...item,
|
|
};
|
|
});
|
|
this.printInfo.total = res.result.total;
|
|
}
|
|
});
|
|
},
|
|
// 获取列表信息
|
|
getSafeHatPayDataList() {
|
|
let data = {
|
|
projectSn: this.projectSn,
|
|
pageNo: 1,
|
|
pageSize: -1,
|
|
// devSn: this.courseWriterInfo.devSn,
|
|
workerInfoId: this.courseWriterInfo.workerId,
|
|
mockDesc: 1,
|
|
uploadTime_begin: dayjs(this.punchCardTime).format(
|
|
"YYYY-MM-DD 00:00:00"
|
|
),
|
|
uploadTime_end: dayjs(this.punchCardTime).format("YYYY-MM-DD 23:59:59"),
|
|
};
|
|
getSafeHatPayDataPageApi(data).then((res) => {
|
|
console.log(res);
|
|
if (res.code == 200) {
|
|
this.trackPositions = res.result.records.map((item) => {
|
|
return {
|
|
uploadTime: item.uploadTime,
|
|
longitude: item.longitude,
|
|
latitude: item.latitude,
|
|
};
|
|
});
|
|
if (this.trackPositions.length > 0) {
|
|
this.$nextTick(() => {
|
|
this.initMap();
|
|
});
|
|
} else {
|
|
if (this.myMap) {
|
|
this.myMap.destroy(); // 销毁地图实例
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
initMap() {
|
|
this.myMap = new AMap.Map("map", {
|
|
resizeEnable: true,
|
|
// zoom: 5,
|
|
// mapStyle: "amap://styles/blue",
|
|
// rotateEnable: true,
|
|
// pitchEnable: true,
|
|
// pitch: 45,
|
|
// rotation: -15,
|
|
// viewMode: "3D", //开启3D视图,默认为关闭
|
|
// buildingAnimation: true, //楼块出现是否带动画
|
|
// expandZoomRange: true,
|
|
zooms: [3, 20],
|
|
center: [116.333926, 39.997245],
|
|
// layers: [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()],
|
|
});
|
|
let map = this.myMap;
|
|
let path = [
|
|
//每个弧线段有两种描述方式
|
|
[123.436473, 41.819122, 123.436473, 41.819122], //起点
|
|
//第一段弧线
|
|
[123.614055, 41.868599, 123.614055, 41.868599], //控制点，途经点
|
|
//第二段弧线
|
|
[123.920285, 41.888785, 123.920285, 41.888785], //控制点，途经点//弧线段有两种描述方式1
|
|
//第三段弧线
|
|
[124.002702, 41.900995, 124.002702, 41.900995],
|
|
[124.831792, 41.710475, 124.831792, 41.710475],
|
|
[125.024809, 41.74509, 125.024809, 41.74509],
|
|
[125.83533, 41.791955, 125.83533, 41.791955],
|
|
[126.582963, 42.089846, 126.582963, 42.089846],
|
|
|
|
[126.58693, 42.049219, 126.58693, 42.049219],
|
|
[126.90803, 42.061164, 126.90803, 42.061164],
|
|
[127.236139, 42.174976, 127.236139, 42.174976],
|
|
[127.483509, 42.188401, 127.483509, 42.188401],
|
|
[128.155148, 42.473778, 128.155148, 42.473778],
|
|
];
|
|
this.getMapApi();
|
|
// var bezierCurve = new AMap.BezierCurve({
|
|
// path: path,
|
|
// isOutline: true,
|
|
// outlineColor: "#ffeeff",
|
|
// borderWeight: 3,
|
|
// strokeColor: "#3366FF",
|
|
// strokeOpacity: 1,
|
|
// strokeWeight: 6,
|
|
// // 线样式还支持 'dashed'
|
|
// strokeStyle: "solid",
|
|
// // strokeStyle是dashed时有效
|
|
// strokeDasharray: [10, 10],
|
|
// lineJoin: "round",
|
|
// lineCap: "round",
|
|
// zIndex: 50,
|
|
// });
|
|
|
|
// bezierCurve.setMap(map);
|
|
// // 缩放地图到合适的视野级别
|
|
// map.setFitView([bezierCurve]);
|
|
},
|
|
async getMapApi() {
|
|
if (this.trackPositions && this.trackPositions.length) {
|
|
this.createMap(this.trackPositions);
|
|
}
|
|
},
|
|
createMap(data = []) {
|
|
// 清空地图上的轨迹点
|
|
this.myMap.clearMap();
|
|
const paths = data.map((item) => {
|
|
return [item.longitude, item.latitude];
|
|
});
|
|
// 起始地
|
|
const startPosition = paths[0];
|
|
const startIcon = new AMap.Icon({
|
|
size: new AMap.Size(40, 40),
|
|
// image: require("@/assets/images/start-point.png"),
|
|
image: require("@/assets/images/addr_green.png"),
|
|
imageSize: new AMap.Size(40, 40),
|
|
});
|
|
const startMarker = new AMap.Marker({
|
|
position: new AMap.LngLat(
|
|
startPosition[0],
|
|
startPosition[startPosition.length - 1]
|
|
),
|
|
icon: startIcon,
|
|
offset: new AMap.Pixel(-20, -35),
|
|
});
|
|
this.myMap.add([startMarker]);
|
|
|
|
// 目的地
|
|
const endPosition = paths[paths.length - 1];
|
|
const endIcon = new AMap.Icon({
|
|
size: new AMap.Size(40, 40),
|
|
// image: require("@/assets/images/end-point.png"),
|
|
image: require("@/assets/images/addr_red.png"),
|
|
imageSize: new AMap.Size(40, 40),
|
|
});
|
|
const endMarker = new AMap.Marker({
|
|
position: new AMap.LngLat(
|
|
endPosition[0],
|
|
endPosition[endPosition.length - 1]
|
|
),
|
|
icon: endIcon,
|
|
offset: new AMap.Pixel(-20, -35),
|
|
});
|
|
|
|
this.myMap.add([endMarker]);
|
|
const polyline = new AMap.Polyline({
|
|
path: paths,
|
|
strokeColor: "rgb(0, 0, 0)", // 线颜色
|
|
strokeWeight: 5, // 线宽
|
|
strokeOpacity: 0.25, // 线透明度
|
|
});
|
|
this.myMap.add(polyline);
|
|
this.myMap.setFitView(); // 根据地图上添加的轨迹点分布情况，自动缩放地图到合适的视野级别
|
|
},
|
|
},
|
|
watch: {
|
|
courseWriterInfo: {
|
|
handler(val, oldVal) {
|
|
this.getSafeHatPayDataPage();
|
|
this.getSafeHatPayDataList();
|
|
},
|
|
immediate: true,
|
|
deep: true,
|
|
},
|
|
},
|
|
computed: {
|
|
differenceTime() {
|
|
if (this.trackPositions == 0) return "--";
|
|
const dataList = this.trackPositions.sort((a, b) => {
|
|
return dayjs(a.uploadTime).valueOf() - dayjs(b.uploadTime).valueOf();
|
|
});
|
|
const date1 = dayjs(dataList[0].uploadTime);
|
|
const date2 = dayjs(dataList[dataList.length - 1].uploadTime);
|
|
let date = date2.diff(date1, "seconds", true);
|
|
return dayjs.duration(date, "seconds").format("HH小时mm分钟ss秒");
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
/deep/ .pagination-container{
|
|
padding: 16px;
|
|
}
|
|
.nodata-box {
|
|
position: relative;
|
|
height: 400px;
|
|
}
|
|
.tables {
|
|
min-height: initial;
|
|
width: 100%;
|
|
}
|
|
/deep/ .el-table__body {
|
|
width: 100% !important;
|
|
}
|
|
.bigScreen-wrap {
|
|
width: calc(100% - 32px);
|
|
height: 610px;
|
|
position: relative;
|
|
// overflow: hidden;
|
|
display: flex;
|
|
#map {
|
|
width: 714px;
|
|
height: 100%;
|
|
}
|
|
.map-box {
|
|
width: 714px;
|
|
height: 100%;
|
|
background-color: #eff3f7 !important;
|
|
position: relative;
|
|
> div {
|
|
width: 402px;
|
|
height: 402px;
|
|
background-image: url("~@/assets/images/laborManage/nodata-map.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
.content-right {
|
|
width: calc(100% - 714px);
|
|
.content-right_main {
|
|
padding: 0 20px;
|
|
.content-right_time {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20px 0 10px;
|
|
.el-date-editor {
|
|
width: 247px;
|
|
}
|
|
> div:first-child,
|
|
> div:last-child {
|
|
font-weight: 800;
|
|
font-size: 14px;
|
|
color: #2f6bef;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.content-right_user {
|
|
display: flex;
|
|
margin-top: 20px;
|
|
> div:last-child {
|
|
margin-left: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
> div {
|
|
font-size: 14px;
|
|
color: #272d45;
|
|
> span {
|
|
color: #a2a4af;
|
|
margin-right: 12px;
|
|
}
|
|
}
|
|
> div:nth-child(1) {
|
|
font-size: 16px;
|
|
display: flex;
|
|
.is-success {
|
|
padding: 3px 12px;
|
|
background: rgba(52, 199, 89, 0.1);
|
|
border-radius: 3px;
|
|
border: 1px solid #34c759;
|
|
font-size: 12px;
|
|
color: #34c759;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 12px;
|
|
}
|
|
.is-error {
|
|
padding: 3px 12px;
|
|
background: rgba(0, 0, 0, 0.03);
|
|
border-radius: 3px;
|
|
border: 1px solid #b3b3b3;
|
|
font-size: 12px;
|
|
color: #808080;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 12px;
|
|
}
|
|
}
|
|
}
|
|
> img {
|
|
width: 79px;
|
|
height: 91px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-right_title {
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
color: #272d45;
|
|
position: relative;
|
|
padding-left: 10px;
|
|
}
|
|
.content-right_title::after {
|
|
content: "";
|
|
width: 3px;
|
|
height: 15px;
|
|
background: #4181fe;
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
}
|
|
</style> |