Skip to content

seeta-device / deviceManage

Go to a project
Commit 24fbbb4f by 李俊
Options

feat: 前端页面 设备和服务部分搭建完成

1 parent 6aa710ea
Expand all
Inline Side-by-side
Showing with 710 additions and 108 deletions
package-lock.json
......@@ -1871,63 +1871,6 @@
"integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
"dev": true
},
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"ssri": {
"version": "8.0.1",
"resolved": "https://registry.nlark.com/ssri/download/ssri-8.0.1.tgz?cache=0&sync_timestamp=1621364668574&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fssri%2Fdownload%2Fssri-8.0.1.tgz",
......@@ -1936,28 +1879,6 @@
"requires": {
"minipass": "^3.1.1"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.4.1",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.4.1.tgz",
"integrity": "sha512-nL1bDhfMAZgTVmVkOXQaK/WJa9zFDLM9vKHbh5uGv6HeH1TmZrXMWUEVhUrACT38XPhXM4Awtjj25EvhChEgXw==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
}
}
}
},
......@@ -13804,6 +13725,87 @@
}
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.5.0",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.5.0.tgz",
"integrity": "sha512-WXh+7AgFxGTgb5QAkQtFeUcHNIEq3PGVQ8WskY5ZiFbWBkOwcCPRs4w/2tVyTbh2q6TVRlO3xfvIukUtjsu62A==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"vue-property-decorator": {
"version": "9.1.2",
"resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-9.1.2.tgz",
......
src/App.vue
......@@ -25,7 +25,7 @@ export default {
<style>
#app {
font-family: PingFangSC-Regular, PingFang SC, Avenir, Helvetica, Arial, sans-serif;
font-family: PingFangSC-Regular, 微软雅黑;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
......
src/components/index.js
......@@ -14,6 +14,7 @@ import formTable from './form/index.vue'
// import ajaxButton from './form/ajax-button.vue'
import seetaInput from './seeta-ui/seeta-input.vue'
import seetaButton from './seeta-ui/seeta-button.vue'
// import seetaCheckBox from './seeta-ui/seeta-checkbox.vue'
// import seetaCollapse from './seeta-ui/seeta-collapse.vue'
import seetaForm from './seeta-ui/seeta-form/form.vue'
import seetaFormItem from './seeta-ui/seeta-form/form-item.vue'
......@@ -29,6 +30,7 @@ import seetaCrumb from './seeta-ui/seeta-crumb.vue'
// import name from './list-filter/name.vue'
// import time from './list-filter/time.vue'
import puzzlevalidator from './PuzzleValidator'
// import nameFilter from './list-filter/name.vue'
import Vue from 'vue'
import datePicker from './calendar/index.vue'
......@@ -41,6 +43,8 @@ import datePicker from './calendar/index.vue'
// Vue.component('v-select', select)
Vue.component('v-textarea', textarea)
Vue.component('dropdown', dropdown)
// Vue.component('st-checkbox', seetaCheckBox)
// Vue.component('nameFilter', nameFilter)
// Vue.component('code-editor', codeEditor)
// Vue.component('tabs', tabs)
// Vue.component('data-empty', dataEmpty)
......
src/components/list-filter/name.vue
......@@ -7,7 +7,8 @@
:placeholder="placeholder",
@keyup.enter="search"
)
.iconfont.icon-search(@click="search")
i.el-input__icon.el-icon-search.icon-search(@click="search")
//- .iconfont.icon-search(@click="search")
</template>
<script lang="ts">
import { Vue, Prop, Component, Watch } from 'vue-property-decorator'
......@@ -25,7 +26,7 @@ export default class nameFilter extends Vue {
search() {
const routeQuery = this.$route.query
// 避免重复搜索
if (this.name === routeQuery.name) return
if (this.name === routeQuery.name || this.name === '') return
const query = {
...routeQuery,
name: this.name,
......@@ -37,12 +38,21 @@ export default class nameFilter extends Vue {
</script>
<style lang="sass" scoped>
.search
height: 32px
width: 240px
position: relative
display: inline-block
.search-input
width: 100%
padding-right: 35px
padding: 5.5px 35px 5.5px 12px
font-size: 14px
font-family: PingFangSC-Regular
color: #333333
letter-spacing: 0
&::-webkit-input-placeholder
font-family: PingFangSC-Regular
font-size: 14px
color: #999999
.icon-search
position: absolute
right: 0
......
src/components/popup.vue
......@@ -361,13 +361,13 @@ export default {
padding: 13px 20px
font-size: 16px
border-bottom: 1px solid $--dialog-header-border
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
font-weight: 400
color: #3C3D40
line-height: 22px
.popup-body
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
font-weight: 400
color: #666666
line-height: 20px
......
src/components/seeta-ui/seeta-form/form-item.vue
......@@ -53,7 +53,7 @@ export default {
::v-deep .el-form-item__label
padding: 0 20px 0 0
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
font-weight: 400
color: #666666
</style>
src/components/seeta-ui/seeta-input.vue
......@@ -23,11 +23,12 @@ export default {
::v-deep input[type=text], ::v-deep input[type=password], ::v-deep input[type=number], ::v-deep textarea
font-size: 14px
color: #333
font-family: PingFangSC-Regular, PingFang SC
font-weight: 400
font-family: PingFangSC-Regular, 微软雅黑
letter-spacing: 0
&::placeholder
color: #999999
font-size: 14px
letter-spacing: 0
.el-textarea.el-input--small
::v-deep .el-textarea__inner
border-radius: 2px
......
src/components/seeta-ui/seeta-select.vue
......@@ -40,13 +40,13 @@ export default class seetaSelect extends Vue {
.el-select-dropdown
.el-select-dropdown__item
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
font-weight: 400
color: #333333
.el-select-dropdown__item.selected
font-weight: normal
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
color: #409EFF
.el-select__tags
.el-icon-close
......@@ -57,13 +57,13 @@ export default class seetaSelect extends Vue {
color: #999999 !important
.el-select__tags-text
font-size: 12px !important
font-family: PingFangSC-Regular, PingFang SC !important
font-family: PingFangSC-Regular, 微软雅黑 !important
font-weight: 400 !important
color: #666666 !important
line-height: 17px !important
.el-select
.el-input__inner
font-size: 14px !important
font-family: PingFangSC-Regular, PingFang SC !important
font-family: PingFangSC-Regular, 微软雅黑 !important
font-weight: 400 !important
</style>
src/components/seeta-ui/seeta-table/index.vue
......@@ -12,6 +12,74 @@
@filter-change="filterChange"
@sort-change="sortChange"
>
<el-table-column type="expand" v-if="doubleTable" class="expend-column">
<!-- eslint-disable-next-line -->
<template slot-scope="props">
<el-table
stripe
:data="childTableData">
<template
v-for="col in childOptions">
<!-- 插槽 -->
<el-table-column
header-align="left"
align="left"
v-if="col.type === 'slot'"
:key="col.label"
:label="col.label"
:min-width="col.width? col.width : ''"
:column-key="col.filterKey"
:filters="handleFilters(col.filterList)"
:filter-multiple="false"
filter-placement="bottom"
:sortable="!!col.sortable">
<template slot-scope="scope">
<div
v-if="(col.slotName === 'status' || col.slotName === 'state' || col.slotName === 'api_status')&& col.animation &&col.animation(scope.row)"
class="status-icon-animation"
:style="{
background: col.statusColor && col.statusColor(scope.row)
}">
</div>
<div
v-else-if="col.slotName === 'status' || col.slotName === 'state' ||col.slotName === 'api_status'"
class="status-icon"
:style="{
background: col.statusColor && col.statusColor(scope.row)
}">
</div>
<div class="any-slot">
<slot :name="col.slotName" v-bind="scope.row"></slot>
</div>
</template>
</el-table-column>
<el-table-column
v-else-if="col.type === 'check' || col.type === 'selection'"
:key="col.label"
type="selection"
width="37"
:reserve-selection="true"
:selectable="selectable(col)">
</el-table-column>
<!-- 普通列 -->
<el-table-column
header-align="left"
align="left"
v-else-if="!(typeof col.render === 'function')"
:key="col.label"
:label="col.label"
:prop="col.render"
:min-width="col.width? col.width : ''"
:column-key="col.filterKey"
:filters="handleFilters(col.filterList)"
:filter-multiple="false"
filter-placement="bottom"
:sortable="!!col.sortable">
</el-table-column>
</template>
</el-table>
</template>
</el-table-column>
<template
v-for="col in options">
<!-- 多选框 -->
......@@ -131,11 +199,15 @@ export default class seetaTableIndex extends Vue {
}
// 传入遮罩控制
@Prop({ type: Boolean, default: false }) outerLoading
// 是否开启嵌套表格
@Prop({ type: Boolean, default: false }) doubleTable
// 列表参数
@Prop({ type: Array, default: () => [] }) options
// 子表格列表参数
@Prop({ type: Array, default: () => [] }) childOptions
// 数据加载函数
@Prop({ type: Function, default: () => { return {} } }) loadFunction
@Prop({ type: Number, default: 10 }) pageSize
@Prop({ type: Number, default: 30 }) pageSize
@Prop({ type: Number, default: 1 }) pageIndex
// 手动传入数据
@Prop({ type: Object, default: () => {} }) data
......@@ -155,6 +227,7 @@ export default class seetaTableIndex extends Vue {
@Prop({ type: String, default: 'total, prev, pager, next, sizes, jumper' }) pageLayout
isLoading: boolean = false
tableData: {}[] = []
childTableData: {}[] = []
total: number = 0
// currentPage: number = 1
// currentSize: number = 10
......@@ -224,6 +297,9 @@ export default class seetaTableIndex extends Vue {
this.currentFilters = {}
}, 100)
}
clickCollapse() {
this.getTableHeight()
}
// 计算列表高度
getTableHeight() {
this.$nextTick(() => {
......@@ -254,6 +330,7 @@ export default class seetaTableIndex extends Vue {
dataChange(val) {
if (!val) return
this.tableData = val.list
this.childTableData = val.list.map(item => item.child)
if (val.total || val.total === 0) {
this.total = val.total
}
......@@ -327,12 +404,14 @@ export default class seetaTableIndex extends Vue {
@import "@/styles/theme.sass"
.table-box
height: 100%
overflow: auto
overflow: hidden
background: #fff
position: relative
.el-table
color: $--color-text-primary
font-size: 14px
::v-deep.el-table__expanded-cell
padding: 0 0
::v-deep .el-table__header
font-size: 14px
font-family: PingFang-SC-Bold, PingFang-SC
......@@ -411,7 +490,7 @@ export default class seetaTableIndex extends Vue {
text-align: left
padding-left: 30px
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
font-weight: 400
color: #333333
line-height: 20px
......@@ -442,7 +521,7 @@ export default class seetaTableIndex extends Vue {
padding: 2px 5px
color: #333
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
::v-deep .el-pagination__total
font-size: 14px
color: $--color-text-primary
......@@ -464,7 +543,7 @@ export default class seetaTableIndex extends Vue {
background-color: #F5F7FA !important
.el-select-dropdown__item
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
font-weight: 400
.el-select-dropdown__item, .selected
font-weight: normal !important
......
src/components/seeta-ui/seeta-tabs.vue
......@@ -32,7 +32,7 @@ export default class seetaTabs extends Vue {
margin: 0 0 14px
::v-deep .el-tabs__item
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
font-weight: 400
&.is-active
color: #409EFF
......
src/router/routes.js
......@@ -23,6 +23,16 @@ export default [
name: 'device',
meta: { title: '设备列表' },
component: () => import('@views/DeviceList')
}, {
path: '/device-detail',
name: 'device-detail',
meta: { title: '设备详情' },
component: () => import('@views/DeviceList/detail.vue')
}, {
path: '/device-service',
name: 'device-service',
meta: { title: '设备服务' },
component: () => import('@views/DeviceList/deviceService/deviceServiceIndex')
}]
},
{
......
src/styles/base.sass
......@@ -85,5 +85,5 @@ body, html
#raw-input::-webkit-input-placeholder
font-size: 14px
color: #999
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
font-weight: 400
src/styles/layout.sass
......@@ -33,7 +33,7 @@
background-color: #FFF
margin-top: 14px
display: flex
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
font-weight: 400
// align-items: center
align-items: flex-start
......@@ -47,7 +47,7 @@
vertical-align: middle
.el-input__inner::placeholder
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
font-weight: 400
line-height: 14px
color:#999999
......@@ -56,7 +56,7 @@
display: inline-block
height: 20px
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
font-weight: 400
color: #666666
line-height: 20px
......@@ -88,7 +88,7 @@
width: 56px
height: 18px
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
font-weight: 400
color: #FFFFFF
i.iconfont::before
......@@ -103,10 +103,15 @@
height: 100%
.el-range-input
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
font-weight: 400
.el-date-editor .el-range__close-icon
line-height: 24px
.el-select__input
border: none
padding: 0
appearance: none
background-color: transparent
// 新建页公共样式
.common-create
display: flex
......@@ -181,7 +186,7 @@
color: #409EFF
.operate
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
font-weight: 400
color: #409EFF
line-height: 20px
......@@ -192,3 +197,9 @@
// 搜索栏禁止输入校验规则之外的字符
.error-border .el-input__inner
border: 1px solid red !important
.mySuccess
width: 122px !important
min-width: 122px
height: 40px
background: #FFFFFF
box-shadow: 0 0 8px 0 rgba(37,38,94,0.20)
src/styles/module/label.sass
......@@ -10,7 +10,7 @@
font-size: 12px
white-space: nowrap
text-align: center
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
font-weight: 400
line-height: 17px
height: 28px
......
src/utils/system.js
......@@ -6,7 +6,7 @@ export function rTime(date) {
}
// 转换时间格式 精确到分钟
export function rTimeMin(item) {
const json_date = moment(new Date(item)).format('YYYY-MM-DD kk:mm')
const json_date = moment(new Date(item)).format('YYYY-MM-DD HH:mm:ss')
return json_date
// const y = date.getFullYear()
// let m = date.getMonth() + 1
......@@ -62,3 +62,24 @@ export function isArrayEqual(value1 = [], value2 = []) {
}
return false
}
// 复制内容到粘贴板的实现
export function copyText(item) {
if (!item) {
return
}
const transfer = document.createElement('input')
document.body.appendChild(transfer)
transfer.value = item // 这里表示想要复制的内容
transfer.focus()
transfer.select()
if (document.execCommand('copy')) {
document.execCommand('copy')
}
transfer.blur()
this.$message({
message: '复制成功',
type: 'success',
customClass: 'mySuccess',
})
document.body.removeChild(transfer)
}
src/views/DeviceList/deviceService/components/SendOrder.vue 0 → 100644
<template>
<div class="box">
<div class="wrapper">
<div class="content">
<div class="content-item">
<span class="content-item-title">{{'服务参数：'}}</span>
<div class="content-table">
<st-table
ref="vTable"
:options="definitions"
:data="{
list: tokenList,
total: total,
}"
:outerLoading="loadingStatus"
:pagination="false"
>
<div slot='fieldSlot' slot-scope="row">
<template v-if="!row.ifEdit">
<span>{{row.type}}</span>
</template>
<template v-else>
<st-inpt v-model="row.type"></st-inpt>
</template>
</div>
<div slot='valueSlot' slot-scope="row">
<template v-if="!row.ifEdit && row.valueType === 'text'">
<span>{{row.value}}</span>
</template>
<template v-else-if="!row.ifEdit && row.valueType === 'a'">
<a href="#">{{row.value}}</a>
</template>
<template v-else-if="!row.ifEdit && row.valueType === 'img'">
<span></span>
<el-image></el-image>
</template>
<template v-else>
<st-inpt v-model="row.value"></st-inpt>
</template>
</div>
<div slot='childOperate' slot-scope="row">
<span class="operate-text" @click="seeServiceParams(row.id)">{{ '撤销覆盖' }}</span>
<span class="operate-text" @click="sendReq(row.id)">{{ '删除' }}</span>
<span class="operate-text">{{'-'}}</span>
</div>
</st-table>
</div>
</div>
<div class="content-item">
<span class="content-item-title">{{'指令：'}}</span>
<st-input type="textarea" placeholder="请输入Json" class="content-item-one"></st-input>
</div>
</div>
<st-button type="primary" width="80px" class="sendBtn">{{'发送'}}</st-button>
</div>
</div>
</template>
<script>
import { rTimeMin, copyText } from '@/utils/system.js'
export default {
computed: {
// 获取设备状态颜色
getStatusColor() {
return item => {
switch (item) {
case 'online':
return '#67C23A'
case 'offline':
return '#999999'
default:
return '#F56C6C'
}
}
},
// 获取设备状态文字
getStatusText() {
return item => {
switch (item) {
case 'online':
return '在线'
case 'offline':
return '离线'
default:
return '异常'
}
}
},
// 精简文字
simplify() {
return (item, length) => {
if (item && item.length > length) {
return item.substring(0, length) + '...'
}
return item
}
}
},
data() {
return {
dynamicTags: ['标签一', '标签二', '标签三'],
inputVisible: false,
inputValue: '',
tokenList: [
{ p1: '小1' },
],
total: 0,
loadingStatus: false,
activeTab: 'getParams',
tabs: [
{
label: '查看参数',
name: 'getParams',
},
{
label: '发送请求',
name: 'sendRequest',
},
{
label: '发送指令',
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: 'p1'
}, {
label: '编号',
render: 'p2'
}, {
label: '端口',
render: 'p3'
}, {
label: '描述',
render: 'p3'
}, {
label: '操作',
type: 'slot',
slotName: 'operate',
},
],
}
},
methods: {
rTimeMin,
handleClose(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
},
showInput() {
this.inputVisible = true
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus()
})
},
handleInputConfirm() {
const inputValue = this.inputValue
if (inputValue) {
this.dynamicTags.push(inputValue)
}
this.inputVisible = false
this.inputValue = ''
}
}
}
</script>
<style lang="sass" scoped>
::v-deep .el-table__body-wrapper.is-scrolling-none
max-height: 224px !important
.table-box
::v-deep .el-table
max-height: none !important
.box
height: 100%
display: flex
flex-direction: column
justify-content: space-between
min-height: 563px
.wrapper
height: calc(100% - 60px)
display: flex
flex-direction: column
.content-item
margin-bottom: 24px
display: flex
.content-item-one
width: 609px !important
height: 100px
.content-item-title
margin: auto 0
width: 108px
.content-table
width: calc(100% - 108px)
.blue-text
color: #409EFF
.sendBtn
margin-left: 108px
</style>
src/views/DeviceList/deviceService/deviceServiceIndex.vue 0 → 100644
<template>
<div class="data-list-common flex column main-content flex-1">
<div class="header">
<span class="title">{{'设备列表'}}</span>
</div>
<div class="page-nav">
<div class="page-nav-title">
<span>{{'AIPS'}}</span>
</div>
<st-table
ref="vTable"
:options="definitions"
:data="{
list: tokenList,
total: total,
}"
:outerLoading="loadingStatus"
:pagination="false"
>
<div slot='codeSlot' slot-scope="row">
<span>{{ simplify(row.code, 3) }}</span>
<i class="iconfont icon-fuzhi icon-fuzhi-text" @click="copyText(row.code)"></i>
</div>
<div slot='status' slot-scope="row">
<span class="circleStatus" :style="{color: getStatusColor(row.status)}">{{ getStatusText(row.status) }}</span>
</div>
<div slot='structureSlot' slot-scope="row">
<span>{{ simplify(row.structure, 6) }}</span>
</div>
<div slot='registerTimeSlot' slot-scope="row">
<span>{{ rTimeMin(row.registerTime) }}</span>
</div>
<div slot='tagsSlot' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.tags ? row.tags.join('、') : ''" placement="top">
<!-- 必须要套一层 -->
<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>
</template>
<span v-if="(row.tags && row.tags.length) > 10">共: {{(row.tags && row.tags.length) ? row.tags.length : 0}} 条</span>
</div>
</el-tooltip>
</div>
<div slot='servicesSlot' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.services ? row.services.join('、') : ''" placement="top">
<!-- 必须要套一层 -->
<div>
<template v-for="(item, index) in row.services">
<span v-if="[0, 2].indexOf(index) !== -1" :key="index" class="service-item">{{ simplify(item, 4) }}</span>
</template>
<span v-if="(row.services && row.services.length) > 10">共: {{(row.services && row.services.length) ? row.services.length : 0}} 条</span>
</div>
</el-tooltip>
</div>
<div slot='systemSlot' slot-scope="row">
<span>{{ simplify(row.system, 7) }}</span>
</div>
<div slot='operate' slot-scope="row">
<span class="operate-text" @click="delete(row.id)">{{'详情'}}</span>
</div>
</st-table>
</div>
<div class="page-content">
<div class="table-list">
<st-tabs :tabs="tabs" v-model="activeTab">
<template v-slot:[activeTab]>
<components :is="activeTab" ref="dataTable"></components>
</template>
</st-tabs>
</div>
</div>
</div>
</template>
<script>
import getParams from './components/GetParams.vue'
import sendRequest from './components/SendRequest.vue'
import sendOrder from './components/SendOrder.vue'
import { rTimeMin, copyText } from '@/utils/system.js'
export default {
components: {
getParams,
sendRequest,
sendOrder
},
computed: {
// 获取设备状态颜色
getStatusColor() {
return item => {
switch (item) {
case 'online':
return '#67C23A'
case 'offline':
return '#999999'
default:
return '#F56C6C'
}
}
},
// 获取设备状态文字
getStatusText() {
return item => {
switch (item) {
case 'online':
return '在线'
case 'offline':
return '离线'
default:
return '异常'
}
}
},
// 精简文字
simplify() {
return (item, length) => {
if (item && item.length > length) {
return item.substring(0, length) + '...'
}
return item
}
}
},
data() {
return {
tokenList: [
{ name: '小1', code: '110123124325' },
],
total: 0,
loadingStatus: false,
activeTab: 'getParams',
tabs: [
{
label: '查看参数',
name: 'getParams',
},
{
label: '发送请求',
name: 'sendRequest',
},
{
label: '发送指令',
name: 'sendOrder',
},
],
definitions: [
{
label: '编号',
type: 'slot',
slotName: 'codeSlot',
}, {
label: '状态',
type: 'slot',
slotName: 'status',
statusColor: item => {
switch (item.status) {
case 'online':
return '#67C23A'
case 'offline':
return '#999999'
default:
return '#F56C6C'
}
}
}, {
label: '架构',
type: 'slot',
slotName: 'structureSlot'
}, {
label: '系统',
type: 'slot',
slotName: 'systemSlot'
}, {
label: 'IP',
render: 'IP'
}, {
label: '注册时间',
type: 'slot',
slotName: 'registerTimeSlot'
}, {
label: '标签',
type: 'slot',
slotName: 'tagsSlot'
}, {
label: '服务',
type: 'slot',
slotName: 'servicesSlot'
}, {
label: '操作',
type: 'slot',
slotName: 'operate',
},
],
}
},
methods: {
rTimeMin
}
}
</script>
<style lang="sass" scoped>
.icon-fuzhi-text
margin-left: 6px
color: #409EFF
cursor: pointer
.operate-text
font-family: PingFangSC-Regular
font-size: 14px
color: #409EFF
margin-right: 20px
cursor: pointer
.page-nav
flex-direction: column
.table-box
width: 100%
::v-deep .el-table
max-height: fit-content !important
.page-nav-title
text-align: left
margin-bottom: 10px
font-family: PingFangSC-Regular, 微软雅黑
font-size: 14px
color: #333
font-weight: bold
.page-content
padding-bottom: 0px
margin-top: 22px
flex: 1 0 0
overflow-y: visible
overflow-x: hidden
.table-list
flex: 1 0 0 !important
overflow: visible !important
.el-tabs
height: 100%
display: -webkit-box
display: -ms-flexbox
display: flex
-webkit-box-orient: vertical
-webkit-box-direction: normal
-ms-flex-direction: column
flex-direction: column
::v-deep.el-tabs__content
flex: 1 0 0
overflow: visible
.el-tab-pane
height: 100%
overflow: visible
</style>
src/views/register.vue
......@@ -78,7 +78,6 @@
</template>
<script>
import { usersApi, codeApi } from '@/http'
export default {
data() {
const validatePassword = (rule, value, callback) => {
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!