data_governance/src/views/homecomponents/BasicInfomation/ApplicationEquip.vue

<template>
  <div class="content-main common-scroll">
    <div class="content-body">
      <Row :gutter="8" style="width:100%;height:100%">
        <i-col span="6" style="height:100%">
          <div class="station-tree">
            <div class="station-tree-body">
              <div class="station-tree-top">
                <Input suffix="ios-search" placeholder="请输入地铁站台名" search v-model="currentStation" class="common-search"  @on-search="iconChange"/>
              </div>
              <div class="station-tree-center">
                <div class="station-tree-left common-scroll" v-show="showTree">
                  <tree-list :defaultData="stationData" :currentStaData="currentStaData" :clickAllNode="true" v-if="stationData.length>0" @treeChange="treeChange" ref="tree"></tree-list>
                </div>
                <div class="station-tree-left-notree" v-show="!showTree">
                  站点输入错误！
                </div>
                <div class="station-tree-right">
                </div>
              </div>
            </div>
          </div>
        </i-col>
        <i-col span="18" style="height:100%">
          <div class="right-main">
            <div class="manage-main-top">
              <Button icon="ios-add" class="common-add-btn" @click="addClick">新增关联</Button>
            </div>
            <div class="manage-main-center">
              <Table :columns="columns" :data="data1" class="common-table" :row-class-name="rowClassName"></Table>
            </div>
            <Page :total="tableTotal" :current="tableParams.pageNum" :page-size="tableParams.pageSize" @on-change="changePage" @on-page-size-change="sizeChange" show-elevator class="common-page"/>
          </div>
        </i-col>
      </Row>
    </div>
     <Modal
      v-model="showModal"
      :title="title"
      width="25"
      ref="modalGrag"
      draggable
      :mask-closable="false"
      class-name="common-modal">
      <!-- :rules="ruleValidate"  -->
      <Form class="common-form" ref="formOption" :model="formOption" :label-width="120">
				<FormItem label="应用名称：" prop="lineName">
           <Select v-model="formOption.lineName" placeholder="应用名称">
              <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
				</FormItem>
				<FormItem label="设备类型：" prop="stationName">
           <Select v-model="formOption.station" placeholder="设备类型">
              <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
			</Form>
      <div slot="footer">
          <Button @click="modalCancel">取消</Button>
          <Button type="primary" @click="modalOk">确定</Button>
        </div>
    </Modal>
    <Modal
      v-model="modalStatus"
      title="确认解绑"
      width="25"
      ref="modalGrag"
      draggable
      :mask-closable="false"
      class-name="common-modal">
      <Icon type="ios-information-circle" class="modal-icon"  style="color:#E92E2E"></Icon>
      <span class="modal-text">删除的同时将解绑所有运营数据，且数据不可恢复。请慎重操作。</span>
      <div slot="footer">
          <Button @click="commonCancel">取消</Button>
          <Button type="primary" @click="commonOk">确定</Button>
        </div>
    </Modal>
