[1078] 合并新UI

web/src/api/jtDevice.js

@@ -139,4 +139,77 @@ export function fillLight(params) {
     }
   })
 }
+export function queryRecordList(params) {
+  const { phoneNumber, channelId, startTime, endTime } = params
+  return request({
+    method: 'get',
+    url: '/api/jt1078/record/list',
+    params: {
+      phoneNumber: phoneNumber,
+      channelId: channelId,
+      startTime: startTime,
+      endTime: endTime
+    }
+  })
+}
+export function startPlayback(params) {
+  const { phoneNumber, channelId, startTime, endTime, type, rate, playbackType, playbackSpeed } = params
+  return request({
+    method: 'get',
+    url: '/api/jt1078/playback/start/',
+    params: {
+      phoneNumber: phoneNumber,
+      channelId: channelId,
+      startTime: startTime,
+      endTime: endTime,
+      type: type,
+      rate: rate,
+      playbackType: playbackType,
+      playbackSpeed: playbackSpeed
+    }
+  })
+}
+export function controlPlayback(params) {
+  const { phoneNumber, channelId, command, playbackSpeed, time } = params
+  return request({
+    method: 'get',
+    url: '/api/jt1078/playback/control',
+    params: {
+      phoneNumber: phoneNumber,
+      channelId: channelId,
+      command: command,
+      playbackSpeed: playbackSpeed,
+      time: time
+    }
+  })
+}
+export function stopPlayback(params) {
+  const { phoneNumber, channelId, streamId } = params
+  return request({
+    method: 'get',
+    url: '/api/jt1078/playback/stop/',
+    params: {
+      phoneNumber: phoneNumber,
+      channelId: channelId,
+      streamId: streamId
+    }
+  })
+}
+export function queryConfig(phoneNumber) {
+  return request({
+    method: 'get',
+    url: `/api/jt1078/config`,
+    params: {
+      phoneNumber: phoneNumber
+    }
+  })
+}
+export function setConfig(data) {
+  return request({
+    method: 'post',
+    url: `/api/jt1078/set-config`,
+    data: data
+  })
+}
+
 

web/src/store/modules/jtDevice.js

@@ -1,12 +1,12 @@
 import {
   add,
-  addChannel, deleteDevice,
-  deleteDeviceById, fillLight,
+  addChannel, controlPlayback, deleteDevice,
+  fillLight,
   play, ptz,
-  queryChannels,
+  queryChannels, queryConfig,
   queryDeviceById,
-  queryDevices,
-  stopPlay, update,
+  queryDevices, queryRecordList, setConfig, startPlayback,
+  stopPlay, stopPlayback, update,
   updateChannel, wiper
 } from '@/api/jtDevice'
 
@@ -140,6 +140,66 @@ const actions = {
         reject(error)
       })
     })
