Skip to content

S
shld-databoard-ui
Commit 47db6942 authored by Inner peace's avatar Inner peace
Browse files
Options

Merge remote-tracking branch 'origin/240806_pro_release' into 240806_pro_release 

# Conflicts:
#	src/module/api/apiList.js
#	src/module/databoard/databoard/safe-quality.vue
parents 5457301c 2d1744e7
Hide whitespace changes
Inline Side-by-side
Showing with 1459 additions and 365 deletions
src/module/api/apiList.js
View file @ 47db6942
......@@ -22,24 +22,24 @@ export const userLogin = (username, pass, captchaSign, verificationcode, captcha
//首页营业额率值 -汇总
export const getBusinessConditionDatas = (cur_day) => fetch('/api/query/*/action/get_business_condition_datas', {
aux: {
cur_day: cur_day
}
aux: {
cur_day: cur_day
}
}, 'POST');
//明细页营业额汇月 -汇总
export const getBusinessConditionDataByMonth = (cur_day) => fetch('/api/query/*/action/get_business_condition_datas_by_month', {
aux: {
cur_day: cur_day
}
aux: {
cur_day: cur_day
}
}, 'POST');
//明细页营业额汇年 -汇总
export const getBusinessConditionDatasByYear = (cur_day) => fetch('/api/query/*/action/get_business_condition_datas_by_year', {
aux: {
cur_day: cur_day
}
aux: {
cur_day: cur_day
}
}, 'POST');
//明细页营业额汇年 -同期对比
......@@ -57,9 +57,9 @@ export const arSummaryBar = () => fetch("/api/query/dash_board/action/get_ar_sum
* 获取账款情况
*/
export const getAccountSituation = (cur_day) => fetch("/api/query/dash_board/action/get_account_situation", {
aux: {
cur_day: cur_day
}
aux: {
cur_day: cur_day
}
}, "POST")
// 应收账款列表
export const arCompanyList = () => fetch("/api/query/dash_board/action/get_ar_company_list", {}, "POST")
......@@ -73,45 +73,45 @@ export const arCompanyMonthlyBar = (company) => fetch("/api/query/dash_board/act
export const arMonthlyCompanyBar = (month) => fetch("/api/query/dash_board/action/get_ar_monthly_company_bar", {aux: {month: month}}, "POST")
//明细页营业额汇月 -汇总
export const getAllTypeBusinessConditionDatas = (cur_day) => fetch('/api/query/*/action/get_all_type_business_condition_datas', {
aux: {
cur_day: cur_day
}
aux: {
cur_day: cur_day
}
}, 'POST');
//明细页各种运输类型营业额明细
export const getAllTypeBusinessConditionDetailByDay = (cur_day) => fetch('/api/query/*/action/get_all_type_business_condition_detail_by_day', {
aux: {
cur_day: cur_day
}
aux: {
cur_day: cur_day
}
}, 'POST');
//明细页各种运输类型营业额汇总-月维度
export const getAllTypeBusinessConditionDatasByMonth = (cur_day) => fetch('/api/query/*/action/get_all_type_business_condition_datas_by_month', {
aux: {
cur_day: cur_day
}
aux: {
cur_day: cur_day
}
}, 'POST');
//明细页各种运输类型营业额汇总-年维度
export const getAllTypeBusinessConditionDatasByYear = (cur_day) => fetch('/api/query/*/action/get_all_type_business_condition_datas_by_year', {
aux: {
cur_day: cur_day
}
aux: {
cur_day: cur_day
}
}, 'POST');
//明细页各种运输类型营业额明细-月维度
export const getAllTypeBusinessConditionDetailByMonth = (cur_day) => fetch('/api/query/*/action/get_all_type_business_condition_detail_by_month', {
aux: {
cur_day: cur_day
}
aux: {
cur_day: cur_day
}
}, 'POST');
//明细页各种运输类型营业额明细-年维度
export const getAllTypeBusinessConditionDetailByYear = (cur_day) => fetch('/api/query/*/action/get_all_type_business_condition_detail_by_year', {
aux: {
cur_day: cur_day
}
aux: {
cur_day: cur_day
}
}, 'POST');
......@@ -123,39 +123,46 @@ export const getTargetOrderDataByCondition = (aux) => fetch("/api/query/*/action
//流失客户 & 新增客户
export const getOrderLoseAddCustomer = (cur_day) => fetch('/api/query/*/action/get_order_loss_add_customer', {
aux: {
cur_day: cur_day
}
aux: {
cur_day: cur_day
}
}, 'POST');
//流失客户 & 新增客户-明细
export const getOrderAddCustomerDetail = (cur_day, type, cur_page) => fetch('/api/query/*/action/get_order_add_customer_detail', {
aux: {
cur_day: cur_day,
type: type,
cur_page: cur_page
}
export const getOrderAddCustomerDetail = (cur_day, type,cur_page) => fetch('/api/query/*/action/get_order_add_customer_detail', {
aux: {
cur_day: cur_day,
type: type,
cur_page:cur_page
}
}, 'POST');
//当日订单量，当时完成量 余量
export const getOrderBusinessConditionData = (cur_day, type) => fetch('/api/query/*/action/get_order_business_condition_data', {
aux: {
cur_day: cur_day
}
aux: {
cur_day: cur_day
}
}, 'POST');
//30天内事务部运单完成量
export const getDepartmentShipmentWeight = (department_code, cur_day) => fetch('/api/query/*/action/get_shipment_data_by_department', {
aux: {
cur_day: cur_day
, department_code: department_code
}
aux: {
cur_day: cur_day
,department_code: department_code
}
}, 'POST');
//折线图目标量
export const getDepartmentTargetWeight = (department_code, year) => fetch('/api/query/*/action/get_department_target_weight', {
aux: {
year: year
, department_code: department_code
}
aux: {
year: year
,department_code: department_code
}
}, 'POST');
//首页区域完成量
export const getShipmentDataByArea = (cur_day) => fetch('/api/query/*/action/get_shipment_data_by_area', {
aux: {
cur_day: cur_day
}
}, 'POST');
//车船情况
......
src/module/databoard/databoard/safe-quality.vue
View file @ 47db6942
......@@ -2,62 +2,129 @@
<div class="main">
<div class="full_page">
<!-- 左-->
<div class="trade_left">
<div style="height: 37%;">
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="安全">
<winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar" id="safe_list"
:rows="arSafeList"/>
</display-board>
</div>
<div style="height: 37%;">
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="质量">
<winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar"
id="quality_list" :rows="arQualityList"/>
</display-board>
</div>
<div style="height: 26%;">
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="人员情况表">
<div class="bar">
<div ref="bar"></div>
<div class="trade_left" style="width: 20%">
<div style="height: 37%;" >
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="安全">
<div style="padding-top: 2rem;">
<winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar" id="safe_list" :rows="arSafeList"/>
</div>
</display-board>
</div>
<div style="height: 37%;" >
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="质量">
<div style="padding-top: 2rem;">
<winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar" id="quality_list" :rows="arQualityList"/>
</div>
</display-board>
</div>
<div style="height: 26%;" >
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="人员情况表">
<div style="height: 100%;width: 100%;padding-top: 1rem;">
<div style="height: 100%;width: 100%" ref="people"></div>
</div>
</display-board>
</div>
</div>
<!--中-->
<display-board class="trade_middle">
<div class="trade_middle" style="border: none;box-shadow: none;">
<div style="justify-content: space-between; height: 80%;display: inline-block;">
<div style="height: 100%;display: flex;justify-content: space-evenly;">
<simple-card @click.native="changeDevireMap('truckDis')" :class="{'selectedBtn': crurrDevireMapTyep === 'truckDis'}" style="width: 20%;height: 100%">
<title-content-mark style="color: #5eeef4;" title="车辆" :content="truckCount" mark="辆"
isCenter isBold/>
</simple-card>
<simple-card @click.native="changeDevireMap('shipDis')" :class="{'selectedBtn': crurrDevireMapTyep === 'shipDis'}" style="width: 20%;height: 100%">
<title-content-mark style="color: #5eeef4;" title="船舶" :content="shipCount" mark="艘"
isCenter isBold/>
</simple-card>
</div>
<map-point-mark style="width: calc(43vw); height: calc(50vh);" :derviceDis="derviceDis"></map-point-mark>
</div>
<div style="display: flex; justify-content: space-between; height: 20%;">
</div>
<div class="trade_middle" style="border: none;box-shadow: none;width: 54%;padding-left: 0.5rem">
<display-board style="height: 76%">
</display-board>
<div style="display: flex; justify-content: space-between; height: 23%; padding-top: 2rem;" >
<showcase style="width: 16%;" title="当日订单量">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drddl.weight+ ' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="drddl.amount+' 万元'" />
</showcase>
<showcase style="width: 16%;" title="当日运单量" :mouseHand="true" @click.native="routerTo('/department-shipment')">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drydl.count + ' 车'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="drydl.weight + ' 万吨'" />
</showcase>
<showcase style="width: 16%;" title="当日完成量">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drwcl.weight+ ' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="drwcl.amount+ ' 万元'" />
</showcase>
<showcase style="width: 16%;" title="余量">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="yl.weight+ ' 万吨'" />
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="yl.amount+ ' 万元'" />
</showcase>
<showcase style="width: 16%;" title="流失客户" :mouseHand="true" @click.native="routerTo('/lost-add-customer',2)">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="lskh.weight+' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="lskh.amount+ ' 万元'" />
</showcase>
<showcase style="width: 16%;" title="新增客户" :mouseHand="true" @click.native="routerTo('/lost-add-customer',1)">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="xzkh.weight+ ' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="xzkh.amount + ' 万元'" />
</showcase>
</div>
</display-board>
</div>
<!-- 右-->
<div class="trade_right">
<div style="height: 33%;">
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="汽运">
<div style="height: 33%;" >
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="汽运">
</display-board>
</div>
<div style="height: 33%;">
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="水运">
<div style="height: 33%;" >
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="水运">
<div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem">
<simple-card style="width:100%;height: 100%">
<title-content-mark style="color: #5eeef4;display: inline-block;font-size: 14px;" :title="arCarSum[0].title+'：'+arCarSum[0].value"/>
<title-content-mark style="display: inline-block;padding-left: 6rem;font-size: 14px" :title-style="{color:'red',paddingLeft: '2rem'}" :title="arCarSum[1].title+'：'+arCarSum[1].value"/>
</simple-card>
</div>
<div style="height: 70%;width: 100%;padding-right: 2rem">
<div >
<title-content-mark style="padding-bottom: 0px" :title="barTitle+'：'+carPlan+'%'" :title-style="{fontSize:'22px'}" is-bold is-center/>
</div>
<div style="height: 100%;width: 100%" ref="ship"></div>
</div>
</display-board>
</div>
<div style="height: 34%;">
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="铁运">
<div style="height: 34%;" >
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="铁运">
<div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem">
<simple-card style="width:100%;height: 100%">
<title-content-mark style="color: #5eeef4;display: inline-block;font-size: 14px;" :title="arCarSum[0].title+'：'+arCarSum[0].value"/>
<title-content-mark style="display: inline-block;padding-left: 6rem;font-size: 14px" :title-style="{color:'red',paddingLeft: '2rem'}" :title="arCarSum[1].title+'：'+arCarSum[1].value"/>
</simple-card>
</div>
<div style="height: 70%;width: 100%;padding-right: 2rem">
<div >
<title-content-mark style="padding-bottom: 0px" :title="barTitle+'：'+carPlan+'%'" :title-style="{fontSize:'22px'}" is-bold is-center/>
</div>
<div style="height: 100%;width: 100%" ref="train"></div>
</div>
</display-board>
</div>
</div>
......@@ -67,42 +134,298 @@
<script>
import DisplayBoard from "../components/container/display-board.vue";
import WinnersList from "../components/card/winners-list.vue";
import TitleContentMark from "../components/layout/title-content-mark.vue";
import * as echarts from "echarts";
import SimpleCard from "../components/card/simple-card.vue";
import mapPointMark from "../components/map/map-point-mark.vue"
import {
getTruckShipConditionData
} from "../../api/apiList"
import TitleContentMark from "../components/layout/title-content-mark.vue";
import Showcase from "../components/container/showcase.vue";
export default {
name: "SafeQuality",
components: {
TitleContentMark,
DisplayBoard,
WinnersList,
mapPointMark,
SimpleCard
SimpleCard,
TitleContentMark,
Showcase,
WinnersList
},
data() {
return {
arSafeList: [],
arQualityList: [],
truckCount: "0",
shipCount: "0",
truckDis: [],
shipDis: [],
derviceDis: [],
crurrDevireMapTyep: ""
return {
arSafeList:[{title:"火灾事故-111111"},{title:"急救事故-222222"},{title:"交通事故-333333"},{title:"其他事故-888888"},{title:"急救事故-22222"}],
arQualityList:[{title:"发往广东高强钢内部受损"},{title:"发往广东高强钢内部受损"},{title:"发往广东高强钢内部受损"},{title:"发往广东高强钢内部受损"},{title:"发往广东高强钢内部受损"}],
arCarSum:[
{title:'当班车数',value:'1350'},
{title:'异常车数',value:'0'}
],
arShipSum:[
{title:'当班船数',value:'1350'},
{title:'异常船数',value:'0'}
],
arTrainSum:[
{title:'当班数',value:'1350'},
{title:'异常数',value:'0'}
],
barTitle:'今日计划完成',
carPlan:'89',
lskh: {
weight: "2,000",
amount: "20,000",
},
xzkh: {
weight: "2,000",
amount: "20,000",
},
drddl: {
weight: "2,000",
amount: "20,000",
},
drydl: {
count: "2,000",
weight: "20,000",
},
drwcl: {
weight: "2,000",
amount: "20,000",
},
yl: {
weight: "2,000",
amount: "20,000",
},
people_options: {
tooltip: {
trigger: 'axis'
},
textStyle: {
color: "#FFFFFF",
fontSize: "12"
},
grid: {
containLabel: true,
top: "10%",
bottom: '0'
},
yAxis: {
type: "value",
splitLine: {
lineStyle: {
color: "#1E2C58"
}
},
}
},
xAxis: {
data: ['在编', '出勤', '请假'],
axisLabel: {
color: "#FFFFFF",
fontSize: "12",
},
axisTick: {
show: false
}
},
series: [{
type: 'bar',
xAxisIndex: null,
smooth: true,
itemStyle:{
color:new echarts.graphic.LinearGradient(
0, 0, 0, 1, // 渐变方向从上到下
[
{ offset: 0, color: '#83bff6' }, // 柱图顶部颜色
{ offset: 0.5, color: '#188df0' }, // 柱图中间颜色
{ offset: 1, color: '#188df0' } // 柱图底部颜色
]
),
barBorderRadius:[3,3,0,0] ,
},
barWidth: '30%',
barGap: '20%',
emphasis: {
focus: 'series'
},
data: [19,11,33]
}]
},
car_options: {
tooltip: {
trigger: 'axis'
},
textStyle: {
color: "#FFFFFF",
fontSize: "12"
},
grid: {
containLabel: true,
top: "10%",
bottom: '0'
},
yAxis: {
show:false
},
xAxis: {
data: ['计划量', '完成量', '余量'],
axisLabel: {
color: "#FFFFFF",
fontSize: "12",
},
axisTick: {
show: false
},
axisLine:{
show:false
}
},
series: [{
type: 'bar',
xAxisIndex: null,
smooth: true,
itemStyle:{
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, // 渐变方向从上到下
[
{ offset: 0, color: '#83bff6' }, // 柱图顶部颜色
{ offset: 0.5, color: '#188df0' }, // 柱图中间颜色
{ offset: 1, color: '#188df0' } // 柱图底部颜色
]
),
barBorderRadius:[3,3,3,3] ,
},
label:{
show:true,
position:'top',
formatter: '{c}吨',
color:'#FFFFFF',
},
barWidth: '30%',
barGap: '10%',
emphasis: {
focus: 'series'
},
data: [19,11,33]
}]
},
ship_options: {
tooltip: {
trigger: 'axis'
},
textStyle: {
color: "#FFFFFF",
fontSize: "12"
},
grid: {
containLabel: true,
top: "10%",
bottom: '0'
},
yAxis: {
show:false
},
xAxis: {
data: ['计划量', '完成量', '余量'],
axisLabel: {
color: "#FFFFFF",
fontSize: "12",
},
axisTick: {
show: false
},
axisLine:{
show:false
}
},
series: [{
type: 'bar',
xAxisIndex: null,
smooth: true,
itemStyle:{
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, // 渐变方向从上到下
[
{ offset: 0, color: '#83bff6' }, // 柱图顶部颜色
{ offset: 0.5, color: '#188df0' }, // 柱图中间颜色
{ offset: 1, color: '#188df0' } // 柱图底部颜色
]
),
barBorderRadius:[3,3,3,3] ,
},
label:{
show:true,
position:'top',
formatter: '{c}吨',
color:'#FFFFFF',
},
barWidth: '30%',
barGap: '10%',
emphasis: {
focus: 'series'
},
data: [19,11,33]
}]
},
train_options: {
tooltip: {
trigger: 'axis'
},
textStyle: {
color: "#FFFFFF",
fontSize: "12"
},
grid: {
containLabel: true,
top: "10%",
bottom: '0'
},
yAxis: {
show:false
},
xAxis: {
data: ['计划量', '完成量', '余量'],
axisLabel: {
color: "#FFFFFF",
fontSize: "12",
},
axisTick: {
show: false
},
axisLine:{
show:false
}
},
series: [{
type: 'bar',
xAxisIndex: null,
smooth: true,
itemStyle:{
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, // 渐变方向从上到下
[
{ offset: 0, color: '#83bff6' }, // 柱图顶部颜色
{ offset: 0.5, color: '#188df0' }, // 柱图中间颜色
{ offset: 1, color: '#188df0' } // 柱图底部颜色
]
),
barBorderRadius:[3,3,3,3] ,
},
label:{
show:true,
position:'top',
formatter: '{c}吨',
color:'#FFFFFF',
},
barWidth: '30%',
barGap: '10%',
emphasis: {
focus: 'series'
},
data: [19,11,33]
}]
},
}
},
methods: {
refreshData() {
this.getPeopleInfos();
this.getTruckShipCondition();
this.getPeopleInfos();
},
getPeopleInfos() {
getPeopleInfos(){
// var seriesBar = [];
// seriesBar.push(adapterSeriesDataBar(null, "在编", [10,20]));
......@@ -114,58 +437,38 @@ export default {
// let chart=echarts.init(barDom);
// chart.setOption(this.peopleInfoOption);
},
getTruckShipCondition() {
getTruckShipConditionData().then(res => {
let data = res.data
let truckCount = 0;
let shipCount = 0;
for (let device of data.device_type_sum) {
if (device.device_type == '3' || device.device_type == '1') {
truckCount = truckCount + parseInt(device.count)
}
if (device.device_type == '4') {
shipCount = shipCount + parseInt(device.count)
}
}
this.truckCount = truckCount + "";
this.shipCount = shipCount + "";
this.shipDis = data.ship_by_province_sum;
this.truckDis = data.truck_by_province_sum;
if(this.crurrDevireMapTyep == "") {
this.changeDevireMap('truckDis');
}
})
},
changeDevireMap(dimension) {
this.crurrDevireMapTyep = dimension;
switch (dimension) {
case 'truckDis':
this.derviceDis = this.truckDis;
break;
case 'shipDis':
this.derviceDis = this.shipDis;
break;
default:
return;
}
},
}
},
mounted() {
this.refreshData();
setTimeout(() => {
let peopleDom = this.$refs.people;
this.people = echarts.init(peopleDom);
let carDom = this.$refs.car;
this.car = echarts.init(carDom);
let shipDom = this.$refs.ship;
this.ship = echarts.init(shipDom);
let trainDom = this.$refs.train;
this.train = echarts.init(trainDom);
this.refreshData();
window.addEventListener('resize', this.resizeChart);
},500);
},
beforeDestroy() {
},
watch: {
countDown(n, o) {
if (n === 1) {
watch:{
countDown(n,o){
if (n === 1){
this.refreshData();
}
},
},
props: {
countDown: {
props:{
countDown:{
type: Number
}
}
......@@ -173,19 +476,4 @@ export default {
</script>
<style scoped>
#ar_company_list:hover {
background-color: #19EBFF10;
transform: scale(101%);
}
.selectedBtn {
color: #1234a1 !important;
background-color: #005dd6 !important;
}
.unSelectedBtn {
color: #00c8d6;
background-color: #1234a1;
}
</style>
src/module/databoard/index.vue
View file @ 47db6942
<template>
<div class="container">
<div class="left-bar">
<div class="main">
<div class="middle">
<display-board class="trade_left" title="营业情况">
<div
style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;">
<contrast-card :mouseHand="true" v-for="data in yyqk" style="height: 28%;"
@click.native="routerTo('/turnover-detail',paths[data.title])">
<title-content-mark style="width: 40%;color: #369afa;float: left;" :title="data.title"
:content="data.amount" :mark="data.unit"/>
<div
style="width: 60%; height: 100%; float:left; padding: 4% 4% 0 12%; line-height: 26px;; display: flex; align-items: center;">
<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-function="cellStyleFunction"/>
<!-- <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>
</display-board>
<display-board class="trade_middle" title="应收款情况" corner_size="large">
<div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem">
<simple-card v-for="data in arSummary" style="width: 30%;height: 100%">
<title-content-mark style="color: #5eeef4;" :title="data.title" :content="data.value" :mark="'万元'"
isCenter isBold/>
</simple-card>
</div>
<ar-summary-bar ref="arSummaryBar" style="width: 100%; height: 64%;"></ar-summary-bar>
</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 v-for="data in zkqk" style="height: 28%;">
<title-content-mark style="width: 40%;color: #369afa;float: left;" v-if="data.title == '应收账款'" @click.native="goAccRevSearch" :title="data.title"
:content="data.amount" :mark="data.unit"/>
<title-content-mark v-else style="width: 40%;color: #369afa;float: left;" :title="data.title"
:content="data.amount" :mark="data.unit"/>
<div
style="width: 60%; height: 100%; float:left; padding: 4% 4% 0 12%; line-height: 26px;; display: flex; align-items: center;">
<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-function="cellStyleFunction"/>
</div>
</contrast-card>
</div>
</display-board>
</div>
<div class="middle">
<display-board class="trade_left" title="已开票未收款">
<winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar" id="ar_company_list" :rows="arCompanyList"/>
</display-board>
</div>
<div class="right-container">
<div class="right-top">
<display-board class="trade_middle" title="应收款情况" corner_size="large">
<div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem">
<simple-card v-for="data in arSummary" style="width: 30%;height: 100%">
<title-content-mark style="color: #5eeef4;" :title="data.title" :content="data.value" :mark="'万元'"
isCenter isBold/>
</simple-card>
</div>
<ar-summary-bar ref="arSummaryBar" style="width: 100%; height: 64%;"></ar-summary-bar>
</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 v-for="data in zkqk" style="height: 28%;">
<title-content-mark style="width: 40%;color: #369afa;float: left;" v-if="data.title == '应收账款'" @click.native="goAccRevSearch" :title="data.title"
:content="data.amount" :mark="data.unit"/>
<title-content-mark v-else style="width: 40%;color: #369afa;float: left;" :title="data.title"
:content="data.amount" :mark="data.unit"/>
<div
style="width: 60%; height: 100%; float:left; padding: 4% 4% 0 12%; line-height: 26px;; display: flex; align-items: center;">
<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-function="cellStyleFunction"/>
</div>
</contrast-card>
</div>
</display-board>
</div>
<div class="right-bottom">
<div class="trade_middle" style="border: none;box-shadow: none;">
<div style="display: flex; justify-content: space-between; height: 50%;">
<display-board style="width: 32%;" title="每日目标情况" :mouseHand="true" @click.native="routerTo('/target-achievement','day')">
<div
style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;">
<table-column style="float: left;width: 35%;" :data="targetAchievement.day" name="title" show-head/>
<table-column
style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;"
:data="targetAchievement.day" name="actualValue" title="实时值" show-head/>
<table-column style="float: left;width: 20%;" :data="targetAchievement.day" name="targetValue" title="目标值"
show-head/>
</div>
</display-board>
<display-board style="width: 32%;" title="月度目标情况" :mouseHand="true" @click.native="routerTo('/target-achievement','month')">
<div
style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;">
<table-column style="float: left;width: 35%;" :data="targetAchievement.month" name="title" show-head/>
<table-column
style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;"
:data="targetAchievement.month" name="actualValue" title="实时值" show-head/>
<table-column style="float: left;width: 20%;" :data="targetAchievement.month" name="targetValue" title="目标值"
show-head/>
</div>
</display-board>
<display-board style="width: 32%;" title="年度目标情况" :mouseHand="true" @click.native="routerTo('/target-achievement','year')">
<div
style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;">
<table-column style="float: left;width: 35%;" :data="targetAchievement.year" name="title" show-head/>
<table-column
style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;"
:data="targetAchievement.year" name="actualValue" title="实时值" show-head/>
<table-column style="float: left;width: 20%;" :data="targetAchievement.year" name="targetValue" title="目标值"
show-head/>
</div>
</display-board>
</div>
<div style="display: flex; justify-content: space-between; height: 50%; padding-top: 2rem;" >
<showcase style="width: 16%;" title="当日订单量">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drddl.weight+ ' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="drddl.amount+' 万元'" />
</showcase>
<showcase style="width: 16%;" title="当日运单量" :mouseHand="true" @click.native="routerTo('/department-shipment')">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drydl.count + ' 车'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="drydl.weight + ' 万吨'" />
</showcase>
<showcase style="width: 16%;" title="当日完成量">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drwcl.weight+ ' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="drwcl.amount+ ' 万元'" />
</showcase>
<showcase style="width: 16%;" title="余量">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="yl.weight+ ' 万吨'" />
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="yl.amount+ ' 万元'" />
</showcase>
<showcase style="width: 16%;" title="潜在客户" :mouseHand="true" @click.native="routerTo('/lost-add-customer',2)">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="lskh.weight+' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="lskh.amount+ ' 万元'" />
</showcase>
<showcase style="width: 16%;" title="新增客户" :mouseHand="true" @click.native="routerTo('/lost-add-customer',1)">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="xzkh.weight+ ' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="xzkh.amount + ' 万元'" />
</showcase>
</div>
<div class="trade_middle" style="border: none;box-shadow: none;">
<div style="display: flex; justify-content: space-between; height: 50%;">
<display-board style="width: 32%;" title="每日目标情况" :mouseHand="true" @click.native="routerTo('/target-achievement','day')">
<div
style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;">
<table-column style="float: left;width: 35%;" :data="targetAchievement.day" name="title" show-head/>
<table-column
style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;"
:data="targetAchievement.day" name="actualValue" title="实时值" show-head/>
<table-column style="float: left;width: 20%;" :data="targetAchievement.day" name="targetValue" title="目标值"
show-head/>
</div>
</display-board>
<display-board style="width: 32%;" title="月度目标情况" :mouseHand="true" @click.native="routerTo('/target-achievement','month')">
<div
style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;">
<table-column style="float: left;width: 35%;" :data="targetAchievement.month" name="title" show-head/>
<table-column
style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;"
:data="targetAchievement.month" name="actualValue" title="实时值" show-head/>
<table-column style="float: left;width: 20%;" :data="targetAchievement.month" name="targetValue" title="目标值"
show-head/>
</div>
</display-board>
<display-board style="width: 32%;" title="年度目标情况" :mouseHand="true" @click.native="routerTo('/target-achievement','year')">
<div
style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;">
<table-column style="float: left;width: 35%;" :data="targetAchievement.year" name="title" show-head/>
<table-column
style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;"
:data="targetAchievement.year" name="actualValue" title="实时值" show-head/>
<table-column style="float: left;width: 20%;" :data="targetAchievement.year" name="targetValue" title="目标值"
show-head/>
</div>
</display-board>
</div>
<div style="display: flex; justify-content: space-between; height: 50%; padding-top: 2rem;" >
<showcase style="width: 16%;" title="当日订单量">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drddl.weight+ ' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="drddl.amount+' 万元'" />
</showcase>
<showcase style="width: 16%;" title="当日运单量" :mouseHand="true" @click.native="routerTo('/department-shipment')">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drydl.count + ' 车'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="drydl.weight + ' 万吨'" />
</showcase>
<showcase style="width: 16%;" title="当日完成量">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drwcl.weight+ ' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="drwcl.amount+ ' 万元'" />
</showcase>
<showcase style="width: 16%;" title="余量">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="yl.weight+ ' 万吨'" />
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="yl.amount+ ' 万元'" />
</showcase>
<showcase style="width: 16%;" title="流失客户" :mouseHand="true" @click.native="routerTo('/lost-add-customer',2)">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="lskh.weight+' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="lskh.amount+ ' 万元'" />
</showcase>
<showcase style="width: 16%;" title="新增客户" :mouseHand="true" @click.native="routerTo('/lost-add-customer',1)">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="xzkh.weight+ ' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="xzkh.amount + ' 万元'" />
</showcase>
</div>
<display-board class="trade_right" title="当日订单量占比">
<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%;z-index: 999" name="运输类型占比"
:data="transportTypeOrderFinishPie" @click.native="routerTo('/order-proportion')"
:value-formatter="pieDataValueFormatter" :formatter="pieDataFormatter"/>
<ring-pie-chart ref="customerChart" style="width: 100%;height: 50%;" name="公司占比"
:data="customerOrderFinishPie" @click.native="routerTo('/order-proportion')"
:value-formatter="pieDataValueFormatter" :formatter="pieDataFormatter"/>
</div>
</display-board>
</div>
<display-board class="trade_right" title="当日订单量占比">
<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%;z-index: 999" name="运输类型占比"
:data="transportTypeOrderFinishPie" @click.native="routerTo('/order-proportion')"
:value-formatter="pieDataValueFormatter" :formatter="pieDataFormatter"/>
<ring-pie-chart ref="customerChart" style="width: 100%;height: 50%;" name="公司占比"
:data="customerOrderFinishPie" @click.native="routerTo('/order-proportion')"
:value-formatter="pieDataValueFormatter" :formatter="pieDataFormatter"/>
</div>
</display-board>
</div>
</div>
</template>
......@@ -731,62 +744,10 @@ export default {
}
};
</script>
<style lang="postcss">
<style scoped>
#ar_company_list:hover {
background-color: #19EBFF10;
transform: scale(101%);
}
.container {
display: flex; /* 使用 Flexbox 布局 */
height: 100vh; /* 视口高度 */
width: 100%;
max-width: 100%;
}
.left-bar {
width: 25%; /* 左侧栏宽度 */
/*background-color: #f0f0f0; !* 背景色 *!*/
/*padding: 10px; !* 内边距 *!*/
justify-content: space-around;
display: flex;
padding: 1rem;
}
.right-container {
flex: 1; /* 剩余空间，右侧的部分 */
display: flex;
flex-direction: column; /* 垂直排列 */
width: 75%; /* 右侧栏宽度 */
}
.right-top {
height: 50%; /* 右上栏高度，设为 50% */
justify-content: space-around;
display: flex;
padding: 1rem;
}
.right-bottom {
height: 50%; /* 右下栏高度，设为 50% */
justify-content: space-around;
display: flex;
padding: 1rem;
}
.trade_left {
width: 100%;
}
.trade_middle {
width: 61%;
}
.trade_right {
width: 33%;
}
</style>
src/module/databoard/index_sale.vue 0 → 100644
View file @ 47db6942
<template>
<div class="container">
<div class="left-bar">
<display-board class="trade_left" style="width: 100%" title="已开票未收款">
<winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar" id="ar_company_list" :rows="arCompanyList"/>
</display-board>
</div>
<div class="right-container">
<div class="right-top">
<display-board class="trade_middle" style="width: 61%" title="应收款情况" corner_size="large">
<div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem">
<simple-card v-for="data in arSummary" style="width: 30%;height: 100%">
<title-content-mark style="color: #5eeef4;" :title="data.title" :content="data.value" :mark="'万元'"
isCenter isBold/>
</simple-card>
</div>
<ar-summary-bar ref="arSummaryBar" style="width: 100%; height: 64%;"></ar-summary-bar>
</display-board>
<display-board class="trade_right" style="width: 33%" title="潜在客户">
<winners-list style="height: 96%;overflow: auto;" :mouseHand="true" id="lose_user_list" :rows="lossUserList"/>
</display-board>
</div>
<div class="right-bottom" >
<display-board class="left" style="width: 61%" corner_size="large">
<div style="display: flex; justify-content: space-between; width: 100%; height: 50%; padding-top: 2rem;">
<div ref="areaBar" style="width: 100%; height: 100%;"/>
</div>
<div style="display: flex; justify-content: space-between; height: 50%; padding-top: 2rem;" >
<showcase style="width: 16%;" title="当日订单量">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drddl.weight+ ' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="drddl.amount+' 万元'" />
</showcase>
<showcase style="width: 16%;" title="当日运单量" :mouseHand="true" @click.native="routerTo('/department-shipment')">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drydl.count + ' 车'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="drydl.weight + ' 万吨'" />
</showcase>
<showcase style="width: 16%;" title="当日完成量">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drwcl.weight+ ' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="drwcl.amount+ ' 万元'" />
</showcase>
<showcase style="width: 16%;" title="余量">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="yl.weight+ ' 万吨'" />
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="yl.amount+ ' 万元'" />
</showcase>
<showcase style="width: 16%;" title="潜在客户" :mouseHand="true" @click.native="routerTo('/lost-add-customer',2)">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="lskh.weight+' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="lskh.amount+ ' 万元'" />
</showcase>
<showcase style="width: 16%;" title="新增客户" :mouseHand="true" @click.native="routerTo('/lost-add-customer',1)">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="xzkh.weight+ ' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="xzkh.amount + ' 万元'" />
</showcase>
</div>
</display-board >
<display-board class="right" style="width: 33%" title="当日订单量占比">
<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%;z-index: 999" name="运输类型占比"
:data="transportTypeOrderFinishPie" @click.native="routerTo('/order-proportion')"
:value-formatter="pieDataValueFormatter" :formatter="pieDataFormatter"/>
<ring-pie-chart ref="customerChart" style="width: 100%;height: 50%;" name="公司占比"
:data="customerOrderFinishPie" @click.native="routerTo('/order-proportion')"
:value-formatter="pieDataValueFormatter" :formatter="pieDataFormatter"/>
</div>
</display-board>
</div>
</div>
</div>
</template>
<script>
import DisplayBoard from "./components/container/display-board.vue";
import Showcase from "./components/container/showcase.vue";
import ContrastCard from "./components/card/contrast-card.vue";
import SimpleCard from "./components/card/simple-card.vue";
import ArSummaryBar from "./components/chart/ar-summary-bar.vue";
import WinnersList from "./components/card/winners-list.vue";
import TitleContentMark from "./components/layout/title-content-mark.vue";
import TableColumn from "./components/table/table-column.vue";
import RingPieChart from "./components/chart/ring-pie-chart.vue";
import {
arSummaryBar,
getAccountSituation,
arCompanyList,
lostUserList,
getBusinessConditionDatas,
getOrderLoseAddCustomer,
getOrderBusinessConditionData, getShipmentDataByArea
} from "../api/apiList"
import {calc_hb_str, calc_tb_str, conver_amont, conver_num_retain} from "../utils/numUtil";
import {getTransportTypeOrderFinishPie, getCustomerOrderFinishPie} from "./databoard/js/indexPieData";
import moment from 'moment'
import {getTargetOrderDataByConditionCount} from "./databoard/js/targetAchievementData";
import * as echarts from "echarts";
export default {
components: {
RingPieChart,
TableColumn,
TitleContentMark,
Showcase,
DisplayBoard,
ContrastCard,
SimpleCard,
ArSummaryBar,
WinnersList
},
data() {
return {
today: moment().format("yyyy-MM-DD"),
yyqk: {
yye: {
title: "营业额",
amount: "20,303",
unit: "万元",
hb: [
{
title: "昨天",
amount: "21,000",
rate: "-3.32%",
},
{
title: "上月",
amount: "20,000",
rate: "+4.92%",
},
],
},
cb: {
title: "成本",
amount: "10,303",
unit: "万元",
hb: [
{
title: "昨日",
amount: "11,000",
rate: "-2.68%",
},
{
title: "上月",
amount: "10,000",
rate: "+5.71%",
},
],
},
ml: {
title: "毛利",
amount: "10,000",
unit: "万元",
hb: [
{
title: "昨日",
amount: "10,000",
rate: "0.00%",
},
{
title: "上月",
amount: "10,000",
rate: "0.00%",
},
],
},
},
arSummary: [
{title: '累计营业收入（当年）', value: '20,303'},
{title: '应收款（财务）', value: '20,303'},
{title: '应收款（营销）', value: '20,303',},
],
lskh: {
weight: "2,000",
amount: "20,000",
},
xzkh: {
weight: "2,000",
amount: "20,000",
},
drddl: {
weight: "2,000",
amount: "20,000",
},
drydl: {
count: "2,000",
weight: "20,000",
},
drwcl: {
weight: "2,000",
amount: "20,000",
},
zkqk: {
yszk: {
title: "应收账款",
amount: "20,303",
unit: "万元",
hb: [
{
title: "昨天",
amount: "21,000",
rate: "-3.32%",
},
{
title: "上月",
amount: "20，000",
rate: "+4.92%",
},
],
},
yfzk: {
title: "应付账款",
amount: "10,303",
unit: "万元",
hb: [
{
title: "昨日",
amount: "11,000",
rate: "-2.68%",
},
{
title: "上月",
amount: "10,000",
rate: "+5.71%",
},
],
},
zsye: {
title: "账上余额",
amount: "10,000",
unit: "万元",
hb: [
{
title: "昨日",
amount: "10,000",
rate: "0.00%",
},
{
title: "上月",
amount: "10,000",
rate: "0.00%",
},
],
},
},
yl: {
weight: "2,000",
amount: "20,000",
},
mockData: {
zqk: {
yszk: {
title: "应收账款",
amount: "20,303",
unit: "万元",
hb: [
{
title: "昨天",
amount: "21,000",
rate: "-3.32%",
},
{
title: "上月",
amount: "20，000",
rate: "+4.92%",
},
],
},
yfzk: {
title: "应付账款",
amount: "10,303",
unit: "万元",
hb: [
{
title: "昨日",
amount: "11,000",
rate: "-2.68%",
},
{
title: "上月",
amount: "10,000",
rate: "+5.71%",
},
],
},
zsye: {
title: "账上余额",
amount: "10,000",
unit: "万元",
hb: [
{
title: "昨日",
amount: "10,000",
rate: "0.00%",
},
{
title: "上月",
amount: "10,000",
rate: "0.00%",
},
],
},
},
sr: [
{
title: '累计营业收入（当年）',
value: '20,303',
},
{
title: '应收款（财务）',
value: '20,303',
},
{
title: '应收款（营销）',
value: '20,303',
},
],
mrmbqk: [
{
title: "吨位(万吨)",
actualValue: "20,303",
currentValue: "21,000",
},
{
title: "营业额(万元)",
actualValue: "32,342",
currentValue: "21,000",
},
{
title: "净利润(万元)",
actualValue: "32,342",
currentValue: "21,000",
},
],
ydmbqk: [
{
title: "吨位(万吨)",
actualValue: "20,303",
currentValue: "21,000",
},
{
title: "营业额(万元)",
actualValue: "32,342",
currentValue: "21,000",
},
{
title: "净利润(万元)",
actualValue: "32,342",
currentValue: "21,000",
},
],
drddl: {
weight: "2,000",
amount: "20,000",
},
drwcl: {
weight: "2,000",
amount: "20,000",
},
yl: {
weight: "2,000",
amount: "20,000",
},
lskh: {
weight: "2,000",
amount: "20,000",
},
xzkh: {
weight: "2,000",
amount: "20,000",
},
ndmbqk: [
{
title: "吨位(万吨)",
actualValue: "20,303",
currentValue: "21,000",
},
{
title: "营业额(万元)",
actualValue: "32,342",
currentValue: "21,000",
},
{
title: "净利润(万元)",
actualValue: "32,342",
currentValue: "21,000",
},
],
zkqk: {
yszk: {
title: "应收账款",
amount: "20,303",
unit: "万元",
hb: [
{
title: "昨天",
amount: "21,000",
rate: "-3.32%",
},
{
title: "上月",
amount: "20，000",
rate: "+4.92%",
},
],
},
yfzk: {
title: "应付账款",
amount: "10,303",
unit: "万元",
hb: [
{
title: "昨日",
amount: "11,000",
rate: "-2.68%",
},
{
title: "上月",
amount: "10,000",
rate: "+5.71%",
},
],
},
zsye: {
title: "账上余额",
amount: "10,000",
unit: "万元",
hb: [
{
title: "昨日",
amount: "10,000",
rate: "0.00%",
},
{
title: "上月",
amount: "10,000",
rate: "0.00%",
},
],
},
},
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",
},
}
]
},
drddlzb: {
transportType: [
{value: 2500, name: '汽运'},
{value: 100, name: '码头/仓库'},
{value: 500, name: '铁运'},
{value: 484, name: '水运'},
],
customer: [
{value: 500, name: '上海欧冶物流股份有限公司'},
{value: 2500, name: '宝钢运输部'},
{value: 1100, name: '宝山钢铁股份有限公司'},
]
},
},
paths: {
"营业额": "yye",
"成本": "cb",
"毛利": "ml",
},
areaBarData: {
tooltip: {
trigger: 'axis'
},
textStyle: {
color: "#FFFFFF",
fontSize: "12"
},
grid: {
containLabel: true,
top: "10%",
bottom: '0'
},
yAxis: {
type: "value",
splitLine: {
lineStyle: {
color: "#1E2C58"
}
},
},
xAxis: {
data: ['华南', '华北', '华东', '华西', '华中', '东北'],
axisLabel: {
color: "#FFFFFF",
fontSize: "12",
},
axisTick: {
show: false
}
},
series: []
},
dataset: {},
transportTypeOrderFinishPie: [],
customerOrderFinishPie: [],
arCompanyList: [],
lossUserList: [],
charts: {},
targetAchievement:{
day: null,
month: null,
year: null,
}
}
},
methods: {
cellStyleFunction(data) {
let res = {color: '#33ff66'};
if (data.indexOf('-') !== -1) {
res.color = '#ff3300'
}
return res;
},
resizeChart() {
for (let chartsKey in this.charts) {
this.charts[chartsKey].resize();
}
},
routerTo(path, code) {
this.$router.push({path: path, query: {code: code}});
},
//营业情况
showBusinessConditionDatas() {
let res = getBusinessConditionDatas(this.today)
res.then(data => {
data = data.data;
//营业额
this.yyqk.yye.amount = conver_amont(data.cur_sell_settle_amount);
this.yyqk.yye.hb[0].amount = conver_amont(data.pre_sell_settle_amount);
this.yyqk.yye.hb[0].rate = calc_hb_str(data.cur_sell_settle_amount, data.pre_sell_settle_amount);
this.yyqk.yye.hb[1].amount = conver_amont(data.pre_month_sell_settle_amount);
this.yyqk.yye.hb[1].rate = calc_tb_str(data.cur_sell_settle_amount, data.pre_month_sell_settle_amount);
//成本
this.yyqk.cb.amount = conver_amont(data.cur_buy_settle_amount);
this.yyqk.cb.hb[0].amount = conver_amont(data.pre_buy_settle_amount);
this.yyqk.cb.hb[0].rate = calc_hb_str(data.cur_buy_settle_amount, data.pre_buy_settle_amount);
this.yyqk.cb.hb[1].amount = conver_amont(data.pre_month_buy_settle_amount);
this.yyqk.cb.hb[1].rate = calc_tb_str(data.cur_buy_settle_amount, data.pre_month_buy_settle_amount);
//毛利
this.yyqk.ml.amount = conver_amont(data.cur_gross_profit_amount);
this.yyqk.ml.hb[0].amount = conver_amont(data.pre_gross_profit_amount);
this.yyqk.ml.hb[0].rate = calc_hb_str(data.cur_gross_profit_amount, data.pre_gross_profit_amount);
this.yyqk.ml.hb[1].amount = conver_amont(data.pre_month_gross_profit_amount);
this.yyqk.ml.hb[1].rate = calc_tb_str(data.cur_gross_profit_amount, data.pre_month_gross_profit_amount);
})
},
// 跳转已开票未收款页面
goArBar() {
this.$router.push('/ar_bar')
},
// 跳转到应收账款汇总表
goAccRevSearch() {
parent.window.location = '/#/l/accounts_receivable_statistics_search'
},
// 获取应收账款数据
getArSummaryBar() {
arSummaryBar().then(res => {
let data = res.data
let seriesData = []
seriesData.push(data.unsettled_amount)
seriesData.push(data.settled_amount)
seriesData.push(data.unregister_amount)
seriesData.push(data.receivable_amount)
seriesData.push(data.cancelled_amount)
this.arSummary[0].value = conver_num_retain(data.total_amount)
this.arSummary[1].value = conver_num_retain(data.unregister_amount)
this.arSummary[2].value = conver_num_retain(data.receivable_amount)
this.zkqk.yszk.amount = conver_num_retain(data.receivable_amount)
this.$refs.arSummaryBar.drawArSummaryBar(seriesData)
}).catch(err => {
console.log(err);
});
},
//获取账款情况
getAccountSituation(){
getAccountSituation(this.today).then(res => {
let data = res.data
this.zkqk.yszk.hb[0].amount = conver_amont(data.per_day_receivable_amount);
this.zkqk.yszk.hb[0].rate = calc_hb_str(this.zkqk.yszk.amount, data.per_day_receivable_amount);
this.zkqk.yszk.hb[1].amount = conver_amont(data.per_month_receivable_amount);
this.zkqk.yszk.hb[1].rate = calc_tb_str(this.zkqk.yszk.amount, data.per_month_receivable_amount);
this.zkqk.yfzk.amount = conver_amont(data.payable_amount)
this.zkqk.yfzk.hb[0].amount = conver_amont(data.per_day_payable_amount);
this.zkqk.yfzk.hb[0].rate = calc_hb_str(data.payable_amount, data.per_day_receivable_amount);
this.zkqk.yfzk.hb[1].amount = conver_amont(data.per_month_payable_amount);
this.zkqk.yfzk.hb[1].rate = calc_tb_str(data.payable_amount, data.per_month_payable_amount);
this.zkqk.zsye.amount = conver_amont(data.acc_bla)
this.zkqk.zsye.hb[0].amount = conver_amont(data.per_day_acc_bla);
this.zkqk.zsye.hb[0].rate = calc_hb_str(data.acc_bla, data.per_day_acc_bla);
this.zkqk.zsye.hb[1].amount = conver_amont(data.per_month_acc_bla);
this.zkqk.zsye.hb[1].rate = calc_tb_str(data.acc_bla, data.per_month_acc_bla);
}).catch(err => {
console.log(err);
});
},
// 获取已开票未收款排行
getArCompanyList() {
arCompanyList().then(res => {
if (res.data.length) {
this.arCompanyList = res.data
}
}).catch(err => {
console.log(err);
});
},
// 获取已开票未收款排行
getLostUserList() {
lostUserList(this.today).then(res => {
if (res.data.length) {
this.lossUserList = res.data
}
}).catch(err => {
console.log(err);
});
},
refreshData() {
getTransportTypeOrderFinishPie(res => this.transportTypeOrderFinishPie = res, this.today);
getCustomerOrderFinishPie(res => this.customerOrderFinishPie = res, this.today);
this.showBusinessConditionDatas();
this.getArSummaryBar();
this.getAccountSituation();
this.getArCompanyList();
this.getLostUserList();
this.getLoseAndAdd();
this.getOrderBusinessCondition();
this.getTargetOrderDataByConditionCount();
this.getShipmentAreaBar();
},
getShipmentAreaBar() {
let chartDom = this.$refs.areaBar;
this.areaBar = echarts.init(chartDom);
getShipmentDataByArea(this.today).then(res => {
var data = ['10','20','30','40','50','60'];
var data2 = [];
data.forEach(function (row) {
var num = 0;
res.data.forEach(function (data) {
if(data.area_name === row){
num = data.finished_weight_sum;
}
});
data2.push(num);
});
this.areaBarData.series =
[{
name: '完成量',
type: 'bar',
xAxisIndex: null,
smooth: true,
emphasis: {
focus: 'series'
},
data: data2
}];
this.areaBar.setOption(this.areaBarData);
});
},
pieDataValueFormatter(param) {
return conver_amont(param) + "万吨";
},
pieDataFormatter(param) {
return param.name + '\r\n' + this.pieDataValueFormatter(param.value);
},
getLoseAndAdd() {
getOrderLoseAddCustomer(this.today).then(res => {
let data = res.data
this.lskh.amount = conver_amont(data.lost_sell_settle_amount_sum);
this.lskh.weight = conver_amont(data.lost_weight_sum);
this.xzkh.amount = conver_amont(data.add_sell_settle_amount_sum);
this.xzkh.weight = conver_amont(data.add_weight_sum);
})
},
getOrderBusinessCondition() {
getOrderBusinessConditionData(this.today).then(res => {
let data = res.data
this.drddl.amount = conver_amont(data.cur_sell_settle_amount);
this.drddl.weight = conver_amont(data.cur_unit_weight);
this.drydl.count = data.drydl_count;
this.drydl.weight = conver_amont(data.drydl_weight);
this.drwcl.amount = conver_amont(data.cur_finish_sell_settle_amount);
this.drwcl.weight = conver_amont(data.cur_finish_unit_weight);
this.yl.amount = conver_amont(data.cur_unfinish_sell_settle_amount);
this.yl.weight = conver_amont(data.cur_unfinish_unit_weight);
})
},
getTargetOrderDataByConditionCount() {
getTargetOrderDataByConditionCount({cur_day: this.today,time_type:"day",group_type:"01"},(res) => {this.targetAchievement.day = res;})
getTargetOrderDataByConditionCount({cur_day: this.today,time_type:"month",group_type:"01"},(res) => {this.targetAchievement.month = res;})
getTargetOrderDataByConditionCount({cur_day: this.today,time_type:"year",group_type:"01"},(res) => {this.targetAchievement.year = res;})
}
},
mounted() {
setTimeout(() => {
this.refreshData();
window.addEventListener('resize', this.resizeChart);
}, 500);
},
beforeDestroy() {
window.removeEventListener("resize", this.resizeChart);
},
watch:{
countDown(n,o){
if (n === 1){
this.refreshData();
}
},
},
props:{
countDown:{
type: Number
}
}
};
</script>
<style lang="postcss">
#ar_company_list:hover {
background-color: #19EBFF10;
transform: scale(101%);
}
.container {
display: flex; /* 使用 Flexbox 布局 */
height: 100vh; /* 视口高度 */
width: 100%;
max-width: 100%;
}
.left-bar {
width: 25%; /* 左侧栏宽度 */
/*background-color: #f0f0f0; !* 背景色 *!*/
/*padding: 10px; !* 内边距 *!*/
justify-content: space-around;
display: flex;
padding: 1rem;
}
.right-container {
flex: 1; /* 剩余空间，右侧的部分 */
display: flex;
flex-direction: column; /* 垂直排列 */
width: 75%; /* 右侧栏宽度 */
}
.right-top {
height: 50%; /* 右上栏高度，设为 50% */
justify-content: space-around;
display: flex;
padding: 1rem;
}
.right-bottom {
height: 50%; /* 右下栏高度，设为 50% */
justify-content: space-around;
display: flex;
padding: 1rem;
}
/*.trade_left {*/
/* width: 100%;*/
/*}*/
/*.trade_middle {*/
/* width: 61%;*/
/*}*/
/*.trade_right {*/
/* width: 33%;*/
/*}*/
</style>
src/module/index/index.vue
View file @ 47db6942
......@@ -2,7 +2,7 @@
<div class="page">
<div class="head">
<div class="text_left">
<input class="btn" type="button" value="返回上级" v-if="$route.fullPath !== '/index'" @click="goIndex">
<input class="btn" type="button" value="返回上级" v-if="$route.fullPath !== '/index' && $route.fullPath !== '/index_sale' " @click="goIndex">
<span>{{ currentDate }}</span>
<span>{{ currentTime }}</span>
<span>{{ currentWeek }}</span>
......@@ -36,7 +36,7 @@ export default {
},
methods: {
goIndex() {
this.$router.push({path: '/'})
this.$router.go(-1)
},
reload() {
this.isRouterAlive = false
......
src/module/index/router/index_router.js
View file @ 47db6942
import Vue from 'vue'
import Router from 'vue-router'
import Index from '../../databoard/index.vue'
import IndexSale from '../../databoard/index_sale'
import ArBar from "../../databoard/components/chart/ar-bar.vue";
import ArCompanyBar from "../../databoard/components/chart/ar-company-bar.vue";
import ArMonthlyBar from "../../databoard/components/chart/ar-monthly-bar.vue";
......@@ -30,6 +31,11 @@ export default new Router({
name: 'index',
component: Index
},
{
path: '/index_sale',
name: 'index_sale',
component: IndexSale
},
{
path: '/ar_bar',
name: 'arBar',
......
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