监督端-综合分析1部分接口

lib/EmergencyService/zdxtEmergencyBootStart/src/main/resources/templates/project/code/comprehensiveAnalysis/comprehensiveAnalysis.html

@@ -0,0 +1,249 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+    <th:block th:include="include :: header('执法投诉统计')"/>
+    <link type="text/css" href="/css/stat1.css" rel="stylesheet"/>
+    <link href="/layui/css/layui.css" rel="stylesheet">
+    <style>
+
+        .address-on {
+            background-color: blue;
+            color: white;
+        }
+
+        .addressList {
+            display: flex;
+        }
+    </style>
+</head>
+<body>
+<div class="container-div">
+    <div style="display: flex">
+        <div style="padding: 15px">
+            <div style="display:flex;">
+                <div onmouseover="addressShow()">
+                    区域
+                </div>
+                <div id="addressText">全市</div>
+            </div>
+            <div id="addressList" class="addressList" onmouseleave="addressHide()">
+                <ul class="" id="qy" th:with="type=${@dict.getType('address_type')}">
+                    <li value="" id="QS" onclick="onQY(this)">全市</li>
+                    <li th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
+                        th:id="${dict.dictValue}"
+                        onclick="onQY(this)"></li>
+                </ul>
+                <ul class="" id="jd">
+                </ul>
+            </div>
+
+        </div>
+        <div style="padding: 15px">
+            <div style="display: flex">
+                <div onmouseover="dateShow()">
+                    时段
+                </div>
+                <div id="dateText">
+
+                </div>
+            </div>
+            <div id="dateList" onmouseleave="dateHide()" style="display:flex;">
+                <div id="dateType">
+                    <li value="year" id="year" onclick="onDateType(value)">年度</li>
+                    <li value="quarter" id="quarter" onclick="onDateType(value)">季度</li>
+                    <li value="month" id="month" onclick="onDateType(value)">月度</li>
+                    <li value="day" id="day" onclick="onDateType(value)">自定义</li>
+                </div>
+                <div id="yearList">
+                    <li th:each="y:${yearList}" th:text="|${y}年|" th:value="${y}" th:id="${y}" onclick="onYear(value)"></li>
+                </div>
+                <div id="quarterList">
+                    <li value="1" id="quarter1" onclick="onQuarter(value)">第一季度</li>
+                    <li value="2" id="quarter2" onclick="onQuarter(value)">第二季度</li>
+                    <li value="3" id="quarter3" onclick="onQuarter(value)">第三季度</li>
+                    <li value="4" id="quarter4" onclick="onQuarter(value)">第四季度</li>
+                </div>
+                <div id="monthList">
+                    <li value="01" id="month01" onclick="onQuarter(value)">1月</li>
+                    <li value="02" id="month02" onclick="onQuarter(value)">2月</li>
+                    <li value="03" id="month03" onclick="onQuarter(value)">3月</li>
+                    <li value="04" id="month04" onclick="onQuarter(value)">4月</li>
+                    <li value="05" id="month05" onclick="onQuarter(value)">5月</li>
+                    <li value="06" id="month06" onclick="onQuarter(value)">6月</li>
+                    <li value="07" id="month07" onclick="onQuarter(value)">7月</li>
+                    <li value="08" id="month08" onclick="onQuarter(value)">8月</li>
+                    <li value="09" id="month09" onclick="onQuarter(value)">9月</li>
+                    <li value="10" id="month10" onclick="onQuarter(value)">10月</li>
+                    <li value="11" id="month11" onclick="onQuarter(value)">11月</li>
+                    <li value="12" id="month12" onclick="onQuarter(value)">12月</li>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<th:block th:include="zdxtInclude :: footer"/>
+<script type="text/javascript" src="/js/echarts.min.js"></script>
+<script type="text/javascript" src="/js/bootstrap.min.js"></script>
+<script src="/layui/layui.js"></script>
+<script th:inline="javascript">
+    var prefix = ctx + "code/comprehensiveAnalysis";
+    var prefixDictData = ctx + "system/dict/data";
+    var onQYId = "QS";
+    var onJDId = 0;
+    var onDateType="year";
+    var onYearId=0;
+    var onQuarterId=0;
+    var onMonthId=0;
+    var beginTime="";
+    var endTime="";
+    var yearList=[[${yearList}]];
+    window.onload = function () {
+        $('#addressList').hide();
+        $('#jd').hide();
+        $('#dateList').hide();
+        $('#quarterList').hide();
+        $('#monthList').hide();
+        var addQY = document.getElementById(onQYId);
+        addQY.className = "address-on"
+        var addDateType=document.getElementById("year");
+        addDateType.className= "address-on"
+        onYearId=yearList[0];
+        var addYear=document.getElementById(onYearId);
+        addYear.className= "address-on"
+        getDateTypeText();
+    };
+
+    function addressShow() {
+        $('#addressList').show();
+    }
+
+    function addressHide() {
+        $('#addressList').hide();
+    }
+    function dateHide(){
+        $('#dateList').hide();
+    }
+
+    function dateShow() {
+        $('#dateList').show()
+    }
+
+    function onQY(value) {
+        console.log(value)
+        var remove = document.getElementById(onQYId);
+        console.log(remove)
+        // remove.classList.remove('address-on');
+        remove.className = ""
+        onQYId = value.id;
+        /*        var add = document.getElementById(value.dataset.value);
+                console.log(add)*/
+        // add.classList.add('address-on');
+        value.className = "address-on"
+        getAddressText();
+        resetJd();
+        if (onQYId != "QS") {
+            getJDList()
+        }
+    }
+
+    function onJD(value) {
+        console.log(value)
+        var remove = document.getElementById("jd" + onJDId);
+        console.log(remove)
+        // remove.classList.remove('address-on');
+        remove.className = ""
+        onJDId = value.value;
+        value.className = "address-on"
+        getAddressText();
+    }
+
+    function resetJd() {
+        /*        var remove = document.getElementById('jd' + onJDId);
+                remove.className = ""
+                console.log(remove)
+                onJDId = 0;
+                var add = document.getElementById("jd0");
+                console.log(add)
+                // add.classList.add('address-on');
+                add.className = "address-on"*/
+        $('#jd').hide();
+        onJDId = 0;
+        $('#jd li').remove();
+    }
+
+    function getJDList() {
+        $.ajax({
+            url: prefixDictData + '/queryDict',
+            type: 'GET',
+            data: {
+                dictType: onQYId
+            },
+            success: function (response) {
+                console.log(response)
+                // 清空原有的列表项，除了第一个“全区”项
+                $('#jd li').remove();
+                var jd0 = $('<li></li>');
+                jd0.text("全区");
+                jd0.attr('value', "");
+                jd0.attr('id', 'jd0');
+                jd0.attr('onclick', 'onJD(this)');
+                $('#jd').append(jd0);
+                var addJD = document.getElementById("jd0");
+                addJD.className = "address-on"
+                // 动态添加新的列表项
+                $.each(response.data, function (index, dict) {
+                    var newLi = $('<li></li>');
+                    newLi.text(dict.dictLabel);
+                    newLi.attr('value', dict.dictValue);
+                    newLi.attr('id', 'jd' + dict.dictSort);
+                    newLi.attr('onclick', 'onJD(this)');
+                    $('#jd').append(newLi);
+                });
+                $('#jd').show();
+            }
+        })
+    }
+    function getAddressText(){
+        var addressText = "全市";
+        if (onQYId != "QS") {
+            var qyText = document.getElementById(onQYId);
+            console.log(qyText)
+            addressText = qyText.textContent;
+            if (onJDId != 0) {
+                var jdText = document.getElementById("jd" + onJDId);
+                console.log(jdText)
+                addressText = addressText + ' ' + jdText.textContent;
+            }
+        }
+        $('#addressText').text(addressText)
+    }
+    function onYear(value){
+        var remove = document.getElementById(onYearId);
+        console.log(remove)
+        remove.className = "";
+        var add = document.getElementById(value);
+        console.log(add)
+        add.className = "address-on";
+        onYearId=value;
+        getDateTypeText()
+    }
+    function getDateTypeText(){
+        var dateText="";
+        if(onDateType=="year"){
+            dateText=onYearId+"年";
+        }else if (onDateType=="quarter"){
+            var quarter = document.getElementById(onQuarterId);
+            dateText=onYearId+"年"+quarter.textContent;
+        }else if (onDateType=="month"){
+            var month = document.getElementById(onMonthId);
+            dateText=onYearId+"年"+month.textContent;
+        }else if (onDateType=="day"){
+            dateText="自定义"
+        }
+        $('#dateText').text(dateText)
+    }
+</script>
+</body>
+</html>