Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev
This commit is contained in:
easy
commit
ff7de315c8
|
|
@ -1,17 +0,0 @@
|
|||
import server from '@/utils/request'
|
||||
|
||||
export const config = () => server.get(`/authorize/captcha/config`)
|
||||
|
||||
export const code = () => server.get(`/authorize/captcha/image?width=130&height=30`)
|
||||
|
||||
export const authLogin = (data) => server.post(`/authorize/login`, data)
|
||||
|
||||
export const getInitSet = () => server.get(`/user/settings/init`)
|
||||
|
||||
export const postInitSet = (data) => server.post(`/user/settings/init`, data)
|
||||
|
||||
export const systemVersion = () => server.get(`/system/version`)
|
||||
|
||||
export const bindInfo = () => server.get(`/application/sso/_all`)
|
||||
|
||||
export const settingDetail = (scopes) => server.get(`/system/config/${scopes}`)
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
import server from '@/utils/request'
|
||||
|
||||
/**
|
||||
* 获取验证码配置
|
||||
* @returns
|
||||
*/
|
||||
export const config = () => server.get(`/authorize/captcha/config`)
|
||||
|
||||
/**
|
||||
* 获取验证码图片
|
||||
* @returns
|
||||
*/
|
||||
export const code = () => server.get(`/authorize/captcha/image?width=130&height=30`)
|
||||
|
||||
/**
|
||||
* 登录
|
||||
* @returns
|
||||
*/
|
||||
export const authLogin = (data: any) => server.post(`/authorize/login`, data)
|
||||
|
||||
/**
|
||||
* 查询初始化配置信息
|
||||
* @returns
|
||||
*/
|
||||
export const getInitSet = () => server.get(`/user/settings/init`)
|
||||
|
||||
/**
|
||||
* 创建初始化配置信息
|
||||
* @returns
|
||||
*/
|
||||
export const postInitSet = (data: any) => server.post(`/user/settings/init`, data)
|
||||
|
||||
/**
|
||||
* 查询系统版本信息
|
||||
* @returns
|
||||
*/
|
||||
export const systemVersion = () => server.get(`/system/version`)
|
||||
|
||||
/**
|
||||
* 获取支持的SSO的应用
|
||||
* @returns
|
||||
*/
|
||||
export const bindInfo = () => server.get(`/application/sso/_all`)
|
||||
|
||||
/**
|
||||
* 查询配置信息
|
||||
* @returns
|
||||
*/
|
||||
export const settingDetail = (scopes: string) => server.get(`/system/config/${scopes}`)
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { patch, post, get } from '@/utils/request'
|
||||
import { patch, post, get, remove } from '@/utils/request'
|
||||
|
||||
export default {
|
||||
// 列表
|
||||
|
|
@ -8,5 +8,30 @@ export default {
|
|||
// 新增
|
||||
save: (data: any) => post(`/notifier/config`, data),
|
||||
// 修改
|
||||
update: (data: any) => patch(`/notifier/config`, data)
|
||||
update: (data: any) => patch(`/notifier/config`, data),
|
||||
del: (id: string) => remove(`/notifier/config/${id}`),
|
||||
getTemplate: (data: any, id: string) => post(`/notifier/template/${id}/_query`, data),
|
||||
getTemplateDetail: (id: string) => get(`/notifier/template/${id}/detail`),
|
||||
debug: (data: any, configId: string, templateId: string) => post(`/notifier/${configId}/${templateId}/_send`, data),
|
||||
getHistory: (data: any, id: string) => post(`/notify/history/config/${id}/_query`, data),
|
||||
// 获取所有平台用户
|
||||
getPlatformUsers: () => post(`/user/_query/no-paging`, { paging: false }),
|
||||
// 钉钉部门
|
||||
dingTalkDept: (id: string) => get(`/notifier/dingtalk/corp/${id}/departments/tree`),
|
||||
// 钉钉部门人员
|
||||
getDingTalkUsers: (configId: string, deptId: string) => get(`/notifier/dingtalk/corp/${configId}/${deptId}/users`),
|
||||
// 钉钉已经绑定的人员
|
||||
getDingTalkBindUsers: (id: string) => get(`/user/third-party/dingTalk_dingTalkMessage/${id}`),
|
||||
// 钉钉绑定用户
|
||||
dingTalkBindUser: (data: any, id: string) => patch(`/user/third-party/dingTalk_dingTalkMessage/${id}`, data),
|
||||
// 微信部门
|
||||
weChatDept: (id: string) => get(`/notifier/wechat/corp/${id}/departments`),
|
||||
// 微信部门人员
|
||||
getWeChatUsers: (configId: string, deptId: string) => get(`/notifier/wechat/corp/${configId}/${deptId}/users`),
|
||||
// 微信已经绑定的人员
|
||||
getWeChatBindUsers: (id: string) => get(`/user/third-party/weixin_corpMessage/${id}`),
|
||||
// 微信绑定用户
|
||||
weChatBindUser: (data: any, id: string) => patch(`/user/third-party/weixin_corpMessage/${id}`, data),
|
||||
// 解绑
|
||||
unBindUser: (data: any, id: string) => post(`/user/third-party/${id}/_unbind`, data)
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import { patch, post, get } from '@/utils/request'
|
||||
import { patch, post, get, remove } from '@/utils/request'
|
||||
import { BindConfig } from '@/views/notice/Template/types'
|
||||
|
||||
export default {
|
||||
// 列表
|
||||
|
|
@ -8,5 +9,19 @@ export default {
|
|||
// 新增
|
||||
save: (data: any) => post(`/notifier/template`, data),
|
||||
// 修改
|
||||
update: (data: any) => patch(`/notifier/template`, data)
|
||||
update: (data: any) => patch(`/notifier/template`, data),
|
||||
del: (id: any) => remove(`/notifier/template/${id}`),
|
||||
getConfig: (data: any) => post<BindConfig>(`/notifier/config/_query/no-paging?paging=false`, data),
|
||||
getTemplateDetail: (id: string) => get(`/notifier/template/${id}/detail`),
|
||||
debug: (data: any, configId: string, templateId: string) => post(`/notifier/${configId}/${templateId}/_send`, data),
|
||||
getHistory: (data: any, id: string) => post(`/notify/history/template/${id}/_query`, data),
|
||||
// 钉钉/微信, 根据配置获取部门和用户
|
||||
getDept: (type: string, id: string) => get(`/notifier/${type}/corp/${id}/departments`),
|
||||
getUser: (type: string, id: string) => get(`/notifier/${type}/corp/${id}/users`),
|
||||
// 微信获取标签推送
|
||||
getTags: (id: string) => get(`/notifier/wechat/corp/${id}/tags`),
|
||||
// 语音/短信获取阿里云模板
|
||||
getAliTemplate: (id: string) => get(`/notifier/sms/aliyun/${id}/templates`),
|
||||
// 短信获取签名
|
||||
getSigns: (id: string) => get(`/notifier/sms/aliyun/${id}/signs`)
|
||||
}
|
||||
|
|
@ -26,7 +26,8 @@ const iconKeys = [
|
|||
'ExportOutlined',
|
||||
'SyncOutlined',
|
||||
'ExclamationCircleOutlined',
|
||||
'UploadOutlined'
|
||||
'UploadOutlined',
|
||||
'QuestionCircleOutlined'
|
||||
]
|
||||
|
||||
const Icon = (props: {type: string}) => {
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ interface IOption {
|
|||
|
||||
type Emits = {
|
||||
(e: 'update:modelValue', data: string): void;
|
||||
(e: 'change') :void
|
||||
};
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
|
|
@ -41,7 +42,10 @@ const props = defineProps({
|
|||
|
||||
const myValue = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val),
|
||||
set: (val) => {
|
||||
emit('update:modelValue', val)
|
||||
emit('change')
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -120,9 +120,13 @@ export default [
|
|||
},
|
||||
// 物联卡 iot-card
|
||||
{
|
||||
path: '/iot-card/home',
|
||||
path: '/iot-card/Home',
|
||||
component: () => import('@/views/iot-card/Home/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/iot-card/Dashboard',
|
||||
component: () => import('@/views/iot-card/Dashboard/index.vue')
|
||||
},
|
||||
// 北向输出
|
||||
{
|
||||
path: '/northbound/DuerOS',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,323 @@
|
|||
<!-- 物联卡-仪表盘 -->
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<a-card>
|
||||
<a-row :gutter="20" :style="{ marginBottom: '20px' }">
|
||||
<a-col :span="24"><Guide title="数据统计" /></a-col>
|
||||
<a-col :span="8">
|
||||
<div class="data-statistics-item">
|
||||
<div class="info" style="width: 100%">
|
||||
<div class="label">昨日流量消耗</div>
|
||||
<a-tooltip placement="bottomLeft">
|
||||
<template #title>
|
||||
<span>{{ dayTotal }} M</span>
|
||||
</template>
|
||||
<div class="value">
|
||||
{{ dayTotal }}
|
||||
<span class="unit">M</span>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<LineChart color="#FBA500" :chartData="dayOptions" />
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<div class="data-statistics-item">
|
||||
<div class="info" style="width: 100%">
|
||||
<div class="label">当月流量消耗</div>
|
||||
<a-tooltip placement="bottomLeft">
|
||||
<template #title>
|
||||
<span>{{ monthTotal }} M</span>
|
||||
</template>
|
||||
<div class="value">
|
||||
{{ monthTotal }}
|
||||
<span class="unit">M</span>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<LineChart :chartData="monthOptions" />
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<div class="data-statistics-item">
|
||||
<div class="info" style="width: 100%">
|
||||
<div class="label">本年流量消耗</div>
|
||||
<a-tooltip placement="bottomLeft">
|
||||
<template #title>
|
||||
<span>{{ yearTotal }} M</span>
|
||||
</template>
|
||||
<div class="value">
|
||||
{{ yearTotal }}
|
||||
<span class="unit">M</span>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<LineChart color="#58E1D3" :chartData="yearOptions" />
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="20">
|
||||
<a-col :span="16">
|
||||
<Guide title="流量统计">
|
||||
<template #extra></template>
|
||||
</Guide>
|
||||
<LineChart
|
||||
:showX="true"
|
||||
:showY="true"
|
||||
style="min-height: 450px"
|
||||
:chartData="yearOptions"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<Guide title="流量使用TOP10">
|
||||
<template #extra></template>
|
||||
</Guide>
|
||||
<div class="rankingList" style="height: 400px">
|
||||
<div
|
||||
v-for="(item, index) in topList"
|
||||
:key="item.cardNum"
|
||||
class="rankItem"
|
||||
>
|
||||
<div
|
||||
class="number"
|
||||
:class="`number-item-${index + 1}`"
|
||||
>
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="cardNum">{{ item.cardNum }}</div>
|
||||
<div class="progress">
|
||||
<a-progress
|
||||
:strokeColor="'#ADC6FF'"
|
||||
:trailColor="'#E0E4E8'"
|
||||
:strokeLinecap="'butt'"
|
||||
:showInfo="false"
|
||||
:percent="
|
||||
Math.ceil((item.value / topTotal) * 100)
|
||||
"
|
||||
></a-progress>
|
||||
</div>
|
||||
<div class="total">
|
||||
{{ item?.value?.toFixed(2) }} M
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Guide from '../components/Guide.vue';
|
||||
import LineChart from '../components/LineChart.vue';
|
||||
import moment from 'moment';
|
||||
import { queryFlow } from '@/api/iot-card/home';
|
||||
|
||||
const dayTotal = ref(0);
|
||||
const monthTotal = ref(0);
|
||||
const yearTotal = ref(0);
|
||||
const dayOptions = ref<any[]>([]);
|
||||
const monthOptions = ref<any[]>([]);
|
||||
const yearOptions = ref<any[]>([]);
|
||||
|
||||
const flowData = ref<any[]>([]);
|
||||
const topList = ref<any[]>([]);
|
||||
const topTotal = ref(0);
|
||||
|
||||
const getData = (
|
||||
start: number,
|
||||
end: number,
|
||||
): Promise<{ sortArray: any[]; data: any[] }> => {
|
||||
return new Promise((resolve) => {
|
||||
queryFlow(start, end, {
|
||||
orderBy: 'date',
|
||||
}).then((resp: any) => {
|
||||
if (resp.status === 200) {
|
||||
const sortArray = resp.result.sort(
|
||||
(a: any, b: any) =>
|
||||
new Date(a.date).getTime() - new Date(b.date).getTime(),
|
||||
);
|
||||
resolve({
|
||||
sortArray,
|
||||
data: sortArray.map(
|
||||
(item: any) => item.value && item.value.toFixed(2),
|
||||
),
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 查询今日、当月、本年数据
|
||||
*/
|
||||
const getDataTotal = () => {
|
||||
const dTime = [
|
||||
moment(new Date()).startOf('day').valueOf(),
|
||||
moment(new Date()).endOf('day').valueOf(),
|
||||
];
|
||||
const mTime = [
|
||||
moment().startOf('month').valueOf(),
|
||||
moment().endOf('month').valueOf(),
|
||||
];
|
||||
const yTime = [
|
||||
moment().startOf('year').valueOf(),
|
||||
moment().endOf('year').valueOf(),
|
||||
];
|
||||
getData(dTime[0], dTime[1]).then((resp) => {
|
||||
dayTotal.value = resp.data
|
||||
.reduce((r, n) => r + Number(n), 0)
|
||||
.toFixed(2);
|
||||
dayOptions.value = resp.sortArray;
|
||||
});
|
||||
getData(mTime[0], mTime[1]).then((resp) => {
|
||||
monthTotal.value = resp.data
|
||||
.reduce((r, n) => r + Number(n), 0)
|
||||
.toFixed(2);
|
||||
monthOptions.value = resp.sortArray;
|
||||
});
|
||||
getData(yTime[0], yTime[1]).then((resp) => {
|
||||
yearTotal.value = resp.data
|
||||
.reduce((r, n) => r + Number(n), 0)
|
||||
.toFixed(2);
|
||||
yearOptions.value = resp.sortArray;
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 流量统计
|
||||
* @param data
|
||||
*/
|
||||
const getEcharts = (data: any) => {
|
||||
console.log(data);
|
||||
let startTime = data.time.start;
|
||||
let endTime = data.time.end;
|
||||
if (data.time.type === 'week' || data.time.type === 'month') {
|
||||
startTime = moment(data.time.start).startOf('days').valueOf();
|
||||
endTime = moment(data.time.end).startOf('days').valueOf();
|
||||
}
|
||||
getData(startTime, endTime).then((resp) => {
|
||||
flowData.value = resp.sortArray;
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 流量使用TOP10
|
||||
* @param star 开始时间
|
||||
* @param end 结束时间
|
||||
*/
|
||||
const getTopRang = (star: number, end: number) => {
|
||||
queryFlow(star, end, { orderBy: 'usage' }).then((resp: any) => {
|
||||
if (resp.status === 200) {
|
||||
const arr = resp.result
|
||||
.slice(0, 10)
|
||||
.sort((a: any, b: any) => b.value - a.value);
|
||||
topTotal.value = arr.length ? arr[0].value : 0;
|
||||
topList.value = arr;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
getDataTotal();
|
||||
|
||||
// getEcharts(data);
|
||||
|
||||
const dTime = [
|
||||
moment().subtract(6, 'days').startOf('day').valueOf(),
|
||||
moment().endOf('day').valueOf(),
|
||||
];
|
||||
getTopRang(dTime[0], dTime[1]);
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.page-container {
|
||||
.data-statistics-item {
|
||||
height: 140px;
|
||||
background: #fcfcfc;
|
||||
border: 1px solid #e0e4e8;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
|
||||
.info {
|
||||
// width: 180px;
|
||||
width: 28%;
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.64);
|
||||
}
|
||||
.value {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
.unit {
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rankingList {
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
list-style: none;
|
||||
|
||||
.rankItem {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
min-width: 0;
|
||||
padding: 12px 0;
|
||||
}
|
||||
.number {
|
||||
flex: 0 0 24px;
|
||||
height: 24px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
background-color: #d1d1d1;
|
||||
}
|
||||
|
||||
.number-item-1 {
|
||||
color: #e50012;
|
||||
background-color: rgba(#e50012, 0.1);
|
||||
}
|
||||
|
||||
.number-item-2 {
|
||||
color: #fba500;
|
||||
background-color: rgba(#fba500, 0.1);
|
||||
}
|
||||
|
||||
.number-item-3 {
|
||||
color: #597ef7;
|
||||
background-color: rgba(#597ef7, 0.1);
|
||||
}
|
||||
|
||||
.cardNum {
|
||||
flex: 0 0 100px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.progress {
|
||||
flex: 1 1 auto;
|
||||
margin: 0 8px;
|
||||
|
||||
:deep(.ant-progress-inner) {
|
||||
border-radius: 0px;
|
||||
}
|
||||
:deep(.ant-progress-bg) {
|
||||
border-radius: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.total {
|
||||
flex: 0 0 80px;
|
||||
color: #999;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
<template>
|
||||
<div class="chart" ref="chart"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
|
||||
const props = defineProps({
|
||||
// 图表颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#498BEF',
|
||||
},
|
||||
// 是否展示x轴
|
||||
showX: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 是否展示y轴
|
||||
showY: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 图表数据
|
||||
chartData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 绘制图表
|
||||
*/
|
||||
const createChart = () => {
|
||||
nextTick(() => {
|
||||
const myChart = echarts.init(proxy.$refs.chart);
|
||||
|
||||
const options = {
|
||||
grid: {
|
||||
left: '7%',
|
||||
right: '5%',
|
||||
top: '5%',
|
||||
bottom: '5%',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
// formatter: '{a}<br>{b}: {c}',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
show: props.showX,
|
||||
boundaryGap: false,
|
||||
data: props.chartData.map((m: any) => m.date),
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
show: props.showY,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dotted',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '流量消耗',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
showSymbol: false,
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: props.color,
|
||||
lineStyle: {
|
||||
color: props.color,
|
||||
width: 1,
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 0.1,
|
||||
color: '#fff',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: props.color,
|
||||
},
|
||||
],
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
data: props.chartData.map(
|
||||
(m: any) => m.value && m.value.toFixed(2),
|
||||
),
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(options);
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.chartData,
|
||||
() => createChart(),
|
||||
{ immediate: true, deep: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<!-- webhook请求头可编辑表格 -->
|
||||
<!-- 附件信息 -->
|
||||
<template>
|
||||
<div class="attachment-wrapper">
|
||||
<div
|
||||
|
|
@ -15,13 +15,16 @@
|
|||
[TOKEN_KEY]: LocalStore.get(TOKEN_KEY),
|
||||
}"
|
||||
:showUploadList="false"
|
||||
@change="handleChange"
|
||||
@change="(e) => handleChange(e, item.id)"
|
||||
>
|
||||
<upload-outlined />
|
||||
</a-upload>
|
||||
</template>
|
||||
</a-input>
|
||||
<delete-outlined @click="handleDelete" style="cursor: pointer" />
|
||||
<delete-outlined
|
||||
@click="handleDelete(item.id)"
|
||||
style="cursor: pointer"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<a-button
|
||||
|
|
@ -62,35 +65,65 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const handleChange = (info: UploadChangeParam) => {
|
||||
if (info.file.status === 'done') {
|
||||
const result = info.file.response?.result;
|
||||
console.log('result: ', result);
|
||||
}
|
||||
};
|
||||
// const fileList = computed({
|
||||
// get: () => props.attachments.map((m) => ({ id: fileId(), ...m })),
|
||||
// set: (val) =>
|
||||
// emit(
|
||||
// 'update:attachments',
|
||||
// val.map(({ name, location }) => ({ name, location })),
|
||||
// ),
|
||||
// });
|
||||
|
||||
const fileList = ref<IAttachments[]>([]);
|
||||
|
||||
watch(
|
||||
() => props.attachments,
|
||||
(val) => {
|
||||
fileList.value = val;
|
||||
fileList.value = val.map((m) => ({
|
||||
id: fileId(),
|
||||
...m,
|
||||
}));
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
const handleDelete = (id: number) => {
|
||||
const idx = fileList.value.findIndex((f) => f.id === id);
|
||||
fileList.value.splice(idx, 1);
|
||||
emit('update:attachments', fileList.value);
|
||||
const handleChange = (info: UploadChangeParam, id: string | undefined) => {
|
||||
if (info.file.status === 'done') {
|
||||
const targetFileIdx = fileList.value.findIndex((f) => f.id === id);
|
||||
fileList.value[targetFileIdx].name = info.file.name;
|
||||
fileList.value[targetFileIdx].location = info.file.response?.result;
|
||||
emit(
|
||||
'update:attachments',
|
||||
fileList.value.map(({ name, location }) => ({ name, location })),
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除附件
|
||||
* @param id
|
||||
*/
|
||||
const handleDelete = (id: string | undefined) => {
|
||||
const idx = fileList.value.findIndex((f) => f.id === id);
|
||||
|
||||
fileList.value.splice(idx, 1);
|
||||
};
|
||||
|
||||
/**
|
||||
* 添加附件
|
||||
*/
|
||||
const handleAdd = () => {
|
||||
fileList.value.push({
|
||||
id: fileList.value.length,
|
||||
id: fileId(),
|
||||
name: '',
|
||||
location: '',
|
||||
});
|
||||
emit('update:attachments', fileList.value);
|
||||
};
|
||||
|
||||
/**
|
||||
* 附件标识
|
||||
*/
|
||||
const fileId = () => String(new Date().getTime() + Math.random() * 9);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,136 @@
|
|||
<!-- 模板内容-变量列表 -->
|
||||
<template>
|
||||
<div class="table-wrapper">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="dataSource"
|
||||
bordered
|
||||
:pagination="false"
|
||||
>
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<span v-if="column.dataIndex === 'id'">
|
||||
{{ record[column.dataIndex] }}
|
||||
</span>
|
||||
<a-input
|
||||
v-if="column.dataIndex === 'name'"
|
||||
v-model:value="record.name"
|
||||
/>
|
||||
<a-select
|
||||
v-if="column.dataIndex === 'type'"
|
||||
v-model:value="record.type"
|
||||
@change="handleTypeChange(record)"
|
||||
>
|
||||
<a-select-option value="string">字符串</a-select-option>
|
||||
<a-select-option value="date">时间</a-select-option>
|
||||
<a-select-option value="double">数字</a-select-option>
|
||||
</a-select>
|
||||
<template v-if="column.dataIndex === 'format'">
|
||||
<span v-if="record.type === 'string'">
|
||||
{{ record.format }}
|
||||
</span>
|
||||
<a-select
|
||||
v-if="record.type === 'date'"
|
||||
v-model:value="record.format"
|
||||
>
|
||||
<a-select-option value="timestamp">
|
||||
timestamp
|
||||
</a-select-option>
|
||||
<a-select-option value="yyyy-MM-dd">
|
||||
yyyy-MM-dd
|
||||
</a-select-option>
|
||||
<a-select-option value="yyyy-MM-dd HH:mm:ss">
|
||||
yyyy-MM-dd HH:mm:ss
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<a-input
|
||||
v-if="record.type === 'double'"
|
||||
v-model:value="record.format"
|
||||
>
|
||||
<template #suffix>
|
||||
<a-tooltip
|
||||
title="格式为：%.xf x代表数字保留的小数位数。当x=0时,代表格式为整数"
|
||||
>
|
||||
<AIcon type="QuestionCircleOutlined" />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</a-input>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue';
|
||||
|
||||
interface IVariable {
|
||||
id: string;
|
||||
name: string;
|
||||
type: string;
|
||||
format: string;
|
||||
}
|
||||
|
||||
type Emits = {
|
||||
(e: 'update:variableDefinitions', data: IVariable[]): void;
|
||||
};
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const props = defineProps({
|
||||
variableDefinitions: {
|
||||
type: Array as PropType<IVariable[]>,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '变量',
|
||||
dataIndex: 'id',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
// width: 160,
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'type',
|
||||
// width: 160,
|
||||
},
|
||||
{
|
||||
title: '格式',
|
||||
dataIndex: 'format',
|
||||
width: 150,
|
||||
},
|
||||
];
|
||||
|
||||
const dataSource = computed({
|
||||
get: () => props.variableDefinitions,
|
||||
set: (val) => emit('update:variableDefinitions', val),
|
||||
});
|
||||
|
||||
watch(
|
||||
() => dataSource.value,
|
||||
(val) => {
|
||||
emit('update:variableDefinitions', val);
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
const handleTypeChange = (record: IVariable) => {
|
||||
switch (record.type) {
|
||||
case 'string':
|
||||
record.format = '%s';
|
||||
break;
|
||||
case 'date':
|
||||
record.format = 'timestamp';
|
||||
break;
|
||||
case 'double':
|
||||
record.format = '%.0f';
|
||||
break;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -39,6 +39,7 @@
|
|||
<RadioCard
|
||||
:options="msgType"
|
||||
v-model="formData.provider"
|
||||
@change="getConfigList"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
|
|
@ -51,11 +52,11 @@
|
|||
placeholder="请选择绑定配置"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="(item, index) in ROBOT_MSG_TYPE"
|
||||
v-for="(item, index) in configList"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
:value="item.id"
|
||||
>
|
||||
{{ item.label }}
|
||||
{{ item.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
|
@ -120,8 +121,7 @@
|
|||
>
|
||||
<!-- <a-input
|
||||
v-model:value="
|
||||
formData.template.markdown
|
||||
?.title
|
||||
formData.template.markdown?.title
|
||||
"
|
||||
placeholder="请输入标题"
|
||||
/> -->
|
||||
|
|
@ -246,17 +246,11 @@
|
|||
</a-form-item>
|
||||
<a-form-item label="收件人">
|
||||
<a-select
|
||||
mode="tags"
|
||||
:options="[]"
|
||||
v-model:value="formData.template.sendTo"
|
||||
placeholder="请选择收件人"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="(item, index) in ROBOT_MSG_TYPE"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="附件信息">
|
||||
<Attachments
|
||||
|
|
@ -418,6 +412,34 @@
|
|||
</div>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<a-form-item
|
||||
label="模版内容"
|
||||
v-if="
|
||||
formData.type !== 'sms' &&
|
||||
formData.type !== 'webhook'
|
||||
"
|
||||
>
|
||||
<a-textarea
|
||||
v-model:value="formData.template.message"
|
||||
:maxlength="200"
|
||||
:rows="5"
|
||||
placeholder="变量格式:${name};
|
||||
示例:尊敬的${name},${time}有设备触发告警,请注意处理"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="变量列表"
|
||||
v-if="
|
||||
formData.variableDefinitions &&
|
||||
formData.variableDefinitions.length
|
||||
"
|
||||
>
|
||||
<VariableDefinitions
|
||||
v-model:variableDefinitions="
|
||||
formData.variableDefinitions
|
||||
"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="说明">
|
||||
<a-textarea
|
||||
v-model:value="formData.description"
|
||||
|
|
@ -462,7 +484,8 @@ import {
|
|||
import templateApi from '@/api/notice/template';
|
||||
import Doc from './doc/index';
|
||||
import MonacoEditor from '@/components/MonacoEditor/index.vue';
|
||||
import Attachments from './components/Attachments.vue'
|
||||
import Attachments from './components/Attachments.vue';
|
||||
import VariableDefinitions from './components/VariableDefinitions.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
|
@ -500,12 +523,14 @@ watch(
|
|||
msgType.value = MSG_TYPE[val];
|
||||
|
||||
formData.value.provider = msgType.value[0].value;
|
||||
console.log('formData.value.template: ', formData.value.template);
|
||||
// console.log('formData.value.template: ', formData.value.template);
|
||||
|
||||
getConfigList();
|
||||
},
|
||||
);
|
||||
|
||||
computed(() => {
|
||||
console.log('formData.value.type: ', formData.value.type);
|
||||
// console.log('formData.value.type: ', formData.value.type);
|
||||
Object.assign(
|
||||
formData.value.template,
|
||||
TEMPLATE_FIELD_MAP[formData.value.type][formData.value.provider],
|
||||
|
|
@ -547,11 +572,42 @@ const { resetFields, validate, validateInfos, clearValidate } = useForm(
|
|||
watch(
|
||||
() => formData.value.type,
|
||||
() => {
|
||||
formData.value.variableDefinitions = [];
|
||||
clearValidate();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => formData.value.template.message,
|
||||
(val) => {
|
||||
if (!val) return;
|
||||
// 已经存在的变量
|
||||
const oldKey = formData.value.variableDefinitions?.map((m) => m.id);
|
||||
// 正则提取${}里面的值
|
||||
const pattern = /(?<=\$\{).*?(?=\})/g;
|
||||
const titleList = val.match(pattern)?.filter((f) => f);
|
||||
const newKey = [...new Set(titleList)];
|
||||
const result = newKey?.map((m) =>
|
||||
oldKey.includes(m)
|
||||
? formData.value.variableDefinitions.find(
|
||||
(item) => item.id === m,
|
||||
)
|
||||
: {
|
||||
id: m,
|
||||
name: '',
|
||||
type: 'string',
|
||||
format: '%s',
|
||||
},
|
||||
);
|
||||
formData.value.variableDefinitions = result;
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
/**
|
||||
* 获取详情
|
||||
*/
|
||||
const getDetail = async () => {
|
||||
const res = await templateApi.detail(route.params.id as string);
|
||||
// console.log('res: ', res);
|
||||
|
|
@ -560,6 +616,20 @@ const getDetail = async () => {
|
|||
};
|
||||
// getDetail();
|
||||
|
||||
/**
|
||||
* 获取绑定配置
|
||||
*/
|
||||
const configList = ref();
|
||||
const getConfigList = async () => {
|
||||
const terms = [
|
||||
{ column: 'type$IN', value: formData.value.type },
|
||||
{ column: 'provider', value: formData.value.provider },
|
||||
];
|
||||
const { result } = await templateApi.getConfig({ terms });
|
||||
configList.value = result;
|
||||
};
|
||||
getConfigList();
|
||||
|
||||
/**
|
||||
* 表单提交
|
||||
*/
|
||||
|
|
@ -567,25 +637,35 @@ const btnLoading = ref<boolean>(false);
|
|||
const handleSubmit = () => {
|
||||
validate()
|
||||
.then(async () => {
|
||||
console.log('formData.value: ', formData.value);
|
||||
// console.log('formData.value: ', formData.value);
|
||||
btnLoading.value = true;
|
||||
// let res;
|
||||
// if (!formData.value.id) {
|
||||
// res = await templateApi.save(formData.value);
|
||||
// } else {
|
||||
// res = await templateApi.update(formData.value);
|
||||
// }
|
||||
// // console.log('res: ', res);
|
||||
// if (res?.success) {
|
||||
// message.success('保存成功');
|
||||
// router.back();
|
||||
// }
|
||||
btnLoading.value = false;
|
||||
let res;
|
||||
if (!formData.value.id) {
|
||||
res = await templateApi.save(formData.value);
|
||||
} else {
|
||||
res = await templateApi.update(formData.value);
|
||||
}
|
||||
// console.log('res: ', res);
|
||||
if (res?.success) {
|
||||
message.success('保存成功');
|
||||
router.back();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('err: ', err);
|
||||
btnLoading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
// test
|
||||
watch(
|
||||
() => formData.value,
|
||||
(val) => {
|
||||
console.log('formData.value: ', val);
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
// test
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ export interface IHeaders {
|
|||
interface IAttachments {
|
||||
location: string;
|
||||
name: string;
|
||||
id?: number;
|
||||
id?: string;
|
||||
}
|
||||
interface IVariableDefinitions {
|
||||
id: string;
|
||||
|
|
@ -16,6 +16,17 @@ interface IVariableDefinitions {
|
|||
format: string;
|
||||
}
|
||||
|
||||
interface IMarkDown {
|
||||
text: string;
|
||||
title: string;
|
||||
}
|
||||
interface ILink {
|
||||
title: string;
|
||||
picUrl: string;
|
||||
messageUrl: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
export type TemplateFormData = {
|
||||
template: {
|
||||
// 钉钉消息
|
||||
|
|
@ -23,16 +34,8 @@ export type TemplateFormData = {
|
|||
message?: string;
|
||||
// 钉钉机器人
|
||||
messageType?: string;
|
||||
markdown?: {
|
||||
text: string;
|
||||
title: string;
|
||||
};
|
||||
link?: {
|
||||
title: string;
|
||||
picUrl: string;
|
||||
messageUrl: string;
|
||||
text: string;
|
||||
};
|
||||
markdown?: IMarkDown;
|
||||
link?: ILink;
|
||||
// 微信
|
||||
// agentId?: string;
|
||||
// message?: string;
|
||||
|
|
@ -71,4 +74,24 @@ export type TemplateFormData = {
|
|||
creatorId?: string;
|
||||
createTime?: number;
|
||||
configId?: string;
|
||||
};
|
||||
};
|
||||
|
||||
// 绑定配置类型
|
||||
export type config = {
|
||||
host: string;
|
||||
password: string;
|
||||
port: number;
|
||||
sender: string;
|
||||
ssl: boolean;
|
||||
username: string;
|
||||
}
|
||||
export type BindConfig = {
|
||||
configuration: config;
|
||||
createTime: number
|
||||
creatorId: string;
|
||||
id: string;
|
||||
maxRetryTimes: number;
|
||||
name: string;
|
||||
provider: string;
|
||||
type: string
|
||||
}
|
||||
|
|
@ -83,19 +83,20 @@
|
|||
]"
|
||||
>
|
||||
<a-input
|
||||
class="login-code-input"
|
||||
v-model:value="form.verifyCode"
|
||||
autocomplete="off"
|
||||
:maxlength="64"
|
||||
placeholder="请输入验证码"
|
||||
></a-input>
|
||||
<div class="login-code">
|
||||
<img
|
||||
:src="codeUrl"
|
||||
@click="getCode()"
|
||||
class="login-code-img"
|
||||
/>
|
||||
</div>
|
||||
>
|
||||
<template #addonAfter>
|
||||
<div>
|
||||
<img
|
||||
:src="codeUrl"
|
||||
@click="getCode()"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
name="remember"
|
||||
|
|
@ -103,7 +104,14 @@
|
|||
>
|
||||
<a-checkbox
|
||||
v-model:checked="form.remember"
|
||||
>记住密码</a-checkbox
|
||||
@change="
|
||||
() =>
|
||||
(form.expires =
|
||||
form.remember
|
||||
? -1
|
||||
: 3600000)
|
||||
"
|
||||
>记住我</a-checkbox
|
||||
>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
|
|
@ -180,7 +188,6 @@ import {
|
|||
bindInfo,
|
||||
settingDetail,
|
||||
} from '@/api/login';
|
||||
import Cookies from 'js-cookie';
|
||||
import { useUserInfo } from '@/store/userInfo';
|
||||
import { LocalStore } from '@/utils/comm';
|
||||
import { BASE_API_PATH, TOKEN_KEY, Version_Code } from '@/utils/variable';
|
||||
|
|
@ -220,34 +227,24 @@ iconMap.set('dingtalk-ent-app', getImage('/bind/dingtalk.png'));
|
|||
iconMap.set('wechat-webapp', getImage('/bind/wechat-webapp.png'));
|
||||
|
||||
const onFinish = async () => {
|
||||
form.remember
|
||||
? Cookies.set('user', encodeURIComponent(JSON.stringify(form)), {
|
||||
expires: 7,
|
||||
})
|
||||
: Cookies.remove('user');
|
||||
Cookies.set('username', form.username, { expires: 30 });
|
||||
try {
|
||||
loading.value = true;
|
||||
const res: any = await authLogin(form);
|
||||
loading.value = false;
|
||||
if (res.success) {
|
||||
store.$patch({
|
||||
...res.result,
|
||||
username: form.username,
|
||||
});
|
||||
LocalStore.set(TOKEN_KEY, res?.result.token);
|
||||
// if (res.result.username === 'admin') {
|
||||
// const resp: any = await getInitSet();
|
||||
// if (resp.status === 200 && !resp.result.length) {
|
||||
// window.location.href = '/#/init-home';
|
||||
// return;
|
||||
// }
|
||||
// }
|
||||
// window.location.href = '/';
|
||||
|
||||
const resp: any = await getInitSet();
|
||||
if (resp.success) {
|
||||
router.push('/demo');
|
||||
if (res.result.username === 'admin') {
|
||||
const resp: any = await getInitSet();
|
||||
if (resp.status === 200 && !resp.result.length) {
|
||||
window.location.href = '/#/init-home';
|
||||
return;
|
||||
}
|
||||
}
|
||||
window.location.href = '/';
|
||||
}
|
||||
} catch (error) {
|
||||
form.verifyCode = '';
|
||||
|
|
@ -269,14 +266,6 @@ const getCode = async () => {
|
|||
}
|
||||
};
|
||||
|
||||
const getCookie = () => {
|
||||
// form.username = Cookies.get('username');
|
||||
if (!Cookies.get('user')) return;
|
||||
const user = JSON.parse(decodeURIComponent(Cookies.get('user')));
|
||||
form.username = user.username;
|
||||
form.password = user.password;
|
||||
form.remember = user.remember || false;
|
||||
};
|
||||
|
||||
const getOpen = () => {
|
||||
LocalStore.removeAll();
|
||||
|
|
@ -292,7 +281,7 @@ const getOpen = () => {
|
|||
}
|
||||
}
|
||||
});
|
||||
settingDetail('front').then((res) => {
|
||||
settingDetail('front').then((res: any) => {
|
||||
if (res.status === 200) {
|
||||
const ico: any = document.querySelector('link[rel="icon"]');
|
||||
ico.href = res.result.ico;
|
||||
|
|
@ -337,7 +326,6 @@ watch(
|
|||
|
||||
getOpen();
|
||||
getCode();
|
||||
getCookie();
|
||||
screenRotation(screenWidth.value, screenHeight.value);
|
||||
</script>
|
||||
|
||||
|
|
@ -470,23 +458,9 @@ screenRotation(screenWidth.value, screenHeight.value);
|
|||
}
|
||||
|
||||
.verifyCode {
|
||||
.login-code-input {
|
||||
width: 70%;
|
||||
float: left;
|
||||
}
|
||||
.login-code {
|
||||
width: 30%;
|
||||
height: 32px;
|
||||
float: left;
|
||||
background-color: #e4e6e7;
|
||||
img {
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.login-code-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
img {
|
||||
cursor: pointer;
|
||||
// vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue