Skip to content

seeta-device / deviceManage

Go to a project
Commit 7cbcf27f by 李俊
Options

feat: 新增设备和服务模块

1 parent 927edc02
Expand all
Inline Side-by-side
Showing with 199 additions and 66 deletions
src/axios.js
......@@ -17,6 +17,7 @@ export const createParameter = data => axios(POST, FRONT + PARAMETER + '/create'
export const deleteParameter = data => axios(GET, FRONT + PARAMETER + '/delete', data)
export const editParameter = data => axios(POST, FRONT + PARAMETER + '/change', data)
export const detailParameter = data => axios(GET, FRONT + PARAMETER + '/query', data)
export const getTagByServiceType = data => axios(GET, FRONT + PARAMETER + '/service/query', data)
const TABLE = '/table'
export const getTable = data => axios(GET, FRONT + TABLE + '/query_list', data)
......@@ -41,7 +42,9 @@ export const setServiceParamter = data => axios(POST, FRONT + DEVICE + '/service
export const deleteTag = data => axios(GET, FRONT + DEVICE + '/tag/delete', data)
export const addTag = data => axios(POST, FRONT + DEVICE + '/tag/add', data)
export const postServiceRequest = data => axios(POST, FRONT + DEVICE + '/service/direct', data)
export const postServiceCommand = data => axios(POST, FRONT + DEVICE + '/service/command ', data)
export const postServiceCommand = data => axios(POST, FRONT + DEVICE + '/service/command', data)
export const addTemplate = data => axios(POST, FRONT + DEVICE + '/service/template/dispatch', data)
export const deleteTemplate = data => axios(POST, FRONT + DEVICE + '/service/template/revoke', data)
const SERVICE = '/service'
export const getService = data => axios(POST, FRONT + SERVICE + '/query_list', data)
......
src/components/seeta-ui/seeta-form/validator.js
......@@ -16,6 +16,7 @@ const getByteLen = item => {
}
export default {
getByteLen: getByteLen,
ipV4: /((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.(((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})|\*)){1,3}/,
// 实例名称校验
normName: (rule, value, cb) => {
// 支持中文、英文、日文、数字和特殊字符_-@(),长度限制4~30个字符，中文及日文算2个字符
......
src/components/seeta-ui/seeta-table/index.vue
......@@ -306,8 +306,9 @@ export default class seetaTableIndex extends Vue {
// 计算列表高度
getTableHeight() {
this.$nextTick(() => {
this.tableHeight = this.pagination ? this.refTableBox.getBoundingClientRect().height - 66 : this.refTableBox.getBoundingClientRect().height - 25
// console.log(this.tableHeight)
if (this.refTableBox) {
this.tableHeight = this.pagination ? this.refTableBox.getBoundingClientRect().height - 66 : this.refTableBox.getBoundingClientRect().height - 25
}
})
}
/**
......
src/store/systemStore/index.js
......@@ -6,6 +6,7 @@ const state = () => ({
currentProduct: {},
currentDevice: '',
currentService: {},
currentTagIndex: 0,
})
const mutations = {
......@@ -24,7 +25,12 @@ const mutations = {
},
changeCurrentService(state, item) {
state.currentService = JSON.parse(JSON.stringify(item))
}
},
changeCurrentTagIndex(state, item) {
state.currentTagIndex = item
sessionStorage.setItem('currentTagIndex', item)
},
}
const actions = {
......@@ -36,7 +42,8 @@ const getters = {
routerStatus: state => state.routerStatus,
currentProduct: state => state.currentProduct,
currentDevice: state => state.currentDevice,
currentService: state => state.currentService
currentService: state => state.currentService,
currentTagIndex: state => state.currentTagIndex,
}
export default {
......
src/views/DeviceList/detail.vue
......@@ -17,17 +17,23 @@
:pagination="false"
>
<div slot='codeSlot' slot-scope="row">
<span>{{ simplify(row.deviceid, 3) }}</span>
<el-tooltip class="item" effect="dark" :content="row.deviceid" placement="top">
<span>{{ simplify(row.deviceid, 3) }}</span>
</el-tooltip>
<i class="iconfont icon-fuzhi icon-fuzhi-text" @click="copyText(row.deviceid)"></i>
</div>
<div slot='status' slot-scope="row" class="status">
<span class="circleStatus" :style="{color: getStatusColor(row.state)}">{{ getStatusText(row.state) }}</span>
</div>
<div slot='ipSlot' slot-scope="row" class="ipSlot">
<span >{{ simplify(row.ip, 14) }}</span>
<el-tooltip class="item" effect="dark" :content="row.ip" placement="top">
<span >{{ simplify(row.ip, 4) }}</span>
</el-tooltip>
</div>
<div slot='structureSlot' slot-scope="row">
<span>{{ simplify(row.structure, 6) }}</span>
<el-tooltip class="item" effect="dark" :content="row.structure" placement="top">
<span>{{ simplify(row.structure, 3) }}</span>
</el-tooltip>
</div>
<div slot='registerTimeSlot' slot-scope="row">
<span>{{ (row.register_date) }}</span>
......@@ -37,7 +43,7 @@
<el-tooltip class="item" effect="dark" :content="row.tags.join(',')" placement="top" style="display: inline-block">
<div>
<template v-for="(item, index) in row.tags">
<el-tag class="label label-primary table-label" :key="index" :disable-transitions="false" closable @close="handleClose(row, item)">{{simplify(item, 4)}}</el-tag>
<el-tag class="label label-primary table-label" :key="index" :disable-transitions="false" closable @close="handleClose(row, item)">{{simplify(item, 3)}}</el-tag>
</template>
<span v-if="row.tags.length > 10">共: {{row.tags.length}} 条</span>
<el-input
......@@ -67,7 +73,9 @@
</el-tooltip>
</div>
<div slot='systemSlot' slot-scope="row">
<span>{{ simplify(row.system, 7) }}</span>
<el-tooltip class="item" effect="dark" :content="row.system" placement="top">
<span>{{ simplify(row.system, 3) }}</span>
</el-tooltip>
</div>
<div slot='operate' slot-scope="row">
<span class="operate-text operate-delete" @click="delete(row.id)">{{ '删除 '}}</span>
......@@ -85,22 +93,30 @@
:pagination="false"
>
<div slot='nameSlot' slot-scope="row">
<span>{{ simplify(row.name, 8) }}</span>
<el-tooltip class="item" effect="dark" :content="row.name" placement="top">
<span>{{ simplify(row.name, 8) }}</span>
</el-tooltip>
</div>
<div slot='portSlot' slot-scope="row">
<span>{{ simplify(row.port, 6) }}</span>
<el-tooltip class="item" effect="dark" :content="row.port + ''" placement="top">
<span>{{ simplify(row.port, 6) }}</span>
</el-tooltip>
</div>
<div slot='codeSlot' slot-scope="row">
<span>{{ simplify(row.potuid, 3) }}</span>
<el-tooltip class="item" effect="dark" :content="row.potuid" placement="top">
<span>{{ simplify(row.potuid, 6) }}</span>
</el-tooltip>
<i class="iconfont icon-fuzhi icon-fuzhi-text" @click="copyText(row.potuid)"></i>
</div>
<div slot='descSlot' slot-scope="row">
<span>{{ simplify(row.description, 10) }}</span>
<el-tooltip class="item" effect="dark" :content="row.description" placement="top">
<span>{{ simplify(row.description, 10) }}</span>
</el-tooltip>
</div>
<div slot='operate' slot-scope="row">
<span class="operate-text" @click="seeServiceParams(row.potuid)">{{ '查看参数' }}</span>
<span class="operate-text" @click="sendReq(row.potuid)">{{ '发送请求' }}</span>
<span class="operate-text" @click="sendOrder(row.potuid)">{{ '发送指令' }}</span>
<span class="operate-text" @click="seeServiceParams(row)">{{ '查看参数' }}</span>
<span class="operate-text" @click="sendReq(row)">{{ '发送请求' }}</span>
<span class="operate-text" @click="sendOrder(row)">{{ '发送指令' }}</span>
</div>
</st-table>
</div>
......@@ -159,6 +175,7 @@ export default {
label: '操作',
type: 'slot',
slotName: 'operate',
width: 120
},
],
definitions: [
......@@ -166,6 +183,7 @@ export default {
label: '编号',
type: 'slot',
slotName: 'codeSlot',
width: 100
}, {
label: '状态',
type: 'slot',
......@@ -179,7 +197,8 @@ export default {
default:
return '#999999'
}
}
},
width: 90
}, {
label: '架构',
type: 'slot',
......@@ -195,7 +214,8 @@ export default {
}, {
label: '注册时间',
type: 'slot',
slotName: 'registerTimeSlot'
slotName: 'registerTimeSlot',
width: 180
}, {
label: '标签',
type: 'slot',
......@@ -204,7 +224,8 @@ export default {
}, {
label: '服务',
type: 'slot',
slotName: 'servicesSlot'
slotName: 'servicesSlot',
width: 120
}, {
label: '操作',
type: 'slot',
......@@ -266,11 +287,22 @@ export default {
methods: {
rTimeMin,
copyText,
seeServiceParams(id) {
setDeviceServiceStoreInfo(deviceInfo, serviceInfo, routerTarget, tagIndex) {
this.$store.commit('changeCurrentDevice', deviceInfo)
this.$store.commit('changeCurrentService', serviceInfo)
if (tagIndex !== undefined) {
this.$store.commit('changeCurrentTagIndex', tagIndex)
}
this.$router.push({ name: routerTarget })
},
seeServiceParams(row) {
this.setDeviceServiceStoreInfo(row.deviceId, row, 'device-service', 0)
},
sendReq(id) {
sendReq(row) {
this.setDeviceServiceStoreInfo(row.deviceId, row, 'device-service', 1)
},
sendOrder(id) {
sendOrder(row) {
this.setDeviceServiceStoreInfo(row.deviceId, row, 'device-service', 2)
},
async handleClose(row, tag) {
const res = await deleteTag({ name: tag })
......@@ -323,6 +355,11 @@ export default {
if (res && res.data && res.data.device) {
this.tokenList = [JSON.parse(JSON.stringify(res.data.device))]
this.serviceTokenList = JSON.parse(JSON.stringify(res.data.device.services))
this.serviceTokenList.forEach(item => {
if (this.tokenList && this.tokenList.length) {
item.deviceId = this.tokenList[0].deviceid
}
})
this.total = 1
this.servicTotal = res.data.device.services.length
} else {
......@@ -356,6 +393,8 @@ export default {
</script>
<style lang="sass" scoped>
.service-item
margin-right: 10px
.page-nav
font-family: PingFangSC-Regular
font-size: 14px
......
src/views/DeviceList/deviceService/components/SendOrder.vue
......@@ -15,8 +15,25 @@
:outerLoading="loadingStatus"
:pagination="false"
>
<div slot='nameSlot' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.name" placement="top">
<span>{{ simplify(row.name, 16) }}</span>
</el-tooltip>
</div>
<div slot='potuidSlot' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.potuid" placement="top">
<span>{{ simplify(row.potuid, 8) }}</span>
</el-tooltip>
</div>
<div slot='portSlot' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.port + ''" placement="top">
<span>{{ simplify(row.port, 6) }}</span>
</el-tooltip>
</div>
<div slot='description' slot-scope="row">
<span>{{ simplify(row.description, 16) }}</span>
<el-tooltip class="item" effect="dark" :content="row.description" placement="top">
<span>{{ simplify(row.description, 16) }}</span>
</el-tooltip>
</div>
<div slot='operate'>
<span class="operate-text">{{ '-'}}</span>
......@@ -100,35 +117,19 @@ export default {
name: 'sendOrder',
},
],
// definitions: [
// {
// label: '字段',
// type: 'slot',
// slotName: 'paramsSlot',
// }, {
// label: '类型',
// type: 'slot',
// slotName: 'typeSlot',
// }, {
// label: '值',
// type: 'slot',
// slotName: 'valueSlot'
// }, {
// label: '操作',
// type: 'slot',
// slotName: 'operate',
// },
// ],
definitions: [
{
label: '服务',
render: 'name'
type: 'slot',
slotName: 'nameSlot',
}, {
label: '编号',
render: 'potuid'
type: 'slot',
slotName: 'potuidSlot',
}, {
label: '端口',
render: 'port'
type: 'slot',
slotName: 'portSlot',
}, {
label: '描述',
type: 'slot',
......@@ -136,8 +137,8 @@ export default {
}, {
label: '操作',
type: 'slot',
slotName: 'operate',
},
slotName: 'operate'
}
],
}
},
......@@ -210,6 +211,11 @@ export default {
.content-item-one
width: 609px !important
height: 100px
::v-deep.el-textarea__inner
font-size: 14px
color: #333
font-family: PingFangSC-Regular, PingFang SC
font-weight: 400
.content-item-title
margin: auto 0
width: 108px
......
src/views/DeviceList/deviceService/components/SendRequest.vue
......@@ -15,8 +15,25 @@
:outerLoading="loadingStatus"
:pagination="false"
>
<div slot='nameSlot' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.name" placement="top">
<span>{{ simplify(row.name, 16) }}</span>
</el-tooltip>
</div>
<div slot='potuidSlot' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.potuid" placement="top">
<span>{{ simplify(row.potuid, 8) }}</span>
</el-tooltip>
</div>
<div slot='portSlot' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.port + ''" placement="top">
<span>{{ simplify(row.port, 6) }}</span>
</el-tooltip>
</div>
<div slot='description' slot-scope="row">
<span>{{ simplify(row.description, 16) }}</span>
<el-tooltip class="item" effect="dark" :content="row.description" placement="top">
<span>{{ simplify(row.description, 16) }}</span>
</el-tooltip>
</div>
<div slot='operate'>
<span class="operate-text">{{ '-'}}</span>
......@@ -176,13 +193,16 @@ export default {
definitions: [
{
label: '服务',
render: 'name'
type: 'slot',
slotName: 'nameSlot',
}, {
label: '编号',
render: 'potuid'
type: 'slot',
slotName: 'potuidSlot',
}, {
label: '端口',
render: 'port'
type: 'slot',
slotName: 'portSlot',
}, {
label: '描述',
type: 'slot',
......@@ -205,6 +225,7 @@ export default {
methods: {
rTimeMin,
async send() {
this.buttonLoading = true
const currentService = JSON.parse(sessionStorage.getItem('currentService'))
const headers = this.headTokenList.map(item => {
return {
......@@ -212,9 +233,14 @@ export default {
keyvalue: item.value.value.trim()
}
})
console.log(typeof this.bodyValue, 'type')
const body = JSON.parse(this.bodyValue)
this.buttonLoading = true
let body
try {
body = JSON.parse(this.bodyValue)
} catch (e) {
this.$message.error('请输入JSON格式的Body数据')
this.buttonLoading = false
return null
}
const res = await postServiceRequest({
potuid: currentService.potuid,
method: this.requestType,
......@@ -222,10 +248,10 @@ export default {
headers: headers,
body: body
})
this.buttonLoading = false
if (res && res.data) {
// this.resValue = res.data
this.resValue = JSON.stringify(res.data)
}
this.buttonLoading = false
},
handleClose(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
......@@ -262,7 +288,7 @@ export default {
this.$set(this.headTokenList, index, row)
},
addRow() {
const newRow = { key: { value: 'newone', ifEdit: false }, value: { value: 'newone', ifEdit: false } }
const newRow = { key: { value: '', ifEdit: false }, value: { value: '', ifEdit: false } }
this.headTokenList.push(newRow)
},
async getData() {
......@@ -310,6 +336,11 @@ export default {
.content-item-body
width: 609px !important
height: 100px
::v-deep.el-textarea__inner
font-size: 14px
color: #333
font-family: PingFangSC-Regular, PingFang SC
font-weight: 400
.content-item-title
margin: 0 0
width: 108px
......@@ -338,4 +369,7 @@ export default {
&:hover
background-color: #ecf5ff
color: #409EFF
.pointer
min-height: 28px
min-width: 80px
</style>
src/views/DeviceList/deviceService/deviceServiceIndex.vue
......@@ -18,14 +18,18 @@
:pagination="false"
>
<div slot='codeSlot' slot-scope="row">
<span>{{ simplify(row.deviceid, 3) }}</span>
<el-tooltip class="item" effect="dark" :content="row.deviceid" placement="top">
<span>{{ simplify(row.deviceid, 3) }}</span>
</el-tooltip>
<i class="iconfont icon-fuzhi icon-fuzhi-text" @click="copyText(row.deviceid)"></i>
</div>
<div slot='status' slot-scope="row" class="status">
<span class="circleStatus" :style="{color: getStatusColor(row.state)}">{{ getStatusText(row.state) }}</span>
</div>
<div slot='structureSlot' slot-scope="row">
<span>{{ simplify(row.structure, 6) }}</span>
<el-tooltip class="item" effect="dark" :content="row.structure" placement="top">
<span>{{ simplify(row.structure, 6) }}</span>
</el-tooltip>
</div>
<div slot='registerTimeSlot' slot-scope="row">
<span>{{ (row.register_date) }}</span>
......@@ -35,7 +39,7 @@
<!-- 必须要套一层 -->
<div>
<template v-for="(item, index) in row.tags">
<el-tag v-if="[0, 1].indexOf(index) !== -1" :key="index" class="label label-primary table-label">{{ simplify(item, 7) }}</el-tag>
<el-tag v-if="[0, 1].indexOf(index) !== -1" :key="index" class="label label-primary table-label">{{ simplify(item, 3) }}</el-tag>
</template>
<span v-if="(row.tags && row.tags.length) > 10">共: {{(row.tags && row.tags.length) ? row.tags.length : 0}} 条</span>
</div>
......@@ -53,7 +57,9 @@
</el-tooltip>
</div>
<div slot='systemSlot' slot-scope="row">
<span>{{ simplify(row.system, 7) }}</span>
<el-tooltip class="item" effect="dark" :content="row.system" placement="top">
<span>{{ simplify(row.system, 6) }}</span>
</el-tooltip>
</div>
<div slot='operate' slot-scope="row">
<span class="operate-text" @click="detail(row.deviceid)">{{'详情'}}</span>
......@@ -62,7 +68,7 @@
</div>
<div class="page-content">
<div class="table-list">
<st-tabs :tabs="tabs" v-model="activeTab">
<st-tabs :tabs="tabs" v-model="activeTab" @tab-click="changeTab">
<template v-slot:[activeTab]>
<components :is="activeTab" ref="dataTable"></components>
</template>
......@@ -181,15 +187,18 @@ export default {
}, {
label: '注册时间',
type: 'slot',
slotName: 'registerTimeSlot'
slotName: 'registerTimeSlot',
width: 145
}, {
label: '标签',
type: 'slot',
slotName: 'tagsSlot'
slotName: 'tagsSlot',
width: 95
}, {
label: '服务',
type: 'slot',
slotName: 'servicesSlot'
slotName: 'servicesSlot',
width: 95
}, {
label: '操作',
type: 'slot',
......@@ -201,6 +210,24 @@ export default {
},
methods: {
rTimeMin,
copyText,
changeTab() {
let tagIndex = 0
if (this.activeTab) {
switch (this.activeTab) {
case 'getParams':
tagIndex = 0
break
case 'sendRequest':
tagIndex = 1
break
case 'sendOrder':
tagIndex = 2
break
}
}
this.$store.commit('changeCurrentTagIndex', tagIndex)
},
async getServiceParams() {
const res = await getServiceParams(this.serviceId)
},
......@@ -224,6 +251,21 @@ export default {
if (this.$store.getters.currentDevice !== '') {
sessionStorage.setItem('currentDevice', this.$store.getters.currentDevice)
}
if (sessionStorage.getItem('currentTagIndex')) {
this.$store.commit('changeCurrentTagIndex', +sessionStorage.getItem('currentTagIndex'))
}
this.currentTagIndex = +sessionStorage.getItem('currentTagIndex')
switch (this.currentTagIndex) {
case 0:
this.activeTab = 'getParams'
break
case 1:
this.activeTab = 'sendRequest'
break
case 2:
this.activeTab = 'sendOrder'
break
}
this.currentDeviceId = sessionStorage.getItem('currentDevice')
this.getData()
},
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!