Skip to content

seeta-device / deviceManage

Go to a project
Commit 7cbcf27f by 李俊
Options

feat: 新增设备和服务模块

1 parent 927edc02
Inline Side-by-side
Showing with 815 additions and 169 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(() => {
if (this.refTableBox) {
this.tableHeight = this.pagination ? this.refTableBox.getBoundingClientRect().height - 66 : this.refTableBox.getBoundingClientRect().height - 25
// console.log(this.tableHeight)
}
})
}
/**
......
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">
<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">
<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">
<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">
<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/GetParams.vue
......@@ -27,7 +27,7 @@
</div>
<div class="list-item">
<span class="list-item-title param-template-text">{{'参数模板：'}}</span>
<div class="list-item-content">
<div class="list-item-content select-tag">
<div class="tags">
<vuedraggable
class="wrapper"
......@@ -36,7 +36,7 @@
>
<transition-group>
<template v-for="(item) in dynamicTags" class="item">
<el-tag el-tag closable :key="item" >{{item}}</el-tag>
<el-tag el-tag closable :key="item" @close="handleClose(item)">{{item}}</el-tag>
</template>
</transition-group>
</vuedraggable>
......@@ -57,18 +57,33 @@
@blur="handleInputConfirm"
>
</el-input> -->
<div class="tag-select">
<el-cascader
v-model="inputValue"
v-if="inputVisible"
:show-all-levels="false"
:options="options"
:props="{ multiple: true, checkStrictly: true }"
clearable>
clearable
v-if="inputVisible"
v-model="tagItem"
:props="{ checkStrictly: true, multiple: true }"
@visible-change="changeCascaderStatus"
>
</el-cascader>
<!-- <st-select
:options="options"
size="small"
150px"
clearable
v-if="inputVisible"
v-model="tagItem"
@change="addTag"
>
</st-select> -->
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加标签</el-button>
</div>
</div>
</div>
</div>
</div>
<div class="content-table">
<st-table
ref="vTable"
......@@ -82,43 +97,76 @@
:pagination="false"
>
<div slot='fieldSlot' slot-scope="scope">
<template>
<div v-if="!(scope.field && scope.field.ifEdit)" @click="changeStatus(scope, scope.index, 'field', true)" :class="{'pointer': scope.configurable !== 'noedit'}">{{scope.field ? scope.field.value : ''}}</div>
<st-input ref="myInput" @change="updateScope(scope, scope.index)" @blur="changeStatus(scope, scope.index, 'field', false)" @keyup.enter.native="changeStatus(scope, scope.index, 'field', false)" v-model="currentInput" v-else class="field-input"></st-input>
<template v-if="!scope.deleted">
<div v-if="!(scope.field && scope.field.ifEdit)" @click="changeStatus(scope, scope.index, 'field', true, 'text', scope.type.editEnable)" :class="{'pointer': scope.configurable !== 'noEdit'}">{{scope.field ? scope.field.value : ''}}</div>
<st-input ref="myInput" @change="v => { updateScope(scope, scope.index, v, 'field') }"
@blur="changeStatus(scope, scope.index, 'field', false, 'text', scope.type.editEnable)" @keyup.enter.native="changeStatus(scope, scope.index, 'field', false, 'text', scope.type.editEnable)" v-model="currentInput" v-else class="field-input"></st-input>
</template>
</div>
<div slot='typeSlot' slot-scope="scope">
<template>
<div v-if="!(scope.type && scope.type.ifEdit)" @click="changeStatus(scope, scope.index, 'type', true)" :class="{'pointer': scope.configurable !== 'noedit'}">{{scope.type ? scope.type.value : ''}}</div>
<st-input ref="myInput" @change="updateScope(scope, scope.index)" @blur="changeStatus(scope, scope.index, 'type', false)" @keyup.enter.native="changeStatus(scope, scope.index, 'type', false)" v-model="currentInput" v-else class="field-input"></st-input>
<template v-if="!scope.deleted">
<div v-if="!(scope.type && scope.type.ifEdit)" @click="changeStatus(scope, scope.index, 'type', true, 'select', scope.type.editEnable)" :class="{'pointer': scope.type.editEnable}">{{scope.type ? scope.type.value : ''}}</div>
<st-select
:options="tagOptions"
size="small"
style="heigth: 50px;width: 200px"
v-model="scope.type.value"
v-else
@visible-change="status => { changeTypeStatus(scope.type, status) }"
@change="v => { changeTypeValue(v, scope.index) }"
>
</st-select>
</template>
</div>
<div slot='valueSlot' slot-scope="row">
<template v-if="row.value && !row.value.ifEdit && row.value.valueType === 'text'">
<span @click="changeStatus(row, row.index, 'value', true)" :class="{'pointer': row.configurable !== 'noedit'}">{{row.value.value}}</span>
<template v-if="!row.deleted">
<template v-if="row.value && row.value.valueType === 'text'">
<div v-if="!row.value.ifEdit" @click="changeStatus(row, row.index, 'value', true, 'text', row.value.editEnable)" class='pointer'>{{row.value.value}}</div>
<st-input v-else ref="myInput" @change="v => { updateScope(row, row.index, v, 'value') }" @blur="changeStatus(row, row.index, 'value', false, 'text', row.value.editEnable)"
@keyup.enter.native="changeStatus(row, row.index, 'value', false, 'text', row.value.editEnable)" v-model="currentInput" class="field-input"></st-input>
</template>
<template v-else-if="row.value && !row.value.ifEdit && row.value.valueType === 'a'">
<a href="javascript:;" class="link-text" @click="linkToTable">{{row.value.value}}</a>
<template v-else-if="row.value && row.value.valueType === 'a'">
<a href="javascript:;" class="link-text" @click="linkToTable(row.value.value)" v-if="row.value.operate === 'text'">{{row.value.value}}</a>
<st-select
:options="tableOptions"
size="small"
style="heigth: 32px;width: 200px"
v-model="row.value.value"
v-else
@change="v => { updateScope(row, row.index, v, 'value') }"
@visible-change="status => { changeTableSelect(row.value, status) }"
>
</st-select>
<i class="el-icon-edit link-text i-margin-left" @click="changeToTable(row.value)" v-if="row.value.operate === 'text'"></i>
</template>
<template v-else-if="row.value && !row.value.ifEdit && row.value.valueType === 'img'">
<span class="preview-text">{{getBlobSize(row.value.value)}}</span>
<span v-if='!ifBlobPreview(row.value.value)'>{{'(不可预览)'}}</span>
<template v-else-if="row.value && row.value.valueType === 'img'">
<p class="preview-text" v-if="row.value.value">
<span @click="choiceImg(row)" type="primary" style="cursor: pointer">{{getBlobSize(row.value.value)}}</span>
<input type="file" :ref="'selectFile' + row.index" @change="event => handleUpload(event, row.value, row, row.index)" style="display:none">
</p>
<p v-else>
<span @click="choiceImgNone(row)" type="primary" class="select-file-none">{{'Select File'}}</span>
<input type="file" :ref="'selectFile' + row.index + 'none'" @change="event => handleUpload(event, row.value, row, row.index)" style="display:none">
</p>
<span v-if='!ifBlobPreview(row.value.value) && row.value.value'>{{'(不可预览)'}}</span>
<el-image
class="preview-img"
v-else
v-if='ifBlobPreview(row.value.value)'
style="width: 42px; height: 28px"
:src="row.value.value"
:preview-src-list="getBlobimgUrlList(row.value.value)">
</el-image>
</template>
<template v-else>
<st-input ref="myInput" @change="updateScope(row, row.index)" @blur="changeStatus(row, row.index, 'value', false)" @keyup.enter.native="changeStatus(row, row.index, 'value', false)" v-model="currentInput" class="field-input"></st-input>
</template>
</div>
<div slot='operate' slot-scope="row">
<span v-if="row.configurable === 'edit' && row.editing" class="operate-text" @click="backRow(row.index)">{{ '撤销覆盖' }}</span>
<span v-else-if="row.configurable === 'add'" class="operate-text operate-text-delete" @click="deketeRow(row.index)">{{ '删除' }}</span>
<span v-else class="operate-text operate-text-none">{{'-'}}</span>
<template v-if="!row.needBack && !row.needDelete">
<span>{{ '-' }}</span>
</template>
<template v-else>
<span v-if="row.needBack" class="operate-text span-margin-right" @click="backRow(row.index)">{{ '撤回' }}</span>
<span v-if="row.needDelete" class="operate-text operate-text-delete" @click="deleteRow(row.index)">{{ '删除' }}</span>
</template>
</div>
</st-table>
<div class="add" @click="addRow">
......@@ -140,7 +188,8 @@
<script>
import { rTimeMin, copyText } from '@/utils/system.js'
import Dialog from '@/helpers/dialog'
import { getServiceParamter, setServiceParamter } from '@/axios'
import { getServiceParamter, getServiceDevice, setServiceParamter, getTagByServiceType, deleteTemplate, addTemplate, getTable } from '@/axios'
import { fileToBase64 } from '@/utils/typeConversion'
import vuedraggable from 'vuedraggable'
export default {
components: {
......@@ -153,6 +202,15 @@ export default {
return '24字节'
}
},
getParameterObjType() {
return item => {
if (JSON.stringify(item) === 'null') {
return 'null'
} else {
return typeof item
}
}
},
// 是否可预览
ifBlobPreview() {
return item => {
......@@ -214,6 +272,8 @@ export default {
},
data() {
return {
tagItem: '',
tagOptions: [{ label: 'blob', value: 'blob' }, { label: 'number', value: 'number' }, { label: 'string', value: 'string' }, { label: 'table', value: 'table' }],
dynamicTags: [],
inputVisible: false,
inputValue: [],
......@@ -224,6 +284,7 @@ export default {
// ],
tokenList: [],
tokenListCopy: [],
deleteTokenListObj: {},
total: 0,
loadingStatus: false,
currentInput: '',
......@@ -287,46 +348,154 @@ export default {
slotName: 'operate',
},
],
currentService: {}
currentService: {},
// 存储撤回信息
backData: {},
// 存储表格信息
tableInfoList: [],
}
},
methods: {
rTimeMin,
endSort(evt) {
console.log('evt end index', evt.newIndex)
console.log(this.dynamicTags, 'dynamicTags')
changeToTable(row) {
row.operate = 'select'
this.$forceUpdate()
},
handleClose(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
choiceImg(row) {
this.$refs['selectFile' + row.index].dispatchEvent(new MouseEvent('click'))
},
choiceImgNone(row) {
this.$refs['selectFile' + row.index + 'none'].dispatchEvent(new MouseEvent('click'))
},
async getTagByService() {
const targetObj = {}
const res = await getTagByServiceType({ service_name: this.currentService.name })
if (res && res.data.datas.length) {
res.data.datas.forEach(item => {
if (item.base === '') {
if (!targetObj[item.name]) {
targetObj[item.name] = {}
targetObj[item.name].value = []
}
targetObj[item.name].disabled = false
} else {
if (!targetObj[item.base]) {
targetObj[item.base] = {}
targetObj[item.base].disabled = true
targetObj[item.base].value = []
}
targetObj[item.base].value.push(item.name)
}
})
for (const i in targetObj) {
if (this.dynamicTags.indexOf(i) !== -1) {
targetObj[i].disabled = true
}
this.dynamicTags.forEach(n => {
const index = targetObj[i].value.indexOf(n)
if (index !== -1) {
targetObj[i].value.splice(index, 1)
}
})
}
const result = []
for (const j in targetObj) {
const item = {}
item.value = j
item.label = j
item.disabled = targetObj[j].disabled
if (targetObj[j].value.length) {
item.children = targetObj[j].value.map(item => {
return {
value: item,
label: item
}
})
}
result.push(item)
}
this.options = JSON.parse(JSON.stringify(result))
} else {
this.options = []
}
},
async handleUpload(event, row, scope, index) {
row.value = await fileToBase64(event.target.files[0])
// scope.editing = true
this.$set(this.tokenList, index, scope)
this.$set(this.tokenList[index], 'editing', true)
},
async endSort(evt) {
const res = await addTemplate({
templates: JSON.parse(JSON.stringify(this.dynamicTags)),
pots: [this.currentService.potuid]
})
this.getData()
},
async handleClose(tag) {
// this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
const res = await deleteTemplate({
templates: [tag],
pots: [this.currentService.potuid]
})
this.getData()
},
// 切换表格项内容
changeStatus(row, index, item, status) {
if (row.configurable === 'noedit') {
changeStatus(row, index, item, status, type, enable) {
// 不允许编辑的条目
if (!enable) {
return null
}
if (type === 'text') {
if (status) {
this.$set(this, 'currentInput', row[item].value)
} else {
row[item].value = this.currentInput
}
}
row[item].ifEdit = status
this.$set(this.tokenList, index, row)
this.$nextTick(() => {
this.$refs.myInput && this.$refs.myInput.$children[0].focus()
})
},
linkToTable() {
// this.$router.push({name: ''})
linkToTable(name) {
const currentTable = this.tableInfoList.filter(item => {
if (item.name === name) {
return true
}
})
this.$router.push({ path: '/data/edit', query: { name: name, columns: (currentTable[0].columns + '') } })
},
async changeCascaderStatus(status) {
if (!status) {
const target = this.tagItem.map(item => {
return item[item.length - 1]
})
this.dynamicTags = this.dynamicTags.concat(target)
const res = await addTemplate({
templates: JSON.parse(JSON.stringify(this.dynamicTags)),
pots: [this.currentService.potuid]
})
this.getData()
this.tagItem = ''
this.inputVisible = false
}
},
updateScope(row, index) {
updateScope(row, index, value, property) {
const rowObject = { field: row.field.value, type: row.type.value, value: row.value.value }
rowObject[property] = value
const copyObject = { field: this.tokenListCopy[index].field.value, type: this.tokenListCopy[index].type.value, value: this.tokenListCopy[index].value.value + '' }
if (JSON.stringify(rowObject) === JSON.stringify(copyObject)) {
row.editing = false
} else {
row.editing = true
}
this.$set(this.tokenList, index, row)
},
showInput() {
this.inputVisible = true
this.$nextTick(() => {
this.$refs.saveTagInput.$refs.input.focus()
})
this.getTagByService()
},
handleInputConfirm() {
const inputValue = this.inputValue
......@@ -338,78 +507,309 @@ export default {
},
backRow(index) {
const row = this.tokenListCopy[index]
switch (row.type.value) {
case 'blob':
row.value.value = this.backParameter.binary[row.field.value]
break
case 'table':
row.value.value = this.backParameter.table[row.field.value]
break
default:
row.value.value = this.backParameter.scalars[row.field.value]
break
}
row.isBack = true
this.$set(this.tokenList, index, JSON.parse(JSON.stringify(row)))
},
async deketeRow(index) {
async deleteRow(index) {
const confirmDelete = await Dialog.confirm('提示', { message: '确认删除？' })
if (!confirmDelete) return
this.tokenList[index].value.value = null
switch (this.tokenList[index].type.value) {
case 'blob':
this.deleteTokenListObj.binary[this.tokenList[index].field.value] = null
break
case 'table':
this.deleteTokenListObj.table[this.tokenList[index].field.value] = null
break
default:
this.deleteTokenListObj.scalars[this.tokenList[index].field.value] = null
break
}
this.tokenList.splice(index, 1)
this.tokenList.forEach((item, index) => {
item.index = index
})
},
addRow() {
const newRow = { field: { value: 'newone', ifEdit: false }, type: { value: 'newone', ifEdit: false }, value: { value: 'newone', valueType: 'text', ifEdit: false }, index: this.tokenList.length, configurable: 'add', editing: false }
const newRow = { field: { value: '', editEnable: true, ifEdit: false }, type: { value: 'string', editEnable: true, ifEdit: false }, value: { value: '', valueType: 'text', editEnable: true, ifEdit: false }, index: this.tokenList.length, configurable: 'add', editing: false, needDelete: true, isNew: true }
this.tokenList.push(newRow)
this.tokenListCopy = JSON.parse(JSON.stringify(this.tokenList))
},
cancleAll() {
async cancleAll() {
this.getData()
},
async getTableOptions() {
const res = await getTable({ pages: 0, pagesize: 10000000000 })
if (res && res.data && res.data.code === 0) {
this.tableOptions = res.data.data.tables.map(item => {
return {
label: item.name,
value: item.name,
}
})
this.tableInfoList = res.data.data.tables.map(item => {
return {
name: item.name,
columns: item.columns
}
})
}
},
filterFinalParameter(target, item) {
switch (item.type.value) {
case 'blob':
target.binary[item.field.value] = item.value.value
break
case 'table':
target.table[item.field.value] = item.value.value
break
default:
target.scalars[item.field.value] = item.value.value
break
}
},
async saveAll() {
this.tokenListCopy = JSON.parse(JSON.stringify(this.tokenList))
const resultParameters = { dd: 0.8 }
const resultParameters = { binary: {}, scalars: {}, table: {} }
this.tokenList.forEach(item => {
item.field.ifEdit = false
item.type.ifEdit = false
item.value.ifEdit = false
item.configurable = 'edit'
item.editing = false
if (item.editing && !item.isBack && !item.ifSelf && !item.isNew) {
this.filterFinalParameter(resultParameters, item)
} else if (item.isNew && !item.ifSelf) {
this.filterFinalParameter(resultParameters, item)
}
// self_parameter放在最后处理，覆盖掉parameter中的重名字段
if (item.ifSelf) {
this.filterFinalParameter(resultParameters, item)
}
})
for (const i in this.deleteTokenListObj.binary) {
resultParameters.binary[i] = null
}
for (const i in this.deleteTokenListObj.scalars) {
resultParameters.scalars[i] = null
}
for (const i in this.deleteTokenListObj.table) {
resultParameters.table[i] = null
}
const res = await setServiceParamter({
potuid: this.currentService.potuid,
appid: this.currentService.appid,
secretkey: this.currentService.secretkey,
parameters: resultParameters
})
this.getData()
this.getDeviceInfo()
},
changeTableSelect(row, status) {
if (!status) {
row.operate = 'text'
this.$forceUpdate()
}
},
changeTypeStatus(row, status) {
if (!status) {
row.ifEdit = false
this.$forceUpdate()
}
},
changeTypeValue(v, index) {
if (v === 'blob') {
this.$set(this.tokenList[index].value, 'valueType', 'img')
} else if (v === 'table') {
this.$set(this.tokenList[index].value, 'valueType', 'a')
this.$set(this.tokenList[index].value, 'operate', 'text')
} else {
this.$set(this.tokenList[index].value, 'valueType', 'text')
}
this.$set(this.tokenList[index].value, 'value', '')
this.$set(this.tokenList[index], 'editing', true)
},
handleSelfParameter(selfParam) {
if (!selfParam || JSON.stringify(selfParam) === '{}') {
return {}
}
const result = {}
result.selfBinaryObj = selfParam.binary ? selfParam.binary : {}
result.selfScalarsObj = selfParam.scalars ? selfParam.scalars : {}
result.selfTableObj = selfParam.table ? selfParam.table : {}
return result
},
handleOperateBtn(data) {
data.forEach(item => {
let ifDelete = false
if (item.ifSelf) {
if (item.field.value in this.backParameter.binary) {
item.needBack = true
ifDelete = true
}
if (item.field.value in this.backParameter.scalars) {
item.needBack = true
ifDelete = true
}
if (item.field.value in this.backParameter.table) {
item.needBack = true
ifDelete = true
}
if (!ifDelete) {
item.needDelete = true
}
}
})
},
// 查找需要撤回的数据
contrastParametr(data) {
if (!data.self_param || JSON.stringify(data.self_param) === '{}') {
return null
}
if (data.parameters && data.parameters.binary && data.self_param && data.self_param.binary) {
for (const i in data.parameters.binary) {
for (const j in data.self_param.binary) {
if (i === j) {
this.backParameter.binary[i] = data.parameters.binary[i]
}
}
}
}
if (data.parameters && data.parameters.scalars && data.self_param && data.self_param.scalars) {
for (const i in data.parameters.scalars) {
for (const j in data.self_param.scalars) {
if (i === j) {
this.backParameter.scalars[i] = data.parameters.scalars[i]
}
}
}
}
if (data.parameters && data.parameters.table && data.self_param && data.self_param.table) {
for (const i in data.parameters.table) {
for (const j in data.self_param.table) {
if (i === j) {
this.backParameter.table[i] = data.parameters.table[i]
}
}
}
}
},
async getDeviceInfo() {
const res = await getServiceDevice({ deviceid: this.currentService.deviceId })
// if (res && res.data) {
// res.data.device.services.forEach(item => {
// if(item.potuid === this.current.potuid) {
// sessionStorage.setItem('currentService', JSON.parse(JSON.stringify(item)))
// this.currentService = JSON.parse(JSON.stringify(item))
// }
// })
// }
},
async getData() {
let countIndex = 0
this.tokenList = []
this.deleteTokenListObj = {
binary: {},
table: {},
scalars: {}
}
this.backData = {}
this.backParameter = {
binary: {},
scalars: {},
table: {},
}
const res = await getServiceParamter({ potuid: this.currentService.potuid })
if (res && res.data) {
if (res && res.data && res.data.parameters) {
this.contrastParametr(res.data)
const binaryObj = res.data.parameters.binary
const scalarsObj = res.data.parameters.scalars
const tableObj = res.data.parameters.table
const selfParam = this.handleSelfParameter(JSON.parse(JSON.stringify(res.data.self_param)))
this.dynamicTags = JSON.parse(JSON.stringify(res.data.templates))
for (const key in binaryObj) {
this.tokenList.push({ field: { value: key, ifEdit: false }, type: { value: 'blob', ifEdit: false }, value: { value: binaryObj[key], valueType: 'img', ifEdit: false }, index: countIndex, configurable: 'noedit', editing: false })
this.tokenList.push({ field: { value: key, editEnable: false, ifEdit: false }, type: { value: 'blob', editEnable: false, ifEdit: false }, value: { value: binaryObj[key], valueType: 'img' }, index: countIndex, configurable: 'noEdit', editing: false })
countIndex++
}
for (const key in scalarsObj) {
this.tokenList.push({ field: { value: key, ifEdit: false }, type: { value: typeof scalarsObj[key], ifEdit: false }, value: { value: scalarsObj[key], valueType: 'text', ifEdit: false }, index: countIndex, configurable: 'noedit', editing: false })
this.tokenList.push({ field: { value: key, editEnable: false, ifEdit: false }, type: { value: this.getParameterObjType(scalarsObj[key]), editEnable: false, ifEdit: false }, value: { value: scalarsObj[key], valueType: 'text', editEnable: true, ifEdit: false }, index: countIndex, configurable: 'noEdit', editing: false })
countIndex++
}
for (const key in tableObj) {
this.tokenList.push({ field: { value: key, ifEdit: false }, type: { value: 'table', ifEdit: false }, value: { value: tableObj[key], valueType: 'a', ifEdit: false }, index: countIndex, configurable: 'noedit', editing: false })
this.tokenList.push({ field: { value: key, editEnable: false, ifEdit: false }, type: { value: 'table', editEnable: false, ifEdit: false }, value: { value: tableObj[key], valueType: 'a', operate: 'text' }, index: countIndex, configurable: 'noEdit', editing: false })
countIndex++
}
for (const key in selfParam.selfBinaryObj) {
this.tokenList.push({ field: { value: key, editEnable: false, ifEdit: false }, type: { value: 'blob', editEnable: false, ifEdit: false }, value: { value: selfParam.selfBinaryObj[key], valueType: 'img' }, index: countIndex, configurable: 'noEdit', editing: false, ifSelf: true })
countIndex++
}
for (const key in selfParam.selfScalarsObj) {
this.tokenList.push({ field: { value: key, editEnable: false, ifEdit: false }, type: { value: this.getParameterObjType(selfParam.selfScalarsObj[key]), editEnable: false, ifEdit: false }, value: { value: selfParam.selfScalarsObj[key], valueType: 'text', editEnable: true, ifEdit: false }, index: countIndex, configurable: 'noEdit', editing: false, ifSelf: true })
countIndex++
}
for (const key in selfParam.selfTableObj) {
this.tokenList.push({ field: { value: key, editEnable: false, ifEdit: false }, type: { value: 'table', editEnable: false, ifEdit: false }, value: { value: selfParam.selfTableObj[key], valueType: 'a', operate: 'text' }, index: countIndex, configurable: 'noEdit', editing: false, ifSelf: true })
countIndex++
}
} else {
this.tokenList = []
this.total = 0
}
this.handleOperateBtn(this.tokenList)
this.tokenListCopy = JSON.parse(JSON.stringify(this.tokenList))
},
},
mounted() {
this.tokenListCopy = JSON.parse(JSON.stringify(this.tokenList))
if (JSON.stringify(this.$store.getters.currentService) !== '{}') {
sessionStorage.setItem('currentService', JSON.stringify(this.$store.getters.currentService))
}
this.currentService = JSON.parse(sessionStorage.getItem('currentService'))
this.getData()
this.getTableOptions()
}
}
</script>
<style lang="sass" scoped>
.select-file-none
display: inline-block
width: 75px
height: 26px
cursor: pointer
background: rgb(221, 221, 221)
text-align: center
line-height: 26px
.i-margin-left
margin-left: 5px
cursor: pointer
.span-margin-right
margin-right: 5px
.tag-select
// height: 32px
width: 220px
text-align: left
::v-deep.el-cascader
height: 32px
.el-input
height: 32px
.el-input__inner
height: 32px
margin-bottom: 11px
.el-input__suffix
line-height: 32px
.el-input__icon.el-icon-arrow-down
line-height: 32px
.index-max
height: 100%
width: 100%
position: absolute
left: 0
top: 0
opacity: 0
::v-deep .el-table__body-wrapper.is-scrolling-none
max-height: 224px !important
min-height: 100px
......@@ -444,6 +844,9 @@ export default {
.tags
display: flex
flex-wrap: wrap
.select-tag
max-height: none
overflow: visible
.list-item-input
margin-right: 20px
.list-item-icon
......@@ -513,7 +916,9 @@ export default {
.operate-text-delete
color: #F56C6C
.preview-text
position: relative
line-height: 28px
display: inline-block
.preview-img
vertical-align: bottom
margin-left: 10px
......@@ -529,6 +934,9 @@ export default {
height: 28px
::v-deep .el-input__inner
height: 28px
.field-select
width: 200px !important
height: 28px
.ak-sk
line-height: 32px
.param-template-text
......
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">
<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">
<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">
<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">
<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()
},
......
src/views/DeviceList/index.vue
......@@ -8,7 +8,7 @@
<div class="flex-left">
<div class="search-item">
<span class="search-title">状态:</span>
<el-checkbox-group v-model="search.checkList" class="inline-div">
<el-checkbox-group v-model="search.checkList" class="inline-div" @change="handleChangeSearch">
<el-checkbox :label="1" class="check-title">在线</el-checkbox>
<el-checkbox :label="0" class="check-title">离线</el-checkbox>
<el-checkbox :label="2" class="check-title">异常</el-checkbox>
......@@ -17,9 +17,11 @@
<div v-if="!isCollapse">
<div class="search-item">
<span class="search-title">架构:</span>
<st-input :width="'240px'" class="search-item-margin" v-model="search.structure"></st-input>
<st-input :width="'240px'" class="search-item-margin" v-model="search.structure" @change="handleChangeSearch"></st-input>
<span class="search-title">系统:</span>
<st-input :width="'240px'" v-model="search.system"></st-input>
<st-input :width="'240px'" class="search-item-margin" v-model="search.system" @change="handleChangeSearch"></st-input>
<span class="search-title">IP:</span>
<st-input :width="'240px'" :class="{'error-border': ifBorder}" v-model="search.ip" @change="handleIpChangeSearch"></st-input>
</div>
<div class="search-item no-wrap">
<span class="search-title">注册时间:</span>
......@@ -29,7 +31,7 @@
:default-time="['00:00:00', '23:59:59']"
type="datetimerange"
format="yyyy-MM-dd HH:mm"
value-format="timestamp"
value-format="yyyy-MM-dd HH:mm:ss"
size="small"
style="padding-top:2px"
prefix-icon=' '
......@@ -37,7 +39,9 @@
start-placeholder="选择时间"
v-model="search.registerTime"
end-placeholder="选择时间"
suffix-icon="el-icon-date">
suffix-icon="el-icon-date"
@change="handleChangeSearch"
>
</el-date-picker>
<span class="search-title">上线时间:</span>
<el-date-picker
......@@ -47,13 +51,15 @@
:default-time="['00:00:00', '23:59:59']"
type="datetimerange"
format="yyyy-MM-dd HH:mm"
value-format="timestamp"
value-format="yyyy-MM-dd HH:mm:ss"
size="small"
style="padding-top:2px"
prefix-icon=' '
range-separator="至"
start-placeholder="选择时间"
end-placeholder="选择时间">
end-placeholder="选择时间"
@change="handleChangeSearch"
>
</el-date-picker>
</div>
<div class="search-item">
......@@ -66,6 +72,8 @@
filterable
:options="tagList"
v-model="search.tags"
@change="handleChangeSearch"
clearable
>
</st-select>
<span class="search-title">服务:</span>
......@@ -77,6 +85,8 @@
filterable
:options="serviceList"
v-model="search.services"
@change="handleChangeSearch"
clearable
>
</st-select>
</div>
......@@ -92,12 +102,12 @@
</div>
</div>
<div class="page-content">
<div class="content-header flex-right-content">
<!-- <div class="content-header flex-right-content">
<nameFilter
placeholder="请输入搜索内容"
@startSearch="startSearch">
</nameFilter>
</div>
</div> -->
<div class="table-list">
<div class="list-content">
<st-table
......@@ -112,14 +122,18 @@
:childOptions="childDefinitions"
>
<div slot='codeSlot' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.deviceid" placement="top">
<span>{{ simplify(row.deviceid, 3) }}</span>
<i class="iconfont icon-fuzhi icon-fuzhi-text" @click="copyText(row.code)"></i>
</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">
<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>
......@@ -129,7 +143,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, 4) }}</el-tag>
</template>
<span v-if="(row.tags && row.tags.length) > 10">共: {{(row.tags && row.tags.length) ? row.tags.length : 0}} 条</span>
</div>
......@@ -147,28 +161,38 @@
</el-tooltip>
</div>
<div slot='systemSlot' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.structure" placement="top">
<span>{{ simplify(row.system, 7) }}</span>
</el-tooltip>
</div>
<div slot='operate' slot-scope="row">
<span class="operate-text" @click="detail(row.deviceid)">{{ '详情 '}}</span>
</div>
<!-- eslint-disable-next-line -->
<div slot='childServiceSlot' slot-scope="row">
<span>{{ row.name }}</span>
<el-tooltip class="item" effect="dark" :content="row.structure" placement="top">
<span>{{ simplify(row.name, 7) }}</span>
</el-tooltip>
</div>
<div slot='childCodeSlot' slot-scope="row">
<span>{{ row.potuid }}</span>
<el-tooltip class="item" effect="dark" :content="row.potuid" placement="top">
<span>{{ simplify(row.potuid, 15) }}</span>
</el-tooltip>
</div>
<div slot='portSlot' slot-scope="row">
<span>{{ row.port }}</span>
<el-tooltip class="item" effect="dark" :content="row.port + ''" placement="top">
<span>{{ simplify(row.port, 6) }}</span>
</el-tooltip>
</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, 15) }}</span>
</el-tooltip>
</div>
<div slot='childOperate' slot-scope="row">
<span class="operate-text" @click="seeServiceParams(row)">{{ '查看参数' }}</span>
<span class="operate-text" @click="sendReq(row.id)">{{ '发送请求' }}</span>
<span class="operate-text" @click="sendOrder(row.id)">{{ '发送指令' }}</span>
<span class="operate-text" @click="sendReq(row)">{{ '发送请求' }}</span>
<span class="operate-text" @click="sendOrder(row)">{{ '发送指令' }}</span>
</div>
</st-table>
</div>
......@@ -185,6 +209,7 @@ import { getDevice, getDeviceService, getTag } from '@/axios'
export default {
data() {
return {
ifBorder: false,
// 当前页
pi: 0,
// 当前页size
......@@ -257,11 +282,13 @@ export default {
slotName: 'systemSlot'
}, {
label: 'IP',
render: 'ip'
render: 'ip',
width: 95
}, {
label: '注册时间',
type: 'slot',
slotName: 'registerTimeSlot'
slotName: 'registerTimeSlot',
width: 140
}, {
label: '标签',
type: 'slot',
......@@ -269,7 +296,8 @@ export default {
}, {
label: '服务',
type: 'slot',
slotName: 'servicesSlot'
slotName: 'servicesSlot',
width: 90
}, {
label: '操作',
type: 'slot',
......@@ -329,17 +357,38 @@ export default {
methods: {
rTimeMin,
copyText,
handleChangeSearch() {
this.getData()
},
handleIpChangeSearch(v) {
// 校验IPv4地址 同时兼容xxx.* xxx.xxx.* xxx.xxx.xxx.*
const ipReg = validate.ipV4
if ((v.match(ipReg) && v.match(ipReg)[0] === v) || v === '') {
this.ifBorder = false
this.getData()
} else {
this.ifBorder = true
}
},
startSearch(value) {
this.getData()
},
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.$store.commit('changeCurrentDevice', row.deviceId)
this.$store.commit('changeCurrentService', row)
this.$router.push({ name: 'device-service' })
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)
},
collapseSearch() {
this.isCollapse = !this.isCollapse
......@@ -359,6 +408,7 @@ export default {
this.search = {
checkList: []
}
this.getData()
},
// 跳转到设备详情页面
detail(deviceid) {
......@@ -373,9 +423,12 @@ export default {
structure: this.search.structure,
system: this.search.system,
register_date: this.search.registerTime && this.search.registerTime.length ? this.search.registerTime[0] : '',
register_end_date: this.search.registerTime && this.search.registerTime.length ? this.search.registerTime[1] : '',
online_date: this.search.onlineTime && this.search.onlineTime.length ? this.search.onlineTime[0] : '',
online_end_date: this.search.onlineTime && this.search.onlineTime.length ? this.search.onlineTime[1] : '',
tag: this.search.tags,
service: this.search.services
service: this.search.services,
ip: this.search.ip
})
if (res && res.data) {
this.tokenList = JSON.parse(JSON.stringify(res.data.data.devices))
......@@ -418,6 +471,9 @@ export default {
// 监听route的改变进行pi ,ps的改变
'$route.query': {
handler(newName, oldName) {
this.pi = newName.page_index - 1
this.ps = newName.page_size
this.getData()
},
deep: true,
}
......@@ -429,9 +485,9 @@ export default {
},
destroyed() {
},
components: {
nameFilter: () => import(/* webpackChunkName: "container" */ '@/components/list-filter/name.vue'),
}
// components: {
// nameFilter: () => import(/* webpackChunkName: "container" */ '@/components/list-filter/name.vue'),
// }
}
</script>
......
src/views/ServiceList/index.vue
......@@ -8,7 +8,7 @@
<div class="flex-left">
<div class="search-item">
<span class="search-title">状态:</span>
<el-checkbox-group v-model="search.checkList" class="inline-div">
<el-checkbox-group v-model="search.checkList" class="inline-div" @change="handleChangeSearch">
<el-checkbox :label="1" class="check-title">在线</el-checkbox>
<el-checkbox :label="0" class="check-title">离线</el-checkbox>
<el-checkbox :label="2" class="check-title">异常</el-checkbox>
......@@ -17,9 +17,11 @@
<div v-if="!isCollapse">
<div class="search-item">
<span class="search-title">架构:</span>
<st-input :width="'240px'" class="search-item-margin" v-model="search.structure"></st-input>
<st-input :width="'240px'" class="search-item-margin" v-model="search.structure" @change="handleChangeSearch"></st-input>
<span class="search-title">系统:</span>
<st-input :width="'240px'" v-model="search.system"></st-input>
<st-input :width="'240px'" class="search-item-margin" v-model="search.system" @change="handleChangeSearch"></st-input>
<span class="search-title">IP:</span>
<st-input :width="'240px'" :class="{'error-border': ifBorder}" v-model="search.ip" @change="handleIpChangeSearch"></st-input>
</div>
<div class="search-item no-wrap">
<span class="search-title">注册时间:</span>
......@@ -29,7 +31,7 @@
:default-time="['00:00:00', '23:59:59']"
type="datetimerange"
format="yyyy-MM-dd HH:mm"
value-format="timestamp"
value-format="yyyy-MM-dd HH:mm:ss"
size="small"
style="padding-top:2px"
prefix-icon=' '
......@@ -37,7 +39,9 @@
start-placeholder="选择时间"
v-model="search.registerTime"
end-placeholder="选择时间"
suffix-icon="el-icon-date">
suffix-icon="el-icon-date"
@change="handleChangeSearch"
>
</el-date-picker>
<span class="search-title">上线时间:</span>
<el-date-picker
......@@ -47,13 +51,15 @@
:default-time="['00:00:00', '23:59:59']"
type="datetimerange"
format="yyyy-MM-dd HH:mm"
value-format="timestamp"
value-format="yyyy-MM-dd HH:mm:ss"
size="small"
style="padding-top:2px"
prefix-icon=' '
range-separator="至"
start-placeholder="选择时间"
end-placeholder="选择时间">
end-placeholder="选择时间"
@change="handleChangeSearch"
>
</el-date-picker>
</div>
<div class="search-item">
......@@ -66,6 +72,7 @@
filterable
:options="tagList"
v-model="search.tags"
@change="handleChangeSearch"
>
</st-select>
<span class="search-title">服务:</span>
......@@ -77,6 +84,7 @@
filterable
:options="serviceList"
v-model="search.services"
@change="handleChangeSearch"
>
</st-select>
</div>
......@@ -92,12 +100,12 @@
</div>
</div>
<div class="page-content">
<div class="content-header flex-right-content">
<!-- <div class="content-header flex-right-content">
<nameFilter
placeholder="请输入搜索内容"
@startSearch="startSearch">
</nameFilter>
</div>
</div> -->
<div class="table-list">
<div class="list-content">
<st-table
......@@ -111,14 +119,18 @@
:doubleTable="false"
>
<div slot='codeSlot' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.potuid" placement="top">
<span>{{ simplify(row.potuid, 3) }}</span>
</el-tooltip>
<i class="iconfont icon-fuzhi icon-fuzhi-text" @click="copyText(row.potuid)"></i>
</div>
<div slot='status' slot-scope="row">
<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, 3) }}</span>
</el-tooltip>
</div>
<div slot='registerTimeSlot' slot-scope="row">
<span>{{ (row.register_date) }}</span>
......@@ -128,7 +140,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, 4) }}</el-tag>
</template>
<span v-if="(row.tags && row.tags.length) > 10">共: {{(row.tags && row.tags.length) ? row.tags.length : 0}} 条</span>
</div>
......@@ -136,17 +148,24 @@
</div>
<div slot='servicesSlot' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.name" placement="top">
<span>{{row.name.length > 10 ? row.name.slice(0, 9) + '...' : row.name}}</span>
<span>{{row.name.length > 4 ? row.name.slice(0, 3) + '...' : row.name}}</span>
</el-tooltip>
</div>
<div slot='ipSlot' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.ip" placement="top">
<span>{{ simplify(row.ip, 3) }}</span>
</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" @click="detail(row.id)">{{ '详情 '}}</span>
<span class="operate-text" @click="seeServiceParams(row.id)">{{ '查看参数' }}</span>
<span class="operate-text" @click="sendReq(row.id)">{{ '发送请求' }}</span>
<span class="operate-text" @click="sendOrder(row.id)">{{ '发送指令' }}</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>
......@@ -163,6 +182,7 @@ import { getService, getDeviceService, getTag } from '@/axios'
export default {
data() {
return {
ifBorder: false,
// 当前页
pi: 0,
// 当前页size
......@@ -240,22 +260,23 @@ export default {
slotName: 'systemSlot'
}, {
label: 'IP',
render: 'ip'
type: 'slot',
slotName: 'ipSlot'
}, {
label: '注册时间',
type: 'slot',
slotName: 'registerTimeSlot',
width: 110
width: 190
}, {
label: '标签',
type: 'slot',
slotName: 'tagsSlot',
width: 120
width: 130
}, {
label: '操作',
type: 'slot',
slotName: 'operate',
width: 200
width: 310
},
],
/* 搜索栏条件 */
......@@ -311,6 +332,19 @@ export default {
methods: {
rTimeMin,
copyText,
handleChangeSearch() {
this.getData()
},
handleIpChangeSearch(v) {
// 校验IPv4地址 同时兼容xxx.* xxx.xxx.* xxx.xxx.xxx.*
const ipReg = validate.ipV4
if ((v.match(ipReg) && v.match(ipReg)[0] === v) || v === '') {
this.ifBorder = false
this.getData()
} else {
this.ifBorder = true
}
},
startSearch(value) {
this.getData()
},
......@@ -323,8 +357,11 @@ export default {
system: this.search.system,
register_date: this.search.registerTime && this.search.registerTime.length ? this.search.registerTime[0] : '',
online_date: this.search.onlineTime && this.search.onlineTime.length ? this.search.onlineTime[0] : '',
register_end_date: this.search.registerTime && this.search.registerTime.length ? this.search.registerTime[1] : '',
online_end_date: this.search.onlineTime && this.search.onlineTime.length ? this.search.onlineTime[1] : '',
tag: this.search.tags,
service: this.search.services
service: this.search.services,
ip: this.search.ip
})
if (res && res.data) {
this.tokenList = JSON.parse(JSON.stringify(res.data.data.services))
......@@ -356,14 +393,22 @@ export default {
})
}
},
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.$store.commit('changeCurrentDevice', row.deviceId)
this.$store.commit('changeCurrentService', row)
this.$router.push({ name: 'device-service' })
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)
},
collapseSearch() {
this.isCollapse = !this.isCollapse
......@@ -383,6 +428,7 @@ export default {
this.search = {
checkList: []
}
this.getData()
},
// 跳转到设备详情页面
detail(deviceid) {
......@@ -394,6 +440,9 @@ export default {
// 监听route的改变进行pi ,ps的改变
'$route.query': {
handler(newName, oldName) {
this.pi = newName.page_index - 1
this.ps = newName.page_size
this.getData()
},
deep: true,
}
......@@ -406,7 +455,7 @@ export default {
destroyed() {
},
components: {
nameFilter: () => import(/* webpackChunkName: "container" */ '@/components/list-filter/name.vue'),
// nameFilter: () => import(/* webpackChunkName: "container" */ '@/components/list-filter/name.vue'),
}
}
</script>
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!