增加录波展示

backend/src/main/java/com/jiayue/pfr/controller/alg/FaultRecorderDataController.java

@@ -8,6 +8,7 @@ import com.jiayue.pfr.entity.FaultRecorderData;
 import com.jiayue.pfr.entity.ProtocolGatherDataPoint;
 import com.jiayue.pfr.entity.SysParameter;
 import com.jiayue.pfr.service.alg.FaultRecorderDataService;
+import com.jiayue.pfr.util.DateMomentUtil;
 import com.jiayue.pfr.util.SaResultRefit;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.beans.factory.annotation.Autowired;
@@ -47,4 +48,19 @@ public class FaultRecorderDataController {
             throw new CustomException("获取当日录波数据异常", e);
         }
     }
+
+    /**
+     * 日期段录波数据
+     */
+    @GetMapping(value = "/getFdListForBetween")
+    public SaResultRefit getFdList(Long beginDate, Long endDate) throws CustomException {
+        try {
+            QueryWrapper<FaultRecorderData> wrapper = new QueryWrapper<>();
+            wrapper.lambda().between(FaultRecorderData::getCreateTime, new Date(DateMomentUtil.getDayStartTime(beginDate)),new Date(DateMomentUtil.getDayLastTime(endDate)));
+            List<FaultRecorderData> faultRecorderDataList = faultRecorderDataService.list(wrapper);
+            return SaResultRefit.data(faultRecorderDataList);
+        } catch (Exception e) {
+            throw new CustomException("获取录波数据异常", e);
+        }
+    }
 }

ui/src/views/bizManager/faultRecorder/index.vue

