Merge remote-tracking branch 'origin/master'

Crunchy

2024-07-31 defa824eab2350fd6abfd10abd8f4df94749e336

 src/components/view/a6-device.vue

@@ -1,19 +1,161 @@
<template>
  <div class="device-page">
    <div class="device-left">
      <el-input placeholder="输入设备名称" suffix-icon="el-icon-search" v-model="search" size="small"
      style="margin-bottom: 5px;" clearable></el-input>
      <el-input placeholder="输入设备名称" suffix-icon="el-icon-search" v-model="deviceName" size="small"
      @keyup.enter="geList"
      style="margin-bottom: 5px;" clearable @change="geList"></el-input>
      <el-tree :data="list" ref="tree" :props="{ children: 'children', label: 'label' }" node-key="id" @node-click="handleNodeClick" highlight-current @node-expand="nodeOpen"
        @node-collapse="nodeClose" v-loading="loading" :expand-on-click-node="false"
        :default-expanded-keys="expandedKeys"
        style="height:calc(100% - 46px);overflow-y: scroll;scrollbar-width: none;">
        <div class="custom-tree-node" slot-scope="{ node, data }">
          <el-row style="width: 100%;">
            <el-col :span="21" :title="data.label">
              <span class="single-line-ellipsis" style="width: 100%;display: inline-block;">
                <i :class="`node_i ${data.children != undefined ? (data.code==='[1]'?'el-icon-folder-opened':'el-icon-folder') : 'el-icon-tickets'}`"></i>
                {{ data.label }}
              </span>
            </el-col>
          </el-row>
        </div>
      </el-tree>
    </div>
    <div class="device-right"></div>
    <div class="device-right">
      <el-radio-group v-model="currentPage" size="small">
        <el-radio-button :label="item.id" v-for="(item,index) in tabList" :key="index"
          size="small">{{ item.title }}</el-radio-button>
      </el-radio-group>
      <div class="device-right-content">
        <component :is="currentPage"></component>
      </div>
    </div>
  </div>
</template>

<script>
import operationOverview from '../do/a6-device/operation-overview.vue';
import files from '../do/a6-device/files.vue';
import checkAndAccept from '../do/a6-device/check-and-accept.vue';
import calibration from '../do/a6-device/calibration.vue';
import check from '../do/a6-device/check.vue';
import maintenance from '../do/a6-device/maintenance.vue';
import borrow from "../do/a6-device/borrow.vue";
import fault from "../do/a6-device/fault.vue";
import record from '../do/a6-device/record.vue';
import state from '../do/a6-device/state.vue';
export default {
  components:{
    operationOverview,
    files,
    checkAndAccept,
    calibration,
    check,
    maintenance,
    borrow,
    fault,
    record,
    state,
  },
  data(){
    return {
      search:''
      deviceName:'',
      loading:false,
      tabList:[
        {
          id:'operationOverview',
          title:'设备运行总览',
        },
        {
          id:'files',
          title:'设备档案',
        },
        {
          id:'checkAndAccept',
          title:'设备验收',
        },
        {
          id:'calibration',
          title:'设备校准',
        },
        {
          id:'check',
          title:'设备核查',
        },
        {
          id:'maintenance',
          title:'设备维护',
        },
        {
          id:'borrow',
          title:'设备借用',
        },
        {
          id:'fault',
          title:'设备故障',
        },
        {
          id:'record',
          title:'使用记录',
        },
        {
          id:'state',
          title:'设备停用/启用',
        },
      ],
      currentPage:'operationOverview',
      expandedKeys:[],
      selectTree:'',
      list:[]
    }
  },
  mounted(){
    this.geList()
  },
  methods:{
    geList(){
      this.loading = true;
      this.$axios.get(this.$api.deviceScope.treeDevice+'?deviceName='+this.deviceName).then(res => {
        this.loading = false;
          let data = res.data
          data.forEach((item,index) => {
            item.id = index +1
            item.label = item.largeCategory
            item.children.forEach((m,i)=>{
              m.label = m.deviceName
            })
          })
          this.list = data
        })
    },
    handleNodeClick(val, node, el) { //树的值
      this.selectTree = ''
      this.getNodeParent(node)
      this.selectTree = this.selectTree.replace(' - ', '')
      let data = this.selectTree.split(' - ')
      let data2 = ''
      for (let index = data.length - 1; index >= 0; index--) {
        data2 += " - " + data[index]
      }
      this.selectTree = data2.replace(' - ', '')

      this.currentPage = 'operationOverview';
    },
    getNodeParent(val) {
      if (val.parent != null) {
        if(val.data.children === null){
          this.selectTree += ' - ' + val.label + ' - ' + 'null'
        }else{
          this.selectTree += ' - ' + val.label
        }
        this.getNodeParent(val.parent)
      }
    },
    nodeOpen(data, node, el) {
      $($(el.$el).find('.node_i')[0]).attr('class', 'node_i el-icon-folder-opened')
    },
    nodeClose(data, node, el) {
      $($(el.$el).find('.node_i')[0]).attr('class', 'node_i el-icon-folder')
    },
  }
}
</script>
@@ -24,6 +166,7 @@
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  width: 100%;
}
.device-left{
  width: 200px;
@@ -31,10 +174,29 @@
  background: #fff;
  margin-right: 10px;
  border-radius: 16px;
  box-sizing: border-box;
  padding: 10px 16px;
}
.device-right{
  background: #fff;
  flex: 1;
  border-radius: 16px;
  box-sizing: border-box;
  padding: 10px 16px;
}
.device-right-content{
  margin-top: 10px;
  height: calc(100% - 42px);
  width: 100%;
}
.custom-tree-node {
  width: 100%;
  /* line-height: 32px; */
  font-size: 14px;
}

.node_i {
  color: orange;
  font-size: 18px;
}
</style>