DieFa.vue 62 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915
  1. <template>
  2. <div style="display: flex; height: calc(100vh - 120px)">
  3. <Aside
  4. :resultArr="resultArr"
  5. :fujianArr="fujianArr"
  6. @refresh="resultRefresh"
  7. ></Aside>
  8. <div class="drawer__panel">
  9. <div class="my-steps">
  10. <a-steps :current="active - 1" style="margin-bottom: 10px">
  11. <a-step
  12. :title="$t(item.title)"
  13. v-for="(item, index) in items"
  14. :key="index"
  15. >
  16. <i
  17. slot="icon"
  18. class="iconfont"
  19. style="font-size: 32px; color: #3874f6 !important"
  20. v-if="active > index + 1"
  21. >&#xe6fd;</i
  22. >
  23. </a-step>
  24. </a-steps>
  25. </div>
  26. <!--选光头-->
  27. <div class="dialog-content" v-show="active == 1">
  28. <div class="option-line">
  29. <MySelect
  30. type="radius"
  31. :isClear="false"
  32. :options="[
  33. { remarks: '自动选配', value: '自动选配' },
  34. { remarks: '手动输入', value: '手动输入' },
  35. ]"
  36. v-model="mode"
  37. ></MySelect>
  38. </div>
  39. <div v-show="mode == '自动选配'">
  40. <div class="option-line">
  41. <div class="item">
  42. <div class="label">{{ $t("搜索") }}:</div>
  43. <el-input
  44. :placeholder="$t(`名称/料号`)"
  45. v-model="guangtouParam.content.where.condition"
  46. clearable
  47. @clear="Search('guangtouParam')"
  48. size="small"
  49. @keyup.enter.native="Search('guangtouParam')"
  50. >
  51. </el-input>
  52. </div>
  53. </div>
  54. <div class="option-line">
  55. <div class="item">
  56. <div class="label">{{ $t("驱动方式") }}:</div>
  57. <MySelect
  58. :isClear="false"
  59. @click="
  60. ($event) => {
  61. guangtouChange($event);
  62. Search('guangtouParam', 'drivetype');
  63. }
  64. "
  65. :options="drivetype"
  66. v-model="guangtouParam.content.where.drivetype"
  67. ></MySelect>
  68. </div>
  69. </div>
  70. <div class="option-line">
  71. <div class="item">
  72. <div class="label">{{ $t("公称通径") }}:</div>
  73. <el-select
  74. filterable
  75. v-model="guangtouParam.content.where.caliber"
  76. :placeholder="$t(`请选择公称通径`)"
  77. size="small"
  78. style="width: 100%"
  79. clearable
  80. @change="Search('guangtouParam', 'caliber')"
  81. >
  82. <el-option
  83. v-for="item in caliber"
  84. :key="item.value"
  85. :value="item.value"
  86. :label="$t(item.value)"
  87. ></el-option>
  88. </el-select>
  89. </div>
  90. <div class="item">
  91. <div class="label">{{ $t("公称压力") }}:</div>
  92. <el-select
  93. filterable
  94. @change="Search('guangtouParam', 'nominalpressure')"
  95. :disabled="!guangtouParam.content.where.caliber"
  96. v-model="guangtouParam.content.where.nominalpressure"
  97. :placeholder="$t(`请选择公称压力`)"
  98. size="small"
  99. style="width: 100%"
  100. clearable
  101. >
  102. <el-option
  103. v-for="item in nominalpressure"
  104. :key="item.value"
  105. :value="item.value"
  106. :label="$t(item.remarks)"
  107. ></el-option>
  108. </el-select>
  109. </div>
  110. </div>
  111. <div class="option-line">
  112. <div class="item">
  113. <div class="label">{{ $t("连接方式") }}:</div>
  114. <MySelect
  115. @click="Search('guangtouParam', 'connection')"
  116. :disabled="!guangtouParam.content.where.nominalpressure"
  117. :options="connection"
  118. v-model="guangtouParam.content.where.connection"
  119. ></MySelect>
  120. </div>
  121. </div>
  122. <div class="option-line">
  123. <div class="item">
  124. <div class="label">{{ $t("阀体材质") }}:</div>
  125. <el-select
  126. filterable
  127. @change="Search('guangtouParam', 'bodymaterial')"
  128. :disabled="!guangtouParam.content.where.connection"
  129. v-model="guangtouParam.content.where.bodymaterial"
  130. :placeholder="$t(`请选择阀体材质`)"
  131. size="small"
  132. style="width: 100%"
  133. clearable
  134. >
  135. <el-option
  136. v-for="item in bodymaterial"
  137. :key="item.value"
  138. :value="item.value"
  139. :label="$t(item.remarks)"
  140. ></el-option>
  141. </el-select>
  142. </div>
  143. <div class="item">
  144. <div class="label">{{ $t("阀杆材质") }}:</div>
  145. <el-select
  146. filterable
  147. @change="Search('guangtouParam', 'stemmaterial')"
  148. :disabled="!guangtouParam.content.where.bodymaterial"
  149. v-model="guangtouParam.content.where.stemmaterial"
  150. :placeholder="$t(`请选择阀杆材质`)"
  151. size="small"
  152. style="width: 100%"
  153. clearable
  154. >
  155. <el-option
  156. v-for="item in stemmaterial"
  157. :key="item.value"
  158. :value="item.value"
  159. :label="$t(item.remarks)"
  160. ></el-option>
  161. </el-select>
  162. </div>
  163. <div class="item">
  164. <div class="label">{{ $t("阀座材质") }}:</div>
  165. <el-select
  166. filterable
  167. @change="Search('guangtouParam', 'plinthmaterial')"
  168. :disabled="!guangtouParam.content.where.stemmaterial"
  169. v-model="guangtouParam.content.where.plinthmaterial"
  170. :placeholder="$t(`请选择阀座材质`)"
  171. size="small"
  172. style="width: 100%"
  173. clearable
  174. >
  175. <el-option
  176. v-for="item in plinthmaterial"
  177. :key="item.value"
  178. :value="item.value"
  179. :label="$t(item.remarks)"
  180. ></el-option>
  181. </el-select>
  182. </div>
  183. </div>
  184. <!--光头-->
  185. <MyTable
  186. :height="tableHeight"
  187. ref="guangtouRef"
  188. fixedName="operation"
  189. :layout="tool.tabelCol($route.name)['guangtouTable'].tablecols"
  190. :param="guangtouParam"
  191. :opwidth="200"
  192. :custom="true"
  193. style="margin-top: 14px;"
  194. >
  195. <template v-slot:customcol="scope">
  196. <span v-if="scope.column.columnname != 'operation'">{{
  197. $t(scope.column.data[scope.column.columnname])
  198. }}</span>
  199. </template>
  200. <template v-slot:opreation="scope">
  201. <el-button
  202. type="text"
  203. size="mini"
  204. @click="selectTarget(scope.data, '主阀')"
  205. :disabled="!guangtouParam.content.where.drivetype"
  206. >{{ $t("选择") }}</el-button
  207. >
  208. </template>
  209. </MyTable>
  210. </div>
  211. <div class="write" style="margin-top: 10px" v-show="mode == '手动输入'">
  212. <el-row :gutter="10">
  213. <el-form
  214. :model="guangtouParam.content.where"
  215. ref="ruleForm"
  216. :label-width="tool.onlyZh('130px')"
  217. >
  218. <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="6">
  219. <el-form-item
  220. :label="$t(`驱动方式`) + ':'"
  221. prop="drivetype"
  222. :rules="{
  223. required: true,
  224. message: $t('请选择驱动方式'),
  225. trigger: 'blur',
  226. }"
  227. >
  228. <el-select
  229. filterable
  230. v-model="guangtouParam.content.where.drivetype"
  231. :placeholder="$t(`请选择驱动方式`)"
  232. size="small"
  233. style="width: 100%"
  234. >
  235. <el-option
  236. v-for="item in drivetype"
  237. :key="item.value"
  238. :value="item.value"
  239. :label="$t(item.remarks)"
  240. ></el-option>
  241. </el-select>
  242. </el-form-item>
  243. </el-col>
  244. <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="6">
  245. <el-form-item
  246. :label="$t(`扭矩`) + ':'"
  247. prop="torque"
  248. :rules="{
  249. required: true,
  250. message: $t('请输入扭矩'),
  251. trigger: 'blur',
  252. }"
  253. >
  254. <el-input
  255. v-model="guangtouParam.content.where.torque"
  256. size="small"
  257. :placeholder="$t(`请输入扭矩`)"
  258. ></el-input>
  259. </el-form-item>
  260. </el-col>
  261. <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="6">
  262. <el-form-item
  263. :label="$t(`法兰号`) + ':'"
  264. prop="flh"
  265. :rules="{
  266. required: true,
  267. message: $t('请选择法兰号'),
  268. trigger: 'blur',
  269. }"
  270. >
  271. <el-select
  272. filterable
  273. v-model="guangtouParam.content.where.flh"
  274. :placeholder="$t(`请选择法兰号`)"
  275. size="small"
  276. style="width: 100%"
  277. >
  278. <el-option
  279. v-for="item in flh"
  280. :key="item.value"
  281. :value="item.value"
  282. :label="$t(item.remarks)"
  283. ></el-option>
  284. </el-select>
  285. </el-form-item>
  286. </el-col>
  287. <el-col
  288. :xs="12"
  289. :sm="12"
  290. :md="12"
  291. :lg="12"
  292. :xl="6"
  293. v-if="!guangtouParam.content.where.maxrounddiameter"
  294. >
  295. <el-form-item
  296. :label="$t(`方阀杆最大宽度`) + ':'"
  297. prop="maxsquarewidth"
  298. :rules="{
  299. required: true,
  300. message: $t('请输入方阀杆最大宽度'),
  301. trigger: 'blur',
  302. }"
  303. >
  304. <el-input
  305. size="small"
  306. v-model="guangtouParam.content.where.maxsquarewidth"
  307. :placeholder="$t(`请输入方阀杆最大宽度`)"
  308. ></el-input>
  309. </el-form-item>
  310. </el-col>
  311. <el-col
  312. :xs="12"
  313. :sm="12"
  314. :md="12"
  315. :lg="12"
  316. :xl="6"
  317. v-if="!guangtouParam.content.where.maxsquarewidth"
  318. >
  319. <el-form-item
  320. :label="$t(`圆阀杆最大直径`) + ':'"
  321. prop="maxrounddiameter"
  322. :rules="{
  323. required: true,
  324. message: $t('请输入圆阀杆最大直径'),
  325. trigger: 'blur',
  326. }"
  327. >
  328. <el-input
  329. size="small"
  330. v-model="guangtouParam.content.where.maxrounddiameter"
  331. :placeholder="$t(`请输入圆阀杆最大直径`)"
  332. ></el-input>
  333. </el-form-item>
  334. </el-col>
  335. <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="6">
  336. <el-form-item :label="$t(`公称通径`) + ':'" prop="caliber">
  337. <el-select
  338. filterable
  339. v-model="guangtouParam.content.where.caliber"
  340. :placeholder="$t(`请选择公称通径`)"
  341. size="small"
  342. style="width: 100%"
  343. clearable=""
  344. >
  345. <el-option
  346. v-for="item in caliber"
  347. :key="item.value"
  348. :value="item.value"
  349. :label="$t(item.value)"
  350. ></el-option>
  351. </el-select>
  352. </el-form-item>
  353. </el-col>
  354. <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="6">
  355. <el-form-item
  356. :label="$t(`公称压力`) + ':'"
  357. prop="nominalpressure"
  358. >
  359. <el-select
  360. filterable
  361. v-model="guangtouParam.content.where.nominalpressure"
  362. :placeholder="$t(`请选择公称压力`)"
  363. size="small"
  364. style="width: 100%"
  365. clearable=""
  366. >
  367. <el-option
  368. v-for="item in nominalpressure"
  369. :key="item.value"
  370. :value="item.value"
  371. :label="$t(item.remarks)"
  372. ></el-option>
  373. </el-select>
  374. </el-form-item>
  375. </el-col>
  376. </el-form>
  377. </el-row>
  378. </div>
  379. </div>
  380. <!--选执行器-->
  381. <div class="dialog-content" v-show="active == 2">
  382. <div class="option-line">
  383. <div class="item">
  384. <div class="label">{{ $t("执行器") }}:</div>
  385. <el-input
  386. :placeholder="$t(`型号/料号`)"
  387. v-model="excelParam.content.where.condition1"
  388. clearable
  389. @clear="Search('excelParam')"
  390. size="small"
  391. @keyup.enter.native="Search('excelParam')"
  392. >
  393. </el-input>
  394. </div>
  395. <div
  396. class="item"
  397. v-if="guangtouParam.content.where.drivetype != '气动'"
  398. >
  399. <div class="label">{{ $t("减速箱") }}:</div>
  400. <el-input
  401. :placeholder="$t(`型号/料号`)"
  402. v-model="excelParam.content.where.condition2"
  403. clearable
  404. @clear="Search('excelParam')"
  405. size="small"
  406. @keyup.enter.native="Search('excelParam')"
  407. >
  408. </el-input>
  409. </div>
  410. </div>
  411. <div
  412. class="option-line"
  413. v-if="guangtouParam.content.where.drivetype == '气动'"
  414. >
  415. <div class="item">
  416. <div class="label">{{ $t("驱动方式") }}:</div>
  417. <MySelect
  418. :isClear="false"
  419. :options="[
  420. { remarks: '气动调节', value: '气动调节' },
  421. { remarks: '气动开关', value: '气动开关' },
  422. ]"
  423. v-model="excelParam.content.where.drivetype"
  424. ></MySelect>
  425. </div>
  426. </div>
  427. <div
  428. class="option-line"
  429. v-if="guangtouParam.content.where.drivetype == '电动'"
  430. >
  431. <div class="item">
  432. <div class="label">{{ $t("驱动方式") }}:</div>
  433. <MySelect
  434. @click="
  435. Search('excelParam', 'actuatordrivetype');
  436. calcTableHeight('excelRef');
  437. "
  438. :options="[
  439. { remarks: '电动开关', value: '电动开关' },
  440. { remarks: '电动调节', value: '电动调节' },
  441. ]"
  442. v-model="excelParam.content.where.actuatordrivetype"
  443. ></MySelect>
  444. </div>
  445. </div>
  446. <div v-if="actuatorbrand.length">
  447. <div
  448. class="option-line"
  449. v-if="guangtouParam.content.where.drivetype == '电动'"
  450. >
  451. <div class="item">
  452. <div class="label">{{ $t("品牌") }}:</div>
  453. <MySelect
  454. @click="Search('excelParam', 'actuatorbrand')"
  455. :disabled="!excelParam.content.where.actuatordrivetype"
  456. :options="actuatorbrand"
  457. v-model="excelParam.content.where.actuatorbrand"
  458. ></MySelect>
  459. </div>
  460. </div>
  461. <div class="option-line" v-else>
  462. <div class="item">
  463. <div class="label">{{ $t("品牌") }}:</div>
  464. <MySelect
  465. @click="Search('excelParam', 'actuatorbrand')"
  466. :options="actuatorbrand"
  467. v-model="excelParam.content.where.actuatorbrand"
  468. ></MySelect>
  469. </div>
  470. </div>
  471. </div>
  472. <div
  473. v-if="
  474. guangtouParam.content.where.drivetype == '电动' &&
  475. excelParam.content.where.actuatorbrand &&
  476. actuatorname.length
  477. "
  478. >
  479. <div class="option-line">
  480. <div class="item">
  481. <div class="label" style="width: 80px">
  482. {{ $t("执行器类型") }}:
  483. </div>
  484. <span
  485. style="font-size: 14px; font-weight: bold; color: #3874f6"
  486. >{{ $t(excelParam.content.where.actuatorname) || "--" }}</span
  487. >
  488. </div>
  489. </div>
  490. <SelectBar
  491. style="margin: 20px 0"
  492. v-model="excelParam.content.where.actuatorname"
  493. @change="Search('excelParam', 'actuatorname')"
  494. :options="computedActuatorNameOptions"
  495. ></SelectBar>
  496. </div>
  497. <div
  498. class="option-line"
  499. v-if="guangtouParam.content.where.drivetype == '电动'"
  500. >
  501. <div class="item">
  502. <div class="label">{{ $t("电源电压") }}:</div>
  503. <MySelect
  504. @click="Search('excelParam', 'supplyvoltage')"
  505. :disabled="!excelParam.content.where.actuatorname"
  506. :options="supplyvoltage"
  507. v-model="excelParam.content.where.supplyvoltage"
  508. ></MySelect>
  509. </div>
  510. <div class="item">
  511. <div class="label">{{ $t("信号类型") }}:</div>
  512. <MySelect
  513. @click="Search('excelParam', 'actuatorsignal')"
  514. :disabled="!excelParam.content.where.supplyvoltage"
  515. :options="actuatorsignal"
  516. v-model="excelParam.content.where.actuatorsignal"
  517. ></MySelect>
  518. </div>
  519. </div>
  520. <!-- <div class="option-line">
  521. <div class="item">
  522. <div class="label" style="width: 75px;">{{$t('执行器类型')}}:</div>
  523. <el-select filterable @change="Search('excelParam','actuatorname')" :disabled="!excelParam.content.where.actuatorbrand" v-model="excelParam.content.where.actuatorname" :placeholder="$t(`请选择执行器类型`)" size="small" style="width:100%" clearable>
  524. <el-option v-for="item in actuatorname" :key="item.value" :value="item.value" :label="$t(item.remarks)"></el-option>
  525. </el-select>
  526. </div>
  527. </div> -->
  528. <div
  529. class="option-line"
  530. v-show="guangtouParam.content.where.drivetype == '气动'"
  531. >
  532. <div class="item">
  533. <div class="label">{{ $t("功能") }}:</div>
  534. <MySelect
  535. :disabled="!excelParam.content.where.actuatorname"
  536. @click="Search('excelParam', 'func')"
  537. :options="func"
  538. v-model="excelParam.content.where.func"
  539. ></MySelect>
  540. </div>
  541. </div>
  542. <div
  543. class="option-line"
  544. v-show="guangtouParam.content.where.drivetype == '气动'"
  545. >
  546. <div class="item">
  547. <div class="label">{{ $t("结构") }}:</div>
  548. <MySelect
  549. :disabled="!excelParam.content.where.func"
  550. @click="Search('excelParam', 'bodystructure')"
  551. :options="bodystructure"
  552. v-model="excelParam.content.where.bodystructure"
  553. ></MySelect>
  554. </div>
  555. </div>
  556. <div
  557. class="tips"
  558. v-if="
  559. guangtouParam.content.where.drivetype == '电动' && resultArr.length
  560. "
  561. style="color: #3874f6; margin-top: 10px"
  562. >
  563. <i class="el-icon-warning" style="margin-right: 5px"></i
  564. >{{ $t("建议开关阀时间")
  565. }}{{
  566. caliber.filter((v) => v.value == resultArr[0].caliber).length
  567. ? caliber
  568. .filter((v) => v.value == resultArr[0].caliber)[0]
  569. .remarks.split(";")[0]
  570. : "-"
  571. }}{{ $t("秒") }}
  572. </div>
  573. <!--执行器-->
  574. <div v-if="guangtouParam.content.where.drivetype == '电动'">
  575. <MyTable
  576. fixedName="operation"
  577. :height="tableHeight"
  578. :noQuery="true"
  579. ref="excelRef"
  580. :layout="tool.tabelCol($route.name)['excelTable1'].tablecols"
  581. :param="excelParam"
  582. :custom="true"
  583. style="margin-top: 14px;"
  584. >
  585. <template v-slot:customcol="scope">
  586. <span
  587. v-if="scope.column.columnname == 'matchratio'"
  588. style="color: red"
  589. >{{ $t(scope.column.data[scope.column.columnname]) }}</span
  590. >
  591. <span v-else-if="scope.column.columnname == 'maxsquarewidth'">{{
  592. scope.column.data[scope.column.columnname].join(",")
  593. }}</span>
  594. <span v-else-if="scope.column.columnname != 'operation'">{{
  595. $t(scope.column.data[scope.column.columnname])
  596. }}</span>
  597. </template>
  598. <template v-slot:opreation="scope">
  599. <el-button
  600. type="text"
  601. size="mini"
  602. @click="selectTarget(scope.data, '执行器')"
  603. :disabled="
  604. guangtouParam.content.where.drivetype == '电动' &&
  605. resultArr.length == 2
  606. "
  607. >{{ $t("选择") }}</el-button
  608. >
  609. </template>
  610. </MyTable>
  611. </div>
  612. <MyTable
  613. v-else
  614. :height="tableHeight"
  615. fixedName="operation"
  616. :noQuery="true"
  617. ref="excelRef"
  618. :layout="tool.tabelCol($route.name)['excelTable2'].tablecols"
  619. :param="excelParam"
  620. :custom="true"
  621. style="margin-top: 14px"
  622. >
  623. <template v-slot:customcol="scope">
  624. <span
  625. v-if="scope.column.columnname == 'matchratio'"
  626. style="color: red"
  627. >{{ $t(scope.column.data[scope.column.columnname]) }}</span
  628. >
  629. <span v-else-if="scope.column.columnname == 'maxsquarewidth'">{{
  630. scope.column.data[scope.column.columnname].join(",")
  631. }}</span>
  632. <span v-else-if="scope.column.columnname != 'operation'">{{
  633. $t(scope.column.data[scope.column.columnname])
  634. }}</span>
  635. </template>
  636. <template v-slot:opreation="scope">
  637. <el-button
  638. type="text"
  639. size="mini"
  640. @click="selectTarget(scope.data, '执行器')"
  641. :disabled="
  642. guangtouParam.content.where.drivetype == '电动' &&
  643. resultArr.length == 2
  644. "
  645. >{{ $t("选择") }}</el-button
  646. >
  647. </template>
  648. </MyTable>
  649. </div>
  650. <!--选辅件-->
  651. <div class="dialog-content" v-show="active == 3">
  652. <MyTable
  653. :noQuery="true"
  654. ref="fujianRef"
  655. fixedName="operation"
  656. :height="tableHeight"
  657. :layout="tool.tabelCol($route.name)['itemList'].tablecols"
  658. :param="fujianParam"
  659. :opwidth="200"
  660. :custom="true"
  661. style="margin-top: 14px"
  662. >
  663. <template v-slot:customcol="scope">
  664. <span v-if="scope.column.columnname != 'operation'">{{
  665. $t(scope.column.data[scope.column.columnname])
  666. }}</span>
  667. </template>
  668. <template v-slot:opreation="scope">
  669. <el-button
  670. type="text"
  671. size="mini"
  672. @click="selectTarget(scope.data, '辅件')"
  673. :disabled="loading"
  674. >{{ $t("选择") }}</el-button
  675. >
  676. </template>
  677. </MyTable>
  678. </div>
  679. <div class="dialog-content" v-if="active == 4">
  680. <table
  681. bgcolor="#FAFAFA"
  682. cellpadding="0"
  683. style="width: 100%"
  684. class="result"
  685. >
  686. <tr style="width: 100px">
  687. <td class="title">{{ $t("光头") }}</td>
  688. <td>
  689. <div class="text1" style="margin-bottom: 8px">
  690. <el-tag
  691. style="margin-right: 10px"
  692. size="small"
  693. type="warning"
  694. >{{ resultArr[0] && resultArr[0].actuatorbrand }}</el-tag
  695. >
  696. <span style="margin-bottom: 8px">{{
  697. resultArr[0] && resultArr[0].itemname
  698. }}</span>
  699. </div>
  700. <div class="descript">
  701. <div
  702. class="item"
  703. v-if="resultArr.length && resultArr[0].itemno"
  704. >
  705. <span style="color: #888888">{{ $t("料号") }}:</span
  706. >{{ resultArr[0].itemno }}
  707. </div>
  708. <div
  709. class="item"
  710. v-if="resultArr.length && resultArr[0].torque"
  711. >
  712. <span style="color: #888888">{{ $t("扭矩") }}:</span
  713. >{{ resultArr[0].torque }}
  714. </div>
  715. <div class="item" v-if="resultArr.length && resultArr[0].flh">
  716. <span style="color: #888888">{{ $t("法兰号") }}:</span
  717. >{{ resultArr[0].flh }}
  718. </div>
  719. <div
  720. class="item"
  721. v-if="resultArr.length && resultArr[0].caliber"
  722. >
  723. <span style="color: #888888">{{ $t("公称通径") }}:</span
  724. >{{ resultArr[0].caliber }}
  725. </div>
  726. <div
  727. class="item"
  728. v-if="resultArr.length && resultArr[0].nominalpressure"
  729. >
  730. <span style="color: #888888">{{ $t("公称压力") }}:</span
  731. >{{ tool.nominalPressureSet(resultArr[0].nominalpressure) }}
  732. </div>
  733. <div
  734. class="item"
  735. v-if="resultArr.length && resultArr[0].stemmaterial"
  736. >
  737. <span style="color: #888888">{{ $t("阀杆材质") }}:</span
  738. >{{ resultArr[0].stemmaterial }}
  739. </div>
  740. <div
  741. class="item"
  742. v-if="resultArr.length && resultArr[0].mainmaterial"
  743. >
  744. <span style="color: #888888">{{ $t("主体材质") }}:</span
  745. >{{ resultArr[0].mainmaterial }}
  746. </div>
  747. </div>
  748. </td>
  749. </tr>
  750. <tr>
  751. <td class="title">{{ $t("执行器") }}</td>
  752. <td>
  753. <div class="text1" style="margin-bottom: 8px">
  754. <el-tag
  755. style="margin-right: 10px"
  756. size="small"
  757. type="warning"
  758. >{{ resultArr[1] && resultArr[1].actuatorbrand }}</el-tag
  759. >
  760. <span style="margin-bottom: 8px"
  761. >{{ resultArr[1] && resultArr[1].actuatormodel }}
  762. {{
  763. guangtouParam.content.where.drivetype == "电动" &&
  764. resultArr[1] &&
  765. resultArr[1].gearboxname
  766. ? ` + ${$t("减速箱")}:${
  767. resultArr[1] && resultArr[1].gearboxname
  768. }`
  769. : ""
  770. }}</span
  771. >
  772. </div>
  773. <div class="descript">
  774. <div
  775. class="item"
  776. v-if="resultArr.length >= 2 && resultArr[1].actuatorno"
  777. >
  778. <span style="color: #888888">{{ $t("执行器料号") }}:</span
  779. >{{ resultArr[1].actuatorno }}
  780. </div>
  781. <div
  782. class="item"
  783. v-if="resultArr.length >= 2 && resultArr[1].actuatorname"
  784. >
  785. <span style="color: #888888">{{ $t("执行器名称") }}:</span
  786. >{{ resultArr[1].actuatorname }}
  787. </div>
  788. <div
  789. class="item"
  790. v-if="resultArr.length >= 2 && resultArr[1].actuatortype"
  791. >
  792. <span style="color: #888888">{{ $t("执行器类型") }}:</span
  793. >{{ resultArr[1].actuatortype }}
  794. </div>
  795. <div
  796. class="item"
  797. v-if="resultArr.length >= 2 && resultArr[1].flh.length"
  798. >
  799. <span style="color: #888888">{{ $t("法兰号") }}:</span
  800. >{{ resultArr[1].flh.join(",") }}
  801. </div>
  802. <div
  803. class="item"
  804. v-if="resultArr.length >= 2 && resultArr[1].bodystructure"
  805. >
  806. <span style="color: #888888">{{ $t("执行器结构") }}:</span
  807. >{{ resultArr[1].bodystructure }}
  808. </div>
  809. <div
  810. class="item"
  811. v-if="resultArr.length >= 2 && resultArr[1].torque"
  812. >
  813. <span style="color: #888888">{{ $t("输出扭矩") }}:</span
  814. >{{ resultArr[1].torque }}(Nm)
  815. </div>
  816. <div
  817. class="item"
  818. v-if="resultArr.length >= 2 && resultArr[1].maxruntime"
  819. >
  820. <span style="color: #888888">{{ $t("开关时间") }}:</span
  821. >{{ resultArr[1].maxruntime }}(s)
  822. </div>
  823. <div
  824. class="item"
  825. v-if="resultArr.length >= 2 && resultArr[1].speed"
  826. >
  827. <span style="color: #888888">{{ $t("转速") }}:</span
  828. >{{ resultArr[1].speed }}(rpm)
  829. </div>
  830. <div
  831. class="item"
  832. v-if="resultArr.length >= 2 && resultArr[1].handwheelratio"
  833. >
  834. <span style="color: #888888">{{ $t("减速比") }}:</span
  835. >{{ resultArr[1].ratio }}
  836. </div>
  837. <div
  838. class="item"
  839. v-if="resultArr.length >= 2 && resultArr[1].supplyvoltage"
  840. >
  841. <span style="color: #888888">{{ $t("电压") }}:</span
  842. >{{ resultArr[1].supplyvoltage }}(V)
  843. </div>
  844. <div
  845. class="item"
  846. v-if="resultArr.length >= 2 && resultArr[1].ratedcurrent"
  847. >
  848. <span style="color: #888888">{{ $t("电流") }}:</span
  849. >{{ resultArr[1].ratedcurrent }}(A)
  850. </div>
  851. <div
  852. class="item"
  853. v-if="resultArr.length >= 2 && resultArr[1].ratedpower"
  854. >
  855. <span style="color: #888888">{{ $t("功率") }}:</span
  856. >{{ resultArr[1].ratedpower }}(KW)
  857. </div>
  858. <div
  859. class="item"
  860. v-if="
  861. resultArr.length >= 2 && resultArr[1].actuatorsignal_choose
  862. "
  863. >
  864. <span style="color: #888888">{{ $t("信号类型") }}:</span
  865. >{{ resultArr[1].actuatorsignal_choose }}
  866. </div>
  867. </div>
  868. </td>
  869. </tr>
  870. <tr v-if="fujianArr.length">
  871. <td class="title">{{ $t("辅件") }}</td>
  872. <td style="padding: 0">
  873. <tr style="border-bottom: 1px solid #dddddd" class="custom-table">
  874. <div>{{ $t("定位器") }}</div>
  875. <div class="text1">
  876. <el-tag
  877. style="margin-right: 10px"
  878. size="small"
  879. type="warning"
  880. v-if="
  881. fujianArr.filter((item) => item.itemname == '定位器')
  882. .length
  883. "
  884. >{{
  885. fujianArr.filter((item) => item.itemname == "定位器")[0]
  886. .actuatorbrand
  887. }}</el-tag
  888. >
  889. <span>{{
  890. fujianArr.filter((item) => item.itemname == "定位器").length
  891. ? fujianArr.filter((item) => item.itemname == "定位器")[0]
  892. .model
  893. : "-"
  894. }}</span>
  895. </div>
  896. <div>{{ $t("电磁阀") }}</div>
  897. <div class="text1">
  898. <el-tag
  899. style="margin-right: 10px"
  900. size="small"
  901. type="warning"
  902. v-if="
  903. fujianArr.filter((item) => item.itemname == '电磁阀')
  904. .length
  905. "
  906. >{{
  907. fujianArr.filter((item) => item.itemname == "电磁阀")[0]
  908. .actuatorbrand
  909. }}</el-tag
  910. >
  911. <span>{{
  912. fujianArr.filter((item) => item.itemname == "电磁阀").length
  913. ? fujianArr.filter((item) => item.itemname == "电磁阀")[0]
  914. .model
  915. : "-"
  916. }}</span>
  917. </div>
  918. </tr>
  919. <tr class="custom-table">
  920. <div>{{ $t("限位开关") }}</div>
  921. <div class="text1">
  922. <el-tag
  923. style="margin-right: 10px"
  924. size="small"
  925. type="warning"
  926. v-if="
  927. fujianArr.filter((item) => item.itemname == '限位开关')
  928. .length
  929. "
  930. >{{
  931. fujianArr.filter((item) => item.itemname == "限位开关")[0]
  932. .actuatorbrand
  933. }}</el-tag
  934. >
  935. <span>{{
  936. fujianArr.filter((item) => item.itemname == "限位开关")
  937. .length
  938. ? fujianArr.filter(
  939. (item) => item.itemname == "限位开关"
  940. )[0].model
  941. : "-"
  942. }}</span>
  943. </div>
  944. <div>{{ $t("过滤减压阀") }}</div>
  945. <div class="text1">
  946. <el-tag
  947. style="margin-right: 10px"
  948. size="small"
  949. type="warning"
  950. v-if="
  951. fujianArr.filter((item) => item.itemname == '过滤减压阀')
  952. .length
  953. "
  954. >{{
  955. fujianArr.filter(
  956. (item) => item.itemname == "过滤减压阀"
  957. )[0].actuatorbrand
  958. }}</el-tag
  959. >
  960. <span>{{
  961. fujianArr.filter((item) => item.itemname == "过滤减压阀")
  962. .length
  963. ? fujianArr.filter(
  964. (item) => item.itemname == "过滤减压阀"
  965. )[0].model
  966. : "-"
  967. }}</span>
  968. </div>
  969. </tr>
  970. </td>
  971. </tr>
  972. <tr>
  973. <td class="title">{{ $t("成品料号") }}</td>
  974. <td class="text1">
  975. {{ Object.keys(product).length ? product.itemno || "-" : "" }}
  976. </td>
  977. </tr>
  978. <tr>
  979. <td class="title" style="padding: 0" colspan="2">
  980. <tr class="price-tr">
  981. <td class="title" style="width: 120px !important">
  982. {{ $t(product.itemno ? "牌价" : "最低经销价") }}
  983. </td>
  984. <td class="text2">
  985. ¥{{
  986. Object.keys(product).length
  987. ? tool.formatAmount(product.price, 2)
  988. : "xxxxxx"
  989. }}
  990. <div
  991. style="color: #1c1919; font-weight: normal; font-size: 12px"
  992. >
  993. *{{ $t("非标准产品,当前价格仅供参考") }}!
  994. </div>
  995. </td>
  996. <td class="title">{{ $t("成本价格") }}</td>
  997. <td class="text2">
  998. ¥{{
  999. Object.keys(product).length
  1000. ? tool.formatAmount(product.marketprice, 2)
  1001. : "xxxxxx"
  1002. }}
  1003. </td>
  1004. </tr>
  1005. </td>
  1006. </tr>
  1007. </table>
  1008. </div>
  1009. <div
  1010. class="fixed__btn__panel"
  1011. v-if="(active == 1 && mode == '手动输入') || active == 3 || active == 4"
  1012. >
  1013. <el-button
  1014. size="small"
  1015. type="primary"
  1016. @click="next"
  1017. class="normal-btn-width"
  1018. v-if="active == 1 && mode == '手动输入'"
  1019. >{{ $t("下一步") }}</el-button
  1020. >
  1021. <el-button
  1022. size="small"
  1023. type="primary"
  1024. @click="close"
  1025. class="normal-btn-width"
  1026. v-if="active == 4"
  1027. >{{ $t("完成") }}</el-button
  1028. >
  1029. </div>
  1030. </div>
  1031. </div>
  1032. </template>
  1033. <script>
  1034. import "@/optionSystem/valveOption/index.css";
  1035. import MySelect from "@/optionSystem/FProductManage/modules/select.vue";
  1036. import MyTable from "@/optionSystem/FProductManage/modules/table.vue";
  1037. import SelectBar from "@/optionSystem/FProductManage/modules/selectBar.vue";
  1038. import Aside from "@/optionSystem/FProductManage/modules/aside.vue";
  1039. export default {
  1040. props: ["position"],
  1041. components: { MySelect, MyTable, SelectBar, Aside },
  1042. data() {
  1043. return {
  1044. items: [
  1045. { title: "选光头", value: "光头" },
  1046. { title: "选执行器", value: "执行器" },
  1047. { title: "选辅件", value: "辅件" },
  1048. { title: "确认配置", value: "配置" },
  1049. ],
  1050. mode: "自动选配",
  1051. active: 1,
  1052. tableHeight: "400px",
  1053. excel: "",
  1054. gangtou: "",
  1055. resultArr: [],
  1056. caliber: [],
  1057. nominalpressure: [],
  1058. connection: [],
  1059. bodymaterial: [],
  1060. stemmaterial: [],
  1061. plinthmaterial: [],
  1062. actuatorbrand: [],
  1063. actuatorname: [],
  1064. actuatordrivetype: [],
  1065. actuatorsignal: [],
  1066. supplyvoltage: [],
  1067. flh: [],
  1068. drivetype: [],
  1069. bodystructure: [],
  1070. func: [],
  1071. guangtouList: [],
  1072. isFujianShow: false, //辅件是否显示
  1073. form: {
  1074. itemid: 0,
  1075. plm_itemextendid: 0,
  1076. valvetype: "蝶阀", //阀门类型(固定)
  1077. itemno: "", //产品编码(必填,唯一)
  1078. itemname: "", //产品名称(必填)
  1079. erpitemno: "", //erp品号(必填)
  1080. erpitemname: "", //erp品名(必填)
  1081. spec: "", //规格尺寸(必填)
  1082. model: "", //型号(必填)
  1083. material: "", //材质(必填,选项)
  1084. marketprice: "",
  1085. caliber: "", //公称通径
  1086. nominalpressure: [], //公称压力
  1087. connection: "",
  1088. drivetype: [], //驱动方式
  1089. valveplatematerial: "",
  1090. bodymaterial: "",
  1091. stemmaterial: "",
  1092. plinthmaterial: "",
  1093. torque: "", //
  1094. maxruntime: "", //90°最大运行时间
  1095. actuatorbrand: "", //执行器品牌
  1096. actuatordrivetype: "", //执行器类型
  1097. part_itemids: [],
  1098. },
  1099. guangtouParam: {
  1100. id: 20240718162102,
  1101. content: {
  1102. pageNumber: 1,
  1103. pageSize: 30,
  1104. where: {
  1105. condition: "",
  1106. caliber: "", //公称通径
  1107. nominalpressure: "", //公称压力
  1108. connection: "", //连接方式
  1109. bodymaterial: "", //阀体材质
  1110. stemmaterial: "", //阀杆材质
  1111. plinthmaterial: "", //阀座材质
  1112. drivetype: "电动", //驱动方式
  1113. },
  1114. },
  1115. },
  1116. excelList: [],
  1117. excelParam: {
  1118. id: 20240718162202,
  1119. content: {
  1120. itemid: "", //光头id
  1121. pageNumber: 1,
  1122. pageSize: 30,
  1123. where: {
  1124. actuatordrivetype: "电动开关", //驱动方式
  1125. condition1: "",
  1126. condition2: "",
  1127. torque: "", //阀门扭矩
  1128. flh: "", //法兰号
  1129. actuatorbrand: "", //品牌
  1130. actuatorname: "",
  1131. supplyvoltage: "",
  1132. actuatorsignal: "",
  1133. maxsquarewidth: "", //方阀杆最大宽度
  1134. maxrounddiameter: "", //圆阀杆最大直径
  1135. },
  1136. },
  1137. },
  1138. fujianList: [],
  1139. fujianArr: [],
  1140. loading: false, // Add this line to define the loading property
  1141. fujianParam: {
  1142. id: 20240718162402,
  1143. content: {
  1144. othertypes: [],
  1145. pageNumber: 1,
  1146. pageSize: 300,
  1147. where: {
  1148. actuatorbrand: "", //品牌
  1149. },
  1150. },
  1151. },
  1152. timer: null,
  1153. product: {},
  1154. };
  1155. },
  1156. watch: {
  1157. // 'excelParam.content.where.actuatorbrand': {
  1158. // handler (val) {
  1159. // setTimeout(() => {
  1160. // this.calcTableHieght('excelRef')
  1161. // },500)
  1162. // }
  1163. // },
  1164. active(val) {
  1165. switch (val) {
  1166. case 1:
  1167. this.calcTableHieght("guangtouRef");
  1168. break;
  1169. case 2:
  1170. this.calcTableHieght("excelRef");
  1171. break;
  1172. case 3:
  1173. this.calcTableHieght("fujianRef");
  1174. break;
  1175. default:
  1176. break;
  1177. }
  1178. if (val == 4) {
  1179. if (this.guangtouParam.content.where.drivetype == "电动") {
  1180. if (this.resultArr[1].gearboxid)
  1181. this.resultArr.push({
  1182. parttype: "减速箱",
  1183. itemid: this.resultArr[1].gearboxid,
  1184. itemname: this.resultArr[1].gearboxname,
  1185. actuatorbrand: this.resultArr[1].gearboxbrand,
  1186. });
  1187. }
  1188. this.$api
  1189. .requested({
  1190. id: 2024071916224702,
  1191. content: {
  1192. part_itemids: this.resultArr.map((item) => {
  1193. return {
  1194. parttype: item.parttype,
  1195. itemid: item.itemid,
  1196. };
  1197. }),
  1198. },
  1199. })
  1200. .then((res) => {
  1201. this.product = res.data;
  1202. });
  1203. }
  1204. },
  1205. },
  1206. computed: {
  1207. //执行器类型选项
  1208. computedActuatorNameOptions() {
  1209. return this.actuatorname.map((v) => {
  1210. return {
  1211. url: v.url,
  1212. remarks: v.remarks.split("-").pop(),
  1213. value: v.remarks,
  1214. };
  1215. });
  1216. },
  1217. },
  1218. methods: {
  1219. resultRefresh(type) {
  1220. if (type == "光头") {
  1221. this.active = 1;
  1222. this.resultArr = [];
  1223. this.fujianArr = [];
  1224. } else if (type == "执行器") {
  1225. this.active = 2;
  1226. this.resultArr = this.resultArr.splice(0, 1);
  1227. this.fujianArr = [];
  1228. } else {
  1229. this.fujianArr = [];
  1230. this.resultArr = this.resultArr.splice(0, 2);
  1231. this.active = 3;
  1232. if (this.excelParam.content.where.drivetype == "气动调节") {
  1233. this.fujianParam.content.othertypes = ["定位器", "过滤减压阀"];
  1234. } else if (this.excelParam.content.where.drivetype == "气动开关") {
  1235. this.fujianParam.content.othertypes = [
  1236. "电磁阀",
  1237. "限位开关",
  1238. "过滤减压阀",
  1239. ];
  1240. }
  1241. this.$refs.fujianRef.listData();
  1242. }
  1243. },
  1244. //手动输入下一步
  1245. next() {
  1246. this.$refs.ruleForm.validate(async (val) => {
  1247. if (val) {
  1248. let data = JSON.parse(
  1249. JSON.stringify(this.guangtouParam.content.where)
  1250. );
  1251. this.selectTarget(data, "主阀");
  1252. }
  1253. });
  1254. },
  1255. close() {
  1256. this.active = 1;
  1257. this.guangtouParam.content.where.drivetype = "电动";
  1258. this.resultArr = [];
  1259. this.fujianArr = [];
  1260. if (this.$refs.ruleForm) {
  1261. this.$refs.ruleForm.resetFields();
  1262. this.guangtouParam.content.where.drivetype = "电动";
  1263. }
  1264. },
  1265. //搜索
  1266. Search(type, position) {
  1267. let index = 0;
  1268. let whereKeys = Object.keys(this[type].content.where);
  1269. if (position) {
  1270. index = whereKeys.indexOf(position) + 1;
  1271. }
  1272. if (type !== "excelParam") {
  1273. for (let i = index; i < whereKeys.length - 1; i++) {
  1274. if (!position && whereKeys[i].includes("condition")) continue;
  1275. this[type].content.where[whereKeys[i]] = "";
  1276. }
  1277. } else {
  1278. for (let i = index; i < whereKeys.length; i++) {
  1279. if (
  1280. whereKeys[i].includes("condition") ||
  1281. whereKeys[i].includes("flh") ||
  1282. whereKeys[i].includes("maxrounddiameter") ||
  1283. whereKeys[i].includes("maxsquarewidth") ||
  1284. whereKeys[i].includes("torque") ||
  1285. whereKeys[i].includes("drivetype")
  1286. )
  1287. continue;
  1288. this[type].content.where[whereKeys[i]] = "";
  1289. }
  1290. }
  1291. if (this.loading) return;
  1292. this.loading = true;
  1293. const updateOptions = (ref, callback) => {
  1294. this.$refs[ref] && this.$refs[ref].listData(callback);
  1295. };
  1296. const updateWhereKeys = (ref, keys, startIndex, callback) => {
  1297. let isBreak = false;
  1298. for (let i = startIndex; i < keys.length; i++) {
  1299. if (isBreak) break;
  1300. if (!keys[i]?.includes("condition")) {
  1301. if (this.$refs[ref].list.length) {
  1302. if (i >= index) {
  1303. if (keys[i] !== "drivetype")
  1304. this[keys[i]] = this.$refs[ref].list[0].option[keys[i]];
  1305. if (this[keys[i]] && this[keys[i]].length === 1) {
  1306. if (this[type].content.where[position])
  1307. this[type].content.where[keys[i]] = this[keys[i]][0].value;
  1308. if (this.timer) clearTimeout(this.timer);
  1309. this.timer = setTimeout(() => {
  1310. this.$refs[ref] && this.$refs[ref].listData();
  1311. });
  1312. } else if (
  1313. this[keys[i]] &&
  1314. this[keys[i]].length > 1 &&
  1315. keys[i] !== "drivetype"
  1316. ) {
  1317. this[type].content.where[keys[i]] = "";
  1318. }
  1319. if (this.$refs[ref].list[0].option[keys[i]] && this.$refs[ref].list[0].option[keys[i]].length > 1) {
  1320. isBreak = true;
  1321. }
  1322. }
  1323. } else {
  1324. if (i >= index && keys[i] !== "drivetype") this[keys[i]] = [];
  1325. }
  1326. }
  1327. }
  1328. this.loading = false;
  1329. console.log(this.loading,'loading updateWhereKeys')
  1330. };
  1331. switch (type) {
  1332. case "guangtouParam":
  1333. updateOptions("guangtouRef", () =>
  1334. updateWhereKeys("guangtouRef", whereKeys, index - 1)
  1335. );
  1336. break;
  1337. case "excelParam":
  1338. this.$nextTick(() => {
  1339. updateOptions("excelRef", () =>
  1340. updateWhereKeys("excelRef", whereKeys, 5)
  1341. );
  1342. });
  1343. break;
  1344. default:
  1345. break;
  1346. }
  1347. },
  1348. calcTableHieght(id) {
  1349. try {
  1350. this.$nextTick(() => {
  1351. let target = this.$refs[id].$el.getBoundingClientRect();
  1352. let clientHeight = document.body.clientHeight;
  1353. this.tableHeight = this.active == 1? clientHeight - target.top - 35 + "px" : clientHeight - target.top - 65 + "px";
  1354. this.$refs[id].$refs.table.doLayout();
  1355. });
  1356. } catch (error) {
  1357. console.log(error);
  1358. }
  1359. },
  1360. guangtouChange(val) {
  1361. switch (val) {
  1362. case "电动":
  1363. this.excelParam = {
  1364. id: 20240718162202,
  1365. content: {
  1366. itemid: 0, //光头id
  1367. pageNumber: 1,
  1368. pageSize: 30,
  1369. where: {
  1370. actuatordrivetype: "电动开关", //驱动方式
  1371. condition1: "",
  1372. condition2: "",
  1373. torque: "", //阀门扭矩
  1374. flh: "", //法兰号
  1375. actuatorbrand: "", //品牌
  1376. actuatorname: "",
  1377. supplyvoltage: "",
  1378. actuatorsignal: "",
  1379. maxsquarewidth: "", //方阀杆最大宽度
  1380. maxrounddiameter: "", //圆阀杆最大直径
  1381. },
  1382. },
  1383. };
  1384. break;
  1385. case "气动":
  1386. this.excelParam = {
  1387. id: 20240718162302,
  1388. content: {
  1389. pageNumber: 1,
  1390. pageSize: 30,
  1391. where: {
  1392. condition1: "",
  1393. torque: "", //阀门扭矩
  1394. flh: "", //法兰号
  1395. maxsquarewidth: "", //方阀杆最大宽度
  1396. maxrounddiameter: "", //圆阀杆最大直径
  1397. actuatorbrand: "", //品牌
  1398. actuatorname: "",
  1399. func: "", //功能
  1400. bodystructure: "", //结构
  1401. drivetype: "气动调节",
  1402. },
  1403. },
  1404. };
  1405. break;
  1406. default:
  1407. break;
  1408. }
  1409. },
  1410. //选择目标
  1411. selectTarget(data, type) {
  1412. data.parttype = type;
  1413. this.resultArr.push(data);
  1414. if (type == "主阀") {
  1415. this.guangtouChange(this.guangtouParam.content.where.drivetype);
  1416. Object.assign(this.excelParam.content.where, {
  1417. itemid: data.itemid,
  1418. torque: data.torque,
  1419. flh: data.flh,
  1420. maxsquarewidth: data.maxsquarewidth,
  1421. maxrounddiameter: data.maxrounddiameter,
  1422. });
  1423. this.actuatorbrand = [];
  1424. this.$nextTick(() => {
  1425. this.$refs.excelRef.listData(() => {
  1426. if (!this.$refs.excelRef.list.length) return;
  1427. const options = this.$refs.excelRef.list[0].option;
  1428. this.actuatorbrand = options.actuatorbrand;
  1429. this.bodystructure = options.bodystructure;
  1430. this.func = options.func;
  1431. });
  1432. });
  1433. this.active = 2;
  1434. } else if (type == "执行器") {
  1435. if (this.guangtouParam.content.where.drivetype === "电动") {
  1436. const times = this.caliber
  1437. .find((v) => v.value === this.resultArr[0].caliber)
  1438. .remarks.split(";")[0]
  1439. .split("-")
  1440. .map(Number);
  1441. const maxRuntime = parseInt(data.maxruntime, 10);
  1442. if (maxRuntime > times[1] || maxRuntime < times[0]) {
  1443. this.$confirm(
  1444. `${this.$t("当前选择执行器开关时间为")}${
  1445. data.maxruntime
  1446. }${this.$t("秒,超出建议值")}${times.join("-")},${this.$t(
  1447. "是否确认"
  1448. )}?`,
  1449. this.$t("提示"),
  1450. {
  1451. confirmButtonText: this.$t("确定"),
  1452. cancelButtonText: this.$t("取消"),
  1453. type: "warning",
  1454. }
  1455. )
  1456. .then(() => {
  1457. handle.call(this);
  1458. this.active = 4;
  1459. })
  1460. .catch(() => {
  1461. this.resultArr.pop();
  1462. });
  1463. } else {
  1464. handle.call(this);
  1465. this.active = 4;
  1466. }
  1467. } else {
  1468. handle.call(this);
  1469. this.active = 3;
  1470. this.$refs.fujianRef.listData();
  1471. }
  1472. function handle() {
  1473. const actuator = this.resultArr[1];
  1474. actuator.itenname = actuator.actuatorname;
  1475. actuator.itemno = actuator.actuatorno;
  1476. if (this.excelParam.content.where.drivetype === "气动调节") {
  1477. this.fujianParam.content.othertypes = ["定位器", "过滤减压阀"];
  1478. } else {
  1479. this.fujianParam.content.othertypes = [
  1480. "电磁阀",
  1481. "限位开关",
  1482. "过滤减压阀",
  1483. ];
  1484. }
  1485. data.itemid = data.actuatorid;
  1486. data.itemname = data.actuatorname;
  1487. }
  1488. } else {
  1489. if (this.fujianArr.filter((item) => item.itemid == data.itemid).length)
  1490. return;
  1491. this.fujianParam.content.othertypes.splice(
  1492. this.fujianParam.content.othertypes.indexOf(data.itemname),
  1493. 1
  1494. );
  1495. this.fujianArr.push(data);
  1496. if (!this.fujianParam.content.othertypes.length)
  1497. return (this.active = 4);
  1498. this.loading = true;
  1499. this.$refs.fujianRef.listData(() => {
  1500. this.loading = false;
  1501. });
  1502. }
  1503. this.resultArr[this.resultArr.length - 1] = data;
  1504. },
  1505. //重置
  1506. refresh() {
  1507. this.resultArr = [];
  1508. this.fujianArr = [];
  1509. this.dialogVisible = false;
  1510. this.active = 1;
  1511. this.items = this.items.splice(0, 2);
  1512. },
  1513. //选项
  1514. optionsList() {
  1515. this.$store.dispatch("optiontypeselect", "caliber").then((res) => {
  1516. this.caliber = res.data;
  1517. console.log(this.caliber, "公称通径");
  1518. });
  1519. this.$store.dispatch("optiontypeselect", "pressure").then((res) => {
  1520. this.nominalpressure = res.data;
  1521. console.log(this.nominalpressure, "公称压力");
  1522. });
  1523. this.$store.dispatch("optiontypeselect", "connection").then((res) => {
  1524. this.connection = res.data;
  1525. console.log(this.connection, "连接方式");
  1526. });
  1527. this.$store.dispatch("optiontypeselect", "bodymaterial").then((res) => {
  1528. this.bodymaterial = res.data;
  1529. console.log(this.bodymaterial, "阀体材质");
  1530. });
  1531. this.$store.dispatch("optiontypeselect", "stemmaterial").then((res) => {
  1532. this.stemmaterial = res.data;
  1533. console.log(this.stemmaterial, "阀杆材质");
  1534. });
  1535. this.$store.dispatch("optiontypeselect", "plinthmaterial").then((res) => {
  1536. this.plinthmaterial = res.data;
  1537. console.log(this.plinthmaterial, "阀座材质");
  1538. });
  1539. this.drivetype = [
  1540. { remarks: "电动", value: "电动" },
  1541. { remarks: "气动", value: "气动" },
  1542. ];
  1543. console.log(this.drivetype, "驱动方式");
  1544. this.$store.dispatch("optiontypeselect", "lectotypebrand").then((res) => {
  1545. this.actuatorbrand = [];
  1546. console.log(this.actuatorbrand, "执行器品牌");
  1547. });
  1548. this.$store
  1549. .dispatch("optiontypeselect", "actuatordrivetype")
  1550. .then((res) => {
  1551. this.actuatordrivetype = res.data;
  1552. console.log(this.actuatordrivetype, "执行器驱动方式");
  1553. });
  1554. this.$store.dispatch("optiontypeselect", "bodystructure").then((res) => {
  1555. this.bodystructure = res.data;
  1556. console.log(this.bodystructure, "结构");
  1557. });
  1558. this.$store.dispatch("optiontypeselect", "func").then((res) => {
  1559. this.func = res.data;
  1560. console.log(this.func, "功能");
  1561. });
  1562. this.$store.dispatch("optiontypeselect", "flh").then((res) => {
  1563. this.flh = res.data;
  1564. console.log(this.func, "法兰号");
  1565. });
  1566. this.$store.dispatch("optiontypeselect", "actuatorsignal").then((res) => {
  1567. this.actuatorsignal = res.data;
  1568. console.log(this.actuatorsignal, "信号");
  1569. });
  1570. this.$store.dispatch("optiontypeselect", "supplyvoltage").then((res) => {
  1571. this.supplyvoltage = res.data;
  1572. console.log(this.supplyvoltage, "电源电压");
  1573. });
  1574. },
  1575. },
  1576. created() {
  1577. this.optionsList();
  1578. },
  1579. mounted() {
  1580. this.calcTableHieght("guangtouRef");
  1581. },
  1582. };
  1583. </script>
  1584. <style scoped>
  1585. /deep/.ant-steps-item-finish
  1586. > .ant-steps-item-container
  1587. > .ant-steps-item-content
  1588. > .ant-steps-item-title::after {
  1589. background: #3874f6 !important;
  1590. }
  1591. /deep/.ant-steps-item-finish .ant-steps-item-icon {
  1592. background: none !important;
  1593. }
  1594. /deep/.ant-steps-item-icon {
  1595. background: #3874f6;
  1596. height: 32px !important;
  1597. }
  1598. /deep/.ant-steps-item-wait .ant-steps-item-icon {
  1599. background: none !important;
  1600. }
  1601. /deep/.ant-steps-item-active .ant-steps-item-title {
  1602. color: #3874f6 !important;
  1603. font-weight: bold;
  1604. }
  1605. .scroll {
  1606. height: calc(100vh - 60px);
  1607. overflow-y: scroll;
  1608. }
  1609. ::-webkit-scrollbar {
  1610. display: none;
  1611. }
  1612. .select-info {
  1613. background: #f5f6fa;
  1614. font-family: Microsoft YaHei, Microsoft YaHei;
  1615. width: 240px;
  1616. border-right: 1px #999999 solid;
  1617. z-index: 301;
  1618. flex-shrink: 0;
  1619. word-wrap: break-word;
  1620. }
  1621. .select-info .info-title {
  1622. font-weight: bold;
  1623. font-size: 20px;
  1624. color: #333333;
  1625. padding: 10px 20px;
  1626. border-bottom: 1px solid #d9d9d9;
  1627. }
  1628. .select-info .product-wrapper {
  1629. padding: 0 20px;
  1630. }
  1631. .select-info .product-wrapper .product {
  1632. padding-bottom: 20px;
  1633. border-bottom: #d9d9d9 1px solid;
  1634. }
  1635. .select-info .product-wrapper .product:last-child {
  1636. border-bottom: none !important;
  1637. }
  1638. .select-info .product-wrapper .product .product-header {
  1639. display: flex;
  1640. align-items: center;
  1641. align-content: center;
  1642. padding: 10px 0;
  1643. }
  1644. .select-info .product-wrapper .product .product-header span:last-child {
  1645. color: #3874f6;
  1646. margin-left: 18px;
  1647. cursor: pointer;
  1648. }
  1649. .select-info .product-wrapper .product .product-header .title {
  1650. font-weight: bold;
  1651. font-size: 14px;
  1652. color: #333333;
  1653. }
  1654. .select-info .product-wrapper .product .product-header img {
  1655. width: 12px;
  1656. height: 12px;
  1657. }
  1658. .select-info .product-wrapper .product .product-name {
  1659. font-weight: 400;
  1660. font-size: 14px;
  1661. color: #555555;
  1662. }
  1663. .select-info .product-wrapper .product .attrite {
  1664. display: flex;
  1665. justify-content: space-between;
  1666. align-items: center;
  1667. font-weight: 400;
  1668. font-size: 12px;
  1669. color: #999999;
  1670. padding-top: 10px;
  1671. }
  1672. .select-info .product-wrapper .product .attrite .attrite-title {
  1673. color: #555555;
  1674. }
  1675. .select-info .product-wrapper .product .attrite .attrite-value {
  1676. }
  1677. .select-info .product-wrapper .product .attrite2 {
  1678. display: flex;
  1679. flex-direction: column;
  1680. font-weight: 400;
  1681. font-size: 12px;
  1682. color: #999999;
  1683. padding-top: 10px;
  1684. }
  1685. .select-info .product-wrapper .product .attrite2 .attrite-title {
  1686. color: #555555;
  1687. margin-bottom: 5px;
  1688. }
  1689. .select-info .product-wrapper .product .attrite2 .attrite-value {
  1690. }
  1691. .select-info .product-wrapper .product {
  1692. display: flex;
  1693. flex-direction: column;
  1694. }
  1695. .drawer__panel {
  1696. font-family: Source Han Sans SC, Source Han Sans SC;
  1697. padding: 10px 40px !important;
  1698. flex: 1;
  1699. margin-bottom: 0 !important;
  1700. overflow: hidden;
  1701. }
  1702. .my-steps {
  1703. padding: 0px 68px;
  1704. }
  1705. .product-info {
  1706. padding: 10px 20px;
  1707. border: 1px solid #3874f6;
  1708. background: rgba(56, 116, 246, 0.08);
  1709. margin-top: 5px;
  1710. border-radius: 2px;
  1711. }
  1712. .product-info .title {
  1713. margin-bottom: 16px;
  1714. font-weight: bold;
  1715. color: #333333;
  1716. font-size: 16px !important;
  1717. }
  1718. .product-info .info-content {
  1719. display: flex;
  1720. flex-wrap: wrap;
  1721. }
  1722. .product-info .info-content .info-item {
  1723. display: flex;
  1724. flex-direction: column;
  1725. }
  1726. .product-info .info-content .info-item .info-title {
  1727. margin-bottom: 4px;
  1728. display: flex;
  1729. align-content: center;
  1730. align-items: center;
  1731. }
  1732. .product-info .info-content .info-item .info-title .title {
  1733. margin-bottom: 0px !important;
  1734. }
  1735. .product-info .info-content .info-item .info-title div {
  1736. margin-right: 20px;
  1737. font-size: 14px !important;
  1738. }
  1739. .product-info .info-content .info-item .info-title span {
  1740. font-size: 14px;
  1741. color: #3874f6 !important;
  1742. cursor: pointer;
  1743. display: inline-block;
  1744. display: flex;
  1745. align-items: center;
  1746. align-content: center;
  1747. }
  1748. .product-info .info-content .info-item .info-title span img {
  1749. width: 12px;
  1750. height: 12px;
  1751. margin-right: 4px;
  1752. }
  1753. .product-info .info-content .info-item .name {
  1754. font-weight: 400;
  1755. font-size: 14px;
  1756. color: #555555;
  1757. }
  1758. .product-info .info-content .info-item .names {
  1759. font-weight: 400;
  1760. font-size: 14px;
  1761. color: #555555;
  1762. display: flex;
  1763. }
  1764. .product-info .info-content .info-item .names div {
  1765. margin-right: 20px;
  1766. }
  1767. .product-info .info-content .info-item .names div span {
  1768. margin-right: 10px;
  1769. }
  1770. .product-content .block {
  1771. margin-top: 30px;
  1772. padding-left: 20px;
  1773. }
  1774. .product-content .block .header {
  1775. display: flex;
  1776. align-content: center;
  1777. align-items: center;
  1778. margin-bottom: 20px;
  1779. }
  1780. .product-content .block .header .title {
  1781. font-size: 16px;
  1782. font-weight: bold;
  1783. margin-right: 20px;
  1784. }
  1785. .product-content .block .header .handle {
  1786. display: flex;
  1787. }
  1788. .dialog-content {
  1789. }
  1790. .dialog-content .option-line {
  1791. display: flex;
  1792. margin-top: 10px;
  1793. }
  1794. .dialog-content .option-line .item {
  1795. display: flex;
  1796. align-items: center;
  1797. font-size: 14px;
  1798. font-weight: 500px;
  1799. margin-right: 20px;
  1800. }
  1801. .dialog-content .option-line .item .label {
  1802. width: 70px;
  1803. flex-shrink: 0;
  1804. text-align-last: justify;
  1805. margin-right: 15px;
  1806. color: #000000 !important;
  1807. }
  1808. .descript {
  1809. font-size: 12px;
  1810. color: red;
  1811. }
  1812. table,
  1813. td,
  1814. tr {
  1815. border-collapse: collapse;
  1816. }
  1817. td {
  1818. padding: 20px 20px;
  1819. }
  1820. table,
  1821. td {
  1822. border: 1px solid #dddddd;
  1823. }
  1824. .result {
  1825. margin-top: 20px;
  1826. margin-bottom: 70px;
  1827. }
  1828. .result .title {
  1829. font-family: Source Han Sans SC, Source Han Sans SC;
  1830. font-weight: bold;
  1831. font-size: 16px;
  1832. color: #333333;
  1833. padding: 20px 20px;
  1834. width: 120px;
  1835. }
  1836. .custom-table {
  1837. border: none;
  1838. display: flex;
  1839. height: 64px;
  1840. align-items: center;
  1841. align-content: center;
  1842. }
  1843. .custom-table div {
  1844. border-right: 1px solid #dddddd;
  1845. height: 100%;
  1846. display: flex;
  1847. align-items: center;
  1848. align-content: center;
  1849. padding-left: 20px;
  1850. }
  1851. .custom-table div:nth-child(1) {
  1852. width: 120px;
  1853. }
  1854. .custom-table div:nth-child(2) {
  1855. flex: 1;
  1856. }
  1857. .custom-table div:nth-child(3) {
  1858. width: 120px;
  1859. }
  1860. .custom-table div:nth-child(4) {
  1861. flex: 1;
  1862. }
  1863. .descript {
  1864. display: flex;
  1865. flex-wrap: wrap;
  1866. }
  1867. .descript .item {
  1868. font-family: Source Han Sans SC, Source Han Sans SC;
  1869. font-weight: 400;
  1870. font-size: 14px;
  1871. color: #333333;
  1872. margin-right: 40px;
  1873. margin-bottom: 5px;
  1874. }
  1875. .descript .item:last-child {
  1876. margin-right: 0 !important;
  1877. }
  1878. .text1 {
  1879. font-family: Source Han Sans SC, Source Han Sans SC;
  1880. font-weight: bold;
  1881. font-size: 16px;
  1882. color: #3874f6;
  1883. }
  1884. .text2 {
  1885. font-family: Source Han Sans SC, Source Han Sans SC;
  1886. font-weight: bold;
  1887. font-size: 16px;
  1888. color: #e80000;
  1889. }
  1890. .price-tr {
  1891. display: flex;
  1892. }
  1893. .price-tr td ~ td {
  1894. flex: 1;
  1895. }
  1896. .price-tr td {
  1897. border-left: none;
  1898. border-top: none;
  1899. border-bottom: none;
  1900. }
  1901. </style>