Skip to content

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

asd

parent 49f72465
Hide whitespace changes
Inline Side-by-side
Showing with 449 additions and 276 deletions
src/components/sellDashboard/map/viittoMap.vue
View file @ 86f8d848
<template> <template>
<div class="echarts" :style="{height:'100%',width:'100%'}"> <div class="echarts" :style="{height:'110%',width:'110%'}">
<div :style="{height:'100%',width:'100%'}" ref="myEchart"></div> <div :style="{height:'110%',width:'110%'}" 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 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> </div>
</template> </template>
<script> <script>
...@@ -11,19 +12,26 @@ import "../../../../node_modules/echarts/map/js/china.js"; // 引入中国地图 ...@@ -11,19 +12,26 @@ import "../../../../node_modules/echarts/map/js/china.js"; // 引入中国地图
import BMap from 'BMap'; import BMap from 'BMap';
export default { export default {
name: "echarts", name: "echarts",
props: ["userJson"], props: ["userJson","dataArea","InActiveLen"],
data() { data() {
return { return {
chart: null, chart: null,
position: [-999999, -999999], position: [-999999, -999999],
points:[], points:[],
myChart:{} //活动人数
ActivateList:[],
myChart:{},
isShow:false,
}; };
}, },
mounted() { mounted() {
console.log(this.InActiveLen,'InActiveLen');
this.bus.$on('addpoint',addTradeInfo=>{ this.bus.$on('addpoint',addTradeInfo=>{
this.addPoint(addTradeInfo) this.addPoint(addTradeInfo)
}) })
this.bus.$on('addActivePoint',addTradeInfo=>{
this.ActivePoint(addTradeInfo)
})
this.chinaConfigure(); this.chinaConfigure();
}, },
beforeDestroy() { beforeDestroy() {
...@@ -37,9 +45,9 @@ export default { ...@@ -37,9 +45,9 @@ export default {
methods: { methods: {
chinaConfigure() { chinaConfigure() {
var myData = [ var myData = [
// { name: "1", value: [121.15, 31.89, 90] }, //{ name: "北京", value: [116.413384, 39.910925] },
// { name: "2", value: [109.781327, 39.608266, 70] }, //{ name: "重庆", value: [106.54041, 29.40268] },
// { name: "3", value: [120.38, 37.35, 42] }, // { name: "北京", value: [120.38, 37.35, 42] },
// { name: "4", value: [122.207216, 29.985295, 23] }, // { name: "4", value: [122.207216, 29.985295, 23] },
// { name: "5", value: [110.245672, 30.7787677, 20] } // { name: "5", value: [110.245672, 30.7787677, 20] }
]; ];
...@@ -48,7 +56,9 @@ export default { ...@@ -48,7 +56,9 @@ export default {
this.myChart.setOption({ this.myChart.setOption({
// 进行相关配置 // 进行相关配置
backgroundColor: "transparent", backgroundColor: "transparent",
tooltip: {}, // 鼠标移到图里面的浮动提示框 tooltip: { // 鼠标移到图里面的浮动提示框
showContent:false,
},
dataRange: { dataRange: {
min: 0, min: 0,
max: 100, max: 100,
...@@ -103,28 +113,24 @@ export default { ...@@ -103,28 +113,24 @@ export default {
series: [ series: [
{ {
type: "scatter", type: "scatter",
coordinateSystem: "geo", // 对应上方配置 markPoint: this.markPoint,
markPoint: this.markPoint name: "", //series名称
},
{
name: "交易数据", //series名称
type: "scatter", //为散点类型
coordinateSystem: "geo", // series坐标系类型 coordinateSystem: "geo", // series坐标系类型
data: myData, data: this.dataArea,
symbol: "circle", symbol: "circle",
symbolSize: [10, 10], symbolSize: [5, 5],
animation: true animation: false,
tooltip:this.tooltip,
silent: false
} }
] ]
}); });
}, },
addPoint(param){ addPoint(param){
console.log(param) console.log(param);
let ad=param.address?param.address:param.city let ad=param.address?param.address:param.city
var myGeo = new BMap.Geocoder(); var myGeo = new BMap.Geocoder();
var that=this var that=this
console.log(ad)
myGeo.getPoint(ad, function(point){ myGeo.getPoint(ad, function(point){
if (point) { if (point) {
var geo = that.myChart.getModel().getComponent('geo').coordinateSystem; var geo = that.myChart.getModel().getComponent('geo').coordinateSystem;
...@@ -134,52 +140,52 @@ export default { ...@@ -134,52 +140,52 @@ export default {
that.points.splice(0,1) that.points.splice(0,1)
} }
} }
}) })
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> </script>
<style> <style>
.jiaoyidian { .viittoHot {
position: absolute; position: absolute;
z-index: 5; z-index: 5;
color: #fff; color: #fff;
width: 10px; width: 5px;
height: 10px; height: 5px;
background: #2a73fe; background: #2a73fe;
border-radius: 100%; 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 {
position: absolute;
z-index: 5;
color: #fff;
width: 10px;
height: 10px;
background: #2a9e9e;
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 { .viittoActive{
0% { position: absolute;
box-shadow: 0 0 20px inherit; z-index: 5;
opacity: 0; color: #fff;
} width: 5px;
100% { height: 5px;
box-shadow: 0 1px 30px inherit; background: #FF75A1;
opacity: 1; border-radius: 100%;
width: 10px;
height: 10px;
}
} }
</style> </style>
src/components/viitto/viittoData.vue
View file @ 86f8d848
<style> <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 { ul li {
list-style: none; list-style: none;
} }
.viittoData{ .viittoData{
background-color: #171C34; background-color: #171C34;
height: 100%; height: 100%;
display: flex;
align-items:center;
} }
.todayOrder{ .todayOrder{
width: 100%; width: 100%;
height: 184px; height: 184px;
} }
.content-box{ .content-box{
padding: 30px 45px 0 45px; padding: 0 45px 0 45px;
} }
.viittoData .tit{ .viittoData .tit{
color: #CCCED3; color: #CCCED3;
font-size: 22px; font-size: 22px;
margin-bottom: 30px; margin-bottom: 30px;
font-family: PINGFANG REGULAR;
} }
.sb-tit{ .sb-tit{
color: #71788E; color: #71788E;
font-size: 18px; font-size: 18px;
font-family: PINGFANG REGULAR;
} }
.sb-tit-top{ .sb-tit-top{
margin-bottom: 5px; margin-bottom: 5px;
font-family: PINGFANG REGULAR;
color:#494E63;
} }
.big-price{ .big-price{
font-size: 48px; font-size: 60px;
font-family:Mada-Regular; font-family: MADA-MEDIUM;
font-weight:400; font-weight:400;
color:rgba(236,236,236,1); color:rgba(236,236,236,1);
} }
...@@ -50,7 +74,7 @@ ul li { ...@@ -50,7 +74,7 @@ ul li {
} }
.zhanbi-tit{ .zhanbi-tit{
width: 100%; width: 100%;
height: 115px; height: 95px;
background: url(../../assets/img/viitto/lanse.png); background: url(../../assets/img/viitto/lanse.png);
background-size: 100% 100%; background-size: 100% 100%;
} }
...@@ -67,6 +91,7 @@ ul li { ...@@ -67,6 +91,7 @@ ul li {
background:linear-gradient(0deg,rgba(27,33,60,1),rgba(26,32,56,1)); background:linear-gradient(0deg,rgba(27,33,60,1),rgba(26,32,56,1));
border-radius:8px; border-radius:8px;
overflow-y: auto; overflow-y: auto;
font-family: PINGFANG REGULAR
} }
.progress-item{ .progress-item{
margin-bottom: 21px; margin-bottom: 21px;
...@@ -118,10 +143,13 @@ ul li { ...@@ -118,10 +143,13 @@ ul li {
color: white; color: white;
text-align: center; text-align: center;
line-height: 34px; line-height: 34px;
display:inline-block;
margin-right: -17px;
position: relative;
} }
.right-top{ .right-top{
display: flex; /* display: flex;
align-items: center; align-items: center; */
justify-content: space-between; justify-content: space-between;
} }
.name{ .name{
...@@ -144,7 +172,7 @@ ul li { ...@@ -144,7 +172,7 @@ ul li {
} }
.huoyue p:nth-child(1){ .huoyue p:nth-child(1){
font-size:18px; font-size:18px;
font-family:PingFang-SC-Regular; font-family: PINGFANG REGULAR;
color:rgba(255,255,255,1); color:rgba(255,255,255,1);
} }
.right-yonghu{ .right-yonghu{
...@@ -160,7 +188,7 @@ ul li { ...@@ -160,7 +188,7 @@ ul li {
.fcff{ .fcff{
color: white; color: white;
} }
.line{ .viittoData .line{
margin-top: 15px; margin-top: 15px;
height:3px; height:3px;
background:rgba(33,40,68,1); background:rgba(33,40,68,1);
...@@ -171,24 +199,31 @@ ul li { ...@@ -171,24 +199,31 @@ ul li {
.biaoji{ .biaoji{
position: relative; position: relative;
top: -30px; top: -30px;
left:20px;
} }
.bottom-tit{ .bottom-tit{
font-size:22px; font-size:22px;
color: #CCCED3; color: #CCCED3;
font-family: PINGFANG REGULAR
} }
.bottom-item{ .bottom-item{
margin-top: 30px; margin-top: 30px;
display: flex; display: flex;
padding:10px 20px; padding:10px 20px;
background-color: #1D243D;
border-radius:10px; 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){ .bottom-item>div:nth-child(1){
margin-right: 20px; margin-right: 20px;
} }
.bottom-price{ .bottom-price{
font-size:28px; font-size:28px;
font-family:Mada-Regular; font-family: MADA-MEDIUM;
font-weight:400; font-weight:400;
color:rgba(237,237,237,1); color:rgba(237,237,237,1);
} }
...@@ -197,54 +232,86 @@ ul li { ...@@ -197,54 +232,86 @@ ul li {
display: flex; display: flex;
} }
.zhanbi>div:nth-child(1){ .zhanbi>div:nth-child(1){
margin-right: 10px; margin-right: 40px;
} }
.zhanbi .number{ .zhanbi .number{
flex: 1; flex: 1;
font-size:50px; font-size:40px;
font-family:Mada-Regular; font-family: MADA-MEDIUM;
font-weight: bold; font-weight: 400;
color:rgba(237,237,237,1); color:rgba(237,237,237,1);
background:linear-gradient(-45deg,rgba(167,222,138,1) 0%, rgba(68,214,172,1) 100%); background:linear-gradient(-45deg,rgba(167,222,138,1) 0%, rgba(68,214,172,1) 100%);
-webkit-background-clip:text; -webkit-background-clip:text;
-webkit-text-fill-color:transparent; -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%); background:linear-gradient(-45deg,rgba(255,108,176,1) 0%, rgba(255,147,109,1) 100%);
-webkit-background-clip:text; -webkit-background-clip:text;
-webkit-text-fill-color:transparent; -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%); background:linear-gradient(-45deg,rgba(126,133,238,1) 0%, rgba(63,229,237,1) 100%);
-webkit-background-clip:text; -webkit-background-clip:text;
-webkit-text-fill-color:transparent; -webkit-text-fill-color:transparent;
} }
.zhanbi .number sub{ .zhanbi span{
font-size: 20px; font-size: 20px;
} }
.clearfix:after {content: "\0020";display: block;height: 0;clear: both;} .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> </style>
<template> <template>
<div class="viittoData"> <div class="viittoData" v-if="dataList">
<el-row class="content-box" :gutter="80"> <el-row class="content-box" :gutter="80">
<el-col :span="8"> <el-col :span="8">
<el-row class="left-top"> <el-row class="left-top">
<el-col :span="10"> <el-col :span="10">
<div class="todayOrder"> <div class="todayOrder">
<p class="tit">今日交易订单</p> <p class="tit">今日交易订单</p>
<dashboard :score="67" title="今日订单"></dashboard> <dashboard :score="dataList.OrderNum" title="今日订单"></dashboard>
</div> </div>
</el-col> </el-col>
<el-col :span="14" class="overhide"> <el-col :span="14" class="overhide">
<div class=""> <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> <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> <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> <div class="price-line"></div>
<p class="sb-tit sb-tit-top">今日交易总额</p> <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> <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> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -252,74 +319,18 @@ ul li { ...@@ -252,74 +319,18 @@ ul li {
<el-col :span="12"> <el-col :span="12">
<div class="zhanbi-tit"></div> <div class="zhanbi-tit"></div>
<ul class="progress-box"> <ul class="progress-box">
<li class="progress-item"> <li class="progress-item" v-for="item in dataList.OrderTypeRatio">
<p class="sb-tit">自由行 <span>25%</span></p> <p class="sb-tit">{{item.Name}} <span>{{item.Ratio}}%</span></p>
<el-progress :text-inside="true" :stroke-width="6" :percentage="25"></el-progress> <el-progress :text-inside="true" :stroke-width="6" :percentage="item.Ratio"></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> </li>
</ul> </ul>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<div class="zhanbi-tit zhanbi-tit2"></div> <div class="zhanbi-tit zhanbi-tit2"></div>
<ul class="progress-box"> <ul class="progress-box">
<li class="progress-item"> <li class="progress-item" v-for="item in dataList.YearOrderTypeRatio">
<p class="sb-tit">自由行 <span>25%</span></p> <p class="sb-tit">{{item.Name}} <span>{{item.Ratio}}%</span></p>
<el-progress :text-inside="true" :stroke-width="6" :percentage="25"></el-progress> <el-progress :text-inside="true" :stroke-width="6" :percentage="item.Ratio"></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> </li>
</ul> </ul>
</el-col> </el-col>
...@@ -327,101 +338,56 @@ ul li { ...@@ -327,101 +338,56 @@ ul li {
</el-col> </el-col>
<el-col :span="16"> <el-col :span="16">
<div class="right-top"> <div class="right-top">
<div class="ditu">地图热点</div> <div class="ditu">交易统计</div>
<div class="noCked" @click="exChangeBoard()">客户统计</div>
<p class="name">印象之旅数据看板</p> <p class="name">印象之旅数据看板</p>
</div> </div>
<el-row> <el-row>
<el-col :span="20"> <el-col :span="20">
<div class="map-box"> <div class="map-box" style="position:relative;top:-50px;left:-140px;">
<centerMp></centerMp> <centerMp :dataArea="dataArea"></centerMp>
</div> </div>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="4">
<div class="right-yonghu"> <div class="right-yonghu">
<div class="huoyue"> <div class="huoyue">
<p>当前活跃用户</p> <p>当前活跃用户</p>
<p class="fs50 fcff">102</p> <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="line"></div>
</div> </div>
<div class="yonghu-item"> <div class="yonghu-item" v-for="item in dataList.ToDayClientLogin">
<p class="sb-tit">APP</p> <p class="sb-tit">{{item.Name}}</p>
<P class="fs50 fcff">50 <img class="biaoji" src="../../assets/img/viitto/lvsedian.png" alt=""></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 class="line"></div>
</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> </div>
</el-col> </el-col>
</el-row> </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-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 class="bottom-item">
<div> <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>
<div> <div style="width:100%">
<p class="sb-tit">PC今日交易额</p> <p v-if="item.Name=='PC'" class="sb-tit">PC今日交易额</p>
<p class="bottom-price">¥ 1487828</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="line"></div>
<div class="zhanbi"> <div class='zhanbi'>
<div> <div>
<p class="sb-tit">日占比</p> <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>
<div> <div>
<p class="sb-tit">年占比</p> <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>
</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>
</div> </div>
</div> </div>
</div> </div>
...@@ -443,40 +409,89 @@ export default { ...@@ -443,40 +409,89 @@ export default {
data(){ data(){
return { return {
socket: null, socket: null,
dataList: null,
//标点
dataArea:[],
num:1
} }
},mounted() { },mounted() {
// this.connec(); //this.loadSites();
//this.getCityByIp();
this.apiJavaPost("/api/user/get_b2b_data", {}, res=>{ this.init();
if (res.data.resultCode == 1) { setTimeout(() => {
console.log(res) this.connec();
} }, 1000);
}, null)
// setTimeout(() => { // setTimeout(() => {
// this.connec(); // this.exChangeBoard();
// }, 1000); // }, 300000);
},methods:{ },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(){ connec(){
let _this=this 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() let userInfo = this.getLocalStorage()
this.socket = this.$socketio.connect(url) this.socket = this.$socketio.connect(url)
// 城市登录 // 城市登录
this.socket.on('b2b_city_data', function (msg) { this.socket.on('b2b_city_data', function (msg) {
console.log(msg) _this.dataList = msg.data[0];
_this.$forceUpdate();
}); });
// 关于同行那一部分的 同行数量、激活总数、沉睡客户数量、app下载数量 // 关于同行那一部分的 同行数量、激活总数、沉睡客户数量、app下载数量
this.socket.on('b2b_client_data', function (msg) { 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) { 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) { 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> <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 { .viittoData2 {
padding: 47px; padding: 47px;
height: 100%; height: 100%;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
background: rgba(29, 36, 61, 1); background: rgba(29, 36, 61, 1);
} }
.viittoData2 .tit { .viittoData2 .tit {
...@@ -27,7 +46,7 @@ ...@@ -27,7 +46,7 @@
.viittoData2 .yuefen-box img { .viittoData2 .yuefen-box img {
height: 5px; height: 5px;
} }
.ditu { .ditu2 {
width: 130px; width: 130px;
height: 34px; height: 34px;
background: linear-gradient( background: linear-gradient(
...@@ -39,6 +58,8 @@ ...@@ -39,6 +58,8 @@
color: white; color: white;
text-align: center; text-align: center;
line-height: 34px; line-height: 34px;
margin-left:-17px;
display: inline-block;
} }
.name { .name {
font-size: 40px; font-size: 40px;
...@@ -72,7 +93,7 @@ ...@@ -72,7 +93,7 @@
} }
.left-item .tit-name { .left-item .tit-name {
font-size: 22px; font-size: 22px;
font-family: PingFang-SC-Regular; font-family: PINGFANG REGULAR;
font-weight: 400; font-weight: 400;
color: rgba(73, 78, 99, 0); color: rgba(73, 78, 99, 0);
background: linear-gradient( background: linear-gradient(
...@@ -84,8 +105,8 @@ ...@@ -84,8 +105,8 @@
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
.left-item .tit-money { .left-item .tit-money {
font-size: 38px; font-size: 40px;
font-family: Mada-Regular; font-family: MADA-MEDIUM;
font-weight: 400; font-weight: 400;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
margin-top: 35px; margin-top: 35px;
...@@ -126,7 +147,7 @@ ...@@ -126,7 +147,7 @@
} }
.tj-tit { .tj-tit {
font-size: 20px; font-size: 20px;
font-family: PingFang-SC-Light; font-family: PINGFANG REGULAR;
font-weight: 300; font-weight: 300;
color: rgba(197, 197, 197, 1); color: rgba(197, 197, 197, 1);
margin-bottom: 30px; margin-bottom: 30px;
...@@ -138,7 +159,7 @@ ...@@ -138,7 +159,7 @@
display: inline-block; display: inline-block;
width: 50%; width: 50%;
font-size: 42px; font-size: 42px;
font-family: Mada-Regular; font-family: MADA-MEDIUM;
font-weight: 400; font-weight: 400;
color: rgba(255, 254, 254, 1); color: rgba(255, 254, 254, 1);
text-shadow: 1px 2px 2px rgba(19, 23, 52, 1); text-shadow: 1px 2px 2px rgba(19, 23, 52, 1);
...@@ -146,6 +167,8 @@ ...@@ -146,6 +167,8 @@
.tj-number .tit { .tj-number .tit {
font-size: 20px; font-size: 20px;
margin-top: 5px; margin-top: 5px;
font-family: PINGFANG REGULAR;
color:#494E63;
margin-bottom: 15px; margin-bottom: 15px;
} }
.tj-number > div > div span { .tj-number > div > div span {
...@@ -155,7 +178,7 @@ ...@@ -155,7 +178,7 @@
} }
.app-xiazai-tit { .app-xiazai-tit {
font-size: 22px; font-size: 22px;
font-family: PingFang-SC-Regular; font-family: PINGFANG REGULAR;
font-weight: 400; font-weight: 400;
color: rgba(204, 206, 211, 1); color: rgba(204, 206, 211, 1);
margin-top: 40px; margin-top: 40px;
...@@ -197,14 +220,31 @@ ...@@ -197,14 +220,31 @@
.app-xiazai p:nth-child(3) span { .app-xiazai p:nth-child(3) span {
font-size: 24px; 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> </style>
<template> <template>
<div class="viittoData2"> <div class="viittoData2">
<el-row> <el-row class="viittoRow">
<el-col :span="5"> <el-col :span="5">
<div class="clearfix"> <div class="clearfix" style="visibility:hidden">
<p class="tit yuefen-box"> <p class="tit yuefen-box">
<span>8月</span> <span>2019年</span>
<img src="../../assets/img/viitto/xiajiantou.png" alt /> <img src="../../assets/img/viitto/xiajiantou.png" alt />
</p> </p>
</div> </div>
...@@ -215,7 +255,7 @@ ...@@ -215,7 +255,7 @@
</el-col> </el-col>
<el-col :span="18"> <el-col :span="18">
<p class="tit-name">累计优惠金额</p> <p class="tit-name">累计优惠金额</p>
<p class="tit-money">¥ 589568.29</p> <p class="tit-money">¥ {{dataList.DiscountMoney}}</p>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
...@@ -226,7 +266,7 @@ ...@@ -226,7 +266,7 @@
</el-col> </el-col>
<el-col :span="18"> <el-col :span="18">
<p class="tit-name">累计返佣金额</p> <p class="tit-name">累计返佣金额</p>
<p class="tit-money">¥ 589568.29</p> <p class="tit-money">¥ {{dataList.RebateMoney}}</p>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
...@@ -237,28 +277,29 @@ ...@@ -237,28 +277,29 @@
</el-col> </el-col>
<el-col :span="18"> <el-col :span="18">
<p class="tit-name">幸福存折累计余额</p> <p class="tit-name">幸福存折累计余额</p>
<p class="tit-money">¥ 589568.29</p> <p class="tit-money">¥ {{dataList.BigEnvelopeMoney}}</p>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<div class="right-top"> <div class="right-top" style="z-index:999;position:relative;">
<div class="ditu">地图热点</div> <div class="noCked2" @click="exChangeBoard()">交易统计</div>
<div class="ditu2">客户统计</div>
</div> </div>
<div class="map-box"> <div class="map-box" style="position:relative;left:-90px;top:-80px;z-index:1;">
<centerMp></centerMp> <centerMp :InActiveLen="InActiveLen"></centerMp>
</div> </div>
<el-row class="tonghangshu"> <el-row class="tonghangshu">
<el-col :span="12"> <el-col :span="12">
<p class="tj-tit">同行总数</p> <p class="tj-tit">同行总数</p>
<div class="tj-number"> <div class="tj-number">
<span>1892</span> <span>{{dataList.ClientNum}}</span>
<div> <div>
<p class="tit">昨日增加数</p> <p class="tit">昨日增加数</p>
<div> <div>
<img src="../../assets/img/viitto/uer2.png" alt /> <img src="../../assets/img/viitto/uer2.png" alt />
<span>4</span> <span>{{dataList.ClientNumYesterday}}</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -266,12 +307,12 @@ ...@@ -266,12 +307,12 @@
<el-col :span="12"> <el-col :span="12">
<p class="tj-tit">激活总数</p> <p class="tj-tit">激活总数</p>
<div class="tj-number"> <div class="tj-number">
<span>1892</span> <span>{{dataList.ClientEnableNum}}</span>
<div> <div>
<p class="tit">昨日增加数</p> <p class="tit">昨日增加数</p>
<div> <div>
<img src="../../assets/img/viitto/uer1.png" alt /> <img src="../../assets/img/viitto/uer1.png" alt />
<span>4</span> <span>{{dataList.ClientEnableNumYesterday}}</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -284,14 +325,14 @@ ...@@ -284,14 +325,14 @@
</div> </div>
<p class="app-xiazai-tit">APP下载用户数量</p> <p class="app-xiazai-tit">APP下载用户数量</p>
<div class="app-xiazai"> <div class="app-xiazai">
<p>45888</p> <p>{{dataList.APPDownNum}}</p>
<p></p> <p></p>
<p> <p>
用户占比 用户占比
<span>98%</span> <span>{{GetPercent(dataList.APPDownNum,dataList.ClientNum)}}</span>
</p> </p>
</div> </div>
<p class="app-xiazai-tit">APP下载用户数量</p> <p class="app-xiazai-tit">用户数据统计</p>
<div ref="mychart" :style="{height:'330px',width:'500px'}"></div> <div ref="mychart" :style="{height:'330px',width:'500px'}"></div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -305,27 +346,59 @@ export default { ...@@ -305,27 +346,59 @@ export default {
}, },
data() { data() {
return { return {
socket: null socket: null,
dataList:{},
//活跃用户的名称
ActiveDataName:[],
//活跃用户的数据
ActiveData:[],
//不活跃数组长度
InActiveLen:0,
}; };
}, },
mounted() { mounted() {
// this.connec(); this.getB2BAddress();
this.apiJavaPost( this.getdata();
"/api/user/get_b2b_data", setTimeout(() => {
{}, this.connec();
res => { }, 1000);
if (res.data.resultCode == 1) {
console.log(res);
}
},
null
);
// setTimeout(() => { // setTimeout(() => {
// this.connec(); // this.exChangeBoard();
// }, 1000); // }, 300000);
this.init();
}, },
methods: { 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() { init() {
let myChart = this.$echarts.init(this.$refs.mychart); let myChart = this.$echarts.init(this.$refs.mychart);
let _this = this; let _this = this;
...@@ -347,7 +420,7 @@ export default { ...@@ -347,7 +420,7 @@ export default {
xAxis: [ xAxis: [
{ {
type: "category", type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], data: _this.ActiveDataName,
axisTick: { axisTick: {
alignWithLabel: true alignWithLabel: true
}, },
...@@ -380,8 +453,8 @@ export default { ...@@ -380,8 +453,8 @@ export default {
type: 'pictorialBar', 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', 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, symbolClip: true,
barWidth: "80%", barWidth: "60%",
data: [10, 52, 200, 334, 390, 330, 220], data: _this.ActiveData,
color: { color: {
type: 'linear', type: 'linear',
x: 0, x: 0,
...@@ -396,7 +469,14 @@ export default { ...@@ -396,7 +469,14 @@ export default {
global: false // 缺省为 false global: false // 缺省为 false
}, },
itemStyle: { 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 { ...@@ -405,11 +485,82 @@ export default {
myChart.setOption(option); myChart.setOption(option);
}, },
connec() { connec() {
let _this = this; 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(); let userInfo = this.getLocalStorage()
this.socket = this.$socketio.connect(url); 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 </script>
\ No newline at end of file \ No newline at end of file
src/views/index.vue
View file @ 86f8d848
...@@ -260,7 +260,7 @@ export default { ...@@ -260,7 +260,7 @@ export default {
}, },
connec(){ connec(){
let _this=this 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 url = 'http://192.168.2.215:5000/data_server'
let userInfo = this.getLocalStorage() let userInfo = this.getLocalStorage()
// if (userInfo) { // if (userInfo) {
...@@ -331,7 +331,8 @@ export default { ...@@ -331,7 +331,8 @@ export default {
}, },
init(){ init(){
// this.apipost('') // 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={ let msg={
tdsourcetag:'s_pcqq_aiomsg' 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