web/WebMvc/wwwroot/baseJs/projectMap.js


let action = null;
let mapObj = null;
var app = null;
layui.config({
    base: "/js/",
    version: 1
}).use(['system'], function () {
    var form = layui.form,
        $ = layui.jquery,
        element = layui.element,
        table = layui.table,
        system = layui.system,
        sysU = new system.u(),
        sendDataWhere = null,
        areaName = "configure",
        controllerName = "BaseProject",
        vueApp = null;
    action = {
    }
    app = {
        data: {
            mapEle: "container",
        },
        methods: {
            /**
              * 初始化地图
             */
            initMap() {
                mapObj = mapApp(app.data.mapEle).initMap();
            },
            /**
              * 获取项目数据
             */
            getProjectDataList() {
                var ajaxConfig = {
                    data: { pageRequest: null, entity: { flag: "projectMapList" } },
                    url: `/configure/BaseProject/Load`,
                    success: function (result) {
                        if (sysU.successBefore(result)) return false;
                        app.methods.createMarkerInfo(result);
                        app.methods.initVueDataValue(result);
                        app.methods.createSidebarList(result);
                    }
                };
                sysU.ajax(ajaxConfig);
            },
            /**
              * 创建marker标注
             */
            createMarkerInfo(json) {
                json.Result.forEach(item => {
                    var content = `<h4 style = 'margin:0;'>${item.projectAddress}</h4>
                                     设备总数:${item.eqCount}、在线:<span style='color:blue;'>${item.eqOnLine}</span>、待机:${item.eqOff}、故障:<span style='color:red;'>${item.eqAlarm}</span>
                                   <div style = 'display: flex;' >
                                      <div><a style='text-decoration: underline;color: blue;' onclick='app.methods.mapMarkerClick(${JSON.stringify(item)})'  href='#'>项目概述</a></div>
                                   </div >` ;//定义大标题  写html语句标签
                    mapObj.createMarkerInfo(content, {
                        title: "项目名称:" + item.projectName,
                        longitude: item.longitude,
                        latitude: item.latitude,
                        id: item.id
                    });
                })
            },
            mapMarkerClick(item) {
                var url = `/configure/BaseProject/ProjectOverview?id=${item.id}&keys=${item.keys}&projectName=${item.projectName}`;
                var urlHtml = $(`<a title="项目概述"  data-url="${url}"><i class="layui-icon" data-icon=""></i><cite>项目概述</cite></a>`)
                window.top.tab.tabAdd(urlHtml);
            },
            /**
              * 创建右侧项目列表
             */
            createSidebarList(json) {
                var sidebarList = [];
                var index = 1;
                json.Result.forEach(item => {
                    var content = `<dd><a class='projectListA' onclick='app.methods.findLocateMarker(${item.id.toString()},event)' href="javascript:;">【${index++}】${item.projectName}</a></dd>`;//定义大标题  写html语句标签
                    sidebarList.push(content)
                })
                if (sidebarList.length > 0) {
                    $(".sidebar-list-item").empty().append(sidebarList.join(" "))
                }
            },
            /**
              * 查找Marker并打开对应的infoWindow信息框
             */
            findLocateMarker(markerId, event) {
                mapObj.getLocateMarker(markerId);
                $(".projectListA").css("color", "rgba(255, 255, 255, .7)")
                $(event.currentTarget).css("color", "#42b983")
            },
            /**
              * 初始化vue
              */
            initVue: function () {
                vueApp = new Vue({
                    el: '.vueApp',
                    data: {
                        footer: {
                            projectCount: 0,
                            eqCount: 0,
                            eqOnlineRate: "",
                            eqTuoRate: "",
                        }
                    },
                    methods: {
                    }
                });
            },
            /**
              * vue 集合赋值
              */
            initVueDataValue: (result) => {
                vueApp.footer.projectCount = result.Result.length;
                vueApp.footer.eqCount = 12;
                vueApp.footer.eqOnlineRate = "16.67%";
                vueApp.footer.eqTuoRate = "89.67%";
            }
        },
        registerEvent: function () {
        },
        init: function () {
            app.methods.initMap();
            app.methods.initVue();
            app.methods.getProjectDataList();
            app.registerEvent();
        }
    };
    app.init();
});