Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev
This commit is contained in:
100011797
commit
86cb742e48
|
|
@ -115,4 +115,10 @@ export const add = (data: any) => server.patch(`/network/card`, data);
|
|||
* 编辑物联卡
|
||||
* @param data
|
||||
*/
|
||||
export const edit = (data: any) => server.put(`/network/card/${data.id}`, data);
|
||||
export const edit = (data: any) => server.put(`/network/card/${data.id}`, data);
|
||||
|
||||
/**
|
||||
* 根据id查看详情
|
||||
* @param id
|
||||
*/
|
||||
export const queryDetail = (id: any) => server.get(`/network/card/${id}`);
|
||||
|
|
@ -145,6 +145,14 @@ export default [
|
|||
path: '/iot-card/CardManagement',
|
||||
component: () => import('@/views/iot-card/CardManagement/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/iot-card/CardManagement/Detail',
|
||||
component: () => import('@/views/iot-card/CardManagement/Detail/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/iot-card/Recharge',
|
||||
component: () => import('@/views/iot-card/Recharge/index.vue')
|
||||
},
|
||||
// 北向输出
|
||||
{
|
||||
path: '/northbound/DuerOS',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,167 @@
|
|||
<!-- 物联卡查看 -->
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<!-- 新增、编辑 -->
|
||||
<Save
|
||||
v-if="visible"
|
||||
:type="saveType"
|
||||
:data="current"
|
||||
@change="saveChange"
|
||||
/>
|
||||
<a-row :gutter="[24, 24]">
|
||||
<a-col :span="24">
|
||||
<a-card>
|
||||
<a-descriptions size="small" :column="3" bordered>
|
||||
<template #title>
|
||||
<span key="1">基本信息</span>
|
||||
<a-button
|
||||
key="2"
|
||||
type="link"
|
||||
@click="
|
||||
() => {
|
||||
visible = true;
|
||||
current = detail;
|
||||
saveType = 'edit';
|
||||
}
|
||||
"
|
||||
>
|
||||
<AIcon type="EditOutlined"></AIcon>
|
||||
编辑
|
||||
</a-button>
|
||||
</template>
|
||||
|
||||
<a-descriptions-item label="卡号">{{
|
||||
detail.id
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="ICCID">{{
|
||||
detail.iccId
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="绑定设备">{{
|
||||
detail.deviceName
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="平台类型">{{
|
||||
detail.operatorPlatformType?.text
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="平台名称">{{
|
||||
detail.platformConfigName
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="运营商">{{
|
||||
detail.operatorName
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="类型">{{
|
||||
detail.cardType?.text
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="激活日期">{{
|
||||
detail.activationDate
|
||||
? moment(detail.activationDate).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
: ''
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="更新时间">{{
|
||||
detail.updateTime
|
||||
? moment(detail.updateTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
: ''
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="总流量">{{
|
||||
detail.totalFlow
|
||||
? detail.totalFlow.toFixed(2) + ' M'
|
||||
: ''
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="使用流量">{{
|
||||
detail.usedFlow
|
||||
? detail.usedFlow.toFixed(2) + ' M'
|
||||
: ''
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="剩余流量">{{
|
||||
detail.residualFlow
|
||||
? detail.residualFlow.toFixed(2) + ' M'
|
||||
: ''
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="状态">{{
|
||||
detail?.cardState?.text
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="说明">{{
|
||||
detail?.describe
|
||||
}}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<!-- 流量统计 -->
|
||||
<a-row :gutter="40">
|
||||
<a-col :span="16">
|
||||
<div class="card">
|
||||
<Guide title="流量统计">
|
||||
<template #extra></template>
|
||||
</Guide>
|
||||
<LineChart
|
||||
:showX="true"
|
||||
:showY="true"
|
||||
style="min-height: 450px"
|
||||
:chartData="flowData"
|
||||
/>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<div class="card">
|
||||
<a-row :gutter="20">
|
||||
<a-col :span="24">
|
||||
<Guide title="数据统计" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import moment from 'moment';
|
||||
import type { CardManagement } from '../typing';
|
||||
import { queryDetail } from '@/api/iot-card/cardManagement';
|
||||
import Save from '../Save.vue';
|
||||
import Guide from '@/views/iot-card/components/Guide.vue';
|
||||
import LineChart from '@/views/iot-card/components/LineChart.vue';
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const visible = ref<boolean>(false);
|
||||
const current = ref<Partial<CardManagement>>({});
|
||||
const saveType = ref<string>('');
|
||||
const detail = ref<any>({});
|
||||
|
||||
const flowData = ref<any[]>([]);
|
||||
|
||||
const getDetail = () => {
|
||||
queryDetail(route.query.id).then((resp: any) => {
|
||||
if (resp.status === 200) {
|
||||
detail.value = resp.result;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 新增、编辑关闭弹窗
|
||||
* @param val 加载表格
|
||||
*/
|
||||
const saveChange = (val: any) => {
|
||||
visible.value = false;
|
||||
current.value = {};
|
||||
if (val) {
|
||||
getDetail();
|
||||
}
|
||||
};
|
||||
|
||||
getDetail();
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.card {
|
||||
padding: 24px;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -351,6 +351,8 @@ import Import from './Import.vue';
|
|||
import Export from './Export.vue';
|
||||
import Save from './Save.vue';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const cardManageRef = ref<Record<string, any>>({});
|
||||
const params = ref<Record<string, any>>({});
|
||||
const _selectedRowKeys = ref<string[]>([]);
|
||||
|
|
@ -535,6 +537,14 @@ const getActions = (
|
|||
title: '查看',
|
||||
},
|
||||
icon: 'EyeOutlined',
|
||||
onClick: () => {
|
||||
router.push({
|
||||
path: '/iot-card/CardManagement/Detail',
|
||||
query: {
|
||||
id: data.id,
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'bindDevice',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<!-- 充值管理 -->
|
||||
<template>
|
||||
<div class="page-container">充值管理</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
|
|
@ -120,15 +120,15 @@
|
|||
]
|
||||
"
|
||||
>
|
||||
<!-- <a-input
|
||||
<a-input
|
||||
v-model:value="
|
||||
formData.template.markdown?.title
|
||||
formData.template.markdown.title
|
||||
"
|
||||
placeholder="请输入标题"
|
||||
/> -->
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<!-- <template
|
||||
<template
|
||||
v-if="
|
||||
formData.template.messageType === 'link'
|
||||
"
|
||||
|
|
@ -141,7 +141,7 @@
|
|||
>
|
||||
<a-input
|
||||
v-model:value="
|
||||
formData.template.link?.title
|
||||
formData.template.link.title
|
||||
"
|
||||
placeholder="请输入标题"
|
||||
/>
|
||||
|
|
@ -149,21 +149,40 @@
|
|||
<a-form-item label="图片链接">
|
||||
<a-input
|
||||
v-model:value="
|
||||
formData.template.link?.picUrl
|
||||
formData.template.link.picUrl
|
||||
"
|
||||
placeholder="请输入图片链接"
|
||||
/>
|
||||
>
|
||||
<template #addonAfter>
|
||||
<a-upload
|
||||
name="file"
|
||||
:action="FILE_UPLOAD"
|
||||
:headers="{
|
||||
[TOKEN_KEY]:
|
||||
LocalStore.get(
|
||||
TOKEN_KEY,
|
||||
),
|
||||
}"
|
||||
:showUploadList="false"
|
||||
@change="
|
||||
(e) => handleChange(e)
|
||||
"
|
||||
>
|
||||
<AIcon type="UploadOutlined" />
|
||||
</a-upload>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="内容链接">
|
||||
<a-input
|
||||
v-model:value="
|
||||
formData.template.link
|
||||
?.messageUrl
|
||||
.messageUrl
|
||||
"
|
||||
placeholder="请输入内容链接"
|
||||
/>
|
||||
</a-form-item>
|
||||
</template> -->
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
<!-- 微信 -->
|
||||
|
|
@ -456,7 +475,7 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { getImage } from '@/utils/comm';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import { Form, UploadChangeParam } from 'ant-design-vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { IVariableDefinitions, TemplateFormData } from '../types';
|
||||
import {
|
||||
|
|
@ -475,6 +494,10 @@ import ToUser from './components/ToUser.vue';
|
|||
import ToOrg from './components/ToOrg.vue';
|
||||
import ToTag from './components/ToTag.vue';
|
||||
|
||||
import { FILE_UPLOAD } from '@/api/comm';
|
||||
import { LocalStore } from '@/utils/comm';
|
||||
import { TOKEN_KEY } from '@/utils/variable';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const useForm = Form.useForm;
|
||||
|
|
@ -495,12 +518,19 @@ const msgType = ref([
|
|||
|
||||
// 表单数据
|
||||
const formData = ref<TemplateFormData>({
|
||||
template: {},
|
||||
template: {
|
||||
subject: '',
|
||||
sendTo: [],
|
||||
attachments: [],
|
||||
message: '',
|
||||
text: '',
|
||||
},
|
||||
name: '',
|
||||
type: 'email',
|
||||
provider: 'embedded',
|
||||
description: '',
|
||||
variableDefinitions: [],
|
||||
configId: '',
|
||||
});
|
||||
|
||||
// 根据通知方式展示对应的字段
|
||||
|
|
@ -513,17 +543,22 @@ watch(
|
|||
formData.value.provider = msgType.value[0].value;
|
||||
// console.log('formData.value.template: ', formData.value.template);
|
||||
|
||||
formData.value.template =
|
||||
TEMPLATE_FIELD_MAP[val][formData.value.provider];
|
||||
|
||||
getConfigList();
|
||||
clearValid();
|
||||
},
|
||||
);
|
||||
|
||||
computed(() => {
|
||||
// console.log('formData.value.type: ', formData.value.type);
|
||||
Object.assign(
|
||||
formData.value.template,
|
||||
TEMPLATE_FIELD_MAP[formData.value.type][formData.value.provider],
|
||||
);
|
||||
});
|
||||
watch(
|
||||
() => formData.value.provider,
|
||||
(val) => {
|
||||
formData.value.template = TEMPLATE_FIELD_MAP[formData.value.type][val];
|
||||
|
||||
clearValid();
|
||||
},
|
||||
);
|
||||
|
||||
// 验证规则
|
||||
const formRules = ref({
|
||||
|
|
@ -557,14 +592,6 @@ const { resetFields, validate, validateInfos, clearValidate } = useForm(
|
|||
formData.value,
|
||||
formRules.value,
|
||||
);
|
||||
watch(
|
||||
() => formData.value.type,
|
||||
() => {
|
||||
formData.value.variableDefinitions = [];
|
||||
clearValidate();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => formData.value.template.message,
|
||||
|
|
@ -593,6 +620,13 @@ watch(
|
|||
{ deep: true },
|
||||
);
|
||||
|
||||
const clearValid = () => {
|
||||
setTimeout(() => {
|
||||
formData.value.variableDefinitions = [];
|
||||
clearValidate();
|
||||
}, 200);
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取详情
|
||||
*/
|
||||
|
|
@ -618,6 +652,15 @@ const getConfigList = async () => {
|
|||
};
|
||||
getConfigList();
|
||||
|
||||
/**
|
||||
* link消息类型 图片链接
|
||||
*/
|
||||
const handleChange = (info: UploadChangeParam) => {
|
||||
if (info.file.status === 'done') {
|
||||
formData.value.template.link.picUrl = info.file.response?.result;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 配置选择改变
|
||||
*/
|
||||
|
|
@ -653,9 +696,12 @@ getSignsList();
|
|||
*/
|
||||
const btnLoading = ref<boolean>(false);
|
||||
const handleSubmit = () => {
|
||||
if (formData.value.type === 'email') delete formData.value.configId;
|
||||
if (formData.value.template.messageType === 'markdown') delete formData.value.template.link
|
||||
if (formData.value.template.messageType === 'link') delete formData.value.template.markdown
|
||||
// console.log('formData.value: ', formData.value);
|
||||
validate()
|
||||
.then(async () => {
|
||||
// console.log('formData.value: ', formData.value);
|
||||
formData.value.template.ttsCode =
|
||||
formData.value.template.templateCode;
|
||||
btnLoading.value = true;
|
||||
|
|
@ -673,18 +719,20 @@ const handleSubmit = () => {
|
|||
})
|
||||
.catch((err) => {
|
||||
console.log('err: ', err);
|
||||
})
|
||||
.finally(() => {
|
||||
btnLoading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
// test
|
||||
watch(
|
||||
() => formData.value,
|
||||
(val) => {
|
||||
console.log('formData.value: ', val);
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
// watch(
|
||||
// () => formData.value,
|
||||
// (val) => {
|
||||
// console.log('formData.value: ', val);
|
||||
// },
|
||||
// { deep: true },
|
||||
// );
|
||||
// test
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue