canrd-main / canrud-nuxt-front · Commits

Commit f92ff1166021fc7db40689fd84e829b2365b2d8b

Authored by boyang
1 parent 1b33cbef
build: skipped

fix: prod2-53/54

Inline Side-by-side
Showing 5 changed files with 1634 additions and 17 deletions
components/TheoreticalDataCalculator.vue 0 → 100644
  View file @f92ff11
  1 +<template>
  2 + <div class="cell-result-size">
  3 + <div class="cell-half-box" style="height: 735px">
  4 + <div class="title-top">
  5 + <div class="triangle"></div>
  6 + <div class="title-span">
  7 + <span>Lithium Wafer Weight and Quantity Calculation</span>
  8 + </div>
  9 + </div>
  10 +
  11 + <div class="context">
  12 + <div class="flex-item">
  13 + <div class="dir-title"><span>Basic Data</span></div>
  14 + </div>
  15 +
  16 + <div class="fri-flex">
  17 + <div class="flex-item">
  18 + <div class="dir-span"><span>Lithium Wafer Density</span></div>
  19 +
  20 + <div class="value-span">
  21 + <span>{{ lithiumWaferDensity }}&nbsp;g/cm3</span>
  22 + </div>
  23 + </div>
  24 +
  25 + <div class="flex-item-colum-other">
  26 + <div class="flex-item-specail">
  27 + <div class="dir-span"><span>Diameter</span></div>
  28 +
  29 + <div class="value-span">
  30 + <VNumberInput
  31 + :reverse="false"
  32 + controlVariant="stacked"
  33 + :hideInput="false"
  34 + :inset="false"
  35 + variant="outlined"
  36 + width="100%"
  37 + density="compact"
  38 + :suffix="showSuffix ? 'mm' : ''"
  39 + v-model="diameter"
  40 + ></VNumberInput>
  41 + </div>
  42 + </div>
  43 +
  44 + <div class="flex-item-specail-sel">
  45 + <div class="dir-span"><span>Thickness</span></div>
  46 +
  47 + <div class="value-span">
  48 + <VNumberInput
  49 + :reverse="false"
  50 + controlVariant="stacked"
  51 + :hideInput="false"
  52 + :inset="false"
  53 + variant="outlined"
  54 + width="100%"
  55 + density="compact"
  56 + :suffix="showSuffix ? 'mm' : ''"
  57 + v-model="thickness"
  58 + ></VNumberInput>
  59 + </div>
  60 + </div>
  61 + </div>
  62 + </div>
  63 + <div class="flex-item-title">
  64 + <div class="dir-title"><span>Calculate Weight by Quantity</span></div>
  65 + </div>
  66 + <div class="sec-flex">
  67 + <div class="flex-item-colum">
  68 + <div class="flex-item-specail">
  69 + <div class="dir-span"><span>Quantity</span></div>
  70 +
  71 + <div class="value-span">
  72 + <VNumberInput
  73 + :reverse="false"
  74 + controlVariant="stacked"
  75 + :hideInput="false"
  76 + :inset="false"
  77 + variant="outlined"
  78 + width="100%"
  79 + density="compact"
  80 + :suffix="showSuffix ? 'pieces' : ''"
  81 + v-model="numberOfPieces"
  82 + ></VNumberInput>
  83 + </div>
  84 + </div>
  85 + </div>
  86 +
  87 + <div class="flex-item-colum-sec">
  88 + <div class="dir-span-nowidth"><span>Result (Weight):</span></div>
  89 +
  90 + <div class="value-span">
  91 + <span>{{ weight }}&nbsp;g</span>
  92 + </div>
  93 + </div>
  94 + </div>
  95 +
  96 + <div class="flex-item-title" style="margin-top: 60px">
  97 + <div class="dir-title">
  98 + <span> Calculate Quantity by Weight</span>
  99 + </div>
  100 + </div>
  101 +
  102 + <div class="sec-flex">
  103 + <div class="flex-item-colum">
  104 + <div class="flex-item-specail">
  105 + <div class="dir-span"><span>Required Weight</span></div>
  106 +
  107 + <div class="value-span">
  108 + <VNumberInput
  109 + :reverse="false"
  110 + controlVariant="stacked"
  111 + :hideInput="false"
  112 + :inset="false"
  113 + variant="outlined"
  114 + width="100%"
  115 + density="compact"
  116 + :suffix="showSuffix ? 'g' : ''"
  117 + v-model="requiredWeight"
  118 + ></VNumberInput>
  119 + </div>
  120 + </div>
  121 + </div>
  122 + </div>
  123 + <div class="flex-item-colum-sec" style="margin-top: 12px">
  124 + <div class="dir-span-nowidth">
  125 + <span>Calculation Result (Required Quantity):</span>
  126 + </div>
  127 +
  128 + <div class="value-span">
  129 + <span>{{ numberOfRequiredPieces }}&nbsp;pieces</span>
  130 + </div>
  131 + </div>
  132 + </div>
  133 +
  134 + <div class="diving" style="margin-top: 0px"></div>
  135 +
  136 + <div class="compute-btn" @click="handleSave()" style="margin-top: 0px">
  137 + Calculate
  138 + </div>
  139 + </div>
  140 +
  141 + <div class="cell-half-box" style="height: 735px">
  142 + <div class="title-top">
  143 + <div class="triangle"></div>
  144 +
  145 + <div class="title-span">
  146 + <span>Lithium Strip Weight and Meter Calculation</span>
  147 + </div>
  148 + </div>
  149 +
  150 + <div class="context">
  151 + <div class="flex-item">
  152 + <div class="dir-title"><span>Basic Data</span></div>
  153 + </div>
  154 +
  155 + <div class="fri-flex">
  156 + <div class="flex-item">
  157 + <div class="dir-span"><span>Lithium Strip Density</span></div>
  158 +
  159 + <div class="value-span">
  160 + <span>{{ lithiumStripDensity2 }}&nbsp;g/cm3</span>
  161 + </div>
  162 + </div>
  163 +
  164 + <div class="flex-item-colum-other">
  165 + <div class="flex-item-specail">
  166 + <div class="dir-span"><span>Thickness</span></div>
  167 +
  168 + <div class="value-span">
  169 + <VNumberInput
  170 + :reverse="false"
  171 + controlVariant="stacked"
  172 + :hideInput="false"
  173 + :inset="false"
  174 + variant="outlined"
  175 + width="100%"
  176 + density="compact"
  177 + :suffix="showSuffix ? 'mm' : ''"
  178 + v-model="thickness2"
  179 + ></VNumberInput>
  180 + </div>
  181 + </div>
  182 +
  183 + <div class="flex-item-specail-sel">
  184 + <div class="dir-span"><span>Width</span></div>
  185 +
  186 + <div class="value-span">
  187 + <VNumberInput
  188 + :reverse="false"
  189 + controlVariant="stacked"
  190 + :hideInput="false"
  191 + :inset="false"
  192 + variant="outlined"
  193 + width="100%"
  194 + density="compact"
  195 + :suffix="showSuffix ? 'mm' : ''"
  196 + v-model="width2"
  197 + ></VNumberInput>
  198 + </div>
  199 + </div>
  200 + </div>
  201 + </div>
  202 +
  203 + <div class="flex-item-title">
  204 + <div class="dir-title"><span>Calculate Weight by Meter</span></div>
  205 + </div>
  206 + <div class="sec-flex">
  207 + <div class="flex-item-colum">
  208 + <div class="flex-item-specail">
  209 + <div class="dir-span"><span>Length</span></div>
  210 +
  211 + <div class="value-span">
  212 + <VNumberInput
  213 + :reverse="false"
  214 + controlVariant="stacked"
  215 + :hideInput="false"
  216 + :inset="false"
  217 + variant="outlined"
  218 + width="100%"
  219 + density="compact"
  220 + :suffix="showSuffix ? 'm' : ''"
  221 + v-model="length2"
  222 + ></VNumberInput>
  223 + </div>
  224 + </div>
  225 + </div>
  226 + </div>
  227 + <div class="flex-item-colum-sec" style="margin-top: 15px">
  228 + <div class="dir-span-nowidth">
  229 + <span>Calculation Result (Weight):</span>
  230 + </div>
  231 +
  232 + <div class="value-span">
  233 + <span>{{ weight2 }}&nbsp;g</span>
  234 + </div>
  235 + </div>
  236 +
  237 + <div class="flex-item-title" style="margin-top: 0">
  238 + <div class="dir-title">
  239 + <span> Calculate Quantity by Weight</span>
  240 + </div>
  241 + </div>
  242 +
  243 + <div class="sec-flex">
  244 + <div class="flex-item-colum">
  245 + <div class="flex-item-specail">
  246 + <div class="dir-span"><span>Quantity</span></div>
  247 +
  248 + <div class="value-span">
  249 + <VNumberInput
  250 + :reverse="false"
  251 + controlVariant="stacked"
  252 + :hideInput="false"
  253 + :inset="false"
  254 + variant="outlined"
  255 + width="100%"
  256 + density="compact"
  257 + :suffix="showSuffix ? 'g' : ''"
  258 + v-model="demandWeight2"
  259 + ></VNumberInput>
  260 + </div>
  261 + </div>
  262 + </div>
  263 + </div>
  264 + <div class="flex-item-colum-sec" style="margin-top: 15px">
  265 + <div class="dir-span-nowidth">
  266 + <span>Calculation Result (Required Quantity):</span>
  267 + </div>
  268 +
  269 + <div class="value-span">
  270 + <span>{{ demandLength2 }}&nbsp;m</span>
  271 + </div>
  272 + </div>
  273 + </div>
  274 +
  275 + <div class="diving" style="margin-top: 0px"></div>
  276 +
  277 + <div class="compute-btn" @click="handleSave()">Calculate</div>
  278 + </div>
  279 + </div>
  280 +
  281 + <div class="cell-result-size" style="margin-top: 100px; height: 100%">
  282 + <div class="cell-half-box" style="height: 725px">
  283 + <div class="title-top">
  284 + <div class="triangle"></div>
  285 +
  286 + <div class="title-span">
  287 + <span>Copper Foil Weight and Meter Calculation</span>
  288 + </div>
  289 + </div>
  290 +
  291 + <div class="context">
  292 + <div class="flex-item">
  293 + <div class="dir-title"><span>Basic Data</span></div>
  294 + </div>
  295 +
  296 + <div class="fri-flex">
  297 + <div class="flex-item">
  298 + <div class="dir-span"><span>Copper Foil Density</span></div>
  299 +
  300 + <div class="value-span">
  301 + <span>{{ copperFoilDensity4 }}&nbsp;g/cm3</span>
  302 + </div>
  303 + </div>
  304 +
  305 + <div class="flex-item-colum-other">
  306 + <div class="flex-item-specail">
  307 + <div class="dir-span"><span>Thickness</span></div>
  308 +
  309 + <div class="value-span">
  310 + <VNumberInput
  311 + :reverse="false"
  312 + controlVariant="stacked"
  313 + :hideInput="false"
  314 + :inset="false"
  315 + variant="outlined"
  316 + width="100%"
  317 + density="compact"
  318 + :suffix="showSuffix ? 'um' : ''"
  319 + v-model="thickness4"
  320 + ></VNumberInput>
  321 + </div>
  322 + </div>
  323 +
  324 + <div class="flex-item-specail-sel">
  325 + <div class="dir-span"><span>Width</span></div>
  326 +
  327 + <div class="value-span">
  328 + <VNumberInput
  329 + :reverse="false"
  330 + controlVariant="stacked"
  331 + :hideInput="false"
  332 + :inset="false"
  333 + variant="outlined"
  334 + width="100%"
  335 + density="compact"
  336 + :suffix="showSuffix ? 'mm' : ''"
  337 + v-model="width4"
  338 + ></VNumberInput>
  339 + </div>
  340 + </div>
  341 + </div>
  342 + </div>
  343 + <div class="flex-item-title">
  344 + <div class="dir-title"><span>Calculate Weight by Meter</span></div>
  345 + </div>
  346 +
  347 + <div class="sec-flex">
  348 + <div class="flex-item-colum">
  349 + <div class="flex-item-specail">
  350 + <div class="dir-span"><span>Length</span></div>
  351 +
  352 + <div class="value-span">
  353 + <VNumberInput
  354 + :reverse="false"
  355 + controlVariant="stacked"
  356 + :hideInput="false"
  357 + :inset="false"
  358 + variant="outlined"
  359 + width="100%"
  360 + density="compact"
  361 + :suffix="showSuffix ? 'm' : ''"
  362 + v-model="length4"
  363 + ></VNumberInput>
  364 + </div>
  365 + </div>
  366 + </div>
  367 + </div>
  368 + <div class="flex-item-colum-sec" style="margin-top: 10px">
  369 + <div class="dir-span-nowidth">
  370 + <span>Calculation Result (Weight):</span>
  371 + </div>
  372 +
  373 + <div class="value-span">
  374 + <span>{{ weight4 }}&nbsp;kg</span>
  375 + </div>
  376 + </div>
  377 +
  378 + <div class="flex-item-title">
  379 + <div class="dir-title"><span>Calculate Quantity by Weight</span></div>
  380 + </div>
  381 +
  382 + <div class="sec-flex">
  383 + <div class="flex-item-colum">
  384 + <div class="flex-item-specail">
  385 + <div class="dir-span"><span>Required Weight</span></div>
  386 +
  387 + <div class="value-span">
  388 + <VNumberInput
  389 + :reverse="false"
  390 + controlVariant="stacked"
  391 + :hideInput="false"
  392 + :inset="false"
  393 + variant="outlined"
  394 + width="100%"
  395 + density="compact"
  396 + :suffix="showSuffix ? 'kg' : ''"
  397 + v-model="demandWeight4"
  398 + ></VNumberInput>
  399 + </div>
  400 + </div>
  401 + </div>
  402 + </div>
  403 + <div class="flex-item-colum-sec" style="margin-top: 10px">
  404 + <div class="dir-span-nowidth">
  405 + <span>Calculation Result (Required Quantity):</span>
  406 + </div>
  407 +
  408 + <div class="value-span">
  409 + <span>{{ demandLength4 }}&nbsp;m</span>
  410 + </div>
  411 + </div>
  412 + </div>
  413 +
  414 + <div class="diving" style="margin-top: 0px"></div>
  415 +
  416 + <div class="compute-btn" @click="handleSave()">Calculate</div>
  417 + </div>
  418 +
  419 + <div class="cell-half-box" style="height: 725px">
  420 + <div class="title-top">
  421 + <div class="triangle"></div>
  422 +
  423 + <div class="title-span">
  424 + <span>Aluminum Foil Weight and Meter Calculation</span>
  425 + </div>
  426 + </div>
  427 +
  428 + <div class="context">
  429 + <div class="flex-item">
  430 + <div class="dir-title"><span>Basic Data</span></div>
  431 + </div>
  432 +
  433 + <div class="fri-flex">
  434 + <div class="flex-item">
  435 + <div class="dir-span"><span>Aluminum Foil Density</span></div>
  436 +
  437 + <div class="value-span">
  438 + <span>{{ aluminumFoilDensity5 }}&nbsp;g/cm3</span>
  439 + </div>
  440 + </div>
  441 +
  442 + <div class="flex-item-colum-other">
  443 + <div class="flex-item-specail">
  444 + <div class="dir-span"><span>Thickness</span></div>
  445 +
  446 + <div class="value-span">
  447 + <VNumberInput
  448 + :reverse="false"
  449 + controlVariant="stacked"
  450 + :hideInput="false"
  451 + :inset="false"
  452 + variant="outlined"
  453 + width="100%"
  454 + density="compact"
  455 + :suffix="showSuffix ? 'um' : ''"
  456 + v-model="aluminumFoilThickness5"
  457 + ></VNumberInput>
  458 + </div>
  459 + </div>
  460 +
  461 + <div class="flex-item-specail-sel">
  462 + <div class="dir-span"><span>Width</span></div>
  463 +
  464 + <div class="value-span">
  465 + <VNumberInput
  466 + :reverse="false"
  467 + controlVariant="stacked"
  468 + :hideInput="false"
  469 + :inset="false"
  470 + variant="outlined"
  471 + width="100%"
  472 + density="compact"
  473 + :suffix="showSuffix ? 'mm' : ''"
  474 + v-model="aluminumFoilWidth5"
  475 + ></VNumberInput>
  476 + </div>
  477 + </div>
  478 + </div>
  479 + </div>
  480 +
  481 + <div class="flex-item-title">
  482 + <div class="dir-title"><span>Calculate Weight by Meter</span></div>
  483 + </div>
  484 +
  485 + <div class="sec-flex">
  486 + <div class="flex-item-colum">
  487 + <div class="flex-item-specail">
  488 + <div class="dir-span"><span>Length</span></div>
  489 +
  490 + <div class="value-span">
  491 + <VNumberInput
  492 + :reverse="false"
  493 + controlVariant="stacked"
  494 + :hideInput="false"
  495 + :inset="false"
  496 + variant="outlined"
  497 + width="100%"
  498 + density="compact"
  499 + :suffix="showSuffix ? 'm' : ''"
  500 + v-model="aluminumFoilLength5"
  501 + ></VNumberInput>
  502 + </div>
  503 + </div>
  504 + </div>
  505 + </div>
  506 + <div class="flex-item-colum-sec" style="margin-top: 10px">
  507 + <div class="dir-span-nowidth">
  508 + <span>Calculation Result (Weight):</span>
  509 + </div>
  510 +
  511 + <div class="value-span">
  512 + <span>{{ aluminumFoilWeight5 }}&nbsp;kg</span>
  513 + </div>
  514 + </div>
  515 +
  516 + <div class="flex-item-title">
  517 + <div class="dir-title"><span>Calculate Quantity by Weight</span></div>
  518 + </div>
  519 +
  520 + <div class="sec-flex">
  521 + <div class="flex-item-colum">
  522 + <div class="flex-item-specail">
  523 + <div class="dir-span"><span>Required Weight</span></div>
  524 +
  525 + <div class="value-span">
  526 + <VNumberInput
  527 + :reverse="false"
  528 + controlVariant="stacked"
  529 + :hideInput="false"
  530 + :inset="false"
  531 + variant="outlined"
  532 + width="100%"
  533 + density="compact"
  534 + :suffix="showSuffix ? 'kg' : ''"
  535 + v-model="demandAluminumFoilWeight5"
  536 + ></VNumberInput>
  537 + </div>
  538 + </div>
  539 + </div>
  540 + </div>
  541 + <div class="flex-item-colum-sec" style="margin-top: 10px">
  542 + <div class="dir-span-nowidth">
  543 + <span>Calculation Result (Required Quantity):</span>
  544 + </div>
  545 +
  546 + <div class="value-span">
  547 + <span>{{ demandAluminumFoilLength5 }}&nbsp;m</span>
  548 + </div>
  549 + </div>
  550 + </div>
  551 +
  552 + <div class="diving" style="margin-top: 0px"></div>
  553 +
  554 + <div class="compute-btn" @click="handleSave()">Calculate</div>
  555 + </div>
  556 + </div>
  557 +
  558 + <div class="cell-result-size">
  559 + <div class="cell-box">
  560 + <div class="title-top">
  561 + <div class="triangle"></div>
  562 +
  563 + <div class="title-span">
  564 + <span
  565 + >Copper-Lithium Composite Strip Weight and Meter Calculation</span
  566 + >
  567 + </div>
  568 + </div>
  569 +
  570 + <div class="context">
  571 + <div class="flex-item">
  572 + <div class="dir-title"><span>Basic Data</span></div>
  573 + </div>
  574 +
  575 + <div class="fri-flex">
  576 + <div class="flex-item-colum-last">
  577 + <div class="flex-item">
  578 + <div class="dir-span"><span>Lithium Strip Density</span></div>
  579 +
  580 + <div class="value-span-last">
  581 + <span>{{ lithiumStripDensity3 }}&nbsp;g/cm3</span>
  582 + </div>
  583 + </div>
  584 +
  585 + <div class="flex-item-last" id="flex-item-last">
  586 + <div class="dir-span"><span>Copper Foil Density</span></div>
  587 +
  588 + <div class="value-span-last">
  589 + <span>{{ copperFoilDensity3 }}&nbsp;g/cm3</span>
  590 + </div>
  591 + </div>
  592 + </div>
  593 +
  594 + <div class="flex-item-colum-bottom">
  595 + <div class="flex-item-specail">
  596 + <div class="dir-span"><span>Lithium Strip Thickness</span></div>
  597 +
  598 + <div class="value-span-last">
  599 + <VNumberInput
  600 + :reverse="false"
  601 + controlVariant="stacked"
  602 + :hideInput="false"
  603 + :inset="false"
  604 + variant="outlined"
  605 + width="100%"
  606 + density="compact"
  607 + :suffix="showSuffix ? 'um' : ''"
  608 + v-model="lithiumStripThickness3"
  609 + ></VNumberInput>
  610 + </div>
  611 + </div>
  612 +
  613 + <div class="flex-item-colum-sec-last">
  614 + <div class="dir-span">
  615 + <span>Copper Foil Thickness</span>
  616 + </div>
  617 +
  618 + <div class="value-span-last">
  619 + <VNumberInput
  620 + :reverse="false"
  621 + controlVariant="stacked"
  622 + :hideInput="false"
  623 + :inset="false"
  624 + variant="outlined"
  625 + width="100%"
  626 + density="compact"
  627 + :suffix="showSuffix ? 'um' : ''"
  628 + v-model="copperFoilThickness3"
  629 + ></VNumberInput>
  630 + </div>
  631 + </div>
  632 +
  633 + <div class="flex-item-colum-sec-last">
  634 + <div class="dir-span"><span>Lithium Strip Layers</span></div>
  635 +
  636 + <div class="value-span-last">
  637 + <VNumberInput
  638 + :reverse="false"
  639 + controlVariant="stacked"
  640 + :hideInput="false"
  641 + :inset="false"
  642 + variant="outlined"
  643 + width="100%"
  644 + density="compact"
  645 + :suffix="showSuffix ? 'mm' : ''"
  646 + v-model="lithiumStripWeight3"
  647 + ></VNumberInput>
  648 + </div>
  649 + </div>
  650 + </div>
  651 +
  652 + <div class="flex-item-colum-last">
  653 + <div class="flex-item-specail">
  654 + <div class="dir-span"><span>Copper Foil Thickness</span></div>
  655 +
  656 + <div class="value-span-last">
  657 + <VNumberInput
  658 + :reverse="false"
  659 + controlVariant="stacked"
  660 + :hideInput="false"
  661 + :inset="false"
  662 + variant="outlined"
  663 + width="100%"
  664 + density="compact"
  665 + :suffix="showSuffix ? 'mm' : ''"
  666 + v-model="copperFoilWidth3"
  667 + ></VNumberInput>
  668 + </div>
  669 + </div>
  670 +
  671 + <div class="flex-item-colum-sec-last">
  672 + <div class="dir-span">
  673 + <span style="padding-left: 10px">Lithium Strip Layers</span>
  674 + </div>
  675 +
  676 + <div class="value-span-last">
  677 + <VNumberInput
  678 + :reverse="false"
  679 + controlVariant="stacked"
  680 + :hideInput="false"
  681 + :inset="false"
  682 + variant="outlined"
  683 + width="100%"
  684 + density="compact"
  685 + :suffix="showSuffix ? 'layers' : ''"
  686 + v-model="lithiumStripLayers3"
  687 + ></VNumberInput>
  688 + </div>
  689 + </div>
  690 + </div>
  691 + </div>
  692 +
  693 + <div class="flex-item-title">
  694 + <div class="dir-title" style="width: auto">
  695 + <span>Calculate Weight from Meters</span>
  696 + </div>
  697 + </div>
  698 +
  699 + <div class="sec-flex-last">
  700 + <div class="flex-item-colum">
  701 + <div class="flex-item-specail">
  702 + <div class="dir-span"><span>Length (meters)</span></div>
  703 +
  704 + <div class="value-span-last">
  705 + <VNumberInput
  706 + :reverse="false"
  707 + controlVariant="stacked"
  708 + :hideInput="false"
  709 + :inset="false"
  710 + variant="outlined"
  711 + width="100%"
  712 + density="compact"
  713 + :suffix="showSuffix ? 'm' : ''"
  714 + v-model="length3"
  715 + ></VNumberInput>
  716 + </div>
  717 + </div>
  718 + </div>
  719 +
  720 + <div class="flex-item-colum-sec-other" style="width: auto">
  721 + <div class="dir-span-nowidth" style="width: auto">
  722 + <span style="margin-left: 21px"
  723 + >Calculation Result (Total Weight):</span
  724 + >
  725 + </div>
  726 +
  727 + <div class="value-span">
  728 + <span style="width: auto">{{ totalWeight3 }}&nbsp;g</span>
  729 + </div>
  730 + </div>
  731 + </div>
  732 + <div class="sec-flex-last" style="width: 1200px">
  733 + <div class="flex-item-colum-sec-other" style="margin-left: 0px">
  734 + <div class="dir-span-nowidth">
  735 + <span>Calculation Result (Lithium Strip Weight):</span>
  736 + </div>
  737 +
  738 + <div class="value-span">
  739 + <span>{{ lithiumStripWeight3 }}&nbsp;g</span>
  740 + </div>
  741 + </div>
  742 + <div class="flex-item-colum-sec-other" style="width: 500px">
  743 + <div class="dir-span-nowidth">
  744 + <span>Calculation Result (Copper Foil Weight):</span>
  745 + </div>
  746 +
  747 + <div class="value-span">
  748 + <span>{{ copperFoilWeight3 }}&nbsp;g</span>
  749 + </div>
  750 + </div>
  751 + </div>
  752 + </div>
  753 +
  754 + <div class="diving" style="margin-top: 0px"></div>
  755 +
  756 + <div class="compute-btn" @click="handleSave()">Calculate</div>
  757 + </div>
  758 + </div>
  759 + <div style="height: 20px"></div>
  760 +</template>
  761 +
  762 +<script setup>
  763 +import { VNumberInput } from "vuetify/labs/VNumberInput";
  764 +import {
  765 + FloatAdd,
  766 + FloatDiv,
  767 + FloatMul,
  768 + FloatSub,
  769 + roundToDecimal,
  770 +} from "../utils/NumberUtils";
  771 +const PI = 3.1415926;
  772 +
  773 +const lithiumWaferDensity = ref(0.534);
  774 +const diameter = ref(18);
  775 +const thickness = ref(1);
  776 +const numberOfPieces = ref(2000);
  777 +const weight = ref(272);
  778 +const requiredWeight = ref(100);
  779 +const numberOfRequiredPieces = ref(736);
  780 +
  781 +const lithiumStripDensity2 = ref(0.534);
  782 +const thickness2 = ref(0.05);
  783 +const width2 = ref(100);
  784 +const length2 = ref(47);
  785 +const weight2 = ref(125);
  786 +const demandWeight2 = ref(50);
  787 +const demandLength2 = ref(18.7);
  788 +
  789 +const lithiumStripDensity3 = ref(0.534);
  790 +const copperFoilDensity3 = ref(8.9);
  791 +const lithiumStripThickness3 = ref(50);
  792 +const copperFoilThickness3 = ref(8);
  793 +const lithiumStripWidth3 = ref(65);
  794 +const copperFoilWidth3 = ref(80);
  795 +const lithiumStripLayers3 = ref(1);
  796 +const length3 = ref(13.0);
  797 +const lithiumStripWeight3 = ref(23);
  798 +const copperFoilWeight3 = ref(74);
  799 +const totalWeight3 = ref(97);
  800 +
  801 +const copperFoilDensity4 = ref(8.9);
  802 +const thickness4 = ref(8);
  803 +const width4 = ref(250);
  804 +const length4 = ref(100);
  805 +const weight4 = ref(1.78);
  806 +const demandWeight4 = ref(5);
  807 +const demandLength4 = ref(281);
  808 +
  809 +const aluminumFoilDensity5 = ref(2.7);
  810 +const aluminumFoilThickness5 = ref(12);
  811 +const aluminumFoilWidth5 = ref(240);
  812 +const aluminumFoilLength5 = ref(300);
  813 +const aluminumFoilWeight5 = ref(2.333);
  814 +const demandAluminumFoilWeight5 = ref(3);
  815 +const demandAluminumFoilLength5 = ref(386);
  816 +
  817 +const handleSave = async () => {
  818 + //重量计算
  819 + let weightTemp1 = FloatMul(lithiumWaferDensity.value, PI);
  820 + let weightTemp2 = FloatDiv(diameter.value, 10);
  821 + let weightTemp3 = FloatDiv(weightTemp2, 2);
  822 + weight.value = roundToDecimal(
  823 + FloatMul(
  824 + FloatDiv(
  825 + FloatMul(
  826 + FloatMul(FloatMul(weightTemp1, weightTemp3), weightTemp3),
  827 + thickness.value
  828 + ),
  829 + 10
  830 + ),
  831 + numberOfPieces.value
  832 + ),
  833 + 1
  834 + );
  835 +
  836 + //需求片数计算
  837 + let numberOfRequiredPiecesTemp1 = FloatDiv(
  838 + requiredWeight.value,
  839 + lithiumWaferDensity.value
  840 + );
  841 + let numberOfRequiredPiecesTemp2 = FloatDiv(FloatDiv(diameter.value, 10), 2);
  842 + let numberOfRequiredPiecesTemp3 = FloatMul(
  843 + FloatMul(numberOfRequiredPiecesTemp2, PI),
  844 + numberOfRequiredPiecesTemp2
  845 + );
  846 + let numberOfRequiredPiecesTemp4 = FloatMul(
  847 + numberOfRequiredPiecesTemp3,
  848 + thickness.value
  849 + );
  850 + numberOfRequiredPieces.value = roundToDecimal(
  851 + FloatDiv(
  852 + numberOfRequiredPiecesTemp1,
  853 + FloatDiv(numberOfRequiredPiecesTemp4, 10)
  854 + ),
  855 + 1
  856 + );
  857 +
  858 + //根据米数算重量
  859 + let weight2Temp1 = FloatDiv(
  860 + FloatMul(thickness2.value, lithiumStripDensity2.value),
  861 + 10
  862 + );
  863 + let weight2Temp2 = FloatMul(
  864 + FloatMul(FloatDiv(width2.value, 10), length2.value),
  865 + 100
  866 + );
  867 + weight2.value = roundToDecimal(FloatMul(weight2Temp1, weight2Temp2), 2);
  868 +
  869 + //根据重量算米数
  870 + let demandLength2Temp1 = FloatDiv(
  871 + demandWeight2.value,
  872 + lithiumStripDensity2.value
  873 + );
  874 + let demandLength2Temp2 = FloatDiv(
  875 + FloatMul(FloatDiv(thickness2.value, 10), width2.value),
  876 + 10
  877 + );
  878 + demandLength2.value = roundToDecimal(
  879 + FloatDiv(FloatDiv(demandLength2Temp1, demandLength2Temp2), 100),
  880 + 1
  881 + );
  882 +
  883 + //锂带重量计算
  884 + let lithiumStripWeight3Temp1 = FloatMul(
  885 + FloatMul(lithiumStripDensity3.value, lithiumStripThickness3.value),
  886 + lithiumStripLayers3.value
  887 + );
  888 + let lithiumStripWeight3Temp2 = FloatDiv(
  889 + FloatMul(
  890 + FloatDiv(lithiumStripWeight3Temp1, 10000),
  891 + lithiumStripWidth3.value
  892 + ),
  893 + 10
  894 + );
  895 + lithiumStripWeight3.value = roundToDecimal(
  896 + FloatMul(FloatMul(lithiumStripWeight3Temp2, length3.value), 100),
  897 + 1
  898 + );
  899 +
  900 + //铜箔重量计算
  901 + let copperFoilWeight3Temp1 = FloatDiv(
  902 + FloatMul(copperFoilThickness3.value, copperFoilDensity3.value),
  903 + 10000
  904 + );
  905 + let copperFoilWeight3Temp2 = FloatDiv(
  906 + FloatMul(copperFoilWeight3Temp1, copperFoilWidth3.value),
  907 + 10
  908 + );
  909 + copperFoilWeight3.value = roundToDecimal(
  910 + FloatMul(FloatMul(copperFoilWeight3Temp2, length3.value), 100),
  911 + 1
  912 + );
  913 +
  914 + //总重量计算
  915 + totalWeight3.value = roundToDecimal(
  916 + FloatAdd(lithiumStripWeight3.value, copperFoilWeight3.value),
  917 + 1
  918 + );
  919 +
  920 + //根据米数计算重量：铜箔重量
  921 + let weight4Temp1 = FloatMul(
  922 + FloatDiv(FloatMul(copperFoilDensity4.value, thickness4.value), 10000),
  923 + width4.value
  924 + );
  925 + let weight4Temp2 = FloatMul(FloatDiv(weight4Temp1, 10), length4.value);
  926 + weight4.value = roundToDecimal(
  927 + FloatDiv(FloatMul(weight4Temp2, 100), 1000),
  928 + 1
  929 + );
  930 +
  931 + //根据重量计算米数：需求米数
  932 + let demandLength4Temp1 = FloatDiv(
  933 + FloatMul(demandWeight4.value, 1000),
  934 + copperFoilDensity4.value
  935 + );
  936 + let demandLength4Temp2 = FloatDiv(
  937 + FloatMul(FloatDiv(thickness4.value, 10000), width4.value),
  938 + 10
  939 + );
  940 + demandLength4.value = roundToDecimal(
  941 + FloatDiv(FloatDiv(demandLength4Temp1, demandLength4Temp2), 100),
  942 + 1
  943 + );
  944 +
  945 + //根据米数计算重量：铜箔重量
  946 + let weight5Temp1 = FloatMul(
  947 + FloatDiv(
  948 + FloatMul(aluminumFoilDensity5.value, aluminumFoilThickness5.value),
  949 + 10000
  950 + ),
  951 + aluminumFoilWidth5.value
  952 + );
  953 + let weight5Temp2 = FloatMul(
  954 + FloatDiv(weight5Temp1, 10),
  955 + aluminumFoilLength5.value
  956 + );
  957 + aluminumFoilWeight5.value = roundToDecimal(
  958 + FloatDiv(FloatMul(weight5Temp2, 100), 1000),
  959 + 1
  960 + );
  961 +
  962 + //根据重量计算米数：需求米数
  963 + let demandLength5Temp1 = FloatDiv(
  964 + FloatMul(demandAluminumFoilWeight5.value, 1000),
  965 + aluminumFoilDensity5.value
  966 + );
  967 + let demandLength5Temp2 = FloatDiv(
  968 + FloatMul(
  969 + FloatDiv(aluminumFoilThickness5.value, 10000),
  970 + aluminumFoilWidth5.value
  971 + ),
  972 + 10
  973 + );
  974 + demandAluminumFoilLength5.value = roundToDecimal(
  975 + FloatDiv(FloatDiv(demandLength5Temp1, demandLength5Temp2), 100),
  976 + 1
  977 + );
  978 +};
  979 +
  980 +const showSuffix = ref(true);
  981 +
  982 +onMounted(() => {
  983 + function detectZoom() {
  984 + var ratio = 0,
  985 + screen = window.screen,
  986 + ua = navigator.userAgent.toLowerCase();
  987 +
  988 + if (window.devicePixelRatio !== undefined) {
  989 + ratio = window.devicePixelRatio;
  990 + } else if (~ua.indexOf("msie")) {
  991 + if (screen.deviceXDPI && screen.logicalXDPI) {
  992 + ratio = screen.deviceXDPI / screen.logicalXDPI;
  993 + }
  994 + } else if (
  995 + window.outerWidth !== undefined &&
  996 + window.innerWidth !== undefined
  997 + ) {
  998 + ratio = window.outerWidth / window.innerWidth;
  999 + }
  1000 +
  1001 + if (ratio) {
  1002 + ratio = Math.round(ratio * 100);
  1003 + }
  1004 + return ratio;
  1005 + }
  1006 + function adjustMargins() {
  1007 + const windowWidth = window.innerWidth;
  1008 + const flexItemSpecailSelArray = Array.from(
  1009 + document.getElementsByClassName("flex-item-specail-sel")
  1010 + );
  1011 +
  1012 + const flexItemColumSecLastArray = Array.from(
  1013 + document.getElementsByClassName("flex-item-colum-sec-last")
  1014 + );
  1015 +
  1016 + const dirSpanArray = Array.from(
  1017 + document.getElementsByClassName("dir-span")
  1018 + );
  1019 +
  1020 + const cellResultSizeArray = Array.from(
  1021 + document.getElementsByClassName("cell-result-size")
  1022 + );
  1023 +
  1024 + const flexItemColumSecArray = Array.from(
  1025 + document.getElementsByClassName("flex-item-colum-sec")
  1026 + );
  1027 +
  1028 + const flexItemColumArray = Array.from(
  1029 + document.getElementsByClassName("flex-item-colum")
  1030 + );
  1031 +
  1032 + const flexItemLast = document.getElementById("flex-item-last");
  1033 +
  1034 + const valueSpanArray = Array.from(
  1035 + document.getElementsByClassName("value-span")
  1036 + );
  1037 +
  1038 + const valueSpanLastArray = Array.from(
  1039 + document.getElementsByClassName("value-span-last")
  1040 + );
  1041 +
  1042 + if (detectZoom() < 100) {
  1043 + } else {
  1044 + // dirSpanArray.forEach((dirSpan) => {
  1045 + // dirSpan.style.width = `${(85 / 1920) * windowWidth}px`;
  1046 + // });
  1047 + // flexItemSpecailSelArray.forEach((flexItemSpecailSel) => {
  1048 + // if (windowWidth > 1270) {
  1049 + // flexItemSpecailSel.style.marginLeft = `${
  1050 + // (70 / 1920) * windowWidth
  1051 + // }px`;
  1052 + // } else {
  1053 + // flexItemSpecailSel.style.marginLeft = `0px`;
  1054 + // }
  1055 + // });
  1056 + // flexItemColumSecArray.forEach((flexItemColumSec) => {
  1057 + // flexItemColumSec.style.marginLeft = `${(70 / 1920) * windowWidth}px`;
  1058 + // });
  1059 + // flexItemLast.style.marginLeft = `${(70 / 1920) * windowWidth}px`;
  1060 + // valueSpanArray.forEach((valueSpan) => {
  1061 + // valueSpan.style.width = `${(180 / 1920) * windowWidth}px`;
  1062 + // if (valueSpan.clientWidth <= 50) {
  1063 + // showSuffix.value = false;
  1064 + // } else {
  1065 + // showSuffix.value = true;
  1066 + // }
  1067 + // });
  1068 + // if (valueSpanLastArray) {
  1069 + // valueSpanLastArray.forEach((valueSpanLast) => {
  1070 + // valueSpanLast.style.width = `${(180 / 1920) * windowWidth}px`;
  1071 + // });
  1072 + // }
  1073 + // if (flexItemColumSecLastArray) {
  1074 + // flexItemColumSecLastArray.forEach((flexItemColumSecLast) => {
  1075 + // flexItemColumSecLast.style.marginLeft = `${
  1076 + // (70 / 1920) * windowWidth
  1077 + // }px`;
  1078 + // });
  1079 + // }
  1080 + // cellResultSizeArray.forEach((cellResultSize) => {
  1081 + // if (windowWidth > 1270) {
  1082 + // cellResultSize.style.height = `630px`;
  1083 + // } else {
  1084 + // cellResultSize.style.height = `670px`;
  1085 + // }
  1086 + // });
  1087 + // if (windowWidth <= 1270) {
  1088 + // if (flexItemColumArray) {
  1089 + // flexItemColumArray.forEach((flexItemColum) => {
  1090 + // flexItemColum.style.flexDirection = `column`;
  1091 + // });
  1092 + // }
  1093 + // } else {
  1094 + // if (flexItemColumArray) {
  1095 + // flexItemColumArray.forEach((flexItemColum) => {
  1096 + // flexItemColum.style.removeProperty("flex-direction");
  1097 + // });
  1098 + // }
  1099 + // }
  1100 + }
  1101 + }
  1102 +
  1103 + adjustMargins();
  1104 +
  1105 + window.addEventListener("resize", adjustMargins);
  1106 +});
  1107 +</script>
  1108 +
  1109 +<style scoped>
  1110 +.cell-result-size {
  1111 + height: 630px;
  1112 + margin-top: 10px;
  1113 + display: flex;
  1114 + justify-content: space-between;
  1115 +}
  1116 +
  1117 +.cell-half-box {
  1118 + background-color: #ffffff;
  1119 + height: 100%;
  1120 + border-radius: 5px;
  1121 + width: 49.5%;
  1122 + position: relative;
  1123 + overflow: hidden;
  1124 + text-overflow: ellipsis;
  1125 + white-space: nowrap;
  1126 +}
  1127 +
  1128 +.cell-box {
  1129 + background-color: #ffffff;
  1130 + width: 100%;
  1131 + height: 650px;
  1132 + border-radius: 5px;
  1133 + position: relative;
  1134 +}
  1135 +
  1136 +.cell-half-box:first-child {
  1137 + /* margin-right: 15px; */
  1138 +}
  1139 +
  1140 +.cell-result-size-sec {
  1141 + height: 348px;
  1142 + margin-top: 10px;
  1143 + display: flex;
  1144 +}
  1145 +
  1146 +.cell-result-size-third {
  1147 + /* height: 948px; */
  1148 + margin-top: 10px;
  1149 + display: flex;
  1150 + position: relative;
  1151 +}
  1152 +
  1153 +.pole-iece-size {
  1154 + background-color: #ffffff;
  1155 + height: 100%;
  1156 + border-radius: 5px;
  1157 + flex: 1;
  1158 +}
  1159 +
  1160 +.cell-design {
  1161 + background-color: #ffffff;
  1162 + height: 100%;
  1163 + border-radius: 5px;
  1164 + flex: 1;
  1165 + width: 100%;
  1166 +}
  1167 +
  1168 +.title-top {
  1169 + display: flex;
  1170 + align-content: center;
  1171 + justify-content: flex-start;
  1172 + align-items: center;
  1173 + padding: 20px 30px;
  1174 + border-bottom: 2px solid #ecedef;
  1175 +}
  1176 +
  1177 +.triangle {
  1178 + width: 0;
  1179 + height: 0;
  1180 + border-left: 5px solid #636974;
  1181 + border-top: 5px solid transparent;
  1182 + border-bottom: 5px solid transparent;
  1183 +}
  1184 +.title-span {
  1185 + font-size: 15spx;
  1186 + padding-left: 10px;
  1187 +}
  1188 +.context {
  1189 + margin: 30px 40px;
  1190 + display: flex;
  1191 + flex-direction: column;
  1192 + justify-content: space-between;
  1193 +}
  1194 +
  1195 +.flex-item-colum {
  1196 + /* display: flex; */
  1197 +}
  1198 +
  1199 +.flex-item-colum-other {
  1200 + display: grid;
  1201 + flex-direction: column;
  1202 + grid-template-columns: repeat(2, 45%);
  1203 + justify-content: space-between;
  1204 + column-gap: 75px;
  1205 + /* display: flex;
  1206 + overflow: hidden;
  1207 + text-overflow: ellipsis;
  1208 + white-space: nowrap; */
  1209 +}
  1210 +
  1211 +.flex-item-colum-last {
  1212 + display: flex;
  1213 +}
  1214 +.flex-item-colum-bottom {
  1215 + display: flex;
  1216 + margin-bottom: 30px;
  1217 + margin-top: 30px;
  1218 +}
  1219 +.context-sec {
  1220 + margin: 30px 40px;
  1221 + display: flex;
  1222 + justify-content: space-between;
  1223 +}
  1224 +.fri-flex {
  1225 + /* padding-right: 60px; */
  1226 + text-align: justify;
  1227 + flex-direction: column;
  1228 + justify-content: center;
  1229 +}
  1230 +.fri-flex-input {
  1231 + position: relative;
  1232 + top: -10px;
  1233 +}
  1234 +
  1235 +.dir-span {
  1236 + color: #646464;
  1237 + font-size: 16px;
  1238 + width: auto;
  1239 + display: flex;
  1240 + text-align-last: justify;
  1241 + text-align: justify;
  1242 + flex-direction: column;
  1243 + justify-content: center;
  1244 + overflow: hidden;
  1245 + text-overflow: ellipsis;
  1246 + white-space: nowrap;
  1247 +}
  1248 +
  1249 +.dir-span span {
  1250 + /* overflow: hidden; */
  1251 + height: 21px;
  1252 + text-overflow: ellipsis;
  1253 + white-space: nowrap;
  1254 +}
  1255 +
  1256 +.dir-span-nowidth {
  1257 + color: #646464;
  1258 + font-size: 16px;
  1259 + display: flex;
  1260 + text-align-last: justify;
  1261 + text-align: justify;
  1262 + flex-direction: column;
  1263 + justify-content: center;
  1264 + overflow: hidden;
  1265 + text-overflow: ellipsis;
  1266 + white-space: nowrap;
  1267 +}
  1268 +
  1269 +.dir-span-nowidth span {
  1270 + overflow: hidden;
  1271 + text-overflow: ellipsis;
  1272 + height: 21px;
  1273 + white-space: nowrap;
  1274 +}
  1275 +
  1276 +.tir-span {
  1277 + color: #646464;
  1278 + font-size: 16px;
  1279 + width: 105px;
  1280 + display: flex;
  1281 + text-align-last: justify;
  1282 + text-align: justify;
  1283 + flex-direction: column;
  1284 + justify-content: center;
  1285 +}
  1286 +
  1287 +.tir-span-other {
  1288 + color: #646464;
  1289 + font-size: 16px;
  1290 + width: 120px;
  1291 + display: flex;
  1292 + text-align-last: justify;
  1293 + text-align: justify;
  1294 + flex-direction: column;
  1295 + justify-content: center;
  1296 +}
  1297 +.tir-nosplit-span {
  1298 + color: #646464;
  1299 + font-size: 16px;
  1300 + width: 225px;
  1301 + display: flex;
  1302 + text-align: justify;
  1303 + flex-direction: column;
  1304 + justify-content: center;
  1305 +}
  1306 +.adjust-tir-nosplit-span {
  1307 + color: #646464;
  1308 + font-size: 16px;
  1309 + display: flex;
  1310 + text-align: justify;
  1311 + flex-direction: column;
  1312 + justify-content: center;
  1313 +}
  1314 +.dir-title {
  1315 + color: #4f9fdd;
  1316 + font-size: 16px;
  1317 + width: 125px;
  1318 + display: flex;
  1319 + flex-direction: column;
  1320 + justify-content: center;
  1321 +}
  1322 +
  1323 +.value-span {
  1324 + margin-left: 20px;
  1325 + flex: 1;
  1326 + width: 10px;
  1327 + /* flex: 1; */
  1328 + /* overflow: hidden;
  1329 + text-overflow: ellipsis;
  1330 + white-space: nowrap; */
  1331 + max-width: 180px;
  1332 +}
  1333 +
  1334 +.value-span-last {
  1335 + margin-left: 20px;
  1336 + flex: 1;
  1337 + width: 200px;
  1338 + overflow: hidden;
  1339 + text-overflow: ellipsis;
  1340 + white-space: nowrap;
  1341 + max-width: 180px;
  1342 +}
  1343 +
  1344 +.value-span-last span {
  1345 + overflow: hidden;
  1346 + text-overflow: ellipsis;
  1347 + white-space: nowrap;
  1348 +}
  1349 +
  1350 +.value-span span {
  1351 + overflow: hidden;
  1352 + text-overflow: ellipsis;
  1353 + white-space: nowrap;
  1354 +}
  1355 +
  1356 +.value-span-scal {
  1357 + margin-left: 20px;
  1358 + flex: 1;
  1359 + font-weight: bolder;
  1360 + width: 185px;
  1361 +}
  1362 +
  1363 +.adjust-value-span {
  1364 + margin-left: 20px;
  1365 + font-weight: bolder;
  1366 +}
  1367 +
  1368 +.flex-item-title {
  1369 + padding-top: 30px;
  1370 + display: flex;
  1371 + padding-bottom: 30px;
  1372 +}
  1373 +
  1374 +.flex-item {
  1375 + display: flex;
  1376 + padding-bottom: 30px;
  1377 +}
  1378 +
  1379 +.flex-item-last {
  1380 + display: flex;
  1381 + padding-bottom: 30px;
  1382 + margin-left: 70px;
  1383 +}
  1384 +
  1385 +.flex-item-colum-sec {
  1386 + display: flex;
  1387 + padding-bottom: 20px;
  1388 + /* margin-left: 70px; */
  1389 + /* justify-content: center; */
  1390 + align-items: center;
  1391 + width: auto;
  1392 + overflow: hidden;
  1393 + text-overflow: ellipsis;
  1394 + white-space: nowrap;
  1395 +}
  1396 +
  1397 +.flex-item-colum-sec-other {
  1398 + display: flex;
  1399 + padding-bottom: 20px;
  1400 + margin-left: 70px;
  1401 + justify-content: center;
  1402 + align-items: center;
  1403 + width: auto;
  1404 + overflow: hidden;
  1405 + text-overflow: ellipsis;
  1406 + white-space: nowrap;
  1407 +}
  1408 +
  1409 +.flex-item-colum-sec-last {
  1410 + margin-left: 70px;
  1411 + display: flex;
  1412 + height: 40px;
  1413 +}
  1414 +
  1415 +.flex-item-specail {
  1416 + display: flex;
  1417 + height: 40px;
  1418 + margin-bottom: 18px;
  1419 +}
  1420 +
  1421 +.flex-item-specail-sel {
  1422 + display: flex;
  1423 + height: 40px;
  1424 + /* margin-left: 70px; */
  1425 +}
  1426 +
  1427 +.flex-item-specail-last {
  1428 + display: flex;
  1429 + height: 40px;
  1430 +}
  1431 +
  1432 +.flex-item-specail-third {
  1433 + position: relative;
  1434 + display: flex;
  1435 + height: 40px;
  1436 + margin-bottom: 18px;
  1437 + top: -10px;
  1438 +}
  1439 +
  1440 +.sec-flex-last {
  1441 + display: flex;
  1442 + overflow: hidden;
  1443 + text-overflow: ellipsis;
  1444 + white-space: nowrap;
  1445 + width: auto;
  1446 +}
  1447 +
  1448 +.sec-flex {
  1449 + /* display: flex;
  1450 + overflow: hidden;
  1451 + text-overflow: ellipsis;
  1452 + white-space: nowrap; */
  1453 + display: grid;
  1454 + flex-direction: column;
  1455 + grid-template-columns: repeat(2, 50%);
  1456 + justify-content: space-between;
  1457 + -moz-column-gap: 50px;
  1458 + column-gap: 50px;
  1459 +}
  1460 +
  1461 +.sec-sec-flex {
  1462 + margin-left: 60px;
  1463 +}
  1464 +
  1465 +.tir-title {
  1466 + color: #4f9fdd;
  1467 + font-size: 16px;
  1468 + width: 125px;
  1469 + display: flex;
  1470 + flex-direction: column;
  1471 + font-weight: 600;
  1472 + justify-content: center;
  1473 +}
  1474 +
  1475 +.adjust-box {
  1476 + display: flex;
  1477 + margin-left: 145px;
  1478 + width: 1220px;
  1479 + /* justify-content: space-between; */
  1480 +}
  1481 +.adjust-flex-item {
  1482 +}
  1483 +.adjust-left-box {
  1484 + display: flex;
  1485 + width: 400px;
  1486 + justify-content: space-between;
  1487 +}
  1488 +.adjust-sel-box {
  1489 + display: flex;
  1490 + margin-left: 75px;
  1491 + flex: 1;
  1492 + justify-content: space-between;
  1493 +}
  1494 +.context-last {
  1495 + display: flex;
  1496 + margin-left: 40px;
  1497 +}
  1498 +.fri-flex-last {
  1499 + margin-left: 245px;
  1500 +}
  1501 +.compute {
  1502 + position: absolute;
  1503 + right: 20px;
  1504 + bottom: 20px;
  1505 +}
  1506 +.box-footer {
  1507 + margin-bottom: 50px;
  1508 +}
  1509 +.diving {
  1510 + height: 0.1vw;
  1511 + background: #ecedef;
  1512 + margin-top: 50px;
  1513 +}
  1514 +.compute-btn {
  1515 + width: 96px;
  1516 + height: 32px;
  1517 + background: #4f9fdd;
  1518 + border-radius: 6px;
  1519 + display: flex;
  1520 + justify-content: center;
  1521 + align-items: center;
  1522 + color: #ffffff;
  1523 + position: absolute;
  1524 + right: 40px;
  1525 + bottom: 30px;
  1526 +}
  1527 +
  1528 +.compute-btn:hover {
  1529 + cursor: pointer;
  1530 +}
  1531 +</style>
