0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev

This commit is contained in:
JiangQiming 2023-03-13 17:47:20 +08:00
parent f202e16401 add3a9a5f3
commit 204a15ebb3
14 changed files with 248 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/rule-engine/scene.ts
View File

@ -24,3 +24,5 @@ export const _execute = (id: string) => server.post(`/scene/${id}/_execute`);
export const queryBuiltInParams = (data: any, params?: any) => server.post(`/scene/parse-variables`, data, params);
export const getParseTerm = (data: Record<string, any>) => server.post(`/scene/parse-term-column`, data)
export const queryAlarmList = (data: Record<string, any>) => server.post(`/alarm/config/_query/`, data)

10
src/views/Northbound/AliCloud/index.vue
View File

@ -1,6 +1,6 @@
<template>
<page-container>
<j-advanced-search
<pro-search
:columns="columns"
target="northbound-aliyun"
@search="handleSearch"
@ -50,13 +50,17 @@
<div class="card-item-content-text">
网桥产品
</div>
<div>{{ slotProps?.bridgeProductName }}</div>
<Ellipsis>
<div>{{ slotProps?.bridgeProductName }}</div>
</Ellipsis>
</j-col>
<j-col :span="12">
<div class="card-item-content-text">
<label>说明</label>
</div>
<div>{{ slotProps?.description }}</div>
<Ellipsis>
<div>{{ slotProps?.description }}</div>
</Ellipsis>
</j-col>
</j-row>
</template>

10
src/views/Northbound/DuerOS/index.vue
View File

@ -1,6 +1,6 @@
<template>
<page-container>
<j-advanced-search
<pro-search
:columns="columns"
target="northbound-dueros"
@search="handleSearch"
@ -48,13 +48,17 @@
<j-row>
<j-col :span="12">
<div class="card-item-content-text">产品</div>
<div>{{ slotProps?.productName }}</div>
<Ellipsis>
<div>{{ slotProps?.productName }}</div>
</Ellipsis>
</j-col>
<j-col :span="12">
<div class="card-item-content-text">
设备类型
</div>
<div>{{ slotProps?.applianceType?.text }}</div>
<Ellipsis>
<div>{{ slotProps?.applianceType?.text }}</div>
</Ellipsis>
</j-col>
</j-row>
</template>

34
src/views/device/Category/components/modifyModal/index.vue
View File

