Skip to content

S
shld-databoard-ui
Commit af07f129 authored by 谢章伟's avatar 谢章伟
Browse files
Options

Merge remote-tracking branch 'origin/240806_pro_release' into 240806_pro_release

parents 49353443 1f57fdd0
Show whitespace changes
Inline Side-by-side
Showing with 71 additions and 798 deletions
src/module/index/router/index_router.js
View file @ af07f129
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import Index from '../../databoard/index.vue' import Index from '../../databoard/index.vue'
import IndexSale from '../../sale/sale.vue' import IndexSale from '../../databoard/databoard/sale-index.vue'
import ArBar from "../../databoard/components/chart/ar-bar.vue"; import ArBar from "../../databoard/components/chart/ar-bar.vue";
import ArCompanyBar from "../../databoard/components/chart/ar-company-bar.vue"; import ArCompanyBar from "../../databoard/components/chart/ar-company-bar.vue";
import ArMonthlyBar from "../../databoard/components/chart/ar-monthly-bar.vue"; import ArMonthlyBar from "../../databoard/components/chart/ar-monthly-bar.vue";
......
src/module/sale/sale.vue
View file @ af07f129
<template> <template>
<div class="container"> <div class="page">
<div class="left-bar"> <div class="head">
<div class="text_left">
<display-board class="trade_left" style="width: 100%" title="已开票未收款"> <input class="btn" type="button" value="返回上级" v-if="$route.fullPath !== '/index' && $route.fullPath !== '/index-sale' " @click="goIndex">
<winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar" id="ar_company_list" :rows="arCompanyList"/> <span>{{ currentDate }}</span>
</display-board> <span>{{ currentTime }}</span>
</div> <span>{{ currentWeek }}</span>
<div class="right-container">
<div class="right-top">
<display-board class="trade_middle" style="width: 61%" title="应收款情况" corner_size="large">
<div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem">
<simple-card v-for="data in arSummary" style="width: 30%;height: 100%">
<title-content-mark style="color: #5eeef4;" :title="data.title" :content="data.value" :mark="'万元'"
isCenter isBold/>
</simple-card>
</div>
<ar-summary-bar ref="arSummaryBar" style="width: 100%; height: 64%;"></ar-summary-bar>
</display-board>
<display-board class="trade_right" style="width: 33%" title="潜在客户">
<winners-list style="height: 96%;overflow: auto;" :mouseHand="true" id="lose_user_list" :rows="lossUserList"/>
</display-board>
</div>
<div class="right-bottom" >
<display-board class="left" style="width: 61%" corner_size="large">
<div style="display: flex; justify-content: space-between; width: 100%; height: 50%; padding-top: 2rem;">
<div ref="areaBar" style="width: 100%; height: 100%;"/>
</div> </div>
<div style="display: flex; justify-content: space-between; height: 50%; padding-top: 2rem;" > <div class="text_right">
<showcase style="width: 16%;" title="当日订单量"> <span>刷新时间：{{ countDown }}s</span>
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drddl.weight+ ' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="drddl.amount+' 万元'" />
</showcase>
<showcase style="width: 16%;" title="当日运单量" :mouseHand="true" @click.native="routerTo('/department-shipment')">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drydl.count + ' 车'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="drydl.weight + ' 万吨'" />
</showcase>
<showcase style="width: 16%;" title="当日完成量">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drwcl.weight+ ' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="drwcl.amount+ ' 万元'" />
</showcase>
<showcase style="width: 16%;" title="余量">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="yl.weight+ ' 万吨'" />
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="yl.amount+ ' 万元'" />
</showcase>
<showcase style="width: 16%;" title="潜在客户" :mouseHand="true" @click.native="routerTo('/lost-add-customer',2)">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="lskh.weight+' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="lskh.amount+ ' 万元'" />
</showcase>
<showcase style="width: 16%;" title="新增客户" :mouseHand="true" @click.native="routerTo('/lost-add-customer',1)">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="xzkh.weight+ ' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="xzkh.amount + ' 万元'" />
</showcase>
</div>
</display-board >
<display-board class="right" style="width: 33%" title="当日订单量占比">
<div
style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;">
<ring-pie-chart ref="transportTypeChart" style="width: 100%;height: 50%;z-index: 999" name="运输类型占比"
:data="transportTypeOrderFinishPie" @click.native="routerTo('/order-proportion')"
:value-formatter="pieDataValueFormatter" :formatter="pieDataFormatter"/>
<ring-pie-chart ref="customerChart" style="width: 100%;height: 50%;" name="公司占比"
:data="customerOrderFinishPie" @click.native="routerTo('/order-proportion')"
:value-formatter="pieDataValueFormatter" :formatter="pieDataFormatter"/>
</div>
</display-board>
</div> </div>
</div> </div>
<router-view style="height: 90%" v-if="isRouterAlive" :countDown="countDown"></router-view>
</div> </div>
</template> </template>
<script> <script>
import DisplayBoard from "../databoard/components/container/display-board.vue"; import axios from "axios";
import Showcase from "../databoard/components/container/showcase.vue"; import {prefixZero} from "../utils/numUtil";
import ContrastCard from "../databoard/components/card/contrast-card.vue"; window.axios = axios
import SimpleCard from "../databoard/components/card/simple-card.vue"; window.$ = window.jQuery = require('materialize-css/node_modules/jquery/dist/jquery.js')
import ArSummaryBar from "../databoard/components/chart/ar-summary-bar.vue"; require('materialize-css')
import WinnersList from "../databoard/components/card/winners-list.vue";
import TitleContentMark from "../databoard/components/layout/title-content-mark.vue";
import TableColumn from "../databoard/components/table/table-column.vue";
import RingPieChart from "../databoard/components/chart/ring-pie-chart.vue";
import {
arSummaryBar,
getAccountSituation,
arCompanyList,
lostUserList,
getBusinessConditionDatas,
getOrderLoseAddCustomer,
getOrderBusinessConditionData, getShipmentDataByArea
} from "../api/apiList"
import {calc_hb_str, calc_tb_str, conver_amont, conver_num_retain} from "../utils/numUtil";
import {getTransportTypeOrderFinishPie, getCustomerOrderFinishPie} from "../databoard/databoard/js/indexPieData";
import moment from 'moment'
import {getTargetOrderDataByConditionCount} from "../databoard/databoard/js/targetAchievementData";
import * as echarts from "echarts";
export default { export default {
components: { name: 'app',
RingPieChart,
TableColumn,
TitleContentMark,
Showcase,
DisplayBoard,
ContrastCard,
SimpleCard,
ArSummaryBar,
WinnersList
},
data() { data() {
return { return {
today: moment().format("yyyy-MM-DD"), countDown: 10,
yyqk: { currentDate: null,
yye: { currentTime: null,
title: "营业额", currentWeek: null,
amount: "20,303", isRouterAlive: true,
unit: "万元", countDownTimer: null,
hb: [ week: ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'],
{
title: "昨天",
amount: "21,000",
rate: "-3.32%",
},
{
title: "上月",
amount: "20,000",
rate: "+4.92%",
},
],
},
cb: {
title: "成本",
amount: "10,303",
unit: "万元",
hb: [
{
title: "昨日",
amount: "11,000",
rate: "-2.68%",
},
{
title: "上月",
amount: "10,000",
rate: "+5.71%",
},
],
},
ml: {
title: "毛利",
amount: "10,000",
unit: "万元",
hb: [
{
title: "昨日",
amount: "10,000",
rate: "0.00%",
},
{
title: "上月",
amount: "10,000",
rate: "0.00%",
},
],
},
},
arSummary: [
{title: '累计营业收入（当年）', value: '20,303'},
{title: '应收款（财务）', value: '20,303'},
{title: '应收款（营销）', value: '20,303',},
],
lskh: {
weight: "2,000",
amount: "20,000",
},
xzkh: {
weight: "2,000",
amount: "20,000",
},
drddl: {
weight: "2,000",
amount: "20,000",
},
drydl: {
count: "2,000",
weight: "20,000",
},
drwcl: {
weight: "2,000",
amount: "20,000",
},
zkqk: {
yszk: {
title: "应收账款",
amount: "20,303",
unit: "万元",
hb: [
{
title: "昨天",
amount: "21,000",
rate: "-3.32%",
},
{
title: "上月",
amount: "20，000",
rate: "+4.92%",
},
],
},
yfzk: {
title: "应付账款",
amount: "10,303",
unit: "万元",
hb: [
{
title: "昨日",
amount: "11,000",
rate: "-2.68%",
},
{
title: "上月",
amount: "10,000",
rate: "+5.71%",
},
],
},
zsye: {
title: "账上余额",
amount: "10,000",
unit: "万元",
hb: [
{
title: "昨日",
amount: "10,000",
rate: "0.00%",
},
{
title: "上月",
amount: "10,000",
rate: "0.00%",
},
],
},
},
yl: {
weight: "2,000",
amount: "20,000",
},
mockData: {
zqk: {
yszk: {
title: "应收账款",
amount: "20,303",
unit: "万元",
hb: [
{
title: "昨天",
amount: "21,000",
rate: "-3.32%",
},
{
title: "上月",
amount: "20，000",
rate: "+4.92%",
},
],
},
yfzk: {
title: "应付账款",
amount: "10,303",
unit: "万元",
hb: [
{
title: "昨日",
amount: "11,000",
rate: "-2.68%",
},
{
title: "上月",
amount: "10,000",
rate: "+5.71%",
},
],
},
zsye: {
title: "账上余额",
amount: "10,000",
unit: "万元",
hb: [
{
title: "昨日",
amount: "10,000",
rate: "0.00%",
},
{
title: "上月",
amount: "10,000",
rate: "0.00%",
},
],
},
},
sr: [
{
title: '累计营业收入（当年）',
value: '20,303',
},
{
title: '应收款（财务）',
value: '20,303',
},
{
title: '应收款（营销）',
value: '20,303',
},
],
mrmbqk: [
{
title: "吨位(万吨)",
actualValue: "20,303",
currentValue: "21,000",
},
{
title: "营业额(万元)",
actualValue: "32,342",
currentValue: "21,000",
},
{
title: "净利润(万元)",
actualValue: "32,342",
currentValue: "21,000",
},
],
ydmbqk: [
{
title: "吨位(万吨)",
actualValue: "20,303",
currentValue: "21,000",
},
{
title: "营业额(万元)",
actualValue: "32,342",
currentValue: "21,000",
},
{
title: "净利润(万元)",
actualValue: "32,342",
currentValue: "21,000",
},
],
drddl: {
weight: "2,000",
amount: "20,000",
},
drwcl: {
weight: "2,000",
amount: "20,000",
},
yl: {
weight: "2,000",
amount: "20,000",
},
lskh: {
weight: "2,000",
amount: "20,000",
},
xzkh: {
weight: "2,000",
amount: "20,000",
},
ndmbqk: [
{
title: "吨位(万吨)",
actualValue: "20,303",
currentValue: "21,000",
},
{
title: "营业额(万元)",
actualValue: "32,342",
currentValue: "21,000",
},
{
title: "净利润(万元)",
actualValue: "32,342",
currentValue: "21,000",
},
],
zkqk: {
yszk: {
title: "应收账款",
amount: "20,303",
unit: "万元",
hb: [
{
title: "昨天",
amount: "21,000",
rate: "-3.32%",
},
{
title: "上月",
amount: "20，000",
rate: "+4.92%",
},
],
},
yfzk: {
title: "应付账款",
amount: "10,303",
unit: "万元",
hb: [
{
title: "昨日",
amount: "11,000",
rate: "-2.68%",
},
{
title: "上月",
amount: "10,000",
rate: "+5.71%",
},
],
},
zsye: {
title: "账上余额",
amount: "10,000",
unit: "万元",
hb: [
{
title: "昨日",
amount: "10,000",
rate: "0.00%",
},
{
title: "上月",
amount: "10,000",
rate: "0.00%",
},
],
},
},
barChart: {
textStyle: {color: "#fff"},
tooltip: {},
xAxis: {
data: ['未结算未开票', '已结算未开票', '已开票未收款', '应收款', '已开票已收款']
},
yAxis: {},
series: [
{
name: '开票详情',
type: 'bar',
data: [500, 300, 500, 1001, 319],
color: "#7f83f7",
label: {
show: true,
position: 'top',
color: "#fff",
},
}
]
},
drddlzb: {
transportType: [
{value: 2500, name: '汽运'},
{value: 100, name: '码头/仓库'},
{value: 500, name: '铁运'},
{value: 484, name: '水运'},
],
customer: [
{value: 500, name: '上海欧冶物流股份有限公司'},
{value: 2500, name: '宝钢运输部'},
{value: 1100, name: '宝山钢铁股份有限公司'},
]
},
},
paths: {
"营业额": "yye",
"成本": "cb",
"毛利": "ml",
},
areaBarData: {
tooltip: {
trigger: 'axis'
},
textStyle: {
color: "#FFFFFF",
fontSize: "12"
},
grid: {
containLabel: true,
top: "10%",
bottom: '0'
},
yAxis: {
type: "value",
splitLine: {
lineStyle: {
color: "#1E2C58"
}
},
},
xAxis: {
data: ['华南', '华北', '华东', '华西', '华中', '东北'],
axisLabel: {
color: "#FFFFFF",
fontSize: "12",
},
axisTick: {
show: false
}
},
series: []
},
dataset: {},
transportTypeOrderFinishPie: [],
customerOrderFinishPie: [],
arCompanyList: [],
lossUserList: [],
charts: {},
targetAchievement:{
day: null,
month: null,
year: null,
}
} }
}, },
methods: { methods: {
cellStyleFunction(data) { goIndex() {
let res = {color: '#33ff66'}; this.$router.go(-1)
if (data.indexOf('-') !== -1) {
res.color = '#ff3300'
}
return res;
}, },
resizeChart() { reload() {
for (let chartsKey in this.charts) { this.isRouterAlive = false
this.charts[chartsKey].resize(); this.$nextTick(function () {
} this.isRouterAlive = true
},
routerTo(path, code) {
this.$router.push({path: path, query: {code: code}});
},
//营业情况
showBusinessConditionDatas() {
let res = getBusinessConditionDatas(this.today)
res.then(data => {
data = data.data;
//营业额
this.yyqk.yye.amount = conver_amont(data.cur_sell_settle_amount);
this.yyqk.yye.hb[0].amount = conver_amont(data.pre_sell_settle_amount);
this.yyqk.yye.hb[0].rate = calc_hb_str(data.cur_sell_settle_amount, data.pre_sell_settle_amount);
this.yyqk.yye.hb[1].amount = conver_amont(data.pre_month_sell_settle_amount);
this.yyqk.yye.hb[1].rate = calc_tb_str(data.cur_sell_settle_amount, data.pre_month_sell_settle_amount);
//成本
this.yyqk.cb.amount = conver_amont(data.cur_buy_settle_amount);
this.yyqk.cb.hb[0].amount = conver_amont(data.pre_buy_settle_amount);
this.yyqk.cb.hb[0].rate = calc_hb_str(data.cur_buy_settle_amount, data.pre_buy_settle_amount);
this.yyqk.cb.hb[1].amount = conver_amont(data.pre_month_buy_settle_amount);
this.yyqk.cb.hb[1].rate = calc_tb_str(data.cur_buy_settle_amount, data.pre_month_buy_settle_amount);
//毛利
this.yyqk.ml.amount = conver_amont(data.cur_gross_profit_amount);
this.yyqk.ml.hb[0].amount = conver_amont(data.pre_gross_profit_amount);
this.yyqk.ml.hb[0].rate = calc_hb_str(data.cur_gross_profit_amount, data.pre_gross_profit_amount);
this.yyqk.ml.hb[1].amount = conver_amont(data.pre_month_gross_profit_amount);
this.yyqk.ml.hb[1].rate = calc_tb_str(data.cur_gross_profit_amount, data.pre_month_gross_profit_amount);
}) })
}, },
// 跳转已开票未收款页面 setCurrentDateTime(){
goArBar() { let now = new Date();
this.$router.push('/ar_bar') this.currentDate = now.getFullYear() + "-" + prefixZero(now.getMonth()+1,2) + "-" + prefixZero(now.getDate(),2);
}, this.currentTime = prefixZero(now.getHours(),2) + ":" + prefixZero(now.getMinutes(),2) + ":" + prefixZero(now.getSeconds(),2);
// 跳转到应收账款汇总表 this.currentWeek = this.week[now.getDay()];
goAccRevSearch() {
parent.window.location = '/#/l/accounts_receivable_statistics_search'
},
// 获取应收账款数据
getArSummaryBar() {
arSummaryBar().then(res => {
let data = res.data
let seriesData = []
seriesData.push(data.unsettled_amount)
seriesData.push(data.settled_amount)
seriesData.push(data.unregister_amount)
seriesData.push(data.receivable_amount)
seriesData.push(data.cancelled_amount)
this.arSummary[0].value = conver_num_retain(data.total_amount)
this.arSummary[1].value = conver_num_retain(data.unregister_amount)
this.arSummary[2].value = conver_num_retain(data.receivable_amount)
this.zkqk.yszk.amount = conver_num_retain(data.receivable_amount)
this.$refs.arSummaryBar.drawArSummaryBar(seriesData)
}).catch(err => {
console.log(err);
});
}, },
//获取账款情况
getAccountSituation(){
getAccountSituation(this.today).then(res => {
let data = res.data
this.zkqk.yszk.hb[0].amount = conver_amont(data.per_day_receivable_amount);
this.zkqk.yszk.hb[0].rate = calc_hb_str(this.zkqk.yszk.amount, data.per_day_receivable_amount);
this.zkqk.yszk.hb[1].amount = conver_amont(data.per_month_receivable_amount);
this.zkqk.yszk.hb[1].rate = calc_tb_str(this.zkqk.yszk.amount, data.per_month_receivable_amount);
this.zkqk.yfzk.amount = conver_amont(data.payable_amount)
this.zkqk.yfzk.hb[0].amount = conver_amont(data.per_day_payable_amount);
this.zkqk.yfzk.hb[0].rate = calc_hb_str(data.payable_amount, data.per_day_receivable_amount);
this.zkqk.yfzk.hb[1].amount = conver_amont(data.per_month_payable_amount);
this.zkqk.yfzk.hb[1].rate = calc_tb_str(data.payable_amount, data.per_month_payable_amount);
this.zkqk.zsye.amount = conver_amont(data.acc_bla)
this.zkqk.zsye.hb[0].amount = conver_amont(data.per_day_acc_bla);
this.zkqk.zsye.hb[0].rate = calc_hb_str(data.acc_bla, data.per_day_acc_bla);
this.zkqk.zsye.hb[1].amount = conver_amont(data.per_month_acc_bla);
this.zkqk.zsye.hb[1].rate = calc_tb_str(data.acc_bla, data.per_month_acc_bla);
}).catch(err => {
console.log(err);
});
},
// 获取已开票未收款排行
getArCompanyList() {
arCompanyList().then(res => {
if (res.data.length) {
this.arCompanyList = res.data
}
}).catch(err => {
console.log(err);
});
},
// 获取已开票未收款排行
getLostUserList() {
lostUserList(this.today).then(res => {
if (res.data.length) {
this.lossUserList = res.data
}
}).catch(err => {
console.log(err);
});
},
refreshData() {
getTransportTypeOrderFinishPie(res => this.transportTypeOrderFinishPie = res, this.today);
getCustomerOrderFinishPie(res => this.customerOrderFinishPie = res, this.today);
this.showBusinessConditionDatas();
this.getArSummaryBar();
this.getAccountSituation();
this.getArCompanyList();
this.getLostUserList();
this.getLoseAndAdd();
this.getOrderBusinessCondition();
this.getTargetOrderDataByConditionCount();
this.getShipmentAreaBar();
},
getShipmentAreaBar() {
let chartDom = this.$refs.areaBar;
this.areaBar = echarts.init(chartDom);
getShipmentDataByArea(this.today).then(res => {
var data = ['10','20','30','40','50','60'];
var data2 = [];
data.forEach(function (row) {
var num = 0;
res.data.forEach(function (data) {
if(data.area_name === row){
num = data.finished_weight_sum;
}
});
data2.push(num);
});
this.areaBarData.series =
[{
name: '完成量',
type: 'bar',
xAxisIndex: null,
smooth: true,
emphasis: {
focus: 'series'
},
data: data2
}];
this.areaBar.setOption(this.areaBarData);
});
},
pieDataValueFormatter(param) {
return conver_amont(param) + "万吨";
},
pieDataFormatter(param) {
return param.name + '\r\n' + this.pieDataValueFormatter(param.value);
},
getLoseAndAdd() {
getOrderLoseAddCustomer(this.today).then(res => {
let data = res.data
this.lskh.amount = conver_amont(data.lost_sell_settle_amount_sum);
this.lskh.weight = conver_amont(data.lost_weight_sum);
this.xzkh.amount = conver_amont(data.add_sell_settle_amount_sum);
this.xzkh.weight = conver_amont(data.add_weight_sum);
})
},
getOrderBusinessCondition() {
getOrderBusinessConditionData(this.today).then(res => {
let data = res.data
this.drddl.amount = conver_amont(data.cur_sell_settle_amount);
this.drddl.weight = conver_amont(data.cur_unit_weight);
this.drydl.count = data.drydl_count;
this.drydl.weight = conver_amont(data.drydl_weight);
this.drwcl.amount = conver_amont(data.cur_finish_sell_settle_amount);
this.drwcl.weight = conver_amont(data.cur_finish_unit_weight);
this.yl.amount = conver_amont(data.cur_unfinish_sell_settle_amount);
this.yl.weight = conver_amont(data.cur_unfinish_unit_weight);
})
},
getTargetOrderDataByConditionCount() {
getTargetOrderDataByConditionCount({cur_day: this.today,time_type:"day",group_type:"01"},(res) => {this.targetAchievement.day = res;})
getTargetOrderDataByConditionCount({cur_day: this.today,time_type:"month",group_type:"01"},(res) => {this.targetAchievement.month = res;})
getTargetOrderDataByConditionCount({cur_day: this.today,time_type:"year",group_type:"01"},(res) => {this.targetAchievement.year = res;})
}
}, },
mounted() { mounted() {
setTimeout(() => { this.$router.push("/index-sale")
// 倒计时器
this.refreshData(); this.countDownTimer = setInterval(() => {
window.addEventListener('resize', this.resizeChart); this.countDown--
}, 500); if (this.countDown <= 0) {
this.countDown = 10;
},
beforeDestroy() {
window.removeEventListener("resize", this.resizeChart);
},
watch:{
countDown(n,o){
if (n === 1){
this.refreshData();
} }
this.setCurrentDateTime();
}, 1000)
}, },
}, beforeDestroy() {
props:{ // 倒计时器
countDown:{ if (this.countDownTimer) {
type: Number clearInterval(this.countDownTimer)
} }
} }
};
</script>
<style lang="postcss">
#ar_company_list:hover {
background-color: #19EBFF10;
transform: scale(101%);
} }
</script>
.container { <style>
display: flex; /* 使用 Flexbox 布局 */ @import "../../../node_modules/materialize-css/bin/materialize.css";
height: 100vh; /* 视口高度 */
width: 100%;
max-width: 100%;
}
.left-bar { #app {
width: 25%; /* 左侧栏宽度 */
/*background-color: #f0f0f0; !* 背景色 *!*/
/*padding: 10px; !* 内边距 *!*/
justify-content: space-around;
display: flex;
padding: 1rem;
} }
.right-container { @media only screen and (max-width: 992px) {
flex: 1; /* 剩余空间，右侧的部分 */ header, main, footer {
display: flex; padding-left: 0;
flex-direction: column; /* 垂直排列 */ }
width: 75%; /* 右侧栏宽度 */
} }
.btn{
.right-top { height: 70%;
margin: 0.5%;
height: 50%; /* 右上栏高度，设为 50% */ border: none;
justify-content: space-around; font-size: 12px;
display: flex; font-weight: bold;
padding: 1rem; border-radius: 25px;
padding: 0 10px;
line-height: 100%;
color: #00c8d6;
background-color: #1234a1;
margin: auto;
} }
.btn:hover{
.right-bottom { color: #1234a1 !important;
height: 50%; /* 右下栏高度，设为 50% */ background-color: #00c8d6 !important;
justify-content: space-around;
display: flex;
padding: 1rem;
} }
/*.trade_left {*/
/* width: 100%;*/
/*}*/
/*.trade_middle {*/
/* width: 61%;*/
/*}*/
/*.trade_right {*/
/* width: 33%;*/
/*}*/
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment