Skip to content

S
SuperMan
Commit 801a6138 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent bd908ab0
Hide whitespace changes
Inline Side-by-side
Showing with 836 additions and 845 deletions
src/components/sale/sale.vue
View file @ 801a6138
......@@ -34,7 +34,6 @@
margin: 25px 0 0 80px;
color: #E95252;
}
</style>
<template>
......@@ -53,78 +52,76 @@
<el-row :gutter="20">
<el-col :span="12">
<div class="el-col-div ownScrollbarStyle PersonalData_l">
<!-- <rightHead :pagesTitle="1"></rightHead> -->
<div class="l_top" style="position: relative;">
<img v-if="data.icon !=null && data.icon !='' " :src="data.icon" alt="" class="tx_img"
: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">
<span>{{data.emName}}</span>
<span>{{data.postName}}</span>
<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 @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 style="font-size: 14px;color: #333333;" v-if="rankingNum">
第<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 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" @click="goAnticipate(1)">
<div class="tc">
<p>
<span>￥</span>
<span>{{data.totalCommission}}</span>
</p>
<p style="color: #BDBDBD;font-size: 13px;padding: 0 0 5px 0;">{{data.periodsName}}期<el-tag
v-if="data.peopelBonus" size="mini" type="danger"
effect="dark" style="color: #ffff;position: absolute;left: 70px;bottom: 23px;font-size: 11px;">奖+{{data.peopelBonus}}</el-tag></p>
</div>
<div stye="font-size: 16px;color: #666666;display: block;display: inline-block;">
<span>出境提成</span>
<template v-if="data.comissionGeneralId>0">
<span v-if="data.share==1" class="Sale_Share" style="color:#333;cursor:default;">已确认</span>
<span v-if="data.share==0" @click="tichengDialog=true" class="Sale_Share"
:class="{'ShareDisClick':!isSubmit}">分享并确认</span>
</template>
</div>
</div>
<div style="border-left: 1px solid #eeeeee;width: 1px;"> </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 style="cursor: pointer;cursor: pointer;position: relative;" class="royalty"
@click="goAnticipate(1)">
<div class="tc">
<p>
<span>￥</span>
<span>{{data.totalCommission}}</span>
</p>
<p style="color: #BDBDBD;font-size: 13px;padding: 0 0 5px 0;">{{data.periodsName}}期<el-tag
v-if="data.peopelBonus" size="mini" type="danger" effect="dark"
style="color: #ffff;position: absolute;left: 70px;bottom: 23px;font-size: 11px;">
奖+{{data.peopelBonus}}</el-tag>
</p>
</div>
<div stye="font-size: 16px;color: #666666;display: block;display: inline-block;">
<span>出境提成</span>
<template v-if="data.comissionGeneralId>0">
<span v-if="data.share==1" class="Sale_Share" style="color:#333;cursor:default;">已确认</span>
<span v-if="data.share==0" @click="tichengDialog=true" class="Sale_Share"
:class="{'ShareDisClick':!isSubmit}">分享并确认</span>
</template>
</div>
</div>
</div>
<div style="border-left: 1px solid #eeeeee;width: 1px;"> </div>
<!-- <img style="cursor: pointer;" src="../../assets/img/jinbin@2x.png" alt="" class="img" @click="goAnticipate(3)"> -->
<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 style="border-left: 1px solid #eeeeee;width: 1px;"> </div>
<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 stye="font-size: 16px;color: #666666;display: block;display: inline-block;">
<span>历史单项提成</span>
<div style="border-left: 1px solid #eeeeee;width: 1px;"> </div>
<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>
<el-tooltip class="item" effect="dark" content="预期提成" placement="top">
<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>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="预期提成" placement="top">
<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>
</el-tooltip>
</div>
</div>
......@@ -149,10 +146,7 @@
</div>
<div style="width: 100%;margin-top: 20px;text-align: center"
v-show="data.orderInfo ==null || data.orderInfo.length == 0">暂无数据</div>
</div>
</div>
</div>
</el-col>
......@@ -174,7 +168,6 @@
</div>
<i class="iconfont icon-tuoyuan" />
</div>
<div class="c_view view_t">
<div class="semicircle_t"></div>
<div class="view_c">
......@@ -186,7 +179,6 @@
</div>
<i class="iconfont icon-xingzhuang2" />
</div>
<div class="c_view view_t">
<div class="semicircle_t"></div>
<div class="view_c">
......@@ -198,7 +190,6 @@
<i class="iconfont icon-xingzhuang4" id="xzts" />
</div>
</div>
<div class="r_box_b">
<div class="c_view view_b">
<div class="semicircle_b"></div>
......@@ -224,7 +215,6 @@
</div>
<div class="c_view view_b">
<div class="semicircle_b"></div>
<div class="view_c">
<span>今日询单</span>
<div class="view-f">
......@@ -377,7 +367,6 @@
</div>
<div class="r_name">
<span>待处理发票</span>
<el-badge class="tishi" :value="data.invoiceApplyCount?data.invoiceApplyCount:'0'" />
</div>
</div>
......@@ -387,9 +376,7 @@
</div>
<div class="r_name">
<span>公告</span>
<el-badge class="tishi" :value="data.noticeCount?data.noticeCount:'0'" />
</div>
</div>
</div>
......@@ -410,7 +397,6 @@
<span>今日总收客人数</span>
<span>{{groupdata.toDayGuestCount}}<span class="p_dw">人</span></span>
</div>
<div class="g_icon g_bms">
<i class="iconfont icon-clipboard" style="color: #00B26F"></i>
</div>
......@@ -418,7 +404,6 @@
<span>今日总报名单数</span>
<span>{{groupdata.toDayOrderCount}}<span class="p_dw">单</span></span>
</div>
<div class="g_icon g_skuan">
<i class="iconfont icon-graph" style="color: #FF7B8A"></i>
</div>
......@@ -607,14 +592,14 @@
return {
tichengDialog: false,
PMMsg: {
RB_Branch_Id: -1,
RB_Department_Id: 0,
EnterID: 0,
tStartDates: [],
qStartDates: [],
GroupBy: "EnterID",
QueryType: 0,
},
RB_Branch_Id: -1,
RB_Department_Id: 0,
EnterID: 0,
tStartDates: [],
qStartDates: [],
GroupBy: "EnterID",
QueryType: 0,
},
SumPreferPrice: 0,
rankingNum: 0,
type: 1,
......@@ -647,20 +632,19 @@
CurrentUserInfo: {},
EditBtn: false,
PMMsg: {
RB_Branch_Id: -1,
RB_Department_Id: 0,
EnterID: 0,
tStartDates: [],
qStartDates: [],
GroupBy: "EnterID",
QueryType: 0,
},
RB_Branch_Id: -1,
RB_Department_Id: 0,
EnterID: 0,
tStartDates: [],
qStartDates: [],
GroupBy: "EnterID",
QueryType: 0,
},
}
},
components: {
leftNav,
},
watch: {
screenWidth(val) {
this.screenWidth = val;
......@@ -670,18 +654,18 @@
},
methods: {
// 销售预期提成
goAnticipate(type){
goAnticipate(type) {
let userInfo = this.getLocalStorage();
let name
if(type==1){//出境
if (type == 1) { //出境
name = 'TradeTicketUserDetails'
}else if(type==2){//国内
} else if (type == 2) { //国内
name = 'domesticCommissionUser'
}else if(type==3){//历史单项
} else if (type == 3) { //历史单项
name = 'ServiceCommissionUser'
}else if(type==4){//预期提成
} else if (type == 4) { //预期提成
name = 'saleExpectedCommission'
}else if(type==5){//排名
} else if (type == 5) { //排名
name = 'salesVolumeRank'
this.$router.push({
name: name,
......@@ -691,7 +675,7 @@
}
});
}
if(type!=5&&name){
if (type != 5 && name) {
this.$router.push({
name: name,
query: {
......@@ -701,66 +685,53 @@
}
});
}
},
settStartDates() {
let nowdays = new Date()
let Year = new Date().getFullYear()
let MonthTime = new Date().getMonth() + 1
let MonthDayNum = new Date(Year, 12, 0).getDate();
let date = Year+'-12-'+(MonthDayNum>10?MonthDayNum:'0'+MonthDayNum)
let start = Year+'-01-01'
let date = Year + '-12-' + (MonthDayNum > 10 ? MonthDayNum : '0' + MonthDayNum)
let start = Year + '-01-01'
this.PMMsg.tStartDates = [start, date]
},
initData() {
let userInfo = this.getLocalStorage();
let param = {
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,
EnterID: this.PMMsg.EnterID == 0 ? null : this.PMMsg.EnterID,//Number(userInfo.EmployeeId)
QStartDate:
this.PMMsg.tStartDates && this.PMMsg.tStartDates.length == 2
? this.PMMsg.tStartDates[0]
: null,
QEndDate:
this.PMMsg.tStartDates && this.PMMsg.tStartDates.length == 2
? this.PMMsg.tStartDates[1]
: null,
CStartDate:
this.PMMsg.qStartDates && this.PMMsg.qStartDates.length == 2
? this.PMMsg.qStartDates[0]
: null,
CEndDate:
this.PMMsg.qStartDates && this.PMMsg.qStartDates.length == 2
? this.PMMsg.qStartDates[1]
: null,
GroupBy: this.PMMsg.GroupBy,
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
}
})
let param = {
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,
EnterID: this.PMMsg.EnterID == 0 ? null : this.PMMsg.EnterID, //Number(userInfo.EmployeeId)
QStartDate: this.PMMsg.tStartDates && this.PMMsg.tStartDates.length == 2 ?
this.PMMsg.tStartDates[0] : null,
QEndDate: this.PMMsg.tStartDates && this.PMMsg.tStartDates.length == 2 ?
this.PMMsg.tStartDates[1] : null,
CStartDate: this.PMMsg.qStartDates && this.PMMsg.qStartDates.length == 2 ?
this.PMMsg.qStartDates[0] : null,
CEndDate: this.PMMsg.qStartDates && this.PMMsg.qStartDates.length == 2 ?
this.PMMsg.qStartDates[1] : null,
GroupBy: this.PMMsg.GroupBy,
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
}
})
});
},
//过滤除开标点符号的字数
getFilteredNum(val) {
//var pattern=new RegExp("[`~%!@#$^=''?~！@#￥……&——‘”“'？*()（），,。.、<>《》\\[\\]【】\\“\\”{}=+-|\/:;；：]");
var pattern = new RegExp("[`~%!@#$^=''?~！@#￥……&——‘”“'？*()（），,。.、<>《》:;； +-=\\s]");
//[]内输入你要过滤的字符，这里基本包含全部的标点符号，\\是转义字符
var rs = "";
......@@ -821,87 +792,89 @@
item['fen'] = 'S'
}
})
let evaluate = this.$echarts.init(document.getElementById('evaluate'))
evaluate.setOption({
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
radar: [{
name: {
formatter: function (value, indicator) {
return value + '\n' + indicator.fen
}
},
splitArea: {
show: false
},
splitLine: {
lineStyle: {
color: ['#BCBFFF', '#BCBFFF']
var evaluateObj = document.getElementById('evaluate');
if (evaluateObj) {
let evaluate = this.$echarts.init(evaluateObj)
evaluate.setOption({
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
indicator: [{
text: this.myScore[0].name,
max: 100,
fen: this.myScore[0].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
radar: [{
name: {
formatter: function (value, indicator) {
return value + '\n' + indicator.fen
}
},
{
text: this.myScore[3].name,
max: 100,
fen: this.myScore[3].fen
splitArea: {
show: false
},
{
text: this.myScore[4].name,
max: 100,
fen: this.myScore[4].fen
splitLine: {
lineStyle: {
color: ['#BCBFFF', '#BCBFFF']
}
},
{
text: this.myScore[5].name,
max: 100,
fen: this.myScore[5].fen
}
],
}, ],
series: [{
type: 'radar',
tooltip: {
trigger: 'item'
},
itemStyle: {
normal: {
areaStyle: {
type: 'default'
indicator: [{
text: this.myScore[0].name,
max: 100,
fen: this.myScore[0].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
},
{
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: {
normal: {
color: '#487DE9'
areaStyle: {
type: 'default'
}
}
},
name: '我的评价'
}, ],
radius: 60
}, ]
});
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
],
itemStyle: {
normal: {
color: '#487DE9'
}
},
name: '我的评价'
}, ],
radius: 60
}, ]
});
}
} else {
this.$message.error(res.data.message)
}
......@@ -923,80 +896,83 @@
},
drawLine(OrderList) {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
let dataname = [];
let bzdata = [];
let szdata = [];
for (var i = 0; i < OrderList.length; i++) {
if (i < 10) {
dataname.push(OrderList[i].branchName + '\n' + OrderList[i].departmentName)
bzdata.push(OrderList[i].nowWeekGuest)
szdata.push(OrderList[i].nowLastWeekGuest)
var chatObj = document.getElementById('myChart');
if (chatObj) {
let myChart = this.$echarts.init(chatObj)
let dataname = [];
let bzdata = [];
let szdata = [];
for (var i = 0; i < OrderList.length; i++) {
if (i < 10) {
dataname.push(OrderList[i].branchName + '\n' + OrderList[i].departmentName)
bzdata.push(OrderList[i].nowWeekGuest)
szdata.push(OrderList[i].nowLastWeekGuest)
}
}
}
// 绘制图表
myChart.setOption({
title: '',
tooltip: {},
legend: {
x: 'center',
data: ['本周收客', '上周收客', ]
},
xAxis: {
data: dataname,
triggerEvent: true,
axisLabel: {
fontSize: 9, //设置x轴标签的字体大小
interval: 0 //设置标签x的名称 0为显示所有 1为间隔一个显示
},
axisTick: {
interval: 0
// 绘制图表
myChart.setOption({
title: '',
tooltip: {},
legend: {
x: 'center',
data: ['本周收客', '上周收客', ]
},
nameTextStyle: {}
},
yAxis: {
name: '收客数',
nameLocation: 'end', //坐标轴名称显示位置。
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
},
axisTick: {
show: false
xAxis: {
data: dataname,
triggerEvent: true,
axisLabel: {
fontSize: 9, //设置x轴标签的字体大小
interval: 0 //设置标签x的名称 0为显示所有 1为间隔一个显示
},
axisTick: {
interval: 0
},
nameTextStyle: {}
},
axisLine: {
show: false
}
},
series: [{
type: 'bar',
name: '本周收客',
barGap: '-100%',
data: bzdata,
z: 11,
itemStyle: {
normal: {
color: '#1698FD',
yAxis: {
name: '收客数',
nameLocation: 'end', //坐标轴名称显示位置。
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
},
barWidth: 20
axisTick: {
show: false
},
axisLine: {
show: false
}
},
{
type: 'bar',
name: '上周收客',
data: szdata,
z: 10,
itemStyle: {
normal: {
color: '#7FEFEF'
}
series: [{
type: 'bar',
name: '本周收客',
barGap: '-100%',
data: bzdata,
z: 11,
itemStyle: {
normal: {
color: '#1698FD',
}
},
barWidth: 20
},
barWidth: 20
}
]
});
{
type: 'bar',
name: '上周收客',
data: szdata,
z: 10,
itemStyle: {
normal: {
color: '#7FEFEF'
}
},
barWidth: 20
}
]
});
}
},
Financial_post_GetNotDealCount() {
this.apipost(
......@@ -1055,5 +1031,4 @@
this.Financial_post_GetNotDealCount(); //待处理财务单据的个数
},
}
</script>
</script>
\ No newline at end of file
src/components/temp/dmc.vue
View file @ 801a6138
<style>
.informationList {
position: absolute;
left: 330px;
right: 0px;
top: 30px;
bottom: 30px;
}
.informationList .LeftSide {
float: left;
width: 45%;
position: relative;
height: 100%;
}
.informationList .rightSide {
float: left;
margin-left: 30px;
width: 50%;
position: relative;
height: 100%;
}
.informationList .TopList {
border: 1px solid #d9d9d9;
background-color: #fff;
box-shadow: 2px 0px 10px rgba(217, 217, 217, 1);
min-width: 466px;
}
.informationList .todayOrder {
color: #333333;
padding-top: 25px;
padding-bottom: 15px;
border-bottom: 1px solid #f5f5f5;
margin: 0 20px;
font-weight: bold;
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 {
position: absolute;
left: 330px;
right: 0px;
top: 30px;
bottom: 30px;
}
.informationList .LeftSide {
float: left;
width: 45%;
position: relative;
height: 100%;
}
.informationList .rightSide {
float: left;
margin-left: 30px;
width: 50%;
position: relative;
height: 100%;
}
.informationList .TopList {
border: 1px solid #d9d9d9;
background-color: #fff;
box-shadow: 2px 0px 10px rgba(217, 217, 217, 1);
min-width: 466px;
}
.informationList .todayOrder {
color: #333333;
padding-top: 25px;
padding-bottom: 15px;
border-bottom: 1px solid #f5f5f5;
margin: 0 20px;
font-weight: bold;
font-size: 14px;
}
.informationList .orderList {
width: auto;
text-align: center;
width: 78px;
font-size: 14px;
color: #333333;
float: left;
margin-right: 20px;
}
.informationList .circle {
width: 50px;
height: 50px;
line-height: 45px;
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 .TopList {
height: 210px;
.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: 80px;
height: 80px;
line-height: 70px;
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 {
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>
<template>
......@@ -399,7 +400,9 @@
</div>
<div class="circleList clearfix">
<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>
</div>
</div>
......@@ -432,17 +435,30 @@
</thead>
<tbody>
<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">
<span class="roomName">{{item.Title}}</span>
</td>
</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" :class="{'cirOne':item.Dining==4,'cirTwo':item.Dining==3,'cirThr':item.Dining==2,'cirFou':item.Dining==1}"></span></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>
<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"
:class="{'cirOne':item.Dining==4,'cirTwo':item.Dining==3,'cirThr':item.Dining==2,'cirFou':item.Dining==1}"></span>
</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>
</tbody>
</table>
......@@ -465,7 +481,8 @@
<div class="inventoryBtm clearfix">
<div v-for="item in ThirtyStock" :key="item.subCode">
<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}}
</div>
<span class="lastDiv">平均每天用量<span class="EveryDayCount">{{item.EveryDayCount}}</span></span>
......@@ -479,193 +496,192 @@
</template>
<script>
import leftNav from "../public/leftNav.vue";
import regexUtils from "../../assets/utils/regexUtils"; //引入正则验证
export default {
data() {
return {
loading: true,
SevenData: "",
ThirtyStock: "",
TodayData: "",
needStatus: "",
SevenDataDayStr: [],
SevenDataOrder: [],
atvD: true,
atvM: false,
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
import leftNav from "../public/leftNav.vue";
import regexUtils from "../../assets/utils/regexUtils"; //引入正则验证
export default {
data() {
return {
loading: true,
SevenData: "",
ThirtyStock: "",
TodayData: "",
needStatus: "",
SevenDataDayStr: [],
SevenDataOrder: [],
atvD: true,
atvM: false,
aa: ""
};
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) {
this.$message({
message: msg,
duration: 2000,
type: type
});
components: {
leftNav
},
chartsMap() {
var then = this;
let myChart = this.$echarts.init(document.getElementById("chartsMap"));
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
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();
}
},
axisTick: false,
//data: ['一月', '二月', '三月', '四月', '五月', '六月'],
data: this.SevenDataDayStr
},
grid: {
x: 25,
y: 60,
x2: 5,
y2: 20,
containLabel: true
},
yAxis: {
type: "category",
data: [
"10%",
"20%",
"30%",
"40%",
"50%",
"60%",
"70%",
"80%",
"90%",
"100%"
],
axisLine: {
show: false
},
axisTick: false,
splitLine: {
lineStyle: {
color: "rgba(245,245,245,1)"
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;
}
}, //去除网格线
type: "value"
},
series: [
{
name: "本年",
type: "line",
smooth: false,
//data: [0, 500, 1000, 2000, 4000,5000],
data: this.SevenDataOrder,
lineStyle: {
width: 1,
color: "#2AAEF2"
},
err => {}
);
},
tips(msg, type) {
this.$message({
message: msg,
duration: 2000,
type: type
});
},
chartsMap() {
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: {
borderWidth: 2,
color: "#2AAEF2"
yAxis: {
type: "category",
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: {
color: {
type: "linear",
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
series: [{
name: "本年",
type: "line",
smooth: false,
//data: [0, 500, 1000, 2000, 4000,5000],
data: this.SevenDataOrder,
lineStyle: {
width: 1,
color: "#2AAEF2"
},
itemStyle: {
borderWidth: 2,
color: "#2AAEF2"
},
areaStyle: {
color: {
type: "linear",
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() {
this.initInfo();
this.initStatus();
}
};
</script>
};
</script>
\ No newline at end of file
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