explainXsbz.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  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 style="text-align:center;padding: 20px;">
  54. <a-button type="default" @click="closePage">关闭</a-button>
  55. </div>
  56. </div>
  57. </a-card>
  58. </template>
  59. <script>
  60. export default {
  61. data () {
  62. return {
  63. columns: [
  64. { title: '1月', dataIndex: 'january', align: 'center' },
  65. { title: '2月', dataIndex: 'february', align: 'center' },
  66. { title: '3月', dataIndex: 'march', align: 'center' },
  67. { title: '4月', dataIndex: 'april', align: 'center' },
  68. { title: '5月', dataIndex: 'may', align: 'center' },
  69. { title: '6月', dataIndex: 'june', align: 'center' },
  70. { title: '7月', dataIndex: 'july', align: 'center' },
  71. { title: '8月', dataIndex: 'august', align: 'center' },
  72. { title: '9月', dataIndex: 'september', align: 'center' },
  73. { title: '10月', dataIndex: 'october', align: 'center' },
  74. { title: '11月', dataIndex: 'november', align: 'center' },
  75. { title: '12月', dataIndex: 'december', align: 'center' }
  76. ],
  77. dataSource: [
  78. { january: 55, february: 53, march: 54, april: 56, may: 58, june: 57, july: 52, august: 52, september: 56, october: 52, november: 53, december: 59 }
  79. ]
  80. }
  81. },
  82. methods:{
  83. closePage(){
  84. this.$emit('close')
  85. }
  86. }
  87. }
  88. </script>
  89. <style lang="less">
  90. .explainXsbz-warp{
  91. .explainXsbz-cont{
  92. width: 960px;
  93. margin: 0 auto;
  94. p{
  95. margin: 0;
  96. }
  97. .explain-tit{
  98. font-size: 18px;
  99. font-weight: bold;
  100. text-align: center;
  101. margin: 20px 0 30px;
  102. }
  103. .explain-txt{
  104. font-size: 13px;
  105. color: rgba(0,0,0,0.85);
  106. }
  107. .margin-b-30{
  108. margin-bottom: 30px;
  109. }
  110. .sub-tit{
  111. margin-bottom: 10px;
  112. .tit-icon{
  113. vertical-align: text-bottom;
  114. margin-right: 5px;
  115. }
  116. .txt{
  117. font-size: 16px;
  118. color: rgba(0, 21, 41, 1);
  119. display: inline-block;
  120. margin: 0;
  121. }
  122. }
  123. .item-cont{
  124. font-size: 13px;
  125. padding-left: 23px;
  126. line-height: 26px;
  127. margin-bottom: 25px;
  128. .item-exp{
  129. color: rgba(231, 0, 18, 0.85);
  130. }
  131. .item-main{
  132. position: relative;
  133. .item-icon{
  134. position: absolute;
  135. left: 0;
  136. top: 7px;
  137. }
  138. .item-txt{
  139. padding-left: 20px;
  140. }
  141. }
  142. .item-table{
  143. margin: 15px 0;
  144. }
  145. }
  146. }
  147. }
  148. </style>