Skip to content

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

调整容器组件UI

parent 0b39aa25
Show whitespace changes
Inline Side-by-side
Showing with 801 additions and 224 deletions
config/index.js
View file @ 480e1b1b
...@@ -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 @ 480e1b1b
:root {
--global-background-color: #020042; /* 全局背景色 */
--container-background-color: #020046; /* 容器背景色 */
}
.page { .page {
background-color: rgba(0, 10, 50, 1.000000);
position: relative; position: relative;
height: 1080.00px; height: 1080px;
width: 100%; width: 100%;
min-width: 1920px; min-width: 1920px;
overflow: hidden; overflow: hidden;
background: url(./img/SketchPng1d2d7c804f3d192d29ad3750c138064d493e3f502f79253a3bfa266fbdda7488.png) 100% no-repeat; /*background: url(./img/SketchPng1d2d7c804f3d192d29ad3750c138064d493e3f502f79253a3bfa266fbdda7488.png) 100% no-repeat;*/
background-color: var(--global-background-color);
background-size: 100% 100% background-size: 100% 100%
} }
.head { .head {
height: 10%; height: 10%;
} }
.head_content { .head_content {
background: url(./img/SketchPng5fda9a9add36a51f8fa99e5a1426c6a0630dbdfb68a8e0ea5fbbd1c1392d5e28.png) 0px 0px no-repeat; background: url(./img/top_img.png) no-repeat center;
background-position: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex;
justify-content: space-between;
text-align: center;
white-space: nowrap;
} }
.text_date { .text_date {
...@@ -169,7 +176,7 @@ ...@@ -169,7 +176,7 @@
.trade_middle { .trade_middle {
margin-bottom: 50px; margin-bottom: 50px;
width: 52%; width: 50%;
margin-left: 1%; margin-left: 1%;
} }
......
src/module/databoard/assets/index_back.css
View file @ 480e1b1b
...@@ -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/card_title_large.vue 0 → 100644
View file @ 480e1b1b
<template>
<div class="trapezoid">
<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: "CardTitleLarge"
};
</script>
<style scoped>
.trapezoid {
width: 100%;
height: 36px;
margin-bottom: 10px;
}
.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: 12px;
font-family: 黑体,serif;
font-weight: 700;
text-align: center;
letter-spacing: 0.2rem;
white-space: nowrap;
line-height: 30px;
color: #19ECFF;
}
.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, #0933AD88, transparent);
transform: skewX(-20deg);
}
</style>
src/module/databoard/components/card/card_title_small.vue 0 → 100644
View file @ 480e1b1b
<template>
<div class="trapezoid">
<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: "CardTitleSmall"
};
</script>
<style scoped>
.trapezoid {
width: 100%;
height: 36px;
margin-bottom: 10px;
}
.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: 12px;
font-family: 黑体,serif;
font-weight: 700;
text-align: center;
letter-spacing: 0.2rem;
white-space: nowrap;
line-height: 30px;
color: #19ECFF;
}
.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/card/winners-list.vue 0 → 100644
View file @ 480e1b1b
<template>
<div style="height: 100%">
<div class="main_table t_btn8">
<table>
<tbody>
<tr v-for="(row, idx) in rows" :key="idx" :style="{height: 100 / rows.length + '%'}">
<td>
<div class="col_box">
<span class="winner_span">{{ row.title }}</span>
<span class="number_span">NO.{{ idx + 1 }}</span>
</div>
<div class="col_box">
<div v-for="(col, idz) in row.column" :key="idz">
<p class="key_span">{{ col.key }}</p>
<p class="value_span">{{ col.value }}</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
export default {
name: "WinnersList",
props: {},
data() {
return {
rows: [
{
title: "上海欧冶股份有限公司",
column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
},
{
title: "上海欧冶股份有限公司",
column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
},
{
title: "上海欧冶股份有限公司",
column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
},
{
title: "上海欧冶股份有限公司",
column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
},
{
title: "上海欧冶股份有限公司",
column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
}
]
};
},
methods: {}
};
</script>
<style scoped>
.main_table {
width: 95%;
height: 84%;
}
.main_table table {
width: 100%;
height: 100%;
}
.main_table tr {
height: 20%;
}
.main_table td {
padding: 0;
color: #fff;
font-size: 10px;
text-align: center;
}
.main_table tbody tr:nth-child(odd) {
background-color: #04136B;
}
.main_table tbody tr:nth-child(even) {
background-color: #051D7D;
}
.t_btn8, .t_btn2, .t_btn3 {
position: relative;
z-index: 100;
cursor: pointer;
}
.col_box {
display: flex;
justify-content: space-around;
}
.winner_span {
font-weight: bold;
}
.number_span {
color: #bf360c;
font-weight: bold;
}
.key_span {
color: darkgrey;
font-weight: bold;
}
.value_span {
color: #00c853;
font-weight: bold;
}
</style>
src/module/databoard/components/container/container-with-bord.vue
View file @ 480e1b1b
<template> <template>
<div class="content container-with-bord" style="cursor: pointer; position: relative;"> <div class="content container-with-bord" style="cursor: pointer; position: relative;">
<!--左上边框--> <!--角标组件-->
<div class="t_line_box"> <corner-mark-small></corner-mark-small>
<i class="t_l_line"></i> <!--标题组件-->
<i class="l_t_line"></i> <card-title-small v-if="$slots.title">
</div> <slot name="title"></slot>
<!--右上边框--> </card-title-small>
<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> <slot></slot>
</div> </div>
</template> </template>
<script> <script>
import CornerMarkSmall from "../icon/corner_mark_small.vue";
import CornerMarkLarge from "../icon/corner_mark_large.vue";
import CardTitleSmall from "../card/card_title_small.vue"
export default { export default {
name:"ContainerWithBord", name: "ContainerWithBord",
components: {CornerMarkSmall, CornerMarkLarge, CardTitleSmall},
data() { data() {
return { return {};
};
}, },
methods: {} methods: {}
}; };
</script> </script>
<style scoped> <style scoped>
div{ div {
color: white; color: white;
} }
.container-with-bord{
box-sizing: border-box; .container-with-bord {
border: 1px solid #2C58A6; background-color: var(--container-background-color);
position: relative; position: relative;
box-shadow: 0 0 10px #2C58A6; box-sizing: border-box;
border-radius: 15px;
box-shadow: 0 0 40px 10px #051E82 inset;
border: 2px solid #0D53B7;
} }
</style> </style>
<style scoped lang="css" src="../../assets/index.css"/>
src/module/databoard/components/icon/corner_mark_large.vue 0 → 100644
View file @ 480e1b1b
<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: -2px;
top: -2px;
border-top: 32px solid #0D53B7;
border-right: 32px solid transparent;
}
.conner_mark_left2 {
position: absolute;
left: -2px;
top: -2px;
border-top: 28px solid var(--global-background-color);
border-right: 28px solid transparent;
}
.conner_mark_left3 {
position: absolute;
left: -2px;
top: -2px;
border-top: 24px solid #0E5FFF;
border-right: 24px solid transparent;
}
.conner_mark_right1 {
position: absolute;
right: -2px;
top: -2px;
border-top: 32px solid #0D53B7;
border-left: 32px solid transparent;
}
.conner_mark_right2 {
position: absolute;
right: -2px;
top: -2px;
border-top: 28px solid var(--global-background-color);
border-left: 28px solid transparent;
}
.conner_mark_right3 {
position: absolute;
right: -2px;
top: -2px;
border-top: 24px solid #0E5FFF;
border-left: 24px solid transparent;
}
</style>
src/module/databoard/components/icon/corner_mark_small.vue 0 → 100644
View file @ 480e1b1b
<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: -2px;
top: -2px;
border-top: 36px solid #0D53B7;
border-right: 18px solid transparent;
}
.conner_mark_left2 {
position: absolute;
left: -2px;
top: -2px;
border-top: 30px solid var(--global-background-color);
border-right: 15px solid transparent;
}
.conner_mark_left3 {
position: absolute;
left: -2px;
top: -2px;
border-top: 20px solid #0E5FFF;
border-right: 10px solid transparent;
}
.conner_mark_right1 {
position: absolute;
right: -2px;
top: -2px;
border-top: 36px solid #0D53B7;
border-left: 18px solid transparent;
}
.conner_mark_right2 {
position: absolute;
right: -2px;
top: -2px;
border-top: 30px solid var(--global-background-color);
border-left: 15px solid transparent;
}
.conner_mark_right3 {
position: absolute;
right: -2px;
top: -2px;
border-top: 20px solid #0E5FFF;
border-left: 10px solid transparent;
}
</style>
src/module/databoard/components/test/counter-button.vue 0 → 100644
View file @ 480e1b1b
<template>
<button class="click-button" @click.right.prevent="count++">鼠标右键点击{{ count }}次</button>
</template>
<script>
export default {
name: "CounterButton",
data() {
return {
count: 0
};
},
props: {},
methods: {}
};
</script>
<style scoped>
.click-button {
height: 4rem;
width: 12rem;
}
</style>
src/module/databoard/components/test/emit-test.vue 0 → 100644
View file @ 480e1b1b
<template>
<ul>
<li class="optionItem" v-for="(option, i) in options" :key="i" @click="handleSelect(option)">{{ i }}-{{ option }}</li>
</ul>
</template>
<script>
export default {
props: {
options: {
type: String,
default: () => [],
required: true,
validate: value => {
return value.length >= 0
}
},
},
data() {
return {}
},
methods: {
handleSelect(option) {
this.$emit("selected", option)
}
}
};
</script>
<style scoped>
.optionItem{
background-color: #00b8d4;
}
</style>
src/module/databoard/components/test/setup-api.vue 0 → 100644
View file @ 480e1b1b
<template>
<div style="background-color: whitesmoke">
<div>{{ setupName }}: {{ counter }}: {{ obj.title }}</div>
<div>{{ twiceTheCounter }}</div>
<button @click="action" style="height: 4rem;width: 8rem">按钮</button>
</div>
</template>
<script>
import {computed, onMounted, reactive, ref, watch} from "vue";
export default {
props: {
setupName: String
},
setup() {
// 获取响应式变量：基本类型，获取的变量需要.value获取值
const counter = ref(0);
// 获取响应式变量：引用类型
const obj = reactive({title: "这是个标题"});
const twiceTheCounter = computed(() => counter.value * 2);
watch(counter, (newValue, oldValue) => {
console.log(newValue, oldValue);
});
onMounted(() => {
console.log("mounted");
});
const action = () => {
counter.value = counter.value + 3;
obj.title = "我改名字了";
};
return {
counter,
obj,
twiceTheCounter,
action
};
}
};
</script>
<style scoped>
</style>
src/module/databoard/index.vue
View file @ 480e1b1b
...@@ -2,17 +2,19 @@ ...@@ -2,17 +2,19 @@
<div class="page"> <div class="page">
<div class="head"> <div class="head">
<div class="head_content"> <div class="head_content">
<div>
<span class="text_date">2023-08-01</span> <span class="text_date">2023-08-01</span>
<span class="text_time">17:18:29</span> <span class="text_time">17:18:29</span>
<span class="text_week">星期三</span> <span class="text_week">星期三</span>
<span class="text_title">联达供应链数据大屏</span> </div>
<div>
<span class="text_car">刷新时间：10s</span> <span class="text_car">刷新时间：10s</span>
</div> </div>
</div> </div>
</div>
<div class="middle"> <div class="middle">
<title-content-with-bord class="trade_left"> <container-with-bord class="trade_left">
<template v-slot:title>营业情况</template > <template v-slot:title>营业情况</template>
<template v-slot:content>
<contrast-card v-for="data in mockData.yyqk" :title="data.title" <contrast-card v-for="data in mockData.yyqk" :title="data.title"
:lt="data.amount" :lt="data.amount"
:lb="data.unit" :lb="data.unit"
...@@ -22,29 +24,23 @@ ...@@ -22,29 +24,23 @@
:rbl="data.title2" :rbl="data.title2"
:rbm="data.amount2" :rbm="data.amount2"
:rbr="data.rate2"/> :rbr="data.rate2"/>
</template > </container-with-bord>
</title-content-with-bord>
<container-with-bord class="trade_middle"> <container-with-bord class="trade_middle">
<card style="margin-top: 10px; width: 80%; height: 20%; position: relative;"> <card style="margin-top: 10px; width: 80%; height: 20%; position: relative;">
<template> <template>
<title-content v-for="data in mockData.sr" style="width: 33.3%; text-align: center; float:left;"> <title-content v-for="data in mockData.sr" style="width: 33.3%; text-align: center; float:left;">
<template v-slot:title> <template v-slot:title>{{ data.title }}</template>
{{ data.title }}
</template>
<template v-slot:content>
<num-with-r-b-mark> <num-with-r-b-mark>
<template v-slot:num>{{ data.value }}</template> <template v-slot:num>{{ data.value }}</template>
<template v-slot:unit>万元</template> <template v-slot:unit>万元</template>
</num-with-r-b-mark> </num-with-r-b-mark>
</template>
</title-content> </title-content>
</template> </template>
</card> </card>
<div id="main_bar_chart" style="width: 897px; margin: auto; height: 350px;"/> <div id="main_bar_chart" style="width: 897px; margin: auto; height: 350px;"/>
</container-with-bord> </container-with-bord>
<title-content-with-bord class="trade_right"> <container-with-bord class="trade_right">
<template v-slot:title>账款情况</template > <template v-slot:title>账款情况</template>
<template v-slot:content>
<contrast-card v-for="data in mockData.zkqk" :title="data.title" <contrast-card v-for="data in mockData.zkqk" :title="data.title"
:lt="data.amount" :lt="data.amount"
:lb="data.unit" :lb="data.unit"
...@@ -54,42 +50,29 @@ ...@@ -54,42 +50,29 @@
:rbl="data.title2" :rbl="data.title2"
:rbm="data.amount2" :rbm="data.amount2"
:rbr="data.rate2"/> :rbr="data.rate2"/>
</template > </container-with-bord>
</title-content-with-bord>
</div> </div>
<div class="middle"> <div class="middle">
<div class="content trade_left" style="cursor: pointer;"> <container-with-bord class="trade_left">
<!--左上边框--> <template v-slot:title>已开票未收款</template>
<div class="t_line_box"> <winners-list/>
<i class="t_l_line"></i> </container-with-bord>
<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;"> <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%;margin-bottom: 12px;">
<container-with-bord style="height: calc(50% - 6px); width: 100%;"> <container-with-bord style="width: 32%;">
<template v-slot:title>每日目标情况</template>
</container-with-bord>
<container-with-bord style="width: 32%;">
<template v-slot:title>月度目标情况</template>
</container-with-bord>
<container-with-bord style="width: 32%;">
<template v-slot:title>年度目标情况</template>
</container-with-bord>
</div>
<div style="height: 50%; width: 100%;">
<div style="width: 100%; height: 50%;"> <div style="width: 100%; height: 50%;">
<card style="width: 32%; margin: 5px calc(4%/6); height: calc(100% - 10px); position: relative; float: left"> <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%;"> <title-content style="text-align: center; float:left; width: 100%;">
<template v-slot:title> <template v-slot:title>
当日订单 当日订单
...@@ -106,7 +89,8 @@ ...@@ -106,7 +89,8 @@
</template> </template>
</title-content> </title-content>
</card> </card>
<card style="width: 32%; margin: 5px calc(4%/6); height: calc(100% - 10px); position: relative; float: left"> <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%;"> <title-content style="text-align: center; float:left; width: 100%;">
<template v-slot:title> <template v-slot:title>
当日完成量 当日完成量
...@@ -123,7 +107,8 @@ ...@@ -123,7 +107,8 @@
</template> </template>
</title-content> </title-content>
</card> </card>
<card style="width: 32%; margin: 5px calc(4%/6); height: calc(100% - 10px); position: relative; float: left"> <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%;"> <title-content style="text-align: center; float:left; width: 100%;">
<template v-slot:title> <template v-slot:title>
余量 余量
...@@ -177,37 +162,11 @@ ...@@ -177,37 +162,11 @@
</title-content> </title-content>
</card> </card>
</div> </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">
<img src="img/t_1.png" alt="">
湖南省货运收入
</div>
<div id="chart_1" class="chart" style="width:100%;height: 280px;"></div>
</div> </div>
<container-with-bord class="trade_right">
<template v-slot:title>货运收入</template>
</container-with-bord>
</div> </div>
</div> </div>
</template> </template>
...@@ -220,97 +179,108 @@ import TitleContent from "./components/container/title-content.vue"; ...@@ -220,97 +179,108 @@ 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 WinnersList from "./components/card/winners-list.vue";
export default { export default {
components: {ContainerWithBord, TitleContentWithBord, Card, NumWithRBMark, TitleContent, ContrastCard, InfoCard}, components: {
ContainerWithBord,
TitleContentWithBord,
Card,
NumWithRBMark,
TitleContent,
ContrastCard,
InfoCard,
WinnersList
},
data() { data() {
return { return {
constants: {}, constants: {},
mockData:{ mockData: {
yyqk:{ yyqk: {
yye:{ yye: {
title:"营业额", title: "营业额",
amount:"20,303", amount: "20,303",
unit:"万元", unit: "万元",
title1:"昨天", title1: "昨天",
amount1:"21,000", amount1: "21,000",
rate1:"-3.32%", rate1: "-3.32%",
title2:"上月", title2: "上月",
amount2:"20，000", amount2: "20，000",
rate2:"+4.92%", rate2: "+4.92%",
}, },
cb:{ cb: {
title:"成本", title: "成本",
amount:"10,303", amount: "10,303",
unit:"万元", unit: "万元",
title1:"昨日", title1: "昨日",
amount1:"11,000", amount1: "11,000",
rate1:"-2.68%", rate1: "-2.68%",
title2:"上月", title2: "上月",
amount2:"10,000", amount2: "10,000",
rate2:"+5.71%", rate2: "+5.71%",
}, },
ml:{ ml: {
title:"毛利", title: "毛利",
amount:"10,000", amount: "10,000",
unit:"万元", unit: "万元",
title1:"昨日", title1: "昨日",
amount1:"10,000", amount1: "10,000",
rate1:"0.00%", rate1: "0.00%",
title2:"上月", title2: "上月",
amount2:"10,000", amount2: "10,000",
rate2:"0.00%", rate2: "0.00%",
}, },
}, },
zkqk:{ zkqk: {
yszk:{ yszk: {
title:"应收账款", title: "应收账款",
amount:"20,303", amount: "20,303",
unit:"万元", unit: "万元",
title1:"昨天", title1: "昨天",
amount1:"21,000", amount1: "21,000",
rate1:"-3.32%", rate1: "-3.32%",
title2:"上月", title2: "上月",
amount2:"20，000", amount2: "20，000",
rate2:"+4.92%", rate2: "+4.92%",
}, },
yfzk:{ yfzk: {
title:"应付账款", title: "应付账款",
amount:"10,303", amount: "10,303",
unit:"万元", unit: "万元",
title1:"昨日", title1: "昨日",
amount1:"11,000", amount1: "11,000",
rate1:"-2.68%", rate1: "-2.68%",
title2:"上月", title2: "上月",
amount2:"10,000", amount2: "10,000",
rate2:"+5.71%", rate2: "+5.71%",
}, },
zsye:{ zsye: {
title:"账上余额", title: "账上余额",
amount:"10,000", amount: "10,000",
unit:"万元", unit: "万元",
title1:"昨日", title1: "昨日",
amount1:"10,000", amount1: "10,000",
rate1:"0.00%", rate1: "0.00%",
title2:"上月", title2: "上月",
amount2:"10,000", amount2: "10,000",
rate2:"0.00%", rate2: "0.00%",
}, },
}, },
sr:[ sr: [
{ {
title:'累计营业收入（当年）', title: '累计营业收入（当年）',
value:'20,303', value: '20,303',
}, },
{ {
title:'应收款（财务）', title: '应收款（财务）',
value:'20,303', value: '20,303',
}, },
{ {
title:'应收款（营销）', title: '应收款（营销）',
value:'20,303', value: '20,303',
}, },
], ],
barChart:{ barChart: {
textStyle: {color: "#fff"}, textStyle: {color: "#fff"},
tooltip: {}, tooltip: {},
xAxis: { xAxis: {
...@@ -335,7 +305,7 @@ export default { ...@@ -335,7 +305,7 @@ export default {
}; };
}, },
methods: { methods: {
drawMainBarChart(){ drawMainBarChart() {
let myChart = echarts.init(document.getElementById('main_bar_chart')); let myChart = echarts.init(document.getElementById('main_bar_chart'));
myChart.setOption(this.mockData.barChart); myChart.setOption(this.mockData.barChart);
} }
...@@ -345,4 +315,3 @@ export default { ...@@ -345,4 +315,3 @@ export default {
} }
}; };
</script> </script>
<style scoped lang="css" src="./assets/index.css"/>
src/module/index/index.js
View file @ 480e1b1b
...@@ -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
......
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