Skip to content

P
pica-learning-report
提交 b454a672 编写于 作者: guangjun.yang's avatar guangjun.yang
浏览文件
操作

组件优化

上级 e0cb42ec
展开全部 隐藏空白字符变更
内嵌 并排
正在显示 包含 128 行增加 和 1058 行删除
components/bussiness/charts/chart-column-vertical.vue
浏览文件 @ b454a672
<!-- 饼图 -->
<!-- 柱状图-竖向 -->
<template>
<section class="chart-pie">
<div :id="id" :style="{width: '100%', height: '320px'}"></div>
......@@ -11,7 +11,7 @@ export default {
props: {
id: {
type: String,
default: "chartlineId"
default: "chartColumnId"
},
colors: {
type: Array,
......
components/bussiness/charts/chart-column.vue
浏览文件 @ b454a672
<!-- 饼图 -->
<!-- 柱状图-横向 -->
<template>
<section class="chart-pie">
<div :id="id" :style="{width: '100%', height: '320px'}"></div>
</section>
<div class="chart-pie">
<div :id="id" :style="{width: chartWidth, height: chartHeight}"></div>
</div>
</template>
<script>
import { format } from "path";
......@@ -11,8 +11,16 @@ export default {
props: {
id: {
type: String,
default: "chartlineId"
default: "chartColumnId"
},
chartWidth: {
type: String,
default: '100%'
},
chartHeight: {
type: String,
default: '320px'
}
},
data() {
return {};
......@@ -152,7 +160,6 @@ export default {
.chart-pie {
position: relative;
top: -6px;
// height: 280px;
margin: 15px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.04);
......
components/bussiness/charts/chart-pie copy.vue 已删除 100644 → 0
浏览文件 @ e0cb42ec
<!-- 饼图 -->
<template>
<section class="chart-pie">
<!-- <ve-pie
ref="runTimes_creditChart"
:data="readAbilityIntervalData.pieData"
:tooltip-visible="true"
:settings="readAbilityIntervalData.settings"
:colors="options.colors"
></ve-pie>-->
<div id="myChart" :style="{width: '100%', height: '300px'}"></div>
</section>
</template>
<script>
import VePie from "v-charts/lib/pie";
export default {
props: {
title: {
type: String,
default: "证书分布情况"
},
needRightBtn: {
type: Boolean,
default: false
}
},
data() {
return {
chartHeight: "1000px",
readAbilityIntervalData: {
pieData: {
columns: ["distributionName", "ratio"],
rows: [
// 数据
{
distributionName: "落后",
ratio: "17" // 8% X 只能传入number 8% 不识别
},
{
distributionName: "不足",
ratio: "13"
},
{
distributionName: "良好",
ratio: "30"
}
]
},
msg: "",
settings: {
// radius : [ '30%', '50%' ],//内外圆的大小
center: [0, 0], //距离左右，上下距离的百分比
// grid: {
// x: 25,
// y: 45,
// x2: 5,
// y2: 20,
// borderWidth: 1
// },
grid: {
left: "5%", // 与容器左侧的距离
right: "5%" // 与容器右侧的距离
//top: '5%', // 与容器顶部的距离
//bottom: '5%', // 与容器底部的距离
},
dataType: "percent",
label: {
show: true,
position: "inner",
formatter: "描述文字\r\n\r\n{c}%" // 展示如果需要％
}
}
},
// 重置颜色，图标如果需要颜色，优先从用户提供的colors中依次提取，用户不提供，则根据默认的颜色进行选取
options: {
colors: [
"#6ab58f",
"#80c5d8",
"#c8abda",
"#dcdb5e",
"#e89b84",
"#abb7bb",
"#76d2d2"
]
}
};
},
components: {
VePie
},
mounted() {
this.drawLine();
// window.addEventListener("resize", this.resizeTheChart);
},
methods: {
resizeTheChart() {
if (this.$refs.runTimes_creditChart) {
this.$refs.runTimes_creditChart.resize();
}
},
drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
title: { text: "在Vue中使用echarts" },
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20]
}
]
});
}
}
};
</script>
<style lang="scss" scoped>
.chart-pie {
position: relative;
top: -6px;
// height: 280px;
margin: 15px;
padding-top: 15px;
// height: 431px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.04);
border-radius: 6px;
border: 1px solid rgba(231, 232, 233, 1);
}
</style>
components/bussiness/charts/chart-pie.vue
浏览文件 @ b454a672
......@@ -83,11 +83,9 @@ export default {
position: "inner",
formatter: function(config) {
return `${config.percent}%`;
// console.log(config);
}
},
radius: "65%",
// radius: ["30%", "60%"], //内外圆的大小
center: ["30%", "50%"],
data: vm.pieData,
itemStyle: {
......
components/bussiness/course-times.vue
浏览文件 @ b454a672
......@@ -42,11 +42,12 @@ export default {
p {
height: 14px;
line-height: 14px;
margin: 12px 0;
margin: 6px 0;
font-size: 14px;
font-weight: 400;
color: #676869;
span {
font-size: 14px;
font-weight: 400;
color: #979899;
}
}
......
components/bussiness/ranking-item copy.vue 已删除 100644 → 0
浏览文件 @ e0cb42ec
<!-- 培训情况排名组件 -->
<template>
<ul class="rank-item">
<li v-for="(item, index) in rankList" :key="index">
<section class="order">
1
</section>
<section class="content">
<p class="desc-1">福建省</p>
<p class="desc-2">完成人数 8860 | 参与人数 101</p>
</section>
<section class="ratio">
<p class="desc-1">83%</p>
<p class="desc-2">完成比例</p>
</section>
</li>
</ul>
</template>
<script>
export default {
props: {
rankList: {
type: Array,
default: () => [{
province: '福建省',
order: 1,
},{
province: '福建省',
order: 1,
},{
province: '福建省',
order: 1,
},{
province: '福建省',
order: 1,
},]
}
}
}
</script>
<style scoped lang="scss">
.rank-item {
margin: 20px 15px;
li {
height: 58px;
display: flex;
flex-direction: row;
margin: 20px 0;
border-bottom: 1px solid #F0F1F2;
.order {
width: 25px;
height: 38px;
line-height: 38px;
margin-right: 15px;
text-align: center;
font-size: 20px;
}
.content {
flex: 1;
}
.ratio {
width: 60px;
justify-content: right;
text-align: right;
}
}
.desc-1 {
height: 16px;
line-height: 16px;
padding-bottom: 10px;
font-size: 16px;
font-weight: 700;
color: #373839;
}
.desc-2 {
height: 12px;
line-height: 12px;
// padding-bottom: 10px;
font-size: 12px;
font-weight: 400;
color: #979899;
} }
</style>
\ No newline at end of file
components/bussiness/ranking-item-days.vue
浏览文件 @ b454a672
......@@ -2,17 +2,17 @@
<template>
<ul class="rank-item">
<li v-for="(item, index) in rankList" :key="index">
<section class="order">
<div class="order">
1
</section>
<section class="content">
</div>
<div class="content">
<p class="desc-3">福建省</p>
<!-- <p class="desc-2">完成人数 8860 | 参与人数 101</p> -->
</section>
<section class="ratio">
</div>
<div class="ratio">
<p class="desc-1">6.8天</p>
<p class="desc-2">完成天数</p>
</section>
</div>
</li>
</ul>
</template>
......
components/common/common-area-select copy.vue 已删除 100644 → 0
浏览文件 @ e0cb42ec
<!-- Tabs组件 -->
<template>
<div class="common-as-wrapper">
<ul>
<li>
<span>全部区域</span>
<!-- <img src="../../assets/images/left-array-black.png" /> -->
</li>
<li>
<span>全部机构</span>
<!-- <img src="../../assets/images/left-array-black.png" /> -->
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
tapList: {
type: Array,
default: () => []
}
},
methods: {}
};
</script>
<style lang="scss" scoped>
.common-as-wrapper {
padding: 0 55px;
// height: 35px;
// line-height: 35px;
ul {
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
align-items: center;
li {
align-content: center;
align-items: center;
height: 35px;
line-height: 35px;
}
span {
display: inline-block;
height: 15px;
line-height: 15px;
font-size: 15px;
color: #676869;
}
img {
display: inline-block;
height: 15px;
line-height: 15px;
width: 12px;
height: 12px;
}
}
}
</style>
components/common/common-area-select.vue
浏览文件 @ b454a672
<!-- Tabs组件 -->
<!-- 区域与机构选择（表头）组件 -->
<template>
<ul class="common-header">
<ul class="common-area-select">
<li class="center" @click="areaClick">
{{areaName}}<img src="../../assets/images/left-array-black.png"/>
</li>
<li class="center" @click="orgClick">
{{orgName}}<img src="../../assets/images/left-array-black.png"/>
</li> <li class="center" @click="orgClick">
{{orgName}}<img src="../../assets/images/left-array-black.png"/>
</li>
</ul>
</template>
......@@ -33,12 +35,13 @@ export default {
</script>
<style lang="scss" scoped>
.common-header {
.common-area-select {
// padding-top: 50px;
display: flex;
width: 100%;
height: 35px;
line-height: 35px;
margin: 2px 0 10px;
flex-direction: row nowrap;
align-content: center;
align-items: center;
......
components/common/common-bottom-info.vue
浏览文件 @ b454a672
<!-- Tabs组件 -->
<!-- （最下面）更多信息组件 -->
<template>
<section class="common-bottom-info">
<span>{{infoMsg}}</span>
......
components/common/common-card.vue
浏览文件 @ b454a672
<!-- Tabs组件 -->
<!-- Card组件（支持两列、三列甚至四列） -->
<template>
<div class="common-card" :class="{'bg': needBG}">
<ul v-for="(item, index) in cardList" :key="index">
......
components/common/common-header copy.vue 已删除 100644 → 0
浏览文件 @ e0cb42ec
<!-- 头部组件 -->
<template>
<section class="common-header" :style="{'background-color': bgColor}">
<img src="" @click="back"/>
<span></span>
</section>
</template>
<script>
export default {
props: {
title: {
type: String,
default: '项目名称'
},
bgColor: {
type: String,
default: '#fff'
}
},
methods: {
back() {
if( true ) {
this.$router.history(-1);
} else {
this.$rocNative.back();
}
}
},
}
</script>
<style lang="scss" scoped>
@import '@/assets/style/mixin';
@import '@/assets/style/global';
.common-header {
margin-top: px2rem(60px);
}
</style>
components/common/common-header.vue
浏览文件 @ b454a672
<!-- Tabs组件 -->
<template>
<div class="common-header">
<span class="left">
<img src="../../assets/images/left-array-black.png" @click="back" />
<span class="left" @click="back">
<img style="widht:20px;height:20px;" src="../../assets/images/left-array-black.png" />
</span>
<span class="center">{{title}}</span>
<span v-show="needRightBtn" class="right">
&nbsp;
<!-- <img src="../../assets/images/left-array-black.png" @click="back" /> -->
<span v-show="needRightBtn" class="right" @click="back">
<!-- <img src="../../assets/images/left-array-black.png" /> -->
</span>
</div>
</template>
......@@ -41,6 +40,7 @@ export default {
align-items: center;
text-align: center;
justify-content: center; /* 水平居中 */
font-size: 30px;
span {
display: block;
}
......
components/common/common-show-all copy.vue 已删除 100644 → 0
浏览文件 @ e0cb42ec
<template>
<section class="common-show-all">
<!-- <div style="height: 50px;line-height:50px;text-align:center;position:relative;"> -->
<!-- <span>查看全部</span>
<img src="../../assets/images/left-array-black.png" />-->
<!-- </div> -->
</section>
</template>
<script>
export default {
data() {
return {};
},
props: {
needMarginTop: {
type: Boolean,
default: false
},
btnText: {
type: String,
default: "查看全部"
},
itemIndex: {
type: String,
default: "0"
}
},
methods: {
showAllItem() {
this.$emit("showAllItem");
}
}
};
</script>
<style lang="scss" scoped>
.hear {
background: url(../../assets/images/left-array-black.png) no-repeat center
center no-repeat;
background-size: 8px 14px;
margin-right: 20px;
}
.comment {
background: url(../../assets/images/left-array-black.png) left center
no-repeat;
background-size: 8px 14px;
}
.hear,
.comment {
height: 30px;
line-height: 30px;
padding-left: 20px;
}
// @import '@/assets/style/mixin';
// @import '@/assets/style/global';
.common-show-all {
// position: relative;
height: 50;
line-height: 50px;
text-align: center;
span {
display: inline-block;
height: 14px;
line-height: 14px;
font-size: 14px;
}
img {
display: inline-block;
width: 10px;
height: 14px;
vertical-align: middle;
// position: absolute;
}
}
</style>
components/common/common-swiper-item-mini.vue 已删除 100644 → 0
浏览文件 @ e0cb42ec
<!-- Swipter的子组件 -->
<template>
<section class="common-swiper-item">
</section>
</template>
<script>
export default {
props: {
itemData: {
type: Array,
default: () => []
}
},
methods: {
},
}
</script>
<style lang="scss" scoped>
.common-swiper-item {
margin-top: 0;
}
</style>
components/common/common-tabs-vant.vue 0 → 100644
浏览文件 @ b454a672
<!-- Tabs组件 -->
<template>
<!-- <van-tabs active="{{ active }}" bind:change="onChange"> -->
<van-tabs :change="onChange" class="lr-tabs">
<van-tab title="内容内容">内容内容</van-tab>
<van-tab title="内容内容">内容内容</van-tab>
<van-tab title="内容内容">内容内容</van-tab>
<van-tab title="内容内容">内内容容</van-tab>
<van-tab title="内容内容内容">内内容容</van-tab>
</van-tabs>
</template>
<script>
export default {
data() {
return {
cIndex: 4
};
},
props: {
tapList: {
type: Array,
default: () => [
"总体概况",
"人群分析",
"课程分析",
"考试分析",
"学习效果分析"
]
}
},
methods: {
onChange(detail) {
this.cIndex = index;
this.$emit("tabClicked", index);
}
}
};
</script>
<style lang="scss">
.lr-tabs {
.van-tabs__line {
display: none;
}
.van-tab {
margin: 6px 5px;
padding: 0 0px;
height: 30px;
line-height: 30px;
font-size: 13px;
background: #f0f1f2;
color: #979899;
border-radius: 15px;
}
.van-ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after {
border-width: 0 0;
}
}
</style>
components/common/common-tabs.vue
浏览文件 @ b454a672
......@@ -42,20 +42,19 @@ export default {
</script>
<style lang="scss" scoped>
// article {
// height: 36px;
// margin-bottom: -4px;
// }
.common-tabs-wrapper {
display: flex;
position: relative;
top: 0;
left: 0;
z-index: 1;
font-size: 13px;
.common-tabs {
white-space: nowrap;
overflow-x: auto;
// height: 30px;
padding-bottom: 6px;
font-size: 13px;
li {
display: inline-block;
height: 30px;
......
components/common/common-tips.vue
浏览文件 @ b454a672
<!-- Tabs组件 -->
<!-- Tips组件 -->
<template>
<div class="common-tips">
ewfwef
......
components/common/common-title.vue
浏览文件 @ b454a672
<!-- Tabs组件 -->
<!-- 标题组件 -->
<template>
<section class="common-title">
<span class="left">{{title}}</span>
<span v-if="needRightBtn"></span>
</section>
<ul class="common-title">
<li class="left">{{title}}</li>
<li v-if="needRightBtn"></li>
</ul>
</template>
<script>
export default {
......@@ -25,7 +25,7 @@ export default {
.common-title {
// margin: 15px;
margin: 30px 15px 20px;
span {
li {
display: inline-block;
&.left {
// width: 216px;
......
components/common/pica-area.vue
浏览文件 @ b454a672
<!-- 选择地区组件 -->
<template>
<div class="select-wrapper" >
<div class="mask" @click="cancelSelect" @touchmove.prevent>
......
components/common/pica-org copy.vue 已删除 100644 → 0
浏览文件 @ e0cb42ec
此差异已折叠。
components/common/pica-org.vue
浏览文件 @ b454a672
<!-- 选择地区组件 -->
<template>
<div class="select-wrapper" >
<div class="mask" @click="cancel" @touchmove.prevent>
......
components/common/pica-process copy.vue 已删除 100644 → 0
浏览文件 @ e0cb42ec
<!-- Tabs组件 -->
<template>
<!-- <div class="common-process" :style="{'justify-content': isMaxed ? 'space-between' : ''}"> -->
<div class="common-process">
<span class="bar" :style="{'width': width, 'background': barColor}"></span><span class="desc">{{value}}{{unitName}}</span>
</div>
</template>
<script>
export default {
props: {
maxValue: {
type: Number,
default: 100
},
value: {
type: Number,
default: 80
},
barColor: {
type: String,
default: '#39AF9A'
},
unitName: {
type: String,
default: '分钟'
}
},
data() {
return {
isMaxed: false
}
},
// computed: {
// width() {
// let ratio = this.value / this.maxValue
// if(ratio >= 9.98) {
// this.isMaxed = true
// } else {
// this.isMaxed = false
// }
// return Math.round(ratio * 300) + 'px'
// }
// },
mounted() {
// let maxWidth = window.clien
let maxWidth = 375;
let ratio = this.value / this.maxValue
Math.round(ratio * 300) + 'px'
},
methods: {}
};
</script>
<style lang="scss" scoped>
.common-process {
display: flex;
flex-direction: row;
height: 20px;
line-height: 20px;
margin: 12px 15px;
span {
height: 20px;
display: inline-block;
&.bar {
margin-right: 6px;
}
&.desc {
font-size: 18px;
font-weight: 700;
// height: 20px;
// line-height: 20px;
color: #373839;
}
}
}
</style>
components/common/pica-process.vue
浏览文件 @ b454a672
......@@ -39,7 +39,10 @@ export default {
// scrollWidth offsetWidth
let clientWidth = window.outerWidth || document.body.clientWidth || document.documentElement.clientWidth
let maxWidth = clientWidth - this.valueDescWidth
let ratio = this.value / this.maxValue
let ratio = 1
if(this.value && this.value < this.maxValue) {
ratio = this.value / this.maxValue
}
this.maxPocessWidth = Math.round(ratio * maxWidth) + 'px'
},
methods: {}
......@@ -52,7 +55,6 @@ export default {
flex-direction: row;
height: 20px;
line-height: 20px;
// margin: 12px 15px;
span {
height: 20px;
display: inline-block;
......
package.json
浏览文件 @ b454a672
......@@ -18,7 +18,7 @@
"koa": "^2.6.2",
"nuxt": "^2.0.0",
"v-charts": "^1.19.0",
"vant": "^2.0.9"
"vant": "^2.2.13"
},
"devDependencies": {
"@nuxtjs/axios": "^5.5.4",
......
pages/index.vue
浏览文件 @ b454a672
......@@ -2,8 +2,8 @@
<section class="container">
<CommonHeader></CommonHeader>
<CommonAreaSelect @areaClick="areaTabClick" @orgClick="orgTabClick"></CommonAreaSelect>
<CommonTaps @tabClicked="tabClicked"></CommonTaps>
<CommonTaps @tabClicked="tabClicked"></CommonTaps>
<!-- <CommonTapsVant @tabClicked="tabClicked"></CommonTapsVant> -->
<!-- 总体概况 -->
<article v-if="cIndex === 0">
<CommonSwiperItem></CommonSwiperItem>
......@@ -41,7 +41,7 @@
</article>
<!-- 考试分析 -->
<article v-if="cIndex === 3" style="padding-top: 4px;">
<article v-if="cIndex === 3">
<CommonCard></CommonCard>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="完成项目考试次数情况"></CommonTitle>
......@@ -54,7 +54,7 @@
</article>
<!-- 学习效果分析 -->
<article v-if="cIndex === 4" style="padding-top: 4px;">
<article v-if="cIndex === 4">
<CommonCard :needBG="needBG" :cardList="cardList"></CommonCard>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="不同学历完成项目前后正确率对比"></CommonTitle>
......@@ -90,6 +90,7 @@ import CommonAreaSelect from "@/components/common/common-area-select";
import ProcessBar from "@/components/common/pica-process";
import CourseTimes from "@/components/bussiness/course-times";
import CommonCard from "@/components/common/common-card";
import CommonTapsVant from "@/components/common/common-tabs-vant";
export default {
components: {
......@@ -111,7 +112,8 @@ export default {
ProcessBar,
CourseTimes,
CommonCard,
ChartColumnVertical
ChartColumnVertical,
CommonTapsVant
},
data() {
return {
......
plugins/vue-inject.js
浏览文件 @ b454a672
import Vue from 'vue'
import rocNative from '@/utils/jsbridge'
import echarts from 'echarts'
import Vant from 'vant'
// import 'vant/lib/vant-css/index.css'
Vue.use(Vant)
// import picaArea from 'pica-area'
// Vue.use(picaArea)
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或