1

src/components/Admin/PageEdit.vue

@@ -144,7 +144,9 @@
               <GenerateVoice :list="form.conversion.list"></GenerateVoice>
             </template>
             <template v-if="form.start_broadcast">
-              <StartBroadcast :status="'not_on_air'"></StartBroadcast>
+              <StartBroadcast
+                :start_broadcast="form.start_broadcast"
+              ></StartBroadcast>
             </template>
             <template v-if="form.is_send">
               <div class="custom-send-box">

src/components/Admin/StartBroadcast.vue

@@ -2,10 +2,12 @@
   <div class="admin-start-broadcast">
     <CustomButton
       @click="onClose"
+      :loading="CloseLoading"
       :class="[
         'live-stream--default',
-        BroadcastStatus == 'not_on_air' ? 'close-live-stream--disabled' : '',
-        BroadcastStatus == 'air_success' ? 'can-close-live-stream' : '',
+        'live-stream--close',
+        CanAvailableAir() ? 'close-live-stream--disabled' : '',
+        BroadcastStatus == '2' ? 'can-close-live-stream' : '',
       ]"
     >
       关播
@@ -18,10 +20,12 @@
     <!--  -->
     <CustomButton
       @click="onStart"
+      :loading="StartLoading"
       :class="[
         'live-stream--default',
-        BroadcastStatus == 'not_on_air' ? 'start-not-air' : '',
-        BroadcastStatus == 'air_success' ? 'start-not-air--success' : '',
+        'live-stream--start',
+        CanAvailableAir() ? 'start-not-air' : '',
+        BroadcastStatus == '2' ? 'start-not-air--success' : '',
       ]"
     >
       {{ StartLiveStreamText() }}
@@ -35,50 +39,114 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import CustomButton from './button.vue';
 import CloseSvg from '@/assets/svg/form/close.svg';
 import StartLiveStreamSvg from '@/assets/svg/form/startLiveStream.svg';
+import { show_message } from '@/utils/tdesign_tool';
+import { VoicesStopLive, VoicesStartLive } from '@/utils/api/ai';
+import { useRouter } from 'vue-router';
 
 const props = withDefaults(
   defineProps<{
-    status: string;
+    start_broadcast: any;
   }>(),
   {}
 );
-const emit = defineEmits(['update:modelValue']);
+const router = useRouter();
 /**
  * 开播状态
- * not_on_air-未开播
- * air_success - 已开播
  */
-const BroadcastStatus = ref<'not_on_air' | 'air_success'>('not_on_air');
+const BroadcastStatus = ref(
+  props.start_broadcast.status ? props.start_broadcast.status : '1'
+);
 // 关播按钮loading
 const CloseLoading = ref(false);
 // 开播按钮loading
 const StartLoading = ref(false);
 