... ...
deploy/prod2.sh
  View file @f92ff11
1 1 #!/bin/bash
2 2 # 变量定义
3   -LAST_TAG="1.0.51"
4   -TAG="1.0.52"
  3 +LAST_TAG="1.0.53"
  4 +TAG="1.0.54"
5 5 TARGET_PATH="/root/web/canrud-outside-nuxt-front"
6 6 DOCKERFILE_PATH="/root/web/canrud-outside-nuxt-front/canrud-nuxt-front"
7 7 IMAGE_NAME="canrud-outside-front"
... ...
pages/compute.vue
  View file @f92ff11
... ... @@ -2,46 +2,50 @@
2 2 <div class="slac-box" id="slacBox">
3 3 <div class="top-nav">
4 4 <div v-for="(item, index) in navList" :key="index" class="nav-item">
5   - <div
  5 + <h2
6 6 :class="[selNavIndex === index ? 'item-context-sel' : 'item-context']"
7 7 @click="selNavIndex = index"
8 8 >
9 9 {{ item }}
10   - </div>
  10 + </h2>
11 11 </div>
12 12 </div>
13 13 <EnergyDensityCalculator v-if="selNavIndex == 0"></EnergyDensityCalculator>
  14 + <TheoreticalDataCalculator
  15 + v-if="selNavIndex == 1"
  16 + ></TheoreticalDataCalculator>
14 17 </div>
15 18 <SideBar></SideBar>
16 19 </template>
17 20  
18 21 <script setup>
19 22 import EnergyDensityCalculator from "~/components/EnergyDensityCalculator.vue";
20   -const navList = ["Energy Density Calculator"];
  23 +import TheoreticalDataCalculator from "~/components/TheoreticalDataCalculator.vue";
  24 +const navList = ["Energy Density Calculator", "Theoretical Data Calculator"];
21 25 const selNavIndex = ref(0);
22 26  
23 27 useHead({
24   - title: `${navList[selNavIndex.value]} - 科路得`,
  28 + title: `${navList[selNavIndex.value]} - Canrd`,
25 29 meta: [
26 30 {
27 31 hid: "description",
28 32 name: "description",
29   - content: `科路得,Guangdong Canrd New Energy Technology Co.,Ltd.，即“助您科研之路势在必得”的缩写，是全球最全的储能研究领域材料供应平台；具体提供扣式电池、锂离子电池、超级电容器、锂硫电池、燃料电池、锂空气电池及钠离子电池等领域研究用材料及相关领域设备、技术服务、电池材料中式性能评估等；为您及您的团队提供专业化、全方位的一站式储能领域研究服务。`,
  33 + content: `Guangdong Canrd New Energy Technology Co., Ltd., which is the abbreviation of "helping you succeed in your scientific research", is the world's most comprehensive material supply platform in the field of energy storage research; it specifically provides button batteries, lithium-ion batteries, supercapacitors, lithium-sulfur batteries, fuel cells, lithium-air batteries and sodium-ion batteries. Research materials and related equipment, technical services, battery material performance evaluation, etc.; provide you and your team with professional, comprehensive, one-stop energy storage research services.`,
30 34 },
31 35 {
32 36 hid: "keywords",
33 37 name: "keywords",
34   - content: `科路得,科路得官网,科路得商城,科路得锂片,科路得电解液,科路得电池壳`,
  38 + content: `Canrd, Canrd official website, Canrd mall, Canrd lithium sheet, Canrd electrolyte, Canrd battery shell`,
35 39 },
36 40 {
37 41 hid: "og:title",
38 42 property: "og:title",
39   - content: `${navList[selNavIndex.value]} - 科路得`,
  43 + content: `${navList[selNavIndex.value]} - Canrd`,
40 44 },
41 45 {
42 46 hid: "og:description",
43 47 property: "og:description",
44   - content: `科路得,Guangdong Canrd New Energy Technology Co.,Ltd.，即“助您科研之路势在必得”的缩写，是全球最全的储能研究领域材料供应平台；具体提供扣式电池、锂离子电池、超级电容器、锂硫电池、燃料电池、锂空气电池及钠离子电池等领域研究用材料及相关领域设备、技术服务、电池材料中式性能评估等；为您及您的团队提供专业化、全方位的一站式储能领域研究服务。`,
  48 + content: `Guangdong Canrd New Energy Technology Co., Ltd., which is the abbreviation of "helping you succeed in your scientific research", is the world's most comprehensive material supply platform in the field of energy storage research; it specifically provides button batteries, lithium-ion batteries, supercapacitors, lithium-sulfur batteries, fuel cells, lithium-air batteries and sodium-ion batteries. Research materials and related equipment, technical services, battery material performance evaluation, etc.; provide you and your team with professional, comprehensive, one-stop energy storage research services.`,
45 49 },
46 50 ],
47 51 });
... ... @@ -50,27 +54,27 @@ watch(
50 54 () => selNavIndex.value,
51 55 (newValue) => {
52 56 useHead({
53   - title: `${navList[selNavIndex.value]} - 科路得`,
  57 + title: `${navList[selNavIndex.value]} - Canrd`,
54 58 meta: [
55 59 {
56 60 hid: "description",
57 61 name: "description",
58   - content: `科路得,Guangdong Canrd New Energy Technology Co.,Ltd.，即“助您科研之路势在必得”的缩写，是全球最全的储能研究领域材料供应平台；具体提供扣式电池、锂离子电池、超级电容器、锂硫电池、燃料电池、锂空气电池及钠离子电池等领域研究用材料及相关领域设备、技术服务、电池材料中式性能评估等；为您及您的团队提供专业化、全方位的一站式储能领域研究服务。`,
  62 + content: `Guangdong Canrd New Energy Technology Co., Ltd., which is the abbreviation of "helping you succeed in your scientific research", is the world's most comprehensive material supply platform in the field of energy storage research; it specifically provides button batteries, lithium-ion batteries, supercapacitors, lithium-sulfur batteries, fuel cells, lithium-air batteries and sodium-ion batteries. Research materials and related equipment, technical services, battery material performance evaluation, etc.; provide you and your team with professional, comprehensive, one-stop energy storage research services.`,
59 63 },
60 64 {
61 65 hid: "keywords",
62 66 name: "keywords",
63   - content: `科路得,科路得官网,科路得商城,科路得锂片,科路得电解液,科路得电池壳`,
  67 + content: `Canrd, Canrd official website, Canrd mall, Canrd lithium sheet, Canrd electrolyte, Canrd battery shell`,
64 68 },
65 69 {
66 70 hid: "og:title",
67 71 property: "og:title",
68   - content: `${navList[selNavIndex.value]} - 科路得`,
  72 + content: `${navList[selNavIndex.value]} - Canrd`,
69 73 },
70 74 {
71 75 hid: "og:description",
72 76 property: "og:description",
73   - content: `科路得,Guangdong Canrd New Energy Technology Co.,Ltd.，即“助您科研之路势在必得”的缩写，是全球最全的储能研究领域材料供应平台；具体提供扣式电池、锂离子电池、超级电容器、锂硫电池、燃料电池、锂空气电池及钠离子电池等领域研究用材料及相关领域设备、技术服务、电池材料中式性能评估等；为您及您的团队提供专业化、全方位的一站式储能领域研究服务。`,
  77 + content: `Guangdong Canrd New Energy Technology Co., Ltd., which is the abbreviation of "helping you succeed in your scientific research", is the world's most comprehensive material supply platform in the field of energy storage research; it specifically provides button batteries, lithium-ion batteries, supercapacitors, lithium-sulfur batteries, fuel cells, lithium-air batteries and sodium-ion batteries. Research materials and related equipment, technical services, battery material performance evaluation, etc.; provide you and your team with professional, comprehensive, one-stop energy storage research services.`,
74 78 },
75 79 ],
76 80 });
... ...
pages/products/detail/[id]/index.vue
  View file @f92ff11
... ... @@ -45,11 +45,11 @@ watchEffect(() =&gt; {
45 45 },
46 46 {
47 47 name: "keywords",
48   - content: info.value.name || info.value.metakeywords,
  48 + content: info.value.introduction || info.value.name,
49 49 },
50 50 {
51 51 name: "description",
52   - content: info.value.metadescription || info.value.name,
  52 + content: info.value.introduction || info.value.name,
53 53 },
54 54 ],
55 55 });
... ... @@ -67,6 +67,13 @@ newData.productimageliststore = newData?.productimageliststore?.map(
67 67 url: `/api/show/image?fileKey=${item.fileKey}&psize=p512`,
68 68 })
69 69 );
  70 +function removeTags(input: string): string {
  71 + // 使用正则表达式去除 <div>, <span>, <p> 标签
  72 + // 这个正则表达式会匹配这些标签并移除它们，但保留标签内部的文本
  73 + return input.replace(/<\/?(div|span|p|br)[^>]*>/g, "");
  74 +}
