Commit 801a6138 authored by 黄奎's avatar 黄奎

页面修改

parent bd908ab0
...@@ -34,7 +34,6 @@ ...@@ -34,7 +34,6 @@
margin: 25px 0 0 80px; margin: 25px 0 0 80px;
color: #E95252; color: #E95252;
} }
</style> </style>
<template> <template>
...@@ -53,78 +52,76 @@ ...@@ -53,78 +52,76 @@
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<div class="el-col-div ownScrollbarStyle PersonalData_l"> <div class="el-col-div ownScrollbarStyle PersonalData_l">
<!-- <rightHead :pagesTitle="1"></rightHead> -->
<div class="l_top" style="position: relative;"> <div class="l_top" style="position: relative;">
<img v-if="data.icon !=null && data.icon !='' " :src="data.icon" alt="" class="tx_img" <img v-if="data.icon !=null && data.icon !='' " :src="data.icon" alt="" class="tx_img"
:onerror='defaultHeadImg'> :onerror='defaultHeadImg'>
<img v-else src="../../assets/img/default_head_img.jpg" alt="" alt="" class="tx_img"> <img v-else src="../../assets/img/default_head_img.jpg" alt="" class="tx_img">
<div class="p_name"> <div class="p_name">
<span>{{data.emName}}</span> <span>{{data.emName}}</span>
<span>{{data.postName}}</span> <span>{{data.postName}}</span>
<div @click="goAnticipate(5)" style="cursor: pointer;"> <div @click="goAnticipate(5)" style="cursor: pointer;">
<div v-if="SumPreferPrice" style="padding: 2px 0 0 0;"><a style="color: #666666;font-size: 14px;font-weight: bold;">{{SumPreferPrice}}</a></div> <div v-if="SumPreferPrice" style="padding: 2px 0 0 0;"><a
style="color: #666666;font-size: 14px;font-weight: bold;">{{SumPreferPrice}}</a></div>
<div style="font-size: 14px;color: #333333;" v-if="rankingNum"> <div style="font-size: 14px;color: #333333;" v-if="rankingNum">
<a style="color: #FF8C00;margin-left: 3px;margin-right: 3px; <a style="color: #FF8C00;margin-left: 3px;margin-right: 3px;
font-size: 18px;font-weight: bold;">{{rankingNum}}</a font-size: 18px;font-weight: bold;">{{rankingNum}}</a>
>
</div> </div>
</div> </div>
</div> </div>
<div style="display: flex;justify-content: space-between;"> <div style="display: flex;justify-content: space-between;">
<!-- <img style="cursor: pointer;" src="../../assets/img/jinbin@2x.png" alt="" class="img" @click="goAnticipate(1)"> --> <div style="cursor: pointer;cursor: pointer;position: relative;" class="royalty"
<div style="cursor: pointer;cursor: pointer;position: relative;" class="royalty" @click="goAnticipate(1)"> @click="goAnticipate(1)">
<div class="tc"> <div class="tc">
<p> <p>
<span></span> <span></span>
<span>{{data.totalCommission}}</span> <span>{{data.totalCommission}}</span>
</p> </p>
<p style="color: #BDBDBD;font-size: 13px;padding: 0 0 5px 0;">{{data.periodsName}}<el-tag <p style="color: #BDBDBD;font-size: 13px;padding: 0 0 5px 0;">{{data.periodsName}}<el-tag
v-if="data.peopelBonus" size="mini" type="danger" v-if="data.peopelBonus" size="mini" type="danger" effect="dark"
effect="dark" style="color: #ffff;position: absolute;left: 70px;bottom: 23px;font-size: 11px;">奖+{{data.peopelBonus}}</el-tag></p> style="color: #ffff;position: absolute;left: 70px;bottom: 23px;font-size: 11px;">
</div> 奖+{{data.peopelBonus}}</el-tag>
<div stye="font-size: 16px;color: #666666;display: block;display: inline-block;"> </p>
<span>出境提成</span> </div>
<template v-if="data.comissionGeneralId>0"> <div stye="font-size: 16px;color: #666666;display: block;display: inline-block;">
<span v-if="data.share==1" class="Sale_Share" style="color:#333;cursor:default;">已确认</span> <span>出境提成</span>
<span v-if="data.share==0" @click="tichengDialog=true" class="Sale_Share" <template v-if="data.comissionGeneralId>0">
:class="{'ShareDisClick':!isSubmit}">分享并确认</span> <span v-if="data.share==1" class="Sale_Share" style="color:#333;cursor:default;">已确认</span>
</template> <span v-if="data.share==0" @click="tichengDialog=true" class="Sale_Share"
</div> :class="{'ShareDisClick':!isSubmit}">分享并确认</span>
</div> </template>
<div style="border-left: 1px solid #eeeeee;width: 1px;"> </div> </div>
<!-- <img style="cursor: pointer;" src="../../assets/img/jinbin@2x.png" alt="" class="img" @click="goAnticipate(2)"> -->
<div style="cursor: pointer;margin-left: 0;" class="royalty" @click="goAnticipate(2)">
<div class="tc">
<p>
<span></span>
<span>{{data.gnSaleCommission}}</span>
</p>
<p style="color: #BDBDBD;font-size: 13px;padding: 0 0 5px 0;">{{data.gnPeriodsName}}期</p>
</div>
<div stye="font-size: 16px;color: #666666;display: block;display: inline-block;">
<span>国内提成</span>
</div> </div>
</div> <div style="border-left: 1px solid #eeeeee;width: 1px;"> </div>
<div style="border-left: 1px solid #eeeeee;width: 1px;"> </div> <div style="cursor: pointer;margin-left: 0;" class="royalty" @click="goAnticipate(2)">
<!-- <img style="cursor: pointer;" src="../../assets/img/jinbin@2x.png" alt="" class="img" @click="goAnticipate(3)"> --> <div class="tc">
<div style="cursor: pointer;margin-left: 0;" class="royalty" @click="goAnticipate(3)"> <p>
<div class="tc"> <span></span>
<p> <span>{{data.gnSaleCommission}}</span>
<span></span> </p>
<span>{{data.dxSaleCommission}}</span> <p style="color: #BDBDBD;font-size: 13px;padding: 0 0 5px 0;">{{data.gnPeriodsName}}期</p>
</p> </div>
<p style="color: #BDBDBD;font-size: 13px;padding: 0 0 5px 0;">{{data.dxPeriodsName}}期</p> <div stye="font-size: 16px;color: #666666;display: block;display: inline-block;">
<span>国内提成</span>
</div>
</div> </div>
<div stye="font-size: 16px;color: #666666;display: block;display: inline-block;"> <div style="border-left: 1px solid #eeeeee;width: 1px;"> </div>
<span>历史单项提成</span> <div style="cursor: pointer;margin-left: 0;" class="royalty" @click="goAnticipate(3)">
<div class="tc">
<p>
<span></span>
<span>{{data.dxSaleCommission}}</span>
</p>
<p style="color: #BDBDBD;font-size: 13px;padding: 0 0 5px 0;">{{data.dxPeriodsName}}期</p>
</div>
<div stye="font-size: 16px;color: #666666;display: block;display: inline-block;">
<span>历史单项提成</span>
</div>
</div> </div>
</div>
<el-tooltip class="item" effect="dark" content="预期提成" placement="top"> <el-tooltip class="item" effect="dark" content="预期提成" placement="top">
<img src="../../assets/img/xiaosouYQ.png" @click="goAnticipate(4)" <img src="../../assets/img/xiaosouYQ.png" @click="goAnticipate(4)"
style="width: 20px;height: auto; position: absolute;right: -0;top: -13px;cursor: pointer;color: #33B3FF;"></img> style="width: 20px;height: auto; position: absolute;right: -0;top: -13px;cursor: pointer;color: #33B3FF;"></img>
</el-tooltip> </el-tooltip>
</div> </div>
</div> </div>
...@@ -149,10 +146,7 @@ ...@@ -149,10 +146,7 @@
</div> </div>
<div style="width: 100%;margin-top: 20px;text-align: center" <div style="width: 100%;margin-top: 20px;text-align: center"
v-show="data.orderInfo ==null || data.orderInfo.length == 0">暂无数据</div> v-show="data.orderInfo ==null || data.orderInfo.length == 0">暂无数据</div>
</div> </div>
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -174,7 +168,6 @@ ...@@ -174,7 +168,6 @@
</div> </div>
<i class="iconfont icon-tuoyuan" /> <i class="iconfont icon-tuoyuan" />
</div> </div>
<div class="c_view view_t"> <div class="c_view view_t">
<div class="semicircle_t"></div> <div class="semicircle_t"></div>
<div class="view_c"> <div class="view_c">
...@@ -186,7 +179,6 @@ ...@@ -186,7 +179,6 @@
</div> </div>
<i class="iconfont icon-xingzhuang2" /> <i class="iconfont icon-xingzhuang2" />
</div> </div>
<div class="c_view view_t"> <div class="c_view view_t">
<div class="semicircle_t"></div> <div class="semicircle_t"></div>
<div class="view_c"> <div class="view_c">
...@@ -198,7 +190,6 @@ ...@@ -198,7 +190,6 @@
<i class="iconfont icon-xingzhuang4" id="xzts" /> <i class="iconfont icon-xingzhuang4" id="xzts" />
</div> </div>
</div> </div>
<div class="r_box_b"> <div class="r_box_b">
<div class="c_view view_b"> <div class="c_view view_b">
<div class="semicircle_b"></div> <div class="semicircle_b"></div>
...@@ -224,7 +215,6 @@ ...@@ -224,7 +215,6 @@
</div> </div>
<div class="c_view view_b"> <div class="c_view view_b">
<div class="semicircle_b"></div> <div class="semicircle_b"></div>
<div class="view_c"> <div class="view_c">
<span>今日询单</span> <span>今日询单</span>
<div class="view-f"> <div class="view-f">
...@@ -377,7 +367,6 @@ ...@@ -377,7 +367,6 @@
</div> </div>
<div class="r_name"> <div class="r_name">
<span>待处理发票</span> <span>待处理发票</span>
<el-badge class="tishi" :value="data.invoiceApplyCount?data.invoiceApplyCount:'0'" /> <el-badge class="tishi" :value="data.invoiceApplyCount?data.invoiceApplyCount:'0'" />
</div> </div>
</div> </div>
...@@ -387,9 +376,7 @@ ...@@ -387,9 +376,7 @@
</div> </div>
<div class="r_name"> <div class="r_name">
<span>公告</span> <span>公告</span>
<el-badge class="tishi" :value="data.noticeCount?data.noticeCount:'0'" /> <el-badge class="tishi" :value="data.noticeCount?data.noticeCount:'0'" />
</div> </div>
</div> </div>
</div> </div>
...@@ -410,7 +397,6 @@ ...@@ -410,7 +397,6 @@
<span>今日总收客人数</span> <span>今日总收客人数</span>
<span>{{groupdata.toDayGuestCount}}<span class="p_dw"></span></span> <span>{{groupdata.toDayGuestCount}}<span class="p_dw"></span></span>
</div> </div>
<div class="g_icon g_bms"> <div class="g_icon g_bms">
<i class="iconfont icon-clipboard" style="color: #00B26F"></i> <i class="iconfont icon-clipboard" style="color: #00B26F"></i>
</div> </div>
...@@ -418,7 +404,6 @@ ...@@ -418,7 +404,6 @@
<span>今日总报名单数</span> <span>今日总报名单数</span>
<span>{{groupdata.toDayOrderCount}}<span class="p_dw"></span></span> <span>{{groupdata.toDayOrderCount}}<span class="p_dw"></span></span>
</div> </div>
<div class="g_icon g_skuan"> <div class="g_icon g_skuan">
<i class="iconfont icon-graph" style="color: #FF7B8A"></i> <i class="iconfont icon-graph" style="color: #FF7B8A"></i>
</div> </div>
...@@ -607,14 +592,14 @@ ...@@ -607,14 +592,14 @@
return { return {
tichengDialog: false, tichengDialog: false,
PMMsg: { PMMsg: {
RB_Branch_Id: -1, RB_Branch_Id: -1,
RB_Department_Id: 0, RB_Department_Id: 0,
EnterID: 0, EnterID: 0,
tStartDates: [], tStartDates: [],
qStartDates: [], qStartDates: [],
GroupBy: "EnterID", GroupBy: "EnterID",
QueryType: 0, QueryType: 0,
}, },
SumPreferPrice: 0, SumPreferPrice: 0,
rankingNum: 0, rankingNum: 0,
type: 1, type: 1,
...@@ -647,20 +632,19 @@ ...@@ -647,20 +632,19 @@
CurrentUserInfo: {}, CurrentUserInfo: {},
EditBtn: false, EditBtn: false,
PMMsg: { PMMsg: {
RB_Branch_Id: -1, RB_Branch_Id: -1,
RB_Department_Id: 0, RB_Department_Id: 0,
EnterID: 0, EnterID: 0,
tStartDates: [], tStartDates: [],
qStartDates: [], qStartDates: [],
GroupBy: "EnterID", GroupBy: "EnterID",
QueryType: 0, QueryType: 0,
}, },
} }
}, },
components: { components: {
leftNav, leftNav,
}, },
watch: { watch: {
screenWidth(val) { screenWidth(val) {
this.screenWidth = val; this.screenWidth = val;
...@@ -670,18 +654,18 @@ ...@@ -670,18 +654,18 @@
}, },
methods: { methods: {
// 销售预期提成 // 销售预期提成
goAnticipate(type){ goAnticipate(type) {
let userInfo = this.getLocalStorage(); let userInfo = this.getLocalStorage();
let name let name
if(type==1){//出境 if (type == 1) { //出境
name = 'TradeTicketUserDetails' name = 'TradeTicketUserDetails'
}else if(type==2){//国内 } else if (type == 2) { //国内
name = 'domesticCommissionUser' name = 'domesticCommissionUser'
}else if(type==3){//历史单项 } else if (type == 3) { //历史单项
name = 'ServiceCommissionUser' name = 'ServiceCommissionUser'
}else if(type==4){//预期提成 } else if (type == 4) { //预期提成
name = 'saleExpectedCommission' name = 'saleExpectedCommission'
}else if(type==5){//排名 } else if (type == 5) { //排名
name = 'salesVolumeRank' name = 'salesVolumeRank'
this.$router.push({ this.$router.push({
name: name, name: name,
...@@ -691,7 +675,7 @@ ...@@ -691,7 +675,7 @@
} }
}); });
} }
if(type!=5&&name){ if (type != 5 && name) {
this.$router.push({ this.$router.push({
name: name, name: name,
query: { query: {
...@@ -701,66 +685,53 @@ ...@@ -701,66 +685,53 @@
} }
}); });
} }
}, },
settStartDates() { settStartDates() {
let nowdays = new Date() let nowdays = new Date()
let Year = new Date().getFullYear() let Year = new Date().getFullYear()
let MonthTime = new Date().getMonth() + 1 let MonthTime = new Date().getMonth() + 1
let MonthDayNum = new Date(Year, 12, 0).getDate(); let MonthDayNum = new Date(Year, 12, 0).getDate();
let date = Year+'-12-'+(MonthDayNum>10?MonthDayNum:'0'+MonthDayNum) let date = Year + '-12-' + (MonthDayNum > 10 ? MonthDayNum : '0' + MonthDayNum)
let start = Year+'-01-01' let start = Year + '-01-01'
this.PMMsg.tStartDates = [start, date] this.PMMsg.tStartDates = [start, date]
}, },
initData() { initData() {
let userInfo = this.getLocalStorage(); let userInfo = this.getLocalStorage();
let param = { let param = {
RB_Branch_Id: RB_Branch_Id: this.PMMsg.RB_Branch_Id == -1 ? null : this.PMMsg.RB_Branch_Id,
this.PMMsg.RB_Branch_Id == -1 ? null : this.PMMsg.RB_Branch_Id, RB_Department_Id: this.PMMsg.RB_Department_Id == 0 ? null : this.PMMsg.RB_Department_Id,
RB_Department_Id: EnterID: this.PMMsg.EnterID == 0 ? null : this.PMMsg.EnterID, //Number(userInfo.EmployeeId)
this.PMMsg.RB_Department_Id == 0 ? null : this.PMMsg.RB_Department_Id, QStartDate: this.PMMsg.tStartDates && this.PMMsg.tStartDates.length == 2 ?
EnterID: this.PMMsg.EnterID == 0 ? null : this.PMMsg.EnterID,//Number(userInfo.EmployeeId) this.PMMsg.tStartDates[0] : null,
QStartDate: QEndDate: this.PMMsg.tStartDates && this.PMMsg.tStartDates.length == 2 ?
this.PMMsg.tStartDates && this.PMMsg.tStartDates.length == 2 this.PMMsg.tStartDates[1] : null,
? this.PMMsg.tStartDates[0] CStartDate: this.PMMsg.qStartDates && this.PMMsg.qStartDates.length == 2 ?
: null, this.PMMsg.qStartDates[0] : null,
QEndDate: CEndDate: this.PMMsg.qStartDates && this.PMMsg.qStartDates.length == 2 ?
this.PMMsg.tStartDates && this.PMMsg.tStartDates.length == 2 this.PMMsg.qStartDates[1] : null,
? this.PMMsg.tStartDates[1] GroupBy: this.PMMsg.GroupBy,
: null, QueryType: this.PMMsg.QueryType,
CStartDate: };
this.PMMsg.qStartDates && this.PMMsg.qStartDates.length == 2 if (!param.QStartDate) {
? this.PMMsg.qStartDates[0] param.QStartDate = "2019-01-01";
: null, }
CEndDate: let tableData = []
this.PMMsg.qStartDates && this.PMMsg.qStartDates.length == 2 this.apipost("sellorder_get_sellvolumerankNew", param, (r) => {
? this.PMMsg.qStartDates[1] r.data.data.forEach((x) => {
: null, x.incomeVal = parseFloat(x.income);
GroupBy: this.PMMsg.GroupBy, x.avgPrice = parseFloat(x.avgPrice);
QueryType: this.PMMsg.QueryType,
};
if (!param.QStartDate) {
param.QStartDate = "2019-01-01";
}
let tableData = []
this.apipost("sellorder_get_sellvolumerankNew", param, (r) => {
r.data.data.forEach((x) => {
x.incomeVal = parseFloat(x.income);
x.avgPrice = parseFloat(x.avgPrice);
});
tableData = r.data.data;
tableData.forEach((item,index)=>{
if(item.EnterID==Number(userInfo.EmployeeId)){
this.rankingNum = index+1
this.SumPreferPrice = item.SumPreferPrice
}
})
}); });
}, tableData = r.data.data;
tableData.forEach((item, index) => {
//锅炉除开标点符号的字数 if (item.EnterID == Number(userInfo.EmployeeId)) {
this.rankingNum = index + 1
this.SumPreferPrice = item.SumPreferPrice
}
})
});
},
//过滤除开标点符号的字数
getFilteredNum(val) { getFilteredNum(val) {
//var pattern=new RegExp("[`~%!@#$^=''?~!@#¥……&——‘”“'?*()(),,。.、<>《》\\[\\]【】\\“\\”{}=+-|\/:;;:]");
var pattern = new RegExp("[`~%!@#$^=''?~!@#¥……&——‘”“'?*()(),,。.、<>《》:;; +-=\\s]"); var pattern = new RegExp("[`~%!@#$^=''?~!@#¥……&——‘”“'?*()(),,。.、<>《》:;; +-=\\s]");
//[]内输入你要过滤的字符,这里基本包含全部的标点符号,\\是转义字符 //[]内输入你要过滤的字符,这里基本包含全部的标点符号,\\是转义字符
var rs = ""; var rs = "";
...@@ -821,87 +792,89 @@ ...@@ -821,87 +792,89 @@
item['fen'] = 'S' item['fen'] = 'S'
} }
}) })
let evaluate = this.$echarts.init(document.getElementById('evaluate')) var evaluateObj = document.getElementById('evaluate');
evaluate.setOption({ if (evaluateObj) {
let evaluate = this.$echarts.init(evaluateObj)
tooltip: { evaluate.setOption({
trigger: 'axis', tooltip: {
axisPointer: { // 坐标轴指示器,坐标轴触发有效 trigger: 'axis',
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' axisPointer: { // 坐标轴指示器,坐标轴触发有效
} type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
radar: [{
name: {
formatter: function (value, indicator) {
return value + '\n' + indicator.fen
}
},
splitArea: {
show: false
},
splitLine: {
lineStyle: {
color: ['#BCBFFF', '#BCBFFF']
} }
}, },
indicator: [{ radar: [{
text: this.myScore[0].name, name: {
max: 100, formatter: function (value, indicator) {
fen: this.myScore[0].fen return value + '\n' + indicator.fen
}, }
{
text: this.myScore[1].name,
max: 100,
fen: this.myScore[1].fen
},
{
text: this.myScore[2].name,
max: 100,
fen: this.myScore[2].fen
}, },
{ splitArea: {
text: this.myScore[3].name, show: false
max: 100,
fen: this.myScore[3].fen
}, },
{ splitLine: {
text: this.myScore[4].name, lineStyle: {
max: 100, color: ['#BCBFFF', '#BCBFFF']
fen: this.myScore[4].fen }
}, },
{ indicator: [{
text: this.myScore[5].name, text: this.myScore[0].name,
max: 100, max: 100,
fen: this.myScore[5].fen fen: this.myScore[0].fen
} },
], {
}, ], text: this.myScore[1].name,
series: [{ max: 100,
type: 'radar', fen: this.myScore[1].fen
tooltip: { },
trigger: 'item' {
}, text: this.myScore[2].name,
itemStyle: { max: 100,
normal: { fen: this.myScore[2].fen
areaStyle: { },
type: 'default' {
text: this.myScore[3].name,
max: 100,
fen: this.myScore[3].fen
},
{
text: this.myScore[4].name,
max: 100,
fen: this.myScore[4].fen
},
{
text: this.myScore[5].name,
max: 100,
fen: this.myScore[5].fen
} }
}
},
data: [{
value: [this.myScore[0].score, this.myScore[1].score, this.myScore[2].score, this
.myScore[3].score, this.myScore[4].score, this.myScore[5].score
], ],
}, ],
series: [{
type: 'radar',
tooltip: {
trigger: 'item'
},
itemStyle: { itemStyle: {
normal: { normal: {
color: '#487DE9' areaStyle: {
type: 'default'
}
} }
}, },
name: '我的评价' data: [{
}, ], value: [this.myScore[0].score, this.myScore[1].score, this.myScore[2].score, this
radius: 60 .myScore[3].score, this.myScore[4].score, this.myScore[5].score
}, ] ],
}); itemStyle: {
normal: {
color: '#487DE9'
}
},
name: '我的评价'
}, ],
radius: 60
}, ]
});
}
} else { } else {
this.$message.error(res.data.message) this.$message.error(res.data.message)
} }
...@@ -923,80 +896,83 @@ ...@@ -923,80 +896,83 @@
}, },
drawLine(OrderList) { drawLine(OrderList) {
// 基于准备好的dom,初始化echarts实例 // 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart')) var chatObj = document.getElementById('myChart');
let dataname = []; if (chatObj) {
let bzdata = []; let myChart = this.$echarts.init(chatObj)
let szdata = []; let dataname = [];
for (var i = 0; i < OrderList.length; i++) { let bzdata = [];
if (i < 10) { let szdata = [];
dataname.push(OrderList[i].branchName + '\n' + OrderList[i].departmentName) for (var i = 0; i < OrderList.length; i++) {
bzdata.push(OrderList[i].nowWeekGuest) if (i < 10) {
szdata.push(OrderList[i].nowLastWeekGuest) dataname.push(OrderList[i].branchName + '\n' + OrderList[i].departmentName)
bzdata.push(OrderList[i].nowWeekGuest)
szdata.push(OrderList[i].nowLastWeekGuest)
}
} }
} // 绘制图表
// 绘制图表 myChart.setOption({
myChart.setOption({ title: '',
title: '', tooltip: {},
tooltip: {}, legend: {
legend: { x: 'center',
x: 'center', data: ['本周收客', '上周收客', ]
data: ['本周收客', '上周收客', ]
},
xAxis: {
data: dataname,
triggerEvent: true,
axisLabel: {
fontSize: 9, //设置x轴标签的字体大小
interval: 0 //设置标签x的名称 0为显示所有 1为间隔一个显示
},
axisTick: {
interval: 0
}, },
nameTextStyle: {} xAxis: {
}, data: dataname,
yAxis: { triggerEvent: true,
name: '收客数', axisLabel: {
nameLocation: 'end', //坐标轴名称显示位置。 fontSize: 9, //设置x轴标签的字体大小
splitLine: { interval: 0 //设置标签x的名称 0为显示所有 1为间隔一个显示
show: true, },
lineStyle: { axisTick: {
type: 'dashed' interval: 0
} },
}, nameTextStyle: {}
axisTick: {
show: false
}, },
axisLine: { yAxis: {
show: false name: '收客数',
} nameLocation: 'end', //坐标轴名称显示位置。
}, splitLine: {
series: [{ show: true,
type: 'bar', lineStyle: {
name: '本周收客', type: 'dashed'
barGap: '-100%',
data: bzdata,
z: 11,
itemStyle: {
normal: {
color: '#1698FD',
} }
}, },
barWidth: 20 axisTick: {
show: false
},
axisLine: {
show: false
}
}, },
{ series: [{
type: 'bar', type: 'bar',
name: '上周收客', name: '本周收客',
data: szdata, barGap: '-100%',
z: 10, data: bzdata,
itemStyle: { z: 11,
normal: { itemStyle: {
color: '#7FEFEF' normal: {
} color: '#1698FD',
}
},
barWidth: 20
}, },
barWidth: 20 {
} type: 'bar',
] name: '上周收客',
}); data: szdata,
z: 10,
itemStyle: {
normal: {
color: '#7FEFEF'
}
},
barWidth: 20
}
]
});
}
}, },
Financial_post_GetNotDealCount() { Financial_post_GetNotDealCount() {
this.apipost( this.apipost(
...@@ -1055,5 +1031,4 @@ ...@@ -1055,5 +1031,4 @@
this.Financial_post_GetNotDealCount(); //待处理财务单据的个数 this.Financial_post_GetNotDealCount(); //待处理财务单据的个数
}, },
} }
</script>
</script> \ No newline at end of file
<style> <style>
.informationList { .informationList {
position: absolute; position: absolute;
left: 330px; left: 330px;
right: 0px; right: 0px;
top: 30px; top: 30px;
bottom: 30px; bottom: 30px;
} }
.informationList .LeftSide { .informationList .LeftSide {
float: left; float: left;
width: 45%; width: 45%;
position: relative; position: relative;
height: 100%; height: 100%;
} }
.informationList .rightSide { .informationList .rightSide {
float: left; float: left;
margin-left: 30px; margin-left: 30px;
width: 50%; width: 50%;
position: relative; position: relative;
height: 100%; height: 100%;
} }
.informationList .TopList { .informationList .TopList {
border: 1px solid #d9d9d9; border: 1px solid #d9d9d9;
background-color: #fff; background-color: #fff;
box-shadow: 2px 0px 10px rgba(217, 217, 217, 1); box-shadow: 2px 0px 10px rgba(217, 217, 217, 1);
min-width: 466px; min-width: 466px;
} }
.informationList .todayOrder { .informationList .todayOrder {
color: #333333; color: #333333;
padding-top: 25px; padding-top: 25px;
padding-bottom: 15px; padding-bottom: 15px;
border-bottom: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5;
margin: 0 20px; margin: 0 20px;
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
} }
.informationList .orderList {
text-align: center;
width: 78px;
font-size: 14px;
color: #333333;
float: left;
margin-right: 20px;
}
.informationList .circle {
width: 70px;
height: 70px;
text-align: center;
line-height: 62px;
border-radius: 50%;
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}
.informationList .circleList {
width: 100%;
margin: 20px 0 20px 27px;
}
.informationList .cirHotel {
border: 4px solid #4cc0fc;
color: #2aaef2;
background-color: #f1faff;
}
.informationList .cirRes {
border: 4px solid #8fecf9;
color: #6edbea;
background-color: #f3feff;
}
.informationList .cirPiao {
border: 4px solid #69d5a7;
color: #47bf8c;
background-color: #f2fff9;
}
.informationList .cirPiaojuan {
border: 4px solid #ffc748;
color: #ffba1f;
background-color: #fff8e9;
}
.informationList .cirCar {
border: 4px solid #fe9466;
color: #ff793e;
background-color: #fff2ec;
}
.informationList .cirLeader {
border: 4px solid #fc7979;
color: #e85252;
background-color: #ffefef;
}
.informationList .charts {
height: 330px;
border: 1px solid #e8eae7;
box-shadow: 2px 0px 10px rgba(217, 217, 217, 1);
background-color: #fff;
}
.informationList .demandState {
height: 470px;
min-width: 466px;
border: 1px solid #e8eae7;
background-color: #fff;
box-shadow: 2px 0px 10px rgba(217, 217, 217, 1);
background-color: #fff;
overflow: hidden;
position: absolute;
left: 0px;
top: 238px;
bottom: 0px;
}
.informationList .damandType {
display: inline-block;
color: #333333;
font-size: 14px;
font-weight: bold;
margin: 20px 0 0 30px;
}
.informationList .damandBtn {
float: right;
margin: 20px 30px 0 0;
}
.informationList .demandState table {
height: calc(100% - 115px);
}
.informationList table tbody {
display: block;
overflow-y: scroll;
height: calc(100% - 40px);
}
.informationList table thead,
.informationList tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
/* .informationList table thead {width: calc( 100% - 1em )} */
.informationList table thead th {
background: #f2f2f2;
}
.informationList table tbody::-webkit-scrollbar {
width: 4px;
height: 8px;
}
.informationList table tbody::-webkit-scrollbar-thumb {
border-radius: 4px;
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
background: #c9c9c9;
}
/* .informationList table tbody::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);border-radius: 4px;background: #EDEDED;} */
.informationList .el-radio-button__inner {
font-size: 12px;
padding: 5px 9px;
}
.botmList {
text-align: right;
font-size: 12px;
margin: 30px 0 20px 0;
}
.botmList > div {
display: inline-block;
margin-right: 20px;
}
.informationList .commonSty {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 10px;
}
.informationList .cirOne {
background-color: #e85252;
}
.informationList .cirTwo {
background-color: #ff793e;
}
.informationList .cirThr {
background-color: #47bf8c;
}
.informationList .cirFou {
background-color: #cccccc;
}
.informationList .StatusTitle {
width: 150px;
overflow: hidden;
text-overflow: ellipsis;
line-height: 40px;
white-space: nowrap;
padding-left: 10px;
-webkit-box-orient: vertical;
text-align: left;
}
.test-1::-webkit-scrollbar {
width: 0px;
height: 0px;
background-color: #f5f5f5;
}
.test-1::-webkit-scrollbar-track {
background-color: #f5f5f5;
}
.test-1::-webkit-scrollbar-thumb {
border-radius: 20px;
background-color: #aaa;
margin-bottom: 24px;
}
.informationList .singeRowTable {
margin: 0 4px 30px 0;
}
.informationList .circleAll {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
}
.informationList .el-button + .el-button {
margin-left: -5px;
}
.informationList .inventory {
border: 1px solid #e8eae7;
background-color: #fff;
position: absolute;
left: 0px;
right: 0px;
top: 358px;
bottom: 0px;
height: 350px;
}
.informationList .lastD > div {
display: inline-block;
margin-right: 10px;
font-size: 12px;
}
.informationList .inventoryBtm {
display: flex;
padding: 20px;
width: 100%;
box-sizing: border-box;
}
.informationList .inventoryBtm > div {
border: 1px solid #eeeeee;
background-color: #fff;
text-align: center;
padding: 10px 0;
flex: 1;
min-height: 260px;
border-right: 0;
}
.informationList .inventoryBtm > div:last-child {
border-right: 1px solid #eeeeee;
}
.informationList .invnTitle {
font-size: 16px;
color: #333333;
font-weight: bold;
display: inline-block;
margin-top: 20px;
}
.informationList .invenCircle {
width: 104px;
height: 104px;
border-radius: 50%;
margin: 20px auto;
font-size: 36px;
color: #fff;
text-align: center;
line-height: 95px;
}
.informationList .inventOne {
background-color: #ef5e5e;
border: 6px solid #ffd0d0;
}
.informationList .inventTwo {
background-color: #ff793e;
border: 6px solid #ffc2a7;
}
.informationList .inventThr {
background-color: #47bf8c;
border: 6px solid #84ecc0;
}
.informationList .EveryDayCount {
margin-left: 5px;
}
.informationList .lastDiv {
font-size: 14px;
}
.informationList .dataTable {
width: 100%;
height: 400px;
}
.informationList .damandBtnDay li {
width: 60px;
height: 24px;
font-size: 12px;
color: #666666;
display: inline-block;
text-align: center;
line-height: 24px;
border-radius: 4px;
border: 1px solid #e3e3e3;
cursor: pointer;
}
.informationList .damandBtnDay li:nth-child(1) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.informationList .damandBtnDay li:nth-child(2) {
position: relative;
left: -6px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.informationList .damandBtnDay_active {
background-color: #e8eae7;
}
@media (max-width: 1366px) {
.informationList .orderList { .informationList .orderList {
width: auto; text-align: center;
width: 78px;
font-size: 14px;
color: #333333;
float: left;
margin-right: 20px;
} }
.informationList .circle { .informationList .circle {
width: 50px; width: 70px;
height: 50px; height: 70px;
line-height: 45px; text-align: center;
line-height: 62px;
border-radius: 50%;
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}
.informationList .circleList {
width: 100%;
margin: 20px 0 20px 27px;
}
.informationList .cirHotel {
border: 4px solid #4cc0fc;
color: #2aaef2;
background-color: #f1faff;
}
.informationList .cirRes {
border: 4px solid #8fecf9;
color: #6edbea;
background-color: #f3feff;
}
.informationList .cirPiao {
border: 4px solid #69d5a7;
color: #47bf8c;
background-color: #f2fff9;
}
.informationList .cirPiaojuan {
border: 4px solid #ffc748;
color: #ffba1f;
background-color: #fff8e9;
}
.informationList .cirCar {
border: 4px solid #fe9466;
color: #ff793e;
background-color: #fff2ec;
}
.informationList .cirLeader {
border: 4px solid #fc7979;
color: #e85252;
background-color: #ffefef;
}
.informationList .charts {
height: 330px;
border: 1px solid #e8eae7;
box-shadow: 2px 0px 10px rgba(217, 217, 217, 1);
background-color: #fff;
}
.informationList .demandState {
height: 470px;
min-width: 466px;
border: 1px solid #e8eae7;
background-color: #fff;
box-shadow: 2px 0px 10px rgba(217, 217, 217, 1);
background-color: #fff;
overflow: hidden;
position: absolute;
left: 0px;
top: 238px;
bottom: 0px;
}
.informationList .damandType {
display: inline-block;
color: #333333;
font-size: 14px; font-size: 14px;
font-weight: bold;
margin: 20px 0 0 30px;
} }
.informationList .TopList { .informationList .damandBtn {
height: 210px; float: right;
margin: 20px 30px 0 0;
}
.informationList .demandState table {
height: calc(100% - 115px);
}
.informationList table tbody {
display: block;
overflow-y: scroll;
height: calc(100% - 40px);
}
.informationList table thead,
.informationList tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
/* .informationList table thead {width: calc( 100% - 1em )} */
.informationList table thead th {
background: #f2f2f2;
}
.informationList table tbody::-webkit-scrollbar {
width: 4px;
height: 8px;
}
.informationList table tbody::-webkit-scrollbar-thumb {
border-radius: 4px;
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
background: #c9c9c9;
}
/* .informationList table tbody::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);border-radius: 4px;background: #EDEDED;} */
.informationList .el-radio-button__inner {
font-size: 12px;
padding: 5px 9px;
}
.botmList {
text-align: right;
font-size: 12px;
margin: 30px 0 20px 0;
}
.botmList>div {
display: inline-block;
margin-right: 20px;
}
.informationList .commonSty {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 10px;
}
.informationList .cirOne {
background-color: #e85252;
}
.informationList .cirTwo {
background-color: #ff793e;
}
.informationList .cirThr {
background-color: #47bf8c;
}
.informationList .cirFou {
background-color: #cccccc;
}
.informationList .StatusTitle {
width: 150px;
overflow: hidden;
text-overflow: ellipsis;
line-height: 40px;
white-space: nowrap;
padding-left: 10px;
-webkit-box-orient: vertical;
text-align: left;
}
.test-1::-webkit-scrollbar {
width: 0px;
height: 0px;
background-color: #f5f5f5;
}
.test-1::-webkit-scrollbar-track {
background-color: #f5f5f5;
}
.test-1::-webkit-scrollbar-thumb {
border-radius: 20px;
background-color: #aaa;
margin-bottom: 24px;
}
.informationList .singeRowTable {
margin: 0 4px 30px 0;
}
.informationList .circleAll {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
}
.informationList .el-button+.el-button {
margin-left: -5px;
}
.informationList .inventory {
border: 1px solid #e8eae7;
background-color: #fff;
position: absolute;
left: 0px;
right: 0px;
top: 358px;
bottom: 0px;
height: 350px;
}
.informationList .lastD>div {
display: inline-block;
margin-right: 10px;
font-size: 12px;
}
.informationList .inventoryBtm {
display: flex;
padding: 20px;
width: 100%;
box-sizing: border-box;
}
.informationList .inventoryBtm>div {
border: 1px solid #eeeeee;
background-color: #fff;
text-align: center;
padding: 10px 0;
flex: 1;
min-height: 260px;
border-right: 0;
}
.informationList .inventoryBtm>div:last-child {
border-right: 1px solid #eeeeee;
}
.informationList .invnTitle {
font-size: 16px;
color: #333333;
font-weight: bold;
display: inline-block;
margin-top: 20px;
} }
.informationList .invenCircle { .informationList .invenCircle {
width: 80px; width: 104px;
height: 80px; height: 104px;
line-height: 70px; border-radius: 50%;
margin: 20px auto;
font-size: 36px;
color: #fff;
text-align: center;
line-height: 95px;
}
.informationList .inventOne {
background-color: #ef5e5e;
border: 6px solid #ffd0d0;
}
.informationList .inventTwo {
background-color: #ff793e;
border: 6px solid #ffc2a7;
}
.informationList .inventThr {
background-color: #47bf8c;
border: 6px solid #84ecc0;
}
.informationList .EveryDayCount {
margin-left: 5px;
}
.informationList .lastDiv {
font-size: 14px;
}
.informationList .dataTable {
width: 100%;
height: 400px;
}
.informationList .damandBtnDay li {
width: 60px;
height: 24px;
font-size: 12px;
color: #666666;
display: inline-block;
text-align: center;
line-height: 24px;
border-radius: 4px;
border: 1px solid #e3e3e3;
cursor: pointer;
}
.informationList .damandBtnDay li:nth-child(1) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.informationList .damandBtnDay li:nth-child(2) {
position: relative;
left: -6px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.informationList .damandBtnDay_active {
background-color: #e8eae7;
}
@media (max-width: 1366px) {
.informationList .orderList {
width: auto;
}
.informationList .circle {
width: 50px;
height: 50px;
line-height: 45px;
font-size: 14px;
}
.informationList .TopList {
height: 210px;
}
.informationList .invenCircle {
width: 80px;
height: 80px;
line-height: 70px;
}
} }
}
</style> </style>
<template> <template>
...@@ -399,7 +400,9 @@ ...@@ -399,7 +400,9 @@
</div> </div>
<div class="circleList clearfix"> <div class="circleList clearfix">
<div class="orderList" v-for="(item,index) in TodayData" :key="item.subCode"> <div class="orderList" v-for="(item,index) in TodayData" :key="item.subCode">
<div class="circle" :class="{'cirHotel':index==0,'cirRes':index==1,'cirPiao':index==2,'cirPiaojuan':index==3,'cirCar':index==4,'cirLeader':index==5}">{{item.OrderCount}}</div> <div class="circle"
:class="{'cirHotel':index==0,'cirRes':index==1,'cirPiao':index==2,'cirPiaojuan':index==3,'cirCar':index==4,'cirLeader':index==5}">
{{item.OrderCount}}</div>
<span>{{item.OrderTypeStr}}</span> <span>{{item.OrderTypeStr}}</span>
</div> </div>
</div> </div>
...@@ -432,17 +435,30 @@ ...@@ -432,17 +435,30 @@
</thead> </thead>
<tbody> <tbody>
<tr v-for="item in needStatus" :key="item.subCode"> <tr v-for="item in needStatus" :key="item.subCode">
<el-tooltip class="item" effect="dark" :content="item.Title" placement="top-start" popper-class="max-w250"> <el-tooltip class="item" effect="dark" :content="item.Title" placement="top-start"
popper-class="max-w250">
<td class="StatusTitle"> <td class="StatusTitle">
<span class="roomName">{{item.Title}}</span> <span class="roomName">{{item.Title}}</span>
</td> </td>
</el-tooltip> </el-tooltip>
<td width='50'><span class="circleAll" :class="{'cirOne':item.Hotel==4,'cirTwo':item.Hotel==3,'cirThr':item.Hotel==2,'cirFou':item.Hotel==1}"></span></td> <td width='50'><span class="circleAll"
<td width='50'><span class="circleAll" :class="{'cirOne':item.Dining==4,'cirTwo':item.Dining==3,'cirThr':item.Dining==2,'cirFou':item.Dining==1}"></span></td> :class="{'cirOne':item.Hotel==4,'cirTwo':item.Hotel==3,'cirThr':item.Hotel==2,'cirFou':item.Hotel==1}"></span>
<td width='50'><span class="circleAll" :class="{'cirOne':item.Ticket==4,'cirTwo':item.Ticket==3,'cirThr':item.Ticket==2,'cirFou':item.Ticket==1}"></span></td> </td>
<td width='50'><span class="circleAll" :class="{'cirOne':item.TicketCoupons==4,'cirTwo':item.TicketCoupons==3,'cirThr':item.TicketCoupons==2,'cirFou':item.TicketCoupons==1}"></span></td> <td width='50'><span class="circleAll"
<td width='50'><span class="circleAll" :class="{'cirOne':item.Bus==4,'cirTwo':item.Bus==3,'cirThr':item.Bus==2,'cirFou':item.Bus==1}"></span></td> :class="{'cirOne':item.Dining==4,'cirTwo':item.Dining==3,'cirThr':item.Dining==2,'cirFou':item.Dining==1}"></span>
<td width='50'><span class="circleAll" :class="{'cirOne':item.Leader==4,'cirTwo':item.Leader==3,'cirThr':item.Leader==2,'cirFou':item.Leader==1}"></span></td> </td>
<td width='50'><span class="circleAll"
:class="{'cirOne':item.Ticket==4,'cirTwo':item.Ticket==3,'cirThr':item.Ticket==2,'cirFou':item.Ticket==1}"></span>
</td>
<td width='50'><span class="circleAll"
:class="{'cirOne':item.TicketCoupons==4,'cirTwo':item.TicketCoupons==3,'cirThr':item.TicketCoupons==2,'cirFou':item.TicketCoupons==1}"></span>
</td>
<td width='50'><span class="circleAll"
:class="{'cirOne':item.Bus==4,'cirTwo':item.Bus==3,'cirThr':item.Bus==2,'cirFou':item.Bus==1}"></span>
</td>
<td width='50'><span class="circleAll"
:class="{'cirOne':item.Leader==4,'cirTwo':item.Leader==3,'cirThr':item.Leader==2,'cirFou':item.Leader==1}"></span>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -465,7 +481,8 @@ ...@@ -465,7 +481,8 @@
<div class="inventoryBtm clearfix"> <div class="inventoryBtm clearfix">
<div v-for="item in ThirtyStock" :key="item.subCode"> <div v-for="item in ThirtyStock" :key="item.subCode">
<span class="invnTitle">{{item.OrderTypeStr}}</span> <span class="invnTitle">{{item.OrderTypeStr}}</span>
<div class="invenCircle" :class="{'inventOne':item.RemainingInventory>=0&&item.RemainingInventory<=10,'inventTwo':item.RemainingInventory>10&&item.RemainingInventory<20,'inventThr':item.RemainingInventory>=20}"> <div class="invenCircle"
:class="{'inventOne':item.RemainingInventory>=0&&item.RemainingInventory<=10,'inventTwo':item.RemainingInventory>10&&item.RemainingInventory<20,'inventThr':item.RemainingInventory>=20}">
{{item.RemainingInventory}} {{item.RemainingInventory}}
</div> </div>
<span class="lastDiv">平均每天用量<span class="EveryDayCount">{{item.EveryDayCount}}</span></span> <span class="lastDiv">平均每天用量<span class="EveryDayCount">{{item.EveryDayCount}}</span></span>
...@@ -479,193 +496,192 @@ ...@@ -479,193 +496,192 @@
</template> </template>
<script> <script>
import leftNav from "../public/leftNav.vue"; import leftNav from "../public/leftNav.vue";
import regexUtils from "../../assets/utils/regexUtils"; //引入正则验证 import regexUtils from "../../assets/utils/regexUtils"; //引入正则验证
export default { export default {
data() { data() {
return { return {
loading: true, loading: true,
SevenData: "", SevenData: "",
ThirtyStock: "", ThirtyStock: "",
TodayData: "", TodayData: "",
needStatus: "", needStatus: "",
SevenDataDayStr: [], SevenDataDayStr: [],
SevenDataOrder: [], SevenDataOrder: [],
atvD: true, atvD: true,
atvM: false, atvM: false,
aa: "" aa: ""
};
},
components: {
leftNav
},
methods: {
initInfo() {
//初始化数据
let msg = {};
this.apipost(
"dmcindex_get_GetDMCIndex",
msg,
res => {
if (res.data.resultCode == 1) {
this.TodayData = res.data.data.TodayData;
this.SevenData = res.data.data.SevenData;
this.ThirtyStock = res.data.data.ThirtyStock;
this.SevenData.forEach(x => {
this.SevenDataDayStr.push(x.DayStr.substring(5));
this.SevenDataOrder.push(x.OrderCount);
});
this.chartsMap();
}
},
err => {}
);
},
initStatus(type) {
this.loading = true;
if (typeof type == "undefined") {
type = 1;
}
if (type == 1) {
this.atvD = true;
this.atvM = false;
} else if (type == 0) {
this.atvD = false;
this.atvM = true;
}
let msg = {
Type: type
}; };
this.apipost(
"dmcindex_get_GetDMCIndexThirtyOrThreeMonthOrder",
msg,
res => {
if (res.data.resultCode == 1) {
this.needStatus = res.data.data.ThirtyDayOrThreeMonth;
this.loading = false;
}
},
err => {}
);
}, },
tips(msg, type) { components: {
this.$message({ leftNav
message: msg,
duration: 2000,
type: type
});
}, },
chartsMap() { methods: {
var then = this; initInfo() {
let myChart = this.$echarts.init(document.getElementById("chartsMap")); //初始化数据
myChart.setOption({ let msg = {};
title: { this.apipost(
text: "近七日订单走势", "dmcindex_get_GetDMCIndex",
left: "left", msg,
textStyle: { res => {
fontWeight: "bold", if (res.data.resultCode == 1) {
fontSize: 14, this.TodayData = res.data.data.TodayData;
color: "#333333", this.SevenData = res.data.data.SevenData;
height: "30px" this.ThirtyStock = res.data.data.ThirtyStock;
}, this.SevenData.forEach(x => {
padding: [ this.SevenDataDayStr.push(x.DayStr.substring(5));
20, // 上 this.SevenDataOrder.push(x.OrderCount);
20, // 右 });
20, // 下 this.chartsMap();
20 // 左
]
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c}"
},
xAxis: {
type: "category",
axisLine: {
show: false,
lineStyle: {
width: 30
} }
}, },
axisTick: false, err => {}
//data: ['一月', '二月', '三月', '四月', '五月', '六月'], );
data: this.SevenDataDayStr },
}, initStatus(type) {
grid: { this.loading = true;
x: 25, if (typeof type == "undefined") {
y: 60, type = 1;
x2: 5, }
y2: 20, if (type == 1) {
containLabel: true this.atvD = true;
}, this.atvM = false;
yAxis: { } else if (type == 0) {
type: "category", this.atvD = false;
data: [ this.atvM = true;
"10%", }
"20%", let msg = {
"30%", Type: type
"40%", };
"50%", this.apipost(
"60%", "dmcindex_get_GetDMCIndexThirtyOrThreeMonthOrder",
"70%", msg,
"80%", res => {
"90%", if (res.data.resultCode == 1) {
"100%" this.needStatus = res.data.data.ThirtyDayOrThreeMonth;
], this.loading = false;
axisLine: {
show: false
},
axisTick: false,
splitLine: {
lineStyle: {
color: "rgba(245,245,245,1)"
} }
}, //去除网格线 },
type: "value" err => {}
}, );
series: [ },
{ tips(msg, type) {
name: "本年", this.$message({
type: "line", message: msg,
smooth: false, duration: 2000,
//data: [0, 500, 1000, 2000, 4000,5000], type: type
data: this.SevenDataOrder, });
lineStyle: { },
width: 1, chartsMap() {
color: "#2AAEF2" var chatMapObj = document.getElementById("chartsMap");
if (chatMapObj) {
let myChart = this.$echarts.init(chatMapObj);
myChart.setOption({
title: {
text: "近七日订单走势",
left: "left",
textStyle: {
fontWeight: "bold",
fontSize: 14,
color: "#333333",
height: "30px"
},
padding: [
20, // 上
20, // 右
20, // 下
20 // 左
]
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c}"
},
xAxis: {
type: "category",
axisLine: {
show: false,
lineStyle: {
width: 30
}
},
axisTick: false,
//data: ['一月', '二月', '三月', '四月', '五月', '六月'],
data: this.SevenDataDayStr
},
grid: {
x: 25,
y: 60,
x2: 5,
y2: 20,
containLabel: true
}, },
itemStyle: { yAxis: {
borderWidth: 2, type: "category",
color: "#2AAEF2" data: [
"10%",
"20%",
"30%",
"40%",
"50%",
"60%",
"70%",
"80%",
"90%",
"100%"
],
axisLine: {
show: false
},
axisTick: false,
splitLine: {
lineStyle: {
color: "rgba(245,245,245,1)"
}
}, //去除网格线
type: "value"
}, },
areaStyle: { series: [{
color: { name: "本年",
type: "linear", type: "line",
x: 0, smooth: false,
y: 0, //data: [0, 500, 1000, 2000, 4000,5000],
x2: 0, data: this.SevenDataOrder,
y2: 1, lineStyle: {
colorStops: [ width: 1,
{ color: "#2AAEF2"
offset: 0, },
color: "rgba(230,230,230,0)" // 0% 处的颜色 itemStyle: {
}, borderWidth: 2,
{ color: "#2AAEF2"
offset: 1, },
color: "rgba(230,230,230,0)" // 100% 处的颜色 areaStyle: {
} color: {
], type: "linear",
globalCoord: false // 缺省为 false x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: "rgba(230,230,230,0)" // 0% 处的颜色
},
{
offset: 1,
color: "rgba(230,230,230,0)" // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
}
} }
} }]
} });
] }
}); }
},
mounted() {
this.initInfo();
this.initStatus();
} }
}, };
mounted() { </script>
this.initInfo(); \ No newline at end of file
this.initStatus();
}
};
</script>
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