park-application-fe/src/views/cons/screen/PileHoleDetail.vue

<template>
  <div class="screen-dialog">
    <div class="dialog-header">
      {{ $t('screen.pileHoleIndex') }}
      <i class="el-icon-close" @click="closeDialog" style="margin-left: auto;cursor: pointer"/>
    </div>
    <div class="dialog-content">
      <el-descriptions :column="2" :colon="false">
        <el-descriptions-item :label="$t('screen.pileNumber')">
          {{
            realtimeIndex.holeNum
          }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('screen.consStatus')">
          <dict-tag size="small" :options="dict.type.pile_hole_status" :value="realtimeIndex.consStatus"/>
        </el-descriptions-item>
        <el-descriptions-item :label="$t('screen.machineNum')">
          {{
            realtimeIndex.pileMachineInfo && realtimeIndex.pileMachineInfo.machineNum
          }}
        </el-descriptions-item>
        <el-descriptions-item :label="`${$t('screen.finalVerticalDeviation')} (%)`">
          {{ realtimeIndex.verticalDeviation }}
        </el-descriptions-item>
        <el-descriptions-item :label="`${$t('screen.desDepth')} (m)`">40</el-descriptions-item>
        <el-descriptions-item :label="`${$t('screen.actualDepth')} (m)`">
          {{
            realtimeIndex.depth
          }}
        </el-descriptions-item>
        <el-descriptions-item :label="`${$t('screen.pullValue')} (m)`">
          {{
            realtimeIndex.sprayVolume
          }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('screen.pressure')">
          {{
            realtimeIndex.sprayPressure
          }}
        </el-descriptions-item>
        <el-descriptions-item :label="`${$t('screen.pushValue')} (m)`">
          {{
            realtimeIndex.sendSprayVolume
          }}
        </el-descriptions-item>
        <el-descriptions-item :colon="false">

        </el-descriptions-item>
        <el-descriptions-item :label="$t('screen.consStartTime')">
          {{
            realtimeIndex.indexStartTime || '--'
          }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('screen.consEndTime')">
          {{
            realtimeIndex.indexEndTime || '--'
          }}
        </el-descriptions-item>
      </el-descriptions>
      <div class="machine-realtime-container">
        <div class="realtime-title">
          {{ $t('screen.indexLine') }}
        </div>
        <div class="realtime-chart">
          <line-chart-block v-if="loaded" :optCfg="lineOpt"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LineChartBlock from "@/components/charts/LineChartBlock.vue";
import {listPileHoleHisIndex, pileHoleRealtimeIndex} from "@/api/cons/pileHoleInfo";

export default {
  components: {LineChartBlock},
  props: {
    propData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    close: {
      type: Function,
      default: () => {
      }
    },
  },
  dicts: ['pile_hole_status'],
  data() {
    return {
      loaded: false,
      realtimeIndex: {},
      timer: null,
      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: 'Pressure(kPa)',
            type: 'value',
            splitLine: false,
            nameTextStyle: {
              color: '#fefefe'
            },
            axisLabel: {
              color: '#fefefe'
            }
          }
        ],
        series: []
      }
    };
  },
  created() {
    this.showDialog(this.propData)
    this.timer = setInterval(() => {
      this.loaded = false
      this.showDialog(this.propData)
    }, 1000 * 30)
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer)
  },
  methods: {
    showDialog(pileHolleInfo) {
      pileHoleRealtimeIndex(pileHolleInfo.id).then(response => {
        this.realtimeIndex = response.data
      })
      listPileHoleHisIndex({
        id: pileHolleInfo.id,
      }).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.loaded = false
      this.close()
    },
  },
};
</script>
<style lang="scss" src="./index.scss" scoped/>
<style lang="scss">
.maptalks-close {
  display: none;
}
</style>