aiplat_vue/src/views/modules/snoop/measure.vue

<!--  -->
<template>
  <div class=''>
    <el-breadcrumb class="divi2" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/snoop-home'}">数据质量探测</el-breadcrumb-item>
      <el-breadcrumb-item>创建度量标准</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider class="divi"></el-divider>
   <div v-loading="loading">
    <el-steps :active="active" align-center finish-status="success" style="margin: 50px 20px 0px 10px;">
      <el-step title="选择目标" description="选择需要度量的目标数据集字段"></el-step>
      <el-step title="定义/选择模型" description="定义将应用于所选字段的语法检查逻辑"></el-step>
      <el-step title="分区配置" description="设置目标数据集的分区配置"></el-step>
      <el-step title="完成" description="设置模型的基本配置"></el-step>
    </el-steps>
    <div style=" margin: 10px 120px 0px 166px;height: 420px;">
      <el-row :gutter="50">
        <div v-if="active == 0">
          <el-col :span="8" style="height: 100% ">
            <h4>1.1 选择数据源</h4>
            <div style="height: 360px;border: 1px solid rgb(0, 0, 0);overflow: scroll; ">
              <div style="margin: 10px;"> <!-- 控制左边树形区域的下方的div -->
                <el-tree
                  v-if="showTree"
                  id='tree'
                  node-key="subEquipmentid"
                  :props="defaultProps"
                  ref="tree"
                  :load="loadTreeNode"
                  lazy
                  @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>
          </el-col>
          <el-col :span="16" style="height: 100%">
            <h4>1.2 选择字段</h4>
            <div style="height: 360px;border: 1px solid rgb(0, 0, 0) ;padding: 10px;    overflow: auto;">
              <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <el-table-column
                  prop="colname"
                  label="列名"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="type"
                  label="类型"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="comment"
                  label="备注"
                  show-overflow-tooltip>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </div>

        <div v-if="active == 1">
          <el-col :span="16" style="height: 100%;margin-left: 160px;">
            <h4>2. 请选择下列其中一种分析模式 :</h4>
            <div style="height: 360px;border: 1px solid rgb(0, 0, 0) ;padding: 10px;overflow-scrolling: auto">
              <el-table
                :data="goal_info.chooseCloum"
                style="width: 100%">
                <el-table-column prop="colname" label="列名" width="120"></el-table-column>
                <el-table-column prop="type" label="类型" width="120"></el-table-column>
                <el-table-column prop="comment" label="rule" show-overflow-tooltip>
                  <template slot="header" slot-scope="scope">
                    <span>rule</span>
                    <i class="el-icon-info"
                       :class="isShowRules"
                       @mouseover="isShowRules.showRules = true"
                       @mouseleave="isShowRules.showRules = false"
                       @click="showrule"
                    ></i>
                  </template>

<!--                  <template slot="header">-->

<!--                    <i class="el-icon-info"-->
<!--                       @mouseover="isShowRules.showRules = true"-->
<!--                       @mouseleave="isShowRules.showRules = false"-->
<!--                       @click="showrule"></i>-->
<!--                  </template>-->

                  <template slot-scope="scope" style="width: 80%">
                    <!--                                        <el-button type="text" size="small" @click="userwatch(scope)">查看-->
                    <!--                                        </el-button>-->

                    <el-select
                      v-model="scope.row.rule"
                      multiple
                      filterable
                      style="width: 80%"
                      placeholder="请选择">
                      <el-option-group
                        v-for="group in scope.row.dropdownList"
                        :key="group.label"
                        :label="group.label"

                      >
                        <el-option
                          v-for="item in group.options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-option-group>

                    </el-select>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </div>

        <div v-if="active == 2">
          <el-col :span="16" style="height: 100%;margin-left: 160px;">
            <h4>3. 配置信息 :</h4>
            <div style="height: 360px;overflow-scrolling: auto">
              <h5>度量配置 ： </h5>
              <el-form ref="form" :model="datacForm" label-width="100px" :rules="rules">
                <el-form-item label="度量名称 :" prop="name">
                  <el-input v-model="datacForm.name"></el-input>
                </el-form-item>
                <el-form-item label="度量描述 :">
                  <el-input v-model="datacForm.description" onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"></el-input>
                </el-form-item>

                <h5>数据源配置 ： </h5>
                <el-form-item label="查询条件 :">
                  <el-input v-model="datacForm.where"></el-input>
                </el-form-item>
                <el-form-item label="分区大小 :">
                  <el-input-number v-model="datacForm.num" controls-position="right" :min="0"></el-input-number>
                  <el-select v-model="datacForm.timetype" placeholder="请选择">
                    <el-option label="day" value="day"></el-option>
                    <el-option label="hour" value="hour"></el-option>
                    <el-option label="minute" value="minute"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="时 区 :">
                  <el-select v-model="datacForm.timezone" placeholder="请选择">
                    <el-option
                      v-for="item in timezones"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>

                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </div>

        <div v-if="active == 3">
          <el-col :span="16" style="height: 100%;margin-left: 160px;">
            <h4>4. 信息校对 :</h4>
            <div style="height: 360px;overflow-scrolling: auto">

              <el-form ref="measureform" :model="goal_info" label-width="100px" :rules="rules">
                <el-form-item label="度量名称 :" prop="name">
                  <!--                  <el-input v-model="goal_info.config.name"></el-input>-->
                  <span>{{ goal_info.config.name }}</span>
                </el-form-item>
                <el-form-item label="度量描述 :">
                  <span>{{ goal_info.config.description }}</span>
                  <!--                  <el-input v-model="goal_info.config.description"></el-input>-->
                </el-form-item>
                <el-form-item label="数据源 :">
                  <span>{{ goal_info.equipment.name }}</span>
                  <!--                  <el-input v-model="goal_info.equipment.name"></el-input>-->
                </el-form-item>
                <!--                <el-form-item label="查询条件 :">-->
                <!--                  <span>{{goal_info.config.where}}</span>-->
                <!--&lt;!&ndash;                  <el-input v-model="goal_info.config.where"></el-input>&ndash;&gt;-->
                <!--                </el-form-item>-->
                                <el-form-item label="分区信息 :">
                                  <span>{{goal_info.config.num  + "  " + goal_info.config.timetype + " " + goal_info.config.timezone}}</span>
<!--                                  <el-input v-model="goal_info.config.num" >{{goal_info.config.num + goal_info.config.timetype}}</el-input>-->
<!--                                  <el-input v-model="goal_info.config.timezone"></el-input>-->
                                </el-form-item>
                <el-form-item label="度量规则 :">
                  <!--                  <el-input-number v-model="datacForm.num" controls-position="right" :min="0"></el-input-number>-->
                  <div style="height: 100px;overflow: auto">
                    <template v-for="rule in  goal_info.chooseCloum">
                      <li>{{ rule.colname }} : {{ rule.rule }}</li>
                    </template>

                    <!--    <template v-for="rule in  timezones" >-->
                    <!--      <li>{{rule.label}} : {{rule.value}}</li>-->
                    <!--    </template>-->
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </div>
      </el-row>


    </div>
    <el-form :inline="true">
      <el-form-item style="float:left">
        <el-button type="primary" @click="preStey()" :disabled = bottonDisable.pre>上一步</el-button>
      </el-form-item>
      <el-form-item style="float:right">
        <el-button v-if="!buttonFinish" ref="buttonFinish" type="primary" @click="next()" :disabled = bottonDisable.next>下一步</el-button>
        <el-button v-if="buttonFinish" type="primary" @click="submitForm()" >完成</el-button>
      </el-form-item>
    </el-form>
   </div>
    <show-rules v-if="isShowRulesDrog" ref="ShowRulesDrogref"></show-rules>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import showRules from './showRules'
import { MessageBox } from 'element-ui'
import { Message } from 'element-ui'

