地质所 沉降监测网建设项目
chenhuan
2024-06-25 880c8f54cddc8533f00f674da3f14c2cf0d34340
javaweb-plus/javaweb-admin/src/main/resources/templates/main.html
@@ -85,11 +85,51 @@
      padding: 0 40px;
      align-content: center;
   }
   .ilblock span{
   .ilblock>span{
      display: block;
      line-height: 30px;
   }
   <!-- 表格样式 -->
   .el-table, .el-table__expanded-cell {
      background-color: transparent;
      color: #4D4D4D;
      font-size: 13px;
   }
   .el-table th,
   .el-table tr,
   .el-table td {
      background-color: transparent;
      border: 0px;
      color: #4D4D4D;
      font-size: 13px;
      font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
      font-weight: Normal;
   }
   .el-table::before {
      height: 0px;
   }
   .el-table__body tr,
   .el-table__body td {
      padding: 0;
      height: 22px;
   }
   .el-table__row.warning-row {
      background:rgb(252,212,165);
   }
   .el-table__body-wrapper::-webkit-scrollbar-track {
      background-color: rgb(252,212,165);
   }
   .el-table__body-wrapper::-webkit-scrollbar {
      width: 10px;
      opacity: 0.5;
   }
   .el-table__body-wrapper::-webkit-scrollbar-thumb {
      border-radius: 15px;
      background-color:rgb(252,212,165);
   }
</style>
</head>
@@ -110,19 +150,18 @@
               </div>
               <div style="flex:6;" class="ilblock">
                  <span style="color:rgba(0,0,0,.65);font-size: 15px;">
                  <span style="color:rgba(0,0,0,.87);font-size: 15px;">
                     协调中
                     <span style="float: right">
                        {{indexDataCount.projectStatus0}}
                     </span>
                     <span style="float: right">{{indexDataCount.projectStatus0}}</span>
<!--                     <li class="el-icon-caret-bottom" style="color: #f56c6c">-->
                  </span>
                  <span style="color:rgba(0,0,0,.65);font-size: 15px;">
                  <span style="color:rgba(0,0,0,.87);font-size: 15px;">
                     待开工
                     <span style="float: right">{{indexDataCount.projectStatus1}}</span>
<!--                      <li class="el-icon-caret-bottom" style="color: #e6a23c">-->
                  </span>
                  <span style="color:rgba(0,0,0,.65);font-size: 15px;">
                  <span style="color:rgba(0,0,0,.87);font-size: 15px;">
                     进行中
                     <span style="float: right">{{indexDataCount.projectStatus2}}</span>
<!--                     <li class="el-icon-caret-top" style="color: #409eff">-->
@@ -146,11 +185,11 @@
               </div>
               <div style="flex:6;" class="ilblock">
                  <span style="color:rgba(0,0,0,.65);font-size: 15px;">
                  <span style="color:rgba(0,0,0,.87);font-size: 15px;">
                     总进尺 <span style="float: right">{{indexDataCount.footageCount}}m</span>
<!--                     <li class="el-icon-caret-bottom" style="color: #f56c6c">-->
                  </span>
                  <span style="color:rgba(0,0,0,.65);font-size: 15px;">
                  <span style="color:rgba(0,0,0,.87);font-size: 15px;">
                     已完成   <span style="float: right">{{indexDataCount.footageCplCount}}m</span>
<!--                      <li class="el-icon-caret-bottom" style="color: #409eff">-->
                  </span>
@@ -175,12 +214,12 @@
                  <div>
                     
                  </div>
                  <span style="color:rgba(0,0,0,.65);font-size: 15px;">
                     已安装  <span style="float: right">0</span>
                  <span style="color:rgba(0,0,0,.87);font-size: 15px;">
                     已安装  <span style="float: right">{{indexDataCount.cameraCount}}</span>
<!--                     <li class="el-icon-caret-bottom" style="color: #f56c6c">-->
                  </span>
                  <span style="color:rgba(0,0,0,.65);font-size: 15px;">
                     未安装   <span style="float: right">68</span>
                  <span style="color:rgba(0,0,0,.87);font-size: 15px;">
                     未安装   <span style="float: right">{{indexDataCount.cameraCountNaN}}</span>
<!--                      <li class="el-icon-caret-bottom" style="color: #409eff">-->
                  </span>
               </div>
@@ -201,15 +240,15 @@
               </div>
               <div style="flex:6;" class="ilblock">
                  <span style="color:rgba(0,0,0,.65);font-size: 15px;">
                  <span style="color:rgba(0,0,0,.87);font-size: 15px;">
                     施工资料  <span style="float: right">0</span>
<!--                     <li class="el-icon-caret-bottom" style="color: #f56c6c">-->
                  </span>
                  <span style="color:rgba(0,0,0,.65);font-size: 15px;">
                  <span style="color:rgba(0,0,0,.87);font-size: 15px;">
                     安全资料   <span style="float: right">0</span>
<!--                      <li class="el-icon-caret-bottom" style="color: #409eff">-->
                  </span>
                  <span style="color:rgba(0,0,0,.65);font-size: 15px;">
                  <span style="color:rgba(0,0,0,.87);font-size: 15px;">
                     质量资料   <span style="float: right">0</span>
<!--                      <li class="el-icon-caret-bottom" style="color: #409eff">-->
                  </span>
@@ -221,13 +260,32 @@
      <el-row>
         <el-col :span="16">
            <el-card class="box-card">
               <div style="height: 200px;">
               <div style="height: 200px;width: 100%;">
                  <h3>材料统计</h3>
                  <el-col :span="10" style="height: 200px;">
                     <div style="margin-top: 15px">
                        <template>
                           <el-table :data="tubLogs" border size="small" style="width: 100%"
                                   :header-cell-style="{color: '#4D4D4D',background: '#F7931E',fontWeight: '400'}"
                                   :row-class-name="tableRowClassName">
                              <!--                           <el-table-column prop="code" label="序号"></el-table-column>-->
                              <el-table-column prop="tubName" label="名称"></el-table-column>
                              <el-table-column prop="inboundNumber" label="入库数量"></el-table-column>
                              <el-table-column prop="outboundNumber" label="出库数量"></el-table-column>
                              <el-table-column prop="unit" label="单位"></el-table-column>
                           </el-table>
                        </template>
                     </div>
                  </el-col>
                  <el-col :span="14" style="height: 200px;">
                     <div id="column-chart" style="height: 180px; width: 100%;"></div>
                  </el-col>
               </div>
            </el-card>
            <el-card class="box-card" style="margin-top: 20px;">
               <div id="map_div" style="width: 100%;height: 550px;"></div>
               <div id="map_div" style="width: 100%;height: 550px;margin-top: -5px"></div>
            </el-card>
         </el-col>
@@ -236,7 +294,7 @@
            <el-card class="box-card">
               <div style="height: 200px;width: 100%">
                  <div style="width: 100%;height: 20px;">
                     <h3>项目总体进度2(%)</h3>
                     <h3>项目总体进度(%)</h3>
                  </div>
                  <div id="Chart1" style="width: 80%;height: 180px;margin-left: 10%;"></div>
               </div>
@@ -305,32 +363,111 @@
      totalProcess();
      stationProcess();
      indexCount();
      tubLogs();
   })
   //场地和地图点击联动
   function viewStation(station) {
      var lng = station.lng;
      var lat = station.lat;
      map.centerAndZoom(new T.LngLat(lng, lat), 13);
      // $.modal.openTab("场地导航",ctx+"/geo/project/navigate?ids="+id);
   }
   function indexCount() {
      let url = ctx + "/system/indexDataCount";
   function tubLogs() {
      const chart = echarts.init(document.getElementById("column-chart"));
      const option = {
         tooltip: {
            trigger: 'axis',
            axisPointer: {
               type: 'shadow'
            }
         },
         legend: {},
         grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
         },
         xAxis: [
            {
               type: 'category',
               data: []
            }
         ],
         yAxis: [
            {
               type: 'value'
            }
         ],
         series: [
            {
               name: '出库',
               type: 'bar',
               emphasis: {
                  focus: 'series'
               },
               data: [],
               itemStyle: {
                  // 修改柱子的颜色
                  color: '#e2b507'
               }
            },
            {
               name: '入库',
               type: 'bar',
               stack: 'Ad',
               emphasis: {
                  focus: 'series'
               },
               data: [],
               itemStyle: {
                  // 修改柱子的颜色
                  color: '#2992c6'
               }
            },
         ]
      };
      let url = ctx + "/system/stat/tubLogData";
      $.ajaxSettings.async = false;
      $.get(url,{},function(res){
         vm.indexDataCount = res.data;
         vm.tubLogs = res.tubLogs;
         res.tubLogs.forEach(function(value, index, array) {
            const tubName = value.tubName;
            const inboundNumber = value.inboundNumber;
            const outboundNumber = value.outboundNumber;
            const unit = value.unit;
            option.xAxis[0].data[index] = tubName;
            option.series[0].data[index] = outboundNumber;
            option.series[1].data[index] = inboundNumber;
         });
         chart.setOption(option, true);
      })
      $.ajaxSettings.async = false;
   }
   //首页第一行个数统计
   function indexCount() {
      let url = ctx + "/system/stat/indexDataCount";
      $.ajaxSettings.async = false;
      $.get(url,{},function(res){
         vm.indexDataCount = res.data;
         vm.indexDataCount.cameraCountNaN = 68 -vm.indexDataCount.cameraCount;
      })
      $.ajaxSettings.async = false;
   }
   //场地进度
   function stationProcess() {
      let url = ctx + "/system/projectProcess";
      let url = ctx + "/system/stat/projectProcess";
      $.ajaxSettings.async = false;
      $.get(url,{},function(res){
         vm.stationProcessData = res.projectData;
      })
      $.ajaxSettings.async = false;
      console.log(vm.stationProcessData);
   }
   var vm = new Vue({
      el: "#app",
@@ -338,9 +475,17 @@
         return {
            stationProcessData: [],
            indexDataCount :"",
            tubLogs:[],
         };
      },
      methods: {
         tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 2 == 0) {
               return "";
            } else {
               return "warning-row";
            }
         },
      }
   });
   // 加载地图
