Skip to content

M
Muse
Commit 86f8d848 authored by zhengke's avatar zhengke
Browse files
Options

asd

parent 49f72465
Show whitespace changes
Inline Side-by-side
Showing with 449 additions and 276 deletions
src/components/sellDashboard/map/viittoMap.vue
View file @ 86f8d848
<template>
<div class="echarts" :style="{height:'100%',width:'100%'}">
<div :style="{height:'100%',width:'100%'}" ref="myEchart"></div>
<div v-for="(item, index) in points" :key="index" class="jiaoyidian" :style="{left:(item[0]-5)+'px',top:(item[1]-5)+'px'}"></div>
<div class="echarts" :style="{height:'110%',width:'110%'}">
<div :style="{height:'110%',width:'110%'}" ref="myEchart"></div>
<div v-if="isShow" v-for="(item, index) in points" :key="index" class="viittoHot" :style="{left:(item[0]-5)+'px',top:(item[1]-5)+'px'}"></div>
<div v-for="(item, subIndex) in ActivateList" :key="subIndex+50000" class="viittoActive" :style="{left:(item[0]-5)+'px',top:(item[1]-5)+'px'}"></div>
</div>
</template>
<script>
......@@ -11,19 +12,26 @@ import "../../../../node_modules/echarts/map/js/china.js"; // 引入中国地图
import BMap from 'BMap';
export default {
name: "echarts",
props: ["userJson"],
props: ["userJson","dataArea","InActiveLen"],
data() {
return {
chart: null,
position: [-999999, -999999],
points:[],
myChart:{}
//活动人数
ActivateList:[],
myChart:{},
isShow:false,
};
},
mounted() {
console.log(this.InActiveLen,'InActiveLen');
this.bus.$on('addpoint',addTradeInfo=>{
this.addPoint(addTradeInfo)
})
this.bus.$on('addActivePoint',addTradeInfo=>{
this.ActivePoint(addTradeInfo)
})
this.chinaConfigure();
},
beforeDestroy() {
......@@ -37,9 +45,9 @@ export default {
methods: {
chinaConfigure() {
var myData = [
// { name: "1", value: [121.15, 31.89, 90] },
// { name: "2", value: [109.781327, 39.608266, 70] },
// { name: "3", value: [120.38, 37.35, 42] },
//{ name: "北京", value: [116.413384, 39.910925] },
//{ name: "重庆", value: [106.54041, 29.40268] },
// { name: "北京", value: [120.38, 37.35, 42] },
// { name: "4", value: [122.207216, 29.985295, 23] },
// { name: "5", value: [110.245672, 30.7787677, 20] }
];
......@@ -48,7 +56,9 @@ export default {
this.myChart.setOption({
// 进行相关配置
backgroundColor: "transparent",
tooltip: {}, // 鼠标移到图里面的浮动提示框
tooltip: { // 鼠标移到图里面的浮动提示框
showContent:false,
},
dataRange: {
min: 0,
max: 100,
......@@ -103,28 +113,24 @@ export default {
series: [
{
type: "scatter",
coordinateSystem: "geo", // 对应上方配置
markPoint: this.markPoint
},
{
name: "交易数据", //series名称
type: "scatter", //为散点类型
markPoint: this.markPoint,
name: "", //series名称
coordinateSystem: "geo", // series坐标系类型
data: myData,
data: this.dataArea,
symbol: "circle",
symbolSize: [10, 10],
animation: true
symbolSize: [5, 5],
animation: false,
tooltip:this.tooltip,
silent: false
}
]
});
},
addPoint(param){
console.log(param)
console.log(param);
let ad=param.address?param.address:param.city
var myGeo = new BMap.Geocoder();
var that=this
console.log(ad)
myGeo.getPoint(ad, function(point){
if (point) {
var geo = that.myChart.getModel().getComponent('geo').coordinateSystem;
......@@ -135,51 +141,51 @@ export default {
}
}
})
console.log(that.points.length,'that.points.length');
console.log(that.InActiveLen,'that.points.length');
if(that.points.length==that.InActiveLen){
that.isShow=true;
console.log(that.points,'points');
}
},
//获取活跃人数
ActivePoint(param){
let ad=param.address?param.address:param.city
var myGeo = new BMap.Geocoder();
var that=this
myGeo.getPoint(ad, function(point){
if (point) {
var geo = that.myChart.getModel().getComponent('geo').coordinateSystem;
let coord = that.myChart.convertToPixel("geo", [point.lng, point.lat]);
that.ActivateList.push(coord);
if(that.ActivateList.length>100){
that.ActivateList.splice(0,1)
}
}
})
}
}
};
</script>
<style>
.jiaoyidian {
.viittoHot {
position: absolute;
z-index: 5;
color: #fff;
width: 10px;
height: 10px;
width: 5px;
height: 5px;
background: #2a73fe;
border-radius: 100%;
box-shadow: 0 0 30px #2a73fe;
animation-timing-function: ease-in-out;
animation-name: breathe;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.canpingsee {
.viittoActive{
position: absolute;
z-index: 5;
color: #fff;
width: 10px;
height: 10px;
background: #2a9e9e;
width: 5px;
height: 5px;
background: #FF75A1;
border-radius: 100%;
box-shadow: 0 0 30px #2a9e9e;
animation-timing-function: ease-in-out;
animation-name: breathe;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@-webkit-keyframes breathe {
0% {
box-shadow: 0 0 20px inherit;
opacity: 0;
}
100% {
box-shadow: 0 1px 30px inherit;
opacity: 1;
width: 10px;
height: 10px;
}
}
</style>
src/components/viitto/viittoData.vue
View file @ 86f8d848
<style>
@font-face {
font-family: "PINGFANG EXTRALIGHT";
src:url("../../assets/fonts/PINGFANG EXTRALIGHT.TTF") format("truetype"); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
font-style: normal;
font-weight: normal;
}
@font-face {
font-family: "PINGFANG REGULAR";
src:url("../../assets/fonts/PINGFANG REGULAR.TTF") format("truetype"); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
font-style: normal;
font-weight: normal;
}
@font-face {
font-family: "MADA-MEDIUM";
src:url("../../assets/fonts/MADA-MEDIUM.TTF") format("truetype"); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
font-style: normal;
font-weight: normal;
}
ul li {
list-style: none;
}
.viittoData{
background-color: #171C34;
height: 100%;
display: flex;
align-items:center;
}
.todayOrder{
width: 100%;
height: 184px;
}
.content-box{
padding: 30px 45px 0 45px;
padding: 0 45px 0 45px;
}
.viittoData .tit{
color: #CCCED3;
font-size: 22px;
margin-bottom: 30px;
font-family: PINGFANG REGULAR;
}
.sb-tit{
color: #71788E;
font-size: 18px;
font-family: PINGFANG REGULAR;
}
.sb-tit-top{
margin-bottom: 5px;
font-family: PINGFANG REGULAR;
color:#494E63;
}
.big-price{
font-size: 48px;
font-family:Mada-Regular;
font-size: 60px;
font-family: MADA-MEDIUM;
font-weight:400;
color:rgba(236,236,236,1);
}
......@@ -50,7 +74,7 @@ ul li {
}
.zhanbi-tit{
width: 100%;
height: 115px;
height: 95px;
background: url(../../assets/img/viitto/lanse.png);
background-size: 100% 100%;
}
......@@ -67,6 +91,7 @@ ul li {
background:linear-gradient(0deg,rgba(27,33,60,1),rgba(26,32,56,1));
border-radius:8px;
overflow-y: auto;
font-family: PINGFANG REGULAR
}
.progress-item{
margin-bottom: 21px;
......@@ -118,10 +143,13 @@ ul li {
color: white;
text-align: center;
line-height: 34px;
display:inline-block;
margin-right: -17px;
position: relative;
}
.right-top{
display: flex;
align-items: center;
/* display: flex;
align-items: center; */
justify-content: space-between;
}
.name{
......@@ -144,7 +172,7 @@ ul li {
}
.huoyue p:nth-child(1){
font-size:18px;
font-family:PingFang-SC-Regular;
font-family: PINGFANG REGULAR;
color:rgba(255,255,255,1);
}
.right-yonghu{
......@@ -160,7 +188,7 @@ ul li {
.fcff{
color: white;
}
.line{
.viittoData .line{
margin-top: 15px;
height:3px;
background:rgba(33,40,68,1);
......@@ -171,24 +199,31 @@ ul li {
.biaoji{
position: relative;
top: -30px;
left:20px;
}
.bottom-tit{
font-size:22px;
color: #CCCED3;
font-family: PINGFANG REGULAR
}
.bottom-item{
margin-top: 30px;
display: flex;
padding:10px 20px;
background-color: #1D243D;
border-radius:10px;
background:linear-gradient(rgba(30, 38, 63, 1) 0%, rgba(23, 28, 52, 1) 50%);
}
.bottom-item .sb-tit{
color:#404361;
font-weight: bold;
}
.bottom-item>div:nth-child(1){
margin-right: 20px;
}
.bottom-price{
font-size:28px;
font-family:Mada-Regular;
font-family: MADA-MEDIUM;
font-weight:400;
color:rgba(237,237,237,1);
}
......@@ -197,54 +232,86 @@ ul li {
display: flex;
}
.zhanbi>div:nth-child(1){
margin-right: 10px;
margin-right: 40px;
}
.zhanbi .number{
flex: 1;
font-size:50px;
font-family:Mada-Regular;
font-weight: bold;
font-size:40px;
font-family: MADA-MEDIUM;
font-weight: 400;
color:rgba(237,237,237,1);
background:linear-gradient(-45deg,rgba(167,222,138,1) 0%, rgba(68,214,172,1) 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.zhanbi2 .number{
.zhanbi .number2{
flex: 1;
font-size:40px;
font-family: MADA-MEDIUM;
font-weight: 400;
color:rgba(237,237,237,1);
background:linear-gradient(-45deg,rgba(255,108,176,1) 0%, rgba(255,147,109,1) 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.zhanbi3 .number{
.zhanbi .number3{
flex: 1;
font-size:40px;
font-family: MADA-MEDIUM;
font-weight: 400;
color:rgba(237,237,237,1);
background:linear-gradient(-45deg,rgba(126,133,238,1) 0%, rgba(63,229,237,1) 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.zhanbi .number sub{
.zhanbi span{
font-size: 20px;
}
.clearfix:after {content: "\0020";display: block;height: 0;clear: both;}
.viittoData .el-progress-bar__outer{
background-color: #29314E;
}
.noCked{
width: 130px;
height: 34px;
background-color: #232944;
border-radius: 17px;
color: white;
text-align: center;
line-height: 34px;
display: inline-block;
font-family: PINGFANG REGULAR;
cursor: pointer;
}
</style>
<template>
<div class="viittoData">
<div class="viittoData" v-if="dataList">
<el-row class="content-box" :gutter="80">
<el-col :span="8">
<el-row class="left-top">
<el-col :span="10">
<div class="todayOrder">
<p class="tit">今日交易订单</p>
<dashboard :score="67" title="今日订单"></dashboard>
<dashboard :score="dataList.OrderNum" title="今日订单"></dashboard>
</div>
</el-col>
<el-col :span="14" class="overhide">
<div class="">
<div class="clearfix">
<!-- <div class="clearfix">
<p class="tit yuefen-box"> <span>8月</span> <img src="../../assets/img/viitto/xiajiantou.png" alt=""></p>
</div>
</div> -->
<p class="sb-tit sb-tit-top">今日交易总额</p>
<h1 class="big-price"><span>25888.00</span> <img src="../../assets/img/viitto/hongsedian.png" alt=""></h1>
<h1 class="big-price"><span>{{dataList.TotalMoney}}</span>
<img v-if="dataList.ToDayMoneyChange==1" src="../../assets/img/viitto/lvsedian.png" alt="">
<img v-if="dataList.ToDayMoneyChange==2" src="../../assets/img/viitto/hongsedian.png" alt="">
</h1>
<div class="price-line"></div>
<p class="sb-tit sb-tit-top">今日交易总额</p>
<h1 class="big-price"><span>25888.00</span> <img src="../../assets/img/viitto/lvsedian.png" alt=""></h1>
<p class="sb-tit sb-tit-top">年度累计交易</p>
<h1 class="big-price"><span>{{dataList.YearTotalMoney}}</span>
<img v-if="dataList.YearMoneyChange==1" src="../../assets/img/viitto/lvsedian.png" alt="">
<img v-if="dataList.YearMoneyChange==2" src="../../assets/img/viitto/hongsedian.png" alt="">
</h1>
</div>
</el-col>
</el-row>
......@@ -252,74 +319,18 @@ ul li {
<el-col :span="12">
<div class="zhanbi-tit"></div>
<ul class="progress-box">
<li class="progress-item">
<p class="sb-tit">自由行 <span>25%</span></p>
<el-progress :text-inside="true" :stroke-width="6" :percentage="25"></el-progress>
</li>
<li class="progress-item">
<p class="sb-tit">自由行 <span>25%</span></p>
<el-progress :text-inside="true" :stroke-width="6" :percentage="25"></el-progress>
</li>
<li class="progress-item">
<p class="sb-tit">自由行 <span>25%</span></p>
<el-progress :text-inside="true" :stroke-width="6" :percentage="25"></el-progress>
</li>
<li class="progress-item">
<p class="sb-tit">自由行 <span>25%</span></p>
<el-progress :text-inside="true" :stroke-width="6" :percentage="25"></el-progress>
</li>
<li class="progress-item">
<p class="sb-tit">自由行 <span>25%</span></p>
<el-progress :text-inside="true" :stroke-width="6" :percentage="25"></el-progress>
</li>
<li class="progress-item">
<p class="sb-tit">自由行 <span>25%</span></p>
<el-progress :text-inside="true" :stroke-width="6" :percentage="25"></el-progress>
</li>
<li class="progress-item">
<p class="sb-tit">自由行 <span>25%</span></p>
<el-progress :text-inside="true" :stroke-width="6" :percentage="25"></el-progress>
</li>
<li class="progress-item">
<p class="sb-tit">自由行 <span>25%</span></p>
<el-progress :text-inside="true" :stroke-width="6" :percentage="25"></el-progress>
<li class="progress-item" v-for="item in dataList.OrderTypeRatio">
<p class="sb-tit">{{item.Name}} <span>{{item.Ratio}}%</span></p>
<el-progress :text-inside="true" :stroke-width="6" :percentage="item.Ratio"></el-progress>
</li>
</ul>
</el-col>
<el-col :span="12">
<div class="zhanbi-tit zhanbi-tit2"></div>
<ul class="progress-box">
<li class="progress-item">
<p class="sb-tit">自由行 <span>25%</span></p>
<el-progress :text-inside="true" :stroke-width="6" :percentage="25"></el-progress>
</li>
<li class="progress-item">
<p class="sb-tit">自由行 <span>25%</span></p>
<el-progress :text-inside="true" :stroke-width="6" :percentage="25"></el-progress>
</li>
<li class="progress-item">
<p class="sb-tit">自由行 <span>25%</span></p>
<el-progress :text-inside="true" :stroke-width="6" :percentage="25"></el-progress>
</li>
<li class="progress-item">
<p class="sb-tit">自由行 <span>25%</span></p>
<el-progress :text-inside="true" :stroke-width="6" :percentage="25"></el-progress>
</li>
<li class="progress-item">
<p class="sb-tit">自由行 <span>25%</span></p>
<el-progress :text-inside="true" :stroke-width="6" :percentage="25"></el-progress>
</li>
<li class="progress-item">
<p class="sb-tit">自由行 <span>25%</span></p>
<el-progress :text-inside="true" :stroke-width="6" :percentage="25"></el-progress>
</li>
<li class="progress-item">
<p class="sb-tit">自由行 <span>25%</span></p>
<el-progress :text-inside="true" :stroke-width="6" :percentage="25"></el-progress>
</li>
<li class="progress-item">
<p class="sb-tit">自由行 <span>25%</span></p>
<el-progress :text-inside="true" :stroke-width="6" :percentage="25"></el-progress>
<li class="progress-item" v-for="item in dataList.YearOrderTypeRatio">
<p class="sb-tit">{{item.Name}} <span>{{item.Ratio}}%</span></p>
<el-progress :text-inside="true" :stroke-width="6" :percentage="item.Ratio"></el-progress>
</li>
</ul>
</el-col>
......@@ -327,101 +338,56 @@ ul li {
</el-col>
<el-col :span="16">
<div class="right-top">
<div class="ditu">地图热点</div>
<div class="ditu">交易统计</div>
<div class="noCked" @click="exChangeBoard()">客户统计</div>
<p class="name">印象之旅数据看板</p>
</div>
<el-row>
<el-col :span="20">
<div class="map-box">
<centerMp></centerMp>
<div class="map-box" style="position:relative;top:-50px;left:-140px;">
<centerMp :dataArea="dataArea"></centerMp>
</div>
</el-col>
<el-col :span="4">
<div class="right-yonghu">
<div class="huoyue">
<p>当前活跃用户</p>
<p class="fs50 fcff">102</p>
</div>
<div class="yonghu-item">
<p class="sb-tit">APP</p>
<P class="fs50 fcff">50 <img class="biaoji" src="../../assets/img/viitto/lvsedian.png" alt=""></P>
<div class="line"></div>
<p class="fs50 fcff">{{dataList.ToDayClientLoginNum}}</p>
</div>
<div class="yonghu-item">
<p class="sb-tit">APP</p>
<P class="fs50 fcff">50 <img class="biaoji" src="../../assets/img/viitto/lvsedian.png" alt=""></P>
<div class="yonghu-item" v-for="item in dataList.ToDayClientLogin">
<p class="sb-tit">{{item.Name}}</p>
<P class="fs50 fcff">{{item.Count}}
<img v-if="item.Change==1" class="biaoji" src="../../assets/img/viitto/lvsedian.png" alt="">
<img v-if="item.Change==2" class="biaoji" src="../../assets/img/viitto/hongsedian.png" alt="">
</P>
<div class="line"></div>
</div>
<div class="yonghu-item yonghu-item-last">
<p class="sb-tit">APP</p>
<P class="fs50 fcff">50 <img class="biaoji" src="../../assets/img/viitto/hongsedian.png" alt=""></P>
</div>
</div>
</el-col>
</el-row>
<el-row><p class="bottom-tit">各平台交易占比</p></el-row>
<el-row><p class="bottom-tit">各平台交易额占比</p></el-row>
<el-row class="bottom" :gutter="35">
<el-col :span="8">
<el-col :span="8" v-for="(item,index) in dataList.ToDayPlatformTrade">
<div class="bottom-item">
<div>
<img src="../../assets/img/viitto/pc_1.png" alt="">
<img v-if="item.Name=='PC'" src="../../assets/img/viitto/pc_1.png" alt="">
<img v-if="item.Name=='APP'" src="../../assets/img/viitto/shouji_1.png" alt="">
<img v-if="item.Name=='小程序'" src="../../assets/img/viitto/xiaocehngxu_1.png" alt="">
</div>
<div>
<p class="sb-tit">PC今日交易额</p>
<p class="bottom-price">¥ 1487828</p>
<div style="width:100%">
<p v-if="item.Name=='PC'" class="sb-tit">PC今日交易额</p>
<p v-if="item.Name=='APP'" class="sb-tit">APP今日交易额</p>
<p v-if="item.Name=='小程序'" class="sb-tit">小程序今日交易额</p>
<p class="bottom-price">¥ {{item.Count}}</p>
<div class="line"></div>
<div class="zhanbi">
<div class='zhanbi'>
<div>
<p class="sb-tit">日占比</p>
<p class="number">25<sub>%</sub></p>
<p :class="{'number':index==0,'number2':index==1,'number3':index==2}">{{item.Ratio}}<span>%</span></p>
</div>
<div>
<p class="sb-tit">年占比</p>
<p class="number">25<sub>%</sub></p>
</div>
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="bottom-item">
<div>
<img src="../../assets/img/viitto/shouji_1.png" alt="">
</div>
<div>
<p class="sb-tit">PC今日交易额</p>
<p class="bottom-price">¥ 1487828</p>
<div class="line"></div>
<div class="zhanbi zhanbi2">
<div>
<p class="sb-tit">日占比</p>
<p class="number">25<sub>%</sub></p>
</div>
<div>
<p class="sb-tit">年占比</p>
<p class="number">25<sub>%</sub></p>
</div>
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="bottom-item">
<div>
<img src="../../assets/img/viitto/xiaocehngxu_1.png" alt="">
</div>
<div>
<p class="sb-tit">PC今日交易额</p>
<p class="bottom-price">¥ 1487828</p>
<div class="line"></div>
<div class="zhanbi zhanbi3">
<div>
<p class="sb-tit">日占比</p>
<p class="number">25<sub>%</sub></p>
</div>
<div>
<p class="sb-tit">年占比</p>
<p class="number">25<sub>%</sub></p>
<p :class="{'number':index==0,'number2':index==1,'number3':index==2}">{{dataList.YearPlatformTrade[index].Ratio}}<span>%</span></p>
</div>
</div>
</div>
......@@ -443,40 +409,89 @@ export default {
data(){
return {
socket: null,
dataList: null,
//标点
dataArea:[],
num:1
}
},mounted() {
// this.connec();
this.apiJavaPost("/api/user/get_b2b_data", {}, res=>{
if (res.data.resultCode == 1) {
console.log(res)
}
}, null)
//this.loadSites();
//this.getCityByIp();
this.init();
setTimeout(() => {
this.connec();
}, 1000);
// setTimeout(() => {
// this.connec();
// }, 1000);
// this.exChangeBoard();
// }, 300000);
},methods:{
//不同进度条不同颜色
customColorMethod(percentage) {
// console.log(percentage,'percentage');
// if (percentage <= 20) {
// return '#f56c6c';
// } else if (percentage>20&&percentage <=40) {
// return '#e6a23c';
// } else if(percentage>40&&percentage <= 60){
// return '#5cb87a';
// } else if(percentage>60&&percentage <= 80){
// return '#1989fa'
// } else if(percentage>80&&percentage <= 100){
// return '#6f7ad3'
// }
},
init(){
//let url='http://47.96.23.199:5000/api/user/get_b2b_data'
let url = 'http://192.168.2.16:5001/api/user/get_b2b_data'
let msg={
tdsourcetag:'s_pcqq_aiomsg'
}
this.apiRequest(url,msg,r=>{
if(r.data.resultCode==1){
this.dataList = r.data.data[0];
//放入hotCity
this.dataArea=[];
this.dataList.CityHot.forEach(x=>{
this.dataArea.push({
name:x.CityName,
value: [x.Lng,x.Lat]
})
})
}else{
this.Error(r.data.message);
}
});
},
connec(){
let _this=this
let url = 'http://47.96.23.199:5000/data_b2b_server'
let url = 'http://47.96.23.199:5000/data_server'
let userInfo = this.getLocalStorage()
this.socket = this.$socketio.connect(url)
// 城市登录
this.socket.on('b2b_city_data', function (msg) {
console.log(msg)
_this.dataList = msg.data[0];
_this.$forceUpdate();
});
// 关于同行那一部分的 同行数量、激活总数、沉睡客户数量、app下载数量
this.socket.on('b2b_client_data', function (msg) {
console.log(msg)
_this.dataList = msg.data[0];
_this.$forceUpdate();
});
// 今日/年度交易信息/优惠金额、返佣金额、大红包余额
this.socket.on('b2b_trade_data', function (msg) {
console.log(msg)
_this.dataList = msg.data[0];
_this.$forceUpdate();
});
// 其他的 现暂时没得 预留的
this.socket.on('b2b_other_data', function (msg) {
console.log(msg)
_this.dataList = msg.data[0];
_this.$forceUpdate();
});
},
//切换统计看板
exChangeBoard(){
//window.location="http://data.oytour.com/#/viittoData2"
window.location="http://192.168.0.112:8080/#/viittoData2"
}
}
}
......
src/components/viitto/viittoData2.vue
View file @ 86f8d848
<style>
@font-face {
font-family: "PINGFANG EXTRALIGHT";
src:url("../../assets/fonts/PINGFANG EXTRALIGHT.TTF") format("truetype"); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
font-style: normal;
font-weight: normal;
}
@font-face {
font-family: "PINGFANG REGULAR";
src:url("../../assets/fonts/PINGFANG REGULAR.TTF") format("truetype"); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
font-style: normal;
font-weight: normal;
}
@font-face {
font-family: "MADA-MEDIUM";
src:url("../../assets/fonts/MADA-MEDIUM.TTF") format("truetype"); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
font-style: normal;
font-weight: normal;
}
.viittoData2 {
padding: 47px;
height: 100%;
width: 100%;
box-sizing: border-box;
background: rgba(29, 36, 61, 1);
}
.viittoData2 .tit {
......@@ -27,7 +46,7 @@
.viittoData2 .yuefen-box img {
height: 5px;
}
.ditu {
.ditu2 {
width: 130px;
height: 34px;
background: linear-gradient(
......@@ -39,6 +58,8 @@
color: white;
text-align: center;
line-height: 34px;
margin-left:-17px;
display: inline-block;
}
.name {
font-size: 40px;
......@@ -72,7 +93,7 @@
}
.left-item .tit-name {
font-size: 22px;
font-family: PingFang-SC-Regular;
font-family: PINGFANG REGULAR;
font-weight: 400;
color: rgba(73, 78, 99, 0);
background: linear-gradient(
......@@ -84,8 +105,8 @@
-webkit-text-fill-color: transparent;
}
.left-item .tit-money {
font-size: 38px;
font-family: Mada-Regular;
font-size: 40px;
font-family: MADA-MEDIUM;
font-weight: 400;
color: rgba(255, 255, 255, 1);
margin-top: 35px;
......@@ -126,7 +147,7 @@
}
.tj-tit {
font-size: 20px;
font-family: PingFang-SC-Light;
font-family: PINGFANG REGULAR;
font-weight: 300;
color: rgba(197, 197, 197, 1);
margin-bottom: 30px;
......@@ -138,7 +159,7 @@
display: inline-block;
width: 50%;
font-size: 42px;
font-family: Mada-Regular;
font-family: MADA-MEDIUM;
font-weight: 400;
color: rgba(255, 254, 254, 1);
text-shadow: 1px 2px 2px rgba(19, 23, 52, 1);
......@@ -146,6 +167,8 @@
.tj-number .tit {
font-size: 20px;
margin-top: 5px;
font-family: PINGFANG REGULAR;
color:#494E63;
margin-bottom: 15px;
}
.tj-number > div > div span {
......@@ -155,7 +178,7 @@
}
.app-xiazai-tit {
font-size: 22px;
font-family: PingFang-SC-Regular;
font-family: PINGFANG REGULAR;
font-weight: 400;
color: rgba(204, 206, 211, 1);
margin-top: 40px;
......@@ -197,14 +220,31 @@
.app-xiazai p:nth-child(3) span {
font-size: 24px;
}
.viittoData2 .viittoRow{
height: 100%;
display: flex;
align-items: center;
}
.noCked2{
width: 130px;
height: 34px;
background-color: #232944;
border-radius: 17px;
color: white;
text-align: center;
line-height: 34px;
display: inline-block;
font-family: PINGFANG REGULAR;
cursor: pointer;
}
</style>
<template>
<div class="viittoData2">
<el-row>
<el-row class="viittoRow">
<el-col :span="5">
<div class="clearfix">
<div class="clearfix" style="visibility:hidden">
<p class="tit yuefen-box">
<span>8月</span>
<span>2019年</span>
<img src="../../assets/img/viitto/xiajiantou.png" alt />
</p>
</div>
......@@ -215,7 +255,7 @@
</el-col>
<el-col :span="18">
<p class="tit-name">累计优惠金额</p>
<p class="tit-money">¥ 589568.29</p>
<p class="tit-money">¥ {{dataList.DiscountMoney}}</p>
</el-col>
</el-row>
</div>
......@@ -226,7 +266,7 @@
</el-col>
<el-col :span="18">
<p class="tit-name">累计返佣金额</p>
<p class="tit-money">¥ 589568.29</p>
<p class="tit-money">¥ {{dataList.RebateMoney}}</p>
</el-col>
</el-row>
</div>
......@@ -237,28 +277,29 @@
</el-col>
<el-col :span="18">
<p class="tit-name">幸福存折累计余额</p>
<p class="tit-money">¥ 589568.29</p>
<p class="tit-money">¥ {{dataList.BigEnvelopeMoney}}</p>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="12">
<div class="right-top">
<div class="ditu">地图热点</div>
<div class="right-top" style="z-index:999;position:relative;">
<div class="noCked2" @click="exChangeBoard()">交易统计</div>
<div class="ditu2">客户统计</div>
</div>
<div class="map-box">
<centerMp></centerMp>
<div class="map-box" style="position:relative;left:-90px;top:-80px;z-index:1;">
<centerMp :InActiveLen="InActiveLen"></centerMp>
</div>
<el-row class="tonghangshu">
<el-col :span="12">
<p class="tj-tit">同行总数</p>
<div class="tj-number">
<span>1892</span>
<span>{{dataList.ClientNum}}</span>
<div>
<p class="tit">昨日增加数</p>
<div>
<img src="../../assets/img/viitto/uer2.png" alt />
<span>4</span>
<span>{{dataList.ClientNumYesterday}}</span>
</div>
</div>
</div>
......@@ -266,12 +307,12 @@
<el-col :span="12">
<p class="tj-tit">激活总数</p>
<div class="tj-number">
<span>1892</span>
<span>{{dataList.ClientEnableNum}}</span>
<div>
<p class="tit">昨日增加数</p>
<div>
<img src="../../assets/img/viitto/uer1.png" alt />
<span>4</span>
<span>{{dataList.ClientEnableNumYesterday}}</span>
</div>
</div>
</div>
......@@ -284,14 +325,14 @@
</div>
<p class="app-xiazai-tit">APP下载用户数量</p>
<div class="app-xiazai">
<p>45888</p>
<p>{{dataList.APPDownNum}}</p>
<p></p>
<p>
用户占比
<span>98%</span>
<span>{{GetPercent(dataList.APPDownNum,dataList.ClientNum)}}</span>
</p>
</div>
<p class="app-xiazai-tit">APP下载用户数量</p>
<p class="app-xiazai-tit">用户数据统计</p>
<div ref="mychart" :style="{height:'330px',width:'500px'}"></div>
</el-col>
</el-row>
......@@ -305,27 +346,59 @@ export default {
},
data() {
return {
socket: null
socket: null,
dataList:{},
//活跃用户的名称
ActiveDataName:[],
//活跃用户的数据
ActiveData:[],
//不活跃数组长度
InActiveLen:0,
};
},
mounted() {
// this.connec();
this.apiJavaPost(
"/api/user/get_b2b_data",
{},
res => {
if (res.data.resultCode == 1) {
console.log(res);
}
},
null
);
this.getB2BAddress();
this.getdata();
setTimeout(() => {
this.connec();
}, 1000);
// setTimeout(() => {
// this.connec();
// }, 1000);
this.init();
// this.exChangeBoard();
// }, 300000);
},
methods: {
getdata(){
let url='http://47.96.23.199:5000/api/user/get_b2b_data'
//let url = 'http://192.168.2.16:5001/api/user/get_b2b_data'
let msg={
tdsourcetag:'s_pcqq_aiomsg'
}
this.apiRequest(url,msg,r=>{
if(r.data.resultCode==1){
this.dataList = r.data.data[0];
this.ActiveDataName=[];
this.ActiveData=[];
this.dataList.PlatformClient.forEach(x => {
this.ActiveDataName.push(x.Name);
this.ActiveData.push(x.Count);
});
this.ActiveDataName.push('沉睡用户');
this.ActiveData.push(this.dataList.SleepClientNum);
this.init();
}else{
this.Error(r.data.message);
}
});
},
//获取百分比
GetPercent(num,total){
num = parseFloat(num);
total = parseFloat(total);
if (isNaN(num) || isNaN(total)) {
return "-";
}
return total <= 0 ? "0%" : (Math.round(num / total * 10000) / 100.00)+"%";
},
init() {
let myChart = this.$echarts.init(this.$refs.mychart);
let _this = this;
......@@ -347,7 +420,7 @@ export default {
xAxis: [
{
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
data: _this.ActiveDataName,
axisTick: {
alignWithLabel: true
},
......@@ -380,8 +453,8 @@ export default {
type: 'pictorialBar',
symbol: 'path://M47.5,58.5h-25h-12c6.6,0,12-5.4,12-12v-35h25v35c0,6.6,5.4,12,12,12H47.5z',
symbolClip: true,
barWidth: "80%",
data: [10, 52, 200, 334, 390, 330, 220],
barWidth: "60%",
data: _this.ActiveData,
color: {
type: 'linear',
x: 0,
......@@ -396,7 +469,14 @@ export default {
global: false // 缺省为 false
},
itemStyle: {
barBorderRadius: [5, 5, 0, 0]
barBorderRadius: [5, 5, 0, 0],
//通常情况下：
// normal:{
// color: function (params){
// var colorList = [this.color,this.color,this.color,'rgb(195,229,235)'];
// return colorList[params.dataIndex];
// }
// },
},
}
]
......@@ -405,11 +485,82 @@ export default {
myChart.setOption(option);
},
connec() {
let _this = this;
let url = "http://47.96.23.199:5000/data_b2b_server";
let userInfo = this.getLocalStorage();
this.socket = this.$socketio.connect(url);
let _this=this
let url = 'http://47.96.23.199:5000/data_server'
let userInfo = this.getLocalStorage()
this.socket = this.$socketio.connect(url)
// 城市登录
this.socket.on('b2b_city_data', function (msg) {
_this.dataList = msg.data[0];
_this.$forceUpdate();
});
// 关于同行那一部分的 同行数量、激活总数、沉睡客户数量、app下载数量
this.socket.on('b2b_client_data', function (msg) {
_this.dataList = msg.data[0];
_this.$forceUpdate();
});
// 今日/年度交易信息/优惠金额、返佣金额、大红包余额
this.socket.on('b2b_trade_data', function (msg) {
_this.dataList = msg.data[0];
_this.$forceUpdate();
});
// 其他的 现暂时没得 预留的
this.socket.on('b2b_other_data', function (msg) {
_this.dataList = msg.data[0];
_this.$forceUpdate();
});
},
//切换统计看板
exChangeBoard(){
// window.location="http://data.oytour.com/#/viittoData"
window.location="http://192.168.0.112:8080/#/viittoData"
},
//获取地址、
getB2BAddress(){
this.apipost("financestatistics_post_GetB2BBoardClientAddressList", {}, res => {
//不经常活动的地址
let InActiveList = res.data.data.InActiveList;
let ActivateList = res.data.data.ActivateList;
var result = [];
var obj = {};
for(var i =0; i<InActiveList.length; i++){
if(!obj[InActiveList[i].Province]){
result.push(InActiveList[i]);
obj[InActiveList[i].Province] = true;
}
}
//活动的
var resultActive = [];
var obj2 = {};
for(var i =0; i<ActivateList.length; i++){
if(!obj2[ActivateList[i].Province]){
resultActive.push(ActivateList[i]);
obj2[ActivateList[i].Province] = true;
}
}
console.log(result,'不毁约');
this.InActiveLen = result.length;
console.log(this.InActiveLen,'钱');
console.log(resultActive,'去重后');
if(res.data.resultCode==1){
result.forEach(x=>{
this.bus.$emit("addpoint",{
city:x.City,
address:x.District
});
})
// resultActive.forEach(x=>{
// this.bus.$emit("addActivePoint",{
// city:x.City,
// address:x.District
// });
// })
}else{
this.Error(res.data.message);
}
},err => {});
}
}
};
</script>script
\ No newline at end of file
</script>
\ No newline at end of file
src/views/index.vue
View file @ 86f8d848
......@@ -260,7 +260,7 @@ export default {
},
connec(){
let _this=this
let url = 'http://dataapi.oytour.com/data_server'
let url = 'http://47.96.23.199:5000/data_server'
// let url = 'http://192.168.2.215:5000/data_server'
let userInfo = this.getLocalStorage()
// if (userInfo) {
......@@ -331,7 +331,8 @@ export default {
},
init(){
// this.apipost('')
let url='http://dataapi.oytour.com/api/user/get_init_data'
//let url='http://dataapi.oytour.com/api/user/get_init_data'
let url='http://47.96.23.199:5000/api/user/get_init_data'
let msg={
tdsourcetag:'s_pcqq_aiomsg'
}
......
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