Commit c36a9928 authored by 王礼鸿 Baimax Wang's avatar 王礼鸿 Baimax Wang

领域细分页面提交

parent 110cae9e
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
--container-shadow-color: #0930A9; /* 容器阴影色 */ --container-shadow-color: #0930A9; /* 容器阴影色 */
--corner-background-color: #0E5FFF; /* 容器角标色 */ --corner-background-color: #0E5FFF; /* 容器角标色 */
--card-background-color: #041755; /* 卡片背景色 */ --card-background-color: #041755; /* 卡片背景色 */
--card-background-select-color: #051135; /* 卡片背景色 */
--card-border1-color: #3673A3; /* 卡片边框色1 */ --card-border1-color: #3673A3; /* 卡片边框色1 */
--card-border2-color: #19EBFF; /* 卡片边框色2 */ --card-border2-color: #19EBFF; /* 卡片边框色2 */
--white-text-color: white; /* 白色文本 */ --white-text-color: white; /* 白色文本 */
......
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
<table> <table>
<tbody> <tbody>
<tr v-for="(row, idx) in $props.rows" :key="idx" :style="{height: 100 / rows.length + '%'}"> <tr v-for="(row, idx) in $props.rows" :key="idx" :style="{height: 100 / rows.length + '%'}">
<td><div class="col_number">{{ idx + 1 }}</div></td> <td v-if="showIcon"><div class="col_number">{{ idx + 1 }}</div></td>
<td class="winner_span">{{ row.title }}</td> <td class="winner_span" :style="columnsStyle['title']">{{ row.title }}</td>
<td v-for="(col, idz) in row.column" :key="idz"> <td v-for="(col, idz) in row.column" :key="idz" :style="columnsStyle[col.key]">
<p class="key_span">{{ col.key }}</p> <p class="key_span">{{ col.key }}</p>
<p class="value_span">{{ col.value }}</p> <p class="value_span">{{ col.value }}</p>
</td> </td>
...@@ -19,13 +19,22 @@ ...@@ -19,13 +19,22 @@
export default { export default {
name: "WinnersList", name: "WinnersList",
props: { props: {
showIcon: {
type: Boolean,
default: true
},
columnsStyle:{
type: Object,
},
rows: { rows: {
type: Array, type: Array,
default: [ default:function(){
return [
{title: '标题列', column: [{key: '字段', value: '0'}]}, {title: '标题列', column: [{key: '字段', value: '0'}]},
{title: '标题列', column: [{key: '字段', value: '0'}]}, {title: '标题列', column: [{key: '字段', value: '0'}]},
{title: '标题列', column: [{key: '字段', value: '0'}]} {title: '标题列', column: [{key: '字段', value: '0'}]}
] ];
}
} }
}, },
data() { data() {
......
<template>
<div ref="chart" @click=""/>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "LineBarChart",
data() {
return {
chart: null,
};
},
watch: {
data(n, o){
this.refreshData();
},
x(n,o){
this.refreshData();
},
y(n,o){
this.refreshData();
},
title(n, o){
this.refreshData();
},
formatter(n,o){
this.refreshData();
},
barFormatter(n,o){
this.refreshData();
},
lineFormatter(n,o){
this.refreshData();
},
},
methods: {
resizeChart() {
if (this.chart) {
this.chart.resize();
}
},
refreshData(){
this.option.title.text = this.title;
this.option.dataset.source = this.data;
this.option.dataset.dimensions = [this.x,this.y];
this.option.tooltip.formatter = this.formatter;
this.option.series[0].label.formatter = this.barFormatter;
this.option.series[1].label.formatter = this.lineFormatter;
if (this.chart){
this.chart.setOption(this.option);
}
}
},
mounted() {
setTimeout(() => {
let chartDom = this.$refs.chart;
this.refreshData();
this.chart = echarts.init(chartDom);
this.chart.setOption(this.option);
window.addEventListener('resize', this.resizeChart);
}, 500)
},
beforeDestroy() {
window.removeEventListener("resize", this.resizeChart);
},
props: {
title: {
type: String,
default: "折线条形图",
},
x: {
type: String,
default: "x",
},
y: {
type: String,
default: "y",
},
data: {
type: Array,
default: function (){
return [
{
"x": "2月1日",
"y": 747,
},
{
"x": "2月2日",
"y": 786,
},
{
"x": "2月3日",
"y": 547,
},
]
}
},
option:{
type: Object,
default: function () {
return {
tooltip: {
trigger: 'axis',
},
title: {
text: '折线条形图',
textStyle:{
color: 'white',
},
left: 'center'
},
grid:{
left: "5%",
right: "3%",
},
dataset: {
dimensions: ['x', 'y'],
source: [
{
"x": "2月1日",
"y": 747,
},
{
"x": "2月2日",
"y": 786,
},
{
"x": "2月3日",
"y": 547,
},
]
},
xAxis: {
type: 'category',
axisLabel: {
interval: 0,
rotate: 15,
color: 'white'
}
},
yAxis: [
{
type: 'value',
axisLabel: {
color: 'white'
}
},
{
type: 'value',
axisLabel: {
color: 'white'
},
splitLine: false
}
],
series: [
{
type: 'bar',
label: {
show: true,
position: 'top',
color: "#00CCD2"
},
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{offset: 0, color: '#00CCD2'},
{offset: 1, color: '#00A2FF'}
]
}
},
{
type: 'line',
color: 'red',
label: {
show: true,
position: 'bottom',
color: "red"
},
}
]
}
}
},
formatter:{
type: Function
},
barFormatter:{
type: Function
},
lineFormatter:{
type: Function
}
},
};
</script>
<style scoped>
</style>
...@@ -86,6 +86,7 @@ export default { ...@@ -86,6 +86,7 @@ export default {
height: var(--titleHeight); height: var(--titleHeight);
margin-left: 10%; margin-left: 10%;
line-height: 30px; line-height: 30px;
white-space: nowrap;
} }
.center-title{ .center-title{
......
<template> <template>
<table> <table>
<thead v-if="showHead"> <thead v-if="showHead">
<tr><th>{{title}}&nbsp;</th></tr> <tr><th :style="eval('title',title)">{{title}}&nbsp;</th></tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="row in data"><td :style="eval(cellStyleJs,row[name])">{{row[name]}}</td></tr> <tr v-for="row in data"><td :style="eval('cell',(row[name]?row[name]:''))">{{row[name]?row[name]:''}}</td></tr>
</tbody> </tbody>
</table> </table>
</template> </template>
...@@ -17,12 +17,17 @@ export default { ...@@ -17,12 +17,17 @@ export default {
} }
}, },
methods: { methods: {
eval(str,data){ eval(type,data){
let res; let res = type === "title"?this.titleStyle:this.cellStyle;
if (str){ if (res){
res = eval(str); return res;
}else if (this.cellStyleFunction) { }
res = this.cellStyleFunction(data); let styleJs = type === "title"?this.titleStyleJs:this.cellStyleJs;
let styleFunction = type === "title"?this.titleStyleFunction:this.cellStyleFunction;
if (styleJs){
res = eval(styleJs);
}else if (styleFunction) {
res = styleFunction(data);
} }
return res; return res;
} }
...@@ -42,12 +47,24 @@ export default { ...@@ -42,12 +47,24 @@ export default {
data: { data: {
type: Array, type: Array,
}, },
cellStyle: {
type: Object,
},
cellStyleJs: { cellStyleJs: {
type: String, type: String,
}, },
cellStyleFunction:{ cellStyleFunction:{
type: Function type: Function
}, },
titleStyle: {
type: Object,
},
titleStyleJs: {
type: String,
},
titleStyleFunction:{
type: Function
},
} }
} }
......
This diff is collapsed.
<template>
<div class="turnover-detail">
<div class="menu">
<input type="button" :class="{'selectedBtn': currentBtn.subdivide === 'domain'}" value="领域细分" @click="clickBtn('subdivide','domain')">
<input type="button" :class="{'selectedBtn': currentBtn.subdivide === 'area'}" value="区域细分" @click="clickBtn('subdivide','area')">
<input type="button" :class="{'selectedBtn': currentBtn.subdivide === 'base'}" value="基地细分" @click="clickBtn('subdivide','base')">
<input type="button" :class="{'selectedBtn': currentBtn.subdivide === 'business'}" value="事业部细分" @click="clickBtn('subdivide','business')">
</div>
<div class="menu">
<input type="button" :class="{'selectedBtn': currentBtn.date === 'day'}" value="日统计" @click="clickBtn('date','day')">
<input type="button" :class="{'selectedBtn': currentBtn.date === 'month'}" value="月统计" @click="clickBtn('date','month')">
<input type="button" :class="{'selectedBtn': currentBtn.date === 'year'}" value="年统计" @click="clickBtn('date','year')">
</div>
<div class="card-board" v-if="currentBtn.subdivide === 'domain'">
<contrast-card v-for="data in currentData.head" style="height: 100%;width: 18%;" :class="{'selectCard': currentCard === data.title}" @click.native="selectCard(data)">
<title-content-mark style="color: #369afa;float: left;width: 40%;font-size: 18px" :title-style="{'font-weight': 'bold'}" :title="data.title" :content="data.amount" isBold/>
<div style="width: 60%; height: 100%; float:left; padding: 2% 2% 0 8%; line-height: 40px; display: flex; align-items: center;font-size: 16px;">
<table-column style="float: left;width: 25%;" :data="data.hb" name="title"/>
<table-column style="float: left;width: 40%;" :data="data.hb" name="amount"/>
<table-column style="float: left;width: 35%;" :data="data.hb" name="rate" cell-style-js="var res = {color: '#5eeef4'}; if(data.indexOf('+') !== -1){res.color = '#fee064'} res;"/>
</div>
</contrast-card>
</div>
<div class="card-board" v-if="currentBtn.subdivide !== 'domain'">
<contrast-card v-for="data in currentData.head" style="height: 100%;width: 18%;" :class="{'selectCard': currentCard === data.title}" @click.native="selectCard(data)" :style="listCardStyle">
<div style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 28px; display: flex; align-items: center; font-size: 14px;">
<table-column style="float: left;width: 35%;" :data="data.data" name="title" :title="data.title" show-head :title-style="{'font-size': '18px','padding-left':'7%','white-space': 'nowrap'}"/>
<table-column style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;" :data="data.data" name="today" show-head/>
<table-column style="float: left;width: 20%;" :data="data.data" name="yesterday" title="昨日" show-head/>
</div>
</contrast-card>
</div>
<div class="chart">
<display-board class="trade_left" :title="listTitle" title_size="large">
<winners-list style="height: 96%" id="ar_company_list" :rows="currentData[currentCard]?currentData[currentCard].list:[]" :show-icon="false" :columns-style="{'title':{'width':'50%'},'订单量(万吨)':{'width':'30%'}}"/>
</display-board>
<line-bar-chart style="width: 75%;height: 100%;" :data="currentData[currentCard]?currentData[currentCard].detail:[]" x="company" y="value" :title="chartTitle" :formatter="formatter" :line-formatter="lineFormatter"/>
</div>
</div>
</template>
<script>
import TitleContentMark from "../components/layout/title-content-mark.vue";
import TableColumn from "../components/table/table-column.vue";
import ContrastCard from "../components/card/contrast-card.vue";
import * as echarts from "echarts";
import data from "./mockData/order_proportion.json";
import DisplayBoard from "../components/container/display-board.vue";
import WinnersList from "../components/card/winners-list.vue";
import LineBarChart from "../components/chart/line-bar-chart.vue";
export default {
name:"OrderProportion",
components: {LineBarChart, WinnersList, DisplayBoard, ContrastCard, TableColumn, TitleContentMark},
data() {
return {
currentData: {},
mockData: data,
chart: null,
currentCard:null,
listTitle: "当日订单量占比",
chartTitle: "当日订单委托单位占比",
listCardStyle:{
width: "18%",
},
currentBtn:{
date: "day",
subdivide: "domain",
},
}
},
methods: {
back(){
this.$router.push({path: '/'});
},
changeDimension(){
this.currentData = this.mockData[this.currentBtn.subdivide][this.currentBtn.date];
this.currentCard = this.currentData.head[0].title;
this.calcCardWidth();
},
clickBtn(type,dimension){
this.currentBtn[type] = dimension;
this.changeDimension();
},
selectCard(data){
this.currentCard = data.title;
},
formatter(param){
return "订单量:<br>" + param[0].marker + param[0].name + ":\t" + param[0].data.value + "<br> " + param[1].marker + "占比:" + param[1].data.proportion + "%";
},
lineFormatter(param){
return param.data.proportion + '%';
},
calcCardWidth(){
this.listCardStyle.width = "calc((100% - 4rem) / " + this.currentData.head.length + ")";
}
},
mounted() {
this.changeDimension();
setTimeout(() => {
let chartDom = this.$refs.chart;
this.chart = echarts.init(chartDom);
this.chart.setOption(this.chartOption);
}, 500)
},
}
</script>
<style scoped>
.turnover-detail{
width: 100%;
height: 100%;
}
.card-board{
width: 100%;
height: 25%;
display: flex;
justify-content: space-between;
padding: 2rem;
}
.menu{
width: 100%;
height: 5%;
display: flex;
align-items: center;
padding-left: 2%;
}
.chart{
width: 100%;
height: 65%;
display: flex;
justify-content: space-between;
padding: 0 2rem 2rem 2rem;
}
input[type="button"]{
height: 80%;
margin: 0.5%;
border: none;
font-size: 12px;
border-radius: 25px;
padding: 0 10px;
color: #00c8d6;
background-color: #1234a1;
}
.selectedBtn{
color: #1234a1 !important;
background-color: #00c8d6 !important;
}
.unSelectedBtn{
color: #00c8d6;
background-color: #1234a1;
}
.selectCard{
background-color: var(--card-background-select-color) !important;
}
</style>
...@@ -292,11 +292,14 @@ export default { ...@@ -292,11 +292,14 @@ export default {
color: 'white' color: 'white'
} }
}, },
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [ series: [
{ {
type: 'bar', type: 'bar',
label: {
show: true,
position: 'top',
color: "#00CCD2",
},
color: { color: {
type: 'linear', type: 'linear',
x: 0, y: 0, x2: 0, y2: 1, x: 0, y: 0, x2: 0, y2: 1,
...@@ -308,6 +311,11 @@ export default { ...@@ -308,6 +311,11 @@ export default {
}, },
{ {
type: 'bar', type: 'bar',
label: {
show: true,
position: 'top',
color: "#FFFAB7",
},
color: { color: {
type: 'linear', type: 'linear',
x: 0, y: 0, x2: 0, y2: 1, x: 0, y: 0, x2: 0, y2: 1,
...@@ -319,6 +327,11 @@ export default { ...@@ -319,6 +327,11 @@ export default {
}, },
{ {
type: 'bar', type: 'bar',
label: {
show: true,
position: 'top',
color: "#81FBB8",
},
color: { color: {
type: 'linear', type: 'linear',
x: 0, y: 0, x2: 0, y2: 1, x: 0, y: 0, x2: 0, y2: 1,
...@@ -339,6 +352,9 @@ export default { ...@@ -339,6 +352,9 @@ export default {
}, },
watch: {}, watch: {},
methods: { methods: {
back(){
this.$router.push({path: '/'});
},
resizeChart() { resizeChart() {
if (this.chart) { if (this.chart) {
this.chart.resize(); this.chart.resize();
......
...@@ -88,8 +88,8 @@ ...@@ -88,8 +88,8 @@
</div> </div>
<display-board class="trade_right" title="当日订单量占比"> <display-board class="trade_right" title="当日订单量占比">
<div style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;"> <div style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;">
<ring-pie-chart ref="transportTypeChart" style="width: 100%;height: 50%;" name="运输类型占比" :data="mockData.drddlzb.transportType"/> <ring-pie-chart ref="transportTypeChart" style="width: 100%;height: 50%;" name="运输类型占比" :data="mockData.drddlzb.transportType" @click.native="routerTo('/order-proportion')"/>
<ring-pie-chart ref="customerChart" style="width: 100%;height: 50%;" name="公司占比" :data="mockData.drddlzb.customer"/> <ring-pie-chart ref="customerChart" style="width: 100%;height: 50%;" name="公司占比" :data="mockData.drddlzb.customer" @click.native="routerTo('/order-proportion')"/>
</div> </div>
</display-board> </display-board>
</div> </div>
...@@ -377,7 +377,6 @@ export default { ...@@ -377,7 +377,6 @@ export default {
} }
}, },
routerTo(path){ routerTo(path){
console.log(path)
this.$router.push({path: path}); this.$router.push({path: path});
}, },
// 跳转已开票未收款页面 // 跳转已开票未收款页面
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<div class="page"> <div class="page">
<div class="head" @click="goIndex"> <div class="head" @click="goIndex">
<div class="text_left"> <div class="text_left">
<input class="btn" type="button" value="返回上级" v-if="$route.fullPath !== '/index'" @click="goIndex">
<span>2023-08-01</span> <span>2023-08-01</span>
<span>17:18:29</span> <span>17:18:29</span>
<span>星期三</span> <span>星期三</span>
...@@ -30,6 +31,7 @@ export default { ...@@ -30,6 +31,7 @@ export default {
}, },
methods: { methods: {
goIndex() { goIndex() {
console.log(this.$router)
this.$router.push({path: '/'}) this.$router.push({path: '/'})
}, },
reload() { reload() {
...@@ -37,14 +39,14 @@ export default { ...@@ -37,14 +39,14 @@ export default {
this.$nextTick(function () { this.$nextTick(function () {
this.isRouterAlive = true this.isRouterAlive = true
}) })
} },
}, },
mounted() { mounted() {
// 倒计时器 // 倒计时器
this.countDownTimer = setInterval(() => { this.countDownTimer = setInterval(() => {
this.countDown-- this.countDown--
if (this.countDown <= 0) { if (this.countDown <= 0) {
this.reload() // this.reload()
this.countDown = 10 this.countDown = 10
} }
}, 1000) }, 1000)
...@@ -69,4 +71,16 @@ export default { ...@@ -69,4 +71,16 @@ export default {
padding-left: 0; padding-left: 0;
} }
} }
.btn{
height: 70%;
margin: 0.5%;
border: none;
font-size: 12px;
border-radius: 25px;
padding: 0 10px;
line-height: 100%;
color: #00c8d6;
background-color: #1234a1;
margin: auto;
}
</style> </style>
...@@ -7,6 +7,7 @@ import ArMonthlyBar from "../../databoard/components/chart/ar-monthly-bar.vue"; ...@@ -7,6 +7,7 @@ import ArMonthlyBar from "../../databoard/components/chart/ar-monthly-bar.vue";
import ArCompanyMonthlyBar from "../../databoard/components/chart/ar-company-monthly-bar.vue"; import ArCompanyMonthlyBar from "../../databoard/components/chart/ar-company-monthly-bar.vue";
import ArMonthlyCompanyBar from "../../databoard/components/chart/ar-monthly-company-bar.vue"; import ArMonthlyCompanyBar from "../../databoard/components/chart/ar-monthly-company-bar.vue";
import TurnoverDetail from "../../databoard/databoard/turnover-detail.vue"; import TurnoverDetail from "../../databoard/databoard/turnover-detail.vue";
import OrderProportion from "../../databoard/databoard/order-proportion.vue";
Vue.use(Router) Vue.use(Router)
...@@ -56,6 +57,11 @@ export default new Router({ ...@@ -56,6 +57,11 @@ export default new Router({
path: '/turnover-detail', path: '/turnover-detail',
name: 'turnoverDetail', name: 'turnoverDetail',
component: TurnoverDetail component: TurnoverDetail
},
{
path: '/order-proportion',
name: 'OrderProportion',
component: OrderProportion
} }
] ]
}) })
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