feat:大屏配置

src/views/alarm/setting/index.vue

@@ -11,6 +11,9 @@
                 <div class="w-full" v-if="state.currentTab === 'DOOR'">
                     <CarSetting ref="carSetting" />
                 </div>
+                <div class="w-full" v-if="state.currentTab === 'PANEL'">
+                    <PanelSetting ref="panelSetting" />
+                </div>
                 <div class="h-20" />
             </div>
             <div class="flex justify-center">
@@ -23,6 +26,7 @@
 <script setup lang="ts" name="deviceLog">
 const CarSetting = defineAsyncComponent(() => import('./car/car-setting.vue'));
 const DoorSetting = defineAsyncComponent(() => import('./door/door-setting.vue'));
+const PanelSetting = defineAsyncComponent(() => import('./panel/index.vue'));
 
 const data = {
     tabs: [
@@ -33,12 +37,17 @@ const data = {
         {
             label: "道闸预警配置",
             name: "DOOR",
+        },
+        {
+            label: "大屏配置",
+            name: "PANEL",
         }
     ]
 }
 
 const doorSetting = ref()
 const carSetting = ref()
+const panelSetting = ref()
 
 const state = reactive<any>({
     currentTab: data.tabs[0].name,
@@ -57,5 +66,9 @@ function onSubmit() {
         carSetting.value.onSubmit()
         return
     }
+    if (state.currentTab == "PANEL") {
+        panelSetting.value.onSubmit()
+        return
+    }
 }
 </script>

src/views/alarm/setting/panel/index.vue

@@ -0,0 +1,121 @@
+<template>
+    <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="180px"
+        v-loading="state.loading">
+        <el-divider class="mb-12">大屏配置</el-divider>
+        <el-form-item prop="panelUrl">
+            <template #label>
+                <div class="flex items-center gap-1">
+                    <span>大屏地址</span>
+                    <el-tooltip class="box-item" :content="`大屏的内网访问地址`" placement="top">
+                        <el-icon :size="16">
+                            <InfoFilled />
+                        </el-icon>
+                    </el-tooltip>
+                </div>
+            </template>
+            <el-input v-model="form.panelUrl" placeholder="请输入大屏地址">
+                <template #append>
+                    <el-icon @click="openUrl">
+                        <Position />
+                    </el-icon>
+                </template>
+            </el-input>
+        </el-form-item>
+    </el-form>
+</template>
+
+<script setup lang="ts" name="panelSetting">
+import Cookies from 'js-cookie';
+import { ElLoading } from 'element-plus'
+
+import { useMessage } from "/@/hooks/message"
+import * as ComDhSettingApi from "/@/api/com/comDhSetting";
+
+const dataFormRef = ref();
+
+const state = reactive<any>({
+    loading: false,
+})
+
+// 提交表单数据
+const form = reactive<any>({
+    // 大屏地址
+    panelUrl: null,
+})
+
+const dataRules = ref({
+    panelUrl: [{ required: true, message: '大屏地址不能为空', trigger: 'blur' }],
+})
+
+onMounted(() => {
+    getSetting()
+})
+
+async function getSetting() {
+    state.loading = true
+    try {
+        const { data } = await ComDhSettingApi.getObj()
+        if (data) {
+            Object.assign(form, data)
+        }
+    } catch (err: any) {
+        console.error(err);
+    } finally {
+        state.loading = false
+    }
+}
+
+async function onSubmit() {
+    const valid = await dataFormRef.value.validate().catch(() => { });
+    if (!valid) return false;
+    state.loading = true
+    try {
+        const _form = {
+            ...form,
+        }
+        await ComDhSettingApi.putObj(_form)
+        useMessage().success('修改成功');
+    } catch (err: any) {
+        console.error(err);
+        useMessage().error(err.msg);
+    } finally {
+        state.loading = false
+    }
+}
+
+function openUrl() {
+
+    const loading = ElLoading.service({
+        lock: true,
+        text: '跳转中...',
+        background: 'rgba(0, 0, 0, 0.7)',
+    })
+
+    try {
+        const token = Cookies.get("token")
+        const refreshToken = Cookies.get("refresh_token")
+        if (!token || !refreshToken) {
+            throw new Error()
+        }
+
+        if (form.panelUrl == null) {
+            throw new Error()
+        }
+
+        const url = form.panelUrl
+        const fullUrl = `${url}?token=${token}&refresh_token=${refreshToken}`
+
+        window.open(fullUrl, '_blank');
+    } catch (error: any) {
+        console.log(error);
+    } finally {
+        loading.close()
+    }
+}
+
+defineExpose({
+    getSetting,
+    onSubmit
+});
+
+</script>

src/views/device/deviceCamera/index.vue

@@ -97,7 +97,7 @@
         </div>
         <!-- 编辑、新增  -->
         <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
-        <preview-video ref="previewVideoRef" />
+        <preview-video-dialog ref="previewVideoRef" />
         <replay-video-dialog ref="replayVideoDialogRef" />
     </div>
 </template>
@@ -110,7 +110,7 @@ import { useDict } from '/@/hooks/dict';
 
 // 引入组件
 const FormDialog = defineAsyncComponent(() => import("../components/deviceForm.vue"));
-const PreviewVideo = defineAsyncComponent(() => import("../components/preview-video/index.vue"));
+const PreviewVideoDialog = defineAsyncComponent(() => import("../components/preview-video/preview-video-dialog.vue"));
 const ReplayVideoDialog = defineAsyncComponent(() => import("../components/replay-video/replay-video-dialog.vue"));
 // 定义查询字典
 const { device_category, is_sync, is_nline, dh_device_manufacturer } = useDict("device_category", "is_sync", "is_nline", "dh_device_manufacturer")

src/views/device/deviceManage/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="layout-padding">
     <div class="layout-padding-auto layout-padding-view">
+
       <draggable-org-Tree ref="draggableDepTreeRef" placeholder="请输入部门名称" :show-expand="true"
         @getSelectNode="handleGetSelectNode" switch-inactive-text="包含" switch-active-text="不包含" :defaultTreeWidth="20"
         :nodeClickable="false">
@@ -90,7 +91,6 @@
     </div>
     <!-- 编辑、新增  -->
     <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
-    <preview-video ref="previewVideoRef" />
   </div>
 </template>
 
@@ -107,7 +107,6 @@ const PreviewVideo = defineAsyncComponent(() => import("../components/preview-vi
 const { device_category, is_sync, is_nline, dh_device_manufacturer } = useDict("device_category", "is_sync", "is_nline", "dh_device_manufacturer")
 // 定义变量内容
 const formDialogRef = ref()
-const previewVideoRef = ref()
 // 搜索变量
 const queryRef = ref()
 const showSearch = ref(true)

src/views/panel/index.vue

@@ -0,0 +1,58 @@
+<template>
+    <div class="layout-padding" v-loading="loading">
+        <div class="layout-padding-auto layout-padding-view">
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts" name="panel">
+import Cookies from 'js-cookie';
+
+import { getObj } from "/@/api/com/comDhSetting"
+
+const router = useRouter();
+
+const loading = ref(false)
+const setting = ref()
+
+onMounted(async () => {
+    try {
+        const token = Cookies.get("token")
+        const refreshToken = Cookies.get("refresh_token")
+        if (!token || !refreshToken) {
+            throw new Error()
+        }
+
+        await getSeting();
+        if (setting.value == null || setting.value.panelUrl == null) {
+            throw new Error()
+        }
+
+        const url = setting.value.panelUrl
+        const fullUrl = `${url}?token=${token}&refresh_token=${refreshToken}`
+
+        loading.value = true
+        window.open(fullUrl, '_blank');
+        // vue-router back
+        router.back()
+    } catch (error: any) {
+        console.log(error);
+    } finally {
+        loading.value = false
+    }
+})
+
+async function getSeting() {
+    try {
+        const { data } = await getObj()
+        if (data) {
+            setting.value = data
+        }
+    } catch (error: any) {
+        console.log(error);
+    }
+}
+
+</script>
+
+<style lang="scss" scoped></style>