Skip to content

E
energyai_vue
Commit 735966f9 authored by co_dengxiongwen's avatar co_dengxiongwen
Browse files
Options

点位管理

parent 563c6c7b
Hide whitespace changes
Inline Side-by-side
Showing with 210 additions and 147 deletions
src/pages/sys/points/index.vue
View file @ 735966f9
......@@ -20,36 +20,80 @@
el-container(style="padding:0px;height:77.6vh;")
card-warp(:title="listTitle?listTitle :'点位列表' " , height="45px")
span(slot='right')
el-button(type='primary' size='mini' icon='el-icon-plus',style='float:right;transform:translateY(6px);margin-right:20px;' :disabled="flag" @click='addOrUpdateHandle()') 新增
el-button(type='primary' size='mini' icon='el-icon-plus',style='float:right;transform:translateY(6px);margin-right:20px;' v-if="isAuth('sys:points:save')" :disabled="flag" @click='addOrUpdateHandle()') 新增
div(slot='content')
table-list(:tableColums='tableHeader' :tableData='dataList' :opNum='2')
template(#functionCodeType='data')
font(v-if='data.scope.functionCodeType == 1') 读线圈
font(v-if='data.scope.functionCodeType == 2') 读离散量输入
font(v-if='data.scope.functionCodeType == 3') 读保持寄存器
font(v-if='data.scope.functionCodeType == 4') 读输入寄存器
template(#dataType='data')
font(v-if='data.scope.dataType == 1') Integer
font(v-if='data.scope.dataType == 2') String
font(v-if='data.scope.dataType == 3') Float
font(v-if='data.scope.dataType == 4') Double
font(v-if='data.scope.dataType == 5') Short
font(v-if='data.scope.dataType == 6') Long
font(v-if='data.scope.dataType == 7') Boolean
//- 操作项
template( #operation='data' )
el-button(type="text" v-if="isAuth('sys:dic:update')" @click="addOrUpdateHandle(data.scope)") 编辑
el-button(type="text" v-if="isAuth('sys:dic:delete')" @click="deleteHandle(data.scope)") 删除
// 弹窗, 新增 / 修改
//- add-or-update(v-if='addOrUpdateVisible', ref='addOrUpdate', :p-list='list' @refreshdatalist='refreshdatalist' @refreshBean='refreshBean' @addNotify='addNotify')
//- query-detail(v-if='queryDetailVisible', ref='queryDetail')
el-button(type="text" v-if="isAuth('sys:points:update')" @click="addOrUpdateHandle(data.scope)") 编辑
el-button(type="text" v-if="isAuth('sys:points:delete')" @click="deleteHandle(data.scope.id)") 删除
el-footer.box_footer
tablePagination( :pageSize="pageSize" :totalSize="totalPage" @parentMethod="getDataList" )
el-dialog(width="40%",:append-to-body='true' :visible.sync='visible' :modal-append-to-body='false' @close="closeForm('ruleForm')")
div.title-bold(slot='title') {{!ruleForm.id ? '新增点位': '编辑点位'}}
el-form(:model="ruleForm", :inline="false" :rules="rules" ref="ruleForm", label-width="100px", @submit.native.prevent)
el-card(shadow="never")
el-row(:span='24')
el-col(:span='24')
el-form-item(label="资源点ID:" prop="resourceId" v-if='false')
el-input(v-model='ruleForm.resourceId' placeholder="" clearable v-if='false')
el-col(:span='24')
el-form-item(label="点位名称:" prop="name")
el-input(v-model='ruleForm.name' placeholder="请输入点位名称" clearable )
el-col(:span='12')
el-form-item(label="从机ID:" prop="slaveId")
el-input(v-model.number='ruleForm.slaveId' placeholder="请输从入机ID" clearable )
el-col(:span='12')
el-form-item(label="地址:" prop="registerAddress")
el-input(v-model.number='ruleForm.registerAddress' placeholder="请输入地址" clearable )
el-col(:span='12')
el-form-item(label="功能码:" prop="functionCodeType")
el-select.mywidth(v-model="ruleForm.functionCodeType" placeholder="请选择功能码" clearable)
el-option(v-for="(item,index) in functionCodeTypeList" :key="index" :label="item.name" :value="item.id" :code="item.id")
el-col(:span='12')
el-form-item(label="数据类型:" prop="dataType")
el-select.mywidth(v-model="ruleForm.dataType" placeholder="请选择数据类型" clearable)
el-option(v-for="(item,index) in dataTypeList" :key="index" :label="item.name" :value="item.id" :code="item.id")
div(slot="footer" style=' text-align: center;')
el-button(type='primary' size='medium' @click="cancel") 取 消
el-button(type='primary' size='medium' @click="addsave" v-prevent-re-click) 保 存
</template>
<script>
// import AddOrUpdate from './add-or-update'
// import QueryDetail from './query-detail'
import Vue from 'vue'
import tableList from '@/pages/components/tableList'
import tablePagination from '@/pages/components/tablePagination'
let that
export default {
data() {
let validateNumber = (rule, value, callback) => {
if (value <= 0) {
callback(new Error('只能输入正整数'))
} else if (value > 99999999) {
callback(new Error('排序值超出范围'))
} else {
callback()
}
}
return {
flag: true,
listTitle: '',
addOrUpdateVisible: false,
queryDetailVisible: false,
urlPath: window.CONFIG.urlPath,
treeData: [],
defaultExpandedKeys: [],
defaultProps: {
......@@ -57,12 +101,22 @@ export default {
label: 'name',
level: 'level'
},
functionCodeTypeList: [
{ id: 1, name: '读线圈' },
{ id: 2, name: '读离散量输入' },
{ id: 3, name: '读保持寄存器' },
{ id: 4, name: '读输入寄存器' }
],
dataTypeList: [
{ id: 1, name: 'Integer' },
{ id: 2, name: 'String' },
{ id: 3, name: 'Float' },
{ id: 4, name: 'Double' },
{ id: 5, name: 'Short' },
{ id: 6, name: 'Long' },
{ id: 7, name: 'Boolean' }
],
nodeKey: 'id',
station: {}, //当前选择的站点
mapList: [], //当前站点的所有层
stationMap: {}, //当前选择的层
resource: {}, //当前选择的资源点
typeList: [],
checkedData: {
stationId: '',
stationName: '',
......@@ -72,16 +126,46 @@ export default {
resourceId: '',
sId: localStorage.getItem('stationId')
},
rules: {
//添加规则
name: [
{ required: true, message: '点位名称不能为空', trigger: 'blur' },
{ min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
],
slaveId: [
{ required: true, message: '从机ID不能为空' },
{ type: 'number', message: '从机ID必须为数字' },
{ validator: validateNumber, trigger: ['blur', 'change'] }
],
registerAddress: [
{ required: true, message: '地址不能为空' },
{ type: 'number', message: '地址必须为数字' },
{ validator: validateNumber, trigger: ['blur', 'change'] }
],
functionCodeType: [
{
required: true,
message: '功能码不能为空',
trigger: ['blur', 'change']
}
],
dataType: [
{
required: true,
message: '数据类型不能为空',
trigger: ['blur', 'change']
}
]
},
currentNode: {},
list: [],
searchInput: '',
editable: false,
checkList: [], //筛选数据
tableHeader: [
{ label: '点位名称', prop: 'name' },
{ label: '从机ID', prop: 'slaveId' },
{ label: '功能码', prop: 'functionCodeType' },
{ label: '数据类型', prop: 'dataType' },
{ label: '功能码', prop: 'functionCodeType', slot: true },
{ label: '数据类型', prop: 'dataType', slot: true },
{ label: '寄存器地址', prop: 'registerAddress' }
],
tableOption: {
......@@ -89,14 +173,14 @@ export default {
maxHeight: 500 //高度
},
dataList: [], //列表
ruleForm: {},
visible: false,
dataListLoading: false,
pageIndex: 1,
pageSize: 10,
totalPage: 0,
sort: 'create_time',
order: 'asc',
//当前选择的层级
tierMap: null
order: 'asc'
}
},
components: {
......@@ -111,7 +195,6 @@ export default {
}
},
created() {
that = this
this.initTree()
},
methods: {
......@@ -135,28 +218,18 @@ export default {
console.log('treeData', this.treeData)
this.defaultExpandedKeys = []
this.$nextTick(() => {
if (
!this.treeData ||
this.treeData.length <= 0 ||
!this.treeData[0].children ||
this.treeData[0].children.length <= 0
) {
}
if (!this.tierMap) {
this.currentNode = this.$refs.tree.getNode(
this.treeData[0].children[0].id
).data
//将选中的层级树节点设置为选中
this.$refs.tree.setCurrentNode(this.currentNode)
Vue.set(this.treeData[0].children[0], 'iconB', true)
this.defaultExpandedKeys = [this.currentNode.id]
this.isFlag(this.treeData, this.currentNode.id)
}
this.currentNode = this.$refs.tree.getNode(
this.treeData[0].children[0].id
).data
//将选中的层级树节点设置为选中
this.$refs.tree.setCurrentNode(this.currentNode)
Vue.set(this.treeData[0].children[0], 'iconB', true)
this.defaultExpandedKeys = [this.currentNode.id]
this.isFlag(this.treeData, this.currentNode.id)
})
}
})
},
isFlag(data, id) {
data.forEach((res) => {
if (res.id === id) {
......@@ -169,51 +242,32 @@ export default {
}
})
},
//线路资源点树节点点击事件
handleNodeClick(node) {
// console.log('node.id', node.id)
//console.log('选中树节点', node)
this.currentNode = node
let level = node.level
let name = node.name
let id = node.id
let code = node.code
this.isFlag(this.treeData, id)
if (level === 3) {
//站点
this.checkedData.stationId = id
this.checkedData.stationName = name
// this.initTreeStationMap(node)
} else if (level === 4) {
this.tierMap = node
//层级
this.checkedData.tierId = id
this.checkedData.tierName = name
this.checkedData.stationId = node.stationId
this.stationMap = node
// console.log('选中节点的层级id', this.tierId)
} else if (level === 5) {
this.tierMap = node
//资源点类型
this.checkedData.stationId = node.stationId
this.checkedData.tierId = node.tierId
} else if (level === 6) {
this.tierMap = node
if (level === 6) {
this.flag = false
this.checkedData.resourceId = id
this.checkedData.tierId = node.tierId
this.getDataList()
} else {
this.flag = true
this.checkedData.resourceId = ''
}
},
getDataList(sort, order) {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/sysDictionary/dictionaryList'),
url: this.$http.adornUrl('/liResourcePoints/pageList'),
method: 'post',
data: {
page: this.pageIndex,
rows: this.pageSize,
parentId: this.dicId,
resourceId: this.checkedData.resourceId,
sort: sort || 'create_time',
order: order || 'asc',
stationId: this.stationId
......@@ -230,62 +284,100 @@ export default {
})
},
// 新增 / 修改
addOrUpdateHandle(item) {
this.resource = null
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init(item)
})
},
// 删除
deleteHandle() {
// console.log('dataListSelections:', this.dataListSelections)
// var ids = this.checkedData.resourceId
// ? [this.checkedData.resourceId]
// : this.dataListSelections.map(item => {
// return item.id
// })
// this.listItem.id
// var ids = [this.checkedData.resourceId]
let ids = []
if (this.listItem.id) {
ids.push(this.listItem.id)
addOrUpdateHandle(row) {
this.visible = true
if (row) {
this.ruleForm = JSON.parse(JSON.stringify(row))
} else {
ids.push(this.listItem.key)
this.ruleForm = {}
if (this.currentNode) {
this.ruleForm.resourceId = this.currentNode.id
this.ruleForm.stationId = this.currentNode.stationId
}
}
for (let i in ids) {
//删除绘制的图标和线
// this.delPoint(ids[i])
for (let j in this.list) {
if (this.list[j].id === ids[i]) {
this.$http({
url: this.$http.adornUrl('/liResource/validateDeleteResource'),
method: 'get',
params: this.$http.adornParams({
stationId: localStorage.getItem('stationId'),
id: ids[i]
},
// 提交
addsave() {
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
this.$http({
url: this.$http.adornUrl(
`/liResourcePoints/${!this.ruleForm.id ? 'save' : 'update'}`
),
method: 'post',
data: this.ruleForm
}).then((data) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.getDataList()
}
})
}).then((data) => {
if (data && data.code === 0) {
//删除绘制的图标和线
this.delPoint(ids[i])
this.list[j].deleted = 1
this.listItem = ''
this.cancelDisabled = false
} else {
this.$message.error(data.msg)
}
})
}
})
},
// 删除
deleteHandle(id) {
var ids = [id]
this.$confirm(`确认删除该点位?`, '删除点位', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
closeOnClickModal: false
}).then(() => {
this.$http({
url: this.$http.adornUrl('/liResourcePoints/deleteByFlag'),
method: 'post',
data: this.$http.adornData(ids, false)
}).then((res) => {
if (res && res.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.getDataList()
}
})
} else {
this.$message.error(res.msg)
}
if (!this.list[j].id) {
if (this.list[j].key === ids[i]) {
//删除绘制的图标和线
this.delPoint(ids[i])
this.list.splice(j, 1)
}
}
})
})
},
closeForm(formRule) {
this.ruleForm = {}
this.$refs[formRule].resetFields()
this.visible = false
},
//取消
cancel() {
this.$confirm(
'确认取消?',
`${!this.ruleForm.id ? '新增点位' : '编辑点位'}`,
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
}
)
.then(() => {
this.closeForm('ruleForm')
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消退出'
})
})
}
}
}
......@@ -390,28 +482,8 @@ export default {
.dic_tree /deep/.el-tree-node__expand-icon.is-leaf::before {
opacity: 0;
}
.dic_tree /deep/.is-leaf.el-tree-node__expand-icon.el-icon-caret-right {
// margin-left: -15px !important;
}
</style>
<style lang="scss">
.line_warp {
// width: 300px;
height: 45px;
display: flex;
align-items: center;
.point_left {
width: 50px;
height: 50px;
transform: translateX(14px);
}
.point_right {
width: 50px;
height: 50px;
transform: translateX(-14px);
}
}
.el-tree--highlight-current
.el-tree-node.is-current
> .el-tree-node__content
......@@ -425,15 +497,6 @@ export default {
</style>
<style lang="scss" scoped>
#map {
/deep/.ol-zoom {
// display: none;
}
/deep/ .ol-zoom .ol-unselectable .ol-control {
display: none;
}
}
.treeCard {
.el-tree {
overflow-y: scroll;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment