|
@@ -1,11 +1,11 @@
|
|
|
<template>
|
|
|
<div class="system-add-user-container">
|
|
|
- <el-dialog title="数据源配置接口" v-model="isShowDialog" width="569px">
|
|
|
+ <el-dialog title="数据源配置接口" v-model="isShowDialog" width="650px">
|
|
|
<el-form :model="ruleForm" ref="ruleFormRef" :rules="rules" size="default" label-width="90px">
|
|
|
<el-row :gutter="35">
|
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
|
|
<el-form-item label="指标名称:">
|
|
|
- {{ruleForm.target}}
|
|
|
+ {{ ruleForm.target }}
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
|
@@ -19,23 +19,123 @@
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
|
|
- <el-form-item label="取值周期:" prop="get_time">
|
|
|
+ <el-form-item class="inline-row" label="取值周期:" prop="get_time">
|
|
|
<el-input v-model="ruleForm.get_time" placeholder="请输入取值周期" clearable></el-input>
|
|
|
+ <div class="tip" @click="isShow=!isShow" >
|
|
|
+ <span v-if="!isShow" class="ico_down"></span>
|
|
|
+ <span v-else class="ico_up"></span>
|
|
|
+ 帮助
|
|
|
+ </div>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
+ <div class="help-wrap" v-if="isShow">
|
|
|
+ <div class="help-item">
|
|
|
+ <div class="help-item-label">CRON表达式</div>
|
|
|
+ <div class="help-item-content">取值周期填写说明 eg:0 0 0 1 * * 每月一号执行一次</div>
|
|
|
+ </div>
|
|
|
+ <div class="help-item">
|
|
|
+ <div class="help-item-label">CRON字段</div>
|
|
|
+ <div class="help-item-content">
|
|
|
+ <div class="ant-row">
|
|
|
+ <div class="ant-col ant-col-6">字段</div>
|
|
|
+ <div class="ant-col ant-col-6">允许值</div>
|
|
|
+ <div class="ant-col ant-col-6">允许特殊字符</div>
|
|
|
+ </div>
|
|
|
+ <div class="ant-row">
|
|
|
+ <div class="ant-col ant-col-6">-------------------</div>
|
|
|
+ <div class="ant-col ant-col-6">-------------------</div>
|
|
|
+ <div class="ant-col ant-col-6">-------------------</div>
|
|
|
+ </div>
|
|
|
+ <div class="ant-row">
|
|
|
+ <div class="ant-col ant-col-6">Seconds</div>
|
|
|
+ <div class="ant-col ant-col-6">0-59</div>
|
|
|
+ <div class="ant-col ant-col-6">* / , -</div>
|
|
|
+ </div>
|
|
|
+ <div class="ant-row">
|
|
|
+ <div class="ant-col ant-col-6">Minutes</div>
|
|
|
+ <div class="ant-col ant-col-6">0-59</div>
|
|
|
+ <div class="ant-col ant-col-6">* / , -</div>
|
|
|
+ </div>
|
|
|
+ <div class="ant-row">
|
|
|
+ <div class="ant-col ant-col-6">Hours</div>
|
|
|
+ <div class="ant-col ant-col-6">0-23</div>
|
|
|
+ <div class="ant-col ant-col-6">* / , -</div>
|
|
|
+ </div>
|
|
|
+ <div class="ant-row">
|
|
|
+ <div class="ant-col ant-col-6">Day</div>
|
|
|
+ <div class="ant-col ant-col-6">1-31</div>
|
|
|
+ <div class="ant-col ant-col-6">* / , - ?</div>
|
|
|
+ </div>
|
|
|
+ <div class="ant-row">
|
|
|
+ <div class="ant-col ant-col-6">Month</div>
|
|
|
+ <div class="ant-col ant-col-6">1-12 or JAN-DEC</div>
|
|
|
+ <div class="ant-col ant-col-6">* / , -</div>
|
|
|
+ </div>
|
|
|
+ <div class="ant-row">
|
|
|
+ <div class="ant-col ant-col-6">Week</div>
|
|
|
+ <div class="ant-col ant-col-6">0-6 or SUN-SAT</div>
|
|
|
+ <div class="ant-col ant-col-6">* / , - ?</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="help-item">
|
|
|
+ <div class="help-item-label">特殊字符</div>
|
|
|
+ <div class="help-item-content">
|
|
|
+ "*":当前字段所有的值 eg:第二字段*表示每分钟<br />"/":描述范围的增量 eg:第二字段0-59/15表示每15分钟<br />",":分隔列表的项目
|
|
|
+ eg:第五字段1,3表示每周1,3执行<br />"-":连字符用于定义范围 eg:第三字段1-3表每天1到3点(含3点)<br />"?":设置当前字段为空<br />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="help-item">
|
|
|
+ <div class="help-item-label">预定义</div>
|
|
|
+ <div class="help-item-content">
|
|
|
+ <div class="ant-row">
|
|
|
+ <div class="ant-col ant-col-8">字段</div>
|
|
|
+ <div class="ant-col ant-col-16">说明</div>
|
|
|
+ </div>
|
|
|
+ <div class="ant-row">
|
|
|
+ <div class="ant-col ant-col-8">----------------------------</div>
|
|
|
+ <div class="ant-col ant-col-16">---------------------------</div>
|
|
|
+ </div>
|
|
|
+ <div class="ant-row">
|
|
|
+ <div class="ant-col ant-col-8">@yearly or @annually</div>
|
|
|
+ <div class="ant-col ant-col-16">每年1月1日午夜运行一次</div>
|
|
|
+ </div>
|
|
|
+ <div class="ant-row">
|
|
|
+ <div class="ant-col ant-col-8">@monthly</div>
|
|
|
+ <div class="ant-col ant-col-16">每月一次,每月午夜运行一次</div>
|
|
|
+ </div>
|
|
|
+ <div class="ant-row">
|
|
|
+ <div class="ant-col ant-col-8">@weekly</div>
|
|
|
+ <div class="ant-col ant-col-16">每周运行一次,在星期六/星期日之间的午夜</div>
|
|
|
+ </div>
|
|
|
+ <div class="ant-row">
|
|
|
+ <div class="ant-col ant-col-8">@daily or @midnight</div>
|
|
|
+ <div class="ant-col ant-col-16">每天半夜运行</div>
|
|
|
+ </div>
|
|
|
+ <div class="ant-row">
|
|
|
+ <div class="ant-col ant-col-8">@hourly</div>
|
|
|
+ <div class="ant-col ant-col-16">每小时运行一次</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
|
|
<el-form-item label="是否启用:">
|
|
|
- <el-radio-group v-model="ruleForm.state" class="ml-4">
|
|
|
+ <el-radio-group v-model="ruleForm.state" class="ml-4">
|
|
|
<el-radio size="large" :label="1">启用</el-radio>
|
|
|
<el-radio size="large" :label="2">禁用</el-radio>
|
|
|
</el-radio-group>
|
|
|
- <el-button style="margin-left: 20px;" size="small" type="primary">检测</el-button>
|
|
|
+ <el-button v-if="ruleForm.uri&&ruleForm.object" @click="test" style="margin-left: 20px" size="small" type="primary">检测</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col v-if="testRes || testRes.toString()" :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
|
|
+ <el-form-item label="测试结果:">
|
|
|
+ <span>数据源返回数据值:{{testRes}}</span>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
</el-form>
|
|
|
<template #footer>
|
|
|
<span class="dialog-footer">
|
|
@@ -49,13 +149,11 @@
|
|
|
|
|
|
<script lang="ts">
|
|
|
import { reactive, toRefs, onMounted, defineComponent, ref } from 'vue';
|
|
|
-import type { FormInstance, FormRules } from 'element-plus'
|
|
|
+import type { FormInstance, FormRules } from 'element-plus';
|
|
|
import { ElMessage } from 'element-plus';
|
|
|
|
|
|
import api from '/@/api/assess';
|
|
|
|
|
|
-
|
|
|
-
|
|
|
// 定义接口来定义对象的类型
|
|
|
interface RuleFormRow {
|
|
|
target: string;
|
|
@@ -63,10 +161,15 @@ interface RuleFormRow {
|
|
|
state: number;
|
|
|
object: string;
|
|
|
get_time: string;
|
|
|
+
|
|
|
}
|
|
|
interface ItemState {
|
|
|
isShowDialog: boolean;
|
|
|
ruleForm: RuleFormRow;
|
|
|
+ status: number;
|
|
|
+ item_code: string;
|
|
|
+ isShow: boolean;
|
|
|
+ testRes: string;
|
|
|
}
|
|
|
|
|
|
export default defineComponent({
|
|
@@ -75,70 +178,103 @@ export default defineComponent({
|
|
|
const state = reactive<ItemState>({
|
|
|
isShowDialog: false,
|
|
|
ruleForm: {
|
|
|
- target: '',// 指标名称
|
|
|
+ target: '', // 指标名称
|
|
|
uri: '', // URL
|
|
|
state: 1, // 是否启用
|
|
|
object: '', // 取值项
|
|
|
get_time: '', // 取值周期
|
|
|
},
|
|
|
+ status: 0,
|
|
|
+ item_code: '',
|
|
|
+ isShow: false,
|
|
|
+ testRes: ''
|
|
|
});
|
|
|
- const formSize = ref('default')
|
|
|
- const ruleFormRef = ref<FormInstance>()
|
|
|
+ const formSize = ref('default');
|
|
|
+ const ruleFormRef = ref<FormInstance>();
|
|
|
const rules = reactive<FormRules>({
|
|
|
- uri: [
|
|
|
- { required: true, message: '请输入URL', trigger: 'blur' },
|
|
|
- ],
|
|
|
- object: [
|
|
|
- { required: true, message: '请输入取值项', trigger: 'blur' },
|
|
|
- ],
|
|
|
- get_time: [
|
|
|
- { required: true, message: '请输入取值周期', trigger: 'blur' },
|
|
|
- ]
|
|
|
- })
|
|
|
+ uri: [{ required: true, message: '请输入URL', trigger: 'blur' }],
|
|
|
+ object: [{ required: true, message: '请输入取值项', trigger: 'blur' }],
|
|
|
+ get_time: [{ required: true, message: '请输入取值周期', trigger: 'blur' }],
|
|
|
+ });
|
|
|
const onSubmit = async (formEl: FormInstance | undefined) => {
|
|
|
- if (!formEl) return
|
|
|
+ if (!formEl) return;
|
|
|
await formEl.validate((valid, fields) => {
|
|
|
- console.log(valid)
|
|
|
if (valid) {
|
|
|
- console.log('submit!')
|
|
|
+ if (state.status === 1) {
|
|
|
+ // 编辑
|
|
|
+ editataSourceInfo(state.ruleForm);
|
|
|
+ } else {
|
|
|
+ // 新增
|
|
|
+ let params = {
|
|
|
+ ...state.ruleForm,
|
|
|
+ item_code: state.item_code,
|
|
|
+ };
|
|
|
+ addDataSourceInfo(params);
|
|
|
+ }
|
|
|
} else {
|
|
|
- console.log('error submit!', fields)
|
|
|
+ console.log('error submit!', fields);
|
|
|
}
|
|
|
- })
|
|
|
- }
|
|
|
+ });
|
|
|
+ };
|
|
|
+ // 新增数据
|
|
|
+ const addDataSourceInfo = (params: any) => {
|
|
|
+ api.addDataSourceInfo(params).then((res: any) => {
|
|
|
+ ElMessage.success('数据提交成功');
|
|
|
+ closeDialog();
|
|
|
+ state.isShow = false
|
|
|
+ });
|
|
|
+ };
|
|
|
+ // 编辑数据
|
|
|
+ const editataSourceInfo = (params: any) => {
|
|
|
+ api.editataSourceInfo(params).then((res: any) => {
|
|
|
+ ElMessage.success('数据提交成功');
|
|
|
+ closeDialog();
|
|
|
+ state.isShow = false
|
|
|
+ });
|
|
|
+ };
|
|
|
// 打开弹窗
|
|
|
const openDialog = (row: RuleFormRow, item_code: string) => {
|
|
|
// state.ruleForm = row;
|
|
|
state.isShowDialog = true;
|
|
|
- getDataSourceInfo(row, item_code)
|
|
|
+ state.testRes = ''
|
|
|
+ getDataSourceInfo(row, item_code);
|
|
|
+ };
|
|
|
+ // 检测
|
|
|
+ const test = () => {
|
|
|
+ let params = {
|
|
|
+ uri: state.ruleForm.uri,
|
|
|
+ object: state.ruleForm.object
|
|
|
+ }
|
|
|
+ api.testDataSource(params).then((res: any) => {
|
|
|
+ console.log(res)
|
|
|
+ state.testRes = res
|
|
|
+ // ElMessage.success('数据提交成功');
|
|
|
+ // closeDialog();
|
|
|
+ // state.isShow = false
|
|
|
+ });
|
|
|
};
|
|
|
// 获取数据源配置数据
|
|
|
const getDataSourceInfo = (row: any, item_code: string) => {
|
|
|
let params = {
|
|
|
item_code: item_code,
|
|
|
- target_name: row.name
|
|
|
- }
|
|
|
- api.getDataSourceInfo(params).then((res:any) => {
|
|
|
- console.log(res)
|
|
|
- if(res) {
|
|
|
+ target_name: row.name,
|
|
|
+ };
|
|
|
+ state.item_code = item_code;
|
|
|
+ api.getDataSourceInfo(params).then((res: any) => {
|
|
|
+ if (res) {
|
|
|
// 编辑
|
|
|
- state.ruleForm = res
|
|
|
- // data_code: "17216f21isrc5lpgppsjr8o100z8jlwv"
|
|
|
- // get_time: "*/30 * * * * *"
|
|
|
- // item_code: "17216f2f0k0c5jee0vdn08g100u6rfhd"
|
|
|
- // object: "Data.0.TemperatureHigh"
|
|
|
- // state: 1
|
|
|
- // target: "device"
|
|
|
- // uri: "https://api.gugudata.com/weather/weatherinfo/demo"
|
|
|
- }else {
|
|
|
+ state.ruleForm = res;
|
|
|
+ state.status = 1;
|
|
|
+ } else {
|
|
|
// 新增
|
|
|
state.ruleForm = {
|
|
|
- target: row.name,// 指标名称
|
|
|
+ target: row.name, // 指标名称
|
|
|
uri: '', // URL
|
|
|
state: 1, // 是否启用
|
|
|
object: '', // 取值项
|
|
|
get_time: '', // 取值周期
|
|
|
- }
|
|
|
+ };
|
|
|
+ state.status = 2;
|
|
|
}
|
|
|
});
|
|
|
};
|
|
@@ -150,14 +286,8 @@ export default defineComponent({
|
|
|
const onCancel = () => {
|
|
|
closeDialog();
|
|
|
};
|
|
|
- // 新增
|
|
|
- // const onSubmit = () => {
|
|
|
- // closeDialog();
|
|
|
- // };
|
|
|
// 初始化部门数据
|
|
|
- const initTableData = () => {
|
|
|
-
|
|
|
- };
|
|
|
+ const initTableData = () => {};
|
|
|
// 页面加载时
|
|
|
onMounted(() => {
|
|
|
initTableData();
|
|
@@ -169,13 +299,96 @@ export default defineComponent({
|
|
|
onCancel,
|
|
|
onSubmit,
|
|
|
getDataSourceInfo,
|
|
|
+ addDataSourceInfo,
|
|
|
+ editataSourceInfo,
|
|
|
+ test,
|
|
|
...toRefs(state),
|
|
|
formSize,
|
|
|
- ruleFormRef
|
|
|
+ ruleFormRef,
|
|
|
};
|
|
|
},
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+.inline-row {
|
|
|
+ ::v-deep .el-form-item__content {
|
|
|
+ display: flex;
|
|
|
+ .el-input {
|
|
|
+ width: calc(100% - 100px);
|
|
|
+ }
|
|
|
+ .tip {
|
|
|
+ width: 100px;
|
|
|
+ // background-color: pink;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: var(--el-color-primary);
|
|
|
+ font-size: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ .ico_up {
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border: 5px solid transparent;
|
|
|
+ border-bottom-color: var(--el-color-primary);
|
|
|
+ margin-right: 8px;
|
|
|
+ margin-top: -7px;
|
|
|
+ }
|
|
|
+ .ico_down{
|
|
|
+ width:0;
|
|
|
+ height:0;
|
|
|
+ border:5px solid transparent ;
|
|
|
+ border-top-color:var(--el-color-primary);
|
|
|
+ margin-right: 8px;
|
|
|
+ margin-top: 7px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.help-wrap {
|
|
|
+ width: 540px;
|
|
|
+ margin: 0 auto;
|
|
|
+ // background-color: pink;
|
|
|
+ .help-item:nth-child(1) {
|
|
|
+ border-top: 1px var(--el-border-color) var(--el-border-style);
|
|
|
+ }
|
|
|
+ .help-item {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ border-bottom: 1px var(--el-border-color) var(--el-border-style);
|
|
|
+ border-left: 1px var(--el-border-color) var(--el-border-style);
|
|
|
+ border-right: 1px var(--el-border-color) var(--el-border-style);
|
|
|
+ .help-item-label,
|
|
|
+ .help-item-content {
|
|
|
+ padding: 12px;
|
|
|
+
|
|
|
+ }
|
|
|
+ .help-item-label {
|
|
|
+ background-color: #f3f3f3;
|
|
|
+ width: 110px;
|
|
|
+ }
|
|
|
+ .help-item-content {
|
|
|
+ width: 430px;
|
|
|
+ font-size: 12px;
|
|
|
+
|
|
|
+ .ant-row {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ // justify-content: space-between;
|
|
|
+ .ant-col-6 {
|
|
|
+ width: 33%;
|
|
|
+ }
|
|
|
+ .ant-col-6:not(:nth-child(1)) {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .ant-col-8 {
|
|
|
+ width: 40%;
|
|
|
+ }
|
|
|
+ .ant-col-16 {
|
|
|
+ width: 60%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|