|
@@ -5,8 +5,8 @@
|
|
|
<s-header :name="sys ? sys.title : $t('public.homePage')" :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)"
|
|
|
- left-icon="volume-o" :text="noticeContent.title" />
|
|
|
+ <van-notice-bar @click="noticeClk" mode="link" :scrollable="true" color="rgba(64,77,116,1)" left-icon="volume-o"
|
|
|
+ :text="noticeContent.title" />
|
|
|
</template>
|
|
|
<div class="intervalRow"></div>
|
|
|
<div class="nameDeviceRow flex-col">
|
|
@@ -25,66 +25,40 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 时间选择 -->
|
|
|
- <date-select-list @update="update($event)"></date-select-list>
|
|
|
+ <!-- <date-select-list @update="update($event)"></date-select-list> -->
|
|
|
<!-- 类型选择 -->
|
|
|
<!-- <typeSelectList v-if="showDataDiv" :isHome="true" @upselectdata="upselectdata($event)"></typeSelectList> -->
|
|
|
|
|
|
- <div class="o-plr-8 o-pt-10">
|
|
|
+ <!-- <div class="o-plr-8 o-pt-10">
|
|
|
<div class="outer5 flex-col" @click="pushOrderCenter">
|
|
|
- <!-- 收入总额,销售量,订单数 -->
|
|
|
+ // 收入总额,销售量,订单数
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<!-- 时间范围 -->
|
|
|
<div class="c-text-c c-text-18">
|
|
|
- {{ Format_time(dateSelect.startDate, 'YYYY-MM-DD') }}--{{ Format_time(dateSelect.endDate, 'YYYY-MM-DD') }}
|
|
|
+ 月K线图
|
|
|
</div>
|
|
|
<!-- ECharts -->
|
|
|
- <!-- <div> -->
|
|
|
- <div v-if="!noData(salesVolume, salesNumber)">
|
|
|
+ <!-- <div v-if="!noData(salesVolume, salesNumber)"> -->
|
|
|
+ <div v-if="!noData(stockPrice)">
|
|
|
<div ref="chartBox" class="Chart1 flex-col"></div>
|
|
|
</div>
|
|
|
<kNoData v-else></kNoData>
|
|
|
|
|
|
-
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
- <!-- 买卖榜单 -->
|
|
|
- <!-- <div class="homeBox">
|
|
|
- 买家Top5
|
|
|
- <div class="titleBox flex-col">
|
|
|
- <div class="layer2 l-flex-RC">
|
|
|
- <div class="section5 flex-col"></div>
|
|
|
- <div class="TextGroup2 flex-col">
|
|
|
- <span class="txt4">买卖榜单</span>
|
|
|
+ <!-- 买卖排行榜 -->
|
|
|
+ <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">买卖排行榜</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- 下拉排序菜单
|
|
|
- <van-dropdown-menu>
|
|
|
- <van-dropdown-item v-model="value1" :options="option1" />
|
|
|
- <van-dropdown-item v-model="value2" :options="option2" />
|
|
|
- <van-dropdown-item v-model="value3" :options="option3" />
|
|
|
- </van-dropdown-menu>
|
|
|
-
|
|
|
- 买单前五
|
|
|
- <van-cell-group inset style="background-color: antiquewhite;">
|
|
|
- <van-grid direction="horizontal" :column-num="3" :gutter="1" :border="false" row-gap="1px">
|
|
|
- <van-grid-item icon="contact-o" text="买家Top5" />
|
|
|
- <van-grid-item icon="points" text="购买数量" />
|
|
|
- <van-grid-item icon="refund-o" text="购买数量" />
|
|
|
-
|
|
|
- <van-grid-item text="王" />
|
|
|
- <van-grid-item text="200" />
|
|
|
- <van-grid-item text="11" />
|
|
|
- <van-grid-item text="李" />
|
|
|
- <van-grid-item text="300" />
|
|
|
- <van-grid-item text="12" />
|
|
|
- </van-grid>
|
|
|
- </van-cell-group>
|
|
|
- </div> -->
|
|
|
+ </div>
|
|
|
|
|
|
<div class="top5-box">
|
|
|
<div class="buy-box">
|
|
@@ -140,77 +114,31 @@ 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 dateSelectList from "@/components/date-select-list";
|
|
|
-// import typeSelectList from "../../components/typeSelectList";
|
|
|
import { getLoginUser, Format_time, styleUrl } from "@/common/js/utils";
|
|
|
import {
|
|
|
- getStatistics,
|
|
|
+ getListStockInfoForMonth,
|
|
|
Api_getNotice,
|
|
|
- // Api_postMachineNum,
|
|
|
Api_getUpdateNotice,
|
|
|
- getIsAlarm,
|
|
|
} from "../../service/home";
|
|
|
-import dateUtil from "../../utils/dateUtil";
|
|
|
-import { useI18n } from "vue-i18n";
|
|
|
import { showToast } from "vant";
|
|
|
import RobotIcon from '@/assets/home/robot.png';
|
|
|
-// import { getLocal } from "@/common/js/utils";
|
|
|
|
|
|
export default {
|
|
|
name: "home",
|
|
|
components: {
|
|
|
sHeader,
|
|
|
- // navBar,
|
|
|
- dateSelectList,
|
|
|
- // typeSelectList,
|
|
|
kDialog,
|
|
|
kNoData,
|
|
|
- // [Popup.name]: Popup,
|
|
|
},
|
|
|
setup() {
|
|
|
- const value1 = ref(0);
|
|
|
- const value2 = ref('a');
|
|
|
- const value3 = ref('a');
|
|
|
- const option1 = [
|
|
|
- { text: '全部', value: 0 },
|
|
|
- { text: '买家', value: 1 },
|
|
|
- { text: '卖家', value: 2 },
|
|
|
- ];
|
|
|
- const option2 = [
|
|
|
- { text: '交易数量', value: 'a' },
|
|
|
- { text: '从少到多', value: 'b' },
|
|
|
- { text: '从多到少', value: 'c' },
|
|
|
- ];
|
|
|
- const option3 = [
|
|
|
- { text: '每股单价', value: 'a' },
|
|
|
- { text: '从低到高', value: 'b' },
|
|
|
- { text: '从高到低', value: 'c' },
|
|
|
- ];
|
|
|
|
|
|
- // const test = () => {
|
|
|
- // DateSelectList,
|
|
|
- // }; // const test = () => {
|
|
|
- // DateSelectList,
|
|
|
- // };
|
|
|
- // 设备状况
|
|
|
- const equipStatus = ref({});
|
|
|
- // 获取设备情况
|
|
|
- // const getMachineNum = () => {
|
|
|
- // Api_postMachineNum({ adminId: user.id }).then((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);
|
|
|
// 点击通知栏
|
|
@@ -235,8 +163,6 @@ export default {
|
|
|
const sys = ref(null);
|
|
|
const pic1 = ref([
|
|
|
{ url: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg', isImage: true },
|
|
|
- // Uploader 根据文件后缀来判断是否为图片文件
|
|
|
- // 如果图片 URL 中不包含类型信息,可以添加 isImage 标记来声明
|
|
|
]);
|
|
|
|
|
|
|
|
@@ -244,71 +170,16 @@ export default {
|
|
|
const chartBox = ref();
|
|
|
let chartObj = null;
|
|
|
|
|
|
- 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 stockPrice = 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;
|
|
|
+ const getListStockInfoForMonthFun = async () => {
|
|
|
+ const { data } = await getListStockInfoForMonth();
|
|
|
+ if (data.code === '00000' && data.data) {
|
|
|
+ stockPrice.value = 0;
|
|
|
data.data.series[0].data.forEach((item) => {
|
|
|
- salesNumber.value = parseInt(salesNumber.value + item);
|
|
|
+ stockPrice.value = parseInt(stockPrice.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) {
|
|
@@ -335,6 +206,8 @@ export default {
|
|
|
itemWidth: 10,
|
|
|
itemHeight: 10,
|
|
|
icon: "rect",
|
|
|
+ orient: 'vertical',
|
|
|
+ top: 20,
|
|
|
},
|
|
|
// 固定屏幕显示多少个,其余的滑动
|
|
|
dataZoom: [
|
|
@@ -360,23 +233,10 @@ export default {
|
|
|
series: [
|
|
|
{
|
|
|
...data.data.series[0],
|
|
|
- // type: "bar", // 柱状图
|
|
|
- type: "line", // 折线图
|
|
|
+ type: "line", // line折线图,bar柱状图
|
|
|
smooth: true, // 针对折线图,平滑曲线
|
|
|
itemStyle: { color: "#39a6fe" },
|
|
|
- name: "股票价格",
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: "top",
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- ...data.data.series[1],
|
|
|
- // type: "bar", // 柱状图
|
|
|
- type: "line", // 折线图
|
|
|
- smooth: true, // 针对折线图,平滑曲线
|
|
|
- itemStyle: { color: "#FF3456" },
|
|
|
- name: "交易量",
|
|
|
+ name: "股价¥",
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
@@ -396,52 +256,21 @@ export default {
|
|
|
}
|
|
|
};
|
|
|
const pushToolList = ref([]);
|
|
|
- // 是否有报警
|
|
|
- const showAlarm = ref(false);
|
|
|
- const alarmList = ref([]);
|
|
|
+
|
|
|
// 页面初始化
|
|
|
onMounted(async () => {
|
|
|
// 加载样式
|
|
|
styleUrl('home');
|
|
|
- if (localStorage.getItem("loginSys")) {
|
|
|
- const loginSysString = localStorage.getItem("loginSys");
|
|
|
- sys.value = JSON.parse(loginSysString);
|
|
|
- }
|
|
|
+ // if (localStorage.getItem("loginSys")) {
|
|
|
+ // const loginSysString = localStorage.getItem("loginSys");
|
|
|
+ // sys.value = JSON.parse(loginSysString);
|
|
|
+ // }
|
|
|
firstLogin.value = localStorage.getItem('firstLogin');
|
|
|
- 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();
|
|
|
+
|
|
|
+ // 获取月度曲线
|
|
|
+ getListStockInfoForMonthFun();
|
|
|
// 获取首页公告
|
|
|
getNotice();
|
|
|
- // 获取设备情况
|
|
|
- // getMachineNum();
|
|
|
- if (user.type > 1) {
|
|
|
- // 查询设备是否有报警
|
|
|
- const queryParams = {
|
|
|
- adminId: user.id,
|
|
|
- todayDate: dateUtil.formateDate(new Date(), "yyyy-MM-dd"), // 当天时间
|
|
|
- };
|
|
|
- const { data } = await getIsAlarm(queryParams);
|
|
|
- if (data.data != null) {
|
|
|
- if (firstLogin.value == 'true') {
|
|
|
- showAlarm.value = true;
|
|
|
- }
|
|
|
- alarmList.value = data.data;
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
});
|
|
|
|
|
@@ -452,12 +281,13 @@ export default {
|
|
|
const showDataDiv = ref(false);
|
|
|
|
|
|
// 如果是空数据
|
|
|
- const noData = (volumes, nums) => {
|
|
|
- if (!volumes && !nums) {
|
|
|
+ const noData = (stockPrice) => {
|
|
|
+ if (!stockPrice) {
|
|
|
return true;
|
|
|
}
|
|
|
return false;
|
|
|
};
|
|
|
+
|
|
|
// 显示logo
|
|
|
const showLogo = (url) => {
|
|
|
return require(`../../assets/home/${url}.png`);
|
|
@@ -465,36 +295,22 @@ export default {
|
|
|
|
|
|
return {
|
|
|
userName,
|
|
|
- update,
|
|
|
- upselectdata,
|
|
|
chartBox,
|
|
|
pushToolList,
|
|
|
- salesVolume,
|
|
|
- salesNumber,
|
|
|
- orderNumber,
|
|
|
+ stockPrice,
|
|
|
sys,
|
|
|
noticeClk,
|
|
|
confirmClk,
|
|
|
kDialogRef,
|
|
|
noData,
|
|
|
- equipStatus,
|
|
|
noticeContent,
|
|
|
showLogo,
|
|
|
- dateSelect,
|
|
|
Format_time,
|
|
|
showDataDiv,
|
|
|
firstLogin,
|
|
|
pic1,
|
|
|
- showAlarm,
|
|
|
- alarmList,
|
|
|
confirmAlarm,
|
|
|
robotIcon: RobotIcon,
|
|
|
- value1,
|
|
|
- value2,
|
|
|
- value3,
|
|
|
- option1,
|
|
|
- option2,
|
|
|
- option3,
|
|
|
|
|
|
top5List: [
|
|
|
{ name: '张三', amount: 100, price: 50 },
|
|
@@ -510,6 +326,6 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-@import "@/common/style/common";
|
|
|
-@import "@/styles/home/homeRank5";
|
|
|
+@import "../../common/style/common";
|
|
|
+@import "../../styles/home/homeRank5";
|
|
|
</style>
|