fix: bug#11226 样式铺满
This commit is contained in:
leiqiaochu
parent
881cc39e9b
commit
e98f168b20
|
|
@ -6,6 +6,7 @@
|
|||
target="category"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<FullPage>
|
||||
<JProTable
|
||||
ref="tableRef"
|
||||
:columns="table.columns"
|
||||
|
|
@ -55,12 +56,15 @@
|
|||
style="padding: 0px"
|
||||
:danger="i.key === 'delete'"
|
||||
>
|
||||
<template #icon><AIcon :type="i.icon" /></template>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</FullPage>
|
||||
<!-- 新增和编辑弹窗 -->
|
||||
<ModifyModal
|
||||
ref="modifyRef"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<!-- 配置信息 -->
|
||||
<template>
|
||||
<j-card style="min-height: 100%">
|
||||
<j-descriptions bordered>
|
||||
<template #title>
|
||||
<div style="display: flex">
|
||||
|
|
@ -36,21 +35,17 @@
|
|||
}}</j-button>
|
||||
</j-descriptions-item>
|
||||
<j-descriptions-item label="创建时间">{{
|
||||
dayjs(productStore.current.createTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
dayjs(productStore.current.createTime).format('YYYY-MM-DD HH:mm:ss')
|
||||
}}</j-descriptions-item>
|
||||
<j-descriptions-item label="更新时间">{{
|
||||
dayjs(productStore.current.modifyTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
dayjs(productStore.current.modifyTime).format('YYYY-MM-DD HH:mm:ss')
|
||||
}}</j-descriptions-item>
|
||||
|
||||
<j-descriptions-item label="说明" :span="3">
|
||||
{{ productStore.current.describe }}
|
||||
</j-descriptions-item>
|
||||
</j-descriptions>
|
||||
</j-card>
|
||||
|
||||
<!-- 编辑 -->
|
||||
<Save ref="saveRef" :isAdd="isAdd" :title="title" @success="refresh" />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,138 +1,193 @@
|
|||
|
||||
<template>
|
||||
<j-card>
|
||||
<div>
|
||||
<div class="top">
|
||||
<div>
|
||||
脚本语言:
|
||||
<j-select :defaultValue="'JavaScript'" style="width: 200;margin-left: 5px;">
|
||||
<j-select-option value="JavaScript">JavaScript(ECMAScript 5)</j-select-option>
|
||||
<j-select
|
||||
:defaultValue="'JavaScript'"
|
||||
style="width: 200; margin-left: 5px"
|
||||
>
|
||||
<j-select-option value="JavaScript"
|
||||
>JavaScript(ECMAScript 5)</j-select-option
|
||||
>
|
||||
</j-select>
|
||||
<AIcon type="ExpandOutlined" style="margin-left: 20px;" @click="toggle" />
|
||||
<AIcon
|
||||
type="ExpandOutlined"
|
||||
style="margin-left: 20px"
|
||||
@click="toggle"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="edit" ref="el">
|
||||
<j-monaco-editor language="javascript" style="height: 100%;" theme="vs" v-model:modelValue="editorValue" />
|
||||
<j-monaco-editor
|
||||
language="javascript"
|
||||
style="height: 100%"
|
||||
theme="vs"
|
||||
v-model:modelValue="editorValue"
|
||||
/>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div style="width: 49.5%;">
|
||||
<div style="width: 49.5%">
|
||||
<div class="bottom-title">
|
||||
<div class="bottom-title-text">模拟输入</div>
|
||||
<div class="bottom-title-topic">
|
||||
<template v-if="productStore.current.transportProtocol === 'MQTT'">
|
||||
<div style="margin-right: 5px;">Topic:</div>
|
||||
<j-auto-complete placeholder="请输入Topic" style="width: 300px" :options="topicList"
|
||||
:allowClear="true" :filterOption="(inputValue: any, option: any) =>
|
||||
option!.value.indexOf(inputValue) !== -1" v-model:value="topic" />
|
||||
<template
|
||||
v-if="
|
||||
productStore.current.transportProtocol ===
|
||||
'MQTT'
|
||||
"
|
||||
>
|
||||
<div style="margin-right: 5px">Topic:</div>
|
||||
<j-auto-complete
|
||||
placeholder="请输入Topic"
|
||||
style="width: 300px"
|
||||
:options="topicList"
|
||||
:allowClear="true"
|
||||
:filterOption="(inputValue: any, option: any) =>
|
||||
option!.value.indexOf(inputValue) !== -1"
|
||||
v-model:value="topic"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div style="margin-right: 5px;">URL:</div>
|
||||
<j-input placeholder="请输入URL" v-model:value="url" style="width: 300px"></j-input>
|
||||
<div style="margin-right: 5px">URL:</div>
|
||||
<j-input
|
||||
placeholder="请输入URL"
|
||||
v-model:value="url"
|
||||
style="width: 300px"
|
||||
></j-input>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<j-textarea :rows="5" placeholder="// 二进制数据以0x开头的十六进制输入，字符串数据输入原始字符串" style="margin-top: 10px;"
|
||||
v-model:value="simulation" />
|
||||
<j-textarea
|
||||
:rows="5"
|
||||
placeholder="// 二进制数据以0x开头的十六进制输入，字符串数据输入原始字符串"
|
||||
style="margin-top: 10px"
|
||||
v-model:value="simulation"
|
||||
/>
|
||||
</div>
|
||||
<div style="width: 49.5%;">
|
||||
<div style="width: 49.5%">
|
||||
<div class="bottom-title">
|
||||
<div class="bottom-title-text">运行结果</div>
|
||||
</div>
|
||||
<j-textarea :autoSize="{ minRows: 5 }" :style="resStyle" v-model:value="result" />
|
||||
<j-textarea
|
||||
:autoSize="{ minRows: 5 }"
|
||||
:style="resStyle"
|
||||
v-model:value="result"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 10px;margin-left: 10px;">
|
||||
<PermissionButton type="primary" hasPermission="device/Instance:update" :loading="loading"
|
||||
:disabled="isDisabled" @click="debug()" :tooltip="{
|
||||
<div style="margin-top: 10px; margin-left: 10px">
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
hasPermission="device/Instance:update"
|
||||
:loading="loading"
|
||||
:disabled="isDisabled"
|
||||
@click="debug()"
|
||||
:tooltip="{
|
||||
title: '需输入脚本和模拟数据后再点击',
|
||||
}">
|
||||
}"
|
||||
>
|
||||
调试
|
||||
</PermissionButton>
|
||||
<PermissionButton hasPermission="device/Instance:update" :loading="loading" :disabled="!isTest" @click="save()"
|
||||
:style="{ marginLeft: '10px' }" :tooltip="{
|
||||
<PermissionButton
|
||||
hasPermission="device/Instance:update"
|
||||
:loading="loading"
|
||||
:disabled="!isTest"
|
||||
@click="save()"
|
||||
:style="{ marginLeft: '10px' }"
|
||||
:tooltip="{
|
||||
title: isTest ? '' : '请先调试',
|
||||
}">
|
||||
}"
|
||||
>
|
||||
保存
|
||||
</PermissionButton>
|
||||
</div>
|
||||
</j-card>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts' name="DataAnalysis">
|
||||
import PermissionButton from '@/components/PermissionButton/index.vue'
|
||||
import PermissionButton from '@/components/PermissionButton/index.vue';
|
||||
// import MonacoEditor from '@/components/MonacoEditor/index.vue';
|
||||
import { useFullscreen } from '@vueuse/core'
|
||||
import { useFullscreen } from '@vueuse/core';
|
||||
import { useProductStore } from '@/store/product';
|
||||
import {
|
||||
productCode,
|
||||
getProtocal,
|
||||
testCode,
|
||||
saveProductCode,
|
||||
} from '@/api/device/instance'
|
||||
} from '@/api/device/instance';
|
||||
import { message } from 'jetlinks-ui-components';
|
||||
import { isBoolean } from 'lodash';
|
||||
|
||||
const defaultValue =
|
||||
'//解码函数\r\nfunction decode(context) {\r\n //原始报文\r\n var buffer = context.payload();\r\n // 转为json\r\n // var json = context.json();\r\n //mqtt 时通过此方法获取topic\r\n // var topic = context.topic();\r\n\r\n // 提取变量\r\n // var topicVars = context.pathVars("/{deviceId}/**",topic)\r\n //温度属性\r\n var temperature = buffer.getShort(3) * 10;\r\n //湿度属性\r\n var humidity = buffer.getShort(6) * 10;\r\n return {\r\n "temperature": temperature,\r\n "humidity": humidity\r\n };\r\n}\r\n';
|
||||
|
||||
const el = ref<HTMLElement | null>(null)
|
||||
const { toggle } = useFullscreen(el)
|
||||
const productStore = useProductStore()
|
||||
const el = ref<HTMLElement | null>(null);
|
||||
const { toggle } = useFullscreen(el);
|
||||
const productStore = useProductStore();
|
||||
|
||||
const url = ref<string>('');
|
||||
const topic = ref<string>('');
|
||||
const topicList = ref([]);
|
||||
const simulation = ref<string>('');
|
||||
const resultValue = ref<any>({});
|
||||
const loading = ref<boolean>(false);
|
||||
const isTest = ref<boolean>(false);
|
||||
const editorValue = ref<string>('');
|
||||
|
||||
const url = ref<string>('')
|
||||
const topic = ref<string>('')
|
||||
const topicList = ref([])
|
||||
const simulation = ref<string>('')
|
||||
const resultValue = ref<any>({})
|
||||
const loading = ref<boolean>(false)
|
||||
const isTest = ref<boolean>(false)
|
||||
const editorValue = ref<string>('')
|
||||
|
||||
const resStyle = computed(() => (isBoolean(resultValue.value.success) ? {
|
||||
const resStyle = computed(() =>
|
||||
isBoolean(resultValue.value.success)
|
||||
? {
|
||||
'margin-top': '10px',
|
||||
'border-color': resultValue.value.success ? 'green' : 'red'
|
||||
} : {
|
||||
'border-color': resultValue.value.success ? 'green' : 'red',
|
||||
}
|
||||
: {
|
||||
'margin-top': '10px',
|
||||
}))
|
||||
},
|
||||
);
|
||||
|
||||
const isDisabled = computed(() => simulation.value === '')
|
||||
|
||||
const result = computed(() => resultValue.value.success ? JSON.stringify(resultValue.value.outputs?.[0]) : resultValue.value.reason)
|
||||
const isDisabled = computed(() => simulation.value === '');
|
||||
|
||||
const result = computed(() =>
|
||||
resultValue.value.success
|
||||
? JSON.stringify(resultValue.value.outputs?.[0])
|
||||
: resultValue.value.reason,
|
||||
);
|
||||
|
||||
//获取topic
|
||||
const getTopic = async () => {
|
||||
const res: any = await getProtocal(productStore.current.messageProtocol, productStore.current.transportProtocol)
|
||||
const res: any = await getProtocal(
|
||||
productStore.current.messageProtocol,
|
||||
productStore.current.transportProtocol,
|
||||
);
|
||||
if (res.status === 200) {
|
||||
const item = res.result.routes?.map((items: any) => ({
|
||||
value: items.topic,
|
||||
}));
|
||||
topicList.value = item
|
||||
topicList.value = item;
|
||||
}
|
||||
};
|
||||
//获取产品解析规则
|
||||
const getProductCode = async () => {
|
||||
const res: any = await productCode(productStore.current.id)
|
||||
const res: any = await productCode(productStore.current.id);
|
||||
if (res.status === 200) {
|
||||
if(res.result){
|
||||
editorValue.value = res.result?.configuration?.script
|
||||
}else{
|
||||
editorValue.value = defaultValue
|
||||
if (res.result) {
|
||||
editorValue.value = res.result?.configuration?.script;
|
||||
} else {
|
||||
editorValue.value = defaultValue;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
//调试
|
||||
const test = async (dataTest: any) => {
|
||||
loading.value = true
|
||||
const res = await testCode(dataTest)
|
||||
loading.value = true;
|
||||
const res = await testCode(dataTest);
|
||||
if (res.status === 200) {
|
||||
loading.value = false
|
||||
resultValue.value = res?.result
|
||||
loading.value = false;
|
||||
resultValue.value = res?.result;
|
||||
} else {
|
||||
loading.value = false
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -144,15 +199,14 @@ const save = async () => {
|
|||
script: editorValue.value,
|
||||
lang: 'javascript',
|
||||
},
|
||||
}
|
||||
const res = await saveProductCode(productStore.current.id, item)
|
||||
};
|
||||
const res = await saveProductCode(productStore.current.id, item);
|
||||
if (res.status === 200) {
|
||||
message.success('保存成功');
|
||||
getProductCode();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const debug = () => {
|
||||
if (productStore.current.transportProtocol === 'MQTT') {
|
||||
if (topic.value !== '') {
|
||||
|
|
@ -166,8 +220,8 @@ const debug = () => {
|
|||
},
|
||||
provider: 'jsr223',
|
||||
payload: simulation.value,
|
||||
})
|
||||
isTest.value = true
|
||||
});
|
||||
isTest.value = true;
|
||||
} else {
|
||||
message.error('请输入topic');
|
||||
}
|
||||
|
|
@ -184,19 +238,17 @@ const debug = () => {
|
|||
},
|
||||
payload: simulation.value,
|
||||
});
|
||||
isTest.value = true
|
||||
isTest.value = true;
|
||||
} else {
|
||||
message.error('请输入url');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getProductCode()
|
||||
getTopic()
|
||||
})
|
||||
|
||||
getProductCode();
|
||||
getTopic();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang='less'>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,14 @@
|
|||
<!-- 设备接入 -->
|
||||
<template>
|
||||
<j-card style="min-height: 100%">
|
||||
<div v-if="productStore.current.accessId === undefined || null">
|
||||
<j-empty :image="simpleImage">
|
||||
<template #description>
|
||||
<span
|
||||
v-if="
|
||||
permissionStore.hasPermission(
|
||||
'device/Product:update',
|
||||
)
|
||||
permissionStore.hasPermission('device/Product:update')
|
||||
"
|
||||
>
|
||||
请先<j-button type="link" @click="showModal"
|
||||
>选择</j-button
|
||||
请先<j-button type="link" @click="showModal">选择</j-button
|
||||
>设备接入网关，用以提供设备接入能力
|
||||
</span>
|
||||
<span v-else>请联系管理员配置产品接入方式</span>
|
||||
|
|
@ -87,10 +83,7 @@
|
|||
{{ access?.protocolDetail?.name }}
|
||||
</div>
|
||||
<!-- 显示md文件内容 -->
|
||||
<div
|
||||
v-if="config?.document"
|
||||
v-html="markdownToHtml"
|
||||
></div>
|
||||
<div v-if="config?.document" v-html="markdownToHtml"></div>
|
||||
</div>
|
||||
<div class="item-style">
|
||||
<Title data="连接信息"></Title>
|
||||
|
|
@ -100,9 +93,7 @@
|
|||
:key="item.address"
|
||||
>
|
||||
<j-badge
|
||||
:color="
|
||||
item.health === -1 ? 'red' : 'green'
|
||||
"
|
||||
:color="item.health === -1 ? 'red' : 'green'"
|
||||
:text="item.address"
|
||||
>
|
||||
</j-badge>
|
||||
|
|
@ -116,9 +107,7 @@
|
|||
class="config"
|
||||
>
|
||||
<template #extra>
|
||||
<j-tooltip
|
||||
title="此配置来自于产品接入方式所选择的协议"
|
||||
>
|
||||
<j-tooltip title="此配置来自于产品接入方式所选择的协议">
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
|
|
@ -126,11 +115,7 @@
|
|||
</j-tooltip>
|
||||
</template>
|
||||
</Title>
|
||||
<j-form
|
||||
ref="formRef"
|
||||
:model="formData.data"
|
||||
layout="vertical"
|
||||
>
|
||||
<j-form ref="formRef" :model="formData.data" layout="vertical">
|
||||
<j-form-item
|
||||
:name="item.property"
|
||||
v-for="item in metadata.properties"
|
||||
|
|
@ -189,10 +174,7 @@
|
|||
</Title>
|
||||
<j-form layout="vertical">
|
||||
<j-form-item>
|
||||
<j-select
|
||||
ref="select"
|
||||
v-model:value="form.storePolicy"
|
||||
>
|
||||
<j-select ref="select" v-model:value="form.storePolicy">
|
||||
<j-select-option
|
||||
v-for="(item, index) in storageList"
|
||||
:key="index"
|
||||
|
|
@ -217,8 +199,7 @@
|
|||
<div>
|
||||
<div style="font-weight: 600; margin: 0 0 10 px 0">
|
||||
{{
|
||||
access?.provider ===
|
||||
'mqtt-server-gateway' ||
|
||||
access?.provider === 'mqtt-server-gateway' ||
|
||||
access?.provider === 'mqtt-client-gateway'
|
||||
? 'topic'
|
||||
: 'URL信息'
|
||||
|
|
@ -226,9 +207,7 @@
|
|||
</div>
|
||||
<j-table
|
||||
:columns="
|
||||
config.id === 'MQTT'
|
||||
? columnsMQTT
|
||||
: columnsHTTP
|
||||
config.id === 'MQTT' ? columnsMQTT : columnsHTTP
|
||||
"
|
||||
:data-source="config?.routes"
|
||||
:pagination="false"
|
||||
|
|
@ -248,9 +227,7 @@
|
|||
<template v-if="column.key === 'stream'">
|
||||
<div>{{ getStream(record) }}</div>
|
||||
</template>
|
||||
<template
|
||||
v-if="column.key === 'description'"
|
||||
>
|
||||
<template v-if="column.key === 'description'">
|
||||
<j-tooltip
|
||||
placement="topLeft"
|
||||
:title="text"
|
||||
|
|
@ -287,7 +264,6 @@
|
|||
</j-col>
|
||||
</j-row>
|
||||
</div>
|
||||
</j-card>
|
||||
<!-- 选择设备 -->
|
||||
<j-modal
|
||||
title="设备接入配置"
|
||||
|
|
|
|||
|
|
@ -90,11 +90,19 @@
|
|||
>应用配置</PermissionButton
|
||||
>
|
||||
</template>
|
||||
<FullPage>
|
||||
<j-card :bordered="false">
|
||||
<component
|
||||
:is="tabs[productStore.tabActiveKey]"
|
||||
:class="productStore.tabActiveKey === 'Metadata' ? 'metedata' : ''"
|
||||
:class="
|
||||
productStore.tabActiveKey === 'Metadata'
|
||||
? 'metedata'
|
||||
: ''
|
||||
"
|
||||
v-bind="{ type: 'product' }"
|
||||
/>
|
||||
</j-card>
|
||||
</FullPage>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
target="product-manage"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<FullPage>
|
||||
<JProTable
|
||||
:columns="columns"
|
||||
:request="queryProductList"
|
||||
|
|
@ -21,7 +22,9 @@
|
|||
@click="add"
|
||||
hasPermission="device/Product:add"
|
||||
>
|
||||
<template #icon><AIcon type="PlusOutlined" /></template>
|
||||
<template #icon
|
||||
><AIcon type="PlusOutlined"
|
||||
/></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
<j-upload
|
||||
|
|
@ -30,7 +33,8 @@
|
|||
:showUploadList="false"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<PermissionButton hasPermission="device/Product:import"
|
||||
<PermissionButton
|
||||
hasPermission="device/Product:import"
|
||||
>导入</PermissionButton
|
||||
>
|
||||
</j-upload>
|
||||
|
|
@ -103,7 +107,11 @@
|
|||
...item.tooltip,
|
||||
}"
|
||||
@click="item.onClick"
|
||||
:hasPermission="item.key ==='view' ? true : 'device/Product:' + item.key"
|
||||
:hasPermission="
|
||||
item.key === 'view'
|
||||
? true
|
||||
: 'device/Product:' + item.key
|
||||
"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
|
|
@ -136,7 +144,11 @@
|
|||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:hasPermission="i.key === 'view' ? true : 'device/Product:' + i.key"
|
||||
:hasPermission="
|
||||
i.key === 'view'
|
||||
? true
|
||||
: 'device/Product:' + i.key
|
||||
"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
|
|
@ -145,12 +157,15 @@
|
|||
style="padding: 0px"
|
||||
:danger="i.key === 'delete'"
|
||||
>
|
||||
<template #icon><AIcon :type="i.icon" /></template>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</FullPage>
|
||||
<!-- 新增、编辑 -->
|
||||
<Save ref="saveRef" :isAdd="isAdd" :title="title" @success="refresh" />
|
||||
</page-container>
|
||||
|
|
@ -181,8 +196,8 @@ import { typeOptions } from '@/components/Search/util';
|
|||
import Save from './Save/index.vue';
|
||||
import { useMenuStore } from 'store/menu';
|
||||
import { useRoute } from 'vue-router';
|
||||
import {useRouterParams} from "@/utils/hooks/useParams";
|
||||
import { accessConfigTypeFilter } from '@/utils/setting'
|
||||
import { useRouterParams } from '@/utils/hooks/useParams';
|
||||
import { accessConfigTypeFilter } from '@/utils/setting';
|
||||
/**
|
||||
* 表格数据
|
||||
*/
|
||||
|
|
@ -196,21 +211,21 @@ const columns = [
|
|||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
scopedSlots: true,
|
||||
width:200,
|
||||
width: 200,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '产品名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width:220,
|
||||
width: 220,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '接入方式',
|
||||
dataIndex: 'accessName',
|
||||
key: 'accessName',
|
||||
width:220,
|
||||
width: 220,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
|
|
@ -219,7 +234,7 @@ const columns = [
|
|||
key: 'deviceType',
|
||||
scopedSlots: true,
|
||||
ellipsis: true,
|
||||
width:120,
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
|
|
@ -227,7 +242,7 @@ const columns = [
|
|||
key: 'state',
|
||||
scopedSlots: true,
|
||||
ellipsis: true,
|
||||
width:90,
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
|
|
@ -434,7 +449,7 @@ const query = reactive({
|
|||
key: 'id',
|
||||
search: {
|
||||
type: 'string',
|
||||
defaultTermType: 'eq'
|
||||
defaultTermType: 'eq',
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -446,8 +461,8 @@ const query = reactive({
|
|||
options: () => {
|
||||
return new Promise((resolve) => {
|
||||
getProviders().then((resp: any) => {
|
||||
const data = resp.result || []
|
||||
resolve(accessConfigTypeFilter(data))
|
||||
const data = resp.result || [];
|
||||
resolve(accessConfigTypeFilter(data));
|
||||
});
|
||||
});
|
||||
},
|
||||
|
|
@ -592,9 +607,9 @@ const saveRef = ref();
|
|||
const handleSearch = (e: any) => {
|
||||
params.value = e;
|
||||
};
|
||||
const routerParams = useRouterParams()
|
||||
const routerParams = useRouterParams();
|
||||
onMounted(() => {
|
||||
if(routerParams.params?.value.save){
|
||||
if (routerParams.params?.value.save) {
|
||||
add();
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<j-card>
|
||||
<div class='device-detail-metadata' style="position: relative;">
|
||||
<div class="tips">
|
||||
<j-tooltip :title="instanceStore.detail?.independentMetadata && type === 'device'
|
||||
|
|
@ -44,7 +43,6 @@
|
|||
<Import v-if="visible" v-model:visible="visible" :type="type" @close="visible = false" />
|
||||
<Cat v-model:visible="cat" @close="cat = false" :type="type" />
|
||||
</div>
|
||||
</j-card>
|
||||
</template>
|
||||
<script setup lang="ts" name="Metadata">
|
||||
import PermissionButton from '@/components/PermissionButton/index.vue'
|
||||
|
|
|
|||
|
|
@ -1,16 +1,26 @@
|
|||
<template>
|
||||
<page-container :tabList="list" @tabChange="onTabChange" :tabActiveKey="tab">
|
||||
<div v-if="tab=='config'">
|
||||
<page-container
|
||||
:tabList="list"
|
||||
@tabChange="onTabChange"
|
||||
:tabActiveKey="tab"
|
||||
>
|
||||
<div v-if="tab == 'config'">
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="14">
|
||||
<FullPage>
|
||||
<div class="alarm-level">
|
||||
<j-card
|
||||
:headStyle="{ borderBottom: 'none', padding: 0 }"
|
||||
:headStyle="{
|
||||
borderBottom: 'none',
|
||||
padding: 0,
|
||||
}"
|
||||
:bodyStyle="{ padding: 0 }"
|
||||
:bordered="false"
|
||||
>
|
||||
<template #title>
|
||||
<div class="alarmLevelTitle">告警级别配置</div>
|
||||
<div class="alarmLevelTitle">
|
||||
告警级别配置
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
v-for="(item, i) in levels"
|
||||
|
|
@ -20,7 +30,9 @@
|
|||
<div>
|
||||
<img
|
||||
:src="
|
||||
getImage(`/alarm/alarm${i + 1}.png`)
|
||||
getImage(
|
||||
`/alarm/alarm${i + 1}.png`,
|
||||
)
|
||||
"
|
||||
alt=""
|
||||
/>
|
||||
|
|
@ -41,10 +53,18 @@
|
|||
@click="handleSaveLevel"
|
||||
>保存</j-button
|
||||
> -->
|
||||
<PermissionButton type="primary" size="middle" @click="handleSaveLevel" hasPermission="rule-engine/Alarm/Config:update">保存</PermissionButton>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
size="middle"
|
||||
@click="handleSaveLevel"
|
||||
hasPermission="rule-engine/Alarm/Config:update"
|
||||
>保存</PermissionButton
|
||||
>
|
||||
</div>
|
||||
</FullPage>
|
||||
</j-col>
|
||||
<j-col :span="10">
|
||||
<FullPage>
|
||||
<div class="description">
|
||||
<h1>功能说明</h1>
|
||||
<div>
|
||||
|
|
@ -53,6 +73,7 @@
|
|||
<div>2、告警级别将会在告警配置中被引用。</div>
|
||||
<div>3、最多可配置5个级别。</div>
|
||||
</div>
|
||||
</FullPage>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</div>
|
||||
|
|
@ -65,7 +86,7 @@ import { getImage } from '@/utils/comm';
|
|||
import { queryLevel, saveLevel } from '@/api/rule-engine/config';
|
||||
import { LevelItem } from './typing';
|
||||
import { message } from 'jetlinks-ui-components';
|
||||
import Io from './Io/index.vue'
|
||||
import Io from './Io/index.vue';
|
||||
const list = ref([
|
||||
{
|
||||
key: 'config',
|
||||
|
|
@ -77,7 +98,7 @@ const list = ref([
|
|||
},
|
||||
]);
|
||||
let levels = ref<LevelItem[]>([]);
|
||||
let tab = ref<'io'|'config'|string>('config');
|
||||
let tab = ref<'io' | 'config' | string>('config');
|
||||
const getAlarmLevel = () => {
|
||||
queryLevel().then((res: any) => {
|
||||
if (res.status == 200) {
|
||||
|
|
@ -136,6 +157,7 @@ const onTabChange = (e: string) => {
|
|||
margin: 16px 0;
|
||||
color: rgba(#000, 0.85);
|
||||
font-weight: bold;
|
||||
font-size: 14px;}
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
<template>
|
||||
<FullPage>
|
||||
<div>
|
||||
<j-form layout="vertical" :rules="rule" :model="form" ref="formRef">
|
||||
<j-row :gutter="24">
|
||||
|
|
@ -20,7 +21,10 @@
|
|||
</j-col>
|
||||
</j-row>
|
||||
<j-form-item label="级别" name="level">
|
||||
<j-radio-group v-model:value="form.level" class="levelSelect">
|
||||
<j-radio-group
|
||||
v-model:value="form.level"
|
||||
class="levelSelect"
|
||||
>
|
||||
<j-radio-button
|
||||
v-for="(item, index) in levelOption"
|
||||
:key="index"
|
||||
|
|
@ -35,7 +39,9 @@
|
|||
"
|
||||
>
|
||||
<img
|
||||
:src="getImage(`/alarm/alarm${index + 1}.png`)"
|
||||
:src="
|
||||
getImage(`/alarm/alarm${index + 1}.png`)
|
||||
"
|
||||
style="height: 40px"
|
||||
alt=""
|
||||
/>{{ item.label }}
|
||||
|
|
@ -62,6 +68,7 @@
|
|||
>
|
||||
</j-form>
|
||||
</div>
|
||||
</FullPage>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<template>
|
||||
<FullPage>
|
||||
<JProTable
|
||||
model="CARD"
|
||||
:request="query"
|
||||
|
|
@ -37,7 +38,9 @@
|
|||
:height="16"
|
||||
:src="typeMap.get(slotProps.triggerType)?.icon"
|
||||
style="margin-right: 5px"
|
||||
/>{{ typeMap.get(slotProps.triggerType)?.text }}</span
|
||||
/>{{
|
||||
typeMap.get(slotProps.triggerType)?.text
|
||||
}}</span
|
||||
>
|
||||
</template>
|
||||
<template #img>
|
||||
|
|
@ -81,6 +84,7 @@
|
|||
</CardBox>
|
||||
</template>
|
||||
</JProTable>
|
||||
</FullPage>
|
||||
<Save
|
||||
:id="id"
|
||||
:type="configurationData.current?.targetType"
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
target="device-instance"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<FullPage>
|
||||
<JProTable
|
||||
:columns="columns"
|
||||
:request="queryList"
|
||||
|
|
@ -55,13 +56,20 @@
|
|||
<template #img>
|
||||
<slot name="img">
|
||||
<img
|
||||
:src="getImage('/alarm/alarm-config.png')"
|
||||
:src="
|
||||
getImage('/alarm/alarm-config.png')
|
||||
"
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<Ellipsis style="width: calc(100% - 100px)">
|
||||
<span style="font-weight: 600; font-size: 16px">
|
||||
<span
|
||||
style="
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
"
|
||||
>
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
|
|
@ -160,7 +168,8 @@
|
|||
type="link"
|
||||
style="padding: 0px"
|
||||
:hasPermission="
|
||||
'rule-engine/Alarm/Configuration:' + i.key
|
||||
'rule-engine/Alarm/Configuration:' +
|
||||
i.key
|
||||
"
|
||||
:danger="i.key === 'delete'"
|
||||
>
|
||||
|
|
@ -172,6 +181,7 @@
|
|||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</FullPage>
|
||||
</div>
|
||||
</page-container>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
target="alarm-log-detail"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<FullPage>
|
||||
<JProTable
|
||||
:columns="columns"
|
||||
model="TABLE"
|
||||
|
|
@ -34,19 +35,27 @@
|
|||
type="link"
|
||||
style="padding: 0px"
|
||||
>
|
||||
<template #icon><AIcon :type="i.icon"/></template>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
<Info v-if="visiable" :data="current" @close="close" :description="description"/>
|
||||
</FullPage>
|
||||
<Info
|
||||
v-if="visiable"
|
||||
:data="current"
|
||||
@close="close"
|
||||
:description="description"
|
||||
/>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { detail, queryHistoryList } from '@/api/rule-engine/log';
|
||||
import { detail as configurationDetail} from '@/api/rule-engine/configuration'
|
||||
import { detail as configurationDetail } from '@/api/rule-engine/configuration';
|
||||
import { useRoute } from 'vue-router';
|
||||
import dayjs from 'dayjs';
|
||||
import type { ActionsType } from '@/components/Table/index.vue';
|
||||
|
|
@ -54,10 +63,10 @@ import { message } from 'jetlinks-ui-components';
|
|||
import { useAlarmStore } from '@/store/alarm';
|
||||
import Info from './info.vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import {useRouterParams} from "@/utils/hooks/useParams";
|
||||
import { useRouterParams } from '@/utils/hooks/useParams';
|
||||
const route = useRoute();
|
||||
const id = route.params?.id;
|
||||
const { params: routerParams } = useRouterParams()
|
||||
const { params: routerParams } = useRouterParams();
|
||||
let visiable = ref(false);
|
||||
let description = ref<string>();
|
||||
const columns = [
|
||||
|
|
@ -170,11 +179,11 @@ watchEffect(async () => {
|
|||
key: 'targetName',
|
||||
});
|
||||
}
|
||||
configurationDetail(res.result?.alarmConfigId).then((res:any)=>{
|
||||
if(res.status === 200){
|
||||
configurationDetail(res.result?.alarmConfigId).then((res: any) => {
|
||||
if (res.status === 200) {
|
||||
description.value = res.result?.description;
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
});
|
||||
const handleSearch = (_params: any) => {
|
||||
|
|
@ -185,15 +194,15 @@ const handleSearch = (_params: any) => {
|
|||
* 关闭模态弹窗
|
||||
*/
|
||||
const close = () => {
|
||||
visiable.value = false
|
||||
}
|
||||
visiable.value = false;
|
||||
};
|
||||
|
||||
watchEffect(()=>{
|
||||
watchEffect(() => {
|
||||
current.value = details.value;
|
||||
if(routerParams.value.detail && details.value){
|
||||
if (routerParams.value.detail && details.value) {
|
||||
visiable.value = true;
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
</style>
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
target="bind-channel"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<FullPage>
|
||||
<JProTable
|
||||
model="TABLE"
|
||||
:columns="columns"
|
||||
|
|
@ -33,11 +34,14 @@
|
|||
<template #alarmTime="slotProps">
|
||||
<span>
|
||||
{{
|
||||
dayjs(slotProps.alarmTime).format('YYYY-MM-DD HH:mm:ss')
|
||||
dayjs(slotProps.alarmTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</JProTable>
|
||||
</FullPage>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
v-if="props.type === 'org'"
|
||||
@search="search"
|
||||
/>
|
||||
<FullPage>
|
||||
<JProTable
|
||||
:columns="columns"
|
||||
:request="handleSearch"
|
||||
|
|
@ -53,7 +54,10 @@
|
|||
}"
|
||||
>
|
||||
<template #img>
|
||||
<img :src="imgMap.get(slotProps.targetType)" alt="" />
|
||||
<img
|
||||
:src="imgMap.get(slotProps.targetType)"
|
||||
alt=""
|
||||
/>
|
||||
</template>
|
||||
<template #content>
|
||||
<Ellipsis style="width: calc(100% - 100px)">
|
||||
|
|
@ -79,9 +83,9 @@
|
|||
<Ellipsis
|
||||
><div>
|
||||
{{
|
||||
dayjs(slotProps?.alarmTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
dayjs(
|
||||
slotProps?.alarmTime,
|
||||
).format('YYYY-MM-DD HH:mm:ss')
|
||||
}}
|
||||
</div></Ellipsis
|
||||
>
|
||||
|
|
@ -131,6 +135,7 @@
|
|||
</CardBox>
|
||||
</template>
|
||||
</JProTable>
|
||||
</FullPage>
|
||||
<SolveComponent
|
||||
:data="data"
|
||||
v-if="data.solveVisible"
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
target="device-instance"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<FullPage>
|
||||
<JProTable
|
||||
:columns="columns"
|
||||
:request="queryList"
|
||||
|
|
@ -44,12 +45,19 @@
|
|||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img :src="getImage('/device-product.png')" />
|
||||
<img
|
||||
:src="getImage('/device-product.png')"
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<Ellipsis style="width: calc(100% - 100px)">
|
||||
<span style="font-weight: 600; font-size: 16px">
|
||||
<span
|
||||
style="
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
"
|
||||
>
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
|
|
@ -116,7 +124,9 @@
|
|||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0px"
|
||||
:hasPermission="'rule-engine/Instance:' + i.key"
|
||||
:hasPermission="
|
||||
'rule-engine/Instance:' + i.key
|
||||
"
|
||||
:danger="i.key === 'delete'"
|
||||
>
|
||||
<template #icon
|
||||
|
|
@ -127,6 +137,7 @@
|
|||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</FullPage>
|
||||
<!-- 新增、编辑 -->
|
||||
<Save
|
||||
:data="current"
|
||||
|
|
@ -151,11 +162,11 @@ import { getImage } from '@/utils/comm';
|
|||
import { message } from 'jetlinks-ui-components';
|
||||
import Save from './Save/index.vue';
|
||||
import { SystemConst } from '@/utils/consts';
|
||||
import {useRouterParams} from "@/utils/hooks/useParams";
|
||||
import { useRouterParams } from '@/utils/hooks/useParams';
|
||||
const params = ref<Record<string, any>>({});
|
||||
let visiable = ref(false);
|
||||
const tableRef = ref<Record<string, any>>({});
|
||||
const { params: routeParams } = useRouterParams()
|
||||
const { params: routeParams } = useRouterParams();
|
||||
const query = {
|
||||
columns: [
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue