dataserver_qp_23D_zhsj/scripts/mod/menu/menuVue.js

/**
 * [ONEMAP.M.projectController]
 * @return {[object]}
 */
define(function () {
    var app = null
    $('#vue-menu').html('')
    var vectorFunc, rasterFunc, modelFunc, coorTransformFunc, targetPointFunc, addressSearchFunc, advancedAddressSearchFunc, calcDistanceFunc, pathPlanningFunc, gridInfoByLonlatFunc, shpAGeojsonMutualismFunc;
    require(['modDir/layerVue/vector'], function (obj) {
        vectorFunc = obj;
    });
    require(['modDir/layerVue/raster'], function (obj) {
        rasterFunc = obj;
    });
    require(['modDir/layerVue/model'], function (obj) {
        modelFunc = obj;
    });
    require(['modDir/menu/baseCalc/coorTransform'], function (obj) {
        coorTransformFunc = obj
    });
    require(['modDir/menu/baseCalc/targetPoint'], function (obj) {
        targetPointFunc = obj
    });
    require(['modDir/menu/baseCalc/addressSearch'], function (obj) {
        addressSearchFunc = obj
    });
    require(['modDir/menu/baseCalc/advancedAddressSearch'], function (obj) {
        advancedAddressSearchFunc = obj
    });
    require(['modDir/menu/baseCalc/calcDistance'], function (obj) {
        calcDistanceFunc = obj
    });
    require(['modDir/menu/baseCalc/pathPlanning'], function (obj) {
        pathPlanningFunc = obj
    });
    require(['modDir/menu/baseCalc/gridInfoByLonlat'], function (obj) {
        gridInfoByLonlatFunc = obj
    });
    require(['modDir/menu/baseCalc/shpAGeojsonMutualism'], function (obj) {
        shpAGeojsonMutualismFunc = obj
    });

    // 目录初始化
    app = new Vue({
        el: '#vuemenu',
        data: {
            keyWord: "",
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'label',
                isLeaf: 'leaf',
                disabled: function (data, node) {
                    if (data.label == "暂无数据") {
                        return true
                    }
                }
            },
            // leafArr: [
            //     {
            //         "id": 2296,
            //         "title": "流转看管地块提取_polyline"
            //     },
            //     {
            //         "id": 2295,
            //         "title": "流转看管地块提取_polygon"
            //     },
            //     {
            //         "id": 2294,
            //         "title": "流转看管地块提取_multipatch"
            //     },
            //     {
            //         "id": 2293,
            //         "title": "流转看管地块提取_annotation"
            //     },
            //     {
            //         "id": 2255,
            //         "title": "X核减量化地块_第三批"
            //     },
            //     {
            //         "id": 2254,
            //         "title": "评估地块层_第三批"
            //     },
            //     {
            //         "id": 2252,
            //         "title": "建设用地疑似林地_朱家角镇_Polyline"
            //     },
            //     {
            //         "id": 2251,
            //         "title": "建设用地疑似林地_朱家角镇_Polygon"
            //     },
            //     {
            //         "id": 2250,
            //         "title": "建设用地疑似林地_朱家角镇_Annotation"
            //     },
            //     {
            //         "id": 2249,
            //         "title": "建设用地疑似林地_重固镇_Polyline"
            //     },
            //     {
            //         "id": 2248,
            //         "title": "建设用地疑似林地_重固镇_Polygon"
            //     },
            //     {
            //         "id": 2247,
            //         "title": "建设用地疑似林地_重固镇_Annotation"
            //     },
            //     {
            //         "id": 2246,
            //         "title": "建设用地疑似林地_赵巷镇_Polyline"
            //     },
            //     {
            //         "id": 2245,
            //         "title": "建设用地疑似林地_赵巷镇_Polygon"
            //     },
            //     {
            //         "id": 2244,
            //         "title": "建设用地疑似林地_赵巷镇_Annotation"
            //     },
            //     {
            //         "id": 2243,
            //         "title": "建设用地疑似林地_徐泾镇_Polyline"
            //     },
            //     {
            //         "id": 2242,
            //         "title": "建设用地疑似林地_徐泾镇_Polygon"
            //     },
            //     {
            //         "id": 2241,
            //         "title": "建设用地疑似林地_徐泾镇_Annotation"
            //     },
            //     {
            //         "id": 2240,
            //         "title": "建设用地疑似林地_香花桥街道_Polyline"
            //     },
            //     {
            //         "id": 2239,
            //         "title": "建设用地疑似林地_香花桥街道_Polygon"
            //     },
            //     {
            //         "id": 2238,
            //         "title": "建设用地疑似林地_香花桥街道_Annotation"
            //     },
            //     {
            //         "id": 2237,
            //         "title": "建设用地疑似林地_夏阳街道_Polyline"
            //     },
            //     {
            //         "id": 2236,
            //         "title": "建设用地疑似林地_夏阳街道_Polygon"
            //     },
            //     {
            //         "id": 2235,
            //         "title": "建设用地疑似林地_夏阳街道_Annotation"
            //     },
            //     {
            //         "id": 2234,
            //         "title": "建设用地疑似林地_练塘镇_Polyline"
            //     },
            //     {
            //         "id": 2233,
            //         "title": "建设用地疑似林地_练塘镇_Polygon"
            //     },
            //     {
            //         "id": 2232,
            //         "title": "建设用地疑似林地_练塘镇_Annotation"
            //     },
            //     {
            //         "id": 2231,
            //         "title": "建设用地疑似林地_金泽镇_Polyline"
            //     },
            //     {
            //         "id": 2230,
            //         "title": "建设用地疑似林地_金泽镇_Polygon"
            //     },
            //     {
            //         "id": 2229,
            //         "title": "建设用地疑似林地_金泽镇_Annotation"
            //     },
            //     {
            //         "id": 2228,
            //         "title": "建设用地疑似林地_华新镇_Polyline"
            //     },
            //     {
            //         "id": 2227,
            //         "title": "建设用地疑似林地_华新镇_Polygon"
            //     },
            //     {
            //         "id": 2226,
            //         "title": "建设用地疑似林地_华新镇_Annotation"
            //     },
            //     {
            //         "id": 2225,
            //         "title": "建设用地疑似林地_白鹤镇_Polyline"
            //     },
            //     {
            //         "id": 2224,
            //         "title": "建设用地疑似林地_白鹤镇_Polygon"
            //     },
            //     {
            //         "id": 2223,
            //         "title": "建设用地疑似林地_白鹤镇_Annotation"
            //     },
            //     {
            //         "id": 2288,
            //         "title": "违法用地综合整治21-23-polyline-裁切"
            //     },
            //     {
            //         "id": 2287,
            //         "title": "违法用地综合整治21-23-polygon-裁剪"
            //     },
            //     {
            //         "id": 2258,
            //         "title": "违法用地综合整治21-23-annotation-裁剪"
            //     },
            //     {
            //         "id": 2197,
            //         "title": "违法用地综合整治21-23-polyline"
            //     },
            //     {
            //         "id": 2196,
            //         "title": "违法用地综合整治21-23-annotation"
            //     },
            //     {
            //         "id": 2195,
            //         "title": "违法用地综合整治-21-23-polygon"
            //     },
            //     {
            //         "id": 2187,
            //         "title": "青浦区2024减量化地块"
            //     },
            //     {
            //         "id": 2186,
            //         "title": "青浦区2023减量化地块"
            //     },
            //     {
            //         "id": 2185,
            //         "title": "青浦区2022减量化地块"
            //     },
            //     {
            //         "id": 2184,
            //         "title": "青浦区2021减量化地块"
            //     },
            //     {
            //         "id": 2183,
            //         "title": "青浦区2020年减量化地块"
            //     },
            //     {
            //         "id": 2135,
            //         "title": "2024减量化潜力空间"
            //     },
            //     {
            //         "id": 2136,
            //         "title": "2023减量化潜力空间"
            //     },
            //     {
            //         "id": 2181,
            //         "title": "23年部卫片矢量"
            //     },
            //     {
            //         "id": 2179,
            //         "title": "2024年卫片执法图斑矢量-polyline"
            //     },
            //     {
            //         "id": 2178,
            //         "title": "2024年卫片执法图斑矢量-plygon"
            //     },
            //     {
            //         "id": 2177,
            //         "title": "2024年卫片执法图斑矢量-annotation"
            //     },
            //     {
            //         "id": 2176,
            //         "title": "青浦2023督察-polyline"
            //     },
            //     {
            //         "id": 2175,
            //         "title": "青浦2023督察-polygon"
            //     },
            //     {
            //         "id": 2174,
            //         "title": "青浦2023督察-annotation"
            //     },
            //     {
            //         "id": 2173,
            //         "title": "青浦2024督察-polyline"
            //     },
            //     {
            //         "id": 2172,
            //         "title": "青浦2024督察-polygon"
            //     },
            //     {
            //         "id": 2171,
            //         "title": "青浦2024督察-annotation"
            //     },
            //     {
            //         "id": 2154,
            //         "title": "annotation"
            //     },
            //     {
            //         "id": 2153,
            //         "title": "polyline"
            //     },
            //     {
            //         "id": 2151,
            //         "title": "polygon"
            //     },
            //     {
            //         "id": 2150,
            //         "title": "point"
            //     },
            //     {
            //         "id": 2149,
            //         "title": "multipatch"
            //     },
            //     {
            //         "id": 2134,
            //         "title": "24年报部项目"
            //     },
            //     {
            //         "id": 2133,
            //         "title": "23年报部项目"
            //     },
            //     {
            //         "id": 2132,
            //         "title": "T2024减量化0210"
            //     }
            // ],
            // leafInfo: []
        },
        mounted() {
            let that = this;
            let layerArr = onemapUrlConfig.columnConfig;
            // this.getInfo(0)
            // 获取树状结构
            $.ajax({
                type: "POST",
                headers: {
                    token: localStorage.getItem("systemToken"),
                },
                data: {
                    conditionsList: JSON.stringify(layerArr),
                },
                dataType: "json",
                url: onemapUrlConfig.DMS_URL + '/dms/column/getColumnListByConditionsList',
                success: function (result) {
                    if (result.code == 200) {
                        let obj = result.content;
                        for (let i = 0; i < layerArr.length; i++) {
                            const layer = layerArr[i];
                            let item = obj[layer.columnId][0]
                            let newlayer = {
                                id: item.id,
                                label: layer.label,
                                layerType: layer.layerType
                            }
                            if (item.dataList.length > 0) {
                                newlayer.children = handleData(item.dataList, layer.layerType)
                            } else {
                                newlayer.children = [{ label: '暂无数据', leaf: true }]
                            }
                            that.treeData.push(newlayer)
                        }
                        let baseCalcConfig = {
                            label: '基础时空专题服务', layerType: "service", id: "4f", children: [
                                // {
                                //     label: '坐标转换', layerType: "coordinate", id: "4f-1", children: [
                                //         { label: 'WGS84 转 火星坐标', layerType: "coordinate", coorKey: "wgs84ToGcj02", id: "4f-1-1", leaf: true, },
                                //         { label: '火星坐标 转 WGS84', layerType: "coordinate", coorKey: "gcj02ToWgs84", id: "4f-1-2", leaf: true, },
                                //         { label: 'WGS84 转 百度坐标', layerType: "coordinate", coorKey: "wgs84ToBD09", id: "4f-1-3", leaf: true, },
                                //         { label: '百度坐标 转 WGS84', layerType: "coordinate", coorKey: "bd09ToWgs84", id: "4f-1-4", leaf: true, },
                                //         { label: 'WGS84 转 上海2000', layerType: "coordinate", coorKey: "wgs84ToSh2000", id: "4f-1-5", leaf: true, },
                                //         { label: '上海2000 转 WGS84', layerType: "coordinate", coorKey: "sh2000ToWgs84", id: "4f-1-6", leaf: true, },
                                //         { label: 'WGS84 转 上海2000投影', layerType: "coordinate", coorKey: "wgs84ToSh2000xy", id: "4f-1-7", leaf: true, },
                                //         { label: '上海2000投影 转 WGS84', layerType: "coordinate", coorKey: "sh2000xyToWgs84", id: "4f-1-8", leaf: true, },
                                //     ]
                                // },
                                { label: '路径规划', layerType: "route", id: "4f-2", leaf: true },
                                // { label: '距离计算', layerType: "distance", id: "4f-3", leaf: true },
                                // { label: '目标点计算', layerType: "targetPoint", id: "4f-4", leaf: true },
                                { label: '地名搜索', layerType: "addressSearch", id: "4f-5", leaf: true },
                                // { label: '高级地名搜索', layerType: "advancedAddressSearch", id: "4f-6", leaf: true },
                                // { label: '经纬度获取村居/网格/微格网信息', layerType: "gridInfoByLonlat", id: "4f-7", leaf: true },
                                // { label: 'shape与geojson转换', layerType: "shpAGeojsonMutualism", id: "4f-8", leaf: true },
                            ]
                        }
                        that.treeData.push(baseCalcConfig)
                    }
                    // columnList 分级栏目 
                    function handleData(arr, layerType) {
                        return arr.map(function (item) {
                            item.label = item.title || item.c_name;
                            item.layerType = layerType

                            if (item.dataList != undefined && item.dataList.length != 0) {
                                item.children = handleData(item.dataList, layerType);
                            } else {
                                // 0 分级栏目 1 内容栏目 -1内容
                                if (item.type == 0) {
                                    item.children = [{ label: '暂无数据', leaf: true }]
                                } else {
                                    item.leaf = true;
                                }
                            }
                            return item
                        })
                    }
                }
            })
        },
        methods: {
            getInfo(index) {
                let that = this
                fetch(onemapUrlConfig.DMS_URL + '/dms/content/getVectorData', {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded",
                        "token": localStorage.getItem("systemToken"),
                    },
                    mode: "cors",
                    body: "columnId=" + this.leafArr[index].id + "&token=" + localStorage.getItem("systemToken")
                    // body: "columnId=" + modelData.layerInfo.id
                }).then(resp => resp.json()).then(function (result) {
                    let total = 0
                    result.features.map(function (feature) {
                        total = total + feature.geometry.coordinates.join(",").split(",").length / 2
                    })
                    that.leafInfo.push({
                        id: that.leafArr[index].id,
                        title: that.leafArr[index].title,
                        pointNum: total
                    })
                    if (index == that.leafArr.length - 1) {
                        console.log(JSON.stringify(that.leafInfo))
                        let TT = 0
                        that.leafInfo.map(function (item) {
                            TT += item.pointNum
                        })
                        console.log("总数：", TT)
                    } else {
                        that.getInfo(index + 1)
                    }
                })
            },
            handleOpen() { console.log('handleOpen') },
            handleClose() { console.log('handleClose') },
            // handleNodeClick(data, node, self) {
            //     if (data.leaf) {
            //         if (data.layerType == "vector") {
            //             if (data.type == 1) {
            //             }
            //         } else if (data.layerType == "raster") {
            //         } else if (data.layerType == "model") {
            //             modelFunc.add(data);
            //         }
            //     }
            // },
            handleCheck(data, checkedNodedObj) {
                // data.id
                // checkedNodedObj.checkedKeys
                if (data.leaf == false || data.leaf == undefined) return;
                if (checkedNodedObj.checkedKeys.indexOf(data.id) > -1) {
                    // 选中
                    if (data.layerType == "vector") {
                        vectorFunc.add(data, this.setTreeChecked);
                    }
                    else if (data.layerType == "raster") {
                        rasterFunc.add(data, this.setTreeChecked);
                    }
                    else if (data.layerType == "model") {
                        modelFunc.add(data, this.setTreeChecked);
                    }
                } else {
                    // 取消选中
                    if (data.layerType == "vector") {
                        vectorFunc.remove(data);
                    }
                    else if (data.layerType == "raster") {
                        rasterFunc.remove(data);
                    }
                    else if (data.layerType == "model") {
                        modelFunc.remove(data);
                    }
                }
                if (data.layerType == "coordinate") {
                    coorTransformFunc.open(data);
                }
                else if (data.layerType == "route") {
                    pathPlanningFunc.open(data);
                }
                else if (data.layerType == "distance") {
                    calcDistanceFunc.open(data)
                }
                else if (data.layerType == "targetPoint") {
                    targetPointFunc.open(data);
                }
                else if (data.layerType == "addressSearch") {
                    addressSearchFunc.open(data)
                }
                else if (data.layerType == "advancedAddressSearch") {
                    advancedAddressSearchFunc.open(data)
                }
                else if (data.layerType == "gridInfoByLonlat") {
                    gridInfoByLonlatFunc.open(data)
                }
                else if (data.layerType == "shpAGeojsonMutualism") {
                    shpAGeojsonMutualismFunc.open(data)
                }
            },
            setTreeChecked(id) {
                this.$refs.menuTree.setChecked(id, false, false);
            },
            filterNode(value, data, treeObj) {
                if (!value) return true
                return data.label.includes(value) || this.judgeTreeParent(value, treeObj.parent)
            },
            judgeTreeParent(value, obj) {
                if (obj) {
                    let judge1
                    if (obj.data.length) {
                        judge1 = obj.data.includes(function (item) {
                            return item.label == value;
                        })
                    } else {
                        judge1 = obj.data.label.includes(value)
                    }
                    let judge2 = this.judgeTreeParent(value, obj.parent)
                    return judge1 || judge2
                } else {
                    return false
                }
            },
            // foldTree() {
            //     let that = this;
            //     this.treeData.forEach((el) => {
            //         that.$refs.menuTree.store.nodesMap[el.id].expanded = false;
            //         el.children && el.children.length > 0
            //             ? that.foldTree(el.children)
            //             : ""; // 子级递归
            //     });
            // },

            // 以前的方法
            loadNode(node, resolve) {
                if (node.level === 0) {
                    return resolve([
                        { label: '矢量数据', type: 0, layerType: "vector", id: onemapUrlConfig.columnConfig.vector.id },
                        { label: '二维地图服务', type: 0, layerType: "raster", id: onemapUrlConfig.columnConfig.raster.id },
                        { label: '三维地图服务', type: 0, layerType: "model", id: onemapUrlConfig.columnConfig.model.id },
                        { label: '基础时空专题服务', type: 0, layerType: "service", id: 5 },
                    ]);
                }

                if (!localStorage.getItem("systemToken")) {
                    ONEMAP.C.publisher.publish({
                        type: 'warning',
                        message: '用户尚未登录！'
                    }, 'noteBar::add');
                    return resolve([{ label: '暂无数据', leaf: true }]);
                }
                if (node.data.layerType == "vector") {
                    $.ajax({
                        type: "POST",
                        headers: {
                            token: localStorage.getItem("systemToken"),
                        },
                        data: {
                            id: node.data.id,
                        },
                        dataType: "json",
                        url: onemapUrlConfig.DMS_URL + '/dms/column/selectChild',
                        success: function (result) {
                            if (result.code == 200) {
                                const list = result.content.map(function (item) {
                                    item.label = item.title;
                                    item.layerType = node.data.layerType;
                                    if (item.type == 1) {
                                        item.leaf = true
                                    }
                                    return item
                                })
                                resolve(list);
                            } else {
                                return resolve([{ label: '暂无数据', leaf: true }]);
                            }
                        }
                    })
                }
                else if (node.data.layerType == "service") {
                    return resolve([
                        { label: '坐标转换', type: 0, layerType: "coordinate", id: node.data.layerType + 1 },
                        { label: '路径规划', type: 2, layerType: "route", id: node.data.layerType + 2, leaf: true },
                        { label: '距离计算', type: 2, layerType: "distance", id: node.data.layerType + 3, leaf: true },
                        { label: '目标点计算', type: 2, layerType: "targetPoint", id: node.data.layerType + 4, leaf: true },
                        { label: '地名搜索', type: 2, layerType: "addressSearch", id: node.data.layerType + 5, leaf: true },
                        { label: '高级地名搜索', type: 2, layerType: "advancedAddressSearch", id: node.data.layerType + 6, leaf: true },
                        { label: '经纬度获取村居/网格/微格网信息', type: 2, layerType: "gridInfoByLonlat", id: node.data.layerType + 7, leaf: true },
                        { label: 'shape与geojson转换', type: 2, layerType: "shpAGeojsonMutualism", id: node.data.layerType + 8, leaf: true },
                    ]);
                }
                else if (node.data.layerType == "coordinate") {
                    return resolve([
                        { label: 'WGS84 转 火星坐标', type: 2, layerType: "coordinate", beforeLabel: "WGS84", afterLabel: "火星坐标", coorKey: "wgs84ToGcj02", id: node.data.layerType + 1, leaf: true, },
                        { label: '火星坐标 转 WGS84', type: 2, layerType: "coordinate", beforeLabel: "火星坐标", afterLabel: "WGS84", coorKey: "gcj02ToWgs84", id: node.data.layerType + 2, leaf: true, },
                        { label: 'WGS84 转 百度坐标', type: 2, layerType: "coordinate", beforeLabel: "WGS84", afterLabel: "百度坐标", coorKey: "wgs84ToBD09", id: node.data.layerType + 3, leaf: true, },
                        { label: '百度坐标 转 WGS84', type: 2, layerType: "coordinate", beforeLabel: "百度坐标", afterLabel: "WGS84", coorKey: "bd09ToWgs84", id: node.data.layerType + 4, leaf: true, },
                        { label: 'WGS84 转 上海2000', type: 2, layerType: "coordinate", beforeLabel: "WGS84", afterLabel: "上海2000", coorKey: "wgs84ToSh2000", id: node.data.layerType + 5, leaf: true, },
                        { label: '上海2000 转 WGS84', type: 2, layerType: "coordinate", beforeLabel: "上海2000", afterLabel: "WGS84", coorKey: "sh2000ToWgs84", id: node.data.layerType + 6, leaf: true, },
                        { label: 'WGS84 转 上海2000投影', type: 2, layerType: "coordinate", beforeLabel: "WGS84", afterLabel: "上海2000投影", coorKey: "wgs84ToSh2000xy", id: node.data.layerType + 7, leaf: true, },
                        { label: '上海2000投影 转 WGS84', type: 2, layerType: "coordinate", beforeLabel: "上海2000投影", afterLabel: "WGS84", coorKey: "sh2000xyToWgs84", id: node.data.layerType + 8, leaf: true, },
                    ]);
                }
                else {
                    if (node.data.type == 0) {
                        $.ajax({
                            type: "POST",
                            headers: {
                                token: localStorage.getItem("systemToken"),
                            },
                            data: {
                                id: node.data.id,
                            },
                            dataType: "json",
                            url: onemapUrlConfig.DMS_URL + '/dms/column/selectChild',
                            success: function (result) {
                                if (result.code == 200) {
                                    const list = result.content.map(function (item) {
                                        item.label = item.title;
                                        item.layerType = node.data.layerType;
                                        return item
                                    })
                                    resolve(list);
                                } else {
                                    return resolve([{ label: '暂无数据', leaf: true }]);
                                }
                            },
                            error: function (result) {
                                console.log(result);
                            }
                        })
                    }
                    if (node.data.type == 1) {
                        $.ajax({
                            type: "POST",
                            headers: {
                                token: localStorage.getItem("systemToken"),
                            },
                            data: {
                                columnId: node.data.id,
                                states: "1,2,3",
                                pageSize: 1000,
                                page: 0,
                            },
                            dataType: "json",
                            url: onemapUrlConfig.DMS_URL + '/dms/content/selectContentList',
                            success: function (result) {
                                if (result.code == 200) {
                                    const list = result.content.data.map(function (item) {
                                        item.label = item.title;
                                        item.layerType = node.data.layerType;
                                        item.leaf = true
                                        return item
                                    })
                                    resolve(list);
                                } else {
                                    return resolve([{ label: '暂无数据', leaf: true }]);
                                }
                            },
                            error: function (result) {
                                console.log(result);
                            }
                        })
                    }
                    if (node.data.type == 2) {

                    }
                }
            },
        },

        watch: {
            keyWord(newVal, oldVal) {
                this.$refs.menuTree.filter(newVal)
                // if (newVal == "") this.foldTree()
                if (newVal == "") this.$refs.menuTree.store._getAllNodes().forEach(v => v.expanded = false);
            }
        }
    })


    return ONEMAP.M.menuVue = {
        vueObj: app
    }
});