fj-dc-ui/.svn/pristine/5a/5aed84e21ce0ceed659517b1708027db78f9ba94.svn-base

<template>
   <div class="xunheDetailContainer">
     <div id="xunheDetailTitle">
         <p style="margin:0px;color:white;">巡河记录详情</p>
         <i @click="closeDetailWindow" class="fa fa-times" aria-hidden="true" style="margin: 10px 10px 0px 0px;font-size: 14px;color: #dcdcdc;cursor:pointer"></i>
     </div>
     <!-- <div id="xunheDetailBody">
       <table style="width:100%;border-radius:5px;">
           <!-- <tr>
               <td style="width:25%;background-color:rgba(169, 169, 169, 0.267);">巡河开始时间</td>
               <td style="width:25%;">{{eventCode.startTime}}</td>
               <td style="width:25%;background-color:rgba(169, 169, 169, 0.267);;">巡河结束时间</td>
               <td style="width:25%;">{{eventCode.endTime}}</td>
           </tr> 
           <tr>
            <td style="width:25%;background-color:rgba(169, 169, 169, 0.267);;">河段名称</td>
            <td>{{eventCode.objectName}}</td>
            <td style="width:25%;background-color:rgba(169, 169, 169, 0.267);;">巡河里程(km)</td>
            <td>{{eventCode.mileage}}</td>
        </tr>
        <tr>
            <td style="width:25%;background-color:rgba(169, 169, 169, 0.267);;">巡河人员</td>
            <td>{{eventCode.userName}}</td>
            <td style="width:25%;background-color:rgba(169, 169, 169, 0.267);;">联系电话</td>
            <td></td>
        </tr>
        <tr>
            <td style="width:25%;background-color:rgba(169, 169, 169, 0.267);;" >上报问题</td>
            <td>0</td>
            <td style="width:25%;background-color:rgba(169, 169, 169, 0.267);;" >记录事件</td>
            <td>0</td>
        </tr>
       </table>
     </div>
     <div id="xunheDetailFooter"><p style="margin:0px;">巡河路径</p></div> -->
     <div id="xunheDetailMap">
        <div id="mapWindowNode" style="width:100%;height:100%;" > </div>
     </div>
     <div id="xunheInformation" style="position:absolute;top:7%;right:1%;height:20%;width:50%;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-end;">
        <p style="margin:0px;color:white;font-weight:bold;background-color:rgba(0,0,0,0.5);padding:2px;">河段:{{eventCode.objectName}}</p>
        <p style="margin:0px;color:white;font-weight:bold;background-color:rgba(0,0,0,0.5);padding:2px;">巡河人员:{{eventCode.userName}}</p>
        <p style="margin:0px;color:white;font-weight:bold;background-color:rgba(0,0,0,0.5);padding:2px;">巡河里程:{{eventCode.mileage}} km</p>
        <p style="margin:0px;color:white;font-weight:bold;background-color:rgba(0,0,0,0.5);padding:2px;">巡河时间:{{eventCode.startTime}}</p>
    </div>
    <div id="xunheModuleToggle" style="position:absolute;bottom:10px;left:1%;min-height:30%;width:30%;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;">
            <!-- <el-button type="primary" plain style="margin:0;margin-top:5px;" icon="el-icon-edit">巡河日志</el-button> -->
            <el-button type="success" plain style="margin:0;margin-top:5px;" icon="el-icon-share">关联事件({{eventCount}})</el-button>
    </div>
   </div>
