Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev
This commit is contained in:
easy
commit
b03b0f09df
|
|
@ -0,0 +1,49 @@
|
|||
import server from '@/utils/request';
|
||||
import { LocalStore } from '@/utils/comm';
|
||||
import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
|
||||
import { recordsItemType } from '@/views/media/Device/Playback/typings';
|
||||
|
||||
export default {
|
||||
// 开始直播
|
||||
ptzStart: (deviceId: string, channelId: string, type: string) =>
|
||||
`${BASE_API_PATH}/media/device/${deviceId}/${channelId}/live.${type}?:X_Access_Token=${LocalStore.get(TOKEN_KEY)}`,
|
||||
|
||||
// 查询设备通道详情
|
||||
queryDetail: (deviceId: string, data: any) => server.post(`/media/device/${deviceId}/channel/_query`, data),
|
||||
|
||||
// 查询本地回放记录
|
||||
queryRecordLocal: (deviceId: string, channelId: string, data?: any) =>
|
||||
server.post<any>(`/media/device/${deviceId}/${channelId}/records/in-local`, data),
|
||||
|
||||
// 下载到云端
|
||||
downloadRecord: (deviceId: string, channelId: string, data: any) =>
|
||||
server.post(`/media/device/${deviceId}/${channelId}/_record`, data),
|
||||
|
||||
// 播放本地回放
|
||||
playbackLocal: (
|
||||
deviceId: string,
|
||||
channelId: string,
|
||||
suffix: string,
|
||||
startTime: string,
|
||||
endTime: string,
|
||||
speed: number = 1
|
||||
) =>
|
||||
`${BASE_API_PATH}/media/device/${deviceId}/${channelId}/playback.${suffix}?:X_Access_Token=${LocalStore.get(TOKEN_KEY)}&startTime=${startTime}&endTime=${endTime}&speed=${speed}`,
|
||||
|
||||
// 本地录像播放控制
|
||||
playbackControl: (deviceId: string, channelId: string) =>
|
||||
server.post(`/media/device/${deviceId}/${channelId}/stream-control`),
|
||||
|
||||
// 查询云端回放记录
|
||||
recordsInServer: (deviceId: string, channelId: string, data: any) =>
|
||||
server.post<recordsItemType[]>(`/media/device/${deviceId}/${channelId}/records/in-server`, data),
|
||||
|
||||
// 查询云端回放文件信息
|
||||
recordsInServerFiles: (deviceId: string, channelId: string, data: any) =>
|
||||
server.post<recordsItemType[]>(`/media/device/${deviceId}/${channelId}/records/in-server/files`, data),
|
||||
|
||||
// 播放云端回放
|
||||
playbackStart: (recordId: string) => `${BASE_API_PATH}/record/${recordId}.mp4?:X_Access_Token=${LocalStore.get(TOKEN_KEY)}`,
|
||||
|
||||
downLoadFile: (recordId: string) => `${BASE_API_PATH}/record/${recordId}.mp4?download=true&:X_Access_Token=${LocalStore.get(TOKEN_KEY)}`
|
||||
}
|
||||
|
|
@ -73,7 +73,9 @@ const iconKeys = [
|
|||
'BellOutlined',
|
||||
'UserOutlined',
|
||||
'LogoutOutlined',
|
||||
'ReadIconOutlined'
|
||||
'ReadIconOutlined',
|
||||
'CloudDownloadOutlined',
|
||||
'PauseCircleOutlined',
|
||||
]
|
||||
|
||||
const Icon = (props: {type: string}) => {
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
<div
|
||||
:class="[
|
||||
'checked-icon',
|
||||
disabled && myValue === item.value
|
||||
(disabled && myValue === item.value) || item.disabled
|
||||
? 'checked-icon-disabled'
|
||||
: '',
|
||||
]"
|
||||
|
|
@ -45,6 +45,7 @@ interface IOption {
|
|||
label: string;
|
||||
value: string;
|
||||
logo: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
type Emits = {
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<!-- 参数类型输入组件 -->
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<a-select
|
||||
<j-select
|
||||
v-if="typeMap.get(itemType) === 'select'"
|
||||
v-model:value="myValue"
|
||||
:options="options"
|
||||
allowClear
|
||||
style="width: 100%"
|
||||
/>
|
||||
<a-date-picker
|
||||
<j-date-picker
|
||||
v-else-if="typeMap.get(itemType) === 'date'"
|
||||
v-model:value="myValue"
|
||||
allowClear
|
||||
|
|
@ -17,13 +17,13 @@
|
|||
format="YYYY-MM-DD HH:mm:ss"
|
||||
style="width: 100%"
|
||||
/>
|
||||
<a-input-number
|
||||
<j-input-number
|
||||
v-else-if="typeMap.get(itemType) === 'inputNumber'"
|
||||
v-model:value="myValue"
|
||||
allowClear
|
||||
style="width: 100%"
|
||||
/>
|
||||
<a-input
|
||||
<j-input
|
||||
allowClear
|
||||
v-else-if="typeMap.get(itemType) === 'object'"
|
||||
v-model:value="myValue"
|
||||
|
|
@ -31,19 +31,19 @@
|
|||
<template #addonAfter>
|
||||
<form-outlined @click="modalVis = true" />
|
||||
</template>
|
||||
</a-input>
|
||||
</j-input>
|
||||
<GeoComponent
|
||||
v-else-if="typeMap.get(itemType) === 'geoPoint'"
|
||||
v-model:point="myValue"
|
||||
/>
|
||||
<a-input
|
||||
<j-input
|
||||
v-else-if="typeMap.get(itemType) === 'file'"
|
||||
v-model:value="myValue"
|
||||
placeholder="请输入图片链接"
|
||||
allowClear
|
||||
>
|
||||
<template #addonAfter>
|
||||
<a-upload
|
||||
<j-upload
|
||||
name="file"
|
||||
:action="FILE_UPLOAD"
|
||||
:headers="headers"
|
||||
|
|
@ -51,10 +51,10 @@
|
|||
@change="handleFileChange"
|
||||
>
|
||||
<cloud-upload-outlined />
|
||||
</a-upload>
|
||||
</j-upload>
|
||||
</template>
|
||||
</a-input>
|
||||
<a-input
|
||||
</j-input>
|
||||
<j-input
|
||||
v-else
|
||||
allowClear
|
||||
type="text"
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
/>
|
||||
|
||||
<!-- 代码编辑器弹窗 -->
|
||||
<a-modal
|
||||
<j-modal
|
||||
title="编辑"
|
||||
ok-text="确认"
|
||||
cancel-text="取消"
|
||||
|
|
@ -75,13 +75,12 @@
|
|||
<div style="width: 100%; height: 400px">
|
||||
<MonacoEditor v-model:modelValue="objectValue" />
|
||||
</div>
|
||||
</a-modal>
|
||||
</j-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue';
|
||||
import { FormOutlined, CloudUploadOutlined } from '@ant-design/icons-vue';
|
||||
import { UploadChangeParam, UploadFile } from 'ant-design-vue';
|
||||
import { DefaultOptionType } from 'ant-design-vue/lib/select';
|
||||
import MonacoEditor from '@/components/MonacoEditor/index.vue';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<a-table
|
||||
<j-table
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:data-source="dataSource"
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
</j-table>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,60 +1,60 @@
|
|||
<template>
|
||||
<a-form
|
||||
<j-form
|
||||
:layout="'vertical'"
|
||||
ref="formRef"
|
||||
:model="modelRef"
|
||||
>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="24" v-if="actionType === 'command'">
|
||||
<a-form-item name="messageType" label="指令类型" :rules="{
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="24" v-if="actionType === 'command'">
|
||||
<j-form-item name="messageType" label="指令类型" :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-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="(modelRef.messageType === 'READ_PROPERTY' || actionType === 'latestData') ? 24 : 12" v-if="(actionType === 'command' && ['READ_PROPERTY','WRITE_PROPERTY'].includes(modelRef.messageType)) || actionType === 'latestData'">
|
||||
<a-form-item :name="['message', 'properties']" label="属性" :rules="{
|
||||
<j-select placeholder="请选择指令类型" v-model:value="modelRef.messageType" show-search :filter-option="filterOption">
|
||||
<j-select-option value="READ_PROPERTY">读取属性</j-select-option>
|
||||
<j-select-option value="WRITE_PROPERTY">修改属性</j-select-option>
|
||||
<j-select-option value="INVOKE_FUNCTION">调用功能</j-select-option>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="(modelRef.messageType === 'READ_PROPERTY' || actionType === 'latestData') ? 24 : 12" v-if="(actionType === 'command' && ['READ_PROPERTY','WRITE_PROPERTY'].includes(modelRef.messageType)) || actionType === 'latestData'">
|
||||
<j-form-item :name="['message', 'properties']" label="属性" :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-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12" v-if="modelRef.messageType === 'WRITE_PROPERTY' && actionType === 'command'">
|
||||
<a-form-item :name="['message', 'value']" label="值" :rules="{
|
||||
<j-select placeholder="请选择属性" v-model:value="modelRef.message.properties" show-search :filter-option="filterOption">
|
||||
<j-select-option v-for="i in (metadata?.properties) || []" :key="i.id" :value="i.id" :label="i.name">{{i.name}}</j-select-option>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12" v-if="modelRef.messageType === 'WRITE_PROPERTY' && actionType === 'command'">
|
||||
<j-form-item :name="['message', 'value']" label="值" :rules="{
|
||||
required: true,
|
||||
message: '请输入值',
|
||||
}">
|
||||
<a-input />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24" v-if="modelRef.messageType === 'INVOKE_FUNCTION'">
|
||||
<a-form-item :name="['message', 'functionId']" label="功能" :rules="{
|
||||
<j-input />
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="24" v-if="modelRef.messageType === 'INVOKE_FUNCTION'">
|
||||
<j-form-item :name="['message', 'functionId']" label="功能" :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-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24" v-if="modelRef.messageType === 'INVOKE_FUNCTION' && modelRef.message.functionId">
|
||||
<a-form-item :name="['message', 'inputs']" label="参数列表" :rules="{
|
||||
<j-select placeholder="请选择功能" v-model:value="modelRef.message.functionId" show-search :filter-option="filterOption" @change="funcChange">
|
||||
<j-select-option v-for="i in (metadata?.functions) || []" :key="i.id" :value="i.id" :label="i.name">{{i.name}}</j-select-option>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="24" v-if="modelRef.messageType === 'INVOKE_FUNCTION' && modelRef.message.functionId">
|
||||
<j-form-item :name="['message', 'inputs']" label="参数列表" :rules="{
|
||||
required: true,
|
||||
message: '请输入参数列表',
|
||||
}">
|
||||
<EditTable v-model="modelRef.message.inputs"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -62,8 +62,6 @@ import EditTable from './EditTable.vue'
|
|||
|
||||
const formRef = ref();
|
||||
|
||||
const funcList = ref<Record<string, any>[]>([])
|
||||
|
||||
const filterOption = (input: string, option: any) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
<div>
|
||||
<h2>1、在百度小度技能平台创建技能，并授权。完成物联网平台与DuerOS的关联。</h2>
|
||||
<div class="image">
|
||||
<a-image width="100%" :src="getImage('/cloud/dueros-doc.jpg')" />
|
||||
<j-image width="100%" :src="getImage('/cloud/dueros-doc.jpg')" />
|
||||
</div>
|
||||
<h1>授权地址</h1>
|
||||
<div>物联网平台的登录地址。注意需要为https。</div>
|
||||
|
|
@ -26,19 +26,19 @@
|
|||
<h1>Client_Id</h1>
|
||||
<div>请填写系统管理-应用管理中的clientId。</div>
|
||||
<div class="image">
|
||||
<a-image width="100%" :src="getImage('/cloud/dueros-doc1.png')" />
|
||||
<j-image width="100%" :src="getImage('/cloud/dueros-doc1.png')" />
|
||||
</div>
|
||||
<h1>回调地址</h1>
|
||||
<div>请复制DuerOS平台中的值，填写到系统管理-应用管理中-redirectUrl中。</div>
|
||||
<div class="image">
|
||||
<a-image width="100%" :src="getImage('/cloud/dueros-doc2.png')" />
|
||||
<j-image width="100%" :src="getImage('/cloud/dueros-doc2.png')" />
|
||||
</div>
|
||||
<h1>Token地址</h1>
|
||||
<div>请复制并填写：HTTPS://{location.host}/api/v1/token</div>
|
||||
<h1>ClientSecret</h1>
|
||||
<div>请复制系统管理-应用管理中的secureKey，填写到DuerOS平台。</div>
|
||||
<div class="image">
|
||||
<a-image width="100%" :src="getImage('/cloud/dueros-doc3.png')" />
|
||||
<j-image width="100%" :src="getImage('/cloud/dueros-doc3.png')" />
|
||||
</div>
|
||||
<div></div>
|
||||
<h1>WebService</h1>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<template>
|
||||
<page-container>
|
||||
<a-card>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="16">
|
||||
<j-card>
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="16">
|
||||
<TitleComponent data="基本信息" />
|
||||
<a-form
|
||||
<j-form
|
||||
:layout="'vertical'"
|
||||
ref="formRef"
|
||||
:model="modelRef"
|
||||
>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="24">
|
||||
<a-form-item
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="24">
|
||||
<j-form-item
|
||||
label="名称"
|
||||
name="name"
|
||||
:rules="[
|
||||
|
|
@ -25,14 +25,14 @@
|
|||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
<j-input
|
||||
placeholder="请输入名称"
|
||||
v-model:value="modelRef.name"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
label="产品"
|
||||
name="id"
|
||||
:rules="[
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
},
|
||||
]"
|
||||
>
|
||||
<a-select
|
||||
<j-select
|
||||
:disabled="
|
||||
type !== 'edit' &&
|
||||
modelRef.id &&
|
||||
|
|
@ -54,18 +54,18 @@
|
|||
:filter-option="filterOption"
|
||||
@change="productChange"
|
||||
>
|
||||
<a-select-option
|
||||
<j-select-option
|
||||
v-for="item in productList"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
:label="item.name"
|
||||
>{{ item.name }}</a-select-option
|
||||
>{{ item.name }}</j-select-option
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
name="applianceType"
|
||||
:rules="{
|
||||
required: true,
|
||||
|
|
@ -75,50 +75,50 @@
|
|||
<template #label>
|
||||
<span>
|
||||
设备类型
|
||||
<a-tooltip
|
||||
<j-tooltip
|
||||
title="DuerOS平台拟定的规范"
|
||||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</j-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<a-select
|
||||
<j-select
|
||||
placeholder="请选择设备类型"
|
||||
v-model:value="modelRef.applianceType"
|
||||
show-search
|
||||
:filter-option="filterOption"
|
||||
@change="typeChange"
|
||||
>
|
||||
<a-select-option
|
||||
<j-select-option
|
||||
v-for="item in typeList"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
:label="item.name"
|
||||
>{{ item.name }}</a-select-option
|
||||
>{{ item.name }}</j-select-option
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
<j-form-item
|
||||
name="productName"
|
||||
v-show="false"
|
||||
label="产品名称"
|
||||
>
|
||||
<a-input
|
||||
<j-input
|
||||
v-model:value="modelRef.productName"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="24">
|
||||
<p>动作映射</p>
|
||||
<a-collapse
|
||||
<j-collapse
|
||||
v-if="modelRef.actionMappings.length"
|
||||
:activeKey="actionActiveKey"
|
||||
@change="onActionCollChange"
|
||||
>
|
||||
<a-collapse-panel
|
||||
<j-collapse-panel
|
||||
v-for="(
|
||||
item, index
|
||||
) in modelRef.actionMappings"
|
||||
|
|
@ -139,9 +139,9 @@
|
|||
type="DeleteOutlined"
|
||||
@click="delItem(index)"
|
||||
/></template>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
:name="[
|
||||
'actionMappings',
|
||||
index,
|
||||
|
|
@ -155,16 +155,16 @@
|
|||
<template #label>
|
||||
<span>
|
||||
动作
|
||||
<a-tooltip
|
||||
<j-tooltip
|
||||
title="DuerOS平台拟定的设备类型具有的相关动作"
|
||||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</j-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<a-select
|
||||
<j-select
|
||||
placeholder="请选择动作"
|
||||
v-model:value="
|
||||
item.action
|
||||
|
|
@ -174,7 +174,7 @@
|
|||
filterOption
|
||||
"
|
||||
>
|
||||
<a-select-option
|
||||
<j-select-option
|
||||
v-for="i in getTypesActions(
|
||||
item.action,
|
||||
)"
|
||||
|
|
@ -183,13 +183,13 @@
|
|||
:label="i.name"
|
||||
>{{
|
||||
i.name
|
||||
}}</a-select-option
|
||||
}}</j-select-option
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
:name="[
|
||||
'actionMappings',
|
||||
index,
|
||||
|
|
@ -203,16 +203,16 @@
|
|||
<template #label>
|
||||
<span>
|
||||
操作
|
||||
<a-tooltip
|
||||
<j-tooltip
|
||||
title="映射物联网平台中所选产品具备的动作"
|
||||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</j-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<a-select
|
||||
<j-select
|
||||
placeholder="请选择操作"
|
||||
v-model:value="
|
||||
item.actionType
|
||||
|
|
@ -222,22 +222,22 @@
|
|||
filterOption
|
||||
"
|
||||
>
|
||||
<a-select-option
|
||||
<j-select-option
|
||||
value="command"
|
||||
>下发指令</a-select-option
|
||||
>下发指令</j-select-option
|
||||
>
|
||||
<a-select-option
|
||||
<j-select-option
|
||||
value="latestData"
|
||||
>获取历史数据</a-select-option
|
||||
>获取历史数据</j-select-option
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col
|
||||
:span="24"
|
||||
v-if="item.actionType"
|
||||
>
|
||||
<a-form-item
|
||||
<j-form-item
|
||||
:name="[
|
||||
'actionMappings',
|
||||
index,
|
||||
|
|
@ -256,14 +256,14 @@
|
|||
item.actionType
|
||||
"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-button
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-collapse-panel>
|
||||
</j-collapse>
|
||||
</j-col>
|
||||
<j-col :span="24">
|
||||
<j-button
|
||||
type="dashed"
|
||||
style="width: 100%; margin-top: 10px"
|
||||
@click="addItem"
|
||||
|
|
@ -272,16 +272,16 @@
|
|||
type="PlusOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>新增动作
|
||||
</a-button>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
</j-button>
|
||||
</j-col>
|
||||
<j-col :span="24">
|
||||
<p style="margin-top: 20px">属性映射</p>
|
||||
<a-collapse
|
||||
<j-collapse
|
||||
v-if="modelRef.propertyMappings.length"
|
||||
:activeKey="propertyActiveKey"
|
||||
@change="onPropertyCollChange"
|
||||
>
|
||||
<a-collapse-panel
|
||||
<j-collapse-panel
|
||||
v-for="(
|
||||
item, index
|
||||
) in modelRef.propertyMappings"
|
||||
|
|
@ -302,9 +302,9 @@
|
|||
type="DeleteOutlined"
|
||||
@click="delPropertyItem(index)"
|
||||
/></template>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
label="DuerOS属性"
|
||||
:name="[
|
||||
'propertyMappings',
|
||||
|
|
@ -317,7 +317,7 @@
|
|||
'请选择DuerOS属性',
|
||||
}"
|
||||
>
|
||||
<a-select
|
||||
<j-select
|
||||
placeholder="请选择DuerOS属性"
|
||||
v-model:value="
|
||||
item.source
|
||||
|
|
@ -327,7 +327,7 @@
|
|||
filterOption
|
||||
"
|
||||
>
|
||||
<a-select-option
|
||||
<j-select-option
|
||||
v-for="i in getDuerOSProperties(
|
||||
item.source,
|
||||
)"
|
||||
|
|
@ -335,13 +335,13 @@
|
|||
:value="i.id"
|
||||
>{{
|
||||
i.name
|
||||
}}</a-select-option
|
||||
}}</j-select-option
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
label="平台属性"
|
||||
:name="[
|
||||
'propertyMappings',
|
||||
|
|
@ -354,7 +354,7 @@
|
|||
'请选择平台属性',
|
||||
}"
|
||||
>
|
||||
<a-select
|
||||
<j-select
|
||||
placeholder="请选择平台属性"
|
||||
v-model:value="
|
||||
item.target
|
||||
|
|
@ -365,7 +365,7 @@
|
|||
filterOption
|
||||
"
|
||||
>
|
||||
<a-select-option
|
||||
<j-select-option
|
||||
v-for="i in getProductProperties(
|
||||
item.target,
|
||||
)"
|
||||
|
|
@ -373,17 +373,17 @@
|
|||
:value="item.id"
|
||||
>{{
|
||||
i.name
|
||||
}}</a-select-option
|
||||
}}</j-select-option
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-button
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-collapse-panel>
|
||||
</j-collapse>
|
||||
</j-col>
|
||||
<j-col :span="24">
|
||||
<j-button
|
||||
type="dashed"
|
||||
style="width: 100%; margin-top: 10px"
|
||||
@click="addPropertyItem"
|
||||
|
|
@ -392,10 +392,10 @@
|
|||
type="PlusOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>新增属性
|
||||
</a-button>
|
||||
</a-col>
|
||||
<a-col :span="24" style="margin-top: 20px">
|
||||
<a-form-item
|
||||
</j-button>
|
||||
</j-col>
|
||||
<j-col :span="24" style="margin-top: 20px">
|
||||
<j-form-item
|
||||
label="说明"
|
||||
name="description"
|
||||
:rules="{
|
||||
|
|
@ -403,16 +403,16 @@
|
|||
message: '最多输入200个字符',
|
||||
}"
|
||||
>
|
||||
<a-textarea
|
||||
<j-textarea
|
||||
v-model:value="modelRef.description"
|
||||
placeholder="请输入说明"
|
||||
showCount
|
||||
:maxlength="200"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-form>
|
||||
<div v-if="type === 'edit'">
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
|
|
@ -423,12 +423,12 @@
|
|||
保存
|
||||
</PermissionButton>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
</j-col>
|
||||
<j-col :span="8">
|
||||
<Doc />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-card>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
@ -442,9 +442,10 @@ import {
|
|||
detail,
|
||||
} from '@/api/northbound/dueros';
|
||||
import _ from 'lodash';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { message } from 'jetlinks-ui-components';
|
||||
import { useMenuStore } from '@/store/menu';
|
||||
|
||||
const router = useRouter();
|
||||
const menuStory = useMenuStore();
|
||||
const route = useRoute();
|
||||
|
||||
const formRef = ref();
|
||||
|
|
@ -640,7 +641,8 @@ const saveBtn = async () => {
|
|||
if (resp.status === 200) {
|
||||
message.success('操作成功！');
|
||||
formRef.value.resetFields();
|
||||
router.push('/iot/northbound/DuerOS/');
|
||||
menuStory.jumpPage('Northbound/DuerOS');
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<page-container>
|
||||
<Search
|
||||
<j-advanced-search
|
||||
:columns="columns"
|
||||
target="northbound-dueros"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<JTable
|
||||
<JProTable
|
||||
ref="instanceRef"
|
||||
:columns="columns"
|
||||
:request="query"
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<a-space>
|
||||
<j-space>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
<template #icon><AIcon type="PlusOutlined" /></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
</a-space>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
|
|
@ -45,18 +45,18 @@
|
|||
>
|
||||
{{ slotProps.name }}
|
||||
</h3>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<j-row>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">产品</div>
|
||||
<div>{{ slotProps?.productName }}</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
设备类型
|
||||
</div>
|
||||
<div>{{ slotProps?.applianceType?.text }}</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<PermissionButton
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
</CardBox>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<a-badge
|
||||
<j-badge
|
||||
:text="slotProps.state?.text"
|
||||
:status="statusMap.get(slotProps.state?.value)"
|
||||
/>
|
||||
|
|
@ -90,7 +90,7 @@
|
|||
{{ slotProps.applianceType.text }}
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<a-space>
|
||||
<j-space>
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
|
|
@ -109,9 +109,9 @@
|
|||
<template #icon><AIcon :type="i.icon" /></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</a-space>
|
||||
</j-space>
|
||||
</template>
|
||||
</JTable>
|
||||
</JProTable>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
@ -124,15 +124,13 @@ import {
|
|||
queryProductList,
|
||||
queryTypes,
|
||||
} from '@/api/northbound/dueros';
|
||||
import type { ActionsType } from '@/components/Table/index.vue';
|
||||
import type { ActionsType } from '@/views/device/Instance/typings';
|
||||
import { getImage } from '@/utils/comm';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { message } from 'jetlinks-ui-components';
|
||||
import { useMenuStore } from 'store/menu';
|
||||
|
||||
const router = useRouter();
|
||||
const instanceRef = ref<Record<string, any>>({});
|
||||
const params = ref<Record<string, any>>({});
|
||||
const current = ref<Record<string, any>>({});
|
||||
const menuStory = useMenuStore();
|
||||
|
||||
const statusMap = new Map();
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<div class="dialog-box">
|
||||
<div class="dialog-header">
|
||||
<div class="dialog-title">
|
||||
<a-badge
|
||||
<j-badge
|
||||
:color="
|
||||
statusColor.get(
|
||||
item.error ? 'error' : 'success',
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
class="dialog-editor"
|
||||
v-if="visible.includes(item.key)"
|
||||
>
|
||||
<a-textarea autoSize :bordered="false" :value="item?.detail" />
|
||||
<j-textarea autoSize :bordered="false" :value="item?.detail" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -50,8 +50,9 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const operationMap = new Map();
|
||||
import moment from 'moment';
|
||||
|
||||
const operationMap = new Map();
|
||||
operationMap.set('connection', '连接');
|
||||
operationMap.set('auth', '权限验证');
|
||||
operationMap.set('decode', '解码');
|
||||
|
|
@ -80,19 +81,9 @@ const getDetail = (item: any) => {
|
|||
visible.value.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
watchEffect(() => {
|
||||
console.log(props.data)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// @import 'ant-design-vue/es/style/themes/default.less';
|
||||
|
||||
// :root {
|
||||
// --dialog-primary-color: @primary-color;
|
||||
// }
|
||||
|
||||
.dialog-item {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<a-table
|
||||
<j-table
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:data-source="dataSource"
|
||||
|
|
@ -36,12 +36,11 @@
|
|||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
</j-table>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { PropType } from "vue-demi";
|
||||
|
||||
import { PropType } from "vue";
|
||||
|
||||
type Emits = {
|
||||
(e: 'update:modelValue', data: Record<string, any>[]): void;
|
||||
|
|
|
|||
|
|
@ -1,110 +1,110 @@
|
|||
<template>
|
||||
<div class="function">
|
||||
<a-form :layout="'vertical'" ref="formRef" :model="modelRef">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="6">
|
||||
<a-form-item
|
||||
<j-form :layout="'vertical'" ref="formRef" :model="modelRef">
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="6">
|
||||
<j-form-item
|
||||
name="type"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请选择',
|
||||
}"
|
||||
>
|
||||
<a-select
|
||||
<j-select
|
||||
placeholder="请选择"
|
||||
v-model:value="modelRef.type"
|
||||
show-search
|
||||
:filter-option="filterOption"
|
||||
>
|
||||
<a-select-option value="READ_PROPERTY"
|
||||
>读取属性</a-select-option
|
||||
<j-select-option value="READ_PROPERTY"
|
||||
>读取属性</j-select-option
|
||||
>
|
||||
<a-select-option value="WRITE_PROPERTY"
|
||||
>修改属性</a-select-option
|
||||
<j-select-option value="WRITE_PROPERTY"
|
||||
>修改属性</j-select-option
|
||||
>
|
||||
<a-select-option value="INVOKE_FUNCTION"
|
||||
>调用功能</a-select-option
|
||||
<j-select-option value="INVOKE_FUNCTION"
|
||||
>调用功能</j-select-option
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col
|
||||
:span="6"
|
||||
v-if="
|
||||
['READ_PROPERTY', 'WRITE_PROPERTY'].includes(
|
||||
modelRef.type,
|
||||
modelRef?.type || '',
|
||||
)
|
||||
"
|
||||
>
|
||||
<a-form-item
|
||||
<j-form-item
|
||||
name="properties"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请选择属性',
|
||||
}"
|
||||
>
|
||||
<a-select
|
||||
<j-select
|
||||
placeholder="请选择属性"
|
||||
v-model:value="modelRef.properties"
|
||||
show-search
|
||||
:filter-option="filterOption"
|
||||
>
|
||||
<a-select-option
|
||||
<j-select-option
|
||||
v-for="i in metadata?.properties || []"
|
||||
:key="i.id"
|
||||
:value="i.id"
|
||||
:label="i.name"
|
||||
>{{ i.name }}</a-select-option
|
||||
>{{ i.name }}</j-select-option
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6" v-if="modelRef.type === 'WRITE_PROPERTY'">
|
||||
<a-form-item
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="6" v-if="modelRef.type === 'WRITE_PROPERTY'">
|
||||
<j-form-item
|
||||
name="propertyValue"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请输入值',
|
||||
}"
|
||||
>
|
||||
<a-input v-model:value="modelRef.propertyValue" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6" v-if="modelRef.type === 'INVOKE_FUNCTION'">
|
||||
<a-form-item
|
||||
<j-input v-model:value="modelRef.propertyValue" />
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="6" v-if="modelRef.type === 'INVOKE_FUNCTION'">
|
||||
<j-form-item
|
||||
name="function"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请选择功能',
|
||||
}"
|
||||
>
|
||||
<a-select
|
||||
<j-select
|
||||
placeholder="请选择功能"
|
||||
v-model:value="modelRef.function"
|
||||
show-search
|
||||
:filter-option="filterOption"
|
||||
@change="funcChange"
|
||||
>
|
||||
<a-select-option
|
||||
<j-select-option
|
||||
v-for="i in metadata?.functions || []"
|
||||
:key="i.id"
|
||||
:value="i.id"
|
||||
:label="i.name"
|
||||
>{{ i.name }}</a-select-option
|
||||
>{{ i.name }}</j-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
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="4">
|
||||
<j-button type="primary" @click="saveBtn">发送</j-button>
|
||||
</j-col>
|
||||
<j-col
|
||||
:span="24"
|
||||
v-if="
|
||||
modelRef.type === 'INVOKE_FUNCTION' && modelRef.function && modelRef.inputs.length
|
||||
"
|
||||
>
|
||||
<a-form-item
|
||||
<j-form-item
|
||||
name="inputs"
|
||||
label="参数列表"
|
||||
:rules="{
|
||||
|
|
@ -113,10 +113,10 @@
|
|||
}"
|
||||
>
|
||||
<EditTable v-model="modelRef.inputs" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,106 @@
|
|||
<template>
|
||||
log
|
||||
<div class="log-item" :key="data.id">
|
||||
<div class="log-card">
|
||||
<div class="log-icon" @click="visible = !visible">
|
||||
<AIcon :type="visible ? 'DownOutlined' : 'RightOutlined'" />
|
||||
</div>
|
||||
<div class="log-box">
|
||||
<div class="log-header">
|
||||
<div class="log-title">
|
||||
<j-tag color="error">ERROR</j-tag>
|
||||
{{ operationMap.get(data.operation) }}
|
||||
</div>
|
||||
<div class="log-time">
|
||||
{{ dayjs(data.endTime).format('YYYY-MM-DD HH:mm:ss') }}
|
||||
</div>
|
||||
</div>
|
||||
<div className="log-editor" v-if="visible">
|
||||
<j-textarea
|
||||
autoSize
|
||||
:bordered="false"
|
||||
:value="data?.detail"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const operationMap = new Map();
|
||||
operationMap.set('connection', '连接');
|
||||
operationMap.set('auth', '权限验证');
|
||||
operationMap.set('decode', '解码');
|
||||
operationMap.set('encode', '编码');
|
||||
operationMap.set('request', '请求');
|
||||
operationMap.set('response', '响应');
|
||||
operationMap.set('downstream', '下行消息');
|
||||
operationMap.set('upstream', '上行消息');
|
||||
|
||||
const visible = ref<boolean>(false);
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.log-item {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
padding-bottom: 12px;
|
||||
|
||||
.log-card {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
|
||||
.log-icon {
|
||||
margin-right: 10px;
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.log-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
.log-header {
|
||||
.log-title {
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.log-time {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.log-editor {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
|
||||
textarea {
|
||||
color: black !important;
|
||||
background-color: #fafafa !important;
|
||||
}
|
||||
|
||||
textarea::-webkit-scrollbar {
|
||||
width: 5px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,20 +1,20 @@
|
|||
<template>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="16">
|
||||
<a-row :gutter="24" style="margin-bottom: 20px">
|
||||
<a-col :span="12" v-for="item in messageArr" :key="item">
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="16">
|
||||
<j-row :gutter="24" style="margin-bottom: 20px">
|
||||
<j-col :span="12" v-for="item in messageArr" :key="item">
|
||||
<div
|
||||
:style="messageStyleMap.get(item.status)"
|
||||
class="message-status"
|
||||
>
|
||||
<a-badge
|
||||
<j-badge
|
||||
:status="messageStatusMap.get(item.status)"
|
||||
style="margin-right: 5px"
|
||||
/>
|
||||
<span>{{ item.text }}</span>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</j-col>
|
||||
</j-row>
|
||||
<div>
|
||||
<TitleComponent data="调试" />
|
||||
<div class="content">
|
||||
|
|
@ -26,8 +26,8 @@
|
|||
</div>
|
||||
<div><Function /></div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
</j-col>
|
||||
<j-col :span="8">
|
||||
<div class="right-log">
|
||||
<TitleComponent data="日志" />
|
||||
<div :style="{ marginTop: '10px' }">
|
||||
|
|
@ -38,11 +38,11 @@
|
|||
:key="item.key"
|
||||
/>
|
||||
</template>
|
||||
<a-empty v-else />
|
||||
<j-empty v-else />
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import { Badge, Descriptions, Modal, Tooltip } from "ant-design-vue"
|
||||
import { Badge, Descriptions, Modal, Tooltip, AIcon, DescriptionsItem } from "jetlinks-ui-components"
|
||||
import TitleComponent from '@/components/TitleComponent/index.vue'
|
||||
import styles from './index.module.less'
|
||||
import AIcon from "@/components/AIcon";
|
||||
import _ from "lodash";
|
||||
|
||||
const DiagnosticAdvice = defineComponent({
|
||||
|
|
@ -42,11 +41,11 @@ const DiagnosticAdvice = defineComponent({
|
|||
<div style={{ marginTop: 15 }}>
|
||||
<TitleComponent data="连接信息" />
|
||||
<Descriptions column={2}>
|
||||
<Descriptions.Item span={1} label="设备ID">
|
||||
<DescriptionsItem span={1} label="设备ID">
|
||||
{data?.info?.id || ''}
|
||||
</Descriptions.Item>
|
||||
</DescriptionsItem>
|
||||
{data?.info?.address?.length > 0 && (
|
||||
<Descriptions.Item span={1} label="连接地址">
|
||||
<DescriptionsItem span={1} label="连接地址">
|
||||
<Tooltip
|
||||
placement="topLeft"
|
||||
title={
|
||||
|
|
@ -69,11 +68,11 @@ const DiagnosticAdvice = defineComponent({
|
|||
))}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</Descriptions.Item>
|
||||
</DescriptionsItem>
|
||||
)}
|
||||
|
||||
{(_.flatten(_.map(data?.info?.config, 'properties')) || []).map((item: any, index: number) => (
|
||||
<Descriptions.Item
|
||||
<DescriptionsItem
|
||||
key={index}
|
||||
span={1}
|
||||
label={
|
||||
|
|
@ -90,7 +89,7 @@ const DiagnosticAdvice = defineComponent({
|
|||
}
|
||||
>
|
||||
{data?.info?.configValue[item?.property] || ''}
|
||||
</Descriptions.Item>
|
||||
</DescriptionsItem>
|
||||
))}
|
||||
</Descriptions>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import AIcon from "@/components/AIcon";
|
||||
import { useInstanceStore } from "@/store/instance";
|
||||
import { useMenuStore } from "@/store/menu";
|
||||
import { Button, Descriptions, Modal } from "ant-design-vue"
|
||||
import { AIcon, Button, Modal, Descriptions, DescriptionsItem, Space } from "jetlinks-ui-components"
|
||||
import styles from './index.module.less'
|
||||
|
||||
const ManualInspection = defineComponent({
|
||||
|
|
@ -39,12 +38,12 @@ const ManualInspection = defineComponent({
|
|||
<div style={{ marginTop: '10px' }}>
|
||||
<Descriptions title={data?.data?.name} layout="vertical" bordered>
|
||||
{(data?.data?.properties || []).map((item: any) => (
|
||||
<Descriptions.Item
|
||||
<DescriptionsItem
|
||||
key={item.property}
|
||||
label={`${item.name}${item?.description ? `(${item.description})` : ''}`}
|
||||
>
|
||||
{data?.configuration[item.property] || ''}
|
||||
</Descriptions.Item>
|
||||
</DescriptionsItem>
|
||||
))}
|
||||
</Descriptions>
|
||||
</div>
|
||||
|
|
@ -80,30 +79,30 @@ const ManualInspection = defineComponent({
|
|||
<Descriptions title={data?.data?.name} layout="vertical" bordered>
|
||||
{data.configuration?.provider === 'OneNet' ? (
|
||||
<>
|
||||
<Descriptions.Item label={'接口地址'}>
|
||||
<DescriptionsItem label={'接口地址'}>
|
||||
{data?.configuration?.configuration?.apiAddress || ''}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={'apiKey'}>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label={'apiKey'}>
|
||||
{data?.configuration?.configuration?.apiKey || ''}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={'通知Token'}>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label={'通知Token'}>
|
||||
{data?.configuration?.configuration?.validateToken || ''}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={'aesKey'}>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label={'aesKey'}>
|
||||
{data?.configuration?.configuration?.aesKey || ''}
|
||||
</Descriptions.Item>
|
||||
</DescriptionsItem>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Descriptions.Item label={'接口地址'}>
|
||||
<DescriptionsItem label={'接口地址'}>
|
||||
{data?.configuration?.configuration?.apiAddress || ''}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={'appKey'}>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label={'appKey'}>
|
||||
{data?.configuration?.configuration?.appKey || ''}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={'appSecret'}>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label={'appSecret'}>
|
||||
{data?.configuration?.configuration?.appSecret || ''}
|
||||
</Descriptions.Item>
|
||||
</DescriptionsItem>
|
||||
</>
|
||||
)}
|
||||
</Descriptions>
|
||||
|
|
@ -140,45 +139,45 @@ const ManualInspection = defineComponent({
|
|||
<Descriptions title={data?.data?.name} layout="vertical" bordered>
|
||||
{data?.configuration?.configuration?.shareCluster ? (
|
||||
<>
|
||||
<Descriptions.Item label={'SIP 域'}>
|
||||
<DescriptionsItem label={'SIP 域'}>
|
||||
{data?.configuration?.configuration?.domain || ''}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={'SIP ID'}>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label={'SIP ID'}>
|
||||
{data?.configuration?.configuration?.sipId || ''}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={'集群'}>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label={'集群'}>
|
||||
{data?.configuration?.configuration?.shareCluster ? '共享配置' : '独立配置'}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={'SIP 地址'}>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label={'SIP 地址'}>
|
||||
{`${data?.configuration?.configuration?.hostPort?.host}:${data?.configuration?.configuration?.hostPort?.port}`}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={'公网 Host'}>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label={'公网 Host'}>
|
||||
{`${data?.configuration?.configuration?.hostPort?.publicHost}:${data?.configuration?.configuration?.hostPort?.publicPort}`}
|
||||
</Descriptions.Item>
|
||||
</DescriptionsItem>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Descriptions.Item label={'SIP 域'}>
|
||||
<DescriptionsItem label={'SIP 域'}>
|
||||
{data?.configuration?.configuration?.domain || ''}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={'SIP ID'}>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label={'SIP ID'}>
|
||||
{data?.configuration?.configuration?.sipId || ''}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={'集群'}>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label={'集群'}>
|
||||
{data?.configuration?.configuration?.shareCluster ? '共享配置' : '独立配置'}
|
||||
</Descriptions.Item>
|
||||
</DescriptionsItem>
|
||||
{data?.configuration?.configuration?.cluster.map((i: any, it: number) => (
|
||||
<div key={it}>
|
||||
<div>节点{it + 1}</div>
|
||||
<Descriptions.Item label={'节点名称'}>
|
||||
<DescriptionsItem label={'节点名称'}>
|
||||
{i?.clusterNodeId || ''}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={'SIP 地址'}>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label={'SIP 地址'}>
|
||||
{`${i.host}:${i?.port}`}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={'公网 Host'}>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label={'公网 Host'}>
|
||||
{`${i?.publicHost}:${i?.publicPort}`}
|
||||
</Descriptions.Item>
|
||||
</DescriptionsItem>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
|
|
@ -207,20 +206,29 @@ const ManualInspection = defineComponent({
|
|||
title="人工检查"
|
||||
visible
|
||||
width={1000}
|
||||
cancelText="去修改"
|
||||
okText="确认无误"
|
||||
onOk={() => {
|
||||
emit('save', data)
|
||||
}}
|
||||
onCancel={() => {
|
||||
if (data.type === 'device') {
|
||||
instanceStore.tabActiveKey = 'Info'
|
||||
} else if (data.type === 'product') {
|
||||
menuStory.jumpPage('device/Product/Detail', { id: data.productId, tab: 'access' });
|
||||
} else {
|
||||
menuStory.jumpPage('link/AccessConfig/Detail', { id: data.configuration?.id });
|
||||
}
|
||||
}}>
|
||||
emit('close')
|
||||
}}
|
||||
v-slots={{
|
||||
footer: <Space>
|
||||
<Button onClick={() => {
|
||||
if (data.type === 'device') {
|
||||
instanceStore.tabActiveKey = 'Info'
|
||||
} else if (data.type === 'product') {
|
||||
menuStory.jumpPage('device/Product/Detail', { id: data.productId, tab: 'access' });
|
||||
} else {
|
||||
menuStory.jumpPage('link/AccessConfig/Detail', { id: data.configuration?.id });
|
||||
}
|
||||
}}>去修改</Button>
|
||||
<Button onClick={() => {
|
||||
emit('save', data)
|
||||
}}>确认无误</Button>
|
||||
</Space>
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex' }}>{dataRender()}</div>
|
||||
</Modal>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Badge, Button, message, Popconfirm, Space } from "ant-design-vue"
|
||||
import { Badge, Button, message, Popconfirm, Space } from "jetlinks-ui-components"
|
||||
import TitleComponent from '@/components/TitleComponent/index.vue'
|
||||
import styles from './index.module.less'
|
||||
import type { ListProps } from './util'
|
||||
|
|
@ -13,6 +13,7 @@ import ManualInspection from './ManualInspection'
|
|||
import { deployDevice } from "@/api/initHome"
|
||||
import PermissionButton from '@/components/PermissionButton/index.vue'
|
||||
import { useMenuStore } from "@/store/menu"
|
||||
import BindParentDevice from '../../components/BindParentDevice/index.vue'
|
||||
|
||||
type TypeProps = 'network' | 'child-device' | 'media' | 'cloud' | 'channel'
|
||||
|
||||
|
|
@ -1691,6 +1692,102 @@ const Status = defineComponent({
|
|||
}}
|
||||
/>
|
||||
)}
|
||||
{
|
||||
bindParentVisible && (
|
||||
<BindParentDevice
|
||||
data={device.value}
|
||||
onCancel={() => {
|
||||
bindParentVisible.value = false
|
||||
}}
|
||||
onOk={async (parentId: string) => {
|
||||
let item: ListProps | undefined = undefined;
|
||||
const response = await detail(parentId);
|
||||
if (response.status === 200) {
|
||||
if (response?.result?.state?.value === 'notActive') {
|
||||
item = {
|
||||
key: 'parent-device',
|
||||
name: '网关父设备',
|
||||
desc: '诊断网关父设备状态是否正常，禁用或离线将导致连接失败',
|
||||
status: 'error',
|
||||
text: '异常',
|
||||
info: (
|
||||
<div>
|
||||
<div class={styles.infoItem}>
|
||||
<Badge
|
||||
status="default"
|
||||
text={
|
||||
<span>
|
||||
网关父设备已禁用，请先
|
||||
<PermissionButton
|
||||
hasPermission="device/Product:action"
|
||||
popConfirm={{
|
||||
title: '确认启用',
|
||||
onConfirm: async () => {
|
||||
const resp = await _deploy(response?.result?.id || '');
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功！');
|
||||
list.value = modifyArrayList(
|
||||
list.value,
|
||||
{
|
||||
key: 'parent-device',
|
||||
name: '网关父设备',
|
||||
desc: '诊断网关父设备状态是否正常，禁用或离线将导致连接失败',
|
||||
status: 'success',
|
||||
text: '正常',
|
||||
info: null,
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
启用
|
||||
</PermissionButton>
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
} else if (response?.state?.value === 'online') {
|
||||
item = {
|
||||
key: 'parent-device',
|
||||
name: '网关父设备',
|
||||
desc: '诊断网关父设备状态是否正常，禁用或离线将导致连接失败',
|
||||
status: 'success',
|
||||
text: '正常',
|
||||
info: null,
|
||||
};
|
||||
} else {
|
||||
item = {
|
||||
key: 'parent-device',
|
||||
name: '网关父设备',
|
||||
desc: '诊断网关父设备状态是否正常，禁用或离线将导致连接失败',
|
||||
status: 'error',
|
||||
text: '异常',
|
||||
info: (
|
||||
<div>
|
||||
<div class={styles.infoItem}>
|
||||
<Badge
|
||||
status="default"
|
||||
text={<span>网关父设备已离线，请先排查网关设备故障</span>}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
}
|
||||
if (item) {
|
||||
list.value = modifyArrayList(unref(list), item);
|
||||
}
|
||||
instanceStore.current.parentId = parentId;
|
||||
bindParentVisible.value = false
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<a-card>
|
||||
<j-card>
|
||||
<div class="diagnose">
|
||||
<div class="diagnose-header" :style="{background: headerColorMap.get(topState)}">
|
||||
<div class="diagnose-top">
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="diagnose-progress">
|
||||
<a-progress
|
||||
<j-progress
|
||||
:percent="percent"
|
||||
:showInfo="false"
|
||||
size="small"
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
<Status v-show="activeKey !== 'message'" :providerType="providerType" @countChange="countChange" @percentChange="percentChange" @stateChange="stateChange" />
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</j-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<j-form layout="vertical" ref="formRef" :model="modelRef">
|
||||
<template v-for="(item, index) in props.config" :key="index">
|
||||
<template v-for="(item, index) in (props.config || [])" :key="index">
|
||||
<j-form-item
|
||||
:name="item.property"
|
||||
v-for="i in item.properties"
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
<script lang="ts" setup>
|
||||
import { modify } from '@/api/device/instance';
|
||||
import { useInstanceStore } from '@/store/instance';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { message } from 'jetlinks-ui-components';
|
||||
|
||||
const emit = defineEmits(['close', 'save']);
|
||||
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@ import {
|
|||
_deploy,
|
||||
configurationReset,
|
||||
} from '@/api/device/instance';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { message } from 'jetlinks-ui-components';
|
||||
import Save from './Save.vue';
|
||||
|
||||
const instanceStore = useInstanceStore();
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
<script lang="ts" setup>
|
||||
import { queryUserListNoPaging, saveRelations } from '@/api/device/instance';
|
||||
import { useInstanceStore } from '@/store/instance';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { message } from 'jetlinks-ui-components';
|
||||
|
||||
const emit = defineEmits(['close', 'save']);
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<j-table
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:datj-source="dataSource"
|
||||
:data-source="dataSource"
|
||||
bordered
|
||||
:pagination="false"
|
||||
>
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
|
||||
<script lang="ts" setup>
|
||||
import { useInstanceStore } from '@/store/instance';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { message } from 'jetlinks-ui-components';
|
||||
import _ from 'lodash';
|
||||
import { saveTags, delTags } from '@/api/device/instance'
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
<template>
|
||||
<j-card>
|
||||
<Search
|
||||
<j-advanced-search
|
||||
:columns="columns"
|
||||
target="device-instance-log"
|
||||
@search="handleSearch"
|
||||
type="simple"
|
||||
class="search"
|
||||
/>
|
||||
<JProTable
|
||||
ref="instanceRefLog"
|
||||
|
|
@ -12,6 +14,7 @@
|
|||
model="TABLE"
|
||||
:defaultParams="{ sorts: [{ name: 'timestamp', order: 'desc' }] }"
|
||||
:params="params"
|
||||
:bodyStyle="{ padding: 0 }"
|
||||
>
|
||||
<template #type="slotProps">
|
||||
{{ slotProps?.type?.text }}
|
||||
|
|
@ -150,4 +153,7 @@ const handleSearch = (_params: any) => {
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.search {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,28 +1,30 @@
|
|||
<template>
|
||||
<Search :columns="columns" target="device-instance-running-events" />
|
||||
<JTable
|
||||
<j-advanced-search class="search" type="simple" :columns="columns" target="device-instance-running-events" @search="handleSearch" />
|
||||
<JProTable
|
||||
ref="eventsRef"
|
||||
:columns="columns"
|
||||
:request="_getEventList"
|
||||
model="TABLE"
|
||||
:bodyStyle="{ padding: '0 24px' }"
|
||||
:params="params"
|
||||
:bodyStyle="{ padding: '0 0 0 24px' }"
|
||||
>
|
||||
<template #timestamp="slotProps">
|
||||
{{ moment(slotProps.timestamp).format('YYYY-MM-DD HH:mm:ss') }}
|
||||
{{ dayjs(slotProps.timestamp).format('YYYY-MM-DD HH:mm:ss') }}
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<a-button type="link" @click="detail(slotProps)">
|
||||
<j-button type="link" @click="detail(slotProps)">
|
||||
<AIcon type="SearchOutlined" />
|
||||
</a-button>
|
||||
</j-button>
|
||||
</template>
|
||||
</JTable>
|
||||
</JProTable>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import moment from 'moment';
|
||||
import dayjs from 'dayjs';
|
||||
import { getEventList } from '@/api/device/instance';
|
||||
import { useInstanceStore } from '@/store/instance';
|
||||
import { Modal } from 'ant-design-vue';
|
||||
import { Modal } from 'jetlinks-ui-components';
|
||||
import JsonViewer from 'vue-json-viewer';
|
||||
|
||||
const events = defineProps({
|
||||
data: {
|
||||
|
|
@ -51,11 +53,11 @@ const columns = ref<Record<string, any>>([
|
|||
]);
|
||||
const params = ref<Record<string, any>>({});
|
||||
|
||||
const _getEventList = () =>
|
||||
const _getEventList = (_params: any) =>
|
||||
getEventList(
|
||||
instanceStore.current.id || '',
|
||||
events.data.id || '',
|
||||
params.value,
|
||||
_params
|
||||
);
|
||||
|
||||
watchEffect(() => {
|
||||
|
|
@ -78,12 +80,25 @@ watchEffect(() => {
|
|||
}
|
||||
});
|
||||
|
||||
const detail = () => {
|
||||
const handleSearch = (_params: any) => {
|
||||
params.value = _params;
|
||||
};
|
||||
|
||||
const detail = (_info: any) => {
|
||||
Modal.info({
|
||||
title: () => '详情',
|
||||
width: 850,
|
||||
content: () => h('div', {}, [h('p', '暂未开发')]),
|
||||
content: () => h('JsonViewer', {
|
||||
'expand-depth': 5,
|
||||
value: _info
|
||||
}),
|
||||
okText: '关闭',
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.search {
|
||||
padding: 0 0 0 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,36 +1,36 @@
|
|||
<template>
|
||||
<a-spin :spinning="loading">
|
||||
<j-spin :spinning="loading">
|
||||
<div>
|
||||
<a-space>
|
||||
<j-space>
|
||||
<div>
|
||||
统计周期：
|
||||
<a-select v-model:value="cycle" style="width: 120px">
|
||||
<a-select-option value="*" v-if="_type"
|
||||
>实际值</a-select-option
|
||||
<j-select v-model:value="cycle" style="width: 120px">
|
||||
<j-select-option value="*" v-if="_type"
|
||||
>实际值</j-select-option
|
||||
>
|
||||
<a-select-option value="1m">按分钟统计</a-select-option>
|
||||
<a-select-option value="1h">按小时统计</a-select-option>
|
||||
<a-select-option value="1d">按天统计</a-select-option>
|
||||
<a-select-option value="1w">按周统计</a-select-option>
|
||||
<a-select-option value="1M">按月统计</a-select-option>
|
||||
</a-select>
|
||||
<j-select-option value="1m">按分钟统计</j-select-option>
|
||||
<j-select-option value="1h">按小时统计</j-select-option>
|
||||
<j-select-option value="1d">按天统计</j-select-option>
|
||||
<j-select-option value="1w">按周统计</j-select-option>
|
||||
<j-select-option value="1M">按月统计</j-select-option>
|
||||
</j-select>
|
||||
</div>
|
||||
<div v-if="cycle !== '*' && _type">
|
||||
统计规则：
|
||||
<a-select v-model:value="agg" style="width: 120px">
|
||||
<a-select-option value="AVG">平均值</a-select-option>
|
||||
<a-select-option value="MAX">最大值</a-select-option>
|
||||
<a-select-option value="MIN">最小值</a-select-option>
|
||||
<a-select-option value="COUNT">总数</a-select-option>
|
||||
</a-select>
|
||||
<j-select v-model:value="agg" style="width: 120px">
|
||||
<j-select-option value="AVG">平均值</j-select-option>
|
||||
<j-select-option value="MAX">最大值</j-select-option>
|
||||
<j-select-option value="MIN">最小值</j-select-option>
|
||||
<j-select-option value="COUNT">总数</j-select-option>
|
||||
</j-select>
|
||||
</div>
|
||||
</a-space>
|
||||
</j-space>
|
||||
</div>
|
||||
<div style="width: 100%; height: 500px">
|
||||
<Chart :options="options" v-if="chartsList.length" />
|
||||
<JEmpty v-else />
|
||||
</div>
|
||||
</a-spin>
|
||||
</j-spin>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<template>
|
||||
<a-spin :spinning="loading">
|
||||
<j-spin :spinning="loading">
|
||||
<div style="position: relative">
|
||||
<div style="position: absolute; right: 0; top: 5px; z-index: 999">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="onStart">开始动画</a-button>
|
||||
<a-button type="primary" @click="onStop">停止动画</a-button>
|
||||
</a-space>
|
||||
<j-space>
|
||||
<j-button type="primary" @click="onStart">开始动画</j-button>
|
||||
<j-button type="primary" @click="onStop">停止动画</j-button>
|
||||
</j-space>
|
||||
</div>
|
||||
</div>
|
||||
<AMapComponent style="height: 500px">
|
||||
<PathSimplifier :pathData="geoList" ref="amapPath"></PathSimplifier>
|
||||
</AMapComponent>
|
||||
</a-spin>
|
||||
</j-spin>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<a-table
|
||||
<j-table
|
||||
:columns="columns"
|
||||
size="small"
|
||||
rowKey="id"
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
pageSize: dataSource?.pageSize || 10,
|
||||
showSizeChanger: true,
|
||||
total: dataSource?.total || 0,
|
||||
pageSizeOptions: [5, 10, 20, 50],
|
||||
pageSizeOptions: ['8', '12', '24', '60', '100']
|
||||
}"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
|
|
@ -26,8 +26,8 @@
|
|||
/>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button
|
||||
<j-space>
|
||||
<j-button
|
||||
v-if="
|
||||
showLoad ||
|
||||
(!getType(record?.value) &&
|
||||
|
|
@ -36,16 +36,16 @@
|
|||
type="link"
|
||||
@click="_download(record)"
|
||||
><AIcon type="DownloadOutlined"
|
||||
/></a-button>
|
||||
<a-button type="link" @click="showDetail(record)"
|
||||
/></j-button>
|
||||
<j-button type="link" @click="showDetail(record)"
|
||||
><AIcon type="SearchOutlined"
|
||||
/></a-button>
|
||||
</a-space>
|
||||
/></j-button>
|
||||
</j-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</j-table>
|
||||
</div>
|
||||
<a-modal
|
||||
<j-modal
|
||||
title="详情"
|
||||
:visible="visible"
|
||||
@ok="visible = false"
|
||||
|
|
@ -60,13 +60,13 @@
|
|||
:expand-depth="5"
|
||||
:value="current.formatValue"
|
||||
/>
|
||||
<a-textarea
|
||||
<j-textarea
|
||||
v-else-if="data?.valueType?.type === 'file'"
|
||||
:value="current.formatValue"
|
||||
:row="3"
|
||||
/>
|
||||
<a-input v-else disabled :value="current.formatValue" />
|
||||
</a-modal>
|
||||
<j-input v-else disabled :value="current.formatValue" />
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -90,7 +90,12 @@ const _props = defineProps({
|
|||
});
|
||||
|
||||
const instanceStore = useInstanceStore();
|
||||
const dataSource = ref({});
|
||||
const dataSource = ref({
|
||||
pageIndex: 0,
|
||||
pageSize: 10,
|
||||
data: [],
|
||||
total: 0
|
||||
});
|
||||
const current = ref<any>({});
|
||||
const visible = ref<boolean>(false);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
<template>
|
||||
<a-space>
|
||||
<a-radio-group
|
||||
<j-space>
|
||||
<j-radio-group
|
||||
:value="radioValue"
|
||||
button-style="solid"
|
||||
@change="onRadioChange"
|
||||
>
|
||||
<a-radio-button value="today">今日</a-radio-button>
|
||||
<a-radio-button value="week">近一周</a-radio-button>
|
||||
<a-radio-button value="month">近一月</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-range-picker
|
||||
<j-radio-button value="today">今日</j-radio-button>
|
||||
<j-radio-button value="week">近一周</j-radio-button>
|
||||
<j-radio-button value="month">近一月</j-radio-button>
|
||||
</j-radio-group>
|
||||
<j-range-picker
|
||||
show-time
|
||||
v-model:value="dateValue"
|
||||
:placeholder="['开始时间', '结束时间']"
|
||||
@change="onRangeChange"
|
||||
:allowClear="false"
|
||||
/>
|
||||
</a-space>
|
||||
</j-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
<template>
|
||||
<a-modal title="详情" visible width="50vw" @ok="onCancel" @cancel="onCancel">
|
||||
<j-modal title="详情" visible width="50vw" @ok="onCancel" @cancel="onCancel">
|
||||
<div style="margin-bottom: 10px"><TimeComponent v-model="dateValue" /></div>
|
||||
<div>
|
||||
<a-tabs :destroyInactiveTabPane="true" v-model:activeKey="activeKey" style="max-height: 600px; overflow-y: auto">
|
||||
<a-tab-pane key="table" tab="列表">
|
||||
<j-tabs :destroyInactiveTabPane="true" v-model:activeKey="activeKey" style="max-height: 600px; overflow-y: auto">
|
||||
<j-tab-pane key="table" tab="列表">
|
||||
<Table :data="props.data" :time="_getTimes" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="charts" tab="图表">
|
||||
</j-tab-pane>
|
||||
<j-tab-pane key="charts" tab="图表">
|
||||
<Charts :data="props.data" :time="_getTimes" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="geo" tab="轨迹" v-if="data?.valueType?.type === 'geoPoint'">
|
||||
</j-tab-pane>
|
||||
<j-tab-pane key="geo" tab="轨迹" v-if="data?.valueType?.type === 'geoPoint'">
|
||||
<PropertyAMap :data="props.data" :time="_getTimes" />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</j-tab-pane>
|
||||
</j-tabs>
|
||||
</div>
|
||||
</a-modal>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<a-modal
|
||||
<j-modal
|
||||
:maskClosable="false"
|
||||
:visible="true"
|
||||
title="编辑指标"
|
||||
|
|
@ -7,15 +7,30 @@
|
|||
@cancel="handleCancel"
|
||||
:confirmLoading="loading"
|
||||
>
|
||||
<a-alert message="场景联动页面可引用指标配置触发条件" type="warning" showIcon />
|
||||
<a-form layout="vertical" ref="formRef" :model="modelRef" style="margin-top: 20px">
|
||||
<j-alert
|
||||
message="场景联动页面可引用指标配置触发条件"
|
||||
type="warning"
|
||||
showIcon
|
||||
/>
|
||||
<j-form
|
||||
layout="vertical"
|
||||
ref="formRef"
|
||||
:model="modelRef"
|
||||
style="margin-top: 20px"
|
||||
>
|
||||
<template v-for="(item, index) in modelRef.metrics" :key="index">
|
||||
<a-row type="flex" justify="space-between" align="bottom">
|
||||
<a-col :span="11">
|
||||
<a-form-item
|
||||
<j-row type="flex" justify="space-between" :align="'bottom'">
|
||||
<j-col :span="item.range ? 11 : 24">
|
||||
<j-form-item
|
||||
:rules="{
|
||||
required: true,
|
||||
message: `请${['date', 'boolean'].includes(data?.valueType?.type)? '选择': '输入'}指标值`,
|
||||
message: `请${
|
||||
['date', 'boolean'].includes(
|
||||
data?.valueType?.type,
|
||||
)
|
||||
? '选择'
|
||||
: '输入'
|
||||
}指标值`,
|
||||
}"
|
||||
:name="['metrics', index, 'value', 0]"
|
||||
:label="item?.name || '指标值'"
|
||||
|
|
@ -26,100 +41,131 @@
|
|||
:options="
|
||||
data.valueType?.type === 'boolean'
|
||||
? [
|
||||
{
|
||||
label: data.valueType?.trueText,
|
||||
value: String(data.valueType?.trueValue),
|
||||
},
|
||||
{
|
||||
label: data.valueType?.falseText,
|
||||
value: String(data.valueType?.falseValue),
|
||||
},
|
||||
]
|
||||
{
|
||||
label: data.valueType
|
||||
?.trueText,
|
||||
value: String(
|
||||
data.valueType?.trueValue,
|
||||
),
|
||||
},
|
||||
{
|
||||
label: data.valueType
|
||||
?.falseText,
|
||||
value: String(
|
||||
data.valueType
|
||||
?.falseValue,
|
||||
),
|
||||
},
|
||||
]
|
||||
: undefined
|
||||
"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<template v-if="item.range">
|
||||
<a-col><div class="center-icon">~</div></a-col>
|
||||
<a-col :span="11">
|
||||
<a-form-item
|
||||
<j-col><div class="center-icon">~</div></j-col>
|
||||
<j-col :span="11">
|
||||
<j-form-item
|
||||
:name="['metrics', index, 'value', 1]"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: `请${['date', 'boolean'].includes(data?.valueType?.type)? '选择': '输入'}指标值`,
|
||||
message: `请${
|
||||
['date', 'boolean'].includes(
|
||||
data?.valueType?.type,
|
||||
)
|
||||
? '选择'
|
||||
: '输入'
|
||||
}指标值`,
|
||||
}"
|
||||
>
|
||||
<ValueItem
|
||||
v-model:modelValue="item.value[1]"
|
||||
:itemType="data.valueType?.type"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</template>
|
||||
</a-row>
|
||||
</j-row>
|
||||
</template>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</j-form>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { queryMetric, saveMetric } from '@/api/device/instance'
|
||||
const emit = defineEmits(['close']);
|
||||
import { useInstanceStore } from "@/store/instance"
|
||||
import { message } from 'ant-design-vue';
|
||||
import { queryMetric, saveMetric } from '@/api/device/instance';
|
||||
import { useInstanceStore } from '@/store/instance';
|
||||
import { message } from 'jetlinks-ui-components';
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
})
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const loading = ref<boolean>(false)
|
||||
const instanceStore = useInstanceStore()
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
const loading = ref<boolean>(false);
|
||||
const instanceStore = useInstanceStore();
|
||||
const formRef = ref();
|
||||
|
||||
const modelRef = reactive({
|
||||
metrics: []
|
||||
metrics: [],
|
||||
});
|
||||
|
||||
const handleCancel = () => {
|
||||
emit('close')
|
||||
}
|
||||
emit('close');
|
||||
};
|
||||
|
||||
watch(() => props.data.id, (newVal) => {
|
||||
if(newVal && instanceStore.current.id){
|
||||
queryMetric(instanceStore.current.id, props.data.id).then(resp => {
|
||||
if (resp.status === 200) {
|
||||
if (Array.isArray(resp?.result) && resp?.result.length) {
|
||||
const list = resp?.result.map((item: any) => {
|
||||
const val = Array.isArray(item?.value) ? [item?.value] : item?.value?.split(',')
|
||||
return {
|
||||
...item,
|
||||
value: val
|
||||
};
|
||||
});
|
||||
modelRef.metrics = list as any
|
||||
} else {
|
||||
const type = props.data.valueType?.type;
|
||||
if (type === 'boolean') {
|
||||
const list = props.data.expands?.metrics.map((item: any) => {
|
||||
const value = (item?.value || {}).map((i: any) => String(i)) || {};
|
||||
return {
|
||||
...item,
|
||||
value,
|
||||
};
|
||||
});
|
||||
modelRef.metrics = list || []
|
||||
} else {
|
||||
modelRef.metrics = props.data.expands?.metrics || []
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.data.id,
|
||||
(newVal) => {
|
||||
if (newVal && instanceStore.current.id) {
|
||||
queryMetric(instanceStore.current.id, props.data.id).then(
|
||||
(resp) => {
|
||||
if (resp.status === 200) {
|
||||
if (
|
||||
Array.isArray(resp?.result) &&
|
||||
resp?.result.length
|
||||
) {
|
||||
const list = resp?.result.map((item: any) => {
|
||||
const val = Array.isArray(item?.value)
|
||||
? [item?.value]
|
||||
: item?.value?.split(',');
|
||||
return {
|
||||
...item,
|
||||
value: val,
|
||||
};
|
||||
});
|
||||
modelRef.metrics = list as any;
|
||||
} else {
|
||||
const type = props.data.valueType?.type;
|
||||
if (type === 'boolean') {
|
||||
const list = props.data.expands?.metrics.map(
|
||||
(item: any) => {
|
||||
const value =
|
||||
(item?.value || {}).map((i: any) =>
|
||||
String(i),
|
||||
) || {};
|
||||
return {
|
||||
...item,
|
||||
value,
|
||||
};
|
||||
},
|
||||
);
|
||||
modelRef.metrics = list || [];
|
||||
} else {
|
||||
modelRef.metrics =
|
||||
props.data.expands?.metrics || [];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
})
|
||||
}
|
||||
}, {immediate: true, deep: true})
|
||||
},
|
||||
{ immediate: true, deep: true },
|
||||
);
|
||||
|
||||
const handleSave = () => {
|
||||
formRef.value
|
||||
|
|
@ -132,19 +178,23 @@ const handleSave = () => {
|
|||
value: item.value.join(','),
|
||||
};
|
||||
});
|
||||
const resp = await saveMetric(instanceStore.current.id || '', props.data.id || '', list).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
const resp = await saveMetric(
|
||||
instanceStore.current.id || '',
|
||||
props.data.id || '',
|
||||
list,
|
||||
).finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功！');
|
||||
emit('close')
|
||||
emit('close');
|
||||
formRef.value.resetFields();
|
||||
}
|
||||
})
|
||||
.catch((err: any) => {
|
||||
console.log('error', err);
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<template>
|
||||
<a-card :hoverable="true" class="card-box">
|
||||
<!-- <a-spin :spinning="loading"> -->
|
||||
<j-card :hoverable="true" class="card-box">
|
||||
<!-- <j-spin :spinning="loading"> -->
|
||||
<div class="card-container">
|
||||
<div class="header">
|
||||
<div class="title">{{ _props.data.name }}</div>
|
||||
<div class="extra">
|
||||
<a-space :size="16">
|
||||
<j-space :size="16">
|
||||
<template v-for="i in actions" :key="i.key">
|
||||
<a-tooltip
|
||||
<j-tooltip
|
||||
v-bind="i.tooltip"
|
||||
v-if="i.key !== 'edit'"
|
||||
>
|
||||
<a-button
|
||||
<j-button
|
||||
style="padding: 0; margin: 0"
|
||||
type="link"
|
||||
:disabled="i.disabled"
|
||||
|
|
@ -21,8 +21,8 @@
|
|||
:type="i.icon"
|
||||
style="color: #323130; font-size: 12px"
|
||||
/>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</j-button>
|
||||
</j-tooltip>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
v-else
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</a-space>
|
||||
</j-space>
|
||||
</div>
|
||||
</div>
|
||||
<div class="value">
|
||||
|
|
@ -53,8 +53,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </a-spin> -->
|
||||
</a-card>
|
||||
<!-- </j-spin> -->
|
||||
</j-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<a-modal
|
||||
<j-modal
|
||||
:maskClosable="false"
|
||||
:visible="true"
|
||||
title="编辑"
|
||||
|
|
@ -7,9 +7,9 @@
|
|||
@cancel="handleCancel"
|
||||
:confirmLoading="loading"
|
||||
>
|
||||
<a-alert message="当数据来源为设备时，填写的值将下发到设备" type="warning" showIcon />
|
||||
<a-form :rules="rules" layout="vertical" ref="formRef" :model="modelRef" style="margin-top: 20px">
|
||||
<a-form-item name="propertyValue" :label="data?.name || '自定义属性'">
|
||||
<j-alert message="当数据来源为设备时，填写的值将下发到设备" type="warning" showIcon />
|
||||
<j-form :rules="rules" layout="vertical" ref="formRef" :model="modelRef" style="margin-top: 20px">
|
||||
<j-form-item name="propertyValue" :label="data?.name || '自定义属性'">
|
||||
<ValueItem
|
||||
v-model:modelValue="modelRef.propertyValue"
|
||||
:itemType="data?.valueType?.type || data?.dataType"
|
||||
|
|
@ -24,16 +24,15 @@
|
|||
: undefined
|
||||
"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</j-form-item>
|
||||
</j-form>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { setProperty } from '@/api/device/instance'
|
||||
const emit = defineEmits(['close']);
|
||||
import { useInstanceStore } from "@/store/instance"
|
||||
import { message } from 'ant-design-vue';
|
||||
import { message } from 'jetlinks-ui-components';
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
|
|
@ -42,6 +41,8 @@ const props = defineProps({
|
|||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
const loading = ref<boolean>(false)
|
||||
const instanceStore = useInstanceStore()
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<a-modal
|
||||
<j-modal
|
||||
:maskClosable="false"
|
||||
width="600px"
|
||||
:visible="true"
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
@cancel="handleCancel"
|
||||
>
|
||||
<template v-if="['.jpg', '.png'].includes(type)">
|
||||
<a-image :src="value?.formatValue" />
|
||||
<j-image :src="value?.formatValue" />
|
||||
</template>
|
||||
<template v-else-if="['.flv', '.m3u8', '.mp4'].includes(type)">
|
||||
</template>
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
:value="value?.formatValue"
|
||||
/>
|
||||
</template>
|
||||
</a-modal>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,59 +1,110 @@
|
|||
<template>
|
||||
<div class="value">
|
||||
<div v-if="value?.formatValue !== 0 && !value?.formatValue" :class="valueClass">--</div>
|
||||
<div
|
||||
v-if="value?.formatValue !== 0 && !value?.formatValue"
|
||||
:class="valueClass"
|
||||
>
|
||||
--
|
||||
</div>
|
||||
<div v-else-if="_data.data?.valueType?.type === 'file'">
|
||||
<template v-if="data?.valueType?.fileType === 'base64'">
|
||||
<div :class="valueClass" v-if="!!getType(value?.formatValue)">
|
||||
<img :src="imgMap.get(_type)" @error="onError" />
|
||||
</div>
|
||||
<div v-else :class="valueClass">
|
||||
<img :src="imgMap.get('other')" />
|
||||
</div>
|
||||
</template>
|
||||
<div v-else-if="data?.valueType?.fileType === 'Binary(二进制)'" :class="valueClass">
|
||||
<img :src="imgMap.get('other')" />
|
||||
</div>
|
||||
<template v-else>
|
||||
<template v-if="imgList.some((item) => value?.formatValue.includes(item))">
|
||||
<div :class="valueClass" @click="getDetail('img')">
|
||||
<img :src="value?.formatValue" @error="imgError" />
|
||||
</div>
|
||||
<template v-if="data?.valueType?.fileType === 'base64'">
|
||||
<div :class="valueClass" v-if="!!getType(value?.formatValue)">
|
||||
<img :src="imgMap.get(_type)" @error="onError" />
|
||||
</div>
|
||||
<div v-else :class="valueClass">
|
||||
<img :src="imgMap.get('other')" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="videoList.some((item) => value?.formatValue.includes(item))">
|
||||
<div :class="valueClass" @click="getDetail('video')">
|
||||
<img :src="imgMap.get('video')" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="fileList.some((item) => value?.formatValue.includes(item))">
|
||||
<div :class="valueClass">
|
||||
<img :src="imgMap.get(fileList.find((item) => value?.formatValue.includes(item)).slice(1))" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div :class="valueClass">
|
||||
<div
|
||||
v-else-if="data?.valueType?.fileType === 'Binary(二进制)'"
|
||||
:class="valueClass"
|
||||
>
|
||||
<img :src="imgMap.get('other')" />
|
||||
</div>
|
||||
</div>
|
||||
<template v-else>
|
||||
<template
|
||||
v-if="
|
||||
imgList.some((item) =>
|
||||
value?.formatValue.includes(item),
|
||||
)
|
||||
"
|
||||
>
|
||||
<div :class="valueClass" @click="getDetail('img')">
|
||||
<img :src="value?.formatValue" @error="imgError" />
|
||||
</div>
|
||||
</template>
|
||||
<template
|
||||
v-else-if="
|
||||
videoList.some((item) =>
|
||||
value?.formatValue.includes(item),
|
||||
)
|
||||
"
|
||||
>
|
||||
<div :class="valueClass" @click="getDetail('video')">
|
||||
<img :src="imgMap.get('video')" />
|
||||
</div>
|
||||
</template>
|
||||
<template
|
||||
v-else-if="
|
||||
fileList.some((item) =>
|
||||
value?.formatValue.includes(item),
|
||||
)
|
||||
"
|
||||
>
|
||||
<div :class="valueClass">
|
||||
<img
|
||||
:src="
|
||||
imgMap.get(
|
||||
fileList
|
||||
.find((item) =>
|
||||
value?.formatValue.includes(item),
|
||||
)
|
||||
.slice(1),
|
||||
)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div :class="valueClass">
|
||||
<img :src="imgMap.get('other')" />
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
<div v-else-if="_data.data?.valueType?.type === 'object'" @click="getDetail('obj')" :class="valueClass">
|
||||
<img :src="imgMap.get('obj')" />
|
||||
<div
|
||||
v-else-if="_data.data?.valueType?.type === 'object'"
|
||||
@click="getDetail('obj')"
|
||||
:class="valueClass"
|
||||
>
|
||||
<img :src="imgMap.get('obj')" />
|
||||
</div>
|
||||
<div v-else-if="_data.data?.valueType?.type === 'geoPoint' || _data.data?.valueType?.type === 'array'" :class="valueClass">
|
||||
{{JSON.stringify(value?.formatValue)}}
|
||||
<div
|
||||
v-else-if="
|
||||
_data.data?.valueType?.type === 'geoPoint' ||
|
||||
_data.data?.valueType?.type === 'array'
|
||||
"
|
||||
:class="valueClass"
|
||||
>
|
||||
{{ JSON.stringify(value?.formatValue) }}
|
||||
</div>
|
||||
<div v-else :class="valueClass">
|
||||
{{String(value?.formatValue)}}
|
||||
{{ String(value?.formatValue) }}
|
||||
</div>
|
||||
<ValueDetail v-if="visible" :type="_types" :value="value" @close="visible = false" />
|
||||
<ValueDetail
|
||||
v-if="visible"
|
||||
:type="_types"
|
||||
:value="value"
|
||||
@close="visible = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getImage } from "@/utils/comm";
|
||||
import { message } from "ant-design-vue";
|
||||
import ValueDetail from './ValueDetail.vue'
|
||||
import {getType, imgMap, imgList, videoList, fileList} from './index'
|
||||
import { getImage } from '@/utils/comm';
|
||||
import { message } from 'jetlinks-ui-components';
|
||||
import ValueDetail from './ValueDetail.vue';
|
||||
import { getType, imgMap, imgList, videoList, fileList } from './index';
|
||||
|
||||
const _data = defineProps({
|
||||
data: {
|
||||
|
|
@ -62,88 +113,99 @@ const _data = defineProps({
|
|||
},
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
default: () => {},
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'card'
|
||||
}
|
||||
default: 'card',
|
||||
},
|
||||
});
|
||||
|
||||
const valueClass = computed(() => {
|
||||
return _data.type === 'card' ? 'cardValue' : 'otherValue'
|
||||
})
|
||||
return _data.type === 'card' ? 'cardValue' : 'otherValue';
|
||||
});
|
||||
|
||||
const isHttps = document.location.protocol === 'https:';
|
||||
|
||||
const _types = ref<string>('')
|
||||
const visible = ref<boolean>(false)
|
||||
const temp = ref<boolean>(false)
|
||||
|
||||
const _types = ref<string>('');
|
||||
const visible = ref<boolean>(false);
|
||||
const temp = ref<boolean>(false);
|
||||
|
||||
const onError = (e: any) => {
|
||||
e.target.src = imgMap.get('other')
|
||||
}
|
||||
e.target.src = imgMap.get('other');
|
||||
};
|
||||
|
||||
const imgError = (e: any) => {
|
||||
e.target.src = imgMap.get('error')
|
||||
temp.value = true
|
||||
}
|
||||
e.target.src = imgMap.get('error');
|
||||
temp.value = true;
|
||||
};
|
||||
|
||||
const getDetail = (_type: string) => {
|
||||
const value = _data.value
|
||||
let flag: string = ''
|
||||
if(_type === 'img'){
|
||||
if (isHttps && value?.formatValue.indexOf('http:') !== -1) {
|
||||
message.error('域名为https时，不支持访问http地址');
|
||||
} else if (temp.value) {
|
||||
message.error('该图片无法访问');
|
||||
} else {
|
||||
flag = ['.jpg', '.png'].find((item) => value?.formatValue.includes(item)) || '--';
|
||||
const value = _data.value;
|
||||
let flag: string = '';
|
||||
if (_type === 'img') {
|
||||
if (isHttps && value?.formatValue.indexOf('http:') !== -1) {
|
||||
message.error('域名为https时，不支持访问http地址');
|
||||
} else if (temp.value) {
|
||||
message.error('该图片无法访问');
|
||||
} else {
|
||||
flag =
|
||||
['.jpg', '.png'].find((item) =>
|
||||
value?.formatValue.includes(item),
|
||||
) || '--';
|
||||
_types.value = flag;
|
||||
visible.value = true;
|
||||
}
|
||||
} else if (_type === 'video') {
|
||||
if (isHttps && value?.formatValue.indexOf('http:') !== -1) {
|
||||
message.error('域名为https时，不支持访问http地址');
|
||||
} else if (
|
||||
['.rmvb', '.mvb'].some((item) => value?.formatValue.includes(item))
|
||||
) {
|
||||
message.error('当前仅支持播放.mp4,.flv,.m3u8格式的视频');
|
||||
} else {
|
||||
flag =
|
||||
['.m3u8', '.flv', '.mp4'].find((item) =>
|
||||
value?.formatValue.includes(item),
|
||||
) || '--';
|
||||
_types.value = flag;
|
||||
visible.value = true;
|
||||
}
|
||||
} else if (_type === 'obj') {
|
||||
flag = 'obj';
|
||||
_types.value = flag;
|
||||
visible.value = true;
|
||||
}
|
||||
} else if(_type === 'video'){
|
||||
if (isHttps && value?.formatValue.indexOf('http:') !== -1) {
|
||||
message.error('域名为https时，不支持访问http地址');
|
||||
} else if (['.rmvb', '.mvb'].some((item) => value?.formatValue.includes(item))) {
|
||||
message.error('当前仅支持播放.mp4,.flv,.m3u8格式的视频');
|
||||
} else {
|
||||
flag = ['.m3u8', '.flv', '.mp4'].find((item) => value?.formatValue.includes(item)) || '--';
|
||||
}
|
||||
}else if(_type === 'obj'){
|
||||
flag = 'obj'
|
||||
}
|
||||
_types.value = flag
|
||||
visible.value = true
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.cardValue {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
overflow: hidden;
|
||||
color: #323130;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
img {
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
.cardValue {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
overflow: hidden;
|
||||
color: #323130;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.otherValue {
|
||||
img {
|
||||
width: 40px;
|
||||
img {
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.otherValue {
|
||||
img {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,7 +2,8 @@
|
|||
<j-spin :spinning="loading">
|
||||
<JProTable
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:request="query"
|
||||
:params="_params"
|
||||
:bodyStyle="{ padding: '0 0 0 20px' }"
|
||||
>
|
||||
<template #headerTitle>
|
||||
|
|
@ -58,26 +59,6 @@
|
|||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #paginationRender>
|
||||
<j-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>
|
||||
</JProTable>
|
||||
</j-spin>
|
||||
<Save v-if="editVisible" @close="editVisible = false" :data="currentInfo" />
|
||||
|
|
@ -107,6 +88,7 @@ import { message } from 'ant-design-vue';
|
|||
import { getWebSocket } from '@/utils/websocket';
|
||||
import { map } from 'rxjs/operators';
|
||||
import { queryDashboard } from '@/api/comm';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '名称',
|
||||
|
|
@ -142,9 +124,6 @@ const _data = defineProps({
|
|||
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>>({});
|
||||
|
|
@ -152,6 +131,9 @@ const instanceStore = useInstanceStore();
|
|||
const indicatorVisible = ref<boolean>(false); // 指标
|
||||
const loading = ref<boolean>(false);
|
||||
const propertyValue = ref<Record<string, any>>({});
|
||||
const _params = reactive({
|
||||
name: '',
|
||||
});
|
||||
|
||||
const subRef = ref();
|
||||
|
||||
|
|
@ -309,39 +291,35 @@ const getDashboard = async () => {
|
|||
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;
|
||||
const query = (params: Record<string, any>) =>
|
||||
new Promise((resolve) => {
|
||||
const _from = params.pageIndex * params.pageSize;
|
||||
const _to = (params.pageIndex + 1) * params.pageSize;
|
||||
let arr = _.cloneDeep(_dataSource.value);
|
||||
if (params?.name) {
|
||||
const li = _dataSource.value.filter((i: any) => {
|
||||
return i?.name.indexOf(params.name) !== -1;
|
||||
});
|
||||
arr = _.cloneDeep(li);
|
||||
}
|
||||
resolve({
|
||||
result: {
|
||||
data: arr.slice(_from, _to),
|
||||
pageIndex: params.pageIndex || 0,
|
||||
pageSize: params.pageSize || 12,
|
||||
total: arr.length,
|
||||
},
|
||||
status: 200,
|
||||
});
|
||||
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);
|
||||
}
|
||||
};
|
||||
getDashboard();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => _data.data,
|
||||
(newVal) => {
|
||||
if (newVal.length) {
|
||||
_dataSource.value = newVal as PropertyData[];
|
||||
query(0, 8, value.value);
|
||||
_params.name = '';
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -351,7 +329,7 @@ watch(
|
|||
);
|
||||
|
||||
const onSearch = () => {
|
||||
query(0, 8, value.value);
|
||||
_params.name = value.value;
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,175 @@
|
|||
<!-- 绑定设备 -->
|
||||
<template>
|
||||
<j-modal
|
||||
:maskClosable="false"
|
||||
width="1000px"
|
||||
:visible="true"
|
||||
title="绑定父设备"
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
:confirmLoading="btnLoading"
|
||||
>
|
||||
<j-advanced-search
|
||||
:columns="columns"
|
||||
target="child-device-bind"
|
||||
@search="handleSearch"
|
||||
type="simple"
|
||||
/>
|
||||
<JProTable
|
||||
ref="bindDeviceRef"
|
||||
:columns="columns"
|
||||
:request="query"
|
||||
model="TABLE"
|
||||
:bodyStyle="{ padding: '0 0 0 24px' }"
|
||||
:defaultParams="defaultParams"
|
||||
:rowSelection="{
|
||||
selectedRowKeys: _selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
}"
|
||||
:params="params"
|
||||
>
|
||||
<template #registryTime="slotProps">
|
||||
{{
|
||||
slotProps.registryTime
|
||||
? dayjs(slotProps.registryTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
: ''
|
||||
}}
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<j-badge
|
||||
:text="slotProps.state.text"
|
||||
:status="statusMap.get(slotProps.state.value)"
|
||||
/>
|
||||
</template>
|
||||
</JProTable>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { query, bindDevice } from '@/api/device/instance';
|
||||
import dayjs from 'dayjs';
|
||||
import { message } from 'jetlinks-ui-components';
|
||||
|
||||
const emit = defineEmits(['cancel', 'ok']);
|
||||
|
||||
const bindDeviceRef = ref<Record<string, any>>({});
|
||||
const params = ref<Record<string, any>>({});
|
||||
const _selectedRowKeys = ref<string[]>([]);
|
||||
const btnLoading = ref<boolean>(false);
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
})
|
||||
|
||||
const statusMap = new Map();
|
||||
statusMap.set('online', 'success');
|
||||
statusMap.set('offline', 'error');
|
||||
statusMap.set('notActive', 'warning');
|
||||
|
||||
const defaultParams = {
|
||||
terms: [
|
||||
{
|
||||
column: 'productId$product-info',
|
||||
value: [
|
||||
{
|
||||
column: 'deviceType',
|
||||
termType: 'eq',
|
||||
value: 'gateway',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
ellipsis: true,
|
||||
fixed: 'left',
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '设备名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
ellipsis: true,
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '所属产品',
|
||||
dataIndex: 'productName',
|
||||
key: 'productName',
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '注册时间',
|
||||
dataIndex: 'registryTime',
|
||||
key: 'registryTime',
|
||||
scopedSlots: true,
|
||||
search: {
|
||||
type: 'date',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'state',
|
||||
key: 'state',
|
||||
scopedSlots: true,
|
||||
search: {
|
||||
type: 'select',
|
||||
options: [
|
||||
{ label: '禁用', value: 'notActive' },
|
||||
{ label: '离线', value: 'offline' },
|
||||
{ label: '在线', value: 'online' },
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const handleSearch = (e: any) => {
|
||||
params.value = e;
|
||||
};
|
||||
|
||||
const onSelectChange = (keys: string[]) => {
|
||||
_selectedRowKeys.value = [...keys];
|
||||
};
|
||||
|
||||
const handleOk = () => {
|
||||
if (_selectedRowKeys.value.length === 0) {
|
||||
message.warning('请选择需要绑定的设备');
|
||||
return;
|
||||
}
|
||||
btnLoading.value = true;
|
||||
bindDevice(_selectedRowKeys.value[0], props.data.id, )
|
||||
.then((resp) => {
|
||||
if(resp.status === 200){
|
||||
emit('ok', _selectedRowKeys.value[0]);
|
||||
message.success('操作成功');
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
btnLoading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
emit('cancel', false);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<a-modal
|
||||
<j-modal
|
||||
width="900px"
|
||||
title="批量映射"
|
||||
visible
|
||||
|
|
@ -10,49 +10,49 @@
|
|||
<div class="map-tree-top">
|
||||
采集器的点位名称与属性名称一致时将自动映射绑定；有多个采集器点位名称与属性名称一致时以第1个采集器的点位数据进行绑定
|
||||
</div>
|
||||
<a-spin :spinning="loading">
|
||||
<j-spin :spinning="loading">
|
||||
<div class="map-tree-content">
|
||||
<a-card class="map-tree-content-card" title="源数据">
|
||||
<a-tree
|
||||
<j-card class="map-tree-content-card" title="源数据">
|
||||
<j-tree
|
||||
checkable
|
||||
:height="300"
|
||||
:tree-data="dataSource"
|
||||
:checkedKeys="checkedKeys"
|
||||
@check="onCheck"
|
||||
/>
|
||||
</a-card>
|
||||
</j-card>
|
||||
<div style="width: 100px">
|
||||
<a-button
|
||||
<j-button
|
||||
:disabled="rightList.length >= leftList.length"
|
||||
@click="onRight"
|
||||
>加入右侧</a-button
|
||||
>加入右侧</j-button
|
||||
>
|
||||
</div>
|
||||
<a-card class="map-tree-content-card" title="采集器">
|
||||
<a-list
|
||||
<j-card class="map-tree-content-card" title="采集器">
|
||||
<j-list
|
||||
size="small"
|
||||
:data-source="rightList"
|
||||
class="map-tree-content-card-list"
|
||||
>
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item>
|
||||
<j-list-item>
|
||||
{{ item.title }}
|
||||
<template #actions>
|
||||
<a-popconfirm
|
||||
<j-popconfirm
|
||||
title="确定删除?"
|
||||
@confirm="_delete(item.key)"
|
||||
>
|
||||
<AIcon type="DeleteOutlined" />
|
||||
</a-popconfirm>
|
||||
</j-popconfirm>
|
||||
</template>
|
||||
</a-list-item>
|
||||
</j-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
</a-card>
|
||||
</j-list>
|
||||
</j-card>
|
||||
</div>
|
||||
</a-spin>
|
||||
</j-spin>
|
||||
</div>
|
||||
</a-modal>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,46 +1,46 @@
|
|||
<template>
|
||||
<a-spin :spinning="loading" v-if="metadata.properties.length">
|
||||
<a-card>
|
||||
<j-spin :spinning="loading" v-if="metadata.properties.length">
|
||||
<j-card>
|
||||
<template #extra>
|
||||
<a-space>
|
||||
<a-button @click="visible = true">批量映射</a-button>
|
||||
<a-button type="primary" @click="onSave">保存</a-button>
|
||||
</a-space>
|
||||
<j-space>
|
||||
<j-button @click="visible = true">批量映射</j-button>
|
||||
<j-button type="primary" @click="onSave">保存</j-button>
|
||||
</j-space>
|
||||
</template>
|
||||
<a-form ref="formRef" :model="modelRef">
|
||||
<a-table :dataSource="modelRef.dataSource" :columns="columns">
|
||||
<j-form ref="formRef" :model="modelRef">
|
||||
<j-table :dataSource="modelRef.dataSource" :columns="columns">
|
||||
<template #headerCell="{ column }">
|
||||
<template v-if="column.key === 'collectorId'">
|
||||
采集器
|
||||
<a-tooltip title="数据采集中配置的真实物理设备">
|
||||
<j-tooltip title="数据采集中配置的真实物理设备">
|
||||
<AIcon type="QuestionCircleOutlined" />
|
||||
</a-tooltip>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<template v-if="column.dataIndex === 'channelId'">
|
||||
<a-form-item
|
||||
<j-form-item
|
||||
:name="['dataSource', index, 'channelId']"
|
||||
>
|
||||
<a-select
|
||||
<j-select
|
||||
style="width: 100%"
|
||||
v-model:value="record[column.dataIndex]"
|
||||
placeholder="请选择"
|
||||
allowClear
|
||||
:filter-option="filterOption"
|
||||
>
|
||||
<a-select-option
|
||||
<j-select-option
|
||||
v-for="item in channelList"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
>{{ item.label }}</a-select-option
|
||||
>{{ item.label }}</j-select-option
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'collectorId'">
|
||||
<a-form-item
|
||||
<j-form-item
|
||||
:name="['dataSource', index, 'collectorId']"
|
||||
:rules="[
|
||||
{
|
||||
|
|
@ -54,10 +54,10 @@
|
|||
:id="record.channelId"
|
||||
type="COLLECTOR"
|
||||
/>
|
||||
</a-form-item>
|
||||
</j-form-item>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'pointId'">
|
||||
<a-form-item
|
||||
<j-form-item
|
||||
:name="['dataSource', index, 'pointId']"
|
||||
:rules="[
|
||||
{
|
||||
|
|
@ -71,33 +71,33 @@
|
|||
:id="record.collectorId"
|
||||
type="POINT"
|
||||
/>
|
||||
</a-form-item>
|
||||
</j-form-item>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'id'">
|
||||
<a-badge
|
||||
<j-badge
|
||||
v-if="record[column.dataIndex]"
|
||||
status="success"
|
||||
text="已绑定"
|
||||
/>
|
||||
<a-badge v-else status="error" text="未绑定" />
|
||||
<j-badge v-else status="error" text="未绑定" />
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-tooltip title="解绑">
|
||||
<a-popconfirm
|
||||
<j-tooltip title="解绑">
|
||||
<j-popconfirm
|
||||
title="确认解绑"
|
||||
:disabled="!record.id"
|
||||
@confirm="unbind(record.id)"
|
||||
>
|
||||
<a-button type="link" :disabled="!record.id"
|
||||
<j-button type="link" :disabled="!record.id"
|
||||
><AIcon type="icon-jiebang"
|
||||
/></a-button>
|
||||
</a-popconfirm>
|
||||
</a-tooltip>
|
||||
/></j-button>
|
||||
</j-popconfirm>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</j-table>
|
||||
</j-form>
|
||||
</j-card>
|
||||
<PatchMapping
|
||||
:deviceId="instanceStore.current.id"
|
||||
v-if="visible"
|
||||
|
|
@ -106,10 +106,10 @@
|
|||
:type="provider"
|
||||
:metaData="modelRef.dataSource"
|
||||
/>
|
||||
</a-spin>
|
||||
<a-card v-else>
|
||||
</j-spin>
|
||||
<j-card v-else>
|
||||
<JEmpty description='暂无数据，请配置物模型' style="margin: 10% 0" />
|
||||
</a-card>
|
||||
</j-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<a-select allowClear v-model:value="_value" @change="onChange" placeholder="请选择" style="width: 100%">
|
||||
<a-select-option
|
||||
<j-select allowClear v-model:value="_value" @change="onChange" placeholder="请选择" style="width: 100%">
|
||||
<j-select-option
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
:label="item.name"
|
||||
:filter-option="filterOption"
|
||||
>{{ item.name }}</a-select-option
|
||||
>{{ item.name }}</j-select-option
|
||||
>
|
||||
</a-select>
|
||||
</j-select>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -10,9 +10,9 @@
|
|||
<div style="display: flex; align-items: center">
|
||||
<AIcon type="ArrowLeftOutlined" @click="onBack" />
|
||||
<div style="margin-left: 20px">{{ instanceStore.current.name }}</div>
|
||||
<a-divider type="vertical" />
|
||||
<a-space>
|
||||
<a-badge
|
||||
<j-divider type="vertical" />
|
||||
<j-space>
|
||||
<j-badge
|
||||
:text="instanceStore.current.state?.text"
|
||||
:status="
|
||||
statusMap.get(
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
>
|
||||
断开连接
|
||||
</PermissionButton>
|
||||
<a-tooltip
|
||||
<j-tooltip
|
||||
v-if="
|
||||
instanceStore.current?.accessProvider ===
|
||||
'child-device' &&
|
||||
|
|
@ -68,15 +68,15 @@
|
|||
type="QuestionCircleOutlined"
|
||||
style="font-size: 14px"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</j-tooltip>
|
||||
</j-space>
|
||||
</div>
|
||||
<div style="padding-top: 10px">
|
||||
<a-descriptions size="small" :column="4">
|
||||
<a-descriptions-item label="ID">{{
|
||||
<j-descriptions size="small" :column="4">
|
||||
<j-descriptions-item label="ID">{{
|
||||
instanceStore.current.id
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="所属产品">
|
||||
}}</j-descriptions-item>
|
||||
<j-descriptions-item label="所属产品">
|
||||
<PermissionButton
|
||||
type="link"
|
||||
style="margin-top: -5px; padding: 0"
|
||||
|
|
@ -85,8 +85,8 @@
|
|||
>
|
||||
{{ instanceStore.current.productName }}
|
||||
</PermissionButton>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</j-descriptions-item>
|
||||
</j-descriptions>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -119,7 +119,7 @@ import EdgeMap from './EdgeMap/index.vue';
|
|||
import Parsing from './Parsing/index.vue'
|
||||
import Log from './Log/index.vue'
|
||||
import { _deploy, _disconnect } from '@/api/device/instance';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { message } from 'jetlinks-ui-components';
|
||||
import { getImage } from '@/utils/comm';
|
||||
import { getWebSocket } from '@/utils/websocket';
|
||||
import { useMenuStore } from '@/store/menu';
|
||||
|
|
|
|||
|
|
@ -64,6 +64,6 @@ const handleCancel = () => {
|
|||
}
|
||||
|
||||
const handleSave = () => {
|
||||
emit('close')
|
||||
emit('save')
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<a-modal :maskClosable="false" width="800px" :visible="true" title="当前进度" @ok="handleCancel" @cancel="handleCancel">
|
||||
<j-modal :maskClosable="false" width="800px" :visible="true" title="当前进度" @ok="handleCancel" @cancel="handleCancel">
|
||||
<div>
|
||||
<a-badge v-if="flag" status="processing" text="进行中" />
|
||||
<a-badge v-else status="success" text="已完成" />
|
||||
<j-badge v-if="flag" status="processing" text="进行中" />
|
||||
<j-badge v-else status="success" text="已完成" />
|
||||
</div>
|
||||
<p>总数量：{{count}}</p>
|
||||
<a style="color: red">{{errMessage}}</a>
|
||||
</a-modal>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@
|
|||
import { queryNoPagingPost } from '@/api/device/product';
|
||||
import { isExists, update } from '@/api/device/instance';
|
||||
import { getImage } from '@/utils/comm';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { message } from 'jetlinks-ui-components';
|
||||
|
||||
const emit = defineEmits(['close', 'save']);
|
||||
const props = defineProps({
|
||||
|
|
|
|||
|
|
@ -156,7 +156,10 @@
|
|||
</template>
|
||||
<template #content>
|
||||
<Ellipsis style="width: calc(100% - 100px)">
|
||||
<span style="font-size: 16px; font-weight: 600" @click.stop="handleView(slotProps.id)">
|
||||
<span
|
||||
style="font-size: 16px; font-weight: 600"
|
||||
@click.stop="handleView(slotProps.id)"
|
||||
>
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
|
|
@ -205,6 +208,11 @@
|
|||
:status="statusMap.get(slotProps.state?.value)"
|
||||
/>
|
||||
</template>
|
||||
<template #createTime="slotProps">
|
||||
<span>{{
|
||||
dayjs(slotProps.createTime).format('YYYY-MM-DD HH:mm:ss')
|
||||
}}</span>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space>
|
||||
<template
|
||||
|
|
@ -229,11 +237,16 @@
|
|||
</template>
|
||||
</JProTable>
|
||||
</page-container>
|
||||
<Import v-if="importVisible" @close="importVisible = false" @save="onRefresh" />
|
||||
<Import
|
||||
v-if="importVisible"
|
||||
@close="importVisible = false"
|
||||
@save="onRefresh"
|
||||
/>
|
||||
<Export
|
||||
v-if="exportVisible"
|
||||
@close="exportVisible = false"
|
||||
:data="params"
|
||||
@save="onRefresh"
|
||||
/>
|
||||
<Process
|
||||
v-if="operationVisible"
|
||||
|
|
@ -260,7 +273,7 @@ import {
|
|||
batchDeleteDevice,
|
||||
} from '@/api/device/instance';
|
||||
import { getImage, LocalStore } from '@/utils/comm';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { message } from 'jetlinks-ui-components';
|
||||
import Import from './Import/index.vue';
|
||||
import Export from './Export/index.vue';
|
||||
import Process from './Process/index.vue';
|
||||
|
|
@ -274,9 +287,9 @@ import {
|
|||
} from '@/api/device/product';
|
||||
import { queryTree } from '@/api/device/category';
|
||||
import { useMenuStore } from '@/store/menu';
|
||||
import { ActionsType } from './typings';
|
||||
import type { ActionsType } from './typings';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const router = useRouter();
|
||||
const instanceRef = ref<Record<string, any>>({});
|
||||
const params = ref<Record<string, any>>({});
|
||||
const _selectedRowKeys = ref<string[]>([]);
|
||||
|
|
@ -699,5 +712,5 @@ const handleSearch = (_params: any) => {
|
|||
|
||||
const onRefresh = () => {
|
||||
instanceRef.value?.reload();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,79 @@
|
|||
<!-- 视频图标组件 -->
|
||||
<template>
|
||||
<a @click="handleClick">
|
||||
<AIcon :type="iconType" />
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { recordsItemType } from './typings';
|
||||
import playBackApi from '@/api/media/playback';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
interface Props {
|
||||
type: string;
|
||||
item: recordsItemType;
|
||||
onCloudView: (startTime: number, endTime: number) => void;
|
||||
onDownLoad: () => void;
|
||||
}
|
||||
const props = defineProps<Props>();
|
||||
|
||||
// type 为local时有效，0：未下载； 1：下载中：2：已下载
|
||||
const status = ref(props.item?.isServer ? 2 : 0);
|
||||
// const status = computed({
|
||||
// get: () => (props.item?.isServer ? 2 : 0),
|
||||
// set: (val: number) => {},
|
||||
// });
|
||||
|
||||
const getLocalIcon = (s: number) => {
|
||||
if (s === 0) {
|
||||
return 'CloudDownloadOutlined';
|
||||
} else if (s === 2) {
|
||||
return 'EyeOutlined';
|
||||
} else {
|
||||
return 'LoadingOutlined';
|
||||
}
|
||||
};
|
||||
|
||||
const iconType = computed(() =>
|
||||
props.type === 'local' ? getLocalIcon(status.value) : 'DownloadOutlined',
|
||||
);
|
||||
|
||||
const downLoadCloud = (item: recordsItemType) => {
|
||||
status.value = 1;
|
||||
playBackApi
|
||||
.downloadRecord(item.deviceId, item.channelId, {
|
||||
local: false,
|
||||
downloadSpeed: 4,
|
||||
startTime: item.startTime,
|
||||
endTime: item.endTime,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.status === 200) {
|
||||
message.success(
|
||||
'操作成功。上传云端需要一定时间，请稍后查看云端数据',
|
||||
);
|
||||
}
|
||||
status.value = res.status === 200 ? 2 : 0;
|
||||
})
|
||||
.catch(() => {
|
||||
status.value = 0;
|
||||
});
|
||||
};
|
||||
|
||||
const handleClick = () => {
|
||||
if (props.type === 'local') {
|
||||
if (status.value === 2) {
|
||||
// 已下载，进行跳转
|
||||
props.onCloudView(props.item.startTime, props.item.endTime);
|
||||
} else if (status.value === 0) {
|
||||
// 未下载 进行下载
|
||||
downLoadCloud(props.item);
|
||||
}
|
||||
} else {
|
||||
props.onDownLoad();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
@borderColor: #d9d9d9;
|
||||
|
||||
.playback-warp {
|
||||
display: flex;
|
||||
padding: 24px;
|
||||
background-color: #fff;
|
||||
|
||||
.playback-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
width: 0;
|
||||
|
||||
.playback-media {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.playback-right {
|
||||
width: 300px;
|
||||
margin-left: 24px;
|
||||
|
||||
.playback-calendar {
|
||||
margin-top: 16px;
|
||||
border: 1px solid @borderColor;
|
||||
border-radius: 2px;
|
||||
|
||||
:deep(.ant-picker-calendar-header) {
|
||||
justify-content: space-between;
|
||||
& > div:nth-child(3) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.playback-list {
|
||||
display: flex;
|
||||
height: 300px;
|
||||
margin-top: 16px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid @borderColor;
|
||||
|
||||
&.no-list {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.playback-list-items {
|
||||
width: 100%;
|
||||
|
||||
.ant-list-item {
|
||||
padding-left: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time-line-warp {
|
||||
padding: 10px 0;
|
||||
|
||||
.time-line-clock {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
> div {
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.time-line-content {
|
||||
position: relative;
|
||||
padding-bottom: 20px;
|
||||
|
||||
.time-line-progress {
|
||||
position: relative;
|
||||
height: 16px;
|
||||
overflow: hidden;
|
||||
background-color: #d9d9d9;
|
||||
border-radius: 2px;
|
||||
|
||||
> div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background-color: #52c41a;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.time-line-btn {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: 0;
|
||||
width: 3px;
|
||||
height: 19px;
|
||||
background-color: @primary-color;
|
||||
border-radius: 2px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.time-line {
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: -30px;
|
||||
width: 60px;
|
||||
padding: 2px 0;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
background-color: #d9d9d9;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 12px rgba(#000, 0.15);
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,366 @@
|
|||
<!-- 回放 -->
|
||||
<template>
|
||||
<page-container> 回放 </page-container>
|
||||
<page-container>
|
||||
<div class="playback-warp">
|
||||
<div class="playback-left">
|
||||
<LivePlayer
|
||||
ref="player"
|
||||
:src="url"
|
||||
width="758px"
|
||||
height="462px"
|
||||
/>
|
||||
<TimeLine
|
||||
ref="playTimeNode"
|
||||
:type="type"
|
||||
:data="historyList"
|
||||
:date-time="time"
|
||||
:on-change="handleTimeLineChange"
|
||||
:play-status="playStatus"
|
||||
:play-time="playNowTime + playTime * 1000"
|
||||
:local-to-server="cloudTime"
|
||||
/>
|
||||
</div>
|
||||
<div class="playback-right">
|
||||
<a-spin :spinning="loading">
|
||||
<a-tooltip placement="topLeft">
|
||||
<template #title>
|
||||
<div>云端：存储在服务器中</div>
|
||||
<div>本地：存储在设备本地</div>
|
||||
</template>
|
||||
<div>类型: <AIcon type="QuestionCircleOutlined" /></div>
|
||||
</a-tooltip>
|
||||
<RadioCard
|
||||
layout="horizontal"
|
||||
:options="[
|
||||
{
|
||||
label: '云端',
|
||||
value: 'cloud',
|
||||
logo: getImage('/media/cloud.png'),
|
||||
},
|
||||
{
|
||||
label: '本地',
|
||||
value: 'local',
|
||||
logo: getImage('/local.png'),
|
||||
disabled: deviceType === 'fixed-media',
|
||||
},
|
||||
]"
|
||||
:checkStyle="true"
|
||||
v-model="type"
|
||||
/>
|
||||
<div class="playback-calendar">
|
||||
<a-calendar
|
||||
v-model:value="time"
|
||||
:fullscreen="false"
|
||||
:disabledDate="
|
||||
(currentDate) => currentDate > dayjs(new Date())
|
||||
"
|
||||
@change="handlePanelChange"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="playback-list"
|
||||
:class="{ 'no-list': !historyList.length }"
|
||||
>
|
||||
<a-empty
|
||||
v-if="!historyList.length"
|
||||
description="暂无数据"
|
||||
/>
|
||||
<a-list
|
||||
v-else
|
||||
class="playback-list-items"
|
||||
itemLayout="horizontal"
|
||||
:dataSource="historyList"
|
||||
>
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item>
|
||||
<template #actions>
|
||||
<a-tooltip
|
||||
key="play-btn"
|
||||
:title="
|
||||
(item.startTime ||
|
||||
item.mediaStartTime) ===
|
||||
playNowTime &&
|
||||
playStatus === 1
|
||||
? '暂停'
|
||||
: '播放'
|
||||
"
|
||||
>
|
||||
<a
|
||||
@click="
|
||||
handlePlay(
|
||||
item.startTime ||
|
||||
item.mediaStartTime,
|
||||
)
|
||||
"
|
||||
>
|
||||
<AIcon
|
||||
:type="
|
||||
(item.startTime ||
|
||||
item.mediaStartTime) ===
|
||||
playNowTime &&
|
||||
playStatus === 1
|
||||
? 'PauseCircleOutlined'
|
||||
: 'PlayCircleOutlined'
|
||||
"
|
||||
/>
|
||||
</a>
|
||||
</a-tooltip>
|
||||
<a-tooltip
|
||||
key="download"
|
||||
:title="
|
||||
type !== 'local'
|
||||
? '下载录像文件'
|
||||
: item.isServer
|
||||
? '查看'
|
||||
: '下载到云端'
|
||||
"
|
||||
>
|
||||
<IconNode
|
||||
:type="type"
|
||||
:item="item"
|
||||
:on-cloud-view="cloudView"
|
||||
:on-down-load="
|
||||
() => downloadClick(item)
|
||||
"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
|
||||
<div>
|
||||
{{
|
||||
dayjs(
|
||||
item.startTime ||
|
||||
item.mediaStartTime,
|
||||
).format('HH:mm:ss')
|
||||
}}
|
||||
~
|
||||
{{
|
||||
dayjs(
|
||||
item.endTime ||
|
||||
item.mediaEndTime,
|
||||
).format('HH:mm:ss')
|
||||
}}
|
||||
</div>
|
||||
</a-list-item>
|
||||
</template>
|
||||
<div></div>
|
||||
</a-list>
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
</div>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import playBackApi from '@/api/media/playback';
|
||||
import TimeLine from './timeLine.vue';
|
||||
import IconNode from './iconNode.vue';
|
||||
import type { recordsItemType } from './typings';
|
||||
import LivePlayer from '@/components/Player/index.vue';
|
||||
import { getImage } from '@/utils/comm';
|
||||
import dayjs from 'dayjs';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
const route = useRoute();
|
||||
|
||||
const url = ref('');
|
||||
const type = ref('local');
|
||||
const historyList = ref<recordsItemType[]>([]);
|
||||
const time = ref<Dayjs | undefined>(undefined);
|
||||
const loading = ref(false);
|
||||
const cloudTime = ref<any>();
|
||||
// const location = ref();
|
||||
const player = ref<any>();
|
||||
const playStatus = ref(0); // 播放状态, 0 停止， 1 播放， 2 暂停, 3 播放完成
|
||||
const playTime = ref(0);
|
||||
|
||||
const playNowTime = ref(0); // 当前播放视频标识
|
||||
const playTimeNode = ref<any>(null);
|
||||
const isEnded = ref(false); // 是否结束播放
|
||||
const deviceId = computed(() => route.query.id as string);
|
||||
const channelId = computed(() => route.query.channelId as string);
|
||||
|
||||
const deviceType = ref('');
|
||||
|
||||
const queryLocalRecords = async (date: Dayjs) => {
|
||||
console.log('date: ', date);
|
||||
|
||||
playStatus.value = 0;
|
||||
url.value = '';
|
||||
|
||||
if (deviceId.value && channelId.value && date) {
|
||||
loading.value = true;
|
||||
const params = {
|
||||
startTime: date.format('YYYY-MM-DD 00:00:00'),
|
||||
endTime: date.format('YYYY-MM-DD 23:59:59'),
|
||||
};
|
||||
const localResp = await playBackApi.queryRecordLocal(
|
||||
deviceId.value,
|
||||
channelId.value,
|
||||
params,
|
||||
);
|
||||
if (localResp.status === 200 && localResp.result.length) {
|
||||
const serviceResp = await playBackApi.recordsInServer(
|
||||
deviceId.value,
|
||||
channelId.value,
|
||||
{
|
||||
...params,
|
||||
includeFiles: false,
|
||||
},
|
||||
);
|
||||
loading.value = false;
|
||||
let newList: recordsItemType[] = serviceResp.result;
|
||||
// console.log(newList)
|
||||
|
||||
if (serviceResp.status === 200 && serviceResp.result) {
|
||||
// 判断是否已下载云端视频
|
||||
newList = localResp.result.map((item: recordsItemType) => {
|
||||
return {
|
||||
...item,
|
||||
isServer: serviceResp.result.length
|
||||
? serviceResp.result.some(
|
||||
(serverFile: any) =>
|
||||
item.startTime <=
|
||||
serverFile.streamStartTime &&
|
||||
serverFile.streamEndTime <= item.endTime,
|
||||
)
|
||||
: false,
|
||||
};
|
||||
});
|
||||
|
||||
historyList.value = newList;
|
||||
} else {
|
||||
historyList.value = newList;
|
||||
}
|
||||
} else {
|
||||
loading.value = false;
|
||||
historyList.value = [];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 查询云端视频
|
||||
* @param date
|
||||
*/
|
||||
const queryServiceRecords = async (date: Dayjs) => {
|
||||
playStatus.value = 0;
|
||||
url.value = '';
|
||||
if (deviceId.value && channelId.value && date) {
|
||||
loading.value = true;
|
||||
const params = {
|
||||
startTime: date.format('YYYY-MM-DD 00:00:00'),
|
||||
endTime: date.format('YYYY-MM-DD 23:59:59'),
|
||||
includeFiles: true,
|
||||
};
|
||||
|
||||
const resp = await playBackApi.recordsInServerFiles(
|
||||
deviceId.value,
|
||||
channelId.value,
|
||||
params,
|
||||
);
|
||||
loading.value = false;
|
||||
if (resp.status === 200) {
|
||||
historyList.value = resp.result;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const cloudView = (startTime: number, endTime: number) => {
|
||||
type.value = 'cloud';
|
||||
cloudTime.value = { startTime, endTime };
|
||||
queryServiceRecords(time.value!);
|
||||
};
|
||||
|
||||
const downloadClick = async (item: recordsItemType) => {
|
||||
const downloadUrl = playBackApi.downLoadFile(item.id);
|
||||
const downNode = document.createElement('a');
|
||||
downNode.href = downloadUrl;
|
||||
downNode.download = `${channelId}-${dayjs(item.startTime).format(
|
||||
'YYYY-MM-DD-HH-mm-ss',
|
||||
)}.mp4`;
|
||||
downNode.style.display = 'none';
|
||||
document.body.appendChild(downNode);
|
||||
downNode.click();
|
||||
document.body.removeChild(downNode);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
const _type = route.query.type as string;
|
||||
if (_type) {
|
||||
deviceType.value = _type;
|
||||
const _timeStr = dayjs(new Date());
|
||||
time.value = _timeStr;
|
||||
if (_type === 'fixed-media') {
|
||||
type.value = 'cloud';
|
||||
queryServiceRecords(_timeStr);
|
||||
} else {
|
||||
queryLocalRecords(_timeStr);
|
||||
type.value = 'local';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const handleTimeLineChange = (times: any) => {
|
||||
if (times) {
|
||||
playNowTime.value = Number(times.startTime.valueOf());
|
||||
playTime.value = 0;
|
||||
url.value =
|
||||
type.value === 'local'
|
||||
? playBackApi.playbackLocal(
|
||||
times.deviceId,
|
||||
times.channelId,
|
||||
'mp4',
|
||||
dayjs(times.startTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
dayjs(times.endTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
)
|
||||
: playBackApi.playbackStart(times.deviceId);
|
||||
} else {
|
||||
url.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
() => type.value,
|
||||
(val: string) => {
|
||||
if (val === 'cloud') {
|
||||
queryServiceRecords(time.value!);
|
||||
} else {
|
||||
queryLocalRecords(time.value!);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
const handlePanelChange = (date: any) => {
|
||||
console.log('type: ', typeof date);
|
||||
console.log('date: ', date);
|
||||
time.value = date;
|
||||
if (type.value === 'cloud') {
|
||||
queryServiceRecords(date);
|
||||
} else {
|
||||
queryLocalRecords(date);
|
||||
}
|
||||
};
|
||||
|
||||
// 播放/暂停
|
||||
const handlePlay = (_startTime: any) => {
|
||||
if (playStatus.value === 0 || _startTime !== playNowTime.value) {
|
||||
if (playTimeNode.value) {
|
||||
playTimeNode.value.playByStartTime(_startTime);
|
||||
}
|
||||
} else if (playStatus.value == 1 && _startTime === playNowTime.value) {
|
||||
if (player.value.getVueInstance) {
|
||||
// player.value.getVueInstance().pause();
|
||||
}
|
||||
} else if (playStatus.value == 2 && _startTime === playNowTime.value) {
|
||||
if (player.value.getVueInstance) {
|
||||
// player.value.getVueInstance().play();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import './index.less';
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,264 @@
|
|||
<!-- 播放器时间刻度 -->
|
||||
<template>
|
||||
<div class="time-line-warp">
|
||||
<div class="time-line-clock">
|
||||
<div
|
||||
v-for="item in Array.from(Array(25), (v, k) => k)"
|
||||
:key="item"
|
||||
style="width: 12px"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="time-line-content" ref="LineContent">
|
||||
<div class="time-line-progress">
|
||||
<div
|
||||
v-for="(item, index) in list"
|
||||
:key="`time_${index}`"
|
||||
@click="handleProgress($event, item)"
|
||||
:style="
|
||||
getLineItemStyle(
|
||||
item.startTime || item.mediaStartTime,
|
||||
item.endTime || item.mediaEndTime,
|
||||
)
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
<div id="btn" class="time-line-btn"></div>
|
||||
<div id="time" class="time-line">
|
||||
{{ dayjs(playTime || 0).format('HH:mm:ss') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { message } from 'ant-design-vue';
|
||||
import type { recordsItemType } from './typings';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
export type TimeChangeType = {
|
||||
endTime: Dayjs;
|
||||
startTime: Dayjs;
|
||||
deviceId: string;
|
||||
channelId: string;
|
||||
};
|
||||
|
||||
interface Props {
|
||||
onChange: (times: TimeChangeType | undefined) => void;
|
||||
data: recordsItemType[];
|
||||
dateTime?: Dayjs;
|
||||
type: string;
|
||||
playStatus: number;
|
||||
playTime: number;
|
||||
server?: any;
|
||||
localToServer?: {
|
||||
endTime: number;
|
||||
startTime: number;
|
||||
};
|
||||
getPlayList?: (data: any) => void;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
// 获取选中当天开始时间戳
|
||||
const startT = ref<number>(
|
||||
new Date(
|
||||
dayjs(props.dateTime).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
|
||||
).getTime(),
|
||||
);
|
||||
// 获取选中当天结束时间戳
|
||||
const endT = ref<number>(
|
||||
new Date(
|
||||
dayjs(props.dateTime).endOf('day').format('YYYY-MM-DD HH:mm:ss'),
|
||||
).getTime(),
|
||||
);
|
||||
const list = ref<any[]>([]);
|
||||
const playTime = ref<number>(0);
|
||||
const LineContent = ref<HTMLDivElement>();
|
||||
// const LineContentSize = LineContent.value;
|
||||
const LineContentSize = ref({ width: 100 });
|
||||
|
||||
const setTimeAndPosition = (ob: number) => {
|
||||
const oBtn = document.getElementById('btn');
|
||||
const oTime = document.getElementById('time');
|
||||
|
||||
if (oBtn && oTime && LineContentSize.value.width) {
|
||||
oBtn.style.visibility = 'visible';
|
||||
oBtn.style.left = `${ob * LineContentSize.value.width}px`;
|
||||
oTime.style.visibility = 'visible';
|
||||
oTime.style.left = `${ob * LineContentSize.value.width - 15}px`;
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.dateTime,
|
||||
(val: any) => {
|
||||
startT.value = new Date(
|
||||
dayjs(val).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
|
||||
).getTime();
|
||||
},
|
||||
);
|
||||
|
||||
const onChange = (
|
||||
startTime: number,
|
||||
endTime: number,
|
||||
deviceId: string,
|
||||
channelId: string,
|
||||
) => {
|
||||
playTime.value = startTime;
|
||||
props.onChange({
|
||||
startTime: dayjs(startTime),
|
||||
endTime: dayjs(endTime),
|
||||
deviceId,
|
||||
channelId,
|
||||
});
|
||||
};
|
||||
|
||||
const playByStartTime = (time: any) => {
|
||||
const playNow = props.data.find((item) => {
|
||||
const startTime = item.startTime || item.mediaStartTime;
|
||||
return startTime === time;
|
||||
});
|
||||
|
||||
if (playNow) {
|
||||
const startTime = playNow.startTime || playNow.mediaStartTime;
|
||||
const endTime = playNow.endTime || playNow.mediaEndTime;
|
||||
const deviceId = props.type === 'local' ? playNow.deviceId : playNow.id;
|
||||
onChange(startTime, endTime, deviceId, playNow.channelId);
|
||||
}
|
||||
};
|
||||
playByStartTime(0);
|
||||
|
||||
const onNextPlay = () => {
|
||||
if (playTime.value) {
|
||||
// 查找下一个视频
|
||||
const nowIndex = props.data.findIndex((item) => {
|
||||
const startTime = item.startTime || item.mediaStartTime;
|
||||
return startTime === playTime.value;
|
||||
});
|
||||
// 是否为最后一个
|
||||
if (nowIndex !== props.data.length - 1) {
|
||||
const nextPlay = props.data[nowIndex + 1];
|
||||
const startTime = nextPlay.startTime || nextPlay.mediaStartTime;
|
||||
const endTime = nextPlay.endTime || nextPlay.mediaEndTime;
|
||||
const deviceId =
|
||||
props.type === 'local' ? nextPlay.deviceId : nextPlay.id;
|
||||
onChange(startTime, endTime, deviceId, nextPlay.channelId);
|
||||
}
|
||||
}
|
||||
};
|
||||
onNextPlay();
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
(val: any) => {
|
||||
const { data, localToServer, type } = props;
|
||||
if (data && Array.isArray(data) && data.length > 0) {
|
||||
list.value = [...data];
|
||||
if (type === 'local') {
|
||||
// 播放第一个
|
||||
onChange(
|
||||
data[0].startTime,
|
||||
data[0].endTime,
|
||||
data[0].deviceId,
|
||||
data[0].channelId,
|
||||
);
|
||||
} else if (type === 'cloud') {
|
||||
// 是否从本地跳转到云端播放
|
||||
if (localToServer && Object.keys(localToServer).length > 0) {
|
||||
// 获取跳转播放段
|
||||
const playItem = data.find((item) => {
|
||||
return (
|
||||
item.mediaEndTime <= localToServer.endTime &&
|
||||
item.mediaStartTime >= localToServer.startTime
|
||||
);
|
||||
});
|
||||
if (playItem) {
|
||||
//播放片段
|
||||
onChange(
|
||||
playItem.mediaStartTime,
|
||||
playItem.mediaEndTime,
|
||||
playItem.id,
|
||||
playItem.channelId,
|
||||
);
|
||||
} else {
|
||||
props.onChange(undefined);
|
||||
message.error('没有可播放的视频资源');
|
||||
}
|
||||
} else {
|
||||
onChange(
|
||||
data[0].mediaStartTime,
|
||||
data[0].mediaEndTime,
|
||||
data[0].id,
|
||||
data[0].channelId,
|
||||
);
|
||||
}
|
||||
}
|
||||
} else if (localToServer && localToServer.startTime) {
|
||||
// 本地跳转云端但是无资源
|
||||
props.onChange(undefined);
|
||||
message.error('没有可播放的视频资源');
|
||||
list.value = [];
|
||||
} else {
|
||||
// 啥都没有
|
||||
list.value = [];
|
||||
props.onChange(undefined);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
const getLineItemStyle = (
|
||||
startTime: number,
|
||||
endTime: number,
|
||||
): { left: string; width: string } => {
|
||||
const start = startTime - startT.value > 0 ? startTime - startT.value : 0;
|
||||
const _width = LineContentSize.value.width!;
|
||||
const itemWidth = ((endTime - startTime) / (24 * 3600000)) * _width;
|
||||
return {
|
||||
left: `${(start / (24 * 3600000)) * _width}px`,
|
||||
width: `${itemWidth < 1 ? 1 : itemWidth}px`,
|
||||
};
|
||||
};
|
||||
|
||||
const playTimeChange = () => {
|
||||
if (
|
||||
props.playTime &&
|
||||
props.playTime >= startT.value &&
|
||||
props.playTime <= endT.value &&
|
||||
props.data &&
|
||||
props.data.length
|
||||
) {
|
||||
setTimeAndPosition((props.playTime - startT.value) / 3600000 / 24);
|
||||
}
|
||||
};
|
||||
watch(
|
||||
() => props.playTime,
|
||||
() => {
|
||||
playTimeChange();
|
||||
},
|
||||
);
|
||||
watch(
|
||||
() => startT.value,
|
||||
() => {
|
||||
playTimeChange();
|
||||
},
|
||||
);
|
||||
|
||||
const handleProgress = (event: any, item: any) => {
|
||||
const pos = LineContent.value?.getBoundingClientRect();
|
||||
if (pos && item.endTime) {
|
||||
const dt = event.clientX - pos.x;
|
||||
const start = (dt / pos.width) * 24 * 3600000 + startT.value;
|
||||
const _start = start < item.startTime ? item.startTime : start;
|
||||
onChange(_start, item.endTime, item.deviceId, item.channelId);
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({ playByStartTime });
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import './index.less';
|
||||
</style>
|
||||
|
|
@ -3903,8 +3903,8 @@ jetlinks-store@^0.0.3:
|
|||
|
||||
jetlinks-ui-components@^1.0.4:
|
||||
version "1.0.4"
|
||||
resolved "https://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.4.tgz#31f6879f83d394ba45bfd6e94ce0b20de817d490"
|
||||
integrity sha512-5X26+GsqsduCUSmlaYOAw/MDwKRsZFnifzzRqHcm5qbCi0KrrkID9aKatsMRaeTVEEca1/nzPaPGgXAo6bEpfQ==
|
||||
resolved "https://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.4.tgz#4c7dc568b20a9bda7decbbb6b30f0191cb4340af"
|
||||
integrity sha512-V1lydb150+9N+wKPaZSF+WYF1bPj1bQ8nCge8EP093tqH/wVHEs3mYRlHEEfNf/+SLIcrWuPCISihfMatVIlTQ==
|
||||
dependencies:
|
||||
"@vueuse/core" "^9.12.0"
|
||||
ant-design-vue "^3.2.15"
|
||||
|
|
|
|||
Loading…
Reference in New Issue