* 桩机实时指标

src/api/cons/pileHoleInfo.js

@@ -51,4 +51,19 @@ export function listPileHoleRealtimeIndex(query) {
   })
 }
 
+export function listPileHoleHisIndex(query) {
+  return request({
+    url: '/cons/pileHoleInfo/list/his/index',
+    method: 'get',
+    params: query
+  })
+}
+
+export function pileHoleRealtimeIndex(pileHoleId) {
+  return request({
+    url: `/cons/pileHoleInfo/list/realtime/index/${pileHoleId}`,
+    method: 'get'
+  })
+}
+
 

src/components/charts/LineChartBlock.vue

@@ -34,14 +34,6 @@ export default {
       },
     },
   },
-  watch: {
-    optCfg: {
-      handler(val) {
-        this.initChart();
-      },
-      deep: true,
-    },
-  },
   data() {
     return {
       id: uuid(),
@@ -62,7 +54,7 @@ export default {
       const {series, xAxis, ...rest} = this.optCfg
       Object.assign(option, rest);
       const legend = [];
-      this.optCfg.series.forEach((item, index) => {
+      series.forEach((item, index) => {
         const serie = copyObj(basicSerie);
         Object.assign(serie, item);
         const {name} = item;
@@ -72,7 +64,7 @@ export default {
         }
       });
       option.legend.data = legend;
-      option.xAxis = this.optCfg.xAxis;
+      option.xAxis = xAxis;
       option && this.refCharts && this.refCharts.setOption(option);
       this.refCharts.resize();
     },

src/components/map/index.vue

@@ -24,7 +24,7 @@ export default {
       const options = {
         mapType: BDLayers.Lib.Constant.BaseLayerType.Blank,
         mapModel: BDLayers.Lib.Constant.BaseLayerModel.Satellite,
-        center: [103.8425230493561, 1.2471365833057362],
+        center: [104.03533, 1.38137],
         defaultZoom: 20,
         showCenter: true,
         baseControl: false,

src/views/cons/screen/PileHoleDetail.vue

@@ -0,0 +1,171 @@
+<template>
+  <el-dialog
+    class="screen-dialog"
+    title="Vibration Pipe Sinking and Stone Crushing Pile Information"
+    :visible.sync="open"
+    :modal="false"
+    append-to-body
+    :destroy-on-close="true"
+    :before-close="closeDialog"
+  >
+    <div class="dialog-content">
+      <el-descriptions :column="2">
+        <el-descriptions-item label="Pile Number">{{ realtimeIndex.holeNum }}</el-descriptions-item>
+        <el-descriptions-item label="Status">
+          <dict-tag size="small" :options="dict.type.pile_hole_status" :value="realtimeIndex.consStatus"/>
+        </el-descriptions-item>
+        <el-descriptions-item label="Machine Number">
+          {{
+            realtimeIndex.pileMachineInfo && realtimeIndex.pileMachineInfo.machineNum
+          }}
+        </el-descriptions-item>
+        <el-descriptions-item label="Final Vertical Deviation (%)">
+          {{ realtimeIndex.verticalDeviation }}
+        </el-descriptions-item>
+        <el-descriptions-item label="Design Depth (m)">40</el-descriptions-item>
+        <el-descriptions-item label="Actual Depth (m)">{{ realtimeIndex.depth }}</el-descriptions-item>
+        <el-descriptions-item label="Delivery length (m)">{{ realtimeIndex.sprayVolume }}</el-descriptions-item>
+        <el-descriptions-item label="Discharge pressure value">{{ realtimeIndex.sprayPressure }}</el-descriptions-item>
+        <el-descriptions-item label="Start Time">{{ realtimeIndex.startTime || '--' }}</el-descriptions-item>
+        <el-descriptions-item label="End Time">{{ realtimeIndex.endTime || '--' }}</el-descriptions-item>
+      </el-descriptions>
+      <div class="machine-realtime-container">
+        <div class="realtime-title">
+          Real-time Depth and Current Value Data
+        </div>
+        <div class="realtime-chart">
+          <line-chart-block v-if="loaded" :optCfg="lineOpt"/>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import LineChartBlock from "@/components/charts/LineChartBlock.vue";
+import {listPileHoleHisIndex, pileHoleRealtimeIndex} from "@/api/cons/pileHoleInfo";
+
+export default {
+  components: {LineChartBlock},
+  props: {},
+  dicts: ['pile_hole_status'],
+  data() {
+    return {
+      open: false,
+      loaded: false,
+      realtimeIndex: {},
+      lineOpt: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            animation: false,
+            label: {
+              backgroundColor: '#505765'
+            }
+          }
+        },
+        legend: {
+          data: ['Current', 'Rainfall'],
+          left: '0',
+          textStyle: {
+            color: '#fefefe'
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            axisLine: {onZero: false},
+            axisLabel: {
+              color: '#fefefe'
+            },
+            data: [].map(function (str) {
+              return str.replace(' ', '\n');
+            })
+          }
+        ],
+        yAxis: [
+          {
+            name: 'Current(A)',
+            type: 'value',
+            splitLine: false,
+            nameTextStyle: {
+              color: '#fefefe'
+            },
+            axisLabel: {
+              color: '#fefefe'
+            }
+          },
+          {
+            name: 'Injection pressure(MPa)',
+            type: 'value',
+            splitLine: false,
+            nameTextStyle: {
+              color: '#fefefe'
+            },
+            axisLabel: {
+              color: '#fefefe'
+            }
+          }
+        ],
+        series: []
+      }
+    };
+  },
+  methods: {
+    showDialog(pileHolleInfo) {
+      this.open = true
+      pileHoleRealtimeIndex(pileHolleInfo.id).then(response => {
+        this.realtimeIndex = response.data
+      })
+      listPileHoleHisIndex({
+        id: 3,
+      }).then(response => {
+        if (response.data && response.data.length > 0) {
+          const {data} = response
+          const current = {
+            name: 'Current',
+            type: 'line',
+            smooth: true,
+            emphasis: {
+              focus: 'series'
+            },
+            data: []
+          }
+
+          const prassure = {
+            name: 'Injection pressure',
+            type: 'line',
+            smooth: true,
+            yAxisIndex: 1,
+            emphasis: {
+              focus: 'series'
+            },
+            data: []
+          }
+
+          const dateTime = []
+          data.forEach(item => {
+            const {current: elecCurrent, sprayPressure, recordTime} = item
+            current.data.push(elecCurrent)
+            prassure.data.push(sprayPressure)
+            dateTime.push(recordTime)
+          })
+          this.lineOpt.xAxis[0].data = dateTime.map(function (str) {
+            return str.replace(' ', '\n');
+          })
+          this.lineOpt.series = [current, prassure]
+          this.loaded = true
+        }
+      })
+    },
+
+    closeDialog() {
+      this.open = false
+      this.loaded = false
+    },
+  },
+};
+</script>
+<style lang="scss" src="./index.scss" scoped/>

src/views/cons/screen/index.scss

@@ -383,6 +383,7 @@
       .realtime-title {
         height: 20px;
         width: 100%;
+        color: #98CDFB;
         font-weight: 600;
         letter-spacing: 0;
         display: flex;