[1078] 合并新UI

2025-05-14 18:01:12 +08:00
parent 68f7d3ef74
commit 081a146f2a
9 changed files with 535 additions and 467 deletions
--- a/web/src/views/jtDevice/channel/edit.vue
+++ b/web/src/views/jtDevice/channel/edit.vue
@@ -1,94 +1,89 @@
 <template>
-  <div id="channelList" style="width: 100%">
+  <div id="channelEdit" style="width: 100%; height: 100%">
    <div class="page-header">
      <div class="page-title">
-        <el-button icon="el-icon-back" size="mini" style="font-size: 20px; color: #000;" type="text" @click="close" ></el-button>
-        <el-divider direction="vertical"></el-divider>
-        编辑推流信息
-      </div>
-      <div class="page-header-btn">
-        <div style="display: inline;">
-          <el-button icon="el-icon-close" size="mini" style="font-size: 20px; color: #000;" type="text" @click="close" ></el-button>
-        </div>
+        <el-page-header content="编辑推流信息" @back="close" />
      </div>
    </div>
-    <el-tabs tab-position="left">
-      <el-tab-pane label="推流信息编辑" style="background-color: #FFFFFF; padding: 1rem">
-        <el-form ref="form" :rules="rules" :model="jtChannel" label-width="240px" style="display: grid; grid-template-columns: 1fr 1fr 1fr ">
+    <el-tabs tab-position="left" style="padding: 1rem; height: calc(100% - 24px)">
+      <el-tab-pane label="部标通道编辑" style="background-color: #FFFFFF;">
+        <el-form ref="form" :rules="rules" :model="jtChannel" label-width="60px" style="width: 40rem; margin: 0 auto">
          <el-form-item label="编号" prop="channelId">
-            <el-input v-model="jtChannel.channelId" clearable></el-input>
+            <el-input v-model="jtChannel.channelId" clearable />
          </el-form-item>
          <el-form-item label="名称" prop="name">
-            <el-input v-model="jtChannel.name" clearable></el-input>
+            <el-input v-model="jtChannel.name" clearable />
          </el-form-item>
-        </el-form>
-        <el-form style="text-align: right">
-          <el-form-item >
+          <el-form-item style="text-align: right">
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button @click="close">取消</el-button>
          </el-form-item>
        </el-form>
+
      </el-tab-pane>
-      <el-tab-pane label="国标通道配置" v-if="jtChannel.id">
-        <CommonChannelEdit ref="commonChannelEdit" :dataForm="jtChannel" :cancel="close"></CommonChannelEdit>
+      <el-tab-pane :disabled="!jtChannel.id" label="国标通道配置">
+        <CommonChannelEdit ref="commonChannelEdit" :data-form="jtChannel" :cancel="close" />
      </el-tab-pane>
    </el-tabs>
  </div>
 </template>

 <script>
-import CommonChannelEdit from './common/CommonChannelEdit'
+import CommonChannelEdit from '../../common/CommonChannelEdit'

 export default {
-  name: 'channelList',
-  props: [ 'jtChannel', 'closeEdit'],
+  name: 'ChannelEdit',
  components: {
    CommonChannelEdit
  },
+  props: ['jtChannel', 'closeEdit'],
  data() {
    return {
      version: 3,
      rules: {
-        deviceId: [{ required: true, message: "请输入设备编号", trigger: "blur" }]
+        deviceId: [{ required: true, message: '请输入设备编号', trigger: 'blur' }]
      },
-      winHeight: window.innerHeight - 200,
      isLoading: false,
-      loadSnap: {},
-    };
+      loadSnap: {}
+    }
  },

  mounted() {},
  methods: {
-    onSubmit: function () {
+    onSubmit: function() {
      console.log(this.jtChannel)
-      let isEdit = typeof (this.jtChannel.id) !== "undefined"
-      this.$axios({
-        method: 'post',
-        url:`/api/jt1078/terminal/channel/${isEdit?'update':'add'}/`,
-        params: this.jtChannel
-      }).then((res) => {
-        console.log(res.data)
-        if (res.data.code === 0) {
-          this.$message({
-            showClose: true,
-            message: "保存成功",
-            type: "success",
-          });
-          this.jtChannel = res.data.data
-        }else {
-          this.$message({
-            showClose: true,
-            message: res.data.msg,
-            type: "error",
-          });
-        }
-      }).catch(function (error) {
-        console.log(error);
-      });
+      const isEdit = typeof (this.jtChannel.id) !== 'undefined'
+      if (isEdit) {
+        this.$store.dispatch('jtDevice/updateChannel')
+          .then(data => {
+            this.$message({
+              showClose: true,
+              message: '保存成功',
+              type: 'success'
+            })
+            this.jtChannel = data
+          })
+          .catch(function(error) {
+            console.log(error)
+          })
+      } else {
+        this.$store.dispatch('jtDevice/addChannel')
+          .then(data => {
+            this.$message({
+              showClose: true,
+              message: '保存成功',
+              type: 'success'
+            })
+            this.jtChannel = data
+          })
+          .catch(function(error) {
+            console.log(error)
+          })
+      }
    },
-    close: function () {
+    close: function() {
      this.closeEdit()
-    },
+    }
  }
-};
+}
 </script>