</div>
</template>
<script>
import _ from 'lodash'
export default {
  name: "ApplicationEquip",
  components:{
  },
  data() {
    return {
      currentStation: '合肥轨道交通',
      currentStaData: [], // 当前搜索框搜索的站台数组对象，传给子组件，用来判断单选站台名当前选中状态
      treeName: ['合肥轨道交通'], // 当前选中的一级二级站台名
      preTreeName:['合肥轨道交通'],
      showTree: true,// 是否显示树形组件
		  stationData: [{disabled: true,
        expand: true,
        children: [],
        id: 0,
        parent: null,
        selected: true,
        stationId: null,}],
        tableTotal: 100,
        tableParams: {
          pageNum: 1,
          pageSize: 20
        },
        data1: [
          {
              name: 'John Brown',
              age: 1,
              address: 'New York No.',
              date: '2016-10-03'
          },
          {
              name: 'Jim Green',
              age: 2,
              address: 'London No.',
              date: '2016-10-01'
          },
          {
              name: 'Joe Black',
              age: 3,
              address: 'Sydney No.',
              date: '2016-10-02'
          },
          {
              name: 'Jon Snow',
              age: 2,
              address: 'Ottawa No.',
              date: '2016-10-04'
          },
          {
              name: 'John Brown',
              age: 1,
              address: 'New York No.',
              date: '2016-10-03'
          },
          {
              name: 'Jim Green',
              age: 2,
              address: 'London No.',
              date: '2016-10-01'
          },
          {
              name: 'Joe Black',
              age: 3,
              address: 'Sydney No.',
              date: '2016-10-02'
          },
          {
              name: 'Jon Snow',
              age: 2,
              address: 'Ottawa No.',
              date: '2016-10-04'
          },
            {
              name: 'Joe Black',
              age: 3,
              address: 'Sydney No',
              date: '2016-10-02'
          },
          {
              name: 'Jon Snow',
              age: 2,
              address: '合肥城市轨道交通有限公司',
              date: '2016-10-04'
          },
      ],
      columns: [
          {
            title: '线路序号',
            width: 100,
            key: 'name',
            align: 'center'
          },
          {
            title: '线路名称',
            key: 'age',
            width: 100,
            align: 'center'
          },
          {
            title: '当前线路长度(km)',
            key: 'address',
            align: 'center'
          },
          {
            title: '站点数量',
            key: 'name',
           align: 'center'
          },
          {
            title: '运营机构',
            key: 'address',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '线路类型',
            key: 'address',
            align: 'center'
          },
          { title: "操作", key: "action", align: 'center',
            render: (h, params) => {
              return h('div',[
                h('Tooltip', {
                  props: { placement: 'top' },
                }, [
                    h('span', { slot: 'content', style: { whiteSpace: 'normal', wordBreak: 'break-all' } },'解绑'),
                    h('i',{style: { cursor:'pointer',color:'#B8B532',fontSize:'20px',marginRight:'6px'},
                      on: {
                          click: () => {
                            this.modalStatus = true
                          }
                        },
                    class: 'iconfont icon-xiangqingmingxi'})]),       
              ])
            }
          },
      ],
      formOption: {lineName: '',stationName:''},
      typeList: [
        {
            value: 'New York',
            label: 'New York'
        },
        {
            value: 'London',
            label: 'London'
        },
        {
            value: 'Sydney',
            label: 'Sydney'
        },
        {
            value: 'Ottawa',
            label: 'Ottawa'
        },
        {
            value: 'Paris',
            label: 'Paris'
        },
        {
            value: 'Canberra',
            label: 'Canberra'
        }
    ],
    showModal: false,
    title: '新增关联',
    modalStatus: false,
    };
  },
  mounted() {
    this.$get('metroapi/equipment/energy/stationTree').then(res => {
      if (res.httpCode == 1) {
        this.stationData[0].children = this.getTree(res.data)
        this.currentStaData = [{disabled: true,
          expand: true,
          children: [],
          id: 0,
          parent: null,
          selected: true,
          stationId: null,
          title: "合肥轨道交通"}]
      } else {
        this.stationData = [{disabled: true,
        expand: true,
        children: [],
        id: 0,
        parent: true,
        selected: true,
        stationId: null,
        title: "合肥轨道交通"}]
      }
		})
  },
  methods: {
    getTree(arr) {
      return arr.map((v,index) => {
        v.disabled = false
        v.selected = false
        v.expand = false
        if (v.title == '1号线') {
          v.expand = true
        }
        if (v.children) v.children = this.getTree(v.children);
        return v;
      });
    },
    iconChange: _.throttle(function() {
      this.currentStaData = []
      this.treeName = []
      this.showTree = false		
      if(this.currentStation != ''){
        document.querySelector(".tree-scroll").scrollTo(0, 0); // 滚动条回到顶部
      } else {
        document.querySelector(".tree-scroll").scrollTo(0, 0); // 滚动条回到顶部   
      }
      this.getPamData (this.currentStation)
      this.stationData.forEach((item, index,itemArr) => {
        item.expand = false;
        item.disabled = false; 
        item.selected = false;
        if (item.title == this.currentStation) {
            item.selected = true;
            item.disabled = true; // disabled 是否禁止选中 
            item.expand = true;
            this.treeName.push(item.title)
            this.currentStaData.push(item)
            this.preTreeName = this.treeName
            this.showTree = true
        }
        item.children.forEach((val, i,valArr) => {
          val.expand = false; //expand 是否展开直子节点 
          val.disabled = false; // disabled 是否禁止选中
          val.selected = false;
          if (val.title == this.currentStation) {
            val.selected = true;
            val.disabled = true; // disabled 是否禁止选中 
            val.expand = true;
            item.expand = true;
            this.treeName.push(item.title)
            this.treeName.push(val.title)
            this.currentStaData.push(val)
            this.preTreeName = this.treeName
            this.showTree = true
          }
          val.children.forEach ((lastVal,lastIndex) => {
            lastVal.selected = false; //expand 是否展开直子节点 
            lastVal.disabled = false; 
            lastVal.expand = false;
            if (this.currentStation =='合肥轨道交通' || this.currentStation =='') {
              itemArr[index].selected = true
              itemArr[index].disabled = true
              itemArr[index].expand = true
              valArr[index].expand = true
              this.showTree = true
              this.currentStation = '合肥轨道交通'
              this.treeName = ['合肥轨道交通']
            }
            if (lastVal.title == this.currentStation) {
              lastVal.selected = true;
              lastVal.disabled = true; // disabled 是否禁止选中 
              lastVal.expand = true;
              val.expand = true
              item.expand = true
              this.treeName.push(item.title)
              this.treeName.push(val.title)
              this.treeName.push(lastVal.title)
              this.currentStaData.push(lastVal)
              this.preTreeName = this.treeName
              this.showTree = true
            } 
          })
        });
      });		
      if (!this.showTree) {
        this.treeName = this.preTreeName
      }
      this.$nextTick(()=> {
        if (this.initActive == 'year') {
          this.$refs.longForecast.getTitle(this.pamData)
        } else {
          this.$refs.forecast.getTitle(this.pamData)
        }
      })
		}, 500),
    treeChange(val,arr) {
      this.currentStation = val
      this.treeName = arr
      this.preTreeName = arr
		},
     rowClassName(row, index) {
      if (index % 2 == 0) {
        return "ivu-table-stripe-even";
      } else {
        return "ivu-table-stripe-odd";
      }
    },
    // 分页
    changePage (val) {
      this.tableParams.pageNum = val
      // this.getTableData()
    },
    //跳转
    sizeChange (val) {
      this.tableParams.pageSize = val
      // this.getTableData()
    },
    addClick () {
      this.showModal = true
      this.$refs.modalGrag.dragData.x = null
      this.$refs.modalGrag.dragData.y = null
    },
    modalOk () {
      this.showModal = false
    },
    modalCancel () {
      this.showModal = false
    },
    commonOk () {
      this.modalStatus = false
    },
    commonCancel () {
      this.modalStatus = false
    },
  }
};
</script>
<style scoped lang="stylus">
.content-main {
  width: 100%;
  height: calc(100% - 50px);
  overflow: auto;
}
.common-search {
  width: 100%;
}
>>> .common-search .ivu-input {
  background-color: #06214D;
  border: 1px solid #2355A6;
  border-radius: 15px;
  color: #fff;
  height: 32px;
}
>>> .common-search .ivu-input:focus {
    border-color: #0185ea;
}
.content-body {
  width: 100%;
  height: 100%;
  background: #06214D;
}
.station-tree {
  height: 100%;
  padding: 10px;
}
.station-tree-body {
  border: 1px solid #204384;
  height: 100%;
  padding: 10px;
}
.station-tree-center {
  height: calc(100% - 32px);
  padding-top: 10px;
  // display: flex;
}
.station-tree-left {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}
.station-tree-left-notree {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  fon-size: 14px;
}
.right-main {
  height: 100%;
  padding: 10px 0;
  // padding: 16px;
}
.manage-main-top {
  padding: 12px 0;
  display: flex;
  justify-content: flex-end;
}
.manage-main-center {
  width: 100%;
  height: calc(100% - 100px);
}
.common-table {
  max-height: 100%;
}
>>> .common-table .ivu-table th {
  height: 54px;
 }
 >>> .common-table .ivu-table td {
  height: 54px;
 }
.common-page {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
</style>