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(); });