--- a/web/src/views/jtDevice/channel/index.vue
+++ b/web/src/views/jtDevice/channel/index.vue
@@ -1,29 +1,27 @@
 <template>
  <div id="channelList" style="height: calc(100vh - 124px);">
    <div v-if="!jtChannel">
-      <div class="page-header">
-        <div class="page-title">
-          <el-button icon="el-icon-back" size="mini" style="font-size: 20px; color: #000;" type="text" @click="showDevice" />
-          <el-divider direction="vertical" />
-          通道列表
-        </div>
-        <div class="page-header-btn">
-          <div style="display: inline;">
-            搜索:
-            <el-input
-              v-model="searchSrt"
-              style="margin-right: 1rem; width: auto;"
-              size="mini"
-              placeholder="关键字"
-              prefix-icon="el-icon-search"
-              clearable
-              @input="search"
-            />
-            <el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="add">添加通道</el-button>
-            <el-button icon="el-icon-refresh-right" circle size="mini" @click="refresh()" />
-          </div>
-        </div>
-      </div>
+      <el-form :inline="true" size="mini">
+        <el-form-item style="margin-right: 2rem">
+          <el-page-header content="通道列表" @back="showDevice" />
+        </el-form-item>
+        <el-form-item label="搜索">
+          <el-input
+            v-model="searchSrt"
+            style="margin-right: 1rem; width: auto;"
+            placeholder="关键字"
+            prefix-icon="el-icon-search"
+            clearable
+            @input="search"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="add">添加通道</el-button>
+        </el-form-item>
+        <el-form-item style="float: right;">
+          <el-button icon="el-icon-refresh-right" circle @click="refresh()" />
+        </el-form-item>
+      </el-form>
      <el-container v-loading="isLoging" style="height: 82vh;">
        <el-main style="padding: 5px;">
          <el-table
@@ -116,7 +114,6 @@
    </div>
    <devicePlayer ref="devicePlayer" />
    <channelEdit v-if="jtChannel" ref="channelEdit" :jt-channel="jtChannel" :close-edit="closeEdit" />
-    <!--设备列表-->

  </div>
 </template>
@@ -124,7 +121,6 @@
 <script>
 import devicePlayer from '../jtDevicePlayer.vue'
 import channelEdit from './edit.vue'
-import { play } from '@/api/jtDevice'

 export default {
  name: 'ChannelList',
@@ -170,7 +166,6 @@ export default {
      this.getDeviceChannelList()
    },
    initParam: function() {
-      this.deviceId = this.$route.params.deviceId
      this.currentPage = 1
      this.count = 15
      this.$store.dispatch('jtDevice/queryDeviceById', this.deviceId)
@@ -301,16 +296,9 @@ export default {
    },
    updateChannel: function(row) {
      this.$store.dispatch('jtDevice/updateChannel', row)
-        .then(data => {
-
+        .catch((e) => {
+          console.log(e)
        })
-      this.$axios({
-        method: 'post',
-        url: `/api/jt1078/terminal/channel/update`,
-        params: row
-      }).then(function(res) {
-        console.log(JSON.stringify(res))
-      })
    },
    refresh: function() {
      this.initData()
--- a/web/src/views/jtDevice/channel/record.vue
+++ b/web/src/views/jtDevice/channel/record.vue
@@ -109,20 +109,17 @@
 </template>

 <script>
-import uiHeader from '../layout/UiHeader.vue'
-import player from './common/jessibuca.vue'
+import player from '../../common/jessibuca.vue'
 import moment from 'moment'
-import JTDeviceService from './service/JTDeviceService'
 export default {
  name: 'App',
  components: {
-    uiHeader, player
+    player
  },
  data() {
    return {
      phoneNumber: this.$route.params.phoneNumber,
      channelId: this.$route.params.channelId,
-      deviceService: new JTDeviceService(),
      recordsLoading: false,
      streamId: '',
      hasAudio: false,