6b94d10e by zhangmeng

看板

1 parent b16791bc
<template>
<div class="main">
<el-row class="w100">
<el-col v-if="obj.IFBASE" :span="type=='否'?8:12">
<el-col v-if="obj?.IFBASE" :span="type=='否'?8:12">
<left-page :obj="obj" :type="type" :url="result"/>
</el-col>
<el-col v-if="type=='否'" :span="8">
<center-page :obj="obj" :type="type=='否'" :url="result"/>
</el-col>
<el-col v-if="obj.IFBASE" :span="type=='否'?8:12">
<el-col v-if="obj?.IFBASE" :span="type=='否'?8:12">
<right-page :obj="obj" :type="type" :url="result"/>
</el-col>
</el-row>
</div>
</template>
......@@ -45,7 +44,9 @@ onMounted(() => {
async function handelGetYS000() {
const res = await getYS000(result.value)
type.value = res.data?.IFBASE || '否'
obj.value = res.data
obj.value = res.data || {
IFBASE: '123'
}
}
......
......@@ -26,13 +26,13 @@
<span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span>
营业收入
</div>
<div ref="bing1" style="width: 100%;height:13vh;">
<div ref="bing1" style="width: 100%;height:13.3vh;">
</div>
<div class="bingBottom">
<div style="text-align: center">{{ `${dayjs().format('YYYY')}年` }}营业收入 <br>(万元)</div>
</div>
</div>
<div ref="zhuRef1" class="zhu" style="width:70%;height: 17vh"/>
<div ref="zhuRef1" class="zhu" style="width:70%;height: 17.3vh"/>
</div>
<hr>
......@@ -44,7 +44,7 @@
<span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span>
应收余额
</div>
<div ref="bing2" style="width: 100%;height:13vh;">
<div ref="bing2" style="width: 100%;height:13.3vh;">
</div>
<div class="bingBottom">
<div style="text-align: center;">{{ `${dayjs().format('YYYY')}年${dayjs().format('MM')}月` }} <br>
......@@ -52,7 +52,7 @@
</div>
</div>
</div>
<div ref="zhuRef2" class="zhu" style="width:70%;height: 17vh"/>
<div ref="zhuRef2" class="zhu" style="width:70%;height: 17.3vh"/>
</div>
<hr>
......@@ -64,14 +64,14 @@
<span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span>
现金余额
</div>
<div ref="bing3" style="width: 100%;height:13vh;">
<div ref="bing3" style="width: 100%;height:13.3vh;">
</div>
<div class="bingBottom">
<div style="text-align: center">{{ `${dayjs().format('YYYY')}年${dayjs().format('MM')}月` }} <br> 累计现金余额<br>(万元)
</div>
</div>
</div>
<div ref="zhuRef3" class="zhu" style="width:70%;height: 17vh"/>
<div ref="zhuRef3" class="zhu" style="width:70%;height: 17.3vh"/>
</div>
<hr>
</div>
......@@ -80,7 +80,7 @@
<span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span>
DSO天数
</div>
<div ref="zhuRef4" style="width: 100%;height: 17vh">
<div ref="zhuRef4" style="width: 100%;height: 17.3vh">
</div>
</div>
</div>
......
......@@ -2,7 +2,7 @@
<div class="pd20">
<div class="chartCard">
<div class="title">应收账款余额</div>
<div ref="zhuRef" style="width: 100%; height: 24.6vh;"></div>
<div ref="zhuRef" style="width: 100%; height: 24vh;"></div>
</div>
<div class="chartCard mt30">
......@@ -25,6 +25,7 @@
<el-select
v-model="type1"
class="select"
collapse-tags
multiple
placeholder="数据因素"
size="small"
......@@ -36,7 +37,7 @@
</div>
</div>
<div ref="lineRef" style="width: 100%; height: 24.6vh;"></div>
<div ref="lineRef" style="width: 100%; height: 24vh;"></div>
</div>
<div class="chartCard mt30">
<div>
......@@ -55,7 +56,7 @@
</div>
</div>
</div>
<div ref="payeeRef" style="width: 100%; height: 24.6vh;"></div>
<div ref="payeeRef" style="width: 100%; height: 24vh;"></div>
</div>
</div>
</template>
......@@ -852,7 +853,7 @@ onUnmounted(() => {
right: calc(20 * 100vw / 1920);
top: 3%;
z-index: 1;
width: 70%;
width: 60%;
display: flex;
justify-content: space-between;
......
......@@ -17,7 +17,7 @@
</div>
</div>
<div ref="zhuRef" style="width: 100%; height: 24.6vh;"></div>
<div ref="zhuRef" style="width: 100%; height: 24vh;"></div>
</div>
<div class="chartCard mt30">
......@@ -49,12 +49,12 @@
</el-select>
</div>
</div>
<div ref="lineRef" style="width: 100%; height: 24.6vh;"></div>
<div ref="lineRef" style="width: 100%; height: 24vh;"></div>
</div>
<div class="chartCard mt30">
<div class="title">逾期360天以上未开票</div>
<div ref="overdueRef" style="width: 100%; height: 24.6vh;"></div>
<div ref="overdueRef" style="width: 100%; height: 24vh;"></div>
</div>
</div>
</template>
......@@ -452,7 +452,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
textStyle: {
color: '#fff', // 文字颜色
fontSize: 12, // 文字大小
}
},
},
legend: {
top: "3%",
......@@ -612,6 +612,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
],
}
chartA.setOption(option)
autoHover(chartA, option, 0, 2000)
}
......@@ -835,10 +836,10 @@ const setC = (arry, arr1, arr2, arr3) => {
chartC = echarts.init(overdueRef.value)
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
// trigger: '',
// axisPointer: {
// type: 'shadow'
// },
valueFormatter: (value) => value + '万',
backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
......@@ -846,6 +847,16 @@ const setC = (arry, arr1, arr2, arr3) => {
textStyle: {
color: '#fff', // 文字颜色
fontSize: 12, // 文字大小
},
position: 'top',
formatter: function (row) {
return `
<div style="font-weight:bold">${row.name}</div>
<div style="display:flex;align-items:center;margin-top:5px">
${row.marker}
${row.seriesName == '逾期360天以上' ? '未开票金额' : row.seriesName}: ${row.value}
</div>
`;
}
},
legend: {
......@@ -963,13 +974,6 @@ const setC = (arry, arr1, arr2, arr3) => {
chartC.setOption(option)
autoHover(chartC, option, 0, 2000)
}
const radioAChange = (e) => {
getA()
}
const radioBChange = (e) => {
getB()
}
const clear = () => {
if (autoToolTip) {
clearTimeout(autoToolTip);
......@@ -1047,7 +1051,7 @@ onUnmounted(() => {
position: absolute;
right: calc(20 * 100vw / 1920);
top: 3%;
width: 50%;
width: 60%;
z-index: 1;
display: flex;
justify-content: space-between;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!