Skip to content

C
center-chart-show-pc
提交 98bf7997 authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

修改样式

上级 51bb3bfd
隐藏空白字符变更
内嵌 并排
正在显示 包含 258 行增加 和 22 行删除
.config.dev.js
浏览文件 @ 98bf7997
module.exports = {
domain: 'dev.ezijing.com',
// url: 'http://data-view.ezijing.com',
// url: 'http://172.16.3.11:8011',
url: 'https://web-chart.ezijing.com/',
url: 'http://172.16.3.11:8011',
// url: 'https://web-chart.ezijing.com/',
isEnableToIphoneDebugger: false,
// apiBaseURL: '//demo-login.ezijing.com/',
webpack: {
......
src/api/chart210323.js
浏览文件 @ 98bf7997
......@@ -5,40 +5,40 @@ export default class Chart210323API extends BaseAPI {
* get传输方式
* @param {[string]} id resource_id
*/
getMonthProjectIncome = () => this.get('/api/chart/v1/big_screen_marketing/now_month_project_income', {})
getMonthProjectIncome = () => this.get('/v1/big_screen_marketing/now_month_project_income', {})
/**
* get传输方式
* @param {[string]} id resource_id
*/
getYearPlanCompletion = () => this.get('/api/chart/v1/big_screen_marketing/year_plan_completion', {})
getYearPlanCompletion = () => this.get('/v1/big_screen_marketing/year_plan_completion', {})
/**
* get传输方式
* @param {[string]} id resource_id
*/
getMonthRevenueTrend = () => this.get('/api/chart/v1/big_screen_marketing/every_month_project_income', {})
getMonthRevenueTrend = () => this.get('/v1/big_screen_marketing/every_month_project_income', {})
/**
* get传输方式
* @param {[string]} id resource_id
*/
getRealTimePay = () => this.get('/api/chart/v1/big_screen_marketing/real_time_pay', {})
getRealTimePay = () => this.get('/v1/big_screen_marketing/real_time_pay', {})
/**
* get传输方式
* @param {[string]} id resource_id
*/
getProjectAppCost = () => this.get('/api/chart/v1/big_screen_marketing/project_app_cost', {})
getProjectAppCost = () => this.get('/v1/big_screen_marketing/project_app_cost', {})
/**
* get传输方式
* @param {[string]} id resource_id
*/
getYearRankingApply = () => this.get('/api/chart/v1/big_screen_marketing/year_project_apply', {})
getYearRankingApply = () => this.get('/v1/big_screen_marketing/year_project_apply', {})
/**
* get传输方式
* @param {[string]} id resource_id
*/
getChannelPayMoney = () => this.get('/api/chart/v1/big_screen_marketing/channel_pay_money', {})
getChannelPayMoney = () => this.get('/v1/big_screen_marketing/channel_pay_money', {})
/**
* get传输方式
* @param {[string]} id resource_id
*/
getProjectPayWeek = () => this.get('/api/chart/v1/big_screen_marketing/project_pay_week ', {})
getProjectPayWeek = () => this.get('/v1/big_screen_marketing/project_pay_week ', {})
}
src/components/chart/chart210323/monthCompleteRate.vue
浏览文件 @ 98bf7997
......@@ -25,7 +25,7 @@ export default {
}
this.data.map(item => {
chartData.project.unshift(item.project_name)
chartData.payMoney.unshift(item.pay_money.toFixed(0))
chartData.payMoney.unshift(item.one_line_pay_money.toFixed(0))
chartData.cost.unshift(item.cost.toFixed(0))
})
this.initChart(chartData)
......
src/components/chart/chart210323/nowApply.vue
浏览文件 @ 98bf7997
......@@ -2,10 +2,10 @@
<div class="apply-inner">
<div class="nav-title-apply">
<div>项目</div>
<div>留资总数</div>
<div>单条留资成本</div>
<div>已缴报名费</div>
<div>报名后均转换率</div>
<div>留资总数<span>(本月)</span></div>
<div>单条留资成本<span>(本月)</span></div>
<div>已缴报名费<span>(本月)</span></div>
<div>报名后均转换率<span>(所有)</span></div>
</div>
<ul class="apply-content">
<template v-for="(item, index) in dataList">
......@@ -84,7 +84,13 @@ export default {
text-align: center;
width: 20%;
height: 39px;
font-size: 16px;
font-size: 14px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
span{
font-size: 12px;
}
}
border-bottom: 1px solid rgba(52, 166, 210, .4);
}
......
src/components/chart/chart210323/nowIncome.vue
浏览文件 @ 98bf7997
......@@ -59,8 +59,11 @@ export default {
animationType: 'linear',
autoplay: {
delay: 1,
stopOnLastSlide: false,
disableOnInteraction: true,
autoplayDisableOnInteraction: false
},
slidesPerView: 'auto',
direction: 'vertical'
},
dataList: []
......@@ -152,7 +155,8 @@ export default {
}
.list-content{
width: 100%;
height: 100px;
// height: 140px;
// max-height: 140px;
.slide{
// padding-top: 10px;
width: 100%;
......
src/components/chart/chart210323/nowIncome2.vue 0 → 100644
浏览文件 @ 98bf7997
<template>
<div class="inner">
<ul class="nav-title">
<li>时间</li>
<li>姓名</li>
<li>类型</li>
<li>项目</li>
<li>金额（元）</li>
</ul>
<div class="list-content" id="scroll-set-h">
<swiper ref="mySwiper" :options="swiperOption" v-if="isSwiperShow">
<template v-for="(item, index) in dataList">
<swiper-slide :key="index">
<ul class="slide">
<!-- <template v-for="(cItem, cIndex) in item"> -->
<li :class="item.pay_type == '报名费' && 'active'">
<div>{{ item.pay_time }}</div>
<div>{{ item.user_name }}</div>
<div>{{ item.pay_type }}</div>
<div>{{ item.project_name }}</div>
<div>{{ item.pay_money }}</div>
</li>
<!-- </template> -->
</ul>
</swiper-slide>
</template>
</swiper>
</div>
</div>
</template>
<script>
// import * as api from '@/api/index'
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
// import 'swiper/css/swiper.css'
import action from '@action'
export default {
components: {
Swiper,
SwiperSlide
},
directives: {
swiper: directive
},
name: 'MonthlyIncome',
data() {
return {
isSwiperShow: false,
swiperOption: {
slidesPerView: 'auto',
// spaceBetween: 79,
// notNextTick: true,
// freeMode: true,
// setWrapperSize: true,
speed: 2000,
// observer: true,
// observeParents: true,
loop: true,
// animationType: 'linear',
autoplay: {
delay: 1,
stopOnLastSlide: false,
disableOnInteraction: true,
autoplayDisableOnInteraction: false
},
autoHeight: true,
// slidesPerView: 'auto',
direction: 'vertical'
},
dataList: []
}
},
computed: {
swiper() {
return this.$refs.mySwiper.$swiper
}
},
mounted() {
const countH = $('.chart-l-b').outerHeight() - $('.chart-l-b .tit').outerHeight() - $('.chart-l-b .nav-title').outerHeight() - 20
$('#scroll-set-h').height(countH)
this.$nextTick(() => {
this.getData(Math.round(countH / 35))
setInterval(() => {
this.getData(Math.round(countH / 35))
}, 60 * 1000)
})
},
methods: {
getData(n) {
action.Chart210323.getRealTimePay().then(res => {
this.dataList = []
// 填充数据
// for (let i = 0; i < res.data.length / n; i++) {
// this.dataList.push([])
// }
// push到二维数组里
res.data.map((item, index) => {
this.dataList.push(item)
})
// 检查最后一个数组是不是少item
// const lengthNum = this.dataList[this.dataList.length - 1].length
// if (lengthNum !== n) {
// for (let i = 0; i < n - lengthNum; i++) {
// this.dataList[this.dataList.length - 1].push(res.data[i])
// }
// }
this.isSwiperShow = true
}).finally(res => {
// console.log('finally 可用。')
})
}
},
beforeMount() {
// this.getData()
}
}
</script>
<style scoped lang="scss">
#scroll-set-h{
overflow: hidden;
}
::v-deep{
.swiper-wrapper{
transition-timing-function: linear;
}
}
.inner{
padding: 0 4.1%;
box-sizing: border-box;
}
.nav-title{
display: flex;
font-size: 16px;
color: #34A6D2;
padding-top: 2%;
justify-content: space-between;
li{
text-align: center;
&:nth-child(1){
width: 40%;
}
&:nth-child(2){
width: 15%;
}
&:nth-child(3){
width: 15%;
}
&:nth-child(4){
width: 15%;
}
&:nth-child(5){
white-space:nowrap;
width: 15%;
}
}
}
.list-content{
width: 100%;
// height: 140px;
// max-height: 140px;
.slide{
// padding-top: 10px;
width: 100%;
li{
width: 100%;
padding-top: 15px;
display: flex;
justify-content: space-between;
&:nth-child(1){
// padding-top: 0;
}
&.active{
div{
color: #fff;
}
}
div{
color: #E59700;
text-align: center;
&:nth-child(1){
width: 40%;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
&:nth-child(2){
width: 15%;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
&:nth-child(3){
width: 15%;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
&:nth-child(4){
width: 15%;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
&:nth-child(5){
width: 15%;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
}
}
}
::v-deep .swiper-container{
height: 100%;
// margin: 0 auto;
.swiper-wrapper{
.swiper-slide{
// padding-bottom: 15px;
// width: auto !important;
// height: auto;
}
}
}
}
</style>
src/pages/chart/chart-210323.vue
浏览文件 @ 98bf7997
......@@ -15,7 +15,7 @@
</card>
</div>
<div class="chart-l-c">
<card title="项目投入产出比（本月）">
<card title="项目线上投入产出比（本月）">
<month-complete-rate v-if="domFlag" :data="monthCompleteRateData"></month-complete-rate>
</card>
</div>
......@@ -58,17 +58,17 @@
</card>
</div>
<div class="chart-r-c">
<card title="项目报名数据排名">
<card title="项目报名数据排名（本年度）">
<year-ranking-apply></year-ranking-apply>
</card>
</div>
<div class="chart-r-c2">
<card title="营收走势">
<card title="营收走势（本年度）">
<month-revenue-trend></month-revenue-trend>
</card>
</div>
<div class="chart-r-b">
<card title="缴费结构">
<card title="缴费结构（本年度）">
<year-apply></year-apply>
</card>
</div>
......@@ -80,7 +80,7 @@
import card from '../../components/chart/card'
import monthIncome from '../../components/chart/chart210323/monthIncome'
import monthCompleteRate from '../../components/chart/chart210323/monthCompleteRate'
import nowIncome from '../../components/chart/chart210323/nowIncome'
import nowIncome from '../../components/chart/chart210323/nowIncome2'
import nowApply from '../../components/chart/chart210323/nowApply'
import yearIncome from '../../components/chart/chart210323/yearIncome'
import monthRevenueTrend from '../../components/chart/chart210323/monthRevenueTrend'
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论