Skip to content

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

测试代码

parent 0b39aa25
Hide whitespace changes
Inline Side-by-side
Showing with 247 additions and 218 deletions
src/module/databoard/assets/index.css
View file @ 6ce89686
...@@ -11,24 +11,30 @@ ...@@ -11,24 +11,30 @@
} }
.head { .head {
height: 10%; height: 70px;
margin-bottom: 24px;
display: flex;
} }
.head_content { .head_content {
background: url(./img/SketchPng5fda9a9add36a51f8fa99e5a1426c6a0630dbdfb68a8e0ea5fbbd1c1392d5e28.png) 0px 0px no-repeat; background: url(./img/HeadBg.png) 0px 0px no-repeat;
background-position: center; background-position: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex;
} }
.text_date { .text_date {
width: 144px;
height: 20px;
overflow-wrap: break-word; overflow-wrap: break-word;
color: rgba(255, 255, 255, 1); color: rgba(120, 174, 255, 1);
font-size: 20.00px; font-size: 14px;
letter-spacing: 1.6666666269302368px; /*font-weight: NaN;*/
text-align: left; text-align: center;
margin: 1% 0 0 6% white-space: nowrap;
line-height: 20px;
margin: 20px 0 0 36px;
} }
...@@ -66,13 +72,16 @@ ...@@ -66,13 +72,16 @@
.text_car { .text_car {
width: 106px;
height: 20px;
overflow-wrap: break-word; overflow-wrap: break-word;
color: rgba(255, 255, 255, 1); color: rgba(120, 174, 255, 1);
font-size: 20.00px; font-size: 14px;
letter-spacing: 1.6666666269302368px; /*font-weight: NaN;*/
font-family: Helvetica; text-align: center;
text-align: left; white-space: nowrap;
margin: 1% 0 0 20% line-height: 20px;
margin: 20px 32px 0 1602px;
} }
......
src/module/databoard/components/body/main-body.vue 0 → 100644
View file @ 6ce89686
<template>
<div class="page">
<div class="head">
<div class="head_content">
<span class="text_date">2023-02-28&nbsp;12:00:00</span>
<span class="text_car">刷新时间：10s</span>
</div>
</div>
<slot></slot>
</div>
</template>
<script>
export default {
name:"MainBody",
data() {
return {
};
},
methods: {}
};
</script>
<style scoped lang="css" src="../../assets/index.css"/>
src/module/databoard/index.vue
View file @ 6ce89686
<template> <template>
<div class="page"> <div class="page">
<div class="head"> <main-body>
<div class="head_content"> <template>
<span class="text_date">2023-08-01</span> <div class="middle">
<span class="text_time">17:18:29</span> <title-content-with-bord class="trade_left">
<span class="text_week">星期三</span> <template v-slot:title>营业情况</template >
<span class="text_title">联达供应链数据大屏</span> <template v-slot:content>
<span class="text_car">刷新时间：10s</span> <contrast-card v-for="data in mockData.yyqk" :title="data.title"
</div> :lt="data.amount"
</div> :lb="data.unit"
<div class="middle"> :rtl="data.title1"
<title-content-with-bord class="trade_left"> :rtm="data.amount1"
<template v-slot:title>营业情况</template > :rtr="data.rate1"
<template v-slot:content> :rbl="data.title2"
<contrast-card v-for="data in mockData.yyqk" :title="data.title" :rbm="data.amount2"
:lt="data.amount" :rbr="data.rate2"/>
:lb="data.unit" </template >
:rtl="data.title1" </title-content-with-bord>
:rtm="data.amount1" <container-with-bord class="trade_middle">
:rtr="data.rate1" <card style="margin-top: 10px; width: 80%; height: 20%; position: relative;">
:rbl="data.title2" <template>
:rbm="data.amount2" <title-content v-for="data in mockData.sr" style="width: 33.3%; text-align: center; float:left;">
:rbr="data.rate2"/> <template v-slot:title>
</template > {{ data.title }}
</title-content-with-bord> </template>
<container-with-bord class="trade_middle"> <template v-slot:content>
<card style="margin-top: 10px; width: 80%; height: 20%; position: relative;"> <num-with-r-b-mark>
<template> <template v-slot:num>{{ data.value }}</template>
<title-content v-for="data in mockData.sr" style="width: 33.3%; text-align: center; float:left;"> <template v-slot:unit>万元</template>
<template v-slot:title> </num-with-r-b-mark>
{{ data.title }} </template>
</template> </title-content>
<template v-slot:content> </template>
<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> </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>
<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> </container-with-bord>
</div> </div>
<div class="content trade_right"><!--左上边框--> <div class="content trade_right"><!--左上边框-->
<div class="t_line_box"> <div class="t_line_box">
<i class="t_l_line"></i> <i class="t_l_line"></i>
<i class="l_t_line"></i> <i class="l_t_line"></i>
</div> </div>
<!--右上边框--> <!--右上边框-->
<div class="t_line_box"> <div class="t_line_box">
<i class="t_r_line"></i> <i class="t_r_line"></i>
<i class="r_t_line"></i> <i class="r_t_line"></i>
</div> </div>
<!--左下边框--> <!--左下边框-->
<div class="t_line_box"> <div class="t_line_box">
<i class="l_b_line"></i> <i class="l_b_line"></i>
<i class="b_l_line"></i> <i class="b_l_line"></i>
</div> </div>
<!--右下边框--> <!--右下边框-->
<div class="t_line_box"> <div class="t_line_box">
<i class="r_b_line"></i> <i class="r_b_line"></i>
<i class="b_r_line"></i> <i class="b_r_line"></i>
</div> </div>
<div class="main_title"> <div class="main_title">
<img src="img/t_1.png" alt=""> <img src="img/t_1.png" alt="">
湖南省货运收入 湖南省货运收入
</div>
<div id="chart_1" class="chart" style="width:100%;height: 280px;"></div>
</div>
</div> </div>
<div id="chart_1" class="chart" style="width:100%;height: 280px;"></div> </template>
</div> </main-body>
</div>
</div> </div>
</template> </template>
<script> <script>
...@@ -220,8 +215,11 @@ import TitleContent from "./components/container/title-content.vue"; ...@@ -220,8 +215,11 @@ import TitleContent from "./components/container/title-content.vue";
import NumWithRBMark from "./components/layout/num-with-r-b-mark.vue"; import NumWithRBMark from "./components/layout/num-with-r-b-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";
import MainBody from "./components/body/main-body.vue";
export default { export default {
components: {ContainerWithBord, TitleContentWithBord, Card, NumWithRBMark, TitleContent, ContrastCard, InfoCard}, components: {
MainBody,
ContainerWithBord, TitleContentWithBord, Card, NumWithRBMark, TitleContent, ContrastCard, InfoCard},
data() { data() {
return { return {
constants: {}, constants: {},
......
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