intoStore_body.html 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345
  1. <!DOCTYPE html>
  2. <html class="">
  3. <!--STATUS OK-->
  4. <head>
  5. <meta name="referrer" content="always" />
  6. <meta charset='utf-8' />
  7. <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  8. <meta http-equiv="x-dns-prefetch-control" content="on">
  9. <meta name="description" content="">
  10. <meta name="format-detection" content="telephone=no" />
  11. <link rel="stylesheet" type="text/css" href="css/vant-ui.css" />
  12. <link rel="stylesheet" type="text/css" href="css/iconfont.css">
  13. <link rel="stylesheet" type="text/css" href="css/main.css" />
  14. <script src="js/vue.js"></script>
  15. <script src="js/vant-ui.js"></script>
  16. <script src="js/main.js"></script>
  17. <title></title>
  18. </head>
  19. <style>
  20. .menu .item p {
  21. font-size: 0.26rem;
  22. }
  23. .line1 {
  24. width: 300px;
  25. overflow: hidden;
  26. text-overflow: ellipsis;
  27. }
  28. .jinhuoRank li {
  29. height: 2rem
  30. }
  31. </style>
  32. <body>
  33. <div id="app" v-cloak>
  34. <!-- <div class="leiji flex a-center j-center" style="background-color : #00a0ea;color : #fff;font-size : 0.4rem;padding : 0.2rem 0">
  35. 进货总量:
  36. <h4> {{ totalInfo }} </h4>
  37. </div> -->
  38. <div class="jinhuo-page page mescroll-touch-y mescroll" id="mescroll">
  39. <ul class="info-content" v-for="item in totalList">
  40. <li class="info">
  41. <div class="info-title"><span>{{title.year}}年{{title.month}}月统计</span></div>
  42. <div class="info-container">
  43. <ul class="box-container">
  44. <li>
  45. <div class="circle-text">
  46. <div><span>{{item.numTask}}</span>条</div>
  47. </div>
  48. <div class="circle-title">签约任务</div>
  49. </li>
  50. <li>
  51. <div class="circle-text">
  52. <div><span>{{item.scanNum}}</span>条</div>
  53. </div>
  54. <div class="circle-title">已完成</div>
  55. </li>
  56. <li>
  57. <div class="circle-text">
  58. <div><span>{{item.leftNum}}</span>条</div>
  59. </div>
  60. <div class="circle-title">待完成</div>
  61. </li>
  62. </ul>
  63. <ul class="progress-container">
  64. <li>
  65. <div class="progress-bg"><span class='progress-num'
  66. :style="'width:'+gressbar*100+'%'">{{(item.scanNum/item.numTask*100).toFixed(2)}}%</span>
  67. </div>
  68. <div class="progress-title">当月进度</div>
  69. </li>
  70. </ul>
  71. </div>
  72. </li>
  73. <li class="info">
  74. <div class="info-title"><span>第{{title.quarter}}季度统计</span></div>
  75. <div class="info-container">
  76. <ul class="box-container">
  77. <li>
  78. <div class="circle-text">
  79. <div><span>{{dataInfo.NUM_TASK}}</span>条</div>
  80. </div>
  81. <div class="circle-title">签约任务</div>
  82. </li>
  83. <li>
  84. <div class="circle-text">
  85. <div><span>{{dataInfo.SCAN_NUM}}</span>条</div>
  86. </div>
  87. <div class="circle-title">已完成</div>
  88. </li>
  89. <li>
  90. <div class="circle-text">
  91. <div><span>{{dataInfo.LEFT_NUM}}</span>条</div>
  92. </div>
  93. <div class="circle-title">待完成</div>
  94. </li>
  95. </ul>
  96. <ul class="progress-container">
  97. <li>
  98. <div class="progress-bg"><span class='progress-num'
  99. :style="'width:'+gressbar2*100+'%'">{{(dataInfo.SCAN_NUM/dataInfo.NUM_TASK*100).toFixed(2)}}%</span></div>
  100. <div class="progress-title">当季进度</div>
  101. </li>
  102. </ul>
  103. </div>
  104. </li>
  105. <li class="info">
  106. <div class="info-title"><span>我的信息</span><span>进货总量:{{totalInfo}}条</span></div>
  107. <div class="info-container">
  108. <ul class="box-container row-box ">
  109. <li>
  110. <span class="info-label">经销品牌:</span><span
  111. class="info-text">{{ item.brandName }}</span>
  112. </li>
  113. <li>
  114. <span class="info-label">线上订货:</span><span class="info-text">{{item.ocount}}条</span>
  115. </li>
  116. <li>
  117. <span class="info-label">代理商:</span><span class="info-text">{{msgAgent}}</span>
  118. </li>
  119. </ul>
  120. </div>
  121. </li>
  122. </ul>
  123. </div>
  124. <!-- <div class="view flex col" >
  125. <div class="page router fx1" id="mescroll">
  126. <ul class="jinhuoRank">
  127. <li class="flex a-center" v-for="item in totalList">
  128. <!-- <div class="image"><img :src="item.storeImageUrl">
  129. </div> -->
  130. <!-- <div class="info">
  131. <div class="info-title"><span>2020年9月统计</span></div> -->
  132. <!-- <div class="info-content">
  133. <ul class="box-container">
  134. <li>
  135. <div><span>30</span>条</div>
  136. <div>签约任务</div>
  137. </li>
  138. <li>
  139. <div><span>30</span>条</div>
  140. <div>已完成</div>
  141. </li>
  142. <li>
  143. <div><span>30</span>条</div>
  144. <div>待完成</div>
  145. </li>
  146. </ul>
  147. <ul class="progress-container">
  148. <li>
  149. <div><span>50%</span></div>
  150. <div>当月进度</div>
  151. </li>
  152. </ul>
  153. </div> -->
  154. <!-- <p>
  155. {{ item.storeName }}
  156. </p>
  157. <p>
  158. 电话:{{ item.storePhone }}
  159. </p>
  160. <p>
  161. 经销品牌:{{ item.brandName }}
  162. </p>
  163. <p>
  164. 本月进货:{{ item.scanNum }}条
  165. </p>
  166. <div style="display:flex">
  167. <p style="flex : 1">
  168. 签约任务:{{ item.numTask }}条
  169. </p>
  170. <p style="flex : 1">
  171. 线上订货数量:{{ item.ocount }}条
  172. </p>
  173. </div>
  174. <div style="display:flex">
  175. <p style="flex : 1">
  176. 本月待完成:{{ item.leftNum }}条
  177. </p>
  178. <p style="flex : 1">
  179. 本月已完成:{{ item.scanNum }}条
  180. </p>
  181. </div>
  182. </div>
  183. </li>
  184. </ul>
  185. </div> -->
  186. <!-- </div> -->
  187. </div>
  188. </body>
  189. </html>
  190. <link rel="stylesheet" href="./mescroll/mescroll.min.css">
  191. <script type="text/javascript" src="./mescroll/mescroll.min.js"></script>
  192. <script type="text/javascript" src="../script/api.js"></script>
  193. <script type="text/javascript" src="../script/httpRequest.js"></script>
  194. <script type="text/javascript" src="../script/vue_plugins.js"></script>
  195. <script type="text/javascript">
  196. apiready = function () {
  197. new Vue({
  198. el: '#app',
  199. data: {
  200. list: [],
  201. userid: '',
  202. dataInfo:{},
  203. frist: 1,
  204. current: 1,
  205. size: 10,
  206. totalPages: 1,
  207. totalInfo: {}, // 进货分析中的库存总量
  208. totalList: [], // 进货分析的数据列表
  209. msgAgent: "",//经销商
  210. },
  211. computed: {
  212. title: function () {
  213. var title = {
  214. year: 0,
  215. month: 0,
  216. quarter: 0
  217. };
  218. title.year = new Date().getFullYear();
  219. title.month = new Date().getMonth() + 1;
  220. switch (title.month) {
  221. case 1: case 2: case 3:
  222. title.quarter = 1;
  223. break;
  224. case 4: case 5: case 6:
  225. title.quarter = 2;
  226. break;
  227. case 7: case 8: case 9:
  228. title.quarter = 3;
  229. break;
  230. default:
  231. title.quarter = 4
  232. };
  233. return title;
  234. },
  235. gressbar:function(){
  236. var gressbar=0
  237. gressbar=this.totalList[0].scanNum/this.totalList[0].numTask
  238. if(gressbar>1){
  239. return gressbar=1
  240. }else{
  241. return gressbar
  242. }
  243. },
  244. gressbar2:function(){
  245. var gressbar=0
  246. gressbar2=this.dataInfo.SCAN_NUM/this.dataInfo.NUM_TASK
  247. if(gressbar2>1){
  248. return gressbar2=1
  249. }else{
  250. return gressbar2
  251. }
  252. }
  253. },
  254. methods: {
  255. init: function () {
  256. var _this = this;
  257. this.userid = $api.getStorage('userid');
  258. this.selectQuarter();
  259. this.getStoreList_jiage();
  260. },
  261. // 查询门店进货分析 -- 贾哥
  262. getStoreList_jiage: function (mescroll) {
  263. var data = "?retailerId=" + this.userid + "&current=" + this.current + "&size=" + this.size, _this = this;
  264. this.$getadd("getStoreIntoListU", data, function (ret) {
  265. if (ret.code == 0 || ret.code == '0') {
  266. _this.totalInfo = ret.total;
  267. _this.msgAgent = ret.msgAgent;
  268. _this.totalList = _this.current == 1 ? ret.page.records : _this.totalList.concat(ret.page.records);
  269. _this.totalPages = ret.page.pages;
  270. if (mescroll) {
  271. mescroll.endSuccess(_this.size, true);
  272. }
  273. if (_this.frist == 1) {
  274. _this.$nextTick(function () {
  275. _this.configs();
  276. })
  277. }
  278. }
  279. })
  280. },
  281. /**
  282. * 查询门店进货分析
  283. */
  284. getStoreList: function (mescroll) {
  285. var _this = this, url = "getStoreIntoListU";
  286. var data = "?retailerId=" + this.userid
  287. this.$getadd(url, data, function (ret) {
  288. if (ret.code == 0 || ret.code == '0') {
  289. _this.totalInfo = ret.count;
  290. _this.totalList = _this.current == 1 ? ret.Data : _this.totalList.concat(ret.Data);
  291. _this.totalPages = ret.Data.pageCount;
  292. if (mescroll) {
  293. mescroll.endSuccess(_this.size, true);
  294. }
  295. if (_this.frist == 1) {
  296. _this.$nextTick(function () {
  297. _this.configs();
  298. })
  299. }
  300. }
  301. })
  302. },
  303. selectQuarter: function () {
  304. var data = {
  305. "url": "json",
  306. "type": "body",
  307. "storeId": this.userid,
  308. }
  309. _this = this,
  310. url = "selectQuarter";
  311. this.$post(url, data, function (ret) {
  312. if(ret.code==0){
  313. _this.dataInfo=ret.data
  314. }
  315. })
  316. },
  317. configs: function () {
  318. var _this = this;
  319. this.frist = 2;
  320. this.configDownAndPull("mescroll", function (mescroll) {
  321. _this.current = 1;
  322. _this.getStoreList_jiage(mescroll);
  323. }, function (mescroll) {
  324. if (_this.current < _this.totalPages) {
  325. _this.current = _this.current + 1;
  326. _this.getStoreList_jiage(mescroll, 1);
  327. } else {
  328. mescroll.endSuccess(_this.size, false);
  329. }
  330. })
  331. },
  332. },
  333. mounted: function () {
  334. this.init();
  335. }
  336. })
  337. }
  338. </script>