adi_cae_web/src/views/index/geometry/index.vue

<template>
  <div class="imgzong">
        <div class="item1 diyi"  >
      
          <el-dropdown trigger="click">
        <el-tooltip class="item tupian" effect="dark" content="导入" placement="bottom">
          <div>  
             <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-Dditu"></use>
            </svg>
                  <i class="el-icon-arrow-down el-icon--right"></i> 
                   </div> 
              </el-tooltip>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>Marc输入</el-dropdown-item>
        <el-dropdown-item>通用CAD接口（作为提导入）</el-dropdown-item>
        <el-dropdown-item>Parasolid</el-dropdown-item>
        <el-dropdown-item>ACIS</el-dropdown-item>
        <el-dropdown-item >IGES</el-dropdown-item>
         <el-dropdown-item>VDAFS</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>  
       </div>
       <div class="item1 diyi"  >
          <el-dropdown trigger="click">
        <el-tooltip class="item tupian" effect="dark" content="导出" placement="bottom">
          <div> <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-d1"></use>
            </svg>
                  <i class="el-icon-arrow-down el-icon--right"></i>  </div>
              </el-tooltip>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>Marc输入</el-dropdown-item>
        <el-dropdown-item>通用CAD接口（作为提导入）</el-dropdown-item>
        <el-dropdown-item>Parasolid</el-dropdown-item>
        <el-dropdown-item>ACIS</el-dropdown-item>
        <el-dropdown-item >IGES</el-dropdown-item>
         <el-dropdown-item>VDAFS</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>  
       </div>
       <div class="item1"  @click="dialog.dialogVisible = true" >
                <el-tooltip class="item" effect="dark" content="重新编号" placement="bottom">
                    <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-ts-d"></use>
            </svg>
            </el-tooltip>
            </div>
             <div class="item1 diyi"  >
          <el-dropdown trigger="click" @command="handleCommand">
        <el-tooltip class="item tupian" effect="dark" content="长度单位" placement="bottom">
          <div>   <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-DGlasses"></use>
            </svg>
                  <i class="el-icon-arrow-down el-icon--right"></i>  </div> 
              </el-tooltip>
      <el-dropdown-menu slot="dropdown" >
        <el-dropdown-item  v-for="(itemlist,index) in lenlist"  :key="'info1-'+ index" :command='index' :class="{red:i === index}">{{itemlist.name}}</el-dropdown-item>
    
      </el-dropdown-menu>
    </el-dropdown>  
       </div>
  <el-checkbox v-model="checked" class="baoshi"> 栅格</el-checkbox>
                 <el-checkbox v-model="checked1" class="baoshi"> 坐标系</el-checkbox>
            <span class="shu">|</span>
            <div class="item1"  v-for="(itemcj,index) in cjlist"  :key="'info1-'+ index" @click="clickgeometry(index)">
                <el-tooltip class="item" effect="dark" :content="itemcj.titlie" placement="bottom">
                    <svg class="icon" aria-hidden="true">
                    <use :xlink:href="`#${itemcj.icon}`" />
                  </svg>
                                          <!-- <span class="iconfont">{{itemcj.icon}}</span> -->
            </el-tooltip>
            </div>
            <span class="shu">|</span>
                <div class="item1"  v-for="(itemcj,index) in czlist"  :key="'info2-'+ index">
                <el-tooltip class="item" effect="dark" :content="itemcj.titlie" placement="bottom">
                    <el-image :src="itemcj.img" fit="cover" /> 
            </el-tooltip>
            </div>
            <span class="shu">|</span>
                <div class="item1"  v-for="(itemcj,index) in bjlist"  :key="'info3-'+ index">
                <el-tooltip class="item" effect="dark" :content="itemcj.titlie" placement="bottom">
                    <el-image :src="itemcj.img" fit="cover" /> 
            </el-tooltip>
              
            </div>
   <!--弹出框-->
   <!-- 重新编号 -->
   <el-dialog
  title="重新编号"
  :visible.sync="dialog.dialogVisible"
   :modal='false'
  custom-class='dialoglocation'
  :close-on-click-modal='false'
  width="20%">
  <div slot="title" class=dialog_header>
     <el-image :src="jic3" fit="cover" />
     <span>重新编号</span>

  </div>
  <div class="heigeinput">
  <el-form :model="form">
    <el-form-item label="开始编号" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
        <el-form-item label="编号间隔" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <div class="line">
      <div class="linetext">编号范围</div>
    </div>  
  </el-form>
   <el-form :model="form" class="titleinput">
     <div class="itemlist"   v-for="(item,i) in form.itemlists" :key='i'>
    <el-form-item :label="item.lable" :label-width="formLabelWidth">
      <el-input v-model="form.val" autocomplete="off"></el-input>
    </el-form-item>
    <el-row>
      <!-- @input.native="change($event,index)" -->
   <el-button plain  >全部</el-button>
    <el-button plain >列表</el-button>
    </el-row>
    </div>
    <div class="btntext">所有几何网格</div>
    <div class="line">
      <div class="linetext">编号方向</div>
    </div> 
    <div class="fangxiang">
     <el-row>
   <el-button plain  class="btnyiban" >方向</el-button>
    <el-button plain class="btnyiban" >始/终点</el-button>
    </el-row>
    <div class="input3">
      <el-input v-model="form.name" autocomplete="off"></el-input>
      <el-input v-model="form.name" autocomplete="off"></el-input>
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </div>
       </div> 
       <div class="itemlist"  >
    <el-form-item label="节点" :label-width="formLabelWidth">
      <el-input v-model="form.val" autocomplete="off"></el-input>
    </el-form-item>
    <el-row>
      <!-- @input.native="change($event,index)" -->
   <el-button plain  >全部</el-button>
    <el-button plain >列表</el-button>
    </el-row>
    </div>
       <div class="itemlist"  >
    <el-form-item label="单元" :label-width="formLabelWidth">
      <el-input v-model="form.val" autocomplete="off"></el-input>
    </el-form-item>
    <el-row>
   <el-button plain  >全部</el-button>
    <el-button plain >列表</el-button>
    </el-row>
    </div>
  </el-form>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialog.dialogVisible = false">清 除</el-button>
    <el-button type="primary" @click="dialog.dialogVisible = false">OK</el-button>
  </span>
</el-dialog>
<!-- 信息框 -->

        <!--几何点  -->
 <el-dialog
  :visible.sync="dialog.dialogVisible2"
  :modal='false'
  custom-class='dialoglocation'
  :close-on-click-modal='false'
  width="385px">

  <div slot="title" class=dialog_header>
     <el-image :src="cj" fit="cover" />
     <span>几何点</span>

  </div>
  <div class="heigeinput">
  <el-form :model="form" >
    
        <el-form-item label="坐标">
         <div class="saninput titleinput"> 
      <el-input v-model="form.name" autocomplete="off"></el-input>
       <el-input v-model="form.name" autocomplete="off"></el-input>
        <el-input v-model="form.name" autocomplete="off"></el-input>
          <el-button plain >添加</el-button>
        </div>  
    </el-form-item>
    <div class="yiinpu">
    <el-form-item label="几何点列表" :label-width="formLabelWidth2">
      <el-input v-model="form.name" autocomplete="off"></el-input>
         <el-button plain class="anniu">删除</el-button>
    </el-form-item>
 </div>
  <el-form-item label=" 编号" :label-width="formLabelWidth4">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
  <el-form-item label="坐标">
         <div class="saninput titleinput"> 
      <el-input v-model="form.name" autocomplete="off"></el-input>
       <el-input v-model="form.name" autocomplete="off"></el-input>
        <el-input v-model="form.name" autocomplete="off"></el-input>
          <el-button plain >编辑</el-button>
        </div>  
    </el-form-item>
     <el-form-item label=" 编号" :label-width="formLabelWidth4">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
 <el-form-item label="坐标">
         <div class="saninput titleinput"> 
      <el-input v-model="form.name" autocomplete="off"></el-input>
       <el-input v-model="form.name" autocomplete="off"></el-input>
        <el-input v-model="form.name" autocomplete="off"></el-input>
          <el-button plain >显示</el-button>
        </div>  
    </el-form-item>
    <div class="line">
      <div class="linetext">两点间的添加</div>
    </div>  
    <el-form-item label="点1坐标">
         <div class="saninput titleinput"> 
      <el-input v-model="form.name" autocomplete="off"></el-input>
       <el-input v-model="form.name" autocomplete="off"></el-input>
        <el-input v-model="form.name" autocomplete="off"></el-input>
        </div>  
    </el-form-item>
    <el-form-item label="点2坐标">
         <div class="saninput titleinput"> 
      <el-input v-model="form.name" autocomplete="off"></el-input>
       <el-input v-model="form.name" autocomplete="off"></el-input>
        <el-input v-model="form.name" autocomplete="off"></el-input>
        </div>  
    </el-form-item>
  </el-form>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialog.dialogVisible2 = false">清 除</el-button>
    <el-button type="primary" @click="dialog.dialogVisible2 = false">OK</el-button>
  </span>
