yangjun
/
nursing_unit_vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of http://47.115.223.229:8888/yangjun/nursing_unit_vue

This commit is contained in:
1378012178@qq.com 2025-08-15 14:20:59 +08:00
parent 00a9eca219 d67d7b955c
commit 449f674f17
13 changed files with 515 additions and 245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -27,5 +27,6 @@
<div id="app"> <div id="app">
</div> </div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
<script src="<%= basePublicPath %>/static/tums-player/tums-player.umd.min.js"></script>
</body> </body>
</html> </html>

194
src/views/biz/nuBaseInfo/QyxxList.vue
View File

@ -36,59 +36,58 @@
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24"> <a-col :xl="6" :lg="6" :md="8" :sm="24">
<span style="float: left; overflow: hidden" class="table-page-search-submitButtons"> <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
<a-col :lg="6">
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button> <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button> <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
</a-col>
</span> </span>
</a-col> </a-col>
</a-row> </a-row>
</a-form> </a-form>
</div> </div>
<!--引用表格--> <a-row>
<BasicTable @register="registerTable"> <a-col v-for="(item,index) in tableData" style="padding: 5px" :key="index" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6">
<!--插槽:table标题--> <a-card :title="`NUID：`+item.nuId"
<template #tableTitle> :class="['card-3d']"
</template> @mouseenter="item.key"
<!--操作栏--> @mouseleave="item.key"
<template #action="{ record }"> @click="isSelected = item">
<TableAction :actions="getTableAction(record)" /> <template #extra>
</template> <span class="lxClass" v-if="item.status == 5">停用</span>
<template v-slot:bodyCell="{ column, record, index, text }"> <span class="zxClass" v-if="item.status != 5">启用</span>
<template v-if="column.key === 'status_dictText'"> </template>
<a-tag v-if="record.status == '9'" <p>单元名称：{{item.nuName}}</p>
:color="'volcano'" <p>创建时间：{{item.createTime}}</p>
> <p>单元类型：{{item.areaFlag_dictText}}</p>
{{ text }} <div style="text-align: center;">
</a-tag> <a-button size="small" @click="handleQiyong(item)" v-if="item.status == 5" style="margin-left:10px" >启用</a-button>
<span v-else>{{text}}</span> <a-button size="small" @click="handleTingyong(item)" v-if="item.status != 5" style="margin-left:10px" >停用</a-button>
</template> <a-button size="small" @click="handleEdit(item)" style="margin-left:10px" >更名</a-button>
<template v-else-if="column.key === 'nuName'"> <a-button size="small" @click="handleWlsb(item)" style="margin-left:10px" >设备</a-button>
<a @click="handleWlsb(record)">{{text}}</a> <a-popover title="二维码" >
</template> <template #content>
<template v-else-if="column.key === 'ewm'"> <QRCodeWithLogo
<QRCodeWithLogo :text="item.nuId"
:text="record.nuId" :logoUrl="logoUrl"
:logoUrl="logoUrl" :size="150"
:size="150" :logoSize="40"
:logoSize="40" />
/> </template>
</template> <a-button size="small" style="margin-left:10px">二维码</a-button>
</a-popover>
</template> </div>
</BasicTable> </a-card>
</a-col>
</a-row>
<!-- 表单区域 --> <!-- 表单区域 -->
<NuBaseInfoModal ref="registerModal" @success="handleSuccess"></NuBaseInfoModal> <NuBaseInfoModal ref="registerModal" @success="handleSuccess"></NuBaseInfoModal>
<BaseWlsbListModal ref="wlsbModal" ></BaseWlsbListModal> <BaseWlsbListModal ref="wlsbModal" ></BaseWlsbListModal>
<CameraPreviewModal ref="previewModal"></CameraPreviewModal> <CameraPreviewModal ref="previewModal"></CameraPreviewModal>
</div> </div>
</template> </template>
<script lang="ts" name="nuBaseInfo-nuBaseInfo" setup> <script lang="ts" name="nuBaseInfo-nuBaseInfo" setup>
import { ref, reactive } from 'vue'; import { ref, reactive, onMounted } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table'; import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage'; import { useListPage } from '/@/hooks/system/useListPage';
import { columns, superQuerySchema } from './NuBaseInfo.data'; import { columns, superQuerySchema } from './NuBaseInfo.data';
@ -103,6 +102,7 @@ import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectT
import JSelectMultiple from '/@/components/Form/src/jeecg/components/JSelectMultiple.vue'; import JSelectMultiple from '/@/components/Form/src/jeecg/components/JSelectMultiple.vue';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '/@/hooks/web/useMessage';
import QRCodeWithLogo from './EwmImage.vue'; import QRCodeWithLogo from './EwmImage.vue';
import { defHttp } from '/@/utils/http/axios';
const logoUrl = 'https://www.focusnu.com/devops/resource/img/logo.png'; // 替换为你的 Logo URL const logoUrl = 'https://www.focusnu.com/devops/resource/img/logo.png'; // 替换为你的 Logo URL
@ -112,29 +112,10 @@ const { createMessage } = useMessage();
const previewModal = ref(); const previewModal = ref();
const wlsbModal = ref(); const wlsbModal = ref();
const queryParam = reactive<any>({}); const queryParam = reactive<any>({});
const tableData = ref<any>([]);
const toggleSearchStatus = ref<boolean>(false); const toggleSearchStatus = ref<boolean>(false);
const registerModal = ref(); const registerModal = ref();
const userStore = useUserStore(); const userStore = useUserStore();
//注册table数据
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
tableProps: {
title: '区域信息',
api: qyList,
columns,
canResize:false,
useSearchForm: false,
showIndexColumn: true,
actionColumn: {
width: 160,
fixed: 'right',
},
beforeFetch: async (params) => {
params.column = 'status',params.order = 'desc'
return Object.assign(params, queryParam);
},
},
});
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
const labelCol = reactive({ const labelCol = reactive({
xs:24, xs:24,
sm:6, sm:6,
@ -170,7 +151,7 @@ const { createMessage } = useMessage();
* 成功回调 * 成功回调
*/ */
function handleSuccess() { function handleSuccess() {
(selectedRowKeys.value = []) && reload(); reload();
} }
/** /**
@ -212,37 +193,6 @@ const { createMessage } = useMessage();
previewModal.value.edit(record); previewModal.value.edit(record);
} }
/**
* 操作栏
*/
function getTableAction(record) {
return [
{
label: '启用',
onClick: handleQiyong.bind(null, record),
ifShow: record.status == 5,
auth: 'nuBaseInfo:nu_base_info:edit'
},
{
label: '停用',
onClick: handleTingyong.bind(null, record),
ifShow: record.status != 5,
auth: 'nuBaseInfo:nu_base_info:edit'
},
{
label: '更名',
onClick: handleEdit.bind(null, record),
auth: 'nuBaseInfo:nu_base_info:edit'
},
{
label: '预览',
onClick: handlePreview.bind(null, record),
ifShow: record.deviceMac != null,
},
];
}
/** /**
* 查询 * 查询
*/ */
@ -255,12 +205,27 @@ const { createMessage } = useMessage();
*/ */
function searchReset() { function searchReset() {
formRef.value.resetFields(); formRef.value.resetFields();
selectedRowKeys.value = [];
//刷新数据 //刷新数据
reload(); reload();
} }
function reload() {
// const list = qyList(queryParam);
// console.log("🚀 ~ reload ~ list:", list)
// console.log("🚀 ~ reload ~ list:", list.records)
defHttp.get({url: '/nuBaseInfo/nuBaseInfo/qyList',params:queryParam}).then(res => {
console.log("🚀 ~ defHttp.get ~ res:", res)
tableData.value = res.records;
});
}
onMounted(() => {
//刷新数据
reload();
})
</script> </script>
@ -289,4 +254,53 @@ const { createMessage } = useMessage();
width: 100%; width: 100%;
} }
} }
.zxClass {
font-size: 12px;
background: linear-gradient(to right, #1ea0fa, #017de9);
border-radius: 8px;
height: 25px;
color: white;
line-height: 25px;
padding: 5px;
}
.lxClass {
font-size: 12px;
background: linear-gradient(to right, #d1d4d5, #d3d5d6);
border-radius: 8px;
height: 25px;
color: white;
line-height: 25px;
padding: 5px;
}
.selected-card {
border: 2px solid #1890ff;
box-shadow: 0 0 8px rgba(24, 144, 255, 0.3);
}
.cardContent{
margin-top: -10px;background:white;margin:0 10px;border-radius:8px;
}
/* 基础卡片样式 */
.card-3d {
border-radius: 8px;
border: 1px solid #f0f0f0; /* 边框增强立体感 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
background: white;
position: relative;
}
/* 鼠标悬停：阴影加深 + 轻微上浮 */
.card-3d:hover {
border: 2px solid #1890ff;
box-shadow: 0 4px 8px rgba(24, 144, 255, 0.4);
transform: translate(-3px,-3px);
}
</style> </style>

186
src/views/biz/nuBaseInfo/components/BaseWlsbListForm.vue
View File

@ -1,6 +1,58 @@
<template> <template>
<div class="p-2"> <div class="p-2">
<a-row> <a-row>
<a-col v-for="(item,index) in sxtList.records" :key="index" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6" style="padding: 8px;">
<a-card style="width: 100%;border-radius: 8px;" :headStyle="{ height: '60px', padding: '0 24px' }" :bodyStyle="{ padding: '24px 24px 4px 24px' }">
<template #title>
<a-row style="font-weight: normal;">
<a-col :span="18" style="font-size: 14px;">
<div>SN：<span style="font-weight: bold;">{{item.sn}}</span></div>
<div style="font-size: 12px;">名称：{{item.deviceName}}</div>
</a-col>
<a-col :span="6" style="text-align: center;padding-top: 4px;">
<div :class="item.relayState=='1'?'zxClass':'lxClass'">{{item.deviceStatus=='1'?'在线':'离线'}}</div>
</a-col>
</a-row>
</template>
<a-row>
<a-col :span="12" style="margin-top: -10px;"><a-tag color="purple">摄像头</a-tag></a-col>
<a-col :span="12" style="margin-top: -10px;text-align:right;">报修状态：
<span v-if="item.maintainStatus==0">正常</span>
<span v-if="item.maintainStatus==1">维修中</span>
<span v-if="item.maintainStatus==2">报废</span>
</a-col>
<a-col :span="12" >{{item.nuId_dictText?item.nuId_dictText:'未配置'}}</a-col>
<a-col :span="12" style="text-align: right;">
<span style="text-align: right;background:#f6f6f6;padding: 2px 10px;border-radius:5px;">NUID: {{item.nuId?item.nuId:'未配置'}}</span>
</a-col>
<a-col :span="24" style="text-align: center;font-size: 44px;font-weight: bold;margin-top:18px;">
<span>摄像头</span>
</a-col>
<!-- <a-col :span="8" style="padding: 12px 0 0 5px;margin-top:18px;">
<div style="font-size: 12px;margin: 5px 0 -5px 2px;padding:2px;">KWH</div>
<div style="margin-top:-3px;"><span style="background:#eeeeee;padding: 2px;border-radius:5px;font-size:11px;">用电量</span></div>
</a-col> -->
</a-row>
<a-divider />
<p style="text-align:center;">
<span style="display:inline-block;cursor: pointer;" @click="handlePreview(item)">
<span class="tbClass"><img src="../../../../assets/iot/a14.png" style="width:20px;" /></span><br/>
<span class="antTitle">预览</span>
</span>
<span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handlePicConfig(item)">
<span class="tbClass"><img src="../../../../assets/iot/a12.png" style="width:20px;" /></span><br/>
<span class="antTitle">画面配置</span>
</span>
<span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleBaoxiu(item,'1')" v-if="item.maintainStatus==0">
<span class="tbClass"><img src="../../../../assets/iot/a6.png" style="width:20px;" /></span><br/>
<span class="antTitle">报修</span>
</span>
</p>
</a-card>
</a-col>
<a-col v-for="(item,index) in zndbList.records" :key="index" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6" style="padding: 8px;"> <a-col v-for="(item,index) in zndbList.records" :key="index" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6" style="padding: 8px;">
<a-card style="width: 100%;border-radius: 8px;" :headStyle="{ height: '60px', padding: '0 24px' }" :bodyStyle="{ padding: '24px 24px 4px 24px' }"> <a-card style="width: 100%;border-radius: 8px;" :headStyle="{ height: '60px', padding: '0 24px' }" :bodyStyle="{ padding: '24px 24px 4px 24px' }">
<template #title> <template #title>
@ -15,7 +67,12 @@
</a-row> </a-row>
</template> </template>
<a-row> <a-row>
<a-col :span="24" style="margin-top: -10px;"><a-tag color="red">智能电表</a-tag></a-col> <a-col :span="12" style="margin-top: -10px;"><a-tag color="red">智能电表</a-tag></a-col>
<a-col :span="12" style="margin-top: -10px;text-align:right;">报修状态：
<span v-if="item.maintainStatus==0">正常</span>
<span v-if="item.maintainStatus==1">维修中</span>
<span v-if="item.maintainStatus==2">报废</span>
</a-col>
<a-col :span="12" >{{item.nuId_dictText?item.nuId_dictText:'未配置'}}</a-col> <a-col :span="12" >{{item.nuId_dictText?item.nuId_dictText:'未配置'}}</a-col>
<a-col :span="12" style="text-align: right;"> <a-col :span="12" style="text-align: right;">
<span style="text-align: right;background:#f6f6f6;padding: 2px 10px;border-radius:5px;">NUID: {{item.nuId?item.nuId:'未配置'}}</span> <span style="text-align: right;background:#f6f6f6;padding: 2px 10px;border-radius:5px;">NUID: {{item.nuId?item.nuId:'未配置'}}</span>
@ -34,22 +91,26 @@
<span class="tbClass"><img src="../../../../assets/iot/a1.png" style="width:20px;" /></span><br/> <span class="tbClass"><img src="../../../../assets/iot/a1.png" style="width:20px;" /></span><br/>
<span class="antTitle">抄表</span> <span class="antTitle">抄表</span>
</span> </span>
<span style="display:inline-block;margin-left:10%;cursor: pointer;" @click="handleControlLz(item)"> <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleControlLz(item)">
<span class="tbClass"><img src="../../../../assets/iot/a5.png" style="width:20px;" /></span><br/> <span class="tbClass"><img src="../../../../assets/iot/a5.png" style="width:20px;" /></span><br/>
<span class="antTitle">拉闸</span> <span class="antTitle">拉闸</span>
</span> </span>
<span style="display:inline-block;margin-left:10%;cursor: pointer;" @click="handleControlHz(item)"> <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleControlHz(item)">
<span class="tbClass"><img src="../../../../assets/iot/a2.png" style="width:20px;" /></span><br/> <span class="tbClass"><img src="../../../../assets/iot/a2.png" style="width:20px;" /></span><br/>
<span class="antTitle">合闸</span> <span class="antTitle">合闸</span>
</span> </span>
<span style="display:inline-block;margin-left:10%;cursor: pointer;" @click="handleReset(item)"> <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleReset(item)">
<span class="tbClass"><img src="../../../../assets/iot/a3.png" style="width:20px;" /></span><br/> <span class="tbClass"><img src="../../../../assets/iot/a3.png" style="width:20px;" /></span><br/>
<span class="antTitle">清零</span> <span class="antTitle">清零</span>
</span> </span>
<span style="display:inline-block;margin-left:10%;cursor: pointer;" @click="showApiLog(item)"> <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="showApiLog(item)">
<span class="tbClass"><img src="../../../../assets/iot/a4.png" style="width:20px;" /></span><br/> <span class="tbClass"><img src="../../../../assets/iot/a4.png" style="width:20px;" /></span><br/>
<span class="antTitle">日志</span> <span class="antTitle">日志</span>
</span> </span>
<span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleBaoxiu(item,'2')" v-if="item.maintainStatus==0">
<span class="tbClass"><img src="../../../../assets/iot/a6.png" style="width:20px;" /></span><br/>
<span class="antTitle">报修</span>
</span>
</p> </p>
</a-card> </a-card>
</a-col> </a-col>
@ -69,7 +130,12 @@
</a-row> </a-row>
</template> </template>
<a-row> <a-row>
<a-col :span="24" style="margin-top: -10px;"><a-tag color="blue">智能水表</a-tag></a-col> <a-col :span="12" style="margin-top: -10px;"><a-tag color="blue">智能水表</a-tag></a-col>
<a-col :span="12" style="margin-top: -10px;text-align:right;">报修状态：
<span v-if="item.maintainStatus==0">正常</span>
<span v-if="item.maintainStatus==1">维修中</span>
<span v-if="item.maintainStatus==2">报废</span>
</a-col>
<a-col :span="12" >{{item.nuId_dictText?item.nuId_dictText:'未配置'}}</a-col> <a-col :span="12" >{{item.nuId_dictText?item.nuId_dictText:'未配置'}}</a-col>
<a-col :span="12" style="text-align: right;"> <a-col :span="12" style="text-align: right;">
<span style="text-align: right;background:#f6f6f6;padding: 2px 10px;border-radius:5px;">NUID: {{item.nuId?item.nuId:'未配置'}}</span> <span style="text-align: right;background:#f6f6f6;padding: 2px 10px;border-radius:5px;">NUID: {{item.nuId?item.nuId:'未配置'}}</span>
@ -88,22 +154,26 @@
<span class="tbClass"><img src="../../../../assets/iot/a1.png" style="width:20px;" /></span><br/> <span class="tbClass"><img src="../../../../assets/iot/a1.png" style="width:20px;" /></span><br/>
<span class="antTitle">抄表</span> <span class="antTitle">抄表</span>
</span> </span>
<span style="display:inline-block;margin-left:10%;cursor: pointer;" @click="handleSbControlLz(item)"> <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleSbControlLz(item)">
<span class="tbClass"><img src="../../../../assets/iot/a10.png" style="width:20px;" /></span><br/> <span class="tbClass"><img src="../../../../assets/iot/a10.png" style="width:20px;" /></span><br/>
<span class="antTitle">开阀</span> <span class="antTitle">开阀</span>
</span> </span>
<span style="display:inline-block;margin-left:10%;cursor: pointer;" @click="handleSbControlHz(item)"> <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleSbControlHz(item)">
<span class="tbClass"><img src="../../../../assets/iot/a11.png" style="width:20px;" /></span><br/> <span class="tbClass"><img src="../../../../assets/iot/a11.png" style="width:20px;" /></span><br/>
<span class="antTitle">关阀</span> <span class="antTitle">关阀</span>
</span> </span>
<span style="display:inline-block;margin-left:10%;cursor: pointer;" @click="handleSbReset(item)"> <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleSbReset(item)">
<span class="tbClass"><img src="../../../../assets/iot/a3.png" style="width:20px;" /></span><br/> <span class="tbClass"><img src="../../../../assets/iot/a3.png" style="width:20px;" /></span><br/>
<span class="antTitle">清零</span> <span class="antTitle">清零</span>
</span> </span>
<span style="display:inline-block;margin-left:10%;cursor: pointer;" @click="showApiWaterLog(item)"> <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="showApiWaterLog(item)">
<span class="tbClass"><img src="../../../../assets/iot/a4.png" style="width:20px;" /></span><br/> <span class="tbClass"><img src="../../../../assets/iot/a4.png" style="width:20px;" /></span><br/>
<span class="antTitle">日志</span> <span class="antTitle">日志</span>
</span> </span>
<span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleBaoxiu(item,'3')" v-if="item.maintainStatus==0">
<span class="tbClass"><img src="../../../../assets/iot/a6.png" style="width:20px;" /></span><br/>
<span class="antTitle">报修</span>
</span>
</p> </p>
</a-card> </a-card>
</a-col> </a-col>
@ -122,7 +192,12 @@
</a-row> </a-row>
</template> </template>
<a-row> <a-row>
<a-col :span="24" style="margin-top: -10px;"><a-tag color="green">温湿度计</a-tag></a-col> <a-col :span="12" style="margin-top: -10px;"><a-tag color="green">温湿度计</a-tag></a-col>
<a-col :span="12" style="margin-top: -10px;text-align:right;">报修状态：
<span v-if="item.maintainStatus==0">正常</span>
<span v-if="item.maintainStatus==1">维修中</span>
<span v-if="item.maintainStatus==2">报废</span>
</a-col>
<a-col :span="12" >{{item.nuId_dictText?item.nuId_dictText:'未配置'}}</a-col> <a-col :span="12" >{{item.nuId_dictText?item.nuId_dictText:'未配置'}}</a-col>
<a-col :span="12" style="text-align: right;"> <a-col :span="12" style="text-align: right;">
<span style="text-align: right;background:#f6f6f6;padding: 2px 10px;border-radius:5px;">NUID: {{item.nuId?item.nuId:'未配置'}}</span> <span style="text-align: right;background:#f6f6f6;padding: 2px 10px;border-radius:5px;">NUID: {{item.nuId?item.nuId:'未配置'}}</span>
@ -151,14 +226,18 @@
<span class="tbClass"><img src="../../../../assets/iot/a7.png" style="width:20px;" /></span><br/> <span class="tbClass"><img src="../../../../assets/iot/a7.png" style="width:20px;" /></span><br/>
<span class="antTitle">抄表</span> <span class="antTitle">抄表</span>
</span> </span>
<span style="display:inline-block;margin-left:10%;cursor: pointer;" @click="handleEdit(item)"> <!-- <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleEdit(item)">
<span class="tbClass"><img src="../../../../assets/iot/a6.png" style="width:20px;" /></span><br/> <span class="tbClass"><img src="../../../../assets/iot/a6.png" style="width:20px;" /></span><br/>
<span class="antTitle">配置</span> <span class="antTitle">配置</span>
</span> </span> -->
<span style="display:inline-block;margin-left:10%;cursor: pointer;" @click="showWsdjApiLog(item)"> <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="showWsdjApiLog(item)">
<span class="tbClass"><img src="../../../../assets/iot/a4.png" style="width:20px;" /></span><br/> <span class="tbClass"><img src="../../../../assets/iot/a4.png" style="width:20px;" /></span><br/>
<span class="antTitle">日志</span> <span class="antTitle">日志</span>
</span> </span>
<span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleBaoxiu(item,'4')" v-if="item.maintainStatus==0">
<span class="tbClass"><img src="../../../../assets/iot/a6.png" style="width:20px;" /></span><br/>
<span class="antTitle">报修</span>
</span>
</p> </p>
</a-card> </a-card>
</a-col> </a-col>
@ -175,6 +254,9 @@
<ApiLogWaterModal ref="apiLogWaterModal"></ApiLogWaterModal> <ApiLogWaterModal ref="apiLogWaterModal"></ApiLogWaterModal>
<ApiLogAlarmModal ref="apiLogAlarmModal"></ApiLogAlarmModal> <ApiLogAlarmModal ref="apiLogAlarmModal"></ApiLogAlarmModal>
<DeviceInfoDrawer @register="registerDrawer" @success="handleSuccess" /> <DeviceInfoDrawer @register="registerDrawer" @success="handleSuccess" />
<CameraPreviewModal ref="previewModal"></CameraPreviewModal>
<CameraPictureConfigModal ref="cameraPictureConfigModal"></CameraPictureConfigModal>
</div> </div>
</template> </template>
@ -187,13 +269,19 @@ import ApiLogModal from "@/views/iot/tq/electricity/apilog/ApiLogModal.vue";
import ApiLogWaterModal from "@/views/iot/tq/electricity/apilog/WaterApiLogModal.vue"; import ApiLogWaterModal from "@/views/iot/tq/electricity/apilog/WaterApiLogModal.vue";
import ApiLogAlarmModal from '/@/views/iot/yiweilian/components/ApiLogAlarmModal.vue' import ApiLogAlarmModal from '/@/views/iot/yiweilian/components/ApiLogAlarmModal.vue'
import DeviceInfoDrawer from "/@/views/iot/yiweilian/components/DeviceInfoDrawer.vue"; import DeviceInfoDrawer from "/@/views/iot/yiweilian/components/DeviceInfoDrawer.vue";
import CameraPreviewModal from '/@/views/iot/tplink/camera/components/CameraPreviewModal.vue'
import CameraPictureConfigModal from '/@/views/iot/tplink/camera/components/CameraPictureConfigModal.vue';
import {useDrawer} from "@/components/Drawer"; import {useDrawer} from "@/components/Drawer";
import {updateDeviceRealTime} from '/@/views/iot/yiweilian/humid.api'; import {updateDeviceRealTime} from '/@/views/iot/yiweilian/humid.api';
import {eleSbReset, eleSbControl, eleSbRead } from "/@/views/iot/tq/water/water.api"; import {eleSbReset, eleSbControl, eleSbRead } from "/@/views/iot/tq/water/water.api";
import { ReloadOutlined } from '@ant-design/icons-vue';
const formRef = ref(); const formRef = ref();
const apiLogModal = ref(); const apiLogModal = ref();
const apiLogWaterModal = ref(); const apiLogWaterModal = ref();
const apiLogAlarmModal = ref(); const apiLogAlarmModal = ref();
const previewModal = ref();
const cameraPictureConfigModal = ref();
const sxtList = ref<any>({records: []});//摄像头
const zndbList = ref<any>({records: []});//智能电表 const zndbList = ref<any>({records: []});//智能电表
const znsbList = ref<any>({records: []});//智能水表 const znsbList = ref<any>({records: []});//智能水表
const wsdjList = ref<any>({records: []});//温湿度计 const wsdjList = ref<any>({records: []});//温湿度计
@ -201,11 +289,48 @@ const anyInfo = ref<any>({});//区域信息
//注册drawer //注册drawer
const [registerDrawer, { openDrawer }] = useDrawer(); const [registerDrawer, { openDrawer }] = useDrawer();
function handleBaoxiu(record,type){
console.log("🚀 ~ handleBaoxiu ~ record,type:", record,type)
Modal.confirm({
title: '报修',
content: '是否进行报修?',
closable: true,
okText: '确定',
cancelText: '取消',
async onOk() {
var url = "";
if(type=='1'){//摄像头报修
url = '/iot/tplink/cameraInfo/baoxiu';
}else if(type=='2'){ //电表报修
url = '/iot/tq/electricityMeter/baoxiu';
}else if(type=='3'){ //水表报修
url = '/iot/tq/waterMeter/baoxiu';
}else if(type=='4'){ //温湿度计报修
url = '/iot/yiweilian/humidDevice/baoxiu';
}
defHttp.post({url: url,params:{id:record.id}}).then(res => {
edit(anyInfo.value);
});
},
});
}
function edit(record) { function edit(record) {
anyInfo.value = record; console.log("🚀 ~ edit ~ record:", record)
getZndb(record);//智能电表 anyInfo.value = record;
getZnsb(record);//智能水表 getSxt(record);//摄像头
getWsdj(record);//温湿度计 getZndb(record);//智能电表
getZnsb(record);//智能水表
getWsdj(record);//温湿度计
}
//获取摄像头
function getSxt(record){
var queryParam = {pageSize:-1,nuId:record.nuId}
defHttp.get({url: '/iot/tplink/cameraInfo/list',params:queryParam}).then(res => {
console.log("🚀 ~ defHttp.get ~ res:", res)
sxtList.value = res;
console.log("🚀 ~ defHttp.get ~ 获取摄像头:", sxtList)
});
} }
//获取智能电表 //获取智能电表
function getZndb(record){ function getZndb(record){
@ -429,6 +554,31 @@ function getWsdj(record){
} }
/**
* 摄像头预览
*/
function handlePreview(record: Recordable) {
previewModal.value.disableSubmit = true;
previewModal.value.edit(record);
}
/**
* 摄像头画面配置
*/
function handlePicConfig(record) {
var params = {
deviceIndex: record.deviceIndex,
parentId: record.parentId,
multitrans: record.multitrans,
projectId: record.projectId,
regionId: record.regionId,
ip: record.ip
}
cameraPictureConfigModal.value.disableSubmit = true;
cameraPictureConfigModal.value.edit(params);
}
defineExpose({ defineExpose({
edit, edit,
}); });

2
src/views/biz/nuBaseInfo/components/NuBaseInfoForm.vue
View File

@ -5,7 +5,7 @@
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"
name="NuBaseInfoForm"> name="NuBaseInfoForm">
<a-row> <a-row>
<a-col :span="24" style="margin-top: 60px;"> <a-col :span="24" style="margin-top: 60px;margin-bottom: 60px;">
<a-form-item label="区域名称" v-bind="validateInfos.nuName" id="NuBaseInfoForm-nuName" name="nuName"> <a-form-item label="区域名称" v-bind="validateInfos.nuName" id="NuBaseInfoForm-nuName" name="nuName">
<a-input v-model:value="formData.nuName" placeholder="请输入区域名称" allow-clear></a-input> <a-input v-model:value="formData.nuName" placeholder="请输入区域名称" allow-clear></a-input>
</a-form-item> </a-form-item>

2
src/views/biz/nuBaseInfo/components/NuBaseInfoModal.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<j-modal :title="title" :width="width" :maxHeight="`200px`" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭"> <j-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
<NuBaseInfoForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></NuBaseInfoForm> <NuBaseInfoForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></NuBaseInfoForm>
</j-modal> </j-modal>
</template> </template>

70
src/views/iot/tplink/camera/components/CameraCommonForm.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<a-spin :spinning="confirmLoading"> <a-spin :spinning="confirmLoading">
<JFormContainer :disabled="disabled"> <JFormContainer>
<template #detail> <template #detail>
<a-row> <a-row>
<a-col :span="12"> <a-col :span="12">
@ -12,7 +12,7 @@
<a-row> <a-row>
<a-col :span="2"></a-col> <a-col :span="2"></a-col>
<a-col :span="20"> <a-col :span="20">
<div id="video-container" class="video-container"></div> <div id="video-container-common" class="video-container"></div>
</a-col> </a-col>
</a-row> </a-row>
<a-row style="margin-top: 14px"> <a-row style="margin-top: 14px">
@ -225,24 +225,24 @@ import {
const useForm = Form.useForm; const useForm = Form.useForm;
const formData = reactive<Record<string, any>>({ const formData = reactive<Record<string, any>>({
deviceIndex: '',//设备索引 deviceIndex: '',//设备索引
streamType: 0,//码流类型 0 代表主码流，1 代码子码流 streamType: 1,//码流类型 0 代表主码流，1 代码子码流
//视频预览参数 //视频预览参数
url: '',//预览通道对应的URL url: '',//预览通道对应的URL
backupUrl: '',//备选URL，当流媒体服务器存在内外网IP配置时，该字段不为null backupUrl: '',//备选URL，当流媒体服务器存在内外网IP配置时，该字段不为null
wsUrl: '',//用于建立ws连接传输视频帧信息 wsUrl: '',//用于建立ws连接传输视频帧信息
wssUrl: '',//用于建立wss接传输视频帧信息 wssUrl: '',//用于建立wss接传输视频帧信息
chroma: "0", //色度 chroma: 0, //色度
luma: "0", //亮度 luma: 0, //亮度
sharpness: "0", //锐度 sharpness: 0, //锐度
saturation: "0", //饱和度 saturation: 0, //饱和度
contrast: "0", //对比度 contrast: 0, //对比度
wd_gain: "0", //宽动态度 wd_gain: 0, //宽动态度
smartir_level: "0",//防过曝等级 smartir_level: 0,//防过曝等级
wide_dynamic: "off", //宽动态 "off"//关闭 "on"//开启 wide_dynamic: "off", //宽动态 "off"//关闭 "on"//开启
smartir: "auto_ir",//防红外过曝："auto_ir_ae" //自动-增强模式 "auto_ir" //自动-标准模式 "manual"//手动——防过曝等级 smartir: "auto_ir",//防红外过曝："auto_ir_ae" //自动-增强模式 "auto_ir" //自动-标准模式 "manual"//手动——防过曝等级
smartwtl: "auto_wtl",//白光强度："auto_wtl_ae" //智能白光-柔和 ；"auto_wtl" //智能白光-标准 ； "manual" //手动——出现白光等级 smartwtl: "auto_wtl",//白光强度："auto_wtl_ae" //智能白光-柔和 ；"auto_wtl" //智能白光-标准 ； "manual" //手动——出现白光等级
smartwtl_digital_level: "0",//白光等级 smartwtl_digital_level: 0,//白光等级
flip_type: "center",//画面镜像旋转： "off"//关闭 "left_and_right"//左右 "up_and_down"//上下 "center"//中心 flip_type: "center",//画面镜像旋转： "off"//关闭 "left_and_right"//左右 "up_and_down"//上下 "center"//中心
night_vision_mode: "md_night_vision",//照明模式："wtl_night_vision"//白光照明 ；"inf_night_vision"//红外照明 ； "md_night_vision"//移动侦测全彩——出现白光强度 night_vision_mode: "md_night_vision",//照明模式："wtl_night_vision"//白光照明 ；"inf_night_vision"//红外照明 ； "md_night_vision"//移动侦测全彩——出现白光强度
@ -286,13 +286,20 @@ import {
formData.wssUrl = res.wssUrl; formData.wssUrl = res.wssUrl;
confirmLoading.value=false; confirmLoading.value=false;
}); });
if (player.value){
player.value.destroy().then(() => {
}); // 销毁
player.value = null;
}
const TumsPlayer = window['tums-player'].default; const TumsPlayer = window['tums-player'].default;
player.value = new TumsPlayer('video-container', { player.value = new TumsPlayer('video-container-common', {
type: "rtsp", // 协议类型，rtsp type: "rtsp", // 协议类型，rtsp
url: formData.url, // 取流地址, getPreviewUrl接口获取 url: formData.url, // 取流地址, getPreviewUrl接口获取
// url: formData.backupUrl, // 取流地址, getPreviewUrl接口获取 // url: formData.backupUrl, // 取流地址, getPreviewUrl接口获取
socket: formData.wssUrl, // websocket地址, getPreviewUrl接口获取 socket: formData.wssUrl, // websocket地址, getPreviewUrl接口获取
pluginPath: '/static', // 当sdk资源不在根路径下时，需配置pluginPath pluginPath: '/static', // 当sdk资源不在根路径下时，需配置pluginPath
talkEnable: true,
useMultitrans: true,
}); });
let isPlaying = player.value.isPlaying(); let isPlaying = player.value.isPlaying();
if (!isPlaying) { if (!isPlaying) {
@ -311,6 +318,7 @@ import {
if (player){ if (player){
player.value.destroy().then(() => { player.value.destroy().then(() => {
}); // 销毁 }); // 销毁
player.value = null;
} }
} }
@ -325,20 +333,28 @@ import {
"deviceIndex": deviceIndex, "deviceIndex": deviceIndex,
"type": "common" "type": "common"
}).then(res=>{ }).then(res=>{
formData.chroma = res.chroma; //色度 formData.chroma = strToInt(res.chroma); //色度
formData.luma = res.luma; //亮度 formData.luma = strToInt(res.luma); //亮度
formData.sharpness = res.sharpness; //锐度 formData.sharpness = strToInt(res.sharpness); //锐度
formData.saturation = res.saturation; //饱和度 formData.saturation = strToInt(res.saturation); //饱和度
formData.contrast = res.contrast; //对比度 formData.contrast = strToInt(res.contrast); //对比度
formData.wd_gain = res.wd_gain; //宽动态度 formData.wd_gain = strToInt(res.wd_gain); //宽动态度
formData.smartir_level = res.smartir_level; //防过曝等级 formData.smartir_level = strToInt(res.smartir_level); //防过曝等级
formData.wide_dynamic = res.wide_dynamic; //宽动态 "off"//关闭 "on"//开启 formData.wide_dynamic = res.wide_dynamic; //宽动态 "off"//关闭 "on"//开启
formData.smartir = res.smartir; //防红外过曝："auto_ir_ae" //自动-增强模式 "auto_ir" //自动-标准模式 "manual"//手动——防过曝等级 formData.smartir = res.smartir; //防红外过曝："auto_ir_ae" //自动-增强模式 "auto_ir" //自动-标准模式 "manual"//手动——防过曝等级
formData.smartwtl = res.smartwtl; //白光强度："auto_wtl_ae" //智能白光-柔和 ；"auto_wtl" //智能白光-标准 ； "manual" //手动——出现白光等级 formData.smartwtl = res.smartwtl; //白光强度："auto_wtl_ae" //智能白光-柔和 ；"auto_wtl" //智能白光-标准 ； "manual" //手动——出现白光等级
formData.smartwtl_digital_level = res.smartwtl_digital_level; //白光等级 formData.smartwtl_digital_level = strToInt(res.smartwtl_digital_level); //白光等级
}); });
} }
function strToInt(val){
if(val!=null&&isFinite(val)){
return Number(val);
}else{
return val;
}
}
/** /**
* 获取照明设置信息 * 获取照明设置信息
*/ */
@ -415,6 +431,20 @@ import {
{ deep: true, immediate: true } { deep: true, immediate: true }
); );
}); });
function destroyPlayer(){
if (player){
player.value.destroy().then(() => {
}); // 销毁
player.value = null;
}
}
// 暴露给父组件的方法
defineExpose({
destroyPlayer
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

4
src/views/iot/tplink/camera/components/CameraInfoList.vue
View File

@ -215,8 +215,8 @@ const pageParams = ref({ pageNo: 1, pageSize: 8 })
watch( watch(
() => props.data, () => props.data,
async () => { async () => {
queryParam.projectId = props.data.projectId; // queryParam.projectId = props.data.projectId;
queryParam.regionId = props.data.regionId; // queryParam.regionId = props.data.regionId;
let record = unref(props.data); let record = unref(props.data);
if (typeof record !== 'object') { if (typeof record !== 'object') {
record = {}; record = {};

30
src/views/iot/tplink/camera/components/CameraOsdForm.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<a-spin :spinning="confirmLoading"> <a-spin :spinning="confirmLoading">
<JFormContainer :disabled="disabled"> <JFormContainer>
<template #detail> <template #detail>
<a-row> <a-row>
<a-col :span="24"> <a-col :span="24">
@ -13,7 +13,7 @@
<a-row> <a-row>
<a-col :span="1"></a-col> <a-col :span="1"></a-col>
<a-col :span="20"> <a-col :span="20">
<div id="video-container" class="video-container"> <div id="video-container-osd" class="video-container">
<div class="osd-text-top"> <div class="osd-text-top">
<span v-show="formData.dateEnabled">{{formData.dateData}}&nbsp;</span> <span v-show="formData.dateEnabled">{{formData.dateData}}&nbsp;</span>
<span v-show="formData.weekEnabled">{{formData.weekData}}&nbsp;</span> <span v-show="formData.weekEnabled">{{formData.weekData}}&nbsp;</span>
@ -108,7 +108,7 @@
weekEnabled: true, weekEnabled: true,
labelEnabled: true, labelEnabled: true,
streamType: 0,//码流类型 0 代表主码流，1 代码子码流 streamType: 1,//码流类型 0 代表主码流，1 代码子码流
//视频预览参数 //视频预览参数
url: '',//预览通道对应的URL url: '',//预览通道对应的URL
backupUrl: '',//备选URL，当流媒体服务器存在内外网IP配置时，该字段不为null backupUrl: '',//备选URL，当流媒体服务器存在内外网IP配置时，该字段不为null
@ -220,13 +220,20 @@
formData.wssUrl = res.wssUrl; formData.wssUrl = res.wssUrl;
confirmLoading.value=false; confirmLoading.value=false;
}); });
if (player.value){
player.value.destroy().then(() => {
}); // 销毁
player.value = null;
}
const TumsPlayer = window['tums-player'].default; const TumsPlayer = window['tums-player'].default;
player.value = new TumsPlayer('video-container', { player.value = new TumsPlayer('video-container-osd', {
type: "rtsp", // 协议类型，rtsp type: "rtsp", // 协议类型，rtsp
url: formData.url, // 取流地址, getPreviewUrl接口获取 url: formData.url, // 取流地址, getPreviewUrl接口获取
// url: formData.backupUrl, // 取流地址, getPreviewUrl接口获取 // url: formData.backupUrl, // 取流地址, getPreviewUrl接口获取
socket: formData.wssUrl, // websocket地址, getPreviewUrl接口获取 socket: formData.wssUrl, // websocket地址, getPreviewUrl接口获取
pluginPath: '/static', // 当sdk资源不在根路径下时，需配置pluginPath pluginPath: '/static', // 当sdk资源不在根路径下时，需配置pluginPath
talkEnable: true,
useMultitrans: true,
}); });
let isPlaying = player.value.isPlaying(); let isPlaying = player.value.isPlaying();
if (!isPlaying) { if (!isPlaying) {
@ -245,6 +252,7 @@
if (player){ if (player){
player.value.destroy().then(() => { player.value.destroy().then(() => {
}); // 销毁 }); // 销毁
player.value = null;
} }
} }
@ -261,6 +269,20 @@
{ deep: true, immediate: true } { deep: true, immediate: true }
); );
}); });
function destroyPlayer(){
if (player){
player.value.destroy().then(() => {
}); // 销毁
player.value = null;
}
}
// 暴露给父组件的方法
defineExpose({
destroyPlayer
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

61
src/views/iot/tplink/camera/components/CameraPictureConfig.vue
View File

@ -4,42 +4,39 @@
v-model:activeKey="activeKey" v-model:activeKey="activeKey"
tab-position="left" tab-position="left"
:style="{ height: '100%' }" :style="{ height: '100%' }"
@tabScroll="callback"
> >
<a-tab-pane :key="1" tab="画面显示"> <a-tab-pane key="A" tab="画面显示">
<a-tabs <a-tabs
v-model:activeKey="oneChildActiveKey" v-model:activeKey="oneChildActiveKey"
tab-position="top" tab-position="top"
:style="{ height: '100%' }" :style="{ height: '100%' }"
@tabScroll="callback"
type="card" type="card"
> >
<a-tab-pane :key="1" tab="视频显示"> <a-tab-pane key="A1" tab="视频显示">
<div class="scrollable" v-if="oneChildActiveKey==1"> <div class="scrollable" v-if="oneChildActiveKey=='A1'">
<CameraCommonForm :data="cameraData"></CameraCommonForm> <CameraCommonForm ref="commonFormRef" :data="cameraData"></CameraCommonForm>
</div> </div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane :key="2" tab="OSD"> <a-tab-pane key="A2" tab="OSD">
<div class="scrollable" v-if="oneChildActiveKey==2"> <div class="scrollable" v-if="oneChildActiveKey=='A2'">
<CameraOsdForm :data="cameraData"></CameraOsdForm> <CameraOsdForm ref="osdFormRef" :data="cameraData"></CameraOsdForm>
</div> </div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane :key="3" tab="码流参数"> <a-tab-pane key="A3" tab="码流参数">
<div class="scrollable" v-if="oneChildActiveKey==3"> <div class="scrollable" v-if="oneChildActiveKey=='A3'">
<CameraBitrateForm :data="cameraData"></CameraBitrateForm> <CameraBitrateForm :data="cameraData"></CameraBitrateForm>
</div> </div>
</a-tab-pane> </a-tab-pane>
</a-tabs> </a-tabs>
</a-tab-pane> </a-tab-pane>
<a-tab-pane :key="2" tab="事件侦测"> <a-tab-pane key="B" tab="事件侦测">
<a-tabs <a-tabs
v-model:activeKey="twoChildActiveKey" v-model:activeKey="twoChildActiveKey"
tab-position="top" tab-position="top"
:style="{ height: '100%' }" :style="{ height: '100%' }"
@tabScroll="callback"
type="card" type="card"
> >
<a-tab-pane :key="1" tab="镜头遮挡"> <a-tab-pane key="B1" tab="镜头遮挡">
<div class="scrollable"> <div class="scrollable">
<CameraBlockForm :data="cameraData"></CameraBlockForm> <CameraBlockForm :data="cameraData"></CameraBlockForm>
</div> </div>
@ -67,40 +64,38 @@
<!-- </a-tab-pane>--> <!-- </a-tab-pane>-->
</a-tabs> </a-tabs>
</a-tab-pane> </a-tab-pane>
<a-tab-pane :key="3" tab="报警设备"> <a-tab-pane key="C" tab="报警设备">
<a-tabs <a-tabs
v-model:activeKey="threeChildActiveKey" v-model:activeKey="threeChildActiveKey"
tab-position="top" tab-position="top"
:style="{ height: '100%' }" :style="{ height: '100%' }"
@tabScroll="callback"
type="card" type="card"
> >
<a-tab-pane :key="1" tab="白光报警"> <a-tab-pane key="C1" tab="白光报警">
<div class="scrollable" v-if="threeChildActiveKey==1"> <div class="scrollable" v-if="threeChildActiveKey==1">
<CameraLightAlarmForm :data="cameraData"></CameraLightAlarmForm> <CameraLightAlarmForm :data="cameraData"></CameraLightAlarmForm>
</div> </div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane :key="2" tab="声音报警"> <a-tab-pane key="C2" tab="声音报警">
<div class="scrollable" v-if="threeChildActiveKey==2"> <div class="scrollable" v-if="threeChildActiveKey==2">
<CameraSoundAlarmForm :data="cameraData"></CameraSoundAlarmForm> <CameraSoundAlarmForm :data="cameraData"></CameraSoundAlarmForm>
</div> </div>
</a-tab-pane> </a-tab-pane>
</a-tabs> </a-tabs>
</a-tab-pane> </a-tab-pane>
<a-tab-pane :key="4" tab="录像管理"> <a-tab-pane key="D" tab="录像管理">
<a-tabs <a-tabs
v-model:activeKey="fourChildActiveKey" v-model:activeKey="fourChildActiveKey"
tab-position="top" tab-position="top"
:style="{ height: '100%' }" :style="{ height: '100%' }"
@tabScroll="callback"
type="card" type="card"
> >
<a-tab-pane :key="1" tab="MP4转发FTP"> <a-tab-pane key="D1" tab="MP4转发FTP">
<div class="scrollable"> <div class="scrollable">
<CameraUploadForm :data="cameraData"></CameraUploadForm> <CameraUploadForm :data="cameraData"></CameraUploadForm>
</div> </div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane :key="2" tab="当天录像"> <a-tab-pane key="D2" tab="当天录像">
<div class="scrollable"> <div class="scrollable">
<CameraRecordList :data="cameraData" /> <CameraRecordList :data="cameraData" />
</div> </div>
@ -148,10 +143,12 @@
ip: '' ,//IP ip: '' ,//IP
}); });
const cameraData = ref({}); const cameraData = ref({});
const activeKey = ref(1); const activeKey = ref('A');
const oneChildActiveKey = ref(1); const oneChildActiveKey = ref('A1');
const twoChildActiveKey = ref(1); const twoChildActiveKey = ref('B1');
const threeChildActiveKey = ref(1); const threeChildActiveKey = ref('C1');
const commonFormRef = ref();
const osdFormRef = ref();
const imageData = reactive<Record<string, any>>({ const imageData = reactive<Record<string, any>>({
//画面显示配置 //画面显示配置
@ -206,7 +203,7 @@
// cameraData.value.parentId = formData.parentId; // cameraData.value.parentId = formData.parentId;
// }) // })
function edit(record) { function edit(record) {
formData.deviceIndex = record.deviceIndex; formData.deviceIndex = record.deviceIndex;
formData.parentId = record.parentId; formData.parentId = record.parentId;
formData.multitrans = record.multitrans; formData.multitrans = record.multitrans;
@ -222,10 +219,18 @@
cameraData.value.parentId = formData.parentId; cameraData.value.parentId = formData.parentId;
} }
function destroyPlayer(){
if(commonFormRef.value){
commonFormRef.value.destroyPlayer();
}
if(osdFormRef.value){
osdFormRef.value.destroyPlayer();
}
}
defineExpose({ defineExpose({
edit, edit,
destroyPlayer
}); });
</script> </script>

16
src/views/iot/tplink/camera/components/CameraPictureConfigModal.vue
View File

@ -1,6 +1,8 @@
<template> <template>
<j-modal :title="title" :width="width" :fullscreen="true" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭"> <j-modal :title="title" :width="width" :fullscreen="true" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
<CameraPictureConfig ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></CameraPictureConfig> <div v-if="showCamera">
<CameraPictureConfig ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></CameraPictureConfig>
</div>
</j-modal> </j-modal>
</template> </template>
@ -8,27 +10,29 @@
import { ref, nextTick, defineExpose } from 'vue'; import { ref, nextTick, defineExpose } from 'vue';
import CameraPictureConfig from './CameraPictureConfig.vue' import CameraPictureConfig from './CameraPictureConfig.vue'
import JModal from '/@/components/Modal/src/JModal/JModal.vue'; import JModal from '/@/components/Modal/src/JModal/JModal.vue';
const title = ref<string>(''); const title = ref<string>('');
const width = ref<string>('100%'); const width = ref<string>('100%');
const visible = ref<boolean>(false); const visible = ref<boolean>(false);
const disableSubmit = ref<boolean>(false); const disableSubmit = ref<boolean>(false);
const registerForm = ref(); const registerForm = ref();
const showCamera = ref<boolean>(false);
const emit = defineEmits(['register', 'success']); const emit = defineEmits(['register', 'success']);
/** /**
* 编辑 * 编辑
* @param record * @param record
*/ */
function edit(record) { function edit(record) {
title.value = disableSubmit.value ? '详情' : '编辑'; title.value = disableSubmit.value ? '详情' : '编辑';
showCamera.value = true;
visible.value = true; visible.value = true;
nextTick(() => { nextTick(() => {
registerForm.value.edit(record); registerForm.value.edit(record);
}); });
} }
/** /**
* 确定按钮点击事件 * 确定按钮点击事件
*/ */
@ -49,6 +53,10 @@
*/ */
function handleCancel() { function handleCancel() {
visible.value = false; visible.value = false;
nextTick(() => {
registerForm.value.destroyPlayer();
showCamera.value = false;
});
} }
defineExpose({ defineExpose({

177
src/views/iot/tplink/camera/components/CameraPreviewForm.vue
View File

@ -2,75 +2,104 @@
<a-spin :spinning="confirmLoading"> <a-spin :spinning="confirmLoading">
<a-row> <a-row>
<a-col :span="24"> <a-col :span="24">
<div id="video-container"></div> <div id="video-container-preview"></div>
</a-col> </a-col>
<a-col :span="24" style="padding: 5px;"> <a-col :span="20">
<span style="margin-left: 5px;" v-show="!izPlaying"> <a-col :span="24" style="padding: 5px;">
<a-button preIcon="ant-design:play-circle-outlined" @click="play">播放</a-button> <span style="margin-left: 5px;" v-show="!izPlaying">
</span> <a-button preIcon="ant-design:play-circle-outlined" @click="play">播放</a-button>
<span style="margin-left: 5px;" v-show="izPlaying"> </span>
<a-button preIcon="ant-design:pause-circle-outlined" @click="pause">暂停</a-button> <span style="margin-left: 5px;" v-show="izPlaying">
</span> <a-button preIcon="ant-design:pause-circle-outlined" @click="pause">暂停</a-button>
<span style="margin-left: 5px;"> </span>
<a-button preIcon="ant-design:swap-outlined" @click="switchResolution">{{ resolution }}</a-button> <span style="margin-left: 5px;">
</span> <a-button preIcon="ant-design:swap-outlined" @click="switchResolution">{{ resolution }}</a-button>
<!-- <span style="margin-left: 5px;"> </span>
<a-button preIcon="ant-design:phone-outlined" @click="screenshot">巡航*</a-button> <!-- <span style="margin-left: 5px;">
</span>--> <a-button preIcon="ant-design:phone-outlined" @click="screenshot">巡航*</a-button>
<span style="margin-left: 5px;" v-show="!izPhone"> </span>-->
<a-button preIcon="ant-design:phone-outlined" @click="startPhone">电话</a-button> <span style="margin-left: 5px;" v-show="!izPhone">
</span> <a-button preIcon="ant-design:phone-outlined" @click="startPhone">电话</a-button>
<span style="margin-left: 5px;" v-show="izPhone"> </span>
<a-button type="primary" danger ghost preIcon="ant-design:phone-outlined" @click="stopPhone">电话</a-button> <span style="margin-left: 5px;" v-show="izPhone">
</span> <a-button type="primary" danger ghost preIcon="ant-design:phone-outlined" @click="stopPhone">电话</a-button>
<span style="margin-left: 15px;">分屏 </span>
<a-select <span style="margin-left: 15px;">分屏
ref="select" <a-select
v-model:value="fishEyeDisplayMode" ref="select"
style="width: 120px" v-model:value="fishEyeDisplayMode"
@focus="focus" style="width: 120px"
@change="setFishEyeDisplayMode" @focus="focus"
> @change="setFishEyeDisplayMode"
<a-select-option value="ORIGIN">原图</a-select-option> >
<a-select-option value="FISHEYE_360D">360全景</a-select-option> <a-select-option value="ORIGIN">原图</a-select-option>
<a-select-option value="FISHEYE_180D">180全景</a-select-option> <a-select-option value="FISHEYE_360D">360全景</a-select-option>
<a-select-option value="FISHEYE_WIN_PLANE_TOP_QUAD">四分屏</a-select-option> <a-select-option value="FISHEYE_180D">180全景</a-select-option>
<a-select-option value="FISHEYE_LONGITUDE">全景拉伸</a-select-option> <a-select-option value="FISHEYE_WIN_PLANE_TOP_QUAD">四分屏</a-select-option>
</a-select> <a-select-option value="FISHEYE_LONGITUDE">全景拉伸</a-select-option>
</span> </a-select>
</span>
</a-col>
<a-col :span="24" style="padding: 5px;">
<span style="margin-left: 5px;">
<a-button preIcon="ant-design:picture-outlined" @click="screenshot">截图</a-button>
</span>
<span style="margin-left: 5px;" v-show="!izRecording">
<a-button preIcon="ant-design:video-camera-outlined" @click="recordingStart">录制</a-button>
</span>
<span style="margin-left: 5px;" v-show="izRecording">
<a-button type="primary" danger ghost preIcon="ant-design:video-camera-outlined" @click="recordingEnd">录制</a-button>
</span>
<span style="margin-left: 15px;">画面翻转
<a-select v-model:value="formData.flip_type" @change="(value) => changeSwitch('flip_type', value)">
<a-select-option value="off">关闭</a-select-option>
<a-select-option value="left_and_right">左右</a-select-option>
<a-select-option value="up_and_down">上下</a-select-option>
<a-select-option value="center">中心</a-select-option>
</a-select>
</span>
<span style="margin-left: 5px;">
<a-button preIcon="ant-design:alert-outlined" @click="manualAlarm">报警</a-button>
</span>
</a-col>
<a-col :span="24" style="padding: 5px;">
<span style="margin-left: 5px;">
变焦
</span>
<span style="margin-left: 5px;">
<a-button preIcon="ant-design:zoom-out-outlined" @mousedown="moveCtrl(9,1,1)" @mouseup="moveCtrl(9,0,1)" title="缩小">缩小</a-button>
</span>
<span style="margin-left: 5px;">
<a-button preIcon="ant-design:zoom-in-outlined" @mousedown="moveCtrl(10,1,1)" @mouseup="moveCtrl(10,0,1)" title="放大">放大</a-button>
</span>
<span style="margin-left: 5px;">
<a-button preIcon="ant-design:zoom-out-outlined" @mousedown="moveCtrl(11,1,1)" @mouseup="moveCtrl(11,0,1)">对近焦</a-button>
</span>
<span style="margin-left: 5px;">
<a-button preIcon="ant-design:zoom-in-outlined" @mousedown="moveCtrl(11,1,1)" @mouseup="moveCtrl(11,0,1)">对远焦</a-button>
</span>
</a-col>
</a-col> </a-col>
<a-col :span="24" style="padding: 5px;"> <a-col :span="4" v-show="formData.ptz == '1'">
<span style="margin-left: 5px;"> <table style="width: 96px;height:96px;margin: 5px 0px 5px 0px;">
<a-button preIcon="ant-design:picture-outlined" @click="screenshot">截图</a-button> <tbody>
</span> <tr>
<span style="margin-left: 5px;" v-show="!izRecording"> <td></td>
<a-button preIcon="ant-design:video-camera-outlined" @click="recordingStart">录制</a-button> <td><a-button preIcon="ant-design:caret-up-outlined" @mousedown="moveCtrl(1,1,1)" @mouseup="moveCtrl(1,0,1)"></a-button></td>
</span> <td></td>
<span style="margin-left: 5px;" v-show="izRecording"> </tr>
<a-button type="primary" danger ghost preIcon="ant-design:video-camera-outlined" @click="recordingEnd">录制</a-button> <tr>
</span> <td><a-button preIcon="ant-design:caret-left-outlined" @mousedown="moveCtrl(3,1,1)" @mouseup="moveCtrl(3,0,1)"></a-button></td>
<span style="margin-left: 15px;">画面翻转 <td><a-button preIcon="ant-design:compress-outlined"></a-button></td>
<a-select v-model:value="formData.flip_type" @change="(value) => changeSwitch('flip_type', value)"> <td><a-button preIcon="ant-design:caret-right-outlined" @mousedown="moveCtrl(5,1,1)" @mouseup="moveCtrl(5,0,1)"></a-button></td>
<a-select-option value="off">关闭</a-select-option> </tr>
<a-select-option value="left_and_right">左右</a-select-option> <tr>
<a-select-option value="up_and_down">上下</a-select-option> <td></td>
<a-select-option value="center">中心</a-select-option> <td><a-button preIcon="ant-design:caret-down-outlined" @mousedown="moveCtrl(7,1,1)" @mouseup="moveCtrl(7,0,1)"></a-button></td>
</a-select> <td></td>
</span> </tr>
<span style="margin-left: 5px;"> </tbody>
<a-button preIcon="ant-design:alert-outlined" @click="manualAlarm">报警</a-button> </table>
</span>
</a-col>
<a-col :span="24" style="padding: 5px;">
<span style="margin-left: 5px;">
变焦
</span>
<span style="margin-left: 5px;">
<a-button preIcon="ant-design:zoom-out-outlined" @click="zoomInOut('out')" title="缩小"></a-button>
</span>
<span style="margin-left: 5px;">
<a-button preIcon="ant-design:zoom-in-outlined" @click="zoomInOut('in')" title="放大"></a-button>
</span>
</a-col> </a-col>
</a-row> </a-row>
</a-spin> </a-spin>
@ -99,7 +128,7 @@
const formRef = ref(); const formRef = ref();
const player = ref(); const player = ref();
const resolution = ref<string>('超清'); const resolution = ref<string>('流畅');
const izPlaying = ref<boolean>(true); const izPlaying = ref<boolean>(true);
const izRecording = ref<boolean>(false); const izRecording = ref<boolean>(false);
const izPhone = ref<boolean>(false); const izPhone = ref<boolean>(false);
@ -111,7 +140,7 @@
//预览通道参数 //预览通道参数
deviceIndex: '',//设备索引 deviceIndex: '',//设备索引
streamType: 0,//码流类型 0 代表主码流，1 代码子码流 streamType: 1,//码流类型 0 代表主码流，1 代码子码流
//视频预览参数 //视频预览参数
url: '',//预览通道对应的URL url: '',//预览通道对应的URL
@ -120,7 +149,10 @@
wssUrl: '',//用于建立wss接传输视频帧信息 wssUrl: '',//用于建立wss接传输视频帧信息
flip_type: '',//画面镜像旋转： "off"//关闭 "left_and_right"//左右 "up_and_down"//上下 "center"//中心 flip_type: '',//画面镜像旋转： "off"//关闭 "left_and_right"//左右 "up_and_down"//上下 "center"//中心
zoom: 1, //变焦
sliderValue : 1,//滑动条的值
ptz : 0,//是否有云台
smartCode : 0,//是否可变焦
}); });
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } }); const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
@ -160,7 +192,6 @@
//赋值 //赋值
Object.assign(formData, tmpData); Object.assign(formData, tmpData);
}); });
createPreview(); createPreview();
getSwitch(); getSwitch();
} }
@ -179,9 +210,10 @@
if (player.value){ if (player.value){
player.value.destroy().then(() => { player.value.destroy().then(() => {
}); // 销毁 }); // 销毁
player.value = null;
} }
const TumsPlayer = window['tums-player'].default; const TumsPlayer = window['tums-player'].default;
player.value = new TumsPlayer('video-container', { player.value = new TumsPlayer('video-container-preview', {
type: "rtsp", // 协议类型，rtsp type: "rtsp", // 协议类型，rtsp
url: formData.url, // 取流地址, getPreviewUrl接口获取 url: formData.url, // 取流地址, getPreviewUrl接口获取
// url: formData.backupUrl, // 取流地址, getPreviewUrl接口获取 // url: formData.backupUrl, // 取流地址, getPreviewUrl接口获取
@ -400,6 +432,7 @@
if (player){ if (player){
player.value.destroy().then(() => { player.value.destroy().then(() => {
}); // 销毁 }); // 销毁
player.value = null;
} }
} }

11
src/views/iot/tplink/camera/components/CameraPreviewModal.vue
View File

@ -1,6 +1,8 @@
<template> <template>
<j-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭"> <j-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
<CameraPreviewForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></CameraPreviewForm> <div v-if="showCamera">
<CameraPreviewForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></CameraPreviewForm>
</div>
</j-modal> </j-modal>
</template> </template>
@ -12,6 +14,7 @@
const title = ref<string>(''); const title = ref<string>('');
const width = ref<number>(600); const width = ref<number>(600);
const visible = ref<boolean>(false); const visible = ref<boolean>(false);
const showCamera = ref<boolean>(false);
const disableSubmit = ref<boolean>(false); const disableSubmit = ref<boolean>(false);
const registerForm = ref(); const registerForm = ref();
const emit = defineEmits(['register', 'success']); const emit = defineEmits(['register', 'success']);
@ -24,6 +27,7 @@
*/ */
function edit(record) { function edit(record) {
title.value = record.deviceName; title.value = record.deviceName;
showCamera.value = true;
visible.value = true; visible.value = true;
nextTick(() => { nextTick(() => {
registerForm.value.edit(record); registerForm.value.edit(record);
@ -48,8 +52,11 @@
* 取消按钮回调事件 * 取消按钮回调事件
*/ */
function handleCancel() { function handleCancel() {
registerForm.value.destroy();
visible.value = false; visible.value = false;
nextTick(() => {
registerForm.value.destroy();
showCamera.value = false;
});
} }
defineExpose({ defineExpose({

6
src/views/iot/tplink/camera/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<CameraInfoList :data="cameraData" />
<a-row class="p-2" type="flex" :gutter="10"> <!-- <a-row class="p-2" type="flex" :gutter="10">
<a-col :xl="4" :lg="24" :md="24" style="margin-bottom: 10px"> <a-col :xl="4" :lg="24" :md="24" style="margin-bottom: 10px">
<CameraLeftTree ref="leftTree" @select="onTreeSelect" @rootTreeData="onRootTreeData" /> <CameraLeftTree ref="leftTree" @select="onTreeSelect" @rootTreeData="onRootTreeData" />
</a-col> </a-col>
@ -12,7 +12,7 @@
<a-empty description="请选择区域" /> <a-empty description="请选择区域" />
</div> </div>
</a-col> </a-col>
</a-row> </a-row> -->
</template> </template>
<script lang="ts" name="iot-nuIotCameraInfo" setup> <script lang="ts" name="iot-nuIotCameraInfo" setup>