+  },
+  queryConfig({ commit }, phoneNumber) {
+    return new Promise((resolve, reject) => {
+      queryConfig(phoneNumber).then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  setConfig({ commit }, data) {
+    return new Promise((resolve, reject) => {
+      setConfig(data).then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  queryRecordList({ commit }, params) {
+    return new Promise((resolve, reject) => {
+      queryRecordList(params).then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  startPlayback({ commit }, params) {
+    return new Promise((resolve, reject) => {
+      startPlayback(params).then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  controlPlayback({ commit }, params) {
+    return new Promise((resolve, reject) => {
+      controlPlayback(params).then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  stopPlayback({ commit }, params) {
+    return new Promise((resolve, reject) => {
+      stopPlayback(params).then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
   }
 }
 

web/src/views/jtDevice/channel/index.vue

@@ -250,7 +250,7 @@ export default {
     queryCloudRecords: function(itemData) {
       const deviceId = this.device.phoneNumber
       const channelId = itemData.channelId
-      this.$router.push(`/cloudRecord/detail/rtp/${deviceId}_${channelId}`)
+      this.$router.push(`/cloudRecord/detail/rtp/jt_${deviceId}_${channelId}`)
     },
     stopDevicePush: function(itemData) {
       this.$store.dispatch('jtDevice/stopPlay', {

web/src/views/jtDevice/channel/record2.vue

@@ -0,0 +1,485 @@
+<template>
+  <div style="width: 100%">
+    <div class="page-header">
+      <div class="page-title">
+        <el-page-header content="部标录像" @back="goBack" />
+      </div>
+    </div>
+    <el-container>
+      <el-aside width="300px">
+        <div class="record-list-box-box">
+          <el-date-picker v-model="chooseDate" size="mini" type="date" value-format="yyyy-MM-dd" placeholder="日期" @change="dateChange()" />
+          <div v-loading="recordsLoading" class="record-list-box" :style="recordListStyle">
+            <ul v-if="detailFiles.length >0" class="infinite-list record-list">
+              <li v-for="item in detailFiles" class="infinite-list-item record-list-item">
+
+                <el-tag v-if="chooseFile !== item" @click="checkedFile(item)">
+                  <i class="el-icon-video-camera" />
+                  {{ moment(item.startTime).format('HH:mm:ss') }}-{{ moment(item.endTime).format('HH:mm:ss') }}
+                </el-tag>
+                <el-tag v-if="chooseFile === item" type="danger">
+                  <i class="el-icon-video-camera" />
+                  {{ moment(item.startTime).format('HH:mm:ss') }}-{{ moment(item.endTime).format('HH:mm:ss') }}
+                </el-tag>
+                <i style="color: #409EFF;margin-left: 5px;" class="el-icon-download" @click="downloadRecord(item)" />
+              </li>
+            </ul>
+          </div>
+          <div v-if="detailFiles.length ==0" size="mini" class="record-list-no-val">暂无数据</div>
+        </div>
+
+      </el-aside>
+      <el-main style="padding-bottom: 10px;">
+        <div class="playBox" :style="playerStyle">
+          <player
+            ref="recordVideoPlayer"
+            :video-url="videoUrl"
+            :error="videoError"
+            :message="videoError"
+            :has-audio="hasAudio"
+            style="max-height: 100%"
+            fluent
+            autoplay
+            live
+          />
+        </div>
+        <div class="player-option-box">
+          <div>
+            <el-button-group>
+              <el-time-picker
+                v-model="timeRange"
+                size="mini"
+                is-range
+                align="left"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                range-separator="至"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+                placeholder="选择时间范围"
+                @change="timePickerChange"
+              />
+            </el-button-group>
+
+            <el-button-group>
+              <el-button size="mini" class="iconfont icon-zanting" title="开始" @click="control(0, 0)" />
+              <el-button size="mini" class="iconfont icon-kaishi" title="暂停" @click="control(1, 0)" />
+              <el-button size="mini" class="iconfont icon-stop" title="结束" @click="control(2, 0)" />
+              <el-dropdown size="mini" title="播放倍速" @command="scale">
+                <el-button size="mini">
+                  快进/快退 <i class="el-icon-arrow-down el-icon--right" />
+                </el-button>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item :command="[3, 1]">正常快进</el-dropdown-item>
+                  <el-dropdown-item :command="[3, 2]">2倍速快进</el-dropdown-item>
+                  <el-dropdown-item :command="[3, 4]">4倍速快进</el-dropdown-item>
+                  <el-dropdown-item :command="[3, 8]">8倍速快进</el-dropdown-item>
+                  <el-dropdown-item :command="[3, 16]">16倍速快进</el-dropdown-item>
+                  <el-dropdown-item :command="[4, 1]">正常快退</el-dropdown-item>
+                  <el-dropdown-item :command="[4, 2]">2倍速快退</el-dropdown-item>
+                  <el-dropdown-item :command="[4, 4]">4倍速快退</el-dropdown-item>
+                  <el-dropdown-item :command="[4, 8]">8倍速快退</el-dropdown-item>
+                  <el-dropdown-item :command="[4, 16]">16倍速快退</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+              <el-button size="mini" class="iconfont icon-xiazai1" title="下载选定录像" @click="downloadRecord()" />
+              <el-button v-if="sliderMIn === 0 && sliderMax === 86400" size="mini" class="iconfont icon-slider" title="放大滑块" @click="setSliderFit()" />
+              <el-button v-if="sliderMIn !== 0 || sliderMax !== 86400" size="mini" class="iconfont icon-slider-right" title="恢复滑块" @click="setSliderFit()" />
+            </el-button-group>
+          </div>
+          <el-slider
+            id="playtimeSlider"
+            v-model="playTime"
+            class="playtime-slider"
+            :disabled="detailFiles.length === 0"
+            :min="sliderMIn"
+            :max="sliderMax"
+            :range="true"
+            :format-tooltip="playTimeFormat"
+            :marks="playTimeSliderMarks"
+            @change="playTimeChange"
+          />
+          <div class="slider-val-box">
+            <div v-for="item of detailFiles" class="slider-val" :style="'width:' + getDataWidth(item) + '%; left:' + getDataLeft(item) + '%'" />
+          </div>
+        </div>
+
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import player from '../../common/jessibuca.vue'
+import moment from 'moment'
+export default {
+  name: 'App',
+  components: {
+    player
+  },
+  data() {
+    return {
+      phoneNumber: this.$route.params.phoneNumber,
+      channelId: this.$route.params.channelId,
+      recordsLoading: false,
+      streamId: '',
+      hasAudio: false,
+      detailFiles: [],
+      chooseDate: null,
+      videoUrl: null,
+      chooseFile: null,
+      streamInfo: null,
+      app: null,
+      mediaServerId: null,
+      ssrc: null,
+
+      sliderMIn: 0,
+      sliderMax: 86400,
+      autoPlay: true,
+      taskUpdate: null,
+      tabVal: 'running',
+      recordListStyle: {
+        height: this.winHeight + 'px',
+        overflow: 'auto',
+        margin: '10px auto 10px auto'
+      },
+      playerStyle: {
+        'margin': '0 auto 20px auto',
+        'height': this.winHeight + 'px'
+      },
+      winHeight: window.innerHeight - 240,
+      playTime: null,
+      timeRange: null,
+      startTime: null,
+      endTime: null,
+      playTimeSliderMarks: {
+        0: '00:00',
+        3600: '01:00',
+        7200: '02:00',
+        10800: '03:00',
+        14400: '04:00',
+        18000: '05:00',
+        21600: '06:00',
+        25200: '07:00',
+        28800: '08:00',
+        32400: '09:00',
+        36000: '10:00',
+        39600: '11:00',
+        43200: '12:00',
+        46800: '13:00',
+        50400: '14:00',
+        54000: '15:00',
+        57600: '16:00',
+        61200: '17:00',
+        64800: '18:00',
+        68400: '19:00',
+        72000: '20:00',
+        75600: '21:00',
+        79200: '22:00',
+        82800: '23:00',
+        86400: '24:00'
+      }
+    }
+  },
+  computed: {
+
+  },
+  mounted() {
+    this.recordListStyle.height = this.winHeight + 'px'
+    this.playerStyle['height'] = this.winHeight + 'px'
+    this.chooseDate = moment().format('YYYY-MM-DD')
+    this.dateChange()
+    window.addEventListener('beforeunload', this.stopPlayRecord)
+  },
+  destroyed() {
+    this.$destroy('recordVideoPlayer')
+    window.removeEventListener('beforeunload', this.stopPlayRecord)
+  },
+  methods: {
+    dateChange() {
+      if (!this.chooseDate) {
+        return
+      }
+
+      this.setTime(this.chooseDate + ' 00:00:00', this.chooseDate + ' 23:59:59')
+      this.recordsLoading = true
+      this.detailFiles = []
+      this.$store.dispatch('jtDevice/queryRecordList', {
+        phoneNumber: this.phoneNumber,
+        channelId: this.channelId,
+        startTime: this.startTime,
+        endTime: this.endTime
+      })
+        .then((data) => {
+          this.detailFiles = data
+        })
+        .catch((e) => {
+          console.log(e)
+        })
+        .finally(() => {
+          this.recordsLoading = false
+        })
+    },
+    moment: function(v) {
+      return moment(v)
+    },
+    setTime: function(startTime, endTime) {
+      this.startTime = startTime
+      this.endTime = endTime
+      const start = (new Date(this.startTime).getTime() - new Date(this.chooseDate + ' 00:00:00').getTime()) / 1000
+      const end = (new Date(this.endTime).getTime() - new Date(this.chooseDate + ' 00:00:00').getTime()) / 1000
+      console.log(start)
+      console.log(end)
+      this.playTime = [start, end]
+      this.timeRange = [startTime, endTime]
+    },
+    videoError: function(e) {
+      console.log('播放器错误：' + JSON.stringify(e))
+    },
+    checkedFile(file) {
+      this.chooseFile = file
+      this.setTime(file.startTime, file.endTime)
+      // 开始回放
+      this.playRecord()
+    },
+    playRecord: function() {
+      if (this.streamId !== '') {
+        this.stopPlayRecord(() => {
+          this.streamId = ''
+          this.playRecord()
+        })
+      } else {
+        this.$store.dispatch('jtDevice/startPlayback', {
+          phoneNumber: this.phoneNumber,
+          channelId: this.channelId,
+          startTime: this.startTime,
+          endTime: this.endTime,
+          type: 0,
+          rate: 0,
+          playbackType: 0,
+          playbackSpeed: 0
+        })
+          .then((data) => {
+            this.streamInfo = data
+            this.app = this.streamInfo.app
+            this.streamId = this.streamInfo.stream
+            this.mediaServerId = this.streamInfo.mediaServerId
+            this.ssrc = this.streamInfo.ssrc
+            this.videoUrl = this.getUrlByStreamInfo()
+            this.hasAudio = this.streamInfo.tracks && this.streamInfo.tracks.length > 1
+          })
+      }
+    },
+    control(command, playbackSpeed, time) {
+      this.$store.dispatch('jtDevice/controlPlayback', {
+        phoneNumber: this.phoneNumber,
+        channelId: this.channelId,
+        command: command,
+        playbackSpeed: playbackSpeed,
+        time: time
+      })
+    },
+    scale(command) {
+      this.control(command[0], command[1])
+    },
+    downloadRecord: function(row) {
+      const baseUrl = window.baseUrl ? window.baseUrl : ''
+      const downloadFile = ((process.env.NODE_ENV === 'development') ? process.env.BASE_API : baseUrl) +
+        `/api/jt1078/playback/download?phoneNumber=${this.phoneNumber}&channelId=${this.channelId}&startTime=${row.startTime}&endTime=${row.endTime}` +
+        `&alarmSign=${row.alarmSign}&mediaType=${row.mediaType}&streamType=${row.streamType}&storageType=${row.storageType}`
+      console.log(downloadFile)
+      const x = new XMLHttpRequest()
+      x.open('GET', downloadFile, true)
+      x.responseType = 'blob'
+      x.onload = (e) => {
+        const url = window.URL.createObjectURL(x.response)
+        const a = document.createElement('a')
+        a.href = url
+        a.download = this.phoneNumber + '-' + this.channelId + '.mp4'
+        a.click()
+      }
+      x.send()
+    },
+    stopPlayRecord: function(callback) {
+      console.log('停止录像回放')
+      if (this.streamId !== '') {
+        this.$refs['recordVideoPlayer'].pause()
+        this.videoUrl = ''
+        this.$store.dispatch('jtDevice/stopPlayback', {
+          phoneNumber: this.phoneNumber,
+          channelId: this.channelId,
+          streamId: this.streamId
+        })
+          .then(function(res) {
+            if (callback) callback()
+          })
+      }
+    },
+    getDataWidth(item) {
+      const timeForFile = this.getTimeForFile(item)
+      const result = (timeForFile[2]) / ((this.sliderMax - this.sliderMIn) * 1000)
+      return result * 100
+    },
+    getDataLeft(item) {
+      const timeForFile = this.getTimeForFile(item)
+      const differenceTime = timeForFile[0].getTime() - new Date(this.chooseDate + ' 00:00:00').getTime()
+      return parseFloat((differenceTime - this.sliderMIn * 1000) / ((this.sliderMax - this.sliderMIn) * 1000)) * 100
+    },
+    getUrlByStreamInfo() {
+      if (location.protocol === 'https:') {
+        this.videoUrl = this.streamInfo['wss_flv']
+      } else {
+        this.videoUrl = this.streamInfo['ws_flv']
+      }
+      return this.videoUrl
+    },
+    timePickerChange: function(val) {
+      this.setTime(val[0], val[1])
+    },
+    playTimeChange(val) {
+      console.log(val)
+
+      const startTimeStr = moment(new Date(this.chooseDate + ' 00:00:00').getTime() + val[0] * 1000).format('YYYY-MM-DD HH:mm:ss')
+      const endTimeStr = moment(new Date(this.chooseDate + ' 00:00:00').getTime() + val[1] * 1000).format('YYYY-MM-DD HH:mm:ss')
+
+      this.setTime(startTimeStr, endTimeStr)
+
+      this.playRecord()
+    },
+    setSliderFit() {
+      if (this.sliderMIn === 0 && this.sliderMax === 86400) {
+        if (this.detailFiles.length > 0) {
+          const timeForFile = this.getTimeForFile(this.detailFiles[0])
+          const lastTimeForFile = this.getTimeForFile(this.detailFiles[this.detailFiles.length - 1])
+          const timeNum = timeForFile[0].getTime() - new Date(this.chooseDate + ' ' + '00:00:00').getTime()
+          const lastTimeNum = lastTimeForFile[1].getTime() - new Date(this.chooseDate + ' ' + '00:00:00').getTime()
+
+          this.playTime = parseInt(timeNum / 1000)
+          this.sliderMIn = parseInt(timeNum / 1000 - timeNum / 1000 % (60 * 60))
+          this.sliderMax = parseInt(lastTimeNum / 1000 - lastTimeNum / 1000 % (60 * 60)) + 60 * 60
+
+          this.playTime = [this.sliderMIn, this.sliderMax]
+        }
+      } else {
+        this.sliderMIn = 0
+        this.sliderMax = 86400
+      }
+    },
+    getTimeForFile(file) {
+      const startTime = new Date(file.startTime)
+      const endTime = new Date(file.endTime)
+      return [startTime, endTime, endTime.getTime() - startTime.getTime()]
+    },
+    playTimeFormat(val) {
+      const h = parseInt(val / 3600)
+      const m = parseInt((val - h * 3600) / 60)
+      const s = parseInt(val - h * 3600 - m * 60)
+
+      let hStr = h
+      let mStr = m
+      let sStr = s
+      if (h < 10) {
+        hStr = '0' + hStr
+      }
+      if (m < 10) {
+        mStr = '0' + mStr; s
+      }
+      if (s < 10) {
+        sStr = '0' + sStr
+      }
+      return hStr + ':' + mStr + ':' + sStr
+    },
+    goBack() {
+      // 如果正在进行录像回放则，发送停止
+      if (this.streamId !== '') {
+        this.stopPlayRecord(() => {
+          this.streamId = ''
+        })
+      }
+      window.history.go(-1)
+    }
+  }
+}
+</script>
+
+<style>
+.el-slider__runway {
+  background-color:rgba(206, 206, 206, 0.47) !important;
+}
+.el-slider__bar {
+  background-color: rgba(153, 153, 153, 0) !important;
+}
+.playtime-slider {
+  position: relative;
+  z-index: 100;
+}
+.data-picker-true{
+
+}
+.data-picker-true:after{
+  content: "";
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  background-color: #606060;
+  border-radius: 4px;
+  left: 45%;
+  top: 74%;
+
+}
+.data-picker-false{
+
+}
+.slider-val-box{
+  height: 6px;
+  position: relative;
+  top: -22px;
+}
+.slider-val{
+  height: 6px;
+  background-color: #007CFF;
+  position: absolute;
+}
+.record-list-box-box{
+  width: 250px;
+  float: left;
+}
+.record-list-box{
+  overflow: auto;
+  width: 220px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  margin-top: 0px;
+  padding: 1rem 0;
+  background-color: #FFF;
+  margin-top: 10px;
+}
+.record-list{
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  background-color: #FFF;
+
+}
+.record-list-no-val {
+  position: absolute;
+  color: #9f9f9f;
+  top: 50%;
+  left: 110px;
+}
+.record-list-item{
+  padding: 0;
+  margin: 0;
+  margin: 0.5rem 0;
+  cursor: pointer;
+}
+.record-list-option {
+  width: 10px;
+  float: left;
+  margin-top: 39px;
+
+}
+.player-option-box{
+  padding: 0 20px;
+}
+</style>

web/src/views/jtDevice/index.vue

@@ -1,31 +1,43 @@
 <template>
   <div id="device" class="app-container">
-    <deviceList v-show="deviceId === null" @show-channel="showChannelList" />
-    <channelList v-if="deviceId !== null" :device-id="deviceId" @show-device="showDevice" />
+    <deviceList v-show="show === 'device'" @show-channel="showChannelList" @show-param="showParam" />
+    <channelList v-if="show === 'channel'" :device-id="deviceId" @show-device="showDevice" />
+    <deviceParam v-if="show === 'param'" :phone-number="phoneNumber" @show-device="showDevice" />
   </div>
 </template>
 
 <script>
 import deviceList from './list.vue'
 import channelList from './channel/index.vue'
+import deviceParam from './jtDeviceParam.vue'
 
 export default {
   name: 'Device',
   components: {
     deviceList,
-    channelList
+    channelList,
+    deviceParam
   },
   data() {
     return {
-      deviceId: null
+      show: 'device',
+      deviceId: null,
+      phoneNumber: null
     }
   },
   methods: {
     showChannelList: function(deviceId) {
       this.deviceId = deviceId
+      this.show = 'channel'
+    },
+    showParam: function(phoneNumber) {
+      this.phoneNumber = phoneNumber
+      this.show = 'param'
     },
     showDevice: function() {
       this.deviceId = null
+      this.phoneNumber = null
+      this.show = 'device'
     }
   }
 }

web/src/views/jtDevice/jtDeviceParam.vue

@@ -0,0 +1,339 @@
+<template>
+  <div id="jtDeviceParam" style="width: 100%">
+    <div class="page-header">
+      <div class="page-title">
+        <el-page-header content="终端参数" @back="showDevice" />
+      </div>
+    </div>
+    <el-container v-loading="isLoading" style="height: 82vh; overflow: auto">
+      <el-main style="padding: 5px; background-color: #ffffff;">
+        <el-divider content-position="center">通讯参数</el-divider>
+        <el-form ref="form" size="mini" :rules="rules" :model="form" label-width="240px" style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;">
+          <el-form-item label="心跳发送间隔(秒)" prop="keepaliveInterval">
+            <el-input v-model="form.keepaliveInterval" clearable />
+          </el-form-item>
+          <el-form-item label="TCP消息应答超时(秒)" prop="tcpResponseTimeout">
+            <el-input v-model="form.tcpResponseTimeout" clearable />
+          </el-form-item>
+          <el-form-item label="TCP消息重传次数" prop="tcpRetransmissionCount">
+            <el-input v-model="form.tcpRetransmissionCount" clearable />
+          </el-form-item>
+          <el-form-item label="UDP消息应答超时时间(秒)" prop="udpResponseTimeout">
+            <el-input v-model="form.udpResponseTimeout" clearable />
+          </el-form-item>
+          <el-form-item label="UDP消息重传次数" prop="udpRetransmissionCount">
+            <el-input v-model="form.udpRetransmissionCount" clearable />
+          </el-form-item>
+          <el-form-item label="SMS 消息应答超时时间(秒)" prop="smsResponseTimeout">
+            <el-input v-model="form.smsResponseTimeout" clearable />
+          </el-form-item>
+          <el-form-item label="SMS 消息重传次数" prop="smsRetransmissionCount">
+            <el-input v-model="form.smsRetransmissionCount" clearable />
+          </el-form-item>
+        </el-form>
+        <el-divider content-position="center">服务器参数</el-divider>
+        <el-form ref="form" size="mini" :rules="rules" :model="form" label-width="240px" style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;">
+          <el-form-item label="APN(主)" prop="apnMaster">
+            <el-input v-model="form.apnMaster" clearable />
+          </el-form-item>
+          <el-form-item label="无线通信拨号用户名(主)" prop="dialingUsernameMaster">
+            <el-input v-model="form.dialingUsernameMaster" clearable />
+          </el-form-item>
+          <el-form-item label="无线通信拨号密码(主)" prop="dialingPasswordMaster">
+            <el-input v-model="form.dialingPasswordMaster" clearable />
+          </el-form-item>
+          <el-form-item label="IP或域名(主)" prop="addressMaster">
+            <el-input v-model="form.addressMaster" clearable />
+          </el-form-item>
+          <el-form-item label="APN(备)" prop="apnBackup">
+            <el-input v-model="form.apnBackup" clearable />
+          </el-form-item>
+          <el-form-item label="无线通信拨号用户名(备)" prop="dialingUsernameBackup">
+            <el-input v-model="form.dialingUsernameBackup" clearable />
+          </el-form-item>
+          <el-form-item label="无线通信拨号密码(备)" prop="dialingPasswordBackup">
+            <el-input v-model="form.dialingPasswordBackup" clearable />
+          </el-form-item>
+          <el-form-item label="IP或域名(备)" prop="addressBackup">
+            <el-input v-model="form.addressBackup" clearable />
+          </el-form-item>
+
+          <el-form-item label="APN(从)" prop="apnBackup">
+            <el-input v-model="form.apnBackup" clearable />
+          </el-form-item>
+          <el-form-item label="无线通信拨号用户名(从)" prop="dialingUsernameSlave">
+            <el-input v-model="form.dialingUsernameSlave" clearable />
+          </el-form-item>
+          <el-form-item label="无线通信拨号密码(从)" prop="dialingPasswordSlave">
+            <el-input v-model="form.dialingPasswordSlave" clearable />
+          </el-form-item>
+          <el-form-item label="IP或域名(从)" prop="addressSlave">
+            <el-input v-model="form.addressSlave" clearable />
+          </el-form-item>
+
+          <el-form-item label="IC卡认证服务器IP(主)" prop="addressIcMaster">
+            <el-input v-model="form.addressIcMaster" clearable />
+          </el-form-item>
+          <el-form-item label="IC卡认证服务器IP(备)" prop="addressIcMaster">
+            <el-input v-model="form.addressIcBackup" clearable />
+          </el-form-item>
+          <el-form-item label="IC卡认证服务器TCP端口" prop="tcpPortIcMaster">
+            <el-input v-model="form.tcpPortIcMaster" clearable />
+          </el-form-item>
+          <el-form-item label="IC卡认证服务器UDP端口" prop="udpPortIcMaster">
+            <el-input v-model="form.udpPortIcMaster" clearable />
+          </el-form-item>
+        </el-form>
+
+        <el-divider content-position="center">位置汇报</el-divider>
+        <el-form ref="form" size="mini" :rules="rules" :model="form" label-width="240px" style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;">
+          <el-form-item label="策略" prop="locationReportingStrategy">
+            <el-select v-model="form.locationReportingStrategy" style="float: left; width: 100%">
+              <el-option label="定时汇报" :value="0">定时汇报</el-option>
+              <el-option label="定距汇报" :value="1" />
+              <el-option label="定时和定距汇报" :value="2" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="方案" prop="locationReportingPlan">
+            <el-select v-model="form.locationReportingPlan" style="float: left; width: 100%">
+              <el-option label="根据ACC状态" :value="0" />
+              <el-option label="登录状态和ACC状态" :value="1" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="驾驶员未登录汇报时间间隔(秒)" prop="reportingIntervalOffline">
+            <el-input v-model="form.reportingIntervalOffline" clearable />
+          </el-form-item>
+          <el-form-item label="休眠时汇报时间间隔(秒)" prop="reportingIntervalDormancy">
+            <el-input v-model="form.reportingIntervalDormancy" clearable />
+          </el-form-item>
+          <el-form-item label="紧急报警时汇报时间间隔(秒)" prop="reportingIntervalEmergencyAlarm">
+            <el-input v-model="form.reportingIntervalEmergencyAlarm" clearable />
+          </el-form-item>
+          <el-form-item label="缺省时间汇报间隔(秒)" prop="reportingIntervalDefault">
+            <el-input v-model="form.reportingIntervalDefault" clearable />
+          </el-form-item>
+          <el-form-item label="缺省距离汇报间隔(米)" prop="reportingDistanceDefault">
+            <el-input v-model="form.reportingDistanceDefault" clearable />
+          </el-form-item>
+          <el-form-item label="驾驶员未登录汇报距离间隔(米)" prop="reportingDistanceOffline">
+            <el-input v-model="form.reportingDistanceOffline" clearable />
+          </el-form-item>
+          <el-form-item label="休眠时汇报距离间隔(米)" prop="reportingDistanceDormancy">
+            <el-input v-model="form.reportingDistanceDormancy" clearable />
+          </el-form-item>
+          <el-form-item label="紧急报警时汇报距离间隔(米)" prop="reportingDistanceEmergencyAlarm">
+            <el-input v-model="form.reportingDistanceEmergencyAlarm" clearable />
+          </el-form-item>
+          <el-form-item label="拐点补传角度(度，小于180)" prop="inflectionPointAngle">
+            <el-input v-model="form.inflectionPointAngle" clearable />
+          </el-form-item>
+        </el-form>
+        <el-divider content-position="center">电话号码</el-divider>
+        <el-form ref="form" size="mini" :rules="rules" :model="form" label-width="240px" style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;">
+          <el-form-item label="监控平台电话号码" prop="platformPhoneNumber">
+            <el-input v-model="form.platformPhoneNumber" clearable />
+          </el-form-item>
+          <el-form-item label="复位电话号码" prop="phoneNumberForFactoryReset">
+            <el-input v-model="form.phoneNumberForFactoryReset" clearable />
+          </el-form-item>
+          <el-form-item label="监控平台SMS电话号码" prop="phoneNumberForSms">
+            <el-input v-model="form.phoneNumberForSms" clearable />
+          </el-form-item>
+          <el-form-item label="接收终端SMS文本报警号码" prop="phoneNumberForReceiveTextAlarm">
+            <el-input v-model="form.phoneNumberForReceiveTextAlarm" clearable />
+          </el-form-item>
+          <el-form-item label="终端电话接听策略" prop="locationReportingStrategy">
+            <el-select v-model="form.locationReportingStrategy" style="float: left; width: 100%">
+              <el-option label="自动接听" :value="0">定时汇报</el-option>
+              <el-option label="ACC ON时自动接听 ,OFF时手动接听" :value="1" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="每次最长通话时间(秒)" prop="longestCallTimeForPerSession">
+            <el-input v-model="form.longestCallTimeForPerSession" clearable />
+          </el-form-item>
+          <el-form-item label="当月最长通话时间(秒)" prop="longestCallTimeInMonth">
+            <el-input v-model="form.longestCallTimeInMonth" clearable />
+          </el-form-item>
+          <el-form-item label="监听电话号码" prop="phoneNumbersForListen">
+            <el-input v-model="form.phoneNumbersForListen" clearable />
+          </el-form-item>
+          <el-form-item label="监管平台特权短信号码" prop="privilegedSMSNumber">
+            <el-input v-model="form.privilegedSMSNumber" clearable />
+          </el-form-item>
+        </el-form>
+
+        <el-divider content-position="center">报警参数</el-divider>
+        <el-form ref="form" size="mini" :rules="rules" :model="form" label-width="240px" style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;">
+          <el-form-item label="报警屏蔽字(TODO)" prop="alarmMaskingWord">
+            <el-input v-model="form.alarmMaskingWord" clearable />
+          </el-form-item>
+          <el-form-item label="报警发送文本 SMS 开关(TODO)" prop="alarmSendsTextSmsSwitch">
+            <el-input v-model="form.alarmSendsTextSmsSwitch" clearable />
+          </el-form-item>
+          <el-form-item label="报警拍摄开关(TODO)" prop="alarmShootingSwitch">
+            <el-input v-model="form.alarmShootingSwitch" clearable />
+          </el-form-item>
+          <el-form-item label="报警拍摄存储标志(TODO)" prop="alarmShootingStorageFlags">
+            <el-input v-model="form.alarmShootingStorageFlags" clearable />
+          </el-form-item>
+          <el-form-item label="关键标志(TODO)" prop="KeySign">
+            <el-input v-model="form.KeySign" clearable />
+          </el-form-item>
+          <el-form-item label="电子围栏半径(米)" prop="fenceRadius">
+            <el-input v-model="form.fenceRadius" clearable />
+          </el-form-item>
+        </el-form>
+
+        <el-divider content-position="center">行驶参数</el-divider>
+        <el-form ref="form" size="mini" :rules="rules" :model="form" label-width="240px" style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;">
+          <el-form-item v-if="form.illegalDrivingPeriods" label="违规行驶时段-开始时间(HH:mm)" prop="illegalDrivingPeriods">
+            <el-input v-model="form.illegalDrivingPeriods.startTime" clearable />
+          </el-form-item>
+          <el-form-item v-if="form.illegalDrivingPeriods" label="违规行驶时段-结束时间(HH:mm)" prop="illegalDrivingPeriods">
+            <el-input v-model="form.illegalDrivingPeriods.endTime" clearable />
+          </el-form-item>
+          <el-form-item label="最高速度(千米每小时)" prop="topSpeed">
+            <el-input v-model="form.topSpeed" clearable />
+          </el-form-item>
+          <el-form-item label="超速持续时间(秒)" prop="overSpeedDuration">
+            <el-input v-model="form.overSpeedDuration" clearable />
+          </el-form-item>
+          <el-form-item label="连续驾驶时间门限(秒)" prop="continuousDrivingTimeThreshold">
+            <el-input v-model="form.continuousDrivingTimeThreshold" clearable />
+          </el-form-item>
+          <el-form-item label="当天累计驾驶时间门限(秒)" prop="cumulativeDrivingTimeThresholdForTheDay">
+            <el-input v-model="form.cumulativeDrivingTimeThresholdForTheDay" clearable />
+          </el-form-item>
+          <el-form-item label="最小休息时间(秒)" prop="minimumBreakTime">
+            <el-input v-model="form.minimumBreakTime" clearable />
+          </el-form-item>
+          <el-form-item label="最长停车时间(秒)" prop="maximumParkingTime">
+            <el-input v-model="form.maximumParkingTime" clearable />
+          </el-form-item>
+          <el-form-item label="超速预警差值(1/10 千米每小时)" prop="overSpeedWarningDifference">
+            <el-input v-model="form.overSpeedWarningDifference" clearable />
+          </el-form-item>
+          <el-form-item label="疲劳驾驶预警差值(秒)" prop="drowsyDrivingWarningDifference">
+            <el-input v-model="form.drowsyDrivingWarningDifference" clearable />
+          </el-form-item>
+          <el-form-item label="碰撞报警-碰撞时间(毫秒)" prop="collisionAlarmParamsCollisionAlarmTime">
+            <el-input v-model="form.collisionAlarmParams.collisionAlarmTime" clearable />
+          </el-form-item>
+          <el-form-item label="碰撞报警-碰撞加速度(0.1g)" prop="collisionAlarmParamsCollisionAcceleration">
+            <el-input v-model="form.collisionAlarmParams.collisionAcceleration" clearable />
+          </el-form-item>
+          <el-form-item label="侧翻报警参数-侧翻角度(度)" prop="rolloverAlarm">
+            <el-input v-model="form.rolloverAlarm" clearable />
+          </el-form-item>
+        </el-form>
+
+        <el-divider content-position="center">定时拍照控制</el-divider>
+        <el-form ref="form" size="mini" :rules="rules" :model="form" label-width="240px" style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;">
+          <el-form-item label="定时拍照开关-通道1" prop="rolloverAlarm">
+            <el-switch v-model="form.cameraTimer.switchForChannel1" />
+          </el-form-item>
+          <el-form-item label="定时拍照开关-通道2" prop="rolloverAlarm">
+            <el-switch v-model="form.cameraTimer.switchForChannel2" />
+          </el-form-item>
+          <el-form-item label="定时拍照开关-通道3" prop="rolloverAlarm">
+            <el-switch v-model="form.cameraTimer.switchForChannel3" />
+          </el-form-item>
+          <el-form-item label="定时拍照开关-通道4" prop="rolloverAlarm">
+            <el-switch v-model="form.cameraTimer.switchForChannel4" />
+          </el-form-item>
+          <el-form-item label="定时拍照开关-通道5" prop="rolloverAlarm">
+            <el-switch v-model="form.cameraTimer.switchForChannel5" />
+          </el-form-item>
+          <el-form-item label="定时拍照存储-通道1" prop="rolloverAlarm">
+            <el-switch v-model="form.cameraTimer.storageFlagsForChannel1" />
+          </el-form-item>
+          <el-form-item label="定时拍照存储-通道2" prop="rolloverAlarm">
+            <el-switch v-model="form.cameraTimer.storageFlagsForChannel2" />
+          </el-form-item>
+          <el-form-item label="定时拍照存储-通道3" prop="rolloverAlarm">
+            <el-switch v-model="form.cameraTimer.storageFlagsForChannel3" />
+          </el-form-item>
+          <el-form-item label="定时拍照存储-通道4" prop="rolloverAlarm">
+            <el-switch v-model="form.cameraTimer.storageFlagsForChannel4" />
+          </el-form-item>
+          <el-form-item label="定时拍照存储-通道5" prop="rolloverAlarm">
+            <el-switch v-model="form.cameraTimer.storageFlagsForChannel5" />
+          </el-form-item>
+
+          <el-form-item label="定时时间间隔" prop="timeInterval">
+            <el-input v-model="form.timeInterval" clearable />
+          </el-form-item>
+          <el-form-item label="定时时间单位" prop="rolloverAlarm">
+            <el-switch v-model="form.cameraTimer.timeUnit" active-text="分" inactive-text="秒" />
+          </el-form-item>
+        </el-form>
+        <div style="float: right;">
+          <el-button type="primary" @click="onSubmit">确认</el-button>
+          <el-button @click="showDevice">取消</el-button>
+        </div>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'JTDeviceParam',
+  components: {
+  },
+  props: {
+    phoneNumber: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      form: {
+        collisionAlarmParams: {},
+        illegalDrivingPeriods: {},
+        cameraTimer: {}
+      },
+      rules: {
+        deviceId: [{ required: true, message: '请输入设备编号', trigger: 'blur' }]
+      },
+      isLoading: false
+    }
+  },
+
+  mounted() {
+    this.initData()
+  },
+  methods: {
+    initData: function() {
+      this.isLoading = true
+      this.$store.dispatch('jtDevice/queryConfig', this.phoneNumber)
+        .then((data) => {
+          this.form = data
+        })
+        .catch((e) => {
+          console.log(e)
+        })
+        .finally(() => {
+          this.isLoading = false
+        })
+    },
+    onSubmit: function() {
+      this.$store.dispatch('jtDevice/setConfig', {
+        phoneNumber: this.phoneNumber,
+        config: this.form
+      })
+        .then((data) => {
+          this.$message.success({
+            showClose: true,
+            message: '保存成功'
+          })
+        })
+    },
+    showDevice: function() {
+      this.$emit('show-device')
+    }
+  }
+}
+</script>

web/src/views/jtDevice/list.vue

@@ -3,8 +3,8 @@
     <el-form :inline="true" size="mini">
       <el-form-item>
         <el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="add">新设备</el-button>
-        <el-button icon="el-icon-info" style="margin-right: 1rem;" @click="showInfo()">接入信息
-      </el-button></el-form-item>
+        <el-button icon="el-icon-info" style="margin-right: 1rem;" @click="showInfo()">接入信息</el-button>
+      </el-form-item>
       <el-form-item style="float: right;">
         <el-button
           icon="el-icon-refresh-right"
@@ -84,8 +84,8 @@
                 终端参数</el-dropdown-item>
               <!--              <el-dropdown-item command="attribute" v-bind:disabled="!scope.row.status">-->
               <!--                终端属性</el-dropdown-item>-->
-              <el-dropdown-item command="connection" :disabled="!scope.row.status">
-                终端连接</el-dropdown-item>
+<!--              <el-dropdown-item command="connection" :disabled="!scope.row.status">-->
+<!--                终端连接</el-dropdown-item>-->
               <!--              <el-dropdown-item command="linkDetection" v-bind:disabled="!scope.row.status" >-->
               <!--                链路检测</el-dropdown-item>-->
               <!--              <el-dropdown-item command="position" v-bind:disabled="!scope.row.status" >-->
@@ -213,6 +213,9 @@ export default {
       console.log(row)
       this.$emit('show-channel', row.id)
     },
+    showParam: function(row) {
+      this.$emit('show-param', row.phoneNumber)
+    },
     add: function() {
       this.$refs.deviceEdit.openDialog(null, () => {
         this.$refs.deviceEdit.close()
@@ -226,7 +229,7 @@ export default {
     },
     moreClick: function(command, itemData) {
       if (command === 'params') {
-        this.$router.push(`/jtDeviceParams/${itemData.phoneNumber}`)
+        this.showParam(itemData)
       } else if (command === 'connection') {
         // this.queryCloudRecords(itemData)
       } else {