Skip to content

S
SuperMan
Commit 45bd848a authored by youjie's avatar youjie
Browse files
Options

分析图表

parent 565eccaf
Hide whitespace changes
Inline Side-by-side
Showing with 1528 additions and 1 deletion
src/components/CarDealerOrder/components/OrderDetails.vue 0 → 100644
View file @ 45bd848a
<template>
<div v-if="t">
<div class="hotelDetails-header">
<span>{{ t.Name }}</span>
<!-- <el-rate v-model="t.Star" disabled text-color="#ff9900"></el-rate> -->
</div>
<div class="hotelDetails-content">
<div class="hotelDetails-infor">
<div>
<i class="el-icon-location"></i>
<p><span>{{ t.Address }}</span></p>
</div>
<div>
<i class="el-icon-phone"></i>
<p><span>{{$t('pub.telphone')}}:</span><span>{{ t.Tel }}</span></p>
<!-- <p><span>{{$t('objFill.chuanzhen')}}:</span><span>{{ t.Fax == '' ?$t('fnc.no') : t.Fax }}</span></p> -->
<p><span>{{$t('hotel.hotel_website')}}:</span><a :href="t.URL" target="_blank">{{ t.URL }}</a></p>
</div>
</div>
<div class="hotelDetails-ImgMap">
<div class="hotelDetails-Img">
<div style="position: relative;">
<div v-if="t.PlayTimeHour||t.PlayTimeMinutes" class="Img-absolute">
<div class="Img-absolute-box">
<div>建议游玩</div>
<div>
<template v-if="t.PlayTimeHour">
{{t.PlayTimeHour}} 小时
</template>
<template v-if="t.PlayTimeMinutes">
{{t.PlayTimeMinutes}} 分钟
</template>
</div>
</div>
</div>
<el-image
v-if="images.length>0"
style="width: 100%; height: 100%"
:src="images[0]"
:preview-src-list="images" fit="cover">
<div slot="placeholder" class="image-slot">
{{$t('objFill.jiazazhong')}}<span class="dot">...</span>
</div>
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
</div>
<div v-if="images.length>1">
<div class="Img-right-box" :style="{'height':images.length==2?'100%':'50%'}">
<el-image
style="width: 100%; height: 100%"
:src="images[1]"
:preview-src-list="images" fit="cover">
<div slot="placeholder" class="image-slot">
{{$t('objFill.jiazazhong')}}<span class="dot">...</span>
</div>
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
</div>
<div class="Img-right-box" v-if="images.length>2">
<div class="Img-right-num" v-if="images.length>3" @click="showImageHandler">
<span class="fz20 text-weight-bold">+</span>
<span class="text-h5 text-weight-bold">{{ images.length - 3 }}</span>
</div>
<el-image
style="width: 100%; height: 100%"
:src="images[2]"
:preview-src-list="images" ref="images" fit="cover">
<div slot="placeholder" class="image-slot">
{{$t('objFill.jiazazhong')}}<span class="dot">...</span>
</div>
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
</div>
</div>
</div>
<div class="hotelDetails-Map">
<Map :obj="ObjMap"></Map>
<!-- <div :style="{height:'100%',width:'100%'}" :id="`mapContainer_${ticket.ID}`"></div> -->
</div>
</div>
<div class="hotelDetails-prompt">
<p>景区详情</p>
<div>{{ t.Feature }}</div>
</div>
<div class="hotelDetails-service">
<div class="service"><span>开放时间</span><div v-if="t.OpeningHours">{{t.OpeningHours}} {{t.OpeningHours.substring(6,13)}} 停止入场</div></div>
<div class="service"><span>景区特色</span>
<div>
<template v-if="t.GeographicTag||t.ScenicSpotTag">
<el-tag v-if="t.GeographicTag" v-for="s in t.GeographicTag.split(',')" type="success" :key="s" :type="s" style="margin-right: 10px;" />
<el-tag v-if="t.ScenicSpotTag" v-for="s in t.ScenicSpotTag.split(',')" type="warning" :key="s" :type="s" style="margin-right: 10px;"/>
</template>
<template v-else>-</template>
</div>
</div>
<div class="service"><span>交通说明</span><div>{{t.TrafficInfo?t.TrafficInfo:'-'}}</div></div>
</div>
<div class="hotelDetails-prompt prompt">
<p>{{$t('objFill.wenxingtixing')}}</p>
<div>{{ t.About }}</div>
</div>
<div class="hotelDetails-prompt prompt">
<p>预定须知</p>
<div>{{ t.BookingInfo }}</div>
</div>
</div>
</div>
</template>
<script>
import Map from "../../../public/echoMap.vue";
export default {
components: { Map },
props: ['ticket'],
data() {
return {
map: null,
loading: true,
t: {},
images: [],
center: null,
ObjMap:{
lng:'',
lat:'',
Address: ''
}
};
},
watch: {
ticket: {
handler: function (val, oldVal) {
this.t = JSON.parse(JSON.stringify(this.ticket))
this.images = this.t.PicPathList
this.ObjMap = {
lng:this.t.Lng,
lat:this.t.Lat,
Address: this.t.Address
}
// this.initMap(this.t.Lng,this.t.Lat,this.t.Name)
},
deep: true,
immediate: true
},
},
created() {
},
mounted() {
if(this.ticket){
this.t = JSON.parse(JSON.stringify(this.ticket))
this.images = this.t.PicPathList
this.ObjMap = {
lng:this.t.Lng,
lat:this.t.Lat,
Address: this.t.Address
}
// this.initMap(this.t.Lng,this.t.Lat,this.t.Name)
}
},
methods: {
initMap(lng,lat,name) {
if(this.map){
this.map.clearOverlays()
}
var that = this;
this.map = new BMap.Map(`mapContainer_${this.ticket.ID}`, {enableMapClick:false,
minZoom: 3,
maxZoom: 50,
}) //新建地图实例，enableMapClick:false ：禁用地图默认点击弹框
var point = new BMap.Point(lng,lat);
this.map.centerAndZoom(new BMap.Point(lng, lat),15)
this.map.enableScrollWheelZoom(false)
var marker = new BMap.Marker(point); //标记点
var label = new BMap.Label(name,{offset:new BMap.Size(0,28)});//标签
label.setStyle({
color: "#FFF",
fontSize: "10px",
height: "24px",
lineHeight: "20px",
padding: "2px 5px",
border: "1px solid rgba(230, 0, 0, 0.7)",
background: "rgba(230, 0, 0, 0.7)",
fontWeight: "bold",
transform: 'translateX(-50%)',
fontFamily: "微软雅黑"
})
marker.setLabel(label)
this.map.addOverlay(marker);
},
showImageHandler(){
this.$refs.images.showViewer = true
},
}
};
</script>
<style scoped>
.image-slot{
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.hotelDetails-header{
display: flex;
align-items: center;
}
.hotelDetails-header span{
font-size: 18px;
font-weight: bold;
margin-right: 10px;
color: black;
}
.hotelDetails-content{
}
.hotelDetails-infor{
padding: 20px 0;
}
.hotelDetails-infor div{
display: flex;
align-items: center;
}
.hotelDetails-infor>div:first-child{
margin-bottom: 5px;
}
.hotelDetails-infor div i{
color: #BDBDBD;
margin-right: 5px;
}
.hotelDetails-infor div p{
margin-right: 10px;
}
.hotelDetails-infor div p span{
font-size: 13px;
color: black;
}
.hotelDetails-infor div p span:nth-child(2),.hotelDetails-infor div p a{
color: #2196F3;
margin-left: 5px;
}
.hotelDetails-infor div p a{
cursor: pointer;
text-decoration:underline
}
.hotelDetails-ImgMap{
height: 300px;
display: flex;
justify-content: space-between;
}
.hotelDetails-Img{
width: 60%;
}
.hotelDetails-Map{
flex: 1;
flex-shrink: 0;
}
.hotelDetails-Map{
margin-left: 10px;
}
.hotelDetails-Img{
display: flex;
/* overflow: hidden; */
}
.hotelDetails-Img>div:first-child{
flex-grow: 1;
}
.hotelDetails-Img>div:nth-child(2){
width: 50%;
margin-left: 10px;
display: flex;
flex-direction: column;
}
.Img-right-box:nth-child(2){
margin-top: 8px;
}
.Img-right-box{
height: 50%;
position: relative;
overflow: hidden;
}
.Img-right-num{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(23,23,23,.5);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.Img-right-num span{
color: #ffffff;
font-size: 23px;
font-weight: bold;
}
.Img-right-num span:first-child{
font-size: 20px;
font-weight: bold;
margin-right: 10px;
}
.hotelDetails-prompt{
margin: 20px 0;
border-radius: 3px;
background: #E1F5FE;
padding: 10px;
}
.hotelDetails-prompt p{
font-weight: 500;
font-size: 13px;
padding: 0 0 10px 0;
}
.hotelDetails-prompt div{
color: #5E5E5E;
font-size: 12px;
line-height: 25px;
}
.hotelDetails-prompt.prompt{
background: #FFF3E0;
border: 1px dashed #FFA500;
}
.hotelDetails-service{
padding: 0 15px;
}
.service{
display: flex;
justify-content: space-between;
padding: 10px 0;
}
.service span{
color: #A8ABBC;
font-size: 12px;
width: 120px;
flex-shrink: 0;
}
.service div{
flex-grow: 1;
display: flex;
flex-direction: row;
flex-wrap: wrap;
color: black;
}
.service div p{
margin-right: 15px;
}
.service div li{
list-style-type: disc;
list-style-position: outside;
white-space: nowrap;
margin-right: 15px;
}
.Img-absolute{
position: absolute;
padding: 5px;
bottom: unset;
z-index: 1;
border-bottom-right-radius: 4px;
left: 0;
top: 0;
font-size: 12px;
background: #ffffff;
}
.Img-absolute-box{
display: flex;
flex-direction: row;
align-items: center;
overflow: hidden;
}
.Img-absolute-box div:first-child{
padding: 0 4px; font-size: 12px;background: black;color: white;
}
.Img-absolute-box div:last-child{
padding: 0 4px; font-size: 12px; background: #f0bd86;color: black;
}
</style>
\ No newline at end of file
src/components/FinancialModule/DataAnalysis/components/corporationChart.vue 0 → 100644
View file @ 45bd848a
<template>
<div style="margin-bottom: 20px; ">
<div class="echartsBox">
<div class="titleBox text-center row" style="margin-bottom: 5px;">
<h3>公司统计</h3>
<div style="margin-left: 20px;">
<el-tag size="small" effect="dark"
style="margin-right: 5px;cursor: pointer;"
:type="Current==item.ID?'danger':'info'" v-for="(item,index) in types"
@click="Current=item.ID,BranchChart()">{{item.Name}}</el-tag>
</div>
</div>
<div style="background: #fff;">
<div id="BranchAnalysisChart"
:style="{width: '', height: '520px'}"></div>
</div>
</div>
</div>
</template>
<script>
export default {
props:['StatisticalData'],
data() {
return {
MonthList: [],//月份列表
BranchAnalysisData: [],
colorList:['#089bab','#FFA171','#72b8ff','#ff9cc6','#7b78ff','#28cc90','#ee8fff','#5cf2ff','#ff9a00','#4fc4f7','#738eff','#b0edff',
'#E43939','#F79A2C','#FFF60B','#3DD948','#39CAE4','#2C31F1','#7A39E4','#E65FC1','#D0B478','#000000','#BABABA',],
types:[
{Name: '收入',ID:1},
{Name: '收入占比 %',ID:2},
{Name: '毛利',ID:3},
{Name: '毛利率 %',ID:4},
{Name: '实际利润',ID:5},
{Name: '实际利率 %',ID:6},
],
Current: 1,
}
},
mounted() {
},
methods: {
BranchChart(){
let that = this
let titles = this.BranchAnalysisData.map(x=>{return x.Name})
let datas = []
let chartDom = document.getElementById('BranchAnalysisChart');
let myChart = this.$echarts.init(chartDom);
let option;
option = {
color:that.colorList,
tooltip: {
backgroundColor:'transparent',
trigger: 'axis',
axisPointer: {
type: 'none',
label: {
// backgroundColor: '#6a7985'
}
},
position: function (point, params, dom, rect, size) {
return [point[0]-50, point[1]-dom.offsetHeight];
},
formatter: function(params) {
var res = `<div style="background:${params.color};position:relative;padding:6px 10px;border-radius:8px;">
${params.seriesName}:${params.data}
<div style="position: absolute;bottom: -8px;left: 35%;width:0;
height:0;
border-left:8px solid transparent;
border-right:8px solid transparent;
border-top:8px solid ${params.color};">
</div>
<div>`
return res;
}
},
legend: {
x:'left',
y:'bottom',
type:'scroll',
icon: "circle",
padding: [5, 30, 20, 30] ,
type:'scroll',
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: 15, // 默认10%，给24就挺合适的。
top: 30, // 默认60
right: 15, // 默认10%
bottom: 70, // 默认60
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis : [
{
type : 'category',
boundaryGap: false,
data :this.MonthList,
axisLine: {
lineStyle: {
// 设置x轴颜色
color: "transparent"
}
},
axisLabel: {
textStyle: {
color: "#333333"
}
},
}
],
yAxis : [
{
type : 'value',
axisLine: {
lineStyle: {
// 设置x轴颜色
color: "transparent",
width: 1,
}
},
axisLabel: {
textStyle: {
color: "#969696"
}
},
splitLine:{
show:true,
lineStyle:{
// type:'dashed'
color:'#EEEEEE',
}
}
}
],
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
myChart.setOption(option,true)
}
},
watch: {
StatisticalData:{
handler(n,o){
this.MonthList = n.MonthList//月份列表
this.BranchAnalysisData = n.BranchAnalysisData
this.BranchChart()
},
deep: true,
immediate: false,
}
},
}
</script>
<style scoped>
/deep/.LineAnalysisDataBJ tr td:nth-child(1n){
background: #F5F7FA;
}
/deep/.LineAnalysisDataBJ tr td:nth-child(2n){
background: #fff;
}
/deep/.LineAnalysisDataBJ tr th{
background: #F5F7FA;
}
/deep/.el-table.LineAnalysisDataBJ tr:first-child th:first-child{
background: #F5F7FA;
}
/deep/.el-table.LineAnalysisDataBJ tr:nth-child(2) th:nth-child(1n){
/* background: #fff; */
}
/deep/.el-table.LineAnalysisDataBJ tr:nth-child(2) th:nth-child(2n){
background: #F5F7FA;
}
/deep/.el-table.LineAnalysisDataBJ tr:first-child th{
background: #fff;
}
/deep/.el-table.LineAnalysisDataBJ2 tr:first-child th:nth-child(1n){
background: #F5F7FA;
}
/deep/.el-table.LineAnalysisDataBJ2 tr:first-child th:nth-child(2n){
background: #fff;
}
/deep/.el-table.LineAnalysisDataBJ tr th{
height: 20px;
line-height: 20px;
padding: 5px 0;
}
/deep/.el-table.LineAnalysisDataBJ2 tr th{
height: 20px;
line-height: 20px;
padding: 5px 0;
}
/deep/.el-table.LineAnalysisDataBJ tr td{
height: 20px;
line-height: 20px;
padding: 5px 0;
}
/deep/.el-table.LineAnalysisDataBJ2 tr td{
height: 20px;
line-height: 20px;
padding: 5px 0;
}
.titleBox{
padding: 0 5px 5px 5px;
}
.row{
display: flex;
}
.echartsBox{
width: 100%;
}
</style>
src/components/FinancialModule/DataAnalysis/components/lineChart.vue 0 → 100644
View file @ 45bd848a
<template>
<div style="margin-bottom: 20px;">
<div class="echartsBox">
<div class="titleBox text-center row" style="margin-bottom: 5px;">
<h3>线路统计</h3>
<div style="margin-left: 20px;">
<el-tag size="small" effect="dark"
style="margin-right: 5px;cursor: pointer;"
:type="Current==item.ID?'danger':'info'" v-for="(item,index) in types"
@click="Current=item.ID,LineChart()">{{item.Name}}</el-tag>
</div>
</div>
<div style="background: #fff;">
<div id="LineStatisticsChart"
:style="{width: '', height: '520px'}"></div>
</div>
</div>
<div class="echartsBox">
<div class="titleBox text-center row" style="margin-bottom: 5px;margin-top: 10px;">
<h3>成本统计</h3>
<div style="margin-left: 20px;">
<el-tag size="small" effect="dark"
style="margin-right: 5px;cursor: pointer;"
:type="costCurrent==item.ID?'danger':'info'" v-for="(item,index) in costTypes"
@click="costCurrent=item.ID,CostChart()">{{item.Name}}</el-tag>
</div>
</div>
<div style="background: #fff;">
<div id="costStatisticsChart"
:style="{width: '100%', height: '520px'}"></div>
</div>
</div>
</div>
</template>
<script>
export default {
props:['StatisticalData'],
data() {
return {
MonthList: [],//月份列表
LineAnalysisData: [],//各线路统计
CostAnalysisData: [],//各成本统计
colorList:['#089bab','#FFA171','#72b8ff','#ff9cc6','#7b78ff','#28cc90','#ee8fff','#5cf2ff','#ff9a00','#4fc4f7','#738eff','#b0edff',
'#E43939','#F79A2C','#FFF60B','#3DD948','#39CAE4','#2C31F1','#7A39E4','#E65FC1','#D0B478','#000000','#BABABA',],
Stocklegend: {},
types:[
{Name: '收入',ID:1},
{Name: '收入占比 %',ID:2},
{Name: '毛利',ID:3},
{Name: '毛利率 %',ID:4},
{Name: '实际利润',ID:5},
{Name: '实际利率 %',ID:6},
],
costTypes: [
{Name: '成本',ID:1},
{Name: '收入 %',ID:2},
],
costTitles:[
{Name: '机票',value:'JiPiao',ID:1},
// {Name: '机票/收入',value:'JiPiaoRate',ID:2},
{Name: '房费',value:'RoomFee',ID:3},
// {Name: '房费/收入',value:'RommFeeRate',ID:4},
{Name: '车费',value:'CarFee',ID:5},
// {Name: '车费/收入',value:'CarFeeRate',ID:6},
{Name: '餐费',value:'MealFee',ID:7},
// {Name: '餐费/收入',value:'MealFeeRate',ID:8},
{Name: '门票',value:'TicketFee',ID:9},
// {Name: '门票/收入',value:'TicketFeeRate',ID:10},
{Name: '签证',value:'VisaFee',ID:11},
// {Name: '签证/收入',value:'VisaFeeRate',ID:12},
],
incomeTitles:[
{Name: '机票/收入',value:'JiPiaoRate',ID:2},
{Name: '房费/收入',value:'RommFeeRate',ID:4},
{Name: '车费/收入',value:'CarFeeRate',ID:6},
{Name: '餐费/收入',value:'MealFeeRate',ID:8},
{Name: '门票/收入',value:'TicketFeeRate',ID:10},
{Name: '签证/收入',value:'VisaFeeRate',ID:12},
],
Current: 1,
costCurrent: 1,
CostDataObj: {
name: '',
type:'bar',
itemStyle:{
barBorderRadius: 15,
},
barWidth : 15,
data: [],
},
CostDatas: []
}
},
mounted() {
},
methods: {
CostChart(){
this.inCostDatas()
let that = this
let titles = this.costCurrent==1?this.costTitles.map(x=>{return x.Name}):this.incomeTitles.map(x=>{return x.Name})
let datas = []
for(let index=0;index<this.costTitles.length;index++){
for(let i=0;i<this.MonthList.length;i++){
let filter = this.CostAnalysisData.filter(z=>{return z.Month==this.MonthList[i]})
if(filter){
this.CostDatas.forEach((x,indexs)=>{
if(this.costCurrent==1){
if(indexs==0){
x.name = '机票'
this.CostAnalysisData.forEach(z=>{
x.data.push(z['JiPiao'])
})
}else if(indexs==1){
x.name = '房费'
this.CostAnalysisData.forEach(z=>{
x.data.push(z['RoomFee'])
})
}else if(indexs==3){
x.name = '车费'
this.CostAnalysisData.forEach(z=>{
x.data.push(z['CarFee'])
})
}else if(indexs==4){
x.name = '餐费'
this.CostAnalysisData.forEach(z=>{
x.data.push(z['MealFee'])
})
}else if(indexs==5){
x.name = '门票'
this.CostAnalysisData.forEach(z=>{
x.data.push(z['TicketFee'])
})
}else if(indexs==6){
x.name = '签证'
this.CostAnalysisData.forEach(z=>{
x.data.push(z['VisaFee'])
})
}
}else{
if(indexs==0){
x.name = '机票/收入'
this.CostAnalysisData.forEach(z=>{
x.data.push(z['JiPiaoRate'])
})
}else if(indexs==1){
x.name = '房费/收入'
this.CostAnalysisData.forEach(z=>{
x.data.push(z['RoomFeeRate'])
})
}else if(indexs==3){
x.name = '车费/收入'
this.CostAnalysisData.forEach(z=>{
x.data.push(z['CarFeeRate'])
})
}else if(indexs==4){
x.name = '餐费/收入'
this.CostAnalysisData.forEach(z=>{
x.data.push(z['MealFeeRate'])
})
}else if(indexs==5){
x.name = '门票/收入'
this.CostAnalysisData.forEach(z=>{
x.data.push(z['TicketFeeRate'])
})
}else if(indexs==6){
x.name = '签证/收入'
this.CostAnalysisData.forEach(z=>{
x.data.push(z['VisaFeeRate'])
})
}
}
})
}
}
}
datas = this.CostDatas
console.log(datas,'------------')
let chartDom = document.getElementById('costStatisticsChart');
let myChart = this.$echarts.init(chartDom);
let option;
option = {
color:that.colorList,
tooltip : {
backgroundColor:'transparent',
trigger: 'item',
axisPointer: {
type: 'none',
label: {
// backgroundColor: '#6a7985'
}
},
position: function (point, params, dom, rect, size) {
return [point[0]-50, point[1]-dom.offsetHeight];
  },
formatter: function(params) {
var res = `<div style="background:${params.color};position:relative;padding:6px 10px;border-radius:8px;">
${params.seriesName}:${params.data}
<div style="position: absolute;bottom: -8px;left: 35%;width:0;
height:0;
border-left:8px solid transparent;
border-right:8px solid transparent;
border-top:8px solid ${params.color};">
</div>
<div>`
return res;
}
},
legend: {
x:'left',
y:'bottom',
type:'scroll',
icon: "circle",
padding: [5, 30, 20, 30] ,
type:'scroll',
data: titles,
// selected: that.Stocklegend
},
grid: {
left: 75, // 默认10%，给24就挺合适的。
top: 30, // 默认60
right: 15, // 默认10%
bottom: 70, // 默认60
},
xAxis : [
{
type: 'category',
data:this.MonthList,
axisLine: {
lineStyle: {
// 设置x轴颜色
color: "transparent"
}
},
axisLabel: {
textStyle: {
color: "#333333"
}
},
}
],
yAxis : [
{
type : 'value',
axisLine: {
lineStyle: {
// 设置x轴颜色
color: "transparent",
width: 1,
}
},
axisLabel: {
textStyle: {
color: "#969696"
}
},
splitLine:{
show:true,
lineStyle:{
// type:'dashed'
color:'#EEEEEE',
}
}
}
],
series:datas
};
myChart.setOption(option,true)
},
LineChart(){
let that = this
let titles = this.LineAnalysisData.map(x=>{return x.Name})
let datas = []
let Newobj={};
for (let i = 0; i < this.LineAnalysisData.length; i++) {
const element = this.LineAnalysisData[i];
let obj = {
name: element.Name,
type:'bar',
itemStyle:{
barBorderRadius: 15,
},
barWidth : 15,
// stack: 'Total',
data: [],
}
for(let j=0;j<element.DetailList.length;j++){
if(that.Current==1) obj.data.push(`${element.DetailList[j].Income.toFixed(2)}`)
if(that.Current==2) obj.data.push(`${element.DetailList[j].IncomeRate.toFixed(2)}`)
if(that.Current==3) obj.data.push(`${element.DetailList[j].MaoLi.toFixed(2)}`)
if(that.Current==4) obj.data.push(`${element.DetailList[j].MaoLiRate.toFixed(2)}`)
if(that.Current==5) obj.data.push(`${element.DetailList[j].Profit.toFixed(2)}`)
if(that.Current==6) obj.data.push(`${element.DetailList[j].ProfitRate.toFixed(2)}`)
}
datas.push(obj)
if(i>5){
let name=element.Name;
Newobj[name]=false;
}
this.Stocklegend=Newobj;
}
let chartDom = document.getElementById('LineStatisticsChart');
let myChart = this.$echarts.init(chartDom);
let option;
option = {
color:that.colorList,
tooltip : {
backgroundColor:'transparent',
trigger: 'item',
axisPointer: {
type: 'none',
label: {
// backgroundColor: '#6a7985'
}
},
position: function (point, params, dom, rect, size) {
return [point[0]-50, point[1]-dom.offsetHeight];
  },
formatter: function(params) {
var res = `<div style="background:${params.color};position:relative;padding:6px 10px;border-radius:8px;">
${params.seriesName}:${params.data}
<div style="position: absolute;bottom: -8px;left: 35%;width:0;
height:0;
border-left:8px solid transparent;
border-right:8px solid transparent;
border-top:8px solid ${params.color};">
</div>
<div>`
return res;
}
},
legend: {
x:'left',
y:'bottom',
type:'scroll',
icon: "circle",
padding: [5, 30, 20, 30] ,
type:'scroll',
data: titles,
selected: that.Stocklegend
},
grid: {
left: 75, // 默认10%，给24就挺合适的。
top: 30, // 默认60
right: 15, // 默认10%
bottom: 70, // 默认60
},
xAxis : [
{
type : 'category',
data :this.MonthList,
axisLine: {
lineStyle: {
// 设置x轴颜色
color: "transparent"
}
},
axisLabel: {
textStyle: {
color: "#333333"
}
},
}
],
yAxis : [
{
type : 'value',
axisLine: {
lineStyle: {
// 设置x轴颜色
color: "transparent",
width: 1,
}
},
axisLabel: {
textStyle: {
color: "#969696"
}
},
splitLine:{
show:true,
lineStyle:{
// type:'dashed'
color:'#EEEEEE',
}
}
}
],
series:datas
};
myChart.setOption(option,true)
},
inCostDatas() {
this.CostDatas = []
for(let i=0;i<7;i++){
this.CostDatas.push(JSON.parse(JSON.stringify(this.CostDataObj)))
}
}
},
watch: {
StatisticalData:{
handler(n,o){
this.MonthList = n.MonthList//月份列表
this.LineAnalysisData = n.LineAnalysisData//各线路统计
this.CostAnalysisData = n.CostAnalysisData//各成本统计
this.LineChart()
this.CostChart()
},
deep: true,
immediate: false,
}
},
}
</script>
<style scoped>
/deep/.LineAnalysisDataBJ tr td:nth-child(1n){
background: #F5F7FA;
}
/deep/.LineAnalysisDataBJ tr td:nth-child(2n){
background: #fff;
}
/deep/.LineAnalysisDataBJ tr th{
background: #F5F7FA;
}
/deep/.el-table.LineAnalysisDataBJ tr:first-child th:first-child{
background: #F5F7FA;
}
/deep/.el-table.LineAnalysisDataBJ tr:nth-child(2) th:nth-child(1n){
/* background: #fff; */
}
/deep/.el-table.LineAnalysisDataBJ tr:nth-child(2) th:nth-child(2n){
background: #F5F7FA;
}
/deep/.el-table.LineAnalysisDataBJ tr:first-child th{
background: #fff;
}
/deep/.el-table.LineAnalysisDataBJ2 tr:first-child th:nth-child(1n){
background: #F5F7FA;
}
/deep/.el-table.LineAnalysisDataBJ2 tr:first-child th:nth-child(2n){
/* background: #fff; */
}
/deep/.el-table.LineAnalysisDataBJ tr th{
height: 20px;
line-height: 20px;
padding: 5px 0;
}
/deep/.el-table.LineAnalysisDataBJ tr td{
height: 20px;
line-height: 20px;
padding: 5px 0;
}
.titleBox{
padding: 0 5px 5px 5px;
}
.row{
display: flex;
}
.echartsBox{
width: 100%;
}
</style>
src/components/FinancialModule/DataAnalysis/components/packetChart.vue 0 → 100644
View file @ 45bd848a
<template>
<div style="margin-bottom: 20px;">
<h3 class="text-center" style="margin-bottom: 5px;">出境日本线（已出团）</h3>
<h3 class="text-center" style="margin-top: 15px;margin-bottom: 5px;">日本小包团（已出团）</h3>
<h3 class="text-center" style="margin-top: 15px;margin-bottom: 5px;">日本常规团（已出团）</h3>
<h3 class="text-center" style="margin-top: 15px;margin-bottom: 5px;">常规团毛利率分析（已出团）</h3>
<h3 class="text-center" style="margin-top: 15px;margin-bottom: 5px;">常规团实际利率分析（已出团）</h3>
<h3 class="text-center" style="margin-top: 15px;margin-bottom: 5px;">常规团房费分析（已出团）</h3>
</div>
</template>
<script>
export default {
props:['StatisticalData'],
data() {
return {
MonthList: [],//月份列表
JapanAllData: [],
JapanXBData: [],
JapanSPData: [],
MaoLiAnalysisData: [],
SJLLAnalysisData: [],
RoomAnalysisData: [],
}
},
mounted() {
},
methods: {
},
watch: {
StatisticalData:{
handler(n,o){
this.MonthList = n.MonthList//月份列表
this.JapanAllData = n.JapanAllData
this.JapanXBData = n.JapanXBData
this.JapanSPData = n.JapanSPData
this.MaoLiAnalysisData = n.MaoLiAnalysisData
this.SJLLAnalysisData = n.SJLLAnalysisData
this.RoomAnalysisData = n.RoomAnalysisData
},
deep: true,
immediate: false,
}
},
}
</script>
<style scoped>
/deep/.LineAnalysisDataBJ3 tr th{
background: #F5F7FA;
}
/deep/.el-table.LineAnalysisDataBJ tr:first-child th{
background: #fff !important;
}
/deep/.el-table.LineAnalysisDataBJ tr:first-child th:first-child{
background: #F5F7FA !important;
}
/deep/.el-table.LineAnalysisDataBJ tr:nth-child(2) th:first-child{
background: #F5F7FA;
}
/deep/.el-table.LineAnalysisDataBJ tr td:first-child{
background: #F5F7FA !important;
}
/deep/.el-table.LineAnalysisDataBJ tr th{
height: 20px;
line-height: 20px;
padding: 5px 0;
}
/deep/.el-table.LineAnalysisDataBJ2 tr th{
height: 20px;
line-height: 20px;
padding: 5px 0;
}
/deep/.el-table.LineAnalysisDataBJ3 tr th{
height: 20px;
line-height: 20px;
padding: 5px 0;
}
/deep/.el-table.LineAnalysisDataBJ tr td{
height: 20px;
line-height: 20px;
padding: 5px 0;
}
/deep/.el-table.LineAnalysisDataBJ2 tr td{
height: 20px;
line-height: 20px;
padding: 5px 0;
}
/deep/.el-table.LineAnalysisDataBJ3 tr td{
height: 20px;
line-height: 20px;
padding: 5px 0;
}
</style>
src/components/FinancialModule/DataAnalysis/index.vue
View file @ 45bd848a
......@@ -130,6 +130,7 @@ export default {
components: {Lines,Corporations,Packets},
data() {
return {
coinGetShow: false,
loading: false,
activeName: 1,
msg:{
......@@ -212,7 +213,7 @@ export default {
this.coinGetShow = true
this.msg.StandardCurrencyId = -1
}
this.getPageList();
this.getStatement();
}
})
},
......
src/components/FinancialModule/DataAnalysis/indexChart.vue 0 → 100644
View file @ 45bd848a
<template>
<div style="height: 100%;">
<el-tabs v-model="msg.Type" @tab-click="handleClick">
<el-tab-pane label="线路经营情况" name="1"></el-tab-pane>
<el-tab-pane label="公司经营情况" name="2"></el-tab-pane>
<el-tab-pane label="日本小包OR常规" name="3"></el-tab-pane>
</el-tabs>
<div class="query-box">
<el-form class="_info_box clearfix" label-width="90px">
<el-row style="padding: 15px 0px 0 0">
<el-col :span="4">
<el-form-item :label="$t('system.table_company')">
<el-select
filterable
v-model="msg.OutBranchId"
@change="getChange"
clearable
>
<el-option
:value="-1"
:label="$t('pub.unlimitedSel')"
></el-option>
<el-option
v-for="item in CompanyList"
:label="item.BName"
:value="item.Id"
:key="item.Id"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="$t('fnc.bweibi')">
<el-select :disabled="coinGetShow" filterable v-model="msg.StandardCurrencyId" class @change="getChange">
<el-option :value="-1" :label="$t('pub.unlimitedSel')"></el-option>
<el-option
v-for="item in coinGetList"
:label="item.Name"
:value="item.ID"
:key="item.ID"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="线路">
<el-select filterable v-model="msg.LineId" @change="getStatement"
clearable>
<el-option
:value="0"
:label="$t('pub.unlimitedSel')"
></el-option>
<el-option
v-for="item in LineList"
:label="item.LineName"
:value="item.LineID"
:key="item.LineName"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="日期">
<el-date-picker
size="small"
v-model="dateTime"
type="monthrange"
value-format="yyyy-MM"
align="right"
range-separator="至"
start-placeholder="开始月份"
end-placeholder="结束月份"
:picker-options="pickerOptions"
@change="getDateTime"
:clearable="false">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="4" v-if="msg.Type==2">
<el-form-item label="数据类别：">
<el-select v-model="msg.DataType" filterable class="w150" @change="getStatement">
<el-option value="-1" :label="$t('pub.unlimitedSel')"></el-option>
<el-option value="1" label="团队营收"></el-option>
<el-option value="3" label="单办签证"></el-option>
<el-option value="15" label="手配费收入"></el-option>
<el-option value="16" label="单项机票"></el-option>
<el-option value="17" label="单项酒店"></el-option>
<el-option value="18" label="单项包车"></el-option>
<el-option value="19" label="单项门票"></el-option>
<el-option value="20" label="开票收入"></el-option>
<el-option value="21" label="日本手配费收入"></el-option>
<el-option value="22" label="车行收入"></el-option>
<el-option value="23" label="欧洲单团分润收入"></el-option>
<el-option value="24" label="欧洲损失分摊"></el-option>
<el-option value="25" label="CRM直客部外丟團"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="2" v-if="msg.Type!=3">
<el-form-item label="季度汇总">
<el-checkbox v-model="msg.LossType" true-label="1" false-label="0"></el-checkbox>
</el-form-item>
</el-col>
</el-row>
</el-form>
<ul class="clearfix">
<li class="hight_query">
<button class="hollowFixedBtn" @click="getStatement">
{{ $t("pub.searchBtn") }}
</button>
<button class="normalBtn" @click="exportExcel">
导出
</button>
</li>
</ul>
</div>
<div v-loading="loading" style="height: 78%;overflow: auto;">
<LinesChart v-if="activeName=='1'" :StatisticalData="StatisticalData"></LinesChart>
<CorporationsChart v-if="activeName=='2'" :StatisticalData="StatisticalData"></CorporationsChart>
<PacketsChart v-if="activeName=='3'" :StatisticalData="StatisticalData"></PacketsChart>
</div>
</div>
</template>
<script>
import LinesChart from "./components/lineChart.vue";
import CorporationsChart from "./components/corporationChart.vue";
import PacketsChart from "./components/packetChart.vue";
export default {
components: {LinesChart,CorporationsChart,PacketsChart},
data() {
return {
coinGetShow: false,
loading: false,
activeName: 1,
msg:{
startDate: '',
endDate: '',
OutBranchId: -1,
StandardCurrencyId:0,
LineId: 0,
Type: '2',
DataType:'-1',
LossType:'0'
},
dateTime: [],
CompanyList: [],
getCompanyMsg: {
// 公司
RB_Group_Id: "0",
Status: "0",
},
LineList: [],
coinGetList: [],
pickerOptions: {
shortcuts: [{
text: '本月',
onClick(picker) {
picker.$emit('pick', [new Date(), new Date()]);
}
}, {
text: '今年至今',
onClick(picker) {
const end = new Date();
const start = new Date(new Date().getFullYear(), 0);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近六个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 6);
picker.$emit('pick', [start, end]);
}
}]
},
StatisticalData: {} ,//T统计数据
}
},
mounted() {
this.getCompanyMsg.RB_Group_Id = this.getLocalStorage().RB_Group_id
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 6);
this.dateTime = [this.$commonUtils.getFormatDateM(start),this.$commonUtils.getFormatDateM(end)]
this.msg.startDate = this.dateTime[0]
this.msg.endDate = this.dateTime[1]
this.financeinfo_post_GetList()
this.getQueryData()
this.getStatement()
},
methods: {
getChange(val){
if(this.msg.OutBranchId == -1){
this.coinGetShow = false
this.msg.StandardCurrencyId = val>-1?val:this.coinGetList[0].ID
}else{
this.coinGetShow = true
this.msg.StandardCurrencyId = -1
}
this.getStatement();
},
financeinfo_post_GetList(){ // 获取币种
this.apipost('financeinfo_post_GetAllStandardCurrencyList',{}, res => {
if(res.data.resultCode == 1) {
this.coinGetList = res.data.data;
if(this.msg.OutBranchId == -1){
this.coinGetShow = false
this.msg.StandardCurrencyId = this.coinGetList[0].ID
this.msg.StandardCurrencyId=this.$route.query.StandardCurrencyId?Number(this.$route.query.StandardCurrencyId):this.msg.StandardCurrencyId;
}else{
this.coinGetShow = true
this.msg.StandardCurrencyId = -1
}
this.getStatement();
}
})
},
getStatement(){
this.loading = true
this.apipost(
"financestatistics_post_GetDataAnalysisStat",
this.msg,
res => {
if (res.data.resultCode == 1) {
this.StatisticalData = res.data.data
} else {
this.Error(res.data.message);
}
this.loading = false;
},
err => {
this.loading = false
}
);
},
handleClick(e){
this.activeName = e._props.name
this.msg.Type = e._props.name
this.getStatement()
},
getDateTime(){
if(this.dateTime&&this.dateTime.length>0){
this.msg.startDate = this.dateTime[0]
this.msg.endDate = this.dateTime[1]
}else{
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 6);
this.dateTime = [this.$commonUtils.getFormatDateM(start),this.$commonUtils.getFormatDateM(end)]
this.msg.startDate = start
this.msg.endDate = end
}
this.getStatement()
},
exportExcel(){//导出报表
let msg = {
EmployeeId: this.getLocalStorage().EmployeeId,
...this.msg
}
this.GetLocalFile("financestatistics_post_GetDataAnalysisStatToExcel", msg, '数据统计'+ this.$commonUtils.getCurrentDate() + ".xls");
},
getQueryData() {
//获取公司列表
this.apipost(
"admin_get_BranchGetList",
this.getCompanyMsg,
(res) => {
if (res.data.resultCode == 1) {
this.CompanyList = res.data.data;
} else {
}
},
(err) => {}
);
this.apipost(
"line_post_GetList", {
LineDirection: 2
},
res => {
if (res.data.resultCode == 1) {
this.LineList = res.data.data;
}
}
);
},
}
}
</script>
<style scoped>
</style>
src/router/config.js
View file @ 45bd848a
......@@ -4545,6 +4545,14 @@ export default {
title: '团队营收数据分析'
},
},
{ //财务 团队营收数据分析图表
path: '/DataAnalysisChart',
name: 'DataAnalysisChart',
component: resolve => require(['@/components/FinancialModule/DataAnalysis/indexChart'], resolve),
meta: {
title: '团队营收数据分析图表'
},
},
{ //金蝶对接 金蝶币种
path: '/KingdeeCurrency',
name: 'KingdeeCurrency',
......
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