点位管理

src/pages/sys/points/index.vue

+<template lang="pug">
+    div(onselectstart="return false;")
+        div(class="top_button" style="width:100%;height:40px; padding-top:3px;overflow:hidden;")
+            div(style="float:right; margin-top:6px;")
+                el-popover( placement="bottom" width="150")
+                        el-button( slot="reference" size='mini' type="primary" icon="el-icon-s-tools" style='float:right;transform:translateY(6px)')  筛选
+                        el-checkbox-group( v-model="checkList")
+                            el-col( :span="24")
+                                el-checkbox( v-for="(item,index) in tableHeader" :label="item" :key="index" )
+                                  span {{item.label}}
+                el-button(v-if="isAuth('sys:points:save')",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' style="margin-right:10px;" @click="changeEditable" v-if="!editable && isAuth('sys:point:edit')") 编辑
+                //- el-button(type="primary" size='mini' style="margin-right:10px;" @click="handleCancel" v-if="editable" :disabled='cancelDisabled') 取消
+                //- el-button(type="primary" size='mini' style="margin-right:10px;" @click="updateHandle" v-if="editable && isAuth('sys:point:update')" :disabled='listItem?false:true') 修改
+                //- el-button(type="primary" size='mini' style="margin-right:10px;" @click="deleteHandle" v-if="editable && isAuth('sys:point:delete')" :disabled='listItem?false:true') 删除
+                //- el-button(type="primary" size='mini' style="margin-right:10px;" @click="saveResourceList" :disabled='submitlDisabled' v-if="editable && isAuth('sys:point:save')") 保存
+        div(style="clear:both")
+        el-container( style='padding-left:0px;')
+            el-aside(width="18vw" style='height:750px')
+                el-card.treeCard.tree-container(style='min-height:630px;background:#f4f4f4;')
+                    div(class="monitor_point_left_top")
+                        div.title-bold(slot='header' class="monitor_point_left_topL") 资源点列表
+                        div(class="monitor_point_left_topR")
+                            el-input(suffix-icon="el-icon-search" size='mini' placeholder="" v-model="searchInput" clearable)
+                    el-tree.dic_tree( :data="treeData"  ref='tree' :accordion='true' :highlight-current='true' :filter-node-method="filterNode"  :props="defaultProps" :default-expand-all='false' @node-click="handleNodeClick" :default-expanded-keys='defaultExpandedKeys' :node-key='nodeKey' )
+                        span(class="custom-tree-node" style='width:90%;line-height: 18px;' slot-scope="{ node, data }")
+                            span(v-if="node.data.level == 3" class="el-icon-zhandian xa-icon")
+                            //- span(v-if="node.data.level == 3 && node.data.iconB" class="el-icon-wq-treeIcon1")
+                            span(v-if="node.data.level == 4 && node.data.iconB" class="el-icon-wq-treeIcon1 xa-icon")
+                            span(v-if="node.data.level == 4 && !node.data.iconB" class="el-icon-wq-treeIcon xa-icon")
+                            span(v-if="node.data.level == 6 " :class="node.data.icon+'7'" class='xa-icon')
+                            <span style="position: relative;" >&nbsp;{{node.label}}<span style="width:25px; height:16px; position: absolute;left: -46px;top: -3px;"></span></span>
+                            span(v-if=" node.data.iconB" class='el-icon-my-treeFlag')
+            el-main(style="padding:0px;")
+                el-card.tableCard
+                    table-list(:tableColums='tableHeader' :tableData='dataList'  :opNum='2')
+                      //- 操作项
+                      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')
+</template>
+
+<script>
+// import AddOrUpdate from './add-or-update'
+// import QueryDetail from './query-detail'
+import Vue from 'vue'
+
+let that
+export default {
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      queryDetailVisible: false,
+      urlPath: window.CONFIG.urlPath,
+      treeData: [],
+      defaultExpandedKeys: [],
+      defaultProps: {
+        children: 'children',
+        label: 'name',
+        level: 'level'
+      },
+      nodeKey: 'id',
+      station: {}, //当前选择的站点
+      mapList: [], //当前站点的所有层
+      stationMap: {}, //当前选择的层
+      resource: {}, //当前选择的资源点
+      typeList: [],
+      checkedData: {
+        stationId: '',
+        stationName: '',
+        type: '',
+        tierId: '',
+        tierName: '',
+        resourceId: '',
+        sId: localStorage.getItem('stationId')
+      },
+      currentNode: {},
+      list: [],
+      searchInput: '',
+      editable: false,
+      checkList: [], //筛选数据
+      tableHeader: [
+        { label: '点位名称', prop: 'name' },
+        { label: '从机ID', prop: 'slaveId' },
+        { label: '功能码', prop: 'functionCodeType' },
+        { label: '数据类型', prop: 'dataType' },
+        { label: '寄存器地址', prop: 'registerAddress' }
+      ],
+      tableOption: {
+        border: false, //是否边框
+        maxHeight: 500 //高度
+      },
+      dataList: [], //列表
+      dataListLoading: false,
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      sort: 'create_time',
+      order: 'asc',
+      //当前选择的层级
+      tierMap: null
+    }
+  },
+  components: {
+    // AddOrUpdate,
+    // QueryDetail
+  },
+  watch: {
+    searchInput(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  created() {
+    that = this
+    this.initTree()
+  },
+  methods: {
+    // 树节点过滤
+    filterNode(value, data) {
+      if (!value) return true
+      return data.name.indexOf(value) !== -1
+    },
+    initTree() {
+      // console.log('stationId：', this.checkedData.sId)
+      this.$http({
+        url: this.$http.adornUrl('/liResource/getTreeList'),
+        method: 'post',
+        data: {
+          stationId: this.checkedData.sId,
+          name: this.searchInput
+        }
+      }).then((data) => {
+        if (data && data.code === 0) {
+          this.treeData = data.tree
+          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)
+            }
+          })
+        }
+      })
+    },
+
+    isFlag(data, id) {
+      data.forEach((res) => {
+        if (res.id === id) {
+          Vue.set(res, 'iconB', true)
+        } else {
+          Vue.set(res, 'iconB', false)
+        }
+        if (res.children) {
+          this.isFlag(res.children, id)
+        }
+      })
+    },
+
+    //线路资源点树节点点击事件
+    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
+        this.checkedData.resourceId = id
+        this.checkedData.tierId = node.tierId
+      }
+    },
+    getDataList(sort, order) {
+      this.dataListLoading = true
+      this.$http({
+        url: this.$http.adornUrl('/sysDictionary/dictionaryList'),
+        method: 'post',
+        data: {
+          page: this.pageIndex,
+          rows: this.pageSize,
+          parentId: this.dicId,
+          sort: sort || 'sort_value',
+          order,
+          stationId: this.stationId
+        }
+      }).then((data) => {
+        if (data) {
+          this.dataList = data.page.rows
+          this.totalPage = data.page.total
+        } else {
+          this.dataList = []
+          this.totalPage = 0
+        }
+        this.dataListLoading = false
+      })
+    },
+    // 新增 / 修改
+    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)
+      } else {
+        ids.push(this.listItem.key)
+      }
+      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]
+              })
+            }).then((data) => {
+              if (data && data.code === 0) {
+                //删除绘制的图标和线
+                this.delPoint(ids[i])
+                this.list[j].deleted = 1
+                this.listItem = ''
+                this.cancelDisabled = false
+              }
+            })
+          }
+          if (!this.list[j].id) {
+            if (this.list[j].key === ids[i]) {
+              //删除绘制的图标和线
+              this.delPoint(ids[i])
+              this.list.splice(j, 1)
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.dic_tree {
+  background: #f4f4f4;
+  font-size: 14px;
+  transform: translateX(-6px);
+  margin-top: 20px;
+}
+.dic_tree /deep/ .el-tree-node__content {
+  padding-left: 0px !important;
+}
+
+.dic_tree /deep/ .el-tree-node {
+  position: relative;
+  padding-left: 16px;
+}
+
+.dic_tree /deep/ .el-tree-node__children {
+  padding-left: 10px;
+}
+
+.dic_tree /deep/ .el-tree-node :last-child:before {
+  height: 38px;
+}
+
+.dic_tree /deep/ .el-tree > .el-tree-node:before {
+  border-left: none;
+}
+
+.tree-container /deep/ .el-tree > .el-tree-node:after {
+  border-top: none;
+}
+
+.dic_tree /deep/ .el-tree-node:before {
+  content: '';
+  left: -4px;
+  position: absolute;
+  right: auto;
+  border-width: 1px;
+}
+
+.dic_tree /deep/ .el-tree-node:after {
+  content: '';
+  left: -4px;
+  position: absolute;
+  right: auto;
+  border-width: 1px;
+}
+
+.dic_tree /deep/ .el-tree-node:before {
+  border-left: 1px dashed #bfbfbf;
+  bottom: 0px;
+  height: 100%;
+  top: -26px;
+  width: 1px;
+}
+
+.dic_tree /deep/ .el-tree-node:after {
+  border-top: 1px dashed #bfbfbf;
+  height: 20px;
+  top: 12px;
+  width: 35px;
+}
+.tree-container /deep/ .el-tree > .el-tree-node:after {
+  border-top: none;
+}
+
+.tree-container {
+  /* 树的parent，样式自定 */
+}
+.dic_tree /deep/ .el-tree-node__expand-icon.expanded {
+  transform: rotate(0deg);
+  -webkit-transform: rotate(0deg);
+}
+.dic_tree /deep/ .el-icon-caret-right:before {
+  background: url('../../../assets/images/add.png');
+
+  content: '';
+  display: block;
+  width: 18px;
+  height: 18px;
+  font-size: 18px;
+  background-size: 18px;
+}
+.dic_tree
+  /deep/
+  .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
+  background: url('../../../assets/images/sub.png');
+  content: '';
+  display: block;
+  width: 18px;
+  height: 18px;
+  font-size: 18px;
+  background-size: 18px;
+}
+.dic_tree /deep/.el-tree-node__content > .el-tree-node__expand-icon {
+  padding: 1px;
+}
+.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
+  .custom-tree-node {
+  background-color: #33b0f6 !important;
+  color: aliceblue;
+}
+.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+  background-color: transparent;
+}
+</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;
+    height: 640px;
+  }
+}
+
+.tree_house {
+  width: 12px;
+  height: 18px;
+  display: inline-block;
+  img {
+    width: 20px;
+    height: 20px;
+    vertical-align: middle;
+    // transform: translateY(-8px);
+    transform: translateX(-40px);
+  }
+}
+.tree_point {
+  width: 12px;
+  height: 18px;
+  display: inline-block;
+  img {
+    width: 15px;
+    height: 15px;
+    vertical-align: middle;
+    transform: translateY(-2px);
+  }
+}
+.resource-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  border: 0px solid black;
+  overflow: auto;
+  .span-box {
+    height: 30px;
+    // width: 30px;
+    font-size: 12px;
+    border-radius: 5px;
+    /* border: 1px solid red; */
+    position: absolute;
+    // left: 0;
+    // top: 0;
+    .span-img {
+      width: 100%;
+      height: 100%;
+      border-radius: 5px;
+      background-size: 182%;
+    }
+  }
+  .active {
+    background-color: #fd949d;
+    height: 40px;
+    width: 40px;
+  }
+}
+
+.tier-btn {
+  .active-tier {
+    background-color: #409eff;
+    color: #ffffff;
+  }
+}
+.monitor_point_left_top {
+  height: 42px;
+  background: #e1edf4;
+  padding-left: 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .monitor_point_left_topL {
+    height: 40px;
+    padding-top: 10px;
+    float: left;
+    div {
+      height: 40px;
+      float: left;
+      padding: 0 10px 0 10px;
+      line-height: 40px;
+      cursor: pointer;
+      font-family: Microsoft YaHei;
+      font-size: 14px;
+      span {
+        color: #35aff8;
+      }
+    }
+    div.on {
+      background: #fff;
+      border: 1px solid #c3c3c3;
+      border-bottom: none;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+    }
+  }
+  .monitor_point_left_topR {
+    // float: right;
+    margin-right: 20px;
+    // margin-top: 10px;
+    .el-input {
+      width: 109px;
+    }
+    /deep/ .el-input--mini .el-icon-search {
+      line-height: 28px;
+      color: #35aff8;
+      font-weight: bold;
+    }
+  }
+}
+
+.top_button {
+  background: url(~@/assets/images/sysiconbg.png);
+}
+</style>

src/router/routes.js

@@ -75,6 +75,7 @@ const frameIn = [
     { path: 'logs', name: `${pre}logs`, component: () => import('@/pages/sys/logs'), meta: { ...meta, title: '系统日志' } },
     { path: 'commandlog', name: `${pre}commandlog`, component: () => import('@/pages/sys/commandlog'), meta: { ...meta, title: '历史指令' } },
     { path: 'point', name: `${pre}point`, component: () => import('@/pages/sys/point'), meta: { ...meta, title: '资源点管理' } },
+    { path: 'points', name: `${pre}points`, component: () => import('@/pages/sys/points'), meta: { ...meta, title: '点位管理' } },
     { path: 'road', name: `${pre}road`, component: () => import('@/pages/sys/road'), meta: { ...meta, title: '线路站点管理' } },
     { path: 'parameter', name: `${pre}parameter`, component: () => import('@/pages/sys/parameter'), meta: { ...meta, title: '系统参数设置' } },
     { path: 'code', name: `${pre}code`, component: () => import('@/pages/sys/code'), meta: { ...meta, title: '代码生成' } },