Skip to content

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

绘制基础组件UI

parent 0b39aa25
Hide whitespace changes
Inline Side-by-side
Showing with 1562 additions and 708 deletions
config/index.js
View file @ 3a46442a
...@@ -6,8 +6,8 @@ module.exports = { ...@@ -6,8 +6,8 @@ module.exports = {
env: require('./prod.env'), env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'), index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'), assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static', assetsSubDirectory: 'databoard',
assetsPublicPath: '/assets/dist/', assetsPublicPath: '/assets/',
productionSourceMap: true, productionSourceMap: true,
// Gzip off by default as many popular static hosts such as // Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you. // Surge or Netlify already gzip all static assets for you.
......
src/module/databoard/assets/index.css
View file @ 3a46442a
:root {
--global-background-color: #020042; /* 全局背景色 */
--container-background-color: #020046; /* 容器背景色 */
--container-border-color: #0d53b7; /* 容器边框色 */
--container-shadow-color: #0930A9; /* 容器阴影色 */
--corner-background-color: #0E5FFF; /* 容器角标色 */
--card-background-color: #04175566; /* 卡片背景色 */
--card-border1-color: #3673A3; /* 卡片边框色1 */
--card-border2-color: #19EBFF; /* 卡片边框色2 */
--white-text-color: white; /* 白色文本 */
--lightblue-text-color: #75FEFF; /* 亮蓝色文本 */
--darkblue-text-color: #47AAFF; /* 深蓝色文本 */
--lightyellow-text-color: #FEE165; /* 亮黄色文本 */
}
.page { .page {
background-color: rgba(0, 10, 50, 1.000000); height: 100%;
position: relative;
height: 1080.00px;
width: 100%; width: 100%;
min-width: 1920px; background-color: var(--global-background-color);
overflow: hidden;
background: url(./img/SketchPng1d2d7c804f3d192d29ad3750c138064d493e3f502f79253a3bfa266fbdda7488.png) 100% no-repeat;
background-size: 100% 100% background-size: 100% 100%
} }
.head { .head {
height: 10%; height: 10%;
}
.head_content {
background: url(./img/SketchPng5fda9a9add36a51f8fa99e5a1426c6a0630dbdfb68a8e0ea5fbbd1c1392d5e28.png) 0px 0px no-repeat;
background-position: center;
width: 100%; width: 100%;
height: 100%; background-repeat: no-repeat;
} background-position: center;
background-image: url(./img/top_img_2x.png);
.text_date { background-size: cover;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 20.00px;
letter-spacing: 1.6666666269302368px;
text-align: left;
margin: 1% 0 0 6%
}
.text_time {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 20.00px;
letter-spacing: 1.6666666269302368px;
text-align: left;
margin: 1% 0 0 1%
} }
.head span {
.text_week { margin-left: 1rem;
overflow-wrap: break-word; color: var(--lightblue-text-color);
color: rgba(255, 255, 255, 1); font-size: 20px;
font-size: 20.00px; font-family: AlimamaShuHeiTi, serif;
letter-spacing: 1.6666666269302368px; font-weight: bold;
text-align: left; letter-spacing: 2px;
margin: 1% 0 0 1%
} }
.text_left {
.text_title { height: 50%;
text-shadow: 0px 2px 6px rgba(121, 179, 255, 0.600000); width: 25%;
overflow-wrap: break-word; float: left;
color: rgba(255, 255, 255, 1); display: flex;
font-size: 40.00px; justify-content: flex-end;
letter-spacing: 8px; align-items: center;
font-family: AlimamaShuHeiTi;
text-align: center;
white-space: nowrap; white-space: nowrap;
margin: 1% 0 0 19%
}
.text_car {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 20.00px;
letter-spacing: 1.6666666269302368px;
font-family: Helvetica;
text-align: left;
margin: 1% 0 0 20%
}
/**边框**/
.l_t_line {
width: 5px;
height: 24px;
left: -3px;
top: -3px;
} }
.t_l_line { .text_right {
height: 5px; height: 50%;
width: 26px; width: 25%;
left: -3px; float: right;
top: -3px; display: flex;
} justify-content: flex-start;
align-items: center;
.t_line_box { white-space: nowrap;
position: absolute;
width: 100%;
height: 100%;
}
.t_line_box i {
background-color: #4788fb;
box-shadow: 0px 0px 10px #4788fb;
position: absolute;
}
.t_r_line {
height: 5px;
width: 26px;
right: -3px;
top: -3px;
}
.r_t_line {
width: 5px;
height: 24px;
right: -3px;
top: -3px;
}
.l_b_line {
width: 5px;
height: 24px;
left: -3px;
bottom: -3px;
}
.b_l_line {
height: 5px;
width: 26px;
left: -3px;
bottom: -3px;
}
.r_b_line {
width: 5px;
height: 24px;
right: -3px;
bottom: -3px;
}
.b_r_line {
height: 5px;
width: 26px;
right: -3px;
bottom: -3px;
}
.middle > div {
box-sizing: border-box;
border: 1px solid #2C58A6;
position: relative;
box-shadow: 0 0 10px #2C58A6;
} }
.middle { .middle {
height: 45%; height: 49%;
justify-content: center; justify-content: space-around;
display: flex; display: flex;
padding: 1rem;
} }
.content { .content {
...@@ -163,20 +70,15 @@ ...@@ -163,20 +70,15 @@
} }
.trade_left { .trade_left {
margin-bottom: 50px; width: 25%;
width: 20%;
} }
.trade_middle { .trade_middle {
margin-bottom: 50px; width: 45%;
width: 52%;
margin-left: 1%;
} }
.trade_right { .trade_right {
margin-bottom: 50px; width: 25%;
width: 20%;
margin-left: 1%;
} }
src/module/databoard/assets/index_back.css
View file @ 3a46442a
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
/*width: 1920.00px;*/ /*width: 1920.00px;*/
height: 1080.00px; height: 1080.00px;
overflow: hidden; overflow: hidden;
background: url(SketchPng1d2d7c804f3d192d29ad3750c138064d493e3f502f79253a3bfa266fbdda7488.png) 100% no-repeat; background: url(./img/SketchPng1d2d7c804f3d192d29ad3750c138064d493e3f502f79253a3bfa266fbdda7488.png) 100% no-repeat;
background-size: 100% 100% background-size: 100% 100%
} }
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
.text-wrapper_46 { .text-wrapper_46 {
/*width: 1970.00px;*/ /*width: 1970.00px;*/
height: 92.00px; height: 92.00px;
background: url(SketchPng5fda9a9add36a51f8fa99e5a1426c6a0630dbdfb68a8e0ea5fbbd1c1392d5e28.png) 0px 0px no-repeat; background: url(./img/SketchPng5fda9a9add36a51f8fa99e5a1426c6a0630dbdfb68a8e0ea5fbbd1c1392d5e28.png) 0px 0px no-repeat;
background-size: 1920px 131px background-size: 1920px 131px
} }
......
src/module/databoard/components/card/contrast-card-backup.vue 0 → 100644
View file @ 3a46442a
<template>
<info-card :style="cStyle">
<template v-slot:title>
{{title}}
</template>
<template v-slot:content>
<div class="card">
<div class="left">
<div class="left-top">
{{lt}}
</div>
<div class="left-bottom">
{{lb}}
</div>
</div>
<div class="right">
<div class="r_l c_top">{{rtl}}</div>
<div class="r_m c_top">{{rtm}}</div>
<div class="r_r c_top c_green">{{rtr}}</div>
<div class="r_l c_bottom">{{rbl}}</div>
<div class="r_m c_bottom ">{{rbm}}</div>
<div class="r_r c_bottom c_red">{{rbr}}</div>
</div>
</div>
</template>
</info-card>
</template>
<script>
import InfoCard from "./info-card.vue";
export default {
name:"ContrastCard",
components: {InfoCard},
data() {
return {
};
},
props: {
cStyle: {
type: Object,
default: function(){return {height:"110px"};}
},
title: {
type: String,
},
lt: {
type: String,
},
lb: {
type: String,
},
rtl: {
type: String,
},
rtm: {
type: String,
},
rtr: {
type: String,
},
rbl: {
type: String,
},
rbm: {
type: String,
},
rbr: {
type: String,
},
},
methods: {}
};
</script>
<style scoped>
.card{
width: 90%;
height: 100%;
margin: auto;
}
.left{
height: 100%;
width: 40%;
float:left;
}
.right{
height: 100%;
width: 60%;
float:left;
}
.c_top{
height: 60%;
line-height: 46px;
}
.c_bottom{
height: 40%;
}
.left-top{
color: #a2ef5c;
font-size: 32px;
text-align: center;
line-height: 46px;
height: 60%;
width: 100%;
}
.left-bottom{
text-align: right;
height: 40%;
width: 100%;
}
.right > div{
float: left;
text-align: center;
font-size: 16px;
}
.r_l{
width: 24%;
}
.r_m,.r_r{
width: 38%;
}
.c_red{
color: red;
}
.c_green{
color: #a2ef5c;
}
</style>
src/module/databoard/components/card/contrast-card.vue
View file @ 3a46442a
<template> <template>
<info-card :style="cStyle"> <div class="contrast_card">
<template v-slot:title> <div class="top_border"></div>
{{title}} <div class="top_side_dot"/>
</template> <div class="bottom_side_dot"/>
<template v-slot:content> <div class="bottom_border"></div>
<div class="card"> <div class="card_content">
<div class="left"> <slot></slot>
<div class="left-top"> </div>
{{lt}} </div>
</div>
<div class="left-bottom">
{{lb}}
</div>
</div>
<div class="right">
<div class="r_l c_top">{{rtl}}</div>
<div class="r_m c_top">{{rtm}}</div>
<div class="r_r c_top c_green">{{rtr}}</div>
<div class="r_l c_bottom">{{rbl}}</div>
<div class="r_m c_bottom ">{{rbm}}</div>
<div class="r_r c_bottom c_red">{{rbr}}</div>
</div>
</div>
</template>
</info-card>
</template> </template>
<script> <script>
import InfoCard from "./info-card.vue";
export default { export default {
name:"ContrastCard", name: "ContrastCard"
components: {InfoCard},
data() {
return {
};
},
props: {
cStyle: {
type: Object,
default: function(){return {height:"110px"};}
},
title: {
type: String,
},
lt: {
type: String,
},
lb: {
type: String,
},
rtl: {
type: String,
},
rtm: {
type: String,
},
rtr: {
type: String,
},
rbl: {
type: String,
},
rbm: {
type: String,
},
rbr: {
type: String,
},
},
methods: {}
}; };
</script> </script>
<style scoped> <style scoped>
.card{
width: 90%;
height: 100%;
margin: auto;
}
.left{
height: 100%;
width: 40%;
float:left;
}
.right{
height: 100%;
width: 60%;
float:left;
}
.c_top{
height: 60%;
line-height: 46px;
}
.c_bottom{
height: 40%;
}
.left-top{
color: #a2ef5c;
font-size: 32px;
text-align: center;
line-height: 46px;
height: 60%;
width: 100%;
}
.left-bottom{
text-align: right;
height: 40%;
width: 100%;
}
.right > div{
float: left;
text-align: center;
font-size: 16px;
}
.r_l{
width: 24%;
}
.r_m,.r_r{
width: 38%;
}
.c_red{ .contrast_card {
color: red; position: relative;
} background-color: var(--card-background-color);
.c_green{ }
color: #a2ef5c;
} .top_border {
height: 33%;
border-top: 2px solid var(--card-border1-color);
border-left: 2px solid var(--card-border1-color);
border-right: 2px solid var(--card-border1-color);
}
.top_side_dot {
position: relative;
height: 17%;
}
.top_side_dot::before {
content: "";
position: absolute;
left: -2px;
height: 6px;
width: 6px;
border-radius: 50%;
background-color: var(--card-border2-color);
}
.top_side_dot::after {
content: "";
position: absolute;
right: -2px;
height: 6px;
width: 6px;
border-radius: 50%;
background-color: var(--card-border2-color);
}
.bottom_side_dot {
position: relative;
height: 17%;
}
.bottom_side_dot::before {
content: "";
position: absolute;
left: -2px;
bottom: 0;
height: 6px;
width: 6px;
border-radius: 50%;
background-color: var(--card-border2-color);
}
.bottom_side_dot::after {
content: "";
position: absolute;
right: -2px;
bottom: 0;
height: 6px;
width: 6px;
border-radius: 50%;
background-color: var(--card-border2-color);
}
.bottom_border {
height: 33%;
border-left: 2px solid var(--card-border1-color);
border-right: 2px solid var(--card-border1-color);
border-bottom: 2px solid var(--card-border1-color);
}
.card_content {
position: absolute;
top: 0;
height: 100%;
width: 100%;
padding: 0.5rem;
}
</style> </style>
src/module/databoard/components/card/simple-card.vue 0 → 100644
View file @ 3a46442a
<template>
<div class="simple_card">
<div class="top_corner_mark"/>
<div class="bottom_corner_mark"/>
<div class="card_content">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: "SimpleCard"
};
</script>
<style scoped>
.simple_card {
position: relative;
margin: 0;
background-color: var(--card-background-color);
border: 0.05rem solid var(--card-border1-color);
}
.top_corner_mark {
position: absolute;
height: 10px;
width: 100%;
}
.top_corner_mark::before {
content: "";
position: absolute;
top: -1px;
left: -1px;
height: 10px;
width: 10px;
border-top: 2px solid var(--card-border2-color);
border-left: 2px solid var(--card-border2-color);
}
.top_corner_mark::after {
content: "";
position: absolute;
top: -1px;
right: -1px;
height: 10px;
width: 10px;
border-top: 2px solid var(--card-border2-color);
border-right: 2px solid var(--card-border2-color);
}
.bottom_corner_mark {
position: absolute;
bottom: 0;
height: 10px;
width: 100%;
}
.bottom_corner_mark::before {
content: "";
position: absolute;
bottom: -1px;
left: -1px;
height: 10px;
width: 10px;
border-bottom: 2px solid var(--card-border2-color);
border-left: 2px solid var(--card-border2-color);
}
.bottom_corner_mark::after {
content: "";
position: absolute;
bottom: -1px;
right: -1px;
height: 10px;
width: 10px;
border-bottom: 2px solid var(--card-border2-color);
border-right: 2px solid var(--card-border2-color);
}
.card_content {
height: 100%;
width: 100%;
padding: 0.5rem;
}
</style>
src/module/databoard/components/card/winners-list.vue 0 → 100644
View file @ 3a46442a
<template>
<div class="winner_list">
<table>
<tbody>
<tr v-for="(row, idx) in rows" :key="idx" :style="{height: 100 / rows.length + '%'}">
<td><div class="col_number">{{ idx + 1 }}</div></td>
<td class="winner_span" @click="goWinnerList">{{ row.title }}</td>
<td v-for="(col, idz) in row.column" :key="idz">
<p class="key_span">{{ col.key }}</p>
<p class="value_span">{{ col.value }}</p>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import DisplayBoard from "../container/display-board.vue";
export default {
name: "WinnersList",
components: {DisplayBoard},
props: {},
data() {
return {
rows: [
{
title: "XX有限公司",
column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
},
{
title: "XXXX有限公司",
column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
},
{
title: "XXXXX有限公司",
column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
},
{
title: "XXX有限公司",
column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
},
{
title: "XXXXXX有限公司",
column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
}
]
};
},
methods: {
goWinnerList() {
this.$router.push({path: '/winner_list'})
}
}
};
</script>
<style scoped>
.winner_list {
}
table {
height: 100%;
font-size: 12px;
color: white;
}
tr:nth-child(odd) {
background-color: #0E5FFF20;
}
tr:nth-child(even) {
background-color: #0E5FFF30;
}
td {
padding: 0 0 0 1rem;
}
.col_number {
height: 38px;
min-width: 38px;
color: #19EBFF;
font-weight: bold;
text-align: center;
line-height: 38px;
background: url(../../assets/img/number_bg.png) no-repeat center;
}
.winner_span {
color: white;
font-size: 14px;
}
.key_span {
}
.value_span {
color: lightblue;
font-weight: bold;
}
</style>
src/module/databoard/components/chart/main-bar-chart.vue 0 → 100644
View file @ 3a46442a
<template>
<div id="main_bar_chart" @click="goChart"/>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "MainBarChart",
data() {
return {
barChart: {
textStyle: {
color: "#FFFFFF",
fontSize: "12"
},
tooltip: {},
grid: {
top: "10%",
bottom: "10%"
},
xAxis: {
data: ['未结算未开票', '已结算未开票', '已开票未收款', '应收款', '已开票已收款'],
axisLabel: {
color: "#FFFFFF",
fontSize: "12",
margin: "15"
},
axisTick: {
show: false
}
},
yAxis: [{
type: "value",
splitLine: {
lineStyle: {
color: "#1E2C58"
}
},
axisLabel: {
show: false,
color: "#FFFFFFAA",
fontSize: "16"
}
}],
series: [
{
name: '应收账款',
type: 'bar',
data: [5002, 57873, 1987, 71168, 41098],
barWidth: "40%",
showBackground: true,
backgroundStyle: {
color: 'rgba(255, 255, 255, 0.1)'
},
itemStyle: {
barBorderRadius: 10,
},
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{offset: 0, color: '#00CCD2'},
{offset: 1, color: '#00A2FF'}
]
},
label: {
show: true,
position: 'top',
color: "#FFFFFF",
},
}
]
},
myChart: null
}
},
methods: {
resizeChart() {
if (this.myChart) {
this.myChart.resize();
}
},
goChart() {
this.$router.push({path: "/chart"})
}
},
mounted() {
// 设置500毫秒延迟执行，解决组件没有渲染完成就开始绘制图表的问题
setTimeout(() => {
let mainBarChart = document.getElementById('main_bar_chart')
this.myChart = echarts.init(mainBarChart)
this.myChart.setOption(this.barChart);
// 监听窗口大小变化，重绘图表
window.addEventListener('resize', this.resizeChart);
}, 500)
},
beforeDestroy() {
window.removeEventListener("resize", this.resizeChart);
}
}
</script>
src/module/databoard/components/container/board-title-large.vue 0 → 100644
View file @ 3a46442a
<template>
<div class="board_title">
<div class="trapezoid1"/>
<div class="trapezoid2"/>
<div class="trapezoid3">
<div class="left_half_trapezoid"/>
<div class="right_half_trapezoid"/>
<div class="title">
<slot></slot>
</div>
</div>
</div>
</template>
<script>
export default {
name: "BoardTitleLarge"
};
</script>
<style scoped>
.board_title {
width: 100%;
height: 54px;
}
.trapezoid1::before {
content: "";
position: absolute;
top: -4px;
left: 50%;
margin-left: -75px;
height: 6px;
width: 150px;
background-image: radial-gradient(#00F6F0, transparent 60%);
}
.trapezoid1 {
position: absolute;
top: -2px;
left: 50%;
margin-left: -108px;
width: 216px;
border-top: 54px solid #0D53B7;
border-left: 22px solid transparent;
border-right: 22px solid transparent;
}
.trapezoid2 {
position: absolute;
top: -2px;
left: 50%;
margin-left: -105px;
width: 210px;
border-top: 52px solid var(--global-background-color);
border-left: 21px solid transparent;
border-right: 21px solid transparent;
}
.trapezoid3 {
position: absolute;
top: -2px;
left: 50%;
margin-left: -100px;
height: 50px;
width: 200px;
}
.title {
position: absolute;
width: 100%;
font-size: 18px;
font-family: 黑体,serif;
font-weight: 700;
text-align: center;
letter-spacing: 0.2rem;
white-space: nowrap;
line-height: 50px;
color: var(--lightblue-text-color);
}
.left_half_trapezoid {
position: absolute;
width: 50%;
height: 100%;
overflow: hidden;
}
.left_half_trapezoid::after {
content: "";
position: absolute;
height: 100%;
width: 110%;
left: 10px;
background-image: linear-gradient(to bottom, #0933AD, transparent);
transform: skewX(20deg);
}
.right_half_trapezoid {
position: absolute;
right: 0;
width: 50%;
height: 100%;
overflow: hidden;
}
.right_half_trapezoid::after {
content: "";
position: absolute;
height: 100%;
width: 110%;
right: 10px;
background-image: linear-gradient(to bottom, #0933AD, transparent);
transform: skewX(-20deg);
}
</style>
src/module/databoard/components/container/board-title-small.vue 0 → 100644
View file @ 3a46442a
<template>
<div class="board_title">
<div class="trapezoid1"/>
<div class="trapezoid2"/>
<div class="trapezoid3">
<div class="left_half_trapezoid"/>
<div class="right_half_trapezoid"/>
<div class="title">
<slot></slot>
</div>
</div>
</div>
</template>
<script>
export default {
name: "BoardTitleSmall"
};
</script>
<style scoped>
.board_title {
width: 100%;
height: 36px;
}
.trapezoid1::before {
content: "";
position: absolute;
top: -4px;
left: 50%;
margin-left: -50px;
height: 6px;
width: 100px;
background-image: radial-gradient(#00F6F0, transparent 60%);
}
.trapezoid1 {
position: absolute;
top: -2px;
left: 50%;
margin-left: -78px;
width: 156px;
border-top: 36px solid #0D53B7;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
}
.trapezoid2 {
position: absolute;
top: -2px;
left: 50%;
margin-left: -75px;
width: 150px;
border-top: 34px solid var(--global-background-color);
border-left: 12px solid transparent;
border-right: 12px solid transparent;
}
.trapezoid3 {
position: absolute;
top: -2px;
left: 50%;
margin-left: -70px;
height: 30px;
width: 140px;
}
.title {
position: absolute;
width: 100%;
font-size: 1rem;
font-family: 黑体,serif;
font-weight: 700;
text-align: center;
letter-spacing: 0.2rem;
white-space: nowrap;
line-height: 30px;
color: var(--lightblue-text-color);
}
.left_half_trapezoid {
position: absolute;
width: 50%;
height: 100%;
overflow: hidden;
}
.left_half_trapezoid::after {
content: "";
position: absolute;
height: 100%;
width: 110%;
left: 5px;
background-image: linear-gradient(to bottom, #0933AD, transparent);
transform: skewX(20deg);
}
.right_half_trapezoid {
position: absolute;
right: 0;
width: 50%;
height: 100%;
overflow: hidden;
}
.right_half_trapezoid::after {
content: "";
position: absolute;
height: 100%;
width: 110%;
right: 5px;
background-image: linear-gradient(to bottom, #0933AD, transparent);
transform: skewX(-20deg);
}
</style>
src/module/databoard/components/container/container-with-bord.vue deleted 100644 → 0
View file @ 0b39aa25
<template>
<div class="content container-with-bord" style="cursor: pointer; position: relative;">
<!--左上边框-->
<div class="t_line_box">
<i class="t_l_line"></i>
<i class="l_t_line"></i>
</div>
<!--右上边框-->
<div class="t_line_box">
<i class="t_r_line"></i>
<i class="r_t_line"></i>
</div>
<!--左下边框-->
<div class="t_line_box">
<i class="l_b_line"></i>
<i class="b_l_line"></i>
</div>
<!--右下边框-->
<div class="t_line_box">
<i class="r_b_line"></i>
<i class="b_r_line"></i>
</div>
<slot></slot>
</div>
</template>
<script>
export default {
name:"ContainerWithBord",
data() {
return {
};
},
methods: {}
};
</script>
<style scoped>
div{
color: white;
}
.container-with-bord{
box-sizing: border-box;
border: 1px solid #2C58A6;
position: relative;
box-shadow: 0 0 10px #2C58A6;
}
</style>
<style scoped lang="css" src="../../assets/index.css"/>
src/module/databoard/components/container/display-board.vue 0 → 100644
View file @ 3a46442a
<template>
<div class="display_board">
<!--角标组件-->
<corner-mark-large v-if="$props.corner_size === 'large'"/>
<corner-mark-small v-else/>
<!--标题组件-->
<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>
<!--内容插槽-->
<div class="board_content" ref="boardContent">
<slot></slot>
</div>
</div>
</template>
<script>
import CornerMarkSmall from "../icon/corner-mark-small.vue";
import CornerMarkLarge from "../icon/corner-mark-large.vue";
import BoardTitleSmall from "./board-title-small.vue"
import BoardTitleLarge from "./board-title-large.vue"
export default {
name: "DisplayBoard",
components: {CornerMarkSmall, CornerMarkLarge, BoardTitleSmall, BoardTitleLarge},
props: {
title: {
type: String,
default: null
},
corner_size: {
type: String,
default: "small"
},
title_size: {
type: String,
default: "small"
},
},
data() {
return {};
},
methods: {},
mounted() {
// 根据标题大小动态控制内容高度
if (this.$props.title) {
this.$refs.boardContent.style.height = this.$props.title_size === "large" ? "calc(100% - 54px)" : "calc(100% - 36px)"
}
}
};
</script>
<style scoped>
.display_board {
cursor: pointer;
position: relative;
box-sizing: border-box;
border-radius: 1.5rem;
border: 0.2rem solid var(--container-border-color);
background-color: var(--container-background-color);
box-shadow: 0 0 3rem var(--container-shadow-color) inset;
}
.board_content {
position: absolute;
height: 100%;
width: 100%;
padding: 1rem;
}
</style>
src/module/databoard/components/container/showcase.vue 0 → 100644
View file @ 3a46442a
<template>
<div class="showcase">
<div class="showcase_cover"/>
<div class="show_content">
<slot></slot>
</div>
<div class="showcase_base">
<div class="showcase_title">{{ $props.title }}</div>
</div>
</div>
</template>
<script>
export default {
name: "Showcase",
props: {
title: String
}
};
</script>
<style scoped>
.showcase {
height: 100%;
background: var(--container-background-color);
border-radius: 500% / 100%;
box-shadow: 0 0 30px -2px var(--card-border2-color) inset;
overflow: hidden;
}
.showcase_cover {
width: 100%;
height: 15%;
border-radius: 50% / 50%;
background: radial-gradient(#19EBFF66, transparent);
}
.show_content {
height: 40%;
width: 100%;
color: var(--lightblue-text-color);
}
.showcase_base {
position: relative;
bottom: 0;
width: 100%;
height: 50%;
background-color: rgba(29, 58, 197, 0.64);
border-radius: 50% / 15% 15% 0 0;
display: flex;
align-items: center;
justify-content: center;
}
.showcase_base::after {
content: "";
position: absolute;
top: 0;
width: 100%;
height: 30%;
border-radius: 50% / 50%;
background: radial-gradient(#19EBFF66, transparent);
}
.showcase_title {
position: absolute;
height: 0;
color: var(--white-text-color);
font-size: 12px;
font-family: 黑体, serif;
font-weight: 700;
letter-spacing: 0.2rem;
}
</style>
src/module/databoard/components/container/title-content.vue
View file @ 3a46442a
<template> <template>
<div> <div>
<div class="content-title"> <div class="content-title">{{ $props.title }}</div>
<slot name="title"></slot>
</div>
<div> <div>
<slot name="content"></slot> <slot name="content"></slot>
</div> </div>
...@@ -11,6 +9,9 @@ ...@@ -11,6 +9,9 @@
<script> <script>
export default { export default {
name:"TitleContent", name:"TitleContent",
props: {
title: String
},
data() { data() {
return { return {
}; };
......
src/module/databoard/components/icon/corner-mark-large.vue 0 → 100644
View file @ 3a46442a
<template>
<div class="conner_mark">
<div class="conner_mark_left1"/>
<div class="conner_mark_left2"/>
<div class="conner_mark_left3"/>
<div class="conner_mark_right1"/>
<div class="conner_mark_right2"/>
<div class="conner_mark_right3"/>
</div>
</template>
<script>
export default {
name: "CornerMarkLarge"
};
</script>
<style scoped>
.conner_mark {
position: absolute;
height: 100%;
width: 100%;
}
.conner_mark_left1 {
position: absolute;
left: -0.2rem;
top: -0.2rem;
border-top: 3.1rem solid var(--container-border-color);
border-right: 3.1rem solid transparent;
}
.conner_mark_left2 {
position: absolute;
left: -0.2rem;
top: -0.2rem;
border-top: 2.8rem solid var(--global-background-color);
border-right: 2.8rem solid transparent;
}
.conner_mark_left3 {
position: absolute;
left: -0.2rem;
top: -0.2rem;
border-top: 2.4rem solid var(--corner-background-color);
border-right: 2.4rem solid transparent;
}
.conner_mark_right1 {
position: absolute;
right: -0.2rem;
top: -0.2rem;
border-top: 3.1rem solid var(--container-border-color);
border-left: 3.1rem solid transparent;
}
.conner_mark_right2 {
position: absolute;
right: -0.2rem;
top: -0.2rem;
border-top: 2.8rem solid var(--global-background-color);
border-left: 2.8rem solid transparent;
}
.conner_mark_right3 {
position: absolute;
right: -0.2rem;
top: -0.2rem;
border-top: 2.4rem solid var(--corner-background-color);
border-left: 2.4rem solid transparent;
}
</style>
src/module/databoard/components/icon/corner-mark-small.vue 0 → 100644
View file @ 3a46442a
<template>
<div class="conner_mark">
<div class="conner_mark_left1"/>
<div class="conner_mark_left2"/>
<div class="conner_mark_left3"/>
<div class="conner_mark_right1"/>
<div class="conner_mark_right2"/>
<div class="conner_mark_right3"/>
</div>
</template>
<script>
export default {
name: "CornerMarkSmall"
};
</script>
<style scoped>
.conner_mark {
position: absolute;
height: 100%;
width: 100%;
}
.conner_mark_left1 {
position: absolute;
left: -0.2rem;
top: -0.2rem;
border-top: 3.5rem solid var(--container-border-color);
border-right: 1.7rem solid transparent;
}
.conner_mark_left2 {
position: absolute;
left: -0.2rem;
top: -0.2rem;
border-top: 3rem solid var(--global-background-color);
border-right: 1.5rem solid transparent;
}
.conner_mark_left3 {
position: absolute;
left: -0.2rem;
top: -0.2rem;
border-top: 2rem solid var(--corner-background-color);
border-right: 1rem solid transparent;
}
.conner_mark_right1 {
position: absolute;
right: -0.2rem;
top: -0.2rem;
border-top: 3.5rem solid var(--container-border-color);
border-left: 1.7rem solid transparent;
}
.conner_mark_right2 {
position: absolute;
right: -0.2rem;
top: -0.2rem;
border-top: 3rem solid var(--global-background-color);
border-left: 1.5rem solid transparent;
}
.conner_mark_right3 {
position: absolute;
right: -0.2rem;
top: -0.2rem;
border-top: 2rem solid var(--corner-background-color);
border-left: 1rem solid transparent;
}
</style>
src/module/databoard/index.vue
View file @ 3a46442a
<template> <template>
<div class="page"> <div class="main">
<div class="head">
<div class="head_content">
<span class="text_date">2023-08-01</span>
<span class="text_time">17:18:29</span>
<span class="text_week">星期三</span>
<span class="text_title">联达供应链数据大屏</span>
<span class="text_car">刷新时间：10s</span>
</div>
</div>
<div class="middle">
<title-content-with-bord class="trade_left">
<template v-slot:title>营业情况</template >
<template v-slot:content>
<contrast-card v-for="data in mockData.yyqk" :title="data.title"
:lt="data.amount"
:lb="data.unit"
:rtl="data.title1"
:rtm="data.amount1"
:rtr="data.rate1"
:rbl="data.title2"
:rbm="data.amount2"
:rbr="data.rate2"/>
</template >
</title-content-with-bord>
<container-with-bord class="trade_middle">
<card style="margin-top: 10px; width: 80%; height: 20%; position: relative;">
<template>
<title-content v-for="data in mockData.sr" style="width: 33.3%; text-align: center; float:left;">
<template v-slot:title>
{{ data.title }}
</template>
<template v-slot:content>
<num-with-r-b-mark>
<template v-slot:num>{{ data.value }}</template>
<template v-slot:unit>万元</template>
</num-with-r-b-mark>
</template>
</title-content>
</template>
</card>
<div id="main_bar_chart" style="width: 897px; margin: auto; height: 350px;"/>
</container-with-bord>
<title-content-with-bord class="trade_right">
<template v-slot:title>账款情况</template >
<template v-slot:content>
<contrast-card v-for="data in mockData.zkqk" :title="data.title"
:lt="data.amount"
:lb="data.unit"
:rtl="data.title1"
:rtm="data.amount1"
:rtr="data.rate1"
:rbl="data.title2"
:rbm="data.amount2"
:rbr="data.rate2"/>
</template >
</title-content-with-bord>
</div>
<div class="middle"> <div class="middle">
<div class="content trade_left" style="cursor: pointer;"> <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 class="t_line_box"> <contrast-card style="height: 28%;">content</contrast-card>
<i class="t_l_line"></i> <contrast-card style="height: 28%;">content</contrast-card>
<i class="l_t_line"></i> <contrast-card style="height: 28%;">content</contrast-card>
</div>
<!--右上边框-->
<div class="t_line_box">
<i class="t_r_line"></i>
<i class="r_t_line"></i>
</div>
<!--左下边框-->
<div class="t_line_box">
<i class="l_b_line"></i>
<i class="b_l_line"></i>
</div> </div>
<!--右下边框--> </display-board>
<div class="t_line_box"> <display-board class="trade_middle" corner_size="large">
<i class="r_b_line"></i> <div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem">
<i class="b_r_line"></i> <simple-card style="width: 30%;height: 100%">content</simple-card>
<simple-card style="width: 30%;height: 100%">content</simple-card>
<simple-card style="width: 30%;height: 100%">content</simple-card>
</div> </div>
<div class="main_title"> <main-bar-chart style="width: 100%; height: 64%;"></main-bar-chart>
<img src="img/t_1.png" alt=""> </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;">
<contrast-card style="height: 28%;">content</contrast-card>
<contrast-card style="height: 28%;">content</contrast-card>
<contrast-card style="height: 28%;">content</contrast-card>
</div> </div>
<div id="chart_1" class="chart" style="width:100%;height: 280px;"></div> </display-board>
</div> </div>
<div class="middle">
<display-board class="trade_left" title="已开票未收款">
<winners-list style="height: 96%"/>
</display-board>
<div class="trade_middle" style="border: none;box-shadow: none;"> <div class="trade_middle" style="border: none;box-shadow: none;">
<container-with-bord style="height: calc(50% - 6px); width: 100%; margin-bottom: 12px;"></container-with-bord> <div style="display: flex; justify-content: space-between; height: 50%;">
<container-with-bord style="height: calc(50% - 6px); width: 100%;"> <display-board style="width: 32%;" title="每日目标情况">content</display-board>
<div style="width: 100%; height: 50%;"> <display-board style="width: 32%;" title="月度目标情况">content</display-board>
<card style="width: 32%; margin: 5px calc(4%/6); height: calc(100% - 10px); position: relative; float: left"> <display-board style="width: 32%;" title="年度目标情况">content</display-board>
<title-content style="text-align: center; float:left; width: 100%;">
<template v-slot:title>
当日订单
</template>
<template v-slot:content>
<num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
<template v-slot:num>2,000</template>
<template v-slot:unit>万吨</template>
</num-with-r-b-mark>
<num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
<template v-slot:num>20,000</template>
<template v-slot:unit>万元</template>
</num-with-r-b-mark>
</template>
</title-content>
</card>
<card style="width: 32%; margin: 5px calc(4%/6); height: calc(100% - 10px); position: relative; float: left">
<title-content style="text-align: center; float:left; width: 100%;">
<template v-slot:title>
当日完成量
</template>
<template v-slot:content>
<num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
<template v-slot:num>2,000</template>
<template v-slot:unit>万吨</template>
</num-with-r-b-mark>
<num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
<template v-slot:num>20,000</template>
<template v-slot:unit>万元</template>
</num-with-r-b-mark>
</template>
</title-content>
</card>
<card style="width: 32%; margin: 5px calc(4%/6); height: calc(100% - 10px); position: relative; float: left">
<title-content style="text-align: center; float:left; width: 100%;">
<template v-slot:title>
余量
</template>
<template v-slot:content>
<num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
<template v-slot:num>2,000</template>
<template v-slot:unit>万吨</template>
</num-with-r-b-mark>
<num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
<template v-slot:num>20,000</template>
<template v-slot:unit>万元</template>
</num-with-r-b-mark>
</template>
</title-content>
</card>
</div>
<div style="width: 100%; height: 50%;">
<card style="width: 32%; margin: 5px 9%; height: calc(100% - 10px); position: relative; float: left">
<title-content style="text-align: center; float:left; width: 100%;">
<template v-slot:title>
消失客户
</template>
<template v-slot:content>
<num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
<template v-slot:num>2,000</template>
<template v-slot:unit>万吨</template>
</num-with-r-b-mark>
<num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
<template v-slot:num>20,000</template>
<template v-slot:unit>万元</template>
</num-with-r-b-mark>
</template>
</title-content>
</card>
<card style="width: 32%; margin: 5px 9%; height: calc(100% - 10px); position: relative; float: left">
<title-content style="text-align: center; float:left; width: 100%;">
<template v-slot:title>
新增客户
</template>
<template v-slot:content>
<num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
<template v-slot:num>2,000</template>
<template v-slot:unit>万吨</template>
</num-with-r-b-mark>
<num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
<template v-slot:num>20,000</template>
<template v-slot:unit>万元</template>
</num-with-r-b-mark>
</template>
</title-content>
</card>
</div>
</container-with-bord>
</div>
<div class="content trade_right"><!--左上边框-->
<div class="t_line_box">
<i class="t_l_line"></i>
<i class="l_t_line"></i>
</div>
<!--右上边框-->
<div class="t_line_box">
<i class="t_r_line"></i>
<i class="r_t_line"></i>
</div>
<!--左下边框-->
<div class="t_line_box">
<i class="l_b_line"></i>
<i class="b_l_line"></i>
</div>
<!--右下边框-->
<div class="t_line_box">
<i class="r_b_line"></i>
<i class="b_r_line"></i>
</div> </div>
<div class="main_title"> <div style="display: flex; justify-content: space-between; height: 50%; padding-top: 2rem;">
<img src="img/t_1.png" alt=""> <showcase style="width: 18%;" title="当日订单量">content</showcase>
湖南省货运收入 <showcase style="width: 18%;" title="当日完成量">content</showcase>
<showcase style="width: 18%;" title="余量">content</showcase>
<showcase style="width: 18%;" title="流失客户">content</showcase>
<showcase style="width: 18%;" title="新增客户">content</showcase>
</div> </div>
<div id="chart_1" class="chart" style="width:100%;height: 280px;"></div>
</div> </div>
<display-board class="trade_right" title="当日订单量占比">content</display-board>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import TitleContentWithBord from "./components/container/title-content-with-bord.vue"; import DisplayBoard from "./components/container/display-board.vue";
import InfoCard from "./components/card/info-card.vue"; import Showcase from "./components/container/showcase.vue";
import ContrastCard from "./components/card/contrast-card.vue"; import ContrastCard from "./components/card/contrast-card.vue";
import * as echarts from "echarts"; import SimpleCard from "./components/card/simple-card.vue";
import TitleContent from "./components/container/title-content.vue"; import MainBarChart from "./components/chart/main-bar-chart.vue";
import NumWithRBMark from "./components/layout/num-with-r-b-mark.vue"; import WinnersList from "./components/card/winners-list.vue";
import Card from "./components/card/card.vue";
import ContainerWithBord from "./components/container/container-with-bord.vue";
export default { export default {
components: {ContainerWithBord, TitleContentWithBord, Card, NumWithRBMark, TitleContent, ContrastCard, InfoCard}, components: {
Showcase,
DisplayBoard,
ContrastCard,
SimpleCard,
MainBarChart,
WinnersList
},
data() { data() {
return { return {
constants: {},
mockData:{ }
yyqk:{
yye:{
title:"营业额",
amount:"20,303",
unit:"万元",
title1:"昨天",
amount1:"21,000",
rate1:"-3.32%",
title2:"上月",
amount2:"20，000",
rate2:"+4.92%",
},
cb:{
title:"成本",
amount:"10,303",
unit:"万元",
title1:"昨日",
amount1:"11,000",
rate1:"-2.68%",
title2:"上月",
amount2:"10,000",
rate2:"+5.71%",
},
ml:{
title:"毛利",
amount:"10,000",
unit:"万元",
title1:"昨日",
amount1:"10,000",
rate1:"0.00%",
title2:"上月",
amount2:"10,000",
rate2:"0.00%",
},
},
zkqk:{
yszk:{
title:"应收账款",
amount:"20,303",
unit:"万元",
title1:"昨天",
amount1:"21,000",
rate1:"-3.32%",
title2:"上月",
amount2:"20，000",
rate2:"+4.92%",
},
yfzk:{
title:"应付账款",
amount:"10,303",
unit:"万元",
title1:"昨日",
amount1:"11,000",
rate1:"-2.68%",
title2:"上月",
amount2:"10,000",
rate2:"+5.71%",
},
zsye:{
title:"账上余额",
amount:"10,000",
unit:"万元",
title1:"昨日",
amount1:"10,000",
rate1:"0.00%",
title2:"上月",
amount2:"10,000",
rate2:"0.00%",
},
},
sr:[
{
title:'累计营业收入（当年）',
value:'20,303',
},
{
title:'应收款（财务）',
value:'20,303',
},
{
title:'应收款（营销）',
value:'20,303',
},
],
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",
},
}
]
},
}
};
}, },
methods: { methods: {
drawMainBarChart(){
let myChart = echarts.init(document.getElementById('main_bar_chart'));
myChart.setOption(this.mockData.barChart);
}
}, },
mounted() {
this.drawMainBarChart();
}
}; };
</script> </script>
<style scoped lang="css" src="./assets/index.css"/>
src/module/databoard/index_back1.vue 0 → 100644
View file @ 3a46442a
<template>
<div class="page">
<div class="head">
<div class="head_content">
<span class="text_date">2023-08-01</span>
<span class="text_time">17:18:29</span>
<span class="text_week">星期三</span>
<span class="text_title">联达供应链数据大屏</span>
<span class="text_car">刷新时间：10s</span>
</div>
</div>
<div class="middle">
<title-content-with-bord class="trade_left">
<template v-slot:title>营业情况</template >
<template v-slot:content>
<contrast-card v-for="data in mockData.yyqk" :title="data.title"
:lt="data.amount"
:lb="data.unit"
:rtl="data.title1"
:rtm="data.amount1"
:rtr="data.rate1"
:rbl="data.title2"
:rbm="data.amount2"
:rbr="data.rate2"/>
</template >
</title-content-with-bord>
<container-with-bord class="trade_middle">
<card style="margin-top: 10px; width: 80%; height: 20%; position: relative;">
<template>
<title-content v-for="data in mockData.sr" style="width: 33.3%; text-align: center; float:left;">
<template v-slot:title>
{{ data.title }}
</template>
<template v-slot:content>
<num-with-r-b-mark>
<template v-slot:num>{{ data.value }}</template>
<template v-slot:unit>万元</template>
</num-with-r-b-mark>
</template>
</title-content>
</template>
</card>
<div id="main_bar_chart" style="width: 897px; margin: auto; height: 350px;"/>
</container-with-bord>
<title-content-with-bord class="trade_right">
<template v-slot:title>账款情况</template >
<template v-slot:content>
<contrast-card v-for="data in mockData.zkqk" :title="data.title"
:lt="data.amount"
:lb="data.unit"
:rtl="data.title1"
:rtm="data.amount1"
:rtr="data.rate1"
:rbl="data.title2"
:rbm="data.amount2"
:rbr="data.rate2"/>
</template >
</title-content-with-bord>
</div>
<div class="middle">
<div class="content trade_left" style="cursor: pointer;">
<!--左上边框-->
<div class="t_line_box">
<i class="t_l_line"></i>
<i class="l_t_line"></i>
</div>
<!--右上边框-->
<div class="t_line_box">
<i class="t_r_line"></i>
<i class="r_t_line"></i>
</div>
<!--左下边框-->
<div class="t_line_box">
<i class="l_b_line"></i>
<i class="b_l_line"></i>
</div>
<!--右下边框-->
<div class="t_line_box">
<i class="r_b_line"></i>
<i class="b_r_line"></i>
</div>
<div class="main_title">
<img src="img/t_1.png" alt="">
湖南省货运收入
</div>
<div id="chart_1" class="chart" style="width:100%;height: 280px;"></div>
</div>
<div class="trade_middle" style="border: none;box-shadow: none;">
<container-with-bord style="height: calc(50% - 6px); width: 100%; margin-bottom: 12px;"></container-with-bord>
<container-with-bord style="height: calc(50% - 6px); width: 100%;">
<div style="width: 100%; height: 50%;">
<card style="width: 32%; margin: 5px calc(4%/6); height: calc(100% - 10px); position: relative; float: left">
<title-content style="text-align: center; float:left; width: 100%;">
<template v-slot:title>
当日订单
</template>
<template v-slot:content>
<num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
<template v-slot:num>2,000</template>
<template v-slot:unit>万吨</template>
</num-with-r-b-mark>
<num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
<template v-slot:num>20,000</template>
<template v-slot:unit>万元</template>
</num-with-r-b-mark>
</template>
</title-content>
</card>
<card style="width: 32%; margin: 5px calc(4%/6); height: calc(100% - 10px); position: relative; float: left">
<title-content style="text-align: center; float:left; width: 100%;">
<template v-slot:title>
当日完成量
</template>
<template v-slot:content>
<num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
<template v-slot:num>2,000</template>
<template v-slot:unit>万吨</template>
</num-with-r-b-mark>
<num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
<template v-slot:num>20,000</template>
<template v-slot:unit>万元</template>
</num-with-r-b-mark>
</template>
</title-content>
</card>
<card style="width: 32%; margin: 5px calc(4%/6); height: calc(100% - 10px); position: relative; float: left">
<title-content style="text-align: center; float:left; width: 100%;">
<template v-slot:title>
余量
</template>
<template v-slot:content>
<num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
<template v-slot:num>2,000</template>
<template v-slot:unit>万吨</template>
</num-with-r-b-mark>
<num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
<template v-slot:num>20,000</template>
<template v-slot:unit>万元</template>
</num-with-r-b-mark>
</template>
</title-content>
</card>
</div>
<div style="width: 100%; height: 50%;">
<card style="width: 32%; margin: 5px 9%; height: calc(100% - 10px); position: relative; float: left">
<title-content style="text-align: center; float:left; width: 100%;">
<template v-slot:title>
消失客户
</template>
<template v-slot:content>
<num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
<template v-slot:num>2,000</template>
<template v-slot:unit>万吨</template>
</num-with-r-b-mark>
<num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
<template v-slot:num>20,000</template>
<template v-slot:unit>万元</template>
</num-with-r-b-mark>
</template>
</title-content>
</card>
<card style="width: 32%; margin: 5px 9%; height: calc(100% - 10px); position: relative; float: left">
<title-content style="text-align: center; float:left; width: 100%;">
<template v-slot:title>
新增客户
</template>
<template v-slot:content>
<num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
<template v-slot:num>2,000</template>
<template v-slot:unit>万吨</template>
</num-with-r-b-mark>
<num-with-r-b-mark style="width: 48%; float: left; line-height: 64px;">
<template v-slot:num>20,000</template>
<template v-slot:unit>万元</template>
</num-with-r-b-mark>
</template>
</title-content>
</card>
</div>
</container-with-bord>
</div>
<div class="content trade_right"><!--左上边框-->
<div class="t_line_box">
<i class="t_l_line"></i>
<i class="l_t_line"></i>
</div>
<!--右上边框-->
<div class="t_line_box">
<i class="t_r_line"></i>
<i class="r_t_line"></i>
</div>
<!--左下边框-->
<div class="t_line_box">
<i class="l_b_line"></i>
<i class="b_l_line"></i>
</div>
<!--右下边框-->
<div class="t_line_box">
<i class="r_b_line"></i>
<i class="b_r_line"></i>
</div>
<div class="main_title">
<img src="img/t_1.png" alt="">
湖南省货运收入
</div>
<div id="chart_1" class="chart" style="width:100%;height: 280px;"></div>
</div>
</div>
</div>
</template>
<script>
import TitleContentWithBord from "./components/container/title-content-with-bord.vue";
import InfoCard from "./components/card/info-card.vue";
import ContrastCard from "./components/card/contrast-card.vue";
import * as echarts from "echarts";
import TitleContent from "./components/container/title-content.vue";
import NumWithRBMark from "./components/layout/num-with-r-b-mark.vue";
import Card from "./components/card/card.vue";
import ContainerWithBord from "./components/container/container-with-bord.vue";
export default {
components: {ContainerWithBord, TitleContentWithBord, Card, NumWithRBMark, TitleContent, ContrastCard, InfoCard},
data() {
return {
constants: {},
mockData:{
yyqk:{
yye:{
title:"营业额",
amount:"20,303",
unit:"万元",
title1:"昨天",
amount1:"21,000",
rate1:"-3.32%",
title2:"上月",
amount2:"20，000",
rate2:"+4.92%",
},
cb:{
title:"成本",
amount:"10,303",
unit:"万元",
title1:"昨日",
amount1:"11,000",
rate1:"-2.68%",
title2:"上月",
amount2:"10,000",
rate2:"+5.71%",
},
ml:{
title:"毛利",
amount:"10,000",
unit:"万元",
title1:"昨日",
amount1:"10,000",
rate1:"0.00%",
title2:"上月",
amount2:"10,000",
rate2:"0.00%",
},
},
zkqk:{
yszk:{
title:"应收账款",
amount:"20,303",
unit:"万元",
title1:"昨天",
amount1:"21,000",
rate1:"-3.32%",
title2:"上月",
amount2:"20，000",
rate2:"+4.92%",
},
yfzk:{
title:"应付账款",
amount:"10,303",
unit:"万元",
title1:"昨日",
amount1:"11,000",
rate1:"-2.68%",
title2:"上月",
amount2:"10,000",
rate2:"+5.71%",
},
zsye:{
title:"账上余额",
amount:"10,000",
unit:"万元",
title1:"昨日",
amount1:"10,000",
rate1:"0.00%",
title2:"上月",
amount2:"10,000",
rate2:"0.00%",
},
},
sr:[
{
title:'累计营业收入（当年）',
value:'20,303',
},
{
title:'应收款（财务）',
value:'20,303',
},
{
title:'应收款（营销）',
value:'20,303',
},
],
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",
},
}
]
},
}
};
},
methods: {
drawMainBarChart(){
let myChart = echarts.init(document.getElementById('main_bar_chart'));
myChart.setOption(this.mockData.barChart);
}
},
mounted() {
this.drawMainBarChart();
}
};
</script>
<style scoped lang="css" src="./assets/index.css"/>
src/module/index/index.html
View file @ 3a46442a
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>开尔维</title> <title>联达供应链数据大屏</title>
<!-- Google MD图标 --> <!-- Google MD图标 -->
<link href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet">
...@@ -21,15 +21,14 @@ ...@@ -21,15 +21,14 @@
} }
body{ body{
min-height: 1080.00px; min-height: 900px;
max-height: 1080.00px; min-width: 1440px;
min-width: 1920px;
max-width: 1920px;
} }
body, html { body, html {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%;
height: 100%; height: 100%;
overflow-y: hidden; overflow-y: hidden;
} }
......
src/module/index/index.js
View file @ 3a46442a
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
import Vue from 'vue' import Vue from 'vue'
import App from './index.vue' import App from './index.vue'
import router from './router/index_router' import router from './router/index_router'
import '../databoard/assets/index.css'
Vue.config.productionTip = false Vue.config.productionTip = false
......
src/module/index/index.vue
View file @ 3a46442a
<template> <template>
<router-view></router-view> <div class="page">
<div class="head">
<div class="text_left">
<span>2023-08-01</span>
<span>17:18:29</span>
<span>星期三</span>
</div>
<div class="text_right">
<span>刷新时间：10s</span>
</div>
</div>
<router-view style="height: 90%"></router-view>
</div>
</template> </template>
<script> <script>
window.$ = window.jQuery = require('materialize-css/node_modules/jquery/dist/jquery.js') window.$ = window.jQuery = require('materialize-css/node_modules/jquery/dist/jquery.js')
require('materialize-css') require('materialize-css')
export default { export default {
name: 'app', name: 'app',
// 页面加载之前 // 页面加载之前
created() { created() {
}, },
// 页面加载后 // 页面加载后
mounted() { mounted() {
console.log(this.$router) this.$router.push("/index");
this.$router.push("/index"); }
} }
}
</script> </script>
<style> <style>
@import "../../../node_modules/materialize-css/bin/materialize.css"; @import "../../../node_modules/materialize-css/bin/materialize.css";
#app {
}
/*侧边栏头部背景*/
.side-nav .userView .background img {
width: 100%;
}
/*导航名字*/
.nav-name {
margin: 0 15px;
padding: 0;
font-size: 16px;
}
/*右侧导航栏图标*/ #app {
.nav-wrapper .right li a i { }
padding: 0;
margin: 0;
font-size: 16px;
}
/*右侧导航栏文字*/
.nav-wrapper .right li a span {
margin-left: 8px;
}
/*为大屏幕的侧边栏提供空间*/ @media only screen and (max-width: 992px) {
header, main, footer { header, main, footer {
padding-left: 300px; padding-left: 0;
}
/*主干区域*/
main {
position: fixed;
width: 100%;
height: calc(100% - 64px);
z-index: -1;
}
@media only screen and (max-width: 992px) {
header, main, footer {
padding-left: 0;
}
} }
}
</style> </style>
src/module/index/router/index_router.js
View file @ 3a46442a
...@@ -2,6 +2,8 @@ import Vue from 'vue' ...@@ -2,6 +2,8 @@ import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import Main from '../index.vue' import Main from '../index.vue'
import index from '../../databoard/index.vue' import index from '../../databoard/index.vue'
import MainBarChart from "../../databoard/components/chart/main-bar-chart.vue";
import WinnersList from "../../databoard/components/card/winners-list.vue";
Vue.use(Router) Vue.use(Router)
...@@ -17,5 +19,15 @@ export default new Router({ ...@@ -17,5 +19,15 @@ export default new Router({
name: 'index', name: 'index',
component: index component: index
}, },
{
path: '/chart',
name: 'chart',
component: MainBarChart
},
{
path: '/winner_list',
name: 'winnerList',
component: WinnersList
}
] ]
}) })
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