Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev
This commit is contained in:
commit
e1e6bea2a7
|
@ -50,7 +50,7 @@
|
||||||
<j-input
|
<j-input
|
||||||
v-else-if="typeMap.get(itemType) === 'file'"
|
v-else-if="typeMap.get(itemType) === 'file'"
|
||||||
v-model:value="myValue"
|
v-model:value="myValue"
|
||||||
placeholder="请输入图片链接"
|
placeholder="请输入链接"
|
||||||
allowClear
|
allowClear
|
||||||
@change='inputChange'
|
@change='inputChange'
|
||||||
>
|
>
|
||||||
|
|
|
@ -14,6 +14,7 @@
|
||||||
placeholder="请选择指令类型"
|
placeholder="请选择指令类型"
|
||||||
v-model:value="modelRef.messageType"
|
v-model:value="modelRef.messageType"
|
||||||
show-search
|
show-search
|
||||||
|
@change="onTypeChange"
|
||||||
>
|
>
|
||||||
<j-select-option value="READ_PROPERTY"
|
<j-select-option value="READ_PROPERTY"
|
||||||
>读取属性</j-select-option
|
>读取属性</j-select-option
|
||||||
|
@ -108,7 +109,7 @@
|
||||||
/>
|
/>
|
||||||
</j-form-item>
|
</j-form-item>
|
||||||
</j-col>
|
</j-col>
|
||||||
<j-col :span="24" v-if="modelRef.messageType === 'INVOKE_FUNCTION'">
|
<j-col :span="24" v-if="modelRef.messageType === 'INVOKE_FUNCTION'" class="inputs">
|
||||||
<j-form-item
|
<j-form-item
|
||||||
:name="['message', 'functionId']"
|
:name="['message', 'functionId']"
|
||||||
label="功能"
|
label="功能"
|
||||||
|
@ -137,7 +138,8 @@
|
||||||
:span="24"
|
:span="24"
|
||||||
v-if="
|
v-if="
|
||||||
modelRef.messageType === 'INVOKE_FUNCTION' &&
|
modelRef.messageType === 'INVOKE_FUNCTION' &&
|
||||||
modelRef.message.functionId
|
modelRef.message?.functionId &&
|
||||||
|
modelRef.message?.inputs?.length
|
||||||
"
|
"
|
||||||
class="inputs"
|
class="inputs"
|
||||||
>
|
>
|
||||||
|
@ -184,6 +186,8 @@ const props = defineProps({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:modelValue'])
|
||||||
|
|
||||||
const editRef = ref();
|
const editRef = ref();
|
||||||
|
|
||||||
const modelRef = reactive({
|
const modelRef = reactive({
|
||||||
|
@ -192,7 +196,7 @@ const modelRef = reactive({
|
||||||
properties: undefined,
|
properties: undefined,
|
||||||
functionId: undefined,
|
functionId: undefined,
|
||||||
inputs: [],
|
inputs: [],
|
||||||
value: undefined
|
value: undefined,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -207,12 +211,21 @@ const onPropertyChange = (val: string) => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const onTypeChange = () => {
|
||||||
|
modelRef.message = {
|
||||||
|
properties: undefined,
|
||||||
|
functionId: undefined,
|
||||||
|
inputs: [],
|
||||||
|
value: undefined,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => props.modelValue,
|
() => props.modelValue,
|
||||||
(newVal) => {
|
(newVal) => {
|
||||||
if (newVal) {
|
if (newVal) {
|
||||||
Object.assign(modelRef, newVal);
|
Object.assign(modelRef, newVal);
|
||||||
if(newVal?.message?.properties){
|
if (newVal?.message?.properties) {
|
||||||
onPropertyChange(newVal?.message?.properties);
|
onPropertyChange(newVal?.message?.properties);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -244,10 +257,13 @@ const saveBtn = () =>
|
||||||
formRef.value
|
formRef.value
|
||||||
.validate()
|
.validate()
|
||||||
.then(async (_data: any) => {
|
.then(async (_data: any) => {
|
||||||
await editRef.value.onSave().catch(() => {
|
if (modelRef.message.inputs?.length) {
|
||||||
resolve(false)
|
await editRef.value?.onSave().catch(() => {
|
||||||
})
|
resolve(false);
|
||||||
resolve(_data)
|
});
|
||||||
|
}
|
||||||
|
emit('update:modelValue', _data)
|
||||||
|
resolve(_data);
|
||||||
})
|
})
|
||||||
.catch((err: any) => {
|
.catch((err: any) => {
|
||||||
resolve(err);
|
resolve(err);
|
||||||
|
|
|
@ -1,20 +1,48 @@
|
||||||
<template>
|
<template>
|
||||||
<j-card>
|
<j-card>
|
||||||
<div class="diagnose">
|
<div class="diagnose">
|
||||||
<div class="diagnose-header" :style="{background: headerColorMap.get(topState)}">
|
<div
|
||||||
|
class="diagnose-header"
|
||||||
|
:style="{ background: headerColorMap.get(topState) }"
|
||||||
|
>
|
||||||
<div class="diagnose-top">
|
<div class="diagnose-top">
|
||||||
<div class="diagnose-img">
|
<div class="diagnose-img">
|
||||||
<div v-if="topState === 'loading'" style="width: 100%; height: 100%; position: relative">
|
<div
|
||||||
<img :src="headerImgMap.get(topState)" style="height: 100%; position: absolute; z-index: 2" />
|
v-if="topState === 'loading'"
|
||||||
<img :src="getImage('/diagnose/loading-1.png')" style="height: 100%" />
|
style="
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
:src="headerImgMap.get(topState)"
|
||||||
|
style="
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
:src="getImage('/diagnose/loading-1.png')"
|
||||||
|
style="height: 100%"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<img v-else :src="headerImgMap.get(topState)" style="height: 100%" />
|
<img
|
||||||
|
v-else
|
||||||
|
:src="headerImgMap.get(topState)"
|
||||||
|
style="height: 100%"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="diagnose-text">
|
<div class="diagnose-text">
|
||||||
<div class="diagnose-title">{{headerTitleMap.get(topState)}}</div>
|
<div class="diagnose-title">
|
||||||
|
{{ headerTitleMap.get(topState) }}
|
||||||
|
</div>
|
||||||
<div class="diagnose-desc">
|
<div class="diagnose-desc">
|
||||||
<template v-if="topState !== 'loading'">{{headerDescMap.get(topState)}}</template>
|
<template v-if="topState !== 'loading'">{{
|
||||||
<template v-else>已诊断{{count}}个</template>
|
headerDescMap.get(topState)
|
||||||
|
}}</template>
|
||||||
|
<template v-else>已诊断{{ count }}个</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -28,33 +56,60 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="diagnose-radio">
|
<div class="diagnose-radio">
|
||||||
<div class="diagnose-radio-item" :class="item.key === 'message' && topState !== 'success' ? 'disabled' : ''" v-for="item in tabList" :key="item.key" :style="activeKey === item.key ? {...activeStyle} : {}" @click="onTabChange(item.key)">
|
<div
|
||||||
{{item.text}}
|
class="diagnose-radio-item"
|
||||||
|
:class="
|
||||||
|
item.key === 'message' && topState !== 'success'
|
||||||
|
? 'disabled'
|
||||||
|
: ''
|
||||||
|
"
|
||||||
|
v-for="item in tabList"
|
||||||
|
:key="item.key"
|
||||||
|
:style="
|
||||||
|
activeKey === item.key ? { ...activeStyle } : {}
|
||||||
|
"
|
||||||
|
@click="onTabChange(item.key)"
|
||||||
|
>
|
||||||
|
{{ item.text }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Message v-show="activeKey === 'message'" />
|
<template v-if="!first">
|
||||||
<Status v-show="activeKey !== 'message'" :providerType="providerType" @countChange="countChange" @percentChange="percentChange" @stateChange="stateChange" />
|
<Message v-show="activeKey === 'message'" />
|
||||||
|
</template>
|
||||||
|
<Status
|
||||||
|
v-show="activeKey !== 'message'"
|
||||||
|
:providerType="providerType"
|
||||||
|
@countChange="countChange"
|
||||||
|
@percentChange="percentChange"
|
||||||
|
@stateChange="stateChange"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</j-card>
|
</j-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { headerImgMap, headerColorMap, headerTitleMap, headerDescMap, progressMap } from './util'
|
import {
|
||||||
|
headerImgMap,
|
||||||
|
headerColorMap,
|
||||||
|
headerTitleMap,
|
||||||
|
headerDescMap,
|
||||||
|
progressMap,
|
||||||
|
} from './util';
|
||||||
import { getImage } from '@/utils/comm';
|
import { getImage } from '@/utils/comm';
|
||||||
import Status from './Status/index'
|
import Status from './Status/index';
|
||||||
import Message from './Message/index.vue'
|
import Message from './Message/index.vue';
|
||||||
import { useInstanceStore } from '@/store/instance';
|
import { useInstanceStore } from '@/store/instance';
|
||||||
|
|
||||||
type TypeProps = 'network' | 'child-device' | 'media' | 'cloud' | 'channel'
|
type TypeProps = 'network' | 'child-device' | 'media' | 'cloud' | 'channel';
|
||||||
|
|
||||||
const instanceStore = useInstanceStore()
|
const instanceStore = useInstanceStore();
|
||||||
|
|
||||||
const tabList = [
|
const tabList = [
|
||||||
{ key: 'status', text: '连接状态' },
|
{ key: 'status', text: '连接状态' },
|
||||||
{ key: 'message', text: '消息通信' },
|
{ key: 'message', text: '消息通信' },
|
||||||
];
|
];
|
||||||
|
|
||||||
const activeStyle = {
|
const activeStyle = {
|
||||||
|
@ -64,139 +119,141 @@ const activeStyle = {
|
||||||
color: '#000000BF',
|
color: '#000000BF',
|
||||||
};
|
};
|
||||||
|
|
||||||
const topState = ref<'loading' | 'success' | 'error'>('loading')
|
const topState = ref<'loading' | 'success' | 'error'>('loading');
|
||||||
const count = ref<number>(0)
|
const count = ref<number>(0);
|
||||||
const percent = ref<number>(0)
|
const percent = ref<number>(0);
|
||||||
const activeKey = ref<'status' | 'message'>('status')
|
const activeKey = ref<'status' | 'message'>('status');
|
||||||
const providerType = ref()
|
const providerType = ref();
|
||||||
|
|
||||||
provide('topState', topState)
|
const first = ref<boolean>(true);
|
||||||
|
|
||||||
|
provide('topState', topState);
|
||||||
|
|
||||||
const onTabChange = (key: 'status' | 'message') => {
|
const onTabChange = (key: 'status' | 'message') => {
|
||||||
if(topState.value === 'success'){
|
if (topState.value === 'success') {
|
||||||
activeKey.value = key
|
activeKey.value = key;
|
||||||
}
|
}
|
||||||
}
|
first.value = false
|
||||||
|
};
|
||||||
|
|
||||||
const percentChange = (num: number) => {
|
const percentChange = (num: number) => {
|
||||||
if(num === 0){
|
if (num === 0) {
|
||||||
percent.value = 0
|
percent.value = 0;
|
||||||
} else if( percent.value < 100 && !num) {
|
} else if (percent.value < 100 && !num) {
|
||||||
percent.value += 20
|
percent.value += 20;
|
||||||
} else {
|
} else {
|
||||||
percent.value = num
|
percent.value = num;
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
const stateChange = (_type: 'loading' | 'success' | 'error') => {
|
const stateChange = (_type: 'loading' | 'success' | 'error') => {
|
||||||
topState.value = _type
|
topState.value = _type;
|
||||||
}
|
};
|
||||||
|
|
||||||
const countChange = (num: number) => {
|
const countChange = (num: number) => {
|
||||||
count.value = num
|
count.value = num;
|
||||||
}
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
const provider = instanceStore.current?.accessProvider;
|
const provider = instanceStore.current?.accessProvider;
|
||||||
if (provider === 'fixed-media' || provider === 'gb28181-2016') {
|
if (provider === 'fixed-media' || provider === 'gb28181-2016') {
|
||||||
providerType.value = 'media'
|
providerType.value = 'media';
|
||||||
} else if (provider === 'OneNet' || provider === 'Ctwing') {
|
} else if (provider === 'OneNet' || provider === 'Ctwing') {
|
||||||
providerType.value = 'cloud'
|
providerType.value = 'cloud';
|
||||||
} else if (provider === 'modbus-tcp' || provider === 'opc-ua') {
|
} else if (provider === 'modbus-tcp' || provider === 'opc-ua') {
|
||||||
providerType.value = 'channel'
|
providerType.value = 'channel';
|
||||||
} else if (provider === 'child-device') {
|
} else if (provider === 'child-device') {
|
||||||
providerType.value = 'child-device'
|
providerType.value = 'child-device';
|
||||||
} else {
|
} else {
|
||||||
providerType.value = 'network'
|
providerType.value = 'network';
|
||||||
}
|
}
|
||||||
topState.value = 'loading';
|
topState.value = 'loading';
|
||||||
})
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.diagnose {
|
.diagnose {
|
||||||
.diagnose-header {
|
.diagnose-header {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 150px;
|
height: 150px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
padding: 15px 25px;
|
padding: 15px 25px;
|
||||||
|
|
||||||
.diagnose-top {
|
.diagnose-top {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.diagnose-img {
|
.diagnose-img {
|
||||||
width: 65px;
|
width: 65px;
|
||||||
height: 65px;
|
height: 65px;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.diagnose-text {
|
.diagnose-text {
|
||||||
.diagnose-title {
|
.diagnose-title {
|
||||||
color: #000c;
|
color: #000c;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diagnose-desc {
|
||||||
|
color: rgba(0, 0, 0, 0.65);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.diagnose-desc {
|
.diagnose-progress {
|
||||||
color: rgba(0, 0, 0, 0.65);
|
width: 100%;
|
||||||
font-size: 14px;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.diagnose-progress {
|
.diagnose-radio {
|
||||||
width: 100%;
|
position: absolute;
|
||||||
}
|
bottom: 0;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
.diagnose-radio {
|
.diagnose-radio-item {
|
||||||
position: absolute;
|
width: 150px;
|
||||||
bottom: 0;
|
height: 35px;
|
||||||
display: flex;
|
margin-right: 8px;
|
||||||
|
color: #00000073;
|
||||||
.diagnose-radio-item {
|
line-height: 35px;
|
||||||
width: 150px;
|
text-align: center;
|
||||||
height: 35px;
|
background: #f2f2f2;
|
||||||
margin-right: 8px;
|
border-radius: 2px 2px 0 0;
|
||||||
color: #00000073;
|
cursor: pointer;
|
||||||
line-height: 35px;
|
&.disabled {
|
||||||
text-align: center;
|
cursor: not-allowed;
|
||||||
background: #f2f2f2;
|
}
|
||||||
border-radius: 2px 2px 0 0;
|
}
|
||||||
cursor: pointer;
|
|
||||||
&.disabled {
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.diagnose-loading {
|
.diagnose-loading {
|
||||||
animation: diagnose-loading 2s linear infinite;
|
animation: diagnose-loading 2s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes diagnose-loading {
|
@keyframes diagnose-loading {
|
||||||
0% {
|
0% {
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
25% {
|
25% {
|
||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
50% {
|
50% {
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
75% {
|
75% {
|
||||||
transform: rotate(270deg);
|
transform: rotate(270deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: rotate(360deg);
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
|
@ -84,17 +84,55 @@
|
||||||
<j-badge v-else status="error" text="未绑定" />
|
<j-badge v-else status="error" text="未绑定" />
|
||||||
</template>
|
</template>
|
||||||
<template v-if="column.key === 'action'">
|
<template v-if="column.key === 'action'">
|
||||||
<j-tooltip title="解绑">
|
<j-space>
|
||||||
<j-popconfirm
|
<PermissionButton
|
||||||
title="确认解绑"
|
type="link"
|
||||||
:disabled="!record.id"
|
:disabled="!record.id"
|
||||||
@confirm="unbind(record.id)"
|
:popConfirm="{
|
||||||
|
title: '确认解绑?',
|
||||||
|
onConfirm: unbind(record.id),
|
||||||
|
}"
|
||||||
|
style="padding: 0 5px"
|
||||||
|
hasPermission="device/Instance:update"
|
||||||
|
:tooltip="{
|
||||||
|
title: '解绑',
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
<j-button type="link" :disabled="!record.id"
|
<AIcon type="icon-jiebang" />
|
||||||
><AIcon type="icon-jiebang"
|
</PermissionButton>
|
||||||
/></j-button>
|
<template v-if="record.id">
|
||||||
</j-popconfirm>
|
<PermissionButton
|
||||||
</j-tooltip>
|
type="link"
|
||||||
|
:disabled="!record.id"
|
||||||
|
style="padding: 0 5px"
|
||||||
|
:popConfirm="{
|
||||||
|
title:
|
||||||
|
record.state.value === 'enabled'
|
||||||
|
? '确认禁用?'
|
||||||
|
: '确认启用?',
|
||||||
|
onConfirm: onAction(record),
|
||||||
|
}"
|
||||||
|
hasPermission="device/Instance:update"
|
||||||
|
:tooltip="{
|
||||||
|
title:
|
||||||
|
record.state.value === 'enabled'
|
||||||
|
? '禁用'
|
||||||
|
: '启用',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<AIcon
|
||||||
|
v-if="
|
||||||
|
record.state.value === 'enabled'
|
||||||
|
"
|
||||||
|
type="StopOutlined"
|
||||||
|
/>
|
||||||
|
<AIcon
|
||||||
|
v-else
|
||||||
|
type="PlayCircleOutlined"
|
||||||
|
/>
|
||||||
|
</PermissionButton>
|
||||||
|
</template>
|
||||||
|
</j-space>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
</j-table>
|
</j-table>
|
||||||
|
@ -110,7 +148,7 @@
|
||||||
/>
|
/>
|
||||||
</j-spin>
|
</j-spin>
|
||||||
<j-card v-else>
|
<j-card v-else>
|
||||||
<JEmpty description='暂无数据,请配置物模型' style="margin: 10% 0" />
|
<JEmpty description="暂无数据,请配置物模型" style="margin: 10% 0" />
|
||||||
</j-card>
|
</j-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -171,7 +209,7 @@ const filterOption = (input: string, option: any) => {
|
||||||
const instanceStore = useInstanceStore();
|
const instanceStore = useInstanceStore();
|
||||||
const metadata = JSON.parse(instanceStore.current?.metadata || '{}');
|
const metadata = JSON.parse(instanceStore.current?.metadata || '{}');
|
||||||
const loading = ref<boolean>(false);
|
const loading = ref<boolean>(false);
|
||||||
const channelList = ref([]);
|
const channelList = ref<any[]>([]);
|
||||||
|
|
||||||
const modelRef = reactive({
|
const modelRef = reactive({
|
||||||
dataSource: [],
|
dataSource: [],
|
||||||
|
@ -204,13 +242,16 @@ const handleSearch = async () => {
|
||||||
}));
|
}));
|
||||||
console.log(metadata);
|
console.log(metadata);
|
||||||
if (_metadata && _metadata.length) {
|
if (_metadata && _metadata.length) {
|
||||||
const resp: any = await getEdgeMap(instanceStore.current?.parentId || '', {
|
const resp: any = await getEdgeMap(
|
||||||
deviceId: instanceStore.current.id,
|
instanceStore.current?.parentId || '',
|
||||||
query: {},
|
{
|
||||||
}).catch(() => {
|
deviceId: instanceStore.current.id,
|
||||||
|
query: {},
|
||||||
|
},
|
||||||
|
).catch(() => {
|
||||||
modelRef.dataSource = _metadata;
|
modelRef.dataSource = _metadata;
|
||||||
loading.value = false;
|
loading.value = false;
|
||||||
})
|
});
|
||||||
if (resp.status === 200) {
|
if (resp.status === 200) {
|
||||||
const array = resp.result?.[0].reduce((x: any, y: any) => {
|
const array = resp.result?.[0].reduce((x: any, y: any) => {
|
||||||
const metadataId = _metadata.find(
|
const metadataId = _metadata.find(
|
||||||
|
@ -231,10 +272,13 @@ const handleSearch = async () => {
|
||||||
|
|
||||||
const unbind = async (id: string) => {
|
const unbind = async (id: string) => {
|
||||||
if (id) {
|
if (id) {
|
||||||
const resp = await removeEdgeMap(instanceStore.current?.parentId || '', {
|
const resp = await removeEdgeMap(
|
||||||
deviceId: instanceStore.current.id,
|
instanceStore.current?.parentId || '',
|
||||||
idList: [id],
|
{
|
||||||
});
|
deviceId: instanceStore.current.id,
|
||||||
|
idList: [id],
|
||||||
|
},
|
||||||
|
);
|
||||||
if (resp.status === 200) {
|
if (resp.status === 200) {
|
||||||
message.success('操作成功!');
|
message.success('操作成功!');
|
||||||
handleSearch();
|
handleSearch();
|
||||||
|
@ -264,7 +308,10 @@ const onSave = () => {
|
||||||
provider: (arr[0] as any)?.provider,
|
provider: (arr[0] as any)?.provider,
|
||||||
requestList: arr,
|
requestList: arr,
|
||||||
};
|
};
|
||||||
const resp = await saveEdgeMap(instanceStore.current.parentId || '', submitData);
|
const resp = await saveEdgeMap(
|
||||||
|
instanceStore.current.parentId || '',
|
||||||
|
submitData,
|
||||||
|
);
|
||||||
if (resp.status === 200) {
|
if (resp.status === 200) {
|
||||||
message.success('操作成功!');
|
message.success('操作成功!');
|
||||||
handleSearch();
|
handleSearch();
|
||||||
|
@ -275,6 +322,30 @@ const onSave = () => {
|
||||||
console.log('error', err);
|
console.log('error', err);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const onAction = async (record: any) => {
|
||||||
|
const value = await formRef.value.validate();
|
||||||
|
const array = value.filter((item: any) => item.channelId);
|
||||||
|
const findArray = array.find((item: any) => item.id === record?.id);
|
||||||
|
const arr = {
|
||||||
|
...findArray,
|
||||||
|
state: record?.state.value === 'enabled' ? 'disabled' : 'enabled',
|
||||||
|
};
|
||||||
|
const filterArray = array.filter((item: any) => item.id !== record?.id);
|
||||||
|
const submitData = {
|
||||||
|
deviceId: instanceStore.current.id,
|
||||||
|
provider: array[0]?.provider,
|
||||||
|
requestList: [...filterArray, arr],
|
||||||
|
};
|
||||||
|
const resp = await saveEdgeMap(
|
||||||
|
instanceStore.current.parentId || '',
|
||||||
|
submitData,
|
||||||
|
);
|
||||||
|
if (resp.status === 200) {
|
||||||
|
message.success('操作成功!');
|
||||||
|
handleSearch();
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|
|
@ -50,10 +50,14 @@
|
||||||
:key="item.property"
|
:key="item.property"
|
||||||
>
|
>
|
||||||
<template #label>
|
<template #label>
|
||||||
<span style="margin-right: 5px">{{ item.name }}</span>
|
<Ellipsis style="margin-right: 5px;">
|
||||||
<j-tooltip v-if="item.description" :title="item.description"
|
{{ item.name }}
|
||||||
><AIcon type="QuestionCircleOutlined"
|
<j-tooltip
|
||||||
/></j-tooltip>
|
v-if="item.description"
|
||||||
|
:title="item.description"
|
||||||
|
><AIcon type="QuestionCircleOutlined"
|
||||||
|
/></j-tooltip>
|
||||||
|
</Ellipsis>
|
||||||
</template>
|
</template>
|
||||||
<span
|
<span
|
||||||
v-if="
|
v-if="
|
||||||
|
@ -64,10 +68,10 @@
|
||||||
>******</span
|
>******</span
|
||||||
>
|
>
|
||||||
<span v-else>
|
<span v-else>
|
||||||
<span>{{
|
<Ellipsis>{{
|
||||||
instanceStore.current?.configuration?.[item.property] ||
|
instanceStore.current?.configuration?.[item.property] ||
|
||||||
''
|
''
|
||||||
}}</span>
|
}}</Ellipsis>
|
||||||
<j-tooltip
|
<j-tooltip
|
||||||
v-if="isExit(item.property)"
|
v-if="isExit(item.property)"
|
||||||
:title="`有效值:${
|
:title="`有效值:${
|
||||||
|
|
|
@ -18,13 +18,18 @@
|
||||||
:span="1"
|
:span="1"
|
||||||
v-for="item in dataSource"
|
v-for="item in dataSource"
|
||||||
:key="item.objectId"
|
:key="item.objectId"
|
||||||
:label="item.relationName"
|
|
||||||
>{{
|
|
||||||
item?.related
|
|
||||||
? (item?.related || []).map((i) => i.name).join(',')
|
|
||||||
: ''
|
|
||||||
}}</j-descriptions-item
|
|
||||||
>
|
>
|
||||||
|
<template #label>
|
||||||
|
<Ellipsis>{{ item.relationName }}</Ellipsis>
|
||||||
|
</template>
|
||||||
|
<Ellipsis>
|
||||||
|
{{
|
||||||
|
item?.related
|
||||||
|
? (item?.related || []).map((i) => i.name).join(',')
|
||||||
|
: ''
|
||||||
|
}}
|
||||||
|
</Ellipsis>
|
||||||
|
</j-descriptions-item>
|
||||||
</j-descriptions>
|
</j-descriptions>
|
||||||
<Save v-if="visible" @save="saveBtn" @close="visible = false" />
|
<Save v-if="visible" @save="saveBtn" @close="visible = false" />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
<template #bodyCell="{ column, text, record }">
|
<template #bodyCell="{ column, text, record }">
|
||||||
<div style="width: 280px">
|
<div style="width: 280px">
|
||||||
<template v-if="['key', 'name'].includes(column.dataIndex)">
|
<template v-if="['key', 'name'].includes(column.dataIndex)">
|
||||||
<span>{{ text }}</span>
|
<Ellipsis>{{ text }}</Ellipsis>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<ValueItem
|
<ValueItem
|
||||||
|
|
|
@ -15,9 +15,12 @@
|
||||||
:span="1"
|
:span="1"
|
||||||
v-for="item in dataSource"
|
v-for="item in dataSource"
|
||||||
:key="item.key"
|
:key="item.key"
|
||||||
:label="`${item.name}(${item.key})`"
|
|
||||||
>{{ item?.value }}</j-descriptions-item
|
|
||||||
>
|
>
|
||||||
|
<template #label>
|
||||||
|
<Ellipsis>{{ `${item.name}(${item.key})` }}</Ellipsis>
|
||||||
|
</template>
|
||||||
|
<Ellipsis>{{ item?.value }}</Ellipsis>
|
||||||
|
</j-descriptions-item>
|
||||||
</j-descriptions>
|
</j-descriptions>
|
||||||
<Save v-if="visible" @close="visible = false" @save="saveBtn" />
|
<Save v-if="visible" @close="visible = false" @save="saveBtn" />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -399,6 +399,7 @@ import { marked } from 'marked';
|
||||||
import type { TableColumnType } from 'ant-design-vue';
|
import type { TableColumnType } from 'ant-design-vue';
|
||||||
import { useMenuStore } from '@/store/menu';
|
import { useMenuStore } from '@/store/menu';
|
||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
|
const tableRef = ref();
|
||||||
const formRef = ref();
|
const formRef = ref();
|
||||||
const menuStore = useMenuStore();
|
const menuStore = useMenuStore();
|
||||||
const permissionStore = usePermissionStore();
|
const permissionStore = usePermissionStore();
|
||||||
|
@ -959,7 +960,11 @@ const getData = async (accessId?: string) => {
|
||||||
if (metadata.value?.properties) {
|
if (metadata.value?.properties) {
|
||||||
metadata.value?.properties.forEach((item) => {
|
metadata.value?.properties.forEach((item) => {
|
||||||
if (
|
if (
|
||||||
item.name === '流传输模式' && (!productStore.current?.configuration || !productStore.current?.configuration.hasOwnProperty(item.name))
|
item.name === '流传输模式' &&
|
||||||
|
(!productStore.current?.configuration ||
|
||||||
|
!productStore.current?.configuration.hasOwnProperty(
|
||||||
|
item.name,
|
||||||
|
))
|
||||||
) {
|
) {
|
||||||
formData.data[item.name] =
|
formData.data[item.name] =
|
||||||
item.type.expands?.defaultValue;
|
item.type.expands?.defaultValue;
|
||||||
|
@ -1046,7 +1051,14 @@ const getDetailInfo = () => {};
|
||||||
const add = () => {
|
const add = () => {
|
||||||
const url = menuStore.hasMenu('link/AccessConfig/Detail');
|
const url = menuStore.hasMenu('link/AccessConfig/Detail');
|
||||||
if (url) {
|
if (url) {
|
||||||
window.open(`${origin}/#${url}`);
|
const tab: any = window.open(`${origin}/#${url}?view=false`);
|
||||||
|
tab.onTabSaveSuccess = (value: any) => {
|
||||||
|
console.log(value);
|
||||||
|
if (value.status === 200) {
|
||||||
|
tableRef.value.reload();
|
||||||
|
handleClick(value.result)
|
||||||
|
}
|
||||||
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -50,9 +50,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div style="padding-top: 10px">
|
<div style="padding-top: 10px">
|
||||||
<j-descriptions size="small" :column="4">
|
<j-descriptions size="small" :column="4">
|
||||||
<j-descriptions-item
|
<j-descriptions-item label="设备数量"
|
||||||
label="设备数量"
|
|
||||||
style="cursor: pointer"
|
|
||||||
><span @click="jumpDevice">{{
|
><span @click="jumpDevice">{{
|
||||||
productStore.current?.count
|
productStore.current?.count
|
||||||
? productStore.current?.count
|
? productStore.current?.count
|
||||||
|
@ -116,8 +114,8 @@ import { message } from 'jetlinks-ui-components';
|
||||||
import { getImage } from '@/utils/comm';
|
import { getImage } from '@/utils/comm';
|
||||||
import encodeQuery from '@/utils/encodeQuery';
|
import encodeQuery from '@/utils/encodeQuery';
|
||||||
import { useMenuStore } from '@/store/menu';
|
import { useMenuStore } from '@/store/menu';
|
||||||
const menuStory = useMenuStore();
|
|
||||||
|
|
||||||
|
const menuStory = useMenuStore();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const checked = ref<boolean>(true);
|
const checked = ref<boolean>(true);
|
||||||
const productStore = useProductStore();
|
const productStore = useProductStore();
|
||||||
|
@ -141,7 +139,7 @@ const list = ref([
|
||||||
{
|
{
|
||||||
key: 'Metadata',
|
key: 'Metadata',
|
||||||
tab: '物模型',
|
tab: '物模型',
|
||||||
class:'objectModel'
|
class: 'objectModel',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'Device',
|
key: 'Device',
|
||||||
|
@ -163,12 +161,16 @@ watch(
|
||||||
productStore.reSet();
|
productStore.reSet();
|
||||||
productStore.tabActiveKey = 'Info';
|
productStore.tabActiveKey = 'Info';
|
||||||
productStore.refresh(newId as string);
|
productStore.refresh(newId as string);
|
||||||
console.log(productStore);
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ immediate: true, deep: true },
|
{ immediate: true, deep: true },
|
||||||
);
|
);
|
||||||
|
watch(
|
||||||
|
() => productStore.current,
|
||||||
|
() => {
|
||||||
|
getProtocol();
|
||||||
|
},
|
||||||
|
);
|
||||||
const onBack = () => {};
|
const onBack = () => {};
|
||||||
|
|
||||||
const onTabChange = (e: string) => {
|
const onTabChange = (e: string) => {
|
||||||
|
@ -228,10 +230,40 @@ const getProtocol = async () => {
|
||||||
(item: any) => item.id === 'transparentCodec',
|
(item: any) => item.id === 'transparentCodec',
|
||||||
);
|
);
|
||||||
if (paring) {
|
if (paring) {
|
||||||
list.value.push({
|
list.value = [
|
||||||
key: 'DataAnalysis',
|
{
|
||||||
tab: '数据解析',
|
key: 'Info',
|
||||||
});
|
tab: '配置信息',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'Metadata',
|
||||||
|
tab: '物模型',
|
||||||
|
class: 'objectModel',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'Device',
|
||||||
|
tab: '设备接入',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'DataAnalysis',
|
||||||
|
tab: '数据解析',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}else{
|
||||||
|
list.value = [
|
||||||
|
{
|
||||||
|
key: 'Info',
|
||||||
|
tab: '配置信息',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'Metadata',
|
||||||
|
tab: '物模型',
|
||||||
|
class: 'objectModel',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'Device',
|
||||||
|
tab: '设备接入',
|
||||||
|
},]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -256,7 +288,6 @@ const jumpDevice = () => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getProtocol();
|
|
||||||
if (history.state?.params?.tab) {
|
if (history.state?.params?.tab) {
|
||||||
productStore.tabActiveKey = history.state?.params?.tab;
|
productStore.tabActiveKey = history.state?.params?.tab;
|
||||||
}
|
}
|
||||||
|
|
|
@ -206,14 +206,14 @@ const handleImport = async () => {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
const { id } = route.params || {}
|
const { id } = route.params || {}
|
||||||
if (data.metadata === 'alink') {
|
if (data.metadata === 'alink') {
|
||||||
const res = await convertMetadata('from', 'alink', data.import)
|
const res = await convertMetadata('from', 'alink', data.import).catch(err => err)
|
||||||
if (res.status === 200) {
|
if (res.status === 200) {
|
||||||
const metadata = operateLimits(res.result)
|
const metadata = operateLimits(res.result)
|
||||||
if (props?.type === 'device') {
|
if (props?.type === 'device') {
|
||||||
await saveMetadata(id as string, metadata)
|
await saveMetadata(id as string, metadata).catch(err => err)
|
||||||
// instanceStore.setCurrent(JSON.parse(metadata || '{}'))
|
// instanceStore.setCurrent(JSON.parse(metadata || '{}'))
|
||||||
} else {
|
} else {
|
||||||
await modify(id as string, { metadata: metadata })
|
await modify(id as string, { metadata: metadata }).catch(err => err)
|
||||||
// productStore.setCurrent(JSON.parse(metadata || '{}'))
|
// productStore.setCurrent(JSON.parse(metadata || '{}'))
|
||||||
}
|
}
|
||||||
loading.value = false
|
loading.value = false
|
||||||
|
|
|
@ -500,6 +500,13 @@ const saveData = () => {
|
||||||
if (resp.status === 200) {
|
if (resp.status === 200) {
|
||||||
onlyMessage('操作成功', 'success');
|
onlyMessage('操作成功', 'success');
|
||||||
history.back();
|
history.back();
|
||||||
|
if ((window as any).onTabSaveSuccess) {
|
||||||
|
console.log(123);
|
||||||
|
if (resp.result?.id) {
|
||||||
|
(window as any).onTabSaveSuccess(resp);
|
||||||
|
setTimeout(() => window.close(), 300);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((err) => {});
|
.catch((err) => {});
|
||||||
|
|
Loading…
Reference in New Issue