industry-data-platform/industry-admin/src/views/source/itemGroup/itemChooseTree.vue

<template>
  <div>
    <!-- 点位选择树 -->
    <el-dialog :title="title" width="80%" top="5vh" custom-class="dialog-max" class="cy-custom-dialog" center
               :before-close="dialogClose" :visible.sync="visible" @open="handleOpen" @close="handleClose">
      <el-form label-width="100px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="数据源：" style="margin-bottom: 20px; width: 300px">
              <el-select v-model="dataSourceId" disabled>
                <el-option v-for="dict in dataSourceList" :key="dict.id" :label="dict.dataSourceName"
                           :value="dict.id"></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="所选路径" style="margin-bottom: 20px; width: 300px">
                <el-input style="margin-top: -10px; width: 400px" disabled
                    v-model="queryParams.chooseItemStr"></el-input>
            </el-form-item> -->
          </el-col>
          <template>
            <el-select v-model="queryParams.needItemStr" multiple collapse-tags placeholder="请选择">
              <el-option v-for="item in DriverItemData" :key="item.id" :label="item.itemName"
                         :value="item.itemName">
              </el-option>
            </el-select>
            <el-button type="primary" size="mini" style="margin-left: 15px;"
                       @click="getCompositeScreen">复合筛选
            </el-button>
          </template>
        </el-row>
      </el-form>
      <!-- <div style="display: flex; height: calc(100% - 36px); overflow: auto"> -->
      <div style="display: flex; height: calc(100% - 36px);">
        <!-- 点位 -->
        <div class="cy-transform-data">
          <el-divider content-position="left">点位</el-divider>
          <div class="cy-line" style="padding-bottom: 10px">
            <div style="height: 35px">
              <el-input placeholder="输入关键字进行过滤" v-model="filterLabelText" size="mini"
                        prefix-icon="el-icon-search"></el-input>
            </div>
            <div style="height: calc(100% - 50px); overflow: auto">
              <!-- 树节点 -->
              <div style="height: 20vh;overflow: auto;">
                <!-- <virtual-tree class="cy-group-tree" ref="itemTree" :data="treeData" :indent="10"
                              node-key="id" :filter-node-method="filterLabelEvent" @node-click="handleLabelNodeClick"
                              :check-on-click-node="false" :show-checkbox="true" :highlight-current="true"
                              :default-expand-all="true">
                                    <span class="custom-tree-node" slot-scope="{ node, data }">
                                        <i v-if="data.isLeaf" class="el-icon-document"
                                           style="color: #e69a0f; margin-right: 5px;"/>
                                        <i v-else-if="node.expanded" class="el-icon-folder-opened"
                                           style="color: #e69a0f; margin-right: 5px;"/>
                                        <i v-else class="el-icon-folder" style="color: #e69a0f; margin-right: 5px;"/> -->
                                      <!-- <svg-icon v-if="data.isLeaf" icon-class="file-bg" />
                                      <svg-icon v-else-if="node.expanded" icon-class="folder-open" style="width: 1.2em" />
                                      <svg-icon v-else icon-class="folder" /> -->
                                      <!-- <span :title="node.label || '-'" style="margin-left: 2px">{{
                                            node.label
                                          }}</span>
                                    </span>
                </virtual-tree> -->
				<c-tree class="cy-group-tree" ref="cTree" titleField="label" :render="renderTree" :checkable="true" :selectable="true" :filterMethod="filterLabelEvent" @click="handleLabelNodeClick2"></c-tree>
              </div>
              <!-- 树节点对应的叶节点 -->
              <div style="height: 38vh; overflow: auto">
                <el-divider content-position="left" style="margin-bottom: 15px !important">
                  <i></i>
                  <span>（共{{ leavesList.length }}项）</span>
                </el-divider>
                <el-input placeholder="输入关键字进行过滤" style="margin-top: -10px; width: calc(100% - 60px)"
                          size="mini" @input="filterLeavesEvent" v-model="filterLeavesText"></el-input>
                <el-checkbox v-model="isSelectAllLeaves" @change="handleCheckAllLeavesChange"
                             style="margin-left: 5px">全选
                </el-checkbox>
                <div class="cy-leaves-div">
                  <p-virtual-check ref="pvc" :data-sources="leavesList"
                                   @check-change-all="checkChangeAllLeaves"
                                   @check-change="checkChangeLeaves"></p-virtual-check>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 操作按钮 -->
        <div class="cy-transform-btn">
          <el-row>
            <el-button size="mini" @click="addCheckNodesBtnEvent">添加&nbsp;&gt;&gt;</el-button>
          </el-row>
          <el-row>
            <el-button size="mini" @click="removeCheckNodesBtnEvent">&lt;&lt;&nbsp;移除</el-button>
          </el-row>
          <el-row>
            <el-button size="mini" @click="removeAllCheckNodesBtnEvent">全部移除</el-button>
          </el-row>
        </div>
        <!-- 已选择点位 -->
        <div class="cy-transform-data">
          <el-divider content-position="left">已选择点位（{{ chooseItemDataListByTree.length }}）</el-divider>
          <div class="cy-line">
            <el-checkbox v-model="isSelectAllItem" @change="selectAllItem"
                         style="margin-left: 10px">全选
            </el-checkbox>
            <div style="height: 60vh; overflow: auto">
              <p-virtual-check ref="pvcChoose" :data-sources="chooseItemDataListByTree"
                               @check-change-all="checkChangeAllChoose"
                               @check-change="checkChangeChoose"></p-virtual-check>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" style="text-align: right">
          <el-button type="primary" size="mini" @click="gotoItemConfig">下一步</el-button>
          <el-button @click="dialogClose" size="mini">取消</el-button>
      </div>
    </el-dialog>

    <!-- 点位表达式配置 -->
    <ItemConfigModel ref="itemConfigModel" @dialogClose="dialogClose" @saveItemChoose="saveItemChoose">
    </ItemConfigModel>
  </div>
