fj-dc-ui/.svn/pristine/da/da81f66c66752aebb047e7f0624c85b280ec8d8f.svn-base

<template>
    <div id="mapToolBarContainer_hhjc">
        <div id="mapTopToolBar">
            <div style="padding-left: 10px;display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
                <!-- <p style="margin-left:0%;margin-right:10px;display:inline;color:rgb(129, 131, 135);">
                    导航:
                </p> -->
                <img src="../assets/qg.png" style="width: 14px;">
                <el-button @click="showPanel('navi')" style="border-radius: 5px;padding: 5px 5px;color:#2C9EFF;margin-left: 5px;border: 0px;" size="medium ">
                    {{currentStatus.currentTitle}}
                    <i :class="this.showXzqPanel ?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
                </el-button>
            </div>
            <div style="width: 1px;height: 10px;background: rgb(190, 190, 190);margin-left: 10px;margin-right: 10px;"></div> 
            <div style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
                <img src="../assets/tool1.png" style="width: 14px;">
                <el-button @click="showToolPanelHandler()" style="border-radius: 5px;padding: 5px 5px;color:#2C9EFF;margin-left: 5px;border: 0px;" size="medium ">
                    工具箱
                     <i :class="this.showToolPanel ?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
                </el-button>
            </div>
            <div style="width: 1px;height: 10px;background: rgb(190, 190, 190);margin-left: 10px;margin-right: 10px;"></div> 
            <!-- <div style="width: 70px;margin-left:40px;display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
                <p style="margin-left:0%;margin-right:10px;display:inline;color:rgb(129, 131, 135);">
                    <i class="el-icon-location"></i>地图工具:
                </p>
                <img src="../assets/distance.png" class="imgClass" title="测距" @click="mapToolHandler('distance')">
                <img src="../assets/area.png" class="imgClass" title="测面" @click="mapToolHandler('area')">
                <img src="../assets/clear.png" class="imgClass" title="清除" @click="mapToolHandler('clear')">
            </div> -->
        </div>
        <div class="xzqPanelClass">
            <div v-if="showXzqPanel" style="width: 314px;background: white;">
                <div style="min-height:30px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;border-bottom:1px solid rgb(240,240,240)">
                    <div style="display:flex;flex-direction:row;">
                        <p style="font-size:14px;margin-left:10px;padding-top: 5px;color:rgb(173,177,192)">当前:</p>
                        <p class="naviClickableLink" v-for="(step,index) in naviStateStack" :key="index" @click="backToStep(step)" style="color:#2C9EFF;font-size:14px;padding-left:5px;">{{step.title}}</p>
                    </div>
                    <!-- <div style="display:flex;flex-direction:row;padding-right: 5px;cursor: pointer;">
                            <span class="el-icon-circle-close-outline" @click="closeNavigationPanel"></span>
                    </div> -->
                </div>
                <div style="display:flex;flex-direction:row;margin-top:5px;">
                    <p style="font-size:small;color:rgb(173,177,192);margin-left:10px;">行政区列表:</p>
                </div>
                <div style="display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:wrap;border-bottom:1px solid rgb(240,240,240);max-height:300px;overflow:auto;"> 
                    <p class="naviClickableLink" style="flex-shrink:1;flex-grow:0;color:#2C9EFF;" v-for="nextxzq in nextLevelXzq" :key="nextxzq.adCode" @click="clickAd(nextxzq)">{{nextxzq.adName}}</p>
                </div>
            </div>
        </div>
        <div class="toolPanelClass">
            <div v-if=showToolPanel>
                <transition name="el-zoom-in-top">
                    <ul role="menu" id="cascader-menu-1602" class="mapRightMenu" style="margin-left: 118px;width: 80px;">
                        <li tabindex="-1" role="menuitem" aria-haspopup="true" aria-owns="menu-8696-1" 
                            class="menuItem" @click="click('fullExtent')">
                            <img src="../assets/fullExtent.png" alt="" style="height:17px;margin-right:5px;">
                            <p class="pClass">全图</p>
                        </li>
                        <li tabindex="-1" role="menuitem" aria-haspopup="true" aria-owns="menu-8696-1" 
                            class="menuItem" @click="click('biaoji')">
                            <img src="../assets/bjR.png" alt="" style="height:17px;margin-right: 9px;margin-left: 5px;">
                            <p class="pClass">标记</p>
                        </li>
                        <li tabindex="-1" role="menuitem" aria-haspopup="true" aria-owns="menu-8696-1" 
                            class="menuItem" @click="click('jietu')">
                            <img src="../assets/bjR.png" alt="" style="height:17px;margin-right: 9px;margin-left: 5px;">
                            <p class="pClass">截图</p>
                        </li>
                        <li tabindex="-1" role="menuitem" aria-haspopup="true" aria-owns="menu-8696-1" 
                            class="menuItem" @click="click('lushu')">
                            <img src="../assets/location.png" alt="" style="height:17px;margin-right: 5px;">
                            <p class="pClass">路书</p>
                        </li>
                        <li tabindex="-1" role="menuitem" aria-haspopup="true" aria-owns="menu-8696-1" 
                            class="menuItem" @click="click('daohang')">
                            <img src="../assets/daohang1.png" alt="" style="height:17px;margin-right:5px;">
                            <p class="pClass">导航</p>
                        </li>
                        <li tabindex="-1" role="menuitem" aria-haspopup="true" aria-owns="menu-8696-1" 
                            class="menuItem" @click="click('chaxun')">
                            <img src="../assets/chaxun.png" alt="" style="height:17px;margin-right:5px;">
                            <p class="pClass">查询</p>
                        </li>
                        <li tabindex="-1" role="menuitem" aria-haspopup="true" aria-owns="menu-8696-1" 
                            class="menuItem" @click="click('measureDistance')">
                            <img src="../assets/distance.png" alt="" style="height:17px;margin-right:5px;">
                            <p class="pClass">测距</p>
                        </li>
                        <li tabindex="-1" role="menuitem" aria-haspopup="true" aria-owns="menu-8696-1" 
                            class="menuItem" @click="click('measureArea')">
                            <img src="../assets/area.png" alt="" style="height:17px;margin-right:5px;">
                            <p class="pClass">测面</p>
                        </li>
                        <li tabindex="-1" role="menuitem" aria-haspopup="true" aria-owns="menu-8696-1" 
                            class="menuItem"  @click="click('clear')">
                            <img src="../assets/clear.png" alt="" style="height:17px;margin-right:5px;">
                            <p class="pClass">清除</p>
                        </li>
                    </ul>
                </transition>
            </div>
        </div>
        <div id="daohangContainer" class="daohangContainerClass" v-if="showDaoHangPanel">
            <div style="height:30px;float:right;">
                <i class="el-icon-close" @click="closeDaoHangPanel" style="padding-right: 5px;color: #dbdbdb;cursor:pointer;"></i>
                <!-- <ul class="tabs dir_tab col3 z-depth-1 clearfix" id="trafficTab">  -->
                    <!-- <li :class="{'trafficActivity':showDaoHanButton=='car'}" style="display: flex;align-items: center;justify-content: center;"> 
                        <img src="../assets/car.png" alt="" @click="chooseTraffic('car')" style="height:19px;width:19px;cursor:pointer;">
                    </li> -->
                    <!-- <li :class="{'trafficActivity':showDaoHanButton=='bus'}" style="display: flex;align-items: center;justify-content: center;"> 
                        <img src="../assets/bus.png" alt="" @click="chooseTraffic('bus')" style="height:20px;width:19px;cursor:pointer;">
                    </li> 
                    <li :class="{'trafficActivity':showDaoHanButton=='walk'}" style="display: flex;align-items: center;justify-content: center;"> 
                        <img src="../assets/walk.png" alt="" @click="chooseTraffic('walk')" style="height:19px;width:24px;cursor:pointer;">
                    </li>  -->
                <!-- </ul> -->
            </div>
            <div style="display: flex;width: 100%;align-items: center;padding-top: 10px;">
                <div>
                    <img src="../assets/jiaohuan.png" alt="" @click="startChangeEndHandler" style="height:40px;width:40px;cursor:pointer;">
                </div>
                <div>
                    <el-input placeholder="请输入起点" v-model="startText" clearable @focus="startFocusHandler"
                        style="padding-bottom: 5px;width: 250px;height: 35px;"></el-input>
                    <el-input placeholder="请输入终点" v-model="endText" clearable @focus="endFocusHandler"
                        style="padding-bottom: 5px;width: 250px;height: 35px;"></el-input>
                </div>
            </div>
            <div style="float: right;padding-top: 10px;padding-right: 30px;">
                <el-button type="primary" v-show="showDaoHanButton == 'car'" @click="trafficButtonClick('car')" size="mini">导航</el-button>
                <el-button type="primary" v-show="showDaoHanButton == 'bus'" @click="trafficButtonClick('bus')" size="mini">公交</el-button>
                <el-button type="primary" v-show="showDaoHanButton == 'walk'" @click="trafficButtonClick('walk')" size="mini">步行</el-button>
            </div>
        </div>
        <div id="poiContainer" class="poiClass" v-if="showPoiList">
            <div class="poiListClass" v-for="(item,index) in pois" :key="index" @click="poiListClick(item)">
                <span style="color: blue;">{{item.name}}</span>
                <!-- <span style="font-size: small;color: #aaaaaa;padding-left: 10px;">{{item.cityname}}{{item.adname}}</span> -->
                <span style="font-size: small;color: #aaaaaa;padding-left: 10px;">{{item.district}}</span>
            </div>
        </div>
        <div id="stepContainer" class="stepClass" v-if="showStepPanel">
            <div style="display:flex;justify-content: space-around;">
                <div style="padding: 5px;padding-top: 10px;">
                    <span>约</span>
                    <span style="color:blue;">{{(trafficSteps.duration/3600).toFixed(1)}}</span>
                    <span>个小时</span>
                </div>
                <div style="margin-top: 13px;width: 2px;height: 15px;background: #000;"></div>
                <div style="padding: 5px;padding-top: 10px;">
                    <span style="color:blue;">{{(trafficSteps.distance/1000).toFixed(1)}}</span>
                    <span>公里</span>
                </div>
                <!-- <div style="margin-top: 13px;width: 1.5px;height: 15px;background: #000;"></div>
                <div style="padding: 5px;padding-top: 10px;">
                    <span>红绿灯</span>
                    <span style="color:red;">{{trafficSteps.traffic_lights}}</span>
                    <span>个</span>
                </div> -->
            </div>
            <div style="padding-left: 20px;">
                <el-collapse accordion>
                    <el-collapse-item v-for="(item,index) in trafficSteps.steps" :key="index">
                        <template slot="title">
                            {{typeof(item.road) == "undefined"?"无名路":item.road}}<span style="padding-left: 20px;color: #938f8f;">{{(item.distance/1000).toFixed(1)}}km</span>
                        </template>
                        <div style="cursor:pointer;" @click="detailRouteOnMap(item)">{{item.instruction}}</div>
                    </el-collapse-item>
                </el-collapse>
            </div>
        </div>
        <div id="biaojiContainer" class="stepClass" v-if="showBiaoJiPanel">
            <div style="padding-left: 20px;">
                <el-collapse accordion>
                    <el-collapse-item v-for="(item,index) in tableResultData" :key="index">
                        <template slot="title">
                            {{item.inteName}}
                        </template>
                        <div style="cursor:pointer;" @click="clickBiaoJiHandler(item)">{{item.des}}</div>
                    </el-collapse-item>
                </el-collapse>
            </div>
        </div>
        <!-- 路书列表 -->
        <div id="luShuListContainer" v-if="showLushuList" style="position: fixed;left: 50px;top: 100px;
            height: 80%;width: 300px;background: #ffffffcc;">
            <div style="height: 30px;background: rgba(0, 126, 246, 0.76);display: flex;justify-content: space-between;
                align-items: center;">
                <p style="color: #fff3f3;padding-left: 5px;">路书列表</p>
                <i @click="closeLushu" style="color: white;padding-right: 5px;cursor: pointer;" class="el-icon-close"></i>
            </div>
            <div :style="{'height':lushuHeight+'px'}" style="overflow-y: auto;">
                <div @click="showLushuDetailFun(item)" v-for="(item,index) in lushuList" :key="index" style="display: flex;border: 1px dashed rgb(0, 156, 250);margin: 5px;cursor: pointer;">
                    <div style="width: 90px;height: 90px;background: #4993fc;margin: 5px;display: flex;align-items: baseline;justify-content: center;">
                        <p style="font-size: 50px;color: white;padding-top: 10px;">{{item.dayCount}}</p>
                        <p style="color: white;">天</p>
                    </div>
                    <div style="width:190px;display: flex;flex-direction: column;justify-content: space-around;">
                        <p style="color: #565151;">{{item.title}}</p>
                        <p style="color: #4295df;">{{item.pass}}</p>
                        <div style="justify-content: space-between;display:flex;">
                            <p style="color: #aaa2a2;font-size: 12px;">{{item.stDate}} / {{item.enDate}}</p>
                            <el-tooltip class="item" effect="light" content="删除" placement="top">
                                <i class="el-icon-delete" style="padding-right: 5px;" @click.stop="deleteLuShuFun(item)"></i>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
            </div>
            <div style="height:80px;display: flex;justify-content: center;">
                <div @click="addLushu" style="width: 95%;height: 100%;align-items: center;display: flex;cursor:pointer;
                    justify-content: center;flex-direction: column;border: 1px dashed #009cfa;">
                    <i class="el-icon-plus"></i>
                    <p>添加路书</p>
                </div>
            </div>
        </div>
        <!-- 路书详情 -->
        <div id="luShuListContainer" v-if="showLushuDetail" style="position: fixed;left: 50px;top: 100px;
            height: 80%;width: 300px;background: #ffffffcc;">
            <div style="height: 100px;background: #22bdac;display: flex;justify-content: space-between;">
                <i @click="lushuBackFun" style="color: white;padding: 10px;cursor: pointer;" class="el-icon-back"></i>
                <div style="padding: 10px;">
                    <p style="color:white;font-size:20px;">{{this.currentLushuBaseInfo.title}}</p>
                    <p style="color: #aaa2a2;font-size: 12px;">{{this.currentLushuBaseInfo.stDate}} / {{this.currentLushuBaseInfo.enDate}}</p>
                </div>
                <el-tooltip class="item" effect="light" content="编辑" placement="top">
                    <i @click="editLushu" style="color: white;padding: 10px;cursor: pointer;" class="el-icon-edit"></i>
                </el-tooltip>
            </div>
            <div :style="{'height':lushuDetailHeight+'px'}" style="overflow-y: auto;">
                <el-collapse v-model="activeNames" accordion @change="lushuDayChangeFun">
                    <el-collapse-item v-for="(item,index) in lushuDayList" :key="index" :name="(index+1).toString()">
                        <template slot="title" style="">
                            <div id="dd" style="display: flex;justify-content: space-between;width: 100%;align-items: center;">
                                <p style="padding-left:5px;font-size:16px;">第{{index+1}}天</p>
                                <div>
                                    <p style="color: #4295df;"><i class="el-icon-location-information" style="padding-right: 5px;"></i>{{item.title}}</p>
                                </div>
                                <el-tooltip class="item" effect="light" content="删除" placement="top">
                                    <i @click="deleteDayFun(item)" class="el-icon-delete" style="padding-right: 5px;"></i>
                                </el-tooltip>
                            </div>
                        </template>
                        <div id="timeLineContainer" style="border: 1px solid rgb(205, 205, 205);background: #eaf7f6;padding: 10px;">
                            <el-timeline>
                                <el-timeline-item v-for="(obj, index1) in lushuDayDetailList" :key="index1"
                                    color="#4295df" size="large" timestamp="">
                                    <div style="justify-content: space-between;display: flex;">
                                        {{index1+1}}.{{obj.name}}
                                        <el-tooltip class="item" effect="light" content="删除" placement="top">
                                            <i class="el-icon-close" style="cursor:pointer;" @click="deletePointFun(obj,index1)"></i>
                                        </el-tooltip>
                                    </div>
                                    <div v-if="obj.distance" @mouseover="showTwoPointRouteOnMap(obj)" @mouseout="clearLayer" style="padding-left: 20px;padding-top: 10px;display: flex;
                                        justify-content: space-between;width: 180px;align-items: center;">
                                        <img style="width: 16px;height: 16px;" src="../assets/car.png" alt="">
                                        <p style="color: #4295df;font-size: 12px;">{{obj.distance>1000?(obj.distance/1000).toFixed(2)+'公里':obj.distance+'米'}}</p>
                                        <p style="color: #4295df;font-size: 12px;">{{'约'+(obj.consuming/3600).toFixed(1)+'小时'}}</p>
                                    </div>
                                </el-timeline-item>
                                <el-timeline-item  color="#4295df" size="large" timestamp="">
                                    <div style="display: flex;height: 100%;align-items: center;cursor:pointer;
                                        font-size: 14px;color: #4295df;" @click="showSearchWidgetFun">
                                        <i class="el-icon-search"></i>
                                        <p>搜索添加新的目的地</p>
                                    </div>
                                </el-timeline-item>
                            </el-timeline>
                            <!-- <div style="display: flex;height: 100%;align-items: center;cursor:pointer;
                                justify-content: center;font-size: 14px;color: #4295df;" @click="showSearchWidgetFun(obj)">
                                <i class="el-icon-search"></i>
                                <p>搜索添加新的目的地</p>
                            </div> -->
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>
            <div style="height:35px;display: flex;justify-content: center;">
                <div @click="addDayToLushuFun" style="width: 95%;height: 100%;align-items: center;display: flex;cursor:pointer;
                    justify-content: center;flex-direction: row;border: 1px dashed #009cfa;">
                    <i class="el-icon-plus"></i>
                    <p>添加一天</p>
                </div>
            </div>
        </div>
        <!-- 添加路书 -->
        <el-dialog title="添加路书" :visible.sync="showAddLushuDialog" width="30%" :modal-append-to-body="false">
            <el-form :model="form">
                <el-form-item label="路书名称:" :label-width="formLabelWidth">
                    <el-input v-model="lushuName" autocomplete="off" style="width:220px;"></el-input>
                </el-form-item>
                <el-form-item label="出发时间:" :label-width="formLabelWidth">
                    <el-date-picker v-model="lushuDate" type="date" placeholder="选择出发日期" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showAddLushuDialog = false">取 消</el-button>
                <el-button type="primary" @click="addLushuHandlerFun">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 编辑路书 -->
        <el-dialog title="编辑路书" :visible.sync="showEditLushuDialog" width="30%" :modal-append-to-body="false">
            <el-form :model="form">
                <el-form-item label="路书名称:" :label-width="formLabelWidth">
                    <el-input v-model="lushuName_edit" autocomplete="off" style="width:220px;"></el-input>
                </el-form-item>
                <el-form-item label="出发时间:" :label-width="formLabelWidth">
                    <el-date-picker v-model="lushuDate_edit" type="date" placeholder="选择出发日期" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showEditLushuDialog = false">取 消</el-button>
                <el-button type="primary" @click="editLushuHandlerFun">确 定</el-button>
            </div>
        </el-dialog>
        <div id="searchWidgetContainer" v-if="showSearchWidget" style="position: fixed;left: 365px;top: 100px;">
            <el-input placeholder="请输入内容" v-model="searchWidgetInput" clearable class="input-with-select" size="medium">
                <!-- <i slot="append" style="cursor:pointer;" class="el-icon-search"></i> -->
                <i slot="append" style="cursor:pointer;" class="el-icon-close" @click="closeSearchWidgetFun"></i>
            </el-input>
            <div id="lushuPoiContainer" style="background-color: #ffffff;margin-top: 5px;" v-if="showLushuPoiList">
                <div class="poiListClass" style="cursor:pointer;" v-for="(item,index) in lushuPois" :key="index" @click="showLushuPoiDetailFun(item)">
                    <i class="el-icon-location-outline"></i>
                    <span style="color: #4295df;">{{item.name}}</span>
                    <!-- <span style="font-size: small;color: #aaaaaa;padding-left: 10px;">{{item.cityname}}{{item.adname}}</span> -->
                    <span style="font-size: small;color: #aaaaaa;padding-left: 10px;">{{item.district}}</span>
                </div>
            </div>
            <div id="lushuPoiDetailContainer" style="background-color: #ffffff;margin-top: 5px;display: flex;
                width: 350px;justify-content: space-between;" v-if="showLushuPoiDetail">
                <div style="width: 84px;height: 84px;padding: 15px;">
                    <img v-if="lushuPoiDetail.photos.length>0" :src="lushuPoiDetail.photos[0].url" alt="" style="width: 100%;height: 100%;">
                </div>
                <div style="width: 186px;">
                    <p style="padding-top: 15px;">1.{{lushuPoiDetail.name}}</p>
                    <p style="padding: 5px;color: #b8b2b2;font-size: 14px;">{{lushuPoiDetail.address}}</p>
                </div>
                <div style="width: 50px;align-items: center;display: flex;justify-content: center;">
                    <el-button @click="addPoiToLushuDayFun" style="color:white;" size='mini' icon="el-icon-plus"></el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

