|
@@ -4,11 +4,16 @@
|
|
<div class="homeBox">
|
|
<div class="homeBox">
|
|
<s-header :name="sys ? sys.title : $t('public.homePage')" :noback="true" :isFixed="false"></s-header>
|
|
<s-header :name="sys ? sys.title : $t('public.homePage')" :noback="true" :isFixed="false"></s-header>
|
|
<!-- 新闻通知 -->
|
|
<!-- 新闻通知 -->
|
|
- <template v-if="noticeContent.title">
|
|
|
|
|
|
+ <!-- <template v-if="noticeContent.title">
|
|
<van-notice-bar @click="noticeClk" mode="link" :scrollable="true" color="rgba(64,77,116,1)" left-icon="volume-o"
|
|
<van-notice-bar @click="noticeClk" mode="link" :scrollable="true" color="rgba(64,77,116,1)" left-icon="volume-o"
|
|
:text="noticeContent.title" />
|
|
:text="noticeContent.title" />
|
|
- </template>
|
|
|
|
- <div class="intervalRow"></div>
|
|
|
|
|
|
+ </template> -->
|
|
|
|
+ <!-- <template> -->
|
|
|
|
+ <van-notice-bar @click="noticeClk" mode="link" :scrollable="true" color="rgba(64,77,116,1)" left-icon="volume-o"
|
|
|
|
+ text="这里是关于SUNZEE内部交易系统的公告说明!" />
|
|
|
|
+ <!-- </template> -->
|
|
|
|
+ <!-- 灰线 -->
|
|
|
|
+ <!-- <div class="intervalRow"></div> -->
|
|
<div class="nameDeviceRow flex-col">
|
|
<div class="nameDeviceRow flex-col">
|
|
<span class="txt3">{{ userName }}</span>
|
|
<span class="txt3">{{ userName }}</span>
|
|
<div class="l-flex-RC">
|
|
<div class="l-flex-RC">
|
|
@@ -65,13 +70,14 @@
|
|
<van-divider>买家Top5排行榜</van-divider>
|
|
<van-divider>买家Top5排行榜</van-divider>
|
|
<van-row justify="center" class="bold-row">
|
|
<van-row justify="center" class="bold-row">
|
|
<van-col span="8">姓名</van-col>
|
|
<van-col span="8">姓名</van-col>
|
|
- <van-col span="8">交易数量</van-col>
|
|
|
|
- <van-col span="8">单价</van-col>
|
|
|
|
|
|
+ <van-col span="8">成交总量</van-col>
|
|
|
|
+ <van-col span="8">总金额</van-col>
|
|
</van-row>
|
|
</van-row>
|
|
- <van-row v-for="(item, index) in top5List" :key="index" justify="center">
|
|
|
|
- <van-col span="8">买家{{ index + 1 }}</van-col>
|
|
|
|
- <van-col span="8">{{ item.amount }}</van-col>
|
|
|
|
- <van-col span="8">{{ item.price }}</van-col>
|
|
|
|
|
|
+ <van-row v-for="(item, index) in buyTop5List" :key="index" justify="center">
|
|
|
|
+ <!-- <van-col span="8">买家{{ index + 1 }}</van-col> -->
|
|
|
|
+ <van-col span="8">{{ item.userAnonymousName }}</van-col>
|
|
|
|
+ <van-col span="8">{{ item.totalNum }}</van-col>
|
|
|
|
+ <van-col span="8">{{ item.totalPrice }}</van-col>
|
|
</van-row>
|
|
</van-row>
|
|
</div>
|
|
</div>
|
|
<div style="height: 20px;"></div>
|
|
<div style="height: 20px;"></div>
|
|
@@ -79,13 +85,14 @@
|
|
<van-divider>卖家Top5排行榜</van-divider>
|
|
<van-divider>卖家Top5排行榜</van-divider>
|
|
<van-row justify="center" class="bold-row">
|
|
<van-row justify="center" class="bold-row">
|
|
<van-col span="8">姓名</van-col>
|
|
<van-col span="8">姓名</van-col>
|
|
- <van-col span="8">交易数量</van-col>
|
|
|
|
- <van-col span="8">单价</van-col>
|
|
|
|
|
|
+ <van-col span="8">成交总量</van-col>
|
|
|
|
+ <van-col span="8">总金额</van-col>
|
|
</van-row>
|
|
</van-row>
|
|
- <van-row v-for="(item, index) in top5List" :key="index" justify="center">
|
|
|
|
- <van-col span="8">卖家{{ index + 1 }}</van-col>
|
|
|
|
- <van-col span="8">{{ item.amount }}</van-col>
|
|
|
|
- <van-col span="8">{{ item.price }}</van-col>
|
|
|
|
|
|
+ <van-row v-for="(item, index) in sellTop5List" :key="index" justify="center">
|
|
|
|
+ <!-- <van-col span="8">卖家{{ index + 1 }}</van-col> -->
|
|
|
|
+ <van-col span="8">{{ item.userAnonymousName }}</van-col>
|
|
|
|
+ <van-col span="8">{{ item.totalNum }}</van-col>
|
|
|
|
+ <van-col span="8">{{ item.totalPrice }}</van-col>
|
|
</van-row>
|
|
</van-row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -110,221 +117,199 @@
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
|
|
|
+<script setup>
|
|
// 导入无数据组件
|
|
// 导入无数据组件
|
|
import kNoData from "../../components/commom/kNoData/index.vue";
|
|
import kNoData from "../../components/commom/kNoData/index.vue";
|
|
import kDialog from "../../components/commom/kDialog/index.vue";
|
|
import kDialog from "../../components/commom/kDialog/index.vue";
|
|
import { onMounted, ref, nextTick } from "vue";
|
|
import { onMounted, ref, nextTick } from "vue";
|
|
import sHeader from "@/components/SimpleHeader";
|
|
import sHeader from "@/components/SimpleHeader";
|
|
-import { getLoginUser, Format_time, styleUrl } from "@/common/js/utils";
|
|
|
|
|
|
+import { getLoginUser, styleUrl } from "@/common/js/utils";
|
|
import {
|
|
import {
|
|
getListStockInfoForMonth,
|
|
getListStockInfoForMonth,
|
|
Api_getNotice,
|
|
Api_getNotice,
|
|
Api_getUpdateNotice,
|
|
Api_getUpdateNotice,
|
|
|
|
+ getTop5List,
|
|
} from "../../service/home";
|
|
} from "../../service/home";
|
|
import { showToast } from "vant";
|
|
import { showToast } from "vant";
|
|
-import RobotIcon from '@/assets/home/robot.png';
|
|
|
|
-
|
|
|
|
-export default {
|
|
|
|
- name: "home",
|
|
|
|
- components: {
|
|
|
|
- sHeader,
|
|
|
|
- kDialog,
|
|
|
|
- kNoData,
|
|
|
|
- },
|
|
|
|
- setup() {
|
|
|
|
-
|
|
|
|
- const noticeContent = ref({});
|
|
|
|
- // 获取公告
|
|
|
|
- const getNotice = () => {
|
|
|
|
- Api_getNotice({ adminId: user.id }).then((res) => {
|
|
|
|
- noticeContent.value = res.data.data || {};
|
|
|
|
- });
|
|
|
|
- };
|
|
|
|
- // 通知弹窗
|
|
|
|
- const kDialogRef = ref(null);
|
|
|
|
- // 点击通知栏
|
|
|
|
- const noticeClk = () => {
|
|
|
|
- kDialogRef.value.openDialog();
|
|
|
|
- };
|
|
|
|
- // 点击右侧按钮
|
|
|
|
- const confirmClk = (e) => {
|
|
|
|
- console.log(e, 2222);
|
|
|
|
- Api_getUpdateNotice({
|
|
|
|
- adminId: user.id,
|
|
|
|
- }).then((res) => {
|
|
|
|
- showToast(res.data.message);
|
|
|
|
- setTimeout(() => {
|
|
|
|
- getNotice();
|
|
|
|
- }, 500);
|
|
|
|
- });
|
|
|
|
- };
|
|
|
|
- const firstLogin = ref(true);
|
|
|
|
- const user = getLoginUser();
|
|
|
|
- const userName = ref(user.name);
|
|
|
|
- const sys = ref(null);
|
|
|
|
- const pic1 = ref([
|
|
|
|
- { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg', isImage: true },
|
|
|
|
- ]);
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- // 图表对象
|
|
|
|
- const chartBox = ref();
|
|
|
|
- let chartObj = null;
|
|
|
|
-
|
|
|
|
- const stockPrice = ref(0);
|
|
|
|
- // 查询图表
|
|
|
|
- const getListStockInfoForMonthFun = async () => {
|
|
|
|
- const { data } = await getListStockInfoForMonth();
|
|
|
|
- if (data.code === '00000' && data.data) {
|
|
|
|
- stockPrice.value = 0;
|
|
|
|
- data.data.series[0].data.forEach((item) => {
|
|
|
|
- stockPrice.value = parseInt(stockPrice.value + item);
|
|
|
|
- });
|
|
|
|
-
|
|
|
|
- // 解决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",
|
|
|
|
- orient: 'vertical',
|
|
|
|
- top: 20,
|
|
|
|
- },
|
|
|
|
- // 固定屏幕显示多少个,其余的滑动
|
|
|
|
- dataZoom: [
|
|
|
|
- {
|
|
|
|
- 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: "line", // line折线图,bar柱状图
|
|
|
|
- smooth: true, // 针对折线图,平滑曲线
|
|
|
|
- itemStyle: { color: "#39a6fe" },
|
|
|
|
- name: "股价¥",
|
|
|
|
- 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(async () => {
|
|
|
|
- // 加载样式
|
|
|
|
- styleUrl('home');
|
|
|
|
- // if (localStorage.getItem("loginSys")) {
|
|
|
|
- // const loginSysString = localStorage.getItem("loginSys");
|
|
|
|
- // sys.value = JSON.parse(loginSysString);
|
|
|
|
- // }
|
|
|
|
- firstLogin.value = localStorage.getItem('firstLogin');
|
|
|
|
-
|
|
|
|
- // 获取月度曲线
|
|
|
|
- getListStockInfoForMonthFun();
|
|
|
|
- // 获取首页公告
|
|
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+const buyTop5List = ref([]);
|
|
|
|
+const sellTop5List = ref([]);
|
|
|
|
+
|
|
|
|
+// const getTop5ListFunc = async () => {
|
|
|
|
+// const { data } = await getTop5List();
|
|
|
|
+
|
|
|
|
+// if (data.code === '00000') {
|
|
|
|
+// console.log("buyTop5List >>", buyTop5List);
|
|
|
|
+// }
|
|
|
|
+// }
|
|
|
|
+
|
|
|
|
+async function getTop5Func() {
|
|
|
|
+ const { data } = await getTop5List()
|
|
|
|
+ if (data.code === '00000') {
|
|
|
|
+ console.log("buyTop5List >>", data.data.buyTopList);
|
|
|
|
+ console.log("sellTop5List >>", data.data.sellTopList);
|
|
|
|
+ buyTop5List.value = data.data.buyTopList
|
|
|
|
+ sellTop5List.value = data.data.sellTopList
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+const noticeContent = ref({});
|
|
|
|
+// 获取公告
|
|
|
|
+const getNotice = () => {
|
|
|
|
+ Api_getNotice({ adminId: user.id }).then((res) => {
|
|
|
|
+ noticeContent.value = res.data.data || {};
|
|
|
|
+ });
|
|
|
|
+};
|
|
|
|
+// 通知弹窗
|
|
|
|
+const kDialogRef = ref(null);
|
|
|
|
+// 点击通知栏
|
|
|
|
+const noticeClk = () => {
|
|
|
|
+ kDialogRef.value.openDialog();
|
|
|
|
+};
|
|
|
|
+// 点击右侧按钮
|
|
|
|
+const confirmClk = (e) => {
|
|
|
|
+ console.log(e, 2222);
|
|
|
|
+ Api_getUpdateNotice({
|
|
|
|
+ adminId: user.id,
|
|
|
|
+ }).then((res) => {
|
|
|
|
+ showToast(res.data.message);
|
|
|
|
+ setTimeout(() => {
|
|
getNotice();
|
|
getNotice();
|
|
|
|
+ }, 500);
|
|
|
|
+ });
|
|
|
|
+};
|
|
|
|
+const firstLogin = ref(true);
|
|
|
|
+const user = getLoginUser();
|
|
|
|
+const userName = ref(user.userName);
|
|
|
|
+const sys = ref(null);
|
|
|
|
+
|
|
|
|
+
|
|
|
|
|
|
|
|
+// 图表对象
|
|
|
|
+const chartBox = ref();
|
|
|
|
+let chartObj = null;
|
|
|
|
+
|
|
|
|
+const stockPrice = ref(0);
|
|
|
|
+// 查询图表
|
|
|
|
+const getListStockInfoForMonthFun = async () => {
|
|
|
|
+ const { data } = await getListStockInfoForMonth();
|
|
|
|
+ if (data.code === '00000' && data.data) {
|
|
|
|
+ stockPrice.value = 0;
|
|
|
|
+ data.data.series[0].data.forEach((item) => {
|
|
|
|
+ stockPrice.value = parseInt(stockPrice.value + item);
|
|
});
|
|
});
|
|
|
|
|
|
- const confirmAlarm = () => {
|
|
|
|
- localStorage.setItem('firstLogin', false);
|
|
|
|
|
|
+ // 解决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",
|
|
|
|
+ orient: 'vertical',
|
|
|
|
+ top: 20,
|
|
|
|
+ },
|
|
|
|
+ // 固定屏幕显示多少个,其余的滑动
|
|
|
|
+ dataZoom: [
|
|
|
|
+ {
|
|
|
|
+ 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: "line", // line折线图,bar柱状图
|
|
|
|
+ smooth: true, // 针对折线图,平滑曲线
|
|
|
|
+ itemStyle: { color: "#39a6fe" },
|
|
|
|
+ name: "股价¥",
|
|
|
|
+ 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;
|
|
}
|
|
}
|
|
|
|
+ }
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+// 页面初始化
|
|
|
|
+onMounted(async () => {
|
|
|
|
+ // 加载样式
|
|
|
|
+ styleUrl('home');
|
|
|
|
+ // if (localStorage.getItem("loginSys")) {
|
|
|
|
+ // const loginSysString = localStorage.getItem("loginSys");
|
|
|
|
+ // sys.value = JSON.parse(loginSysString);
|
|
|
|
+ // }
|
|
|
|
+ firstLogin.value = localStorage.getItem('firstLogin');
|
|
|
|
|
|
- const showDataDiv = ref(false);
|
|
|
|
-
|
|
|
|
- // 如果是空数据
|
|
|
|
- const noData = (stockPrice) => {
|
|
|
|
- if (!stockPrice) {
|
|
|
|
- return true;
|
|
|
|
- }
|
|
|
|
- return false;
|
|
|
|
- };
|
|
|
|
-
|
|
|
|
- // 显示logo
|
|
|
|
- const showLogo = (url) => {
|
|
|
|
- return require(`../../assets/home/${url}.png`);
|
|
|
|
- };
|
|
|
|
-
|
|
|
|
- return {
|
|
|
|
- userName,
|
|
|
|
- chartBox,
|
|
|
|
- pushToolList,
|
|
|
|
- stockPrice,
|
|
|
|
- sys,
|
|
|
|
- noticeClk,
|
|
|
|
- confirmClk,
|
|
|
|
- kDialogRef,
|
|
|
|
- noData,
|
|
|
|
- noticeContent,
|
|
|
|
- showLogo,
|
|
|
|
- Format_time,
|
|
|
|
- showDataDiv,
|
|
|
|
- firstLogin,
|
|
|
|
- pic1,
|
|
|
|
- confirmAlarm,
|
|
|
|
- robotIcon: RobotIcon,
|
|
|
|
-
|
|
|
|
- top5List: [
|
|
|
|
- { name: '张三', amount: 100, price: 50 },
|
|
|
|
- { name: '李四', amount: 90, price: 55 },
|
|
|
|
- { name: '王五', amount: 80, price: 60 },
|
|
|
|
- { name: '赵六', amount: 70, price: 65 },
|
|
|
|
- { name: '钱七', amount: 60, price: 70 }
|
|
|
|
- ]
|
|
|
|
- };
|
|
|
|
- },
|
|
|
|
|
|
+ // 获取月度曲线
|
|
|
|
+ getListStockInfoForMonthFun();
|
|
|
|
+ // 获取首页公告
|
|
|
|
+ getNotice();
|
|
|
|
|
|
|
|
+ getTop5Func();
|
|
|
|
+
|
|
|
|
+});
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+// 如果是空数据
|
|
|
|
+const noData = (stockPrice) => {
|
|
|
|
+ if (!stockPrice) {
|
|
|
|
+ return true;
|
|
|
|
+ }
|
|
|
|
+ return false;
|
|
};
|
|
};
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|