地质所 沉降监测网建设项目
suerwei
2024-06-22 0b8e43d5f5fd889ffcb715dafdaa6d4511532665
javaweb-plus/javaweb-admin/src/main/resources/templates/main.html
@@ -18,86 +18,10 @@
   [v-cloak]{
      display: none;
   }
   .el-card__header{
      height: 40px;
      padding: 8px 20px;
   }
   .active-red{
      width: 20px;
      height: 20px;
      border-radius: 50%;
      font-size: 14px;
      color: white;
      background: #F56C6C;
      text-align: center;
      line-height: 20px;
      float: left;
   }
   .active-yellow{
      width: 20px;
      height: 20px;
      border-radius: 50%;
      font-size: 14px;
      color: white;
      background: #E6A23C;
      text-align: center;
      line-height: 20px;
      float: left;
   }
   .active-blue{
      width: 20px;
      height: 20px;
      border-radius: 50%;
      font-size: 14px;
      color: white;
      background: #67C23A;
      text-align: center;
      line-height: 20px;
      float: left;
   }
   .cdcode{
      width: 15%;
      float: left;
      margin-left: 10px;
      font-size: 16px;
      line-height: 20px;
   }
   .cdstatus{
      width: 15%;
      float: left;
      margin-left: 0px;
      font-size: 16px;
      line-height: 20px;
   }
   .cdprocess{
      width: 60%;
      float: left;
      margin-left: 10px;
   }
   .rankrow{
      margin-top: 12px;
      cursor: pointer;
   }
   .ilblock{
      border-left: 1px solid #e3e5e7;
      padding: 0 40px;
      align-content: center;
   }
   .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 {
@@ -108,235 +32,26 @@
      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);
   .custom-icon:hover {
      color: #0981ea;
      cursor: pointer;
   }
</style>
</head>
<body class="gray-bg">
   <div class="content" id="app" v-cloak>
      <el-row style="height: 127px;">
         <el-col :span="6">
            <el-card class="box-card">
               <div style="flex:4;padding-right: 20px;" >
                  <div>
                     <li class="el-icon-s-promotion" style="font-size: 18px;margin-right: 5px;margin-left: -5px;color: #409eff;"></li>
                     <span style="color:rgba(0,0,0,.65);font-size: 15px;font-weight: bold;">场地数量</span>
                  </div>
                  <div style="text-align: center;">
                  <span style="color:#ED1C24;font-size: 30px;word-break: break-all;line-height: 70px">34
                  </span>
                  </div>
               </div>
               <div style="flex:6;" class="ilblock">
                  <span style="color:rgba(0,0,0,.87);font-size: 15px;">
                     协调中
                     <span style="float: right">{{indexDataCount.projectStatus0}}</span>
<!--                     <li class="el-icon-caret-bottom" style="color: #f56c6c">-->
                  </span>
                  <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,.87);font-size: 15px;">
                     进行中
                     <span style="float: right">{{indexDataCount.projectStatus2}}</span>
<!--                     <li class="el-icon-caret-top" style="color: #409eff">-->
                  </span>
               </div>
            </el-card>
         </el-col>
         <el-col :span="6">
            <el-card class="box-card">
               <div style="flex:4;padding-right: 20px;">
                  <div>
                     <li class="el-icon-coin" style="font-size: 18px;margin-right: 5px;margin-left: -5px;color: #085abe"></li>
                     <span style="color:rgba(0,0,0,.65);font-size: 15px;font-weight: bold;">钻孔进尺</span>
                  </div>
                  <div style="text-align: center">
                  <span style="color:#1894F6;font-size: 30px;word-break: break-all;line-height: 70px;">647
                  </span>
                  </div>
               </div>
               <div style="flex:6;" class="ilblock">
                  <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,.87);font-size: 15px;">
                     已完成   <span style="float: right">{{indexDataCount.footageCplCount}}m</span>
<!--                      <li class="el-icon-caret-bottom" style="color: #409eff">-->
                  </span>
               </div>
            </el-card>
         </el-col>
         <el-col :span="6">
            <el-card class="box-card">
               <div style="flex:4;padding-right: 20px;">
                  <div>
                     <li class="el-icon-video-camera" style="font-size: 18px;margin-right: 5px;margin-left: -5px;color: #11d713"></li>
                     <span style="color:rgba(0,0,0,.65);font-size: 15px;font-weight: bold;">实时监控</span>
                  </div>
                  <div style="text-align: center">
                  <span style="color:#F7931E;font-size: 30px;word-break: break-all;line-height: 70px">68
                  </span>
                  </div>
               </div>
               <div style="flex:6;" class="ilblock">
                  <div>
                  </div>
                  <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,.87);font-size: 15px;">
                     未安装   <span style="float: right">68</span>
<!--                      <li class="el-icon-caret-bottom" style="color: #409eff">-->
                  </span>
               </div>
            </el-card>
         </el-col>
         <el-col :span="6">
            <el-card class="box-card">
               <div style="flex:4;padding-right: 20px;">
                  <div>
                     <li class="el-icon-s-order" style="font-size: 18px;margin-right: 5px;margin-left: -5px;color: #917ed0"></li>
                     <span style="color:rgba(0,0,0,.65);font-size: 15px;font-weight: bold;">资料文件</span>
                  </div>
                  <div style="text-align: center">
                  <span style="color:#F7931E;font-size: 30px;word-break: break-all;line-height: 70px;">
                     {{indexDataCount.fileCount}}
                  </span>
                  </div>
               </div>
               <div style="flex:6;" class="ilblock">
                  <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,.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,.87);font-size: 15px;">
                     质量资料   <span style="float: right">0</span>
