feat: websocket
This commit is contained in:
100011797
parent
fbd917328c
commit
909abdbc2a
|
|
@ -19,5 +19,8 @@ module.exports = {
|
|||
|
||||
rules: {
|
||||
// override/add rules settings here, such as:
|
||||
},
|
||||
globals: {
|
||||
NodeJS: 'readonly'
|
||||
}
|
||||
};
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
"@commitlint/config-conventional": "^17.4.0",
|
||||
"@types/lodash-es": "^4.17.6",
|
||||
"@types/moment": "^2.13.0",
|
||||
"@types/node": "^18.11.17",
|
||||
"@types/node": "^18.14.0",
|
||||
"@vitejs/plugin-vue": "^4.0.0",
|
||||
"@vuemap/unplugin-resolver": "^1.0.4",
|
||||
"autoprefixer": "^10.4.13",
|
||||
|
|
|
|||
|
|
@ -27,4 +27,11 @@ export const deleteSearchHistory = (target:string, id:string) => server.remove<S
|
|||
/**
|
||||
* 获取当前系统版本
|
||||
*/
|
||||
export const systemVersion = () => server.get<{edition?: string}>('/system/version')
|
||||
export const systemVersion = () => server.get<{edition?: string}>('/system/version')
|
||||
|
||||
/**
|
||||
* 聚合查询
|
||||
* @param data
|
||||
* @returns
|
||||
*/
|
||||
export const queryDashboard = (data: Record<string, any>) => server.post(`/dashboard/_multi`, data)
|
||||
|
|
@ -314,3 +314,29 @@ export const getGatewayDetail = (id: string) => server.get(`/gateway/device/${id
|
|||
* @returns 单位列表
|
||||
*/
|
||||
export const getUnit = () => server.get<UnitType[]>(`/protocol/units`)
|
||||
|
||||
/**
|
||||
* 执行功能
|
||||
* @param deviceId 设备id
|
||||
* @param functionId 功能id
|
||||
* @param data
|
||||
* @returns
|
||||
*/
|
||||
export const executeFunctions = (deviceId: string, functionId: string, data: any) => server.post(`/device/invoked/${deviceId}/function/${functionId}`, data)
|
||||
|
||||
/**
|
||||
* 读取属性
|
||||
* @param deviceId 设备id
|
||||
* @param data
|
||||
* @returns
|
||||
*/
|
||||
export const readProperties = (deviceId: string, data: any) => server.post(`/device/instance/${deviceId}/properties/_read`, data)
|
||||
|
||||
/**
|
||||
* 设置属性
|
||||
* @param deviceId 设备id
|
||||
* @param data
|
||||
* @returns
|
||||
*/
|
||||
export const settingProperties = (deviceId: string, data: any) => server.put(`/device/instance/${deviceId}/property`, data)
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,127 @@
|
|||
import { Observable } from 'rxjs'
|
||||
import { BASE_API_PATH } from '@/utils/variable';
|
||||
import { notification } from 'ant-design-vue';
|
||||
import { getToken } from '@/utils/comm';
|
||||
|
||||
let ws: any = null
|
||||
let count = 0 // 重连计数
|
||||
let timer: NodeJS.Timeout = null
|
||||
let lockReconnect = false // 避免重复连接
|
||||
const total = 100 // 重连总次数
|
||||
const subs = {}
|
||||
const timeout = 5000
|
||||
const tempQueue: any[] = [] // websocket未连接上时，缓存消息列
|
||||
|
||||
export const initWebSocket = () => {
|
||||
if (ws) {
|
||||
return ws
|
||||
}
|
||||
const token = getToken()
|
||||
const url = `${document.location.protocol.replace('http', 'ws')}//${document.location.host}${BASE_API_PATH}/messaging/${token}?:X_Access_Token=${token}`;
|
||||
if (count < total) {
|
||||
count += 1
|
||||
ws = new WebSocket(url)
|
||||
|
||||
ws.onopen = () => {
|
||||
count = 0
|
||||
timer = setInterval(heartCheck, 2000)
|
||||
if (tempQueue.length > 0) {
|
||||
for (let i = tempQueue.length - 1; i >= 0; i--) {
|
||||
ws.send(tempQueue[i])
|
||||
tempQueue.splice(i, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ws.onclose = () => {
|
||||
console.log('onerror', count)
|
||||
ws = null
|
||||
reconnect()
|
||||
}
|
||||
|
||||
ws.onmessage = (msg: Record<string, any>) => {
|
||||
const data = JSON.parse(msg.data)
|
||||
|
||||
if (data.type === 'error') {
|
||||
notification.error({ key: 'wserr', message: data.message })
|
||||
}
|
||||
|
||||
if (subs[data.requestId]) {
|
||||
if (data.type === 'complete') {
|
||||
subs[data.requestId].forEach((item: Record<string, any>) => {
|
||||
item.complete()
|
||||
})
|
||||
} else if (data.type === 'result') {
|
||||
subs[data.requestId].forEach((element: Record<string, any>) => {
|
||||
element.next(data)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ws.onerror = () => {
|
||||
console.log('onerror', count)
|
||||
ws = null
|
||||
reconnect()
|
||||
}
|
||||
|
||||
return ws
|
||||
}
|
||||
}
|
||||
|
||||
export const getWebSocket = (id: string, topic: string, parameter: Record<string, any>) => new Observable(subscriber => {
|
||||
if (!subs[id]) {
|
||||
subs[id] = []
|
||||
}
|
||||
|
||||
subs[id].push({
|
||||
next(val: Record<string, any>) {
|
||||
subscriber.next(val)
|
||||
},
|
||||
complete() {
|
||||
subscriber.complete()
|
||||
}
|
||||
})
|
||||
|
||||
const msg = JSON.stringify({ id, topic, parameter, type: 'sub' })
|
||||
const thisWs = initWebSocket()
|
||||
if (thisWs) {
|
||||
if (thisWs.readyState === WebSocket.OPEN) {
|
||||
thisWs.send(msg)
|
||||
} else {
|
||||
tempQueue.push(msg)
|
||||
}
|
||||
}
|
||||
|
||||
return () => {
|
||||
const unsub = JSON.stringify({ id, type: 'unsub' })
|
||||
delete subs[id]
|
||||
if (thisWs) {
|
||||
thisWs.send(unsub)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* 重连
|
||||
*/
|
||||
function reconnect() {
|
||||
timer && clearInterval(timer)
|
||||
if (lockReconnect) {
|
||||
return
|
||||
}
|
||||
lockReconnect = true
|
||||
timer = setTimeout(() => {
|
||||
initWebSocket()
|
||||
lockReconnect = false
|
||||
}, timeout * count)
|
||||
}
|
||||
|
||||
/**
|
||||
* 心跳检测
|
||||
*/
|
||||
function heartCheck() {
|
||||
if (ws) {
|
||||
ws.send(JSON.stringify({ type: 'ping' }))
|
||||
}
|
||||
}
|
||||
|
|
@ -72,18 +72,9 @@ const columns = [
|
|||
},
|
||||
];
|
||||
|
||||
// const dataSource = ref<Record<any, any>[]>(_props.modelValue || []);
|
||||
|
||||
const dataSource = computed({
|
||||
get: () => {
|
||||
return _props.modelValue || {
|
||||
messageType: undefined,
|
||||
message: {
|
||||
properties: undefined,
|
||||
functionId: undefined,
|
||||
inputs: []
|
||||
}
|
||||
}
|
||||
return _props.modelValue || []
|
||||
},
|
||||
set: (val: any) => {
|
||||
_emit('update:modelValue', val);
|
||||
|
|
|
|||
|
|
@ -1,60 +1,118 @@
|
|||
<template>
|
||||
<div class="function">
|
||||
<a-form
|
||||
:layout="'vertical'"
|
||||
ref="formRef"
|
||||
:model="modelRef"
|
||||
>
|
||||
<a-form :layout="'vertical'" ref="formRef" :model="modelRef">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="6">
|
||||
<a-form-item name="messageType" :rules="{
|
||||
required: true,
|
||||
message: '请选择',
|
||||
}">
|
||||
<a-select placeholder="请选择" v-model:value="modelRef.messageType" show-search :filter-option="filterOption">
|
||||
<a-select-option value="READ_PROPERTY">读取属性</a-select-option>
|
||||
<a-select-option value="WRITE_PROPERTY">修改属性</a-select-option>
|
||||
<a-select-option value="INVOKE_FUNCTION">调用功能</a-select-option>
|
||||
<a-form-item
|
||||
name="type"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请选择',
|
||||
}"
|
||||
>
|
||||
<a-select
|
||||
placeholder="请选择"
|
||||
v-model:value="modelRef.type"
|
||||
show-search
|
||||
:filter-option="filterOption"
|
||||
>
|
||||
<a-select-option value="READ_PROPERTY"
|
||||
>读取属性</a-select-option
|
||||
>
|
||||
<a-select-option value="WRITE_PROPERTY"
|
||||
>修改属性</a-select-option
|
||||
>
|
||||
<a-select-option value="INVOKE_FUNCTION"
|
||||
>调用功能</a-select-option
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6" v-if="['READ_PROPERTY','WRITE_PROPERTY'].includes(modelRef.messageType)">
|
||||
<a-form-item :name="['message', 'properties']" :rules="{
|
||||
required: true,
|
||||
message: '请选择属性',
|
||||
}">
|
||||
<a-select placeholder="请选择属性" v-model:value="modelRef.message.properties" show-search :filter-option="filterOption">
|
||||
<a-select-option v-for="i in (metadata?.properties) || []" :key="i.id" :value="i.id" :label="i.name">{{i.name}}</a-select-option>
|
||||
<a-col
|
||||
:span="6"
|
||||
v-if="
|
||||
['READ_PROPERTY', 'WRITE_PROPERTY'].includes(
|
||||
modelRef.type,
|
||||
)
|
||||
"
|
||||
>
|
||||
<a-form-item
|
||||
name="properties"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请选择属性',
|
||||
}"
|
||||
>
|
||||
<a-select
|
||||
placeholder="请选择属性"
|
||||
v-model:value="modelRef.properties"
|
||||
show-search
|
||||
:filter-option="filterOption"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="i in metadata?.properties || []"
|
||||
:key="i.id"
|
||||
:value="i.id"
|
||||
:label="i.name"
|
||||
>{{ i.name }}</a-select-option
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6" v-if="modelRef.messageType === 'WRITE_PROPERTY'">
|
||||
<a-form-item :name="['message', 'value']" :rules="{
|
||||
required: true,
|
||||
message: '请输入值',
|
||||
}">
|
||||
<a-input />
|
||||
<a-col :span="6" v-if="modelRef.type === 'WRITE_PROPERTY'">
|
||||
<a-form-item
|
||||
name="propertyValue"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请输入值',
|
||||
}"
|
||||
>
|
||||
<a-input v-model:value="propertyValue" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6" v-if="modelRef.messageType === 'INVOKE_FUNCTION'">
|
||||
<a-form-item :name="['message', 'functionId']" :rules="{
|
||||
required: true,
|
||||
message: '请选择功能',
|
||||
}">
|
||||
<a-select placeholder="请选择功能" v-model:value="modelRef.message.functionId" show-search :filter-option="filterOption" @change="funcChange">
|
||||
<a-select-option v-for="i in (metadata?.functions) || []" :key="i.id" :value="i.id" :label="i.name">{{i.name}}</a-select-option>
|
||||
<a-col :span="6" v-if="modelRef.type === 'INVOKE_FUNCTION'">
|
||||
<a-form-item
|
||||
name="function"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请选择功能',
|
||||
}"
|
||||
>
|
||||
<a-select
|
||||
placeholder="请选择功能"
|
||||
v-model:value="modelRef.function"
|
||||
show-search
|
||||
:filter-option="filterOption"
|
||||
@change="funcChange"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="i in metadata?.functions || []"
|
||||
:key="i.id"
|
||||
:value="i.id"
|
||||
:label="i.name"
|
||||
>{{ i.name }}</a-select-option
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="4">
|
||||
<a-button type="primary" @click="saveBtn">发送</a-button>
|
||||
</a-col>
|
||||
<a-col :span="24" v-if="modelRef.messageType === 'INVOKE_FUNCTION' && modelRef.message.functionId">
|
||||
<a-form-item :name="['message', 'inputs']" label="参数列表" :rules="{
|
||||
required: true,
|
||||
message: '请输入参数列表',
|
||||
}">
|
||||
<EditTable v-model="modelRef.message.inputs"/>
|
||||
<a-col
|
||||
:span="24"
|
||||
v-if="
|
||||
modelRef.type === 'INVOKE_FUNCTION' && modelRef.function && modelRef.inputs.length
|
||||
"
|
||||
>
|
||||
<a-form-item
|
||||
name="inputs"
|
||||
label="参数列表"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请输入参数列表',
|
||||
}"
|
||||
>
|
||||
<EditTable v-model="modelRef.inputs" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
|
@ -64,9 +122,14 @@
|
|||
|
||||
<script lang="ts" setup>
|
||||
import { useInstanceStore } from '@/store/instance';
|
||||
import EditTable from './EditTable.vue'
|
||||
import EditTable from './EditTable.vue';
|
||||
import {
|
||||
executeFunctions,
|
||||
readProperties,
|
||||
settingProperties,
|
||||
} from '@/api/device/instance';
|
||||
|
||||
const instanceStore = useInstanceStore()
|
||||
const instanceStore = useInstanceStore();
|
||||
|
||||
const formRef = ref();
|
||||
|
||||
|
|
@ -80,48 +143,78 @@ type Emits = {
|
|||
const emit = defineEmits<Emits>();
|
||||
|
||||
const modelRef = reactive({
|
||||
messageType: undefined,
|
||||
message: {
|
||||
properties: undefined,
|
||||
functionId: undefined,
|
||||
inputs: []
|
||||
}
|
||||
})
|
||||
type: undefined,
|
||||
properties: undefined,
|
||||
function: undefined,
|
||||
inputs: [],
|
||||
propertyValue: undefined,
|
||||
});
|
||||
|
||||
const metadata = computed(() => {
|
||||
return JSON.parse(instanceStore.current?.metadata || '{}')
|
||||
})
|
||||
return JSON.parse(instanceStore.current?.metadata || '{}');
|
||||
});
|
||||
|
||||
const funcChange = (val: string) => {
|
||||
if(val){
|
||||
const arr = metadata.value?.functions.find((item: any) => item.id === val)?.inputs || []
|
||||
if (val) {
|
||||
const arr =
|
||||
metadata.value?.functions.find((item: any) => item.id === val)
|
||||
?.inputs || [];
|
||||
const list = arr.map((item: any) => {
|
||||
return {
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
value: undefined,
|
||||
valueType: item?.valueType?.type,
|
||||
}
|
||||
})
|
||||
modelRef.message.inputs = list
|
||||
};
|
||||
});
|
||||
modelRef.inputs = list;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const saveBtn = () => {
|
||||
formRef.value.validate()
|
||||
.then(() => {
|
||||
console.log(toRaw(modelRef))
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ saveBtn })
|
||||
formRef.value.validate().then(async () => {
|
||||
const values = toRaw(modelRef);
|
||||
let _inputs: any[] = [];
|
||||
if (modelRef.inputs.length) {
|
||||
_inputs = modelRef.inputs.filter((i: any) => !i.value);
|
||||
if (_inputs.length) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (values.type === 'INVOKE_FUNCTION') {
|
||||
const list = (modelRef.inputs || []).filter((it: any) => !!it.value);
|
||||
const obj = {};
|
||||
list.map((it: any) => {
|
||||
obj[it.id] = it.value;
|
||||
});
|
||||
await executeFunctions(
|
||||
instanceStore.current.id || '',
|
||||
values?.function || '',
|
||||
{
|
||||
...obj,
|
||||
},
|
||||
);
|
||||
} else {
|
||||
if (values.type === 'READ_PROPERTY') {
|
||||
await readProperties(instanceStore.current?.id || '', [
|
||||
values.properties,
|
||||
]);
|
||||
} else {
|
||||
await settingProperties(instanceStore.current?.id || '', {
|
||||
[values.properties || '']: values.propertyValue,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
defineExpose({ saveBtn });
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.function {
|
||||
padding: 15px;
|
||||
background-color: #e7eaec;
|
||||
padding: 15px;
|
||||
background-color: #e7eaec;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
<a-col :span="8">
|
||||
<div class="right-log">
|
||||
<TitleComponent data="日志" />
|
||||
<div :style="{ marginTop: 10 }">
|
||||
<div :style="{ marginTop: '10px' }">
|
||||
<template v-if="logList.length">
|
||||
<Log v-for="item in logList" :data="item" :key="item.key" />
|
||||
</template>
|
||||
|
|
@ -61,6 +61,10 @@ const messageArr = computed(() => {
|
|||
return arr.map(i => { return {...message[i], key: i}})
|
||||
})
|
||||
|
||||
const subscribeLog = () => {
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ const ManualInspection = defineComponent({
|
|||
<>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div class={styles.alert}>
|
||||
<span style={{ marginRight: 10 }}><AIcon type="InfoCircleOutlined" /></span>
|
||||
<span style={{ marginRight: '10px' }}><AIcon type="InfoCircleOutlined" /></span>
|
||||
请检查配置项是否填写正确，若您确定该项无需诊断可
|
||||
<Button type="link" style="padding: 0"
|
||||
onClick={() => {
|
||||
|
|
@ -30,7 +30,7 @@ const ManualInspection = defineComponent({
|
|||
忽略
|
||||
</Button>
|
||||
</div>
|
||||
<div style={{ marginTop: 10 }}>
|
||||
<div style={{ marginTop: '10px' }}>
|
||||
<Descriptions title={data?.data?.name} layout="vertical" bordered>
|
||||
{(data?.data?.properties || []).map((item: any) => (
|
||||
<Descriptions.Item
|
||||
|
|
@ -45,7 +45,7 @@ const ManualInspection = defineComponent({
|
|||
</div>
|
||||
{data?.data?.description ? (
|
||||
<div
|
||||
style={{ width: '50%', border: '1px solid #f0f0f0', padding: 10, borderLeft: 'none' }}
|
||||
style={{ width: '50%', border: '1px solid #f0f0f0', padding: '10px', borderLeft: 'none' }}
|
||||
>
|
||||
<h4>诊断项说明</h4>
|
||||
<p>{data?.data?.description}</p>
|
||||
|
|
@ -60,7 +60,7 @@ const ManualInspection = defineComponent({
|
|||
<>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div class={styles.alert}>
|
||||
<span style={{ marginRight: 10 }}><AIcon type="InfoCircleOutlined" /></span>
|
||||
<span style={{ marginRight: '10px' }}><AIcon type="InfoCircleOutlined" /></span>
|
||||
请检查配置项是否填写正确，若您确定该项无需诊断可
|
||||
<Button type="link" style="padding: 0"
|
||||
onClick={() => {
|
||||
|
|
@ -70,7 +70,7 @@ const ManualInspection = defineComponent({
|
|||
忽略
|
||||
</Button>
|
||||
</div>
|
||||
<div style={{ marginTop: 10 }}>
|
||||
<div style={{ marginTop: '10px' }}>
|
||||
<Descriptions title={data?.data?.name} layout="vertical" bordered>
|
||||
{data.configuration?.provider === 'OneNet' ? (
|
||||
<>
|
||||
|
|
@ -105,7 +105,7 @@ const ManualInspection = defineComponent({
|
|||
</div>
|
||||
{data?.configuration?.configuration?.description ? (
|
||||
<div
|
||||
style={{ width: '50%', border: '1px solid #f0f0f0', padding: 10, borderLeft: 'none' }}
|
||||
style={{ width: '50%', border: '1px solid #f0f0f0', padding: '10px', borderLeft: 'none' }}
|
||||
>
|
||||
<h4>诊断项说明</h4>
|
||||
<p>{data?.configuration?.configuration?.description}</p>
|
||||
|
|
@ -120,7 +120,7 @@ const ManualInspection = defineComponent({
|
|||
<>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div class={styles.alert}>
|
||||
<span style={{ marginRight: 10 }}><AIcon type="InfoCircleOutlined" /></span>
|
||||
<span style={{ marginRight: '10px' }}><AIcon type="InfoCircleOutlined" /></span>
|
||||
请检查配置项是否填写正确，若您确定该项无需诊断可
|
||||
<Button type="link" style="padding: 0"
|
||||
onClick={() => {
|
||||
|
|
@ -130,7 +130,7 @@ const ManualInspection = defineComponent({
|
|||
忽略
|
||||
</Button>
|
||||
</div>
|
||||
<div style={{ marginTop: 10 }}>
|
||||
<div style={{ marginTop: '10px' }}>
|
||||
<Descriptions title={data?.data?.name} layout="vertical" bordered>
|
||||
{data?.configuration?.configuration?.shareCluster ? (
|
||||
<>
|
||||
|
|
@ -180,9 +180,9 @@ const ManualInspection = defineComponent({
|
|||
</Descriptions>
|
||||
</div>
|
||||
</div>
|
||||
{data?.configuration?.configuration.description ? (
|
||||
{data?.configuration?.description ? (
|
||||
<div
|
||||
style={{ width: '50%', border: '1px solid #f0f0f0', padding: 10, borderLeft: 'none' }}
|
||||
style={{ width: '50%', border: '1px solid #f0f0f0', padding: '10px', borderLeft: 'none' }}
|
||||
>
|
||||
<h4>诊断项说明</h4>
|
||||
<p>{data?.configuration?.description}</p>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import { _deploy as _deployProduct } from "@/api/device/product"
|
|||
import _ from "lodash"
|
||||
import DiagnosticAdvice from './DiagnosticAdvice'
|
||||
import ManualInspection from './ManualInspection'
|
||||
import { deployDevice } from "@/api/initHome"
|
||||
|
||||
type TypeProps = 'network' | 'child-device' | 'media' | 'cloud' | 'channel'
|
||||
|
||||
|
|
@ -29,9 +30,9 @@ const Status = defineComponent({
|
|||
const status = ref<'loading' | 'finish'>('loading')
|
||||
|
||||
const device = ref(instanceStore.current)
|
||||
const gateway = ref<Partial<Record<string, any>>>() // 网关信息
|
||||
const parent = ref<Partial<Record<string, any>>>() // 父设备
|
||||
const product = ref<Partial<Record<string, any>>>() // 产品
|
||||
const gateway = ref<Partial<Record<string, any>>>({}) // 网关信息
|
||||
const parent = ref<Partial<Record<string, any>>>({}) // 父设备
|
||||
const product = ref<Partial<Record<string, any>>>({}) // 产品
|
||||
|
||||
const artificialVisible = ref<boolean>(false)
|
||||
const artificialData = ref<Partial<Record<string, any>>>()
|
||||
|
|
@ -1332,7 +1333,7 @@ const Status = defineComponent({
|
|||
unref(device)?.accessProvider &&
|
||||
gatewayList.includes(unref(device).accessProvider as string)
|
||||
) {
|
||||
const response = await queryProtocolDetail(unref(device).protocol, 'MQTT');
|
||||
const response: any = await queryProtocolDetail(unref(device).protocol, 'MQTT');
|
||||
if (response.status === 200) {
|
||||
if ((response.result?.routes || []).length > 0) {
|
||||
item.push(
|
||||
|
|
@ -1521,9 +1522,103 @@ const Status = defineComponent({
|
|||
<TitleComponent data="连接详情" />
|
||||
<Space>
|
||||
{
|
||||
status.value === 'finish' && unref(device).state?.value !== 'online' && <Button type="primary">一键修复</Button>
|
||||
status.value === 'finish' && unref(device).state?.value !== 'online' && <Button type="primary" onClick={async () => {
|
||||
let flag: boolean = true;
|
||||
if (
|
||||
Object.keys(unref(gateway)).length > 0 &&
|
||||
unref(gateway)?.state?.value !== 'enabled'
|
||||
) {
|
||||
const resp = await startGateway(unref(device).accessId || '');
|
||||
if (resp.status === 200) {
|
||||
list.value = modifyArrayList(list.value, {
|
||||
key: 'gateway',
|
||||
name: '设备接入网关',
|
||||
desc: '诊断设备接入网关状态是否正常，禁用状态将导致连接失败',
|
||||
status: 'success',
|
||||
text: '正常',
|
||||
info: null,
|
||||
});
|
||||
} else {
|
||||
flag = false;
|
||||
}
|
||||
}
|
||||
if (unref(product)?.state !== 1) {
|
||||
const resp = await _deployProduct(unref(device).productId || '');
|
||||
if (resp.status === 200) {
|
||||
list.value = modifyArrayList(list.value, {
|
||||
key: 'product',
|
||||
name: '产品状态',
|
||||
desc: '诊断产品状态是否正常，禁用状态将导致设备连接失败',
|
||||
status: 'success',
|
||||
text: '正常',
|
||||
info: null,
|
||||
});
|
||||
} else {
|
||||
flag = false;
|
||||
}
|
||||
}
|
||||
if (unref(device)?.state?.value === 'notActive') {
|
||||
const resp = await deployDevice(unref(device)?.id || '');
|
||||
if (resp.status === 200) {
|
||||
unref(device).state = { value: 'offline', text: '离线' };
|
||||
list.value = modifyArrayList(list.value, {
|
||||
key: 'device',
|
||||
name: '设备状态',
|
||||
desc: '诊断设备状态是否正常，禁用状态将导致设备连接失败',
|
||||
status: 'success',
|
||||
text: '正常',
|
||||
info: null,
|
||||
});
|
||||
} else {
|
||||
flag = false;
|
||||
}
|
||||
}
|
||||
if (props.providerType === 'network' || props.providerType === 'child-device') {
|
||||
const address = unref(gateway)?.channelInfo?.addresses || [];
|
||||
const _label = address.some((i: any) => i.health === -1);
|
||||
const __label = address.every((i: any) => i.health === 1);
|
||||
const health = _label ? -1 : __label ? 1 : 0;
|
||||
if (health === -1 && unref(gateway)?.channelId) {
|
||||
const res = await startNetwork(unref(gateway)?.channelId);
|
||||
if (res.status === 200) {
|
||||
list.value = modifyArrayList(list.value, {
|
||||
key: 'network',
|
||||
name: '网络组件',
|
||||
desc: '诊断网络组件配置是否正确，配置错误将导致设备连接失败',
|
||||
status: 'success',
|
||||
text: '正常',
|
||||
info: null,
|
||||
});
|
||||
} else {
|
||||
flag = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (props.providerType === 'child-device' && unref(device)?.parentId) {
|
||||
if (unref(parent)?.state?.value === 'notActive') {
|
||||
const resp = await deployDevice(unref(device)?.parentId || '');
|
||||
if (resp.status === 200) {
|
||||
list.value = modifyArrayList(list.value, {
|
||||
key: 'parent-device',
|
||||
name: '网关父设备',
|
||||
desc: '诊断网关父设备状态是否正常，禁用或离线将导致连接失败',
|
||||
status: 'success',
|
||||
text: '正常',
|
||||
info: null,
|
||||
});
|
||||
} else {
|
||||
flag = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (flag) {
|
||||
message.success('操作成功！');
|
||||
}
|
||||
}}>一键修复</Button>
|
||||
}
|
||||
<Button>重新诊断</Button>
|
||||
<Button onClick={() => {
|
||||
handleSearch()
|
||||
}}>重新诊断</Button>
|
||||
</Space>
|
||||
</div>
|
||||
<div class={styles["statusContent"]}>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<a-card :hoverable="true" class="card-box">
|
||||
<a-spin :spinning="loading">
|
||||
<!-- <a-spin :spinning="loading"> -->
|
||||
<div class="card-container">
|
||||
<div class="header">
|
||||
<div class="title">{{ _props.data.name }}</div>
|
||||
|
|
@ -24,14 +24,14 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="value">
|
||||
<ValueRender :data="data" />
|
||||
<ValueRender :data="data" :value="_props.data" />
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div style="color: rgba(0, 0, 0, .65); font-size: 12px">更新时间</div>
|
||||
<div class="time-value">{{data?.time || '--'}}</div>
|
||||
<div class="time-value">{{_props?.data?.timeString || '--'}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
<!-- </a-spin> -->
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
|
|
@ -47,13 +47,14 @@ const _props = defineProps({
|
|||
default: () => []
|
||||
},
|
||||
});
|
||||
const loading = ref<boolean>(true);
|
||||
// const loading = ref<boolean>(true);
|
||||
|
||||
watchEffect(() => {
|
||||
if (_props.data.name) {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
// watchEffect(() => {
|
||||
// if (_props.data) {
|
||||
// console.log(_props.data)
|
||||
// loading.value = false;
|
||||
// }
|
||||
// });
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="value">
|
||||
{{value}}
|
||||
{{value?.value || '--'}}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -13,8 +13,8 @@ const _data = defineProps({
|
|||
default: () => {},
|
||||
},
|
||||
value: {
|
||||
type: [Object, String, Number],
|
||||
default: '--'
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
|
|
@ -40,6 +40,7 @@ imgMap.set('obj', getImage('/running/obj.png'));
|
|||
const imgList = ['.jpg', '.png', '.swf', '.tiff'];
|
||||
const videoList = ['.m3u8', '.flv', '.mp4', '.rmvb', '.mvb'];
|
||||
const fileList = ['.txt', '.doc', '.xls', '.pdf', '.ppt', '.docx', '.xlsx', '.pptx'];
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -1,74 +1,95 @@
|
|||
<template>
|
||||
<JTable
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:bodyStyle="{padding: '0 0 0 20px'}"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<a-input-search
|
||||
placeholder="请输入名称"
|
||||
style="width: 300px; margin-bottom: 10px"
|
||||
@search="onSearch"
|
||||
v-model:value="value"
|
||||
:allowClear="true"
|
||||
/>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<PropertyCard :data="slotProps" :actions="getActions(slotProps)" />
|
||||
</template>
|
||||
<template #value="slotProps">
|
||||
<ValueRender :data="slotProps" />
|
||||
</template>
|
||||
<template #time="slotProps">
|
||||
{{slotProps.time || '--'}}
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<a-space :size="16">
|
||||
<a-tooltip
|
||||
v-for="i in getActions(slotProps)"
|
||||
:key="i.key"
|
||||
v-bind="i.tooltip"
|
||||
>
|
||||
<a-button
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
:disabled="i.disabled"
|
||||
@click="i.onClick && i.onClick(slotProps)"
|
||||
<a-spin :spinning="loading">
|
||||
<JTable
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:bodyStyle="{ padding: '0 0 0 20px' }"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<a-input-search
|
||||
placeholder="请输入名称"
|
||||
style="width: 300px; margin-bottom: 10px"
|
||||
@search="onSearch"
|
||||
v-model:value="value"
|
||||
:allowClear="true"
|
||||
/>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<PropertyCard
|
||||
:data="{ ...slotProps, ...propertyValue[slotProps?.id] }"
|
||||
:actions="getActions(slotProps)"
|
||||
/>
|
||||
</template>
|
||||
<template #value="slotProps">
|
||||
<ValueRender
|
||||
:data="slotProps"
|
||||
:value="propertyValue[slotProps?.id]"
|
||||
/>
|
||||
</template>
|
||||
<template #time="slotProps">
|
||||
{{ propertyValue[slotProps?.id]?.timeString || '--' }}
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<a-space :size="16">
|
||||
<a-tooltip
|
||||
v-for="i in getActions(slotProps)"
|
||||
:key="i.key"
|
||||
v-bind="i.tooltip"
|
||||
>
|
||||
<AIcon :type="i.icon" />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #paginationRender>
|
||||
<a-pagination
|
||||
size="small"
|
||||
:total="total"
|
||||
:showQuickJumper="false"
|
||||
:showSizeChanger="true"
|
||||
:current="pageIndex + 1"
|
||||
:pageSize="pageSize"
|
||||
:pageSizeOptions="['8', '12', '24', '60', '100']"
|
||||
:show-total="(num) => `第 ${pageIndex * pageSize + 1} - ${(pageIndex + 1) * pageSize > num ? num : (pageIndex + 1) * pageSize} 条/总共 ${num} 条`"
|
||||
@change="pageChange"
|
||||
/>
|
||||
</template>
|
||||
</JTable>
|
||||
<a-button
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
:disabled="i.disabled"
|
||||
@click="i.onClick && i.onClick(slotProps)"
|
||||
>
|
||||
<AIcon :type="i.icon" />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #paginationRender>
|
||||
<a-pagination
|
||||
size="small"
|
||||
:total="total"
|
||||
:showQuickJumper="false"
|
||||
:showSizeChanger="true"
|
||||
:current="pageIndex + 1"
|
||||
:pageSize="pageSize"
|
||||
:pageSizeOptions="['8', '12', '24', '60', '100']"
|
||||
:show-total="
|
||||
(num) =>
|
||||
`第 ${pageIndex * pageSize + 1} - ${
|
||||
(pageIndex + 1) * pageSize > num
|
||||
? num
|
||||
: (pageIndex + 1) * pageSize
|
||||
} 条/总共 ${num} 条`
|
||||
"
|
||||
@change="pageChange"
|
||||
/>
|
||||
</template>
|
||||
</JTable>
|
||||
</a-spin>
|
||||
<Save v-if="editVisible" @close="editVisible = false" :data="currentInfo" />
|
||||
<Indicators v-if="indicatorVisible" @close="indicatorVisible = false" :data="currentInfo" />
|
||||
<Indicators
|
||||
v-if="indicatorVisible"
|
||||
@close="indicatorVisible = false"
|
||||
:data="currentInfo"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import _ from "lodash"
|
||||
import { PropertyData } from "../../../typings"
|
||||
import PropertyCard from './PropertyCard.vue'
|
||||
import ValueRender from './ValueRender.vue'
|
||||
import Save from './Save.vue'
|
||||
import Indicators from './Indicators.vue'
|
||||
import { getProperty } from '@/api/device/instance'
|
||||
import { useInstanceStore } from "@/store/instance"
|
||||
import { message } from "ant-design-vue"
|
||||
|
||||
import _, { groupBy, throttle, toArray } from 'lodash-es';
|
||||
import { PropertyData } from '../../../typings';
|
||||
import PropertyCard from './PropertyCard.vue';
|
||||
import ValueRender from './ValueRender.vue';
|
||||
import Save from './Save.vue';
|
||||
import Indicators from './Indicators.vue';
|
||||
import { getProperty } from '@/api/device/instance';
|
||||
import { useInstanceStore } from '@/store/instance';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { getWebSocket } from '@/utils/websocket';
|
||||
import { map } from 'rxjs/operators';
|
||||
import { queryDashboard } from '@/api/comm';
|
||||
const columns = [
|
||||
{
|
||||
title: '名称',
|
||||
|
|
@ -79,7 +100,7 @@ const columns = [
|
|||
title: '值',
|
||||
dataIndex: 'value',
|
||||
key: 'value',
|
||||
scopedSlots: true
|
||||
scopedSlots: true,
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
|
|
@ -93,29 +114,35 @@ const columns = [
|
|||
key: 'action',
|
||||
scopedSlots: true,
|
||||
},
|
||||
]
|
||||
];
|
||||
|
||||
const _data = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
const value = ref<string>('')
|
||||
const dataSource = ref<PropertyData[]>([])
|
||||
const _dataSource = ref<PropertyData[]>([])
|
||||
const pageIndex = ref<number>(0)
|
||||
const pageSize = ref<number>(8)
|
||||
const total = ref<number>(0)
|
||||
const editVisible = ref<boolean>(false) // 编辑
|
||||
const detailVisible = ref<boolean>(false) // 详情
|
||||
const currentInfo = ref<Record<string, any>>({})
|
||||
const instanceStore = useInstanceStore()
|
||||
const indicatorVisible = ref<boolean>(false) // 指标
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
const value = ref<string>('');
|
||||
const dataSource = ref<PropertyData[]>([]);
|
||||
const _dataSource = ref<PropertyData[]>([]);
|
||||
const pageIndex = ref<number>(0);
|
||||
const pageSize = ref<number>(8);
|
||||
const total = ref<number>(0);
|
||||
const editVisible = ref<boolean>(false); // 编辑
|
||||
const detailVisible = ref<boolean>(false); // 详情
|
||||
const currentInfo = ref<Record<string, any>>({});
|
||||
const instanceStore = useInstanceStore();
|
||||
const indicatorVisible = ref<boolean>(false); // 指标
|
||||
const loading = ref<boolean>(false);
|
||||
const propertyValue = ref<Record<string, any>>({});
|
||||
|
||||
const subRef = ref();
|
||||
|
||||
const list = ref<any[]>([]);
|
||||
|
||||
const getActions = (data: Partial<Record<string, any>>) => {
|
||||
const arr = []
|
||||
if(data.expands?.type?.includes('write')){
|
||||
const arr = [];
|
||||
if (data.expands?.type?.includes('write')) {
|
||||
arr.push({
|
||||
key: 'edit',
|
||||
tooltip: {
|
||||
|
|
@ -123,14 +150,23 @@ const getActions = (data: Partial<Record<string, any>>) => {
|
|||
},
|
||||
icon: 'EditOutlined',
|
||||
onClick: () => {
|
||||
editVisible.value = true
|
||||
currentInfo.value = data
|
||||
editVisible.value = true;
|
||||
currentInfo.value = data;
|
||||
},
|
||||
})
|
||||
});
|
||||
}
|
||||
if((data.expands?.metrics || []).length && ['int', 'long', 'float', 'double', 'string', 'boolean', 'date'].includes(
|
||||
data.valueType?.type || '',
|
||||
)){
|
||||
if (
|
||||
(data.expands?.metrics || []).length &&
|
||||
[
|
||||
'int',
|
||||
'long',
|
||||
'float',
|
||||
'double',
|
||||
'string',
|
||||
'boolean',
|
||||
'date',
|
||||
].includes(data.valueType?.type || '')
|
||||
) {
|
||||
arr.push({
|
||||
key: 'metrics',
|
||||
tooltip: {
|
||||
|
|
@ -138,12 +174,12 @@ const getActions = (data: Partial<Record<string, any>>) => {
|
|||
},
|
||||
icon: 'ClockCircleOutlined',
|
||||
onClick: () => {
|
||||
indicatorVisible.value = true
|
||||
currentInfo.value = data
|
||||
indicatorVisible.value = true;
|
||||
currentInfo.value = data;
|
||||
},
|
||||
})
|
||||
});
|
||||
}
|
||||
if(data.expands?.type?.includes('read')){
|
||||
if (data.expands?.type?.includes('read')) {
|
||||
arr.push({
|
||||
key: 'read',
|
||||
tooltip: {
|
||||
|
|
@ -151,14 +187,17 @@ const getActions = (data: Partial<Record<string, any>>) => {
|
|||
},
|
||||
icon: 'SyncOutlined',
|
||||
onClick: async () => {
|
||||
if(instanceStore.current.id && data.id){
|
||||
const resp = await getProperty(instanceStore.current.id, data.id)
|
||||
if(resp.status === 200){
|
||||
message.success('操作成功！')
|
||||
if (instanceStore.current.id && data.id) {
|
||||
const resp = await getProperty(
|
||||
instanceStore.current.id,
|
||||
data.id,
|
||||
);
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功！');
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
});
|
||||
}
|
||||
arr.push({
|
||||
key: 'detail',
|
||||
|
|
@ -168,56 +207,132 @@ const getActions = (data: Partial<Record<string, any>>) => {
|
|||
},
|
||||
icon: 'BarsOutlined',
|
||||
onClick: () => {
|
||||
detailVisible.value = true
|
||||
currentInfo.value = data
|
||||
detailVisible.value = true;
|
||||
currentInfo.value = data;
|
||||
},
|
||||
})
|
||||
return arr
|
||||
}
|
||||
|
||||
const query = (page: number, size: number, value: string) => {
|
||||
pageIndex.value = page || 0
|
||||
pageSize.value = size || 8
|
||||
const _from = pageIndex.value * pageSize.value
|
||||
const _to = (pageIndex.value + 1) * pageSize.value
|
||||
const arr = _.cloneDeep(_dataSource.value)
|
||||
if(value){
|
||||
const li = arr.filter((i: any) => {
|
||||
return i?.name.indexOf(value) !== -1;
|
||||
})
|
||||
dataSource.value = li.slice(_from, _to)
|
||||
total.value = li.length
|
||||
} else {
|
||||
dataSource.value = arr.slice(_from, _to)
|
||||
total.value = arr.length
|
||||
}
|
||||
}
|
||||
|
||||
const pageChange = (page: number, size: number) => {
|
||||
if(size === pageSize.value) {
|
||||
query(page - 1, size, value.value)
|
||||
} else {
|
||||
query(0, size, value.value)
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => _data.data,
|
||||
(newVal) => {
|
||||
if(newVal.length) {
|
||||
_dataSource.value = newVal as PropertyData[]
|
||||
query(0, 8, value.value)
|
||||
}
|
||||
}, {
|
||||
deep: true,
|
||||
immediate: true
|
||||
})
|
||||
|
||||
const onSearch = () => {
|
||||
query(0, 8, value.value)
|
||||
});
|
||||
return arr;
|
||||
};
|
||||
|
||||
// const valueChange = (arr: Record<string, any>[]) => {
|
||||
// (arr || [])
|
||||
// .sort((a: any, b: any) => a.timestamp - b.timestamp)
|
||||
// .forEach((item: any) => {
|
||||
// const { value } = item;
|
||||
// propertyValue.value[value?.property] = { ...item, ...value };
|
||||
// });
|
||||
// list.value = []
|
||||
// };
|
||||
|
||||
const subscribeProperty = () => {
|
||||
const id = `instance-info-property-${instanceStore.current.id}-${
|
||||
instanceStore.current.productId
|
||||
}-${dataSource.value.map((i: Record<string, any>) => i.id).join('-')}`;
|
||||
const topic = `/dashboard/device/${instanceStore.current.productId}/properties/realTime`;
|
||||
subRef.value = getWebSocket(id, topic, {
|
||||
deviceId: instanceStore.current.id,
|
||||
properties: dataSource.value.map((i: Record<string, any>) => i.id),
|
||||
history: 1,
|
||||
})
|
||||
?.pipe(map((res: any) => res.payload))
|
||||
.subscribe((payload) => {
|
||||
list.value = [...list.value, payload];
|
||||
unref(list).sort((a: any, b: any) => a.timestamp - b.timestamp)
|
||||
.forEach((item: any) => {
|
||||
const { value } = item;
|
||||
propertyValue.value[value?.property] = { ...item, ...value };
|
||||
});
|
||||
// list.value = [...list.value, payload];
|
||||
// throttle(valueChange(list.value), 500);
|
||||
});
|
||||
};
|
||||
|
||||
const getDashboard = async () => {
|
||||
const param = [
|
||||
{
|
||||
dashboard: 'device',
|
||||
object: instanceStore.current.productId,
|
||||
measurement: 'properties',
|
||||
dimension: 'history',
|
||||
params: {
|
||||
deviceId: instanceStore.current.id,
|
||||
history: 1,
|
||||
properties: dataSource.value.map((i: any) => i.id),
|
||||
},
|
||||
},
|
||||
];
|
||||
loading.value = true;
|
||||
const resp: Record<string, any> = await queryDashboard(param);
|
||||
if (resp.status === 200) {
|
||||
const t1 = (resp.result || []).map((item: any) => {
|
||||
return {
|
||||
timeString: item.data?.timeString,
|
||||
timestamp: item.data?.timestamp,
|
||||
...item?.data?.value,
|
||||
};
|
||||
});
|
||||
const obj = {};
|
||||
toArray(groupBy(t1, 'property'))
|
||||
.map((item) => {
|
||||
return {
|
||||
list: item.sort((a, b) => b.timestamp - a.timestamp),
|
||||
property: item[0].property,
|
||||
};
|
||||
})
|
||||
.forEach((i) => {
|
||||
obj[i.property] = i.list[0];
|
||||
});
|
||||
propertyValue.value = { ...unref(propertyValue), ...obj };
|
||||
}
|
||||
subscribeProperty();
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
const query = (page: number, size: number, value: string) => {
|
||||
pageIndex.value = page || 0;
|
||||
pageSize.value = size || 8;
|
||||
const _from = pageIndex.value * pageSize.value;
|
||||
const _to = (pageIndex.value + 1) * pageSize.value;
|
||||
const arr = _.cloneDeep(_dataSource.value);
|
||||
if (unref(value)) {
|
||||
const li = arr.filter((i: any) => {
|
||||
return i?.name.indexOf(unref(value)) !== -1;
|
||||
});
|
||||
dataSource.value = li.slice(_from, _to);
|
||||
total.value = li.length;
|
||||
} else {
|
||||
dataSource.value = arr.slice(_from, _to);
|
||||
total.value = arr.length;
|
||||
}
|
||||
getDashboard();
|
||||
};
|
||||
|
||||
const pageChange = (page: number, size: number) => {
|
||||
if (size === pageSize.value) {
|
||||
query(page - 1, size, value.value);
|
||||
} else {
|
||||
query(0, size, value.value);
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
() => _data.data,
|
||||
(newVal) => {
|
||||
if (newVal.length) {
|
||||
_dataSource.value = newVal as PropertyData[];
|
||||
query(0, 8, value.value);
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
const onSearch = () => {
|
||||
query(0, 8, value.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
|
|
@ -83,7 +83,9 @@ export default defineConfig(({ mode}) => {
|
|||
// target: 'http://192.168.32.244:8881',
|
||||
// target: 'http://47.112.135.104:5096', // opcua
|
||||
// target: 'http://120.77.179.54:8844', // 120测试
|
||||
target: 'http://47.108.63.174:8845', // 测试
|
||||
// target: 'http://47.108.63.174:8845', // 测试
|
||||
target: 'http://120.77.179.54:8844',
|
||||
ws: 'ws://120.77.179.54:8844',
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, '')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -784,11 +784,16 @@
|
|||
dependencies:
|
||||
moment "*"
|
||||
|
||||
"@types/node@*", "@types/node@^18.11.17":
|
||||
"@types/node@*":
|
||||
version "18.11.18"
|
||||
resolved "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz"
|
||||
integrity sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==
|
||||
|
||||
"@types/node@^18.14.0":
|
||||
version "18.14.0"
|
||||
resolved "https://registry.npmmirror.com/@types/node/-/node-18.14.0.tgz#94c47b9217bbac49d4a67a967fdcdeed89ebb7d0"
|
||||
integrity sha512-5EWrvLmglK+imbCJY0+INViFWUHg1AHel1sq4ZVSfdcNqGy9Edv3UB9IIzzg+xPaUcAgZYcfVs2fBcwDeZzU0A==
|
||||
|
||||
"@types/normalize-package-data@^2.4.0":
|
||||
version "2.4.1"
|
||||
resolved "https://registry.npmmirror.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz"
|
||||
|
|
|
|||
Loading…
Reference in New Issue