algorithm-platform-vue/src/views/modules/visi/create2.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 v-model="dataInfo.datasetName" placeholder="请输入数据集内容"></el-input>
        </el-form-item>
        <el-form-item label="抽取周期" prop="extractionPeriod">
          <el-input  v-model="dataInfo.extractionPeriod" placeholder="请输入抽取周期"  clearable
                     @focus="dialogVisible = true">

          </el-input>
        </el-form-item>
        <!--        <el-form-item label="抽取次数">-->
        <!--          <el-input-->
        <!--            placeholder="请输入抽取次数"-->
        <!--            v-model="dataInfo.extractioNumber"-->
        <!--            maxlength = '10'-->
        <!--            minlength = ‘1’-->
        <!--            oninput="value=value.replace(/[^\d]/g, '')"-->
        <!--            clearable>-->
        <!--          </el-input>-->
        <!--        </el-form-item>-->
        <el-form-item label="类别" prop="classificationtag">
          <el-select v-model="dataInfo.classificationtag"
                     filterable
                     allow-create
                     ref = 'classfi'
                     @change="demo1()">
            <el-option 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" >
          <el-input v-model = "dataInfo.remarks"  ref = 'remarks' clearable placeholder="备注"  ></el-input>
        </el-form-item>

        <!-- 测试一下获得python-kafka模板 -->
        <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 class="leftDivTitle"><!-- 控制左边树形区域的上方的div -->
            <el-tag style="  width: 100%;text-align: center;">系统数据</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 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="datasourceDiv" id="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="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>
          <!--          <el-tabs type="border-card" >-->
          <!--            <el-tab-pane label="表数据预览" >-->
          <!--              <el-tag style="  width: 100%;text-align: center;" >{{detailTitle.worldName}}</el-tag>-->
          <!--              <el-table-->
          <!--                :data="tableData"-->
          <!--                :row-style="{height:'0'}"-->
          <!--                :cell-style="{padding:'0'}"-->
          <!--                size="100%"-->
          <!--                height="428"-->
          <!--                border-->
          <!--              >-->
          <!--                <el-table-column v-for="tablelist in tablelists" :key="tablelist.id"-->
          <!--                                 :prop='tablelist.prop'-->
          <!--                                 :label="tablelist.label">-->
          <!--                </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>-->
        </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"
                v-loading ='prewListLoading'
                border
                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>
      </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="dySubmit(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 PythonKafkaTmp from '../alg/python-kafka-tmp.vue'
