Skip to content

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

页面修改

parent 8e0cf39c
Hide whitespace changes
Inline Side-by-side
Showing with 621 additions and 447 deletions
src/components/SalesModule/demandInquiry.vue
View file @ c71dbf8a
<style>
.page_demandInquiry ._mc_addbox{padding: 30px 0}
.page_demandInquiry ._mc_edit{overflow: auto;display: none;position:absolute;bottom:0;left: 0;border-top:1px solid #d1d1d1;background-color:#f9f9f9;padding: 15px 33px;width: 100%;min-width: 1146px;padding-right: 10px}
.page_demandInquiry .edHeight{display: block;height: 200px;}
.page_demandInquiry ._mc_list{overflow-x: auto;}
.page_demandInquiry ._mc_list>ul>li{padding: 20px 20px 0 20px;width: 280px;height: 302px;float: left;border: 1px solid #F1F2F5;margin-right:10px;margin-bottom: 20px}
.page_demandInquiry ._mc_list>ul>li:hover{box-shadow:0px 0px 20px rgba(191,191,191,1);transition: all linear 0.5s;}
.page_demandInquiry ._bt span{color: #FF9000}
.page_demandInquiry ._edHeight{height:500px;}
.page_demandInquiry ._scrollbar::-webkit-scrollbar{width: 4px;height: 8px;}
.page_demandInquiry ._scrollbar::-webkit-scrollbar-thumb{border-radius: 4px;-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);background: #c9c9c9;}
.page_demandInquiry ._scrollbar::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);border-radius: 4px;background: #EDEDED;}
.page_demandInquiry ._mc_list ._tit,._mc_edit ._tit{padding-left: 10px;border-left: 3px solid #E95252; margin-bottom: 25px; height: 14px; line-height: 14px; font-size: 14px;color: #000000;position: relative;}
.page_demandInquiry ._mc_edit ._info_box ul._form li{float: left;}
.page_demandInquiry ._check_list{padding-left: 120px;margin-bottom: 20px;}
.page_demandInquiry ._check_box .el-form-item{margin-bottom: 0}
.page_demandInquiry ._remark textarea{resize: none;width: 646px;height: 100px}
.page_demandInquiry ._vr_left{width: 700px;margin-right: 20px; }
.page_demandInquiry ._vr_left ul{margin-top: 20px; max-height: 630px; overflow-y: auto;}
.page_demandInquiry ._vr_left ul li{padding: 25px;color: #FFFFFF;font-size: 14px;text-align: center;float: left;border-top: 1px solid #F1F2F5;border-bottom: 1px solid #F1F2F5;background-color: #FFFFFF;margin-bottom: 20px;cursor: pointer;}
.page_demandInquiry ._vr_left ul li:first-child{border-left: 1px solid #F1F2F5;}
.page_demandInquiry ._vr_left ul li:last-child{border-right: 1px solid #F1F2F5;}
.page_demandInquiry ._vr_left ul li:nth-child(4n+0){border-right: 1px solid #F1F2F5;}
.page_demandInquiry ._vr_left ul li:nth-child(5),.page_demandInquiry ._vr_left ul li:nth-child(9){border-left: 1px solid #F1F2F5;}
.page_demandInquiry ._vr_left ul li>div{width:120px;height:120px;background:rgba(42,174,242,1);border-radius:46px;border: 6px solid rgba(85,190,245,1);}
.page_demandInquiry ._vr_left ul li>div p:nth-child(1){font-weight: bold;font-size: 18px;margin-top: 30px}
.page_demandInquiry ._vr_left ul li>p{color: #333333;margin-top: 10px}
.height-auto .el-input{height: auto !important}
.page_demandInquiry ._mc_addbox {
padding: 30px 0
}
.page_demandInquiry ._mc_edit {
overflow: auto;
display: none;
position: absolute;
bottom: 0;
left: 0;
border-top: 1px solid #d1d1d1;
background-color: #f9f9f9;
padding: 15px 33px;
width: 100%;
min-width: 1146px;
padding-right: 10px
}
.page_demandInquiry .edHeight {
display: block;
height: 200px;
}
.page_demandInquiry ._mc_list {
overflow-x: auto;
}
.page_demandInquiry ._mc_list>ul>li {
padding: 20px 20px 0 20px;
width: 280px;
height: 302px;
float: left;
border: 1px solid #F1F2F5;
margin-right: 10px;
margin-bottom: 20px
}
.page_demandInquiry ._mc_list>ul>li:hover {
box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
transition: all linear 0.5s;
}
.page_demandInquiry ._bt span {
color: #FF9000
}
.page_demandInquiry ._edHeight {
height: 500px;
}
.page_demandInquiry ._scrollbar::-webkit-scrollbar {
width: 4px;
height: 8px;
}
.page_demandInquiry ._scrollbar::-webkit-scrollbar-thumb {
border-radius: 4px;
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
background: #c9c9c9;
}
.page_demandInquiry ._scrollbar::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
border-radius: 4px;
background: #EDEDED;
}
.page_demandInquiry ._mc_list ._tit,
._mc_edit ._tit {
padding-left: 10px;
border-left: 3px solid #E95252;
margin-bottom: 25px;
height: 14px;
line-height: 14px;
font-size: 14px;
color: #000000;
position: relative;
}
.page_demandInquiry ._mc_edit ._info_box ul._form li {
float: left;
}
.page_demandInquiry ._check_list {
padding-left: 120px;
margin-bottom: 20px;
}
.page_demandInquiry ._check_box .el-form-item {
margin-bottom: 0
}
.page_demandInquiry ._remark textarea {
resize: none;
width: 646px;
height: 100px
}
.page_demandInquiry ._vr_left {
width: 700px;
margin-right: 20px;
}
.page_demandInquiry ._vr_left ul {
margin-top: 20px;
max-height: 630px;
overflow-y: auto;
}
.page_demandInquiry ._vr_left ul li {
padding: 25px;
color: #FFFFFF;
font-size: 14px;
text-align: center;
float: left;
border-top: 1px solid #F1F2F5;
border-bottom: 1px solid #F1F2F5;
background-color: #FFFFFF;
margin-bottom: 20px;
cursor: pointer;
}
.page_demandInquiry ._vr_left ul li:first-child {
border-left: 1px solid #F1F2F5;
}
.page_demandInquiry ._vr_left ul li:last-child {
border-right: 1px solid #F1F2F5;
}
.page_demandInquiry ._vr_left ul li:nth-child(4n+0) {
border-right: 1px solid #F1F2F5;
}
.page_demandInquiry ._vr_left ul li:nth-child(5),
.page_demandInquiry ._vr_left ul li:nth-child(9) {
border-left: 1px solid #F1F2F5;
}
.page_demandInquiry ._vr_left ul li>div {
width: 120px;
height: 120px;
background: rgba(42, 174, 242, 1);
border-radius: 46px;
border: 6px solid rgba(85, 190, 245, 1);
}
.page_demandInquiry ._vr_left ul li>div p:nth-child(1) {
font-weight: bold;
font-size: 18px;
margin-top: 30px
}
.page_demandInquiry ._vr_left ul li>p {
color: #333333;
margin-top: 10px
}
.height-auto .el-input {
height: auto !important
}
</style>
<template>
<div class="page_demandInquiry">
<div class="_mc_addbox">
<button class="hollowFixedBtn" @click="addShow=true">{{$t('pub.addBtn')}}</button>
</div>
<div class="_mc_list _scrollbar" :class="addShow==true?'_edHeight':''">
<div class="_vr_left fl">
<p class="_tit">{{$t('salesModule.InquiryAndDemand')}}</p>
<ul>
<li v-for="(item,index) in inquireLineStatistical" @click="goUrl('demandStatistics',item.lineId,item.lineName)">
<div>
<p class="PingFangSC">{{item.inquireCount}}{{$t('pub.Ci')}}</p>
<p>{{item.inqiurePercent}}%</p>
</div>
<p>{{item.lineName}}</p>
</li>
</ul>
<div class="noData" v-show="inquireLineStatistical.length==0">
{{$t('system.content_noData')}}
</div>
</div>
<div class="_vr_right fl">
<p class="_tit">{{$t('salesModule.ZixunHotLine')}}</p>
<div class="charts" style="margin-top: 20px;">
<el-col :span='24'>
<div id="chartsMap" style="height:630px;width:850px;"></div>
</el-col>
</div>
<div class="page_demandInquiry">
<div class="_mc_addbox">
<button class="hollowFixedBtn" @click="addShow=true">{{$t('pub.addBtn')}}</button>
</div>
<div class="_mc_list _scrollbar" :class="addShow==true?'_edHeight':''">
<div class="_vr_left fl">
<p class="_tit">{{$t('salesModule.InquiryAndDemand')}}</p>
<ul>
<li v-for="(item,index) in inquireLineStatistical"
@click="goUrl('demandStatistics',item.lineId,item.lineName)">
<div>
<p class="PingFangSC">{{item.inquireCount}}{{$t('pub.Ci')}}</p>
<p>{{item.inqiurePercent}}%</p>
</div>
<p>{{item.lineName}}</p>
</li>
</ul>
<div class="noData" v-show="inquireLineStatistical.length==0">
{{$t('system.content_noData')}}
</div>
<div class="_mc_edit _scrollbar" :class="addShow==true?'edHeight':''">
<p class="_tit">{{$t('salesModule.addCustomer')}}
<span class="fr">
<button class="hollowFixedBtn" type="button" @click="cancelEdit(),resetForm('addMsg')">{{$t('pub.cancelBtn')}}</button>
<button type="button" class="normalBtn" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button>
</span>
</p>
<el-form class="_info_box clearfix" :model="addMsg" :rules="rules" ref="addMsg" label-width="120px">
<ul class="_form clearfix">
<li>
<el-form-item :label="$t('fnc.khleixing')" prop="linshig">
<div class="w210">
<el-radio v-model="addMsg.linshig" @change="addMsg.CustomerName = '', addMsg.CustomerInfoId = 0, AppCoustomer = []" label="1">{{$t('salesModule.InformalClient')}}</el-radio>
<el-radio v-model="addMsg.linshig" @change="addMsg.CustomerName = '', addMsg.CustomerInfoId = 0, AppCoustomer = []" label="2">{{$t('salesModule.LinshiCustomer')}}</el-radio>
</div>
</el-form-item>
</li>
<li>
<el-form-item :label="$t('pub.Customer')" prop="CustomerInfoId" >
<el-select
:multiple="false"
filterable
remote
reserve-keyword
:placeholder="$t('pub.PleaseKeyWords')"
:remote-method="getAppCoustomer"
@change="getAppCoustomerName"
:loading="loading" v-model="addMsg.CustomerInfoId" v-if="addMsg.linshig == '1'" class="w210 height-auto">
<el-option
:placeholder="$t('pub.pleaseSel')"
v-for="item in AppCoustomer"
:key="item.customerId"
:label="`${item.customerName}(${item.contact})`"
:value="item.customerId">
</el-option>
</el-select>
<el-input v-else v-model="addMsg.CustomerName" :placeholder="$t('pub.pleaseImport')" class="w210"></el-input>
</el-form-item>
</li>
<li>
<el-form-item :label="$t('salesModule.XunwenLine')" prop="LineId">
<el-select v-model="addMsg.LineId" class="w210" :placeholder="$t('pub.pleaseSel')" @change="getLineTeamList(addMsg.LineId)">
<el-option
:placeholder="$t('pub.pleaseSel')"
v-for="item in InquireLineList"
:key="item.LineID"
:label="item.LineName"
:value="item.LineID">
</el-option>
</el-select>
</el-form-item>
</li>
<li>
<el-form-item :label="$t('advmanager.v_xilie')">
<el-select v-model="addMsg.LineteamId" class="w210" :placeholder="$t('pub.pleaseSel')">
<el-option :label="$t('system.ph_buxian')" value=''></el-option>
<el-option
:placeholder="$t('pub.pleaseSel')"
v-for="item in LineteamList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</li>
<li>
<el-form-item :label="$t('Airticket.Air_StartTime')" prop="DepartTime">
<el-date-picker clearable class="w210"
v-model="addMsg.DepartTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
:placeholder="$t('admin.admin_choDate')">
</el-date-picker>
</el-form-item>
</li>
<li>
<el-form-item :label="$t('salesModule.PriceExpect')" prop="BudgetPrice">
<el-input v-model="addMsg.BudgetPrice" :placeholder="$t('pub.pleaseImport')" class="w210"></el-input>
</el-form-item>
</li>
<li>
<el-form-item :label="$t('salesModule.PeopleCount')" prop="PeopleNumber">
<el-input v-model="addMsg.PeopleNumber" :placeholder="$t('pub.pleaseImport')" class="w210"></el-input>
</el-form-item>
</li>
<li>
<el-form-item :label="$t('pub.pubRemark')" >
<el-input v-model='addMsg.Remark' class="w210" type='textarea' maxlength='500'></el-input>
</el-form-item>
</li>
</ul>
</el-form>
</div>
<div class="_vr_right fl">
<p class="_tit">{{$t('salesModule.ZixunHotLine')}}</p>
<div class="charts" style="margin-top: 20px;">
<el-col :span='24'>
<div id="chartsMap" style="height:630px;width:850px;"></div>
</el-col>
</div>
</div>
</div>
<div class="_mc_edit _scrollbar" :class="addShow==true?'edHeight':''">
<p class="_tit">{{$t('salesModule.addCustomer')}}
<span class="fr">
<button class="hollowFixedBtn" type="button"
@click="cancelEdit(),resetForm('addMsg')">{{$t('pub.cancelBtn')}}</button>
<button type="button" class="normalBtn" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button>
</span>
</p>
<el-form class="_info_box clearfix" :model="addMsg" :rules="rules" ref="addMsg" label-width="120px">
<ul class="_form clearfix">
<li>
<el-form-item :label="$t('fnc.khleixing')" prop="linshig">
<div class="w210">
<el-radio v-model="addMsg.linshig"
@change="addMsg.CustomerName = '', addMsg.CustomerInfoId = 0, AppCoustomer = []" label="1">
{{$t('salesModule.InformalClient')}}</el-radio>
<el-radio v-model="addMsg.linshig"
@change="addMsg.CustomerName = '', addMsg.CustomerInfoId = 0, AppCoustomer = []" label="2">
{{$t('salesModule.LinshiCustomer')}}</el-radio>
</div>
</el-form-item>
</li>
<li>
<el-form-item :label="$t('pub.Customer')" prop="CustomerInfoId">
<el-select :multiple="false" filterable remote reserve-keyword :placeholder="$t('pub.PleaseKeyWords')"
:remote-method="getAppCoustomer" @change="getAppCoustomerName" :loading="loading"
v-model="addMsg.CustomerInfoId" v-if="addMsg.linshig == '1'" class="w210 height-auto">
<el-option :placeholder="$t('pub.pleaseSel')" v-for="item in AppCoustomer" :key="item.customerId"
:label="`${item.customerName}(${item.contact})`" :value="item.customerId">
</el-option>
</el-select>
<el-input v-else v-model="addMsg.CustomerName" :placeholder="$t('pub.pleaseImport')" class="w210">
</el-input>
</el-form-item>
</li>
<li>
<el-form-item :label="$t('salesModule.XunwenLine')" prop="LineId">
<el-select v-model="addMsg.LineId" class="w210" :placeholder="$t('pub.pleaseSel')"
@change="getLineTeamList(addMsg.LineId)">
<el-option :placeholder="$t('pub.pleaseSel')" v-for="item in InquireLineList" :key="item.LineID"
:label="item.LineName" :value="item.LineID">
</el-option>
</el-select>
</el-form-item>
</li>
<li>
<el-form-item :label="$t('advmanager.v_xilie')">
<el-select v-model="addMsg.LineteamId" class="w210" :placeholder="$t('pub.pleaseSel')">
<el-option :label="$t('system.ph_buxian')" value=''></el-option>
<el-option :placeholder="$t('pub.pleaseSel')" v-for="item in LineteamList" :key="item.id"
:label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</li>
<li>
<el-form-item :label="$t('Airticket.Air_StartTime')" prop="DepartTime">
<el-date-picker clearable class="w210" v-model="addMsg.DepartTime" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" :placeholder="$t('admin.admin_choDate')">
</el-date-picker>
</el-form-item>
</li>
<li>
<el-form-item :label="$t('salesModule.PriceExpect')" prop="BudgetPrice">
<el-input v-model="addMsg.BudgetPrice" :placeholder="$t('pub.pleaseImport')" class="w210"></el-input>
</el-form-item>
</li>
<li>
<el-form-item :label="$t('salesModule.PeopleCount')" prop="PeopleNumber">
<el-input v-model="addMsg.PeopleNumber" :placeholder="$t('pub.pleaseImport')" class="w210"></el-input>
</el-form-item>
</li>
<li>
<el-form-item :label="$t('pub.pubRemark')">
<el-input v-model='addMsg.Remark' class="w210" type='textarea' maxlength='500'></el-input>
</el-form-item>
</li>
</ul>
</el-form>
</div>
</div>
</template>
<script>
export default {
data(){
return{
addMsg:{
CustomerInfoId:'',
LineId:'',
DepartTime:'',
BudgetPrice:'',
PeopleNumber:'',
LineteamId:'',
Remark:'',
linshig: '1',
CustomerName: ''
export default {
data() {
return {
addMsg: {
CustomerInfoId: '',
LineId: '',
DepartTime: '',
BudgetPrice: '',
PeopleNumber: '',
LineteamId: '',
Remark: '',
linshig: '1',
CustomerName: ''
},
loading: false,
rules: {
CustomerInfoId: [{
required: true,
message: "请输选择客户",
trigger: "change"
}],
LineId: [{
required: true,
message: "请输选择线路",
trigger: "change"
}],
DepartTime: [{
required: true,
message: "请选择时间",
trigger: "blur"
}],
contactNumber: [{
required: true,
message: "请输入联系电话",
trigger: "blur"
}],
BudgetPrice: [{
required: true,
message: "请输入预计价格",
trigger: "blur"
},
loading: false,
rules:{
CustomerInfoId:[{required: true, message: "请输选择客户", trigger: "change"}],
LineId:[{required: true, message: "请输选择线路", trigger: "change"}],
DepartTime:[{required: true, message: "请选择时间", trigger: "blur"}],
contactNumber:[
{required: true, message: "请输入联系电话", trigger: "blur"}
],
BudgetPrice:[{required: true, message: "请输入预计价格", trigger: "blur"},
{ pattern: this.$commonUtils.Regex.el_Isdecimal, message: "请输入正确的价格" }],
PeopleNumber:[{required: true, message: "请输入人数", trigger: "blur"},
{ pattern: this.$commonUtils.Regex.el_isInteger, message: "请输入正确的人数" }],
{
pattern: this.$commonUtils.Regex.el_Isdecimal,
message: "请输入正确的价格"
}
],
PeopleNumber: [{
required: true,
message: "请输入人数",
trigger: "blur"
},
addShow:false,
noData:false,
dayS:0,
dayArr:[],
inquireHotLine:[],
b2bClickHotLine:[],
inquireLineStatistical:[],
inquireHotLineStatistical:[],
b2bClickHotLineStatistical:[],
AppCoustomer:[],
InquireLineList:[],
LineteamList:[],
}
},methods:{
getAppCoustomerName(t){
this.AppCoustomer.forEach(x=>{
if (t == x.customerId){
this.addMsg.CustomerName = x.customerName
}
})
},
getInquireLineList(){ // 获取线路下拉
this.apipost('line_post_GetAllList',{},res=>{
if(res.data.resultCode==1){
this.InquireLineList = res.data.data;
}else{
this.$message.error(res.data.message)
}
},err=>{})
{
pattern: this.$commonUtils.Regex.el_isInteger,
message: "请输入正确的人数"
}
],
},
//获取系列列表
getLineTeamList(lineId) {
this.LineteamList = []
this.apipost("b2b_get_GetLineTeam", {
lineId: lineId
}, res => {
if(res.data.resultCode == 1) {
this.addMsg.LineteamId = ''
this.LineteamList = res.data.data;
}
});
},
getAppCoustomer(query){ // 获取客户列表
addShow: false,
noData: false,
dayS: 0,
dayArr: [],
inquireHotLine: [],
b2bClickHotLine: [],
inquireLineStatistical: [],
inquireHotLineStatistical: [],
b2bClickHotLineStatistical: [],
AppCoustomer: [],
InquireLineList: [],
LineteamList: [],
}
},
methods: {
getAppCoustomerName(t) {
this.AppCoustomer.forEach(x => {
if (t == x.customerId) {
this.addMsg.CustomerName = x.customerName
}
})
},
getInquireLineList() { // 获取线路下拉
this.apipost('line_post_GetAllList', {}, res => {
if (res.data.resultCode == 1) {
this.InquireLineList = res.data.data;
} else {
this.$message.error(res.data.message)
}
}, err => {})
},
//获取系列列表
getLineTeamList(lineId) {
this.LineteamList = []
this.apipost("b2b_get_GetLineTeam", {
lineId: lineId
}, res => {
if (res.data.resultCode == 1) {
this.addMsg.LineteamId = ''
this.LineteamList = res.data.data;
}
});
},
getAppCoustomer(query) { // 获取客户列表
if (query !== '') {
this.apipost('app_post_GetCustomerBrandByKeyWord',{customerInfo: query},res=>{
if(res.data.resultCode==1){
this.AppCoustomer = res.data.data;
}else{
this.$message.error(res.data.message)
}
},err=>{})
}else {
this.apipost('app_post_GetCustomerBrandByKeyWord', {
customerInfo: query
}, res => {
if (res.data.resultCode == 1) {
this.AppCoustomer = res.data.data;
} else {
this.$message.error(res.data.message)
}
}, err => {})
} else {
this.AppCoustomer = [];
}
},
getInquireLineNeed(){ //获取线条条数据
this.apipost('app_my_inquire_line_need',{},res=>{
if(res.data.resultCode==1){
this.inquireLineStatistical = res.data.data.inquireLineStatistical
this.inquireHotLineStatistical = res.data.data.inquireHotLineStatistical
this.b2bClickHotLineStatistical = res.data.data.b2bClickHotLineStatistical
if(this.inquireHotLineStatistical.length>0){
this.inquireHotLine=[]
this.dayArr=[]
this.inquireHotLineStatistical.forEach(x => {
this.dayArr.push(x.date.substring(5,x.date.length))
this.inquireHotLine.push(x.inquireCount)
});
}
if(this.b2bClickHotLineStatistical.length>0){
this.b2bClickHotLine=[]
this.b2bClickHotLineStatistical.forEach(x => {
this.b2bClickHotLine.push(x.clickCount)
});
}
this.chartsMap(this.inquireHotLine,this.b2bClickHotLine);
}else{
this.$message.error(res.data.message)
},
getInquireLineNeed() { //获取线条条数据
this.apipost('app_my_inquire_line_need', {}, res => {
if (res.data.resultCode == 1) {
this.inquireLineStatistical = res.data.data.inquireLineStatistical
this.inquireHotLineStatistical = res.data.data.inquireHotLineStatistical
this.b2bClickHotLineStatistical = res.data.data.b2bClickHotLineStatistical
if (this.inquireHotLineStatistical.length > 0) {
this.inquireHotLine = []
this.dayArr = []
this.inquireHotLineStatistical.forEach(x => {
this.dayArr.push(x.date.substring(5, x.date.length))
this.inquireHotLine.push(x.inquireCount)
});
}
if (this.b2bClickHotLineStatistical.length > 0) {
this.b2bClickHotLine = []
this.b2bClickHotLineStatistical.forEach(x => {
this.b2bClickHotLine.push(x.clickCount)
});
}
this.chartsMap(this.inquireHotLine, this.b2bClickHotLine);
} else {
this.$message.error(res.data.message)
}
}, err => {})
},
chartsMap(see, clc) { // 画饼
var then = this;
if (then.inquireLineStatistical && then.inquireLineStatistical.length > 0) {
let myChart = this.$echarts.init(document.getElementById('chartsMap'));
myChart.setOption({
title: {
text: then.inquireLineStatistical[0].lineName,
left: 'left',
textStyle: {
fontWeight: 'bold',
fontSize: 14,
color: '#333333',
height: '30px'
},
padding: [
20, // 上
20, // 右
20, // 下
20, // 左
]
},
backgroundColor: '#fff',
legend: {
icon: 'rect',
selectedMode: false,
orient: 'vertical',
x: 'right',
data: ['b2b点击', '询价']
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
animation: false,
label: {
backgroundColor: '#ccc',
borderColor: '#aaa',
borderWidth: 1,
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0,
textStyle: {
color: '#222'
}
}
},err=>{})
},
chartsMap(see,clc){ // 画饼
var then = this;
let myChart = this.$echarts.init(document.getElementById('chartsMap'));
myChart.setOption({
title: {
text: then.inquireLineStatistical[0].lineName,
left: 'left',
textStyle:{
fontWeight:'bold',
fontSize:14,
color:'#333333',
height:'30px'
},
padding: [
20, // 上
20, // 右
20, // 下
20, // 左
]
},
backgroundColor: '#fff',
legend: {
icon: 'rect',
selectedMode:false,
orient: 'vertical',
x: 'right',
data:['b2b点击','询价']
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
animation: false,
label: {
backgroundColor: '#ccc',
borderColor: '#aaa',
borderWidth: 1,
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0,
textStyle: {
color: '#222'
}
}
}
}
},
xAxis: {
type: 'category',
axisLine: {
show: false,
lineStyle: {
width: 30
}
},
axisLabel: {
interval: 5
},
axisTick: false,
data: then.dayArr,
},
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: {
show: false
},
scale: true,
minInterval: 1,
type: 'value',
axisLabel: {
formatter: '{value} 个'
}
},
series: [{
name: 'b2b点击',
type: 'line',
smooth: false,
data: clc,
lineStyle: {
width: 3,
color: '#50C291',
},
xAxis: {
type: 'category',
axisLine: {
show: false,
lineStyle:{
width:30
}
},
axisLabel:{interval: 5},
axisTick:false,
data: then.dayArr,
itemStyle: {
borderWidth: 2,
color: '#50C291'
},
grid: {
x:25,
y:60,
x2:5,
y2:20,
containLabel: true
symbol: 'none',
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
}
}
},
{
name: '询价',
type: 'line',
smooth: false,
data: see,
lineStyle: {
width: 3,
color: '#FF793E',
},
yAxis: {
type: 'category',
data:['10','20','30','40','50','60','70','80','90','100'],
axisLine: {show: false},
axisTick:false,
splitLine:{
show:false
},
scale: true,
minInterval:1,
type: 'value',
axisLabel:{formatter:'{value} 个'}
itemStyle: {
borderWidth: 2,
color: '#FF793E'
},
series: [
{
name: 'b2b点击',
type: 'line',
smooth:false,
data: clc,
lineStyle:{
width:3,
color:'#50C291',
},
itemStyle:{
borderWidth:2,
color:'#50C291'
},
symbol:'none',
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
}
}
},
{
name: '询价',
type: 'line',
smooth:false,
data: see,
lineStyle:{
width:3,
color:'#FF793E',
},
itemStyle:{
borderWidth:2,
color:'#FF793E'
},
symbol:'none',
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
}
}
}
]
},true)
},
submitForm(addMsg) {//提交创建、修改表单
this.$refs[addMsg].validate((valid) => {
if (valid) {
this.saveVisa()
} else {
return false;
symbol: 'none',
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
}
}
});
},
saveVisa(){ // 保存
this.apipost('app_add_inquire',this.addMsg,res=>{
if(res.data.resultCode==1){
this.$message.success(res.data.message)
this.addShow=false
this.initMsg()
this.getInquireLineNeed()
}else{
this.$message.error(res.data.message)
}
},err=>{})
},
cancelEdit(){ // 取消新增
this.addShow=false
}
]
}, true)
}
},
submitForm(addMsg) { //提交创建、修改表单
this.$refs[addMsg].validate((valid) => {
if (valid) {
this.saveVisa()
} else {
return false;
}
});
},
saveVisa() { // 保存
this.apipost('app_add_inquire', this.addMsg, res => {
if (res.data.resultCode == 1) {
this.$message.success(res.data.message)
this.addShow = false
this.initMsg()
},
initMsg(){
this.LineteamList = []
this.addMsg={
CustomerInfoId:'',
LineId:'',
DepartTime:'',
BudgetPrice:'',
PeopleNumber:'',
LineteamId:'-1',
Remark:''
}
},
resetForm(formName) { // 重置表单
this.$refs[formName].resetFields();
},
getCountDays(){
var curDate = new Date();
// 获取当前月份
var curMonth = curDate.getMonth();
// 实际月份比curMonth大1，下面将月份设置为下一个月
curDate.setMonth(curMonth+1);
// 将日期设置为0，表示自动计算为上个月（这里指的是当前月份）的最后一天
curDate.setDate(0);
// 返回当前月份的天数
return curDate.getDate();
},
goUrl(path,id,name) {
this.$router.push({ name: path,query:{"id":id,"name":name} })
this.getInquireLineNeed()
} else {
this.$message.error(res.data.message)
}
}, err => {})
},
cancelEdit() { // 取消新增
this.addShow = false
this.initMsg()
},
initMsg() {
this.LineteamList = []
this.addMsg = {
CustomerInfoId: '',
LineId: '',
DepartTime: '',
BudgetPrice: '',
PeopleNumber: '',
LineteamId: '-1',
Remark: ''
}
},mounted(){
// this.dayS = this.getCountDays()
// for(let i=1;i<=this.dayS;i++){
// this.dayArr.push(i+'日')
// }
},
this.getInquireLineNeed()
this.getInquireLineList()
resetForm(formName) { // 重置表单
this.$refs[formName].resetFields();
},
getCountDays() {
var curDate = new Date();
// 获取当前月份
var curMonth = curDate.getMonth();
// 实际月份比curMonth大1，下面将月份设置为下一个月
curDate.setMonth(curMonth + 1);
// 将日期设置为0，表示自动计算为上个月（这里指的是当前月份）的最后一天
curDate.setDate(0);
// 返回当前月份的天数
return curDate.getDate();
},
goUrl(path, id, name) {
this.$router.push({
name: path,
query: {
"id": id,
"name": name
}
})
}
},
mounted() {
// this.dayS = this.getCountDays()
// for(let i=1;i<=this.dayS;i++){
// this.dayArr.push(i+'日')
// }
this.getInquireLineNeed()
this.getInquireLineList()
}
}
}
</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