robotRanking.vue 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885
  1. <template>
  2. <div class="robotRanking flex-col">
  3. <s-header :name="$t('robotRanking.machineSalesRanking')" :noback="true"></s-header>
  4. <div class="box1 flex-col">
  5. <div class="box3 flex-col">
  6. <div class="main1 flex-col">
  7. <div class="mod1 flex-col">
  8. <div class="block1 flex-col justify-between">
  9. <div class="section1 flex-row justify-between">
  10. <div class="ImageText1 flex-col">
  11. <div class="group4 flex-row justify-between">
  12. <div class="layer3 flex-col"></div>
  13. <div class="TextGroup1 flex-col">
  14. <span class="word3">{{
  15. $t("robotRanking.machineSalesRanking")
  16. }}</span>
  17. </div>
  18. </div>
  19. </div>
  20. <div @click="noticeClk" class="l-flex-RC">
  21. <img class="label2 o-mr-5" src="@/assets/device/searchIcon.png" />
  22. <span class="txt3">{{ $t("robotRanking.rankMethod") }}</span>
  23. </div>
  24. </div>
  25. <img class="img1" referrerpolicy="no-referrer"
  26. src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8947935ab81635fdedd8124b11e305eef66286421b69c84fef22233014a3fa9a" />
  27. </div>
  28. </div>
  29. <div class="l-f l-flex-e o-plr-15">
  30. <span class="robotLabelName l-in c-text-13" style="color: #404d74">{{ $t("robotRanking.dailySalesRanking")
  31. }}:</span>
  32. <kTabs @tabclk="(e) => tabclk(e, 'day')" :tabList="tabDayList"></kTabs>
  33. </div>
  34. <div v-if="!totalNoData('day')" ref="dayChartBox" class="mod3 flex-col"></div>
  35. <kNoData v-else></kNoData>
  36. <div class="groove"></div>
  37. <div class="l-f l-flex-e o-plr-15">
  38. <span class="robotLabelName l-in o-mr-6 c-text-13" style="color: #404d74">{{
  39. $t("robotRanking.salesRankingThisWeek") }}:</span>
  40. <kTabs @tabclk="(e) => tabclk(e, 'week')" :tabList="tabWeekList"></kTabs>
  41. </div>
  42. <div v-if="!totalNoData('week')" ref="weekChartBox" class="mod5 flex-col"></div>
  43. <kNoData v-else></kNoData>
  44. <div class="groove"></div>
  45. <div class="l-f l-flex-e o-plr-15">
  46. <span class="robotLabelName l-in o-mr-6 c-text-13" style="color: #404d74">{{
  47. $t("robotRanking.salesRankingThisMonth") }}:</span>
  48. <kTabs @tabclk="(e) => tabclk(e, 'month')" :tabList="tabMonthList"></kTabs>
  49. </div>
  50. <div v-if="!totalNoData('month')" ref="monthChartBox" class="mod9 flex-col"></div>
  51. <kNoData v-else></kNoData>
  52. <div class="groove"></div>
  53. <div class="l-f l-flex-e o-plr-15">
  54. <span class="robotLabelName l-in o-mr-6 c-text-13" style="color: #404d74">{{
  55. $t("robotRanking.salesRankingThisYear") }}:</span>
  56. <kTabs @tabclk="(e) => tabclk(e, 'year')" :tabList="tabYearList"></kTabs>
  57. </div>
  58. <div v-if="!totalNoData('year')" ref="yearChartBox" class="mod11 flex-col"></div>
  59. <kNoData v-else></kNoData>
  60. <div class="groove"></div>
  61. </div>
  62. </div>
  63. </div>
  64. <!-- 筛选弹窗 -->
  65. <kDialog :dialogTitle="$t('subLedgerManage.search.title')" :confirmBtnTxt="$t('subLedgerManage.search.screen')"
  66. ref="kDialogRef" @confirmclk="confirmClk">
  67. <template #content>
  68. <div class="cust_vantBorder">
  69. <!-- <van-field @click-input="busiInpClk" readonly clearable v-model="searchForm.businessName"
  70. :placeholder="$t('subLedgerManage.search.busiPlaceholder')" :label="$t('subLedgerManage.search.business')">
  71. <template #right-icon>
  72. <div class="l-flex-RC">
  73. <van-icon v-if="searchForm.businessName" @click="searchForm.businessName = ''" class="o-mr-6"
  74. name="clear" />
  75. <van-icon @click="busiInpClk" name="arrow-down" />
  76. </div>
  77. </template>
  78. </van-field> -->
  79. <van-field @click-input="changeTypeInpClk" readonly clearable v-model="searchForm.changeTypeName"
  80. :placeholder="$t('robotRanking.changeTypePlace')" :label="$t('robotRanking.changeType')">
  81. <template #right-icon>
  82. <div class="l-flex-RC">
  83. <van-icon v-if="searchForm.changeTypeName" @click="
  84. searchForm.changeTypeName = '';
  85. searchForm.changeType = '';
  86. " class="o-mr-6" name="clear" />
  87. <van-icon @click="changeTypeInpClk" name="arrow-down" />
  88. </div>
  89. </template>
  90. </van-field>
  91. <van-field @click-input="machineTypeInpClk" readonly clearable v-model="searchForm.machineTypeName"
  92. :placeholder="$t('robotRanking.machineTypePlace')" :label="$t('robotRanking.machineType')">
  93. <template #right-icon>
  94. <div class="l-flex-RC">
  95. <van-icon v-if="searchForm.machineTypeName" @click="
  96. searchForm.machineTypeName = '';
  97. searchForm.machineType = '';
  98. " class="o-mr-6" name="clear" />
  99. <van-icon @click="machineTypeInpClk" name="arrow-down" />
  100. </div>
  101. </template>
  102. </van-field>
  103. <van-field v-if="isAdmin()" @click-input="companyTypeInpClk" readonly clearable
  104. v-model="searchForm.companyTypeName" :placeholder="$t('robotRanking.companyTypePlaceholder')"
  105. :label="$t('robotRanking.companyTypeLabel')">
  106. <template #right-icon>
  107. <div class="l-flex-RC">
  108. <van-icon v-if="searchForm.companyTypeName" @click="
  109. searchForm.companyTypeName = '';
  110. searchForm.companyType = '';
  111. " class="o-mr-6" name="clear" />
  112. <van-icon @click="companyTypeInpClk" name="arrow-down" />
  113. </div>
  114. </template>
  115. </van-field>
  116. </div>
  117. </template>
  118. </kDialog>
  119. <!-- 商家选择框 -->
  120. <van-popup v-model:show="busiPopShow" position="bottom">
  121. <van-picker :title="$t('subLedgerManage.search.busiPlaceholder')" :columns="busiPopList"
  122. :columns-field-names="busiPopFieldName" @confirm="busiPopConfirm" @cancel="busiPopShow = false" />
  123. </van-popup>
  124. <!-- 统计方式弹窗 -->
  125. <van-popup v-model:show="changeTypeShow" position="bottom">
  126. <van-picker :default-index="chgTypeDefaIdx" :title="$t('robotRanking.changeTypePlace')" :columns="changeTypePopList"
  127. :columns-field-names="yearPopFieldName" @confirm="changeTypePopConfirm" @cancel="changeTypeShow = false" />
  128. </van-popup>
  129. <!-- 设备类型弹窗 -->
  130. <van-popup v-model:show="machineTypeShow" position="bottom">
  131. <van-picker :default-index="maTypeDefaIdx" :title="$t('robotRanking.machineTypePlace')"
  132. :columns="machineTypePopList" :columns-field-names="yearPopFieldName" @confirm="machineTypePopConfirm"
  133. @cancel="machineTypeShow = false" />
  134. </van-popup>
  135. <!-- 公司平台弹窗 -->
  136. <van-popup v-model:show="companyTypeShow" position="bottom">
  137. <van-picker :default-index="maTypeDefaIdx" :title="$t('robotRanking.companyTypePlaceholder')"
  138. :columns="companyTypePopList" :columns-field-names="yearPopFieldName" @confirm="companyTypePopConfirm"
  139. @cancel="companyTypeShow = false" />
  140. </van-popup>
  141. <!-- 日的日期选择弹窗 -->
  142. <van-calendar @confirm="calendarDayConfirm" v-model:show="dayShow" color="#2c87c8" :min-date="minDate"
  143. :show-confirm="false" />
  144. <!-- 周的日期选择弹窗 -->
  145. <van-calendar @confirm="(e) => {
  146. calendarWeekOrMonConfirm(e, 1);
  147. }
  148. " v-model:show="weekShow" :allow-same-day="true" color="#2c87c8" :min-date="minDate" type="range" />
  149. <!-- 月的日期选择弹窗 -->
  150. <van-calendar @confirm="(e) => {
  151. calendarWeekOrMonConfirm(e, 2);
  152. }
  153. " v-model:show="monthShow" :allow-same-day="true" color="#2c87c8" :min-date="minDate" type="range" />
  154. <!-- 年的日期选择弹窗 -->
  155. <van-popup v-model:show="yearShow" position="bottom">
  156. <van-picker :title="$t('robotRanking.yearPopTitle')" :columns="yearPopList" :columns-field-names="yearPopFieldName"
  157. @confirm="yearPopConfirm" @cancel="yearShow = false" />
  158. </van-popup>
  159. <nav-bar></nav-bar>
  160. </div>
  161. </template>
  162. <script>
  163. // 导入无数据组件
  164. import kNoData from "../components/commom/kNoData/index.vue";
  165. import { onMounted, ref, reactive, computed, nextTick } from "vue";
  166. import sHeader from "../components/SimpleHeader";
  167. import navBar from "../components/NavBar";
  168. import { getRankingList } from "../service/robotRanking";
  169. import { getLoginUser, styleUrl } from "../common/js/utils";
  170. import kTabs from "../components/commom/kTabs/index.vue";
  171. import kDialog from "../components/commom/kDialog/index.vue";
  172. import moment from "moment";
  173. import { Toast } from "vant";
  174. import { useI18n } from "vue-i18n";
  175. export default {
  176. setup() {
  177. // 引入语言
  178. const { t } = useI18n();
  179. // 日周月年的数据
  180. const totalObj = reactive({
  181. dayData: {},
  182. weekData: {},
  183. monthData: {},
  184. yearData: {},
  185. });
  186. // 日周月年图表没有数据
  187. const totalNoData = computed(() => (idx) => {
  188. let dataObj;
  189. switch (idx) {
  190. case "day":
  191. dataObj = totalObj.dayData;
  192. break;
  193. case "week":
  194. dataObj = totalObj.weekData;
  195. break;
  196. case "month":
  197. dataObj = totalObj.monthData;
  198. break;
  199. case "year":
  200. dataObj = totalObj.yearData;
  201. break;
  202. }
  203. if (!dataObj || dataObj?.categories?.length === 0) {
  204. return true;
  205. }
  206. return false;
  207. });
  208. // 统计方式弹窗
  209. const changeTypeInpClk = () => {
  210. changeTypeShow.value = true;
  211. };
  212. // 是否管理员
  213. const isAdmin = () => { return (user && user.type === 0); }
  214. // 公司平台弹窗
  215. const companyTypeInpClk = () => {
  216. companyTypeShow.value = true;
  217. };
  218. // 设备类型弹窗
  219. const machineTypeInpClk = () => {
  220. machineTypeShow.value = true;
  221. };
  222. const changeTypeShow = ref(false);
  223. const machineTypeShow = ref(false);
  224. const companyTypeShow = ref(false);
  225. // 默认选中
  226. const chgTypeDefaIdx = ref(1);
  227. const maTypeDefaIdx = ref("");
  228. const changeTypePopList = [
  229. {
  230. name: t("robotRanking.patternStatistics"),
  231. id: 1,
  232. },
  233. {
  234. name: t("robotRanking.salesStatistics"),
  235. id: 0,
  236. },
  237. ];
  238. const machineTypePopList = [
  239. {
  240. name: t("robotRanking.whole"),
  241. id: "",
  242. },
  243. {
  244. name: t("robotRanking.MG"),
  245. id: "0",
  246. },
  247. {
  248. name: t("robotRanking.POP"),
  249. id: "1",
  250. },
  251. ];
  252. const companyTypePopList = [
  253. {
  254. name: t("robotRanking.whole"),
  255. id: "",
  256. },
  257. {
  258. name: t("robotRanking.sz"),
  259. id: "0",
  260. },
  261. {
  262. name: t("robotRanking.sc"),
  263. id: "1",
  264. },
  265. ];
  266. const changeTypePopConfirm = (e) => {
  267. searchForm.changeType = e.id;
  268. searchForm.changeTypeName = e.name;
  269. changeTypeShow.value = false;
  270. };
  271. const machineTypePopConfirm = (e) => {
  272. searchForm.machineType = e.id;
  273. searchForm.machineTypeName = e.name;
  274. machineTypeShow.value = false;
  275. };
  276. const companyTypePopConfirm = (e) => {
  277. searchForm.companyType = e.id;
  278. searchForm.companyTypeName = e.name;
  279. companyTypeShow.value = false;
  280. };
  281. // 年的日期选择弹窗
  282. // 点击确定
  283. const yearPopConfirm = (e) => {
  284. // console.log("e的值是11", e);
  285. const year = e.id;
  286. const startDate =
  287. moment().year(year).startOf("year").format("YYYY-MM-DD") + " 00:00:00";
  288. const endDate =
  289. moment().year(year).endOf("year").format("YYYY-MM-DD") + " 23:59:59";
  290. getEquipRankList("year", startDate, endDate);
  291. yearShow.value = false;
  292. };
  293. // 获取当前年前4年后1年
  294. let yearPopList = [];
  295. for (let i = -1; i < 5; i++) {
  296. const year = moment().subtract(i, "years").format("YYYY");
  297. yearPopList.push({
  298. name: year,
  299. id: year,
  300. });
  301. }
  302. const yearPopFieldName = reactive({
  303. text: "name",
  304. value: "id",
  305. });
  306. const yearShow = ref(false);
  307. const currentDate = ref(new Date());
  308. const yearFormatter = (type, val) => {
  309. if (type === "year") {
  310. return val;
  311. }
  312. return val;
  313. };
  314. // 周和月的日期选择弹窗
  315. const weekShow = ref(false);
  316. const monthShow = ref(false);
  317. const calendarWeekOrMonConfirm = (e, idx) => {
  318. const startDate = e[0];
  319. const endDate = e[1];
  320. let weekOrMont = "month";
  321. // 如果是周计算开始和结束日期相差多少天,因为周不能超过7天
  322. if (idx === 1) {
  323. weekOrMont = "week";
  324. const differDays = moment(endDate).diff(moment(startDate), "days");
  325. if (differDays >= 7) {
  326. Toast(t("robotRanking.seleWeekDateRangeNotSeveDays"));
  327. return;
  328. }
  329. }
  330. const startTime = moment(e[0]).format("YYYY-MM-DD") + " 00:00:00";
  331. const endTime = moment(e[1]).format("YYYY-MM-DD") + " 23:59:59";
  332. getEquipRankList(weekOrMont, startTime, endTime);
  333. if (idx === 1) {
  334. weekShow.value = false;
  335. } else {
  336. monthShow.value = false;
  337. }
  338. };
  339. // 日的日期选择弹窗
  340. // 日历选择触发
  341. const calendarDayConfirm = (e) => {
  342. const startDate = moment(e).format("YYYY-MM-DD") + " 00:00:00";
  343. const endDate = moment(e).format("YYYY-MM-DD") + " 23:59:59";
  344. getEquipRankList("day", startDate, endDate);
  345. dayShow.value = false;
  346. };
  347. // 最小日期选择
  348. const minDate = new Date(2018, 1, 1);
  349. const dayShow = ref(false);
  350. // 日,周,月,年的tab栏数据
  351. const tabDayList = ref([
  352. {
  353. name: t("robotRanking.today"),
  354. icon: "",
  355. id: 1,
  356. },
  357. {
  358. name: t("robotRanking.yesterday"),
  359. icon: "",
  360. id: 2,
  361. },
  362. {
  363. name: t("robotRanking.other"),
  364. icon: "arrow-down",
  365. id: 3,
  366. },
  367. ]);
  368. const tabWeekList = ref([
  369. {
  370. name: t("robotRanking.thisWeek"),
  371. icon: "",
  372. id: 1,
  373. },
  374. {
  375. name: t("robotRanking.lastWeek"),
  376. icon: "",
  377. id: 2,
  378. },
  379. {
  380. name: t("robotRanking.other"),
  381. icon: "arrow-down",
  382. id: 3,
  383. },
  384. ]);
  385. const tabMonthList = ref([
  386. {
  387. name: t("robotRanking.thisMonth"),
  388. icon: "",
  389. id: 1,
  390. },
  391. {
  392. name: t("robotRanking.lastMonth"),
  393. icon: "",
  394. id: 2,
  395. },
  396. {
  397. name: t("robotRanking.other"),
  398. icon: "arrow-down",
  399. id: 3,
  400. },
  401. ]);
  402. const tabYearList = ref([
  403. {
  404. name: t("robotRanking.thisYear"),
  405. icon: "",
  406. id: 1,
  407. },
  408. {
  409. name: t("robotRanking.lastYear"),
  410. icon: "",
  411. id: 2,
  412. },
  413. {
  414. name: t("robotRanking.other"),
  415. icon: "arrow-down",
  416. id: 3,
  417. },
  418. ]);
  419. // 默认进来的时间
  420. const defaultTime = reactive({
  421. // 今日
  422. todayStart: moment().format("YYYY-MM-DD") + " 00:00:00",
  423. todayEnd: moment().format("YYYY-MM-DD") + " 23:59:59",
  424. // 昨日
  425. colastdayStart:
  426. moment()
  427. .day(moment().day() - 1)
  428. .format("YYYY-MM-DD") + " 00:00:00",
  429. colastdayEnd:
  430. moment()
  431. .day(moment().day() - 1)
  432. .format("YYYY-MM-DD") + " 23:59:59",
  433. // 这周
  434. weekStart: moment().weekday(1).format("YYYY-MM-DD") + " 00:00:00",
  435. weekEnd: moment().weekday(7).format("YYYY-MM-DD") + " 23:59:59",
  436. // 上周
  437. lastWeekStart: moment().week(moment().week() - 1).startOf('week').add(1, 'days').format("YYYY-MM-DD") + " 00:00:00",
  438. // moment()
  439. // .week(moment().week() - 1)
  440. // .startOf("week")
  441. // .format("YYYY-MM-DD") + " 00:00:00",
  442. lastWeekEnd: moment().week(moment().week() - 1).endOf('week').add(1, 'days').format("YYYY-MM-DD") + " 23:59:59",
  443. // moment()
  444. // .week(moment().week() - 1)
  445. // .endOf("week")
  446. // .format("YYYY-MM-DD") + " 23:59:59",
  447. // 这个月
  448. monthStart: moment().startOf("month").format("YYYY-MM-DD") + " 00:00:00",
  449. monthEnd: moment().endOf("month").format("YYYY-MM-DD") + " 23:59:59",
  450. // 上个月
  451. lastmonthStart:
  452. moment()
  453. .month(moment().month() - 1)
  454. .startOf("month")
  455. .format("YYYY-MM-DD") + " 00:00:00",
  456. lastmonthEnd:
  457. moment()
  458. .month(moment().month() - 1)
  459. .endOf("month")
  460. .format("YYYY-MM-DD") + " 23:59:59",
  461. // 今年
  462. yearStart: moment().startOf("year").format("YYYY-MM-DD") + " 00:00:00",
  463. yearEnd: moment().endOf("year").format("YYYY-MM-DD") + " 23:59:59",
  464. // 上年
  465. lastYearStart:
  466. moment()
  467. .year(moment().year() - 1)
  468. .startOf("year")
  469. .format("YYYY-MM-DD") + " 00:00:00",
  470. lastYearEnd:
  471. moment()
  472. .year(moment().year() - 1)
  473. .endOf("year")
  474. .format("YYYY-MM-DD") + " 23:59:59",
  475. });
  476. // 点击tab
  477. const tabclk = (e, type) => {
  478. let startDate = "";
  479. let endDate = "";
  480. switch (type) {
  481. case "day":
  482. switch (e.name) {
  483. case 0:
  484. startDate = defaultTime.todayStart;
  485. endDate = defaultTime.todayEnd;
  486. break;
  487. case 1:
  488. startDate = defaultTime.colastdayStart;
  489. endDate = defaultTime.colastdayEnd;
  490. break;
  491. case 2:
  492. // 打开日历弹窗
  493. dayShow.value = true;
  494. break;
  495. }
  496. break;
  497. case "week":
  498. switch (e.name) {
  499. case 0:
  500. startDate = defaultTime.weekStart;
  501. endDate = defaultTime.weekEnd;
  502. break;
  503. case 1:
  504. startDate = defaultTime.lastWeekStart;
  505. endDate = defaultTime.lastWeekEnd;
  506. break;
  507. case 2:
  508. // 打开周的日期选择弹窗
  509. weekShow.value = true;
  510. break;
  511. }
  512. break;
  513. case "month":
  514. switch (e.name) {
  515. case 0:
  516. startDate = defaultTime.monthStart;
  517. endDate = defaultTime.monthEnd;
  518. break;
  519. case 1:
  520. startDate = defaultTime.lastmonthStart;
  521. endDate = defaultTime.lastmonthEnd;
  522. break;
  523. case 2:
  524. // 打开月的日期选择弹窗
  525. monthShow.value = true;
  526. break;
  527. }
  528. break;
  529. case "year":
  530. switch (e.name) {
  531. case 0:
  532. startDate = defaultTime.yearStart;
  533. endDate = defaultTime.yearEnd;
  534. break;
  535. case 1:
  536. startDate = defaultTime.lastYearStart;
  537. endDate = defaultTime.lastYearEnd;
  538. break;
  539. case 2:
  540. // 打开年的日期弹窗
  541. yearShow.value = true;
  542. break;
  543. }
  544. break;
  545. }
  546. // 如果是点击其他,不用请求
  547. if (e.name !== 2) {
  548. // 获取日、周、月、年的排行数据
  549. getEquipRankList(type, startDate, endDate);
  550. }
  551. };
  552. const changeType = ref(0);
  553. const companyType = ref(""); // 公司平台
  554. const machineType = ref(""); // 设备类型
  555. let chartObj = {
  556. day: null,
  557. week: null,
  558. month: null,
  559. year: null,
  560. };
  561. // 获取日、周、月、年的排行数据
  562. const getEquipRankList = (chartType, startDate, endDate) => {
  563. let param = {
  564. adminId: user.id,
  565. ifForeign: user.ifForeign,
  566. changeType: changeType.value, //必填,默认为一0:销售额统计,1:花型统计
  567. companyType: companyType.value,
  568. machineType: machineType.value,
  569. chartType,
  570. startDate,
  571. endDate,
  572. };
  573. getRankingList(param).then(async (res) => {
  574. const { data } = res;
  575. switch (chartType) {
  576. case "day":
  577. totalObj.dayData = data.data;
  578. // console.log("日返回值", data);
  579. break;
  580. case "week":
  581. totalObj.weekData = data.data;
  582. // console.log("周返回值", data);
  583. break;
  584. case "month":
  585. totalObj.monthData = data.data;
  586. // console.log("月返回值", data);
  587. break;
  588. case "year":
  589. totalObj.yearData = data.data;
  590. // console.log("年返回值", data);
  591. break;
  592. }
  593. // 有数据返回则处理
  594. if (data.code && data.data) {
  595. // echarts的配置
  596. const chartOption = {
  597. tooltip: {
  598. trigger: "axis",
  599. axisPointer: {
  600. type: "shadow",
  601. },
  602. },
  603. // 固定屏幕显示多少个,其余的滑动
  604. dataZoom: [
  605. // {
  606. // type: 'slider',
  607. // xAxisIndex: 0,
  608. // filterMode: 'none',
  609. // // 开始的值
  610. // startValue: null,
  611. // // 结束的值
  612. // endValue: null,
  613. // // 锁定滑动的区域
  614. // // zoomLock:true,
  615. // },
  616. {
  617. type: "inside",
  618. xAxisIndex: 0,
  619. filterMode: "none",
  620. startValue: null,
  621. endValue: null,
  622. zoomLock: true,
  623. },
  624. ],
  625. grid: {
  626. left: "3%",
  627. right: "4%",
  628. bottom: "10%",
  629. containLabel: true,
  630. },
  631. legend: {
  632. bottom: 0,
  633. right: 10,
  634. itemWidth: 10,
  635. itemHeight: 10,
  636. icon: "rect",
  637. },
  638. yAxis: { type: "value" },
  639. xAxis: {
  640. type: "category",
  641. axisLabel: {
  642. rotate: 45,
  643. },
  644. data: [],
  645. },
  646. series: [],
  647. };
  648. await nextTick();
  649. let chartBox;
  650. switch (chartType) {
  651. case "day":
  652. chartBox = dayChartBox.value;
  653. break;
  654. case "week":
  655. chartBox = weekChartBox.value;
  656. break;
  657. case "month":
  658. chartBox = monthChartBox.value;
  659. break;
  660. case "year":
  661. chartBox = yearChartBox.value;
  662. break;
  663. }
  664. if (chartBox) {
  665. const dayChartOption = Object.assign({}, chartOption);
  666. dayChartOption.xAxis.data = data.data.categories;
  667. dayChartOption.series = [
  668. {
  669. ...data.data.series[0],
  670. type: "bar",
  671. itemStyle: { color: "#ddae27" },
  672. name: t("home.productNum"),
  673. label: {
  674. show: true,
  675. position: "top",
  676. },
  677. },
  678. {
  679. ...data.data.series[1],
  680. type: "bar",
  681. itemStyle: { color: "#2c87c8" },
  682. name: t("home.salesAmount"),
  683. label: {
  684. show: true,
  685. position: "top",
  686. },
  687. },
  688. ];
  689. dayChartOption.dataZoom[0]["startValue"] =
  690. data.data.categories[data.data.categories.length - 5];
  691. dayChartOption.dataZoom[0]["endValue"] =
  692. data.data.categories[data.data.categories.length - 1];
  693. // 解决resize不起作用,配合onMounted里的方法使用
  694. switch (chartType) {
  695. case "day":
  696. chartObj.day = window.echarts.init(chartBox, null, {
  697. renderer: "canvas",
  698. useDirtyRect: false,
  699. });
  700. chartObj.day && chartObj.day.setOption(dayChartOption);
  701. break;
  702. case "week":
  703. chartObj.week = window.echarts.init(chartBox, null, {
  704. renderer: "canvas",
  705. useDirtyRect: false,
  706. });
  707. chartObj.week && chartObj.week.setOption(dayChartOption);
  708. break;
  709. case "month":
  710. chartObj.month = window.echarts.init(chartBox, null, {
  711. renderer: "canvas",
  712. useDirtyRect: false,
  713. });
  714. chartObj.month && chartObj.month.setOption(dayChartOption);
  715. break;
  716. case "year":
  717. chartObj.year = window.echarts.init(chartBox, null, {
  718. renderer: "canvas",
  719. useDirtyRect: false,
  720. });
  721. chartObj.year && chartObj.year.setOption(dayChartOption);
  722. break;
  723. }
  724. }
  725. }
  726. });
  727. };
  728. const user = getLoginUser();
  729. // 日、周、月、年的图表
  730. const dayChartBox = ref();
  731. const weekChartBox = ref();
  732. const monthChartBox = ref();
  733. const yearChartBox = ref();
  734. // 初始化页面获取列表
  735. onMounted(async () => {
  736. // 加载样式
  737. styleUrl('robotRanking');
  738. // 默认筛选选中
  739. searchForm.changeTypeName = t("robotRanking.salesStatistics");
  740. searchForm.changeType = 0;
  741. searchForm.companyTypeName = t("robotRanking.whole");
  742. searchForm.machineTypeName = t("robotRanking.whole");
  743. // 查询是否有订单数据权限
  744. const isOrderData = user.menuCodeList.some((item) => {
  745. return item === "M4";
  746. })
  747. // 如果是type为admin或者商家或者是有订单数据权限M4的子商家才可以查看
  748. if (user.type === 0 || user.type === 2 || isOrderData) {
  749. init();
  750. }
  751. window.addEventListener("resize", () => {
  752. chartObj.day && chartObj.day.resize();
  753. chartObj.week && chartObj.week.resize();
  754. chartObj.month && chartObj.month.resize();
  755. chartObj.year && chartObj.year.resize();
  756. });
  757. });
  758. // 刚进页面获取
  759. const init = () => {
  760. // 获取日的排行数据
  761. getEquipRankList("day", defaultTime.todayStart, defaultTime.todayEnd);
  762. // 获取周的排行数据
  763. getEquipRankList("week", defaultTime.weekStart, defaultTime.weekEnd);
  764. // 获取月的排行数据
  765. getEquipRankList("month", defaultTime.monthStart, defaultTime.monthEnd);
  766. // 获取年的排行数据
  767. getEquipRankList("year", defaultTime.yearStart, defaultTime.yearEnd);
  768. };
  769. const searchForm = reactive({
  770. businessName: "",
  771. changeTypeName: "",
  772. changeType: "",
  773. machineTypeName: "",
  774. machineType: "",
  775. companyTypeName: "",
  776. companyType: ""
  777. });
  778. const kDialogRef = ref(null);
  779. const busiPopShow = ref(false);
  780. const busiPopList = reactive([
  781. {
  782. name: "商户1",
  783. id: "1",
  784. },
  785. {
  786. name: "商户2",
  787. id: "2",
  788. },
  789. ]);
  790. const busiPopFieldName = reactive({
  791. text: "name",
  792. value: "id",
  793. });
  794. // 点击筛选
  795. const noticeClk = () => {
  796. kDialogRef.value.openDialog();
  797. };
  798. // 点击右侧按钮
  799. const confirmClk = () => {
  800. if (searchForm.changeType === "") {
  801. changeType.value = 1;
  802. } else {
  803. changeType.value = searchForm.changeType;
  804. }
  805. companyType.value = searchForm.companyType;
  806. machineType.value = searchForm.machineType;
  807. init();
  808. };
  809. // 筛选弹窗
  810. // 点击商家输入框
  811. const busiInpClk = () => {
  812. // console.log(111111111);
  813. busiPopShow.value = true;
  814. };
  815. const busiPopConfirm = (e) => {
  816. // console.log("e的值是", e);
  817. busiPopShow.value = false;
  818. searchForm.businessName = e.name;
  819. };
  820. const busiPopCancel = () => {
  821. busiPopShow.value = false;
  822. };
  823. return {
  824. dayChartBox,
  825. weekChartBox,
  826. monthChartBox,
  827. yearChartBox,
  828. tabclk,
  829. tabDayList,
  830. tabWeekList,
  831. tabMonthList,
  832. tabYearList,
  833. noticeClk,
  834. kDialogRef,
  835. busiInpClk,
  836. busiPopShow,
  837. busiPopConfirm,
  838. busiPopList,
  839. busiPopFieldName,
  840. busiPopCancel,
  841. confirmClk,
  842. searchForm,
  843. dayShow,
  844. minDate,
  845. calendarDayConfirm,
  846. weekShow,
  847. monthShow,
  848. calendarWeekOrMonConfirm,
  849. yearFormatter,
  850. currentDate,
  851. yearShow,
  852. yearPopList,
  853. yearPopConfirm,
  854. yearPopFieldName,
  855. changeTypeShow,
  856. changeTypePopList,
  857. changeTypePopConfirm,
  858. changeTypeInpClk,
  859. companyTypeInpClk,
  860. companyTypePopConfirm,
  861. companyTypePopList,
  862. companyTypeShow,
  863. machineTypeInpClk,
  864. machineTypePopConfirm,
  865. machineTypePopList,
  866. machineTypeShow,
  867. totalNoData,
  868. maTypeDefaIdx,
  869. chgTypeDefaIdx,
  870. isAdmin,
  871. };
  872. },
  873. components: { sHeader, navBar, kTabs, kDialog, kNoData },
  874. };
  875. </script>
  876. <style lang="less" scoped></style>