fj-dc-ui/.svn/pristine/ab/ab6f736ee0e79dee6de695f50e4d78570d6f0e6a.svn-base

<template>
    <div id="searchOneMapContainer" class="searchOneMapClass">
        <draagable :title="draagableTitle" @closeDraggable="closeDraggable" initTop=-8
            initLeft=-10 initWidth=340 initHeight="510">
            <el-tabs @tab-click="tabClickHandler" v-loading="loadingAll" v-model="activeName" tab-position="left" type="border-card" style="height: 470px;margin-left:5px;padding-top: 5px;">
                <!-- <div v-for="(item,index) in result1_1" v-if="index == 0" :key="item[0].showValue" style="display: flex;
                flex-direction: row;border-bottom: 1px solid #b7b7d0;flex-wrap: wrap;">
                    <div v-for="(item1,index1) in item" :key="item1.code" v-if="index1 != 0"> -->
                        <el-tab-pane v-for="(item,index) in result1_2" v-if="index != 0" :key="index" :label="item.showValue" :name="item.showValue">
                            <el-table :data="resultList2" v-loading='myloading' :height="426" style="width:100%;" :stripe=true @row-click="tableRowClickHandler">
                                <el-table-column v-for="(item2,index2) in resultHeader2" v-if="index2 != 0" :key="item2.code" :prop="item2.code" 
                                    :label="item2.showValue" show-overflow-tooltip>
                                </el-table-column>
                            </el-table>
                            <div class="block" style="display:flex;flex-direction:row;justify-content:center;align-items:center;padding-top: 5px;background-color: #fff;">
                                <el-pagination
                                    small
                                    @current-change="handleCurrentChange"
                                    :current-page.sync="pageIndex"
                                    :page-size="pageSize"
                                    :pager-count="5"
                                    layout="total, prev, pager, next"
                                    :total="total">
                                </el-pagination>
                            </div>
                        </el-tab-pane>
                        <div v-if="result1_2.length == 0" style="text-align:center;">
                            <P>暂无数据！</P>
                        </div>
                    <!-- </div>
                </div> -->
                
            </el-tabs>
        </draagable>
    </div>
</template>
<script>
const options = {
    url: '/src/arcgisAPI/init.js'
};
import _default,* as esriLoader from "esri-loader";
import Vue from 'vue'
import request from "../../../utils/gw_ajax_request.js"
import {dateFormat,dbDateToDate} from "../../../utils/gw_date.js"
import {_getLng,_getLat} from '../js/mercatorToLngLat.js'
import {removeLayerById} from '../js/removeLayerById.js'

