index.vue 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038
  1. <template>
  2. <div class="app-container">
  3. <div v-if="showOld">
  4. <div style="margin-bottom: 15px">
  5. <el-date-picker
  6. v-model="uploadDate"
  7. style="width: 240px"
  8. value-format="yyyy-MM-dd"
  9. format="yyyy-MM-dd"
  10. type="daterange"
  11. range-separator="-"
  12. start-placeholder="开始日期"
  13. end-placeholder="结束日期"
  14. :picker-options="pickerOptions"
  15. ></el-date-picker>
  16. <el-button
  17. type="primary"
  18. icon="el-icon-search"
  19. size="mini"
  20. @click="handleQuery"
  21. style="margin-left: 15px"
  22. >搜索</el-button
  23. >
  24. </div>
  25. <el-row class="top-sum" :gutter="24">
  26. <el-col :span="12">
  27. <el-card shadow="never" class="card-show" v-loading="totalOneLoading">
  28. <div style="display: flex; width: 100%; margin-bottom: 15px">
  29. <div style="flex: 1">
  30. <p class="p-title">订单总数</p>
  31. <p class="p-main">{{ order.orderNum }}</p>
  32. </div>
  33. <div style="flex: 1">
  34. <p class="p-title">有效订单数</p>
  35. <p class="p-main">{{ order.validOrderNUm }}</p>
  36. </div>
  37. <div style="flex: 1">
  38. <p class="p-title">失效订单数</p>
  39. <p class="p-main">{{ order.invalidOrderNUm }}</p>
  40. </div>
  41. </div>
  42. <div style="display: flex; width: 100%">
  43. <div style="margin-right: 20px">
  44. <p class="p-main-data">
  45. 数据对比:<i
  46. :style="ratioData.orderTotalRatio > 0 ? 'color:red' : 'color:green'"
  47. >{{ (ratioData.orderTotalRatio * 100).toFixed(2) + "%" }}</i
  48. >
  49. </p>
  50. </div>
  51. <div
  52. style="margin-right: 20px"
  53. :style="dateType == 0 ? '' : 'visibility: hidden'"
  54. >
  55. <p class="p-main-data">
  56. 周同比:<i :style="order.yearRatio > 0 ? 'color:red' : 'color:green'">{{
  57. (order.yearRatio * 100).toFixed(2) + "%"
  58. }}</i>
  59. </p>
  60. </div>
  61. <div :style="dateType == 0 ? '' : 'visibility: hidden'">
  62. <p class="p-main-data">
  63. 日环比:<i :style="order.ringRatio > 0 ? 'color:red' : 'color:green'"
  64. >{{ (order.ringRatio * 100).toFixed(2) + "%" }}
  65. </i>
  66. </p>
  67. </div>
  68. </div>
  69. <!-- ringRatio: 0, -->
  70. </el-card>
  71. </el-col>
  72. <el-col :span="12">
  73. <el-card shadow="never" class="card-show" v-loading="totalTwoLoading">
  74. <div style="display: flex; width: 100%; margin-bottom: 15px">
  75. <div style="flex: 1">
  76. <p class="p-title">订单金额</p>
  77. <p class="p-main">
  78. {{ priceFormat(regimentalPromotion.regimentalPromotionAmount) }}
  79. </p>
  80. </div>
  81. <div style="flex: 1">
  82. <p class="p-title">累计货款基数</p>
  83. <p class="p-main">
  84. {{ priceFormat(regimentalPromotion.personData) }}
  85. </p>
  86. </div>
  87. <div style="flex: 1">
  88. <p class="p-title">预估服务费</p>
  89. <p class="p-main">
  90. {{ priceFormat(regimentalPromotion.complete) }}
  91. </p>
  92. </div>
  93. </div>
  94. <div style="display: flex; width: 100%">
  95. <div style="margin-right: 20px">
  96. <p class="p-main-data">
  97. 数据对比:<i
  98. :style="ratioData.orderAmountRatio > 0 ? 'color:red' : 'color:green'"
  99. >{{ (ratioData.orderAmountRatio * 100).toFixed(2) + "%" }}</i
  100. >
  101. </p>
  102. </div>
  103. <div
  104. style="margin-right: 20px"
  105. :style="dateType == 0 ? '' : 'visibility: hidden'"
  106. >
  107. <p class="p-main-data">
  108. 周同比:
  109. <i
  110. :style="
  111. regimentalPromotion.yearRatio > 0 ? 'color:red' : 'color:green'
  112. "
  113. >{{ (regimentalPromotion.yearRatio * 100).toFixed(2) + "%" }}
  114. </i>
  115. </p>
  116. </div>
  117. <div :style="dateType == 0 ? '' : 'visibility: hidden'">
  118. <p class="p-main-data">
  119. 日环比:<i
  120. :style="
  121. regimentalPromotion.ringRatio > 0 ? 'color:red' : 'color:green'
  122. "
  123. >{{ (regimentalPromotion.ringRatio * 100).toFixed(2) + "%" }}</i
  124. >
  125. </p>
  126. </div>
  127. </div>
  128. <!-- ringRatio: 0, -->
  129. </el-card>
  130. </el-col>
  131. <el-col :span="12" style="margin-top: 24px">
  132. <el-card shadow="never" class="card-show" v-loading="totalThreeLoading">
  133. <div style="display: flex; width: 100%; margin-bottom: 15px">
  134. <div style="flex: 1">
  135. <p class="p-title">达人总数</p>
  136. <p class="p-main">{{ taskNumber.noStarted }}</p>
  137. </div>
  138. <div style="flex: 1">
  139. <p class="p-title">发货数</p>
  140. <p class="p-main">{{ taskNumber.complete }}</p>
  141. </div>
  142. <div style="flex: 1">
  143. <p class="p-title">发货率</p>
  144. <p class="p-main">
  145. {{
  146. !!taskNumber.deliveryRadio
  147. ? (taskNumber.deliveryRadio * 100).toFixed(2) + "%"
  148. : "-"
  149. }}
  150. </p>
  151. </div>
  152. </div>
  153. <div style="display: flex; width: 100%; visibility: hidden">
  154. <div style="margin-right: 20px">
  155. <p class="p-main-data">周同比:{{ order.yearRatio }}</p>
  156. </div>
  157. <div>
  158. <p class="p-main-data">日环比:{{ order.ringRatio }}</p>
  159. </div>
  160. </div>
  161. <!-- ringRatio: 0, -->
  162. </el-card>
  163. </el-col>
  164. </el-row>
  165. <el-row class="top-sum" :gutter="24" style="margin-top: 24px">
  166. <el-col :span="24">
  167. <el-card
  168. shadow="never"
  169. class="card-show"
  170. style="width: 100%; min-height: 700px"
  171. v-loading="echartsLoading"
  172. >
  173. <div slot="header" class="clearfix">
  174. <span style="font-size: 16px; font-weight: bold; float: left"
  175. >订单统计</span
  176. >
  177. <el-select
  178. v-model="echartsType"
  179. placeholder="请选择类型"
  180. clearable
  181. style="width: 240px; float: right; padding: 3px 0"
  182. @change="changeEchartsType"
  183. >
  184. <el-option label="订单数" value="orderNum" />
  185. <el-option label="有效订单数" value="validOrderNum" />
  186. <el-option label="订单金额" value="orderAmount" />
  187. <el-option label="货款基数" value="baseAmount" />
  188. <el-option label="发货数" value="deliveryNum" />
  189. </el-select>
  190. </div>
  191. <!-- <el-date-picker
  192. v-model="uploadDateEcharts"
  193. style="width: 240px; float: left"
  194. value-format="yyyy-MM-dd"
  195. format="yyyy-MM-dd"
  196. type="daterange"
  197. range-separator="-"
  198. start-placeholder="开始日期"
  199. end-placeholder="结束日期"
  200. :picker-options="pickerOptions"
  201. @change="getAllEchartsData"
  202. ></el-date-picker> -->
  203. <div
  204. id="echart"
  205. ref="echart"
  206. style="height: 500px; width: 100%; margin-top: 50px"
  207. ></div>
  208. </el-card>
  209. </el-col>
  210. </el-row>
  211. <el-row class="top-sum" :gutter="24" style="margin-top: 24px">
  212. <el-col :span="12">
  213. <el-card
  214. shadow="never"
  215. class="card-show"
  216. style="width: 100%; min-height: 700px"
  217. >
  218. <div slot="header" class="clearfix">
  219. <span style="font-size: 16px; font-weight: bold; float: left"
  220. >商品排行榜</span
  221. >
  222. <el-button
  223. style="float: right; padding: 3px 0"
  224. type="text"
  225. @click="toOrderList"
  226. >更多>></el-button
  227. >
  228. </div>
  229. <el-table v-loading="orderRankLoading" :data="orderRankList">
  230. <!-- <el-table-column type="selection" width="55" align="center" /> -->
  231. <el-table-column type="index" :index="indexMethod"> </el-table-column>
  232. <el-table-column label="商品名称" align="center" prop="itemTitle">
  233. <template slot-scope="scope">
  234. <a
  235. :title="scope.row.itemTitle"
  236. @click="toOrderDetail(scope.row)"
  237. style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden"
  238. >
  239. {{ scope.row.itemTitle }}
  240. </a>
  241. </template>
  242. </el-table-column>
  243. <el-table-column label="订单数" align="center" prop="orderNum">
  244. </el-table-column>
  245. <el-table-column label="有效订单" align="center" prop="validOrderNUm">
  246. </el-table-column>
  247. <el-table-column label="有效率" align="center" prop="validRadio">
  248. <template slot-scope="scope">
  249. {{
  250. scope.row.validRadio
  251. ? (scope.row.validRadio * 100).toFixed(2) + "%"
  252. : "-"
  253. }}
  254. </template>
  255. </el-table-column>
  256. <el-table-column label="发货数" align="center" prop="deliveryNum">
  257. </el-table-column>
  258. <el-table-column label="发货率" align="center" prop="deliveryRadio">
  259. <template slot-scope="scope">
  260. {{
  261. scope.row.deliveryRadio
  262. ? (scope.row.deliveryRadio * 100).toFixed(2) + "%"
  263. : "-"
  264. }}
  265. </template>
  266. </el-table-column>
  267. <el-table-column label="日涨幅" align="center" prop="radio">
  268. <template slot-scope="scope">
  269. <i :style="scope.row.radio > 0 ? 'color:red' : 'color:green'">{{
  270. scope.row.radio ? (scope.row.radio * 100).toFixed(2) + "%" : "-"
  271. }}</i>
  272. </template>
  273. </el-table-column>
  274. </el-table>
  275. <pagination
  276. v-show="orderTotal > 0"
  277. :total="orderTotal"
  278. :page.sync="queryParams.pageNum"
  279. :limit.sync="queryParams.pageSize"
  280. @pagination="getIndexOrderRank"
  281. layout="total, prev, pager, next, jumper"
  282. :small="true"
  283. />
  284. </el-card>
  285. </el-col>
  286. <el-col :span="12">
  287. <el-card
  288. shadow="never"
  289. class="card-show"
  290. style="width: 100%; min-height: 700px"
  291. >
  292. <div slot="header" class="clearfix">
  293. <span style="font-size: 16px; font-weight: bold; float: left"
  294. >达人排行榜</span
  295. >
  296. <el-button
  297. style="float: right; padding: 3px 0"
  298. type="text"
  299. @click="toPersonList"
  300. >更多>></el-button
  301. >
  302. </div>
  303. <el-table v-loading="promoterLoading" :data="promoterRankList">
  304. <!-- <el-table-column type="selection" width="55" align="center" /> -->
  305. <el-table-column type="index" :index="indexMethodTwo" width="70">
  306. </el-table-column>
  307. <el-table-column label="达人名称" align="center" prop="promoterNickName">
  308. <template slot-scope="scope">
  309. <a
  310. :title="scope.row.promoterNickName"
  311. @click="toPersonDetail(scope.row)"
  312. style="
  313. width: 200px;
  314. text-overflow: ellipsis;
  315. white-space: nowrap;
  316. overflow: hidden;
  317. text-align: left;
  318. "
  319. >
  320. {{ scope.row.promoterNickName }}
  321. </a>
  322. </template>
  323. </el-table-column>
  324. <el-table-column label="订单数" align="center" prop="orderNum">
  325. </el-table-column>
  326. <el-table-column label="有效订单" align="center" prop="validOrderNUm">
  327. </el-table-column>
  328. <el-table-column label="有效率" align="center" prop="validRadio">
  329. <template slot-scope="scope">
  330. {{
  331. scope.row.validRadio
  332. ? (scope.row.validRadio * 100).toFixed(2) + "%"
  333. : "-"
  334. }}
  335. </template>
  336. </el-table-column>
  337. <el-table-column label="日涨幅" align="center" prop="radio">
  338. <template slot-scope="scope">
  339. <i :style="scope.row.radio > 0 ? 'color:red' : 'color:green'">{{
  340. scope.row.radio ? (scope.row.radio * 100).toFixed(2) + "%" : "-"
  341. }}</i>
  342. </template>
  343. </el-table-column>
  344. </el-table>
  345. <pagination
  346. v-show="promoterTotal > 0"
  347. :total="promoterTotal"
  348. :page.sync="queryParams.promoterPageNum"
  349. :limit.sync="queryParams.pageSize"
  350. layout="total, prev, pager, next, jumper"
  351. @pagination="getIndexPromoterRank"
  352. :small="true"
  353. />
  354. </el-card>
  355. </el-col>
  356. </el-row>
  357. </div>
  358. <staging v-else />
  359. </div>
  360. </template>
  361. <script>
  362. import {
  363. getIndexOrderInfo, //获取订单数据
  364. getIndexServiceAmountInfo, //获取服务费数据
  365. getIndexAmountInfo, //获取金额数据
  366. getIndexPromoterRank, //获取达人排行
  367. getIndexOrderRank, //获取商品排行
  368. getIndexStatistics, //echarts图表
  369. getTimeRatio, //时间段对比
  370. } from "@/api/index";
  371. import staging from "./staging.vue";
  372. var echarts = require("echarts");
  373. export default {
  374. name: "Index",
  375. components: {
  376. staging,
  377. },
  378. data() {
  379. return {
  380. showOld: false,
  381. // 遮罩层
  382. loading: true,
  383. // 选中数组
  384. ids: [],
  385. // 非单个禁用
  386. single: true,
  387. // 非多个禁用
  388. multiple: true,
  389. // 显示搜索条件
  390. showSearch: true,
  391. // 总条数
  392. total: 0,
  393. // 字典表格数据
  394. typeList: [],
  395. // 弹出层标题
  396. title: "",
  397. // 是否显示弹出层
  398. open: false,
  399. // 分配销售
  400. openAllocation: false,
  401. // 选择的销售id
  402. saleId: undefined,
  403. // 销售列表
  404. saleList: [],
  405. // 分配销售确定loading
  406. confirmLoadingSale: false,
  407. // 汇总数据获取
  408. taskNumber: {
  409. complete: 0,
  410. deliveryRadio: 0,
  411. noStarted: 0,
  412. },
  413. order: {
  414. orderNum: 0,
  415. validOrderNUm: 0,
  416. invalidOrderNUm: 0,
  417. ringRatio: 0,
  418. yearRatio: 0,
  419. },
  420. regimentalPromotion: {
  421. regimentalPromotionAmount: 0,
  422. personData: 0,
  423. complete: 0,
  424. ringRatio: 0,
  425. yearRatio: 0,
  426. },
  427. ratioData: {
  428. orderAmountRatio: 0,
  429. orderTotalRatio: 0,
  430. },
  431. userId: undefined,
  432. dateType: 0,
  433. uploadDate: [new Date(), new Date()],
  434. uploadDateEcharts: [new Date(), new Date()],
  435. orderRankList: [],
  436. orderRankLoading: false,
  437. orderTotal: 0,
  438. queryParams: { pageNum: 1, pageSize: 10, promoterPageNum: 1 },
  439. promoterRankList: [],
  440. promoterLoading: false,
  441. promoterTotal: 0,
  442. totalOneLoading: false,
  443. totalTwoLoading: false,
  444. totalThreeLoading: false,
  445. echartsType: "orderNum",
  446. echartsLoading: false,
  447. pickerOptions: {
  448. shortcuts: [
  449. {
  450. text: "今天",
  451. onClick(picker) {
  452. const end = new Date();
  453. const start = new Date();
  454. picker.$emit("pick", [start, end]);
  455. },
  456. },
  457. {
  458. text: "昨天",
  459. onClick(picker) {
  460. const end = new Date();
  461. const start = new Date();
  462. start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
  463. end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
  464. picker.$emit("pick", [start, end]);
  465. },
  466. },
  467. {
  468. text: "最近三天",
  469. onClick(picker) {
  470. const end = new Date();
  471. const start = new Date();
  472. start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
  473. picker.$emit("pick", [start, end]);
  474. },
  475. },
  476. {
  477. text: "最近一周",
  478. onClick(picker) {
  479. const end = new Date();
  480. const start = new Date();
  481. start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
  482. picker.$emit("pick", [start, end]);
  483. },
  484. },
  485. {
  486. text: "最近一个月",
  487. onClick(picker) {
  488. const end = new Date();
  489. const start = new Date();
  490. start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
  491. picker.$emit("pick", [start, end]);
  492. },
  493. },
  494. {
  495. text: "最近三个月",
  496. onClick(picker) {
  497. const end = new Date();
  498. const start = new Date();
  499. start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
  500. picker.$emit("pick", [start, end]);
  501. },
  502. },
  503. ],
  504. },
  505. };
  506. },
  507. filters: {},
  508. created() {
  509. this.userId = this.$store.getters.userId;
  510. let date = new Date();
  511. let y = date.getFullYear();
  512. let MM = date.getMonth() + 1;
  513. MM = MM < 10 ? "0" + MM : MM;
  514. let dd = date.getDate();
  515. dd = dd < 10 ? "0" + dd : dd;
  516. this.uploadDate = [`${y}-${MM}-${dd}`, `${y}-${MM}-${dd}`];
  517. let start = new Date();
  518. let end = new Date();
  519. let ey = end.getFullYear();
  520. let eMM = end.getMonth() + 1;
  521. eMM = eMM < 10 ? "0" + eMM : eMM;
  522. let edd = end.getDate();
  523. edd = edd < 10 ? "0" + edd : edd;
  524. start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
  525. let sy = start.getFullYear();
  526. let sMM = start.getMonth() + 1;
  527. sMM = sMM < 10 ? "0" + sMM : sMM;
  528. let sdd = start.getDate();
  529. sdd = sdd < 10 ? "0" + sdd : sdd;
  530. this.uploadDateEcharts = [`${sy}-${sMM}-${sdd}`, `${ey}-${eMM}-${edd}`];
  531. this.showOld =
  532. this.$store.getters.roles[0] == "courtshipManager" ||
  533. this.$store.getters.roles[0] == "courtship" ||
  534. this.$store.getters.roles[0] == "bdManager" ||
  535. this.$store.getters.roles[0] == "bd" ||
  536. this.$store.getters.roles[0] == "association" ||
  537. this.$store.getters.roles[0] == "associationManager" ||
  538. this.$store.getters.roles[0] == "supplyChainAdmin"
  539. ? false
  540. : true;
  541. },
  542. mounted() {
  543. if (this.showOld) {
  544. this.getIndexOrderInfo();
  545. this.getIndexServiceAmountInfo();
  546. this.getIndexAmountInfo();
  547. this.getIndexPromoterRank();
  548. this.getIndexOrderRank();
  549. this.getIndexStatistics();
  550. this.getTimeRatio();
  551. }
  552. },
  553. methods: {
  554. getAllEchartsData(e) {
  555. if (e.length == 2) {
  556. this.getIndexStatistics();
  557. } else {
  558. this.$message({
  559. message: "请选择时间",
  560. type: "error",
  561. });
  562. }
  563. },
  564. changeEchartsType(e) {
  565. console.log(e);
  566. if (!!e) {
  567. this.getIndexStatistics();
  568. } else {
  569. this.$message({
  570. message: "请选择类型",
  571. type: "error",
  572. });
  573. }
  574. },
  575. getIndexStatistics() {
  576. this.echartsLoading = true;
  577. getIndexStatistics({
  578. type: this.echartsType,
  579. orderStartDate: this.uploadDate[0],
  580. orderEndDate: this.uploadDate[1],
  581. }).then((response) => {
  582. this.echartsLoading = false;
  583. this.initEchart("echart", this.handlerEchartOption(response, this.echartsType));
  584. });
  585. },
  586. /** 获取echart的值 */
  587. initEchart(idName, optionName) {
  588. let that = this;
  589. const chart = this.$refs[idName];
  590. if (chart) {
  591. const myChart = echarts.init(document.getElementById(idName));
  592. myChart.setOption(optionName);
  593. window.addEventListener("resize", function () {
  594. that.clientWidth = document.documentElement.clientWidth - 224;
  595. myChart.resize();
  596. });
  597. }
  598. },
  599. /** echarts数据展示 订单统计*/
  600. handlerEchartOption(data, typeShow) {
  601. var typeName;
  602. switch (typeShow) {
  603. case "orderNum":
  604. typeName = "订单数";
  605. break;
  606. case "validOrderNum":
  607. typeName = "有效订单数";
  608. break;
  609. case "orderAmount":
  610. typeName = "订单金额";
  611. break;
  612. case "baseAmount":
  613. typeName = "货款基数";
  614. break;
  615. case "deliveryNum":
  616. typeName = "发货数";
  617. break;
  618. }
  619. let option = {
  620. noDataLoadingOption: {
  621. text: "暂无数据",
  622. effect: "bubble",
  623. effectOption: {
  624. effect: {
  625. n: 0,
  626. },
  627. },
  628. },
  629. tooltip: {
  630. trigger: "axis",
  631. // formatter: function(params) {
  632. // if(typeShow == 'play_duration_3s'){
  633. // return `${params[0].marker}${params[0].name}<br/>${params[0].seriesName}:${params[0].value}%`
  634. // }else{
  635. // return `${params[0].marker}${params[0].name}<br/>${params[0].seriesName}:${params[0].value}`
  636. // }
  637. // },
  638. },
  639. grid: {
  640. left: "3%",
  641. right: "4%",
  642. bottom: "3%",
  643. containLabel: true,
  644. },
  645. legend: {
  646. icon: "circle",
  647. top: "5%",
  648. right: "5%",
  649. itemWidth: 6,
  650. itemGap: 20,
  651. textStyle: {
  652. color: "#556677",
  653. },
  654. },
  655. xAxis: {
  656. type: "category",
  657. data: data.map((item) => {
  658. return item.date;
  659. }),
  660. boundaryGap: false,
  661. // 坐标轴线
  662. axisLine: {
  663. show: false,
  664. lineStyle: {
  665. color: "#999",
  666. },
  667. },
  668. // 分割线
  669. splitLine: {
  670. show: true,
  671. lineStyle: {
  672. type: "dashed",
  673. color: "#e5e5e5",
  674. },
  675. },
  676. },
  677. yAxis: {
  678. type: "value",
  679. axisLine: {
  680. show: false,
  681. lineStyle: {
  682. color: "#999",
  683. },
  684. },
  685. splitLine: {
  686. lineStyle: {
  687. type: "dashed",
  688. color: "#e5e5e5",
  689. },
  690. },
  691. },
  692. series: [
  693. {
  694. smooth: true,
  695. name: typeName,
  696. type: "line",
  697. stack: "总量",
  698. data: data.map((item) => {
  699. return item[typeShow];
  700. }),
  701. symbol: "circle",
  702. symbolSize: 6,
  703. lineStyle: {
  704. normal: {
  705. width: 2,
  706. },
  707. },
  708. itemStyle: {
  709. borderColor: "#ffffff",
  710. borderWidth: 0,
  711. },
  712. },
  713. ],
  714. };
  715. return option;
  716. },
  717. getTimeRatio() {
  718. getTimeRatio(
  719. this.addDateRange({}, this.uploadDate, "orderStartDate", "orderEndDate")
  720. ).then((response) => {
  721. this.ratioData = {
  722. orderAmountRatio: response.orderAmountRatio,
  723. orderTotalRatio: response.orderTotalRatio,
  724. };
  725. });
  726. },
  727. /** 获取订单数据 */
  728. getIndexOrderInfo() {
  729. this.totalOneLoading = true;
  730. getIndexOrderInfo(
  731. this.addDateRange(
  732. { dateType: this.dateType },
  733. this.uploadDate,
  734. "orderStartDate",
  735. "orderEndDate"
  736. )
  737. ).then((response) => {
  738. this.totalOneLoading = false;
  739. this.order = {
  740. orderNum: response.orderTotal.orderNum,
  741. validOrderNUm: response.orderTotal.validOrderNUm,
  742. invalidOrderNUm: response.orderTotal.invalidOrderNUm,
  743. ringRatio: this.dateType == 0 ? response.ratio.ringRatio : 0,
  744. yearRatio: this.dateType == 0 ? response.ratio.yearRatio : 0,
  745. };
  746. });
  747. },
  748. getIndexServiceAmountInfo() {
  749. this.totalThreeLoading = true;
  750. getIndexServiceAmountInfo(
  751. this.addDateRange(
  752. { dateType: this.dateType },
  753. this.uploadDate,
  754. "orderStartDate",
  755. "orderEndDate"
  756. )
  757. ).then((response) => {
  758. this.totalThreeLoading = false;
  759. this.taskNumber = {
  760. complete: response.serviceAmountTotal.deliveryNum,
  761. noStarted: response.serviceAmountTotal.promoterNum,
  762. deliveryRadio: response.serviceAmountTotal.deliveryRadio,
  763. };
  764. });
  765. },
  766. getIndexAmountInfo() {
  767. this.totalTwoLoading = true;
  768. getIndexAmountInfo(
  769. this.addDateRange(
  770. { dateType: this.dateType },
  771. this.uploadDate,
  772. "orderStartDate",
  773. "orderEndDate"
  774. )
  775. ).then((response) => {
  776. this.totalTwoLoading = false;
  777. this.regimentalPromotion = {
  778. regimentalPromotionAmount: response.amountTotal.orderAmount / 100,
  779. personData: response.amountTotal.baseAmount / 100,
  780. complete: response.amountTotal.regimentalPromotionAmount / 100,
  781. ringRatio: this.dateType == 0 ? response.amountRatio.amountRingRatio : 0,
  782. yearRatio: this.dateType == 0 ? response.amountRatio.amountYearRatio : 0,
  783. };
  784. });
  785. },
  786. getIndexPromoterRank() {
  787. this.promoterLoading = true;
  788. getIndexPromoterRank(
  789. this.addDateRange(
  790. {
  791. dateType: this.dateType,
  792. pageNum: this.queryParams.promoterPageNum,
  793. pageSize: 10,
  794. },
  795. this.uploadDate,
  796. "orderStartDate",
  797. "orderEndDate"
  798. )
  799. ).then((response) => {
  800. this.promoterRankList = response.rows;
  801. this.promoterTotal = response.total;
  802. this.promoterLoading = false;
  803. });
  804. },
  805. getIndexOrderRank() {
  806. this.orderRankLoading = true;
  807. getIndexOrderRank(
  808. this.addDateRange(
  809. {
  810. dateType: this.dateType,
  811. pageNum: this.queryParams.pageNum,
  812. pageSize: 10,
  813. },
  814. this.uploadDate,
  815. "orderStartDate",
  816. "orderEndDate"
  817. )
  818. ).then((response) => {
  819. this.orderRankList = response.rows;
  820. this.orderTotal = response.total;
  821. this.orderRankLoading = false;
  822. });
  823. },
  824. indexMethod(index) {
  825. return index + 1 + (this.queryParams.pageNum - 1) * 10;
  826. },
  827. indexMethodTwo(index) {
  828. return index + 1 + (this.queryParams.promoterPageNum - 1) * 10;
  829. },
  830. toOrderDetail(item) {
  831. this.$router.replace({
  832. path: "/supplyChain/goodsDetails",
  833. query: {
  834. id: item.itemId,
  835. name: item.itemTitle,
  836. orderStartDate: this.uploadDate[0],
  837. orderEndDate: this.uploadDate[1],
  838. },
  839. });
  840. },
  841. toOrderList() {
  842. this.$router.replace({
  843. path: "/supplyChain/goods",
  844. });
  845. },
  846. toPersonDetail(item) {
  847. this.$router.replace({
  848. path: "/supplyChain/indexDetails",
  849. query: {
  850. id: item.promoterId,
  851. name: item.promoterNickName,
  852. orderStartDate: this.uploadDate[0],
  853. orderEndDate: this.uploadDate[1],
  854. },
  855. });
  856. },
  857. toPersonList() {
  858. this.$router.replace({
  859. path: "/supplyChain/index",
  860. });
  861. },
  862. handleQuery() {
  863. let date = new Date();
  864. let y = date.getFullYear();
  865. let MM = date.getMonth() + 1;
  866. MM = MM < 10 ? "0" + MM : MM;
  867. let dd = date.getDate();
  868. dd = dd < 10 ? "0" + dd : dd;
  869. if (this.uploadDate.length == 2) {
  870. if (
  871. this.uploadDate[0] == `${y}-${MM}-${dd}` &&
  872. this.uploadDate[1] == `${y}-${MM}-${dd}`
  873. ) {
  874. this.dateType = 0;
  875. } else {
  876. this.dateType = 1;
  877. }
  878. this.queryParams.promoterPageNum = 1;
  879. this.queryParams.pageNum = 1;
  880. this.getIndexOrderInfo();
  881. this.getIndexServiceAmountInfo();
  882. this.getIndexAmountInfo();
  883. this.getIndexPromoterRank();
  884. this.getIndexOrderRank();
  885. this.getIndexStatistics();
  886. this.getTimeRatio();
  887. } else {
  888. this.$message({
  889. message: "请选择时间",
  890. type: "error",
  891. });
  892. }
  893. },
  894. /** 金额格式化 */
  895. priceFormat(num, n) {
  896. n = n || 2;
  897. let symbol = ",";
  898. if (num === null) return num;
  899. if (typeof num !== "number") throw new TypeError("num参数应该是一个number类型");
  900. if (n < 0) throw new Error("参数n不应该小于0");
  901. let hasDot = parseInt(num) != num; //这里检测num是否为小数,true表示小数
  902. let m = n != undefined && n != null ? n : 1;
  903. num =
  904. m == 0
  905. ? num.toFixed(m) + "."
  906. : hasDot
  907. ? n
  908. ? num.toFixed(n)
  909. : num
  910. : num.toFixed(m);
  911. symbol = symbol || ",";
  912. num = num.toString().replace(/(\d)(?=(\d{3})+\.)/g, function (match, p1, p2) {
  913. return p1 + symbol;
  914. });
  915. if (n == 0 || (!hasDot && !n)) {
  916. //如果n为0或者传入的num是整数并且没有指定整数的保留位数,则去掉前面操作中的小数位
  917. num = num.substring(0, num.indexOf("."));
  918. }
  919. return num;
  920. },
  921. },
  922. };
  923. </script>
  924. <style scoped lang="scss">
  925. .top-sum {
  926. margin-bottom: 15px;
  927. ::v-deep .card-show {
  928. text-align: center;
  929. .p-title {
  930. width: 100%;
  931. font-size: 16px;
  932. color: darkgray;
  933. text-align: left;
  934. }
  935. .p-main {
  936. width: 100%;
  937. font-size: 22px;
  938. font-weight: bold;
  939. text-align: left;
  940. }
  941. .p-main-data {
  942. width: 100%;
  943. color: darkgray;
  944. font-size: 14px;
  945. text-align: left;
  946. margin: 0;
  947. }
  948. }
  949. }
  950. ::v-deep .el-form-item__label {
  951. white-space: nowrap;
  952. }
  953. ::v-deep a {
  954. color: #409eff;
  955. display: block;
  956. }
  957. </style>
  958. <style scoped lang="scss">
  959. .home {
  960. blockquote {
  961. padding: 10px 20px;
  962. margin: 0 0 20px;
  963. font-size: 17.5px;
  964. border-left: 5px solid #eee;
  965. }
  966. hr {
  967. margin-top: 20px;
  968. margin-bottom: 20px;
  969. border: 0;
  970. border-top: 1px solid #eee;
  971. }
  972. .col-item {
  973. margin-bottom: 20px;
  974. }
  975. ul {
  976. padding: 0;
  977. margin: 0;
  978. }
  979. font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  980. font-size: 13px;
  981. color: #676a6c;
  982. overflow-x: hidden;
  983. ul {
  984. list-style-type: none;
  985. }
  986. h4 {
  987. margin-top: 0px;
  988. }
  989. h2 {
  990. margin-top: 10px;
  991. font-size: 26px;
  992. font-weight: 100;
  993. }
  994. p {
  995. margin-top: 10px;
  996. b {
  997. font-weight: 700;
  998. }
  999. }
  1000. .update-log {
  1001. ol {
  1002. display: block;
  1003. list-style-type: decimal;
  1004. margin-block-start: 1em;
  1005. margin-block-end: 1em;
  1006. margin-inline-start: 0;
  1007. margin-inline-end: 0;
  1008. padding-inline-start: 40px;
  1009. }
  1010. }
  1011. }
  1012. </style>