import {mapExtent} from '../config/lyrConfig.js'
import { getAdData} from "../../../api/duChaAPI.js";
import {getMyBiaoJi,getLushuList,addLushuHandler,deleteLushuHandler,getLushuDetail,editLushuHandler,getLushuDayList,
    addPointToDay,addDayToLushu,getPointByDayId,deletePoint,updatePoint,deleteDay} from '../../../api/zhxxAPI.js'
import {_getLngLat} from '../js/mercatorToLngLat'
import request from "../../../utils/gw_ajax_request.js"
import {dateFormat} from "../../../utils/gw_date.js"
import axios from 'axios'

export default {
    components: {
        
    },
    props:['view','map','fullExtent'],
    data () {
        return {
            form:{},
            formLabelWidth:'180px',
            currentCityCode:'',//当前城市编码
            currentText:'',//当前输入的是 起点还是终点
            currentStartLocation:'',//起点经纬度  字符串
            currentEndLocation:'',//终点经纬度
            showDaoHangPanel:false,
            showDaoHanButton:'car',
            startText:'',
            endText:'',
            currentStatus:{
                currentType:'global',
                currentTitle:'全国',
                currentCode:'000000000000',
            },
            naviStateStack:[{title:'全国',type:'global',code:'000000000000'}],
            currentAdCode:'',
            currentAdName:'',
            nextLevelXzq:[],
            showXzqPanel:false,
            showToolPanel:false,
            viewObject:null,
            mapObject:null,
            fullExtent1:null,
            measureGraphicLayer:null,
            measureLengthGraphicLayer_lable:null,
            draw:null,//测量对象
            helpTooltipElement:null,
            measureTooltipElement:null,
            continuePolygonMsg: 'Click to continue drawing the polygon',
            continueLineMsg :'Click to continue drawing the line',
            sketch:null,
            helpTooltip:null,
            measureTooltip:null,
            pois:[],
            showPoiList:false,
            trafficSteps:{},//交通路线
            showStepPanel:false,
            showBiaoJiPanel:false,//标记list
            tableResultData:[],//标记列表
            currentFocus:'',//当前focus位置  起点还是终点

            lushuList:[],//路书列表
            showLushuList:false,//显示路书列表
            lushuHeight:window.innerHeight * 0.8 - 120,
            lushuDetailHeight:window.innerHeight * 0.8 - 140,
            showAddLushuDialog:false,//显示添加路书对话框
            lushuDate:'',//新建路书 出发时间
            lushuName:'',//新建路书 名称
            showLushuDetail:false,//显示路书详情
            currentLushuBaseInfo:{},//当前路书基本信息
            showEditLushuDialog:false,//显示编辑路书对话框
            lushuName_edit:'',
            lushuDate_edit:'',
            lushuDayList:[],//路书日程列表
            activeNames:'1',
            lushuDayDetailList:[],//路书单日行程列表
            showSearchWidget:false,
            searchWidgetInput:'',
            showLushuPoiList:false,//显示路书POI列表
            lushuPois:[],//路书POI列表
            showLushuPoiDetail:false,//显示路书单个POI详情
            lushuPoiDetail:{},//路书POI详情对象   通过高德接口获取
            currentOpenLushuDay:{},//当前打开的路书当中的某一天
        }
    },
    computed:{
		userId: function () {
            return localStorage.getItem("userid") ?localStorage.getItem("userid") : "1098101939614724096";
        },
	},
    mounted:function() {
        this.currentAdCode = localStorage.getItem('areacode') ? localStorage.getItem('areacode') : '000000000000';
        this.currentAdName = localStorage.getItem('areaname') ? localStorage.getItem('areaname') : '全国';
        if(this.currentAdCode == "undefined"){
            this.currentAdCode = '000000000000';
        }
        this.currentStatus.currentCode = this.currentAdCode;
        this.currentStatus.currentTitle = this.currentAdName;
        this.getAdData();
        this.mapObject = this.map;
        this.startText = '';
        this.endText = '';
    },
    watch: {
        map(n,o){
            this.mapObject = n;
        },
        fullExtent(n,o){
            this.fullExtent1 = n;
        },
        startText(n,o){
            this.inputChange(n,'start')
        },
        endText(n,o){
            this.inputChange(n,'end')
        },
        searchWidgetInput(n,o){
            this.searchWidgetInputChange(n);
        }
    },
    methods: {
        hide(){
            this.showXzqPanel = false;
            this.showToolPanel = false;
        },
        closeDaoHangPanel(){
            this.showDaoHangPanel = false;
            this.showPoiList = false;
            this.showStepPanel = false;
            this.showBiaoJiPanel = false;
            this.clearHandler();
        },
        detailRouteOnMap(item){//定位具体路线
            var _self = this;
            var ol = _self.$ol;
            var arr1 = item.tmcs;
            var vertices = [];
            for(var n=0;n<arr1.length;n++){
                var str = arr1[n].polyline;
                var arr2 = str.split(";");
                
                for(var j=0;j<arr2.length;j++){
                    var arr3 = arr2[j].split(",");
                    var arr4 = [];
                    for(var m=0;m<arr3.length;m++){
                        arr4.push(parseFloat(arr3[m]));
                    }
                    vertices.push(ol.proj.transform(arr4, "EPSG:4326", "EPSG:3857"));
                }
            }
            var polyline = new ol.geom.LineString(vertices)
            _self.mapObject.getView().fit(polyline.getExtent())
        },
        showRouteOnMap(){//地图上展示导航路线
            var _self = this;
            var ol = _self.$ol;
            _self.clearHandler();
            var iconStyle_start = new ol.style.Style({
                image: new ol.style.Icon(({
                    anchor: [0.5, 0.5],
                    scale:1,
                    src: '/src/views/zongHeXinXiOl/assets/xhstart.png'
                }))
            });
            var iconStyle_end = new ol.style.Style({
                image: new ol.style.Icon(({
                    anchor: [0.5, 0.5],
                    scale:1,
                    src: '/src/views/zongHeXinXiOl/assets/xhend.png'
                }))
            });
            var symbol_green = new ol.style.Style({
                stroke:new ol.style.Stroke({
                    color: '#00ff00',
                    width: 7,
                    lineCap:'round'
                })
            })
            var symbol_yellow = new ol.style.Style({
                stroke:new ol.style.Stroke({
                    color: '#ffff00',
                    width: 7,
                    lineCap:'round'
                })
            })
            var symbol_red = new ol.style.Style({
                stroke:new ol.style.Stroke({
                    color: '#ff0000',
                    width: 7,
                    lineCap:'round'
                })
            })
            var symbol_red1 = new ol.style.Style({
                stroke:new ol.style.Stroke({
                    color: '#700000',
                    width: 7,
                    lineCap:'round'
                })
            })
            var iconFeature,symbolFeature;
            var features = [];
            var ext = [];
            if(_self.currentStartLocation && _self.currentEndLocation){
                var arr3 = _self.currentStartLocation.split(",");
                var arr4 = [];
                for(var m1=0;m1<arr3.length;m1++){
                    arr4.push(parseFloat(arr3[m1]));
                }
                iconFeature = new ol.Feature({
                    geometry: new ol.geom.Point(ol.proj.transform([arr4[0],arr4[1]], "EPSG:4326", "EPSG:3857")),
                    name: '导航起点'
                });
                iconFeature.setStyle(iconStyle_start);
                features.push(iconFeature);
                
                var arr5 = _self.currentEndLocation.split(",");
                var arr6 = [];
                for(var m2=0;m2<arr5.length;m2++){
                    arr6.push(parseFloat(arr5[m2]));
                }
                ext = [arr4[0],arr4[1],arr6[0],arr6[1]]
                iconFeature = new ol.Feature({
                    geometry: new ol.geom.Point(ol.proj.transform([arr6[0],arr6[1]], "EPSG:4326", "EPSG:3857")),
                    name: '导航终点'
                });
                iconFeature.setStyle(iconStyle_end);
                features.push(iconFeature);
            }
            
            var arr = _self.trafficSteps.steps;
            for(var i=0;i<arr.length;i++){
                var arr1 = arr[i].tmcs;
                for(var n=0;n<arr1.length;n++){
                    var str = arr1[n].polyline;
                    var arr2 = str.split(";");
                    var vertices = [];
                    for(var j=0;j<arr2.length;j++){
                        var arr3 = arr2[j].split(",");
                        var arr4 = [];
                        for(var m=0;m<arr3.length;m++){
                            arr4.push(parseFloat(arr3[m]));
                        }
                        vertices.push(ol.proj.transform(arr4, "EPSG:4326", "EPSG:3857"));
                    }
                    
                    var polyline = new ol.geom.LineString(vertices)
                    var symbol;
                    if(arr1[n].status == "缓行"){
                        symbol = symbol_yellow
                    }else if(arr1[n].status == "拥堵"){
                        symbol = symbol_red
                    }else if(arr1[n].status == "严重拥堵"){
                        symbol = symbol_red1
                    }else{
                        symbol = symbol_green
                    }
                    var routeFeature = new ol.Feature({
                        name: '导航路线',
                        geometry: polyline
                    });
                    routeFeature.setStyle(symbol);
                    features.push(routeFeature)
                    
                }
            }
            var vectorSource = new ol.source.Vector({
                features: features
            });
            var vectorLayer = new ol.layer.Vector({
                source: vectorSource,
                id:'ls_route'
            });
            _self.mapObject.addLayer(vectorLayer);
            _self.mapObject.getView().fit(vectorLayer.getSource().getExtent())
                    
        },
        showDaoHang(){
            this.showDaoHangPanel = true;
        },
        getLocationFromMap(type,longLat){
            var _self = this;
            _self.startText = '';
            _self.endText = '';
            var ol = _self.$ol;
            if(type == 'start'){
                var arr = ol.proj.transform(longLat, "EPSG:3857", "EPSG:4326")
                _self.currentEndLocation = arr.join(",");
                _self.getAddressByLongLat(type,_self.currentEndLocation);
            }else{
                var arr = ol.proj.transform(longLat, "EPSG:3857", "EPSG:4326")
                _self.currentEndLocation = arr.join(",");
                _self.getAddressByLongLat(type,_self.currentEndLocation);
            }
        },
        //根据经纬度获取地理位置描述
        getAddressByLongLat(type,location){
            var _self = this;
            axios.get('https://restapi.amap.com/v3/geocode/regeo?parameters',{
                params: {
                    location:location,
                    output:'json',
                    key:'481d08235e1dc266e0f979db1d86162c',
                }
            }).then((res)=>{
                console.log('car');
                if(res.data.status == "1"){
                    if(type == 'start'){
                        _self.startText = res.data.regeocode.formatted_address;
                    }else{
                        _self.endText = res.data.regeocode.formatted_address;
                    }
                }
            })
        },
        trafficButtonClick(val){//驾车  公交  步行
            var _self = this;
            if(_self.startText == ''){
                if(_self.showPoiList){
                    _self.$message.warning('请选择起点！');
                }else{
                    _self.$message.warning('请输入起点！');
                }
                return;
            }
            if(_self.endText == ''){
                if(_self.showPoiList){
                    _self.$message.warning('请选择终点！');
                }else{
                    _self.$message.warning('请输入终点！');
                }
                return;
            }
            if(val == "car"){
                axios.get('https://restapi.amap.com/v3/direction/driving',{
                // axios.get('/GDAPI/v3/direction/driving',{
                    params: {
                        origin:_self.currentStartLocation,
                        destination:_self.currentEndLocation,
                        output:'json',
                        key:'481d08235e1dc266e0f979db1d86162c',
                    }
                }).then((res)=>{
                    console.log('car');
                    if(res.data.status == "1"){
                        _self.showStepPanel = true;
                        _self.trafficSteps = res.data.route.paths[0];
                        _self.showRouteOnMap();
                    }
                })
            }else if(val == "bus"){
                axios.get('/GDAPI/v3/direction/transit/integrated',{
                    params: {
                        origin:_self.currentStartLocation,
                        destination:_self.currentEndLocation,
                        output:'json',
                        key:'481d08235e1dc266e0f979db1d86162c',
                    }
                }).then((res)=>{
                    console.log('bus');
                    if(res.data.status == "1"){
                        
                    }
                })
            }else if(val == "walk"){

            }
        },
        poiListClick(item){//模糊查询列表  点击
            var _self = this;
            if(_self.currentText == "start"){
                _self.startText = item.name;
                _self.currentStartLocation = item.location;
            }else{
                _self.endText = item.name;
                _self.currentEndLocation = item.location;
            }
            _self.showPoiList = false;
        },
        inputChange(val,type){//input输入内后后  关键字模糊查询
            var _self = this;
            _self.showPoiList = true;//打开poi
            _self.showBiaoJiPanel = false;//关闭标记
            _self.showStepPanel = false;//关闭详情路线
            _self.currentText = type;
            // if(type == "start"){
            //     _self.currentStartLocation = '';
            // }else{
            //     _self.currentEndLocation = '';
            // }
            // axios.get('https://restapi.amap.com/v3/place/text',{
            // axios.get('/GDAPI/v3/assistant/inputtips',{
            axios.get('https://restapi.amap.com/v3/assistant/inputtips',{
                params: {
                    keywords:val,
                    output:'json',
                    offset:20,
                    page:1,
                    city:_self.currentCityCode,
                    key:'481d08235e1dc266e0f979db1d86162c',
                }
            }).then((res)=>{
                console.log('succ');
                if(res.data.status =='1'){
                    // _self.pois = res.data.pois;
                    _self.pois = res.data.tips;
                }
            })
        },
        clickBiaoJiHandler(item){//点击标记列表   给起点终点赋值
            var _self = this;
            var ol = _self.$ol;
            var lgtd84 = item.lgtd;
            var lttd84 = item.lttd;
            // var lgtd102100 = ol.proj.transform([lgtd84,lttd84], "EPSG:4326", "EPSG:3857")[0]
            // var lttd102100 = ol.proj.transform([lgtd84,lttd84], "EPSG:4326", "EPSG:3857")[1];
            if(_self.currentFocus == 'start'){
                _self.currentStartLocation = String(lgtd84.toFixed(6))+","+String(lttd84.toFixed(6));
                _self.startText = item.inteName;
            }else if(_self.currentFocus == 'end'){
                _self.currentEndLocation = String(lgtd84.toFixed(6))+","+String(lttd84.toFixed(6));
                _self.endText = item.inteName;
            }
        },
        startFocusHandler(evt){
            var _self = this;
            console.log('开始 标记');
            _self.currentFocus = 'start';
            getMyBiaoJi(_self.userId,'','','',1,1000).then((res)=>{
                if(res.success){
                    console.log('biaoji')
                    _self.tableResultData = res.data.list;
                    _self.showPoiList = false;//关闭poi
                    _self.showBiaoJiPanel = true;//打开标记
                    _self.showStepPanel = false;//关闭详情路线
                }
            });
        },
        endFocusHandler(evt){
            var _self = this;
            console.log(evt);
            _self.currentFocus = 'end';
            getMyBiaoJi(_self.userId,'','','',1,1000).then((res)=>{
                if(res.success){
                    console.log('biaoji')
                    _self.tableResultData = res.data.list;
                    _self.showPoiList = false;//关闭poi
                    _self.showBiaoJiPanel = true;//打开标记
                    _self.showStepPanel = false;//关闭详情路线
                }
            });
        },
        chooseTraffic(val){//选择交通工具
            this.showDaoHanButton = val;
        },
        startChangeEndHandler(){
            var str = this.startText;
            this.startText = this.endText;
            this.endText = str;
            var str1 = this.currentStartLocation;
            this.currentStartLocation = this.currentEndLocation;
            this.currentEndLocation = str1;
        },
        mapToolHandler:function(item){
            this.$emit("mapToolHandler",item);
        },
        showToolPanelHandler(){
            this.showToolPanel = !this.showToolPanel;
            if(this.showToolPanel){
                this.showXzqPanel = false;
                this.$emit('hide')
            }
        },
        showPanel:function(){
            this.showXzqPanel = !this.showXzqPanel;
            if(this.showXzqPanel){
                this.$emit('hide')
                this.showToolPanel = false;
            }
        },
        getAdData:function(){
            var _self = this;
            getAdData(_self.currentAdCode).then((response)=>{
                _self.nextLevelXzq = response.data;
            });
        },
        backToStep:function(item){
            this.currentStatus={
                currentType:item.type,
                currentTitle:item.title,
                currentCode:item.code,
            };
            var arr = [];
            for(var i=0;i<this.naviStateStack.length;i++){
                if(this.naviStateStack[i].code == item.code){
                    for(var j=0;j<=i;j++){
                        arr.push(this.naviStateStack[j]);
                    }
                    this.naviStateStack = arr;  
                }
            }
            this.currentAdCode = item.code;
            this.getAdData();
            this.$emit("clickAd",{'adCode':item.code,"adName":item.title,"adGrad":item.adGrad});
        },
        closeNavigationPanel:function(item){
            this.showXzqPanel = false;
        },
        clickAd:function(item){
            this.currentStatus={
                currentType:'xzq',
                currentTitle:item.adName,
                currentCode:item.adCode,
                currentAdGrad:item.adGrad
            };
            this.naviStateStack.push({
                title:item.adName,
                type:'xzq',
                code:item.adCode,
                adGrad:item.adGrad
            });
            this.currentAdCode = item.adCode;
            this.getAdData();
            this.$emit("clickAd",item);
            // this.showXzqPanel = false;
        },
        click:function(item){
            var _self = this;
            var ol = _self.$ol;
            _self.showToolPanel = false;
            if(item == "fullExtent"){
                var view = new ol.View({
                    center:mapExtent.center,
                    zoom:mapExtent.zoom
                });
                _self.mapObject.setView(view);
            }else if(item == "clear"){
                _self.clearHandler();
            }else if(item == "measureDistance"){
                _self.measureHandler('LineString');
            }else if(item == "measureArea"){
                _self.measureHandler('Polygon');
            }else if(item == "biaoji"){
                _self.bjHandler();
            }else if(item == "daohang"){
                _self.showDaoHangPanel = !_self.showDaoHangPanel;
                if(!_self.showDaoHangPanel){
                    _self.showStepPanel = false;
                }
            }else if(item == "chaxun"){
                _self.$emit('eventHandler',item);//一张图查询
            }else if(item == "lushu"){
                _self.showLushuList = !_self.showLushuList;
                if(_self.showLushuList){
                    _self.getLushuListFun();
                }
            }else if(item == 'jietu'){
                _self.$emit('eventHandler',item);
            }
        },
        //获取路书列表
        getLushuListFun(){
            var _self = this;
            getLushuList(_self.userId).then((res)=>{
                if(res.success){
                    _self.lushuList = res.data;
                    _self.activeNames = '1';
                    _self.lushuList.forEach((item)=>{
                        if(item.sttm){
                            item['stDate'] = dateFormat(item.sttm,'yyyy-MM-dd');
                        }
                        if(item.entm){
                            item['enDate'] = dateFormat(item.entm,'yyyy-MM-dd');
                        }
                    })
                }
            })
        },
        //关闭路书
        closeLushu(){
            this.showLushuList = false;
            this.clearHandler();
        },
        //点击添加路书按钮 弹出添加对话框
        addLushu(){
            this.lushuName = '';
            this.lushuDate = '';
            this.showAddLushuDialog = true;
        },
        //添加路书
        addLushuHandlerFun(){
            var obj = {
                persId:this.userId,
                title:this.lushuName,
                sttm:this.lushuDate
            }
            addLushuHandler(obj).then((res)=>{
                if(res.success){
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                    this.getLushuListFun();
                    this.showAddLushuDialog = false;
                }
            })
        },
        //编辑路书保存
        editLushuHandlerFun(){
            var obj = {
                id:this.currentLushuBaseInfo.id,
                persId:this.userId,
                title:this.lushuName_edit,
                sttm:this.lushuDate_edit
            }
            editLushuHandler(obj).then((res)=>{
                if(res.success){
                    this.$message({
                        message: '编辑成功',
                        type: 'success'
                    });
                    this.showLushuDetailFun(this.currentLushuBaseInfo);
                    this.showEditLushuDialog = false;
                }
            })
        },
        //删除路书
        deleteLuShuFun(item){
            this.$confirm('确认删除该信息吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteLushuHandler(item.id).then((res)=>{
                    if(res.success){
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.getLushuListFun();
                    }
                })
            }).catch(() => {

            });
        },
        //查看路书详情
        showLushuDetailFun(item){
            //查询路书基本信息
            getLushuDetail(item.id).then((res)=>{
                if(res.success){
                    this.currentLushuBaseInfo = res.data;
                    this.showLushuDetail = true;
                    this.showLushuList = false;
                }
            })
            this.getLushuDayListFun(item);
        },
        //查询路书日程列表
        getLushuDayListFun(item){
            var _self = this;
            //查询路书日程列表
            getLushuDayList(item.id).then((res)=>{
                if(res.success){
                    _self.lushuDayList = res.data;
                    _self.activeNames = '1';
                    if(_self.lushuDayList.length == 0){
                        //如果路书日程为空   则调用一遍添加日程接口 默认自带一天日程
                        _self.addDayToLushuFun();
                    }else{
                        _self.currentOpenLushuDay = _self.lushuDayList[0];
                        //查询第一天途径点信息
                        _self.getPointByDayIdFun();
                    }
                }
            })
        },
        //查询第一天途径点信息
        getPointByDayIdFun(){
            var _self = this;
            _self.clearHandler();
            getPointByDayId(_self.currentOpenLushuDay.id).then((res)=>{
                if(res.success){
                    _self.lushuDayDetailList = res.data;
                    var temp = _self.lushuDayDetailList;
                    if(temp.length == 1){//只有一个点  地图上显示点
                        _self.addPointToMap(temp[0].lgtd,temp[0].lttd);
                    }else if(temp.length > 1){//两个点及以上 地图上显示点和线
                        for(var i=0;i<temp.length-1;i++){
                            _self.addPointAndRouteToMap({x:temp[i].lgtd,y:temp[i].lttd},{x:temp[i+1].lgtd,y:temp[i+1].lttd},i+1)
                        }
                    }
                }
            })
        },
        //添加点和线到地图上
        addPointAndRouteToMap(obj1,obj2,index){
            var _self = this;
            var ol = _self.$ol;
            var pt1 = new ol.geom.Point(ol.proj.transform([obj1.x,obj1.y], "EPSG:4326", "EPSG:3857"));
            var pt2 = new ol.geom.Point(ol.proj.transform([obj2.x,obj2.y], "EPSG:4326", "EPSG:3857"));
            axios.get('https://restapi.amap.com/v3/direction/driving',{
                params: {
                    origin:String(obj1.x.toFixed(6))+","+String(obj1.y.toFixed(6)),
                    destination:String(obj2.x.toFixed(6))+","+String(obj2.y.toFixed(6)),
                    output:'json',
                    key:'481d08235e1dc266e0f979db1d86162c',
                }
            }).then((res)=>{
                console.log('car');
                if(res.data.status == "1"){
                    var iconStyle1 = new ol.style.Style({
                        image: new ol.style.Icon(({
                            anchor: [0.5, 0.5],
                            scale:0.8,
                            src: '/src/views/zongHeXinXiOl/assets/location/location'+index+'.png'
                        }))
                    });
                    var iconStyle2 = new ol.style.Style({
                        image: new ol.style.Icon(({
                            anchor: [0.5, 0.5],
                            scale:0.8,
                            src: '/src/views/zongHeXinXiOl/assets/location/location'+(index+1)+'.png'
                        }))
                    });
                    var symbol_green = new ol.style.Style({
                        stroke:new ol.style.Stroke({
                            color: '#00ff00',
                            width: 7,
                            lineCap:'round'
                        })
                    })
                    var symbol_yellow = new ol.style.Style({
                        stroke:new ol.style.Stroke({
                            color: '#ffff00',
                            width: 7,
                            lineCap:'round'
                        })
                    })
                    var symbol_red = new ol.style.Style({
                        stroke:new ol.style.Stroke({
                            color: '#ff0000',
                            width: 7,
                            lineCap:'round'
                        })
                    })
                    var symbol_red1 = new ol.style.Style({
                        stroke:new ol.style.Stroke({
                            color: '#700000',
                            width: 7,
                            lineCap:'round'
                        })
                    })
                    
                    
                    var features1 = [];
                    var arr = res.data.route.paths[0].steps;
                    for(var i=0;i<arr.length;i++){
                        var arr1 = arr[i].tmcs;
                        for(var n=0;n<arr1.length;n++){
                            var str = arr1[n].polyline;
                            var arr2 = str.split(";");
                            var vertices = [];
                            for(var j=0;j<arr2.length;j++){
                                var arr3 = arr2[j].split(",");
                                var arr4 = [];
                                for(var m=0;m<arr3.length;m++){
                                    arr4.push(parseFloat(arr3[m]));
                                }
                                vertices.push(ol.proj.transform(arr4, "EPSG:4326", "EPSG:3857"));
                            }
                            
                            var polyline = new ol.geom.LineString(vertices)
                            var symbol;
                            if(arr1[n].status == "缓行"){
                                symbol = symbol_yellow
                            }else if(arr1[n].status == "拥堵"){
                                symbol = symbol_red
                            }else if(arr1[n].status == "严重拥堵"){
                                symbol = symbol_red1
                            }else{
                                symbol = symbol_green
                            }
                            var routeFeature = new ol.Feature({
                                name: '导航路线',
                                geometry: polyline
                            });
                            routeFeature.setStyle(symbol);
                            features1.push(routeFeature)
                            
                        }
                    }
                    var vectorSource1 = new ol.source.Vector({
                        features: features1
                    });
                    var vectorLayer1 = new ol.layer.Vector({
                        source: vectorSource1,
                        id:'ls_lushuRoute'
                    });
                    _self.mapObject.addLayer(vectorLayer1);
                    _self.mapObject.getView().fit(vectorLayer1.getSource().getExtent())
                    _self.mapObject.getView().setZoom(_self.mapObject.getView().getZoom()-1)

                    var features = [];
                    var iconFeature1 = new ol.Feature({
                        geometry: pt1,
                        name: '路书日程点'
                    });
                    iconFeature1.setStyle(iconStyle1);
                    features.push(iconFeature1);
                    var iconFeature2 = new ol.Feature({
                        geometry: pt2,
                        name: '路书日程点'
                    });
                    iconFeature2.setStyle(iconStyle2);
                    features.push(iconFeature2);

                    var vectorSource = new ol.source.Vector({
                        features: features
                    });
                    var  vectorLayer = new ol.layer.Vector({
                        source: vectorSource,
                        id:'ls_lushuPoint'
                    });
                    _self.mapObject.addLayer(vectorLayer);
                }
            })
        },
        //地图上添加点
        addPointToMap(x,y){
            var _self = this;
            var ol = _self.$ol;
            _self.clearHandler();
            var iconStyle = new ol.style.Style({
                image: new ol.style.Icon(({
                    anchor: [0.5, 0.5],
                    scale:0.8,
                    src: '/src/views/zongHeXinXiOl/assets/location.png'
                }))
            });
            var features = [];
            var iconFeature = new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.transform([x,y], "EPSG:4326", "EPSG:3857")),
                name: '路书日程点'
            });
            iconFeature.setStyle(iconStyle);
            features.push(iconFeature);

            var vectorSource = new ol.source.Vector({
                features: features
            });
            var vectorLayer;
            _self.mapObject.getLayers().forEach((val)=>{
                if(val){
                    if(val.getProperties().id == 'ls_lushuPoint'){
                        vectorLayer = val;
                        vectorLayer.getSource().getFeatures().push(vectorSource);
                    }
                }
            });
            if(!vectorLayer){
                vectorLayer = new ol.layer.Vector({
                    source: vectorSource,
                    id:'ls_lushuPoint'
                });
                _self.mapObject.addLayer(vectorLayer);
            }
            _self.mapObject.getView().setCenter(ol.proj.transform([x,y], "EPSG:4326", "EPSG:3857"))
        },
        //添加日程到路书
        addDayToLushuFun(){
            var _self = this;
            var obj = {
                "travelPlanId": this.currentLushuBaseInfo.id,
            }
            addDayToLushu(obj).then((res)=>{
                if(res.success){
                    _self.getLushuDayListFun(_self.currentLushuBaseInfo);
                }
            })
        },
        //后退至路书列表
        lushuBackFun(){
            this.showLushuDetail = false;
            this.showLushuList = true;
            this.getLushuListFun();
            this.clearHandler();
        },
        //编辑路书基本信息
        editLushu(item){
            this.lushuName_edit = this.currentLushuBaseInfo.title;
            this.lushuDate_edit = this.currentLushuBaseInfo.sttm;
            this.showEditLushuDialog = true;
        },
        //显示搜索框
        showSearchWidgetFun(item){
            this.showSearchWidget = true;
        },
        //路书poi
        searchWidgetInputChange(val){
            var _self = this;
            
            axios.get('https://restapi.amap.com/v3/assistant/inputtips',{
                params: {
                    keywords:val,
                    output:'json',
                    offset:20,
                    page:1,
                    city:_self.currentCityCode,
                    key:'481d08235e1dc266e0f979db1d86162c',
                }
            }).then((res)=>{
                console.log('succ');
                if(res.data.status =='1'){
                    // _self.pois = res.data.pois;
                    _self.lushuPois = res.data.tips;
                    _self.showLushuPoiList = true;
                    _self.showLushuPoiDetail = false;
                }
            })
        },
        //点击POI列表  显示单个POI详情
        showLushuPoiDetailFun(item){
            var _self = this;
            axios.get('https://restapi.amap.com/v3/place/detail',{
                params: {
                    id:item.id,
                    output:'json',
                    key:'481d08235e1dc266e0f979db1d86162c',
                }
            }).then((res)=>{
                console.log('getLushuPoiDetailScc');
                if(res.data.status =='1'){
                    _self.lushuPoiDetail = res.data.pois[0];
                    _self.showLushuPoiList = false;
                    _self.showLushuPoiDetail = true;
                }
            })
        },
        //关闭路书搜索框 同时关闭路书POIlist及poiDetail
        closeSearchWidgetFun(){
            this.showSearchWidget = false;
            this.showLushuPoiList = false;
            this.showLushuPoiDetail = false;
            this.lushuPoiDetail = {};
            this.lushuPois = [];
        },
        //打开某一天  查询该天 点 详细信息
        lushuDayChangeFun(val){
            this.currentOpenLushuDay = this.lushuDayList[Number(val)-1];
            console.log(this.currentOpenLushuDay);
            this.getPointByDayIdFun();
        },
        //从某一天当中删除点
        deletePointFun(item,index){
            var _self = this;
            this.$confirm('确认删除该信息吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deletePoint(item.id).then((res)=>{
                    if(res.success){
                        if(_self.lushuDayDetailList.length > 1 && _self.lushuDayDetailList.length == index+1){
                            //如果删除的是最后一个点   则把上一个点的距离和时间 清空
                            var obj1 = {
                                "consuming": null,
                                "distance": null,
                                "id": _self.lushuDayDetailList[index-1].id
                            }
                            updatePoint(obj1).then((res2)=>{
                                if(res2.success){
                                    _self.getPointByDayIdFun();
                                }
                            })
                        }else if(index != 0){
                            //如果删除的是中间某一点，则重新计算上一个点和下一个点之间的距离和时间
                            _self.calculateDistanceAndTime(_self.lushuDayDetailList[index-1],_self.lushuDayDetailList[index+1]);
                        }
                        _self.getLushuDayListFun({id:_self.currentLushuBaseInfo.id});
                    }
                })
            }).catch(() => {

            });
        },
        //从日程列表中删除某一天
        deleteDayFun(item){
            this.$confirm('确认删除该信息吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteDay(item.id).then((res)=>{
                    if(res.success){
                        //删除成功之后 刷新日行程列表
                        this.getLushuDayListFun({id:item.travelPlanId});
                    }
                })
            }).catch(() => {

            });
        },
        //添加poi到路书某一天中
        addPoiToLushuDayFun(){
            // this.lushuPoiDetail
            // this.currentOpenLushuDay
            var _self = this;
            var arr = this.lushuPoiDetail.location.split(',');
            var obj = {
                "addvcd": this.lushuPoiDetail.adcode,
                "addvnm": this.lushuPoiDetail.adname,
                "lgtd": Number(arr[0]),
                "lttd": Number(arr[1]),
                "name": this.lushuPoiDetail.name,
                "planDayId": this.currentOpenLushuDay.id,
            }
            addPointToDay(obj).then((res)=>{
                if(res.success){
                    //添加成功之后 刷新
                    getPointByDayId(_self.currentOpenLushuDay.id).then((res)=>{
                        if(res.success){
                            _self.lushuDayDetailList = res.data;
                            _self.searchWidgetInput = '';
                            _self.showLushuPoiDetail = false;
                            //如果添加点之后 大于两个点  则计算两点之间的距离及驾车所需时间 并调用更新接口
                            if(_self.lushuDayDetailList.length>=2){
                                var stDestination = _self.lushuDayDetailList[_self.lushuDayDetailList.length-2];
                                var endDestination = _self.lushuDayDetailList[_self.lushuDayDetailList.length-1];
                                _self.calculateDistanceAndTime(stDestination,endDestination);
                                _self.getLushuDayListFun({id:_self.currentLushuBaseInfo.id});
                            }
                        }
                    })
                }
            })

        },
        //计算两点之间距离和时间 并更新点接口
        calculateDistanceAndTime(stDestination,endDestination){
            var _self = this;
            axios.get('https://restapi.amap.com/v3/direction/driving',{
                params: {
                    origin:String(stDestination.lgtd.toFixed(6))+","+String(stDestination.lttd.toFixed(6)),
                    destination:String(endDestination.lgtd.toFixed(6))+","+String(endDestination.lttd.toFixed(6)),
                    output:'json',
                    key:'481d08235e1dc266e0f979db1d86162c',
                }
            }).then((res1)=>{
                console.log('car');
                if(res1.data.status == "1"){
                    var result = res1.data.route.paths[0];
                    var obj1 = {
                        "consuming": result.duration,
                        "distance": result.distance,
                        "id": stDestination.id
                    }
                    updatePoint(obj1).then((res2)=>{
                        if(res2.success){
                            _self.getPointByDayIdFun();
                        }
                    })
                }
            })
        },
        //鼠标移入日程中某一段   地图上显示线路
        showTwoPointRouteOnMap(obj){
            var _self = this;
            var ol = _self.$ol;
            _self.clearLayer();
            for(var i=0;i<_self.lushuDayDetailList.length-1;i++){
                if(_self.lushuDayDetailList[i].id == obj.id){
                    var obj2 = _self.lushuDayDetailList[i+1];
                    axios.get('https://restapi.amap.com/v3/direction/driving',{
                        params: {
                            origin:String(obj.lgtd.toFixed(6))+","+String(obj.lttd.toFixed(6)),
                            destination:String(obj2.lgtd.toFixed(6))+","+String(obj2.lttd.toFixed(6)),
                            output:'json',
                            key:'481d08235e1dc266e0f979db1d86162c',
                        }
                    }).then((res)=>{
                        if(res.data.status == "1"){
                            var symbol = new ol.style.Style({
                                stroke:new ol.style.Stroke({
                                    color: '#00ffff',
                                    width: 7,
                                    lineCap:'round'
                                })
                            })
                            var features = [];
                            var arr = res.data.route.paths[0].steps;
                            for(var i=0;i<arr.length;i++){
                                var arr1 = arr[i].tmcs;
                                for(var n=0;n<arr1.length;n++){
                                    var str = arr1[n].polyline;
                                    var arr2 = str.split(";");
                                    var vertices = [];
                                    for(var j=0;j<arr2.length;j++){
                                        var arr3 = arr2[j].split(",");
                                        var arr4 = [];
                                        for(var m=0;m<arr3.length;m++){
                                            arr4.push(parseFloat(arr3[m]));
                                        }
                                        vertices.push(ol.proj.transform(arr4, "EPSG:4326", "EPSG:3857"));
                                    }
                                    
                                    var polyline = new ol.geom.LineString(vertices)
                                    var routeFeature = new ol.Feature({
                                        name: '两点之间路线',
                                        geometry: polyline
                                    });
                                    routeFeature.setStyle(symbol);
                                    features.push(routeFeature)
                                    
                                }
                            }
                            var vectorSource = new ol.source.Vector({
                                features: features
                            });
                            var vectorLayer = new ol.layer.Vector({
                                source: vectorSource,
                                id:'ls_twoPointRoute'
                            });
                            _self.mapObject.addLayer(vectorLayer);
                        }
                    })
                }
            }
        },
        //鼠标移除 则清除相关图层
        clearLayer(){
            var _self = this;
            _self.mapObject.getLayers().forEach((val)=>{
                if(val){
                    if(val.getProperties().id == 'ls_twoPointRoute'){
                        val.getSource().clear();
                        _self.mapObject.removeLayer(val);
                    }
                }
            });
        },
        clearHandler(){
            var _self = this;
            document.getElementById("mapNode").style.cursor = "default";
            if(document.getElementById("measureToolTipDivId")){
                document.getElementById("measureToolTipDivId").style.display="none";
            }
            _self.mapObject.getLayers().forEach((val)=>{
                if(val){
                    if(val.getProperties().id == 'ls_lushuRoute'){
                        _self.mapObject.removeLayer(val);
                        val.getSource().clear();
                    }
                }
            });
            _self.mapObject.getLayers().forEach((val)=>{
                if(val){
                    if(val.getProperties().id == 'ls_twoPointRoute'){
                        _self.mapObject.removeLayer(val);
                        val.getSource().clear();
                    }
                }
            });
            _self.mapObject.getLayers().forEach((val)=>{
                if(val){
                    if(val.getProperties().id == 'ls_lushuPoint'){
                        _self.mapObject.removeLayer(val);
                        val.getSource().clear();
                    }
                }
            });
            _self.mapObject.getLayers().forEach((val)=>{
                if(val){
                    if(val.getProperties().id.substring(0,3) == 'ls_'){
                        _self.mapObject.removeLayer(val);
                        val.getSource().clear();
                    }
                }
            });
            if(_self.draw){
                _self.mapObject.removeInteraction(_self.draw);
            }
        },
        bjHandler(){
            var _self = this;
            this.$emit('eventHandler','biaoji');
            document.getElementById("mapNode").style.cursor = "crosshair";
        },
        measureHandler(type){
            var _self = this;
            document.getElementById("mapNode").style.cursor = "crosshair";
            if(document.getElementById("measureToolTipDivId")){
                document.getElementById("measureToolTipDivId").style.display="none";
            }
            _self.mapObject.getLayers().forEach((val)=>{
                if(val && val.getProperties().id){
                    if(val.getProperties().id == "ls_measureLayer" || val.getProperties().id == "ls_measureOverLayId"){
                        val.getSource().clear();
                        _self.mapObject.removeLayer(val);
                    }
                }
            });
            var ol = _self.$ol;
            var source = new ol.source.Vector();

            var vector = new ol.layer.Vector({
                id:'ls_measureLayer',
                source: source,
                style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                }),
                stroke: new ol.style.Stroke({
                    color: '#ffcc33',
                    width: 3
                }),
                image: new ol.style.Circle({
                    radius: 7,
                    fill: new ol.style.Fill({
                    color: '#ffcc33'
                    })
                })
                })
            });
            _self.mapObject.addLayer(vector);
            _self.draw = new ol.interaction.Draw({
                source: source,
                type: type,
                stopClick:true,
                style: new ol.style.Style({
                        fill: new ol.style.Fill({
                        color: 'rgba(255, 255, 255, 0.2)'
                    }),
                    stroke: new ol.style.Stroke({
                        color: 'rgba(255, 204, 51, 1)',
                        lineDash: [10, 10],
                        width: 3
                    }),
                    image: new ol.style.Circle({
                        radius: 8,
                        stroke: new ol.style.Stroke({
                            color: 'rgba(255, 204, 51, 0.7)'
                        }),
                        fill: new ol.style.Fill({
                            color: '#ffcc33'
                        })
                    })
                })
            });
            _self.mapObject.addInteraction(_self.draw);

            _self.createMeasureTooltip();
            _self.createHelpTooltip();
            var listener;
            _self.draw.on('drawstart',function(evt) {
                // set sketch
                _self.sketch = evt.feature;

                var tooltipCoord = evt.coordinate;

                listener = _self.sketch.getGeometry().on('change', function(evt) {
                var geom = evt.target;
                var output;
                if (geom instanceof ol.geom.Polygon) {
                    output = _self.formatArea(geom);
                    tooltipCoord = geom.getInteriorPoint().getCoordinates();
                } else if (geom instanceof ol.geom.LineString) {
                    output = _self.formatLength(geom);
                    tooltipCoord = geom.getLastCoordinate();
                }
                _self.measureTooltipElement.innerHTML = output;
                _self.measureTooltip.setPosition(tooltipCoord);
                });
            }, this);

            _self.draw.on('drawend', function() {
                _self.measureTooltipElement.className = 'tooltip tooltip-static';
                _self.measureTooltip.setOffset([0, -7]);
                // unset sketch
                _self.sketch = null;
                // unset tooltip so that a new one can be created
                _self.measureTooltipElement = null;
                _self.createMeasureTooltip();
                ol.Observable.unByKey(listener);
                _self.mapObject.removeInteraction(_self.draw);
                document.getElementById("mapNode").style.cursor = "default";
                if (_self.measureTooltipElement) {
                    _self.measureTooltipElement.parentNode.removeChild(_self.measureTooltipElement);
                }
            }, this);
        },
        createMeasureTooltip() {
            var _self = this;
            var ol = _self.$ol;
            _self.measureTooltipElement = document.createElement('div');
            _self.measureTooltipElement.id = "measureToolTipDivId";
            _self.measureTooltipElement.className = 'tooltip tooltip-measure';
            _self.measureTooltip = new ol.Overlay({
                id:'ls_measureOverLayId',
                element: _self.measureTooltipElement,
                offset: [0, -15],
                positioning: 'bottom-center'
            });
            _self.mapObject.addOverlay(_self.measureTooltip);
        },
        createHelpTooltip() {
            var _self = this;
            var ol = _self.$ol;
            if (_self.helpTooltipElement) {
                _self.helpTooltipElement.parentNode.removeChild(_self.helpTooltipElement);
            }
            _self.helpTooltipElement = document.createElement('div');
            _self.helpTooltipElement.className = 'tooltip hidden';
            _self.helpTooltip = new ol.Overlay({
                id:'ls_measureOverLayId',
                element: _self.helpTooltipElement,
                offset: [15, 0],
                positioning: 'center-left'
                });
            _self.mapObject.addOverlay(_self.helpTooltip);
        },
        formatLength(line) {
            var ol = this.$ol;
            var length = ol.Sphere.getLength(line);
            var output;
            if (length > 100) {
                output = (Math.round(length / 1000 * 100) / 100) + ' ' + 'km';
            } else {
                output = (Math.round(length * 100) / 100) + ' ' + 'm';
            }
            return output;
        },
        formatArea(polygon) {
            var ol = this.$ol;
            var area = ol.Sphere.getArea(polygon);
            var output;
            if (area > 10000) {
                output = (Math.round(area / 1000000 * 100) / 100) + ' ' + 'km<sup>2</sup>';
            } else {
                output = (Math.round(area * 100) / 100) + ' ' + 'm<sup>2</sup>';
            }
            return output;
        },
    }
}
</script>
<style>
#mapToolBarContainer_hhjc{
    position: fixed;
    top: 96px;
    right: 5px;
}
#mapTopToolBar{
    display: flex;
    background-color: white;
    height: 46px;
    border-radius: 3px;
    width: 314px;
    z-index: 1;
    align-items: center;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
    background: rgba(255,255,255,1);
    border-radius: 4px;
}
.xzqPanelClass{
    margin-top: 5px;
    background-color: white;
    width: 280px;
    margin-right: 10px;
}
.naviClickableLink{
    padding: 5px;
    padding-left: 10px;
    /* margin: 3px !important; */
    text-align: center;
    font-size: small;
    color: #000000b0;
    font-weight: normal;
    cursor: pointer;
}
.naviClickableLink:hover{
    text-decoration: underline;
}
.imgClass{
    width:17px;
    height: 17px;
    margin-right:5px;
    cursor:pointer;
}
.imgClass:hover{
    background-color: rgb(200,200,200);
}
.mapRightMenu{
    background-color: white;
    padding-left: 0px;
    /* padding-left:10px;
    padding-right:10px;
    padding-bottom:5px;
    padding-top:5px; */
    border: 1px solid rgba(142, 142, 142, 0.3);
    box-shadow: rgba(0, 0, 0, 0.23) 4px 3px 3px 0px;
}
.mapRightMenu .menuItem{
    padding: 10px;
    border-bottom: 1px solid rgba(154, 154, 154, 0.36);
    display: flex;
    flex-direction: row;
    justify-content: flex-start; 
    align-items: center;
}
.mapRightMenu .menuItem:hover{
    cursor: pointer;
    background-color: rgba(154, 154, 154, 0.082);
}
.mapRightMenu:last-child{
    
    border-bottom:0px solid rgba(102, 102, 102, 0.507) !important;
}
ul.tabs.dir_tab {
    padding-top: 10px;
    width: 200px;
    border: 0;
    border-radius: 0;
    background: none;
    height: 30px;
    margin: 0 auto;
    white-space: nowrap;
}
ul.tabs.dir_tab li {
    height: 30px;
    width: 33.3333%;
    line-height: 30px;
    position: relative;
    display: block;
    float: left;
    text-align: center;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .8px;
}
ul.tabs.dir_tab li:active {
    background-color:#dbdbe7;
}
.trafficActivity{
    background-color: #dbdbe7;
}
.daohangContainerClass{
    height: 170px;
    background-color: #4993fc;
    right: 20px;
    position: fixed;
    width: 320px;
}
.poiClass{
    background-color: #ffffff;
    position: fixed;
    top: 310px;
    right: 20px;
    width: 320px;
    max-height: 350px;
    overflow: auto;
}
.poiClass :hover{
    background: #ece9e9;
    cursor:pointer;
}
.poiListClass{
    padding: 5px;
    padding-left: 15px;
}
.stepClass{
    position: fixed;
    top: 310px;
    right: 20px;
    width: 320px;
    max-height: 350px;
    background: #f4f9fd;
    overflow: auto;
    min-height: 70px;
}
.stepClass .el-collapse-item__header{
    color:blue;
}
.tooltip {
    position: relative;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    color: white;
    padding: 4px 8px;
    opacity: 0.7;
    white-space: nowrap;
}
.tooltip-measure {
    opacity: 1;
    font-weight: bold;
}
.tooltip-static {
    background-color: #ffcc33;
    color: black;
    border: 1px solid white;
}
.tooltip-measure:before,
.tooltip-static:before {
    border-top: 6px solid rgba(0, 0, 0, 0.5);
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    content: "";
    position: absolute;
    bottom: -6px;
    margin-left: -7px;
    left: 50%;
}
.tooltip-static:before {
    border-top-color: #ffcc33;
} 
#timeLineContainer .el-timeline-item{
    padding-bottom: 10px;
}
</style>