70 75  
71 76 info.value = { ...newData };
  77 +const introduction = removeTags(info.value.introduction);
  78 +info.value.introduction = introduction;
72 79 </script>
... ...
utils/NumberUtils.ts 0 → 100644
  View file @f92ff11
  1 +//浮点数加法运算
  2 +export function FloatAdd(arg1: any, arg2: any) {
  3 + let r1, r2, m;
  4 + try {
  5 + r1 = arg1.toString().split(".")[1].length;
  6 + } catch (e) {
  7 + r1 = 0;
  8 + }
  9 + try {
  10 + r2 = arg2.toString().split(".")[1].length;
  11 + } catch (e) {
  12 + r2 = 0;
  13 + }
  14 + m = Math.pow(10, Math.max(r1, r2));
  15 + return (arg1 * m + arg2 * m) / m;
  16 +}
  17 +
  18 +//浮点数减法运算
  19 +export function FloatSub(arg1: any, arg2: any) {
  20 + let r1, r2, m, n;
  21 + try {
  22 + r1 = arg1.toString().split(".")[1].length;
  23 + } catch (e) {
  24 + r1 = 0;
  25 + }
  26 + try {
  27 + r2 = arg2.toString().split(".")[1].length;
  28 + } catch (e) {
  29 + r2 = 0;
  30 + }
  31 + m = Math.pow(10, Math.max(r1, r2));
  32 + //动态控制精度长度
  33 + n = (r1 = r2) ? r1 : r2;
  34 + return ((arg1 * m - arg2 * m) / m).toFixed(n);
  35 +}
  36 +
  37 +//浮点数乘法运算
  38 +export function FloatMul(arg1: any, arg2: any) {
  39 + let m = 0,
  40 + s1 = arg1.toString(),
  41 + s2 = arg2.toString();
  42 + try {
  43 + m += s1.split(".")[1].length;
  44 + } catch (e) {}
  45 + try {
  46 + m += s2.split(".")[1].length;
  47 + } catch (e) {}
  48 + return (
  49 + (Number(s1.replace(".", "")) * Number(s2.replace(".", ""))) /
  50 + Math.pow(10, m)
  51 + );
  52 +}
  53 +
  54 +//浮点数除法运算
  55 +export function FloatDiv(arg1: any, arg2: any) {
  56 + let t1 = 0,
  57 + t2 = 0,
  58 + r1,
  59 + r2;
  60 + try {
  61 + t1 = arg1.toString().split(".")[1].length;
  62 + } catch (e) {}
  63 + try {
  64 + t2 = arg2.toString().split(".")[1].length;
  65 + } catch (e) {}
  66 + if (Math) {
  67 + r1 = Number(arg1.toString().replace(".", ""));
  68 + r2 = Number(arg2.toString().replace(".", ""));
  69 + return (r1 / r2) * Math.pow(10, t2 - t1);
  70 + }
  71 +}
  72 +
  73 +export function roundToDecimal(num: any, decimalPlaces: any) {
  74 + return Number(num.toFixed(decimalPlaces));
  75 +}
... ...