Skip to content

S
shld-databoard-ui
Commit 8c893c04 authored by 张恒's avatar 张恒
Browse files
Options

Demo

parent 9ed94649
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 211 additions and 233 deletions
src/module/databoard/assets/index.css
View file @ 8c893c04
......@@ -62,7 +62,7 @@
width: 25%;
float: right;
display: flex;
justify-content: flex-start;
justify-content: flex-end;
align-items: center;
white-space: nowrap;
}
......
src/module/databoard/components/card/paging-list.vue
View file @ 8c893c04
......@@ -18,7 +18,6 @@
</tbody>
</table>
</div>
<div class="list middle"></div>
<div class="list">
<table class="lw_table">
<tbody>
......@@ -94,6 +93,8 @@ export default {
}
.winner_list {
display: flex;
justify-content: space-around;
text-align: center;
}
......@@ -117,7 +118,7 @@ tr:nth-child(even) {
}
td {
padding: 0 0 0 1rem;
padding: 0 0.5rem 0 0.5rem;
}
.col_number {
......@@ -130,6 +131,7 @@ td {
}
.winner_span {
white-space: nowrap;
color: white;
font-size: 14px;
}
......@@ -142,17 +144,4 @@ td {
font-weight: bold;
}
.list {
display: inline-grid;
width: 35%;
}
.middle {
width: 15%;
}
.bottom {
}
</style>
src/module/databoard/components/chart/ar-company-bar.vue
View file @ 8c893c04
......@@ -120,7 +120,7 @@ export default {
},
mounted() {
// 获取图表数据
let data = [{"unregister_amount":2538.22,"settle_company":"上海******有限公司"},{"unregister_amount":270.32,"settle_company":"上海******有限公司"},{"unregister_amount":203.7,"settle_company":"南京******有限公司"},{"unregister_amount":100.37,"settle_company":"上海******有限公司"},{"unregister_amount":100.21,"settle_company":"北京******有限公司"},{"unregister_amount":92.46,"settle_company":"上海******有限公司"},{"unregister_amount":83.66,"settle_company":"上海******有限公司"},{"unregister_amount":69.86,"settle_company":"上海******有限公司"},{"unregister_amount":56.76,"settle_company":"上海******有限公司"},{"unregister_amount":55.45,"settle_company":"上海******有限公司"},{"unregister_amount":39.9,"settle_company":"郑州******有限公司"},{"unregister_amount":38.22,"settle_company":"上海******有限公司"},{"unregister_amount":37.34,"settle_company":"南京******有限公司"},{"unregister_amount":35.97,"settle_company":"浙江******有限公司"},{"unregister_amount":32.97,"settle_company":"上海******有限公司"},{"unregister_amount":24.29,"settle_company":"天津******有限公司"},{"unregister_amount":19.09,"settle_company":"南京******有限公司"},{"unregister_amount":17.01,"settle_company":"上海******有限公司"},{"unregister_amount":16.45,"settle_company":"长春******有限公司"},{"unregister_amount":14.98,"settle_company":"厦门******有限公司"}];
let data = [{"unregister_amount":2538.22,"settle_company":"上海**有限公司"},{"unregister_amount":270.32,"settle_company":"上海**有限公司"},{"unregister_amount":203.7,"settle_company":"南京**有限公司"},{"unregister_amount":100.37,"settle_company":"上海**有限公司"},{"unregister_amount":100.21,"settle_company":"北京**有限公司"},{"unregister_amount":92.46,"settle_company":"上海**有限公司"},{"unregister_amount":83.66,"settle_company":"上海**有限公司"},{"unregister_amount":69.86,"settle_company":"上海**有限公司"},{"unregister_amount":56.76,"settle_company":"上海**有限公司"},{"unregister_amount":55.45,"settle_company":"上海**有限公司"},{"unregister_amount":39.9,"settle_company":"郑州**有限公司"},{"unregister_amount":38.22,"settle_company":"上海**有限公司"},{"unregister_amount":37.34,"settle_company":"南京**有限公司"},{"unregister_amount":35.97,"settle_company":"浙江**有限公司"},{"unregister_amount":32.97,"settle_company":"上海**有限公司"},{"unregister_amount":24.29,"settle_company":"天津**有限公司"},{"unregister_amount":19.09,"settle_company":"南京**有限公司"},{"unregister_amount":17.01,"settle_company":"上海**有限公司"},{"unregister_amount":16.45,"settle_company":"长春**有限公司"},{"unregister_amount":14.98,"settle_company":"厦门**有限公司"}];
let xAxisData = []
let seriesData = []
for (let item of data) {
......
src/module/databoard/components/chart/ar-monthly-company-bar.vue
View file @ 8c893c04
......@@ -112,7 +112,7 @@ export default {
}
this.barChart.title.text = month + " 已开票未收款（结算单位）"
// 获取图表数据
let data = [{"unregister_amount":1293.17,"settle_month":"2023-10","settle_company":"上海******有限公司"},{"unregister_amount":87.72,"settle_month":"2023-10","settle_company":"北京******有限公司"},{"unregister_amount":60.23,"settle_month":"2023-10","settle_company":"南京******有限公司"},{"unregister_amount":47.17,"settle_month":"2023-10","settle_company":"上海******有限公司"},{"unregister_amount":35.76,"settle_month":"2023-10","settle_company":"上海******有限公司"},{"unregister_amount":24.83,"settle_month":"2023-10","settle_company":"上海******有限公司"},{"unregister_amount":24.1,"settle_month":"2023-10","settle_company":"天津******有限公司"},{"unregister_amount":22.38,"settle_month":"2023-10","settle_company":"上海******有限公司"},{"unregister_amount":17.01,"settle_month":"2023-10","settle_company":"上海******有限公司"},{"unregister_amount":16.02,"settle_month":"2023-10","settle_company":"浙江******有限公司"},{"unregister_amount":14.56,"settle_month":"2023-10","settle_company":"厦门******有限公司"},{"unregister_amount":13.8,"settle_month":"2023-10","settle_company":"上海******有限公司"},{"unregister_amount":12.44,"settle_month":"2023-10","settle_company":"郑州******有限公司"},{"unregister_amount":10.66,"settle_month":"2023-10","settle_company":"上海******有限公司"},{"unregister_amount":8.62,"settle_month":"2023-10","settle_company":"上海******有限公司"},{"unregister_amount":8.3,"settle_month":"2023-10","settle_company":"上海******有限公司"},{"unregister_amount":8.1,"settle_month":"2023-10","settle_company":"天津******有限公司"},{"unregister_amount":7.08,"settle_month":"2023-10","settle_company":"南京******有限公司"},{"unregister_amount":7.07,"settle_month":"2023-10","settle_company":"济南******有限公司"},{"unregister_amount":6.41,"settle_month":"2023-10","settle_company":"江苏******有限公司"}];
let data = [{"unregister_amount":1293.17,"settle_month":"2023-10","settle_company":"上海**有限公司"},{"unregister_amount":87.72,"settle_month":"2023-10","settle_company":"北京**有限公司"},{"unregister_amount":60.23,"settle_month":"2023-10","settle_company":"南京**有限公司"},{"unregister_amount":47.17,"settle_month":"2023-10","settle_company":"上海**有限公司"},{"unregister_amount":35.76,"settle_month":"2023-10","settle_company":"上海**有限公司"},{"unregister_amount":24.83,"settle_month":"2023-10","settle_company":"上海**有限公司"},{"unregister_amount":24.1,"settle_month":"2023-10","settle_company":"天津**有限公司"},{"unregister_amount":22.38,"settle_month":"2023-10","settle_company":"上海**有限公司"},{"unregister_amount":17.01,"settle_month":"2023-10","settle_company":"上海**有限公司"},{"unregister_amount":16.02,"settle_month":"2023-10","settle_company":"浙江**有限公司"},{"unregister_amount":14.56,"settle_month":"2023-10","settle_company":"厦门**有限公司"},{"unregister_amount":13.8,"settle_month":"2023-10","settle_company":"上海**有限公司"},{"unregister_amount":12.44,"settle_month":"2023-10","settle_company":"郑州**有限公司"},{"unregister_amount":10.66,"settle_month":"2023-10","settle_company":"上海**有限公司"},{"unregister_amount":8.62,"settle_month":"2023-10","settle_company":"上海**有限公司"},{"unregister_amount":8.3,"settle_month":"2023-10","settle_company":"上海**有限公司"},{"unregister_amount":8.1,"settle_month":"2023-10","settle_company":"天津**有限公司"},{"unregister_amount":7.08,"settle_month":"2023-10","settle_company":"南京**有限公司"},{"unregister_amount":7.07,"settle_month":"2023-10","settle_company":"济南**有限公司"},{"unregister_amount":6.41,"settle_month":"2023-10","settle_company":"江苏**有限公司"}];
let xAxisData = []
let seriesData = []
for (let item of data) {
......
src/module/databoard/components/container/display-board.vue
View file @ 8c893c04
......@@ -2,7 +2,7 @@
<div class="display_board">
<!--角标组件-->
<corner-mark-large v-if="$props.corner_size === 'large'"/>
<corner-mark-small v-else/>
<corner-mark-small v-else-if="$props.corner_size === 'small'"/>
<!--标题组件-->
<board-title-large v-if="$props.title && $props.title_size === 'large'">{{ $props.title }}</board-title-large>
<board-title-small v-else-if="$props.title">{{ $props.title }}</board-title-small>
......@@ -59,7 +59,7 @@ export default {
.display_board {
position: relative;
box-sizing: border-box;
border-radius: 1.5rem;
border-radius: 1rem;
border: 0.2rem solid var(--container-border-color);
background-color: var(--container-background-color);
box-shadow: 0 0 3rem var(--container-shadow-color) inset;
......@@ -69,7 +69,7 @@ export default {
position: absolute;
height: 100%;
width: 100%;
padding: 1rem;
padding: 0.5rem;
}
</style>
......
src/module/databoard/components/container/showcase.vue
View file @ 8c893c04
......@@ -45,7 +45,7 @@ export default {
}
.show_content {
height: 40%;
height: 50%;
width: 100%;
color: var(--lightblue-text-color);
}
......@@ -74,7 +74,6 @@ export default {
.showcase_title {
position: absolute;
height: 0;
color: var(--white-text-color);
font-size: 12px;
font-family: 黑体, serif;
......
src/module/databoard/components/layout/title-content-mark.vue
View file @ 8c893c04
......@@ -74,7 +74,7 @@ export default {
.bd{
height: 100%;
padding: 0 0 2% 0%;
padding: 0 0 2% 0;
}
.center-bd{
......@@ -100,8 +100,8 @@ export default {
display: flex;
align-items: center;
position: relative;
font-size: 30px;
text-align: center;
font-size: 20px;
//text-align: center;
height: calc(100% - var(--titleHeight));
width: 100%;
}
......
src/module/databoard/components/table/table-column.vue
View file @ 8c893c04
<template>
<table>
<thead v-if="showHead">
<tr><th :style="eval('title',title)">{{titleFormatter?titleFormatter(title):title}}&nbsp;</th></tr>
<tr><th :style="eval('title',title)">{{titleFormatter?titleFormatter(title):title}}</th></tr>
</thead>
<tbody>
<tr v-for="row in data"><td :style="eval('cell',(row[name]?row[name]:''))">{{valueFormatter?valueFormatter(row[name]?row[name]:''):row[name]?row[name]:''}}</td></tr>
......@@ -92,6 +92,8 @@ table,th,td,tr,thead{
tr{
width: 100%;
}
th, td{
text-align: right;
}
</style>
src/module/databoard/databoard/js/indexPieData.js
View file @ 8c893c04
......@@ -17,7 +17,7 @@ export const getTransportTypeOrderFinishPie = async (callback,date) => {
}
export const getCustomerOrderFinishPie = async (callback,date) => {
let resList = new Array();
let data = {"上海******有限公司1":{"cur_gross_profit_amount":1381.535,"cur_sell_settle_amount":48353.725,"entrust_agency_name":"上海******有限公司1","cur_buy_settle_amount":46972.19,"cur_unit_weight":1381.535},"上海******有限公司2":{"cur_gross_profit_amount":735.775,"cur_sell_settle_amount":0,"entrust_agency_name":"上海******有限公司2","cur_buy_settle_amount":735.775,"cur_unit_weight":1201.59},"浙江******有限公司":{"cur_gross_profit_amount":1237.95,"cur_sell_settle_amount":1237.95,"entrust_agency_name":"浙江******有限公司","cur_buy_settle_amount":0,"cur_unit_weight":160.506},"上海******有限公司3":{"cur_gross_profit_amount":460.7568,"cur_sell_settle_amount":1330.8498,"entrust_agency_name":"上海******有限公司3","cur_buy_settle_amount":870.093,"cur_unit_weight":135.801},"天津******有限公司":{"cur_gross_profit_amount":938.212,"cur_sell_settle_amount":0,"entrust_agency_name":"天津******有限公司","cur_buy_settle_amount":938.212,"cur_unit_weight":520.244},"南京******有限公司":{"cur_gross_profit_amount":359.415,"cur_sell_settle_amount":1096.245,"entrust_agency_name":"南京******有限公司","cur_buy_settle_amount":736.83,"cur_unit_weight":730.083},"北京******有限公司":{"cur_gross_profit_amount":2318.555,"cur_sell_settle_amount":2318.555,"entrust_agency_name":"北京******有限公司","cur_buy_settle_amount":0,"cur_unit_weight":440.45},"广州******有限公司":{"cur_gross_profit_amount":4211.0898,"cur_sell_settle_amount":4211.0898,"entrust_agency_name":"广州******有限公司","cur_buy_settle_amount":0,"cur_unit_weight":460.486},"青岛******有限公司":{"cur_gross_profit_amount":2502.201,"cur_sell_settle_amount":2502.201,"entrust_agency_name":"青岛******有限公司","cur_buy_settle_amount":0,"cur_unit_weight":300.147}};
let data = {"上海**有限公司1":{"cur_gross_profit_amount":1381.535,"cur_sell_settle_amount":48353.725,"entrust_agency_name":"上海**有限公司1","cur_buy_settle_amount":46972.19,"cur_unit_weight":1381.535},"上海**有限公司2":{"cur_gross_profit_amount":735.775,"cur_sell_settle_amount":0,"entrust_agency_name":"上海**有限公司2","cur_buy_settle_amount":735.775,"cur_unit_weight":1201.59},"浙江**有限公司":{"cur_gross_profit_amount":1237.95,"cur_sell_settle_amount":1237.95,"entrust_agency_name":"浙江**有限公司","cur_buy_settle_amount":0,"cur_unit_weight":160.506},"上海**有限公司3":{"cur_gross_profit_amount":460.7568,"cur_sell_settle_amount":1330.8498,"entrust_agency_name":"上海**有限公司3","cur_buy_settle_amount":870.093,"cur_unit_weight":135.801},"天津**有限公司":{"cur_gross_profit_amount":938.212,"cur_sell_settle_amount":0,"entrust_agency_name":"天津**有限公司","cur_buy_settle_amount":938.212,"cur_unit_weight":520.244},"南京**有限公司":{"cur_gross_profit_amount":359.415,"cur_sell_settle_amount":1096.245,"entrust_agency_name":"南京**有限公司","cur_buy_settle_amount":736.83,"cur_unit_weight":730.083},"北京**有限公司":{"cur_gross_profit_amount":2318.555,"cur_sell_settle_amount":2318.555,"entrust_agency_name":"北京**有限公司","cur_buy_settle_amount":0,"cur_unit_weight":440.45},"广州**有限公司":{"cur_gross_profit_amount":4211.0898,"cur_sell_settle_amount":4211.0898,"entrust_agency_name":"广州**有限公司","cur_buy_settle_amount":0,"cur_unit_weight":460.486},"青岛**有限公司":{"cur_gross_profit_amount":2502.201,"cur_sell_settle_amount":2502.201,"entrust_agency_name":"青岛**有限公司","cur_buy_settle_amount":0,"cur_unit_weight":300.147}};
for (let key in data) {
resList.push({name: key, value: data[key].cur_unit_weight});
}
......
src/module/databoard/databoard/order-proportion.vue
View file @ 8c893c04
......@@ -13,10 +13,10 @@
</div>
<div class="card-board" v-if="currentBtn.subdivide === '01'">
<contrast-card :mouseHand="true" v-for="data in currentHeadData" style="height: 100%;width: 18%;" :class="{'selectCard': currentCard === data.key}" @click.native="selectCard(data)">
<title-content-mark style="color: #369afa;float: left;width: 40%;font-size: 18px" :title-style="{'font-weight': 'bold'}" :mark-style="{'bottom': '12%'}" :title="data.title" :content="data.amount" mark="万吨" isBold/>
<div style="width: 60%; height: 100%; float:left; padding: 2% 2% 0 8%; line-height: 40px; display: flex; align-items: center;font-size: 16px;">
<table-column style="float: left;width: 25%;" :data="data.hb" name="title"/>
<table-column style="float: left;width: 40%;" :data="data.hb" name="amount"/>
<title-content-mark style="color: #369afa;float: left;width: 35%;font-size: 18px" :title-style="{'font-weight': 'bold'}" :mark-style="{'bottom': '12%'}" :title="data.title" :content="data.amount" mark="万吨" isBold/>
<div style="width: 65%; height: 100%; float:left; display: flex; align-items: center;font-size: 16px; white-space: nowrap;">
<table-column style="float: left;width: 30%;" :data="data.hb" name="title"/>
<table-column style="float: left;width: 35%;" :data="data.hb" name="amount"/>
<table-column style="float: left;width: 35%;" :data="data.hb" name="rate" cell-style-js="var res = {color: 'rgb(51, 255, 102)'}; if(data.indexOf('+') !== -1){res.color = 'rgb(255, 51, 0)'} res;"/>
</div>
</contrast-card>
......@@ -24,21 +24,21 @@
<div class="card-board" v-if="currentBtn.subdivide !== '01'">
<contrast-card :mouseHand="true" v-for="data in currentHeadData" style="height: 100%;width: 18%;" :class="{'selectCard': currentCard === data.key}" @click.native="selectCard(data)" :style="listCardStyle">
<!-- 标题-->
<div style="width: 100%; height: 20%; float:left; padding: 2%; line-height: 28px; display: flex; align-items: center; font-size: 14px;">
<div style="width: 100%; height: 20%; float:left; display: flex; align-items: center; font-size: 14px;">
<table-column style="float: left;width: 80%;" :data="[]" name="title" :title="data.title" :title-formatter="value=> value+'(万吨/万元)'" show-head :title-style="{'font-size': '18px','padding-left':'3%','white-space': 'nowrap','font-weight': 'bold',}"/>
<table-column style="float: left;width: 0;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;" :data="[]" name="today"/>
<table-column style="float: left;width: 0;font-weight: bold;color: #5eeef4;text-align: center;" :data="[]" name="today"/>
<table-column style="float: left;width: 20%;" :data="[]" name="yesterday" :title="dateTimeChoice[currentBtn.date]" show-head/>
</div>
<div style="width: 100%; height: 80%; float:left; padding: 2%;margin-top: 1%; line-height: 28px; display: flex; align-items: center; font-size: 14px;">
<div style="width: 100%; height: 80%; float:left; margin-top: 1%; display: flex; align-items: center; font-size: 14px;">
<table-column style="float: left;width: 30%;" :data="data.data" name="title"/>
<table-column style="float: left;width: 50%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;" :data="data.data" name="today" :value-formatter="converAmont"/>
<table-column style="float: left;width: 50%;font-weight: bold;color: #5eeef4;text-align: center;" :data="data.data" name="today" :value-formatter="converAmont"/>
<table-column style="float: left;width: 20%;" :data="data.data" name="yesterday" :value-formatter="converAmont"/>
</div>
</contrast-card>
</div>
<div class="chart">
<display-board class="trade_left" title="订单量占比" title_size="large">
<winners-list style="height: 96%;overflow: auto;" id="ar_company_list" :rows="currentDetailData" :show-icon="false" :columns-style="{'title':{'width':'50%'},'订单量（万吨）':{'width':'30%'}}" :col-formatter="{'1':(v)=>v+'%'}"/>
<winners-list style="height: 96%;overflow: auto;" id="ar_company_list" :rows="currentDetailData" :show-icon="false" :columns-style="{'title':{'width':'45%'},'订单量(万吨)':{'width':'35%'}}" :col-formatter="{'1':(v)=>v+'%'}"/>
</display-board>
<line-bar-chart ref="chart" style="width: 75%;height: 100%;" :data="currentDetailData" x="company" y="value" :title="chartTitle" :formatter="formatter" :line-formatter="lineFormatter" bar-formatter="{@value}万吨"/>
</div>
......@@ -149,7 +149,7 @@ export default {
}
.card-board{
width: 100%;
height: 25%;
height: 28%;
display: flex;
justify-content: space-between;
padding: 2rem;
......
src/module/databoard/index.vue
View file @ 8c893c04
This diff is collapsed.
src/module/databoard/index_back1.vue
View file @ 8c893c04
......@@ -298,15 +298,15 @@ export default {
},
sr:[
{
title:'累计营业收入（当年）',
title:'累计营业收入(当年)',
value:'20,303',
},
{
title:'应收款（财务）',
title:'应收款(财务)',
value:'20,303',
},
{
title:'应收款（营销）',
title:'应收款(营销)',
value:'20,303',
},
],
......
src/module/index/index.html
View file @ 8c893c04
......@@ -20,11 +20,6 @@
padding: 0;
}
body{
min-height: 900px;
min-width: 1440px;
}
body, html {
margin: 0;
padding: 0;
......
src/module/index/index.vue
View file @ 8c893c04
......@@ -3,12 +3,12 @@
<div class="head">
<div class="text_left">
<input class="btn" type="button" value="返回上级" v-if="$route.fullPath !== '/index'" @click="goIndex">
<span>{{ currentDate }}</span>
<span>{{ currentTime }}</span>
<span>{{ currentWeek }}</span>
<span>刷新时间：{{ countDown }}s</span>
</div>
<div class="text_right">
<span>刷新时间：{{ countDown }}s</span>
<span>{{ currentDate }}</span>
<span>{{ currentTime }}</span>
<span style="padding-right: 1rem">{{ currentWeek }}</span>
</div>
<div id="top_title"></div>
</div>
......@@ -26,7 +26,7 @@ export default {
name: 'app',
data() {
return {
countDown: 10,
countDown: 9,
currentDate: null,
currentTime: null,
currentWeek: null,
......@@ -57,7 +57,7 @@ export default {
this.countDownTimer = setInterval(() => {
this.countDown--
if (this.countDown <= 0) {
this.countDown = 10;
this.countDown = 9;
}
this.setCurrentDateTime();
}, 1000)
......@@ -84,16 +84,15 @@ export default {
}
.btn{
height: 70%;
margin: 0.5%;
margin: auto;
border: none;
font-size: 12px;
font-weight: bold;
border-radius: 25px;
padding: 0 10px;
padding: 0 20px;
line-height: 100%;
color: #00c8d6;
background-color: #1234a1;
margin: auto;
}
.btn:hover{
color: #1234a1 !important;
......
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