【update】-禅道bug修改3

This commit is contained in:
fengchenchen
2022-12-08 14:02:36 +08:00
parent af169d5e98
commit 79f2bc8be0
13 changed files with 147 additions and 75 deletions
@@ -6,14 +6,25 @@
<div class="box-title">收入分类统计</div> <div class="box-title">收入分类统计</div>
<div class="title-right"> <div class="title-right">
<div class="operator"> <div class="operator">
<span @click="toggleEcharts('income')" class="operator-left" <a-select
:class="{'active':activeIndex === 'income'}">收入分析</span> v-model="activeIndex"
<span @click="toggleEcharts('allMoney')" class="operator-left" style="width: 100px"
:class="{'active':activeIndex === 'allMoney'}">应收</span> placeholder="统计类型"
<span @click="toggleEcharts('confirmAmount')" class="operator-right" :bordered="false"
:class="{'active':activeIndex === 'confirmAmount'}">确收</span> show-search
:show-arrow="true"
@change="toggleEcharts"
dropdown-class-name="ant-select-screen"
>
<a-select-option
v-for="(item) in activeIndexData"
:key="item.value"
:value="item.value"
>
{{item.name}}
</a-select-option>
</a-select>
</div> </div>
<a-tree-select <a-tree-select
:multiple="false" :multiple="false"
show-search show-search
@@ -22,12 +33,12 @@
tree-default-expand-all tree-default-expand-all
tree-node-filter-prop="title" tree-node-filter-prop="title"
@change="changeDepart" @change="changeDepart"
style="width:50%" style="width:150px;"
dropdown-class-name="screen-department-select screen-select" dropdown-class-name="screen-department-select screen-select"
:dropdownStyle="{'overflow-x':'hidden',' overflo-y': 'auto' }" :dropdownStyle="{'overflow-x':'hidden',' overflo-y': 'auto' }"
:treeData="treeDepartData" :treeData="treeDepartData"
v-model="queryParam.departCode" v-model="queryParam.departCode"
placeholder="请选择部门"> placeholder="部门选择">
</a-tree-select> </a-tree-select>
</div> </div>
@@ -114,6 +125,11 @@ export default {
queryParam:{}, queryParam:{},
dataSource: [], dataSource: [],
treeDepartData:[],// 组织机构 树数据 treeDepartData:[],// 组织机构 树数据
activeIndexData: [
{name: '收入分析', value: 'income'},
{name: '应收', value: 'allMoney'},
{name: '确收', value: 'confirmAmount'}
]
} }
}, },
mounted() { mounted() {
@@ -122,14 +138,14 @@ export default {
}, },
methods: { methods: {
formatMoney, formatMoney,
toggleEcharts(key) { toggleEcharts() {
if (key === this.activeIndex) { // if (key === this.activeIndex) {
return // return
} else { // } else {
this.activeIndex = key // this.activeIndex = key
this.loadData() this.loadData()
this.$forceUpdate() // this.$forceUpdate()
} // }
}, },
/** /**
* 选择部门 * 选择部门
@@ -284,32 +300,9 @@ export default {
@active-color: #3E79ED; @active-color: #3E79ED;
.operator { .operator {
color: @active-color; color: @active-color;
//position: absolute;
user-select: none; user-select: none;
display: flex; display: flex;
font-size: 12px; font-size: 12px;
justify-content: space-around;
align-items: center;
//right: 20px;
//top: 20px;
width: 180px;
height: 35px;
line-height: 35px;
border: 1px solid @active-color;
border-radius: 4px;
cursor: pointer;
margin-bottom: 10px;
&-left {
width: 33.3%;
text-align: center;
border-right: 1px solid @active-color;
}
&-right {
width: 33.3%;
text-align: center;
}
} }
.active { .active {
@@ -12,12 +12,12 @@
tree-default-expand-all tree-default-expand-all
tree-node-filter-prop="title" tree-node-filter-prop="title"
@change="changeDepart" @change="changeDepart"
style="width:50%" style="width:150px"
dropdown-class-name="screen-department-select screen-select" dropdown-class-name="screen-department-select screen-select"
:dropdownStyle="{ maxHeight: '200px',maxWidth:'100px','overflow-x':'hidden',' overflo-y': 'auto' }" :dropdownStyle="{ maxHeight: '200px',maxWidth:'100px','overflow-x':'hidden',' overflo-y': 'auto' }"
:treeData="treeDepartData" :treeData="treeDepartData"
v-model="queryParam.departCode" v-model="queryParam.departCode"
placeholder="请选择部门"> placeholder="部门选择">
</a-tree-select> </a-tree-select>
</div> </div>
<div class="box-content"> <div class="box-content">
@@ -78,7 +78,7 @@ echarts.use([
import {getAction} from '@api/manage' import {getAction} from '@api/manage'
import {formatMoney} from '@/utils/formatMoney' import {formatMoney} from '@/utils/formatMoney'
import {queryDepartTreeList} from '@api/api' import {queryDepartTreeList} from '@api/api'
import { createPieChart } from "../util/PieOptions"; import { createPieChart } from '../util/PieOptions'
const columns = [ const columns = [
{ {
@@ -269,3 +269,9 @@ export default {
} }
} }
</script> </script>
<style scoped lang="less">
.income-full-box .title-right{
justify-content: flex-end;
}
</style>
+22 -7
View File
@@ -128,19 +128,20 @@ export default {
/deep/ .box-title { /deep/ .box-title {
// (139 + 327 / 2) / 1875 // (139 + 327 / 2) / 1875
left: 16.13%; left: 16.13%;
top: 6.2%;
} }
} }
// 半屏 标题右侧的样式 // 半屏 标题右侧的样式
/deep/.title-right{ /deep/.title-right{
display: flex; display: flex;
flex-direction: column; flex-direction: row;
align-items: end; align-items: center;
justify-content: space-between;
margin-right: 6%; margin-right: 6%;
padding-top: 6%; padding-top: 4%;
position: relative; position: relative;
z-index: 100; z-index: 100;
width: 50%; margin-left: 50%;
float: right;
} }
@@ -192,8 +193,9 @@ export default {
//下拉框,输入框 //下拉框,输入框
/deep/ .ant-select-selection { /deep/ .ant-select-selection {
border-color: @borderColor; border: none;
background: @backgroundColor !important; background: transparent !important;
text-shadow: 0 0 5px #88D8FB;
} }
/deep/ .ant-select-selection-selected-value { /deep/ .ant-select-selection-selected-value {
@@ -203,6 +205,13 @@ export default {
color: #fff !important; color: #fff !important;
} }
/deep/.ant-select-focused .ant-select-selection,
.ant-select-selection:focus,
.ant-select-selection:active{
border: none!important;
box-shadow: none;
}
/deep/.table-text { /deep/.table-text {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@@ -213,6 +222,12 @@ export default {
overflow-x: auto!important; overflow-x: auto!important;
} }
/* 增加媒体查询的限制*/
@media screen and (max-width: 1400px) {
/deep/.income-more-title-full-box .box-title {
font-size: 14px;
}
}
</style> </style>
<style lang="less"> <style lang="less">
+13 -5
View File
@@ -33,7 +33,7 @@
<div>{{ record.standardNameChinese }}</div> <div>{{ record.standardNameChinese }}</div>
<div>{{ record.standardNameEnglish }}</div> <div>{{ record.standardNameEnglish }}</div>
</template> </template>
<div > <div class="name-div-inner">
<div class="">{{ record.standardNameChinese }}</div> <div class="">{{ record.standardNameChinese }}</div>
<div class="">{{ record.standardNameEnglish }}</div> <div class="">{{ record.standardNameEnglish }}</div>
</div> </div>
@@ -162,8 +162,8 @@ export default {
tt.standardNumber = `${tt.standardNumber} / ${tt.supplement}` tt.standardNumber = `${tt.standardNumber} / ${tt.supplement}`
} }
// tt.standardNameChinese = '评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标评价标准评价标准十个' // tt.standardNameChinese = '评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标评价标准评价标准十个'
tt.standardNameEnglish = '评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个' // tt.standardNameEnglish = '评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个'
tt.standardNameChinese = '评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个' // tt.standardNameChinese = '评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个'
}) })
}, },
handleTableChange(pagination, filters, sorter) { handleTableChange(pagination, filters, sorter) {
@@ -204,13 +204,21 @@ export default {
font-weight: bold; font-weight: bold;
background: transparent; background: transparent;
border: none; border: none;
text-shadow: 0 0 5px #88D8FB;
padding-bottom: 20px;
} }
/deep/ .ant-table-tbody tr > td { /deep/ .ant-table-tbody tr > td {
color: #A1E1FD; color: #A1E1FD;
border: none; border: none;
min-height: 108px;
//border-bottom: 1px solid rgb(245,245,246); //border-bottom: 1px solid rgb(245,245,246);
.name-div-inner{
min-height: 84px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
} }
/* /*
@@ -295,7 +303,7 @@ export default {
overflow-y: auto!important; overflow-y: auto!important;
} }
/deep/ .ant-table-header{ /deep/ .ant-table-header{
overflow: auto!important; overflow: hidden!important;
} }
</style> </style>
@@ -124,6 +124,12 @@ export default {
} }
</script> </script>
<style scoped> <style scoped lang="less">
/* 增加媒体查询的限制*/
@media screen and (max-width: 1400px) {
.preparation-half-box .box-title {
font-size: 14px;
}
}
</style> </style>
@@ -84,6 +84,11 @@ export default {
} }
</script> </script>
<style scoped> <style scoped lang="less">
/* 增加媒体查询的限制*/
@media screen and (max-width: 1400px) {
.preparation-half-box .box-title {
font-size: 14px;
}
}
</style> </style>
@@ -154,6 +154,7 @@ export default {
} }
li.active{ li.active{
color: @white; color: @white;
text-shadow: 0 0 5px #88D8FB;
} }
.splice-icon{ .splice-icon{
width: 20px; width: 20px;
@@ -161,6 +162,9 @@ export default {
margin: 0 10px; margin: 0 10px;
cursor: pointer; cursor: pointer;
} }
.ant-select.active {
text-shadow: 0 0 5px #88D8FB;
}
} }
+4 -4
View File
@@ -158,8 +158,8 @@ export const BarOptions = {
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: '#7599E8', color: 'rgba(117, 153, 232, 0.5)',
type: 'dashed' type: 'solid'
} }
}, },
type: 'value', type: 'value',
@@ -305,8 +305,8 @@ export const BarAxisTransformOptions = {
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: '#7599E8', color: 'rgba(117, 153, 232, 0.5)',
type: 'dashed' type: 'solid'
} }
}, },
type: 'value', type: 'value',
+4 -4
View File
@@ -81,8 +81,8 @@ export const LineOptions = {
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: '#7599E8', color: 'rgba(117, 153, 232, 0.5)',
type: 'dashed' type: 'solid'
} }
}, },
type: 'value', type: 'value',
@@ -166,8 +166,8 @@ export const ISOLineOptions = {
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: '#7599E8', color: 'rgba(117, 153, 232, 0.5)',
type: 'dashed' type: 'solid'
} }
}, },
type: 'value', type: 'value',
+12 -5
View File
@@ -55,7 +55,7 @@ export const PieOptions = {
type: 'radial', type: 'radial',
x: 0.5, x: 0.5,
y: 0.5, y: 0.5,
r: 2, r: 1,
colorStops: [{ colorStops: [{
offset: 0, color: 'rgba(25, 108, 235, 1)' // 0% 处的颜色 offset: 0, color: 'rgba(25, 108, 235, 1)' // 0% 处的颜色
}, { }, {
@@ -70,8 +70,14 @@ export const PieOptions = {
show: true, show: true,
trigger: 'item', trigger: 'item',
formatter: (param) => { formatter: (param) => {
let color = ''
if(typeof param.color === 'string') {
color = param.color
} else {
color = param.color.colorStops[0].color
}
return `<div> return `<div>
<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${param.color};"></span> <span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>
<span style="color: #7599E8">${param.name}</span> <span style="color: #7599E8">${param.name}</span>
<span style="color: #7599E8">${formatMoney(param.data.money)}</span> <span style="color: #7599E8">${formatMoney(param.data.money)}</span>
</div>` </div>`
@@ -107,15 +113,16 @@ export const PieOptions = {
type: 'pie', type: 'pie',
radius: ['20%', '60%'], radius: ['20%', '60%'],
center: ['50%', '50%'], center: ['50%', '50%'],
roseType: 'area', // 南丁格尔图,所有扇区圆心角相同,仅通过半径展现数据大小。 // roseType: 'area', // 南丁格尔图,所有扇区圆心角相同,仅通过半径展现数据大小。
// roseType: 'radius', // 南丁格尔图,扇区圆心角展现数据的百分比,半径展现数据的大小。 roseType: 'radius', // 南丁格尔图,扇区圆心角展现数据的百分比,半径展现数据的大小。
itemStyle: { itemStyle: {
borderRadius: [0, 0, 5, 5] borderRadius: [0, 0, 5, 5]
}, },
label: { label: {
show: true, show: true,
color: '#7599E8', color: '#7599E8',
formatter: '{b}: {d}%', // formatter: '{b}: {d}%',
formatter: '{b}: {c}',
} }
} }
] ]
+22 -1
View File
@@ -60,8 +60,14 @@ export default {
}, },
tooltip: { tooltip: {
formatter: (param) => { formatter: (param) => {
let color = ''
if(typeof param.color === 'string') {
color = param.color
} else {
color = param.color.colorStops[0].color
}
return `<div> return `<div>
<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${param.color};"></span> <span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>
<span style="color: #7599E8">${param.name}</span> <span style="color: #7599E8">${param.name}</span>
<span style="color: #7599E8">${param.value}</span> <span style="color: #7599E8">${param.value}</span>
</div>` </div>`
@@ -71,6 +77,21 @@ export default {
series: [ series: [
{ {
center: ['42%', '50%'], center: ['42%', '50%'],
label: {
formatter: '{a|{c}}{hr|}',
rich: {
hr: {
backgroundColor: 't',
borderRadius: 50,
width: 7,
height: 7,
marginRight: 14
},
a: {
padding: [10, 5, 10, 10]
}
}
},
data: echartsData data: echartsData
} }
] ]
@@ -96,9 +96,9 @@ export default {
dimensionValue: 'year', // 查询维度 默认是’year‘ dimensionValue: 'year', // 查询维度 默认是’year‘
// 维度查询的下拉框数据 // 维度查询的下拉框数据
dimensionOptionData: [ dimensionOptionData: [
{text: '年', value: 'year'}, {text: '年份', value: 'year'},
{text: '季度', value: 'quarter'}, {text: '季度', value: 'quarter'},
{text: '月', value: 'month'}, {text: '月份', value: 'month'},
], ],
quarterOptionData: [ quarterOptionData: [
{text: '第一季度', value: '1'}, {text: '第一季度', value: '1'},
@@ -194,6 +194,7 @@ export default {
initChart(data) { initChart(data) {
let xData = data.leftData let xData = data.leftData
let echartsData = data.resultMapList[0].count let echartsData = data.resultMapList[0].count
let tooltipTitle = data.resultMapList[0].cogName
let option = { let option = {
legend: { legend: {
show: false show: false
@@ -205,7 +206,7 @@ export default {
tooltip: { tooltip: {
formatter: params => { formatter: params => {
// 获取xAxis data中的数据 // 获取xAxis data中的数据
let dataStr = '' let dataStr = `<div style="color:#7599E8;margin-left: 8px;font-size: 14px;margin-bottom: 10px;">${tooltipTitle}</div>`
params.forEach(item => { params.forEach(item => {
let color = '' let color = ''
if(typeof item.color === 'string') { if(typeof item.color === 'string') {
@@ -63,6 +63,12 @@ export default {
formatter: params => { formatter: params => {
// 获取xAxis data中的数据 // 获取xAxis data中的数据
let dataStr = '' let dataStr = ''
let total = 0
for (let i = 0; i < params.length; i++) {
total += parseInt(params[i].data)
}
dataStr += ` <div style="color:#7599E8;margin-left: 8px;font-size: 14px">总数: ${total}</div>`
params.forEach(item => { params.forEach(item => {
let color = '' let color = ''
if(typeof item.color === 'string') { if(typeof item.color === 'string') {