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

                        if (sysNowClickEle != -1) {
                            $("#a_" + sysNowClickEle).click().css("color", "#42b983");
                        }

                    }
                };
                sysU.ajax(ajaxConfig);
            },

            /**
              * 创建marker标注
             */

            createMarkerInfo(json) {

                json.Result.list.forEach(item => {
                    var content = `<h4 style = 'margin:0;'>地址:${item.projectAddress}</h4>

                                     设备总数:${item.eqCount}、

                                     在线:<span style='color:blue;'>${item.eqOnLineCount}</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.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) {

                debugger

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

                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 == "项目概述") {
                        $(tabsEle[i]).next().click()
                        break;
                    }
                }

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