Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev
This commit is contained in:
easy
commit
1330d3401c
|
|
@ -0,0 +1,15 @@
|
|||
import server from '@/utils/request'
|
||||
|
||||
export default {
|
||||
// 列表
|
||||
list: (data: any, id: string) => server.post(`/media/device/${id}/channel/_query`, data),
|
||||
// 详情
|
||||
detail: (id: string): any => server.get(`/media/channel/${id}`),
|
||||
// 验证通道ID是否存在
|
||||
validateField: (params: string): any => server.get(`/media/channel/channelId/_validate`, params),
|
||||
// 新增
|
||||
save: (data: any) => server.post(`/media/channel`, data),
|
||||
// 修改
|
||||
update: (data: any) => server.put(`/media/channel`, data),
|
||||
del: (id: string) => server.remove(`media/channel/${id}`),
|
||||
}
|
||||
|
|
@ -55,7 +55,11 @@ const iconKeys = [
|
|||
'LikeOutlined',
|
||||
'ArrowLeftOutlined',
|
||||
'DownloadOutlined',
|
||||
'PauseOutlined'
|
||||
'PauseOutlined',
|
||||
'ControlOutlined',
|
||||
'RedoOutlined',
|
||||
'VideoCameraOutlined',
|
||||
'HistoryOutlined',
|
||||
]
|
||||
|
||||
const Icon = (props: {type: string}) => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
<template lang="">
|
||||
<a-modal
|
||||
title="查看"
|
||||
ok-text="确认"
|
||||
cancel-text="取消"
|
||||
:visible="true"
|
||||
width="500px"
|
||||
@cancel="handleCancel"
|
||||
@ok="handleOk"
|
||||
>
|
||||
<span>失败原因：{{ data }}</span>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script lang="ts" setup name="TaskDetailSavePage">
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['change']);
|
||||
|
||||
const handleOk = () => {
|
||||
handleCancel();
|
||||
};
|
||||
const handleCancel = () => {
|
||||
emit('change', false);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -0,0 +1,437 @@
|
|||
<template>
|
||||
<page-container>
|
||||
<div>
|
||||
<div class="state-container">
|
||||
<div
|
||||
class="state-body"
|
||||
v-for="item in stateList"
|
||||
:key="item.key"
|
||||
>
|
||||
<div class="state-content">
|
||||
<div class="state-header">
|
||||
<div class="state-title">
|
||||
<a-badge
|
||||
:text="item.name"
|
||||
:color="colorMap.get(item.key)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="state-title-right">
|
||||
<div>
|
||||
<a-popconfirm
|
||||
title="确定批量重试?"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@confirm="confirm"
|
||||
v-if="
|
||||
item.key === 'failed' &&
|
||||
stateInfo?.mode?.value === 'push'
|
||||
"
|
||||
>
|
||||
<a href="#">批量重试</a>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
|
||||
<div class="img">
|
||||
<img
|
||||
:src="buttonImg"
|
||||
@click="handleRefresh(item.key)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-box">
|
||||
<div
|
||||
class="state-left"
|
||||
:style="`color: ${colorMap.get(item.key)}`"
|
||||
>
|
||||
{{ state[item.key] }}
|
||||
</div>
|
||||
<img class="state-right" :src="item.img" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Search :columns="columns" target="search" @search="handleSearch" />
|
||||
<JTable
|
||||
ref="tableRef"
|
||||
model="TABLE"
|
||||
:columns="columns"
|
||||
:request="history"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
terms: defaultParams,
|
||||
}"
|
||||
:params="params"
|
||||
>
|
||||
<template #createTime="slotProps">
|
||||
<span>{{
|
||||
moment(slotProps.createTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
}}</span>
|
||||
</template>
|
||||
<template #productId="slotProps">
|
||||
<span>{{ slotProps.productName }}</span>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<a-badge
|
||||
:text="slotProps.state.text"
|
||||
:color="colorMap.get(slotProps.state.value)"
|
||||
/>
|
||||
</template>
|
||||
<template #progress="slotProps">
|
||||
<span>{{ slotProps.progress }}%</span>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<a-space :size="16">
|
||||
<a-tooltip
|
||||
v-for="i in getActions(slotProps)"
|
||||
:key="i.key"
|
||||
v-bind="i.tooltip"
|
||||
>
|
||||
<a-popconfirm
|
||||
v-if="i.popConfirm"
|
||||
v-bind="i.popConfirm"
|
||||
>
|
||||
<a-button
|
||||
:disabled="i.disabled"
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
><AIcon :type="i.icon"
|
||||
/></a-button>
|
||||
</a-popconfirm>
|
||||
<a-button
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
v-else
|
||||
@click="i.onClick && i.onClick(slotProps)"
|
||||
>
|
||||
<a-button
|
||||
:disabled="i.disabled"
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
><AIcon :type="i.icon"
|
||||
/></a-button>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
</JTable>
|
||||
<Save :data="current" v-if="visible" @change="saveChange" />
|
||||
</div>
|
||||
</page-container>
|
||||
</template>
|
||||
<script lang="ts" setup name="TaskDetailPage">
|
||||
import type { ActionsType } from '@/components/Table/index';
|
||||
import {
|
||||
taskById,
|
||||
history,
|
||||
historyCount,
|
||||
queryProduct,
|
||||
startTask,
|
||||
startOneTask,
|
||||
} from '@/api/device/firmware';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { getImage } from '@/utils/comm';
|
||||
import moment from 'moment';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import Save from './Save.vue';
|
||||
const tableRef = ref<Record<string, any>>({});
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const params = ref<Record<string, any>>({});
|
||||
const taskId = route.params?.id as string;
|
||||
const visible = ref(false);
|
||||
const current = ref({});
|
||||
const productOptions = ref([]);
|
||||
|
||||
const colorMap = new Map();
|
||||
colorMap.set('waiting', '#FF9000');
|
||||
colorMap.set('processing', '#4293FF');
|
||||
colorMap.set('failed', '#F76F5D');
|
||||
colorMap.set('success', '#24B276');
|
||||
colorMap.set('canceled', '#999');
|
||||
|
||||
const stateList = [
|
||||
{
|
||||
key: 'waiting',
|
||||
name: '等待升级',
|
||||
img: getImage('/firmware/waiting.png'),
|
||||
},
|
||||
{
|
||||
key: 'processing',
|
||||
name: '升级中',
|
||||
img: getImage('/firmware/loading.png'),
|
||||
},
|
||||
{
|
||||
key: 'success',
|
||||
name: '升级完成',
|
||||
img: getImage('/firmware/finish.png'),
|
||||
},
|
||||
{
|
||||
key: 'failed',
|
||||
name: '升级失败',
|
||||
img: getImage('/firmware/error.png'),
|
||||
},
|
||||
{
|
||||
key: 'canceled',
|
||||
name: '已停止',
|
||||
img: getImage('/firmware/cancel.png'),
|
||||
},
|
||||
];
|
||||
|
||||
const buttonImg = getImage('/firmware/button.png');
|
||||
const state = ref({
|
||||
waiting: 0,
|
||||
processing: 0,
|
||||
success: 0,
|
||||
failed: 0,
|
||||
canceled: 0,
|
||||
});
|
||||
const stateInfo = ref();
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '设备名称',
|
||||
dataIndex: 'deviceName',
|
||||
key: 'deviceName',
|
||||
fixed: 'left',
|
||||
width: 200,
|
||||
ellipsis: true,
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '所属产品',
|
||||
dataIndex: 'productId',
|
||||
key: 'productId',
|
||||
ellipsis: true,
|
||||
width: 200,
|
||||
scopedSlots: true,
|
||||
// search: {
|
||||
// type: 'select',
|
||||
// options: productOptions,
|
||||
// },
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
key: 'createTime',
|
||||
dataIndex: 'createTime',
|
||||
width: 200,
|
||||
scopedSlots: true,
|
||||
},
|
||||
{
|
||||
title: '完成时间',
|
||||
key: 'completeTime',
|
||||
ellipsis: true,
|
||||
dataIndex: 'completeTime',
|
||||
search: {
|
||||
type: 'date',
|
||||
},
|
||||
scopedSlots: true,
|
||||
},
|
||||
{
|
||||
title: '进度',
|
||||
dataIndex: 'progress',
|
||||
key: 'progress',
|
||||
ellipsis: true,
|
||||
scopedSlots: true,
|
||||
width: 200,
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'state',
|
||||
key: 'state',
|
||||
ellipsis: true,
|
||||
search: {
|
||||
type: 'select',
|
||||
options: stateList.map((item) => ({
|
||||
value: item.key,
|
||||
label: item.name,
|
||||
})),
|
||||
},
|
||||
scopedSlots: true,
|
||||
width: 200,
|
||||
},
|
||||
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 200,
|
||||
scopedSlots: true,
|
||||
},
|
||||
];
|
||||
|
||||
const defaultParams = [
|
||||
{
|
||||
terms: [
|
||||
{
|
||||
column: 'taskId',
|
||||
value: taskId,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
||||
if (!data) {
|
||||
return [];
|
||||
}
|
||||
const Actions = [
|
||||
{
|
||||
key: 'eye',
|
||||
text: '查看',
|
||||
tooltip: {
|
||||
title: '查看',
|
||||
},
|
||||
icon: 'EyeOutlined',
|
||||
onClick: async () => {
|
||||
handlEye(data.errorReason);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'try',
|
||||
text: '重试',
|
||||
tooltip: {
|
||||
title: '重试',
|
||||
},
|
||||
icon: 'RedoOutlined',
|
||||
onClick: async () => {
|
||||
handlTry(data.id);
|
||||
},
|
||||
},
|
||||
];
|
||||
return Actions;
|
||||
};
|
||||
|
||||
const handlAdd = () => {
|
||||
current.value = {};
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
const handlEye = (data: string) => {
|
||||
current.value = data || '';
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
const handlTry = async (id: string) => {
|
||||
const res = await startOneTask([id]);
|
||||
if (res.success) {
|
||||
message.success('操作成功');
|
||||
tableRef.value.reload();
|
||||
}
|
||||
};
|
||||
const saveChange = (value: boolean) => {
|
||||
visible.value = false;
|
||||
current.value = {};
|
||||
};
|
||||
const confirm = async (e: MouseEvent) => {
|
||||
const res = await startTask(taskId, ['failed']);
|
||||
if (res.success) {
|
||||
message.success('操作成功');
|
||||
handleRefresh('failed');
|
||||
tableRef.value.reload();
|
||||
}
|
||||
};
|
||||
|
||||
const handleRefresh = async (key: string) => {
|
||||
const terms = cloneDeep(defaultParams);
|
||||
terms[0].terms.push({ column: 'state', value: key });
|
||||
const res = await historyCount({ terms });
|
||||
if (res.success) {
|
||||
state.value[key] = res?.result || 0;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
stateList.forEach((item) => {
|
||||
handleRefresh(item.key);
|
||||
});
|
||||
taskById(taskId).then((res) => {
|
||||
if (res.success) {
|
||||
stateInfo.value = res?.result;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* 搜索
|
||||
* @param params
|
||||
*/
|
||||
const handleSearch = (e: any) => {
|
||||
params.value = e;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.state-container {
|
||||
width: 100%;
|
||||
min-height: 148px;
|
||||
background-color: #ffffff;
|
||||
padding: 24px 12px;
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.state-body {
|
||||
background: linear-gradient(
|
||||
135.62deg,
|
||||
#f6f7fd 22.27%,
|
||||
rgba(255, 255, 255, 0.86) 91.82%
|
||||
);
|
||||
min-width: 185px;
|
||||
max-width: 580px;
|
||||
flex: 1px;
|
||||
margin: 0 12px;
|
||||
.state-content {
|
||||
width: 100% -15px;
|
||||
height: 100%;
|
||||
margin: 15px 0 0 15px;
|
||||
align-content: center;
|
||||
|
||||
.state-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 22px;
|
||||
.state-title-right {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
.img {
|
||||
width: 22px;
|
||||
margin: 0 10px;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 22px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
}
|
||||
.img:active {
|
||||
border: 1px #40a9ff solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
.state-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.state-left {
|
||||
flex: 1;
|
||||
font-size: 52px;
|
||||
}
|
||||
.state-right {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
margin-top: -31px;
|
||||
max-width: 120px;
|
||||
max-height: 94px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,7 +5,11 @@
|
|||
:disabled="true"
|
||||
>
|
||||
<template #addonAfter>
|
||||
<AIcon type="EditOutlined" @click="onVisible" />
|
||||
<AIcon
|
||||
:class="data.view ? 'disabled' : ''"
|
||||
type="EditOutlined"
|
||||
@click="onVisible"
|
||||
/>
|
||||
</template>
|
||||
</a-input>
|
||||
<a-modal
|
||||
|
|
@ -78,6 +82,13 @@ import moment from 'moment';
|
|||
type T = any;
|
||||
const emit = defineEmits(['update:modelValue', 'change']);
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const params = ref<Record<string, any>>({});
|
||||
const visible = ref(false);
|
||||
|
|
@ -212,15 +223,18 @@ const cancelSelect = () => {
|
|||
};
|
||||
|
||||
const handleOk = () => {
|
||||
checkLable.value = _selectedRowKeys.value
|
||||
.map((item) => checkAllDataMap.has(item) && checkAllDataMap.get(item))
|
||||
.toString();
|
||||
checkLable.value = updateSelect(_selectedRowKeys.value);
|
||||
emit('update:modelValue', _selectedRowKeys.value);
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
const updateSelect = (selectedRowKeys: T[]) =>
|
||||
selectedRowKeys
|
||||
.map((item) => checkAllDataMap.has(item) && checkAllDataMap.get(item))
|
||||
.toString();
|
||||
|
||||
const onVisible = () => {
|
||||
visible.value = true;
|
||||
!props.data.view && (visible.value = true);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
|
|
@ -236,6 +250,10 @@ onMounted(() => {
|
|||
checkAllDataMap.set(item.id, item.name);
|
||||
return item.id;
|
||||
});
|
||||
if (props.data.id) {
|
||||
checkLable.value = updateSelect(props.data.deviceId);
|
||||
emit('update:modelValue', props.data.deviceId);
|
||||
}
|
||||
}
|
||||
},
|
||||
);
|
||||
|
|
@ -264,9 +282,8 @@ const handleSearch = (e: any) => {
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.form {
|
||||
.form-submit {
|
||||
background-color: @primary-color !important;
|
||||
}
|
||||
.disabled {
|
||||
pointer-events: auto !important;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -15,17 +15,20 @@
|
|||
:model="formData"
|
||||
name="basic"
|
||||
autocomplete="off"
|
||||
ref="formRef"
|
||||
:rules="rules"
|
||||
>
|
||||
<a-row :gutter="[24, 0]">
|
||||
<a-col :span="24">
|
||||
<a-form-item label="任务名称" v-bind="validateInfos.name">
|
||||
<a-form-item label="任务名称" name="name">
|
||||
<a-input
|
||||
placeholder="请输入任务名称"
|
||||
v-model:value="formData.name"
|
||||
:disabled="view"
|
||||
/></a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24"
|
||||
><a-form-item label="推送方式" v-bind="validateInfos.mode">
|
||||
><a-form-item label="推送方式" name="mode">
|
||||
<a-select
|
||||
v-model:value="formData.mode"
|
||||
:options="[
|
||||
|
|
@ -37,18 +40,20 @@
|
|||
show-search
|
||||
:filter-option="filterOption"
|
||||
@change="changeMode"
|
||||
:disabled="view"
|
||||
/> </a-form-item
|
||||
></a-col>
|
||||
<a-col :span="12" v-if="formData.mode === 'push'"
|
||||
><a-form-item
|
||||
label="响应超时时间"
|
||||
v-bind="validateInfos.responseTimeoutSeconds"
|
||||
name="responseTimeoutSeconds"
|
||||
>
|
||||
<a-input-number
|
||||
placeholder="请输入响应超时时间(秒)"
|
||||
style="width: 100%"
|
||||
:min="1"
|
||||
:max="99999"
|
||||
:disabled="view"
|
||||
v-model:value="
|
||||
formData.responseTimeoutSeconds
|
||||
" /></a-form-item
|
||||
|
|
@ -56,79 +61,59 @@
|
|||
<a-col
|
||||
:span="formData.mode === 'push' ? 12 : 24"
|
||||
v-if="formData.mode === 'push' || formData.mode === 'pull'"
|
||||
><a-form-item
|
||||
label="升级超时时间"
|
||||
v-bind="validateInfos.timeoutSeconds"
|
||||
>
|
||||
><a-form-item label="升级超时时间" name="timeoutSeconds">
|
||||
<a-input-number
|
||||
placeholder="请输入升级超时时间(秒)"
|
||||
style="width: 100%"
|
||||
:min="1"
|
||||
:max="99999"
|
||||
:disabled="view"
|
||||
v-model:value="
|
||||
formData.timeoutSeconds
|
||||
" /></a-form-item
|
||||
></a-col>
|
||||
<a-col :span="12" v-if="!!formData.mode"
|
||||
><a-form-item
|
||||
label="升级设备"
|
||||
v-bind="validateInfos.releaseType"
|
||||
>
|
||||
><a-form-item label="升级设备" name="releaseType">
|
||||
<a-radio-group
|
||||
v-model:value="formData.releaseType"
|
||||
button-style="solid"
|
||||
@change="changeShareCluster"
|
||||
:disabled="view"
|
||||
>
|
||||
<a-radio value="all">所有设备</a-radio>
|
||||
<a-radio value="part">选择设备</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12" v-if="formData.releaseType === 'part'"
|
||||
><a-form-item
|
||||
label="选择设备"
|
||||
v-bind="validateInfos.deviceId"
|
||||
>
|
||||
<a-col :span="12" v-if="formData.releaseType === 'part'">
|
||||
<a-form-item label="选择设备" name="deviceId">
|
||||
<SelectDevices
|
||||
v-model:modelValue="formData.deviceId"
|
||||
:data="devicesData"
|
||||
:data="data"
|
||||
></SelectDevices> </a-form-item
|
||||
></a-col>
|
||||
|
||||
<a-col :span="24">
|
||||
<a-form-item
|
||||
label="说明"
|
||||
v-bind="validateInfos.description"
|
||||
>
|
||||
<a-form-item label="说明" name="description">
|
||||
<a-textarea
|
||||
placeholder="请输入说明"
|
||||
v-model:value="formData.description"
|
||||
:maxlength="200"
|
||||
:rows="3"
|
||||
showCount
|
||||
:disabled="view"
|
||||
/> </a-form-item
|
||||
></a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
<!-- <SelectDevices v-if="visible" @change="saveChange"></SelectDevices> -->
|
||||
</template>
|
||||
<script lang="ts" setup name="TaskPage">
|
||||
import { message, Form } from 'ant-design-vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { getImage } from '@/utils/comm';
|
||||
import { save, update, queryProduct } from '@/api/device/firmware';
|
||||
import { queryProduct, saveTask } from '@/api/device/firmware';
|
||||
import type { FormInstance } from 'ant-design-vue';
|
||||
import type { Properties } from '../../type';
|
||||
import SelectDevices from './SelectDevices.vue';
|
||||
|
||||
const route = useRoute();
|
||||
console.log(111, route.query);
|
||||
|
||||
const loading = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
const productOptions = ref([]);
|
||||
const visible = ref(false);
|
||||
const devicesData = ref()
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
|
|
@ -136,9 +121,16 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
|
||||
const route = useRoute();
|
||||
const loading = ref(false);
|
||||
const productOptions = ref([]);
|
||||
const emit = defineEmits(['change']);
|
||||
|
||||
const id = props.data.id;
|
||||
const firmwareId = route.query.id;
|
||||
const productId = route.query.productId;
|
||||
const view = props.data.view;
|
||||
|
||||
const formData = ref({
|
||||
name: '',
|
||||
|
|
@ -146,98 +138,48 @@ const formData = ref({
|
|||
responseTimeoutSeconds: '',
|
||||
timeoutSeconds: '',
|
||||
releaseType: 'all',
|
||||
deviceId: [],
|
||||
deviceId: undefined,
|
||||
description: '',
|
||||
});
|
||||
|
||||
const extraValue = ref({});
|
||||
|
||||
const validatorSign = async (_: Record<string, any>, value: string) => {
|
||||
// const { releaseType, url } = formData.value;
|
||||
// if (value && !!releaseType && !!url && !extraValue.value) {
|
||||
// return extraValue.value[releaseType] !== value
|
||||
// ? Promise.reject('选择设备不一致，请检查文件是否上传正确')
|
||||
// : Promise.resolve();
|
||||
// } else {
|
||||
// return Promise.resolve();
|
||||
// }
|
||||
const rules = {
|
||||
name: [
|
||||
{ required: true, message: '请输入任务名称' },
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
],
|
||||
mode: [{ required: true, message: '请选择推送方式' }],
|
||||
responseTimeoutSeconds: [{ required: true, message: '请输入响应超时时间' }],
|
||||
timeoutSeconds: [{ required: true, message: '请输入升级超时时间' }],
|
||||
releaseType: [{ required: true }],
|
||||
deviceId: [{ required: true, message: '请选择设备' }],
|
||||
description: [{ max: 200, message: '最多可输入200个字符' }],
|
||||
};
|
||||
|
||||
const { resetFields, validate, validateInfos } = useForm(
|
||||
formData,
|
||||
reactive({
|
||||
name: [
|
||||
{ required: true, message: '请输入任务名称' },
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
],
|
||||
mode: [{ required: true, message: '请选择推送方式' }],
|
||||
responseTimeoutSeconds: [
|
||||
{ required: true, message: '请输入响应超时时间' },
|
||||
],
|
||||
timeoutSeconds: [{ required: true, message: '请输入升级超时时间' }],
|
||||
releaseType: [{ required: true }],
|
||||
deviceId: [
|
||||
{ required: true, message: '请选择设备' },
|
||||
{ validator: validatorSign },
|
||||
],
|
||||
description: [{ max: 200, message: '最多可输入200个字符' }],
|
||||
}),
|
||||
);
|
||||
|
||||
const filterOption = (input: string, option: any) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
};
|
||||
|
||||
const changeMode = (value) => {
|
||||
console.log(111, value, formData.value);
|
||||
};
|
||||
|
||||
const onChange = () => {
|
||||
visible.value = true;
|
||||
};
|
||||
const saveChange = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
const onSubmit = async () => {
|
||||
validate()
|
||||
.then(async (res) => {
|
||||
// const product = productOptions.value.find(
|
||||
// (item) => item.value === res.mode,
|
||||
// );
|
||||
// const productName = product.label || props.data?.url;
|
||||
// const size = extraValue.value.length || props.data?.size;
|
||||
// const params = {
|
||||
// ...toRaw(formData.value),
|
||||
// properties: !!properties ? properties : [],
|
||||
// productName,
|
||||
// size,
|
||||
// };
|
||||
// loading.value = true;
|
||||
// const response = !id
|
||||
// ? await save(params)
|
||||
// : await update({ ...props.data, ...params });
|
||||
// if (response.status === 200) {
|
||||
// message.success('操作成功');
|
||||
// emit('change', true);
|
||||
// }
|
||||
// loading.value = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
loading.value = false;
|
||||
});
|
||||
const params = await formRef.value?.validate();
|
||||
loading.value = true;
|
||||
const resp = await saveTask({
|
||||
...params,
|
||||
firmwareId,
|
||||
productId,
|
||||
});
|
||||
loading.value = false;
|
||||
resp.success && emit('change', true);
|
||||
};
|
||||
|
||||
const handleOk = () => {
|
||||
onSubmit();
|
||||
return view ? emit('change', false) : onSubmit();
|
||||
};
|
||||
const handleCancel = () => {
|
||||
emit('change', false);
|
||||
};
|
||||
|
||||
const changeSignMethod = () => {
|
||||
formData.value.deviceId = '';
|
||||
formData.value.url = '';
|
||||
const changeShareCluster = () => {
|
||||
formData.value.deviceId = undefined;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -256,16 +198,14 @@ watch(
|
|||
() => props.data,
|
||||
(value) => {
|
||||
if (value.id) {
|
||||
formData.value = value;
|
||||
formData.value = {
|
||||
...value,
|
||||
releaseType: value?.deviceId ? 'part' : 'all',
|
||||
};
|
||||
}
|
||||
},
|
||||
{ immediate: true, deep: true },
|
||||
);
|
||||
watch(
|
||||
() => extraValue.value,
|
||||
() => validate('deviceId'),
|
||||
{ deep: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -58,12 +58,14 @@
|
|||
<Save v-if="visible" :data="current" @change="saveChange" />
|
||||
</page-container>
|
||||
</template>
|
||||
<script lang="ts" setup name="CertificatePage">
|
||||
import type { ActionsType } from '@/components/Table/index.vue';
|
||||
<script lang="ts" setup name="TaskPage">
|
||||
import type { ActionsType } from '@/components/Table/index';
|
||||
import { task, startTask, stopTask } from '@/api/device/firmware';
|
||||
import { message } from 'ant-design-vue';
|
||||
import Save from './Save/index.vue'
|
||||
import Save from './Save/index.vue';
|
||||
import { useMenuStore } from 'store/menu';
|
||||
|
||||
const menuStory = useMenuStore();
|
||||
const tableRef = ref<Record<string, any>>({});
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
|
@ -83,7 +85,6 @@ const columns = [
|
|||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
// scopedSlots: true,
|
||||
},
|
||||
{
|
||||
title: '推送方式',
|
||||
|
|
@ -153,14 +154,14 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
|||
|
||||
const Actions = [
|
||||
{
|
||||
key: 'edit',
|
||||
key: 'details',
|
||||
text: '详情',
|
||||
tooltip: {
|
||||
title: '详情',
|
||||
},
|
||||
icon: 'EditOutlined',
|
||||
icon: 'icon-details',
|
||||
onClick: async () => {
|
||||
handlEdit(data.id);
|
||||
handlDetails(data.id);
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -206,7 +207,7 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
|||
tableRef.value.reload();
|
||||
}
|
||||
},
|
||||
icon: 'PauseOutlined',
|
||||
icon: 'ControlOutlined',
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -216,21 +217,17 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
|||
const handlAdd = () => {
|
||||
current.value = {};
|
||||
visible.value = true;
|
||||
|
||||
};
|
||||
|
||||
const handlEye = (data: object) => {
|
||||
current.value = toRaw(data);
|
||||
current.value = toRaw({ ...data, view: true });
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
const handlEdit = (id: string) => {
|
||||
// router.push({
|
||||
// path: `/iot/link/certificate/detail/${id}`,
|
||||
// query: { view: false },
|
||||
// });
|
||||
const handlDetails = (id: string) => {
|
||||
// menuStory.jumpPage('device/Firmware/Task/Detail', { id });
|
||||
};
|
||||
const saveChange = (value: FormDataType) => {
|
||||
const saveChange = (value: boolean) => {
|
||||
visible.value = false;
|
||||
current.value = {};
|
||||
if (value) {
|
||||
|
|
@ -248,9 +245,4 @@ const handleSearch = (e: any) => {
|
|||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.a {
|
||||
// display: none;
|
||||
visibility: 0;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped></style>
|
||||
|
|
|
|||
|
|
@ -188,7 +188,7 @@
|
|||
</page-container>
|
||||
</template>
|
||||
<script lang="ts" setup name="AccessConfigPage">
|
||||
import type { ActionsType } from '@/components/Table/index.vue';
|
||||
import type { ActionsType } from '@/components/Table/index';
|
||||
import { getImage } from '@/utils/comm';
|
||||
import {
|
||||
list,
|
||||
|
|
|
|||
|
|
@ -59,8 +59,8 @@
|
|||
</page-container>
|
||||
</template>
|
||||
<script lang="ts" setup name="CertificatePage">
|
||||
import type { ActionsType } from '@/components/Table/index.vue';
|
||||
import { save, query, remove } from '@/api/link/certificate';
|
||||
import type { ActionsType } from '@/components/Table/index';
|
||||
import { query, remove } from '@/api/link/certificate';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
const tableRef = ref<Record<string, any>>({});
|
||||
|
|
|
|||
|
|
@ -31,7 +31,9 @@
|
|||
</template>
|
||||
<template #content>
|
||||
<div class="card-item-content">
|
||||
<h3 class="card-item-content-title card-item-content-title-a">
|
||||
<h3
|
||||
class="card-item-content-title card-item-content-title-a"
|
||||
>
|
||||
{{ slotProps.name }}
|
||||
</h3>
|
||||
<a-row class="card-item-content-box">
|
||||
|
|
@ -148,7 +150,7 @@
|
|||
</page-container>
|
||||
</template>
|
||||
<script lang="ts" setup name="AccessConfigPage">
|
||||
import type { ActionsType } from '@/components/Table/index.vue';
|
||||
import type { ActionsType } from '@/components/Table/index';
|
||||
import { getImage } from '@/utils/comm';
|
||||
import { list, remove } from '@/api/link/protocol';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
|
@ -156,7 +158,6 @@ import Save from './Save/index.vue';
|
|||
import _ from 'lodash';
|
||||
|
||||
const tableRef = ref<Record<string, any>>({});
|
||||
const router = useRouter();
|
||||
const params = ref<Record<string, any>>({});
|
||||
|
||||
const visible = ref(false);
|
||||
|
|
|
|||
|
|
@ -186,7 +186,7 @@
|
|||
</page-container>
|
||||
</template>
|
||||
<script lang="ts" setup name="TypePage">
|
||||
import type { ActionsType } from '@/components/Table/index.vue';
|
||||
import type { ActionsType } from '@/components/Table/index'
|
||||
import { getImage } from '@/utils/comm';
|
||||
import { supports, query, remove, start, shutdown } from '@/api/link/type';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
|
|
|||
|
|
@ -8,106 +8,129 @@
|
|||
/>
|
||||
|
||||
<JTable
|
||||
ref="instanceRef"
|
||||
ref="listRef"
|
||||
:columns="columns"
|
||||
:request="(e:any) => templateApi.getHistory(e, data.id)"
|
||||
:request="(e:any) => ChannelApi.list(e, route?.query.id as string)"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'notifyTime', order: 'desc' }],
|
||||
terms: [{ column: 'notifyType$IN', value: data.type }],
|
||||
}"
|
||||
:params="params"
|
||||
model="table"
|
||||
>
|
||||
<template #notifyTime="slotProps">
|
||||
{{ moment(slotProps.notifyTime).format('YYYY-MM-DD HH:mm:ss') }}
|
||||
<template #headerTitle>
|
||||
<a-tooltip
|
||||
v-if="route?.query.type === 'gb28181-2016'"
|
||||
title="接入方式为GB/T28281时，不支持新增"
|
||||
>
|
||||
<a-button type="primary" disabled> 新增 </a-button>
|
||||
</a-tooltip>
|
||||
<a-button type="primary" @click="handleAdd" v-else>
|
||||
新增
|
||||
</a-button>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<template #status="slotProps">
|
||||
<a-space>
|
||||
<a-badge
|
||||
:status="slotProps.state.value"
|
||||
:text="slotProps.state.text"
|
||||
:status="
|
||||
slotProps.status.value === 'online'
|
||||
? 'success'
|
||||
: 'error'
|
||||
"
|
||||
:text="slotProps.status.text"
|
||||
></a-badge>
|
||||
<AIcon
|
||||
v-if="slotProps.state.value === 'error'"
|
||||
type="ExclamationCircleOutlined"
|
||||
style="color: #1d39c4; cursor: pointer"
|
||||
@click="handleError(slotProps.errorStack)"
|
||||
/>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<AIcon
|
||||
type="ExclamationCircleOutlined"
|
||||
style="color: #1d39c4; cursor: pointer"
|
||||
@click="handleDetail(slotProps.context)"
|
||||
/>
|
||||
<a-space :size="16">
|
||||
<a-tooltip
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
v-bind="i.tooltip"
|
||||
>
|
||||
<a-popconfirm
|
||||
v-if="i.popConfirm"
|
||||
v-bind="i.popConfirm"
|
||||
:disabled="i.disabled"
|
||||
>
|
||||
<a-button
|
||||
:disabled="i.disabled"
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
><AIcon :type="i.icon"
|
||||
/></a-button>
|
||||
</a-popconfirm>
|
||||
<a-button
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
v-else
|
||||
@click="i.onClick && i.onClick(slotProps)"
|
||||
>
|
||||
<a-button
|
||||
:disabled="i.disabled"
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
><AIcon :type="i.icon"
|
||||
/></a-button>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
</JTable>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import templateApi from '@/api/notice/template';
|
||||
import { PropType } from 'vue';
|
||||
import moment from 'moment';
|
||||
import { Modal } from 'ant-design-vue';
|
||||
import ChannelApi from '@/api/media/channel';
|
||||
import type { ActionsType } from '@/components/Table/index.vue';
|
||||
import { useMenuStore } from 'store/menu';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
type Emits = {
|
||||
(e: 'update:visible', data: boolean): void;
|
||||
};
|
||||
// const emit = defineEmits<Emits>();
|
||||
|
||||
const props = defineProps({
|
||||
visible: { type: Boolean, default: false },
|
||||
data: {
|
||||
type: Object as PropType<Partial<Record<string, any>>>,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
// const _vis = computed({
|
||||
// get: () => props.visible,
|
||||
// set: (val) => emit('update:visible', val),
|
||||
// });
|
||||
|
||||
// watch(
|
||||
// () => _vis.value,
|
||||
// (val) => {
|
||||
// if (val) handleSearch({ terms: [] });
|
||||
// },
|
||||
// );
|
||||
const menuStory = useMenuStore();
|
||||
const route = useRoute();
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
title: '通道ID',
|
||||
dataIndex: 'channelId',
|
||||
key: 'channelId',
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '发送时间',
|
||||
dataIndex: 'notifyTime',
|
||||
key: 'notifyTime',
|
||||
scopedSlots: true,
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
search: {
|
||||
type: 'date',
|
||||
handleValue: (v: any) => {
|
||||
return v;
|
||||
},
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '厂商',
|
||||
dataIndex: 'manufacturer',
|
||||
key: 'manufacturer',
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '安装地址',
|
||||
dataIndex: 'address',
|
||||
key: 'address',
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'state',
|
||||
key: 'state',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
scopedSlots: true,
|
||||
search: {
|
||||
type: 'select',
|
||||
options: [
|
||||
{ label: '成功', value: 'success' },
|
||||
{ label: '失败', value: 'error' },
|
||||
{ label: '已连接', value: 'online' },
|
||||
{ label: '未连接', value: 'offline' },
|
||||
],
|
||||
handleValue: (v: any) => {
|
||||
return v;
|
||||
|
|
@ -133,41 +156,84 @@ const handleSearch = (e: any) => {
|
|||
// console.log('params.value: ', params.value);
|
||||
};
|
||||
|
||||
/**
|
||||
* 查看错误信息
|
||||
*/
|
||||
const handleError = (e: any) => {
|
||||
Modal.info({
|
||||
title: '错误信息',
|
||||
content: h(
|
||||
'p',
|
||||
{
|
||||
style: {
|
||||
maxHeight: '300px',
|
||||
overflowY: 'auto',
|
||||
},
|
||||
},
|
||||
JSON.stringify(e),
|
||||
),
|
||||
});
|
||||
const saveVis = ref(false);
|
||||
const handleAdd = () => {
|
||||
saveVis.value = true;
|
||||
};
|
||||
/**
|
||||
* 查看详情
|
||||
*/
|
||||
const handleDetail = (e: any) => {
|
||||
Modal.info({
|
||||
title: '详情信息',
|
||||
content: h(
|
||||
'p',
|
||||
{
|
||||
style: {
|
||||
maxHeight: '300px',
|
||||
overflowY: 'auto',
|
||||
|
||||
const listRef = ref();
|
||||
const playVis = ref(false);
|
||||
const getActions = (
|
||||
data: Partial<Record<string, any>>,
|
||||
type: 'card' | 'table',
|
||||
): ActionsType[] => {
|
||||
if (!data) return [];
|
||||
const actions = [
|
||||
{
|
||||
key: 'edit',
|
||||
text: '编辑',
|
||||
tooltip: {
|
||||
title: '编辑',
|
||||
},
|
||||
icon: 'EditOutlined',
|
||||
onClick: () => {
|
||||
saveVis.value = true;
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'play',
|
||||
text: '播放',
|
||||
tooltip: {
|
||||
title: '播放',
|
||||
},
|
||||
icon: 'VideoCameraOutlined',
|
||||
onClick: () => {
|
||||
playVis.value = true;
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'backPlay',
|
||||
text: '回放',
|
||||
tooltip: {
|
||||
title: '回放',
|
||||
},
|
||||
icon: 'HistoryOutlined',
|
||||
onClick: () => {
|
||||
menuStory.jumpPage(
|
||||
'media/Device/Playback',
|
||||
{},
|
||||
{
|
||||
id: route.query.id,
|
||||
type: route.query.type,
|
||||
channelId: data.channelId,
|
||||
},
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'delete',
|
||||
text: '删除',
|
||||
tooltip: {
|
||||
title: '删除',
|
||||
},
|
||||
popConfirm: {
|
||||
title: '确认删除?',
|
||||
onConfirm: async () => {
|
||||
const resp = await ChannelApi.del(data.id);
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功！');
|
||||
listRef.value?.reload();
|
||||
} else {
|
||||
message.error('操作失败！');
|
||||
}
|
||||
},
|
||||
},
|
||||
JSON.stringify(e),
|
||||
),
|
||||
});
|
||||
icon: 'DeleteOutlined',
|
||||
},
|
||||
];
|
||||
return route?.query.type === 'gb28181-2016'
|
||||
? actions.filter((f) => f.key !== 'delete')
|
||||
: actions;
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
<template>
|
||||
<page-container> 回放 </page-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
export type recordsItemType = {
|
||||
channelId: string;
|
||||
deviceId: string;
|
||||
endTime: number;
|
||||
fileSize: number;
|
||||
name: string;
|
||||
secrecy: string;
|
||||
startTime: number;
|
||||
mediaEndTime: number;
|
||||
mediaStartTime: number;
|
||||
filePath: string;
|
||||
type: string;
|
||||
id: string;
|
||||
isServer?: boolean;
|
||||
};
|
||||
|
|
@ -670,33 +670,38 @@
|
|||
</div>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<a-form-item
|
||||
<template
|
||||
v-if="
|
||||
formData.type !== 'webhook' &&
|
||||
formData.type !== 'voice'
|
||||
"
|
||||
v-bind="validateInfos['template.message']"
|
||||
>
|
||||
<template #label>
|
||||
<span>
|
||||
模版内容
|
||||
<a-tooltip title="发送的内容，支持录入变量">
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<a-textarea
|
||||
v-model:value="formData.template.message"
|
||||
:maxlength="200"
|
||||
:rows="5"
|
||||
:disabled="formData.type === 'sms'"
|
||||
placeholder="变量格式:${name};
|
||||
<a-form-item
|
||||
v-bind="validateInfos['template.message']"
|
||||
>
|
||||
<template #label>
|
||||
<span>
|
||||
模版内容
|
||||
<a-tooltip
|
||||
title="发送的内容，支持录入变量"
|
||||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<a-textarea
|
||||
v-model:value="formData.template.message"
|
||||
:maxlength="200"
|
||||
:rows="5"
|
||||
:disabled="formData.type === 'sms'"
|
||||
placeholder="变量格式:${name};
|
||||
示例:尊敬的${name},${time}有设备触发告警,请注意处理"
|
||||
/>
|
||||
</a-form-item>
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<a-form-item
|
||||
label="变量列表"
|
||||
v-if="
|
||||
|
|
@ -804,6 +809,7 @@ const formData = ref<TemplateFormData>({
|
|||
* 重置字段值
|
||||
*/
|
||||
const resetPublicFiles = () => {
|
||||
formData.value.template = {};
|
||||
switch (formData.value.provider) {
|
||||
case 'dingTalkMessage':
|
||||
formData.value.template.agentId = '';
|
||||
|
|
@ -854,6 +860,7 @@ const resetPublicFiles = () => {
|
|||
formData.value.configId = undefined;
|
||||
formData.value.variableDefinitions = [];
|
||||
handleMessageTypeChange();
|
||||
// console.log('formData.value.template: ', formData.value.template);
|
||||
};
|
||||
|
||||
// 根据通知方式展示对应的字段
|
||||
|
|
@ -1049,7 +1056,7 @@ const handleMessageTypeChange = () => {
|
|||
};
|
||||
}
|
||||
formData.value.variableDefinitions = [];
|
||||
formData.value.template.message = '';
|
||||
// formData.value.template.message = '';
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -1085,7 +1092,6 @@ const handleTypeChange = () => {
|
|||
setTimeout(() => {
|
||||
formData.value.template =
|
||||
TEMPLATE_FIELD_MAP[formData.value.type][formData.value.provider];
|
||||
// console.log('formData.value.template: ', formData.value.template);
|
||||
resetPublicFiles();
|
||||
}, 0);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,82 @@
|
|||
<template>
|
||||
<a-row :gutter='[24]'>
|
||||
<a-col :span='10'>
|
||||
<a-form-item
|
||||
name='readProperties'
|
||||
:rules="[{ required: true, message: '请选择属性' }]"
|
||||
>
|
||||
<a-select
|
||||
show-search
|
||||
mode='multiple'
|
||||
max-tag-count='responsive'
|
||||
placeholder='请选择属性'
|
||||
style='width: 100%'
|
||||
v-model:value='readProperties'
|
||||
:options='properties'
|
||||
:filter-option='filterSelectNode'
|
||||
@change='change'
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span='14'>
|
||||
<a-form-item>定时读取所选属性值</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts' name='ReadProperties'>
|
||||
import { filterSelectNode } from '@/utils/comm'
|
||||
import type { PropType } from 'vue'
|
||||
|
||||
type Emit = {
|
||||
(e: 'update:value', data: Array<string>): void
|
||||
(e: 'update:action', data: string): void
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Array as PropType<Array<string>>,
|
||||
default: () => []
|
||||
},
|
||||
action: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
properties: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emit>()
|
||||
|
||||
const readProperties = ref<string[]>(props.value)
|
||||
|
||||
const change = (values: string[], optionItems: any[]) => {
|
||||
console.log(values, optionItems)
|
||||
const names = optionItems.map((item) => item.name);
|
||||
let extraStr = '';
|
||||
let isLimit = false;
|
||||
let indexOf = 0;
|
||||
extraStr = names.reduce((_prev, next, index) => {
|
||||
if (_prev.length <= 30) {
|
||||
indexOf = index;
|
||||
return index === 0 ? next : _prev + '、' + next;
|
||||
} else {
|
||||
isLimit = true;
|
||||
}
|
||||
return _prev;
|
||||
}, '');
|
||||
|
||||
if (isLimit && names.length - 1 > indexOf) {
|
||||
extraStr += `等${optionItems.length}个属性`;
|
||||
}
|
||||
emit('update:value', values)
|
||||
emit('update:action', `读取 ${extraStr}`)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<template>
|
||||
<a-row :futter='[24]'>
|
||||
<a-col :span='10'>
|
||||
<a-select
|
||||
showSearch
|
||||
max-tag-count='responsive'
|
||||
style='width: 100%'
|
||||
placeholder='placeholder'
|
||||
v-model:value='reportKey'
|
||||
:options='properties'
|
||||
:filter-option='filterSelectNode'
|
||||
/>
|
||||
</a-col>
|
||||
<a-col :span='14'>定时调用所选属性</a-col>
|
||||
<a-col :span='24' v-if='showTable'>
|
||||
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts' name='ReportEvent'>
|
||||
import { filterSelectNode } from '@/utils/comm'
|
||||
import type { PropType } from 'vue'
|
||||
|
||||
type Emit = {
|
||||
(e: 'update:value', data: Array<string>): void
|
||||
(e: 'update:action', data: string): void
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Array as PropType<Array<string>>,
|
||||
default: () => []
|
||||
},
|
||||
action: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
properties: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emit>()
|
||||
|
||||
const reportKey = ref<Array<string>>([])
|
||||
const callData = ref<Array<{}>>()
|
||||
|
||||
const showTable = computed(() => {
|
||||
return !!reportKey.value
|
||||
})
|
||||
|
||||
watch([props.value, props.properties], () => {
|
||||
if (props.value && props.properties?.length) {
|
||||
|
||||
} else {
|
||||
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -7,23 +7,33 @@
|
|||
>
|
||||
<TopCard
|
||||
:label-bottom='true'
|
||||
:options='options'
|
||||
:options='topOptions'
|
||||
v-model:value='formModel.operator'
|
||||
/>
|
||||
</a-form-item>
|
||||
<Timer v-if='showTimer' />
|
||||
<Timer v-if='showTimer' v-model:value='formModel.timer' />
|
||||
<ReadProperties v-if='showReadProperty' v-model:value='formModel.readProperties' v-model:action='optionCache.action' :properties='readProperties' />
|
||||
<a-form-item
|
||||
v-if='showWriteProperty'
|
||||
name='writeProperties'
|
||||
:rules="[{ required: true, message: '请输入修改值' }]"
|
||||
>
|
||||
<WriteProperty v-model:value='formModel.writeProperties' v-model:action='optionCache.action' :properties='writeProperties' />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
|
||||
import TopCard from '@/views/rule-engine/Scene/Save/components/TopCard.vue'
|
||||
import { TopCard, Timer } from '@/views/rule-engine/Scene/Save/components'
|
||||
import { getImage } from '@/utils/comm'
|
||||
import { metadataType } from '@/views/rule-engine/Scene/typings'
|
||||
import type { PropType } from 'vue'
|
||||
import { TypeEnum } from '@/views/rule-engine/Scene/Save/Device/util'
|
||||
import Timer from '../components/Timer.vue'
|
||||
import ReadProperties from './ReadProperties.vue'
|
||||
import ReportEvent from './ReportEvent.vue'
|
||||
import WriteProperty from './WriteProperty.vue'
|
||||
|
||||
const props = defineProps({
|
||||
metadata: {
|
||||
|
|
@ -34,12 +44,19 @@ const props = defineProps({
|
|||
|
||||
const formModel = reactive({
|
||||
operator: 'online',
|
||||
timer: {},
|
||||
readProperties: [],
|
||||
writeProperties: {}
|
||||
})
|
||||
|
||||
const optionCache = reactive({
|
||||
action: ''
|
||||
})
|
||||
|
||||
const readProperties = ref<any[]>([])
|
||||
const writeProperties = ref<any[]>([])
|
||||
|
||||
const options = computed(() => {
|
||||
const topOptions = computed(() => {
|
||||
const baseOptions = [
|
||||
{
|
||||
label: '设备上线',
|
||||
|
|
@ -59,9 +76,9 @@ const options = computed(() => {
|
|||
|
||||
if (props.metadata.properties?.length) {
|
||||
const _properties = props.metadata.properties
|
||||
readProperties.value = _properties.filter((item: any) => item.expands.type?.includes('read'))
|
||||
writeProperties.value = _properties.filter((item: any) => item.expands.type?.includes('write'))
|
||||
const reportProperties = _properties.filter((item: any) => item.expands.type?.includes('report'))
|
||||
readProperties.value = _properties.filter((item: any) => item.expands.type?.includes('read')).map(item => ({...item, label: item.name, value: item.id }))
|
||||
writeProperties.value = _properties.filter((item: any) => item.expands.type?.includes('write')).map(item => ({...item, label: item.name, value: item.id }))
|
||||
const reportProperties = _properties.filter((item: any) => item.expands.type?.includes('report')).map(item => ({...item, label: item.name, value: item.id }))
|
||||
|
||||
if (readProperties.value.length) {
|
||||
baseOptions.push(TypeEnum.readProperty)
|
||||
|
|
@ -84,8 +101,28 @@ const options = computed(() => {
|
|||
return baseOptions
|
||||
})
|
||||
|
||||
const showReadProperty = computed(() => {
|
||||
return formModel.operator === TypeEnum.readProperty.value
|
||||
})
|
||||
|
||||
const showWriteProperty = computed(() => {
|
||||
return formModel.operator === TypeEnum.writeProperty.value
|
||||
})
|
||||
|
||||
const showReportEvent = computed(() => {
|
||||
return formModel.operator === TypeEnum.reportEvent.value
|
||||
})
|
||||
|
||||
const showInvokeFunction = computed(() => {
|
||||
return formModel.operator === TypeEnum.invokeFunction.value
|
||||
})
|
||||
|
||||
const showTimer = computed(() => {
|
||||
return ['readProperty', 'writeProperty', 'invokeFunction'].includes(formModel.operator)
|
||||
return [
|
||||
TypeEnum.readProperty.value,
|
||||
TypeEnum.writeProperty.value,
|
||||
TypeEnum.invokeFunction.value
|
||||
].includes(formModel.operator)
|
||||
})
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,99 @@
|
|||
<template>
|
||||
<a-row :futter='[24, 24]'>
|
||||
<a-col :span='10'>
|
||||
<a-select
|
||||
showSearch
|
||||
style='width: 100%'
|
||||
placeholder='请选择属性'
|
||||
v-model:value='reportKey'
|
||||
:options='properties'
|
||||
:filter-option='filterSelectNode'
|
||||
@change='change'
|
||||
/>
|
||||
</a-col>
|
||||
<a-col :span='14'>
|
||||
<span style='line-height: 32px;padding-left: 24px'>
|
||||
定时调用所选属性
|
||||
</span>
|
||||
</a-col>
|
||||
<a-col :span='24' v-if='showTable'>
|
||||
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts' name='WriteProperties'>
|
||||
import { filterSelectNode } from '@/utils/comm'
|
||||
import type { PropType } from 'vue'
|
||||
|
||||
type Emit = {
|
||||
(e: 'update:value', data: Record<string, any>): void
|
||||
(e: 'update:action', data: string): void
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Object as PropType<Record<string, any>>,
|
||||
default: () => []
|
||||
},
|
||||
action: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
properties: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emit>()
|
||||
|
||||
const reportKey = ref<string>()
|
||||
const callData = ref<Array<Record<string, any>>>()
|
||||
|
||||
const callDataOptions = computed(() => {
|
||||
const _valueKeys = Object.keys(props.value)
|
||||
if (_valueKeys.length) {
|
||||
return _valueKeys.map(key => {
|
||||
const item: any = props.properties.find((p: any) => p.id === key)
|
||||
if (item) {
|
||||
return {
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
type: item.valueType ? item.valueType.type : '-',
|
||||
format: item.valueType ? item.valueType.format : undefined,
|
||||
options: item.valueType ? item.valueType.element : undefined,
|
||||
value: props.value[key]
|
||||
}
|
||||
}
|
||||
return {
|
||||
id: key,
|
||||
name: key,
|
||||
type: '',
|
||||
format: undefined,
|
||||
options: undefined,
|
||||
value: props.value[key]
|
||||
}
|
||||
})
|
||||
}
|
||||
return []
|
||||
})
|
||||
|
||||
const showTable = computed(() => {
|
||||
return !!reportKey.value
|
||||
})
|
||||
|
||||
const change = (v: string, option: any) => {
|
||||
console.log(v, option)
|
||||
const _data = {
|
||||
[v]: undefined
|
||||
}
|
||||
callData.value = [_data]
|
||||
emit('update:value', _data)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<a-table
|
||||
:data-source='dataSource'
|
||||
:columns='columns'
|
||||
>
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<template v-if='column.key'>
|
||||
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts' name='FunctionCall'>
|
||||
|
||||
const dataSource = []
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '参数名称',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '参数名称',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '值',
|
||||
dataIndex: 'value',
|
||||
align: 'center',
|
||||
width: 260
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<template>
|
||||
<div class='timer-when-warp'>
|
||||
<div :class='["when-item-option", allActive ? "active" : ""]' @click='() => change(0)'>每天</div>
|
||||
<div
|
||||
v-for='item in timeOptions'
|
||||
:class='["when-item-option", rowKeys.includes(item.value) ? "active" : ""]'
|
||||
@click='() => change(item.value)'
|
||||
>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts' name='WhenOption'>
|
||||
import type { PropType } from 'vue'
|
||||
import { numberToString } from './util'
|
||||
|
||||
type Emit = {
|
||||
(e: 'update:value', data: Array<number>):void
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Array as PropType<Array<number>>,
|
||||
default: []
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emit>()
|
||||
|
||||
const timeOptions = ref<Array<{ label: string, value: number}>>([])
|
||||
const rowKeys = ref<Array<number>>(props.value)
|
||||
|
||||
const change = (number: number) => {
|
||||
const _keys = new Set(rowKeys.value)
|
||||
if (number === 0) { // 全选
|
||||
_keys.clear()
|
||||
} else {
|
||||
if (_keys.has(number)) {
|
||||
_keys.delete(number)
|
||||
} else {
|
||||
_keys.add(number)
|
||||
}
|
||||
}
|
||||
rowKeys.value = [..._keys.values()]
|
||||
emit('update:value', rowKeys.value)
|
||||
}
|
||||
|
||||
const allActive = computed(() => {
|
||||
return !rowKeys.value.length
|
||||
})
|
||||
|
||||
watch(() => props.type, () => {
|
||||
const isMonth = props.type === 'month'
|
||||
const day = isMonth ? 31 : 7
|
||||
change(0)
|
||||
timeOptions.value = new Array(day)
|
||||
.fill(1)
|
||||
.map((_, index) => {
|
||||
const _value = index + 1
|
||||
return {
|
||||
label: isMonth ? `${_value}号` : numberToString[_value],
|
||||
value: _value
|
||||
}
|
||||
})
|
||||
}, { immediate: true })
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang='less'>
|
||||
.timer-when-warp {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 16px;
|
||||
padding: 16px;
|
||||
background: #fafafa;
|
||||
|
||||
.when-item-option {
|
||||
width: 76px;
|
||||
padding: 6px 0;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #233dd7;
|
||||
border-color: #233dd7;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import Timer from './index.vue'
|
||||
|
||||
export default Timer
|
||||
|
|
@ -17,12 +17,26 @@
|
|||
button-style='solid'
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if='showCron' name='cron'>
|
||||
<a-input placeholder='corn表达式' v-model='formModel.cron' />
|
||||
<a-form-item v-if='showCron' name='cron' :rules="[
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
{
|
||||
validator: async (_, v) => {
|
||||
if (v) {
|
||||
if (!isCron(v)) {
|
||||
return Promise.reject(new Error('请输入正确的cron表达式'));
|
||||
}
|
||||
} else {
|
||||
return Promise.reject(new Error('请输入cron表达式'));
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
]">
|
||||
<a-input placeholder='corn表达式' v-model:value='formModel.cron' />
|
||||
</a-form-item>
|
||||
<template v-else>
|
||||
<a-form-item name='when'>
|
||||
|
||||
<WhenOption v-model:value='formModel.when' :type='formModel.trigger' />
|
||||
</a-form-item>
|
||||
<a-form-item name='mod'>
|
||||
<a-radio-group
|
||||
|
|
@ -38,9 +52,10 @@
|
|||
</template>
|
||||
<a-space v-if='showOnce' style='display: flex;gap: 24px'>
|
||||
<a-form-item :name="['once', 'time']">
|
||||
<a-time-picker valueFormat='HH:mm:ss' v-model:value='formModel.once.time' style='width: 100%' format='HH:mm:ss' />
|
||||
<a-time-picker valueFormat='HH:mm:ss' v-model:value='formModel.once.time' style='width: 100%'
|
||||
format='HH:mm:ss' />
|
||||
</a-form-item>
|
||||
<a-form-item> 执行一次 </a-form-item>
|
||||
<a-form-item> 执行一次</a-form-item>
|
||||
</a-space>
|
||||
<a-space v-if='showPeriod' style='display: flex;gap: 24px'>
|
||||
<a-form-item>
|
||||
|
|
@ -89,9 +104,17 @@
|
|||
<script setup lang='ts' name='Timer'>
|
||||
import type { PropType } from 'vue'
|
||||
import moment from 'moment'
|
||||
import WhenOption from './WhenOption.vue'
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
import type { OperationTimer } from '../../../typings'
|
||||
import { isCron } from '@/utils/regular'
|
||||
|
||||
type NameType = string[] | string
|
||||
|
||||
type Emit = {
|
||||
(e: 'update:value', data: OperationTimer): void
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
name: {
|
||||
type: [String, Array] as PropType<NameType>,
|
||||
|
|
@ -103,13 +126,15 @@ const props = defineProps({
|
|||
}
|
||||
})
|
||||
|
||||
const formModel = reactive({
|
||||
const emit = defineEmits<Emit>()
|
||||
|
||||
const formModel = reactive<OperationTimer>({
|
||||
trigger: 'week',
|
||||
when: [],
|
||||
mod: 'period',
|
||||
cron: undefined,
|
||||
once: {
|
||||
time: ''
|
||||
time: moment(new Date()).format('HH:mm:ss')
|
||||
},
|
||||
period: {
|
||||
from: moment(new Date()).startOf('day').format('HH:mm:ss'),
|
||||
|
|
@ -119,6 +144,8 @@ const formModel = reactive({
|
|||
}
|
||||
})
|
||||
|
||||
Object.assign(formModel, props.value)
|
||||
|
||||
const showCron = computed(() => {
|
||||
return formModel.trigger === 'cron'
|
||||
})
|
||||
|
|
@ -131,6 +158,22 @@ const showPeriod = computed(() => {
|
|||
return formModel.trigger !== 'cron' && formModel.mod === 'period'
|
||||
})
|
||||
|
||||
watch(() => formModel, () => {
|
||||
const cloneValue = cloneDeep(formModel)
|
||||
if (cloneValue.trigger === 'cron') {
|
||||
delete cloneValue.when
|
||||
} else {
|
||||
delete cloneValue.cron
|
||||
}
|
||||
|
||||
if (cloneValue.mod === 'period') {
|
||||
delete cloneValue.once
|
||||
} else {
|
||||
delete cloneValue.period
|
||||
}
|
||||
emit('update:value', cloneValue)
|
||||
}, { deep: true })
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang='less'>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
export const numberToString = {
|
||||
1: '星期一',
|
||||
2: '星期二',
|
||||
3: '星期三',
|
||||
4: '星期四',
|
||||
5: '星期五',
|
||||
6: '星期六',
|
||||
7: '星期日',
|
||||
};
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export { default as Timer } from './Timer'
|
||||
export { default as TopCard } from './TopCard.vue'
|
||||
export { default as TriggerWay } from './TriggerWay.vue'
|
||||
|
|
@ -93,7 +93,7 @@ export enum ActionAlarmMode {
|
|||
export interface OperationTimerPeriod {
|
||||
from: string;
|
||||
to: string;
|
||||
every: string[];
|
||||
every: number;
|
||||
unit: keyof typeof TimeUnit;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue