explainXsbz.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <template>
  2. <a-card size="small" :bordered="false" class="explainXsbz-warp">
  3. <div class="explainXsbz-cont">
  4. <p class="explain-tit">销售保障法</p>
  5. <p class="explain-txt margin-b-30">销售保障法以历史的实际销售量为数据基础,并结合专家经验,得到预计的需求量,以满足销售需求,具体计算公式如下。</p>
  6. <div class="sub-tit">
  7. <img src="@/assets/explain/icon_sales.png" width="16" class="tit-icon" />
  8. <p class="txt">预计月销量</p>
  9. </div>
  10. <div class="item-cont">
  11. <p class="item-exp">预计月销量= {上个月实际销量,最近两个月实际销量平均值,最近半年实际销量平均值,去年同期实际销量} 取大者</p>
  12. <div class="item-main">
  13. <img src="@/assets/explain/pressed_gray.png" width="12" class="item-icon" />
  14. <p class="item-txt">如果是新产品,没有历史销量,则不会进行预测,下载结果的excel中显示为-</p>
  15. </div>
  16. <div class="item-main">
  17. <img src="@/assets/explain/pressed_gray.png" width="12" class="item-icon" />
  18. <p class="item-txt">如果产品上线时间不长,历史销售量记录小于12个月,则取有记录的销量平均值作为预计月销量</p>
  19. </div>
  20. </div>
  21. <div class="sub-tit">
  22. <img src="@/assets/explain/icon_mete.png" width="16" class="tit-icon" />
  23. <p class="txt">预计需求量</p>
  24. </div>
  25. <div class="item-cont">
  26. <p class="item-exp">预计需求量=预计月销量 × 保障倍数</p>
  27. <div class="item-main">
  28. <img src="@/assets/explain/pressed_gray.png" width="12" class="item-icon" />
  29. <p class="item-txt">保障倍数是专家根据经验判断,自行设置的一个数值,取值范围在1~3之间,最多两位小数</p>
  30. </div>
  31. </div>
  32. <div class="sub-tit">
  33. <img src="@/assets/explain/icon_example.png" width="16" class="tit-icon" />
  34. <p class="txt">示例</p>
  35. </div>
  36. <div class="item-cont">
  37. <div class="item-main">
  38. <img src="@/assets/explain/pressed_gray.png" width="12" class="item-icon" />
  39. <p class="item-txt">某产品的订货周期为45天,最近12个月的实际销量如下表</p>
  40. </div>
  41. <div class="item-table">
  42. <a-table :columns="columns" :data-source="dataSource" bordered :pagination="false"></a-table>
  43. </div>
  44. <div class="item-main">
  45. <img src="@/assets/explain/pressed_gray.png" width="12" class="item-icon" />
  46. <p class="item-txt">计算预计月销量 = MAX { 59,(53+59)/2,(52+52+56+52+53+59)/6,55 } =59</p>
  47. </div>
  48. <div class="item-main">
  49. <img src="@/assets/explain/pressed_gray.png" width="12" class="item-icon" />
  50. <p class="item-txt">计算预计需求量 = 59 × 保障倍数1.5 = 88.5 ≈ 89(假设保障倍数为1.5)</p>
  51. </div>
  52. </div>
  53. </div>
  54. </a-card>
  55. </template>
  56. <script>
  57. export default {
  58. data () {
  59. return {
  60. columns: [
  61. { title: '1月', dataIndex: 'january', align: 'center' },
  62. { title: '2月', dataIndex: 'february', align: 'center' },
  63. { title: '3月', dataIndex: 'march', align: 'center' },
  64. { title: '4月', dataIndex: 'april', align: 'center' },
  65. { title: '5月', dataIndex: 'may', align: 'center' },
  66. { title: '6月', dataIndex: 'june', align: 'center' },
  67. { title: '7月', dataIndex: 'july', align: 'center' },
  68. { title: '8月', dataIndex: 'august', align: 'center' },
  69. { title: '9月', dataIndex: 'september', align: 'center' },
  70. { title: '10月', dataIndex: 'october', align: 'center' },
  71. { title: '11月', dataIndex: 'november', align: 'center' },
  72. { title: '12月', dataIndex: 'december', align: 'center' }
  73. ],
  74. dataSource: [
  75. { january: 55, february: 53, march: 54, april: 56, may: 58, june: 57, july: 52, august: 52, september: 56, october: 52, november: 53, december: 59 }
  76. ]
  77. }
  78. }
  79. }
  80. </script>
  81. <style lang="less">
  82. .explainXsbz-warp{
  83. .explainXsbz-cont{
  84. width: 960px;
  85. margin: 0 auto;
  86. p{
  87. margin: 0;
  88. }
  89. .explain-tit{
  90. font-size: 18px;
  91. font-weight: bold;
  92. text-align: center;
  93. margin: 20px 0 30px;
  94. }
  95. .explain-txt{
  96. font-size: 13px;
  97. color: rgba(0,0,0,0.85);
  98. }
  99. .margin-b-30{
  100. margin-bottom: 30px;
  101. }
  102. .sub-tit{
  103. margin-bottom: 10px;
  104. .tit-icon{
  105. vertical-align: text-bottom;
  106. margin-right: 5px;
  107. }
  108. .txt{
  109. font-size: 16px;
  110. color: rgba(0, 21, 41, 1);
  111. display: inline-block;
  112. margin: 0;
  113. }
  114. }
  115. .item-cont{
  116. font-size: 13px;
  117. padding-left: 23px;
  118. line-height: 26px;
  119. margin-bottom: 25px;
  120. .item-exp{
  121. color: rgba(231, 0, 18, 0.85);
  122. }
  123. .item-main{
  124. position: relative;
  125. .item-icon{
  126. position: absolute;
  127. left: 0;
  128. top: 7px;
  129. }
  130. .item-txt{
  131. padding-left: 20px;
  132. }
  133. }
  134. .item-table{
  135. margin: 15px 0;
  136. }
  137. }
  138. }
  139. }
  140. </style>