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",
        sysNowClickEle = -1;
    vueApp = null;
    action = {
    }
    app = {
        data: {
            mapEle: "container",
            refreshDataTimeEle: document.getElementById('refreshDataTime')
        },
        methods: {
            /**
              * 初始化地图
             */
            initMap() {
                mapObj = mapApp(app.data.mapEle).initMap();
            },
            /**
              * 获取项目数据
             */
            getProjectDataList() {
                var ajaxConfig = {
                    data: null,
                    url: `/configure/BaseProject/GetProjectMapList`,
                    loading: false,
                    success: function (result) {
                        if (sysU.successBefore(result)) return false;
                        app.methods.createMarkerInfo(result);
                        app.methods.initVueDataValue(result);
                        app.methods.createSidebarList(result);
                        if (sysNowClickEle != -1) {
                            $("#a_" + sysNowClickEle).click().css("color", "#42b983");
                        }
                    }
                };
                sysU.ajax(ajaxConfig);
            },
            /**
              * 创建marker标注
             */
            createMarkerInfo(json) {
                let index = 1
                json.Result.list.forEach(item => {
                    var content = `<h4 style = 'margin:0;'>地址:${item.projectAddress}</h4>
                                     设备总数:${item.eqCount}、
                                     运行:<span style='color:blue;'>${item.eqRunCount}</span>、
                                     待机:${item.eqFreeCount}
                                     故障:${item.eqFailureCount}<br/>
                                     离线(5m):<span style='color:red;'>${item.eqOfflineCount}</span>
                                   <div style = 'display: flex;' >
                                      <div><a style='text-decoration: underline;color: blue;' onclick='app.methods.projectOverviewClick(${JSON.stringify(item)})'  href='#'>项目概述</a></div>
                                      <div><a style='text-decoration: underline;color: blue;margin-left:12px' onclick='app.methods.projectAreasMapClick(${JSON.stringify(item)})'  href='#'>项目设备区域图</a></div>
                                   </div >` ;//定义大标题  写html语句标签
                    mapObj.createMarkerInfo(content, {
                        title: `项目名称[${index++}]:` + item.projectName,
                        longitude: item.longitude,
                        latitude: item.latitude,
                        id: item.id
                    });
                })
            },
            //项目概述点击
            projectOverviewClick(item) {
                var title = "项目概述";
                localStorage.setItem("projectMapKeys", item.keys);
                localStorage.setItem("projectMapName", item.projectName);
                var tabsEle = window.parent.document.querySelectorAll("#top_tabs cite");
                for (var i = 0; i < tabsEle.length; i++) {
                    if (tabsEle[i].innerText == title) {
                        $(tabsEle[i]).next().click()
                        break;
                    }
                }
                var url = `/configure/BaseProject/ProjectOverview?id=${item.id}&keys=${item.keys}&projectName=${item.projectName}`;
                var urlHtml = $(`<a title="${title}"  data-url="${url}"><i class="layui-icon" data-icon=""></i><cite>${title}</cite></a>`)
                window.top.tab.tabAdd(urlHtml);
            },
             //项目区域图点击
            projectAreasMapClick(item) {
                var title = "项目设备区域图";
                localStorage.setItem("projectMapKeys", item.keys);
                localStorage.setItem("projectMapName", item.projectName);
                var tabsEle = window.parent.document.querySelectorAll("#top_tabs cite");
                for (var i = 0; i < tabsEle.length; i++) {
                    if (tabsEle[i].innerText == title) {
                        $(tabsEle[i]).next().click();
                        break;
                    }
                }
                var url = `/configure/BaseProject/ProjectEqAreaView?id=${item.id}&keys=${item.keys}&projectName=${item.projectName}`;
                var urlHtml = $(`<a title="${title}" data-url="${url}"><i class="layui-icon" data-icon=""></i><cite>${title}</cite></a>`);
                window.top.tab.tabAdd(urlHtml);
            },
            /**
              * 创建右侧项目列表
             */
            createSidebarList(json) {
                var sidebarList = [];
                var index = 1;
                json.Result.list.forEach(item => {
                    var content = `<dd><a id='a_${item.id}' 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);
                sysNowClickEle = 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) => {
                var res = result.Result;
                vueApp.footer.projectCount = res.list.length;
                //设备总数
                vueApp.footer.eqCount = res.sumEqCount;
                vueApp.footer.eqOnlineRate = res.onlineRate;
                vueApp.footer.eqTuoRate = res.tuoShanRate;
            },
            refreshDataMethod: function () {
                const tabsEle = Array.from(window.parent.document.querySelectorAll("#top_tabs .layui-this"));
                const isOK = tabsEle.some(tab => tab.innerText === "项目地图");
                if (!isOK) return;
                let currenttime = parseInt(app.data.refreshDataTimeEle.innerHTML);
                if (currenttime === 0) {
                    currenttime = 20;
                    app.methods.getProjectDataList();
                } else {
                    currenttime--;
                }
                app.data.refreshDataTimeEle.innerHTML = currenttime;
            }
        },
        registerEvent: function () {
        },
        init: function () {
            app.methods.initMap();
            app.methods.initVue();
            app.methods.getProjectDataList();
            setInterval(app.methods.refreshDataMethod, 1000);
            app.registerEvent();
        }
    };
    app.init();
});