+// 是否可以开播
+const CanAvailableAir = () => {
+  const list = ['1', '3'];
+  return list.includes(BroadcastStatus.value);
+};
+
+watch(props.start_broadcast, (v) => {
+  if (v && v.status) {
+    BroadcastStatus.value = v.status;
+  }
+});
 // 开播按钮显示的文字
 const StartLiveStreamText = () => {
-  if (BroadcastStatus.value == 'not_on_air') {
+  if (CanAvailableAir()) {
     return '开播';
-  } else if (BroadcastStatus.value == 'air_success') {
+  } else if (BroadcastStatus.value == '2') {
     return '开播中';
   }
   return '开播';
 };
 
+// 开关播提交前校验
+const beforeSubmit = () => {
+  const { row } = props.start_broadcast;
+  if (!row.hash || !row.live_link) {
+    show_message('缺少参数');
+    return false;
+  }
+  return {
+    hash: row.hash,
+    live_link: row.live_link,
+  };
+};
+
+// 回到列表页
+const goBack = () => {
+  router.replace({
+    path: '/AILiveStreaming/LiveStream',
+  });
+};
+
 // 关播
-const onClose = () => {
-  if (BroadcastStatus.value == 'air_success') {
+const onClose = async () => {
+  if (BroadcastStatus.value == '2') {
     // 开播成功才可以关闭
+    try {
+      const params = beforeSubmit();
+      if (!params) {
+        return;
+      }
+      CloseLoading.value = true;
+      const res: any = await VoicesStopLive(params);
+      if (res.code == 0) {
+        show_message('已关播', 'success');
+        goBack();
+      }
+      CloseLoading.value = false;
+    } catch (e) {
+      console.log(e);
+      CloseLoading.value = false;
+    }
   }
 };
 // 开播
-const onStart = () => {
-  if (BroadcastStatus.value == 'not_on_air') {
-    // 未开播才可以开播
-    console.log('可以开播');
+const onStart = async () => {
+  if (CanAvailableAir()) {
+    try {
+      const params = beforeSubmit();
+      if (!params) {
+        return;
+      }
+      StartLoading.value = true;
+      const res: any = await VoicesStartLive(params);
+      if (res.code == 0) {
+        show_message('已开播', 'success');
+        goBack();
+      }
+      StartLoading.value = false;
+    } catch (e) {
+      console.log(e);
+      StartLoading.value = false;
+    }
   }
 };
 </script>
@@ -111,6 +179,39 @@ const onStart = () => {
       }
     }
   }
+  // 开
+  .live-stream--start.t-is-loading {
+    background-color: unset;
+    border-color: unset;
+    &:hover {
+      border-color: #00dddd;
+      color: #00dddd;
+    }
+    .t-loading__gradient-conic {
+      background: conic-gradient(
+        from 90deg at 50% 50%,
+        rgba(0, 0, 0, 0) 0deg,
+        #00dddd 360deg
+      ) !important;
+    }
+  }
+  // 关
+  .live-stream--close.t-is-loading {
+    background-color: unset;
+    border-color: unset;
+    &:hover {
+      border-color: #e5404f;
+      color: #e5404f;
+      background: unset;
+    }
+    .t-loading__gradient-conic {
+      background: conic-gradient(
+        from 90deg at 50% 50%,
+        rgba(0, 0, 0, 0) 0deg,
+        #e5404f 360deg
+      ) !important;
+    }
+  }
   // 禁止点击
   .close-live-stream--disabled {
     border: 1px solid #8e8e8e;
@@ -164,6 +265,7 @@ const onStart = () => {
     border: 1px solid transparent;
     background: #00dddd;
     color: black;
+    cursor: not-allowed;
     .start-broadcast-icon {
       svg {
         fill: black;

src/components/Admin/button.vue

 <template>
   <TButton
     class="custom-admin-button"
+    :loading="loading"
     :style="{
       width: width,
       background: bk,
@@ -23,10 +24,12 @@ const props = withDefaults(
     width?: string;
     bold?: boolean;
     bk?: string;
+    loading?: boolean;
   }>(),
   {
     width: '',
     bk: '',
+    loading: false,
   }
 );
 </script>

src/pages/AILiveStreaming/LiveStreamDetail/index.vue

@@ -17,6 +17,11 @@ const imgs = {
 };
 const cur_id = ref('');
 const cur_hash = ref('');
+const start_broadcast = ref({
+  show: true,
+  status: '',
+  row: {},
+});
 // 查看页面
 const ManagementForm = reactive({
   title: '直播管理',
@@ -37,7 +42,7 @@ const ManagementForm = reactive({
   // 播放音频
   play_audio: false,
   // 开播按钮
-  start_broadcast: true,
+  start_broadcast: start_broadcast.value,
   form_options: [
     {
       icon: imgs.fill,
@@ -157,6 +162,8 @@ onBeforeMount(async () => {
 
   cur_id.value = row.id;
   cur_hash.value = row.hash;
+  start_broadcast.value.status = row.status;
+  start_broadcast.value.row = row;
 });
 </script>
 

src/utils/api/ai.ts

@@ -250,6 +250,24 @@ export const LiveStreamTaskManual = (data: any) => {
   });
 };
 
+// 开播
+export const VoicesStartLive = (data: any) => {
+  return request.post('/api/voices/start-live', data, {
+    headers: {
+      authorization: `Bearer ${getUserCookie()}`,
+    },
+  });
+};
+
+// 关播
+export const VoicesStopLive = (data: any) => {
+  return request.post('/api/voices/stop-live', data, {
+    headers: {
+      authorization: `Bearer ${getUserCookie()}`,
+    },
+  });
+};
+
 /**
  * 直播管理 end
  */

vite.config.ts

@@ -31,14 +31,6 @@ export default defineConfig(({ mode }) => {
       host: '0.0.0.0',
       proxy: {
         '/api': api,
-        '/video': 'http://192.168.1.19:5000',
-        '/files': {
-          target: 'https://chensav.oss-cn-shenzhen.aliyuncs.com', // 代理的目标地址
-          changeOrigin: true, // 开发模式，默认的origin是真实的 origin:localhost:3000 代理服务会把origin修改为目标地址
-          // secure: true, // 是否https接口
-          // ws: true, // 是否代理websockets
-          rewrite: (path) => path.replace(/^\/files/, ''),
-        },
       },
     },
     plugins: [