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 @@
}
.head {
height: 10%;
height: 70px;
margin-bottom: 24px;
display: flex;
}
.head_content {
background: url(./img/SketchPng5fda9a9add36a51f8fa99e5a1426c6a0630dbdfb68a8e0ea5fbbd1c1392d5e28.png) 0px 0px no-repeat;
background: url(./img/HeadBg.png) 0px 0px no-repeat;
background-position: center;
width: 100%;
height: 100%;
display: flex;
}
.text_date {
width: 144px;
height: 20px;
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%
color: rgba(120, 174, 255, 1);
font-size: 14px;
/*font-weight: NaN;*/
text-align: center;
white-space: nowrap;
line-height: 20px;
margin: 20px 0 0 36px;
}
......@@ -66,13 +72,16 @@
.text_car {
width: 106px;
height: 20px;
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%
color: rgba(120, 174, 255, 1);
font-size: 14px;
/*font-weight: NaN;*/
text-align: center;
white-space: nowrap;
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>
<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>
<main-body>
<template>
<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>
</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 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 id="chart_1" class="chart" style="width:100%;height: 280px;"></div>
</div>
</div>
</template>
</main-body>
</div>
</template>
<script>
......@@ -220,8 +215,11 @@ 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";
import MainBody from "./components/body/main-body.vue";
export default {
components: {ContainerWithBord, TitleContentWithBord, Card, NumWithRBMark, TitleContent, ContrastCard, InfoCard},
components: {
MainBody,
ContainerWithBord, TitleContentWithBord, Card, NumWithRBMark, TitleContent, ContrastCard, InfoCard},
data() {
return {
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