aiplat_vue/src/views/modules/visi/create1.vue

<!--  -->
<template>
  <div >
    <el-breadcrumb class="divi2" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/visi-dataset'}">数据集管理</el-breadcrumb-item>
      <el-breadcrumb-item>静态数据集</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider class="divi"></el-divider>
    <div class="title_score">
      <!--   el-form 中添加   status-icon  可检测状态-->
      <el-form :inline="true"  ref = "dataInfo"  :model="dataInfo" :rules="datarules" class="demo-form-inline">
        <el-form-item label="数据集名称" prop="datasetName">
          <el-input style="width: 260px;" v-model="dataInfo.datasetName" placeholder="请输入数据集内容" ></el-input>
        </el-form-item>
        <el-form-item label="类别" prop="classificationtag" style="margin-left: 20px">
          <el-select v-model="dataInfo.classificationtag"
                     filterable
                     allow-create
                     ref = 'classfi'
                     @change="demo1()">
            <el-option style="width: 260px;" v-for="data in classification" :key="data.categoryId" :label="data.categoryName" :value="data.categoryId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注" prop="remarks" style="margin-left: 20px" >
          <el-input style="width: 300px;" v-model = "dataInfo.remarks"  ref = 'remarks' clearable placeholder="备注"  ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getPythonKafkaTmp()">获得代码模板</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="body">  <!-- 数据框整体大小 -->
      <div class="allDiv"> <!-- 初始界面 -->
        <div class="leftDiv">  <!-- 控制左边树形区域的div -->
          <div style="height: 60%">
            <div class="leftDivTitle"><!-- 控制左边树形区域的上方的div -->
              <el-tag style="  width: 100%;text-align: center;height: 31px">系统数据</el-tag>
            </div>
            <div class="leftDivTree"  > <!-- 控制左边树形区域的下方的div -->
              <el-tree
                v-if="showTree"
                id = 'tree'
                node-key="subEquipmentid"
                :props="treeDefaultProps"
                ref="tree"
                :load="loadTreeNode"
                lazy
                draggable
                :allow-drag="allowdrag"
                :allow-drop="allowDrop"
                @node-drag-end = "treeNodeDragEnd">
                <!--            @node-click="treeNodeClick">-->
                <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>
                    <i :class="data.icon" style="margin-right: 4px"></i>{{ node.label }}
                </span>
            </span>
              </el-tree>
            </div>
          </div>
          <div style="height: 35.7%;margin-top: 3.1%">
              <el-tag style="  width: 100%;text-align: center;border-top:0.2px solid #000;height: 31px">本地数据</el-tag>
            <div class="leftDivTree"  > <!-- 控制左边树形区域的下方的div -->
              <el-tree
                v-if="showTree"
                id = 'static_tree'
                :data="static_treedata"
                :props="treeDefaultProps"

                draggable
                :allow-drag="st_allowdrag"
                :allow-drop="st_allowDrop"
                @node-drag-end = "st_treeNodeDragEnd">
                <!--            @node-click="treeNodeClick">-->
                <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>
                  <i :class="data.icon" style="margin-right: 8px" ></i>{{ node.label }}
              </span>
          </span>
              </el-tree>
            </div>
          </div>
        </div>
        <div class="midDiv"> <!-- 控制中间区域的div -->
          <div class="midDivTop">
            <div class="midDivTopImg">
              <el-tooltip content="运行" placement="bottom-end" effect="dark">
                <i @mouseover="yunXingMouseOver"
                   @mouseleave="yunXingMouseLeave" id='yunXing' @click="yunXingClick"
                   style="height: 50px;width: 50px; margin: 10px 5px 10px 10px ;font-size: 23px;"
                   class="iconfont icon-yunXang"></i>
              </el-tooltip>
              <el-tooltip content="预览" placement="bottom-end" effect="dark">
                <i @mouseover="yuLanMouseOver"
                   @mouseleave="yuLanMouseLeave" id="yuLan" @click="preview"
                   style="height: 25px;width: 25px; margin: 10px 5px 10px 10px;font-size: 23px;"
                   class = 'iconfont icon-preview'>
                </i>
              </el-tooltip>
              <el-tooltip content="日志" effect="dark">
                <i @mouseover="riZhiMouseOver"
                   @mouseleave="riZhiMouseLeave" id="riZhi" @click=shourizhi()
                   style="height: 25px;width: 25px; margin: 10px 5px 10px 10px;font-size: 23px;"
                   class = 'iconfont icon-tishi'>
                </i>
              </el-tooltip>
            </div>
          </div> <!-- 控制中间区域的上方div -->
          <div class="midDivData">
            <div class="dy_datasourceDiv" id="dy_drag" @dragover="dragDragOver" @dragleave="dragDragLeave">
              <el-divider><i class=" icon iconfont icon-xitong2"></i></el-divider>
              <div v-for="subEquipment in subEquipments" :key="subEquipment.key" style="display: inline-block">
                <div style="margin-left: 10px; margin-top:10px" @mouseover="subEquipment.quXiao = true" @mouseleave="subEquipment.quXiao = false">
                  <i draggable="true" v-if="subEquipment.table"
                     style="margin: 5px 10px 10px 15px;vertical-align: middle"
                     :class=subEquipment.icon
                     @click="handleClick(subEquipment.id)"
                     @dblclick="dblClick(subEquipment.id)">
                  </i>
                  <i style="position: absolute;" :id = subEquipment.id v-if="subEquipment.quXiao"
                     @mouseover="quXiaoMouseOver(subEquipment.id)"
                     @mouseleave="quXiaoMouseLeave(subEquipment.id)"
                     @click="quXiao(subEquipment.id)"
                     class="iconfont icon-quxiao"></i>
                  <span class="demonstration"  style="vertical-align: middle;display: block;font-size: 1px; margin-top: 5px;text-align: center">{{ subEquipment.imageTable.tableName }}</span>
                </div>
              </div>
            </div>

            <div class="st_datasourceDiv" id="statle_drag" @dragover="st_dragDragOver" @dragleave="st_dragDragLeave">
              <el-divider><i class=" icon iconfont icon-local"></i></el-divider>
              <div v-for="localUp in localUps" :key="localUp.key" style="display: inline-block">
                <div style="margin-left: 10px; margin-top:10px" @mouseover="localUp.quXiao = true" @mouseleave="localUp.quXiao = false">
                  <i draggable="true" v-if="true"
                     style="margin: 5px 10px 10px 15px;vertical-align: middle"
                     :class=localUp.icon
                     @click="st_handleClick(localUp)"
                     @dblclick="st_dblClick(localUp)">
                  </i>

                  <i style="position: absolute;" :id = localUp.id v-if="localUp.quXiao"
                     @mouseover="quXiaoMouseOver(localUp.id)"
                     @mouseleave="quXiaoMouseLeave(localUp.id)"
                     @click="st_quXiao(localUp)"
                     class="iconfont icon-quxiao"></i>
                  <span class="demonstration"  style="    text-align: center;display: block;font-size: 1px; margin-top: 5px;">{{ localUp.indexContent }}</span>

                </div>
              </div>
            </div>

            <div class="rizhiDiv" v-if="showRiZhi">
              <el-tag>日志</el-tag>
              <div class="rizhiDivtext">
                <span v-text="soutRizhi"></span>
              </div>
            </div>
          </div><!-- 控制中间区域的数据输入区的div -->
        </div>
        <div class="rightDiv" v-if="true"> <!-- 控制右侧属性区域的div -->
          <el-tag style="  width: 100%;text-align: center;border-bottom: 0.2px solid #000000;" >{{detailTitle.worldName}}</el-tag>
              <el-table
                :data="tableData"
                :row-style="{height:'0'}"
                :cell-style="{padding:'0'}"
                v-loading = "dataListLoading"
                size="100%"
                height=95%
                border
              >
                <el-table-column v-for="tablelist in tablelists" :key="tablelist.id"
                                 :prop='tablelist.prop'
                                 :label="tablelist.label">
                </el-table-column>
              </el-table>
        </div>
      </div>
      <div class="pop"><!-- 各种弹窗 -->
        <!-- 子设备字段选择弹窗 -->
        <el-dialog title="子设备配置"
                   :close-on-click-modal="false"
                   :visible.sync="showEqumField"
                   width="40%"
                   @mouseover.native="showChooseAddTitle"
                   append-to-body>
          <div style="text-align: center;margin-top: -20px;">
            <span style="width: 10%">子设备名称 :   </span>
            <el-input v-model="detailTitle.worldName" style="margin-left: 20px; height:10%;width: 40%"></el-input>
          </div>
          <div style="margin-top: 10px;margin-left: 25px;">
            <el-transfer
              filterable
              :titles="['待选字段', '已选字段']"
              @change="changeMeasurepoint"
              v-model="sureSelect"
              :data="selectData"
            />
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="showEqumField = false">取 消</el-button>
            <el-button type="primary" @click="closeEqupField">确 定</el-button>
        </span>

        </el-dialog>
        <!-- 字段预览弹窗 -->
        <el-dialog title="预览"
                   :visible.sync="showPreview"
                   width="40%"
                   append-to-body>
          <el-tabs type="border-card">
            <el-tab-pane>
              <span slot="label">{{predatasetName}}</span>
              <!--              <i class="iconfont icon-xitong4"></i>-->
              <el-divider class="tableDivider"></el-divider>
              <el-table
                :data="preTableDate"
                height="250"
                border
                v-loading = 'prewListLoading'
                style="width: 100%">
                <el-table-column v-for="preTalblelist in preTalbelists" :key="preTalblelist.id"
                                 :prop="preTalblelist.prop"
                                 :label="preTalblelist.label"
                                 width="180">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <!--          <el-tab-pane label="word"></el-tab-pane>-->
            <!--          <el-tab-pane label="图片"></el-tab-pane>-->
          </el-tabs>
          <span slot="footer" class="dialog-footer">
     <el-button @click="showPreview = false">取 消</el-button>
     <el-button type="primary" @click="showPreview = false">确 定</el-button>
    </span>
        </el-dialog>
        <el-dialog custom-class="cron-box-dialog-first" :visible.sync="dialogVisible" v-if="dialogVisible">
          <mycron v-bind:extractionPeriod.sync="dataInfo.extractionPeriod"></mycron>
        </el-dialog>
