adi_cae_web/src/views/index/compoents/tool1.vue

<template>
<div class="tool">
    <div class="toolmain  lbg_color3 el-menu">
       <div class="imgzong itemimg1">
                      <div class="item1"  v-for="(item,index) in toollist"  :key="'tl1-'+ index" :class="{activeOrange1:active=='tl1-'+ index}" @click="meshclick($event,index,'tl1-'+ index)">
                     <el-tooltip class="item" effect="dark" :content="item.titlie" placement="bottom">
                         <el-image :src="item.icon" fit="cover" /> 
                    </el-tooltip>
                 </div>
                  <span class="shu">|</span>
                      <div class="item1"  v-for="(item,index) in toollist2"  :key="'tl2-'+ index" :class="{activeOrange1:active=='tl2-'+ index}" @click="meshclick($event,index,'tl2-'+ index)">
                     <el-tooltip class="item" effect="dark" :content="item.titlie" placement="bottom">
                         <el-image :src="item.icon" fit="cover" /> 
                    </el-tooltip>
                 </div>
                  <span class="shu">|</span>
                        <div class="item1"  v-for="(item,index) in toollist3"  :key="'tl3-'+ index"  :class="{activeOrange1:active=='tl3-'+ index}" @click="meshclick($event,index,'tl3-'+ index)">
                     <el-tooltip class="item" effect="dark" :content="item.titlie" placement="bottom">
                         <el-image :src="item.icon" fit="cover" /> 
                    </el-tooltip>
                 </div>
                  <span class="shu">|</span>
                           <div class="item1"  v-for="(item,index) in toollist4"   :key="'tl4-'+ index"  :class="{activeOrange2:active=='tl4-'+ index}" :tabIndex="index" @click="meshclick($event,index,'tl4-'+ index)">
                     <el-tooltip class="item" effect="dark" :content="item.titlie" placement="bottom">
                         <el-image :src="item.icon" fit="cover" /> 
                    </el-tooltip>
                 </div>
                 </div>
     </div>
    </div>
</template>

<script>
import tl1 from '@/assets/icon/axislegend.png'
import tl2 from '@/assets/icon/zoomtowindow.png'
import tl3 from '@/assets/icon/defaultmousecontrol.png'
import tl4 from '@/assets/icon/u3884.png'
import tl5 from '@/assets/icon/16.png'
import tl6 from '@/assets/icon/pan.png'
import tl7 from '@/assets/icon/u3871.png'

import tl8 from '@/assets/icon/u3879.png'
import tl9 from '@/assets/icon/u9872.png'
import tl17 from '@/assets/icon/u3738.png'

import tl10 from '@/assets/icon/view_front.png'
import tl11 from '@/assets/icon/view_back.png'
import tl12 from '@/assets/icon/view_top.png'
import tl13 from '@/assets/icon/view_bottom.png'
import tl14 from '@/assets/icon/view_left.png'
import tl15 from '@/assets/icon/view_right.png'
import tl16 from '@/assets/icon/view_isometric.png'


import Vue from 'vue' // 引入vue
import $ from 'jquery' ;
import store from "@/store";
import { request } from "@/utils/request";
import { ElMessage } from '@/utils/message.js'
import { log } from 'three';
let Message = new ElMessage()
export default {
    name: "VideoPlayer",
     props:{
      monitorHCFD:Boolean,
     },
    data() {
        return {
           active:'',
                tl1,tl2,tl3,tl4,tl5,tl6,tl7,tl8,tl9,tl10,
     tl11,tl12,tl13,tl14,tl15,tl16,tl17,
           toollist:[
             { icon:tl1, titlie:'坐标轴'},
             { icon:tl2, titlie:'缩放'},
           ],
            toollist2:[
             { icon:tl3, titlie:'默认鼠标控制'},
             { icon:tl4, titlie:'缩小到窗口'},
             { icon:tl5, titlie:'轨道'},
             { icon:tl6, titlie:'pan'},
             { icon:tl7, titlie:'zoom'},
             { icon:tl17, titlie:'折线图'},
           ],
            toollist3:[
             { icon:tl8, titlie:'点击选择'},
             { icon:tl9, titlie:'点击选择窗口'},
           ],
            toollist4:[
             { icon:tl10, titlie:'前'},
             { icon:tl11, titlie:'后'},
             { icon:tl12, titlie:'上'},
             { icon:tl13, titlie:'底'},
             { icon:tl14, titlie:'左'},
             { icon:tl15, titlie:'右'},
             { icon:tl16, titlie:'等角'},
           ],
    }
    },
    mounted(){
    },
    methods:{
     
         meshclick(e,index,key){
     let that=this;
     that.active=key;
     console.log(key)
  switch(key){
     case 'tl1-0':
  break;
    case 'tl1-1':
        this.$emit('startimg',"init",'zoomin')
      break;
    case 'tl2-0':
      break; 
    case 'tl2-1':
         this.$emit('startimg',"init",'zoomout')
      break;
    case 'tl2-2':
      break;
    case 'tl2-3':
       break;
    case 'tl2-4':
       break;
   case 'tl2-5':
      this.$emit("changehcfd",true);
       break;
    case'tl3-0':
       break;
    case'tl3-1':
       break;
    case'tl4-0':
       this.$emit('startimg',"init",'AlignToPlusAxisY');
       break;
    case'tl4-1':
    this.$emit('startimg',"init",'AlignToMinusAxisY');
       break;
    case'tl4-2':
      this.$emit('startimg',"init",'AlignToMinusAxisZ');
       break;
    case'tl4-3':
         this.$emit('startimg',"init",'AlignToPlusAxisZ');
       break;
    case'tl4-4':
       this.$emit('startimg',"init",'AlignToMinusAxisX');
       break;
    case'tl4-5':
     this.$emit('startimg',"init",'AlignToPlusAxisX');
       break;
    case'tl4-6':
       this.$emit('startimg',"init",'TransformToIsometric'); //RelocateToCenter
       break;
     
       
  }
  },
    },
    watch:{
      
         
    },
  

}

</script>
<style scoped>
.tool{
   position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
}
.activeOrange1{
      background-color:rgba(240, 171, 39, 0);
      border-radius: 5px;
      box-sizing: border-box;
      box-sizing: border-box;
      background-color: yellow;

    }
.activeOrange2 :focus{
      border-radius: 5px;
      border: 2px solid yellow;
      box-sizing: border-box;
      background-color: yellow;
}
.activeOrange2 :active{
      border-radius: 5px;
      border: none;
      box-sizing: border-box;
      background-color: none;
}
</style>