guzijian / wvp-GB28181-pro · Files

<template>
  <el-container class="history-container">
    <el-main class="layout-main">
      <splitpanes class="default-theme splitpanes-container">

        <pane :size="20" :min-size="15" :max-size="40" class="aside-pane">
          <div class="tree-wrapper">
            <vehicle-list
              ref="vehicleList"
              @tree-loaded="handleTreeLoaded"
              @node-click="nodeClick"
            />
          </div>
        </pane>

        <pane :size="80" class="main-pane">
          <div
            class="content-main"
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(255, 255, 255, 0.7)"
          >
            <div class="header-section">
              <historical-record-form
                style="text-align:left"
                :inline="true"
                v-show="showSearch"
                :query-params="queryParams"
                @handleQuery="handleQuery"
              />
              <el-row v-if="showSelectionTag" :gutter="10" class="mb8" style="margin-bottom: 10px;">
                <el-col :span="24">
                  <el-tag effect="dark" type="success">
                    <i class="el-icon-video-camera"></i> {{ deviceTitle }}
                  </el-tag>
                </el-col>
              </el-row>

              <div v-if="allVehicleChannels.length" class="channel-pick">
                <div class="channel-pick-main">
                  <span class="channel-pick-label">查询通道（可多选）：</span>
                  <el-checkbox-group v-model="checkedChannelKeys" class="channel-pick-group">
                    <el-checkbox
                      v-for="c in allVehicleChannels"
                      :key="c.key"
                      :label="c.key"
                    >
                      {{ c.channelName }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
                <div class="channel-pick-actions">
                  <el-button type="text" size="mini" @click="selectAllChannels">全选</el-button>
                  <el-button type="text" size="mini" @click="clearChannelSelection">清空</el-button>
                </div>
              </div>
            </div>

            <div class="table-section">
              <history-search-table
                ref="historySearchTable"
                class="history-search-table-host"
                :table-data="historyData"
                :table-height="historyTableHeight"
                :busy-channel-keys="busyChannelKeys"
                @playHistoryVideo="clickHistoricalPlay"
                @uploadHistoryVideo="onUploadHistoryVideo"
                @channel-operation="onChannelOperation"
              />
            </div>

            <history-play-dialog ref="historyPlayDialog" />
          </div>
        </pane>
      </splitpanes>
    </el-main>
  </el-container>
</template>

<script>
import VehicleList from "./JT1078Components/deviceList/VehicleList.vue";
import HistoryPlayDialog from "./JT1078Components/HistoryPlayDialog.vue";
import HistoricalRecordForm from "./JT1078Components/HistoryRecordFrom.vue";
import HistorySearchTable from "./JT1078Components/HistorySearchTable.vue";
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
import { parseTime } from "../../utils/ruoyi";

export default {
  name: "HistoricalRecord",
  components: {
    VehicleList,
    HistoryPlayDialog,
    HistorySearchTable,
    HistoricalRecordForm,
    Splitpanes,
    Pane
  },
  data() {
    return {
      timer: null,
      historyTimer: null,
      historyData: [],
      sourceValue: [],
      loading: false,
      sim_channel: null,
      selectedChannels: [],
      /** 当前车辆下可选通道（用于复选框） */
      allVehicleChannels: [],
      /** 选中的通道 key：sim_channel */
      checkedChannelKeys: [],
      channelData: null,
      nodeChannelData: null,
      deviceData: null,
      deviceTitle: '',
      showSearch: true,
      queryParams: {
        time: this.getTodayRange(),
        pageNum: 1,
        pageSize: 10
      },
      videoUrl: [],
      deviceNode: null,
      busyChannelKeys: [],
      /** 用于计算表格固定高度，避免 el-table height=100% 无像素高度导致无法滚动 */
      viewportHeight: typeof window !== 'undefined' ? window.innerHeight : 600
    };
  },
  computed: {
    showSelectionTag() {
      return this.allVehicleChannels.length > 0 || this.deviceData || this.channelData
    },
    historyTableHeight() {
      const v = this.viewportHeight || 600
      /* 预留：顶栏/标签/表单/通道区/内边距（略多留一点以免裁切） */
      const reserved = 340
      return Math.max(260, Math.floor(v - reserved))
    }
  },
  mounted() {
    this._onViewportResize = () => {
      this.viewportHeight = window.innerHeight
    }
    window.addEventListener('resize', this._onViewportResize)
  },
  watch: {
    deviceNode(val) {
      this.deviceNode = val
      if (this.$refs.historySearchTable) {
        this.$refs.historySearchTable.deviceNode = val
      }
    }
  },
  destroyed() {
    clearInterval(this.timer)
    clearInterval(this.historyTimer)
    if (this._onViewportResize) {
      window.removeEventListener('resize', this._onViewportResize)
    }
  },
  methods: {
    getTodayRange() {
      const startOfToday = new Date()
      startOfToday.setHours(0, 0, 0, 0)
      const endOfToday = new Date()
      endOfToday.setHours(23, 59, 59, 999)
      return [startOfToday, endOfToday]
    },

    handleTreeLoaded(data) {
      this.sourceValue = data;
    },

    channelKey(sim, channel) {
      return String(sim) + '_' + String(channel)
    },

    parseChannelFromId(nodeData) {
      const parts = String(nodeData.id).split('_')
      if (parts.length !== 3) return null
      const sim = parts[1]
      const channel = parts[2]
      return {
        sim,
        channel,
        channelName: nodeData.name,
        vehicleName: nodeData.pid,
        key: this.channelKey(sim, channel)
      }
    },

    buildNodeChannelMap(children) {
      const map = {}
      if (!children) return map
      for (let i = 0; i < children.length; i++) {
        const c = children[i]
        const ids = c.id.split('_')
        if (ids.length === 3) {
          c.deviceId = ids[0]
          c.channelId = ids[2]
          map[ids[2]] = c
        }
      }
      return map
    },

    /**
     * 点击通道：单通道并默认勾选；点击车辆：列出通道，需手动勾选再搜索
     */
    nodeClick(data, node) {
      if (!data) return
      const split = data.id.split('_')
      this.deviceNode = node

      if (split.length === 3) {
        const ch = this.parseChannelFromId(data)
        this.channelData = data
        this.deviceData = node.parent && node.parent.data ? node.parent.data : null
        this.deviceTitle = `车辆:${data.pid} 通道:${data.name}`

        const children = node.parent && node.parent.data && node.parent.data.children
        this.nodeChannelData = this.buildNodeChannelMap(children)

        this.allVehicleChannels = []
        if (children && children.length) {
          for (let i = 0; i < children.length; i++) {
            const p = this.parseChannelFromId(children[i])
            if (p) {
              p.vehicleName = data.pid
              this.allVehicleChannels.push(p)
            }
          }
        } else if (ch) {
          this.allVehicleChannels = [ch]
        }
        this.checkedChannelKeys = ch ? [ch.key] : []
        this.selectedChannels = ch ? [ch] : []
        this.sim_channel = ch ? ch.sim + '_' + ch.channel : null
        return
      }

      this.deviceData = data
      this.channelData = null
      const kids = data.children
      if (kids && kids.length > 0) {
        const fp = kids[0] && kids[0].id ? String(kids[0].id).split('_') : []
        if (fp.length === 3) {
          this.allVehicleChannels = []
          for (let i = 0; i < kids.length; i++) {
            const p = this.parseChannelFromId(kids[i])
            if (p) {
              p.vehicleName = data.name
              this.allVehicleChannels.push(p)
            }
          }
          this.nodeChannelData = this.buildNodeChannelMap(kids)
          this.checkedChannelKeys = []
          this.selectedChannels = []
          this.sim_channel = null
          this.deviceTitle = `车辆:${data.name} · 请勾选要查询的通道后点击搜索`
          return
        }
      }
      this.allVehicleChannels = []
      this.checkedChannelKeys = []
      this.selectedChannels = []
      this.sim_channel = null
      this.nodeChannelData = {}
      this.deviceTitle = `车辆/分组:${data.name}（请展开后选择车辆或通道）`
    },

    selectAllChannels() {
      this.checkedChannelKeys = this.allVehicleChannels.map(c => c.key)
    },

    clearChannelSelection() {
      this.checkedChannelKeys = []
    },

    handleQuery(queryParams) {
      this.queryParams = { ...this.queryParams, ...queryParams };
      this.searchHistoryList()
    },

    clickHistoricalPlay(data) {
      this.playHistoryItem(data)
    },

    channelBusyKey(row) {
      return String(row.sim) + '_' + String(row.channel)
    },

    onChannelOperation({ key, busy }) {
      if (busy) {
        if (this.busyChannelKeys.indexOf(key) < 0) {
          this.busyChannelKeys.push(key)
        }
      } else {
        this.busyChannelKeys = this.busyChannelKeys.filter(k => k !== key)
      }
    },

    onUploadHistoryVideo(row) {
      const key = this.channelBusyKey(row)
      if (this.busyChannelKeys.indexOf(key) >= 0) {
        this.$message.warning('该通道正在上传或下载，请稍候')
        return
      }
      this.busyChannelKeys.push(key)
      this.loading = true
      this.$axios({
        method: 'get',
        url: '/api/jt1078/query/history/uploading/' + row.name
      }).then(() => {
        this.$message.success("视频开始上传,请等待")
        this.searchHistoryList()
      }).catch(() => {
        this.$message.error("视频上传失败")
      }).finally(() => {
        this.busyChannelKeys = this.busyChannelKeys.filter(k => k !== key)
        this.loading = false
      })
    },

    extractHistoryItems(res) {
      try {
        const items = res.data && res.data.data && res.data.data.obj && res.data.data.obj.data && res.data.data.obj.data.items
        return Array.isArray(items) ? items : null
      } catch (e) {
        return null
      }
    },

    listResponseErrorMsg(res) {
      const top = res && res.data
      const body = top && top.data
      if (body && (body.msg || body.message)) return body.msg || body.message
      if (top && (top.msg || top.message)) return top.msg || top.message
      return ''
    },

    channelDisplayName(sim, channelId) {
      const k = String(channelId)
      if (this.nodeChannelData && this.nodeChannelData[k]) {
        return this.nodeChannelData[k].name
      }
      const found = this.allVehicleChannels.find(
        c => String(c.sim) === String(sim) && String(c.channel) === k
      )
      if (found && found.channelName) return found.channelName
      return `通道${Number(channelId)}`
    },

    defaultDeviceIdForRow(sim) {
      if (this.deviceData && this.deviceData.name) return this.deviceData.name
      if (this.channelData && this.channelData.pid) return this.channelData.pid
      const hit = this.allVehicleChannels.find(c => String(c.sim) === String(sim))
      return (hit && hit.vehicleName) ? hit.vehicleName : sim
    },

    /** 串行请求历史列表，避免多路并发压垮 JT1078 网关 9205 */
    async searchHistoryList() {
      if (!this.allVehicleChannels.length) {
        return this.$message.error('请先点击左侧选择车辆或通道')
      }
      if (!this.checkedChannelKeys.length) {
        return this.$message.warning('请至少勾选一个要查询的通道')
      }
      if (!this.queryParams.time) {
        return this.$message.error('请选择开始和结束时间');
      }

      const toQuery = this.allVehicleChannels.filter(c => this.checkedChannelKeys.indexOf(c.key) >= 0)
      if (!toQuery.length) {
        return this.$message.warning('所选通道无效，请重新勾选')
      }

      const t0 = parseTime(this.queryParams.time[0], '{y}-{m}-{d} {h}:{i}:{s}')
      const t1 = parseTime(this.queryParams.time[1], '{y}-{m}-{d} {h}:{i}:{s}')
      this.loading = true
      const merged = []
      let failCount = 0

      try {
        for (let i = 0; i < toQuery.length; i++) {
          const ch = toQuery[i]
          try {
            const res = await this.$axios({
              method: 'get',
              url: '/api/jt1078/query/history/list/' + ch.sim + '/' + ch.channel + '/' + t0 + '/' + t1
            })
            const inner = res.data && res.data.data
            const code = inner && inner.code
            if (code === '-1' || code === -1) {
              const msg = this.listResponseErrorMsg(res) || '该通道查询失败'
              this.$message.warning(`通道 ${ch.channelName}: ${msg}`)
              failCount++
              continue
            }
            const items = this.extractHistoryItems(res)
            if (!items || !items.length) continue
            for (let j = 0; j < items.length; j++) {
              const it = { ...items[j] }
              it.disabled = false
              it.countdown = 10
              it.channelName = this.channelDisplayName(it.sim || ch.sim, it.channel)
              it.deviceId = this.defaultDeviceIdForRow(it.sim || ch.sim)
              merged.push(it)
            }
          } catch (e) {
            failCount++
            console.warn(e)
            this.$message.warning(`通道 ${ch.channelName} 请求异常`)
          }
        }
        merged.sort((a, b) => {
          const ta = new Date(a.startTime || 0).getTime()
          const tb = new Date(b.startTime || 0).getTime()
          return ta - tb
        })
        this.historyData = merged
        this.selectedChannels = toQuery
        if (merged.length === 0) {
          this.$message.warning(failCount > 0 ? '全部通道未返回列表，请查看网关或超时配置' : '搜索历史列表为空')
        }
      } finally {
        this.loading = false
      }
    },

    playHistoryItem(e) {
      this.loading = true
      this.$axios({
        method: 'get',
        url: '/api/jt1078/query/send/request/io/history/' + e.sim + '/' + e.channel + "/" + e.startTime + "/" + e.endTime + "/" + e.channelMapping
      }).then(res => {
        if (res.data && res.data.data && res.data.data.data) {
          const d = res.data.data.data
          const videoUrl1 = location.protocol === 'https:'
            ? (d.wss_flv || d.ws_flv || d.flv)
            : (d.ws_flv || d.wss_flv || d.flv)
          if (!videoUrl1) {
            this.$message.error('未获取到播放地址')
            this.loading = false
            return
          }
          const dlg = this.$refs.historyPlayDialog
          dlg.updateOpen(true)
          this.$nextTick(() => {
            dlg.data = {
              videoUrl: videoUrl1,
              startTime: e.startTime,
              endTime: e.endTime,
              deviceId: e.deviceId,
              channelName: e.channelName,
              channel: e.channel,
              sim: e.sim,
              channelMapping: e.channelMapping
            }
            this.loading = false
          })
        } else {
          this.$message.error(res.data.msg || "获取播放地址失败");
          this.loading = false
        }
      }).catch(() => {
        this.$message.error("请求播放地址异常")
        this.loading = false
      })
    },

    setPlayUrl(url, idx) {
      this.$set(this.videoUrl, idx, url)
    },

    isEmpty(val) {
      return null == val || undefined == val || "" == val;
    }
  }
};
</script>

<style scoped>
.history-container {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.layout-main {
  padding: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.splitpanes-container {
  height: 100%;
  min-height: 0;
  background-color: #ffffff;
}

.splitpanes-container ::v-deep .splitpanes__pane {
  min-height: 0;
  overflow: hidden;
}

.aside-pane {
  background-color: #ffffff;
  border-right: 1px solid #dcdfe6;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tree-wrapper {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #ffffff;
  padding: 10px 5px;
  box-sizing: border-box;
}

.tree-wrapper ::v-deep .head-container { background-color: transparent !important; padding: 0 !important; margin: 0 !important; }
.tree-wrapper ::v-deep .head-container .el-row { margin: 0 !important; display: block; }
.tree-wrapper ::v-deep .head-container .el-col { width: 100% !important; padding: 0 !important; float: none !important; }
.tree-wrapper ::v-deep .el-input__inner { border-radius: 4px; }
.tree-wrapper ::v-deep .vue-easy-tree, .tree-wrapper ::v-deep .filter-tree { margin-top: 10px !important; padding-left: 5px !important; background-color: #ffffff !important; }

.main-pane {
  background-color: #ffffff;
  padding: 0;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.content-main {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  margin: 0;
  border-radius: 0;
  padding: 20px;
  box-sizing: border-box;
}

.header-section {
  flex-shrink: 0;
  margin-bottom: 15px;
  border-bottom: 1px solid #EBEEF5;
  padding-bottom: 10px;
}

.channel-pick {
  margin-top: 10px;
  padding: 10px 12px;
  background: #f5f7fa;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.channel-pick-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 12px;
}

.channel-pick-label {
  flex-shrink: 0;
  font-size: 13px;
  color: #606266;
  line-height: 28px;
}

.channel-pick-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  flex: 1;
  min-width: 0;
}

.channel-pick-actions {
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 12px;
  white-space: nowrap;
  line-height: 28px;
}

.table-section {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #ffffff;
  position: relative;
}

.history-search-table-host {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
}

::v-deep .el-form-item__label {
  color: #606266;
  font-weight: 500;
}
</style>