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

<!--  -->
<template>
  <div>
<!--    面包屑，用来管理 首页>数据集管理>静态数据集，separator-class是设置面包屑中的分隔符>-->
    <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是分割线-->
    <el-divider class="divi"></el-divider>
    <div class="title_score">
      <!--   el-form 中添加   status-icon  可检测状态-->
<!--      el-form-item是表单-->
      <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是选择器-->
          <el-select v-model="dataInfo.classificationtag"
                     filterable
                     allow-create
                     ref='classfi'
                     @change="demo1()">
<!--            el-option下拉框绑定-->
            <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创建一个标签-->
              <el-tag style="  width: 100%;text-align: center;height: 31px">系统数据</el-tag>
            </div>
            <div class="leftDivTree"> <!-- 控制左边树形区域的下方的div -->
<!--              node-key是树节点的唯一标识,每棵树都是唯一的
                  :props配置选项，具体看下表
                  lazy是否懒加载子节点，需与 load 方法结合使用
                  draggable 属性可让节点变为可拖拽
                  allow-drag判断节点能否被拖拽
                  allow-drop拖拽时判定目标节点能否被放置
                  @node-drag-end拖拽结束时（可能未成功）触发的事件
                  -->
              <el-tree
                v-if="showTree"
                id='tree'
                node-key="coalid"
                :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鼠标放上去会显示文字-->
              <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">
