fj-dc-ui/.svn/pristine/1a/1a83723d14de573b9280be948474ef0f3e37dee3.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" :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 draagable from '../../../widgets/draggable.vue'
import { Notification } from 'element-ui' //引入elementui中的notificaton组件，提示结果
export default {
    props:["result",'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">'+
                '<div style="height: 137px;overflow-y: auto;">'+
                '<span style="font-weight:700">'+_self.detail[1].name+':</span>&nbsp;&nbsp;'+_self.detail[1].value+'<br>'+
                '<span style="font-weight:700">'+_self.detail[2].name+':</span>&nbsp;&nbsp;'+_self.detail[2].value+'<br>'+
                '<span style="font-weight:700">'+_self.detail[3].name+':</span>&nbsp;&nbsp;'+_self.detail[3].value+'<br>'+
                '<span style="font-weight:700">'+_self.detail[4].name+':</span>&nbsp;&nbsp;'+_self.detail[4].value+'<br>'+
                '<span style="font-weight:700">'+_self.detail[5].name+':</span>&nbsp;&nbsp;'+_self.detail[5].value+'<br>'+
                '<span style="font-weight:700">'+_self.detail[6].name+':</span>&nbsp;&nbsp;'+_self.detail[6].value+'<br>';
            if(_self.detail[7]){
                templateStr += '<span style="font-weight:700">'+_self.detail[7].name+':</span>&nbsp;&nbsp;'+_self.detail[7].value+'<br>';
            }if(_self.detail[8]){
                templateStr += '<span style="font-weight:700">'+_self.detail[8].name+':</span>&nbsp;&nbsp;'+_self.detail[8].value+'<br>';
            }if(_self.detail[9]){
                templateStr += '<span style="font-weight:700">'+_self.detail[9].name+':</span>&nbsp;&nbsp;'+_self.detail[9].value+'<br>';
            }if(_self.detail[10]){
                templateStr += '<span style="font-weight:700">'+_self.detail[10].name+':</span>&nbsp;&nbsp;'+_self.detail[10].value+'<br>';
            }if(_self.detail[11]){
                templateStr += '<span style="font-weight:700">'+_self.detail[11].name+':</span>&nbsp;&nbsp;'+_self.detail[11].value+'<br>';
            }if(_self.detail[12]){
                templateStr += '<span style="font-weight:700">'+_self.detail[12].name+':</span>&nbsp;&nbsp;'+_self.detail[12].value+'<br>';
            }if(_self.detail[13]){
                templateStr += '<span style="font-weight:700">'+_self.detail[13].name+':</span>&nbsp;&nbsp;'+_self.detail[13].value+'<br>';
            }if(_self.detail[14]){
                templateStr += '<span style="font-weight:700">'+_self.detail[14].name+':</span>&nbsp;&nbsp;'+_self.detail[14].value+'<br>';
            }if(_self.detail[15]){
                templateStr += '<span style="font-weight:700">'+_self.detail[15].name+':</span>&nbsp;&nbsp;'+_self.detail[15].value+'<br>';
            }if(_self.detail[16]){
                templateStr += '<span style="font-weight:700">'+_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 @click="queryRealTimeData()" style="border-bottom: 1px solid blue;">实时信息</span></div><br>'+
                    '</div>'+
                '</div>';
            }else{
                templateStr = templateStr + '</div>'+
                '</div>';
            }
            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;
            _self.loadingAll = true;
            _self.viewObject = _self.viewObj;
            _self.mapObject = _self.mapObj;
            esriLoader.loadModules(["esri/Graphic","esri/geometry/Point","esri/geometry/SpatialReference",
            "esri/geometry/geometryEngine","esri/layers/GraphicsLayer",],options).then(
            ([Graphic,Point,SpatialReference,geometryEngine,GraphicsLayer])=>{
                var ptBuffer = geometryEngine.geodesicBuffer(_self.mapPointObj,_self.bufferDistance,"kilometers");
                var xmin = _getLng(ptBuffer.extent.xmin);
                var xmax = _getLng(ptBuffer.extent.xmax);
                var ymin = _getLat(ptBuffer.extent.ymin);
                var ymax = _getLat(ptBuffer.extent.ymax);
                var pointsArr1 = [];
                for(var i=0;i<ptBuffer.rings[0].length;i++){
                    if(i%5 == 0){
                        var obj = {};
                        obj.x = _getLng(ptBuffer.rings[0][i][0]);
                        obj.y = _getLat(ptBuffer.rings[0][i][1]);
                        obj.tag = null;
                        pointsArr1.push(obj);
                    }
                };
                var searchOneMapGraphicLayer = _self.mapObject.findLayerById("searchOneMapGraphicLayer");
                if(searchOneMapGraphicLayer){
                    searchOneMapGraphicLayer.removeAll();
                }else{
                    var searchOneMapGraphicLayer = new GraphicsLayer({id:"searchOneMapGraphicLayer"});
                    _self.mapObject.add(searchOneMapGraphicLayer);
                }
                var symbolPolygon = {type: "simple-fill",color: [  110,115,84, 0.1 ],outline: {
                    color: "yellow",width: "2px"},style: "solid"};
                var gra = new Graphic({
                    geometry:ptBuffer,
                    symbol:symbolPolygon,
                    attributes:null
                });
                searchOneMapGraphicLayer.add(gra);
                _self.viewObject.extent = searchOneMapGraphicLayer.graphics.items[0].geometry.extent;
                // var lod = _self.viewObject.zoom;
                // _self.viewObject.zoom = Number(lod - 1);
                // _self.viewObject.goTo({
                //     target:gra
                // });
                // var xmin = mapPoint.x - 1;
                // var xmax = mapPoint.x + 1;
                // var ymin = mapPoint.y - 1;
                // var ymax = mapPoint.y + 1;
                // var pointsArr = [
                //     {"x":xmin,"tag":null,"y":ymax},
                //     {"x":xmax,"tag":null,"y":ymax},
                //     {"x":xmax,"tag":null,"y":ymin},
                //     {"x":xmin,"tag":null,"y":ymin},
                // ];
                _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.viewObject.zoom;
                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("空间查询获取统计数字");
                    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.loadingAll = false;
                        _self.staticNumCLick(_self.result1_1[0][1]);
                    }else if(data.totalCount == 0){
                        _self.loadingAll = false;
                    }
                },(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;
            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;
                        }
                    }
                    esriLoader.loadModules(["esri/geometry/Point","esri/geometry/SpatialReference"],options).then(
                        ([Point,SpatialReference])=>{
                        var pt = new Point(row.CENTER_X,row.CENTER_Y,new SpatialReference(4326));
                        _self.viewObject.goTo(pt);
                        _self.viewObject.popup.open({
                            title:_self.detail[0].value,
                            content:_self.initHtml(),
                            location:pt
                        });
                    });
                }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(){
            if(this.mapObject){
                var lyr = this.mapObject.findLayerById("searchOneMapGraphicLayer");
                if(lyr){
                    this.mapObject.remove(lyr);
                }
                this.viewObject.popup.close();
            }
            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>