Skip to content

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

选择到机构的页面样式

上级 22004f93
隐藏空白字符变更
内嵌 并排
正在显示 包含 700 行增加 和 46 行删除
components/bussiness/org-doctor-list.vue 0 → 100644
浏览文件 @ 1aaf9201
<!-- 课程列表组件 -->
<template>
<div class="corse-times-list">
<ul class="title">
<li>已获证</li>
<li>未获证</li>
<li>未参与</li>
</ul>
<ul class="list">
<li v-for="(item, index) in rankList" :key="index">
<span>武强</span>
<span>内科</span>
<span>成绩 98分</span>
</li>
</ul>
</div>
</template>
<script>
// {
// "subId":10000,
// "subName":null,
// "certCount":0,
// "joinCount":0,
// "certRate":0,
// "costTime":2000
// }
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">
.corse-times-list {
font-size: 14px;
.title {
display: flex;
flex-direction: row;
padding: 0 15px;
justify-content: space-between;
height: 50px;
line-height: 50px;
background: #F8F9FA;
li {
text-align: center;
flex: 1;
font-size: 14px;
font-weight: 400;
color: #979899;
}
}
.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 {
// flex: 1;
text-align: center;
font-weight: 400;
color: #373839;
}
}
}
}
</style>
\ No newline at end of file
components/common/common-swiper-item copy.vue 0 → 100644
浏览文件 @ 1aaf9201
<!-- Swipter的子组件 -->
<template>
<section class="common-swiper-item">
<article class="middle">
<div class="title">
<span>获证率</span>
<span>
<img src="../../assets/images/tips-1.png" />
</span>
</div>
<div class="ratio">
<span>{{(percentData.certificateRate * 100).toFixed(0)}}%</span>
</div>
<div class="statics">
<span>已获证人数 {{percentData.finishCount}}</span>
<span>应参与人数 {{percentData.doctorCount}}</span>
</div>
</article>
<article class="mini">
<div class="item">
<div class="wrapper">
<span>
<div class="desc">人员参与率</div>
<div class="ratio">{{(percentData.doctorRate * 100).toFixed(0)}}%</div>
</span>
<img src="../../assets/images/tips-2.png" />
</div>
<span class="desc-num">已参与人数 {{percentData.joinCount}}</span>
<span class="desc-num">应参与人数 {{percentData.doctorCount}}</span>
</div>
<div class="item">
<div class="wrapper">
<span>
<div class="desc">机构参与率</div>
<div class="ratio">{{(percentData.hospitalRate * 100).toFixed(0)}}%</div>
</span>
<img src="../../assets/images/tips-3.png" />
</div>
<span class="desc-num">已参与机构数 {{percentData.hospitalJoinCount}}</span>
<span class="desc-num">应参与机构数 {{percentData.hospitalCount}}</span>
</div>
</article>
</section>
</template>
<script>
export default {
props: {
percentData: {
type: Object,
default: () => {
return {
doctorCount: 0,
joinCount: 0,
finishCount: 0,
hospitalCount: 0,
hospitalJoinCount: 0,
certificateRate: 0,
doctorRate: 0,
hospitalRate: 0
}
}
}
},
watch: {
percentData: {
handler(newValue, oldValue) {
return newValue
},
deep: true
}
},
methods: {}
};
</script>
<style lang="scss" scoped>
.common-swiper-item {
font-size: 20px;
margin-top: 20px;
display: block;
.middle {
display: block;
box-sizing: border-box;
// width: 100%;
height: 120px;
margin: 5px 15px;
// width: 345px;
height: 128px;
padding: 20px 15px;
// background: #b4d4ce;
background: linear-gradient(
180deg,
rgba(6, 190, 182, 1) 0%,
rgba(72, 177, 191, 1) 100%
);
box-shadow: 0px 5px 10px 0px rgba(68, 146, 132, 0.1);
border-radius: 6px;
border: 1px solid rgba(180, 212, 206, 1);
.ratio {
height: 24px;
line-height: 24px;
width: 100px;
margin: 10px 0 24px;
// height: 80px;
span {
display: inline-block;
height: 24px;
line-height: 24px;
color: #fff;
font-size: 24px;
}
}
.title,
.statics {
display: flex;
justify-content: space-between;
height: 14px;
line-height: 14px;
span {
color: #fff;
font-size: 14px;
}
img {
width: 30px;
height: 30px;
}
}
}
.mini {
display: flex;
justify-content: space-between;
margin: 9px 15px;
.item {
display: inline-block;
width: 135px;
height: 95px;
padding: 15px;
background: #000;
border-radius: 6px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.04);
border: 1px solid rgba(231, 232, 233, 1);
.wrapper {
display: flex;
justify-content: space-between;
margin-bottom: 18px;
.desc {
height: 12px;
line-height: 12px;
font-size: 12px;
font-weight: 700;
color: #676869;
}
.ratio {
height: 21px;
line-height: 21px;
font-size: 21px;
font-weight: 700;
color: #449284;
padding-top: 10px;
}
img {
width: 30px;
height: 30px;
}
}
.desc-num {
display: block;
height: 12px;
line-height: 12px;
font-size: 12px;
margin-top: 8px;
color: #979899;
}
}
}
}
</style>
components/common/common-swiper-item.vue
浏览文件 @ 1aaf9201
...@@ -16,6 +16,21 @@ ...@@ -16,6 +16,21 @@
<span>应参与人数 {{percentData.doctorCount}}</span> <span>应参与人数 {{percentData.doctorCount}}</span>
</div> </div>
</article> </article>
<article class="middle-org">
<div class="title">
<span>人员参与率</span>
<span>
<img src="../../assets/images/tips-2.png" />
</span>
</div>
<div class="ratio">
<span>{{(percentData.certificateRate * 100).toFixed(0)}}%</span>
</div>
<div class="statics">
<span class="grey">已参与人数 {{percentData.finishCount}}</span>
<span class="grey">应参与人数 {{percentData.doctorCount}}</span>
</div>
</article>
<article class="mini"> <article class="mini">
<div class="item"> <div class="item">
<div class="wrapper"> <div class="wrapper">
...@@ -57,14 +72,14 @@ export default { ...@@ -57,14 +72,14 @@ export default {
certificateRate: 0, certificateRate: 0,
doctorRate: 0, doctorRate: 0,
hospitalRate: 0 hospitalRate: 0
} };
} }
} }
}, },
watch: { watch: {
percentData: { percentData: {
handler(newValue, oldValue) { handler(newValue, oldValue) {
return newValue return newValue;
}, },
deep: true deep: true
} }
...@@ -126,6 +141,53 @@ export default { ...@@ -126,6 +141,53 @@ export default {
} }
} }
} }
.middle-org {
display: block;
box-sizing: border-box;
// width: 100%;
height: 120px;
margin: 5px 15px;
// width: 345px;
height: 98px;
margin-top: 10px;
padding: 15px;
box-shadow:0px 5px 15px 0px rgba(0,0,0,0.04);
border-radius: 6px;
border: 1px solid rgba(231,232,233,1);
.ratio {
height: 21px;
line-height: 21px;
width: 100px;
margin: 7px 0 15px;
// height: 80px;
span {
display: inline-block;
height: 21px;
line-height: 21px;
color: #449284;
font-size: 21px;
}
}
.title,
.statics {
display: flex;
justify-content: space-between;
height: 12px;
line-height: 12px;
span {
color: #676869;
font-size: 12px;
font-weight: 400;
&.grey {
color: #979899;
}
}
img {
width: 30px;
height: 30px;
}
}
}
.mini { .mini {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
......
components/common/pica-area.vue
浏览文件 @ 1aaf9201
...@@ -101,7 +101,7 @@ ...@@ -101,7 +101,7 @@
</div> </div>
</template> </template>
<script> <script>
import { mapGetters } from "vuex"; import { mapGetters, mapActions } from "vuex";
import { import {
getProvinceList, getProvinceList,
getCityList, getCityList,
...@@ -183,10 +183,13 @@ export default { ...@@ -183,10 +183,13 @@ export default {
}, },
methods: { methods: {
...mapActions({
setOrgList: 'setOrgList'
}),
async getHospitalsByRegionId(params) { async getHospitalsByRegionId(params) {
await getHospitalsByRegionId(params).then(res => { await getHospitalsByRegionId(params).then(res => {
if (res.code === "000000") { if (res.code === "000000") {
this.setOrgList(res.data.list)
console.log('@@@@@@@@@@@@@', res); console.log('@@@@@@@@@@@@@', res);
} }
}); });
......
components/common/pica-org copy.vue 0 → 100644
浏览文件 @ 1aaf9201
<!-- 选择地区组件 -->
<template>
<div class="select-wrapper" >
<div class="mask" @click="cancel" @touchmove.prevent>
<div class="address-wrap" @click.stop>
<div class="tip-header">
<span class="cancel-btn" @click="cancel">取消</span>
<h3>选择机构</h3>
<span class="submit-btn" @click="confirm">确定</span>
<!-- <button :disabled="isDisabled" class="submit-btn" @click="confirm">确定</button> -->
</div>
<div class="address-select">
<ul class="show-address-header">
<!-- <li :class="{ active: isShowProvince }" class="item" @click="tabAddressClick(1)"> -->
<li :class="{ active: isShowProvince }" class="item">
{{
value.provinceName
? value.provinceName
: '请选择'
}}
</li>
</ul>
<div class="address-content" @touchmove.stop>
<ul v-show="isShowProvince" id="province">
<li
v-for="(provinceItem, index) in areaList.provinceList"
:key="index"
:class="{ active: provinceItem.selected }"
@click="orgSelect(provinceItem, index)"
>
<span>{{ provinceItem.provinceName }}</span>
<span v-show="provinceItem.selected">
<img src="../../assets/images/sort-select-icon.png" />
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {
getProvinceList
} from "../../service";
export default {
name: "PicaOrg",
data() {
return {
areaList: {
provinceList: [],
},
value: {
provinceId: "",
provinceName: "",
},
isDisabled: true,
isShowProvince: true,
};
},
props: {
baseUrl: {
type: String,
default: ""
},
rank: {
type: Number | String,
default: 4
}
},
created() {
// localStorage.setItem('baseUrl',this.baseUrl);
this.getProvinceData();
},
methods: {
async getProvinceData() {
await getProvinceList().then(res => {
if (res.code === "000000") {
this.areaList.provinceList = res.data.provinceList;
this.areaList.provinceList.map(a => {
if (a.provinceId == this.value.provinceId) {
a.selected = true;
}
});
}
});
},
orgSelect(item, idx) {
this.value.provinceId = item.provinceId;
this.value.provinceName = item.provinceName;
this.areaList.provinceList.map(a => (a.selected = false));
this.areaList.provinceList[idx].selected = true;
},
confirm() {
this.$emit("confirm", this.value);
},
cancel() {
this.$emit("cancel", false);
}
}
};
</script>
<style lang="less" scoped>
.select-wrapper {
font-family: PingFangSC-Regular;
.mask {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(55, 56, 57, 0.6);
}
.address-wrap {
position: absolute;
width: 100%;
height: 293px;
background-color: #ffffff;
box-sizing: border-box;
bottom: 0;
left: 0;
right: 0;
.tip-header {
position: relative;
height: 58px;
line-height: 58px;
width: 100%;
font-size: 17px;
display: flex;
justify-content: space-between;
padding: 0 15px;
box-sizing: border-box;
.cancel-btn {
color: #999;
}
h3 {
font-size: 18px;
color: #373839;
font-weight: 400;
}
.submit-btn {
font-size: 17px;
outline: none;
border: 1px solid transparent;
background-color: transparent;
color: #449284 !important;
&:disabled {
color: #c7c8c9;
}
}
}
.address-select {
width: 100%;
height: auto;
/*height: 196px;*/
box-sizing: border-box;
.show-address-header {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
position: relative;
padding-bottom: 4px;
&:after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
border-bottom: 1px solid #f0f1f2;
color: #f0f1f2;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.item {
display: inline-block;
font-size: 15px;
line-height: 35px;
height: 35px;
padding: 0 15px;
box-sizing: border-box;
max-width: 25%;
text-align: left;
color: #676869;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
&:last-of-type {
padding-right: 15px;
}
&.active {
color: #373839;
font-family: PingFangSC-Medium;
/*font-weight:500;*/
}
&.active:after {
content: " ";
position: absolute;
left: 50%;
bottom: 0;
right: 0;
width: 10px;
height: 3px;
/*border-radius: 2px;*/
border-radius: 30%;
text-align: center;
background-color: #449284;
transform: translateX(-50%);
}
}
}
.address-content {
position: relative;
width: 100%;
height: 100%;
/*height: 196px;*/
overflow: hidden;
box-sizing: border-box;
ul {
width: 100%;
height: 196px;
overflow-y: auto;
box-sizing: border-box;
padding: 10px 13px;
-webkit-overflow-scrolling: touch;
position: static;
-webkit-transform: translateZ(0px);
li {
height: 35px;
line-height: 35px;
font-size: 15px;
width: 100%;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #676869;
cursor: pointer;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: space-between;
-webkit-justify-content: space-between;
&.active {
color: #449284;
}
img {
width: 10px;
height: 10px;
}
}
}
}
}
}
}
</style>
\ No newline at end of file
components/common/pica-org.vue
浏览文件 @ 1aaf9201
<!-- 选择地区组件 --> <!-- 选择地区组件 -->
<template> <template>
<div class="select-wrapper" > <div class="select-wrapper">
<div class="mask" @click="cancel" @touchmove.prevent> <div class="mask" @click="cancel" @touchmove.prevent>
<div class="address-wrap" @click.stop> <div class="address-wrap" @click.stop>
<div class="tip-header"> <div class="tip-header">
...@@ -23,13 +23,13 @@ ...@@ -23,13 +23,13 @@
<div class="address-content" @touchmove.stop> <div class="address-content" @touchmove.stop>
<ul v-show="isShowProvince" id="province"> <ul v-show="isShowProvince" id="province">
<li <li
v-for="(provinceItem, index) in areaList.provinceList" v-for="(orgItem, index) in areaList.provinceList"
:key="index" :key="index"
:class="{ active: provinceItem.selected }" :class="{ active: orgItem.selected }"
@click="orgSelect(provinceItem, index)" @click="orgSelect(orgItem, index)"
> >
<span>{{ provinceItem.provinceName }}</span> <span>{{ orgItem.hospitalName }}</span>
<span v-show="provinceItem.selected"> <span v-show="orgItem.selected">
<img src="../../assets/images/sort-select-icon.png" /> <img src="../../assets/images/sort-select-icon.png" />
</span> </span>
</li> </li>
...@@ -41,23 +41,22 @@ ...@@ -41,23 +41,22 @@
</div> </div>
</template> </template>
<script> <script>
import { import { mapGetters } from "vuex";
getProvinceList import { getProvinceList } from "../../service";
} from "../../service";
export default { export default {
name: "PicaOrg", name: "PicaOrg",
data() { data() {
return { return {
areaList: { areaList: {
provinceList: [], provinceList: []
}, },
value: { value: {
provinceId: "", provinceId: "",
provinceName: "", provinceName: ""
}, },
isDisabled: true, isDisabled: true,
isShowProvince: true, isShowProvince: true
}; };
}, },
props: { props: {
...@@ -70,29 +69,53 @@ export default { ...@@ -70,29 +69,53 @@ export default {
default: 4 default: 4
} }
}, },
computed: {
...mapGetters({
orgList: "orgList"
})
},
watch: {
orgList: {
handler(newList) {
console.log('$$$$$$$$$4', newList)
this.areaList.provinceList = newList;
this.areaList.provinceList.map(a => {
a.selected = false;
// if (a.provinceId == this.value.provinceId) {
// a.selected = true;
// }
});
},
deep: true
}
},
created() { created() {
// localStorage.setItem('baseUrl',this.baseUrl); // localStorage.setItem('baseUrl',this.baseUrl);
this.getProvinceData(); // this.getProvinceData();
}, },
methods: { methods: {
async getProvinceData() { // async getProvinceData() {
await getProvinceList().then(res => { // await getProvinceList().then(res => {
if (res.code === "000000") { // if (res.code === "000000") {
this.areaList.provinceList = res.data.provinceList; // this.areaList.provinceList = res.data.provinceList;
this.areaList.provinceList.map(a => { // this.areaList.provinceList.map(a => {
if (a.provinceId == this.value.provinceId) { // if (a.provinceId == this.value.provinceId) {
a.selected = true; // a.selected = true;
} // }
}); // });
} // }
}); // });
}, // },
orgSelect(item, idx) { orgSelect(item, idx) {
this.value.provinceId = item.provinceId; // debugger
this.value.provinceName = item.provinceName; this.value.provinceId = item.hospitalId;
this.areaList.provinceList.map(a => (a.selected = false)); // this.value.provinceName = item.hospitalName;
this.areaList.provinceList[idx].selected = true; // this.areaList.provinceList.map(a => (a.selected = false));
// this.areaList.provinceList[idx].selected = true;
this.areaList.provinceList[idx].selected = !this.areaList.provinceList[
idx
].selected;
}, },
confirm() { confirm() {
......
pages/index.vue
浏览文件 @ 1aaf9201
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
<CommonTitle title="完成天数排名"></CommonTitle> <CommonTitle title="完成天数排名"></CommonTitle>
<RankingItemDays :rankList="(allData && allData.costRank)"></RankingItemDays> <RankingItemDays :rankList="(allData && allData.costRank)"></RankingItemDays>
<ShowAll @action="gotoPage('/rank-days')"></ShowAll> <ShowAll @action="gotoPage('/rank-days')"></ShowAll>
<OrgDoctorList></OrgDoctorList>
<CommonBottomInfo></CommonBottomInfo> <CommonBottomInfo></CommonBottomInfo>
</article> </article>
...@@ -114,6 +115,7 @@ import CommonAreaSelect from "@/components/common/common-area-select"; ...@@ -114,6 +115,7 @@ import CommonAreaSelect from "@/components/common/common-area-select";
import ProcessBar from "@/components/common/pica-process"; import ProcessBar from "@/components/common/pica-process";
import CourseTimesStat from "@/components/bussiness/course-times-stat"; import CourseTimesStat from "@/components/bussiness/course-times-stat";
import CourseTimesList from "@/components/bussiness/course-times-list"; import CourseTimesList from "@/components/bussiness/course-times-list";
import OrgDoctorList from "@/components/bussiness/org-doctor-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";
...@@ -146,7 +148,8 @@ export default { ...@@ -146,7 +148,8 @@ export default {
ExamList, ExamList,
ChartColumnVerticalTC, ChartColumnVerticalTC,
ChartColumnHorizontalTC, ChartColumnHorizontalTC,
CommonTitleWithBtn CommonTitleWithBtn,
OrgDoctorList
}, },
data() { data() {
return { return {
...@@ -181,7 +184,7 @@ export default { ...@@ -181,7 +184,7 @@ export default {
townName: "", townName: "",
}, },
projectId: "", projectId: "",
token: '4556EDEAAE134FE1B6E1356BF9C1B8F9' || "C284B868425D494386EAEF6C9AE99937", token: '95D386B4AFA944098CC57C987F4AB877' || "A62E9F92365547A29724F21F29BED4F6" || '4556EDEAAE134FE1B6E1356BF9C1B8F9',
isOrgStat: false, isOrgStat: false,
// 区域选择通用接口参数 // 区域选择通用接口参数
queryParams: { queryParams: {
......
store/README.md 已删除 100644 → 0
浏览文件 @ 22004f93
# STORE
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains your Vuex Store files.
Vuex Store option is implemented in the Nuxt.js framework.
Creating a file in this directory automatically activates the option in the framework.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).
store/index.js
浏览文件 @ 1aaf9201
...@@ -25,7 +25,10 @@ export const getters = { ...@@ -25,7 +25,10 @@ export const getters = {
}, },
provinceList(state) { provinceList(state) {
return state.provinceList return state.provinceList
} },
orgList(state) {
return state.orgList
},
} }
export const mutations = { export const mutations = {
SET_PROJECT_ID(state, projectId) { SET_PROJECT_ID(state, projectId) {
...@@ -46,6 +49,10 @@ export const mutations = { ...@@ -46,6 +49,10 @@ export const mutations = {
SET_PROVINCE_LIST(state, provinceList) { SET_PROVINCE_LIST(state, provinceList) {
state.provinceList = provinceList state.provinceList = provinceList
}, },
SET_ORG_LIST(state, orgList) {
state.orgList = orgList
},
} }
export const actions = { export const actions = {
setProjectId({ commit }, projectId) { setProjectId({ commit }, projectId) {
...@@ -66,4 +73,7 @@ export const actions = { ...@@ -66,4 +73,7 @@ export const actions = {
setProvinceList({ commit }, provinceList) { setProvinceList({ commit }, provinceList) {
commit('SET_PROVINCE_LIST', provinceList); commit('SET_PROVINCE_LIST', provinceList);
}, },
setOrgList({ commit }, orgList) {
commit('SET_ORG_LIST', orgList);
},
} }
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或