Skip to content

S
shld-databoard-ui
Commit 93b3b0fd authored by 王礼鸿 Baimax Wang's avatar 王礼鸿 Baimax Wang
Browse files
Options

首页提交

parent 3a46442a
Hide whitespace changes
Inline Side-by-side
Showing with 611 additions and 70 deletions
src/module/databoard/components/chart/ring-pie-chart.vue 0 → 100644
View file @ 93b3b0fd
<template>
<div ref="chart" style="width: 100%;height: 50%;" @click=""/>
</template>
<script>
import * as echarts from "_echarts@5.4.3@echarts";
export default {
name:"RingPieChart",
data() {
return {
option:{
tooltip: {
trigger: 'item'
},
series: [
{
name: '',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: true,
// position: 'center',
fontSize: 12,
color: '#5eeef4',
formatter(param) {
return param.name + '\r\n' + param.value
}
},
emphasis: {
label: {
show: true,
fontSize: 12,
fontWeight: 'bold',
color: '#5eeef4',
}
},
data: this.data
}
]
},
chart: null,
}
},
watch: {
data(newValue, oldValue){
this.option.data = newValue;
this.chart.setOption(this.option);
}
},
methods: {
resizeChart() {
if (this.chart) {
this.chart.resize();
}
}
},
mounted() {
setTimeout(() => {
let chartDom = this.$refs.chart;
this.chart = echarts.init(chartDom);
this.chart.setOption(this.option);
window.addEventListener('resize', this.resizeChart);
}, 500)
},
beforeDestroy() {
window.removeEventListener("resize", this.resizeChart);
},
props:{
name: {
type: String,
default: "环形饼图",
},
data: {
type: Array,
default: function () {
return [
{value: 500, name: '值1'},
{value: 2500, name: '值3'},
{value: 1100, name: '值2'},
];
},
}
}
}
</script>
<style scoped>
</style>
src/module/databoard/components/layout/num-with-r-b-mark.vue deleted 100644 → 0
View file @ 3a46442a
<template>
<div>
<div class="c_num">
<b>
<slot name="num"></slot>
</b>
<span class="c_unit">
<slot name="unit"></slot>
</span>
</div>
</div>
</template>
<script>
export default {
name:"NumWithRBMark",
data() {
return {
};
},
methods: {}
};
</script>
<style scoped>
.c_fl{
float: left;
}
.c_num{
position: relative;
font-size: 32px;
line-height: 46px;
text-align: center;
height: 100%;
width: 100%;
}
.c_unit{
position: absolute;
right: 0px;
bottom: 0px;
font-size: 16px;
line-height: 16px;
font-weight: normal;
text-align: center;
float: right;
width: 2em;
}
</style>
src/module/databoard/components/layout/title-content-mark.vue 0 → 100644
View file @ 93b3b0fd
<template>
<div class="bd" :class="{'center-bd': isCenter}">
<div class="title" v-if="title" :class="{'center-title': isCenter}" :style="{'--titleHeight': titleHeight}">
{{title}}
</div>
<div class="content" :style="{'--titleHeight': titleHeight}">
<b v-if="isBold" :style="contentStyle">
{{content}}
</b>
<b v-if="!isBold" style="font-weight: normal" :style="contentStyle">
{{content}}
</b>
<span class="mark" :style="{'--markWidth': mark.length},markStyle">
{{mark}}
</span>
</div>
</div>
</template>
<script>
export default {
name:"TitleContentMark",
data() {
return {
};
},
props:{
title: {
type: String,
default: "",
},
mark: {
type: String,
default: "",
},
content: {
type: String,
default: "",
},
titleHeight: {
type: String,
default: "20%",
},
isCenter: {
type: Boolean,
},
isBold:{
type: Boolean,
},
contentStyle:{
type: [String,Object],
},
markStyle:{
type: [String,Object],
}
},
methods: {},
computed:{
}
};
</script>
<style scoped>
:root{
--markWidth: 2em;
--titleHeight: 20%;
}
.bold{
font-weight: bold;
}
.bd{
height: 100%;
padding: 0 0 2% 0%;
}
.center-bd{
padding: 0 10% 6% 10%;
}
.title{
color: white;
height: var(--titleHeight);
margin-left: 10%;
line-height: 30px;
}
.center-title{
margin: 0;
display: block;
text-align: center;
width: 100%;
}
.content{
display: flex;
align-items: center;
position: relative;
font-size: 30px;
text-align: center;
height: calc(100% - var(--titleHeight));
width: 100%;
}
.content > b{
//margin-left: 12%;
width: 100%;
}
.mark{
position: absolute;
right: 0px;
bottom: 0px;
font-size: 14px;
line-height: 16px;
font-weight: normal;
text-align: center;
float: right;
width: var(--markWidth);
}
</style>
src/module/databoard/components/table/table-column.vue 0 → 100644
View file @ 93b3b0fd
<template>
<table>
<thead v-if="showHead">
<tr><th>{{title}}&nbsp;</th></tr>
</thead>
<tbody>
<tr v-for="row in data"><td :style="eval(cellStyleJs,row[name])">{{row[name]}}</td></tr>
</tbody>
</table>
</template>
<script>
export default {
name:"TableColumn",
data() {
return {
}
},
methods: {
eval(str,data){
let res;
if (str){
res = eval(str);
}else if (this.cellStyleFunction) {
res = this.cellStyleFunction(data);
}
return res;
}
},
props:{
name: {
type: String,
default: "",
},
title: {
type: String,
default: "",
},
showHead: {
type: Boolean,
},
data: {
type: Array,
},
cellStyleJs: {
type: String,
},
cellStyleFunction:{
type: Function
},
}
}
</script>
<style scoped>
table{
color: white;
}
th{
color: white;
font-size: 12px;
font-weight: normal;
}
table,th,td,tr,thead{
padding: 0;
margin: 0;
border: none;
}
tr{
width: 100%;
}
</style>
src/module/databoard/index.vue
View file @ 93b3b0fd
<template> <template>
<div class="main"> <div class="main" @click="testClick">
<div class="middle"> <div class="middle">
<display-board class="trade_left" title="营业情况"> <display-board class="trade_left" title="营业情况">
<div style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;"> <div style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;">
<contrast-card style="height: 28%;">content</contrast-card> <contrast-card v-for="data in mockData.yyqk" style="height: 28%;">
<contrast-card style="height: 28%;">content</contrast-card> <title-content-mark style="width: 40%;color: #369afa;float: left;" :title="data.title" :content="data.amount" :mark="data.unit"/>
<contrast-card style="height: 28%;">content</contrast-card> <div style="width: 60%; height: 100%; float:left; padding: 4% 4% 0 12%; line-height: 26px;; display: flex; align-items: center;">
<table-column style="float: left;width: 25%;" :data="data.hb" name="title"/>
<table-column style="float: left;width: 40%;" :data="data.hb" name="amount"/>
<table-column style="float: left;width: 35%;" :data="data.hb" name="rate" :cell-style-function="cellStyleFunction"/>
<!-- <table-column style="float: left;width: 35%;" :data="data.hb" name="rate" cell-style-js="var res = {color: '#5eeef4'}; if(data.indexOf('+') !== -1){res.color = '#fee064'} res; "/>-->
</div>
</contrast-card>
</div> </div>
</display-board> </display-board>
<display-board class="trade_middle" corner_size="large"> <display-board class="trade_middle" corner_size="large">
<div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem"> <div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem">
<simple-card style="width: 30%;height: 100%">content</simple-card> <simple-card v-for="data in mockData.sr" style="width: 30%;height: 100%">
<simple-card style="width: 30%;height: 100%">content</simple-card> <title-content-mark style="color: #5eeef4;" :title="data.title" :content="data.value" :mark="'万元'" isCenter isBold/>
<simple-card style="width: 30%;height: 100%">content</simple-card> </simple-card>
</div> </div>
<main-bar-chart style="width: 100%; height: 64%;"></main-bar-chart> <main-bar-chart style="width: 100%; height: 64%;"></main-bar-chart>
</display-board> </display-board>
<display-board class="trade_right" title="账款情况"> <display-board class="trade_right" title="账款情况">
<div style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;"> <div style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;">
<contrast-card style="height: 28%;">content</contrast-card> <contrast-card v-for="data in mockData.zkqk" style="height: 28%;">
<contrast-card style="height: 28%;">content</contrast-card> <title-content-mark style="width: 40%;color: #369afa;float: left;" :title="data.title" :content="data.amount" :mark="data.unit"/>
<contrast-card style="height: 28%;">content</contrast-card> <div style="width: 60%; height: 100%; float:left; padding: 4% 4% 0 12%; line-height: 26px;; display: flex; align-items: center;">
<table-column style="float: left;width: 25%;" :data="data.hb" name="title"/>
<table-column style="float: left;width: 40%;" :data="data.hb" name="amount"/>
<table-column style="float: left;width: 35%;" :data="data.hb" name="rate" :cell-style-function="cellStyleFunction"/>
</div>
</contrast-card>
</div> </div>
</display-board> </display-board>
</div> </div>
...@@ -30,19 +41,57 @@ ...@@ -30,19 +41,57 @@
</display-board> </display-board>
<div class="trade_middle" style="border: none;box-shadow: none;"> <div class="trade_middle" style="border: none;box-shadow: none;">
<div style="display: flex; justify-content: space-between; height: 50%;"> <div style="display: flex; justify-content: space-between; height: 50%;">
<display-board style="width: 32%;" title="每日目标情况">content</display-board> <display-board style="width: 32%;" title="每日目标情况">
<display-board style="width: 32%;" title="月度目标情况">content</display-board> <div style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;">
<display-board style="width: 32%;" title="年度目标情况">content</display-board> <table-column style="float: left;width: 35%;" :data="mockData.mrmbqk" name="title" show-head/>
<table-column style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;" :data="mockData.mrmbqk" name="actualValue" title="实时值" show-head/>
<table-column style="float: left;width: 20%;" :data="mockData.mrmbqk" name="currentValue" title="目标值" show-head/>
</div>
</display-board>
<display-board style="width: 32%;" title="月度目标情况">
<div style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;">
<table-column style="float: left;width: 35%;" :data="mockData.ydmbqk" name="title" show-head/>
<table-column style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;" :data="mockData.ydmbqk" name="actualValue" title="实时值" show-head/>
<table-column style="float: left;width: 20%;" :data="mockData.ydmbqk" name="currentValue" title="目标值" show-head/>
</div>
</display-board>
<display-board style="width: 32%;" title="年度目标情况">
<div style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;">
<table-column style="float: left;width: 35%;" :data="mockData.ndmbqk" name="title" show-head/>
<table-column style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;" :data="mockData.ndmbqk" name="actualValue" title="实时值" show-head/>
<table-column style="float: left;width: 20%;" :data="mockData.ndmbqk" name="currentValue" title="目标值" show-head/>
</div>
</display-board>
</div> </div>
<div style="display: flex; justify-content: space-between; height: 50%; padding-top: 2rem;"> <div style="display: flex; justify-content: space-between; height: 50%; padding-top: 2rem;">
<showcase style="width: 18%;" title="当日订单量">content</showcase> <showcase style="width: 18%;" title="当日订单量">
<showcase style="width: 18%;" title="当日完成量">content</showcase> <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;" content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.drddl.weight" mark="万吨" />
<showcase style="width: 18%;" title="余量">content</showcase> <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;" content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.drddl.amount" mark="万元"/>
<showcase style="width: 18%;" title="流失客户">content</showcase> </showcase>
<showcase style="width: 18%;" title="新增客户">content</showcase> <showcase style="width: 18%;" title="当日完成量">
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;" content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.drwcl.weight" mark="万吨" />
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;" content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.drwcl.amount" mark="万元"/>
</showcase>
<showcase style="width: 18%;" title="余量">
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;" content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.yl.weight" mark="万吨" />
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;" content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.yl.amount" mark="万元"/>
</showcase>
<showcase style="width: 18%;" title="流失客户">
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;" content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.lskh.weight" mark="万吨" />
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;" content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.lskh.amount" mark="万元"/>
</showcase>
<showcase style="width: 18%;" title="新增客户">
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;" content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.xzkh.weight" mark="万吨" />
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;" content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.xzkh.amount" mark="万元"/>
</showcase>
</div> </div>
</div> </div>
<display-board class="trade_right" title="当日订单量占比">content</display-board> <display-board class="trade_right" 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%;" name="运输类型占比" :data="mockData.drddlzb.transportType"/>
<ring-pie-chart ref="customerChart" style="width: 100%;height: 50%;" name="公司占比" :data="mockData.drddlzb.customer"/>
</div>
</display-board>
</div> </div>
</div> </div>
</template> </template>
...@@ -53,9 +102,16 @@ import ContrastCard from "./components/card/contrast-card.vue"; ...@@ -53,9 +102,16 @@ import ContrastCard from "./components/card/contrast-card.vue";
import SimpleCard from "./components/card/simple-card.vue"; import SimpleCard from "./components/card/simple-card.vue";
import MainBarChart from "./components/chart/main-bar-chart.vue"; import MainBarChart from "./components/chart/main-bar-chart.vue";
import WinnersList from "./components/card/winners-list.vue"; import WinnersList from "./components/card/winners-list.vue";
import TitleContentMark from "./components/layout/title-content-mark.vue";
import TableColumn from "./components/table/table-column.vue";
import * as echarts from "_echarts@5.4.3@echarts";
import RingPieChart from "./components/chart/ring-pie-chart.vue";
export default { export default {
components: { components: {
RingPieChart,
TableColumn,
TitleContentMark,
Showcase, Showcase,
DisplayBoard, DisplayBoard,
ContrastCard, ContrastCard,
...@@ -65,10 +121,259 @@ export default { ...@@ -65,10 +121,259 @@ export default {
}, },
data() { data() {
return { return {
mockData: {
yyqk: {
yye: {
title: "营业额",
amount: "20,303",
unit: "万元",
hb: [
{
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%",
},
],
},
},
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%",
},
],
},
},
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",
},
],
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: '宝山钢铁股份有限公司'},
]
},
},
charts:{}
} }
}, },
methods: { methods: {
cellStyleFunction(data) {
let res = {color: '#5eeef4'};
if(data.indexOf('+') !== -1){
res.color = '#fee064'
}
return res;
},
resizeChart() {
for (let chartsKey in this.charts) {
this.charts[chartsKey].resize();
}
},
testClick(){
}
},
mounted() {
setTimeout(() => {
window.addEventListener('resize', this.resizeChart);
}, 500)
}, },
beforeDestroy() {
window.removeEventListener("resize", this.resizeChart);
}
}; };
</script> </script>
src/module/databoard/index_back1.vue
View file @ 93b3b0fd
...@@ -217,7 +217,7 @@ import InfoCard from "./components/card/info-card.vue"; ...@@ -217,7 +217,7 @@ import InfoCard from "./components/card/info-card.vue";
import ContrastCard from "./components/card/contrast-card.vue"; import ContrastCard from "./components/card/contrast-card.vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import TitleContent from "./components/container/title-content.vue"; import TitleContent from "./components/container/title-content.vue";
import NumWithRBMark from "./components/layout/num-with-r-b-mark.vue"; import NumWithRBMark from "./components/layout/title-content-mark.vue";
import Card from "./components/card/card.vue"; import Card from "./components/card/card.vue";
import ContainerWithBord from "./components/container/container-with-bord.vue"; import ContainerWithBord from "./components/container/container-with-bord.vue";
export default { export default {
......
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