提交 35e79b8e 编写于 作者: guangjun.yang's avatar guangjun.yang

增加几个页面,并调整的所有跳转的逻辑

上级 14c0f1a9
<!-- 柱状图-竖向 -->
<template>
<div class="chart-column-vtc">
<div :id="id" :style="{width: chartWidth, height: chartHeight}"></div>
</div>
</template>
<script>
import { format } from "path";
let vm = null;
export default {
props: {
id: {
type: String,
default: "chartColumnTCId"
},
colors: {
type: Array,
default: () => [
"#FFB01B",
"#39AF9A",
"#5D7092",
"#FF9A4B",
"#abb7bb",
"#76d2d2"
]
},
paramData: {
type: Array,
default: () => [
"生活方\n式干预",
"生活方\n式",
"本科",
"大专",
"中专以下",
"大专",
"中专以下",
"中专以下"
]
}
},
data() {
return {
chartWidth: "300px",
chartHeight: "350px"
};
},
created() {
if (process.client) {
let clientWidth =
window.outerWidth ||
document.body.clientWidth ||
document.documentElement.clientWidth;
// this.chartWidth = (clientWidth * ).toFixed(0) + "px";
this.chartWidth = clientWidth + "px";
console.log(clientWidth);
this.chartHeight = 54 * this.paramData.length + "px";
}
},
mounted() {
vm = this;
this.drawColumn();
},
methods: {
// 画
drawColumn() {
// 基于准备好的dom,初始化echarts实例
let chartColumn = this.$echarts.init(document.getElementById(this.id));
// 绘制图表
let options = {
color: vm.colors,
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "shadow" // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
show: false,
top: 20,
data: ["培训前正确率", "培训后正确率"],
textStyle: {
fontSize: 12,
// fontWeight: "bolder",
color: "#676869"
}
},
grid: {
top: "2%",
left: "3%",
right: "6%",
bottom: "0%",
containLabel: true,
borderWidth: 0
},
lineStyle: {
color: "#fff"
},
xAxis: {
axisTick: false,
type: "value",
axisLabel: {
show: false,
formatter: "{value}",
textStyle: {
color: "#676869"
}
},
axisLine: {
lineStyle: {
color: "#676869",
width: 0
}
},
splitLine: {
show: false
}
},
yAxis: {
axisTick: false,
type: "category",
data: vm.paramData,
textStyle: {
fontSize: 12,
color: "#676869"
},
splitLine: {
show: false
},
axisLabel: {
formatter: "{value}",
textAlign: "left",
textStyle: {
textAlign: "left",
color: "#676869"
}
},
axisLine: {
lineStyle: {
color: "#676869",
width: 0
}
}
},
series: [
{
name: "培训前正确率",
data: [12, 200, 150, 80, 70, 110, 130, 130],
type: "bar",
barWidth: 15, //柱图宽度
label: {
normal: {
formatter: "{c}%",
show: true,
position: "inside"
}
}
},
{
name: "培训后正确率",
data: [120, 20, 160, 80, 70, 110, 130, 130],
type: "bar",
barWidth: 15, //柱图宽度
label: {
normal: {
formatter: "{c}%",
show: true,
position: "inside"
}
}
}
]
};
chartColumn.setOption(options);
}
}
};
</script>
<style lang="scss" scoped>
.chart-column-vtc {
// 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);
// border-radius: 6px;
// border: 1px solid rgba(231, 232, 233, 1);
}
</style>
...@@ -97,14 +97,16 @@ export default { ...@@ -97,14 +97,16 @@ export default {
yAxis: { yAxis: {
axisTick: false, axisTick: false,
type: "category", type: "category",
data: ["生活方式干预", "硕士", "本科", "大专", "中专以下"], data: ["生活方\n式干预", "生活方\n", "本科", "大专", "中专以下"],
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: "#676869" color: "#676869"
}, },
axisLabel: { axisLabel: {
formatter: "{value}", formatter: "{value}",
textAlign: 'left',
textStyle: { textStyle: {
textAlign: 'left',
color: "#676869" color: "#676869"
} }
}, },
......
<!-- 完成项目考试分数情况 -->
<template>
<div class="exam-times-wrapper">
<ul class="title">
<li>考试分数(分)</li>
<li>考试人数(个)</li>
</ul>
<ul class="list">
<li v-for="(item, index) in rankList" :key="index">
<span>{{index + 1}}</span>
<span>88</span>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
rankList: {
type: Array,
default: () => [
{
province: "福建省",
order: 1
},
{
province: "福建省",
order: 1
},
{
province: "福建省",
order: 1
},
{
province: "福建省",
order: 1
}
]
}
},
methods: {
getRankImgUrl(index) {
return require(`../../assets/images/rank-${index + 1}.png`);
}
}
};
</script>
<style scoped lang="scss">
.exam-times-wrapper {
font-size: 14px;
.title {
display: flex;
flex-direction: row;
margin: 0 15px;
justify-content: center;
height: 60px;
line-height: 60px;
border-bottom: 1px solid #f0f1f2;
// background: #e3efed;
// border-radius: 6px 6px 0px 0px;
li {
font-size: 14px;
font-weight: 400;
color: #449284;
}
li:nth-child(1) {
text-align: center;
flex: 1;
}
li:nth-child(2) {
flex: 1;
text-align: center;
}
}
.list {
font-size: 16px;
margin: 0 15px 20px;
li {
display: flex;
flex-direction: row;
height: 60px;
line-height: 60px;
// justify-content: space-between;
border-bottom: 1px solid #f0f1f2;
span {
font-weight: 400;
color: #373839;
}
span:nth-child(1) {
flex: 1;
text-align: center;
}
span:nth-child(2) {
flex: 1;
text-align: center;
}
}
}
}
</style>
\ No newline at end of file
<!-- 完成项目考试次数情况 -->
<template>
<div class="exam-times-wrapper">
<ul class="title">
<li>考试次数(次)</li>
<li>考试人数(个)</li>
</ul>
<ul class="list">
<li v-for="(item, index) in rankList" :key="index">
<span>{{index + 1}}</span>
<span>88</span>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
rankList: {
type: Array,
default: () => [
{
province: "福建省",
order: 1
},
{
province: "福建省",
order: 1
},
{
province: "福建省",
order: 1
},
{
province: "福建省",
order: 1
}
]
}
},
methods: {
getRankImgUrl(index) {
return require(`../../assets/images/rank-${index + 1}.png`);
}
}
};
</script>
<style scoped lang="scss">
.exam-times-wrapper {
font-size: 14px;
.title {
display: flex;
flex-direction: row;
margin: 0 15px;
justify-content: center;
height: 60px;
line-height: 60px;
border-bottom: 1px solid #f0f1f2;
// background: #e3efed;
// border-radius: 6px 6px 0px 0px;
li {
font-size: 14px;
font-weight: 400;
color: #449284;
}
li:nth-child(1) {
text-align: center;
flex: 1;
}
li:nth-child(2) {
flex: 1;
text-align: center;
}
}
.list {
font-size: 16px;
margin: 0 15px 20px;
li {
display: flex;
flex-direction: row;
height: 60px;
line-height: 60px;
// justify-content: space-between;
border-bottom: 1px solid #f0f1f2;
span {
font-weight: 400;
color: #373839;
}
span:nth-child(1) {
flex: 1;
text-align: center;
}
span:nth-child(2) {
flex: 1;
text-align: center;
}
}
}
}
</style>
\ No newline at end of file
<!-- 培训情况排名组件 --> <!-- 培训情况排名组件 -->
<template> <template>
<ul class="rank-item"> <div>
<li v-for="(item, index) in studyRank" :key="index"> <ul class="rank-item">
<div class="order"> <li v-for="(item, index) in studyRank" :key="index">
<img v-if="index === 0 || index === 1 || index === 2" :src="getRankImgUrl(index)" alt /> <div class="order">
<span v-else>{{index + 1}}</span> <img v-if="index === 0 || index === 1 || index === 2" :src="getRankImgUrl(index)" alt />
</div> <span v-else>{{index + 1}}</span>
<div class="content"> </div>
<p class="desc-1">{{item.subName}}</p> <div class="content">
<p class="desc-2">完成人数 {{item.certCount}} | 参与人数 {{item.certCount}}</p> <span class="desc-1">{{item.subName}}</span>
</div> <span class="desc-2">完成人数 {{item.certCount}} | 参与人数 {{item.certCount}}</span>
<div class="ratio"> </div>
<p class="desc-1">{{(item.certRate * 100).toFixed(0)}}%</p> <div class="ratio">
<p class="desc-2">完成比例</p> <span class="desc-1">{{(item.certRate * 100).toFixed(0)}}%</span>
</div> <span class="desc-2">完成比例</span>
</li> </div>
</ul> </li>
</ul>
</div>
</template> </template>
<script> <script>
export default { export default {
...@@ -117,6 +119,7 @@ export default { ...@@ -117,6 +119,7 @@ export default {
} }
} }
.desc-1 { .desc-1 {
display: block;
height: 16px; height: 16px;
line-height: 16px; line-height: 16px;
padding-bottom: 10px; padding-bottom: 10px;
...@@ -125,6 +128,7 @@ export default { ...@@ -125,6 +128,7 @@ export default {
color: #373839; color: #373839;
} }
.desc-2 { .desc-2 {
display: block;
height: 12px; height: 12px;
line-height: 12px; line-height: 12px;
// padding-bottom: 10px; // padding-bottom: 10px;
......
<!-- 标题组件 -->
<template>
<div class="common-title-wrapper">
<ul class="mini">
<li class="left">{{title}}</li>
<li class="right">
<span>培训前正确率</span>
<span>培训后正确率</span>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: "证书分布情况"
},
needRightBtn: {
type: Boolean,
default: false
}
},
data() {
return {
value1: 0,
value2: "a",
option1: [
{ text: "全部商品", value: 0 },
{ text: "新款商品", value: 1 },
{ text: "活动商品", value: 2 }
],
option2: [
{ text: "默认排序", value: "a" },
{ text: "好评排序", value: "b" },
{ text: "销量排序", value: "c" }
]
};
},
methods: {}
};
</script>
<style lang="scss">
.common-title-wrapper {
position: relative;
left: 0;
top: 0;
z-index: 1;
height: 44px;
line-height: 44px;
background: #f8f9fa;
font-size: 14px;
.mini {
padding: 0px 15px;
display: flex;
flex-direction: row;
justify-content: space-between;
height: 44px;
line-height: 44px;
background: #f8f9fa;
li {
display: inline-block;
&.left {
// width: 216px;
display: block;
height: 44px;
line-height: 44px;
font-size: 15px;
font-weight: 700;
color: #676869;
}
&.right {
span {
display: inline-block;
font-size: 12px;
font-weight: 400;
color: #676869;
margin-left: 10px;
&:nth-child(1)::before {
display: inline-block;
content: "";
width: 9px;
height: 9px;
margin-right: 3px;
border-radius: 5px;
background: #FFB01B;
}
&:nth-child(2)::before {
display: inline-block;
content: "";
width: 9px;
height: 9px;
margin-right: 3px;
border-radius: 5px;
background: #39AF9A;
}
}
}
}
}
}
</style>
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<template> <template>
<div class="common-header"> <div class="common-header">
<span class="left" @click="back"> <span class="left" @click="back">
<img style="widht:20px;height:20px;" src="../../assets/images/left-arrow-black.png" /> <img src="../../assets/images/left-arrow-black.png" />
</span> </span>
<span class="center">{{title}}</span> <span class="center">{{title}}</span>
<span v-show="needRightBtn" class="right" @click="back"> <span v-show="needRightBtn" class="right" @click="back">
...@@ -23,14 +23,20 @@ export default { ...@@ -23,14 +23,20 @@ export default {
} }
}, },
methods: { methods: {
back() {} back() {
if(this.$rocNative.isWeb) {
this.$router.back(-1);
} else {
this.$rocNative.goBack();
}
}
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.common-header { .common-header {
padding-top: 50px; padding-top: 45px;
display: flex; display: flex;
width: 100%; width: 100%;
height: 44px; height: 44px;
...@@ -40,7 +46,7 @@ export default { ...@@ -40,7 +46,7 @@ export default {
align-items: center; align-items: center;
text-align: center; text-align: center;
justify-content: center; /* 水平居中 */ justify-content: center; /* 水平居中 */
font-size: 30px; font-size: 26px;
span { span {
display: block; display: block;
} }
......
<!-- Tabs组件 --> <!-- Tabs组件 -->
<template> <template>
<div class="common-header"> <div class="common-header" @click.prevent="action">
<span> <span>
查看全部 查看全部
<img src="../../assets/images/right-arrow-grey.png" @click="back" /> <img src="../../assets/images/right-arrow-grey.png"/>
</span> </span>
</div> </div>
</template> </template>
...@@ -20,7 +20,9 @@ export default { ...@@ -20,7 +20,9 @@ export default {
} }
}, },
methods: { methods: {
back() {} action() {
this.$emit('action')
}
} }
}; };
</script> </script>
......
...@@ -17,25 +17,29 @@ ...@@ -17,25 +17,29 @@
export default { export default {
data() { data() {
return { return {
cIndex: 0 cIndex: 0,
}; tapList: [
},
props: {
tapList: {
type: Array,
default: () => [
"总体概况", "总体概况",
"人群分析", "人群分析",
"课程分析", "课程分析",
"考试分析",
"学习效果分析"
] ]
} };
},
mounted() {
this.handleTabs(true, true);
}, },
methods: { methods: {
clickTab(index) { clickTab(index) {
this.cIndex = index; this.cIndex = index;
this.$emit("tabClicked", index); this.$emit("tabClicked", index);
},
handleTabs(needOne, needTwo) {
if(needOne) {
this.tapList.push('考试分析');
}
if(needTwo) {
this.tapList.push('学习效果分析');
}
} }
} }
}; };
......
此差异已折叠。
<template>
<section>
<CommonHeader title="完成项目考试分数情况"></CommonHeader>
<CommonTitleMini :title="listTitle" :needRightBtn="needRightBtn"></CommonTitleMini>
<ExamScoreList></ExamScoreList>
<CommonNoMore class="mt-10"></CommonNoMore>
</section>
</template>
<script>
import { mapGetters } from "vuex";
import CommonHeader from "@/components/common/common-header";
import CommonTitleMini from "@/components/common/common-title-mini";
import CommonNoMore from "@/components/common/common-no-more";
import ExamScoreList from "@/components/bussiness/exam-score-list";
export default {
props: {
rankList: {
type: Array,
default: () => [
{
subId: 10000,
subName: '福建省',
certCount: 0,
joinCount: 0,
certRate: 0,
costTime: 2000
},
{
subId: 10000,
subName: '上海市',
certCount: 0,
joinCount: 0,
certRate: 0,
costTime: 2000
},
{
subId: 10000,
subName: '浙江省',
certCount: 0,
joinCount: 0,
certRate: 0,
costTime: 2000
},
{
subId: 10000,
subName: '江苏省',
certCount: 0,
joinCount: 0,
certRate: 0,
costTime: 2000
},
{
subId: 10000,
subName: '安徽省',
certCount: 0,
joinCount: 0,
certRate: 0,
costTime: 2000
}
]
}
},
data() {
return {
listTitle: '共120条数据',
needRightBtn: false,
// projectId: '',
// token: ''
};
},
components: {
CommonHeader,
CommonTitleMini,
CommonNoMore,
ExamScoreList
},
computed: {
...mapGetters({
userToken: 'userToken',
projectId: 'projectId'
}),
},
created() {
if(process.client) {
// let projectId = this.$route.query.projectId;
// this.projectId = (this.$route && this.$route.query && this.$route.query.projectId) || "";
// this.token = (this.$router && this.$route.query && this.$route.query.token) || "";
console.log('rank-edu', this.projectId, this.userToken)
}
},
};
</script>
<style lang="less" scoped>
.mt-10 {
margin-top: 10px !important;
}
</style>
\ No newline at end of file
<template>
<section>
<CommonHeader title="完成项目考试次数情况"></CommonHeader>
<CommonTitleMini :title="listTitle" :needRightBtn="needRightBtn"></CommonTitleMini>
<ExamTimesList></ExamTimesList>
<CommonNoMore class="mt-10"></CommonNoMore>
</section>
</template>
<script>
import { mapGetters } from "vuex";
import CommonHeader from "@/components/common/common-header";
import CommonTitleMini from "@/components/common/common-title-mini";
import CommonNoMore from "@/components/common/common-no-more";
import ExamTimesList from "@/components/bussiness/exam-times-list";
export default {
props: {
rankList: {
type: Array,
default: () => [
{
subId: 10000,
subName: '福建省',
certCount: 0,
joinCount: 0,
certRate: 0,
costTime: 2000
},
{
subId: 10000,
subName: '上海市',
certCount: 0,
joinCount: 0,
certRate: 0,
costTime: 2000
},
{
subId: 10000,
subName: '浙江省',
certCount: 0,
joinCount: 0,
certRate: 0,
costTime: 2000
},
{
subId: 10000,
subName: '江苏省',
certCount: 0,
joinCount: 0,
certRate: 0,
costTime: 2000
},
{
subId: 10000,
subName: '安徽省',
certCount: 0,
joinCount: 0,
certRate: 0,
costTime: 2000
}
]
}
},
data() {
return {
listTitle: '共120条数据',
needRightBtn: false,
// projectId: '',
// token: ''
};
},
components: {
CommonHeader,
CommonTitleMini,
CommonNoMore,
ExamTimesList
},
computed: {
...mapGetters({
userToken: 'userToken',
projectId: 'projectId'
}),
},
created() {
if(process.client) {
// let projectId = this.$route.query.projectId;
// this.projectId = (this.$route && this.$route.query && this.$route.query.projectId) || "";
// this.token = (this.$router && this.$route.query && this.$route.query.token) || "";
console.log('rank-edu', this.projectId, this.userToken)
}
},
};
</script>
<style lang="less" scoped>
.mt-10 {
margin-top: 10px !important;
}
</style>
\ No newline at end of file
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<section class="container"> <section class="container">
<CommonHeader></CommonHeader> <CommonHeader></CommonHeader>
<CommonAreaSelect @areaClick="areaTabClick" @orgClick="orgTabClick"></CommonAreaSelect> <CommonAreaSelect @areaClick="areaTabClick" @orgClick="orgTabClick"></CommonAreaSelect>
<CommonTaps @tabClicked="tabClicked"></CommonTaps> <CommonTaps @tabClicked="tabClicked"></CommonTaps>
<!-- 总体概况 --> <!-- 总体概况 -->
<article v-show="cIndex === 0"> <article v-show="cIndex === 0">
<CommonSwiperItem :percentData="allData.percentData"></CommonSwiperItem> <CommonSwiperItem :percentData="allData.percentData"></CommonSwiperItem>
...@@ -10,22 +10,20 @@ ...@@ -10,22 +10,20 @@
<ChartPie id="certPieId2" :pieData="allData.certData"></ChartPie> <ChartPie id="certPieId2" :pieData="allData.certData"></ChartPie>
<CommonTitle title="证书级别按学历分布情况"></CommonTitle> <CommonTitle title="证书级别按学历分布情况"></CommonTitle>
<ChartColumnStack></ChartColumnStack> <ChartColumnStack></ChartColumnStack>
<!-- <ChartColumn :columnData="eduColumnData"></ChartColumn> -->
<CommonSplitLine></CommonSplitLine> <CommonSplitLine></CommonSplitLine>
<CommonTitle title="培训情况排名"></CommonTitle> <CommonTitle title="项目情况排名"></CommonTitle>
<RankingList :studyRank="allData.studyRank"></RankingList> <RankingList :studyRank="allData.studyRank"></RankingList>
<ShowAll></ShowAll> <ShowAll @action="gotoPage('/rank-edu')"></ShowAll>
<CommonSplitLine></CommonSplitLine> <CommonSplitLine></CommonSplitLine>
<CommonTitle title="完成天数排名"></CommonTitle> <CommonTitle title="完成天数排名"></CommonTitle>
<RankingItemDays :rankList="allData.costRank"></RankingItemDays> <RankingItemDays :rankList="allData.costRank"></RankingItemDays>
<ShowAll></ShowAll> <ShowAll @action="gotoPage('/rank-days')"></ShowAll>
<CommonBottomInfo></CommonBottomInfo> <CommonBottomInfo></CommonBottomInfo>
</article> </article>
<!-- 人群分析 --> <!-- 人群分析 -->
<article v-show="cIndex === 1"> <article v-show="cIndex === 1">
<CommonTitle title="人员学历情况"></CommonTitle> <CommonTitle title="人员学历情况"></CommonTitle>
<!-- <ChartPie></ChartPie> -->
<ChartPieEdu :pieData="allData.certData"></ChartPieEdu> <ChartPieEdu :pieData="allData.certData"></ChartPieEdu>
<CommonSplitLine></CommonSplitLine> <CommonSplitLine></CommonSplitLine>
<CommonTitle title="人员职称情况"></CommonTitle> <CommonTitle title="人员职称情况"></CommonTitle>
...@@ -47,14 +45,13 @@ ...@@ -47,14 +45,13 @@
<CommonSplitLine></CommonSplitLine> <CommonSplitLine></CommonSplitLine>
<CommonTitle title="完成项目考试次数情况"></CommonTitle> <CommonTitle title="完成项目考试次数情况"></CommonTitle>
<ChartColumnVertical id="chartCourseTimesId" :colors="colors"></ChartColumnVertical> <ChartColumnVertical id="chartCourseTimesId" :colors="colors"></ChartColumnVertical>
<ShowAll class="mt-10"></ShowAll> <ShowAll @action="gotoPage('/exam-times')" class="mt-10"></ShowAll>
<CommonSplitLine></CommonSplitLine> <CommonSplitLine></CommonSplitLine>
<CommonTitle title="完成项目考试分数情况"></CommonTitle> <CommonTitle title="完成项目考试分数情况"></CommonTitle>
<ChartColumnVertical id="chartCourseScoreId"></ChartColumnVertical> <ChartColumnVertical id="chartCourseScoreId"></ChartColumnVertical>
<ShowAll class="mt-10"></ShowAll> <ShowAll @action="gotoPage('/exam-score')" class="mt-10"></ShowAll>
<CommonSplitLine></CommonSplitLine> <CommonSplitLine></CommonSplitLine>
<CommonTitle title="考试列表"></CommonTitle> <CommonTitle title="考试列表"></CommonTitle>
<!-- <RankingItemDays></RankingItemDays> -->
<ExamList></ExamList> <ExamList></ExamList>
<CommonBottomInfo></CommonBottomInfo> <CommonBottomInfo></CommonBottomInfo>
</article> </article>
...@@ -67,17 +64,27 @@ ...@@ -67,17 +64,27 @@
<ChartColumnVerticalTC id="chartColumnVerticalTC"></ChartColumnVerticalTC> <ChartColumnVerticalTC id="chartColumnVerticalTC"></ChartColumnVerticalTC>
<CommonTitle title="培训前后知识点掌握情况"></CommonTitle> <CommonTitle title="培训前后知识点掌握情况"></CommonTitle>
<ChartColumnHorizontalTC id="ChartColumnVerticalTC2"></ChartColumnHorizontalTC> <ChartColumnHorizontalTC id="ChartColumnVerticalTC2"></ChartColumnHorizontalTC>
<ShowAll class="mt-10"></ShowAll> <ShowAll @action="gotoPage('/klg-point')" class="mt-10"></ShowAll>
<CommonBottomInfo></CommonBottomInfo> <CommonBottomInfo></CommonBottomInfo>
</article> </article>
<PicaArea v-show="isShowArea" @confirm="areaConfirm" @cancel="areaCancel"></PicaArea> <PicaArea
v-show="isShowArea"
@confirm="areaConfirm"
@cancel="areaCancel"
:projectId="projectId"
:token="token"
></PicaArea>
<PicaOrg v-show="isShowOrg" @confirm="orgConfirm" @cancel="orgCancel"></PicaOrg> <PicaOrg v-show="isShowOrg" @confirm="orgConfirm" @cancel="orgCancel"></PicaOrg>
<CommonLoading v-show="false"></CommonLoading> <CommonLoading v-show="false"></CommonLoading>
</section> </section>
</template> </template>
<script> <script>
const cookies = require("cookie-universal")();
import { goPageByNative } from "@/utils";
import { mapGetters, mapActions } from "vuex";
import CommonHeader from "@/components/common/common-header"; import CommonHeader from "@/components/common/common-header";
import CommonTitle from "@/components/common/common-title"; import CommonTitle from "@/components/common/common-title";
import CommonLoading from "@/components/common/common-loading"; import CommonLoading from "@/components/common/common-loading";
...@@ -104,7 +111,7 @@ import CourseTimesList from "@/components/bussiness/course-times-list"; ...@@ -104,7 +111,7 @@ import CourseTimesList from "@/components/bussiness/course-times-list";
import ExamList from "@/components/bussiness/exam-list"; import ExamList from "@/components/bussiness/exam-list";
import CommonCard from "@/components/common/common-card"; import CommonCard from "@/components/common/common-card";
import { getGeneralData } from "@/service/index" import { getGeneralData } from "@/service/index";
export default { export default {
components: { components: {
...@@ -136,31 +143,6 @@ export default { ...@@ -136,31 +143,6 @@ export default {
}, },
data() { data() {
return { return {
chartData1: {
columns: ["date", "PV"],
rows: [
{ date: "01-01", PV: 1231 },
{ date: "01-02", PV: 1223 },
{ date: "01-03", PV: 2123 },
{ date: "01-04", PV: 4123 }
]
},
echartsSettings: {
height: "500px"
},
// 重置颜色,图标如果需要颜色,优先从用户提供的colors中依次提取,用户不提供,则根据默认的颜色进行选取
options: {
colors: [
"#6ab58f",
"#80c5d8",
"#c8abda",
"#dcdb5e",
"#e89b84",
"#abb7bb",
"#76d2d2"
]
},
isShowArea: false, isShowArea: false,
isShowOrg: false, isShowOrg: false,
cIndex: 0, cIndex: 0,
...@@ -178,31 +160,63 @@ export default { ...@@ -178,31 +160,63 @@ export default {
description: "培训后正确率" description: "培训后正确率"
} }
], ],
allData: {} allData: {},
// areaSelected: null,
areaSelected: {
cityId: "",
cityName: "",
countyId: "",
countyName: "",
patientAddress: "",
provinceId: "",
provinceName: "",
townId: "",
townName: ""
},
projectId: "666666",
token: "77777"
}; };
}, },
async asyncData() { async asyncData() {
return {}; return {};
}, },
created() { created() {
if (process.client) {
this.projectId =
(this.$router && this.$route.query && this.$route.query.projectId) ||
"666666";
this.setProjectId(this.projectId);
this.setUserToken(this.token);
this.getUserInfo();
}
// console.log(this.$route)
// console.log(this.$router)
// this.$store.dispatch('searchHospital', { name: '测试' }); // this.$store.dispatch('searchHospital', { name: '测试' });
}, },
mounted() { mounted() {
// window.addEventListener("resize", this.resizeTheChart); // window.addEventListener("resize", this.resizeTheChart);
let queryData = { let queryData = {
"cityId": 0, cityId: 0,
"countyId": 0, countyId: 0,
"hospitalIdList": [ hospitalIdList: [0],
0 originalFlag: 0,
], projectId: 11111,
"originalFlag": 0, provinceId: 0,
"projectId": 11111, townId: 0
"provinceId": 0, };
"townId": 0 this.getGeneralData(queryData);
}
this.getGeneralData(queryData)
}, },
methods: { methods: {
getUserInfo() {
this.$rocNative.getUserInfo &&
this.$rocNative.getUserInfo().then(params => {
this.token = params.userToken;
// this.userMobile = params.userMobile;
cookies.set("token", this.token);
this.setUserToken(this.token);
});
},
async getGeneralData(queryData) { async getGeneralData(queryData) {
await getGeneralData(queryData).then(res => { await getGeneralData(queryData).then(res => {
if (res.code === "000000") { if (res.code === "000000") {
...@@ -215,6 +229,9 @@ export default { ...@@ -215,6 +229,9 @@ export default {
}, },
areaConfirm(selData) { areaConfirm(selData) {
console.log(selData); console.log(selData);
this.areaSelected = selData;
this.patientSimpleAddress = "";
this.psAddress = "";
this.isShowArea = false; this.isShowArea = false;
}, },
areaCancel() { areaCancel() {
...@@ -236,7 +253,48 @@ export default { ...@@ -236,7 +253,48 @@ export default {
if (this.$refs.runTimes_creditChart) { if (this.$refs.runTimes_creditChart) {
this.$refs.runTimes_creditChart.resize(); this.$refs.runTimes_creditChart.resize();
} }
} },
// 通用跳转页面
gotoPage(subUrl) {
if (this.$rocNative.isWeb) {
this.$router.push(subUrl);
} else {
goPageByNative(`/lreport_ssr${subUrl}`);
}
},
// 跳转到项目情况排名
gotoProjectRank() {
// let pathUrl = `/lreport_ssr/rank-edu?projectId=${this.projectId}&token=${this.token}`
let pathUrl = `/rank-edu?projectId=${this.projectId}&token=${this.token}`;
if (this.$rocNative.isWeb) {
this.$router.push(pathUrl);
} else {
goPageByNative(`/lreport_ssr${pathUrl}`);
}
},
// 跳转到完成天数排名
gotoDaysRank() {
let pathUrl = `/rank-days?projectId=${this.projectId}&token=${this.token}`;
// let pathUrl = `/lreport_ssr/rank-edu?projectId=${this.projectId}&token=${this.token}`
if (this.$rocNative.isWeb) {
this.$router.push({
path: pathUrl
// query: {
// projectId: this.provinceId,
// token: this.token
// }
});
} else {
goPageByNative(pathUrl);
}
},
...mapActions({
setProjectId: 'setProjectId',
setRegionId: 'setRegionId',
setUserToken: 'setUserToken'
})
} }
}; };
</script> </script>
......
<template>
<section>
<CommonHeader title="培训前后知识点掌握情况"></CommonHeader>
<!-- <CommonTitleMini :title="listTitle" :needRightBtn="needRightBtn"></CommonTitleMini> -->
<TitleKLGPoint :title="listTitle"></TitleKLGPoint>
<ChartColumnHorizontalTCLong class="mt-10"></ChartColumnHorizontalTCLong>
<CommonNoMore></CommonNoMore>
</section>
</template>
<script>
import { mapGetters } from "vuex";
import CommonHeader from "@/components/common/common-header";
import CommonTitleMini from "@/components/common/common-title-mini";
import TitleKLGPoint from "@/components/bussiness/title-klg-point";
import CommonNoMore from "@/components/common/common-no-more";
import ChartColumnHorizontalTCLong from "@/components/bussiness/charts/chart-column-horizontal-tc-long";
export default {
data() {
return {
listTitle: '共10知识点',
needRightBtn: false,
// projectId: '',
// token: ''
};
},
components: {
CommonHeader,
CommonTitleMini,
TitleKLGPoint,
CommonNoMore,
ChartColumnHorizontalTCLong
},
computed: {
...mapGetters({
userToken: 'userToken',
projectId: 'projectId'
}),
},
created() {
if(process.client) {
// let projectId = this.$route.query.projectId;
// this.projectId = (this.$route && this.$route.query && this.$route.query.projectId) || "";
// this.token = (this.$router && this.$route.query && this.$route.query.token) || "";
console.log('rank-edu', this.projectId, this.userToken)
}
},
};
</script>
<style lang="less" scoped>
.mt-10 {
margin-top: 2px !important;
}
</style>
\ No newline at end of file
...@@ -2,11 +2,13 @@ ...@@ -2,11 +2,13 @@
<section> <section>
<CommonHeader title="完成天数排名"></CommonHeader> <CommonHeader title="完成天数排名"></CommonHeader>
<CommonTitleMini :title="listTitle"></CommonTitleMini> <CommonTitleMini :title="listTitle"></CommonTitleMini>
<RankingItemDays :rankList="rankList" class="mt-10"></RankingItemDays> <RankingItemDays :rankList="rankList"></RankingItemDays>
<CommonNoMore></CommonNoMore> <CommonNoMore class="mt-10"></CommonNoMore>
</section> </section>
</template> </template>
<script> <script>
import { mapGetters } from "vuex";
import CommonHeader from "@/components/common/common-header"; import CommonHeader from "@/components/common/common-header";
import CommonTitleMini from "@/components/common/common-title-mini"; import CommonTitleMini from "@/components/common/common-title-mini";
import RankingItemDays from "@/components/bussiness/ranking-item-days"; import RankingItemDays from "@/components/bussiness/ranking-item-days";
...@@ -61,7 +63,9 @@ export default { ...@@ -61,7 +63,9 @@ export default {
}, },
data() { data() {
return { return {
listTitle: '共34个省' listTitle: '共34个省',
// projectId: '',
// token: ''
}; };
}, },
components: { components: {
...@@ -70,10 +74,24 @@ export default { ...@@ -70,10 +74,24 @@ export default {
RankingItemDays, RankingItemDays,
CommonNoMore CommonNoMore
}, },
computed: {
...mapGetters({
userToken: 'userToken',
projectId: 'projectId'
}),
},
created() {
if(process.client) {
// let projectId = this.$route.query.projectId;
// this.projectId = (this.$route && this.$route.query && this.$route.query.projectId) || "";
// this.token = (this.$route && this.$route.query && this.$route.query.token) || "";
console.log('rank-days', this.projectId, this.userToken)
}
},
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.mt-10 { .mt-10 {
margin-top: 0px !important; margin-top: -10px !important;
} }
</style> </style>
\ No newline at end of file
<template> <template>
<section> <section>
<CommonHeader title="培训情况排名"></CommonHeader> <CommonHeader title="项目情况排名"></CommonHeader>
<CommonTitleMini :title="listTitle" :needRightBtn="needRightBtn"></CommonTitleMini> <CommonTitleMini :title="listTitle" :needRightBtn="needRightBtn"></CommonTitleMini>
<RankingList></RankingList> <RankingList></RankingList>
<CommonNoMore></CommonNoMore> <CommonNoMore class="mt-10"></CommonNoMore>
</section> </section>
</template> </template>
<script> <script>
import { mapGetters } from "vuex";
import CommonHeader from "@/components/common/common-header"; import CommonHeader from "@/components/common/common-header";
import CommonTitleMini from "@/components/common/common-title-mini"; import CommonTitleMini from "@/components/common/common-title-mini";
import CommonNoMore from "@/components/common/common-no-more"; import CommonNoMore from "@/components/common/common-no-more";
...@@ -63,7 +65,9 @@ export default { ...@@ -63,7 +65,9 @@ export default {
data() { data() {
return { return {
listTitle: '共34个省', listTitle: '共34个省',
needRightBtn: true needRightBtn: false,
// projectId: '',
// token: ''
}; };
}, },
components: { components: {
...@@ -72,10 +76,24 @@ export default { ...@@ -72,10 +76,24 @@ export default {
CommonNoMore, CommonNoMore,
RankingList RankingList
}, },
computed: {
...mapGetters({
userToken: 'userToken',
projectId: 'projectId'
}),
},
created() {
if(process.client) {
// let projectId = this.$route.query.projectId;
// this.projectId = (this.$route && this.$route.query && this.$route.query.projectId) || "";
// this.token = (this.$router && this.$route.query && this.$route.query.token) || "";
console.log('rank-edu', this.projectId, this.userToken)
}
},
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.mt-10 { .mt-10 {
margin-top: 0px !important; margin-top: 10px !important;
} }
</style> </style>
\ No newline at end of file
...@@ -19,9 +19,9 @@ Axios.interceptors.request.use( ...@@ -19,9 +19,9 @@ Axios.interceptors.request.use(
const method = config.method.toLocaleLowerCase(); const method = config.method.toLocaleLowerCase();
if (method === 'post' || method === 'put' || method === 'delete') {} if (method === 'post' || method === 'put' || method === 'delete') {}
if (config.withCredentials) { if (config.withCredentials) {
config.headers.token = 'C284B868425D494386EAEF6C9AE99937'; // config.headers.token = 'C284B868425D494386EAEF6C9AE99937';
// config.headers.token = '3BDACDC8B709441AA6EBCE634BD113E0'; // config.headers.token = '3BDACDC8B709441AA6EBCE634BD113E0';
// config.headers.token = cookies.get('token') || 'C284B868425D494386EAEF6C9AE99937'; config.headers.token = cookies.get('token') || 'C284B868425D494386EAEF6C9AE99937';
} }
return config; return config;
}, },
......
import { getHospital } from '@/service';
export const state = () => ({ export const state = () => ({
hospitals: [] projectId: '',
}); regionId: '',
userToken: '',
export const mutations = { userMobile: '',
add (state, { data }) { })
console.log('mutations add hospital: ', data); export const getters = {
projectId(state) {
state.hospitals = data; return state.projectId
},
regionId(state) {
return state.regionId
},
userToken(state) {
return state.userToken
},
userMobile(state) {
return state.userMobile
} }
}; }
export const mutations = {
SET_PROJECT_ID(state, projectId) {
state.projectId = projectId
},
SET_REGION_ID(state, regionId) {
state.regionId = regionId
},
SET_USER_TOKEN(state, userToken) {
state.userToken = userToken
},
SET_USER_MOBILE(state, userMobile) {
state.userMobile = userMobile
},
}
export const actions = { export const actions = {
async searchHospital({ commit }, { name }) { setProjectId({ commit }, projectId) {
getHospital({ name }).then(res => { commit('SET_PROJECT_ID', projectId);
commit('add', res); },
return res; setRegionId({ commit }, regionId) {
}); commit('SET_REGION_ID', regionId);
} },
}; setUserToken({ commit }, userToken) {
commit('SET_USER_TOKEN', userToken);
},
setUserMobile({ commit }, userMobile) {
commit('SET_USER_MOBILE', userMobile);
},
}
\ No newline at end of file
...@@ -3,9 +3,21 @@ const { NUXT_ENV_APP } = process.env; ...@@ -3,9 +3,21 @@ const { NUXT_ENV_APP } = process.env;
export const BASE_URL = { export const BASE_URL = {
dev: 'https://dev-sc.yunqueyi.com', dev: 'https://dev-sc.yunqueyi.com',
test: 'https://test1-sc.yunqueyi.com', test: 'https://test1-sc.yunqueyi.com',
uat: 'https://uat-sc.yunqueyi.com',
prod: 'https://sc.yunqueyi.com' prod: 'https://sc.yunqueyi.com'
}; };
export const SHARE_URL = {
dev: 'https://dev-phome.yunqueyi.com',
test: 'https://test1-phome.yunqueyi.com',
uat: 'https://uat-phome.yunqueyi.com',
prod: 'https://phome.yunqueyi.com',
}
export function getShareUrl() {
return SHARE_URL[NUXT_ENV_APP]
}
export const API_CONFIG = { export const API_CONFIG = {
baseURL: BASE_URL[NUXT_ENV_APP], baseURL: BASE_URL[NUXT_ENV_APP],
headers: { headers: {
......
import { getShareUrl } from './enumerate'
export const getSearchByName = name => { export const getSearchByName = name => {
const match = RegExp(`[?&]${name}=([^&]*)`).exec(window.location.href); const match = RegExp(`[?&]${name}=([^&]*)`).exec(window.location.href);
...@@ -38,4 +39,32 @@ export const echartColors = [ ...@@ -38,4 +39,32 @@ export const echartColors = [
"#6DC8EC", "#6DC8EC",
"#E8684A", "#E8684A",
"#FFB01B" "#FFB01B"
] ]
\ No newline at end of file
export function goPageByNative(vm, pageSubUrl){
let url = getShareUrl() + pageSubUrl;
console.log('##########', url)
let paramList = [
{
"key":"pageUrl",
"value": url,
"type":4,
"seqNo":1
},{
"key":"showTitle",
"value": false,
"type":1,
"seqNo":2
},{
"key":"title",
"value": '',
"type":1,
"seqNo":3
}
]
vm.$rocNative.dispatchEventByModuleCode && vm.$rocNative.dispatchEventByModuleCode({
modeCode: 'M300',
jsonString: paramList
})
}
\ No newline at end of file
/*
* @Author: souse
* @Date: 2019-08-12 18:08:07
* @Last Modified by: souse
* @Last Modified time: 2019-08-13 19:17:00
* @Descript 和app交互的接口调用 单例模式
*/
const ARRAY_CLASS = '[object Array]';
const _toString = Object.prototype.toString;
/**
* set default options
*/
export const JsBridgeOptions = {
GLOBAL_NAME: 'rocNative',
NATIVE_IOS_NAME: 'rociOS',
NATIVE_ANDROID_NAME: '__rocAndroid',
initMethodsWithCallBack: ['getToken', 'getUserInfo'], // value is string
initMethodsWithoutCallBack: ['getUserInfo','gotoLogin', 'appInit', 'goBack', 'shareWechat', 'showNativeToast', 'dispatchEventByModuleCode', 'appBuryingPointEntrust', 'webLoadSuccess'] // value is string
}
/**
* @description
* @author souse
* @date 2019-08-12
* @export
* @class PicaJsBridge
*/
export default class PicaJsBridge {
constructor(options = JsBridgeOptions) {
const initMethodsWithCallBack = options.initMethodsWithCallBack;
const initMethodsWithoutCallBack = options.initMethodsWithoutCallBack;
this._callbakFns = {};
this._callbackId = 0;
this._GLOBAL_NAME = options.GLOBAL_NAME;
this._NATIVE_IOS_NAME = options.NATIVE_IOS_NAME;
this._NATIVE_ANDROID_NAME = options.NATIVE_ANDROID_NAME;
this.isIOS = this._isIos();
this.isAndroid = this._isAndroid();
this.isWeb = this._isWeb();
if (_toString.call(initMethodsWithCallBack) === ARRAY_CLASS && initMethodsWithCallBack.length !== 0) {
this.registerMethods(initMethodsWithCallBack, true);
}
if (_toString.call(initMethodsWithoutCallBack) === ARRAY_CLASS && initMethodsWithoutCallBack.length !== 0) {
this.registerMethods(initMethodsWithoutCallBack, false);
}
this.mountToWindow();
}
// is ios flag
_isIos() {
return !!(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers[this._NATIVE_IOS_NAME]);
}
// is android flag
_isAndroid() {
return !!window[this._NATIVE_ANDROID_NAME];
}
// is web flag
_isWeb() {
return !this.isIOS && !this.isAndroid;
}
// register method width callback in window
_registerMethod(method) {
const _this = this;
_this[method] = (param) => {
return new Promise((response, reject) => {
_this._callNative(method, param, function(result) {
response(result);
}) ? void 0 : reject(`${method} not handled.`);
});
}
}
// register method widthout callback in window
_registerMethodWithoutMethod(method) {
const _this = this;
_this[method] = (param) => {
return new Promise((response, reject) => {
_this._callNative(method, param, null) ? response('success') : reject(`${method} not handled.`);
});
}
}
// window call app method
_callNative(name, param, callbackFn) {
debugger
let callbackId = 0, pm;
if (typeof callbackFn === 'function') {
this._callbackId++;
callbackId = this._callbackId;
this._callbakFns[callbackId] = callbackFn;
}
pm = JSON.stringify({
name,
callbackId: callbackId ? callbackId.toString() : '',
param: param || {}
});
if (this.isAndroid) {
window[this._NATIVE_ANDROID_NAME].postMessage(pm);
return true;
}
if (this.isIOS) {
window.webkit.messageHandlers[this._NATIVE_IOS_NAME].postMessage(pm);
return true;
}
return false;
}
// app call window method
__nativeCall(name, callbackId, result) {
const wFun = window[callbackId];
const fun = callbackId && this._callbakFns[callbackId];
//add by zhangping
if (wFun && typeof wFun === 'function') {
wFun(result);
return;
}
delete this._callbakFns[callbackId];
if (fun && typeof fun === 'function') fun(result);
}
// batch register methods
registerMethods(methods = [], widthCallback) {
if (undefined === widthCallback)
throw Error('widthCallback flag not defined, registerMethods should take second param value(true/false) for is not has callback.');
methods.forEach(m => {
widthCallback === true ? this._registerMethod(m) : this._registerMethodWithoutMethod(m)
});
}
// async call app method do not need register
asyncCallNative(method, param) {
const _this = this;
return new Promise(resolve => {
_this._callNative(method, param, function(result) {
resolve(result);
});
});
}
// call app method direct without register and callback
callNative(method, param) {
return this._callNative(method, param, null);
}
// register jsbridge to window
mountToWindow() {
window[this._GLOBAL_NAME] = this;
}
}
\ No newline at end of file
...@@ -93,6 +93,7 @@ export default class PicaJsBridge { ...@@ -93,6 +93,7 @@ export default class PicaJsBridge {
// window call app method // window call app method
_callNative(name, param, callbackFn) { _callNative(name, param, callbackFn) {
debugger
let callbackId = 0, pm; let callbackId = 0, pm;
if (typeof callbackFn === 'function') { if (typeof callbackFn === 'function') {
...@@ -142,6 +143,7 @@ export default class PicaJsBridge { ...@@ -142,6 +143,7 @@ export default class PicaJsBridge {
if (undefined === widthCallback) if (undefined === widthCallback)
throw Error('widthCallback flag not defined, registerMethods should take second param value(true/false) for is not has callback.'); throw Error('widthCallback flag not defined, registerMethods should take second param value(true/false) for is not has callback.');
if(this.isWeb) return; // Add By Anndy Yang
methods.forEach(m => { methods.forEach(m => {
widthCallback === true ? this._registerMethod(m) : this._registerMethodWithoutMethod(m) widthCallback === true ? this._registerMethod(m) : this._registerMethodWithoutMethod(m)
}); });
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册