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:
leiqiaochu 2023-03-22 14:44:14 +08:00
parent 47c3d7533e b0e5654ad1
commit 7754814afe
13 changed files with 325 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ValueItem/index.vue
View File

@ -50,7 +50,7 @@
<j-input
v-else-if="typeMap.get(itemType) === 'file'"
v-model:value="myValue"
placeholder="请输入图片链接"
placeholder="请输入链接"
allowClear
@change='inputChange'
>

32
src/views/Northbound/DuerOS/Detail/command/index.vue
View File

@ -14,6 +14,7 @@
placeholder="请选择指令类型"
v-model:value="modelRef.messageType"
show-search
@change="onTypeChange"
>
<j-select-option value="READ_PROPERTY"
>读取属性</j-select-option
@ -108,7 +109,7 @@
/>
</j-form-item>
</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
:name="['message', 'functionId']"
label="功能"
@ -137,7 +138,8 @@
:span="24"
v-if="
modelRef.messageType === 'INVOKE_FUNCTION' &&
modelRef.message.functionId
modelRef.message?.functionId &&
modelRef.message?.inputs?.length
"
class="inputs"
>
@ -184,6 +186,8 @@ const props = defineProps({
},
});
const emit = defineEmits(['update:modelValue'])
const editRef = ref();
const modelRef = reactive({
@ -192,7 +196,7 @@ const modelRef = reactive({
properties: undefined,
functionId: undefined,
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(
() => props.modelValue,
(newVal) => {
if (newVal) {
Object.assign(modelRef, newVal);
if(newVal?.message?.properties){
if (newVal?.message?.properties) {
onPropertyChange(newVal?.message?.properties);
}
}
@ -244,10 +257,13 @@ const saveBtn = () =>
formRef.value
.validate()
.then(async (_data: any) => {
await editRef.value.onSave().catch(() => {
resolve(false)
})
resolve(_data)
if (modelRef.message.inputs?.length) {
await editRef.value?.onSave().catch(() => {
resolve(false);
});
}
emit('update:modelValue', _data)
resolve(_data);
})
.catch((err: any) => {
resolve(err);

271
src/views/device/Instance/Detail/Diagnose/index.vue
View File

@ -1,20 +1,48 @@
<template>
<j-card>
<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-img">
<div v-if="topState === 'loading'" 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
v-if="topState === 'loading'"
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>
<img v-else :src="headerImgMap.get(topState)" style="height: 100%" />
<img
v-else
:src="headerImgMap.get(topState)"
style="height: 100%"
/>
</div>
<div class="diagnose-text">
<div class="diagnose-title">{{headerTitleMap.get(topState)}}</div>
<div class="diagnose-title">
{{ headerTitleMap.get(topState) }}
</div>
<div class="diagnose-desc">
<template v-if="topState !== 'loading'">{{headerDescMap.get(topState)}}</template>
<template v-else>已诊断{{count}}个</template>
<template v-if="topState !== 'loading'">{{
headerDescMap.get(topState)
}}</template>
<template v-else>已诊断{{ count }}个</template>
</div>
</div>
</div>
@ -28,33 +56,60 @@
/>
</div>
<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)">
{{item.text}}
<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)"
>
{{ item.text }}
</div>
</div>
</div>
<div>
<Message v-show="activeKey === 'message'" />
<Status v-show="activeKey !== 'message'" :providerType="providerType" @countChange="countChange" @percentChange="percentChange" @stateChange="stateChange" />
<template v-if="!first">
<Message v-show="activeKey === 'message'" />
</template>
<Status
v-show="activeKey !== 'message'"
:providerType="providerType"
@countChange="countChange"
@percentChange="percentChange"
@stateChange="stateChange"
/>
</div>
</div>
</j-card>
</template>
<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 Status from './Status/index'
import Message from './Message/index.vue'
import Status from './Status/index';
import Message from './Message/index.vue';
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 = [
{ key: 'status', text: '连接状态' },
{ key: 'message', text: '消息通信' },
{ key: 'status', text: '连接状态' },
{ key: 'message', text: '消息通信' },
];
const activeStyle = {
@ -64,139 +119,141 @@ const activeStyle = {
color: '#000000BF',
};
const topState = ref<'loading' | 'success' | 'error'>('loading')
const count = ref<number>(0)
const percent = ref<number>(0)
const activeKey = ref<'status' | 'message'>('status')
const providerType = ref()
const topState = ref<'loading' | 'success' | 'error'>('loading');
const count = ref<number>(0);
const percent = ref<number>(0);
const activeKey = ref<'status' | 'message'>('status');
const providerType = ref();
provide('topState', topState)
const first = ref<boolean>(true);
provide('topState', topState);
const onTabChange = (key: 'status' | 'message') => {
if(topState.value === 'success'){
activeKey.value = key
if (topState.value === 'success') {
activeKey.value = key;
}
}
first.value = false
};
const percentChange = (num: number) => {
if(num === 0){
percent.value = 0
} else if( percent.value < 100 && !num) {
percent.value += 20
if (num === 0) {
percent.value = 0;
} else if (percent.value < 100 && !num) {
percent.value += 20;
} else {
percent.value = num
percent.value = num;
}
}
};
const stateChange = (_type: 'loading' | 'success' | 'error') => {
topState.value = _type
}
topState.value = _type;
};
const countChange = (num: number) => {
count.value = num
}
count.value = num;
};
onMounted(() => {
const provider = instanceStore.current?.accessProvider;
if (provider === 'fixed-media' || provider === 'gb28181-2016') {
providerType.value = 'media'
providerType.value = 'media';
} else if (provider === 'OneNet' || provider === 'Ctwing') {
providerType.value = 'cloud'
providerType.value = 'cloud';
} else if (provider === 'modbus-tcp' || provider === 'opc-ua') {
providerType.value = 'channel'
providerType.value = 'channel';
} else if (provider === 'child-device') {
providerType.value = 'child-device'
providerType.value = 'child-device';
} else {
providerType.value = 'network'
providerType.value = 'network';
}
topState.value = 'loading';
})
});
</script>
<style lang="less" scoped>
.diagnose {
.diagnose-header {
position: relative;
width: 100%;
height: 150px;
margin-bottom: 20px;
padding: 15px 25px;
.diagnose-header {
position: relative;
width: 100%;
height: 150px;
margin-bottom: 20px;
padding: 15px 25px;
.diagnose-top {
display: flex;
width: 100%;
.diagnose-top {
display: flex;
width: 100%;
.diagnose-img {
width: 65px;
height: 65px;
margin-right: 20px;
}
.diagnose-img {
width: 65px;
height: 65px;
margin-right: 20px;
}
.diagnose-text {
.diagnose-title {
color: #000c;
font-weight: 700;
font-size: 25px;
.diagnose-text {
.diagnose-title {
color: #000c;
font-weight: 700;
font-size: 25px;
}
.diagnose-desc {
color: rgba(0, 0, 0, 0.65);
font-size: 14px;
}
}
}
.diagnose-desc {
color: rgba(0, 0, 0, 0.65);
font-size: 14px;
.diagnose-progress {
width: 100%;
}
}
}
.diagnose-progress {
width: 100%;
}
.diagnose-radio {
position: absolute;
bottom: 0;
display: flex;
.diagnose-radio {
position: absolute;
bottom: 0;
display: flex;
.diagnose-radio-item {
width: 150px;
height: 35px;
margin-right: 8px;
color: #00000073;
line-height: 35px;
text-align: center;
background: #f2f2f2;
border-radius: 2px 2px 0 0;
cursor: pointer;
&.disabled {
cursor: not-allowed;
.diagnose-radio-item {
width: 150px;
height: 35px;
margin-right: 8px;
color: #00000073;
line-height: 35px;
text-align: center;
background: #f2f2f2;
border-radius: 2px 2px 0 0;
cursor: pointer;
&.disabled {
cursor: not-allowed;
}
}
}
}
}
}
}
.diagnose-loading {
animation: diagnose-loading 2s linear infinite;
animation: diagnose-loading 2s linear infinite;
}
@keyframes diagnose-loading {
0% {
transform: rotate(0deg);
}
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
</style>

113
src/views/device/Instance/Detail/EdgeMap/index.vue
View File

@ -84,17 +84,55 @@
<j-badge v-else status="error" text="未绑定" />
</template>
<template v-if="column.key === 'action'">
<j-tooltip title="解绑">
<j-popconfirm
title="确认解绑"
<j-space>
<PermissionButton
type="link"
: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"
/></j-button>
</j-popconfirm>
</j-tooltip>
<AIcon type="icon-jiebang" />
</PermissionButton>
<template v-if="record.id">
<PermissionButton
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>
</j-table>
@ -110,7 +148,7 @@
/>
</j-spin>
<j-card v-else>
<JEmpty description='暂无数据，请配置物模型' style="margin: 10% 0" />
<JEmpty description="暂无数据，请配置物模型" style="margin: 10% 0" />
</j-card>
</template>
@ -171,7 +209,7 @@ const filterOption = (input: string, option: any) => {
const instanceStore = useInstanceStore();
const metadata = JSON.parse(instanceStore.current?.metadata || '{}');
const loading = ref<boolean>(false);
const channelList = ref([]);
const channelList = ref<any[]>([]);
const modelRef = reactive({
dataSource: [],
@ -204,13 +242,16 @@ const handleSearch = async () => {
}));
console.log(metadata);
if (_metadata && _metadata.length) {
const resp: any = await getEdgeMap(instanceStore.current?.parentId || '', {
deviceId: instanceStore.current.id,
query: {},
}).catch(() => {
const resp: any = await getEdgeMap(
instanceStore.current?.parentId || '',
{
deviceId: instanceStore.current.id,
query: {},
},
).catch(() => {
modelRef.dataSource = _metadata;
loading.value = false;
})
});
if (resp.status === 200) {
const array = resp.result?.[0].reduce((x: any, y: any) => {
const metadataId = _metadata.find(
@ -231,10 +272,13 @@ const handleSearch = async () => {
const unbind = async (id: string) => {
if (id) {
const resp = await removeEdgeMap(instanceStore.current?.parentId || '', {
deviceId: instanceStore.current.id,
idList: [id],
});
const resp = await removeEdgeMap(
instanceStore.current?.parentId || '',
{
deviceId: instanceStore.current.id,
idList: [id],
},
);
if (resp.status === 200) {
message.success('操作成功！');
handleSearch();
@ -264,7 +308,10 @@ const onSave = () => {
provider: (arr[0] as any)?.provider,
requestList: arr,
};
const resp = await saveEdgeMap(instanceStore.current.parentId || '', submitData);
const resp = await saveEdgeMap(
instanceStore.current.parentId || '',
submitData,
);
if (resp.status === 200) {
message.success('操作成功！');
handleSearch();
@ -275,6 +322,30 @@ const onSave = () => {
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>
<style lang="less" scoped>

15
src/views/device/Instance/Detail/Function/components/Simple.vue
View File

@ -7,11 +7,12 @@
</j-space>
</div>
<j-tabs v-model="activeKey" tab-position="left">
<j-tab-pane
v-for="func in newFunctions"
:key="func.id"
:tab="func.name"
>
<j-tab-pane v-for="func in newFunctions" :key="func.id">
<template #tab>
<Ellipsis style="width: 100px; text-align: left">
{{ func.name }}
</Ellipsis>
</template>
<j-row :gutter="30">
<j-col :span="15">
<j-form :ref="`${func.id}Ref`" :model="func">
@ -49,7 +50,7 @@
:name="['table', index, 'value']"
:rules="{
required: true,
message: '',
message: '该字段为必填字段',
}"
has-feedback
>
@ -106,7 +107,7 @@
</j-col>
<j-col :span="9">
<h6>执行结果：</h6>
<span class="execute-result">
<span :ref="`result${func.id}Ref`" class="execute-result">
{{ func.executeResult }}
</span>
</j-col>

16
src/views/device/Instance/Detail/Info/components/Config/index.vue
View File

@ -50,10 +50,14 @@
:key="item.property"
>
<template #label>
<span style="margin-right: 5px">{{ item.name }}</span>
<j-tooltip v-if="item.description" :title="item.description"
><AIcon type="QuestionCircleOutlined"
/></j-tooltip>
<Ellipsis style="margin-right: 5px;">
{{ item.name }}
<j-tooltip
v-if="item.description"
:title="item.description"
><AIcon type="QuestionCircleOutlined"
/></j-tooltip>
</Ellipsis>
</template>
<span
v-if="
@ -64,10 +68,10 @@
>******</span
>
<span v-else>
<span>{{
<Ellipsis>{{
instanceStore.current?.configuration?.[item.property] ||
''
}}</span>
}}</Ellipsis>
<j-tooltip
v-if="isExit(item.property)"
:title="`有效值:${

17
src/views/device/Instance/Detail/Info/components/Relation/index.vue
View File

@ -18,13 +18,18 @@
:span="1"
v-for="item in dataSource"
: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>
<Save v-if="visible" @save="saveBtn" @close="visible = false" />
</div>

2
src/views/device/Instance/Detail/Info/components/Tags/Save.vue
View File

@ -16,7 +16,7 @@
<template #bodyCell="{ column, text, record }">
<div style="width: 280px">
<template v-if="['key', 'name'].includes(column.dataIndex)">
<span>{{ text }}</span>
<Ellipsis>{{ text }}</Ellipsis>
</template>
<template v-else>
<ValueItem

7
src/views/device/Instance/Detail/Info/components/Tags/index.vue
View File

@ -15,9 +15,12 @@
:span="1"
v-for="item in dataSource"
: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>
<Save v-if="visible" @close="visible = false" @save="saveBtn" />
</div>

6
src/views/device/components/Metadata/Import/index.vue
View File

@ -206,14 +206,14 @@ const handleImport = async () => {
loading.value = true
const { id } = route.params || {}
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) {
const metadata = operateLimits(res.result)
if (props?.type === 'device') {
await saveMetadata(id as string, metadata)
await saveMetadata(id as string, metadata).catch(err => err)
// instanceStore.setCurrent(JSON.parse(metadata || '{}'))
} else {
await modify(id as string, { metadata: metadata })
await modify(id as string, { metadata: metadata }).catch(err => err)
// productStore.setCurrent(JSON.parse(metadata || '{}'))
}
loading.value = false

6
src/views/media/Device/Channel/Live/index.vue
View File

@ -140,7 +140,11 @@ const handleRecord = async () => {
* 刷新
*/
const handleRefresh = () => {
player.value.play();
// player.value.play();
url.value = '';
setTimeout(() => {
mediaStart();
}, 500);
};
/**

1
src/views/media/Device/Playback/index.vue
View File

@ -303,7 +303,6 @@ const queryServiceRecords = async (date: Dayjs) => {
const cloudView = (startTime: number, endTime: number) => {
type.value = 'cloud';
cloudTime.value = { startTime, endTime };
queryServiceRecords(time.value!);
};
/**

2
src/views/media/Device/index.vue
View File

@ -13,7 +13,7 @@
sorts: [{ name: 'createTime', order: 'desc' }],
}"
:params="params"
:gridColumn="2"
:gridColumn="4"
>
<template #headerTitle>
<PermissionButton