simulate_one.html 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>估价模拟</title>
  6. <style>
  7. body{
  8. font-family: Arial;
  9. background:#f6f7f9;
  10. }
  11. .container{
  12. width:1100px;
  13. margin:20px auto;
  14. display:flex;
  15. gap:20px;
  16. }
  17. .left{
  18. width:65%;
  19. background:#fff;
  20. padding:20px;
  21. border-radius:6px;
  22. }
  23. .right{
  24. width:35%;
  25. background:#fff;
  26. padding:20px;
  27. border-radius:6px;
  28. }
  29. .step{
  30. margin-bottom:20px;
  31. }
  32. .prop{
  33. margin-bottom:12px;
  34. }
  35. .prop-title{
  36. font-weight:bold;
  37. margin-bottom:6px;
  38. }
  39. .option{
  40. display:block;
  41. margin-left:10px;
  42. margin-bottom:4px;
  43. }
  44. h2{
  45. margin-top:0;
  46. }
  47. table{
  48. width:100%;
  49. border-collapse: collapse;
  50. }
  51. td,th{
  52. border:1px solid #ddd;
  53. padding:6px;
  54. font-size:13px;
  55. }
  56. </style>
  57. </head>
  58. <body>
  59. <div class="container">
  60. <div class="left">
  61. <h2>{{ machine_name }}</h2>
  62. <form method="post" action="/estimate/simulate">
  63. <input type="hidden" name="machine_id" value="{{ machine_id }}">
  64. <div class="base-price-box">
  65. <label>
  66. 基准价格(可人工输入):
  67. <input
  68. type="number"
  69. step="0.01"
  70. name="base_price"
  71. placeholder="人工输入基准价"
  72. value="{{ result.base_price if result }}"
  73. style="width:140px;"
  74. >
  75. </label>
  76. </div>
  77. {% for step in tpl.template %}
  78. <div class="step">
  79. <h3>{{ step.stepName }}</h3>
  80. {% for p in step.properties %}
  81. <div class="prop">
  82. <div class="prop-title">
  83. {{ p.name }}
  84. {% if p.required %}
  85. <span style="color:red">*</span>
  86. {% endif %}
  87. </div>
  88. {% set input_type = "checkbox" if p.isMulti else "radio" %}
  89. {% set input_name = "option_" ~ p.id %}
  90. {% for v in p["values"] %}
  91. <label class="option">
  92. <input
  93. type="{{ input_type }}"
  94. name="{{ input_name }}"
  95. value="{{ v.valueId }}"
  96. {% if result and (v.valueId|string) in result.selected %}
  97. checked
  98. {% endif %}
  99. >
  100. {{ v.valueText }}
  101. </label>
  102. {% endfor %}
  103. </div>
  104. {% endfor %}
  105. </div>
  106. {% endfor %}
  107. <button type="submit">开始估价</button>
  108. </form>
  109. </div>
  110. <div class="right">
  111. {% if result %}
  112. <h3>价格计算明细</h3>
  113. <p>基准价(没有则为1):{{ result.base_price }} 元</p>
  114. <table>
  115. <tr>
  116. <th>项</th>
  117. <th>系数</th>
  118. <!-- <th>固定扣减</th>
  119. <th>变动</th> -->
  120. </tr>
  121. {% for d in result.details %}
  122. <tr>
  123. <td
  124. {% if d.option_name and d.option_name.startswith('--') %}
  125. style="color:red;font-weight:bold;"
  126. {% endif %}
  127. >
  128. {{ d.option_name }}
  129. </td>
  130. <td>
  131. {% if d.factor %}
  132. {{ d.factor }}
  133. {% else %}
  134. -
  135. {% endif %}
  136. </td>
  137. <!-- <td>
  138. {% if d.absolute %}
  139. - {{ d.absolute }}
  140. {% else %}
  141. -
  142. {% endif %}
  143. </td>
  144. <td>
  145. {{ d.before }} → {{ d.after }}
  146. </td> -->
  147. </tr>
  148. {% endfor %}
  149. </table>
  150. <h3 style="margin-top:15px;">
  151. 最终价格:{{ result.final_price }} 元
  152. </h3>
  153. {% else %}
  154. <h3>请选择检测项后点击估价</h3>
  155. {% endif %}
  156. </div>
  157. </div>
  158. </body>
  159. </html>