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' ...@@ -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 deleteParameter = data => axios(GET, FRONT + PARAMETER + '/delete', data)
export const editParameter = data => axios(POST, FRONT + PARAMETER + '/change', data) export const editParameter = data => axios(POST, FRONT + PARAMETER + '/change', data)
export const detailParameter = data => axios(GET, FRONT + PARAMETER + '/query', 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' const TABLE = '/table'
export const getTable = data => axios(GET, FRONT + TABLE + '/query_list', data) export const getTable = data => axios(GET, FRONT + TABLE + '/query_list', data)
...@@ -41,7 +42,9 @@ export const setServiceParamter = data => axios(POST, FRONT + DEVICE + '/service ...@@ -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 deleteTag = data => axios(GET, FRONT + DEVICE + '/tag/delete', data)
export const addTag = data => axios(POST, FRONT + DEVICE + '/tag/add', 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 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' const SERVICE = '/service'
export const getService = data => axios(POST, FRONT + SERVICE + '/query_list', data) 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 => { ...@@ -16,6 +16,7 @@ const getByteLen = item => {
} }
export default { export default {
getByteLen: getByteLen, 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) => { normName: (rule, value, cb) => {
// 支持中文、英文、日文、数字和特殊字符_-@(),长度限制4~30个字符，中文及日文算2个字符 // 支持中文、英文、日文、数字和特殊字符_-@(),长度限制4~30个字符，中文及日文算2个字符
......
src/components/seeta-ui/seeta-table/index.vue
...@@ -306,8 +306,9 @@ export default class seetaTableIndex extends Vue { ...@@ -306,8 +306,9 @@ export default class seetaTableIndex extends Vue {
// 计算列表高度 // 计算列表高度
getTableHeight() { getTableHeight() {
this.$nextTick(() => { this.$nextTick(() => {
if (this.refTableBox) {
this.tableHeight = this.pagination ? this.refTableBox.getBoundingClientRect().height - 66 : this.refTableBox.getBoundingClientRect().height - 25 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 = () => ({ ...@@ -6,6 +6,7 @@ const state = () => ({
currentProduct: {}, currentProduct: {},
currentDevice: '', currentDevice: '',
currentService: {}, currentService: {},
currentTagIndex: 0,
}) })
const mutations = { const mutations = {
...@@ -24,7 +25,12 @@ const mutations = { ...@@ -24,7 +25,12 @@ const mutations = {
}, },
changeCurrentService(state, item) { changeCurrentService(state, item) {
state.currentService = JSON.parse(JSON.stringify(item)) state.currentService = JSON.parse(JSON.stringify(item))
} },
changeCurrentTagIndex(state, item) {
state.currentTagIndex = item
sessionStorage.setItem('currentTagIndex', item)
},
} }
const actions = { const actions = {
...@@ -36,7 +42,8 @@ const getters = { ...@@ -36,7 +42,8 @@ const getters = {
routerStatus: state => state.routerStatus, routerStatus: state => state.routerStatus,
currentProduct: state => state.currentProduct, currentProduct: state => state.currentProduct,
currentDevice: state => state.currentDevice, currentDevice: state => state.currentDevice,
currentService: state => state.currentService currentService: state => state.currentService,
currentTagIndex: state => state.currentTagIndex,
} }
export default { export default {
......
src/views/DeviceList/detail.vue
...@@ -17,17 +17,23 @@ ...@@ -17,17 +17,23 @@
:pagination="false" :pagination="false"
> >
<div slot='codeSlot' slot-scope="row"> <div slot='codeSlot' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.deviceid" placement="top">
<span>{{ simplify(row.deviceid, 3) }}</span> <span>{{ simplify(row.deviceid, 3) }}</span>
</el-tooltip>
<i class="iconfont icon-fuzhi icon-fuzhi-text" @click="copyText(row.deviceid)"></i> <i class="iconfont icon-fuzhi icon-fuzhi-text" @click="copyText(row.deviceid)"></i>
</div> </div>
<div slot='status' slot-scope="row" class="status"> <div slot='status' slot-scope="row" class="status">
<span class="circleStatus" :style="{color: getStatusColor(row.state)}">{{ getStatusText(row.state) }}</span> <span class="circleStatus" :style="{color: getStatusColor(row.state)}">{{ getStatusText(row.state) }}</span>
</div> </div>
<div slot='ipSlot' slot-scope="row" class="ipSlot"> <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>
<div slot='structureSlot' slot-scope="row"> <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>
<div slot='registerTimeSlot' slot-scope="row"> <div slot='registerTimeSlot' slot-scope="row">
<span>{{ (row.register_date) }}</span> <span>{{ (row.register_date) }}</span>
...@@ -37,7 +43,7 @@ ...@@ -37,7 +43,7 @@
<el-tooltip class="item" effect="dark" :content="row.tags.join(',')" placement="top" style="display: inline-block"> <el-tooltip class="item" effect="dark" :content="row.tags.join(',')" placement="top" style="display: inline-block">
<div> <div>
<template v-for="(item, index) in row.tags"> <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> </template>
<span v-if="row.tags.length > 10">共: {{row.tags.length}} 条</span> <span v-if="row.tags.length > 10">共: {{row.tags.length}} 条</span>
<el-input <el-input
...@@ -67,7 +73,9 @@ ...@@ -67,7 +73,9 @@
</el-tooltip> </el-tooltip>
</div> </div>
<div slot='systemSlot' slot-scope="row"> <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>
<div slot='operate' slot-scope="row"> <div slot='operate' slot-scope="row">
<span class="operate-text operate-delete" @click="delete(row.id)">{{ '删除 '}}</span> <span class="operate-text operate-delete" @click="delete(row.id)">{{ '删除 '}}</span>
...@@ -85,22 +93,30 @@ ...@@ -85,22 +93,30 @@
:pagination="false" :pagination="false"
> >
<div slot='nameSlot' slot-scope="row"> <div slot='nameSlot' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.name" placement="top">
<span>{{ simplify(row.name, 8) }}</span> <span>{{ simplify(row.name, 8) }}</span>
</el-tooltip>
</div> </div>
<div slot='portSlot' slot-scope="row"> <div slot='portSlot' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.port + ''" placement="top">
<span>{{ simplify(row.port, 6) }}</span> <span>{{ simplify(row.port, 6) }}</span>
</el-tooltip>
</div> </div>
<div slot='codeSlot' slot-scope="row"> <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> <i class="iconfont icon-fuzhi icon-fuzhi-text" @click="copyText(row.potuid)"></i>
</div> </div>
<div slot='descSlot' slot-scope="row"> <div slot='descSlot' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.description" placement="top">
<span>{{ simplify(row.description, 10) }}</span> <span>{{ simplify(row.description, 10) }}</span>
</el-tooltip>
</div> </div>
<div slot='operate' slot-scope="row"> <div slot='operate' slot-scope="row">
<span class="operate-text" @click="seeServiceParams(row.potuid)">{{ '查看参数' }}</span> <span class="operate-text" @click="seeServiceParams(row)">{{ '查看参数' }}</span>
<span class="operate-text" @click="sendReq(row.potuid)">{{ '发送请求' }}</span> <span class="operate-text" @click="sendReq(row)">{{ '发送请求' }}</span>
<span class="operate-text" @click="sendOrder(row.potuid)">{{ '发送指令' }}</span> <span class="operate-text" @click="sendOrder(row)">{{ '发送指令' }}</span>
</div> </div>
</st-table> </st-table>
</div> </div>
...@@ -159,6 +175,7 @@ export default { ...@@ -159,6 +175,7 @@ export default {
label: '操作', label: '操作',
type: 'slot', type: 'slot',
slotName: 'operate', slotName: 'operate',
width: 120
}, },
], ],
definitions: [ definitions: [
...@@ -166,6 +183,7 @@ export default { ...@@ -166,6 +183,7 @@ export default {
label: '编号', label: '编号',
type: 'slot', type: 'slot',
slotName: 'codeSlot', slotName: 'codeSlot',
width: 100
}, { }, {
label: '状态', label: '状态',
type: 'slot', type: 'slot',
...@@ -179,7 +197,8 @@ export default { ...@@ -179,7 +197,8 @@ export default {
default: default:
return '#999999' return '#999999'
} }
} },
width: 90
}, { }, {
label: '架构', label: '架构',
type: 'slot', type: 'slot',
...@@ -195,7 +214,8 @@ export default { ...@@ -195,7 +214,8 @@ export default {
}, { }, {
label: '注册时间', label: '注册时间',
type: 'slot', type: 'slot',
slotName: 'registerTimeSlot' slotName: 'registerTimeSlot',
width: 180
}, { }, {
label: '标签', label: '标签',
type: 'slot', type: 'slot',
...@@ -204,7 +224,8 @@ export default { ...@@ -204,7 +224,8 @@ export default {
}, { }, {
label: '服务', label: '服务',
type: 'slot', type: 'slot',
slotName: 'servicesSlot' slotName: 'servicesSlot',
width: 120
}, { }, {
label: '操作', label: '操作',
type: 'slot', type: 'slot',
...@@ -266,11 +287,22 @@ export default { ...@@ -266,11 +287,22 @@ export default {
methods: { methods: {
rTimeMin, rTimeMin,
copyText, 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) { async handleClose(row, tag) {
const res = await deleteTag({ name: tag }) const res = await deleteTag({ name: tag })
...@@ -323,6 +355,11 @@ export default { ...@@ -323,6 +355,11 @@ export default {
if (res && res.data && res.data.device) { if (res && res.data && res.data.device) {
this.tokenList = [JSON.parse(JSON.stringify(res.data.device))] this.tokenList = [JSON.parse(JSON.stringify(res.data.device))]
this.serviceTokenList = JSON.parse(JSON.stringify(res.data.device.services)) 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.total = 1
this.servicTotal = res.data.device.services.length this.servicTotal = res.data.device.services.length
} else { } else {
...@@ -356,6 +393,8 @@ export default { ...@@ -356,6 +393,8 @@ export default {
</script> </script>
<style lang="sass" scoped> <style lang="sass" scoped>
.service-item
margin-right: 10px
.page-nav .page-nav
font-family: PingFangSC-Regular font-family: PingFangSC-Regular
font-size: 14px font-size: 14px
......
src/views/DeviceList/deviceService/components/GetParams.vue
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
</div> </div>
<div class="list-item"> <div class="list-item">
<span class="list-item-title param-template-text">{{'参数模板：'}}</span> <span class="list-item-title param-template-text">{{'参数模板：'}}</span>
<div class="list-item-content"> <div class="list-item-content select-tag">
<div class="tags"> <div class="tags">
<vuedraggable <vuedraggable
class="wrapper" class="wrapper"
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
> >
<transition-group> <transition-group>
<template v-for="(item) in dynamicTags" class="item"> <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> </template>
</transition-group> </transition-group>
</vuedraggable> </vuedraggable>
...@@ -57,18 +57,33 @@ ...@@ -57,18 +57,33 @@
@blur="handleInputConfirm" @blur="handleInputConfirm"
> >
</el-input> --> </el-input> -->
<div class="tag-select">
<el-cascader <el-cascader
v-model="inputValue" :show-all-levels="false"
v-if="inputVisible"
:options="options" :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> </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> <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加标签</el-button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="content-table"> <div class="content-table">
<st-table <st-table
ref="vTable" ref="vTable"
...@@ -82,43 +97,76 @@ ...@@ -82,43 +97,76 @@
:pagination="false" :pagination="false"
> >
<div slot='fieldSlot' slot-scope="scope"> <div slot='fieldSlot' slot-scope="scope">
<template> <template v-if="!scope.deleted">
<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> <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="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> <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> </template>
</div> </div>
<div slot='typeSlot' slot-scope="scope"> <div slot='typeSlot' slot-scope="scope">
<template> <template v-if="!scope.deleted">
<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> <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-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> <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> </template>
</div> </div>
<div slot='valueSlot' slot-scope="row"> <div slot='valueSlot' slot-scope="row">
<template v-if="row.value && !row.value.ifEdit && row.value.valueType === 'text'"> <template v-if="!row.deleted">
<span @click="changeStatus(row, row.index, 'value', true)" :class="{'pointer': row.configurable !== 'noedit'}">{{row.value.value}}</span> <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>
<template v-else-if="row.value && !row.value.ifEdit && row.value.valueType === 'a'"> <template v-else-if="row.value && row.value.valueType === 'a'">
<a href="javascript:;" class="link-text" @click="linkToTable">{{row.value.value}}</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>
<template v-else-if="row.value && !row.value.ifEdit && row.value.valueType === 'img'"> <template v-else-if="row.value && row.value.valueType === 'img'">
<span class="preview-text">{{getBlobSize(row.value.value)}}</span> <p class="preview-text" v-if="row.value.value">
<span v-if='!ifBlobPreview(row.value.value)'>{{'(不可预览)'}}</span> <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 <el-image
class="preview-img" class="preview-img"
v-else v-if='ifBlobPreview(row.value.value)'
style="width: 42px; height: 28px" style="width: 42px; height: 28px"
:src="row.value.value" :src="row.value.value"
:preview-src-list="getBlobimgUrlList(row.value.value)"> :preview-src-list="getBlobimgUrlList(row.value.value)">
</el-image> </el-image>
</template> </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> </template>
</div> </div>
<div slot='operate' slot-scope="row"> <div slot='operate' slot-scope="row">
<span v-if="row.configurable === 'edit' && row.editing" class="operate-text" @click="backRow(row.index)">{{ '撤销覆盖' }}</span> <template v-if="!row.needBack && !row.needDelete">
<span v-else-if="row.configurable === 'add'" class="operate-text operate-text-delete" @click="deketeRow(row.index)">{{ '删除' }}</span> <span>{{ '-' }}</span>
<span v-else class="operate-text operate-text-none">{{'-'}}</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> </div>
</st-table> </st-table>
<div class="add" @click="addRow"> <div class="add" @click="addRow">
...@@ -140,7 +188,8 @@ ...@@ -140,7 +188,8 @@
<script> <script>
import { rTimeMin, copyText } from '@/utils/system.js' import { rTimeMin, copyText } from '@/utils/system.js'
import Dialog from '@/helpers/dialog' 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' import vuedraggable from 'vuedraggable'
export default { export default {
components: { components: {
...@@ -153,6 +202,15 @@ export default { ...@@ -153,6 +202,15 @@ export default {
return '24字节' return '24字节'
} }
}, },
getParameterObjType() {
return item => {
if (JSON.stringify(item) === 'null') {
return 'null'
} else {
return typeof item
}
}
},
// 是否可预览 // 是否可预览
ifBlobPreview() { ifBlobPreview() {
return item => { return item => {
...@@ -214,6 +272,8 @@ export default { ...@@ -214,6 +272,8 @@ export default {
}, },
data() { data() {
return { return {
tagItem: '',
tagOptions: [{ label: 'blob', value: 'blob' }, { label: 'number', value: 'number' }, { label: 'string', value: 'string' }, { label: 'table', value: 'table' }],
dynamicTags: [], dynamicTags: [],
inputVisible: false, inputVisible: false,
inputValue: [], inputValue: [],
...@@ -224,6 +284,7 @@ export default { ...@@ -224,6 +284,7 @@ export default {
// ], // ],
tokenList: [], tokenList: [],
tokenListCopy: [], tokenListCopy: [],
deleteTokenListObj: {},
total: 0, total: 0,
loadingStatus: false, loadingStatus: false,
currentInput: '', currentInput: '',
...@@ -287,46 +348,154 @@ export default { ...@@ -287,46 +348,154 @@ export default {
slotName: 'operate', slotName: 'operate',
}, },
], ],
currentService: {} currentService: {},
// 存储撤回信息
backData: {},
// 存储表格信息
tableInfoList: [],
} }
}, },
methods: { methods: {
rTimeMin, rTimeMin,
endSort(evt) { changeToTable(row) {
console.log('evt end index', evt.newIndex) row.operate = 'select'
console.log(this.dynamicTags, 'dynamicTags') this.$forceUpdate()
}, },
handleClose(tag) { choiceImg(row) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1) 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) { changeStatus(row, index, item, status, type, enable) {
if (row.configurable === 'noedit') { // 不允许编辑的条目
if (!enable) {
return null return null
} }
if (type === 'text') {
if (status) { if (status) {
this.$set(this, 'currentInput', row[item].value) this.$set(this, 'currentInput', row[item].value)
} else { } else {
row[item].value = this.currentInput row[item].value = this.currentInput
} }
}
row[item].ifEdit = status row[item].ifEdit = status
this.$set(this.tokenList, index, row) this.$set(this.tokenList, index, row)
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.myInput && this.$refs.myInput.$children[0].focus() this.$refs.myInput && this.$refs.myInput.$children[0].focus()
}) })
}, },
linkToTable() { linkToTable(name) {
// this.$router.push({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 row.editing = true
}
this.$set(this.tokenList, index, row) this.$set(this.tokenList, index, row)
}, },
showInput() { showInput() {
this.inputVisible = true this.inputVisible = true
this.$nextTick(() => { this.getTagByService()
this.$refs.saveTagInput.$refs.input.focus()
})
}, },
handleInputConfirm() { handleInputConfirm() {
const inputValue = this.inputValue const inputValue = this.inputValue
...@@ -338,78 +507,309 @@ export default { ...@@ -338,78 +507,309 @@ export default {
}, },
backRow(index) { backRow(index) {
const row = this.tokenListCopy[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))) this.$set(this.tokenList, index, JSON.parse(JSON.stringify(row)))
}, },
async deketeRow(index) { async deleteRow(index) {
const confirmDelete = await Dialog.confirm('提示', { message: '确认删除？' }) const confirmDelete = await Dialog.confirm('提示', { message: '确认删除？' })
if (!confirmDelete) return 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.splice(index, 1)
this.tokenList.forEach((item, index) => { this.tokenList.forEach((item, index) => {
item.index = index item.index = index
}) })
}, },
addRow() { 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.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() { async saveAll() {
this.tokenListCopy = JSON.parse(JSON.stringify(this.tokenList)) const resultParameters = { binary: {}, scalars: {}, table: {} }
const resultParameters = { dd: 0.8 }
this.tokenList.forEach(item => { this.tokenList.forEach(item => {
item.field.ifEdit = false if (item.editing && !item.isBack && !item.ifSelf && !item.isNew) {
item.type.ifEdit = false this.filterFinalParameter(resultParameters, item)
item.value.ifEdit = false } else if (item.isNew && !item.ifSelf) {
item.configurable = 'edit' this.filterFinalParameter(resultParameters, item)
item.editing = false }
// 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({ const res = await setServiceParamter({
potuid: this.currentService.potuid, potuid: this.currentService.potuid,
appid: this.currentService.appid, appid: this.currentService.appid,
secretkey: this.currentService.secretkey, secretkey: this.currentService.secretkey,
parameters: resultParameters 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() { async getData() {
let countIndex = 0 let countIndex = 0
this.tokenList = [] this.tokenList = []
this.deleteTokenListObj = {
binary: {},
table: {},
scalars: {}
}
this.backData = {}
this.backParameter = {
binary: {},
scalars: {},
table: {},
}
const res = await getServiceParamter({ potuid: this.currentService.potuid }) 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 binaryObj = res.data.parameters.binary
const scalarsObj = res.data.parameters.scalars const scalarsObj = res.data.parameters.scalars
const tableObj = res.data.parameters.table 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)) this.dynamicTags = JSON.parse(JSON.stringify(res.data.templates))
for (const key in binaryObj) { 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++ countIndex++
} }
for (const key in scalarsObj) { 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++ countIndex++
} }
for (const key in tableObj) { 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++ countIndex++
} }
} else { } else {
this.tokenList = [] this.tokenList = []
this.total = 0 this.total = 0
} }
this.handleOperateBtn(this.tokenList)
this.tokenListCopy = JSON.parse(JSON.stringify(this.tokenList))
}, },
}, },
mounted() { mounted() {
this.tokenListCopy = JSON.parse(JSON.stringify(this.tokenList))
if (JSON.stringify(this.$store.getters.currentService) !== '{}') { if (JSON.stringify(this.$store.getters.currentService) !== '{}') {
sessionStorage.setItem('currentService', JSON.stringify(this.$store.getters.currentService)) sessionStorage.setItem('currentService', JSON.stringify(this.$store.getters.currentService))
} }
this.currentService = JSON.parse(sessionStorage.getItem('currentService')) this.currentService = JSON.parse(sessionStorage.getItem('currentService'))
this.getData() this.getData()
this.getTableOptions()
} }
} }
</script> </script>
<style lang="sass" scoped> <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 ::v-deep .el-table__body-wrapper.is-scrolling-none
max-height: 224px !important max-height: 224px !important
min-height: 100px min-height: 100px
...@@ -444,6 +844,9 @@ export default { ...@@ -444,6 +844,9 @@ export default {
.tags .tags
display: flex display: flex
flex-wrap: wrap flex-wrap: wrap
.select-tag
max-height: none
overflow: visible
.list-item-input .list-item-input
margin-right: 20px margin-right: 20px
.list-item-icon .list-item-icon
...@@ -513,7 +916,9 @@ export default { ...@@ -513,7 +916,9 @@ export default {
.operate-text-delete .operate-text-delete
color: #F56C6C color: #F56C6C
.preview-text .preview-text
position: relative
line-height: 28px line-height: 28px
display: inline-block
.preview-img .preview-img
vertical-align: bottom vertical-align: bottom
margin-left: 10px margin-left: 10px
...@@ -529,6 +934,9 @@ export default { ...@@ -529,6 +934,9 @@ export default {
height: 28px height: 28px
::v-deep .el-input__inner ::v-deep .el-input__inner
height: 28px height: 28px
.field-select
width: 200px !important
height: 28px
.ak-sk .ak-sk
line-height: 32px line-height: 32px
.param-template-text .param-template-text
......
src/views/DeviceList/deviceService/components/SendOrder.vue
...@@ -15,8 +15,25 @@ ...@@ -15,8 +15,25 @@
:outerLoading="loadingStatus" :outerLoading="loadingStatus"
:pagination="false" :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"> <div slot='description' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.description" placement="top">
<span>{{ simplify(row.description, 16) }}</span> <span>{{ simplify(row.description, 16) }}</span>
</el-tooltip>
</div> </div>
<div slot='operate'> <div slot='operate'>
<span class="operate-text">{{ '-'}}</span> <span class="operate-text">{{ '-'}}</span>
...@@ -100,35 +117,19 @@ export default { ...@@ -100,35 +117,19 @@ export default {
name: 'sendOrder', name: 'sendOrder',
}, },
], ],
// definitions: [
// {
// label: '字段',
// type: 'slot',
// slotName: 'paramsSlot',
// }, {
// label: '类型',
// type: 'slot',
// slotName: 'typeSlot',
// }, {
// label: '值',
// type: 'slot',
// slotName: 'valueSlot'
// }, {
// label: '操作',
// type: 'slot',
// slotName: 'operate',
// },
// ],
definitions: [ definitions: [
{ {
label: '服务', label: '服务',
render: 'name' type: 'slot',
slotName: 'nameSlot',
}, { }, {
label: '编号', label: '编号',
render: 'potuid' type: 'slot',
slotName: 'potuidSlot',
}, { }, {
label: '端口', label: '端口',
render: 'port' type: 'slot',
slotName: 'portSlot',
}, { }, {
label: '描述', label: '描述',
type: 'slot', type: 'slot',
...@@ -136,8 +137,8 @@ export default { ...@@ -136,8 +137,8 @@ export default {
}, { }, {
label: '操作', label: '操作',
type: 'slot', type: 'slot',
slotName: 'operate', slotName: 'operate'
}, }
], ],
} }
}, },
...@@ -210,6 +211,11 @@ export default { ...@@ -210,6 +211,11 @@ export default {
.content-item-one .content-item-one
width: 609px !important width: 609px !important
height: 100px height: 100px
::v-deep.el-textarea__inner
font-size: 14px
color: #333
font-family: PingFangSC-Regular, PingFang SC
font-weight: 400
.content-item-title .content-item-title
margin: auto 0 margin: auto 0
width: 108px width: 108px
......
src/views/DeviceList/deviceService/components/SendRequest.vue
...@@ -15,8 +15,25 @@ ...@@ -15,8 +15,25 @@
:outerLoading="loadingStatus" :outerLoading="loadingStatus"
:pagination="false" :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"> <div slot='description' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.description" placement="top">
<span>{{ simplify(row.description, 16) }}</span> <span>{{ simplify(row.description, 16) }}</span>
</el-tooltip>
</div> </div>
<div slot='operate'> <div slot='operate'>
<span class="operate-text">{{ '-'}}</span> <span class="operate-text">{{ '-'}}</span>
...@@ -176,13 +193,16 @@ export default { ...@@ -176,13 +193,16 @@ export default {
definitions: [ definitions: [
{ {
label: '服务', label: '服务',
render: 'name' type: 'slot',
slotName: 'nameSlot',
}, { }, {
label: '编号', label: '编号',
render: 'potuid' type: 'slot',
slotName: 'potuidSlot',
}, { }, {
label: '端口', label: '端口',
render: 'port' type: 'slot',
slotName: 'portSlot',
}, { }, {
label: '描述', label: '描述',
type: 'slot', type: 'slot',
...@@ -205,6 +225,7 @@ export default { ...@@ -205,6 +225,7 @@ export default {
methods: { methods: {
rTimeMin, rTimeMin,
async send() { async send() {
this.buttonLoading = true
const currentService = JSON.parse(sessionStorage.getItem('currentService')) const currentService = JSON.parse(sessionStorage.getItem('currentService'))
const headers = this.headTokenList.map(item => { const headers = this.headTokenList.map(item => {
return { return {
...@@ -212,9 +233,14 @@ export default { ...@@ -212,9 +233,14 @@ export default {
keyvalue: item.value.value.trim() keyvalue: item.value.value.trim()
} }
}) })
console.log(typeof this.bodyValue, 'type') let body
const body = JSON.parse(this.bodyValue) try {
this.buttonLoading = true body = JSON.parse(this.bodyValue)
} catch (e) {
this.$message.error('请输入JSON格式的Body数据')
this.buttonLoading = false
return null
}
const res = await postServiceRequest({ const res = await postServiceRequest({
potuid: currentService.potuid, potuid: currentService.potuid,
method: this.requestType, method: this.requestType,
...@@ -222,10 +248,10 @@ export default { ...@@ -222,10 +248,10 @@ export default {
headers: headers, headers: headers,
body: body body: body
}) })
this.buttonLoading = false
if (res && res.data) { if (res && res.data) {
// this.resValue = res.data this.resValue = JSON.stringify(res.data)
} }
this.buttonLoading = false
}, },
handleClose(tag) { handleClose(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1) this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
...@@ -262,7 +288,7 @@ export default { ...@@ -262,7 +288,7 @@ export default {
this.$set(this.headTokenList, index, row) this.$set(this.headTokenList, index, row)
}, },
addRow() { 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) this.headTokenList.push(newRow)
}, },
async getData() { async getData() {
...@@ -310,6 +336,11 @@ export default { ...@@ -310,6 +336,11 @@ export default {
.content-item-body .content-item-body
width: 609px !important width: 609px !important
height: 100px height: 100px
::v-deep.el-textarea__inner
font-size: 14px
color: #333
font-family: PingFangSC-Regular, PingFang SC
font-weight: 400
.content-item-title .content-item-title
margin: 0 0 margin: 0 0
width: 108px width: 108px
...@@ -338,4 +369,7 @@ export default { ...@@ -338,4 +369,7 @@ export default {
&:hover &:hover
background-color: #ecf5ff background-color: #ecf5ff
color: #409EFF color: #409EFF
.pointer
min-height: 28px
min-width: 80px
</style> </style>
src/views/DeviceList/deviceService/deviceServiceIndex.vue
...@@ -18,14 +18,18 @@ ...@@ -18,14 +18,18 @@
:pagination="false" :pagination="false"
> >
<div slot='codeSlot' slot-scope="row"> <div slot='codeSlot' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.deviceid" placement="top">
<span>{{ simplify(row.deviceid, 3) }}</span> <span>{{ simplify(row.deviceid, 3) }}</span>
</el-tooltip>
<i class="iconfont icon-fuzhi icon-fuzhi-text" @click="copyText(row.deviceid)"></i> <i class="iconfont icon-fuzhi icon-fuzhi-text" @click="copyText(row.deviceid)"></i>
</div> </div>
<div slot='status' slot-scope="row" class="status"> <div slot='status' slot-scope="row" class="status">
<span class="circleStatus" :style="{color: getStatusColor(row.state)}">{{ getStatusText(row.state) }}</span> <span class="circleStatus" :style="{color: getStatusColor(row.state)}">{{ getStatusText(row.state) }}</span>
</div> </div>
<div slot='structureSlot' slot-scope="row"> <div slot='structureSlot' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.structure" placement="top">
<span>{{ simplify(row.structure, 6) }}</span> <span>{{ simplify(row.structure, 6) }}</span>
</el-tooltip>
</div> </div>
<div slot='registerTimeSlot' slot-scope="row"> <div slot='registerTimeSlot' slot-scope="row">
<span>{{ (row.register_date) }}</span> <span>{{ (row.register_date) }}</span>
...@@ -35,7 +39,7 @@ ...@@ -35,7 +39,7 @@
<!-- 必须要套一层 --> <!-- 必须要套一层 -->
<div> <div>
<template v-for="(item, index) in row.tags"> <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> </template>
<span v-if="(row.tags && row.tags.length) > 10">共: {{(row.tags && row.tags.length) ? row.tags.length : 0}} 条</span> <span v-if="(row.tags && row.tags.length) > 10">共: {{(row.tags && row.tags.length) ? row.tags.length : 0}} 条</span>
</div> </div>
...@@ -53,7 +57,9 @@ ...@@ -53,7 +57,9 @@
</el-tooltip> </el-tooltip>
</div> </div>
<div slot='systemSlot' slot-scope="row"> <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>
<div slot='operate' slot-scope="row"> <div slot='operate' slot-scope="row">
<span class="operate-text" @click="detail(row.deviceid)">{{'详情'}}</span> <span class="operate-text" @click="detail(row.deviceid)">{{'详情'}}</span>
...@@ -62,7 +68,7 @@ ...@@ -62,7 +68,7 @@
</div> </div>
<div class="page-content"> <div class="page-content">
<div class="table-list"> <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]> <template v-slot:[activeTab]>
<components :is="activeTab" ref="dataTable"></components> <components :is="activeTab" ref="dataTable"></components>
</template> </template>
...@@ -181,15 +187,18 @@ export default { ...@@ -181,15 +187,18 @@ export default {
}, { }, {
label: '注册时间', label: '注册时间',
type: 'slot', type: 'slot',
slotName: 'registerTimeSlot' slotName: 'registerTimeSlot',
width: 145
}, { }, {
label: '标签', label: '标签',
type: 'slot', type: 'slot',
slotName: 'tagsSlot' slotName: 'tagsSlot',
width: 95
}, { }, {
label: '服务', label: '服务',
type: 'slot', type: 'slot',
slotName: 'servicesSlot' slotName: 'servicesSlot',
width: 95
}, { }, {
label: '操作', label: '操作',
type: 'slot', type: 'slot',
...@@ -201,6 +210,24 @@ export default { ...@@ -201,6 +210,24 @@ export default {
}, },
methods: { methods: {
rTimeMin, 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() { async getServiceParams() {
const res = await getServiceParams(this.serviceId) const res = await getServiceParams(this.serviceId)
}, },
...@@ -224,6 +251,21 @@ export default { ...@@ -224,6 +251,21 @@ export default {
if (this.$store.getters.currentDevice !== '') { if (this.$store.getters.currentDevice !== '') {
sessionStorage.setItem('currentDevice', 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.currentDeviceId = sessionStorage.getItem('currentDevice')
this.getData() this.getData()
}, },
......
src/views/DeviceList/index.vue
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<div class="flex-left"> <div class="flex-left">
<div class="search-item"> <div class="search-item">
<span class="search-title">状态:</span> <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="1" class="check-title">在线</el-checkbox>
<el-checkbox :label="0" class="check-title">离线</el-checkbox> <el-checkbox :label="0" class="check-title">离线</el-checkbox>
<el-checkbox :label="2" class="check-title">异常</el-checkbox> <el-checkbox :label="2" class="check-title">异常</el-checkbox>
...@@ -17,9 +17,11 @@ ...@@ -17,9 +17,11 @@
<div v-if="!isCollapse"> <div v-if="!isCollapse">
<div class="search-item"> <div class="search-item">
<span class="search-title">架构:</span> <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> <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>
<div class="search-item no-wrap"> <div class="search-item no-wrap">
<span class="search-title">注册时间:</span> <span class="search-title">注册时间:</span>
...@@ -29,7 +31,7 @@ ...@@ -29,7 +31,7 @@
:default-time="['00:00:00', '23:59:59']" :default-time="['00:00:00', '23:59:59']"
type="datetimerange" type="datetimerange"
format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"
value-format="timestamp" value-format="yyyy-MM-dd HH:mm:ss"
size="small" size="small"
style="padding-top:2px" style="padding-top:2px"
prefix-icon=' ' prefix-icon=' '
...@@ -37,7 +39,9 @@ ...@@ -37,7 +39,9 @@
start-placeholder="选择时间" start-placeholder="选择时间"
v-model="search.registerTime" v-model="search.registerTime"
end-placeholder="选择时间" end-placeholder="选择时间"
suffix-icon="el-icon-date"> suffix-icon="el-icon-date"
@change="handleChangeSearch"
>
</el-date-picker> </el-date-picker>
<span class="search-title">上线时间:</span> <span class="search-title">上线时间:</span>
<el-date-picker <el-date-picker
...@@ -47,13 +51,15 @@ ...@@ -47,13 +51,15 @@
:default-time="['00:00:00', '23:59:59']" :default-time="['00:00:00', '23:59:59']"
type="datetimerange" type="datetimerange"
format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"
value-format="timestamp" value-format="yyyy-MM-dd HH:mm:ss"
size="small" size="small"
style="padding-top:2px" style="padding-top:2px"
prefix-icon=' ' prefix-icon=' '
range-separator="至" range-separator="至"
start-placeholder="选择时间" start-placeholder="选择时间"
end-placeholder="选择时间"> end-placeholder="选择时间"
@change="handleChangeSearch"
>
</el-date-picker> </el-date-picker>
</div> </div>
<div class="search-item"> <div class="search-item">
...@@ -66,6 +72,8 @@ ...@@ -66,6 +72,8 @@
filterable filterable
:options="tagList" :options="tagList"
v-model="search.tags" v-model="search.tags"
@change="handleChangeSearch"
clearable
> >
</st-select> </st-select>
<span class="search-title">服务:</span> <span class="search-title">服务:</span>
...@@ -77,6 +85,8 @@ ...@@ -77,6 +85,8 @@
filterable filterable
:options="serviceList" :options="serviceList"
v-model="search.services" v-model="search.services"
@change="handleChangeSearch"
clearable
> >
</st-select> </st-select>
</div> </div>
...@@ -92,12 +102,12 @@ ...@@ -92,12 +102,12 @@
</div> </div>
</div> </div>
<div class="page-content"> <div class="page-content">
<div class="content-header flex-right-content"> <!-- <div class="content-header flex-right-content">
<nameFilter <nameFilter
placeholder="请输入搜索内容" placeholder="请输入搜索内容"
@startSearch="startSearch"> @startSearch="startSearch">
</nameFilter> </nameFilter>
</div> </div> -->
<div class="table-list"> <div class="table-list">
<div class="list-content"> <div class="list-content">
<st-table <st-table
...@@ -112,14 +122,18 @@ ...@@ -112,14 +122,18 @@
:childOptions="childDefinitions" :childOptions="childDefinitions"
> >
<div slot='codeSlot' slot-scope="row"> <div slot='codeSlot' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.deviceid" placement="top">
<span>{{ simplify(row.deviceid, 3) }}</span> <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>
<div slot='status' slot-scope="row" class="status"> <div slot='status' slot-scope="row" class="status">
<span class="circleStatus" :style="{color: getStatusColor(row.state)}">{{ getStatusText(row.state) }}</span> <span class="circleStatus" :style="{color: getStatusColor(row.state)}">{{ getStatusText(row.state) }}</span>
</div> </div>
<div slot='structureSlot' slot-scope="row"> <div slot='structureSlot' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.structure" placement="top">
<span>{{ simplify(row.structure, 6) }}</span> <span>{{ simplify(row.structure, 6) }}</span>
</el-tooltip>
</div> </div>
<div slot='registerTimeSlot' slot-scope="row"> <div slot='registerTimeSlot' slot-scope="row">
<span>{{ (row.register_date) }}</span> <span>{{ (row.register_date) }}</span>
...@@ -129,7 +143,7 @@ ...@@ -129,7 +143,7 @@
<!-- 必须要套一层 --> <!-- 必须要套一层 -->
<div> <div>
<template v-for="(item, index) in row.tags"> <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> </template>
<span v-if="(row.tags && row.tags.length) > 10">共: {{(row.tags && row.tags.length) ? row.tags.length : 0}} 条</span> <span v-if="(row.tags && row.tags.length) > 10">共: {{(row.tags && row.tags.length) ? row.tags.length : 0}} 条</span>
</div> </div>
...@@ -147,28 +161,38 @@ ...@@ -147,28 +161,38 @@
</el-tooltip> </el-tooltip>
</div> </div>
<div slot='systemSlot' slot-scope="row"> <div slot='systemSlot' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.structure" placement="top">
<span>{{ simplify(row.system, 7) }}</span> <span>{{ simplify(row.system, 7) }}</span>
</el-tooltip>
</div> </div>
<div slot='operate' slot-scope="row"> <div slot='operate' slot-scope="row">
<span class="operate-text" @click="detail(row.deviceid)">{{ '详情 '}}</span> <span class="operate-text" @click="detail(row.deviceid)">{{ '详情 '}}</span>
</div> </div>
<!-- eslint-disable-next-line --> <!-- eslint-disable-next-line -->
<div slot='childServiceSlot' slot-scope="row"> <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>
<div slot='childCodeSlot' slot-scope="row"> <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>
<div slot='portSlot' slot-scope="row"> <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>
<div slot='descSlot' slot-scope="row"> <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>
<div slot='childOperate' slot-scope="row"> <div slot='childOperate' slot-scope="row">
<span class="operate-text" @click="seeServiceParams(row)">{{ '查看参数' }}</span> <span class="operate-text" @click="seeServiceParams(row)">{{ '查看参数' }}</span>
<span class="operate-text" @click="sendReq(row.id)">{{ '发送请求' }}</span> <span class="operate-text" @click="sendReq(row)">{{ '发送请求' }}</span>
<span class="operate-text" @click="sendOrder(row.id)">{{ '发送指令' }}</span> <span class="operate-text" @click="sendOrder(row)">{{ '发送指令' }}</span>
</div> </div>
</st-table> </st-table>
</div> </div>
...@@ -185,6 +209,7 @@ import { getDevice, getDeviceService, getTag } from '@/axios' ...@@ -185,6 +209,7 @@ import { getDevice, getDeviceService, getTag } from '@/axios'
export default { export default {
data() { data() {
return { return {
ifBorder: false,
// 当前页 // 当前页
pi: 0, pi: 0,
// 当前页size // 当前页size
...@@ -257,11 +282,13 @@ export default { ...@@ -257,11 +282,13 @@ export default {
slotName: 'systemSlot' slotName: 'systemSlot'
}, { }, {
label: 'IP', label: 'IP',
render: 'ip' render: 'ip',
width: 95
}, { }, {
label: '注册时间', label: '注册时间',
type: 'slot', type: 'slot',
slotName: 'registerTimeSlot' slotName: 'registerTimeSlot',
width: 140
}, { }, {
label: '标签', label: '标签',
type: 'slot', type: 'slot',
...@@ -269,7 +296,8 @@ export default { ...@@ -269,7 +296,8 @@ export default {
}, { }, {
label: '服务', label: '服务',
type: 'slot', type: 'slot',
slotName: 'servicesSlot' slotName: 'servicesSlot',
width: 90
}, { }, {
label: '操作', label: '操作',
type: 'slot', type: 'slot',
...@@ -329,17 +357,38 @@ export default { ...@@ -329,17 +357,38 @@ export default {
methods: { methods: {
rTimeMin, rTimeMin,
copyText, 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) { startSearch(value) {
this.getData() 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) { seeServiceParams(row) {
this.$store.commit('changeCurrentDevice', row.deviceId) this.setDeviceServiceStoreInfo(row.deviceId, row, 'device-service', 0)
this.$store.commit('changeCurrentService', row)
this.$router.push({ name: 'device-service' })
}, },
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() { collapseSearch() {
this.isCollapse = !this.isCollapse this.isCollapse = !this.isCollapse
...@@ -359,6 +408,7 @@ export default { ...@@ -359,6 +408,7 @@ export default {
this.search = { this.search = {
checkList: [] checkList: []
} }
this.getData()
}, },
// 跳转到设备详情页面 // 跳转到设备详情页面
detail(deviceid) { detail(deviceid) {
...@@ -373,9 +423,12 @@ export default { ...@@ -373,9 +423,12 @@ export default {
structure: this.search.structure, structure: this.search.structure,
system: this.search.system, system: this.search.system,
register_date: this.search.registerTime && this.search.registerTime.length ? this.search.registerTime[0] : '', 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_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, tag: this.search.tags,
service: this.search.services service: this.search.services,
ip: this.search.ip
}) })
if (res && res.data) { if (res && res.data) {
this.tokenList = JSON.parse(JSON.stringify(res.data.data.devices)) this.tokenList = JSON.parse(JSON.stringify(res.data.data.devices))
...@@ -418,6 +471,9 @@ export default { ...@@ -418,6 +471,9 @@ export default {
// 监听route的改变进行pi ,ps的改变 // 监听route的改变进行pi ,ps的改变
'$route.query': { '$route.query': {
handler(newName, oldName) { handler(newName, oldName) {
this.pi = newName.page_index - 1
this.ps = newName.page_size
this.getData()
}, },
deep: true, deep: true,
} }
...@@ -429,9 +485,9 @@ export default { ...@@ -429,9 +485,9 @@ export default {
}, },
destroyed() { destroyed() {
}, },
components: { // components: {
nameFilter: () => import(/* webpackChunkName: "container" */ '@/components/list-filter/name.vue'), // nameFilter: () => import(/* webpackChunkName: "container" */ '@/components/list-filter/name.vue'),
} // }
} }
</script> </script>
......
src/views/ServiceList/index.vue
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<div class="flex-left"> <div class="flex-left">
<div class="search-item"> <div class="search-item">
<span class="search-title">状态:</span> <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="1" class="check-title">在线</el-checkbox>
<el-checkbox :label="0" class="check-title">离线</el-checkbox> <el-checkbox :label="0" class="check-title">离线</el-checkbox>
<el-checkbox :label="2" class="check-title">异常</el-checkbox> <el-checkbox :label="2" class="check-title">异常</el-checkbox>
...@@ -17,9 +17,11 @@ ...@@ -17,9 +17,11 @@
<div v-if="!isCollapse"> <div v-if="!isCollapse">
<div class="search-item"> <div class="search-item">
<span class="search-title">架构:</span> <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> <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>
<div class="search-item no-wrap"> <div class="search-item no-wrap">
<span class="search-title">注册时间:</span> <span class="search-title">注册时间:</span>
...@@ -29,7 +31,7 @@ ...@@ -29,7 +31,7 @@
:default-time="['00:00:00', '23:59:59']" :default-time="['00:00:00', '23:59:59']"
type="datetimerange" type="datetimerange"
format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"
value-format="timestamp" value-format="yyyy-MM-dd HH:mm:ss"
size="small" size="small"
style="padding-top:2px" style="padding-top:2px"
prefix-icon=' ' prefix-icon=' '
...@@ -37,7 +39,9 @@ ...@@ -37,7 +39,9 @@
start-placeholder="选择时间" start-placeholder="选择时间"
v-model="search.registerTime" v-model="search.registerTime"
end-placeholder="选择时间" end-placeholder="选择时间"
suffix-icon="el-icon-date"> suffix-icon="el-icon-date"
@change="handleChangeSearch"
>
</el-date-picker> </el-date-picker>
<span class="search-title">上线时间:</span> <span class="search-title">上线时间:</span>
<el-date-picker <el-date-picker
...@@ -47,13 +51,15 @@ ...@@ -47,13 +51,15 @@
:default-time="['00:00:00', '23:59:59']" :default-time="['00:00:00', '23:59:59']"
type="datetimerange" type="datetimerange"
format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"
value-format="timestamp" value-format="yyyy-MM-dd HH:mm:ss"
size="small" size="small"
style="padding-top:2px" style="padding-top:2px"
prefix-icon=' ' prefix-icon=' '
range-separator="至" range-separator="至"
start-placeholder="选择时间" start-placeholder="选择时间"
end-placeholder="选择时间"> end-placeholder="选择时间"
@change="handleChangeSearch"
>
</el-date-picker> </el-date-picker>
</div> </div>
<div class="search-item"> <div class="search-item">
...@@ -66,6 +72,7 @@ ...@@ -66,6 +72,7 @@
filterable filterable
:options="tagList" :options="tagList"
v-model="search.tags" v-model="search.tags"
@change="handleChangeSearch"
> >
</st-select> </st-select>
<span class="search-title">服务:</span> <span class="search-title">服务:</span>
...@@ -77,6 +84,7 @@ ...@@ -77,6 +84,7 @@
filterable filterable
:options="serviceList" :options="serviceList"
v-model="search.services" v-model="search.services"
@change="handleChangeSearch"
> >
</st-select> </st-select>
</div> </div>
...@@ -92,12 +100,12 @@ ...@@ -92,12 +100,12 @@
</div> </div>
</div> </div>
<div class="page-content"> <div class="page-content">
<div class="content-header flex-right-content"> <!-- <div class="content-header flex-right-content">
<nameFilter <nameFilter
placeholder="请输入搜索内容" placeholder="请输入搜索内容"
@startSearch="startSearch"> @startSearch="startSearch">
</nameFilter> </nameFilter>
</div> </div> -->
<div class="table-list"> <div class="table-list">
<div class="list-content"> <div class="list-content">
<st-table <st-table
...@@ -111,14 +119,18 @@ ...@@ -111,14 +119,18 @@
:doubleTable="false" :doubleTable="false"
> >
<div slot='codeSlot' slot-scope="row"> <div slot='codeSlot' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.potuid" placement="top">
<span>{{ simplify(row.potuid, 3) }}</span> <span>{{ simplify(row.potuid, 3) }}</span>
</el-tooltip>
<i class="iconfont icon-fuzhi icon-fuzhi-text" @click="copyText(row.potuid)"></i> <i class="iconfont icon-fuzhi icon-fuzhi-text" @click="copyText(row.potuid)"></i>
</div> </div>
<div slot='status' slot-scope="row"> <div slot='status' slot-scope="row">
<span class="circleStatus" :style="{color: getStatusColor(row.state)}">{{ getStatusText(row.state) }}</span> <span class="circleStatus" :style="{color: getStatusColor(row.state)}">{{ getStatusText(row.state) }}</span>
</div> </div>
<div slot='structureSlot' slot-scope="row"> <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>
<div slot='registerTimeSlot' slot-scope="row"> <div slot='registerTimeSlot' slot-scope="row">
<span>{{ (row.register_date) }}</span> <span>{{ (row.register_date) }}</span>
...@@ -128,7 +140,7 @@ ...@@ -128,7 +140,7 @@
<!-- 必须要套一层 --> <!-- 必须要套一层 -->
<div> <div>
<template v-for="(item, index) in row.tags"> <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> </template>
<span v-if="(row.tags && row.tags.length) > 10">共: {{(row.tags && row.tags.length) ? row.tags.length : 0}} 条</span> <span v-if="(row.tags && row.tags.length) > 10">共: {{(row.tags && row.tags.length) ? row.tags.length : 0}} 条</span>
</div> </div>
...@@ -136,17 +148,24 @@ ...@@ -136,17 +148,24 @@
</div> </div>
<div slot='servicesSlot' slot-scope="row"> <div slot='servicesSlot' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.name" placement="top"> <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> </el-tooltip>
</div> </div>
<div slot='systemSlot' slot-scope="row"> <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>
<div slot='operate' slot-scope="row"> <div slot='operate' slot-scope="row">
<span class="operate-text" @click="detail(row.id)">{{ '详情 '}}</span> <span class="operate-text" @click="detail(row.id)">{{ '详情 '}}</span>
<span class="operate-text" @click="seeServiceParams(row.id)">{{ '查看参数' }}</span> <span class="operate-text" @click="seeServiceParams(row)">{{ '查看参数' }}</span>
<span class="operate-text" @click="sendReq(row.id)">{{ '发送请求' }}</span> <span class="operate-text" @click="sendReq(row)">{{ '发送请求' }}</span>
<span class="operate-text" @click="sendOrder(row.id)">{{ '发送指令' }}</span> <span class="operate-text" @click="sendOrder(row)">{{ '发送指令' }}</span>
</div> </div>
</st-table> </st-table>
</div> </div>
...@@ -163,6 +182,7 @@ import { getService, getDeviceService, getTag } from '@/axios' ...@@ -163,6 +182,7 @@ import { getService, getDeviceService, getTag } from '@/axios'
export default { export default {
data() { data() {
return { return {
ifBorder: false,
// 当前页 // 当前页
pi: 0, pi: 0,
// 当前页size // 当前页size
...@@ -240,22 +260,23 @@ export default { ...@@ -240,22 +260,23 @@ export default {
slotName: 'systemSlot' slotName: 'systemSlot'
}, { }, {
label: 'IP', label: 'IP',
render: 'ip' type: 'slot',
slotName: 'ipSlot'
}, { }, {
label: '注册时间', label: '注册时间',
type: 'slot', type: 'slot',
slotName: 'registerTimeSlot', slotName: 'registerTimeSlot',
width: 110 width: 190
}, { }, {
label: '标签', label: '标签',
type: 'slot', type: 'slot',
slotName: 'tagsSlot', slotName: 'tagsSlot',
width: 120 width: 130
}, { }, {
label: '操作', label: '操作',
type: 'slot', type: 'slot',
slotName: 'operate', slotName: 'operate',
width: 200 width: 310
}, },
], ],
/* 搜索栏条件 */ /* 搜索栏条件 */
...@@ -311,6 +332,19 @@ export default { ...@@ -311,6 +332,19 @@ export default {
methods: { methods: {
rTimeMin, rTimeMin,
copyText, 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) { startSearch(value) {
this.getData() this.getData()
}, },
...@@ -323,8 +357,11 @@ export default { ...@@ -323,8 +357,11 @@ export default {
system: this.search.system, system: this.search.system,
register_date: this.search.registerTime && this.search.registerTime.length ? this.search.registerTime[0] : '', 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] : '', 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, tag: this.search.tags,
service: this.search.services service: this.search.services,
ip: this.search.ip
}) })
if (res && res.data) { if (res && res.data) {
this.tokenList = JSON.parse(JSON.stringify(res.data.data.services)) this.tokenList = JSON.parse(JSON.stringify(res.data.data.services))
...@@ -356,14 +393,22 @@ export default { ...@@ -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) { seeServiceParams(row) {
this.$store.commit('changeCurrentDevice', row.deviceId) this.setDeviceServiceStoreInfo(row.deviceid, row, 'device-service', 0)
this.$store.commit('changeCurrentService', row)
this.$router.push({ name: 'device-service' })
}, },
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() { collapseSearch() {
this.isCollapse = !this.isCollapse this.isCollapse = !this.isCollapse
...@@ -383,6 +428,7 @@ export default { ...@@ -383,6 +428,7 @@ export default {
this.search = { this.search = {
checkList: [] checkList: []
} }
this.getData()
}, },
// 跳转到设备详情页面 // 跳转到设备详情页面
detail(deviceid) { detail(deviceid) {
...@@ -394,6 +440,9 @@ export default { ...@@ -394,6 +440,9 @@ export default {
// 监听route的改变进行pi ,ps的改变 // 监听route的改变进行pi ,ps的改变
'$route.query': { '$route.query': {
handler(newName, oldName) { handler(newName, oldName) {
this.pi = newName.page_index - 1
this.ps = newName.page_size
this.getData()
}, },
deep: true, deep: true,
} }
...@@ -406,7 +455,7 @@ export default { ...@@ -406,7 +455,7 @@ export default {
destroyed() { destroyed() {
}, },
components: { components: {
nameFilter: () => import(/* webpackChunkName: "container" */ '@/components/list-filter/name.vue'), // nameFilter: () => import(/* webpackChunkName: "container" */ '@/components/list-filter/name.vue'),
} }
} }
</script> </script>
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!