|
@@ -0,0 +1,340 @@
|
|
|
|
|
+<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="vidoeDeTailParams">
|
|
|
|
|
+ <el-form-item label="视频输入通道号" label-width="140px">
|
|
|
|
|
+ <el-input v-model="vidoeDeTailParams.videoChannel" placeholder="请输入视频输入通道号" />
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="摄像机编码" label-width="140px">
|
|
|
|
|
+ <el-input v-model="vidoeDeTailParams.cameraCode" placeholder="请输入摄像机编码" />
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="摄像机名称" label-width="140px">
|
|
|
|
|
+ <el-input v-model="vidoeDeTailParams.cameraName" placeholder="请输入摄像机名称" />
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="摄像机类型" label-width="140px">
|
|
|
|
|
+ <el-input v-model="vidoeDeTailParams.cameraType" placeholder="请输入摄像机类型" />
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="摄像机名称" label-width="140px">
|
|
|
|
|
+ <el-input v-model="vidoeDeTailParams.cameraLocationDesc" placeholder="请输入摄像机名称" />
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="纬度" label-width="140px">
|
|
|
|
|
+ <el-input v-model="vidoeDeTailParams.longitude" placeholder="请输入纬度" />
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="经度" label-width="140px">
|
|
|
|
|
+ <el-input v-model="vidoeDeTailParams.latitude" placeholder="请输入经度" />
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="摄像机安装高度" label-width="140px">
|
|
|
|
|
+ <el-input v-model="vidoeDeTailParams.height" placeholder="请输入摄像机安装高度" />
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="是否支持组播" label-width="140px">
|
|
|
|
|
+ <el-input v-model="vidoeDeTailParams.isSupportBoardcast" placeholder="请输入是否支持组播" />
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="摄像机绑定音频通道" label-width="140px">
|
|
|
|
|
+ <el-input v-model="vidoeDeTailParams.voiceOutCode" placeholder="摄像机绑定音频通道" />
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="备注" label-width="140px">
|
|
|
|
|
+ <el-input v-model="vidoeDeTailParams.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 vidoeDeTailParams = 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 = () => {
|
|
|
|
|
+ dialogFormVisible.value = true
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+const openUpdateVideoDetail = () => {
|
|
|
|
|
+ getVideoDetail().then(res => {
|
|
|
|
|
+
|
|
|
|
|
+ })
|
|
|
|
|
+ dialogFormVisible.value = true
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+const saveVideoDetail = () => {
|
|
|
|
|
+ if (vidoeDeTailParams.value.id != null) {
|
|
|
|
|
+
|
|
|
|
|
+ } else {
|
|
|
|
|
+ vidoeDeTailParams.value.videoId = objId;
|
|
|
|
|
+ addVideoDetail(vidoeDeTailParams.value).then(res => {
|
|
|
|
|
+ if (res.code == 200) {
|
|
|
|
|
+ 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>
|
|
|
|
|
+
|