MES / IOT · Files



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() {

                try {
                    mapObj = mapApp(app.data.mapEle).initMap();
                } catch (e) {
                    mapObj = null;
                    layer.alert(`百度地图加载失败,清确认本地电脑能否浏览外网!${e.message}`, { icon: sysU.config.iconoError, shade: 0.4, time:sysU.config.errorTime });
                }

            },

            /**
              * 获取项目数据
             */

            getProjectDataList() {

                var ajaxConfig = {

                    data: null,
                    url: `/configure/BaseProject/GetProjectMapList`,

                    loading: false,

                    success: function (result) {
                        if (sysU.successBefore(result)) return false;

                        if (mapObj == null) return;

                        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> &nbsp;&nbsp;

                                     <span style='color:red;font-weight:bold'>${item.isHaveAlarm ? "有未处理报警" : ""}</span>
                                     <span style='color:red;font-weight:bold'>${item.isHaveMaintain ? "有待保养设备" : ""}</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

                    });
                })

                //设置默认选择的地图定位的项目

                setTimeout(() => {
                    var defaultSelectProjectId = localStorage.getItem("defaultSelectProjectId");
                    if (defaultSelectProjectId) {
                        $("#a_" + defaultSelectProjectId).click().css("color", "#42b983");
                    }
                }, 200)

            },

            //项目概述点击
            projectOverviewClick(item) {
                var title = "项目概述";

                localStorage.setItem("projectMapKeys", item.keys);
                localStorage.setItem("projectMapName", item.projectName);

                localStorage.setItem("projectCode", item.projectCode);

                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}&projectCode=${item.projectCode}`;

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

                localStorage.setItem("projectCode", item.projectCode);

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

                debugger
                var url = `/configure/BaseProject/ProjectEqAreaView?id=${item.id}&keys=${item.keys}&projectName=${item.projectName}&projectCode=${item.projectCode}`;

                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")

                localStorage.setItem("defaultSelectProjectId", markerId);

            },
            /**
              * 初始化vue
              */
            initVue: function () {
                vueApp = new Vue({
                    el: '.vueApp',
                    data: {
                        footer: {
                            projectCount: 0,
                            eqCount: 0,

                            eqOnlineRate: ""

                        }
                    },
                    methods: {

                    }
                });
            },
            /**
              * vue 集合赋值
              */

            initVueDataValue: (result) => {

                var res = result.Result;

                vueApp.footer.projectCount = res.list.length;//项目总数
                vueApp.footer.eqCount = res.sumEqCount;//设备总数
                vueApp.footer.eqOnlineRate = res.onlineRate;//在线率

            },

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