From f6c769a08e742bc72dfc8aa8fcb7d51035f1fca6 Mon Sep 17 00:00:00 2001
From: wans <747101512@qq.com>
Date: Tue, 3 Nov 2020 18:08:50 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=8E=E5=8F=B0=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main/resources/static/default.html | 544 ++++++++++++++++++++++++-
 1 file changed, 527 insertions(+), 17 deletions(-)
diff --git a/src/main/resources/static/default.html b/src/main/resources/static/default.html
index 4e15335..01f4529 100644
--- a/src/main/resources/static/default.html
+++ b/src/main/resources/static/default.html
@@ -1,5 +1,5 @@
-<!DOCTYPE html>
-<html>
+<!doctype html>
+<html lang="en">
 <head>
     <base href="/partybuilding/">
     <meta charset="utf-8">
@@ -9,30 +9,540 @@
     <link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
     <link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
     <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
+    <style>
+        *{margin:0;padding:0;}
+        .marker-container{position: absolute;top:50%;left:50%;transform: translate(-50%,-50%)}
+        .top{overflow:hidden;width:35px;height:20px;background-color:red;border-radius:50px 50px 0 0;padding: 5px 5px 0;box-sizing: border-box;}
+        .mid{width:35px;height:10px;background: red;}
+        .top img{width: 100%;}
+        .bottom{width :0px;
+            height :0px;
+            border-top: 20px solid red;
+            border-left: 18px solid transparent;
+            border-right: 17px solid transparent;}
+    </style>
 </head>
 <body>