import { MessageBox } from 'element-ui'
import { Message } from "element-ui"
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    mycron,
    PythonKafkaTmp
  },
  data () {
    var checkExtractionPeriod = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('抽取周期不能为空'))
      } else {
        return callback()
      }
    }
    // 这里存放数据
    return {
      dataInfo: {
        datasetName: '', // 数据集名称
        extractionPeriod: '', // 抽取周期
        extractioNumber: '', // 抽取次数
        classificationtag: 1,
        remarks: ''
      },
      measurepoint: [], // 你要的数据在这儿
      pythonKafkaVisible: false,
      dataListLoading: false,
      prewListLoading: false,
      classification: [],
      predatasetName: '数据集预览', // 预览是时候显示的表头信息
      // base_url: 'http://localhost:8086/',
      showTree: true, // 获取树的数据后 更新数据
      showInfo: false, // 属性数据预览
      showRiZhi: false, // 控制日志的显隐
      soutRizhi: '运行过程，将会显示在这儿 。再次点击日志图标，将关闭窗口', // 输出日志内容
      showPreview: false, // 控制预览窗口的显隐
      showTable: false,
      // userID: '666', // 用户编号
      userID: this.$store.state.user.id,
      userName: this.$store.state.user.name,
      ildName: '', // 制作数据集时，之后留下的文件名称 方便改为用户指定的名字。
      subEquipments: [], // 存储拖拽的子设备
      yunXingUid: 0, // 点击运行后，命名产生的文件名
      dragFlg: 0, // 判断是否拖拽至指定区域
      subEquipmentId: 0, // 拖拽子设备的id 从0开始
      selectData: [], // 存储子设备字段
      sureSelect: [], //  存储已经选择的子设备字段
      showEqumField: false, // 控制子设备段显隐
      imsql: [], // 向后台提交是数据 包括：所属煤矿、系统、子系统、设备等 以及选择的字段，hbase的地址
      sign: 0, // 标记双击图标选择的ID 用于记录选择的字段数据
      clicktime: null, // 用于解决双击会触发两次单击事件
      dialogVisible: false,
      detailTitle: { // 右侧属性框表头
        worldName: '属性信息'
      },
      tablelists: [], // 子设备字段名
      tableData: [], // 子设备数据
      preTalbelists: [{
        prop: 'ziduan',
        label: '字段'
      }], // 选择的子设备字段
      preTableDate: [], // 选择的子设备字段对应的数据
      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
      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 = ''
        })
      }
    },
    // 新增 / 修改
    addOrUpdateHandle (id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    yunXingMouseOver () {
      document.getElementById('yunXing').className = 'iconfont icon-yunXang1'
    },
    yunXingMouseLeave () {
      document.getElementById('yunXing').className = 'iconfont icon-yunXang'
    },
    async yunXingClick () {
      this.showRiZhi = true
      this.soutRizhi = '检测设备状态完毕，开始抽取数据....' + '\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
        }
      }
      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 = this.soutRizhi + '\n' + context.info
        })
      }
      this.soutRizhi = this.soutRizhi + '\n' + '动态数据测试抽取完成，点击确定制作数据集'
    },
    yuLanMouseOver () {
      document.getElementById('yuLan').className = 'iconfont icon-preview1'
    },
    yuLanMouseLeave () {
      document.getElementById('yuLan').className = 'iconfont icon-preview'
    },
    preview () {
      this.preTalbelists = true
      this.prewListLoading = true   // 打开预览等待
      this.preTalbelists = [] // 将原始默认数据清空
      for (let 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].subEquipment + '.' + this.imsql[i].chosedataZh[j]

          })
        }
      }
      // 获取数据
      this.$http({
        url: this.$http.adornUrl('/dataset/dynamic/getprecontent'),
        method: 'post',
        data: this.$http.adornData(this.imsql, false)
      }).then(preDatas => {
        const Content = preDatas.data.preContent

        this.preTableDate = [] // 清空之前是数据
        for (var c = 0; c < Content.length; c++) {
          this.preTableDate.push(Content[c])
          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)
        }
      }
    },
    allowdrag (node) {
      if (node.data.limit === 'children') { return true }
    },
    allowDrop () {
      return false // 设置树节点内不可拖拽
    },
    dragDragOver (e) {
      this.dragFlg = 1
      e.preventDefault()
    },
    dragDragLeave (e) {
      this.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) {
      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 {
                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 = 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)
      }
      // 保存已经选择的字段
      for (let i = 0; i < this.subEquipments.length; i++) {
        if (this.sign === this.subEquipments[i].id) {
          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
        }
      }
    },
    dySubmit (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, // 数据集名称
            extractionPeriod: this.dataInfo.extractionPeriod, // 抽取周期
            // extractioNumber: this.dataInfo.extractioNumber, // 抽取次数
            remarks: this.dataInfo.remarks,
            classification: this.dataInfo.classificationtag,
            imsql: this.imsql,
            userID: this.userID,
            sign: 1
          }

          MessageBox.confirm(`是否新建动态数据集?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
              this.$http({
              url: this.$http.adornUrl('/dataset/dynamic/dySubmit'),
              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': '2'}})
                this.$destroy()
              } else {
                Message({
                  message: '数据集' + this.dataInfo.datasetName + '创建失败',
                  type: 'error'
                })
              }
            })
          }).catch(() => {})



        }
      })
    },
    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;*/
}

.midDivData{
  width: 100%;
  height: 93.7%;
  margin-top: -10px;
  background: url("../../../assets/datasetImg/background.png");
}
.datasourceDiv {
  width: 100%;
  height: 100%;
}
.datasourceDiv  .el-divider--horizontal
{
  margin: 0;
}
.rizhiDiv{
  width: 49.3%;
  height:15%;
  position: absolute;
  margin-top: -8.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;
  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>