<!--        本地数据上传-->
      <static-up-load-excel v-if="st_upShow.excel" ref="staticUploadExcel" > </static-up-load-excel>
        <staticup-load-csv v-if="st_upShow.word" ref="staticUploadCsv"></staticup-load-csv>
        <empty v-if="st_upShow.other" ref="othersUpload"></empty>
      </div>
    </div>
    <div style="text-align: right;margin-top: -135px;margin-right: 80px;position:relative;z-index: 999">
      <el-button >取消</el-button>
      <el-button type="primary" @click="stdySubmit(dataInfo) " >确定</el-button>
    </div>
    <PythonKafkaTmp v-if="pythonKafkaVisible" ref="pythonKafkaTmp" @refreshDataList="getDataList"></PythonKafkaTmp>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import mycron from './quartz/mycron'
import staticUpLoadExcel from './com/static_upLoad_excel'
import staticupLoadCsv from './com/static_upLoad_csv'
import empty from './com/empty'
import PythonKafkaTmp from '../alg/python-kafka-tmp.vue'
import { MessageBox } from 'element-ui'
import { Message } from 'element-ui'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {mycron, staticUpLoadExcel, empty, PythonKafkaTmp, staticupLoadCsv},
  data () {
    var checkExtractionPeriod = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('抽取周期不能为空'))
      } else {
        return callback()
      }
    }
    // 这里存放数据
    return {
      dataInfo: {
        datasetName: '', // 数据集名称
        classificationtag: 1,
        remarks: ''
      },

      measurepoint: [], // 你要的数据在这儿
      pythonKafkaVisible: false,
      dataListLoading: false,
      prewListLoading: false,
      classification: [],
      predatasetName: '数据集预览', // 预览是时候显示的表头信息
      // base_url: 'http://localhost:8086/',
      showTree: true, // 获取树的数据后 更新数据
      showInfo: false, // 属性数据预览
      showRiZhi: false, // 控制日志的显隐

      soutRiZhiSucess: '-------------------------------success--------------------------' + '\n\n',
      soutRizhi: '运行过程，将会显示在这儿 。再次点击日志图标，将关闭窗口', // 输出日志内容‘
      showPreview: false, // 控制预览窗口的显隐
      showTable: false,
      userID: this.$store.state.user.id, // 用户编号
      ildName: '', // 制作数据集时，之后留下的文件名称 方便改为用户指定的名字。
      subEquipments: [], // 存储拖拽的子设备
      yunXingUid: 0, // 点击运行后，命名产生的文件名
      localUps: [], // 存储本地上传的数据
      dragFlg: 0, // 判断是否拖拽至指定区域
      subEquipmentId: 0, // 拖拽子设备的id 从0开始
      st_upShow: {
        word: false,
        excel: false,
        pic: false,
        video: false,
        other: false
      }, // 本地文件上传
      localUpId: {
        id: 0,
        wordID: 0,
        excelID: 0,
        picID: 0,
        videoID: 0
      }, // 本地上传文件id
      selectData: [], // 存储子设备字段
      sureSelect: [], //  存储已经选择的子设备字段
      showEqumField: false, // 控制子设备段显隐
      imsql: [], // 向后台提交是数据 包括：所属煤矿、系统、子系统、设备等 以及选择的字段，hbase的地址
      st_imsql: [], // 向后台提交是本地数据
       // 记录当前双击的数据
      sign: {
        type: '',
        id: null
      },
      clicktime: null, // 用于解决双击会触发两次单击事件
      dialogVisible: false,
      detailTitle: { // 右侧属性框表头
        worldName: '属性信息'
      },
      tablelists: [], // 子设备字段名
      tableData: [], // 子设备数据
      preTalbelists: [{
        prop: 'ziduan',
        label: '字段'
      }], // 选择的子设备字段
      preTableDate: [], // 选择的子设备字段对应的数据
      static_treedata: [{
        icon: 'iconfont icon-Word',
        name: '文本数据    ',
        limit: 'word'
      }, {
        icon: 'iconfont icon-Excel',
        name: 'excel数据    ',
        limit: 'excel'
      }, {
        icon: 'iconfont icon-tupian',
        name: '图片数据    ',
        limit: 'pic'
      }, {
        icon: 'iconfont icon-shipin_huabanfuben',
        name: '视频数据    ',
        limit: 'video'
      }],
      treeDefaultProps: {
        children: 'children',
        label: 'name',
        isLeaf: 'leaf'
      },
      datarules: {
        datasetName: [
          { required: true, message: '请输入数据集名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        extractionPeriod: [
          { validator: checkExtractionPeriod, trigger: 'blur' }
        ]
      }

    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    'dataInfo.datasetName' (oldval, newval) {
      this.predatasetName = newval + '预览'
    },
    'dataInfo.extractionPeriod' () {
      this.$refs['dataInfo'].validateField('extractionPeriod')
    }
  },
  // 方法集合
  methods: {
        // 手动给穿梭框内容添加title
    showChooseAddTitle (e) {
      // let dom = e.target;
      // if (dom.title) return;
      // dom.title = dom.innerText;
    },
    changeMeasurepoint (value, direction, movedKeys) {
      let measurepointID

      // 对于静态数据集  字段也会触发  从而造成undefined 错误    但是对于数据不影响                      ***************************************************
      for (let i = 0; i < movedKeys.length; i++) {
        const sign = movedKeys[i]

        measurepointID = this.selectData[sign].measurepointId

        if (direction === 'right') {
          this.measurepoint.push(measurepointID)
        } else {
          this.measurepoint.splice(this.measurepoint.indexOf(measurepointID), 1)
        }
      }
    },
    demo1 () {
      if (typeof this.dataInfo.classificationtag !== 'number') {
        MessageBox.confirm(
          `确定新增分类[${this.dataInfo.classificationtag}]?`,
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          this.$http({
            url: this.$http.adornUrl(`/category/save`),
            method: 'post',
            data: this.$http.adornData({
              'categoryId': undefined,
              'categoryName': this.dataInfo.classificationtag
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              // 更新this.dataInfo.classificationtag 为最新的分类ID
              this.classificationList()
              this.$refs.classfi.blur()
              this.$refs.remarks.focus()

              //  = this.dataInfo.classificationtag
            }
          })
        }).catch(() => {
          this.dataInfo.classificationtag = ''
        })
      }
    },
    yunXingMouseOver () {
      document.getElementById('yunXing').className = 'iconfont icon-yunXang1'
    },
    yunXingMouseLeave () {
      document.getElementById('yunXing').className = 'iconfont icon-yunXang'
    },
    async yunXingClick () {
      this.showRiZhi = true
      this.soutRizhi = '检测设备状态完毕，开始抽取数据....' + '\n\n' + '....' // 输出日志内容
      this.yunXingUid = new Date().getTime()
      for (let i = 0; i < this.imsql.length; i++) {
        if (i === 0) {
          this.imsql[i].oldFileName = this.userID + '_' + this.imsql[i].subEquipmentID + '_' + this.imsql[i].id
          this.imsql[i].newFileName = this.imsql[i].oldFileName
          if (this.imsql.length === 1) {
            this.imsql[i].oldFileName = this.userID + '_' + this.yunXingUid
            this.imsql[i].newFileName = this.userID + '_' + this.yunXingUid
          }
        } else if (i === this.imsql.length - 1) {
          this.imsql[i].oldFileName = this.imsql[i - 1].newFileName
          this.imsql[i].newFileName = this.userID + '_' + this.yunXingUid
        } else {
          this.imsql[i].oldFileName = this.imsql[i - 1].newFileName
          this.imsql[i].newFileName = this.userID + '_' + this.imsql[i].subEquipmentID + '_' + this.imsql[i].id
        }
      }
      var onlyStatic = true
      for (let j = 0; j < this.imsql.length; j++) {
        await this.$http({
          url: this.$http.adornUrl('/dataset/dynamic/makeDyDataSet'),
          method: 'post',
          data: this.$http.adornData(this.imsql[j], false)
        }).then(subresult => {
          var context = subresult.data

          this.soutRizhi = context.info + '\n\n' + this.soutRizhi
        })
        onlyStatic = false
      }

      if (this.st_imsql.length > 0) {
        this.soutRizhi = '\n' + '开始组合本地数据' + '\n\n' + this.soutRizhi
      }
      for (let i = 0; i < this.st_imsql.length; i++) {
        if (i === 0) {
          this.st_imsql[i].oldFileName = this.userID + '_' + this.yunXingUid
          this.st_imsql[i].newFileName = this.st_imsql[i].oldFileName
          if (this.st_imsql.length === 1) {
            this.st_imsql[i].oldFileName = this.userID + '_' + this.yunXingUid
            this.st_imsql[i].newFileName = this.userID + '_' + this.yunXingUid
          }
        } else if (i === this.st_imsql.length - 1) {
          this.st_imsql[i].oldFileName = this.st_imsql[i - 1].newFileName
          this.st_imsql[i].newFileName = this.userID + '_' + this.yunXingUid
        } else {
          this.st_imsql[i].oldFileName = this.st_imsql[i - 1].newFileName
          this.st_imsql[i].newFileName = this.userID + '_' + this.st_imsql[i].subEquipmentID + '_' + this.st_imsql[i].id
        }
      }
      for (let sti = 0; sti < this.st_imsql.length; sti++) {
        var massage = {
          'st_imsql': this.st_imsql[sti],
          'onlyStatic': onlyStatic
        }
        await this.$http({
          url: this.$http.adornUrl('/dataset/static/makeStaticDataSet'),
          method: 'post',
          data: this.$http.adornData(massage, false)
        }).then(subresult => {
          this.soutRizhi = subresult.data.info + '\n\n' + this.soutRizhi
        })
      }
      this.soutRizhi = this.soutRiZhiSucess + '静态数据测试抽取完成，点击确定制作数据集' + '\n\n' + this.soutRizhi
    },
    yuLanMouseOver () {
      document.getElementById('yuLan').className = 'iconfont icon-preview1'
    },
    yuLanMouseLeave () {
      document.getElementById('yuLan').className = 'iconfont icon-preview'
    },
    preview () {
      this.prewListLoading = true
      this.preTalbelists = [] // 将原始默认数据清空
      for (var i = 0; i < this.imsql.length; i++) {
        for (let j = 0; j < this.imsql[i].chosedata.length; j++) {
          this.preTalbelists.push({
            prop: this.imsql[i].subEquipmentID + '_' + this.imsql[i].chosedata[j],
            label: this.imsql[i].subEquipmentID + '_' + this.imsql[i].chosedataZh[j]
          })
        }
      }

      // 加载静态 列数据
      for (let sti = 0; sti < this.st_imsql.length; sti++) {
        for (let stj = 0; stj < this.st_imsql[sti].sql.length; stj++) {
          this.preTalbelists.push({
            prop: this.st_imsql[sti].id + '_' + this.st_imsql[sti].sql[stj],
            label: this.st_imsql[sti].sql[stj]
          })
        }
      }
      // 获取数据
      this.$http({
        url: this.$http.adornUrl('/dataset/dynamic/getprecontent'),
        method: 'post',
        data: this.$http.adornData(this.imsql, false)
      }).then(preDatas => {
        this.$http({
          url: this.$http.adornUrl('/dataset/staticup/getstapre'),
          method: 'post',
          data: this.$http.adornData({
            'data': preDatas.data.preContent,
            'loacl': this.st_imsql
          }, false)
        }).then(res => {
          this.preTableDate = res.data.data
          this.prewListLoading = false
        })
      })
      this.showPreview = true
    },
    riZhiMouseOver () {
      document.getElementById('riZhi').className = 'iconfont icon-tishi1'
    },
    riZhiMouseLeave () {
      document.getElementById('riZhi').className = 'iconfont icon-tishi'
    },
    shourizhi () {
      this.showRiZhi = !this.showRiZhi
    },
    quXiaoMouseOver (id) {
      document.getElementById(id).className = 'iconfont icon-quxiao1'
    },
    quXiaoMouseLeave (id) {
      document.getElementById(id).className = 'iconfont icon-quxiao'
    },
    quXiao (id) {
      this.dataListLoading = false
      for (let i = 0; i < this.subEquipments.length; i++) {
        // 找到对应的设备 删除

        if (id === this.subEquipments[i].id) {
          this.$refs.tree.getNode(this.subEquipments[i].sql.subEquipmentID).data.icon = 'iconfont icon-xitong3'
          this.$refs.tree.getNode(this.subEquipments[i].sql.subEquipmentID).data.limit = 'children'
          // 看当前左侧属性栏显示的数据 ，是否为该设备 ，如果是，进行清除
          if (this.detailTitle.worldName === this.subEquipments[i].imageTable.tableName) {
            this.detailTitle.worldName = '属性信息'
            this.tablelists = []
            this.tableData = []
          }

          // 删除对应的测量点ID
          this.subEquipments[i].filedList.forEach((info) => {
            var number = this.measurepoint.indexOf(info)
            if (number === -1) {
              this.measurepoint.splice(number, 1)
            }
          })

          // 删除
          this.subEquipments.splice(i, 1)
        }
      }
      for (let j = 0; j < this.imsql.length; j++) {
        if (id === this.imsql[j].id) {
          this.imsql.splice(j, 1)
        }
      }
    },

    st_quXiao (info) {
      for (let i = 0; i < this.localUps.length; i++) {
        if (info.id === this.localUps[i].id) {
          this.localUps.splice(i, 1)
          if (this.detailTitle.worldName === info.fileName) {
            this.detailTitle.worldName = '属性信息'
            this.tablelists = []
            this.tableData = []
          }
        }
      }
      for (let j = 0; j < this.st_imsql.length; j++) {
        if (info.id === this.st_imsql[j].id) {
          this.st_imsql.splice(j, 1)
        }
      }
    },

    allowdrag (node) {
      if (node.data.limit === 'children') { return true }
    },
    allowDrop () {
      return false // 设置树节点内不可拖拽
    },
    dragDragOver (e) {
      this.dragFlg = 1
      e.preventDefault()
    },
    dragDragLeave (e) {
      this.dragFlg = 0
    },
    st_allowdrag (node) {
      if (node.data.limit === 'word' || node.data.limit === 'excel' || node.data.limit === 'pic' || node.data.limit === 'video') { return true }
    },
    st_allowDrop () {
      return false // 设置树节点内不可拖拽
    },
    st_dragDragOver (e) {
      this.dragFlg = 0
      this.st_dragFlg = 1
      e.preventDefault()
    },
    st_dragDragLeave (e) {
      this.st_dragFlg = 0
    },
    st_treeNodeDragEnd (node) {
      if (this.st_dragFlg === 1) {
        var localUp = {
          id: this.localUpId.id,
          table: false, // 子设备图标显隐显隐
          nodeId: node.id,
          quXiao: false, // 子设备上方取消图标的显隐
          fileName: '',  // 文件名
          upUrl: '',  // 上传后的地址
          indexContent: '', // 图片上方的内容
          filedList: [], // 数据库中子设备字段名
          sureSelectList: [], // 选择的子设备字段名
          icon: '', // 使用的图标
          icons: [], // 所有图标
          type: '', // 文件类型
          isUp: false // 是否已经上传文件

        }
        this.localUpId.id++
        if (node.data.limit === 'word') {
          localUp.icons.push('iconfont icon-Word')
          localUp.icons.push('iconfont icon-Word1')
          localUp.icon = localUp.icons[0]
          this.localUpId.wordID++
          localUp.indexContent = 'word_' + this.localUpId.wordID
          localUp.type = 'word'
        }
        if (node.data.limit === 'excel') {
          localUp.icons.push('iconfont icon-Excel')
          localUp.icons.push('iconfont icon-Excel1')
          localUp.icon = localUp.icons[0]
          this.localUpId.excelID++
          localUp.indexContent = 'excel_' + this.localUpId.excelID
          localUp.type = 'excel'
        }
        if (node.data.limit === 'pic') {
          localUp.icons.push('iconfont icon-tupian')
          localUp.icons.push('iconfont icon-tupian1')
          localUp.icon = localUp.icons[0]
          this.localUpId.picID++
          localUp.indexContent = '图片_' + this.localUpId.picID
          localUp.type = 'pic'
        }
        if (node.data.limit === 'video') {
          localUp.icons.push('iconfont icon-shipin_huabanfuben')
          localUp.icons.push('iconfont icon-shipin_huabanfuben1')
          localUp.icon = localUp.icons[0]
          this.localUpId.videoID++
          localUp.indexContent = '视频_' + this.localUpId.videoID
          localUp.type = 'video'
        }
        this.localUps.push(localUp)
        this.st_dragFlg = 0
      }
    },
    treeNodeDragEnd (node) {
      if (this.dragFlg === 1 && node.data.limit === 'children') {
        // 修改属性值，表示该节点已经拖拽过
        node.data.limit = 'children-1'
        node.data.icon = 'iconfont icon-xitong4'
        // this.$set(node.data, 'icon', 'iconfont icon-xitong4')

        const subEquipment = {
          id: this.subEquipmentId,
          table: false, // 子设备图标显隐显隐
          nodeId: node.id,
          quXiao: false, // 子设备上方取消图标的显隐
          indexContent: '', // 图片上方的内容
          selectList: [], // 数据库中子设备字段名
          sureSelectList: [], // 选择的子设备字段名
          filedList: [], // 数据库的字段名
          icon: 'icon iconfont icon-xitong1', // 图标
          sql: {
            id: '', // 记录对应的节点id
            coal: '', // 所属煤矿
            system: '', // 所属系统
            subsystem: '', // 所属子系统
            equipment: '', // 所属设备
            subEquipment: '', // 子设备名称
            subEquipmentID: '', // 子设备名称id
            hbaseTableName: '', // 子设备对应的数据存放地址
            userID: this.userID, // 执行操作的用户id
            chosedata: []//  选择子设备的字段
          },
          imageTable: {
            tableName: '',
            tableDB: ''
          }
        }
        subEquipment.imageTable.tableName = node.data.name
        subEquipment.imageTable.tableDB = node.parent.data.name
        subEquipment.sql.hbaseTableName = node.data.hbaseTableName
        subEquipment.sql.subEquipmentID = node.data.subEquipmentid

        // 获取hbase 表头信息
        this.$http({
          url: this.$http.adornUrl('/dataset/dynamic/getheads'),
          method: 'post',
          data: this.$http.adornData(subEquipment.sql, false)
        }).then(tablists => {
          var headers = tablists.data.hbaseTableHeaders
          if (headers) {
            for (let i = 0; i < headers.length; i++) {
              var list = {
                key: i,
                measurepointId: headers[i].measurepointId,
                prop: headers[i].name_en,
                label: headers[i].name_zh
              }
              subEquipment.filedList.push(list)
            }
          }
        })
        //
        // // 拖拽结束后，如果属性区域没显示数据，自动显示拖拽的设备
        // if (this.tablelists.length === 0) {
        //   this.detailTitle.worldName = node.data.name
        //   this.tablelists = subEquipment.filedList
        // }
        this.subEquipments.push(subEquipment)

        this.subEquipmentId = this.subEquipmentId + 1
        for (let i = 0; i < this.subEquipments.length; i++) {
          if (node.id === this.subEquipments[i].nodeId) {
            this.subEquipments[i].table = true
            this.subEquipments[i].indexContent = this.subEquipments[i].imageTable.tableDB + '.' + this.subEquipments[i].imageTable.tableName
            this.subEquipments[i].quXiao = false
          }
        }
        this.dragFlg = 0
      }
    },
    treeNodeClick (data, node) {
      if (node.data.limit === 'children') {
        this.detailTitle.worldName = node.data.name
        this.equimentClick()
      }
    },
    handleClick (id) {
      this.equimentClick(id)
      clearTimeout(this.clicktime) // 首先清除计时器
      this.clicktime = setTimeout(() => {
        // 这里执行你自己的方法或者业务逻辑
        this.equimentClick(id)
      }, 300)
    },
    // 双击事件
    dblClick (id) {
      clearTimeout(this.clicktime) // 清除
      // 这里可以添加你自己双击事件的方法或者逻辑
      this.equimentDoubleClick(id)
    },

    equimentClick (id) {
      this.dataListLoading = true
      for (let i = 0; i < this.subEquipments.length; i++) {
        if (id === this.subEquipments[i].id) {
          // 处理两次单击同一个设备
          if (this.detailTitle.worldName !== this.subEquipments[i].imageTable.tableName) {
            this.tablelists = this.subEquipments[i].filedList
            this.detailTitle.worldName = this.subEquipments[i].imageTable.tableName
            this.tableData = []
            // 获取右侧表格数据
            this.$http({
              url: this.$http.adornUrl('/dataset/dynamic/getContent'),
              method: 'post',
              data: this.$http.adornData(this.subEquipments[i].sql, false)
            }).then(contextResponse => {
              if (contextResponse.data.code === 500) {
                this.tableData = []
              } else {
                // console.log(contextResponse)
                const subeqpmContent = JSON.parse(JSON.stringify(contextResponse.data.equmentAll))

                this.tableData = subeqpmContent
              }
              this.dataListLoading = false
            })
          }

          this.showInfo = true
          break
        }
      }
      if (this.tableData.length > 0) {
        this.dataListLoading = false
      }
    },
    equimentDoubleClick (id) {
      this.showEqumField = true
      for (let i = 0; i < this.subEquipments.length; i++) {
        if (id === this.subEquipments[i].id) {
          // 构造向后台传输的数据
          this.subEquipments[i].sql.id = this.subEquipments[i].id
          this.subEquipments[i].sql.equipment = this.subEquipments[i].imageTable.tableDB
          this.subEquipments[i].sql.subEquipment = this.subEquipments[i].imageTable.tableName

          this.sign = {
            type: 'system',
            id: id
          }
          this.selectData = [] // 将原始字段置空
          this.sureSelect = this.subEquipments[i].sureSelectList
          this.selectData = this.subEquipments[i].filedList
          // if (this.subEquipments[i].selectList.length === 0) { // 判断是否已有字段数据

          //   this.axios.post(this.base_url + 'getcolumns', this.subEquipments[i].sql).then(response => {
          //     for (let j = 0; j < response.data.length; j++) {
          //       this.selectData.push({
          //         key: j,
          //         label: response.data[j].name
          //       })
          //     }
          //   })
          //   this.subEquipments[i].selectList = this.selectData
          // } else {

          //   this.selectData = this.subEquipments[i].selectList
          // }
          break
        }
      }
    },
    closeEqupField () {
      this.showEqumField = false

      // 根据选择的ID 找出对应的字段名 存储在sql 中
      const chooseFiledEn = []
      const chooseFiledZh = []
      for (let i = 0; i < this.sureSelect.length; i++) {
        const sign = this.sureSelect[i]
        chooseFiledEn.push(this.selectData[sign].prop)
        chooseFiledZh.push(this.selectData[sign].label)
      }
      // 保存已经选择的字段
      if (this.sign.type === 'system') {
        for (let i = 0; i < this.subEquipments.length; i++) {
          if (this.sign.id === this.subEquipments[i].id) {
            // console.log(this.subEquipments[i])
            this.subEquipments[i].sureSelectList = this.sureSelect
            this.subEquipments[i].sql.chosedata = chooseFiledEn
            this.subEquipments[i].sql.chosedataZh = chooseFiledZh
            var imsign = true
            for (let j = 0; j < this.imsql.length; j++) {
              if (this.imsql[j].id === this.subEquipments[i].sql.id) { // 判断设备数据是否已添加到列表中
                this.imsql[j] = this.subEquipments[i].sql // 更新数据
                imsign = false
              }
            }
            if (this.subEquipments[i].sureSelectList.length > 0) {
              this.subEquipments[i].icon = 'icon iconfont icon-xitong1_1'
            } else {
              this.subEquipments[i].icon = 'icon iconfont icon-xitong1'
            }
            if (imsign) {
              this.imsql.push(this.subEquipments[i].sql)
            }

            break
          }
        }
      } else if (this.sign.type === 'local') {
        for (let j = 0; j < this.localUps.length; j++) {
          if (this.sign.id === this.localUps[j].id) {
            this.localUps[j].sureSelectList = this.sureSelect
            this.localUps[j].sql = chooseFiledEn

            var st_im = {
              id: this.localUps[j].id,
              userID: this.userID,
              sql: this.localUps[j].sql,
              upUrl: this.localUps[j].upUrl,
              type: this.localUps[j].type,
              fileName: this.localUps[j].fileName
            }
            var stmsign = true
            for (let sj = 0; sj < this.st_imsql.length; sj++) {
              if (this.st_imsql[sj].id === st_im.id) { // 判断设备数据是否已添加到列表中
                this.st_imsql[sj] = st_im // 更新数据
                stmsign = false
              }
            }
            if (stmsign) {
              this.st_imsql.push(st_im)
            }
          }
        }
      }

      // 保存
    },
    stdySubmit (dataInfo) {
      if (this.yunXingUid === 0) {
        Message.info('请先点击运行')
        return
      }
      this.$refs['dataInfo'].validate((valid) => {
        if (!valid) {
          return false
        } else {
          if (typeof this.dataInfo.classificationtag !== 'number') {
            for (let clss of this.classification) {
              if (clss.categoryName === this.dataInfo.classificationtag) {
                this.dataInfo.classificationtag = clss.categoryId
                break
              }
            }
          }

          var info = {
            oldname: this.userID + '_' + this.yunXingUid, // 制作数据集使用的原始名字   便于后台用于将原数据集 重命名
            datasetName: this.dataInfo.datasetName, // 数据集名称
            remarks: this.dataInfo.remarks,
            classification: this.dataInfo.classificationtag,
            userId: this.userID
          }

          MessageBox.confirm(`确定新建静态数据集?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$http({
              url: this.$http.adornUrl('/dataset/static/stSubmit'),
              method: 'post',
              data: this.$http.adornData(info, false)
            }).then(res => {
              var resContent = res.data
              if (resContent && resContent.code === 0) {
                Message({
                  message: '数据集' + this.dataInfo.datasetName + '创建成功',
                  type: 'success'
                })
                this.$router.replace({path: '/visi-dataset', query: {'status': '1'}})
                this.$destroy()
              } else {
                Message({
                  message: '数据集' + this.dataInfo.datasetName + '创建失败',
                  type: 'error'
                })
              }
            })
          }).catch(() => {})
        }
      })
    },
    st_handleClick (info) {
      clearTimeout(this.clicktime) // 首先清除计时器
      this.clicktime = setTimeout(() => {
        // 这里执行你自己的方法或者业务逻辑
        this.st_equimentClick(info)
      }, 300)
    },
    // 双击事件
    st_dblClick (id) {
      clearTimeout(this.clicktime) // 清除
      // 这里可以添加你自己双击事件的方法或者逻辑
      this.st_equimentDoubleClick(id)
    },
    st_equimentClick (info) {
      if (!info.isUp) {
        if (info.type === 'excel') {
          this.st_upShow.excel = true
          this.$nextTick(() => {
            this.$refs.staticUploadExcel.init(info)
          })
        } else if (info.type === 'word') {
          this.st_upShow.word = true
          this.$nextTick(() => {
            this.$refs.staticUploadCsv.init(info)
          })
        } else {
          this.st_upShow.other = true
          this.$nextTick(() => {
            this.$refs.othersUpload.init(info)
          })
        }
      } else {
        this.dataListLoading = true
        this.tableData = []
        this.tablelists = []
        this.detailTitle.worldName = info.fileName
        this.tablelists = info.filedList
        this.tableData = info.excelData
        this.dataListLoading = false
      }
    },
    st_equimentDoubleClick (info) {
      if (!info.isUp) {
        if (info.type === 'excel') {
          this.st_upShow.excel = true
          this.$nextTick(() => {
            this.$refs.staticUploadExcel.init(info)
          })
        } else if (info.type === 'word') {
          this.st_upShow.word = true
          this.$nextTick(() => {
            this.$refs.staticUploadCsv.init(info)
          })
        } else {
          this.st_upShow.other = true
          this.$nextTick(() => {
            this.$refs.othersUpload.init(info)
          })
        }
      } else {
        this.selectData = []
        this.sureSelect = info.sureSelectList
        this.showEqumField = true
        this.selectData = info.filedList
        this.sign = {
          type: 'local',
          id: info.id
        }
      }
    },
    classificationList () {
      this.classification = []
      this.$http({
        url: this.$http.adornUrl('/category/select'),
        method: 'get'
      }).then(({ data }) => {
        var ss = []
        for (var i = 0; i < data.list.length; i++) {
          ss[i] = data.list[i]
        }
        this.classification = Array.from(new Set(ss))
      })
    },
    // 获取代码模板
    getPythonKafkaTmp () {
      this.pythonKafkaVisible = true
      this.$nextTick(() => {
        this.$refs.pythonKafkaTmp.init(this.measurepoint.join())
      })
    },
    getSubSystem (resolve) {
      this.$http({
        url: this.$http.adornUrl('/dataset/tree/getsubSystem'),
        method: 'post'
      }).then(subrespond => {
        let subSystemAll = []
        let subSystemContent = subrespond.data
        if (subSystemContent.length === 0) {
          Message.error(subrespond.msg)
        } else {
          for (let j = 0; j < subSystemContent.length; j++) {
            var subSystem = {
              name: subSystemContent[j].name,
              subSustemid: subSystemContent[j].id,
              limit: 'subSystem',
              icon: 'iconfont icon-xitongfuwu',
              leaf: false
            }
            subSystemAll.push(subSystem)
          }
        }
        return resolve(subSystemAll)
      })
    },
    getEquipment (subSustemid, resolve) {
      const subSystemData = {
        subSystemid: subSustemid
      }
      this.$http({
        url: this.$http.adornUrl('/dataset/tree/getequipment'),
        method: 'post',
        data: this.$http.adornData(subSystemData, false)
      }).then(eqprespond => {
        let equipmentAll = []
        const eqpSystemContent = eqprespond.data
        if (eqpSystemContent.length === 0) {
          Message.error(eqprespond.msg)
        } else {
          for (let k = 0; k < eqpSystemContent.length; k++) {
            var equipment = {
              name: eqpSystemContent[k].name,
              equipmentid: eqpSystemContent[k].id,
              limit: 'equipment',
              hbaseTableName: '',
              icon: 'iconfont icon-xitongfuwu',
              leaf: false
            }
            equipmentAll.push(equipment)
          }
        }
        return resolve(equipmentAll)
      })
    },
    getSubEquipment (equipmentid, resolve) {
      const equimentData = {
        equipment: equipmentid
      }
      this.$http({
        url: this.$http.adornUrl('/dataset/tree/getsubequipment'),
        method: 'post',
        data: this.$http.adornData(equimentData, false)
      }).then(subEqpRespond => {
        let subEquimentAll = []
        const subEqpSystemContent = subEqpRespond.data
        if (subEqpSystemContent.length === 0) {
          Message.error(subEqpRespond.msg)
        } else {
          for (let m = 0; m < subEqpSystemContent.length; m++) {
            var subEquiment = {
              name: subEqpSystemContent[m].name,
              subEquipmentid: subEqpSystemContent[m].id,
              hbaseTableName: subEqpSystemContent[m].hbaseTableName,
              limit: 'children',
              icon: 'iconfont icon-xitong3',
              leaf: true
            }
            subEquimentAll.push(subEquiment)
          }
        }
        return resolve(subEquimentAll)
      })
    },
    // 左侧树的懒加载
    loadTreeNode (node, resolve) {
      if (node.level === 0) {
        this.getSubSystem(resolve)
      } else if (node.level === 1) {
        this.getEquipment(node.data.subSustemid, resolve)
      } else {
        this.getSubEquipment(node.data.equipmentid, resolve)
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  mounted () {
    this.classificationList()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  created () {},
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
.divi2 {
  display: block;
  height: 1px;
  width: 100%;
  position: relative;
}

.divi {
  display: block;
  height: 1px;
  width: 100%;
  margin: 24px 0;
  background-color: #dcdfe6;
}

.title_score{
  margin-top: 30px;
  margin-left: 180px;
}

.body {
  min-width: 1250px;
  height: 800px;
  position: relative;
  margin: 1px 25px 0px 100px;
}
.allDiv{
  width: 100%;
  height: 80%;
  border-left: 0.2px solid #000;
}
.leftDiv{
  width: 20%;
  height: 100%;
  float: left;
  border-bottom:0.2px solid #000;
  border-top:0.2px solid #000;
  /*//overflow-y: auto;*/
}
.leftDivTree{
  width: 100%;
  height: 93.7%;
  overflow: scroll;
}

.el-tree {
  display: inline-block;
  min-width: 100%;

}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.midDiv{
  width: 49.5%;
  height: 100%;
  float: left;
  border-top:0.2px solid #000;
  border-bottom:0.2px solid #000;
  border-left:0.2px solid #000;
  overflow-y: scroll;
}
.midDivTop{
  height:6.3%;
  width: 100%;
}
.midDivTopImg{
  /*padding-top: 5px;*/
  /*height: 31px;*/
}

.midDivData{
  width: 100%;
  height: 93.7%;
  margin-top: -10px;
  background: url("../../../assets/datasetImg/background.png");
}
.dy_datasourceDiv {
  width: 100%;
  height: 60%;
}
.st_datasourceDiv {
  width: 100%;
  height: 32.3%;
}
.dy_datasourceDiv  .el-divider--horizontal
{
  margin: 0;
}
.st_datasourceDiv .el-divider--horizontal
{
  margin: 0;
}
.rizhiDiv{
  width: 49.3%;
  height:15%;
  position: absolute;
  margin-top: -5.8%;
  margin-left: 2px;
  /*overflow：auto*/
  /*bottom: 12.6px;*/
}
.rizhiDivtext{
  width: 100%;
  height: 75.5%;
  font-size: 1px;
  /*border: 0.2px solid #000;*/
  overflow: auto;
  margin-top: 10px;
  /*background: #ffff;*/
  white-space: pre-wrap;
}
.rightDiv{
  width: 30%;
  height: 100%;
  float: left;
  overflow: auto;
  /*padding: 2px;*/
  border:0.5px solid #000;
}
.icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.el-tree.iconfont{
  margin-right: 100px;
}
</style>