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