From 56de22fe4166f68601b68b9c57df32cc44425993 Mon Sep 17 00:00:00 2001
From: zmk <496160012@qq.com>
Date: 星期六, 18 五月 2024 14:44:35 +0800
Subject: [PATCH] 提交代码
---
javaweb-plus/javaweb-admin/src/main/resources/templates/main.html | 607 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 592 insertions(+), 15 deletions(-)
diff --git a/javaweb-plus/javaweb-admin/src/main/resources/templates/main.html b/javaweb-plus/javaweb-admin/src/main/resources/templates/main.html
index b91925c..ce0adc3 100644
--- a/javaweb-plus/javaweb-admin/src/main/resources/templates/main.html
+++ b/javaweb-plus/javaweb-admin/src/main/resources/templates/main.html
@@ -35,19 +35,23 @@
</div>
<div class="col-sm-4">
- <div>
- <div class="col-md-6">
- <span style="font-size:16px;font-weight: bold;line-height: 40px;">鐩戠鍗曚綅椤圭洰缁熻</span>
+ <div >
+ <div style="width: 100%;height: 20px;">
+ <h3>椤圭洰鎬讳綋杩涘害(%)</h3>
</div>
- <div class="col-md-6" style="z-index:1;">
- <div class="btn-group statistic-btn" style="float: right">
- <button class="btn btn-white" type="button">鎬昏</button>
- <button class="btn btn-white" type="button">鏈勾搴�</button>
- <button class="btn btn-white" type="button">鏈湀搴�</button>
- </div>
- </div>
+ <div id="Chart1" style="width: 80%;height: 250px;margin-left: 10%;"></div>
</div>
- <div id="rank_chart" style="width: 100%;height: 600px;margin-top: 10px"></div>
+
+ <div >
+ <div style="width: 100%;height: 20px;">
+ <h3>鍦哄湴璇︾粏杩涘害(%)</h3>
+ </div>
+ <div style="width: 100%;height: 500px;overflow: auto">
+ <div id="Chart2" style="width: 100%;height: 1500px;"></div>
+ </div>
+
+ </div>
+
</div>
</div>
</div>
@@ -61,15 +65,588 @@
<script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
<script th:src="@{/ajax/libs/report/echarts/echarts-all.js}"></script>
<script th:src="@{/js/tdt.js}" type="text/javascript"></script>
-
<script src="http://lbs.tianditu.gov.cn/js/lib/d3/d3.min.js" type="text/javascript"></script>
<script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/D3SvgOverlay.js" type="text/javascript"></script>
-
<script th:src="@{/js/custom/main.js}"></script>
-
<th:block th:include="include :: sparkline-js" />
-
<th:block th:include="include :: footer" />
+ <script th:inline="javascript">
+
+ $(function() {
+ loadMap();
+ getReallyData();
+ totalProcess();
+ stationProcess();
+
+ })
+ // 鍔犺浇鍦板浘
+ let map=null;
+ var countries = [];
+ var countriesOverlay = new T.D3Overlay(init,redraw);
+ var countriesOverlay1 = new T.D3Overlay(init1,redraw1);
+ function loadMap() {
+ map = new T.Map('map_div');
+ map.centerAndZoom(new T.LngLat(116.38, 40.2), 9);
+
+ var control = new T.Control.Zoom();
+ control.setPosition(T_ANCHOR_TOP_RIGHT);
+ map.addControl(control);// 娣诲姞缂╂斁骞崇Щ鎺т欢
+ var scale = new T.Control.Scale();// 鍒涘缓姣斾緥灏烘帶浠跺璞�
+ d3.json("/bjfw/js/custom/beijing.json", function (data) {
+ countries = data.features;
+ map.addOverLay(countriesOverlay)
+ countriesOverlay.bringToBack();
+ map.addOverLay(countriesOverlay1)
+ countriesOverlay.bringToBack();
+ });
+ }
+
+ function init(sel, transform) {
+ var upd = sel.selectAll('path.geojson').data(countries);
+ upd.enter()
+ .append('path')
+ .attr("class", "geojson")
+ .attr('stroke', 'grey')
+ .attr('fill', function (d, i) {
+ //return d3.hsl(Math.random() * 360, 0.9, 0.5)
+ return "transparent"
+ })
+ .attr('fill-opacity', '0')
+ }
+ function redraw(sel, transform) {
+ sel.selectAll('path.geojson').each(
+ function (d, i) {
+ d3.select(this).attr('d', transform.pathFromGeojson)
+ }
+ )
+ }
+ function init1(sel, transform) {
+ var upd = sel.selectAll('path.geojson1').data(countries);
+ upd.enter()
+ .append('path')
+ .attr("class", "geojson1")
+ .attr('stroke', 'grey')
+ .attr('fill', function (d, i) {
+ return d3.hsl(Math.random() * 360, 0.9, 0.5)
+ })
+ .attr('fill-opacity', '0.1')
+ }
+
+ function redraw1(sel, transform) {
+ sel.selectAll('path.geojson1').each(
+ function (d, i) {
+ d3.select(this).attr('d', transform.pathFromGeojson)
+ }
+ )
+ }
+
+ // 鑾峰彇鏁版嵁搴撶湡瀹炴暟鎹�
+ function getReallyData() {
+ let url = window.location.protocol + "//" + window.location.host + "/bjfw/system/project";
+ $.get(url,function(res){
+ var data = res.projects;
+ showProjectPoint(data);
+ })
+ }
+ //鍦板浘涓婂睍绀洪」鐩偣
+ function showProjectPoint(data){
+ var projectIcon = new T.Icon({
+ iconUrl: '/bjfw/images/icon/6.png',
+ iconSize: new T.Point(30, 30),
+ iconAnchor: new T.Point(6, 40),
+ });
+ for(let i =0;i<data.length;i++){
+ let lng = data[i].lng;
+ let lat = data[i].lat;
+ let marker = new T.Marker(new T.LngLat(lng, lat), { title: "鍦哄湴浣嶇疆",icon:projectIcon});
+ let proj = infoWindowProject(data[i]);
+ addClickHandler(proj, marker);
+ map.addOverLay(marker);
+ }
+
+ }
+
+ function infoWindowProject(e){
+
+ let ids = e.ids + "";
+ var sContent =
+ "<div style='margin:0px;'>" +
+ "<div>" +
+ "<div style='margin:1px 0px 1px 2px;width: 200px;'>" +
+ "<font style='font-weight: bolder;'>鍦哄湴缂栧彿 :</font>" + e.code + "<br>" +
+ "<font style='font-weight: bolder;'>鍦哄湴鍚嶅瓧 :</font>" + e.fullName + "<br>" +
+ "<font style='font-weight: bolder;'>璐熻矗浜� :</font>" + e.leader + "<br>" +
+ "<a class='btn' onclick=viewdata(" +"'" + ids+ "'" + ")>鍦哄湴鏁版嵁</a>" +
+ "</div>" +
+ "</div>" +
+ "</div>";
+ return sContent;
+ }
+ function viewdata (id) {
+ $.modal.openTab("鍦哄湴瀵艰埅",ctx+ "/geo/project/navigate?ids="+id);
+ }
+
+ function addClickHandler(content, marker) {
+ marker.addEventListener("click", function (e) {
+ openInfo(content, e)
+ });
+ }
+
+ function openInfo(content, e) {
+ var point = e.lnglat;
+ var markerInfoWin = new T.InfoWindow(content, { offset: new T.Point(0, -30) }); // 鍒涘缓淇℃伅绐楀彛瀵硅薄
+ map.openInfoWindow(markerInfoWin, point); //寮�鍚俊鎭獥鍙�
+ }
+
+ //鎬昏繘搴︿华琛ㄧ洏
+ function totalProcess() {
+ var Chart1 = echarts.init(document.getElementById('Chart1'));
+ var pointerData = 0; // 浠〃鎸囬拡鏁版嵁
+ let url = ctx + "/system/totalProcess";
+ $.ajaxSettings.async = false;
+ $.get(url,{},function(res){
+ pointerData = res.pointerData;
+ pointerData = (pointerData*100).toFixed(0);
+ })
+ $.ajaxSettings.async = false;
+ var option = {
+ backgroundColor: "#fff",
+ series: [
+ {
+ type: "gauge",
+ radius: 120,
+ z: 1,
+ startAngle: 225,
+ endAngle: -45,
+ splitNumber: 50,
+ title: {
+ color: "red",
+ },
+ splitLine: {
+ show: true,
+ length: 15,
+ distance: -10,
+ lineStyle: {
+ color: "#fff",
+ width: 1,
+ },
+ },
+ detail: {
+ show: true,
+ offsetCenter: [0, 60],
+ fontSize: 22,
+ formatter: (val) => [`{a|${val}}`, `{b|%}`].join(""),
+ rich: {
+ a: {
+ fontSize: 20,
+ color: "rgba(84, 108, 198, 0.65)",
+ },
+ b: {
+ fontSize: 24,
+ color: "rgba(84, 108, 198, 0.65)",
+ },
+ },
+ },
+ // 浠〃鐩樼殑绾匡紝棰滆壊鍊间负涓�涓暟缁�
+ axisLine: {
+ show: true,
+ // 涓ょ鏄惁璁剧疆涓哄渾瑙掞紱鍦�5.0涔嬪悗鐨勭増鏈湁鏁�
+ roundCap: false,
+ lineStyle: {
+ width: 15,
+ shadowColor: "#0093ee", //榛樿閫忔槑
+ shadowOffsetX: 0,
+ shadowOffsetY: 0,
+ shadowBlur: 20,
+ opacity: 1,
+ color: [
+ [
+ pointerData / 100,
+ {
+ x: 0,
+ y: 0,
+ x1: 1,
+ y1: 0,
+ colorStops: [
+ {
+ offset: 0,
+ color: "rgba(0, 255, 255, 0.6)",
+ },
+ {
+ offset: 1,
+ color: "rgba(0, 0, 255, .6)",
+ },
+ ],
+ },
+ ],
+ [1, "rgba(0,0,0,0.15)"],
+ ],
+ },
+ },
+ // 浠〃鐩樺埢搴︽爣绛�
+ axisLabel: {
+ show: true,
+ color: "rgba(84, 108, 198, 0.65)",
+ fontSize: 14,
+ distance: 20,
+ formatter: (val) => {
+ const num = Math.floor(val);
+ return num % 20 === 0 ? num : "";
+ },
+ },
+ // 鍒诲害
+ axisTick: {
+ show: false,
+ },
+ // 鎸囬拡锛屾璁剧疆浠呭5.0浠ヤ笂鐨勭増鏈敓鏁�
+ anchor: {
+ show: true,
+ icon: "circle",
+ showAbove: true,
+ size: 20,
+ itemStyle: {
+ borderWidth: 6,
+ borderColor: "rgba(84, 108, 198, 0.85)",
+ },
+ },
+ data: [pointerData],
+ },
+ {
+ // 鑳屾櫙娓愬彉鑹�
+ type: "pie",
+ radius: "80%",
+ // 涓嶅搷搴斿強瑙﹀彂榧犳爣浜嬩欢
+ silent: true,
+ // 鍏抽棴鑳屾櫙鍔ㄧ敾
+ animation: false,
+ z: 0,
+ itemStyle: {
+ color: {
+ type: "radial", // 寰勫悜娓愬彉
+ x: 0.5,
+ y: 0.5,
+ r: 0.25,
+ colorStops: [
+ {
+ offset: 0,
+ color: "rgba(84, 103, 198, 0.6)",
+ },
+ {
+ offset: 0.1,
+ color: "rgba(84, 103, 198, 0.35)",
+ },
+ {
+ offset: 1,
+ color: "rgba(84, 103, 198, 0)",
+ },
+ ],
+ },
+ },
+ data: [pointerData],
+ },
+ ],
+ };
+ Chart1.setOption(option);
+ }
+
+ var datas = [
+ { ranking: 1, station: '鍦哄湴001', value: 85 },
+ { ranking: 2, station: '鍦哄湴002', value: 22 },
+ { ranking: 3, station: '鍦哄湴003', value: 33 },
+ { ranking: 4, station: '鍦哄湴004', value: 40 },
+ { ranking: 5, station: '鍦哄湴005', value: 33 },
+ { ranking: 6, station: '鍦哄湴006', value: 14.97 },
+ { ranking: 7, station: '鍦哄湴007', value: 13.03 },
+ { ranking: 8, station: '鍦哄湴008', value: 18.48 },
+ { ranking: 9, station: '鍦哄湴009', value: 16.74 },
+ { ranking: 10, station: '鍦哄湴010', value: 14.97 },
+
+ { ranking: 11, station: '鍦哄湴011', value: 13.03 },
+ { ranking: 12, station: '鍦哄湴012', value: 18.48 },
+
+ { ranking: 13, station: '鍦哄湴013', value: 16.74 },
+ { ranking: 14, station: '鍦哄湴014', value: 14.97 },
+ { ranking: 15, station: '鍦哄湴015', value: 13.03 },
+ { ranking: 16, station: '鍦哄湴016', value: 18.48 },
+
+ { ranking: 17, station: '鍦哄湴017', value: 16.74 },
+ { ranking: 18, station: '鍦哄湴018', value: 14.97 },
+ { ranking: 19, station: '鍦哄湴019', value: 13.03 },
+ { ranking: 20, station: '鍦哄湴020', value: 18.48 },
+
+ { ranking: 21, station: '鍦哄湴021', value: 16.74 },
+ { ranking: 22, station: '鍦哄湴022', value: 14.97 },
+ { ranking: 23, station: '鍦哄湴023', value: 13.03 },
+ { ranking: 24, station: '鍦哄湴024', value: 18.48 },
+
+ { ranking: 25, station: '鍦哄湴025', value: 16.74 },
+ { ranking: 26, station: '鍦哄湴026', value: 14.97 },
+ { ranking: 27, station: '鍦哄湴027', value: 13.03 },
+ { ranking: 28, station: '鍦哄湴028', value: 18.48 },
+
+ { ranking: 29, station: '鍦哄湴029', value: 13.03 },
+ { ranking: 30, station: '鍦哄湴030', value: 18.48 },
+ { ranking: 31, station: '鍦哄湴031', value: 13.03 },
+ { ranking: 32, station: '鍦哄湴032', value: 18.48 },
+ { ranking: 33, station: '鍦哄湴033', value: 13.03 },
+ { ranking: 34, station: '鍦哄湴034', value: 18.48 },
+ ];
+
+
+ var seriesName = ['宸插畬鎴愯繘搴�','鎬昏繘搴�'];
+ var attackSourcesColor1 = ['#FF557F','#FFAA00','#5470C6','#1E9FFF'];
+
+ var attackSourcesColor = [
+ new echarts.graphic.LinearGradient(0, 1, 1, 1, [
+ { offset: 0, color: 'rgba(255,85,127,1)' },
+ { offset: 1, color: 'rgba(255,85,127,1)' },
+ ]),
+ new echarts.graphic.LinearGradient(0, 1, 1, 1, [
+ { offset: 0, color: 'rgba(255,170,0,1)' },
+ { offset: 1, color: 'rgba(255,170,0,1)' },
+ ]),
+ new echarts.graphic.LinearGradient(0, 1, 1, 1, [
+ { offset: 0, color: 'rgba(84,112,198,1)' },
+ { offset: 1, color: 'rgba(84,112,198,1)' },
+ ]),
+ new echarts.graphic.LinearGradient(0, 1, 1, 1, [
+ { offset: 0, color: 'rgba(30,159,255,.82)' },
+ { offset: 1, color: 'rgba(30,159,255,.82)' },
+ ]),
+ ];
+
+ function stationProcess() {
+
+ let url = ctx + "/system/projectProcess";
+ $.ajaxSettings.async = false;
+ $.get(url,{},function(res){
+ console.log(res.projectData);
+ datas = res.projectData;
+ })
+ $.ajaxSettings.async = false;
+
+
+ var Chart2 = echarts.init(document.getElementById('Chart2'));
+ var rankings = [];
+ var stationData = [];
+ var values = [];
+
+ datas.forEach(function (it, index) {
+ rankings.push(it.ranking);
+ stationData.push(it.station);
+ values.push(it.value);
+ });
+
+ option = {
+ // backgroundColor: '#000',
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ },
+ },
+
+ grid: {
+ left: '-8%',
+ right: '2%',
+ bottom: '3%',
+ top:'2%',
+ containLabel: true,
+ },
+ xAxis: {
+ type: 'value',
+ splitLine: {
+ show: false,
+ },
+ axisLabel: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLine: {
+ show: false,
+ },
+ },
+ yAxis: [
+ {
+ type: 'category',
+ inverse: true,
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ data: stationData,
+ axisLabel: {
+ margin: 30,
+ fontSize: 14,
+ align: 'left',
+ padding: [3, 0, 0, 0],
+ color: '#000',
+ rich: {
+ nt1: {
+ color: '#fff',
+ backgroundColor: attackSourcesColor1[0],
+ width: 20,
+ height: 18,
+ fontSize: 12,
+ align: 'center',
+ borderRadius: 50,
+ lineHeight: '5',
+ padding: [2, 0, 0, 0],
+ // padding:[0,0,2,0],
+ },
+ nt2: {
+ color: '#fff',
+ backgroundColor: attackSourcesColor1[1],
+ width: 20,
+ height: 18,
+ fontSize: 12,
+ align: 'center',
+ borderRadius: 50,
+ padding: [2, 0, 0, 0],
+ },
+ nt3: {
+ color: '#fff',
+ backgroundColor: attackSourcesColor1[2],
+ width: 20,
+ height: 18,
+ fontSize: 12,
+ align: 'center',
+ borderRadius: 50,
+ padding: [2, 0, 0, 0],
+ },
+ nt: {
+ color: '#fff',
+ backgroundColor: attackSourcesColor1[3],
+ width: 20,
+ height: 18,
+ fontSize: 12,
+ align: 'center',
+ borderRadius: 50,
+ padding: [2, 0, 0, 0],
+ },
+ },
+ formatter: function (value, index) {
+ index = contains(stationData, value) + 1;
+ if (index - 1 < 3) {
+ return ['{nt' + index + '|' + index + '}'].join('\n');
+ } else {
+ return ['{nt|' + index + '}'].join('\n');
+ }
+ },
+ },
+ },
+
+ {
+ type: 'category',
+ inverse: true,
+ axisTick: 'none',
+ axisLine: 'none',
+ show: true,
+ axisLabel: {
+ textStyle: {
+ color: '#666',
+ fontSize: '12',
+ },
+ },
+ data: dataFormat(values),
+ },
+
+ { // 鏉＄姸鏍囬
+ type: 'category',
+ inverse: true,
+ offset: -10,
+ position: 'left',
+ axisTick: 'none',
+ axisLine: 'none',
+ show: true,
+ axisLabel: {
+ interval: 0,
+ color: ['#666'],
+ align: 'left',
+ verticalAlign: 'bottom',
+ lineHeight: 42,
+ fontSize: 14,
+ },
+ data: dataFormat(stationData),
+ },
+ ],
+ series: [
+ {
+ zlevel: 1,
+ name: seriesName[0],
+ type: 'bar',
+ barWidth: 15,
+ data: dataFormat(values),
+ align: 'center',
+ itemStyle: {
+ normal: {
+ barBorderRadius: 10,
+ },
+ },
+ label: { //鏉＄姸涓殑鏍峰紡
+ show: true,
+ fontSize: 10,
+ color: '#fff', //鏉¤涓瓧浣撻鑹�
+ textBorderWidth: 2,
+ padding: [2, 0, 0, 0],
+ },
+ },
+ {
+ name: seriesName[1],
+ type: 'bar',
+ barWidth: 15,
+ barGap: '-100%',
+ data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100,
+ 100, 100, 100, 100, 100, 100, 100, 100, 100, 100,
+ 100, 100, 100, 100, 100, 100, 100, 100, 100, 100,
+ 100, 100, 100, 100],
+ itemStyle: {
+ normal: {
+ color: 'rgba(200,200,200,.3)',
+ //width:"100%",
+ fontSize: 12,
+ barBorderRadius: 30,
+ },
+ },
+ },
+ ],
+ };
+ Chart2.setOption(option);
+ }
+
+ function dataFormat(data) {
+ var arr = [];
+ data.forEach(function (item, i) {
+ let itemStyle = {
+ color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i],
+ };
+ arr.push({
+ value: item,
+ itemStyle: itemStyle,
+ });
+ });
+ return arr;
+ }
+
+ function contains(arr, dst) {
+ var i = arr.length;
+ while ((i -= 1)) {
+ if (arr[i] == dst) {
+ return i;
+ }
+ }
+ return false;
+ }
+
+
+
+
+</script>
+
</body>
</html>
--
Gitblit v1.9.1