|
@@ -1,9 +1,6 @@
|
|
|
<template>
|
|
|
<div class="robotRanking flex-col">
|
|
|
- <s-header
|
|
|
- :name="$t('robotRanking.machineSalesRanking')"
|
|
|
- :noback="true"
|
|
|
- ></s-header>
|
|
|
+ <s-header :name="$t('robotRanking.machineSalesRanking')" :noback="true"></s-header>
|
|
|
<div class="box1 flex-col">
|
|
|
<div class="box3 flex-col">
|
|
|
<div class="main1 flex-col">
|
|
@@ -25,93 +22,48 @@
|
|
|
<span class="txt3">{{ $t("robotRanking.rankMethod") }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <img
|
|
|
- class="img1"
|
|
|
- referrerpolicy="no-referrer"
|
|
|
- src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8947935ab81635fdedd8124b11e305eef66286421b69c84fef22233014a3fa9a"
|
|
|
- />
|
|
|
+ <img class="img1" referrerpolicy="no-referrer"
|
|
|
+ src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8947935ab81635fdedd8124b11e305eef66286421b69c84fef22233014a3fa9a" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="l-f l-flex-e o-plr-15">
|
|
|
- <span class="robotLabelName l-in c-text-13" style="color: #404d74"
|
|
|
- >{{ $t("robotRanking.dailySalesRanking") }}:</span
|
|
|
- >
|
|
|
- <kTabs
|
|
|
- @tabclk="(e) => tabclk(e, 'day')"
|
|
|
- :tabList="tabDayList"
|
|
|
- ></kTabs>
|
|
|
+ <span class="robotLabelName l-in c-text-13" style="color: #404d74">{{ $t("robotRanking.dailySalesRanking")
|
|
|
+ }}:</span>
|
|
|
+ <kTabs @tabclk="(e) => tabclk(e, 'day')" :tabList="tabDayList"></kTabs>
|
|
|
</div>
|
|
|
- <div
|
|
|
- v-if="!totalNoData('day')"
|
|
|
- ref="dayChartBox"
|
|
|
- class="mod3 flex-col"
|
|
|
- ></div>
|
|
|
+ <div v-if="!totalNoData('day')" ref="dayChartBox" class="mod3 flex-col"></div>
|
|
|
<kNoData v-else></kNoData>
|
|
|
<div class="groove"></div>
|
|
|
<div class="l-f l-flex-e o-plr-15">
|
|
|
- <span
|
|
|
- class="robotLabelName l-in o-mr-6 c-text-13"
|
|
|
- style="color: #404d74"
|
|
|
- >{{ $t("robotRanking.salesRankingThisWeek") }}:</span
|
|
|
- >
|
|
|
- <kTabs
|
|
|
- @tabclk="(e) => tabclk(e, 'week')"
|
|
|
- :tabList="tabWeekList"
|
|
|
- ></kTabs>
|
|
|
+ <span class="robotLabelName l-in o-mr-6 c-text-13" style="color: #404d74">{{
|
|
|
+ $t("robotRanking.salesRankingThisWeek") }}:</span>
|
|
|
+ <kTabs @tabclk="(e) => tabclk(e, 'week')" :tabList="tabWeekList"></kTabs>
|
|
|
</div>
|
|
|
- <div
|
|
|
- v-if="!totalNoData('week')"
|
|
|
- ref="weekChartBox"
|
|
|
- class="mod5 flex-col"
|
|
|
- ></div>
|
|
|
+ <div v-if="!totalNoData('week')" ref="weekChartBox" class="mod5 flex-col"></div>
|
|
|
<kNoData v-else></kNoData>
|
|
|
<div class="groove"></div>
|
|
|
<div class="l-f l-flex-e o-plr-15">
|
|
|
- <span
|
|
|
- class="robotLabelName l-in o-mr-6 c-text-13"
|
|
|
- style="color: #404d74"
|
|
|
- >{{ $t("robotRanking.salesRankingThisMonth") }}:</span
|
|
|
- >
|
|
|
- <kTabs
|
|
|
- @tabclk="(e) => tabclk(e, 'month')"
|
|
|
- :tabList="tabMonthList"
|
|
|
- ></kTabs>
|
|
|
+ <span class="robotLabelName l-in o-mr-6 c-text-13" style="color: #404d74">{{
|
|
|
+ $t("robotRanking.salesRankingThisMonth") }}:</span>
|
|
|
+ <kTabs @tabclk="(e) => tabclk(e, 'month')" :tabList="tabMonthList"></kTabs>
|
|
|
</div>
|
|
|
- <div
|
|
|
- v-if="!totalNoData('month')"
|
|
|
- ref="monthChartBox"
|
|
|
- class="mod9 flex-col"
|
|
|
- ></div>
|
|
|
+ <div v-if="!totalNoData('month')" ref="monthChartBox" class="mod9 flex-col"></div>
|
|
|
<kNoData v-else></kNoData>
|
|
|
<div class="groove"></div>
|
|
|
<div class="l-f l-flex-e o-plr-15">
|
|
|
- <span
|
|
|
- class="robotLabelName l-in o-mr-6 c-text-13"
|
|
|
- style="color: #404d74"
|
|
|
- >{{ $t("robotRanking.salesRankingThisYear") }}:</span
|
|
|
- >
|
|
|
- <kTabs
|
|
|
- @tabclk="(e) => tabclk(e, 'year')"
|
|
|
- :tabList="tabYearList"
|
|
|
- ></kTabs>
|
|
|
+ <span class="robotLabelName l-in o-mr-6 c-text-13" style="color: #404d74">{{
|
|
|
+ $t("robotRanking.salesRankingThisYear") }}:</span>
|
|
|
+ <kTabs @tabclk="(e) => tabclk(e, 'year')" :tabList="tabYearList"></kTabs>
|
|
|
</div>
|
|
|
- <div
|
|
|
- v-if="!totalNoData('year')"
|
|
|
- ref="yearChartBox"
|
|
|
- class="mod11 flex-col"
|
|
|
- ></div>
|
|
|
+ <div v-if="!totalNoData('year')" ref="yearChartBox" class="mod11 flex-col"></div>
|
|
|
<kNoData v-else></kNoData>
|
|
|
<div class="groove"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 筛选弹窗 -->
|
|
|
- <kDialog
|
|
|
- :dialogTitle="$t('subLedgerManage.search.title')"
|
|
|
- :confirmBtnTxt="$t('subLedgerManage.search.screen')"
|
|
|
- ref="kDialogRef"
|
|
|
- @confirmclk="confirmClk"
|
|
|
- >
|
|
|
+ <kDialog :dialogTitle="$t('subLedgerManage.search.title')" :confirmBtnTxt="$t('subLedgerManage.search.screen')"
|
|
|
+ ref="kDialogRef" @confirmclk="confirmClk">
|
|
|
<template #content>
|
|
|
<div class="cust_vantBorder">
|
|
|
<!-- <van-field @click-input="busiInpClk" readonly clearable v-model="searchForm.businessName"
|
|
@@ -124,96 +76,67 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
</van-field> -->
|
|
|
- <van-field
|
|
|
- @click-input="changeTypeInpClk"
|
|
|
- readonly
|
|
|
- clearable
|
|
|
- v-model="searchForm.changeTypeName"
|
|
|
- :placeholder="$t('robotRanking.changeTypePlace')"
|
|
|
- :label="$t('robotRanking.changeType')"
|
|
|
- >
|
|
|
+ <van-field @click-input="changeTypeInpClk" readonly clearable v-model="searchForm.changeTypeName"
|
|
|
+ :placeholder="$t('robotRanking.changeTypePlace')" :label="$t('robotRanking.changeType')">
|
|
|
<template #right-icon>
|
|
|
<div class="l-flex-RC">
|
|
|
- <van-icon
|
|
|
- v-if="searchForm.changeTypeName"
|
|
|
- @click="
|
|
|
- searchForm.changeTypeName = '';
|
|
|
- searchForm.changeType = '';
|
|
|
- "
|
|
|
- class="o-mr-6"
|
|
|
- name="clear"
|
|
|
- />
|
|
|
+ <van-icon v-if="searchForm.changeTypeName" @click="
|
|
|
+ searchForm.changeTypeName = '';
|
|
|
+ searchForm.changeType = '';
|
|
|
+ " class="o-mr-6" name="clear" />
|
|
|
<van-icon @click="changeTypeInpClk" name="arrow-down" />
|
|
|
</div>
|
|
|
</template>
|
|
|
</van-field>
|
|
|
+ <van-field v-if="isAdmin()" @click-input="companyTypeInpClk" readonly clearable
|
|
|
+ v-model="searchForm.companyTypeName" :placeholder="$t('robotRanking.companyTypePlaceholder')"
|
|
|
+ :label="$t('robotRanking.companyTypeLabel')">
|
|
|
+ <template #right-icon>
|
|
|
+ <div class="l-flex-RC">
|
|
|
+ <van-icon v-if="searchForm.companyTypeName" @click="
|
|
|
+ searchForm.companyTypeName = '';
|
|
|
+ searchForm.companyType = '';
|
|
|
+ " class="o-mr-6" name="clear" />
|
|
|
+ <van-icon @click="companyTypeInpClk" name="arrow-down" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
</div>
|
|
|
</template>
|
|
|
</kDialog>
|
|
|
<!-- 商家选择框 -->
|
|
|
<van-popup v-model:show="busiPopShow" position="bottom">
|
|
|
- <van-picker
|
|
|
- :title="$t('subLedgerManage.search.busiPlaceholder')"
|
|
|
- :columns="busiPopList"
|
|
|
- :columns-field-names="busiPopFieldName"
|
|
|
- @confirm="busiPopConfirm"
|
|
|
- @cancel="busiPopShow = false"
|
|
|
- />
|
|
|
+ <van-picker :title="$t('subLedgerManage.search.busiPlaceholder')" :columns="busiPopList"
|
|
|
+ :columns-field-names="busiPopFieldName" @confirm="busiPopConfirm" @cancel="busiPopShow = false" />
|
|
|
</van-popup>
|
|
|
<!-- 统计方式弹窗 -->
|
|
|
<van-popup v-model:show="changeTypeShow" position="bottom">
|
|
|
- <van-picker
|
|
|
- :default-index="chgTypeDefaIdx"
|
|
|
- :title="$t('robotRanking.changeTypePlace')"
|
|
|
- :columns="changeTypePopList"
|
|
|
- :columns-field-names="yearPopFieldName"
|
|
|
- @confirm="changeTypePopConfirm"
|
|
|
- @cancel="changeTypeShow = false"
|
|
|
- />
|
|
|
+ <van-picker :default-index="chgTypeDefaIdx" :title="$t('robotRanking.changeTypePlace')" :columns="changeTypePopList"
|
|
|
+ :columns-field-names="yearPopFieldName" @confirm="changeTypePopConfirm" @cancel="changeTypeShow = false" />
|
|
|
+ </van-popup>
|
|
|
+ <!-- 公司平台弹窗 -->
|
|
|
+ <van-popup v-model:show="companyTypeShow" position="bottom">
|
|
|
+ <van-picker :default-index="chgTypeDefaIdx" :title="$t('robotRanking.companyTypePlaceholder')"
|
|
|
+ :columns="companyTypePopList" :columns-field-names="yearPopFieldName" @confirm="companyTypePopConfirm"
|
|
|
+ @cancel="companyTypeShow = false" />
|
|
|
</van-popup>
|
|
|
<!-- 日的日期选择弹窗 -->
|
|
|
- <van-calendar
|
|
|
- @confirm="calendarDayConfirm"
|
|
|
- v-model:show="dayShow"
|
|
|
- color="#2c87c8"
|
|
|
- :min-date="minDate"
|
|
|
- :show-confirm="false"
|
|
|
- />
|
|
|
+ <van-calendar @confirm="calendarDayConfirm" v-model:show="dayShow" color="#2c87c8" :min-date="minDate"
|
|
|
+ :show-confirm="false" />
|
|
|
<!-- 周的日期选择弹窗 -->
|
|
|
- <van-calendar
|
|
|
- @confirm="
|
|
|
- (e) => {
|
|
|
- calendarWeekOrMonConfirm(e, 1);
|
|
|
- }
|
|
|
- "
|
|
|
- v-model:show="weekShow"
|
|
|
- :allow-same-day="true"
|
|
|
- color="#2c87c8"
|
|
|
- :min-date="minDate"
|
|
|
- type="range"
|
|
|
- />
|
|
|
+ <van-calendar @confirm="(e) => {
|
|
|
+ calendarWeekOrMonConfirm(e, 1);
|
|
|
+ }
|
|
|
+ " v-model:show="weekShow" :allow-same-day="true" color="#2c87c8" :min-date="minDate" type="range" />
|
|
|
<!-- 月的日期选择弹窗 -->
|
|
|
- <van-calendar
|
|
|
- @confirm="
|
|
|
- (e) => {
|
|
|
- calendarWeekOrMonConfirm(e, 2);
|
|
|
- }
|
|
|
- "
|
|
|
- v-model:show="monthShow"
|
|
|
- :allow-same-day="true"
|
|
|
- color="#2c87c8"
|
|
|
- :min-date="minDate"
|
|
|
- type="range"
|
|
|
- />
|
|
|
+ <van-calendar @confirm="(e) => {
|
|
|
+ calendarWeekOrMonConfirm(e, 2);
|
|
|
+ }
|
|
|
+ " v-model:show="monthShow" :allow-same-day="true" color="#2c87c8" :min-date="minDate" type="range" />
|
|
|
<!-- 年的日期选择弹窗 -->
|
|
|
<van-popup v-model:show="yearShow" position="bottom">
|
|
|
- <van-picker
|
|
|
- :title="$t('robotRanking.yearPopTitle')"
|
|
|
- :columns="yearPopList"
|
|
|
- :columns-field-names="yearPopFieldName"
|
|
|
- @confirm="yearPopConfirm"
|
|
|
- @cancel="yearShow = false"
|
|
|
- />
|
|
|
+ <van-picker :title="$t('robotRanking.yearPopTitle')" :columns="yearPopList" :columns-field-names="yearPopFieldName"
|
|
|
+ @confirm="yearPopConfirm" @cancel="yearShow = false" />
|
|
|
</van-popup>
|
|
|
<nav-bar></nav-bar>
|
|
|
</div>
|
|
@@ -269,7 +192,14 @@ export default {
|
|
|
const changeTypeInpClk = () => {
|
|
|
changeTypeShow.value = true;
|
|
|
};
|
|
|
+ // 是否管理员
|
|
|
+ const isAdmin = () => { return (user && user.type === 0); }
|
|
|
+ // 公司平台弹窗
|
|
|
+ const companyTypeInpClk = () => {
|
|
|
+ companyTypeShow.value = true;
|
|
|
+ };
|
|
|
const changeTypeShow = ref(false);
|
|
|
+ const companyTypeShow = ref(false);
|
|
|
// 默认选中
|
|
|
const chgTypeDefaIdx = ref(1);
|
|
|
const changeTypePopList = [
|
|
@@ -282,11 +212,31 @@ export default {
|
|
|
id: 0,
|
|
|
},
|
|
|
];
|
|
|
+
|
|
|
+ const companyTypePopList = [
|
|
|
+ {
|
|
|
+ name: t("robotRanking.whole"),
|
|
|
+ id: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: t("robotRanking.sz"),
|
|
|
+ id: "0",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: t("robotRanking.sc"),
|
|
|
+ id: "1",
|
|
|
+ },
|
|
|
+ ];
|
|
|
const changeTypePopConfirm = (e) => {
|
|
|
searchForm.changeType = e.id;
|
|
|
searchForm.changeTypeName = e.name;
|
|
|
changeTypeShow.value = false;
|
|
|
};
|
|
|
+ const companyTypePopConfirm = (e) => {
|
|
|
+ searchForm.companyType = e.id;
|
|
|
+ searchForm.companyTypeName = e.name;
|
|
|
+ companyTypeShow.value = false;
|
|
|
+ };
|
|
|
// 年的日期选择弹窗
|
|
|
// 点击确定
|
|
|
const yearPopConfirm = (e) => {
|
|
@@ -443,18 +393,18 @@ export default {
|
|
|
weekStart: moment().weekday(1).format("YYYY-MM-DD") + " 00:00:00",
|
|
|
weekEnd: moment().weekday(7).format("YYYY-MM-DD") + " 23:59:59",
|
|
|
// 上周
|
|
|
- lastWeekStart:moment().week(moment().week() - 1).startOf('week').add(1,'days').format("YYYY-MM-DD") + " 00:00:00",
|
|
|
- // moment()
|
|
|
- // .week(moment().week() - 1)
|
|
|
- // .startOf("week")
|
|
|
- // .format("YYYY-MM-DD") + " 00:00:00",
|
|
|
-
|
|
|
- lastWeekEnd:moment().week(moment().week() - 1).endOf('week').add(1,'days').format("YYYY-MM-DD") + " 23:59:59",
|
|
|
- // moment()
|
|
|
- // .week(moment().week() - 1)
|
|
|
- // .endOf("week")
|
|
|
- // .format("YYYY-MM-DD") + " 23:59:59",
|
|
|
-
|
|
|
+ lastWeekStart: moment().week(moment().week() - 1).startOf('week').add(1, 'days').format("YYYY-MM-DD") + " 00:00:00",
|
|
|
+ // moment()
|
|
|
+ // .week(moment().week() - 1)
|
|
|
+ // .startOf("week")
|
|
|
+ // .format("YYYY-MM-DD") + " 00:00:00",
|
|
|
+
|
|
|
+ lastWeekEnd: moment().week(moment().week() - 1).endOf('week').add(1, 'days').format("YYYY-MM-DD") + " 23:59:59",
|
|
|
+ // moment()
|
|
|
+ // .week(moment().week() - 1)
|
|
|
+ // .endOf("week")
|
|
|
+ // .format("YYYY-MM-DD") + " 23:59:59",
|
|
|
+
|
|
|
// 这个月
|
|
|
monthStart: moment().startOf("month").format("YYYY-MM-DD") + " 00:00:00",
|
|
|
monthEnd: moment().endOf("month").format("YYYY-MM-DD") + " 23:59:59",
|
|
@@ -561,6 +511,7 @@ export default {
|
|
|
}
|
|
|
};
|
|
|
const changeType = ref(0);
|
|
|
+ const companyType = ref(""); // 公司平台
|
|
|
let chartObj = {
|
|
|
day: null,
|
|
|
week: null,
|
|
@@ -573,9 +524,11 @@ export default {
|
|
|
adminId: user.id,
|
|
|
ifForeign: user.ifForeign,
|
|
|
changeType: changeType.value, //必填,默认为一0:销售额统计,1:花型统计
|
|
|
+ companyType: companyType.value,
|
|
|
chartType,
|
|
|
startDate,
|
|
|
endDate,
|
|
|
+
|
|
|
};
|
|
|
getRankingList(param).then(async (res) => {
|
|
|
const { data } = res;
|
|
@@ -676,7 +629,7 @@ export default {
|
|
|
...data.data.series[0],
|
|
|
type: "bar",
|
|
|
itemStyle: { color: "#ddae27" },
|
|
|
- name: t("home.productNum"),
|
|
|
+ name: t("home.productNum"),
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
@@ -686,7 +639,7 @@ export default {
|
|
|
...data.data.series[1],
|
|
|
type: "bar",
|
|
|
itemStyle: { color: "#2c87c8" },
|
|
|
- name: t("home.salesAmount"),
|
|
|
+ name: t("home.salesAmount"),
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
@@ -745,6 +698,7 @@ export default {
|
|
|
// 默认筛选选中
|
|
|
searchForm.changeTypeName = t("robotRanking.salesStatistics");
|
|
|
searchForm.changeType = 0;
|
|
|
+ searchForm.companyTypeName = t("robotRanking.whole");
|
|
|
init();
|
|
|
window.addEventListener("resize", () => {
|
|
|
chartObj.day && chartObj.day.resize();
|
|
@@ -768,6 +722,8 @@ export default {
|
|
|
businessName: "",
|
|
|
changeTypeName: "",
|
|
|
changeType: "",
|
|
|
+ companyTypeName: "",
|
|
|
+ companyType: ""
|
|
|
});
|
|
|
const kDialogRef = ref(null);
|
|
|
const busiPopShow = ref(false);
|
|
@@ -796,6 +752,7 @@ export default {
|
|
|
} else {
|
|
|
changeType.value = searchForm.changeType;
|
|
|
}
|
|
|
+ companyType.value = searchForm.companyType;
|
|
|
init();
|
|
|
};
|
|
|
// 筛选弹窗
|
|
@@ -849,13 +806,18 @@ export default {
|
|
|
changeTypePopList,
|
|
|
changeTypePopConfirm,
|
|
|
changeTypeInpClk,
|
|
|
+ companyTypeInpClk,
|
|
|
+ companyTypePopConfirm,
|
|
|
+ companyTypePopList,
|
|
|
+ companyTypeShow,
|
|
|
totalNoData,
|
|
|
chgTypeDefaIdx,
|
|
|
+
|
|
|
+ isAdmin,
|
|
|
};
|
|
|
},
|
|
|
components: { sHeader, navBar, kTabs, kDialog, kNoData },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="less" scoped>
|
|
|
-</style>
|
|
|
+<style lang="less" scoped></style>
|