Skip to content

H
hu-shoujijingfen-h5
Commit 2193009c by chenweisong
Options

init

parent ab0bc293
Showing with 1067 additions and 1615 deletions
.gitignore
.DS_Store
node_modules
/dist
/kpi
# local env files ### IntelliJ IDEA ###
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea .idea
.vscode .svn
*.suo *.iws
*.ntvs*
*.njsproj
*.sln
*.sw?
*.iml *.iml
*.zip *.ipr
*.rar
### NetBeans ###
/nbproject/private/
/build/
/nbbuild/
dist/
kpi/
/nbdist/
/.nb-gradle/
node_modules/
\ No newline at end of file
src/components/app/index/area.vue deleted 100644 → 0
<template>
<transition name="slide-fade">
<div v-show="modelVisible"
class="models">
<mt-header title="地区选择">
<span icon="back"
@click="hideModel"
slot="right">×</span>
</mt-header>
<div class="content">
<div class="items">
<!-- // 等级 ，0 是省，1 是市，2 是区或者分公司，3 网格 4 渠道-->
<!-- 省账号进来可以选 省 市 区 -->
<div v-if="userInfo.level == 0">
<div>
<div class="items-header">省份</div>
<div class="items-body">
<div @click="changeProvince()"
class="items-body-item items-body-item-active">全省
</div>
<div class="clearfix"></div>
</div>
<div class="bg-height"></div>
</div>
<div>
<div class="items-header">地市</div>
<div class="items-body items-bodyd-2">
<div v-for="(c,i) in cityList"
:key="c.id"
@click="change(c.level, c.id,c.name)"
:class="{'items-body-item-active':c.id == areaId}"
class="items-body-item">{{c.name | valueFromt}}
</div>
<div class="clearfix"></div>
</div>
<div class="bg-height"></div>
</div>
<div v-show="showArea">
<div class="items-header">区县</div>
<div class="items-body items-body-2">
<div v-if="!areaList.length"
class="no-message">暂无区县数据
</div>
<div v-for="(c,i) in areaList"
:key="c.id"
@click="change(c.level, c.id,c.name)"
:class="{'items-body-item-active':c.id == areaId}"
class="items-body-item">{{c.name | valueFromt}}
</div>
<div class="clearfix"></div>
</div>
<div class="bg-height"></div>
</div>
</div>
<!-- 市账号进来可以选 区 、网格、渠道 -->
<div v-if="userInfo.level == 1">
<div>
<div class="items-header">地市</div>
<div class="items-body items-body-2">
<div @click="changeCity"
class="items-body-item items-body-item-active">{{ userInfo.area | valueFromt}}
</div>
<div class="clearfix"></div>
</div>
<div class="bg-height"></div>
</div>
<div v-show="showArea">
<div class="items-header">区县</div>
<div class="items-body items-body-2">
<div v-if="!areaList.length"
class="no-message">暂无区县数据
</div>
<div v-for="(c,i) in areaList"
:key="c.id"
@click="change(c.level, c.id,c.name)"
:class="{'items-body-item-active':c.id == areaId}"
class="items-body-item">{{c.name | valueFromt}}
</div>
<div class="clearfix"></div>
</div>
<div class="bg-height"></div>
</div>
</div>
<!-- 区 账号进来可以选 网格、渠道 -->
<div v-if="userInfo.level == 2">
<div v-show="showArea">
<div class="items-header">区县</div>
<div class="items-body items-body-2">
<div @click="changeArea"
class="items-body-item items-body-item-active">{{ userInfo.area | valueFromt}}
</div>
<div class="clearfix"></div>
</div>
<div class="bg-height"></div>
</div>
</div>
</div>
</div>
<div class="footer">
<div @click="reset"
class="left">重置
</div>
<div @click="submit"
class="right">确定
</div>
</div>
</div>
</transition>
</template>
<script>
import {Toast, Indicator} from "mint-ui";
export default {
components: {},
props: {
// 是否展示 model
showModel: {
type: Boolean,
default: false
},
// 是否展示 区县
showArea: {
type: Boolean,
default: true
},
// 选中的值
selectArea: {
type: Object,
default() {
return {
// 层级 ，用户身份接口的： 0 是省，1 是市，2 是区或者分公司-
// 478 地区筛选接口的是：省是1 地市是2 区县是3 网格是4 渠道是5
level: 1, // 地区层级
areaId: '', // 731, //地区id
selectAreaName: '' //选择了的地区的名字
}
}
}
},
filters: {
// 去掉数值前面的字母
valueFromt: function (value) {
if (!value) return "";
if (value.includes("_") && value[1] == '_') {
return value.slice(2);
} else {
return value;
}
}
},
data() {
return {
// firstTimes: true,
modelVisible: false,
areas: [],
cityList: [], // 市的 list
areaList: [], //区的 list
areaId: "", // 提交的选择的 id
// 层级 ，用户身份接口的： 0 是省，1 是市，2 是区或者分公司-
// 478 地区接口的是：省是1 地市是2 区县是3 网格是4 渠道是5
level: "", // 提交的选择的 level
selectAreaName: "全省", //选择了的名字
userInfo: {
account: this.$route.query.account, // "XUSHENG1",
aid: this.$route.query.aid, // 18411, //地区id
areaId: this.$route.query.areaId, // 731, //地区id
area: this.$route.query.area, // "A_长沙", 地区名
id: this.$route.query.id, // "OCxusheng1", 用户id
level: parseInt(this.$route.query.level), // 等级 ，0 是省，1 是市，2 是区或者分公司
phone: this.$route.query.phone, // "13873110056",
pid: this.$route.query.pid, // 0, 上级id
username: this.$route.query.username, // "徐胜", 用户名
}
};
},
watch: {
showModel(value) {
this.modelVisible = value;
},
selectArea: {
handler(value, oldVal) {
if (value) {
console.log(value)
this.change(Number(value.level), value.areaId, value.selectAreaName)
}
},
deep: true
}
},
methods: {
submit() {
let obj = {
level: this.level,
areaId: this.areaId,
selectAreaName: this.selectAreaName
};
this.$emit("ok", obj);
this.modelVisible = false;
this.$emit("hide", 1);
},
reset() {
if (this.userInfo.level === 0) {
this.changeProvince();
} else {
this.areaId = this.userInfo.aid
}
},
hideModel(type) {
this.modelVisible = false;
this.$emit("hide", 1);
},
change(level, id, name) {
let userLevel = this.userInfo.level;
this.$emit("changeLevel", level, id, name);
this.areaId = id;
this.level = level;
this.selectAreaName = name;
if (userLevel === 0) {
if (level === 1) {
let cur = this.areas.find((a) => {
return a.id === id
});
console.log(cur)
this.areaList = cur.children;
}
} else if (userLevel === 1) {
if (level === 2) {
}
}
},
changeProvince() {
this.areaId = 0;
this.level = 0;
this.selectAreaName = "全省";
},
changeCity() {
this.areaId = this.userInfo.aid;
this.level = Number(this.userInfo.level);
this.selectAreaName = this.userInfo.area;
},
changeArea() {
this.areaId = this.userInfo.aid;
this.level = Number(this.userInfo.level);
this.selectAreaName = this.userInfo.area;
},
getData(level, id) {
console.log('level :', level)
if (level > 2) {
return
}
Indicator.open();
this.$http
.post(this.$urls.areaList, {})
.then(res => {
Indicator.close();
if (res.data.code === 200) {
let areas = res.data.data.children;
console.log("areas", areas)
this.areas = JSON.parse(JSON.stringify(areas))
if (level === 0) {
this.cityList = areas;
if (areas.length && areas[0].children.length) {
this.areaList = areas[0].children;
}
} else if (level === 1) {
this.areaList = areas;
} else if (level === 2) {
}
} else {
Toast(res.data.message);
}
})
.catch(error => {
console.error(error);
});
}
},
created() {
this.getData(this.userInfo.level, this.userInfo.aid);
},
mounted() {
}
};
</script>
<style lang="less" scoped>
.font-family-fn(@family) {
font-family: @family;
}
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
transition: all 0.15s ease;
}
.slide-fade-leave-active {
transition: all 0.15s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
.no-message {
font-size: 0.26rem;
text-align: center;
}
.models .mint-header {
background-color: #f4f4f4;
color: #333;
}
.models .mint-header-button > span {
font-size: 0.5rem;
color: inherit;
text-decoration: none;
}
.models {
color: #2f2f2f;
width: 100%;
height: auto;
z-index: 99999999;
background: #fff;
padding-bottom: 1rem;
position: fixed;
top: 0;
bottom: 0;
overflow-y: scroll;
overflow-x: hidden;
.bg-height {
height: 0.2rem;
width: 100%;
background-color: #f4f4f4;
}
.mint-header .mint-button {
padding-right: 0.3rem;
}
.mint-popup-right {
width: 100%;
min-height: 100%;
border-radius: 0;
}
.content {
overflow: scroll;
font-size: 0.3rem;
min-height: 13rem;
padding-bottom: 1.4rem;
.items {
.items-header {
padding: 0 0.3rem;
height: 0.8rem;
line-height: 0.8rem;
text-align: left;
}
.items-body {
margin-bottom: 0.2rem;
padding: 0 0.3rem;
.items-body-item {
font-size: 0.26rem;
text-align: center;
width: 1.92rem;
margin-top: 0.2rem;
float: left;
padding: 0.1rem 0.1rem;
border: 1px solid #eee;
margin-right: 0.2rem;
}
.items-body-item-grid {
height: 0.7rem;
// line-height: 0.7rem;
}
.items-body-item-channel {
height: 1rem;
}
.items-body-item-channel-center {
// line-height: 0.7rem;
}
.items-body-item:nth-child(3n) {
margin-right: 0rem;
}
.items-body-item-active {
background-color: #f4f4f4;
}
}
.items-body {
min-width: 4rem;
}
}
}
.footer {
position: fixed;
bottom: 0;
left: 0;
font-size: 0.3rem;
height: 1rem;
width: 100%;
.left,
.right {
float: left;
width: 50%;
text-align: center;
line-height: 1rem;
background-color: #fff;
border-top: 1px solid #eee;
}
.right {
color: #fff;
background-color: #0384df;
border-top: 1px solid #0384df;
}
}
}
</style>
src/views/app/ChannelMonthlyReport.vue
<template> <template>
<div class="container"> <div class="container">
<div class="data-block"> <div class="data-block">
<white-border-box :text="condition.channel.name | removeBlankStr" <white-border-box :text="condition.channel.name | removeBlankStr"
fontSize=".27rem" fontSize=".27rem"
width="3.76rem" width="3.76rem"
height=".56rem" height=".56rem"
@on-click="showChannels" @on-click="showChannels"
class="data-block-item"></white-border-box> class="data-block-item"></white-border-box>
<white-border-box :text="condition.time.displayVal" <white-border-box :text="condition.time.displayVal"
fontSize=".27rem" fontSize=".27rem"
width="2.36rem" width="2.36rem"
height=".56rem" height=".56rem"
@on-click="showDate" @on-click="showDate"
class="data-block-item"></white-border-box> class="data-block-item"></white-border-box>
<img class="data-block-item" <img class="data-block-item"
src="../../assets/app/99-magnifier.gif" src="../../assets/app/99-magnifier.gif"
@click="showSearchBarModal"/> @click="showSearchBarModal" />
<div class="data-block-tabs"><a @click="setType('A')"
class="data-block-tab "
:class="{'active': btn === 'A'}">业务数据</a><a @click="setType('B')"
:class="{'active': btn === 'B'}"
class="data-block-tab">渠道信息</a>
<div class="clearfix"></div>
</div>
</div>
<div v-show="btn === 'A'"
class="a-block">
<panel height="5.52rem"
margin=".16rem 0 0 0"
:headerStyle="{'height': '.92rem','line-height': '.92rem', 'font-size': '.32rem'}"
:bodyStyle="{'height': '4.6rem'}">
<span slot="title">客户发展</span>
<div slot="body">
<div id="barChart"
style="height: 4.6rem;width: 100%;"></div>
<div class="data-block-tabs"><a @click="setType('A')"
class="data-block-tab "
:class="{'active': btn === 'A'}">业务数据</a><a @click="setType('B')"
:class="{'active': btn === 'B'}"
class="data-block-tab">渠道信息</a>
<div class="clearfix"></div>
</div>
</div> </div>
<div v-show="btn === 'A'" </panel>
class="a-block">
<panel height="5.52rem" <panel height="3.08rem"
margin=".16rem 0 0 0" margin=".16rem 0 0 0"
:headerStyle="{'height': '.92rem','line-height': '.92rem', 'font-size': '.32rem'}" :headerStyle="{'height': '.92rem','line-height': '.92rem', 'font-size': '.32rem'}"
:bodyStyle="{'height': '4.6rem'}"> :bodyStyle="{'height': '2.16rem'}">
<span slot="title">客户发展</span> <span slot="title">4G发展</span>
<div slot="body"> <div class="g4-box"
<div id="barChart" slot="body">
style="height: 4.6rem;width: 100%;"></div> <div class="g4">
<div>{{result.sale_g4l_cnt}}</div>
</div> <div>月累计4G终端销量</div>
</panel> </div>
<div class="g4plus">
<panel height="3.08rem" <div>{{result.zdj_l_cnt}}</div>
margin=".16rem 0 0 0" <div>月累计4G+终端销量</div>
:headerStyle="{'height': '.92rem','line-height': '.92rem', 'font-size': '.32rem'}" </div>
:bodyStyle="{'height': '2.16rem'}"> <div class="clearfix"></div>
<span slot="title">4G发展</span> </div>
<div class="g4-box" </panel>
slot="body">
<div class="g4"> <panel height="5.52rem"
<div>{{result.sale_g4l_cnt}}</div> margin=".16rem 0 0 0"
<div>月累计4G终端销量</div> :headerStyle="{'height': '.92rem','line-height': '.92rem', 'font-size': '.32rem'}"
</div> :bodyStyle="{'height': '4.6rem'}">
<div class="g4plus"> <span slot="title">套餐办理量</span>
<div>{{result.zdj_l_cnt}}</div> <div style="width: 100%"
<div>月累计4G+终端销量</div> slot="body">
</div> <div class="list-item">
<div class="clearfix"></div> <span class="name">月累计4G套餐办理量</span>
</div> <span class="val">{{result.yw_g4l_num}}</span>
</panel> </div>
<div class="list-item">
<panel height="5.52rem" <span class="name">99及以上不限量套餐月办理量</span>
margin=".16rem 0 0 0" <span class="val">{{result.tc_num20}}</span>
:headerStyle="{'height': '.92rem','line-height': '.92rem', 'font-size': '.32rem'}" </div>
:bodyStyle="{'height': '4.6rem'}"> <!--<div class="list-item">-->
<span slot="title">套餐办理量</span> <!--<span class="name">99及以上不限量套餐新入网月办理量</span>-->
<div style="width: 100%" <!--<span class="val">0</span>-->
slot="body"> <!--</div>-->
<div class="list-item"> <div class="list-item">
<span class="name">月累计4G套餐办理量</span> <span class="name">新版和家庭套餐月办理量</span>
<span class="val">{{result.yw_g4l_num}}</span> <span class="val">{{result.tc_num11}}</span>
</div> </div>
<div class="list-item"> <div class="list-item">
<span class="name">99及以上不限量套餐月办理量</span> <span class="name">新版和家庭套餐新入网月办理量</span>
<span class="val">{{result.tc_num20}}</span> <span class="val">{{result.tc_num14}}</span>
</div> </div>
<!--<div class="list-item">--> <div class="list-item">
<!--<span class="name">99及以上不限量套餐新入网月办理量</span>--> <span class="name">移动大王卡新入网月新增</span>
<!--<span class="val">0</span>--> <span class="val">{{result.tc_num5}}</span>
<!--</div>--> </div>
<div class="list-item"> </div>
<span class="name">新版和家庭套餐月办理量</span> </panel>
<span class="val">{{result.tc_num11}}</span>
</div> <panel height="5.26rem"
<div class="list-item"> margin=".16rem 0 0 0"
<span class="name">新版和家庭套餐新入网月办理量</span> :headerStyle="{'height': '.92rem','line-height': '.92rem', 'font-size': '.32rem'}"
<span class="val">{{result.tc_num14}}</span> :bodyStyle="{'height': '4.34rem'}">
</div> <span slot="title">不限量套餐月办理量</span>
<div class="list-item"> <div slot="body"
<span class="name">移动大王卡新入网月新增</span> style="position: relative;">
<span class="val">{{result.tc_num5}}</span> <div id="pieChart"
</div> style="height: 4.34rem;width: 100%;"></div>
</div> <div class="chart-text-box">
</panel> <div class="chart-name">不限量套餐月办理量(新老用户含非高价值)</div>
<div class="chart-val">
<panel height="5.26rem" {{result.bxl_m}}
margin=".16rem 0 0 0"
:headerStyle="{'height': '.92rem','line-height': '.92rem', 'font-size': '.32rem'}"
:bodyStyle="{'height': '4.34rem'}">
<span slot="title">不限量套餐月办理量</span>
<div slot="body"
style="position: relative;">
<div id="pieChart"
style="height: 4.34rem;width: 100%;"></div>
<div class="chart-text-box">
<div class="chart-name">不限量套餐月办理量(新老用户含非高价值)</div>
<div class="chart-val">
{{result.bxl_m}}
</div>
</div>
</div>
</panel>
<panel height="6.78rem"
margin=".16rem 0 0 0"
:headerStyle="{'height': '.92rem','line-height': '.92rem', 'font-size': '.32rem'}"
:bodyStyle="{'height': '5.84rem'}">
<span slot="title">家庭市场</span>
<div slot="body">
<ul class="list-pic-item">
<li><img src="../../assets/app/channelReport/channel8.png"/></li>
<li class="name">新增宽带办理量</li>
<li class="val">{{result.kd_newl_cnt}}</li>
</ul>
<ul class="list-pic-item">
<li><img src="../../assets/app/channelReport/channel4.png"/></li>
<li class="name">新增宽带完工量</li>
<li class="val">{{result.kd_wg_m_cnt}}</li>
</ul>
<ul class="list-pic-item">
<li><img src="../../assets/app/channelReport/channel19.png"/></li>
<li class="name">宽带新增受理量</li>
<li class="val">{{result.curm_kd_add_accept_num || '-'}}</li>
</ul>
<ul class="list-pic-item">
<li><img src="../../assets/app/channelReport/channel1.png"/></li>
<li class="name">新增魔百和办理量</li>
<li class="val">{{result.mbh_new_l_cnt}}</li>
</ul>
<div class="clearfix"></div>
</div>
</panel>
<panel height="4.21rem"
margin=".16rem 0 0 0"
:headerStyle="{'height': '.92rem','line-height': '.92rem', 'font-size': '.32rem'}"
:bodyStyle="{'height': '3.29rem'}">
<span slot="title">和包业务</span>
<div slot="body">
<ul class="list-pic-item">
<li><img src="../../assets/app/channelReport/channel11.png"/></li>
<li class="name">推荐下载量</li>
<li class="val">{{result.hbtj_l_cnt}}</li>
</ul>
<ul class="list-pic-item">
<li><img src="../../assets/app/channelReport/channel6.png"/></li>
<li class="name">绑卡量</li>
<li class="val">{{result.hbbk_l_cnt}}</li>
</ul>
<div class="clearfix"></div>
</div>
</panel>
<panel height="4.21rem"
margin=".16rem 0 0 0"
:headerStyle="{'height': '.92rem','line-height': '.92rem', 'font-size': '.32rem'}"
:bodyStyle="{'height': '3.29rem'}">
<span slot="title">月累计缴费</span>
<div slot="body">
<ul class="list-pic-item">
<li><img src="../../assets/app/channelReport/channel9.png"/></li>
<li class="name">缴费金额</li>
<li class="val">{{result.pay_l_fee}}<span class="unit">(元)</span></li>
</ul>
<ul class="list-pic-item">
<li><img src="../../assets/app/channelReport/channel5.png"/></li>
<li class="name">缴费客户数</li>
<li class="val">{{result.pay_l_cnt}}</li>
</ul>
<ul class="list-pic-item">
<li><img src="../../assets/app/channelReport/channel2.png"/></li>
<li class="name">缴费笔数</li>
<li class="val">{{result.pay_m_num}}</li>
</ul>
<div class="clearfix"></div>
</div>
</panel>
<panel height="4.21rem"
margin=".16rem 0 0 0"
:headerStyle="{'height': '.92rem','line-height': '.92rem', 'font-size': '.32rem'}"
:bodyStyle="{'height': '3.29rem'}">
<span slot="title">月累计业务量</span>
<div slot="body">
<ul class="list-pic-item">
<li><img src="../../assets/app/channelReport/channel10.png"/></li>
<li class="name">六项业务累计量</li>
<li class="val">{{result.hxyw_l_cnt}}</li>
</ul>
<ul class="list-pic-item">
<li><img src="../../assets/app/channelReport/channel7.png"/></li>
<li class="name">累计业务量</li>
<li class="val">{{result.yw_l_num}}</li>
</ul>
<ul class="list-pic-item">
<li><img src="../../assets/app/channelReport/channel3.png"/></li>
<li class="name">累计服务客户数</li>
<li class="val">{{result.yw_l_cnt}}</li>
</ul>
<div class="clearfix"></div>
</div>
</panel>
<panel height="1.84rem" </div>
margin=".16rem 0" </div>
:headerStyle="{'height': '.92rem','line-height': '.92rem', 'font-size': '.32rem'}" </div>
:bodyStyle="{'height': '.92rem'}"> </panel>
<span slot="title">家庭网</span>
<div class="list-item" <panel height="4.21rem"
slot="body"> margin=".16rem 0 0 0"
<span class="name">家庭网月办理量</span> :headerStyle="{'height': '.92rem','line-height': '.92rem', 'font-size': '.32rem'}"
<span class="val">{{result.jjw_l_cnt}}</span> :bodyStyle="{'height': '3.29rem'}">
</div> <span slot="title">家庭市场</span>
</panel> <div slot="body">
<ul class="list-pic-item">
<li><img src="../../assets/app/channelReport/channel8.png" /></li>
<li class="name">新增宽带办理量</li>
<li class="val">{{result.kd_newl_cnt}}</li>
</ul>
<ul class="list-pic-item">
<li><img src="../../assets/app/channelReport/channel4.png" /></li>
<li class="name">新增宽带完工量</li>
<li class="val">{{result.kd_wg_m_cnt}}</li>
</ul>
<ul class="list-pic-item">
<li><img src="../../assets/app/channelReport/channel1.png" /></li>
<li class="name">新增魔百和办理量</li>
<li class="val">{{result.mbh_new_l_cnt}}</li>
</ul>
<div class="clearfix"></div>
</div> </div>
<div v-show="btn === 'B'" </panel>
class="b-block">
<div class="b-block-item" <panel height="4.21rem"
style="height: unset;position: relative;"> margin=".16rem 0 0 0"
<div class="icon-box" :headerStyle="{'height': '.92rem','line-height': '.92rem', 'font-size': '.32rem'}"
style="float: unset;position: absolute;top: 50%; height: .63rem; :bodyStyle="{'height': '3.29rem'}">
<span slot="title">和包业务</span>
<div slot="body">
<ul class="list-pic-item">
<li><img src="../../assets/app/channelReport/channel11.png" /></li>
<li class="name">推荐下载量</li>
<li class="val">{{result.hbtj_l_cnt}}</li>
</ul>
<ul class="list-pic-item">
<li><img src="../../assets/app/channelReport/channel6.png" /></li>
<li class="name">绑卡量</li>
<li class="val">{{result.hbbk_l_cnt}}</li>
</ul>
<div class="clearfix"></div>
</div>
</panel>
<panel height="4.21rem"
margin=".16rem 0 0 0"
:headerStyle="{'height': '.92rem','line-height': '.92rem', 'font-size': '.32rem'}"
:bodyStyle="{'height': '3.29rem'}">
<span slot="title">月累计缴费</span>
<div slot="body">
<ul class="list-pic-item">
<li><img src="../../assets/app/channelReport/channel9.png" /></li>
<li class="name">缴费金额</li>
<li class="val">{{result.pay_l_fee}}<span class="unit">(元)</span></li>
</ul>
<ul class="list-pic-item">
<li><img src="../../assets/app/channelReport/channel5.png" /></li>
<li class="name">缴费客户数</li>
<li class="val">{{result.pay_l_cnt}}</li>
</ul>
<ul class="list-pic-item">
<li><img src="../../assets/app/channelReport/channel2.png" /></li>
<li class="name">缴费笔数</li>
<li class="val">{{result.pay_m_num}}</li>
</ul>
<div class="clearfix"></div>
</div>
</panel>
<panel height="4.21rem"
margin=".16rem 0 0 0"
:headerStyle="{'height': '.92rem','line-height': '.92rem', 'font-size': '.32rem'}"
:bodyStyle="{'height': '3.29rem'}">
<span slot="title">月累计业务量</span>
<div slot="body">
<ul class="list-pic-item">
<li><img src="../../assets/app/channelReport/channel10.png" /></li>
<li class="name">六项业务累计量</li>
<li class="val">{{result.hxyw_l_cnt}}</li>
</ul>
<ul class="list-pic-item">
<li><img src="../../assets/app/channelReport/channel7.png" /></li>
<li class="name">累计业务量</li>
<li class="val">{{result.yw_l_num}}</li>
</ul>
<ul class="list-pic-item">
<li><img src="../../assets/app/channelReport/channel3.png" /></li>
<li class="name">累计服务客户数</li>
<li class="val">{{result.yw_l_cnt}}</li>
</ul>
<div class="clearfix"></div>
</div>
</panel>
<panel height="1.84rem"
margin=".16rem 0"
:headerStyle="{'height': '.92rem','line-height': '.92rem', 'font-size': '.32rem'}"
:bodyStyle="{'height': '.92rem'}">
<span slot="title">家庭网</span>
<div class="list-item"
slot="body">
<span class="name">家庭网月办理量</span>
<span class="val">{{result.jjw_l_cnt}}</span>
</div>
</panel>
</div>
<div v-show="btn === 'B'"
class="b-block">
<div class="b-block-item"
style="height: unset;position: relative;">
<div class="icon-box"
style="float: unset;position: absolute;top: 50%; height: .63rem;
margin-top: -.315rem;"> margin-top: -.315rem;">
<img src="../../assets/app/channelReport/channel18.png"/> <img src="../../assets/app/channelReport/channel18.png" />
</div> </div>
<div class="item-content" <div class="item-content"
style=" margin-left: 1.04rem;"> style=" margin-left: 1.04rem;">
<ul style="margin-top: .23rem;"> <ul style="margin-top: .23rem;">
<li>{{result.area_name | valueFromt}}&nbsp;&nbsp;&nbsp;{{result.cnty_name | valueFromt}}</li> <li>{{result.area_name | valueFromt}}&nbsp;&nbsp;&nbsp;{{result.cnty_name | valueFromt}}</li>
<li>{{result.towns_name | valueFromt}}&nbsp;&nbsp;&nbsp;{{result.village_name | valueFromt}} <li>{{result.towns_name | valueFromt}}&nbsp;&nbsp;&nbsp;{{result.village_name | valueFromt}}</li>
</li> <li>归属区域:&nbsp;&nbsp;&nbsp;{{result.area_desc | valueFromt}}</li>
<li>归属区域:&nbsp;&nbsp;&nbsp;{{result.area_desc | valueFromt}}</li> <li>地址:&nbsp;&nbsp;&nbsp;{{result.chnl_addr | valueFromt}}</li>
<li>地址:&nbsp;&nbsp;&nbsp;{{result.chnl_addr | valueFromt}}</li> </ul>
</ul> </div>
</div> <div class="clearfix"></div>
<div class="clearfix"></div> </div>
</div> <div class="b-block-item"
<div class="b-block-item" style="height: 2.52rem">
style="height: 2.52rem"> <div class="icon-box">
<div class="icon-box"> <img src="../../assets/app/channelReport/channel14.png" />
<img src="../../assets/app/channelReport/channel14.png"/> </div>
</div> <div class="item-content">
<div class="item-content"> <ul style="margin-top: .15rem;">
<ul style="margin-top: .15rem;"> <li>
<li> <div style="width: calc(100% - .76rem);display: inline-block;float: left;">
<div style="width: calc(100% - .76rem);display: inline-block;float: left;"> {{result.chnl_name | removeBlankStr}}
{{result.chnl_name | removeBlankStr}}
</div>
</div> <span :style="{'background-color': (result.state_name === '冻结' ? '#FF1802' : '#079928')}"
<span :style="{'background-color': (result.state_name === '冻结' ? '#FF1802' : '#079928')}" style="text-align: center;border-radius: 3px;font-size: .24rem;color: #FFFFFF;display: inline-block;width: .76rem;height: .34rem;">{{result.state_name
style="text-align: center;border-radius: 3px;font-size: .24rem;color: #FFFFFF;display: inline-block;width: .76rem;height: .34rem;">{{result.state_name
}}</span> }}</span>
<div class="clearfix"></div> <div class="clearfix"></div>
</li> </li>
<li> <li>
编号:&nbsp;&nbsp;&nbsp;{{result.chnl_code}} 编号:&nbsp;&nbsp;&nbsp;{{result.chnl_code}}
</li> </li>
<li> <li>
<!--<div v-if="result.chnl_level === '-' || result.chnl_level === '0'">--> <!--<div v-if="result.chnl_level === '-' || result.chnl_level === '0'">-->
<!--<img v-for="u in 5" src="../../assets/app/star1.png"/>--> <!--<img v-for="u in 5" src="../../assets/app/star1.png"/>-->
<!--</div>--> <!--</div>-->
<!--<div v-else>--> <!--<div v-else>-->
<!--<img v-for="u in parseInt(result.chnl_level)" src="../../assets/app/channelReport/star.png"/>--> <!--<img v-for="u in parseInt(result.chnl_level)" src="../../assets/app/channelReport/star.png"/>-->
<!--<img v-for="u in (5 - parseInt(result.chnl_level))" src="../../assets/app/star1.png"/>--> <!--<img v-for="u in (5 - parseInt(result.chnl_level))" src="../../assets/app/star1.png"/>-->
<!--</div>--> <!--</div>-->
<div> <div>
<img v-for="u in starNum" <img v-for="u in starNum"
src="../../assets/app/channelReport/star.png"/> src="../../assets/app/channelReport/star.png" />
<img v-for="u in (6 - starNum)" <img v-for="u in (6 - starNum)"
src="../../assets/app/star1.png"/> src="../../assets/app/star1.png" />
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="b-block-item"> <div class="b-block-item">
<div class="icon-box"> <div class="icon-box">
<img src="../../assets/app/channelReport/channel12.png"/> <img src="../../assets/app/channelReport/channel12.png" />
</div> </div>
<div class="item-content"> <div class="item-content">
<ul style="margin-top: .37rem;"> <ul style="margin-top: .37rem;">
<li>大类型:&nbsp;&nbsp;&nbsp;{{result.chnl_typ_name}}</li> <li>大类型:&nbsp;&nbsp;&nbsp;{{result.chnl_typ_name}}</li>
<li>小类型:&nbsp;&nbsp;&nbsp;{{result.chnl_kind_name}}</li> <li>小类型:&nbsp;&nbsp;&nbsp;{{result.chnl_kind_name}}</li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="b-block-item"> <div class="b-block-item">
<div class="icon-box"> <div class="icon-box">
<img src="../../assets/app/channelReport/channel13.png"/> <img src="../../assets/app/channelReport/channel13.png" />
</div> </div>
<div class="item-content"> <div class="item-content">
<ul style="margin-top: .37rem;"> <ul style="margin-top: .37rem;">
<li>经营模式:&nbsp;&nbsp;&nbsp;{{result.oper_type_name }}</li> <li>经营模式:&nbsp;&nbsp;&nbsp;{{result.oper_type_name }}</li>
<li>经营性质:&nbsp;&nbsp;&nbsp;{{result.business_type_name }}</li> <li>经营性质:&nbsp;&nbsp;&nbsp;{{result.business_type_name }}</li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="b-block-item">
<div class="icon-box">
<img src="../../assets/app/channelReport/channel15.png"/>
</div>
<div class="item-content">
<ul style="margin-top: .37rem;">
<li>合同开始:&nbsp;&nbsp;&nbsp;{{result.effect_time }}</li>
</ul>
</div>
</div>
<div class="b-block-item"
style="height: 4.66rem;padding-bottom: .16rem;">
<div class="item-content"
style="width: 100%;margin-left: .05rem;">
<table cellspacing="0">
<tr>
<td>是否宽服站渠道</td>
<td>
<img class="right"
v-show="result.if_kfz !== '否'"
src="../../assets/app/channelReport/channel16.png"/>
<img class="false"
v-show="result.if_kfz === '否'"
src="../../assets/app/channelReport/channel17.png"/>
</td>
</tr>
<tr>
<td>是否连锁渠道</td>
<td>
<img class="right"
v-show="result.if_ls !== '否'"
src="../../assets/app/channelReport/channel16.png"/>
<img class="false"
v-show="result.if_ls === '否'"
src="../../assets/app/channelReport/channel17.png"/>
</td>
</tr>
<tr>
<td>是否自控渠道</td>
<td>
<img class="right"
v-show="result.if_zk !== '否'"
src="../../assets/app/channelReport/channel16.png"/>
<img class="false"
v-show="result.if_zk === '否'"
src="../../assets/app/channelReport/channel17.png"/>
</td>
</tr>
<tr>
<td>是否核心渠道</td>
<td>
<img class="right"
v-show="result.if_info !== '否'"
src="../../assets/app/channelReport/channel16.png"/>
<img class="false"
v-show="result.if_info === '否'"
src="../../assets/app/channelReport/channel17.png"/>
</td>
</tr>
<tr>
<td>是否核心商圈</td>
<td>
<img class="right"
v-show="result.if_shap !== '否'"
src="../../assets/app/channelReport/channel16.png"/>
<img class="false"
v-show="result.if_shap === '否'"
src="../../assets/app/channelReport/channel17.png"/>
</td>
</tr>
</table>
</div>
</div>
<div class="b-block-item">
<div class="icon-box">
<img src="../../assets/app/channelReport/channel15.png" />
</div> </div>
<area-picker @fetch-data="areaPickerFetchData" <div class="item-content">
:showModel="showModel" <ul style="margin-top: .37rem;">
@hide="hideModel"></area-picker> <li>合同开始:&nbsp;&nbsp;&nbsp;{{result.effect_time }}</li>
<ModelDate :endDate="condition.time.endDate" </ul>
:dateValue="condition.time.pickerDate" </div>
:showModel="showModelDate" </div>
@hide="hideModel" <div class="b-block-item"
@ok="submitDateModel"></ModelDate> style="height: 4.66rem;padding-bottom: .16rem;">
<SearchBar @fetch-data="searchBarFetchData"
:showModel="showSearchBar" <div class="item-content"
@hide="hideModel"></SearchBar> style="width: 100%;margin-left: .05rem;">
<table cellspacing="0">
<tr>
<td>是否宽服站渠道</td>
<td>
<img class="right"
v-show="result.if_kfz !== '否'"
src="../../assets/app/channelReport/channel16.png" />
<img class="false"
v-show="result.if_kfz === '否'"
src="../../assets/app/channelReport/channel17.png" />
</td>
</tr>
<tr>
<td>是否连锁渠道</td>
<td>
<img class="right"
v-show="result.if_ls !== '否'"
src="../../assets/app/channelReport/channel16.png" />
<img class="false"
v-show="result.if_ls === '否'"
src="../../assets/app/channelReport/channel17.png" />
</td>
</tr>
<tr>
<td>是否自控渠道</td>
<td>
<img class="right"
v-show="result.if_zk !== '否'"
src="../../assets/app/channelReport/channel16.png" />
<img class="false"
v-show="result.if_zk === '否'"
src="../../assets/app/channelReport/channel17.png" />
</td>
</tr>
<tr>
<td>是否核心渠道</td>
<td>
<img class="right"
v-show="result.if_info !== '否'"
src="../../assets/app/channelReport/channel16.png" />
<img class="false"
v-show="result.if_info === '否'"
src="../../assets/app/channelReport/channel17.png" />
</td>
</tr>
<tr>
<td>是否核心商圈</td>
<td>
<img class="right"
v-show="result.if_shap !== '否'"
src="../../assets/app/channelReport/channel16.png" />
<img class="false"
v-show="result.if_shap === '否'"
src="../../assets/app/channelReport/channel17.png" />
</td>
</tr>
</table>
</div>
</div>
</div> </div>
<area-picker @fetch-data="areaPickerFetchData"
:showModel="showModel"
@hide="hideModel"></area-picker>
<ModelDate :endDate="condition.time.endDate"
:dateValue="condition.time.pickerDate"
:showModel="showModelDate"
@hide="hideModel"
@ok="submitDateModel"></ModelDate>
<SearchBar @fetch-data="searchBarFetchData"
:showModel="showSearchBar"
@hide="hideModel"></SearchBar>
</div>
</template> </template>
<script> <script>
import {Indicator, Toast} from 'mint-ui'; import { Indicator, Toast } from 'mint-ui';
import WhiteBorderBox from 'com/app/channelReport/WhiteBorderBox.vue'; import WhiteBorderBox from 'com/app/channelReport/WhiteBorderBox.vue';
import Panel from 'com/app/channelReport/Panel.vue'; import Panel from 'com/app/channelReport/Panel.vue';
import commonMixin from 'mixins/common/common.js'; import commonMixin from 'mixins/common/common.js';
import {formatDateTime, formatDateDay, deepCopyObj} from "libs/common/common"; import { formatDateTime, formatDateDay, deepCopyObj } from "libs/common/common";
import echarts from "echarts/lib/echarts"; import echarts from "echarts/lib/echarts";
import ModelDate from "com/app/add/modelDate.vue"; import ModelDate from "com/app/add/modelDate.vue";
import AreaPicker from "com/app/channelReport/areaPicker.vue"; import AreaPicker from "com/app/channelReport/areaPicker.vue";
import SearchBar from "com/app/channelReport/searchBar.vue"; import SearchBar from "com/app/channelReport/searchBar.vue";
// 引入图形组件 // 引入图形组件
import "echarts/lib/chart/bar"; import "echarts/lib/chart/bar";
import "echarts/lib/chart/pie"; import "echarts/lib/chart/pie";
// 引入提示框、legend和title组件 // 引入提示框、legend和title组件
import "echarts/lib/component/tooltip"; import "echarts/lib/component/tooltip";
import "echarts/lib/component/title"; import "echarts/lib/component/title";
import "echarts/lib/component/legend"; import "echarts/lib/component/legend";
export default { export default {
name: 'channel-report', name: 'channel-report',
components: { components: {
WhiteBorderBox, WhiteBorderBox,
Panel, Panel,
ModelDate, ModelDate,
AreaPicker, AreaPicker,
SearchBar SearchBar
},
mixins: [commonMixin],
data() {
return {
isFirstEnter: false, // 是否第一次进入，默认false
btn: 'A',
showModel: false,
showSearchBar: false,
showModelDate: false,
condition: {
areaId: '0',
channel: {
name: '请选择渠道',
code: ''
}, },
mixins: [commonMixin], time: {
data() { endDate: new Date().addDays(-1),
return { displayVal: formatDateTime(new Date().addDays(-1), 'YYYY-MM-DD'),
isFirstEnter: false, // 是否第一次进入，默认false pickerDate: new Date().addDays(-1),
btn: 'A', val: parseInt(formatDateDay(new Date(), -1, 'YYYYMMDD'))
showModel: false,
showSearchBar: false,
showModelDate: false,
condition: {
areaId: '0',
channel: {
name: '请选择渠道',
code: ''
},
time: {
endDate: new Date().addDays(-1),
displayVal: formatDateTime(new Date().addDays(-1), 'YYYY-MM-DD'),
pickerDate: new Date().addDays(-1),
val: parseInt(formatDateDay(new Date(), -1, 'YYYYMMDD'))
},
},
starNum: 0,
result: {
statis_date: '', // --时间
area_name: '', // --市州名称
cnty_name: '', // --归属业务区名称
towns_name: '', // --营业部名称
village_name: '', // --乡镇名称
area_desc: '', // --归属区域
chnl_addr: '', // --地址
chnl_name: '', // --渠道名称
state_name: '', // --状态
chnl_code: '', // --渠道编码
chnl_level: '', // --渠道星级
chnl_typ_name: '', // --大类型
chnl_kind_name: '', // --小类型
oper_type_name: '', // --经营模式
business_type_name: '', // --经营性质
effect_time: '', // --合同开始时间
if_kfz: '', // --是否宽服站渠道
if_ls: '', // --是否连锁渠道
if_zk: '', // --是否自控渠道
if_info: '', // --是否核心渠道
if_shap: '', // --是否核心商圈
cust_l_cnt: 0, // --月累计放号量
cust_skl_cnt: 0, // --月累计预配卡数量
tc_num8: 0, // --99元及以上不限量套餐新入网月办理量
tc_num5: 0, // --移动大王卡新入网月新增
fk_l_cnt: 0, // --福卡月办理量
sale_g4l_cnt: 0, // --月累计4G终端销量
zdj_l_cnt: 0, // --月累计4G加终端销量
yw_g4l_num: 0, // --月累计4G套餐办理量
tc_num20: 0, // --99元及以上不限量套餐月办理量
tc_num11: 0, // --新版和家庭套餐月办理量
tc_num14: 0, // --新版和家庭套餐新入网月办理量
tc_num2: 0, // --移动大王卡月新增
bxl_m: 0, // --不限量套餐月办理量(新老用户含非高价值)
dwk_18_38_m: 0, // --其中当月18和38大王卡(不限量套餐)
dwk_18_38_actv_m: 0, // --其中当月发展18和38大王卡日租包激活15次及以上
kd_newl_cnt: 0, // -- 月累计新增宽带办理量
kd_wg_m_cnt: 0, // -- 月累计新增宽带完工量
mbh_new_l_cnt: 0, // --月累计新增魔百和办理量
curm_kd_add_accept_num: 0,
hbtj_l_cnt: 0, //-- 月和包累计推荐下载量
hbbk_l_cnt: 0, // --月和包累计绑卡量
pay_l_fee: 0, //--月累计缴费金额(元),
pay_l_cnt: 0,// -- 月累计缴费客户数,
pay_m_num: 0,// -- 月累计缴费笔数
hxyw_l_cnt: 0, //六项业务月累计量
yw_l_num: 0, //月累计业务量
yw_l_cnt: 0, //--月累计服务客户数
jjw_l_cnt: 0// --家庭网月办理量
}
}
},
computed: {
model() {
return this.$store.state.meal.model;
},
date() {
return this.$store.state.meal.date;
},
firstCity() {
return this.$store.state.channel.firstAreas[0];
}
}, },
watch: { },
date(val) { starNum: 0,
this.condition.time.displayVal = formatDateTime(val, 'YYYY-MM-DD'); result: {
this.condition.time.val = parseInt(formatDateTime(val, 'YYYYMMDD')); statis_date: '', // --时间
this.condition.time.pickerDate = val; area_name: '', // --市州名称
this.fetchChannelDetailData() cnty_name: '', // --归属业务区名称
}, towns_name: '', // --营业部名称
firstCity(val) { village_name: '', // --乡镇名称
// console.log('firstCity :', val) area_desc: '', // --归属区域
let id = '' chnl_addr: '', // --地址
if (val) { chnl_name: '', // --渠道名称
id = val.id; state_name: '', // --状态
chnl_code: '', // --渠道编码
chnl_level: '', // --渠道星级
chnl_typ_name: '', // --大类型
chnl_kind_name: '', // --小类型
oper_type_name: '', // --经营模式
business_type_name: '', // --经营性质
effect_time: '', // --合同开始时间
if_kfz: '', // --是否宽服站渠道
if_ls: '', // --是否连锁渠道
if_zk: '', // --是否自控渠道
if_info: '', // --是否核心渠道
if_shap: '', // --是否核心商圈
cust_l_cnt: 0, // --月累计放号量
cust_skl_cnt: 0, // --月累计预配卡数量
tc_num8: 0, // --99元及以上不限量套餐新入网月办理量
tc_num5: 0, // --移动大王卡新入网月新增
fk_l_cnt: 0, // --福卡月办理量
sale_g4l_cnt: 0, // --月累计4G终端销量
zdj_l_cnt: 0, // --月累计4G加终端销量
yw_g4l_num: 0, // --月累计4G套餐办理量
tc_num20: 0, // --99元及以上不限量套餐月办理量
tc_num11: 0, // --新版和家庭套餐月办理量
tc_num14: 0, // --新版和家庭套餐新入网月办理量
tc_num2: 0, // --移动大王卡月新增
bxl_m: 0, // --不限量套餐月办理量(新老用户含非高价值)
dwk_18_38_m: 0, // --其中当月18和38大王卡(不限量套餐)
dwk_18_38_actv_m: 0, // --其中当月发展18和38大王卡日租包激活15次及以上
kd_newl_cnt: 0, // -- 月累计新增宽带办理量
kd_wg_m_cnt: 0, // -- 月累计新增宽带完工量
mbh_new_l_cnt: 0, // --月累计新增魔百和办理量
hbtj_l_cnt: 0, //-- 月和包累计推荐下载量
hbbk_l_cnt: 0, // --月和包累计绑卡量
pay_l_fee: 0, //--月累计缴费金额(元),
pay_l_cnt: 0,// -- 月累计缴费客户数,
pay_m_num: 0,// -- 月累计缴费笔数
hxyw_l_cnt: 0, //六项业务月累计量
yw_l_num: 0, //月累计业务量
yw_l_cnt: 0, //--月累计服务客户数
jjw_l_cnt: 0// --家庭网月办理量
}
}
},
computed: {
model() {
return this.$store.state.meal.model;
},
date() {
return this.$store.state.meal.date;
},
firstCity() {
return this.$store.state.channel.firstAreas[0];
}
},
watch: {
date(val) {
this.condition.time.displayVal = formatDateTime(val, 'YYYY-MM-DD');
this.condition.time.val = parseInt(formatDateTime(val, 'YYYYMMDD'));
this.condition.time.pickerDate = val;
this.fetchChannelDetailData()
},
firstCity(val) {
// console.log('firstCity :', val)
let id = ''
if (val) {
id = val.id;
}
// 这里需要请求第一个渠道数据
let _this = this
this.$http.post(this.$urls.data428, { area_id: id }).then((res) => {
let data = res.data;
if (data.code === 200) {
let firstChannel = data.data[0]
_this.condition.channel.code = firstChannel.id
_this.condition.channel.name = firstChannel.name
this.fetchChannelDetailData()
}
}).catch((err) => {
Indicator.close()
console.error(err)
})
},
'result.chnl_level'(val) {
if (val && val !== '0' && val !== '-' && val !== '无') {
this.starNum = parseInt(val);
} else {
this.starNum = 0;
}
},
'result.statis_date'(val) {
if (val) {
val = val.toString()
let dateStr = val.substring(0, 4) + '-' + val.substring(4, 6) + '-' + val.substring(6, 8)
if (dateStr !== this.condition.time.displayVal) {
this.condition.time.displayVal = dateStr;
this.condition.time.pickerDate = new Date(dateStr);
this.condition.time.val = parseInt(val)
}
}
}
},
filters: {
// 去掉数值前面的字母
valueFromt: function (value) {
if (!value) return "";
if (value.includes("_")) {
return value.slice(2);
} else {
return value;
}
},
removeBlankStr(value) {
return value.replace('&nbsp;', '');
}
},
methods: {
drawPie() {
// bxl_m --不限量套餐月办理量(新老用户含非高价值)
// dwk_18_38_m --其中当月18和38大王卡(不限量套餐)
// dwk_18_38_actv_m --其中当月发展18和38大王卡日租包激活15次及以上
let option = {
series: [
{
name: '访问来源',
type: 'pie',
radius: '50%',
center: ['17%', '72%'],
silent: true,
data: [],
label: {
show: function () {
return true;
},
align: 'left',
formatter: function (a) {
let arr1 = a.data.name.substring(0, 12);
let arr3 = a.data.name.substring(12);
if (arr1.indexOf('不限量套餐') > -1) {
return '';
} }
// 这里需要请求第一个渠道数据 return arr1 + '\n' + arr3 + '\n' + a.data.value;
let _this = this }
this.$http.post(this.$urls.data428, {area_id: id}).then((res) => {
let data = res.data;
if (data.code === 200) {
let firstChannel = data.data[0]
_this.condition.channel.code = firstChannel.id
_this.condition.channel.name = firstChannel.name
this.fetchChannelDetailData()
}
}).catch((err) => {
Indicator.close()
console.error(err)
})
}, },
'result.chnl_level'(val) { labelLine: {
if (val && val !== '0' && val !== '-' && val !== '无') { length2: 0,
this.starNum = parseInt(val); smooth: true
} else {
this.starNum = 0;
}
}, },
'result.statis_date'(val) { itemStyle: {
if (val) { emphasis: {
val = val.toString() shadowBlur: 10,
let dateStr = val.substring(0, 4) + '-' + val.substring(4, 6) + '-' + val.substring(6, 8) shadowOffsetX: 0,
if (dateStr !== this.condition.time.displayVal) { shadowColor: 'rgba(0, 0, 0, 0.5)'
this.condition.time.displayVal = dateStr; }
this.condition.time.pickerDate = new Date(dateStr);
this.condition.time.val = parseInt(val)
}
}
} }
}
]
};
let bxlm = parseInt(this.result.bxl_m);
let dwk = parseInt(this.result.dwk_18_38_m);
let dwkActv = parseInt(this.result.dwk_18_38_actv_m);
let rest = bxlm - dwk - dwkActv;
// option.color = ['#1D9DF7', '#FE3F3F', '#0BD80B']; // 蓝 红 绿
if (dwk !== 0 && dwkActv === 0) {
option.series[0].data.push({ value: dwk, name: '其中当月18和38大王卡 (不限量套餐)' })
option.color = ['#1D9DF7', '#0BD80B']; // 蓝 绿
}
if (dwk === 0 && dwkActv !== 0) {
option.series[0].data.push({ value: dwkActv, name: '其中当月发展18和38大王 卡日租包激活15次及以上' });
option.color = ['#FE3F3F', '#0BD80B']; // 红 绿
}
if (dwk === 0 && dwkActv === 0) {
option.color = ['#0BD80B']; // 绿
}
if (dwk !== 0 && dwkActv !== 0) {
option.color = ['#1D9DF7', '#FE3F3F', '#0BD80B'];
option.series[0].data.push({ value: dwk, name: '其中当月18和38大王卡 (不限量套餐)' })
option.series[0].data.push({ value: dwkActv, name: '其中当月发展18和38大王 卡日租包激活15次及以上' });
}
option.series[0].data.push({
labelLine: {
show: false
}, value: rest, name: '不限量套餐月办理量(新老用户含非高价值)'
});
let chart = echarts.init(document.getElementById('pieChart'));
chart.setOption(option)
}
,
drawBar() {
// cust_l_cnt --月累计放号量
// cust_skl_cnt --月累计预配卡数量
// tc_num8 --99元及以上不限量套餐新入网月办理量
// tc_num5 --移动大王卡新入网月新增
// fk_l_cnt --福卡月办理量
let option = {
color: function (params) {
//首先定义一个数组
var colorList = ['#FC151A', '#FC7715', '#0E9AFC', '#47C5FF', '#0BD80B']
return colorList[params.dataIndex]
}, },
filters: { tooltip: {
// 去掉数值前面的字母 trigger: 'axis',
valueFromt: function (value) { axisPointer: { // 坐标轴指示器，坐标轴触发有效
if (!value) return ""; type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
if (value.includes("_")) { }
return value.slice(2);
} else {
return value;
}
},
removeBlankStr(value) {
return value.replace('&nbsp;', '');
}
}, },
methods: { grid: {
drawPie() { left: '3%',
// bxl_m --不限量套餐月办理量(新老用户含非高价值) right: '4%',
// dwk_18_38_m --其中当月18和38大王卡(不限量套餐) bottom: '3%',
// dwk_18_38_actv_m --其中当月发展18和38大王卡日租包激活15次及以上 top: '14%',
let option = { containLabel: true
series: [ },
{ xAxis: [
name: '访问来源', {
type: 'pie', type: 'category',
radius: '50%', data: ['放号量', '预配卡数\n量', '99及以上\n不限量套\n餐新入网', '移动大王\n卡新人入\n网月增量', '福卡月办\n理量'],
center: ['17%', '72%'], axisTick: {
silent: true, alignWithLabel: true
data: [], },
label: { axisLabel: {
show: function () { interval: 0
return true; },
}, splitLine: {
align: 'left', show: false
formatter: function (a) {
let arr1 = a.data.name.substring(0, 12);
let arr3 = a.data.name.substring(12);
if (arr1.indexOf('不限量套餐') > -1) {
return '';
}
return arr1 + '\n' + arr3 + '\n' + a.data.value;
}
},
labelLine: {
length2: 0,
smooth: true
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
let bxlm = parseInt(this.result.bxl_m);
let dwk = parseInt(this.result.dwk_18_38_m);
let dwkActv = parseInt(this.result.dwk_18_38_actv_m);
let rest = bxlm - dwk - dwkActv;
// option.color = ['#1D9DF7', '#FE3F3F', '#0BD80B']; // 蓝 红 绿
if (dwk !== 0 && dwkActv === 0) {
option.series[0].data.push({value: dwk, name: '其中当月18和38大王卡 (不限量套餐)'})
option.color = ['#1D9DF7', '#0BD80B']; // 蓝 绿
}
if (dwk === 0 && dwkActv !== 0) {
option.series[0].data.push({value: dwkActv, name: '其中当月发展18和38大王 卡日租包激活15次及以上'});
option.color = ['#FE3F3F', '#0BD80B']; // 红 绿
}
if (dwk === 0 && dwkActv === 0) {
option.color = ['#0BD80B']; // 绿
}
if (dwk !== 0 && dwkActv !== 0) {
option.color = ['#1D9DF7', '#FE3F3F', '#0BD80B'];
option.series[0].data.push({value: dwk, name: '其中当月18和38大王卡 (不限量套餐)'})
option.series[0].data.push({value: dwkActv, name: '其中当月发展18和38大王 卡日租包激活15次及以上'});
}
option.series[0].data.push({
labelLine: {
show: false
}, value: rest, name: '不限量套餐月办理量(新老用户含非高价值)'
});
let chart = echarts.init(document.getElementById('pieChart'));
chart.setOption(option)
}
,
drawBar() {
// cust_l_cnt --月累计放号量
// cust_skl_cnt --月累计预配卡数量
// tc_num8 --99元及以上不限量套餐新入网月办理量
// tc_num5 --移动大王卡新入网月新增
// fk_l_cnt --福卡月办理量
let option = {
color: function (params) {
//首先定义一个数组
var colorList = ['#FC151A', '#FC7715', '#0E9AFC', '#47C5FF', '#0BD80B']
return colorList[params.dataIndex]
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: '14%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['放号量', '预配卡数\n量', '99及以上\n不限量套\n餐新入网', '移动大王\n卡新人入\n网月增量', '福卡月办\n理量'],
axisTick: {
alignWithLabel: true
},
axisLabel: {
interval: 0
},
splitLine: {
show: false
}
}
],
yAxis: [
{
type: 'value',
splitLine: {
show: false
}
}
],
series: [
{
name: '',
type: 'bar',
barWidth: 15, // 固定柱子宽度
label: {
fontSize: 12
},
data: [this.result.cust_l_cnt, this.result.cust_skl_cnt,
this.result.tc_num8, this.result.tc_num5,
this.result.fk_l_cnt]
}
]
};
let chart = echarts.init(document.getElementById('barChart'))
chart.setOption(option)
}
,
areaPickerFetchData(obj) {
this.condition.channel.code = obj.id
this.condition.channel.name = obj.name
this.fetchChannelDetailData()
}
,
searchBarFetchData(obj) {
this.condition.channel.code = obj.id
this.condition.channel.name = obj.name
this.fetchChannelDetailData()
}
,
fetchChannelDetailData() {
Indicator.open();
this.$http.post(this.$urls.data429, {
"date": this.condition.time.val,
"code": this.condition.channel.code
}).then((res) => {
let data = res.data
if (data.code === 200) {
if (data.data.length !== 0) {
this.result = {...data.data[0]}
let val = this.result.statis_date;
val = val.toString()
let dateStr = val.substring(0, 4) + '-' + val.substring(4, 6) + '-' + val.substring(6, 8)
if (dateStr !== this.condition.time.displayVal) {
this.condition.time.displayVal = dateStr;
this.condition.time.pickerDate = new Date(dateStr);
this.condition.time.val = parseInt(val)
}
} else {
this.result = {
statis_date: '', // --时间
area_name: '', // --市州名称
cnty_name: '', // --归属业务区名称
towns_name: '', // --营业部名称
village_name: '', // --乡镇名称
area_desc: '', // --归属区域
chnl_addr: '', // --地址
chnl_name: '', // --渠道名称
state_name: '', // --状态
chnl_code: '', // --渠道编码
chnl_level: '', // --渠道星级
chnl_typ_name: '', // --大类型
chnl_kind_name: '', // --小类型
oper_type_name: '', // --经营模式
business_type_name: '', // --经营性质
effect_time: '', // --合同开始时间
if_kfz: '', // --是否宽服站渠道
if_ls: '', // --是否连锁渠道
if_zk: '', // --是否自控渠道
if_info: '', // --是否核心渠道
if_shap: '', // --是否核心商圈
cust_l_cnt: 0, // --月累计放号量
cust_skl_cnt: 0, // --月累计预配卡数量
tc_num8: 0, // --99元及以上不限量套餐新入网月办理量
tc_num5: 0, // --移动大王卡新入网月新增
fk_l_cnt: 0, // --福卡月办理量
sale_g4l_cnt: 0, // --月累计4G终端销量
zdj_l_cnt: 0, // --月累计4G加终端销量
yw_g4l_num: 0, // --月累计4G套餐办理量
tc_num20: 0, // --99元及以上不限量套餐月办理量
tc_num11: 0, // --新版和家庭套餐月办理量
tc_num14: 0, // --新版和家庭套餐新入网月办理量
tc_num2: 0, // --移动大王卡月新增
bxl_m: 0, // --不限量套餐月办理量(新老用户含非高价值)
dwk_18_38_m: 0, // --其中当月18和38大王卡(不限量套餐)
dwk_18_38_actv_m: 0, // --其中当月发展18和38大王卡日租包激活15次及以上
kd_newl_cnt: 0, // -- 月累计新增宽带办理量
kd_wg_m_cnt: 0, // -- 月累计新增宽带完工量
mbh_new_l_cnt: 0, // --月累计新增魔百和办理量
curm_kd_add_accept_num: 0,
hbtj_l_cnt: 0, //-- 月和包累计推荐下载量
hbbk_l_cnt: 0, // --月和包累计绑卡量
pay_l_fee: 0, //--月累计缴费金额(元),
pay_l_cnt: 0,// -- 月累计缴费客户数,
pay_m_num: 0,// -- 月累计缴费笔数
hxyw_l_cnt: 0, //六项业务月累计量
yw_l_num: 0, //月累计业务量
yw_l_cnt: 0, //--月累计服务客户数
jjw_l_cnt: 0// --家庭网月办理量
}
}
this.$nextTick(() => {
this.drawBar()
this.drawPie()
Indicator.close();
})
}
}).catch((err) => {
Indicator.close();
console.error(err);
})
}
,
setType(typ) {
this.btn = typ
if (typ === 'A') {
} else {
}
}
,
showDate() {
this.showModelDate = true;
}
,
showChannels() {
this.showModel = true;
} }
, }
showSearchBarModal() { ],
this.showSearchBar = true; yAxis: [
{
type: 'value',
splitLine: {
show: false
} }
, }
submitDateModel(date) { ],
if (formatDateTime(date, "YYYY-MM-DD") !== formatDateTime(this.condition.time.pickerDate, "YYYY-MM-DD")) { series: [
this.$store.commit("SAVE_MEAL_DATE", { {
date: date name: '',
}); type: 'bar',
} barWidth: 15, // 固定柱子宽度
this.hideModel(); label: {
fontSize: 12
},
data: [this.result.cust_l_cnt, this.result.cust_skl_cnt,
this.result.tc_num8, this.result.tc_num5,
this.result.fk_l_cnt]
}
]
};
let chart = echarts.init(document.getElementById('barChart'))
chart.setOption(option)
}
,
areaPickerFetchData(obj) {
this.condition.channel.code = obj.id
this.condition.channel.name = obj.name
this.fetchChannelDetailData()
}
,
searchBarFetchData(obj) {
this.condition.channel.code = obj.id
this.condition.channel.name = obj.name
this.fetchChannelDetailData()
}
,
fetchChannelDetailData() {
Indicator.open();
this.$http.post(this.$urls.data429, {
"date": this.condition.time.val,
"code": this.condition.channel.code
}).then((res) => {
let data = res.data
if (data.code === 200) {
if (data.data.length !== 0) {
this.result = { ...data.data[0] }
let val = this.result.statis_date;
val = val.toString()
let dateStr = val.substring(0, 4) + '-' + val.substring(4, 6) + '-' + val.substring(6, 8)
if (dateStr !== this.condition.time.displayVal) {
this.condition.time.displayVal = dateStr;
this.condition.time.pickerDate = new Date(dateStr);
this.condition.time.val = parseInt(val)
} }
, } else {
hideModel() { this.result = {
this.showModelDate = false; statis_date: '', // --时间
this.showModel = false; area_name: '', // --市州名称
this.showSearchBar = false; cnty_name: '', // --归属业务区名称
towns_name: '', // --营业部名称
village_name: '', // --乡镇名称
area_desc: '', // --归属区域
chnl_addr: '', // --地址
chnl_name: '', // --渠道名称
state_name: '', // --状态
chnl_code: '', // --渠道编码
chnl_level: '', // --渠道星级
chnl_typ_name: '', // --大类型
chnl_kind_name: '', // --小类型
oper_type_name: '', // --经营模式
business_type_name: '', // --经营性质
effect_time: '', // --合同开始时间
if_kfz: '', // --是否宽服站渠道
if_ls: '', // --是否连锁渠道
if_zk: '', // --是否自控渠道
if_info: '', // --是否核心渠道
if_shap: '', // --是否核心商圈
cust_l_cnt: 0, // --月累计放号量
cust_skl_cnt: 0, // --月累计预配卡数量
tc_num8: 0, // --99元及以上不限量套餐新入网月办理量
tc_num5: 0, // --移动大王卡新入网月新增
fk_l_cnt: 0, // --福卡月办理量
sale_g4l_cnt: 0, // --月累计4G终端销量
zdj_l_cnt: 0, // --月累计4G加终端销量
yw_g4l_num: 0, // --月累计4G套餐办理量
tc_num20: 0, // --99元及以上不限量套餐月办理量
tc_num11: 0, // --新版和家庭套餐月办理量
tc_num14: 0, // --新版和家庭套餐新入网月办理量
tc_num2: 0, // --移动大王卡月新增
bxl_m: 0, // --不限量套餐月办理量(新老用户含非高价值)
dwk_18_38_m: 0, // --其中当月18和38大王卡(不限量套餐)
dwk_18_38_actv_m: 0, // --其中当月发展18和38大王卡日租包激活15次及以上
kd_newl_cnt: 0, // -- 月累计新增宽带办理量
kd_wg_m_cnt: 0, // -- 月累计新增宽带完工量
mbh_new_l_cnt: 0, // --月累计新增魔百和办理量
hbtj_l_cnt: 0, //-- 月和包累计推荐下载量
hbbk_l_cnt: 0, // --月和包累计绑卡量
pay_l_fee: 0, //--月累计缴费金额(元),
pay_l_cnt: 0,// -- 月累计缴费客户数,
pay_m_num: 0,// -- 月累计缴费笔数
hxyw_l_cnt: 0, //六项业务月累计量
yw_l_num: 0, //月累计业务量
yw_l_cnt: 0, //--月累计服务客户数
jjw_l_cnt: 0// --家庭网月办理量
} }
}, }
mounted() { this.$nextTick(() => {
}, this.drawBar()
beforeDestroy() { this.drawPie()
}, Indicator.close();
created() { })
this.setTitle({'title': '渠道全景视图'});
// 只有第一次进入或者刷新页面后才会执行此钩子函数
// 使用keep-alive后（2+次）进入不会再执行此钩子函数
this.isFirstEnter = true;
},
activated() {
// 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据
this.$route.meta.isBack = false
// 恢复成默认的false，避免isBack一直是true，导致每次都获取新数据
this.isFirstEnter = false;
} }
}).catch((err) => {
Indicator.close();
console.error(err);
})
}
,
setType(typ) {
this.btn = typ
if (typ === 'A') {
} else {
}
} }
,
showDate() {
this.showModelDate = true;
}
,
showChannels() {
this.showModel = true;
}
,
showSearchBarModal() {
this.showSearchBar = true;
}
,
submitDateModel(date) {
if (formatDateTime(date, "YYYY-MM-DD") !== formatDateTime(this.condition.time.pickerDate, "YYYY-MM-DD")) {
this.$store.commit("SAVE_MEAL_DATE", {
date: date
});
}
this.hideModel();
}
,
hideModel() {
this.showModelDate = false;
this.showModel = false;
this.showSearchBar = false;
}
},
mounted() {
},
beforeDestroy() {
},
created() {
this.setTitle({ 'title': '渠道全景视图' });
// 只有第一次进入或者刷新页面后才会执行此钩子函数
// 使用keep-alive后（2+次）进入不会再执行此钩子函数
this.isFirstEnter = true;
},
activated() {
// 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据
this.$route.meta.isBack = false
// 恢复成默认的false，避免isBack一直是true，导致每次都获取新数据
this.isFirstEnter = false;
}
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.container { .container {
background-color: #f3f2f0; background-color: #f3f2f0;
height: 100%; height: 100%;
.data-block {
.data-block { position: relative;
position: relative; height: 2.52rem;
height: 2.52rem; background-color: #0384df;
background-color: #0384df; width: 100%;
width: 100%; text-align: center;
text-align: center; .data-block-tabs {
position: absolute;
.data-block-tabs { left: 50%;
position: absolute; width: 4.08rem;
left: 50%; margin-left: -2.04rem;
width: 4.08rem; top: 1rem;
margin-left: -2.04rem; .data-block-tab {
top: 1rem; margin-top: 0.63rem;
font-size: 0.32rem;
.data-block-tab { color: #ffffff;
margin-top: 0.63rem; text-align: center;
font-size: 0.32rem; width: 1.64rem;
color: #ffffff; height: 0.46rem;
text-align: center; float: left;
width: 1.64rem; padding-bottom: 0.08rem;
height: 0.46rem; &:first-child {
float: left; margin-right: 0.8rem;
padding-bottom: 0.08rem;
&:first-child {
margin-right: 0.8rem;
}
&.active {
border-bottom: solid 2px #ffffff;
}
}
}
.data-block-item {
display: inline-block;
&:first-child {
margin-left: -0.4rem;
margin-right: -0.1rem;
}
}
img.data-block-item {
width: 0.36rem;
height: 0.36rem;
position: absolute;
right: 0.24rem;
top: 0.75rem;
}
} }
&.active {
border-bottom: solid 2px #ffffff;
}
}
}
.data-block-item {
display: inline-block;
&:first-child {
margin-left: -0.4rem;
margin-right: -0.1rem;
}
}
img.data-block-item {
width: 0.36rem;
height: 0.36rem;
position: absolute;
right: 0.24rem;
top: 0.75rem;
}
}
.a-block {
.g4-box {
.g4,
.g4plus {
float: left;
width: 3.27rem;
height: 1.52rem;
color: #ffffff;
border-radius: 0.12rem;
margin: 0.32rem 0;
text-align: center;
div {
font-size: 0.27rem;
margin-top: 0.1rem;
}
div:first-child {
font-size: 0.43rem;
margin-top: 0.23rem;
}
}
.g4 {
background-color: #0bd80b;
margin-left: 0.32rem;
}
.g4plus {
background-color: #d8920b;
margin-left: 0.32rem;
}
}
.a-block { .chart-text-box {
.g4-box { position: absolute;
.g4, width: 100%;
.g4plus { color: #0bd80b;
float: left; top: 0.3rem;
width: 3.27rem; text-align: center;
height: 1.52rem; .chart-name {
color: #ffffff; font-size: 0.27rem;
border-radius: 0.12rem; margin-bottom: 0.31rem;
margin: 0.32rem 0; }
text-align: center; .chart-val {
font-size: 0.43rem;
div { }
font-size: 0.27rem; }
margin-top: 0.1rem; .list-item {
} font-size: 0.32rem;
color: #333333;
div:first-child { width: 100%;
font-size: 0.43rem; height: 0.92rem;
margin-top: 0.23rem; line-height: 0.92rem;
} .name {
} float: left;
margin-left: 0.32rem;
.g4 { }
background-color: #0bd80b; .val {
margin-left: 0.32rem; float: right;
} margin-right: 0.32rem;
}
.g4plus { }
background-color: #d8920b;
margin-left: 0.32rem;
}
}
.chart-text-box {
position: absolute;
width: 100%;
color: #0bd80b;
top: 0.3rem;
text-align: center;
.chart-name {
font-size: 0.27rem;
margin-bottom: 0.31rem;
}
.chart-val { .list-pic-item {
font-size: 0.43rem; width: 2.3rem;
} list-style-type: none;
margin: 0.42rem 0 0 0.15rem;
text-align: center;
padding: 0;
color: #333333;
float: left;
li {
width: 100%;
img {
width: 0.88rem;
height: 0.88rem;
}
&.name {
font-size: 0.27rem;
margin-bottom: 0.2rem;
}
&.val {
font-size: 0.37rem;
.unit {
font-size: 0.24rem;
}
}
}
}
}
.b-block {
height: 16.16rem;
width: 100%;
.b-block-item {
padding: 0 0.4rem;
height: 1.84rem;
background-color: #ffffff;
margin-bottom: 0.03rem;
.item-content,
.icon-box {
display: inline-block;
height: 100%;
}
.item-content {
margin-left: 0.41rem;
font-size: 0.32rem;
color: #333333;
width: calc(100% - 0.64rem - 0.8rem);
ul {
list-style-type: none;
padding: 0;
li {
margin-bottom: 0.27rem;
img {
height: 0.35rem;
width: 0.35rem;
display: inline-block;
margin-right: 0.1rem;
} }
}
}
.list-item { table {
font-size: 0.32rem; text-align: center;
color: #333333; margin: 0.2rem 0;
width: 100%; font-size: 0.32rem;
height: 0.92rem; color: #333333;
line-height: 0.92rem; border: solid 1px #dddddd;
width: 100%;
.name { tr {
float: left; td {
margin-left: 0.32rem; border: solid 1px #dddddd;
} height: 0.8rem;
width: 2.31rem;
.val { .false {
float: right; height: 0.32rem;
margin-right: 0.32rem; width: 0.32rem;
} }
.right {
height: 0.32rem;
width: 0.44rem;
}
} }
td:first-child {
.list-pic-item { width: 4.53rem;
width: 2.3rem;
list-style-type: none;
margin: 0.42rem 0 0 0.15rem;
text-align: center;
padding: 0;
color: #333333;
float: left;
li {
width: 100%;
img {
width: 0.88rem;
height: 0.88rem;
}
&.name {
font-size: 0.27rem;
margin-bottom: 0.2rem;
}
&.val {
font-size: 0.37rem;
.unit {
font-size: 0.24rem;
}
}
}
} }
}
} }
}
.b-block { .icon-box {
height: 16.16rem; float: left;
width: 100%; position: relative;
width: 0.63rem;
.b-block-item { img {
padding: 0 0.4rem; display: inline-block;
height: 1.84rem; position: absolute;
background-color: #ffffff; top: 50%;
margin-bottom: 0.03rem; margin-top: -0.315rem;
height: 0.63rem;
.item-content, width: 100%;
.icon-box {
display: inline-block;
height: 100%;
}
.item-content {
margin-left: 0.41rem;
font-size: 0.32rem;
color: #333333;
width: calc(100% - 0.64rem - 0.8rem);
ul {
list-style-type: none;
padding: 0;
li {
margin-bottom: 0.27rem;
img {
height: 0.35rem;
width: 0.35rem;
display: inline-block;
margin-right: 0.1rem;
}
}
}
table {
text-align: center;
margin: 0.2rem 0;
font-size: 0.32rem;
color: #333333;
border: solid 1px #dddddd;
width: 100%;
tr {
td {
border: solid 1px #dddddd;
height: 0.8rem;
width: 2.31rem;
.false {
height: 0.32rem;
width: 0.32rem;
}
.right {
height: 0.32rem;
width: 0.44rem;
}
}
td:first-child {
width: 4.53rem;
}
}
}
}
.icon-box {
float: left;
position: relative;
width: 0.63rem;
img {
display: inline-block;
position: absolute;
top: 50%;
margin-top: -0.315rem;
height: 0.63rem;
width: 100%;
}
}
}
} }
}
} }
}
}
</style> </style>
src/views/app/ToMMT.vue
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div class="divb"> <div class="divb">
<p>打开前请先安装最新版手机经分APP</p> <p>打开前请先安装最新版手机经分APP</p>
<p> <p>
<a href="https://emm.cmccbigdata.com:8443/emm/about">点击安装</a> <a href="http://172.168.20.37:8888/emm/about">点击安装</a>
</p> </p>
<br> <br>
<div class="button"> <div class="button">
......
src/views/app/gridMarketing.vue
...@@ -15,10 +15,7 @@ ...@@ -15,10 +15,7 @@
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div v-show="tabActive === 1 && showTime" class="time" ref="timeRef"> <div v-show="tabActive === 1 && showTime" class="time" ref="timeRef">{{showTime}}</div>
{{showTime}}
</div>
<div v-if="showUpperLevel" @click="changeUpperLevel" class="upper-level">上一级</div> <div v-if="showUpperLevel" @click="changeUpperLevel" class="upper-level">上一级</div>
<ModelArea <ModelArea
:userInfo="userInfo" :userInfo="userInfo"
...@@ -58,15 +55,6 @@ ...@@ -58,15 +55,6 @@
<span @click="clickTab(2)" <span @click="clickTab(2)"
:class="{active : tabActive === 2 }" :class="{active : tabActive === 2 }"
class="month">月通报</span> class="month">月通报</span>
<div @click.prevent.stop="boreShow "
class="bore"
>
<span class="caliber">口径</span>
<span class="question"> ? </span>
<Popup @hide="hidePop"
v-if="popObjMouth.visable"
:obj="popObjMouth"></Popup>
</div>
</div> </div>
<div ref="kpiRef" class="kpis"> <div ref="kpiRef" class="kpis">
<div class="kpi" :style="{width: kpiWidth}"> <div class="kpi" :style="{width: kpiWidth}">
...@@ -157,7 +145,6 @@ ...@@ -157,7 +145,6 @@
import SelectArea from "com/app/add/selectArea.vue"; import SelectArea from "com/app/add/selectArea.vue";
import selectDate from "com/app/add/selectDate.vue"; import selectDate from "com/app/add/selectDate.vue";
import commonMixin from "mixins/common/common.js"; import commonMixin from "mixins/common/common.js";
import Popup from "com/app/common/popup.vue";
const REAL_TIME = 1, const REAL_TIME = 1,
MONTH = 2; MONTH = 2;
...@@ -166,8 +153,7 @@ ...@@ -166,8 +153,7 @@
ModelArea, ModelArea,
ModelDate, ModelDate,
SelectArea, SelectArea,
selectDate, selectDate
Popup
}, },
mixins: [commonMixin], mixins: [commonMixin],
computed: { computed: {
...@@ -265,19 +251,7 @@ ...@@ -265,19 +251,7 @@
kpiListOrigin: [], kpiListOrigin: [],
currentKpiCode: "", currentKpiCode: "",
changeUpperLevelIng: false, changeUpperLevelIng: false,
changeCacheFlag: false, changeCacheFlag: false
popObjMouth: {
//口径的数据
title: "",
ind_unit: "元",
remark: "",
top: "0.5rem",
right: "-0.2rem",
topRight: "0.15rem",
visable: false,
type: 1,
activeIndex: '' // 当前激活
},
}; };
}, },
filters: { filters: {
...@@ -291,19 +265,6 @@ ...@@ -291,19 +265,6 @@
} }
}, },
methods: { methods: {
hidePop(type) {
this.popObjMouth.visable = false;
this.popObjMouth.remark = "";
},
boreShow() {
// console.log(this.activeKpiItem)
this.popObjMouth.remark = this.activeKpiItem.remarks;
if (this.popObjMouth.remark) {
this.popObjMouth.visable = true;
} else {
Toast("该指标下没有口径说明 ！");
}
},
changeUpperLevel() { changeUpperLevel() {
this.changeUpperLevelIng = true; this.changeUpperLevelIng = true;
let length = this.cacheList.length; let length = this.cacheList.length;
...@@ -907,6 +868,7 @@ ...@@ -907,6 +868,7 @@
.time { .time {
height: 0.4rem; height: 0.4rem;
// padding: 0.1rem 0;
padding-left: 2.5rem; padding-left: 2.5rem;
font-size: 0.26rem; font-size: 0.26rem;
color: #fff; color: #fff;
...@@ -957,7 +919,6 @@ ...@@ -957,7 +919,6 @@
font-size: 0.28rem; font-size: 0.28rem;
text-align: center; text-align: center;
/*padding-left: 1.8rem;*/ /*padding-left: 1.8rem;*/
position: relative;
.day, .day,
.month { .month {
...@@ -976,27 +937,6 @@ ...@@ -976,27 +937,6 @@
background-color: #2b90fa; background-color: #2b90fa;
color: #fff; color: #fff;
} }
.bore {
position: absolute;
top: 0.3rem;
right: .35rem;
height: 0.5rem;
color: #999;
.question {
display: inline-block;
width: 0.2rem;
height: 0.2rem;
overflow: hidden;
line-height: 0.2rem;
border-radius: 50%;
color: #999;
text-align: center;
border: 1px solid #999;
}
}
} }
.bg { .bg {
...@@ -1191,6 +1131,5 @@ ...@@ -1191,6 +1131,5 @@
.stars { .stars {
width: 0.4rem; width: 0.4rem;
} }
} }
</style> </style>
src/views/app/index.vue
...@@ -125,7 +125,7 @@ ...@@ -125,7 +125,7 @@
<script> <script>
import { Indicator, Toast } from 'mint-ui'; import { Indicator, Toast } from 'mint-ui';
import { formatDateTime, formatDateTimeReg } from "libs/common/common"; import { formatDateTime, formatDateTimeReg } from "libs/common/common";
import ModelArea from "com/app/index/area.vue"; import ModelArea from "com/app/gridMarketing/area.vue";
import ModelDate from "com/app/appUsage/appModelDate.vue"; import ModelDate from "com/app/appUsage/appModelDate.vue";
import CategoryPicker from "com/app/index/categoryPicker.vue"; import CategoryPicker from "com/app/index/categoryPicker.vue";
// import Broadcast from "com/app/index/broadcast.vue"; // import Broadcast from "com/app/index/broadcast.vue";
......
src/views/app/index1.vue
...@@ -155,7 +155,7 @@ ...@@ -155,7 +155,7 @@
<script> <script>
import {Indicator, Toast} from 'mint-ui'; import {Indicator, Toast} from 'mint-ui';
import {formatDateTime, formatDateTimeReg, getTextWidth} from "libs/common/common"; import {formatDateTime, formatDateTimeReg, getTextWidth} from "libs/common/common";
import ModelArea from "com/app/index/area.vue"; import ModelArea from "com/app/gridMarketing/area.vue";
import ModelDate from "com/app/appUsage/appModelDate.vue"; import ModelDate from "com/app/appUsage/appModelDate.vue";
import CategoryPicker from "com/app/index/categoryPicker.vue"; import CategoryPicker from "com/app/index/categoryPicker.vue";
import Popup from "com/app/common/popup.vue"; import Popup from "com/app/common/popup.vue";
......
src/views/app/specialAreaCity.vue
...@@ -59,10 +59,10 @@ export default { ...@@ -59,10 +59,10 @@ export default {
newHref += i + '=' + query[i] + '&'; newHref += i + '=' + query[i] + '&';
} }
} }
// let newHref = 'https://emm.cmccbigdata.com:8443/cscm/pages/home?' // let newHref = 'http://172.168.20.37:8888/cscm/pages/home?'
console.log('newHref :', newHref) console.log('newHref :', newHref)
// https://emm.cmccbigdata.com:8443/cscm/pages/home?id=OCxusheng1&phone=13873110056&level=1&areaId=731&aid=18411&area=A_%E9%95%BF%E6%B2%99&xid=633f47589186780e4d534ef743915005&token=b43eb37f48ec38054507cb0695a3787f&ua=pc& // http://172.168.20.37:8888/cscm/pages/home?id=OCxusheng1&phone=13873110056&level=1&areaId=731&aid=18411&area=A_%E9%95%BF%E6%B2%99&xid=633f47589186780e4d534ef743915005&token=b43eb37f48ec38054507cb0695a3787f&ua=pc&
if (query.ua === 'android') { if (query.ua === 'android') {
emm.openWebView(newHref) emm.openWebView(newHref)
} else if (query.ua === 'ios') { } else if (query.ua === 'ios') {
...@@ -77,7 +77,7 @@ export default { ...@@ -77,7 +77,7 @@ export default {
if (data === null) return if (data === null) return
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
const d = data[i]; const d = data[i];
d.imgUrl = 'https://emm.cmccbigdata.com:8443/work/' + d.imagePath d.imgUrl = 'http://172.168.20.37:8888/work/' + d.imagePath
} }
this.list = data this.list = data
if (!this.list.length) { if (!this.list.length) {
......
src/views/app/workbench.vue
...@@ -269,6 +269,8 @@ export default { ...@@ -269,6 +269,8 @@ export default {
} }
}, },
applicationClick(applicationItem, url, index) { applicationClick(applicationItem, url, index) {
// applicationItem.pack = String(applicationItem.pack).replace("https://emm.cmccbigdata.com:8443", "http://172.168.20.37:8888");
// applicationItem.pack = applicationItem.pack.replace("file/order", "file/order1");
let href = applicationItem.pack + '?' let href = applicationItem.pack + '?'
const query = this.$route.query const query = this.$route.query
for (let i in query) { for (let i in query) {
...@@ -323,8 +325,8 @@ export default { ...@@ -323,8 +325,8 @@ export default {
// this.applicationList = data.applications // this.applicationList = data.applications
this.applicationList = data this.applicationList = data
this.applicationList.forEach(e => { this.applicationList.forEach(e => {
// https://emm.cmccbigdata.com:8443/file/1530357218832.png // http://172.168.20.37:8888/file/1530357218832.png
e.icon = "https://emm.cmccbigdata.com:8443/file/" + e.icon e.icon = "http://172.168.20.37:8888/file/" + e.icon
}); });
}, },
async getAdvertList() { async getAdvertList() {
...@@ -336,8 +338,8 @@ export default { ...@@ -336,8 +338,8 @@ export default {
// console.log('data advertList:', data) // console.log('data advertList:', data)
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
const d = data[i]; const d = data[i];
if (d.filePath) d.filePath = 'https://emm.cmccbigdata.com:8443/work/' + d.filePath if (d.filePath) d.filePath = 'http://172.168.20.37:8888/work/' + d.filePath
d.imagePath = 'https://emm.cmccbigdata.com:8443/work/' + d.imagePath d.imagePath = 'http://172.168.20.37:8888/work/' + d.imagePath
} }
data.sort((a, b) => { data.sort((a, b) => {
return a.pos - b.pos return a.pos - b.pos
...@@ -367,7 +369,7 @@ export default { ...@@ -367,7 +369,7 @@ export default {
doc.imgUrl = require("../../assets/app/workbench/pdf.png") doc.imgUrl = require("../../assets/app/workbench/pdf.png")
// doc.createdTime = this.formatTime(doc.createdTime) // doc.createdTime = this.formatTime(doc.createdTime)
doc.createdTime = doc.createdTime.slice(0, 10) doc.createdTime = doc.createdTime.slice(0, 10)
doc.filePath = 'https://emm.cmccbigdata.com:8443/work/' + doc.filePath doc.filePath = 'http://172.168.20.37:8888/work/' + doc.filePath
} }
data.sort((a, b) => { data.sort((a, b) => {
return b.id - a.id return b.id - a.id
......
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