forked from JointCloud/JCC-RIP
device list add
This commit is contained in:
ann
parent
0b84a0ddc6
commit
e4d2f30e22
|
|
@ -0,0 +1,19 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 获取数据
|
||||
const edgePreUrl = '/jcc-schedule/api/v1/edgex'
|
||||
export function getEdgeDataByIpPath(params) {
|
||||
return request({
|
||||
url: edgePreUrl + '/getData',
|
||||
method: 'get',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
|
||||
export function getEdgeServiceByIp(params) {
|
||||
return request({
|
||||
url: edgePreUrl + '/registryCenter',
|
||||
method: 'get',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-alert
|
||||
title="一个事件表示一个或多个传感器读值的集合，一些传感器设备一次一个读值，而有的可能一次提供多个读值，但是一个事件至少应该有一个读值，在GUI上操作数据中心是不合理的行为，数据中心的API只能是内部或者外部服务通信使用，因此这里仅仅是让用户预览数据流"
|
||||
type="info"
|
||||
show-icon
|
||||
/>
|
||||
<el-card shadow="never">
|
||||
<el-tabs v-model="eventTab" @tab-click="tabSwitch">
|
||||
<el-tab-pane label="事件" name="1" />
|
||||
<el-tab-pane label="读值" name="2" />
|
||||
</el-tabs>
|
||||
<p>{{ eventTab === '1' ? '事件' : '读值' }}数据流</p>
|
||||
<el-button type="success" icon="el-icon-video-play" plain :disabled="startBtnDisabled" @click="start">开始</el-button>
|
||||
<el-button type="warning" icon="el-icon-video-pause" plain :disabled="!startBtnDisabled" @click="pause">暂停</el-button>
|
||||
<el-card class="box-card" shadow="never">
|
||||
<div class="event-flow">
|
||||
<div v-for="(item, index) in eventFlow" :key="index" class="text item">
|
||||
<p class="event-item">{{ JSON.stringify(item) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getEdgeDataByIpPath } from '@/api/edge/edge'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
eventTab: '1',
|
||||
startBtnDisabled: false,
|
||||
eventFlow: [],
|
||||
eventsLoop: undefined
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.eventsLoop)
|
||||
this.eventsLoop = null
|
||||
},
|
||||
methods: {
|
||||
tabSwitch() {
|
||||
this.pause()
|
||||
this.eventFlow = []
|
||||
this.startBtnDisabled = false
|
||||
},
|
||||
start() {
|
||||
this.startBtnDisabled = true
|
||||
this.getEventData()
|
||||
this.eventsLoop = setInterval(this.getEventData, 3000)
|
||||
},
|
||||
getEventData() {
|
||||
getEdgeDataByIpPath({ address: this.$route.query.ip, path: `core-data/api/v2/${this.eventTab === '1' ? 'event' : 'reading'}/all?offset=0&limit=5` }).then(e => {
|
||||
this.eventFlow = this.eventFlow.concat(this.eventTab === '1' ? e.data.events || [] : e.data.readings || [])
|
||||
}).catch(() => this.pause())
|
||||
},
|
||||
pause() {
|
||||
this.startBtnDisabled = false
|
||||
clearInterval(this.eventsLoop)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-card {
|
||||
border: 1px solid #eeeeee;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
overflow-y:scroll;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
.event-item{
|
||||
margin:0;
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #212529;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tabs v-model="activeName" shadow="never">
|
||||
<el-tab-pane label="设备服务" name="1">
|
||||
<List
|
||||
ref="multipleTable"
|
||||
class="multipleTable"
|
||||
:columns="columns"
|
||||
:table-list-data="blockList"
|
||||
tooltip-effect="dark"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="设备" name="2">
|
||||
<!-- <List
|
||||
ref="multipleTable"
|
||||
class="multipleTable"
|
||||
:columns="columns"
|
||||
:table-list-data="blockList"
|
||||
tooltip-effect="dark"
|
||||
/> -->
|
||||
</el-tab-pane>
|
||||
<!-- <el-tab-pane label="角色管理" name="3">角色管理</el-tab-pane>
|
||||
<el-tab-pane label="定时任务补偿" name="4">定时任务补偿</el-tab-pane> -->
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import List from '@/components/list'
|
||||
import { getEdgeDataByIpPath } from '@/api/edge/edge'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
List
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: '1',
|
||||
blockList: [],
|
||||
columns: [
|
||||
{ prop: 'name', label: '名字' },
|
||||
{ prop: 'description', label: '描述' },
|
||||
{ prop: 'baseAddress', label: '端口', formatter: (row) => {
|
||||
return <div>
|
||||
{row.baseAddress.split(':')[2]}
|
||||
</div>
|
||||
} },
|
||||
{ prop: 'adminState', label: '管理状态' },
|
||||
{ prop: '', label: '设置', formatter: (row) => {
|
||||
return <div>
|
||||
<el-button onClick={() => this.viewCredential(row)} type='text' icon='el-icon-s-setting' size='small'>查看</el-button>
|
||||
</div>
|
||||
} }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getServiceList()
|
||||
},
|
||||
methods: {
|
||||
getServiceList() {
|
||||
getEdgeDataByIpPath({ address: this.$route.query.ip, path: `core-metadata/api/v2/deviceservice/all?offset=0&limit=-1` }).then(e => {
|
||||
this.blockList = e.data.services || []
|
||||
})
|
||||
},
|
||||
tabSwitch() {},
|
||||
start() {
|
||||
this.startBtnDisabled = true
|
||||
this.getEventData()
|
||||
this.eventsLoop = setInterval(this.getEventData, 3000)
|
||||
},
|
||||
getEventData() {
|
||||
// getEventFlow(this.$route.query.ip).then(e => {
|
||||
// console.log('hello')
|
||||
// })
|
||||
},
|
||||
pause() {
|
||||
this.startBtnDisabled = false
|
||||
clearInterval(this.eventsLoop)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-card {
|
||||
border: 1px solid #eeeeee;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
.event-item{
|
||||
margin:0;
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #212529;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<div>
|
||||
<List
|
||||
ref="multipleTable"
|
||||
class="multipleTable"
|
||||
:columns="columns"
|
||||
:table-list-data="blockList"
|
||||
tooltip-effect="dark"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import List from '@/components/list'
|
||||
import { getEdgeServiceByIp } from '@/api/edge/edge'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
List
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
blockList: [],
|
||||
columns: [
|
||||
{ prop: 'ServiceId', label: '名字' },
|
||||
{ prop: 'statusCode', label: '状态', formatter: (row) => {
|
||||
return <div>
|
||||
{row.statusCode === '200' ? '运行中' : '异常'}
|
||||
</div>
|
||||
} },
|
||||
{ prop: 'name', label: '配置', formatter: (row) => {
|
||||
return <div>
|
||||
<el-button onClick={() => this.viewCredential(row)} type='text' icon='el-icon-s-tools' size='small'>配置</el-button>
|
||||
</div>
|
||||
} },
|
||||
{ prop: 'more', label: '操作', formatter: (row) => {
|
||||
return <div>
|
||||
<el-button onClick={() => this.viewCredential(row)} type='text' size='small'>启动</el-button>
|
||||
<el-button onClick={() => this.viewCredential(row)} type='text' size='small'>重启</el-button>
|
||||
<el-button onClick={() => this.viewCredential(row)} type='text' size='small'>停止</el-button>
|
||||
</div>
|
||||
} }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getServiceList()
|
||||
},
|
||||
methods: {
|
||||
getServiceList() {
|
||||
getEdgeServiceByIp({ address: this.$route.query.ip }).then(e => {
|
||||
this.blockList = e.data
|
||||
// getEdgeDataByIpPath({ address: this.$route.query.ip, path: `sys-mgmt-agent/api/v2/system/health?services=${e.data.map(e => { return e.ServiceId }).join(',')}` }).then(e => {
|
||||
// })
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -6,81 +6,42 @@
|
|||
<!-- <a class="back" @click.prevent=""> <i class="el-icon-back" /> 返回 </a> -->
|
||||
<el-tabs v-model="activeName" type="card">
|
||||
<el-tab-pane label="数据中心" name="1">
|
||||
<el-alert
|
||||
title="一个事件表示一个或多个传感器读值的集合，一些传感器设备一次一个读值，而有的可能一次提供多个读值，但是一个事件至少应该有一个读值，在GUI上操作数据中心是不合理的行为，数据中心的API只能是内部或者外部服务通信使用，因此这里仅仅是让用户预览数据流"
|
||||
type="info"
|
||||
show-icon
|
||||
/>
|
||||
<el-card shadow="never">
|
||||
<el-tabs v-model="eventTab" @tab-click="tabSwitch">
|
||||
<el-tab-pane label="事件" name="1" />
|
||||
<el-tab-pane label="读值" name="2" />
|
||||
</el-tabs>
|
||||
<p>{{ eventTab === '1' ? '事件' : '读值' }}数据流</p>
|
||||
<el-button type="success" icon="el-icon-video-play" plain :disabled="startBtnDisabled" @click="start">开始</el-button>
|
||||
<el-button type="warning" icon="el-icon-video-pause" plain :disabled="!startBtnDisabled" @click="pause">暂停</el-button>
|
||||
<el-card class="box-card" shadow="never">
|
||||
<div v-for="(item, index) in eventFlow" :key="index" class="text item">
|
||||
<p class="event-item">{{ JSON.stringify(item) }}</p>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-card>
|
||||
<data-center v-if="activeName === '1'" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="设备管理" name="2">
|
||||
<device-service-list v-if="activeName === '2'" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="系统服务" name="3">
|
||||
<service-list v-if="activeName === '3'" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="设备管理" name="2">配置管理</el-tab-pane>
|
||||
<!-- <el-tab-pane label="角色管理" name="3">角色管理</el-tab-pane>
|
||||
<el-tab-pane label="定时任务补偿" name="4">定时任务补偿</el-tab-pane> -->
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DataCenter from '@/components/Edge/dataCenter.vue'
|
||||
import DeviceServiceList from '@/components/Edge/deviceServiceList.vue'
|
||||
import ServiceList from '@/components/Edge/serviceList.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DataCenter,
|
||||
DeviceServiceList,
|
||||
ServiceList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: '1',
|
||||
eventTab: '1',
|
||||
startBtnDisabled: false,
|
||||
eventFlow: [],
|
||||
eventsLoop: undefined
|
||||
activeName: '1'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
tabSwitch() {},
|
||||
start() {
|
||||
this.startBtnDisabled = true
|
||||
this.getEventData()
|
||||
this.eventsLoop = setInterval(this.getEventData, 3000)
|
||||
},
|
||||
getEventData() {
|
||||
console.log('sss')
|
||||
},
|
||||
pause() {
|
||||
this.startBtnDisabled = false
|
||||
clearInterval(this.eventsLoop)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-card {
|
||||
border: 1px solid #eeeeee;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
.event-item{
|
||||
margin:0;
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #212529;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -167,7 +167,8 @@ export default {
|
|||
return <div><div>{(Math.round(row?.node_pod_running_count / row.node_pod_quota * 100)) + '%'}</div><div class='row-tip'>{row?.node_pod_running_count + '/' + row?.node_pod_quota}</div></div>
|
||||
}
|
||||
return ''
|
||||
} }
|
||||
} },
|
||||
{ prop: 'name', label: '数据设备详情', formatter: row => <div><a onClick={() => this.viewEdgeDetail(row.status.addresses[0]['address'])}> 详情 </a></div> }
|
||||
],
|
||||
listLeft: [],
|
||||
chooseRow: {},
|
||||
|
|
@ -207,8 +208,8 @@ export default {
|
|||
viewOnlineVideo(row) {
|
||||
this.$router.push({ name: 'EdgeDeviceOnline', params: { ...this.$route.params }})
|
||||
},
|
||||
viewEdgeDetail(row) {
|
||||
this.$router.push({ name: 'EdgeDetail', query: { ip: row.ip }})
|
||||
viewEdgeDetail(ip) {
|
||||
this.$router.push({ name: 'EdgeDetail', query: { ip: ip }})
|
||||
},
|
||||
viewDetail(row) {
|
||||
this.$router.push({ name: 'EdgeNodeManagementDetail', params: { ...this.$route.params, name: row.metadata.name }})
|
||||
|
|
|
|||
|
|
@ -60,8 +60,8 @@ module.exports = {
|
|||
},
|
||||
'^/jcc-': {
|
||||
ws: false,
|
||||
// target: 'https://10.101.15.6/apis', /* 测试环境 */
|
||||
target: 'https://jointcloud.net/apis', /* 演示环境 */
|
||||
target: 'https://10.101.15.6/apis', /* 测试环境 */
|
||||
// target: 'https://jointcloud.net/apis', /* 演示环境 */
|
||||
changeOrigin: true,
|
||||
secure: false
|
||||
},
|
||||
|
|
@ -76,12 +76,12 @@ module.exports = {
|
|||
target: 'https://10.101.15.6/apis',
|
||||
// target: 'https://jointcloud.net/apis', /* 演示环境 */
|
||||
changeOrigin: true
|
||||
},
|
||||
'^/edgex': {
|
||||
ws: false,
|
||||
// target: 'https://10.101.15.6/' /* 测试环境 */
|
||||
target: 'https://jointcloud.net/prod-api/' /* 演示环境 */
|
||||
}
|
||||
// '^/edgex': {
|
||||
// ws: false,
|
||||
// target: 'https://10.101.15.6/apis' /* 测试环境 */
|
||||
// // target: 'https://jointcloud.net/prod-api/' /* 演示环境 */
|
||||
// }
|
||||
}
|
||||
// before: require('./mock/mock-server.js')
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue