|
|
@@ -0,0 +1,1036 @@
|
|
|
+<template>
|
|
|
+ <div style="display: flex;height: calc(100vh - 120px)">
|
|
|
+ <Aside :resultArr="resultArr" :fujianArr="fujianArr" @refresh="resultRefresh"></Aside>
|
|
|
+ <div class="drawer__panel">
|
|
|
+ <div class="my-steps">
|
|
|
+ <a-steps :current="active-1" style="margin-bottom: 10px;">
|
|
|
+ <a-step :title="item.title" v-for="(item,index) in items" :key="index">
|
|
|
+ <i slot="icon" class="iconfont" style="font-size: 32px;color: #3874F6 !important" v-if="active > index+1"></i>
|
|
|
+ </a-step>
|
|
|
+ </a-steps>
|
|
|
+ </div>
|
|
|
+ <!--选光头-->
|
|
|
+ <div class="dialog-content" v-show="active == 1">
|
|
|
+ <div class="option-line">
|
|
|
+ <MySelect type="radius" :isClear="false" :options="[{remarks:'自动选配',value:'自动选配'},{remarks:'手动输入',value:'手动输入'}]" v-model="mode"></MySelect>
|
|
|
+ </div>
|
|
|
+ <div v-show="mode == '自动选配'">
|
|
|
+ <div class="option-line">
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">驱动方式:</div>
|
|
|
+ <MySelect :isClear="false" @click="guangtouChange" :options="drivetype" v-model="guangtouParam.content.where.drivetype"></MySelect>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="option-line">
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">公称通径:</div>
|
|
|
+ <el-select filterable v-model="guangtouParam.content.where.caliber" placeholder="请选择公称通径" size="small" style="width:100%" clearable @change="Search('guangtouParam','caliber')">
|
|
|
+ <el-option v-for="item in caliber" :key="item.value" :value="item.value" :label="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">公称压力:</div>
|
|
|
+ <el-select filterable @change="Search('guangtouParam','nominalpressure')" :disabled="!guangtouParam.content.where.caliber" v-model="guangtouParam.content.where.nominalpressure" placeholder="请选择公称压力" size="small" style="width:100%" clearable>
|
|
|
+ <el-option v-for="item in nominalpressure" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="option-line">
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">连接方式:</div>
|
|
|
+ <MySelect @click="Search('guangtouParam','connection')" :disabled="!guangtouParam.content.where.nominalpressure" :options="connection" v-model="guangtouParam.content.where.connection"></MySelect>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="option-line">
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">阀体材质:</div>
|
|
|
+ <el-select filterable @change="Search('guangtouParam','bodymaterial')" :disabled="!guangtouParam.content.where.connection" v-model="guangtouParam.content.where.bodymaterial" placeholder="请选择阀体材质" size="small" style="width:100%" clearable>
|
|
|
+ <el-option v-for="item in bodymaterial" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">阀杆材质:</div>
|
|
|
+ <el-select filterable @change="Search('guangtouParam','stemmaterial')" :disabled="!guangtouParam.content.where.bodymaterial" v-model="guangtouParam.content.where.stemmaterial" placeholder="请选择阀杆材质" size="small" style="width:100%" clearable>
|
|
|
+ <el-option v-for="item in stemmaterial" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">阀座材质:</div>
|
|
|
+ <el-select filterable @change="Search('guangtouParam','plinthmaterial')" :disabled="!guangtouParam.content.where.stemmaterial" v-model="guangtouParam.content.where.plinthmaterial" placeholder="请选择阀座材质" size="small" style="width:100%" clearable>
|
|
|
+ <el-option v-for="item in plinthmaterial" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--光头-->
|
|
|
+ <MyTable :height="tableHeight" ref="guangtouRef" :layout="tool.tabelCol($route.name)['guangtouTable'].tablecols" :param="guangtouParam" :opwidth="200" :custom="true" style="margin-top: 14px">
|
|
|
+ <template v-slot:customcol="scope">
|
|
|
+ <span v-if="scope.column.columnname != 'operation'">{{scope.column.data[scope.column.columnname]}}</span>
|
|
|
+ </template>
|
|
|
+ <template v-slot:opreation="scope">
|
|
|
+ <el-button type="text" size="mini" @click="selectTarget(scope.data,'主阀')" :disabled="!guangtouParam.content.where.drivetype">选择</el-button>
|
|
|
+ </template>
|
|
|
+ </MyTable>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="write" style="margin-top: 10px" v-show="mode == '手动输入'">
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-form :model="guangtouParam.content.where" ref="ruleForm" label-width="130px">
|
|
|
+ <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="6">
|
|
|
+ <el-form-item label="驱动方式:" prop="drivetype" :rules="{required:true,message:'请选择驱动方式',trigger:'blur'}">
|
|
|
+ <el-select filterable v-model="guangtouParam.content.where.drivetype" placeholder="请选择驱动方式" size="small" style="width:100%">
|
|
|
+ <el-option v-for="item in drivetype" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="6">
|
|
|
+ <el-form-item label="扭矩:" prop="torque" :rules="{required:true,message:'请输入扭矩',trigger:'blur'}">
|
|
|
+ <el-input v-model="guangtouParam.content.where.torque" size="small" placeholder="请输入扭矩"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="6">
|
|
|
+ <el-form-item label="法兰号:" prop="flh" :rules="{required:true,message:'请选择法兰号',trigger:'blur'}">
|
|
|
+ <el-select filterable v-model="guangtouParam.content.where.flh" placeholder="请选择法兰号" size="small" style="width:100%">
|
|
|
+ <el-option v-for="item in flh" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="6" v-if="!guangtouParam.content.where.maxrounddiameter">
|
|
|
+ <el-form-item label="方阀杆最大宽度:" prop="maxsquarewidth" :rules="{required:true,message:'请输入方阀杆最大宽度',trigger:'blur'}">
|
|
|
+ <el-input size="small" v-model="guangtouParam.content.where.maxsquarewidth" placeholder="请输入方阀杆最大宽度"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="6" v-if="!guangtouParam.content.where.maxsquarewidth">
|
|
|
+ <el-form-item label="圆阀杆最大直径:" prop="maxrounddiameter" :rules="{required:true,message:'请输入圆阀杆最大直径',trigger:'blur'}">
|
|
|
+ <el-input size="small" v-model="guangtouParam.content.where.maxrounddiameter" placeholder="请输入圆阀杆最大直径"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="6">
|
|
|
+ <el-form-item label="公称通径:" prop="caliber">
|
|
|
+ <el-select filterable v-model="guangtouParam.content.where.caliber" placeholder="请选择公称通径" size="small" style="width:100%" clearable="">
|
|
|
+ <el-option v-for="item in caliber" :key="item.value" :value="item.value" :label="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="6">
|
|
|
+ <el-form-item label="公称压力:" prop="nominalpressure">
|
|
|
+ <el-select filterable v-model="guangtouParam.content.where.nominalpressure" placeholder="请选择公称压力" size="small" style="width:100%" clearable="">
|
|
|
+ <el-option v-for="item in nominalpressure" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-form>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--选执行器-->
|
|
|
+ <div class="dialog-content" v-show="active == 2">
|
|
|
+ <div class="option-line" v-if="guangtouParam.content.where.drivetype=='气动'">
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">驱动方式:</div>
|
|
|
+ <MySelect :isClear="false" :options="[{remarks:'气动调节',value:'气动调节'},{remarks:'气动开关',value:'气动开关'}]" v-model="excelParam.content.where.drivetype"></MySelect>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="option-line">
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">品牌:</div>
|
|
|
+ <MySelect @click="Search('excelParam','actuatorbrand')" :options="actuatorbrand" v-model="excelParam.content.where.actuatorbrand"></MySelect>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="option-line">
|
|
|
+ <div class="item">
|
|
|
+ <div class="label" style="width: 75px;">执行器类型:</div>
|
|
|
+ <el-select filterable @change="Search('excelParam','actuatorname')" :disabled="!excelParam.content.where.actuatorbrand" v-model="excelParam.content.where.actuatorname" placeholder="请选择执行器类型" size="small" style="width:100%" clearable>
|
|
|
+ <el-option v-for="item in actuatorname" :key="item.value" :value="item.value" :label="item.remarks"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <div class="option-line" v-show="guangtouParam.content.where.drivetype=='气动'">
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">功能:</div>
|
|
|
+ <MySelect :disabled="!excelParam.content.where.actuatorname" @click="Search('excelParam','func')" :options="func" v-model="excelParam.content.where.func"></MySelect>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="option-line" v-show="guangtouParam.content.where.drivetype=='气动'">
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">结构:</div>
|
|
|
+ <MySelect :disabled="!excelParam.content.where.func" @click="Search('excelParam','bodystructure')" :options="bodystructure" v-model="excelParam.content.where.bodystructure"></MySelect>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="guangtouParam.content.where.drivetype == '电动' && excelParam.content.where.actuatorbrand && actuatorname.length">
|
|
|
+ <div class="option-line">
|
|
|
+ <div class="item">
|
|
|
+ <div class="label" style="width: 80px;">执行器类型:</div>
|
|
|
+ <span style="font-size: 14px;font-weight: bold;color:#3874F6">{{ excelParam.content.where.actuatorname || '--' }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <SelectBar style="margin: 20px 0" v-model="excelParam.content.where.actuatorname" :options="actuatorname" @change="Search('excelParam','actuatorname')"></SelectBar>
|
|
|
+ </div>
|
|
|
+ <div class="tips" v-if="guangtouParam.content.where.drivetype=='电动'" style="color:#3874F6;margin-top: 10px;"><i class="el-icon-warning" style="margin-right: 5px;"></i>建议开关阀时间{{ caliber.filter(v=>v.value==guangtouParam.content.where.caliber).length ? caliber.filter(v=>v.value==guangtouParam.content.where.caliber)[0].remarks:'-' }}秒</div>
|
|
|
+ <!--执行器-->
|
|
|
+ <MyTable fixedName="operation" :height="tableHeight" :noQuery="true" ref="excelRef" :layout="guangtouParam.content.where.drivetype=='电动'?tool.tabelCol($route.name)['excelTable1'].tablecols:tool.tabelCol($route.name)['excelTable2'].tablecols" :param="excelParam" :opwidth="200" :custom="true" style="margin-top: 14px">
|
|
|
+ <template v-slot:customcol="scope">
|
|
|
+ <span v-if="scope.column.columnname == 'matchratio'" style="color:red">{{scope.column.data[scope.column.columnname]}}</span>
|
|
|
+ <span v-else-if="scope.column.columnname != 'operation'">{{scope.column.data[scope.column.columnname]}}</span>
|
|
|
+ </template>
|
|
|
+ <template v-slot:opreation="scope">
|
|
|
+ <el-button type="text" size="mini" @click="selectTarget(scope.data,'执行器')" :disabled="(loading) || (guangtouParam.content.where.drivetype=='电动' && resultArr.length == 2)">选择</el-button>
|
|
|
+ </template>
|
|
|
+ </MyTable>
|
|
|
+ </div>
|
|
|
+ <!--选辅件-->
|
|
|
+ <div class="dialog-content" v-show="active == 3">
|
|
|
+ <MyTable :noQuery="true" ref="fujianRef" :height="tableHeight" :layout="tool.tabelCol($route.name)['itemList'].tablecols" :param="fujianParam" :opwidth="200" :custom="true" style="margin-top: 14px">
|
|
|
+ <template v-slot:customcol="scope">
|
|
|
+ <span v-if="scope.column.columnname != 'operation'">{{scope.column.data[scope.column.columnname]}}</span>
|
|
|
+ </template>
|
|
|
+ <template v-slot:opreation="scope">
|
|
|
+ <el-button type="text" size="mini" @click="selectTarget(scope.data,'辅件')" :disabled="loading">选择</el-button>
|
|
|
+ </template>
|
|
|
+ </MyTable>
|
|
|
+ </div>
|
|
|
+ <div class="dialog-content" v-if="active == 4">
|
|
|
+ <table bgcolor="#FAFAFA" cellpadding="0" style="width: 100%;" class="result">
|
|
|
+ <tr style="width: 100px;">
|
|
|
+ <td class="title">光头</td>
|
|
|
+ <td>
|
|
|
+ <div class="text1" style="margin-bottom: 8px;">{{ resultArr[0] && resultArr[0].itemname}}</div>
|
|
|
+ <div class="descript">
|
|
|
+ <div class="item" v-if="resultArr.length && resultArr[0].itemno"><span style="color: #888888;">料号：</span>{{resultArr[0].itemno }}</div>
|
|
|
+ <div class="item" v-if="resultArr.length && resultArr[0].torque"><span style="color: #888888;">扭矩：</span>{{resultArr[0].torque }}</div>
|
|
|
+ <div class="item" v-if="resultArr.length && resultArr[0].flh"><span style="color: #888888;">法兰号：</span>{{resultArr[0].flh }}</div>
|
|
|
+ <div class="item" v-if="resultArr.length && resultArr[0].caliber"><span style="color: #888888;">公称通径：</span>{{resultArr[0].caliber }}</div>
|
|
|
+ <div class="item" v-if="resultArr.length && resultArr[0].stemmaterial"><span style="color: #888888;">阀杆材质：</span>{{resultArr[0].stemmaterial }}</div>
|
|
|
+ <div class="item" v-if="resultArr.length && resultArr[0].mainmaterial"><span style="color: #888888;">主体材质：</span>{{resultArr[0].mainmaterial }}</div>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="title">执行器</td>
|
|
|
+ <td>
|
|
|
+ <div class="text1" style="margin-bottom: 8px;">{{ resultArr[1] && resultArr[1].actuatormodel }} {{guangtouParam.content.where.drivetype == '电动' ? ` + 减速箱：${resultArr[1] && resultArr[1].gearboxname}` : '' }}</div>
|
|
|
+ <div class="descript">
|
|
|
+ <div class="item" v-if="resultArr.length >= 2 && resultArr[1].torque"><span style="color: #888888;">输出扭矩：</span>{{resultArr[1].torque }}</div>
|
|
|
+ <div class="item" v-if="resultArr.length >= 2 && resultArr[1].maxruntime"><span style="color: #888888;">开关时间：</span>{{resultArr[1].maxruntime }}</div>
|
|
|
+ <div class="item" v-if="resultArr.length >= 2 && resultArr[1].speed"><span style="color: #888888;">转速：</span>{{resultArr[1].speed }}</div>
|
|
|
+ <div class="item" v-if="resultArr.length >= 2 && resultArr[1].handwheelratio"><span style="color: #888888;">减速比：</span>{{resultArr[1].ratio }}</div>
|
|
|
+ <div class="item" v-if="resultArr.length >= 2 && resultArr[1].supplyvoltage"><span style="color: #888888;">电压：</span>{{resultArr[1].supplyvoltage }}</div>
|
|
|
+ <div class="item" v-if="resultArr.length >= 2 && resultArr[1].ratedcurrent"><span style="color: #888888;">电流：</span>{{resultArr[1].ratedcurrent }}</div>
|
|
|
+ <div class="item" v-if="resultArr.length >= 2 && resultArr[1].ratedpower"><span style="color: #888888;">功率：</span>{{resultArr[1].ratedpower }}</div>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="title">辅件</td>
|
|
|
+ <td style="padding: 0;">
|
|
|
+ <tr style="border-bottom: 1px solid #DDDDDD;" class="custom-table">
|
|
|
+ <div>定位器</div>
|
|
|
+ <div class="text1">{{ resultArr.filter(item => item.itemname == '定位器').length ? resultArr.filter(item => item.itemname == '定位器')[0].model : '-' }}</div>
|
|
|
+ <div>电磁阀</div>
|
|
|
+ <div class="text1">{{ resultArr.filter(item => item.itemname == '电磁阀').length ? resultArr.filter(item => item.itemname == '电磁阀')[0].model : '-' }}</div>
|
|
|
+ </tr>
|
|
|
+
|
|
|
+ <tr class="custom-table">
|
|
|
+ <div>限位开关</div>
|
|
|
+ <div class="text1">{{ resultArr.filter(item => item.itemname == '限位开关').length ? resultArr.filter(item => item.itemname == '限位开关')[0].model : '-' }}</div>
|
|
|
+ <div>过滤减压阀</div>
|
|
|
+ <div class="text1">{{ resultArr.filter(item => item.itemname == '过滤减压阀').length ? resultArr.filter(item => item.itemname == '过滤减压阀')[0].model : '-' }}</div>
|
|
|
+ </tr>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="title">成品料号</td>
|
|
|
+ <td class="text1">{{ Object.keys(product).length ? product.itemno||'-' : '' }}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="title">{{product.itemno?'牌价':'预估价格'}}</td>
|
|
|
+ <td class="text2">￥{{ Object.keys(product).length ? tool.formatAmount(product.price,2) : 'xxxxxx' }}</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <div class="fixed__btn__panel" v-if="(active == 1 && mode == '手动输入') || active == 3 || active == 4">
|
|
|
+ <el-button size="small" type="primary" @click="next" class="normal-btn-width" v-if="active == 1 && mode == '手动输入'">下一步</el-button>
|
|
|
+ <el-button size="small" type="primary" @click="active=4" class="normal-btn-width" v-if="active == 3" :disabled="$refs.fujianRef.list.length!= 0">下一步</el-button>
|
|
|
+ <el-button size="small" type="primary" @click="close" class="normal-btn-width" v-if="active == 4">完成</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import MySelect from '@/optionSystem/FProductManage/modules/select.vue'
|
|
|
+import MyTable from '@/optionSystem/FProductManage/modules/table.vue'
|
|
|
+import SelectBar from '@/optionSystem/FProductManage/modules/selectBar.vue'
|
|
|
+import Aside from '@/optionSystem/FProductManage/modules/aside.vue'
|
|
|
+export default {
|
|
|
+ props:['position'],
|
|
|
+ components:{MySelect,MyTable,SelectBar,Aside},
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ items: [
|
|
|
+ {title:'选光头',value:'光头'},
|
|
|
+ {title:'选执行器',value:'执行器'},
|
|
|
+ {title:'选辅件',value:'辅件'},
|
|
|
+ {title:'确认配置',value:'配置'}
|
|
|
+ ],
|
|
|
+ mode:'自动选配',
|
|
|
+ active:1,
|
|
|
+ tableHeight:'400px',
|
|
|
+ excel:'',
|
|
|
+ gangtou:'',
|
|
|
+ resultArr:[],
|
|
|
+ caliber:[],
|
|
|
+ nominalpressure:[],
|
|
|
+ connection:[],
|
|
|
+ bodymaterial:[],
|
|
|
+ stemmaterial:[],
|
|
|
+ plinthmaterial:[],
|
|
|
+ actuatorbrand:[],
|
|
|
+ actuatorname:[],
|
|
|
+ actuatordrivetype:[],
|
|
|
+ flh:[],
|
|
|
+ drivetype:[],
|
|
|
+ bodystructure:[],
|
|
|
+ func:[],
|
|
|
+ guangtouList:[],
|
|
|
+ isFujianShow:false,//辅件是否显示
|
|
|
+ form: {
|
|
|
+ "itemid": 0,
|
|
|
+ "plm_itemextendid": 0,
|
|
|
+ "valvetype": "蝶阀", //阀门类型（固定）
|
|
|
+ "itemno": "", //产品编码（必填，唯一）
|
|
|
+ "itemname": "", //产品名称（必填）
|
|
|
+ "erpitemno": "", //erp品号（必填）
|
|
|
+ "erpitemname": "", //erp品名（必填）
|
|
|
+ "spec": "", //规格尺寸（必填）
|
|
|
+ "model": "", //型号（必填）
|
|
|
+ "material": "", //材质（必填，选项）
|
|
|
+ "marketprice": '',
|
|
|
+ "caliber": "", //公称通径
|
|
|
+ "nominalpressure": [
|
|
|
+
|
|
|
+ ], //公称压力
|
|
|
+ "connection": "",
|
|
|
+ "drivetype": [
|
|
|
+
|
|
|
+ ], //驱动方式
|
|
|
+ "valveplatematerial": "",
|
|
|
+ "bodymaterial": "",
|
|
|
+ "stemmaterial": "",
|
|
|
+ "plinthmaterial": "",
|
|
|
+ "torque": "", //
|
|
|
+ "maxruntime": "", //90°最大运行时间
|
|
|
+ "actuatorbrand":"",//执行器品牌
|
|
|
+ "actuatordrivetype":"",//执行器类型
|
|
|
+ "part_itemids": [
|
|
|
+
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ guangtouParam: {
|
|
|
+ "id": 20240718162102,
|
|
|
+ "content": {
|
|
|
+ "pageNumber": 1,
|
|
|
+ "pageSize": 9999999,
|
|
|
+ "where": {
|
|
|
+ "condition": "",
|
|
|
+ "caliber": "", //公称通径
|
|
|
+ "nominalpressure": "", //公称压力
|
|
|
+ "connection": "", //连接方式
|
|
|
+ "bodymaterial": "", //阀体材质
|
|
|
+ "stemmaterial": "", //阀杆材质
|
|
|
+ "plinthmaterial": "", //阀座材质
|
|
|
+ "drivetype": "电动" //驱动方式
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ excelList:[],
|
|
|
+ excelParam: {
|
|
|
+ "id": 20240718162202,
|
|
|
+ "content": {
|
|
|
+ "itemid": "",//光头id
|
|
|
+ "pageNumber": 1,
|
|
|
+ "pageSize": 9999999,
|
|
|
+ "where": {
|
|
|
+ "condition1": "",
|
|
|
+ "condition2": "",
|
|
|
+ "torque": "", //阀门扭矩
|
|
|
+ "flh": "", //法兰号
|
|
|
+ "actuatorbrand": "", //品牌
|
|
|
+ "actuatorname":'',
|
|
|
+ "actuatordrivetype": "", //驱动方式
|
|
|
+ "maxsquarewidth": "", //方阀杆最大宽度
|
|
|
+ "maxrounddiameter": "" //圆阀杆最大直径
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ fujianList:[],
|
|
|
+ fujianArr:[],
|
|
|
+ loading:false,
|
|
|
+ fujianParam: {
|
|
|
+ "id": 20240718162402,
|
|
|
+ "content": {
|
|
|
+ "othertypes": [
|
|
|
+ ],
|
|
|
+ "pageNumber": 1,
|
|
|
+ "pageSize": 300,
|
|
|
+ "where": {
|
|
|
+ "actuatorbrand": "" //品牌
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ timer:null,
|
|
|
+ product:{}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ 'excelParam.content.where.actuatorbrand': {
|
|
|
+ handler (val) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.calcTableHieght('excelRef')
|
|
|
+ },500)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ active (val) {
|
|
|
+ switch (val) {
|
|
|
+ case 1:
|
|
|
+ this.calcTableHieght('guangtouRef')
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ this.calcTableHieght('excelRef')
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ this.calcTableHieght('fujianRef')
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ if (val == 4) {
|
|
|
+ if (this.guangtouParam.content.where.drivetype == '电动') {
|
|
|
+ if (this.resultArr[1].gearboxid) this.resultArr.push({parttype:'减速箱',itemid:this.resultArr[1].gearboxid,itemname:this.resultArr[1].gearboxname,actuatorbrand:this.resultArr[1].gearboxbrand})
|
|
|
+ }
|
|
|
+ this.$api.requested({
|
|
|
+ "id": 2024071916224702,
|
|
|
+ "content": {
|
|
|
+ "part_itemids": this.resultArr.map(item => {
|
|
|
+ return {
|
|
|
+ parttype:item.parttype,
|
|
|
+ itemid:item.itemid
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }).then(res => {
|
|
|
+ this.product = res.data
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ resultRefresh (type) {
|
|
|
+ if (type == '光头') {
|
|
|
+ this.active=1
|
|
|
+ this.resultArr=[]
|
|
|
+ this.fujianArr=[]
|
|
|
+ this.items.splice(2,1)
|
|
|
+ } else if (type == '执行器') {
|
|
|
+ this.active=2
|
|
|
+ this.resultArr.splice(1)
|
|
|
+ this.fujianArr=[]
|
|
|
+ } else {
|
|
|
+ this.fujianArr=[]
|
|
|
+ this.active = 3
|
|
|
+ this.fujianParam.content.othertypes = ['电磁阀','限位开关','过滤减压阀']
|
|
|
+ this.$refs.fujianRef.listData()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //手动输入下一步
|
|
|
+ next () {
|
|
|
+ this.$refs.ruleForm.validate(async val => {
|
|
|
+ if (val) {
|
|
|
+ let data = JSON.parse(JSON.stringify(this.guangtouParam.content.where))
|
|
|
+ this.selectTarget(data,'主阀')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ close () {
|
|
|
+ this.active = 1
|
|
|
+ this.guangtouParam.content.where.drivetype = '电动'
|
|
|
+ this.resultArr = []
|
|
|
+ this.fujianArr = []
|
|
|
+ if (this.$refs.ruleForm) {
|
|
|
+ this.$refs.ruleForm.resetFields()
|
|
|
+ this.guangtouParam.content.where.drivetype = '电动'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //搜索
|
|
|
+ Search (type,position) {
|
|
|
+ let index = 0
|
|
|
+ let whereKeys = Object.keys(this[type].content.where)
|
|
|
+ if (position) {
|
|
|
+ index = whereKeys.indexOf(position) + 1
|
|
|
+ }
|
|
|
+ if (type != 'excelParam') {
|
|
|
+ for (let i = index; i < whereKeys.length - 1; i++) {
|
|
|
+ if (!position && whereKeys[i].indexOf('condition') != -1) continue
|
|
|
+ this[type].content.where[whereKeys[i]] = ''
|
|
|
+ }
|
|
|
+ } else if (type == 'excelParam') {
|
|
|
+ for (let i = index; i < whereKeys.length; i++) {
|
|
|
+ if (whereKeys[i].indexOf('condition') != -1 || whereKeys[i].indexOf('flh') != -1 || whereKeys[i].indexOf('maxrounddiameter') != -1 || whereKeys[i].indexOf('maxsquarewidth') != -1 || whereKeys[i].indexOf('torque') != -1 || whereKeys[i].indexOf('drivetype') != -1) continue
|
|
|
+ this[type].content.where[whereKeys[i]] = ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ switch (type) {
|
|
|
+ case 'guangtouParam':
|
|
|
+ if (this.loading) return
|
|
|
+ this.loading = true
|
|
|
+ whereKeys = whereKeys.filter(item => item != 'caliber')
|
|
|
+ this.$refs.guangtouRef&&this.$refs.guangtouRef.listData(_changeOption)
|
|
|
+ break;
|
|
|
+ case 'excelParam':
|
|
|
+ if (this.loading) return
|
|
|
+ this.loading = true
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.excelRef&&this.$refs.excelRef.listData(_changeOption2)
|
|
|
+ })
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ //更新选项列表
|
|
|
+ let that = this
|
|
|
+ function _changeOption () {
|
|
|
+ that.loading = false
|
|
|
+ let isbreak=false
|
|
|
+ for (let i = 0; i < whereKeys.length; i++) {
|
|
|
+ if (isbreak) break;
|
|
|
+ if (whereKeys[i].indexOf('condition') == -1) {
|
|
|
+ if (that.$refs.guangtouRef.list.length) {
|
|
|
+ if (i >= index-1 && whereKeys[i]!='drivetype') {
|
|
|
+ that[whereKeys[i]] = that.$refs.guangtouRef.list[0].option[whereKeys[i]]
|
|
|
+ if (that[whereKeys[i]].length == 1) {
|
|
|
+ if (that.guangtouParam.content.where[position]) that.guangtouParam.content.where[whereKeys[i]] = that[whereKeys[i]][0].value
|
|
|
+ if (that.timer) clearTimeout(that.timer)
|
|
|
+ that.timer = setTimeout(() => {
|
|
|
+ that.$refs.guangtouRef&&that.$refs.guangtouRef.listData()
|
|
|
+ })
|
|
|
+ } else if (that[whereKeys[i]].length > 1) {
|
|
|
+ that.guangtouParam.content.where[whereKeys[i]] = ''
|
|
|
+ }
|
|
|
+
|
|
|
+ if (that.$refs.guangtouRef.list[0].option[whereKeys[i]].length>1) {
|
|
|
+ isbreak = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (i >= index && whereKeys[i] != 'drivetype') that[whereKeys[i]] = []
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function _changeOption2 () {
|
|
|
+ that.loading = false
|
|
|
+ let isbreak=false
|
|
|
+ for (let i = 5; i < whereKeys.length; i++) {
|
|
|
+ if (isbreak) break;
|
|
|
+ if (whereKeys[i].indexOf('condition') == -1) {
|
|
|
+ if (that.$refs.excelRef.list.length) {
|
|
|
+ if (i >= index) {
|
|
|
+ if (whereKeys[i] != 'drivetype') that[whereKeys[i]] = that.$refs.excelRef.list[0].option[whereKeys[i]]
|
|
|
+ if (that[whereKeys[i]].length == 1) {
|
|
|
+ if (that.excelParam.content.where[position]) that.excelParam.content.where[whereKeys[i]] = that[whereKeys[i]][0].value
|
|
|
+ if (that.timer) clearTimeout(that.timer)
|
|
|
+ that.timer = setTimeout(() => {
|
|
|
+ that.$refs.excelRef&&that.$refs.excelRef.listData()
|
|
|
+ })
|
|
|
+ } else if (that[whereKeys[i]].length > 1 && whereKeys[i] != 'drivetype') {
|
|
|
+ that.excelParam.content.where[whereKeys[i]] = ''
|
|
|
+ }
|
|
|
+ if (that.$refs.excelRef.list[0].option[whereKeys[i]].length>1) {
|
|
|
+ isbreak = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (i >= index && whereKeys[i] != 'drivetype') that[whereKeys[i]] = []
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ calcTableHieght (id) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ let target = this.$refs[id].$el.getBoundingClientRect()
|
|
|
+ let clientHeight = document.body.clientHeight
|
|
|
+ this.tableHeight = clientHeight - target.top - 85 + 'px'
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ guangtouChange (val) {
|
|
|
+ switch (val) {
|
|
|
+ case '电动':
|
|
|
+ this.excelParam = {
|
|
|
+ "id": 20240718162202,
|
|
|
+ "content": {
|
|
|
+ "itemid": 0,//光头id
|
|
|
+ "pageNumber": 1,
|
|
|
+ "pageSize": 9999999,
|
|
|
+ "where": {
|
|
|
+ "condition1": "",
|
|
|
+ "condition2": "",
|
|
|
+ "torque": "", //阀门扭矩
|
|
|
+ "flh": "", //法兰号
|
|
|
+ "actuatorbrand": "", //品牌
|
|
|
+ "actuatorname":'',
|
|
|
+ "actuatordrivetype": "", //驱动方式
|
|
|
+ "maxsquarewidth": "", //方阀杆最大宽度
|
|
|
+ "maxrounddiameter": "" //圆阀杆最大直径
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case '气动':
|
|
|
+
|
|
|
+ this.excelParam = {
|
|
|
+ "id": 20240718162302,
|
|
|
+ "content": {
|
|
|
+ "pageNumber": 1,
|
|
|
+ "pageSize": 9999999,
|
|
|
+ "where": {
|
|
|
+ "condition1": "",
|
|
|
+ "torque": "", //阀门扭矩
|
|
|
+ "flh": "", //法兰号
|
|
|
+ "maxsquarewidth": "", //方阀杆最大宽度
|
|
|
+ "maxrounddiameter": "", //圆阀杆最大直径
|
|
|
+ "actuatorbrand": "", //品牌
|
|
|
+ "actuatorname":'',
|
|
|
+ "func": "", //功能
|
|
|
+ "bodystructure": "", //结构
|
|
|
+ "drivetype":'气动调节',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //选择目标
|
|
|
+ selectTarget (data,type) {
|
|
|
+ data.parttype = type
|
|
|
+ this.resultArr.push(data)
|
|
|
+ if (type == '主阀') {
|
|
|
+ this.guangtouChange(this.guangtouParam.content.where.drivetype)
|
|
|
+ this.excelParam.content.itemid = data.itemid
|
|
|
+ this.excelParam.content.where.torque = data.torque
|
|
|
+ this.excelParam.content.where.flh = data.flh
|
|
|
+ this.excelParam.content.where.maxsquarewidth = data.maxsquarewidth
|
|
|
+ this.excelParam.content.where.maxrounddiameter = data.maxrounddiameter
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.excelRef.listData(() => {
|
|
|
+ if (!this.$refs.excelRef.list.length) return
|
|
|
+ this.actuatorbrand = this.$refs.excelRef.list[0].option.actuatorbrand
|
|
|
+ this.bodystructure = this.$refs.excelRef.list[0].option.bodystructure
|
|
|
+ this.func = this.$refs.excelRef.list[0].option.func
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.active = 2
|
|
|
+ } else if (type == '执行器') {
|
|
|
+ this.resultArr[1].itenname = this.resultArr[1].actuatorname
|
|
|
+ this.resultArr[1].itemno = this.resultArr[1].actuatorno
|
|
|
+
|
|
|
+ if (this.excelParam.content.where.drivetype == '气动调节') {
|
|
|
+ this.fujianParam.content.othertypes = ['定位器','过滤减压阀']
|
|
|
+ } else {
|
|
|
+ this.fujianParam.content.othertypes = ['电磁阀','限位开关','过滤减压阀']
|
|
|
+ }
|
|
|
+ data.itemid = data.actuatorid
|
|
|
+ data.itemname = data.actuatorname
|
|
|
+ if (this.guangtouParam.content.where.drivetype == '气动') {
|
|
|
+ this.active = 3
|
|
|
+ this.$refs.fujianRef.listData()
|
|
|
+ } else {
|
|
|
+ this.active = 4
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (this.fujianArr.filter(item=>item.itemid==data.itemid).length) return
|
|
|
+ this.fujianParam.content.othertypes.splice(this.fujianParam.content.othertypes.indexOf(data.itemname),1)
|
|
|
+ this.loading = true
|
|
|
+ this.$refs.fujianRef.listData(()=> {
|
|
|
+ this.fujianArr.push(data)
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ this.resultArr[this.resultArr.length - 1] = data
|
|
|
+ },
|
|
|
+ //重置
|
|
|
+ refresh () {
|
|
|
+ this.resultArr = []
|
|
|
+ this.fujianArr = []
|
|
|
+ this.dialogVisible = false
|
|
|
+ this.active = 1
|
|
|
+ this.items = this.items.splice(0,2)
|
|
|
+ },
|
|
|
+ //选项
|
|
|
+ optionsList () {
|
|
|
+ this.$store.dispatch("optiontypeselect", "caliber").then((res) => {
|
|
|
+ this.caliber = res.data;
|
|
|
+ console.log(this.caliber, "公称通径");
|
|
|
+ });
|
|
|
+ this.$store.dispatch("optiontypeselect", "pressure").then((res) => {
|
|
|
+ this.nominalpressure = res.data;
|
|
|
+ console.log(this.nominalpressure, "公称压力");
|
|
|
+ });
|
|
|
+ this.$store.dispatch("optiontypeselect", "connection").then((res) => {
|
|
|
+ this.connection = res.data;
|
|
|
+ console.log(this.connection, "连接方式");
|
|
|
+ });
|
|
|
+ this.$store.dispatch("optiontypeselect", "bodymaterial").then((res) => {
|
|
|
+ this.bodymaterial = res.data;
|
|
|
+ console.log(this.bodymaterial, "阀体材质");
|
|
|
+ });
|
|
|
+ this.$store.dispatch("optiontypeselect", "stemmaterial").then((res) => {
|
|
|
+ this.stemmaterial = res.data;
|
|
|
+ console.log(this.stemmaterial, "阀杆材质");
|
|
|
+ });
|
|
|
+ this.$store.dispatch("optiontypeselect", "plinthmaterial").then((res) => {
|
|
|
+ this.plinthmaterial = res.data;
|
|
|
+ console.log(this.plinthmaterial, "阀座材质");
|
|
|
+ });
|
|
|
+ this.drivetype = [{remarks:'电动',value:'电动'},{remarks:'气动',value:'气动'}];
|
|
|
+ console.log(this.drivetype, "驱动方式");
|
|
|
+ this.$store.dispatch("optiontypeselect", "actuatorbrand").then((res) => {
|
|
|
+ this.actuatorbrand = res.data;
|
|
|
+ console.log(this.actuatorbrand, "执行器品牌");
|
|
|
+ });
|
|
|
+ this.$store.dispatch("optiontypeselect", "actuatordrivetype").then((res) => {
|
|
|
+ this.actuatordrivetype = res.data;
|
|
|
+ console.log(this.actuatordrivetype, "执行器驱动方式");
|
|
|
+ });
|
|
|
+ this.$store.dispatch("optiontypeselect", "bodystructure").then((res) => {
|
|
|
+ this.bodystructure = res.data;
|
|
|
+ console.log(this.bodystructure, "结构");
|
|
|
+ });
|
|
|
+ this.$store.dispatch("optiontypeselect", "func").then((res) => {
|
|
|
+ this.func = res.data;
|
|
|
+ console.log(this.func, "功能");
|
|
|
+ });
|
|
|
+ this.$store.dispatch("optiontypeselect", "flh").then((res) => {
|
|
|
+ this.flh = res.data;
|
|
|
+ console.log(this.func, "法兰号");
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.optionsList()
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.calcTableHieght('guangtouRef')
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ /deep/.ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title::after {
|
|
|
+ background: #3874F6 !important;
|
|
|
+ }
|
|
|
+ /deep/.ant-steps-item-finish .ant-steps-item-icon {
|
|
|
+ background: none !important;
|
|
|
+ }
|
|
|
+ /deep/.ant-steps-item-icon {
|
|
|
+ background: #3874F6;
|
|
|
+ height: 32px !important;
|
|
|
+ }
|
|
|
+ /deep/.ant-steps-item-wait .ant-steps-item-icon {
|
|
|
+ background: none !important;
|
|
|
+ }
|
|
|
+ /deep/.ant-steps-item-active .ant-steps-item-title {
|
|
|
+ color:#3874F6 !important;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .scroll {
|
|
|
+ height: calc(100vh - 60px);
|
|
|
+ overflow-y: scroll;
|
|
|
+ }
|
|
|
+ ::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .select-info {
|
|
|
+ background: #F5F6FA;
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ width: 240px;
|
|
|
+ border-right: 1px #999999 solid;
|
|
|
+ z-index: 99999991;
|
|
|
+ flex-shrink: 0;
|
|
|
+ word-wrap: break-word;
|
|
|
+ }
|
|
|
+ .select-info .info-title {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #333333;
|
|
|
+ padding: 10px 20px;
|
|
|
+ border-bottom: 1px solid #D9D9D9;
|
|
|
+ }
|
|
|
+ .select-info .product-wrapper {
|
|
|
+ padding: 0 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-info .product-wrapper .product {
|
|
|
+ padding-bottom:20px;
|
|
|
+ border-bottom: #D9D9D9 1px solid;
|
|
|
+ }
|
|
|
+ .select-info .product-wrapper .product:last-child {
|
|
|
+ border-bottom: none !important;
|
|
|
+ }
|
|
|
+ .select-info .product-wrapper .product .product-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ align-content: center;
|
|
|
+ padding: 10px 0;
|
|
|
+ }
|
|
|
+ .select-info .product-wrapper .product .product-header span:last-child {
|
|
|
+ color: #3874F6;
|
|
|
+ margin-left: 18px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .select-info .product-wrapper .product .product-header .title {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .select-info .product-wrapper .product .product-header img {
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ }
|
|
|
+ .select-info .product-wrapper .product .product-name {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #555555;
|
|
|
+ }
|
|
|
+ .select-info .product-wrapper .product .attrite {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999999;
|
|
|
+ padding-top: 10px;
|
|
|
+ }
|
|
|
+ .select-info .product-wrapper .product .attrite .attrite-title {
|
|
|
+ color: #555555;
|
|
|
+ }
|
|
|
+ .select-info .product-wrapper .product .attrite .attrite-value {
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-info .product-wrapper .product .attrite2 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999999;
|
|
|
+ padding-top: 10px;
|
|
|
+ }
|
|
|
+ .select-info .product-wrapper .product .attrite2 .attrite-title {
|
|
|
+ color: #555555;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ .select-info .product-wrapper .product .attrite2 .attrite-value {
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-info .product-wrapper .product {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .drawer__panel {
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ padding: 10px 40px !important;
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .my-steps {
|
|
|
+ padding: 0px 68px;
|
|
|
+ }
|
|
|
+ .product-info {
|
|
|
+ padding: 10px 20px;
|
|
|
+ border: 1px solid #3874F6;
|
|
|
+ background: rgba(56, 116, 246, 0.08);
|
|
|
+ margin-top: 5px;
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+ .product-info .title {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 16px !important;
|
|
|
+ }
|
|
|
+ .product-info .info-content {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+ .product-info .info-content .info-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ .product-info .info-content .info-item .info-title {
|
|
|
+ margin-bottom: 4px;
|
|
|
+ display: flex;
|
|
|
+ align-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .product-info .info-content .info-item .info-title .title {
|
|
|
+ margin-bottom: 0px !important;
|
|
|
+ }
|
|
|
+ .product-info .info-content .info-item .info-title div {
|
|
|
+ margin-right: 20px;
|
|
|
+ font-size: 14px !important;
|
|
|
+ }
|
|
|
+ .product-info .info-content .info-item .info-title span {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #3874F6 !important;
|
|
|
+ cursor: pointer;
|
|
|
+ display: inline-block;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ align-content: center;
|
|
|
+ }
|
|
|
+ .product-info .info-content .info-item .info-title span img {
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ .product-info .info-content .info-item .name {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #555555;
|
|
|
+ }
|
|
|
+ .product-info .info-content .info-item .names {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #555555;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .product-info .info-content .info-item .names div {
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ .product-info .info-content .info-item .names div span {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .product-content .block {
|
|
|
+ margin-top: 30px;
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+ .product-content .block .header {
|
|
|
+ display: flex;
|
|
|
+ align-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .product-content .block .header .title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ .product-content .block .header .handle {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-content {
|
|
|
+
|
|
|
+ }
|
|
|
+ .dialog-content .option-line {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .dialog-content .option-line .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500px;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ .dialog-content .option-line .item .label {
|
|
|
+ width: 70px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ text-align-last: justify;
|
|
|
+ margin-right: 15px;
|
|
|
+ color: #000000 !important;
|
|
|
+ }
|
|
|
+ .descript {
|
|
|
+ font-size:12px;
|
|
|
+ color:red;
|
|
|
+ }
|
|
|
+ table,td,tr {
|
|
|
+ border-collapse: collapse;
|
|
|
+ }
|
|
|
+ td {
|
|
|
+ padding: 20px 20px;
|
|
|
+ }
|
|
|
+ table,td {
|
|
|
+ border: 1px solid #DDDDDD;
|
|
|
+ }
|
|
|
+ .result{
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .result .title {
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
+ padding: 34px 20px;
|
|
|
+ }
|
|
|
+ .custom-table {
|
|
|
+ border: none;
|
|
|
+ display: flex;
|
|
|
+ height: 64px;
|
|
|
+ align-items: center;
|
|
|
+ align-content: center;
|
|
|
+ }
|
|
|
+ .custom-table div{
|
|
|
+ border-right: 1px solid #DDDDDD;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ align-content: center;
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+ .custom-table div:nth-child(1) {
|
|
|
+ width: 120px;
|
|
|
+ }
|
|
|
+ .custom-table div:nth-child(2) {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .custom-table div:nth-child(3) {
|
|
|
+ width: 120px;
|
|
|
+ }
|
|
|
+ .custom-table div:nth-child(4) {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .descript {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .descript .item {
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ margin-right: 40px;
|
|
|
+ }
|
|
|
+ .descript .item:last-child {
|
|
|
+ margin-right: 0 !important;
|
|
|
+ }
|
|
|
+ .text1 {
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #3874F6;
|
|
|
+ }
|
|
|
+ .text2 {
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #E80000;
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
