moral_manage.git

			@@ -2,17 +2,10 @@
			<div style="display: flex; overflow: hidden">
			<div class="left">
			<div class="left-one">
			<a-range-picker
			v-model="timevalue"
			show-time
			@ok="change1()"
			valueFormat="yyyy-MM-DD HH:MM:SS"
			style="width: 175px"
			/>
			<a-select
			ref="select"
			v-model="carvalue"
			style="width: 180px; margin-left: 10px"
			style="width: 180px"
			placeholder="请选择走航车"
			>
			<a-select-option
			@@ -22,6 +15,13 @@
			>{{ 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
			>
			@@ -37,6 +37,9 @@
			/>
			<a-button type="primary" style="margin-left: 10px" @click="selectLu"
			>搜索</a-button
			>
			<a-button type="primary" style="margin-left: 10px" @click="clearPolygon"
			>清除绘制</a-button
			>
			</div>
			<div class="left-two">
			@@ -142,6 +145,22 @@
			</a-modal>
			<div class="right">
			<div id="roadmap" class="roadmap"></div>
			<ul class="drawing-panel">
			<li
			class="bmap-btn bmap-rectangle"
			@click="draw('rectangle')"
			:style="{
			'background-position-y': actNav === 'rectangle' ? '-52px' : '0px',
			}"
			></li>
			<li
			class="bmap-btn bmap-polygon"
			@click="draw('polygon')"
			:style="{
			'background-position-y': actNav === 'polygon' ? '-52px' : '0px',
			}"
			></li>
			</ul>
			</div>
			<div class="fixeds" v-show="showfix === true">
			<div style="font-size: 20px; margin-left: 50px; margin-top: 50px">
			@@ -161,408 +180,628 @@
			</template>

			<script lang="tsx">
			import {Component, Prop, Vue, Model, Watch} from "vue-property-decorator";
			import { Component, Prop, Vue, Model, Watch } from "vue-property-decorator";
			import { get, post } from "@/util/request";
			import * as turf from "@turf/turf";
			import org from "@/util/org";
			import axios from "axios";
			import { jsonp } from 'vue-jsonp'
			import { jsonp } from "vue-jsonp";
			import any = jasmine.any;


			import { da } from "date-fns/locale";
			import { Moment } from "moment";
			import coordtransform from "coordtransform";
			@Component({
			components: {

			}
			components: {},
			})
			export default class road extends Vue {
			private timevalue:any=[]
			private change1(){
			console.log(this.timevalue);
			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() {
			private mounted() {
			let a = coordtransform.bd09togcj02(120.16669577, 33.35188998);
			console.log("bd09togcj02:", coordtransform.gcj02towgs84(a[0], a[1]));
			this.roadmap();
			}
			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 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 (let 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 drawingManager: any;
			private roadmap() {
			this.map = new BMapGL.Map("roadmap", {
			enableMapClick: false, //取消默认窗口
			});
			// 设置地图中心点和缩放级别
			let point = new BMapGL.Point(116.404, 39.915);
			this.map.centerAndZoom("苏州市", 15);
			this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮，地图可以进行放大、缩小s
			this.drawingManager = new BMapGLLib.DrawingManager(this.map, {
			// isOpen: true, // 是否开启绘制模式
			enableCalculate: false, // 绘制是否进行测距测面
			enableSorption: true, // 是否开启边界吸附功能
			sorptiondistance: 20, // 边界吸附距离
			circleOptions: this.styleOptions, // 圆的样式
			polylineOptions: this.styleOptions, // 线的样式
			polygonOptions: this.styleOptions, // 多边形的样式
			rectangleOptions: this.styleOptions, // 矩形的样式
			labelOptions: this.labelOptions, // label样式
			});
			}
			private dataSource: any[] = [];
			private visibleCreateModal1: boolean = false;
			private handleCreateModalCancel1():any{
			this.visibleCreateModal1=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"
			dataIndex: "startPoint",
			align: "center",
			},
			{
			title: "操作",
			customRender: this.opRender
			}
			customRender: this.opRender,
			align: "center",
			},
			];
			private openIn(){
			this.visibleCreateModal1=true;
			private openIn() {
			this.visibleCreateModal1 = true;
			}
			private startLu:any=''
			private endLu:any=''
			private insertCarLu(){
			if(this.carvalue==='请选择走航车'){
			this.$message.warning('添加请先选择走航车!')
			return
			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)=>{
			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()
			})
			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>
			)
			<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 onClick={() => this.canvasbatch(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)=>{
			private deleteDevice(record: any) {
			get("coordinate/deleteCruiserRoad", {
			id: record.coordinateId,
			}).then((res) => {
			console.log(res);
			this.$message.success(res.data.message)
			this.selectLu()
			})
			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 pointshow: boolean = false;
			private batchid: any = 0;
			private batchshow: boolean = false;
			private handleEditbatch(record: any) {
			this.check = false;
			this.startstate = "batch";
			this.batchshow = true;
			// this.selectCar();
			this.batchid = record.coordinateId;
			}
			private handlebatch(){
			this.selectCar()
			this.batchshow=false
			private handlebatch() {
			// this.selectCar()
			this.batchshow = false;
			this.handlenull();
			}
			private handlenull(){
			this.starttime=''
			this.endtime=''
			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=>{
			private insertbatch() {
			console.log("this.starttime", this.starttime);
			console.log("this.starttime", this.endtime);
			post("coordinateDetail/batch", {
			type: "0",
			time1: this.starttime,
			time2: this.endtime,
			coordinateId: this.batchid,
			mac: this.carvalue,
			}).then((res) => {
			console.log(res);
			this.$message.success(res.data.message)
			this.starttime=''
			this.endtime=''
			this.selectCar()
			}))
			this.$message.success(res.data.message);
			this.starttime = "";
			this.endtime = "";
			// this.selectCar()
			});
			}
			private upa=''
			private recordid:any=0
			private handleEditModalVisible(record){
			this.check=false
			this.handlebatch()
			this.startstate='none'
			this.upa='upa'
			this.recordid=record.coordinateId
			if(this.carvalue==='请选择走航车'){
			this.$message.warning('请选择走航车')
			return
			private canvasbatch(record: any) {
			let ptsWithin = turf.pointsWithinPolygon(this.multiPt, this.turfPolygon);
			console.log("ptsWithin", ptsWithin);
			let data: { flylon: number; flylat: number }[] = [];
			turf.coordEach(ptsWithin, (currentCoord) => {
			data.push({
			flylon: currentCoord[0],
			flylat: currentCoord[1],
			});
			});
			console.log("data", data);
			this.check = false;
			this.startstate = "batch";
			post("coordinateDetail/batch", {
			type: "1",
			coordinateId: record.coordinateId,
			list: data,
			mac: this.carvalue,
			}).then((res) => {
			console.log(res);
			this.$message.success(res.data.message);
			// this.selectCar()
			});
			}
			private upa = "";
			private recordid: any = 0;
			private handleEditModalVisible(record: any) {
			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
			if (this.timevalue.length === 0) {
			this.$message.warning("请选择时间");
			return;
			}
			post('coordinateDetail/select',{
			coordinateId:record.coordinateId,
			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)
			})
			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)=>{
			console.log(res);
			this.$message.success(res.data.message)
			this.upa=''
			this.dataList=[]
			this.carDate=[]
			this.selectCar()
			})
			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 inupa() {
			this.upa = "";
			// this.selectCar()
			}
			private carvalue:any='请选择走航车'
			private carIndex:any=[]
			private car(){
			get('cruiserInfo/selectCruisers',{
			}).then((res)=>{
			this.carIndex=res.data.data;
			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
			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
			if (this.timevalue.length === 0) {
			this.$message.warning("请选择时间");
			return;
			}
			get('cruiserInfo/getCruiserCompare',{
			mac:this.carvalue,
			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
			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)
			})
			this.carDate = [];
			this.pointshow = false;
			this.setMarker(res);
			});
			}
			private closemess(){
			this.showfix=false
			private closemess() {
			this.showfix = false;
			}
			private carDate:any=[]
			private selectCar(){
			private carDate: any = [];
			private selectCar() {
			console.log(this.timevalue);
			if(this.carvalue==='请选择走航车'){
			this.$message.warning('请选择走航车')
			return
			if (this.carvalue === "请选择走航车") {
			this.$message.warning("请选择走航车");
			return;
			}
			if(this.timevalue.length===0){
			this.$message.warning('请选择时间')
			return
			if (this.timevalue.length === 0) {
			this.$message.warning("请选择时间");
			return;
			}
			get('cruiserInfo/getCruiserInFo',{
			mac:this.carvalue,
			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');
			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)
			})
			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 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), {
			});
			const statePoint = new BMapGL.Point(that.carDate[i].flylon,that.carDate[i].flylat);
			bPoints.push(statePoint)
			that.marker[i] = new BMapGL.Marker(statePoint,{icon:myIcon});
			that.marker[i].customData = {data: that.carDate[i].data,state: that.carDate[i].state};
			//在地图中添加marker
			that.map.addOverlay(that.marker[i]);
			// if(that.check===false){
			that.marker[i].addEventListener("click",function(){
			console.log(that.carDate[i].data,'that.carDate[i].data');
			switch(that.carDate[i].state){
			case '1':
			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'
			}
			}
			}
			}
			}); //监听事件
			// }
			}
			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 styleOptions = {
			strokeColor: "#5E87DB", // 边线颜色
			fillColor: "#5E87DB", // 填充颜色。当参数为空时，圆形没有填充颜色
			strokeWeight: 2, // 边线宽度，以像素为单位
			strokeOpacity: 1, // 边线透明度，取值范围0-1
			fillOpacity: 0.2, // 填充透明度，取值范围0-1
			};
			private labelOptions = {
			borderRadius: "2px",
			background: "#FFFBCC",
			border: "1px solid #E1E1E1",
			color: "#703A04",
			fontSize: "12px",
			letterSpacing: "0",
			padding: "5px",
			};
			private actNav: String = "";
			private clearPolygon() {
			this.drawingManager.clearOverlays();
			}
			private turfPolygon: any = null;
			private draw(drawingType: String) {
			console.log("new BMapGLLib", this.drawingManager);
			this.actNav = drawingType;
			if (
			this.drawingManager._isOpen &&
			this.drawingManager.getDrawingMode() === drawingType
			) {
			this.drawingManager.close();
			} else {
			this.drawingManager.setDrawingMode(drawingType);
			this.drawingManager.open();
			}
			// 监听矩形绘制完成事件
			this.drawingManager.addEventListener("overlaycomplete", (e: any) => {
			// 获取矩形对象
			this.actNav = "";
			const polygon = e.overlay;
			// 获取矩形的四个顶点
			const polygonPoints = polygon.getPath();
			console.log("polygonPoints1", polygonPoints);
			let transformationPoints = polygonPoints.map((coord: any) => {
			const [x, y] = [coord.lng, coord.lat];
			const [lng1, lat1] = coordtransform.bd09togcj02(x, y);
			const [lng2, lat2] = coordtransform.gcj02towgs84(lng1, lat1);
			return { lng: lng2, lat: lat2 };
			});
			console.log("polygonPoints2", transformationPoints);
			this.turfPolygon = turf.polygon([
			transformationPoints.map((item: any) => [item.lng, item.lat]),
			]);
			});
			}
			private multiPt: any = [];
			private setMarker(res: any) {
			const that = this;
			that.carDate = [];
			that.carDataList = [];
			let pointSlint = [];

			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)
			for (let i = 0; i < res.data.data.rsData.length; i++) {
			that.carDate.push(res.data.data.rsData[i]);
			pointSlint.push(res.data.data.rsData[i].data.split("_").map(Number));
			}
			this.multiPt = turf.points([...pointSlint]);
			for (let 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
			let myIcon = new BMapGL.Icon(
			require("@/assets/723cd95f31481a502d495b2d814d658.png"),
			new BMapGL.Size(50, 50),
			{}
			);
			let startIcon = new BMapGL.Icon(
			require("@/assets/start.png"),
			new BMapGL.Size(50, 50),
			{}
			);
			let 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";
			}
			let 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
			let 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()
			}

			private setZoom(bPoints: any) {
			let view = this.map.getViewport(eval(bPoints));
			let mapZoom = view.zoom;
			let centerPoint = view.center;
			this.map.centerAndZoom(centerPoint, mapZoom);
			}
			private selectLuName: any = null;
			private selectLu() {
			let 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>

			@@ -609,4 +848,40 @@
			left: 55%;
			z-index: 999;
			}
			.drawing-panel {
			z-index: 200;
			position: absolute;
			top: 10rem;
			margin-left: 2rem;
			padding-left: 0;
			border-radius: .25rem;
			height: 47px;
			box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
			}
			.bmap-btn {
			border-right: 1px solid #d2d2d2;
			float: left;
			width: 64px;
			height: 100%;
			background-image: url(
			//api.map.baidu.com/library/DrawingManager/1.4/src/bg_drawing_tool.png);
			cursor: pointer;
			list-style: none;
			padding: 0;
			}
			.drawing-panel .bmap-marker {
			background-position: -65px 0;
			}
			.drawing-panel .bmap-polyline {
			background-position: -195px 0;
			}
			.drawing-panel .bmap-rectangle {
			background-position: -325px 0;
			}
			.drawing-panel .bmap-polygon {
			background-position: -260px 0;
			}
			.drawing-panel .bmap-circle {
			background-position: -130px 0;
			}
			</style>