import draagable from '../../../widgets/draggable.vue'
import { Notification } from 'element-ui' //引入elementui中的notificaton组件，提示结果
export default {
    props:['viewObj','mapObj','mapPointObj','layerList','bufferDistance'],
    components:{
        draagable,
    },
    data(){
        return{
            activeName: '',
            viewObject:null,
            mapObject:null,
            pointsArrStr:null,
            middleTypeListStr:null,
            mapBounds:null,
            scale:null,
            draagableTitle:"一张图信息查询",
            result1_1:[],//第一个接口 list
            result1_2:[],//第一个接口 header
            resultList2:[],//第二个接口请求 列表
            resultHeader2:[],//第二个接口请求 header
            currentShowList:[],
            showTableList:false,
            // bufferDistance:10,
            detail:[],//详细信息
            showRealTimeData:false,
            stcd:'',
            sttp:'',
            stnm:'',
            sTime:'',//开始时间
            eTime:'',//结束时间
            pageIndex:1,
            pageSize:10,
            pagerCount:5,
            total:0,
            myloading:true,
            loadingAll:true,
            currentItem:null,
        }
    },
    watch:{
        mapPointObj:function(newValue){
            this.spatialQuery_webService();
        }
    },
    mounted:function(){
        var date = new Date();
        this.sTime = dateFormat(date,"yyyy-MM-dd hh:mm:ss");
        var dateStr = new Date(date.getTime() - 15*24*60*60*1000);
        this.eTime = dateFormat(dateStr,"yyyy-MM-dd hh:mm:ss");
        this.spatialQuery_webService();
    },
    methods:{
        initHtml:function(){
            var _self = this;
            var templateStr = '';
            templateStr = templateStr + '<div id="edituser" style="height: 215px;min-width: 270px;text-align: left;">'+
                '<div style="height: 190px;overflow-y: auto;">'+
                '<div style="padding:5px;"><span style="color: #2C9EFF;">'+_self.detail[1].name+':</span>&nbsp;&nbsp;'+_self.detail[1].value+'</div>'+
                '<div style="padding:5px;"><span style="color: #2C9EFF;">'+_self.detail[2].name+':</span>&nbsp;&nbsp;'+_self.detail[2].value+'</div>'+
                '<div style="padding:5px;"><span style="color: #2C9EFF;">'+_self.detail[3].name+':</span>&nbsp;&nbsp;'+_self.detail[3].value+'</div>'+
                '<div style="padding:5px;"><span style="color: #2C9EFF;">'+_self.detail[4].name+':</span>&nbsp;&nbsp;'+_self.detail[4].value+'</div>'+
                '<div style="padding:5px;"><span style="color: #2C9EFF;">'+_self.detail[5].name+':</span>&nbsp;&nbsp;'+_self.detail[5].value+'</div>'+
                '<div style="padding:5px;"><span style="color: #2C9EFF;">'+_self.detail[6].name+':</span>&nbsp;&nbsp;'+_self.detail[6].value+'</div>';
            // if(_self.detail[7]){
            //     templateStr += '<span style="color: #2C9EFF;">'+_self.detail[7].name+':</span>&nbsp;&nbsp;'+_self.detail[7].value+'<br>';
            // }if(_self.detail[8]){
            //     templateStr += '<span style="color: #2C9EFF;">'+_self.detail[8].name+':</span>&nbsp;&nbsp;'+_self.detail[8].value+'<br>';
            // }if(_self.detail[9]){
            //     templateStr += '<span style="color: #2C9EFF;">'+_self.detail[9].name+':</span>&nbsp;&nbsp;'+_self.detail[9].value+'<br>';
            // }if(_self.detail[10]){
            //     templateStr += '<span style="color: #2C9EFF;">'+_self.detail[10].name+':</span>&nbsp;&nbsp;'+_self.detail[10].value+'<br>';
            // }if(_self.detail[11]){
            //     templateStr += '<span style="color: #2C9EFF;">'+_self.detail[11].name+':</span>&nbsp;&nbsp;'+_self.detail[11].value+'<br>';
            // }if(_self.detail[12]){
            //     templateStr += '<span style="color: #2C9EFF;">'+_self.detail[12].name+':</span>&nbsp;&nbsp;'+_self.detail[12].value+'<br>';
            // }if(_self.detail[13]){
            //     templateStr += '<span style="color: #2C9EFF;">'+_self.detail[13].name+':</span>&nbsp;&nbsp;'+_self.detail[13].value+'<br>';
            // }if(_self.detail[14]){
            //     templateStr += '<span style="color: #2C9EFF;">'+_self.detail[14].name+':</span>&nbsp;&nbsp;'+_self.detail[14].value+'<br>';
            // }if(_self.detail[15]){
            //     templateStr += '<span style="color: #2C9EFF;">'+_self.detail[15].name+':</span>&nbsp;&nbsp;'+_self.detail[15].value+'<br>';
            // }if(_self.detail[16]){
            //     templateStr += '<span style="color: #2C9EFF;">'+_self.detail[16].name+':</span>&nbsp;&nbsp;'+_self.detail[16].value+'<br>';
            // }
            templateStr += '</div><div style="display: flex;flex-direction: row;">';
            if(_self.showRealTimeData){
                templateStr = templateStr + '<div style="width:70px;cursor:pointer;color: #001fff;padding-right: 10px;">'+
                            '<span id="timeInfoId" @click="queryRealTimeData()" style="border-bottom: 1px solid blue;">实时信息</span></div><br>'+
                    '</div>'+
                '</div>';
            }else{
                templateStr = templateStr + '</div>'+
                '</div>';
            }
            return templateStr;
            // var myComponent = Vue.extend({
            //     template:templateStr,
            //     methods:{
            //         //popup  实时数据
            //         queryRealTimeData:function(){
            //             _self.viewObject.popup.close();
            //             _self.timeDataQuery();
            //         },
            //     }
            // });
            // var component = new myComponent().$mount();
            // return component.$el;
            // document.getElementById('edituser').appendChild(component.$el);
        },
        //空间查询 统计数字
        spatialQuery_webService:function(){
            var _self = this;
            var ol = _self.$ol;
            _self.loadingAll = true;
            _self.viewObject = _self.viewObj;
            _self.mapObject = _self.mapObj;
            document.getElementById("mapNode").style.cursor = "default";
            var coordinate = [_self.mapPointObj[0],_self.mapPointObj[1]]
            // var pt = new ol.geom.Point(ol.proj.transform(coordinate, "EPSG:4326", "EPSG:3857"));
            var circle = new ol.geom.Circle(coordinate,_self.bufferDistance*1000)
            var extent = circle.getExtent();
            var ptMin = ol.proj.transform([extent[0],extent[1]], "EPSG:3857","EPSG:4326" )
            var ptMax = ol.proj.transform([extent[2],extent[3]], "EPSG:3857", "EPSG:4326")
            var xmin = ptMin[0];
            var xmax = ptMax[0];
            var ymin = ptMin[1];
            var ymax = ptMax[1];
            var obj = {};
            obj.x = xmin;
            obj.y = ymin;
            var obj1 = {};
            obj1.x = xmin;
            obj1.y = ymax;
            var obj2 = {};
            obj2.x = xmax;
            obj2.y = ymax;
            var obj3 = {};
            obj3.x = xmax;
            obj3.y = ymin;
            var pointsArr1 = [obj,obj1,obj2,obj3];

            removeLayerById(_self,'ls_chaXunGraphicLayer');
            var style = new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: '#ffcc33',
                    width: 2
                }),
            })
            var feature = new ol.Feature({
                geometry:circle
            });
            feature.setStyle(style);
            var vectorSource = new ol.source.Vector({
                features: [feature]
            });
            var vectorLayer = new ol.layer.Vector({
                source: vectorSource,
                id:'ls_chaXunGraphicLayer'
            });
            _self.mapObject.addLayer(vectorLayer)
            _self.mapObject.getView().fit(feature.getGeometry().getExtent())

            _self.pointsArrStr = JSON.stringify(pointsArr1);
            var arr = ["P102","P201","P202","P203"];
            _self.middleTypeListStr = JSON.stringify(_self.layerList);
            _self.mapBounds = xmin+","+ymin+","+xmax+","+ymax;
            _self.scale = _self.mapObject.getView().getZoom() - 3;
            // _self.scale = 9;
            var params = {
                'pointsArray':_self.pointsArrStr,
                'pageIndex':'1',
                'pageSize':'30',
                'middleTypeList':_self.middleTypeListStr,
                'mapBounds':_self.mapBounds,
                'scale':_self.scale,
                "timeStamp":"2018-08-03 10:38:01",
                "spatialQueryType":"1",
                "fitchResultType":"2",
            };
            request({
                url:"/webService/spaceDot",
                method:'get',
                responseType:'json',
                params:params
            }).then((response)=>{
                console.log("空间查询获取统计数字");
                _self.loadingAll = false;
                var data = response.data;
                if(data.totalCount > 0){
                    _self.result1_1 = data.statisticDetailList;
                    _self.result1_2 = data.statisticHeaderList;
                    _self.activeName = _self.result1_2[1].showValue;
                    _self.staticNumCLick(_self.result1_1[0][1]);
                }
            },(err)=>{

            });
        },
        tabClickHandler:function(params){
            var _self = this;
            var str = params.label;
            for(var i=0;i<_self.result1_2.length;i++){
                if(str == _self.result1_2[i].showValue){
                    for(var j=0;j<_self.result1_1[0].length;j++){
                        if(_self.result1_1[0][j].code == _self.result1_2[i].code){
                            _self.staticNumCLick(_self.result1_1[0][j]);  
                        }
                    }
                }
            }
        },
        //查询数据列表
        staticNumCLick:function(item){
            var _self = this;
            this.myloading =true;
            this.currentItem = item;//分页查询 保存item
            _self.showTableList = true;
            var params_list = {
                "timeStamp": "2018-08-09 11:10:20",
                "pageIndex": _self.pageIndex,
                "mapBounds": _self.mapBounds,
                "queryStatisticData": {
                    "areaType": "1",
                    "areaCode": item.areaCode,
                    "queryType": item.queryType,
                    "middleType": item.code,
                    "areaLevel": "1"
                },
                "spatialQueryType": "1",
                "pointsArray": _self.pointsArrStr,
                "pageSize": 10,
                "queryShowItemsOnly": "1",
                "scale": _self.scale,
                "queryType": "2"
            };
            request({
                url:"/webService/statistics",
                method:'get',
                responseType:'json',
                params:params_list
            }).then((response)=>{
                console.log("查询数据列表");
                var data = response.data;
                _self.total = Number(data.totalCount);
                _self.resultList2 = data.resultDetailList;
                _self.resultHeader2 = data.resultHeaderList;
                this.myloading =false;
                // _self.refreshCurrentShow();
            },(err)=>{
    
            });
        },
        tableRowClickHandler:function(row, event, column){
            var _self = this;
            var ol = _self.$ol;
            console.log("tableClick");
            var arr1 = [row.MIDDLE_TYPE];
            var arr1Str = JSON.stringify(arr1);
            var params2 = {
                "middleTypeList":arr1Str,
                "objectCode": row.OBJ_CODE,
                "timeStamp": "2018-08-09 11:15:35",
                "pageIndex": 0,
                "pageSize": 30,
            };
            request({
                url:"/webService/detailedInfo",
                method:'get',
                responseType:'json',
                params:params2
            }).then((response)=>{
                console.log("获取对象详细信息");
                if(response.data.surveyData){
                    var data = response.data.surveyData;
                    _self.detail = data[0].resultInfoDetailList;
                    _self.showRealTimeData = false;
                    for(var i=0;i<data.length;i++){
                        if(data[i].label == "实时信息"){
                            _self.showRealTimeData = true;
                            _self.stcd = data[i].resultInfoDetailList[0].STCD;
                            _self.sttp = data[i].resultInfoDetailList[0].STTP;
                            _self.stnm = data[i].resultInfoDetailList[0].STNM;
                        }
                    }
                    var coordinate = [Number(row.CENTER_X),Number(row.CENTER_Y)];
                    if(document.getElementById('popupbj')){
                        document.getElementById('popupbj').style.display = 'block'
                    }
                    var container = document.getElementById('popupbj');
                    if(!container){
                        return;
                    }
                    var content = document.getElementById('popup-contentbj');
                    var closer = document.getElementById('popup-closerbj');
                    closer.onclick = function() {
                        overlay.setPosition(undefined);
                        closer.blur();
                        return false;
                    };
                    var overlay = new ol.Overlay({
                        id:'bjOverlayId',
                        element: container,
                        autoPan: true,
                        autoPanAnimation: {
                            duration: 250
                        }
                    });
                    var strHtml = _self.initHtml();
                    if(strHtml && coordinate){
                        content.innerHTML = strHtml;
                        overlay.setPosition(ol.proj.transform(coordinate, "EPSG:4326", "EPSG:3857"));
                        _self.mapObject.addOverlay(overlay);
                        _self.mapObject.setView(
                            new ol.View({
                                center:ol.proj.transform(coordinate, "EPSG:4326", "EPSG:3857"),
                                zoom:12
                            })
                        )
                    }
                    if(document.getElementById("timeInfoId")){
                        document.getElementById("timeInfoId").onclick = function(){
                            // _self.viewObject.popup.close();
                            _self.timeDataQuery();
                        }
                    }
                }else{
                    Notification(
                        {
                            title: '定位失败',
                            message: '暂无详细信息'
                        }
                    );
                }
            },(err)=>{

            });
        },
        timeDataQuery:function(){
            var _self = this;
            var params1 = {
                'pageIndex':'1',
                'pageSize':'30',
                "tms":"",
                "tme":"",
                "stnm":_self.stnm,
                "sttp":_self.sttp,
                "stcd":_self.stcd,
            };
            request({
                url:"/webService/actualData",
                method:'get',
                responseType:'json',
                params:params1
            }).then((response)=>{
                console.log("实时数据查询");
                var data = response.data;
                var header = data.resultHeaderList;
                var resultList = data.resultList;
                if(resultList.length == 0){
                    Notification(
                        {
                            title: '实时数据为空',
                            message: '当前时段暂无实时数据'
                        }
                    );
                }else{
                    var result = resultList[resultList.length-1];
                    var tempHeaderArr = [];
                    for(var i=0;i<header.length;i++){
                        var tmp = header[i].code;
                        if(result.hasOwnProperty(tmp)){
                            tempHeaderArr.push(header[i]);
                        }
                    }
                    _self.$emit('emit_searchOneMapTimeData',tempHeaderArr,resultList);
                }
            },(err)=>{

            });
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.staticNumCLick(this.currentItem);
            // this.refreshCurrentShow();
        },
        refreshCurrentShow:function(){
            this.myloading =false;
            var begin = (this.pageIndex-1) * this.pageSize;
            var end = begin+this.pageSize;
            this.currentShowList = this.resultList2.slice(begin,end);
        },
        closeDraggable:function(){
            removeLayerById(this,'ls_chaXunGraphicLayer');
            this.$emit("closeDraggable","searchOneMap");
        },
    }
}
</script>
<style>
.searchOneMapClass{
    position: fixed;
    right: 15px;
    top: 119px;
    width: 322px;
    max-height: 490px;
    z-index: 5;
}
#searchOneMapContainer .el-table{
    color:#928f8f;
}
#searchOneMapContainer .el-table thead{
    color: #a29a9a;
}    
#searchOneMapContainer .el-table tr{
    background-color: #f9f9f9;
}
#searchOneMapContainer .el-table__body-wrapper{
    overflow-x: hidden;
    /* max-height: 336px; */
}
#searchOneMapContainer .slotClass{
    min-height: 67px;
    background-color: white;
}
#searchOneMapContainer .el-tabs__item{
    padding: 0 10px;
}
#searchOneMapContainer .el-tabs--left .el-tabs__header{
    margin-right:0px;
}
#searchOneMapContainer .el-tabs--border-card>.el-tabs__content{
    padding: 5px;
}
</style>