fj-dc-ui/.svn/pristine/e7/e7e4db72d8f94985fcb70f72cdf514472ce10f1b.svn-base

<template>
    <div id="ddmbContainer" style="height: 100%;width: 100%;background-color: white;">
        <div style="height:60px;width:100%;">
            <el-breadcrumb separator-class="el-icon-arrow-right" style="padding-top: 30px;margin-left:10px;">
                <el-breadcrumb-item>2019年第一次督查</el-breadcrumb-item>
                <el-breadcrumb-item>
                    <template>
                        <el-select v-model="value" placeholder="长江水利委员会">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                    <template>
                        <el-select v-model="value" placeholder="北京">
                            <el-option
                                v-for="item in options2"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-breadcrumb-item>
                <el-breadcrumb-item>目标设置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div style="width:100%;display: flex;" :style="{'height':tableHeight+'px'}">
            <div style="height:100%;width:25%;border: 1px solid #d5d5d5;">
                <div style="width:100%;height:30px;background-color:#ededed;display: flex;align-items: center;">
                    <p style="font-size: 14px;padding-left: 30px;font-weight: bolder;">小水库</p>
                </div>
                <div style="height: 100%;display: flex;flex-direction:column">
                    <div style="height:91%;overflow-y:auto;">
                        <div v-for="item in arrList" :key="item.id" style="padding:4px;">
                            <el-checkbox @change="checkBoxChange(item)" v-model="item.checked"></el-checkbox>
                            <span style="color: #0069d5;">{{item.engName}}</span>
                            <span style="float:right;padding-right: 20px;color:#bebaba">{{item.resLoc}}</span>
                        </div>
                    </div>
                    <div style="display: flex;justify-content:space-around;">
                        <el-pagination
                            class="paginationCenterTabs"
                            style="text-align: center; width:50%;"
                            @current-change="search"
                            :current-page.sync="pageIndex"
                            layout="prev, pager, next"
                            :page-size="20"
                            :total="total"
                            :pager-count="7"
                            small
                            >
                        </el-pagination>
                        <p>已选{{checkedLength}}/{{total}}个,占比{{Number(checkedLength/total).toFixed(2)*100}}%</p>
                       <!-- <p></p> -->
                    </div>
                </div>
            </div>
            <div style="width:75%;margin-left: 10px;border: 1px solid #d5d5d5;" :style="{'height':tableHeight+'px'}">
                <div style="width:100%;height:30px;background-color:#ededed;display: flex;align-items: center;">
                    <p style="font-size: 14px;padding-left: 30px;font-weight: bolder;">地图分布</p>
                </div>
                <div id="mapContainer" style="height:100%;width:100%;" :style="{'height':mapHeight+'px'}"></div>
            </div>
        </div>
    </div>
</template>
<script>
const options = {
  	url: "/arcgisApi/4.7/init.js"
};
import Vue from 'vue'
import * as esriLoader from 'esri-loader'

