123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601 |
- <template>
- <!-- 主页 -->
- <div class="homePage flex-col">
- <div class="homeBox">
- <s-header :name="sys ? sys.title : $t('public.sysName')" :noback="true" :isFixed="false"></s-header>
- <!-- 留言滚动条 -->
- <template v-if="noticeContent.title">
- <van-notice-bar @click="noticeClk" mode="link" :scrollable="true" color="rgba(64,77,116,1)" background="#fff"
- left-icon="volume-o" :text="noticeContent.title" />
- </template>
- <div class="intervalRow"></div>
- <div class="nameDeviceRow flex-col">
- <span class="txt3">{{ userName }}</span>
- <div class="l-flex-RC">
- <span class="info3" style="color: #4d6add;">{{ $t("home.totalEquipment") }} : {{ equipStatus.machineTotalNum }}</span>
- <div class="lineCon o-mlr-6"></div>
- <span class="word2" style="color: #07c160;">{{ $t("home.running") }} : {{ equipStatus.machineUseNum }}</span>
- </div>
- </div>
- <!-- 没有数据概览M14权限的人看不到数据概览和ECharts -->
- <!-- 数据概览 -->
- <div v-if="showDataDiv" class="titleBox flex-col">
- <div class="layer2 flex-row">
- <div class="section5 flex-col"></div>
- <div class="TextGroup2 flex-col">
- <span class="txt4">{{ $t("home.dataOverview") }}</span>
- </div>
- </div>
- </div>
- <!-- 时间选择 -->
- <dateSelectList v-if="showDataDiv" @update="update($event)"></dateSelectList>
- <typeSelectList v-if="showDataDiv" :isHome="true" @upselectdata="upselectdata($event)"></typeSelectList>
- <!-- 订单数据 -->
- <div v-if="showDataDiv" class="o-plr-8 o-pt-10">
- <div class="outer5 flex-col" @click="pushOrderCenter">
- <div class="block5 flex-col">
- <div class="topTitle flex-row justify-end">
- <span class="txt10">{{ $t("home.orderData") }}</span>
- <div class="layer4 flex-col"></div>
- </div>
- <div class="outerBox flex-row">
- <div class="main4 flex-col justify-between">
- <div class="main5 flex-row justify-center">
- <!-- 首页 - 订单数据 - 收入总额¥ -->
- <!-- <span class="word8">¥</span> -->
- <span class="word8">{{ currencySymbol }}</span>
- <span class="word9">{{ salesVolume.toFixed(0) }}</span>
- </div>
- <span class="info5">{{ $t("home.totalIncome") }}</span>
- </div>
- <div class="TextGroup7 flex-col">
- <div class="mod3 flex-col justify-between">
- <span class="txt8">{{ salesNumber }}</span>
- <span class="info6">{{ $t("home.productNum") }}</span>
- </div>
- </div>
- <div class="TextGroup8 flex-col">
- <div class="outer6 flex-col justify-between">
- <span class="txt9">{{ orderNumber }}</span>
- <span class="word10">{{ $t("home.numberOfOrders") }}</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- 时间 -->
- <div v-if="showDataDiv" class="c-text-c c-text-18">
- {{ Format_time(dateSelect.startDate, 'YYYY-MM-DD') }}--{{ Format_time(dateSelect.endDate, 'YYYY-MM-DD') }}
- </div>
- <!-- ECharts
- <template v-if="showDataDiv && !noData(salesVolume, salesNumber)">
- <div ref="chartBox" class="Chart1 flex-col"></div>
- </template>
- <template v-else>
- <kNoData v-if="showDataDiv"></kNoData>
- </template> -->
- <!-- <div> -->
- <div v-if="showDataDiv && !noData(salesVolume, salesNumber)">
- <div ref="chartBox" class="Chart1 flex-col"></div>
- </div>
- <kNoData v-else></kNoData>
- <!-- </div> -->
- <!-- 常用工具 -->
- <div class="outer9 flex-col justify-center">
- <div class="main24 flex-col justify-between">
- <div class="ImageText10 flex-col">
- <div class="wrap2 flex-row justify-between">
- <div class="outer10 flex-col"></div>
- <div class="TextGroup13 flex-col">
- <span class="txt13">{{ $t("home.commonTools") }}</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="outer11 flex-row">
- <div class="main25 flex-col" v-for="(item, index) in pushToolList" :key="index" @click="pushToolPage(item.value)">
- <img class="mod7 flex-col" :src="showLogo(item.value)" />
- <div class="TextGroup14 flex-col">
- <!-- <span class="info15" v-html="item.label"></span> -->
- <span class="info15">{{ $t(item.label) }}</span>
- </div>
- </div>
- </div>
- </div>
- <!-- 通知弹窗 -->
- <kDialog :dialogTitle="$t('home.notificationPop.notification')" :cancelBtnTxt="$t('home.notificationPop.nextTime')"
- :confirmBtnTxt="$t('home.notificationPop.roger')" ref="kDialogRef" @confirmclk="confirmClk">
- <template #content>
- <div class="o-w" style="max-height: 50vh; overflow-y: auto" v-html="noticeContent.note"></div>
- </template>
- </kDialog>
- <!-- <nav-bar></nav-bar> -->
- </div>
- </template>
- <script>
- // 导入无数据组件
- import kNoData from "../../components/commom/kNoData/index.vue";
- import kDialog from "../../components/commom/kDialog/index.vue";
- import { onMounted, ref, nextTick } from "vue";
- import sHeader from "../../components/SimpleHeader";
- // import navBar from "../../components/NavBar";
- import dateSelectList from "../../components/dateSelectList";
- import typeSelectList from "../../components/typeSelectList";
- import { getLoginUser, $M_Menus, Format_time, styleUrl } from "../../common/js/utils";
- import { useRouter } from "vue-router";
- import {
- getStatistics,
- Api_getNotice,
- Api_postMachineNum,
- Api_getUpdateNotice,
- } from "../../service/home";
- import dateUtil from "../../utils/dateUtil";
- import { useI18n } from "vue-i18n";
- import { showToast } from "vant";
- export default {
- name: "home",
- components: {
- sHeader,
- // navBar,
- dateSelectList,
- typeSelectList,
- kDialog,
- kNoData,
- },
- setup() {
- // 设备状况
- const equipStatus = ref({});
- // 获取设备情况
- const getMachineNum = () => {
- Api_postMachineNum({ adminId: user.id }).then((res) => {
- // console.log("res", res);
- equipStatus.value = res.data.data || {};
- });
- };
- const noticeContent = ref({});
- // 获取公告
- const getNotice = () => {
- Api_getNotice({ adminId: user.id }).then((res) => {
- // console.log("res", res);
- noticeContent.value = res.data.data || {};
- });
- };
- const { t } = useI18n();
- // 通知弹窗
- const kDialogRef = ref(null);
- // 点击通知栏
- const noticeClk = () => {
- kDialogRef.value.openDialog();
- };
- // 点击右侧按钮
- const confirmClk = (e) => {
- console.log(e, 2222);
- Api_getUpdateNotice({
- adminId: user.id,
- }).then((res) => {
- // console.log("res", res);
- showToast(res.data.message);
- setTimeout(() => {
- getNotice();
- }, 500);
- });
- };
- const user = getLoginUser();
- const router = useRouter();
- const userName = ref(user.name);
- const sys = ref(null);
- // 自定义货币符号
- const currencySymbol = ref("¥");
- if (user.currencySymbol) {
- currencySymbol.value = user.currencySymbol;
- } else {
- currencySymbol.value = "¥";
- }
- // console.log("currencySymbol是》》》" + user.currencySymbol);
- // 图表对象
- const chartBox = ref();
- let chartObj = null;
- // 跳转订单中心
- const pushOrderCenter = () => {
- router.push({ path: "/orderCenter" });
- };
- const dateSelect = ref({});
- const update = (uDate) => {
- dateSelect.value = uDate;
- getStatisticsFun();
- };
- let typeSelectData = {};
- const upselectdata = (uSData) => {
- typeSelectData = uSData;
- getStatisticsFun();
- };
- const salesVolume = ref(0);
- const salesNumber = ref(0);
- const orderNumber = ref(0);
- // 查询图表
- const getStatisticsFun = async () => {
- const params = {
- ...dateSelect.value,
- // ...typeSelectData,
- adminId: user.id,
- ifForeign: typeSelectData.ifForeign === '' ? user.ifForeign : typeSelectData.ifForeign,
- payType: typeSelectData.payType,
- clientId: typeSelectData.clientId,
- username: typeSelectData.userName, // 商家
- companyType: typeSelectData.companyType, // 公司平台
- machineType: typeSelectData.machineType, // 设备类型
- equipmentId:
- typeSelectData.equipmentId === "" ? null : typeSelectData.equipmentId,
- };
- const { data } = await getStatistics(params);
- if (data.code && data.data) {
- salesVolume.value = 0;
- salesNumber.value = 0;
- orderNumber.value = 0;
- data.data.series[0].data.forEach((item) => {
- salesNumber.value = parseInt(salesNumber.value + item);
- });
- data.data.series[1].data.forEach((item) => {
- salesVolume.value = parseFloat(salesVolume.value) + parseFloat(item);
- });
- data.data.series[2].data.forEach((item) => {
- orderNumber.value = parseInt(orderNumber.value + item);
- });
- data.data.categories.forEach((item, index) => {
- if (item == "周1") {
- data.data.categories[index] = t("home.week.mon");
- }
- if (item == "周2") {
- data.data.categories[index] = t("home.week.tue");
- }
- if (item == "周3") {
- data.data.categories[index] = t("home.week.wed");
- }
- if (item == "周4") {
- data.data.categories[index] = t("home.week.thu");
- }
- if (item == "周5") {
- data.data.categories[index] = t("home.week.fri");
- }
- if (item == "周6") {
- data.data.categories[index] = t("home.week.sat");
- }
- if (item == "周日") {
- data.data.categories[index] = t("home.week.sun");
- }
- })
- // 解决eacharts与v-if的渲染问题
- await nextTick();
- if (chartBox.value) {
- chartObj = window.echarts.init(chartBox.value, null, {
- renderer: "canvas",
- useDirtyRect: false,
- });
- const option = {
- tooltip: {
- trigger: "axis",
- axisPointer: {
- type: "shadow",
- },
- },
- grid: {
- left: "3%",
- right: "4%",
- bottom: "10%",
- containLabel: true,
- },
- legend: {
- bottom: 0,
- right: 10,
- itemWidth: 10,
- itemHeight: 10,
- icon: "rect",
- },
- // 固定屏幕显示多少个,其余的滑动
- dataZoom: [
- // {
- // type: 'slider',
- // xAxisIndex: 0,
- // filterMode: 'none',
- // // 开始的值
- // startValue: null,
- // // 结束的值
- // endValue: null,
- // // 锁定滑动的区域
- // // zoomLock:true,
- // },
- {
- type: "inside",
- xAxisIndex: 0,
- filterMode: "none",
- startValue: null,
- endValue: null,
- zoomLock: true,
- },
- ],
- xAxis: {
- type: "category",
- axisLabel: {
- rotate: 45,
- },
- data: data.data.categories,
- },
- yAxis: {
- type: "value",
- },
- series: [
- {
- ...data.data.series[0],
- type: "bar",
- itemStyle: { color: "#e59a6d" },
- name: t("home.productNum"),
- label: {
- show: true,
- position: "top",
- },
- },
- {
- ...data.data.series[1],
- type: "bar",
- itemStyle: { color: "#4d6add" },
- name: t("home.salesAmount"),
- label: {
- show: true,
- position: "top",
- },
- },
- ],
- };
- option.dataZoom[0]["startValue"] =
- data.data.categories[data.data.categories.length - 5];
- option.dataZoom[0]["endValue"] =
- data.data.categories[data.data.categories.length - 1];
- chartObj && chartObj.setOption(option);
- //图形宽度随屏幕宽度改变而改变
- window.onresize = chartObj.resize;
- }
- }
- };
- const pushToolList = ref([]);
- // 页面初始化
- onMounted(() => {
- // 加载样式
- styleUrl('home');
- if (localStorage.getItem("loginSys")) {
- const loginSysString = localStorage.getItem("loginSys");
- sys.value = JSON.parse(loginSysString);
- }
- // 设置菜单权限
- menuSet();
- // 设置菜单权限, 只执行一次
- // once(menuSet);
- dateSelect.value = {
- chartType: "day",
- startDate: dateUtil.formateDate(
- new Date(new Date(new Date().getTime()).setHours(0, 0, 0, 0)),
- "yyyy-MM-dd hh:mm:ss"
- ),
- endDate: dateUtil.formateDate(
- new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 59)),
- "yyyy-MM-dd hh:mm:ss"
- ),
- };
- typeSelectData = {
- userName: user.username,
- clientId: null,
- };
- getStatisticsFun();
- // 获取首页公告
- getNotice();
- // 获取设备情况
- getMachineNum();
- });
- const menuList = [];
- const showDataDiv = ref(false);
- const isOrderData = ref(false);
- // 设置菜单权限
- const menuSet = () => {
- // 清空菜单列表
- menuList.length = 0;
- // 组合菜单权限
- user.menuCodeList.forEach((item) => {
- for (const key in $M_Menus) {
- // 设备管理M1,设备查看M2,订单数据M4,任务消息M6,数据概览M14,订单退款M16,系统脱机M17 这些图标不用加载到底部菜单上
- if (
- item === key &&
- (
- item !== "M1" &&
- item !== "M2" && // M2本身就无logo
- item !== "M4" &&
- item !== "M6" &&
- item !== "M14" &&
- item !== "M16" &&
- item !== "M17"
- )
- ) {
- menuList.push({
- label: $M_Menus[key],
- value: item
- });
- }
- }
- });
- // 赋值菜单
- pushToolList.value = menuList;
- // 查询是否有apk管理权限
- const isApkMan = user.menuCodeList.some((item) => {
- return item === "M19";
- });
- // 查询是否有账号权限
- const isAccount = user.menuCodeList.some((item) => {
- return item === "M8";
- });
- // 查询是否有订单数据权限
- isOrderData.value = user.menuCodeList.some((item) => {
- return item === "M4";
- })
- // 查询是否有订单导出权限
- // const isOrderExport = user.menuCodeList.some((item) => {
- // return item === "M9";
- // })
- // 查询是否有数据概览权限
- const isDataOverview = user.menuCodeList.some((item) => {
- return item === "M14";
- })
- // 如果没有apk管理
- if (!isApkMan) {
- // 如果是公司人,要把apk添加上去
- // if (user.type === 0 || user.type === 1) {
- // pushToolList.value.push({
- // label: t("home.apkMan"),
- // value: "M19"
- // });
- // }
- }
- // 如果没有账号权限
- if (!isAccount) {
- // 如果是公司人type=0,要把账号权限添加上去
- if (user.type === 0) {
- pushToolList.value.push({
- label: t("home.accountPermission"),
- value: "M8"
- });
- }
- }
- // 子商家以上级别,默认可以看到订单详情
- if (user.type === 0 || user.type === 2) {
- showDataDiv.value = true;
- } else {
- // 如果有数据概览权限 和 订单数据权限
- if (isDataOverview && isOrderData.value) {
- showDataDiv.value = true;
- }
- }
- };
- // 常用操作跳转页面
- const pushToolPage = (index) => {
- // console.log("常用操作跳转页面menuList >>> " + menuList);
- switch (index) {
- case "M1":
- router.push({ path: "/device" }); // 设备管理
- break;
- case "M3":
- // router.push({ path: "/distributionSet" });
- router.push({ path: "/accountOperation" }); // 账户操作
- break;
- case "M4":
- router.push({ path: "/orderCenter" }); // 订单数据
- break;
- case "M5":
- router.push({ path: "/advertManage" }); // 广告管理
- break;
- case "M6":
- router.push({ path: "/taskMessage" });
- break;
- case "M7":
- router.push({ path: "/discountCode" });
- break;
- case "M8":
- router.push({ path: "/accountPer" });
- break;
- case "M9":
- router.push({ path: "/orderExport" });
- break;
- case "M10":
- router.push({ path: "/subLedgerManage" });
- break;
- case "M11":
- router.push({ path: "/robotranking" });
- break;
- case "M12":
- router.push({ path: "/joinpayMch" });
- break;
- case "M13":
- router.push({ path: "/shandeMch" });
- break;
- case "M15":
- router.push({ path: "/alarmHistory" }); // 报警历史
- break;
- case "M18":
- router.push({ path: "/labelMan" });
- break;
- case "M19":
- router.push({ path: "/apkManage" });
- break;
- case "M20":
- router.push({ path: "/merchantManage" });
- break;
- }
- };
- // 如果是空数据
- const noData = (volumes, nums) => {
- if (!volumes && !nums) {
- return true;
- }
- return false;
- };
- // 显示logo
- const showLogo = (url) => {
- return require(`../../assets/home/${url}.png`);
- };
- return {
- userName,
- update,
- upselectdata,
- chartBox,
- pushOrderCenter,
- pushToolList,
- pushToolPage,
- salesVolume,
- salesNumber,
- orderNumber,
- sys,
- noticeClk,
- confirmClk,
- kDialogRef,
- noData,
- equipStatus,
- noticeContent,
- showLogo,
- dateSelect,
- Format_time,
- showDataDiv,
- currencySymbol,
- };
- },
- };
- </script>
- <style lang="less" scoped>
- @import "../../common/style/common";
- </style>
|