@@ -363,6 +508,8 @@
         map.addOverLay(countriesOverlay1)
         countriesOverlay.bringToBack();
      });
      //map.setStyle("indigo");
   }
   function init(sel, transform) {
@@ -406,7 +553,7 @@
   // 获取数据库真实数据
   function getReallyData() {
      let url = window.location.protocol + "//" + window.location.host + "/bjfw/system/project";
      let url = window.location.protocol + "//" + window.location.host + "/bjfw/system/stat/project";
      $.get(url,function(res){
         var data = res.projects;
         showProjectPoint(data);
@@ -414,12 +561,28 @@
   }
   //地图上展示项目点
   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),
      });
      var projectIcon ;
      for(let i =0;i<data.length;i++){
         if (data[i].status === '1'){
            projectIcon = new T.Icon({
               iconUrl: '/bjfw/images/icon/yellow.png',
               iconSize: new T.Point(30, 30),
               iconAnchor: new T.Point(6, 40),
            });
         }else if (data[i].status === '2'){
            projectIcon = new T.Icon({
               iconUrl: '/bjfw/images/icon/blue.png',
               iconSize: new T.Point(30, 30),
               iconAnchor: new T.Point(6, 40),
            });
         }else {
            projectIcon = new T.Icon({
               iconUrl: '/bjfw/images/icon/red.png',
               iconSize: new T.Point(30, 30),
               iconAnchor: new T.Point(6, 40),
            });
         }
         let lng = data[i].lng;
         let lat = data[i].lat;
         let marker = new T.Marker(new T.LngLat(lng, lat), { title: "场地位置",icon:projectIcon});
@@ -462,16 +625,18 @@
      map.openInfoWindow(markerInfoWin, point); //开启信息窗口
   }
   //总进度仪表盘
   function totalProcess() {
      var Chart1 = echarts.init(document.getElementById('Chart1'));
      var pointerData = 0; // 仪表指针数据
      let url = ctx + "/system/totalProcess";
      let url = ctx + "/system/stat/totalProcess";
      $.ajaxSettings.async = false;
      $.get(url,{},function(res){
         pointerData = res.pointerData;
         pointerData = (pointerData*100).toFixed(0);
      })
      });
      $.ajaxSettings.async = false;
      var option = {
         backgroundColor: "#fff",