update: 组件更换测试
This commit is contained in:
JiangQiming
parent
a5d7c228c2
commit
c97571e5cf
|
|
@ -16,6 +16,9 @@ export default {
|
|||
// 删除
|
||||
del: (id: string) => server.remove(`/media/channel/${id}`),
|
||||
|
||||
// 查询树形数据
|
||||
queryTree: (id: string, data?: any) => server.post(`/media/device/${id}/catalog/_query/tree`, data),
|
||||
|
||||
// ========== 视频播放 ==========
|
||||
// 开始直播
|
||||
ptzStart: (deviceId: string, channelId: string, type: string) =>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,99 @@
|
|||
<template>
|
||||
<div class="channel-tree">
|
||||
<div class="channel-tree-query">
|
||||
<j-input
|
||||
@change="debounce(queryTree, 300)"
|
||||
placeholder="请输入目录名称"
|
||||
>
|
||||
<template #suffix>
|
||||
<AIcon type="SearchOutlined" />
|
||||
</template>
|
||||
</j-input>
|
||||
</div>
|
||||
<div class="channel-tree-content">
|
||||
<j-tree
|
||||
:height="500"
|
||||
:selectedKeys="selectedKeys"
|
||||
:treeData="treeData"
|
||||
:onSelect="(keys:any) => {
|
||||
if (keys.length) {
|
||||
selectedKeys = keys
|
||||
if (props.onSelect) {
|
||||
props.onSelect(keys[0]);
|
||||
}
|
||||
}
|
||||
}"
|
||||
:fieldNames="{ key: 'id', title: 'name' }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { debounce } from 'lodash';
|
||||
import ChannelApi from '@/api/media/channel';
|
||||
import DeviceApi from '@/api/media/device';
|
||||
|
||||
interface TreeProps {
|
||||
deviceId: string;
|
||||
onSelect: (id: string) => void;
|
||||
onTreeLoad: (type: boolean) => void;
|
||||
}
|
||||
|
||||
const props = defineProps<TreeProps>();
|
||||
|
||||
const treeData = ref<any[]>([]);
|
||||
const selectedKeys = ref<string[]>([]);
|
||||
|
||||
const getTreeData = async (id: string, data?: any) => {
|
||||
const { result } = await ChannelApi.queryTree(id, data);
|
||||
treeData.value[0].children = result || [];
|
||||
props.onTreeLoad(treeData.value[0].children.length > 10);
|
||||
treeData.value = treeData.value;
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取设备详情
|
||||
* @param id
|
||||
*/
|
||||
const getDeviceDetail = async (id: string) => {
|
||||
const deviceResp = await DeviceApi.detail(id);
|
||||
if (deviceResp.status === 200) {
|
||||
treeData.value = [
|
||||
{
|
||||
id,
|
||||
name: deviceResp.result.name,
|
||||
children: [],
|
||||
},
|
||||
];
|
||||
selectedKeys.value = [id];
|
||||
getTreeData(props.deviceId, {});
|
||||
}
|
||||
};
|
||||
|
||||
const queryTree = (e: any) => {
|
||||
getTreeData(props.deviceId, {
|
||||
terms: [
|
||||
{ column: 'name', termType: 'like', value: `%${e.target.value}%` },
|
||||
],
|
||||
});
|
||||
};
|
||||
|
||||
watchEffect(() => {
|
||||
getDeviceDetail(props.deviceId);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.channel-tree {
|
||||
height: 100%;
|
||||
|
||||
.channel-tree-query {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.channel-tree-content {
|
||||
min-height: calc(100% - 50px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
.device-channel-warp {
|
||||
display: flex;
|
||||
|
||||
.left-warp {
|
||||
position: relative;
|
||||
margin-right: 16px;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
|
||||
.left-content {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
&.active {
|
||||
width: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
.left-warp--btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
padding: 20px 4px;
|
||||
color: rgba(#000, 0.3);
|
||||
background-color: rgba(#f0f0f0, 6);
|
||||
border-radius: ~'100% 0 0 100% / 50% 0 0 50%';
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: rgba(#000, 0.5);
|
||||
background-color: rgba(#f0f0f0, 8);
|
||||
}
|
||||
|
||||
&.active {
|
||||
right: 50%;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
transform: translateX(50%) rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,82 +1,102 @@
|
|||
<!-- 视频设备-通道列表 -->
|
||||
<template>
|
||||
<page-container>
|
||||
<j-advanced-search
|
||||
type="simple"
|
||||
:columns="columns"
|
||||
target="product"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
|
||||
<JProTable
|
||||
ref="listRef"
|
||||
:columns="columns"
|
||||
:request="(e:any) => ChannelApi.list(e, route?.query.id as string)"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'notifyTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
model="table"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-tooltip
|
||||
v-if="route?.query.type === 'gb28181-2016'"
|
||||
title="接入方式为GB/T28281时，不支持新增"
|
||||
<div class="device-channel-warp">
|
||||
<div class="left-warp" v-if="route.query.type === 'gb28181-2016'">
|
||||
<div class="left-content" :class="{ active: show }">
|
||||
<Tree
|
||||
:deviceId="deviceId"
|
||||
:on-tree-load="(e) => (show = e)"
|
||||
:on-select="handleSelect"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="left-warp--btn"
|
||||
:class="{ active: !show }"
|
||||
@click="show = !show"
|
||||
>
|
||||
<j-button type="primary" disabled> 新增 </j-button>
|
||||
</j-tooltip>
|
||||
<j-button type="primary" @click="handleAdd" v-else>
|
||||
新增
|
||||
</j-button>
|
||||
</template>
|
||||
<template #status="slotProps">
|
||||
<j-space>
|
||||
<j-badge
|
||||
:status="
|
||||
slotProps.status.value === 'online'
|
||||
? 'success'
|
||||
: 'error'
|
||||
"
|
||||
:text="slotProps.status.text"
|
||||
></j-badge>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<j-tooltip
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
v-bind="i.tooltip"
|
||||
>
|
||||
<j-popconfirm
|
||||
v-if="i.popConfirm"
|
||||
v-bind="i.popConfirm"
|
||||
:disabled="i.disabled"
|
||||
<AIcon type="LeftOutlined" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<j-advanced-search
|
||||
type="simple"
|
||||
:columns="columns"
|
||||
target="product"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
|
||||
<JProTable
|
||||
ref="listRef"
|
||||
:columns="columns"
|
||||
:request="(e:any) => ChannelApi.list(e, route?.query.id as string)"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'notifyTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
model="table"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-tooltip
|
||||
v-if="route?.query.type === 'gb28181-2016'"
|
||||
title="接入方式为GB/T28281时，不支持新增"
|
||||
>
|
||||
<j-button
|
||||
:disabled="i.disabled"
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
><AIcon :type="i.icon"
|
||||
/></j-button>
|
||||
</j-popconfirm>
|
||||
<j-button
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
v-else
|
||||
@click="i.onClick && i.onClick(slotProps)"
|
||||
>
|
||||
<j-button
|
||||
:disabled="i.disabled"
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
><AIcon :type="i.icon"
|
||||
/></j-button>
|
||||
<j-button type="primary" disabled> 新增 </j-button>
|
||||
</j-tooltip>
|
||||
<j-button type="primary" @click="handleAdd" v-else>
|
||||
新增
|
||||
</j-button>
|
||||
</j-tooltip>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</template>
|
||||
<template #status="slotProps">
|
||||
<j-space>
|
||||
<j-badge
|
||||
:status="
|
||||
slotProps.status.value === 'online'
|
||||
? 'success'
|
||||
: 'error'
|
||||
"
|
||||
:text="slotProps.status.text"
|
||||
></j-badge>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<j-tooltip
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
v-bind="i.tooltip"
|
||||
>
|
||||
<j-popconfirm
|
||||
v-if="i.popConfirm"
|
||||
v-bind="i.popConfirm"
|
||||
:disabled="i.disabled"
|
||||
>
|
||||
<j-button
|
||||
:disabled="i.disabled"
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
><AIcon :type="i.icon"
|
||||
/></j-button>
|
||||
</j-popconfirm>
|
||||
<j-button
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
v-else
|
||||
@click="i.onClick && i.onClick(slotProps)"
|
||||
>
|
||||
<j-button
|
||||
:disabled="i.disabled"
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
><AIcon :type="i.icon"
|
||||
/></j-button>
|
||||
</j-button>
|
||||
</j-tooltip>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Save
|
||||
v-model:visible="saveVis"
|
||||
|
|
@ -94,7 +114,9 @@ import { useMenuStore } from 'store/menu';
|
|||
import { message } from 'ant-design-vue';
|
||||
import Save from './Save.vue';
|
||||
import Live from './Live/index.vue';
|
||||
import Tree from './Tree/index.vue';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { useElementSize } from '@vueuse/core';
|
||||
|
||||
const menuStory = useMenuStore();
|
||||
const route = useRoute();
|
||||
|
|
@ -253,4 +275,25 @@ const getActions = (
|
|||
? actions.filter((f) => f.key !== 'delete')
|
||||
: actions;
|
||||
};
|
||||
|
||||
// 左侧树
|
||||
const show = ref(false);
|
||||
const deviceId = computed(() => route.query.id as string);
|
||||
const handleSelect = (key: string) => {
|
||||
if (key === deviceId.value && listRef.value?.reload) {
|
||||
listRef.value?.reload();
|
||||
} else {
|
||||
params.value = {
|
||||
terms: [
|
||||
{
|
||||
column: 'parentId',
|
||||
value: key,
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import './index.less';
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -257,9 +257,7 @@ const columns = [
|
|||
* @param params
|
||||
*/
|
||||
const handleSearch = (e: any) => {
|
||||
console.log('handleSearch:', e);
|
||||
params.value = e;
|
||||
console.log('params.value: ', params.value);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in New Issue