Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev

This commit is contained in:
JiangQiming 2023-02-27 14:42:27 +08:00
commit 980dd7af3a
10 changed files with 574 additions and 153 deletions

View File

@ -56,6 +56,8 @@ const iconKeys = [
'ArrowLeftOutlined',
'DownloadOutlined',
'PauseOutlined',
'ControlOutlined',
'RedoOutlined',
'VideoCameraOutlined',
'HistoryOutlined',
]

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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,

View File

@ -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>>({});

View File

@ -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);

View File

@ -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';