<!--              divider是分割线，分割线中有张图片-->
              <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>
            <span  style="margin-right: 20px">{{detailTitle.worldName}}</span>
            <el-date-picker
              v-show="localUps.length === 0"
              v-model="selectTime"
              value-format="timestamp"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>
          <div style="margin-top: 10px;margin-left: 110px;">
            <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>-->
        <PythonKafkaTmp v-if="pythonKafkaVisible" ref="pythonKafkaTmp" ></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: ''
      },
      time: null,
      selectTime: [],
      measurepoint: [], // 你要的数据在这儿
      pythonKafkaVisible: false,
      dataListLoading: false,
      prewListLoading: false,
      classification: [],
      predatasetName: '数据集预览', // 预览是时候显示的表头信息
      // base_url: 'http://localhost:8086/',
      showTree: true, // 获取树的数据后 更新数据
      showInfo: false, // 属性数据预览
      showRiZhi: false, // 控制日志的显隐

      soutRiZhiInfo: '    -------------------------------info--------------------------   ' + '\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
      var onlyStatic = true
      this.yunXingUid = new Date().getTime()
      if (this.imsql.length === 0) {
        this.soutRizhi = '  ' + '没有选择设备数据，跳过....' + '\n\n' + '    开始 '
      } else {
        this.soutRizhi = '  ' + ' 检测设备状态完毕，开始抽取数据....' + '\n' + '   ....    ' + '\n' + '    开始 ' // 输出日志内容
        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
          }
        }

        for (let j = 0; j < this.imsql.length; j++) {
          this.imsql[j]['start'] = this.selectTime[0]
          this.imsql[j]['end'] = this.selectTime[1]
          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
            console.log('subresult.data:', subresult.data)
            this.soutRizhi = '  ' + context.info + '\n\n' + this.soutRizhi
          })
          onlyStatic = false
        }
        this.soutRizhi = '  ' + '设备数据抽取成功' + '\n\n' + this.soutRizhi
      }

      if (this.st_imsql.length > 0) {
        this.soutRizhi = '  开始组合本地数据' + '\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 = '  本地数据抽取完成，点击确定制作数据集' + '\n\n' + this.soutRizhi
      }

      this.soutRizhi = this.soutRiZhiInfo + 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/getprecontentlimit'),
        method: 'post',
        data: this.$http.adornData({
          'data': this.imsql,
          'start': this.selectTime[0],
          'end': this.selectTime[1]
        }, false)
      }).then(preDatas => {
        this.$http({
          url: this.$http.adornUrl('/dataset/staticup/getstapre'),
          method: 'post',
          data: this.$http.adornData({
            'data': preDatas.data.preContent,
            'limit': this.selectTime,
            '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.flag = 'subEquipment'
          // 看当前左侧属性栏显示的数据 ，是否为该设备 ，如果是，进行清除
          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.flag === 'subEquipment') {
        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.flag === 'subEquipment') {
        // 修改属性值，表示该节点已经拖拽过
        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: [{
            key: 0,
            prop: 'time',
            label: '时间',
            measurepointId: 'time' + Math.floor(Math.random() * 10000 + 1)
          }], // 数据库的字段名
          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.coalid
        console.log(subEquipment.sql.hbaseTableName + 'and' + subEquipment.sql.subEquipmentID)
        if (node.level === 1) {
          this.$http({
            url: this.$http.adornUrl('/universaltable/getRootLevel' + node.data.coalid),
            method: 'post'
          }).then(tablists => {
            let headers = tablists.data.data
            console.log('第二层headers:' + JSON.stringify(headers))
            if (headers) {
              console.log('xxxxxxxheaders', headers)
              for (let i = 0; i < headers.length; i++) {
                var list = {
                  key: i + 1,
                  label: headers[i].name,
                  type: headers[i].type,
                  // fieldId: response.data[i].fieldId,
                  measurepointId: headers[i].id,
                  flag: '未选中',
                  prop: headers[i].name,
                  seen: false
                }
                console.log('list:' + list)
                subEquipment.filedList.push(list)
              }
            }
          })
        }
        if (node.level > 1) {
          // 获取hbase 表头信息
          this.$http({
            url: this.$http.adornUrl('/universaltable/getOtherLeafItem?tableId=' + node.data.levelId + '&id=' + node.data.coalid),
            method: 'post'
          }).then(tablists => {
            let headers = tablists.data.data
            console.log('第三层及之后headers:' + JSON.stringify(headers))
            if (headers) {
              console.log('xxxxxxxheaders', headers)
              for (let i = 0; i < headers.length; i++) {
                var list = {
                  key: i + 1,
                  label: headers[i].name,
                  type: headers[i].type,
                  // fieldId: response.data[i].fieldId,
                  measurepointId: headers[i].id,
                  flag: '未选中',
                  seen: false,
                  prop: headers[i].name
                }
                console.log('list:' + list)
                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.flag === 'subEquipment') {
        this.detailTitle.worldName = node.data.name
        this.equimentClick()
      }
    },
    // 单击事件
    handleClick (id) {
      clearTimeout(this.time)  // 首先清除计时器
      this.time = setTimeout(() => {
        this.equimentClick(id)
      }, 300)
    },
    // 双击事件
    dblClick (id) {
      clearTimeout(this.time)  // 清除
      // 这里可以添加你自己双击事件的方法或者逻辑
      this.equimentDoubleClick(id)
    },
    equimentClick (id) {
      console.log('this.subEquipments[i]')
      this.dataListLoading = true
      for (let i = 0; i < this.subEquipments.length; i++) {
        if (id === this.subEquipments[i].id) {
          // 处理两次单击同一个设备
          console.log(this.subEquipments[i])
          if (this.detailTitle.worldName !== this.subEquipments[i].imageTable.tableName) {
            let l = []
            for (let j = 0; j < this.subEquipments[i].filedList.length; j++) {
              let o = this.subEquipments[i].filedList[j]
              if(o.prop!="time"){
                o.prop = o.prop + '_after'
              }
              l.push(o)
            }
            // this.tablelists = this.subEquipments[i].filedList
            console.log(this.tablelists)
            this.tablelists = l
            console.log('tablelists', this.tablelists)
            this.detailTitle.worldName = this.subEquipments[i].imageTable.tableName
            this.tableData = []
            // 获取右侧表格数据
            console.log('-----' + this.subEquipments[i].sql.hbaseTableName + ' and ' + this.subEquipments[i].sql.subEquipmentID)
            this.$http({
              url: this.$http.adornUrl('/dataset/dynamic/getContent'),
              method: 'post',
              data: this.$http.adornData(this.subEquipments[i].sql, false)
            }).then(contextResponse => {
              console.log('数据-----', JSON.parse(JSON.stringify(contextResponse.data.equmentAll)))
              if (contextResponse.data.code === 500) {
                this.tableData = []
              } else {
                const subeqpmContent = JSON.parse(JSON.stringify(contextResponse.data.equmentAll))
                this.tableData = subeqpmContent
                console.log('tabledata:', this.tableData)
              }
              this.dataListLoading = false
            })
          }
          this.showInfo = true
          break
        }
      }
      if (this.tableData.length > 0) {
        this.dataListLoading = false
        console.log('tableData的长度不为空')
      } else {
        console.log('tableData的长度为空')
      }
    },
    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
          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
              console.log('res.data:', 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
      var info = []
      for (let meas of this.measurepoint) {
        console.log('meas.indexOf(\'time\'):', meas.indexOf('time'))
        if (meas.indexOf('time') === -1) {
          info.push(meas)
        }
      }
      this.$nextTick(() => {
        this.$refs.pythonKafkaTmp.init(info.join())
      })
    },
    loadTreeNode (node, resolve) {
      let coalAll = []
      console.log('loadTreeNode')
      if (node.level === 0) {
        this.$http({
          url: this.$http.adornUrl('/levelManage/projectattributes/getAllProject'),
          method: 'post'
        }).then(({data}) => {
          console.log('后端返回的项目信息：' + JSON.stringify(data))
          if (!(data && data.code === 0)) {
            Message.error(data.msg)
          } else {
            let coalContent = data.data
            for (let sign = 0; sign < coalContent.length; sign++) {
              var coal = {
                name: coalContent[sign].name,
                coalid: coalContent[sign].id,
                limit: 'coal',
                hbaseTableName: '',
                icon: 'iconfont icon-xitongfuwu',
                leaf: false
              }
              if (data.data[sign].disabled === 0) {
                coal.isdisabled = 1
              } else {
                coal.isdisabled = 0
              }
              coal.treeNodeDeep = 1
              coalAll.push(coal)
            }
          }
          console.log(coalAll)
          return resolve(coalAll)
        })
      }
      if (node.level === 1) {
        if (node.data.isdisabled === 1) return resolve([])
        else {
          this.$http({
            url: this.$http.adornUrl('/universaltable/getRootLevel?id=' + node.data.coalid),
            method: 'post'
          }).then(({data}) => {
            console.log('第二层非叶子节点信息：' + JSON.stringify(data))
            let data1 = []
            let coalContent = data.data
            for (let j = 0; j < coalContent.length; j++) {
              let coal = {
                name: coalContent[j].name,
                coalid: coalContent[j].id,
                limit: 'coal',
                hbaseTableName: coalContent[j].hbaseTableName,
                icon: 'icon iconfont icon-xitongfuwu',
                // leaf: true,
                levelId: data.levelId,
                flag: 'subEquipment'
              }
              coal.treeNodeDeep = 2
              data1.push(coal)
            }
            return resolve(data1)
          })
        }
      }
      if (node.level > 1) {
        for (let i = 2; i < 50; i++) {
          if (node.level === i) {
            this.$http({
              url: this.$http.adornUrl('/universaltable/getSonLevel?tableId=' + node.data.levelId + '&id=' + node.data.coalid),
              method: 'post'
            }).then(({data}) => {
              console.log('第三次非叶子节点信息：' + JSON.stringify(data.data))
              let data2 = []
              let coalContent = data.data
              for (let j = 0; j < coalContent.length; j++) {
                let coal = {
                  name: coalContent[j].name,
                  coalid: coalContent[j].id,
                  limit: 'coal',
                  hbaseTableName: coalContent[j].hbaseTableName,
                  icon: 'icon iconfont icon-xitongfuwu',
                  // leaf: true,
                  levelId: data.levelId,
                  flag: 'subEquipment'
                }
                coal.treeNodeDeep = i + 1
                data2.push(coal)
              }
              return resolve(data2)
            })
          }
        }
      }
    }
        //   this.postRequest('/levelManage/projectattributes/getAllProject').then(response => {
        //     console.log('后端返回的项目信息：' + JSON.stringify(response.data))
        //     for (let i = 0; i < response.data.data.length; i++) {
        //       response.data.data[i].icon = 'iconfont icon-xuanze2'
        //       console.log(response.data.data[i].name + ' ' + response.data.data[i].disabled)
        //       if (response.data.data[i].disabled === 0) {
        //         response.data.data[i].isdisabled = 1
        //       } else {
        //         response.data.data[i].isdisabled = 0
        //       }
        //       response.data.data[i].treeNodeDeep = 1
        //       data.push(response.data.data[i])
        //     }
        //     return resolve(data);
        //   })
        // }
        // if (node.level === 1) {
        //   console.log('node.data.data.isdisabled:' + node.data.isdisabled)
        //   if (node.data.isdisabled === 1) return resolve([])
        //   else {
        //     let data = []
        //     this.postRequest('universaltable/getRootLevel?id=' + node.data.id).then(response => {
        //       console.log('第二层非叶子节点信息：' + JSON.stringify(response.data))
        //       for (let j = 0; j < response.data.data.length; j++) {
        //         response.data.data[j].icon = 'iconfont icon-xuanze2'
        //         response.data.data[j].levelId = response.data.levelId
        //         response.data.data[i].treeNodeDeep = 2
        //         response.data.data[j].flag = 'subEquipment'
        //         response.data.data[j].leaf = true
        //         data.push(response.data.data[j])
        //       }
        //       console.log('testPoint1 data:' + data)
        //       return resolve(data);
        //     })
        //   }
        // }
        // if (node.level > 1) {
        //   for (let i = 2; i < 50; i++) {
        //     if (node.level === i) {
        //       let data = []
        //       this.postRequest('/universaltable/getSonLevel?tableId=' + node.data.levelId + '&id=' + node.data.id).then(response => {
        //         console.log('第三次非叶子节点信息：' + JSON.stringify(response.data))
        //         for (let j = 0; j < response.data.data.length; j++) {
        //           response.data.data[j].icon = 'iconfont icon-xuanze2'
        //           response.data.data[j].flag = 'subEquipment'
        //           response.data.data[j].leaf = true
        //           response.data.data[j].levelId = response.data.levelId
        //           response.data.data[i].treeNodeDeep = i + 1
        //           data.push(response.data.data[j])
        //         }
        //       })
        //     }
        //   }
        // }
    // getCoal (resolve) {
    //   var coalData = {
    //     userID: this.userID
    //   }
    //   let coalAll = []
    //   this.$http({
    //     url: this.$http.adornUrl('/dataset/tree/getcoal'),
    //     method: 'post',
    //     data: this.$http.adornData(coalData, false)
    //   }).then(({data}) => {
    //     if (!(data && data.code === 0)) {
    //       Message.error(data.msg)
    //     } else {
    //       const coalContent = data.info
    //       for (let sign = 0; sign < coalContent.length; sign++) {
    //         var coal = {
    //           name: coalContent[sign].name,
    //           coalid: coalContent[sign].id,
    //           limit: 'coal',
    //           hbaseTableName: '',
    //           icon: 'iconfont icon-xitongfuwu',
    //           leaf: false
    //         }
    //         coalAll.push(coal)
    //       }
    //     }
    //     return resolve(coalAll)
    //     // console.log('***************')
    //     // console.log(coalAll)
    //   })
    // },
    // getSystem (coalId, resolve) {
    //   var coalData = {
    //     userID: this.userID,
    //     coalid: coalId
    //   }
    //   this.$http({
    //     url: this.$http.adornUrl('/dataset/tree/getfisystem'),
    //     method: 'post',
    //     data: this.$http.adornData(coalData, false)
    //   }).then(systemRespond => {
    //     let systemAll = []
    //     if (systemRespond.data.length <= 0) {
    //       Message.error(systemRespond.msg)
    //     } else {
    //       const systemContent = systemRespond.data
    //       for (let i = 0; i < systemContent.length; i++) {
    //         var system = {
    //           name: systemContent[i].name,
    //           systemid: systemContent[i].id,
    //           limit: 'system',
    //           icon: 'icon iconfont icon-xitongfuwu',
    //           hbaseTableName: '',
    //           leaf: false
    //         }
    //         systemAll.push(system)
    //       }
    //     }
    //     return resolve(systemAll)
    //   })
    // },
    // getSubSystem (systemid, resolve) {
    //   const systemData = {
    //     systemid: systemid,
    //     userID: this.userID
    //   }
    //   this.$http({
    //     url: this.$http.adornUrl('/dataset/tree/getsubSystem'),
    //     method: 'post',
    //     data: this.$http.adornData(systemData, false)
    //   }).then(subrespond => {
    //     let subSystemAll = []
    //     let subSystemContent = subrespond.data
    //     if (subSystemContent.length !== 0) {
    //       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,
    //     userID: this.userID
    //   }
    //   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) {
    //       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 = {
    //     userID: this.userID,
    //     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.getCoal(resolve)
    //   } else if (node.level === 1) {
    //     this.getSystem(node.data.coalid, resolve)
    //   } else if (node.level === 2) {
    //     this.getSubSystem(node.data.systemid, resolve)
    //   } else if (node.level === 3) {
    //     this.getEquipment(node.data.subSustemid, resolve)
    //   } else {
    //     this.getSubEquipment(node.data.equipmentid, resolve)
    //   }
    // }
    // // 左侧树的懒加载
    // 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>