</template>
<script>
const options = {
  url: '/src/arcgisAPI/init.js'
};
import * as esriLoader from 'esri-loader'
export default{
    components:{
       
    },
    props:['eventCode'],
    data(){
        return{
            eventCount:0,
            eventInforMation:{
                adCode:'',
                adName:'',
                createDate:'',
                endTime:'',
                id:'',
                mileage:'',
                objectId:'',
                objectName:'',
                objectType:'',
                ord:'',
                patrolState:'',
                patrolTrackJson:'',
                startTime:'',
                userName:'',

            },
            contIntervalTime:10,
            tianditu_yingxiang:null,
            supermap_yingxiangzhuji:null,
            supermap_river_r:null,
            mapObject:null,
            viewObject:null,
            imageData:[],
        }
    },
    mounted:function(){
        
       this.getEventListByCode();
    },
    watch: {
        eventCode:{
            handler(newValue,oldValue){
                this.pathAnimate(this.eventCode);
            },
            deep:true
        },
    },
    methods: {
        getEventListByCode:function(){
            var _self = this;
            _self.$http.post('/pdcApi/event/findList',{'patrolId':this.eventCode.id}).then((response)=>{
                var data = response.body;
                _self.eventCount = data.length;
                _self.imageData = data;
                this.initMap();
            },(response)=>{

            });
        },
        initEsriLoader:function(){
            esriLoader.bootstrap((err) => {
            if (err) {
                console.error(err);
            } else {
            }
            }, {
                url: '/src/arcgisAPI/init.js'
            });
        },
        initMap:function(){
            var _self = this;
            this.initEsriLoader();            
            esriLoader.dojoRequire(["esri/Map","esri/views/MapView","esri/views/SceneView","esri/views/3d/externalRenderers","esri/geometry/SpatialReference","esri/geometry/Extent","esri/request","esri/layers/MapImageLayer","esri/Basemap","esri/layers/FeatureLayer","esri/layers/GraphicsLayer","esri/layers/testLayer","esri/layers/waterRSLayer","esri/layers/TimeImageLayer","esri/layers/superMapZhuji","esri/layers/BaseTileLayer","esri/layers/support/TileInfo","esri/Color","esri/config","dojo/domReady!"],
            (Map,MapView,SceneView,externalRenderers,SpatialReference,Extent,esriRequest,MapImageLayer,Basemap,FeatureLayer,GraphicsLayer,testLayer,waterRSLayer,TimeImageLayer,superMapZhuji,BaseTileLayer,TileInfo,Color,esriConfig,) => {
                var options_yingxiang = {
                    "id": "tianDiTu_yingxiang",
                    "label": "天地图影像地图",
                    "visible": true,
                    "opacity": 1,
                    "style": "default",
                    "wmtslayer": "vec",
                    "tileMatrixSet": "c",
                    "format": "tiles",
                    "urlTemplate": "http://{subDomain}.mwr.gov.cn:81/img_c/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=img&STYLE=default&FORMAT=tiles&TILEMATRIXSET=c&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}",
                    "copyright": "TiandituWMTS",
                    "subDomains": ["tdt"]
                };                    
                var options_supermap_yingxiangzhuji = {
                    "id": "supermap_yingxiangzhuji",
                    "label": "超图影像注记",
                    "visible": true,
                    "opacity": 1,
                    "style": "default",
                    "wmtslayer": "vec",
                    "tileMatrixSet": "satImage",
                    "format": "image/png",
                    "urlTemplate":"http://{subDomain}.mwr.gov.cn/iserver/services/XZQH_HZZR/wmts100?&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=XZQH_HZZR&STYLE=Default&FORMAT=image/png&TILEMATRIXSET=Custom_XZQH_HZZR&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}",
                    "copyright": "TiandituWMTS",
                    "subDomains": ["map"]
                };
                var options_river_r = {
                    "id": "supermap_river_r",
                    "label": "超图影像水系图",
                    "visible": true,
                    "opacity": 1,
                    "style": "default",
                    "wmtslayer": "vec",
                    "tileMatrixSet": "Custom_RIVER_R",
                    "format": "image/png",
                    "urlTemplate":"http://{subDomain}.1.3.140/iserver/services/RIVER_R/wmts100?&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=RIVER_R&STYLE=Default&FORMAT=image/png&TILEMATRIXSET=Custom_RIVER_R&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}",
                    "copyright": "TiandituWMTS",
                    "subDomains": ["10"]
                };
                _self.tianditu_yingxiang = new testLayer(options_yingxiang);
                _self.supermap_yingxiangzhuji = new superMapZhuji(options_supermap_yingxiangzhuji);
                _self.supermap_river_r = new superMapZhuji(options_river_r);
                _self.mapObject = new Map({});
                _self.mapObject.add(_self.tianditu_yingxiang);
                _self.mapObject.add(_self.supermap_yingxiangzhuji);
                _self.mapObject.add(_self.supermap_river_r);
                _self.viewObject = new MapView({
                    container: "mapWindowNode",
                    map: _self.mapObject,
                    viewingMode: "global",
                    constraints:{
                        rotationEnabled: false
                    }
                });
                // _self.viewObject.ui.empty("top-left");
                _self.viewObject.when(function(){
                    // alert("OK");
                    var hdHightLightLayer = new GraphicsLayer({id:"hdHightLightLayer"});//河段高亮layer
                    _self.mapObject.add(hdHightLightLayer);


                     _self.viewObject.on("click", function(event) {
                            //@author:wxcwater  对event的button做区分 右键应当报事件
                            var eventIndex = event;
                            if(event.button==2){
                                //右键
                                // _self.$emit("openMapWIndow","");//弹出地图小窗口   测试
                            }
                            var screenPoint = {
                                x: event.x,
                                y: event.y
                            };
                            // if(event.x==_self.domMouseMoveObject.pageX&&event.y==_self.domMouseMoveObject.pageY){
                            //     console.log('get');
                            // }else{
                            //     console.log('x:'+event.x+" : "+_self.domMouseMoveObject.screenX);
                            //     console.log('y:'+event.y+" : "+_self.domMouseMoveObject.screenY);
                            // }
                            // Search for graphics at the clicked location
                            _self.viewObject.hitTest(screenPoint).then(function(response) {
                                if(eventIndex.button == 0){
                                    //左键
                                    var result = response.results;
                                    if(result){
                                        //点击河段高亮layer  下钻
                                    
                                            _self.$emit('openEventDetail',{'eventInformation':result[0].graphic.attributes});
                                        
                                    }
                                }
                            });
                        });

                    if(_self.eventCode.patrolTrackJson){
                        _self.pathAnimate(_self.eventCode);
                    }else{
                        alert("暂无巡河路径数据!")
                    }
                },function(error){
                    console.log("The view's resources failed to load: ", error);
                });
            });
        },
        //定位河段
        locateEvent:function(item){
            var _self = this;
            esriLoader.dojoRequire(["esri/Graphic","esri/geometry/Point","esri/geometry/SpatialReference","esri/layers/GraphicsLayer","esri/geometry/Polygon","esri/geometry/Polyline","esri/tasks/QueryTask", "esri/tasks/support/Query",
            ],(Graphic,Point,SpatialReference,GraphicsLayer,Polygon,Polyline,QueryTask, Query,)=>{
                var hdHightLightLayer = _self.mapObject.findLayerById("hdHightLightLayer");
                
                var pt = new Point(item.eventLongitude,item.eventLatitude,new SpatialReference(4326));
                var sym;
                var gra;
                var attributes = {
                    'userName':item.userName,
                    'adCode':item.adCode,
                    'adName':item.adName,
                    'eventName':item.eventName,
                    'eventSrc':item.eventSrc,
                    'eventSrcName':item.eventSrcName,
                    'eventAddress':item.eventAddress,
                    'eventState':item.eventState,
                    'eventStateName':item.eventStateName,
                    'objectType':item.objectType,
                    'objectName':item.objectName,
                    'startTime':item.startTime,
                    'endTime':item.endTime,
                    'event_udName':item.event_udName,
                    'eventFiles':item.eventFiles,
                    'memo':item.memo,
                };
                 if(item.eventTypes == '水环境'){
                    sym = {type: "picture-marker",url: "../assets/event_six_environment.png",width: "20px",height: "20px"};
                    gra = new Graphic({geometry:pt,symbol:sym,attributes:attributes});
                }else if(item.eventTypes == '执法监督'){
                    sym = {type: "picture-marker",url: "../assets/event_six_justice.png",width: "20px",height: "20px"};
                    gra = new Graphic({geometry:pt,symbol:sym,attributes:attributes});
                }else if(item.eventTypes == '水域岸线'){
                    sym = {type: "picture-marker",url: "../assets/event_six_bank.png",width: "20px",height: "20px"};
                    gra = new Graphic({geometry:pt,symbol:sym,attributes:attributes});
                }else if(item.eventTypes == '水资源'){
                    sym = {type: "picture-marker",url: "../assets/event_six_resource.png",width: "20px",height: "20px"};
                    gra = new Graphic({geometry:pt,symbol:sym,attributes:attributes});
                }else if(item.eventTypes == '水生态'){
                    sym = {type: "picture-marker",url: "../assets/event_six_ecology.png",width: "20px",height: "20px"};
                    gra = new Graphic({geometry:pt,symbol:sym,attributes:attributes});
                }else if(item.eventTypes == '水污染'){
                    sym = {type: "picture-marker",url: "../assets/event_six_pollution.png",width: "20px",height: "20px"};
                    gra = new Graphic({geometry:pt,symbol:sym,attributes:attributes});
                }

               
                hdHightLightLayer.add(gra);
               
            });
        },
        pathAnimate:function(params){
            //先zoom过去
            var _self = this;
            esriLoader.dojoRequire(["esri/Graphic","esri/geometry/Point","esri/geometry/SpatialReference","esri/layers/GraphicsLayer","esri/geometry/Polygon","esri/geometry/Polyline","esri/tasks/QueryTask", "esri/tasks/support/Query",
            ],(Graphic,Point,SpatialReference,GraphicsLayer,Polygon,Polyline,QueryTask, Query,)=>{
                var hdHightLightLayer = _self.mapObject.findLayerById("hdHightLightLayer");
                hdHightLightLayer.removeAll();
                var symbolLine = {type: "simple-line",color: [ 255,0, 0, 1 ],width:"5px",style: "solid"};
                // var paths = response.body.pointList;
                var line = new Polyline({
                    paths: JSON.parse(params.patrolTrackJson),
                    spatialReference: { wkid: 4326 }
                });
                _self.contIntervalTime = Math.round(5000/JSON.parse(params.patrolTrackJson)[0].length);
                var hehuTempGra = new Graphic({
                    geometry:line,
                    symbol:symbolLine,
                    attributes:null
                });
               
                _self.viewObject.extent = hehuTempGra.geometry.extent;
                var lod = Number(_self.viewObject.zoom);
                var lod1 = Number(lod - 2);
                _self.viewObject.goTo({
                    target:hehuTempGra,
                    zoom:lod1,
                }).then(function(){
                    // alert('zoom完了');
                    let realPathArray = JSON.parse(params.patrolTrackJson)[0];
                    console.log('realPathArray      ');
                    _self.realAnimateFun(realPathArray,0);
                });
            });


        },
        realAnimateFun:function(pathsArray,startIndex){
            console.log('realAnimateFun'+startIndex);
            let currentIndex = startIndex;
            var _self = this;
            let currentPaths = [];
            if(currentIndex+1>=pathsArray.length){
                return ;
            }
            currentPaths.push(pathsArray[currentIndex]);
            currentPaths.push(pathsArray[currentIndex+1]);
            esriLoader.dojoRequire(["esri/Graphic","esri/geometry/Point","esri/geometry/SpatialReference","esri/layers/GraphicsLayer","esri/geometry/Polygon","esri/geometry/Polyline","esri/tasks/QueryTask", "esri/tasks/support/Query",
            ],(Graphic,Point,SpatialReference,GraphicsLayer,Polygon,Polyline,QueryTask, Query,)=>{
                let hdHightLightLayer = _self.mapObject.findLayerById("hdHightLightLayer");
                // hdHightLightLayer.removeAll();
                var symbolLine = {type: "simple-line",color: [ 255,0, 0, 1 ],width:"5px",style: "solid"};
                // var paths = response.body.pointList;
                let line = new Polyline({
                    paths: [currentPaths],
                    spatialReference: { wkid: 4326 }
                });
                let hehuTempGra = new Graphic({
                    geometry:line,
                    symbol:symbolLine,
                    attributes:null
                });
               
                hdHightLightLayer.add(hehuTempGra);
                _self.imageData.forEach(function(item){
                    if(currentPaths[1][0]==item.eventLongitude&&currentPaths[1][1]==item.eventLatitude){
                        // alert('有图片');
                        _self.locateEvent(item);
                        currentIndex++;
                    }
                })
               
            });
            setTimeout(() => {
                _self.realAnimateFun(pathsArray,currentIndex+1);
            }, this.contIntervalTime);
        },
        closeDetailWindow:function(){
            this.$emit('closeXzqXunHeDetailWindow',{});
        }
    }
}
</script>
<style>
    @import url('/src/arcgisAPI/esri/css/main.css');
.xunheDetailContainer{
    position: fixed;
    top:15%;
    left:55%;
    height:60%;
    width:40%;
    background-color: white;
    border-radius:5px;
    display: flex;
    flex-direction:column;
    justify-content: flex-start;
    align-items: stretch;
    z-index: 10;
}
#xunheDetailTitle{
    padding:5px;
    flex-basis:5%;
    background-color: rgb(62,123,246);
    border-radius:5px 5px 0px 0px ;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
#xunheDetailBody{
    flex-basis:25%;
}
#xunheDetailMap{
    flex-basis:100%;
}
#xunheDetailFooter{
    flex-basis:5%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color:rgba(169, 169, 169, 0.267);
}
/*屏蔽esri标注*/
.esri-ui .esri-attribution{
    display: none;
}
</style>