* 桩机实时指标

src/api/cons/pileHoleInfo.js

@@ -42,3 +42,13 @@ export function delPileHoleInfo(id) {
     method: 'delete'
   })
 }
+
+export function listPileHoleRealtimeIndex(query) {
+  return request({
+    url: '/cons/pileHoleInfo/list/realtime/index',
+    method: 'get',
+    params: query
+  })
+}
+
+

src/api/cons/pileMachineInfo.js

@@ -51,3 +51,31 @@ export function delPileMachineInfo(id) {
     method: 'delete'
   })
 }
+
+export function getConsUnitMachine(id) {
+  return request({
+    url: '/cons/pileMachineInfo/screen/consunit/machine',
+    params: {
+      consUnitId: id
+    },
+    method: 'get'
+  })
+}
+
+export function calcPileMachineOnOffline() {
+  return request({
+    url: '/cons/pileMachineInfo/screen/onOffline',
+    method: 'get'
+  })
+}
+
+export function calcPileMachineLatestIndex(id) {
+  return request({
+    url: '/cons/pileMachineInfo/screen/machine/latest',
+    params: {
+      machineId: id
+    },
+    method: 'get'
+  })
+}
+

src/components/map/index.vue

@@ -24,11 +24,11 @@ export default {
       const options = {
         mapType: BDLayers.Lib.Constant.BaseLayerType.Blank,
         mapModel: BDLayers.Lib.Constant.BaseLayerModel.Satellite,
-        center: [103.51, 1.18],
-        defaultZoom: 15,
+        center: [103.8425230493561, 1.2471365833057362],
+        defaultZoom: 20,
         showCenter: true,
         baseControl: false,
-        pitch: 45,
+        pitch: 0,
         lights: {
           directional: {
             direction: [-1, -1, -1],
@@ -76,13 +76,10 @@ export default {
       // http://200.200.19.253:31838/bdgis/folder/zy9?time=1728373968099
       const satelliteTileLayer = new BDLayers.Lib.Layer.CBTileLayer('blayer_tdt_s', {
         url: [
-          'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + BDLayers.Lib
-              .Constant.WebMapKeys.Tianditu,
-          'http://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' + BDLayers.Lib
-              .Constant.WebMapKeys.Tianditu,
+          "https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}"
         ],
         subdomains: '01234567',
-        maxZoom: [18, 18],
+        maxZoom: [25, 25],
         minZoom: [3, 3],
       });
       this.mapView.addCustomLayers(satelliteTileLayer, -1, true);

src/components/map/maphandle.js

@@ -26,7 +26,7 @@ export default {
                polyOnClick = () => {
                },
              }, polyLayer) {
-      const polygonId =`auto_poly_id${uuid()}`;
+      const polygonId = `auto_poly_id${uuid()}`;
       let symbolParam = {
         lineColor: '#34495e',
         lineWidth: 2,
@@ -45,7 +45,7 @@ export default {
         altitude,
         symbol: symbolParam,
         labelSymbol: labelSymbolParam,
-        bizAttr: {...bizAttr,polygonId},
+        bizAttr: {...bizAttr, polygonId},
       });
       //多边形的点击事件
       polygon.on('click', polyOnClick);
@@ -91,6 +91,9 @@ export default {
       }
       this.polyLayer && this.polyLayer.removeAll();
     },
+    destroyLayer(layerId, mapIns) {
+      layerId && mapIns.removeLayersById(layerId)
+    },
   },
   beforeDestroy() {
     this.polyLayer && window.map.removeLayersById(`poly_layer${this.layerId}`);

src/views/cons/consUnit/ConsUnitTree.vue

@@ -1,6 +1,6 @@
 <template>
-  <treeselect :options="consUnitOptions" :normalizer="normalizer" @input="handleInput"
-              placeholder="选择上级施工单元" :openOnFocus="true"/>
+  <treeselect class="comm-tree" :options="consUnitOptions" :normalizer="normalizer" @input="handleInput"
+              placeholder="选择上级施工单元" :openOnFocus="true" @close="onClose"/>
 </template>
 
 <script>
@@ -21,6 +21,11 @@ export default {
     this.getList();
   },
   methods: {
+    onClose() {
+      // 在复写样式的时候打开注释
+      // debugger
+      this.$emit('close');
+    },
     /** 查询部门列表 */
     getList() {
       listConsUnitInfo({}).then(response => {
@@ -44,3 +49,30 @@ export default {
   }
 };
 </script>
+<style scoped lang="scss">
+.comm-tree {
+  ::v-deep {
+    .vue-treeselect__menu {
+      background: rgba(1, 11, 33, 0.91);
+      border: none;
+      border-left: 1px solid #4EBBCD;
+      border-right: 1px solid #4EBBCD;
+      border-bottom: 1px solid #4EBBCD;
+      color: #fefefe;
+
+      .vue-treeselect__option--highlight {
+        background: #02245DE8;
+      }
+    }
+
+  }
+
+  &.vue-treeselect--single ::v-deep {
+    .vue-treeselect__option--selected {
+      background: #141D31B2;
+
+    }
+  }
+}
+
+</style>

src/views/cons/pileHoleInfo/index.vue

@@ -3,19 +3,19 @@
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="桩点编号" prop="holeNum">
         <el-input
-            v-model="queryParams.holeNum"
-            placeholder="请输入桩点编号"
-            clearable
-            @keyup.enter.native="handleQuery"
+          v-model="queryParams.holeNum"
+          placeholder="请输入桩点编号"
+          clearable
+          @keyup.enter.native="handleQuery"
         />
       </el-form-item>
       <el-form-item label="施工状态" prop="consStatus">
         <el-select v-model="queryParams.consStatus" placeholder="请选择施工状态" clearable>
           <el-option
-              v-for="dict in dict.type.pile_hole_status"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
+            v-for="dict in dict.type.pile_hole_status"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
           />
         </el-select>
       </el-form-item>
@@ -28,34 +28,34 @@
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
-            type="info"
-            plain
-            icon="el-icon-upload2"
-            size="mini"
-            @click="handleImport"
-            v-hasPermi="['cons:pileHoleInfo:add']"
+          type="info"
+          plain
+          icon="el-icon-upload2"
+          size="mini"
+          @click="handleImport"
+          v-hasPermi="['cons:pileHoleInfo:add']"
         >{{ $t("common.import") }}
         </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
-            type="primary"
-            plain
-            icon="el-icon-plus"
-            size="mini"
-            @click="handleAdd"
-            v-hasPermi="['cons:pileHoleInfo:add']"
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['cons:pileHoleInfo:add']"
         >{{ $t("common.add") }}
         </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
-            type="warning"
-            plain
-            icon="el-icon-download"
-            size="mini"
-            @click="handleExport"
-            v-hasPermi="['cons:pileHoleInfo:export']"
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['cons:pileHoleInfo:export']"
         >{{ $t("common.export") }}
         </el-button>
       </el-col>
@@ -100,19 +100,19 @@
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-edit"
-              @click="handleUpdate(scope.row)"
-              v-hasPermi="['cons:pileHoleInfo:edit']"
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['cons:pileHoleInfo:edit']"
           >修改
           </el-button>
           <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-delete"
-              @click="handleDelete(scope.row)"
-              v-hasPermi="['cons:pileHoleInfo:remove']"
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['cons:pileHoleInfo:remove']"
           >删除
           </el-button>
         </template>
@@ -120,11 +120,11 @@
     </el-table>
 
     <pagination
-        v-show="total>0"
-        :total="total"
-        :page.sync="queryParams.pageNum"
-        :limit.sync="queryParams.pageSize"
-        @pagination="getList"
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
     />
 
     <!-- 添加或修改施工桩点信息对话框 -->
@@ -186,25 +186,25 @@
     <!-- 用户导入对话框 -->
     <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
       <el-upload
-          ref="upload"
-          :limit="1"
-          accept=".dwg"
-          :headers="upload.headers"
-          :action="upload.url + '?updateSupport=' + upload.updateSupport"
-          :disabled="upload.isUploading"
-          :on-progress="handleFileUploadProgress"
-          :on-success="handleFileSuccess"
-          :auto-upload="false"
-          drag
+        ref="upload"
+        :limit="1"
+        accept=".dwg"
+        :headers="upload.headers"
+        :action="upload.url + '?updateSupport=' + upload.updateSupport"
+        :disabled="upload.isUploading"
+        :on-progress="handleFileUploadProgress"
+        :on-success="handleFileSuccess"
+        :auto-upload="false"
+        drag
       >
         <i class="el-icon-upload"></i>
-        <div class="el-upload__text">{{ $t("common.importModeMsg")}}</div>
+        <div class="el-upload__text">{{ $t("common.importModeMsg") }}</div>
         <div class="el-upload__tip text-center" slot="tip">
           <div class="el-upload__tip" slot="tip">
             <el-checkbox v-model="upload.updateSupport"/>
-            {{ $t("common.importMessage")}}
+            {{ $t("common.importMessage") }}
           </div>
-          <span>{{ $t("common.importFileType", {fileType: 'DWG'})}}</span>
+          <span>{{ $t("common.importFileType", {fileType: 'DWG'}) }}</span>
         </div>
       </el-upload>
       <div slot="footer" class="dialog-footer">
@@ -274,6 +274,9 @@ export default {
         lat: [
           {required: true, message: "纬度不能为空", trigger: "blur"}
         ],
+        consStatus: [
+          {required: true, message: "施工状态不能为空", trigger: "blur"}
+        ],
       },
       upload: {
         title: this.$t("cons.pileHoleImportTitle"),
@@ -293,7 +296,7 @@ export default {
     this.getList();
   },
   methods: {
-    handleImport(){
+    handleImport() {
       this.upload.open = true;
     },
     // 文件上传中处理
@@ -305,7 +308,7 @@ export default {
       this.upload.open = false;
       this.upload.isUploading = false;
       this.$refs.upload.clearFiles();
-      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
+      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", {dangerouslyUseHTMLString: true});
       this.getList();
     },
     /** 查询施工桩点信息列表 */

src/views/cons/screen/MachineIndex.vue

@@ -0,0 +1,109 @@
+<template>
+  <content-block title="Piling Machine" class="pile-machine-status">
+    <template v-slot:content>
+      <div class="offset-status">
+        <div class="offset-title">
+          <span>Drill Rod Inclination</span>
+          <span
+            :class="{'verticality-tolerance':true, 'warning': calcDeviation(machineLatextIndex.verticalDeviation) }">
+                verticality tolerance:
+                <span class="value">
+                  {{ machineLatextIndex.verticalDeviation * 100 || 0 }} %
+                </span>
+              </span>
+        </div>
+        <div class="offset-item">
+          <i class="deviation-point" :style="{
+                left: `${calcTiltAngle(machineLatextIndex.tiltAngle)}%`,
+                top: `${calcForwardTiltAngle(machineLatextIndex.forwardTiltAngle)}%`,
+                backgroundColor: calcDeviation(machineLatextIndex.verticalDeviation) && 'red'
+              }"></i>
+          <span class="label tilt-angle">
+                <span>侧倾角</span>
+                <span>
+                  {{ machineLatextIndex.tiltAngle || '--' }}°
+                </span>
+              </span>
+          <span class="label forward-tilt-angle">
+                <span>前倾角</span>
+                <span>
+                  {{ machineLatextIndex.forwardTiltAngle || '--' }}°
+                </span>
+
+                </span>
+        </div>
+      </div>
+    </template>
+  </content-block>
+</template>
+
+<script>
+import ContentBlock from "@/views/cons/screen/ContentBlock.vue";
+import {calcPileMachineLatestIndex} from "@/api/cons/pileMachineInfo";
+// 阈值
+const DeviationThreshold = 0.015;
+const DeviationDegreeThreshold = 0.86;
+export default {
+  components: {ContentBlock},
+  props: {
+    selectMachine: {
+      type: Object,
+      default: null
+    }
+  },
+  computed: {},
+  watch: {
+    selectMachine(val) {
+      if (!val && this.realtimeInterVal) {
+        clearInterval(this.realtimeInterVal)
+      }
+      if (val && !this.realtimeInterVal) {
+        this.realtimeInterVal = setInterval(() => {
+          this.getMachineRealtimeData()
+        }, 3000)
+      }
+    }
+  },
+  data() {
+    return {
+      realtimeInterVal: null,
+      machineLatextIndex: {},
+    }
+  },
+  // 组件卸载前清空图层信息
+  beforeDestroy() {
+    this.realtimeInterVal && clearInterval(this.realtimeInterVal)
+  },
+  created() {
+
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+    },
+    getMachineRealtimeData() {
+      calcPileMachineLatestIndex(this.selectMachine.id).then(response => {
+        this.machineLatextIndex = response.data
+      })
+    },
+    calcDeviation(deviation) {
+      return Math.abs(deviation) > DeviationThreshold
+    },
+    calcForwardTiltAngle(forwardTiltAngle) {
+      if (Math.abs(forwardTiltAngle) > DeviationDegreeThreshold) {
+        return 0
+      }
+      return ((DeviationDegreeThreshold + forwardTiltAngle) / (DeviationDegreeThreshold * 2)).toFixed(2) * 100
+    },
+    calcTiltAngle(tiltAngle) {
+      if (Math.abs(tiltAngle) > DeviationDegreeThreshold) {
+        return 0
+      }
+      return ((DeviationDegreeThreshold + tiltAngle) / (DeviationDegreeThreshold * 2)).toFixed(2) * 100
+    }
+  },
+};
+</script>
+<style lang="scss" src="./index.scss" scoped/>

src/views/cons/screen/index.scss

@@ -117,8 +117,13 @@
         overflow: hidden;
         overflow-y: scroll;
         color: #fefefe;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: flex-start;
 
         .list-item {
+          width: 100%;
           height: 25px;
           font-size: 12px;
           display: flex;
@@ -127,12 +132,20 @@
           padding: 0 5px;
           box-sizing: border-box;
           letter-spacing: 1px;
+          cursor: pointer;
 
           &:nth-child(odd) {
             background: #012748;
           }
         }
 
+        .no-more {
+          color: #707070C5;
+          font-size: 10px;
+          width: 100%;
+          text-align: center;
+        }
+
         &::-webkit-scrollbar {
           display: none;
         }
@@ -190,6 +203,11 @@
   .online-list {
     width: 100%;
     height: 120px;
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
 
     > :not(:first-child) {
       margin-top: 10px;
@@ -227,8 +245,19 @@
       color: #98CDFB;
       letter-spacing: 0;
       display: flex;
+      flex-direction: column;
       justify-content: center;
       align-items: center;
+
+      .verticality-tolerance {
+        font-size: 12px;
+
+        &.warning {
+          .value {
+            color: #FF0000;
+          }
+        }
+      }
     }
 
     .offset-item {
@@ -236,6 +265,43 @@
       height: 140px;
       background: url("./img/target.svg") 100% 100% no-repeat;
       background-size: 100% 100%;
+      position: relative;
+
+      .deviation-point {
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        border-radius: 10px;
+        position: absolute;
+        background-color: #13ce66;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      .label {
+        position: absolute;
+        color: #fefefe;
+        width: 65px;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        font-size: 12px;
+
+        &.tilt-angle {
+          left: 100%;
+          top: 50%;
+          transform: translate(0%, -50%);
+        }
+
+        &.forward-tilt-angle {
+          top: 100%;
+          left: 50%;
+          transform: translate(-50%, 0%);
+        }
+      }
+
     }
   }
 

src/views/cons/screen/index.vue

@@ -19,11 +19,13 @@
             Machine List <span v-if="loading" style="font-size: 10px;color: #fefefe;margin-left: 10px">加载中...</span>
           </div>
           <div class="content-list infinite-list-wrapper"
-               v-infinite-scroll="load"
+               v-infinite-scroll="loadMachine"
                :infinite-scroll-disabled="disabled"
           >
-            <div v-for="i in count" class="list-item">machine {{ i }}</div>
-            <p v-if="noMore">没有更多了</p>
+            <div v-for="item in machineList" class="list-item" :key="item.id" @click="handleMachineClick(item)">
+              {{ item.name }}({{ item.machineNum }})
+            </div>
+            <p v-if="noMore" class="no-more" style="margin-top: auto">没有更多了</p>
           </div>
         </div>
       </template>
@@ -39,64 +41,46 @@
               <div class="legend-item">
                 <i :style="{ backgroundColor:machineOpt.color[0] }"/>
                 <span>Online Machinery</span>
-                <span>7</span>
+                <span>{{ machineStatusCnt.online || 0 }}</span>
               </div>
               <div class="legend-item">
                 <i :style="{ backgroundColor:machineOpt.color[1] }"/>
                 <span>Offline Machinery</span>
-                <span>7</span>
+                <span>{{ machineStatusCnt.offline || 0 }}</span>
               </div>
             </div>
           </div>
           <div class="online-list">
-            <div class="list-item">
-              <span class="machine-name">004</span>
-              <span class="cons-unit">Machine Name</span>
-            </div>
-            <div class="list-item">
-              <span class="machine-name">004</span>
-              <span class="cons-unit">Machine Name</span>
-            </div>
-            <div class="list-item">
-              <span class="machine-name">004</span>
-              <span class="cons-unit">Machine Name</span>
-            </div>
-          </div>
-        </template>
-      </content-block>
-      <content-block title="Piling Machine" class="pile-machine-status">
-        <template v-slot:content>
-          <div class="offset-status">
-            <div class="offset-title">
-              Drill Rod Inclination
-            </div>
-            <div class="offset-item">
+            <div class="list-item" v-for="item in onlineMachine">
+              <span class="machine-name">{{ item.name }}</span>
+              <span class="cons-unit">{{ item.machineNum }}</span>
             </div>
           </div>
         </template>
       </content-block>
+      <MachineIndex :select-machine="selectMachine"></MachineIndex>
     </div>
     <el-dialog
-        class="screen-dialog"
-        title="Vibration Pipe Sinking and Stone Crushing Pile Information"
-        :visible.sync="open"
-        :modal="false"
-        append-to-body
+      class="screen-dialog"
+      title="Vibration Pipe Sinking and Stone Crushing Pile Information"
+      :visible.sync="open"
+      :modal="false"
+      append-to-body
     >
       <div class="dialog-content">
         <el-descriptions :column="2">
-          <el-descriptions-item label="Pile Number">kooriookami</el-descriptions-item>
-          <el-descriptions-item label="Status">18100000000</el-descriptions-item>
-          <el-descriptions-item label="Machine Number">苏州市</el-descriptions-item>
+          <el-descriptions-item label="Pile Number">p0021</el-descriptions-item>
+          <el-descriptions-item label="Status">Completed</el-descriptions-item>
+          <el-descriptions-item label="Machine Number">MH503</el-descriptions-item>
           <el-descriptions-item label="Final Vertical Deviation (%)">
-            <el-tag size="small">学校</el-tag>
+            <el-tag size="small">0.2</el-tag>
           </el-descriptions-item>
-          <el-descriptions-item label="Designed Pile Length (m)">kooriookami</el-descriptions-item>
-          <el-descriptions-item label="Pile Diameter (m)">18100000000</el-descriptions-item>
-          <el-descriptions-item label="Start Time">kooriookami</el-descriptions-item>
-          <el-descriptions-item label="End Time">18100000000</el-descriptions-item>
-          <el-descriptions-item label="Actual Depth (m)">kooriookami</el-descriptions-item>
-          <el-descriptions-item label="Pipe Pulling Speed (m/min)">18100000000</el-descriptions-item>
+          <el-descriptions-item label="Design Depth (m)">40</el-descriptions-item>
+          <el-descriptions-item label="Actual Depth (m)">20</el-descriptions-item>
+          <el-descriptions-item label="Delivery length (m)">20</el-descriptions-item>
+          <el-descriptions-item label="Discharge pressure value">0.1</el-descriptions-item>
+          <el-descriptions-item label="Start Time">2025-02-01 12:00:00</el-descriptions-item>
+          <el-descriptions-item label="End Time">--</el-descriptions-item>
         </el-descriptions>
         <div class="machine-realtime-container">
           <div class="realtime-title">
@@ -118,9 +102,14 @@ import ConsUnitTree from "@/views/cons/consUnit/ConsUnitTree.vue";
 import ContentBlock from "@/views/cons/screen/ContentBlock.vue";
 import PieChartBlock from "@/components/charts/PieChartBlock.vue";
 import LineChartBlock from "@/components/charts/LineChartBlock.vue";
+import {calcPileMachineOnOffline, getConsUnitMachine, listAllPileMachineInfo} from "@/api/cons/pileMachineInfo";
+import {listPileHoleRealtimeIndex} from "@/api/cons/pileHoleInfo";
+import maphandle from "@/components/map/maphandle";
+import MachineIndex from "@/views/cons/screen/MachineIndex.vue";
 
 export default {
-  components: {LineChartBlock, PieChartBlock, ContentBlock, ConsUnitTree, BdMap, Treeselect},
+  components: {MachineIndex, LineChartBlock, PieChartBlock, ContentBlock, ConsUnitTree, BdMap, Treeselect},
+  mixins: [maphandle],
   props: {
     ws: {
       type: String,
@@ -137,16 +126,30 @@ export default {
   },
   watch: {
     consUnit(val) {
-      console.log(val)
+      this.loadMachine()
     },
+    searchVal(val) {
+      this.searchValOnchange()
+    },
+
   },
   data() {
     return {
+      mapIns: null,
       consUnit: null,
       searchVal: "",
       count: 10,
       loading: false,
       open: true,
+      machineList: [],
+      machineOriList: [],
+      selectMachine: null,
+      realtimeInterVal: null,
+      machineLatextIndex: {},
+      pileHoleList: [],
+      pileHoleLayer: null,
+      machineStatusCnt: {},
+      onlineMachine: [],
       machineOpt: {
         color: ['#006699', '#4cabce'],
         tooltip: {
@@ -275,27 +278,99 @@ export default {
   },
   // 组件卸载前清空图层信息
   beforeDestroy() {
+    this.destroyLayer(this.pileHoleLayer.cust.layerId, this.mapIns)
   },
   created() {
 
   },
   mounted() {
     this.init();
+    this.selectMachine = {
+      id: 1
+    }
   },
   methods: {
     init() {
+      this.loadMachine()
+      this.loadMachineOnOffline()
+      this.loadOnlineMachine()
+    },
+    loadMachine() {
+      this.loading = true;
+      getConsUnitMachine(this.consUnit).then((response) => {
+        this.machineList = response.data
+        this.machineOriList = response.data
+        this.searchValOnchange()
+        this.count = 100
+        this.loading = false
+      })
+    },
 
+    loadOnlineMachine() {
+      listAllPileMachineInfo({
+        status: "00"
+      }).then(response => {
+        this.onlineMachine = response.rows
+      });
+    },
+    searchValOnchange() {
+      if (this.searchVal) {
+        this.machineList = this.machineOriList.filter(item => `${item.name}(${item.machineNum})`.includes(this.searchVal))
+      }
+    },
+    loadMachineOnOffline() {
+      calcPileMachineOnOffline().then(response => {
+        if (response.data) {
+          const {online, offline} = response.data
+          this.machineStatusCnt = response.data
+          this.machineOpt.series[0].data = [{
+            value: online,
+            name: 'online'
+          },
+            {
+              value: offline,
+              name: 'offline'
+            }]
+        }
+      })
+    },
+    loadPileHole() {
+      listPileHoleRealtimeIndex({}).then(response => {
+        this.pileHoleList = response.data
+        this.pileHoleList.forEach((item, index) => {
+          let circle = new BDLayers.Lib.Overlays.Circle(`circle${index}`, {
+            center: [item.lng, item.lat], // 圆的中心点点坐标
+            radius: 2,
+            symbol: {
+              lineColor: '#34495e',
+              lineWidth: 1,
+              polygonFill: '#1bbc9b',
+              polygonOpacity: 0.2
+            },
+            labelSymbol: {
+              labelText: 'circle',
+              labelTextSize: 10
+            },
+          });
+          circle.cust = item
+          circle.on('click', (e) => {
+            this.pileHoleClick(e.target.cust)
+          })
+          this.pileHoleLayer.addGeometry(circle);
+        })
+      })
     },
     loaded(map) {
-
+      this.mapIns = map
+      this.pileHoleLayer = this.createLayer(map)
+      this.loadPileHole()
     },
-    load() {
-      this.loading = true
-      setTimeout(() => {
-        this.count += 2
-        this.loading = false
-      }, 2000)
-    }
+    handleClick(e) {
+    },
+    pileHoleClick(pileHole) {
+      console.log(">>>>>>>>>>>>", pileHole)
+    },
+
   },
 };
 </script>