@ -1,6 +1,6 @@
<!-- 新增编辑弹窗 -->
<template>
<a-modal
<j-modal
:title="props.title"
:maskClosable="false"
destroy-on-close
@ -11,38 +11,38 @@
cancelText="取消"
v-bind="layout"
>
<a-form
<j-form
layout="vertical"
ref="formRef"
:rules="rules"
:model="formModel"
>
<a-form-item label="名称" name="name">
<a-input
<j-form-item label="名称" name="name">
<j-input
v-model:value="formModel.name"
:maxlength="64"
placeholder="请输入名称"
/>
</a-form-item>
<a-form-item label="排序" name="sortIndex">
<a-input-number
</j-form-item>
<j-form-item label="排序" name="sortIndex">
<j-input-number
style="width: 100%"
id="inputNumber"
v-model:value="formModel.sortIndex"
:min="1"
placeholder="请输入排序"
/>
</a-form-item>
<a-form-item label="说明">
<a-textarea
</j-form-item>
<j-form-item label="说明">
<j-textarea
v-model:value="formModel.description"
show-count
:maxlength="200"
placeholder="请输入说明"
/>
</a-form-item>
</a-form>
</a-modal>
</j-form-item>
</j-form>
</j-modal>
</template>
<script setup lang="ts" name="modifyModal">
import { PropType } from 'vue';
@ -111,20 +111,20 @@ const submitData = async () => {
if (props.isChild === 1) {
addParams.value = {
...formModel.value,
sortIndex:
childArr.value[childArr.value.length - 1].sortIndex + 1,
// sortIndex:
// childArr.value[childArr.value.length - 1].sortIndex + 1,
parentId: addObj.value.id,
};
} else if (props.isChild === 2) {
addParams.value = {
parentId: addObj.value.id,
...formModel.value,
sortIndex: 1,
// sortIndex: 1,
};
} else if (props.isChild === 3) {
addParams.value = {
...formModel.value,
sortIndex: arr.value[arr.value.length - 1].sortIndex + 1,
// sortIndex: arr.value[arr.value.length - 1].sortIndex + 1,
};
}
const res = await saveTree(addParams.value);

67
src/views/device/Category/index.vue
View File

@ -1,12 +1,12 @@
<!--产品分类 -->
<template>
<a-card class="product-category">
<Search
<page-container>
<pro-search
:columns="query.columns"
target="category"
@search="handleSearch"
/>
<JTable
<JProTable
ref="tableRef"
:columns="table.columns"
:dataSource="dataSource"
@ -25,46 +25,38 @@
:loading="tableLoading"
>
<template #headerTitle>
<a-button type="primary" @click="add"
><plus-outlined />新增</a-button
<PermissionButton
type="primary"
@click="add"
hasPermission="device/Category:add"
>
<template #icon><AIcon type="PlusOutlined" /></template>
新增
</PermissionButton>
</template>
<template #action="slotProps">
<a-space :size="16">
<a-tooltip
<j-space :size="16">
<template
v-for="i in getActions(slotProps, 'table')"
:key="i.key"
v-bind="i.tooltip"
>
<a-popconfirm
v-if="i.popConfirm"
v-bind="i.popConfirm"
<PermissionButton
:disabled="i.disabled"
>
<a-button
:disabled="i.disabled"
style="padding: 0"
type="link"
><AIcon :type="i.icon"
/></a-button>
</a-popconfirm>
<a-button
style="padding: 0"
:popConfirm="i.popConfirm"
:hasPermission="'device/Category:' + i.key"
:tooltip="{
...i.tooltip,
}"
@click="i.onClick"
type="link"
v-else
@click="i.onClick && i.onClick(slotProps)"
style="padding: 0px"
>
<a-button
:disabled="i.disabled"
style="padding: 0"
type="link"
><AIcon :type="i.icon"
/></a-button>
</a-button>
</a-tooltip>
</a-space>
<template #icon><AIcon :type="i.icon" /></template>
</PermissionButton>
</template>
</j-space>
</template>
</JTable>
</JProTable>
<!-- 新增和编辑弹窗 -->
<ModifyModal
ref="modifyRef"
@ -74,7 +66,7 @@
:isChild="isChild"
@refresh="refresh"
/>
</a-card>
</page-container>
</template>
<script lang="ts" name="Category" setup>
import { queryTree, deleteTree } from '@/api/device/category';
@ -146,6 +138,7 @@ const getTableData = async () => {
if (res.status === 200) {
dataSource.value = res.result;
}
tableLoading.value = false;
};
getTableData();
/**
@ -168,7 +161,7 @@ const getActions = (
if (!data) return [];
const actions = [
{
key: 'edit',
key: 'update',
text: '编辑',
tooltip: {
title: '编辑',
@ -238,8 +231,8 @@ const table = reactive({
},
{
title: '说明',
dataIndex: 'describe',
key: 'describe',
dataIndex: 'description',
key: 'description',
},
{
title: '操作',

2
src/views/device/DashBoard/index.vue
View File

@ -336,7 +336,7 @@ const setDevMesChartOption = (
grid: {
top: '2%',
bottom: '5%',
left: maxY > 100000 ? '90px' : '50px',
left: maxY > 100000 ? '90px' : '60px',
right: '50px',
},
series: [

2
src/views/device/Instance/Detail/Log/index.vue
View File

@ -1,6 +1,6 @@
<template>
<j-card>
<j-advanced-search
<pro-search
:columns="columns"
target="device-instance-log"
@search="handleSearch"

2
src/views/device/Instance/Detail/Running/Event/index.vue
View File

@ -1,5 +1,5 @@
<template>
<j-advanced-search class="search" type="simple" :columns="columns" target="device-instance-running-events" @search="handleSearch" />
<pro-search class="search" type="simple" :columns="columns" target="device-instance-running-events" @search="handleSearch" />
<JProTable
ref="eventsRef"
:columns="columns"

10
src/views/device/Instance/Detail/index.vue
View File

@ -191,15 +191,17 @@ watch(
() => route.params.id,
(newId) => {
if (newId) {
instanceStore.tabActiveKey = 'Info';
instanceStore.refresh(newId as string);
instanceStore.refresh(String(newId));
getStatus(String(newId));
}
},
{ immediate: true, deep: true },
);
onMounted(() => {
instanceStore.tabActiveKey = history.state?.params?.tab || 'Info'
})
const onBack = () => {
menuStory.jumpPage('device/Instance');
};
@ -282,7 +284,7 @@ watchEffect(() => {
tab: 'OPC UA',
});
}
if (instanceStore.current.deviceType?.value === 'gateway') {
if (instanceStore.current.deviceType?.value === 'gateway' && !keys.includes('ChildDevice')) {
// 产品类型为网关的情况下才显示此模块
list.value.push({
key: 'ChildDevice',

13
src/views/device/Instance/index.vue
View File

@ -1,6 +1,6 @@
<template>
<page-container>
<j-advanced-search
<pro-search
:columns="columns"
target="device-instance"
@search="handleSearch"
@ -289,6 +289,7 @@ import { queryTree } from '@/api/device/category';
import { useMenuStore } from '@/store/menu';
import type { ActionsType } from './typings';
import dayjs from 'dayjs';
import { throttle } from 'lodash-es';
const instanceRef = ref<Record<string, any>>({});
const params = ref<Record<string, any>>({});
@ -315,7 +316,7 @@ const columns = [
key: 'id',
search: {
type: 'string',
defaultTermType: 'eq'
defaultTermType: 'eq',
},
},
{
@ -324,7 +325,7 @@ const columns = [
key: 'name',
search: {
type: 'string',
first: true
first: true,
},
},
{
@ -524,6 +525,12 @@ const paramsFormat = (
}
};
onMounted(() => {
if(history.state?.params?.type === 'add'){
handleAdd()
}
})
const handleParams = (config: Record<string, any>) => {
const _terms: Record<string, any> = {};
paramsFormat(config, _terms);

12
src/views/rule-engine/DashBoard/components/NewAlarm.vue
View File

@ -16,22 +16,22 @@
}}
</div>
<div class="new-alarm-item-content">
<a-tooltip
<j-tooltip
:title="item.alarmName"
placement="topLeft"
>
<a @click="()=>{return jumpDetail(item)}">{{ item.alarmName }}</a>
</a-tooltip>
</j-tooltip>
</div>
<div class="new-alarm-item-state">
<a-badge
<j-badge
:status="
item.state?.value === 'warning'
? 'error'
: 'default'
"
>
</a-badge>
</j-badge>
<span
:class="
item.state?.value === 'warning'
@ -55,7 +55,7 @@
</ul>
</div>
<div v-else class="empty-body">
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE"></a-empty>
<j-empty :image="Empty.PRESENTED_IMAGE_SIMPLE"></j-empty>
</div>
</div>
</template>
@ -73,7 +73,7 @@ const props = defineProps({
});
const menuStore = useMenuStore();
const jumpDetail = (item:any) =>{
menuStore.jumpPage(`rule-engine/Alarm/Log/Detail`,{id:item.id},{detail:true});
menuStore.jumpPage(`rule-engine/Alarm/Log/Detail`,{id:item.id,detail:true});
}
</script>
<style scoped lang="less">

30
src/views/rule-engine/DashBoard/index.vue
View File

@ -1,8 +1,8 @@
<template>
<page-container>
<div class="DashBoardBox">
<a-row :gutter="24">
<a-col :span="6">
<j-row :gutter="24">
<j-col :span="6">
<TopCard
title="今日告警"
:value="state.today"
@ -10,33 +10,33 @@
>
<Charts :options="state.fifteenOptions"></Charts>
</TopCard>
</a-col>
<a-col :span="6">
</j-col>
<j-col :span="6">
<TopCard
title="告警配置"
:value="state.config"
:footer="alarmState"
:img="getImage('/device/device-number.png')"
></TopCard>
</a-col>
<a-col :span="12">
</j-col>
<j-col :span="12">
<NewAlarm :alarm-list="state.alarmList"></NewAlarm>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="24">
</j-col>
</j-row>
<j-row :gutter="24">
<j-col :span="24">
<div class="alarm-card">
<Guide>
<template #title>
<span style="margin-right: 24px">告警统计</span>
<a-select
<j-select
style="width: 40%"
v-model:value="queryCodition.targetType"
:options="
isNoCommunity ? selectOpt1 : selectOpt2
"
@change="selectChange"
></a-select>
></j-select>
</template>
<template #extra>
<TimeSelect
@ -63,13 +63,13 @@
</li>
</ul>
<div v-else class="empty-body">
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE"></a-empty>
<j-empty :image="Empty.PRESENTED_IMAGE_SIMPLE"></j-empty>
</div>
</div>
</div>
</div>
</a-col>
</a-row>
</j-col>
</j-row>
</div>
</page-container>
</template>

15
src/views/rule-engine/Scene/Save/action/ListItem/Item.vue
View File

@ -343,6 +343,11 @@
@cancel="onPropsCancel"
/>
</template>
<TriggerAlarm
:id="_data.id"
v-if="triggerVisible"
@close="triggerVisible = false"
/>
</div>
</template>
@ -353,6 +358,12 @@ import { PropType } from 'vue';
import { ActionsType, ParallelType } from '../../../typings';
import Modal from '../Modal/index.vue';
import ActionTypeComponent from '../Modal/ActionTypeComponent.vue';
import TriggerAlarm from '../TriggerAlarm/index.vue';
import { useSceneStore } from '@/store/scene';
import { storeToRefs } from 'pinia';
const sceneStore = useSceneStore();
const { data: _data } = storeToRefs(sceneStore);
const props = defineProps({
branchesName: {
@ -438,8 +449,8 @@ const onAdd = () => {
};
const onType = (_type: string) => {
actionType.value = _type
}
actionType.value = _type;
};
const onPropsOk = (data: ActionsType, options?: any) => {
emit('update', data, options);

131
src/views/rule-engine/Scene/Save/action/TriggerAlarm/index.vue Normal file
View File

@ -0,0 +1,131 @@
<template>
<j-modal
:width="1000"
@cancel="emit('close')"
@ok="emit('close')"
visible
title="关联此场景的告警"
>
<div style="margin-bottom: 24px">关联告警数量：{{ count }}</div>
<JProTable
:columns="columns"
:request="queryAlarmList"
model="TABLE"
:bodyStyle="{ padding: 0 }"
:defaultParams="{
sorts: [{ name: 'createTime', order: 'desc' }],
terms: [
{
terms: [
{
column: 'id',
value: id,
termType: 'rule-bind-alarm',
},
],
},
],
}"
>
<template #level="slotProps">
{{ levelList.find(i => slotProps.level === i.level)?.title || '' }}
</template>
<template #targetType="slotProps">
{{ map[slotProps.targetType] }}
</template>
<template #state="slotProps">
<j-badge
:text="slotProps.state?.text"
:status="
slotProps.state?.value === 'disabled'
? 'error'
: 'success'
"
/>
</template>
</JProTable>
</j-modal>
</template>
<script setup lang="ts">
import { queryAlarmList } from '@/api/rule-engine/scene';
import {
getAlarmLevel,
getAlarmConfigCount,
} from '@/api/rule-engine/dashboard';
const props = defineProps({
id: {
type: String,
default: '',
},
});
const emit = defineEmits(['close']);
const count = ref<number>(0);
const levelList = ref<any[]>([]);
const map = {
product: '产品',
device: '设备',
org: '组织',
other: '其他',
};
const columns = [
{
dataIndex: 'name',
fixed: 'left',
ellipsis: true,
title: '名称',
},
{
dataIndex: 'targetType',
title: '类型',
scopedSlots: true,
},
{
dataIndex: 'level',
title: '告警级别',
scopedSlots: true,
},
{
dataIndex: 'state',
title: '状态',
scopedSlots: true,
},
{
dataIndex: 'description',
title: '说明',
ellipsis: true,
},
];
watch(
() => props.id,
(newId) => {
if (newId) {
getAlarmConfigCount({
terms: [
{
column: 'id$rule-bind-alarm',
value: newId,
},
],
}).then((resp) => {
if (resp.status === 200) {
count.value = (resp.result || 0) as number;
}
});
}
},
{ immediate: true },
);
onMounted(() => {
getAlarmLevel().then((resp) => {
if (resp.status === 200) {
levelList.value = resp.result?.levels || []
}
});
});
</script>