</template>

<script>
import {showLoading} from '@/utils/cqcy'
import {_extractDataItemValues, extractDataItemValues, getNodeAllPath} from '@/utils/cqcy'
import PVirtualCheck from "@/components/PVirtualCheck/index.vue";
import {getNextAllItem, getDriverItemBySouceId, getCompositeScreen} from '@/api/source/itemGroup';
import {getAllDataModel} from '@/api/source/dataModel';
import ItemConfigModel from './itemConfigModel.vue'
import CTree from "@wsfe/ctree"

export default {
  components: {
    'p-virtual-check': PVirtualCheck,
    ItemConfigModel,
	CTree
  },
  watch: {
    filterLabelText(val) {
      // this.$refs.itemTree.filter(val);
	  this.$refs.cTree.filter(val)
    },
  },
  created() {
    this.getAllDataModel()
  },
  data() {
    return {
      visible: false,
      title: '选择点位',
      dataSourceId: null,
      treeItemName: null,
      //树数据
      treeData: [],
      //所有数据源信息
      dataSourceList: [],
      //所有数据模型
      dataModelList: [],
      //原来数据组中包含的点位信息
      itemList: [],
      //过滤树节点的输入文本
      filterLabelText: null,
      //左侧展示的叶节点
      leavesList: [],
      leavesListF: [],
      //左侧选中的叶节点
      leavesChooseList: [],
      //过滤叶节点的输入文本
      filterLeavesText: null,
      //是否全选所有叶节点
      isSelectAllLeaves: false,
      //右侧展示的，已选择的点位
      chooseItemDataListByTree: [],
      //右侧，是否选择所有点位
      isSelectAllItem: false,
      queryParams: {
        id: null,
        chooseItemStr: "",
        nextItemStr: "",
        needItemStr: [],
      },
      DriverItemData: []
    }
  },
  methods: {
	  renderTree(h, data) {
		  if (data.isLeaf) {
			  return (
				<span>
					<i class="el-icon-document" style="color: #e69a0f; margin-right: 5px;"/>
					<span title={data.label || '-'} style="margin-left: 2px">{data.label}</span>
				</span>
			  )
		  } else if (data.expand) {
			  return (
				<span>
					<i class="el-icon-folder-opened" style="color: #e69a0f; margin-right: 5px;"/>
					<span title={data.label || '-'} style="margin-left: 2px">{data.label}</span>
				</span>
			  )
		  } else {
			  return (
				<span>
					<i class="el-icon-folder" style="color: #e69a0f; margin-right: 5px;"/>
					<span title={data.label || '-'} style="margin-left: 2px">{data.label}</span>
				</span>
			  )
		  }

	  },
    /** 关闭弹出层 */
    dialogClose() {
      this.visible = false
    },
    /** 弹窗打开事件 */
    handleOpen() {
      const loading = showLoading(this, "加载中，请稍候···")
      this.isSelectAllItem = false
      this.getNextAllItem(this.dataSourceId, this.treeItemName, (data) => {
        //加载树
        this.treeData = data.children
		this.$refs.cTree.setData(this.treeData)
        //加载虚拟列表，叶节点
        let leaves = data.leaves
        this.leavesList = leaves
        this.leavesListF = leaves
        let arr = [];
        //将原来的点位加载到，右侧作为已选择的
        for (let i = 0; i < this.itemList.length; i++) {
          let temp = {
            nodeIdentifier: null,
            dataType: null,
            label: this.itemList[i].itemName,
            nodeIndex: this.itemList[i].nodeIndex,
            itemName: this.itemList[i].itemName,
            itemReadName: this.itemList[i].itemReadName,
            dataModelId: this.itemList[i].dataModelId,
            value: this.itemList[i].itemReadName,
            checked: false,
          };
          arr.push(temp)
        }
        this.chooseItemDataListByTree = arr
        //获取数据源的驱动点位信息
        this.getDriverItemBySouceId(this.dataSourceId)
        loading.close()
      }, (e)=>{
        loading.close();
      })
    },
    /** 弹窗关闭事件 */
    handleClose() {
      this.dataSourceId = null
      this.treeItemName = []
      this.treeData = []
      this.leavesList = []
      this.chooseItemDataListByTree = []
      this.filterLabelText = null
      this.filterLeavesText = null
    },
    /** 查询改数据源下的驱动点位信息 */
    getDriverItemBySouceId(id) {
      this.queryParams.id = id;
      getDriverItemBySouceId(id).then((res) => {
        if (res.code === 200) {
          this.DriverItemData = res.data;
        }
      });
    },
    /** 跳转到配置点位表达式 */
    gotoItemConfig() {
      if (this.chooseItemDataListByTree.length == 0) {
        this.$message({
          message: '请选择点位！',
          type: 'warning'
        });
        return;
      }
      this.$refs.itemConfigModel.title = '点位数据计算模型配置'
      this.$refs.itemConfigModel.visible = true
      this.$refs.itemConfigModel.leavesChooseList = this.chooseItemDataListByTree
      this.$refs.itemConfigModel.tableTotal = this.chooseItemDataListByTree.length
      let arr = [];
      for (let i = 0; i < this.chooseItemDataListByTree.length; i++) {
        let temp = this.chooseItemDataListByTree[i];
        let dataModelId = this.chooseItemDataListByTree[i].dataModelId
        //// 全路径
        // temp.itemName = temp.fullPath ? temp.label : temp.itemName;
        temp.itemName = temp.itemReadName
        for (let j = 0; j < this.dataModelList.length; j++) {
          if (this.dataModelList[j].id == dataModelId) {
            temp.remark = this.dataModelList[j].remark
            break
          }
        }
        arr.push(temp)
      }
      this.$refs.itemConfigModel.tableData = arr
      this.$refs.itemConfigModel.dataModelList = this.dataModelList
      this.$refs.itemConfigModel.dataSourceId = this.dataSourceId
      this.$refs.itemConfigModel.dataSourceList = this.dataSourceList
    },
    /** 将点位选择的信息，传递给父组件 */
    saveItemChoose(datas) {
      this.$emit('saveItemChoose', datas)
    },
    /** 获取树节点的下级信息 */
    getNextAllItem(dataSourceId, itemName, callback, callCatch) {
      getNextAllItem(dataSourceId, itemName).then((res) => {
        let data = {}
        this.filterLeavesText = "";
        let datas = res.data.label;
        let leaves = res.data.leaves;
        // 模拟数据
        let dataList = [];
        if (datas && datas.length > 0) {
          datas.forEach((t) => {
            dataList.push({
              dataSourceId: dataSourceId,
              label: t.itemName,
              leaf: false,
              children: [],
            });
          });
        }
        let leavesList = [];
        if (leaves && leaves.length > 0) {
          leaves.forEach((t) => {
            t.label = t.itemName;
            t.value = t.itemReadName;
            t.checked = false;
            leavesList.push(t);
          });
        }
        data.children = dataList
        data.leaves = leavesList
        callback(data);
      }).catch(e => {
        if(callCatch)callCatch(e)
      })
    },
    /** 过滤树节点事件 */
    filterLabelEvent(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    /** 点位点击事件 */
    handleLabelNodeClick(d, n, t) {
      let itemNames = [];
      extractDataItemValues(n, itemNames);
      let itemName = itemNames.reverse().join("!@");
      this.queryParams.chooseItemStr = itemName;
      const loading = showLoading(this, "加载中，请稍候···");
      if ((!d.children || d.children.length == 0) && (!d.leaves || d.leaves.length == 0)) {
        this.getNextAllItem(this.dataSourceId, itemName, (data) => {
          //加载树
          d.children = data.children
          let leaves = data.leaves
          d.leaves = leaves
          //加载虚拟列表，叶节点
          this.leavesList = leaves
          this.leavesListF = leaves
          loading.close();
        }, (e)=>{
          loading.close();
        })
      } else {
        if (d.leaves) {
          let leaves = d.leaves
          this.leavesList = leaves
          this.leavesListF = leaves
        }
        loading.close();
      }
    },
	buildTree(list) {
	  let map = {}, node, tree = [], i;
	  let ids = []
	    for (i = 0; i < list.length; i++) {
			if (!list[i].id) {
				continue
			}
	      map[list[i].id] = i; // 初始化映射
	    }
	    for (i = 0; i < list.length; i++) {
	      node = list[i];
		  if (node.id && ids.includes(node.id)) {
			  continue
		  }
		  ids.push(node.id)
	      if (node._parent) {
			  if (!list[map[node._parent.id]].children.map(item => item.id).includes(node.id)) {
				  list[map[node._parent.id]].children.push(node);
			  }
	      } else {
	        // 如果没有父节点，则为树的根节点
	        tree.push(node);
	      }
	    }
	    return tree;
	},
	handleLabelNodeClick2(d) {
	  let itemNames = [];
	  _extractDataItemValues(d, itemNames);
	  let itemName = itemNames.reverse().join("!@");
	  this.queryParams.chooseItemStr = itemName;
	  const loading = showLoading(this, "加载中，请稍候···");
	  if ((!d.children || d.children.length == 0) && (!d.leaves || d.leaves.length == 0)) {
	    this.getNextAllItem(this.dataSourceId, itemName, (data) => {
	      //加载树
	      d.children = data.children
	      let leaves = data.leaves
	      d.leaves = leaves
		  let cnodes = data.children.map(item => {
			  item._parent = {
				  id: d.id
			  }
			  return item
		  })
		  let treeData = this.$refs.cTree.getFlatData()
		  const treeList = treeData.concat(cnodes)

		  this.$refs.cTree.setData(this.buildTree(treeData))
		  this.$refs.cTree.setExpand(d.id, !this.$refs.cTree.getExpandKeys().includes(d.id))
	      //加载虚拟列表，叶节点
	      this.leavesList = leaves
	      this.leavesListF = leaves
	      loading.close();
	    }, (e)=>{
	      loading.close();
	    })
	  } else {
	    if (d.leaves) {
	      let leaves = d.leaves
	      this.leavesList = leaves
	      this.leavesListF = leaves
	    }
	    loading.close();
	  }
	},
    /** 过滤叶节点事件 */
    filterLeavesEvent(value) {
      let arr = JSON.parse(JSON.stringify(this.leavesListF));
      if (!value || !value.trim()) {
        this.leavesList = arr;
        return;
      }
      let filterList = arr.filter((v) => {
        return v.itemName.indexOf(value) !== -1;
      });
      this.leavesList = filterList;
    },
    /** 全选叶节点事件 */
    handleCheckAllLeavesChange(flag) {
      this.$refs.pvc.checkedAll(flag);
    },
    /** 是否全部选中 */
    checkChangeAllLeaves(flag) {
      this.isSelectAllLeaves = flag;
    },
    /** 查看选中的所有叶节点状态，并将checked为true的填入到选中的叶节点中 */
    checkChangeLeaves(datas) {
      this.leavesChooseList = [];
      if (!datas || datas.length == 0) {
        return;
      }
      datas.forEach((data) => {
        if (data.checked) {
          this.leavesChooseList.push(data);
        }
      });
    },
    /** 将选择的叶节点添加到右边，成为点位 */
    addCheckNodesBtnEvent() {
      // 根据当前选择节点拼接为：XXXX.XXXX.XXX
      let chooseChannelNameList = [];
      if (this.leavesChooseList.length == 0) {
        this.$message({
          message: '请选择点位！',
          type: 'warning'
        });
        return;
      }
      for (let i = 0; i < this.leavesChooseList.length; i++) {
        let temp = {
          nodeIdentifier: null,
          dataType: this.leavesChooseList[i].dataType,
          label: this.leavesChooseList[i].fullPath,
          nodeIndex: this.leavesChooseList[i].nodeIndex,
          itemName: this.leavesChooseList[i].fullPath,
          // itemName: this.leavesChooseList[i].itemName,
          itemReadName: this.leavesChooseList[i].itemReadName,
          value: this.leavesChooseList[i].itemReadName,
          checked: false,
        };
        chooseChannelNameList.push(temp);
      }
      // 去重
      let arr = JSON.parse(JSON.stringify(this.chooseItemDataListByTree));
      if (arr.length == 0) {
        arr = chooseChannelNameList;
      } else {
        let status = false;
        for (let i in chooseChannelNameList) {
          let flag = false;
          for (let j in arr) {
            let tName = arr[j].label ? arr[j].label : arr[j].itemName;
            if (chooseChannelNameList[i].label == tName) {
              flag = true;
              if (!status) {
                status = true;
              }
              break;
            }
          }
          if (!flag) {
            arr.push(chooseChannelNameList[i]);
          }
        }
        if (status) {
          this.$message({
            message: '请注意，选择的点位中含有重复的项',
            type: 'warning'
          });
        }
      }
      this.handleCheckAllLeavesChange(false);
      this.$nextTick(() => {
        this.chooseItemDataListByTree = arr;
        this.isSelectAllItem = false;
        this.isSelectAllLeaves = false;
        this.leavesChooseList = [];
        // this.$refs.itemTree.setCheckedKeys([]);
        this.$refs.cTree.clearChecked()
      });
    },
    /** 将右边选择的点位移除 */
    removeCheckNodesBtnEvent() {
      let _temp = this.chooseItemDataListByTree;
      if (!_temp || _temp.length == 0) {
        return;
      }
      for (let i = _temp.length - 1; i >= 0; i--) {
        if (_temp[i].checked) {
          this.chooseItemDataListByTree.splice(i, 1);
        }
      }

      // 重置选择
      this.isSelectAllItem = false;
      // this.$refs.itemTree.setCheckedKeys([]);
      this.$refs.cTree.clearChecked()
      this.selectAllItem(false);
    },
    /** 将右边所有的点位移除 */
    removeAllCheckNodesBtnEvent() {
      if (this.chooseItemDataListByTree.length == 0) {
        return;
      }
      this.isSelectAllItem = false;
      this.chooseItemDataListByTree = [];
    },
    /** 点位全选事件 */
    selectAllItem(val) {
      this.$refs.pvcChoose.checkedAll(val);
    },
    /** 是否全部选中监听器 */
    checkChangeAllChoose(flag) {
      this.isSelectAllItem = flag;
    },
    /** 选中的点位信息 */
    checkChangeChoose(datas) {
      this.chooseItemDataListByTree = datas;
    },
    /** 复合筛选 */
    getCompositeScreen() {
      let params = {};
      params.id = this.queryParams.id
      params.chooseItemStr = this.queryParams.chooseItemStr
      params.needItemStr = JSON.stringify(this.queryParams.needItemStr)
      //得到选择的所有节点
      // const treeArr = this.$refs.itemTree.getCheckedNodes();
      const treeArr = this.$refs.cTree.getCheckedNodes()
      /*const treeQ = document.getElementsByClassName('el-tree cy-group-tree el-tree--highlight-current')[0]
        .getElementsByClassName('el-tree-node__content');
      let seTreeArr = []
      //赛选出需要的节点
      if (treeArr.length > 0) {
        for (let i = 0; i < treeQ.length; i++) {
          const parentClass = treeQ[i].parentElement.classList;
          if (parentClass.contains('is-current') && !parentClass.contains('is-hidden')) {
            // 选择的层级
            let treechild = treeQ[i].nextElementSibling.getElementsByClassName('el-tree-node__content');
            for (let j = 0; j < treechild.length; j++) {
              const clz = treechild[j].parentElement.classList;
              if (clz.contains('is-checked') && !clz.contains('is-hidden')) {
                seTreeArr.push(treechild[j].textContent)
              }
            }
            break;
          }
        }
      }*/
      let seTreeArr = []
      //赛选出需要的节点
      if (treeArr.length > 0) {
        let secondArr = []
        treeArr.forEach(v => {
          //if(v._level == 2){
            // 选择第三级节点
            if(secondArr.indexOf(v.label) < 0){
              secondArr.push(v.label)
              if(params.chooseItemStr.endsWith(v.label)){
                params.chooseItemStr = params.chooseItemStr.substring(0,params.chooseItemStr.indexOf('!@' + v.label))
              }
            }
          //}
        })
        seTreeArr = secondArr
      }
      params.nextItemStr = JSON.stringify(seTreeArr)
      if (!seTreeArr || seTreeArr.length == 0) {
        this.$message({
          message: '节点选择为空',
          type: 'warning'
        });
        return
      }
      if (!this.queryParams.needItemStr || this.queryParams.needItemStr.length == 0) {
        this.$message({
          message: '复合筛选属性不能为空',
          type: 'warning'
        });
        return
      }
      const loading = showLoading(this, "筛选中，请稍候···");
      getCompositeScreen(params).then((res) => {
        if (res.code === 200) {
          let treeData = this.chooseItemDataListByTree ? this.chooseItemDataListByTree : [];
          if (res.data && res.data.length > 0) {
            let lodArr = [];
            for (let j = 0; j < res.data.length; j++) {
              lodArr.push(res.data[j].fullPath ? res.data[j].label : res.data[j].itemName);
            }
            let status = false;
            let idArr = {}
            for (let i = 0; i < treeData.length; i++) {
              if (lodArr.indexOf(treeData[i].fullPath) !== -1) {
                idArr[lodArr.indexOf(treeData[i].fullPath)] = '1'
              }
            }
            for (let j = 0; j < res.data.length; j++) {
              if (!idArr[j]) {
                treeData.push(res.data[j])
              } else {
                status = true;
              }
            }
            if (status) {
              this.$message({
                message: '请注意，选择的点位中含有重复的项',
                type: 'warning'
              });
            }
          }
          //console.log(treeData)
          this.checkChangeAllLeaves(false);
          this.$nextTick(() => {
            this.chooseItemDataListByTree = treeData;
            this.isSelectAllItem = false;
            this.isSelectAllLeaves = false;
            this.leavesChooseList = [];
            // this.$refs.itemTree.setCheckedKeys([]);
            // this.$refs.itemTree.setCheckedNodes([]);
            this.$refs.cTree.clearChecked()
          });
          if (!res.data || res.data.length === 0) {
            this.$message({
              message: '没有筛选出符合条件的点位，请重新筛选',
              type: 'warning'
            });
          }
          loading.close()
        }
      }).catch((e) => {
        this.$message({
          message: e,
          type: 'warning'
        });
        loading.close()
      });
    },
    /** 查询所有模型数据 */
    getAllDataModel() {
      let queryParams = {
        page: 1,
        limit: 9999,
        operationRule: null
      }
      getAllDataModel(queryParams).then(res => {
        if (!res || !res.data) {
          this.$message({
            message: '数据查询失败！',
            type: 'warning'
          })
          return
        }
        this.dataModelList = res.data.dataModelList
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import './itemChooseTree.css';
@import '~@wsfe/ctree/dist/ctree.css';

.dialog-max {
  height: 85vh;

  .el-dialog__body {
    height: 72vh;
    overflow: hidden;
  }
}
</style>