iotc/ruoyi-ui-vue3/src/views/device/camera/add.vue

<template>
    <div style="padding: 10px 15px">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>主设备信息-新增</span>
                </div>
            </template>
            <el-row>
                <el-col :span="24">
                    <el-descriptions :column="4">
                        <el-descriptions-item>
                            <template #label>
                                <div style="display: inline-block;min-width: 100px;text-align: right">
                                    <span style="color: red">*</span> 设备名称
                                </div>

                            </template>
                            <div class="content-w">
                                <el-input v-model="vidoeParams.name" placeholder="请输入设备名称" />
                            </div>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div style="display: inline-block;min-width: 100px;text-align: right">
                                    <span style="color: red">*</span> 平台编码
                                </div>

                            </template>
                            <div class="content-w">
                                <el-input v-model="vidoeParams.sn" placeholder="请输入平台编码" />
                            </div>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template #label>
                                <div style="display: inline-block;min-width: 100px;text-align: right">
                                    <span style="color: red">*</span> 主设备类型
                                </div>

                            </template>
                            <div class="content-w">
                                <el-input v-model="vidoeParams.type" placeholder="请输入主设备类型" />
                            </div>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template #label>
                                <div style="display: inline-block;min-width: 100px;text-align: right">
                                    <span style="color: red">*</span> 主设备协议类型
                                </div>

                            </template>
                            <div class="content-w">
                                <el-input v-model="vidoeParams.protocolType" placeholder="请输入主设备协议类型" />
                            </div>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template #label>
                                <div style="display: inline-block;min-width: 100px;text-align: right">
                                    设备互联网编码
                                </div>

                            </template>
                            <div class="content-w">
                                <el-input v-model="vidoeParams.connectCode" placeholder="请输入设备互联网编码" />
                            </div>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template #label>
                                <div style="display: inline-block;min-width: 100px;text-align: right">
                                    设备型号
                                </div>

                            </template>
                            <div class="content-w">
                                <el-input v-model="vidoeParams.model" placeholder="请输入设备型号" />
                            </div>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template #label>
                                <div style="display: inline-block;min-width: 100px;text-align: right">
                                    设备制式
                                </div>

                            </template>
                            <div class="content-w">
                                <el-input v-model="vidoeParams.videoFormat" placeholder="请输入设备制式" />
                            </div>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template #label>
                                <div style="display: inline-block;min-width: 100px;text-align: right">
                                    设备提供商类型
                                </div>

                            </template>
                            <div class="content-w">
                                <el-input v-model="vidoeParams.vendorType" placeholder="请输入设备提供商类型" />
                            </div>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template #label>
                                <div style="display: inline-block;min-width: 100px;text-align: right">
                                    序列号
                                </div>

                            </template>
                            <div class="content-w">
                                <el-input v-model="vidoeParams.serialNumber" placeholder="请输入序列号" />
                            </div>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-col>
            </el-row>

        </el-card>
        <el-card class="box-card" style="margin-top: 10px">
            <template #header>
                <div class="card-header">
                    <span>视频设备</span>
                    <div>
                        <el-button type="primary" plain @click="openAddVideoDetail">添加</el-button>
                    </div>
                </div>
            </template>
            <el-row>
                <el-col :span="24">
                    <el-table :data="tableData" border>
                        <el-table-column width="180" prop="videoChannel" label="视频输入通道号"></el-table-column>
                        <el-table-column width="180" prop="cameraCode" label="摄像机编码"></el-table-column>
                        <el-table-column prop="cameraName" label="摄像机名称"></el-table-column>
                        <el-table-column prop="cameraType" label="摄像机类型"></el-table-column>
                        <el-table-column prop="longitude" label="纬度"></el-table-column>
                        <el-table-column prop="latitude" label="经度"></el-table-column>
                        <el-table-column prop="height" label="摄像机安装高度"></el-table-column>
                        <el-table-column prop="voiceOutCode" label="摄像机绑定音频通道"></el-table-column>
                        <el-table-column prop="isSupportBoardcast" label="是否支持组播"></el-table-column>
                        <el-table-column label="操作">
                            <template #default="scope">
                                <div>
                                    <el-button link @click="openUpdateVideoDetail(scope.row)">
                                        <el-tooltip effect="dark" content="修改">
                                            <el-icon>
                                                <Memo />
                                            </el-icon>
                                        </el-tooltip>
                                    </el-button>
                                    <el-popconfirm title="确定删除该标签?">
                                        <template #reference>
                                            <el-button link><el-tooltip effect="dark" content="删除"><el-icon>
                                                        <Delete />
                                                    </el-icon></el-tooltip></el-button>
                                        </template>
                                    </el-popconfirm>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>

        </el-card>

        <el-dialog v-model="dialogFormVisible" :title="dialogTitle">
            <el-form :model="videoDeTailParams">
                <el-form-item label="视频输入通道号" label-width="140px">
                    <el-input v-model="videoDeTailParams.videoChannel" placeholder="请输入视频输入通道号" />
                </el-form-item>
                <el-form-item label="摄像机编码" label-width="140px">
                    <el-input v-model="videoDeTailParams.cameraCode" placeholder="请输入摄像机编码" />
                </el-form-item>
                <el-form-item label="摄像机名称" label-width="140px">
                    <el-input v-model="videoDeTailParams.cameraName" placeholder="请输入摄像机名称" />
                </el-form-item>
                <el-form-item label="摄像机类型" label-width="140px">
                    <el-input v-model="videoDeTailParams.cameraType" placeholder="请输入摄像机类型" />
                </el-form-item>
                <el-form-item label="摄像机名称" label-width="140px">
                    <el-input v-model="videoDeTailParams.cameraLocationDesc" placeholder="请输入摄像机名称" />
                </el-form-item>
                <el-form-item label="纬度" label-width="140px">
                    <el-input v-model="videoDeTailParams.longitude" placeholder="请输入纬度" />
                </el-form-item>
                <el-form-item label="经度" label-width="140px">
                    <el-input v-model="videoDeTailParams.latitude" placeholder="请输入经度" />
                </el-form-item>
                <el-form-item label="摄像机安装高度" label-width="140px">
                    <el-input v-model="videoDeTailParams.height" placeholder="请输入摄像机安装高度" />
                </el-form-item>
                <el-form-item label="是否支持组播" label-width="140px">
                    <el-input v-model="videoDeTailParams.isSupportBoardcast" placeholder="请输入是否支持组播" />
                </el-form-item>
                <el-form-item label="摄像机绑定音频通道" label-width="140px">
                    <el-input v-model="videoDeTailParams.voiceOutCode" placeholder="摄像机绑定音频通道" />
                </el-form-item>
                <el-form-item label="备注" label-width="140px">
                    <el-input v-model="videoDeTailParams.remark" placeholder="请输入备注" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="saveVideoDetail()">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
  