</el-dialog>
<!-- 实体 -->
<el-dialog
  :visible.sync="dialog.dialogVisible3"
  :modal='false'
  custom-class='dialoglocation'
  :close-on-click-modal='false'
  width="385px">
  <div slot="title" class=dialog_header>
     <el-image :src="cj2" fit="cover" />
     <span>实体</span>
  </div>
  <div class="selecr">
     <el-form>
       <el-form-item label=" 实体类型" :label-width="formLabelWidth2">
      <el-select v-model="form.selval" @change="changest(id)" placeholder="请选择">
    <el-option
      v-for="item in optsel"
      :key="item.value"
      :label="item.name"
      :value="item.value"
      >
    </el-option>
  </el-select>
    </el-form-item>
    </el-form>
    </div>
      <el-form>
    <div class="heigeinput liangf">
       <el-form-item label=" 原点坐标" :label-width="formLabelWidth2">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
     <el-form-item label=" X方向长度" :label-width="formLabelWidth2">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    </div>
     <div class="heigeinput liangf">
       <el-form-item label=" Y方向长度" :label-width="formLabelWidth2">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
     <el-form-item label=" Z方向长度" :label-width="formLabelWidth2">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    </div>
      </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialog.dialogVisible3 = false">清 除</el-button>
    <el-button type="primary" @click="dialog.dialogVisible3 = false">OK</el-button>
  </span>
</el-dialog>
<!-- 曲线 -->
<el-dialog
  :visible.sync="dialog.dialogVisible4"
  width="20%">
  <div slot="title" class=dialog_header>
     <el-image :src="cj" fit="cover" />
     <span>几何点</span>

  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialog.dialogVisible4 = false">清 除</el-button>
    <el-button type="primary" @click="dialog.dialogVisible4 = false">OK</el-button>
  </span>
</el-dialog>
  </div>
  
</template>

<script>
// 边界条件
import jic from '@/assets/icon/u214.png'
import jic2 from '@/assets/icon/u215.png'
import jic3 from '@/assets/icon/u213.png'
import jic4 from '@/assets/icon/u212.png'
import cj from '@/assets/icon/u216.png'
import cj2 from '@/assets/icon/u217.png'
import cj3 from '@/assets/icon/u219.png'
import cj4 from '@/assets/icon/u218.png'
import cj5 from '@/assets/icon/u766.png'
import cj6 from '@/assets/icon/u220.png'
import cj7 from '@/assets/icon/u791.png'
import cz from '@/assets/icon/u221.png'
import cz2 from '@/assets/icon/u224.png'
import cz3 from '@/assets/icon/u227.png'
import cz4 from '@/assets/icon/u231.png'
import cz5 from '@/assets/icon/u234.png'
import cz6 from '@/assets/icon/u229.png'
import cz7 from '@/assets/icon/u222.png'
import cz8 from '@/assets/icon/u225.png'
import cz9 from '@/assets/icon/u228.png'
import cz10 from '@/assets/icon/u232.png'
import cz11 from '@/assets/icon/u235.png'
import cz12 from '@/assets/icon/u223.png'
import cz13 from '@/assets/icon/u226.png'
import cz14 from '@/assets/icon/u230.png'
import cz15 from '@/assets/icon/u233.png'
import cz16 from '@/assets/icon/u236.png'
import bj1 from '@/assets/icon/u237.png'
import bj2 from '@/assets/icon/u238.png'

export default {
  data(){
      return{
          checked:'',
          checked1:'',
          dialog:{
             dialogVisible:false,
             dialogVisible2:false,
             dialogVisible3:false,
             dialogVisible2:false
          },
         
          i:'1',
          lenlist:[
            {id:'1',name:'微米'},
            {id:'2',name:'毫米'},
             {id:'3',name:'厘米'},
            {id:'4',name:'米'},
             {id:'5',name:'千米'},
            {id:'6',name:'微英寸'},
             {id:'7',name:'密耳'},
            {id:'8',name:'英寸'},
             {id:'9',name:'英尺'},
            {id:'10',name:'码'},
             {id:'11',name:'英里'},
          ],
          optsel:[
            {id:'1',name:'块 (3D空间)'},
            {id:'2',name:'圆柱 (3D空间)'},
             {id:'3',name:'棱柱 (3D空间)'},
            {id:'4',name:'球 (3D空间)'},
            {id:'5',name:'圆环 (3D空间)'},
          ],
           selval:'1',
           // 边界条件
       //  几何基础
        jic,
        jic2,
        jic3,
        jic4,
        // 几何创建
        cj,
        cj2,
        cj3,
        cj4,
        cj5,
        cj6,
        cj7,
        //  操作
        cz,
        cz2,
        cz3,
        cz4,
        cz5,
        cz6,
        cz7,
        cz8,
        cz9,
        cz10,
        cz11,
        cz12,
        cz13,
        cz14,
        cz15,
        cz16,
        bj1,
        bj2,
          jiclist:[
            { img:jic, titlie:'导入几何'},
            {img:jic2, titlie:'导出几何'},
            { img:jic3, titlie:'重新编号'},
            {img:jic4, titlie:'长度单位'},  
        ],
        cjlist:[
           { icon:"icon-Flattd-Fridge", titlie:'几何点'},
            {icon:"icon-Flattd-Wallet", titlie:'实体'},
            { icon:"icon-d-modelling", titlie:'清除几何体'},
            {icon:"icon-d-programming", titlie:'曲线'},  
            {icon:"icon-FSX_P3Dtuzhuangfabuqu", titlie:'实体'},
            { icon:"icon-3D", titlie:'清除几何体'},
            {icon:"icon-a-3Dlujingditu", titlie:'曲线'},   
        ],
         czlist:[
           { img:cz, titlie:' 关联'},
            {img:cz2, titlie:'特征消除'},
            { img:cz3, titlie:'相交'},
            {img:cz4, titlie:'实体运营'},  
            {img:cz5, titlie:'布尔运算'},
            { img:cz6, titlie:'移动'},
            {img:cz7, titlie:'检查'}, 
              { img:cz8, titlie:'复制'},
            {img:cz9, titlie:'印痕'},
            { img:cz10, titlie:'消除重复'},
            {img:cz11, titlie:'拉伸'},  
            {img:cz12, titlie:'转换'},
            { img:cz13, titlie:'扩展'},
            {img:cz14, titlie:'旋转'},   
            { img:cz15, titlie:'对称'},
            {img:cz16, titlie:'扫略'}, 
        ],
          bjlist:[
           { img:bj1, titlie:'新建'},
            {img:bj2, titlie:'模版文件'},
          
        ],
    
        formLabelWidth: '60px',
        formLabelWidth2:'73px',
        formLabelWidth4:'37px',
      
          form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
          val0:'1',
          val1:'2',
          val2:'3',
          val3:'4',
          val4:'5',
          val5:'6',
            itemlists:[
           {id:'1',lable:'节点'},
           {id:'2',lable:'单元'},
           {id:'3',lable:'几何点'},
           {id:'4',lable:'曲线'},
           {id:'5',lable:'曲面'},
           {id:'6',lable:'实体'},
        ],
        },
      }
      
  },