import {layerOptions,baseLayerOption} from '../lyrConfig/lyrConfig.js'
import {getSkResult} from '../../api/getSKResult.js'
export default {
    components:{
        
    },
    props:[],
    computed:{
    
    },
    data () {
        return {
            loading:true,
            initOptions:null,//各图层option
            mapObject:null,
            viewObject:null,
            tableHeight:0,
            mapHeight:0,
            checkList:[],
            checkedLength:0,
            currentAdCode:'000000000000',
            arrList:[],
            options: [{
                    value: '选项1',
                    label: '长江水利委员会'
                }, {
                    value: '选项2',
                    label: '黄河水利委员会'
                }],
                 options2: [{
                    value: '选项1',
                    label: '北京'
                }, {
                    value: '选项2',
                    label: '天津'
                }],
            value: '',
            pageIndex:1,
            pageSize:20,
            total:0
        }
    },
    watch:{
        checkList(){
            console.log(this.checkList);
        }
    },
    mounted:function(){
        this.initOptions = layerOptions;
        let stepIndexMainContainer = document.getElementById('stepIndexMainContainer');
        let simcHeight = 0;
        if(stepIndexMainContainer){
            simcHeight = stepIndexMainContainer.offsetHeight;
            this.tableHeight = simcHeight - 120;
            this.mapHeight = simcHeight - 150;
        }else{
            this.tableHeight = window.parent.innerHeight - 160;
            this.mapHeight = this.tableHeight - 30;
        }
       
        // this.currentAdCode = localStorage.getItem("adCode")? localStorage.getItem("adCode"): "110000000000";
        this.currentAdCode = "110000000000";
        this.getUserInfo();
        // this.getSkList();
    },
    methods:{
        getUserInfo: function() {
            var _self = this;
            esriLoader.loadModules(["esri/tasks/QueryTask","esri/tasks/support/Query","esri/geometry/Polygon",
                "dojo/domReady!"],options).then(([QueryTask, Query, Polygon]) => {
                    //获取当前用户所属行政区   定位
                    // var adCode = localStorage.getItem("adCode")? localStorage.getItem("adCode"): "110000000000";
                    var adCode = _self.currentAdCode;
                    var url = "";
                    if (adCode.substring(2, 12) == "0000000000") {
                        //省级
                        url = 'http://106.15.207.106:6080/arcgis/rest/services/xzqh/MapServer/0';
                    } 
                    if(url){
                        var queryTask = new QueryTask({
                            url: url
                        });
                        var query = new Query({
                            outFields: ["NAME"],
                            where: "XZQDM ='" + adCode.substring(0, 6) + "'",
                            returnGeometry: true
                        });
                        queryTask.execute(query).then(function(result) {
                            _self.initMap(result.features);
                        });
                    }else{
                        _self.initMap('000000000000');
                    }
                }).catch(err => {
                    // handle any script or module loading errors
                    console.error(err);
                });
            },
        initMap:function(item){
            var _self = this;           
            esriLoader.loadModules(["esri/Map","esri/views/MapView","esri/geometry/SpatialReference",
                "esri/geometry/Extent","esri/layers/MapImageLayer","esri/Basemap","esri/layers/tdtLayer",
                "esri/layers/waterRSLayer","esri/layers/TimeImageLayer","esri/layers/superMapLayer",
                "esri/geometry/Point","esri/config","dojo/domReady!"],options).then( (
            [Map,MapView,SpatialReference,Extent,MapImageLayer,Basemap,tdtLayer,waterRSLayer,TimeImageLayer,
            superMapLayer,Point,esriConfig,]) => {
                //初始化layers
                var tianditu_shiliang = new tdtLayer(_self.initOptions.options_shiliang);
                var supermap_yingxiangzhuji = new superMapLayer(_self.initOptions.options_supermap_yingxiangzhuji);
                var supermap_river_r = new superMapLayer(_self.initOptions.options_river_r);

                _self.mapObject = new Map({});

                _self.mapObject.add(tianditu_shiliang);
                _self.mapObject.add(supermap_yingxiangzhuji);
                _self.mapObject.add(supermap_river_r);

                _self.viewObject = new MapView({
                    container: "mapContainer",
                    map: _self.mapObject,
                    viewingMode: "global",
                    constraints:{
                        rotationEnabled: false
                    }
                });
                _self.viewObject.ui.move([ "zoom" ], "top-left");
                _self.viewObject.when(function(){
                    var ext;
                    if(item == '000000000000'){
                        ext = new Extent({
                            xmax: 152.9078025022252,
                            xmin: 58.319302894812985,
                            ymax: 64.05621182715913,
                            ymin: 3.959518588217229,
                            spatialReference: new SpatialReference({
                                wkid: 4326
                            })
                        });
                    }else{
                        ext = item[0].geometry.extent;
                    }
                    _self.viewObject.extent = ext;
                    _self.loading = false;
                    _self.getSkList();
                },function(error){
                    console.log("The view's resources failed to load: ", error);
                });
                _self.viewObject.on("click",_self.viewClickHandler);
            }).catch(err => {
                // handle any script or module loading errors
                console.error(err);
            });
        },
        //鼠标点击弹出单站信息
        viewClickHandler: function (event) {
            var _self = this;
            console.log(event.mapPoint.x, event.mapPoint.y);
            _self.viewObject.popup.close();
            if (event.button == 2) {} //右键
            else if (event.button == 1) {} //middle click
            else {
                //左键
                var screenPoint = {
                    x: event.x,
                    y: event.y
                };
                var mapPoint = _self.viewObject.toMap(screenPoint);
                _self.viewObject.hitTest(screenPoint).then(function (response) {
                    var result = response.results;
                    if(result){
                        if(result[0].graphic.layer.id == "skGraphicLayer" || result[0].graphic.layer.id == "skGraphicLayer_checked"){
                            var att = result[0].graphic.attributes;
                            att.checked = !att.checked;
                            _self.checkBoxChange(att);
                        }
                    }
                });
            }
        },
        getSkList(){
            var _self = this;
            esriLoader.loadModules(["esri/Graphic","esri/geometry/SpatialReference",
            "esri/layers/GraphicsLayer","esri/geometry/Point","dojo/domReady!"],options).then( (
            [Graphic,SpatialReference,GraphicsLayer,Point]) => {
                var skGraphicLayer;
                skGraphicLayer = _self.mapObject.findLayerById("skGraphicLayer");
                if(skGraphicLayer){
                    skGraphicLayer.removeAll();
                }else{
                    skGraphicLayer = new GraphicsLayer({id:"skGraphicLayer"});
                    _self.mapObject.add(skGraphicLayer);
                }
                var gra,pt;
                var symbol = {
                    type: "picture-marker",  // autocasts as new PictureMarkerSymbol()
                    url: "/src/assets/img/sk.png",
                    width: "16px",
                    height: "16px"
                };
                getSkResult(_self.currentAdCode,_self.pageIndex,20).then((response) => {
                    var res = response.data;
                    _self.total = res.total;
                    var result = res.list;
                    result.forEach(resultItem =>{
                        resultItem['checked'] = false;
                    });
                    _self.arrList = result;
                });
                getSkResult(_self.currentAdCode,_self.pageIndex,10000).then((response) => {
                    var result = response.data.list;
                    for(var i=0;i<result.length;i++){
                        if(result[i].cenLong && result[i].cenLat){
                            pt = new Point(Number(result[i].cenLong),Number(result[i].cenLat),new SpatialReference({wkid:4326}));
                            gra = new Graphic({
                                geometry:pt,
                                symbol:symbol,
                                attributes:result[i]
                            });
                            skGraphicLayer.add(gra);
                        }
                    }
                });
            }).catch(err => {
                console.error(err);
            });
        },
        search(){
            var _self = this;
            getSkResult(_self.currentAdCode,_self.pageIndex,20).then((response) => {
                var res = response.data;
                var result = res.list;
                result.forEach(resultItem =>{
                    resultItem['checked'] = false;
                });
                _self.arrList = result;
            });
        },
        checkBoxChange(item){
            console.log(item);
            var _self = this;
            esriLoader.loadModules(["esri/Graphic","esri/geometry/SpatialReference",
            "esri/layers/GraphicsLayer","esri/geometry/Point","dojo/domReady!"],options).then( (
            [Graphic,SpatialReference,GraphicsLayer,Point]) => {
                var skGraphicLayer_checked;
                let graArr = [];
                skGraphicLayer_checked = _self.mapObject.findLayerById("skGraphicLayer_checked");
                if(skGraphicLayer_checked){
                    graArr = skGraphicLayer_checked.graphics.items;
                }else{
                    skGraphicLayer_checked = new GraphicsLayer({id:"skGraphicLayer_checked"});
                    _self.mapObject.add(skGraphicLayer_checked);
                }
                var gra,gra1,pt;
                var symbol = {
                    type: "picture-marker",  // autocasts as new PictureMarkerSymbol()
                    url: "/src/assets/img/sk_checked.png",
                    width: "20px",
                    height: "20px"
                };
                if(graArr.length ==0){
                    _self.checkedLength++;
                    if(item.cenLong && item.cenLat){
                        pt = new Point(Number(item.cenLong),Number(item.cenLat),new SpatialReference({wkid:4326}));
                        gra = new Graphic({
                            geometry:pt,
                            symbol:symbol,
                            attributes:item
                        });
                        skGraphicLayer_checked.add(gra);
                    }
                }else{
                    if(item.checked == true){
                        _self.checkedLength++;
                        if(item.cenLong && item.cenLat){
                            pt = new Point(Number(item.cenLong),Number(item.cenLat),new SpatialReference({wkid:4326}));
                            gra1 = new Graphic({
                                geometry:pt,
                                symbol:symbol,
                                attributes:item
                            });
                            skGraphicLayer_checked.add(gra1);
                        }
                    }else{
                        _self.checkedLength--;
                        for(var i=0;i<graArr.length;i++){
                            if(item.engGuid == graArr[i].attributes.engGuid){
                                skGraphicLayer_checked.remove(graArr[i]);
                            }
                        }
                    }
                }
                    // _self.checkedLength = skGraphicLayer_checked.graphics.length;
            }).catch(err => {
                console.error(err);
            });
        },
        nextStepFunction:function(){
            //@wxcwater 留作内外交互用
            this.$emit('nextStep',{
                status:'ok',
                toStep:'next',
            })
        }
    },
}
</script>
<style>
/* @import url('/src/arcgisAPI/esri/css/main.css'); */
.esri-ui .esri-attribution {
  display: none;
}
#ddmbContainer .el-checkbox-group{
    display: flex;
    flex-direction: column;
}
#ddmbContainer .el-checkbox{
    margin-left: 30px;
}
#ddmbContainer .el-input--medium .el-input__inner{
    height: 25px;
}
#ddmbContainer .el-select{
    height: 30px;
    width: 135px;
    margin-top: -6px;
}
#ddmbContainer .el-input__inner{
    font-size: 14px;
}
</style>