<script setup lang="ts" name="Units">
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { listVideo, getVideo, delVideo, addVideo, updateVideo } from "@/api/data/video";
import { listVideoDetail, getVideoDetail, delVideoDetail, addVideoDetail, updateVideoDetail } from "@/api/data/videoDetail";

const route = useRoute();
const router = useRouter();

const { proxy } = getCurrentInstance();

const tableData = ref([]);

const dialogTitle = ref("新增");

const dialogFormVisible = ref(false);

const vidoeParams = ref({
    id: null,
    name: "",
    sn: "",
    type: "",
    protocolType: '',
    connectCode: "",
    model: "",
    videoFormat: "",
    vendorType: '',
    serialNumber: ''
})

const videoDeTailParams = ref({
    id: null,
    videoChannel: "",
    cameraCode: "",
    cameraName: "",
    cameraType: '',
    connectCode: "",
    cameraLocationDesc: "",
    longitude: "",
    latitude: '',
    height: '',
    voiceOutCode: '',
    isSupportBoardcast: "",
    remark: '',
    videoId: ''
})

let objId = route.query.id

const getVideoData = () => {
    getVideo(objId).then(res => {
        if (res.code == 200) {
            vidoeParams.value = res.data
        }
    })
}

if (objId != null) {
    getVideoData();
}

const getVideoDetailList = () => {
    listVideoDetail({ videoId: objId }).then(res => {
        console.log(res);
        if (res.code == 200) {
            tableData.value = res.rows
        }
    })
}

const openAddVideoDetail = () => {
    videoDeTailParams.value = {
        id: null,
        videoChannel: "",
        cameraCode: "",
        cameraName: "",
        cameraType: '',
        connectCode: "",
        cameraLocationDesc: "",
        longitude: "",
        latitude: '',
        height: '',
        voiceOutCode: '',
        isSupportBoardcast: "",
        remark: '',
        videoId: ''
    }
    dialogFormVisible.value = true
}

const openUpdateVideoDetail = (item) => {
    getVideoDetail(item.id).then(res => {
        if (res.code == 200) {
            videoDeTailParams.value = res.data
            dialogFormVisible.value = true
        }
    })
}

const saveVideoDetail = () => {
    if (videoDeTailParams.value.id != null) {
        updateVideoDetail(videoDeTailParams.value).then(res => {
            if (res.code == 200) {
                getVideoDetailList();
                dialogFormVisible.value = false
            }
        })
    } else {
        videoDeTailParams.value.videoId = objId;
        addVideoDetail(videoDeTailParams.value).then(res => {
            if (res.code == 200) {
                getVideoDetailList();
                dialogFormVisible.value = false
            }
        })
    }
}

const goUpdate = (item) => {

}

if (objId != null) {
    getVideoDetailList();
}

</script>
  
<style lang="scss" scoped>
.card-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

:deep(.mylabel) {
    font-size: 15px;
    color: #000;
    font-weight: 800 !important;
}

.content-w {
    display: inline-flex;
    max-width: 160px;
}
</style>