methods:{
  handleCommand(command){
 this.i = command
  },
  //模块选择
  clickgeometry(index){
  switch(index){
    case 0:
      this.dialog.dialogVisible2=true;
      break;
    case 1:
      this.dialog.dialogVisible3=true;
      break; 

  }
  },
  // 实体的下拉选择
  changest(val){
    console.log(1111);
    console.log(this.form.selval);

  },

}
}
</script>
<style lang="scss" scoped>
.diyi i{
  font-size: 14px;
  color: #C0C4CC;
}
.el-input__inner{
height: 30px;
line-height: 30px;
}
.tupian{
  display: flex;
  justify-content: center;
  align-items: center;
}
 .red{
  color: red;
 }
 .dialog_header{
   align-items: center;
    display: flex;
}

</style>
<style lang="scss">
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.heigeinput 
{
.el-input__inner{
height: 25px;
line-height: 25px;
}
 .el-form-item{
  margin-bottom: 5px;
}
.el-form-item__label{
  font-size: 12px;
 line-height: 25px;
}
.el-form-item__content{
      line-height: 25px;
        font-size: 12px;
}
}
.el-dialog__body{
  padding: 10px 20px 10px 20px;
} 
.line{
  width: 100%;
  height: 1px;
  background-color: #999;
  position: relative;
  margin: 20px 0;
  .linetext{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffff;
    padding: 5px;
    font-size: 12px;
    top: -10px;
    font-weight: 700;
    
  }
 
}

 .titleinput .el-input{
    width: 100px;
  }
  .itemlist{
    display: flex;
  
  }
  .anniu{
    padding: 5px 28px;
    font-size: 12px;
      margin: 0;
    
  }
 .titleinput{
  .el-row{
      padding-left: 10px;
   }
     .el-button{
    padding: 5px 28px;
    font-size: 12px;
    }
    .el-button+.el-button{
      margin: 0;
    }
    }
  .btntext{
    text-align: center;
    background-color: #757070;
    color:#d5d5d5 ;
     font-size: 12px;
     padding: 3px 0;
  }
  .btnyiban{
    width: 50%;
    background-color: #757070;
    color:#d5d5d5 ;
  }
  .fangxiang .el-row{
    display: flex;
    padding-bottom: 10px;
  }

  .input3{
    display: flex;
     flex-wrap:nowrap;
     justify-content: space-around;
     padding-bottom: 5px;

    .el-input{
    width: 30%;
    }
  }
.yiinpu .el-form-item__content{
display:flex;
.el-input{
  margin-right: 5px;
}
}
  .saninput{
   display: flex;
     flex-wrap:nowrap;
     justify-content: space-around;
    .el-input{
   margin-right: 5px;
    }
    .el-form-item__label{
        text-align: left;
    }  
  }
  // select样式
  .selecr{
    font-size: 12px;
    .el-select{
      width: 100%;
      .el-input__inner{
    height: 25px;
    line-height: 25px;  
    
    }
    }
    
  }
  .liangf{
    display: flex;
  }
  .dialoglocation{
    position: absolute;
    right: 0;

  }
</style>