Merge branch 'master' of http://117.78.1.188:8089/r/dkyChenJiang

chenhuan

2024-05-20 c6f79f5720c5d4a700b8b759a93393559409fd1c

 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,16 +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>