@@ -0,0 +1,267 @@
+<template>
+  <div class="app-container">
+    <el-form ref="queryForm" size="small" :inline="true">
+      <el-form-item label="录波日期" prop="exceptionStartTime">
+        <el-date-picker
+          v-model="dateRange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <div style="padding-top: 10px">
+      <vxe-table
+        ref="xTable"
+        align="center"
+        :loading="loading"
+        class="mytable-style"
+        auto-resize
+        border
+        resizable
+        export-config
+        highlight-current-row
+        show-overflow
+        max-height="700"
+        :radio-config="{trigger: 'row'}"
+        :data="frList.slice((currentPage-1)*pageSize,currentPage*pageSize)"
+      >
+        <vxe-table-column field="eventName" title="事件名称"/>
+        <vxe-table-column field="exceptionStartTime" title="频率异常时间点" :formatter="formatTime"/>
+        <vxe-table-column field="restoreTime" title="频率恢复时间点" :formatter="formatTime"/>
+        <vxe-table-column title="调频耗时（秒）">
+          <template #default="{ row }">
+            <span>{{ Math.round(((row.restoreTime)-(row.exceptionStartTime))/1000) }}</span>
+          </template>
+        </vxe-table-column>
+
+        <vxe-table-column title="操作" width="320">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-circle-check"
+              @click="fdDetailShow(scope.row)"
+            >图表展示
+            </el-button>
+          </template>
+        </vxe-table-column>
+      </vxe-table>
+      <vxe-pager
+        v-show="showTable"
+        perfect
+        :current-page.sync="currentPage"
+        :page-size.sync="pageSize"
+        :total="total"
+        :page-sizes="[10,50,100]"
+        :layouts="['PrevJump', 'PrevPage','JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
+      >
+      </vxe-pager>
+    </div>
+
+    <el-dialog title="录波详细数据" :visible.sync="open" width="900px" @close='closeDetailDialog'>
+      <div id="fdDetailCharts" style="height: 500px"></div>
+    </el-dialog>
+
+  </div>
+</template>
+<script>
+
+export default {
+  name: "faultRecorder",
+  data() {
+    return {
+      open:false,
+      currentPage: 1,
+      pageSize: 10,
+      // 总条数
+      total: 0,
+      showTable: true,
+      frList:[],
+      // 遮罩层
+      loading: false,
+      dateRange:[],
+      detailChart:null,
+    };
+  },
+  created() {
+
+  },
+  methods: {
+    formatTimeHHMMSSsss(timestr){
+      const date = new Date(timestr) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
+      const H = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':'
+      const m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':'
+      const s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds())+ '.'
+      const sss = date.getMilliseconds()
+      return H + m + s + sss
+    },
+    closeDetailDialog(){
+      this.detailChart.dispose()
+      this.detailChart.clear()
+      this.detailChart = null
+    },
+    renderFdDetailChart(fdDetailList,exceptionStartTime,restoreTime){
+      let fdfm = []
+      let fdap = []
+      let times = []
+      for (let t=0;t<fdDetailList.length;t++){
+        times.push(fdDetailList[t].formatDataTime)
+        fdfm.push(fdDetailList[t].fm)
+        fdap.push(fdDetailList[t].activePower)
+      }
+      exceptionStartTime = this.formatTimeHHMMSSsss(exceptionStartTime)
+      restoreTime = this.formatTimeHHMMSSsss(restoreTime)
+      this.detailChart = this.$echarts.init(document.getElementById('fdDetailCharts'))
+
+      var fmColors= ['#FF0000', '#00fe3b']
+      var fdoption= {
+        color: fmColors,
+        legend: {
+          icon:'roundRect',
+          data: ['功率', '频率'],
+          selectedMode:false,
+          padding: [0, 0, 0, 0]
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          },
+          formatter: function(params) {
+            return '时间：'+params[0].name+"<br/>"+'功率：'+params[0].value+' MW'+"<br/>"+'频率：'+params[1].value+' Hz';
+          },
+        },
+
+        xAxis: {
+          type: 'category',
+          data: times,
+          min: times[0],
+          max: times[times.length-1],
+          // interval: 200,
+        },
+        yAxis: [
+          {
+            type: 'value',
+            position: 'left',
+            name: '功率',
+            min: 0,
+            max: this.capacity,
+            axisLabel: {
+              formatter: '{value} MW'
+            },
+          },
+          {
+            type: 'value',
+            splitLine: {show: false},
+            position: 'right',
+            name: '频率',
+            min: 49.8,
+            max: 50.2,
+            interval: 0.1,
+            axisLabel: {
+              formatter: '{value} Hz'
+            },
+          },
+
+        ],
+        series: [
+          {
+            name:'功率',
+            data: fdap,
+            type: 'line',
+            symbol: 'none',
+            markArea: {
+              itemStyle: {
+                color: 'rgba(255, 173, 177, 0.4)'
+              },
+              data: [
+                [
+                  {
+                    name: '频率异常区',
+                    xAxis: exceptionStartTime
+                  },
+                  {
+                    xAxis: restoreTime
+                  }
+                ]
+              ]
+            }
+          },
+          {
+            name:'频率',
+            yAxisIndex: 1,
+            data: fdfm,
+            type: 'line',
+            symbol: 'none',
+          },
+        ]
+      }
+      this.detailChart.setOption(fdoption,true)
+      window.onresize = this.detailChart.resize()
+    },
+    fdDetailShow(row){
+      // 弹出详细页面
+      this.open = true;
+      var searchParams = {
+        eventId: row.id
+      }
+      // 获取后端明细数据
+      this.$axios.get('/faultRecorderDetailController/getFdDetailList',{params: searchParams}).then((res) => {
+        // 渲染明细图表
+        this.renderFdDetailChart(res.data,row.exceptionStartTime,row.restoreTime)
+      }).catch((error) => {
+      })
+    },
+    formatTime({cellValue}){
+      const date = new Date(cellValue) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
+      const Y = date.getFullYear() + '-'
+      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
+      const D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' '
+      const H = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':'
+      const m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':'
+      const s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds())+ '.'
+      const sss = date.getMilliseconds()
+      return Y + M + D + H + m + s + sss
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      if (this.dateRange == '' || this.dateRange == null) {
+        this.$message.warning('请选择日期')
+        return
+      }
+      this.currentPage = 1
+      this.pageSize = 10
+
+      var searchParams = {
+        beginDate: Math.round(this.dateRange[0]),
+        endDate: Math.round(this.dateRange[1])
+      }
+      this.$axios.get('/faultRecorderDataController/getFdListForBetween',{params: searchParams}).then((res) => {
+        this.total = res.data.length
+        this.frList = res.data
+      }).catch((error) => {
+      })
+    },
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+    },
+  }
+};
+</script>
+
+<style scoped>
+/* tree border */
+.tree-border {
+  margin-top: 5px;
+  border: 1px solid #e5e6e7;
+  background: #FFFFFF none;
+  border-radius: 4px;
+}
+</style>

ui/src/views/largeScreen/index.vue

@@ -299,6 +299,7 @@ export default {
     },
     formatTimeHHMMSSsss(timestr){
       const date = new Date(timestr) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
+      console.log('ddddddd')
       const H = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':'
       const m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':'
       const s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds())+ '.'