-
-<div id="LAY-app" class="layui-fluid">
-    <div class="layui-row layui-col-space15"></div>
+<div class="layui-fluid layui-anim layui-anim-fadein">
+    <div class="layui-row layui-col-space15">
+        <div class="layui-col-lg2 layui-col-md2 layui-col-sm-2 layui-col-xs12" style="height: 512px;">
+            <div class="layui-card">
+                <div class="layui-card-header">人员选择</div>
+                <div class="layui-card-body" id="areaConfigBox">
+                    <div style="margin-left: -115px;" id="divArea">
+                        <div class="layui-input-block layui-form" id="areaSelectTemplateBox" lay-filter="areaSelectTemplateBox"></div>
+                        <script id="areaSelectTemplate" type="text/html">
+                            <select id="area" name="area" lay-filter="area">
+                                <option value="">选择所在区域-自治区</option>
+                                {{# for(var i = 0, item; item = d[i++];) { }}
+                                <option value="{{item.areaId}}">{{item.areaName}}</option>
+                                {{# } }}
+                            </select>
+                        </script>
+                    </div>
+                    <div style="margin-left: -115px;" id="divCity">
+                        <div class="layui-input-block layui-form" id="areaCitySelectTemplateBox" lay-filter="areaCitySelectTemplateBox"></div>
+                        <script id="areaCitySelectTemplate" type="text/html">
+                            <select id="areaCity" name="areaCity" lay-filter="areaCity">
+                                <option value="">请选择所在区域-盟市</option>
+                                {{# for(var i = 0, item; item = d[i++];) { }}
+                                <option value="{{item.areaId}}">{{item.areaName}}</option>
+                                {{# } }}
+                            </select>
+                        </script>
+                    </div>
+                    <div style="margin-left: -115px;" id="divCounty">
+                        <div class="layui-input-block layui-form" id="areaCountySelectTemplateBox" lay-filter="areaCountySelectTemplateBox"></div>
+                        <script id="areaCountySelectTemplate" type="text/html">
+                            <select id="areaCounty" name="areaCounty" lay-filter="areaCounty">
+                                <option value="">请选择所在区域-旗县</option>
+                                {{# for(var i = 0, item; item = d[i++];) { }}
+                                <option value="{{item.areaId}}">{{item.areaName}}</option>
+                                {{# } }}
+                            </select>
+                        </script>
+                    </div>
+                    <div style="margin-left: -115px;" id="divRural">
+                        <div class="layui-input-block layui-form" id="areaRuralSelectTemplateBox" lay-filter="areaRuralSelectTemplateBox"></div>
+                        <script id="areaRuralSelectTemplate" type="text/html">
+                            <select id="areaRural" name="areaRural" lay-filter="areaRural">
+                                <option value="">请选择所在区域-乡村</option>
+                                {{# for(var i = 0, item; item = d[i++];) { }}
+                                <option value="{{item.areaId}}">{{item.areaName}}</option>
+                                {{# } }}
+                            </select>
+                        </script>
+                    </div>
+                    <div style="margin-left: -115px;" id="divStreet">
+                        <div class="layui-input-block layui-form" id="areaStreetSelectTemplateBox" lay-filter="areaStreetSelectTemplateBox"></div>
+                        <script id="areaStreetSelectTemplate" type="text/html">
+                            <select id="areaStreet" name="areaStreet" lay-filter="areaStreet">
+                                <option value="">请选择所在区域-街道</option>
+                                {{# for(var i = 0, item; item = d[i++];) { }}
+                                <option value="{{item.areaId}}">{{item.areaName}}</option>
+                                {{# } }}
+                            </select>
+                        </script>
+                    </div>
+                    <button id="search" class="layui-btn layui-btn-normal" style="width: 100%;margin-top:15px;">查询</button>
+                </div>
+            </div>
+        </div>
+        <div class="layui-col-lg10 layui-col-md10 layui-col-sm-10 layui-col-xs12">
+            <div class="layui-card">
+                <div class="layui-col-md12 layui-col-space10" id="threeMeetLessonTemplateBox"></div>
+                <script type="text/html" id="threeMeetLessonTemplate">
+                    {{# for ( var i = 0,item; item = d[i++];){ }}
+                    <div class="layui-col-md3">
+                        <div class="layui-card" style="border-radius: 5px;">
+                            <div class="layui-card-header">
+                                {{item.categoryName}}
+                            </div>
+                            <div class="layui-card-body layuiadmin-card-list">
+                                <p class="layuiadmin-big-font">{{item.counts}}</p>
+                            </div>
+                        </div>
+                    </div>
+                    {{# } }}
+                </script>
+            </div>
+        </div>
+        <div class="layui-col-lg10 layui-col-md10 layui-col-sm-10 layui-col-xs12">
+            <div class="layui-card">
+                <div class="layui-card-body" id="areaMapBox">
+                    <div id="mapContainer" style="width: 100%; height: 100%;"></div>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
-</div>
-<script type="text/javascript" src="assets/js/vue.min.js"></script>
+<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=2qzNKd33lQERUDakqDDyvLOyqM1x2i8y"></script>
 <script src="assets/layuiadmin/layui/layui.js"></script>
 <script>
     layui.config({
-        base: 'assets/layuiadmin/' //静态资源所在路径
+        base: 'assets/layuiadmin/'
     }).extend({
-        index: 'lib/index' //主入口模块
-    }).use(['index', 'animate-numbers'], function() {
+        index: 'lib/index'
+    }).use(['index', 'table', 'laydate', 'common', 'laytpl'], function() {
         var $ = layui.$;
-        new Vue({
-            el: '#LAY-app',
-            data: {},
-            methods: {},
-            mounted: function() {
-                var self = this;
+        var $win = $(window);
+        var table = layui.table;
+        var admin = layui.admin;
+        var laydate = layui.laydate;
+        var common = layui.common;
+        var laytpl = layui.laytpl;
+        var form = layui.form;
+        var map = null;
+        var markUserPoints = [];
+        var markersArray = [];
+        var markerList = [];
+
+        function initThreeMeetLessonData(){
+            top.restAjax.get(top.restAjax.path('api/threemeetlesson/countthreemeetlessondesc', []), {}, null, function(code, data) {
+                var item = data.data;
+                if(item.length > 4){
+                    item = item.slice(0,4);
+                }
+                laytpl($('#threeMeetLessonTemplate').html()).render(item,function (html){
+                    $('#threeMeetLessonTemplateBox').html(html);
+                    form.render();
+                });
+            }, function(code, data) {
+                top.dialog.message(data.msg);
+            });
+        }
+        initThreeMeetLessonData();
+
+        // 事件 - 搜索
+        $(document).on('click', '#search', function() {
+            reloadMap();
+        });
+
+        // 重载表格
+        function reloadMap() {
+            map.clearOverlays();
+            var loadLayerIndex;
+            var params = {};
+            var area = $('#area option:selected').val();
+            var areaCity = $('#areaCity option:selected').val();
+            var areaCounty = $('#areaCounty option:selected').val();
+            var areaRural = $('#areaRural option:selected').val();
+            var areaStreet = $('#areaStreet option:selected').val();
+            console.log(area)
+            if(area) {
+                params.area = area;
             }
-        })
+            if(areaCity) {
+                params.areaCity = areaCity;
+            }
+            if(areaCounty) {
+                params.areaCounty = areaCounty;
+            }
+            if(areaRural) {
+                params.areaRural = areaRural;
+            }
+            if(areaStreet) {
+                params.areaStreet = areaStreet;
+            }
+            top.restAjax.get(top.restAjax.path('api/partyorganize/listpartyorganize', []), params, null, function(code, data) {
+                // 划片
+                initPartyOrganize(data);
+            }, function(code, data) {
+                top.dialog.msg(data.msg);
+            });
+        }
+
+        // 重置页面大小
+        function resizePage() {
+            $('#areaConfigBox').css({
+                height: ($win.height() - 96) +'px'
+            });
+            $('#areaMapBox').css({
+                height: ($win.height() - 192) +'px'
+            });
+        }
+
+        resizePage();
+
+        // 地图初始化
+        function initMap() {
+            top.restAjax.get(top.restAjax.path('api/partyorganize/listpartyorganize', []), {}, null, function(code, data) {
+                var pointArray = [];
+                // 初始化地图
+                map = new BMap.Map('mapContainer', {
+                    enableMapClick: false,
+                });
+                map.disableDoubleClickZoom();
+                map.enableScrollWheelZoom();
+                map.centerAndZoom(new BMap.Point(109.845965, 40.664461), 11);
+                map.addControl(new BMap.NavigationControl());
+                map.addControl(new BMap.ScaleControl());
+                map.addControl(new BMap.OverviewMapControl());
+                map.addControl(new BMap.MapTypeControl({
+                        mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
+                        anchor: BMAP_ANCHOR_BOTTOM_RIGHT
+                    })
+                );
+                initPartyOrganize(data);
+            }, function(code, data) {
+                top.dialog.msg(data.msg);
+            });
+        }
+
+        initMap();
+
+        function initPartyOrganize(data) {
+            for(var i = 0, item = data[i]; item = data[i++];) {
+                var point = new BMap.Point(item.longitude, item.latitude);
+                var imgSrc = 'route/file/downloadfile/false/' + item.logo;
+                var el = createMark(point, imgSrc, item.partyOrganizeId);
+                /*var img = new BMap.Icon(markerImg, new BMap.Size(48, 48), {imageOffset: new BMap.Size(0, 0)});
+                var marker = new BMap.Marker(point, {icon: markerImg});
+                /!*var marker = new BMap.Marker(point);*!/
+                map.addOverlay(marker);*/
+                // showPartyOrganize(item.partyOrganizeId, el);
+            }
+        }
+
+        function showPartyOrganize(partyOrganizeId) {
+            top.dialog.open({
+                url: top.restAjax.path('route/defaultindex/include.html?partyOrganizeId={partyOrganizeId}', [partyOrganizeId]),
+                title: '详情',
+                width: '1040px',
+                height: '98%',
+                onClose: function(data) {
+
+                }
+            });
+        }
+
+        // 初始状态下，盟市、旗县、乡村、街道这几个选项隐藏
+        function showHide() {
+            $('#divCity').hide();
+            $('#divCounty').hide();
+            $('#divRural').hide();
+            $('#divStreet').hide();
+        }
+
+        showHide();
+
+        // 初始化所在区域-自治区下拉选择
+        function initAreaSelect() {
+            top.restAjax.get(top.restAjax.path('app/dataarea/listareabyparentidrelease/0', []), {}, null, function(code, data, args) {
+                laytpl(document.getElementById('areaSelectTemplate').innerHTML).render(data, function(html) {
+                    document.getElementById('areaSelectTemplateBox').innerHTML = html;
+                });
+                form.render('select', 'areaSelectTemplateBox');
+            }, function(code, data) {
+                top.dialog.msg(data.msg);
+            });
+        }
+
+        // 初始化所在区域-盟市下拉选择
+        function initAreaCitySelect(value) {
+            if(!value) {
+                var data = [
+                    {
+                        areaId: '',
+                        areaName: '请选择上级数据'
+                    }
+                ];
+                laytpl(document.getElementById('areaCitySelectTemplate').innerHTML).render(data, function(html) {
+                    document.getElementById('areaCitySelectTemplateBox').innerHTML = html;
+                });
+                form.render('select', 'areaCitySelectTemplateBox');
+            }else {
+                top.restAjax.get(top.restAjax.path('app/dataarea/listareabyparentidrelease/' + value, []), {}, null, function(code, data, args) {
+                    laytpl(document.getElementById('areaCitySelectTemplate').innerHTML).render(data, function(html) {
+                        document.getElementById('areaCitySelectTemplateBox').innerHTML = html;
+                    });
+                    form.render('select', 'areaCitySelectTemplateBox');
+                }, function(code, data) {
+                    top.dialog.msg(data.msg);
+                });
+            }
+        }
+
+        // 初始化所在区域-旗县下拉选择
+        function initAreaCountySelect(value) {
+            if(!value) {
+                var data = [
+                    {
+                        areaId: '',
+                        areaName: '请选择上级数据'
+                    }
+                ];
+
+                laytpl(document.getElementById('areaCountySelectTemplate').innerHTML).render(data, function(html) {
+                    document.getElementById('areaCountySelectTemplateBox').innerHTML = html;
+                });
+                form.render('select', 'areaCountySelectTemplateBox');
+            }else {
+                top.restAjax.get(top.restAjax.path('app/dataarea/listareabyparentidrelease/' + value, []), {}, null, function(code, data, args) {
+                    laytpl(document.getElementById('areaCountySelectTemplate').innerHTML).render(data, function(html) {
+                        document.getElementById('areaCountySelectTemplateBox').innerHTML = html;
+                    });
+                    form.render('select', 'areaCountySelectTemplateBox');
+                }, function(code, data) {
+                    top.dialog.msg(data.msg);
+                });
+            }
+        }
+
+        // 初始化所在区域-乡村下拉选择
+        function initAreaRuralSelect(value) {
+            if(!value) {
+                var data = [
+                    {
+                        areaId: '',
+                        areaName: '请选择上级数据'
+                    }
+                ];
+
+                laytpl(document.getElementById('areaRuralSelectTemplate').innerHTML).render(data, function(html) {
+                    document.getElementById('areaRuralSelectTemplateBox').innerHTML = html;
+                });
+                form.render('select', 'areaRuralSelectTemplateBox');
+            }else {
+                top.restAjax.get(top.restAjax.path('app/dataarea/listareabyparentidrelease/' + value, []), {}, null, function(code, data, args) {
+                    laytpl(document.getElementById('areaRuralSelectTemplate').innerHTML).render(data, function(html) {
+                        document.getElementById('areaRuralSelectTemplateBox').innerHTML = html;
+                    });
+                    form.render('select', 'areaRuralSelectTemplateBox');
+                }, function(code, data) {
+                    top.dialog.msg(data.msg);
+                });
+            }
+        }
+
+        // 初始化所在区域-街道下拉选择
+        function initAreaStreetSelect(value) {
+            if(!value) {
+                var data = [
+                    {
+                        areaId: '',
+                        areaName: '请选择上级数据'
+                    }
+                ];
+
+                laytpl(document.getElementById('areaStreetSelectTemplate').innerHTML).render(data, function(html) {
+                    document.getElementById('areaStreetSelectTemplateBox').innerHTML = html;
+                });
+                form.render('select', 'areaStreetSelectTemplateBox');
+            }else {
+                top.restAjax.get(top.restAjax.path('app/dataarea/listareabyparentidrelease/' + value, []), {}, null, function(code, data, args) {
+                    laytpl(document.getElementById('areaStreetSelectTemplate').innerHTML).render(data, function(html) {
+                        document.getElementById('areaStreetSelectTemplateBox').innerHTML = html;
+                    });
+                    form.render('select', 'areaStreetSelectTemplateBox');
+                }, function(code, data) {
+                    top.dialog.msg(data.msg);
+                });
+            }
+        }
+
+        // 所在区域-自治区change事件
+        form.on('select(area)', function(data){
+            if(!data.value) {
+                $('#areaName').val('')
+                $('#divCity').hide();
+                $('#city').empty();
+                $('#divCounty').hide();
+                $('#county').empty();
+                $('#divRural').hide();
+                $('#rural').empty();
+                $('#divStreet').hide();
+                $('#street').empty();
+            }else {
+                $('#areaName').val($("#area").find("option:selected").text())
+                $('#divCity').show();
+                $('#divCounty').hide();
+                $('#county').empty();
+                $('#divRural').hide();
+                $('#rural').empty();
+                $('#divStreet').hide();
+                $('#street').empty();
+                initAreaCitySelect(data.value);
+            }
+            $("#areaCity").empty();
+            form.render("select");
+        });
+
+        // 所在区域-盟市change事件
+        form.on('select(areaCity)', function(data){
+            if(!data.value) {
+                $('#areaCityName').val('')
+                $('#divCounty').hide();
+                $('#county').empty();
+                $('#divRural').hide();
+                $('#rural').empty();
+                $('#divStreet').hide();
+                $('#street').empty();
+            }else {
+                $('#areaCityName').val($("#areaCity").find("option:selected").text())
+                $('#divCounty').show();
+                $('#divRural').hide();
+                $('#rural').empty();
+                $('#divStreet').hide();
+                $('#street').empty();
+                initAreaCountySelect(data.value);
+            }
+            $("#areaCounty").empty();
+            form.render("select");
+        });
+
+        // 所在区域-旗县change事件
+        form.on('select(areaCounty)', function(data){
+            if(!data.value) {
+                $('#areaCountyName').val('')
+                $('#divRural').hide();
+                $('#rural').empty();
+                $('#divStreet').hide();
+                $('#street').empty();
+            }else {
+                $('#areaCountyName').val($("#areaCounty").find("option:selected").text())
+                $('#divRural').show();
+                $('#divStreet').hide();
+                $('#street').empty();
+                initAreaRuralSelect(data.value);
+            }
+            $("#areaRural").empty();
+            form.render("select");
+        });
+
+        // 所在区域-乡村change事件
+        form.on('select(areaRural)', function(data){
+            if(!data.value) {
+                $('#areaRuralName').val('')
+                $('#divStreet').hide();
+                $('#street').empty();
+            }else {
+                $('#areaRuralName').val($("#areaRural").find("option:selected").text())
+                $('#divStreet').show();
+                initAreaStreetSelect(data.value);
+            }
+            $("#areaStreet").empty();
+            form.render("select");
+        });
+
+        // 所在区域-街道change事件
+        form.on('select(areaStreet)', function(data){
+            if(!data.value) {
+                $('#areaStreetName').val('')
+            }else {
+                $('#areaStreetName').val($("#areaStreet").find("option:selected").text())
+            }
+        });
+
+        // 初始化内容
+        function initData() {
+            initAreaSelect();
+        }
+        initData();
+
+        function creatMarkerDiv (imgSrc) {
+            /*var oContainer = document.getElementsByClassName('container');*/
+            var oDiv = document.createElement('div');
+            oDiv.className = 'marker-container';
+            var oTop = document.createElement('div');
+            oTop.className = 'top';
+            console.log(oTop);
+            var img = new Image();
+            img.src = imgSrc;
+            var oMid = document.createElement('div');
+            oMid.className = 'mid'
+            var oBottom = document.createElement('div');
+            oBottom.className = 'bottom'
+            /*oContainer[0].appendChild(oDiv);*/
+            oDiv.appendChild(oTop);
+            oTop.appendChild(img);
+            oDiv.appendChild(oMid);
+            oDiv.appendChild(oBottom);
+            return oDiv;
+        }
+
+        // 给地图添加点
+        function createMark(point, imgSrc, partyOrganizeId) {
+            // 定义绘制图标方法
+            function customizeOverlay(center, length){
+                this._center = center;
+                this._length = length;
+            }
+            customizeOverlay.prototype = new BMap.Overlay();
+
+            customizeOverlay.prototype.initialize = function(map){
+                // 保存map对象实例
+                map = map;
+
+                // 创建div元素，作为自定义覆盖物的容器
+                var el = creatMarkerDiv(imgSrc);
+
+                // 将el添加到覆盖物容器中
+                map.getPanes().markerPane.appendChild(el);
+
+                // 监听点击
+                $(el).on('click', function(e){
+                    showPartyOrganize(partyOrganizeId);
+                })
+
+                // 保存div实例
+                this._div = el;
+                // 需要将el元素作为方法的返回值，当调用该覆盖物的show、hide方法，或者对覆盖物进行移除时，API都将操作此元素。
+                return el;
+            }
+
+            // 根据地理坐标转换为像素坐标，并设置给容器
+            customizeOverlay.prototype.draw = function(){
+                var position = map.pointToOverlayPixel(this._center);
+                this._div.style.left = position.x - this._length / 2 + "px";
+                this._div.style.top = position.y - this._length / 2 + "px";
+            };
+
+            var mark = new customizeOverlay(point, 36);
+            markerList.push(mark); // 把mak加入到数组中方便下次添加mark时清除原有点和操作选中状态
+            map.addOverlay(mark);
+        }
+
     });
 </script>
 </body>
