Skip to content

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

no message

parent 05906477
Show whitespace changes
Inline Side-by-side
Showing with 723 additions and 0 deletions
src/components/viitto/dataLook.vue 0 → 100644
View file @ c4478ff8
<style>
.dataLook{
height: 100%;
width: 100%;
background-color: #1D243D;
}
.dataLook .nav{
padding: 25px 45px;
background-color: #252D48;
}
.dataLook .nav .name {
font-size: 30px;
font-weight: 700;
color: #fff;
text-align: right;
font-family: 'pingfangR';
}
.type-box>div{
background:rgba(19,25,44,1);
box-shadow:0px 0px 5px 0px rgba(2,3,6, .55);
border-radius:6px 6px 6px 6px;
float: left;
}
.danris{
padding: 6px 25px;
font-size:20px;
font-family: 'pingfangR';
font-weight:bold;
color:rgba(254,254,255,1);
text-shadow:1px 2px 2px rgba(0,95,106,1);
width: 50%;
float: left;
cursor: pointer;
}
.danris.active{
background:linear-gradient(90deg,rgba(147,69,248,1),rgba(63,210,243,1));
box-shadow:1px 2px 4px 0px rgba(23,29,48,1);
border-radius:6px;
}
.xilie{
display: flex;
align-items: center;
}
.xilie>div:nth-child(1){
width: 30%;
background:rgba(106,116,146, .35);
border-radius:20px 0px 0px 20px;
padding: 10px 20px 9px;
box-sizing: border-box;
color:rgba(254,254,255,1);
text-align: center;
}
.xilie>div:nth-child(2){
width: 70%;
background:rgba(22,28,49,.55);
border-radius:0 20px 20px 0;
overflow: hidden;
}
.xilie>div:nth-child(2) .el-select,.xilie>div:nth-child(2) .el-date-editor.el-input {
width: 100%;
}
.xilie>div:nth-child(2) .el-input--suffix .el-input__inner{
border-radius: 0;
}
.xilie>div:nth-child(2) input{
background:rgba(22,28,49,.5);
border: none !important;
}
.content{
height: calc(100vh - 122px);
padding: 30px 40px;
box-sizing: border-box;
}
.content .el-row,.content .el-row .el-col{
height: 100%;
}
.right-data{
background:linear-gradient(0deg,rgba(29,34,63,0.3),rgba(46,56,85,0.3));
border-radius:20px;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}
.right-data::-webkit-scrollbar{
/*滚动条整体样式*/
width: 0;
/*高宽分别对应横竖滚动条的尺寸*/
height: 0;
}
.right-data::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 0;
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0);
background: #c9c9c9;
}
.right-data::-webkit-scrollbar-track {
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0);
border-radius: 0;
background: #EDEDED;
}
.tab span{
display: inline-block;
width:128px;
height:38px;
background:linear-gradient(135deg,rgba(90,96,124,1), rgba(46,52,81,1));
border-radius:0 19px 19px 0px;
text-align: center;
line-height: 38px;
color: #8089B4;
font-size: 20px;
}
.item-box{
display: flex;
justify-content: space-between;
padding: 20px;
}
.item-box .item>div:nth-child(1){
font-size:18px;
font-family:'pingfangR';
font-weight:400;
color:rgba(73,78,99,1);
}
.item-box .item>div:nth-child(2){
font-size: 36px;
font-family:'pingfangR';
font-weight:400;
color:rgba(255,255,255,1);
}
.item-box .item>div:nth-child(2) img{
position: relative;
top: -25px;
left: 0;
}
.red-color{
color:rgba(255,255,255,1);
background:linear-gradient(0deg,rgba(255,133,133,1) 0%, rgba(238,68,84,1) 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.gree-color{
color:rgba(255,255,255,1);
background:linear-gradient(0deg,rgba(167,222,138,1) 0%, rgba(68,214,172,1) 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.org-color{
color:rgba(255,255,255,1);
background:linear-gradient(180deg,rgba(244,121,22,1) 0%, rgba(245,175,25,1) 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.bl-color{
color:rgba(255,255,255,1);
background:linear-gradient(180deg,rgba(255,108,176,1) 0%, rgba(255,147,109,1) 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.pink-color{
color:rgba(255,255,255,1);
background:linear-gradient(180deg,rgba(147,69,248,1) 0%, rgba(63,210,243,1) 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.sub{
font-size: 20px;
}
</style>
<template>
<div class="dataLook">
<div class="nav">
<el-row :gutter="70">
<el-col :span="18">
<el-row :gutter="70">
<el-col :span="8" class="type-box">
<div>
<div class="danris " :class="{active: navActive == 0 ? 'active' : ''}" @click="setNavActive(0)">
单日数据展示图
</div>
<div class="danris" :class="{active: navActive == 1 ? 'active' : ''}" @click="setNavActive(1)">
单日数据展示图
</div>
</div>
</el-col>
<el-col :span="8">
<div class="xilie">
<div>系列</div>
<div>
<el-select v-model="value" filterable placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="xilie">
<div>年度</div>
<div>
<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
</div>
</el-col>
</el-row>
</el-col>
<el-col :span="6" class="name">
微途科技数据看板
</el-col>
</el-row>
</div>
<div class="content">
<el-row :gutter="40">
<el-col :span="16">
<lineChart />
</el-col>
<el-col :span="8">
<div class="right-data">
<!-- 报名人数 -->
<div>
<div class="tab"><span>报名人数</span></div>
</div>
<div class="item-box">
<div class="item">
<div>5日平均</div>
<div>
39 <img src="../../assets/img/viitto/lvsedian.png" alt="">
</div>
</div>
<div class="item">
<div>10日平均</div>
<div>
40 <img src="../../assets/img/viitto/hongsedian.png" alt="">
</div>
</div>
<div class="item">
<div>20日平均</div>
<div>
32 <img src="../../assets/img/viitto/hongsedian.png" alt="">
</div>
</div>
<div class="item">
<div>60日平均</div>
<div>
28 <img src="../../assets/img/viitto/hongsedian.png" alt="">
</div>
</div>
</div>
<!-- 历史卖价 -->
<div>
<div class="tab"><span>历史卖价</span></div>
</div>
<div class="item-box">
<div class="item">
<div>最高</div>
<div class="red-color">
12896.<span class="sub">00</span>
</div>
</div>
<div class="item">
<div>最低</div>
<div>
98688.<span class="sub">00</span>
</div>
</div>
<div class="item">
<div>平均</div>
<div class="gree-color">
10228.<span class="sub">00</span>
</div>
</div>
</div>
<!-- 线路占比 -->
<div>
<div class="tab"><span>线路占比</span></div>
</div>
<div class="item-box">
<div class="item">
<div>30日平均</div>
<div>
39<span class="sub">%</span><img src="../../assets/img/viitto/lvsedian.png" alt="">
</div>
</div>
<div class="item">
<div>60日平均</div>
<div>
40<span class="sub">%</span><img src="../../assets/img/viitto/hongsedian.png" alt="">
</div>
</div>
<div class="item">
<div>90日平均</div>
<div>
32<span class="sub">%</span><img src="../../assets/img/viitto/hongsedian.png" alt="">
</div>
</div>
<div class="item">
<div>180日平均</div>
<div>
28<span class="sub">%</span><img src="../../assets/img/viitto/hongsedian.png" alt="">
</div>
</div>
</div>
<!-- 成交量 -->
<div>
<div class="tab"><span>成交量</span></div>
</div>
<div class="item-box">
<div class="item">
<div>最高</div>
<div class="org-color">
12896.<span class="sub">00</span>
</div>
</div>
<div class="item">
<div>最低</div>
<div>
98688.<span class="sub">00</span>
</div>
</div>
<div class="item">
<div>平均</div>
<div>
10228.<span class="sub">00</span>
</div>
</div>
</div>
<!-- 报名单 -->
<div>
<div class="tab"><span>报名单</span></div>
</div>
<div class="item-box">
<div class="item">
<div>当日</div>
<div class="bl-color">
39
</div>
</div>
<div class="item">
<div>5日平均</div>
<div>
40
</div>
</div>
<div class="item">
<div>10日平均</div>
<div>
32
</div>
</div>
</div>
<!-- 产品点击 -->
<div>
<div class="tab"><span>产品点击</span></div>
</div>
<div class="item-box">
<div class="item">
<div>当日</div>
<div class="pink-color">
39
</div>
</div>
<div class="item">
<div>5日平均</div>
<div>
40
</div>
</div>
<div class="item">
<div>10日平均</div>
<div>
32
</div>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import lineChart from "./lineChart";
export default {
components: {
lineChart
},
data(){
return {
navActive: 0,
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: '',
value1: '',
}
},mounted() {
},methods:{
setNavActive: function(n){
this.navActive = n
}
}
}
</script>
\ No newline at end of file
src/components/viitto/lineChart.vue 0 → 100644
View file @ c4478ff8
<style>
.myecharts{
height: 100%;
}
</style>
<template>
<div class="myecharts" ref="myecharts">
</div>
</template>
<script>
let timeData = ['6/12 2:00', '6/12 3:00', '6/12 4:00', '6/12 5:00']
export default {
components: {
},
data(){
return {
}
},mounted() {
this.init()
},methods:{
init() {
let myChart = this.$echarts.init(this.$refs.myecharts);
var dataAxis = [];
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false
}
},
legend: {
data:['流量','降雨量'],
x: 'left'
},
axisPointer: {
link: {xAxisIndex: 'all'}
},
grid: [{
left: 50,
right: 50,
height: '20%'
}, {
left: 50,
right: 50,
top: '35%',
height: '20%'
}, {
left: 50,
right: 50,
top: '60%',
height: '20%'
}, {
left: 50,
right: 50,
top: '85%',
height: '20%'
}],
xAxis : [
{
type : 'category',
boundaryGap : false,
data: timeData,
"show": false,
},
{
gridIndex: 1,
type : 'category',
boundaryGap : false,
data: timeData,
position: 'bottom',
"show": false
},
{
gridIndex: 2,
type : 'category',
boundaryGap : false,
data: timeData,
position: 'bottom',
"show": false,
},
{
gridIndex: 3,
type : 'category',
boundaryGap : false,
data: timeData,
position: 'bottom'
}
],
yAxis : [
{
name : '人数',
type : 'value',
max : 60,
splitLine: {
lineStyle: {
color: '#30374E',
type: 'dashed'
}
},
},
{
gridIndex: 1,
name : '成交总量',
type : 'value',
inverse: false,
splitLine: {
lineStyle: {
color: '#30374E',
type: 'dashed'
}
},
},
{
gridIndex: 2,
name : '报名单数',
type : 'value',
inverse: false,
splitLine: {
lineStyle: {
color: '#30374E',
type: 'dashed'
}
},
},
{
gridIndex: 3,
name : '产品点击',
type : 'value',
inverse: false,
splitLine: {
lineStyle: {
color: '#30374E',
type: 'dashed'
}
},
}
],
series : [
{
name:'人数',
type:'line',
xAxisIndex: 0,
yAxisIndex: 0,
symbolSize: 8,
hoverAnimation: false,
smooth: true,
data:[4,15,20,29],
itemStyle: {
normal: {
lineStyle: {
color: "#12BBFF",
shadowBlur: 10,
shadowColor: "#0F56FF"
}
}
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(18,187,255,1)" },
{ offset: 1, color: "rgba(15,86,255,0)" }
])
}
},
},
{
name:'价格',
type:'line',
xAxisIndex: 0,
yAxisIndex: 0,
symbolSize: 8,
hoverAnimation: false,
smooth: true,
data:[5,15.02,4,45],
itemStyle: {
normal: {
lineStyle: {
color: "#A7DE8A",
shadowBlur: 10,
shadowColor: "#44D6AC"
}
}
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(167,222,138,1)" },
{ offset: 1, color: "rgba(167,222,138,0)" }
])
}
},
},
{
name:'成交总量',
type:'line',
xAxisIndex: 1,
yAxisIndex: 1,
symbolSize: 8,
hoverAnimation: false,
smooth: true,
data: [23,88,12,45],
itemStyle: {
normal: {
lineStyle: {
color: "#F5AF19",
shadowBlur: 10,
shadowColor: "#F5AF19"
}
}
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(245,175,25,1)" },
{ offset: 1, color: "rgba(245,175,25,0)" }
])
}
},
}
,
{
name:'报名单数',
type:'line',
xAxisIndex: 2,
yAxisIndex: 2,
symbolSize: 8,
hoverAnimation: false,
smooth: true,
data: [8,5,6,7],
itemStyle: {
normal: {
lineStyle: {
color: "#9345F8",
shadowBlur: 10,
shadowColor: "#3FD2F3"
}
}
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(147,69,248,1)" },
{ offset: 1, color: "rgba(147,69,248,0)" }
])
}
},
}
,
{
name:'产品点击',
type:'line',
xAxisIndex: 3,
yAxisIndex: 3,
symbolSize: 8,
hoverAnimation: false,
smooth: true,
data: [67,96,33,108],
itemStyle: {
normal: {
lineStyle: {
color: "#FFAA85",
shadowBlur: 10,
shadowColor: "#EE4454"
}
}
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(239,71,86,1)" },
{ offset: 1, color: "rgba(239,71,86,0)" }
])
}
},
}
]
}
myChart.setOption(option);
},
}
}
</script>
\ No newline at end of file
src/router.js
View file @ c4478ff8
......@@ -4,6 +4,7 @@ import login from './views/login'
import index from './views/index'
import viittoData from './components/viitto/viittoData'
import viittoData2 from './components/viitto/viittoData2'
import dataLook from './components/viitto/dataLook'
Vue.use(Router)
export default new Router({
......@@ -34,6 +35,11 @@ export default new Router({
path: '/viittoData2',
name: 'viittoData2',
component: viittoData2,
},
{
path: '/dataLook',
name: 'dataLook',
component: dataLook,
}
]
})
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