Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev
This commit is contained in:
commit
7173dd7c5c
|
@ -281,7 +281,7 @@
|
|||
:columns="query.columns"
|
||||
target="deviceModal"
|
||||
@search="search"
|
||||
type='simple'
|
||||
type="simple"
|
||||
/>
|
||||
<JProTable
|
||||
:columns="query.columns"
|
||||
|
@ -374,7 +374,7 @@ import { Empty, message } from 'jetlinks-ui-components';
|
|||
import { getImage } from '@/utils/comm';
|
||||
import Title from '../Title/index.vue';
|
||||
import { usePermissionStore } from '@/store/permission';
|
||||
import { steps, steps1 } from './util'
|
||||
import { steps, steps1 } from './util';
|
||||
import './index.less';
|
||||
import {
|
||||
getProviders,
|
||||
|
@ -396,7 +396,7 @@ const productStore = useProductStore();
|
|||
import Driver from 'driver.js';
|
||||
import 'driver.js/dist/driver.min.css';
|
||||
import { marked } from 'marked';
|
||||
import type { TableColumnType } from 'ant-design-vue';
|
||||
import type { TableColumnType } from 'ant-design-vue';
|
||||
import { useMenuStore } from '@/store/menu';
|
||||
const formRef = ref();
|
||||
const menuStore = useMenuStore();
|
||||
|
@ -590,7 +590,7 @@ const search = (e: any) => {
|
|||
};
|
||||
};
|
||||
|
||||
const stepsRef = reactive({current:0})
|
||||
const stepsRef = reactive({ current: 0 });
|
||||
|
||||
/**
|
||||
* 保存引导页数据
|
||||
|
@ -615,10 +615,10 @@ const driver = new Driver({
|
|||
},
|
||||
onReset: () => {
|
||||
if (stepsRef.current !== 3) {
|
||||
guide({
|
||||
name: 'guide',
|
||||
content: 'skip',
|
||||
});
|
||||
guide({
|
||||
name: 'guide',
|
||||
content: 'skip',
|
||||
});
|
||||
}
|
||||
stepsRef.current = 0;
|
||||
},
|
||||
|
@ -638,10 +638,10 @@ const driver1 = new Driver({
|
|||
},
|
||||
onReset: () => {
|
||||
if (stepsRef.current !== 4) {
|
||||
guide({
|
||||
name: 'guide',
|
||||
content: 'skip',
|
||||
});
|
||||
guide({
|
||||
name: 'guide',
|
||||
content: 'skip',
|
||||
});
|
||||
}
|
||||
stepsRef.current = 0;
|
||||
},
|
||||
|
@ -808,44 +808,42 @@ const getConfigDetail = (
|
|||
messageProtocol: string,
|
||||
transportProtocol: string,
|
||||
) => {
|
||||
getConfigView(messageProtocol, transportProtocol).then(
|
||||
(resp) => {
|
||||
if (resp.status === 200) {
|
||||
config.value = resp.result;
|
||||
const Group = {
|
||||
title: '分组',
|
||||
dataIndex: 'group',
|
||||
key: 'group',
|
||||
ellipsis: true,
|
||||
align: 'center',
|
||||
width: 100,
|
||||
customCell: (record: any, rowIndex: number) => {
|
||||
const obj = {
|
||||
children: record,
|
||||
rowSpan: 0,
|
||||
};
|
||||
const list = config.value?.routes || [];
|
||||
getConfigView(messageProtocol, transportProtocol).then((resp) => {
|
||||
if (resp.status === 200) {
|
||||
config.value = resp.result;
|
||||
const Group = {
|
||||
title: '分组',
|
||||
dataIndex: 'group',
|
||||
key: 'group',
|
||||
ellipsis: true,
|
||||
align: 'center',
|
||||
width: 100,
|
||||
customCell: (record: any, rowIndex: number) => {
|
||||
const obj = {
|
||||
children: record,
|
||||
rowSpan: 0,
|
||||
};
|
||||
const list = config.value?.routes || [];
|
||||
|
||||
const arr = list.filter(
|
||||
(res: any) => res.group === record.group,
|
||||
);
|
||||
const arr = list.filter(
|
||||
(res: any) => res.group === record.group,
|
||||
);
|
||||
|
||||
const isRowIndex =
|
||||
rowIndex === 0 ||
|
||||
list[rowIndex - 1].group !== record.group;
|
||||
isRowIndex && (obj.rowSpan = arr.length);
|
||||
const isRowIndex =
|
||||
rowIndex === 0 ||
|
||||
list[rowIndex - 1].group !== record.group;
|
||||
isRowIndex && (obj.rowSpan = arr.length);
|
||||
|
||||
return obj;
|
||||
},
|
||||
};
|
||||
columnsMQTT.value = [Group, ...ColumnsMQTT];
|
||||
columnsHTTP.value = [Group, ...ColumnsHTTP];
|
||||
if (config.value?.document) {
|
||||
markdownToHtml.value = marked(config.value.document);
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
};
|
||||
columnsMQTT.value = [Group, ...ColumnsMQTT];
|
||||
columnsHTTP.value = [Group, ...ColumnsHTTP];
|
||||
if (config.value?.document) {
|
||||
markdownToHtml.value = marked(config.value.document);
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -904,7 +902,6 @@ const submitData = async () => {
|
|||
? await updateDevice(obj)
|
||||
: await saveDevice(obj);
|
||||
if (resp.status === 200) {
|
||||
|
||||
detail(productStore.current?.id || '').then((res) => {
|
||||
if (res.status === 200) {
|
||||
productStore.current = { ...res.result };
|
||||
|
@ -913,9 +910,8 @@ const submitData = async () => {
|
|||
}
|
||||
visible.value = false;
|
||||
queryParams.value = {};
|
||||
|
||||
});
|
||||
getData(obj.accessId);
|
||||
getData(obj.accessId);
|
||||
}
|
||||
} else {
|
||||
message.error('请选择接入方式');
|
||||
|
@ -935,47 +931,51 @@ const modifyArray = (oldData: any[], newData: any[]) => {
|
|||
*
|
||||
*/
|
||||
const getGuide = async (isDriver1: boolean = false) => {
|
||||
const res: any = await productGuide();
|
||||
if (res.result && res.result?.content === 'skip') {
|
||||
return;
|
||||
} else {
|
||||
if (isDriver1) {
|
||||
driver1.defineSteps(steps1);
|
||||
driver1.start();
|
||||
const res: any = await productGuide();
|
||||
if (res.result && res.result?.content === 'skip') {
|
||||
return;
|
||||
} else {
|
||||
driver.defineSteps(steps);
|
||||
driver.start();
|
||||
if (isDriver1) {
|
||||
driver1.defineSteps(steps1);
|
||||
driver1.start();
|
||||
} else {
|
||||
driver.defineSteps(steps);
|
||||
driver.start();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 查询保存数据信息
|
||||
*/
|
||||
const getData = async (accessId?: string) => {
|
||||
const _accessId = accessId || productStore.current?.accessId
|
||||
const _accessId = accessId || productStore.current?.accessId;
|
||||
if (productStore.current?.id) {
|
||||
getConfigMetadata(productStore.current?.id).then((resp: any) => {
|
||||
metadata.value = resp?.result[0] as ConfigMetadata || { properties: [] };
|
||||
if (accessId) { // 切换接入方式之后获取是否显示引导
|
||||
getGuide(!resp?.result.length) //
|
||||
}
|
||||
});
|
||||
getConfigMetadata(productStore.current?.id).then((resp: any) => {
|
||||
metadata.value = (resp?.result[0] as ConfigMetadata) || {
|
||||
properties: [],
|
||||
};
|
||||
if (accessId) {
|
||||
// 切换接入方式之后获取是否显示引导
|
||||
getGuide(resp?.result.length); //
|
||||
}
|
||||
});
|
||||
}
|
||||
if (_accessId) { // 有设备接入
|
||||
// const metadataResp = await getConfigMetadata(productStore.current!.id)
|
||||
// if (metadataResp.success) {
|
||||
// metadata.value = (metadataResp.result?.[0] as ConfigMetadata[]) || [];
|
||||
// }
|
||||
queryAccessDetail(_accessId);
|
||||
getConfigDetail(
|
||||
productStore.current?.messageProtocol || '',
|
||||
productStore.current?.transportProtocol || '',
|
||||
);
|
||||
getProviders().then((resp) => {
|
||||
if (resp.status === 200) {
|
||||
dataSource.value = resp.result;
|
||||
}
|
||||
});
|
||||
if (_accessId) {
|
||||
// 有设备接入
|
||||
// const metadataResp = await getConfigMetadata(productStore.current!.id)
|
||||
// if (metadataResp.success) {
|
||||
// metadata.value = (metadataResp.result?.[0] as ConfigMetadata[]) || [];
|
||||
// }
|
||||
queryAccessDetail(_accessId);
|
||||
getConfigDetail(
|
||||
productStore.current?.messageProtocol || '',
|
||||
productStore.current?.transportProtocol || '',
|
||||
);
|
||||
getProviders().then((resp) => {
|
||||
if (resp.status === 200) {
|
||||
dataSource.value = resp.result;
|
||||
}
|
||||
});
|
||||
}
|
||||
// else {
|
||||
// if (productStore.current?.id) {
|
||||
|
@ -1009,7 +1009,7 @@ const submitDevice = async () => {
|
|||
});
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功!');
|
||||
productStore.current!.storePolicy = storePolicy
|
||||
productStore.current!.storePolicy = storePolicy;
|
||||
if ((window as any).onTabSaveSuccess) {
|
||||
if (resp.result) {
|
||||
(window as any).onTabSaveSuccess(resp);
|
||||
|
@ -1041,14 +1041,14 @@ const add = () => {
|
|||
* 初始化
|
||||
*/
|
||||
watchEffect(() => {
|
||||
if (productStore.current?.storePolicy) {
|
||||
form.storePolicy = productStore.current!.storePolicy
|
||||
}
|
||||
})
|
||||
if (productStore.current?.storePolicy) {
|
||||
form.storePolicy = productStore.current!.storePolicy;
|
||||
}
|
||||
});
|
||||
|
||||
nextTick(() => {
|
||||
getData();
|
||||
})
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
:deep(
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
//引导页数据
|
||||
export const steps = [
|
||||
{
|
||||
element: '#rc-tabs-0-tab-Metadata',
|
||||
element: '.objectModel',
|
||||
popover: {
|
||||
id: 'driver',
|
||||
className: 'driver',
|
||||
title: `<div id='title'>配置物模型</div><div id='guide'>1/3</div>`,
|
||||
description: `配置产品物模型,实现设备在云端的功能描述。`,
|
||||
position: 'bottom',
|
||||
|
@ -40,7 +40,7 @@ export const steps1 = [
|
|||
},
|
||||
},
|
||||
{
|
||||
element: '#rc-tabs-0-tab-Metadata',
|
||||
element: '.objectModel',
|
||||
popover: {
|
||||
className: 'driver',
|
||||
title: `<div id='title'>配置物模型</div><div id='guide'>2/4</div>`,
|
||||
|
|
|
@ -141,6 +141,7 @@ const list = ref([
|
|||
{
|
||||
key: 'Metadata',
|
||||
tab: '物模型',
|
||||
class:'objectModel'
|
||||
},
|
||||
{
|
||||
key: 'Device',
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
<template>
|
||||
<page-container>
|
||||
<pro-search :columns="columns" target="iot-card-management-search" @search="handleSearch" />
|
||||
<j-pro-table ref="cardManageRef" :columns="columns" :request="query"
|
||||
<j-pro-table :scroll="{x: 1366}" ref="cardManageRef" :columns="columns" :request="query"
|
||||
:defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }" :rowSelection="{
|
||||
selectedRowKeys: _selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
|
@ -89,7 +89,7 @@
|
|||
<CardBox :value="slotProps" @click="handleClick" :actions="getActions(slotProps, 'card')" v-bind="slotProps"
|
||||
:active="_selectedRowKeys.includes(slotProps.id)" :status="slotProps.cardStateType.value"
|
||||
:statusText="slotProps.cardStateType.text" :statusNames="{
|
||||
using: 'success',
|
||||
using: 'processing',
|
||||
toBeActivated: 'default',
|
||||
deactivate: 'error',
|
||||
}">
|
||||
|
@ -114,12 +114,13 @@
|
|||
<div>{{ slotProps.cardType.text }}</div>
|
||||
</j-col>
|
||||
<j-col :span="6">
|
||||
<div class="card-item-content-text">提醒</div>
|
||||
<!-- <div>{{ slotProps.cardType.text }}</div> -->
|
||||
<div class="card-item-content-text">绑定设备</div>
|
||||
<div>{{ slotProps.deviceName }}</div>
|
||||
</j-col>
|
||||
</j-row>
|
||||
<j-divider style="margin: 12px 0" />
|
||||
<div v-if="slotProps.usedFlow === 0">
|
||||
<div class="content-bottom">
|
||||
<div v-if="slotProps.usedFlow === 0">
|
||||
<span class="flow-text">
|
||||
{{ slotProps.totalFlow }}
|
||||
</span>
|
||||
|
@ -130,7 +131,7 @@
|
|||
<div class="progress-text">
|
||||
<div>
|
||||
{{
|
||||
slotProps.totalFlow - slotProps.usedFlow
|
||||
(slotProps.usedFlow / slotProps.totalFlow * 100).toFixed(2)
|
||||
}}
|
||||
%
|
||||
</div>
|
||||
|
@ -138,9 +139,8 @@
|
|||
总共 {{ slotProps.totalFlow }} M
|
||||
</div>
|
||||
</div>
|
||||
<j-progress :strokeColor="'#ADC6FF'" :showInfo="false" :percent="
|
||||
slotProps.totalFlow - slotProps.usedFlow
|
||||
" />
|
||||
<j-progress :strokeColor="'#ADC6FF'" :showInfo="false" :percent="slotProps.usedFlow / slotProps.totalFlow * 100" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
|
@ -226,12 +226,20 @@
|
|||
{{ slotProps.cardType.text }}
|
||||
</template>
|
||||
<template #cardStateType="slotProps">
|
||||
{{ slotProps.cardStateType.text }}
|
||||
<BadgeStatus
|
||||
:status="slotProps.cardStateType?.value"
|
||||
:text="slotProps.cardStateType?.text"
|
||||
:statusNames="{
|
||||
using: 'processing',
|
||||
toBeActivated: 'default',
|
||||
deactivate: 'error',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<template #activationDate="slotProps">
|
||||
{{
|
||||
slotProps.activationDate
|
||||
? moment(slotProps.activationDate).format(
|
||||
? dayjs(slotProps.activationDate).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
: ''
|
||||
|
@ -240,7 +248,7 @@
|
|||
<template #updateTime="slotProps">
|
||||
{{
|
||||
slotProps.updateTime
|
||||
? moment(slotProps.updateTime).format(
|
||||
? dayjs(slotProps.updateTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
: ''
|
||||
|
@ -274,7 +282,7 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import type { ActionsType } from '@/components/Table';
|
||||
import moment from 'moment';
|
||||
import dayjs from 'dayjs';
|
||||
import {
|
||||
query,
|
||||
queryPlatformNoPage,
|
||||
|
@ -297,6 +305,8 @@ import Import from './Import.vue';
|
|||
import Export from './Export.vue';
|
||||
import Save from './Save.vue';
|
||||
import { useMenuStore } from 'store/menu'
|
||||
import BadgeStatus from '@/components/BadgeStatus/index.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const menuStory = useMenuStore()
|
||||
const cardManageRef = ref<Record<string, any>>({});
|
||||
|
@ -316,7 +326,7 @@ const columns = [
|
|||
title: '卡号',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
width: 300,
|
||||
width: 200,
|
||||
ellipsis: true,
|
||||
fixed: 'left',
|
||||
search: {
|
||||
|
@ -737,6 +747,10 @@ const handelRemove = async () => {
|
|||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
.content-bottom {
|
||||
height: 45px;
|
||||
}
|
||||
.flow-text {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
|
|
Loading…
Reference in New Issue