<template>
|
<div style="display: flex; overflow: hidden">
|
<div class="left">
|
<div class="left-one">
|
<a-select
|
ref="select"
|
v-model="carvalue"
|
style="width: 180px"
|
placeholder="请选择走航车"
|
>
|
<a-select-option
|
v-for="item in carIndex"
|
:key="item.id"
|
:value="item.mac"
|
>{{ item.name }}</a-select-option
|
>
|
</a-select>
|
<a-range-picker
|
:show-time="{ format: 'HH:mm' }"
|
@ok="change1"
|
format="YYYY-MM-DD HH:mm"
|
style="width: 175px; margin-left: 10px"
|
/>
|
|
<a-button type="primary" style="margin-left: 10px" @click="selectCar"
|
>查询</a-button
|
>
|
<a-button type="primary" style="margin-left: 10px" @click="selectCheck"
|
>校验</a-button
|
>
|
</div>
|
<div class="left-five">
|
<a-input
|
style="width: 300px; margin-left: 0px"
|
v-model="selectLuName"
|
placeholder="请输入路段名称"
|
/>
|
<a-button type="primary" style="margin-left: 10px" @click="selectLu"
|
>搜索</a-button
|
>
|
</div>
|
<div class="left-two">
|
<a-table
|
:dataSource="dataSource"
|
:selectedRows="selectedRows"
|
:columns="columns"
|
:pagination="false"
|
:scroll="{ y: 300 }"
|
style="width: 100%"
|
></a-table>
|
</div>
|
<div class="left-three" style="margin-top: 20px">
|
<a-button
|
v-show="upa === ''"
|
type="primary"
|
style="margin-left: 10px; float: right; margin-right: 10px"
|
@click="openIn"
|
>添加</a-button
|
>
|
<a-button
|
v-show="upa === 'upa'"
|
type="primary"
|
style="margin-left: 10px; float: right; margin-right: 10px"
|
@click="inupa"
|
>取消</a-button
|
>
|
<a-button
|
v-show="upa === 'upa'"
|
type="primary"
|
style="margin-left: 10px; float: right; margin-right: 10px"
|
@click="openupa"
|
>修改</a-button
|
>
|
</div>
|
<div
|
class="left-four"
|
style="margin-top: 65px"
|
v-show="batchshow === true"
|
>
|
<a-card title="批量添加" style="width: 500px">
|
<div>
|
<div>
|
<span style="font-size: 15.5px; color: black; margin-left: 50px"
|
>开始时间 :</span
|
>
|
<a-input
|
style="width: 300px; margin-left: 15px"
|
placeholder="请输入开始时间"
|
v-model="starttime"
|
/>
|
</div>
|
<div style="margin-top: 10px; margin-left: 50px">
|
<span style="font-size: 15.5px; color: black">结束时间 :</span>
|
<a-input
|
style="width: 300px; margin-left: 15px"
|
placeholder="请输入结束时间"
|
v-model="endtime"
|
/>
|
</div>
|
</div>
|
<div style="margin-left: 140px; margin-top: 30px">
|
<a-button @click="handlebatch">关闭</a-button>
|
<a-button @click="handlenull">清空</a-button>
|
<a-button type="primary" @click="insertbatch">提交</a-button>
|
</div>
|
</a-card>
|
</div>
|
</div>
|
<a-modal
|
title="路段名添加"
|
:visible="visibleCreateModal1"
|
@cancel="handleCreateModalCancel1"
|
destroyOnClose
|
okText="保存"
|
>
|
<template #footer>
|
<a-button key="back" @click="handleCreateModalCancel1">关闭</a-button>
|
<a-button key="submit" type="primary" @click="insertCarLu"
|
>提交</a-button
|
>
|
</template>
|
<div>
|
<div>
|
<span style="font-size: 17.5px; color: black; margin-left: 50px"
|
>路段名称 :</span
|
>
|
<a-input
|
style="width: 300px; margin-left: 15px"
|
placeholder="请输入路段名称"
|
v-model="startLu"
|
/>
|
</div>
|
<!-- <div style="margin-top: 10px; margin-left: 50px">
|
<span style="font-size: 17.5px; color: black">终点 :</span>
|
<a-input
|
style="width: 300px; margin-left: 15px"
|
placeholder="请输入终点"
|
v-model="endLu"
|
/>
|
</div> -->
|
</div>
|
</a-modal>
|
<div class="right">
|
<div id="roadmap" class="roadmap"></div>
|
</div>
|
<div class="fixeds" v-show="showfix === true">
|
<div style="font-size: 20px; margin-left: 50px; margin-top: 50px">
|
{{ messageshow }}
|
</div>
|
|
<div style="font-size: 20px; margin-left: 50px">
|
<a-button
|
type="primary"
|
style="margin-top: 20px; float: right; margin-right: 20px"
|
@click="closemess"
|
>关闭</a-button
|
>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="tsx">
|
import {Component, Prop, Vue, Model, Watch} from "vue-property-decorator";
|
import { get, post } from "@/util/request";
|
import org from "@/util/org";
|
import axios from "axios";
|
import { jsonp } from 'vue-jsonp'
|
import any = jasmine.any;
|
import { da } from "date-fns/locale";
|
import {Moment} from 'moment';
|
@Component({
|
components: {
|
|
}
|
})
|
export default class road extends Vue {
|
private timevalue:any=[]
|
|
private change1(dates: Moment[]) {
|
this.timevalue=[]
|
this.timevalue=[dates[0].format("YYYY-MM-DD HH:mm"),dates[1].format("YYYY-MM-DD HH:mm")]
|
|
}
|
private mounted() {
|
this.roadmap();
|
}
|
private dateFormat(fmt: string, date: any) {
|
let o = {
|
"M+": date.getMonth() + 1, //月份
|
"d+": date.getDate(), //日
|
"h+": date.getHours(), //小时
|
"m+": date.getMinutes(), //分
|
"s+": date.getSeconds(), //秒
|
"q+": Math.floor((date.getMonth() + 3) / 3), //季度
|
"S": date.getMilliseconds() //毫秒
|
}
|
if (/(y+)/.test(fmt))
|
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
|
for (var k in o)
|
if (new RegExp("(" + k + ")").test(fmt))
|
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)))
|
return fmt
|
}
|
private map:any
|
private roadmap(){
|
this.map = new BMapGL.Map('roadmap')
|
// 设置地图中心点和缩放级别
|
var point = new BMapGL.Point(116.404, 39.915);
|
this.map.centerAndZoom('苏州市', 15);
|
this.map.enableScrollWheelZoom(true) // 开启鼠标滚轮，地图可以进行放大、缩小s
|
}
|
private dataSource: any[] = [];
|
private visibleCreateModal1: boolean = false;
|
private handleCreateModalCancel1():any{
|
this.visibleCreateModal1=false;
|
}
|
private selectedRows: any[] = [];
|
private tableLoading: boolean = false;
|
private columns: any[] = [
|
{
|
title: "序号",
|
dataIndex: "key",
|
key: "key",
|
align: "center",
|
customRender: (text,record,index) => `${index+1}`,
|
width: 60,
|
},
|
{
|
title: "路段名称",
|
dataIndex: "startPoint",
|
align: "center",
|
},
|
{
|
title: "操作",
|
customRender: this.opRender,
|
align: "center",
|
}
|
];
|
private openIn(){
|
this.visibleCreateModal1=true;
|
}
|
private startLu:any=''
|
private endLu:any=''
|
private insertCarLu(){
|
if(this.carvalue==='请选择走航车'){
|
this.$message.warning('添加请先选择走航车!')
|
return
|
}
|
|
post('coordinate/interCruiserRoad',{
|
startPoint:this.startLu,
|
mac:this.carvalue
|
|
}).then((res)=>{
|
console.log(res);
|
this.$message.success(res.data.message)
|
this.visibleCreateModal1=false;
|
this.startLu=''
|
this.endLu=''
|
this.selectLu()
|
})
|
}
|
|
private opRender(text: string, record: any, index: number) {
|
return (
|
<div style="width:180px">
|
<a onClick={() => this.handleEditModalVisible(record)}>
|
{" "}
|
编辑{" "}
|
</a>
|
<a-divider type="vertical"/>
|
<a onClick={() => this.handleEditbatch(record)}>
|
{" "}
|
批量添加{" "}
|
</a>
|
<a-divider type="vertical"/>
|
<a-popconfirm
|
title="确认删除吗？"
|
ok-text="确定"
|
cancel-text="取消"
|
onConfirm={() => this.deleteDevice(record)}
|
>
|
<a href="#">删除</a>
|
</a-popconfirm>
|
</div>
|
)
|
}
|
private deleteDevice(record){
|
get('coordinate/deleteCruiserRoad',{
|
id:record.coordinateId
|
}).then((res)=>{
|
console.log(res);
|
this.$message.success(res.data.message)
|
this.selectLu()
|
})
|
}
|
private pointshow:boolean=false
|
private batchid:any=0
|
private batchshow:boolean=false
|
private handleEditbatch(record){
|
this.check=false
|
this.startstate='batch'
|
this.batchshow=true
|
// this.selectCar();
|
this.batchid=record.coordinateId
|
}
|
private handlebatch(){
|
// this.selectCar()
|
this.batchshow=false
|
this.handlenull();
|
}
|
private handlenull(){
|
this.starttime=''
|
this.endtime=''
|
}
|
private insertbatch(){
|
post('coordinateDetail/batch',{
|
coordinateId:this.batchid,
|
time1:this.starttime,
|
time2:this.endtime,
|
mac:this.carvalue,
|
}).then((res=>{
|
console.log(res);
|
this.$message.success(res.data.message)
|
this.starttime=''
|
this.endtime=''
|
// this.selectCar()
|
}))
|
}
|
private upa=''
|
private recordid:any=0
|
private handleEditModalVisible(record) {
|
console.log('dataList',this.dataList)
|
this.check=false
|
this.handlebatch()
|
this.startstate = 'none'
|
this.dataList=[]
|
this.upa='upa'
|
this.recordid=record.coordinateId
|
if(this.carvalue==='请选择走航车'){
|
this.$message.warning('请选择走航车')
|
return
|
}
|
if(this.timevalue.length===0){
|
this.$message.warning('请选择时间')
|
return
|
}
|
post('coordinateDetail/select',{
|
coordinateId:record.coordinateId,
|
// time1:'2023-08-05 00:00:00',
|
// time2:'2023-08-06 00:00:00',
|
time1:this.timevalue[0],
|
time2:this.timevalue[1],
|
mac:this.carvalue,
|
}).then((res)=>{
|
this.carDate=[]
|
this.pointshow=true
|
this.setMarker(res)
|
})
|
}
|
private openupa(){
|
post('coordinateDetail/insert',{
|
coordinateId:this.recordid,
|
data:this.dataList
|
}).then((res)=>{
|
this.$message.success(res.data.message)
|
this.upa=''
|
this.dataList=[]
|
this.carDate=[]
|
this.selectCar()
|
})
|
}
|
private inupa(){
|
this.upa=''
|
// this.selectCar()
|
}
|
private carvalue:any='请选择走航车'
|
private carIndex:any=[]
|
private car(){
|
get('cruiserInfo/selectCruisers',{
|
}).then((res)=>{
|
this.carIndex=res.data.data;
|
console.log(this.carIndex);
|
})
|
}
|
private check:boolean=false
|
private showfix:boolean=false
|
private messageshow:any=''
|
private selectCheck(){
|
if(this.carvalue==='请选择走航车'){
|
this.$message.warning('请选择走航车')
|
return
|
}
|
if(this.timevalue.length===0){
|
this.$message.warning('请选择时间')
|
return
|
}
|
get('cruiserInfo/getCruiserCompare',{
|
mac:this.carvalue,
|
// time1:'2023-08-05 00:00:00',
|
// time2:'2023-08-06 00:00:00'
|
time1:this.timevalue[0],
|
time2:this.timevalue[1]
|
}).then((res)=>{
|
console.log(res.data.data,'res');
|
this.messageshow=res.data.data.message
|
this.showfix=true
|
// this.check=true
|
this.carDate=[]
|
this.pointshow=false
|
this.setMarker(res)
|
})
|
}
|
private closemess(){
|
this.showfix=false
|
}
|
private carDate:any=[]
|
private selectCar(){
|
console.log(this.timevalue);
|
if(this.carvalue==='请选择走航车'){
|
this.$message.warning('请选择走航车')
|
return
|
}
|
if(this.timevalue.length===0){
|
this.$message.warning('请选择时间')
|
return
|
}
|
console.log("this.timevalue",this.timevalue);
|
get('cruiserInfo/getCruiserInFo',{
|
mac:this.carvalue,
|
// time1:'2023-08-05 00:00:00',
|
// time2:'2023-08-06 00:00:00'
|
time1:this.timevalue[0],
|
time2:this.timevalue[1]
|
}).then((res)=>{
|
console.log(res.data.data,'res');
|
// console.log(this.carDate,'this.carDate');
|
this.carDate=[]
|
this.pointshow=false
|
this.setMarker(res)
|
})
|
}
|
private markerdata:any=[]
|
private marker:any=[]
|
private dataList:any=[]
|
private indataList:any=[]
|
private LudataList:any=[]
|
private carDataList:any=[]
|
private starttime:any=''
|
private endtime:any=''
|
private InfoWindow = null
|
private startstate:any='none'
|
private setMarker(res) {
|
const that=this
|
that.carDate=[]
|
that.carDataList=[]
|
for(var i=0;i<res.data.data.rsData.length;i++){
|
that.carDate.push(res.data.data.rsData[i])
|
}
|
for(var i=0;i<res.data.data.data.length;i++){
|
that.carDataList.push(res.data.data.data[i])
|
}
|
that.map.clearOverlays()
|
let bPoints = []
|
let aPoints = []
|
if (res.status ===200) {
|
for (let i = 0; i < that.carDate.length; i++) {
|
//创建单个point
|
var myIcon = new BMapGL.Icon(require("@/assets/723cd95f31481a502d495b2d814d658.png"), new BMapGL.Size(50, 50), {
|
});
|
var startIcon = new BMapGL.Icon(require("@/assets/start.png"), new BMapGL.Size(50, 50), {
|
});
|
var endIcon = new BMapGL.Icon(require("@/assets/end.png"), new BMapGL.Size(50, 50), {
|
});
|
const statePoint = new BMapGL.Point(that.carDate[i].flylon,that.carDate[i].flylat);
|
bPoints.push(statePoint)
|
if (i === 0) {
|
that.marker[i] = new BMapGL.Marker(statePoint, { icon: startIcon });
|
that.marker[i].customData = { data: that.carDate[i].data, state: that.carDate[i].state };
|
that.marker[i].iconPng='startIcon'
|
} else if (i === that.carDate.length - 1) {
|
that.marker[i] = new BMapGL.Marker(statePoint, { icon: endIcon });
|
that.marker[i].customData = { data: that.carDate[i].data, state: that.carDate[i].state };
|
that.marker[i].iconPng='endIcon'
|
} else {
|
that.marker[i] = new BMapGL.Marker(statePoint,{icon:myIcon});
|
that.marker[i].customData = { data: that.carDate[i].data, state: that.carDate[i].state };
|
that.marker[i].iconPng='myIcon'
|
}
|
var infoWindow ='';
|
//that.marker[i].name = that.carDate[i].time;
|
that.marker[i].on('mouseover', function (e) {
|
infoWindow = new BMapGL.InfoWindow("当前时间:"+that.carDate[i].time);
|
that.map.openInfoWindow(infoWindow, statePoint);
|
})
|
|
that.marker[i].on('mouseout', function (e) {
|
that.map.closeInfoWindow(infoWindow, statePoint);
|
})
|
// that.marker.setTitle(that.carDate[i].time);
|
|
//在地图中添加marker
|
that.map.addOverlay(that.marker[i]);
|
// if(that.check===false){
|
that.marker[i].addEventListener("click",function(){
|
switch(that.carDate[i].state){
|
case '1':
|
console.log('that.marker',that.marker[i])
|
that.marker[i].setIcon(new BMapGL.Icon(require("@/assets/fb259ce2e368f6853a58b91d6f6b293.png"), new BMapGL.Size(50, 50)
|
));
|
that.carDate[i].state='2'
|
break;
|
case '2':
|
that.marker[i].setIcon(new BMapGL.Icon(require("@/assets/723cd95f31481a502d495b2d814d658.png"), new BMapGL.Size(50, 50)
|
));
|
that.carDate[i].state='1'
|
}
|
that.dataList.push({code:that.carDate[i].data,state:that.carDate[i].state});
|
if(that.startstate==='batch'){
|
if(that.starttime!==''&&that.endtime!==''){
|
that.$message.warning('请先清空')
|
return
|
}
|
if(that.starttime===''){
|
that.starttime=that.carDate[i].time
|
}else{
|
that.endtime=that.carDate[i].time
|
}
|
}
|
|
|
for (let i = 0; i < that.dataList.length; i++) {
|
for (let j = i + 1; j < that.dataList.length; j++) {
|
if (that.dataList[i].code == that.dataList[j].code) {
|
that.dataList.splice(j, 1);
|
if(that.dataList[i].state==='1'){
|
that.dataList[i].state='2'
|
}else{
|
that.dataList[i].state='1'
|
}
|
}
|
}
|
}
|
}); //监听事件
|
// }
|
}
|
|
|
for (let i = 0; i < that.carDataList.length; i++) {
|
// console.log(that.carDataList[i],'that.carDataList[i]');
|
//创建单个point
|
var myIcon = new BMapGL.Icon(require("@/assets/fb259ce2e368f6853a58b91d6f6b293.png"), new BMapGL.Size(50, 50));
|
const statePoint = new BMapGL.Point(that.carDataList[i].longitude,that.carDataList[i].latitude);
|
// console.log(statePoint,'statePoint');
|
aPoints.push(statePoint)
|
//将marker保存在data函数中 后续需要使用
|
that.markerdata[i] = new BMapGL.Marker(statePoint,{icon:myIcon});
|
that.markerdata[i].customData = {data: that.carDataList[i].code,state: that.carDataList[i].state,id:that.carDataList[i].id};
|
//在地图中添加marker
|
that.map.addOverlay(that.markerdata[i]);
|
// if(that.check===false){
|
that.markerdata[i].addEventListener("click",function(){
|
switch(that.carDataList[i].state){
|
case '1':
|
that.markerdata[i].setIcon(new BMapGL.Icon(require("@/assets/fb259ce2e368f6853a58b91d6f6b293.png"), new BMapGL.Size(50, 50)
|
));
|
that.carDataList[i].state='2';
|
break;
|
case '2':
|
console.log(123);
|
that.markerdata[i].setIcon(new BMapGL.Icon(require("@/assets/723cd95f31481a502d495b2d814d658.png"), new BMapGL.Size(50, 50)
|
));
|
that.carDataList[i].state='1';
|
break;
|
}
|
that.dataList.push({code:that.carDataList[i].code,state:that.carDataList[i].state,id:that.carDataList[i].id});
|
// console.log(that.dataList);
|
for (let i = 0; i < that.dataList.length; i++) {
|
for (let j = i + 1; j < that.dataList.length; j++) {
|
if (that.dataList[i].code == that.dataList[j].code) {
|
that.dataList.splice(j, 1);
|
if(that.dataList[i].state==='1'){
|
that.dataList[i].state='2'
|
}else{
|
that.dataList[i].state='1'
|
}
|
}
|
}
|
}
|
}); //监听事件
|
// }
|
}
|
|
//重新定义地图的缩放和中心点
|
if(that.pointshow===false){
|
that.setZoom(bPoints)
|
}else{
|
that.setZoom(aPoints)
|
}
|
}
|
}
|
|
private setZoom(bPoints) {
|
var view = this.map.getViewport(eval(bPoints));
|
var mapZoom = view.zoom;
|
var centerPoint = view.center;
|
this.map.centerAndZoom(centerPoint, mapZoom);
|
}
|
private selectLuName:any=null
|
private selectLu(){
|
var macType = null
|
if(this.carvalue!=='请选择走航车'){
|
macType = this.carvalue;
|
}
|
get('coordinate/selectCruiserRoad',{
|
name:this.selectLuName,
|
mac:macType
|
}).then((res)=>{
|
this.dataSource=res.data.data
|
})
|
}
|
private created () {
|
this.car()
|
this.selectLu()
|
}
|
|
}
|
</script>
|
|
<style lang="less">
|
.roadmap {
|
width: 100%;
|
float: right;
|
height: 50rem;
|
}
|
.BMap_cpyCtrl {
|
display: none;
|
}
|
.anchorBL {
|
display: none;
|
}
|
.left {
|
width: 32%;
|
background-color: white;
|
padding: 10px;
|
}
|
.right {
|
width: 68%;
|
}
|
.left-one {
|
margin-top: 5px;
|
height: 60px;
|
border-bottom: 1px dashed gray;
|
}
|
.left-five {
|
margin-top: 20px;
|
}
|
.left-two {
|
margin-top: 10px;
|
}
|
.BMap_Marker.BMap_noprint {
|
width: 23px;
|
}
|
.fixeds {
|
width: 400px;
|
height: 150px;
|
background-color: white;
|
position: fixed;
|
top: 40%;
|
left: 55%;
|
z-index: 999;
|
}
|
</style>
|