<!--                      <li class="el-icon-caret-bottom" style="color: #409eff">-->
                  </span>
               </div>
            </el-card>
         </el-col>
      </el-row>
      <el-row>
         <el-col :span="16">
            <el-card class="box-card">
               <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;margin-top: -5px"></div>
            </el-card>
         </el-col>
         <el-col :span="8">
            <el-card class="box-card">
               <div style="height: 200px;width: 100%">
                  <div style="width: 100%;height: 20px;">
                     <h3>项目总体进度2(%)</h3>
                  </div>
                  <div id="Chart1" style="width: 80%;height: 180px;margin-left: 10%;"></div>
               </div>
            </el-card>
            <el-card class="box-card" style="margin-top: 20px;">
               <div style="width: 100%">
                  <div style="width: 100%;height: 20px;margin-bottom: 10px;text-align: center;">
                     <h3>场地详细进度(%)</h3>
                  </div>
                  <div style="width: 100%;height: 500px;overflow: auto">
                     <el-row class="rankrow" v-for='entity in stationProcessData' @click.native='viewStation(entity)'>
                        <el-col :span="2" >
                           <div v-if="entity.status=='协调中'" class="active-red">{{entity.ranking}}</div>
                           <div v-if="entity.status=='待开工'" class="active-yellow">{{entity.ranking}}</div>
                           <div v-if="entity.status=='进行中'" class="active-blue">{{entity.ranking}}</div>
                        </el-col>
                        <el-col :span="7">
                           <div style="font-size: 16px">{{entity.station}}</div>
                        </el-col >
                        <el-col :span="5">
                           <div style="font-size: 16px">{{entity.status}}</div>
                        </el-col>
                        <el-col :span="8">
                           <div>
                              <el-progress :stroke-width="10" :percentage="entity.value"></el-progress>
                           </div>
                        </el-col>
                     </el-row>
                  </div>
               </div>
            </el-card>
         </el-col>
      </el-row>
      <div id="map_div" style="position:fixed;width: 100%;height: 100vh;margin-top: -5px"></div>
      <div style="position:fixed;top: 5px">
         <li onclick="careraFunction()" class="el-icon-video-camera custom-icon" style="font-size: 100px;margin-right: 5px;margin-left: -5px;"></li>
         <li onclick="tubFunction()" class="el-icon-user custom-icon" style="font-size: 100px;margin-right: 5px;margin-left: -5px;"></li>
      </div>
      <div id="Chart1" style="position:fixed;width: 300px;height: 300px;bottom: -60px;right: -40px"></div>
   </div>
@@ -361,9 +76,9 @@
      loadMap();
      getReallyData();
      totalProcess();
      stationProcess();
      indexCount();
      tubLogs();
      //stationProcess();
      //indexCount();
      //tubLogs();
   })
   //场地和地图点击联动
   function viewStation(station) {
@@ -407,7 +122,11 @@
               emphasis: {
                  focus: 'series'
               },
               data: []
               data: [],
               itemStyle: {
                  // 修改柱子的颜色
                  color: '#e2b507'
               }
            },
            {
               name: '入库',
@@ -416,7 +135,11 @@
               emphasis: {
                  focus: 'series'
               },
               data: []
               data: [],
               itemStyle: {
                  // 修改柱子的颜色
                  color: '#2992c6'
               }
            },
         ]
@@ -447,10 +170,24 @@
      $.ajaxSettings.async = false;
      $.get(url,{},function(res){
         vm.indexDataCount = res.data;
         vm.indexDataCount.cameraCountNaN = 68 -vm.indexDataCount.cameraCount;
      })
      $.ajaxSettings.async = false;
   }
   //摄像头列表
   function careraFunction() {
      let url = ctx + "/system/camera";
      $.modal.openTab("摄像头列表",url);
   }
   //管材统计
   function tubFunction() {
      let url = ctx + "/system/tub";
      $.modal.openTab("管材统计",url);
   }
   //场地进度
   function stationProcess() {
      let url = ctx + "/system/stat/projectProcess";
@@ -499,6 +236,8 @@
         map.addOverLay(countriesOverlay1)
         countriesOverlay.bringToBack();
      });
      //map.setStyle("indigo");
   }
   function init(sel, transform) {
@@ -550,17 +289,35 @@
   }
   //地图上展示项目点
   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});
         let proj = infoWindowProject(data[i]);
         addClickHandler(proj, marker);
         map.addOverLay(marker);
      }
@@ -576,7 +333,7 @@
            "<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>" +
            "<a class='btn' onclick=viewdata(" +"'" + ids+ "'" + ")>场地数据</a>" + "<br>" +
            "</div>" +
            "</div>" +
            "</div>";
@@ -588,6 +345,7 @@
   function addClickHandler(content, marker) {
      marker.addEventListener("click", function (e) {
         console.log("你点击了",content);
         openInfo(content, e)
      });
   }
@@ -597,6 +355,7 @@
      var markerInfoWin = new T.InfoWindow(content, { offset: new T.Point(0, -30) }); // 创建信息窗口对象
      map.openInfoWindow(markerInfoWin, point); //开启信息窗口
   }
   //总进度仪表盘
   function totalProcess() {
@@ -611,7 +370,7 @@
      $.ajaxSettings.async = false;
      var option = {
         backgroundColor: "#fff",
         backgroundColor: "transparent",
         series: [
            {
               type: "gauge",
@@ -750,11 +509,6 @@
      Chart1.setOption(option);
   }
</script>
</body>
</html>