Skip to content

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

代码整理与优化

上级 04bcdae3
隐藏空白字符变更
内嵌 并排
正在显示 包含 247 行增加 和 3098 行删除
components/bussiness/charts/chart-column-horizontal-tc-long.vue
浏览文件 @ 30b2b711
......@@ -12,7 +12,6 @@
let vm = null;
import CommonNoMore from "@/components/common/common-no-more";
import NoContent from "@/components/bussiness/no-content";
// let chartColumn = null;
export default {
components: {
CommonNoMore,
......@@ -87,20 +86,15 @@ export default {
vm = this;
},
methods: {
// 画
// 绘制图表
drawColumn(yAxisData, series0Data, series1Data) {
let chartColumn = this.$echarts.init(document.getElementById(this.id));
// let chartColumn = this.$echarts.init(document.getElementById("myChart1"));
// 基于准备好的dom，初始化echarts实例
// 绘制图表
let options = {
color: vm.colors || [],
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
type: "shadow"
},
formatter: "{b}<br/>{a0}: {c0}%<br/>{a1}: {c1}%"
},
......@@ -191,7 +185,6 @@ export default {
{
name: "培训后正确率",
data: series1Data,
// data: [0, 0],
// data: [120, 20, 160, 80, 70, 110, 130, 130],
type: "bar",
barWidth: 15, //柱图宽度
......@@ -229,13 +222,6 @@ export default {
<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);
font-size: 14px;
}
</style>
components/bussiness/charts/chart-column-horizontal-tc.vue
浏览文件 @ 30b2b711
......@@ -91,8 +91,7 @@ export default {
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
type: "shadow"
},
formatter: "{b}<br/>{a0}: {c0}%<br/>{a1}: {c1}%"
},
......@@ -101,7 +100,6 @@ export default {
data: ["培训前正确率", "培训后正确率"],
textStyle: {
fontSize: 12,
// fontWeight: "bolder",
color: "#676869"
}
},
......@@ -213,7 +211,6 @@ export default {
.chart-column-htc {
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-column-stack.vue
浏览文件 @ 30b2b711
......@@ -58,7 +58,6 @@ export default {
handler(newVal, oldValue) {
if(newVal.length) {
this.isShow = true;
// console.log(newVal, oldValue);
vm.legendData = [];
vm.yAxisData = [];
vm.seriesData = [];
......@@ -124,11 +123,9 @@ export default {
});
}
},
// 画
// 绘制图表
drawColumn() {
// 基于准备好的dom，初始化echarts实例
let chartColumn = this.$echarts.init(document.getElementById(this.id));
// 绘制图表
let options = {
color: [
"#FFB01B",
......@@ -181,7 +178,6 @@ export default {
// formatter: function(config) {
// console.log('config', config);
// }
},
legend: {
top: 20,
......@@ -250,59 +246,9 @@ export default {
color: "#efefef",
width: 1
}
},
// //设置网格线颜色
// splitLine: {
// show: true,
// lineStyle: {
// color: ["#efefef"],
// width: 1,
// type: "solid"
// }
// }
}
},
series: vm.seriesData
// series: [
// {
// name: "获优秀人数",
// type: "bar",
// stack: "总量",
// barWidth: 16, //柱图宽度
// label: {
// normal: {
// show: false,
// position: "insideRight"
// }
// },
// data: [320, 302, 301, 334, 390, 330, 320]
// },
// {
// name: "获及格人数",
// type: "bar",
// stack: "总量",
// barWidth: 16, //柱图宽度
// label: {
// normal: {
// show: false,
// position: "insideRight"
// }
// },
// data: [120, 132, 101, 134, 90, 230, 210]
// },
// {
// name: "未获证人数",
// type: "bar",
// stack: "总量",
// barWidth: 16, //柱图宽度
// label: {
// normal: {
// show: false,
// position: "insideRight"
// }
// },
// data: [220, 182, 191, 234, 290, 330, 310]
// }
// ]
};
chartColumn.setOption(options, true);
}
......
components/bussiness/charts/chart-column-vertical-score.vue
浏览文件 @ 30b2b711
......@@ -43,20 +43,10 @@ export default {
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
type: "shadow"
},
formatter: '{b}分获得人数{c0}人'
},
// legend: {
// top: 20,
// data: ["获优秀人数", "获及格人数", "未获证人数"],
// textStyle: {
// fontSize: 12,
// // fontWeight: "bolder",
// color: "#676869"
// }
// },
grid: {
top: "10%",
left: "3%",
......@@ -171,87 +161,9 @@ export default {
this.drawColumn();
},
methods: {
// 画
// 绘制图表
drawColumn() {
// 基于准备好的dom，初始化echarts实例
chartColumn = this.$echarts.init(document.getElementById(this.id));
// 绘制图表
// let options = {
// color: vm.colors,
// tooltip: {
// trigger: "axis",
// axisPointer: {
// // 坐标轴指示器，坐标轴触发有效
// type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
// }
// },
// // legend: {
// // top: 20,
// // data: ["获优秀人数", "获及格人数", "未获证人数"],
// // textStyle: {
// // fontSize: 12,
// // // fontWeight: "bolder",
// // color: "#676869"
// // }
// // },
// grid: {
// top: "10%",
// left: "3%",
// right: "6%",
// bottom: "6%",
// containLabel: true
// },
// lineStyle: {
// color: "#676869"
// },
// yAxis: {
// axisTick: false,
// type: "value",
// axisLabel: {
// formatter: "{value}",
// textStyle: {
// color: "#676869"
// }
// },
// axisLine: {
// lineStyle: {
// color: "#efefef",
// width: 1
// }
// }
// },
// xAxis: {
// axisTick: false,
// type: "category",
// data: [],
// // data: ["其他", "中专以下", "大专", "本科", "硕士"],
// textStyle: {
// fontSize: 12,
// color: "#676869"
// },
// axisLabel: {
// formatter: "{value}",
// textStyle: {
// color: "#676869"
// }
// },
// axisLine: {
// lineStyle: {
// color: "#efefef",
// width: 1
// }
// }
// },
// series: [
// {
// name: "获优秀人数",
// data: [],
// // data: [120, 200, 150, 80, 70, 110, 130],
// type: "bar",
// barWidth: 20 //柱图宽度
// }
// ]
// };
chartColumn.setOption(this.options, true);
}
}
......
components/bussiness/charts/chart-column-vertical-tc.vue
浏览文件 @ 30b2b711
......@@ -82,18 +82,15 @@ export default {
this.drawColumn([], [], []);
},
methods: {
// 画
// 绘制图表
drawColumn(yAxisData, series0Data, series1Data) {
// 基于准备好的dom，初始化echarts实例
chartColumn = this.$echarts.init(document.getElementById(this.id));
// 绘制图表
let options = {
color: vm.colors,
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
type: "shadow"
},
// formatter: '{a}<br/>{b}<br/>{c}<br/>{a0}<br/>{a1}<br/>{b0}<br/>{b1}',
formatter: '{b}<br/>{a0}: {c0}%<br/> {a1}: {c1}%'
......@@ -198,7 +195,6 @@ export default {
.chart-column-vtc {
position: relative;
top: -6px;
// height: 280px;
margin: 15px 15px 0;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.04);
......
components/bussiness/charts/chart-column-vertical-times.vue
浏览文件 @ 30b2b711
......@@ -133,7 +133,6 @@ export default {
watch: {
dataList: {
handler(newVal) {
console.log('chart-cvtimes', newVal)
if(newVal.length) {
this.isShow = true;
let cList = newVal.slice(0, 5);
......@@ -161,18 +160,6 @@ export default {
document.body.clientWidth ||
document.documentElement.clientWidth;
this.chartWidth = (clientWidth * 0.9).toFixed(0) + 'px';
console.log(clientWidth);
// if (clientWidth <= 320) {
// this.chartWidth = "260px";
// } else if (clientWidth <= 360) {
// this.chartWidth = "320px";
// } else if (clientWidth <= 375) {
// this.chartWidth = "340px";
// } else if (clientWidth <= 414) {
// this.chartWidth = "375px";
// } else {
// this.chartWidth = (clientWidth * 0.8).toFixed(0) + 'px';
// }
}
},
mounted() {
......@@ -180,87 +167,9 @@ export default {
this.drawColumn();
},
methods: {
// 画
// 绘制图表
drawColumn() {
// 基于准备好的dom，初始化echarts实例
chartColumn = this.$echarts.init(document.getElementById(this.id));
// 绘制图表
// let options = {
// color: vm.colors,
// tooltip: {
// trigger: "axis",
// axisPointer: {
// // 坐标轴指示器，坐标轴触发有效
// type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
// }
// },
// // legend: {
// // top: 20,
// // data: ["获优秀人数", "获及格人数", "未获证人数"],
// // textStyle: {
// // fontSize: 12,
// // // fontWeight: "bolder",
// // color: "#676869"
// // }
// // },
// grid: {
// top: "10%",
// left: "3%",
// right: "6%",
// bottom: "6%",
// containLabel: true
// },
// lineStyle: {
// color: "#676869"
// },
// yAxis: {
// axisTick: false,
// type: "value",
// axisLabel: {
// formatter: "{value}",
// textStyle: {
// color: "#676869"
// }
// },
// axisLine: {
// lineStyle: {
// color: "#efefef",
// width: 1
// }
// }
// },
// xAxis: {
// axisTick: false,
// type: "category",
// data: [],
// // data: ["其他", "中专以下", "大专", "本科", "硕士"],
// textStyle: {
// fontSize: 12,
// color: "#676869"
// },
// axisLabel: {
// formatter: "{value}",
// textStyle: {
// color: "#676869"
// }
// },
// axisLine: {
// lineStyle: {
// color: "#efefef",
// width: 1
// }
// }
// },
// series: [
// {
// name: "获优秀人数",
// data: [],
// // data: [120, 200, 150, 80, 70, 110, 130],
// type: "bar",
// barWidth: 20 //柱图宽度
// }
// ]
// };
chartColumn.setOption(this.options, true);
}
}
......
components/bussiness/charts/chart-column-vertical.vue
浏览文件 @ 30b2b711
......@@ -40,19 +40,9 @@ export default {
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
type: "shadow"
}
},
// legend: {
// top: 20,
// data: ["获优秀人数", "获及格人数", "未获证人数"],
// textStyle: {
// fontSize: 12,
// // fontWeight: "bolder",
// color: "#676869"
// }
// },
grid: {
top: "10%",
left: "3%",
......@@ -117,7 +107,6 @@ export default {
watch: {
dataList: {
handler(newVal) {
// debugger
this.xAxisData = newVal.map( item => {
return item.timesStr
})
......@@ -138,18 +127,6 @@ export default {
document.body.clientWidth ||
document.documentElement.clientWidth;
this.chartWidth = (clientWidth * 0.9).toFixed(0) + 'px';
console.log(clientWidth);
// if (clientWidth <= 320) {
// this.chartWidth = "260px";
// } else if (clientWidth <= 360) {
// this.chartWidth = "320px";
// } else if (clientWidth <= 375) {
// this.chartWidth = "340px";
// } else if (clientWidth <= 414) {
// this.chartWidth = "375px";
// } else {
// this.chartWidth = (clientWidth * 0.8).toFixed(0) + 'px';
// }
}
},
mounted() {
......@@ -157,87 +134,9 @@ export default {
this.drawColumn();
},
methods: {
// 画
// 绘制图表
drawColumn() {
// 基于准备好的dom，初始化echarts实例
chartColumn = this.$echarts.init(document.getElementById(this.id));
// 绘制图表
// let options = {
// color: vm.colors,
// tooltip: {
// trigger: "axis",
// axisPointer: {
// // 坐标轴指示器，坐标轴触发有效
// type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
// }
// },
// // legend: {
// // top: 20,
// // data: ["获优秀人数", "获及格人数", "未获证人数"],
// // textStyle: {
// // fontSize: 12,
// // // fontWeight: "bolder",
// // color: "#676869"
// // }
// // },
// grid: {
// top: "10%",
// left: "3%",
// right: "6%",
// bottom: "6%",
// containLabel: true
// },
// lineStyle: {
// color: "#676869"
// },
// yAxis: {
// axisTick: false,
// type: "value",
// axisLabel: {
// formatter: "{value}",
// textStyle: {
// color: "#676869"
// }
// },
// axisLine: {
// lineStyle: {
// color: "#efefef",
// width: 1
// }
// }
// },
// xAxis: {
// axisTick: false,
// type: "category",
// data: [],
// // data: ["其他", "中专以下", "大专", "本科", "硕士"],
// textStyle: {
// fontSize: 12,
// color: "#676869"
// },
// axisLabel: {
// formatter: "{value}",
// textStyle: {
// color: "#676869"
// }
// },
// axisLine: {
// lineStyle: {
// color: "#efefef",
// width: 1
// }
// }
// },
// series: [
// {
// name: "获优秀人数",
// data: [],
// // data: [120, 200, 150, 80, 70, 110, 130],
// type: "bar",
// barWidth: 20 //柱图宽度
// }
// ]
// };
chartColumn.setOption(this.options, true);
}
}
......@@ -248,7 +147,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-cert.vue
浏览文件 @ 30b2b711
......@@ -55,11 +55,9 @@ export default {
return { name: item.certName, value: item.doneCount}
})
},
// 画饼图
// 绘制图表
drawPie() {
// 基于准备好的dom，初始化echarts实例
let chartPie = vm.$echarts.init(document.getElementById(vm.pieId));
// 绘制图表
let options = {
color: echartColors,
tooltip: {
......@@ -79,7 +77,6 @@ export default {
// fontWeight: "bolder",
color: "#8C8C8C"
},
// icon: "image://./assets/images/left-array-black.png", //格式为'image://+icon文件地址'，其中image::后的//不能省略 position: "inner",
formatter: function(name) {
return name + " " + vm.fmtLengend(name);
}
......@@ -125,7 +122,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-edu.vue
浏览文件 @ 30b2b711
......@@ -80,16 +80,13 @@ export default {
})
this.count = count;
},
// 画饼图
// 绘制图表
drawPie() {
// 基于准备好的dom，初始化echarts实例
let chartPie = vm.$echarts.init(document.getElementById(vm.pieId));
// 绘制图表
let options = {
color: echartColors,
title: {
text: "总人数: " + vm.count,
// subtext: "纯属虚构",
top: '10%',
left: '60%',
textStyle: {
......@@ -152,7 +149,6 @@ export default {
chartPie.setOption(options, true);
},
fmtLengend(name) {
console.log(name);
let item = this.dataList.find(item => {
return item.name === name;
});
......@@ -166,7 +162,6 @@ export default {
.chart-pie-edu {
position: relative;
top: -12px;
// 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-title.vue
浏览文件 @ 30b2b711
......@@ -86,16 +86,13 @@ export default {
})
this.count = count;
},
// 画饼图
// 绘制图表
drawPie() {
// 基于准备好的dom，初始化echarts实例
let chartPie = vm.$echarts.init(document.getElementById(vm.pieId));
// 绘制图表
let options = {
color: echartColors,
title: {
text: "总人数: " + vm.count,
// subtext: "纯属虚构",
top: '10%',
left: '60%',
textStyle: {
......@@ -124,42 +121,11 @@ export default {
data: vm.legendData, // ["优秀证书", "及格证书", "未获证"],
textStyle: {
fontSize: 12,
// fontWeight: "bolder",
color: "#8C8C8C",
// rich: {
// a: {
// fontSize: 20,
// verticalAlign: "top",
// align: "center",
// padding: [0, 0, 28, 0]
// }
// }
},
// textStyle: {
// rich: {
// a: {
// width: 20
// }
// }
// },
// icon: "image://./assets/images/left-array-black.png", //格式为'image://+icon文件地址'，其中image::后的//不能省略 position: "inner",
formatter: function(name) {
return name + " " + vm.fmtLengend(name);
},
// itemStyle: {
// normal: {
// shadowBlur: 10,
// shadowColor: 'rgba(120, 36, 50, 0.5)',
// shadowOffsetY: 5,
// color: this.$echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
// offset: 0,
// color: 'rgb(251, 118, 123)'
// }, {
// offset: 1,
// color: 'rgb(204, 46, 72)'
// }])
// }
// },
},
},
series: [
{
......@@ -203,7 +169,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.vue
浏览文件 @ 30b2b711
......@@ -75,9 +75,6 @@ export default {
},
mounted() {
vm = this;
// this.legendData = ["优秀证书", "及格证书", "未获证"];
// this.seriesData = vm.pieData;
// this.drawPie();
},
methods: {
handlePieData(pieData) {
......@@ -88,13 +85,11 @@ export default {
return { name: item.certName, value: item.doneCount}
})
},
// 画饼图
// 绘制图表
drawPie() {
// 基于准备好的dom，初始化echarts实例
if(!chartPie) {
chartPie = vm.$echarts.init(document.getElementById(vm.id));
}
// 绘制图表
options = {
color: echartColors,
tooltip: {
......@@ -116,10 +111,8 @@ export default {
// fontWeight: "bolder",
color: "#8C8C8C"
},
// icon: "image://./assets/images/left-array-black.png", //格式为'image://+icon文件地址'，其中image::后的//不能省略 position: "inner",
formatter: function(name) {
return name;
// return name + " " + vm.fmtLengend(name);
}
},
series: [
......@@ -129,13 +122,12 @@ export default {
label: {
position: "inner",
formatter: function(config) {
// alert(JSON.stringify(config))
return `${config.percent.toFixed(1)}%`;
}
},
radius: "65%",
center: ["30%", "50%"],
data: vm.seriesData, // vm.pieData,
data: vm.seriesData,
itemStyle: {
emphasis: {
shadowBlur: 10,
......@@ -163,7 +155,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/course-times-list.vue
浏览文件 @ 30b2b711
<!-- 课程列表组件 -->
<template>
<div class="corse-times-list">
<!-- <TipsInfo></TipsInfo> -->
<ul class="title">
<li>课程名</li>
<li>课程时长</li>
......@@ -17,11 +16,7 @@
</div>
</template>
<script>
// import TipsInfo from '@/components/bussiness/tips-info'
export default {
// components: {
// TipsInfo
// },
props: {
dataList: {
type: Array,
......
components/bussiness/exam-times-list.vue
浏览文件 @ 30b2b711
<!-- 完成项目考试分数情况 -->
<!-- 完成项目考试次数情况 -->
<template>
<div class="exam-times-wrapper">
<TipsInfo></TipsInfo>
......
components/bussiness/no-content.vue
浏览文件 @ 30b2b711
<template>
<!-- 专项合作无内容 -->
<!-- 无数据组件 -->
<template>
<section class="nc-container">
<img
class="nc-container-img"
......
components/bussiness/ranking-item-days.vue
浏览文件 @ 30b2b711
......@@ -18,14 +18,6 @@
</ul>
</template>
<script>
// {
// "subId":10000,
// "subName":null,
// "certCount":0,
// "joinCount":0,
// "certRate":0,
// "costTime":2000
// }
export default {
props: {
rankList: {
......@@ -42,13 +34,11 @@ export default {
</script>
<style scoped lang="scss">
.rank-item-days {
// margin: 20px 15px;
margin: 0 15px;
li {
height: 78px;
display: flex;
flex-direction: row;
// margin-top: 20px;
border-bottom: 1px solid #f0f1f2;
.order {
width: 25px;
......@@ -87,7 +77,6 @@ export default {
.desc-2 {
height: 12px;
line-height: 12px;
// padding-bottom: 10px;
font-size: 12px;
font-weight: 400;
color: #979899;
......
components/bussiness/tips-info-chart.vue
浏览文件 @ 30b2b711
<!-- 提示信息：报表专用 -->
<template>
<div class="tips-info-wrapper">
<span>{{content}}</span>
......@@ -26,7 +27,6 @@
font-size: 13px;
font-weight: 400;
color: #676869;
// border-bottom: 1px solid #F0F1F2;
}
}
</style>
\ No newline at end of file
components/bussiness/tips-info.vue
浏览文件 @ 30b2b711
<!-- 提示信息 -->
<template>
<div class="tips-info-wrapper">
<span>{{content}}</span>
......
components/bussiness/title-klg-point.vue
浏览文件 @ 30b2b711
......@@ -16,18 +16,8 @@ export default {
title: {
type: String,
default: "证书分布情况"
},
needRightBtn: {
type: Boolean,
default: false
}
},
data() {
return {
};
},
methods: {}
}
};
</script>
......
components/common/common-area-select.vue
浏览文件 @ 30b2b711
......@@ -6,10 +6,7 @@
</li>
<li class="center" :class="{'gray': isNotVisible}" @click="orgClick">
{{orgName}}<img v-show="isNotVisible" src="../../assets/images/arr-down-white.png"/><img v-show="!showOrg && !isNotVisible" src="../../assets/images/arr-down.png"/><img v-show="showOrg && !isNotVisible" src="../../assets/images/arr-up.png"/>
</li>
<!-- <li class="center" @click="orgClick">
{{orgName}}<img src="../../assets/images/left-array-black.png"/>
</li> -->
</li>
</ul>
</template>
<script>
......@@ -39,19 +36,14 @@ export default {
areaDegree: 'areaDegree'
}),
isNotVisible() {
console.log('this.areaDegree', this.areaDegree)
if((this.orgList && this.orgList.length == 0) || this.areaDegree == 0 || this.areaDegree == 1 || this.areaDegree == 2) {
// if(this.areaDegree == 0 || this.areaDegree == 1 || this.areaDegree == 2) {
return true;
} else {
return false;
}
// return this.orgList.length == 0 || this.areaDegree == 0 || this.areaDegree == 1 || this.areaDegree == 2
}
},
// watch: {
// },
methods: {
areaClick() {
this.$emit("areaClick");
......
components/common/common-header.vue
浏览文件 @ 30b2b711
<!-- 通用Navbar -->
<template>
<section :class="isFixNavbar ? 'nav-top fixed' : 'nav-top'" :style="'height:' + navHeight">
<div
......@@ -42,8 +43,8 @@ export default {
type: String,
default: "暂无数据"
},
// 是否fix定位
isFixNavbar: {
//是否fix定位
type: Boolean,
default: true
},
......@@ -92,7 +93,6 @@ export default {
} else {
this.$rocNative.goBack();
}
// rocNative.goBack();
},
//分享
goShare() {
......@@ -143,9 +143,6 @@ export default {
width: 55px;
padding-left: 15px;
padding-right: 15px;
// -ms-transform: translate(180deg);
// -webkit-transform: (180deg);
// transform: rotate(180deg);
}
img {
display: block;
......@@ -177,7 +174,6 @@ export default {
z-index: 2010;
display: inline-block;
width: 100%;
/* padding:0 33px;*/
height: 36px;
&-title {
height: 18px;
......@@ -188,12 +184,10 @@ export default {
}
}
.nav-part {
// margin-top: 10px;
width: 100%;
font-size: 18px;
text-align: center;
padding: 0 0 10px 0;
/* height: 25px;*/
}
}
......@@ -204,6 +198,5 @@ export default {
z-index: 2010;
border-bottom: 0px solid #e7e7e7;
background: #fff;
/* height: 25px;*/
}
</style>
\ No newline at end of file
components/common/common-loading.vue
浏览文件 @ 30b2b711
......@@ -53,8 +53,6 @@
svg path,
svg rect {
// fill: #fff;
// fill: #449284;
fill: #449284;
}
</style>
components/common/common-no-more.vue
浏览文件 @ 30b2b711
......@@ -22,10 +22,8 @@ export default {
flex-direction: row;
justify-content: center;
align-items: center;
// background:rgba(248,248,248,1);
&-sub {
width: 84px;
// height: 26px);
border: 1px solid #F7F7F7;
border-bottom: 0;
}
......
components/common/common-split-line.vue
浏览文件 @ 30b2b711
<!-- 通用分隔线组件 -->
<template>
<div
class="common-split-line"
......
components/common/common-swiper-item.vue
浏览文件 @ 30b2b711
<!-- Swipter的子组件 -->
<!-- Swipter的子组件：概述页面专用 -->
<template>
<section class="common-swiper-item">
<article class="middle">
......
components/common/common-tabs.vue
浏览文件 @ 30b2b711
......@@ -3,11 +3,11 @@
<div class="common-tabs-wrapper">
<ul class="common-tabs">
<li
v-show="(item === '课程分析' && projectInfo.existCourse === 1)
v-show="(item === '总体概况'
|| item === '人群分析'
|| item === '课程分析' && projectInfo.existCourse === 1)
|| (item === '考试分析' && projectInfo.existExam === 1)
|| (item === '学习效果分析' && projectInfo.existEffect === 1)
|| item === '总体概况'
|| item === '人群分析'"
|| (item === '学习效果分析' && projectInfo.existEffect === 1)"
v-for="(item, index) in tapList"
:class="{'active': index === cIndex}"
:key="index"
......@@ -37,22 +37,12 @@ export default {
type: Object
}
},
mounted() {
// this.handleTabs(true, true);
},
mounted() {},
methods: {
clickTab(index) {
this.cIndex = index;
this.$emit("tabClicked", index);
},
// handleTabs(needOne, needTwo) {
// if(needOne) {
// this.tapList.push('考试分析');
// }
// if(needTwo) {
// this.tapList.push('学习效果分析');
// }
// }
}
}
};
</script>
......@@ -68,9 +58,8 @@ export default {
.common-tabs {
white-space: nowrap;
overflow-x: auto;
// height: 30px;
padding-bottom: 6px;
font-size: 13px;
font-size: 13px;
li {
display: inline-block;
height: 30px;
......@@ -101,7 +90,6 @@ export default {
height: 6px;
z-index: 2;
background: #fff;
// border-bottom: 1px solid red;
}
.border {
display: block;
......@@ -109,7 +97,6 @@ export default {
height: 1px;
bottom: -3px;
left: 0;
// padding-top: 6px;
border-bottom: 1px solid #f0f1f2;
position: absolute;
z-index: 2;
......
components/common/common-title-mini-old.vue 已删除 100644 → 0
浏览文件 @ 04bcdae3
<!-- 标题组件 -->
<template>
<div class="common-title-wrapper">
<ul class="mini">
<li class="left">{{title}}</li>
<!-- <li class="right" v-if="needRightBtn">
<span>按获证比例排名</span>
<img src="../../assets/images/arr-down.png" alt />
</li>-->
<van-dropdown-menu v-if="needRightBtn">
<van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>
</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;
.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 {
font-size: 15px;
font-weight: 700;
color: #676869;
img {
width: 12px;
height: 12px;
}
}
}
}
.van-dropdown-menu {
height: 44px;
line-height: 44px;
background: #f8f9fa;
color: #676869 !important;
font-size: 15px;
font-weight: 700;
}
.van-dropdown-menu__title {
font-size: 15px;
font-weight: 700;
color: #676869 !important;
.van-ellipsis {
color: #676869 !important;
}
}
.van-dropdown-item__option--active,
.van-dropdown-item__option--active .van-dropdown-item__icon {
.van-cell__title span{
color: #449284 !important;
font-weight: 400 !important;
}
}
// .van-cell {
// // color: #676869 !important;
// font-size: 15px;
// font-weight: 400;
// }
.van-cell .van-cell--clickable .van-dropdown-item__option {
color: #676869 !important;
font-size: 15px;
font-weight: 400 !important;
}
}
</style>
components/common/common-title-mini.vue
浏览文件 @ 30b2b711
......@@ -3,13 +3,6 @@
<div class="common-title-wrapper">
<ul class="mini">
<li class="left">{{title}}</li>
<!-- <li class="right" v-if="needRightBtn">
<span>按获证比例排名</span>
<img src="../../assets/images/arr-down.png" alt />
</li>-->
<!-- <van-dropdown-menu v-if="needRightBtn">
<van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu> -->
</ul>
</div>
</template>
......@@ -19,29 +12,8 @@ export default {
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>
......@@ -85,38 +57,5 @@ export default {
}
}
}
.van-dropdown-menu {
height: 44px;
line-height: 44px;
background: #f8f9fa;
color: #676869 !important;
font-size: 15px;
font-weight: 700;
}
.van-dropdown-menu__title {
font-size: 15px;
font-weight: 700;
color: #676869 !important;
.van-ellipsis {
color: #676869 !important;
}
}
.van-dropdown-item__option--active,
.van-dropdown-item__option--active .van-dropdown-item__icon {
.van-cell__title span{
color: #449284 !important;
font-weight: 400 !important;
}
}
// .van-cell {
// // color: #676869 !important;
// font-size: 15px;
// font-weight: 400;
// }
.van-cell .van-cell--clickable .van-dropdown-item__option {
color: #676869 !important;
font-size: 15px;
font-weight: 400 !important;
}
}
</style>
components/common/common-title-with-dropdown-old.vue 已删除 100644 → 0
浏览文件 @ 04bcdae3
<!-- 标题组件 - 带下拉选择 -->
<template>
<div class="common-title-wd-wrapper">
<div v-show="isShowDropdown" class="mask" @click="isShowDropdown = !isShowDropdown"></div>
<ul class="mini">
<li class="left">{{title}}</li>
<li class="right" v-if="needRightBtn" @click="isShowDropdown = !isShowDropdown">
<span>{{cDesc || (dataList[0] && dataList[0].desc)}}</span>
<img src="../../assets/images/arr-down.png" alt />
</li>
</ul>
<ul v-show="isShowDropdown" class="dropdown-menu">
<li v-for="(item, index) in dataList" :key="index" @click="selectSortItem(index)">
<span :class="{'active': cIndex === index }">{{item.desc}}</span>
<img v-show="cIndex === index" src="../../assets/images/sort-select-icon.png" alt="">
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: "共0条数据"
// default: "共34个省"
},
needRightBtn: {
type: Boolean,
default: false
},
dataList: {
type: Array,
default: () => []
}
},
data() {
return {
isShowDropdown: false,
cIndex: 0,
cDesc: '',
cType: 1
};
},
methods: {
selectSortItem(index) {
this.isShowDropdown = false;
this.cIndex = index;
this.cDesc = this.dataList[index].desc;
this.cType = this.dataList[index].type;
this.$emit('selectSortItem', this.cType);
}
}
};
</script>
<style lang="scss" scoped>
.common-title-wd-wrapper {
position: relative;
left: 0;
top: 0;
z-index: 1001;
height: 44px;
line-height: 44px;
background: #f8f9fa;
.mask {
position: fixed;
left: 0;
top: 100px;
z-index: 1002;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
}
.mini {
position: relative;
left: 0;
top: 0;
z-index: 1003;
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 {
font-size: 15px;
font-weight: 700;
color: #676869;
img {
width: 12px;
height: 12px;
}
}
}
}
.van-dropdown-menu {
height: 44px;
line-height: 44px;
background: #f8f9fa;
color: #676869 !important;
font-size: 15px;
font-weight: 700;
}
.van-dropdown-menu__title {
font-size: 15px;
font-weight: 700;
color: #676869 !important;
.van-ellipsis {
color: #676869 !important;
}
}
.van-dropdown-item__option--active,
.van-dropdown-item__option--active .van-dropdown-item__icon {
.van-cell__title span{
color: #449284 !important;
font-weight: 400 !important;
}
}
// .van-cell {
// // color: #676869 !important;
// font-size: 15px;
// font-weight: 400;
// }
.van-cell .van-cell--clickable .van-dropdown-item__option {
color: #676869 !important;
font-size: 15px;
font-weight: 400 !important;
}
.dropdown-menu {
position: relative;
left: 0;
top: 0;
z-index: 1004;
padding: 0 15px;
background: #fff;
li {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 56px;
line-height: 56px;
font-size: 14px;
color: #676869;
border-bottom: 1px solid #F0F1F2;
img {
line-height: 56px;
width: 12px;
height: 12px;
}
span.active {
// span {
color: #449284 !important;
// }
}
}
}
}
</style>
components/common/common-title-with-dropdown.vue
浏览文件 @ 30b2b711
......@@ -23,7 +23,6 @@ export default {
title: {
type: String,
default: "共0条数据"
// default: "共34个省"
},
needRightBtn: {
type: Boolean,
......@@ -108,39 +107,7 @@ export default {
}
}
}
.van-dropdown-menu {
height: 44px;
line-height: 44px;
background: #f8f9fa;
color: #676869 !important;
font-size: 15px;
font-weight: 700;
}
.van-dropdown-menu__title {
font-size: 15px;
font-weight: 700;
color: #676869 !important;
.van-ellipsis {
color: #676869 !important;
}
}
.van-dropdown-item__option--active,
.van-dropdown-item__option--active .van-dropdown-item__icon {
.van-cell__title span{
color: #449284 !important;
font-weight: 400 !important;
}
}
// .van-cell {
// // color: #676869 !important;
// font-size: 15px;
// font-weight: 400;
// }
.van-cell .van-cell--clickable .van-dropdown-item__option {
color: #676869 !important;
font-size: 15px;
font-weight: 400 !important;
}
.dropdown-menu {
position: relative;
left: 0;
......@@ -164,9 +131,7 @@ export default {
height: 12px;
}
span.active {
// span {
color: #449284 !important;
// }
color: #449284 !important;
}
}
}
......
components/common/common-title-with-what.vue
浏览文件 @ 30b2b711
......@@ -27,14 +27,12 @@ export default {
<style lang="scss" scoped>
.common-title-with-what {
// margin: 15px;
font-size: 18px;
margin: 30px 15px 20px;
li {
display: inline-block;
font-size: 18px;
&.left {
// width: 216px;
display: block;
height: 18px;
line-height: 18px;
......
components/common/common-title.vue
浏览文件 @ 30b2b711
......@@ -23,12 +23,10 @@ export default {
<style lang="scss" scoped>
.common-title {
// margin: 15px;
margin: 30px 15px 20px;
li {
display: inline-block;
&.left {
// width: 216px;
display: block;
height: 18px;
line-height: 18px;
......
components/common/pica-area-new.vue 已删除 100644 → 0
浏览文件 @ 04bcdae3
<!-- 选择地区组件 -->
<template>
<div class="select-wrapper">
<div class="mask" @click="cancelSelect" @touchmove.prevent>
<div class="address-wrap" @click.stop>
<div class="tip-header">
<span class="cancel-btn" @click="cancelSelect">取消</span>
<h3>选择地区</h3>
<button class="submit-btn" @click="confirm">确定</button>
<!-- <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)">
{{
value.provinceName
? value.provinceName
: '请选择'
}}
</li>
<li
v-show="value.provinceName && rank>1"
:class="{ active: isShowCity }"
class="item"
@click="tabAddressClick(2)"
>{{ value.cityName ? value.cityName : '请选择' }}</li>
<li
v-show="value.cityName && rank>2"
:class="{ active: isShowCounty }"
class="item"
@click="tabAddressClick(3)"
>
{{
value.countyName ? value.countyName : '请选择'
}}
</li>
<li
v-show="value.countyName && rank>3"
:class="{ active: isShowTown }"
class="item"
@click="tabAddressClick(4)"
>{{ value.townName ? value.townName : '请选择' }}</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="provinceSelect(provinceItem, index)"
>
<span>{{ provinceItem.provinceName }}</span>
<span v-show="provinceItem.selected">
<img src="../../assets/images/sort-select-icon.png" />
</span>
</li>
</ul>
<ul v-show="isShowCity" id="city">
<li
v-for="(cityItem, index) in areaList.cityList"
:key="index"
:class="{ active: cityItem.selected }"
@click="citySelect(cityItem, index)"
>
<span>{{ cityItem.cityName }}</span>
<span v-show="cityItem.selected">
<img src="../../assets/images/sort-select-icon.png" />
</span>
</li>
</ul>
<ul v-show="isShowCounty" id="county">
<li
v-for="(countyItem, index) in areaList.countyList"
:key="index"
:class="{ active: countyItem.selected }"
@click="countySelect(countyItem, index)"
>
<span>{{ countyItem.countyName }}</span>
<span v-show="countyItem.selected">
<img src="../../assets/images/sort-select-icon.png" />
</span>
</li>
</ul>
<ul v-show="isShowTown" id="town">
<li
v-for="(townItem, index) in areaList.townList"
:key="index"
:class="{ active: townItem.selected }"
@click="townSelect(townItem, index)"
>
<span>{{ townItem.townName }}</span>
<span v-show="townItem.selected">
<img src="../../assets/images/sort-select-icon.png" />
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {
getProvinceList,
getCityList,
getCountyList,
getTownList
} from "../../service";
export default {
name: "PicaArea",
data() {
return {
areaList: {
provinceList: [],
cityList: [],
countyList: [],
townList: []
},
value: {
cityId: "",
cityName: "",
countyId: "",
countyName: "",
patientAddress: "",
provinceId: "",
provinceName: "",
townId: "",
townName: ""
},
isDisabled: true,
isShowProvince: true,
isShowCity: false,
isShowCounty: false,
isShowTown: false,
sendData: {
regionId: '000',
projectId: '',
token: ''
}
};
},
props: {
baseUrl: {
type: String,
default: ""
},
rank: {
type: Number | String,
default: 4
},
projectId: {
type: String,
default: ""
},
token: {
type: String,
default: ""
}
},
created() {
this.getProvinceData();
},
watch: {
token(newVal, oldValue) {
if (this.needSend) {
this.sendData.projectId = this.provinceId
this.sendData.token = this.token
this.getProvinceData(this.sendData);
}
this.needSend = false;
}
},
methods: {
async getProvinceData(data) {
await getProvinceList(data).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;
}
});
}
});
},
async getCityData(provinceId) {
await getCityList({
provinceId: provinceId
}).then(res => {
if (res.code === "000000") {
this.areaList.cityList = res.data.cityList;
this.areaList.cityList.map(a => {
if (a.cityId == this.value.cityId) {
a.selected = true;
}
});
}
});
},
async getCountyData(cityId) {
await getCountyList({
cityId: cityId
}).then(res => {
if (res.code === "000000") {
this.areaList.countyList = res.data.countyList;
this.areaList.countyList.map(a => {
if (a.countyId == this.value.countyId) {
a.selected = true;
}
});
}
});
},
async getTownData(countyId) {
await getTownList({
countyId: countyId
}).then(res => {
if (res.code === "000000") {
this.areaList.townList = res.data.townList;
this.areaList.townList.map(a => {
if (a.townId == this.value.townId) {
a.selected = true;
}
});
}
});
},
// provinceCallback(provinceId) {
// this.getCityData(provinceId);
// },
// cityCallback(cityId) {
// this.getCountyData(cityId);
// },
// countryCallback(countyId) {
// this.getTownData(countyId);
// },
//选择省份的操作
provinceSelect(item, idx) {
this.value.provinceId = item.provinceId;
this.value.provinceName = item.provinceName;
this.value.patientAddress = "";
this.value.cityId = null;
this.value.cityName = "";
this.value.countyId = null;
this.value.countyName = "";
this.value.townId = null;
this.value.townName = "";
//控制省市县乡数据展示与隐藏
this.isShowProvince = false;
this.isShowCounty = false;
this.isShowTown = false;
if (this.rank > 1) {
this.isShowCity = true;
this.getCityData(this.value.provinceId);
this.isDisabled = true;
} else {
this.isDisabled = false;
}
// 当前选中的样式
this.areaList.provinceList.map(a => (a.selected = false));
this.areaList.provinceList[idx].selected = true;
},
//选择市的操作
citySelect(item, idx) {
this.value.cityId = item.cityId;
this.value.cityName = item.cityName;
this.value.patientAddress = "";
this.value.countyId = null;
this.value.countyName = "";
this.value.townId = null;
this.value.townName = "";
//控制省市县乡数据展示与隐藏
this.isShowProvince = false;
this.isShowCity = false;
this.isShowTown = false;
if (this.rank > 2) {
this.isShowCounty = true;
this.getCountyData(this.value.cityId);
this.isDisabled = true;
} else {
this.isDisabled = false;
}
// 当前选中的样式
this.areaList.cityList.map(a => (a.selected = false));
this.areaList.cityList[idx].selected = true;
},
//选择区/县的操作
countySelect(item, idx) {
this.value.countyId = item.countyId;
this.value.countyName = item.countyName;
this.value.townId = null;
this.value.townName = "";
this.value.patientAddress = "";
//控制省市县乡数据展示与隐藏
this.isShowProvince = false;
this.isShowCity = false;
this.isShowCounty = false;
if (this.rank > 3) {
this.isShowTown = true;
this.getTownData(this.value.countyId);
this.isDisabled = true;
} else {
this.isDisabled = false;
}
// 当前选中的样式
this.areaList.countyList.map(a => (a.selected = false));
this.areaList.countyList[idx].selected = true;
},
//选择乡镇的操作
townSelect(item, idx) {
this.value.townId = item.townId;
this.value.townName = item.townName;
this.value.patientAddress = `${this.value.provinceName}${this.value.cityName}${this.value.countyName}${this.value.townName}`;
// 当前选中的样式
this.areaList.townList.map(a => (a.selected = false));
this.areaList.townList[idx].selected = true;
this.isDisabled = false;
},
tabAddressClick(tab) {
if (tab === 1) {
this.isShowProvince = true;
this.isShowCity = false;
this.isShowCounty = false;
this.isShowTown = false;
} else if (tab === 2) {
this.isShowProvince = false;
this.isShowCity = true;
this.isShowCounty = false;
this.isShowTown = false;
} else if (tab === 3) {
this.isShowProvince = false;
this.isShowCity = false;
this.isShowCounty = true;
this.isShowTown = false;
} else if (tab === 4) {
this.isShowProvince = false;
this.isShowCity = false;
this.isShowCounty = false;
this.isShowTown = true;
}
},
confirm() {
this.$emit("confirm", this.value);
},
cancelSelect() {
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-area-old.vue 已删除 100644 → 0
浏览文件 @ 04bcdae3
<!-- 选择地区组件 -->
<template>
<div class="select-wrapper">
<div class="mask" @click="cancelSelect" @touchmove.prevent>
<div class="address-wrap" @click.stop>
<div class="tip-header">
<span class="cancel-btn" @click="cancelSelect">取消</span>
<h3>选择地区</h3>
<button class="submit-btn" @click="confirm">确定</button>
<!-- <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)">
{{
value.provinceName
? value.provinceName
: '请选择'
}}
</li>
<li
v-show="value.provinceName && rank>1"
:class="{ active: isShowCity }"
class="item"
@click="tabAddressClick(2)"
>{{ value.cityName ? value.cityName : '请选择' }}</li>
<li
v-show="value.cityName && rank>2"
:class="{ active: isShowCounty }"
class="item"
@click="tabAddressClick(3)"
>
{{
value.countyName ? value.countyName : '请选择'
}}
</li>
<li
v-show="value.countyName && rank>3"
:class="{ active: isShowTown }"
class="item"
@click="tabAddressClick(4)"
>{{ value.townName ? value.townName : '请选择' }}</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="provinceSelect(provinceItem, index)"
>
<span>{{ provinceItem.label }}</span>
<span v-show="provinceItem.selected">
<img src="../../assets/images/sort-select-icon.png" />
</span>
</li>
</ul>
<ul v-show="isShowCity" id="city">
<li
v-for="(cityItem, index) in areaList.cityList"
:key="index"
:class="{ active: cityItem.selected }"
@click="citySelect(cityItem, index)"
>
<span>{{ cityItem.label }}</span>
<span v-show="cityItem.selected">
<img src="../../assets/images/sort-select-icon.png" />
</span>
</li>
</ul>
<ul v-show="isShowCounty" id="county">
<li
v-for="(countyItem, index) in areaList.countyList"
:key="index"
:class="{ active: countyItem.selected }"
@click="countySelect(countyItem, index)"
>
<span>{{ countyItem.label }}</span>
<span v-show="countyItem.selected">
<img src="../../assets/images/sort-select-icon.png" />
</span>
</li>
</ul>
<ul v-show="isShowTown" id="town">
<li
v-for="(townItem, index) in areaList.townList"
:key="index"
:class="{ active: townItem.selected }"
@click="townSelect(townItem, index)"
>
<span>{{ townItem.label }}</span>
<span v-show="townItem.selected">
<img src="../../assets/images/sort-select-icon.png" />
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import {
getProvinceList,
getCityList,
getCountyList,
getTownList,
getHospitalsByRegionId
} from "../../service";
export default {
name: "PicaArea",
data() {
return {
areaList: {
provinceList: [],
cityList: [],
countyList: [],
townList: []
},
value: {
cityId: "",
cityName: "",
countyId: "",
countyName: "",
patientAddress: "",
provinceId: "",
provinceName: "",
townId: "",
townName: "",
regionId: "",
areaDegree: 0
},
isDisabled: true,
isShowProvince: true,
isShowCity: false,
isShowCounty: false,
isShowTown: false,
// 区域选择通用接口参数
queryParams: {
projectId: 374,
regionId: ""
}
};
},
props: {
baseUrl: {
type: String,
default: ""
},
rank: {
type: Number | String,
default: 4
}
},
created() {
// localStorage.setItem('baseUrl',this.baseUrl);
// this.projectId = (this.$route.query && this.$route.query.projectId) || 374;
// this.getProvinceData(this.queryParams);
// if(process.client) {
// if(this.$route && this.$route.query) {
// let cQuery = this.$route.query
// let hospitalIdList = cQuery.hospitalIdList || ''
// this.queryParams.projectId = cQuery.projectId || '';
// }
// }
},
computed: {
...mapGetters({
projectId: "projectId",
provinceList: "provinceList"
})
},
watch: {
projectId(newVal) {
this.queryParams.projectId = newVal;
// this.getProvinceData(this.queryParams);
},
provinceList(newVal) {
this.areaList.provinceList = newVal;
this.areaList.provinceList[0].selected = true
this.value.provinceName = '全部'
// this.areaList.provinceList.map(a => {
// if (a.id == this.value.provinceId) {
// a.selected = true;
// }
// });
}
},
methods: {
...mapActions({
setOrgList: 'setOrgList',
setAreaDegree: 'setAreaDegree'
}),
async getHospitalsByRegionId(params) {
await getHospitalsByRegionId(params).then(res => {
if (res.code === "000000") {
this.setOrgList(res.data.list || [])
}
});
},
async getProvinceData(params) {
console.log('getProvinceData')
await getProvinceList(params).then(res => {
if (res.code === "000000") {
this.areaList.provinceList = res.data && res.data.list || [];
console.log(this.areaList.provinceList);
this.areaList.provinceList.map(a => {
if (a.id == this.value.provinceId) {
a.selected = true;
}
});
}
});
},
async getCityData(params) {
console.log('getCityData')
await getCityList(params).then(res => {
if (res.code === "000000") {
this.areaList.cityList = res.data && res.data.list || [];
if (this.areaList.cityList.length === 0) {
this.isShowProvince = true;
this.isShowCity = false;
this.isDisabled = false;
}
this.areaList.cityList.map(a => {
if (a.id == this.value.cityId) {
a.selected = true;
}
});
}
});
},
async getCountyData(params) {
console.log('getCountyData')
await getCountyList(params).then(res => {
if (res.code === "000000") {
this.areaList.countyList = res.data && res.data.list || [];
if (this.areaList.countyList.length === 0) {
this.isShowProvince = false;
this.isShowCity = true;
this.isShowCounty = false;
this.isDisabled = false;
}
this.areaList.countyList.map(a => {
if (a.id == this.value.countyId) {
a.selected = true;
}
});
}
});
},
async getTownData(params) {
console.log('getTownData')
await getTownList(params).then(res => {
if (res.code === "000000") {
this.areaList.townList = res.data && res.data.list || [];
if (this.areaList.townList.length === 0) {
this.isShowProvince = false;
this.isShowCity = false;
this.isShowCounty = true;
this.isShowTown = false;
this.isDisabled = false;
}
this.areaList.townList.map(a => {
if (a.id == this.value.townId) {
a.selected = true;
}
});
}
});
},
// provinceCallback(provinceId) {
// this.getCityData(provinceId);
// },
// cityCallback(cityId) {
// this.getCountyData(cityId);
// },
// countryCallback(countyId) {
// this.getTownData(countyId);
// },
//选择省份的操作
provinceSelect(item, idx) {
console.log('provinceSelect', item, this.rank);
this.value.regionId = item.id
this.value.provinceId = item.id;
this.queryParams.regionId = item.id;
this.value.provinceName = item.label;
this.value.patientAddress = "";
this.value.cityId = null;
this.value.cityName = "";
this.value.countyId = null;
this.value.countyName = "";
this.value.townId = null;
this.value.townName = "";
// 当前选中的样式
this.areaList.provinceList.map(a => (a.selected = false));
this.areaList.provinceList[idx].selected = true;
// this.setAreaDegree(item.degree)
this.value.areaDegree = item.degree;
if(item.degree == 0){
return;
}
if(item.degree == 3 || item.degree == 4){
// 调用机构接口
this.getHospitalsByRegionId(this.queryParams);
// return;
}
//控制省市县乡数据展示与隐藏
this.isShowProvince = false;
this.isShowCounty = false;
this.isShowTown = false;
if (this.rank > 1) {
this.isShowCity = true;
this.getCityData(this.queryParams);
this.isDisabled = true;
} else {
this.isDisabled = false;
}
// // 当前选中的样式
// this.areaList.provinceList.map(a => (a.selected = false));
// this.areaList.provinceList[idx].selected = true;
},
//选择市的操作
citySelect(item, idx) {
console.log('citySelect', item, this.rank);
this.value.regionId = item.id
this.value.cityId = item.id;
this.queryParams.regionId = item.id;
this.value.cityName = item.label;
this.value.patientAddress = "";
this.value.countyId = null;
this.value.countyName = "";
this.value.townId = null;
this.value.townName = "";
// 当前选中的样式
this.areaList.cityList.map(a => (a.selected = false));
this.areaList.cityList[idx].selected = true;
// this.setAreaDegree(item.degree)
this.value.areaDegree = item.degree;
if(item.degree == 0){
return;
}
if(item.degree == 3 || item.degree == 4){
// 调用机构接口
this.getHospitalsByRegionId(this.queryParams);
// return;
}
//控制省市县乡数据展示与隐藏
this.isShowProvince = false;
this.isShowCity = false;
this.isShowTown = false;
if (this.rank > 2) {
this.isShowCounty = true;
this.getCountyData(this.queryParams);
this.isDisabled = true;
} else {
this.isDisabled = false;
}
},
//选择区/县的操作
countySelect(item, idx) {
console.log('countySelect', item, this.rank);
this.value.regionId = item.id
this.value.countyId = item.id;
this.queryParams.regionId = item.id;
this.value.countyName = item.label;
this.value.townId = null;
this.value.townName = "";
this.value.patientAddress = "";
// 当前选中的样式
this.areaList.countyList.map(a => (a.selected = false));
this.areaList.countyList[idx].selected = true;
// this.setAreaDegree(item.degree)
this.value.areaDegree = item.degree;
if(item.degree == 0){
return;
}
if(item.degree == 3 || item.degree == 4){
// 调用机构接口
this.getHospitalsByRegionId(this.queryParams);
// return;
}
//控制省市县乡数据展示与隐藏
this.isShowProvince = false;
this.isShowCity = false;
this.isShowCounty = false;
if (this.rank > 3) {
this.isShowTown = true;
this.getTownData(this.queryParams);
this.isDisabled = true;
} else {
this.isDisabled = false;
}
},
//选择乡镇的操作
townSelect(item, idx) {
console.log('townSelect', item, this.rank);
this.value.regionId = item.id
this.value.townId = item.id;
this.queryParams.regionId = item.id;
this.value.townName = item.label;
this.value.patientAddress = `${this.value.provinceName}${this.value.cityName}${this.value.countyName}${this.value.townName}`;
// this.setAreaDegree(item.degree)
this.value.areaDegree = item.degree;
if(item.degree == 0){
return;
}
if(item.degree == 3 || item.degree == 4){
// 调用机构接口
this.getHospitalsByRegionId(this.queryParams);
// return;
}
// 当前选中的样式
this.areaList.townList.map(a => (a.selected = false));
this.areaList.townList[idx].selected = true;
this.isDisabled = false;
},
tabAddressClick(tab) {
if (tab === 1) {
this.isShowProvince = true;
this.isShowCity = false;
this.isShowCounty = false;
this.isShowTown = false;
} else if (tab === 2) {
this.isShowProvince = false;
this.isShowCity = true;
this.isShowCounty = false;
this.isShowTown = false;
} else if (tab === 3) {
this.isShowProvince = false;
this.isShowCity = false;
this.isShowCounty = true;
this.isShowTown = false;
} else if (tab === 4) {
this.isShowProvince = false;
this.isShowCity = false;
this.isShowCounty = false;
this.isShowTown = true;
}
},
confirm() {
this.$emit("confirm", this.value);
},
cancelSelect() {
this.$emit("cancel", false);
}
}
};
</script>
<style lang="less" scoped>
.select-wrapper {
font-family: PingFangSC-Regular;
.mask {
position: fixed;
z-index: 3000;
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-area.vue
浏览文件 @ 30b2b711
......@@ -156,16 +156,11 @@ export default {
}
},
created() {
// localStorage.setItem('baseUrl',this.baseUrl);
// this.projectId = (this.$route.query && this.$route.query.projectId) || 374;
// this.projectId = (this.$route && this.$route.query && this.$route.query.projectId) || 374;
// this.getProvinceData(this.queryParams);
if(process.client) {
if(this.$route && this.$route.query) {
let cQuery = this.$route.query
let hospitalIdList = cQuery.hospitalIdList || ''
this.queryParams.projectId = cQuery.projectId || '';
if (process.client) {
if (this.$route && this.$route.query) {
let cQuery = this.$route.query;
let hospitalIdList = cQuery.hospitalIdList || "";
this.queryParams.projectId = cQuery.projectId || "";
}
}
},
......@@ -177,41 +172,36 @@ export default {
},
watch: {
projectId(newVal) {
// alert(newVal)
console.log('###############', newVal);
this.queryParams.projectId = newVal;
// this.getProvinceData(this.queryParams);
},
provinceList(newVal) {
console.log('###############', newVal);
this.areaList.provinceList = newVal;
this.areaList.provinceList[0].selected = true
this.value.provinceName = '全部'
// this.areaList.provinceList.map(a => {
// if (a.id == this.value.provinceId) {
// a.selected = true;
// }
// });
this.areaList.provinceList[0].selected = true;
this.value.provinceName = "全部";
}
},
methods: {
// 映射Store中的Actions
...mapActions({
setOrgList: 'setOrgList',
setAreaDegree: 'setAreaDegree'
setOrgList: "setOrgList",
setAreaDegree: "setAreaDegree"
}),
// 根据区域获取机构列表（一般在是三、四级区域才调用此方法）
async getHospitalsByRegionId(params) {
await getHospitalsByRegionId(params).then(res => {
if (res.code === "000000") {
this.setOrgList(res.data.list || [])
this.setOrgList(res.data.list || []);
}
});
},
},
// 获取省列表
async getProvinceData(params) {
console.log('getProvinceData')
console.log("getProvinceData");
await getProvinceList(params).then(res => {
if (res.code === "000000") {
this.areaList.provinceList = res.data && res.data.list || [];
this.areaList.provinceList = (res.data && res.data.list) || [];
console.log(this.areaList.provinceList);
this.areaList.provinceList.map(a => {
if (a.id == this.value.provinceId) {
......@@ -221,11 +211,13 @@ export default {
}
});
},
// 获取城市列表
async getCityData(params) {
console.log('getCityData')
console.log("getCityData");
await getCityList(params).then(res => {
if (res.code === "000000") {
this.areaList.cityList = res.data && res.data.list || [];
this.areaList.cityList = (res.data && res.data.list) || [];
if (this.areaList.cityList.length === 0) {
this.isShowProvince = true;
this.isShowCity = false;
......@@ -239,11 +231,13 @@ export default {
}
});
},
// 获取区/县列表
async getCountyData(params) {
console.log('getCountyData')
console.log("getCountyData");
await getCountyList(params).then(res => {
if (res.code === "000000") {
this.areaList.countyList = res.data && res.data.list || [];
this.areaList.countyList = (res.data && res.data.list) || [];
if (this.areaList.countyList.length === 0) {
this.isShowProvince = false;
this.isShowCity = true;
......@@ -258,10 +252,12 @@ export default {
}
});
},
// 获取乡/镇列表
async getTownData(params) {
await getTownList(params).then(res => {
if (res.code === "000000") {
this.areaList.townList = res.data && res.data.list || [];
this.areaList.townList = (res.data && res.data.list) || [];
if (this.areaList.townList.length === 0) {
this.isShowProvince = false;
this.isShowCity = false;
......@@ -278,10 +274,10 @@ export default {
});
},
//选择省份的操作
// 选择省份的操作
provinceSelect(item, idx) {
console.log('provinceSelect', item, this.rank);
this.value.regionId = item.id
console.log("provinceSelect", item, this.rank);
this.value.regionId = item.id;
this.value.provinceId = item.id;
this.queryParams.regionId = item.id;
this.value.provinceName = item.label;
......@@ -298,13 +294,11 @@ export default {
this.areaList.provinceList[idx].selected = true;
// this.setAreaDegree(item.degree)
this.value.areaDegree = item.degree;
if(item.degree == 0){
if (item.degree == 0) {
return;
}
if(item.degree == 3 || item.degree == 4){
// 调用机构接口
if (item.degree == 3 || item.degree == 4) {
this.getHospitalsByRegionId(this.queryParams);
// return;
}
//控制省市县乡数据展示与隐藏
this.isShowProvince = false;
......@@ -317,14 +311,12 @@ export default {
} else {
this.isDisabled = false;
}
// // 当前选中的样式
// this.areaList.provinceList.map(a => (a.selected = false));
// this.areaList.provinceList[idx].selected = true;
},
//选择市的操作
// 选择市的操作
citySelect(item, idx) {
console.log('citySelect', item, this.rank);
this.value.regionId = item.id
console.log("citySelect", item, this.rank);
this.value.regionId = item.id;
this.value.cityId = item.id;
this.queryParams.regionId = item.id;
this.value.cityName = item.label;
......@@ -338,15 +330,13 @@ export default {
this.areaList.cityList[idx].selected = true;
// this.setAreaDegree(item.degree)
this.value.areaDegree = item.degree;
if(item.degree == 0){
if (item.degree == 0) {
return;
}
if(item.degree == 3 || item.degree == 4){
// 调用机构接口
if (item.degree == 3 || item.degree == 4) {
this.getHospitalsByRegionId(this.queryParams);
// return;
}
//控制省市县乡数据展示与隐藏
// 控制省市县乡数据展示与隐藏
this.isShowProvince = false;
this.isShowCity = false;
this.isShowTown = false;
......@@ -358,10 +348,11 @@ export default {
this.isDisabled = false;
}
},
//选择区/县的操作
// 选择区/县的操作
countySelect(item, idx) {
console.log('countySelect', item, this.rank);
this.value.regionId = item.id
console.log("countySelect", item, this.rank);
this.value.regionId = item.id;
this.value.countyId = item.id;
this.queryParams.regionId = item.id;
this.value.countyName = item.label;
......@@ -373,15 +364,13 @@ export default {
this.areaList.countyList[idx].selected = true;
// this.setAreaDegree(item.degree)
this.value.areaDegree = item.degree;
if(item.degree == 0){
if (item.degree == 0) {
return;
}
if(item.degree == 3 || item.degree == 4){
// 调用机构接口
if (item.degree == 3 || item.degree == 4) {
this.getHospitalsByRegionId(this.queryParams);
// return;
}
//控制省市县乡数据展示与隐藏
// 控制省市县乡数据展示与隐藏
this.isShowProvince = false;
this.isShowCity = false;
this.isShowCounty = false;
......@@ -393,23 +382,22 @@ export default {
this.isDisabled = false;
}
},
//选择乡镇的操作
// 选择乡镇的操作
townSelect(item, idx) {
console.log('townSelect', item, this.rank);
this.value.regionId = item.id
console.log("townSelect", item, this.rank);
this.value.regionId = item.id;
this.value.townId = item.id;
this.queryParams.regionId = item.id;
this.value.townName = item.label;
this.value.patientAddress = `${this.value.provinceName}${this.value.cityName}${this.value.countyName}${this.value.townName}`;
// this.setAreaDegree(item.degree)
this.value.areaDegree = item.degree;
if(item.degree == 0){
if (item.degree == 0) {
return;
}
if(item.degree == 3 || item.degree == 4){
// 调用机构接口
if (item.degree == 3 || item.degree == 4) {
this.getHospitalsByRegionId(this.queryParams);
// return;
}
// 当前选中的样式
this.areaList.townList.map(a => (a.selected = false));
......@@ -449,183 +437,183 @@ export default {
};
</script>
<style lang="less" scoped>
.select-wrapper {
font-family: PingFangSC-Regular;
.mask {
position: fixed;
z-index: 3000;
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;
}
}
.select-wrapper {
font-family: PingFangSC-Regular;
.mask {
position: fixed;
z-index: 3000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(55, 56, 57, 0.6);
}
.address-select {
.address-wrap {
position: absolute;
width: 100%;
height: auto;
/*height: 196px;*/
height: 293px;
background-color: #ffffff;
box-sizing: border-box;
bottom: 0;
left: 0;
right: 0;
.show-address-header {
.tip-header {
position: relative;
height: 58px;
line-height: 58px;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
font-size: 17px;
display: flex;
position: relative;
padding-bottom: 4px;
justify-content: space-between;
padding: 0 15px;
box-sizing: border-box;
&: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);
.cancel-btn {
color: #999;
}
.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;
}
h3 {
font-size: 18px;
color: #373839;
font-weight: 400;
}
&.active {
color: #373839;
font-family: PingFangSC-Medium;
/*font-weight:500;*/
}
.submit-btn {
font-size: 17px;
outline: none;
border: 1px solid transparent;
background-color: transparent;
color: #449284 !important;
&.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%);
&:disabled {
color: #c7c8c9;
}
}
}
.address-content {
position: relative;
.address-select {
width: 100%;
height: 100%;
height: auto;
/*height: 196px;*/
overflow: hidden;
box-sizing: border-box;
ul {
.show-address-header {
width: 100%;
height: 196px;
overflow-y: auto;
box-sizing: border-box;
padding: 10px 13px;
-webkit-overflow-scrolling: touch;
position: static;
-webkit-transform: translateZ(0px);
display: -webkit-box;
display: -webkit-flex;
display: flex;
position: relative;
padding-bottom: 4px;
li {
height: 35px;
line-height: 35px;
&: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;
width: 100%;
overflow-x: hidden;
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;
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;
position: relative;
&:last-of-type {
padding-right: 15px;
}
&.active {
color: #449284;
color: #373839;
font-family: PingFangSC-Medium;
/*font-weight:500;*/
}
img {
&.active:after {
content: " ";
position: absolute;
left: 50%;
bottom: 0;
right: 0;
width: 10px;
height: 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
浏览文件 @ 30b2b711
<!-- 选择地区组件 -->
<!-- 选择机构组件 -->
<template>
<div class="select-wrapper">
<div class="mask" @click="cancel" @touchmove.prevent>
......
components/common/pica-process.vue
浏览文件 @ 30b2b711
<!-- Tabs组件 -->
<!-- 进度条组件 -->
<template>
<div class="common-process">
<span class="bar" :style="{'width': maxPocessWidth, 'background': barColor}"></span><span class="desc">{{value}}{{unitName}}</span>
......@@ -69,11 +69,7 @@ export default {
},
deep: true
}
},
mounted() {
},
methods: {}
}
};
</script>
......@@ -92,8 +88,6 @@ export default {
&.desc {
font-size: 18px;
font-weight: 700;
// height: 20px;
// line-height: 20px;
color: #373839;
}
}
......
pages/examscore.vue
浏览文件 @ 30b2b711
<template>
<section>
<CommonHeader title="完成项目考试分数情况"></CommonHeader>
<!-- <CommonTitleMini :title="title" :needRightBtn="needRightBtn"></CommonTitleMini> -->
<CommonTitleWithDropdown :dataList="dropdownList" :title="title" :needRightBtn="needRightBtn" @selectSortItem="selectSortItem"></CommonTitleWithDropdown>
<ExamScoreList class="pdt-50" :dataList="dataList"></ExamScoreList>
<CommonNoMore v-if="dataList.length >= 10" class="mt-10"></CommonNoMore>
......@@ -12,7 +11,6 @@ const cookies = require("cookie-universal")();
import { getGeneralExam } from "@/service";
import CommonHeader from "@/components/common/common-header";
// import CommonTitleMini from "@/components/common/common-title-mini";
import CommonTitleWithDropdown from "@/components/common/common-title-with-dropdown";
import CommonNoMore from "@/components/common/common-no-more";
import ExamScoreList from "@/components/bussiness/exam-score-list";
......@@ -61,36 +59,6 @@ export default {
CommonNoMore,
ExamScoreList
},
// async asyncData( { query } ) {
// let queryGDParams = {
// appSelectType: 2,
// beginDate: "",
// endDate: "",
// hospitalIdList: [],
// originalFlag: 2, // 默认值0：0不查看原始数据
// projectId: 374,
// regionId: "",
// timeFlag: 1,
// pageNo: 0,
// pageSize: 0,
// sourceType: 1,
// pageCfg: {
// type: 1
// }
// };
// let hospitalIdList = query.hospitalIdList || ''
// queryGDParams.projectId = query.projectId || '';
// queryGDParams.regionId = query.regionId || '';
// queryGDParams.hospitalIdList = hospitalIdList && hospitalIdList.split(',') || [];
// cookies.set("token", query.token || '');
// let examData = await getGeneralExam(queryGDParams);
// console.log(examData);
// return {
// allData: examData.data,
// dataList: examData.data && examData.data.examScoreList || [],
// title: `共${examData.data && examData.data.examScoreList && examData.data.examScoreList.length || 0}条数据`
// }
// },
created() {
if (process.client) {
if(this.$route && this.$route.query) {
......@@ -99,7 +67,6 @@ export default {
this.queryGDParams.regionId = cQuery.regionId || '';
let hospitalIdList = cQuery.hospitalIdList || ''
this.queryGDParams.hospitalIdList = hospitalIdList && hospitalIdList.split(',') || [];
// cookies.remove("token");
cookies.set("lreporttoken", cQuery.token || '');
this.getGeneralExam(this.queryGDParams);
}
......
pages/examtimes.vue
浏览文件 @ 30b2b711
......@@ -47,36 +47,6 @@ export default {
CommonNoMore,
ExamTimesList
},
// async asyncData( { query } ) {
// let queryGDParams = {
// appSelectType: 1,
// beginDate: "",
// endDate: "",
// hospitalIdList: [],
// originalFlag: 2, // 默认值0：0不查看原始数据
// projectId: 374,
// regionId: "",
// timeFlag: 1,
// pageNo: 0,
// pageSize: 0,
// sourceType: 1,
// pageCfg: {
// type: 1
// }
// };
// let hospitalIdList = query.hospitalIdList || ''
// queryGDParams.projectId = query.projectId || '';
// queryGDParams.regionId = query.regionId || '';
// queryGDParams.hospitalIdList = hospitalIdList && hospitalIdList.split(',') || [];
// cookies.set("token", query.token || '');
// let examData = await getGeneralExam(queryGDParams);
// console.log(examData);
// return {
// dataList: examData.data && examData.data.examTimesList,
// title: `共${(examData.data && examData.data.examTimesList && examData.data.examTimesList.length) || 0}条数据`
// }
// },
created() {
if (process.client) {
......@@ -86,7 +56,6 @@ export default {
this.queryGDParams.projectId = cQuery.projectId || '';
this.queryGDParams.regionId = cQuery.regionId || '';
this.queryGDParams.hospitalIdList = hospitalIdList && hospitalIdList.split(',') || [];
// cookies.remove("token");
cookies.set("lreporttoken", cQuery.token || '');
this.getGeneralExam(this.queryGDParams);
}
......
pages/index copy.vue 已删除 100644 → 0
浏览文件 @ 04bcdae3
<template>
<section class="container">
<CommonHeader :title="projectInfo.projectName | shortName"></CommonHeader>
<CommonAreaSelect
@areaClick="areaTabClick"
@orgClick="orgTabClick"
:areaName="areaName"
:orgName="orgName"
:showArea="isShowArea"
:showOrg="isShowOrg">
</CommonAreaSelect>
<CommonTaps :projectInfo="projectInfo" @tabClicked="tabClicked"></CommonTaps>
<!-- 总体概况 -->
<article v-show="cIndex === 0">
<CommonSwiperItem
:isSingleOrg="isSingleOrg"
:percentData="allData.percentData || {}"
:certFlag="projectInfo.certFlag"
@tipsClick="tipsSwiperClick"
></CommonSwiperItem>
<div v-show="!isSingleOrg">
<CommonTitle v-if="projectInfo.certFlag" title="证书分布情况"></CommonTitle>
<ChartPie v-if="projectInfo.certFlag" :certFlag="projectInfo.certFlag" id="certPieId2" :pieData="(allData && allData.certData)"></ChartPie>
<CommonTitle v-if="projectInfo.certFlag" title="证书级别按学历分布情况"></CommonTitle>
<ChartColumnStack v-if="projectInfo.certFlag" :certFlag="projectInfo.certFlag" :echartsData="echartsData"></ChartColumnStack>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="项目情况排名"></CommonTitle>
<RankingList :certFlag="projectInfo.certFlag" :rankList="studyRankList.slice(0, 5)"></RankingList>
<ShowAll v-show="studyRankList.length > 5" @action="gotoPage('/rankedu', true)"></ShowAll>
<CommonSplitLine></CommonSplitLine>
<CommonTitleWithWhat @tipsClick="tipsRankingItemClick" title="完成天数排名"></CommonTitleWithWhat>
<RankingItemDays :rankList="costRankList.slice(0, 5)"></RankingItemDays>
<ShowAll v-show="costRankList.length > 5" @action="gotoPage('/rankdays')"></ShowAll>
</div>
<div v-show="isSingleOrg">
<CommonTitle title="培训机构情况"></CommonTitle>
<OrgDoctorList
@orgDoctorTabChange="orgDoctorTabChange"
:certUserList="orgDoctorTabData.certUserList"
:noCertUserList="orgDoctorTabData.noCertUserList"
:noJoinList="orgDoctorTabData.noJoinList"
:certFlag="projectInfo.certFlag"
:containOfficialFlag="projectInfo.containOfficialFlag"
></OrgDoctorList>
</div>
<CommonBottomInfo></CommonBottomInfo>
</article>
<!-- 人群分析 -->
<article v-show="cIndex === 1">
<CommonTitleWithBtn title="人员学历情况" @btnClick="analysisEduClick"></CommonTitleWithBtn>
<ChartPieEdu :dataList="analysisEduData"></ChartPieEdu>
<CommonSplitLine></CommonSplitLine>
<CommonTitleWithBtn title="人员职称情况" @btnClick="analysisTitleClick"></CommonTitleWithBtn>
<ChartPieTitle :dataList="analysisTitleData"></ChartPieTitle>
<CommonBottomInfo></CommonBottomInfo>
</article>
<!-- 课程分析 -->
<article v-show="(cIndex === 2) && (projectInfo.existCourse == 1)" style="padding-top: 8px;">
<CourseTimesStat :totalSize="courseInfo.totalSize" :maxDuration="courseInfo.pCourseTotalTime" :avgDuration="courseInfo.pCourseAvg" :processDataObj="processDataObj"></CourseTimesStat>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="课程列表"></CommonTitle>
<CourseTimesList :dataList="courseInfo.pCourseList"></CourseTimesList>
<CommonBottomInfo></CommonBottomInfo>
</article>
<!-- 考试分析 -->
<article v-show="(cIndex === 3) && (projectInfo.existExam == 1)">
<CommonCard :cardList="examCardList"></CommonCard>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="完成项目考试次数情况"></CommonTitle>
<ChartColumnVerticalTimes :dataList="(generalExamData.examTimesList || []).slice(0, 5)" id="chartCourseTimesId" :colors="colors"></ChartColumnVerticalTimes>
<ShowAll v-show="generalExamData && generalExamData.examTimesList.length > 5" @action="gotoPage('/examtimes')" class="mt-10"></ShowAll>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="完成项目考试分数情况"></CommonTitle>
<ChartColumnVerticalScore id="chartCourseScoreId" :dataList="generalExamData.examScoreList"></ChartColumnVerticalScore>
<ShowAll @action="gotoPage('/examscore')" class="mt-10"></ShowAll>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="考试列表"></CommonTitle>
<ExamList :dataList="examInfoList"></ExamList>
<CommonBottomInfo></CommonBottomInfo>
</article>
<!-- 学习效果分析 -->
<article v-show="(cIndex === 4) && (projectInfo.existEffect == 1)">
<CommonCard :needBG="needBG" :cardList="effectCardList"></CommonCard>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="不同学历培训前后正确率对比"></CommonTitle>
<ChartColumnVerticalTC :dataList="studyEffect.educationEffectList" id="chartColumnVerticalTC"></ChartColumnVerticalTC>
<CommonSplitLine style="margin-top: 10px;"></CommonSplitLine>
<CommonTitle title="培训前后知识点掌握情况"></CommonTitle>
<ChartColumnHorizontalTC :dataList="studyEffect.knowledgeEffectList" id="ChartColumnVerticalTC2"></ChartColumnHorizontalTC>
<ShowAll @action="gotoPage('/klgpoint')" class="mt-10"></ShowAll>
<CommonBottomInfo></CommonBottomInfo>
</article>
<PicaArea
v-show="isShowArea"
@confirm="areaConfirm"
@cancel="areaCancel"
:projectId="projectId"
:token="token"
></PicaArea>
<PicaOrg v-show="isShowOrg" @confirm="orgConfirm" @cancel="orgCancel"></PicaOrg>
<CommonLoading v-show="false"></CommonLoading>
<PopTips :tipsContent="tipsContent" @clickTips="clickTips" v-show="isShowTips"></PopTips>
</section>
</template>
<script>
const cookies = require("cookie-universal")();
import { goPageByNative } from "@/utils";
import { mapGetters, mapActions } from "vuex";
import {
getProvinceList,
getUserAnalysis,
getHospitalsCNT,
getGeneralPersonal,
getGeneralCourse,
getGeneralExam,
getProjectInfo,
getGeneralExamList,
getStudyEffect
} from "@/service";
import CommonHeader from "@/components/common/common-header";
import CommonTitle from "@/components/common/common-title";
import CommonTitleWithWhat from "@/components/common/common-title-with-what";
import CommonTitleWithBtn from "@/components/common/common-title-with-btn";
import CommonLoading from "@/components/common/common-loading";
import CommonTaps from "@/components/common/common-tabs";
import CommonSwiperItem from "@/components/common/common-swiper-item";
import CommonSplitLine from "@/components/common/common-split-line";
import RankingList from "@/components/bussiness/ranking-item";
import ShowAll from "@/components/common/common-show-all";
import CommonBottomInfo from "@/components/common/common-bottom-info";
import RankingItemDays from "@/components/bussiness/ranking-item-days";
import ChartPie from "@/components/bussiness/charts/chart-pie";
import ChartPieEdu from "@/components/bussiness/charts/chart-pie-edu";
import ChartPieTitle from "@/components/bussiness/charts/chart-pie-title";
import ChartColumnStack from "@/components/bussiness/charts/chart-column-stack";
import ChartColumnVerticalTimes from "@/components/bussiness/charts/chart-column-vertical-times";
import ChartColumnVerticalScore from "@/components/bussiness/charts/chart-column-vertical-score";
import ChartColumnVerticalTC from "@/components/bussiness/charts/chart-column-vertical-tc";
import ChartColumnHorizontalTC from "@/components/bussiness/charts/chart-column-horizontal-tc";
import PicaArea from "@/components/common/pica-area";
import PicaOrg from "@/components/common/pica-org";
import CommonAreaSelect from "@/components/common/common-area-select";
import ProcessBar from "@/components/common/pica-process";
import CourseTimesStat from "@/components/bussiness/course-times-stat";
import CourseTimesList from "@/components/bussiness/course-times-list";
import OrgDoctorList from "@/components/bussiness/org-doctor-list";
import ExamList from "@/components/bussiness/exam-list";
import PopTips from "@/components/bussiness/pop-tips";
import CommonCard from "@/components/common/common-card";
import { getGeneralData } from "@/service/index";
export default {
components: {
CommonHeader,
CommonTitle,
CommonLoading,
CommonTaps,
CommonSwiperItem,
CommonSplitLine,
RankingList,
ChartPie,
ChartPieEdu,
ChartPieTitle,
ShowAll,
CommonBottomInfo,
RankingItemDays,
ChartColumnStack,
PicaArea,
PicaOrg,
CommonAreaSelect,
ProcessBar,
CourseTimesStat,
CourseTimesList,
CommonCard,
ExamList,
// ChartColumnVertical,
ChartColumnVerticalTC,
ChartColumnHorizontalTC,
CommonTitleWithBtn,
OrgDoctorList,
ChartColumnVerticalTimes,
ChartColumnVerticalScore,
PopTips,
CommonTitleWithWhat,
},
data() {
return {
isShowArea: false,
isShowOrg: false,
isShowTips: false,
isShowRankingItemTips: false,
tipsContent: '',
areaName: '全部',
orgName: '全部机构',
cIndex: 0,
colors: ["#39AF9A", "#FF9A4B", "#abb7bb", "#76d2d2"],
needBG: true,
effectCardList: [
{
count: 65,
unitName: "%",
description: "培训前正确率"
},
{
count: 80,
unitName: "%",
description: "培训后正确率"
}
],
allData: {},
studyRankList: [],
costRankList: [],
projectId: "",
token:
"BACBEEBBAE2247DBBD7CD0E15FE0CE93" ||
"A220943B006347799F277CC524EBB662",
isOrgStat: false,
// 区域选择通用接口参数
queryParams: {
projectId: 374,
regionId: ""
},
// 查询概况数据
queryGDParams: {
beginDate: "",
endDate: "",
hospitalIdList: [],
originalFlag: 2, // 默认值0：0不查看原始数据
projectId: 374,
regionId: "",
timeFlag: 1,
pageNo: 0,
pageSize: 0,
sourceType: 1,
pageCfg: {
type: 1
}
},
echartsData: null,
analysisData: {
eduList: { join: [], finish: []},
titleList: { join: [], finish: []},
},
analysisEduData: [],
analysisTitleData: [],
CNTParams: {
projectId: 374,
regionId: ""
},
hospitalCnt: 2,
isSingleOrg: false,
orgDoctorTabData: {
certUserList: [],
noCertUserList: [],
noJoinList: []
},
projectInfo: {
projectName: '项目名称',
certFlag: 0, // 项目证书情况 0：无证；1：单证书；2：多证书
existCourse: 2, // 是否显示课程分析 1：显示 2：不显示
existEffect: 2, // 是否显示学习效果分析 1：显示 2：不显示
existExam: 2, // 是否显示考试分析 1：显示 2：不显示
roleType: 0, // 0：普通人 1：内部管理员 2：项目负责人 3：次级负责人
status: 0, // 是否显示查看原始数据 1：显示 2：不显示
containOfficialFlag: 0 // 0: 无正式考考试 1: 有正式考考试
},
courseInfo: {
pCourseTotalTime: 100,
pCourseAvg: 50,
pCourseList: []
},
generalExamData: {
beforeExamCount: 4,
afterExamCount: 4,
examTitleCount: 800,
examTimesList: [],
examScoreList: [],
fiveExamScoreList: [],
tenExamScoreList: []
},
examCardList: [],
examInfoList: [],
studyEffect: {
beforeRate: 0,
afterRate: 0,
educationEffectList: [],
knowledgeEffectList: []
},
processDataObj: {
}
};
},
filters: {
shortName: function (value, length = 15, append = '...') {
if (value && value.length > length) {
return value.substring(0, length) + append
} else {
return value
}
}
},
computed: {
...mapGetters({
orgList: "orgList",
areaDegree: "areaDegree"
}),
},
async asyncData() {
return {};
},
created() {
if (process.client) {
this.projectId = (this.$router && this.$route.query && this.$route.query.projectId) || 374;
this.queryGDParams.projectId = this.projectId;
this.CNTParams.projectId = this.projectId;
this.queryParams.projectId = this.projectId;
if (this.$rocNative.isWeb) {
this.setUserToken(this.token);
cookies.set("lreporttoken", this.token);
this.setProjectId(this.projectId);
} else {
this.getUserInfo();
}
}
// this.$store.dispatch('searchHospital', { name: '测试' });
},
mounted() {
if (this.$rocNative.isWeb) {
this.getProjectInfo(this.queryParams);
}
},
methods: {
// 切换机构人员列表中的tabs
orgDoctorTabChange(index) {
this.queryGDParams.pageCfg.type = index + 1;
this.getGeneralPersonal(this.queryGDParams);
},
// 查询用户信息和权限
getProjectInfo(params) {
getProjectInfo({ projectId: this.projectId }).then(res => {
if (res.code === "000000") {
this.projectInfo = res.data;
getProvinceList(params).then(res => {
if (res.code === "000000") {
this.queryGDParams.regionId = (res.data && res.data.list[0] && res.data.list[0].id) || '';
this.CNTParams.regionId = (res.data && res.data.list[0] && res.data.list[0].id) || '';
this.setProvinceList(res.data.list);
this.getHospitalsCNT(this.CNTParams);
}
});
}
});
},
// 异步延迟调用其它Tabs接口（除了数据概述）
otherInterface() {
setTimeout(() => {
this.getGeneralExam(this.queryGDParams);
this.getUserAnalysis(this.queryGDParams);
this.getGeneralCourse(this.queryGDParams);
this.getStudyEffect(this.queryGDParams);
}, 100);
},
// 根据地区查询地区下是否有机构
getHospitalsCNT(params) {
getHospitalsCNT(params).then(res => {
if (res.code === "000000") {
this.hospitalCnt = res.data.hospitalCnt;
this.isSingleOrg = res.data.hospitalCnt === 1;
if (this.isSingleOrg) {
// 只有一个机构，则调用另外一个接口（机构下人员）
this.queryGDParams.hospitalIdList = [];
this.queryGDParams.hospitalIdList.push(res.data.list[0].hospitalId);
this.getGeneralPersonal(this.queryGDParams);
} else {
this.getGeneralData(this.queryGDParams);
}
this.otherInterface();
}
});
},
// 请求单个机构下的数据(总体概述的数据)
getGeneralPersonal(params) {
getGeneralPersonal(params).then(res => {
if (res.code === "000000") {
this.allData = res.data;
this.studyRankList = this.allData.studyRank || [];
this.costRankList = this.allData.costRank || [];
if (params.pageCfg.type === 1) {
this.orgDoctorTabData.certUserList = res.data.personData;
} else if (params.pageCfg.type === 2) {
this.orgDoctorTabData.noCertUserList = res.data.personData;
} else {
this.orgDoctorTabData.noJoinList = res.data.personData;
}
}
});
},
// 请求多个机构下的数据
async getGeneralData(queryData) {
await getGeneralData(queryData).then(res => {
if (res.code === "000000") {
this.allData = res.data;
this.studyRankList = this.allData.studyRank || []
this.costRankList = this.allData.costRank || [];
this.echartsData = res.data.eduData;
}
});
},
// 人群分析
async getUserAnalysis(queryData) {
await getUserAnalysis(queryData).then(res => {
if (res.code === "000000") {
this.analysisData = res.data;
this.analysisEduData = res.data.eduList.join;
this.analysisTitleData = res.data.titleList.join;
}
});
},
// 考试分析
async getGeneralExam(queryData) {
// 上面三个图标数据
await getGeneralExam(queryData).then(res => {
if (res.code === "000000") {
this.generalExamData = res.data;
this.setExamTimesList(res.data.examTimesList)
this.setExamScoreList(res.data.examScoreList)
this.examCardList = [
{
count: res.data.afterExamCount,
unitName: "门",
description: "正式考试数"
},
{
count: res.data.beforeExamCount,
unitName: "门",
description: "模拟考试数"
},
{
count: res.data.examTitleCount,
unitName: "道",
description: "所有考题数"
}
];
}
});
// 下面一个列表数据
await getGeneralExamList(queryData).then(res => {
if (res.code === "000000") {
this.examInfoList = res.data.examInfoList || []
}
});
},
// 课程数据
async getGeneralCourse(params) {
await getGeneralCourse(params).then(res => {
if (res.code === "000000") {
this.processDataObj = {
maxDuration: res.data.pCourseTotalTime,
avgDuration: res.data.pCourseAvg
}
this.processDataObj.maxDuration = res.data.pCourseTotalTime;
this.processDataObj.avgDuration = res.data.pCourseAvg;
// :totalSize="courseInfo.totalSize" :maxDuration="courseInfo.pCourseTotalTime"
this.courseInfo = res.data;
}
});
},
// 学习效果分析
async getStudyEffect(params) {
await getStudyEffect(params).then(res => {
if (res.code === "000000") {
this.studyEffect = res.data;
this.effectCardList[0].count = (res.data.beforeRate * 100).toFixed(1);
this.effectCardList[1].count = (res.data.afterRate * 100).toFixed(1);
}
});
},
tabClicked(index) {
this.cIndex = index;
},
// 清空参数
clearParams() {
this.orgName = '全部机构';
this.queryGDParams.hospitalIdList = [];
// this.setOrgList([]);
// this.setRegionId
},
// 确认选择区域
areaConfirm(selData) {
this.clearParams();
this.queryGDParams.regionId = selData.regionId;
this.CNTParams.regionId = selData.regionId;
this.getHospitalsCNT(this.CNTParams);
this.isShowArea = false;
this.setAreaDegree(selData.areaDegree);
if(selData.townName || selData.countyName || selData.cityName || selData.provinceName) {
this.areaName = this.shortName(selData.townName || selData.countyName || selData.cityName || selData.provinceName, 6)
}
},
// 取消选择区域
areaCancel() {
this.isShowArea = false;
},
// 确认选择机构
orgConfirm(selData) {
let hospitalIds = [];
let hospitalNames = [];
let orgName = '';
selData.forEach(org => {
if (org.selected) {
hospitalIds.push(org.hospitalId);
hospitalNames.push(org.hospitalName);
}
});
// 如果没有选择机构，则重新获取所有数据
this.isShowOrg = false;
this.orgName = this.shortName(hospitalNames[0] || '全部机构', 6);
if(hospitalIds.length == 0) {
this.getHospitalsCNT(this.CNTParams);
return;
}
this.queryGDParams.hospitalIdList = hospitalIds;
if (hospitalIds.length === 1) {
// this.hospitalCnt = 1
this.isSingleOrg = true;
this.getGeneralPersonal(this.queryGDParams);
} else {
this.isSingleOrg = false;
this.getGeneralData(this.queryGDParams);
}
setTimeout(() => {
this.getUserAnalysis(this.queryGDParams);
this.projectInfo.existCourse == 1 && this.getGeneralCourse(this.queryGDParams);
this.projectInfo.existExam == 1 && this.getGeneralExam(this.queryGDParams);
this.projectInfo.existEffect == 1 && this.getStudyEffect(this.queryGDParams);
}, 100);
},
// 取消选择机构
orgCancel() {
this.isShowOrg = false;
},
// 弹出选择区域控件
areaTabClick() {
if(this.isShowOrg) {
this.isShowOrg = false;
}
this.isShowArea = !this.isShowArea;
},
// 弹出选择机构控件
orgTabClick() {
if(this.areaDegree !== 3 && this.areaDegree !== 4) {
this.$toast('选择区/县后才可选择机构');
return;
}
if(this.orgList.length === 0) {
this.$toast('此区域下无机构');
return;
}
this.isShowOrg = !this.isShowOrg;
},
// 通用跳转页面
gotoPage(subUrl, hasCert) {
let subUrlAndParams = `${subUrl}?token=${this.token}&projectId=${this.queryGDParams.projectId}&regionId=${this.queryGDParams.regionId}&hospitalIdList=${this.queryGDParams.hospitalIdList.join(',')}`
if(hasCert) {
subUrlAndParams += `&certFlag=${this.projectInfo.certFlag}`
}
if (this.$rocNative.isWeb) {
this.$router.push(subUrlAndParams);
} else {
let nativeUrl = `/lreport_ssr${subUrlAndParams}`
goPageByNative(this, nativeUrl);
}
},
// 人员学历情况切换按钮
analysisEduClick(index) {
this.analysisEduData = this.analysisData.eduList[
index ? "finish" : "join"
] || [];
this.$forceUpdate();
},
// 人员职称情况切换按钮
analysisTitleClick(index) {
this.analysisTitleData = this.analysisData.titleList[
index ? "finish" : "join"
] || [];
this.$forceUpdate();
},
// 与原生交互，获取用户信息
getUserInfo() {
this.$rocNative.getUserInfo &&
this.$rocNative.getUserInfo().then(params => {
this.token = params.userToken;
// cookies.remove("token");
cookies.set("lreporttoken", this.token);
this.setUserToken(this.token);
this.setProjectId(this.projectId);
this.getProjectInfo(this.queryParams);
});
},
// 弹出提示信息一
tipsRankingItemClick() {
this.tipsContent = '在线项目完成天数=完成项目时间-开始参与项目时间'
this.isShowTips = true
},
// 弹出提示信息二
tipsSwiperClick() {
this.tipsContent = '是已获证人数/应参与人数*100%'
this.isShowTips = true
},
// 关闭提示信息
clickTips() {
this.isShowTips = false
},
// 文本截断
shortName: function (value, length = 15, append = '...') {
if (value && value.length > length) {
return value.substring(0, length) + append
} else {
return value
}
},
// 映射Store中的Actions
...mapActions({
setProjectId: "setProjectId",
setRegionId: "setRegionId",
setUserToken: "setUserToken",
setProvinceList: "setProvinceList",
setExamTimesList: "setExamTimesList",
setExamScoreList: "setExamScoreList",
setOrgList: "setOrgList",
setAreaDegree: "setAreaDegree"
})
}
};
</script>
<style lang="less" scoped>
.container {
margin: 0 auto;
font-size: 17px;
h1 {
font-size: 36px;
text-align: center;
}
.m1 {
width: 100%;
> div {
width: 100%;
}
}
.mt-10 {
margin-top: 0;
}
}
</style>
pages/index.vue
浏览文件 @ 30b2b711
......@@ -276,35 +276,7 @@ export default {
courseInfo: {
pCourseTotalTime: 0,
pCourseAvg: 0,
pCourseList: [{
"courseId":765,
"courseName":"ww学情无比例不同专用四",
"courseTime":159,
"averageTime":23,
"joinCount":27,
"finishCount":7
},{
"courseId":765,
"courseName":"ww学情无比例不同专用四",
"courseTime":159,
"averageTime":23,
"joinCount":27,
"finishCount":7
},{
"courseId":765,
"courseName":"ww学情无比例不同专用四",
"courseTime":159,
"averageTime":23,
"joinCount":27,
"finishCount":7
},{
"courseId":765,
"courseName":"ww学情无比例不同专用四",
"courseTime":159,
"averageTime":23,
"joinCount":27,
"finishCount":7
}]
pCourseList: []
},
generalExamData: {
beforeExamCount: 4,
......@@ -369,6 +341,7 @@ export default {
}
},
methods: {
// 获取可区域高度
getViewportHeight() {
var doc = document;
var docE = doc.documentElement;
......@@ -541,15 +514,15 @@ export default {
});
},
// Tabs切换
tabClicked(index) {
this.cIndex = index;
},
// 清空参数
clearParams() {
this.orgName = '全部机构';
this.queryGDParams.hospitalIdList = [];
// this.setOrgList([]);
// this.setRegionId
},
// 确认选择区域
......@@ -599,13 +572,8 @@ export default {
this.getGeneralData(this.queryGDParams);
}
this.otherInterface();
// setTimeout(() => {
// this.getUserAnalysis(this.queryGDParams);
// this.projectInfo.existCourse == 1 && this.getGeneralCourse(this.queryGDParams);
// this.projectInfo.existExam == 1 && this.getGeneralExam(this.queryGDParams);
// this.projectInfo.existEffect == 1 && this.getStudyEffect(this.queryGDParams);
// }, 100);
},
// 取消选择机构
orgCancel() {
this.isShowOrg = false;
......@@ -710,7 +678,6 @@ export default {
setProvinceList: "setProvinceList",
setExamTimesList: "setExamTimesList",
setExamScoreList: "setExamScoreList",
setOrgList: "setOrgList",
setAreaDegree: "setAreaDegree"
})
}
......
pages/klgpoint.vue
浏览文件 @ 30b2b711
......@@ -25,7 +25,7 @@ export default {
beginDate: "",
endDate: "",
hospitalIdList: [],
originalFlag: 2, // 默认值0：0不查看原始数据
originalFlag: 2,
projectId: 374,
regionId: "",
timeFlag: 1,
......@@ -46,7 +46,6 @@ export default {
ChartColumnHorizontalTCLong,
TipsInfo
},
// async asyncData( context ) { } // async方法，由于图标比较难实现，则放弃使用
created() {
if (process.client) {
......@@ -56,7 +55,6 @@ export default {
this.queryGDParams.projectId = cQuery.projectId || "";
this.queryGDParams.regionId = cQuery.regionId || "";
this.queryGDParams.hospitalIdList = hospitalIdList && hospitalIdList.split(',') || [];
// cookies.remove("token");
cookies.set("lreporttoken", cQuery.token || "");
this.getStudyEffect(this.queryGDParams);
}
......
pages/rankdays.vue
浏览文件 @ 30b2b711
......@@ -21,7 +21,6 @@ export default {
listTitle: '共0条数据',
rankList: [],
queryGDParams: {
// appSelectType: 1,
beginDate: "",
endDate: "",
hospitalIdList: [],
......@@ -36,16 +35,6 @@ export default {
type: 1
}
},
// dataList: [{
// desc: '按获证比例排名',
// type: 1
// },{
// desc: '按获证人数排名',
// type: 2
// },{
// desc: '按参与人数排名',
// type: 3
// }],
};
},
components: {
......
pages/rankedu.vue
浏览文件 @ 30b2b711
......@@ -22,7 +22,6 @@ export default {
rankList: [],
needRightBtn: true,
queryGDParams: {
// appSelectType: 1,
beginDate: "",
endDate: "",
hospitalIdList: [],
......@@ -77,10 +76,8 @@ export default {
type: 3
}]
}
// cookies.remove("token");
cookies.set("lreporttoken", cQuery.token || '');
this.getStudyRankData(this.queryGDParams);
console.log(this.queryGDParams)
}
}
},
......@@ -90,7 +87,6 @@ export default {
await getStudyRankData(params).then(res => {
if (res.code === "000000") {
this.rankList = res.data.studyRank;
// this.title = `共${this.rankList.length}个省`
this.title = `共${this.rankList.length}条数据`
}
});
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或