index.vue 33 KB

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