robotRanking.vue 27 KB

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