Skip to content

M
Muse
Commit 49f72465 authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

1

parent d82fecb3
Hide whitespace changes
Inline Side-by-side
Showing with 1188 additions and 113 deletions
src/components/sellDashboard/map/viittoMap.vue 0 → 100644
View file @ 49f72465
<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>
</template>
<script>
import echarts from "echarts";
// import '../../node_modules/echarts/map/js/world.js'
import "../../../../node_modules/echarts/map/js/china.js"; // 引入中国地图数据
import BMap from 'BMap';
export default {
name: "echarts",
props: ["userJson"],
data() {
return {
chart: null,
position: [-999999, -999999],
points:[],
myChart:{}
};
},
mounted() {
this.bus.$on('addpoint',addTradeInfo=>{
this.addPoint(addTradeInfo)
})
this.chinaConfigure();
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
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: "4", value: [122.207216, 29.985295, 23] },
// { name: "5", value: [110.245672, 30.7787677, 20] }
];
this.myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
window.onresize = this.myChart.resize;
this.myChart.setOption({
// 进行相关配置
backgroundColor: "transparent",
tooltip: {}, // 鼠标移到图里面的浮动提示框
dataRange: {
min: 0,
max: 100,
calculable: true,
color: ["#ff3333", "orange", "yellow", "lime", "aqua"],
itemWidth: 15, //调整左侧彩条的大小。
itemHeight: 100,
y: "center",
textStyle: {
color: "#fff"
},
show: false
},
grid: {
left: "0",
right: "0",
top: "0",
bottom:'0'
},
geo: {
// 这个是重点配置区
map: "china", // 表示中国地图
roam: false,
label: {
normal: {
show: false, // 是否显示对应地名
textStyle: {
color: "rgba(0,0,0,0.4)"
}
}
},
itemStyle: {
normal: {
areaColor: "#242B46", //地图本身的颜色
borderColor: "#151A30", //省份的边框颜色rgb(60,180,207)
borderWidth: 1, //省份的边框宽度
opacity: 0.8, //图形透明度
textStyle: {
show: false
}
},
emphasis: {
areaColor: "rgb(60,180,207)", //高亮时候地图显示的颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: "rgb(60,180,207)"
}
}
},
series: [
{
type: "scatter",
coordinateSystem: "geo", // 对应上方配置
markPoint: this.markPoint
},
{
name: "交易数据", //series名称
type: "scatter", //为散点类型
coordinateSystem: "geo", // series坐标系类型
data: myData,
symbol: "circle",
symbolSize: [10, 10],
animation: true
}
]
});
},
addPoint(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;
let coord = that.myChart.convertToPixel("geo", [point.lng, point.lat]);
that.points.push(coord);
if(that.points.length>100){
that.points.splice(0,1)
}
}
})
},
}
};
</script>
<style>
.jiaoyidian {
position: absolute;
z-index: 5;
color: #fff;
width: 10px;
height: 10px;
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 {
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 {
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/dashboard.vue 0 → 100644
View file @ 49f72465
<style>
</style>
<template>
<div class="inerank-container">
<div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
</div>
</template>
<script>
export default {
props:{
score:{
type:Number,
default:0
},
title:{
type:String,
default:''
}
},
data() {
return {};
},
mounted() {
this.init();
},
methods: {
init() {
let myChart = this.$echarts.init(this.$refs.myLineRank);
let _this = this;
let option = {
series: [
{
type: "gauge",
radius: "99%", //仪表大小
min: 0,
max: 100,
splitNumber: 5,
data: [{ value: this.score, name: _this.title }],
title: {
offsetCenter: [0, '40%'],
color: "#494E63",
},
detail: {
offsetCenter: [0, '-10%'],
fontSize: 40,
color: "#ffffff"
},
axisLine: {
show: false,
lineStyle: {
color: [
[
(this.score/100),
new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 0, color: "#44D6AC" },
{ offset: 1, color: "#A7DE8A" }
])
],
[1, "#00000000"]
],
width: 18
}
},
axisTick:{
show: false
},
axisLabel: {
show: false
},
pointer: {
show: false
},
splitLine: {
show:false
},
}
]
};
myChart.setOption(option);
}
}
};
</script>
<style scoped>
.inerank-container {
height: 100%;
width: 100%;
padding-top: 30px;
}
</style>
src/components/viitto/viittoData.vue 0 → 100644
View file @ 49f72465
<style>
ul li {
list-style: none;
}
.viittoData{
background-color: #171C34;
height: 100%;
}
.todayOrder{
width: 100%;
height: 184px;
}
.content-box{
padding: 30px 45px 0 45px;
}
.viittoData .tit{
color: #CCCED3;
font-size: 22px;
margin-bottom: 30px;
}
.sb-tit{
color: #71788E;
font-size: 18px;
}
.sb-tit-top{
margin-bottom: 5px;
}
.big-price{
font-size: 48px;
font-family:Mada-Regular;
font-weight:400;
color:rgba(236,236,236,1);
}
.big-price img{
position: relative;
top: -25px;
left: 20px;
}
.left-top{
height: 300px;
}
.price-line{
width:373px;
height:3px;
background:rgba(37,45,73,1);
margin-bottom: 28px;
}
.overhide{
overflow: hidden;
}
.zhanbi-tit{
width: 100%;
height: 115px;
background: url(../../assets/img/viitto/lanse.png);
background-size: 100% 100%;
}
.zhanbi-tit2{
background: url(../../assets/img/viitto/fense.png);
background-size: 100% 100%;
}
.viittoData .el-progress-bar__innerText{
display: none;
}
.progress-box{
padding:20px 40px;
height: 470px;
background:linear-gradient(0deg,rgba(27,33,60,1),rgba(26,32,56,1));
border-radius:8px;
overflow-y: auto;
}
.progress-item{
margin-bottom: 21px;
}
.progress-item p span{
color: #EDEDED;
font-size: 20px;
float: right;
}
.progress-box::-webkit-scrollbar{
/*滚动条整体样式*/
width: 4px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 8px;
}
.progress-box::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 4px;
-webkit-box-shadow: inset 0 0 2px rgba(26,32,56,1);
background: rgba(26,32,56,1);
}
.progress-box::-webkit-scrollbar-track {
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 2px rgba(26,32,56,1);
border-radius: 4px;
background: rgba(26,32,56,1);
}
.yuefen-box{
width:140px;
height:34px;
background:rgba(12,16,31,1);
opacity:0.35;
border-radius:17px;
display: flex;
align-items: center;
padding: 0 15px;
justify-content: space-between;
color: #EBECED !important;
float: right;
}
.yuefen-box img{
height: 5px;
}
.ditu{
width:130px;
height:34px;
background:linear-gradient(90deg,rgba(126,133,238,1),rgba(63,229,237,1));
border-radius:17px;
color: white;
text-align: center;
line-height: 34px;
}
.right-top{
display: flex;
align-items: center;
justify-content: space-between;
}
.name{
font-size: 40px;
font-weight: bold;
color: white;
}
.map-box{
height:560px;
}
.huoyue{
height:120px;
background:linear-gradient(-45deg,rgba(228,156,133,1),rgba(199,57,203,1));
box-shadow:0px 1px 2px 0px rgba(236,48,139,1);
border-radius:8px 8px 0px 0px;
color: white;
padding-left: 44px;
padding-top: 20px;
font-weight:400;
}
.huoyue p:nth-child(1){
font-size:18px;
font-family:PingFang-SC-Regular;
color:rgba(255,255,255,1);
}
.right-yonghu{
margin-top: 35px;
}
.yonghu-item{
padding: 20px 20px 0 20px;
background:rgba(25,32,57,1);
}
.fs50{
font-size: 50px;
}
.fcff{
color: white;
}
.line{
margin-top: 15px;
height:3px;
background:rgba(33,40,68,1);
}
.yonghu-item-last{
padding-bottom: 40px;
}
.biaoji{
position: relative;
top: -30px;
}
.bottom-tit{
font-size:22px;
color: #CCCED3;
}
.bottom-item{
margin-top: 30px;
display: flex;
padding:10px 20px;
background-color: #1D243D;
border-radius:10px;
}
.bottom-item>div:nth-child(1){
margin-right: 20px;
}
.bottom-price{
font-size:28px;
font-family:Mada-Regular;
font-weight:400;
color:rgba(237,237,237,1);
}
.zhanbi{
margin-top: 20px;
display: flex;
}
.zhanbi>div:nth-child(1){
margin-right: 10px;
}
.zhanbi .number{
flex: 1;
font-size:50px;
font-family:Mada-Regular;
font-weight: bold;
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{
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{
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{
font-size: 20px;
}
.clearfix:after {content: "\0020";display: block;height: 0;clear: both;}
</style>
<template>
<div class="viittoData">
<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>
</div>
</el-col>
<el-col :span="14" class="overhide">
<div class="">
<div class="clearfix">
<p class="tit yuefen-box"> <span>8月</span> <img src="../../assets/img/viitto/xiajiantou.png" alt=""></p>
</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>
<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>
</div>
</el-col>
</el-row>
<el-row :gutter="40">
<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>
</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>
</ul>
</el-col>
</el-row>
</el-col>
<el-col :span="16">
<div class="right-top">
<div class="ditu">地图热点</div>
<p class="name">印象之旅数据看板</p>
</div>
<el-row>
<el-col :span="20">
<div class="map-box">
<centerMp></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>
</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 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 class="bottom" :gutter="35">
<el-col :span="8">
<div class="bottom-item">
<div>
<img src="../../assets/img/viitto/pc_1.png" alt="">
</div>
<div>
<p class="sb-tit">PC今日交易额</p>
<p class="bottom-price">¥ 1487828</p>
<div class="line"></div>
<div class="zhanbi">
<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/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>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</template>
<script>
import dashboard from "./dashboard";
import centerMp from "../sellDashboard/map/viittoMap";
export default {
components: {
dashboard,
centerMp
},
data(){
return {
socket: null,
}
},mounted() {
// this.connec();
this.apiJavaPost("/api/user/get_b2b_data", {}, res=>{
if (res.data.resultCode == 1) {
console.log(res)
}
}, null)
// setTimeout(() => {
// this.connec();
// }, 1000);
},methods:{
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)
// 城市登录
this.socket.on('b2b_city_data', function (msg) {
console.log(msg)
});
// 关于同行那一部分的 同行数量、激活总数、沉睡客户数量、app下载数量
this.socket.on('b2b_client_data', function (msg) {
console.log(msg)
});
// 今日/年度交易信息/优惠金额、返佣金额、大红包余额
this.socket.on('b2b_trade_data', function (msg) {
console.log(msg)
});
// 其他的 现暂时没得 预留的
this.socket.on('b2b_other_data', function (msg) {
console.log(msg)
});
}
}
}
</script>
src/components/viitto/viittoData2.vue 0 → 100644
View file @ 49f72465
<style>
.viittoData2 {
padding: 47px;
height: 100%;
width: 100%;
box-sizing: border-box;
background: rgba(29, 36, 61, 1);
}
.viittoData2 .tit {
color: #ccced3;
font-size: 22px;
margin-bottom: 30px;
}
.viittoData2 .yuefen-box {
width: 140px;
height: 34px;
background: rgba(12, 16, 31, 1);
opacity: 0.35;
border-radius: 17px;
display: flex;
align-items: center;
padding: 0 15px;
justify-content: space-between;
color: #ebeced !important;
float: left;
}
.viittoData2 .yuefen-box img {
height: 5px;
}
.ditu {
width: 130px;
height: 34px;
background: linear-gradient(
90deg,
rgba(126, 133, 238, 1),
rgba(63, 229, 237, 1)
);
border-radius: 17px;
color: white;
text-align: center;
line-height: 34px;
}
.name {
font-size: 40px;
font-weight: bold;
color: white;
text-align: right;
}
.map-box {
height: 560px;
}
.left-item {
width: 324px;
height: 241px;
margin-bottom: 25px;
background: url(../../assets/img/viitto/bg.png);
background-size: 100% 100%;
padding-top: 53px;
padding-left: 10px;
}
.left-item2 {
background: url(../../assets/img/viitto/bg1.png);
background-size: 100% 100%;
}
.left-item3 {
background: url(../../assets/img/viitto/bg2.png);
background-size: 100% 100%;
}
.left-item img {
width: 76px;
height: 114px;
}
.left-item .tit-name {
font-size: 22px;
font-family: PingFang-SC-Regular;
font-weight: 400;
color: rgba(73, 78, 99, 0);
background: linear-gradient(
58deg,
rgba(228, 156, 133, 1) 0%,
rgba(199, 57, 203, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.left-item .tit-money {
font-size: 38px;
font-family: Mada-Regular;
font-weight: 400;
color: rgba(255, 255, 255, 1);
margin-top: 35px;
}
.left-item2 .tit-name {
background: linear-gradient(
58deg,
rgba(126, 133, 238, 1) 0%,
rgba(63, 229, 237, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.left-item2 img {
width: 115px;
height: 103px;
margin-left: -20px;
}
.left-item3 .tit-name {
background: linear-gradient(
58deg,
rgba(167, 222, 138, 1) 0%,
rgba(68, 214, 172, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.left-item3 img {
width: 94px;
height: 66px;
margin-left: -20px;
}
.tonghangshu {
height: 240px;
background: linear-gradient(0deg, rgba(20, 25, 48, 1), rgba(28, 33, 58, 1));
border-radius: 6px;
padding: 43px;
}
.tj-tit {
font-size: 20px;
font-family: PingFang-SC-Light;
font-weight: 300;
color: rgba(197, 197, 197, 1);
margin-bottom: 30px;
}
.tj-number {
display: flex;
}
.tj-number > span {
display: inline-block;
width: 50%;
font-size: 42px;
font-family: Mada-Regular;
font-weight: 400;
color: rgba(255, 254, 254, 1);
text-shadow: 1px 2px 2px rgba(19, 23, 52, 1);
}
.tj-number .tit {
font-size: 20px;
margin-top: 5px;
margin-bottom: 15px;
}
.tj-number > div > div span {
display: inline-block;
margin-left: 10px;
color: white;
}
.app-xiazai-tit {
font-size: 22px;
font-family: PingFang-SC-Regular;
font-weight: 400;
color: rgba(204, 206, 211, 1);
margin-top: 40px;
}
.app-xiazai {
width: 284px;
height: 284px;
margin: 0 auto;
margin-top: 50px;
background: url(../../assets/img/viitto/raduis.png);
background-size: 100% 100%;
padding: 74px 34px;
box-sizing: border-box;
text-align: center;
}
.app-xiazai p:nth-child(1) {
font-size: 57px;
font-family: Mada-Regular;
font-weight: 400;
color: rgba(255, 255, 255, 1);
}
.app-xiazai p:nth-child(3) {
font-size: 18px;
background: linear-gradient(
58deg,
rgba(255, 108, 176, 1) 0%,
rgba(255, 147, 109, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.app-xiazai p:nth-child(2) {
width: 43px;
height: 3px;
background: rgba(80, 87, 114, 1);
opacity: 0.2;
margin: 15px auto;
}
.app-xiazai p:nth-child(3) span {
font-size: 24px;
}
</style>
<template>
<div class="viittoData2">
<el-row>
<el-col :span="5">
<div class="clearfix">
<p class="tit yuefen-box">
<span>8月</span>
<img src="../../assets/img/viitto/xiajiantou.png" alt />
</p>
</div>
<div class="left-item">
<el-row :gutter="30">
<el-col :span="6">
<img src="../../assets/img/viitto/icon.png" alt />
</el-col>
<el-col :span="18">
<p class="tit-name">累计优惠金额</p>
<p class="tit-money">¥ 589568.29</p>
</el-col>
</el-row>
</div>
<div class="left-item left-item2">
<el-row :gutter="30">
<el-col :span="6">
<img src="../../assets/img/viitto/icon1.png" alt />
</el-col>
<el-col :span="18">
<p class="tit-name">累计返佣金额</p>
<p class="tit-money">¥ 589568.29</p>
</el-col>
</el-row>
</div>
<div class="left-item left-item3">
<el-row :gutter="30">
<el-col :span="6">
<img src="../../assets/img/viitto/icon2.png" alt />
</el-col>
<el-col :span="18">
<p class="tit-name">幸福存折累计余额</p>
<p class="tit-money">¥ 589568.29</p>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="12">
<div class="right-top">
<div class="ditu">地图热点</div>
</div>
<div class="map-box">
<centerMp></centerMp>
</div>
<el-row class="tonghangshu">
<el-col :span="12">
<p class="tj-tit">同行总数</p>
<div class="tj-number">
<span>1892</span>
<div>
<p class="tit">昨日增加数</p>
<div>
<img src="../../assets/img/viitto/uer2.png" alt />
<span>4</span>
</div>
</div>
</div>
</el-col>
<el-col :span="12">
<p class="tj-tit">激活总数</p>
<div class="tj-number">
<span>1892</span>
<div>
<p class="tit">昨日增加数</p>
<div>
<img src="../../assets/img/viitto/uer1.png" alt />
<span>4</span>
</div>
</div>
</div>
</el-col>
</el-row>
</el-col>
<el-col :span="7">
<div>
<p class="name">印象之旅数据看板</p>
</div>
<p class="app-xiazai-tit">APP下载用户数量</p>
<div class="app-xiazai">
<p>45888</p>
<p></p>
<p>
用户占比
<span>98%</span>
</p>
</div>
<p class="app-xiazai-tit">APP下载用户数量</p>
<div ref="mychart" :style="{height:'330px',width:'500px'}"></div>
</el-col>
</el-row>
</div>
</template>
<script>
import centerMp from "../sellDashboard/map/viittoMap";
export default {
components: {
centerMp
},
data() {
return {
socket: null
};
},
mounted() {
// this.connec();
this.apiJavaPost(
"/api/user/get_b2b_data",
{},
res => {
if (res.data.resultCode == 1) {
console.log(res);
}
},
null
);
// setTimeout(() => {
// this.connec();
// }, 1000);
this.init();
},
methods: {
init() {
let myChart = this.$echarts.init(this.$refs.mychart);
let _this = this;
let option = {
color: ["#3398DB"],
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: [
{
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
axisTick: {
alignWithLabel: true
},
axisLine: {
lineStyle: {
type: 'dashed',
}
},
axisLabel: {
color: "#53586B"
},
}
],
yAxis: {
axisLabel: {
color: "#53586B"
},
axisLine: {
show: false
},
splitLine: {
lineStyle: {
type: 'dashed',
color: "#53586B"
}
}
},
series: [
{
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],
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#1D8DE2' // 0% 处的颜色
}, {
offset: 1, color: '#76FF9D' // 100% 处的颜色
}],
global: false // 缺省为 false
},
itemStyle: {
barBorderRadius: [5, 5, 0, 0]
},
}
]
};
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);
}
}
};
</script>script
\ No newline at end of file
src/router.js
View file @ 49f72465
...@@ -2,7 +2,8 @@ import Vue from 'vue' ...@@ -2,7 +2,8 @@ import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import login from './views/login' import login from './views/login'
import index from './views/index' import index from './views/index'
import viittoData from './components/viitto/viittoData'
import viittoData2 from './components/viitto/viittoData2'
Vue.use(Router) Vue.use(Router)
export default new Router({ export default new Router({
...@@ -23,118 +24,16 @@ export default new Router({ ...@@ -23,118 +24,16 @@ export default new Router({
'http-equiv':"X-UA-Compatible", 'http-equiv':"X-UA-Compatible",
'content':'IE=Edge,chrome=1' 'content':'IE=Edge,chrome=1'
} }
},
{
path: '/viittoData',
name: 'viittoData',
component: viittoData,
},
{
path: '/viittoData2',
name: 'viittoData2',
component: viittoData2,
} }
// {
// path: '/index',
// name: 'index',
// component: index,
// meta: {
// 'title':"印象之旅~感动与世界同步",
// 'http-equiv':"X-UA-Compatible",
// 'content':'IE=Edge,chrome=1'
// },
// children:[
// {
// path: '/detail/:id',
// name: 'detail',
// component: resolve => require(['@/components/mall/detail'], resolve),
// meta: {
// title: '团队详情-印象之旅~感动与世界同步'
// }
// },
// {
// path: '/detail/:id/:pre',
// name: 'detail',
// component: resolve => require(['@/components/mall/detail'], resolve),
// meta: {
// title: '团队详情-印象之旅~感动与世界同步'
// }
// },
// {
// path: '/detailTwo/:id/',
// name: 'detailTwo',
// component: resolve => require(['@/components/mall/detailTwo'], resolve),
// meta: {
// title: '团队详情-印象之旅~感动与世界同步'
// }
// },
// {
// path: '/detailTwo/:id/:pre',
// name: 'detailTwo',
// component: resolve => require(['@/components/mall/detailTwo'], resolve),
// meta: {
// title: '团队详情-印象之旅~感动与世界同步'
// }
// },
// {
// path: '/heel',
// name: 'heel',
// component: resolve => require(['@/components/mall/heeltour'], resolve),
// meta: {
// title: '跟团游-印象之旅~感动与世界同步'
// }
// },
// {
// path: '/coding',
// name: 'coding',
// component: resolve => require(['@/components/mall/coding'], resolve),
// meta: {
// title: '正在开发中-印象之旅~感动与世界同步'
// }
// },
// {
// path: '/search',
// name: 'search',
// component: resolve => require(['@/components/mall/search'], resolve),
// meta: {
// title: '搜索行程-印象之旅~感动与世界同步'
// }
// },
// {
// path: '/PersonalHome',
// name: 'PersonalHome',
// component: resolve => require(['@/components/PersonalCenter/PersonalHome'], resolve),
// meta: {
// },
// children:[{
// path: '/PsCenter',
// name: 'PsCenter',
// component: resolve => require(['@/components/PersonalCenter/PsCenter'], resolve),
// meta: {
// title: '个人中心'
// }
// },{
// path: '/PsOrder',
// name: 'PsOrder',
// component: resolve => require(['@/components/PersonalCenter/PsOrder'], resolve),
// meta: {
// title: '订单管理'
// }
// },{
// path: '/PsSystem',
// name: 'PsSystem',
// component: resolve => require(['@/components/PersonalCenter/PsSystem'], resolve),
// meta: {
// title: '系统管理'
// }
// },{
// path: '/PsAccBalance',
// name: 'PsAccBalance',
// component: resolve => require(['@/components/PersonalCenter/PsAccBalance'], resolve),
// meta: {
// title: '账户余额'
// }
// },{
// path: '/OrderInvoice',
// name: 'OrderInvoice',
// component: resolve => require(['@/components/PersonalCenter/OrderInvoice'], resolve),
// meta: {
// title: '发票信息'
// }
// }]
// }
// ]
// }
] ]
}) })
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