export default {
  created () {

  },
  components: {
    showRules
  },
  data () {
    return {
      value: [],
      loading: false,
      showTree: true,
      visible: false,
      chooseEqpment: '',
      active: 0,
      goal_info: {},
      hiveTable: '',
      userID: this.$store.state.user.id, // 用户编号
      // userName: this.$store.state.user.name, // 用户编号
      userName: 'test', // 用户编号
      submit: false,
      isShowRules: {
        showRules: false
      },

      transrule: [],
      transenumrule: [],
      transnullrule: [],
      transregexrule: [],
      newMeasure: {},
      rulesDesc: [],

      buttonFinish: false,
      bottonDisable: {
        pre: true,
        next: true
      },
      rules: {
        name: [
          {required: true, message: '请输入度量名称', trigger: 'blur'},
          {min: 3, max: 18, message: '长度在 3 到 18 个字符', trigger: 'blur'}
        ]
      },
      isShowRulesDrog: false,
      datacForm: {
        name: '',
        description: '',
        where: '',
        timezone: '',
        num: 1,
        timetype: 'day',
        needpath: false,
        path: ''
      },
      options_int: [{
        label: 'Simple Statistics',
        options: [{
          id: 1,
          value: 'Null Count',
          label: 'Null Count'
        }, {
          id: 2,
          value: 'Distinct Count',
          label: 'Distinct Count'
        }]
      }, {
        label: 'Summary Statistics',
        options: [{
          id: 3,
          value: 'Total Count',
          label: 'Total Count'
        }, {
          id: 4,
          value: 'Maximum',
          label: 'Maximum'
        }, {
          id: 5,
          value: 'Minimum',
          label: 'Minimum'
        }, {
          id: 6,
          value: 'Average',
          label: 'Average'
        }]
      }, {
        label: 'Advanced Statistics',
        options: [{
          id: 7,
          value: 'Enum Detection Top10 Count',
          label: 'Enum Detection Top10 Count'
        }]
      }
      ],
      options_str: [{
        label: 'Simple Statistics',
        options: [{
          id: 1,
          value: 'Null Count',
          label: 'Null Count'
        }, {
          id: 2,
          value: 'Distinct Count',
          label: 'Distinct Count'
        }]
      }, {
        label: 'Summary Statistics',
        options: [{
          id: 3,
          value: 'Total Count',
          label: 'Total Count'
        }]
      }, {
        label: 'Advanced Statistics',
        options: [{
          id: 9,
          value: 'Enum Detection Top10 Count',
          label: 'Enum Detection Top10 Count'
        }]
      }
      ],
      treedata: [{ // 左侧默认树数据'
        icon: 'el-icon-success',
        name: '煤矿',
        limit: '',
        children: [{
          name: '系统',
          limit: '',
          children: [{
            name: '子系统',
            limit: '',
            children: [{
              name: '设备',
              limit: '',
              children: [{

                name: '子设备',
                limit: ''
              }]
            }]
          }]
        }]
      }, {
        name: '系统666',
        limit: '',
        children: [{
          name: '设备2',
          limit: ''
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'name',
        isLeaf: 'leaf'
      },
      tableData: [],
      timezones: [
        {label: 'UTC-12(IDL)', value: 'GMT-12'},
        {label: 'UTC-11(MIT)', value: 'GMT-11'},
        {label: 'UTC-10(HST)', value: 'GMT-10'},
        {label: 'UTC-9:30(MSIT)', value: 'GMT-9:30'},
        {label: 'UTC-9(AKST)', value: 'GMT-9'},
        {label: 'UTC-8(PST)', value: 'GMT-8'},
        {label: 'UTC-7(MST)', value: 'GMT-7'},
        {label: 'UTC-6(CST)', value: 'GMT-6'},
        {label: 'UTC-5(EST)', value: 'GMT-5'},
        {label: 'UTC-4(AST)', value: 'GMT-4'},
        {label: 'UTC-3:30(NST)', value: 'GMT-3:30'},
        {label: 'UTC-3(SAT)', value: 'GMT-3'},
        {label: 'UTC-2(BRT)', value: 'GMT-2'},
        {label: 'UTC-1(CVT)', value: 'GMT-1'},
        {label: 'UTC(WET,GMT)', value: 'GMT'},
        {label: 'UTC+1(CET)', value: 'GMT+1'},
        {label: 'UTC+2(EET)', value: 'GMT+2'},
        {label: 'UTC+3(MSK)', value: 'GMT+3'},
        {label: 'UTC+3:30(IRT)', value: 'GMT+3:30'},
        {label: 'UTC+4(META)', value: 'GMT+4'},
        {label: 'UTC+4:30(AFT)', value: 'GMT+4:30'},
        {label: 'UTC+5(METB)', value: 'GMT+5'},
        {label: 'UTC+5:30(IDT)', value: 'GMT+5:30'},
        {label: 'UTC+5:45(NPT)', value: 'GMT+5:45'},
        {label: 'UTC+6(BHT)', value: 'GMT+6'},
        {label: 'UTC+6:30(MRT)', value: 'GMT+6:30'},
        {label: 'UTC+7(IST)', value: 'GMT+7'},
        {label: 'UTC+8(EAT)', value: 'GMT+8'},
        {label: 'UTC+8:30(KRT)', value: 'GMT+8:30'},
        {label: 'UTC+9(FET)', value: 'GMT+9'},
        {label: 'UTC+9:30(ACST)', value: 'GMT+9:30'},
        {label: 'UTC+10(AEST)', value: 'GMT+10'},
        {label: 'UTC+10:30(FAST)', value: 'GMT+10:30'},
        {label: 'UTC+11(VTT)', value: 'GMT+11'},
        {label: 'UTC+11:30(NFT)', value: 'GMT+11:30'},
        {label: 'UTC+12(PSTB)', value: 'GMT+12'},
        {label: 'UTC+12:45(CIT)', value: 'GMT+12:45'},
        {label: 'UTC+13(PSTC)', value: 'GMT+13'},
        {label: 'UTC+14(PSTD)', value: 'GMT+14'}
      ]

    }
  },
  methods: {

    next () {
      // if (this.active++ > 2) this.active = 0
      this.active++
      switch (this.active) {
        case 0 :
          // console.log('000')
          break
        case 1 :
          this.bottonDisable.pre = false
          break
        case 2 :
          break
        case 3 :
          this.goal_info.config = this.datacForm
          this.buttonFinish = true
          // console.info(this.$refs.buttonFinish)
          break
        default :
          // console.log('000')
      }
    },
    preStey () {
      // if (this.active-- < 0) this.active = 3
      this.active--
      this.buttonFinish = false
      if (this.active <= 0) {
        this.bottonDisable.pre = true
        this.bottonDisable.next = true
      }
    },
    treeNodeClick (data, node) {
      this.tableData = []
      if (data.limit === 'children') {
        // node.data.icon = 'iconfont icon-xitong4'
        this.chooseEqpment = data

        // 进行ajax 请求
        this.hiveTable = 'ods_' + this.chooseEqpment.hbaseTableName.replaceAll('-', '_')
        // table = this.chooseEqpment.hbaseTableName
        console.log(this.hiveTable)
        var info = {
          db: 'db=bigdatawh',
          table: 'table=' + this.hiveTable
        }
        this.$http({
          url: this.$http.adornUrl('/v1/metadata/hive/table?') + info.db + '&' + info.table,
          method: 'get'
        }).then((data) => {
          if (data.status === 200) {
            var res = data.data.sd.cols
            for (const resKey in res) {
              var table = {
                colname: res[resKey].name,
                type: res[resKey].type,
                comment: res[resKey].comment
              }
              this.tableData.push(table)
            }
          } else {
            Message({
              message: '获取   ' + this.chooseEqpment.name + '   列数据失败',
              type: 'error'
            })
          }
        })
        // this.tableData = [{
        //   colname: 'id',
        //   type: 'bigint',
        //   comment: '测试字段1'
        // }, {
        //   colname: 'age',
        //   type: 'int',
        //   comment: '测试字段2'
        // }, {
        //   colname: 'desc',
        //   type: 'string',
        //   comment: '测试字段3'
        // }]
      }
    },
    handleSelectionChange (data) {
      if (data.length > 0) {
        this.bottonDisable.next = false
      } else {
        this.bottonDisable.next = true
      }
      this.goal_info = {
        equipment: this.chooseEqpment,
        chooseCloum: data
      }
      // chooseCloum.cloum = data
      var patt = new RegExp('int|double|float/i')
      if (patt.test(this.type)) {
        this.isNum = true
      }
      for (let da of data) {
        if (patt.test(da.type)) {
          da.isNum = true
          da.dropdownList = this.options_int
        } else {
          da.isNum = false
          da.dropdownList = this.options_str
        }
      }
    },
    showrule () {
      this.isShowRulesDrog = true
      this.$nextTick(() => {
        this.$refs.ShowRulesDrogref.init()
      })
    },
    // 向后台提交数据
    async finallySubmit () {
      this.loading = true
      this.newMeasure = {
        'name': this.goal_info.config.name,
        'measure.type': 'griffin',
        'dq.type': 'PROFILING',
        'rule.description': {
          'details': this.rulesDesc
        },
        'process.type': 'BATCH',
        'owner': this.userName,
        'description': this.goal_info.config.description,
        'data.sources': [
          {
            'name': 'source',
            'connector': {
              'name': 'source' + new Date().getTime(),
              'type': 'HIVE',
              'version': '1.2',
              'data.unit': this.goal_info.config.num + this.goal_info.config.timetype,
              'data.time.zone': this.goal_info.config.timezone,
              'config': {
                'database': 'bigdatawh',
                'table.name': this.hiveTable,
                // 'database': 'default',
                // 'table.name': 'demo_src',
                'where': this.goal_info.config.where
              }
            }
          }
        ],
        'evaluate.rule': {
          'out.dataframe.name': 'profiling',
          rules: []
        }
      }
      this.getGrouprule()
      // console.log(666)
      // console.log(this.newMeasure)
      await this.$http({
        url: this.$http.adornUrl('/v1/measures'),
        method: 'post',
        data: this.$http.adornData(this.newMeasure)
      }).then((datas) => {
        console.log(datas)
        if (datas.status === 201) {
          this.submit = true
        } else {
          this.submit = false
        }
      })
    },
    submitForm () {
      this.finallySubmit()
      setTimeout(() => {
        this.loading = true
        if (this.submit) {
          Message({
            message: '度量标准   ' + this.datacForm.name + '   创建成功',
            type: 'success'
          })
        } else {
          Message({
            message: '度量标准   ' + this.datacForm.name + '   创建失败',
            type: 'error'
          })
        }
        this.loading = false
        this.$router.replace({path: '/snoop-home', query: {'status': '0'}})
        this.$destroy()

      }, 2 * 1000)
    },
    getGrouprule () {
      var selected = {name: ''}
      var value = ''
      var nullvalue = ''
      var nullname = ''
      var enmvalue = ''
      var regexvalue = ''
      var regexname = ''
      var grpname = ''
      for (const key in this.goal_info.chooseCloum) {
        selected.name = this.goal_info.chooseCloum[key].colname
        let info = ''
        let otherinfo = ''
        for (let i = 0; i < this.goal_info.chooseCloum[key].rule.length; i++) {
          const originrule = this.goal_info.chooseCloum[key].rule[i]
          info = info + originrule + ','

          if (originrule === 'Enum Detection Top10 Count') {
            enmvalue = this.transferRule(originrule, selected)
            grpname = `${selected.name}_top10count`
            this.transenumrule.push(enmvalue)
            this.pushEnmRule(enmvalue, grpname)
          } else if (originrule === 'Null Count') {
            nullvalue = this.transferRule(originrule, selected)
            nullname = `${selected.name}_nullcount`
            this.transnullrule.push(nullvalue)
            this.pushNullRule(nullvalue, nullname)
          } else if (originrule === 'Empty Count') {
            nullvalue = this.transferRule(originrule, selected)
            nullname = `${selected.name}_emptycount`
            this.transnullrule.push(nullvalue)
            this.pushNullRule(nullvalue, nullname)
          } else if (originrule === 'Regular Expression Detection Count') {
            selected['regex'] = ''
            regexvalue = this.transferRule(originrule, selected)
            regexname = `${selected.name}_regexcount`
            this.transregexrule.push(regexvalue)
            this.pushRegexRule(regexvalue, regexname)
          } else {
            otherinfo = otherinfo + originrule + ','
            value = this.transferRule(originrule, selected)
            this.transrule.push(value)
          }
        }

        info = info.substring(0, info.lastIndexOf(','))
        this.rulesDesc.push({
          name: this.goal_info.chooseCloum[key].colname,
          infos: info
        })
      }
      if (this.transrule.length !== 0) {
        this.getRule(this.transrule)
      }
    },
    getRule (trans) {
      var rule = ''
      for (let i of trans) {
        rule = rule + i + ','
      }
      rule = rule.substring(0, rule.lastIndexOf(','))
      this.pushRule(rule)
    },
    pushEnmRule (rule, grpname) {
      this.newMeasure['evaluate.rule'].rules.push({
        'dsl.type': 'griffin-dsl',
        'dq.type': 'PROFILING',
        rule: rule,
        'out.dataframe.name': grpname,
        'out': [
          {
            'type': 'metric',
            'name': grpname,
            'flatten': 'array'
          }
        ]
      })
    },
    pushNullRule (rule, nullname) {
      this.newMeasure['evaluate.rule'].rules.push({
        'dsl.type': 'griffin-dsl',
        'dq.type': 'PROFILING',
        rule: rule,
        'out.dataframe.name': nullname
      })
    },

    pushRegexRule (rule, nullname) {
      this.newMeasure['evaluate.rule'].rules.push({
        'dsl.type': 'griffin-dsl',
        'dq.type': 'PROFILING',
        rule: rule,
        'out.dataframe.name': nullname
      })
    },

    pushRule (rule) {
      this.newMeasure['evaluate.rule'].rules.push({
        'dsl.type': 'griffin-dsl',
        'dq.type': 'PROFILING',
        rule: rule,
        name: 'profiling'
      })
    },
    transferRule (rule, col) {
      switch (rule) {
        case 'Total Count':
          return (
            `count(source.${col.name}) AS \`${col.name}_count\``
          )
        case 'Distinct Count':
          return (
            `approx_count_distinct(source.${col.name}) AS \`${col.name}_distcount\``
          )
        case 'Null Count':
          return (
            `count(source.${col.name}) AS \`${col.name}_nullcount\` WHERE source.${col.name} IS NULL`
          )
        case 'Maximum':
          return (
            `max(source.${col.name}) AS \`${col.name}_max\``
          )
        case 'Minimum':
          return (
            `min(source.${col.name}) AS \`${col.name}_min\``
          )
        case 'Average':
          return (
            `avg(source.${col.name}) AS \`${col.name}_average\``
          )
        case 'Empty Count':
          return (
            `count(source.${col.name}) AS \`${col.name}_emptycount\` WHERE source.${col.name} = ''`
          )
        case 'Regular Expression Detection Count':
          return (
            `count(source.${col.name}) AS \`${col.name}_regexcount\` WHERE source.${col.name} RLIKE '^[0-9]{4}$'`
          )
        case 'Enum Detection Top10 Count':
          return (
            `source.${col.name} AS ${col.name}, count(*) AS count GROUP BY source.${col.name} ORDER BY count DESC LIMIT 10`
          )
      }
    },
    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}) => {
        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 = []
        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

        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
        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)
    //   }
    // }
  },
  watch: {
    chooseEqpment (newVal, oldVal) {
      if (oldVal.hasOwnProperty('icon')) {
        oldVal.icon = 'iconfont icon-xitong3'
      }
      newVal.icon = 'iconfont icon-xitong4'
    }
  }
}
</script>
<style scoped>
.divi {
  display: block;
  height: 1px;
  width: 100%;
  margin: 24px 0;
  background-color: #dcdfe6;
  position: relative;
}

.divi2 {
  display: block;
  height: 1px;
  width: 100%;
  position: relative;
}

.showRules {
  color: #409eff
}
</style>